/* Graveyard Arcade portal, direction A "Marquee" (docs/portal-redesign-20261017). Gameplay-led shelves on a dark stage.
   Type: Archivo (SIL OFL, self-hosted in arcade/assets), condensed for titles and normal width for reading. One amber
   accent for Play and focus. The old portal look's fonts and art stay in arcade/assets and arcade/art. */
@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(assets/Archivo-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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(assets/Archivo-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}
:root{--bg:#0b0d10;--bg2:#0f1216;--surface:#161a20;--raised:#1e232b;--line:#272d36;--text:#f2efe8;--text2:#b5bac2;--text3:#868e99;
  --amber:#ffb547;--amber2:#ffcd80;--ink:#1d1406;--aqua:#8fd3c8;--gap:16px;--side:64px;
  --pad:max(var(--side),env(safe-area-inset-left),env(safe-area-inset-right));color-scheme:dark;
  font-family:Archivo,system-ui,sans-serif;font-variation-settings:'wdth' 100;background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;background:var(--bg);min-height:100vh;min-height:100dvh}
h1,h2,h3,p{margin:0}a{color:inherit;text-decoration:none}button,input,select{font:inherit;color:inherit}button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}
.icon{width:20px;height:20px;flex:none}.icon.inline{width:18px;height:18px;vertical-align:-3px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:absolute;z-index:50;left:12px;top:-60px;padding:10px 14px;border-radius:8px;background:var(--amber);color:var(--ink);font-weight:700}.skip-link:focus{top:12px}
.noscript{padding:40px var(--pad);color:var(--text2)}.noscript a{color:var(--amber);text-decoration:underline}
/* Settings bar */
.sysbar{position:relative;z-index:5;background:#07080a;border-bottom:1px solid #1a1e25;font-size:13px;color:var(--text2);padding-top:env(safe-area-inset-top)}
.sys-inner{display:flex;align-items:center;gap:28px;height:44px;padding:0 var(--pad)}
.sys-group{display:flex;align-items:center;gap:10px}.sys-label{display:flex;align-items:center;gap:7px;color:var(--text3);font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}.sys-label .icon{width:17px;height:17px;display:none}
.seg{display:flex;background:#12151a;border:1px solid #232831;border-radius:6px;padding:2px}
.seg button{border:0;background:none;padding:4px 10px;border-radius:4px;font-size:13px;color:var(--text2);font-weight:500}.seg button:hover{color:var(--text)}
.seg button[aria-pressed=true]{background:var(--text);color:#0b0d10;font-weight:650}
.sys-icon{display:grid;place-items:center;width:30px;height:30px;border:0;background:none;color:var(--text);border-radius:6px}.sys-icon:hover{background:#171b21}.sys-icon .icon{width:18px;height:18px}
input[type=range]{-webkit-appearance:none;appearance:none;width:110px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--text) var(--fill,70%),#2b313b var(--fill,70%));cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--text);border:3px solid #07080a}
input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--text);border:3px solid #07080a}
.sys-val{min-width:34px;font-variant-numeric:tabular-nums;color:var(--text)}
.sys-btn{display:flex;align-items:center;gap:8px;border:1px solid #232831;background:#12151a;border-radius:6px;padding:5px 12px;font-size:13px;color:var(--text);white-space:nowrap}.sys-btn:hover{border-color:#3a414c}.sys-btn .icon{width:18px;height:18px}
.sys-note{margin-left:auto;color:var(--text3);font-size:12px;white-space:nowrap}
.sys-compact{display:none}
/* Navigation */
.nav{position:absolute;z-index:4;top:0;left:0;right:0;display:flex;align-items:center;gap:40px;height:84px;padding:0 var(--pad)}
body:not([data-page=home]) .nav{position:relative}
body .detail-top .nav{position:absolute}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:19px;letter-spacing:.01em;font-variation-settings:'wdth' 80;white-space:nowrap}.brand img{width:34px;height:34px}
.nav nav{display:flex;gap:28px;font-size:16px;font-weight:550;color:var(--text2)}.nav nav a{display:flex;align-items:center;gap:6px}.nav nav a[aria-current=page]{color:var(--text)}.nav nav a:hover{color:var(--text)}
.count-badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--raised);font-size:12px;display:inline-grid;place-items:center;color:var(--text)}
.search{margin-left:auto;display:flex;align-items:center;gap:10px;width:340px;height:42px;padding:0 14px;background:#0b0d10b8;border:1px solid #ffffff1f;border-radius:8px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text2)}
.search:focus-within{border-color:#ffffff55}
.search input{flex:1;min-width:0;border:0;background:none;outline:0;font-size:15px;color:var(--text)}.search input::placeholder{color:var(--text3)}.search input::-webkit-search-cancel-button{filter:invert(.7)}
.search kbd{font:500 11px Archivo,sans-serif;color:var(--text3);border:1px solid #ffffff26;border-radius:4px;padding:1px 6px}
/* Hero */
.hero{position:relative;height:min(700px,72vh);min-height:600px;overflow:hidden;background:#000}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hero-pos,50% 50%)}
.detail-top .hero-img{object-position:50% 50%}
.hero:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#0b0d10f7 0%,#0b0d10dd 30%,#0b0d1000 60%),linear-gradient(0deg,var(--bg) 0%,#0b0d1000 34%),linear-gradient(180deg,#0b0d10e8 0%,#0b0d1000 24%)}
.hero-copy{position:absolute;z-index:2;left:var(--pad);bottom:70px;width:min(660px,46vw)}
.eyebrow{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:13px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}
.eyebrow span+span:before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6;margin:0 10px 2px 0}
.hero h1{font-size:clamp(72px,7.6vw,118px);line-height:.86;font-weight:820;font-variation-settings:'wdth' 72;letter-spacing:-.01em;margin:18px 0 20px;text-wrap:balance}
.hero-line{font-size:21px;line-height:1.4;color:#e4e1da;max-width:34ch}
.hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:20px;font-size:14px;color:var(--text2)}.hero-meta span{white-space:nowrap}
.in{display:inline-flex;gap:6px;color:var(--text2)}.in>span{display:inline-flex}.in .icon{width:18px;height:18px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border-radius:8px;border:0;font-size:17px;font-weight:700;white-space:nowrap}
.btn-play{background:var(--amber);color:var(--ink)}.btn-play:hover{background:var(--amber2)}.btn-play .icon{width:18px;height:18px}
.btn-ghost{background:#ffffff14;color:var(--text);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.btn-ghost:hover{background:#ffffff24}
.btn-icon{width:52px;padding:0}
[data-save][aria-pressed=true]{color:var(--amber)}[data-save][aria-pressed=true] .icon path{fill:currentColor}
.upnext{position:absolute;z-index:2;right:var(--pad);bottom:70px;display:flex;gap:12px}
.upnext button{position:relative;width:168px;padding:0;border:0;background:none;text-align:left;color:var(--text2);font-size:13px;font-weight:550}
.upnext img{display:block;width:168px;aspect-ratio:16/9;object-fit:cover;border-radius:6px;opacity:.72;outline:1px solid #ffffff1a;outline-offset:-1px}
.upnext button:hover img{opacity:.92}.upnext button[aria-current=true] img{opacity:1;outline:2px solid var(--text)}.upnext button[aria-current=true]{color:var(--text)}
.upnext span{display:block;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upnext button[aria-current=true]:after{content:'';position:absolute;left:0;top:-10px;height:2px;width:40%;background:var(--amber)}
/* Shelves */
main{padding-bottom:40px}
.shelf{margin-top:44px}
.shelf-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;padding:0 var(--pad);margin-bottom:14px}
.shelf-head h2{font-size:27px;font-weight:760;font-variation-settings:'wdth' 82;letter-spacing:-.005em}
.shelf-head .count{color:var(--text3);font-size:15px}.shelf-head .note{color:var(--text3);font-size:14px}
.shelf-head a{margin-left:auto;display:flex;gap:6px;align-items:center;color:var(--text2);font-size:14px;font-weight:550}.shelf-head a:hover{color:var(--text)}.shelf-head a .icon{width:16px}
.text-btn{margin-left:auto;border:0;background:none;padding:0;color:var(--amber);font-size:14px;font-weight:600}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100vw - 2*var(--pad) - 5*var(--gap))/6.3);gap:var(--gap);overflow-x:auto;padding:4px var(--pad) 8px;scroll-padding:0 var(--pad);scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.track::-webkit-scrollbar{display:none}
.track>[role=listitem]{min-width:0;scroll-snap-align:start}
.tile{display:block;min-width:0;border-radius:6px}
.tile .pic{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--surface)}
.tile img,.tile .concept{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease,filter .25s}
.tile:hover img,.tile:hover .concept{transform:scale(1.03);filter:brightness(1.08)}
.tile h3{font-size:17px;font-weight:680;margin-top:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .sub{display:flex;align-items:center;gap:10px;margin-top:4px;font-size:13.5px;color:var(--text3)}.tile .sub .in{margin-left:auto;gap:4px;color:var(--text3)}.tile .sub .in .icon{width:15px;height:15px}
.tag{position:absolute;left:8px;top:8px;padding:3px 7px;border-radius:4px;background:#0b0d10d9;font-size:11.5px;font-weight:650;letter-spacing:.03em;color:var(--text)}
.tag.kb{padding:3px 5px;display:grid;place-items:center}.tag.kb .icon{width:16px;height:16px;color:var(--text2)}
.legend{display:flex;align-items:center;gap:8px;padding:0 var(--pad);margin:-4px 0 12px;font-size:13px;color:var(--text3)}.legend .icon{width:16px;height:16px}
.concept{display:block;background-color:var(--raised);background-repeat:no-repeat}
/* Continue */
.track.cont{grid-auto-columns:calc((100vw - 2*var(--pad) - 3*var(--gap))/4.2)}
.cont .pic:after{content:'';position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(0deg,#0b0d10e6,#0b0d1000)}
.cont .bar{position:absolute;z-index:1;left:12px;right:12px;bottom:12px;height:3px;border-radius:2px;background:#ffffff2e}.cont .bar i{display:block;height:100%;border-radius:2px;background:var(--amber)}
.cont .resume{position:absolute;z-index:1;left:12px;bottom:24px;display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}.cont .resume .icon{width:14px;height:14px}
.cont .sub{font-size:14px;color:var(--text2);align-items:flex-start}.cont .sub span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ago{margin-left:auto;color:var(--text3);font-size:13px;white-space:nowrap}
/* Kinds */
.kinds{display:flex;gap:10px;padding:0 var(--pad);margin-top:40px;overflow-x:auto;scrollbar-width:none}.kinds::-webkit-scrollbar{display:none}
.kinds button{display:flex;align-items:baseline;gap:8px;padding:10px 16px;border-radius:8px;background:var(--surface);border:1px solid var(--line);font-weight:600;font-size:15px;white-space:nowrap;color:var(--text)}
.kinds button span{color:var(--text3);font-weight:500;font-size:13px}.kinds button[aria-pressed=true]{background:var(--text);color:var(--bg)}.kinds button[aria-pressed=true] span{color:#5b5f66}.kinds button:hover{border-color:#3a414c}
.kinds .label{align-self:center;color:var(--text3);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:650;margin-right:6px}
/* All games */
.all{padding:0 var(--pad);scroll-margin-top:12px}.all .shelf-head{padding:0}.all:focus{outline:0}
.all-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:22px var(--gap)}
.all .tile h3{font-size:15px;margin-top:9px}.all .tile .sub{font-size:12.5px}
.empty{padding:32px 0;color:var(--text2)}.empty h3{font-size:20px;color:var(--text);margin-bottom:6px}
.site-footer{padding:36px var(--pad) calc(48px + env(safe-area-inset-bottom));color:var(--text3);font-size:13px;display:flex;flex-wrap:wrap;gap:8px 24px;border-top:1px solid var(--line);margin-top:56px}
/* Detail */
.detail-top{position:relative;min-height:780px;overflow:hidden}
.detail-top .hero-img{height:640px}
.backdrop{filter:blur(3px) saturate(.9);clip-path:inset(0)}
.detail-top:after{content:'';position:absolute;inset:0;height:640px;pointer-events:none;background:linear-gradient(90deg,#0b0d10f7 0%,#0b0d10d6 34%,#0b0d1066 62%,#0b0d10a0 100%),linear-gradient(0deg,var(--bg) 0%,#0b0d1000 45%),linear-gradient(180deg,#0b0d10b0 0%,#0b0d1000 18%)}
.detail-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) min(720px,48vw);gap:72px;padding:150px var(--pad) 0}
.detail-grid h1{font-size:104px;line-height:.88;font-weight:820;font-variation-settings:'wdth' 72;margin:16px 0 18px;text-wrap:balance;overflow-wrap:anywhere}
.savebox{margin-top:28px;max-width:560px;padding:16px 18px;border-radius:10px;background:#11151bd9;border:1px solid #2a313b;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.savebox .row{display:flex;align-items:center;gap:14px}.savebox h3{font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);font-weight:650}
.savebox p{font-size:16px;margin-top:6px}.savebox .bar{height:3px;background:#ffffff1f;border-radius:2px;margin-top:12px}.savebox .bar i{display:block;height:100%;background:var(--amber);border-radius:2px}
.concept-notice{margin-top:22px;max-width:52ch;color:var(--text2);font-size:15px;line-height:1.5}
.viewer .main{aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000;box-shadow:0 30px 80px #0009}.viewer .main img,.viewer .main .concept{width:100%;height:100%;object-fit:cover;display:block}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}.thumbs button{padding:0;border:0;background:none;border-radius:6px;overflow:hidden;opacity:.6;aspect-ratio:16/9}.thumbs button:hover{opacity:.85}.thumbs button[aria-current=true]{opacity:1;outline:2px solid var(--text);outline-offset:2px}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.source{margin-top:10px;font-size:12px;color:var(--text3)}
.panels{display:grid;grid-template-columns:1.05fr 1.2fr 1fr;gap:56px;padding:12px var(--pad) 0}
.panels h2{font-size:24px;font-weight:740;font-variation-settings:'wdth' 82;margin-bottom:18px}
.prose{color:var(--text2);font-size:15.5px;line-height:1.55}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}.steps li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:15.5px;line-height:1.45;color:var(--text2)}
.steps li:before{content:counter(s,decimal-leading-zero);font-weight:700;color:var(--amber);font-variant-numeric:tabular-nums}
.kc{display:inline-grid;place-items:center;min-width:30px;height:28px;padding:0 8px;margin:2px 0 2px 5px;border-radius:5px;background:#232831;border:1px solid #343b46;border-bottom-width:3px;font:650 13px Archivo,sans-serif;color:var(--text)}
.ctl-foot{display:flex;align-items:center;gap:12px;margin-top:16px}.ctl-note{color:var(--text3);font-size:13px}
.facts{list-style:none;margin:0;padding:0}.facts li{padding:10px 0;border-top:1px solid var(--line);font-size:15px;color:var(--text2);line-height:1.45}
.facts b{display:block;color:var(--text3);font-size:12px;letter-spacing:.07em;text-transform:uppercase;font-weight:650;margin-bottom:3px}
.related{margin-top:60px}
.route-error{padding:80px var(--pad);max-width:760px}.route-error h1{font-size:56px;font-weight:800;font-variation-settings:'wdth' 75;margin-bottom:14px}.route-error p{color:var(--text2);margin-bottom:24px;font-size:17px}
/* Player */
body[data-page=player] .nav{height:64px}
.player-main{display:flex;flex-direction:column;padding:0 var(--pad) 32px}
.player-toolbar{display:flex;align-items:center;gap:20px;padding:6px 0 14px}
.back{display:inline-flex;align-items:center;gap:8px;color:var(--text2);font-weight:600;font-size:14px;white-space:nowrap}.back:hover{color:var(--text)}
.pt-title{min-width:0;flex:1}.pt-title h1{font-size:30px;font-weight:780;font-variation-settings:'wdth' 78;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-title p{color:var(--text3);font-size:13.5px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-actions{display:flex;gap:10px}.player-actions .btn{height:42px;font-size:15px;padding:0 16px}.pt-compact{display:none!important}
.player-stage{position:relative;height:max(420px,calc(100dvh - 44px - 64px - 74px - 16px));border-radius:10px;overflow:hidden;background:#000;border:1px solid var(--line)}
.game-frame{display:block;width:100%;height:100%;border:0;background:#0d1015}
.fullscreen-exit{display:none;position:absolute;z-index:3;top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));height:40px;font-size:14px;padding:0 14px;background:#0b0d10cc;color:var(--text)}
.player-stage:fullscreen{height:100%;border:0;border-radius:0}.player-stage:fullscreen .fullscreen-exit{display:inline-flex}
.player-stage:-webkit-full-screen{height:100%;border:0;border-radius:0}.player-stage:-webkit-full-screen .fullscreen-exit{display:inline-flex}
.player-controls{margin-top:18px;color:var(--text2);font-size:15px;line-height:1.5}.player-controls summary{cursor:pointer;color:var(--text);font-weight:650;padding:8px 0}.player-controls ul{margin:6px 0 0;padding-left:20px;max-width:90ch}.player-controls li{margin:6px 0}
.graphics-error{padding:40px;max-width:720px;color:var(--text2);line-height:1.5}.graphics-error h2{color:var(--text);font-size:26px;margin-bottom:12px}.graphics-error p{margin-bottom:12px}.graphics-error a{color:var(--amber);text-decoration:underline}.graphics-error pre{white-space:pre-wrap;font-size:12px}
.graphics-error .button{display:inline-flex;height:44px;align-items:center;padding:0 18px;border:0;border-radius:8px;background:var(--amber);color:var(--ink);font-weight:700}
/* Keys dialog and hint */
.keys-dialog{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:#000a;padding:16px}
.keys-panel{width:min(620px,94vw);max-height:86vh;max-height:86dvh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px 24px;overscroll-behavior:contain}
.keys-panel header{display:flex;gap:16px;align-items:flex-start}.keys-panel h2{font-size:24px;font-weight:760;font-variation-settings:'wdth' 82}.keys-panel header p{color:var(--text2);font-size:14px;margin-top:4px}
.keys-x{margin-left:auto;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:8px;background:none;color:var(--text2)}.keys-x:hover{background:var(--raised);color:var(--text)}
.keys-game{display:flex;gap:10px;align-items:center;margin:16px 0 8px;color:var(--text2);font-size:14px}
.keys-game select{background:var(--raised);border:1px solid var(--line);border-radius:6px;padding:6px 10px;color:var(--text)}
.keys-loading{color:var(--text3);padding:12px 0}
.keys-panel footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin-top:16px;color:var(--text3);font-size:12px}
.keys-panel.wide{width:min(920px,96vw)}.keys-panel.wide header{align-items:center}
.keys-panel header .keys-game{margin:0 0 0 auto}.keys-panel header .keys-game select{font-size:15px;font-weight:650;padding:8px 12px;max-width:52vw}.keys-panel header .keys-game+.keys-x{margin-left:0}
/* Key pictures (arcade/keymap.js): lit keys and cards share one colour per group */
.km .g-move{--c:#8fd3c8}.km .g-look{--c:#b9a8f7}.km .g-act{--c:#ffb547}.km .g-menu{--c:#aab1bb}
.km-pic{display:flex;align-items:center;gap:22px;margin-top:16px;padding:18px 20px;border-radius:12px;background:#0d1014;border:1px solid var(--line)}
.km-kb{flex:1;min-width:0;display:block;height:auto}
.km-kb .k rect{fill:#ffffff06;stroke:#ffffff1f;stroke-width:1.2}
.km-kb .k text{fill:#ffffff3d;font:600 14px Archivo,sans-serif;text-anchor:middle}
.km-kb .k.on rect{fill:var(--c);fill-opacity:.2;stroke:var(--c);stroke-width:2}
.km-kb .k.on .kl{fill:var(--text);font-size:15px;font-weight:760}.km-kb .k.on .ks{fill:var(--c);font-size:11px;font-weight:700}
.km-kb .k.on.hl rect{fill-opacity:.45;stroke-width:3}
.km-mouse{flex:none;width:136px}
.km-ms{display:block;width:92px;height:auto;margin:0 auto}
.km-ms .body,.km-ms .mb path{fill:#ffffff06;stroke:#ffffff33;stroke-width:1.6}
.km-ms .mb.on path{fill:var(--c);fill-opacity:.22;stroke:var(--c);stroke-width:2.2}.km-ms .mb.on.hl path{fill-opacity:.5}
.km-ms .mi{stroke:var(--text)}
.km-mouse ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:5px;font-size:13px;color:var(--text2)}
.km-mouse li{display:flex;align-items:center;gap:7px;line-height:1.25}.km-mouse li b{color:var(--text);font-weight:680}
.km-mouse li i,.km-group h3 i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--c)}
.km .on,.km-card,.km-mouse li{transition:opacity .15s,border-color .15s}
.km.hl-on .on:not(.hl),.km.hl-on .km-card:not(.hl),.km.hl-on .km-mouse li:not(.hl){opacity:.3}
.km-tip{margin-top:10px;color:var(--text3);font-size:13px;line-height:1.45}
.km-group{margin-top:18px}.km-compact .km-group:first-child{margin-top:0}
.km-group h3{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}
.km-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.km-compact .km-cards{grid-template-columns:minmax(0,1fr)}
.km-card{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:var(--raised);border:1px solid var(--line)}
.km-card.hl{border-color:var(--c)}
.km-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#ffffff08;border:1px solid #ffffff12;color:var(--c)}.km-ico svg{width:22px;height:22px}
.km-name{min-width:0}.km-name b{display:block;font-size:16px;font-weight:720;line-height:1.2;color:var(--text);overflow-wrap:anywhere}
.km-name small{display:block;margin-top:2px;font-size:12.5px;line-height:1.35;color:var(--text3)}
.km-keys{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:5px;max-width:200px}
.km-keys .kc,.km-pad .kc{margin:0}
.km-or{margin:0 2px;font-size:12px;color:var(--text3)}.km-alt-word{font-size:12.5px;color:var(--text2)}
.km-hold{font-style:normal;font-size:11px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--c);margin-right:2px}
.km-m{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 8px;border-radius:5px;background:#232831;border:1px solid #343b46;border-bottom-width:3px;font-size:12.5px;font-weight:650;color:var(--text)}.km-m svg{width:12px;height:17px}
.km-pad{display:inline-grid;grid-template-areas:". u ." "l d r";gap:3px}.km-pad .kc{min-width:28px;height:26px;padding:0}
.km-notes{margin-top:18px;color:var(--text2);font-size:14px;line-height:1.5}.km-notes summary{cursor:pointer;color:var(--text);font-weight:650;padding:4px 0}
.km-notes ul{margin:8px 0 0;padding-left:20px}.km-notes li{margin:5px 0}
.km-more{margin-top:10px;color:var(--text3);font-size:13px}
@media (max-width:860px){.km-cards{grid-template-columns:minmax(0,1fr)}}
.hint-panel p{color:var(--text2);font-size:16px;line-height:1.55;margin-top:14px}.hint-panel b{color:var(--text)}
/* Account button and panel (arcade/account.js; only when accounts are switched on in arcade/account-config.js) */
.acct-btn{display:flex;align-items:center;gap:8px;height:42px;margin-left:-24px;padding:0 14px;border-radius:8px;border:1px solid #ffffff1f;background:#0b0d10b8;color:var(--text);font-size:15px;font-weight:600;white-space:nowrap;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.acct-btn:hover{border-color:#ffffff55}.acct-btn.on .icon{color:var(--amber)}
.acct-panel{width:min(460px,94vw)}.keys-panel header p b{color:var(--text)}
.acct-form{display:grid;gap:12px;margin-top:18px}.acct-form label{display:grid;gap:6px;font-size:14px;font-weight:650;color:var(--text2)}
.acct-hint{color:var(--text3);font-size:12.5px;line-height:1.4}
.acct-or{display:flex;align-items:center;gap:12px;margin-top:16px;color:var(--text3);font-size:13px}.acct-or:before,.acct-or:after{content:'';flex:1;height:1px;background:var(--line)}
.acct-ways{display:grid;gap:10px;margin-top:14px}
.acct-form input{height:48px;padding:0 14px;border-radius:8px;border:1px solid var(--line);background:var(--raised);font-size:16px;color:var(--text)}
.acct-form .btn,.acct-ways .btn,.acct-plan .btn{width:100%;height:48px}
.acct-note{margin-top:16px;color:var(--text3);font-size:13px;line-height:1.45}
.acct-plan{margin-top:18px;padding:16px;border-radius:10px;background:var(--raised);border:1px solid var(--line)}.acct-plan.on{border-color:var(--amber)}
.acct-plan b{display:block;font-size:17px}.acct-plan span{color:var(--text2);font-size:14px}.acct-plan ul{margin:10px 0 14px;padding-left:20px;color:var(--text2);font-size:14.5px;line-height:1.6}
.acct-actions{display:flex;gap:10px;margin-top:16px}.acct-status{margin-top:12px;color:var(--text2);font-size:14px}.acct-status:empty{display:none}
/* Settings sheet (phones, tablets and the player) */
.sheet{position:fixed;z-index:30;inset:0;background:#000b}
.sheet .panel{position:absolute;left:0;right:0;bottom:0;margin:0 auto;max-width:560px;max-height:92dvh;overflow:auto;background:var(--surface);border-radius:16px 16px 0 0;padding:10px max(18px,env(safe-area-inset-left)) calc(22px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.sheet .grab{width:38px;height:4px;border-radius:2px;background:#3a404a;margin:2px auto 8px}
.sheet-head{display:flex;align-items:center;margin-bottom:6px}.sheet h2{font-size:20px;font-weight:760;font-variation-settings:'wdth' 82}
.sheet .item{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line);font-size:15px}.sheet .item>span{flex:1}.sheet .item.stack{flex-direction:column;align-items:stretch;gap:10px}
.sheet .item small{display:block;color:var(--text3);font-size:12.5px;margin-top:2px}.sheet .stack .seg button{flex:1}
.sheet .seg button{padding:8px 12px;font-size:14px}.sheet input[type=range]{width:150px;flex:1;max-width:220px}.sheet .sys-btn{padding:8px 14px;font-size:14px}
.sheet-note{color:var(--text3);font-size:12.5px;line-height:1.45;padding-top:12px;border-top:1px solid var(--line)}
body.layer-open{overflow:hidden}
.notice{position:fixed;z-index:60;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,20px);max-width:min(560px,calc(100vw - 32px));padding:12px 16px;border-radius:10px;background:var(--raised);border:1px solid #343b46;color:var(--text);font-size:14px;line-height:1.4;box-shadow:0 12px 40px #0008;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.notice.visible{opacity:1;transform:translate(-50%,0)}
.tabbar{display:none}
/* Laptop widths: fewer, smaller featured thumbnails so they never overlap the hero copy */
@media (max-width:1700px){.upnext button,.upnext img{width:140px}}
@media (max-width:1560px){.upnext button:nth-child(n+5){display:none}.hero-copy{width:min(660px,42vw)}}
@media (max-width:1400px){.sys-note{display:none}}
@media (max-width:1280px){.sys-label>span,.sys-val,.fs .bt{display:none}.sys-label .icon{display:block}.sys-inner{gap:16px}.seg button{padding:4px 8px}input[type=range]{width:80px}
  .hero:after{background:linear-gradient(90deg,#0b0d10f7 0%,#0b0d10dd 30%,#0b0d1000 60%),linear-gradient(0deg,var(--bg) 0%,#0b0d1000 34%),linear-gradient(180deg,#0b0d10 0%,#0b0d10e8 120px,#0b0d1000 230px)}
  .upnext button,.upnext img{width:132px}.upnext button:nth-child(n+4){display:none}.all-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.detail-grid{gap:48px}.detail-grid h1{font-size:88px}.panels{gap:40px}}
@media (max-width:1100px){:root{--side:32px}.upnext{display:none}.hero h1{font-size:88px}.hero{min-height:560px}.hero-copy{width:min(620px,80vw)}.search{width:240px}.track{grid-auto-columns:calc((100vw - 2*var(--pad) - 3*var(--gap))/3.4)}.track.cont{grid-auto-columns:calc((100vw - 2*var(--pad) - 1*var(--gap))/2.3)}
  .all-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.detail-grid{grid-template-columns:1fr;gap:36px;padding-top:120px}.detail-grid .viewer{max-width:860px}.panels{grid-template-columns:1fr 1fr}.panels>div:last-child{grid-column:1/-1}}
/* Touch screens: larger targets */
@media (pointer:coarse){.seg button{padding:8px 12px;min-height:36px}.sys-btn{min-height:38px}.sys-icon{width:40px;height:40px}.kinds button{padding:12px 16px}.thumbs button{min-height:44px}
  input[type=range]{height:6px}input[type=range]::-webkit-slider-thumb{width:22px;height:22px}.track{scroll-snap-type:x mandatory}.tile:hover img{transform:none;filter:none}}
/* Phones */
@media (max-width:700px){:root{--side:16px;--gap:12px}
  .sysbar{display:none}.nav{height:calc(60px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);gap:12px;background:linear-gradient(180deg,#0b0d10d9,#0b0d1000)}
  body:not([data-page=home]) .nav{background:var(--bg)}
  .nav nav,.search{display:none}.brand{font-size:17px}.brand img{width:28px;height:28px}
  .nav.searching .search{display:flex;position:absolute;left:var(--pad);right:var(--pad);top:calc(64px + env(safe-area-inset-top));width:auto;margin:0;background:#0b0d10f2;z-index:6}
  .nav.searching .search kbd{display:none}
  .acct-btn{margin-left:auto;width:44px;height:44px;padding:0;justify-content:center;border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}.acct-btn .bt{display:none}.acct-btn~.sys-compact{margin-left:0}
  .sys-compact{display:flex;margin-left:auto;gap:4px}.sys-compact button{display:grid;place-items:center;width:44px;height:44px;border:0;background:none;color:var(--text);border-radius:8px}
  .hero{height:auto;min-height:0;background:var(--bg)}.hero-img{position:relative;height:300px}
  .hero:after{height:300px;background:linear-gradient(0deg,var(--bg) 0%,#0b0d1000 16%),linear-gradient(180deg,#0b0d10e6 0%,#0b0d1000 90px)}
  .hero-copy{position:relative;left:auto;right:auto;bottom:auto;width:auto;margin-top:-34px;padding:0 var(--pad) 8px}.hero h1{font-size:64px;margin:12px 0 12px}.hero-line{font-size:17px}
  .hero-meta{margin-top:14px}.meta-a{display:none!important}.actions{margin-top:18px;flex-wrap:nowrap}.btn{height:48px;font-size:16px}.btn-play{flex:1}.btn-icon{width:48px}
  .shelf{margin-top:32px}.shelf-head{margin-bottom:10px;align-items:center}.shelf-head h2{font-size:22px}.shelf-head .note,.shelf-head a span{display:none}.shelf-head a .icon{width:20px}
  .track{grid-auto-columns:64vw}.track.cont{grid-auto-columns:78vw}.tile h3{font-size:16px}
  .kinds{margin-top:30px}.kinds button{padding:9px 13px;font-size:14px}
  .all-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  main{padding-bottom:92px}.site-footer{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
  .tabbar{display:flex;position:fixed;z-index:6;left:0;right:0;bottom:0;height:calc(64px + env(safe-area-inset-bottom));padding:6px 8px env(safe-area-inset-bottom);background:#0b0d10f2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid #1d2128}
  .tabbar a,.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--text3);border:0;background:none}.tabbar [aria-current=page]{color:var(--text)}.tabbar .icon{width:22px;height:22px}
  .notice{bottom:calc(80px + env(safe-area-inset-bottom))}
  .detail-top{min-height:0}.detail-top .backdrop{display:none}.detail-top:after{display:none}body .detail-top .nav{position:relative}
  .detail-grid{display:flex;flex-direction:column;gap:28px;padding:0 var(--pad)}.detail-grid .viewer{order:-1;margin:0 calc(-1*var(--pad))}.viewer .main{border-radius:0;box-shadow:none}.viewer .source{padding:0 var(--pad)}.detail-grid h1{font-size:60px}.panels{grid-template-columns:1fr;gap:36px}.panels>div:last-child{grid-column:auto}.viewer .thumbs{display:none}
  .detail-copy .actions .btn-ghost{flex:none}.detail-copy .btn-play{flex:1}
  .route-error h1{font-size:40px}
  .keys-dialog{place-items:end center;padding:0}.keys-panel,.keys-panel.wide{width:100%;max-height:88dvh;border-radius:16px 16px 0 0;padding:18px 16px calc(22px + env(safe-area-inset-bottom))}
  .keys-panel.wide header{flex-wrap:wrap}.keys-panel header .keys-game{order:3;flex-basis:100%;margin:0}.keys-panel header .keys-game select{width:100%;max-width:none}.keys-panel header .keys-game+.keys-x{margin-left:auto}
  .km-pic{flex-direction:column;align-items:stretch;gap:12px;padding:12px}.km-mouse{width:auto;display:flex;align-items:center;gap:16px}.km-ms{width:58px;margin:0}.km-mouse ul{margin:0}
  .km-card{grid-template-columns:36px minmax(0,1fr) auto;gap:10px;padding:9px 10px}.km-ico{width:36px;height:36px}}
/* Full-height player on phones and tablets: the game gets the whole screen except a slim bar. */
@media (max-width:1100px),(pointer:coarse){
  body[data-page=player] .sysbar,body[data-page=player] .nav{display:none}
  body[data-page=player]{overscroll-behavior:none}
  .player-main{display:block;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
  .player-toolbar{flex:none;gap:10px;height:52px;padding:0 10px}
  .back span{display:none}.back{width:40px;height:40px;justify-content:center;border-radius:8px;background:#ffffff10}
  .pt-title h1{font-size:19px}.pt-title p{font-size:12px;margin-top:2px}
  .player-actions .btn{height:40px;padding:0 12px;font-size:14px}.player-actions [data-save-label],.pt-wide{display:none}.pt-compact{display:inline-flex!important}
  .player-stage{height:calc(100vh - 52px);height:calc(100dvh - 52px - env(safe-area-inset-top));min-height:0;border:0;border-radius:0}
  .player-controls{padding:0 16px calc(16px + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}