/* ============================================================
 * CORE CSS PATCHES: May 2026 (major-upgrade + hero-mobile + hotfix chain + mobile-qa)
 * Merged bundle — built 2026-07-03 (reorg). Original cascade order:
 *   - css/major-upgrade-2026-05-13.css
 *   - css/hero-mobile-fix.css
 *   - css/hotfix-2026-05-13-bugs.css
 *   - css/hotfix-2026-05-13-bugs-v2.css
 *   - css/hotfix-2026-05-13-bugs-v3.css
 *   - css/hotfix-2026-05-17-mobile-qa.css
 * ============================================================ */

/* ─────────── SOURCE: css/major-upgrade-2026-05-13.css ─────────── */
/* ============================================================
   ELASHKEF.COM — MAJOR UPGRADE 2026-05-13 — Stylesheet
   ------------------------------------------------------------
   Pretty system log, chat bubbles, animated tutorial popup,
   kick system UI, join-mode block, draw-word-window helpers,
   game-help FAB, and supporting visuals.
   ============================================================ */

/* ============================================================
   1) PRETTY SYSTEM LOG — jawlah-log-msg-v2
   ============================================================ */
.jawlah-log-msg-v2 {
  --jl-bg: rgba(96,165,250,0.10);
  --jl-border: #3B82F6;
  --jl-fg: #60A5FA;
  position: relative;
  margin: 6px 4px;
  padding: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--jl-bg), rgba(255,255,255,0.02));
  border: 1px solid color-mix(in srgb, var(--jl-border) 45%, transparent);
  box-shadow: 0 2px 12px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04);
  animation: jl-pop 220ms cubic-bezier(.22,.61,.36,1) both;
  overflow: hidden;
  backdrop-filter: blur(4px);
}
.jawlah-log-msg-v2::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--jl-border), transparent);
  opacity: 0.85;
}
.jawlah-log-msg-v2 .jl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 14px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #e8e6f3;
}
.jawlah-log-msg-v2 .jl-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--jl-fg) 22%, transparent);
  color: var(--jl-fg);
  font-size: 0.78rem;
  box-shadow: 0 0 8px color-mix(in srgb, var(--jl-fg) 35%, transparent);
}
.jawlah-log-msg-v2 .jl-badge {
  flex: 0 0 auto;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--jl-fg) 18%, transparent);
  color: var(--jl-fg);
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--jl-fg) 35%, transparent);
}
.jawlah-log-msg-v2 .jl-text {
  flex: 1 1 auto;
  color: #efedfb;
  word-break: break-word;
  font-weight: 500;
}
.jawlah-log-msg-v2 .jl-time {
  flex: 0 0 auto;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.45);
  font-variant-numeric: tabular-nums;
  font-family: 'SF Mono', 'JetBrains Mono', monospace;
}
.jawlah-log-msg-v2.jl-success { animation-name: jl-pop-ok; }
.jawlah-log-msg-v2.jl-error   { animation-name: jl-pop-err; }
.jawlah-log-msg-v2.jl-warning .jl-icon { animation: jl-pulse 1.6s ease-in-out infinite; }

