:root{
  --bg:#0a0d12; --panel:rgba(11,15,21,.86); --line:#2a3443;
  --ink:#e8edf4; --muted:#8793a5; --accent:#ff6a13; --danger:#ff3d52; --ok:#35d690;
  --f-display:"Chakra Petch","Segoe UI",system-ui,sans-serif;
  --f-body:"Be Vietnam Pro","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:14px;overflow:hidden;-webkit-user-select:none;user-select:none}
input{-webkit-user-select:text;user-select:text}
#cv{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.cut{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.panel{background:rgba(11,15,21,.94);border:1px solid var(--line)}
.ov .panel{background:rgba(11,15,21,.96)}
.fx{position:fixed;inset:0;pointer-events:none}
#flash{background:#fff;opacity:0}
#hurt{background:radial-gradient(ellipse at center,transparent 40%,rgba(255,61,82,.55));opacity:0;transition:opacity .3s}

/* Vòng cảnh báo hướng kẻ đang soi trán */
.threat-ring{position:fixed;left:50%;top:50%;width:128px;height:128px;margin:-64px 0 0 -64px;pointer-events:none}
.threat-ring i{position:absolute;inset:0;border-radius:50%;border:4px solid transparent;border-top-color:var(--danger);filter:drop-shadow(0 0 6px var(--danger));will-change:transform}

.xh{position:fixed;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;pointer-events:none}
.xh::before,.xh::after{content:"";position:absolute;background:#fff;box-shadow:0 0 3px rgba(0,0,0,.9);opacity:.95}
.xh::before{left:10px;top:0;width:2px;height:22px}
.xh::after{top:10px;left:0;height:2px;width:22px}
.xh.hit::before,.xh.hit::after{background:var(--ok)}
.scope{position:fixed;left:50%;top:calc(50% + 32px);transform:translateX(-50%);padding:7px 14px;text-align:center;pointer-events:none;display:grid;gap:3px;min-width:148px}
.scope .nm{font-size:12px;font-weight:600}
.scope .cd6{font-family:var(--f-mono);font-weight:700;font-size:25px;letter-spacing:.08em}
.scope .cd6 i{font-style:normal;color:#4a5566}
.scope .cd6 b.m{color:var(--ok);text-shadow:0 0 8px rgba(53,214,144,.6)}
.sc-bar{height:4px;background:#1a222d;overflow:hidden;border-radius:2px}
.sc-bar i{display:block;height:100%;width:0%;background:var(--accent);transition:width .08s linear}
.scope.full .sc-bar i{background:var(--ok)}
.scope .st{font-size:11px;color:var(--muted)}
.scope.full{border-color:var(--ok)}
.scope.full .st{color:var(--ok);font-weight:700}

.hud{position:fixed;inset:0;pointer-events:none;display:grid;grid-template-rows:auto 1fr auto;
  padding-block:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.top{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:start}
.me{justify-self:start;padding:10px 14px;display:grid;gap:6px;min-width:0}
.lbl-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.top-btns{display:flex;gap:5px;align-items:center}
.mute-btn{pointer-events:auto;font:600 11px var(--f-body);color:var(--muted);background:transparent;border:1px solid var(--line);padding:2px 7px;cursor:pointer}
.mute-btn:hover{color:var(--ink);border-color:var(--ink)}
.leave-btn:hover{color:var(--danger)!important;border-color:var(--danger)!important}
.lbl{font-family:var(--f-display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.code{font-family:var(--f-mono);font-weight:700;font-size:26px;letter-spacing:.08em;display:flex;gap:2px}
.code span{width:.78em;text-align:center}
.code span.x{color:var(--danger);text-shadow:0 0 12px rgba(255,61,82,.6)}
.code .gap{width:.4em}
.exp{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.exp b{color:var(--ink);font-variant-numeric:tabular-nums}
.watch{color:#fff;background:var(--danger);font-weight:700;font-size:11px;padding:1px 6px}
.buff{color:#5ee0e0;font-weight:600;font-family:var(--f-mono);font-size:11px;border:1px solid #5ee0e0;padding:1px 6px;background:rgba(94,224,224,.12)}
.st-badge{color:#ffd23f;font-weight:700;font-size:11px;margin-left:4px}
.bc-bar{font-size:11px;color:#5ee0e0;margin-top:3px;font-family:var(--f-display);letter-spacing:.05em}
.gad{display:flex;gap:6px;flex-wrap:wrap}
.gbtn{pointer-events:auto;font-family:var(--f-display);font-weight:700;font-size:12px;letter-spacing:.06em;background:transparent;color:var(--accent);border:1px solid var(--accent);padding:5px 9px;cursor:pointer;text-transform:uppercase;font-variant-numeric:tabular-nums}
.gbtn:disabled{color:var(--muted);border-color:var(--line);cursor:default}
button:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.right{justify-self:end;display:grid;gap:8px;justify-items:end}
#mini{width:150px;height:150px;border:1px solid var(--line);background:rgba(8,11,16,.8);display:block}
.clock{justify-self:center;padding:8px 18px;text-align:center}
.clock .t{font-family:var(--f-mono);font-weight:700;font-size:28px;font-variant-numeric:tabular-nums}
.clock .t.low{color:var(--danger)}
.clock .k{font-size:12px;color:var(--muted)}
.feed{display:grid;gap:4px;justify-items:end;font-size:12px;max-width:240px}
.feed div{background:var(--panel);border:1px solid var(--line);padding:4px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.feed .me-k{border-color:var(--accent)}
.feed .me-d{border-color:var(--danger)}
.mid{display:grid;place-items:center;align-content:center;gap:10px;text-align:center}
.cd{font-family:var(--f-display);font-weight:700;font-size:96px;color:var(--accent);line-height:1}
.dead{font-family:var(--f-display);font-size:22px;padding:14px 22px}
.dead small{display:block;font-family:var(--f-body);font-size:13px;color:var(--muted);margin-top:4px}
.toast{font-family:var(--f-display);font-weight:700;font-size:24px;color:var(--ok);letter-spacing:.06em;margin-top:120px}
.lockhint{font-size:13px;padding:8px 14px;margin-top:140px}
.bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:12px}
.typer{grid-column:2;display:grid;gap:6px;justify-items:center;padding:10px 14px}
.slots{display:flex;gap:6px}
.slots span{width:36px;height:44px;display:grid;place-items:center;font-family:var(--f-mono);font-weight:700;font-size:23px;border:1px solid var(--line);background:#0d1219}
.slots span.f{border-color:var(--accent);color:#fff}
.slots span.m{border-color:var(--ok);color:var(--ok)}
.slots.err span{border-color:var(--danger);color:var(--danger)}
.slots.lock span{opacity:.4}
.status{font-size:12px;color:var(--muted);min-height:16px;max-width:380px;text-align:center}
.emotes{display:flex;align-items:center;gap:5px;pointer-events:auto;margin-top:2px}
.emotes .em-lbl{font-size:11px;color:var(--muted)}
.emotes button{background:#0d1219;border:1px solid var(--line);padding:2px 7px;font-size:14px;cursor:pointer;line-height:1.2}
.emotes button:hover{border-color:var(--accent)}
.hint{grid-column:1/-1;text-align:center;font-size:12px;color:var(--muted);line-height:1.8}
.hint kbd{font-family:var(--f-mono);font-size:11px;border:1px solid var(--line);padding:1px 5px;color:var(--ink)}
.joy{grid-column:1;grid-row:1;justify-self:start;width:124px;height:124px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.04);pointer-events:auto;position:relative;touch-action:none}
.joy i{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:rgba(255,106,19,.35);border:1px solid var(--accent)}
.pad{grid-column:3;grid-row:1;justify-self:end;display:grid;grid-template-columns:repeat(3,46px);gap:4px;pointer-events:auto}
.pad.wide{grid-template-columns:repeat(4,40px)}
.pad button{height:38px;font-family:var(--f-mono);font-weight:700;font-size:16px;color:var(--ink);background:var(--panel);border:1px solid var(--line);touch-action:manipulation;padding:0}
.pad.wide button{height:34px;font-size:15px}
.pad button.alt{font-family:var(--f-display);font-size:12px;color:var(--accent)}
.pad button:active,.pad button.on{background:var(--accent);color:#120800}
@media (max-width:640px){
  .feed{display:none}
  .top{grid-template-columns:1fr auto}
  .clock{grid-column:2;grid-row:1}
  .right{grid-column:2;grid-row:2}
  #mini{width:104px;height:104px}
  .code{font-size:20px}
  .bottom{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .touch .typer{grid-column:1/-1;grid-row:1}
  .joy,.pad{grid-row:2}
  .slots span{width:28px;height:36px;font-size:18px}
  .gad .gbtn,.emotes .em-lbl{display:none}
}

.ov{position:fixed;inset:0;display:grid;place-items:center;overflow:auto;background:rgba(6,8,11,.74);
  padding-block:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.card{width:min(590px,100%);padding:24px;display:grid;gap:16px;margin:0}
.brand{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.brand h1{margin:0;font-family:var(--f-display);font-weight:700;font-size:52px;letter-spacing:.04em;line-height:1}
.brand h1 em{font-style:normal;color:var(--accent)}
.brand .tag{font-family:var(--f-mono);font-size:13px;color:var(--muted);border:1px solid var(--line);padding:2px 8px}
.lead{margin:0;color:var(--muted);line-height:1.6;max-width:62ch}
.lead b{color:var(--ink)}
.field{display:grid;gap:6px}
.field label{font-family:var(--f-display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.field .opt-t{text-transform:none;letter-spacing:0;font-family:var(--f-body)}
.field input{font:600 18px var(--f-body);color:var(--ink);background:#0d1219;border:1px solid var(--line);padding:12px 14px}
.field input:focus{border-color:var(--accent);outline:none}
#inRoom{font-family:var(--f-mono);letter-spacing:.2em;text-transform:uppercase}
.err{color:var(--danger);margin:0;font-size:13px}
.roomrow{display:flex;justify-content:space-between;align-items:end;gap:14px;flex-wrap:wrap}
.roomcode{font-family:var(--f-mono);font-weight:700;font-size:44px;letter-spacing:.2em;color:var(--accent);line-height:1.1}
.share{display:flex;gap:6px;min-width:0;flex:1 1 220px;max-width:320px}
.share input{flex:1;min-width:0;font:12px var(--f-mono);color:var(--muted);background:#0d1219;border:1px solid var(--line);padding:8px}
.ghost{font-family:var(--f-display);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;background:transparent;color:var(--ink);border:1px solid var(--line);padding:8px 12px;cursor:pointer;white-space:nowrap}
.ghost:hover{border-color:var(--accent);color:var(--accent)}
.plist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.plist li{border:1px solid var(--line);background:#0d1219;padding:8px 10px;display:flex;align-items:center;gap:8px;min-width:0}
.plist li span.n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plist li.you{border-color:var(--accent)}
.plist .host{font-size:10px;font-family:var(--f-display);letter-spacing:.1em;color:var(--accent);margin-left:auto}
.plist .wait{font-size:10px;color:var(--muted);margin-left:auto}
.presets{display:grid;gap:6px;padding:10px 12px;background:#0d1219;border:1px solid var(--line)}
.preset-btns{display:flex;flex-wrap:wrap;gap:6px}
.preset-btns button{font:600 12px var(--f-body);background:transparent;color:var(--ink);border:1px solid var(--line);padding:6px 10px;cursor:pointer}
.preset-btns button.on{border-color:var(--ok);color:var(--ok);background:rgba(53,214,144,.1)}
.preset-btns button:disabled{opacity:.5;cursor:default}
.opts{display:grid;gap:10px}
.opt{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:center}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{font-family:var(--f-display);font-weight:500;font-size:14px;padding:6px 11px;background:transparent;color:var(--ink);border:1px solid var(--line);cursor:pointer}
.seg button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:rgba(255,106,19,.08)}
.seg button:disabled{cursor:default;opacity:.55}
.seg button[aria-pressed="true"]:disabled{opacity:1}
.go{font-family:var(--f-display);font-weight:700;font-size:18px;letter-spacing:.1em;text-transform:uppercase;background:var(--accent);color:#140900;border:0;padding:14px;cursor:pointer}
.go:hover{filter:brightness(1.08)}
.go:disabled{opacity:.45;cursor:default;filter:none}
.end-actions{display:flex;gap:10px;flex-wrap:wrap}
.end-actions .go{flex:1}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-family:var(--f-display);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
td{padding:8px;border-bottom:1px solid rgba(42,52,67,.6);font-variant-numeric:tabular-nums}
td.n,th.n{text-align:right}
tr.you td{background:rgba(255,106,19,.1)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:middle}
.mvp-tag{display:inline-block;font:600 11px var(--f-body);color:#ffd23f;background:rgba(255,210,63,.12);border:1px solid rgba(255,210,63,.4);padding:1px 6px;margin-left:6px;vertical-align:middle}
.rw{font-family:var(--f-mono);font-weight:700;color:var(--ok)}
.sum{font-family:var(--f-display);font-size:22px;margin:0}
.sum b{color:var(--accent)}
.note{font-size:12px;color:var(--muted);margin:0;line-height:1.5}
.tblwrap{overflow-x:auto}
.board{width:min(540px,100%);padding:18px}
@media (max-width:480px){.opt{grid-template-columns:1fr}.brand h1{font-size:40px}.card{padding:20px 16px}.roomcode{font-size:36px}}