@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700;900&family=Cairo:wght@400;700;900&display=swap');

:root {
  /* ── Islamic Tile Palette ─────────────────────── */
  --bg:         #061824;
  --surface:    #0c2333;
  --surface2:   #102d42;
  --border:     #1e4a68;
  --border-hi:  #2a6080;

  --text:       #e6dcc8;
  --text-dim:   #6a8fa6;

  /* Team colours — kept vibrant for game clarity */
  --green:      #00e5c4;
  --green-dk:   #00897b;
  --green-glow: rgba(0,229,196,0.18);

  --red:        #ff5c5c;
  --red-dk:     #c62828;
  --red-glow:   rgba(255,92,92,0.18);

  /* UI accent colours — Islamic teal + gold */
  --teal:       #00acc1;
  --teal-dk:    #00838f;
  --teal-glow:  rgba(0,172,193,0.20);

  --gold:       #c9a84c;
  --gold-lt:    #e8c97a;
  --gold-glow:  rgba(201,168,76,0.22);

  --accent:     #0097a7;
  --accent2:    #006064;

  --cream:      #f3ead8;
  --cream-border: #c9a84c;
}

* { margin:0; padding:0; box-sizing:border-box; }

html, body {
  font-family: 'Cairo','Tajawal',sans-serif;
  background: var(--bg);
  color: var(--text);
  direction: rtl;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Background: deep navy + subtle Islamic star grid ── */
body::before {
  content:'';
  position:fixed; inset:0;
  background:
    radial-gradient(ellipse 65% 55% at 10% 15%, #061f38 0%, transparent 60%),
    radial-gradient(ellipse 55% 60% at 90% 85%, #071e30 0%, transparent 60%);
  pointer-events:none; z-index:0;
}

/* Subtle geometric trellis pattern */
body::after {
  content:'';
  position:fixed; inset:0; pointer-events:none; z-index:0;
  opacity:0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%2300acc1' stroke-width='0.8'%3E%3Cpolygon points='40,4 76,22 76,58 40,76 4,58 4,22'/%3E%3Cpolygon points='40,16 64,28 64,52 40,64 16,52 16,28'/%3E%3Cline x1='40' y1='4' x2='40' y2='16'/%3E%3Cline x1='76' y1='22' x2='64' y2='28'/%3E%3Cline x1='76' y1='58' x2='64' y2='52'/%3E%3Cline x1='40' y1='76' x2='40' y2='64'/%3E%3Cline x1='4' y1='58' x2='16' y2='52'/%3E%3Cline x1='4' y1='22' x2='16' y2='28'/%3E%3C/g%3E%3Cg fill='none' stroke='%23c9a84c' stroke-width='0.4' opacity='0.6'%3E%3Cpolygon points='40,22 58,31 58,49 40,58 22,49 22,31'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
}

/* ── Header ──────────────────────────────────────────── */
.header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 24px;
  background:rgba(6,24,36,0.92);
  border-bottom:1px solid var(--border);
  position:relative; z-index:10;
  backdrop-filter:blur(12px);
}

/* Gold top-border accent strip */
.header::after {
  content:'';
  position:absolute; bottom:-1px; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), var(--teal), var(--gold), transparent);
  opacity:0.5;
}

