/* ============================================================
   Word Quest – style.css
   ============================================================ */

/* ── 1. Google Fonts & Root Variables ──────────────────────── */
:root {
  --font-main: 'Fredoka', 'Nunito', sans-serif;
  --chat-font-size: 1.25rem;
  --bot-message-font-size: 1.4rem;

  /* Palette */
  --green-dark:   #2d6a4f;
  --green-mid:    #40916c;
  --green-light:  #74c69d;
  --green-pale:   #d8f3dc;
  --brown-dark:   #5c3d11;
  --brown-mid:    #8b5e3c;
  --brown-light:  #c9956b;
  --cream:        #fef9ef;
  --warm-yellow:  #f9c74f;
  --gold:         #e9c46a;
  --orange:       #f4a261;
  --coral:        #e76f51;
  --sky:          #90e0ef;
  --ocean-dark:   #0077b6;
  --ocean-mid:    #00b4d8;

  /* UI */
  --card-radius:  20px;
  --btn-radius:   50px;
  --shadow-soft:  0 4px 24px rgba(0,0,0,0.10);
  --shadow-card:  0 8px 32px rgba(0,0,0,0.14);
  --shadow-float: 0 12px 40px rgba(0,0,0,0.18);
  --transition:   0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 2. Reset & Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  font-family: var(--font-main);
  background: var(--cream);
  overflow: hidden;
}

/* ── 3. Screen System ──────────────────────────────────────── */
.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(20px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    visibility 0s linear 0.4s;
  contain: layout paint style;
  z-index: 1;
}
.screen.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateY(0);
  transition-delay: 0s;
  z-index: 2;
}

/* Inactive screens used to keep their composited animations running behind the
   visible screen. Pause them as a safeguard in addition to hiding the screen. */
.screen:not(.active) *,
.screen:not(.active) *::before,
.screen:not(.active) *::after {
  animation-play-state: paused !important;
}

/* ── 4. Background Layers ──────────────────────────────────── */
.bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bg-forest {
  background-image: url('../assets/elements/bg1.jpg');
  background-size: cover;
  background-position: center;
}
.bg-forest::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 249, 235, 0.32);
}
#screen-book-select .bg-forest::after {
  display: none;
}

/* ── 5. ════════════════════════════════════════════════════════
        SCREEN 1 – Book Selection
   ════════════════════════════════════════════════════════════ */
.select-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 0;
}

/* Header / Logo */
.select-header {
  display: none;
}
.logo-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,0.96);
  border-radius: 24px;
  padding: 14px 32px;
  box-shadow: var(--shadow-card);
  border: 2px solid rgba(255,255,255,0.9);
}
.logo-icon { font-size: 2.8rem; }
.logo-text h1 {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--green-dark);
  line-height: 1;
  letter-spacing: -0.5px;
}
.logo-text p {
  font-size: 0.95rem;
  color: var(--brown-mid);
  font-weight: 500;
}

/* Select Body */
.select-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  flex: 1;
  /* The supplied composition is 1920 × 1080 in CSS pixels.  Using the
     smaller viewport axis preserves that composition on other 16:9 sizes. */
  padding-top: min(14.0625vw, 25vh);
}
.select-title {
  display: none;
}
.select-subtitle {
  display: none;
}

/* Book Grid */
.book-grid {
  display: flex;
  gap: min(1.666667vw, 2.962963vh);
  justify-content: center;
  align-items: stretch;
  flex-wrap: nowrap;
}

.book-card {
  background: linear-gradient(180deg, #fbf9ed 0%, #fbf7ec 100%);
  border-radius: min(1.041667vw, 1.851852vh);
  padding:
    min(1.822917vw, 3.240741vh)
    min(1.822917vw, 3.240741vh)
    min(1.770833vw, 3.148148vh);
  width: min(22.1875vw, 39.444444vh);
  height: min(28.125vw, 50vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  cursor: pointer;
  border: 0;
  box-shadow: 0 min(0.416667vw, 0.740741vh) min(1.666667vw, 2.962963vh) rgba(54, 38, 20, 0.13);
  transition: var(--transition);
  text-decoration: none;
  overflow: hidden;
}
.book-card:hover {
  transform: translateY(max(-0.520833vw, -0.925926vh)) scale(1.025);
  box-shadow: var(--shadow-float);
}

.book-cover {
  width: 100%;
  aspect-ratio: 4 / 3;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: min(1.25vw, 2.222222vh);
  box-shadow: none;
  transition: transform 0.3s;
}
.book-card:hover .book-cover { transform: scale(1.05) rotate(-2deg); }

.book-info {
  width: 100%;
  margin-top: min(1.197917vw, 2.12963vh);
  text-align: center;
}
.book-name {
  font-size: min(1.458333vw, 2.592593vh);
  font-weight: 700;
  color: #461c06;
  line-height: min(1.875vw, 3.333333vh);
  white-space: nowrap;
}
.book-subtitle {
  margin-top: min(0.260417vw, 0.462963vh);
  font-size: min(1.145833vw, 2.037037vh);
  line-height: min(1.666667vw, 2.962963vh);
  color: #55270f;
  white-space: nowrap;
}
.book-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--green-pale);
  color: var(--green-dark);
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
}

