/* THE ARCADE — floor 2 (floors-top agent). Cabinets, attract loops, the coin, the pinball plunger. */

.floor-arcade { background: #1B1631; min-height: calc(100vh - var(--head-h)); min-height: calc(100svh - var(--head-h)); }

.arcade-scene { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.arcade-scene svg { overflow: visible; }

/* the back wall: purple arcade wallpaper */
.arcade-wall {
  position: absolute; inset: -15% 0;
  background:
    radial-gradient(ellipse 70% 45% at 70% 40%, rgba(255, 90, 205, .12), transparent 70%),
    linear-gradient(180deg, rgba(8, 6, 20, .6), transparent 32%, transparent 70%, rgba(8, 6, 20, .55)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Crect width='90' height='90' fill='%23211A3D'/%3E%3Cpath d='M45 8 L52 20 L45 32 L38 20 Z' fill='%23291F4C'/%3E%3Cpath d='M0 53 L7 65 L0 77 M90 53 L83 65 L90 77' fill='%23291F4C'/%3E%3Ccircle cx='22' cy='66' r='2' fill='%23372A60'/%3E%3Ccircle cx='68' cy='40' r='2' fill='%23372A60'/%3E%3C/svg%3E") 0 0 / 90px 90px;
}
.aw-neon {
  position: absolute; right: 4.5%; top: 24%;
  font: 700 clamp(2rem, 1.2rem + 2.6vw, 4rem)/1 var(--font-display); letter-spacing: .14em;
  color: #FFE6F7; padding: .22em .3em .22em .44em; border: 4px solid #6FF0E4; border-radius: 22px;
  text-shadow: 0 0 3px #fff, 0 0 10px #FF5ACD, 0 0 24px #FF5ACD, 0 0 44px rgba(255, 90, 205, .7);
  box-shadow: 0 0 10px #4FD1C5, 0 0 30px rgba(79, 209, 197, .45), inset 0 0 12px rgba(79, 209, 197, .6);
  transform: rotate(-3deg);
}
.aw-neon span { display: inline-block; }
.aw-flicker { animation: aw-flicker 7s linear infinite; }
@keyframes aw-flicker { 0%, 86%, 91%, 100% { opacity: 1; } 88% { opacity: .3; } }
.aw-scores {
  position: absolute; left: 44%; top: 25%; width: clamp(150px, 13vw, 200px); padding: 12px 14px; border-radius: 12px;
  background: #0E0B1C; border: 4px solid var(--outline); box-shadow: 0 0 0 3px #3A2F66, 0 8px 0 rgba(0, 0, 0, .4);
  font: 400 clamp(7px, .6vw, 9px)/1.9 var(--font-pixel); color: #4FD1C5; transform: rotate(2deg);
}
.aw-scores p { margin: 0 0 6px; color: #FFC23D; text-align: center; }
.aw-scores ol { margin: 0; padding: 0; list-style: none; }
.aw-scores li { display: flex; justify-content: space-between; }
.aw-scores li b { font-weight: 400; color: #FFF3DF; }
.aw-poster { position: absolute; width: clamp(64px, 6vw, 90px); height: auto; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35)); }
.aw-poster.p1 { left: 59%; top: 24%; transform: rotate(-5deg); }
.aw-poster.p2 { display: none; }

.arcade-ceiling { position: absolute; top: 0; left: 0; width: 100%; height: 70px; z-index: 3; }
.ac-neon { filter: drop-shadow(0 0 6px #FF5ACD) drop-shadow(0 0 14px rgba(255, 90, 205, .6)); }
.arcade-carpet {
  position: absolute; left: 0; right: 0; bottom: 0; height: 128px; border-top: 4px solid var(--outline);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 30%, rgba(0, 0, 0, .3)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120'%3E%3Crect width='160' height='120' fill='%23171230'/%3E%3Cpath d='M14 24 q8 -10 16 0 t16 0' fill='none' stroke='%23FF5ACD' stroke-width='3' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M100 20 l10 16 h-20 z' fill='none' stroke='%234FD1C5' stroke-width='3' stroke-linejoin='round' opacity='.55'/%3E%3Ccircle cx='60' cy='78' r='7' fill='none' stroke='%23FFC23D' stroke-width='3' opacity='.5'/%3E%3Cpath d='M118 84 q8 -10 16 0 t16 0' fill='none' stroke='%237C5CFF' stroke-width='3' stroke-linecap='round' opacity='.6'/%3E%3Cpath d='M20 96 h14 M27 89 v14' stroke='%234FD1C5' stroke-width='3' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E") 0 0 / 160px 120px;
}

/* ── the words ─────────────────────────────────────────────────────────── */
.arcade-inner {
  position: relative; z-index: 2; pointer-events: none;
  min-height: calc(100vh - var(--head-h)); min-height: calc(100svh - var(--head-h)); display: flex; flex-direction: column; justify-content: space-between;
  padding-block: 76px 40px;
  padding-left: max(0px, calc(78px - max(var(--gutter), (100vw - var(--maxw)) / 2)));
}
.arcade-inner > * { pointer-events: auto; }
.arcade-inner > .arcade-copy { max-width: 470px; pointer-events: none; }
.arcade-copy > * { pointer-events: auto; }
.arcade-copy > .arcade-links { pointer-events: none; }
.arcade-copy h2 { font-size: var(--step-4); margin-bottom: .2em; text-shadow: 0 4px 0 rgba(0, 0, 0, .45); }
.arcade-lede { font-size: var(--step-1); font-weight: 700; color: #F0E4F4; max-width: 30ch; }
.arcade-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.arcade-links > * { pointer-events: auto; }
.arcade-all { --btn-fg: var(--cream); border-color: rgba(255, 243, 223, .5); background: rgba(13, 17, 32, .4); }

/* ── the cabinets ──────────────────────────────────────────────────────── */
.arc-row {
  position: relative; display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(16px, 2.6vw, 44px); margin-top: 28px; pointer-events: none;
  transform-origin: var(--zx, 50%) var(--zy, 50%); transition: transform .6s var(--ease-out);
}
.arc-row > * { pointer-events: auto; }
.arc-cab { position: relative; flex: none; width: clamp(150px, 15vw, 228px); aspect-ratio: 220 / 470; cursor: pointer; transition: transform .4s var(--spring); -webkit-tap-highlight-color: transparent; }
.arc-cab::before { /* the screen's glow on the wall */
  content: ''; position: absolute; left: -30%; right: -30%; top: -8%; height: 70%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, color-mix(in srgb, var(--c) 40%, transparent), transparent 70%);
  animation: arc-halo 4s ease-in-out infinite alternate; animation-delay: calc(var(--n) * -1.1s);
}
.arc-cab::after { /* light on the carpet */
  content: ''; position: absolute; left: -12%; right: -12%; bottom: -24px; height: 60px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, color-mix(in srgb, var(--c) 55%, transparent), transparent 72%);
}
@keyframes arc-halo { from { opacity: .7; } to { opacity: 1; } }
.arc-cab:hover { transform: translateY(-6px); }
.arc-body { position: absolute; inset: 0; width: 100%; height: 100%; }
.cb-main { fill: var(--c); }
.cb-shade { fill: #0D1120; opacity: .3; }
.cb-lit { fill: #fff; opacity: .14; }
.cb-trim { stroke: var(--a); }
.cb-dark { fill: color-mix(in srgb, var(--c) 42%, #0D1120); }
.cb-panel { fill: color-mix(in srgb, var(--c) 28%, #262B42); }
.cb-acc { fill: var(--a); }
.cb-slotglow { fill: #FF8A3D; opacity: .45; animation: arc-slot 2.6s ease-in-out infinite alternate; }
@keyframes arc-slot { from { opacity: .25; } to { opacity: .7; } }
.cb-price { font: 400 9px/1 var(--font-pixel); fill: #FFC23D; }
.b1 .cb-cap { fill: var(--a); } .b2 .cb-cap { fill: #FFC23D; } .b3 .cb-cap { fill: #4FD1C5; }
.cb-cap { transform-box: fill-box; transition: transform .08s; }
.cb-btn.is-press .cb-cap { transform: translateY(3px) scaleY(.7); }
.cb-stick { transform-box: view-box; transform-origin: 70px 286px; }
.arc-cab:hover .cb-stick { animation: arc-stick .45s ease-in-out infinite alternate; }
.cb-stick.is-wiggle { animation: arc-stick .12s ease-in-out 6 alternate !important; }
@keyframes arc-stick { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.cb-stick, .cb-btn { cursor: pointer; }

.arc-marquee {
  position: absolute; left: 7.27%; top: 2.98%; width: 85.45%; height: 10.21%; display: grid; place-items: center; border-radius: 6px; overflow: hidden;
  background: radial-gradient(ellipse 70% 90% at 50% 40%, color-mix(in srgb, var(--c) 55%, #1B1030), #10091F 95%);
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--a) 40%, transparent);
}
.arc-marquee span {
  font: 700 clamp(11px, 1.12vw, 17px)/1 var(--font-display); text-transform: uppercase; letter-spacing: .06em; text-align: center;
  color: var(--a); padding: 0 6px; text-wrap: balance;
  text-shadow: 0 0 6px var(--c), 0 0 16px var(--c), 0 2px 0 #000;
}

.arc-screen { position: absolute; left: 15%; top: 19.15%; width: 70%; height: 31.49%; border-radius: 8% / 8.5%; overflow: hidden; background: #05060C; }
.arc-screen .attract, .arc-screen .arc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arc-screen::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, .16), transparent 38%); }
.arc-screen::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, .6));
}
.arc-insert {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 7%; text-align: center;
  font: 400 clamp(5.5px, .52vw, 8px)/1 var(--font-pixel); color: #FFF3DF; letter-spacing: .06em;
  text-shadow: 0 0 6px var(--c), 0 1px 0 #000; animation: arc-insert 2.2s ease-in-out infinite alternate;
}
@keyframes arc-insert { from { opacity: 1; } to { opacity: .15; } }
.arc-glitch { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 6px, color-mix(in srgb, var(--a) 60%, transparent) 6px 9px, transparent 9px 17px, rgba(79, 209, 197, .5) 17px 19px); }
.arc-cab.is-glitch .arc-glitch { opacity: 1; animation: arc-bars .9s linear; }
.arc-cab.is-glitch .attract { animation: arc-glitch .9s steps(9); }
@keyframes arc-bars { from { background-position: 0 0; } to { background-position: 0 90px; } }
@keyframes arc-glitch {
  0% { transform: none; } 12% { transform: translateX(-7px) skewX(12deg); } 24% { transform: translateX(5px) scaleY(.9); }
  36% { transform: translateX(-3px) skewX(-8deg); } 48% { transform: translate(6px, 2px); } 60% { transform: translateX(-5px) scaleX(1.06); }
  72% { transform: skewX(10deg); } 84% { transform: translateX(3px); } 100% { transform: none; }
}

.arc-hit { position: absolute; left: 2.7%; top: 1.3%; width: 94.6%; height: 51.9%; border-radius: 12px; }
.arc-hit:focus-visible { outline-offset: 2px; }
.arc-draft { position: absolute; top: -9px; right: -10px; transform: rotate(9deg) scale(.85); background: #2A2140; pointer-events: none; }
.arc-slot { position: absolute; left: 31.8%; top: 74%; width: 36.4%; height: 18.3%; border: 0; padding: 0; background: none; border-radius: 8px; cursor: pointer; }
.arc-row.has-coin .arc-slot { box-shadow: 0 0 0 3px var(--molten), 0 0 18px rgba(255, 194, 61, .8); animation: arc-slotpulse 1.2s ease-in-out infinite alternate; }
.arc-cab.is-target .arc-slot { box-shadow: 0 0 0 4px #fff, 0 0 28px var(--molten); animation: none; }
@keyframes arc-slotpulse { from { box-shadow: 0 0 0 2px var(--molten), 0 0 10px rgba(255, 194, 61, .5); } to { box-shadow: 0 0 0 4px var(--molten), 0 0 24px rgba(255, 194, 61, .9); } }
.arc-cab.is-rattle .cb-door { transform-box: fill-box; transform-origin: 50% 50%; animation: arc-rattle .3s linear 2; }
@keyframes arc-rattle { 25% { transform: translateX(-2px) rotate(-2deg); } 75% { transform: translateX(2px) rotate(2deg); } }

/* ── attract loops ─────────────────────────────────────────────────────── */
.at-px { font: 400 7px/1 var(--font-pixel); }
/* Shardfall: a hero slashes a crystal; it shatters and re-forms */
.sh-crystal { transform-box: view-box; transform-origin: 104px 72px; animation: sh-bob 4.8s ease-in-out infinite; }
@keyframes sh-bob { 0%, 20%, 40% { transform: translateY(0); } 10%, 30% { transform: translateY(-4px); } }
.sh-f { transform-box: fill-box; transform-origin: center; animation: sh-facet 4.8s ease-in-out infinite; }
@keyframes sh-facet { 0%, 46% { transform: none; opacity: 1; } 72% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } 82% { transform: scale(0); opacity: 0; } 100% { transform: none; opacity: 1; } }
.sh-hero { transform-box: view-box; animation: sh-hero 4.8s ease-in-out infinite; }
@keyframes sh-hero { 0%, 32% { transform: none; } 40% { transform: translate(26px, -22px); } 48% { transform: translate(40px, -8px); } 60% { transform: translate(34px, 0); } 100% { transform: none; } }
.sh-slash { opacity: 0; animation: sh-slash 4.8s linear infinite; stroke-dasharray: 80; stroke-dashoffset: 80; }
@keyframes sh-slash { 0%, 42% { opacity: 0; stroke-dashoffset: 80; } 44% { opacity: 1; } 50% { opacity: 1; stroke-dashoffset: 0; } 58%, 100% { opacity: 0; stroke-dashoffset: 0; } }
.sh-plus { opacity: 0; animation: sh-plus 4.8s ease-out infinite; }
@keyframes sh-plus { 0%, 48% { opacity: 0; transform: translateY(6px); } 56% { opacity: 1; } 76% { opacity: 1; transform: translateY(-6px); } 84%, 100% { opacity: 0; transform: translateY(-8px); } }
.sh-dust circle { transform-box: fill-box; animation: sh-dust 6s linear infinite; }
.sh-dust circle:nth-child(2n) { animation-delay: -3s; }
.sh-dust circle:nth-child(3n) { animation-delay: -1.5s; }
@keyframes sh-dust { from { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(-110px); opacity: 0; } }

/* Elysian Arcade: tokens bounce across a synthwave grid */
.ea-coin { transform-box: view-box; animation: ea-x 3.6s linear infinite; }
.ea-coin.c2 { animation-delay: -1.2s; }
.ea-coin.c3 { animation-delay: -2.4s; }
@keyframes ea-x { from { transform: translateX(-12px); } to { transform: translateX(172px); } }
.ea-bounce { transform-box: view-box; animation: ea-y .9s infinite; }
.c2 .ea-bounce { animation-duration: .75s; }
.c3 .ea-bounce { animation-duration: 1.05s; }
@keyframes ea-y { 0%, 100% { transform: translateY(18px); animation-timing-function: cubic-bezier(.2, .6, .4, 1); } 50% { transform: translateY(-26px); animation-timing-function: cubic-bezier(.6, 0, .8, .4); } }
.ea-spin { animation: ea-spin .7s linear infinite; }
@keyframes ea-spin { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.15); } }
.ea-grid { animation: ea-grid 1.6s linear infinite; }
@keyframes ea-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .25; transform: scale(.6); } }
@keyframes ea-grid { from { transform: translateY(0); } to { transform: translateY(6px); } }
.ea-stars circle { animation: ea-twinkle 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ea-stars circle:nth-child(2n) { animation-delay: -1.4s; }

/* Precision Putt: a putt rolls into the hole */
.pp-ball { transform-box: view-box; animation: pp-roll 5s infinite; }
@keyframes pp-roll {
  0%, 10% { transform: translate(0, 0); opacity: 1; animation-timing-function: cubic-bezier(.3, .7, .5, 1); }
  30% { transform: translate(28px, -26px); animation-timing-function: linear; }
  46% { transform: translate(58px, -44px); animation-timing-function: linear; }
  58% { transform: translate(72px, -64px); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  66% { transform: translate(80px, -78px) scale(1); opacity: 1; }
  70% { transform: translate(80px, -78px) scale(.3); opacity: 0; }
  92% { transform: translate(0, 0) scale(.3); opacity: 0; }
  100% { transform: translate(0, 0) scale(1); opacity: 1; }
}
.pp-putter { transform-box: view-box; transform-origin: 18px 90px; animation: pp-swing 5s ease-in-out infinite; }
@keyframes pp-swing { 0% { transform: rotate(0); } 7% { transform: rotate(22deg); } 11% { transform: rotate(-10deg); } 20%, 100% { transform: rotate(0); } }
.pp-cloth { transform-box: fill-box; transform-origin: 0 50%; animation: pp-flag 1.2s ease-in-out infinite alternate; }
@keyframes pp-flag { from { transform: skewY(-6deg) scaleX(.94); } to { transform: skewY(6deg) scaleX(1.04); } }
.pp-hole { opacity: 0; animation: pp-hole 5s ease-in-out infinite; }
@keyframes pp-hole { 0%, 68% { opacity: 0; transform: translateY(4px); } 74%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }

/* Quick games: hammer on an ingot */
.qg-hammer { transform-box: view-box; transform-origin: 112px 50px; animation: qg-hammer 1.4s infinite; }
@keyframes qg-hammer { 0%, 100% { transform: rotate(-28deg); animation-timing-function: cubic-bezier(.6, 0, 1, .6); } 40% { transform: rotate(4deg); } 55% { transform: rotate(-4deg); animation-timing-function: ease-out; } }
.qg-sparks { transform-box: view-box; transform-origin: 80px 100px; opacity: 0; animation: qg-sparks 1.4s infinite; }
@keyframes qg-sparks { 0%, 36% { opacity: 0; transform: scale(.4); } 42% { opacity: 1; transform: scale(1); } 64%, 100% { opacity: 0; transform: scale(1.4); } }
.qg-ingot { animation: qg-ingot 1.4s infinite; }
@keyframes qg-ingot { 0%, 38%, 100% { fill: #FF8A3D; } 42% { fill: #FFC23D; } }
.qg-tix path { transform-box: fill-box; transform-origin: center; animation: qg-tix 3s ease-in-out infinite alternate; }
.qg-tix path:nth-child(2) { animation-delay: -1.5s; }
@keyframes qg-tix { from { transform: translateY(4px) rotate(-8deg); } to { transform: translateY(-6px) rotate(8deg); } }

/* ── the coin ──────────────────────────────────────────────────────────── */
.arc-coin {
  position: absolute; left: calc(50% - 250px); bottom: -30px; width: 62px; height: 44px; z-index: 3; border: 0; padding: 0; background: none;
  cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent;
}
.arc-coin svg { width: 100%; height: 100%; transition: transform .3s var(--spring); }
.arc-coin:hover svg { transform: translateY(-4px) rotate(-6deg) scale(1.08); }
.coin-glint { transform-box: fill-box; transform-origin: center; animation: coin-glint 3.4s ease-in-out infinite; }
@keyframes coin-glint { 0%, 70%, 100% { transform: scale(0); } 80% { transform: scale(1) rotate(45deg); } 90% { transform: scale(0) rotate(90deg); } }
.arc-coin.is-lifted, .arc-coin.is-gone { visibility: hidden; }
.arc-coin.is-held svg { transform: translateY(-34px) scale(1.2); filter: drop-shadow(0 0 10px rgba(255, 194, 61, .9)); animation: coin-hover 1s ease-in-out infinite alternate; }
@keyframes coin-hover { from { transform: translateY(-30px) scale(1.2) rotate(-6deg); } to { transform: translateY(-40px) scale(1.2) rotate(6deg); } }
.arc-coin.is-drop svg { animation: coin-drop .75s var(--ease-out); }
@keyframes coin-drop { 0% { transform: translateY(-220px) rotate(-200deg); } 60% { transform: translateY(0) rotate(0); } 75% { transform: translateY(-16px); } 100% { transform: none; } }
.top-ghost.coin-ghost svg { width: 100%; height: 100%; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .45)); }
.arc-coin-tip {
  position: absolute; left: calc(50% - 250px); bottom: 40px; margin: 0; transform: translateX(-30%); z-index: 4; pointer-events: none;
  font: 700 .85rem/1.2 var(--font-display); color: var(--outline); background: var(--molten); border: 3px solid var(--outline); border-radius: 12px;
  padding: .45em .7em; white-space: nowrap; box-shadow: 0 4px 0 rgba(0, 0, 0, .35); opacity: 0; transition: opacity .2s;
}
.arc-coin-tip:not(:empty) { opacity: 1; }

/* ── the camera zooms into a cabinet ───────────────────────────────────── */
.floor-arcade.is-zoom .arc-row { transform: scale(var(--zs, 2.4)); transition: transform .5s cubic-bezier(.6, 0, .85, .35); }
.floor-arcade.is-zoom .arcade-copy, .floor-arcade.is-zoom .arc-coin { opacity: 0; transition: opacity .3s; }
.arcade-copy { transition: opacity .5s .2s; }
.floor-arcade .arc-cab.is-zoomed .arc-screen { box-shadow: 0 0 40px color-mix(in srgb, var(--c) 70%, transparent); }

/* ── the card inside the cabinet modal ─────────────────────────────────── */
.arc-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; padding: 22px; align-items: center; }
.arc-card-art { position: relative; aspect-ratio: 160 / 144; border-radius: 14px; overflow: hidden; border: 4px solid var(--outline); box-shadow: 0 0 30px color-mix(in srgb, var(--c) 45%, transparent); }
.arc-card-art .attract { position: absolute; inset: 0; width: 100%; height: 100%; }
.arc-card-art::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px); pointer-events: none; }
.arc-card .kicker { color: var(--a); }
.arc-card-tag { font: 600 var(--step-1)/1.3 var(--font-display); margin: 0 0 .5em; color: var(--cream); }
.arc-card-blurb { color: #CFCBE0; margin: 0 0 .9em; }
.arc-card-facts { list-style: none; margin: 0 0 1.1em; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.arc-card-facts li { font: 700 .82rem/1 var(--font-body); padding: .45em .75em; border-radius: 99px; background: rgba(255, 255, 255, .07); border: 2px solid rgba(255, 255, 255, .12); }
.arc-card-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.arc-card-play { position: relative; min-height: min(560px, calc(100dvh - 180px)); }
.arc-card-play iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.arc-card-back { position: absolute; left: 10px; top: 10px; z-index: 2; }
@media (max-width: 700px) { .arc-card { grid-template-columns: 1fr; padding: 16px; } }

/* ── the pinball plunger (tricks agent launches the ball) ──────────────── */
.arc-plunger {
  position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: 190px; width: 50px; aspect-ratio: 64 / 290; z-index: 3;
  pointer-events: auto; appearance: none; border: 0; padding: 0; background: none; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent;
}
.arc-plunger svg { width: 100%; height: 100%; }
.pl-rod { transform-box: view-box; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.pl-spring { transform-box: view-box; transform-origin: 32px 212px; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.arc-plunger:hover .pl-rod { transform: translateY(4px); }
.arc-plunger:hover .pl-spring { transform: scaleY(.9); }
.arc-plunger.is-pressed .pl-rod { transform: translateY(28px); transition-duration: .7s; }
.arc-plunger.is-pressed .pl-spring { transform: scaleY(.3); transition-duration: .7s; }
.arc-plunger.is-release .pl-rod { animation: pl-rod .6s linear; }
.arc-plunger.is-release .pl-spring { animation: pl-spring .6s linear; }
@keyframes pl-rod { 0% { transform: translateY(28px); } 22% { transform: translateY(-14px); } 45% { transform: translateY(6px); } 70% { transform: translateY(-2px); } 100% { transform: none; } }
@keyframes pl-spring { 0% { transform: scaleY(.3); } 22% { transform: scaleY(1.35); } 45% { transform: scaleY(.85); } 70% { transform: scaleY(1.05); } 100% { transform: none; } }
.pl-light { fill: #3E4668; animation: pl-idle 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.5s); }
@keyframes pl-idle { 0%, 100% { fill: #3E4668; } 50% { fill: #8A6A2A; } }
.arc-plunger.is-release .pl-light { animation: pl-chase .7s ease-out both; animation-delay: calc(var(--i) * 80ms); }
@keyframes pl-chase { 0% { fill: #3E4668; } 30% { fill: #FFC23D; } 100% { fill: #3E4668; } }

/* ── smaller screens ───────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .aw-poster, .aw-scores { display: none; }
  .aw-neon { top: 22%; }
}
@media (max-width: 760px) {
  .arcade-inner { padding-left: 0; padding-top: 60px; justify-content: flex-start; }
  .arcade-copy { padding-right: 58px; }
  .aw-neon { display: none; }
  .arc-row {
    justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 40px var(--gutter) 54px; gap: 18px; margin-top: auto;
  }
  .arc-row::-webkit-scrollbar { display: none; }
  .arc-cab { width: 46vw; scroll-snap-align: center; }
  .arc-coin { left: calc(46vw + var(--gutter) - 22px); bottom: 10px; }
  .arc-coin-tip { left: calc(46vw + var(--gutter)); bottom: 70px; }
  .arc-plunger { bottom: auto; top: 70px; right: 8px; width: 40px; }
  .arc-draft { right: -4px; }
}

/* ── off screen: rest ──────────────────────────────────────────────────── */
.floor-arcade.is-offscreen *, .floor-arcade.is-offscreen *::before, .floor-arcade.is-offscreen *::after { animation-play-state: paused !important; }
html.calm .arc-row { transition: none; }
/* calm: the tokens rest where you can see them */
html.calm .ea-coin.c1 { transform: translateX(30px); }
html.calm .ea-coin.c2 { transform: translate(80px, -26px); }
html.calm .ea-coin.c3 { transform: translateX(130px); }