/* Versus uses its own DOM instruments over two clipped canvas viewports. */
.hero-actions{flex-wrap:wrap;max-width:660px;gap:14px}#enter-versus{padding:17px 23px}#versus-keyboard-note{font-size:13px;color:var(--muted)}
body[data-versus] #screens,body[data-versus] #topbar,body[data-versus] #footer,body[data-versus] #toast-stack,body[data-versus] #vignette{display:none}
#versus-root{position:fixed;inset:0;z-index:5;overflow:hidden;pointer-events:none}#versus-root button,#versus-root select{pointer-events:auto}.v-setup{pointer-events:auto;position:absolute;inset:0;overflow-y:auto;padding:30px max(30px,calc((100vw - 1080px)/2));background:linear-gradient(120deg,#041e2bef,#07353beb);scrollbar-color:#406f75 #082c36}.v-heading{display:flex;justify-content:space-between;align-items:center;gap:24px}.v-heading h2{font-size:clamp(30px,4vw,48px);line-height:1.05;margin:10px 0 16px;letter-spacing:-1.7px}.v-heading h2 span{color:var(--teal)}.v-heading .button{min-height:42px}.v-tally{color:#bed7d9;font-size:11px;letter-spacing:1.5px;padding:12px 0 18px}.v-pilots{display:grid;grid-template-columns:1fr 1fr;gap:20px}.v-pilot{border:1px solid #ffb46b55;border-top:3px solid var(--orange);border-radius:12px;background:linear-gradient(145deg,#173a4166,#061f2ba6);padding:17px 22px}.v-pilot.p2{border-color:#70dfea55;border-top-color:#70dfea}.v-card-heading{display:flex;justify-content:space-between;gap:15px;align-items:center}.v-card-heading b{color:var(--orange);letter-spacing:2px;font-size:13px}.p2 .v-card-heading b{color:#70dfea}.v-card-heading span{font-size:10px;letter-spacing:1.5px;color:var(--muted)}.v-vehicle-select{display:flex;align-items:center;justify-content:space-between;height:116px}.v-vehicle-select canvas{width:72%;height:112px}.v-vehicle-select button{border:1px solid #95d7df40;background:#143c4780;border-radius:50%;width:32px;height:32px;font-size:26px;line-height:20px}.v-pilot h3{font-size:22px;margin:0 0 6px}.v-pilot p{color:#acc7ca;font-size:12px;line-height:1.5;margin:0 0 15px;min-height:36px}.v-controls{display:flex;gap:6px;align-items:center;font-size:10px;color:#c6d9dc;flex-wrap:wrap}.v-controls kbd{font-family:inherit;border:1px solid #97c8ce50;background:#22444d;padding:5px 7px;border-radius:5px;color:#fff;font-weight:700}.v-pilot>.button{width:100%;margin-top:17px;min-height:40px;padding:11px;font-size:11px;letter-spacing:1.8px}.v-pilot>.button.ready{border-color:var(--teal);background:#1e6558}.v-options{display:grid;grid-template-columns:1.25fr 1fr .9fr 1.2fr;gap:14px;margin-top:21px}.v-options label{display:flex;flex-direction:column;gap:8px;font-size:9px;letter-spacing:1.5px;color:#adc8cb}.v-options select{width:100%;border:1px solid #a1dae13d;border-radius:6px;background:#103541;color:#f0fbff;padding:10px;font-size:13px}.v-mode-note{font-size:12px;color:#c1dbda;min-height:18px}.v-launch{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #a9d1d629;padding-top:14px;gap:20px}.v-launch p{font-size:12px;line-height:1.7;color:#a8c8cc;margin:0}.v-launch .button{min-width:240px}.v-setup-help{text-align:center;font-size:10px;line-height:1.8;color:#8bb0b6;margin:15px 0 0}
.v-hud{position:absolute;left:0;right:0;height:calc(50% - 1px);top:0;overflow:hidden;pointer-events:none}.v-hud.p2{top:calc(50% + 1px)}.v-hud-row{position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:1.2fr 1fr .65fr 1.15fr;gap:25px;align-items:center;padding:13px 58px 17px 23px;background:linear-gradient(#031925ef,#042431ca,transparent);min-height:81px;text-shadow:0 1px 2px #021b27}.v-identity{display:grid;grid-template-columns:30px auto;gap:2px 8px;align-items:center}.v-identity>b{grid-row:1/3;color:var(--orange);border-left:3px solid currentColor;padding:7px 0 7px 7px;font-size:12px}.p2 .v-identity>b{color:#70dfea}.v-identity strong{font-size:26px;letter-spacing:-1px;white-space:nowrap}.v-identity small{font-size:9px;letter-spacing:.8px;white-space:nowrap;color:#c0dcde}.v-oxygen span{font-size:12px;display:flex;justify-content:space-between;color:#bdede9;margin-bottom:8px}.v-oxygen>div{height:7px;border-radius:8px;background:#031723;border:1px solid #a0e1d835;overflow:hidden}.v-oxygen i{display:block;height:100%;background:var(--teal);border-radius:8px;box-shadow:0 0 8px #9bf8ce}.v-oxygen i.low{background:#ff8c75}.v-counts{display:flex;flex-direction:column;gap:6px;white-space:nowrap;text-align:right}.v-counts b{font-size:15px;color:#f2e5b9}.v-counts span{font-size:10px;color:#bfd8da}.v-item{border:1px solid #7de1dd4d;border-radius:8px;display:flex;align-items:center;gap:9px;padding:8px 10px;min-width:0;background:#0a303bd9}.v-item>b{font-size:24px;color:#b4cfce;min-width:28px;text-align:center}.v-item>span{font-size:11px;line-height:1.2;flex:1}.v-item>kbd{font-family:inherit;border:1px solid #85bfc175;border-radius:4px;padding:4px;color:#c9e9e7;font-size:10px}.v-item[data-item=ink]{border-color:#bf8cf1}.v-item[data-item=ink]>b{color:#bb8af5}.v-item[data-item=torpedo]>b{color:#ff886c}.v-item[data-item=net]>b{color:#eba8e7}.v-item[data-item=siphon]>b{color:#79d1ff}.v-item[data-item=riptide]>b{color:#b497ff}.v-item[data-item=shield]>b{color:#a1f8ed}.v-item[data-item=turbo]>b{color:#ffe282}.v-item[data-item=magnet]>b{color:#ffbaec}.v-item[data-item=anchor]>b{color:#c2d4ee}.v-status{position:absolute;top:81px;left:24px;right:24px;font-size:11px;font-weight:700;color:#ffe2a1;letter-spacing:.5px;text-shadow:0 1px 4px #000;line-height:1.6}.v-toast{position:absolute;top:110px;left:15%;right:15%;text-align:center;font-size:12px;color:#fff3d1;text-shadow:0 2px 4px #001521;font-weight:600}.v-toast:not(:empty){background:#082932d9;border:1px solid #b8e3d934;padding:7px 12px;border-radius:24px}.v-respawn{position:absolute;top:49%;left:10%;right:10%;text-align:center;font-size:clamp(14px,2vw,24px);font-weight:800;text-shadow:0 2px 6px #000;color:#ffe2b9}.v-respawn:not(:empty){padding:22px;background:#062430db;border:1px solid #eeb7805e;border-radius:10px}.v-bottom{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;gap:16px;padding:10px 23px;font-size:9px;letter-spacing:1px;color:#c4d6d5;background:linear-gradient(transparent,#051d2bdf);white-space:nowrap}.v-divider{position:absolute;left:0;right:0;top:calc(50% - 1px);height:2px;background:#99fff0;box-shadow:0 0 10px #63ffe8,0 0 22px #51e5e8}.v-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#011621ad;backdrop-filter:blur(4px);pointer-events:auto;overflow-y:auto;padding:28px}.v-result{width:min(780px,100%);padding:35px 42px;border:1px solid #95d8d740;background:linear-gradient(145deg,#0e3845f5,#071e2af5);border-radius:18px;text-align:center;box-shadow:0 30px 90px #00101a80}.v-result h2{font-size:clamp(26px,4vw,46px);line-height:1.08;letter-spacing:-1.6px;color:#ffc181;margin:15px 0}.v-result h2.teal{color:#80e8f2}.v-result>p{font-size:12px;line-height:1.6;color:#abc9cf}.v-score{font-size:54px;font-weight:800;letter-spacing:3px;margin:18px 0;color:#f2f6dd}.v-score span{font-size:12px;color:var(--orange);letter-spacing:1px}.v-score span:last-child{color:#70dfea}.v-score small{font-size:30px;color:#65838d}.v-result-stats{display:grid;grid-template-columns:1fr 1fr;gap:18px;text-align:left;margin:20px 0 26px}.v-result-pilot{border:1px solid #ffb46b44;border-top:2px solid var(--orange);border-radius:8px;padding:16px}.v-result-pilot.p2{border-color:#70dfea44;border-top-color:#70dfea}.v-result-pilot>b{color:var(--orange);font-size:12px;letter-spacing:1.5px}.v-result-pilot.p2>b{color:#70dfea}.v-result-pilot dl{margin:15px 0 0}.v-result-pilot dl>div{display:flex;justify-content:space-between;gap:12px;margin-top:10px;align-items:center}.v-result-pilot dt{font-size:9px;letter-spacing:.6px;color:#adc8d1}.v-result-pilot dd{font-size:18px;font-weight:700;margin:0}.v-result-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.v-result-actions .button{font-size:12px;padding:14px 20px;min-height:45px}.v-result>small{display:block;color:#86afb6;font-size:10px;margin-top:20px}.v-countdown{font-size:110px;line-height:1.4;font-weight:900;color:var(--teal);text-shadow:0 0 40px #82e5cf44}.v-next{font-size:12px;color:#bcebe3;letter-spacing:1px}#versus-pause{position:absolute;top:21px;right:17px;width:28px;height:30px;background:#123d4680;border:1px solid #72cfcc66;color:#bdebe6;border-radius:5px}
@media(max-height:760px){.v-setup{padding-top:18px;padding-bottom:18px}.v-heading h2{font-size:32px}.v-vehicle-select{height:90px}.v-vehicle-select canvas{height:86px}.v-pilot{padding:13px 18px}.v-pilot p{margin-bottom:10px;min-height:32px}.v-tally{padding-bottom:13px}.v-options{margin-top:16px}.v-launch{padding-top:10px}.v-pilot>.button{margin-top:12px}.v-result{padding:24px 35px}.v-score{margin:12px 0}.v-result-stats{margin:15px 0 20px}.v-status{top:74px}.v-hud-row{padding-top:9px;min-height:73px}.v-toast{top:99px}}
@media(max-width:900px){.v-setup{padding-left:24px;padding-right:24px}.v-options{grid-template-columns:1fr 1fr}.v-hud-row{gap:13px;padding-left:14px;grid-template-columns:1fr .8fr .55fr 1fr}.v-identity strong{font-size:22px}.v-item{gap:5px;padding:6px}.v-item>span{font-size:10px}.v-controls{font-size:9px;gap:4px}.v-bottom{font-size:8px;padding-left:14px;padding-right:14px;letter-spacing:.4px}.v-toast{left:10%;right:10%;font-size:11px}}
@media(max-width:620px){.v-pilots{grid-template-columns:1fr}.v-launch{flex-direction:column}.v-heading h2{font-size:30px}.v-result{padding:20px}.v-result-stats{gap:8px}.v-result-pilot{padding:10px}.v-result-pilot dt{font-size:8px}.v-result-pilot dd{font-size:14px}.v-hud-row{grid-template-columns:1fr .7fr .5fr .7fr;gap:8px;padding-right:42px}.v-identity{grid-template-columns:23px auto;gap:2px}.v-identity strong{font-size:18px}.v-identity small{font-size:7px}.v-item>span{display:none}.v-item>b{font-size:19px}.v-bottom>span:last-child{display:none}}
/* Three small tank silhouettes show remaining Last Sub Standing lives. */
.v-options{grid-template-columns:1.15fr .9fr .8fr 1.05fr 1fr}.v-lives{display:flex;gap:7px;position:absolute;margin-top:8px}.v-lives[hidden]{display:none}.v-tank{position:relative;font-style:normal;font-size:8px;line-height:17px;text-align:center;width:17px;height:20px;border:1px solid #b3f4df;border-radius:4px;background:#418e8277;color:#d5fff1}.v-tank:before{content:'';position:absolute;width:7px;height:3px;background:#b3f4df;top:-4px;left:4px;border-radius:1px}.v-tank.empty{opacity:.22;background:transparent}@media(max-width:900px){.v-options{grid-template-columns:1fr 1fr}}