/* =====================================================
   BLUFF! — LIVE PHYSICS & ANIMATIONS UPGRADE
   (Does not alter original identity, colors, or layouts)
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700;900&display=swap');

/* Apply Arabic font fallback globally */
body, button, input, select, textarea {
  font-family: 'Nunito', 'Cairo', sans-serif !important;
}

/* ── 0. RESTORE INTENSE CONTRAST ─────────────────── */
:root {
  --ink: #0b081c !important; /* Pure, deep, comic-book black */
  --yellow: #ffb800 !important; /* Intensely saturated yellow */
  --mint: #00e676 !important; /* Intensely saturated mint/green */
  --pink: #ff3385 !important; /* Intensely saturated pink */
  --red: #ff3b30 !important; /* Intensely saturated red/orange */
  --purple: #5b1eff !important; /* Vibrant deep purple */
}

body {
  background:
    radial-gradient(circle at 15% 8%, rgba(255,255,255,.24) 0 2px, transparent 3px),
    linear-gradient(135deg, #5b1eff 0%, #1a0866 100%) !important; /* Deep, saturated violet */
  background-size: 22px 22px, auto !important; /* FIX: Restore the dotted pattern size */
}

/* ── 1. CONTINUOUS "LIVE" FLOATING ANIMATIONS ──── */

/* The main logo floats gently like it's breathing */
.logo-mark {
  animation: logoFloat 4s ease-in-out infinite;
}
@keyframes logoFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); } /* Preserving original rotation */
  50% { transform: translateY(-8px) rotate(-2deg); }
}

/* Category & Trick Cards float gently when waiting */
.category-card {
  animation: gentleFloat 6s ease-in-out infinite alternate;
}
/* Stagger the animations so they don't move in sync */
.category-card:nth-child(2n) { animation-delay: -2s; animation-duration: 5s; }
.category-card:nth-child(3n) { animation-delay: -4s; animation-duration: 7s; }

.trick-card {
  animation: gentleFloat 5s ease-in-out infinite alternate;
}
.trick-card:nth-child(even) { animation-delay: -2.5s; }

@keyframes gentleFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-4px); }
}

/* The host screen crown/pill breathing */
.crown, .round-pill, .winner-crown {
  animation: squeezeBreath 3s ease-in-out infinite;
}
@keyframes squeezeBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}


/* ── 2. SNAPPY BOUNCE HOVER PHYSICS ────────────── */

/* Mode Buttons, General Buttons, and Interactive Cards */
button:not(:disabled), .mode-choice, .board-cell, .answer-option, .format-choice, .join-row button, .join-team-option, .category-card, .trick-card {
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.15s ease !important;
}

/* Hover: Lift up slightly */
button:not(:disabled):hover:not(.category-art), 
.mode-choice:hover, 
.board-cell:hover:not(.answered), 
.answer-option:hover, 
.format-choice:hover:not(.selected), 
.join-row button:hover, 
.join-team-option:hover,
.category-card:hover,
.trick-card:hover {
  transform: translateY(-4px) !important;
  /* Enhance the existing shadow slightly on hover */
  box-shadow: 6px 6px 0 var(--ink, #0b081c) !important;
}

/* Active/Click: Physical Slam/Squish */
button:not(:disabled):active:not(.category-art), 
.mode-choice:active, 
.board-cell:active:not(.answered), 
.answer-option:active, 
.format-choice:active:not(.selected), 
.join-row button:active, 
.join-team-option:active,
.category-card:active,
.trick-card:active {
  transform: translateY(4px) scale(0.98) !important;
  box-shadow: 2px 2px 0 var(--ink, #0b081c) !important;
}


/* ── 3. LIVE SHIFTING PROGRESS BARS ────────────── */
/* Make the timer bars look energetic and moving */
.timer-bar > div, #onlineAnswerTimerFill, #hostProgressFill {
  background-size: 200% 200% !important;
  animation: pulseBar 2s linear infinite !important;
}
@keyframes pulseBar {
  0% { background-position: 0% 50%; filter: brightness(1); }
  50% { filter: brightness(1.15); }
  100% { background-position: 100% 50%; filter: brightness(1); }
}


/* ── 4. SUBTLE BUTTON SHAPE UPGRADE ────────────── */
.primary-button, .secondary-button, .how-to-play-button, .format-choice, .answer-option,
.online-screen .primary-button, .online-screen .secondary-button, .join-row button, .join-team-option, .target-choice,
.online-screen .format-choice, .online-screen .language-choice-grid .format-choice,
#olSetupCreate .format-choice, #olGatekeeper .mode-choice, .big-screen-create, .btn-back-to-gatekeeper {
  border-radius: 99px !important;
  border-width: 4px !important;
  box-shadow: inset 0 4px 0 rgba(255,255,255,0.4), 4px 4px 0 var(--ink, #0b081c) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

/* Improve Input Fields and Avatar Pickers */
input[type="text"], input[type="number"], .online-card input, #onlineNameCreate, #onlineNameJoin, #roomInputJoin {
  border-width: 4px !important;
  border-radius: 18px !important;
  box-shadow: inset 0 4px 0 rgba(0,0,0,0.05), 4px 4px 0 var(--ink) !important;
}

.avatar-button, #avatarSelectButton {
  border-width: 4px !important;
  border-radius: 18px !important;
  box-shadow: inset 0 4px 0 rgba(255,255,255,0.4), 4px 4px 0 var(--ink) !important;
}

