/* =================================================================
   COMPREHENSIVE FIXES V2 — 2026-04-17
   - Jawlah settings toggle layout (right-side "Accept guesses")
   - How-to-play modal styling
   - Join-by-code UX
   - Drawing game professional UI
   - Sticky button polish across games
   LOADED LAST — overrides everything.
   ================================================================= */

/* ---------------------------------------------------------------
   1) JAWLAH SETTINGS — "Accept guesses" toggle row layout
   The old CSS had the toggle overflowing its row because the
   toggle-label took flex:1 AND the parent .jawlah-setting-item
   had no alignment constraints. We rewrite the row completely
   so the switch is ALWAYS on the right side, nicely aligned,
   never overflowing, with proper spacing.
   --------------------------------------------------------------- */
.jawlah-setting-item .jawlah-toggle-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 10px 0 !important;
  background: rgba(232, 183, 48, 0.03);
  border: 1px solid rgba(232, 183, 48, 0.08);
  border-radius: 10px;
  padding: 10px 14px !important;
  margin-top: 4px;
}
.jawlah-setting-item .jawlah-toggle-row .jawlah-toggle-label {
  flex: 1 1 auto !important;
  font-size: 0.82rem !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  /* Keep text on one line on wide, wrap nicely on narrow */
  white-space: normal !important;
}
.jawlah-setting-item .jawlah-toggle-row .jawlah-toggle {
  flex: 0 0 auto !important;
  position: relative !important;
  display: inline-block !important;
  width: 46px !important;
  height: 26px !important;
  cursor: pointer !important;
  margin: 0 !important;
}
.jawlah-setting-item .jawlah-toggle-row .jawlah-toggle input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
}
.jawlah-setting-item .jawlah-toggle-row .jawlah-toggle-slider {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 26px !important;
  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden !important; /* knob ne'er escapes the track */
}
/*
 * RTL-safe knob positioning:
 * Use logical property inset-inline-start so the knob always starts
 * from the "start" edge (left in LTR, right in RTL). The translation
 * on checked always moves it toward the "end" edge via a POSITIVE
 * translateX combined with a CSS var that flips sign per direction.
 */
