/* ============================================================
   ESCAPE THE VIVA — Mode additions
   Practice vs Viva selector, "Ask The Professor" lifeline,
   and the answer-explanation box.
   ============================================================ */

/* ---------- Mode selector (start screen) ---------- */
.mode-selector { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.mode-btns { display: flex; gap: 6px; }
.mode-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: clamp(6px,1.4vw,9px) clamp(10px,2vw,14px);
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: #aaa;
  font-size: clamp(11px,2.2vw,13px);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}
.mode-btn small { font-weight: 500; font-size: clamp(8px,1.5vw,10px); color: #777; letter-spacing: .2px; }
.mode-btn:hover { border-color: rgba(255,255,255,0.3); color: #fff; }
.mode-btn.active { border-color: #4ecdc4; background: rgba(78,205,196,0.14); color: #4ecdc4; }
.mode-btn.active small { color: #4ecdc4; opacity: .8; }
.mode-btn[data-mode="viva"].active { border-color: #e74c3c; background: rgba(231,76,60,0.14); color: #e74c3c; }
.mode-btn[data-mode="viva"].active small { color: #e74c3c; opacity: .8; }

/* ---------- Mode tag in the in-game context strip ---------- */
#game-screen .rd-tag.mode {
  background: rgba(231,76,60,.16);
  color: #ff9d9d;
  border: 1px solid rgba(231,76,60,.35);
}
#game-screen .rd-tag.mode.practice {
  background: rgba(78,205,196,.16);
  color: #8fe9df;
  border: 1px solid rgba(78,205,196,.35);
}

/* ---------- Timer hidden in Practice mode ---------- */
#game-screen #timer-display.practice-hidden { display: none !important; }

/* ---------- "Ask The Professor" lifeline button ---------- */
#game-screen .rd-life.ask {
  background: linear-gradient(160deg, rgba(150, 90, 220, .45), rgba(90, 45, 150, .5));
  border-color: rgba(190, 140, 240, .4);
}
#game-screen .rd-life.ask b { color: #d9b8ff; }

/* ---------- Ask The Professor modal ---------- */
.ask-prof-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(5,5,10,0.72);
  backdrop-filter: blur(3px);
  padding: 16px;
}
.ask-prof-modal.open { display: flex; }
.ask-prof-box {
  width: min(420px, 100%);
  background: linear-gradient(160deg, #1c1230, #120a20);
  border: 1.5px solid rgba(190,140,240,0.4);
  border-radius: 16px;
  padding: clamp(16px,3vw,22px);
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  animation: askProfIn 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes askProfIn {
  from { transform: scale(0.9) translateY(10px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.ask-prof-title { font-size: clamp(15px,3vw,19px); font-weight: 900; color: #d9b8ff; margin-bottom: 4px; }
.ask-prof-sub { font-size: clamp(10px,2vw,12px); color: #b9a6d6; margin-bottom: 14px; }
.ask-prof-options { display: flex; gap: 10px; margin-bottom: 12px; }
.ask-prof-opt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: 12px;
  border: 1.5px solid rgba(190,140,240,0.35);
  background: rgba(190,140,240,0.08);
  color: #f0e6ff;
  font-size: clamp(11px,2.2vw,13px);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.ask-prof-opt small { font-weight: 500; color: #b9a6d6; }
.ask-prof-opt:hover { border-color: #d9b8ff; background: rgba(190,140,240,0.18); transform: translateY(-2px); }
.ask-prof-opt .apo-ic { font-size: clamp(20px,4vw,26px); }
.ask-prof-cancel {
  background: none;
  border: none;
  color: #887b9e;
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}
.ask-prof-cancel:hover { color: #d9b8ff; }

@media (max-width: 420px) {
  .ask-prof-options { flex-direction: column; }
  .ask-prof-opt { flex-direction: row; justify-content: flex-start; text-align: left; }
}
.explain-box {
  background: rgba(78,205,196,0.1);
  border: 1.5px solid rgba(78,205,196,0.35);
  border-radius: 8px;
  padding: clamp(7px,1.6vw,11px) clamp(10px,2vw,14px);
  color: #b6f2ec;
  font-size: clamp(10px,2vw,12px);
  font-weight: 600;
  line-height: 1.4;
  flex-shrink: 0;
  margin-bottom: 9px;
  animation: hintAppear 0.3s ease;
}
.explain-box.bad {
  background: rgba(231,76,60,0.1);
  border-color: rgba(231,76,60,0.35);
  color: #ffc4bc;
}
.explain-box b { color: inherit; }

@media (max-width: 820px) {
  .mode-btns { gap: 6px; }
  .mode-btn { font-size: 11px; padding: 7px 9px; }
  .mode-btn small { font-size: 8px; }
}

/* ============================================================
   HUD FIX — the 3rd lifeline (Ask The Professor) pushed the top
   HUD past the viewport edge on laptop/tablet widths, clipping
   the button. Never let the HUD hard-overflow again: compact it
   at medium widths, and fall back to a scroll instead of a clip
   at the tightest widths. Also stop the score value from
   line-wrapping inside its chip.
   ============================================================ */

/* Never silently clip HUD content — scroll instead of cutting a button in half. */
#game-screen .rd-hud,
#game-screen .rd-context {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#game-screen .rd-hud::-webkit-scrollbar,
#game-screen .rd-context::-webkit-scrollbar { display: none; }

/* Keep chip numbers (esp. the score, e.g. "212 pts") on one line instead of wrapping. */
#game-screen .rd-chip .tx { flex-shrink: 0; }
#game-screen .rd-chip .lb,
#game-screen .rd-chip .vl { white-space: nowrap; }

/* Shorten the 3rd lifeline's footprint a little everywhere. */
#game-screen .rd-life.ask b { color: #d9b8ff; }

/* Compact the HUD before it ever needs to scroll. The desktop layout is a
   FIXED 920×600 card (see #game-container in style.css) — it does not grow
   with a wide monitor, so this must key off that same fixed-card condition,
   not an arbitrary viewport-width range (a 1920px-wide window still renders
   the same 920px-wide card). Scoped above the phone breakpoint (821px+) so
   it doesn't fight the dedicated mobile HUD layout in redesign.css. */
@media (min-width: 821px) {
  #game-screen .rd-hud { gap: clamp(4px,1vw,10px); padding: 7px 10px; }
  #game-screen .rd-chip .lb { display: none; }               /* icon + value says enough */
  #game-screen .rd-chip .ic { font-size: 16px; }
  #game-screen .rd-chip .vl { font-size: 14px; }
  #game-screen .rd-chip .mini { width: 30px; }
  #game-screen .rd-chip.q { padding-left: 8px; }
  #game-screen .rd-hud .rd-lifelines { padding-left: 8px; gap: 5px; }
  #game-screen .rd-life { padding: 6px 9px; font-size: 11px; gap: 4px; }
  #game-screen .rd-life .li-ic { font-size: 13px; }
  #game-screen .rd-life span:not(.li-ic) { max-width: 46px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- Mobile action row: 4 controls (Hint · Timer · 50/50 · Ask) ---------- */
@media (max-width: 820px) {
  #game-screen .rd-actionrow { gap: 6px; flex-wrap: nowrap; }
  #game-screen .rd-actionrow .rd-life { padding: 8px 5px; font-size: 10px; gap: 3px; min-width: 0; }
  #game-screen .rd-actionrow .rd-life span:not(.li-ic) { overflow: hidden; text-overflow: ellipsis; }
  #game-screen .rd-actionrow .rd-life .li-ic { font-size: 13px; }
  #game-screen .rd-actionrow .rd-life b { font-size: 9px; }
  #game-screen .rd-actionrow .rd-timer { width: 58px; }
}

@media (max-width: 380px) {
  #game-screen .rd-actionrow .rd-life span:not(.li-ic) { display: none; }  /* icon + count only on very small phones */
  #game-screen .rd-actionrow .rd-life { padding: 8px 6px; }
  #game-screen .rd-actionrow .rd-timer { width: 50px; }
}

/* ---------- iOS notch / Android gesture-bar safe areas ---------- */
@media (max-width: 820px) {
  #game-container {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  #game-screen.active {
    padding-top: max(7px, env(safe-area-inset-top));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
  #game-screen .next-btn { margin-bottom: max(6px, env(safe-area-inset-bottom)); }
  .ask-prof-modal, .notes-modal { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}