@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',system-ui,sans-serif;color:#e9edf9;background:#080d1b;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh}button,select,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.38}.app{min-height:100vh;display:grid;grid-template-columns:268px minmax(350px,1fr) 320px;grid-template-rows:64px minmax(0,1fr);gap:0}.top{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:1px solid #24304d;background:#0e162a}.brand{font:700 23px 'Space Grotesk',sans-serif;letter-spacing:-1px}.brand span{color:#8b80ff}.topright{display:flex;gap:12px;align-items:center;color:#aab5cb;font-size:12px}.pill{border:1px solid #314266;border-radius:99px;padding:7px 12px}.left,.right{padding:24px 19px;background:#0e1629;overflow:auto;max-height:calc(100vh - 64px)}.left{border-right:1px solid #25314c}.right{border-left:1px solid #25314c}h2{font:700 14px 'Space Grotesk';letter-spacing:.3px;margin:0 0 15px}h3{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:#8594b4;margin:25px 0 12px}.field{margin-bottom:16px}.field label{display:block;font-size:12px;color:#a7b5cf;margin:0 0 8px}select{width:100%;padding:12px;background:#19243b;border:1px solid #354363;border-radius:10px;color:#f3f5ff;outline:none}.btn{border:1px solid #3b4a68;background:#1a2842;color:#e4eafe;border-radius:10px;padding:11px 12px;transition:.15s}.btn:hover{background:#293958}.primary{background:#7868ef;border-color:#8d7fff;color:white;font-weight:700}.primary:hover{background:#9286ff}.buttons{display:grid;grid-template-columns:1fr 1fr;gap:9px}.wide{grid-column:1/-1}.small{font-size:12px}.hint{font-size:12px;line-height:1.65;color:#93a1bb}.divider{border:0;border-top:1px solid #293651;margin:24px 0}.stage{position:relative;min-width:0;min-height:500px;background:radial-gradient(ellipse at 50% 37%,#213057 0%,#0f1831 48%,#080e1e 100%);overflow:hidden}.stage canvas{display:block;width:100%;height:100%;touch-action:none}.stage-head{position:absolute;top:22px;left:25px;z-index:2;pointer-events:none}.stage-head strong{font:700 18px 'Space Grotesk'}.stage-head p{margin:5px 0;color:#93a3c1;font-size:12px}.move-indicator{position:absolute;top:20px;right:20px;background:#1c2745cf;border:1px solid #3f527d;border-radius:10px;padding:10px 15px;font-weight:700}.stage-bottom{position:absolute;bottom:19px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}.stage-bottom>*{pointer-events:auto}.toolbar{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;padding:0 15px}.toolbar button{background:#17233ddd;border:1px solid #3a4b71;color:#eaf0ff;min-width:36px;padding:9px;border-radius:8px;font-size:12px}.toolbar button:hover{background:#354970}.status{border-radius:99px;background:#101b33cc;border:1px solid #344769;padding:8px 15px;font-size:12px;color:#bfccec;max-width:90%;text-align:center}.statrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat{border:1px solid #30405f;background:#152039;border-radius:12px;padding:14px}.stat .number{font:700 25px 'Space Grotesk'}.stat .desc{font-size:11px;color:#95a4bf;margin-top:4px}.progress{height:7px;background:#2c3b55;border-radius:9px;overflow:hidden;margin:13px 0}.progress div{height:100%;width:0;background:#8f82ff;transition:width .2s}.moves{display:flex;gap:5px;flex-wrap:wrap;max-height:135px;overflow:auto}.move{border-radius:6px;padding:6px 8px;background:#273553;border:1px solid #3b4e75;font-size:12px;font-weight:700}.step{padding:15px;border:1px solid #394968;background:#17223c;border-radius:12px}.step strong{display:block;font-size:15px;margin-bottom:8px;color:#e6e9ff}.step p{color:#adbcd4;font-size:12px;line-height:1.7;margin:0}.kicker{font-size:11px;color:#aa9bff;letter-spacing:1.1px;font-weight:700;margin-bottom:8px}.legend{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.legend div{display:flex;gap:6px;align-items:center;font-size:11px;color:#acbad5}.swatch{width:12px;height:12px;border-radius:3px}.toast{position:fixed;top:78px;left:50%;transform:translateX(-50%);background:#222f4e;border:1px solid #7180a8;border-radius:10px;padding:12px 18px;z-index:20;font-size:13px;max-width:90vw;text-align:center;box-shadow:0 10px 30px #0006}.footerline{font-size:11px;color:#647492;margin-top:19px}.toggle{display:flex;align-items:center;gap:8px;color:#b5c0d7;font-size:12px;margin:9px 0}.toggle input{accent-color:#8676ff}.shortcut{font-family:monospace;color:#cbc7ff}.right .buttons{margin-top:12px}@media(max-width:1100px){.app{grid-template-columns:225px minmax(300px,1fr) 270px}.left,.right{padding:18px 13px}}@media(max-width:850px){.app{grid-template-columns:1fr;grid-template-rows:58px 480px auto auto}.top{grid-column:1;padding:0 15px}.topright .pill:first-child{display:none}.left,.right{max-height:none;border:0;border-top:1px solid #2c3753}.left{grid-row:3}.right{grid-row:4}.stage{grid-row:2;min-height:480px}.topright{font-size:10px}.stage-head{top:15px;left:15px}.move-indicator{top:14px;right:14px}}@media(max-width:440px){.toolbar button{min-width:30px;padding:7px}.stage{min-height:440px}.topright .pill{padding:6px;font-size:10px}}

