:root{
  --ink:oklch(24% .035 72);--paper:oklch(91% .06 82);--paper-deep:oklch(78% .09 78);
  --forest:oklch(31% .07 140);--forest-dark:oklch(20% .045 140);--moss:oklch(49% .1 132);
  --gold:oklch(79% .15 82);--gold-dark:oklch(49% .12 62);--blood:oklch(42% .16 25);
  --cream:oklch(96% .025 87);--shadow:oklch(17% .03 75 / .56);
  --display:'FZShuTi','STKaiti','Kaiti SC',serif;--body:'STKaiti','Kaiti SC','Songti SC',serif;
  --out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--forest-dark);color:var(--ink);font-family:var(--body);overflow-x:hidden}
body{min-height:100svh;overscroll-behavior:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.screen{display:none;min-height:100svh;position:relative}.screen.active{display:flex}
.eyebrow{margin:0 0 .35rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:.76rem;color:oklch(72% .12 82)}
.home-screen{align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:clamp(1.5rem,5vw,4rem);isolation:isolate;background:linear-gradient(180deg,oklch(22% .055 140 / .22),oklch(16% .04 80 / .92)),url('assets/battlefield-grassland.webp') center/cover}
.home-screen:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 38%,transparent 0 24%,oklch(12% .03 82 / .72) 78%);z-index:-1}
.home-vignette{position:absolute;inset:0;z-index:-1;box-shadow:inset 0 0 8rem 2rem oklch(10% .02 70 / .8)}
.home-brand{width:min(36rem,100%);min-width:0;color:var(--cream);text-shadow:0 3px 1px oklch(20% .08 55),0 7px 16px oklch(10% .04 60 / .8);animation:rise .8s var(--out) both}
.crest{width:clamp(5rem,14vw,7.5rem);filter:drop-shadow(0 8px 6px var(--shadow));margin-bottom:.4rem}
.home-brand h1{font-family:var(--display);font-size:clamp(3.1rem,10vw,6.6rem);line-height:.82;margin:.15rem 0 1rem;color:oklch(94% .05 82);letter-spacing:.025em;font-weight:400}
.home-brand h1 span{font-size:.72em;color:var(--gold)}
.home-copy{width:100%;max-width:31rem;margin:0 auto;line-height:1.65;font-size:clamp(.94rem,2.5vw,1.15rem);color:oklch(93% .025 85);overflow-wrap:anywhere}
.home-actions{display:grid;width:min(22rem,88vw);gap:.7rem;margin-top:1.65rem;animation:rise .8s .14s var(--out) both}
.stone-btn{border:0;min-height:3.1rem;padding:.72rem 1.5rem;border-radius:.42rem;font-weight:700;letter-spacing:.06em;box-shadow:inset 0 2px 0 oklch(100% 0 0 / .35),inset 0 -4px 0 oklch(20% .05 62 / .32),0 5px 0 oklch(20% .05 62),0 9px 18px var(--shadow);transition:transform .12s,filter .12s}
.stone-btn:active{transform:translateY(4px);box-shadow:inset 0 2px 0 oklch(100% 0 0 / .25),inset 0 -2px 0 oklch(20% .05 62 / .3),0 1px 0 oklch(20% .05 62)}
.stone-btn.primary{background:linear-gradient(oklch(84% .16 88),oklch(64% .15 68));color:oklch(25% .06 55);border:2px solid oklch(93% .11 90)}
.stone-btn.secondary{background:linear-gradient(oklch(72% .055 78),oklch(52% .06 70));color:var(--cream);border:2px solid oklch(82% .06 82)}
.text-btn{border:0;background:none;min-height:2.75rem;color:oklch(89% .07 84);text-decoration:underline;text-underline-offset:.25rem;font-weight:700}
.home-progress{display:flex;gap:1.3rem;margin-top:1.5rem;color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums}.home-note{position:absolute;bottom:max(.8rem,env(safe-area-inset-bottom));margin:0;color:oklch(80% .02 80);font-size:.7rem}

