:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#f0e4cf;background:#14271f;--copper:#d2ac70}
*{box-sizing:border-box}html,body,main{width:100%;height:100%;margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.6;cursor:wait}button,a{outline-offset:4px}button:focus-visible,a:focus-visible{outline:2px solid #ffcf85}[hidden]{display:none!important}
#world{display:block;position:absolute;inset:0;width:100%;height:100%;outline:none;touch-action:none}
#world:focus-visible{outline:2px solid #ffcf85;outline-offset:-2px}
header{position:absolute;top:0;left:0;right:0;padding:max(22px,env(safe-area-inset-top)) 30px 18px;display:flex;justify-content:space-between;align-items:center;gap:18px;background:linear-gradient(#0c1614e8,transparent);pointer-events:none;z-index:3}header a,header button{pointer-events:auto}
.brand{font:26px Georgia,serif;color:#f0e4cf;text-decoration:none;white-space:nowrap}.brand span{font:12px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#b6c6b7;margin-left:12px}
nav{display:flex;gap:8px}button{border:1px solid #d2ac7040;border-radius:3px;background:#172820ce;padding:11px 16px;min-height:44px}button:hover{background:#365343}button[aria-pressed=true]{border-color:#d2ac70;color:#ffe1ad}
#hud{position:absolute;top:max(88px,calc(env(safe-area-inset-top) + 68px));left:30px;right:30px;display:flex;gap:25px;align-items:center;color:#e2e9dc;font:13px/1.5 'Courier New',monospace;text-shadow:0 1px 5px #000;pointer-events:none}#objective{color:#ffcf85}#gravity{margin-left:auto;color:#c9d9c8}
#crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:24px/1 monospace;color:#ffffff70;text-shadow:0 0 3px #000;pointer-events:none}body[data-view=board] #crosshair{display:none}
#look-hint{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);font-size:12px;color:#becfbf;white-space:nowrap;text-shadow:0 1px 5px #000;pointer-events:none}
#message{position:absolute;top:140px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 40px);padding:9px 15px;border-radius:3px;background:#111e19db;color:#f4ce92;text-align:center;font-size:14px;pointer-events:none}#message:empty{display:none}
#panel{position:absolute;inset:0;display:flex;align-items:center;padding:110px 7vw 60px;background:linear-gradient(90deg,#111b16f5 0%,#111b16cf 42%,#111b1618 100%);z-index:4;overflow-y:auto}.panel-content{max-width:480px}.level-name{color:#d2ac70;font-size:14px;margin:0 0 20px}h1{font:normal clamp(42px,5vw,68px)/1.05 Georgia,serif;letter-spacing:-.035em;margin:0 0 27px}#panel-text,#panel-tip{font-size:16px;line-height:1.6;color:#cad6c9;max-width:420px}#panel-tip{color:#e2bc82;font-size:14px}.panel-actions{display:flex;gap:12px;margin-top:27px;flex-wrap:wrap}.primary{background:#d2ac70;color:#19251c;border-color:#d2ac70;font-weight:600;padding:14px 23px}.primary:hover{background:#e6c58e}.small{font-size:12px;line-height:1.6;color:#9ead9f;margin:22px 0}.back{color:#d9cbb1;font-size:13px;text-underline-offset:4px}
dialog{width:min(560px,calc(100vw - 28px));max-height:calc(100dvh - 40px);border:1px solid #d2ac7050;border-radius:5px;padding:34px;background:#17271f;color:#f0e4cf}dialog::backdrop{background:#07120dcc;backdrop-filter:blur(4px)}.close{position:absolute;right:10px;top:10px;font-size:25px;border:0;padding:0;width:44px;height:44px;background:transparent}h2{font:normal 33px/1.15 Georgia,serif;margin:0 0 18px}dialog p{font-size:14px;line-height:1.6;color:#bfccbc}dl{margin:20px 0}dl>div{display:grid;grid-template-columns:145px 1fr;gap:12px;border-bottom:1px solid #d2ac701c;padding:12px 0;font-size:13px}dd{margin:0;color:#bfccbc}.settings{display:flex;gap:9px;flex-wrap:wrap}.settings button{font-size:12px}.credits{font-size:11px!important;margin-top:24px}dialog a{color:#e1c79b}
#touch{display:none;position:absolute;inset:auto 16px max(16px,env(safe-area-inset-bottom));justify-content:space-between;align-items:end;pointer-events:none;z-index:2}.pad,.vertical{pointer-events:auto}.pad{display:grid;grid-template-columns:54px 54px 54px;grid-template-rows:54px 54px 54px;gap:4px;touch-action:none}.pad button{font-size:25px;padding:0;background:#243b2edb;border-color:#b9c59b55}.pad .forward{grid-area:1/2}.pad .left{grid-area:2/1}.pad .right{grid-area:2/3}.pad .backward{grid-area:3/2}.pad span{grid-area:2/2;background:#23362add;border:1px solid #d2ac7030;border-radius:50%}.vertical{display:flex;flex-direction:column;gap:7px}.vertical button{width:86px;min-height:48px;background:#243b2ee6;font-size:13px}.held{background:#d2ac70!important;color:#19251c}
@media(any-pointer:coarse){#touch{display:flex}#look-hint{bottom:210px;font-size:11px}#panel{padding-bottom:40px}body:not([data-state=playing]) #touch{visibility:hidden}}
@media(max-width:640px){header{padding:14px 14px 20px;align-items:start;gap:8px}.brand{font-size:21px}.brand span{display:block;margin:3px 0 0;font-size:10px}nav{gap:4px}nav button{font-size:11px;padding:8px 10px;min-height:44px}#hud{top:79px;left:15px;right:15px;font-size:11px;gap:9px}#position{font-size:10px}#message{top:112px;font-size:12px}#panel{padding:100px 26px 28px;background:#111b16d9}h1{font-size:43px}#panel-text{font-size:15px}.level-name{margin-bottom:12px}#panel-tip{font-size:13px}dialog{padding:28px 22px}dl>div{grid-template-columns:125px 1fr}}
@media(max-height:500px){header{padding:10px 18px}.brand{font-size:20px}.brand span{font-size:10px}nav button{font-size:11px;padding:8px 12px}#hud{top:62px;left:18px;right:18px;font-size:11px}#message{top:87px}#panel{padding:75px 5vw 20px;align-items:start}.panel-content{max-width:650px}h1{font-size:36px;margin-bottom:12px}h1 br{display:none}.level-name{display:none}#panel-text{font-size:13px;margin:8px 0;max-width:550px}#panel-tip{font-size:12px;max-width:550px}.panel-actions{margin-top:12px}.small{margin:9px 0}#look-hint{bottom:20px}#touch{inset:auto 12px 12px}.pad{grid-template-columns:46px 46px 46px;grid-template-rows:46px 46px 46px;gap:3px}.vertical{gap:4px}.vertical button{min-height:44px}#hud{pointer-events:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
@media(max-width:640px) and (min-height:501px){#hud{display:grid;grid-template-columns:1fr auto;gap:2px 12px}#position{grid-column:1;grid-row:2}#gravity{grid-column:2;grid-row:1/3;align-self:center}#message{top:128px}}
#orientation{position:absolute;top:116px;left:30px;right:30px;display:flex;align-items:center;gap:20px;padding:8px 12px;background:#0c1816df;border-left:2px solid #d2ac70;color:#cfdbcf;font-size:12px;line-height:1.5;pointer-events:none}
#hud{background:#0c1816df;box-shadow:0 0 0 6px #0c1816df;border-radius:2px}
#save-status{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);padding:8px 12px;background:#14271fe8;border:1px solid #d2ac70;color:#ffe1ad;border-radius:3px;font-size:12px;text-align:center;pointer-events:none;z-index:5}body[data-storage=unavailable] #look-hint{display:none}@media(any-pointer:coarse){body[data-state=playing] #save-status{bottom:210px}}@media(max-height:500px){body[data-state=playing] #save-status{bottom:12px;max-width:calc(100vw - 320px);font-size:10px}}
#look-hint{white-space:normal;width:max-content;max-width:calc(100vw - 32px);text-align:center}
#player-marker{display:none;position:absolute;transform:translate(-50%,-140%);padding:3px 7px;background:#14271fe8;border:1px solid #d2ac70;color:#ffe1ad;border-radius:3px;font-size:11px;pointer-events:none}body[data-view=board][data-state=playing] #player-marker{display:block}
#heading{color:#e6c58e;white-space:nowrap}#target-info{margin-left:auto;text-align:right}#legend{display:none;margin-left:auto;gap:15px;flex-wrap:wrap}#legend span{display:flex;align-items:center;gap:6px}#legend span::before{content:'';width:10px;height:10px;border-radius:50%;background:#d44423;border:1px solid #f0e4cf80}#legend .infotron::before{background:#d94829;box-shadow:0 0 0 2px #a4b1aa}#legend .rock::before{background:#a4b1aa}#legend .circuit::before{background:#235642;border-radius:1px}#legend .exit::before{background:#ffaa68}body[data-view=board] #legend{display:flex}body[data-view=board] #target-info{display:none}body:not([data-state=playing]) #orientation{visibility:hidden}
#message{top:169px}
@media(max-width:640px){#orientation{top:117px;left:15px;right:15px;font-size:11px;flex-direction:column;align-items:start;gap:4px;padding:7px 9px}#target-info{margin:0;text-align:left}#legend{margin:0;gap:8px 13px}#message{top:196px}}
@media(max-height:500px){#orientation{top:84px;left:18px;right:18px;font-size:10px;flex-direction:row;align-items:center;gap:10px;padding:5px 8px}#target-info{margin-left:auto;text-align:right}#legend{margin-left:auto;gap:10px}#message{top:132px}}
:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--header-top:max(22px,var(--safe-top));--edge-left:max(30px,calc(var(--safe-left) + 12px));--edge-right:max(30px,calc(var(--safe-right) + 12px))}
header{padding-top:var(--header-top);padding-left:var(--edge-left);padding-right:var(--edge-right)}#hud{top:calc(var(--header-top) + 66px);left:var(--edge-left);right:var(--edge-right)}#orientation{top:calc(var(--header-top) + 94px);left:var(--edge-left);right:var(--edge-right)}#message{top:calc(var(--header-top) + 147px)}
#panel{padding-top:max(110px,calc(var(--safe-top) + 88px));padding-bottom:max(60px,calc(var(--safe-bottom) + 20px));padding-left:max(7vw,calc(var(--safe-left) + 30px));padding-right:max(7vw,calc(var(--safe-right) + 30px))}dialog{inset:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);width:min(560px,calc(100vw - 28px - var(--safe-left) - var(--safe-right)));max-height:calc(100dvh - 40px - var(--safe-top) - var(--safe-bottom))}
#touch{left:max(16px,calc(var(--safe-left) + 12px));right:max(16px,calc(var(--safe-right) + 12px));bottom:max(16px,var(--safe-bottom))}#look-hint,#save-status{bottom:max(25px,calc(var(--safe-bottom) + 12px));max-width:calc(100vw - 32px - var(--safe-left) - var(--safe-right))}
@media(any-pointer:coarse){#look-hint,body[data-state=playing] #save-status{bottom:calc(210px + var(--safe-bottom))}#panel{padding-bottom:max(40px,calc(var(--safe-bottom) + 14px))}}
@media(max-width:640px){:root{--header-top:max(14px,var(--safe-top));--edge-left:max(15px,calc(var(--safe-left) + 12px));--edge-right:max(15px,calc(var(--safe-right) + 12px))}header{padding-left:max(14px,calc(var(--safe-left) + 12px));padding-right:max(14px,calc(var(--safe-right) + 12px))}#hud{top:calc(var(--header-top) + 65px)}#orientation{top:calc(var(--header-top) + 103px)}#message{top:calc(var(--header-top) + 182px)}#panel{padding-top:max(100px,calc(var(--safe-top) + 86px));padding-bottom:max(28px,calc(var(--safe-bottom) + 14px));padding-left:max(26px,calc(var(--safe-left) + 14px));padding-right:max(26px,calc(var(--safe-right) + 14px))}}
@media(max-height:500px){:root{--header-top:max(10px,var(--safe-top));--edge-left:max(18px,calc(var(--safe-left) + 12px));--edge-right:max(18px,calc(var(--safe-right) + 12px))}header{padding-left:var(--edge-left);padding-right:var(--edge-right)}#hud{top:calc(var(--header-top) + 52px)}#orientation{top:calc(var(--header-top) + 74px)}#message{top:calc(var(--header-top) + 122px)}#touch{left:max(12px,calc(var(--safe-left) + 12px));right:max(12px,calc(var(--safe-right) + 12px));bottom:max(12px,var(--safe-bottom))}#panel{padding-top:max(75px,calc(var(--safe-top) + 65px));padding-bottom:max(20px,calc(var(--safe-bottom) + 12px));padding-left:max(5vw,calc(var(--safe-left) + 18px));padding-right:max(5vw,calc(var(--safe-right) + 18px))}#look-hint{bottom:max(20px,calc(var(--safe-bottom) + 12px))}}
@media(any-pointer:coarse) and (max-height:500px){#message,#look-hint,body[data-state=playing] #save-status{left:calc(174px + var(--safe-left));right:calc(112px + var(--safe-right));transform:none;width:auto;max-width:none}#look-hint,body[data-state=playing] #save-status{bottom:max(20px,calc(var(--safe-bottom) + 12px))}}