/* v149 (Amar): the inside screens (every category, the case, the vault) — balanced and clear on every picture */
/* the footer lives in "Me" now — on the game screens too */
html.hb-app #home .siteFoot,html.hb-app #quiz .siteFoot,html.hb-app #case .siteFoot,html.hb-app #vault .siteFoot{display:none!important}
/* the logo, light/dark and language row breathes */
#quiz .brand,#case .brand,#vault .brand{margin-bottom:22px!important}
@media (min-width:600px){#quiz .brand,#case .brand,#vault .brand{margin-bottom:30px!important}}
/* the question sits right under the top bar — no empty hole */
#quiz .qarea,#case .qarea,#vault .qarea{justify-content:flex-start!important;padding-top:12px!important}
#quiz .qarea>*,#case .qarea>*,#vault .qarea>*{margin-top:0}
#quiz .qarea .kind,#case .qarea .kind,#vault .qarea .kind{margin-top:0!important}
/* progress: 10 clear capsules, gold when done */
#quiz .segs,#case .segs,#vault .segs{gap:6px!important;padding-bottom:14px!important}
.segs .seg{height:7px!important;border-radius:4px!important;background:rgba(255,255,255,.42)!important;box-shadow:0 0 0 1px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.18)}
.segs .seg.on{background:linear-gradient(90deg,#F6D77E,#E0A82E)!important}
.segs .seg.miss{background:#F87171!important}
/* the 1·2·3·4 order boxes: solid, numbered, gold edge */
.slots{gap:8px!important;margin-top:16px!important}
.slot{min-height:54px!important;border-radius:14px!important;border:1.5px solid rgba(246,215,126,.85)!important;background:rgba(20,16,34,.9)!important;
  color:#F6D77E!important;font-weight:800!important;font-size:18px!important;box-shadow:0 6px 16px rgba(0,0,0,.22)}
[data-theme="light"] .slot{background:#fff!important;border-color:#C9962A!important;color:#9A6B0C!important;box-shadow:0 6px 16px rgba(0,0,0,.12)}
.slot.filled{border-color:var(--c)!important;background:color-mix(in srgb,var(--c) 34%,#15121f)!important;color:#fff!important;font-size:16px!important}
[data-theme="light"] .slot.filled{background:color-mix(in srgb,var(--c) 22%,#fff)!important;color:#111114!important}
/* answers in dark theme: solid deep cards (light theme: white cards, as before) */
html[data-theme="dark"] .opt{background:rgba(20,16,34,.92);border:1.5px solid rgba(255,255,255,.2);color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.28)}
html[data-theme="dark"] .opt .key{background:rgba(246,215,126,.2);color:#F6D77E}
html[data-theme="dark"] .opt.correct{background:color-mix(in srgb,var(--good) 34%,#14111f);border-color:var(--good)}
html[data-theme="dark"] .opt.wrong{background:color-mix(in srgb,var(--bad) 32%,#14111f);border-color:var(--bad)}
html[data-theme="light"] .opt{box-shadow:0 8px 20px rgba(0,0,0,.12)}
/* Hint and Skip: one style; a used-up Hint keeps its solid card, only its word fades */
.qarea .foot .softBtn[disabled]{opacity:1!important}
[data-theme="dark"] .qarea .foot .softBtn[disabled]{color:rgba(255,255,255,.42)}
[data-theme="light"] .qarea .foot .softBtn[disabled]{color:rgba(0,0,0,.32)}
#quiz .qarea::before,#case .qarea::before,#vault .qarea::before{display:none!important}
/* the vault: a clean question box (no fade), solid code boxes and keypad */
#vArea #vPrompt{min-height:0!important;-webkit-mask-image:none!important;mask-image:none!important;flex:0 1 auto!important;max-height:38vh;padding-bottom:14px!important}
html[data-theme="dark"] #vault .digit{background:rgba(20,16,34,.92);border:1.5px solid rgba(246,215,126,.6);color:#fff}
html[data-theme="dark"] #vault .digit.empty{color:rgba(255,255,255,.3)}
html[data-theme="light"] #vault .digit{background:#fff;border:1.5px solid #C9962A}
html[data-theme="dark"] #vault .k{background:rgba(20,16,34,.92);border:1.5px solid rgba(255,255,255,.2);color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.25)}
html[data-theme="light"] #vault .k{background:#fff;color:#111114;box-shadow:0 6px 16px rgba(0,0,0,.1)}
html[data-theme="dark"] #vault .k:active{background:rgba(60,52,90,.95)}
/* big screens: a wider, roomier game */
@media (min-width:1100px){
  #quiz.screen,#case.screen,#vault.screen{max-width:640px!important}
  #quiz .opt,#case .opt{min-height:64px!important;font-size:19px!important}
  #quiz .qarea .prompt,#case .qarea .prompt,#vault .qarea .prompt{font-size:21px}
  #quiz .qarea .foot .softBtn,#case .qarea .foot .softBtn,#vault .qarea .foot .softBtn{min-height:52px}
}

/* v149b — the vault locks: the lock always shows (dark lock on the white dial, white lock on the dark dial) */
html[data-theme="light"] #vault .dial:not(.open) .dialFace svg{stroke:#1d1b26!important}
html[data-theme="dark"] #vault .dial:not(.open) .dialFace svg{stroke:#fff!important}
html[data-theme="light"] #vault .dialFace{box-shadow:0 6px 16px rgba(0,0,0,.16),inset 0 0 0 1px rgba(0,0,0,.1)}
html[data-theme="dark"] #vault .dialFace{background:rgba(20,16,34,.92);box-shadow:0 6px 16px rgba(0,0,0,.3),inset 0 0 0 1.5px rgba(255,255,255,.25)}
#vault .dial.active .dialFace{box-shadow:inset 0 0 0 2.5px #E0A82E,0 0 20px -4px #E0A82E!important}
#vault .dial .lb{font-size:13px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
html[data-theme="light"] #vault .dial .lb{color:#1d1b26;text-shadow:0 1px 3px rgba(255,255,255,.9)}

/* v149b — one size scale for every question box, in every language (Arabic letters draw smaller, so Arabic gets a step more) */
html{--qfs:20px;--ofs:18px}
@media (min-width:600px){html{--qfs:22px}}
html[lang="ar"]{--qfs:22px;--ofs:19.5px}
@media (min-width:600px){html[lang="ar"]{--qfs:24px}}
#quiz .qarea .prompt,#case .qarea .prompt{font-size:var(--qfs);line-height:1.4}
#vault .qarea .prompt,#vArea #vPrompt{font-size:calc(var(--qfs) * .9)!important;line-height:1.5}
#quiz .opt,#case .opt{font-size:var(--ofs)!important}
html[lang="ar"] .qarea .foot .softBtn,html[lang="ar"] .qarea .foot .goBtn{font-size:17px!important}
html[lang="ar"] .topTitle .t1{font-size:17px}
html[lang="ar"] .topTitle .t2{font-size:14px}
html[lang="ar"] #case .qarea p:not(.prompt),html[lang="ar"] #case .clue,html[lang="ar"] #case .file{font-size:16.5px;line-height:1.6}
/* Arabic questions in Cairo — Amar's font, always */
html[lang="ar"] .qarea .prompt,html[lang="ar"] #vArea #vPrompt{font-family:"Cairo",system-ui,sans-serif;font-weight:600}
html[lang="ar"] #qPrompt .qWord{font-weight:700}
html[lang="ar"] #cClue{font-size:16.5px;line-height:1.6}
/* automatic balance: on a wide, short screen the answers go two per row */
#quiz.hbTwo .opts,#case.hbTwo .opts{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important}
#quiz.hbTwo .opt,#case.hbTwo .opt{min-height:56px!important}
/* v150 (Amar): every pop-up card (Why?, keep the run, results) floats with an end — rounded on all sides,
   space under it, never glued to the bottom of the screen; long text scrolls inside the card */
.veil{padding:16px 12px calc(env(safe-area-inset-bottom,0px) + 16px)!important;box-sizing:border-box}
.veil.show{align-items:flex-end}
#sheet{border-radius:28px!important;width:min(100%,460px)!important;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;
  overscroll-behavior:contain;box-sizing:border-box;padding-bottom:22px!important;box-shadow:0 18px 50px rgba(0,0,0,.4)!important}
@media (min-width:700px){.veil.show{align-items:center}}
/* v151 (Amar): the "Why?" (لماذا؟) card is white with black words in every language and both themes; its button is black with white words */
html #sheet.whySheet,html[data-theme="light"] #sheet.whySheet,html[data-theme="dark"] #sheet.whySheet{background:#fff!important;color:#000!important;border:0!important}
html #sheet.whySheet h3,html #sheet.whySheet .whyText,html #sheet.whySheet .whyAns b{color:#000!important}
html #sheet.whySheet .whyAns{background:#fff!important;border:1.5px solid #000!important}
html #sheet.whySheet .whyAns span{color:#000!important;opacity:.55}
html #sheet.whySheet .goBtn{background:#000!important;color:#fff!important;border:0!important}
/* v151 (Amar, always): EVERY Arabic word on Hayabyna is in Cairo — questions, answers, Why?, buttons, menus, Haya's words on the iPad */
html[lang="ar"] body,html[lang="ar"] body *:not(svg):not(path):not(circle):not(rect):not(ellipse):not(line):not(polyline):not(g),
:lang(ar),[dir="rtl"],.sealRing.phone .phoneTalk span.ar{font-family:"Cairo",system-ui,sans-serif!important}
html[lang="ar"] body #seal .sealCore,html[lang="ar"] body #seal .sealCore *{font-family:var(--display)!important}   /* the IQ score keeps its own look */
/* the name box: a red edge when the player tries to share without a name */
.svName input.need{border-color:#F87171!important;box-shadow:0 0 0 3px rgba(248,113,113,.25)}
/* v153 (Amar): every game pop-up card (keep the run alive, results, ...) is white with black words, like Why? —
   main button black with white words, second button white with a black edge. In every language and both themes. */
html #sheet:not(.legalSheet),html[data-theme="light"] #sheet:not(.legalSheet),html[data-theme="dark"] #sheet:not(.legalSheet){background:#fff!important;color:#000!important;border:0!important}
html #sheet:not(.legalSheet) h3{color:#000!important;background:none!important;-webkit-text-fill-color:currentColor!important}
html #sheet:not(.legalSheet) p,html #sheet:not(.legalSheet) li,html #sheet:not(.legalSheet) span:not(.whyQ){color:#1d1b26!important}
html #sheet:not(.legalSheet) .goBtn{background:#000!important;color:#fff!important;border:0!important;box-shadow:none!important}
html #sheet:not(.legalSheet) .softBtn{background:#fff!important;color:#000!important;border:1.5px solid #000!important;box-shadow:none!important}
html #sheet:not(.legalSheet) .emb.lost svg{stroke:#555!important}
/* v155: the logo row (and its language menu) always sits above Haya, even when she floats */
.brand{z-index:90!important}
.brand .langMenu{z-index:91!important}
/* v156 (Amar): on computers the logo row spreads wider, so the sun/moon and language buttons (and the language menu) sit well to the right, away from Haya; Haya is bigger.
   The home page becomes a wide frame; everything except the logo row stays in its 560px column. */
@media (min-width:1100px){
  #home.screen{max-width:min(1000px,86vw)!important;width:min(1000px,86vw)!important}
  #home > :not(.brand){width:100%;max-width:560px!important;align-self:center!important;margin-left:auto;margin-right:auto}
  #home .brand{width:100%!important;max-width:none!important}
  html #seal .mascot:not(.hbFloat){height:calc(var(--tw) * 1.2)!important}
}
/* v157 (Amar): a glass bar at the top, the twin of the bottom bar — the logo, sun/moon and language always read clearly on every picture */
#home .brand,#quiz .brand,#case .brand,#vault .brand{
  box-sizing:border-box;min-height:64px;align-items:center!important;
  padding:8px 10px 8px 18px!important;margin-top:calc(var(--safe-t,0px) + 10px)!important;
  margin-left:12px!important;margin-right:12px!important;width:auto!important;
  border-radius:26px;background:rgba(24,18,40,.72);border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);box-shadow:0 14px 34px rgba(10,6,24,.35)}
html[data-theme="light"] #home .brand,html[data-theme="light"] #quiz .brand,html[data-theme="light"] #case .brand,html[data-theme="light"] #vault .brand{
  background:rgba(255,255,255,.84);border-color:rgba(0,0,0,.08);box-shadow:0 12px 30px rgba(20,16,40,.18)}
@media (min-width:600px){#quiz .brand,#case .brand,#vault .brand{margin-left:auto!important;margin-right:auto!important;width:calc(100% - 24px)!important;max-width:560px}}
@media (min-width:1100px){#home .brand{margin-left:0!important;margin-right:0!important;width:100%!important}}
/* v158 (Amar): on computers the top bar sits at the very top (like on phones); the rest stays centred in the space below it */
@media (min-width:1100px){
  #home .brand{order:0}
  #home::before{order:1}
  #home > :not(.brand){order:2}
  #home::after{order:3}
  #home{padding-top:0!important}
}
/* v159: the slanted "IQ" (and the score) on the iPad were clipped on the right — the gold/silver letter paint now covers the whole letter */
#seal .sealTier,#seal .sealNum{padding-left:.18em!important;padding-right:.18em!important;overflow:visible!important}
/* v159 (Amar): the "IQ" on the iPad is always the elegant slanted serif (Fraunces), in every language */
html body #seal .sealTier,html[lang="ar"] body #seal .sealTier{font-family:"Fraunces",Georgia,"Times New Roman",serif!important;font-style:italic!important}
/* v162: the hint rule under Hint / Skip */
.hintRule{margin:10px auto 0;padding:5px 12px;max-width:max-content;text-align:center;font-size:12.5px;font-weight:800;line-height:1.35;border-radius:999px;
  color:#fff;background:rgba(10,8,20,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html[data-theme="light"] .hintRule{color:#111114;background:rgba(255,255,255,.8)}
.foot.answered ~ .hintRule{display:none}
/* v163: male / female for the IQ card (the right word for "Gifted" in Arabic, Spanish and French) */
.svSex{display:flex;align-items:center;gap:12px;margin:0 0 14px;flex-wrap:wrap}
.svSex>span{font-size:13px;color:var(--mute,#A7A3AE);font-weight:700}
.svSexBtns{display:flex;gap:8px;flex:1}
.svSexBtns button{flex:1;min-height:44px;border-radius:14px;font:700 15px inherit;font-family:inherit;cursor:pointer;background:#0A0A0A;color:#fff;border:1.5px solid rgba(255,255,255,.25)}
.svSexBtns button.on{background:#fff;color:#000;border-color:#fff}
html[data-theme="light"] .svSexBtns button{background:#fff;color:#111114;border-color:rgba(0,0,0,.2)}
html[data-theme="light"] .svSexBtns button.on{background:#111114;color:#fff;border-color:#111114}
.svSex.need .svSexBtns button{border-color:#F87171!important;box-shadow:0 0 0 3px rgba(248,113,113,.25)}
/* v164: a very long single word wraps instead of spilling out of its box */
.qarea .prompt,.qarea .opt span{overflow-wrap:anywhere}
/* phones: answers a little more compact so the whole question fits */
@media (max-width:1099px){#quiz .opts,#case .opts{gap:9px!important;margin-top:12px!important}#quiz .opt,#case .opt{min-height:52px!important;padding:11px 14px!important}}
/* v166 (Amar): after answering, "Why?" is always on the LEFT and "Next" on the RIGHT — every language, every category */
.qarea .foot.answered{direction:ltr!important}
.qarea .foot.answered #qWhy{order:1!important}
.qarea .foot.answered #qNext{order:2!important}
html[dir="rtl"] .qarea .foot.answered > button{direction:rtl}