:root{color-scheme:dark;font-family:"Nunito",system-ui,sans-serif;color:#edf2ff;background:#10132d}*{box-sizing:border-box}body{margin:0;min-height:100dvh}button,select{font:inherit;color:inherit;min-height:44px;border:2px solid #8892c0;border-radius:13px;background:#252b4c;padding:8px 13px;font-weight:800;cursor:pointer}button:focus-visible,select:focus-visible{outline:3px solid #ffe778;outline-offset:3px}button:disabled{opacity:.45;cursor:default}h1,h2,p{margin:0}h1{font-size:clamp(18px,3vw,25px)}h2{color:#9ef1e0;font-size:27px}header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px}nav,.actions{display:flex;gap:8px;flex-wrap:wrap}#app{height:100dvh;display:flex;flex-direction:column;max-width:1200px;margin:auto}#hud{display:flex;justify-content:space-between;gap:8px;padding:4px 14px;min-height:32px;font-weight:800;flex-wrap:wrap}#viewport{flex:1;min-height:160px;position:relative;overflow:hidden;margin:6px 10px;border-radius:20px;background:linear-gradient(#171b3c,#282044);border:1px solid #54618b}#game{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#vials{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--cols,4),1fr);grid-template-rows:repeat(var(--rows,1),1fr);gap:8px;padding:12px}#vials button{background:transparent;border:2px solid transparent;padding:0;min-width:44px;min-height:44px;color:#d0d4f2;display:flex;align-items:end;justify-content:center;font-size:14px}#vials button.selected{border-color:#ffe778;box-shadow:inset 0 0 18px #ffe77822}#vials button.hinted{border-color:#77f1df}footer{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;padding:2px 12px 9px}#notice{flex-basis:100%;text-align:center;min-height:23px;font-size:14px;color:#ffe778}.panel{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);max-width:calc(100vw - 22px);width:450px;max-height:calc(100dvh - 20px);overflow:auto;border:2px solid #88ddcf;border-radius:22px;background:#202642;box-shadow:0 0 0 100vmax #090b20bc;padding:20px;display:grid;gap:13px;z-index:3}.panel[hidden]{display:none}.panel label{display:flex;gap:10px;align-items:center;justify-content:space-between}.panel input{width:24px;height:24px;accent-color:#77f1df}.panel select{min-width:150px;max-width:66%}.actions button{flex:1}#status{color:#9ef1e0}@media(max-width:520px){header{align-items:start}nav{justify-content:end;gap:4px}nav button{font-size:12px;padding:6px 8px}#hud{font-size:12px}footer button{font-size:13px;padding:7px 9px}.panel{padding:16px}}@media(max-height:450px){header{padding:3px 10px}#hud{min-height:25px}footer{padding-bottom:3px}#notice{min-height:17px;font-size:12px}.panel{width:550px;gap:8px}#vials{padding:6px;gap:4px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

.cover{display:block;width:100%;border-radius:13px;aspect-ratio:16/9;object-fit:cover}#hud{display:grid;grid-template-columns:48px 1fr auto;grid-template-areas:"pip level status" "pip moves moves";align-items:center}#pip{grid-area:pip;width:48px;height:48px}#levelName{grid-area:level}#moves{grid-area:moves}#status{grid-area:status}#menu .cover{max-height:180px}

#resultPip{width:88px;height:88px;justify-self:center}

#chapters{list-style:none;padding:0;margin:0;display:grid;gap:6px;grid-template-columns:1fr 1fr}#chapters button{width:100%;height:100%;font-size:12px;text-align:left;padding:6px 8px}#chapters[hidden]{display:none}#records{display:grid;gap:10px}#hud>span{min-width:0}header{flex-wrap:wrap}#menu select{min-width:110px}#app{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}

.panel label{min-height:44px}.panel label>span{min-width:0;overflow-wrap:anywhere}nav button{overflow-wrap:anywhere}#menu select{flex-shrink:0}#levelName,#status{overflow-wrap:anywhere}@media(max-height:450px){#viewport{min-height:140px}}

button,select{min-width:44px}