/* ============================================================
   انسان حيوان شيء — paper-meets-modern aesthetic
   cream paper, ink blue, coral, mint
============================================================ */

:root {
  --paper: #F5EFE3;
  --paper-2: #EDE5D2;
  --paper-line: #D9CFB7;
  --ink: #1F2A44;
  --ink-soft: #45506B;
  --ink-mute: #8A8FA0;
  --coral: #E76F51;
  --coral-soft: #F4A892;
  --mint: #2A9D8F;
  --mint-soft: #88C9BF;
  --amber: #E9B949;
  --amber-soft: #F4D58A;
  --rose: #C24E4E;
  --shadow-sm: 0 1px 2px rgba(31,42,68,.08), 0 2px 8px rgba(31,42,68,.06);
  --shadow-md: 0 4px 12px rgba(31,42,68,.10), 0 12px 32px rgba(31,42,68,.08);
  --shadow-lg: 0 8px 24px rgba(31,42,68,.14), 0 24px 64px rgba(31,42,68,.10);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Tajawal', 'Segoe UI', system-ui, sans-serif;
  font-feature-settings: "ss01" on;
  min-height: 100vh;
  direction: rtl;
}

/* paper texture: subtle horizontal rule + grain */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 12% 20%, rgba(231,111,81,.04) 0, transparent 40%),
    radial-gradient(circle at 88% 80%, rgba(42,157,143,.04) 0, transparent 40%),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 33px,
      rgba(217, 207, 183, .35) 33px,
      rgba(217, 207, 183, .35) 34px
    );
}
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.16 0 0 0 0 0.27 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .55;
  mix-blend-mode: multiply;
}

#root { position: relative; z-index: 1; }

h1,h2,h3,h4,.display {
  font-family: 'Tajawal', 'Tajawal', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.01em;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
}

input {
  font-family: inherit;
  direction: rtl;
}

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 24px 32px 48px;
  max-width: 1280px;
  margin: 0 auto;
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 4px 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-mark {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Tajawal', sans-serif;
  font-size: 26px;
  position: relative;
  box-shadow: var(--shadow-sm);
  transform: rotate(-3deg);
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: -4px -3px;
  border: 2px dashed var(--ink-mute);
  border-radius: 14px;
  opacity: .35;
}
.brand-name {
  font-family: 'Tajawal', sans-serif;
  font-size: 22px;
  line-height: 1;
}
.brand-tag {
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: 2px;
}

.top-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  color: var(--ink-soft);
}

/* ---------- card / surface ---------- */
.surface {
  background: rgba(253, 250, 244, .85);
  backdrop-filter: blur(2px);
  border: 1px solid var(--paper-line);
  border-radius: 24px;
  box-shadow: var(--shadow-md);
  padding: 32px;
  position: relative;
}
.surface.tape::before {
  content: "";
  position: absolute;
  top: -14px; right: 36px;
  width: 90px; height: 26px;
  background: rgba(233, 185, 73, .55);
  border: 1px dashed rgba(31,42,68,.15);
  transform: rotate(-3deg);
  box-shadow: 0 2px 6px rgba(31,42,68,.10);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  border-radius: 14px;
  font-family: 'Tajawal', sans-serif;
  font-size: 17px;
  background: var(--ink);
  color: var(--paper);
  transition: transform .12s ease, box-shadow .12s ease, background .12s;
  box-shadow: 0 2px 0 rgba(0,0,0,.18), var(--shadow-sm);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 3px 0 rgba(0,0,0,.18), var(--shadow-md); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.18); }
