/* ═══════════ حروف وخروف ═══════════ */
:root {
  --navy-0: #0a1128;
  --navy-1: #121a36;
  --navy-2: #1c2749;
  --gold: #f2b134;
  --gold-soft: #ffd57a;
  --gold-deep: #c98a12;
  --cream: #fdf6e3;
  --ok: #34d399;
  --bad: #f87171;
  --radius: 18px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  font-family: "Tajawal", system-ui, sans-serif;
  background: radial-gradient(ellipse at 50% -20%, var(--navy-2), var(--navy-0) 70%);
  color: var(--cream);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.screen { display: none; flex: 1; position: relative; padding: 16px; }
.screen.active { display: flex; flex-direction: column; }

/* نجوم الخلفية */
.stars { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.stars::before, .stars::after {
  content: "✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦";
  position: absolute; inset: 0;
  color: rgba(242, 177, 52, 0.12);
  font-size: 22px; letter-spacing: 48px; line-height: 120px;
  white-space: pre-wrap;
}
.stars::after { transform: translate(60px, 60px) scale(1.4); opacity: 0.5; }

/* ═══════════ البداية ═══════════ */
.start-inner {
  margin: auto; width: min(560px, 100%);
  display: flex; flex-direction: column; align-items: center;
  text-align: center; position: relative; z-index: 1;
}

.hero-sheep {
  width: min(280px, 62vw); aspect-ratio: 1 / 1; max-width: 100%;
  border-radius: 50%;
  border: 4px solid var(--gold);
  box-shadow: 0 0 60px rgba(242, 177, 52, 0.35), 0 18px 50px rgba(0,0,0,0.5);
  object-fit: cover;
  animation: bob 3.2s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-1.5deg);} 50% { transform: translateY(-10px) rotate(1.5deg);} }

