/* 大屏：固定設計畫布（wide 3840x2160 / portrait 1080x1920），由 display.js 整體縮放。
   畫布永遠分三格（A 座 / 中間 / B 座），每格內容置中並留邊，所以唔會壓到三合一屏嘅接縫。
   所有尺寸用 --u 做單位。 */
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body { font-family: "Noto Sans HK", "Microsoft JhengHei", "PingFang HK", "Heiti TC", sans-serif; color: #fff; }

#stage {
  position: fixed; left: 0; top: 0;
  transform-origin: 0 0;
  display: flex;
  background: #07090d;
  overflow: hidden;
  --u: 40px;
}
#stage.arr-cols { flex-direction: row; }
#stage.arr-rows { flex-direction: column; }
#stage.lay-wide.arr-rows { --u: 30px; }
#stage.lay-portrait { --u: 20px; }

.panel {
  flex: 1 1 0; min-width: 0; min-height: 0;
  box-sizing: border-box;
  padding: calc(var(--u) * 2);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  --c1: #e8eef7; --c2: #5b6b82; --bg: #10151d;
}

/* ---------- 座位 ---------- */
.seat { transition: background .6s; }
.seat.taken {
  background:
    radial-gradient(ellipse at 50% 40%, var(--c2) 0%, transparent 70%),
    var(--bg);
}
.seat.taken::after {            /* 主題邊框 */
  content: ""; position: absolute;
  left: calc(var(--u) * .8); top: calc(var(--u) * .8); right: calc(var(--u) * .8); bottom: calc(var(--u) * .8);
  border: calc(var(--u) * .12) solid var(--c1);
  opacity: .55; pointer-events: none;
}

.card { display: flex; align-items: center; justify-content: center; text-align: center; max-width: 100%; }
.arr-cols .card { flex-direction: column; }
.arr-rows .card { flex-direction: row; text-align: left; }

.avatar {
  flex: none;
  width: calc(var(--u) * 14); height: calc(var(--u) * 14);
  border-radius: 50%;
  box-sizing: border-box;
  border: calc(var(--u) * .35) solid var(--c1);
  background: radial-gradient(circle at 50% 35%, var(--c2), var(--bg) 85%);
  color: var(--c1);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 calc(var(--u) * 2.5) var(--c2);
}
.avatar svg { width: 62%; height: 62%; }

.who { min-width: 0; }
.arr-cols .who { margin-top: calc(var(--u) * 1.6); max-width: 100%; }
.arr-rows .who { margin-left: calc(var(--u) * 2); }
.seatTag {
  font-size: calc(var(--u) * 1.1); letter-spacing: .3em; font-weight: 700;
  color: var(--c1); opacity: .8;
}
.name {
  font-size: calc(var(--u) * 3.2); font-weight: 900; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 0 calc(var(--u) * .8) var(--c2);
}
.title {
  display: inline-block;
  margin-top: calc(var(--u) * .5);
  padding: calc(var(--u) * .2) calc(var(--u) * .9);
  font-size: calc(var(--u) * 1.3); font-weight: 700;
  color: var(--bg); background: var(--c1);
  border-radius: calc(var(--u) * 1);
}
.title:empty { display: none; }

