:root{
  --bg:#071022;--panel:#101d37;--panel2:#162747;--text:#f7fbff;--muted:#9fb2cf;
  --cyan:#57d9ff;--blue:#4d79ff;--gold:#ffd35a;--green:#62e39b;--red:#ff6177;
  --line:rgba(255,255,255,.1);--shadow:0 18px 55px rgba(0,0,0,.34);
}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}.app-shell{position:relative;width:100%;height:100dvh;min-height:100%;overflow:hidden;background:radial-gradient(circle at 30% 15%,#152e64 0,transparent 35%),linear-gradient(145deg,#081126,#06101e 65%,#0c1830)}
.ambient{position:absolute;width:38vmax;height:38vmax;border-radius:50%;filter:blur(80px);opacity:.2;pointer-events:none}.ambient-a{left:-18vmax;bottom:-18vmax;background:#357cff}.ambient-b{right:-20vmax;top:-18vmax;background:#4ee4ff}
.screen{position:absolute;inset:0;display:none}.screen.active{display:flex}.screen-cover{align-items:center;justify-content:center;overflow:auto}.cover-bg{position:absolute;inset:0;background:url('assets/cover.webp') center/cover no-repeat;transform:scale(1.02)}.cover-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,10,24,.93) 0%,rgba(5,12,27,.82) 40%,rgba(4,10,24,.38) 72%,rgba(4,10,24,.7) 100%),linear-gradient(0deg,rgba(4,9,22,.9),transparent 48%)}
.cover-content{position:relative;z-index:2;width:min(720px,92vw);margin-right:min(36vw,580px);padding:clamp(22px,4vw,54px) 0;animation:rise .55s ease-out both}.brand-pill{display:inline-flex;padding:8px 14px;border:1px solid rgba(122,213,255,.36);border-radius:999px;background:rgba(7,20,44,.55);font-size:clamp(10px,1.1vw,13px);font-weight:900;letter-spacing:.16em;color:#c4ecff;backdrop-filter:blur(8px)}
.eyebrow{margin-top:22px;color:var(--cyan);font-weight:900;letter-spacing:.22em;font-size:clamp(11px,1.3vw,14px)}h1{font-size:clamp(54px,8vw,102px);line-height:.84;margin:8px 0 8px;letter-spacing:-.055em;font-weight:1000;text-shadow:0 10px 35px rgba(0,0,0,.35)}h1 span{color:var(--gold)}.subtitle{font-size:clamp(16px,2vw,22px);color:#c7d7ec;margin:14px 0 20px}
.difficulty-row{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}.chip{border:1px solid var(--line);background:rgba(7,17,39,.72);border-radius:999px;padding:9px 15px;font-size:12px;font-weight:900;letter-spacing:.07em;cursor:pointer;transition:.2s}.chip:hover{transform:translateY(-1px);border-color:rgba(87,217,255,.45)}.chip.active{background:linear-gradient(135deg,#377ef8,#50c9ff);border-color:transparent;box-shadow:0 8px 25px rgba(64,157,255,.3)}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mode-card{min-height:86px;border:1px solid var(--line);border-radius:18px;background:rgba(9,21,44,.78);backdrop-filter:blur(10px);display:grid;grid-template-columns:48px 1fr auto;align-items:center;text-align:left;gap:12px;padding:14px 16px;cursor:pointer;box-shadow:0 9px 30px rgba(0,0,0,.14);transition:transform .18s,border-color .18s,background .18s}.mode-card:hover{transform:translateY(-3px);border-color:rgba(108,218,255,.5);background:rgba(17,36,70,.92)}.mode-card.primary{background:linear-gradient(135deg,rgba(44,111,242,.94),rgba(33,184,235,.87));border-color:transparent}.mode-card.daily{border-color:rgba(255,211,90,.24)}.mode-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.11);font-size:22px}.mode-card b{display:block;font-size:15px}.mode-card small{display:block;margin-top:4px;color:#afc4df;font-size:11px}.mode-card.primary small{color:#d9f5ff}.mode-card em{font-style:normal;font-weight:1000;font-size:11px;letter-spacing:.08em;color:var(--gold)}.mode-card.primary em{color:white}.cover-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:14px;color:#aebfd6;font-size:12px}.dot{width:8px;height:8px;background:var(--green);border-radius:50%;display:inline-block;margin-right:7px;box-shadow:0 0 12px var(--green)}
.screen-game{flex-direction:column;overflow:auto}.topbar{height:72px;min-height:72px;padding:0 max(16px,env(safe-area-inset-left));display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line);background:rgba(7,15,31,.68);backdrop-filter:blur(14px);position:relative;z-index:5}.icon-btn{width:42px;height:42px;border-radius:13px;border:1px solid var(--line);background:rgba(255,255,255,.055);font-size:20px;font-weight:900;cursor:pointer}.icon-btn:hover{background:rgba(255,255,255,.1)}.mode-name{line-height:1.1}.mode-name small{display:block;color:var(--cyan);font-size:9px;letter-spacing:.16em;font-weight:900}.mode-name b{font-size:15px}.top-actions{margin-left:auto}
.game-main{width:min(980px,94vw);margin:0 auto;padding:clamp(12px,2.2vh,24px) 0 max(18px,env(safe-area-inset-bottom))}.hud-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}.hud-card{background:linear-gradient(180deg,rgba(24,41,75,.88),rgba(11,25,50,.88));border:1px solid var(--line);border-radius:15px;padding:10px 14px;box-shadow:0 10px 28px rgba(0,0,0,.12)}.hud-card small{display:block;color:#91a8c8;font-size:9px;font-weight:900;letter-spacing:.14em}.hud-card b{display:block;margin-top:3px;font-size:clamp(18px,2.4vw,25px)}.streak-card .fire{color:var(--gold);font-size:.72em;margin-left:3px}.hud-special{text-align:right}.progress-track{height:7px;background:rgba(255,255,255,.07);border-radius:999px;margin:10px 2px 12px;overflow:hidden}.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan),#72f4bb);border-radius:inherit;transition:width .3s ease}
.question-card{background:linear-gradient(160deg,rgba(19,34,63,.95),rgba(10,22,43,.96));border:1px solid var(--line);border-radius:24px;padding:clamp(14px,2vw,22px);box-shadow:var(--shadow);position:relative;overflow:hidden}.question-card:before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(75,138,255,.09);filter:blur(15px);right:-90px;top:-110px}.question-topline{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:11px;font-size:clamp(10px,1.4vw,13px);letter-spacing:.16em;font-weight:1000;color:#bed1e9}.difficulty-badge{padding:6px 9px;border-radius:999px;background:rgba(87,217,255,.1);border:1px solid rgba(87,217,255,.2);color:#80ddff;font-size:9px}
.flag-stage{height:clamp(185px,35vh,330px);max-height:36vh;min-height:170px;position:relative;display:flex;align-items:center;justify-content:center;border-radius:18px;background:radial-gradient(circle at 50% 50%,rgba(79,136,226,.2),rgba(5,14,30,.6) 68%),linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.07);overflow:hidden}.flag-glow{position:absolute;width:min(68%,500px);height:55%;background:#448aff;filter:blur(70px);opacity:.13}.flag-stage img{position:relative;z-index:2;max-width:min(78%,580px);max-height:78%;width:auto;height:auto;object-fit:contain;border-radius:9px;box-shadow:0 16px 34px rgba(0,0,0,.45),0 0 0 6px rgba(255,255,255,.92);transition:transform .24s ease,filter .24s ease}.flag-stage img.pop{animation:flagPop .38s cubic-bezier(.2,.8,.2,1)}.correct-flash,.wrong-flash{position:absolute;inset:auto 18px 18px auto;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:39px;font-weight:1000;opacity:0;transform:scale(.6);z-index:4}.correct-flash{background:var(--green);color:#07281a}.wrong-flash{background:var(--red);color:#390813}.correct-flash.show,.wrong-flash.show{animation:stamp .55s ease both}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.choice-btn{position:relative;min-height:62px;border-radius:15px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(25,46,82,.94),rgba(15,31,58,.94));display:flex;align-items:center;text-align:left;gap:12px;padding:10px 15px;cursor:pointer;transition:transform .14s,border-color .14s,background .14s;overflow:hidden}.choice-btn:hover:not(:disabled){transform:translateY(-2px);border-color:rgba(99,211,255,.48);background:linear-gradient(180deg,rgba(34,62,107,.98),rgba(18,39,72,.98))}.choice-btn .key{flex:0 0 31px;height:31px;border-radius:9px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#a9c7e8;font-weight:1000;font-size:12px}.choice-btn .name{font-weight:850;font-size:clamp(13px,1.8vw,17px);line-height:1.15}.choice-btn.correct{border-color:rgba(98,227,155,.72);background:linear-gradient(135deg,rgba(34,126,84,.9),rgba(31,98,76,.94));animation:correctPulse .45s ease}.choice-btn.wrong{border-color:rgba(255,97,119,.68);background:linear-gradient(135deg,rgba(132,43,63,.9),rgba(85,31,49,.94));animation:shake .34s ease}.choice-btn.dim{opacity:.2;filter:saturate(.4)}.choice-btn:disabled{cursor:default}.utility-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:11px;min-height:43px}.utility-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.utility-btn{border:1px solid rgba(255,211,90,.25);border-radius:12px;background:rgba(255,211,90,.08);padding:8px 13px;cursor:pointer}.utility-btn span{display:block;color:var(--gold);font-weight:1000;font-size:11px}.utility-btn small{color:#aabbd1;font-size:9px}.utility-btn:disabled{opacity:.35;cursor:default}.reward-btn{border-color:rgba(98,227,155,.3);background:rgba(98,227,155,.09)}.reward-btn span{color:var(--green)}.reward-btn.busy{opacity:.6;pointer-events:none}.keyboard-tip{font-size:10px;color:#7890ae}.keyboard-tip b{color:#bcd9f5}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);padding:10px 16px;border-radius:999px;background:rgba(8,18,37,.94);border:1px solid rgba(255,255,255,.13);font-size:12px;font-weight:800;opacity:0;pointer-events:none;transition:.25s;z-index:20}.toast.show{opacity:1;transform:translate(-50%,0)}
.screen-result{align-items:center;justify-content:center;padding:20px;overflow:auto;background:radial-gradient(circle at 50% 25%,rgba(58,132,255,.26),transparent 38%)}.result-panel{width:min(520px,94vw);padding:clamp(26px,5vw,46px);border-radius:28px;background:linear-gradient(160deg,rgba(21,39,72,.97),rgba(8,20,42,.98));border:1px solid var(--line);box-shadow:var(--shadow);text-align:center;animation:resultIn .55s cubic-bezier(.2,.9,.2,1)}.result-panel .eyebrow{margin-top:10px}.result-burst{margin:0 auto;width:72px;height:72px;border-radius:22px;display:grid;place-items:center;font-size:40px;background:linear-gradient(135deg,#ffbd36,#fff084);color:#664300;box-shadow:0 12px 35px rgba(255,198,61,.2);transform:rotate(-7deg)}.result-panel h2{font-size:clamp(32px,7vw,52px);margin:8px 0 5px;letter-spacing:-.04em}.result-panel p{margin:0;color:var(--muted)}.result-score{margin:20px auto 14px;padding:16px;border-radius:18px;background:rgba(255,255,255,.055);border:1px solid var(--line)}.result-score small{display:block;color:#8ea9ca;font-size:9px;letter-spacing:.15em;font-weight:900}.result-score strong{display:block;font-size:clamp(45px,9vw,66px);line-height:1;color:var(--gold);margin-top:5px}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.result-stats div{padding:12px 7px;border-radius:14px;background:rgba(255,255,255,.035)}.result-stats b{display:block;font-size:21px}.result-stats small{display:block;font-size:9px;color:#89a0bd;margin-top:3px}.result-stars{font-size:34px;letter-spacing:7px;color:var(--gold);margin:16px 0 12px}.big-btn{width:100%;min-height:55px;border:0;border-radius:15px;background:linear-gradient(135deg,#3879ff,#4ed7ff);font-weight:1000;letter-spacing:.08em;box-shadow:0 12px 28px rgba(54,126,255,.28);cursor:pointer}.text-btn{border:0;background:none;color:#8da7c6;padding:14px;cursor:pointer;font-size:12px}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes flagPop{0%{transform:scale(.91);opacity:.35}100%{transform:scale(1);opacity:1}}@keyframes stamp{0%{opacity:0;transform:scale(.5) rotate(-15deg)}35%{opacity:1;transform:scale(1.1) rotate(5deg)}100%{opacity:0;transform:scale(.95)}}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}60%{transform:translateX(5px)}}@keyframes correctPulse{50%{transform:scale(1.018)}}@keyframes resultIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:none}}
@media (max-width:1050px){.cover-content{margin-right:22vw}.cover-shade{background:linear-gradient(90deg,rgba(4,10,24,.95),rgba(4,10,24,.82) 65%,rgba(4,10,24,.68))}}
@media (max-width:760px){.cover-content{margin:0;width:min(620px,91vw);padding:30px 0}.cover-shade{background:linear-gradient(0deg,rgba(4,10,24,.98) 0%,rgba(4,10,24,.78) 52%,rgba(4,10,24,.64) 100%)}.cover-bg{filter:saturate(.9) brightness(.72)}.mode-grid{grid-template-columns:1fr 1fr}.mode-card{grid-template-columns:42px 1fr;min-height:80px;padding:12px}.mode-card em{display:none}.mode-icon{width:38px;height:38px}.keyboard-tip{display:none}}
@media (max-width:560px){html,body{overflow:hidden}.screen-game{overflow:auto}.topbar{height:60px;min-height:60px}.game-main{width:94vw;padding:10px 0 16px}.mode-grid{grid-template-columns:1fr}.mode-card{min-height:68px}.cover-content{padding:22px 0}h1{font-size:58px}.subtitle{margin:8px 0 14px}.brand-pill{padding:6px 10px}.eyebrow{margin-top:13px}.flag-stage{height:clamp(165px,29vh,240px);min-height:150px}.flag-stage img{max-width:83%;max-height:75%;box-shadow:0 12px 28px rgba(0,0,0,.4),0 0 0 4px rgba(255,255,255,.92)}.choice-grid{grid-template-columns:1fr;gap:7px}.choice-btn{min-height:52px;padding:8px 12px}.choice-btn .key{height:28px;flex-basis:28px}.hud-card{padding:8px 10px}.question-card{border-radius:19px;padding:12px}.utility-row{margin-top:8px}.cover-bottom{font-size:10px}}
@media (max-height:800px) and (orientation:landscape){.topbar{height:54px;min-height:54px}.game-main{padding:7px 0 10px;width:min(1040px,96vw)}.hud-card{padding:5px 10px}.hud-card b{font-size:17px}.progress-track{margin:6px 2px 7px;height:5px}.question-card{padding:9px 12px;border-radius:17px}.question-topline{margin-bottom:6px}.flag-stage{height:31vh;min-height:130px}.flag-stage img{max-height:76%}.choice-grid{margin-top:8px;gap:7px}.choice-btn{min-height:46px;padding:6px 11px}.utility-row{min-height:34px;margin-top:5px}.utility-btn{padding:5px 10px}.mode-grid{gap:7px}.mode-card{min-height:64px}.cover-content{padding:14px 0}.subtitle{margin:7px 0 10px}.difficulty-row{margin-bottom:9px}.eyebrow{margin-top:8px}.brand-pill{padding:5px 10px}h1{font-size:clamp(48px,9vh,74px);margin:4px 0}}

@media (max-width:560px){.utility-row{align-items:flex-start}.utility-actions{width:100%}.utility-btn{flex:1;min-width:118px}.reward-btn{flex:1.25}}

/* Responsive overflow hardening: keep every screen inside the browser viewport. */
html,body{
  max-width:100%;
  overflow:hidden;
  overscroll-behavior:none;
}
.app-shell,.screen{
  width:100%;
  max-width:100%;
  min-width:0;
}
.screen-cover,.screen-game,.screen-result{
  overflow-x:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.screen-cover::-webkit-scrollbar,.screen-game::-webkit-scrollbar,.screen-result::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}
.screen-cover{overflow-y:auto;}
.screen-game{overflow-y:auto;}
.screen-result{overflow-y:auto;}
.cover-content{
  max-width:calc(100vw - 32px);
  min-width:0;
}
.game-main{
  max-width:calc(100vw - 24px);
  min-width:0;
}
.question-card,.mode-grid,.mode-card,.choice-grid,.choice-btn,.utility-row,.utility-actions{
  min-width:0;
  max-width:100%;
}
.result-panel{
  width:min(520px,calc(100vw - 40px));
  max-width:100%;
}
@media (max-width:1050px) and (min-width:761px){
  .cover-content{
    width:min(680px,68vw);
    margin-right:min(22vw,230px);
  }
}
@media (max-width:760px){
  .cover-content{
    width:min(620px,calc(100vw - 32px));
    max-width:calc(100vw - 32px);
  }
}
@media (max-width:420px){
  .screen-result{padding-left:12px;padding-right:12px}
  .result-panel{width:100%;max-width:100%}
  .game-main{width:calc(100vw - 20px);max-width:calc(100vw - 20px)}
}