:root{
  /* Sampled from the Habib Ul Quraan mark */
  --gold:#BE9D68; --gold-deep:#9A7C48; --gold-lit:#E0CBA3; --gold-wash:#F3EBDC;
  --cream:#FAFBF6; --cream-2:#F2EFE4;
  --white:#FFFFFF;
  --green:#14473A; --green-mid:#1E6650; --green-lit:#8FBFAC; --green-wash:#E6EFEA;
  --ink:#2A2A24; --ink-soft:#5C5A50; --muted:#8A877C;
  --line:#E2DDCE; --line-green:#2C6053;
  --correct:#1E6650; --wrong:#9A3226; --amber:#C4842A; --invalid:#2F6F93;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --arabic:"Traditional Arabic","Amiri","Scheherazade New","Segoe UI",serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}
a{color:var(--green-mid)}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------------------------------------------------------------- PIN gate */
.gate{position:fixed;inset:0;background:var(--cream);display:grid;place-items:center;z-index:99;padding:6vw}
.gate form{width:min(340px,88vw);text-align:center}
.gate img{width:120px;margin:0 auto 1.5rem;display:block}
.gate h2{font-family:var(--serif);font-size:1.3rem;color:var(--green);margin-bottom:.25rem}
.gate p{color:var(--muted);font-size:.9rem;margin:.25rem 0 1.25rem}
.gate input{width:100%;padding:.85rem;font-size:1.6rem;text-align:center;letter-spacing:.4em;background:var(--white);border:1px solid var(--line);color:var(--ink);border-radius:3px}
.gate button{width:100%;margin-top:.75rem}
.gate .err{color:var(--wrong);font-size:.85rem;min-height:1.2em;margin-top:.5rem}

/* ---------------------------------------------------------------- controls */
button{font-family:inherit;font-size:.92rem;font-weight:600;color:var(--green);background:var(--white);border:1px solid var(--line);border-radius:3px;padding:.68rem .85rem;cursor:pointer;transition:background .12s ease,border-color .12s ease}
button:hover:not(:disabled){background:var(--green-wash);border-color:var(--green-lit)}
button:disabled{opacity:.35;cursor:not-allowed}
button.primary{background:var(--green);border-color:var(--green);color:var(--cream)}
button.primary:hover:not(:disabled){background:var(--green-mid);border-color:var(--green-mid)}
button.gold{background:var(--gold);border-color:var(--gold-deep);color:#3A2E14}
button.gold:hover:not(:disabled){background:var(--gold-lit)}
button.danger{background:#FBEEEC;border-color:#E0BDB7;color:var(--wrong)}
button.big{padding:1.05rem;font-size:1rem}
input,select,textarea{font-family:inherit;font-size:.95rem;background:var(--white);border:1px solid var(--line);color:var(--ink);border-radius:3px;padding:.6rem}
input:disabled,textarea:disabled{background:var(--cream-2);color:var(--muted)}

/* ------------------------------------------------------------ console shell */
.shell{display:grid;grid-template-rows:auto 1fr;height:100%}
.bar{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;padding:.5rem 1rem;background:var(--green);color:var(--cream);border-bottom:3px solid var(--gold)}
.bar img{height:34px;display:block}
.bar h1{font-family:var(--serif);font-size:1rem;color:var(--gold-lit);font-weight:400}
.bar .sep{width:1px;height:24px;background:var(--line-green)}
.bar .day{font-size:.82rem;color:var(--green-lit)}
.bar .who{margin-left:auto;font-size:.8rem;color:var(--green-lit);display:flex;align-items:center;gap:.6rem}
.bar nav{display:flex;gap:.3rem;flex-wrap:wrap}
.bar nav a{color:var(--green-lit);text-decoration:none;font-size:.78rem;padding:.25rem .5rem;border:1px solid transparent;border-radius:2px}
.bar nav a:hover{border-color:var(--line-green);color:var(--cream)}
.bar nav a.here{background:var(--green-mid);color:var(--cream)}

.link{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem}
.dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--wrong);flex:none}
body[data-connected="1"] .dot{background:var(--green-lit)}
.offline{display:none;background:#FBEEEC;border-bottom:1px solid #E0BDB7;color:var(--wrong);padding:.5rem 1rem;font-size:.85rem;font-weight:600}
body[data-connected="0"] .offline{display:block}

.cols{display:grid;grid-template-columns:1fr 330px;gap:1px;background:var(--line);overflow:hidden}
.cols.wide{grid-template-columns:1fr 1fr}
.pane{background:var(--cream);padding:1rem;overflow:auto}
.pane.side{background:var(--cream-2)}
@media (max-width:900px){
  .shell{height:auto;min-height:100%}
  .cols,.cols.wide{grid-template-columns:minmax(0,1fr);overflow:visible}
  .pane{min-width:0;overflow:visible}
  .pane table{display:block;max-width:100%;overflow-x:auto}
  .pane input,.pane select,.pane textarea{min-width:0;max-width:100%}
}

.group{margin-bottom:1.05rem}
.group>h3{font-size:.76rem;color:var(--muted);font-weight:700;margin-bottom:.45rem}
.row{display:flex;gap:.45rem;flex-wrap:wrap}
.row>button{flex:1 1 auto;min-width:118px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem}

.track{display:flex;gap:2px;margin-bottom:.9rem;flex-wrap:wrap}
.track span{flex:1 1 auto;font-size:.62rem;padding:.32rem .28rem;text-align:center;background:var(--white);color:var(--muted);border:1px solid var(--line);border-radius:2px;white-space:nowrap}
.track span.done{background:var(--green-wash);color:var(--green-mid);border-color:var(--green-lit)}
.track span.now{background:var(--gold);color:#3A2E14;font-weight:700;border-color:var(--gold-deep)}

.card{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--gold);padding:.85rem;border-radius:3px;margin-bottom:.9rem}
.card.green{border-left-color:var(--green)}
.card h3{font-size:.76rem;color:var(--muted);margin-bottom:.45rem;font-weight:700}
.card .q{font-family:var(--serif);font-size:1.2rem;margin:0 0 .7rem;line-height:1.35}
.arabic{font-family:var(--arabic);font-size:1.85rem;direction:rtl;text-align:right;line-height:1.9;color:var(--green)}
.placeholder{background:var(--gold-wash);border:1px dashed var(--gold-deep);color:var(--gold-deep);padding:.7rem;border-radius:3px;font-size:.88rem}

.kv{font-size:.9rem}
.kv div{display:flex;justify-content:space-between;gap:1rem;padding:.28rem 0;border-bottom:1px solid var(--line)}
.kv div:last-child{border-bottom:0}
.kv span:first-child{color:var(--muted)}
.kv span:last-child{text-align:right}
.warn{background:var(--gold-wash);border:1px solid var(--gold);color:#6B5320;padding:.55rem .7rem;border-radius:3px;font-size:.85rem;margin-bottom:.9rem}
.blocked{color:var(--wrong);font-size:.85rem;min-height:1.2rem;font-weight:600;margin-bottom:.6rem}
.blocked:empty{margin-bottom:0}

.picker{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.picker button{text-align:left;padding:.75rem;font-weight:400;line-height:1.3;color:var(--ink)}
.picker button b{display:inline-block;width:1.4em;color:var(--gold-deep);font-family:var(--serif)}
.picker button.sel{border-color:var(--green);background:var(--green-wash)}
.picker button.gone{text-decoration:line-through;opacity:.3}

/* --------------------------------------------------------------- signalling */
.signals{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.signals button{padding:1.3rem .6rem;font-size:1rem;border-width:2px}
.sig-green{background:var(--green-wash);border-color:var(--correct);color:var(--correct)}
.sig-red{background:#FBEEEC;border-color:var(--wrong);color:var(--wrong)}
.sig-amber{background:var(--gold-wash);border-color:var(--amber);color:#7A5416}
.sig-blue{background:#EAF1F6;border-color:var(--invalid);color:var(--invalid)}
.signals button[aria-pressed=true]{outline:3px solid var(--gold);outline-offset:1px}
.lamp{display:flex;align-items:center;gap:.6rem;font-size:1.02rem;font-weight:600;padding:.75rem;border-radius:3px;background:var(--white);border:1px solid var(--line);margin-bottom:.9rem}
.lamp i{width:1rem;height:1rem;border-radius:50%;background:var(--line);display:block;flex:none}
.lamp[data-s=green] i{background:var(--correct)} .lamp[data-s=green]{color:var(--correct);border-color:var(--green-lit)}
.lamp[data-s=red] i{background:var(--wrong)} .lamp[data-s=red]{color:var(--wrong);border-color:#E0BDB7}
.lamp[data-s=amber] i{background:var(--amber)} .lamp[data-s=amber]{color:#7A5416;border-color:var(--gold)}
.lamp[data-s=blue] i{background:var(--invalid)} .lamp[data-s=blue]{color:var(--invalid)}

/* ------------------------------------------------------------ marking forms */
.rubric{display:grid;gap:.5rem}
.crit{display:grid;grid-template-columns:1fr 5.5rem;gap:.6rem;align-items:center;background:var(--white);border:1px solid var(--line);padding:.5rem .65rem;border-radius:3px}
.crit label{font-size:.9rem}
.crit label small{display:block;color:var(--muted);font-size:.76rem}
.crit input{text-align:center;font-size:1.05rem;font-variant-numeric:tabular-nums}
.crit input.over{border-color:var(--wrong);color:var(--wrong)}
.crit.other{opacity:.45}
.total{display:flex;justify-content:space-between;align-items:baseline;background:var(--green);color:var(--cream);padding:.65rem .85rem;border-radius:3px;margin-top:.6rem}
.total b{font-family:var(--serif);font-size:1.7rem;color:var(--gold-lit)}
.tally{display:grid;grid-template-columns:1fr auto auto auto;gap:.35rem .5rem;align-items:center;font-size:.88rem}
.tally b{font-variant-numeric:tabular-nums;min-width:2ch;text-align:center;font-family:var(--serif);font-size:1.1rem}
.tally button{padding:.3rem .55rem;font-size:.95rem;min-width:2.2rem}
.seatpick{display:flex;gap:.4rem;flex-wrap:wrap}
.seatpick button{flex:1 1 auto}
.seatpick button[aria-pressed=true]{background:var(--green);border-color:var(--green);color:var(--cream)}
.chips{display:flex;gap:.35rem;flex-wrap:wrap}
.chip{font-size:.76rem;padding:.22rem .5rem;border:1px solid var(--line);border-radius:2px;color:var(--muted);background:var(--white)}
.chip.in{border-color:var(--green-lit);background:var(--green-wash);color:var(--green-mid);font-weight:600}
.chip.drop{border-color:var(--line);color:var(--muted);text-decoration:line-through}

/* ------------------------------------------------------------ public screens */
.stage{height:100%;display:grid;grid-template-rows:auto 1fr auto;padding:2.2vh 3vw;gap:1.8vh;background:var(--green);color:var(--cream)}
.stage-head{display:flex;align-items:center;gap:1.5vw;border-bottom:1px solid var(--line-green);padding-bottom:1vh}
.stage-head img{height:clamp(38px,6vh,74px)}
.stage-head h1{font-family:var(--serif);font-size:clamp(.95rem,1.9vw,1.7rem);color:var(--gold-lit);font-weight:400}
.stage-head h1 small{display:block;font-size:.62em;color:var(--green-lit)}
.stage-head .day{margin-left:auto;color:var(--green-lit);font-size:clamp(.65rem,1vw,.95rem);text-align:right}
.stage-body{display:grid;grid-template-columns:1fr clamp(130px,14vw,215px);gap:2.5vw;min-height:0}
.stage-body.full{grid-template-columns:1fr}
.play{display:grid;grid-template-rows:auto 1fr;gap:2.2vh;min-height:0}

.qband{background:rgba(250,251,246,.06);border:1px solid var(--line-green);border-top:3px solid var(--gold);padding:2vh 2vw;border-radius:2px}
.qband .qmeta{color:var(--green-lit);font-size:clamp(.62rem,.95vw,.88rem);margin-bottom:.7vh}
.qband p{margin:0;font-family:var(--serif);font-size:clamp(1.05rem,2.4vw,2.4rem);line-height:1.3}

.answers{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1.5vh 2vw}
.plaque{display:flex;align-items:center;gap:1.1vw;padding:1.5vh 1.5vw;background:rgba(250,251,246,.07);border:1px solid var(--line-green);border-top:2px solid var(--gold-deep);border-radius:3px;font-size:clamp(.9rem,1.8vw,1.8rem)}
.plaque b{font-family:var(--serif);color:var(--gold);min-width:1.3em}
.plaque.sel{background:var(--gold);color:#3A2E14;border-color:var(--gold-lit)}
.plaque.sel b{color:#3A2E14}
.plaque.gone{opacity:.18}
.plaque.gone span{text-decoration:line-through}
.plaque.correct{background:var(--cream);color:var(--green);border-color:var(--cream)}
.plaque.correct b{color:var(--green-mid)}
.plaque.wrong{background:#5C1E16;border-color:#7A2A20;color:#F0CFC9}

/* ladder: gold spine, pointed-arch cartouche on the live level */
.ladder{display:flex;flex-direction:column-reverse;justify-content:space-between;gap:.4vh;border-left:1px solid var(--line-green);padding-left:1vw}
.rung{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.5vh .7vw;font-size:clamp(.58rem,1vw,.95rem);color:var(--green-lit);border-radius:2px}
.rung b{font-family:var(--serif);color:var(--cream);min-width:1.6ch}
.rung.mile{color:var(--gold);background:rgba(190,157,104,.12)}
.rung.mile b{color:var(--gold-lit)}
.rung.won{background:rgba(143,191,172,.16);color:var(--cream)}
.rung.now{background:var(--gold);color:#3A2E14;font-weight:700;clip-path:polygon(0 22%,50% 0,100% 22%,100% 100%,0 100%)}
.rung.now b{color:#3A2E14}

.stage-foot{display:flex;align-items:center;gap:2vw;border-top:1px solid var(--line-green);padding-top:1vh;flex-wrap:wrap}
.ident{display:flex;align-items:baseline;gap:1vw;flex-wrap:wrap}
.ident strong{font-family:var(--serif);font-size:clamp(1rem,2.1vw,2rem);color:var(--cream);font-weight:400}
.ident em{font-style:normal;color:var(--gold-lit);font-size:clamp(.7rem,1.25vw,1.05rem)}
.ident small{color:var(--green-lit);font-size:clamp(.62rem,1.05vw,.9rem)}
.clock{margin-left:auto;font-family:var(--serif);font-variant-numeric:tabular-nums;font-size:clamp(1.5rem,3.6vw,3.2rem);line-height:1;color:var(--gold-lit);text-align:right}
.clock.low{color:#F0B9AF}
.clock.small{font-size:clamp(.8rem,1.5vw,1.25rem);color:var(--green-lit)}
.lifebar{display:flex;gap:.7vw;flex-wrap:wrap}
.life{padding:.45vh .8vw;border:1px solid var(--line-green);border-radius:2px;font-size:clamp(.58rem,.95vw,.82rem);color:var(--green-lit)}
.life.on{border-color:var(--gold);color:var(--gold-lit)}
.life.spent{opacity:.32;text-decoration:line-through}

.notice{position:fixed;inset:0;background:var(--green);display:grid;place-items:center;text-align:center;padding:6vw;z-index:20}
.notice div{max-width:28ch}
.notice img{width:clamp(90px,14vw,190px);margin-bottom:3vh}
.notice h2{font-family:var(--serif);font-size:clamp(1.5rem,4.5vw,3.6rem);color:var(--gold-lit);line-height:1.2;font-weight:400}
.notice p{color:var(--green-lit);font-size:clamp(.85rem,1.6vw,1.3rem);margin-top:1.5vh}
.notice.hidden{display:none}

.audience{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4vw;align-items:end;height:20vh;margin-top:1.4vh}
.audience div{display:flex;flex-direction:column;justify-content:flex-end;gap:.5vh;text-align:center;height:100%}
.audience i{display:block;background:var(--gold);border-radius:2px 2px 0 0;min-height:2px}
.audience span{font-size:clamp(.65rem,1.1vw,.95rem);color:var(--green-lit)}

/* team head-to-head + bracket */
.h2h{display:grid;grid-template-columns:1fr auto 1fr;gap:2vw;align-items:center}
.side{background:rgba(250,251,246,.07);border:1px solid var(--line-green);border-top:3px solid var(--gold-deep);padding:1.6vh 1.6vw;border-radius:3px;text-align:center}
.side.answering{border-color:var(--gold);background:var(--gold);color:#3A2E14}
.side.answering .pts{color:#3A2E14}
.side .nm{font-family:var(--serif);font-size:clamp(1rem,2.2vw,2.1rem);display:block}
.side .cty{color:var(--green-lit);font-size:clamp(.62rem,1vw,.9rem)}
.side.answering .cty{color:#5A4A22}
.side .pts{font-family:var(--serif);font-size:clamp(2rem,5.5vw,5rem);line-height:1;color:var(--gold-lit);display:block;margin-top:.6vh}
.vs{font-family:var(--serif);color:var(--green-lit);font-size:clamp(.8rem,1.6vw,1.4rem)}
.bracket{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2vw;font-size:clamp(.55rem,.95vw,.85rem)}
.bracket h4{color:var(--gold-lit);font-family:var(--serif);font-weight:400;margin:0 0 .8vh;font-size:1.15em}
.bracket .m{border:1px solid var(--line-green);border-radius:2px;padding:.5vh .6vw;margin-bottom:.5vh;color:var(--green-lit)}
.bracket .m.done{border-color:var(--gold-deep)}
.bracket .m span{display:flex;justify-content:space-between;gap:.5rem}
.bracket .m .w{color:var(--cream);font-weight:700}

/* buzzer table */
.buzzwrap{height:100%;display:grid;grid-template-rows:auto 1fr auto;background:var(--green);color:var(--cream);padding:3vh 5vw;gap:2vh;text-align:center}
.buzzwrap h1{font-family:var(--serif);color:var(--gold-lit);font-weight:400;font-size:clamp(1rem,3vw,1.8rem)}
.buzzbtn{border:none;border-radius:50%;aspect-ratio:1;width:min(62vw,52vh);margin:auto;background:var(--gold);color:#3A2E14;font-family:var(--serif);font-size:clamp(1.4rem,7vw,3rem);font-weight:700;box-shadow:0 0 0 8px rgba(190,157,104,.2)}
.buzzbtn:disabled{background:var(--line-green);color:var(--green-lit);box-shadow:none;opacity:1}
.buzzbtn.first{background:var(--cream);color:var(--green)}
.buzzstat{color:var(--green-lit);font-size:clamp(.85rem,2vw,1.1rem);min-height:2.5em}

/* --------------------------------------------------------- OBS: transparent */
body.overlay{background:transparent}
.ov{position:fixed;inset:0;padding:3vh 4vw;display:grid;grid-template-rows:1fr auto;gap:2vh;pointer-events:none;color:var(--cream)}
.ov .qband,.ov .plaque,.ov .side{background:rgba(20,71,58,.9)}
.ov .plaque.correct{background:rgba(250,251,246,.95);color:var(--green)}
.ov .lower{display:flex;align-items:center;gap:1.5vw;background:rgba(20,71,58,.92);border-left:4px solid var(--gold);padding:1.1vh 1.5vw;border-radius:2px}
.ov .lower img{height:clamp(28px,4.5vh,52px)}

/* ------------------------------------------------------------------ launcher */
.launch{max-width:56rem;margin:0 auto;padding:5vh 6vw}
.launch img.mark{width:130px;display:block;margin-bottom:2rem}
.launch h1{font-family:var(--serif);font-size:clamp(1.5rem,3.6vw,2.4rem);color:var(--green);font-weight:400}
.launch>p{color:var(--ink-soft);max-width:62ch}
.launch h2{font-family:var(--serif);color:var(--green);font-size:1.05rem;font-weight:400;margin:2.2rem 0 .6rem;padding-bottom:.35rem;border-bottom:1px solid var(--gold)}
.launch ul{list-style:none;padding:0;margin:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.launch li{background:var(--white);padding:.85rem 1.1rem;display:flex;gap:1.1rem;align-items:baseline;flex-wrap:wrap}
.launch li a{font-weight:600;text-decoration:none;min-width:11rem}
.launch li small{color:var(--muted)}
.launch li em{margin-left:auto;font-style:normal;color:var(--gold-deep);font-size:.72rem;font-weight:700}
.draft{margin-top:2.2rem;border:1px solid var(--gold);background:var(--gold-wash);color:#6B5320;padding:.95rem 1.1rem;border-radius:3px}
.draft code{background:var(--white);padding:.05rem .3rem;border-radius:2px}

/* ------------------------------------------------- rehearsal mode banner */
#modeBanner{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  background:repeating-linear-gradient(135deg,#9A7C48 0 12px,#8A6D3C 12px 24px);
  color:var(--cream);font-family:var(--sans);font-size:.72rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;text-align:center;
  padding:.28rem .6rem;pointer-events:none
}
body:has(#modeBanner){padding-top:var(--mode-banner-height,1.4rem)}
body.overlay #modeBanner{background:rgba(154,124,72,.92)}
@media print{body:has(#modeBanner){padding-top:0}}