.logo { margin-top: 18px; font-size: clamp(42px, 9vw, 68px); font-weight: 900; line-height: 1.1; }
.logo-huroof { color: var(--cream); text-shadow: 0 4px 0 rgba(0,0,0,0.35); }
.logo-w { color: var(--gold-soft); }
.logo-kharoof {
  color: var(--gold);
  text-shadow: 0 0 24px rgba(242,177,52,0.55), 0 4px 0 var(--gold-deep);
}
.tagline { margin-top: 6px; font-size: clamp(15px, 3.6vw, 19px); color: #b9c3e0; font-weight: 500; }

.setup-card {
  margin-top: 24px; width: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(242,177,52,0.25);
  border-radius: var(--radius);
  padding: 20px;
  backdrop-filter: blur(6px);
}

.teams-setup { display: flex; align-items: center; gap: 10px; }
.team-input-box {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: var(--navy-1); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px; padding: 10px 12px;
}
.team-input-box:focus-within { border-color: var(--gold); }
.team-icon { font-size: 22px; }
.team-input-box input {
  width: 100%; background: none; border: none; outline: none;
  color: var(--cream); font-family: inherit; font-size: 16px; font-weight: 700; text-align: center;
}
.vs-badge {
  background: var(--gold); color: var(--navy-0);
  font-weight: 900; font-size: 14px;
  padding: 6px 10px; border-radius: 999px; flex-shrink: 0;
}

.settings-row { display: flex; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.setting { flex: 1; min-width: 200px; }
.setting label { display: block; font-size: 14px; color: #b9c3e0; margin-bottom: 6px; font-weight: 500; }
.seg { display: flex; gap: 6px; }
.seg button {
  flex: 1; padding: 9px 4px; border-radius: 10px;
  background: var(--navy-1); color: var(--cream);
  border: 1px solid rgba(255,255,255,0.14);
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: all 0.15s;
}
.seg button.on {
  background: var(--gold); color: var(--navy-0); border-color: var(--gold);
  box-shadow: 0 0 14px rgba(242,177,52,0.4);
}

.btn-big {
  margin-top: 22px; width: 100%;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold) 55%, var(--gold-deep));
  color: var(--navy-0);
  border: none; border-radius: 14px;
  padding: 16px; font-family: inherit; font-size: 22px; font-weight: 900;
  cursor: pointer;
  box-shadow: 0 6px 0 var(--gold-deep), 0 14px 30px rgba(242,177,52,0.35);
  transition: transform 0.1s, box-shadow 0.1s;
}
.btn-big:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--gold-deep); }
.hint { margin-top: 12px; font-size: 13px; color: #8b96b8; }

/* ═══════════ اللعب ═══════════ */
.scoreboard {
  position: relative; z-index: 2;
  display: flex; gap: 10px; align-items: stretch;
  width: min(760px, 100%); margin: 0 auto;
}
.team-card {
  flex: 1; position: relative;
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: var(--radius);
  padding: 22px 12px 10px;
  text-align: center;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.team-card.turn {
  border-color: var(--gold);
  box-shadow: 0 0 22px rgba(242,177,52,0.35);
}
.turn-flag {
  position: absolute; top: -12px; right: 50%; transform: translateX(50%);
  background: var(--gold); color: var(--navy-0);
  font-size: 12px; font-weight: 900; padding: 3px 10px; border-radius: 999px;
  opacity: 0; transition: opacity 0.25s;
}
.team-card.turn .turn-flag { opacity: 1; }
.team-line { display: flex; align-items: center; justify-content: center; gap: 6px; }
.t-icon { font-size: 18px; }
.t-name { font-weight: 900; font-size: clamp(14px, 3vw, 18px); }
.flock { margin-top: 6px; font-size: clamp(14px, 3vw, 19px); letter-spacing: 2px; min-height: 24px; }
.flock .got { filter: drop-shadow(0 0 6px rgba(242,177,52,0.8)); }
.flock .miss { opacity: 0.18; }
.flock .count { font-size: 13px; color: var(--gold-soft); font-weight: 900; margin-inline-start: 6px; }

.mid-col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 2px; }
.mini-logo { font-size: 12px; font-weight: 900; color: var(--gold); white-space: nowrap; }
.btn-icon {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: var(--cream); border-radius: 10px; font-size: 16px;
  width: 38px; height: 34px; cursor: pointer;
}

.turn-callout { font-size: clamp(17px, 4vw, 22px); color: #b9c3e0; margin-bottom: 14px; }
.turn-callout b { color: var(--gold-soft); }

/* السؤال */
.question-stage { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; padding: 12px 0; }
.q-sheep {
  position: absolute; top: -46px; left: 18px;
  width: 84px; height: 84px; border-radius: 50%;
  border: 3px solid var(--gold); object-fit: cover;
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
  animation: bob 3s ease-in-out infinite;
}
.q-card {
  position: relative;
  width: min(620px, 100%);
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  border: 1px solid rgba(242,177,52,0.3);
  border-radius: 22px;
  padding: 22px;
  animation: pop-in 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes pop-in { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.q-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.big-letter {
  width: 84px; height: 84px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 46px; font-weight: 900; color: var(--navy-0);
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  border-radius: 20px;
  box-shadow: 0 0 26px rgba(242,177,52,0.5);
}
.q-meta { display: flex; align-items: center; gap: 14px; }
.cat-chip {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 700;
}
.timer { position: relative; width: 62px; height: 62px; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tr-bg { fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 6; }
.tr-fg {
  fill: none; stroke: var(--gold); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 163.4; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
}
.timer.urgent .tr-fg { stroke: var(--bad); }
.timer.urgent #timer-num { color: var(--bad); animation: pulse 0.5s infinite alternate; }
@keyframes pulse { to { transform: translate(50%, -50%) scale(1.25); } }
#timer-num {
  position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%);
  font-size: 20px; font-weight: 900;
}

.q-text { margin-top: 18px; font-size: clamp(20px, 5vw, 28px); font-weight: 700; line-height: 1.5; }
.q-for { margin-top: 8px; font-size: 15px; color: var(--gold-soft); }

.answer-reveal {
  margin-top: 14px; padding: 12px 16px;
  background: rgba(52, 211, 153, 0.12);
  border: 1px dashed var(--ok);
  border-radius: 12px; font-size: 20px;
  animation: pop-in 0.3s;
}
.ar-label { color: #9adbc4; font-size: 15px; }
.answer-reveal b { color: var(--ok); }

.host-controls { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.steal-banner {
  width: 100%; text-align: center; font-weight: 900; font-size: 17px;
  color: var(--gold-soft); animation: pop-in 0.3s;
}
.btn-ans {
  flex: 1; min-width: 150px;
  border: none; border-radius: 12px; padding: 14px;
  font-family: inherit; font-size: 17px; font-weight: 900; cursor: pointer;
  color: var(--navy-0);
  transition: transform 0.1s;
}
.btn-ans:active { transform: scale(0.96); }
.btn-ans.ok { background: linear-gradient(180deg, #6ee7b7, var(--ok)); box-shadow: 0 4px 0 #0e9f6e; }
.btn-ans.bad { background: linear-gradient(180deg, #fca5a5, var(--bad)); box-shadow: 0 4px 0 #dc2626; }
.btn-ans.neutral { background: linear-gradient(180deg, #cbd5e1, #94a3b8); box-shadow: 0 4px 0 #64748b; }
.btn-ans.next { background: linear-gradient(180deg, var(--gold-soft), var(--gold)); box-shadow: 0 4px 0 var(--gold-deep); }
.pill { background: rgba(0,0,0,0.18); border-radius: 999px; padding: 2px 8px; font-size: 13px; }

/* ═══════════ الفوز ═══════════ */
.win-inner {
  margin: auto; text-align: center; position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  width: min(520px, 100%);
}
.win-sheep {
  width: min(300px, 66vw); aspect-ratio: 1; border-radius: 50%;
  border: 5px solid var(--gold); object-fit: cover;
  box-shadow: 0 0 80px rgba(242,177,52,0.45);
  animation: bob 2.4s ease-in-out infinite;
}
.win-title { margin-top: 18px; font-size: clamp(28px, 7vw, 44px); font-weight: 900; color: var(--gold); }
.win-team { font-size: clamp(24px, 6vw, 36px); font-weight: 900; margin-top: 4px; }
.win-sub { color: #b9c3e0; margin-top: 6px; font-size: 17px; }
.win-actions { display: flex; gap: 12px; margin-top: 22px; width: 100%; }
.win-actions .btn-big { margin-top: 0; flex: 2; }
.btn-ghost {
  flex: 1; background: none; border: 2px solid rgba(255,255,255,0.3);
  color: var(--cream); border-radius: 14px; font-family: inherit;
  font-size: 17px; font-weight: 700; cursor: pointer;
}

/* خرفان تتساقط */
.sheep-drop {
  position: fixed; top: -60px; z-index: 50; font-size: 34px;
  animation: drop linear forwards; pointer-events: none;
}
@keyframes drop { to { transform: translateY(115dvh) rotate(360deg); } }

/* خروف يطير للنتيجة */
.sheep-fly {
  position: fixed; z-index: 60; font-size: 44px; pointer-events: none;
  transition: all 0.9s cubic-bezier(0.3, -0.2, 0.3, 1);
  filter: drop-shadow(0 0 10px rgba(242,177,52,0.9));
}

/* ═══════════ خلية الحروف ═══════════ */
:root {
  --t0: #4fa3ff; --t0-deep: #1d5fd6;   /* الفريق الأزرق 🔷 */
  --t1: #ff9838; --t1-deep: #d95f0e;   /* الفريق البرتقالي 🔶 */
}

.board-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 1; padding: 8px 0; }
.board-stage::before {
  content: ""; position: absolute; inset: 10% 0;
  background: radial-gradient(ellipse at center, rgba(242,177,52,0.09), transparent 65%);
  pointer-events: none;
}
.board-frame { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
.board-mid { display: flex; align-items: center; gap: 12px; }
.edge { font-weight: 900; font-size: clamp(15px, 2.2vw, 22px); text-align: center; line-height: 1.3; }
.edge-top { color: var(--t1); }
.edge-side { color: var(--t0); }

/* السداسيات — أكبر وبإحساس بطاقات الاستوديو اللامعة */
.hexboard { display: flex; flex-direction: column; --hex: min(14.5vw, 10.5dvh, 108px); filter: drop-shadow(0 10px 30px rgba(0,0,0,0.45)); }
.hrow { display: flex; gap: 5px; }
.hrow.odd { margin-right: calc(var(--hex) / 2 + 2.5px); }
.hrow + .hrow { margin-top: calc(var(--hex) * -0.24); }
.hex {
  width: var(--hex); height: calc(var(--hex) * 1.1547);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(180deg, #31417a 0%, #1f2a52 45%, #182142 100%);
  border: none; color: var(--cream);
  font-family: inherit; font-size: calc(var(--hex) * 0.42); font-weight: 900;
  cursor: pointer; position: relative;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.1s, filter 0.2s;
  padding: 0;
}
/* لمعة زجاجية علوية مثل بطاقات التلفزيون */
.hex::before {
  content: ""; position: absolute; inset: 0 0 55% 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.02));
  clip-path: polygon(50% 0, 100% 45%, 0 45%);
  pointer-events: none;
}
.hx-letter { position: relative; z-index: 1; text-shadow: 0 2px 6px rgba(0,0,0,0.55); }
.hex:hover { background: linear-gradient(180deg, #3d4f92 0%, #27346a 45%, #1d2854 100%); }
.hex:active { transform: scale(0.94); }
.hex.picked { background: linear-gradient(180deg, var(--gold-soft), var(--gold)); color: var(--navy-0); }
.hex.picked .hx-letter { text-shadow: none; }
.hex.own-0 { background: linear-gradient(180deg, var(--t0) 0%, var(--t0-deep) 100%); color: #f2f8ff; cursor: default; }
.hex.own-1 { background: linear-gradient(180deg, var(--t1) 0%, var(--t1-deep) 100%); color: #fff6ec; cursor: default; }
.hex .stamp { position: absolute; bottom: 6%; font-size: calc(var(--hex) * 0.2); z-index: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.hex .hx-star { position: absolute; top: 7%; font-size: calc(var(--hex) * 0.22); z-index: 1; filter: drop-shadow(0 0 6px rgba(255,215,0,0.9)); }
.hex.dead { background: #1a2038; color: #454f73; cursor: default; }
.hex.win-path { animation: hexglow 0.6s infinite alternate; }
@keyframes hexglow { to { filter: brightness(1.6) saturate(1.3); } }

/* ظهور المطالبة */
.hex.just-claimed { animation: claimpop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes claimpop { 0% { transform: scale(0.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* الحرف الذهبي */
.hex.is-golden {
  background: linear-gradient(180deg, #ffe98a 0%, #ffcf3e 45%, #e9a417 100%);
  color: var(--navy-0);
  animation: goldpulse 1s infinite alternate;
}
.hex.is-golden .hx-letter { text-shadow: 0 1px 0 rgba(255,255,255,0.6); }
.hex.is-golden.own-0 { background: linear-gradient(180deg, var(--t0) 0%, var(--t0-deep) 100%); color: #f2f8ff; animation: none; }
.hex.is-golden.own-1 { background: linear-gradient(180deg, var(--t1) 0%, var(--t1-deep) 100%); color: #fff6ec; animation: none; }
@keyframes goldpulse { from { filter: brightness(1); } to { filter: brightness(1.45) drop-shadow(0 0 14px rgba(255,215,0,0.8)); } }

.golden-overlay {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(242,177,52,0.28), rgba(10,17,40,0.92) 70%);
  animation: pop-in 0.3s;
}
.go-inner { text-align: center; animation: gozoom 2s ease-out; }
.go-star { font-size: 90px; animation: gospin 2s ease-in-out; }
.go-title {
  font-size: clamp(38px, 9vw, 72px); font-weight: 900;
  background: linear-gradient(180deg, #fff3c4, #ffd700 45%, #e9a417);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px rgba(255, 215, 0, 0.55));
}
.go-sub { color: var(--cream); font-size: clamp(16px, 4vw, 24px); font-weight: 700; margin-top: 8px; }
@keyframes gozoom { 0% { transform: scale(0.4); opacity: 0; } 25% { transform: scale(1.08); opacity: 1; } 35% { transform: scale(1); } }
@keyframes gospin { 0% { transform: rotate(-360deg) scale(0); } 50% { transform: rotate(0) scale(1.3); } 70% { transform: scale(1); } }

/* بطاقة سؤال الحرف الذهبي */
.q-card.golden { border-color: #ffd700; box-shadow: 0 0 40px rgba(255, 215, 0, 0.25); }
.q-card.golden .big-letter { background: linear-gradient(180deg, #fff3c4, #ffd700 55%, #e9a417); box-shadow: 0 0 30px rgba(255,215,0,0.6); }

/* عداد السداسيات في لوحة النتائج */
.hexcount { font-weight: 900; font-size: 19px; color: var(--gold-soft); margin-inline-end: 8px; }
.dir { font-size: 12px; color: #8b96b8; font-weight: 700; }

/* زر كشف الجواب للمقدم */
.btn-peek {
  margin-top: 14px; width: 100%;
  background: none; border: 1px dashed rgba(242, 177, 52, 0.55);
  color: var(--gold-soft); border-radius: 12px;
  padding: 10px; font-family: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: background 0.15s;
}
.btn-peek:active { background: rgba(242, 177, 52, 0.12); }

/* جواب المقدم */
.host-answer {
  margin-top: 14px; padding: 10px 14px;
  background: rgba(242, 177, 52, 0.08);
  border: 1px dashed rgba(242, 177, 52, 0.55);
  border-radius: 12px; font-size: 18px;
}
.ha-label { color: #b9c3e0; font-size: 14px; }
.host-answer b { color: var(--gold-soft); }

.resolution-note { width: 100%; text-align: center; color: #b9c3e0; font-size: 15px; margin-bottom: 4px; }

.sudden-banner {
  position: fixed; top: 8px; right: 50%; transform: translateX(50%);
  z-index: 40;
  background: linear-gradient(180deg, #fca5a5, var(--bad));
  color: var(--navy-0); font-weight: 900; font-size: 15px;
  padding: 8px 18px; border-radius: 999px;
  box-shadow: 0 6px 20px rgba(248, 113, 113, 0.4);
  animation: pop-in 0.4s;
}

/* الخرفان المسطحة (SVG) بدل الصور */
.hero-sheep, .win-sheep {
  border: none; border-radius: 0; box-shadow: none; object-fit: contain;
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 40px rgba(242, 177, 52, 0.18));
}
.q-sheep { border: none; border-radius: 0; box-shadow: none; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5)); }

/* ═══════════ شاشة QR (وضع الجرس) ═══════════ */
.qr-inner {
  margin: auto; width: min(560px, 100%);
  display: flex; flex-direction: column; align-items: center;
  position: relative; z-index: 1; text-align: center; gap: 10px;
}
.qr-sub { color: #b9c3e0; font-size: 16px; font-weight: 500; }
.qr-box {
  background: #fff; border-radius: 18px; padding: 10px;
  border: 4px solid var(--gold);
  box-shadow: 0 0 40px rgba(242, 177, 52, 0.3);
  min-width: 180px; min-height: 100px;
  display: flex; align-items: center; justify-content: center;
}
.qr-box svg { display: block; width: min(52vw, 260px); height: auto; }
.qr-fallback { color: #0a1128; font-size: 13px; font-weight: 700; word-break: break-all; padding: 8px; }
.qr-code-text { font-size: 18px; color: #b9c3e0; }
.qr-code-text b { color: var(--gold-soft); font-size: 26px; letter-spacing: 6px; }
.presence-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.presence-chip {
  padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 900;
  background: rgba(255,255,255,0.06); border: 2px dashed rgba(255,255,255,0.25); color: #8b96b8;
}
.presence-chip.t0.ready { border: 2px solid var(--t0); color: #cfe6ff; background: rgba(79,163,255,0.15); }
.presence-chip.t1.ready { border: 2px solid var(--t1); color: #ffe4c7; background: rgba(255,152,56,0.15); }
.qr-inner .btn-big { width: 100%; }

/* انتظار الجرس + فرق التوقيت */
.buzz-wait {
  margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px; border-radius: 14px;
  background: rgba(242, 177, 52, 0.08);
  border: 1px dashed rgba(242, 177, 52, 0.5);
  font-size: 18px; font-weight: 900; color: var(--gold-soft);
}
.buzz-bell { font-size: 34px; display: inline-block; animation: bellring 1s infinite; }
@keyframes bellring { 0%, 60%, 100% { transform: rotate(0); } 10% { transform: rotate(-18deg); } 30% { transform: rotate(14deg); } 45% { transform: rotate(-8deg); } }
.buzz-delta {
  margin-top: 12px; text-align: center;
  font-size: 18px; font-weight: 900; color: var(--gold-soft);
  animation: pop-in 0.3s;
}

/* ═══════════ شاشة اختيار الفئات ═══════════ */
.cats-inner {
  margin: auto; width: min(760px, 100%);
  display: flex; flex-direction: column; align-items: center;
  position: relative; z-index: 1; text-align: center;
}
.cats-team-badge {
  font-size: 18px; font-weight: 900; color: #fff;
  padding: 8px 22px; border-radius: 999px;
  background: var(--navy-2); border: 1px solid rgba(255,255,255,0.2);
}
.cats-team-badge.t0 { background: linear-gradient(180deg, var(--t0), var(--t0-deep)); border-color: var(--t0); }
.cats-team-badge.t1 { background: linear-gradient(180deg, var(--t1), var(--t1-deep)); border-color: var(--t1); }
.cats-title { margin-top: 12px; font-size: clamp(22px, 5.5vw, 32px); font-weight: 900; }
.cats-title b { color: var(--gold); }
.cats-counter { margin-top: 4px; font-size: 17px; font-weight: 900; color: var(--gold-soft); }

.cats-grid {
  margin-top: 18px; width: 100%;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.cat-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  aspect-ratio: 1 / 0.82;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border: 2px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  color: var(--cream); font-family: inherit; cursor: pointer;
  transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s;
  padding: 8px;
}
.cat-card:active { transform: scale(0.95); }
.cc-icon { font-size: clamp(34px, 9vw, 52px); line-height: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4)); }
.cc-name { font-size: clamp(12.5px, 3vw, 16px); font-weight: 900; }
.cc-check {
  position: absolute; top: 8px; left: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: #fff;
}
.cat-card.sel { transform: scale(1.03); }
.cat-card.sel .cc-check { display: flex; }
.cat-card.t0.sel { border-color: var(--t0); box-shadow: 0 0 18px rgba(79, 163, 255, 0.4); }
.cat-card.t0.sel .cc-check { background: var(--t0-deep); }
.cat-card.t1.sel { border-color: var(--t1); box-shadow: 0 0 18px rgba(255, 152, 56, 0.4); }
.cat-card.t1.sel .cc-check { background: var(--t1-deep); }
.cat-card.shake { animation: shake 0.35s; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.cats-actions { display: flex; gap: 12px; margin-top: 20px; width: 100%; }
.cats-actions .btn-big { margin-top: 0; flex: 2; }
.cats-actions .btn-big:disabled { filter: grayscale(0.75) brightness(0.7); cursor: default; box-shadow: none; }
.cats-actions .btn-ghost { flex: 1; padding: 12px; }

@media (min-width: 700px) {
  .cats-grid { grid-template-columns: repeat(4, 1fr); }
}

/* شريط لون الفريق أسفل بطاقته */
.team-card::after {
  content: ""; position: absolute; bottom: 0; right: 12%; left: 12%; height: 4px;
  border-radius: 4px 4px 0 0;
}
.team-card.t0::after { background: var(--t0); }
.team-card.t1::after { background: var(--t1); }

/* شاشات كبيرة — إحساس الاستوديو */
@media (min-width: 1000px) {
  .scoreboard { width: min(1100px, 96%); }
  .t-name { font-size: 22px; }
  .hexcount { font-size: 26px; }
  .dir { font-size: 15px; }
  .mini-logo { font-size: 15px; }
  .btn-icon { width: 46px; height: 42px; font-size: 20px; }
  .hexboard { --hex: min(9vw, 13.5dvh, 132px); }
  .turn-callout { font-size: 26px; }
  .q-card { width: min(800px, 94%); padding: 30px; }
  .q-text { font-size: 34px; }
  .big-letter { width: 104px; height: 104px; font-size: 58px; }
  .q-sheep { width: 104px; height: 104px; top: -56px; }
}

.site-footer {
  text-align: center; font-size: 12px; color: #6b7694;
  padding: 10px 16px 14px; position: relative; z-index: 1;
}

@media (max-width: 560px) {
  .teams-setup { flex-direction: column; }
  .vs-badge { align-self: center; }
  .team-input-box { width: 100%; }
  .q-top { flex-wrap: wrap; }
}