.primary-button, .online-screen .primary-button {
  font-size: 22px !important;
  padding: 16px !important;
}

/* ── 5. IMPROVING THE HOME SCREEN BOX & BUTTONS ── */
.mode-card {
  background: var(--paper, #fff9ec) !important;
  padding: 30px !important;
  border-radius: 20px !important;
  box-shadow: inset 0 4px 0 rgba(255,255,255,0.6), 8px 8px 0 var(--ink, #0b081c) !important;
  border-width: 5px !important;
}

.mode-card h1 {
  font-size: 32px !important;
  margin-bottom: 5px !important;
}

.mode-card > p {
  font-size: 16px !important;
  color: #555 !important;
  margin-bottom: 24px !important;
}

.mode-choice {
  /* PERFECT PILL SHAPE */
  border-radius: 99px !important;
  
  border-width: 4px !important;
  padding: 10px 24px 10px 10px !important; 
  box-shadow: inset 0 4px 0 rgba(255,255,255,0.4), 4px 4px 0 var(--ink, #0b081c) !important;
  margin-bottom: 16px !important;
  gap: 16px !important;
}

/* SATURATED, VIBRANT COLORS applied globally via variables */
.mode-choice.local-mode { background: var(--yellow) !important; }
.mode-choice.online-mode { background: var(--mint) !important; }
.mode-choice.host-screen-mode { background: var(--red) !important; }

/* ── 6. IMPROVING THE SETUP SCREEN ─────────────── */

/* Match the main card style */
.setup-card {
  background: var(--paper, #fff9ec) !important;
  padding: 34px 30px !important;
  border-radius: 20px !important;
  box-shadow: inset 0 4px 0 rgba(255,255,255,0.6), 8px 8px 0 var(--ink, #0b081c) !important;
  border-width: 5px !important;
}

/* Make headers more punchy */
.setup-card h1 {
  font-size: 32px !important;
  margin-bottom: 5px !important;
}
.setup-card > p {
  font-size: 16px !important;
  color: #555 !important;
  margin-bottom: 24px !important;
}
.section-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  margin-top: 24px !important;
}

/* Format Toggle Buttons */
.format-toggle {
  gap: 12px !important;
}
.format-choice {
  font-size: 18px !important;
  padding: 12px !important;
}

/* Base style for inactive format choices (like TEAMS toggle) */
.format-choice:not(.selected) {
  background: white !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
  border-color: var(--ink) !important;
}

/* Active state for format toggles */
.format-choice.selected {
  background: var(--mint) !important;
}

/* ── 6b. IMPROVING THE LANGUAGE SCREEN ─────────── */
#languageSetupScreen .setup-card {
  text-align: center !important;
}
#languageSetupScreen .language-choice-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin-top: 24px !important;
}
#languageSetupScreen .format-choice {
  font-size: 22px !important;
  padding: 18px !important;
  background: var(--yellow) !important;
  box-shadow: inset 0 4px 0 rgba(255,255,255,0.4), 4px 4px 0 var(--ink) !important;
  transition: transform 0.1s ease !important;
}
#languageSetupScreen .format-choice:hover {
  transform: translateY(-2px) !important;
  box-shadow: 6px 6px 0 var(--ink) !important;
}

