:root{--olive: #2a3322;--olive-d: #1b2418;--bake: #17120e;--brass: #c9a24a;--brass-d: #7d5f22;--phos: #6dff8c;--amber: #ffb347;--red: #e8503a;--paper: #e8dfc4;font-family:Courier New,Courier,American Typewriter,monospace}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bake);color:var(--paper);overflow:hidden}button{font:inherit;color:inherit;cursor:pointer}#app{height:100vh;height:100dvh;display:grid;grid-template-rows:minmax(0,1fr) auto;position:relative;background:repeating-linear-gradient(45deg,var(--olive-d) 0 6px,#1f2a1b 6px 12px)}#app.shake{animation:shake .4s}@keyframes shake{20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-4px)}60%{transform:translate(-3px,2px)}}#viewport{width:100%;height:100%;display:block;min-height:0;border:10px solid var(--bake);border-bottom:14px solid var(--bake);box-shadow:inset 0 0 0 3px var(--brass-d),inset 0 0 40px #000;background:#111}#hud{position:absolute;top:18px;left:22px;right:22px;display:flex;gap:10px;align-items:flex-start;pointer-events:none}#hud .btn{pointer-events:auto;margin-left:auto}.plate{background:linear-gradient(#2c261d,#14100b);border:2px solid var(--brass-d);border-radius:4px;padding:6px 12px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 2px 6px #000a,inset 0 0 0 1px #000}.plate b{color:var(--amber);font-size:18px}.nixie{font-size:34px;color:#ff9a3c;text-shadow:0 0 10px #ff6a00,0 0 22px #ff6a0088;background:#0b0603;letter-spacing:.08em;min-width:118px;text-align:center;padding:2px 12px}.nixie.danger{color:#ff4a3a;text-shadow:0 0 12px #f00;animation:blink 1s steps(2) infinite}@keyframes blink{50%{opacity:.55}}#hull-bar{display:inline-block;width:90px;height:10px;background:#000;border:1px solid var(--brass-d);vertical-align:middle;margin:0 6px}#hull-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--amber),var(--phos));transition:width .3s}#alert{position:absolute;top:74px;left:50%;transform:translate(-50%);background:var(--red);color:#fff;padding:4px 22px;letter-spacing:.4em;font-weight:700;animation:blink .7s steps(2) infinite;pointer-events:none}#alert[hidden]{display:none}#console{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;padding:14px 22px 18px;background:linear-gradient(#26301f,#161c13);border-top:4px solid var(--brass-d);box-shadow:inset 0 6px 14px #0008}.panel{position:relative}#radar-panel{width:min(36vh,360px);aspect-ratio:1;padding:8px;border-radius:50%;background:radial-gradient(#3a3226,var(--bake));border:6px solid var(--brass);box-shadow:0 0 0 4px var(--bake),inset 0 0 18px #000,0 6px 14px #000a}#radar{width:100%;height:100%;border-radius:50%;display:block;filter:drop-shadow(0 0 6px #3f3a)}#radar-panel .label{position:absolute;bottom:-2px;left:50%;transform:translate(-50%);background:var(--bake);padding:0 10px;font-size:11px;letter-spacing:.3em;color:var(--brass)}#key-panel{display:grid;grid-template-columns:minmax(200px,1fr) auto;grid-template-areas:"ro key" "hint key" "ctl ctl";gap:8px 22px;align-items:center;background:var(--bake);border:3px solid var(--brass-d);border-radius:8px;padding:12px 18px;box-shadow:inset 0 0 20px #000}#readout{grid-area:ro;background:#050a05;border:2px inset #333;padding:8px 12px;font-size:18px;color:var(--phos);text-shadow:0 0 6px #2f6}#readout .row{display:flex;gap:10px;align-items:baseline;margin-bottom:2px}#readout .k{color:#3a8a4a;font-size:11px;letter-spacing:.15em}#readout .v{min-width:70px;font-size:26px;letter-spacing:.15em}#readout .msg{font-size:13px;min-height:18px;color:var(--paper);text-shadow:none}.msg.ok{color:var(--phos)}.msg.bad{color:var(--amber)}#hint{grid-area:hint;font-size:11px;color:var(--brass)}#hint div{display:flex;flex-wrap:wrap;gap:2px 12px}#hint b{color:var(--paper)}#hint[hidden]{display:none}#telegraph{grid-area:key;width:150px;height:120px;border-radius:14px 14px 30px 30px;border:4px solid var(--brass-d);background:radial-gradient(circle at 50% 28%,#f3d98a,var(--brass) 45%,var(--brass-d));color:#3a2a0a;letter-spacing:.25em;font-weight:700;box-shadow:0 10px #4a3510,0 14px 14px #000a,inset 0 2px 6px #fff8;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .03s,box-shadow .03s}#telegraph.down{transform:translateY(8px);box-shadow:0 2px #4a3510,0 4px 8px #000a,inset 0 2px 10px #0005}.controls{grid-area:ctl;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.btn{background:linear-gradient(#3a3224,#1a150e);border:2px solid var(--brass-d);border-radius:4px;padding:6px 12px;letter-spacing:.1em;font-size:12px;text-transform:uppercase}.btn:hover,.btn.on{border-color:var(--brass);color:var(--brass)}.btn.big{font-size:18px;padding:12px 26px;margin-top:12px}.wpm{margin-left:auto;font-size:11px;display:flex;gap:6px;align-items:center;letter-spacing:.1em}.overlay{position:absolute;inset:0;display:none;place-items:center;background:#000a;z-index:10;padding:16px}.overlay.show{display:grid}.card{max-width:560px;background:linear-gradient(#35402b,#1c2418);border:4px double var(--brass);padding:26px 30px;text-align:center;box-shadow:0 0 0 6px var(--bake),0 20px 50px #000}.card h1{margin:0 0 12px;letter-spacing:.3em;color:var(--brass);font-size:32px;text-shadow:2px 2px 0 #000}.card p{line-height:1.5;font-size:15px}.card .extra{color:var(--amber)}.overlay.win h1{color:var(--phos)}.overlay.lose h1{color:var(--red)}@media(max-width:760px),(max-aspect-ratio:1/1){#app{grid-template-rows:30dvh minmax(0,1fr)}#viewport{border-width:6px}#hud{top:8px;left:8px;right:8px;flex-wrap:wrap;gap:4px}.plate{padding:3px 7px;font-size:10px}.plate b{font-size:14px}.nixie{font-size:20px;min-width:76px}#hull-bar{width:50px}#alert{top:44px}#console{grid-template-columns:1fr;justify-items:center;padding:8px 10px;gap:8px;overflow-y:auto;align-content:start}#radar-panel{width:min(52vw,25dvh);padding:4px;border-width:4px}#key-panel{width:100%;grid-template-columns:1fr;grid-template-areas:"ro" "key" "ctl" "hint";justify-items:stretch;padding:8px 10px;gap:6px}#readout{padding:4px 8px;font-size:14px}#readout .v{font-size:20px;min-width:50px}#telegraph{width:100%;height:84px}.btn{padding:8px 10px}.wpm{margin-left:0}}#transmit{flex:1 1 100%;order:-1;font-size:18px;font-weight:700;padding:14px 20px;letter-spacing:.25em;background:linear-gradient(#d8b35a,#8a6626);color:var(--bake);border-color:var(--brass);box-shadow:0 4px #4a3510,0 6px 12px #000a,inset 0 1px #fff6}#transmit:hover{color:var(--bake);filter:brightness(1.1)}#transmit:active{transform:translateY(3px);box-shadow:0 1px #4a3510,inset 0 2px 6px #0006}.wpm b{color:var(--phos);min-width:2ch;text-align:right;text-shadow:0 0 6px var(--phos)}#wpm{-webkit-appearance:none;appearance:none;width:120px;height:8px;background:linear-gradient(#1a150e,#3a3224);border:1px solid var(--brass-d);border-radius:4px;box-shadow:inset 0 2px 3px #000c}#wpm::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:22px;border-radius:3px;background:radial-gradient(circle at 40% 30%,#4a3a28,var(--bake));border:2px solid var(--brass);box-shadow:0 2px 4px #000a;cursor:grab}#wpm::-moz-range-thumb{width:14px;height:18px;border-radius:3px;background:radial-gradient(circle at 40% 30%,#4a3a28,var(--bake));border:2px solid var(--brass);box-shadow:0 2px 4px #000a;cursor:grab}#wpm:focus-visible{outline:2px solid var(--brass);outline-offset:3px}.plate.danger b{color:var(--red);animation:blink 1s steps(2) infinite}#contacts{position:absolute;top:74px;left:22px;margin:0;list-style:none;pointer-events:none;display:grid;gap:3px;font-size:11px;min-width:210px}#contacts li{display:flex;justify-content:space-between;gap:14px}#contacts li span:last-child{color:var(--amber)}#contacts li.danger span:last-child{color:var(--red)}#contacts li.sunk{opacity:.45;text-decoration:line-through}@media(max-width:760px){#hud{flex-wrap:wrap;gap:4px}#contacts{top:auto;bottom:calc(70dvh + 6px);left:6px;min-width:0;font-size:9px;padding:3px 6px}}