*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;height:100dvh;overflow:hidden;background:#090d1e;color:#eff0ff;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;overscroll-behavior:none}button,input{font:inherit}button{cursor:pointer}#app{position:relative;width:100%;height:100%;height:100dvh;overflow:hidden;background:#0b1229}header{height:calc(56px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 12px 0;display:flex;align-items:center;gap:9px;background:linear-gradient(95deg,#12142d,#14102b 60%,#10192b);border-bottom:1px solid #7a59874a;position:relative;z-index:2}.brand{display:flex;align-items:center;gap:5px;font-size:19px;letter-spacing:1px;color:#ddd6fe;white-space:nowrap}.torii{color:#f36cb0;font-size:24px}.hud{display:flex;flex:1;gap:5px;justify-content:flex-end;min-width:0}.pill{border:1px solid #5f5b8755;border-radius:11px;background:#0d1428;padding:7px 8px;font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}.timer{color:#ffa0d4;border-color:#eb448c66}.zombie{color:#8affb6}.count{color:#bfc6e5}.count:first-letter{color:#40e9a9}.chat-toggle{position:relative;background:#26204a;color:#f4c5ff;border:1px solid #9b83dc80;border-radius:12px;height:38px;min-width:40px;font-size:25px}#unread{position:absolute;top:-7px;right:-6px;background:#ff4d95;color:#fff;border-radius:12px;min-width:18px;height:18px;padding:0 4px;font:700 11px/18px system-ui}#gameArea{position:absolute;inset:calc(56px + env(safe-area-inset-top)) 0 0;overflow:hidden;touch-action:none}#map{display:block;width:100%;height:100%}#hint{position:absolute;top:10px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:7px 11px;color:#dfd9f8;font-size:11px;background:#15132cbb;border:1px solid #654c7355;border-radius:20px;pointer-events:none}#stats{position:absolute;bottom:calc(14px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);border-radius:15px;padding:7px 11px;font-size:11px;white-space:nowrap;background:#10162bd6;color:#ffcbe6;pointer-events:none}#joystick{position:absolute;bottom:calc(44px + env(safe-area-inset-bottom));left:19px;width:128px;height:128px;border:2px solid #b7acff85;border-radius:50%;background:#cbb8ff1a;backdrop-filter:blur(4px);touch-action:none;display:grid;place-items:center}#stick{width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e1ddff,#a99de3 55%,#514a99);border:2px solid #e2d5ff;box-shadow:0 0 20px #9c86f9aa;transform:translate(0px,0px);pointer-events:none}#dash{position:absolute;right:18px;bottom:calc(65px + env(safe-area-inset-bottom));height:84px;width:84px;border:2px solid #cbb9ffaf;border-radius:50%;background:#211e55bd;color:#eee4ff;box-shadow:0 0 15px #8765ed55;font-size:35px;touch-action:none;transform:rotate(-25deg)}#dash small{display:block;font-size:9px;font-weight:800;transform:rotate(25deg);letter-spacing:1px}#dash.pressed{background:#9251d3}#chatPanel{position:absolute;z-index:5;top:calc(65px + env(safe-area-inset-top));right:9px;bottom:calc(20px + env(safe-area-inset-bottom));width:min(350px,calc(100% - 18px));background:#0a1127ed;border:1px solid #8974bc8c;border-radius:18px;display:flex;flex-direction:column;box-shadow:0 8px 34px #000a;transition:transform .22s,opacity .22s;overflow:hidden;backdrop-filter:blur(16px)}#chatPanel.closed{transform:translateX(110%);opacity:0;pointer-events:none}.chatHead{display:flex;align-items:center;justify-content:space-between;padding:14px;border-bottom:1px solid #877ab43d}.chatHead button{background:#343154;color:white;border:0;border-radius:9px;padding:6px 10px}#messages{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px}.msg{background:#252c4c99;border-radius:12px;padding:9px 10px;font-size:13px;overflow-wrap:anywhere}.msg b{display:block;margin-bottom:3px}.msg.system{background:transparent;text-align:center;color:#939dbd;font-size:12px}#chatForm{padding:10px;display:flex;gap:7px;border-top:1px solid #8579b84a}#chatInput{min-width:0;flex:1;border:1px solid #716ba0;border-radius:11px;background:#121a31;color:#fff;padding:11px;font-size:16px;outline:none}#chatForm button{border:0;border-radius:11px;background:#7966e9;color:white;padding:0 16px}.overlay{position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:18px;background:#070a1cdd;backdrop-filter:blur(8px)}.hidden{display:none!important}.modal{width:min(100%,350px);padding:28px 22px;background:linear-gradient(145deg,#1e2145,#12172d);border:1px solid #a784b177;border-radius:22px;box-shadow:0 20px 80px #0009;text-align:center}.emblem{font-size:42px;color:#ff7abf}.modal h1,.modal h2{margin:5px 0 0;letter-spacing:2px}.modal p{color:#c6b8db;font-size:14px}.modal input{width:100%;border:1px solid #8e80b0;border-radius:12px;background:#0c132a;color:white;padding:14px;font-size:16px;margin:13px 0}.modal button{width:100%;background:linear-gradient(100deg,#a54bb9,#7563e8);color:white;font-weight:700;border:0;border-radius:12px;padding:14px}.modal small{display:block;color:#9c9dba;margin-top:14px}.modal strong{color:#ff8fc4}#joinError{color:#ff98ae;font-size:13px;min-height:18px}#toast{position:absolute;top:calc(70px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:4;pointer-events:none;color:#e9dffb;font-size:12px;text-shadow:0 1px 6px #000;white-space:nowrap}@media(max-width:390px){.brand{font-size:16px}.pill{font-size:11px;padding:7px 5px}header{gap:5px;padding-left:7px;padding-right:7px}#joystick{width:112px;height:112px;left:12px}#dash{width:72px;height:72px;right:12px}}@media(min-width:750px){#joystick{opacity:.5}#gameArea{inset:calc(56px + env(safe-area-inset-top)) 0 0}#chatPanel{width:350px}}@media(max-height:560px){#joystick{height:90px;width:90px;bottom:25px}#dash{height:68px;width:68px;bottom:38px}#stats{bottom:5px}#hint{display:none}}