.btn.coral { background: var(--coral); color: #fff; }
.btn.mint { background: var(--mint); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.ghost:hover { background: rgba(31,42,68,.06); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.btn-big {
  padding: 22px 36px;
  font-size: 22px;
  border-radius: 18px;
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(31,42,68,.08);
  color: var(--ink-soft);
}
.chip.live { background: rgba(231,111,81,.15); color: var(--coral); }
.chip.live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--coral); box-shadow: 0 0 0 0 rgba(231,111,81,.6);
  animation: livepulse 1.4s ease-out infinite;
}
@keyframes livepulse {
  0%   { box-shadow: 0 0 0 0 rgba(231,111,81,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(231,111,81,0); }
  100% { box-shadow: 0 0 0 0 rgba(231,111,81,0); }
}

/* ---------- avatars ---------- */
.avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Tajawal', sans-serif;
  font-size: 22px;
  color: #fff;
  position: relative;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.avatar.sm { width: 36px; height: 36px; font-size: 15px; }
.avatar.lg { width: 88px; height: 88px; font-size: 34px; }
.avatar.host::after {
  content: "👑";
  position: absolute;
  top: -8px; left: -6px;
  font-size: 18px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.2));
}
.avatar .ring {
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2.5px dashed var(--paper);
  opacity: .45;
}

/* ---------- LOBBY ---------- */
.lobby-grid {
  display: grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 24px;
}
@media (max-width: 880px) { .lobby-grid { grid-template-columns: 1fr; } }

.invite-card { display: flex; flex-direction: column; gap: 18px; }
.invite-link {
  display: flex; align-items: center; gap: 12px;
  background: var(--paper-2);
  border: 1.5px dashed var(--paper-line);
  border-radius: 14px;
  padding: 14px 16px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  direction: ltr;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.invite-link:hover { border-color: var(--coral); background: rgba(231,111,81,.06); }
.invite-link .grow { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.players-card { display: flex; flex-direction: column; gap: 14px; }
.player-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--paper-line);
  animation: rowIn .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes rowIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
.player-row .name { font-family: 'Tajawal', sans-serif; font-size: 18px; }
.player-row .meta { font-size: 12px; color: var(--ink-mute); margin-top: 2px; }
.player-row .ready-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--paper-line);
  margin-inline-start: auto;
}
.player-row.ready .ready-dot {
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(42,157,143,.18);
}
.player-row.you {
  background: rgba(233, 185, 73, .14);
  border-color: var(--amber);
}

.empty-slot {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1.5px dashed var(--paper-line);
  color: var(--ink-mute);
  font-size: 14px;
}
.empty-slot .blob {
  width: 36px; height: 36px; border-radius: 50%;
  background: repeating-linear-gradient(45deg, var(--paper-2), var(--paper-2) 4px, var(--paper) 4px, var(--paper) 8px);
}

/* ---------- LETTER SCATTER ---------- */
.scatter-stage {
  position: relative;
  height: 520px;
  border-radius: 24px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.7), transparent 70%);
}
.scatter-letter {
  position: absolute;
  font-family: 'Tajawal', sans-serif;
  color: var(--ink);
  user-select: none;
  transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .6s;
  will-change: transform, opacity;
}
.scatter-letter.dim { opacity: .25; }
.scatter-letter.chosen {
  z-index: 5;
  color: var(--coral);
}

/* ---------- PLAY SCREEN ---------- */
.play-shell {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
}
@media (max-width: 980px) { .play-shell { grid-template-columns: 1fr; } }

.timer-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 18px;
  border-radius: 999px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-sm);
}
.timer-pill .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--coral);
  animation: livepulse 1.2s ease-out infinite;
}

.letter-banner {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 20px;
  background: linear-gradient(95deg, var(--amber-soft), rgba(233,185,73,0));
  border: 1px solid rgba(233,185,73,.6);
  border-radius: 18px;
  margin-bottom: 18px;
}
.letter-banner .big {
  font-family: 'Tajawal', sans-serif;
  font-size: 56px;
  line-height: 1;
  color: var(--ink);
  width: 72px; height: 72px;
  background: var(--paper);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--paper-line);
}
.letter-banner .label { font-size: 13px; color: var(--ink-soft); margin-bottom: 2px; }
.letter-banner .ttl { font-family: 'Tajawal', sans-serif; font-size: 22px; }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 720px) { .cat-grid { grid-template-columns: 1fr; } }

