@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{color-scheme:dark;--bg:#0a0e16;--panel:#0e1420;--line:#202a3a;--text:#edf2fa;--muted:#929fb5;--accent:#a8bcff;--bright:#d8e2ff;--blue:#6792ff;--radius:20px;font-family:'DM Sans',system-ui,sans-serif;font-size:16px;color:var(--text);background:var(--bg)}
*{box-sizing:border-box}body{margin:0}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:disabled{opacity:.35;cursor:not-allowed}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button, a{touch-action:manipulation}button{transition:background .18s,border-color .18s,transform .18s}button:active:not(:disabled){transform:translateY(1px)}a{color:inherit;text-decoration:none}svg.lucide{width:19px;height:19px;stroke-width:1.6;flex-shrink:0}h1,h2,h3,p{margin:0}
.topbar{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 38px;border-bottom:1px solid var(--line);gap:24px}.brand{display:flex;gap:12px;align-items:center;font-family:'Space Grotesk',sans-serif;font-size:27px;font-weight:600;letter-spacing:-1px}.brand-dot{color:var(--accent)}.brand-symbol{display:grid;place-items:center;color:var(--accent)}.brand-symbol .lucide{width:30px;height:30px;stroke-width:1.45}.header-caption{font-size:12px;letter-spacing:2.2px;color:#7987a0;margin-right:auto;margin-left:34px}.quiet-button{display:inline-flex;align-items:center;gap:8px;background:transparent;border:0;padding:8px 6px;color:#aab7ca;font-size:14px;white-space:nowrap}.quiet-button:hover{color:var(--text)}
.workspace{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:calc(100svh - 84px)}.collection{border-right:1px solid var(--line);display:flex;flex-direction:column;padding:34px 18px 25px;gap:24px;background:linear-gradient(180deg,#0d121c,#0a0e16)}.aside-heading{display:flex;align-items:center;justify-content:space-between;padding:0 12px;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:1.5px}.collection-count{font-family:'Space Grotesk',sans-serif;color:#697991;letter-spacing:0}.puzzle-item{display:flex;align-items:center;gap:12px;border:1px solid #3d4d6a;background:linear-gradient(110deg,#202c46,#171e2c);border-radius:12px;padding:17px 12px;box-shadow:0 7px 20px #0002}.puzzle-item>div{flex:1}.puzzle-item strong{font-weight:600;font-size:15px;display:block;line-height:1.5}.puzzle-item div>span{display:block;font-size:12px;color:#a2b0c6;margin-top:2px}.puzzle-item>.lucide{width:14px;color:var(--accent)}.puzzle-symbol{color:var(--accent)}.puzzle-symbol>.lucide{height:25px;width:25px}.collection-note{margin:12px 10px 0;color:#6f809a}.collection-note>.lucide{width:23px;height:23px;margin-bottom:14px}.collection-note p{font-size:14px;color:#a6b2c5;margin-bottom:7px;line-height:1.6}.collection-note>span{display:block;font-size:13px;line-height:1.8}.aside-bottom{margin-top:auto;padding:80px 12px 0;display:grid;gap:9px;color:#718098;font-size:12px;line-height:1.6}.small-label{letter-spacing:1.8px;font-size:11px}
main{padding:35px clamp(22px,3vw,46px) 24px;min-width:0;max-width:1710px;width:100%;margin:auto}.game-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:600;color:#91a7cd;display:block}h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(34px,3.4vw,49px);font-weight:500;line-height:1.3;letter-spacing:-2px;margin-top:5px}h1>span{color:#8c9cb4;font-weight:400}.game-stats{display:flex;align-items:center;gap:25px}.game-stats>div:not(.stat-divider){display:grid;gap:5px}.game-stats strong{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:28px;font-variant-numeric:tabular-nums}.game-stats>div>span{color:var(--muted);font-size:12px}.stat-total{font-size:17px;color:#687992}.stat-divider{height:34px;width:1px;background:var(--line)}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:start}
.play-panel{position:relative;border:1px solid #28334a;border-radius:var(--radius);overflow:hidden;background:radial-gradient(ellipse at 52% 31%,#1c2942 0%,#121b2c 42%,#101725 69%,#0e1521 100%)}.stage-top{position:absolute;left:24px;right:24px;top:19px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:14px;pointer-events:none}.stage-top>*{pointer-events:auto}.state-pill{display:inline-flex;align-items:center;padding:7px 11px;color:#a9bbda;background:#28365272;border:1px solid #3b4d665c;border-radius:8px;font-size:12px;letter-spacing:.1px}.state-pill.playing{color:#cedaff}.state-pill.solved{background:#24483e70;color:#9ef1cd;border-color:#356153}.stage-top .quiet-button{font-size:12px}.stage-top .lucide{width:15px;height:15px}#cube-stage{width:100%;height:clamp(370px,49vh,610px);position:relative;touch-action:none;cursor:grab;outline-offset:-4px}#cube-stage:active{cursor:grabbing}#cube-stage>canvas{display:block;width:100%;height:100%;touch-action:none}.loading-state{position:absolute;inset:0;display:flex;flex-direction:column;gap:20px;align-items:center;justify-content:center;font-size:14px;color:var(--muted);text-align:center;padding:35px}.loading-orbit{width:32px;height:32px;border:1px solid #3d4c6d;border-top-color:#afc4ff;border-radius:50%;animation:spin 1.2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.stage-hint{display:flex;align-items:center;justify-content:center;gap:8px;padding:4px 22px 16px;color:#8e9fb7;font-size:12px;text-align:center;line-height:1.7}.stage-hint>.lucide{width:14px;height:14px}.selected-face{display:flex;align-items:center;justify-content:center;gap:10px;padding:0 20px 20px;font-size:14px;color:#c6d1e3}#selected-dot{height:9px;width:9px;border-radius:3px;background:#159bfa}.selected-actions{display:flex;gap:6px;margin-left:4px}.icon-button{width:36px;height:34px;display:grid;place-items:center;padding:0;background:#1d2a407a;border:1px solid #34425b;border-radius:8px}.icon-button:hover:not(:disabled){background:#2c3d5a;border-color:#768db5}.icon-button>.lucide{width:16px;height:16px}.stage-actions{display:flex;align-items:center;gap:10px;padding:20px 22px;background:#0d142080;border-top:1px solid #273147;flex-wrap:wrap}.button{border:1px solid #35415a;border-radius:9px;background:#1a2435;min-height:42px;padding:10px 16px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:14px;font-weight:500;line-height:1.4}.button:hover:not(:disabled){background:#27334a;border-color:#52678a}.button.primary{background:var(--bright);border-color:var(--bright);color:#17253f;box-shadow:0 3px 12px #6c98ff12}.button.primary:hover:not(:disabled){background:#f0f4ff;border-color:#f0f4ff}.button>.lucide{width:17px;height:17px}.button.icon-only{padding:10px 12px}.reset-button{margin-left:auto;background:transparent;color:#aebbd0}.controls-panel{padding:22px 21px;border:1px solid var(--line);border-radius:var(--radius);background:#101621}.control-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}h2{font-weight:550;font-size:16px;letter-spacing:-.2px}.control-heading>span{font-size:12px;color:#8393ad}.turn-legend{display:flex;justify-content:space-between;font-size:11px;color:#7788a3;margin:23px 0 8px}.face-controls{display:grid;gap:4px}.face-row{display:flex;align-items:center;gap:10px;border-radius:10px;padding:7px 6px;margin:0 -6px;border:1px solid transparent}.face-row.selected{background:#1b2638;border-color:#36465e}.face-select{display:flex;align-items:center;gap:10px;padding:0;border:0;background:transparent;flex:1;text-align:left;min-height:34px}.face-letter{display:grid;place-items:center;width:27px;height:29px;background:var(--face);border-radius:6px;font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;color:#111c2b;flex-shrink:0}.face-name{font-size:14px;color:#c3cee0}.face-turn{width:32px;height:32px;border:1px solid #2f3b50;border-radius:8px;background:transparent;display:grid;place-items:center;padding:0;flex-shrink:0}.face-turn>.lucide{width:15px;height:15px}.face-turn:hover:not(:disabled){background:#2b3a53;border-color:#6f87b0}.control-note{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:#8192ad;line-height:1.6;margin:18px 0}.control-note>.lucide{width:14px;height:14px;margin-top:3px}.keys-hint{display:flex;gap:10px;color:#899bb5;font-size:12px;line-height:1.9;padding:16px 0;border-top:1px solid var(--line)}.keys-hint>.lucide{width:17px;height:17px;margin-top:4px}kbd{font-family:inherit;border:1px solid #3a4860;background:#172134;border-radius:4px;display:inline-block;font-size:11px;line-height:1.6;min-width:17px;text-align:center;padding:0 3px;color:#c0cde2}.keys-hint small{display:block;font-size:12px;margin-top:5px}.history-block{border-top:1px solid var(--line);padding-top:19px}.history-heading{display:flex;align-items:center;justify-content:space-between}.history-heading h2{font-size:14px;color:#b5c3d9}.history-heading>span{font-size:12px;color:#7f93b1}.history{display:flex;flex-wrap:wrap;gap:6px;min-height:44px;margin-top:13px}.history-token{font-family:'Space Grotesk',sans-serif;min-width:29px;height:27px;display:grid;place-items:center;color:#b4c9f4;background:#202c42;border:1px solid #35445f;border-radius:5px;font-size:13px}.history-token:last-child{color:#e0e9ff;background:#354865;border-color:#60749b}.empty-history{font-size:12px;color:#7285a0;line-height:1.8}.bottom-note{display:flex;justify-content:space-between;gap:20px;font-size:12px;color:#8395af;padding:18px 4px 0;line-height:1.7}.mode-caption{font-size:10px;letter-spacing:2px;white-space:nowrap;color:#687c9a;align-self:center}
.dialog{background:#111a28;border:1px solid #465b7a;border-radius:20px;color:var(--text);max-width:520px;width:calc(100% - 36px);padding:34px;box-shadow:0 30px 100px #0008}.dialog::backdrop{background:#050913bb;backdrop-filter:blur(8px)}.dialog-close{position:absolute;right:18px;top:18px}.dialog>.eyebrow{margin:4px 0 12px}.dialog>h2{font-family:'Space Grotesk',sans-serif;font-size:30px;margin-bottom:28px;letter-spacing:-1px}.help-item{display:flex;gap:15px;margin:22px 0}.help-item>.lucide{color:#adc4fa;width:20px;height:20px;margin-top:3px}.help-item h3{font-size:15px;font-weight:550;margin-bottom:6px}.help-item p{font-size:14px;line-height:1.7;color:#a0b2cc}.dialog-done{width:100%;margin-top:8px}.confirm-dialog h2{font-size:25px;margin-bottom:18px}.confirm-dialog p{color:#a7b7ce;font-size:16px;line-height:1.7}.dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:25px;flex-wrap:wrap}.no-script{position:fixed;inset:84px 0;background:#0e1622;display:grid;place-items:center;padding:30px;font-size:18px}
@media(min-width:1600px){.collection{padding-top:44px}main{padding-top:42px}.game-layout{grid-template-columns:minmax(0,1fr) 310px}.controls-panel{padding:26px}.face-row{padding-top:9px;padding-bottom:9px}}
@media(max-width:1200px){.workspace{grid-template-columns:190px minmax(0,1fr)}.topbar{padding:0 24px}.header-caption{font-size:10px;letter-spacing:1.5px;margin-left:15px}.collection{padding-left:12px;padding-right:12px}.aside-heading{font-size:10px}.puzzle-item{padding:14px 9px;gap:8px}.puzzle-item>.lucide{display:none}.game-layout{grid-template-columns:minmax(0,1fr) 249px;gap:18px}.controls-panel{padding:20px 17px}main{padding:29px 24px 20px}.stage-actions{padding:16px 15px;gap:8px}.stage-actions>.button{padding:10px 12px}.stage-top{left:17px;right:17px}.stage-top .quiet-button span{display:none}.reset-button{margin-left:0}.game-stats{gap:17px}}
@media(max-width:1020px){.workspace{grid-template-columns:1fr}.collection{display:none}.topbar{height:76px}.workspace{min-height:calc(100svh - 76px)}main{padding:28px}.game-layout{grid-template-columns:minmax(0,1fr) 270px}.header-caption{margin-left:24px}.brand{font-size:25px}#cube-stage{height:440px}.stage-actions>.button{padding:10px 14px}.game-heading{margin-bottom:23px}}
@media(max-width:730px){.topbar{height:69px;padding:0 20px;gap:15px}.header-caption{display:none}.brand{font-size:24px}.brand-symbol .lucide{width:26px;height:26px}.topbar>.quiet-button{font-size:13px}main{padding:25px 18px 20px}.game-heading{gap:14px;margin-bottom:20px}h1{font-size:38px}.eyebrow{font-size:9px;letter-spacing:1.6px}.game-stats{gap:14px}.game-stats strong{font-size:25px}.game-stats>div>span{font-size:10px}.stat-total{font-size:14px}.stat-divider{height:29px}.game-layout{grid-template-columns:1fr;gap:18px}#cube-stage{height:380px}.stage-top{top:15px}.stage-top .quiet-button span{display:inline}.stage-hint{font-size:11px;padding-left:16px;padding-right:16px}.stage-actions{padding:17px;gap:8px}.stage-actions>.button{padding:10px 13px;font-size:13px;min-height:43px}.reset-button{margin-left:auto}.controls-panel{padding:23px}.face-controls{grid-template-columns:1fr 1fr;gap:8px 20px}.turn-legend{margin-top:18px}.turn-legend>span:last-child{display:none}.face-row{gap:6px}.face-select{gap:7px}.face-name{font-size:13px}.face-turn{width:31px;height:34px}.control-note{margin:16px 0}.keys-hint{display:none}.history-block{margin-top:16px}.history{min-height:32px}.mode-caption{display:none}.bottom-note{padding-top:15px}.dialog{padding:28px}.dialog>h2{font-size:27px}.dialog-close{right:13px;top:13px}}
@media(max-width:410px){main{padding:22px 12px}.topbar{padding:0 15px}.game-stats{gap:10px}.game-stats>div>span{max-width:60px}.stage-actions{padding:15px 12px}.stage-actions>.button{padding:10px 11px;font-size:12px}.stage-actions>.button>.lucide{width:15px}.stage-actions .reset-button{margin-left:0}.face-controls{gap:8px 12px}.controls-panel{padding:20px 16px}.face-name{font-size:12px}.face-turn{width:28px}.face-letter{width:24px}.face-select{gap:5px}.face-row{gap:4px}#cube-stage{height:335px}.stage-top{left:14px;right:14px}.state-pill{font-size:11px}.game-heading{padding:0 3px}}
@media(max-width:510px){.face-controls{grid-template-columns:1fr;gap:3px}.face-row{padding:7px 8px;gap:12px}.face-select{gap:12px;min-height:40px}.face-name{font-size:14px}.face-letter{width:29px;height:30px}.face-turn{width:42px;height:40px}.face-turn>.lucide{width:18px;height:18px}.selected-actions .icon-button{width:43px;height:40px}.stage-actions .button{min-height:44px}.turn-legend>span:last-child{display:block}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
[hidden]{display:none!important}
.game-navigation{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.save-status{padding:12px 16px;margin:0 0 20px;border:1px solid #685737;border-radius:10px;background:#302819;color:#f1d9a4;font-size:14px;line-height:1.6}
/* A growing navigation list must not vertically center the game far below the header. */
main{margin-block:0}
.collection-intro{color:var(--muted);line-height:1.7;margin-bottom:28px}
.game-card{display:flex;align-items:center;gap:28px;max-width:850px;border:1px solid #344563;border-radius:20px;padding:32px;background:linear-gradient(120deg,#1c2942,#101725)}
.card-symbol{display:grid;place-items:center;background:#283957;border:1px solid #47618b;border-radius:20px;color:var(--bright);width:100px;height:100px;flex-shrink:0}
.card-symbol .lucide{width:56px;height:56px}
.game-card h2{font-family:'Space Grotesk',sans-serif;font-size:28px;margin:8px 0}
.game-card p{color:#a5b5ce;line-height:1.6;font-size:14px}
.game-card .card-progress{color:#c2d2f4;margin-top:8px}
.game-card .button{margin-left:auto;white-space:nowrap}
.collection-saving{font-size:14px;color:var(--muted);margin-top:24px;line-height:1.7}
.puzzle-item:not([aria-current]){border-color:var(--line);background:#111927}
@media(max-width:730px){.game-card{flex-wrap:wrap;padding:24px;gap:20px}.game-card .button{width:100%;margin:0}.card-symbol{width:64px;height:64px;border-radius:14px}.card-symbol .lucide{width:38px;height:38px}.game-navigation .quiet-button{font-size:13px}.game-navigation{margin-bottom:18px}}