:root {
  --coral: #ff8042; --coral-d: #9e4526; --kelp: #29bda8; --kelp-d: #146b66;
  --ink: #0d1516; --panel: rgba(13, 21, 22, .78); --line: rgba(255, 255, 255, .12);
  --text: #eef3ee; --dim: #9db0aa; --gold: #ffd166;
  --font: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--text); font-family: var(--font); overflow: hidden; user-select: none; -webkit-user-select: none; }
#stage { position: fixed; inset: 0; }
#unity-canvas { width: 100%; height: 100%; display: block; outline: none; background: #121a1c; cursor: crosshair; }
#labels, #hud { position: absolute; inset: 0; pointer-events: none; }
#hud[hidden], #board[hidden], #joinform[hidden] { display: none; }

/* ---- name tags, chat bubbles, emotes: HTML pinned to fighters' heads ---- */
.tag-n { position: absolute; transform: translate(-50%, -100%); font-size: 12px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(0,0,0,.8); will-change: left, top; }
.tag-n.t0 { color: #ffc3a3; } .tag-n.t1 { color: #a5f1e4; }
.tag-n.me { color: #fff; } .tag-n.bot { opacity: .7; font-weight: 600; }
.tag-n .bubble { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); background: #fff; color: #10201f; padding: 4px 9px; border-radius: 12px;
  font-size: 13px; font-weight: 600; max-width: 240px; white-space: normal; width: max-content; text-shadow: none; animation: pop .18s ease-out; }
.tag-n .emote { position: absolute; left: 50%; bottom: 20px; width: 56px; height: 56px; margin-left: -28px; object-fit: contain; font-size: 44px; line-height: 56px; text-align: center;
  animation: emote 2.6s ease-out forwards; text-shadow: none; }
@keyframes pop { from { transform: translateX(-50%) scale(.6); opacity: 0; } }
@keyframes emote { 0% { transform: translateY(10px) scale(.3); opacity: 0; } 12% { transform: translateY(-6px) scale(1.25); opacity: 1; } 22% { transform: translateY(0) scale(1); }
  80% { transform: translateY(-26px) scale(1); opacity: 1; } 100% { transform: translateY(-54px) scale(.9); opacity: 0; } }

/* ---- top ---- */
#scorebar { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; background: var(--panel);
  padding: 7px 16px; border-radius: 14px; border: 1px solid var(--line); }
