/* MotionPad v1.0 — dedicated Working Games navigation and compatibility page. */
.nav-links{gap:clamp(12px,1.8vw,25px)}
.nav-links a[aria-current="page"]{color:var(--cyan)}
.mobile-tabs{display:none}
.games-cta{display:inline-flex;align-items:center;gap:30px;justify-content:space-between;border:1px solid var(--cyan);color:var(--cyan);padding:11px 15px;margin:5px 0 15px;font:850 11px var(--mono);letter-spacing:1px;transition:background .2s,transform .2s}
.games-cta:hover{background:rgba(123,210,234,.12);transform:translateY(-2px)}
@media(max-width:760px){.mobile-tabs{display:flex;align-items:center;gap:8px;padding:10px 0 13px;border-bottom:1px solid var(--line)}.mobile-tabs a{color:var(--muted);font:800 11px var(--mono);letter-spacing:.5px;display:flex;align-items:center;justify-content:center;min-height:39px;border:1px solid var(--line);border-radius:12px;padding:7px 13px;background:rgba(100,155,207,.08)}.mobile-tabs a[aria-current="page"]{color:var(--ink);border-color:var(--cyan);background:rgba(146,227,255,.15)}.mobile-tabs a span{margin-left:9px}}
.games-main{padding-bottom:70px}
.games-hero{position:relative;overflow:hidden;isolation:isolate;padding:95px 60px 80px 0;min-height:450px;display:flex;align-items:center}
.games-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 80% 45%,rgba(79,169,218,.12),transparent 55%),linear-gradient(110deg,rgba(8,22,36,.13),transparent)}
.games-hero-inner{position:relative;z-index:2}
.game-kicker{color:var(--cyan);display:flex;align-items:center;gap:12px}.game-kicker-line{display:inline-block;width:26px;height:2px;background:currentColor}
.games-hero h1{font:900 clamp(60px,8vw,115px)/.9 var(--display);letter-spacing:-3px;margin:25px 0 24px;max-width:none;color:var(--ink)}
.games-hero h1 span{display:inline;color:var(--acid)}
.games-description{font-size:clamp(15px,1.4vw,18px);line-height:1.7;color:var(--muted);max-width:600px}
.games-hero-stats{display:flex;align-items:center;gap:32px;margin-top:30px}
.games-hero-stats>div:not(.stat-rule){display:flex;align-items:center;gap:13px}
.games-hero-stats strong{font:900 37px var(--display);color:var(--acid)}
.games-hero-stats span{font:700 10px/1.6 var(--mono);max-width:120px;color:var(--muted);letter-spacing:.4px}
.stat-rule{width:1px;height:36px;background:var(--line)}
.games-hero-deco{position:absolute;right:-100px;top:0;width:480px;height:420px;display:grid;place-items:center;opacity:.6;pointer-events:none}
.games-hero-deco .ring{position:absolute;border:1px solid rgba(143,220,248,.28);border-radius:50%;width:280px;height:280px}.games-hero-deco .r2{width:385px;height:385px;border-style:dashed;opacity:.7}.games-hero-deco .r3{width:210px;height:210px;border-color:rgba(193,241,255,.36)}
.controller-mark{font:900 110px/1 var(--display);letter-spacing:-15px;padding-right:18px;color:rgba(163,230,255,.14);text-shadow:0 0 70px rgba(99,192,251,.32)}
.games-results{padding:20px 0 90px}
.games-heading-line{display:flex;align-items:end;gap:24px;justify-content:space-between;margin-bottom:25px}
.games-heading-line h2{font:900 clamp(37px,5vw,68px)/.96 var(--display);letter-spacing:-1px;margin:20px 0 0}
.games-heading-line h2 em{font-style:normal;color:var(--acid)}
.tested-label{white-space:nowrap;display:flex;align-items:center;gap:11px;font:750 10px var(--mono);letter-spacing:.8px;color:var(--muted);padding:14px 16px;border:1px solid var(--line);border-radius:999px}
.game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.game-result{min-width:0;min-height:345px;overflow:hidden;position:relative;padding:24px 29px 29px;border:1px solid var(--line);border-top:1px solid rgba(228,245,255,.38);border-radius:25px;background:linear-gradient(135deg,rgba(135,181,241,.14),rgba(78,131,209,.06)),rgba(13,29,53,.36);box-shadow:0 15px 40px rgba(0,5,20,.16);transition:transform .2s,border-color .2s;display:flex;flex-direction:column;justify-content:space-between}
.game-result:hover{transform:translateY(-4px);border-color:rgba(167,232,248,.5)}
.game-result::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 74% 32%,var(--card-glow,rgba(94,201,231,.16)),transparent 57%)}
.game-result>*{position:relative;z-index:1}
.game-topline{display:flex;align-items:center;justify-content:space-between;gap:12px}
.game-index{font:700 10px var(--mono);letter-spacing:1px;color:var(--muted)}
.game-status{display:inline-flex;align-items:center;gap:7px;font:900 10px var(--mono);letter-spacing:.6px;color:#9bf5d6;background:rgba(30,181,127,.12);border:1px solid rgba(145,247,216,.36);padding:8px 10px;border-radius:30px}
.game-check{font-size:13px}
.game-emblem{position:absolute;right:32px;top:79px;font:900 clamp(75px,9vw,130px)/1 var(--display);font-style:italic;letter-spacing:-9px;color:rgba(159,216,255,.25);user-select:none;text-shadow:0 5px 35px rgba(123,206,245,.08);z-index:0}
.game-emblem span{color:rgba(192,215,255,.36)}
.gt4{--card-glow:rgba(132,110,248,.17)}.gt4 .game-emblem{color:rgba(175,163,255,.28)}
.tt{--card-glow:rgba(35,210,205,.14)}.tt .game-emblem{color:rgba(124,238,220,.26)}
.nfsc{--card-glow:rgba(236,171,80,.14)}.nfsc .game-emblem{color:rgba(240,200,115,.23)}
.game-info{margin-top:152px}
.game-type{font:800 10px var(--mono);letter-spacing:1.5px;color:var(--cyan);margin-bottom:12px}
.game-info h3{font:850 clamp(27px,3.15vw,42px)/1.08 var(--display);letter-spacing:-1px;color:var(--ink);margin:0}
.game-info h3 span{color:var(--acid)}
.game-info p{font-size:13px;line-height:1.6;color:var(--muted);margin:13px 0 0;max-width:440px}
.game-notes{padding:30px 35px;border:1px solid rgba(185,168,250,.42);border-radius:22px;background:linear-gradient(140deg,rgba(123,91,199,.11),rgba(49,124,171,.08))}
.game-notes-header{display:flex;align-items:center;gap:18px}
.game-notes-symbol{display:grid;place-items:center;flex:none;height:48px;width:48px;border-radius:14px;background:rgba(183,151,253,.12);border:1px solid rgba(189,174,247,.4);font:900 23px var(--mono);color:#c9afff}
.game-notes-header .eyebrow{color:#bea9fa}
.game-notes h2{margin:5px 0 0;font:850 clamp(23px,3.5vw,35px) var(--display);letter-spacing:-1px}
.game-notes p{max-width:780px;color:var(--muted);font-size:14px;line-height:1.7;margin:18px 0 20px}
.game-notes strong{color:var(--ink)}
.notes-foot{display:flex;gap:25px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px;color:var(--muted);font:700 10px/1.7 var(--mono);letter-spacing:.3px}
.notes-foot span::before{content:"+";color:var(--cyan);margin-right:9px}
.games-return{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:37px 0;font:700 10px var(--mono);color:var(--muted);letter-spacing:1px}
.games-back{display:inline-flex;align-items:center;gap:8px;color:var(--cyan);border-bottom:1px solid var(--cyan);padding-bottom:8px}
/* theme specifics */
html[data-theme="glass"] .game-result{backdrop-filter:blur(22px);background:linear-gradient(155deg,rgba(182,218,255,.16),rgba(70,115,184,.08));border:1px solid rgba(217,245,255,.3);border-top:1px solid rgba(255,255,255,.45);box-shadow:0 20px 52px rgba(1,11,38,.2),inset 0 1px rgba(255,255,255,.12)}
html[data-theme="glass"] .game-notes{background:linear-gradient(145deg,rgba(192,174,255,.14),rgba(98,182,227,.08));backdrop-filter:blur(20px)}
html[data-theme="original"] .game-result,html:not([data-theme]) .game-result{border-radius:5px;background:#121d22}
html[data-theme="original"] .game-notes,html:not([data-theme]) .game-notes{border-radius:3px}
html[data-theme="dark"] .game-result{background:linear-gradient(145deg,#24163b,#17162c);border-color:rgba(185,148,255,.3)}
html[data-theme="dark"] .game-notes{background:#201631}
html[data-theme="light"] .game-hero::before{background:radial-gradient(ellipse at 80% 45%,rgba(79,169,218,.10),transparent 55%)}
html[data-theme="light"] .game-result{background:linear-gradient(140deg,#ffffff,#f1f5f8);border-color:#d5e0e3;box-shadow:0 14px 33px rgba(13,55,90,.08)}
html[data-theme="light"] .game-status{color:#0e7259;border-color:#a1d5c5;background:#eafbf2}
html[data-theme="light"] .game-emblem{color:rgba(19,105,136,.19)}
html[data-theme="light"] .game-info h3,html[data-theme="light"] .game-notes strong{color:#15313f}
html[data-theme="light"] .game-notes{background:#f8f7fe;border-color:#d1c4ee}
html[data-theme="light"] .game-notes-symbol{color:#704fb0}
html[data-theme="light"] .games-hero-deco{opacity:.3}
@media(max-width:930px){.games-hero-deco{right:-170px;opacity:.35}.games-hero{padding:70px 20px 65px 0}.games-hero h1{font-size:clamp(52px,8vw,85px)}.game-result{min-height:330px}.game-emblem{right:20px;font-size:95px}.game-info{margin-top:130px}}
@media(max-width:760px){.games-hero{min-height:365px;padding:55px 0 35px}.games-hero h1{font-size:clamp(53px,10vw,82px);letter-spacing:-2px}.games-hero-deco{right:-230px;opacity:.3}.games-results{padding:20px 0 65px}.games-heading-line{align-items:start;flex-direction:column;gap:16px}.game-grid{grid-template-columns:1fr}.game-result{min-height:295px}.game-info{margin-top:125px}.game-notes{padding:24px}.games-hero-stats strong{font-size:30px}.games-hero-stats{gap:14px}.games-hero-stats>div:not(.stat-rule){gap:8px}.games-return{align-items:start;flex-direction:column}}
@media(max-width:390px){.games-hero h1{font-size:50px}.games-hero-stats span{font-size:9px}.game-result{padding:20px}.game-info h3{font-size:28px}}
@media(prefers-reduced-motion:reduce){.game-result,.games-cta{transition:none}}
/* Five desktop navigation items switch to compact mobile-style tabs before they can wrap. */
@media (max-width:1120px){
  .nav-links{display:none}
  .mobile-tabs{display:flex;align-items:center;gap:8px;padding:10px 0 13px;border-bottom:1px solid var(--line)}
  .mobile-tabs a{color:var(--muted);font:800 11px var(--mono);letter-spacing:.5px;display:flex;align-items:center;justify-content:center;min-height:39px;border:1px solid var(--line);border-radius:12px;padding:7px 13px;background:rgba(100,155,207,.08)}
  .mobile-tabs a[aria-current="page"]{color:var(--ink);border-color:var(--cyan);background:rgba(146,227,255,.15)}
  .mobile-tabs a span{margin-left:9px}
}
/* Always use the same receiver-derived MotionPad mark (not a theme-colored square). */
html[data-theme] .brand-mark,html:not([data-theme]) .brand-mark{background:url("./assets/motionpad-brand-icon-128.png") center/cover no-repeat;border-radius:10px;clip-path:none}