/* ==========================================================================
   THE JACK WILDS ARCADE (#arcade)
   The shack front (neon sign, roller shutter, cabinets), the membership card,
   the offer and the waitlist. js/arcade.js builds the set. Scoped to .arc-*.
   ========================================================================== */

.arc {
  --arc-lamp: 255, 176, 96;          /* the bare bulb's light, as rgb */
  --arc-jam: .44;                    /* keep in step with JAM in arcade.js */
  --arc-ink: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='r'><feTurbulence baseFrequency='.9' numOctaves='2'/><feComponentTransfer><feFuncA type='discrete' tableValues='1 1 1 1 1 1 0 1'/></feComponentTransfer></filter><rect width='120' height='120' filter='url(%23r)'/></svg>");
  --arc-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  position: relative;
  isolation: isolate;
}

/* ── Backdrop: the shack art, dim, with red night air ───────────────────── */
.arc-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--ink);
}
.arc-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/brand/arcade-shack.webp') 22% 38% / cover no-repeat;
  opacity: .2;
}
.arc-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(52% 42% at 28% 56%, rgba(217, 72, 44, .2), transparent 72%),
    radial-gradient(38% 34% at 78% 44%, rgba(242, 177, 62, .07), transparent 70%),
    linear-gradient(180deg, var(--ink) 0%, rgba(12, 10, 8, .35) 14%, rgba(12, 10, 8, .5) 78%, var(--ink) 100%);
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.arc-wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(30px, 4vw, 56px);
}
.arc-head { margin-bottom: 0; }
.arc-head h2 { max-width: 12ch; }
.arc-head .lede { max-width: 46ch; }

.arc-stage { position: relative; z-index: 1; min-width: 0; container-type: inline-size; }
.arc-side {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(28px, 3.2vw, 42px);
  align-content: start;
  min-width: 0;
}

@media (min-width: 1000px) {
  .arc-wrap {
    grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
    column-gap: clamp(40px, 4.4vw, 80px);
    align-items: start;
  }
  .arc-head {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
    column-gap: clamp(40px, 4.4vw, 80px);
    align-items: end;
  }
  .arc-head .kicker { grid-column: 1 / -1; }
  .arc-head h2 { grid-column: 1; }
  .arc-head .lede { grid-column: 2; padding-bottom: .4em; }
  /* the shack stays in view beside the card and form, when the window is tall enough (set by arcade.js) */
  .arc-stage.is-sticky { position: sticky; top: calc(var(--nav-h) + 20px); }
}
@media (min-width: 700px) and (max-width: 999px) {
  .arc-side {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    column-gap: 36px;
    align-items: center;
  }
  .arc-side > .arc-form { grid-column: 1 / -1; }
}

