/* ============================================================
   Hayabyna — visual system
   Night plum field, one jewel colour per field, gold for reward.
   Fraunces carries numbers and questions; Figtree carries UI.
   ============================================================ */
html[lang=ar]{--display:'Cairo','Fraunces',Georgia,serif;--ui:'Cairo','Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
:root{
  --night:#000000;
  --plum:#101010;
  --glass:rgba(255,255,255,.055);
  --glass-2:rgba(255,255,255,.09);
  --edge:rgba(255,255,255,.1);
  --text:#FFFFFF;
  --mute:rgba(255,255,255,.64);
  --faint:rgba(255,255,255,.40);
  --gold:#DDCB72;
  --gold-deep:#A68E4E;
  --good:#5DD39E;
  --bad:#FF6B6B;
  --c:#DDCB72;              /* current field colour, set per screen */

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --ui:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --pad:20px;
  --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}
html,body{height:100%;margin:0;overflow:hidden;overflow-x:clip;max-width:100vw;overscroll-behavior-x:none}
body{touch-action:pan-y}
body{
  font-family:var(--ui);color:var(--text);user-select:none;
  background:radial-gradient(110% 55% at 50% -10%, rgba(221,203,114,.12) 0%, rgba(221,203,114,0) 55%),var(--night);
  padding-top:var(--safe-t);padding-bottom:var(--safe-b);
  display:flex;flex-direction:column;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:12px}
.screen{display:none;flex:1 1 auto;flex-direction:column;min-height:0}
.screen.on{display:flex;animation:enter .32s cubic-bezier(.2,.8,.2,1)}
@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------------- HOME ---------------- */
#home{overflow-y:auto;padding:14px var(--pad) 28px}
.brand{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.wordmark[data-home]{cursor:pointer}
.wordmark{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.025em;margin:0;
  font-variation-settings:"opsz" 144}
.wordmark .logoImg{height:48px;width:auto;display:block}
@media(max-width:480px){.wordmark .logoImg{height:40px}}
#home .slogan{margin:92px 18px 8px}/* V111: logo breathing room, mobile + desktop */
.med .pill{width:100%}/* V112: uniform pill widths */
.wordmark .logoDark{display:block}
.wordmark .wm{display:inline-flex;align-items:baseline;white-space:nowrap}
.wordmark .wmA{color:var(--text)}
.wordmark .wmB{color:var(--gold)}
.wordmark .logoLight{display:none}
[data-theme="light"] .wordmark .logoDark{display:none}
[data-theme="light"] .wordmark .logoLight{display:block}
.wordmark b{font-weight:800;background:linear-gradient(180deg,#EFE0A6 0%,var(--gold) 45%,var(--gold-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.langBtn{font-size:13px;color:var(--mute);padding:8px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--edge)}

/* the IQ seal — the hero */
.seal{display:flex;flex-direction:column;align-items:center;margin:8px 0 14px}

.sealRing{position:relative;width:140px;height:140px}
.sealRing svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.sealRing .track{stroke:rgba(255,255,255,.07)}
.sealRing .fill{stroke:url(#goldStroke);transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1)}
.sealCore{position:absolute;inset:13px;border-radius:50%;
  background:radial-gradient(circle at 50% 30%,#161616 0%,#050505 75%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 50px -20px rgba(221,203,114,.35);
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.sealNum{font-family:var(--display);font-weight:800;font-size:46px;line-height:.9;letter-spacing:-.04em;
  font-variation-settings:"opsz" 144;font-variant-numeric:lining-nums tabular-nums;color:var(--text)}
.sealTier{font-family:var(--display);font-weight:800;font-size:22px;color:var(--gold);margin-top:6px;letter-spacing:.01em}
.seal.fresh .sealTier{font-size:44px;margin-top:0}
.sealNext{display:none}

.rowHead{display:flex;align-items:center;justify-content:space-between;margin:0 2px 14px;gap:10px}
.genTog{font:inherit;font-size:12px;font-weight:800;letter-spacing:.08em;padding:7px 13px;border-radius:999px;cursor:pointer;
  border:1.5px solid rgba(221,203,114,.6);background:transparent;color:#DDCB72;white-space:nowrap}
.genTog.on{background:#DDCB72;color:#000000;border-color:#DDCB72;box-shadow:0 0 18px rgba(221,203,114,.45)}
.med.soon{opacity:.32;pointer-events:none}
.med .soonTag{display:block;font-size:10.5px;letter-spacing:.08em;color:#DDCB72;margin-top:2px}
.rowHead h2{font-family:var(--display);font-weight:600;font-size:21px;margin:0;letter-spacing:-.01em}
.rowHead span{font-size:13px;color:var(--mute)}

/* daily puzzle card */
.daily{display:flex;align-items:center;gap:14px;padding:14px;border-radius:22px;margin:0 0 14px;
  background:rgba(221,203,114,.07);border:1px solid rgba(221,203,114,.38)}
[data-theme="light"] .daily{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-color:rgba(166,142,78,.35)}
[data-theme="light"] .siteFoot{background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:18px 18px 0 0}
[data-theme="light"] .lvBtn:not(.on){background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
[data-theme="light"] .lvNote,[data-theme="light"] .adRail .adLabel{color:#000000}
[data-theme="light"] .kind{background:rgba(255,255,255,.8);color:#A68E4E}
[data-theme="light"] .softBtn{background:rgba(255,255,255,.7);color:#000000}
[data-theme="light"] .themeBtn,[data-theme="light"] .langBtn{background:rgba(255,255,255,.7)}
.flame{flex:0 0 auto;width:62px;height:62px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 30%,#EFE0A6 0%,var(--gold) 55%,var(--gold-deep) 100%);color:#000000;
  box-shadow:0 0 28px -6px rgba(221,203,114,.8)}
.flame.cold{background:var(--glass-2);color:var(--mute);box-shadow:none}
.flame b{font-family:var(--display);font-weight:800;font-size:24px;line-height:1}
.flame span{font-size:10px;font-weight:700;margin-top:2px}
.dInfo{flex:1;min-width:0}
.dInfo h3{font-family:var(--display);font-weight:800;font-size:19px;margin:0 0 3px;letter-spacing:-.01em}
.dInfo p{font-size:13px;color:var(--mute);margin:0 0 10px;line-height:1.4}
.marks{font-size:20px;letter-spacing:2px;margin:0 0 8px}
.dBtns{display:flex;gap:8px;flex-wrap:wrap}
.dBtn{padding:10px 16px;border-radius:12px;font-size:14px;font-weight:700;color:#000000;
  background:linear-gradient(180deg,#EFE0A6 0%,var(--gold) 50%,var(--gold-deep) 100%)}
.dBtn.soft{background:var(--glass);border:1px solid var(--edge);color:var(--text)}
.shareBox{white-space:pre-line;font-size:16px;line-height:1.5;padding:14px;border-radius:14px;background:var(--glass);
  border:1px solid var(--edge);margin:0 0 16px;user-select:text;-webkit-user-select:text;text-align:center}
/* field medallions */
.fields{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 4px;margin-bottom:16px}
.med{display:flex;flex-direction:column;align-items:center;text-align:center}
.medRing{position:relative;width:54px;height:54px;transition:transform .15s ease}
.med:active .medRing{transform:scale(.93)}
.medRing > svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.medRing .track{stroke:rgba(255,255,255,.08)}
.medRing .fill{transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1)}
.medCore{position:absolute;inset:7px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--mc) 30%,#000000) 0%,#000000 78%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.medCore svg{width:20px;height:20px;overflow:visible}
.med.done .medCore{background:radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--mc) 70%,#fff) 0%,var(--mc) 55%,color-mix(in srgb,var(--mc) 60%,#000) 100%);
  box-shadow:0 0 26px -2px color-mix(in srgb,var(--mc) 70%,transparent)}
.med.done .medCore svg{stroke:#000000 !important}
.medName{font-weight:600;font-size:12px;margin-top:6px}

/* footer */
.siteFoot{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 0 4px;
  border-top:1px solid var(--edge);margin-top:4px}
.socials{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding-top:18px;max-width:330px}
.social{width:42px;height:42px;border-radius:50%;background:var(--glass);border:1px solid var(--edge);
  display:flex;align-items:center;justify-content:center;color:var(--text);text-decoration:none}
.social:active{background:var(--glass-2)}
.social svg{width:18px;height:18px}
.copy{font-size:12.5px;color:var(--faint)}

/* ---------------- PLAY CHROME ---------------- */
.topbar{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:10px var(--pad) 12px}
.iconBtn{width:40px;height:40px;border-radius:50%;background:var(--glass);border:1px solid var(--edge);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.iconBtn svg{width:18px;height:18px}
[dir="rtl"] .iconBtn.back svg{transform:scaleX(-1)}
.topTitle{flex:1;min-width:0}
.topTitle .t1{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topTitle .t2{font-size:12.5px;color:var(--mute);margin-top:1px}
.iqChip{flex:0 0 auto;position:relative;padding:7px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--edge);
  font-family:var(--display);font-weight:800;font-size:18px;font-variant-numeric:tabular-nums;
  font-variation-settings:"opsz" 72;transition:color .3s ease}
.iqChip.up{color:var(--gold)} .iqChip.down{color:var(--bad)}
.delta{position:absolute;right:8px;top:-4px;font-family:var(--display);font-weight:800;font-size:15px;opacity:0;pointer-events:none}
.delta.go{animation:rise 1s ease-out forwards}
@keyframes rise{0%{opacity:0;transform:translateY(4px)}20%{opacity:1}100%{opacity:0;transform:translateY(-22px)}}

.segs{flex:0 0 auto;display:flex;gap:4px;padding:0 var(--pad) 16px}
.seg{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.08);transition:background .3s ease}
.seg.on{background:var(--c)}
.seg.miss{background:var(--bad)}

/* relic reveal */
.stageWrap{flex:0 0 auto;display:flex;justify-content:center;padding:0 var(--pad) 18px}
.stageWrap{display:none}/* relic stage removed (Amar 2026-10-04): decorative only, quiz unaffected */
.stage{position:relative;width:212px;height:170px;border-radius:26px;overflow:hidden;
  background:#000000;box-shadow:0 24px 60px -28px color-mix(in srgb,var(--c) 60%,transparent),inset 0 0 0 1px rgba(255,255,255,.06)}
.stage > svg{position:absolute;inset:0;width:100%;height:100%}
.tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(4,1fr);gap:2px;padding:2px}
.tile{border-radius:6px;background:linear-gradient(160deg,#161616 0%,#000000 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);transition:opacity .5s ease,transform .5s cubic-bezier(.3,.7,.3,1)}
.tile.gone{opacity:0;transform:scale(.3) rotate(24deg) translateY(-10px)}
.burst{position:absolute;inset:0;pointer-events:none}
.spark{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}

/* question */
.qarea{flex:1 1 auto;overflow-y:auto;padding:0 var(--pad);display:flex;flex-direction:column;min-height:0}
.kind{align-self:flex-start;font-size:12.5px;font-weight:600;color:var(--c);padding:5px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--c) 14%,transparent);margin-bottom:12px}
.prompt{font-family:var(--display);font-weight:500;font-size:23px;line-height:1.36;margin:0;letter-spacing:-.005em;
  font-variation-settings:"opsz" 36;max-width:32ch}
.prompt .blank{display:inline-block;min-width:78px;border-bottom:2px solid var(--c);color:var(--c)}
.hintLine{font-size:14.5px;line-height:1.5;color:var(--text);margin:14px 0 0;padding:11px 13px;border-radius:12px;
  background:color-mix(in srgb,var(--gold) 12%,transparent);display:none}
.hintLine.show{display:block}
.slots{display:flex;gap:6px;margin-top:16px}
.slot{flex:1;min-height:48px;border-radius:12px;border:1.5px dashed rgba(255,255,255,.16);display:flex;align-items:center;
  justify-content:center;font-size:12.5px;color:var(--faint);text-align:center;padding:4px;line-height:1.2}
.slot.filled{border:0;background:color-mix(in srgb,var(--c) 22%,#000000);color:var(--text);font-weight:600}

.opts{margin-top:18px;padding:6px 0 8px;display:flex;flex-direction:column;gap:9px}
/* game screens: breathing room between brand header and category topbar */
#quiz .brand,#case .brand,#vault .brand{margin:0 0 60px;flex:0 0 auto}
#quiz .topbar,#case .topbar,#vault .topbar{flex:0 0 auto}
/* hint/skip row lives inside qarea now: no doubled side padding */
.qarea .note{padding:6px 0 0}
.qarea .foot{padding:12px 0 10px}
.opts.two{display:grid;grid-template-columns:1fr 1fr}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:start;padding:13px 14px;border-radius:16px;
  background:var(--glass);border:1px solid var(--edge);font-size:15.5px;line-height:1.3;font-weight:500;
  transition:background .18s ease,border-color .18s ease,transform .1s ease}
.opt:active{transform:scale(.985)}
.opt .key{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;background:rgba(255,255,255,.07);color:var(--mute)}
.opt.correct{background:color-mix(in srgb,var(--good) 20%,#000000);border-color:var(--good)}
.opt.correct .key{background:var(--good);color:#000000}
.opt.wrong{background:color-mix(in srgb,var(--bad) 18%,#000000);border-color:var(--bad);animation:shake .38s}
.opt.wrong .key{background:var(--bad);color:#000000}
.opt.dim{opacity:.35}
.opt.used{opacity:.3}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

.note{flex:0 0 auto;padding:4px var(--pad) 0;min-height:24px;font-size:14px;color:var(--mute)}
.note b{color:var(--text);font-weight:600}
.foot{flex:0 0 auto;display:flex;gap:9px;padding:10px var(--pad) 16px}
.softBtn{flex:1;padding:14px 10px;border-radius:16px;background:var(--glass);border:1px solid var(--edge);
  font-size:14.5px;font-weight:600;color:var(--mute);display:flex;align-items:center;justify-content:center;gap:7px}
.softBtn[disabled]{opacity:.35}
.adPill{font-size:10.5px;font-weight:700;color:#000000;background:var(--gold);border-radius:999px;padding:2px 6px}
.goBtn{flex:1.4;padding:15px 12px;border-radius:16px;font-size:16px;font-weight:700;color:#000000;display:none;
  background:linear-gradient(180deg,#EFE0A6 0%,var(--gold) 50%,var(--gold-deep) 100%);
  box-shadow:0 10px 26px -10px rgba(221,203,114,.7),inset 0 1px 0 rgba(255,255,255,.5)}
.goBtn.show{display:block}

/* ---------------- CASE ---------------- */
.suspects{flex:0 0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 8px;padding:2px var(--pad) 18px}
.sus{width:58px;text-align:center;transition:opacity .45s ease}
.face{position:relative;width:54px;height:54px;border-radius:50%;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:22px;
  background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--c) 32%,#000000) 0%,#000000 80%);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 45%,transparent);transition:all .4s ease}
.sus .nm{font-size:12px;font-weight:600}
.sus .rl{font-size:10.5px;color:var(--mute);line-height:1.2}
.sus.out{opacity:.28}
.sus.out .face{filter:grayscale(1)}
.sus.out .face::after{content:"";position:absolute;inset:50% 6px auto;height:2.5px;border-radius:2px;background:var(--bad);transform:rotate(-40deg)}
.sus.pick{cursor:pointer}
.sus.pick .face{box-shadow:0 0 0 3px var(--c),0 0 24px -2px var(--c);animation:pulse 1.4s ease-in-out infinite}
.sus.guilty .face{background:var(--c);color:#000000;box-shadow:0 0 0 3px #fff,0 0 30px var(--c);animation:none}
@keyframes pulse{50%{transform:scale(1.06)}}
.clue{padding:14px 15px;border-radius:16px;background:var(--glass);border:1px solid var(--edge);
  font-size:15px;line-height:1.55;margin-bottom:16px}
.clue .from{display:block;font-size:12.5px;font-weight:700;color:var(--c);margin-bottom:6px}

.file{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:12.5px;font-variant-numeric:tabular-nums}
.fileWrap{overflow-x:auto;margin:0 0 4px}
.file th{font-weight:600;color:var(--mute);text-align:start;padding:0 6px 7px;white-space:nowrap}
.file td{padding:8px 6px;border-top:1px solid var(--edge);white-space:nowrap}
.file td:first-child{font-weight:700;color:var(--text)}
.bios{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.bios li{font-size:14px;line-height:1.5;padding:10px 12px;border-radius:12px;background:var(--glass);border:1px solid var(--edge);transition:opacity .4s ease}
.bios li b{color:var(--c);font-weight:700}
.bios li.out{opacity:.3;text-decoration:line-through;text-decoration-color:var(--bad)}
.file tr.out td{opacity:.3;text-decoration:line-through;text-decoration-color:var(--bad)}
/* ---------------- VAULT ---------------- */
.dials{flex:0 0 auto;display:flex;justify-content:center;gap:18px;padding:2px var(--pad) 18px}
.dial{text-align:center;width:70px}
.dialFace{width:62px;height:62px;border-radius:50%;margin:0 auto 7px;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(from 0deg,#161616,#000000,#161616,#000000,#161616);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.08);transition:all .45s ease}
.dialFace svg{width:24px;height:24px}
.dial.active .dialFace{box-shadow:inset 0 0 0 2px var(--c),0 0 22px -4px var(--c)}
.dial.open .dialFace{background:radial-gradient(circle at 50% 30%,#fff 0%,var(--c) 60%);box-shadow:0 0 26px -2px var(--c)}
.dial.open .dialFace svg{stroke:#000000}
.dial .lb{font-size:12px;font-weight:600;color:var(--mute)}
.dial.open .lb{color:var(--c)}
#vPrompt{white-space:pre-line}
#vPrompt.long{font-size:18px;line-height:1.5}
.code{display:flex;justify-content:center;gap:8px;margin:18px 0 0;flex-wrap:wrap}
.digit{width:48px;height:58px;border-radius:14px;background:var(--glass);border:1px solid var(--edge);
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:28px;
  font-variant-numeric:tabular-nums}
.digit.empty{color:rgba(255,255,255,.14)}
.digit.good{background:color-mix(in srgb,var(--good) 25%,#000000);border-color:var(--good)}
.digit.bad{background:color-mix(in srgb,var(--bad) 22%,#000000);border-color:var(--bad);animation:shake .38s}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto;padding:18px 0 6px}
.k{padding:15px 0;border-radius:16px;background:var(--glass);border:1px solid var(--edge);
  font-family:var(--display);font-weight:600;font-size:22px;text-align:center}
.k:active{background:var(--glass-2)}
.k.w{font-family:var(--ui);font-size:14px;font-weight:700;color:var(--mute)}

/* ---------------- SHEETS ---------------- */
.veil{position:fixed;inset:0;z-index:60;display:none;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.72)}
.veil.show{display:flex}
.sheet{width:100%;max-width:440px;padding:26px 22px calc(22px + var(--safe-b));border-radius:28px 28px 0 0;text-align:center;
  background:linear-gradient(180deg,#161616 0%,#000000 100%);box-shadow:0 -1px 0 rgba(255,255,255,.08);
  animation:up .34s cubic-bezier(.2,.8,.2,1)}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet .emb{width:96px;height:96px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--c) 60%,#fff) 0%,var(--c) 58%,color-mix(in srgb,var(--c) 55%,#000) 100%);
  box-shadow:0 0 50px -6px var(--c)}
.sheet .emb svg{width:44px;height:44px;stroke:#000000}
.sheet .emb.lost{background:var(--glass-2);box-shadow:none}
.sheet .emb.lost svg{stroke:var(--faint)}
.sheet h3{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.02em;margin:0 0 8px;
  font-variation-settings:"opsz" 96}
.sheet p{font-size:15px;line-height:1.55;color:var(--mute);margin:0 auto 22px;max-width:34ch}
.sheet .goBtn{display:block;width:100%;margin-bottom:9px}
.sheet .softBtn{width:100%}
.langList{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
/* ---- legal popup (Amar 2026-10-12): terms/privacy/etc open in-app ---- */
.legalSheet{max-width:560px;max-height:82vh;max-height:82dvh;overflow-y:auto;text-align:start;padding:20px 20px calc(20px + var(--safe-b));border-radius:20px;margin:0 12px 12px}
.legalSheet h1{font-size:22px;margin:0 0 12px;color:var(--gold,#D3A759)}
.legalSheet h2{font-size:17px;margin:18px 0 6px}
.legalSheet p,.legalSheet li{font-size:14.5px;line-height:1.65}
.legalSheet ul{padding-inline-start:20px}
.legalSheet .legalClose{position:sticky;top:0;float:inline-end;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:inherit;border-radius:999px;width:34px;height:34px;font-size:16px;cursor:pointer;margin-bottom:8px}
.langList .softBtn{color:var(--text);justify-content:space-between;padding:15px 16px}
.langList .softBtn span{color:var(--mute);font-weight:500}

.adVeil{position:fixed;inset:0;z-index:90;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:#000000;color:var(--mute);font-size:14px}
.adVeil.show{display:flex}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.1);border-top-color:var(--gold);animation:sp .9s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

@media (min-height:760px){.stage{width:240px;height:192px}.prompt{font-size:25px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.siteFoot .legal{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin:10px 0 6px;font-size:13px}
.siteFoot .legal a{color:var(--mute,#A7A3AE);text-decoration:none}

/* ---------- desktop: a centred game column, with room for two ad rails ---------- */
.adRail{display:none}
@media (min-width:900px){
  body{align-items:center}
  .screen{width:100%;max-width:560px}
}
@media (min-width:1100px) and (min-height:680px){
  .adRail{display:flex;flex-direction:column;align-items:center;gap:6px;position:fixed;top:50%;transform:translateY(-50%);z-index:1}
  .adRail.left{right:calc(50% + 280px + 28px)}
  .adRail.right{left:calc(50% + 280px + 28px)}
  .adRail .adLabel{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.35)}
  .adRail .adSlot{width:120px;height:600px}
}
/* rails stay 120x600 at all desktop widths for balance */
/* ---------- horizontal ad banners (screenshot style) ----------
   Full-width dashed placeholders: 1 under the top content, 1 above the
   footer. Always in normal flow with breathing room -- never touching
   content. Visible on all screen sizes (rails cover wide desktop). */
.adBanner{width:100%;min-height:84px;margin:14px auto;padding:18px;flex:0 0 auto;
  border:2.5px dashed color-mix(in srgb,var(--text) 35%,transparent);border-radius:16px;
  background:color-mix(in srgb,var(--text) 3%,transparent);
  display:grid;place-items:center;text-align:center}
.adBanner span{display:block;text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;font-weight:900;color:var(--mute)}
/* Hayabyna: in-content banners are mobile-only (desktop uses the side rails) */
.adBanner.hfMobile{display:grid}
@media(min-width:1100px){.adBanner.hfMobile{display:none}}
.adBanner .hfAdTag{font-size:10px;letter-spacing:.18em;color:var(--faint);text-transform:uppercase;margin-bottom:6px}
.adBanner ins.adsbygoogle{min-width:300px;min-height:90px}
.slogan{text-align:center;font-family:var(--display);font-style:italic;font-weight:800;font-size:clamp(19px,3.2vh,26px);letter-spacing:.02em;margin:4px 18px 10px;letter-spacing:.04em;background:linear-gradient(180deg,#F2E3AC 0%,#DDCB72 55%,#A68E4E 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
html[lang=ar] .slogan{font-style:normal;font-weight:700}
.adBanner small{display:block;font-size:.72rem;margin-top:4px;color:var(--mute)}
/* launch day: when Google fills the unit, the dashed placeholder frame goes away */
.adBanner:has(div>ins[data-ad-status="filled"]){border-color:transparent;background:transparent;padding:0;min-height:0}
.adBanner:has(div>ins[data-ad-status="filled"]) .hfAdTag{display:none}
@media(max-width:720px){.adBanner{min-height:76px;margin:12px auto}}
/* bottom horizontal banner above the footer (Amar 2026-10-04): every screen, every width */
.adBanner.hfBottom{margin:18px auto 6px;max-width:640px;width:min(485px,100%)}
.adBanner.hfBottom ins.adsbygoogle{min-width:0}
@media(max-width:720px){.adBanner.hfBottom{display:none}}
/* preview boxes (open the game with ?ads=preview) so you can see where the ads will sit */
.adPreview .adRail .adSlot{border:1.5px dashed rgba(221,203,114,.55);border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:rgba(221,203,114,.8);font-size:13px;text-align:center;background:rgba(221,203,114,.05)}

.langWrap{position:relative}
html[dir="rtl"] .langMenu{right:auto;left:0}
.langMenu{position:absolute;right:0;top:calc(100% + 8px);min-width:170px;padding:6px;border-radius:16px;z-index:40;
  background:#0B0B0B;border:1px solid var(--edge);box-shadow:0 18px 40px rgba(0,0,0,.45);
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .16s ease,transform .16s ease}
.langMenu.open{opacity:1;transform:none;pointer-events:auto}
.langMenu button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:11px 14px;border-radius:11px;
  font-size:15px;color:var(--text);text-align:left}
.langMenu button:hover,.langMenu button.on{background:rgba(221,203,114,.12)}
.langMenu button span{color:#DDCB72;font-weight:800}
/* ad boxes: always drawn on desktop so the reserved space is clear; a real ad placed inside replaces the label */
@media (min-width:1100px) and (min-height:680px){
  .adRail .adSlot{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);border-radius:6px;
    display:flex;align-items:center;justify-content:center;overflow:hidden}
  .adRail .adSlot:empty::after{content:"Advertisement";font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.22)}
}

/* Daily card: title and one button */
.daily .dInfo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;width:100%}
.daily .dInfo h3{margin:0}
.daily .dInfo p{flex-basis:100%;margin:0}
.daily .dInfo .marks{margin:0}
.daily .dInfo .dBtns{margin:0}

/* short screens: shrink the tile picture so every answer stays above the buttons */
@media (max-height:800px){ .stageWrap .stage{width:170px;height:136px} .stageWrap{padding-bottom:12px} }
@media (max-height:700px){ .stageWrap .stage{width:130px;height:104px} .stageWrap{padding-bottom:8px} }
@media (max-height:600px){ .stageWrap{display:none} }

/* long questions: smaller type so the answers stay close */
.prompt.long{font-size:clamp(18px,4.6vw,22px);line-height:1.35}
.prompt.xlong{font-size:clamp(16px,4.2vw,19px)}
/* short screens: compact vault so the whole keypad stays above the buttons */
/* the keypad is always visible: only a very long riddle scrolls, inside its own box */
#vArea{overflow:hidden;display:flex;flex-direction:column;min-height:0}
#vArea > *{flex-shrink:0}
#vArea #vPrompt{flex:1 1 auto;min-height:4.5em;overflow-y:auto;overscroll-behavior:contain;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 18px),transparent);mask-image:linear-gradient(#000 calc(100% - 18px),transparent);padding-bottom:10px}
#vArea .pad{margin-top:8px}
@media (max-height:800px){
  #vault .dials{transform:scale(.8);transform-origin:top center;margin-bottom:-14px}
  #vault .prompt{font-size:16px;line-height:1.4}
  #vault .digit{width:40px;height:46px;font-size:22px}
  #vault .pad{gap:6px;padding:10px 0 4px}
  #vault .k{padding:9px 0;font-size:18px}
}
@media (max-height:680px){
  #vault .dials{transform:scale(.66);margin-bottom:-26px}
  #vault .prompt{font-size:15px}
  #vault .k{padding:7px 0}
}
/* short screens: long questions get the space the tile picture used */
@media (max-height:820px){ #quiz.longQ .stageWrap{display:none} }
/* short screens with many suspects: smaller avatars, no job titles */
@media (max-height:820px){
  #suspects .sus{width:46px}
  #suspects .face{width:42px;height:42px;font-size:18px;margin-bottom:4px}
  #suspects .sus .rl{display:none}
  #suspects{gap:6px 6px;padding-bottom:10px}
}
/* narrow phones: the suspect file fits the screen, every column visible */
@media (max-width:400px){
  .file{font-size:11px;letter-spacing:-.01em}
  .file th,.file td{padding-left:3px;padding-right:3px}
}
@media (max-width:340px){ .file{font-size:10px} .file th,.file td{padding-left:2px;padding-right:2px} }
/* home: nothing gets squeezed — the footer keeps its full height and the screen scrolls instead */
#home > *{flex-shrink:0}
/* case and quiz areas scroll; their parts never get squeezed (the suspect file must stay whole) */
#cArea > *, #qArea > *{flex-shrink:0}
/* ---------- top buttons + level switch ---------- */
.topBtns{display:flex;align-items:center;gap:8px}
.themeBtn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--glass);border:1px solid var(--edge);cursor:pointer}
.themeBtn svg{width:19px;height:19px;fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.levelSw{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 2px 6px}
.lvBtn{font:inherit;font-size:15px;font-weight:700;letter-spacing:.01em;padding:13px 10px;border-radius:999px;cursor:pointer;
  background:var(--glass);color:var(--mute);border:1.5px solid var(--edge);transition:all .25s ease}
.lvBtn.on{background:linear-gradient(180deg,#EFE0A6 0%,var(--gold) 50%,var(--gold-deep) 100%);color:#000000;border-color:transparent;
  box-shadow:0 0 22px -4px color-mix(in srgb,var(--gold) 70%,transparent)}
.lvBtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lvNote{text-align:center;font-size:12.5px;color:var(--mute);margin:0 0 14px}
/* ---------- LIGHT THEME ---------- */
[data-theme="light"]{--night:#FFFFFF;--plum:#F4F4F4;--glass:rgba(0,0,0,.045);--glass-2:rgba(0,0,0,.08);--edge:rgba(0,0,0,.12);--text:#000000;--mute:rgba(0,0,0,.64);--faint:rgba(0,0,0,.40);--gold:#DDCB72;--gold-deep:#A68E4E;--good:#169A62;--bad:#D23F3F;color-scheme:light}
[data-theme="light"] body{background:radial-gradient(110% 55% at 50% -10%, rgba(221,203,114,.16) 0%, rgba(221,203,114,0) 55%),var(--night)}
[data-theme="light"] body.noBgImg{background:radial-gradient(110% 55% at 50% -10%, rgba(221,203,114,.16) 0%, rgba(221,203,114,0) 55%),var(--night)}
[data-theme="light"] .sealCore{background:radial-gradient(circle at 50% 30%,#FFFFFF 0%,#F5F5F5 75%);box-shadow:inset 0 1px 0 #fff,0 20px 50px -20px rgba(166,142,78,.35)}
[data-theme="light"] .sealRing .track{stroke:rgba(0,0,0,.1)}
[data-theme="light"] .medCore{background:radial-gradient(circle at 50% 28%,#FFFFFF 0%,#F5F5F5 78%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
[data-theme="light"] .med.done .medCore{background:radial-gradient(circle at 50% 28%,#EFE3B4 0%,#DDCB72 55%,#A68E4E 100%)}
[data-theme="light"] .med.done .medCore svg{stroke:#000000 !important}
[data-theme="light"] .med .soonTag,[data-theme="light"] .sealNext.show,[data-theme="light"] .svLbl,[data-theme="light"] .svTier,
[data-theme="light"] .svBest span,[data-theme="light"] .svCatTop span,[data-theme="light"] .langMenu button span{color:#A68E4E}
[data-theme="light"] .stage{background:#EDEDED;box-shadow:0 24px 50px -30px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.08)}
[data-theme="light"] .tile{background:linear-gradient(160deg,#FFFFFF 0%,#F2F2F2 100%)}
[data-theme="light"] .slot.filled{background:color-mix(in srgb,var(--c) 30%,#FFFFFF)}
[data-theme="light"] .opt{background:#FFFFFF;box-shadow:0 1px 0 rgba(0,0,0,.06)}
[data-theme="light"] .opt.correct{background:color-mix(in srgb,var(--good) 16%,#FFFFFF)}
[data-theme="light"] .opt.correct .key{color:#FFFFFF}
[data-theme="light"] .opt.wrong{background:color-mix(in srgb,var(--bad) 14%,#FFFFFF)}
[data-theme="light"] .opt.wrong .key{color:#FFFFFF}
[data-theme="light"] .face{background:radial-gradient(circle at 50% 30%,#FFFFFF 0%,#F5F5F5 80%)}
[data-theme="light"] .sus.guilty .face{background:var(--c);color:#000000}
[data-theme="light"] .dialFace{background:conic-gradient(from 0deg,#FFFFFF,#F0F0F0,#FFFFFF,#F0F0F0,#FFFFFF)}
[data-theme="light"] .digit{background:#FFFFFF}
[data-theme="light"] .digit.good{background:color-mix(in srgb,var(--good) 18%,#FFFFFF)}
[data-theme="light"] .digit.bad{background:color-mix(in srgb,var(--bad) 16%,#FFFFFF)}
[data-theme="light"] .k{background:#FFFFFF}
[data-theme="light"] .sheet{background:linear-gradient(180deg,#FFFFFF 0%,#F5F5F5 100%);box-shadow:0 -10px 40px rgba(0,0,0,.18)}

[data-theme="light"] .langMenu{background:#FFFFFF;box-shadow:0 18px 40px rgba(0,0,0,.18)}
[data-theme="light"] .scoreView{background:linear-gradient(180deg,#FFFFFF,#F5F5F5 70%)}
[data-theme="light"] .svName input{background:#FFFFFF}
[data-theme="light"] .svBar{background:rgba(0,0,0,.08)}
[data-theme="light"] .file td{border-top-color:rgba(0,0,0,.1)}
[data-theme="light"] .adRail .adSlot{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.12)}
[data-theme="light"] .adRail .adLabel{color:rgba(0,0,0,.45)}
[data-theme="light"] .wordmark b{background:linear-gradient(180deg,#DDCB72 0%,#A68E4E 55%,#8A7440 100%);-webkit-background-clip:text;background-clip:text}
/* ---------- DESKTOP: fluid sizing — the home screen fills the window, no scrolling ---------- */
.sealTier{white-space:nowrap}
@media (min-width:1100px){
  #home{padding-top:1vh;padding-bottom:1vh}
  #home::before,#home::after{content:"";flex:1 1 0;min-height:0}
  .brand{margin-bottom:0}
  .seal{margin:.6vh 0 2vh}
  .sealRing{width:clamp(60px,12vh,170px);height:clamp(60px,12vh,170px)}
  .sealCore{inset:clamp(7px,1.35vh,19px)}
  .sealNum{font-size:clamp(22px,5.2vh,72px)}
  .sealTier{font-size:clamp(11px,1.4vh,18px);margin-top:.3vh}
  #seal.fresh .sealTier{font-size:clamp(12px,2.7vh,36px)}
  .sealNext.show{font-size:clamp(12px,1.3vh,16px);margin-top:.6vh}
  .daily{padding:clamp(6px,1.35vh,18px) 16px;margin:0 0 clamp(6px,2.1vh,28px);border-radius:18px}
  .dInfo b,.dInfo h3,.dInfo strong{font-size:clamp(15px,1.9vh,24px)}
  .dBtn{padding:clamp(7px,1vh,13px) clamp(12px,1.3vh,20px);font-size:clamp(13px,1.35vh,17px)}
  .levelSw{margin-bottom:.5vh}
  .lvBtn{padding:clamp(6px,1.15vh,15px) 10px;font-size:clamp(13px,1.4vh,18px)}
  .lvNote{margin:0 0 clamp(4px,1.9vh,26px);font-size:clamp(11px,1.15vh,14px)}
  .fields{grid-template-columns:repeat(4,1fr);gap:clamp(3px,2.3vh,38px) 4px;margin-bottom:clamp(6px,2.1vh,28px)}
  .medRing{width:clamp(44px,6.5vh,64px);height:clamp(44px,6.5vh,64px)}
  .medCore{inset:clamp(6px,1.15vh,14px)}
  .medCore svg{width:clamp(18px,2.6vh,30px);height:clamp(18px,2.6vh,30px)}
  .medName{font-size:clamp(11.5px,1.45vh,18px);margin-top:clamp(2px,.9vh,12px)}
  .adBanner{min-height:clamp(64px,9vh,100px);margin:1.2vh auto}
  .siteFoot{gap:.6vh 8px;padding:clamp(6px,1.1vh,14px) 0 2px;flex-direction:row;flex-wrap:wrap;justify-content:center}
  .socials{padding-top:0;gap:8px;max-width:none}
  .social{width:clamp(28px,3.5vh,44px);height:clamp(28px,3.5vh,44px)}
  .social svg{width:clamp(13px,1.6vh,19px);height:clamp(13px,1.6vh,19px)}
  .siteFoot .legal{width:100%;margin:0;font-size:clamp(12px,1.25vh,15px);gap:4px 14px}
  .copy{width:100%;text-align:center;font-size:clamp(11px,1.05vh,13px)}
}
/* desktop home: no scrolling with the bottom banner (Amar 2026-10-04) -
   tighten the vertical rhythm so everything + banner + footer fits the window */
@media (min-width:1100px){
  .adBanner.hfBottom{padding:6px;margin:10px auto 4px}
  #home .fields{margin-bottom:clamp(4px,1.4vh,20px)}
  #home .daily{margin:0 0 clamp(4px,1.4vh,20px)}
  #home .seal{margin:.4vh 0 1.4vh}
  #home .lvNote{margin:0 0 clamp(2px,1vh,16px)}
  #home .levelSw{margin-bottom:.3vh}
  #home .slogan{margin:92px 18px 8px}
}
@media (min-width:1100px) and (max-height:700px){
  .lvNote{display:none}
  .seal{margin-bottom:1.2vh}
  .fields{gap:2px 4px;margin-bottom:4px}
  .medName{margin-top:1px}
  .daily{margin-bottom:1.2vh}
  .siteFoot{padding-top:4px}
  .sealTier{display:none}
  #seal.fresh .sealTier{display:block}
}
/* very short screens (e.g. 320×568): tightest vault */
@media (max-height:600px){
  #vault .dials{transform:scale(.55);margin-bottom:-34px}
  #vault .digit{width:34px;height:38px;font-size:19px}
  #vault .k{padding:5px 0;font-size:16px}
  #vault .pad{gap:5px;padding:6px 0 2px}
  #vArea #vPrompt{min-height:3.2em;font-size:14px}
}
/* the smallest phones: circles shrink to fit three across */
@media (max-width:350px){
  .medRing{width:84px;height:84px}
  .medCore{inset:11px}
  .medCore svg{width:30px;height:30px}
  .fields{gap:22px 2px}
}

/* ---------- IQ seal button ---------- */
#seal{cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none}
#seal:focus-visible .sealRing{box-shadow:0 0 0 3px rgba(221,203,114,.5);border-radius:50%}
#seal:active .sealRing{transform:scale(.97)}
#seal .sealTier{letter-spacing:.02em}
#seal.fresh .sealTier{font-size:30px;font-style:italic}
#seal.fresh .sealRing{animation:sealPulse 2.6s ease-in-out infinite}
@keyframes sealPulse{0%,100%{filter:drop-shadow(0 0 0 rgba(221,203,114,0))}50%{filter:drop-shadow(0 0 18px rgba(221,203,114,.45))}}
.sealNext.show{display:block;color:#DDCB72;font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;animation:dareIn .5s ease both}
@keyframes dareIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* ---------- IQ report ---------- */
.scoreView{position:fixed;inset:0;z-index:70;overflow-y:auto;background:linear-gradient(180deg,#101010,#000000 70%);
  opacity:0;pointer-events:none;transition:opacity .22s ease;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
.scoreView.show{opacity:1;pointer-events:auto}
.svIn{max-width:560px;margin:0 auto;padding:10px 18px 40px}
.svTop{display:flex;justify-content:flex-end}
.iconBtn{width:40px;height:40px;border-radius:50%;background:var(--glass);border:1px solid var(--edge);color:var(--text);font-size:16px}
.svHero{text-align:center;margin:-6px 0 18px}
.svLbl{font-family:var(--display);font-style:italic;color:#DDCB72;font-size:22px}
.svNum{font-family:var(--display);font-weight:800;font-size:92px;line-height:1;letter-spacing:-.02em}
.svTier{font-family:var(--display);font-style:italic;color:#DDCB72;font-size:20px;margin-top:4px}
.svTiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.svTiles div{background:var(--glass);border:1px solid var(--edge);border-radius:16px;padding:12px 6px;text-align:center}
.svTiles b{display:block;font-size:22px}
.svTiles span{font-size:11.5px;color:var(--mute)}
.svBest{border:1px solid rgba(221,203,114,.45);background:linear-gradient(135deg,rgba(221,203,114,.14),rgba(221,203,114,.03));border-radius:18px;padding:14px 16px;margin-bottom:6px;display:grid;gap:2px}
.svBest span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#DDCB72;font-weight:700}
.svBest b{font-family:var(--display);font-size:24px}
.svBest em{font-style:normal;color:var(--mute);font-size:13.5px}
.svH{font-family:var(--display);font-size:20px;margin:22px 0 10px}
.svCats{display:grid;gap:10px}
.svCat{background:var(--glass);border:1px solid var(--edge);border-radius:14px;padding:11px 13px}
.svCat.none{opacity:.5}
.svCatTop{display:flex;justify-content:space-between;font-size:15px}
.svCatTop span{color:#DDCB72;font-weight:800}
.svBar{height:7px;border-radius:4px;background:rgba(255,255,255,.08);margin:8px 0 6px;overflow:hidden}
.svBar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#A68E4E,#DDCB72)}
.svCatSub{font-size:12px;color:var(--mute)}
.svDuo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.svDuo div{background:var(--glass);border:1px solid var(--edge);border-radius:14px;padding:11px 13px}
.svDuo b{display:block;font-size:15px;margin-bottom:3px}
.svDuo span{font-size:12px;color:var(--mute)}
.svName{display:grid;gap:6px;margin-bottom:12px}
.svName span{font-size:13px;color:var(--mute)}
.svName input{font:inherit;font-size:16px;padding:12px 14px;border-radius:12px;background:#0A0A0A;border:1px solid var(--edge);color:var(--text)}
.svName input:focus{outline:none;border-color:#DDCB72}
.svCard img{width:100%;border-radius:16px;display:block;box-shadow:0 20px 50px -20px rgba(0,0,0,.7)}
.svBtns{display:grid;grid-template-columns:2fr 1fr;gap:10px;margin-top:14px}
.svBtns .goBtn{opacity:1;transform:none;pointer-events:auto}
.svMsg{font-size:13px;color:var(--mute);text-align:center;min-height:18px;margin-top:10px}
@media (max-width:380px){.svTiles{grid-template-columns:repeat(2,1fr)} .svNum{font-size:76px}}

/* header breathing room (Amar 2026-10-04): logo + AR + theme sit lower —
   home header now matches the category headers at every width. */
#home .brand,#quiz .brand,#case .brand,#vault .brand{padding-top:calc(var(--safe-t,0px) + 20px);padding-left:var(--pad);padding-right:var(--pad)}
/* home header measures exactly like the category headers (Amar 2026-10-04):
   categories sit 20px from the top, but home added its own top padding plus a
   flex spacer that pushed the header down. Both are neutralized. */
#home{padding-top:0}
/* top spacer re-enabled (Amar 2026-10-04): balances content vertically for all languages */
#home::before{display:flex}
/* ---------- GAME SCREENS: balanced vertical layout (matches home) ----------
   Header sits lower with breathing room, the question block is centred in the
   free space, the footer sits at the bottom. Spacers collapse to zero when
   content is tall, so long questions still scroll normally. (Amar 2026-10-12:
   ported from iQfully — this block was missing, quiz content stuck to top) */
#quiz,#case,#vault{padding-top:clamp(18px,9vh,120px)}
#quiz .brand,#case .brand,#vault .brand{margin-bottom:clamp(14px,4vh,48px)}
.qarea::before,.qarea::after{content:"";flex:1 1 0;min-height:0}
.qarea::after{flex-grow:1.15}
/* case + vault are taller (keypad / suspects): smaller header lift so nothing scrolls */
#case,#vault{padding-top:clamp(0px,1.5vh,20px)}
/* EU cookie consent (AdSense) */
.cookieBar{position:fixed;left:12px;right:12px;bottom:calc(var(--safe-b,0px) + 12px);z-index:300;
  max-width:560px;margin:0 auto;padding:14px 16px;border-radius:18px;
  background:var(--glass-2);border:1px solid var(--edge);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 18px 50px -18px rgba(0,0,0,.5);
  transform:translateY(16px);opacity:0;pointer-events:none;transition:transform .3s ease,opacity .3s ease}
.cookieBar.show{transform:none;opacity:1;pointer-events:auto}
.ckMsg{margin:0 0 10px;font-size:13.5px;line-height:1.55;color:var(--text)}
.ckRow{display:flex;align-items:center;gap:8px}
.ckSp{flex:1}
.ckMore{font-size:13px;font-weight:700;color:var(--gold-deep,#A68E4E);text-decoration:underline}
.ckBtn{font:inherit;font-size:14px;font-weight:800;padding:10px 18px;border-radius:999px;cursor:pointer;border:1px solid var(--edge)}
.ckNo{background:transparent;color:var(--mute)}
.ckOk{background:linear-gradient(180deg,#EFE0A6 0%,var(--gold) 50%,var(--gold-deep) 100%);color:#000000;border:0}
@media (min-width:900px){.cookieBar{left:50%;right:auto;transform:translate(-50%,16px);width:min(560px,92vw)}
.cookieBar.show{transform:translate(-50%,0)}}

/* ============================================================
   HAYABYNA "GOLDEN HOUR" — feminine redesign (Haya 2026-10-11)
   She loves the yellow: it stays the hero. Blush rose joins it.
   Light "golden cream" theme is now the star; dark theme goes
   warm cocoa-plum. Bubbly Baloo 2 type, soft 3D cards, sparkles.
   Design layer only — every selector, id and JS hook untouched.
   ============================================================ */

/* ---------- A. tokens ---------- */
:root{
  --night:#1D1424;                 /* warm cocoa-plum night (was pure black) */
  --plum:#261C30;
  --glass:rgba(255,255,255,.065);
  --glass-2:rgba(255,255,255,.11);
  --edge:rgba(255,255,255,.13);
  --text:#FFF8F1;
  --mute:rgba(255,248,241,.66);
  --faint:rgba(255,248,241,.42);
  --gold:#EFC85F;                  /* sunny yellow — her favourite */
  --gold-deep:#C08A24;
  --blush:#F6A9C9;                 /* NEW: feminine rose */
  --blush-deep:#E87BA8;
  --cream:#FFF6E9;
  --cocoa:#4A3423;
  --c:#EFC85F;
  --fun:'Baloo 2','Cairo',var(--ui);
}
html[lang=ar]{--fun:'Cairo','Baloo 2',var(--ui)}

/* light theme: the golden-hour star */
[data-theme="light"]{
  --night:#FFF7EC;
  --plum:#FFEFD7;
  --glass:rgba(255,255,255,.72);
  --glass-2:rgba(255,255,255,.94);
  --edge:rgba(176,130,50,.22);
  --text:#1c1c1e;
  --mute:rgba(28,28,30,.66);
  --faint:rgba(28,28,30,.42);
  --gold:#DFA92F;
  --gold-deep:#A87B1F;
  --blush:#EE8FB4;
  --blush-deep:#D9638F;
  --c:#DFA92F;
  color-scheme:light;
}

/* ---------- B. base: warm glow, floating blossoms, sparkles ---------- */
body{
  background:
    radial-gradient(120% 60% at 50% -10%, color-mix(in srgb,var(--gold) 14%,transparent) 0%, transparent 55%),
    var(--night);
}
body::before{ /* soft blush + honey blossoms */
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(360px 360px at 88% -70px, color-mix(in srgb,var(--blush) 20%,transparent), transparent 70%),
    radial-gradient(440px 440px at -90px 108%, color-mix(in srgb,var(--gold) 16%,transparent), transparent 70%),
    radial-gradient(280px 280px at 108% 78%, color-mix(in srgb,var(--blush-deep) 10%,transparent), transparent 70%);
}
body::after{ /* twinkling sugar sparkles */
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background-image:
    radial-gradient(2.6px 2.6px at 12% 16%, color-mix(in srgb,var(--gold) 85%,transparent), transparent 62%),
    radial-gradient(2.1px 2.1px at 79% 10%, color-mix(in srgb,var(--blush) 85%,transparent), transparent 62%),
    radial-gradient(3px 3px at 89% 44%, color-mix(in srgb,var(--gold) 65%,transparent), transparent 62%),
    radial-gradient(2.1px 2.1px at 7% 60%, color-mix(in srgb,var(--blush) 75%,transparent), transparent 62%),
    radial-gradient(2.6px 2.6px at 30% 84%, color-mix(in srgb,var(--gold) 60%,transparent), transparent 62%),
    radial-gradient(2.1px 2.1px at 66% 74%, color-mix(in srgb,var(--blush) 65%,transparent), transparent 62%),
    radial-gradient(1.8px 1.8px at 48% 32%, color-mix(in srgb,var(--gold) 70%,transparent), transparent 62%);
  animation:twinkle 4.5s ease-in-out infinite;
}
@keyframes twinkle{50%{opacity:.22}}
body>*{position:relative;z-index:1}
::selection{background:color-mix(in srgb,var(--blush) 55%,transparent)}

/* ---------- C. bubbly type for headings + buttons ---------- */
.rowHead h2,.dInfo h3,.sheet h3,.svH,.topTitle .t1,
.sealNum,.svNum,.digit,.k,.dBtn,.goBtn,.lvBtn,.softBtn,.ckBtn,
.medName,.sus .nm,.svTiles b,.svBest b,.genTog,.svLbl,.svTier{
  font-family:var(--fun);
}
.sheet h3{letter-spacing:.005em}
.prompt{letter-spacing:-.002em} /* questions stay elegant Fraunces */

/* ---------- D. home ---------- */
.seal{animation:none}
@keyframes floaty{50%{transform:translateY(-7px)}}
.sealNum{font-weight:800}
.sealCore{
  background:radial-gradient(circle at 50% 28%, color-mix(in srgb,var(--gold) 26%,var(--night)) 0%, var(--night) 78%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),
    0 22px 55px -18px color-mix(in srgb,var(--gold) 55%,transparent),
    0 0 0 6px color-mix(in srgb,var(--blush) 12%,transparent);
}
.sealTier{
  background:linear-gradient(100deg,var(--gold) 20%,var(--blush-deep) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
[data-theme="light"] .sealCore{
  background:radial-gradient(circle at 50% 28%,#FFFFFF 0%,var(--cream) 80%);
  box-shadow:inset 0 2px 0 #fff,
    0 22px 55px -18px color-mix(in srgb,var(--gold-deep) 45%,transparent),
    0 0 0 6px color-mix(in srgb,var(--blush) 18%,transparent);
}
[data-theme="light"] .sealRing .track{stroke:rgba(168,123,31,.14)}

.slogan{
  background:linear-gradient(100deg,var(--gold) 15%,var(--blush-deep) 85%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:clamp(18px,3vh,24px);
}

.daily{
  border-radius:24px;
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--gold) 10%,var(--night)),
    color-mix(in srgb,var(--blush) 6%,var(--night)));
  border:1.5px solid color-mix(in srgb,var(--gold) 45%,transparent);
  box-shadow:0 18px 40px -22px color-mix(in srgb,var(--gold-deep) 60%,transparent);
}
[data-theme="light"] .daily{
  background:linear-gradient(160deg,#FFFFFF,#FFF9EF);
  border-color:color-mix(in srgb,var(--gold) 55%,transparent);
  box-shadow:0 18px 40px -20px color-mix(in srgb,var(--gold-deep) 40%,transparent);
}
.flame{
  background:radial-gradient(circle at 50% 30%,#F9E3A4 0%,var(--gold) 55%,var(--gold-deep) 100%);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--blush) 28%,transparent),
    0 0 30px -4px color-mix(in srgb,var(--gold) 85%,transparent);
}
.dBtn{
  border-radius:16px;font-weight:800;
  background:linear-gradient(180deg,#F8DE8E 0%,var(--gold) 52%,var(--gold-deep) 100%);
  box-shadow:0 12px 26px -12px color-mix(in srgb,var(--gold-deep) 80%,transparent),
    inset 0 1px 0 rgba(255,255,255,.55);
}
.dBtn:active{transform:scale(.94)}
.dBtn.soft{
  background:var(--glass);border:1.5px solid var(--edge);color:var(--text);
  box-shadow:none;font-weight:700;
}

.genTog{border:1.5px solid color-mix(in srgb,var(--gold) 65%,transparent);color:var(--gold);font-weight:800}
.genTog.on{
  background:linear-gradient(180deg,#F8DE8E 0%,var(--gold) 55%,var(--gold-deep) 100%);
  color:#3A2A10;border-color:transparent;
  box-shadow:0 0 20px color-mix(in srgb,var(--gold) 50%,transparent);
}
.lvBtn{border-radius:999px;font-weight:800}
.lvBtn.on{
  background:linear-gradient(180deg,#F8DE8E 0%,var(--gold) 55%,var(--gold-deep) 100%);
  color:#3A2A10;border-color:transparent;
  box-shadow:0 8px 24px -8px color-mix(in srgb,var(--gold-deep) 75%,transparent);
}
[data-theme="light"] .lvBtn:not(.on){background:rgba(255,255,255,.85);color:var(--mute)}

.medCore{
  background:radial-gradient(circle at 50% 28%,
    color-mix(in srgb,var(--mc) 34%,var(--night)) 0%, var(--night) 80%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),
    0 8px 18px -10px color-mix(in srgb,var(--mc) 60%,transparent);
}
.med.done .medCore{
  background:radial-gradient(circle at 50% 28%,#FCEFC4 0%,var(--gold) 55%,var(--gold-deep) 100%);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--blush) 30%,transparent),
    0 0 28px -2px color-mix(in srgb,var(--gold) 80%,transparent);
}
.med.done .medCore svg{stroke:#3A2A10 !important}
.medName{font-weight:700}
[data-theme="light"] .medCore{
  background:radial-gradient(circle at 50% 28%,#FFFFFF 0%,var(--cream) 82%);
  box-shadow:inset 0 0 0 1px rgba(168,123,31,.14),0 8px 18px -12px rgba(168,123,31,.4);
}
[data-theme="light"] .med.done .medCore{
  background:radial-gradient(circle at 50% 28%,#FCEFC4 0%,var(--gold) 55%,var(--gold-deep) 100%);
}
[data-theme="light"] .med.done .medCore svg{stroke:#3A2A10 !important}

.social{transition:transform .15s ease}
.social:active{transform:scale(.9)}
.siteFoot{border-top:1.5px solid var(--edge)}
.copy{font-weight:600}

/* ---------- E. play chrome + questions ---------- */
.iconBtn{transition:transform .15s ease}
.iconBtn:active{transform:scale(.9)}
.iqChip{font-family:var(--fun)}
.seg{border-radius:3px}
.seg.on{background:linear-gradient(90deg,var(--gold),var(--blush))}
.kind{
  font-family:var(--fun);font-weight:700;
  background:linear-gradient(120deg,
    color-mix(in srgb,var(--gold) 24%,transparent),
    color-mix(in srgb,var(--blush) 24%,transparent));
  color:var(--gold-deep);
  border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);
}
[data-theme="light"] .kind{color:#8A6414}
/* V116 (Amar): quiz type pill strictly black/white per theme - bulletproof */
.kind,html[data-theme="dark"] .kind{background:#0b0b0d !important;color:#fff !important;border:1px solid rgba(255,255,255,.25) !important}
[data-theme="light"] .kind{background:#ffffff !important;color:#111111 !important;border:1px solid rgba(0,0,0,.16) !important}
/* V119 (Amar): Next button strictly black/white per theme */
html[data-theme="dark"] .goBtn{background:#0b0b0d !important;color:#fff !important;border:1px solid rgba(255,255,255,.25) !important;box-shadow:none !important;animation:none !important}
[data-theme="light"] .goBtn{background:#ffffff !important;color:#111111 !important;border:1px solid rgba(0,0,0,.16) !important;box-shadow:none !important}
/* V120 (Amar): the run-alive sheet goes yellow/orange - Haya's favourite */
.sheet{background:linear-gradient(180deg,#FFC53D 0%,#FF9E1B 60%,#F5850B 100%) !important}
[data-theme="light"] .sheet{background:linear-gradient(180deg,#FFC53D 0%,#FF9E1B 60%,#F5850B 100%) !important}
.hintLine{
  border-radius:14px;font-weight:600;
  background:linear-gradient(120deg,
    color-mix(in srgb,var(--gold) 16%,transparent),
    color-mix(in srgb,var(--blush) 14%,transparent));
  border:1px solid color-mix(in srgb,var(--gold) 35%,transparent);
}
.opt{
  border-radius:18px;font-weight:600;
  background:color-mix(in srgb,var(--glass) 80%,var(--night));
  border:1.5px solid var(--edge);
  box-shadow:0 8px 20px -14px rgba(0,0,0,.5);
  transition:transform .12s ease,box-shadow .2s ease,background .18s ease,border-color .18s ease;
}
.opt:active{transform:scale(.97)}
.opt .key{
  font-family:var(--fun);
  background:color-mix(in srgb,var(--gold) 26%,transparent);
  color:var(--gold-deep);
}
[data-theme="light"] .opt{
  background:#FFFFFF;border-color:rgba(176,130,50,.16);
  box-shadow:0 10px 24px -16px color-mix(in srgb,var(--gold-deep) 55%,transparent);
}
[data-theme="light"] .opt .key{color:#8A6414}
.opt.correct{animation:happy .55s cubic-bezier(.2,.9,.3,1.4)}
@keyframes happy{0%{transform:scale(1)}35%{transform:scale(1.045) rotate(-.6deg)}70%{transform:scale(.99) rotate(.6deg)}100%{transform:scale(1)}}
.opt.correct .key{background:var(--good);color:#06351F}
.opt.wrong .key{background:var(--bad);color:#4A0E0E}
.slot{border-radius:14px}
.slot.filled{border-radius:14px;font-weight:700}
.softBtn{border-radius:18px;font-weight:700}
.softBtn:active{transform:scale(.96)}
.goBtn{
  border-radius:18px;
  background:linear-gradient(180deg,#F8DE8E 0%,var(--gold) 52%,var(--gold-deep) 100%);
  color:#3A2A10;
  box-shadow:0 12px 28px -12px color-mix(in srgb,var(--gold-deep) 80%,transparent),
    inset 0 1px 0 rgba(255,255,255,.55);
}
.goBtn:active{transform:scale(.96)}
.note{font-weight:500}

/* ---------- F. case ---------- */
.face{
  background:radial-gradient(circle at 50% 30%,
    color-mix(in srgb,var(--c) 36%,var(--night)) 0%, var(--night) 82%);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 50%,transparent),
    0 8px 18px -12px color-mix(in srgb,var(--c) 60%,transparent);
}
.sus .nm{font-weight:700}
.sus.pick .face{
  box-shadow:0 0 0 3px var(--blush),0 0 26px -2px var(--blush);
}
.sus.guilty .face{background:linear-gradient(160deg,var(--gold),var(--blush-deep));color:#3A2A10}
[data-theme="light"] .face{
  background:radial-gradient(circle at 50% 30%,#FFFFFF 0%,var(--cream) 82%);
}
.clue{border-radius:18px}
[data-theme="light"] .clue{background:#FFFFFF;border-color:rgba(176,130,50,.18)}

/* ---------- G. vault ---------- */
.dialFace{
  background:conic-gradient(from 0deg,#2E2338,#1D1424,#2E2338,#1D1424,#2E2338);
}
.dial.active .dialFace{box-shadow:inset 0 0 0 2px var(--blush),0 0 22px -4px var(--blush)}
.dial.open .dialFace{
  background:radial-gradient(circle at 50% 30%,#FFF 0%,var(--gold) 60%,var(--blush-deep) 130%);
}
.dial.open .dialFace svg{stroke:#3A2A10}
.digit{border-radius:16px;font-weight:800}
[data-theme="light"] .digit{background:#FFFFFF;border:1.5px solid rgba(176,130,50,.2)}
.k{border-radius:18px;font-weight:700;transition:transform .1s ease}
.k:active{transform:scale(.93);background:color-mix(in srgb,var(--gold) 30%,var(--glass-2))}
[data-theme="light"] .k{background:#FFFFFF;border:1.5px solid rgba(176,130,50,.2)}

/* ---------- H. sheets, report, cookie ---------- */
.sheet{
  border-radius:32px 32px 0 0;
  background:linear-gradient(180deg,#2B2036 0%,#1D1424 100%);
}
[data-theme="light"] .sheet{
  background:linear-gradient(180deg,#FFFEFB 0%,#FFF3E0 100%);
  box-shadow:0 -12px 44px rgba(168,123,31,.22);
}
.sheet .emb{
  background:radial-gradient(circle at 50% 30%,#FCEFC4 0%,var(--gold) 48%,var(--blush-deep) 115%);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--blush) 22%,transparent),
    0 0 55px -6px color-mix(in srgb,var(--gold) 70%,transparent);
}
.sheet .emb svg{stroke:#3A2A10}
.sheet .goBtn{display:block;width:100%;margin-bottom:9px}
.scoreView{background:linear-gradient(180deg,#251B2E,#160F1D 70%)}
[data-theme="light"] .scoreView{background:linear-gradient(180deg,#FFFAF1,#FFEED6 70%)}
.svLbl{
  background:linear-gradient(100deg,var(--gold-deep),var(--blush-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal;
}
.svTier{
  background:linear-gradient(100deg,var(--gold) 20%,var(--blush-deep) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal;
}
.svNum{font-weight:800}
.svTiles div{border-radius:18px}
[data-theme="light"] .svTiles div{background:#FFFFFF;border-color:rgba(176,130,50,.18)}
.svBest{
  border:1.5px solid color-mix(in srgb,var(--gold) 55%,transparent);
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--gold) 18%,transparent),
    color-mix(in srgb,var(--blush) 10%,transparent));
  border-radius:20px;
}
.svBest span{color:var(--gold-deep);font-family:var(--fun)}
.svBar{border-radius:5px}
.svBar i{background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--blush))}
.svName input{border-radius:14px}
.svName input:focus{outline:none;border-color:var(--blush)}
.cookieBar{border-radius:22px}
.ckOk{
  background:linear-gradient(180deg,#F8DE8E 0%,var(--gold) 52%,var(--gold-deep) 100%);
  color:#3A2A10;
}
.ckMore{color:var(--blush-deep);font-weight:800}
button:focus-visible{outline:2px solid var(--blush);outline-offset:3px}

/* ---------- I. ads + footer ---------- */
.adBanner{
  border-radius:20px;
  border:2.5px dashed color-mix(in srgb,var(--blush-deep) 55%,var(--gold));
  background:color-mix(in srgb,var(--blush) 6%,transparent);
}
.adBanner span{font-family:var(--fun)}
.siteFoot .legal a{font-weight:600}

/* ---------- J. language + theme buttons ---------- */
.langBtn,.themeBtn{font-weight:700;transition:transform .15s ease}
.langBtn:active,.themeBtn:active{transform:scale(.9)}
.themeBtn svg{stroke:var(--gold)}
.langMenu{border-radius:18px}
[data-theme="light"] .langMenu{background:#FFFEFB;border-color:rgba(176,130,50,.22)}
.langMenu button.on{background:color-mix(in srgb,var(--gold) 16%,transparent)}
.langMenu button span{color:var(--gold-deep);font-family:var(--fun)}

/* ---------- K. ads-off (carried from v3) ---------- */
html.ads-off .adSlot,html.ads-off .adRail,html.ads-off .adBanner{display:none!important}

/* ---------- L. dark-theme hardcoded surfaces go warm ---------- */
.stage{background:#1D1424;box-shadow:0 24px 60px -28px color-mix(in srgb,var(--c) 60%,transparent),inset 0 0 0 1px rgba(255,255,255,.07)}
.tile{background:linear-gradient(160deg,#2A2033 0%,#1D1424 100%)}
.langMenu{background:#241B2E}
.adVeil{background:#160F1D}
.svName input{background:#160F1D}

/* Golden Hour+ (Haya 2026-10-11): stronger feminine pop */
.sealRing svg{filter:drop-shadow(0 0 12px color-mix(in srgb,var(--gold) 60%,transparent))}
.daily{
  box-shadow:0 18px 40px -22px color-mix(in srgb,var(--gold-deep) 60%,transparent),
             0 0 0 5px color-mix(in srgb,var(--blush) 10%,transparent);
}
.medRing{filter:drop-shadow(0 4px 10px color-mix(in srgb,var(--mc) 35%,transparent))}
.brand .wordmark{filter:drop-shadow(0 3px 8px color-mix(in srgb,var(--gold) 35%,transparent))}

/* Haya mascot (Amar 2026-10-11): cut-out of his niece, standing right of the IQ seal */
.sealRow{display:flex;flex-direction:row;align-items:flex-end;justify-content:center;gap:8px;direction:ltr}
.mascot{height:148px;width:auto;flex:0 0 auto;transform-origin:50% 100%;
  filter:drop-shadow(0 12px 16px color-mix(in srgb,var(--cocoa,#4A3423) 28%,transparent));}
@keyframes mascotBob{50%{transform:translateY(-5px) rotate(1.4deg)}}
@media (max-width:350px){.mascot{height:112px}}
@media (min-width:1100px){.mascot{height:clamp(100px,17vh,168px)}}

/* iPhone IQ seal (Amar 2026-10-11): smaller phone, progress runs round the rounded rect */
.sealRing.phone{width:106px;height:154px}
.sealRing.phone svg{transform:none}
.sealRing.phone .sealCore{inset:12px 11px 17px;border-radius:20px}
.sealRing.phone .sealNum{font-size:38px}
.sealRing.phone .sealTier{font-size:18px;margin-top:4px}
#seal.fresh .sealRing.phone .sealTier{font-size:27px}
.phoneHome{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:32px;height:5px;border-radius:3px;
  background:rgba(255,255,255,.28);box-shadow:inset 0 1px 1px rgba(0,0,0,.35)}
[data-theme="light"] .phoneHome{background:rgba(168,123,31,.35)}
@media (min-width:1100px){
  .sealRing.phone{width:clamp(50px,8.6vh,122px);height:clamp(74px,12.5vh,178px)}
  .sealRing.phone .sealNum{font-size:clamp(18px,4.4vh,58px)}
}
/* Arabic slogan (Amar 2026-10-11): أجمل تحدي للذكاء — Cairo carries both scripts */
.slogan{font-family:'Cairo',var(--display);font-style:normal;font-weight:700}

/* ============================================================
   HAYABYNA "NEON PLAYGROUND" (Amar 2026-10-11)
   Same content, same questions — brand-new teen skin (14-20):
   midnight indigo + candy gradients (violet/pink/sky), yellow
   kept as THE reward colour. Dark-first. Haya gets a white
   aura in dark mode so her hair always pops.
   Design layer only — selectors, ids and JS hooks untouched.
   Light theme keeps its golden-hour look.
   ============================================================ */

/* ---------- tokens (dark only) ---------- */
html[data-theme="dark"]{
  --night:#14102B;
  --plum:#1E1647;
  --glass:rgba(255,255,255,.06);
  --glass-2:rgba(255,255,255,.10);
  --edge:rgba(255,255,255,.14);
  --text:#FFFFFF;
  --mute:rgba(255,255,255,.68);
  --faint:rgba(255,255,255,.45);
  --gold:#FBBF24;                  /* reward yellow — vivid candy */
  --gold-deep:#D97706;
  --blush:#F472B6;
  --blush-deep:#EC4899;
  --violet:#8B5CF6;
  --sky:#38BDF8;
  --mint:#34D399;
  --c:#FBBF24;
  --good:#34D399;
  --bad:#FB7185;
}

/* ---------- neon orbs + sparkles ---------- */
html[data-theme="dark"] body::before{background:
  radial-gradient(380px 380px at 85% -60px, rgba(139,92,246,.30), transparent 70%),
  radial-gradient(430px 430px at -90px 106%, rgba(236,72,153,.22), transparent 70%),
  radial-gradient(300px 300px at 106% 72%, rgba(56,189,248,.18), transparent 70%)}
html[data-theme="dark"] body{background:
  radial-gradient(120% 60% at 50% -10%, rgba(139,92,246,.16) 0%, transparent 55%),
  var(--night)}

/* ---------- Haya: white aura in dark mode ---------- */
html[data-theme="dark"] .mascot{
  background:none;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.55));
}

/* ---------- iPhone seal goes neon ---------- */
html[data-theme="dark"] .sealRing.phone{
  background:linear-gradient(160deg,#261C52 0%,#100C26 100%);
  border-radius:28px;
  box-shadow:0 18px 44px -16px rgba(139,92,246,.7), inset 0 1px 0 rgba(255,255,255,.14);
}
html[data-theme="dark"] .sealRing .fill{stroke:url(#neonStroke)}
html[data-theme="dark"] .sealRing.phone .sealCore{
  background:linear-gradient(160deg,#2C215F 0%,#171233 72%);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.55), inset 0 0 0 1px rgba(139,92,246,.4),
    0 0 24px -8px rgba(139,92,246,.9);
}
html[data-theme="dark"] .sealRing.phone .sealNum{
  background:linear-gradient(180deg,#FFFFFF 20%,#FBBF24 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
html[data-theme="dark"] .sealRing.phone .sealTier{color:#F9A8D4}

/* ---------- candy slogan ---------- */
html[data-theme="dark"] .slogan{
  background:linear-gradient(100deg,#FFE9A8 5%,#FBBF24 55%,#F97316 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- gradient action buttons (alive) ---------- */
html[data-theme="dark"] .dBtn,
html[data-theme="dark"] .goBtn,
html[data-theme="dark"] .ckOk,
html[data-theme="dark"] .lvBtn.on,
html[data-theme="dark"] .genTog.on{
  background:linear-gradient(135deg,#8B5CF6 0%,#EC4899 58%,#8B5CF6 130%);
  background-size:220% 220%;color:#FFFFFF;border-color:transparent;
  box-shadow:0 12px 32px -10px rgba(236,72,153,.7), inset 0 1px 0 rgba(255,255,255,.35);
  animation:neonShift 7s ease infinite;
}
@keyframes neonShift{50%{background-position:100% 60%}}
html[data-theme="dark"] .genTog{color:#F9A8D4;border-color:rgba(236,72,153,.55)}
html[data-theme="dark"] .dBtn.soft{background:var(--glass);border:1.5px solid var(--edge);color:var(--text);box-shadow:none;animation:none}

/* ---------- cards & chrome ---------- */
html[data-theme="dark"] .daily{
  background:linear-gradient(160deg, rgba(139,92,246,.17), rgba(236,72,153,.08));
  border:1.5px solid rgba(139,92,246,.55);
  box-shadow:0 18px 44px -20px rgba(139,92,246,.6), 0 0 0 5px rgba(236,72,153,.07);
}
html[data-theme="dark"] .flame{
  background:radial-gradient(circle at 50% 30%,#FDE68A 0%,#FBBF24 55%,#D97706 100%);
  box-shadow:0 0 0 5px rgba(236,72,153,.3), 0 0 32px -4px rgba(251,191,36,.9);
}
html[data-theme="dark"] .kind{
  color:#F0ABFC;border:1px solid rgba(232,123,168,.45);
  background:linear-gradient(120deg, rgba(139,92,246,.26), rgba(236,72,153,.22));
}
html[data-theme="dark"] .seg.on{background:linear-gradient(90deg,#8B5CF6,#EC4899,#FBBF24)}
html[data-theme="dark"] .opt{background:rgba(255,255,255,.055);border:1.5px solid rgba(255,255,255,.12)}
html[data-theme="dark"] .opt .key{background:rgba(251,191,36,.22);color:#FBBF24}
html[data-theme="dark"] .hintLine{
  background:linear-gradient(120deg, rgba(139,92,246,.18), rgba(56,189,248,.12));
  border:1px solid rgba(139,92,246,.4);
}
html[data-theme="dark"] .sus.pick .face{box-shadow:0 0 0 3px #F472B6,0 0 26px -2px #F472B6}
html[data-theme="dark"] .dial.active .dialFace{box-shadow:inset 0 0 0 2px #F472B6,0 0 22px -4px #F472B6}
html[data-theme="dark"] .sheet{background:linear-gradient(180deg,#251C52 0%,#14102B 100%);border:1px solid rgba(139,92,246,.35);border-bottom:0}
html[data-theme="dark"] .scoreView{background:linear-gradient(180deg,#1E1647 0%,#100C26 70%)}
html[data-theme="dark"] .adBanner{
  border:2.5px dashed color-mix(in srgb,#8B5CF6 60%,#EC4899);
  background:rgba(139,92,246,.07);
}
html[data-theme="dark"] .svBest{
  border:1.5px solid rgba(251,191,36,.5);
  background:linear-gradient(135deg, rgba(251,191,36,.14), rgba(236,72,153,.08));
}
html[data-theme="dark"] .svBest span{color:#FBBF24}
html[data-theme="dark"] .svBar i{background:linear-gradient(90deg,#8B5CF6,#EC4899,#FBBF24)}
html[data-theme="dark"] .iqChip.up{color:#FBBF24}
html[data-theme="dark"] .langMenu{background:#1E1647;border:1px solid rgba(139,92,246,.35)}
html[data-theme="dark"] .langMenu button span{color:#F9A8D4}
html[data-theme="dark"] .themeBtn svg{stroke:#FBBF24}
html[data-theme="dark"] .cookieBar{background:rgba(30,22,71,.85);border:1px solid rgba(139,92,246,.35)}
html[data-theme="dark"] .ckMore{color:#F9A8D4}
html[data-theme="dark"] ::selection{background:rgba(236,72,153,.5)}


/* ============================================================
   HAYABYNA "SECRET GARDEN" (Amar 2026-10-11) — V100
   His 6 scenic backgrounds crossfade behind the app (very
   smooth, shuffle every 8s). Categories bloom as 12 colored
   leaves (red, yellow, green...). The two level buttons are
   sculptural leaf-blades — emerald vs amber — nothing standard.
   Design layer only — selectors, ids and JS hooks untouched.
   The photo stage hides in light theme (golden-hour intact).
   ============================================================ */

/* ---------- rotating background stage ---------- */
body>.bgStage{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bgSlide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 2.8s ease}
.bgSlide.on{opacity:1}
.bgShade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,7,22,.38) 0%,rgba(9,7,22,.2) 38%,rgba(9,7,22,.48) 100%)}
[data-theme="light"] .bgShade{background:linear-gradient(180deg,rgba(110,110,122,.5) 0%,rgba(110,110,122,.32) 40%,rgba(110,110,122,.55) 100%)}
@media (prefers-reduced-motion:reduce){.bgSlide{transition:none}}

/* ---------- category leaves ---------- */
.med .medCore{
  border-radius:14% 14% 14% 14% / 48% 48% 52% 52%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 6%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 94%) center/2.5px 82% no-repeat,
    linear-gradient(135deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 46%),
    radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--mc) 62%, #fff) 0%, var(--mc) 56%, color-mix(in srgb, var(--mc) 52%, #000) 100%);
  transform:rotate(-7deg);
  box-shadow:0 12px 24px -12px color-mix(in srgb, var(--mc) 75%, transparent),
    inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.22);
}
.med:nth-child(even) .medCore{transform:rotate(7deg)}
.med:nth-child(3n) .medCore{border-radius:18% 18% 18% 18% / 46% 46% 54% 54%}
.med .medCore svg{stroke:#FFFFFF !important;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.med.done .medCore svg{stroke:#FFFFFF !important}
.med.done .medCore{
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 6%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 94%) center/2.5px 82% no-repeat,
    linear-gradient(135deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 46%),
    radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--mc) 55%, #fff) 0%, var(--mc) 52%, color-mix(in srgb, var(--mc) 45%, #000) 100%);
  box-shadow:0 0 0 3px rgba(255,255,255,.7), 0 0 28px -2px color-mix(in srgb, var(--mc) 90%, transparent),
    inset 0 2px 0 rgba(255,255,255,.4);
}
.med:active .medCore{transform:rotate(-7deg) scale(.92)}
.med:nth-child(even):active .medCore{transform:rotate(7deg) scale(.92)}

/* ---------- sculptural leaf-blade level buttons ---------- */
.levelSw{grid-template-columns:1fr 1fr;gap:14px}
.lvBtn{
  border-radius:50% 50% 50% 50% / 22% 22% 22% 22%;
  padding:22px 8px;font-size:16px;font-weight:800;letter-spacing:.01em;
  border:0;position:relative;overflow:hidden;
  transition:transform .18s ease, box-shadow .25s ease, filter .25s ease, opacity .25s ease;
}
.lvBtn:not(.on){opacity:.5;filter:saturate(.55)}
.lvBtn.on{opacity:1;filter:saturate(1.1)}
.lvBtn:active{transform:scale(.94) !important}
#lvClassic{
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 10%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 90%) center/82% 3px no-repeat,
    linear-gradient(135deg,#6EE7A0 0%,#22C55E 42%,#14532D 100%);
  color:#FFFFFF;text-shadow:0 2px 4px rgba(0,0,0,.4);
  transform:rotate(-4deg);
  box-shadow:0 16px 34px -14px rgba(34,197,94,.65), inset 0 2px 0 rgba(255,255,255,.4), inset 0 -4px 8px rgba(0,0,0,.25);
}
#lvClassic.on{box-shadow:0 0 36px -6px rgba(74,222,128,.85), 0 16px 34px -14px rgba(34,197,94,.65), inset 0 2px 0 rgba(255,255,255,.4)}
#lvClassic:active{transform:rotate(-4deg) scale(.94) !important}
#genTog{
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 10%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 90%) center/82% 3px no-repeat,
    linear-gradient(135deg,#FDE68A 0%,#F59E0B 48%,#92400E 100%);
  color:#3A2A10;text-shadow:0 1px 0 rgba(255,255,255,.35);
  transform:rotate(4deg);
  box-shadow:0 16px 34px -14px rgba(245,158,11,.65), inset 0 2px 0 rgba(255,255,255,.45), inset 0 -4px 8px rgba(0,0,0,.22);
}
#genTog.on{box-shadow:0 0 36px -4px rgba(251,191,36,.9), 0 16px 34px -14px rgba(245,158,11,.65), inset 0 2px 0 rgba(255,255,255,.45)}
#genTog.on::after{ /* shimmer sweep */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.5) 48%, transparent 62%);
  background-size:280% 100%;animation:leafShine 3.6s ease-in-out infinite;
}
@keyframes leafShine{0%{background-position:130% 0}55%,100%{background-position:-30% 0}}
#genTog:active{transform:rotate(4deg) scale(.94) !important}

/* leaves love the photo: deepen glass so text stays readable */
html[data-theme="dark"] .daily{background:linear-gradient(160deg, rgba(20,14,40,.72), rgba(20,14,40,.55));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html[data-theme="dark"] .opt{background:rgba(16,12,34,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html[data-theme="dark"] .topbar .iconBtn,html[data-theme="dark"] .langBtn,html[data-theme="dark"] .themeBtn{background:rgba(16,12,34,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html[data-theme="dark"] .cookieBar{background:rgba(16,12,34,.88)}


/* ============================================================
   V102 (Amar 2026-10-11) — his two attachments, exactly:
   (a) categories = glossy two-tone pills (white icon tab +
       colored gradient label, like his button sheet), 2-col;
   (b) Classic/Genius = his maple-leaf PNG (orange + red).
   ============================================================ */

/* ============================================================
   V104 (Amar 2026-10-11) — his corrections:
   1. NO brown anywhere: pills keep their vivid colors in both
      themes (light-theme brown --mc override deleted);
   2. leaves much smaller, BOTH the same golden yellow, and the
      boxy shadow is nuked (!important, both themes);
   3. category pills exactly like his sheet: split capsule —
      white icon end + vivid gradient label end, glossy.
   ============================================================ */

/* ---------- (3) category pills: Amar's sheet, exactly ---------- */
.fields{grid-template-columns:repeat(2,1fr);gap:10px}
.med{padding:0}
.med .pill{position:relative;display:flex;align-items:stretch;min-height:58px;
  border-radius:24px;overflow:hidden;text-align:start;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--mc) 55%, #fff) 0%,
    var(--mc) 100%);
  box-shadow:0 12px 24px -14px color-mix(in srgb, var(--mc) 70%, transparent),
    inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .15s ease}
.med .pill::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.36) 0%,rgba(255,255,255,.05) 46%,rgba(255,255,255,0) 62%)}
.med .pillIcon{flex:0 0 32%;margin:0;border-radius:0;
  background:linear-gradient(180deg,#ffffff 0%,#edf0f3 100%);
  border-inline-end:1px solid rgba(0,0,0,.09);
  display:flex;align-items:center;justify-content:center}
.med .pillIcon svg{width:26px;height:26px}
.med .pillLabel{flex:1;display:flex;align-items:center;gap:6px;padding:6px 22px 6px 14px;
  font-family:var(--fun);font-weight:800;font-size:15px;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.35)}
.med .pillLabel .soonTag{font-size:10px;font-weight:700;letter-spacing:.06em;
  background:rgba(0,0,0,.32);padding:3px 8px;border-radius:999px}
.med .pillBar{position:absolute;inset-inline-end:0;bottom:0;width:64%;height:5px;background:rgba(0,0,0,.22)}
.med .pillBar i{display:block;height:100%;width:0;background:rgba(255,255,255,.95);transition:width 1s ease}
.med.soon .pill{opacity:.45;filter:saturate(.4)}
.med:active .pill{transform:scale(.96)}
@media (min-width:1100px){
  .fields{grid-template-columns:repeat(2,1fr);max-width:860px;margin-inline:auto}
  .med .pill{min-height:54px}
  .med .pillLabel{font-size:14px}
}

/* ---------- (2) small golden-yellow maple leaves: Classic + Genius ---------- */
#lvClassic.lvBtn,#genTog.lvBtn{
  background:transparent url("../assets/leaf-orange.png") no-repeat center / contain !important;
  border:0 !important;border-radius:0 !important;box-shadow:none !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  width:116px;aspect-ratio:520/601;min-height:0;padding:2px 12px;margin-inline:auto;
  font-size:12.5px;font-weight:800;line-height:1.3;color:#3B2314;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;text-align:center;
}
#lvClassic.lvBtn:not(.on),#genTog.lvBtn:not(.on){opacity:.55}
#lvClassic.lvBtn.on,#genTog.lvBtn.on{filter:drop-shadow(0 8px 18px rgba(251,146,60,.55))}
#lvClassic.lvBtn:active{transform:scale(.93) !important}
#genTog.lvBtn:active{transform:scale(.93) !important}
#genTog.on::after{display:none}
/* ---------- V106 (Amar 2026-10-11): final polish ---------- */
/* (1) bottom ad: truly 468x60, no ballooning */
.adBanner.hfBottom{width:468px;max-width:100%;margin:18px auto 8px;padding:0;min-height:0}
.adBanner.hfBottom>div{gap:2px !important}
.adBanner.hfBottom .hfAdTag{margin-bottom:0}
/* (3) uniform pills: same size, thinner, wider, single line */
.med .pill{height:54px;min-height:0}
.med .pillLabel{white-space:nowrap;font-size:14.5px}
/* (5) kill the gray track at the pill ends (progress fill stays) */
.med .pillBar{background:transparent}
/* (6) breathing room above the title */
.brand{margin-top:12px}
/* ---------- V107 (Amar): daily bar -> one small centered button ---------- */
.daily{display:block;background:none !important;border:0 !important;box-shadow:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;padding:6px 0 !important;margin:0 0 12px;text-align:center}
[data-theme="light"] .daily{background:none !important;border:0 !important;-webkit-backdrop-filter:none;backdrop-filter:none}
.daily .dInfo h3{display:none}
.daily .dBtns{justify-content:center}
.daily .marks{justify-content:center}
#dPlay.dBtn{padding:8px 22px;font-size:13px;border-radius:14px}
/* ---------- V108 (Amar): center play button, true-size mobile ad ---------- */
/* (1) button exactly centered under phone+Haya */
.daily .dInfo{justify-content:center}
/* (2) mobile ad: true 468x60, no ballooning */
.adBanner.hfBottom ins.adsbygoogle{min-height:60px}
.adBanner.hfMobile ins.adsbygoogle{min-height:60px;min-width:0}
.adBanner.hfMobile{width:468px;max-width:100%;margin:10px auto;padding:0;min-height:0}
.adBanner.hfMobile>div{gap:2px !important}
.adBanner.hfMobile .hfAdTag{margin-bottom:0}
/* ---------- (V105-3) Play Today's Five: white/black per theme ---------- */
#dPlay.dBtn{background:#111111;border:1px solid rgba(255,255,255,.18);color:#FFFFFF;box-shadow:0 12px 26px -14px rgba(0,0,0,.7)}
[data-theme="light"] #dPlay.dBtn{background:#FFFFFF;border:1px solid rgba(0,0,0,.14);color:#000000;box-shadow:0 12px 26px -16px rgba(0,0,0,.25)}