.boot-hidden{opacity:0;pointer-events:none}
.preloader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at top,#1a2b67,#0a1029 62%);overflow:hidden}
.preloader:before{content:'';position:absolute;inset:0;background:url('assets/ui/bg.webp') center/cover no-repeat;opacity:.38;filter:saturate(1.1)}
.preloader:after{content:'';position:absolute;inset:0;background:linear-gradient(145deg,rgba(7,11,29,.86),rgba(8,25,35,.62) 45%,rgba(11,18,43,.9))}
.preloader-card{position:relative;z-index:1;width:min(560px,88vw);padding:34px 34px 26px;border-radius:28px;background:linear-gradient(180deg,rgba(17,25,56,.96),rgba(9,16,38,.94));border:1px solid rgba(255,255,255,.1);box-shadow:0 22px 80px rgba(0,0,0,.45);text-align:center;color:#eef7ff}
.preloader-logo{font-size:42px;line-height:.94;font-weight:1000;letter-spacing:-.04em}
.preloader-logo span{color:var(--gold);text-shadow:0 0 24px rgba(255,210,79,.3)}
.preloader-sub{margin-top:12px;color:#d8e7ff;font-size:18px}
.preloader-bar{margin-top:22px;height:16px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.preloader-fill{height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--cyan),var(--aqua));box-shadow:0 0 18px rgba(87,255,207,.45);transition:width .18s ease}
.preloader-meta{margin-top:12px;display:flex;justify-content:space-between;gap:16px;align-items:center;font-size:15px;color:#a8bdd8}
.preloader-meta b{font-size:22px;color:white}
.preloader-tip{margin-top:16px;padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);font-size:14px;color:#d9eaff}
.preloader.hidden{opacity:0;pointer-events:none;transition:opacity .3s ease}
:root{
  --bg:#090f26;
  --ink:#eef7ff;
  --muted:#8ea6c5;
  --panel:rgba(14,22,51,.86);
  --panel-strong:rgba(20,28,62,.96);
  --line:rgba(255,255,255,.08);
  --cyan:#46dcff;
  --aqua:#57ffcf;
  --purple:#8f6fff;
  --orange:#ff9c57;
  --pink:#ff5db1;
  --gold:#ffd24f;
  --green:#7cff93;
  --red:#ff6873;
  --shadow:0 18px 60px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at top,#16245b,#090f26 60%);font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink)}
button{font:inherit}
.viewport{position:fixed;inset:0;overflow:hidden;background:url('assets/ui/bg.webp') center/cover no-repeat}
.viewport:before{content:'';position:absolute;inset:0;background:linear-gradient(145deg,rgba(7,11,29,.7),rgba(8,25,35,.54) 45%,rgba(11,18,43,.78))}
.stage{position:absolute;left:50%;top:50%;width:1280px;height:720px;transform:translate(-50%,-50%) scale(1);transform-origin:center center;overflow:visible}
.screen{position:absolute;inset:0;display:none;padding:24px}
.screen.active{display:block}
.screen.active.menu-screen{display:grid}
.screen.active.game-screen{display:flex}
.screen.active.result-screen{display:flex}
.panel{background:linear-gradient(180deg,rgba(17,25,56,.92),rgba(9,16,38,.9));border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(10px)}
.menu-screen{grid-template-columns:1.06fr .94fr;gap:24px;align-items:center}
.menu-left{padding:18px 8px 18px 10px}
.pill,.modal-pill,.result-topline{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;font-size:12px;font-weight:900;letter-spacing:.15em;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#dff9ff}
.menu-screen h1{font-size:88px;line-height:.88;margin:16px 0 14px;font-weight:1000;letter-spacing:-.06em}
.menu-screen h1 span{color:var(--gold);text-shadow:0 0 28px rgba(255,210,79,.45)}
.tagline{max-width:560px;font-size:22px;line-height:1.35;color:#d6e4ff;margin:0 0 18px}
.menu-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:620px;margin-bottom:16px}
.stat-card{padding:16px 18px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.stat-card label,.mini,.question-mini,.power-title,.progress-top,.result-grid label{display:block;font-size:12px;font-weight:900;letter-spacing:.14em;color:var(--muted)}
.stat-card b{display:block;margin-top:8px;font-size:32px}
.menu-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:640px}
.menu-actions .ghost{grid-column:1/-1}
.big-btn,.wide-btn,.square-btn,.tool-btn{border:0;cursor:pointer;transition:.18s transform,.18s filter}
.big-btn:hover,.wide-btn:hover,.square-btn:hover,.tool-btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.big-btn{min-height:68px;border-radius:22px;padding:14px 18px;font-weight:1000;letter-spacing:.03em;font-size:18px}
.primary{background:linear-gradient(180deg,var(--gold),#ff9c3a);color:#392300;box-shadow:0 8px 24px rgba(255,170,68,.25)}
.accent{background:linear-gradient(180deg,var(--cyan),#5c96ff);color:#08223a;box-shadow:0 8px 24px rgba(70,220,255,.18)}
.ghost{background:rgba(255,255,255,.08);color:white;border:1px solid rgba(255,255,255,.12)}
.feature-line{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.feature-line span{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-weight:800;color:#d7f7ff}
.menu-right{display:flex;justify-content:center;align-items:center}
.hero-shell{position:relative;width:520px;height:580px;border-radius:34px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow)}
.hero-shell img{width:100%;height:100%;object-fit:cover}
.hero-badge{position:absolute;border-radius:24px;background:rgba(8,16,40,.88);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);text-align:center;padding:12px 16px;line-height:1.05;font-weight:1000;box-shadow:var(--shadow)}
.hero-badge.top{left:18px;top:18px;color:var(--aqua)}
.hero-badge.bottom{right:18px;bottom:18px;color:var(--gold);font-size:18px}
.hero-badge b{font-size:32px}
.sound-btn{position:absolute;right:30px;top:26px;width:54px;height:54px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);color:white;font-size:22px;cursor:pointer}
.menu-footer{position:absolute;left:28px;bottom:14px;color:#9db0c7;font-size:12px}

.game-screen{flex-direction:column;gap:14px}
.hud-top{display:grid;grid-template-columns:150px 1fr 120px 120px 120px 58px 58px;gap:10px;padding:10px 12px;border-radius:24px}
.hud-block{border-radius:18px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06);padding:10px 12px;display:flex;flex-direction:column;justify-content:center}
.hud-block b{font-size:28px}.value-block{text-align:center}.value-block.warm b{color:var(--orange)}.value-block.gold b{color:var(--gold)}.title-block b{font-size:24px;color:var(--aqua)}
.progress-block{padding:10px 12px}.progress-top{display:flex;justify-content:space-between;margin-bottom:8px;letter-spacing:.08em}.progress-bar{height:12px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}.progress-bar div{height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--cyan),var(--aqua));box-shadow:0 0 18px rgba(87,255,207,.4)}
.square-btn{border-radius:18px;background:rgba(255,255,255,.08);color:white;font-size:24px;border:1px solid rgba(255,255,255,.12)}
.game-grid{display:grid;grid-template-columns:210px 1fr 240px;gap:14px;flex:1;min-height:0}
.left-panel,.center-panel,.right-panel{border-radius:28px;padding:16px}
.left-panel{display:flex;flex-direction:column;align-items:center;gap:18px}
.timer-shell{position:relative;width:168px;height:168px}
.timer-svg{width:100%;height:100%;transform:rotate(-90deg)}
.timer-back{fill:none;stroke:rgba(255,255,255,.08);stroke-width:10}.timer-front{fill:none;stroke:url(#grad);stroke:var(--cyan);stroke-linecap:round;stroke-width:10;stroke-dasharray:301.59;stroke-dashoffset:0;filter:drop-shadow(0 0 10px rgba(70,220,255,.45))}
.timer-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.timer-center small{font-size:12px;font-weight:900;letter-spacing:.15em;color:var(--muted)}.timer-center b{font-size:52px}
.hearts-wrap,.combo-box{width:100%;padding:14px;border-radius:22px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06);text-align:center}.hearts{margin-top:8px;font-size:28px;letter-spacing:2px}.combo-box b{display:block;margin:10px 0 6px;font-size:34px;color:var(--orange)}.combo-box small{color:#c7d6e8}
.center-panel{display:flex;flex-direction:column;gap:14px}
.question-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.question-mini{font-size:14px;color:#d9e8ff}.unlock-badge{opacity:0;transform:translateY(-8px);transition:.18s; padding:8px 14px;border-radius:999px;background:linear-gradient(180deg,var(--gold),#ff9e35);color:#4a2a00;font-weight:1000;font-size:12px;letter-spacing:.08em}.unlock-badge.show{opacity:1;transform:translateY(0)}
.image-shell{position:relative;flex:1;min-height:0;border-radius:26px;overflow:hidden;background:#111a38;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.image-shell img{width:100%;height:100%;object-fit:cover;display:block}
.flash-message{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.75);opacity:0;pointer-events:none;padding:16px 20px;border-radius:18px;font-size:28px;font-weight:1000;transition:.18s;background:rgba(8,14,35,.72);border:1px solid rgba(255,255,255,.12)}
.flash-message.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.flash-message.good{color:var(--green)}.flash-message.bad{color:var(--red)}.flash-message.spot{color:var(--gold)}
.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.option-btn{min-height:72px;border-radius:20px;padding:12px 14px;text-align:left;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));color:white;border:1px solid rgba(255,255,255,.1);font-size:20px;font-weight:900;line-height:1.15}
.option-btn small{display:block;font-size:12px;font-weight:800;color:#a9bdd8;margin-bottom:6px;letter-spacing:.14em}
.option-btn.correct{background:linear-gradient(180deg,rgba(75,255,152,.24),rgba(31,160,86,.25));border-color:rgba(124,255,147,.55)}
.option-btn.wrong{background:linear-gradient(180deg,rgba(255,104,115,.25),rgba(168,41,54,.22));border-color:rgba(255,104,115,.5)}
.option-btn.dim{opacity:.22;pointer-events:none}
.right-panel{display:flex;flex-direction:column;gap:10px}
.power-title{font-size:13px;color:#d9e8ff}.tool-btn{display:flex;align-items:center;gap:12px;padding:14px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));color:white;border:1px solid rgba(255,255,255,.08)}
.tool-btn span{font-size:28px}.tool-btn b{display:block;font-size:20px}.tool-btn small{color:#a6bad6;font-weight:800}
.power-status{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto}.power-status div{border-radius:18px;padding:14px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06)}.power-status label{display:block;font-size:12px;font-weight:900;letter-spacing:.13em;color:var(--muted)}.power-status b{display:block;margin-top:8px;font-size:22px}
.wide-btn{min-height:56px;border-radius:18px;padding:10px 14px;background:rgba(255,255,255,.08);color:white;border:1px solid rgba(255,255,255,.1);font-weight:900;font-size:16px}.wide-btn.small{min-height:48px}

.result-screen{align-items:center;justify-content:center}.result-card{width:780px;border-radius:34px;padding:28px;text-align:center}.result-card h2{font-size:54px;margin:16px 0 10px}.result-card p{color:#d0dcef;font-size:19px;margin:0 0 18px}.result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.result-grid div{padding:16px;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}.result-grid b{display:block;font-size:34px;margin-top:8px}.new-best-banner{opacity:0;transform:translateY(8px);transition:.18s;margin-top:16px;padding:10px;border-radius:16px;background:linear-gradient(180deg,var(--gold),#ff9f34);color:#4a2a00;font-weight:1000}.new-best-banner.show{opacity:1;transform:translateY(0)}.result-actions{display:flex;gap:12px;justify-content:center;margin-top:18px}

.modal{position:absolute;inset:0;z-index:20;background:rgba(3,7,18,.74);display:flex;align-items:center;justify-content:center}.hidden{display:none !important}.modal-card{width:940px;height:600px;border-radius:30px;padding:18px;position:relative}.close-btn{position:absolute;right:18px;top:14px;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:white;font-size:28px;cursor:pointer}.modal-top{display:flex;justify-content:space-between;align-items:center;padding-right:60px}.modal-top h3{font-size:42px;margin:8px 0 0}.album-total{padding:10px 16px;border-radius:18px;background:rgba(255,255,255,.07);font-size:24px;font-weight:1000}.album-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}.album-card{height:116px;border-radius:22px;overflow:hidden;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;justify-content:center;align-items:center}.album-card img{width:100%;height:78px;object-fit:cover;display:block}.album-card b{display:block;width:100%;padding:6px 8px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}.album-card.locked{color:#8fa3c2;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02))}.album-card.locked .q{font-size:40px;font-weight:1000}.album-nav{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:14px}
.toast{position:absolute;left:50%;bottom:22px;transform:translate(-50%,16px);opacity:0;padding:12px 18px;border-radius:999px;background:rgba(9,16,38,.92);border:1px solid rgba(255,255,255,.1);font-size:14px;font-weight:900;transition:.18s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}

.screen:not(.active){pointer-events:none}

body,html{overscroll-behavior:none}


/* ===== PREMIUM BOUNDED LAYOUT / Y8 SAFE AREA ===== */
html,body{width:100%;height:100%;overflow:hidden}
.viewport{position:fixed;inset:0;overflow:hidden}
.stage{width:1280px;height:720px;overflow:hidden;transform-origin:center center}
.screen{width:1280px;height:720px;padding:20px;overflow:hidden}
.menu-screen{grid-template-columns:1.04fr .96fr;gap:22px}
.menu-footer{left:24px;bottom:12px;font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:rgba(218,235,255,.72)}
.menu-screen h1{font-size:84px}
.hero-shell{width:510px;height:570px;border:1px solid rgba(255,255,255,.16);box-shadow:0 24px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08)}
.big-btn{border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 34px rgba(0,0,0,.24)}

/* Game is explicitly constrained to the 720px virtual stage. */
.game-screen{height:720px;gap:12px;flex-direction:column}
.hud-top{flex:0 0 92px;height:92px;grid-template-columns:145px minmax(280px,1fr) 112px 112px 112px 54px 54px;gap:8px;padding:9px 10px;border-radius:22px;overflow:hidden}
.hud-block{min-width:0;padding:8px 10px;border-radius:16px}.hud-block b{font-size:25px}.title-block b{font-size:21px}.square-btn{width:54px;height:72px;align-self:center}
.game-grid{height:576px;flex:0 0 576px;min-height:0;grid-template-columns:198px minmax(0,1fr) 224px;gap:12px;overflow:hidden}
.left-panel,.center-panel,.right-panel{height:576px;min-height:0;overflow:hidden;border-radius:24px;padding:14px}
.left-panel{gap:12px;justify-content:flex-start}
.timer-shell{width:148px;height:148px;flex:0 0 148px}.timer-center b{font-size:44px}
.hearts-wrap{padding:10px 8px;flex:0 0 74px}.hearts{font-size:22px;margin-top:7px}
.combo-box{padding:10px;flex:0 0 108px}.combo-box b{font-size:29px;margin:7px 0 4px}.combo-box small{font-size:11px;line-height:1.25}
.center-panel{gap:10px}
.question-head{flex:0 0 24px;min-height:24px}.question-mini{font-size:13px}
.image-shell{flex:1 1 auto;min-height:0;max-height:none;border-radius:22px}
.option-grid{flex:0 0 148px;height:148px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:68px 68px;gap:10px;overflow:hidden}
.option-btn{min-height:0;height:68px;padding:9px 12px;border-radius:17px;font-size:17px;overflow:hidden}.option-btn small{font-size:10px;margin-bottom:4px}
.right-panel{gap:7px;padding:13px}
.power-title{flex:0 0 20px}
.tool-btn{flex:0 0 60px;min-height:60px;padding:9px 11px;border-radius:18px;gap:9px;text-align:left}.tool-btn span{font-size:23px;min-width:28px;text-align:center}.tool-btn b{font-size:16px}.tool-btn small{font-size:10px}
.reward-tool{background:linear-gradient(180deg,rgba(83,155,255,.26),rgba(70,91,219,.22));border-color:rgba(92,189,255,.32)}
.reward-tool span{color:#8deaff;font-size:17px;font-weight:1000}
.power-status{flex:0 0 67px;margin-top:1px;gap:7px}.power-status div{padding:9px 8px;border-radius:15px}.power-status label{font-size:9px}.power-status b{font-size:17px;margin-top:5px}
.right-panel>.wide-btn{flex:0 0 48px;min-height:48px;border-radius:15px;font-size:13px}

/* Results and modal always remain inside stage. */
.result-screen{height:720px;padding:20px}.result-card{width:760px;max-height:680px;padding:24px;border-radius:30px}.result-card h2{font-size:46px;margin:12px 0 8px}.result-card p{font-size:16px;margin-bottom:14px}.result-grid div{padding:13px}.result-grid b{font-size:29px}.result-actions{display:flex;flex-wrap:wrap;gap:10px}.result-actions .big-btn{min-height:58px;font-size:15px;flex:1 1 180px}.reward-result{background:linear-gradient(180deg,#62c8ff,#6674ff);color:white}.result-actions .reward-result{flex-basis:100%}
.modal{z-index:50;overflow:hidden}.modal-card{width:900px;height:590px;max-width:900px;max-height:590px;padding:17px;overflow:hidden}.modal-top h3{font-size:36px}.album-grid{grid-template-columns:repeat(4,1fr);gap:9px;margin-top:12px}.album-card{height:108px;border-radius:18px}.album-card img{height:73px}.album-nav{margin-top:10px}
.toast{z-index:80}

/* premium polish */
.panel{border-color:rgba(155,210,255,.13);box-shadow:0 20px 55px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.035)}
.hud-top,.left-panel,.right-panel,.center-panel{background:linear-gradient(180deg,rgba(18,28,64,.94),rgba(9,17,42,.94))}
.image-shell{border:1px solid rgba(112,214,255,.2);box-shadow:0 12px 28px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.035)}
.option-btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.option-btn:hover:not(:disabled){border-color:rgba(92,222,255,.45);background:linear-gradient(180deg,rgba(74,114,180,.22),rgba(30,58,102,.16))}

/* ad pause visual, but never changes layout */
body.ad-paused .stage{filter:saturate(.8) brightness(.82)}
/* menu bounding: keep every menu control inside the same 1280x720 stage */
.menu-left{padding:8px 8px 8px 8px;align-self:center;max-height:672px;overflow:hidden}
.menu-screen h1{font-size:76px;line-height:.86;margin:12px 0 10px}
.tagline{font-size:19px;line-height:1.3;margin:0 0 12px;max-width:550px}
.menu-stats{gap:10px;margin-bottom:12px}.stat-card{padding:12px 14px;border-radius:18px}.stat-card b{font-size:27px;margin-top:6px}
.menu-actions{gap:10px}.big-btn{min-height:58px;padding:11px 15px;font-size:16px;border-radius:19px}
.feature-line{gap:7px;margin-top:11px}.feature-line span{padding:6px 9px;font-size:12px}
.pill{padding:7px 12px;font-size:11px}
.hero-shell{height:555px}