/* ── The neon sign ──────────────────────────────────────────────────────── */
.arc-sign {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1.3cqw;
  padding: 4.4cqw 4cqw 3.6cqw;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 45%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 7.14%),
    linear-gradient(180deg, #1a1410, #110d0a);
  border: 1px solid rgba(239, 230, 214, .07);
  border-bottom: 0;
  box-shadow: inset 0 0 0 .7cqw #0c0a08, inset 0 0 0 calc(.7cqw + 1px) rgba(239, 230, 214, .05), inset 0 -2cqw 3cqw -1cqw rgba(0, 0, 0, .6);
  overflow: hidden;
}
/* four screws */
.arc-sign::after {
  content: '';
  position: absolute;
  inset: 1.9cqw;
  pointer-events: none;
  background:
    radial-gradient(circle at 0 0, #5a4c40 0 .45cqw, transparent .55cqw) 0 0 / 50% 50% no-repeat,
    radial-gradient(circle at 100% 0, #5a4c40 0 .45cqw, transparent .55cqw) 100% 0 / 50% 50% no-repeat,
    radial-gradient(circle at 0 100%, #5a4c40 0 .45cqw, transparent .55cqw) 0 100% / 50% 50% no-repeat,
    radial-gradient(circle at 100% 100%, #5a4c40 0 .45cqw, transparent .55cqw) 100% 100% / 50% 50% no-repeat;
}
/* the glow the tubes throw on the board */
.arc-sign::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 48% at 50% 64%, rgba(255, 170, 80, .2), transparent 72%),
    radial-gradient(40% 26% at 50% 22%, rgba(255, 90, 60, .16), transparent 72%);
  opacity: 0;
  transition: opacity .8s ease-out .7s;
}
.arc-sign.is-lit::before { opacity: 1; }

.arc-neon { position: relative; display: grid; justify-items: center; line-height: 1; }
.arc-neon-line { display: flex; white-space: nowrap; }
.arc-gap { display: inline-block; width: .5em; }
.arc-neon-a {
  --tube: 255, 92, 64;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 5.4cqw;
  letter-spacing: .36em;
  margin-right: -.36em;
}
.arc-neon-b {
  --tube: 255, 184, 84;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 15cqw;
  letter-spacing: .09em;
  margin-right: -.09em;
  margin-top: .05em;
}
/* unlit glass */
.arc-tube { color: rgba(255, 236, 222, .08); }
.arc-neon-b .arc-tube { color: transparent; -webkit-text-stroke: .032em rgba(255, 236, 222, .13); }
.arc-neon-jp {
  --tube: 255, 92, 64;
  font-family: var(--f-pixel);
  font-size: max(10px, 2.3cqw);
  letter-spacing: .6em;
  margin-right: -.6em;
  color: rgba(255, 230, 220, .12);
}

/* lit: flicker on once, then hold */
.arc-sign.is-lit .arc-neon-a .arc-tube { animation: arcTubeFill 1.15s linear var(--d, 0s) both; }
.arc-sign.is-lit .arc-neon-b .arc-tube { animation: arcTubeLine 1.15s linear var(--d, 0s) both; }
.arc-sign.is-lit .arc-neon-b .arc-tube--late { animation-duration: 2.2s; animation-delay: .9s; }
.arc-sign.is-lit .arc-neon-jp { animation: arcTubeFill 1s linear 1.05s both; }

@keyframes arcTubeFill {
  0%, 9%, 15%, 31%, 37% { color: rgba(255, 236, 222, .08); text-shadow: none; }
  10%, 14%, 32%, 36%, 44%, 100% {
    color: rgb(255, 240, 230);
    text-shadow: 0 0 .08em rgba(var(--tube), 1), 0 0 .22em rgba(var(--tube), .9), 0 0 .55em rgba(var(--tube), .55), 0 0 1.3em rgba(var(--tube), .3);
  }
}
@keyframes arcTubeLine {
  0%, 9%, 15%, 31%, 37% { -webkit-text-stroke-color: rgba(255, 236, 222, .13); text-shadow: none; }
  10%, 14%, 32%, 36%, 44%, 100% {
    -webkit-text-stroke-color: rgb(255, 246, 228);
    text-shadow: 0 0 .04em rgba(var(--tube), 1), 0 0 .12em rgba(var(--tube), .85), 0 0 .3em rgba(var(--tube), .5), 0 0 .7em rgba(var(--tube), .28);
  }
}

/* ── The shack front ────────────────────────────────────────────────────── */
.arc-front {
  --bay-l: 8.5%;
  --bay-r: 8.5%;
  --bay-t: 12%;
  --bay-b: 17%;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  container-type: inline-size;
  background: #0d0a08;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .95);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.arc-wall {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(44% 36% at 64% 4%, rgba(var(--arc-lamp), .22), transparent 72%),
    radial-gradient(26% 40% at 7% 24%, rgba(217, 72, 44, .16), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .5) 0 2px, rgba(255, 255, 255, .025) 2px 3px, transparent 3px 6.25%),
    linear-gradient(rgba(16, 12, 10, .8), rgba(10, 8, 7, .9)),
    url('/assets/brand/arcade-shack.webp') 52% 62% / 170% auto no-repeat,
    #120e0b;
}

.arc-bay {
  position: absolute;
  left: var(--bay-l);
  right: var(--bay-r);
  top: var(--bay-t);
  bottom: var(--bay-b);
  overflow: hidden;
  background: #060403;
  container-type: size;
  box-shadow: 0 0 0 .7cqw #090706, 0 0 0 1cqw rgba(239, 230, 214, .05), 0 0 4cqw rgba(0, 0, 0, .8);
}

/* inside the shop */
.arc-inside { position: absolute; inset: 0; z-index: 0; isolation: isolate; }
.arc-backwall {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(62% 48% at 50% 100%, rgba(var(--arc-lamp), .34), transparent 76%),
    radial-gradient(40% 30% at 50% 64%, rgba(255, 110, 60, .22), transparent 72%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 4.5%),
    linear-gradient(180deg, #0f0705 0%, #25100a 50%, #3f1d0e 100%);
  opacity: calc(.5 + var(--arc-lift, .08) * 1.15);
}
.arc-inside-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6cqh;
  background: linear-gradient(180deg, #2c170c, #120906);
  box-shadow: 0 -1px 0 rgba(var(--arc-lamp), .22);
}

.arc-cabs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3cqh;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 4.4cqw;
}
.arc-cab {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  height: calc((var(--arc-jam) - .07) * 100cqh);
  aspect-ratio: .74;
  container-type: inline-size;
  background: linear-gradient(90deg, #0b0807, #1d1612 14%, #17110e 86%, #0b0807);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
}
/* side trim in the game's second colour */
.arc-cab::before {
  content: '';
  position: absolute;
  inset: 0;
  border-left: 2.2cqw solid var(--c2);
  border-right: 2.2cqw solid var(--c2);
  opacity: .5;
  pointer-events: none;
}
/* the screen's light pooling on the shop floor */
.arc-cab::after {
  content: '';
  position: absolute;
  left: -45%;
  right: -45%;
  bottom: -14cqw;
  height: 34cqw;
  background: radial-gradient(closest-side, var(--c1), transparent);
  opacity: .32;
  pointer-events: none;
}
.arc-cab-marquee {
  position: relative;
  display: grid;
  place-items: center;
  height: 21cqw;
  margin: 0 -3cqw;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 46%, rgba(0, 0, 0, .22)), var(--c1);
  color: var(--cf);
  box-shadow: 0 0 7cqw -1cqw var(--c1), inset 0 0 0 1px rgba(0, 0, 0, .28);
}
.arc-cab-marquee span {
  font-family: var(--f-pixel);
  font-size: min(13.5cqw, calc(148cqw / var(--n)));
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
}
.arc-cab-bezel {
  padding: 6cqw 8cqw 5cqw;
  background: linear-gradient(180deg, #0c0a09, #1a1411);
}
.arc-cab-screen {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6% / 8%;
  background: #000;
  box-shadow: 0 0 0 1.4cqw #050404, 0 0 12cqw -2cqw var(--c1);
}
.arc-cab-poster,
.arc-cab-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.arc-cab-poster { filter: saturate(1.1); }
.arc-cab-video { opacity: 0; transition: opacity .5s ease-out; }
.arc-cab-video.has-frame { opacity: 1; }
.arc-cab.is-attract .arc-cab-poster { filter: brightness(.55) saturate(.85); }
.arc.arc-is-open .arc-cab.is-attract { cursor: pointer; }
.arc-cab.is-attract .arc-cab-video { opacity: 0; }
.arc-cab-attract {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14%;
  z-index: 2;
  text-align: center;
  font-family: var(--f-pixel);
  font-size: 9.5cqw;
  letter-spacing: .06em;
  color: #fff4e2;
  text-shadow: 0 0 4px var(--c1), 0 1px 0 #000;
  opacity: 0;
}
.arc-cab.is-attract .arc-cab-attract { opacity: 1; animation: arcBlink 1.6s steps(1) infinite paused; }
.arc-front.is-live .arc-cab.is-attract .arc-cab-attract { animation-play-state: running; }
@keyframes arcBlink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .1; } }
/* scanlines, curvature, glass */
.arc-cab-glass {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(90% 70% at 30% 18%, rgba(255, 255, 255, .14), transparent 55%),
    radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55) 100%),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .34) 0 1px, transparent 1px 3px);
}
.arc-cab-start {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 4;
  place-items: center;
  font-family: var(--f-pixel);
  font-size: 9cqw;
  color: #fff4e2;
  background: rgba(0, 0, 0, .35);
}
.needs-tap .arc-cab-start { display: grid; }
.arc-cab-deck {
  position: relative;
  height: 13cqw;
  margin: 0 -3cqw;
  background: linear-gradient(180deg, #2c241e, #16110e);
  transform: perspective(60cqw) rotateX(34deg);
  transform-origin: 50% 100%;
  box-shadow: inset 0 1px 0 rgba(var(--arc-lamp), .25);
}
.arc-cab-deck i { position: absolute; top: 26%; border-radius: 50%; }
.arc-cab-stick { left: 20%; width: 9cqw; height: 9cqw; background: radial-gradient(circle at 35% 35%, #ff9a7a, #c4301f 58%, #4a0f0a); }
.arc-cab-b1 { left: 56%; width: 7cqw; height: 7cqw; background: var(--c1); box-shadow: 0 0 2cqw var(--c1); }
.arc-cab-b2 { left: 72%; width: 7cqw; height: 7cqw; background: var(--c2); }
.arc-cab-body {
  position: relative;
  flex: 1;
  background: linear-gradient(180deg, #18120f, #0b0807);
}
.arc-cab-coin {
  position: absolute;
  left: 50%;
  top: 18%;
  width: 13cqw;
  height: 17cqw;
  transform: translateX(-50%);
  background: #0a0706;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.arc-cab-coin::after {
  content: '';
  position: absolute;
  left: 30%;
  right: 30%;
  top: 22%;
  height: 12%;
  background: #ff8a3d;
  box-shadow: 0 0 2.5cqw #ff8a3d;
}

/* the shutter */
.arc-shutter {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  z-index: 1;
  transform: translate3d(var(--arc-rattle, 0px), calc(var(--arc-lift, .08) * -100%), 0);
  background:
    radial-gradient(42% 30% at 62% 0%, rgba(var(--arc-lamp), .26), transparent 72%),
    linear-gradient(180deg, rgba(var(--arc-lamp), .06), transparent 30%, rgba(0, 0, 0, .46) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .4), transparent 14%, transparent 86%, rgba(0, 0, 0, .4)),
    linear-gradient(180deg, #0e0b09 0%, #2a211b 6%, #6e5a49 16%, #5a4839 26%, #413429 52%, #2c231d 78%, #19130f 92%, #0e0b09 100%);
  background-size: auto, auto, auto, 100% 5%;
  box-shadow: 0 1.2cqh 3cqh rgba(0, 0, 0, .6);
}
@media (hover: hover) and (pointer: fine) {
  .arc-shutter { cursor: grab; }
  .arc-front.is-dragging .arc-shutter { cursor: grabbing; }
  .arc.arc-is-open .arc-shutter { cursor: default; }
}
.arc-rust {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(8% 13% at 13% 28%, rgba(128, 54, 22, .55), transparent 70%),
    radial-gradient(12% 8% at 76% 16%, rgba(140, 60, 24, .4), transparent 70%),
    radial-gradient(6% 15% at 90% 66%, rgba(112, 44, 18, .5), transparent 70%),
    radial-gradient(15% 9% at 34% 78%, rgba(122, 52, 22, .38), transparent 70%),
    radial-gradient(5% 7% at 58% 44%, rgba(150, 70, 30, .35), transparent 70%),
    linear-gradient(90deg, transparent 20.6%, rgba(112, 44, 18, .3) 21%, transparent 21.9%),
    linear-gradient(90deg, transparent 66.8%, rgba(112, 44, 18, .24) 67.1%, transparent 67.8%);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, .55));
  mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, .55));
}
/* a scratched, weathered surface, kept very quiet */
.arc-rust::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--arc-grain) 0 0 / 120px 120px;
  opacity: .05;
}
.arc-stencil {
  position: absolute;
  left: 0;
  right: 0;
  top: 53.5%;
  text-align: center;
  pointer-events: none;
  font-family: var(--f-pixel);
  font-size: 7.2cqw;
  letter-spacing: .14em;
  line-height: 1;
  color: rgba(222, 76, 46, .9);
  text-shadow: 0 0 .14em rgba(217, 72, 44, .45);
  transform: rotate(-1.4deg);
  -webkit-mask-image: var(--arc-ink);
  mask-image: var(--arc-ink);
  -webkit-mask-size: 70px;
  mask-size: 70px;
}
.arc-chalk {
  position: absolute;
  left: 50%;
  top: 66.5%;
  pointer-events: none;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 5.4cqw;
  letter-spacing: .3em;
  line-height: 1;
  white-space: nowrap;
  color: rgba(239, 230, 214, .76);
  transform: translateX(-28%) rotate(3deg);
  -webkit-mask-image: var(--arc-ink);
  mask-image: var(--arc-ink);
  -webkit-mask-size: 46px;
  mask-size: 46px;
}
/* chalked on the bottom rail, beside the handle */
.arc-chalk-arrow {
  position: absolute;
  left: 29%;
  top: 50%;
  translate: -50% -50%;
  pointer-events: none;
  font-family: var(--f-pixel);
  font-size: max(11px, 3cqw);
  line-height: 1;
  letter-spacing: .26em;
  white-space: nowrap;
  color: rgba(239, 230, 214, .7);
  -webkit-mask-image: var(--arc-ink);
  mask-image: var(--arc-ink);
  -webkit-mask-size: 40px;
  mask-size: 40px;
  transition: opacity .4s;
  animation: arcBob 2.6s ease-in-out infinite paused;
}
.arc-front.is-live .arc-chalk-arrow { animation-play-state: running; }
.arc.arc-is-open .arc-chalk-arrow { opacity: 0; animation: none; }
@keyframes arcBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.arc-rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: max(46px, 10cqh);
  touch-action: none;
  background: linear-gradient(180deg, #74624f 0, #4a3d33 10%, #2f2620 55%, #1a1411 100%);
  border-top: 1px solid rgba(255, 220, 180, .2);
  box-shadow: 0 -.8cqh 1.4cqh rgba(0, 0, 0, .45);
}
@media (hover: hover) and (pointer: fine) { .arc-rail { cursor: grab; } }
/* light from inside catching the bottom edge */
.arc-rail::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 4cqh;
  background: linear-gradient(rgba(var(--arc-lamp), .5), transparent);
  pointer-events: none;
}
.arc-handle {
  position: absolute;
  left: 50%;
  top: 22%;
  width: clamp(56px, 17cqw, 118px);
  height: 52%;
  translate: -50% 0;
  border: max(3px, .9cqw) solid #a5927d;
  border-top: 0;
  border-radius: 0 0 1.6cqw 1.6cqw;
  box-shadow: 0 .5cqh .8cqh rgba(0, 0, 0, .55), inset 0 -2px 0 rgba(0, 0, 0, .35);
  transition: border-color .25s;
}
.arc-lock {
  position: absolute;
  top: 30%;
  width: 4.5cqw;
  height: 40%;
  background: linear-gradient(180deg, #5b4c40, #2a221c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5);
}
.arc-lock::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 30%;
  width: 22%;
  height: 40%;
  translate: -50% 0;
  background: #0a0806;
  border-radius: 50% 50% 20% 20%;
}
.arc-lock--l { left: 7%; }
.arc-lock--r { right: 7%; }
@media (hover: hover) {
  .arc:not(.arc-is-open) .arc-rail:hover .arc-handle { border-color: var(--gold); }
}
.arc-front.is-dragging .arc-handle { border-color: var(--gold); }

