/* Self-hosted estate fonts (OFL — see assets/fonts/LICENSE-FONTS.txt). */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/instrument-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/instrument-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("../fonts/instrument-sans-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("../fonts/instrument-sans-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("../fonts/jetbrains-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: dark;
  /* Pac-Man rules: TRUE black cabinet, colour comes from the games —
     bright yellow, orange, red, pink, cyan, blue, green, purple splattered
     against the dark. Every hub owns one of the bright colours. */
  --bg: #050506;
  --bg-deep: #000000;
  --pane: #101014;
  --card: #131318;
  --card-2: #1b1b22;
  --ink: #ffffff;
  --body: #d9d9e0;
  --dim: #9c9ca8;
  --dim-2: #6e6e7a;
  --stroke: rgba(255, 255, 255, .09);
  --stroke-2: rgba(255, 255, 255, .18);
  --arc-yellow: #ffd94a;
  --arc-orange: #ff9718;
  --arc-red: #ff4d57;
  --arc-pink: #ff6bd6;
  --arc-cyan: #33e0ff;
  --arc-blue: #5c8bff;
  --arc-green: #3aff77;
  --arc-purple: #b388ff;
  --accent: var(--arc-green);
  --accent-hot: #8cffb2;
  --cyan: var(--arc-cyan);
  --lime: #c8ff4d;
  --violet: var(--arc-purple);
  --pink: var(--arc-pink);
  --danger: var(--arc-red);
  --success: var(--arc-green);
  --room-accent: var(--accent);
  --grid-line: rgba(255, 255, 255, .03);
  --panel-glass: rgba(16, 16, 20, .92);
  --ground-glow-1: rgba(255, 151, 24, .07);
  --ground-glow-2: rgba(92, 139, 255, .07);
  --ground-glow-3: rgba(255, 107, 214, .05);
  --sans: "Instrument Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --shell: min(1240px, calc(100vw - 40px));
  --shadow-card: 0 16px 40px rgba(0, 0, 0, .32);
  --shadow-lift: 0 24px 65px rgba(0, 0, 0, .55);
  --shadow-glow: 0 0 0 1px color-mix(in srgb, var(--room-accent) 32%, transparent), 0 35px 100px rgba(0, 0, 0, .6);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f5f7;
  --bg-deep: #e8e8ee;
  --pane: #ffffff;
  --card: #ffffff;
  --card-2: #f1f1f5;
  --ink: #131316;
  --body: #3c3c46;
  --dim: #6d6d7a;
  --dim-2: #8f8f9c;
  --stroke: rgba(19, 19, 22, .1);
  --stroke-2: rgba(19, 19, 22, .2);
  --arc-yellow: #e0a800;
  --arc-orange: #e87510;
  --arc-red: #e03340;
  --arc-pink: #d63ab0;
  --arc-cyan: #0996c2;
  --arc-blue: #3c63e0;
  --arc-green: #0fa653;
  --arc-purple: #7d55d8;
  --accent-hot: #12c462;
  --lime: #7ba314;
  --grid-line: rgba(19, 19, 22, .05);
  --panel-glass: rgba(255, 255, 255, .92);
  --ground-glow-1: rgba(232, 117, 16, .08);
  --ground-glow-2: rgba(60, 99, 224, .07);
  --ground-glow-3: rgba(214, 58, 176, .05);
  --shadow-card: 0 14px 36px rgba(19, 19, 22, .08);
  --shadow-lift: 0 24px 60px rgba(19, 19, 22, .16);
  --shadow-glow: 0 0 0 1px color-mix(in srgb, var(--room-accent) 30%, transparent), 0 30px 80px rgba(19, 19, 22, .18);
}


* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(28rem 20rem at 8% 2%, rgba(255, 151, 24, .13), transparent 70%),
    radial-gradient(30rem 22rem at 90% 8%, rgba(92, 139, 255, .13), transparent 70%),
    radial-gradient(24rem 18rem at 72% 38%, rgba(255, 107, 214, .1), transparent 70%),
    radial-gradient(26rem 20rem at 15% 55%, rgba(51, 224, 255, .09), transparent 70%),
    radial-gradient(24rem 18rem at 85% 72%, rgba(58, 255, 119, .09), transparent 70%),
    radial-gradient(22rem 16rem at 40% 90%, rgba(255, 217, 74, .08), transparent 70%),
    radial-gradient(20rem 15rem at 55% 20%, rgba(179, 136, 255, .07), transparent 70%),
    var(--bg);
  color: var(--body);
  font: 16px/1.65 var(--sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: min(1100px, 100vh);
  z-index: -1;
  pointer-events: none;
  opacity: .35;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, #000, transparent 75%);
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
img, svg, canvas { max-width: 100%; }
h1, h2, h3, p { overflow-wrap: break-word; }
h1, h2, h3 { color: var(--ink); line-height: 1.08; letter-spacing: -.035em; }
h1 { font-size: clamp(2.5rem, 7vw, 5.8rem); }
h2 { font-size: clamp(2rem, 4vw, 3.35rem); }
h3 { font-size: 1.25rem; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
[hidden] { display: none !important; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 99999; padding: 10px 16px; background: var(--ink); color: var(--bg); border-radius: 8px; }
.skip-link:focus { top: 16px; }
.site-shell { width: var(--shell); margin-inline: auto; }
.site-main { min-height: 70vh; }

/* Header */
.site-header {
  position: relative;
  z-index: 30;
  border-bottom: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--pane) 80%, transparent);
  backdrop-filter: blur(18px);
}
.header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.wordmark { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); font-size: 1.08rem; font-weight: 850; letter-spacing: -.03em; }
.wordmark-mark { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid rgba(47,230,115,.6); border-radius: 9px; background: linear-gradient(145deg, rgba(47,230,115,.16), rgba(47,230,115,.03)); color: var(--accent-hot); font: 800 18px/1 var(--serif); transform: rotate(-3deg); }
.wordmark-dot { color: var(--accent); }
.site-navigation { display: flex; align-items: center; gap: 26px; font-size: .9rem; font-weight: 650; }
.site-navigation a { color: var(--dim); transition: color .15s ease; }
.site-navigation a:hover { color: var(--ink); }
.site-menu { display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; }
.site-navigation .menu-item { list-style: none; }
.nav-toggle { display: none; border: 1px solid var(--stroke-2); border-radius: 9px; background: var(--pane); padding: 7px 10px; cursor: pointer; }

/* Shared accents and controls */
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 13px; color: var(--accent-hot); font: 750 .72rem/1.2 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.eyebrow > span { width: 23px; height: 1px; background: currentColor; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 19px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; font-weight: 750; transition: transform .14s ease, background .14s ease, border-color .14s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--accent); color: #fff8f2; box-shadow: 0 8px 30px rgba(47,230,115,.16); }
.button-primary:hover { background: var(--accent-hot); }
.button-quiet { border-color: var(--stroke-2); background: transparent; color: var(--ink); }
.button-quiet:hover { border-color: var(--accent); background: rgba(47,230,115,.07); }

