/* 牌局教練。只有教練帳號看得到,所以獨立一支檔案,整個拿掉也不影響遊戲。 */

/* 教練列:夾在牌型提示與控制列之間,一行高。
   手機上垂直空間很緊,所以永遠只佔一行,細節點開抽屜看。 */
.coach-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  /* 右邊讓出表情按鈕的位置:它浮在控制列上方這條帶子的右端(42px + 間距) */
  width: calc(100% - 60px);
  min-height: 32px;
  margin: 0 0 var(--sp-2);
  padding: 4px var(--sp-2) 4px 4px;
  font: inherit;
  font-size: var(--t-xs);
  color: var(--ink-100);
  text-align: left;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--hair, rgba(255,255,255,.1));
  border-radius: var(--r-md);
  cursor: pointer;
}
.coach-bar[hidden] { display: none; }
/* 換桌鈕浮在同一條帶子的左端(見 online.css .switch-btn)。教練列出現時,
   換桌鈕收成跟表情鈕一樣的 44px 方塊(只留圖示,排隊中照樣是金框),教練列讓出左邊 */
.dock:has(> .coach-bar:not([hidden])) .coach-bar {
  width: calc(100% - 120px);
  margin-left: 60px;
}
.dock:has(> .coach-bar:not([hidden])) .switch-btn { width: 44px; padding: 0; justify-content: center; }
.dock:has(> .coach-bar:not([hidden])) #switchLabel { display: none; }
.coach-bar:focus-visible { outline: 2px solid var(--brass-300); outline-offset: 2px; }
.coach-bar.turn { border-color: var(--brass-500); background: rgba(237,180,11,.08); }
.coach-bar.ok   { border-color: rgba(92,196,128,.55); }
.coach-bar.warn { border-color: rgba(240,128,96,.6); }

.coach-tag {
  flex: 0 0 auto;
  padding: 2px 6px;
  font-size: var(--t-3xs);
  font-weight: 700;
  color: #1a1405;
  background: var(--brass-400);
  border-radius: var(--r-sm);
}
.coach-bar.ok .coach-tag   { background: #5cc480; }
.coach-bar.warn .coach-tag { background: #f08060; }
.coach-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coach-more { flex: 0 0 auto; color: var(--ink-400); font-size: var(--t-md); line-height: 1; }

/* 被建議的那顆按鈕:金色外框,不改按鈕本身的顏色(那是動作的語意) */
.btn.coach-pick { box-shadow: 0 0 0 2px var(--brass-300), 0 0 14px -2px rgba(237,180,11,.7); }

/* ---------- 抽屜內容 ---------- */
.coach-body { overflow-y: auto; font-size: var(--t-sm); color: var(--ink-100); }
.coach-sec + .coach-sec { margin-top: var(--sp-5); }
.coach-sec h3 {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink-400);
  margin-bottom: var(--sp-2);
}
.coach-rec { font-size: var(--t-lg); font-weight: 700; color: var(--brass-300); margin-bottom: var(--sp-2); }
.coach-why, .coach-tips { padding-left: 1.1em; line-height: 1.55; }
.coach-why li + li, .coach-tips li + li { margin-top: 2px; }

.coach-lesson {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  background: rgba(237,180,11,.07);
  border-left: 3px solid var(--brass-400);
  border-radius: var(--r-sm);
  line-height: 1.55;
}
.coach-lesson b { display: block; color: var(--brass-200); margin-bottom: 2px; }

.coach-opp {
  padding: var(--sp-3);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--hair, rgba(255,255,255,.1));
  border-radius: var(--r-md);
}
.coach-opp + .coach-opp { margin-top: var(--sp-2); }
.coach-opp.tilted { border-color: rgba(240,128,96,.6); }
.coach-opp-head { display: flex; justify-content: space-between; gap: var(--sp-2); align-items: baseline; }
.coach-opp-name { font-weight: 700; color: var(--ink-50); }
.coach-opp-style { font-size: var(--t-xs); color: var(--brass-300); white-space: nowrap; }
.coach-stats {
  margin: 4px 0 2px;
  font-size: var(--t-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink-200);
  word-spacing: 2px;
}
.coach-note { font-size: var(--t-2xs); color: var(--ink-400); }
.coach-tips { margin-top: var(--sp-2); font-size: var(--t-xs); }

.coach-gloss { margin-top: var(--sp-5); font-size: var(--t-xs); color: var(--ink-200); line-height: 1.55; }
.coach-gloss summary { cursor: pointer; color: var(--ink-400); margin-bottom: var(--sp-1); }
.coach-gloss p + p { margin-top: 2px; }
.coach-disclaimer { margin-top: var(--sp-4); font-size: var(--t-2xs); color: var(--ink-400); }

/* ---------- 還沒開通:教練列變成入口 ---------- */
.coach-bar.locked { border-style: dashed; border-color: rgba(237,180,11,.45); }
.coach-bar.locked .coach-text { color: var(--ink-200, var(--ink-100)); }

.coach-actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); }
.coach-cta {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 44px;
  text-decoration: none;
}

/* 有真人在桌:只做事後檢討 */
.coach-mode {
  margin-bottom: var(--sp-4);
  padding: var(--sp-3);
  background: rgba(255,255,255,.04);
  border-radius: var(--r-sm);
  line-height: 1.55;
}
.coach-why li.coach-good::marker { color: #5cc480; }
.coach-why li.coach-bad::marker  { color: #f08060; }

/* ---------- 答題換骰子(public/quiz.js) ---------- */
.quiz-body { overflow-y: auto; font-size: var(--t-sm); color: var(--ink-100); }
.quiz-progress { font-size: var(--t-xs); color: var(--ink-400); margin-bottom: var(--sp-2); }
.quiz-q { font-size: var(--t-md); font-weight: 700; line-height: 1.5; margin-bottom: var(--sp-3); }
.quiz-options { display: flex; flex-direction: column; gap: var(--sp-2); }
.quiz-opt { min-height: 44px; justify-content: flex-start; text-align: left; white-space: normal; line-height: 1.4; }
.quiz-opt:disabled { opacity: 1; }
.quiz-opt.picked { border-color: var(--brass-300); }
.quiz-opt.right  { border-color: #5cc480; background: rgba(92,196,128,.14); }
.quiz-opt.wrong  { border-color: #f08060; background: rgba(240,128,96,.14); }
.quiz-verdict { margin-top: var(--sp-3); font-weight: 700; }
.quiz-verdict.ok  { color: #5cc480; }
.quiz-verdict.bad { color: #f08060; }
.quiz-explain { margin-top: var(--sp-1); line-height: 1.6; color: var(--ink-200, var(--ink-100)); }
.quiz-summary { margin-top: var(--sp-4); padding: var(--sp-3); border-radius: var(--r-sm); line-height: 1.55; }
.quiz-summary.ok  { background: rgba(92,196,128,.1); border-left: 3px solid #5cc480; }
.quiz-summary.bad { background: rgba(240,128,96,.08); border-left: 3px solid #f08060; }
.quiz-next { margin-top: var(--sp-3); min-height: 44px; }