.jawlah-setting-item .jawlah-toggle-row .jawlah-toggle-slider::before {
  content: '' !important;
  position: absolute !important;
  height: 20px !important;
  width: 20px !important;
  inset-inline-start: 2px !important;
  top: 2px !important;
  background: white !important;
  border-radius: 50% !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  transform: translateX(0) !important;
  will-change: transform;
}
.jawlah-setting-item .jawlah-toggle-row .jawlah-toggle input:checked + .jawlah-toggle-slider {
  background: linear-gradient(135deg, #E8B730, #F5D261) !important;
  border-color: rgba(232, 183, 48, 0.5) !important;
}
/* LTR: move knob 20px to the right */
.jawlah-setting-item .jawlah-toggle-row .jawlah-toggle input:checked + .jawlah-toggle-slider::before {
  transform: translateX(20px) !important;
}
/* RTL: move knob 20px to the LEFT (because start edge is now on the right) */
html[dir="rtl"] .jawlah-setting-item .jawlah-toggle-row .jawlah-toggle input:checked + .jawlah-toggle-slider::before {
  transform: translateX(-20px) !important;
}

/* Also keep the radio group (join method) aligned cleanly */
.jawlah-setting-item .jawlah-radio-group {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-top: 4px !important;
}
.jawlah-setting-item .jawlah-radio {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  font-size: 0.82rem !important;
  justify-content: center !important;
  text-align: center !important;
  color: rgba(255, 255, 255, 0.8) !important;
  min-height: 42px;
}
.jawlah-setting-item .jawlah-radio.active,
.jawlah-setting-item .jawlah-radio:has(input:checked) {
  background: rgba(232, 183, 48, 0.1) !important;
  border-color: rgba(232, 183, 48, 0.4) !important;
  color: #E8B730 !important;
  font-weight: 600 !important;
}
.jawlah-setting-item .jawlah-radio input {
  display: none !important;
}

/* ---------------------------------------------------------------
   1b) AVATAR SIMPLIFICATION — real photo only, no letter bubble
   Per user request: show the user's actual avatar (or a default
   silhouette). Hide the old letter-initial fallback everywhere it
   may still be injected by legacy code.
   --------------------------------------------------------------- */
.jawlah-chat-avatar-fallback,
.jawlah-player-avatar-fallback {
  display: none !important;
}

/* ---------------------------------------------------------------
   2) HOW-TO-PLAY MODAL
   --------------------------------------------------------------- */
/* While the how-to-play modal is open: freeze scroll and tame the
   animated background to stop long paint work from blocking interaction. */
body.htp-open {
  overflow: hidden !important;
  touch-action: none !important;
}
body.htp-open .jawlah-chat-msg,
body.htp-open .gc-card {
  animation: none !important;
}

.htp-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  /* Slightly darker solid bg instead of costly backdrop-filter.
     blur(10px) over a full-viewport animated site was the #1 cause of
     UI freezes when the how-to-play modal opened. */
  background: rgba(3, 3, 12, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: htp-fade-in 0.18s ease-out;
  /* Promote to its own layer so paint cost is isolated */
  contain: layout style paint;
  will-change: opacity;
}
.htp-overlay.closing {
  animation: htp-fade-out 0.15s ease-out forwards;
}
@keyframes htp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes htp-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.htp-modal {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 40px);
  background: linear-gradient(145deg, #14142a, #0f0f1a);
  border: 1px solid rgba(232, 183, 48, 0.25);
  border-radius: 18px;
  /* Reduced shadow layers — the glowing 80px spread shadow was
     extremely expensive while the pop-in animation ran. */
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: htp-pop-in 0.22s ease-out;
  contain: layout style;
}
@keyframes htp-pop-in {
  from { transform: scale(0.96) translateY(8px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);   opacity: 1; }
}
.htp-header {
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(232, 183, 48, 0.15);
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(180deg, rgba(232, 183, 48, 0.08), transparent);
}
.htp-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #E8B730, #F5D261);
  color: #1a1a2e;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(232, 183, 48, 0.3);
}
.htp-title-wrap { flex: 1; }
.htp-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}
.htp-subtitle {
  font-size: 0.82rem;
  color: rgba(232, 183, 48, 0.85);
  margin-top: 2px;
  font-weight: 500;
}
.htp-close {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 15px;
}
html[dir="rtl"] .htp-close { left: auto; right: 14px; }
.htp-close:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #EF4444;
}
.htp-body {
  padding: 22px 24px;
  overflow-y: auto;
  flex: 1;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  line-height: 1.7;
}
.htp-body::-webkit-scrollbar { width: 6px; }
.htp-body::-webkit-scrollbar-thumb { background: rgba(232, 183, 48, 0.2); border-radius: 3px; }
.htp-section { margin-bottom: 18px; }
.htp-section:last-child { margin-bottom: 0; }
.htp-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #E8B730;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.htp-section-title i {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(232, 183, 48, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.htp-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.htp-list li {
  padding: 6px 0 6px 22px;
  position: relative;
  color: rgba(255, 255, 255, 0.85);
}
html[dir="rtl"] .htp-list li { padding: 6px 22px 6px 0; }
.htp-list li::before {
  content: '▸';
  position: absolute;
  left: 4px;
  top: 6px;
  color: #E8B730;
  font-size: 0.9em;
}
html[dir="rtl"] .htp-list li::before { left: auto; right: 4px; }
.htp-chat-example {
  background: rgba(145, 70, 255, 0.08);
  border: 1px solid rgba(145, 70, 255, 0.2);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 10px 0;
  font-family: 'Courier New', monospace;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.95);
}
.htp-chat-example .htp-chat-user {
  color: #A78BFA;
  font-weight: 700;
}
.htp-chat-example .htp-chat-msg {
  color: #53FC18;
  font-weight: 600;
  margin-inline-start: 6px;
}
.htp-footer {
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: rgba(0, 0, 0, 0.2);
}
.htp-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  user-select: none;
}
.htp-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: #E8B730;
  cursor: pointer;
}
.htp-btn-got-it {
  background: linear-gradient(135deg, #E8B730, #F5D261);
  color: #1a1a2e;
  border: none;
  padding: 10px 24px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(232, 183, 48, 0.35);
}
.htp-btn-got-it:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(232, 183, 48, 0.5);
}
.htp-btn-got-it:active { transform: translateY(0); }

