@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#0d0f19;--panel:#141724;--line:#2a2d3d;--text:#f4f4fb;--muted:#989caf;--lime:#bbff70;--purple:#a58aff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-size:16px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid var(--lime);outline-offset:4px}button:disabled{opacity:.4;cursor:default}header{max-width:1240px;margin:auto;height:94px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 28px}.brand{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:28px;letter-spacing:-1px;color:var(--text);text-decoration:none;display:flex;gap:10px;align-items:center}.mark{background:var(--lime);color:#131923;width:32px;height:36px;border-radius:8px;text-align:center;font-size:32px}.brand-small{font:500 12px 'DM Sans',sans-serif;letter-spacing:3px;margin:5px 0 0 8px;color:var(--muted)}.header-note{font-size:14px;color:var(--muted)}.quiet{border:1px solid var(--line);background:transparent;padding:11px 16px;border-radius:8px;font-size:14px}.quiet:hover{background:#242738}main{max-width:1184px;margin:auto;padding:0 28px}.intro{display:flex;justify-content:space-between;align-items:center;padding:46px 0 38px}.eyebrow{color:var(--muted);font-size:12px;letter-spacing:1.7px;font-weight:700}h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(36px,4vw,54px);margin:12px 0;letter-spacing:-2px;line-height:1.15}h1 span{color:var(--lime)}.intro p{color:var(--muted);margin:0;line-height:1.6}.qte-note{display:flex;gap:16px;align-items:center;padding:18px;border-left:1px solid var(--line);max-width:325px}.qte-note b{font-size:14px}.qte-note p{font-size:13px;margin-top:5px}.keycap{border:1px solid #6f5d9c;border-bottom:4px solid #6f5d9c;background:#242039;display:grid;place-items:center;width:45px;height:45px;border-radius:8px;font-family:'Space Grotesk';color:#cbbcff;flex-shrink:0}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}h2{font-family:'Space Grotesk';font-size:22px;letter-spacing:-.6px;margin:0}.section-head h2 span{font-size:12px;color:var(--muted);margin-left:10px;vertical-align:middle}.filters,.mode-control{display:flex;gap:4px;padding:4px;background:#171a27;border:1px solid var(--line);border-radius:9px}.filters button,.mode-control button{background:none;border:0;border-radius:6px;color:var(--muted);padding:7px 14px;font-size:14px}.filters .active,.mode-control .active{background:#303444;color:white}.games{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.game-card{text-align:left;padding:0;background:var(--panel);border:1px solid var(--line);border-radius:13px;overflow:hidden;transition:transform .2s,border-color .2s}.game-card:hover{transform:translateY(-4px);border-color:#6b728a}.game-card.selected{border-color:var(--lime)}.game-card[hidden]{display:none}.card-art{height:160px;position:relative;overflow:hidden;background:#1b1933}.card-art canvas{width:100%;height:100%;object-fit:cover}.snake-art{background:#122a29}.reflex-art{background:#292016}.tag{position:absolute;top:14px;left:14px;background:#0b0e19b8;border:1px solid #ffffff22;border-radius:4px;padding:5px 7px;font-size:10px;letter-spacing:1px;font-weight:700}.card-body{padding:19px 20px 21px}.number{font-size:11px;letter-spacing:1.6px;color:var(--muted)}h3{font-family:'Space Grotesk';font-size:22px;margin:8px 0}h3 span{float:right;color:var(--muted);font-size:18px}.card-body p{margin:0;color:var(--muted);font-size:14px}.play-section{margin:38px 0 36px;padding-top:28px;border-top:1px solid var(--line)}.play-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.play-title h2{margin-top:7px}.arena-layout{display:grid;grid-template-columns:1fr 270px;gap:24px}.arena{height:440px;position:relative;background:#090c15;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;justify-content:center;align-items:center}.arena>canvas{height:100%;max-width:100%;object-fit:contain}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#0b0e18e6;text-align:center;padding:20px}.overlay[hidden]{display:none}.overlay-icon{color:var(--lime);font-size:44px;background:#baff7012;border:1px solid #baff7044;border-radius:16px;width:68px;height:68px;display:grid;place-items:center;margin-bottom:12px}.overlay h3{font-size:30px}.overlay p{color:var(--muted);font-size:14px;margin:6px 0 24px;line-height:1.6}.primary{background:var(--lime);color:#172015;border:0;border-radius:8px;padding:14px 25px;font-weight:700}.primary:hover{background:#d1ff9e}.primary span{margin-left:25px;font-size:12px}.hint{font-size:12px;color:#767d94;margin-top:16px}.score-box{border-bottom:1px solid var(--line);padding:4px 0 18px}.score-box>span{font-size:12px;letter-spacing:2px;color:var(--muted)}.score-box strong{display:block;font:500 48px 'Space Grotesk';margin:5px 0}.best{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}.best b{color:var(--lime)}.info-box{padding:20px 0 8px}.info-box p{font-size:14px;line-height:1.8;color:#c8cbda;margin-top:10px}#bonus-info{color:var(--muted);font-size:13px}.actions{display:flex;gap:8px}.touch-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:16px}.touch-controls button{background:#1d2130;border:1px solid var(--line);border-radius:6px;min-height:38px}.touch-controls .wide{grid-column:span 2;font-size:12px}.save-note{color:#737b92;font-size:12px}.qte-box{position:absolute;right:20px;top:20px;background:#211b37;border:1px solid var(--purple);padding:14px;text-align:center;width:135px;border-radius:12px;box-shadow:0 0 50px #9c7bff22}.qte-box[hidden]{display:none}#qte-label{font-size:10px;letter-spacing:1px;color:#c4b4ff}#qte-key{display:block;margin:12px auto;background:#a58aff;color:#18122c;font-size:26px;font-weight:700;border:0;border-radius:8px;width:50px;height:50px}.time-track{height:4px;background:#504462;border-radius:4px;overflow:hidden}#qte-time{background:var(--lime);height:100%;width:100%}#toast{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:14px;color:var(--lime);background:#151b29;padding:8px 14px;border-radius:6px;white-space:nowrap}#toast:empty{display:none}footer{border-top:1px solid var(--line);padding:26px 0 32px;display:flex;justify-content:space-between;align-items:center;color:#777e94;font-size:12px}footer .brand{font-size:18px}@media(max-width:800px){.header-note,.qte-note{display:none}.arena-layout{grid-template-columns:1fr 220px;gap:16px}.games{gap:12px}.card-body{padding:15px}.card-body h3{font-size:19px}.card-art{height:130px}.arena{height:400px}header{height:76px}}@media(max-width:600px){header,main{padding-left:18px;padding-right:18px}.brand-small{display:none}.intro{padding:30px 0}.intro p{font-size:14px}.games{grid-template-columns:1fr}.game-card{display:grid;grid-template-columns:110px 1fr}.card-art{height:100%;min-height:118px}.tag{font-size:8px;top:8px;left:7px}.card-body{padding:15px}.card-body p{font-size:13px}.arena-layout{grid-template-columns:1fr}.arena{height:420px}.play-title{gap:10px}.mode-control button{padding:7px 10px;font-size:12px}aside{display:grid;grid-template-columns:1fr 1fr;gap:12px}.score-box{border:0}.info-box{padding:0}.actions,.touch-controls,.save-note{grid-column:span 2}.touch-controls button{min-height:46px}.save-note{margin:0}.section-head h2{font-size:20px}.filters button{padding:7px 10px}footer span:last-child{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.arena[data-game="blocks"] .qte-box{left:14px;top:14px;right:auto;width:120px;z-index:2}.arena[data-game="blocks"] #toast{left:14px;top:14px;bottom:auto;transform:none;max-width:calc(100% - 28px);white-space:normal;border:1px solid #bbff7066;box-shadow:0 4px 20px #0006;z-index:3}.arena[data-game="blocks"] .touch-controls button{touch-action:none}