/* The Player Input Field */
.add-player {
  gap: 10px !important;
  align-items: center !important;
}
input {
  border-width: 4px !important;
  border-radius: 99px !important;
  padding: 14px 22px !important;
  font-size: 18px !important;
  box-shadow: inset 0 3px 0 rgba(0,0,0,0.05) !important;
}

/* Add Button and Avatar Button */
.add-player button, #avatarSelectButton {
  width: 58px !important;
  height: 58px !important;
  flex: 0 0 58px !important;
  border-radius: 50% !important; /* Perfect circles */
  border-width: 4px !important;
  box-shadow: inset 0 4px 0 rgba(255,255,255,0.4), 4px 4px 0 var(--ink) !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
}
#avatarSelectButton img {
  width: 38px !important;
  height: 38px !important;
}

/* Back / Modes Button */
.back-mode-button {
  border-radius: 99px !important;
  border-width: 4px !important;
  padding: 10px 18px !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
  font-size: 16px !important;
}

/* ── 7. CHARACTERS MODAL CLASSIFICATION ────────── */
.character-group-section {
  margin-bottom: 24px !important;
  text-align: left !important;
}
[dir="rtl"] .character-group-section { text-align: right !important; }

.character-group-header {
  font-size: 18px !important;
  font-weight: 800 !important;
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
  border-bottom: 3px solid var(--ink) !important;
  color: var(--ink) !important;
}

.character-group-items {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

/* Override original grid display since we grouped them */
.character-modal-grid {
  display: block !important;
}

/* ── 8. BEAUTIFUL PLAYER CHIPS & TEAM BUTTONS ──── */
.player-chip {
  border-radius: 99px !important;
  border-width: 3px !important;
  background: white !important;
  padding: 6px 14px 6px 6px !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  font-size: 16px !important;
  transition: transform 0.15s ease !important;
}
.player-chip:hover {
  transform: translateY(-2px) !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
}

/* The character icon inside the chip */
.player-chip .character-sprite {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 2px solid var(--ink) !important;
  background-color: var(--paper) !important;
}

/* The remove "X" button inside the chip */
.player-chip button {
  background: var(--red) !important;
  color: white !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  border: 2px solid var(--ink) !important;
  margin-left: 8px !important;
  font-size: 12px !important;
}

/* Fix Team Modes Add Button size */
.team-add-player button, .team-add-player [data-open-team-character] {
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-width: 3px !important;
}

/* ── 9. CATEGORY & TRICK CARDS ───────────────────── */
.category-card, .trick-card {
  /* Asymmetrical Leaf Shape: Top-Left, Top-Right, Bottom-Right, Bottom-Left */
  border-radius: 40px 12px 40px 12px !important;
  border-width: 4px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.category-card:hover, .trick-card:hover:not(:disabled) {
  transform: translateY(-4px) !important;
  box-shadow: 8px 8px 0 var(--ink) !important;
}

/* ── 10. GAME BOARD SCREEN ─────────────────────── */

/* Match the leaf shape for columns */
.board-category {
  border-radius: 40px 12px 40px 12px !important;
  border-width: 4px !important;
  box-shadow: 6px 6px 0 var(--ink) !important;
}

/* Add a heavy border under the header */
.board-category-head {
  border-bottom: 4px solid var(--ink) !important;
  padding: 12px !important;
  box-shadow: 0 4px 0 rgba(0,0,0,0.1) !important;
}

/* Make the title text pop */
.board-category-head h3 {
  font-size: 18px !important;
  font-weight: 900 !important;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.4) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* The Question Buttons (100, 200, 300) */
.board-question {
  border-radius: 12px !important; /* Rounded rectangles instead of circles */
  border-width: 3px !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  text-align: center !important;
  padding: 12px 0 !important;
  box-shadow: inset 0 4px 0 rgba(255,255,255,0.6), 4px 4px 0 var(--ink) !important;
  background: white !important; /* Original white color */
  color: var(--ink) !important;
  transition: transform 0.15s ease !important;
  margin-bottom: 8px !important;
}
.board-question:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 6px 6px 0 var(--ink) !important;
  background: var(--yellow) !important; /* Highlighted yellow on hover */
}
.board-question:disabled {
  background: #e2dceb !important; /* Greyed out */
  box-shadow: inset 0 4px 0 rgba(255,255,255,0.3) !important;
  opacity: 0.6 !important;
  transform: none !important;
}

/* Team Lanes headers */
.team-question-lane small {
  display: block !important;
  text-align: center !important;
  background: var(--ink) !important;
  color: white !important;
  border-radius: 99px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  margin: 0 auto 10px !important;
  width: max-content !important;
}

/* ── 11. NEAT HEADER / TOPBAR ───────────────────── */
.topbar {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  grid-template-rows: auto auto !important;
  padding: 16px 20px !important;
  align-items: start !important;
  gap: 0 !important;
}

/* Prevent stretch by defaulting grid items */
.topbar > * {
  justify-self: center !important;
}

/* 1. Back button top-right (start in RTL) */
.topbar .back-link {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  margin: 0 !important;
}

/* 2. ONLINE pill & Round Pill perfectly centered */
.topbar .online-pill, .topbar #roundPill {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  padding: 10px 24px !important;
  font-size: 18px !important;
}