#scorebar .side { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 13px; letter-spacing: .12em; }
.t0 .tname { color: var(--coral); } .t1 .tname { color: var(--kelp); }
.corebar { width: 150px; height: 10px; background: rgba(255,255,255,.1); border-radius: 6px; overflow: hidden; }
.corebar i { display: block; height: 100%; width: 100%; transition: width .3s; }
.t0 .corebar i { background: var(--coral); } .t1 .corebar i { background: var(--kelp); margin-left: auto; }
.corebar.shield { box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
.towers { font-size: 13px; letter-spacing: 2px; min-width: 52px; } .t1 .towers { text-align: right; }
.towers b { opacity: .22; } .t0 .towers b.up { opacity: 1; color: var(--coral); } .t1 .towers b.up { opacity: 1; color: var(--kelp); }
#clock { font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 800; min-width: 70px; text-align: center; }
#clock.low { color: var(--gold); }
#meta { position: absolute; top: 12px; right: 12px; display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
#mute { pointer-events: auto; background: var(--panel); border: 1px solid var(--line); color: #fff; border-radius: 8px; padding: 4px 7px; cursor: pointer; font-size: 14px; }
#feed { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
#feed div { background: var(--panel); padding: 3px 9px; border-radius: 8px; width: max-content; animation: feedin .2s ease-out; }
#feed .t0 { color: var(--coral); } #feed .t1 { color: var(--kelp); } #feed i { color: var(--dim); font-style: normal; margin: 0 5px; }
@keyframes feedin { from { transform: translateX(-12px); opacity: 0; } }

#minimap { position: absolute; right: 12px; bottom: 14px; width: 256px; height: 160px; background: rgba(13,21,22,.72); border: 1px solid var(--line); border-radius: 10px; }
body.watch #minimap { display: none; }
.tag-n.viewer .nm::before { content: "💬 "; }
#chatlog .sys { font-weight: 700; }
#chatlog img.inl { height: 22px; vertical-align: middle; }
/* ---- bottom ---- */
#bottom { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
#me { display: flex; align-items: center; gap: 14px; }
#hpbar { width: 260px; height: 12px; border-radius: 7px; background: rgba(0,0,0,.55); overflow: hidden; border: 1px solid var(--line); }
#hp { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #5ee08a, #a8f07a); transition: width .12s; }
#hp.low { background: linear-gradient(90deg, #ff5a4d, #ff9a5a); }
#coins { position: relative; font-size: 14px; color: var(--gold); font-variant-numeric: tabular-nums; background: var(--panel); padding: 3px 11px; border-radius: 10px; }
#coins b { font-size: 17px; }
#coinfloat span { position: absolute; right: 0; top: -6px; color: var(--gold); font-weight: 800; animation: coin 1s ease-out forwards; }
@keyframes coin { to { transform: translateY(-32px); opacity: 0; } }
#guns { display: flex; gap: 6px; pointer-events: auto; }
.gun { position: relative; width: 78px; height: 62px; border-radius: 11px; background: var(--panel); border: 1px solid var(--line); color: var(--text); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-family: inherit; overflow: hidden; padding: 0; }
.gun .k { position: absolute; top: 3px; left: 6px; font-size: 10px; color: var(--dim); font-weight: 700; }
.gun .n { font-size: 13px; font-weight: 800; } .gun .c { font-size: 11px; color: var(--gold); font-variant-numeric: tabular-nums; }
.gun .dot { width: 22px; height: 5px; border-radius: 3px; margin-bottom: 3px; }
.gun.locked { opacity: .55; } .gun.locked.afford { opacity: 1; border-color: var(--gold); }
.gun.owned .c { color: var(--dim); }
.gun.on { border-color: #fff; background: rgba(255,255,255,.16); transform: translateY(-3px); }
.gun .cd { position: absolute; left: 0; bottom: 0; height: 3px; background: #fff; width: 0; }
.gun.art { margin-left: 10px; }

/* ---- chat ---- */
#chat { position: absolute; left: 12px; bottom: 92px; width: 330px; }
#chatlog { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; max-height: 190px; overflow: hidden; font-size: 13px; text-shadow: 0 1px 2px #000; margin-bottom: 6px; }
#chatlog div { background: rgba(13,21,22,.55); padding: 2px 8px; border-radius: 7px; width: fit-content; max-width: 100%; word-break: break-word; }
#chatlog b.t0 { color: var(--coral); } #chatlog b.t1 { color: var(--kelp); } #chatlog b.tw { color: #c9a4ff; } #chatlog .sys { color: var(--gold); }
#chatbox { pointer-events: auto; width: 100%; background: var(--panel); border: 1px solid var(--line); color: #fff; border-radius: 9px; padding: 7px 10px; font: inherit; font-size: 13px; outline: none; opacity: .55; }
#chatbox:focus { opacity: 1; border-color: #fff; }
#help { position: absolute; left: 12px; bottom: 6px; font-size: 11px; color: var(--dim); opacity: .7; }

/* ---- centre messages, scoreboard ---- */
#center { position: absolute; top: 30%; left: 0; right: 0; text-align: center; font-weight: 900; letter-spacing: .08em; text-shadow: 0 3px 14px rgba(0,0,0,.8); }
#center .big { font-size: 58px; } #center .sub { font-size: 18px; color: var(--dim); letter-spacing: .04em; font-weight: 600; margin-top: 6px; }
#center .t0 { color: var(--coral); } #center .t1 { color: var(--kelp); }
#board { position: absolute; top: 80px; left: 50%; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; display: flex; gap: 22px; backdrop-filter: blur(6px); }
#board table { border-collapse: collapse; font-size: 13px; min-width: 250px; font-variant-numeric: tabular-nums; }
#board th { text-align: left; font-size: 12px; letter-spacing: .12em; padding-bottom: 6px; } #board td { padding: 2px 8px 2px 0; }
#board td.num { text-align: right; } #board tr.me td { color: #fff; font-weight: 800; } #board tr.bot td { color: var(--dim); }

/* ---- join ---- */
#join { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, rgba(13,21,22,.55), rgba(13,21,22,.94)); }
#join.gone { display: none; }
.card { width: min(430px, 92vw); text-align: center; }
h1 { font-size: 54px; margin: 0; letter-spacing: .06em; font-weight: 900; color: var(--coral); line-height: 1; }
h1 em { font-style: normal; color: var(--kelp); }
.tag { color: var(--dim); margin: 10px 0 22px; }
#bar { height: 6px; background: rgba(255,255,255,.1); border-radius: 4px; overflow: hidden; } #barfill { display: block; height: 100%; width: 0; background: var(--kelp); transition: width .2s; }
#loadtext { display: block; margin-top: 8px; font-size: 12px; color: var(--dim); }
#joinform { display: flex; gap: 8px; user-select: text; }
#name { flex: 1; min-width: 0; background: rgba(255,255,255,.08); border: 1px solid var(--line); color: #fff; border-radius: 11px; padding: 12px 14px; font: inherit; font-size: 16px; outline: none; }
#name:focus { border-color: var(--kelp); }
#play, #watch { border: 0; border-radius: 11px; font: inherit; font-weight: 900; letter-spacing: .1em; cursor: pointer; padding: 0 20px; }
#play { background: var(--coral); color: #1d0e06; font-size: 16px; } #play:hover { filter: brightness(1.1); }
#watch { background: rgba(255,255,255,.1); color: var(--text); font-weight: 600; letter-spacing: 0; font-size: 13px; }
#joinnote { min-height: 18px; font-size: 13px; color: var(--gold); margin: 12px 0 0; }
.keys { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 12px; color: var(--dim); text-align: left; }
kbd { background: rgba(255,255,255,.12); border-radius: 5px; padding: 1px 6px; font: inherit; font-weight: 700; color: var(--text); }

body.watch #bottom, body.watch #chatbox, body.watch #help, body.watch #mute { display: none; }