/* 即時競賽（老師端 host.html / 學生端 play.html）專用樣式。
   依賴 base.css 的 token。 */

/* ---------- 連線狀態列 ---------- */
.conn {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface);
}
.conn .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--c-text-dim); flex: none;
}
.conn[data-state='open']        { background: var(--c-success-soft); }
.conn[data-state='open'] .dot   { background: var(--c-success); }
.conn[data-state='connecting']  { background: var(--c-warn-soft); }
.conn[data-state='connecting'] .dot {
  background: var(--c-warn);
  animation: pulse 1s ease-in-out infinite;
}
.conn[data-state='closed']      { background: var(--c-danger-soft); }
.conn[data-state='closed'] .dot { background: var(--c-danger); }
@keyframes pulse { 50% { opacity: .25; } }

/* ---------- 題目與選項（學生端） ---------- */
.qmeta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; justify-content: space-between;
}
.team-badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: 999px;
  background: var(--c-primary-soft);
  font-weight: 700;
}
.team-badge .emoji { font-size: 28px; line-height: 1; }

/* 音效開關固定推到 qmeta 最右邊，跟房況/題號分開 */
.sound-toggle { margin-left: auto; }

.prompt {
  font-size: var(--fs-xl);
  font-weight: 700;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.choices { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .choices--full { grid-template-columns: 1fr 1fr; }
}
.choice {
  min-height: 76px;
  padding: var(--sp-4);
  font-size: var(--fs-lg);
  font-weight: 600;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  justify-content: flex-start;
}
/* 選項左邊的數字徽章：對應鍵盤 1~9 直選，同時是視覺提示 */
.choice-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.8em;
  height: 1.8em;
  margin-right: var(--sp-3);
  border-radius: 50%;
  background: var(--c-surface-2);
  font-weight: 800;
  font-size: var(--fs-sm);
}
.choice-label { flex: 1 1 auto; min-width: 0; }

/* 答題後標記：顏色不是唯一線索，一律疊 ✓ / ✕ 符號（色盲學生也看得出來） */
.choice[data-mark='correct'] {
  background: var(--c-success-soft);
  border-color: var(--c-success);
}
.choice[data-mark='wrong'] {
  background: var(--c-danger-soft);
  border-color: var(--c-danger);
}
.choice[data-mark='correct']::after,
.choice[data-mark='wrong']::after {
  content: '';
  flex: none;
  margin-left: var(--sp-2);
  font-weight: 900;
}
.choice[data-mark='correct']::after { content: '✓'; color: var(--c-success); }
.choice[data-mark='wrong']::after { content: '✕'; color: var(--c-danger); }

/* 團體戰提示：正解不一定在你手上 */
.team-hint {
  border-left: 6px solid var(--c-primary);
  padding-left: var(--sp-4);
}

/* 作答頁底部永遠預留浮動回饋的高度，回饋才不會蓋住最後一個選項 */
#s-play { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }

/* 答題回饋 */
.feedback {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 30;
  width: min(92vw, 520px);
  font-size: var(--fs-xl);
  font-weight: 800;
  text-align: center;
  padding: var(--sp-4);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgb(0 0 0 / 22%);
}
.feedback[data-kind='correct'] { background: var(--c-success-soft); color: var(--c-success); }
.feedback[data-kind='wrong']   { background: var(--c-danger-soft); color: var(--c-danger); }
.feedback[data-kind='reset'] {
  background: var(--c-danger-soft);
  color: var(--c-danger);
  animation: shake .4s ease;
}
/* 置中靠 translateX(-50%)，晃動量要疊在它上面 */
@keyframes shake {
  0%, 100% { transform: translateX(-50%); }
  25% { transform: translate(calc(-50% - 10px)); }
  75% { transform: translate(calc(-50% + 10px)); }
}

/* ---------- Gimkit 儀表板 ---------- */
.stats {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 560px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  padding: var(--sp-3);
  border-radius: var(--radius);
  background: var(--c-surface-2);
  text-align: center;
  min-width: 0;
  overflow-wrap: anywhere;   /* $1,000,000,000 也不能把儀表板撐爆 */
}
.stat .k { display: block; font-size: var(--fs-sm); color: var(--c-text-dim); }
.stat .v { display: block; font-size: var(--fs-lg); font-weight: 800; }
.stat--money .v { color: var(--c-success); }

.tabs { display: flex; gap: var(--sp-2); }
.tabs .btn { flex: 1 1 0; }
.tabs .btn[aria-selected='true'] {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-primary-ink);
}