.cat-card {
  background: rgba(255,255,255,.7);
  border: 1.5px solid var(--paper-line);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .15s, transform .12s, box-shadow .15s;
  position: relative;
}
.cat-card:focus-within {
  border-color: var(--coral);
  box-shadow: 0 0 0 4px rgba(231,111,81,.15);
}
.cat-card.filled { border-color: var(--mint); background: rgba(136,201,191,.12); }
.cat-card .cat-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.cat-card .cat-name {
  font-family: 'Tajawal', sans-serif;
  font-size: 17px;
  color: var(--ink);
}
.cat-card .cat-icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--paper-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  color: var(--ink-soft);
}
.cat-card input {
  background: transparent;
  border: none;
  border-bottom: 2px dotted var(--paper-line);
  padding: 8px 2px;
  font-size: 22px;
  font-family: 'Tajawal', sans-serif;
  color: var(--ink);
  outline: none;
  width: 100%;
  transition: border-color .12s;
}
.cat-card input:focus { border-bottom-color: var(--coral); border-bottom-style: solid; }
.cat-card.filled input { border-bottom-color: var(--mint); border-bottom-style: solid; }
.cat-card .ghost-letter {
  position: absolute;
  inset-inline-end: 14px;
  bottom: 8px;
  font-family: 'Tajawal', sans-serif;
  font-size: 60px;
  color: var(--paper-line);
  opacity: .35;
  pointer-events: none;
  line-height: 1;
}

.opponents {
  display: flex; flex-direction: column; gap: 12px;
}
.opp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--paper-line);
  border-radius: 12px;
}
.opp-row .progress-track {
  flex: 1;
  height: 6px;
  background: var(--paper-line);
  border-radius: 999px;
  overflow: hidden;
}
.opp-row .progress-fill {
  height: 100%;
  background: var(--mint);
  border-radius: 999px;
  transition: width .8s cubic-bezier(.4, 0, .2, 1);
}
.opp-row.done .progress-fill { background: var(--coral); }
.opp-row .pct { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--ink-soft); width: 32px; text-align: end; }
.opp-row .name { font-size: 14px; min-width: 56px; }