.book-play-btn {
  width: 100%;
  height: min(3.958333vw, 7.037037vh);
  min-height: min(3.958333vw, 7.037037vh);
  margin-top: min(1.666667vw, 2.962963vh);
  padding: 0;
  background: linear-gradient(180deg, #529051 0%, #347346 100%);
  color: white;
  border: none;
  border-radius: var(--btn-radius);
  font-family: var(--font-main);
  font-size: min(1.458333vw, 2.592593vh);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--transition);
  box-shadow: 0 4px 16px rgba(64,145,108,0.4);
  white-space: nowrap;
}
.book-play-btn:hover {
  background: linear-gradient(180deg, #478447 0%, #28663a 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(64,145,108,0.5);
}

/* Leaves decoration */
.leaves-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.leaf {
  position: absolute;
  font-size: 2rem;
  opacity: 0.4;
}
.leaf-1 { top: 10%; left: 5%; }
.leaf-2 { top: 20%; right: 8%; transform: translateY(-6px) rotate(8deg); }
.leaf-3 { bottom: 15%; left: 10%; transform: translateY(-10px) rotate(12deg); }


/* ── 6. ════════════════════════════════════════════════════════
        SCREEN 2 – Game Play
   ════════════════════════════════════════════════════════════ */
#screen-game-play {
  background: linear-gradient(160deg, #e8f5e9 0%, #fff8e1 50%, #e3f2fd 100%);
}
#game-bg {
  background-image: url('../assets/elements/bg2.jpg');
  background-size: cover;
  background-position: center;
  opacity: 1;
}

/* ─ HUD ─ */
.game-hud {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  gap: 12px;
}
.hud-left, .hud-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.hud-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.9);
  border: 2px solid rgba(255,255,255,0.95);
  border-radius: 50px;
  padding: 8px 16px;
  font-family: var(--font-main);
  font-size: 1rem;
  font-weight: 700;
  box-shadow: var(--shadow-soft);
  cursor: default;
}
.hud-icon { font-size: 1.2rem; }
.turn-badge { color: var(--green-dark); }
.hint-counter { color: var(--brown-dark); }
.score-badge { color: var(--green-dark); }

/* ─ Main Game Area ─ */
.game-main {
  position: relative;
  z-index: 5;
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 0 20px;
  overflow: hidden;
}

/* ─ Left: Image Card Area ─ */
.image-card-area {
  flex: 0 0 46%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 4px 0 4px 8px;
}

/* Card reveal container */
.image-card-flipper {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 3 / 4;
  cursor: default;
  position: relative;
}

/* Cross-fading avoids keeping a large 3D scene on the GPU while idle. */
.image-card-flipper .card-face {
  position: absolute;
  inset: 0;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: var(--shadow-float);
  border: 9px solid rgba(255,255,255,0.95);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s;
}

/* Front face: visible by default */
.image-card-flipper .card-front {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  background: #075a37;
}

/* Back face is not painted until the card is revealed. */
.image-card-flipper .card-back {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.025);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
  background: #f7e7bd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Revealed state */
.image-card-flipper.flipped .card-front {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.975);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}
.image-card-flipper.flipped .card-back {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s;
}

/* Front artwork and a static glow around the question mark */
.card-front-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.question-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.question-glow {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 58%;
  height: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 220, 92, 0.38) 0%,
    rgba(249, 199, 79, 0.16) 38%,
    rgba(249, 199, 79, 0) 76%
  );
}

/* Back face image */
.word-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.word-label {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 8%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  color: var(--brown-dark);
  font-family: var(--font-main);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  overflow-wrap: anywhere;
  pointer-events: none;
}
.hidden { display: none !important; }

/* ─ Ready Overlay ─ */
.ready-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 60, 35, 0.72);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0s;
  pointer-events: all;
}
.ready-overlay.ready-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.ready-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.ready-emoji {
  font-size: 5rem;
  animation: readyBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes readyBounce {
  from { transform: scale(0) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);  opacity: 1; }
}
.ready-countdown {
  font-size: 7rem;
  font-weight: 900;
  color: var(--warm-yellow);
  text-shadow: 0 0 40px rgba(249,199,79,0.8), 0 4px 12px rgba(0,0,0,0.4);
  line-height: 1;
  animation: countPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes countPop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.ready-label {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  letter-spacing: 1px;
  animation: readyBounce 0.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ─ Right: Chat Area ─ */
.chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  /* Top/bottom padding is set dynamically by JS to match the image card's bounds */
  box-sizing: border-box;
}

.bot-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.96);
  width: 100%;
  min-height: 88px;
  border-radius: 28px;
  padding: 14px 28px;
  box-shadow: var(--shadow-soft);
  border: 2px solid rgba(255,255,255,0.9);
  flex-shrink: 0;
}
.bot-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--green-light);
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.bot-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bot-name {
  font-size: var(--chat-font-size);
  font-weight: 700;
  color: var(--green-dark);
}
.bot-speaking-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 14px;
}
.bot-speaking-indicator span {
  display: block;
  width: 5px;
  height: 5px;
  background: var(--green-mid);
  border-radius: 50%;
  opacity: 0;
}
.bot-speaking-indicator.active span {
  animation: speakDot 1.2s ease-in-out infinite;
  opacity: 1;
}
.bot-speaking-indicator span:nth-child(1) { animation-delay: 0s; }
.bot-speaking-indicator span:nth-child(2) { animation-delay: 0.2s; }
.bot-speaking-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes speakDot {
  0%, 80%, 100% { transform: scale(0.8); opacity: 0.3; }
  40% { transform: scale(1.3); opacity: 1; }
}