@keyframes jl-pop {
  0%   { opacity: 0; transform: translateY(-6px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes jl-pop-ok {
  0%   { opacity: 0; transform: translateY(-6px) scale(0.98); box-shadow: 0 0 0 0 rgba(16,185,129,0.6); }
  60%  { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes jl-pop-err {
  0%   { opacity: 0; transform: translateX(-4px); }
  25%  { transform: translateX(4px); }
  50%  { transform: translateX(-3px); }
  75%  { transform: translateX(2px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes jl-pulse {
  0%,100% { box-shadow: 0 0 8px rgba(245,158,11,0.35); }
  50%     { box-shadow: 0 0 18px rgba(245,158,11,0.75); }
}

/* ============================================================
   2) CHAT MESSAGE — jawlah-chat-msg-v2
   ============================================================ */
.jawlah-chat-msg-v2 {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: 8px;
  align-items: flex-start;
  margin: 6px 4px;
  padding: 8px 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
  transition: background 220ms ease, transform 220ms ease, opacity 220ms ease;
  animation: jc-pop 220ms ease both;
  position: relative;
}
.jawlah-chat-msg-v2:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}
.jawlah-chat-msg-v2:hover .jc-kick-btn { opacity: 1; transform: scale(1); }

.jawlah-chat-msg-v2 .jc-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.10);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  background: #1a1430;
}
.jawlah-chat-msg-v2 .jc-body { min-width: 0; }
.jawlah-chat-msg-v2 .jc-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.jawlah-chat-msg-v2 .jc-name {
  font-weight: 800;
  font-size: 0.85rem;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.jawlah-chat-msg-v2 .jc-time {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.4);
  font-variant-numeric: tabular-nums;
  font-family: 'SF Mono', 'JetBrains Mono', monospace;
}
.jawlah-chat-msg-v2 .jc-text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #e9e7f5;
  word-break: break-word;
}
.jawlah-chat-msg-v2 .jc-flag {
  align-self: center;
  font-size: 1.05rem;
  animation: jc-flag-pop 380ms cubic-bezier(.34,1.56,.64,1) both;
}
.jawlah-chat-msg-v2 .jc-flag-ok  { color: #10B981; }
.jawlah-chat-msg-v2 .jc-flag-no  { color: #EF4444; }

.jawlah-chat-msg-v2.is-correct {
  background: linear-gradient(135deg, rgba(16,185,129,0.16), rgba(16,185,129,0.04));
  border-color: rgba(16,185,129,0.45);
  box-shadow: 0 0 18px rgba(16,185,129,0.18);
}
.jawlah-chat-msg-v2.is-wrong {
  background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(239,68,68,0.03));
  border-color: rgba(239,68,68,0.30);
}
.jawlah-chat-msg-v2.is-kicked {
  opacity: 0;
  transform: translateX(40px);
}

.jawlah-chat-msg-v2 .jc-kick-btn {
  align-self: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.35);
  color: #ff8585;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 180ms, transform 180ms, background 180ms;
}
.jawlah-chat-msg-v2 .jc-kick-btn:hover {
  background: rgba(239,68,68,0.25);
  color: #ffffff;
}

@keyframes jc-pop {
  0%   { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes jc-flag-pop {
  0%   { opacity: 0; transform: scale(0.4) rotate(-20deg); }
  100% { opacity: 1; transform: scale(1)   rotate(0); }
}

/* Touch devices: always show kick button */
@media (hover: none) {
  .jawlah-chat-msg-v2 .jc-kick-btn { opacity: 0.85; transform: scale(1); }
}

/* ============================================================
   3) ANIMATED TUTORIAL POPUP — gtut-*
   ============================================================ */
.gtut-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(20,12,42,0.85), rgba(8,5,18,0.95));
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 220ms ease;
  padding: 18px;
  box-sizing: border-box;
}
.gtut-overlay.is-open { opacity: 1; }

.gtut-card {
  position: relative;
  width: min(560px, 96vw);
  max-height: 92vh;
  overflow: auto;
  background: linear-gradient(160deg, #1a1338 0%, #0e0a22 100%);
  border: 1px solid rgba(232,183,48,0.30);
  border-radius: 20px;
  padding: 26px 22px 22px;
  color: #eee9f8;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 60px rgba(167,139,250,0.18) inset;
  transform: scale(0.94) translateY(8px);
  opacity: 0;
  transition: transform 260ms cubic-bezier(.34,1.56,.64,1), opacity 220ms ease;
}
.gtut-overlay.is-open .gtut-card { opacity: 1; transform: scale(1) translateY(0); }

.gtut-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(232,183,48,0.4), transparent 35%, transparent 60%, rgba(167,139,250,0.4));
  z-index: -1;
  filter: blur(8px);
  opacity: 0.5;
  pointer-events: none;
}

.gtut-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 180ms, transform 180ms;
}
.gtut-close:hover { background: rgba(239,68,68,0.30); transform: rotate(90deg); }

.gtut-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.gtut-orb {
  position: relative;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gtut-orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #e8b730, #A78BFA, #60A5FA, #e8b730);
  animation: gtut-spin 6s linear infinite;
  padding: 2px;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.gtut-orb-core {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2a1f4f, #110a26);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 22px rgba(232,183,48,0.25);
}
.gtut-titles { min-width: 0; }
.gtut-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
}
.gtut-game {
  background: linear-gradient(135deg, #e8b730, #f8d97a);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gtut-sub {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
}

.gtut-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gtut-step {
  --i: 0;
  display: grid;
  grid-template-columns: 28px 36px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  opacity: 0;
  transform: translateY(8px);
  animation: gtut-step-in 480ms cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: calc(var(--i) * 90ms + 200ms);
  transition: background 200ms, border-color 200ms;
}
.gtut-step:hover {
  background: rgba(232,183,48,0.06);
  border-color: rgba(232,183,48,0.25);
}
.gtut-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8b730, #d39c1f);
  color: #1a1338;
  font-weight: 900;
  font-size: 0.9rem;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(232,183,48,0.35);
}
.gtut-ic {
  font-size: 1.6rem;
  text-align: center;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.gtut-text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #efedfb;
}

.gtut-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.gtut-dont {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
}
.gtut-dont input { display: none; }
.gtut-dont > span {
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 2px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.04);
  position: relative;
  transition: all 180ms;
}
.gtut-dont input:checked + span {
  background: linear-gradient(135deg, #e8b730, #d39c1f);
  border-color: #e8b730;
}
.gtut-dont input:checked + span::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: #1a1338;
  font-weight: 900;
  font-size: 0.85rem;
}
.gtut-cta {
  background: linear-gradient(135deg, #e8b730, #d39c1f);
  color: #1a1338;
  border: none;
  padding: 10px 22px;
  border-radius: 99px;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 20px rgba(232,183,48,0.35);
  transition: transform 180ms, box-shadow 180ms, filter 180ms;
}
.gtut-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(232,183,48,0.5); filter: brightness(1.08); }
.gtut-cta:active { transform: translateY(0); }

@keyframes gtut-spin { to { transform: rotate(360deg); } }
@keyframes gtut-step-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   4) JOIN-MODE SETTINGS BLOCK
   ============================================================ */
.pgs-section-extra {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255,255,255,0.10);
}
.joinmode-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.joinmode-radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 99px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: #d8d2f0;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 200ms ease;
  user-select: none;
}
.joinmode-radio input { display: none; }
.joinmode-radio:hover {
  background: rgba(232,183,48,0.08);
  border-color: rgba(232,183,48,0.30);
  color: #fff;
}
.joinmode-radio.active {
  background: linear-gradient(135deg, rgba(232,183,48,0.22), rgba(232,183,48,0.08));
  border-color: rgba(232,183,48,0.65);
  color: #fff;
  box-shadow: 0 4px 14px rgba(232,183,48,0.20), inset 0 1px 0 rgba(255,255,255,0.08);
}
.joinmode-hint {
  color: rgba(255,255,255,0.55);
  font-size: 0.8rem;
  line-height: 1.45;
  margin: 4px 0 0;
}

