:root{--bg:#07101c;--page-start:#142442;--panel-a:rgba(24,34,58,.99);--panel-b:rgba(13,20,36,.99);--text:#f7f9ff;--muted:#a7b2ca;--accent:#72ef7d;--accent2:#52b9ff;--gold:#ffd45b;--danger:#ff5f6d;--panel-border:rgba(255,255,255,.08);--hero-a:#151d33;--hero-b:#1b2b4a;--field:#0d1527;--secondary:#26334c;--arena:#06101b;--grid:rgba(255,255,255,.035);--wall:#93a4bd;--glass:rgba(3,8,15,.58);--glass-strong:rgba(3,8,15,.72);--blob-stroke:rgba(255,255,255,.42);--blob-label:rgba(255,255,255,.9);--blob-mass:rgba(4,10,17,.78);--gold-core:#5b4d1b;--gold-text:#fff2a8;--hud:rgba(22,18,7,.97);--hud-sub:#c8bb87;--shadow:rgba(0,0,0,.38)}
body[data-theme="light"]{--bg:#eef4fb;--page-start:#ffffff;--panel-a:rgba(255,255,255,.99);--panel-b:rgba(242,247,253,.99);--text:#142033;--muted:#61718a;--panel-border:rgba(32,54,82,.13);--hero-a:#f7fbff;--hero-b:#e8f1fb;--field:#ffffff;--secondary:#dce7f3;--arena:#f5f8fc;--grid:rgba(36,62,92,.075);--wall:#64758c;--glass:rgba(255,255,255,.70);--glass-strong:rgba(245,249,253,.90);--blob-stroke:rgba(22,40,62,.34);--blob-label:rgba(18,34,52,.92);--blob-mass:rgba(15,29,45,.82);--gold-core:#fff4c1;--gold-text:#5a4300;--hud:rgba(255,250,231,.98);--hud-sub:#796a31;--shadow:rgba(44,63,88,.18)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at top,var(--page-start) 0%,var(--bg) 60%);color:var(--text);font-family:Inter,ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{min-height:100vh;display:grid;place-items:start center;padding:10px;transition:background .18s ease,color .18s ease}button,input{font:inherit}.hidden{display:none!important}.app-shell{width:min(1440px,100%)}
.panel{width:min(740px,100%);margin:0 auto;background:linear-gradient(180deg,var(--panel-a),var(--panel-b));border:1px solid var(--panel-border);border-radius:28px;padding:28px;box-shadow:0 28px 90px var(--shadow)}
.brand-row{display:flex;align-items:center;gap:14px;margin-bottom:22px}.logo{width:70px;height:58px;display:grid;place-items:center;border-radius:18px;background:var(--accent);color:#071209;font-size:25px;font-weight:1000;transform:rotate(-5deg)}h1,h2,p{margin-top:0}h1{margin-bottom:2px;font-size:clamp(36px,7vw,58px);line-height:.9;letter-spacing:-2px}.brand-row p{margin:0;color:var(--muted);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:12px}
.hero-card{background:linear-gradient(145deg,var(--hero-a),var(--hero-b));border:1px solid var(--panel-border);border-radius:22px;padding:22px;margin-bottom:18px}.hero-card p{color:var(--muted);margin:14px 0 0;text-align:center;line-height:1.5}.hero-demo{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px}.blob-demo{display:inline-block;border-radius:50%;background:#55d663;border:2px solid rgba(255,255,255,.5)}.blob-demo.small{width:18px;height:18px}.blob-demo.big{width:42px;height:42px;background:#72ef7d}.food-demo{font-size:38px;color:var(--accent2);line-height:.4;margin:0 8px}.math-demo{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(255,212,91,.14);border:2px solid var(--gold);color:#8a6500;font-weight:1000}.hero-demo strong{width:100%;text-align:center;margin-top:8px;font-size:18px}
.menu-fields{display:grid;grid-template-columns:minmax(0,1fr) 170px 160px 160px;gap:10px;align-items:end}.name-field,.level-field{display:block;margin-bottom:8px}.theme-field,.sound-field{margin-bottom:8px}.theme-field>span,.sound-field>span,label span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;margin-bottom:7px}input,select{width:100%;min-height:50px;border-radius:14px;border:1px solid var(--panel-border);color:var(--text);background:var(--field);padding:0 14px;outline:none;font:inherit;font-weight:800}input:focus,select:focus{border-color:rgba(114,239,125,.65);box-shadow:0 0 0 3px rgba(114,239,125,.11)}.theme-toggle,.sound-toggle{width:100%;height:50px;border-radius:14px;border:1px solid var(--panel-border);background:var(--field);color:var(--text);font-weight:1000;display:flex;gap:7px;align-items:center;justify-content:center;cursor:pointer}.theme-toggle strong,.sound-toggle strong{font-size:11px;letter-spacing:.05em}.name-error{min-height:20px;color:#e74a59;font-size:12px;font-weight:800;margin-bottom:4px}
.primary-btn,.secondary-btn{width:100%;min-height:54px;border:0;border-radius:16px;font-weight:1000;letter-spacing:.04em;cursor:pointer}.primary-btn{background:var(--accent);color:#071209;box-shadow:0 10px 28px rgba(104,229,111,.18)}.primary-btn:active{transform:translateY(1px) scale(.995)}.primary-btn.small{min-height:48px}.secondary-btn{margin-top:10px;background:var(--secondary);color:var(--text)}.tiny{color:var(--muted);text-align:center;margin:14px 0 0;font-size:12px;line-height:1.4}
.level-roadmap{margin-top:18px;padding:14px 0;border-top:1px solid var(--panel-border);border-bottom:1px solid var(--panel-border)}.level-roadmap>strong{font-size:10px;color:var(--muted);letter-spacing:.12em}.roadmap-row{display:flex;gap:7px;align-items:stretch;margin-top:9px;overflow-x:auto;padding-bottom:3px}.roadmap-row span{min-width:62px;padding:8px 9px;border-radius:12px;background:var(--field);text-align:center;font-weight:1000}.roadmap-row span b{display:block;color:var(--muted);font-size:9px;margin-top:2px}.roadmap-row .hof{display:grid;place-items:center;color:#b37d00;min-width:76px}
.leaderboard-card{margin-top:16px}.leaderboard-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline}.leaderboard-head span{font-size:11px;color:var(--muted)}.leaderboard{margin:10px 0 0;padding-left:27px}.leaderboard li{padding:6px 0;color:var(--text)}.leaderboard li span{float:right;color:#b37d00;font-weight:900}.leaderboard .empty{list-style:none;margin-left:-27px;color:var(--muted);font-size:12px}
.game-screen{width:100%}.question-hud{display:grid;grid-template-columns:155px 1fr 155px;align-items:center;gap:10px;padding:7px 14px;background:var(--hud);border:1px solid rgba(205,166,40,.38);border-radius:18px 18px 0 0;color:var(--text)}.level-side,.score-side{display:flex;flex-direction:column}.level-side span,.score-side span{font-size:9px;color:var(--hud-sub);letter-spacing:.1em;font-weight:1000}.level-side strong{font-size:18px}.score-side{text-align:right}.score-side strong{font-size:23px}.score-side small{font-size:10px;color:var(--hud-sub)}.question-centre{text-align:center;min-width:0}.math-kicker{display:block;color:#b37d00;font-size:8px;letter-spacing:.14em;font-weight:1000}.question-centre strong{display:block;font-size:clamp(24px,3.7vw,38px);line-height:1;color:var(--text)}.question-timer{width:min(280px,88%);height:4px;margin:5px auto 0;background:rgba(100,100,100,.15);border-radius:999px;overflow:hidden}.question-timer i{display:block;width:100%;height:100%;background:var(--gold);transform-origin:left center}.level-progress{height:5px;background:var(--field);border-left:1px solid var(--panel-border);border-right:1px solid var(--panel-border)}.level-progress i{display:block;width:0;height:100%;background:var(--accent);transform-origin:left center;transition:width .18s ease}
.arena-wrap{position:relative;background:var(--arena);overflow:hidden;border:1px solid var(--panel-border);border-top:0;border-radius:0 0 18px 18px;aspect-ratio:16/9}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.toast{position:absolute;left:50%;top:7%;transform:translate(-50%,-8px) scale(.96);opacity:0;pointer-events:none;padding:9px 15px;border-radius:999px;background:var(--glass-strong);backdrop-filter:blur(8px);font-weight:1000;font-size:clamp(14px,2.6vw,21px);transition:.16s ease;white-space:nowrap;z-index:8}.toast.show{opacity:1;transform:translate(-50%,0) scale(1)}.toast.good{color:#31a83e}.toast.bad{color:var(--danger)}.toast.correction-toast{white-space:nowrap}.toast .correct-answer{color:#20b84b;font-weight:1000;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:3px}
.arena-status{position:absolute;top:10px;left:10px;display:flex;gap:7px;align-items:stretch;z-index:5;pointer-events:none}.arena-status>div{min-width:68px;padding:7px 9px;border-radius:11px;background:var(--glass);backdrop-filter:blur(6px);border:1px solid var(--panel-border)}.arena-status span{display:block;font-size:7px;letter-spacing:.09em;color:var(--muted);font-weight:900}.arena-status strong{display:block;font-size:14px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mini-pause{pointer-events:auto;width:38px;border:1px solid var(--panel-border);border-radius:11px;background:var(--glass);color:var(--text);font-weight:1000}
.live-leaderboard{position:absolute;right:10px;top:10px;width:160px;padding:9px 10px;border-radius:13px;background:var(--glass);backdrop-filter:blur(7px);border:1px solid var(--panel-border);z-index:5;pointer-events:none}.live-leaderboard .lb-title{display:flex;justify-content:space-between;font-size:8px;color:var(--muted);font-weight:1000;letter-spacing:.09em;margin-bottom:4px}.live-leaderboard .lb-row{display:grid;grid-template-columns:18px 1fr auto;gap:5px;align-items:center;font-size:10px;padding:2px 0;color:var(--text)}.live-leaderboard .lb-row.me{color:#2ca53a;font-weight:1000}.live-leaderboard .lb-row .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.live-leaderboard .lb-row .ln{color:var(--text);font-variant-numeric:tabular-nums}
.joystick{position:absolute;left:20px;bottom:20px;width:158px;height:158px;border-radius:50%;z-index:7;touch-action:none;user-select:none;-webkit-user-select:none}.joystick-ring{position:absolute;inset:0;border-radius:50%;background:var(--glass);border:2px solid var(--panel-border);backdrop-filter:blur(4px);box-shadow:inset 0 0 0 18px rgba(120,130,145,.06)}.joystick-knob{position:absolute;width:68px;height:68px;left:45px;top:45px;border-radius:50%;background:rgba(114,239,125,.9);border:2px solid rgba(255,255,255,.65);box-shadow:0 5px 18px var(--shadow);transform:translate(0,0)}.joystick.active .joystick-knob{background:rgba(114,239,125,1)}
.right-controls{position:absolute;right:18px;bottom:18px;display:flex;gap:10px;align-items:flex-end;z-index:7}.split-btn,.zoom-btn{border:2px solid var(--panel-border);background:var(--glass);color:var(--text);font-weight:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;touch-action:none;backdrop-filter:blur(6px)}.split-btn{width:98px;height:72px;border-radius:21px;font-size:25px}.split-btn span,.zoom-btn span{font-size:10px;letter-spacing:.07em}.split-btn:active{background:rgba(255,212,91,.94);color:#211b05;border-color:#fff2b3;transform:scale(.97)}.zoom-btn{width:68px;height:68px;border-radius:50%;font-size:20px}.zoom-btn:active{transform:scale(.96)}
.pause-overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(3,7,14,.58);backdrop-filter:blur(5px);z-index:12}.pause-card{width:min(320px,80%);padding:24px;border-radius:22px;background:var(--panel-a);text-align:center;border:1px solid var(--panel-border)}.pause-card h2{font-size:34px;margin-bottom:18px}
.gameover-panel{text-align:center}.trophy{font-size:54px;margin-bottom:5px}.gameover-panel h2{font-size:42px;margin-bottom:6px}.gameover-panel>p{color:var(--muted)}.results-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0}.results-grid div{background:var(--field);border-radius:16px;padding:15px 8px;border:1px solid var(--panel-border);min-width:0}.results-grid span{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;font-weight:800}.results-grid strong{display:block;font-size:21px;overflow:hidden;text-overflow:ellipsis}.high-score-message{min-height:22px;color:#b37d00!important;font-weight:1000}
@media(max-width:800px){body{padding:3px}.menu-fields{grid-template-columns:1fr}.theme-field,.sound-field{margin-top:-2px}.question-hud{grid-template-columns:92px 1fr 92px;padding:4px 7px;gap:4px}.level-side strong{font-size:14px}.score-side strong{font-size:18px}.score-side small{font-size:8px}.question-centre strong{font-size:25px}.math-kicker{font-size:7px}.arena-status{top:6px;left:6px}.arena-status>div{padding:5px 7px;min-width:54px}.arena-status strong{font-size:11px}.arena-status span{font-size:6px}.live-leaderboard{top:6px;right:6px;width:130px;padding:7px 8px}.live-leaderboard .lb-row{font-size:9px}.joystick{left:12px;bottom:12px;width:140px;height:140px}.joystick-knob{width:60px;height:60px;left:40px;top:40px}.right-controls{right:10px;bottom:10px;gap:7px}.split-btn{width:82px;height:62px;border-radius:18px;font-size:21px}.zoom-btn{width:58px;height:58px}.results-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-height:520px) and (orientation:landscape){body{padding:0}.app-shell{width:100%}.game-screen{height:100vh;overflow:hidden}.question-hud{border-radius:0;height:56px}.level-progress{height:4px}.arena-wrap{border-radius:0;aspect-ratio:auto;height:calc(100vh - 60px)}.arena-status>div:nth-child(3){display:none}.joystick{width:125px;height:125px;left:10px;bottom:10px}.joystick-knob{width:55px;height:55px;left:35px;top:35px}.split-btn{width:76px;height:56px}.zoom-btn{width:54px;height:54px}.live-leaderboard{width:122px}.toast{top:12%}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.level-complete-overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(3,7,14,.72);backdrop-filter:blur(8px);z-index:20;padding:18px}.level-success-card{width:min(560px,88%);text-align:center;padding:34px 30px 30px;border-radius:28px;background:linear-gradient(180deg,var(--panel-a),var(--panel-b));border:2px solid rgba(255,212,91,.55);box-shadow:0 24px 80px var(--shadow)}.level-burst{font-size:56px;line-height:1;margin-bottom:8px}.level-success-card h2{font-size:clamp(30px,6vw,54px);line-height:.95;margin:0 0 15px;letter-spacing:-1px}.level-success-table{font-weight:1000;font-size:clamp(20px,4vw,31px);color:#b37d00;margin:0 0 9px}.level-success-target{font-size:clamp(15px,2.8vw,21px);font-weight:900;color:var(--text);margin:0 0 24px;letter-spacing:.03em}.level-continue{max-width:390px;margin:0 auto;display:block}
@media(max-height:520px) and (orientation:landscape){.level-complete-overlay{padding:8px}.level-success-card{padding:16px 22px 15px;border-radius:20px;width:min(520px,76%)}.level-burst{font-size:34px;margin-bottom:3px}.level-success-card h2{font-size:30px;margin-bottom:8px}.level-success-table{font-size:20px;margin-bottom:4px}.level-success-target{font-size:14px;margin-bottom:12px}.level-continue{min-height:44px}}

.restart-level-field{display:block;max-width:340px;margin:14px auto 10px;text-align:left}.restart-level-field select{margin-top:0}.unlock-note{color:var(--muted);font-size:12px;font-weight:800;margin-top:6px}
@media(max-width:900px){.menu-fields{grid-template-columns:minmax(0,1fr) minmax(140px,.7fr);}.theme-field,.sound-field{margin-bottom:8px}}
@media(max-width:600px){.menu-fields{grid-template-columns:1fr 1fr}.name-field{grid-column:1/-1}}

/* v12 learning layer */
.skin-picker{display:flex;align-items:end;gap:14px;margin:-1px 0 10px}.skin-field{display:block;min-width:230px;margin:0}.skin-unlock-note{margin:0 0 12px;color:var(--muted);font-size:11px;font-weight:800;line-height:1.3}.math-kicker{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.level-recap{margin:-8px auto 17px;padding:12px 14px;border-radius:16px;background:var(--field);border:1px solid var(--panel-border);max-width:470px}.level-recap-stats{margin:0 0 8px;color:var(--muted);font-size:12px;font-weight:900}.level-recap-facts{margin:0}.recap-label{display:block;color:#b37d00;font-size:9px;letter-spacing:.1em;margin-bottom:7px}.recap-facts-row{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}.recap-facts-row span{padding:7px 10px;border-radius:999px;background:var(--panel-a);border:1px solid var(--panel-border);font-weight:1000;font-size:13px}.recap-perfect,.recap-skin{margin:5px 0;color:var(--text);font-weight:1000;font-size:13px}.recap-skin{color:#b37d00;margin-top:9px}
@media(max-width:600px){.skin-picker{align-items:stretch;flex-direction:column;gap:4px}.skin-field{min-width:0}.skin-unlock-note{margin:0 2px 7px}.math-kicker{font-size:6px}}
@media(max-height:520px) and (orientation:landscape){.level-recap{margin:-3px auto 9px;padding:7px 10px}.level-recap-stats{font-size:10px;margin-bottom:4px}.recap-label{font-size:8px;margin-bottom:4px}.recap-facts-row span{font-size:11px;padding:4px 7px}.recap-perfect,.recap-skin{font-size:10px;margin:3px 0}.level-success-target{margin-bottom:9px}}

/* v14: true landscape viewport fit for phones/tablets, including browser chrome */
body.game-active{
  width:100%;
  height:var(--game-vh,100dvh);
  min-height:0;
  overflow:hidden;
  padding:0;
  overscroll-behavior:none;
}
body.game-active .app-shell{
  width:100%;
  height:100%;
  min-height:0;
}
body.game-active .game-screen{
  width:100%;
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
body.game-active .question-hud,
body.game-active .level-progress{flex:0 0 auto}
body.game-active .arena-wrap{
  flex:1 1 auto;
  width:100%;
  min-height:0;
  height:auto;
  aspect-ratio:auto;
}
body.game-active canvas{width:100%;height:100%}

@media (orientation:landscape){
  body.game-active .question-hud{
    grid-template-columns:minmax(88px,12vw) 1fr minmax(88px,12vw);
    min-height:56px;
    padding:4px 10px;
    gap:6px;
    border-radius:0;
  }
  body.game-active .level-side strong{font-size:clamp(13px,1.55vw,18px)}
  body.game-active .score-side strong{font-size:clamp(17px,2vw,23px)}
  body.game-active .question-centre strong{font-size:clamp(23px,3.1vw,35px)}
  body.game-active .math-kicker{font-size:clamp(6px,.72vw,8px)}
  body.game-active .question-timer{margin-top:3px}
  body.game-active .level-progress{height:4px}
  body.game-active .arena-wrap{border-radius:0}
}

/* Short landscape screens get smaller controls, but remain easy to hit. */
@media (orientation:landscape) and (max-height:760px){
  body.game-active .question-hud{min-height:50px;padding:3px 8px}
  body.game-active .question-centre strong{font-size:clamp(21px,3vw,30px)}
  body.game-active .level-side strong{font-size:13px}
  body.game-active .score-side strong{font-size:18px}
  body.game-active .score-side small{font-size:8px}
  body.game-active .joystick{width:130px;height:130px;left:10px;bottom:max(10px,env(safe-area-inset-bottom))}
  body.game-active .joystick-knob{width:58px;height:58px;left:36px;top:36px}
  body.game-active .right-controls{right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));gap:7px}
  body.game-active .split-btn{width:78px;height:58px;border-radius:18px;font-size:21px}
  body.game-active .zoom-btn{width:56px;height:56px}
  body.game-active .live-leaderboard{top:7px;right:max(7px,env(safe-area-inset-right));width:126px;padding:7px 8px}
  body.game-active .arena-status{top:7px;left:max(7px,env(safe-area-inset-left))}
}

@media (orientation:landscape) and (max-height:520px){
  body.game-active .question-hud{min-height:46px;height:46px}
  body.game-active .level-progress{height:3px}
  body.game-active .joystick{width:115px;height:115px}
  body.game-active .joystick-knob{width:50px;height:50px;left:32.5px;top:32.5px}
}

/* v16: responsive landscape menu and spawn-shield polish */
body.menu-active{--menu-vh:var(--game-vh,100dvh)}

@media (orientation:landscape) and (max-height:760px){
  body.menu-active{
    width:100%;height:var(--menu-vh);min-height:0;overflow:hidden;padding:6px;place-items:stretch center;overscroll-behavior:none;
  }
  body.menu-active .app-shell{width:100%;height:100%;min-height:0}
  body.menu-active .menu-panel{
    width:min(1180px,100%);height:100%;max-height:100%;overflow:hidden;margin:0 auto;padding:12px 14px;border-radius:18px;
    display:grid;grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);
    grid-template-areas:"brand brand" "hero roadmap" "fields leaderboard" "skin leaderboard" "online leaderboard" "error leaderboard" "start leaderboard" "tiny leaderboard";
    grid-template-rows:auto auto auto auto auto auto auto 1fr;column-gap:14px;row-gap:5px;align-content:start;
  }
  body.menu-active .brand-row{grid-area:brand;margin:0;gap:10px;min-height:42px}
  body.menu-active .logo{width:50px;height:40px;border-radius:13px;font-size:19px}
  body.menu-active h1{font-size:31px;line-height:.9;letter-spacing:-1px}
  body.menu-active .brand-row p{font-size:8px;letter-spacing:.06em}
  body.menu-active .hero-card{grid-area:hero;margin:0;padding:9px 11px;border-radius:15px;min-width:0}
  body.menu-active .hero-demo{gap:4px}
  body.menu-active .blob-demo.small{width:12px;height:12px}.blob-demo.big{width:27px;height:27px}
  body.menu-active .food-demo{font-size:24px;margin:0 4px}.menu-active .math-demo{width:31px;height:31px;font-size:11px}
  body.menu-active .hero-demo strong{margin-top:3px;font-size:12px}
  body.menu-active .hero-card p{font-size:9px;line-height:1.23;margin:6px 0 0}
  body.menu-active .menu-fields{grid-area:fields;grid-template-columns:1fr 1fr;gap:5px 7px;align-items:end;min-width:0}
  body.menu-active .name-field,body.menu-active .level-field,body.menu-active .theme-field,body.menu-active .sound-field{margin:0;min-width:0}
  body.menu-active .theme-field>span,body.menu-active .sound-field>span,body.menu-active label span{font-size:8px;margin-bottom:3px;letter-spacing:.06em}
  body.menu-active input,body.menu-active select{min-height:35px;height:35px;border-radius:10px;padding:0 9px;font-size:12px}
  body.menu-active .theme-toggle,body.menu-active .sound-toggle{height:35px;border-radius:10px;font-size:12px}
  body.menu-active .theme-toggle strong,body.menu-active .sound-toggle strong{font-size:8px}
  body.menu-active .skin-picker{grid-area:skin;display:grid;grid-template-columns:minmax(180px,.65fr) 1fr;gap:8px;align-items:center;margin:0;min-width:0}
  body.menu-active .skin-field{min-width:0;margin:0}
  body.menu-active .skin-unlock-note{margin:0;font-size:8px;line-height:1.15}
  body.menu-active .name-error{grid-area:error;min-height:10px;margin:0;font-size:9px;line-height:1}
  body.menu-active #startBtn{grid-area:start;min-height:40px;height:40px;border-radius:12px;font-size:12px}
  body.menu-active .tiny{grid-area:tiny;margin:0;font-size:8px;line-height:1.18;align-self:start}
  body.menu-active .level-roadmap{grid-area:roadmap;margin:0;padding:7px 0 8px;min-width:0}
  body.menu-active .level-roadmap>strong{font-size:8px}.menu-active .roadmap-row{gap:4px;margin-top:5px;padding-bottom:1px;flex-wrap:wrap;overflow:visible}
  body.menu-active .roadmap-row span{min-width:50px;padding:4px 5px;border-radius:8px;font-size:10px;flex:1 1 50px}
  body.menu-active .roadmap-row span b{font-size:7px;margin-top:1px}.menu-active .roadmap-row .hof{min-width:58px}
  body.menu-active .leaderboard-card{grid-area:leaderboard;margin:0;min-height:0;align-self:start;background:var(--field);border:1px solid var(--panel-border);border-radius:14px;padding:9px 11px}
  body.menu-active .leaderboard-head{gap:6px}.menu-active .leaderboard-head strong{font-size:11px}.menu-active .leaderboard-head span{font-size:7px}
  body.menu-active .leaderboard{margin:5px 0 0;padding-left:20px}.menu-active .leaderboard li{padding:3px 0;font-size:10px}.menu-active .leaderboard .empty{margin-left:-20px;font-size:9px}
}

@media (orientation:landscape) and (max-height:500px){
  body.menu-active{padding:3px}
  body.menu-active .menu-panel{padding:7px 9px;column-gap:9px;row-gap:3px;border-radius:12px}
  body.menu-active .brand-row{min-height:34px}.menu-active .logo{width:42px;height:32px;font-size:16px}.menu-active h1{font-size:25px}.menu-active .brand-row p{font-size:7px}
  body.menu-active .hero-card{padding:6px 8px}.menu-active .hero-card p{font-size:7.7px;line-height:1.14;margin-top:4px}.menu-active .hero-demo strong{font-size:10px}.menu-active .blob-demo.big{width:22px;height:22px}.menu-active .math-demo{width:26px;height:26px}
  body.menu-active input,body.menu-active select,body.menu-active .theme-toggle,body.menu-active .sound-toggle{min-height:31px;height:31px;font-size:10px}
  body.menu-active .skin-picker{grid-template-columns:minmax(150px,.7fr) 1fr}.menu-active .skin-unlock-note{font-size:7px}
  body.menu-active #startBtn{min-height:34px;height:34px;font-size:10px}.menu-active .tiny{font-size:6.8px;line-height:1.1}
  body.menu-active .level-roadmap{padding:4px 0 5px}.menu-active .roadmap-row{margin-top:3px}.menu-active .roadmap-row span{padding:3px 4px;font-size:9px}.menu-active .roadmap-row span b{font-size:6px}
  body.menu-active .leaderboard-card{padding:6px 8px}.menu-active .leaderboard li{padding:2px 0;font-size:9px}.menu-active .leaderboard-head span{display:none}
}


/* v21 online multiplayer */
.mode-field,.room-field,.server-field{display:block;min-width:0}.mode-field>span,.room-field>span,.server-field>span{display:block;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px}.mode-btn{min-height:43px;border-radius:12px;border:1px solid var(--panel-border);background:var(--field);color:var(--muted);font-weight:1000;cursor:pointer}.mode-btn.active{background:linear-gradient(135deg,#5bdc86,#36a964);color:#07170c;border-color:transparent;box-shadow:0 8px 24px rgba(63,204,114,.22)}
.room-action-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:7px}.room-action-btn{min-height:36px;border-radius:10px;border:1px solid var(--panel-border);background:var(--field);color:var(--muted);font-weight:1000;cursor:pointer}.room-action-btn.active{background:linear-gradient(135deg,#ffd45b,#f7a92e);color:#231700;border-color:transparent;box-shadow:0 7px 20px rgba(255,190,60,.18)}.room-code-row{display:grid;grid-template-columns:1fr 42px;gap:6px;margin-bottom:6px}.room-code-row input,.room-field>input{width:100%}.generate-room-btn{border:1px solid var(--panel-border);border-radius:10px;background:var(--field);font-size:18px;cursor:pointer}.room-field input{min-height:38px}.room-field input[type=password]{letter-spacing:.08em}
.online-panel{margin:3px 0 10px;padding:10px 12px;border:1px solid rgba(91,220,134,.38);background:rgba(72,190,119,.08);border-radius:14px}.online-row{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:7px}.online-row strong{font-size:12px}.online-row span{font-size:10px;color:var(--muted);font-weight:800}.online-panel input{width:100%;margin-top:2px}.online-panel p{font-size:9px;line-height:1.35;color:var(--muted);margin:7px 0 0}.online-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border-radius:999px;background:rgba(91,220,134,.14);color:#6be29a;font-weight:1000;font-size:9px}
.remote-net-label{font-size:8px}
@media (orientation:landscape) and (max-height:760px){body.menu-active .online-panel{grid-area:online}body.menu-active .mode-field,body.menu-active .room-field{margin:0}body.menu-active .mode-btn,body.menu-active .room-action-btn{min-height:33px;height:33px;font-size:9px}.online-panel{grid-column:1/-1;margin:0;padding:6px 8px}.online-panel p{display:none}.online-row{margin-bottom:3px}.online-panel input,.room-field input{height:31px;min-height:31px}.room-action-switch{margin-bottom:4px}.room-code-row{margin-bottom:4px}}

/* BLOB_OI_V24_MENU_STYLES */
.mode-btn{padding:7px 10px;line-height:1.12}.room-action-switch{grid-template-columns:1.15fr 1fr 1fr}.room-action-btn{padding:5px 7px;line-height:1.08;font-size:10px}#publicRoomBtn.active{background:linear-gradient(135deg,#5bc9ff,#4677ff);color:#fff;box-shadow:0 7px 20px rgba(70,119,255,.22)}#privateRoomDetails{margin-top:2px}
@media(max-width:600px){.mode-btn{font-size:10px}.room-action-switch{grid-template-columns:1fr}.room-action-btn{min-height:32px}}
@media (orientation:landscape) and (max-height:760px){body.menu-active .mode-btn{font-size:8px;padding:4px 6px}.room-action-switch{grid-template-columns:1.15fr 1fr 1fr}.room-action-btn{font-size:7.5px;padding:3px 4px}}

/* BLOB_OI_MENU_LAYOUT_FIX_V1 */
.mode-field{grid-column:1/-1!important;width:100%!important;min-width:0!important}
.mode-switch{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:12px!important;width:100%!important}
#soloModeBtn,#onlineModeBtn{width:100%!important;min-width:0!important;max-width:none!important;min-height:54px!important;height:auto!important;padding:10px 14px!important;font-size:13px!important;line-height:1.15!important;white-space:normal!important;text-align:center!important}
body.menu-active .mode-field{grid-column:1/-1!important}
body.menu-active .mode-switch{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:10px!important}
body.menu-active #soloModeBtn,body.menu-active #onlineModeBtn{min-height:44px!important;height:auto!important;padding:7px 10px!important;font-size:11px!important;line-height:1.12!important}
@media(max-width:520px){.mode-switch{grid-template-columns:1fr!important}}
@media (orientation:landscape) and (max-height:760px){body.menu-active .mode-field{grid-column:1/-1!important}body.menu-active .mode-switch{grid-template-columns:1fr 1fr!important;gap:9px!important}body.menu-active #soloModeBtn,body.menu-active #onlineModeBtn{min-height:40px!important;height:auto!important;font-size:10px!important;padding:6px 8px!important}}

/* BLOB_OI_V25_STYLES */
.retire-btn{width:82px;height:42px;border:1px solid rgba(255,95,109,.42);border-radius:14px;background:rgba(255,95,109,.16);color:var(--text);font-weight:1000;font-size:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.16)}.retire-btn span{font-size:8px;letter-spacing:.08em;margin-top:2px}.retire-btn:hover{background:rgba(255,95,109,.26)}
@media(max-width:800px){.retire-btn{width:82px;height:38px;font-size:15px}}
@media(max-height:520px) and (orientation:landscape){.retire-btn{width:76px;height:34px;font-size:13px}.retire-btn span{font-size:7px}}