/* Kandeel «Gift Time» LED — 8 m × 4 m = 2:1 stage, letterboxed into any window. Units: cqh/cqw of #st. */
@font-face { font-family: "KCairo"; src: url(/static/fonts/cairo-arabic-wght-normal.woff2) format("woff2"); font-weight: 200 1000; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+0660-0669; font-display: block; }
@font-face { font-family: "KCairo"; src: url(/static/fonts/cairo-latin-wght-normal.woff2) format("woff2"); font-weight: 200 1000; font-display: block; }
:root { --esp: #15100c; --esp2: #2a1e15; --bronze: #b07a45; --gold: #e0b077; --gold2: #f6d9a8; --cream: #f4ebdf; --muted: rgba(244,235,223,.62); --ok: #7fd6a0; --low: #ff8a6b; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #000; overflow: hidden; }
body { font-family: "KCairo", system-ui, sans-serif; color: var(--cream); }
#vp { position: fixed; inset: 0; display: grid; place-items: center; }
#st { position: relative; width: min(100vw, 200vh); height: min(50vw, 100vh); container-type: size; overflow: hidden;
  background: radial-gradient(70% 90% at 30% 55%, #3a2a1c 0%, transparent 60%), linear-gradient(180deg, var(--esp2), var(--esp) 70%); }
.bg { position: absolute; inset: 0; pointer-events: none; }
.bg .arch { position: absolute; bottom: -2cqh; border: .35cqh solid rgba(176,122,69,.18); border-bottom: 0; border-radius: 50% 50% 0 0 / 34% 34% 0 0; }
.bg .a1 { left: 2cqw; width: 30cqw; height: 120cqh; } .bg .a2 { left: 6cqw; width: 22cqw; height: 104cqh; opacity: .6; } .bg .a3 { right: -6cqw; width: 40cqw; height: 135cqh; opacity: .45; }
.bg .glow { position: absolute; left: 3cqw; bottom: -20cqh; width: 32cqw; height: 60cqh; background: radial-gradient(closest-side, rgba(224,176,119,.30), transparent); filter: blur(2cqh); }
#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }

.top { position: absolute; top: 4cqh; right: 4cqw; left: 40cqw; display: flex; align-items: center; justify-content: space-between; gap: 3cqw; z-index: 2; }
.top .logo { height: 9cqh; width: auto; }
.kick { display: flex; align-items: center; gap: 1.6cqw; color: var(--gold); font-weight: 700; font-size: 4.4cqh; letter-spacing: .02em; white-space: nowrap; }
.kick .rule { width: 6cqw; height: .3cqh; background: linear-gradient(90deg, transparent, var(--bronze), transparent); }

/* left: QR inside the arch */
.qrside { position: absolute; left: 3.5cqw; top: 6cqh; bottom: 9cqh; width: 31cqw; display: flex; flex-direction: column; align-items: center; z-index: 3; }
.archq { position: relative; height: 62cqh; aspect-ratio: 100 / 140; }
.archq .ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.archq .ring path { fill: rgba(21,16,12,.55); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.archq .ring .bgp { stroke: var(--bronze); stroke-width: .9cqh; }
.archq .ring .fg { fill: none; stroke: var(--gold2); stroke-width: .9cqh; stroke-linecap: round; filter: drop-shadow(0 0 1.2cqh rgba(246,217,168,.8)); opacity: 0; transition: opacity .4s; }
#st.open .archq .ring .fg { opacity: 1; }
.archq .ring .fg.low { stroke: var(--low); filter: drop-shadow(0 0 1.2cqh rgba(255,138,107,.9)); }
.archq .tile { position: absolute; left: 12%; right: 12%; bottom: 7%; aspect-ratio: 1; background: #fff; border-radius: 1.6cqh; padding: 2.2cqh; box-shadow: 0 0 6cqh rgba(224,176,119,.35); }
.archq .tile img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.qcap { margin-top: 2.2cqh; font-size: 4.6cqh; font-weight: 600; color: var(--cream); white-space: nowrap; }
.qcap b { color: var(--gold); font-weight: 800; }
.stats { margin-top: 1.2cqh; display: flex; gap: 4cqw; align-items: flex-end; }
.stats > div { text-align: center; }
.stats .big { font-size: 9.5cqh; font-weight: 800; line-height: 1; color: var(--gold2); font-variant-numeric: tabular-nums; }
.stats .big.low { color: var(--low); }
.stats .sm { font-size: 2.8cqh; color: var(--muted); margin-top: .6cqh; }
#st.idle .stats, #st.leaderboard .stats { visibility: hidden; }

/* right: main content */
.mainside { position: absolute; right: 4cqw; left: 39cqw; top: 17cqh; bottom: 10cqh; z-index: 3; }
.v { position: absolute; inset: 0; display: none; flex-direction: column; }
.v.on { display: flex; animation: vin .5s ease both; }
@keyframes vin { from { opacity: 0; transform: translateY(2cqh); } to { opacity: 1; transform: none; } }
[data-v="idle"] { justify-content: center; align-items: center; text-align: center; gap: 2cqh; }
[data-v="idle"] .key { height: 20cqh; width: auto; filter: drop-shadow(0 0 3cqh rgba(224,176,119,.5)); }
.h1 { font-size: 17cqh; font-weight: 800; line-height: 1.05; background: linear-gradient(180deg, var(--gold2), var(--gold) 55%, var(--bronze)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h2 { font-size: 4.6cqh; font-weight: 600; max-width: 52cqw; line-height: 1.45; }
.h3 { font-size: 3.4cqh; color: var(--gold); letter-spacing: .14em; text-transform: uppercase; }

[data-v="q"] { gap: 2.2cqh; }
.qk { font-size: 3.6cqh; color: var(--gold); font-weight: 700; display: flex; gap: 1cqw; }
.qk .dot { color: var(--bronze); }
.qbox { flex: 0 0 22cqh; display: flex; align-items: center; }
.qt { font-size: 7.5cqh; font-weight: 800; line-height: 1.3; width: 100%; text-wrap: balance; }
.opts { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 2cqh 1.6cqw; }
.o { position: relative; overflow: hidden; display: flex; align-items: center; gap: 1.4cqw; padding: 0 1.8cqw; border-radius: 2cqh; border: .3cqh solid rgba(176,122,69,.55); background: rgba(42,30,21,.75); transition: opacity .5s, border-color .5s, background .5s; }
.o .b { position: absolute; inset-block: 0; right: 0; background: rgba(224,176,119,.16); transition: width .8s ease; }
.o .l { position: relative; flex: 0 0 auto; width: 8cqh; height: 8cqh; border-radius: 50%; display: grid; place-items: center; font-size: 4.4cqh; font-weight: 800; color: var(--esp); background: linear-gradient(180deg, var(--gold2), var(--gold)); }
.o .x { position: relative; flex: 1; min-width: 0; white-space: nowrap; font-size: 5.4cqh; font-weight: 700; line-height: 1.2; }
.o .n { position: relative; font-size: 4cqh; font-weight: 700; color: var(--gold2); font-variant-numeric: tabular-nums; }
.opts.rev .o:not(.ok) { opacity: .38; }
.opts.rev .o.ok { border-color: var(--ok); background: rgba(127,214,160,.18); box-shadow: 0 0 4cqh rgba(127,214,160,.35); }
.opts.rev .o.ok .l { background: var(--ok); }
.bar { height: 1cqh; border-radius: 1cqh; background: rgba(176,122,69,.25); overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(270deg, var(--gold2), var(--bronze)); transform-origin: right; }
.bar.low i { background: var(--low); }
#st:not(.open) .bar { visibility: hidden; }

[data-v="lb"] { align-items: stretch; gap: 1.4cqh; }
.lbh { font-size: 6.5cqh; line-height: 1.3; font-weight: 800; color: var(--gold2); }
.lbs { font-size: 3cqh; color: var(--muted); }
.lb { display: flex; flex-direction: column; gap: 1.2cqh; margin-top: .6cqh; }
.lb .r { display: flex; align-items: center; gap: 2cqw; padding: .5cqh 2cqw; border-radius: 1.6cqh; background: rgba(42,30,21,.8); border: .25cqh solid rgba(176,122,69,.45); font-size: 4cqh; line-height: 1.7; font-weight: 700; }
.lb .r.first { border-color: var(--gold2); box-shadow: 0 0 4cqh rgba(246,217,168,.3); font-size: 4.8cqh; }
.lb .p { width: 7cqh; text-align: center; } .lb .nm { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lb .c { color: var(--gold); }

/* winner: covers the main side + dims; QR stays visible */
.win { position: absolute; right: 0; top: 0; bottom: 0; left: 36cqw; z-index: 20; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.6cqh;
  background: radial-gradient(60% 70% at 50% 50%, rgba(58,42,28,.97), rgba(21,16,12,.98)); }
#st.winner .win { display: flex; animation: vin .6s ease both; }
#st.winner .mainside, #st.winner .top { visibility: hidden; }
.win .rays { position: absolute; inset: -30%; background: repeating-conic-gradient(from 0deg, rgba(246,217,168,.10) 0 6deg, transparent 6deg 18deg); animation: spin 40s linear infinite; mask: radial-gradient(closest-side, #000 20%, transparent 75%); -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 75%); }
@keyframes spin { to { transform: rotate(360deg); } }
.win > div:not(.rays) { position: relative; }
.wl { font-size: 6cqh; font-weight: 800; color: var(--gold); }
.wn { font-size: 20cqh; font-weight: 900; line-height: 1.1; white-space: nowrap; max-width: 58cqw; background: linear-gradient(180deg, #fff6e3, var(--gold2) 40%, var(--gold) 75%, var(--bronze)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 3cqh rgba(224,176,119,.45)); }
.wa { font-size: 5cqh; font-weight: 700; }
.wt { font-size: 3.4cqh; color: var(--muted); }
.wg { margin-top: 1.6cqh; font-size: 4.4cqh; font-weight: 700; color: var(--esp); background: linear-gradient(180deg, var(--gold2), var(--gold)); padding: 1cqh 3cqw; border-radius: 99px; }

.foot { position: absolute; bottom: 2.6cqh; right: 4cqw; left: 4cqw; display: flex; justify-content: space-between; align-items: center; font-size: 2.6cqh; color: var(--muted); z-index: 4; }
.foot .credit { display: flex; align-items: center; gap: .8cqw; } .foot .credit img { height: 3cqh; }
.foot .hot b { color: var(--gold); font-weight: 800; }
#st.kill .qrside .tile { visibility: hidden; }