/* Homepage choice hierarchy only. Gameplay and existing event handlers stay unchanged. */
#screen-start .home-discovery{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,440px);grid-template-areas:"intro art" "modes modes";column-gap:32px;row-gap:22px;padding-top:24px}
#screen-start .home-hero-choices{grid-area:intro;display:block;padding:0;min-width:0}
#screen-start .home-hero-choices h1{font-size:clamp(34px,3.5vw,48px);line-height:1.35;letter-spacing:-.8px;margin:10px 0 12px}
#screen-start .home-hero-choices .hero-description{max-width:660px;font-size:18px;line-height:1.8}
#screen-start .choice-facts{display:grid;grid-template-columns:repeat(3,1fr);padding:12px 0;margin-top:18px;gap:0;border:1px solid var(--border);border-radius:16px;background:var(--card);max-width:440px}
#screen-start .choice-facts>div{text-align:center;padding:0 18px;border-inline-end:1px solid var(--border)}
#screen-start .choice-facts>div:last-child{border:0}
#screen-start .choice-facts strong{display:block;font-size:25px;font-weight:900;line-height:1.4;color:var(--accent);direction:ltr;unicode-bidi:isolate}
#screen-start .choice-facts span{display:block;white-space:nowrap;font-size:14px;color:var(--text2)}
#screen-start .discovery-art{grid-area:art;min-height:0;height:290px;width:100%;margin:0;align-self:center}
#screen-start .discovery-art .art-arch{width:228px;height:234px;border-radius:120px 120px 26px 26px;transform:none;box-shadow:inset 0 0 0 8px #fff4}
#screen-start .discovery-art .knowledge-art{width:218px;height:200px}
#screen-start .discovery-art .art-caption{font-size:12px;margin:-2px 0 8px}
#screen-start .discovery-art .art-orbit{width:340px;height:260px}
#screen-start .discovery-art .orbit-two{width:375px;height:225px}
#screen-start .discovery-art .art-label{font-size:13px;line-height:1.5;padding:8px 10px;gap:7px;border-radius:13px;white-space:nowrap}
#screen-start .discovery-art .art-label span{width:29px;height:29px;border-radius:9px;font-size:14px}
#screen-start .discovery-art .label-quran{right:0;top:62px;transform:rotate(-4deg)}
#screen-start .discovery-art .label-hadith{left:0;top:73px;transform:rotate(4deg)}
#screen-start .discovery-art .label-hadith span{background:#e1eafa;color:#3f6693}
#screen-start .discovery-art .label-seerah{right:9px;left:auto;bottom:24px;transform:rotate(3deg)}
#screen-start .discovery-art .label-aqeedah{right:calc(50% - 53px);top:0;transform:rotate(-3deg)}
#screen-start .discovery-art .label-aqeedah span{background:#f7e2dc;color:#974d39}
#screen-start .discovery-art .label-fiqh{left:20px;bottom:31px;transform:rotate(-4deg)}
#screen-start .discovery-art .label-fiqh span{background:#eee4f5;color:#76528c}
#screen-start .mode-picker{grid-area:modes}
#screen-start .mode-picker-heading{align-items:center;margin-bottom:15px}
#screen-start .mode-picker-heading h2{font-size:27px;margin:0}
#screen-start .mode-picker-heading>p{font-size:16px;margin:0;padding:0;max-width:none}
#screen-start .mode-cards{gap:18px;align-items:stretch}
#screen-start .mode-levels{--mode-color:#82d7bc;--mode-soft:#1d3e39;--mode-fill:#17362f;--mode-line:#366653;--mode-action:#166b53}
#screen-start .mode-daily{--mode-color:#aac9f5;--mode-soft:#263e5a;--mode-fill:#1c3048;--mode-line:#44648b;--mode-action:#2e5c99}
#screen-start .mode-marathon{--mode-color:#f0bd96;--mode-soft:#45362b;--mode-fill:#352c25;--mode-line:#805b42;--mode-action:#955024}
body.light-mode #screen-start .mode-levels{--mode-color:#155f4b;--mode-soft:#cfe8dc;--mode-fill:#edf6ef;--mode-line:#aacdb7}
body.light-mode #screen-start .mode-daily{--mode-color:#244d83;--mode-soft:#d6e4f7;--mode-fill:#eef4fc;--mode-line:#afc6e7}
body.light-mode #screen-start .mode-marathon{--mode-color:#8b471d;--mode-soft:#f3dcc4;--mode-fill:#fcf3e8;--mode-line:#e0bd95}
#screen-start .mode-card{display:flex;flex-direction:column;align-items:stretch;padding:22px;border:1px solid var(--mode-line);border-radius:21px;background:var(--mode-fill);box-shadow:0 6px 22px #152f3a06;min-width:0;text-align:start}
#screen-start .mode-card:hover{border-color:var(--mode-color);box-shadow:0 9px 25px #152f3a15;transform:translateY(-3px)}
#screen-start .mode-card:focus-visible{outline:3px solid var(--mode-color);outline-offset:4px}
#screen-start .mode-card-top{margin:0 0 17px;gap:12px}
#screen-start .mode-card .mode-icon{width:49px;height:49px;border-radius:15px;font-size:23px;background:var(--mode-soft);color:var(--mode-color)}
#screen-start .mode-tag,#screen-start #daily-streak-display{font-size:13px;line-height:1.6;color:var(--mode-color);font-weight:600;border:0;padding:0;background:none}
#screen-start .mode-info{display:block;flex:1}
#screen-start .mode-card .mode-title{font-size:25px;line-height:1.5;margin:0 0 7px;color:var(--text);font-weight:900}
#screen-start .mode-card .mode-desc{font-size:17px;line-height:1.8;color:var(--text2);max-width:none}
#screen-start .mode-bottom{border:0;margin-top:23px;padding:12px 15px;border-radius:12px;background:var(--mode-action);color:#fff;line-height:1.6;min-height:47px;font-size:16px;font-weight:700}
#screen-start .mode-bottom i{font-size:14px}
#screen-start .mode-comparison{margin-top:15px;border:1px solid var(--border);border-radius:15px;background:var(--card);overflow:hidden}
#screen-start .mode-comparison summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 20px;cursor:pointer;font-size:17px;font-weight:700;color:var(--text)}
#screen-start .mode-comparison summary::-webkit-details-marker{display:none}
#screen-start .mode-comparison summary>span{display:flex;align-items:center;gap:10px}
#screen-start .mode-comparison summary:focus-visible{outline:3px solid var(--accent);outline-offset:-4px}
#screen-start .comparison-open-label{font-size:14px;font-weight:500;color:var(--text2)}
#screen-start .comparison-open-label i{font-size:11px;transition:transform .15s}
#screen-start .mode-comparison[open] .comparison-open-label i{transform:rotate(180deg)}
#screen-start .comparison-content{padding:0 20px 18px}
#screen-start .comparison-content table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:15px;line-height:1.8;text-align:start}
#screen-start .comparison-content caption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#screen-start .comparison-content th,#screen-start .comparison-content td{padding:12px 10px;border-bottom:1px solid var(--border);vertical-align:top;text-align:start;overflow-wrap:anywhere}
#screen-start .comparison-content thead{color:var(--text2);background:var(--soft)}
#screen-start .comparison-content th:first-child{width:23%}
#screen-start .comparison-content th:nth-child(2){width:23%}
#screen-start .comparison-content p{font-size:15px;line-height:1.9;color:var(--text2);margin:14px 0 0}
#screen-start #welcome-back-area:empty,#screen-start #progress-transfer-slot:empty{display:none}
#screen-start .family-note{margin-top:24px}
@media(max-width:1000px){
  #screen-start .home-discovery{grid-template-columns:minmax(0,1fr) 360px;column-gap:22px}
  #screen-start .home-hero-choices h1{font-size:36px}
  #screen-start .choice-facts{min-width:0;max-width:520px;padding:12px 0;border-radius:14px}
  #screen-start .choice-facts>div{padding:0 10px}
  #screen-start .choice-facts strong{font-size:23px}
  #screen-start .mode-card{padding:18px}
  #screen-start .mode-card .mode-title{font-size:22px}
  #screen-start .mode-tag,#screen-start #daily-streak-display{font-size:12px}
}
@media(max-width:800px){
  #screen-start .home-discovery{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "modes" "art";row-gap:20px}
  #screen-start .discovery-art{width:min(100%,440px);justify-self:center;margin-top:4px}
}
@media(max-width:640px){
  #screen-start .home-shell{padding:0 16px 80px}
  #screen-start .home-header{padding:13px 0 10px;min-height:0;gap:8px}
  #screen-start .home-header .brand{gap:10px}
  #screen-start .brand-mark{width:38px;height:38px}
  #screen-start .brand strong{font-size:20px}
  #screen-start .brand small{font-size:11px;margin-top:1px}
  #screen-start .home-nav{gap:23px}
  #screen-start .home-nav a,#screen-start .home-nav button{font-size:14px;min-height:34px;height:auto;padding:5px 0;border:0}
  #screen-start .home-discovery{padding-top:19px;row-gap:17px}
  #screen-start .home-hero-choices{padding:0}
  #screen-start .home-hero-choices .eyebrow{font-size:12px}
  #screen-start .home-hero-choices h1{font-size:30px;line-height:1.4;letter-spacing:-.5px;margin:7px 0 8px}
  #screen-start .home-hero-choices h1 br{display:block}
  #screen-start .home-hero-choices h1 em:before{content:none}
  #screen-start .home-hero-choices .hero-description{font-size:16px;line-height:1.7;max-width:none}
  #screen-start .choice-facts{width:100%;max-width:none;border:0;background:none;display:flex;justify-content:space-between;padding:0;gap:8px;margin-top:11px}
  #screen-start .choice-facts>div{display:flex;align-items:baseline;gap:5px;padding:0;border:0}
  #screen-start .choice-facts strong{font-size:17px;line-height:1.6}
  #screen-start .choice-facts span{font-size:11px;line-height:1.6}
  #screen-start .discovery-art{height:280px;margin-top:8px}
  #screen-start .discovery-art .art-orbit{width:280px;height:245px}
  #screen-start .discovery-art .orbit-two{width:300px;height:220px}
  #screen-start .discovery-art .art-label{font-size:12px;padding:7px 8px;gap:6px}
  #screen-start .discovery-art .art-label span{width:27px;height:27px;font-size:13px}
  #screen-start .discovery-art .label-quran{top:61px;right:0}
  #screen-start .discovery-art .label-hadith{top:106px;left:0}
  #screen-start .discovery-art .label-seerah{bottom:29px;right:0}
  #screen-start .discovery-art .label-fiqh{bottom:10px;left:8px}
  #screen-start .mode-picker-heading{margin-bottom:10px;gap:5px}
  #screen-start .mode-picker-heading h2{font-size:21px;line-height:1.5}
  #screen-start .mode-picker-heading>p{display:block;font-size:12px}
  #screen-start .mode-cards{grid-template-columns:1fr;gap:10px}
  #screen-start .mode-card{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-rows:auto auto;gap:0 12px;padding:14px;border-radius:16px}
  #screen-start .mode-card-top{display:contents}
  #screen-start .mode-card .mode-icon{grid-column:1;grid-row:1/3;align-self:center;width:44px;height:47px;font-size:21px;border-radius:13px}
  #screen-start .mode-tag,#screen-start #daily-streak-display{grid-column:2;grid-row:2;justify-self:start;align-self:center;font-size:11px;line-height:1.6;margin-top:4px}
  #screen-start .mode-info{grid-column:2/4;grid-row:1;display:block}
  #screen-start .mode-card .mode-title{font-size:21px;line-height:1.4;margin:0 0 3px}
  #screen-start .mode-card .mode-desc{font-size:14px;line-height:1.65}
  #screen-start .mode-bottom{grid-column:3;grid-row:2;align-self:end;display:flex;gap:8px;min-height:0;padding:0;margin:5px 0 0;background:none;color:var(--mode-color);font-size:12px;line-height:1.6;white-space:nowrap}
  #screen-start .mode-bottom i{font-size:11px}
  #screen-start .mode-comparison{margin-top:12px;border-radius:13px}
  #screen-start .mode-comparison summary{padding:14px;font-size:15px;gap:10px}
  #screen-start .comparison-open-label{font-size:12px}
  #screen-start .comparison-content{padding:0 10px 12px}
  #screen-start .comparison-content table{font-size:13px}
  #screen-start .comparison-content th,#screen-start .comparison-content td{padding:9px 6px}
  #screen-start .comparison-content th:first-child{width:24%}
  #screen-start .comparison-content th:nth-child(2){width:25%}
  #screen-start .comparison-content p{font-size:14px}
}
@media(max-width:380px){
  #screen-start .home-hero-choices h1{font-size:27px}
  #screen-start .choice-facts span{font-size:10px}
  #screen-start .choice-facts strong{font-size:16px}
  #screen-start .mode-card{grid-template-columns:36px minmax(0,1fr) auto;column-gap:9px;padding:12px}
  #screen-start .mode-card .mode-icon{width:36px;height:42px;font-size:18px}
  #screen-start .mode-card .mode-title{font-size:20px}
  #screen-start .mode-tag,#screen-start #daily-streak-display{font-size:10px}
  #screen-start .mode-bottom{font-size:11px;gap:5px}
}
/* Each challenge has its own color; its icon is decorative background artwork. */
#screen-start .mode-card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:0}
#screen-start .mode-card-top{display:block;position:static;margin:0 0 12px}
#screen-start .mode-card .mode-icon{position:absolute;z-index:-1;inset-inline-end:-18px;top:auto;bottom:42px;display:grid;place-items:center;min-width:0;min-height:0;width:144px;height:144px;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;color:var(--mode-color);opacity:.095;font-size:127px;line-height:1;transform:rotate(-13deg);pointer-events:none}
#screen-start .mode-info{display:block;flex:1;min-width:0}
#screen-start .mode-tag,#screen-start #daily-streak-display{display:block;margin:0;font-size:13px;font-weight:700;line-height:1.65}
#screen-start .mode-card .mode-desc{padding-inline-end:30px}
#screen-start .mode-bottom{position:relative;z-index:1}
body.light-mode #screen-start .mode-levels{--mode-color:#126147;--mode-fill:#def2e5;--mode-line:#99cbb0;--mode-action:#156748}
body.light-mode #screen-start .mode-daily{--mode-color:#234e8c;--mode-fill:#e0edff;--mode-line:#9fbce7;--mode-action:#315f9d}
body.light-mode #screen-start .mode-marathon{--mode-color:#894219;--mode-fill:#ffead3;--mode-line:#e0b389;--mode-action:#99501f}
@media(max-width:640px){
  #screen-start .mode-card{display:flex;padding:16px 18px;border-radius:18px}
  #screen-start .mode-card-top{display:block;margin:0 0 6px}
  #screen-start .mode-tag,#screen-start #daily-streak-display{font-size:11px;margin:0}
  #screen-start .mode-card .mode-title{font-size:23px;line-height:1.45;margin-bottom:4px}
  #screen-start .mode-card .mode-desc{font-size:15px;line-height:1.7;padding-inline-end:28px}
  #screen-start .mode-card .mode-icon{width:106px;height:106px;font-size:92px;inset-inline-end:-16px;bottom:38px;opacity:.09}
  #screen-start .mode-bottom{display:flex;align-items:center;justify-content:space-between;align-self:stretch;gap:12px;width:100%;min-height:37px;margin-top:12px;padding:8px 11px;border-radius:9px;background:var(--mode-action);color:#fff;font-size:13px;line-height:1.5;white-space:normal}
}
@media(max-width:380px){
  #screen-start .mode-card{padding:14px}
  #screen-start .mode-card .mode-title{font-size:21px}
  #screen-start .mode-card .mode-desc{font-size:14px}
}
@media(max-width:640px){
  #screen-start.active{bottom:calc(60px + env(safe-area-inset-bottom,0px))}
  body:has(#screen-start.active) .utility-dock{inset-inline:0;bottom:0;gap:7px;align-items:center;justify-content:flex-end;height:calc(60px + env(safe-area-inset-bottom,0px));padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));border:0;border-top:1px solid var(--border);border-radius:0;box-shadow:0 -3px 14px #153b3108;background:var(--card)}
  body:has(#screen-start.active) .utility-dock::before{content:"الصوت والمظهر";margin-inline-end:auto;font-size:12px;font-weight:600;color:var(--text2)}
  body:has(#screen-start.active) .utility-dock button{width:42px;height:42px;flex-shrink:0}
}
@media(prefers-reduced-motion:reduce){#screen-start .mode-card,#screen-start .comparison-open-label i{transition:none}#screen-start .mode-card:hover{transform:none}}