:root {
  --ink: #e8eef7;
  --dim: #8c9bb0;
  --neon: #8dff5a;
  --blood: #ff3b52;
  --panel: rgba(8, 12, 18, 0.82);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: #05060a; overflow: hidden;
  color: var(--ink);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  user-select: none; -webkit-user-select: none;
}

#stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }

#frame {
  position: relative;
  width: 100vw; height: 56.25vw;
  max-height: 100vh; max-width: 177.78vh;
  overflow: hidden;
  --u: 10px;
}

#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- HUD ---------- */
.hud { position: absolute; inset: 0; pointer-events: none; }

#topLeft { position: absolute; left: calc(var(--u) * 3); top: calc(var(--u) * 2.4); }
#waveLbl {
  font-size: calc(var(--u) * 3.1); font-weight: 800; letter-spacing: .06em;
  text-shadow: 0 2px 0 #000, 0 0 22px rgba(141, 255, 90, .45);
  color: var(--neon);
}
#waveSub { font-size: calc(var(--u) * 1.25); color: var(--dim); margin-top: calc(var(--u) * .4); letter-spacing: .18em; }

#hpRow { display: flex; gap: calc(var(--u) * .45); margin-top: calc(var(--u) * 1.1); }
.pip {
  width: calc(var(--u) * 1.55); height: calc(var(--u) * 1.05);
  border-radius: calc(var(--u) * .2);
  background: linear-gradient(180deg, #ff6a7c, #c11227);
  box-shadow: 0 0 10px rgba(255, 59, 82, .55), inset 0 -2px 0 rgba(0, 0, 0, .35);
  transition: background .25s, box-shadow .25s, opacity .25s;
}
.pip.off { background: rgba(255, 255, 255, .1); box-shadow: none; opacity: .5; }

#board {
  position: absolute; right: calc(var(--u) * 3); top: calc(var(--u) * 2.4);
  min-width: calc(var(--u) * 23);
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: calc(var(--u) * .8);
  padding: calc(var(--u) * .9) calc(var(--u) * 1.2);
  backdrop-filter: blur(4px);
}
.brow {
  display: flex; align-items: center; gap: calc(var(--u) * .7);
  padding: calc(var(--u) * .32) 0;
  font-size: calc(var(--u) * 1.35);
}
.brow .dot { width: calc(var(--u) * .85); height: calc(var(--u) * .85); border-radius: 50%; flex: none; }
.brow .nm { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(var(--u) * 11); }
.brow .kk { color: var(--dim); font-size: calc(var(--u) * 1.05); min-width: calc(var(--u) * 3.4); text-align: right; }
.brow .sc { font-weight: 800; font-variant-numeric: tabular-nums; min-width: calc(var(--u) * 4.2); text-align: right; }
.brow.me .nm { color: #fff; }

#feed {
  position: absolute; left: calc(var(--u) * 3); bottom: calc(var(--u) * 3);
  display: flex; flex-direction: column-reverse; gap: calc(var(--u) * .35);
  font-size: calc(var(--u) * 1.2);
}
.fitem {
  background: rgba(0, 0, 0, .45); padding: calc(var(--u) * .28) calc(var(--u) * .8);
  border-radius: calc(var(--u) * .4); border-left: calc(var(--u) * .22) solid currentColor;
  opacity: .95;
}

#banner {
  position: absolute; left: 0; right: 0; top: 26%;
  text-align: center; opacity: 0;
  font-size: calc(var(--u) * 7); font-weight: 900; letter-spacing: .04em;
  text-shadow: 0 4px 0 #000, 0 0 40px rgba(255, 59, 82, .6);
}
#banner.show { animation: bannerIn 2.2s ease-out both; }
@keyframes bannerIn {
  0% { opacity: 0; transform: scale(.82); }
  12% { opacity: 1; transform: scale(1.04); }
  22% { transform: scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.06); }
}

#hint {
  position: absolute; right: calc(var(--u) * 17); bottom: calc(var(--u) * 2.5);
  font-size: calc(var(--u) * 1.15); color: rgba(255, 255, 255, .38); letter-spacing: .1em;
}
#conn {
  position: absolute; left: 50%; bottom: calc(var(--u) * 1.2); transform: translateX(-50%);
  font-size: calc(var(--u) * 1.05); color: var(--blood); opacity: 0; transition: opacity .3s;
}
#conn.on { opacity: .9; }

/* ---------- 覆蓋層 ---------- */
.overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(10, 20, 14, .82), rgba(3, 4, 8, .96));
  backdrop-filter: blur(3px);
}
.overlay.hidden { display: none; }

.panel {
  text-align: center;
  padding: calc(var(--u) * 2.4) calc(var(--u) * 4);
  max-width: 90%;
}
.brand {
  font-size: calc(var(--u) * 6.4); font-weight: 900; letter-spacing: .1em;
  color: #fff; text-shadow: 0 0 30px rgba(141, 255, 90, .5), 0 5px 0 #12210f;
}
.brand span { color: var(--blood); text-shadow: 0 0 34px rgba(255, 59, 82, .7), 0 5px 0 #2a0910; }
.sub { color: var(--dim); font-size: calc(var(--u) * 1.5); margin-top: calc(var(--u) * .6); letter-spacing: .22em; }

.joinRow {
  display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 3);
  margin: calc(var(--u) * 2.6) 0 calc(var(--u) * 1.6);
}
#qrWrap {
  background: #fff; padding: calc(var(--u) * .7); border-radius: calc(var(--u) * .8);
  box-shadow: 0 0 40px rgba(141, 255, 90, .25);
  display: flex;
}
#qr { width: calc(var(--u) * 13); height: calc(var(--u) * 13); display: block; image-rendering: pixelated; }