/* Chat Messages */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-right: 0;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.chat-messages::-webkit-scrollbar { display: none; }

/* Message bubbles */
.msg-bubble {
  display: flex;
  gap: 8px;
  width: 100%;
  animation: msgSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.msg-bubble .bubble-content,
.bot-thinking-bubble {
  overflow-wrap: anywhere;
}
.msg-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.msg-bubble.bot .msg-avatar {
  display: block;
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 1;
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border-color: var(--green-light);
}
@keyframes msgSlideIn {
  from { transform: translateY(20px) scale(0.95); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Bot messages (left aligned) */
.msg-bubble.bot {
  position: relative;
  align-items: flex-start;
}
.msg-bubble.bot .bubble-content {
  background: rgba(255,255,255,0.97);
  width: fit-content;
  border-radius: 28px;
  padding: 28px 18px 28px 84px;
  max-width: 80%;
  font-size: var(--bot-message-font-size);
  font-weight: 600;
  color: var(--brown-dark);
  box-shadow: var(--shadow-soft);
  border: 1.5px solid rgba(255,255,255,0.9);
  line-height: 1.6;
}
.msg-bubble.bot .bubble-content.description-bubble {
  font-size: var(--bot-message-font-size);
  font-weight: 600;
  color: var(--brown-dark);
}

/* User messages (right aligned) */
.msg-bubble.user {
  align-items: flex-end;
  justify-content: flex-end;
}
.msg-bubble.user .bubble-content {
  background: linear-gradient(135deg, var(--green-mid), var(--green-dark));
  color: white;
  border-radius: 20px 20px 4px 20px;
  padding: 12px 20px;
  max-width: 80%;
  font-size: var(--chat-font-size);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(64,145,108,0.35);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Hint Toast */
.hint-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #fff3cd, #fff8e7);
  border: 2px solid var(--warm-yellow);
  width: 100%;
  min-height: 88px;
  border-radius: 28px;
  padding: 18px 28px;
  font-size: var(--chat-font-size);
  font-weight: 600;
  color: var(--brown-dark);
  box-shadow: var(--shadow-soft);
  animation: hintSlide 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}
@keyframes hintSlide {
  from { transform: translateX(-20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.hint-icon { font-size: 1.4rem; }

/* ─ Footer / Action Buttons ─ */
.game-footer {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 16px 24px 20px;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 124px;
  min-height: 112px;
  border: none;
  border-radius: 18px;
  cursor: pointer;
  font-family: var(--font-main);
  font-weight: 700;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.action-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background 0.2s;
}
.action-btn:hover::after { background: rgba(255,255,255,0.15); }
.action-btn:active { transform: scale(0.95); }

.action-icon { font-size: 2rem; line-height: 1; }
.action-label { font-size: 1.1rem; }

/* Hint Button */
.hint-btn {
  background: linear-gradient(135deg, #f9c74f, #f3a712);
  color: var(--brown-dark);
  padding: 18px 24px;
  box-shadow: 0 4px 16px rgba(249,199,79,0.45);
}
.hint-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 20px rgba(249,199,79,0.6);
}
.hint-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Skip Button */
.skip-btn {
  background: rgba(255,255,255,0.96);
  color: var(--brown-mid);
  padding: 18px 24px;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: var(--shadow-soft);
}
.skip-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: var(--shadow-card);
}

/* Type Button */
.type-btn {
  background: rgba(255,255,255,0.96);
  color: var(--brown-mid);
  padding: 18px 24px;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: var(--shadow-soft);
}
.type-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: var(--shadow-card);
}

/* Speak Button */
.speak-btn {
  background: linear-gradient(135deg, var(--green-mid), var(--green-dark));
  color: white;
  min-width: 250px;
  padding: 18px 36px;
  border-radius: var(--btn-radius);
  font-size: 1.2rem;
  box-shadow: 0 4px 20px rgba(64,145,108,0.45);
  flex-direction: row;
  gap: 12px;
}
.speak-btn .action-label { font-size: 1.45rem; }
.speak-btn:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 8px 28px rgba(64,145,108,0.55);
}
.speak-btn.recording {
  background: linear-gradient(135deg, var(--coral), #c0392b);
  animation: recordPulse 1s ease-in-out infinite;
}
@keyframes recordPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(231,111,81,0.5); }
  50% { box-shadow: 0 4px 36px rgba(231,111,81,0.9), 0 0 0 8px rgba(231,111,81,0.15); }
}

/* Next Button */
.next-btn {
  background: linear-gradient(135deg, var(--warm-yellow), var(--orange));
  color: var(--brown-dark);
  padding: 14px 40px;
  border-radius: var(--btn-radius);
  font-size: 1.25rem;
  font-weight: 800;
  box-shadow: 0 4px 20px rgba(249, 199, 79, 0.55);
  flex-direction: row;
  gap: 10px;
  animation: popNext 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.next-btn .action-label { font-size: 1.25rem; }
.next-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 28px rgba(249, 199, 79, 0.7);
}
@keyframes popNext {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* ─ Type Modal ─ */
.type-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.type-modal-inner {
  background: white;
  border-radius: 24px;
  padding: 32px;
  width: 400px;
  max-width: 90vw;
  box-shadow: var(--shadow-float);
  animation: modalSlide 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@keyframes modalSlide {
  from { transform: translateY(40px) scale(0.95); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.type-modal-inner h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--brown-dark);
  text-align: center;
}
#type-input {
  width: 100%;
  padding: 14px 18px;
  border-radius: 14px;
  border: 2px solid var(--green-light);
  font-family: var(--font-main);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--brown-dark);
  outline: none;
  transition: border-color 0.2s;
}
#type-input:focus { border-color: var(--green-mid); box-shadow: 0 0 0 3px rgba(64,145,108,0.15); }
.type-modal-actions {
  display: flex;
  gap: 12px;
}
.modal-btn {
  flex: 1;
  padding: 12px;
  border-radius: var(--btn-radius);
  border: none;
  font-family: var(--font-main);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}
.cancel-btn {
  background: #f0f0f0;
  color: #666;
}
.cancel-btn:hover { background: #e0e0e0; }
.submit-btn {
  background: linear-gradient(135deg, var(--green-mid), var(--green-dark));
  color: white;
  box-shadow: 0 4px 16px rgba(64,145,108,0.4);
}
.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(64,145,108,0.5);
}

/* ─ Result Toast ─ */
.result-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200;
  pointer-events: none;
}
.result-toast-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 24px 40px;
  border-radius: 24px;
  background: rgba(255,255,255,0.98);
  box-shadow: var(--shadow-float);
  animation: resultPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes resultPop {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.result-emoji { font-size: 3rem; }
.result-text { font-size: 1.6rem; font-weight: 800; color: var(--brown-dark); }
.result-pts {
  font-size: 2rem;
  font-weight: 900;
}
.result-pts.positive { color: var(--green-dark); }
.result-pts.negative { color: var(--coral); }
.result-pts.neutral { color: var(--brown-mid); }

.result-toast.fade-out {
  animation: fadeOut 0.4s ease forwards;
}
@keyframes fadeOut {
  to { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}


/* ── 7. ════════════════════════════════════════════════════════
        SCREEN 3 – Results
   ════════════════════════════════════════════════════════════ */
#screen-results {
  --results-u: min(0.052083333vw, 0.092592593vh);
  --results-brown: #451a04;
  --results-green: #43874a;
  transform: none;
}

#screen-results.active {
  transform: none;
}

.results-bg {
  background-image: url('../assets/elements/bg2.jpg');
  background-position: center;
  background-size: cover;
}

.results-hud {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.results-hud-pill {
  position: absolute;
  top: calc(25 * var(--results-u));
  height: calc(60 * var(--results-u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--results-u));
  border-radius: calc(30 * var(--results-u));
  background: #faf8ec;
  color: #3f7135;
  box-shadow: 0 calc(4 * var(--results-u)) calc(15 * var(--results-u)) rgba(50, 31, 16, 0.16);
  font-size: calc(21 * var(--results-u));
  font-weight: 700;
  line-height: 1;
}

.results-hud-icon {
  font-size: calc(25 * var(--results-u));
  line-height: 1;
}

.results-turn {
  left: calc(35 * var(--results-u));
  width: calc(180 * var(--results-u));
}

.results-hints {
  right: calc(208.5 * var(--results-u));
  width: calc(107.5 * var(--results-u));
}

.results-score {
  right: calc(50 * var(--results-u));
  width: calc(143.5 * var(--results-u));
}

.results-container {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.results-panel {
  position: absolute;
  left: calc(170 * var(--results-u));
  top: calc(247 * var(--results-u));
  width: calc(1580 * var(--results-u));
  height: calc(563 * var(--results-u));
  overflow: hidden;
  border-radius: calc(30 * var(--results-u));
  background: #fff8e9;
  box-shadow: 0 calc(8 * var(--results-u)) calc(24 * var(--results-u)) rgba(57, 37, 13, 0.17);
}

.results-title {
  position: absolute;
  top: calc(24 * var(--results-u));
  left: 0;
  width: 100%;
  color: var(--results-brown);
  font-size: calc(42 * var(--results-u));
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  letter-spacing: calc(0.4 * var(--results-u));
}

.final-score-display {
  position: absolute;
  left: calc(23 * var(--results-u));
  top: calc(77 * var(--results-u));
  width: calc(300 * var(--results-u));
  height: calc(470 * var(--results-u));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.results-trophy {
  width: calc(300 * var(--results-u));
  height: calc(300 * var(--results-u));
  flex: 0 0 auto;
  display: block;
  object-fit: cover;
  animation: trophyBounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes trophyBounce {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.final-score-label {
  margin-top: calc(2 * var(--results-u));
  color: var(--results-brown);
  font-size: calc(28 * var(--results-u));
  font-weight: 700;
  line-height: calc(42 * var(--results-u));
}

.final-score-number {
  height: calc(90 * var(--results-u));
  color: var(--results-green);
  font-size: calc(78 * var(--results-u));
  font-weight: 700;
  line-height: calc(90 * var(--results-u));
  animation: scoreCount 1s ease-out;
}

.final-score-points {
  color: var(--results-brown);
  font-size: calc(25 * var(--results-u));
  font-weight: 700;
  line-height: calc(38 * var(--results-u));
}

@keyframes scoreCount {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Word Review */
.word-review-list {
  position: absolute;
  left: calc(337 * var(--results-u));
  top: calc(107 * var(--results-u));
  width: calc(1215 * var(--results-u));
  height: calc(410 * var(--results-u));
  display: grid;
  grid-template-columns: repeat(6, calc(190 * var(--results-u)));
  gap: calc(15 * var(--results-u));
  overflow: visible;
}

.review-item {
  position: relative;
  width: calc(190 * var(--results-u));
  height: calc(410 * var(--results-u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: calc(20 * var(--results-u)) calc(20 * var(--results-u));
  overflow: hidden;
  border: 0;
  border-radius: calc(28 * var(--results-u));
  background: #fbf9f0;
  box-shadow: 0 calc(8 * var(--results-u)) calc(18 * var(--results-u)) rgba(70, 49, 25, 0.17);
  transition: var(--transition);
  animation: reviewSlide 0.4s ease both;
}

@keyframes reviewSlide {
  from { transform: translateY(calc(18 * var(--results-u))); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.review-avatar {
  width: calc(50 * var(--results-u));
  height: calc(50 * var(--results-u));
  flex: 0 0 auto;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 calc(4 * var(--results-u)) calc(10 * var(--results-u)) rgba(41, 27, 13, 0.25);
}

.review-image {
  width: calc(150 * var(--results-u));
  height: calc(200 * var(--results-u));
  flex: 0 0 auto;
  display: block;
  margin-top: calc(20 * var(--results-u));
  border-radius: calc(15 * var(--results-u));
  object-fit: cover;
}

.review-word {
  width: 100%;
  margin-top: calc(17 * var(--results-u));
  overflow: hidden;
  color: var(--results-brown);
  font-size: calc(24 * var(--results-u));
  font-weight: 700;
  line-height: calc(32 * var(--results-u));
  text-align: center;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
}

.review-status {
  position: absolute;
  left: 50%;
  bottom: calc(20 * var(--results-u));
  width: calc(30 * var(--results-u));
  height: calc(30 * var(--results-u));
  display: block;
  transform: translateX(-50%);
}

/* Results Action Buttons */
.results-actions {
  position: absolute;
  left: 50%;
  top: calc(940 * var(--results-u));
  height: calc(100 * var(--results-u));
  display: flex;
  gap: calc(30 * var(--results-u));
  align-items: stretch;
  transform: translateX(-50%);
}

.results-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(15 * var(--results-u));
  height: calc(100 * var(--results-u));
  padding: 0;
  border-radius: calc(50 * var(--results-u));
  border: none;
  font-family: var(--font-main);
  font-size: calc(35 * var(--results-u));
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition);
}

.results-btn-icon {
  font-size: calc(42 * var(--results-u));
  line-height: 1;
}

.primary-btn {
  width: calc(290 * var(--results-u));
  background: linear-gradient(180deg, #57975f 0%, #367b48 100%);
  color: #fff8eb;
  box-shadow: 0 calc(6 * var(--results-u)) calc(20 * var(--results-u)) rgba(38, 88, 50, 0.32);
}

.primary-btn:hover {
  transform: translateY(calc(-3 * var(--results-u)));
  box-shadow: 0 calc(9 * var(--results-u)) calc(26 * var(--results-u)) rgba(38, 88, 50, 0.38);
}

.secondary-btn {
  width: calc(200 * var(--results-u));
  background: #fbf8ef;
  color: var(--results-brown);
  box-shadow: 0 calc(6 * var(--results-u)) calc(20 * var(--results-u)) rgba(50, 31, 16, 0.18);
}

.secondary-btn:hover {
  transform: translateY(calc(-3 * var(--results-u)));
  box-shadow: 0 calc(9 * var(--results-u)) calc(26 * var(--results-u)) rgba(50, 31, 16, 0.23);
}

/* ── 8. Inline Chat Voice Recording ───────────────────────────── */
.msg-bubble.user .bubble-content.recording-voice {
  background: linear-gradient(135deg, var(--green-mid), var(--green-dark));
  padding: 10px 18px;
  gap: 8px;
  min-width: 140px;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(64, 145, 108, 0.45);
  animation: pulseRecording 1.2s ease-in-out infinite alternate;
}
@keyframes pulseRecording {
  from { box-shadow: 0 4px 12px rgba(64, 145, 108, 0.35); }
  to   { box-shadow: 0 4px 20px rgba(116, 198, 157, 0.7); }
}

.inline-voice-mic {
  font-size: 1.1rem;
  animation: micBlink 0.8s ease-in-out infinite alternate;
}
@keyframes micBlink {
  from { opacity: 0.6; transform: scale(0.95); }
  to   { opacity: 1;   transform: scale(1.1); }
}

.inline-voice-wave {
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  height: 18px;
}

.inline-voice-bar {
  width: 3px;
  height: 14px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
  animation: inlineVoiceWave 0.6s ease-in-out infinite alternate;
}
.inline-voice-bar:nth-child(1) { height: 8px;  animation-delay: 0.0s; }
.inline-voice-bar:nth-child(2) { height: 16px; animation-delay: 0.15s; }
.inline-voice-bar:nth-child(3) { height: 10px; animation-delay: 0.3s; }
.inline-voice-bar:nth-child(4) { height: 18px; animation-delay: 0.45s; }
.inline-voice-bar:nth-child(5) { height: 12px; animation-delay: 0.6s; }

@keyframes inlineVoiceWave {
  from { transform: scaleY(0.35); opacity: 0.5; }
  to   { transform: scaleY(1);    opacity: 1; }
}

.inline-voice-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.3px;
}

/* ── 9. Utility Animations ────────────────────────────── */
@keyframes scoreJump {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}
.score-jump { animation: scoreJump 0.4s ease; }

/* ── 10. Mode Badge ─────────────────────────────────── */
.mode-badge {
  font-size: 0.85rem;
  padding: 6px 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
  border: 2px solid rgba(255,255,255,0.95);
  border-radius: 50px;
  box-shadow: var(--shadow-soft);
  transition: background 0.4s ease, border-color 0.4s ease;
  gap: 5px;
}
.mode-badge.describe-mode {
  background: linear-gradient(135deg, rgba(244,162,97,0.25), rgba(231,111,81,0.15));
  border-color: rgba(244,162,97,0.6);
  color: var(--brown-dark);
}
#mode-badge-icon { font-size: 1rem; }
#mode-badge-text { font-size: 0.82rem; font-weight: 700; }

/* ── 11. Bot-Guess Mode – Describe Speak Button ───────────── */
.speak-btn.describe-mode {
  background: linear-gradient(135deg, var(--orange), var(--coral));
  box-shadow: 0 4px 20px rgba(244,162,97,0.5);
}
.speak-btn.describe-mode:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 8px 28px rgba(244,162,97,0.65);
}
.speak-btn.describe-mode.recording {
  background: linear-gradient(135deg, #e55a2b, #c0392b);
  animation: recordPulse 1s ease-in-out infinite;
}

/* ── 12. Bot-Thinking Bubble ─────────────────────────── */
.bot-thinking-bubble {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.97);
  width: fit-content;
  border-radius: 28px;
  padding: 22px 28px 22px 84px;
  max-width: 80%;
  box-shadow: var(--shadow-soft);
  border: 1.5px solid rgba(255,255,255,0.9);
}
.thinking-dots {
  display: flex;
  gap: 5px;
  align-items: center;
}
.thinking-dot {
  width: 8px;
  height: 8px;
  background: var(--green-mid);
  border-radius: 50%;
  animation: thinkingPop 1.2s ease-in-out infinite;
}
.thinking-dot:nth-child(1) { animation-delay: 0s; }
.thinking-dot:nth-child(2) { animation-delay: 0.2s; }
.thinking-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes thinkingPop {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.35; }
  40% { transform: scale(1.2); opacity: 1; }
}
.thinking-label {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--brown-dark);
  font-style: italic;
}

/* ── 13. Bot-Guess Round Counter ──────────────────────── */
.bot-guess-round {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brown-mid);
  padding: 5px 12px;
  background: rgba(255,255,255,0.7);
  border-radius: 50px;
  border: 1.5px solid rgba(0,0,0,0.07);
  flex-shrink: 0;
  animation: msgSlideIn 0.3s ease;
}

/* ── 14. Scrollbar Global ────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }

/* ── 15. Screen 2 design-spec layout ─────────────────────────
   The supplied comp is 3840 × 2160 (2× a 1920 × 1080 CSS layout).
   Every measurement below is tied to that coordinate system. */
#screen-game-play {
  --game-x: min(0.052083333vw, 0.092592593vh);
  --game-green: #43874a;
  --game-brown: #451a04;
  transform: none;
}

#screen-game-play.active {
  transform: none;
}

#screen-game-play .game-hud {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: block;
  padding: 0;
  pointer-events: none;
}

#screen-game-play .hud-left,
#screen-game-play .hud-right {
  display: contents;
}

#screen-game-play .hud-btn {
  position: absolute;
  top: calc(25 * var(--game-x));
  height: calc(60 * var(--game-x));
  min-height: calc(60 * var(--game-x));
  padding: 0;
  gap: calc(10 * var(--game-x));
  justify-content: center;
  border: 0;
  border-radius: calc(30 * var(--game-x));
  background: #faf8ec;
  color: #3f7135;
  box-shadow: 0 calc(4 * var(--game-x)) calc(15 * var(--game-x)) rgba(50, 31, 16, 0.16);
  font-size: calc(21 * var(--game-x));
  line-height: 1;
  font-weight: 700;
}