.coach-panel{border:1px solid #425178;background:linear-gradient(150deg,#1c2b4e,#111c33);padding:15px;border-radius:15px;margin:0 0 22px}.coach-panel h3{margin:0 0 11px;color:#c3baff}.coach-intro{font-size:12px;color:#aebbd5;line-height:1.6;margin:10px 0 14px}.coach-step{background:#0d172b;border:1px solid #334566;border-radius:12px;padding:13px;margin:12px 0}.coach-step span{font-size:11px;color:#9ca9c7}.coach-symbol{font:700 45px 'Space Grotesk',sans-serif;color:#a99cff;margin:8px 0}.coach-step strong{display:block;font-size:14px}.coach-step p{font-size:12px;color:#adbad4;line-height:1.65}.coach-feedback{font-size:12px;line-height:1.5;color:#b9e9d2;border-top:1px solid #30415f;padding-top:10px;margin-top:10px}.coach-panel .buttons .btn{font-size:12px}

/* Mobile-first cube workspace: fixed 3D canvas + native-style control sheets. */
.mobile-nav,.mobile-actions,.mobile-shade,.mobile-sheet-head{display:none}
@media(max-width:850px){
 html,body,#app{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
 .app{height:100dvh;min-height:0;display:grid;grid-template-columns:100%;grid-template-rows:56px minmax(0,1fr);overflow:hidden}
 .top{height:56px;padding:0 16px;background:#0e1829;grid-row:1;grid-column:1}
 .brand{font-size:19px;white-space:nowrap}.brand span:last-child{display:none}
 .topright{display:none}
 .stage{grid-column:1;grid-row:2;min-height:0;height:calc(100dvh - 56px);background:radial-gradient(ellipse at 50% 35%,#27395c,#101a30 54%,#081120 100%)}
 .stage-head{top:16px;left:16px}.stage-head strong{font-size:14px}.stage-head p{font-size:11px;margin-top:4px}
 .move-indicator{top:16px;right:15px;padding:7px 10px;font-size:11px}
 .stage-bottom{bottom:156px;gap:6px}.stage-bottom .toolbar{display:none}.stage-bottom .status{padding:7px 12px;font-size:11px;max-width:84%;background:#111e35bb}
 .mobile-nav{display:grid;position:fixed;z-index:105;bottom:0;left:0;right:0;grid-template-columns:repeat(3,1fr);background:#0e192e;border-top:1px solid #34455c;padding:7px 10px calc(8px + env(safe-area-inset-bottom));gap:8px;box-shadow:0 -9px 25px #0005}
 .mobile-nav button{border:0;border-radius:12px;color:#b5c5df;background:transparent;padding:9px 3px;display:flex;flex-direction:column;gap:3px;align-items:center;font-size:11px;font-weight:700;min-height:48px}.mobile-nav button span{font-size:20px;line-height:1}.mobile-nav button.active{color:#fff;background:#314568}
 .mobile-actions{display:grid;grid-template-columns:1fr 1fr 1fr;position:fixed;z-index:4;bottom:calc(83px + env(safe-area-inset-bottom));left:14px;right:14px;gap:9px}.mobile-actions button{min-height:49px;border-radius:14px;border:1px solid #617392;color:white;background:#182b48e8;box-shadow:0 6px 20px #0006;font-size:13px;font-weight:700}.mobile-actions button.action-main{background:#7769e9;border-color:#a19afa}
 .left,.right{display:none;position:fixed;z-index:110;bottom:calc(68px + env(safe-area-inset-bottom));left:0;right:0;top:auto;max-height:min(72dvh,660px);min-height:220px;overflow:auto;overscroll-behavior:contain;border:1px solid #3b516d;border-bottom:0;border-radius:20px 20px 0 0;background:#101d32;padding:54px 20px 28px;box-shadow:0 -14px 50px #000a;scrollbar-width:thin}
 .app.mobile-moves .left,.app.mobile-learn .right{display:block;grid-row:auto}
 .mobile-shade{display:none;position:fixed;z-index:108;inset:56px 0 calc(66px + env(safe-area-inset-bottom));background:#0307149c}.app.mobile-moves .mobile-shade,.app.mobile-learn .mobile-shade{display:block}
 .mobile-sheet-head{display:flex;position:sticky;top:-54px;z-index:3;align-items:center;justify-content:space-between;height:47px;margin:-54px -20px 17px;padding:0 20px;background:#16253e;border-bottom:1px solid #334662;border-radius:20px 20px 0 0;color:#fff;font-weight:700}.mobile-sheet-head button{width:36px;height:36px;border-radius:10px;color:#fff;background:#293d59;border:0;font-size:20px}
 .buttons{gap:10px}.btn{min-height:46px;font-size:14px}.field select{min-height:48px;font-size:16px}.coach-panel{margin:0 0 20px}.coach-step p,.coach-intro{font-size:13px}.coach-panel .buttons .btn{font-size:13px}.right .statrow{margin-top:14px}
 .back-site{position:fixed!important;right:10px!important;top:64px!important;bottom:auto!important;font-size:11px!important;padding:7px 10px!important;z-index:5!important;opacity:.85}
}
@media(max-width:390px){.mobile-actions{gap:6px;left:9px;right:9px}.mobile-actions button{font-size:12px;padding:6px}.stage-head p{max-width:170px}}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}

/* Version 3 mobile: keep the puzzle in sight while using all settings. */
@media(max-width:850px){
 .app.mobile-moves .stage,.app.mobile-learn .stage{height:calc(100dvh - 56px);}
 .app.mobile-moves .left,.app.mobile-learn .right{top:auto;bottom:calc(66px + env(safe-area-inset-bottom));height:min(37dvh,365px);min-height:0;max-height:none;z-index:110;border-radius:22px 22px 0 0;padding-bottom:26px;background:#12213a;box-shadow:0 -6px 30px #0009}
 .app.mobile-moves .mobile-shade,.app.mobile-learn .mobile-shade{display:none}
 .app.mobile-moves .stage-head,.app.mobile-learn .stage-head{top:13px}
 .app.mobile-moves .move-indicator,.app.mobile-learn .move-indicator{top:12px}
 .app.mobile-moves .stage-bottom,.app.mobile-learn .stage-bottom{bottom:calc(37dvh + 80px)}
 .mobile-feedback{display:flex;position:absolute;z-index:8;left:14px;right:14px;bottom:calc(146px + env(safe-area-inset-bottom));align-items:center;gap:9px;justify-content:center;min-height:40px;padding:9px 12px;border:1px solid #4c617e;border-radius:13px;background:#0d1c33e8;color:#f2f6ff;font-size:12px;line-height:1.3;text-align:center;pointer-events:none;box-shadow:0 8px 24px #0005}
 .mobile-feedback-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#62e0a3;box-shadow:0 0 9px #62e0a3}
 .app.mobile-moves .mobile-feedback,.app.mobile-learn .mobile-feedback{bottom:calc(37dvh + 76px);left:24px;right:24px}
 .stage-bottom .status{display:none}
 .mobile-sheet-head{border-radius:20px 20px 0 0}
 .left h3,.right h3{margin-top:17px}
 .mobile-actions{bottom:calc(78px + env(safe-area-inset-bottom))}
 .mobile-actions button{min-height:54px}
 .app.mobile-moves .stage canvas,.app.mobile-learn .stage canvas{touch-action:none}
}
@media(max-width:440px){
 .app.mobile-moves .left,.app.mobile-learn .right{height:35dvh}
 .app.mobile-moves .stage-bottom,.app.mobile-learn .stage-bottom{bottom:calc(35dvh + 75px)}
 .app.mobile-moves .mobile-feedback,.app.mobile-learn .mobile-feedback{bottom:calc(35dvh + 75px)}
}
@media(min-width:851px){.mobile-feedback{display:none}}