.arc-guide {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 2.6%;
  background: linear-gradient(90deg, #0c0a08, #3a3029 45%, #1b1512 70%, #0b0907);
}
.arc-guide--l { left: 0; }
.arc-guide--r { right: 0; transform: scaleX(-1); }
.arc-drum {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 4;
  height: 8cqh;
  background:
    radial-gradient(circle, #7a6a5a 0 .5cqw, transparent .6cqw) 0 50% / 12.5% 100% repeat-x,
    linear-gradient(180deg, #221b16, #5a4c40 38%, #3b3129 62%, #14100d);
  box-shadow: 0 .9cqh 1.8cqh rgba(0, 0, 0, .6);
}
.arc-dust { position: absolute; left: 0; right: 0; top: 8cqh; height: 0; z-index: 5; }
.arc-dust i {
  position: absolute;
  left: var(--x);
  top: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(239, 230, 214, .6);
  opacity: 0;
}
.arc-front.is-shake .arc-dust i { animation: arcDust 1.5s ease-in var(--dl, 0s) both; }
@keyframes arcDust {
  0% { opacity: 0; transform: translate(0, 0); }
  12% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 30cqh)); }
}

/* sill and the wet floor outside */
.arc-sill {
  position: absolute;
  z-index: 2;
  left: calc(var(--bay-l) - 1.4%);
  right: calc(var(--bay-r) - 1.4%);
  top: calc(100% - var(--bay-b));
  height: 1.1cqw;
  background: linear-gradient(180deg, #4a3e34, #16110e);
  box-shadow: 0 1px 0 rgba(var(--arc-lamp), .2);
}
.arc-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bay-b);
  overflow: hidden;
  background:
    /* the bulb and the lantern, reflected in the wet ground */
    linear-gradient(90deg, transparent 60.5%, rgba(255, 206, 140, .28) 64%, transparent 67.5%),
    linear-gradient(90deg, transparent 3%, rgba(240, 96, 63, .3) 7%, transparent 11%),
    linear-gradient(180deg, #0c0a08, #050404);
}
/* wet sheen: fine horizontal ripples catching the light */
.arc-floor::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 5px, rgba(255, 214, 170, .05) 5px 6px);
  -webkit-mask-image: radial-gradient(70% 90% at 50% 0%, #000, transparent);
  mask-image: radial-gradient(70% 90% at 50% 0%, #000, transparent);
}
.arc-spill {
  position: absolute;
  left: var(--bay-l);
  right: var(--bay-r);
  top: 0;
  height: 100%;
  background: linear-gradient(180deg, rgba(var(--arc-lamp), .5), rgba(255, 120, 60, .14) 50%, transparent 96%);
  clip-path: polygon(1% 0, 99% 0, 120% 100%, -20% 100%);
  opacity: calc(.3 + var(--arc-lift, .08) * 1.6);
}
.arc-reflect {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease-out .3s;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 96%);
}
.arc-reflect i {
  position: absolute;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, transparent 8%, var(--c1) 36%, var(--c1) 64%, transparent 92%);
  opacity: .42;
}
.arc.arc-is-open .arc-reflect { opacity: 1; }
.arc-puddle {
  position: absolute;
  left: 18%;
  width: 64%;
  top: 26%;
  height: 52%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--arc-lamp), .1), transparent);
}