#screen-game-play .hud-icon {
  font-size: calc(25 * var(--game-x));
  line-height: 1;
}

#screen-game-play .turn-badge {
  left: calc(35 * var(--game-x));
  width: calc(180 * var(--game-x));
}

#screen-game-play .mode-badge {
  display: none;
}

#screen-game-play .hint-counter {
  right: calc(208.5 * var(--game-x));
  width: calc(107.5 * var(--game-x));
}

#screen-game-play .score-badge {
  right: calc(50 * var(--game-x));
  width: calc(143.5 * var(--game-x));
}

#screen-game-play .game-main {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  padding: 0;
  overflow: visible;
}

#screen-game-play .image-card-area {
  position: absolute;
  left: calc(350 * var(--game-x));
  top: calc(200 * var(--game-x));
  width: calc(510 * var(--game-x));
  height: calc(680 * var(--game-x));
  padding: 0;
  display: block;
}

#screen-game-play .image-card-flipper {
  width: 100%;
  max-width: none;
  height: 100%;
  aspect-ratio: auto;
}

#screen-game-play .image-card-flipper .card-face {
  border: calc(10 * var(--game-x)) solid #faf2e5;
  border-radius: calc(31 * var(--game-x));
  box-shadow: 0 calc(7 * var(--game-x)) calc(22 * var(--game-x)) rgba(33, 21, 9, 0.18);
}

