/* Fawz «كنوز الصحراء» — Fawz identity (navy, gold, Plex Arabic + El Messiri) over a desert night. */
@font-face { font-family: "Plex Arabic"; src: url(assets/fonts/plex-ar-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url(assets/fonts/plex-ar-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url(assets/fonts/plex-ar-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Messiri"; src: url(assets/fonts/ElMessiri.ttf) format("truetype"); font-weight: 400 700; font-display: swap; }
:root {
  --navy: #0b1324; --navy-2: #13213f; --gold: #d0a046; --gold-hi: #f0c868;
  --gold-btn: linear-gradient(180deg, #ffe9a8 0%, #f0c25a 45%, #c38a2b 100%);
  --tx: #f7f1e3; --tx-2: rgba(247, 241, 227, .72); --line: rgba(240, 200, 104, .32);
  --glass: rgba(11, 19, 36, .66); --ok: #43c59e; --warn: #f0a24b; --bad: #ef6b6b;
  --font: "Plex Arabic", system-ui, sans-serif; --display: "Messiri", "Plex Arabic", serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--navy); font-family: var(--font); color: var(--tx); -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
body { overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
#app { position: fixed; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  background: url(assets/bg.webp) center bottom / cover no-repeat, var(--navy); }

/* splash */
#splash { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: radial-gradient(120% 80% at 50% 20%, #23365e 0%, var(--navy) 60%); transition: opacity .45s ease; }
#splash.out { opacity: 0; pointer-events: none; }
.splash__inner { display: grid; justify-items: center; gap: 10px; width: min(320px, 80vw); text-align: center; }
.splash__logo { width: min(180px, 44vw); filter: drop-shadow(0 10px 30px rgba(0,0,0,.4)); animation: pop .7s cubic-bezier(.2,.9,.3,1.2) both; }
.splash__name { margin: 8px 0 0; font-family: var(--display); font-size: 32px; color: var(--gold-hi); }
.splash__bar { width: 100%; height: 8px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; margin-top: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.splash__bar span { display: block; height: 100%; width: 5%; border-radius: inherit; background: var(--gold-btn); transition: width .3s ease; }
.splash__text { margin: 6px 0 0; font-size: 13px; color: var(--tx-2); min-height: 1.4em; }
.splash__foot { position: absolute; bottom: calc(18px + var(--safe-b)); font-size: 12px; color: var(--tx-2); margin: 0; }
.splash__foot b { color: var(--gold-hi); }
.splash__cta { display: inline-block; margin-top: 12px; padding: 12px 20px; border-radius: 14px; background: var(--gold-btn); color: var(--navy); font-weight: 700; text-decoration: none; }
@keyframes pop { from { transform: scale(.82) translateY(8px); opacity: 0; } }

/* layout */
.wrap { max-width: 480px; margin: 0 auto; padding: calc(10px + var(--safe-t)) 14px calc(24px + var(--safe-b)); display: grid; gap: 14px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 20px; color: var(--gold-hi); }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.iconbtn { min-width: 42px; height: 42px; padding: 0 12px; display: grid; place-items: center; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(6px); font-size: 13px; font-weight: 600; }
.iconbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chips { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.chip { padding: 6px 12px; border-radius: 99px; background: var(--glass); border: 1px solid var(--line); font-size: 13px; }
.chip b { color: var(--gold-hi); font-size: 15px; }
.card { background: var(--glass); border: 1px solid var(--line); border-radius: 18px; padding: 14px; backdrop-filter: blur(8px); }
.card h3 { margin: 0 0 10px; font-family: var(--display); font-size: 18px; color: var(--gold-hi); }
.muted { color: var(--tx-2); font-size: 13px; }
.tiny { font-size: 12px; color: var(--tx-2); }

/* the machine — concentric rings (after SlotJS, MIT) */
.machine { position: relative; width: var(--S); height: var(--S); margin: 4px auto 0; }
.machine__glow { position: absolute; inset: -6%; border-radius: 50%; background: radial-gradient(circle, rgba(240,200,104,.18) 0%, rgba(240,200,104,0) 65%); pointer-events: none; }
.ring { position: absolute; border-radius: 50%; will-change: transform;
  background: radial-gradient(circle, transparent calc(var(--inner) - 1px), rgba(19,33,63,.82) var(--inner), rgba(11,19,36,.9) 100%);
  box-shadow: inset 0 0 0 2px rgba(240,200,104,.55), 0 0 0 1px rgba(0,0,0,.4), 0 6px 24px rgba(0,0,0,.35); }
.cell { position: absolute; left: 50%; top: 50%; width: var(--cs); height: var(--cs); margin: calc(var(--cs) / -2) 0 0 calc(var(--cs) / -2); transition: opacity .35s, filter .35s; }
.cell img { width: 100%; height: 100%; display: block; border-radius: 50%; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.machine.settled .cell { opacity: .32; filter: saturate(.5); }
.machine.settled .cell.hit { opacity: 1; filter: none; }
.machine.win .cell.hit img { animation: hit 0.9s ease-in-out infinite alternate; }
@keyframes hit { from { filter: drop-shadow(0 0 2px rgba(255,220,130,.6)); } to { filter: drop-shadow(0 0 14px rgba(255,220,130,1)); } }
.hub { position: absolute; left: 50%; top: 50%; width: var(--hub); height: var(--hub); margin: calc(var(--hub) / -2) 0 0 calc(var(--hub) / -2); border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #213a6a, #0b1324 70%); box-shadow: inset 0 0 0 3px rgba(240,200,104,.8), 0 0 30px rgba(240,200,104,.25); display: grid; place-items: center; }
.hub img { width: 62%; height: auto; }
.window { position: absolute; top: 50%; height: calc(var(--cs) * 1.22); transform: translateY(-50%); border-radius: 999px; pointer-events: none;
  border: 2px solid rgba(255,225,140,.95); box-shadow: 0 0 0 4px rgba(240,200,104,.18), 0 0 24px rgba(255,210,110,.55), inset 0 0 18px rgba(255,210,110,.25); }
.machine.win .window { animation: winglow .6s ease-in-out infinite alternate; }
@keyframes winglow { to { box-shadow: 0 0 0 6px rgba(240,200,104,.3), 0 0 44px rgba(255,210,110,.95), inset 0 0 22px rgba(255,210,110,.4); } }
.machine.lose .window { border-color: rgba(255,255,255,.5); box-shadow: 0 0 0 4px rgba(255,255,255,.08); }

.spinbtn { display: block; width: min(320px, 86%); margin: 4px auto 0; padding: 16px; border: 0; border-radius: 18px; background: var(--gold-btn); color: #2a1b04; font-weight: 700; font-size: 20px; font-family: var(--display);
  box-shadow: 0 8px 0 #8a5c16, 0 14px 30px rgba(0,0,0,.4); transition: transform .08s, box-shadow .08s, filter .2s; }
.spinbtn:active { transform: translateY(4px); box-shadow: 0 4px 0 #8a5c16, 0 8px 20px rgba(0,0,0,.4); }
.spinbtn:disabled { filter: grayscale(.7) brightness(.8); }
.hint { text-align: center; min-height: 1.4em; margin: 2px 0 0; }

.result { text-align: center; padding: 12px; border-radius: 16px; font-weight: 700; font-size: 17px; }
.result--win { background: linear-gradient(180deg, rgba(240,200,104,.28), rgba(240,200,104,.1)); border: 1px solid rgba(240,200,104,.7); color: #ffe8a8; animation: pop .45s both; }
.result--lose { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: var(--tx-2); font-weight: 600; }
.result small { display: block; font-weight: 400; font-size: 12px; color: var(--tx-2); margin-top: 4px; }

.prizes { display: grid; gap: 8px; }
.prize { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.04); }
.trio { display: flex; gap: 2px; }
.trio img { width: 26px; height: 26px; border-radius: 50%; }
.prize b { font-size: 14px; }
.prize .pct { font-size: 12px; color: var(--gold-hi); direction: ltr; }
.mine { display: grid; gap: 6px; }
.mine div { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 6px 2px; border-bottom: 1px solid rgba(255,255,255,.06); }
.st { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: rgba(255,255,255,.08); white-space: nowrap; }
.st--delivered { color: var(--ok); } .st--pending_approval, .st--sending { color: var(--warn); } .st--rejected, .st--failed { color: var(--bad); }
.foot { text-align: center; font-size: 12px; color: var(--tx-2); }
.foot a, .link { color: var(--gold-hi); text-decoration: underline; background: none; border: 0; padding: 0; font-size: inherit; }

/* rules */
.rules h2 { font-family: var(--display); color: var(--gold-hi); margin: 4px 0 6px; font-size: 22px; }
.rules h4 { margin: 14px 0 4px; color: var(--gold-hi); }
.rules p, .rules li { font-size: 14px; line-height: 1.8; color: var(--tx); }
.rules ul { padding-inline-start: 20px; margin: 4px 0; }

/* admin */
.adm label { display: grid; gap: 4px; font-size: 13px; color: var(--tx-2); }
.adm input[type=number], .adm input[type=text], .adm input[type=password], .adm input[type=url] { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0,0,0,.35); color: var(--tx); font-size: 15px; }
.adm .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.adm .rw { display: grid; grid-template-columns: 34px 1fr 92px; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.adm .rw img { width: 34px; height: 34px; border-radius: 50%; }
.adm .rw .sub { grid-column: 2 / 4; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.adm .pctin { direction: ltr; text-align: center; }
.btn { padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.06); font-weight: 600; }
.btn--gold { background: var(--gold-btn); color: #2a1b04; border: 0; }
.btn--bad { color: #ffb4b4; border-color: rgba(239,107,107,.5); }
.btn--sm { padding: 8px 12px; font-size: 13px; border-radius: 10px; }
.switch { display: flex !important; grid-template-columns: none !important; align-items: center; justify-content: space-between; font-size: 15px !important; color: var(--tx) !important; }
.switch input { width: 52px; height: 30px; accent-color: var(--gold); }
.total { display: flex; justify-content: space-between; font-size: 14px; padding: 8px 0 0; }
.total.bad { color: var(--bad); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.stats div { background: rgba(255,255,255,.05); border-radius: 12px; padding: 8px 4px; }
.stats b { display: block; font-size: 20px; color: var(--gold-hi); }
.log { max-height: 320px; overflow: auto; font-size: 12px; display: grid; gap: 4px; }
.log div { padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.04); line-height: 1.6; word-break: break-word; }
.gift { display: grid; gap: 8px; padding: 10px; border-radius: 12px; background: rgba(240,200,104,.08); border: 1px dashed var(--line); }
.toast { position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translateX(-50%); z-index: 60; background: rgba(11,19,36,.95); border: 1px solid var(--line); padding: 10px 16px; border-radius: 12px; font-size: 14px; max-width: 90vw; text-align: center; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translate3d(var(--dx), 110vh, 0) rotate(720deg); } }
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } .machine.win .cell.hit img, .machine.win .window { animation: none; } }

/* admin game tabs (both games) */
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); }
.tab { padding: 10px 6px; border: 0; border-radius: 12px; background: transparent; font-weight: 600; font-size: 14px; color: var(--tx-2); }
.tab.on { background: var(--gold-btn); color: #2a1b04; }

/* ===================================================================================================================
   «عجلة فوز» — the «Movies» theme of spin-wheel (CrazyTim, MIT): white page, light-grey bar, red #c7160c / white
   segments, red marquee rim with lights (assets/wheel/movies-overlay.svg, from the same MIT repo). Fawz brand on top.
   =================================================================================================================== */
html[data-game=wheel] {
  --red: #c7160c; --red-dk: #8f0d06; --tx: #161616; --tx-2: rgba(0,0,0,.58); --line: rgba(0,0,0,.12); --glass: #fff;
  --gold-hi: #c7160c; --gold-btn: linear-gradient(180deg, #e5281d 0%, #c7160c 55%, #9e0f08 100%);
}
/* page background: a desert sunset (generated for Fawz, assets/wheel/desert-bg.webp) — the wheel itself stays «Movies» */
html[data-game=wheel], html[data-game=wheel] body { background: #2b1d3a; }
html[data-game=wheel] #app { background: url(assets/wheel/desert-bg.webp) center bottom / cover no-repeat, #2b1d3a; color: var(--tx); }
html[data-game=wheel] #splash { background: linear-gradient(180deg, rgba(20,12,36,.25), rgba(20,12,36,.05) 60%), url(assets/wheel/desert-bg.webp) center bottom / cover no-repeat, #2b1d3a; }
html[data-game=wheel] .splash__name { color: #fff; text-shadow: 0 2px 14px rgba(120,20,10,.7), 0 1px 2px rgba(0,0,0,.5); }
html[data-game=wheel] .splash__text, html[data-game=wheel] .splash__foot { color: rgba(255,255,255,.9); text-shadow: 0 1px 3px rgba(0,0,0,.55); }
html[data-game=wheel] .splash__foot b { color: #ffd98a; }
html[data-game=wheel] .splash__bar { background: rgba(255,255,255,.35); }
html[data-game=wheel] .wrap > .hint, html[data-game=wheel] .wrap > .foot { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
html[data-game=wheel] .wrap > .foot .link { color: #ffe3a1; }
html[data-game=wheel] .chip { background: rgba(255,255,255,.92); }
html[data-game=wheel] .splash__cta { color: #fff; }
html[data-game=wheel] .wrap { padding-top: 0; }
html[data-game=wheel] .topbar { margin: 0 -14px; padding: calc(10px + var(--safe-t)) 14px 10px; background: #f3f3f3; }
html[data-game=wheel] .brand { color: var(--red); }
html[data-game=wheel] .iconbtn { background: #fff; border-color: #d6d6d6; color: #222; backdrop-filter: none; }
html[data-game=wheel] .iconbtn svg { stroke: #222; }
html[data-game=wheel] .chip { border-color: transparent; }
html[data-game=wheel] .chip b { color: var(--red); }
html[data-game=wheel] .card { background: #fff; border-color: #e6e6e6; box-shadow: 0 2px 12px rgba(0,0,0,.06); backdrop-filter: none; }
html[data-game=wheel] .card h3 { color: var(--red); }
.wheelstage { display: grid; place-items: center; margin-top: 2px; }
.wheelbox { position: relative; cursor: pointer; }
.wheelbox canvas { display: block; }
html[data-game=wheel] .spinbtn { background: var(--gold-btn); color: #fff; box-shadow: 0 7px 0 var(--red-dk), 0 12px 26px rgba(199,22,12,.28); }
html[data-game=wheel] .spinbtn:active { box-shadow: 0 3px 0 var(--red-dk), 0 6px 16px rgba(199,22,12,.28); }
html[data-game=wheel] .result--win { background: #fff4f3; border-color: rgba(199,22,12,.45); color: var(--red); }
html[data-game=wheel] .result--lose { background: #f6f6f6; border-color: #e6e6e6; }
html[data-game=wheel] .prize { background: #f7f7f7; }
html[data-game=wheel] .prize .pct { color: var(--red); }
html[data-game=wheel] .trio img { width: 30px; height: 30px; }
html[data-game=wheel] .mine div { border-bottom-color: #eee; }
html[data-game=wheel] .st { background: #f0f0f0; }
html[data-game=wheel] .st--delivered { color: #13865f; } html[data-game=wheel] .st--pending_approval, html[data-game=wheel] .st--sending { color: #b35c00; }
html[data-game=wheel] .rules h2, html[data-game=wheel] .rules h4 { color: var(--red); }
html[data-game=wheel] .adm input[type=number], html[data-game=wheel] .adm input[type=text], html[data-game=wheel] .adm input[type=password], html[data-game=wheel] .adm input[type=url] { background: #fafafa; border-color: #d9d9d9; color: #111; }
html[data-game=wheel] .adm .rw { border-bottom-color: #eee; }
html[data-game=wheel] .btn { background: #f3f3f3; }
html[data-game=wheel] .btn--gold, html[data-game=wheel] .tab.on { background: var(--gold-btn); color: #fff; }
html[data-game=wheel] .stats div, html[data-game=wheel] .log div { background: #f6f6f6; }
html[data-game=wheel] .gift { background: #fff6f5; }
html[data-game=wheel] .toast { background: #222; color: #fff; border-color: #222; }