.joinmode-extra { margin-top: 12px; }
.joinmode-list {
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 10px 12px;
}
.joinmode-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 0.85rem;
  color: #efedfb;
  font-weight: 700;
}
.joinmode-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.joinmode-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  border-radius: 99px;
  background: rgba(167,139,250,0.15);
  border: 1px solid rgba(167,139,250,0.30);
  color: #cfc1f9;
  font-size: 0.78rem;
  animation: jm-pill-in 220ms ease both;
}
.joinmode-pill button {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(239,68,68,0.20);
  border: none;
  color: #ff8585;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.6rem;
  transition: background 150ms;
}
.joinmode-pill button:hover { background: rgba(239,68,68,0.50); color: #fff; }
.joinmode-empty {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  font-style: italic;
  padding: 4px 2px;
}
.joinmode-add-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.joinmode-add-input {
  flex: 1;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;
  font-size: 0.85rem;
  outline: none;
  transition: border-color 180ms, background 180ms;
}
.joinmode-add-input:focus {
  border-color: rgba(232,183,48,0.50);
  background: rgba(255,255,255,0.06);
}
.joinmode-mini-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: #efedfb;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms, border-color 160ms;
}
.joinmode-mini-btn:hover { background: rgba(232,183,48,0.14); border-color: rgba(232,183,48,0.35); }
.joinmode-mini-btn.primary {
  background: linear-gradient(135deg, #e8b730, #d39c1f);
  color: #1a1338;
  border-color: transparent;
  font-weight: 800;
}
.joinmode-mini-btn.primary:hover { filter: brightness(1.08); }

@keyframes jm-pill-in {
  0%   { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}

/* ============================================================
   5) KICKED-LIST CARD (Players tab)
   ============================================================ */
.kicked-list-card {
  margin-top: 14px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(239,68,68,0.06), rgba(0,0,0,0.20));
  border: 1px solid rgba(239,68,68,0.20);
  border-radius: 12px;
}
.kicked-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.88rem;
  color: #ffb6b6;
  font-weight: 800;
}
.kicked-clear {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: #efedfb;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 160ms;
}
.kicked-clear:hover { background: rgba(239,68,68,0.18); border-color: rgba(239,68,68,0.35); }