/* 3. Language button top-left (end in RTL) */
.topbar #onlineLang, .topbar #langButton {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
}

/* 4. Sound button directly under Language button */
.topbar #onlineSound, .topbar #soundButton {
  grid-column: 3 !important;
  grid-row: 2 !important;
  justify-self: end !important;
  margin-top: 8px !important;
}
/* Make topbar buttons massive pills */
.topbar .lang-button, .topbar .icon-button, .topbar .round-pill, .online-pill {
  border-radius: 99px !important;
  border-width: 3px !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  font-weight: 900 !important;
}

/* ── 12. BETTER FORMAT ICONS ───────────────────── */
.format-choice[data-setup-format="solo"]::before,
.format-choice[data-online-format="solo"]::before {
  content: "👤" !important;
  color: inherit !important;
  margin-inline-end: 8px !important;
  font-size: 20px !important;
}
.format-choice[data-setup-format="teams"]::before,
.format-choice[data-online-format="teams"]::before {
  content: "👥" !important;
  color: inherit !important;
  margin-inline-end: 8px !important;
  letter-spacing: normal !important;
  font-size: 20px !important;
}

/* ── 13. BETTER HOST SCREEN ICON ───────────────── */
.big-screen-create::before {
  content: "📺" !important;
  font-size: 20px !important;
  margin-inline-end: 8px !important;
}