.finish-bar {
  position: sticky;
  bottom: 16px;
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

/* ---------- PENCILS DOWN ---------- */
.freeze-overlay {
  position: fixed; inset: 0;
  background: rgba(31, 42, 68, .82);
  backdrop-filter: blur(8px);
  z-index: 50;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 28px;
  color: #fff;
  animation: fadeIn .25s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.freeze-title {
  font-family: 'Tajawal', sans-serif;
  font-size: 38px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.freeze-title .who {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 28px;
  background: rgba(255,255,255,.10);
  padding: 12px 22px;
  border-radius: 999px;
}
.freeze-count {
  font-family: 'Tajawal', sans-serif;
  font-size: 220px;
  line-height: 1;
  color: var(--coral-soft);
  text-shadow: 0 8px 32px rgba(231,111,81,.5);
  animation: countPop .9s cubic-bezier(.2,.8,.2,1);
}
@keyframes countPop {
  0% { transform: scale(0.4); opacity: 0; }
  30% { transform: scale(1.15); opacity: 1; }
  60% { transform: scale(1); }
  100% { transform: scale(.95); opacity: .8; }
}
.freeze-sub {
  color: rgba(255,255,255,.7);
  font-size: 15px;
}

/* Non-blocking countdown banner (shown to non-finishers) */
.freeze-banner {
  position: fixed;
  top: 76px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px;
  background: rgba(31, 42, 68, .94);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(31,42,68,.35);
  z-index: 40;
  font-family: 'Tajawal', sans-serif;
  animation: bannerSlide .35s cubic-bezier(.2,.9,.3,1.2);
}
.freeze-banner .msg { font-size: 14px; }
.freeze-banner .msg strong { color: var(--coral-soft); }
.freeze-banner-count {
  font-family: 'Tajawal', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--coral-soft);
  min-width: 30px; text-align: center;
  animation: countPop .9s cubic-bezier(.2,.8,.2,1);
}
@keyframes bannerSlide {
  from { opacity: 0; transform: translate(-50%, -20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- WINNER SUSPENSE (build-up before spotlight) ---------- */
.winner-suspense {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, rgba(20,28,46,.97) 0%, rgba(10,14,24,.99) 75%);
  z-index: 65;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  animation: fadeIn .35s ease;
  overflow: hidden;
}
.suspense-stars {
  position: absolute; inset: 0;
  pointer-events: none;
}
.suspense-star {
  position: absolute;
  color: rgba(233,185,73,.55);
  text-shadow: 0 0 12px rgba(233,185,73,.45);
  animation: starTwinkle 1.6s ease-in-out infinite;
}
@keyframes starTwinkle {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.15); }
}
.suspense-card {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 38px 60px;
  color: #fff;
  text-align: center;
  animation: suspensePulse 1.4s ease-in-out infinite;
}
@keyframes suspensePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
.suspense-icon {
  font-size: 72px;
  filter: drop-shadow(0 4px 18px rgba(233,185,73,.55));
  animation: drumShake .18s ease-in-out infinite;
}
@keyframes drumShake {
  0%, 100% { transform: translateX(0) rotate(-3deg); }
  50% { transform: translateX(2px) rotate(3deg); }
}
.suspense-eyebrow {
  font-family: 'Reem Kufi', sans-serif;
  font-size: 14px;
  letter-spacing: 6px;
  color: var(--amber);
  text-transform: uppercase;
  opacity: .75;
}
.suspense-headline {
  font-family: 'Reem Kufi', sans-serif;
  font-size: 56px;
  font-weight: 700;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #fff 0%, var(--amber) 50%, #fff 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 2.4s linear infinite;
}
@keyframes shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.suspense-sub {
  font-family: 'Tajawal', sans-serif;
  font-size: 18px;
  color: rgba(255,255,255,.75);
}
.suspense-dots {
  display: flex; gap: 10px; margin-top: 4px;
}
.suspense-dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--amber);
  animation: dotBounce 1s ease-in-out infinite;
}
.suspense-dots span:nth-child(2) { animation-delay: .15s; }
.suspense-dots span:nth-child(3) { animation-delay: .30s; }
@keyframes dotBounce {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50% { transform: translateY(-8px); opacity: 1; }
}
.suspense-skip {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(255,255,255,.4);
  font-family: 'Tajawal', sans-serif;
}
@media (max-width: 720px) {
  .suspense-card { padding: 26px 30px; }
  .suspense-headline { font-size: 38px; }
  .suspense-icon { font-size: 56px; }
  .suspense-sub { font-size: 15px; }
}

/* ---------- WINNER SPOTLIGHT (final leaderboard intro) ---------- */
.winner-spotlight {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, rgba(38,70,103,.96) 0%, rgba(31,42,68,.98) 70%);
  z-index: 60;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  animation: fadeIn .35s ease;
  overflow: hidden;
}
.winner-card {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
  padding: 36px 56px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  backdrop-filter: blur(10px);
  color: #fff;
  text-align: center;
  animation: winnerPop .9s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes winnerPop {
  0% { transform: scale(.5) translateY(40px); opacity: 0; }
  60% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); }
}
.winner-trophy {
  font-size: 80px;
  filter: drop-shadow(0 4px 18px rgba(233,185,73,.6));
  animation: trophyBounce 1.4s ease-in-out infinite;
}
@keyframes trophyBounce {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-8px) rotate(4deg); }
}
.winner-label {
  font-family: 'Reem Kufi', sans-serif;
  font-size: 18px;
  letter-spacing: 4px;
  color: var(--amber);
  text-transform: uppercase;
}
.winner-avatar-wrap {
  margin: 6px 0;
  filter: drop-shadow(0 0 24px rgba(231,111,81,.5));
  animation: avatarGlow 2s ease-in-out infinite;
}
@keyframes avatarGlow {
  0%, 100% { filter: drop-shadow(0 0 24px rgba(231,111,81,.45)); }
  50% { filter: drop-shadow(0 0 36px rgba(233,185,73,.7)); }
}
.winner-name {
  font-family: 'Reem Kufi', sans-serif;
  font-size: 42px;
  font-weight: 700;
}
.winner-score {
  font-family: 'Tajawal', sans-serif;
  font-size: 22px;
  color: var(--coral-soft);
}
.winner-skip {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.5);
  font-family: 'Tajawal', sans-serif;
}
.confetti-layer {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: -20px;
  border-radius: 2px;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: .9; }
}

