/* ============================================================
   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; }