/* Arcade: a separate, opt-in appearance. Module artwork and playfield geometry
   remain owned by each game. Font is local; see fonts/arcade/OFL.txt. */
@font-face {
  font-family: 'Arcade Display';
  src: url('../fonts/arcade/BricolageGrotesque.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

.arcade-only { display:none; }
.appearance-dialog { width:min(810px,calc(100vw - 48px)); }
.design-options { grid-template-columns:repeat(3,minmax(0,1fr)); }
.design-sample-arcade { position:relative; background:#ded6ff; border:1px solid #29283e; }
.design-sample-arcade::after { content:''; position:absolute; bottom:0; width:100%; height:10px; background:repeating-conic-gradient(#29283e 0 25%,#ded6ff 0 50%) 0 0 / 20px 20px; }
.design-sample-arcade i { width:35px; height:44px; border:2px solid #29283e; border-radius:10px; background:#ff786b; box-shadow:3px 4px 0 #29283e; transform:rotate(-13deg); }
.design-sample-arcade i:nth-child(2) { width:54px; height:35px; background:#b4a1f3; transform:rotate(8deg); }
.design-sample-arcade i:nth-child(3) { width:35px; height:35px; border-radius:50%; background:#c8ef62; transform:rotate(14deg); }

:root[data-design='arcade'] {
  --page:#f7f6f2;
  --surface:#fffefb;
  --surface-alt:#eeedf3;
  --surface-hover:#e7e3f0;
  --ink:#29283e;
  --muted:#656373;
  --line:#d8d5df;
  --accent:#d2f56a;
  --accent-hover:#c2e757;
  --accent-ink:#51408a;
  --accent-soft:#eee8ff;
  --danger:#b4333b;
  --focus:#6546bc;
  --shadow:0 4px 0 #29283e12;
  --arcade-coral:#ff786b;
  --arcade-lilac:#b9a5f5;
  --arcade-lime:#d2f56a;
  --arcade-outline:#29283e;
  --arcade-heading:#df493e;
  --arcade-tint:#eee8ff;
  --arcade-flat-shadow:#29283e;
  --arcade-display:'Arcade Display',Bahnschrift,sans-serif;
}
:root[data-design='arcade'][data-theme='dark'] {
  --page:#191925;
  --surface:#242431;
  --surface-alt:#2e2d3e;
  --surface-hover:#39364c;
  --ink:#f5f2fb;
  --muted:#beb8cf;
  --line:#484257;
  --accent-ink:#c5b3ff;
  --accent-soft:#37304f;
  --danger:#ff9b97;
  --focus:#d2f56a;
  --shadow:0 4px 0 #090911;
  --arcade-outline:#8e819f;
  --arcade-heading:#ff9183;
  --arcade-tint:#302b43;
  --arcade-flat-shadow:#0b0b15;
}

/* Only hub headings adopt the expressive font; game HUDs keep their metrics. */
:root[data-design='arcade'] body:not(.game-page) { --display:var(--arcade-display); }
:root[data-design='arcade'] body:not(.game-page) :is(h1,h2,h3) { font-weight:800; letter-spacing:-.045em; }
:root[data-design='arcade'] .arcade-only { display:block; }
:root[data-design='arcade'] .arcade-hide { display:none; }
:root[data-design='arcade'] .hero-actions.arcade-only { display:flex; }
:root[data-design='arcade'] .site-header { border-bottom:1px solid var(--line); }
:root[data-design='arcade'] body:not(.game-page) .header-inner { min-height:82px; }
:root[data-design='arcade'] .brand { font-family:var(--arcade-display); font-size:33px; font-weight:800; letter-spacing:-.065em; }
:root[data-design='arcade'] .brand-light { font-weight:800; }
:root[data-design='arcade'] .brand-dot { color:var(--arcade-heading); }
:root[data-design='arcade'] .brand-symbol { gap:3px; transform:rotate(-8deg); }
:root[data-design='arcade'] .brand-symbol i { background:var(--arcade-coral); border-radius:4px; border:1px solid #29283e; }
:root[data-design='arcade'] .brand-symbol i:nth-child(2) { background:var(--arcade-lime); }
:root[data-design='arcade'] .brand-symbol i:nth-child(3) { background:var(--arcade-lilac); }
:root[data-design='arcade'] .brand-symbol i:last-child { background:#f9d96f; }
:root[data-design='arcade'] .nav-login { border-color:var(--line); border-radius:8px; background:var(--surface); }
:root[data-design='arcade'] .nav-login:hover { background:var(--accent-soft); border-color:var(--accent-ink); }
:root[data-design='arcade'] .design-opener { color:var(--accent-ink); }
:root[data-design='arcade'] .theme-switch { border-radius:20px; }
:root[data-design='arcade'] .theme-switch button { border-radius:50%; }
:root[data-design='arcade'] .theme-switch button[aria-pressed='true'] { color:#29283e; background:var(--arcade-lilac); }

/* The first view is a game poster, followed immediately by the useful catalog. */
:root[data-design='arcade'] .hero { position:relative; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); min-height:403px; padding:30px 0 24px; gap:30px; }
:root[data-design='arcade'] .hero .eyebrow { margin:0 0 18px; color:var(--ink); font-size:10px; letter-spacing:.15em; }
:root[data-design='arcade'] .hero .live-dot { background:var(--arcade-coral); border-radius:2px; width:10px; height:10px; box-shadow:3px 3px 0 var(--arcade-lilac); }
:root[data-design='arcade'] .hero h1 { font-size:clamp(48px,4.9vw,69px); line-height:1.04; letter-spacing:-.055em; margin:0 0 20px; }
:root[data-design='arcade'] .arcade-headline { color:var(--arcade-heading); }
:root[data-design='arcade'] .hero p { max-width:440px; font-size:15px; line-height:1.7; margin-bottom:24px; }
:root[data-design='arcade'] .hero-footnote { margin-top:19px; font-size:11px; }
:root[data-design='arcade'] .hero .play-composition { display:none; }
:root[data-design='arcade'] .arcade-artwork { position:relative; width:100%; max-width:555px; justify-self:end; color:var(--ink); }
.arcade-artwork svg { display:block; width:100%; height:auto; overflow:visible; }
.arcade-art-label { position:absolute; top:0; left:25%; font-size:10px; font-weight:700; letter-spacing:.19em; transform:rotate(-5deg); }
.arcade-art-sticker { position:absolute; right:1%; bottom:2%; padding:12px 37px 12px 18px; transform:rotate(-8deg); background:var(--arcade-lime); color:#29283e; border:2px solid #29283e; box-shadow:3px 4px 0 #29283e; border-radius:6px; font:500 15px/1.15 var(--arcade-display); }
.arcade-art-sticker strong { font-weight:800; }
.arcade-art-sticker > span { position:absolute; right:12px; top:15px; font-size:24px; }
:root[data-design='arcade'][data-theme='dark'] .arcade-art-disc { fill:#38304f; }
:root[data-design='arcade'] .intro-strip { position:relative; padding:17px 0; border:0; border-block:1px solid var(--line); font-size:12px; font-weight:700; }
:root[data-design='arcade'] .intro-strip b { display:grid; place-items:center; width:27px; height:27px; background:var(--arcade-lilac); color:#29283e; border-radius:7px; font-size:10px; font-weight:700; transform:rotate(-6deg); }
:root[data-design='arcade'] .intro-strip > span:nth-child(2) b { background:var(--arcade-coral); transform:rotate(5deg); }
:root[data-design='arcade'] .intro-strip > span:nth-child(3) b { background:var(--arcade-lime); }
:root[data-design='arcade'] .intro-strip > span:not(:first-child) { border-left:0; }

/* Tactile controls. The game-page exclusion preserves precise board controls. */
:root[data-design='arcade'] body:not(.game-page) .button { border:1.5px solid var(--arcade-outline); border-radius:8px; box-shadow:3px 4px 0 var(--arcade-flat-shadow); transition:transform .16s,box-shadow .16s,background .16s; }
:root[data-design='arcade'] body:not(.game-page) .button:hover:not(:disabled) { transform:translateY(-2px); box-shadow:3px 6px 0 var(--arcade-flat-shadow); }
:root[data-design='arcade'] body:not(.game-page) .button:active:not(:disabled) { transform:translate(2px,3px); box-shadow:1px 1px 0 var(--arcade-flat-shadow); }
:root[data-design='arcade'] body:not(.game-page) .button-primary { background:var(--arcade-lime); color:#29283e; border-color:#29283e; }
:root[data-design='arcade'] body:not(.game-page) .button-primary:hover { background:#ddff86; }
:root[data-design='arcade'] body:not(.game-page) .button-secondary { background:var(--surface); }
:root[data-design='arcade'] .hero .text-link { text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--arcade-heading); }

/* Catalog: expressive covers, calm descriptions, one clear action per game. */
:root[data-design='arcade'] .library-heading { margin:29px 0 18px; }
:root[data-design='arcade'] .library-heading h2 { display:flex; align-items:center; gap:13px; font-size:32px; }
:root[data-design='arcade'] .library-heading h2::before { content:''; width:25px; height:25px; border-radius:2px; background:repeating-conic-gradient(var(--ink) 0 25%,transparent 0 50%) 0 0 / 16px 16px; transform:rotate(-7deg); }
:root[data-design='arcade'] .library-filters { border:0; border-block:1px solid var(--line); border-radius:0; background:transparent; padding:15px 0 12px; }
:root[data-design='arcade'] .library-filter { border-radius:6px; background:var(--surface); transition:background .15s,border-color .15s; }
:root[data-design='arcade'] .library-filter:hover { background:var(--accent-soft); border-color:var(--accent-ink); }
:root[data-design='arcade'] .library-filter:has(input:checked) { background:var(--arcade-lilac); color:#29283e; border-color:#29283e; box-shadow:0 2px 0 #29283e; }
:root[data-design='arcade'] .library-filters legend { color:var(--ink); }
:root[data-design='arcade'] .library-favorite-note { margin:12px 0 18px; }
:root[data-design='arcade'] .library-grid { gap:23px; }
:root[data-design='arcade'] .game-catalog-card { border:1.5px solid var(--arcade-outline); border-radius:14px; box-shadow:0 5px 0 var(--line); transition:box-shadow .18s,border-color .18s; }
:root[data-design='arcade'] .game-catalog-card:hover { border-color:var(--accent-ink); box-shadow:0 6px 0 var(--arcade-lilac); }
:root[data-design='arcade'] .game-catalog-preview { border-bottom:1.5px solid var(--arcade-outline); }
:root[data-design='arcade'] .game-catalog-info { padding:20px 22px 25px; gap:12px; }
:root[data-design='arcade'] .game-catalog-info h3 { font-size:29px; }
:root[data-design='arcade'] .game-catalog-status { border-radius:4px; background:var(--accent-soft); }
:root[data-design='arcade'] .game-catalog-info > .button { background:var(--surface); color:var(--ink); border-color:var(--arcade-outline); }
:root[data-design='arcade'] .game-catalog-card:hover .game-catalog-info > .button { background:var(--arcade-lime); color:#29283e; }
:root[data-design='arcade'] .favorite-toggle { border-radius:8px; }
:root[data-design='arcade'] .how-it-works { border-top:2px solid var(--arcade-outline); }
:root[data-design='arcade'] .how-it-works h2 { font-size:34px; }

/* Returning players and forms share the look without a second marketing hero. */
:root[data-design='arcade'] .dashboard-top { padding:32px 0 26px; border-bottom:1px solid var(--line); }
:root[data-design='arcade'] .dashboard-top .eyebrow { color:var(--accent-ink); }
:root[data-design='arcade'] .dashboard-top h1 { margin:12px 0; font-size:47px; }
:root[data-design='arcade'] .dashboard-top .accent-dot { color:var(--arcade-heading); }
:root[data-design='arcade'] .hub-empty { background:var(--arcade-tint); border:0; border-radius:8px; padding:20px; }
:root[data-design='arcade'] body:not(.game-page) .account-form { border:1px solid var(--arcade-outline); border-top:6px solid var(--arcade-lilac); border-radius:12px; box-shadow:5px 6px 0 var(--line); }
:root[data-design='arcade'] .hub-dialog { border:1px solid var(--arcade-outline); border-radius:16px; box-shadow:7px 8px 0 var(--arcade-flat-shadow),0 20px 80px #0004; }
:root[data-design='arcade'] .hub-dialog-heading { background:var(--arcade-tint); }
:root[data-design='arcade'] .hub-dialog-heading h2 { font-family:var(--arcade-display); font-weight:800; }
:root[data-design='arcade'] .design-option[aria-pressed='true'] { box-shadow:3px 4px 0 var(--accent-ink); }
:root[data-design='arcade'] .site-footer { border-top:1px solid var(--line); background:var(--surface-alt); }
:root[data-design='arcade'] .footer-brand { font-family:var(--arcade-display); font-weight:800; }

/* Brief entrance, artwork depth on hover, and physical button press. No loops. */
@keyframes arcade-arrive { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
:root[data-design='arcade'] .hero-copy { animation:arcade-arrive .45s ease-out both; }
:root[data-design='arcade'] .arcade-artwork { animation:arcade-arrive .6s .08s ease-out both; }
.arcade-controller { transform-origin:50% 55%; transition:transform .28s ease; }
.arcade-artwork:hover .arcade-controller { transform:translateY(-5px) rotate(2deg); }
@media (min-width:1000px) and (max-width:1250px) {
  :root[data-design='arcade'] .header-actions { gap:13px; }
  :root[data-design='arcade'] .hero h1 { font-size:54px; }
  :root[data-design='arcade'] .hero { min-height:380px; }
}
@media (prefers-reduced-motion:reduce) {
  :root[data-design='arcade'] *, :root[data-design='arcade'] *::before, :root[data-design='arcade'] *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}