:root{
  color-scheme:dark;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:#6a2a11;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#6a2a11}
body{display:flex;justify-content:center;align-items:stretch}
button{font:inherit;color:inherit}
#app{
  position:relative;width:min(100vw,520px);height:100%;min-height:560px;overflow:hidden;isolation:isolate;
  background:radial-gradient(circle at 48% -12%,rgba(255,210,142,.12),transparent 30%),linear-gradient(180deg,#7f3517 0%,#6a2a11 54%,#5b220c 100%);
}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
.hidden{display:none!important}
.hud{position:absolute;z-index:5;top:max(10px,env(safe-area-inset-top));left:8px;right:8px;display:grid;grid-template-columns:50px 1fr 74px;gap:8px;align-items:center;pointer-events:none}
.hud button{pointer-events:auto}
.icon-btn,.score-card,.level-card,.goals,.challenge-bar{border:1px solid rgba(236,196,149,.23);background:linear-gradient(180deg,rgba(89,41,20,.96),rgba(62,27,13,.97));box-shadow:inset 0 1px 0 rgba(255,236,211,.10),0 4px 10px rgba(48,25,14,.18)}
.icon-btn{width:50px;height:50px;border-radius:16px;padding:0;display:flex;align-items:center;justify-content:center;gap:5px}
.icon-btn span{display:block;width:5px;height:21px;border-radius:5px;background:#e5c093}
.level-card{justify-self:center;min-width:145px;height:50px;border-radius:17px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05}
.level-card small{font-size:8px;letter-spacing:1.9px;color:#dcb88e;font-weight:800;margin-bottom:4px}.level-card strong{font-size:18px;letter-spacing:.2px;color:#fff2df;font-weight:700}.level-card b{font-weight:800}
.score-card{height:50px;border-radius:17px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:18px;color:#fff1dc}.score-card span{font-size:18px;color:#f2cf78}.score-card strong{font-size:17px}
.goals{position:absolute;z-index:5;top:max(69px,calc(env(safe-area-inset-top) + 69px));left:50%;transform:translateX(-50%);height:45px;min-width:230px;border-radius:15px;display:flex;align-items:center;justify-content:center;gap:4px;padding:5px 8px}
.goal{height:34px;min-width:69px;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 7px;border-radius:10px;background:rgba(42,25,18,.42)}
.goal i{width:19px;height:19px;border-radius:5px;box-shadow:inset 0 2px 3px rgba(255,255,255,.38),inset 0 -2px 3px rgba(0,0,0,.14),0 2px 5px rgba(0,0,0,.18)}
.goal-blue i{background:#4c82e6}.goal-green i{background:#41aa39}.goal-red i{background:#ef413a}
.goal span{font-size:13px;font-weight:800;color:#fff5e9}.goal b,.goal em{font-style:normal;font-weight:800}.goal em{color:#dbc0a4}.goal.pulse{animation:goalPulse .38s ease}
@keyframes goalPulse{50%{transform:scale(1.10);filter:brightness(1.18)}}
.challenge-bar{position:absolute;z-index:5;top:max(119px,calc(env(safe-area-inset-top) + 119px));left:50%;transform:translateX(-50%);height:31px;border-radius:999px;padding:0 12px;display:flex;align-items:center;gap:8px;font-size:11px;color:#ead5bc;white-space:nowrap}.challenge-bar strong{font-size:14px;color:#fff0d6}
.hint{position:absolute;z-index:4;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);white-space:nowrap;padding:7px 12px;border-radius:999px;background:rgba(58,35,27,.68);border:1px solid rgba(230,192,147,.16);color:#ead0b0;font-size:11px;letter-spacing:.3px;transition:opacity .25s ease;pointer-events:none}.hint.fade{opacity:.25}
.combo{position:absolute;z-index:7;left:42%;top:29%;transform:translate(-50%,-50%) scale(.8);opacity:0;pointer-events:none;font-size:27px;font-weight:900;letter-spacing:1px;color:#f5d092;text-shadow:0 3px 0 #76503a,0 6px 18px rgba(0,0,0,.32)}.combo.show{animation:combo .75s cubic-bezier(.22,.8,.22,1)}
@keyframes combo{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.10)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) scale(1)}}
.toast{position:absolute;z-index:7;left:42%;top:17%;transform:translateX(-50%);opacity:0;pointer-events:none;color:#fff6e8;background:rgba(74,47,35,.92);border:1px solid rgba(232,196,152,.25);border-radius:999px;padding:7px 12px;font-size:11px;font-weight:700}.toast.show{animation:toast .9s ease}
@keyframes toast{0%,100%{opacity:0;transform:translate(-50%,-5px)}20%,78%{opacity:1;transform:translate(-50%,0)}}
.overlay,.mode-overlay{position:absolute;z-index:20;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(38,30,26,.62);backdrop-filter:blur(6px)}
.dialog{width:min(88%,320px);border-radius:24px;padding:24px 22px 20px;text-align:center;background:linear-gradient(180deg,#704936,#4c3025);border:1px solid rgba(235,198,154,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 18px 44px rgba(0,0,0,.32)}
.dialog-icon{font-size:46px;color:#efc86f}.dialog h2{margin:6px 0;font-size:25px;color:#fff1dd}.dialog p{margin:0 0 18px;font-size:13px;color:#dec9b3}.dialog button{width:100%;height:48px;border:0;border-radius:15px;background:linear-gradient(#72bc76,#4b9255);font-weight:900;font-size:16px;box-shadow:inset 0 2px 0 rgba(255,255,255,.20),0 4px 0 #356b3d}.dialog button.secondary{margin-top:10px;background:rgba(49,30,22,.44);box-shadow:none;border:1px solid rgba(255,223,187,.16);font-size:13px;color:#ead7c2}.dialog-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.dialog button.compact{height:42px;margin-top:10px}
.mode-panel{width:min(94%,390px);max-height:82%;overflow:auto;border-radius:26px;padding:18px;background:linear-gradient(180deg,#6b3118,#431c0c);border:1px solid rgba(235,198,154,.26);box-shadow:0 18px 44px rgba(0,0,0,.34)}.mode-panel header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.mode-panel header small{font-size:8px;letter-spacing:2px;color:#d5b28c}.mode-panel h2{margin:3px 0 0;color:#fff0dc;font-size:22px}.mode-panel header button{width:40px;height:40px;border-radius:13px;border:1px solid rgba(255,255,255,.13);background:rgba(38,23,17,.42);font-size:26px;color:#ead5bd}
.level-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.level-grid button{aspect-ratio:1;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(50,31,23,.42);color:#f2dfcb;font-weight:900}.level-grid button.current{outline:2px solid #d9ad77;background:rgba(178,122,80,.30)}.level-grid button.locked{opacity:.35}.level-grid button small{display:block;font-size:9px;font-weight:600;color:#c9ac90;margin-top:3px}
.challenge-list{display:grid;gap:10px}.challenge-card{width:100%;padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.11);background:rgba(49,31,24,.42);text-align:left}.challenge-card strong{display:block;color:#fff0dc;font-size:15px;margin-bottom:4px}.challenge-card span{display:block;color:#d6c0aa;font-size:11px;line-height:1.45}.challenge-card em{display:block;margin-top:6px;color:#dcb680;font-size:10px;font-style:normal}
.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.mode-switch button{height:42px;border-radius:13px;border:1px solid rgba(255,255,255,.11);background:rgba(39,24,18,.38);color:#d8c0a7;font-weight:800}.mode-switch button.active{background:#b05820;color:#fff3e3}
.loading{position:absolute;z-index:40;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#421a09;color:#f0c894;transition:opacity .3s ease}.loading.hide{opacity:0;pointer-events:none}.spinner{width:52px;height:52px;border:6px solid rgba(255,255,255,.12);border-top-color:#e29e4a;border-radius:50%;animation:spin 1s linear infinite}.loading p{margin:0;font-size:15px;font-weight:700}.load-error{width:82%;max-width:320px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}.load-error strong{font-size:18px;color:#f2d9bd}.load-error span,.load-error small{font-size:12px;line-height:1.55;color:#cdb9a5}.load-error button{border:0;border-radius:12px;background:#b05820;color:white;padding:11px 17px;font-weight:800}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-height:650px){.hud{top:6px}.goals{top:61px}.challenge-bar{top:106px}.hint{bottom:6px}.level-card,.score-card,.icon-btn{height:45px}.icon-btn{width:45px}.hud{grid-template-columns:45px 1fr 68px}.goals{height:42px}.goal{height:31px}}

/* v0.8 — 600-level chapter browser */
.level-grid{display:block}
.chapter-nav{display:grid;grid-template-columns:44px 1fr 44px;gap:9px;align-items:center;margin-bottom:12px}
.chapter-nav>button{height:44px;border-radius:13px;border:1px solid rgba(255,255,255,.12);background:rgba(48,30,23,.48);color:#f2dfcb;font-size:25px;font-weight:800}
.chapter-nav>button:disabled{opacity:.25}
.chapter-nav>div{text-align:center;min-width:0;color:#f2dfcb}
.chapter-nav>div strong{display:block;font-size:15px;letter-spacing:.4px}
.chapter-nav>div small{display:block;margin-top:2px;font-size:9px;color:#cdb298;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chapter-level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.chapter-level-grid button{min-width:0;aspect-ratio:1;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(50,31,23,.42);color:#f2dfcb;font-weight:900;padding:2px}
.chapter-level-grid button.current{outline:2px solid #d9ad77;background:rgba(178,122,80,.30)}
.chapter-level-grid button.locked{opacity:.30}
.chapter-level-grid button.checkpoint:not(.locked){box-shadow:inset 0 0 0 1px rgba(235,190,115,.42)}
.chapter-level-grid button strong{display:block;font-size:12px;line-height:1.05}
.chapter-level-grid button small{display:block;font-size:7px;line-height:1.05;font-weight:650;color:#c9ac90;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chapter-meta{margin:11px 2px 0;text-align:center;font-size:9px;line-height:1.45;color:#c6aa90}


/* v0.9 — direct mode access + WordPress leaderboard */
.quick-nav{position:absolute;z-index:6;top:max(154px,calc(env(safe-area-inset-top) + 154px));left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(3,1fr);gap:5px;width:238px;padding:4px;border-radius:14px;background:rgba(66,26,9,.74);border:1px solid rgba(229,167,90,.22);box-shadow:inset 0 1px 0 rgba(255,232,201,.08),0 4px 10px rgba(45,18,7,.15);backdrop-filter:blur(4px)}
.quick-nav button{height:32px;border:0;border-radius:10px;background:transparent;color:#e3b67d;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 5px}
.quick-nav button span{font-size:11px;color:#e29e4a}.quick-nav button.active{background:#b05820;color:#fff5e9;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}.quick-nav button.active span{color:#ffd48c}
.account-row{display:flex;align-items:center;gap:8px;margin:-4px 0 12px}.cloud-status{min-height:42px;flex:1;display:flex;align-items:center;justify-content:center;padding:7px 10px;border-radius:11px;text-align:center;font-size:12px;line-height:1.35;font-weight:700;color:#e4bc8b;background:rgba(55,22,9,.38);border:1px solid rgba(229,167,90,.13)}.account-row>button{min-width:88px;min-height:44px;padding:0 12px;border:1px solid rgba(229,167,90,.28);border-radius:12px;background:#9b6038;color:#fff4e6;font-size:13px;font-weight:800}.account-row>button:active{transform:scale(.97)}
.leaderboard-panel{min-height:250px}.leaderboard-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}.leaderboard-tabs button{height:38px;border:1px solid rgba(229,167,90,.16);border-radius:11px;background:rgba(58,23,9,.42);color:#d9b184;font-size:10px;font-weight:800}.leaderboard-tabs button.active{background:#b05820;color:#fff5e9}
.leaderboard-list{display:grid;gap:6px}.leaderboard-list>p{margin:34px 0;text-align:center;color:#c9a37c;font-size:11px}.rank-row{display:grid;grid-template-columns:32px 1fr auto;gap:8px;align-items:center;min-height:44px;padding:7px 10px;border-radius:12px;background:rgba(57,23,10,.42);border:1px solid rgba(229,167,90,.10)}.rank-row.me{outline:1px solid rgba(226,158,74,.72);background:rgba(176,88,32,.20)}.rank-no{font-size:13px;font-weight:900;color:#e29e4a;text-align:center}.rank-name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f7e5cf;font-size:12px;font-weight:800}.rank-score{color:#ffd39b;font-size:12px;font-weight:900}.rank-empty{text-align:center;color:#c6a17b;font-size:11px;padding:36px 10px}
.mode-switch{grid-template-columns:repeat(3,1fr)}
@media (max-height:650px){.quick-nav{top:141px;width:224px}.quick-nav button{height:29px;font-size:9px}}

/* v1.1 art rebuild — stronger physical depth without changing the approved layout */
.goal i{
  position:relative;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 3px 2px rgba(255,255,255,.34),inset 0 -3px 3px rgba(45,20,8,.20),0 3px 0 rgba(44,18,7,.45),0 5px 7px rgba(37,15,6,.24);
}
.goal-blue i{background:linear-gradient(145deg,#6ca2f4 0%,#4c82e6 58%,#3569bd 100%)}
.goal-green i{background:linear-gradient(145deg,#69c665 0%,#41aa39 58%,#2f7f31 100%)}
.goal-red i{background:linear-gradient(145deg,#ff7067 0%,#ef413a 58%,#b82b28 100%)}
.level-card,.score-card,.icon-btn,.goals,.challenge-bar{box-shadow:inset 0 1px 0 rgba(255,240,218,.13),inset 0 -1px 0 rgba(36,13,5,.18),0 5px 12px rgba(39,16,7,.19)}

/* v1.2 premium art system — lower-saturation walnut/maple palette, UI matched to the real-time 3D scene */
:root{background:#5b3528;color-scheme:dark}
html,body{background:#5b3528}
#app{
  background:
    radial-gradient(circle at 50% -10%,rgba(255,238,213,.075),transparent 31%),
    linear-gradient(180deg,#684034 0%,#5b3528 54%,#4d2e25 100%);
}
.icon-btn,.score-card,.level-card,.goals,.challenge-bar{
  border-color:rgba(232,207,178,.20);
  background:linear-gradient(180deg,rgba(72,47,38,.95),rgba(49,32,27,.97));
  box-shadow:inset 0 1px 0 rgba(255,246,231,.10),inset 0 -1px 0 rgba(26,17,14,.20),0 5px 13px rgba(35,23,19,.20)
}
.icon-btn span{background:#e7d3b5}
.level-card small{color:#cfb293}.level-card strong,.score-card{color:#f7ead9}.score-card span{color:#dfbd71}
.goals{border-color:rgba(233,211,185,.18)}
.goal{background:rgba(33,26,23,.40)}
.goal-blue i{background:linear-gradient(145deg,#91afca 0%,#7192b5 58%,#536f8a 100%)}
.goal-green i{background:linear-gradient(145deg,#91b992 0%,#73a276 58%,#55775a 100%)}
.goal-red i{background:linear-gradient(145deg,#e58982 0%,#d86b64 58%,#a34e49 100%)}
.goal span{color:#f6eadc}.goal em{color:#cdb8a3}
.challenge-bar{color:#d7c4b0}.challenge-bar strong{color:#f2dfc9}
.quick-nav{
  background:rgba(49,32,27,.76);border-color:rgba(220,190,157,.18);
  box-shadow:inset 0 1px 0 rgba(255,244,228,.07),0 5px 12px rgba(36,23,19,.14)
}
.quick-nav button{color:#c9ad91}.quick-nav button span{color:#b88963}
.quick-nav button.active{background:#9b6038;color:#fff1df}.quick-nav button.active span{color:#ead0aa}
.hint{background:rgba(48,38,34,.68);border-color:rgba(226,202,176,.13);color:#d8c1a8}
.toast{background:rgba(55,42,36,.94);border-color:rgba(229,205,178,.19);color:#f4e6d6}
.combo{color:#e7c99d;text-shadow:0 3px 0 #674d3c,0 6px 18px rgba(0,0,0,.28)}
.loading{background:#36261f;color:#d8b997}.spinner{border-top-color:#c69768}
.mode-panel{background:linear-gradient(180deg,#5a392d,#392722);border-color:rgba(226,204,180,.22)}
.mode-panel h2,.challenge-card strong{color:#f2e3d1}.mode-panel header small{color:#bfa389}
.mode-switch button.active,.leaderboard-tabs button.active{background:#9b6038;color:#fff2e2}
.level-grid button.current,.chapter-level-grid button.current{outline-color:#c99b70;background:rgba(155,96,56,.28)}
.cloud-status{color:#d3b795;background:rgba(44,31,26,.38);border-color:rgba(214,185,154,.12)}
.rank-row.me{outline-color:rgba(184,132,91,.70);background:rgba(155,96,56,.18)}
.rank-no{color:#c69368}.rank-score{color:#e3c29c}


/* v1.3 — mobile proportion + natural 3D polish */
:root{background:#574039}
html,body{background:#574039}
#app{
  background:
    radial-gradient(circle at 50% -12%,rgba(255,245,230,.075),transparent 34%),
    linear-gradient(180deg,#68493d 0%,#5b4037 55%,#4c3731 100%);
}
.hud{top:max(10px,env(safe-area-inset-top));left:10px;right:10px}
.goals{top:max(67px,calc(env(safe-area-inset-top) + 67px))}
.challenge-bar{top:max(116px,calc(env(safe-area-inset-top) + 116px))}
.quick-nav{top:max(150px,calc(env(safe-area-inset-top) + 150px));width:232px}
.icon-btn,.score-card,.level-card,.goals,.challenge-bar{
  background:linear-gradient(180deg,rgba(70,52,45,.95),rgba(48,36,32,.97));
  border-color:rgba(229,211,191,.18);
  box-shadow:inset 0 1px 0 rgba(255,248,237,.09),0 4px 11px rgba(35,26,23,.16)
}
.quick-nav{background:rgba(50,38,33,.78);border-color:rgba(216,195,173,.16)}
.quick-nav button.active{background:#8b6449;color:#fff4e8}
.goal-blue i{background:linear-gradient(145deg,#9bb5ca 0%,#7f9eb8 58%,#607c91 100%)}
.goal-green i{background:linear-gradient(145deg,#99b89d 0%,#7fa884 58%,#607d64 100%)}
.goal-red i{background:linear-gradient(145deg,#e69a91 0%,#d87970 58%,#ad5f59 100%)}
.hint{bottom:max(10px,env(safe-area-inset-bottom));background:rgba(52,42,38,.62);color:#d9c9bb}
@media (max-height:720px){
  .hud{top:6px}.goals{top:60px}.quick-nav{top:140px}.challenge-bar{top:108px}
  .level-card,.score-card,.icon-btn{height:46px}.icon-btn{width:46px}.hud{grid-template-columns:46px 1fr 70px}
  .goals{height:41px}.goal{height:30px}.quick-nav button{height:29px}
}


/* v1.4 — premium wood backdrop + calmer top information architecture */
.hint{display:none!important}
.hud{top:max(11px,env(safe-area-inset-top));left:12px;right:12px;grid-template-columns:46px 1fr 68px;gap:9px}
.icon-btn{width:46px;height:48px;border-radius:15px}
.icon-btn span{width:4px;height:20px}
.level-card{height:48px;min-width:142px;border-radius:16px}
.level-card small{font-size:7.5px;letter-spacing:1.55px;margin-bottom:3px}
.level-card strong{font-size:17px}
.score-card{height:48px;border-radius:16px;font-size:16px}.score-card strong{font-size:16px}.score-card span{font-size:16px}
.goals{top:max(66px,calc(env(safe-area-inset-top) + 66px));height:42px;min-width:226px;padding:4px 6px;border-radius:14px;gap:3px}
.goal{height:32px;min-width:68px;gap:6px;padding:0 6px;border-radius:10px;background:rgba(29,23,20,.32)}
.goal i{width:18px;height:18px}.goal span{font-size:12.5px}
.challenge-bar{top:max(109px,calc(env(safe-area-inset-top) + 109px));height:22px;padding:0 8px;border:0;background:transparent!important;box-shadow:none!important;color:#d9c5af;font-size:10px;opacity:.92}
.challenge-bar strong{font-size:12px;color:#f0dfcb}
.quick-nav{top:max(132px,calc(env(safe-area-inset-top) + 132px));width:226px;padding:3px;gap:3px;border-radius:13px;background:rgba(43,34,30,.72);border-color:rgba(224,207,186,.14);box-shadow:inset 0 1px 0 rgba(255,250,241,.06),0 3px 9px rgba(30,22,19,.12)}
.quick-nav button{height:30px;border-radius:9px;font-size:9.5px;gap:3px;color:#cdb9a5}
.quick-nav button span{font-size:10px;color:#aa8d73}
.quick-nav button.active{background:#876047;color:#fff4e8;box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}
.quick-nav button.active span{color:#ead4b6}
.icon-btn,.score-card,.level-card,.goals{
  background:linear-gradient(180deg,rgba(65,49,43,.94),rgba(43,33,29,.96));
  border-color:rgba(234,219,200,.16);
  box-shadow:inset 0 1px 0 rgba(255,250,242,.08),0 3px 9px rgba(30,22,19,.15)
}
#app{
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 86px),
    linear-gradient(180deg,#684a3b 0%,#5c4035 52%,#50372f 100%);
}
@media (max-height:720px){
  .hud{top:6px}.goals{top:58px}.challenge-bar{top:99px}.quick-nav{top:121px}
  .level-card,.score-card,.icon-btn{height:44px}.icon-btn{width:44px}.hud{grid-template-columns:44px 1fr 66px}
  .goals{height:39px}.goal{height:29px}.quick-nav button{height:28px}
}


/* v1.5 — warm recessed board + integrated premium tray */
#app{
  background:linear-gradient(180deg,#6b4c3d 0%,#5d4237 52%,#523a32 100%);
}
.quick-nav{background:rgba(53,43,38,.72);border-color:rgba(232,216,197,.13)}
.quick-nav button{color:#c9b7a5}.quick-nav button.active{background:#80624d;color:#fff7ed}
.icon-btn,.score-card,.level-card,.goals{
  background:linear-gradient(180deg,rgba(68,54,47,.93),rgba(48,39,35,.95));
  border-color:rgba(237,224,207,.15);
  box-shadow:inset 0 1px 0 rgba(255,252,246,.075),0 3px 8px rgba(31,24,21,.12)
}

/* v1.6 — quiet smoked-oak background + seamless compact organizer */
:root,html,body{background:#5a4a40}
#app{
  background:
    radial-gradient(circle at 50% -8%,rgba(248,238,225,.055),transparent 32%),
    linear-gradient(180deg,#665349 0%,#5a4a40 54%,#4e4038 100%);
}

/* v2.0 Gameplay — visible restart, four challenge leaderboards, star-rich level cards */
.hud{grid-template-columns:84px 1fr 68px;align-items:start}
.hud-tools{height:48px;display:grid;grid-template-columns:46px 32px;gap:6px;align-items:center;justify-content:start}
.hud-tools .icon-btn{position:relative;inset:auto;margin:0}
.restart-quick{
  width:32px;height:32px;border-radius:11px;border:1px solid rgba(234,219,200,.16);
  background:linear-gradient(180deg,rgba(65,49,43,.94),rgba(43,33,29,.96));
  box-shadow:inset 0 1px 0 rgba(255,250,242,.08),0 3px 9px rgba(30,22,19,.13);
  color:#e8d6bf;font-size:19px;font-weight:800;line-height:1;padding:0;cursor:pointer
}
.restart-quick:active{transform:scale(.94)}
.leaderboard-tabs{grid-template-columns:repeat(5,1fr)}
.leaderboard-tabs button{font-size:9px;padding:0 4px}
.level-grid .star-mini,.chapter-level-grid .star-mini{display:block;margin-top:2px;font-size:8px;letter-spacing:.6px;color:#d9b46d;white-space:nowrap}
.chapter-level-grid button.boss{border-color:rgba(214,171,96,.40);background:linear-gradient(180deg,rgba(125,89,58,.34),rgba(67,48,39,.52))}
.chapter-level-grid button.boss strong::after{content:' BOSS';font-size:6px;letter-spacing:.4px;color:#e1bd77;vertical-align:middle}
.challenge-card .challenge-badge{display:inline-flex;align-items:center;justify-content:center;margin-left:6px;padding:2px 5px;border-radius:7px;background:rgba(199,158,88,.16);color:#ddbc7d;font-size:7px;letter-spacing:.5px}
.dialog .stars-result{font-size:28px;letter-spacing:4px;color:#d9b055;text-shadow:0 2px 0 rgba(46,31,22,.35);margin:-4px 0 8px}
@media(max-width:360px){.hud{grid-template-columns:76px 1fr 62px}.hud-tools{grid-template-columns:42px 28px;gap:5px}.restart-quick{width:28px;height:28px;font-size:17px}.level-card{min-width:126px}}
@media(max-height:720px){.hud{grid-template-columns:80px 1fr 66px}.hud-tools{height:44px;grid-template-columns:44px 30px}.restart-quick{width:30px;height:30px}}

/* v2.2 — unified control geometry + audio toggle */
:root{
  --control-size:42px;
  --control-radius:14px;
  --control-icon:19px;
  --control-gap:5px;
}
.hud{
  grid-template-columns:136px minmax(118px,1fr) 64px;
  gap:6px;
  align-items:start;
}
.hud-tools{
  width:136px;
  height:var(--control-size);
  display:grid;
  grid-template-columns:repeat(3,var(--control-size));
  gap:var(--control-gap);
  align-items:center;
  justify-content:start;
}
.hud-tools .ui-icon-btn{
  position:relative;
  inset:auto;
  width:var(--control-size);
  height:var(--control-size);
  min-width:var(--control-size);
  min-height:var(--control-size);
  margin:0;
  padding:0;
  border-radius:var(--control-radius);
  border:1px solid rgba(237,224,207,.15);
  background:linear-gradient(180deg,rgba(68,54,47,.94),rgba(48,39,35,.96));
  box-shadow:inset 0 1px 0 rgba(255,252,246,.075),0 3px 8px rgba(31,24,21,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ead9c6;
  cursor:pointer;
  transition:transform .12s ease,background .18s ease,color .18s ease,opacity .18s ease;
}
.hud-tools .ui-icon-btn:active{transform:scale(.94)}
.ui-icon{
  width:var(--control-icon);
  height:var(--control-icon);
  display:block;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#pauseBtn .ui-icon rect{fill:currentColor;stroke:none}
.restart-quick{font-size:0;line-height:1}
.audio-quick{font-size:0;line-height:1}
.audio-quick .icon-sound-off{display:none}
.audio-quick.muted{color:#a99582;background:linear-gradient(180deg,rgba(58,48,43,.92),rgba(43,36,32,.95))}
.audio-quick.muted .icon-sound-on{display:none}
.audio-quick.muted .icon-sound-off{display:block}

/* All compact mode icons use the same 13px visual box instead of font glyph sizing. */
.quick-nav button{gap:5px}
.quick-nav .nav-icon{
  width:13px;
  height:13px;
  min-width:13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:currentColor;
  font-size:0;
}
.quick-nav .nav-icon svg{
  width:13px;
  height:13px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.quick-nav button.active .nav-icon{color:#ead4b6}

/* Keep the close control on the same visual system. */
.mode-panel header>button{
  width:42px;
  height:42px;
  min-width:42px;
  border-radius:14px;
  font-size:20px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

@media(max-width:360px){
  :root{--control-size:39px;--control-radius:13px;--control-icon:18px;--control-gap:4px}
  .hud{grid-template-columns:125px minmax(112px,1fr) 60px;gap:5px}
  .hud-tools{width:125px;height:var(--control-size);grid-template-columns:repeat(3,var(--control-size));gap:var(--control-gap)}
  .level-card{min-width:112px}
}
@media(max-height:720px){
  .hud-tools{height:var(--control-size);grid-template-columns:repeat(3,var(--control-size))}
}

/* v2.5 — 一块到底品牌系统 */
.brand-panel-title{display:flex;align-items:center;gap:10px;min-width:0}
.brand-panel-title>img{width:34px;height:34px;flex:none;border-radius:10px;box-shadow:0 3px 8px rgba(29,18,14,.18)}
.brand-panel-title>div{min-width:0}
.brand-panel-title small{display:block;color:#c9aa8a!important;font-size:10px!important;font-weight:800;letter-spacing:1.8px!important}
.loading-logo{width:min(76%,340px);height:auto;display:block;margin-bottom:2px;filter:drop-shadow(0 8px 14px rgba(29,18,14,.18))}
@media (max-height:650px){.loading-logo{width:min(68%,300px)}}