/* Small floating help button on game pages to reopen tutorial */
.htp-help-fab {
  position: fixed;
  bottom: 22px;
  left: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E8B730, #F5D261);
  color: #1a1a2e;
  border: none;
  box-shadow:
    0 6px 16px rgba(232, 183, 48, 0.4),
    0 0 0 1px rgba(232, 183, 48, 0.2);
  display: none;  /* shown only when help tip exists for current game */
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  z-index: 500;
  transition: all 0.25s;
  font-weight: 800;
}
html[dir="rtl"] .htp-help-fab { left: auto; right: 22px; }
.htp-help-fab:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 20px rgba(232, 183, 48, 0.55);
}
.htp-help-fab.visible { display: inline-flex; }
@media (max-width: 768px) {
  .htp-help-fab { bottom: 72px; width: 40px; height: 40px; font-size: 16px; }
}

/* ---------------------------------------------------------------
   3) JOIN-BY-CODE — clearer visual when "code only" mode is on.
   When user selects "Code only" the room join area should be
   highlighted and the "Create room" button dimmed since joining
   is the expected action.
   --------------------------------------------------------------- */
.jawlah-rooms-join.code-required {
  outline: 2px dashed rgba(232, 183, 48, 0.5);
  outline-offset: 4px;
  border-radius: 12px;
  animation: code-req-pulse 2.4s ease-in-out infinite;
}
@keyframes code-req-pulse {
  0%, 100% { outline-color: rgba(232, 183, 48, 0.45); }
  50% { outline-color: rgba(232, 183, 48, 0.9); }
}
.jawlah-rooms-card.code-required-mode .jawlah-btn-primary {
  opacity: 0.45;
  filter: grayscale(0.3);
}
.jawlah-rooms-card.code-required-mode .jawlah-btn-primary::after {
  content: attr(data-code-hint);
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  opacity: 0.8;
  margin-top: 2px;
}
.join-by-code-hint {
  background: linear-gradient(135deg, rgba(232, 183, 48, 0.1), rgba(232, 183, 48, 0.04));
  border: 1px solid rgba(232, 183, 48, 0.25);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 10px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 10px;
}
.join-by-code-hint i {
  color: #E8B730;
  font-size: 16px;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------
   4) DRAWING GAME — professional layout & UX
   --------------------------------------------------------------- */
