/* ===== تحدي الخلية — Presenter UI ===== */
@font-face{font-family:"Cairo";src:url("../fonts/cairo-var.woff") format("woff");font-weight:500 900;font-style:normal;font-display:swap}
:root{
  --bg:#0a2b24; --bg-2:#06201a; --bg-3:#0f3a30;
  --panel:rgba(9,40,33,.78); --panel-edge:rgba(233,207,122,.28);
  --gold:#e9cf7a; --gold-2:#d6b862; --gold-deep:#a98a35; --gold-edge:#b39a4a;
  --ink:#1b2747; --ink-2:#2f3b5e;
  --cream:#fbf6e6; --cream-2:#f3e9c9;
  --text:#f4efe0; --muted:#b9c8bf;
  --green:#14c414; --green-deep:#049a04; --green-edge:#0b8f1e;
  --red:#ee1c1c; --red-deep:#c40606; --red-edge:#a90f0f;
  --fill-gold:linear-gradient(135deg,#f8eab0 0%,#ecd58c 45%,#d9bb63 100%);
  --fill-green:linear-gradient(135deg,#63f063 0%,#19c719 50%,#039703 100%);
  --fill-red:linear-gradient(135deg,#ff6e6e 0%,#ef2020 50%,#c00505 100%);
  --fill-dark:linear-gradient(135deg,#17493d 0%,#0f382f 100%);
  --radius:18px;
  --font:"Cairo","Segoe UI",Tahoma,"Geeza Pro","Noto Sans Arabic",system-ui,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0; min-height:100vh; font-family:var(--font); color:var(--text); line-height:1.6;
  background-color:var(--bg);
  background-image:
    radial-gradient(120% 60% at 50% -10%, rgba(233,207,122,.16), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='28' viewBox='0 0 108 28'%3E%3Cg fill='none' stroke='%23e9cf7a' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M0 14 10 0h44l10 14-10 14H10z'/%3E%3Cpath d='M54 28l10-14h44l10 14-10 14H64z'/%3E%3Cpath d='M54 0l10-14h44l10 14-10 14H64z'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
  background-attachment:scroll;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit}
[hidden]{display:none !important}

/* ---------- The game cell (wide hexagon) ---------- */
.cell{
  --s:16px; --bw:2px; --edge:var(--gold-edge); --fill:var(--fill-gold);
  position:relative; display:inline-grid; place-items:center; isolation:isolate;
  background:var(--edge);
  clip-path:polygon(0 50%,var(--s) 0,calc(100% - var(--s)) 0,100% 50%,calc(100% - var(--s)) 100%,var(--s) 100%);
}
.cell::before{
  content:""; position:absolute; inset:var(--bw); z-index:-1; background:var(--fill);
  background-size:100% 100%;
  clip-path:polygon(0 50%,calc(var(--s) - 1px) 0,calc(100% - var(--s) + 1px) 0,100% 50%,calc(100% - var(--s) + 1px) 100%,calc(var(--s) - 1px) 100%);
}
.cell::after{ /* soft top gloss like the game tiles */
  content:""; position:absolute; inset:var(--bw); z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 45%);
  clip-path:inherit;
}
.cell--gold{--edge:var(--gold-edge);--fill:var(--fill-gold);color:var(--ink)}
.cell--green{--edge:var(--green-edge);--fill:var(--fill-green);color:#fff}
.cell--red{--edge:var(--red-edge);--fill:var(--fill-red);color:#fff}
/* To use the original game tiles, put cell_green.png / cell_red.png in assets/img and uncomment:
.cell--green{--fill:url("../img/cell_green.png"),var(--fill-green)}
.cell--red{--fill:url("../img/cell_red.png"),var(--fill-red)} */
.cell--dark{--edge:rgba(233,207,122,.55);--fill:var(--fill-dark);color:var(--text)}
.cell--dark::after{opacity:.35}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; padding:30px 16px 18px; text-align:center;
  border-bottom:1px solid rgba(233,207,122,.18);
  background:radial-gradient(90% 120% at 50% 0%, rgba(25,90,72,.9), rgba(10,43,36,0) 70%);
}
.hero-hive{position:absolute; inset:0; pointer-events:none}
.hh{position:absolute; width:86px; height:38px; --s:13px; opacity:.9}
.hh1{top:-16px; right:-30px}
.hh2{top:6px; right:48px; width:70px; height:31px; --s:11px; opacity:.18}
.hh3{top:-16px; left:-30px}
.hh4{top:6px; left:48px; width:70px; height:31px; --s:11px; opacity:.18}
.hh5{bottom:14px; right:-46px; opacity:.55}
.hh6{bottom:14px; left:-46px; opacity:.55}
.hero-inner{position:relative}
.hero-title{
  margin:4px 0 0; font-size:clamp(26px,7.4vw,40px); font-weight:900; line-height:1.25;
  background:linear-gradient(180deg,#fff7d6 0%,#ecd58c 55%,#c9a64a 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 2px 0 rgba(0,0,0,.0);
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.35));
}
.hero-sub{display:flex; align-items:center; justify-content:center; gap:12px; margin:6px 0 14px;
  font-size:clamp(19px,5.4vw,26px); font-weight:800; color:var(--text)}
.team-dot{width:44px; height:22px; --s:8px; --bw:1.5px}
.sig{
  --s:22px; min-width:min(100%,300px); padding:10px 34px 9px; flex-direction:column; gap:0;
  display:inline-flex; line-height:1.35;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));
}
.sig-main{font-weight:800; font-size:15px; white-space:nowrap}
.sig-main i{font-style:normal; color:var(--gold-deep); padding:0 3px}
.sig-main [lang=en]{letter-spacing:.3px}
.sig-dev{font-size:12px; font-weight:700; color:var(--ink-2); opacity:.85}

/* ---------- Layout ---------- */
.app{max-width:760px; margin:0 auto; padding:14px 12px calc(28px + var(--safe-b)); display:flex; flex-direction:column; gap:14px}
.panel{background:var(--panel); border:1px solid var(--panel-edge); border-radius:var(--radius);
  padding:14px; box-shadow:0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05)}

/* ---------- Setup ---------- */
.step + .step{margin-top:14px}
.step-head{display:flex; align-items:center; gap:8px; margin:0 0 8px; font-size:15px; font-weight:800; color:var(--gold)}
.step-num{display:inline-grid; place-items:center; width:30px; height:22px; font-size:13px; --s:7px; --bw:1.5px}
.step-hint{font-size:12px; font-weight:600; color:var(--muted)}
.opts{display:grid; gap:8px}
.opts--3{grid-template-columns:repeat(3,1fr)}
.opts--wrap{display:flex; flex-wrap:wrap; gap:8px}
.opt{appearance:none; border:0; background:none; padding:0; cursor:pointer; touch-action:manipulation; min-height:52px; display:block}
.opt .cell{width:100%; min-height:52px; padding:6px 20px; font-weight:800; font-size:15px; line-height:1.3; --s:15px; text-align:center}
.opts--wrap .opt{flex:1 1 auto}
.opts--wrap .opt .cell{min-height:46px; font-size:14px; padding:6px 22px}
.opt[aria-pressed=true] .cell{filter:drop-shadow(0 0 10px rgba(233,207,122,.35))}
.opt:active .cell{transform:scale(.97)}
.opt .cell small{display:block; font-size:11px; font-weight:700; opacity:.75}

.summary{display:flex; align-items:center; gap:10px; justify-content:space-between}
.summary-text{display:flex; flex-wrap:wrap; gap:4px 8px; font-weight:800; font-size:15px; color:var(--text)}
.summary-text .sep{color:var(--gold); opacity:.7}
.summary-text .crs{color:var(--gold)}

/* ---------- Buttons ---------- */
.btn{appearance:none; border:0; cursor:pointer; touch-action:manipulation; user-select:none; -webkit-user-select:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:10px 16px;
  border-radius:14px; font-weight:800; font-size:16px; line-height:1.3; text-align:center;
  transition:transform .08s ease, filter .15s ease, background-color .15s ease}
.btn:active{transform:scale(.97)}
.btn:focus-visible,.opt:focus-visible,.lbtn:focus-visible{outline:3px solid #fff2b8; outline-offset:2px}
.btn--gold{background:var(--fill-gold); color:var(--ink); box-shadow:0 4px 0 var(--gold-deep), 0 8px 18px rgba(0,0,0,.25)}
.btn--gold:active{box-shadow:0 1px 0 var(--gold-deep)}
.btn--ink{background:#16305a; color:#fff; box-shadow:0 4px 0 #0c1c38, 0 8px 18px rgba(0,0,0,.25)}
.btn--ink:active{box-shadow:0 1px 0 #0c1c38}
.btn--ghost{background:rgba(255,255,255,.06); color:var(--text); border:1.5px solid rgba(233,207,122,.45)}
.btn--ghost-ink{background:transparent; color:var(--ink); border:1.5px solid rgba(27,39,71,.25)}
.btn--danger{background:#b3261e; color:#fff; box-shadow:0 4px 0 #7a1410}
.btn--small{min-height:40px; padding:6px 12px; font-size:14px; border-radius:12px}
.btn--block{width:100%}
.btn[disabled]{cursor:default; filter:saturate(.6); opacity:.75; transform:none}
.btn--done{background:#e5f4e3; color:#14601d; box-shadow:none; border:2px solid #2f9b3b; opacity:1 !important; filter:none !important}

/* ---------- Stats ---------- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.stat{background:var(--panel); border:1px solid var(--panel-edge); border-radius:16px; padding:8px 6px 10px; text-align:center}
.stat b{display:block; font-size:28px; font-weight:900; line-height:1.2; font-variant-numeric:tabular-nums}
.stat span{font-size:13px; font-weight:700; color:var(--muted)}
.stat--total b{color:var(--gold)}
.stat--left b{color:#fff}
.stat--used b{color:#ffd37a}
.stat-scope{grid-column:1/-1; font-size:12px; color:var(--muted); text-align:center; margin-top:-2px}

/* ---------- Board ---------- */
.board-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px}
.board-title{margin:0; font-size:17px; font-weight:900; color:var(--gold)}
.board-legend{font-size:12px; color:var(--muted); font-weight:600}
.board-legend b{color:#fff}
.halves{display:grid; grid-template-columns:1fr; gap:10px}
.halves--split{grid-template-columns:1fr 1fr}
.half{border-radius:14px; padding:10px 4px 12px; background:rgba(0,0,0,.16); border:1px solid rgba(233,207,122,.14); min-width:0}
.half-title{margin:0 0 6px; text-align:center; font-size:14px; font-weight:800; color:var(--text)}
.half-title small{display:block; font-size:11px; color:var(--muted); font-weight:600}
.half--en .half-title{font-family:var(--font)}
.lgrid{display:grid; grid-template-columns:repeat(var(--cols,3),1fr); column-gap:0; row-gap:4px;
  --ch:48px; --cs:15px; padding-inline:calc(var(--cs) / 2); padding-bottom:calc(var(--ch) / 2 + 16px)}
.lbtn{appearance:none; background:none; border:0; padding:0; margin:0; cursor:pointer; touch-action:manipulation;
  display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; color:inherit}
/* tiles overlap their neighbours by one slant so the columns interlock like the game board */
.lbtn .cell{width:calc(100% + var(--cs) - 2px); height:var(--ch); --s:var(--cs); font-size:26px; font-weight:900; line-height:1; flex:none}
.lbtn[dir=ltr] .cell{font-size:23px}
.lcount{height:18px; font-size:12px; font-weight:700; color:var(--muted); line-height:1.2; white-space:nowrap; font-variant-numeric:tabular-nums}
.lcount b{font-size:15px; font-weight:900; color:#fff}
.lbtn:active .cell{transform:scale(.94)}
.lbtn .cell{transition:transform .08s ease}
.lbtn.is-empty{cursor:default; opacity:.28}
.lbtn.is-empty .lcount{visibility:hidden}
.lbtn.is-done .cell{--fill:linear-gradient(135deg,#cfc6a6,#a99f80); --edge:#8b8266; color:rgba(27,39,71,.6)}
.lbtn.is-done .lcount b{color:#ffd37a}
.lbtn.is-current .cell{filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 8px rgba(255,242,184,.9))}
/* honeycomb stagger: every second column drops half a row, like the game board */
.lbtn.dn{transform:translateY(calc((var(--ch) + 25px) / 2))}
.halves--split .lgrid{--ch:40px; --cs:11px}
.halves--split .lbtn .cell{font-size:22px; width:calc(100% + var(--cs) / 2)}
.halves--split .lcount{font-size:11px}
.halves--split .lcount b{font-size:13px}
.halves--split .lbtn[dir=ltr] .cell{font-size:20px}

.board-mini{display:flex; align-items:center; gap:12px}
.board-mini .cell{width:72px; height:50px; --s:15px; font-size:28px; font-weight:900; flex:none}
.board-mini-text{flex:1; min-width:0}
.board-mini-text b{display:block; font-size:16px; font-weight:900}
.board-mini-text span{font-size:13px; color:var(--muted); font-weight:700}
.board-mini-text span em{font-style:normal; color:#fff; font-weight:900}

/* ---------- Question card ---------- */
.qcard{position:relative; background:var(--cream); color:var(--ink); border-radius:22px; padding:16px 16px 14px;
  border:3px solid var(--gold-2); box-shadow:0 18px 40px rgba(0,0,0,.35), inset 0 0 0 4px rgba(255,255,255,.55);
  scroll-margin-top:10px}
.q-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.q-course{display:inline-flex; align-items:center; min-height:40px; padding:6px 22px; --s:13px; font-size:17px; font-weight:900; line-height:1.3;
  --edge:#0f2a52; --fill:linear-gradient(135deg,#1f4478,#122c55); color:#fff}
.q-course::after{opacity:.4}
.q-status{flex:none; font-size:13px; font-weight:800; padding:4px 10px; border-radius:999px; border:1.5px solid; white-space:nowrap; margin-top:6px}
.q-status--new{color:#8a6a14; border-color:#d8b85a; background:#fff4cf}
.q-status--used{color:#14601d; border-color:#2f9b3b; background:#e5f4e3}
.q-letter-row{display:flex; align-items:center; gap:10px; margin:12px 0 6px}
.q-letter{width:78px; height:52px; --s:16px; font-size:32px; font-weight:900; flex:none; line-height:1}
.q-meta{font-size:13px; color:var(--ink-2); font-weight:700; line-height:1.4}
.q-meta b{color:var(--ink); font-size:15px}
.q-text{margin:8px 0 14px; font-size:clamp(22px,6.2vw,30px); font-weight:800; line-height:1.65; color:var(--ink); text-wrap:pretty}
.q-text[dir=ltr]{text-align:left; font-weight:700; line-height:1.55; letter-spacing:.1px}
.q-text .blank{display:inline-block; min-width:2.6em; border-bottom:3px dotted var(--gold-deep); line-height:1; margin:0 2px; color:transparent; vertical-align:baseline}
.ans-toggle{width:100%}
.ans{margin-top:10px; border-radius:16px; padding:14px; text-align:center; background:linear-gradient(135deg,#16305a,#0f2244); color:#fff;
  box-shadow:inset 0 0 0 2px rgba(233,207,122,.55)}
.ans-label{display:block; font-size:13px; font-weight:700; color:var(--gold); margin-bottom:2px}
.ans-text{display:block; font-size:clamp(28px,8.5vw,40px); font-weight:900; line-height:1.35; color:#fff3c4}
.q-actions{display:grid; grid-template-columns:1fr; gap:10px; margin-top:14px}
.q-actions .btn{min-height:58px; font-size:18px}
.q-actions--sec{grid-template-columns:1fr 1fr; gap:8px; margin-top:10px}
.q-actions--sec .btn{min-height:46px; font-size:14px; padding:6px 6px; white-space:nowrap}
@media (min-width:520px){ .q-actions:not(.q-actions--sec){grid-template-columns:1fr 1fr} }
.q-empty{text-align:center; padding:6px 4px 2px}
.q-empty h3{margin:6px 0 4px; font-size:21px; font-weight:900}
.q-empty p{margin:0 0 12px; color:var(--ink-2); font-weight:600}
.q-empty .q-actions{grid-template-columns:1fr}

/* ---------- Tools ---------- */
.tools h2{margin:0 0 10px; font-size:15px; font-weight:800; color:var(--gold)}
.tools-grid{display:grid; grid-template-columns:1fr; gap:8px}
.tools-note{margin:10px 0 0; font-size:12px; color:var(--muted); text-align:center}
.tools-note.warn{color:#ffd37a}

/* ---------- Modal / toast ---------- */
.modal{position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px; background:rgba(2,14,11,.7);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
.modal-box{width:min(420px,100%); background:var(--cream); color:var(--ink); border-radius:20px; padding:20px; border:3px solid var(--gold-2)}
.modal-title{margin:0 0 6px; font-size:20px; font-weight:900}
.modal-msg{margin:0 0 16px; font-weight:600; color:var(--ink-2)}
.modal-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.modal-actions .btn--ghost{color:var(--ink); border-color:rgba(27,39,71,.3); background:transparent}
.toast{position:fixed; z-index:60; left:50%; bottom:calc(18px + var(--safe-b)); transform:translateX(-50%);
  width:max-content; max-width:calc(100% - 32px); padding:10px 16px; border-radius:14px; background:#10213f; color:#fff;
  font-weight:700; font-size:14px; box-shadow:0 10px 30px rgba(0,0,0,.4); border:1px solid rgba(233,207,122,.45); text-align:center}

.foot{display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 16px calc(22px + var(--safe-b)); font-size:12px; color:var(--muted); opacity:.8}

/* ---------- Small phones ---------- */
@media (max-width:370px){
  .lgrid{--ch:44px; --cs:13px}
  .halves--split .lgrid{--ch:36px; --cs:10px}
  .halves--split .lbtn .cell{font-size:20px}
  .sig-main{font-size:13.5px}
  .opt .cell{font-size:14px; padding:6px 16px}
  .q-actions .btn{font-size:15px}
}
/* ---------- Tablets / desktop ---------- */
@media (min-width:700px){
  .lgrid{--ch:56px; --cs:18px}
  .halves--split .lgrid{--ch:50px; --cs:15px}
  .lbtn .cell{font-size:30px}
  .tools-grid{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important; scroll-behavior:auto !important}}