/* 空座位 */
.empty { display: flex; align-items: center; justify-content: center; text-align: center; }
.arr-cols .empty { flex-direction: column; }
.arr-rows .empty { flex-direction: row; text-align: left; }
.qr {
  flex: none;
  width: calc(var(--u) * 12); height: calc(var(--u) * 12);
  background: #fff; color: #000;
  border-radius: calc(var(--u) * .6);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.qr svg { width: 100%; height: 100%; display: block; }
.qr .qrUrl { font-size: calc(var(--u) * .55); word-break: break-all; padding: calc(var(--u) * .6); }
.arr-cols .emptyText { margin-top: calc(var(--u) * 1.6); }
.arr-rows .emptyText { margin-left: calc(var(--u) * 2); }
.emptyText .big { font-size: calc(var(--u) * 2.6); font-weight: 900; letter-spacing: .15em; }
.emptyText .small { font-size: calc(var(--u) * 1.3); color: #9aa7b8; margin-top: calc(var(--u) * .4); }

/* ---------- 中間 ---------- */
.mid { flex-direction: column; text-align: center; }
.arr-rows .mid { flex-direction: row; }
.logo { font-size: calc(var(--u) * 4.5); font-weight: 900; letter-spacing: .12em; }
.game { font-size: calc(var(--u) * 1.6); color: #9aa7b8; letter-spacing: .4em; margin-top: calc(var(--u) * .6); }
.arr-rows .midText { margin: 0 calc(var(--u) * 3); }
.screenId { font-size: calc(var(--u) * 1); color: #55606f; margin-top: calc(var(--u) * 1.2); letter-spacing: .2em; }
.vs {
  display: none;
  font-size: calc(var(--u) * 11); font-weight: 900; font-style: italic; line-height: 1;
  background: linear-gradient(100deg, var(--vsA, #fff) 20%, #fff 50%, var(--vsB, #fff) 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: vsPulse 2.4s ease-in-out infinite;
}
#stage.is-vs .vs { display: block; }
#stage.is-vs .logo { font-size: calc(var(--u) * 2); }
#stage.is-vs .game, #stage.is-vs .screenId { display: none; }
#stage.is-vs.arr-cols .logo { margin-top: calc(var(--u) * 2); }
@keyframes vsPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* ---------- 入場特效 ---------- */
#entrance {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background: var(--bg);
  --c1: #fff; --c2: #666; --bg: #000;
  overflow: hidden;
  animation: entFade 3.4s linear forwards;
}
#entrance[hidden] { display: none; }
@keyframes entFade { 0% { opacity: 0; } 6% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }

#entrance .fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#entrance.anim-slash .fx {
  background: linear-gradient(115deg, transparent 30%, var(--c2) 45%, var(--c1) 50%, var(--c2) 55%, transparent 70%);
  animation: fxSlash 1.1s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes fxSlash { from { transform: translateX(-100%); } to { transform: translateX(0); opacity: .55; } }
#entrance.anim-burst .fx {
  background: radial-gradient(circle at 50% 50%, var(--c1) 0%, var(--c2) 25%, transparent 60%);
  animation: fxBurst 1.2s ease-out both;
}
@keyframes fxBurst { from { transform: scale(.05); opacity: 1; } to { transform: scale(2.2); opacity: .5; } }
#entrance.anim-rise .fx {
  background: linear-gradient(0deg, var(--c2) 0%, transparent 75%);
  animation: fxRise 1.2s ease-out both;
}
@keyframes fxRise { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* 入場名片只放喺中間一格，避開接縫 */
#entrance .entBox {
  position: absolute; box-sizing: border-box; padding: calc(var(--u) * 2);
  display: flex; align-items: center; justify-content: center;
}
.arr-cols #entrance .entBox { left: 33.333%; width: 33.334%; top: 0; height: 100%; }
.arr-rows #entrance .entBox { top: 33.333%; height: 33.334%; left: 0; width: 100%; }
#entrance .card { animation: entCard .9s cubic-bezier(.2, 1.4, .4, 1) .25s both; }
@keyframes entCard { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- 校準 ---------- */
#calib {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background:
    linear-gradient(rgba(255,255,255,.18) 2px, transparent 2px) 0 0 / 10% 10%,
    linear-gradient(90deg, rgba(255,255,255,.18) 2px, transparent 2px) 0 0 / 10% 10%;
  box-sizing: border-box; border: 6px solid #0f0;
  pointer-events: none;
}
#calib[hidden] { display: none; }
#calib .seam { position: absolute; background: #f33; }
#calib .seam.v { top: 0; height: 100%; width: 6px; margin-left: -3px; }
#calib .seam.h { left: 0; width: 100%; height: 6px; margin-top: -3px; }
#calib .info {
  position: absolute; left: 50%; top: 4%; transform: translateX(-50%);
  background: rgba(0,0,0,.8); padding: .4em 1em; font-size: calc(var(--u) * 1.1); white-space: nowrap;
}

#soundHint {
  position: fixed; right: 12px; bottom: 12px;
  background: rgba(0,0,0,.75); border: 1px solid #fff; border-radius: 6px;
  padding: 6px 12px; font-size: 14px;
}
#soundHint[hidden] { display: none; }