.codeBox { text-align: left; }
.codeLbl { color: var(--dim); font-size: calc(var(--u) * 1.3); letter-spacing: .3em; }
#code {
  font-size: calc(var(--u) * 7.4); font-weight: 900; letter-spacing: .12em; line-height: 1;
  color: var(--neon); text-shadow: 0 0 30px rgba(141, 255, 90, .5);
  font-variant-numeric: tabular-nums;
}
.tip { color: var(--dim); font-size: calc(var(--u) * 1.15); margin-top: calc(var(--u) * .7); }

#lobbyPlayers {
  display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1); justify-content: center;
  min-height: calc(var(--u) * 4.4); margin-bottom: calc(var(--u) * 1.8);
}
.chip {
  display: flex; align-items: center; gap: calc(var(--u) * .55);
  background: rgba(255, 255, 255, .07); border-radius: calc(var(--u) * 2);
  padding: calc(var(--u) * .5) calc(var(--u) * 1.3);
  font-size: calc(var(--u) * 1.4);
  border: 1px solid rgba(255, 255, 255, .07);
}
.chip .dot { width: calc(var(--u) * .9); height: calc(var(--u) * .9); border-radius: 50%; }
.chip.wait { color: var(--dim); border-style: dashed; }

button {
  font-family: inherit; cursor: pointer; border: 0;
  background: linear-gradient(180deg, #a4ff74, #46b81f);
  color: #08210a; font-weight: 900; letter-spacing: .12em;
  font-size: calc(var(--u) * 2.1);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 4.4);
  border-radius: calc(var(--u) * .9);
  box-shadow: 0 6px 0 #1d6b0a, 0 0 34px rgba(141, 255, 90, .35);
  transition: transform .08s, box-shadow .08s, filter .15s;
}
button:disabled { filter: grayscale(.7) brightness(.7); cursor: default; box-shadow: 0 6px 0 #2a2a2a; }
button.press { transform: translateY(4px); box-shadow: 0 2px 0 #1d6b0a; }
button:focus { outline: none; }
button:focus-visible, body.kbd button:focus { box-shadow: 0 6px 0 #1d6b0a, 0 0 0 calc(var(--u) * .35) rgba(141, 255, 90, .55); }

/* 結算 */
#over .brand { color: var(--blood); text-shadow: 0 0 34px rgba(255, 59, 82, .6), 0 5px 0 #2a0910; }
#overStats { margin: calc(var(--u) * 2) auto calc(var(--u) * 2.2); border-collapse: collapse; font-size: calc(var(--u) * 1.7); }
#overStats th { color: var(--dim); font-weight: 500; font-size: calc(var(--u) * 1.2); padding: 0 calc(var(--u) * 1.2) calc(var(--u) * .8); letter-spacing: .1em; }
#overStats td { padding: calc(var(--u) * .55) calc(var(--u) * 1.2); border-top: 1px solid rgba(255, 255, 255, .08); font-variant-numeric: tabular-nums; }
#overStats td.nm { text-align: left; font-weight: 700; }
#overStats tr.win td { color: var(--neon); }
#overStats .dot { display: inline-block; width: calc(var(--u) * .85); height: calc(var(--u) * .85); border-radius: 50%; margin-right: calc(var(--u) * .6); vertical-align: middle; }
.overSub { color: var(--dim); font-size: calc(var(--u) * 1.4); letter-spacing: .1em; }

/* 右下角系統小按鈕（回主畫面 / 靜音） */
#sysBtns {
  position: absolute; right: calc(var(--u) * 3); bottom: calc(var(--u) * 1.6);
  display: flex; align-items: center; gap: calc(var(--u) * .7);
  pointer-events: auto;
}
.mini {
  font-size: calc(var(--u) * 1.35); padding: calc(var(--u) * .45) calc(var(--u) * .9);
  background: rgba(255,255,255,.08); color: #cfdcea; border-radius: calc(var(--u) * .5);
  box-shadow: none; letter-spacing: .04em; font-weight: 700;
}
.mini:hover, .mini:focus-visible { background: rgba(255,255,255,.16); color: #fff; box-shadow: none; }
#muteBtn.mini { padding: calc(var(--u) * .45) calc(var(--u) * .7); }
body.in-lobby #lobbyBtn { display: none; }

/* 結算兩個按鈕並排 */
.btnRow { display: flex; gap: calc(var(--u) * 1.4); justify-content: center; align-items: center; }
button.ghost {
  background: transparent; color: #cfdcea; font-weight: 700;
  border: 1px solid rgba(255,255,255,.28); box-shadow: none;
  font-size: calc(var(--u) * 1.6); padding: calc(var(--u) * .9) calc(var(--u) * 2.4);
}
button.ghost:hover, button.ghost:focus-visible { background: rgba(255,255,255,.1); color: #fff; }

/* 大廳時把 HUD 收乾淨 */
body.in-lobby #topLeft,
body.in-lobby #board,
body.in-lobby #feed,
body.in-over #topLeft,
body.in-over #board,
body.in-over #feed { opacity: 0; transition: opacity .3s; }