:root{color-scheme:dark;font:16px/1.45 "Trebuchet MS",Arial,sans-serif;color:#e5edf6;background:#071525}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-height:100vh}#world{position:fixed;inset:0;width:100%;height:100%;z-index:-1;image-rendering:pixelated;opacity:.65}header{background:#081725ee;border-bottom:1px solid #375267}.bar{max-width:1100px;margin:auto;min-height:54px;padding:4px 20px;display:flex;align-items:center;gap:24px}
a{color:#b8e9ef}.brand{display:flex;align-items:center;gap:8px;font:18px Crossing,monospace;text-decoration:none;color:#e1f7ff}.brand img{width:30px}.bar nav{display:flex;gap:2px}.bar nav a{color:#b8cad5;text-decoration:none;text-transform:uppercase;font:bold 12px ui-monospace,monospace;padding:9px}.bar nav a[aria-current]{color:#061723;background:#99e4df}
main{max-width:810px;margin:0 auto;padding:26px 20px 20px}h1{margin:0 0 16px;font:clamp(26px,5vw,44px)/1.2 Crossing,monospace;color:#ffdc98;text-shadow:3px 3px #202a42}.field{position:relative;height:clamp(145px,24vh,235px);border:1px solid #4b7487;overflow:hidden;background:#193e54}.field canvas{width:100%;height:100%;image-rendering:pixelated}.hud{position:absolute;inset:10px 12px auto;display:flex;justify-content:space-between;pointer-events:none}.hud span{display:flex;align-items:baseline;gap:8px;background:#0a182bdd;padding:6px 10px;border:1px solid #4a6678;font:bold 11px ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#a8c9d5}.hud b{font:bold 19px ui-monospace,monospace;color:white;font-variant-numeric:tabular-nums}.hud #clock.low{color:#ffc086}
.panel,.journal{background:#0b1c2ef7;border:1px solid #3d5e72;padding:clamp(15px,3vw,26px)}.panel{border-top:0}h2{margin:0;font:18px/1.5 Crossing,monospace;color:#e1f6f4}.panel p{margin:8px 0 16px;color:#b6cbd5;max-width:65ch}.setup,form{display:flex;align-items:flex-end;gap:10px}.setup label{display:grid;gap:3px;color:#b3ccd8;font:12px ui-monospace,monospace}.setup select,input{border:1px solid #53788a;background:#081525;color:white;padding:10px 12px;min-height:42px;border-radius:3px;font:16px system-ui,sans-serif}button{border:0;border-bottom:3px solid #3c939b;padding:10px 18px;min-height:42px;cursor:pointer;color:#08222b;background:#9ae4dd;font:bold 15px system-ui,sans-serif;border-radius:3px}button:disabled{opacity:.6;cursor:wait}input{flex:1;min-width:0}#entry{margin-top:10px}#letters{color:#ffd38a}#feedback{min-height:1.4em;margin:8px 0 0;color:#a7e7de}#feedback.error{color:#ffbe9c}.journal{margin-top:12px}.history-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.journal h2{font:700 15px system-ui,sans-serif}.journal h2 span,#best{font:12px ui-monospace,monospace;color:#afc3d0}.journal ol{padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:6px;list-style:none}.journal ol:empty{margin:0}.journal li{padding:3px 8px;border:1px solid #375568;border-radius:2px;font:14px ui-monospace,monospace;overflow-wrap:anywhere}.journal li b{margin-left:7px;color:#f6d395}footer{margin-top:10px;font-size:12px}footer a{color:#b5c7d3}:focus-visible{outline:3px solid #ffcd83;outline-offset:2px}
@media(max-width:520px){main{padding:14px 10px}.bar{padding:4px 7px;gap:6px;justify-content:space-between}.brand{font-size:12px;gap:4px}.brand img{width:22px}.bar nav a{font-size:10px;padding:7px 5px}.setup,form{gap:6px}button{padding:10px 12px}h2{font-size:15px}.field{height:145px}}