/* the bulb and the lantern */
.arc-halo {
  position: absolute;
  z-index: 5;
  left: 64%;
  top: 16%;
  width: 74cqw;
  height: 52cqw;
  translate: -50% -50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--arc-lamp), .14), transparent);
}
.arc-bulb {
  position: absolute;
  z-index: 6;
  left: 64%;
  top: 0;
  width: 4cqw;
  height: 17%;
  margin-left: -2cqw;
  transform-origin: 50% 0;
  animation: arcSway 7.5s ease-in-out -3s infinite alternate paused;
}
.arc-bulb-cord {
  position: absolute;
  left: calc(50% - 1px);
  top: 0;
  width: 2px;
  height: calc(100% - 3.6cqw);
  background: linear-gradient(#000, #221a14);
}
.arc-bulb-cap {
  position: absolute;
  left: 50%;
  bottom: 2.7cqw;
  width: 1.8cqw;
  height: 1.3cqw;
  translate: -50% 0;
  background: linear-gradient(90deg, #1b1512, #4a3e34, #1b1512);
}
.arc-bulb-glass {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2.8cqw;
  height: 3cqw;
  translate: -50% 0;
  border-radius: 50% 50% 48% 48% / 40% 40% 60% 60%;
  background: radial-gradient(circle at 50% 62%, #fffdf2 0 16%, #ffe6a6 40%, #ffb257 76%, #d9782e);
  box-shadow: 0 0 1.2cqw .4cqw rgba(255, 214, 140, .85), 0 0 6cqw 2cqw rgba(255, 170, 90, .32);
}
.arc-lantern {
  position: absolute;
  z-index: 6;
  left: 2.2%;
  top: 0;
  width: 9.6cqw;
  height: 40%;
  transform-origin: 50% 0;
  animation: arcSway 6.2s ease-in-out -1s infinite alternate paused;
}
.arc-front.is-live .arc-bulb,
.arc-front.is-live .arc-lantern { animation-play-state: running; }
.arc-lantern-cord {
  position: absolute;
  left: calc(50% - .5px);
  top: 0;
  width: 1px;
  height: 22%;
  background: #000;
}
.arc-lantern-body {
  position: absolute;
  left: 0;
  right: 0;
  top: 22%;
  display: grid;
  place-items: center;
  aspect-ratio: .8;
  border-radius: 46% / 50%;
  background:
    repeating-linear-gradient(180deg, rgba(80, 16, 6, .32) 0 1px, transparent 1px 9%),
    radial-gradient(circle at 50% 44%, #ffd9a0 0%, #f58a44 34%, #c23d20 70%, #6a180c 100%);
  box-shadow: 0 0 4cqw rgba(255, 120, 60, .5), 0 0 13cqw rgba(217, 72, 44, .22);
}
.arc-lantern-body::before,
.arc-lantern-body::after {
  content: '';
  position: absolute;
  left: 24%;
  right: 24%;
  height: 7%;
  background: #1a0e09;
}
.arc-lantern-body::before { top: -2%; }
.arc-lantern-body::after { bottom: -2%; }
.arc-lantern-kanji {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 4.6cqw;
  line-height: 1;
  color: rgba(58, 10, 4, .82);
}
.arc-lantern-tassel {
  position: absolute;
  left: calc(50% - .6cqw);
  top: calc(22% + 12cqw);
  width: 1.2cqw;
  height: 4cqw;
  background: linear-gradient(#a3301f, #5a160c);
}
@keyframes arcSway { from { transform: rotate(-1.3deg); } to { transform: rotate(1.3deg); } }

/* the jam: a clunk, a small shake, the bulb swings */
.arc-front.is-shake { animation: arcShake .5s var(--ease-out); }
.arc-front.is-shake .arc-bulb { animation: arcSwing 2.4s var(--ease-out) both; }
.arc-front.is-shake .arc-lantern { animation: arcSwing 2.8s var(--ease-out) .05s both; }
@keyframes arcShake {
  0% { transform: none; }
  14% { transform: translate(-3px, 3px); }
  30% { transform: translate(3px, -1px); }
  46% { transform: translate(-2px, 1px); }
  64% { transform: translate(1px, 0); }
  100% { transform: none; }
}
@keyframes arcSwing {
  0% { transform: rotate(0deg); }
  12% { transform: rotate(7deg); }
  32% { transform: rotate(-5deg); }
  52% { transform: rotate(3deg); }
  72% { transform: rotate(-2deg); }
  100% { transform: rotate(-1.3deg); }
}
.arc-front.is-rattle .arc-shutter { animation: arcRattle .42s linear; }
@keyframes arcRattle {
  0%, 100% { transform: translate3d(0, calc(var(--arc-lift) * -100%), 0); }
  18% { transform: translate3d(-1px, calc(var(--arc-lift) * -100% - 1.4cqh), 0); }
  36% { transform: translate3d(1px, calc(var(--arc-lift) * -100% + .4cqh), 0); }
  54% { transform: translate3d(-1px, calc(var(--arc-lift) * -100% - .7cqh), 0); }
  72% { transform: translate3d(0, calc(var(--arc-lift) * -100% + .2cqh), 0); }
}

/* ── Lift button ────────────────────────────────────────────────────────── */
.arc-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 20px;
}
.arc-lift { --b-bg: rgba(242, 177, 62, .1); --b-bd: var(--gold); --b-fg: var(--gold); }
.arc-lift .ic { transform: rotate(180deg); }
@media (hover: hover) { .arc-lift:hover { --b-bg: rgba(242, 177, 62, .2); border-color: var(--gold-hot); } }
.arc.arc-is-open .arc-lift { --b-bg: transparent; --b-bd: var(--line-2); --b-fg: var(--bone-2); }
.arc.arc-is-open .arc-lift .ic { display: none; }
.arc-lift-hint {
  font-family: var(--f-pixel);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fog);
}

/* ── The card zone ──────────────────────────────────────────────────────── */
.arc-cardzone { position: relative; display: grid; justify-items: center; gap: 18px; min-width: 0; }
.arc-cardslot { position: relative; display: grid; width: 100%; max-width: 480px; }
.arc-cardslot > * { grid-area: 1 / 1; }
.arc-card-fly { position: relative; z-index: 5; }
.arc-cardzone:not(.is-issued) .arc-card-fly { visibility: hidden; }

.arc-dock {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3.2cqw;
  width: 100%;
  aspect-ratio: 1.586;
  padding: 6%;
  container-type: inline-size;
  border-radius: 18px;
  border: 1.5px dashed rgba(242, 177, 62, .42);
  background: radial-gradient(80% 90% at 50% 38%, rgba(242, 177, 62, .07), transparent 70%), rgba(0, 0, 0, .38);
  box-shadow: inset 0 12px 34px rgba(0, 0, 0, .65);
  color: var(--bone-2);
  text-align: center;
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out), border-color .2s;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .arc-dock:hover { border-color: var(--gold); } }
.arc-dock-crest {
  width: 15cqw;
  aspect-ratio: 1;
  background: rgba(242, 177, 62, .22);
  -webkit-mask: url('/assets/brand/jw-crest.webp') 50% 50% / contain no-repeat;
  mask: url('/assets/brand/jw-crest.webp') 50% 50% / contain no-repeat;
}
.arc-dock-txt {
  max-width: 24ch;
  font-family: var(--f-pixel);
  font-size: max(12px, 3.3cqw);
  line-height: 1.5;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-2);
}
.arc-dock-cta {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  font-family: var(--f-pixel);
  font-size: max(12px, 3cqw);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.arc-dock-cta .ic { width: 1.1em; height: 1.1em; }
.arc-cardzone.is-issued .arc-dock { opacity: 0; transform: scale(.97); pointer-events: none; }

/* the card */
.arc-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1.586;
  perspective: 1200px;
  container-type: inline-size;
  cursor: pointer;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.arc-card::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 8%;
  right: 8%;
  bottom: -7%;
  height: 16%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent);
  transform: translateX(calc(var(--ry, 0) * -.5%));
  pointer-events: none;
}
.arc-card-tilt,
.arc-card-flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.arc-card-flip { transition: transform .85s cubic-bezier(.2, .8, .2, 1); }
.arc-card-flip.is-flipped { transform: rotateY(180deg); }
.arc-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 4.4cqw;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  color: var(--bone);
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(255, 255, 255, .06), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, rgba(242, 177, 62, .05), transparent 60%),
    #0f0d0c;
  box-shadow: 0 2.4cqw 6cqw -1.6cqw rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .09);
}
.arc-face--front { transform: rotateY(0deg); }
.arc-face--back { transform: rotateY(180deg); }
.arc-c-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--arc-grain);
  background-size: 150px;
  opacity: .16;
}
.arc-c-frame {
  position: absolute;
  inset: 3.4cqw;
  border: 1px solid rgba(242, 177, 62, .2);
  border-radius: 2.4cqw;
  pointer-events: none;
}
.arc-c-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg,
    transparent calc(var(--sx, 30%) - 16%),
    rgba(255, 210, 130, .05) calc(var(--sx, 30%) - 6%),
    rgba(255, 228, 180, .13) var(--sx, 30%),
    rgba(255, 210, 130, .05) calc(var(--sx, 30%) + 6%),
    transparent calc(var(--sx, 30%) + 16%));
  mix-blend-mode: screen;
}
.arc-c-glint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 42%, rgba(255, 232, 186, .3) 50%, transparent 58%);
  transform: translateX(-130%);
  opacity: 0;
}
.arc-card.is-glint .arc-c-glint { animation: arcGlint 1.3s var(--ease-out) .05s both; }
@keyframes arcGlint { from { transform: translateX(-130%); opacity: 1; } to { transform: translateX(130%); opacity: 1; } }