/* Home hero */
.hero { overflow: hidden; padding: clamp(70px, 9vw, 126px) 0 86px; border-bottom: 1px solid var(--stroke); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .68fr); gap: clamp(50px, 8vw, 120px); align-items: center; }
.hero-copy h1 { max-width: 850px; margin: 0; font-weight: 820; }
.hero-copy h1 em { color: var(--accent); font-family: var(--serif); font-weight: 400; }
.hero-lede { max-width: 690px; margin: 27px 0 0; color: var(--dim); font-size: clamp(1.05rem, 1.5vw, 1.24rem); line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 31px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 12px 25px; margin: 31px 0 0; padding: 0; color: var(--dim); font-size: .82rem; list-style: none; }
.trust-row li::before { content: "✓"; margin-right: 7px; color: var(--lime); font-weight: 850; }
.hero-machine { position: relative; width: min(100%, 420px); aspect-ratio: .82; justify-self: center; padding: 18px 22px 33px; border: 1px solid rgba(47,230,115,.3); border-radius: 30px 30px 17px 17px; background: linear-gradient(145deg, #292330, #17141e 70%); box-shadow: 0 40px 100px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.07); transform: perspective(900px) rotateY(-5deg) rotateX(1deg); }
.hero-machine::before { content: ""; position: absolute; inset: 13% -14% -8% 19%; z-index: -1; border-radius: 50%; background: rgba(47,230,115,.1); filter: blur(50px); }
.machine-top { height: 56px; display: flex; align-items: center; gap: 7px; color: var(--ink); font: 900 1.2rem/1 var(--mono); letter-spacing: .12em; }
.machine-top span { margin-right: auto; }
.machine-top i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 13px var(--accent); }
.machine-top i:nth-last-child(2) { background: var(--cyan); box-shadow: 0 0 13px var(--cyan); }
.machine-top i:last-child { background: var(--lime); box-shadow: 0 0 13px var(--lime); }
.machine-screen { display: grid; place-items: center; min-height: 66%; padding: 30px; border: 11px solid #0a0910; border-radius: 12px 12px 23px 23px; background: radial-gradient(circle at 50% 39%, rgba(53,214,255,.14), transparent 30%), repeating-linear-gradient(to bottom, rgba(255,255,255,.018) 0 1px, transparent 1px 4px), #08070c; box-shadow: inset 0 0 60px rgba(0,0,0,.7); text-align: center; }
.pixel-bear { display: grid; place-items: center; width: 104px; height: 91px; margin-top: 8px; border-radius: 42% 42% 47% 47%; background: #433a45; box-shadow: -31px -25px 0 -18px #433a45, 31px -25px 0 -18px #433a45, inset 0 -13px rgba(0,0,0,.22); }
.pixel-bear span { color: var(--accent-hot); font-size: 33px; text-shadow: 0 0 25px var(--accent); }
.machine-screen p { margin: 25px 0 0; color: var(--dim); font: 700 .76rem/1.5 var(--mono); letter-spacing: .16em; }
.machine-screen b { color: var(--accent-hot); }
.machine-controls { display: flex; align-items: center; gap: 18px; padding: 25px 16px 0; }
.machine-controls span { width: 58px; height: 19px; border-radius: 999px; background: #09080d; box-shadow: inset 0 2px 5px #000; }
.machine-controls i { width: 29px; height: 29px; margin-left: auto; border-radius: 50%; background: var(--accent); box-shadow: 0 4px 0 #0f7a3c, 0 7px 15px rgba(0,0,0,.5); }
.machine-controls i:last-child { margin-left: 0; background: var(--cyan); box-shadow: 0 4px 0 #0e6f86, 0 7px 15px rgba(0,0,0,.5); }

/* Catalogue */
.section-block { padding-block: 92px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 29px; }
.section-heading h2 { margin: 0; }
.section-heading > a { padding-bottom: 7px; color: var(--dim); border-bottom: 1px solid var(--stroke-2); font-size: .9rem; }
.section-heading > a:hover { color: var(--ink); border-color: var(--accent); }
.featured-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.library-section { padding-block: 96px 112px; border-top: 1px solid var(--stroke); background: color-mix(in srgb, var(--bg-deep) 55%, transparent); }
.library-heading > p { margin: 0 0 8px; color: var(--dim); font-size: .84rem; }
.library-heading > p strong { color: var(--ink); font: 800 1.05rem/1 var(--mono); }
.catalog-controls { position: sticky; top: 8px; z-index: 15; display: grid; grid-template-columns: minmax(250px, 360px) 1fr; gap: 20px; align-items: start; margin: 35px 0 27px; padding: 12px; border: 1px solid var(--stroke); border-radius: 15px; background: var(--panel-glass); box-shadow: 0 18px 50px rgba(0,0,0,.24); backdrop-filter: blur(18px); }
.catalog-search { display: flex; align-items: center; gap: 10px; height: 45px; padding: 0 13px; border: 1px solid var(--stroke-2); border-radius: 10px; background: var(--bg-deep); }
.catalog-search > span { color: var(--accent); font-size: 1.3rem; }
.catalog-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); }
.catalog-search input::placeholder { color: var(--dim-2); }
.category-chips { display: flex; gap: 7px; overflow-x: auto; padding: 2px 1px 5px; scrollbar-width: thin; }
.category-chips button { flex: 0 0 auto; min-height: 41px; padding: 7px 12px; border: 1px solid var(--stroke); border-radius: 9px; background: transparent; color: var(--dim); cursor: pointer; font-size: .78rem; white-space: nowrap; }
.category-chips button:hover, .category-chips button.is-active { border-color: rgba(47,230,115,.5); background: rgba(47,230,115,.1); color: var(--ink); }
.category-chips button span { margin-left: 5px; color: #746c72; font: .68rem/1 var(--mono); }
.game-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.game-card { min-width: 0; }
.game-card > a { position: relative; display: flex; min-height: 228px; height: 100%; padding: 19px; overflow: hidden; border: 1px solid var(--stroke); border-radius: 15px; background: linear-gradient(150deg, rgba(255,255,255,.025), transparent 48%), var(--pane); box-shadow: var(--shadow-card); transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.game-card > a::after { content: ""; position: absolute; width: 130px; height: 130px; right: -72px; bottom: -76px; border: 1px solid rgba(53,214,255,.14); border-radius: 50%; box-shadow: 0 0 0 20px rgba(47,230,115,.03), 0 0 0 40px rgba(53,214,255,.02); }
.game-card > a:hover { transform: translateY(-4px); border-color: rgba(47,230,115,.5); background-color: var(--card); box-shadow: var(--shadow-lift); }
.game-card-icon { flex: 0 0 auto; display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid rgba(47,230,115,.25); border-radius: 11px; background: rgba(47,230,115,.08); color: var(--accent-hot); font: 750 1rem/1 var(--mono); }
.game-card-copy { display: flex; flex-direction: column; min-width: 0; padding-left: 14px; }
.game-card-category { margin: 3px 27px 6px 0; color: var(--dim); font: 700 .62rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.game-card strong { color: var(--ink); font-size: 1.04rem; line-height: 1.25; }
.game-card-summary { display: -webkit-box; margin-top: 11px; overflow: hidden; color: var(--dim); font-size: .77rem; line-height: 1.52; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.game-card-meta { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: auto; padding-top: 14px; color: #857c81; font: .61rem/1.2 var(--mono); text-transform: uppercase; }
.game-card-meta span + span::before { content: "•"; margin-right: 9px; color: var(--accent); }
.game-card-arrow { position: absolute; top: 17px; right: 17px; color: #776e73; transition: color .15s ease, transform .15s ease; }
.game-card a:hover .game-card-arrow { color: var(--accent); transform: translate(2px,-2px); }
.game-card[data-category="puzzles"] .game-card-icon { color: var(--cyan); border-color: rgba(114,217,220,.23); background: rgba(114,217,220,.07); }
.game-card[data-category="card-games"] .game-card-icon, .game-card[data-category="board-games"] .game-card-icon { color: var(--lime); border-color: rgba(182,220,113,.23); background: rgba(182,220,113,.07); }
.game-card[data-category="runners-platformers"] .game-card-icon, .game-card[data-category="action-games"] .game-card-icon { color: var(--pink); border-color: rgba(240,154,178,.23); background: rgba(240,154,178,.07); }
.game-card[data-category="rhythm-games"] .game-card-icon, .game-card[data-category="word-games"] .game-card-icon { color: var(--violet); border-color: rgba(183,155,241,.23); background: rgba(183,155,241,.07); }
.game-card-compact > a { min-height: 127px; padding: 17px; }
.game-card-compact .game-card-meta { padding-top: 10px; }
.catalog-empty { padding: 70px 20px; border: 1px dashed var(--stroke-2); border-radius: 16px; text-align: center; }
.catalog-empty > span { color: var(--accent); font-size: 2rem; }
.catalog-empty h3 { margin: 10px 0 5px; }
.catalog-empty p { margin: 0; color: var(--dim); }

/* Individual rooms */
.room-page { padding: 38px 0 92px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; color: #8e858a; font-size: .75rem; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs [aria-current="page"] { color: var(--body); }
.room-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 50px; align-items: end; margin-bottom: 35px; }
.room-header h1 { max-width: 900px; margin: 0; font-size: clamp(2.4rem, 5.3vw, 5rem); }
.room-header > div > p:last-child { max-width: 750px; margin: 19px 0 0; color: var(--dim); font-size: 1.03rem; }
.room-facts { display: flex; gap: 26px; margin: 0 0 5px; padding: 14px 17px; border: 1px solid var(--stroke); border-radius: 12px; background: rgba(255,255,255,.018); }
.room-facts div { min-width: 74px; }
.room-facts dt { color: #7f777c; font: .62rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.room-facts dd { margin: 4px 0 0; color: var(--ink); font-size: .78rem; font-weight: 700; }
.player-shell { overflow: hidden; border: 1px solid var(--stroke-2); border-radius: 18px; background: #09080e; box-shadow: 0 35px 90px rgba(0,0,0,.38); }
.player-toolbar { min-height: 52px; display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 8px 12px 8px 17px; border-bottom: 1px solid var(--stroke); background: #16131d; }
.player-toolbar > a { color: var(--dim); font-size: .8rem; }
.player-toolbar > a:hover { color: var(--ink); }
.player-toolbar > div { display: flex; gap: 7px; }
.player-toolbar button { padding: 7px 11px; border: 1px solid var(--stroke); border-radius: 8px; background: var(--pane); color: var(--body); cursor: pointer; font-size: .75rem; }
.player-toolbar button:hover { border-color: var(--accent); color: var(--ink); }
.game-runtime { position: relative; width: 100%; min-height: 690px; background: #08070c; }
.game-runtime::before { content: "Opening game…"; position: absolute; inset: 0; display: grid; place-items: center; color: #706871; font: .75rem/1 var(--mono); letter-spacing: .08em; }
.game-runtime.is-ready::before { display: none; }
.game-runtime iframe { position: relative; z-index: 1; display: block; width: 100%; height: 720px; border: 0; background: #050508; }
.native-runtime { min-height: 720px; }
.native-runtime::before { display: none; }
#ursy-native-game { position: relative; min-height: 720px; height: 720px; overflow: auto; }
#ursy-native-game > .arcade { min-height: 100%; }
.runtime-loading { display: grid; min-height: 600px; margin: 0; place-items: center; color: var(--dim); }
.runtime-error { position: relative; z-index: 2; display: grid; min-height: 450px; place-content: center; padding: 30px; text-align: center; }
.runtime-error strong { color: var(--danger); font-size: 1.2rem; }
.runtime-error p { color: var(--dim); }
.game-runtime:fullscreen { width: 100vw; height: 100vh; min-height: 100vh; background: #08070c; }
.game-runtime:fullscreen iframe, .game-runtime:fullscreen #ursy-native-game { width: 100%; height: 100%; min-height: 100%; }
.touch-controller { border-top: 1px solid var(--stroke); padding: 12px 16px 16px; background: #121019; }
.touch-controller summary { cursor: pointer; color: var(--body); font-size: .82rem; font-weight: 700; }
.touch-controller > p { color: var(--dim); font-size: .75rem; }
.touch-pad { display: grid; grid-template-columns: repeat(3, 48px); justify-content: center; gap: 5px; }
.touch-actions { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.touch-controller button { min-width: 48px; min-height: 45px; border: 1px solid var(--stroke-2); border-radius: 9px; background: var(--card); color: var(--ink); cursor: pointer; touch-action: none; user-select: none; }
.touch-controller button:active { border-color: var(--accent); background: rgba(47,230,115,.2); transform: translateY(1px); }
.room-content-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .7fr); gap: clamp(35px, 7vw, 90px); align-items: start; padding: 75px 0 25px; }
.room-copy { max-width: 780px; }
.room-copy h2 { margin: 0 0 23px; }
.room-copy h3 { margin-top: 35px; }
.room-copy > p { color: var(--dim); }
.instruction-list { display: grid; gap: 10px; padding: 0; list-style: none; counter-reset: instructions; }
.instruction-list li { position: relative; padding: 13px 16px 13px 49px; border: 1px solid var(--stroke); border-radius: 10px; background: rgba(255,255,255,.018); counter-increment: instructions; }
.instruction-list li::before { content: counter(instructions, decimal-leading-zero); position: absolute; left: 15px; color: var(--accent); font: 700 .7rem/1.8 var(--mono); }
.play-note { margin-top: 25px; padding-left: 15px; border-left: 2px solid var(--accent); font-size: .84rem; }
.provenance-card { padding: 27px; border: 1px solid rgba(114,217,220,.2); border-radius: 16px; background: linear-gradient(145deg, rgba(114,217,220,.06), rgba(255,255,255,.015)); }
.provenance-mark { display: grid; place-items: center; width: 49px; height: 49px; margin-bottom: 25px; border: 1px solid rgba(114,217,220,.3); border-radius: 50%; color: var(--cyan); font: 700 .8rem/1 var(--mono); }
.provenance-card h2 { margin: 0; font-size: 1.48rem; }
.provenance-card > p { color: var(--dim); font-size: .87rem; }
.provenance-card dl { margin: 26px 0; }
.provenance-card dl div { display: grid; grid-template-columns: 94px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--stroke); }
.provenance-card dt { color: #837b80; font: .63rem/1.5 var(--mono); text-transform: uppercase; }
.provenance-card dd { margin: 0; color: var(--body); font-size: .77rem; }
.provenance-links { display: flex; flex-wrap: wrap; gap: 12px; }
.provenance-links a { color: var(--cyan); font-size: .78rem; border-bottom: 1px solid rgba(114,217,220,.24); }
.related-section { padding: 80px 0 100px; border-top: 1px solid var(--stroke); background: rgba(8,7,13,.34); }

/* Generic content */
.content-page { padding-block: 80px; max-width: 840px; }
.content-page h1 { font-size: clamp(2.3rem, 5vw, 4rem); }
.content-page a { color: var(--accent); text-decoration: underline; }
.error-page { padding: 120px 0 150px; text-align: center; }
.error-code { margin: 0; color: var(--accent); font: 800 1rem/1 var(--mono); letter-spacing: .2em; }
.error-page h1 { margin: 20px 0; }
.error-page > p:not(.error-code) { color: var(--dim); }
.error-page .button { margin-top: 20px; text-decoration: none; }
.licences-page { padding-block: 92px 110px; }
.licences-page > h1 { max-width: 900px; margin: 0; }
.licences-lede { max-width: 800px; margin: 24px 0 55px; color: var(--dim); font-size: 1.05rem; }
.licence-summary { display: grid; gap: 14px; }
.licence-source { padding: 25px; border: 1px solid var(--stroke); border-radius: 15px; background: var(--pane); }
.licence-source-head { display: grid; grid-template-columns: auto 1fr auto; gap: 17px; align-items: center; }
.licence-source-head .provenance-mark { margin: 0; }
.licence-source-head p { margin: 0 0 4px; color: var(--cyan); font: .65rem/1 var(--mono); text-transform: uppercase; }
.licence-source-head h2 { margin: 0; font-size: 1.35rem; }
.licence-source-head > strong { color: var(--dim); font: .75rem/1 var(--mono); }
.licence-source dl { margin: 23px 0 0; }
.licence-source dl div { display: grid; grid-template-columns: 130px 1fr; gap: 14px; padding: 9px 0; border-top: 1px solid var(--stroke); }
.licence-source dt { color: #817980; font: .64rem/1.5 var(--mono); text-transform: uppercase; }
.licence-source dd { margin: 0; color: var(--body); font-size: .78rem; min-width: 0; overflow-wrap: anywhere; }
.licence-source a, .licence-method a { color: var(--cyan); }
.licence-method { max-width: 800px; margin-top: 65px; }
.licence-method h2 { margin-bottom: 20px; }
.licence-method p { color: var(--dim); }

/* Footer */
.site-footer { padding: 54px 0 35px; border-top: 1px solid var(--stroke); background: var(--bg-deep); }
.footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 25px 60px; align-items: start; }
.wordmark-small { gap: 0; }
.footer-inner > div > p { max-width: 470px; margin: 9px 0 0; color: #7f777c; font-size: .82rem; }
.footer-links { display: flex; gap: 24px; font-size: .8rem; }
.footer-links a { color: var(--dim); }
.footer-links a:hover { color: var(--accent); }
.footer-fineprint { grid-column: 1 / -1; margin: 20px 0 0; padding-top: 22px; border-top: 1px solid var(--stroke); color: #625b61; font-size: .68rem; }

@media (max-width: 1050px) {
  .featured-grid, .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, .55fr); gap: 45px; }
  .room-header { grid-template-columns: 1fr; gap: 20px; }
  .room-facts { width: fit-content; }
  .catalog-controls { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --shell: min(100% - 26px, 1240px); }
  .header-inner { min-height: 66px; }
  .nav-toggle { display: none; }
  .site-navigation { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .78rem; }
  .js .nav-toggle { display: block; }
  .js .site-navigation { position: absolute; left: 13px; right: 13px; top: calc(100% + 7px); display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 8px; border: 1px solid var(--stroke-2); border-radius: 12px; background: #17151e; box-shadow: var(--shadow-lift); }
  .js .site-navigation.is-open { display: flex; }
  .site-navigation a { padding: 10px 12px; }
  .site-menu { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero { padding: 65px 0 60px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-machine { width: min(86vw, 365px); }
  .section-block, .library-section { padding-block: 65px; }
  .section-heading { align-items: start; flex-direction: column; margin-bottom: 22px; }
  .featured-grid, .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-controls { position: relative; top: auto; margin-top: 25px; }
  .game-card > a { min-height: 210px; padding: 15px; }
  .game-card-icon { width: 38px; height: 38px; }
  .game-card-copy { padding-left: 10px; }
  .game-card-summary { -webkit-line-clamp: 2; }
  .game-card-compact > a { min-height: 118px; }
  .room-page { padding-top: 25px; }
  .breadcrumbs { margin-bottom: 22px; }
  .room-header h1 { font-size: clamp(2.25rem, 12vw, 4.1rem); }
  .room-facts { width: 100%; gap: 14px; justify-content: space-between; }
  .room-facts div { min-width: 0; }
  .game-runtime, .native-runtime, #ursy-native-game { min-height: 70vh; height: 70vh; }
  .game-runtime iframe { height: 70vh; }
  .player-toolbar button { font-size: 0; }
  .player-toolbar button span { font-size: 1rem; }
  .touch-controller:not([open]) { display: block; }
  .room-content-grid { grid-template-columns: 1fr; padding-top: 60px; }
  .provenance-card { order: -1; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-links { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .hero-copy h1 { font-size: clamp(3rem, 16vw, 4.2rem); }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .featured-grid, .game-grid { grid-template-columns: 1fr; }
  .game-card > a { min-height: 155px; }
  .game-card-summary { -webkit-line-clamp: 2; }
  .room-facts { display: grid; grid-template-columns: repeat(3, 1fr); padding: 12px; }
  .player-toolbar { padding-left: 11px; }
  .player-toolbar > a { font-size: .72rem; }
  .provenance-card dl div { grid-template-columns: 80px 1fr; }
  .licence-source-head { grid-template-columns: auto 1fr; }
  .licence-source-head > strong { grid-column: 2; }
  .licence-source dl div { grid-template-columns: 1fr; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .hero-machine { transform: none; }
}

/* ── URSY.games 1.1 shell ───────────────────────────────────────────────────
   A CSS-only visual layer keeps the catalogue and every room cohesive without
   loading fonts, images or a component framework. */
::selection { background: rgba(255, 122, 53, .34); color: var(--ink); }
html { scroll-padding-top: 92px; }
a, button, input, summary { -webkit-tap-highlight-color: transparent; }
.ursy-category-puzzles { --room-accent: var(--arc-cyan); }
.ursy-category-arcade { --room-accent: var(--arc-yellow); }
.ursy-category-retro-arcade { --room-accent: var(--arc-orange); }
.ursy-category-board-games { --room-accent: var(--arc-green); }
.ursy-category-card-games, .ursy-category-action-games { --room-accent: var(--arc-red); }
.ursy-category-word-games { --room-accent: var(--arc-purple); }
.ursy-category-rhythm-games { --room-accent: var(--arc-pink); }
.ursy-category-runners-platformers, .ursy-category-sports-racing { --room-accent: var(--arc-blue); }
.ursy-category-casual-games, .ursy-category-dice-games { --room-accent: var(--arc-yellow); }

/* Navigation */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--pane) 96%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; transition: border-color .2s ease, box-shadow .2s ease; }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(47,230,115,.45), rgba(84,225,229,.32), transparent); opacity: .55; }
.site-header.is-scrolled { border-color: var(--stroke-2); box-shadow: var(--shadow-card); }
.header-inner { min-height: 70px; }
.wordmark { gap: 10px; }
.wordmark-type { position: relative; }
.wordmark-type::after { content: "PLAY LOCAL"; position: absolute; left: 1px; top: calc(100% + 1px); color: var(--dim-2); font: 600 .38rem/1 var(--mono); letter-spacing: .17em; }
.wordmark-mark { position: relative; width: 38px; height: 38px; overflow: hidden; border-color: rgba(47,230,115,.55); background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.16), transparent 22%), linear-gradient(145deg, rgba(53,214,255,.26), rgba(157,139,255,.06)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 8px 26px rgba(47,230,115,.1); }
.wordmark-mark::after { content: ""; position: absolute; width: 25px; height: 1px; right: -9px; bottom: 7px; background: var(--accent); transform: rotate(-42deg); opacity: .45; }
.site-navigation > a, .site-menu a { position: relative; padding-block: 8px; }
.site-navigation > a::after, .site-menu a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 3px; height: 1px; background: var(--accent); transition: right .18s ease; }
.site-navigation > a:hover::after, .site-menu a:hover::after { right: 0; }
.header-status { display: inline-flex; align-items: center; gap: 7px; margin-left: 3px; padding: 7px 10px; border: 1px solid rgba(119,230,167,.19); border-radius: 999px; background: rgba(119,230,167,.055); color: #9adbb6; font: 650 .62rem/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.header-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px rgba(119,230,167,.72); }
.nav-toggle { min-width: 42px; min-height: 42px; place-items: center; padding: 0; }
.nav-toggle-lines { display: grid; gap: 6px; }
.nav-toggle-lines i { display: block; width: 18px; height: 1px; background: var(--ink); transition: transform .18s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-lines i:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-lines i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* Buttons and section furniture */
.button { position: relative; overflow: hidden; border-radius: 12px; isolation: isolate; }
.button::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.16), transparent 75%); transform: translateX(-120%); transition: transform .45s ease; }
.button:hover::after { transform: translateX(120%); }
.button-primary { background: linear-gradient(135deg, var(--accent-hot), var(--accent)); box-shadow: 0 12px 34px rgba(47,230,115,.22), inset 0 1px rgba(255,255,255,.22); }
.eyebrow { color: var(--room-accent, var(--accent-hot)); }
.eyebrow > span { box-shadow: 0 0 10px currentColor; }
.section-heading h2 { text-wrap: balance; }

/* Hero */
.hero { position: relative; padding-top: clamp(74px, 9vw, 126px); background: linear-gradient(180deg, rgba(255,255,255,.012), transparent 55%); }
.hero::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: min(960px, 90vw); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(47,230,115,.5), transparent); }
.hero-copy h1 { text-wrap: balance; text-shadow: none; }
.hero-copy h1 em { background: linear-gradient(115deg, var(--accent-hot) 20%, var(--cyan) 90%); background-clip: text; -webkit-background-clip: text; color: transparent; }
.hero-proof, .licence-stats { display: flex; flex-wrap: wrap; gap: 0; width: fit-content; margin: 31px 0 0; padding: 0; border: 1px solid var(--stroke); border-radius: 13px; background: rgba(255,255,255,.018); }
.hero-proof div, .licence-stats div { min-width: 105px; padding: 10px 17px; }
.hero-proof div + div, .licence-stats div + div { border-left: 1px solid var(--stroke); }
.hero-proof dt, .licence-stats dt { color: var(--dim-2); font: 600 .55rem/1.3 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.hero-proof dd, .licence-stats dd { margin: 4px 0 0; color: var(--ink); font: 800 .91rem/1.2 var(--mono); }
.hero-machine { border-color: rgba(47,230,115,.3); background: linear-gradient(145deg, #262031, #110f18 72%); box-shadow: 0 50px 130px rgba(0,0,0,.58), inset 0 1px rgba(255,255,255,.09), inset 0 0 70px rgba(47,230,115,.04); }
.hero-machine::after { content: ""; position: absolute; inset: 8px; pointer-events: none; border: 1px solid rgba(255,255,255,.035); border-radius: 23px 23px 12px 12px; }
.machine-screen { position: relative; overflow: hidden; isolation: isolate; border-color: #06050a; }
.machine-screen::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 25%, rgba(47,230,115,.08), transparent 55%); }
.machine-grid { position: absolute; inset: 0; z-index: -1; opacity: .35; background-image: linear-gradient(rgba(84,225,229,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(84,225,229,.08) 1px, transparent 1px); background-size: 24px 24px; mask-image: radial-gradient(circle at center, #000, transparent 72%); }
.pixel-bear { box-shadow: -31px -25px 0 -18px #433a45, 31px -25px 0 -18px #433a45, inset 0 -13px rgba(0,0,0,.22), 0 0 55px rgba(53,214,255,.1); }
.machine-ticker { position: absolute; left: 20px; right: 20px; bottom: 13px; display: flex; justify-content: space-between; color: #5f5a68; font: 600 .43rem/1 var(--mono); letter-spacing: .12em; }

/* Catalogue */
.catalog-controls { top: 82px; padding: 10px; border-color: rgba(255,250,242,.12); background: rgba(15,14,24,.97); box-shadow: 0 20px 60px rgba(0,0,0,.36); backdrop-filter: none; -webkit-backdrop-filter: none; }
.catalog-search { position: relative; background: #090810; transition: border-color .15s ease, box-shadow .15s ease; }
.catalog-search:focus-within { border-color: rgba(84,225,229,.48); box-shadow: 0 0 0 3px rgba(84,225,229,.07); }
.catalog-search input { min-width: 0; }
.catalog-search kbd { padding: 3px 7px; border: 1px solid var(--stroke); border-radius: 5px; color: var(--dim-2); background: rgba(255,255,255,.035); font: .62rem/1 var(--mono); }
.search-icon { position: relative; flex: 0 0 16px; width: 16px; height: 16px; border: 1.5px solid var(--accent); border-radius: 50%; }
.search-icon::after { content: ""; position: absolute; width: 6px; height: 1.5px; right: -4px; bottom: -2px; background: var(--accent); transform: rotate(45deg); }
.category-chips { scrollbar-color: rgba(47,230,115,.35) transparent; }
.category-chips button { border-radius: 8px; transition: border-color .14s ease, background .14s ease, color .14s ease; }
.category-chips button.is-active { border-color: rgba(47,230,115,.6); box-shadow: inset 0 0 20px rgba(157,139,255,.06); }
.game-grid { align-items: stretch; }
.game-card { --card-accent: var(--accent); content-visibility: auto; contain-intrinsic-size: 228px; }
.featured-grid .game-card { content-visibility: visible; }
.game-card[data-category="puzzles"] { --card-accent: var(--arc-cyan); }
.game-card[data-category="arcade"] { --card-accent: var(--arc-yellow); }
.game-card[data-category="retro-arcade"] { --card-accent: var(--arc-orange); }
.game-card[data-category="board-games"] { --card-accent: var(--arc-green); }
.game-card[data-category="card-games"], .game-card[data-category="action-games"] { --card-accent: var(--arc-red); }
.game-card[data-category="word-games"] { --card-accent: var(--arc-purple); }
.game-card[data-category="rhythm-games"] { --card-accent: var(--arc-pink); }
.game-card[data-category="runners-platformers"], .game-card[data-category="sports-racing"] { --card-accent: var(--arc-blue); }
.game-card[data-category="casual-games"], .game-card[data-category="dice-games"] { --card-accent: var(--arc-yellow); }
.game-card > a { contain: paint; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 14px; padding: 18px; border-color: rgba(255,250,242,.085); border-radius: 17px; background: radial-gradient(circle at 5% 0%, color-mix(in srgb, var(--card-accent) 7%, transparent), transparent 36%), linear-gradient(150deg, rgba(255,255,255,.028), transparent 52%), var(--pane); }
.game-card > a::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 2px; border-radius: 99px; background: var(--card-accent); opacity: .45; box-shadow: 0 0 14px var(--card-accent); }
.game-card > a::after { border-color: color-mix(in srgb, var(--card-accent) 22%, transparent); box-shadow: 0 0 0 20px color-mix(in srgb, var(--card-accent) 3%, transparent), 0 0 0 40px color-mix(in srgb, var(--card-accent) 1.5%, transparent); }
.game-card-art { position: relative; display: grid; place-items: start center; width: 44px; }
.game-card-art > i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--card-accent); opacity: .35; }
.game-card-art > i:nth-of-type(1) { top: 53px; left: 8px; }
.game-card-art > i:nth-of-type(2) { top: 63px; right: 2px; }
.game-card-art > i:nth-of-type(3) { top: 76px; left: 20px; }
.game-card-icon { width: 43px; height: 43px; color: var(--card-accent) !important; border-color: color-mix(in srgb, var(--card-accent) 28%, transparent) !important; background: color-mix(in srgb, var(--card-accent) 8%, transparent) !important; box-shadow: inset 0 1px rgba(255,255,255,.055), 0 12px 30px color-mix(in srgb, var(--card-accent) 7%, transparent); }
.game-card-copy { padding-left: 0; }
.game-card-category { color: color-mix(in srgb, var(--card-accent) 70%, var(--dim)); }
.game-card strong { padding-right: 36px; font-size: 1.02rem; }
.game-card-summary { font-size: .78rem; }
.game-card-arrow { top: auto; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 5px; color: var(--dim-2); font: 650 .61rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.game-card-arrow b { color: var(--card-accent); font-size: .85rem; }
.game-card a:hover .game-card-arrow { color: var(--ink); transform: none; }
.game-card-compact > a { min-height: 132px; }
.game-card-compact .game-card-art > i { display: none; }
.catalog-empty .button { margin-top: 21px; }

/* Game room chrome */
.room-page { position: relative; }
.room-page::before { content: ""; position: absolute; top: 0; left: 50%; width: min(1100px, 95vw); height: 430px; z-index: -1; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--room-accent) 9%, transparent), transparent 67%); pointer-events: none; }
.breadcrumbs { align-items: center; }
.breadcrumbs span[aria-hidden="true"] { color: color-mix(in srgb, var(--room-accent) 38%, transparent); }
.room-header { align-items: end; }
.room-header h1 { text-wrap: balance; text-shadow: 0 20px 70px rgba(0,0,0,.35); }
.room-facts { border-color: color-mix(in srgb, var(--room-accent) 18%, var(--stroke)); background: linear-gradient(145deg, color-mix(in srgb, var(--room-accent) 4%, transparent), rgba(255,255,255,.012)); }
.room-facts dd { white-space: nowrap; }
.player-shell { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--room-accent) 27%, var(--stroke-2)); border-radius: 20px; background: #06050a; box-shadow: var(--shadow-glow); }
.player-shell::before { content: ""; position: absolute; z-index: 3; left: 22px; right: 22px; top: 51px; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--room-accent) 55%, transparent), transparent); opacity: .65; pointer-events: none; }
.player-toolbar { position: relative; z-index: 5; min-height: 54px; padding: 7px 9px 7px 15px; background: linear-gradient(180deg, #171522, #100e17); }
.player-toolbar-start, .player-actions { display: flex; align-items: center; gap: 7px; }
.player-toolbar-start > a { color: var(--dim); font-size: .78rem; }
.player-toolbar-start > a:hover { color: var(--ink); }
.player-status { display: inline-flex; align-items: center; gap: 7px; margin-left: 7px; padding-left: 13px; border-left: 1px solid var(--stroke); color: var(--dim-2); font: 600 .6rem/1 var(--mono); letter-spacing: .045em; text-transform: uppercase; }
.player-status i { width: 6px; height: 6px; border-radius: 50%; background: #ffcf64; box-shadow: 0 0 9px rgba(255,207,100,.55); }
.player-shell[data-player-state="ready"] .player-status { color: #a9dabb; }
.player-shell[data-player-state="ready"] .player-status i { background: var(--success); box-shadow: 0 0 10px rgba(119,230,167,.65); }
.player-shell[data-player-state="error"] .player-status { color: #ffc0c3; }
.player-shell[data-player-state="error"] .player-status i { background: var(--danger); box-shadow: 0 0 10px rgba(255,111,118,.6); }
.player-toolbar .player-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 10px; border-color: var(--stroke); background: rgba(255,255,255,.025); transition: background .14s ease, border-color .14s ease, color .14s ease; }
.player-toolbar .player-actions button:hover { border-color: color-mix(in srgb, var(--room-accent) 58%, transparent); background: color-mix(in srgb, var(--room-accent) 7%, transparent); }
.player-toolbar button[aria-pressed="true"] { border-color: var(--room-accent); color: var(--ink); }
.game-runtime { isolation: isolate; contain: layout paint; }
.game-runtime:focus-visible { outline: 3px solid var(--room-accent); outline-offset: -3px; }
.game-runtime::before { content: none; }
.runtime-loader { display: none; }
.js .runtime-loader { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 30px; background: radial-gradient(circle at center, color-mix(in srgb, var(--room-accent) 9%, transparent), transparent 30%), #07060b; color: var(--dim); text-align: center; cursor: progress; pointer-events: auto; transition: opacity .25s ease, visibility .25s ease; }
.js .game-runtime.is-ready .runtime-loader { opacity: 0; visibility: hidden; }
.runtime-loader strong { color: var(--ink); font-size: 1rem; }
.runtime-loader > span:last-child { max-width: 460px; font-size: .73rem; }
.runtime-loader-orbit { position: relative; width: 54px; height: 54px; margin-bottom: 8px; border: 1px solid color-mix(in srgb, var(--room-accent) 28%, transparent); border-radius: 50%; animation: ursy-orbit 1.8s linear infinite; }
.runtime-loader-orbit::before { content: "U"; position: absolute; inset: 10px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--room-accent) 35%, transparent); border-radius: 50%; color: var(--room-accent); font: 800 .8rem/1 var(--serif); animation: ursy-counter-orbit 1.8s linear infinite; }
.runtime-loader-orbit i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--room-accent); box-shadow: 0 0 12px var(--room-accent); }
.runtime-loader-orbit i:first-child { top: -3px; left: 24px; }
.runtime-loader-orbit i:nth-child(2) { right: 2px; bottom: 7px; opacity: .6; }
.runtime-loader-orbit i:last-child { left: 1px; bottom: 8px; opacity: .3; }
@keyframes ursy-orbit { to { transform: rotate(360deg); } }
@keyframes ursy-counter-orbit { to { transform: rotate(-360deg); } }
.game-runtime iframe { background: #050509; }
.runtime-noscript { margin: 0; padding: 10px 16px; border-top: 1px solid var(--stroke); color: var(--danger); background: #121019; font-size: .75rem; text-align: center; }
.touch-controller { padding-block: 13px 17px; background: linear-gradient(180deg, #121019, #0e0c14); }
.touch-controller summary { width: fit-content; }
.touch-controller summary::marker { color: var(--room-accent); }
.touch-controller button { border-radius: 11px; box-shadow: inset 0 1px rgba(255,255,255,.045), 0 5px 14px rgba(0,0,0,.2); }
.touch-controller button:active { border-color: var(--room-accent); background: color-mix(in srgb, var(--room-accent) 17%, var(--card)); }
.instruction-list li { border-color: rgba(255,250,242,.1); background: linear-gradient(90deg, color-mix(in srgb, var(--room-accent) 3.5%, transparent), rgba(255,255,255,.012)); }
.instruction-list li::before { color: var(--room-accent); }
.play-note { border-color: var(--room-accent); }
.provenance-card { border-color: color-mix(in srgb, var(--room-accent) 22%, transparent); background: linear-gradient(145deg, color-mix(in srgb, var(--room-accent) 6%, transparent), rgba(255,255,255,.012)); }
.provenance-mark { color: var(--room-accent); border-color: color-mix(in srgb, var(--room-accent) 32%, transparent); }

/* Licence, fallback and footer surfaces */
.licences-hero { position: relative; padding-bottom: 62px; }
.licences-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 24px; height: 1px; background: linear-gradient(90deg, rgba(84,225,229,.45), transparent 70%); }
.licences-lede { margin-bottom: 31px; }
.licence-stats { margin-top: 0; }
.licence-stats dd { color: var(--cyan); }
.licence-source { position: relative; overflow: hidden; border-color: rgba(255,250,242,.1); background: linear-gradient(145deg, rgba(84,225,229,.025), transparent 35%), var(--pane); }
.licence-source::after { content: ""; position: absolute; width: 140px; height: 140px; right: -90px; top: -90px; border: 1px solid rgba(84,225,229,.12); border-radius: 50%; box-shadow: 0 0 0 22px rgba(84,225,229,.02); }
.licence-source-head > strong { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid rgba(119,230,167,.17); border-radius: 999px; color: #a8d8b8; background: rgba(119,230,167,.045); }
.licence-source-head > strong i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px rgba(119,230,167,.65); }
.error-page { position: relative; }
.error-orbit { position: relative; width: 116px; height: 116px; display: grid; place-items: center; margin: 0 auto 26px; border: 1px solid rgba(53,214,255,.26); border-radius: 50%; color: var(--accent-hot); font: 800 1.1rem/1 var(--mono); box-shadow: inset 0 0 40px rgba(53,214,255,.05), 0 0 70px rgba(47,230,115,.08); }
.error-orbit::before, .error-orbit::after { content: ""; position: absolute; border: 1px solid rgba(84,225,229,.14); border-radius: 50%; }
.error-orbit::before { inset: 12px; }
.error-orbit::after { inset: 31px; }
.error-orbit i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.error-orbit i:first-of-type { top: 5px; left: 31px; }
.error-orbit i:last-of-type { right: 8px; bottom: 28px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.site-footer { position: relative; padding-top: 58px; background: linear-gradient(180deg, #07060c, var(--bg-deep)); }
.site-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(47,230,115,.36), rgba(53,214,255,.22), transparent); }
.footer-inner { grid-template-columns: minmax(0,1fr) auto; }
.footer-brand .wordmark-mark { width: 32px; height: 32px; font-size: .9rem; }
.footer-brand .wordmark-type::after { display: none; }
.footer-nav > p { margin: 1px 0 13px; color: var(--dim-2); font: 650 .57rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.footer-links { gap: 19px; }
.footer-links a { position: relative; }
.footer-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 1px; background: var(--accent); transition: right .16s ease; }
.footer-links a:hover::after { right: 0; }
.footer-fineprint { display: flex; justify-content: space-between; gap: 20px; }
.footer-fineprint p { margin: 0; }
.footer-fineprint p:last-child { color: #799584; white-space: nowrap; }
.footer-fineprint span { color: var(--success); font-size: .5rem; }

/* Responsive shell */
@media (hover: hover) and (pointer: fine) {
  .game-card > a:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--card-accent) 48%, transparent); background-color: var(--card); box-shadow: 0 25px 65px rgba(0,0,0,.4), 0 0 0 1px color-mix(in srgb, var(--card-accent) 8%, transparent); }
  .game-card > a:hover::before { opacity: .9; }
}

@media (max-width: 1050px) {
  .header-status { display: none; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 76px; }
  .site-header { background: #090811; }
  .js .nav-toggle { display: grid; }
  .js .site-navigation { top: calc(100% + 8px); padding: 9px; background: #12101b; }
  .js .site-navigation::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 30px rgba(47,230,115,.03); }
  .site-navigation > a::after, .site-menu a::after { display: none; }
  .has-open-navigation::after { content: ""; position: fixed; inset: 0; z-index: 29; background: rgba(3,3,7,.5); }
  .hero-proof { width: 100%; }
  .hero-proof div { flex: 1; min-width: 0; padding-inline: 12px; }
  .catalog-controls { top: auto; }
  .catalog-search kbd { display: none; }
  .game-card > a { grid-template-columns: auto minmax(0,1fr); }
  .room-page::before { height: 300px; }
  .player-toolbar { min-height: 56px; }
  .player-toolbar-start { gap: 4px; }
  .player-status { margin-left: 4px; padding-left: 8px; }
  .player-toolbar .player-actions button { min-width: 37px; min-height: 38px; padding-inline: 9px; font-size: inherit; }
  .player-toolbar .player-actions button > span[aria-hidden="true"] { font-size: 1rem; }
  .player-toolbar .control-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .game-runtime, .native-runtime, #ursy-native-game { min-height: 72svh; height: 72svh; }
  .game-runtime iframe { height: 72svh; }
  .js .runtime-loader { min-height: 72svh; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-fineprint { display: grid; }
}

@media (max-width: 540px) {
  .wordmark-type::after { display: none; }
  .hero-proof div { padding-inline: 9px; }
  .hero-proof dt { font-size: .48rem; }
  .hero-proof dd { font-size: .78rem; }
  .room-header h1 { font-size: clamp(2.15rem, 11vw, 3.25rem); }
  .player-toolbar { padding-inline: 9px 7px; }
  .player-status { display: none; }
  .player-toolbar-start > a { font-size: .7rem; }
  .player-actions { gap: 4px; }
  .player-toolbar .player-actions button { min-width: 36px; padding-inline: 8px; }
  .licence-stats { width: 100%; }
  .licence-stats div { flex: 1; min-width: 0; padding-inline: 9px; }
  .licence-stats dt { font-size: .48rem; }
  .licence-stats dd { font-size: .78rem; }
}

@media (max-width: 380px) {
  .player-toolbar-start > a { font-size: 0; }
  .player-toolbar-start > a span { font-size: 1rem; }
  .player-toolbar .player-actions button { min-width: 34px; padding-inline: 7px; }
}

@media (prefers-contrast: more) {
  :root { --stroke: rgba(255,250,242,.22); --stroke-2: rgba(255,250,242,.38); --dim: #c9c1c8; --dim-2: #aca4ae; }
  .game-card > a, .player-shell, .catalog-controls { border-width: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .runtime-loader-orbit, .runtime-loader-orbit::before { animation: none !important; }
  .button::after { display: none; }
}

/* Editorial surfaces remain fully server-rendered and add no runtime payload. */
.arcade-intro { padding: clamp(70px, 8vw, 108px) 0; border-bottom: 1px solid var(--stroke); background: linear-gradient(180deg, rgba(5,5,10,.2), rgba(255,255,255,.012)); }
.arcade-intro-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr); gap: clamp(45px, 8vw, 110px); align-items: start; }
.arcade-intro-copy h2 { max-width: 720px; margin: 0 0 24px; font-size: clamp(2.1rem, 4vw, 3.55rem); text-wrap: balance; }
.arcade-intro-copy > p:not(.eyebrow) { max-width: 710px; margin: 0 0 16px; color: var(--dim); }
.arcade-principles { display: grid; gap: 10px; }
.arcade-principles article { position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 0 14px; padding: 20px; overflow: hidden; border: 1px solid var(--stroke); border-radius: 14px; background: linear-gradient(120deg, rgba(255,255,255,.024), transparent), var(--pane); }
.arcade-principles article::after { content: ""; position: absolute; width: 85px; height: 85px; right: -55px; bottom: -58px; border: 1px solid rgba(53,214,255,.14); border-radius: 50%; }
.arcade-principles article:nth-child(2)::after { border-color: rgba(84,225,229,.14); }
.arcade-principles article:nth-child(3)::after { border-color: rgba(184,230,109,.14); }
.arcade-principles article > span { grid-row: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(47,230,115,.25); border-radius: 10px; color: var(--accent-hot); font: 700 .62rem/1 var(--mono); }
.arcade-principles article:nth-child(2) > span { color: var(--cyan); border-color: rgba(84,225,229,.25); }
.arcade-principles article:nth-child(3) > span { color: var(--lime); border-color: rgba(184,230,109,.25); }
.arcade-principles h3 { margin: 1px 0 6px; font-size: 1rem; letter-spacing: -.015em; }
.arcade-principles p { margin: 0; color: var(--dim); font-size: .79rem; line-height: 1.55; }
.room-editorial-block { margin-top: 36px; }
.room-editorial-block h3 { margin: 0 0 14px; }
.room-editorial-block > p { color: var(--dim); }
.feature-list, .tip-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin: 0; padding: 0; list-style: none; }
.feature-list li { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--room-accent) 17%, var(--stroke)); border-radius: 10px; background: color-mix(in srgb, var(--room-accent) 3%, transparent); color: var(--body); font-size: .83rem; }
.feature-list li span { flex: 0 0 auto; color: var(--room-accent); }
.tip-list { grid-template-columns: 1fr; counter-reset: tips; }
.tip-list li { position: relative; padding: 10px 13px 10px 43px; color: var(--dim); font-size: .84rem; counter-increment: tips; }
.tip-list li::before { content: "0" counter(tips); position: absolute; left: 9px; top: 11px; color: var(--room-accent); font: 700 .67rem/1.55 var(--mono); }

@media (max-width: 900px) {
  .arcade-intro-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .feature-list { grid-template-columns: 1fr; }
  .arcade-principles article { padding: 16px; }
}

/* ── URSY Runtime v2.0 additions: doorway, hubs, favourites, API card ───── */
.find-section { padding-block: 60px 30px; }
.search-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.search-result-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--stroke); border-radius: 12px; background: var(--pane); box-shadow: var(--shadow-card); transition: transform .14s ease, border-color .14s ease; }
.search-result-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.search-result-card strong { color: var(--ink); }
.search-result-card span { color: var(--dim); font-size: .82rem; line-height: 1.45; }

.category-grid-rich { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.category-card { display: flex; flex-direction: column; gap: 10px; min-height: 150px; padding: 20px; border: 1px solid var(--stroke); border-radius: var(--radius-md); background: var(--pane); box-shadow: var(--shadow-card); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.category-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-lift); }
.category-card-icon { font-size: 1.5rem; color: var(--accent); }
.category-card-copy strong { display: block; color: var(--ink); font-size: 1.05rem; letter-spacing: -.02em; }
.category-card-lede { display: block; margin-top: 4px; color: var(--dim); font-size: .84rem; line-height: 1.5; }
.category-card-count { margin-top: auto; color: var(--accent); font: 700 .78rem/1 var(--mono); letter-spacing: .04em; }

.home-trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.home-trust-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--stroke); border-radius: var(--radius-md); background: var(--pane); box-shadow: var(--shadow-card); }
.home-trust-card:hover { border-color: var(--accent); }
.home-trust-card strong { color: var(--ink); }
.home-trust-card span { color: var(--dim); font-size: .84rem; line-height: 1.5; }

.hub-hero { padding-block: 64px 20px; }
.hub-hero-icon { font-size: .6em; vertical-align: middle; color: var(--accent); }
.hub-hero-note { font-size: .92rem; margin-top: 12px; }
.crumb { display: flex; gap: 8px; margin-bottom: 20px; color: var(--dim-2); font-size: .8rem; }
.crumb a { color: var(--dim); }
.crumb a:hover { color: var(--ink); }
.hub-grid { margin-top: 6px; }
.hub-others { padding-block: 40px 90px; }
.hub-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.hub-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 14px; border: 1px solid var(--stroke); border-radius: 999px; background: var(--pane); color: var(--dim); font-size: .84rem; transition: border-color .14s ease, color .14s ease; }
.hub-chip:hover { border-color: var(--accent); color: var(--ink); }
.hub-chip-icon { color: var(--accent); }
.hub-chip-count { color: var(--dim-2); font: 700 .72rem/1 var(--mono); }

.fav-toggle { border: 1px solid var(--stroke-2); border-radius: 10px; background: var(--pane); color: var(--pink); padding: 4px 12px; margin-left: 12px; font-size: 1.15rem; line-height: 1; cursor: pointer; vertical-align: middle; transition: transform .12s ease, border-color .12s ease; }
.fav-toggle:hover { transform: scale(1.08); border-color: var(--pink); }
.fav-toggle.is-active { background: color-mix(in srgb, var(--pink) 14%, var(--pane)); border-color: var(--pink); }
.nav-my-games { position: relative; }
.fav-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--pink); color: #fff; font: 700 .66rem/1 var(--mono); }
.fav-card { display: flex; flex-direction: column; gap: 5px; padding: 16px 18px; border: 1px solid var(--stroke); border-radius: 12px; background: var(--pane); box-shadow: var(--shadow-card); }
.fav-card:hover { border-color: var(--accent); }
.fav-card strong { color: var(--ink); }
.fav-card span { color: var(--dim); font-size: .84rem; }
[data-favourites-grid] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.library-empty, .catalog-empty { text-align: center; color: var(--dim); padding: 40px 0; }
.library-empty > span, .catalog-empty > span { font-size: 2rem; color: var(--accent); }
.member-area-signin { margin-top: 44px; padding: 24px 26px; border: 1px solid var(--stroke); border-radius: var(--radius-md); background: var(--pane); box-shadow: var(--shadow-card); }
.member-area-signin h2 { margin-top: 0; }
.member-signin-sub { color: var(--dim-2); font: 650 .78rem/1.4 var(--mono); }
.member-signin-error { color: var(--danger); font-size: .88rem; }
.narrow-shell { max-width: 860px; margin-inline: auto; }

.api-card { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--stroke); border-radius: 12px; background: var(--card-2); }
.api-card h3 { margin: 0 0 6px; font-size: .95rem; }
.api-card p { margin: 0 0 8px; color: var(--dim); font-size: .82rem; line-height: 1.5; }
.api-card-links { display: flex; flex-direction: column; gap: 6px; }
.api-card-links code { font-size: .72rem; color: var(--cyan); word-break: break-all; }
.api-card-links a:hover code { text-decoration: underline; }

.theme-toggle { border: 1px solid var(--stroke-2); border-radius: 9px; background: var(--pane); color: var(--ink); padding: 6px 10px; font-size: 1rem; line-height: 1; cursor: pointer; }
.theme-toggle:hover { border-color: var(--accent); }

@media (max-width: 1279px) { .nav-secondary { display: none; } }
@media (max-width: 980px) {
  .category-grid-rich, .search-results, .home-trust-grid, [data-favourites-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .category-grid-rich, .search-results, .home-trust-grid, [data-favourites-grid] { grid-template-columns: 1fr; }
  .fav-toggle { margin-left: 8px; }
}

/* ── The hero cabinet: a proper neon arcade machine ─────────────────────── */
.cabinet { position: relative; width: min(100%, 400px); justify-self: center; padding: 16px 18px 22px; border: 1px solid rgba(47,230,115,.35); border-radius: 22px 22px 14px 14px; background: linear-gradient(160deg, #0e1511, #070b08 70%); box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 34px rgba(47,230,115,.14), 0 45px 110px rgba(0,0,0,.6), inset 0 1px rgba(255,255,255,.09); transform: perspective(1000px) rotateY(-5deg) rotateX(1deg); }
.cabinet::before { content: ""; position: absolute; inset: 14% -14% -8% 18%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(47,230,115,.14), rgba(53,214,255,.07) 55%, transparent 75%); filter: blur(46px); }
.cabinet-marquee { display: flex; align-items: baseline; justify-content: center; gap: 9px; padding: 10px 0 12px; font: 900 1.05rem/1 var(--mono); letter-spacing: .22em; }
.cabinet-marquee span { color: var(--ink); }
.cabinet-marquee b { color: var(--accent); text-shadow: 0 0 14px rgba(47,230,115,.75), 0 0 34px rgba(47,230,115,.4); }
.cabinet-screen { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 300px; padding: 18px 16px 14px; border: 9px solid #020403; border-radius: 10px; background: radial-gradient(circle at 50% 18%, rgba(53,214,255,.09), transparent 45%), #04070a; box-shadow: inset 0 0 55px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.12); }
.cab-scanlines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.028) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; }
.cab-score { display: flex; justify-content: space-between; color: var(--cyan); font: 700 .6rem/1 var(--mono); letter-spacing: .12em; text-shadow: 0 0 8px rgba(53,214,255,.7); }
.cab-invaders { display: grid; grid-template-columns: repeat(3, 40px); grid-auto-rows: 44px; gap: 6px 22px; justify-content: center; margin: 26px 0 4px; }
.inv { position: relative; width: 6px; height: 6px; animation: inv-march 1.15s steps(2) infinite; }
.inv::after { content: ""; position: absolute; inset: 0; }
.inv-cyan::after { background: var(--cyan); box-shadow: 12px 0 var(--cyan), 24px 0 var(--cyan), 0 6px var(--cyan), 6px 6px var(--cyan), 12px 6px var(--cyan), 18px 6px var(--cyan), 24px 6px var(--cyan), -6px 12px var(--cyan), 6px 12px var(--cyan), 12px 12px var(--cyan), 18px 12px var(--cyan), 30px 12px var(--cyan), -6px 18px var(--cyan), 0 18px var(--cyan), 24px 18px var(--cyan), 30px 18px var(--cyan), 6px 24px var(--cyan), 18px 24px var(--cyan); filter: drop-shadow(0 0 5px rgba(53,214,255,.85)); }
.inv-green::after { background: var(--accent); box-shadow: 12px 0 var(--accent), 24px 0 var(--accent), 0 6px var(--accent), 6px 6px var(--accent), 12px 6px var(--accent), 18px 6px var(--accent), 24px 6px var(--accent), -6px 12px var(--accent), 6px 12px var(--accent), 12px 12px var(--accent), 18px 12px var(--accent), 30px 12px var(--accent), -6px 18px var(--accent), 0 18px var(--accent), 24px 18px var(--accent), 30px 18px var(--accent), 6px 24px var(--accent), 18px 24px var(--accent); filter: drop-shadow(0 0 5px rgba(47,230,115,.85)); }
.inv-magenta::after { background: var(--pink); box-shadow: 12px 0 var(--pink), 24px 0 var(--pink), 0 6px var(--pink), 6px 6px var(--pink), 12px 6px var(--pink), 18px 6px var(--pink), 24px 6px var(--pink), -6px 12px var(--pink), 6px 12px var(--pink), 12px 12px var(--pink), 18px 12px var(--pink), 30px 12px var(--pink), -6px 18px var(--pink), 0 18px var(--pink), 24px 18px var(--pink), 30px 18px var(--pink), 6px 24px var(--pink), 18px 24px var(--pink); filter: drop-shadow(0 0 5px rgba(255,95,168,.85)); }
@keyframes inv-march { 0%, 49% { transform: translateX(0); } 50%, 100% { transform: translateX(10px); } }
.cab-player { position: relative; height: 66px; margin-top: auto; }
.cab-ship { position: absolute; left: 50%; bottom: 6px; width: 8px; height: 8px; background: var(--accent); transform: translateX(-50%); box-shadow: -8px 8px var(--accent), 0 8px var(--accent), 8px 8px var(--accent), -16px 16px var(--accent), -8px 16px var(--accent), 0 16px var(--accent), 8px 16px var(--accent), 16px 16px var(--accent); filter: drop-shadow(0 0 7px rgba(47,230,115,.9)); }
.cab-shot { position: absolute; left: 50%; bottom: 30px; width: 3px; height: 12px; background: var(--accent-hot); transform: translateX(-50%); box-shadow: 0 0 8px rgba(125,255,171,.9); animation: cab-shot 1s linear infinite; }
@keyframes cab-shot { 0% { bottom: 30px; opacity: 1; } 80% { bottom: 150px; opacity: 1; } 100% { bottom: 160px; opacity: 0; } }
.cab-horizon { position: absolute; left: -20%; right: -20%; bottom: 0; height: 78px; pointer-events: none; background: linear-gradient(transparent, rgba(47,230,115,.06)), repeating-linear-gradient(90deg, rgba(47,230,115,.16) 0 1px, transparent 1px 34px), repeating-linear-gradient(to top, rgba(47,230,115,.16) 0 1px, transparent 1px 19px); transform: perspective(210px) rotateX(58deg); transform-origin: bottom; opacity: .5; }
.cab-insert { position: absolute; left: 0; right: 0; bottom: 12px; margin: 0; color: var(--ink); font: 700 .62rem/1 var(--mono); letter-spacing: .3em; text-align: center; animation: cab-blink 1.4s steps(1) infinite; text-shadow: 0 0 10px rgba(238,255,244,.5); }
@keyframes cab-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }
.cabinet-deck { display: flex; align-items: center; justify-content: space-between; padding: 18px 12px 6px; }
.cab-joystick { position: relative; width: 54px; height: 26px; border-radius: 999px; background: #020403; box-shadow: inset 0 3px 7px #000, 0 1px rgba(255,255,255,.14); }
.cab-joystick i { position: absolute; left: 50%; bottom: 9px; width: 7px; height: 26px; background: linear-gradient(#1c2620, #0b110d); transform: translateX(-50%) rotate(8deg); transform-origin: bottom; border-radius: 4px; }
.cab-joystick i::after { content: ""; position: absolute; left: 50%; top: -13px; width: 19px; height: 19px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8cc0, var(--pink) 55%, #a92f66); box-shadow: 0 0 14px rgba(255,95,168,.6), inset 0 -3px 5px rgba(0,0,0,.4); }
.cab-buttons { display: flex; gap: 14px; }
.cab-buttons i { width: 27px; height: 27px; border-radius: 50%; }
.cab-btn-a { background: radial-gradient(circle at 35% 30%, #a4ffc7, var(--accent) 55%, #0f7a3c); box-shadow: 0 4px 0 #0a5228, 0 0 16px rgba(47,230,115,.55); }
.cab-btn-b { background: radial-gradient(circle at 35% 30%, #9fe9ff, var(--cyan) 55%, #0e6f86); box-shadow: 0 4px 0 #09495c, 0 0 16px rgba(53,214,255,.55); }
.cabinet-coin { display: grid; place-items: center; margin: 12px auto 0; width: 74px; height: 20px; border-radius: 6px; background: #020403; box-shadow: inset 0 2px 5px #000, 0 1px rgba(255,255,255,.12); }
.cabinet-coin span { width: 26px; height: 4px; border-radius: 2px; background: rgba(47,230,115,.5); box-shadow: 0 0 8px rgba(47,230,115,.6); }
:root[data-theme="light"] .cabinet { box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 0 30px rgba(13,158,80,.18), 0 40px 90px rgba(16,32,26,.3), inset 0 1px rgba(255,255,255,.09); }
@media (max-width: 900px) { .cabinet { transform: none; } }

/* ── Paint the hubs: every hub owns a bright colour, splattered on black ── */
.hub-puzzles { --hub-accent: var(--arc-cyan); }
.hub-arcade { --hub-accent: var(--arc-yellow); }
.hub-retro-arcade { --hub-accent: var(--arc-orange); }
.hub-board-games { --hub-accent: var(--arc-green); }
.hub-card-games, .hub-action-games { --hub-accent: var(--arc-red); }
.hub-word-games { --hub-accent: var(--arc-purple); }
.hub-rhythm-games { --hub-accent: var(--arc-pink); }
.hub-runners-platformers, .hub-sports-racing { --hub-accent: var(--arc-blue); }
.hub-casual-games, .hub-dice-games { --hub-accent: var(--arc-yellow); }

:where(.category-card) { --hub-accent: var(--accent); } .category-card { position: relative; overflow: hidden; }
.category-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--hub-accent), color-mix(in srgb, var(--hub-accent) 30%, transparent)); box-shadow: 0 0 18px color-mix(in srgb, var(--hub-accent) 55%, transparent); }
.category-card::after { content: ""; position: absolute; width: 130px; height: 130px; right: -60px; top: -60px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--hub-accent) 16%, transparent), transparent 70%); pointer-events: none; }
.category-card-icon { color: var(--hub-accent); filter: drop-shadow(0 0 9px color-mix(in srgb, var(--hub-accent) 65%, transparent)); }
.category-card-count { color: var(--hub-accent); }
.category-card:hover { border-color: color-mix(in srgb, var(--hub-accent) 65%, transparent); box-shadow: 0 0 26px color-mix(in srgb, var(--hub-accent) 22%, transparent), var(--shadow-lift); }
:where(.hub-chip) { --hub-accent: var(--accent); }
.hub-chip-icon { color: var(--hub-accent); }
.hub-chip:hover { border-color: color-mix(in srgb, var(--hub-accent) 70%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--hub-accent) 25%, transparent); }
:where(.hub-hero) { --hub-accent: var(--accent); }
.hub-hero .eyebrow { color: var(--hub-accent); }
.hub-hero-icon { color: var(--hub-accent); filter: drop-shadow(0 0 12px color-mix(in srgb, var(--hub-accent) 70%, transparent)); }
.hub-hero h1 { text-shadow: 0 0 60px color-mix(in srgb, var(--hub-accent) 30%, transparent); }

.nav-hub-link { position: relative; }
.nav-hub-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; background: var(--hub-accent, var(--accent)); transition: right .16s ease; box-shadow: 0 0 8px var(--hub-accent, var(--accent)); }
.nav-hub-link:hover::after { right: 0; }
.nav-hub-puzzles { --hub-accent: var(--arc-cyan); }
.nav-hub-arcade { --hub-accent: var(--arc-yellow); }
.nav-hub-board-games { --hub-accent: var(--arc-green); }
.nav-hub-card-games { --hub-accent: var(--arc-red); }
.nav-hub-word-games { --hub-accent: var(--arc-purple); }

/* Wordmark tile: Pac-Man yellow. Marquee: yellow glow. Buttons: red + yellow. */
.wordmark-mark { border-color: rgba(255,217,74,.6) !important; background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.2), transparent 24%), linear-gradient(145deg, rgba(255,217,74,.3), rgba(255,151,24,.08)) !important; color: var(--arc-yellow) !important; box-shadow: 0 8px 26px rgba(255,217,74,.14) !important; }
.wordmark-dot { color: var(--arc-yellow); }
.cabinet-marquee b { color: var(--arc-yellow); text-shadow: 0 0 14px rgba(255,217,74,.8), 0 0 34px rgba(255,151,24,.45); }
.cab-btn-a { background: radial-gradient(circle at 35% 30%, #ffe9a3, var(--arc-yellow) 55%, #b07f00); box-shadow: 0 4px 0 #7a5800, 0 0 16px rgba(255,217,74,.6); }
.cab-btn-b { background: radial-gradient(circle at 35% 30%, #ffb3b8, var(--arc-red) 55%, #a3232c); box-shadow: 0 4px 0 #6e161d, 0 0 16px rgba(255,77,87,.6); }
.inv-green::after { filter: drop-shadow(0 0 5px rgba(58,255,119,.85)); }
.cab-insert { color: var(--arc-yellow); text-shadow: 0 0 10px rgba(255,217,74,.6); }
.trust-row li:nth-child(1)::before { color: var(--arc-yellow); }
.trust-row li:nth-child(2)::before { color: var(--arc-cyan); }
.trust-row li:nth-child(3)::before { color: var(--arc-pink); }
.home-trust-card:nth-child(1) { border-top: 3px solid var(--arc-purple); }
.home-trust-card:nth-child(2) { border-top: 3px solid var(--arc-cyan); }
.home-trust-card:nth-child(3) { border-top: 3px solid var(--arc-green); }
.hero-proof div:nth-child(1) dd { color: var(--arc-yellow); }
.hero-proof div:nth-child(2) dd { color: var(--arc-cyan); }
.hero-proof div:nth-child(3) dd { color: var(--arc-green); }

.hero-lede-sub { margin-top: 14px; font-size: .95em; color: var(--dim-2); }
.hero-copy h1 { font-size: clamp(2.3rem, 5.6vw, 4.6rem); }

/* ── Vibrancy pass (Lee, 2 Sep): white cabinet on black, centred hero,
      glowing centred U logo, colour that MOVES. ─────────────────────────── */

/* Louder paint splatter */
body {
  background:
    radial-gradient(30rem 22rem at 8% 2%, rgba(255, 151, 24, .22), transparent 70%),
    radial-gradient(32rem 24rem at 90% 8%, rgba(92, 139, 255, .22), transparent 70%),
    radial-gradient(26rem 20rem at 72% 38%, rgba(255, 107, 214, .17), transparent 70%),
    radial-gradient(28rem 22rem at 12% 58%, rgba(51, 224, 255, .15), transparent 70%),
    radial-gradient(26rem 20rem at 86% 74%, rgba(58, 255, 119, .15), transparent 70%),
    radial-gradient(24rem 18rem at 40% 92%, rgba(255, 217, 74, .13), transparent 70%),
    radial-gradient(22rem 17rem at 55% 22%, rgba(179, 136, 255, .12), transparent 70%),
    var(--bg);
}

/* Centred hero words, cabinet standing beside like a real machine */
.hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(340px, .7fr); align-items: center; }
.hero-copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero-copy h1 { text-wrap: balance; }
.hero-lede { margin-inline: auto; }
.eyebrow { justify-content: center; }
.trust-row, .hero-actions { justify-content: center; }
.hero-proof { justify-content: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .cabinet { margin-top: 30px; } }

/* The colour cycle everyone can feel */
@keyframes ursy-hue { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
@keyframes ursy-glow-cycle {
  0%   { box-shadow: 0 0 18px rgba(255, 217, 74, .8), 0 0 44px rgba(255, 217, 74, .35); }
  25%  { box-shadow: 0 0 18px rgba(51, 224, 255, .8), 0 0 44px rgba(51, 224, 255, .35); }
  50%  { box-shadow: 0 0 18px rgba(255, 107, 214, .8), 0 0 44px rgba(255, 107, 214, .35); }
  75%  { box-shadow: 0 0 18px rgba(58, 255, 119, .8), 0 0 44px rgba(58, 255, 119, .35); }
  100% { box-shadow: 0 0 18px rgba(255, 217, 74, .8), 0 0 44px rgba(255, 217, 74, .35); }
}

/* Logo: a centred U on a black tile with a living glow around it */
.wordmark-mark {
  transform: none !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 11px !important;
  background: #000 !important;
  color: #fff !important;
  font: 800 19px/1 var(--sans) !important;
  box-shadow: 0 0 18px rgba(255,217,74,.8), 0 0 44px rgba(255,217,74,.35) !important;
  animation: ursy-glow-cycle 9s linear infinite;
}
.wordmark-dot { color: var(--arc-cyan); }

/* WHITE arcade cabinet against the black */
.cabinet {
  border: 1px solid rgba(255,255,255,.5);
  background: linear-gradient(160deg, #fdfdfd, #d9dce2 55%, #c2c7cf);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 0 44px rgba(92,139,255,.22), 0 45px 110px rgba(0,0,0,.65), inset 0 1px rgba(255,255,255,.9);
}
.cabinet::before { background: radial-gradient(circle, rgba(51,224,255,.2), rgba(255,107,214,.12) 55%, transparent 78%); animation: ursy-hue 12s linear infinite; }
.cabinet-marquee { position: relative; margin: -4px -6px 8px; padding: 12px 0 13px; border-radius: 14px 14px 6px 6px; background: #0a0a0e; overflow: hidden; }
.cabinet-marquee::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: repeating-linear-gradient(90deg, var(--arc-yellow) 0 14px, var(--arc-cyan) 14px 28px, var(--arc-pink) 28px 42px, var(--arc-green) 42px 56px); background-size: 56px 100%; animation: marquee-chase 1.2s linear infinite; }
@keyframes marquee-chase { to { background-position: 56px 0; } }
.cabinet-marquee span { color: #fff; }
.cabinet-marquee b { background: linear-gradient(90deg, var(--arc-yellow), var(--arc-pink), var(--arc-cyan), var(--arc-green), var(--arc-yellow)); background-size: 300% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; text-shadow: none; animation: marquee-shift 6s linear infinite; }
@keyframes marquee-shift { to { background-position: 300% 0; } }
.cabinet-screen { border-color: #16181d; box-shadow: inset 0 0 55px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.5), 0 0 0 4px rgba(255,255,255,.65); }
.cabinet-deck { border-radius: 0 0 8px 8px; }
.cab-joystick { background: #101014; box-shadow: inset 0 3px 7px #000, 0 1px rgba(255,255,255,.5); }
.cabinet-coin { background: #101014; box-shadow: inset 0 2px 5px #000, 0 1px rgba(255,255,255,.5); }
.cabinet-coin span { background: var(--arc-yellow); box-shadow: 0 0 10px rgba(255,217,74,.8); }
:root[data-theme="light"] .cabinet { background: linear-gradient(160deg, #ffffff, #e7e9ee 55%, #d5d9e0); box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 0 30px rgba(92,139,255,.25), 0 40px 90px rgba(19,19,22,.28), inset 0 1px #fff; }

/* Vibrant card stripes + glows */
.category-card::before { height: 5px; }
.category-card { box-shadow: 0 0 0 1px color-mix(in srgb, var(--hub-accent) 14%, transparent), var(--shadow-card); }
.game-card > a { box-shadow: 0 0 0 1px color-mix(in srgb, var(--card-accent) 12%, transparent), var(--shadow-card); }
.hero-copy h1 em { background: linear-gradient(115deg, var(--arc-green) 10%, var(--arc-cyan) 45%, var(--arc-pink) 90%); background-size: 220% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; animation: marquee-shift 8s linear infinite alternate; }

/* ── THE GAME IS THE HERO: high-detail sprites, freed from the cabinet ──
   Pixel art in em units: font-size = one pixel, so sprites scale cleanly. */
.hero-game { position: relative; display: grid; justify-items: center; align-content: center; gap: 34px; min-height: 420px; }
.hero-invaders { display: grid; grid-template-columns: repeat(3, 11em); gap: 3.5em 4em; font-size: 7px; animation: formation-march 3.4s steps(2) infinite; }
@keyframes formation-march { 0%, 49% { transform: translateX(-2.6em); } 50%, 100% { transform: translateX(2.6em); } }
.inv { position: relative; width: 11em; height: 8em; }
.inv::after { content: ""; position: absolute; top: 0; left: 0; width: 1em; height: 1em; background: transparent; box-shadow:
  2em 0, 8em 0,
  3em 1em, 7em 1em,
  2em 2em, 3em 2em, 4em 2em, 5em 2em, 6em 2em, 7em 2em, 8em 2em,
  1em 3em, 2em 3em, 4em 3em, 5em 3em, 6em 3em, 8em 3em, 9em 3em,
  0 4em, 1em 4em, 2em 4em, 3em 4em, 4em 4em, 5em 4em, 6em 4em, 7em 4em, 8em 4em, 9em 4em, 10em 4em,
  0 5em, 2em 5em, 3em 5em, 4em 5em, 5em 5em, 6em 5em, 7em 5em, 8em 5em, 10em 5em,
  0 6em, 2em 6em, 8em 6em, 10em 6em,
  3em 7em, 4em 7em, 6em 7em, 7em 7em;
}
.inv-cyan { color: var(--arc-cyan); } .inv-green { color: var(--arc-green); }
.inv-magenta { color: var(--arc-pink); } .inv-yellow { color: var(--arc-yellow); }
.inv-orange { color: var(--arc-orange); } .inv-blue { color: var(--arc-blue); }
.inv { filter: drop-shadow(0 0 10px currentColor); }
.inv::after { box-shadow: 2em 0, 8em 0, 3em 1em, 7em 1em, 2em 2em, 3em 2em, 4em 2em, 5em 2em, 6em 2em, 7em 2em, 8em 2em, 1em 3em, 2em 3em, 4em 3em, 5em 3em, 6em 3em, 8em 3em, 9em 3em, 0 4em, 1em 4em, 2em 4em, 3em 4em, 4em 4em, 5em 4em, 6em 4em, 7em 4em, 8em 4em, 9em 4em, 10em 4em, 0 5em, 2em 5em, 3em 5em, 4em 5em, 5em 5em, 6em 5em, 7em 5em, 8em 5em, 10em 5em, 0 6em, 2em 6em, 8em 6em, 10em 6em, 3em 7em, 4em 7em, 6em 7em, 7em 7em; }
.hero-invaders .inv:nth-child(even) { animation: inv-bob 3.4s steps(2) infinite; }
@keyframes inv-bob { 0%, 49% { transform: translateY(0); } 50%, 100% { transform: translateY(.6em); } }

.hero-ship { position: relative; height: 90px; width: 100%; }
.hero-ship .cab-ship { position: absolute; left: 50%; bottom: 0; width: 1em; height: 1em; font-size: 7px; background: transparent; transform: translateX(-50%); box-shadow:
  6em 0 var(--arc-green),
  5em 1em var(--arc-green), 6em 1em var(--arc-green), 7em 1em var(--arc-green),
  5em 2em var(--arc-green), 6em 2em var(--arc-green), 7em 2em var(--arc-green),
  1em 3em var(--arc-green), 2em 3em var(--arc-green), 3em 3em var(--arc-green), 4em 3em var(--arc-green), 5em 3em var(--arc-green), 6em 3em var(--arc-green), 7em 3em var(--arc-green), 8em 3em var(--arc-green), 9em 3em var(--arc-green), 10em 3em var(--arc-green), 11em 3em var(--arc-green),
  0 4em var(--arc-green), 1em 4em var(--arc-green), 2em 4em var(--arc-green), 3em 4em var(--arc-green), 4em 4em var(--arc-green), 5em 4em var(--arc-green), 6em 4em var(--arc-green), 7em 4em var(--arc-green), 8em 4em var(--arc-green), 9em 4em var(--arc-green), 10em 4em var(--arc-green), 11em 4em var(--arc-green), 12em 4em var(--arc-green),
  0 5em var(--arc-green), 1em 5em var(--arc-green), 2em 5em var(--arc-green), 3em 5em var(--arc-green), 4em 5em var(--arc-green), 5em 5em var(--arc-green), 6em 5em var(--arc-green), 7em 5em var(--arc-green), 8em 5em var(--arc-green), 9em 5em var(--arc-green), 10em 5em var(--arc-green), 11em 5em var(--arc-green), 12em 5em var(--arc-green);
  filter: drop-shadow(0 0 12px rgba(58,255,119,.9));
  animation: ship-strafe 5s ease-in-out infinite alternate;
}
@keyframes ship-strafe { from { transform: translateX(calc(-50% - 60px)); } to { transform: translateX(calc(-50% + 60px)); } }
.hero-ship .cab-shot { position: absolute; left: 50%; bottom: 60px; width: 4px; height: 16px; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.9); animation: hero-shot 1.1s linear infinite; }
@keyframes hero-shot { 0% { bottom: 60px; opacity: 1; } 85% { bottom: 320px; opacity: 1; } 100% { bottom: 340px; opacity: 0; } }

/* Full-width Pac-Man chase under the hero */
.pac-chase { position: relative; height: 120px; margin-top: 26px; overflow: hidden; }
.pac-pellets { position: absolute; top: 50%; left: 0; right: 0; height: 10px; transform: translateY(-50%); background: radial-gradient(circle 5px at 50% 50%, rgba(255,217,74,.85) 4px, transparent 5px); background-size: 46px 10px; background-repeat: repeat-x; }
.pac-track { position: absolute; top: 50%; left: 0; display: flex; align-items: center; gap: 26px; transform: translateY(-50%) translateX(-420px); animation: pac-run 15s linear infinite; }
@keyframes pac-run { to { transform: translateY(-50%) translateX(calc(100vw + 120px)); } }
.pac { position: relative; width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #fff2b0, var(--arc-yellow) 45%, #e0a800); filter: drop-shadow(0 0 16px rgba(255,217,74,.75)); animation: pac-chomp .34s linear infinite; }
@keyframes pac-chomp {
  0%, 100% { clip-path: polygon(100% 44%, 50% 50%, 100% 56%, 100% 100%, 0 100%, 0 0, 100% 0); }
  50% { clip-path: polygon(100% 6%, 50% 50%, 100% 94%, 100% 100%, 78% 100%, 0 100%, 0 0, 78% 0); }
}
.pac::before { content: ""; position: absolute; top: 13px; left: 34px; width: 9px; height: 9px; border-radius: 50%; background: #0a0a0e; }
.ghost { position: relative; display: block; width: 62px; height: 66px; border-radius: 31px 31px 4px 4px; -webkit-mask: radial-gradient(circle 8px at 10px calc(100% + 1px), transparent 7px, #000 8px) repeat-x; -webkit-mask-size: 21px 100%; mask: radial-gradient(circle 8px at 10px calc(100% + 1px), transparent 7px, #000 8px) repeat-x; mask-size: 21px 100%; animation: ghost-bob 1s ease-in-out infinite alternate; }
.ghost::before { content: ""; position: absolute; top: 16px; left: 10px; width: 42px; height: 18px; background:
  radial-gradient(circle 5px at 32px 9px, #2b4bd6 5px, transparent 6px),
  radial-gradient(circle 9px at 30px 9px, #fff 9px, transparent 10px),
  radial-gradient(circle 5px at 10px 9px, #2b4bd6 5px, transparent 6px),
  radial-gradient(circle 9px at 8px 9px, #fff 9px, transparent 10px); }
.ghost-red { background: var(--arc-red); filter: drop-shadow(0 0 14px rgba(255,77,87,.7)); }
.ghost-pink { background: var(--arc-pink); filter: drop-shadow(0 0 14px rgba(255,107,214,.7)); animation-delay: .12s; }
.ghost-cyan { background: var(--arc-cyan); filter: drop-shadow(0 0 14px rgba(51,224,255,.7)); animation-delay: .24s; }
.ghost-orange { background: var(--arc-orange); filter: drop-shadow(0 0 14px rgba(255,151,24,.7)); animation-delay: .36s; }
@keyframes ghost-bob { from { transform: translateY(-4px); } to { transform: translateY(4px); } }
@media (max-width: 900px) {
  .hero-game { min-height: 300px; }
  .hero-invaders { font-size: 4.5px; }
  .pac { width: 54px; height: 54px; }
  .ghost { width: 46px; height: 50px; }
  .pac-chase { height: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-invaders, .inv, .cab-ship, .cab-shot, .pac-track, .pac, .ghost, .cabinet::before, .wordmark-mark, .cabinet-marquee::after, .cabinet-marquee b, .hero-copy h1 em { animation: none !important; }
}

/* ── Composition pass: the game DOMINATES the hero; words sit editorially
      left; everything scales properly on mobile. ─────────────────────────── */
.hero { padding-bottom: 40px; }
.hero-grid { grid-template-columns: minmax(0, .92fr) minmax(380px, 1.08fr); gap: clamp(30px, 4vw, 70px); align-items: center; }
.hero-copy { text-align: left; align-items: flex-start; }
.eyebrow { justify-content: flex-start; }
.trust-row, .hero-actions { justify-content: flex-start; }
.hero-proof { justify-content: flex-start; }
.hero-lede { margin-inline: 0; }
.hero-copy h1 { font-size: clamp(2.4rem, 4.9vw, 4.9rem); }

.hero-game { min-height: 540px; gap: 44px; transform: translateX(2%); }
.hero-invaders { font-size: 11px; gap: 3em 3.6em; }
.hero-ship { height: 110px; }
.hero-ship .cab-ship { font-size: 11px; }
@keyframes hero-shot { 0% { bottom: 80px; opacity: 1; } 85% { bottom: 430px; opacity: 1; } 100% { bottom: 450px; opacity: 0; } }
@keyframes ship-strafe { from { transform: translateX(calc(-50% - 90px)); } to { transform: translateX(calc(-50% + 90px)); } }

@media (max-width: 1100px) { .hero-invaders { font-size: 9px; } .hero-game { min-height: 460px; } }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; align-items: center; }
  .eyebrow, .trust-row, .hero-actions, .hero-proof { justify-content: center; }
  .hero-game { min-height: 360px; margin-top: 8px; transform: none; gap: 26px; }
  .hero-invaders { font-size: 6.5px; }
  .hero-ship { height: 70px; }
  .hero-ship .cab-ship { font-size: 6.5px; }
}
@media (max-width: 480px) {
  .hero-invaders { font-size: 5.2px; }
  .hero-game { min-height: 300px; }
  .pac { width: 46px; height: 46px; }
  .pac::before { top: 8px; left: 22px; width: 7px; height: 7px; }
  .ghost { width: 38px; height: 42px; }
  .ghost::before { top: 10px; left: 5px; transform: scale(.8); transform-origin: left top; }
  .pac-chase { height: 76px; }
  .pac-pellets { background-size: 34px 10px; }
}

/* ── Retro set v2: our own snake chase, a pong divider, footer march ──
   (Original sprites only — no borrowed characters.) */
.snake-chase { position: relative; height: 110px; margin-top: 26px; overflow: hidden; }
.snake-food { position: absolute; top: 50%; left: 0; right: 0; height: 10px; transform: translateY(-50%); background: radial-gradient(circle 4px at 50% 50%, rgba(255,255,255,.5) 3px, transparent 4px); background-size: 44px 10px; background-repeat: repeat-x; }
.snake-track { position: absolute; top: 50%; left: 0; display: flex; flex-direction: row-reverse; align-items: center; gap: 5px; transform: translateY(-50%) translateX(-560px); animation: snake-run 13s linear infinite; }
@keyframes snake-run { to { transform: translateY(-50%) translateX(calc(100vw + 140px)); } }
.seg { display: block; width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--arc-green), #18c455); box-shadow: 0 0 14px rgba(58,255,119,.55), inset 0 2px rgba(255,255,255,.28); animation: seg-wave 1s ease-in-out infinite; }
.snake-track .seg:nth-child(3) { animation-delay: .07s; } .snake-track .seg:nth-child(4) { animation-delay: .14s; }
.snake-track .seg:nth-child(5) { animation-delay: .21s; } .snake-track .seg:nth-child(6) { animation-delay: .28s; }
.snake-track .seg:nth-child(7) { animation-delay: .35s; } .snake-track .seg:nth-child(8) { animation-delay: .42s; }
.snake-track .seg:nth-child(9) { animation-delay: .49s; } .snake-track .seg:nth-child(10) { animation-delay: .56s; }
.snake-track .seg:nth-child(11) { animation-delay: .63s; } .snake-track .seg:nth-child(12) { animation-delay: .7s; }
.snake-track .seg:nth-child(13) { animation-delay: .77s; } .snake-track .seg:nth-child(14) { animation-delay: .84s; }
@keyframes seg-wave { 0%, 100% { transform: translateY(-7px); } 50% { transform: translateY(7px); } }
.seg-head { width: 36px; height: 36px; border-radius: 10px; position: relative; background: linear-gradient(135deg, #8cffb2, var(--arc-green) 60%); }
.seg-head::before { content: ""; position: absolute; top: 8px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: #06140a; box-shadow: 0 12px 0 #06140a; }
.seg-tail { width: 22px; height: 22px; opacity: .85; }
.snake-apple { display: block; width: 24px; height: 24px; margin-right: 40px; border-radius: 50% 50% 46% 46%; position: relative; background: radial-gradient(circle at 34% 30%, #ff9aa1, var(--arc-red) 55%, #b81f2c); box-shadow: 0 0 16px rgba(255,77,87,.75); animation: seg-wave 1s ease-in-out infinite reverse; }
.snake-apple::before { content: ""; position: absolute; top: -6px; left: 55%; width: 3px; height: 8px; border-radius: 2px; background: #7a4a1f; }
.snake-apple::after { content: ""; position: absolute; top: -8px; left: 60%; width: 10px; height: 6px; border-radius: 50% 50% 50% 0; background: var(--arc-green); }

.pong-divider { position: relative; height: 46px; margin: 10px auto 0; width: var(--shell); }
.pong-divider::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 12px, transparent 12px 26px); }
.pong-paddle { position: absolute; top: 50%; width: 6px; height: 34px; border-radius: 3px; transform: translateY(-50%); }
.pong-left { left: 0; background: var(--arc-cyan); box-shadow: 0 0 12px rgba(51,224,255,.7); animation: paddle-l 3.2s ease-in-out infinite; }
.pong-right { right: 0; background: var(--arc-pink); box-shadow: 0 0 12px rgba(255,107,214,.7); animation: paddle-r 3.2s ease-in-out infinite; }
.pong-ball { position: absolute; top: 50%; left: 8px; width: 12px; height: 12px; border-radius: 3px; background: #fff; box-shadow: 0 0 14px rgba(255,255,255,.8); animation: pong-x 3.2s linear infinite, pong-y 1.05s ease-in-out infinite alternate; }
@keyframes pong-x { 0%, 100% { left: 10px; } 50% { left: calc(100% - 22px); } }
@keyframes pong-y { from { transform: translateY(-14px); } to { transform: translateY(8px); } }
@keyframes paddle-l { 0%, 100% { transform: translateY(calc(-50% - 8px)); } 50% { transform: translateY(calc(-50% + 8px)); } }
@keyframes paddle-r { 0%, 100% { transform: translateY(calc(-50% + 8px)); } 50% { transform: translateY(calc(-50% - 8px)); } }

.footer-arcade { overflow: hidden; padding: 26px 0 4px; }
.footer-march { display: flex; justify-content: center; gap: 54px; font-size: 3.4px; animation: formation-march 3.4s steps(2) infinite; }
.footer-march .inv { filter: drop-shadow(0 0 6px currentColor); opacity: .9; }
@media (max-width: 640px) { .footer-march { gap: 30px; } .footer-march .inv:nth-child(n+5) { display: none; } }
@media (prefers-reduced-motion: reduce) { .snake-track, .seg, .snake-apple, .pong-ball, .pong-paddle, .footer-march { animation: none !important; } }

/* ── Universal joypad: one strip of controls, every keyboard game ──────── */
.joypad { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 12px 16px; margin-top: 10px; border: 1px solid var(--stroke, rgba(255,255,255,.12)); border-radius: 16px; background: rgba(10,10,14,.92); touch-action: none; user-select: none; -webkit-user-select: none; }
.joypad-dpad { display: grid; grid-template-columns: repeat(3, 52px); grid-auto-rows: 52px; gap: 3px; }
.joypad-dpad button { border: 0; border-radius: 10px; background: #1c1c24; color: #fff; font-size: 1.05rem; cursor: pointer; box-shadow: inset 0 1px rgba(255,255,255,.14), 0 3px 0 #000; }
.joypad-dpad button:active { transform: translateY(2px); box-shadow: inset 0 1px rgba(255,255,255,.1); background: #26262f; }
.joypad-hub { border-radius: 50%; margin: 14px; background: #101014; box-shadow: inset 0 2px 5px #000; }
.joypad-note { margin: 0; text-align: center; color: var(--dim-2, #6e6e7a); font: 600 .62rem/1.4 var(--mono, monospace); letter-spacing: .1em; text-transform: uppercase; }
.joypad-actions { display: grid; grid-template-columns: repeat(2, 56px); grid-auto-rows: 56px; gap: 10px; }
.joypad-actions button { border: 0; border-radius: 50%; color: #04140a; font: 800 1rem/1 var(--mono, monospace); cursor: pointer; }
.joypad-actions button:active { transform: translateY(2px); }
.joypad-btn-a { background: radial-gradient(circle at 35% 30%, #a4ffc7, #3aff77 55%, #0f7a3c); box-shadow: 0 4px 0 #0a5228; }
.joypad-btn-b { background: radial-gradient(circle at 35% 30%, #ffb3b8, #ff4d57 55%, #a3232c); box-shadow: 0 4px 0 #6e161d; color: #fff; }
.joypad-btn-x { background: radial-gradient(circle at 35% 30%, #9fe9ff, #33e0ff 55%, #0e6f86); box-shadow: 0 4px 0 #09495c; }
.joypad-btn-y { background: radial-gradient(circle at 35% 30%, #ffe9a3, #ffd94a 55%, #b07f00); box-shadow: 0 4px 0 #7a5800; }
.joypad-toggle { margin-top: 10px; border: 1px solid var(--stroke-2, rgba(255,255,255,.2)); border-radius: 10px; background: var(--pane, #101014); color: var(--ink, #fff); padding: 9px 16px; cursor: pointer; font: 650 .85rem/1 var(--sans, sans-serif); }
@media (max-width: 560px) {
  .joypad { grid-template-columns: auto 1fr; }
  .joypad-note { display: none; }
  .joypad-dpad { grid-template-columns: repeat(3, 46px); grid-auto-rows: 46px; }
  .joypad-actions { grid-template-columns: repeat(2, 50px); grid-auto-rows: 50px; justify-self: end; }
}
@media (pointer: fine) { .joypad, .joypad-toggle { display: none; } }


/* Joypad handedness + swap control */
.joypad-mid { display: grid; justify-items: center; gap: 8px; }
.joypad-swap { border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: #16161c; color: #fff; width: 40px; height: 40px; font-size: 1rem; cursor: pointer; }
.joypad-dpad { order: 1; } .joypad-mid { order: 2; } .joypad-actions { order: 3; }
.joypad.is-swapped .joypad-dpad { order: 3; } .joypad.is-swapped .joypad-actions { order: 1; }

/* ── Leaderboards ──────────────────────────────────────────────────────── */
.lb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 26px; }
.lb-table { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lb-table li { display: flex; align-items: baseline; gap: 10px; padding: 9px 13px; border: 1px solid var(--stroke); border-radius: 10px; background: var(--pane); }
.lb-table li:nth-child(1) { border-color: var(--arc-yellow); box-shadow: 0 0 14px color-mix(in srgb, var(--arc-yellow) 25%, transparent); }
.lb-table li:nth-child(2) { border-color: var(--stroke-2); }
.lb-rank { color: var(--dim-2); font: 800 .74rem/1 var(--mono); min-width: 2.4em; }
.lb-table li:nth-child(1) .lb-rank { color: var(--arc-yellow); }
.lb-handle { color: var(--ink); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-value { margin-left: auto; color: var(--accent); font: 800 .82rem/1 var(--mono); white-space: nowrap; }
.lb-value small { color: var(--dim-2); font-weight: 650; }
.lb-empty { color: var(--dim); font-size: .9rem; }
.lb-you { color: var(--body); }
.lb-foot { margin-top: 22px; color: var(--dim-2); font-size: .84rem; }
.lb-claim { margin: 18px 0; padding: 16px 18px; border: 1px solid var(--stroke); border-radius: var(--radius-md); background: var(--pane); }
.lb-claim form { display: flex; gap: 8px; }
.lb-claim input { flex: 1; min-width: 0; padding: 10px 13px; border: 1px solid var(--stroke-2); border-radius: 10px; background: var(--bg-deep); color: var(--ink); font: inherit; }
.lb-claim-note { color: var(--danger); font-size: .85rem; }
.lb-panel { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--stroke); border-radius: 12px; background: var(--card-2); }
.lb-panel h3 { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 4px; font-size: .95rem; }
.lb-panel-all { color: var(--dim); font-size: .76rem; font-weight: 700; }
.lb-panel-all:hover { color: var(--accent); }
.lb-table-compact li { padding: 6px 10px; font-size: .84rem; }
.lb-note { margin: 10px 0 0; color: var(--dim); font-size: .8rem; }
.lb-note a { color: var(--accent); }
@media (max-width: 720px) { .lb-grid { grid-template-columns: 1fr; } }

.lb-country { color: var(--dim); font-size: .78rem; white-space: nowrap; }
.lb-claim select { padding: 10px 12px; border: 1px solid var(--stroke-2); border-radius: 10px; background: var(--bg-deep); color: var(--ink); font: inherit; max-width: 220px; }
@media (max-width: 560px) { .lb-claim form { flex-wrap: wrap; } .lb-claim select { max-width: 100%; flex: 1 1 100%; } }
/* Polish 4 Sep 2026: every footer and advert link is a 24px-tall target (WCAG 2.5.8) without changing its look. */
.footer-links a, .footer-fineprint a { display: inline-block; padding: 4px 0; min-height: 24px; }
.estate-ad-advertiser, .estate-ad-powered { display: inline-flex; align-items: center; min-height: 24px; }


/* ===== Homepage polish pass, 4 Sep 2026 (v2.1.2) =====
   The home page had 92px of dead air above and below every section and a hero that ran on past its
   content. Sections now breathe at a steadier 56-72px, the hero closes tighter under the stat tiles,
   and the "Find it fast" band sits closer to the hero it serves. */
.section-block { padding-block: clamp(56px, 6vw, 72px); }
.hero { padding-bottom: clamp(44px, 5vw, 64px); }
.find-section { padding-block: 40px 16px; }
#hubs.section-block { padding-top: 48px; }
.arcade-intro { padding: clamp(56px, 6vw, 84px) 0; }
@media (max-width: 640px) {
  .hero-stats, .hero .stats { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .section-block { padding-block: 44px; }
}

/* ===== Deep pass, 4 Sep 2026 (v2.1.3): short pages (leaderboard before anyone has played, my games when empty) no longer stretch to fill the viewport with dark nothing; the footer follows the content. */
.site-main { min-height: 0 !important; }