.logo {
  font-size:1.3rem; font-weight:900;
  background:linear-gradient(135deg,var(--teal),var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

/* ── Honeycomb Grid ───────────────────────────────────── */
.honeycomb-wrapper {
  display:flex; flex-direction:column; align-items:center;
  padding:24px 16px;
  position:relative; z-index:1;
  user-select:none;
}

.hc-board {
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  gap:0;
}

.hc-row {
  display:flex;
  flex-direction:row;
  justify-content:center;
  margin-bottom:-18px;
}

.hex {
  width: 88px;
  height: 100px;
  clip-path: polygon(50% 0%,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%);
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; font-weight:900;
  font-family:'Cairo',sans-serif;
  cursor:pointer;
  transition:transform 0.2s ease, filter 0.2s ease;
  position:relative;
  margin:0 3px;
  background:var(--cream);
  color:#2a1800;
  flex-shrink:0;
}

.hex::before {
  content:'';
  position:absolute; inset:0;
  clip-path:inherit;
  background:linear-gradient(145deg,rgba(255,255,255,0.45) 0%,transparent 55%);
  pointer-events:none;
}

.hex:hover:not(.owned):not(.active) {
  transform:scale(1.09) translateY(-3px);
  filter:brightness(1.08);
  z-index:5;
}

/* Active cell — teal-gold glow, no animation */
.hex.active {
  background: linear-gradient(145deg, #e8c97a, #c9a84c);
  color:#1a0d00;
  transform:scale(1.07);
  z-index:5;
  box-shadow:0 0 0 3px rgba(201,168,76,0.5), 0 6px 24px rgba(201,168,76,0.3);
}

.hex.owned-green {
  background: linear-gradient(145deg, #00e5c4, #00897b);
  color:#001a14;
  cursor:default;
  box-shadow:0 2px 12px rgba(0,229,196,0.3);
}

.hex.owned-red {
  background: linear-gradient(145deg, #ff5c5c, #c62828);
  color:#fff;
  cursor:default;
  box-shadow:0 2px 12px rgba(255,92,92,0.3);
}

.edge-green { color:var(--green); }
.edge-red   { color:var(--red); }

.board-with-sides {
  display:flex; align-items:center; gap:12px;
}

.side-edge {
  display:flex; flex-direction:column; justify-content:center;
  align-items:center; gap:4px;
  min-width:48px;
}

.side-edge span {
  display:block; width:8px; height:8px; border-radius:50%;
}

.side-label {
  font-size:0.75rem; font-weight:700; letter-spacing:0.1em;
  writing-mode:vertical-rl; text-orientation:mixed;
  padding:8px 6px;
  border-radius:8px;
}

.side-label.red-side {
  color:var(--red);
  background:var(--red-glow);
  border:1px solid rgba(255,92,92,0.3);
}

.side-label.green-side {
  color:var(--green);
  background:var(--green-glow);
  border:1px solid rgba(0,229,196,0.3);
}

/* ── Question Panel ───────────────────────────────────── */
.q-panel {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  padding:24px 28px;
  position:relative; overflow:hidden;
}

/* Static gold-teal top bar — no animation */
.q-panel::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--teal-dk), var(--gold), var(--teal), var(--gold-lt));
}

.active-letter-circle {
  width:60px; height:60px; border-radius:50%;
  background:linear-gradient(135deg, var(--teal-dk), var(--accent2));
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; font-weight:900;
  box-shadow:0 0 24px var(--teal-glow);
  flex-shrink:0;
}

/* ── Buzz ─────────────────────────────────────────────── */
.buzz-box {
  border-radius:16px; padding:16px 20px;
  border:2px solid var(--border);
  background:var(--surface2);
  text-align:center; transition:border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.buzz-box.green { background:var(--green-glow); border-color:var(--green); box-shadow:0 0 24px var(--green-glow); }
.buzz-box.red   { background:var(--red-glow);   border-color:var(--red);   box-shadow:0 0 24px var(--red-glow); }

/* ── Timer ────────────────────────────────────────────── */
.timer-ring { position:relative; flex-shrink:0; }
.timer-ring svg { transform:rotate(-90deg); }
.timer-ring .bg-c { fill:none; stroke:var(--surface2); stroke-width:6; }
.timer-ring .prog-c { fill:none; stroke-width:6; stroke-linecap:round; stroke-dasharray:220; transition:stroke-dashoffset 0.5s linear, stroke 0.3s; }
.timer-num { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1.3rem; font-weight:900; color:var(--gold); }

/* ── Buttons ──────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px; border:none; border-radius:12px;
  font-family:'Cairo',sans-serif; font-size:0.95rem; font-weight:700;
  cursor:pointer; transition:all 0.18s; position:relative; overflow:hidden; white-space:nowrap;
}
.btn:active { transform:scale(0.95); }
.btn:disabled { opacity:0.35; cursor:not-allowed; pointer-events:none; }

.btn-green  { background:linear-gradient(135deg,var(--green),var(--green-dk));   color:#001a12; box-shadow:0 4px 14px var(--green-glow); }
.btn-red    { background:linear-gradient(135deg,var(--red),var(--red-dk));       color:#fff;    box-shadow:0 4px 14px var(--red-glow); }
.btn-gold   { background:linear-gradient(135deg,var(--gold-lt),var(--gold));     color:#1a0d00; box-shadow:0 4px 14px var(--gold-glow); }
.btn-ghost  { background:transparent; color:var(--text-dim); border:1px solid var(--border); }
.btn-ghost:hover { color:var(--text); border-color:var(--border-hi); }
.btn-accent { background:linear-gradient(135deg,var(--teal),var(--teal-dk)); color:#fff; box-shadow:0 4px 14px var(--teal-glow); }

/* ── Team Buzz buttons ────────────────────────────────── */
.team-buzz {
  flex:1; min-height:110px; border:none; border-radius:20px;
  font-family:'Cairo',sans-serif; font-size:1.8rem; font-weight:900;
  cursor:pointer; transition:all 0.2s;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.team-buzz.green { background:linear-gradient(145deg,var(--green-dk),var(--green)); color:#001a12; box-shadow:0 8px 32px var(--green-glow); }
.team-buzz.red   { background:linear-gradient(145deg,var(--red-dk),var(--red));     color:#fff;    box-shadow:0 8px 32px var(--red-glow); }
.team-buzz:active { transform:scale(0.94); }
.team-buzz.locked { opacity:0.4; pointer-events:none; }
.team-buzz.winner { animation:buzz-pop 0.55s cubic-bezier(0.34,1.56,0.64,1); }

/* ── Win overlay ──────────────────────────────────────── */
.win-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.93);
  display:flex; align-items:center; justify-content:center;
  z-index:100; animation:fade-in 0.4s ease;
}
.win-card {
  text-align:center; padding:56px 72px; border-radius:32px; border:2px solid;
  animation:win-pop 0.65s cubic-bezier(0.34,1.56,0.64,1);
}
.win-card.green { background:linear-gradient(135deg,#001a10,#002e22); border-color:var(--green); box-shadow:0 0 60px var(--green-glow); }
.win-card.red   { background:linear-gradient(135deg,#1a0000,#2e0000); border-color:var(--red);   box-shadow:0 0 60px var(--red-glow); }

/* ── Scores ───────────────────────────────────────────── */
.score-pill {
  display:flex; align-items:center; gap:6px;
  padding:6px 18px; border-radius:50px; font-weight:700; font-size:1rem;
}
.score-pill.green { background:var(--green-glow); border:1px solid var(--green); color:var(--green); }
.score-pill.red   { background:var(--red-glow);   border:1px solid var(--red);   color:var(--red); }

/* ── Legend ───────────────────────────────────────────── */
.legend {
  display:flex; gap:24px; align-items:center;
  font-size:0.8rem; font-weight:700;
}
.legend-item { display:flex; align-items:center; gap:6px; }
.legend-dot { width:12px; height:12px; border-radius:50%; }

/* ── Animations — minimal, no strobing light effects ─── */
@keyframes fade-in { from{opacity:0} to{opacity:1} }
@keyframes win-pop {
  0%{transform:scale(0.3) rotate(-6deg);opacity:0}
  100%{transform:scale(1) rotate(0);opacity:1}
}
@keyframes buzz-pop {
  0%{transform:scale(1)} 50%{transform:scale(1.08)} 100%{transform:scale(1)}
}
@keyframes bounce {
  0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)}
}
@keyframes slide-up {
  from{transform:translateY(16px);opacity:0} to{transform:translateY(0);opacity:1}
}
@keyframes fadeUp {
  from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)}
}

.slide-up { animation:slide-up 0.3s ease; }

/* ── Utils ────────────────────────────────────────────── */
.hidden { display:none !important; }
.flex { display:flex; }
.col { flex-direction:column; }
.items-center { align-items:center; }
.justify-center { justify-content:center; }
.justify-between { justify-content:space-between; }
.gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px}
.text-center { text-align:center; }
.w-full { width:100%; }
.label { font-size:0.73rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px; }
::-webkit-scrollbar{width:5px} ::-webkit-scrollbar-track{background:var(--surface)} ::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}