/* ── 14. DRAWING STUDIO UI REVAMP ──────────────── */
.draw-toolbar {
  background: var(--paper, #fff9ec) !important;
  border-width: 4px !important;
  border-radius: 20px !important;
  box-shadow: inset 0 4px 0 rgba(255,255,255,0.6), 6px 6px 0 var(--ink) !important;
  padding: 16px !important;
  gap: 12px !important;
  justify-content: center !important;
}

.draw-tool, .draw-color-control, .draw-size-control button {
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
  border-width: 3px !important;
  font-size: 26px !important;
}

/* Override the old CSS-drawn shapes with crisp Emojis */
.tool-icon {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.tool-icon::before, .tool-icon::after {
  content: none !important; /* Destroy the old shapes */
  border: none !important;
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  position: static !important;
}

/* Inject Emojis */
.brush-icon::before { content: "🖌️" !important; display: block !important; }
.eraser-icon::before { content: "🧽" !important; display: block !important; }
.fill-icon::before { content: "🪣" !important; display: block !important; }
.line-icon::before { content: "📏" !important; display: block !important; }
.circle-icon::before { content: "⭕" !important; display: block !important; }
.square-icon::before { content: "🔲" !important; display: block !important; }
.triangle-icon::before { content: "🔺" !important; display: block !important; }

/* The color picker */
.draw-color-control span {
  width: 34px !important;
  height: 34px !important;
  border-width: 3px !important;
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.4) !important;
}

/* The size control */
.draw-size-control {
  border-radius: 16px !important;
  border-width: 3px !important;
}
.draw-size-control button {
  width: 48px !important;
  font-weight: 900 !important;
}

/* Action Buttons */
#onlineDrawUndo { font-size: 32px !important; font-weight: 900 !important; }
#onlineDrawClear { font-size: 38px !important; font-weight: 900 !important; color: #ff3b66 !important; }

.draw-submit {
  flex-grow: 1 !important;
  border-radius: 99px !important;
  border-width: 4px !important;
  box-shadow: inset 0 4px 0 rgba(255,255,255,0.4), 4px 4px 0 var(--ink) !important;
  font-size: 22px !important;
}

/* The Canvas itself */
.draw-canvas {
  border-width: 4px !important;
  border-radius: 16px !important;
  box-shadow: 6px 6px 0 var(--ink) !important;
  margin-bottom: 6px !important;
}

.mode-choice .mode-icon-img {
  width: 68px !important;
  height: 68px !important;
  border-width: 3px !important;
  box-shadow: 2px 2px 0 var(--ink, #0b081c) !important;
  background: white !important;
  border-radius: 50% !important;
}

.mode-choice span strong {
  font-size: 21px !important;
  margin-bottom: 2px !important;
}

.mode-choice span small {
  font-size: 14px !important;
  opacity: 0.8 !important;
}

.mode-choice b {
  font-size: 28px !important;
  opacity: 0.6 !important;
}


/* v121 shared Online visual standard for Local/Host parity */
:root {
  --ui-card-border: 4px solid var(--ink);
  --ui-card-radius: 24px;
  --ui-card-shadow: 8px 8px 0 rgba(24,20,38,.88);
  --ui-soft-shadow: 4px 4px 0 var(--ink);
}

body, button, input, select, textarea {
  font-family:  Outfit, Changa, system-ui, sans-serif !important;
}
[dir=rtl] body, [dir=rtl] button, [dir=rtl] input, [dir=rtl] select, [dir=rtl] textarea {
  font-family: Changa, Outfit, system-ui, sans-serif !important;
}

#homeScreen .setup-card,
#languageSetupScreen .setup-card,
#answerScreen .question-card,
#answerScreen .input-card,
#actingScreen .acting-stage,
#finalLeaderboardScreen .final-leaderboard-card,
#voteScreen.screen.active,
#resultScreen.screen.active {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: var(--ui-card-border) !important;
  border-radius: var(--ui-card-radius) !important;
  box-shadow: var(--ui-card-shadow) !important;
}

#voteScreen.screen.active,
#resultScreen.screen.active {
  width: min(94vw, 980px) !important;
  margin: clamp(18px, 3vw, 34px) auto !important;
  padding: clamp(18px, 3vw, 30px) !important;
}

#voteScreen .vote-heading {
  margin: 0 0 16px !important;
  color: var(--ink) !important;
  text-align: start !important;
  display: grid !important;
  gap: 12px !important;
}
#voteScreen .vote-heading h2,
#voteScreen #voteTitle {
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  line-height: 1.05 !important;
}
#voteScreen .vote-heading p,
#voteScreen #voteHelp {
  margin: 0 !important;
  color: rgba(24,20,38,.72) !important;
  font-weight: 800 !important;
}
#voteScreen .mcq-timer {
  justify-content: center !important;
  margin: 0 auto 8px !important;
}
#voteScreen .vote-power-dock,
#voteScreen .power-dock {
  justify-content: center !important;
}

.answers-grid,
#voteScreen .answers-grid,
#onlineVote #onlineAnswers {
  gap: 14px !important;
}
#voteScreen .answer-option,
#voteScreen .answer-option:nth-child(2n),
#answersGrid .answer-option,
#answersGrid .answer-option:nth-child(2n) {
  min-height: 64px !important;
  width: 100% !important;
  background: #fff !important;
  border: 4px solid var(--ink) !important;
  border-radius: 999px !important;
  box-shadow: var(--ui-soft-shadow) !important;
  color: var(--ink) !important;
  padding: 15px 22px !important;
  font-size: clamp(18px, 2.6vw, 26px) !important;
}
#voteScreen .answer-option:hover:not(:disabled),
#answersGrid .answer-option:hover:not(:disabled) {
  background: var(--yellow) !important;
  transform: translateY(-2px) !important;
}
#voteScreen .answer-option.choice-selected,
#answersGrid .answer-option.choice-selected {
  background: var(--yellow) !important;
}
#voteScreen .answer-option.vote-correct,
#answersGrid .answer-option.vote-correct {
  background: #42e68c !important;
}
#voteScreen .answer-option.vote-wrong,
#answersGrid .answer-option.vote-wrong {
  background: #ff606d !important;
}