#screen-game-play .word-label {
  bottom: calc(54 * var(--game-x));
  font-size: calc(42 * var(--game-x));
}

#screen-game-play .chat-area {
  position: absolute;
  left: calc(902.5 * var(--game-x));
  top: calc(230 * var(--game-x));
  width: calc(665 * var(--game-x));
  height: calc(430 * var(--game-x));
  padding: 0 !important;
  gap: calc(15 * var(--game-x));
  overflow: hidden;
}

#screen-game-play .bot-header {
  width: 100%;
  min-height: calc(90 * var(--game-x));
  height: calc(90 * var(--game-x));
  gap: calc(20 * var(--game-x));
  padding: 0 calc(40 * var(--game-x));
  border: 0;
  border-radius: calc(34 * var(--game-x));
  background: #fbf8ef;
  box-shadow: 0 calc(7 * var(--game-x)) calc(18 * var(--game-x)) rgba(45, 40, 25, 0.19);
}

#screen-game-play .bot-avatar {
  width: calc(50 * var(--game-x));
  height: calc(50 * var(--game-x));
  border: 0;
  box-shadow: 0 calc(5 * var(--game-x)) calc(12 * var(--game-x)) rgba(0, 0, 0, 0.25);
}

#screen-game-play .bot-label {
  gap: calc(2 * var(--game-x));
}

