/* White-led Ashkanani identity. Layout and game behavior stay in enhancements. */
html,body{background:var(--brand-white)}
body{font-family:'IBM Plex Sans Arabic','Geeza Pro',system-ui,sans-serif}
button,input,select{font:inherit}button,a,summary,input,select{touch-action:manipulation}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--brand-green);outline-offset:4px}
.sheet{background:#171C1970;backdrop-filter:blur(7px)}
.card{background:var(--brand-white);border:1px solid var(--brand-line);border-radius:24px;box-shadow:var(--soft2)}
.card h1,.card h2{letter-spacing:-.025em}.opt{border-width:2px}.opt:not(:disabled):hover{background:var(--brand-tint);border-color:var(--brand-green)}
/* An opaque white card keeps the original logo and Arabic text clear over 3D. */
#s_start{align-items:center;justify-content:flex-start;background:linear-gradient(270deg,#F7F8F5D9 0%,#F7F8F580 30%,#F7F8F500 75%);backdrop-filter:none;padding:24px 5vw;overflow:auto}
#s_start>.card{display:block;background:var(--brand-white);border:1px solid var(--brand-line);border-top:4px solid var(--brand-yellow);box-shadow:var(--soft2);max-width:440px;margin: auto 0;width:100%;max-height:none;overflow:visible;flex-shrink:0}
.v2-welcome{padding:24px;color:var(--brand-black)}.v2-journey{display:none}
.v2-brand{display:flex;margin:0 0 18px}.v2-brand img{width:96px;height:96px;border-radius:50%;background:var(--brand-white);padding:0;object-fit:contain;flex:none}
.v2-brand div{border-color:var(--brand-line)}.v2-brand small{color:var(--brand-muted);font-size:.78rem}.v2-label{color:var(--brand-deep);font-size:.76rem}
#s_start h1{color:var(--brand-black);font-size:4.2rem;font-weight:900;line-height:1.15;letter-spacing:-.04em;margin-bottom:10px}
#s_start .lead{color:var(--brand-muted);font-size:1rem;line-height:1.8;max-width:28ch;margin-bottom:20px}
#s_start .menuBtn{border:1px solid var(--brand-line);background:var(--brand-white);color:var(--brand-black);min-height:64px;border-radius:14px;padding:14px 17px}
#s_start .menuBtn .tx b{color:var(--brand-black)}#s_start .menuBtn .tx i{font-size:.8rem;color:var(--brand-muted);opacity:1}
#s_start .menuBtn.go{background:var(--brand-yellow);border-color:var(--brand-yellow);color:var(--brand-black)}#s_start .menuBtn.go .tx b,#s_start .menuBtn.go .tx i{color:var(--brand-black)}
#s_start .menuBtn.gr{background:var(--brand-green);color:var(--brand-white);border-color:var(--brand-green)}#s_start .menuBtn.gr .tx b,#s_start .menuBtn.gr .tx i{color:var(--brand-white)}
#s_start .menuBtn:hover{transform:translateX(-3px)}
#s_start .chip{color:var(--brand-deep);background:var(--brand-tint);border:1px solid var(--brand-line);min-height:42px;font-size:.8rem;box-shadow:none}
#s_start .v2-source{color:var(--brand-muted);font-size:.73rem;line-height:1.8;max-width:38ch;margin-top:16px}
.v2-appearance{color:var(--brand-muted);margin:0}.v2-appearance summary{min-height:40px}.v2-appearance>div{display:none!important}
.quality-setting{display:flex;gap:12px;align-items:center;padding:10px 0;color:var(--brand-black)}.quality-setting select{min-height:44px;max-width:230px;border-radius:8px;background:var(--brand-white);color:var(--brand-black);padding:8px;border:1px solid var(--brand-line)}
.player-account{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.72rem;color:var(--brand-muted);margin-bottom:12px}
.player-account #playerName{color:var(--brand-deep);font-weight:700}.player-account #saveState{border-inline-start:1px solid var(--brand-line);padding-inline-start:8px}
.player-account button{background:none;color:var(--brand-deep);padding:0;text-decoration:underline;text-underline-offset:4px;min-height:38px;font-size:.72rem}
.v2-mission{background:var(--brand-white);border:1px solid var(--brand-line);border-top:3px solid var(--brand-green);color:var(--brand-black);box-shadow:var(--soft2);border-radius:20px;backdrop-filter:none}
#v2Goal{color:var(--brand-black)}#v2GoalDetail,.miqat-speaking #v2GoalDetail{color:var(--brand-muted)}#v2GoalKind{color:var(--brand-deep);border-color:var(--brand-line);background:var(--brand-tint)}
#miqatLocation{color:var(--brand-deep)}.miqat-speaking #v2GoalDetail{border-inline-start-color:var(--brand-green)}
#v2Assist{background:var(--brand-tint);color:var(--brand-deep);border:1px solid var(--brand-line)}#v2Assist[aria-pressed=true]{background:var(--brand-green);color:var(--brand-white);border-color:var(--brand-green)}
#v2IdleAction{color:var(--brand-muted);background:var(--brand-surface);border-color:var(--brand-line)}#v2Mission #act{background:var(--brand-yellow);color:var(--brand-black);font-weight:800}
.pill,#topRight .btn{background:var(--brand-white);color:var(--brand-black);border:1px solid var(--brand-line);box-shadow:var(--soft)}
#actPill b,#scoreNum{color:var(--brand-black)}#actPill i,#scorePill em{color:var(--brand-muted)}
.v2-stages span{background:var(--brand-white);color:var(--brand-muted);border-radius:5px}.v2-stages span.current{background:var(--brand-yellow);color:var(--brand-black)}.v2-stages span.done{background:var(--brand-green);color:var(--brand-white)}
#prog{background:#FFFFFF99}#progFill{background:var(--brand-green)}#stick{background:#FFFFFF80;border-color:#FFFFFFCC}#knob{background:#2E7D4FB3;border-color:var(--brand-white)}
#dua,#dua.miqat-guide{border:1px solid var(--brand-line);border-top:4px solid var(--brand-yellow);box-shadow:var(--soft2);background:var(--brand-white);border-radius:22px}
#duaTx{color:var(--brand-black)}#duaNote{color:var(--brand-muted)}#miqatSpeaker{color:var(--brand-deep);border-color:var(--brand-line)}
#dua.miqat-guide #duaTx{background:var(--brand-tint)}#duaX{background:var(--brand-yellow);color:var(--brand-black)}
#load{background:var(--brand-white);color:var(--brand-deep)}
.account-gate{position:fixed;inset:0;z-index:110;overflow:auto;overscroll-behavior:contain;background:var(--brand-white);color:var(--brand-black);padding:24px 5vw;touch-action:pan-y;border-top:4px solid var(--brand-yellow)}
.account-back{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;max-width:1100px;margin:auto;color:var(--brand-deep);text-decoration:none;font-size:.85rem;min-height:96px}.account-back img{width:96px;height:96px}
.account-shell{min-height:calc(100dvh - 156px);max-width:1100px;margin:auto;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:10%}
.account-intro{padding:35px 0}.eyebrow{font-size:.82rem;letter-spacing:.025em;color:var(--brand-deep);display:flex;gap:18px;align-items:center}.eyebrow span{font-size:.7rem;border:1px solid var(--brand-yellow);background:var(--brand-yellow);color:var(--brand-black);border-radius:5px;padding:3px 7px}
.account-intro h1{font-size:6rem;line-height:1.3;color:var(--brand-black);letter-spacing:-.05em;margin:14px 0 30px}.account-intro h1 span{display:block;font-size:1.7rem;letter-spacing:-.02em;font-weight:500;color:var(--brand-deep)}
.account-intro p{font-size:1.15rem;line-height:1.95;color:var(--brand-muted)}.account-intro small{display:block;font-size:.78rem;line-height:1.9;color:var(--brand-muted);max-width:34ch}
.account-route{display:flex;align-items:center;gap:12px;margin:40px 0;color:var(--brand-deep);font-size:.8rem}.account-route i{width:45px;border-top:2px solid var(--brand-yellow)}
.account-form{border:1px solid var(--brand-line);background:var(--brand-white);color:var(--brand-black);border-radius:24px;padding:30px;box-shadow:var(--soft2);max-width:460px;width:100%}
.account-form h2{font-size:1.5rem;line-height:1.6;margin:0 0 4px}.muted{color:var(--brand-muted);font-size:.82rem;line-height:1.75}.auth-tabs{display:flex;background:var(--brand-tint);border-radius:10px;padding:4px;margin:18px 0}
.auth-tabs button{flex:1;min-height:42px;background:none;border-radius:7px;color:var(--brand-muted);font-size:.85rem}.auth-tabs button[aria-pressed=true]{background:var(--brand-white);box-shadow:var(--soft);color:var(--brand-deep);font-weight:800}
.account-form label:not(.consent){display:block;text-align:start;font-size:.83rem;margin:11px 0 0;color:var(--brand-black)}
.account-form input:not([type=checkbox]){display:block;user-select:text;width:100%;min-width:0;background:var(--brand-white);border:1px solid #A5BCAD;min-height:48px;border-radius:10px;color:var(--brand-black);padding:10px 13px;margin-top:6px;font-size:1rem}
.account-identifiers.registering{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:end;gap:10px}.account-identifiers label{min-width:0}.account-identifiers [hidden]{display:none!important}.account-identifiers.registering input{padding-inline:9px}@media(max-width:340px){.account-identifiers.registering{grid-template-columns:1fr}}
.consent{display:flex;align-items:flex-start;gap:10px;text-align:start;margin:17px 0;font-size:.79rem;line-height:1.6;color:var(--brand-black)}.consent input{flex:0 0 auto;accent-color:var(--brand-green);width:19px;height:19px;margin-top:2px}.consent small{display:block;color:var(--brand-muted);font-size:.72rem;margin-top:4px}
.auth-primary,.auth-guest{display:flex;justify-content:center;align-items:center;width:100%;min-height:49px;border-radius:10px;font-weight:800;padding:11px 16px;font-size:.9rem;gap:15px}
.auth-primary{background:var(--brand-green);color:var(--brand-white);border:1px solid var(--brand-green)}.auth-primary:disabled{opacity:.55}.auth-guest{background:var(--brand-yellow);border:1px solid var(--brand-yellow);color:var(--brand-black);margin-top:10px}.auth-guest:hover{filter:brightness(.97)}
.form-error{color:#A6342B;font-size:.8rem;line-height:1.6;margin:8px 0}.form-error:empty{display:none}.or{display:flex;align-items:center;gap:14px;color:var(--brand-muted);font-size:.75rem;margin:14px 0}.or:before,.or:after{content:'';border-top:1px solid var(--brand-line);flex:1}
#googleSignin{display:flex;justify-content:center;min-height:0}.guest-note{font-size:.72rem;line-height:1.7;color:var(--brand-muted);text-align:center;margin:9px 0 0}.owner-link{display:block;text-align:center;margin-top:15px;font-size:.73rem;color:var(--brand-deep);min-height:30px;text-underline-offset:4px}
.privacy-dialog{margin:auto;width:min(480px,calc(100% - 32px));max-height:90dvh;overflow:auto;border:1px solid var(--brand-line);border-radius:20px;background:var(--brand-white);padding:25px;color:var(--brand-black);box-shadow:var(--soft2)}.privacy-dialog::backdrop{background:#171C19B8;backdrop-filter:blur(4px)}.privacy-dialog h2{font-size:1.4rem}.privacy-dialog p{font-size:.9rem;line-height:1.9;margin:12px 0}
@media(max-width:700px){
 .account-gate{padding:12px 16px}.account-back{min-height:72px}.account-back img{width:72px;height:72px}.account-shell{display:block;min-height:0;max-width:460px}.account-intro{padding:12px 8px 20px}.account-intro h1{font-size:3rem;line-height:1.3;margin:8px 0}.account-intro h1 span{font-size:1.1rem;display:inline;margin-inline-start:16px}.account-intro p,.account-route,.account-intro small{display:none}.account-form{padding:22px 20px;border-radius:20px}.account-form h2{font-size:1.3rem}
 #s_start{justify-content:center;align-items:flex-start;padding:16px 16px;background:linear-gradient(0deg,#F7F8F5BB,#F7F8F520)}
 #s_start>.card{display:block;max-width:460px;max-height:none;margin-block:auto}.v2-welcome{padding:20px}.v2-brand{display:flex;margin:0 0 12px}.v2-brand img{width:76px;height:76px}.v2-brand div small{display:block;font-size:.7rem}.v2-brand .v2-label{font-size:.67rem}
 #s_start h1{font-size:3.4rem;margin-bottom:8px}#s_start .lead{font-size:.91rem;line-height:1.7;max-width:29ch;margin-bottom:14px}#s_start .menuBtn{min-height:58px;padding:11px 14px;margin:8px 0}#s_start .menuBtn .tx b{font-size:1rem}#s_start .menuBtn .tx i{font-size:.73rem}
 .player-account{margin:0;gap:6px;font-size:.67rem}.player-account button{font-size:.67rem;min-height:32px}.v2-source{margin-top:10px!important}#s_start .chip{min-height:38px;padding:8px 12px;font-size:.74rem}
 .v2-appearance summary{min-height:35px;font-size:.74rem}#s_start .v2-source{font-size:.68rem}.v2-mission{padding-top:13px}.v2-stages span{font-size:.61rem}
}
@media(max-height:740px) and (max-width:700px){#s_start h1{font-size:2.9rem}#s_start .lead{font-size:.85rem}.v2-welcome{padding:16px}.player-account{margin-top:8px}}
@media(max-height:520px) and (orientation:landscape){
 #s_start{align-items:flex-start;padding:14px 4vw;overflow:auto}#s_start>.card{display:block;max-width:400px;margin-block:0}.v2-welcome{padding:16px}.v2-brand{display:flex;margin-bottom:8px}.v2-brand img{width:64px;height:64px}.v2-journey{display:none}
 #s_start h1{font-size:2.5rem}#s_start .lead{font-size:.8rem;line-height:1.5;margin-bottom:8px}#s_start .menuBtn{min-height:48px;padding:6px 12px}#s_start .chips{margin:8px 0}.v2-appearance{display:none}
 .player-account{display:flex;margin-bottom:4px}.player-account #saveState{display:none}.player-account button{min-height:36px}
 .account-shell{align-items:start;gap:30px}.account-intro h1{font-size:3.5rem}.account-form{padding:22px}.v2-mission{left:35%;width:440px}
}
@media(prefers-reduced-motion:reduce){.sheet{backdrop-filter:none}#s_start .menuBtn:hover{transform:none}}