/* Loaded only on challenge pages, after the shared theme layers. */
html.challenge-document {
  height:auto !important;
  min-height:100%;
  overflow-x:clip !important;
  overflow-y:auto !important;
  background:#192442 !important;
}
html.challenge-document body.challenge-shell {
  --challenge-accent:#0c7b88;
  --challenge-surface:radial-gradient(ellipse at 8% 0%,#28576a 0,transparent 58%),linear-gradient(145deg,#202b49,#20203c);
  display:block !important;
  width:100%;
  height:auto !important;
  min-height:100vh;
  min-height:100svh;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  background:var(--challenge-surface) !important;
  color:#fff;
  font-family:"Segoe UI Variable Text","Segoe UI",Tahoma,Arial,sans-serif;
}
html.challenge-document body.challenge-grade-1 { --challenge-accent:#ba701c; --challenge-surface:radial-gradient(ellipse at 0% 0%,#785644 0,transparent 65%),linear-gradient(145deg,#332c40,#24203d); }
html.challenge-document body.challenge-grade-2 { --challenge-accent:#087a84; --challenge-surface:radial-gradient(ellipse at 0% 0%,#176979 0,transparent 65%),linear-gradient(145deg,#164365,#1b2748); }
html.challenge-document body.challenge-grade-3 { --challenge-accent:#7752bc; --challenge-surface:radial-gradient(ellipse at 95% 0%,#654580 0,transparent 68%),linear-gradient(145deg,#302855,#212340); }
body.challenge-shell::before,body.challenge-shell::after { display:none !important; }
body.challenge-shell > .app-viewport-content {
  display:block !important;
  width:100%;
  height:auto !important;
  min-height:100vh;
  min-height:100svh;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  background:transparent !important;
}
.challenge-shell [hidden] { display:none !important; }
.challenge-shell > .skip-link:not(:focus) { clip-path:inset(50%); opacity:0; pointer-events:none; }
.challenge-shell :is(button,input) { font:inherit; }
.challenge-shell .daily-challenge-page {
  width:min(1100px,calc(100% - 48px));
  max-width:none;
  height:auto;
  min-height:100svh;
  margin:0 auto;
  padding:32px 0 52px;
  overflow:visible;
  isolation:auto;
  box-sizing:border-box;
  background:transparent;
}
.challenge-shell .daily-challenge-page::before,
.challenge-shell .daily-challenge-page::after { content:none !important; display:none !important; animation:none !important; will-change:auto; }
.challenge-shell .daily-challenge-header { position:relative; padding:0; margin:0 0 28px; }
.challenge-shell .daily-challenge-heading-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:48px;
  direction:ltr;
}
.challenge-shell .daily-challenge-heading-row.has-question-action { min-height:48px; }
.challenge-shell .daily-challenge-heading-row::after { content:none; display:none; }
.challenge-shell .daily-challenge-header .challenge-heading-title {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:0;
  margin:27px auto 0;
  color:#fff;
  font-weight:850;
  letter-spacing:-.04em;
  line-height:1.12;
  text-align:center;
  text-wrap:balance;
  text-shadow:0 8px 28px #0a123044;
}
.challenge-shell .challenge-header-brand {
  display:flex;
  flex-direction:column;
  align-items:center;
  width:auto;
  height:auto;
  margin-bottom:7px;
  gap:4px;
  padding:0;
  color:#fff;
}
.challenge-shell a.challenge-header-brand { text-decoration:none; }
.challenge-shell a.challenge-header-brand:focus-visible { outline:2px solid #fff; outline-offset:5px; border-radius:8px; }
.challenge-shell .daily-challenge-next-link svg { flex:0 0 20px; }
html[dir="rtl"] .challenge-shell .daily-challenge-next-link svg { transform:rotate(180deg); }
html[data-theme] .challenge-shell .challenge-header-brand .site-brand-logo { width:72px; height:43px; flex:0 0 43px; }
html[data-theme] .challenge-shell .challenge-header-brand .site-brand-copy { display:grid; justify-items:center; gap:2px; color:#fff; }
html[data-theme] .challenge-shell .challenge-header-brand .brand-arabic { font-size:16px; line-height:1.1; color:#fff; }
html[data-theme] .challenge-shell .challenge-header-brand .brand-english { font-size:10px; line-height:1.1; letter-spacing:.12em; color:#fff; }
.challenge-shell .challenge-heading-title::after { content:""; width:54px; height:3px; margin-top:10px; border-radius:99px; background:linear-gradient(90deg,#ffffff6e,#fff,#ffffff6e); }
.challenge-shell .challenge-heading-title [lang="en"] { font-size:clamp(29px,3.4vw,42px); }
.challenge-shell .challenge-heading-title [lang="ar"] { font-size:clamp(17px,1.9vw,23px); letter-spacing:0; font-weight:750; }
.challenge-shell .daily-challenge-heading-row .daily-challenge-back {
  position:static;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  flex:0 0 44px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#fff;
  box-shadow:none;
  backdrop-filter:none;
  transition:transform .2s ease,opacity .2s ease;
}
.challenge-shell .daily-challenge-heading-row .daily-challenge-back:is(:hover,:focus-visible) { background:transparent; transform:translateX(-3px); opacity:.82; }
.challenge-shell .daily-challenge-heading-row .daily-challenge-back svg { width:22px; height:22px; }
.challenge-heading-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.challenge-shell .challenge-heading-action {
  display:grid;
  place-items:center;
  flex:0 0 44px;
  width:44px;
  height:44px;
  margin:0;
  padding:0;
  border:1px solid #ffffff40;
  border-radius:13px;
  background:#ffffff0e;
  color:#fff;
  text-decoration:none;
  cursor:pointer;
}
.challenge-shell .challenge-heading-action svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.challenge-shell .challenge-top10-mark { display:grid; place-items:center; align-content:center; gap:1px; line-height:1; letter-spacing:.03em; }
.challenge-shell .challenge-top10-mark b { font:800 8px/1 system-ui,sans-serif; }
.challenge-shell .challenge-top10-mark strong { font:900 17px/1 system-ui,sans-serif; }
.challenge-shell :is(.challenge-heading-action,.daily-challenge-back):focus-visible { outline:3px solid #ffe29b; outline-offset:3px; }
.challenge-share-status { position:absolute; z-index:2; inset-block-start:calc(100% + 6px); inset-inline-end:0; padding:7px 11px; border-radius:9px; background:#fff; box-shadow:0 8px 20px #080f2b35; color:#263451; font-size:12px; font-weight:700; }

/* Illustrated grade cards: the character projects above the upper panel. */
.challenge-grade-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  gap:28px;
  width:min(950px,100%);
  margin:78px auto 0;
  padding:0;
  direction:ltr;
}
.challenge-grade-card {
  --card-color:#de972e;
  --card-deep:#8e5818;
  --card-art:#d7b477;
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  border:1px solid #ffffff28;
  border-radius:24px;
  color:#243148;
  background:#fff;
  box-shadow:0 18px 40px #03091740;
  text-align:center;
  text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease;
}
.challenge-grade-card--2 { --card-color:#138a96; --card-deep:#076b76; --card-art:#7ec4c3; }
.challenge-grade-card--3 { --card-color:#8161c5; --card-deep:#6042a1; --card-art:#ad99d1; }
.challenge-grade-art {
  position:relative;
  display:block;
  height:184px;
  border-radius:23px 23px 0 0;
  background:radial-gradient(ellipse at 50% 80%,#ffffff70,transparent 70%),linear-gradient(140deg,var(--card-art),var(--card-deep));
}
.challenge-grade-number {
  position:absolute;
  inset:14px auto auto 14px;
  color:#fff;
  opacity:.25;
  font-size:78px;
  font-weight:900;
  line-height:1;
  letter-spacing:-.06em;
}
.challenge-grade-figures { position:absolute; inset:-52px 0 0; overflow:hidden; pointer-events:none; }
.challenge-grade-figures img {
  position:absolute;
  top:0;
  left:50%;
  display:block;
  width:156px;
  height:auto;
  max-width:none;
  transform:translateX(-50%);
  filter:drop-shadow(0 10px 10px #18223835);
}
.challenge-grade-card--3 .challenge-grade-boy { left:33%; width:140px; top:8px; }
.challenge-grade-card--3 .challenge-grade-girl { left:69%; width:137px; top:0; }
.challenge-grade-copy { display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:24px 20px 26px; }
html[dir="rtl"] .challenge-grade-copy { direction:rtl; }
.challenge-grade-copy small { color:var(--card-deep); font-size:10px; font-weight:800; letter-spacing:.05em; }
.challenge-grade-copy strong { display:block !important; color:#1d2940; font-size:33px; font-weight:850; line-height:1.15; }
.challenge-grade-copy > [lang="ar"] { display:block !important; color:#33405a; font-size:17px; font-weight:650; }
.challenge-grade-description { max-width:24ch; margin-top:8px; color:#66738a; font-size:15px; font-weight:700; line-height:1.7; }
.challenge-grade-action {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  min-height:62px;
  padding:12px 20px;
  border-radius:0 0 23px 23px;
  background:linear-gradient(120deg,var(--card-color),var(--card-deep));
  color:#fff;
  font-size:16px;
  font-weight:750;
}
.challenge-grade-action svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
html[dir="rtl"] .challenge-grade-action { flex-direction:row-reverse; }
html[dir="rtl"] .challenge-grade-action svg { transform:rotate(180deg); }
.challenge-grade-card:focus-visible { outline:3px solid #fff3b8; outline-offset:7px; }
@media (hover:hover) { .challenge-grade-card:hover { transform:translateY(-6px); box-shadow:0 24px 44px #03091755; } }

/* Answers remain keyboard-accessible; the entire tile is the visible selector. */
.challenge-shell .daily-challenge-card {
  width:100%;
  max-width:940px;
  margin:0 auto;
  padding:clamp(22px,3.1vw,38px);
  border:1px solid #e7eaf2;
  border-top:5px solid var(--challenge-accent);
  border-radius:24px;
  background:#fff;
  box-shadow:0 20px 48px #08112733;
  text-align:start;
  box-sizing:border-box;
}
.challenge-shell .daily-challenge-card-top { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:16px; }
.challenge-shell .daily-challenge-lesson { margin:0 0 14px; font-size:13px; line-height:1.7; color:#647089; }
.challenge-shell .daily-challenge-prompt { margin:0 0 24px; font-size:clamp(20px,2.2vw,28px); font-weight:750; line-height:1.7; color:#202d46; }
.challenge-shell .daily-challenge-choices { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; min-width:0; }
.challenge-shell .daily-challenge-choice {
  position:relative;
  min-width:0;
  min-height:64px;
  padding:14px 16px;
  gap:12px;
  border:1.5px solid #d4dce9;
  border-radius:14px;
  background:#fff;
  font-size:16px;
  line-height:1.7;
  color:#29354e;
  transform:none;
  transition:border-color .15s ease,background-color .15s ease;
}
html.challenge-document .daily-challenge-choice input[type="radio"] {
  position:absolute !important;
  inset:0 auto auto 0 !important;
  width:1px !important;
  height:1px !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  opacity:0 !important;
  clip-path:inset(50%) !important;
  overflow:hidden !important;
  box-shadow:none !important;
}
.challenge-shell .daily-challenge-choice-letter { width:30px; height:30px; flex:0 0 30px; border-radius:9px; background:#f0f3f8; color:#536078; font-size:12px; }
.challenge-shell .daily-challenge-choice > span:last-child { overflow-wrap:anywhere; }
.challenge-shell .daily-challenge-choice:hover { transform:none; border-color:var(--challenge-accent); background:#f7f9fc; }
.challenge-shell .daily-challenge-choice:has(input:checked) { border-color:var(--challenge-accent); background:#f0f4fa; }
.challenge-shell .daily-challenge-choice:has(input:checked) .daily-challenge-choice-letter { background:var(--challenge-accent); color:#fff; }
.challenge-shell .daily-challenge-choice:focus-within { outline:3px solid #2b9acb; outline-offset:3px; }
.challenge-shell .daily-challenge-choice.is-correct { border-color:#208863; background:#edf8f2; }
.challenge-shell .daily-challenge-choice.is-incorrect { border-color:#c17541; background:#fff4e9; }
.challenge-shell .daily-challenge-choice.is-correct:has(input:checked) { border-color:#208863; background:#edf8f2; }
.challenge-shell .daily-challenge-choice.is-incorrect:has(input:checked) { border-color:#c17541; background:#fff4e9; }
.challenge-shell .daily-challenge-choice.is-correct .daily-challenge-choice-letter { background:#208863; color:#fff; }
.challenge-shell .daily-challenge-choice.is-incorrect:has(input:checked) .daily-challenge-choice-letter { background:#a25125; color:#fff; }
.challenge-shell .daily-challenge-choice.is-correct::after { content:"✓"; color:#147450; font-weight:800; }
.challenge-shell .daily-challenge-choice.is-incorrect::after { content:"×"; color:#a25125; font-weight:800; }
.challenge-shell .daily-challenge-submit { margin-top:24px; padding:12px 25px; min-height:48px; border-radius:12px; background:var(--challenge-accent); font-size:15px; color:#fff; }
.challenge-shell .daily-challenge-result { margin-top:26px; padding:22px; border:1px solid #dbe4ef; border-radius:16px; background:#f6f8fc; line-height:1.8; }
.challenge-shell .daily-challenge-result.is-correct { background:#edf8f2; border-color:#b7dfc9; }
.challenge-shell .daily-challenge-result.is-incorrect { background:#fff6eb; border-color:#edccaa; }
.challenge-shell .daily-challenge-result h3 { margin:0 0 10px; font-size:20px; }
.challenge-shell .daily-challenge-points { display:inline-flex; align-items:center; margin:0 0 12px; padding:4px 11px; border-radius:999px; background:#d7f2e4; color:#126540; font-size:13px; font-weight:800; line-height:1.5; }
.challenge-shell .daily-challenge-points[hidden] { display:none; }
.challenge-shell .daily-challenge-result p { margin:0 0 10px; }
.challenge-shell .daily-challenge-result-actions { display:grid; grid-template-columns:repeat(2,minmax(0,200px)); justify-content:start; gap:12px; margin-top:22px; }
.challenge-shell .daily-challenge-result-actions .daily-challenge-action { display:flex; align-items:center; justify-content:center; gap:10px; min-width:0; width:100%; min-height:56px; box-sizing:border-box; margin:0; padding:11px 13px; border:1px solid transparent; border-radius:13px; color:#fff; font-size:14px; font-weight:800; line-height:1.3; text-align:center; text-decoration:none; box-shadow:0 8px 18px rgba(17,32,50,.14); transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease; }
.challenge-shell .daily-challenge-result-actions .daily-challenge-action svg { width:21px; height:21px; flex:0 0 21px; }
.challenge-shell .daily-challenge-result-actions .daily-challenge-study-link { background:#154b63; border-color:#154b63; }
.challenge-shell .daily-challenge-result-actions .daily-challenge-study-link:hover { background:#0e3b50; }
.challenge-shell .daily-challenge-result-actions .daily-challenge-next-link { background:#6955b8; border-color:#6955b8; }
.challenge-shell .daily-challenge-result-actions .daily-challenge-next-link:hover { background:#57429f; }
.challenge-shell .daily-challenge-result-actions .daily-challenge-next-link.is-unavailable { opacity:.65;pointer-events:none;box-shadow:none; }
.challenge-shell .daily-challenge-result-actions .daily-challenge-action:is(:hover,:focus-visible) { transform:translateY(-2px); box-shadow:0 12px 23px rgba(17,32,50,.2); }
.challenge-shell .daily-challenge-result-actions .daily-challenge-action:focus-visible { outline:3px solid #248cb0; outline-offset:3px; }
.challenge-shell .daily-challenge-image { max-width:100%; max-height:380px; object-fit:contain; margin:0 auto 22px; }
.challenge-shell .daily-challenge-empty { text-align:center; padding:44px 24px; }
.challenge-shell .daily-challenge-empty h2 { font-size:24px; }

@media (max-width:760px) {
  .challenge-shell .daily-challenge-page { width:calc(100% - 24px); padding:10px 0 28px; }
  .challenge-shell .daily-challenge-header { margin-bottom:20px; }
  .challenge-shell .daily-challenge-heading-row { gap:8px; min-height:40px; }
  .challenge-shell .daily-challenge-heading-row.has-question-action { min-height:40px; }
  .challenge-shell .daily-challenge-heading-row .daily-challenge-back { flex-basis:40px; width:40px; height:40px; }
  .challenge-shell .daily-challenge-heading-row .daily-challenge-back svg { width:20px; height:20px; }
  .challenge-shell .daily-challenge-header .challenge-heading-title { margin-top:21px; gap:4px; }
  .challenge-shell .challenge-header-brand { margin-bottom:5px; }
  html[data-theme] .challenge-shell .challenge-header-brand .site-brand-logo { width:60px; height:36px; flex-basis:36px; }
  html[data-theme] .challenge-shell .challenge-header-brand .brand-arabic { font-size:14px; }
  html[data-theme] .challenge-shell .challenge-header-brand .brand-english { font-size:8px; }
  .challenge-shell .challenge-heading-title::after { width:42px; margin-top:7px; }
  .challenge-shell .challenge-heading-title [lang="en"] { font-size:clamp(24px,6.5vw,29px); }
  .challenge-shell .challenge-heading-title [lang="ar"] { font-size:clamp(16px,4.5vw,19px); }
  .challenge-heading-actions { gap:4px; }
  .challenge-shell .challenge-heading-action { flex-basis:40px; width:40px; height:40px; border-radius:11px; }
  .challenge-shell .challenge-heading-action svg { width:20px; height:20px; }
  .challenge-grade-grid { grid-template-columns:repeat(2,minmax(0,1fr)); width:min(342px,100%); gap:40px 12px; margin-top:40px; }
  .challenge-grade-card { border-radius:16px; }
  .challenge-grade-card:last-child:nth-child(odd) { grid-column:1 / -1; width:calc(50% - 6px); justify-self:center; }
  .challenge-grade-art { height:92px; border-radius:15px 15px 0 0; }
  .challenge-grade-number { inset:7px auto auto 7px; font-size:39px; }
  .challenge-grade-figures { top:-28px; }
  .challenge-grade-figures img { width:85px; }
  .challenge-grade-card--3 .challenge-grade-boy { left:34%; width:76px; top:4px; }
  .challenge-grade-card--3 .challenge-grade-girl { left:68%; width:76px; top:0; }
  .challenge-grade-copy { padding:9px 5px 11px; gap:2px; }
  .challenge-grade-copy strong { font-size:20px; }
  .challenge-grade-copy > [lang="ar"] { font-size:12px; }
  .challenge-grade-description { margin-top:2px; font-size:12px; }
  .challenge-grade-action { min-height:38px; gap:4px; padding:5px 4px; border-radius:0 0 15px 15px; font-size:11px; }
  .challenge-grade-action svg { width:15px; height:15px; }
  .challenge-shell .daily-challenge-card { padding:22px 18px; border-radius:20px; }
  .challenge-shell .daily-challenge-choices { grid-template-columns:1fr; gap:10px; }
  .challenge-shell .daily-challenge-choice { padding:12px; gap:10px; font-size:15px; }
  .challenge-shell .daily-challenge-prompt { font-size:21px; margin-bottom:20px; line-height:1.65; }
  .challenge-shell .daily-challenge-submit { width:100%; }
  .challenge-shell .daily-challenge-result { padding:18px 14px; }
  .challenge-shell .daily-challenge-result-actions { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .challenge-shell .daily-challenge-result-actions .daily-challenge-action { min-height:58px; gap:7px; padding:9px 8px; font-size:12px; }
  .challenge-shell .daily-challenge-result-actions .daily-challenge-action svg { width:19px; height:19px; flex-basis:19px; }
}
@media (prefers-reduced-motion:reduce) {
  .challenge-shell *, .challenge-shell *::before, .challenge-shell *::after { animation:none !important; transition:none !important; }
}
.challenge-shell .challenge-grade-grid.challenge-grade-grid--two { grid-template-columns:repeat(2,minmax(0,1fr)); width:min(560px,100%); }
@media (max-width:600px) {
  .challenge-shell .challenge-grade-grid.challenge-grade-grid--two { width:min(342px,100%); }
}