.kicked-list-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
}
.kicked-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  animation: kicked-in 240ms ease both;
}
.kicked-name {
  font-size: 0.85rem;
  color: #efedfb;
  font-weight: 600;
}
.kicked-unkick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 99px;
  background: rgba(16,185,129,0.14);
  border: 1px solid rgba(16,185,129,0.35);
  color: #6ee7b7;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms;
}
.kicked-unkick:hover { background: rgba(16,185,129,0.28); color: #fff; }
.kicked-empty {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  font-style: italic;
  text-align: center;
  padding: 10px 6px;
}

@keyframes kicked-in {
  0%   { opacity: 0; transform: translateX(8px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   6) PLAYER-ROW KICK BUTTON
   ============================================================ */
.jawlah-player-item { position: relative; }
.jp-kick-btn {
  margin-inline-start: auto;
  width: 26px; height: 26px;
  border-radius: 7px;
  background: rgba(239,68,68,0.10);
  border: 1px solid rgba(239,68,68,0.30);
  color: #ff8585;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  opacity: 0;
  transition: all 180ms;
}
.jawlah-player-item:hover .jp-kick-btn { opacity: 1; }
.jp-kick-btn:hover { background: rgba(239,68,68,0.30); color: #fff; }
@media (hover: none) { .jp-kick-btn { opacity: 0.85; } }

/* ============================================================
   7) GAME-HELP FAB (?)
   ============================================================ */
.game-help-fab {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(232,183,48,0.20), rgba(167,139,250,0.20));
  border: 1px solid rgba(232,183,48,0.40);
  color: #ffd56e;
  cursor: pointer;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 200ms, background 200ms, color 200ms;
  animation: help-fab-glow 3.4s ease-in-out infinite;
}
.game-help-fab:hover {
  transform: scale(1.10) rotate(-6deg);
  background: linear-gradient(135deg, #e8b730, #d39c1f);
  color: #1a1338;
}
@keyframes help-fab-glow {
  0%,100% { box-shadow: 0 0 12px rgba(232,183,48,0.30); }
  50%     { box-shadow: 0 0 22px rgba(232,183,48,0.65); }
}

/* ============================================================
   8) DRAW: open-word button on toolbar
   ============================================================ */
.draw-open-window-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(135deg, rgba(96,165,250,0.20), rgba(167,139,250,0.20));
  border: 1px solid rgba(96,165,250,0.45);
  border-radius: 99px;
  color: #c7daff;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 180ms;
}
.draw-open-window-btn:hover {
  background: linear-gradient(135deg, rgba(96,165,250,0.34), rgba(167,139,250,0.34));
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(96,165,250,0.25);
}
.draw-open-window-btn.is-active {
  background: linear-gradient(135deg, #10B981, #059669);
  border-color: #10B981;
  color: #fff;
  box-shadow: 0 0 14px rgba(16,185,129,0.45);
}

/* ============================================================
   9) SPY-GAME ROOM UI
   ============================================================ */
.spy-room-host,
.spy-room-player {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px;
  background: linear-gradient(160deg, rgba(26,19,56,0.6), rgba(14,10,34,0.6));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  color: #efedfb;
}
.spy-room-code {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(232,183,48,0.10), rgba(167,139,250,0.10));
  border: 1px solid rgba(232,183,48,0.30);
  border-radius: 14px;
  flex-wrap: wrap;
}
.spy-room-code-label { font-size: 0.85rem; color: rgba(255,255,255,0.6); }
.spy-room-code-value {
  font-family: 'SF Mono', 'JetBrains Mono', monospace;
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 4px;
  background: linear-gradient(135deg, #e8b730, #f8d97a);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.spy-room-copy {
  margin-inline-start: auto;
  background: rgba(232,183,48,0.15);
  border: 1px solid rgba(232,183,48,0.4);
  color: #ffd56e;
  padding: 6px 14px;
  border-radius: 99px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 180ms;
}
.spy-room-copy:hover { background: #e8b730; color: #1a1338; }

.spy-room-link {
  background: rgba(0,0,0,0.25);
  border: 1px dashed rgba(255,255,255,0.20);
  padding: 10px 14px;
  border-radius: 10px;
  font-family: 'SF Mono', monospace;
  font-size: 0.82rem;
  color: #cfc1f9;
  word-break: break-all;
  user-select: all;
}
.spy-room-qr-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.spy-room-qr {
  width: 160px;
  height: 160px;
  background: #fff;
  padding: 8px;
  border-radius: 12px;
  flex: 0 0 auto;
}
.spy-room-players-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
}
.spy-room-player-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  animation: kicked-in 240ms ease both;
}
.spy-room-player-row.is-spy {
  background: linear-gradient(135deg, rgba(239,68,68,0.18), rgba(239,68,68,0.04));
  border-color: rgba(239,68,68,0.4);
}
.spy-role-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 26px 22px;
  background: linear-gradient(160deg, #1a1338, #0e0a22);
  border: 2px solid rgba(232,183,48,0.5);
  border-radius: 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.spy-role-card.is-spy { border-color: #EF4444; }
.spy-role-card.is-spy::after {
  content: '🕵️';
  position: absolute;
  font-size: 12rem;
  opacity: 0.04;
  inset-block: 0;
  inset-inline-end: -20px;
  transform: rotate(-12deg);
}
.spy-role-label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.spy-role-name {
  font-size: 2.2rem;
  font-weight: 900;
  background: linear-gradient(135deg, #e8b730, #f8d97a);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0 8px;
}
.spy-role-card.is-spy .spy-role-name {
  background: linear-gradient(135deg, #EF4444, #ff8585);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.spy-role-hint {
  color: rgba(255,255,255,0.55);
  font-size: 0.9rem;
  max-width: 320px;
  line-height: 1.5;
}
.spy-role-reveal-btn {
  background: linear-gradient(135deg, #e8b730, #d39c1f);
  color: #1a1338;
  border: none;
  padding: 12px 26px;
  border-radius: 99px;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(232,183,48,0.4);
  transition: transform 180ms;
}
.spy-role-reveal-btn:hover { transform: translateY(-2px); }

/* ============================================================
   10) HERO CHARACTER — MOBILE FIX
   The character image was breaking out of its circle on mobile.
   We constrain it inside the circle and override the inline
   width that app.js applies (hero_char_size + 60px).
   ============================================================ */
@media (max-width: 768px) {
  #hero-char-img,
  .hero-character-img {
    width: 220px !important;
    height: 220px !important;
    max-width: 220px !important;
    max-height: 220px !important;
    object-fit: contain !important;
    transform: translate(-50%, -50%) !important;
    inset-inline-start: 50% !important;
    top: 50% !important;
  }
  .hero-character-circle {
    width: 220px !important;
    height: 220px !important;
    overflow: hidden !important;
  }
}

@media (max-width: 480px) {
  #hero-char-img,
  .hero-character-img {
    width: 180px !important;
    height: 180px !important;
    max-width: 180px !important;
    max-height: 180px !important;
  }
  .hero-character-circle {
    width: 180px !important;
    height: 180px !important;
  }
}

/* ============================================================
   RTL polish — fix inset-inline drift on older browsers
   ============================================================ */
[dir="rtl"] .gtut-close { right: auto; left: 12px; }
[dir="ltr"] .gtut-close { right: 12px; left: auto; }
[dir="rtl"] .game-help-fab { right: auto; left: 14px; }
[dir="ltr"] .game-help-fab { right: 14px; left: auto; }


/* ─────────── SOURCE: css/hero-mobile-fix.css ─────────── */
/* ============================================================
   HERO CHARACTER MOBILE FIX — 2026-05-13 (HOTFIX v2)
   ------------------------------------------------------------
   Previous version overrode position/transform/inset which
   stripped the inline transform: translate(calc(-50% + Xpx),
   calc(-50% + Ypx)) and made the image disappear on mobile.
   
   This version ONLY constrains size and lets the existing
   CSS + inline positioning handle placement. The image
   stays smaller than the circle so it visibly fits inside.
   ============================================================ */

/* Tablets and small laptops */
@media (max-width: 1024px) {
  #hero-char-img,
  .hero-character-img {
    max-width: 95% !important;
    max-height: 95% !important;
    object-fit: contain !important;
  }
  .hero-character-circle {
    overflow: hidden !important;
  }
}

/* Phones — image must be SMALLER than circle so it shows */
@media (max-width: 768px) {
  .hero-character-circle {
    width: 240px !important;
    height: 240px !important;
    overflow: hidden !important;
  }
  #hero-char-img,
  .hero-character-img {
    /* Keep image fitting inside the 240px circle */
    width: 200px !important;
    height: 200px !important;
    max-width: 200px !important;
    max-height: 200px !important;
    object-fit: contain !important;
    object-position: center top !important;
    /* Do NOT override position/transform/inset — let existing
       CSS + inline style handle centering. */
  }
}

/* Small phones */
@media (max-width: 480px) {
  .hero-character-circle {
    width: 200px !important;
    height: 200px !important;
  }
  #hero-char-img,
  .hero-character-img {
    width: 170px !important;
    height: 170px !important;
    max-width: 170px !important;
    max-height: 170px !important;
  }
}

/* Tiny phones */
@media (max-width: 360px) {
  .hero-character-circle {
    width: 170px !important;
    height: 170px !important;
  }
  #hero-char-img,
  .hero-character-img {
    width: 140px !important;
    height: 140px !important;
    max-width: 140px !important;
    max-height: 140px !important;
  }
}


/* ─────────── SOURCE: css/hotfix-2026-05-13-bugs.css ─────────── */
/* =================================================================
 *  ElAshkef — HOTFIX BUGS 2026-05-13 — Styles
 *  -----------------------------------------------------------------
 *  Companion to hotfix-2026-05-13-bugs.js
 *  Provides the unified tutorial overlay (.utut-*) and hides the
 *  legacy how-to-play overlay (.htp-overlay) if it ever re-appears.
 * =================================================================*/

/* --- Force legacy how-to overlay invisible if anything still shows it --- */
.htp-overlay { display: none !important; }
#htp-help-fab { display: none !important; }

/* --- Hide major-upgrade tutorial in favor of unified one --- */
#game-tutorial-overlay { display: none !important; }

/* =================================================================
 *  UNIFIED TUTORIAL OVERLAY  —  .utut-*
 * =================================================================*/
.utut-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(8, 10, 18, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 220ms ease;
}
.utut-overlay.is-open { opacity: 1; }

.utut-card {
  position: relative;
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(160deg,
    rgba(34, 36, 56, 0.95) 0%,
    rgba(22, 24, 38, 0.95) 100%);
  border: 1px solid rgba(232, 183, 48, 0.22);
  border-radius: 22px;
  padding: 28px 26px 22px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(232, 183, 48, 0.06) inset;
  opacity: 0;
  transform: scale(0.94) translateY(14px);
  transition: opacity 260ms ease, transform 320ms cubic-bezier(.18,.7,.32,1);
  color: #E8EAF1;
}
.utut-overlay.is-open .utut-card {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.utut-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 23px;
  background: linear-gradient(135deg,
    rgba(232, 183, 48, 0.30),
    transparent 40%,
    rgba(167, 139, 250, 0.20));
  z-index: -1;
  filter: blur(8px);
  opacity: 0.6;
  pointer-events: none;
}

.utut-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #FCA5A5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 220ms ease, background 220ms ease;
  z-index: 2;
}
.utut-close:hover {
  background: rgba(239, 68, 68, 0.30);
  transform: rotate(90deg);
}

.utut-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding-inline-end: 32px;
}

.utut-orb {
  position: relative;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
}
.utut-orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px dashed rgba(232, 183, 48, 0.55);
  animation: utut-spin 6s linear infinite;
}
.utut-orb-core {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
    rgba(232, 183, 48, 0.95),
    rgba(232, 183, 48, 0.55));
  color: #1a1d2e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 0 18px rgba(232, 183, 48, 0.5);
}
@keyframes utut-spin { to { transform: rotate(360deg); } }

.utut-titles { min-width: 0; flex: 1; }
.utut-title {
  margin: 0 0 4px;
  font-size: 1.25rem;
  font-weight: 800;
  color: #FFF;
  line-height: 1.25;
}
.utut-game {
  color: var(--gold, #E8B730);
  font-weight: 900;
}
.utut-sub {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.35;
}

.utut-intro {
  background: rgba(232, 183, 48, 0.06);
  border: 1px solid rgba(232, 183, 48, 0.14);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 16px;
}

.utut-rules-head {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold, #E8B730);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.utut-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.utut-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
  opacity: 0;
  transform: translateY(8px);
  animation: utut-step-in 460ms cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: calc(120ms + var(--i, 0) * 70ms);
}
@keyframes utut-step-in {
  to { opacity: 1; transform: translateY(0); }
}
.utut-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg,
    rgba(232, 183, 48, 0.25),
    rgba(232, 183, 48, 0.12));
  border: 1px solid rgba(232, 183, 48, 0.30);
  color: var(--gold, #E8B730);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.82rem;
}
.utut-text { flex: 1; }

.utut-chat-ex {
  background: rgba(145, 70, 255, 0.08);
  border: 1px solid rgba(145, 70, 255, 0.22);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 0.88rem;
}
.utut-chat-ex-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 4px;
}
.utut-chat-user { color: #A78BFA; font-weight: 700; }
.utut-chat-msg  { color: rgba(255, 255, 255, 0.92); }

.utut-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.utut-dont {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}
.utut-dont input { display: none; }
.utut-dont span {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 180ms ease;
  position: relative;
}
.utut-dont input:checked + span {
  background: var(--gold, #E8B730);
  border-color: var(--gold, #E8B730);
}
.utut-dont input:checked + span::after {
  content: '✓';
  color: #1a1d2e;
  font-weight: 900;
  font-size: 0.78rem;
}
.utut-dont em { font-style: normal; }

.utut-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: linear-gradient(135deg, var(--gold, #E8B730), #F5D261);
  color: #1a1d2e;
  border: none;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
  box-shadow: 0 6px 18px rgba(232, 183, 48, 0.32);
}
.utut-cta:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 10px 24px rgba(232, 183, 48, 0.42);
}
.utut-cta:active { transform: translateY(0) scale(0.99); }

/* --- Mobile tweaks --- */
@media (max-width: 600px) {
  .utut-card { padding: 22px 18px 18px; border-radius: 18px; }
  .utut-title { font-size: 1.1rem; }
  .utut-orb { width: 48px; height: 48px; }
  .utut-orb-core { font-size: 1.25rem; }
  .utut-foot { flex-direction: column; align-items: stretch; }
  .utut-cta { width: 100%; justify-content: center; }
}


/* ─────────── SOURCE: css/hotfix-2026-05-13-bugs-v2.css ─────────── */
/* ==========================================================================
 * ElAshkef HOTFIX 2026-05-13 — V2 styles
 * --------------------------------------------------------------------------
 * Companion to hotfix-2026-05-13-bugs-v2.js
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * (B) Suppress Laeib's second tutorial popup. The JS also re-routes
 * showGameInfo, but this is a belt-and-braces guarantee — if another
 * script tries to spawn #game-info-popup while a unified tutorial is
 * already visible, hide it.
 * -------------------------------------------------------------------------- */
.utut-overlay ~ #game-info-popup,
#game-tutorial-overlay ~ #game-info-popup {
  display: none !important;
}

/* When user is on laeib, #game-info-popup should NEVER appear — the
 * unified tutorial is the single source of truth.
 * Body-data hook is set by major-upgrade-2026-05-13.js via _currentGameId.
 * We can't read JS state from CSS, so the JS handles this; here we just
 * make sure if it ever appears WITHOUT a tutorial, it's not styled away. */

/* --------------------------------------------------------------------------
 * (D) Draw-guess: category picker bar
 * -------------------------------------------------------------------------- */
.draw-cat-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin: 0 0 10px 0;
  background: rgba(232, 183, 48, 0.04);
  border: 1px solid rgba(232, 183, 48, 0.18);
  border-radius: 12px;
}

.draw-cat-bar .draw-cat-label {
  font-weight: 700;
  color: #E8B730;
  margin-inline-end: 4px;
  font-size: 0.92rem;
}

.draw-cat-bar .draw-cat-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.86);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.draw-cat-bar .draw-cat-btn:hover {
  background: rgba(232, 183, 48, 0.12);
  border-color: rgba(232, 183, 48, 0.4);
  color: #fff;
}
.draw-cat-bar .draw-cat-btn.is-active {
  background: linear-gradient(135deg, #E8B730, #F5D261);
  color: #111;
  border-color: #E8B730;
  box-shadow: 0 4px 12px rgba(232, 183, 48, 0.3);
}

.draw-cat-bar .draw-cat-help {
  margin-inline-start: auto;
  appearance: none;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #C4B5FD;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.draw-cat-bar .draw-cat-help:hover {
  background: rgba(168, 85, 247, 0.22);
  color: #fff;
}

@media (max-width: 640px) {
  .draw-cat-bar {
    gap: 6px;
    padding: 8px 10px;
  }
  .draw-cat-bar .draw-cat-btn {
    padding: 5px 10px;
    font-size: 0.82rem;
  }
  .draw-cat-bar .draw-cat-help {
    margin-inline-start: 0;
    width: 100%;
    justify-content: center;
    margin-top: 6px;
  }
}

/* --------------------------------------------------------------------------
 * (E) Hide-modes tutorial — uses .utut-* base classes (defined in
 * hotfix-2026-05-13-bugs.css). Only add extra spacing for the tips.
 * -------------------------------------------------------------------------- */
.utut-overlay .utut-step {
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}
.utut-overlay .utut-step-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E8B730, #F5D261);
  color: #111;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}
.utut-overlay .utut-step-content { flex: 1; }
.utut-overlay .utut-step-title {
  font-weight: 700;
  color: #E8B730;
  margin-bottom: 6px;
  font-size: 0.98rem;
}
.utut-overlay .utut-step-title i { margin-inline-end: 6px; }
.utut-overlay .utut-step-text {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
  line-height: 1.6;
}
.utut-overlay .utut-step-text b {
  color: #F5D261;
  font-weight: 700;
}
.utut-overlay .utut-tip {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 10px;
  color: #86EFAC;
  font-size: 0.9rem;
  line-height: 1.5;
}
.utut-overlay .utut-tip i { margin-inline-end: 6px; color: #FBBF24; }

/* --------------------------------------------------------------------------
 * Draw-guess hide-modes FAB
 * -------------------------------------------------------------------------- */
.draw-hidemodes-fab {
  position: fixed;
  bottom: 22px;
  inset-inline-end: 22px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #A855F7, #7E22CE);
  color: #fff;
  border: none;
  font-size: 1.4rem;
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.5);
  cursor: pointer;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.draw-hidemodes-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 26px rgba(168, 85, 247, 0.7);
}

/* --------------------------------------------------------------------------
 * (F) HERO mobile image — last-line CSS overrides
 * The JS forces inline styles with !important, but we add CSS as a fallback
 * in case JS is delayed (e.g. flaky network on first paint).
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  #hero-char-img,
  .hero-character-img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    /* Specificity boost: this rule must beat the inline `transform`
       built by app.js. JS layer is the actual fix; this is fallback. */
    /* transform overridden by JS via setProperty('transform', '...', 'important')
       which beats this CSS rule. */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }
}

/* Sizing only — JS handles the transform centering. */
@media (max-width: 768px) and (min-width: 481px) {
  #hero-char-img,
  .hero-character-img {
    width: 200px !important;
    height: 200px !important;
  }
}
@media (max-width: 480px) and (min-width: 361px) {
  #hero-char-img,
  .hero-character-img {
    width: 170px !important;
    height: 170px !important;
  }
}
@media (max-width: 360px) {
  #hero-char-img,
  .hero-character-img {
    width: 140px !important;
    height: 140px !important;
  }
}


/* ─────────── SOURCE: css/hotfix-2026-05-13-bugs-v3.css ─────────── */
/* ==========================================================================
 * ElAshkef HOTFIX V3 — CSS companion
 * --------------------------------------------------------------------------
 * Loaded LAST. Purely additive — no rules removed.
 * ========================================================================== */

/* ----------------------------------------------------------------
 * Issue 4b — kill the legacy laeib intro popup so only the unified
 * tutorial shows. The JS hotfix also routes the function call, but
 * the CSS is a belt-and-braces guarantee in case any code path
 * still renders the overlay (e.g. a future merge from upstream).
 * ---------------------------------------------------------------- */
#laeib-howto-overlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* If both the legacy htp-overlay (already hidden by v1) AND the
 * unified utut overlay try to show, force only one to be visible. */
body.utut-open #laeib-howto-overlay,
body.utut-open .htp-overlay,
body.utut-open #game-info-popup {
  display: none !important;
}

/* ----------------------------------------------------------------
 * Issue 3 — Visual affordance for bot-mention status
 * ---------------------------------------------------------------- */
.hf3-bot-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.15em 0.55em;
  border-radius: 999px;
  background: rgba(232, 183, 48, 0.12);
  color: var(--gold, #e8b730);
  font-size: 0.78em;
  font-weight: 700;
  margin-right: 0.3em;
  border: 1px solid rgba(232, 183, 48, 0.25);
}
.hf3-bot-pill i {
  font-size: 0.85em;
}

/* Inline jawlah chat row sent BY the bot — slight distinction */
.jawlah-chat-msg[data-from="BOT"],
.jawlah-chat-row[data-from="BOT"] {
  background: linear-gradient(
    90deg,
    rgba(232, 183, 48, 0.07) 0%,
    rgba(232, 183, 48, 0.02) 100%
  ) !important;
  border-left: 3px solid var(--gold, #e8b730) !important;
}

/* ----------------------------------------------------------------
 * Issue 1 — Make the join-mode picker friendlier & easier to scan.
 * The four modes are: open | join | teams | whitelist.
 * Add an active-state highlight so streamers visually confirm
 * which mode is currently selected.
 * ---------------------------------------------------------------- */
.pgs-radio-group.joinmode-group {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
}
.pgs-radio-group.joinmode-group .pgs-radio-pill {
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pgs-radio-group.joinmode-group .pgs-radio-pill:hover {
  background: rgba(232, 183, 48, 0.06) !important;
  border-color: rgba(232, 183, 48, 0.35) !important;
}
.pgs-radio-group.joinmode-group input[type="radio"]:checked + label,
.pgs-radio-group.joinmode-group .pgs-radio-pill.is-active,
.pgs-radio-group.joinmode-group .pgs-radio-pill:has(input:checked) {
  background: linear-gradient(
    135deg,
    rgba(232, 183, 48, 0.22),
    rgba(232, 183, 48, 0.08)
  ) !important;
  border-color: rgba(232, 183, 48, 0.6) !important;
  color: var(--gold, #e8b730) !important;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(232, 183, 48, 0.25) inset;
}

.joinmode-hint {
  margin-top: 6px;
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.45;
}
.joinmode-hint::before {
  content: "💡 ";
  margin-right: 4px;
}

/* Joined-players / whitelist pills container */
.joinmode-list-wrap,
.joinmode-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 140px;
  overflow-y: auto;
  padding: 4px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.joinmode-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(232, 183, 48, 0.08);
  border: 1px solid rgba(232, 183, 48, 0.25);
  color: var(--gold, #e8b730);
  font-size: 0.85em;
  font-weight: 600;
}
.joinmode-pill button {
  all: unset;
  cursor: pointer;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 80, 80, 0.15);
  color: rgba(255, 120, 120, 0.95);
  font-size: 0.75em;
  transition: background 0.15s;
}
.joinmode-pill button:hover {
  background: rgba(255, 80, 80, 0.4);
  color: #fff;
}

.joinmode-empty {
  width: 100%;
  text-align: center;
  padding: 12px 8px;
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.45);
  font-style: italic;
}

/* ----------------------------------------------------------------
 * Issue 2 — Correct-answer credit visualization
 * Highlight the leaderboard row briefly when a chat user gets credited.
 * ---------------------------------------------------------------- */
@keyframes hf3-credit-flash {
  0%   { background: rgba(34, 197, 94, 0.25); }
  100% { background: transparent; }
}
.jawlah-player-row.hf3-credited {
  animation: hf3-credit-flash 1.6s ease-out 1;
}

/* ----------------------------------------------------------------
 * Mobile polish — make the joinmode bar wrap nicely on phones
 * ---------------------------------------------------------------- */
@media (max-width: 640px) {
  .pgs-radio-group.joinmode-group {
    gap: 4px;
  }
  .pgs-radio-group.joinmode-group .pgs-radio-pill {
    font-size: 0.82em;
    padding: 4px 8px;
  }
  .joinmode-list-wrap,
  .joinmode-pills {
    max-height: 110px;
  }
}


/* ─────────── SOURCE: css/hotfix-2026-05-17-mobile-qa.css ─────────── */
/* ============================================================
   FINAL MOBILE QA HOTFIX — 2026-05-17
   ------------------------------------------------------------
   ROOT CAUSE (discovered via Playwright probe):
   The site is RTL (dir="rtl"). The hero image #hero-char-img
   has CSS chain that ends up setting BOTH left:50% and
   (implicitly via cascade) right:50% — visible as
   `inset: 97px 97px -73px` in computed style.
   
   In LTR mode, browsers ignore `right` when both are set on a
   fixed-width element. But in RTL, `right` wins. With parent
   200px wide and right:97px (which is 50%), the image gets
   anchored at right edge, then translate(-50%,-50%) drags it
   another 170px further right (in CSS = visually LEFT in RTL
   actually visually further into negative x). Net result:
   image at x=-60, completely OUTSIDE the gold circle.
   
   FIX: Force `right:auto !important` on mobile so only `left`
   anchors, then translate(-50%,-50%) centers correctly.
   Also clear `bottom:auto` to prevent vertical inset issues.
   ============================================================ */

/* Apply to ALL mobile widths — must beat hotfix-2026-05-13 JS */
/*
 * IMPORTANT RTL NOTE: Site is dir="rtl". Logical properties FLIP:
 *   inset-inline-start in RTL = right (physical)
 *   inset-inline-end   in RTL = left  (physical)
 * The previous hotfix-2026-05-13 set `inset-inline-start: 50% !important`
 * which in RTL means `right: 50%` — anchoring the image to the RIGHT side
 * of the parent. Combined with transform: translate(-50%,-50%) this pushed
 * the image entirely OUT of the gold circle on the left.
 *
 * Fix: explicitly use physical `left` ONLY on mobile and explicitly clear
 * logical properties so RTL flipping doesn't apply. Desktop keeps the
 * original behavior (char-above-circle with offset_x/offset_y).
 */

@media (max-width: 768px) {
  /* CHAR-ABOVE-CIRCLE MODE (default in production):
   * Desktop intentionally has the character STANDING ON the circle —
   * the top of the character (head/shoulders) extends ABOVE the gold ring.
   * We must replicate this on mobile.
   *
   * Implementation:
   *  - overflow: visible on the circle (so character can extend out)
   *  - Image WIDER than the circle so it visually rests on top
   *  - Image's BOTTOM anchored to circle bottom (translateY(-something))
   *  - Image centered horizontally
   */
  .hero-character-circle.char-above-circle {
    overflow: visible !important; /* allow character to extend above circle */
  }
  
  /* Fallback if not char-above-circle (clip mode): clip inside circle */
  .hero-character-circle:not(.char-above-circle) {
    overflow: hidden !important;
    border-radius: 50% !important;
  }
  
  /* Image positioning for char-above mode */
  .hero-character-circle.char-above-circle #hero-char-img,
  .hero-character-circle.char-above-circle .hero-character-img {
    /* Kill all RTL-flipping logical props */
    inset-inline-start: auto !important;
    inset-inline-end:   auto !important;
    inset-block-start:  auto !important;
    inset-block-end:    auto !important;
    right: auto !important;
    /* Anchor: bottom of image touches bottom of circle (image stands on circle) */
    left: 50% !important;
    bottom: 0 !important;
    top: auto !important;
    /* Center horizontally only — bottom is already anchored */
    transform: translateX(-50%) !important;
    transform-origin: center bottom !important;
    /* Visibility */
    position: absolute !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    object-fit: contain !important;
    object-position: center bottom !important; /* aligns image content to bottom */
    z-index: 5 !important; /* above particles/glow */
  }
  
  /* For non-above mode (legacy fallback): center inside circle */
  .hero-character-circle:not(.char-above-circle) #hero-char-img,
  .hero-character-circle:not(.char-above-circle) .hero-character-img {
    inset-inline-start: auto !important;
    inset-inline-end:   auto !important;
    inset-block-start:  auto !important;
    inset-block-end:    auto !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    position: absolute !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    object-fit: contain !important;
  }
}

/* Sizing for char-above mode:
 * Circle stays fixed size. Image is LARGER than the circle to extend above.
 * On desktop the image is ~340px width vs 320px circle (104% width, taller).
 * We replicate that proportion on mobile.
 */
@media (max-width: 768px) and (min-width: 481px) {
  .hero-character-circle.char-above-circle,
  .hero-character-circle {
    width: 240px !important;
    height: 240px !important;
  }
  /* char-above-mode: image bigger than circle, stands on top */
  .hero-character-circle.char-above-circle #hero-char-img,
  .hero-character-circle.char-above-circle .hero-character-img {
    width: 250px !important;     /* slightly wider than circle */
    height: 290px !important;    /* taller — head pops out the top */
    max-width: 250px !important;
    max-height: 290px !important;
  }
  /* clip-mode: image smaller than circle, centered inside */
  .hero-character-circle:not(.char-above-circle) #hero-char-img,
  .hero-character-circle:not(.char-above-circle) .hero-character-img {
    width: 200px !important;
    height: 200px !important;
    max-width: 200px !important;
    max-height: 200px !important;
  }
}

@media (max-width: 480px) and (min-width: 361px) {
  .hero-character-circle.char-above-circle,
  .hero-character-circle {
    width: 200px !important;
    height: 200px !important;
  }
  .hero-character-circle.char-above-circle #hero-char-img,
  .hero-character-circle.char-above-circle .hero-character-img {
    width: 210px !important;
    height: 245px !important;
    max-width: 210px !important;
    max-height: 245px !important;
  }
  .hero-character-circle:not(.char-above-circle) #hero-char-img,
  .hero-character-circle:not(.char-above-circle) .hero-character-img {
    width: 170px !important;
    height: 170px !important;
    max-width: 170px !important;
    max-height: 170px !important;
  }
}

@media (max-width: 360px) {
  .hero-character-circle.char-above-circle,
  .hero-character-circle {
    width: 170px !important;
    height: 170px !important;
  }
  .hero-character-circle.char-above-circle #hero-char-img,
  .hero-character-circle.char-above-circle .hero-character-img {
    width: 180px !important;
    height: 210px !important;
    max-width: 180px !important;
    max-height: 210px !important;
  }
  .hero-character-circle:not(.char-above-circle) #hero-char-img,
  .hero-character-circle:not(.char-above-circle) .hero-character-img {
    width: 140px !important;
    height: 140px !important;
    max-width: 140px !important;
    max-height: 140px !important;
  }
}

/* Ensure the outer/parent has room for the character to extend above.
   Add top padding so the character's head doesn't get cut off by elements above. */
@media (max-width: 768px) {
  .hero-character-outer {
    padding-top: 50px !important;
    margin-top: 10px !important;
  }
}

/* ============================================================
   MOBILE RESPONSIVENESS POLISH
   ------------------------------------------------------------
   General improvements for mobile experience identified
   during final QA pass.
   ============================================================ */

@media (max-width: 768px) {
  /* Prevent horizontal scroll caused by any overflow */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  /* Ensure all containers respect viewport */
  .max-w-5xl, .max-w-6xl, .max-w-7xl,
  .container, [class*="container-"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Tap targets — minimum 44px per WCAG / Apple HIG */
  button, .btn, a.button, [role="button"], input[type="button"], input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Smaller buttons in tight contexts get padding fix */
  .icon-btn, .icon-only-btn {
    min-height: 40px;
    min-width: 40px;
  }
  
  /* Make hero text breathe */
  .hero-section h1, .hero-section h2 {
    line-height: 1.3 !important;
    word-wrap: break-word;
  }
  
  /* Modals should not exceed viewport */
  .modal, .modal-content, [role="dialog"] {
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 16px) !important;
    box-sizing: border-box;
  }
}

/* Phones */
@media (max-width: 480px) {
  /* Reduce hero section padding so circle has room */
  .hero-section {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  
  /* Game cards stack to single column on smallest screens */
  .games-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}


/* ==== source: codenames ashkef card skin - main site (2026-07-05) ====
   Adds the Ashkef emblem watermark to codenames cards WITHOUT changing
   any card colors (pre-baked low-opacity PNG layered behind the word). */
.codename-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/uploads/cn-emblem-white-soft.png') center / 62% no-repeat;
  pointer-events: none;
  border-radius: inherit;
}


/* ==== source: navbar covering hero character fix (2026-07-13) ====
   المشكلة (Glitch متكرر): الشريط العلوي الثابت #main-nav (~65px ديسكتوب /
   ~83px موبايل) كان يغطي رأس شخصية الهيرو، لأن .hero-section تستخدم
   align-items:center بدون أي padding علوي يحسب حساب الـ nav الثابت،
   والصورة في وضع char-above تمتد ~80px فوق أعلى الدائرة الذهبية
   (بالإضافة إلى offset_y السالب من لوحة التحكم وأنيميشن float ±10px).
   القياس قبل الإصلاح: أعلى الصورة عند y=-20px ديسكتوب و y=51px موبايل
   (تحت الـ nav في الحالتين).
   الحل الجذري: بدء محتوى الهيرو من تحت الـ nav مباشرة (flex-start +
   padding-top بارتفاع الـ nav) + هامش علوي كافٍ لامتداد رأس الشخصية. */
.hero-section {
  align-items: flex-start;
  padding-top: 72px; /* ارتفاع الـ nav الثابت + هامش أمان */
  box-sizing: border-box;
}
/* ديسكتوب: مساحة إضافية لرأس الشخصية الممتد ~80px فوق الدائرة
   + أنيميشن float الذي يرفعها 10px إضافية */
@media (min-width: 769px) {
  .hero-character-outer {
    margin-top: 44px;
  }
}