.vf{--bg:#e7f4ff;--card:#f6fcff;--line:#b5d5e8;--text:#16476a;--muted:#486e87;--gold:#1686b5;max-width:1260px;margin:28px auto;padding:0 18px 30px;color:var(--text);font-family:Nunito,"Segoe UI",sans-serif}.vf *{box-sizing:border-box}.vf [hidden]{display:none!important}.vf-heading{padding:32px;border-radius:22px 22px 0 0;background:radial-gradient(ellipse at 85% 40%,#28556b 0,transparent 50%),linear-gradient(125deg,#172743,#101b2b);display:flex;justify-content:space-between;align-items:center;gap:20px;border:1px solid var(--line)}.vf h1{font-size:clamp(2.6rem,5vw,4.8rem);letter-spacing:.12em;line-height:1;margin:14px 0;color:#f2f5f7;font-weight:900}.vf h2{font-size:1.25rem;line-height:1.3;margin:6px 0 14px}.vf h3{font-size:1rem}.vf p{line-height:1.6}.vf-heading p:last-child{color:var(--muted);margin-bottom:0}.vf-kicker{font-size:.67rem;font-weight:900;letter-spacing:.16em;color:#36799d;margin:0}.vf-tag{padding:9px 13px;border:1px solid #608c93;border-radius:5px;background:#1f4145;color:#c8f1df;font-size:.7rem;font-weight:900;white-space:nowrap;letter-spacing:.07em}.vf button,.vf input,.vf select{font:inherit}.vf button{border:1px solid #49627d;background:#203750;color:var(--text);padding:10px 13px;border-radius:7px;cursor:pointer;font-size:.85rem;font-weight:800}.vf button:hover:not(:disabled){background:#2c4b67}.vf button:disabled{opacity:.43;cursor:default}.vf .vf-primary{background:#1686b5;color:#172539;border-color:#f3ce92}.vf .vf-primary:hover:not(:disabled){background:#f6cf91}.vf label{display:block;font-size:.78rem;font-weight:800;color:#16476a}.vf input:not([type=range]),.vf select{width:100%;min-width:0;background:#fcfeff;color:var(--text);border:1px solid #9fc7df;border-radius:6px;padding:9px;margin-top:5px}.vf select{max-width:100%}.vf a{color:#086591}.vf :focus-visible{outline:3px solid #0875ac;outline-offset:3px}.vf-connection{background:var(--card);border:1px solid var(--line);padding:24px 30px;display:grid;grid-template-columns:1fr 1fr;gap:30px}.vf-connection p{margin:7px 0;font-size:.9rem;color:var(--muted)}.vf-connection a{font-size:.85rem}.vf-connect-actions{display:grid;gap:14px;align-content:center}.vf-join{display:flex;gap:8px;align-items:end}.vf-join input{letter-spacing:.08em;text-transform:uppercase;font-family:monospace}.vf-room{display:flex;align-items:center;gap:13px;flex-wrap:wrap;border:1px solid var(--line);background:#dcefff;padding:14px 22px;font-size:.8rem}.vf-room strong{color:#086591;letter-spacing:.07em;font-family:monospace}#leave{margin-left:auto}.vf-status{padding:12px 22px;background:#e8f6ff;margin:0!important;min-height:47px;color:#16476a;font-size:.85rem;border-inline:1px solid var(--line)}.vf-hud{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:10px;padding:20px 24px;background:#e7f4ff;border:1px solid var(--line);border-top:0}.vf-hud strong{display:block;margin-top:7px;font-size:1rem}#ap{color:#086591}#phase{color:#086591}.vf-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;border:1px solid var(--line);border-top:0;background:#edf8ff}.vf-view{min-width:0;overflow:hidden}.vf-view-heading,.vf-view-caption{display:flex;gap:12px;justify-content:space-between;align-items:center;padding:14px 18px;flex-wrap:wrap}.vf-view-heading label{display:flex;gap:10px;align-items:center}#zoom{width:90px;accent-color:#1686b5}.vf-tabs{display:flex;gap:5px}.vf-tabs button[aria-pressed=true]{background:#38516d;border-color:#95bacf}.vf-tabs button{font-size:.75rem;padding:8px 10px}#space{display:block;width:100%;aspect-ratio:900/620;touch-action:none;cursor:grab;background:#091322}.vf-view-caption{font-size:.72rem;color:var(--muted);border-top:1px solid #bed8e9}.vf-view-caption button{font-size:.7rem;padding:7px 9px}.vf-legend{display:flex;gap:16px;flex-wrap:wrap;padding:0 18px 16px;font-size:.7rem;color:var(--muted)}.vf-dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px}.vf-hit{background:#ef827e}.vf-miss{background:#7893b0}.vf-scan{background:#77cfc4}.vf-target{background:#f1ca7f}.vf-command{padding:22px;background:var(--card);border-left:1px solid var(--line);min-width:0}.vf-target-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:16px 0}.vf-command #tool{font-size:.83rem}.vf-command #tool-help{font-size:.82rem;color:var(--muted);min-height:70px;margin:12px 0}.vf-command>button{width:100%;margin-top:10px}.vf-intel{border-top:1px solid var(--line);margin-top:20px;padding-top:4px}.vf-intel p{font-size:.85rem;color:#486e87}#enemy-summary{font-size:.78rem;color:var(--muted)}.vf-lower{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-top:0}.vf-lower>section{padding:24px;background:var(--card);min-width:0}.vf-section-heading{display:flex;justify-content:space-between;gap:14px;align-items:center}.vf-section-heading button{padding:7px 11px;font-size:.75rem}.vf-small{font-size:.76rem;color:var(--muted);line-height:1.6}.vf-grid{display:grid;grid-template-columns:22px repeat(10,minmax(0,1fr));gap:3px;max-width:530px;margin:20px auto 0}.vf-grid .grid-label{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.65rem}.vf-grid button{padding:0;border:1px solid #95bed9;background:#e9f6ff;aspect-ratio:1;min-width:0;min-height:0;border-radius:3px;font-size:.68rem;font-family:monospace}.vf-grid button[data-state=hit]{background:#b25757;color:white}.vf-grid button[data-state=miss]{background:#304863;color:#b4c9df}.vf-grid button[data-state=ship]{background:var(--ship-color,#528f98);color:#e7f4ff}.vf-grid button[data-state=sunk]{background:#7c4161;color:white}.vf-grid button[aria-pressed=true]{outline:2px solid #f4c77a;outline-offset:0;border-color:#f4c77a}.vf-ship{display:flex;gap:9px;align-items:center;padding:9px 0;border-bottom:1px solid #c2dceb;font-size:.8rem}.vf-ship i{width:22px;height:10px;display:inline-block;border-radius:2px;clip-path:polygon(0 50%,70% 0,100% 50%,70% 100%)}.vf-ship strong{flex:1}.vf-ship small{color:var(--muted)}#placement{padding-top:18px}.vf-rotate{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.vf-rotate span{font-size:.72rem;margin-right:auto;color:var(--muted)}.vf-rotate button{padding:7px 10px;font-size:.72rem}#deploy{width:100%;margin-top:17px}#history{padding-left:19px;max-height:390px;overflow:auto}#history li{font-size:.82rem;padding:8px 0;line-height:1.5;color:#486e87}.vf-rules p,.vf-rules li{font-size:.82rem;color:#486e87;line-height:1.65}.vf-rules ul{padding-left:18px}.vf-rules li{margin:7px 0}.vf-log h2,.vf-rules h2{margin-top:8px}@media(max-width:950px){.vf-layout{grid-template-columns:minmax(0,1fr) 260px}.vf-command{padding:16px}.vf-heading{padding:25px}.vf-tag{white-space:normal}.vf-hud{padding:16px;grid-template-columns:1.6fr 1fr 1fr 1fr}.vf-hud strong{font-size:.9rem}}@media(max-width:720px){.vf{padding:0 9px 22px;margin-top:18px}.vf-heading{display:block;padding:24px}.vf-tag{display:inline-block;margin-top:18px}.vf-connection{grid-template-columns:1fr;padding:20px;gap:20px}.vf-layout{grid-template-columns:1fr}.vf-command{border-left:0;border-top:1px solid var(--line);padding:20px}.vf-command #tool-help{min-height:0}.vf-lower{grid-template-columns:1fr}.vf-lower>section{padding:20px}.vf-hud{grid-template-columns:repeat(2,1fr);gap:17px}.vf-view-heading{padding:12px}.vf-view-heading label{font-size:.67rem}.vf-tabs button{font-size:.7rem}.vf-view-caption{padding:12px}.vf-kicker{font-size:.6rem}.vf-room{padding:12px;gap:8px}.vf-room button{font-size:.7rem;padding:7px 9px}.vf-grid{gap:3px}.vf-grid button{font-size:.6rem}}

#grid-act{display:block;width:min(100%,530px);margin:16px auto 0}

.vf{--bg:#e7f4ff;--card:#f6fcff;--line:#b5d5e8;--text:#16476a;--muted:#486e87;--gold:#1686b5;}
.vf :is(.vf-connection,.vf-command,.vf-lower>section,.vf-hud){background:linear-gradient(135deg,#ffffffed,#e7f9ffda);box-shadow:inset 0 1px white,0 8px 24px #1d779f12;}
.vf .vf-connection{border-radius:26px 26px 0 0;border-color:white;}
.vf .vf-rules{border-radius:0 0 26px 26px;}
.vf button{border-radius:999px;border:1px solid #8ac5e4;background:linear-gradient(#a8e4f7,#68bfdf 48%,#208fbc 51%,#0c75a9);color:white;box-shadow:inset 0 1px #ffffffcc,0 3px 8px #12658d25;text-shadow:0 1px 1px #07538066;}
.vf button:hover:not(:disabled),.vf .vf-primary:hover:not(:disabled){background:linear-gradient(#b8edfc,#76ccea 48%,#269dcb 51%,#1183b7);filter:brightness(1.04);}
.vf .vf-primary{background:linear-gradient(#a8e4f7,#68bfdf 48%,#208fbc 51%,#0c75a9);color:white;border-color:#8ac5e4;}
.vf button:disabled{box-shadow:none;}
.vf input:not([type=range]),.vf select{border-radius:12px;background:linear-gradient(#f5fbff,#fff);border-color:#9fc7df;color:#16476a;box-shadow:inset 0 2px 4px #236c9710;}
.vf .vf-room{background:linear-gradient(#158cbd,#075d91);color:white;}.vf .vf-room strong{color:white;}
.vf .vf-tabs button{background:linear-gradient(#fff,#e5f4ff);color:#17618d;border-color:#aacfe5;text-shadow:0 1px white;}
.vf .vf-tabs button[aria-pressed=true]{background:linear-gradient(#66c7e8,#1283b7);color:white;border-color:#76badb;text-shadow:0 1px 1px #07538066;}
.vf .vf-grid button{border-radius:4px;box-shadow:inset 0 1px #ffffff88;text-shadow:none;}
.vf .vf-grid button[data-state=hit]{background:#b25757;color:white;}.vf .vf-grid button[data-state=miss]{background:#d2e7f5;color:#375f7b;}.vf .vf-grid button[data-state=ship]{background:var(--ship-color,#528f98);color:#0d304c;}.vf .vf-grid button[data-state=sunk]{background:#7c4161;color:white;}
.vf #zoom{accent-color:#1686b5;}