/* v3 compact chat, remains usable while the death dialog is visible */
#chatPanel{z-index:16;width:min(210px,56vw);height:min(350px,46dvh);bottom:auto;top:calc(60px + env(safe-area-inset-top));right:8px;border-radius:13px}
.chatHead{padding:7px 9px;font-size:12px}.chatHead button{padding:4px 7px}#messages{padding:5px;gap:4px}.msg{padding:5px 6px;border-radius:7px;font-size:11px}.msg.system{font-size:10px}#chatForm{padding:5px;gap:3px}#chatInput{font-size:16px;padding:6px;border-radius:7px;width:10px}#chatForm button{padding:0 7px;border-radius:7px}header{z-index:17}.overlay{pointer-events:none}.modal{pointer-events:auto}#chatToggle{z-index:18}
@media(max-width:390px){#chatPanel{width:min(190px,54vw);height:min(310px,42dvh)}}

/* v5 mini map and coordinated fire */
#minimap{position:absolute;top:45px;right:10px;width:112px;height:112px;border:1px solid #dfa1ff70;border-radius:11px;opacity:.68;pointer-events:none;background:#111b32aa;box-shadow:0 3px 15px #0005}
#teamPanel{position:absolute;top:170px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);min-width:210px;padding:7px 10px;background:#11182cce;border:1px solid #f2cc70aa;border-radius:10px;font-size:11px;text-align:center;pointer-events:none}
#teamPanel b{color:#ffe39a}.team-directions{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 9px;margin-top:4px}
#shoot{position:absolute;right:20px;bottom:calc(163px + env(safe-area-inset-bottom));height:66px;width:66px;border-radius:50%;border:2px solid #ffcf74;background:#7c4d22c9;color:#ffde92;font-size:30px;touch-action:none}
#shoot small{display:block;font-size:9px;font-weight:800}
#shoot[hidden],#teamPanel[hidden]{display:none!important}
@media(max-width:390px){#minimap{width:92px;height:92px}#teamPanel{top:148px}#shoot{right:15px;width:58px;height:58px;bottom:calc(148px + env(safe-area-inset-bottom))}}

/* v6: split, independent, continuous team controls */
#teamControls{position:absolute;left:12px;right:106px;bottom:calc(58px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;z-index:2;touch-action:none}
#teamControls[hidden]{display:none!important}
#teamControls button{height:66px;min-width:0;border-radius:14px;border:1.5px solid #edcd80;background:#544023dd;color:#ffdf98;font-size:32px;font-weight:700;touch-action:none;user-select:none;-webkit-user-select:none}
#teamControls button:disabled{border-color:#51506655;background:#15172abb;color:#6b6d83;opacity:.36}
#teamControls button.held{background:#b68b37;box-shadow:0 0 18px #ffce65aa;transform:scale(.95)}
#teamPanel{top:170px;max-width:calc(100% - 24px)}
@media(max-width:390px){#teamControls{left:8px;right:89px;gap:5px}#teamControls button{height:58px;font-size:27px}}


/* v6.1 iOS Safari: game is an interactive surface, never selectable webpage */
html,body,#app,#gameArea,#map,#minimap,button,#joystick,#stick,#teamControls,#teamPanel,#stats,#hint,#dash,#shoot,header,.pill,.brand,.overlay,.modal h1,.modal h2 {
  -webkit-user-select:none !important;
  user-select:none !important;
  -webkit-touch-callout:none !important;
  -webkit-tap-highlight-color:transparent;
}
html,body,#app,#gameArea,#map,#minimap,#joystick,#teamControls,#dash,#shoot,button {
  touch-action:none;
}
/* Chat and nickname entry must still behave as ordinary editable text. */
input,textarea {
  -webkit-user-select:text !important;
  user-select:text !important;
  -webkit-touch-callout:default !important;
  touch-action:manipulation;
}
#messages {touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#chatPanel {touch-action:pan-y}
button { -webkit-appearance:none; appearance:none }

/* v7: thumb-friendly three-button action arc on the right side */
#actionWheel{position:absolute;right:calc(10px + env(safe-area-inset-right));bottom:calc(54px + env(safe-area-inset-bottom));width:174px;height:218px;z-index:3;pointer-events:none;touch-action:none}
#actionWheel button{pointer-events:auto;position:absolute;display:grid;place-content:center;gap:1px;width:65px;height:65px;border-radius:50%;border:1.5px solid #baabff99;color:#fff;touch-action:none;-webkit-user-select:none;user-select:none;box-shadow:0 0 16px #7564dd44;background:#25234fdf;font-size:27px;transform:none}
#actionWheel button small{font-size:9px;letter-spacing:.3px;font-weight:750;color:#fff9}
#actionWheel #dash{right:0;bottom:0;width:76px;height:76px;border-color:#e0beff;font-size:31px;background:#554090df}
#actionWheel #shoot{right:89px;bottom:28px;border-color:#ffe09d;background:#5c4629e8}
#actionWheel #grenade{right:40px;bottom:116px;border-color:#ff9db8;background:#632942e8}
#actionWheel button:disabled{opacity:.42;filter:grayscale(.65)}
#actionWheel button.pressed{filter:brightness(1.35);box-shadow:0 0 19px #deacffba}
#actionWheel #shoot[hidden]{display:grid!important}
#powerNotice{position:absolute;right:14px;bottom:calc(278px + env(safe-area-inset-bottom));padding:6px 9px;background:#18172cc9;border:1px solid #c6a7ff70;border-radius:9px;font-size:11px;color:#e5ddff;pointer-events:none;z-index:3}
#powerNotice[hidden]{display:none}
#teamControls{right:185px;bottom:calc(71px + env(safe-area-inset-bottom));grid-template-columns:repeat(2,minmax(0,1fr))}
#teamControls button{height:54px}
@media(max-width:390px){#actionWheel{transform:scale(.83);transform-origin:bottom right;right:5px}#teamControls{right:157px;bottom:calc(65px + env(safe-area-inset-bottom))}#teamControls button{height:49px}}
@media(max-height:650px){#actionWheel{transform:scale(.8);transform-origin:bottom right}}

/* v8: shared thumbstick, team-locked direction wedges, no arrow-pad */
#joystick{z-index:4;isolation:isolate;overflow:hidden;}
#joystick.team-mode{background:#141931dd;border-color:#efca7baf;}
#joystick.team-mode:before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
 background:conic-gradient(from -45deg,
 var(--sector-up,transparent) 0deg 88deg,transparent 88deg 92deg,
 var(--sector-right,transparent) 92deg 178deg,transparent 178deg 182deg,
 var(--sector-down,transparent) 182deg 268deg,transparent 268deg 272deg,
 var(--sector-left,transparent) 272deg 358deg,transparent 358deg 360deg);
 opacity:.85;}
#joystick.allow-up{--sector-up:#f4cf7777}
#joystick.allow-right{--sector-right:#f4cf7777}
#joystick.allow-down{--sector-down:#f4cf7777}
#joystick.allow-left{--sector-left:#f4cf7777}
#joystick.team-mode #stick{z-index:1;background:radial-gradient(circle at 35% 30%,#ffeec4,#d8b65b 58%,#79602e);border-color:#fff0bc;box-shadow:0 0 14px #f5ce69aa}

/* Low-overhead performance counter (measured locally in the browser) */
#fpsMeter{position:absolute;top:70px;left:9px;z-index:6;pointer-events:none;padding:4px 7px;border:1px solid #8c82b444;background:#090d1ec4;color:#b8e5ca;border-radius:8px;font:600 11px/1.2 system-ui;font-variant-numeric:tabular-nums}