.draw-v2-wrap {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1100px) {
  .draw-v2-wrap { grid-template-columns: 1fr; }
}
.draw-v2-main {
  background: linear-gradient(180deg, rgba(14, 14, 28, 0.72), rgba(10, 10, 20, 0.55));
  border: 1px solid rgba(232, 183, 48, 0.22);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.draw-v2-header {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: linear-gradient(180deg, rgba(232, 183, 48, 0.08), transparent);
}
.draw-v2-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: #E8B730;
  font-size: 1.08rem;
}
.draw-v2-title i {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(232, 183, 48, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.draw-v2-timer {
  background: rgba(232, 183, 48, 0.12);
  color: #E8B730;
  border: 1px solid rgba(232, 183, 48, 0.3);
  padding: 6px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.draw-v2-timer.critical {
  color: #fff;
  background: linear-gradient(135deg, #EF4444, #F97316);
  border-color: rgba(239, 68, 68, 0.6);
  animation: draw-pulse 0.6s ease-in-out infinite alternate;
}
@keyframes draw-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.05); box-shadow: 0 0 14px rgba(239, 68, 68, 0.5); }
}
.draw-v2-wordbar {
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(232, 183, 48, 0.08), rgba(232, 183, 48, 0.02));
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.draw-v2-wordbar .draw-v2-word-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
.draw-v2-wordbar .draw-v2-word-label {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 600;
}
.draw-v2-wordbar .draw-v2-word-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.draw-v2-wordbar .draw-v2-word {
  position: relative;
  font-size: 1.75rem;
  font-weight: 900;
  color: #F5D261;
  letter-spacing: 1px;
  text-shadow: 0 2px 10px rgba(232, 183, 48, 0.28);
  padding: 2px 10px;
  border-radius: 8px;
  background: rgba(232, 183, 48, 0.06);
  border: 1px solid rgba(232, 183, 48, 0.2);
  min-width: 80px;
  line-height: 1.2;
  transition: background 0.2s, border-color 0.2s;
}
.draw-v2-wordbar .draw-v2-word .draw-v2-word-text {
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.draw-v2-wordbar .draw-v2-word .draw-v2-word-mask {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: rgba(245, 210, 97, 0.55);
  letter-spacing: 6px;
  font-size: 1.4rem;
  pointer-events: none;
  user-select: none;
}
.draw-v2-wordbar .draw-v2-word.is-hidden {
  background: rgba(232, 183, 48, 0.12);
  border-color: rgba(232, 183, 48, 0.35);
  text-shadow: none;
}
.draw-v2-wordbar .draw-v2-word.is-hidden .draw-v2-word-text {
  filter: blur(14px) saturate(1.1);
  opacity: 0.35;
  user-select: none;
  pointer-events: none;
}
.draw-v2-wordbar .draw-v2-word.is-hidden .draw-v2-word-mask {
  display: flex;
}

/* Reveal (eye) button — only useful while word is hidden */
.draw-v2-reveal-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(232, 183, 48, 0.35);
  background: rgba(232, 183, 48, 0.08);
  color: #F5D261;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: background 0.15s, transform 0.1s;
  flex-shrink: 0;
}
.draw-v2-reveal-btn:hover {
  background: rgba(232, 183, 48, 0.18);
}
.draw-v2-reveal-btn:active { transform: scale(0.94); }

/* Stream-safe persistent toggle */
.draw-v2-hidetoggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.draw-v2-hidetoggle i { font-size: 13px; }
.draw-v2-hidetoggle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.draw-v2-hidetoggle.is-on {
  background: rgba(147, 51, 234, 0.12);
  border-color: rgba(147, 51, 234, 0.45);
  color: #C084FC;
}
.draw-v2-hidetoggle.is-on i::before { content: "\f06e"; /* eye-slash-ish accent */ }

.draw-v2-wordbar .draw-v2-hint {
  margin-inline-start: auto;
  font-family: 'Courier New', monospace;
  letter-spacing: 6px;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.05);
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.draw-v2-canvas-wrap {
  position: relative;
  background:
    linear-gradient(#ffffff, #fbfbfc);
  aspect-ratio: 16/10;
  max-height: 560px;
  overflow: hidden;
  /* Subtle inner frame so the white canvas doesn't look naked */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.draw-v2-canvas-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
  display: block;
  /* Prevent any CSS-caused lag */
  will-change: auto;
}
.draw-v2-canvas-wrap.tool-eraser canvas {
  cursor: cell;
}
.draw-v2-canvas-wrap.tool-fill canvas {
  cursor: copy;
}
.draw-v2-toolbar {
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(10, 10, 20, 0.55), rgba(6, 6, 14, 0.8));
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.draw-v2-tools-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.draw-v2-colors {
  display: flex;
  gap: 5px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  flex-wrap: wrap;
}
.draw-v2-color {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  padding: 0;
  outline: none;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.draw-v2-color:hover { transform: scale(1.12); }
.draw-v2-color.active {
  transform: scale(1.18);
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(232, 183, 48, 0.7), 0 2px 6px rgba(0, 0, 0, 0.4);
}
.draw-v2-tool-btn {
  width: 38px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: all 0.18s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding: 0;
}
.draw-v2-tool-btn:hover {
  background: rgba(232, 183, 48, 0.1);
  border-color: rgba(232, 183, 48, 0.3);
  color: #E8B730;
}
.draw-v2-tool-btn.active {
  background: rgba(232, 183, 48, 0.15);
  border-color: rgba(232, 183, 48, 0.5);
  color: #E8B730;
  box-shadow: inset 0 0 0 1px rgba(232, 183, 48, 0.3);
}
.draw-v2-size {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.draw-v2-size input[type="range"] {
  width: 80px;
  accent-color: #E8B730;
  cursor: pointer;
}
.draw-v2-size-preview {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.draw-v2-size-preview::before {
  content: '';
  display: block;
  width: var(--dot-size, 8px);
  height: var(--dot-size, 8px);
  background: currentColor;
  border-radius: 50%;
  transition: width 0.15s, height 0.15s;
}
.draw-v2-action-btn {
  padding: 7px 14px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #EF4444;
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.18s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.draw-v2-action-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.5);
}
.draw-v2-action-btn.primary {
  color: #E8B730;
  background: rgba(232, 183, 48, 0.08);
  border-color: rgba(232, 183, 48, 0.3);
}
.draw-v2-action-btn.primary:hover {
  background: rgba(232, 183, 48, 0.18);
}

/* Right sidebar for chat guesses / status */
.draw-v2-side {
  background: linear-gradient(180deg, rgba(14, 14, 28, 0.72), rgba(10, 10, 20, 0.55));
  border: 1px solid rgba(232, 183, 48, 0.18);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 660px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.draw-v2-side-header {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-weight: 700;
  color: #E8B730;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  background: linear-gradient(180deg, rgba(232, 183, 48, 0.06), transparent);
}
.draw-v2-side-header i {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(145, 70, 255, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.draw-v2-side-list {
  padding: 8px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.draw-v2-guess-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  animation: draw-guess-in 0.3s ease-out;
}
@keyframes draw-guess-in {
  from { transform: translateX(-10px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.draw-v2-guess-item.correct {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.15), rgba(52, 211, 153, 0.05));
  border-color: rgba(52, 211, 153, 0.4);
  color: #34D399;
  font-weight: 700;
}
.draw-v2-guess-item.close {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.2);
  color: #FCD34D;
}
.draw-v2-guess-user {
  font-weight: 700;
  color: inherit;
}
.draw-v2-guess-text {
  color: rgba(255, 255, 255, 0.7);
  word-break: break-word;
  flex: 1;
}
.draw-v2-guess-item.correct .draw-v2-guess-text { color: inherit; }
.draw-v2-empty {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.82rem;
  padding: 24px 12px;
}

/* Result overlay for drawing game (professional) */
.draw-v2-result {
  padding: 48px 28px;
  text-align: center;
  background:
    radial-gradient(ellipse at top, rgba(232, 183, 48, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(232, 183, 48, 0.04), transparent);
}
.draw-v2-result-icon {
  font-size: 4.5rem;
  margin-bottom: 14px;
  animation: drawResultBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes drawResultBounce {
  from { transform: scale(0.4) rotate(-8deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
.draw-v2-result-title {
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}
.draw-v2-result-title.win { color: #34D399; text-shadow: 0 4px 16px rgba(52, 211, 153, 0.35); }
.draw-v2-result-title.lose { color: #EF4444; text-shadow: 0 4px 16px rgba(239, 68, 68, 0.35); }
.draw-v2-result-word {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 20px;
}
.draw-v2-result-word strong {
  color: #F5D261;
  font-weight: 900;
  font-size: 1.4rem;
  padding: 2px 12px;
  background: rgba(232, 183, 48, 0.12);
  border-radius: 8px;
  margin-inline-start: 4px;
}

/* =================================================================
   5) BUTTON AUDIT FIXES — make sure no game button overflows or
   has clipped design.
   ================================================================= */
.jawlah-settings-list > .jawlah-setting-item {
  padding: 10px 14px !important;
}
.jawlah-settings-list > .jawlah-setting-item + .jawlah-setting-item {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.jawlah-settings-list .jawlah-slider-row {
  background: rgba(255, 255, 255, 0.02);
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 4px;
}
.jawlah-settings-list .jawlah-slider-val {
  min-width: 40px !important;
  background: linear-gradient(135deg, #E8B730, #F5D261) !important;
  color: #1a1a2e !important;
  font-weight: 800 !important;
}

/* Better difficulty cards layout */
.jawlah-settings-list .jawlah-difficulty-cards {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 6px !important;
  margin-top: 4px !important;
}
.jawlah-settings-list .jawlah-diff-card {
  min-height: 62px !important;
  padding: 10px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  gap: 2px !important;
}
.jawlah-settings-list .jawlah-diff-card .jawlah-diff-icon {
  margin-bottom: 2px;
  color: #E8B730;
}

/* ==================================================================
   6) SETTINGS HELPERS — "Accept guesses" tooltip label fix
   The label "استقبال تخمين لسؤال التالي" was overflowing because
   parent had no min-width. Now it wraps gracefully, and we also
   shorten it via JS patch if needed.
   ================================================================== */
.jawlah-setting-item > label:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 600 !important;
}
.jawlah-setting-item > label:first-child::before {
  content: '•';
  color: #E8B730;
  font-size: 14px;
}