#resultScreen {
  color: var(--ink) !important;
  text-align: center !important;
}
#resultScreen .result-burst {
  display: none !important;
}
#resultScreen .eyebrow {
  color: rgba(24,20,38,.68) !important;
  letter-spacing: 1px !important;
}
#resultScreen #resultTruth {
  color: var(--ink) !important;
  font-size: clamp(28px, 5vw, 52px) !important;
}
#resultScreen .score-list,
#finalLeaderboardScreen .score-list {
  width: min(100%, 820px) !important;
  margin-inline: auto !important;
  display: grid !important;
  gap: 14px !important;
}
#resultScreen .score-row,
#finalLeaderboardScreen .score-row {
  background: #fff !important;
  border: 4px solid var(--ink) !important;
  border-radius: 18px !important;
  box-shadow: var(--ui-soft-shadow) !important;
  min-height: 70px !important;
  padding: 14px 18px !important;
}
#resultScreen .score-row:first-child,
#finalLeaderboardScreen .score-row:first-child {
  background: var(--yellow) !important;
}
#resultScreen #nextRoundButton,
#finalLeaderboardScreen #exitGameButton,
#onlineNext,
#onlineExitGame {
  width: min(100%, 820px) !important;
  margin: 22px auto 0 !important;
}

#answerScreen .question-card,
#answerScreen .input-card {
  max-width: 980px !important;
  margin-inline: auto !important;
}
#answerScreen .question-card h2 {
  font-size: clamp(28px, 4vw, 44px) !important;
  line-height: 1.12 !important;
}
#answerScreen #fakeAnswer,
#onlineAnswer #onlineFake {
  min-height: 64px !important;
  border-radius: 999px !important;
  border: 4px solid var(--ink) !important;
  box-shadow: inset 0 4px 0 rgba(0,0,0,.05), var(--ui-soft-shadow) !important;
}

