/* Phantom design system, answer-page layer (workflow B / b4, 2026-10-29).
   Linked LAST in <head> by the templates b4 owns: /cost, the state hub + 48 states (copied from /cost by
   gen-location-pages.mjs), the 72 /games/* pages + /games/light-guns + /games + /packages/*, /about, /arcade-101, /contact.
   Numbers = the appeal standard (onealgo-icm-oa .../2026-10-29_1630_design-appeal-study/appeal-standard.md), which wins
   over design-system.md on numbers: display 64/40, H2 40/30, H3 22, body 18/17, small 14, eyebrow 13; spacing 4/8/12/16/24/
   32/48/64/96; section padding 96/64/48 at >=1280/>=768/below; one 1340 px container at 1440 (= --gut 50 px); buttons 52 px.
   Motion = the MOTION CONTRACT: [data-rv] (shared CSS in style.css), [data-rv-stagger] children, [data-count], .card-hover.
   Original heroes (.rh media, Dennis's banners) are never restyled here beyond type sizes. */
/* b6 consistency: the type + section tokens are style.css's (b1), not redefined here in px, so an answer page and a .ds page
   print the same H1/H2/body/eyebrow at every width (the px copies froze at 64/40/18/13 while .ds pages step up 6.25 % / 12.5 %
   at 1920 / 2560 through html:has(main.page--wide), and printed 36 instead of 40 for the display size at 390). */

/* ---- type: six sizes in <main> ---- */
main h1,:root main .rh .rh-copy h1,main .rh--answer .rh-copy h1,main .cost h1{font-size:var(--fs-display);line-height:1.02;text-wrap:balance;max-width:22ch}
main h2,:root main h2:not([class]),main .cost-sec h2,main .cta-band h2,main .page--wide h2{font-family:var(--display);text-transform:uppercase;font-size:var(--fs-h2);line-height:1.08;letter-spacing:0;margin:0 0 16px;text-wrap:balance;text-shadow:none}
/* e2e 2026-10-30: "Florida on phantomarcades.com" at the 30px H2 is one 372px word, so all 48 state pages scrolled sideways 28px at 360 (and "Massachusetts" in the 40px H1, a flex item, 13px). anywhere, not break-word: it also lowers min-content, which is what a flex item sizes by. Only a word wider than its line ever breaks. */
main :is(h1,h2,h3,summary){overflow-wrap:anywhere}
/* The longest state word, "MASSACHUSETTS" at 40px, is 357px: on a phone under 400px the display H1 scales with the screen (10vw) so it never has to split a word. */
@media(max-width:399px){main h1,:root main .rh .rh-copy h1,main .rh--answer .rh-copy h1,main .cost h1{font-size:min(var(--fs-display),10vw)}}
main h3,:root main h3:not([class]),main .faq-cols h3,main .cost-optgrp h3{font-size:var(--fs-h3);line-height:1.25}
main :is(p,li,dd,dt,td,th,summary,label,input,blockquote),:root main :is(p,li,dd,dt,td,th,summary,label,input,blockquote):not([class]){font-size:var(--fs-body);line-height:1.6}
main p{max-width:68ch}
main .rh .pp-lead{font-size:var(--fs-body);line-height:1.55;max-width:60ch}
main :is(.rh .crumb,.rh .back-link,.rh .pp-tiles li,.trust li,.rh-strip span,.cost-table th[scope=col],.card-meta,.ro-l,caption,figcaption,small,.loc-quote footer,.cap){font-size:var(--fs-small)}
.eyebrow,main .eyebrow{display:block;font-family:var(--body);font-weight:600;font-size:var(--fs-eyebrow);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-lit);margin:0 0 12px;line-height:1.2}
main .rh .pp-from{font-size:var(--fs-body)}

