@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--bg:#111412;--panel:#191d19;--line:#30352c;--muted:#939c8c;--ink:#f3f5e9;--lime:#d8ff3e;--accent:#d8ff3e;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;font-size:14px}button,a,input,select{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;background:none;border:1px solid var(--line);border-radius:7px;padding:10px 16px;transition:background .18s,transform .18s,border-color .18s}button:hover{background:#30372a;border-color:#747d63}button:active{transform:translateY(1px)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--lime);outline-offset:4px}.shell{max-width:1376px;padding:0 48px;margin:auto}header{height:94px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:18px}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink);font-family:'Barlow Condensed',Impact,sans-serif;font-size:27px;font-weight:800;white-space:nowrap}.brand-mark{width:27px;height:27px;display:flex;gap:5px;align-items:center;background:var(--lime);border:2px solid #eaff9a;transform:rotate(-8deg);justify-content:center}.brand-mark i{width:5px;height:7px;background:#1a2110}.edition{font:9px 'DM Sans',sans-serif;letter-spacing:1.3px;color:var(--muted);margin-left:12px}nav{display:flex;gap:10px}.nav{border:0;color:var(--muted);font-weight:600;padding:10px 15px}.nav.active{background:#252c1c;color:var(--lime)}.nav span{margin-left:7px}.sound{border:0;font-size:18px}.sound span{font-size:12px;margin-left:7px}.heading{display:flex;align-items:end;justify-content:space-between;padding:37px 0 26px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:9px}.live-dot,.green-dot{display:inline-block;width:6px;height:6px;background:var(--lime);border-radius:50%}.live-dot{box-shadow:0 0 12px #d8ff3e55}h1{font-family:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;font-size:64px;line-height:1.05;letter-spacing:-1px;text-transform:uppercase;margin:10px 0 0;font-weight:800}h1 em{font-style:normal;color:var(--lime)}.heading>p{font-size:13px;line-height:1.8;color:var(--muted);margin:0 0 3px}.game-frame{position:relative;border:1px solid #444e31;border-radius:12px;overflow:hidden;background:#182010}.game-top,.game-bottom{display:flex;align-items:center;justify-content:space-between;background:#1b2116;padding:14px 21px;gap:12px;font-size:10px;letter-spacing:1.2px}.game-top>span{display:flex;align-items:center;gap:12px}.game-top b{font-size:10px}.tag{border:1px solid #465039;padding:4px 6px;border-radius:3px;color:#b8c5a5;font-size:8px}.hud-progress{display:flex;gap:10px;align-items:center;width:28%}.hud-progress>div{background:#39412e;height:4px;flex:1;border-radius:5px;overflow:hidden}.hud-progress i{display:block;height:100%;width:0;background:var(--accent)}.hud-progress b{width:32px}.hud-right{color:#bdc6b1}#pauseBtn{padding:3px 8px;font-size:12px;border-color:#454f37}.game-bottom{border-top:1px solid #424e2c;color:#a2b18d;padding:12px 21px;font-size:9px}.game-bottom>span{display:flex;align-items:center;gap:8px}.bars{color:var(--lime);font-style:normal;font-size:15px;line-height:1}canvas{display:block;width:100%;touch-action:none;outline:none}#game{aspect-ratio:1120/420}.overlay{position:absolute;inset:55px 0 36px;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,#17200cbb,#17200c22,#17200c88);text-align:center}.overlay-card{padding:15px;min-width:260px;max-height:100%;overflow:auto}.overlay .eyebrow{justify-content:center;color:#b4c58e;font-size:9px}.overlay h2{font-family:'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;font-size:60px;line-height:.95;margin:14px 0;letter-spacing:.2px}.overlay p{color:#b7c39f;font-size:12px;margin:0 0 21px}.primary{color:#182007;background:var(--lime);border:1px solid var(--lime);font-weight:800;padding:14px 23px;border-radius:6px}.primary:hover{background:#e5ff80;border-color:#e5ff80}.primary span{margin-left:45px}.overlay-sub{margin-top:14px;font-size:8px;letter-spacing:1.6px;color:#8f9f75}.text-btn{border:0;font-size:12px;margin-top:8px}#toast{position:absolute;bottom:63px;left:50%;transform:translateX(-50%);color:#162004;background:var(--lime);border-radius:20px;padding:8px 18px;font-size:11px;opacity:0;transition:opacity .15s;pointer-events:none}.control-row{padding:18px 0;display:flex;align-items:center;justify-content:space-between;gap:15px}.key-guide{display:flex;gap:9px;align-items:center;font-size:10px;color:var(--muted)}kbd{font:9px 'DM Sans',sans-serif;border:1px solid #454a3e;border-bottom-width:2px;border-radius:4px;padding:4px 6px;color:#d2d8c7}.divider{height:14px;width:1px;background:var(--line);margin:0 9px}.toggles{display:flex;align-items:center;gap:18px;font-size:11px;color:#b9c2ad}.toggles label{display:flex;gap:6px;align-items:center;cursor:pointer}input[type=checkbox]{accent-color:var(--lime);width:14px;height:14px}.toggles button{padding:5px 8px;font-size:10px}.section-title{display:flex;align-items:center;justify-content:space-between;margin:17px 0 15px}.section-title h2{font-size:15px;margin:0;font-weight:600}.section-title h2 span{margin-left:10px;color:var(--muted);font-size:8px;letter-spacing:1.1px}.section-title>span{font-size:8px;letter-spacing:1.1px;color:var(--muted)}.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.level{position:relative;text-align:left;padding:19px;background:#191d19;border:1px solid #353d2e;border-radius:9px;overflow:hidden}.level.selected{border-color:var(--level);background:color-mix(in srgb,var(--level) 7%,#151914)}.level-top{display:flex;align-items:center;justify-content:space-between}.difficulty{font-size:8px;letter-spacing:1.5px;color:var(--level)}.difficulty:before{content:'●';margin-right:5px}.level-no{font-size:10px;color:#7b876f;letter-spacing:1px}.level-middle{display:flex;align-items:center;gap:14px;margin:19px 0}.face{display:flex;justify-content:center;align-items:center;gap:6px;flex-shrink:0;width:38px;height:38px;border:2px solid var(--level);color:var(--level);transform:rotate(-8deg);box-shadow:inset 0 0 0 4px #191d19;background:color-mix(in srgb,var(--level) 20%,#191d19)}.face:before,.face:after{content:'';display:block;width:6px;height:8px;background:var(--level)}.level h3{margin:0;font-size:19px;font-weight:600;letter-spacing:-.5px}.level small{display:block;font-size:9px;color:var(--muted);margin-top:5px}.level .arrow{margin-left:auto;font-size:22px;color:var(--level)}.level-bottom{display:flex;justify-content:space-between;color:var(--muted);font-size:9px}.level-bottom b{color:#dce2d1;font-weight:500}.mini-progress{height:3px;background:#30382a;margin-top:9px;border-radius:3px;overflow:hidden}.mini-progress i{height:100%;display:block;background:var(--level)}.bottom-note{display:flex;justify-content:space-between;align-items:center;padding:22px 0 28px;color:var(--muted);font-size:10px}.bottom-note b{font-weight:500;color:#ccd5c0}.bottom-note button{padding:0;border:0;color:#d5ddc9;font-size:10px}.bottom-note button span{margin-left:6px}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;padding:23px 0 26px;font-size:8px;letter-spacing:1.2px;color:#a0ab94}.muted{color:#68745c;margin-left:10px}.footer-square{color:var(--lime);margin-left:8px}.hidden{display:none!important}dialog{color:var(--ink);background:#20261c;border:1px solid #53633b;border-radius:15px;padding:36px;max-width:540px;width:calc(100% - 32px)}dialog::backdrop{background:#090d09c9;backdrop-filter:blur(5px)}dialog h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:38px;line-height:1.1;text-transform:uppercase;margin:20px 0}dialog p,dialog li{font-size:13px;line-height:1.8;color:#bbc6ad}dialog li{margin-bottom:12px}dialog ul{padding-left:18px}.close{position:absolute;right:13px;top:12px;font-size:22px;border:0;padding:0 8px}.colors{display:flex;gap:12px;margin:25px 0}.colors button{width:42px;height:42px;border:3px solid transparent}.colors button.selected{border-color:white}.editor-panel{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel);margin-bottom:36px}.editor-fields{display:flex;align-items:end;gap:20px;padding:22px}.editor-fields label{font-size:9px;letter-spacing:1px;display:flex;flex-direction:column;gap:9px;color:var(--muted)}input:not([type=checkbox],[type=range]),select{background:#11170e;border:1px solid #424d35;border-radius:6px;padding:10px 12px;font:13px 'DM Sans',sans-serif;color:var(--ink)}.editor-fields label:first-child{flex:1}.tool-row{display:flex;gap:8px;padding:0 22px 20px;flex-wrap:wrap}.tool-row button{font-size:11px}.tool-row .selected{color:var(--lime);border-color:var(--lime);background:#323c21}#editor{background:#151e0f}.editor-scroll{display:flex;align-items:center;gap:20px;padding:16px 22px;font-size:9px;color:var(--muted)}.editor-scroll input{flex:1;accent-color:var(--lime)}.editor-actions{display:flex;gap:8px;padding:0 22px;align-items:center}.editor-actions p{flex:1;color:var(--muted);font-size:11px}.editor-actions button{font-size:11px}#editorMessage{padding:5px 22px 15px;color:#c1d79c;font-size:11px}
@media(min-width:1450px){.shell{padding-top:10px}.heading{padding-top:46px;padding-bottom:32px}h1{font-size:76px}}
@media(max-width:900px){.shell{padding:0 22px}.edition{display:none}header{height:78px}.heading>p{font-size:11px}h1{font-size:54px}.control-row{align-items:start;flex-direction:column}.overlay h2{font-size:48px}.level{padding:14px}.level h3{font-size:16px}.level-middle{gap:10px}.face{width:31px;height:31px}.editor-fields{flex-wrap:wrap;gap:12px}.editor-actions{flex-wrap:wrap}.editor-actions p{flex-basis:100%}}
@media(max-width:600px){.shell{padding:0 14px}header{height:70px;gap:6px;flex-wrap:wrap}.brand{font-size:22px}.brand-mark{width:23px;height:23px}.sound{padding:6px}.sound span{display:none}nav{gap:0}.nav{padding:8px;font-size:10px}#helpBtn{font-size:0}#helpBtn span{font-size:14px}.heading{padding:26px 0 20px}.heading>p{display:none}h1{font-size:52px}.eyebrow{font-size:8px}.game-top{padding:10px;font-size:8px;gap:5px}.game-top b{font-size:8px}.tag{display:none}.game-top>span{gap:5px}.hud-progress{width:24%;gap:6px}.hud-right{font-size:7px}#game{aspect-ratio:1.65}.game-bottom{padding:10px;font-size:7px}.overlay{inset:42px 0 30px}.overlay h2{font-size:39px;margin:8px 0}.overlay p{font-size:10px;margin:0 0 12px}.overlay .primary{padding:10px 17px}.overlay-sub{font-size:7px;margin-top:9px}.overlay .eyebrow{font-size:7px}.key-guide{gap:6px;font-size:8px}kbd{font-size:8px}.divider{margin:0 4px}.toggles{font-size:10px;gap:14px}.section-title>span{display:none}.section-title h2{font-size:13px}.levels{grid-template-columns:1fr;gap:10px}.level{padding:14px}.level-middle{margin:10px 0}.level-no{font-size:8px}.level h3{font-size:18px}.level-top{position:absolute;right:14px;top:14px;gap:14px}.level .arrow{margin-top:17px}.bottom-note{gap:12px;font-size:9px}footer{font-size:7px}.editor-fields{padding:15px}.editor-fields label:first-child{flex-basis:100%}.editor-fields input{width:100%}.tool-row{padding:0 15px 15px;gap:6px}.tool-row button{padding:8px;font-size:10px}.editor-scroll{padding:12px;gap:10px;font-size:8px}.editor-actions{padding:0 15px}.editor-actions button{padding:8px 10px}#editorMessage{padding-left:15px}dialog{padding:26px}.colors{gap:8px}}

.fly-button{position:absolute;right:18px;top:66px;bottom:auto;z-index:2;display:flex;gap:10px;align-items:center;min-width:180px;min-height:56px;text-align:left;background:linear-gradient(90deg,#244b42 var(--charge,100%),#1b2925 var(--charge,100%));border:1px solid #61e8df;color:#b5fff5;box-shadow:0 3px 18px #0005;touch-action:manipulation}.fly-button span:nth-child(2){flex:1}.fly-button b{display:block;font-size:11px;letter-spacing:.7px;font-variant-numeric:tabular-nums}.fly-button small{display:block;font-size:7px;letter-spacing:.7px;margin-top:5px;color:#a8c8c0}.fly-icon{font-size:25px}.fly-button kbd{color:#b5fff5;border-color:#568d83}.fly-button:disabled{cursor:default;transform:none}.fly-button.cooling{border-color:#56726b;color:#b5c8c2}.fly-button.flying{border-color:#b5fff5;box-shadow:0 0 20px #61e8df33}.fly-button:disabled:not(.flying):not(.cooling){opacity:.65}.fly-button:not(:disabled):hover{background:#306d60;border-color:white}@media(max-width:600px){.fly-button{right:10px;top:54px;bottom:auto;min-width:154px;min-height:48px;padding:8px 10px;gap:7px}.fly-button b{font-size:10px}.fly-button small{font-size:6px}.fly-button kbd{display:none}#toast{bottom:106px;max-width:90%;width:max-content;font-size:10px}}

#fullscreenBtn{display:flex;align-items:center;gap:6px;padding:4px 8px;font-size:14px;border-color:#596747;white-space:nowrap;color:#d8ff3e}#fullscreenLabel{font-size:9px;letter-spacing:0}#fullscreenBtn:disabled{cursor:wait}
body.game-fullscreen{overflow:hidden}body.game-fullscreen .shell>header,body.game-fullscreen .shell>footer,body.game-fullscreen #playView>:not(#gameFrame){display:none}
#gameFrame:is(.expanded,:fullscreen){position:fixed;inset:0;z-index:1000;width:100%;height:100vh;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0;margin:0;display:grid;grid-template-rows:54px minmax(0,1fr) 38px;background:#17200f}
#gameFrame:is(.expanded,:fullscreen) #game{width:100%;height:100%;min-height:0;aspect-ratio:auto;grid-row:2}
#gameFrame:is(.expanded,:fullscreen) .game-top{grid-row:1;padding:8px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));z-index:3;min-width:0}
#gameFrame:is(.expanded,:fullscreen) .game-bottom{grid-row:3;padding:8px 18px;min-width:0}
#gameFrame:is(.expanded,:fullscreen) .overlay{inset:54px 0 38px}
#gameFrame:is(.expanded,:fullscreen) .overlay-card{min-width:0;width:100%;max-width:500px}
#gameFrame:is(.expanded,:fullscreen) .fly-button{top:max(66px,env(safe-area-inset-top));bottom:auto;right:max(18px,env(safe-area-inset-right))}
#gameFrame:is(.expanded,:fullscreen) #toast{bottom:120px;max-width:90%;width:max-content;text-align:center}
@media(max-width:600px){#fullscreenLabel{display:none}#fullscreenBtn{padding:3px 7px;font-size:14px}.hud-right{gap:4px!important}#gameFrame:is(.expanded,:fullscreen) #attemptText{display:none}#gameFrame:is(.expanded,:fullscreen) .game-top{gap:7px;padding:8px 12px}#gameFrame:is(.expanded,:fullscreen) .hud-progress{width:22%}}
@media(max-height:480px){#gameFrame:is(.expanded,:fullscreen){grid-template-rows:42px minmax(0,1fr) 28px}#gameFrame:is(.expanded,:fullscreen) .overlay{inset:42px 0 28px}#gameFrame:is(.expanded,:fullscreen) .overlay h2{font-size:36px;margin:8px 0}#gameFrame:is(.expanded,:fullscreen) .overlay p{margin-bottom:10px}#gameFrame:is(.expanded,:fullscreen) .overlay .primary{padding:10px 20px}#gameFrame:is(.expanded,:fullscreen) .overlay-sub{margin-top:8px}#gameFrame:is(.expanded,:fullscreen) .fly-button{top:52px;bottom:auto;min-height:44px;padding:7px 12px}}

/* Volume 02 — midnight violet, brushed metal, and electric mint. */
.dimension-3d{--bg:#0b0d17;--panel:#151827;--line:#2b3047;--muted:#969fba;--ink:#f4f3ff;--lime:#bcacff;background:radial-gradient(ellipse at 80% 0,#29203b66,transparent 48%),#0b0d17}
.dimension-3d .brand-mark{background:#bcacff;border-color:#e3daff;box-shadow:4px 4px 0 #635795;transform:rotate(-7deg)}.dimension-3d .brand-mark i{background:#211c38}
.dimension-3d header{height:88px}.dimension-3d .nav.active{background:#28233f;color:#cdbdff}.dimension-3d .edition{color:#ada1ce}
.version-link{display:inline-flex;align-items:center;text-decoration:none}.classic-link{border:1px solid #4e4668;color:#d9ceff!important;font-size:11px}.mode-switch{color:#d5c5ff;border:1px solid #4d4669;border-radius:4px;padding:6px 8px;text-decoration:none;font-size:9px;letter-spacing:0;white-space:nowrap}
.dimension-3d h1{font-size:78px;letter-spacing:-.5px}.dimension-3d .heading{padding:36px 0 27px}.dimension-3d .game-frame{border-color:#514568;box-shadow:0 15px 60px #0005;background:#090c1c}.dimension-3d .game-top,.dimension-3d .game-bottom{background:#151727;color:#aab3ca;border-color:#3e3857}.dimension-3d .tag{border-color:#514965;color:#cabcea}.dimension-3d .game-top b{color:#ece7ff}.dimension-3d #game{aspect-ratio:2.35}.dimension-3d .hud-progress>div{background:#31354b}
.dimension-3d .overlay{justify-content:flex-start;text-align:left;background:linear-gradient(90deg,#0b1020ed 0%,#0b102070 40%,#0b102000 78%)}.dimension-3d .overlay-card{margin-left:6%;max-width:440px}.dimension-3d .overlay .eyebrow{justify-content:flex-start;color:#b3a2d9}.dimension-3d .overlay h2{font-size:67px;line-height:1;margin:16px 0}.dimension-3d .overlay p{color:#b9bfd5;line-height:1.7}.dimension-3d .overlay-sub{color:#929cb7}.dimension-3d .primary{background:#c1afff;border-color:#c1afff;color:#231c36}.dimension-3d .primary:hover{background:#ded2ff}.dimension-3d .game-bottom .green-dot{background:#77f4d7}.dimension-3d .bars{color:#a99aff}
.dimension-3d .level{background:linear-gradient(125deg,#1d2133,#121522);border-color:#343a52}.dimension-3d .level.selected{border-color:var(--level);background:linear-gradient(125deg,#2a2d40,#191d2d)}.dimension-3d .face{box-shadow:4px 4px 0 #080e1f;transform:rotate(-8deg) skewY(3deg)}.dimension-3d .mini-progress{background:#2b3044}.dimension-3d .editor-panel{background:#141827}.dimension-3d dialog{background:#171d31;border-color:#61547d}.dimension-3d .render-issue{position:absolute;left:20px;right:20px;bottom:45px;z-index:5;padding:14px;background:#33223e;color:#f4e9ff;border:1px solid #b692d9;border-radius:8px}.render-issue a{color:#cfbaff}
.dimension-3d #gameFrame:is(.expanded,:fullscreen) .overlay-card{max-width:500px;margin-left:6%}.dimension-3d #gameFrame:is(.expanded,:fullscreen) #game{aspect-ratio:auto}.dimension-3d #gameFrame:is(.expanded,:fullscreen) .overlay h2{font-size:clamp(40px,7vw,94px)}
@media(max-width:900px){.dimension-3d h1{font-size:62px}.dimension-3d .overlay h2{font-size:48px}.dimension-3d .overlay-card{margin-left:3%}.dimension-3d .game-top .hud-progress{width:20%}.dimension-3d #attemptText{display:none}.dimension-3d header{gap:8px}.dimension-3d nav{gap:2px}}
@media(max-width:600px){.dimension-3d header{height:auto;min-height:90px;padding:12px 0;flex-wrap:wrap}.dimension-3d nav{order:3;width:100%;justify-content:space-between}.dimension-3d .nav{font-size:10px;padding:8px 10px}.dimension-3d h1{font-size:56px}.dimension-3d .heading{padding:24px 0}.dimension-3d #game{aspect-ratio:1.3}.dimension-3d .overlay-card{min-width:0;max-width:95%;padding:14px}.dimension-3d .overlay h2{font-size:42px}.dimension-3d .overlay p{font-size:10px;margin-bottom:12px}.mode-switch{font-size:7px;padding:5px}.dimension-3d .game-top{gap:5px}.dimension-3d .game-top>span{gap:5px}.dimension-3d .game-top b{font-size:7px}.dimension-3d .game-top .hud-progress{width:18%}.dimension-3d #gameFrame:is(.expanded,:fullscreen) .overlay-card{margin-left:2%;max-width:96%}}
@media(max-height:480px){.dimension-3d #gameFrame:is(.expanded,:fullscreen) .overlay h2{font-size:38px}.dimension-3d #gameFrame:is(.expanded,:fullscreen) .overlay-card{padding:8px}.dimension-3d #gameFrame:is(.expanded,:fullscreen) .overlay p{margin-bottom:10px}}

.challenge-note{font-size:10px;color:#b9a8d5;line-height:1.7;letter-spacing:.3px;margin:0 0 15px}.challenge-note span{color:var(--ink);font-weight:600}.level-description{font-size:11px;line-height:1.6;color:var(--muted);min-height:36px;margin:0 0 16px}.level{display:flex;flex-direction:column}.level-bottom{margin-top:auto}.overlay-card{max-width:95%}.overlay .primary{max-width:100%}@media(max-width:600px){.level-description{min-height:0;margin:0 0 12px}.level-top{position:static}.level .arrow{margin-top:0}.challenge-note{font-size:9px}.overlay h2{overflow-wrap:anywhere}}

.heading:has(.cover-thumb){gap:24px;align-items:center}.cover-thumb{display:block;flex:0 0 280px;overflow:hidden;border:1px solid #7562a4;border-radius:12px;box-shadow:0 10px 32px #0005;line-height:0;transition:transform .2s,border-color .2s}.cover-thumb img{display:block;width:100%;height:auto}.cover-thumb:hover{transform:translateY(-3px);border-color:#82ffe5}.cover-thumb:focus-visible{outline:3px solid #c1afff;outline-offset:5px}@media(max-width:700px){.heading:has(.cover-thumb){flex-wrap:wrap;gap:18px}.cover-thumb{flex:0 1 100%;width:100%;max-width:420px}}@media(prefers-reduced-motion:reduce){.cover-thumb{transition:none}.cover-thumb:hover{transform:none}}
