:root{color-scheme:dark;--bg:#081317;--plate:#17282b;--edge:#3d504c;--accent:#ffc975;--paper:#f2e9d7;--muted:#b7c9c2;font:15px/1.45 "Segoe UI",system-ui,sans-serif;color:var(--paper);background:var(--bg)}
*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 77% 0,#393a2d 0,transparent 43%),linear-gradient(120deg,#101d23,#09151a 72%)}main{max-width:1450px;margin:auto;padding:0 clamp(12px,4vw,70px) 24px}header,.title,.status,footer,.energy{display:flex;align-items:center;justify-content:space-between;gap:10px}header{padding:14px 0;border-bottom:1px solid #35433f;font-size:12px}header span,.title small,.commands-title small,.zone{text-transform:uppercase;font-size:10px;font-weight:700;letter-spacing:2px;color:#dcb784}
a{color:#e5d7b9;text-decoration:none}a:hover{text-decoration:underline}button{font:inherit;color:inherit;background:#233437;border:1px solid #59665c;border-radius:3px;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:disabled{cursor:default}.title{margin:21px 0 17px}.title h1{font:700 clamp(34px,4.6vw,65px)/1.05 Georgia,serif;letter-spacing:-.04em;margin:4px 0 0}.title button,.status button{padding:5px 12px;font-size:12px}.layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(230px,24vw,330px);gap:14px;align-items:start}.game,aside{border:1px solid var(--edge);background:var(--plate);box-shadow:0 8px 28px #040a0e50}
.readouts{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;padding:12px 15px;background:linear-gradient(#293836,#1d2b2d)}.readouts>div{display:flex;flex-wrap:wrap;gap:3px;align-items:center;justify-content:space-between}.readouts span,.energy span{font-size:12px;color:var(--muted)}.readouts b,.energy b,#clock{font:600 12px/1.5 Consolas,monospace}progress{appearance:none;display:block;flex:0 0 100%;width:100%;height:5px;border:0;background:#101c20}progress::-webkit-progress-bar{background:#101c20}progress::-webkit-progress-value{background:#6ab7a3}progress::-moz-progress-bar{background:#6ab7a3}#boss-bar::-webkit-progress-value{background:#d78448}#boss-bar::-moz-progress-bar{background:#d78448}
#scene{overflow:hidden;position:relative;isolation:isolate;width:100%;aspect-ratio:1.94;background:#273239 url('assets/bocznica.webp') center/cover no-repeat}#scene:before{content:"";z-index:-1;position:absolute;inset:0;background:linear-gradient(0deg,#1013195c,transparent 56%)}.zone,#clock{position:absolute;z-index:2;top:12px;padding:4px 8px;background:#122021d9;border:1px solid #9883567d}.zone{left:12px;font-size:9px;letter-spacing:1.2px}#clock{right:12px;color:#efe3c9}#scene img{position:absolute;pointer-events:none;filter:drop-shadow(3px 5px 3px #0d1218b0)}
.semaphore{width:9%;height:36%;object-fit:contain;bottom:22%;left:4%}.bot{width:15%;transform-origin:bottom center}.taca{left:14%;bottom:23%}.lutka{left:23%;bottom:15%}.rygiel{left:34%;bottom:24%}.down{opacity:.35;transform:rotate(-10deg)}#crane{width:38%;right:3%;bottom:23%;transition:filter .18s}#scene.engaged .bot:not(.down){animation:engine 1.2s ease-in-out infinite alternate}#scene.engaged .taca{animation-delay:-.5s}#scene.engaged .lutka{animation-delay:-.82s}#scene.warning #crane{filter:drop-shadow(0 0 9px #ffa24c)}#guard{display:none;position:absolute;left:32%;bottom:23%;width:20%;height:30%;border:3px solid #98d9d4;border-radius:55%;box-shadow:inset 0 0 18px #86e4d46b,0 0 16px #86e4d43f}#guard.on{display:block}
#shot{position:absolute;left:37%;top:59%;width:29%;height:3px;transform:rotate(-6deg);background:#ffeea6;box-shadow:0 0 5px #ffb04e;opacity:0}#shot.fire{animation:bolt .2s both}#flash{position:absolute;inset:0;pointer-events:none}#flash.on{animation:flash .38s both}#overlay{position:absolute;inset:0;z-index:4;display:grid;align-content:end;justify-items:start;padding:clamp(14px,3vw,38px);background:linear-gradient(0deg,#0a151be8 6%,#07131a96 48%,#08101930 96%)}#overlay>div{max-width:465px}#overlay h2{margin:0;color:#fff0cf;font:600 clamp(23px,3vw,40px)/1.12 Georgia,serif}#overlay p{font-size:clamp(12px,1vw,15px);color:#e2e6d9;margin:7px 0 13px}.primary{background:#ffc575;color:#29251e;font-weight:700;padding:8px 15px;border:1px solid #ffdf9e}.status{padding:8px 13px;color:#dfd9c8;border-top:1px solid #6f634a;min-height:43px}.status span{font-size:13px}.status .danger{color:#ffd49a;font-weight:700}.status button:disabled{opacity:.45}
aside{padding:16px 17px}.commands-title h2{font:500 29px/1.2 Georgia;margin:2px 0 14px}.commands-title small{font-size:9px}.energy{flex-wrap:wrap;gap:4px}.energy progress::-webkit-progress-value{background:#ccb072}.energy progress::-moz-progress-bar{background:#ccb072}.hint,.report,footer p{color:var(--muted);font-size:12px}.buttons{display:grid;gap:6px}.buttons button{display:flex;align-items:center;gap:10px;text-align:left;padding:9px 10px;background:#354038;border-color:#9d8b63}.buttons button:disabled{background:#1a282a;border-color:#40504a;color:#9fad9e}.buttons button:enabled:hover{background:#51523b}.buttons button strong,.buttons button small{display:block}.buttons button strong{font-size:15px}.buttons button small{font-size:11px}kbd{font:11px Consolas;border:1px solid #79826a;padding:3px 5px;color:#c2bea6}.report{border-top:1px solid var(--edge);margin-top:13px;padding-top:10px;min-height:2.6em}.hint{margin:9px 0 12px}footer{border-top:1px solid #33433e;margin-top:15px;font-size:12px} [hidden]{display:none!important}
@keyframes bolt{0%{opacity:1;clip-path:inset(0 82% 0 0)}70%{opacity:1;clip-path:inset(0 0 0 20%)}100%{opacity:0;clip-path:inset(0 0 0 95%)}}@keyframes flash{0%{background:#ffeeae4f}100%{background:transparent}}@keyframes engine{0%{transform:translateY(0)}100%{transform:translateY(-1.4px)}}@media(prefers-reduced-motion:reduce){#scene.engaged .bot:not(.down),#shot.fire,#flash.on{animation:none!important}}
@media(max-width:820px){.layout{grid-template-columns:1fr}.buttons{grid-template-columns:repeat(3,minmax(0,1fr))}.buttons button{align-items:flex-start}.buttons button small{font-size:10px}.commands-title h2{font-size:22px;margin:0}.commands-title small{display:none}.commands-title{float:left}.energy{margin-left:135px}.hint{clear:both}.title{margin:14px 0}aside{padding:12px}.report{min-height:0}}
@media(max-width:570px){main{padding:0 9px 16px}header{padding:9px 0}.readouts{gap:10px;padding:8px}.readouts span,.readouts b{font-size:10px}.title h1{font-size:31px}.title small{font-size:8px}#scene{aspect-ratio:1.5}.zone,#clock{top:5px;font-size:9px}.buttons button{padding:7px 4px;gap:4px}.buttons button strong{font-size:11px}.buttons button small{font-size:10px}kbd{display:none}.status span{font-size:11px}.title{margin:10px 0}.layout{gap:8px}.report{font-size:11px}footer{align-items:flex-start;flex-wrap:wrap;padding:8px 0}footer p{margin:0}}
#rate{display:inline-block;margin-left:12px;padding:7px 0;font-size:13px;font-weight:650;color:#ffe4ad;text-decoration:underline;text-underline-offset:3px}