.arc-face--front > .arc-c-title {
  position: absolute;
  left: 7cqw;
  top: 7.2cqw;
  font-family: var(--f-pixel);
  font-size: max(12px, 3.3cqw);
  line-height: 1.2;
  letter-spacing: .2em;
  color: var(--gold);
}
.arc-face--front > .arc-c-jp {
  position: absolute;
  left: 7cqw;
  top: 12cqw;
  font-family: var(--f-pixel);
  font-size: max(9px, 2.2cqw);
  line-height: 1.2;
  letter-spacing: .32em;
  color: var(--fog);
}
/* the crest, foil-stamped: the art itself, with the gold sheen running across it */
.arc-c-crestwrap {
  position: absolute;
  right: 6.6cqw;
  top: 6.6cqw;
  width: 19cqw;
  aspect-ratio: 1;
  filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .9)) drop-shadow(0 1px 0 rgba(255, 232, 180, .14));
}
.arc-c-crest {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: url('/assets/brand/jw-crest.webp') 50% 50% / contain no-repeat;
}
.arc-c-crest::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    rgba(255, 244, 214, 0) calc(var(--sx, 30%) - 16%),
    rgba(255, 244, 214, .7) var(--sx, 30%),
    rgba(255, 244, 214, 0) calc(var(--sx, 30%) + 16%));
  mix-blend-mode: overlay;
  -webkit-mask: url('/assets/brand/jw-crest.webp') 50% 50% / contain no-repeat;
  mask: url('/assets/brand/jw-crest.webp') 50% 50% / contain no-repeat;
}
.arc-c-member {
  position: absolute;
  left: 7cqw;
  right: 28cqw;
  top: 30cqw;
  display: grid;
  gap: 1.4cqw;
  line-height: 1.1;
}
.arc-c-label {
  font-family: var(--f-pixel);
  font-size: max(9px, 2.2cqw);
  letter-spacing: .42em;
  color: var(--gold-deep);
}
.arc-c-name {
  font-family: var(--f-pixel);
  font-size: min(6.2cqw, calc(105cqw / var(--n, 10)));
  letter-spacing: .08em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  color: #d8cdbb;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .95), 0 1px 0 rgba(255, 255, 255, .16);
}
.arc-c-name.is-empty { color: #37312b; text-shadow: 0 -1px 0 rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .08); }
.arc-c-price {
  position: absolute;
  left: 7cqw;
  bottom: 7cqw;
  font-family: var(--f-pixel);
  font-size: max(10.5px, 2.6cqw);
  line-height: 1.2;
  letter-spacing: .14em;
  color: var(--gold);
}

/* 承 RECEIVED */
.arc-c-hanko {
  position: absolute;
  z-index: 3;
  right: 6cqw;
  bottom: 8cqw;
  display: grid;
  justify-items: center;
  gap: 1cqw;
  transform: rotate(-11deg);
}
.arc-c-seal {
  display: grid;
  place-items: center;
  width: 13.5cqw;
  height: 13.5cqw;
  background: var(--seal);
  color: #fff1e6;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 8.8cqw;
  line-height: 1;
  -webkit-mask-image: var(--arc-ink);
  mask-image: var(--arc-ink);
  -webkit-mask-size: 90px;
  mask-size: 90px;
}
.arc-c-received {
  padding: .5cqw 1.2cqw .3cqw;
  border: .4cqw solid currentColor;
  font-family: var(--f-pixel);
  font-size: max(8.5px, 2.5cqw);
  letter-spacing: .28em;
  color: var(--seal-hot);
  -webkit-mask-image: var(--arc-ink);
  mask-image: var(--arc-ink);
  -webkit-mask-size: 70px;
  mask-size: 70px;
}
.arc-c-hanko.is-slam { animation: arcSlam .56s cubic-bezier(.2, .9, .25, 1) both; }
@keyframes arcSlam {
  0% { opacity: 0; transform: rotate(-11deg) scale(2.6); }
  42% { opacity: 1; transform: rotate(-11deg) scale(.92); }
  68% { transform: rotate(-11deg) scale(1.04); }
  100% { opacity: 1; transform: rotate(-11deg) scale(1); }
}

/* the back: nine stamp slots */
.arc-face--back {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4cqw;
  padding: 6cqw 6.6cqw 6cqw 7cqw;
}
.arc-c-backcopy { position: relative; display: grid; gap: 1.3cqw; align-content: center; min-width: 0; }
.arc-c-btitle {
  font-family: var(--f-pixel);
  font-size: max(11.5px, 3.1cqw);
  line-height: 1.2;
  letter-spacing: .2em;
  color: var(--gold);
}
.arc-c-bjp {
  font-family: var(--f-pixel);
  font-size: max(9px, 2.2cqw);
  line-height: 1.2;
  letter-spacing: .3em;
  color: var(--fog);
}
.arc-c-count {
  margin-top: 2cqw;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 10cqw;
  line-height: 1;
  color: var(--bone);
}
.arc-c-count small { font-size: .42em; color: var(--fog); margin-left: .1em; }
.arc-c-msg {
  font-family: var(--f-body);
  font-size: max(11px, 3.2cqw);
  line-height: 1.4;
  color: var(--bone-2);
}
.arc-c-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 13.8cqw);
  gap: 2cqw;
}
.arc-slot {
  position: relative;
  display: block;
  width: 13.8cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
.arc-slot-ink {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: .3cqw dashed rgba(239, 230, 214, .2);
  transition: border-color .2s;
}
.arc-slot-glyph {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 7.4cqw;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: .13cqw rgba(239, 230, 214, .3);
}
@media (hover: hover) {
  .arc-slot:hover .arc-slot-ink { border-color: var(--gold); }
  .arc-slot:hover .arc-slot-glyph { -webkit-text-stroke-color: var(--gold); }
}
.arc-slot.is-inked .arc-slot-ink {
  border: .55cqw solid var(--seal-hot);
  background: rgba(217, 72, 44, .1);
  transform: rotate(var(--r, 0deg));
  -webkit-mask-image: var(--arc-ink);
  mask-image: var(--arc-ink);
  -webkit-mask-size: 60px;
  mask-size: 60px;
}
.arc-slot.is-inked .arc-slot-glyph { color: var(--seal-hot); -webkit-text-stroke: 0; }
.arc-card-flip.is-flipped .arc-slot.is-fresh .arc-slot-ink { animation: arcInk .5s cubic-bezier(.2, .9, .25, 1) var(--dl, .5s) both; }
@keyframes arcInk {
  from { opacity: 0; transform: rotate(var(--r, 0deg)) scale(1.9); }
  to { opacity: 1; transform: rotate(var(--r, 0deg)) scale(1); }
}
/* all nine: night shift complete */
.arc-face--back.is-complete {
  background:
    radial-gradient(90% 90% at 26% 30%, rgba(242, 177, 62, .22), transparent 70%),
    radial-gradient(60% 80% at 100% 100%, rgba(242, 177, 62, .1), transparent 70%),
    #14110c;
  box-shadow: inset 0 0 0 1px rgba(255, 199, 90, .7), inset 0 0 8cqw rgba(242, 177, 62, .24), 0 0 3cqw rgba(255, 199, 90, .45), 0 0 12cqw rgba(242, 177, 62, .35);
}
.arc-face--back.is-complete .arc-c-frame { border-color: rgba(242, 177, 62, .6); }
.arc-face--back.is-complete .arc-c-msg {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 5cqw;
  line-height: 1.05;
  color: var(--gold-hot);
  text-shadow: 0 0 2cqw rgba(242, 177, 62, .5);
}

/* tools under the card */
.arc-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  transition: opacity .5s var(--ease-out) .15s, transform .5s var(--ease-out) .15s;
}
.arc-tools .btn { min-height: 44px; }
/* the buttons arrive once the card has landed, not while it is still in the air */
.arc-cardzone:not(.is-landed) .arc-tools { visibility: hidden; opacity: 0; transform: translateY(-6px); }
.arc-flip-count { color: var(--gold); letter-spacing: .06em; }
.arc-gyro.is-on { --b-bd: var(--gold); --b-fg: var(--gold); }
.reduce-motion .arc-gyro { display: none; }