/* ---------- 商店 ---------- */
.shop { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 720px) { .shop { grid-template-columns: 1fr 1fr; } }
.up {
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
}
.up header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.up .up-name { font-weight: 800; font-size: var(--fs-lg); }
.up .up-lv { color: var(--c-text-dim); font-weight: 600; }
.up .up-now { margin: var(--sp-2) 0; }
.up .up-next { color: var(--c-text-dim); font-size: var(--fs-sm); }
.up .pips { display: flex; gap: 3px; margin: var(--sp-2) 0; }
.up .pips i {
  flex: 1 1 0; height: 8px; border-radius: 4px;
  background: var(--c-surface-2);
}
.up .pips i.on { background: var(--c-primary); }
.up[data-max='true'] { border-color: var(--c-success); }
/* 商店誠實揭露期望值：幾題回本，或明講回不了本 */
.up-payback { color: var(--c-text-dim); margin: 0 0 var(--sp-2); }
.up-payback--bad { color: var(--c-danger); font-weight: 700; }
.badge-max {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--c-success);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 800;
}

/* ---------- 排行榜 ---------- */
.board { list-style: none; margin: 0; padding: 0; }
.board li {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--c-border);
}
.board li:last-child { border-bottom: 0; }
.board .rank { width: 2.5em; font-weight: 800; color: var(--c-text-dim); }
.board .who { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.board .val {
  font-weight: 800; font-variant-numeric: tabular-nums;
  min-width: 0; overflow-wrap: anywhere; text-align: right;
}
.board li[data-me='true'] {
  background: var(--c-primary-soft);
  border-radius: var(--radius);
}

/* ---------- 老師端大螢幕 ---------- */
.stage { padding: var(--sp-4) var(--sp-5) var(--sp-6); min-width: 0; }
.stage h1 { font-size: var(--fs-2xl); min-width: 0; overflow-wrap: anywhere; }
/* 賽況標題列：房號／倒數／紅色「結束」鈕在任何投影解析度都不可被切掉 */
.stage .row--between > .row { flex: 0 1 auto; min-width: 0; justify-content: flex-end; }

.roomcode {
  font-size: var(--fs-3xl);
  font-weight: 900;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.joinbox {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  align-items: center;
}
.qr {
  image-rendering: pixelated;
  width: min(46vw, 260px);
  height: auto;
  background: #fff;
  padding: 8px;
  border-radius: var(--radius);
  border: 1px solid var(--c-border);
}
.joinurl {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
}

.playerchips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  padding: var(--sp-2) var(--sp-3);
  border-radius: 999px;
  background: var(--c-surface-2);
  font-weight: 600;
}
.chip[data-connected='false'] { opacity: .45; text-decoration: line-through; }

/* 賽馬圖 */
.race { display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); }
.lane {
  display: grid;
  /* 三欄都必須可以壓縮到 0，否則長隊名／大金額會把整條賽道推出畫面右緣
     （html 有 overflow-x:hidden，溢出的部分會被直接切掉，看起來像進度條爆出去）*/
  grid-template-columns: minmax(0, 22%) minmax(0, 1fr) minmax(0, auto);
  gap: var(--sp-3);
  align-items: center;
  min-width: 0;
}
.lane .who {
  font-size: var(--fs-lg);
  font-weight: 800;
  display: flex; align-items: center; gap: var(--sp-2);
  min-width: 0; overflow-wrap: anywhere;
}
/* 窄螢幕（老師用平板看賽況）改成兩列，進度條獨佔一整行 */
@media (max-width: 560px) {
  .lane {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    grid-template-areas: 'who val' 'track track';
    row-gap: var(--sp-2);
  }
  .lane .who { grid-area: who; }
  .lane .val { grid-area: val; }
  .lane .track { grid-area: track; }
}
.lane .who .emoji { font-size: clamp(28px, 4vw, 48px); }
.track {
  position: relative;
  height: clamp(28px, 4.5vh, 52px);
  border-radius: 999px;
  background: var(--c-surface-2);
  overflow: hidden;
}
.track .bar {
  position: absolute; inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-success));
  transition: width .45s cubic-bezier(.22, .8, .3, 1);
}
.lane .val {
  font-size: var(--fs-lg);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}
.lane[data-reset='true'] .track { animation: shake .4s ease; }
.lane[data-winner='true'] .who { color: var(--c-success); }

.winner {
  text-align: center;
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  background: var(--c-success-soft);
}
.winner .big { font-size: var(--fs-3xl); font-weight: 900; }
.winner .emoji { font-size: clamp(60px, 16vw, 180px); animation: pop .6s ease; }
@keyframes pop {
  0% { transform: scale(.3); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

/* 投影用：大螢幕字再放大、對比再拉高 */
@media (min-width: 1200px) {
  .stage { font-size: 20px; }
  .stage .chip { font-size: 20px; }
}