@media (max-width: 720px) {
  .winner-card { padding: 24px 28px; }
  .winner-name { font-size: 32px; }
  .winner-trophy { font-size: 64px; }
  .winner-score { font-size: 18px; }
  .freeze-banner { top: 60px; padding: 8px 14px; gap: 10px; }
  .freeze-banner .msg { font-size: 13px; }
  .freeze-banner-count { font-size: 22px; }
}

/* ---------- VOTING ---------- */
.vote-shell {
  display: flex; flex-direction: column; gap: 18px;
}
.vote-progress {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px;
  color: var(--ink-soft);
}
.vote-progress .seg {
  flex: 1;
  height: 6px;
  background: var(--paper-line);
  border-radius: 999px;
  overflow: hidden;
}
.vote-progress .seg-fill {
  height: 100%;
  background: var(--coral);
  border-radius: 999px;
  transition: width .4s cubic-bezier(.4, 0, .2, 1);
}
.vote-timer {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(42,157,143,.12);
  border: 1px solid var(--mint);
  border-radius: 999px;
  font-family: 'Tajawal', sans-serif;
  font-size: 14px;
  color: var(--ink);
}
.vote-timer.low {
  background: rgba(231,111,81,.15);
  border-color: var(--coral);
  color: var(--coral);
  animation: timerPulse .9s ease-in-out infinite;
}
@keyframes timerPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.vote-card-wrap {
  perspective: 1200px;
}
.vote-card {
  background: rgba(255,255,255,.85);
  border: 1.5px solid var(--paper-line);
  border-radius: 22px;
  padding: 28px;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 20px;
  animation: voteIn .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes voteIn {
  from { opacity: 0; transform: translateY(12px) rotateX(8deg); }
  to { opacity: 1; transform: translateY(0) rotateX(0); }
}
.vote-cat-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.vote-cat-head .cat-title {
  font-family: 'Tajawal', sans-serif;
  font-size: 28px;
}
.vote-cat-head .cat-title small {
  font-size: 14px; color: var(--ink-mute); margin-inline-start: 8px;
}
.vote-answers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 720px) { .vote-answers { grid-template-columns: 1fr; } }