#screen-game-play .bot-name {
  color: #28893b;
  font-size: calc(30 * var(--game-x));
  font-weight: 700;
  line-height: 1.1;
}

#screen-game-play .bot-speaking-indicator {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#screen-game-play .chat-messages {
  gap: calc(15 * var(--game-x));
  padding: 0;
}

#screen-game-play .msg-bubble {
  gap: 0;
  flex: 0 0 auto;
}

#screen-game-play .msg-bubble.bot .bubble-content {
  width: 100% !important;
  max-width: 100%;
  min-height: calc(90 * var(--game-x));
  padding:
    calc(20 * var(--game-x))
    calc(95 * var(--game-x))
    calc(20 * var(--game-x))
    calc(110 * var(--game-x));
  display: flex;
  align-items: center;
  border: 0;
  border-radius: calc(34 * var(--game-x));
  background: #fbf8ef;
  color: var(--game-brown);
  box-shadow: 0 calc(7 * var(--game-x)) calc(18 * var(--game-x)) rgba(45, 40, 25, 0.19);
  font-size: calc(30 * var(--game-x));
  font-weight: 600;
  line-height: 1.48;
  overflow-wrap: normal;
}

#screen-game-play .msg-bubble.bot .bubble-content.description-bubble {
  min-height: calc(220 * var(--game-x));
  color: var(--game-brown);
  font-size: calc(30 * var(--game-x));
  font-weight: 600;
}

