*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{display:grid;grid-template-rows:auto 1fr auto;background:#091e20;color:#edf8dd;font:600 15px/1.3 system-ui,sans-serif;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
header,footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;background:#102e2b}h1{margin:0;font-size:clamp(22px,6vw,30px);color:#e0efcd}small{font-size:10px;letter-spacing:.12em;color:#a3d2a6}#clock{font-size:24px;color:#ffd080}
#stage{position:relative;min-height:0;outline:none;isolation:isolate;touch-action:none}canvas{display:block;width:100%;height:100%;touch-action:none}#chapter{position:absolute;top:12px;width:100%;text-align:center;color:#c4eab5;font-size:12px;pointer-events:none}
footer{min-height:85px}footer p{max-width:52%;margin:0;font-size:12px}footer div{display:flex;gap:6px}button{min-width:48px;min-height:48px;padding:8px;border:1px solid #bdcf89;border-radius:14px;background:#dfcb8d;color:#18382c;font:700 13px system-ui}button:focus-visible,#stage:focus-visible{outline:2px solid #fff3be;outline-offset:-3px}
#veil{position:absolute;inset:0;z-index:4;display:grid;place-content:center;text-align:center;background:#091e20ed}#veil[hidden]{display:none}@media(max-height:500px){header,footer{padding:4px 10px}footer{min-height:56px}h1{font-size:22px}#chapter{top:3px}}

.back{display:grid;place-items:center;min-width:44px;min-height:44px;color:#edf8dd;text-decoration:none;font-size:24px;border:1px solid #719d81;border-radius:14px}
header>div{flex:1}footer{display:grid;grid-template-columns:1fr;gap:5px;padding:8px 12px}footer p{max-width:none;min-height:32px}footer .controls{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}button{min-width:44px;min-height:44px;padding:6px;font-size:12px}.controls #motion{grid-column:span 2}.controls{grid-auto-flow:row}.controls #sound{grid-column:span 2}.controls #hint{grid-column:span 2}.controls #pause,.controls #reset{grid-column:span 2}
.storage{align-items:center;justify-content:space-between;font-size:11px;min-height:16px}footer [hidden],#veil [hidden]{display:none}dialog{max-width:min(92vw,420px);max-height:90dvh;overflow:auto;border:1px solid #c9e49c;border-radius:22px;background:#102e2b;color:#edf8dd;padding:20px;text-align:center}dialog::backdrop{background:#041515b8}dialog h2{margin:0 0 8px;font-size:23px}dialog p{font-size:14px}dialog button{margin:3px}#fern-preview{display:block;width:100%;height:150px;background:#091e20;border-radius:16px}.back:focus-visible{outline:2px solid #fff3be}
@media(min-width:600px){footer{grid-template-columns:1fr 2fr}footer .controls{grid-template-columns:repeat(5,1fr)}footer .controls button{grid-column:auto!important}.storage{grid-column:1/-1}footer p{align-self:center}}
@media(max-height:500px){footer{padding:4px 10px;gap:3px}footer p{font-size:11px;min-height:0}header{padding:3px 10px}#fern-preview{height:90px}dialog{padding:12px}}