.vote-answer {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--paper-2);
  border: 1.5px solid var(--paper-line);
}
.vote-answer .who {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-soft);
}
.vote-answer .word {
  font-family: 'Tajawal', sans-serif;
  font-size: 28px;
  color: var(--ink);
}
.vote-answer.empty .word { color: var(--ink-mute); font-style: italic; }
.vote-answer .vote-row {
  display: flex; gap: 8px; margin-top: 4px;
}
.vote-btn {
  flex: 1;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 14px;
  font-family: 'Tajawal', sans-serif;
  background: rgba(255,255,255,.7);
  border: 1.5px solid var(--paper-line);
  color: var(--ink-soft);
  transition: all .12s;
}
.vote-btn.up.active { background: var(--mint); color: #fff; border-color: var(--mint); }
.vote-btn.down.active { background: var(--rose); color: #fff; border-color: var(--rose); }
.vote-btn:hover { transform: translateY(-1px); }
.vote-tally {
  display: flex; gap: 8px; font-size: 12px; color: var(--ink-mute);
}
.vote-tally .pos { color: var(--mint); }
.vote-tally .neg { color: var(--rose); }
.vote-answer.dup-flag { box-shadow: inset 0 0 0 2px var(--amber); }
.vote-answer.dup-flag::after {
  content: "مكرر";
  font-size: 11px;
  background: var(--amber);
  color: var(--ink);
  padding: 2px 8px;
  border-radius: 999px;
  align-self: flex-start;
  font-family: 'Tajawal', sans-serif;
}
.vote-answer.judged-accept {
  background: rgba(42,157,143,.10);
  border-color: var(--mint);
}
.vote-answer.judged-accept .word { color: var(--mint); }
.vote-answer.judged-reject {
  background: rgba(194,78,78,.08);
  border-color: var(--rose);
}
.vote-answer.judged-reject .word {
  color: var(--rose);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(194,78,78,.7);
}

/* ---------- RESULTS / LEADERBOARD ---------- */
.score-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
}
.score-table th {
  font-family: 'Tajawal', sans-serif;
  font-weight: 500;
  color: var(--ink-mute);
  font-size: 13px;
  padding: 4px 10px;
  text-align: center;
}
.score-table th:first-child { text-align: start; }
.score-table td {
  background: rgba(255,255,255,.7);
  padding: 12px 10px;
  text-align: center;
  font-family: 'Tajawal', sans-serif;
  font-size: 18px;
  border-block: 1px solid var(--paper-line);
}
.score-table td:first-child {
  text-align: start;
  border-inline-start: 1px solid var(--paper-line);
  border-start-start-radius: 12px;
  border-end-start-radius: 12px;
}
.score-table td:last-child {
  border-inline-end: 1px solid var(--paper-line);
  border-start-end-radius: 12px;
  border-end-end-radius: 12px;
  font-family: 'Tajawal', sans-serif;
  font-size: 22px;
  background: rgba(31,42,68,.04);
}
.score-table td.score-10 { color: var(--mint); }
.score-table td.score-5 { color: var(--amber); background: rgba(233,185,73,.12); }
.score-table td.score-0 { color: var(--ink-mute); }
.score-table tr.you td { background: rgba(233,185,73,.18); }
.score-table tr.you td:last-child { background: rgba(233,185,73,.30); }

.player-cell {
  display: flex; align-items: center; gap: 10px;
}

/* ---------- ANALYTICS ---------- */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.stat-card {
  background: rgba(255,255,255,.7);
  border: 1px solid var(--paper-line);
  border-radius: 16px;
  padding: 16px;
}
.stat-card .label {
  font-size: 12px;
  color: var(--ink-mute);
  text-transform: none;
  letter-spacing: 0;
}
.stat-card .value {
  font-family: 'Tajawal', sans-serif;
  font-size: 28px;
  margin-top: 4px;
  color: var(--ink);
}
.stat-card .sub {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 4px;
}

.spark {
  display: flex; align-items: flex-end; gap: 4px;
  height: 48px; margin-top: 8px;
}
.spark .bar {
  flex: 1;
  background: var(--mint-soft);
  border-radius: 3px 3px 0 0;
  min-height: 4px;
  transition: height .6s cubic-bezier(.2,.8,.2,1);
}
.spark .bar.last { background: var(--coral); }

.cat-strength {
  display: flex; flex-direction: column; gap: 6px; margin-top: 10px;
}
.cat-strength .row {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
}
.cat-strength .row .name { width: 64px; color: var(--ink-soft); }
.cat-strength .row .track {
  flex: 1; height: 8px; background: var(--paper-line); border-radius: 999px; overflow: hidden;
}
.cat-strength .row .fill { height: 100%; background: var(--mint); border-radius: 999px; }
.cat-strength .row .num { font-family: 'IBM Plex Mono', monospace; font-size: 12px; width: 28px; text-align: end; color: var(--ink-soft); }

.podium {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  align-items: end;
  gap: 14px;
  margin: 12px 0 8px;
}
.podium .step {
  background: rgba(255,255,255,.8);
  border: 1.5px solid var(--paper-line);
  border-radius: 18px 18px 8px 8px;
  padding: 18px 10px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  position: relative;
  text-align: center;
}
.podium .step .rank {
  position: absolute; top: -16px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Tajawal', sans-serif;
}
.podium .step.gold { background: linear-gradient(180deg, rgba(233,185,73,.4), rgba(233,185,73,.15)); border-color: var(--amber); height: 200px; }
.podium .step.gold .rank { background: var(--amber); color: var(--ink); }
.podium .step.silver { height: 170px; }
.podium .step.bronze { background: linear-gradient(180deg, rgba(231,111,81,.25), rgba(231,111,81,.08)); border-color: var(--coral-soft); height: 150px; }
.podium .step.bronze .rank { background: var(--coral); color: #fff; }
.podium .step .who { font-family: 'Tajawal', sans-serif; font-size: 18px; }
.podium .step .pts { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: var(--ink-soft); }

.section-title {
  display: flex; align-items: baseline; gap: 12px;
  margin: 24px 0 12px;
}
.section-title h3 {
  font-size: 22px; margin: 0;
}
.section-title .meta { font-size: 13px; color: var(--ink-mute); }

.divider-dashed {
  height: 1px;
  background: repeating-linear-gradient(to right, var(--paper-line) 0 6px, transparent 6px 12px);
  margin: 18px 0;
}

/* utility */
.row { display: flex; align-items: center; gap: 12px; }
.col { display: flex; flex-direction: column; gap: 12px; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.muted { color: var(--ink-mute); }
.tabular { font-variant-numeric: tabular-nums; font-family: 'IBM Plex Mono', monospace; }

/* fade transitions between phases */
.phase-enter {
  animation: phaseIn .4s cubic-bezier(.2,.8,.2,1);
}
@keyframes phaseIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* phase pill */
.phase-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(31,42,68,.06);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-soft);
}
.phase-pill .step-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--paper-line);
}
.phase-pill .step-dot.on { background: var(--coral); }