/* ---- one button component: amber solid primary, outline secondary, same chamfer, 52 px ---- */
main :is(a.btn-coin,a.btn-ghost,button.btn-coin,button.btn-ghost){display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;font-size:var(--fs-small);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;box-sizing:border-box}
main .btn-ghost{font-family:var(--display);font-weight:400;border:1px solid var(--indigo-edge);clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
@media(max-width:600px){main .cta-actions :is(.btn-coin,.btn-ghost),main .band-cta :is(.btn-coin,.btn-ghost){width:100%}}

/* ---- bands: full bleed, --gut inside, one vertical padding per breakpoint ---- */
.band{box-sizing:border-box;width:100%;padding:var(--sec-y) var(--gut)}
.band--panel{background:var(--panel);border-block:1px solid var(--hair)}
.band-head{margin:0 0 24px;max-width:68ch}
.band-head p{margin:0;color:var(--muted)}
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:32px 64px;align-items:start}
@media(min-width:1024px){.split{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.split--rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.split>*{min-width:0}
.split .unit+.unit{margin-top:48px}
.unit p{color:#cfd6e6}
.band :is(a:not(.btn-coin):not(.btn-ghost):not(.card)){color:var(--blue-lit)}
.link-list{list-style:none;margin:16px 0 0;padding:0;columns:1;column-gap:32px}
.link-list li{break-inside:avoid;border-top:1px solid var(--hair)}
.link-list a{display:flex;align-items:center;min-height:48px;text-decoration:none}
.link-list a:hover,.link-list a:focus-visible{color:var(--text)}
@media(min-width:600px){.link-list.cols{columns:2}}@media(min-width:1024px){.link-list.cols{columns:3}}@media(min-width:1600px){.link-list.cols{columns:4}}

/* ---- the readout + ledger (design system 2.3): numeral Russo tabular, label caps, hair track with an amber tick ---- */
.ledger{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px var(--gap)}
@media(min-width:768px){.ledger{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1024px){.ledger{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}}
.ro{position:relative;display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:2px solid var(--hair);min-width:0}
.ro::before{content:"";position:absolute;left:0;top:-2px;width:48px;height:2px;background:var(--amber);transform-origin:left;transition:transform 450ms cubic-bezier(.45,0,.2,1)}
.ro-n{font-family:var(--display);font-weight:400;font-size:var(--fs-h2);line-height:.98;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.ro-n.money{color:var(--amber)}
.ro-l{font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);line-height:1.35}
a.ro{text-decoration:none;color:inherit;min-height:44px}
a.ro:hover .ro-l,a.ro:focus-visible .ro-l{color:var(--text)}
@media screen and (prefers-reduced-motion:no-preference){.rv [data-rv]:not(.in) .ro::before{transform:scaleX(0)}}
.band-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:32px}

/* ---- one card component (design system 2.5): whole card is the link, media >= 60 % of the card, equal heights ---- */
.cards{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr}
@media(min-width:481px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.cards{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}}
.cards>li{display:flex;min-width:0}
.card{position:relative;display:flex;flex-direction:column;width:100%;background:var(--panel);border:1px solid var(--edge);color:var(--text);text-decoration:none;overflow:hidden;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.card-media{position:relative;display:block;aspect-ratio:4/3;background:#090A13;overflow:hidden}
.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:16px;box-sizing:border-box}
.card-media.photo img{object-fit:cover;object-position:center 22%;padding:0}
.card-media .cap{position:absolute;left:0;right:0;bottom:0;padding:8px 12px;background:rgba(6,8,13,.86);color:var(--muted);font-family:var(--body);font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.3}
.card-body{display:flex;flex-direction:column;gap:8px;padding:16px;flex:1}
.card-name{font-family:var(--display);font-weight:400;font-size:var(--fs-h3);line-height:1.2;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-name a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.card-meta{color:var(--muted);line-height:1.45}
.card-price{margin-top:auto;font-family:var(--display);font-size:var(--fs-h3);color:var(--amber);font-variant-numeric:tabular-nums}
.card p{margin:0;color:#cfd6e6}
.card-hover{transition:transform 180ms var(--ease-out,ease),border-color 180ms var(--ease-out,ease)}
.card-hover img{transition:transform 200ms var(--ease-out,ease)}
@media(hover:hover){.card-hover:hover{transform:translateY(-2px);border-color:var(--blue-lit)}.card-hover:hover img{transform:scale(1.03)}}
a.card:focus-visible{outline:2px solid var(--blue-lit);outline-offset:2px}

/* ---- staggered reveal for grids: the grid carries data-rv (shared .in) + data-rv-stagger; its children arrive 60 ms apart ---- */
@media screen and (prefers-reduced-motion:no-preference){
  .rv [data-rv][data-rv-stagger]:not(.in){opacity:1;transform:none}
  .rv [data-rv-stagger]:not(.in)>*{opacity:0;transform:translateY(14px)}
  .rv [data-rv-stagger].in:not(.now)>*{transition:opacity 480ms var(--ease-out,ease),transform 480ms var(--ease-out,ease)}
  .rv [data-rv-stagger].in>:nth-child(2){transition-delay:60ms}.rv [data-rv-stagger].in>:nth-child(3){transition-delay:120ms}
  .rv [data-rv-stagger].in>:nth-child(4){transition-delay:180ms}.rv [data-rv-stagger].in>:nth-child(5){transition-delay:240ms}
  .rv [data-rv-stagger].in>:nth-child(n+6){transition-delay:300ms}
}

/* ---- tables: hairlines, caps header, numbers right, prices amber ---- */
main .cost-table th[scope=row]{font-size:var(--fs-body)}
main .cost-table td{font-size:var(--fs-body)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---- FAQ (design system 2.10): native details, questions visible, two columns >= 1280 ---- */
.faq-list{display:grid;grid-template-columns:minmax(0,1fr);gap:0 64px;align-items:start}
@media(min-width:1280px){.faq-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.faq-list details{border-top:1px solid var(--hair)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 0;cursor:pointer;list-style:none;font-weight:700;color:var(--text)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";flex:none;font-family:var(--display);color:var(--blue-lit);font-size:var(--fs-h3);line-height:1;transition:transform 220ms var(--ease-std,ease)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details>div{padding:0 0 16px}
.faq-list details p{margin:0 0 12px;color:#cfd6e6}
.faq-list summary:focus-visible{outline:2px solid var(--blue-lit);outline-offset:2px}

/* ---- closing plate ---- */
main .cta-band{margin:0;border:0;border-radius:0;background:var(--void);padding:var(--sec-y) var(--gut);text-align:left;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:16px 48px;border-top:1px solid var(--hair)}
@media(min-width:900px){main .cta-band{grid-template-columns:minmax(0,1fr) auto}main .cta-band>.cta-actions{grid-column:2;grid-row:1/span 3}}
main .cta-band .cta-note{margin:0;text-align:left;max-width:60ch}
main .cta-band h2{margin:0;max-width:24ch}
main .cta-band .cta-actions{display:flex;flex-wrap:wrap;gap:16px;margin:0}

/* ---- tap targets: every link in <main> outside running text gets 44 px ---- */
main .rh .crumb a,main .rh .back-link{min-height:44px}
.band li>a:only-child:not([class]){display:inline-flex;align-items:center;min-height:44px}

@media(prefers-reduced-motion:reduce){.card-hover,.card-hover img,.ro::before,.faq-list summary::after{transition:none!important}}

/* ---- the answer-page article: bands run edge to edge, so the article itself carries no gutter ---- */
.page--wide article.cost{display:block;max-width:none;margin:0;padding:0}
.page--wide article.cost>.rh{margin-inline:0}
.ledger--stack{grid-template-columns:minmax(0,1fr);gap:24px}
.ledger--stack .ro p{margin:0;color:#cfd6e6}
.band .cost-opts{margin:0}
@media(max-width:767px){main .loc-table{display:block;overflow-x:auto;max-width:100%}.ro-n{white-space:normal}}
/* folded long lists (Smart Brevity): closed on phones, opened before first paint at >= 768 px by an inline one-liner */
.fold>summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 16px;border:1px solid var(--indigo-edge);cursor:pointer;list-style:none;font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:var(--fs-small);color:var(--text)}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"+";color:var(--blue-lit);font-size:var(--fs-h3)}
.fold[open]>summary::after{content:"\2212"}
.fold[open]>summary{margin-bottom:24px}
@media(min-width:768px){.fold#cost-opt-fold>summary{display:none}}
/* phones: cards stay 1-up but lie on their side (media left, 40 %), so a 9-card grid is ~1,500 px, not 3,900 */
@media(max-width:480px){.card{flex-direction:row;min-height:132px}.card-media{flex:0 0 42%;aspect-ratio:auto}.card-media .cap{padding:4px 8px;letter-spacing:.04em}.card-body{padding:12px}.cards{grid-auto-rows:auto}}
.ro-n.ro-word{font-size:var(--fs-h3);white-space:normal;line-height:1.2}
/* width gate (measure-width.h0): headings span their band; the closing plate's heading fills the row */
.band .band-head{max-width:none}
main .cta-band h2{max-width:none}
.faq-list:has(>details:only-child){grid-template-columns:minmax(0,1fr)}
@media(min-width:1920px){.faq-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* b6: the two-column system text on game pages left 357 px empty between columns at 2560 (68 ch cap inside a wider column) */
.g-text .system-desc,.g-text .system-desc p{max-width:none}
/* b6: 0 targets under 44 px — the breadcrumb "Home" link was 37 px wide */
main .crumb a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
/* state pages: one order sits beside its heading; the metro list uses the width of the table above it */
@media(min-width:1024px){section[aria-labelledby=loc-builds-h]:has(.cards[style*="--n:1"]){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,4vw,64px);align-items:center}
  section[aria-labelledby=loc-builds-h]:has(.cards[style*="--n:1"])>.cards{grid-template-columns:minmax(0,1fr)}
  section[aria-labelledby=loc-trends-h] .loc-public{columns:2;column-gap:64px}
  section[aria-labelledby=loc-trends-h] .loc-public li{break-inside:avoid}}
/* one card fills the row at every width; three stay three from a tablet up, not two and an orphan */
@media(min-width:481px){.cards[style*="--n:1"]{grid-template-columns:minmax(0,1fr)}}
@media(min-width:700px){.cards[style*="--n:3"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
.loc-public a{display:inline-block;min-width:44px;min-height:44px;line-height:44px}
.card-name{display:block;overflow:visible}   /* names show in full; the row keeps equal heights */
.card-media img[src*="cab3d-final-boss"]{scale:1.35}   /* its render carries wider margins than the others */
@media(min-width:768px) and (max-width:1023px){.ledger:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:768px) and (max-width:1023px){.ledger:has(>:nth-child(10):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}