/* ── The offer ──────────────────────────────────────────────────────────── */
.arc-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: clamp(16px, 2vw, 28px);
  row-gap: 14px;
}
.arc-price {
  display: flex;
  align-items: baseline;
  gap: .3em;
  white-space: nowrap;
  font-family: var(--f-display);
  font-weight: 800;
  line-height: .9;
}
.arc-amount {
  font-size: clamp(56px, 5vw, 78px);
  letter-spacing: -.02em;
  color: var(--bone);
  text-shadow: 0 0 40px rgba(242, 177, 62, .14);
}
.arc-per { font-size: clamp(20px, 1.7vw, 25px); color: var(--bone-2); font-weight: 700; }
.arc-trial .stamp {
  padding: 10px 14px 8px;
  font-size: 12px;
  transform: rotate(-8deg);
}
.arc-trial .stamp .jp-s { font-size: 21px; margin-bottom: 2px; }
.arc-fine { flex-basis: 100%; max-width: 46ch; font-size: 14.5px; line-height: 1.55; color: var(--fog); }

/* ── The waitlist ───────────────────────────────────────────────────────── */
.arc-form {
  position: relative;
  display: grid;
  gap: 16px;
  padding: clamp(20px, 2.6vw, 30px);
  container-type: inline-size;
  background: linear-gradient(180deg, rgba(28, 23, 18, .94), rgba(18, 15, 11, .94));
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  box-shadow: var(--shadow-hard);
}
.arc-form.is-collapsing { overflow: hidden; }
.arc-form-lead {
  text-wrap: pretty;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.3;
  color: var(--bone);
  max-width: 36ch;
}
.arc-fields { display: grid; gap: 14px; }
@container (min-width: 540px) {
  .arc-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
}
.arc-form .field em { font-style: normal; color: var(--fog-2); letter-spacing: .1em; }
.arc-form .input[aria-invalid="true"] { border-color: var(--seal-hot); }
.arc-form .form-status { font-size: 13.5px; line-height: 1.45; }
.arc-form .form-status:empty { min-height: 0; margin-top: -16px; }
.arc-form .form-status[data-state="ok"] { color: var(--gold); }
.arc-form .form-note { max-width: 52ch; }