/* ============================================================
   MOBILE RESPONSIVE
============================================================ */
@media (max-width: 720px) {
  .app-shell { padding: 12px 14px 80px; }

  .top-bar {
    gap: 10px;
    padding: 4px 2px 16px;
    flex-wrap: wrap;
  }
  .brand-mark { width: 38px; height: 38px; font-size: 22px; }
  .brand-name { font-size: 17px; }
  .brand-tag { font-size: 11px; }
  .top-meta { gap: 8px; font-size: 12px; flex-wrap: wrap; justify-content: flex-end; }
  .phase-pill { font-size: 11px; padding: 4px 8px; }
  .phase-pill .step-dot { width: 5px; height: 5px; }

  .surface { padding: 18px; border-radius: 18px; }
  .surface.tape::before { right: 18px; width: 70px; height: 22px; }

  h2 { font-size: 22px !important; }
  h3 { font-size: 17px !important; }

  .btn { padding: 12px 18px; font-size: 15px; border-radius: 12px; }
  .btn-big { padding: 16px 24px; font-size: 17px; border-radius: 14px; }

  .lobby-grid { grid-template-columns: 1fr; gap: 14px; }
  .invite-link { font-size: 12px; padding: 10px 12px; }

  /* Lobby player rows */
  .player-row { padding: 10px 12px; gap: 10px; }
  .player-row .name { font-size: 16px; }
  .avatar { width: 44px; height: 44px; font-size: 17px; }
  .avatar.sm { width: 32px; height: 32px; font-size: 13px; }
  .avatar.lg { width: 64px; height: 64px; font-size: 26px; }

  /* Letter scatter */
  .scatter-stage { height: 360px; }

  /* Play screen — single column, opponents on top */
  .play-shell { grid-template-columns: 1fr; gap: 14px; }
  .play-shell > div:nth-child(2) { order: -1; padding: 12px; }
  .opponents { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .opp-row { padding: 8px 10px; gap: 6px; }
  .opp-row .name { min-width: 0; font-size: 12px; }

  .letter-banner { padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
  .letter-banner .big { width: 56px; height: 56px; font-size: 40px; border-radius: 12px; }
  .letter-banner .label { font-size: 11px; }
  .letter-banner .ttl { font-size: 16px; }
  .letter-banner > div:last-child { display: none; }  /* hide secondary message */

  .cat-grid { grid-template-columns: 1fr; gap: 10px; }
  .cat-card { padding: 12px 14px; }
  .cat-card .cat-name { font-size: 16px; }
  .cat-card input { font-size: 19px; }
  .cat-card .ghost-letter { font-size: 44px; }

  .timer-pill { padding: 8px 14px; font-size: 16px; }

  .finish-bar { bottom: 8px; }

  /* Pencils-down freeze */
  .freeze-title { font-size: 24px; gap: 6px; padding: 0 16px; }
  .freeze-title .who { font-size: 18px; padding: 8px 14px; }
  .freeze-count { font-size: 140px; }
  .freeze-sub { font-size: 12px; padding: 0 16px; text-align: center; }

  /* Voting */
  .vote-cat-head .cat-title { font-size: 22px; }
  .vote-cat-head .cat-title small { display: block; margin-top: 2px; margin-inline-start: 0; }
  .vote-answers { grid-template-columns: 1fr; gap: 10px; }
  .vote-answer { padding: 12px 14px; }
  .vote-answer .word { font-size: 22px; }
  .vote-btn { font-size: 13px; padding: 8px 6px; }
  .vote-card { padding: 18px; border-radius: 16px; }

  /* Round results — turn the wide table into stacked cards */
  .score-table { display: block; }
  .score-table thead { display: none; }
  .score-table tbody, .score-table tr { display: block; }
  .score-table tr {
    background: rgba(255,255,255,.7);
    border: 1px solid var(--paper-line);
    border-radius: 14px;
    margin-bottom: 10px;
    padding: 10px 12px;
  }
  .score-table tr.you { background: rgba(233,185,73,.18); }
  .score-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 6px 0 !important;
    font-size: 15px !important;
    text-align: start !important;
    border-block: none !important;
  }
  .score-table td:first-child { padding-bottom: 8px !important; border-bottom: 1px dashed var(--paper-line) !important; margin-bottom: 4px; }
  .score-table td:not(:first-child)::before {
    content: attr(data-label);
    color: var(--ink-mute);
    font-size: 13px;
    font-family: 'Tajawal', sans-serif;
    font-weight: 400;
  }
  .score-table td:last-child {
    margin-top: 6px;
    padding-top: 8px !important;
    border-top: 1px dashed var(--paper-line) !important;
    font-size: 18px !important;
  }
  .score-table td:last-child::before { content: "المجموع"; }
  .score-table td > div { flex-direction: row !important; gap: 8px !important; }

  /* Podium */
  .podium { gap: 8px; }
  .podium .step { padding: 14px 6px 12px; }
  .podium .step.gold { height: 170px; }
  .podium .step.silver { height: 145px; }
  .podium .step.bronze { height: 130px; }
  .podium .step .who { font-size: 14px; }
  .podium .step .pts { font-size: 12px; }

  /* Analytics */
  .analytics-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 12px; }
  .stat-card .value { font-size: 20px; }
  .stat-card .sub { font-size: 11px; }
  .stat-card .label { font-size: 11px; }

  /* paper texture: thinner lines on small screens */
  body::before {
    background-image:
      repeating-linear-gradient(to bottom, transparent 0, transparent 27px, rgba(217,207,183,.30) 27px, rgba(217,207,183,.30) 28px);
  }
}

@media (max-width: 420px) {
  .opponents { grid-template-columns: 1fr; }
  .analytics-grid { grid-template-columns: 1fr; }
  .freeze-count { font-size: 110px; }
  .vote-answer .word { font-size: 19px; }
  .top-meta .phase-pill { display: none; }
}

/* Touch hit-targets */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 44px; }
  .vote-btn { min-height: 40px; }
  .cat-card input { padding: 10px 2px; font-size: 20px; }
}