.question-audio-wrap {
  border: 3px solid var(--ink) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: var(--ui-soft-shadow) !important;
}
.question-audio-button {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.question-audio-wrap audio:not(.hidden) {
  display: none !important;
}

.power-chip,
.target-choice,
.leader-chip,
.team-member,
.player-chip,
.online-player {
  border-radius: 999px !important;
  border-width: 3px !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
}
.host-tools-menu,
.power-targets,
.team-board,
.online-card.lobby-container {
  border: var(--ui-card-border) !important;
  border-radius: 20px !important;
  box-shadow: 6px 6px 0 rgba(24,20,38,.82) !important;
}

.format-choice[data-setup-format=solo]::before,
.format-choice[data-online-format=solo]::before {
  content: 1 !important;
  display: inline-grid !important;
  place-items: center !important;
  min-width: 22px !important;
  height: 22px !important;
  margin-inline-end: 8px !important;
  border: 2px solid var(--ink) !important;
  border-radius: 50% !important;
  background: #fff !important;
  font-size: 13px !important;
  line-height: 1 !important;
}
.format-choice[data-setup-format=teams]::before,
.format-choice[data-online-format=teams]::before {
  content: 2 !important;
  display: inline-grid !important;
  place-items: center !important;
  min-width: 22px !important;
  height: 22px !important;
  margin-inline-end: 8px !important;
  border: 2px solid var(--ink) !important;
  border-radius: 50% !important;
  background: var(--mint) !important;
  font-size: 13px !important;
  line-height: 1 !important;
}
.big-screen-create::before {
  content: TV !important;
  display: inline-grid !important;
  place-items: center !important;
  min-width: 34px !important;
  height: 24px !important;
  margin-inline-end: 8px !important;
  border: 2px solid var(--ink) !important;
  border-radius: 7px !important;
  background: #fff !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.tool-icon::before,
.tool-icon::after {
  content:  !important;
 position: absolute !important;
 display: block !important;
}
.brush-icon::before { left: 11px !important; top: 1px !important; width: 7px !important; height: 23px !important; border: 2px solid var(--ink) !important; border-radius: 6px !important; background: var(--pink) !important; transform: rotate(-38deg) !important; }
.brush-icon::after { left: 2px !important; bottom: 1px !important; width: 15px !important; height: 7px !important; border: 2px solid var(--ink) !important; border-radius: 50% 50% 45% 45% !important; background: var(--ink) !important; transform: rotate(-38deg) !important; }
.eraser-icon::before { left: 4px !important; top: 8px !important; width: 21px !important; height: 13px !important; border: 2px solid var(--ink) !important; border-radius: 4px !important; background: linear-gradient(90deg,#ff9fd0 0 55%,#f6f2eb 55%) !important; transform: rotate(-28deg) !important; }
.fill-icon::before { left: 4px !important; top: 5px !important; width: 16px !important; height: 14px !important; border: 2px solid var(--ink) !important; border-radius: 4px !important; background: var(--mint) !important; transform: rotate(-35deg) !important; }
.fill-icon::after { right: 3px !important; bottom: 3px !important; width: 9px !important; height: 9px !important; border: 2px solid var(--ink) !important; border-radius: 50% 50% 55% 0 !important; background: var(--mint) !important; transform: rotate(-35deg) !important; }
.line-icon::before { left: 4px !important; top: 13px !important; width: 23px !important; height: 3px !important; background: var(--ink) !important; border-radius: 999px !important; transform: rotate(-42deg) !important; }
.circle-icon::before { inset: 4px !important; border: 3px solid var(--ink) !important; border-radius: 50% !important; background: #fff !important; }
.square-icon::before { inset: 5px !important; border: 3px solid var(--ink) !important; border-radius: 4px !important; background: #fff !important; }
.triangle-icon::before { left: 4px !important; top: 3px !important; width: 0 !important; height: 0 !important; border-left: 11px solid transparent !important; border-right: 11px solid transparent !important; border-bottom: 21px solid var(--ink) !important; background: transparent !important; }
.triangle-icon::after { left: 8px !important; top: 10px !important; width: 0 !important; height: 0 !important; border-left: 7px solid transparent !important; border-right: 7px solid transparent !important; border-bottom: 13px solid #fff !important; background: transparent !important; }

@media (max-width: 640px) {
 #voteScreen.screen.active,
 #resultScreen.screen.active {
 width: calc(100vw - 24px) !important;
 padding: 16px 12px !important;
 border-radius: 20px !important;
 box-shadow: 5px 5px 0 rgba(24,20,38,.88) !important;
 }
 #voteScreen .answers-grid,
 #answersGrid {
 grid-template-columns: 1fr !important;
 }
 #resultScreen .score-row,
 #finalLeaderboardScreen .score-row {
 min-height: 62px !important;
 padding: 12px 14px !important;
 }
}

/* v122 targeted flow fixes */
#answerWait.submission-wait-card {
  display: grid !important;
  gap: 8px !important;
  margin-top: 14px !important;
  padding: 16px 18px !important;
  border: 3px solid var(--ink) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 4px 4px 0 rgba(24,20,38,.86) !important;
  color: var(--ink) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
.round-results-with-bluffs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
  width: 100%;
}
.result-card-rich {
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 16px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: minmax(130px, 1.15fr) minmax(180px, 2fr) auto auto;
  align-items: center;
  gap: 16px;
  box-shadow: 4px 4px 0 var(--ink);
}
.result-owner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.result-owner strong,
.result-answer-stack b,
.result-answer-stack small {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}
.result-answer-stack {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.result-label,
.result-points span,
.result-total span {
  font-size: clamp(.68rem, 1.8vw, .8rem);
  font-weight: 900;
  color: rgba(24,20,38,.52);
  text-transform: uppercase;
}
.result-answer-stack b { font-size: clamp(.92rem, 2.4vw, 1.08rem); }
.result-answer-stack small { font-size: clamp(.78rem, 2vw, .95rem); color: rgba(24,20,38,.72); }
.result-points,
.result-total {
  display: grid;
  justify-items: center;
  align-content: center;
}
.result-points {
  background: rgba(24,20,38,.05);
  padding: 8px 14px;
  border-radius: 12px;
}
.result-points b { font-size: clamp(1.05rem, 3vw, 1.4rem); font-weight: 900; }
.result-total b { font-size: clamp(1.25rem, 3.4vw, 1.8rem); font-weight: 900; }
.round-detail-row small {
  white-space: normal;
  overflow-wrap: anywhere;
}
@media (max-width: 720px) {
  .result-card-rich {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
  }
  .result-points,
  .result-total {
    justify-items: start;
  }
}