#screen-game-play .msg-bubble.bot .msg-avatar {
  left: calc(40 * var(--game-x));
  top: calc(20 * var(--game-x));
  width: calc(50 * var(--game-x));
  height: calc(50 * var(--game-x));
  border: 0;
  box-shadow: 0 calc(5 * var(--game-x)) calc(12 * var(--game-x)) rgba(0, 0, 0, 0.25);
}

#screen-game-play .msg-bubble.user {
  position: relative;
  width: 100%;
  min-height: calc(90 * var(--game-x));
}

#screen-game-play .msg-bubble.user .bubble-content {
  width: 100%;
  max-width: 100%;
  min-height: calc(90 * var(--game-x));
  padding: calc(18 * var(--game-x)) calc(100 * var(--game-x)) calc(18 * var(--game-x)) calc(40 * var(--game-x));
  border-radius: calc(34 * var(--game-x));
  background: linear-gradient(90deg, #4d9855, #347b45);
  box-shadow: 0 calc(7 * var(--game-x)) calc(18 * var(--game-x)) rgba(45, 75, 40, 0.2);
  color: #fff;
  font-size: calc(30 * var(--game-x));
  font-weight: 600;
  line-height: 1.15;
}

#screen-game-play .msg-bubble.user .msg-avatar {
  position: absolute;
  right: calc(40 * var(--game-x));
  top: 50%;
  transform: translateY(-50%);
  width: calc(50 * var(--game-x));
  height: calc(50 * var(--game-x));
  border: 0;
  box-shadow: 0 calc(5 * var(--game-x)) calc(12 * var(--game-x)) rgba(0, 0, 0, 0.25);
}

#screen-game-play .hint-toast {
  width: 100%;
  min-height: calc(90 * var(--game-x));
  padding: calc(18 * var(--game-x)) calc(40 * var(--game-x));
  border-radius: calc(34 * var(--game-x));
  font-size: calc(25 * var(--game-x));
}