.campaign-screen{flex-direction:column;background:linear-gradient(oklch(92% .045 88 / .94),oklch(76% .07 105 / .9)),url('assets/battlefield-grassland.webp') center/cover fixed;padding-bottom:3rem}
.campaign-header{display:flex;align-items:center;gap:1rem;padding:1rem max(1rem,calc((100vw - 62rem)/2));background:oklch(24% .055 140);color:var(--cream);border-bottom:4px solid var(--gold-dark);box-shadow:0 6px 18px var(--shadow);position:sticky;top:0;z-index:3}
.campaign-header h2{font-family:var(--display);font-size:clamp(1.7rem,5vw,2.5rem);font-weight:400;margin:0}.campaign-header .eyebrow{margin:0}.round-btn,.hud-button{width:2.8rem;height:2.8rem;border-radius:50%;border:2px solid oklch(80% .09 82);background:linear-gradient(oklch(49% .07 132),oklch(26% .06 140));color:var(--cream);font-size:1.8rem;font-weight:700;box-shadow:0 3px 0 oklch(14% .03 140)}
.star-total{margin-left:auto;color:var(--gold);font-weight:700;font-size:1.15rem}
.campaign-path{width:min(58rem,94vw);margin:1.5rem auto;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;counter-reset:level}
.level-node{counter-increment:level;min-height:8rem;border:0;border-radius:.65rem;padding:1rem;text-align:left;position:relative;overflow:hidden;background:linear-gradient(135deg,oklch(95% .04 86),oklch(79% .08 85));border:3px solid oklch(52% .09 65);box-shadow:inset 0 0 0 2px oklch(98% .03 85),0 6px 0 oklch(32% .055 72),0 12px 24px oklch(20% .03 75 / .25);transition:transform .2s var(--out),filter .2s}
.level-node:before{content:counter(level);position:absolute;right:.55rem;bottom:-.9rem;font-family:var(--display);font-size:6rem;color:oklch(45% .06 73 / .13)}
.level-node:nth-child(3n+2){transform:translateY(1rem)}.level-node b{display:block;font-family:var(--display);font-size:1.35rem;font-weight:400;margin-bottom:.25rem}.level-node span{display:block;font-size:.83rem;color:oklch(39% .05 72)}.level-node .node-stars{color:var(--gold-dark);font-size:1.2rem;letter-spacing:.08em;margin-top:.65rem}.level-node.locked{filter:grayscale(.8) brightness(.72);cursor:not-allowed}.level-node.locked:after{content:'🔒';position:absolute;right:1rem;top:1rem}.level-node.boss{background:linear-gradient(135deg,oklch(93% .035 70),oklch(72% .09 35));border-color:var(--blood)}
.campaign-legend{width:min(58rem,92vw);margin:1rem auto;padding:1rem 1.2rem;background:oklch(25% .045 140 / .92);color:var(--cream);border-left:5px solid var(--gold);box-shadow:0 8px 18px var(--shadow)}.campaign-legend b,.campaign-legend span{display:block}.campaign-legend span{font-size:.85rem;margin-top:.2rem;color:oklch(88% .03 84)}

