:root{font-family:ui-rounded,"Segoe UI",system-ui,sans-serif;color:#edf3f8;background:#111a26;font-synthesis:none;color-scheme:dark;--gold:#ffd16e;--muted:#aebccd;--border:#405064;--panel:#233142}
*{box-sizing:border-box}body{margin:0;min-width:300px;background:radial-gradient(ellipse at 50% 30%,#314252 0,#172433 48%,#111a26 90%)}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{min-height:46px;padding:10px 17px;border:1px solid #536174;border-radius:12px;background:linear-gradient(#334354,#283546);color:#f5f8fc;cursor:pointer;font-weight:650;box-shadow:0 3px 0 #0b1523;touch-action:manipulation}button:hover{filter:brightness(1.12)}button:active{transform:translateY(2px);box-shadow:0 1px 0 #0b1523}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,canvas:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #93d4ff;outline-offset:4px}button.primary{background:linear-gradient(#ffe6a4,#f4bd51);color:#362710;border-color:#ffe19b;box-shadow:0 3px 0 #9e662a}.quiet{background:transparent;box-shadow:none;border-color:transparent}.icon-button{width:46px;height:46px;padding:4px;font-size:25px;flex:none}a{color:var(--gold);text-decoration:none}p{line-height:1.5}h1,h2,h3,p{margin:0}button[hidden],[hidden]{display:none!important}
.app{max-width:1020px;min-height:100svh;margin:auto;padding:0 max(18px,env(safe-area-inset-right)) 12px max(18px,env(safe-area-inset-left))}.topbar{height:86px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #44516580}.brand{display:flex;align-items:center;gap:12px;color:#f5edd9;letter-spacing:.1em;font-size:18px;font-weight:900;line-height:1.15}.brand b{color:var(--gold)}.brand small{display:block;font-size:8px;letter-spacing:.14em;margin-top:5px;color:var(--muted)}.top-actions{display:flex;gap:5px;align-items:center}.top-actions .quiet{padding:9px;white-space:nowrap}.top-actions .quiet span{font-size:23px;vertical-align:-2px;margin-right:4px}.game-layout{max-width:510px;margin:auto;display:grid;grid-template-areas:"brief" "stage" "controls";grid-template-rows:auto minmax(290px,1fr) auto;min-height:calc(100svh - 130px)}.brief{grid-area:brief;padding:20px 8px 15px}.chapter{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.14em;font-weight:750;color:var(--gold)}#completion-count{letter-spacing:0;color:var(--muted);font-weight:500}.level-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:7px 0}.level-heading h1{font-size:27px;letter-spacing:-.025em}.move-count{font-size:12px;border:1px solid #526070;background:#1a2733;padding:6px 10px;border-radius:20px;font-variant-numeric:tabular-nums;color:#cad6df}.brief p{font-size:13px;color:#ced8e1}.journey{height:3px;border-radius:4px;background:#455064;margin-top:14px;overflow:hidden}.journey>div{height:100%;background:var(--gold);width:0;transition:width .25s}
.stage{grid-area:stage;position:relative;isolation:isolate;border:1px solid #657487;border-radius:20px;overflow:hidden;box-shadow:0 18px 50px #0004,inset 0 0 0 4px #13202a;min-height:290px;background:#b0cbd8}.stage:after{content:"";position:absolute;inset:0;pointer-events:none;border:4px solid #26354480;border-radius:inherit}#game{display:block;width:100%;height:100%;position:absolute;inset:0;touch-action:none;outline-offset:-5px}.stage-message{position:absolute;inset:0;background:#182737ee;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:10px;padding:24px;z-index:3}.stage-message p{font-size:13px;color:var(--muted)}.spinner{width:30px;height:30px;border:3px solid #546377;border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}
.controls{grid-area:controls;padding:16px 0 6px}.control-row{display:flex;gap:9px}.control-row button{flex:1;min-width:0;white-space:nowrap;font-size:14px}.control-row button span{font-size:19px;vertical-align:-1px;margin-right:3px}.control-help{font-size:11px;color:#b6c4d2;text-align:center;margin:14px 0 5px}.accessible-controls{font-size:12px;color:#aebccd;text-align:center}.accessible-controls summary{cursor:pointer;min-height:30px;padding:6px}.accessible-controls #interactions{display:flex;flex-wrap:wrap;gap:8px;padding:10px}.accessible-controls button{font-size:12px;flex:1}.accessible-controls p{font-size:11px}.site-footer{display:flex;align-items:center;justify-content:center;gap:24px;font-size:11px;color:#9daebe;min-height:36px}.result{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background:#132333a6;backdrop-filter:blur(3px);z-index:4;padding:20px}.result-card{width:100%;max-width:320px;padding:24px;border:1px solid #b29e69;border-radius:20px;background:linear-gradient(155deg,#36444e,#1b2b3a);text-align:center;box-shadow:0 15px 35px #0005}.result-symbol{font-size:55px;color:var(--gold);line-height:1.2;text-shadow:0 4px 0 #7e5c32}.result-card #result-eyebrow{font-size:9px;letter-spacing:.18em;color:var(--gold);margin:12px 0 7px}.result-card h2{font-size:25px}.result-card p{font-size:13px;color:#c8d4e0}.result-card #result-detail{margin:10px 0 22px}.result-card button{display:block;width:100%;margin-top:8px}.toast{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);max-width:90%;padding:10px 16px;border-radius:12px;background:#1a283aef;color:#fff;text-align:center;font-size:13px;pointer-events:none;z-index:5;width:max-content;box-shadow:0 3px 14px #0003}
.setting select{min-height:46px;min-width:100px;border:1px solid #65758a;border-radius:9px;background:#1a283b;color:#fff;padding:8px;font:inherit}.answer-form{border:1px solid #53697d;border-radius:14px;background:#1b2e40ed;padding:12px;margin-bottom:12px}.gesture-controls{min-height:46px;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.gesture-controls button{flex:1;font-size:13px}.answer-form label{display:block;font-size:12px;margin-bottom:7px}.answer-form>div{display:flex;gap:8px}.answer-form input{min-width:0;width:100%;min-height:46px;font-size:18px;border:1px solid #8ca3b7;border-radius:9px;background:#f2f4f5;color:#1b2836;padding:8px}
dialog{width:min(580px,calc(100% - 26px));max-height:calc(100svh - 40px);padding:25px;border:1px solid #657485;border-radius:22px;background:linear-gradient(145deg,#2b3b4b,#192938);color:#eff4fa;box-shadow:0 25px 100px #0009}dialog::backdrop{background:#081321bb;backdrop-filter:blur(5px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}.dialog-heading h2{font-size:25px;letter-spacing:-.02em}.eyebrow{color:var(--gold);letter-spacing:.12em;font-size:9px;font-weight:700;margin-bottom:5px}.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.modes button{padding:12px 5px;font-size:12px;min-height:79px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px}.modes button span{font-size:10px;color:var(--muted);font-weight:400}.modes button[aria-pressed=true]{border-color:var(--gold);background:#655334;color:#ffe4a1}.modes button img{width:36px;height:31px;object-fit:contain}.level-toolbar{display:flex;align-items:center;justify-content:space-between;margin:24px 0 14px}.level-toolbar h3{font-size:16px}.level-toolbar label{font-size:11px;color:var(--muted);display:flex;gap:8px;align-items:center}.level-toolbar input{width:63px;min-height:42px;text-align:center;border:1px solid #6f7c87;border-radius:8px;background:#172536;color:#fff}.level-list{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.level-list button{padding:8px 2px;border-radius:10px;min-height:47px;font-variant-numeric:tabular-nums;font-size:14px;position:relative}.level-list button.complete{background:#284c45;border-color:#66ae92}.level-list button.complete:after{content:"✓";position:absolute;right:3px;top:0px;font-size:9px;color:#a8ebc8}.level-list button.current{outline:2px solid var(--gold);outline-offset:1px;color:var(--gold)}.pagination{display:flex;align-items:center;justify-content:space-between;margin-top:16px}.pagination span{font-size:12px;color:var(--muted)}.dialog-note{font-size:12px;color:var(--muted);margin-top:15px}.setting{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid #526071;font-weight:650;font-size:14px}.setting small{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:5px}.setting input{width:24px;height:24px;accent-color:var(--gold);flex:none}.save-buttons{display:flex;gap:9px;margin-top:24px}.save-buttons button{flex:1;font-size:13px;padding:10px 5px}.wide{width:100%;margin-top:25px}.more-games{display:block;font-size:12px;margin-top:25px}.reduced-motion *{animation:none!important;transition:none!important}
@media(min-width:900px){.game-layout{max-width:880px;min-height:700px;grid-template-areas:"brief stage" "controls stage";grid-template-columns:280px minmax(300px,460px);grid-template-rows:auto 1fr;gap:20px 45px;align-content:center;justify-content:center;padding:28px 0}.brief{align-self:end;padding:25px 0}.level-heading h1{font-size:38px}.brief p{font-size:15px}.chapter{font-size:11px}.controls{padding:5px 0;align-self:start}.control-row{flex-wrap:wrap}.control-row button.primary{flex-basis:100%;margin-top:5px}.stage{height:min(760px,calc(100svh - 170px));min-height:500px}.site-footer{justify-content:space-between}.topbar{height:94px}}
@media(max-height:600px) and (min-width:600px){.app{padding:0 15px}.topbar{position:absolute;left:20px;top:7px;width:calc(35% - 20px);height:49px;border:0}.brand{font-size:12px;gap:6px}.brand img{width:27px;height:31px}.brand small{display:none}.top-actions .quiet{font-size:0;padding:5px}.top-actions .quiet span{font-size:24px;margin:0}.top-actions .icon-button{width:40px;min-height:40px;height:40px;font-size:21px}.top-actions{gap:0}.game-layout{max-width:100%;height:100svh;min-height:0;grid-template-areas:"brief stage" "controls stage";grid-template-columns:32% 1fr;grid-template-rows:1fr 1fr;gap:0 20px;padding:12px 0}.brief{padding:52px 0 4px;align-self:end}.level-heading h1{font-size:24px}.brief p{font-size:11px}.chapter{font-size:8px;letter-spacing:.08em}.move-count{font-size:10px;padding:4px 6px}.journey{margin-top:10px}.controls{align-self:start;padding-top:13px}.control-row{gap:6px;flex-wrap:wrap}.control-row button{font-size:12px;padding:8px 4px;min-height:44px}.control-row .primary{flex-basis:100%}.control-help{font-size:10px;margin:10px 0 2px}.accessible-controls{font-size:10px}.stage{height:100%;min-height:0}.site-footer{display:none}.accessible-controls[open]{position:absolute;left:10px;bottom:8px;width:32%;background:#192a3b;z-index:5;padding:4px}}
@media(max-width:360px){.app{padding:0 10px 8px}.topbar{height:72px}.brand{font-size:14px;gap:7px}.brand img{width:30px}.brand small{font-size:6px}.top-actions .quiet{font-size:12px;padding:7px}.top-actions .icon-button{width:42px}.brief{padding:15px 4px 12px}.level-heading h1{font-size:24px}.brief p{font-size:12px}.control-row{gap:7px}.control-row button{font-size:12px;padding:9px 6px}.site-footer{gap:14px;font-size:10px}.game-layout{min-height:calc(100svh - 112px)}dialog{padding:18px}.dialog-heading h2{font-size:22px}.level-list{gap:7px;grid-template-columns:repeat(5,1fr)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}