#screen-game-play .game-footer {
  position: absolute;
  left: calc(627.5 * var(--game-x));
  top: calc(925 * var(--game-x));
  z-index: 10;
  width: calc(662.5 * var(--game-x));
  height: calc(120 * var(--game-x));
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: calc(15 * var(--game-x));
  padding: 0;
}

#screen-game-play .action-btn {
  min-width: calc(120 * var(--game-x));
  width: calc(120 * var(--game-x));
  min-height: calc(120 * var(--game-x));
  height: calc(120 * var(--game-x));
  gap: calc(8 * var(--game-x));
  padding: 0;
  border-radius: calc(28 * var(--game-x));
}

#screen-game-play .action-icon {
  font-size: calc(42 * var(--game-x));
}

#screen-game-play .action-label {
  color: var(--game-brown);
  font-size: calc(22 * var(--game-x));
  font-weight: 700;
  line-height: 1;
}

#screen-game-play .hint-btn {
  background: linear-gradient(180deg, #ffc04d, #ff9e18);
  box-shadow: 0 calc(5 * var(--game-x)) calc(16 * var(--game-x)) rgba(161, 92, 9, 0.26);
}

#screen-game-play .skip-btn,
#screen-game-play .type-btn {
  border: 0;
  background: #fbf8ef;
  box-shadow: 0 calc(5 * var(--game-x)) calc(16 * var(--game-x)) rgba(50, 31, 16, 0.16);
}

#screen-game-play .skip-btn {
  margin-left: calc(2.5 * var(--game-x));
}

#screen-game-play .speak-btn {
  width: calc(255 * var(--game-x));
  min-width: calc(255 * var(--game-x));
  border-radius: calc(60 * var(--game-x));
  flex-direction: row;
  gap: calc(16 * var(--game-x));
  background: linear-gradient(180deg, #5b9663, #39754a);
  box-shadow: 0 calc(5 * var(--game-x)) calc(18 * var(--game-x)) rgba(36, 91, 52, 0.32);
}

#screen-game-play .speak-btn .action-icon {
  font-size: calc(44 * var(--game-x));
}

#screen-game-play .speak-btn .action-label {
  color: #ffe0dc;
  font-size: calc(30 * var(--game-x));
}

#screen-game-play .next-btn {
  width: calc(255 * var(--game-x));
  min-width: calc(255 * var(--game-x));
  margin: calc(15 * var(--game-x)) auto 0;
  border-radius: calc(60 * var(--game-x));
  flex-direction: row;
  gap: calc(14 * var(--game-x));
  background: linear-gradient(180deg, #ffd25a 0%, #ffb521 100%);
  box-shadow: 0 calc(6 * var(--game-x)) calc(18 * var(--game-x)) rgba(161, 92, 9, 0.28);
}

#screen-game-play .next-btn .action-icon {
  font-size: calc(44 * var(--game-x));
}

#screen-game-play .next-btn .action-label {
  color: #411400;
  font-size: calc(30 * var(--game-x));
  font-weight: 700;
}

@media (max-aspect-ratio: 4/3) {
  #screen-game-play .chat-area {
    overflow-y: auto;
  }
}

/* ── 16. Screen 2 / YOU Describe mode ───────────────────────
   Interface 4 uses the same 1920 × 1080 coordinate system, but has
   its own amber conversation palette and a taller message viewport. */
#screen-game-play.bot-guess-mode .chat-area {
  height: calc(470 * var(--game-x));
}

#screen-game-play.bot-guess-mode .bot-name {
  color: #f0a307;
}

#screen-game-play.bot-guess-mode .msg-bubble.bot .bubble-content.description-bubble {
  min-height: calc(175 * var(--game-x));
}

#screen-game-play.bot-guess-mode .msg-bubble.user,
#screen-game-play.bot-guess-mode .msg-bubble.user .bubble-content {
  min-height: calc(175 * var(--game-x));
}

#screen-game-play.bot-guess-mode .msg-bubble.user .bubble-content {
  justify-content: flex-start;
  padding:
    calc(20 * var(--game-x))
    calc(110 * var(--game-x))
    calc(20 * var(--game-x))
    calc(40 * var(--game-x));
  background: linear-gradient(180deg, #f9c94d 0%, #f3b934 100%);
  color: var(--game-brown);
  font-size: calc(32 * var(--game-x));
  line-height: 1.4;
  text-align: left;
  box-shadow: 0 calc(7 * var(--game-x)) calc(18 * var(--game-x)) rgba(115, 73, 13, 0.2);
}

#screen-game-play.bot-guess-mode .game-footer {
  left: calc(765 * var(--game-x));
  width: calc(390 * var(--game-x));
}

#screen-game-play.bot-guess-mode .skip-btn {
  margin-left: 0;
}

#screen-game-play.bot-guess-mode .speak-btn,
#screen-game-play.bot-guess-mode .speak-btn.describe-mode {
  background: linear-gradient(180deg, #f8c649 0%, #f1ae29 100%);
  box-shadow: 0 calc(5 * var(--game-x)) calc(18 * var(--game-x)) rgba(135, 78, 8, 0.28);
}

#screen-game-play.bot-guess-mode .speak-btn .action-label {
  color: var(--game-brown);
}