.arc-done { display: none; }
.arc-form.is-done > :not(.arc-done):not(.hp-field):not(input[type="hidden"]) { display: none; }
.arc-form.is-done .arc-done {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  outline: none;
}
.arc-done-hanko { font-size: 64px; }
.arc-done-copy { display: grid; gap: 4px; justify-items: start; }
.arc-done-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.1;
  color: var(--bone);
}
.arc-done-text { color: var(--bone-2); line-height: 1.5; }
.arc-done-again { min-height: 44px; margin-top: 2px; margin-left: -14px; font-size: 12px; color: var(--fog); }

/* ── Phones ─────────────────────────────────────────────────────────────── */
@media (max-width: 699px) {
  .arc-stage { margin-inline: calc(var(--gutter) * -1); }
  .arc-sign { border-left: 0; border-right: 0; padding-top: 5.4cqw; padding-bottom: 4.4cqw; }
  .arc-front {
    aspect-ratio: 8 / 7;
    --bay-l: 6.5%;
    --bay-r: 6.5%;
    --bay-t: 11%;
    --bay-b: 15%;
  }
  .arc-cab { aspect-ratio: .8; }
  .arc-cab:nth-child(n+4) { display: none; }
  .arc-cabs { gap: 5cqw; }
  .arc-controls { padding-inline: var(--gutter); }
  .arc-lift { width: 100%; }
  .arc-lift-hint { width: 100%; text-align: center; }
  /* the price and the free-month stamp stay side by side: "a month" tucks under the figure */
  .arc-offer { column-gap: 22px; row-gap: 16px; }
  .arc-price { flex-direction: column; align-items: flex-start; gap: 8px; }
  .arc-amount { font-size: clamp(50px, 15vw, 64px); }
  .arc-per { font-size: 19px; padding-left: .1em; }
  .arc-trial .stamp { padding: 9px 11px 7px; font-size: 11px; letter-spacing: .18em; }
  .arc-trial .stamp .jp-s { font-size: 19px; }
}
/* phones on their side: keep the shack small enough to see the shutter and its button together */
@media (max-width: 999px) and (max-height: 520px) and (orientation: landscape) {
  .arc-stage { width: min(100%, 480px, max(280px, calc((100svh - var(--thumb-h, 62px) - 84px) * 4 / 3))); margin-inline: auto; }
}
/* stacked layouts: the shutter is above the card, so the dock points up */
@media (max-width: 999px) {
  .arc-dock-cta .ic { transform: rotate(90deg); }
}