.game-screen{height:100svh;min-height:32rem;flex-direction:column;background:var(--forest-dark);overflow:hidden}
.battle-hud{height:4rem;flex:0 0 4rem;display:flex;align-items:center;gap:.42rem;padding:.35rem max(.45rem,env(safe-area-inset-left));background:linear-gradient(oklch(32% .06 139),oklch(20% .045 140));border-bottom:3px solid var(--gold-dark);color:var(--cream);z-index:5;box-shadow:0 4px 12px var(--shadow)}
.battle-hud .hud-button{width:2.55rem;height:2.55rem;flex:0 0 auto;font-size:1.3rem}.hud-medallion{display:flex;flex-direction:column;align-items:center;min-width:3.35rem;padding:.18rem .5rem;border-radius:.35rem;background:oklch(17% .03 140);border:1px solid oklch(55% .07 108);box-shadow:inset 0 1px 0 oklch(70% .05 120 / .3)}.hud-medallion small,.hud-title small{font-size:.62rem;color:oklch(81% .06 85)}.hud-medallion strong{font-size:1.05rem;font-variant-numeric:tabular-nums;color:var(--gold)}.hud-title{flex:1;min-width:0;text-align:center;line-height:1.05}.hud-title span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}.hud-title small{display:block;margin-top:.15rem}
.battlefield{position:relative;flex:1;min-height:0;display:grid;place-items:center;background:linear-gradient(oklch(24% .08 138 / .38),oklch(20% .06 138 / .52)),url('assets/battlefield-grassland.webp') center/cover}
#gameCanvas{display:block;width:100%;height:100%;object-fit:contain;touch-action:none}
.wave-banner{position:absolute;left:50%;top:9%;transform:translate(-50%,-1rem);opacity:0;pointer-events:none;padding:.58rem 1.6rem;background:linear-gradient(90deg,transparent,oklch(21% .04 68 / .95) 18% 82%,transparent);color:var(--gold);font-family:var(--display);font-size:clamp(1.5rem,5vw,2.6rem);white-space:nowrap;text-shadow:0 2px 0 oklch(15% .05 45);transition:.35s var(--out)}.wave-banner.show{opacity:1;transform:translate(-50%,0)}
.next-wave{position:absolute;right:2.3%;top:13%;width:4.7rem;height:4.7rem;border-radius:50%;border:4px solid var(--gold);background:radial-gradient(circle at 40% 30%,oklch(61% .16 32),oklch(31% .14 25));color:var(--cream);box-shadow:0 0 0 4px oklch(24% .05 70),0 8px 18px var(--shadow);animation:pulse 1.8s infinite}.next-wave span,.next-wave b,.next-wave small{display:block}.next-wave span{font-size:1.25rem}.next-wave b{line-height:1}.next-wave small{font-size:.58rem}.hidden{display:none!important}
.battle-controls{flex:0 0 auto;display:flex;gap:.4rem;padding:.38rem max(.45rem,env(safe-area-inset-right)) max(.38rem,env(safe-area-inset-bottom));background:linear-gradient(oklch(32% .055 78),oklch(19% .04 70));border-top:3px solid oklch(57% .09 73);z-index:6;box-shadow:0 -5px 14px var(--shadow)}
.tower-dock{display:grid;grid-template-columns:repeat(4,minmax(2.75rem,1fr));gap:.22rem;flex:1;min-width:0}.tower-choice,.skill-button{border:1px solid oklch(67% .08 78);border-radius:.35rem;background:linear-gradient(oklch(53% .06 72),oklch(31% .05 68));color:var(--cream);min-height:3.75rem;padding:.18rem;position:relative;box-shadow:inset 0 1px 0 oklch(90% .04 80 / .28),0 3px 0 oklch(14% .035 70)}.tower-choice.selected{outline:3px solid var(--gold);transform:translateY(-3px)}.tower-choice:disabled{filter:grayscale(.8) brightness(.62)}.tower-choice b,.tower-choice span{display:block}.tower-choice b{font-size:.68rem;white-space:nowrap}.tower-choice span{font-size:.65rem;color:var(--gold)}
.tower-icon{width:1.6rem;height:1.6rem;display:block;margin:0 auto .05rem;position:relative}.tower-icon:before,.tower-icon:after{content:"";position:absolute}.tower-icon.archer:before{width:1.2rem;height:1.2rem;left:.18rem;bottom:.05rem;background:#92612f;clip-path:polygon(15% 100%,0 24%,25% 0,75% 0,100% 24%,85% 100%)}.tower-icon.archer:after{width:1.4rem;height:.32rem;left:.1rem;top:.2rem;background:#d9b55c;clip-path:polygon(0 100%,18% 0,82% 0,100% 100%)}
.tower-icon.barracks:before{inset:.18rem;background:#9b2d2c;clip-path:polygon(50% 0,90% 20%,80% 80%,50% 100%,20% 80%,10% 20%);border:2px solid #e0bd63}.tower-icon.mage:before{inset:.12rem;background:#6b50b0;clip-path:polygon(50% 0,70% 35%,100% 50%,70% 65%,50% 100%,30% 65%,0 50%,30% 35%)}.tower-icon.artillery:before{width:1.55rem;height:.75rem;background:#2c2925;border-radius:.7rem;transform:rotate(-28deg);top:.25rem}.tower-icon.artillery:after{width:.85rem;height:.85rem;border:3px solid #a16936;border-radius:50%;bottom:.02rem;left:.1rem}
.skill-dock{display:grid;grid-template-columns:repeat(3,2.9rem);gap:.2rem}.skill-button b,.skill-button span,.skill-button small{display:block}.skill-button b{font-size:1.25rem;line-height:1}.skill-button span{font-size:.58rem;font-weight:700;white-space:nowrap}.skill-button small{font-size:.52rem;color:var(--gold)}.skill-button.quiz{background:linear-gradient(oklch(58% .13 90),oklch(33% .09 75))}.skill-button.meteor{background:linear-gradient(oklch(54% .16 30),oklch(27% .1 22))}
.tower-panel{position:absolute;left:50%;bottom:.65rem;transform:translateX(-50%);width:min(32rem,94%);display:grid;grid-template-columns:1fr auto auto;gap:.5rem;align-items:center;padding:.75rem 2.1rem .75rem .9rem;background:linear-gradient(135deg,oklch(92% .055 82),oklch(76% .08 75));border:3px solid oklch(43% .07 67);border-radius:.5rem;box-shadow:0 8px 24px var(--shadow);z-index:4}.tower-panel small,.tower-panel b,.tower-panel span{display:block}.tower-panel small{font-size:.66rem}.tower-panel b{font-family:var(--display);font-size:1.2rem;font-weight:400}.tower-panel span{font-size:.68rem}.panel-close{position:absolute;right:.28rem;top:.2rem;width:1.8rem;height:1.8rem;border:0;background:none;font-size:1.4rem}.panel-action{border:1px solid oklch(47% .07 68);background:linear-gradient(var(--gold),var(--gold-dark));min-height:2.8rem;padding:.3rem .7rem;border-radius:.3rem;font-weight:700}.panel-action em{font-style:normal;display:block;font-size:.68rem}.panel-action.danger{background:linear-gradient(oklch(69% .08 52),oklch(47% .11 35));color:var(--cream)}

.sheet-backdrop{position:fixed;inset:0;background:oklch(12% .025 70 / .72);z-index:20;backdrop-filter:blur(2px)}
.quiz-sheet{position:fixed;z-index:21;left:50%;bottom:0;transform:translateX(-50%);width:min(48rem,100%);max-height:92svh;overflow:auto;padding:1rem clamp(1rem,4vw,2.2rem) max(1rem,env(safe-area-inset-bottom));background:linear-gradient(180deg,var(--paper),oklch(84% .065 80));border-radius:1.2rem 1.2rem 0 0;border:3px solid oklch(49% .075 70);box-shadow:0 -14px 44px oklch(12% .03 70 / .55);animation:sheetIn .42s var(--out) both}
.quiz-grip{width:3rem;height:.28rem;border-radius:1rem;background:oklch(52% .04 75);margin:0 auto .9rem}.quiz-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}.quiz-head h2{font-family:var(--display);font-size:clamp(1.55rem,5vw,2.2rem);font-weight:400;margin:0}.quiz-head .eyebrow{color:oklch(45% .12 65)}.reward-seal{display:grid;place-items:center;width:4rem;height:4rem;border-radius:50%;flex:0 0 auto;background:var(--blood);color:var(--gold);border:4px double var(--gold);font-weight:700;font-size:1.15rem;transform:rotate(4deg)}.quiz-meta{display:flex;gap:.5rem;margin:.8rem 0}.quiz-meta span{padding:.18rem .55rem;background:oklch(73% .07 78);border-radius:2rem;font-size:.72rem}.question-stem{font-size:clamp(1rem,3vw,1.2rem);line-height:1.62;font-weight:700;margin:.65rem 0 1rem}.question-options{display:grid;gap:.55rem}.question-option{display:grid;grid-template-columns:2rem 1fr;align-items:center;min-height:3.15rem;text-align:left;padding:.55rem .75rem;border:2px solid oklch(57% .055 75);border-radius:.45rem;background:oklch(94% .035 84);box-shadow:inset 0 1px 0 oklch(100% 0 0 / .5);transition:transform .12s,background .12s}.question-option:active{transform:scale(.985)}.question-option .key{display:grid;place-items:center;width:1.65rem;height:1.65rem;border-radius:50%;background:oklch(75% .075 80);font-weight:700}.question-option.selected{background:oklch(84% .11 91);border-color:oklch(54% .13 75)}.question-option.correct{background:oklch(83% .1 135);border-color:oklch(47% .13 138)}.question-option.wrong{background:oklch(81% .09 28);border-color:oklch(47% .15 25)}.quiz-feedback{margin:.8rem 0 0;padding:.7rem .9rem;border-left:5px solid var(--moss);background:oklch(94% .035 84);line-height:1.45}.quiz-actions{display:flex;align-items:center;gap:.75rem;margin-top:1rem}.quiz-actions .text-btn{color:oklch(39% .04 72);flex:1;text-align:left}.quiz-actions .stone-btn{min-width:9rem}
.result-modal,.rules-modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:1rem;background:oklch(12% .025 70 / .78);backdrop-filter:blur(4px)}.result-modal[hidden],.rules-modal[hidden]{display:none}.result-card,.rules-modal article{width:min(28rem,94vw);padding:clamp(1.5rem,5vw,2.4rem);text-align:center;background:linear-gradient(var(--paper),oklch(78% .075 75));border:5px double oklch(45% .075 68);border-radius:.7rem;box-shadow:0 18px 45px oklch(10% .025 60 / .7);position:relative}.result-card h2,.rules-modal h2{font-family:var(--display);font-size:2.4rem;font-weight:400;margin:.1rem 0}.result-stars{font-size:2.7rem;letter-spacing:.18rem;color:var(--gold-dark);text-shadow:0 2px 0 oklch(95% .08 88)}.result-card .stone-btn{width:100%;margin-top:.65rem}.rules-modal article{text-align:left}.rules-modal ol{padding-left:1.2rem;margin-bottom:0}.rules-modal li{padding:.48rem 0}.rules-modal li b,.rules-modal li span{display:block}.rules-modal li span{font-size:.85rem;line-height:1.45;margin-top:.15rem}.toast{position:fixed;z-index:50;left:50%;top:5.2rem;transform:translate(-50%,-1rem);opacity:0;pointer-events:none;padding:.65rem 1rem;border-radius:2rem;background:oklch(22% .045 70);color:var(--cream);border:2px solid var(--gold);box-shadow:0 6px 18px var(--shadow);font-weight:700;transition:.25s var(--out);white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes rise{from{opacity:0;transform:translateY(1.2rem)}to{opacity:1;transform:none}}@keyframes sheetIn{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}@keyframes pulse{50%{transform:scale(1.06);filter:brightness(1.15)}}

@media (min-width:640px){.campaign-path{grid-template-columns:repeat(3,1fr)}.level-node:nth-child(3n+2){transform:translateY(1rem)}.battle-hud{padding-inline:1rem}.battle-controls{padding-inline:1rem}.tower-dock{grid-template-columns:repeat(4,minmax(3.6rem,1fr))}.tower-choice{min-height:4.1rem}.skill-dock{grid-template-columns:repeat(3,4rem)}}
@media (min-width:900px){.campaign-path{grid-template-columns:repeat(4,1fr)}.game-screen{max-width:110rem;margin:auto}.battle-controls{padding-inline:max(1rem,calc((100vw - 78rem)/2))}.tower-choice b{font-size:.82rem}}
@media (orientation:landscape) and (max-height:620px){.battle-hud{height:3.2rem;flex-basis:3.2rem}.battle-hud .hud-button{width:2.15rem;height:2.15rem}.battle-controls{position:absolute;right:.4rem;bottom:.4rem;flex-direction:column;width:15rem;background:oklch(21% .04 70 / .94);border:2px solid oklch(57% .09 73);border-radius:.5rem}.tower-dock{grid-template-columns:repeat(4,1fr)}.skill-dock{grid-template-columns:repeat(3,1fr)}.tower-choice,.skill-button{min-height:3.25rem}.tower-icon{display:none}.home-brand h1{font-size:3.7rem}.home-brand .crest{width:4.2rem}.home-copy{display:none}.home-actions{margin-top:.8rem;grid-template-columns:1fr 1fr;width:29rem}.home-actions .text-btn{grid-column:1/-1}.home-note{display:none}}
@media (pointer:coarse){button{min-height:44px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}