.next-panel{position:absolute;top:14px;right:14px;width:124px;padding:10px 0;background:#141724e6;border:1px solid #525b76;border-radius:9px;pointer-events:none}.next-panel[hidden]{display:none}.next-panel span{display:block;text-align:center;color:#aeb6ce;font-size:10px;letter-spacing:1px}.next-panel canvas{display:block;width:100%;height:144px}dialog{width:min(440px,calc(100% - 28px));max-height:90vh;overflow:auto;background:#141724;color:#f4f4fb;border:1px solid #525b76;border-radius:14px;padding:24px}dialog::backdrop{background:#000a}.settings-heading{display:flex;justify-content:space-between;align-items:center}dialog p{font-size:14px;color:#989caf;line-height:1.6}#key-settings label{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:9px 0;border-bottom:1px solid #2a2d3d;font-size:14px}#key-settings button{min-width:100px;padding:8px;background:#252a3c;border:1px solid #525b76;border-radius:6px}#settings-status{min-height:44px}header{gap:12px}header .header-note{flex:1;text-align:center}.touch-controls button{touch-action:none}@media(max-width:600px){.next-panel{width:92px;right:8px;top:8px}.next-panel span{font-size:9px}.next-panel canvas{height:110px}.arena[data-game="blocks"] .qte-box{width:95px;left:8px;top:8px}header .quiet{font-size:12px;padding:9px}}

.movement-settings{margin:18px 0 22px;padding:16px;background:#1c2030;border:1px solid #353c54;border-radius:9px}.movement-settings h3{font-size:18px;margin:0 0 16px}.movement-settings label{display:flex;justify-content:space-between;gap:12px;font-size:14px}.movement-settings output{color:#bbff70}.movement-settings input{width:100%;min-height:36px;margin:4px 0 12px;accent-color:#bbff70}.movement-settings p{margin:0;font-size:13px}

.settings-tabs{display:flex;gap:6px;margin:20px 0 16px;padding:4px;background:#202536;border-radius:8px}.settings-tabs button{flex:1;padding:10px;background:transparent;border:0;border-radius:6px;color:#aeb6ce}.settings-tabs button[aria-selected="true"]{background:#3d4560;color:#fff}#panel-general[hidden],#panel-tetris[hidden]{display:none}.general-row{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid #353c54;font-size:16px}.general-row input{width:20px;height:20px;accent-color:#bbff70}.general-volume{padding:18px 0}.general-volume label{display:flex;justify-content:space-between;font-size:14px}.general-volume output{color:#bbff70}.general-volume input{width:100%;min-height:36px;accent-color:#bbff70}html[data-reduced-motion="true"] *,html[data-reduced-motion="true"] *::before,html[data-reduced-motion="true"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}html[data-reduced-motion="true"] .game-card:hover{transform:none}

.external-game{position:absolute;inset:0;width:100%;height:100%;border:0;background:#0d0f19}.games{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:600px){.games{grid-template-columns:1fr}}

.featured-label{display:inline-block;font-size:10px;letter-spacing:1px;color:#bbff70;padding-top:8px}

#board{touch-action:none}
.arena[data-game="stack"] .qte-box,.arena[data-game="runner"] .qte-box{right:auto;left:20px}

#settings-dialog{width:min(700px,94vw);max-height:88vh;overflow:auto}.settings-tabs{overflow-x:auto;flex-wrap:nowrap}.settings-tabs button{flex:0 0 auto}.preference-list{display:grid;gap:16px;margin:20px 0}.preference-row{display:grid;grid-template-columns:1fr auto;gap:8px;color:#c8cbda}.preference-row input[type=range]{grid-column:1/-1;width:100%;accent-color:#bbff70}.preference-row input[type=checkbox]{accent-color:#bbff70;width:20px;height:20px}.preference-row output{color:#bbff70}#arcade-key-settings label{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #2a2d3d}#arcade-key-settings button{background:#252a3b;border:1px solid #4b526d;border-radius:8px;padding:8px 15px;min-width:70px}html[data-touch=false] .touch-controls{display:none}html[data-contrast=true]{--muted:#d0d4e2;--line:#6f768e}html[data-contrast=true] .info-box p{color:#f4f4fb}#preferences-status{font-size:13px;color:#bbff70}

header>a.quiet{color:var(--text);text-decoration:none} @media(max-width:650px){body:not(.player-page)>header{height:auto;min-height:94px;flex-wrap:wrap;gap:10px;padding-top:16px;padding-bottom:16px}}
