:root {
  --ink:#15352d; --ink-2:#254d42; --paper:#fff8df; --grass:#8fca68; --grass-dark:#377647;
  --red:#e64b3e; --red-dark:#9f2e28; --yellow:#ffdb58; --blue:#38a6cf; --boss:#c63c79;
}
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; }
body { display:grid; place-items:center; background:#102b25; color:var(--ink); font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif; user-select:none; }
button { font:inherit; }
.app { width:min(1280px,100vw); height:min(800px,100vh); position:relative; overflow:hidden; background:#8fc869; box-shadow:0 24px 70px #071b17aa; }
.arena { position:absolute; inset:0; overflow:hidden; cursor:crosshair; touch-action:none; background:
  radial-gradient(circle at 12% 28%,#d6ef9e 0 3px,transparent 4px),
  radial-gradient(circle at 74% 78%,#d6ef9e 0 2px,transparent 3px),
  linear-gradient(90deg,transparent 49.6%,#669b4e33 50%,transparent 50.4%),#8fc869;
  background-size:74px 74px,93px 93px,180px 100%; }
.arena::before { content:""; position:absolute; z-index:1; inset:76px 18px 18px; pointer-events:none; border:3px solid #d9efbd88; outline:5px solid #3f754bc7; border-radius:5px; }
#gameCanvas { position:absolute; z-index:2; inset:0; width:100%; height:100%; }
.player { position:absolute; z-index:5; left:0; top:0; width:96px; height:104px; background:url("Assets/Player/Move/walk-down-strip.png") 0 0/384px 104px no-repeat; filter:drop-shadow(0 7px 3px #24482c66); transform-origin:50% 86%; will-change:transform,background-position; pointer-events:none; }
.player.dir-up { background-image:url("Assets/Player/Move/walk-up-strip.png"); }
.player.dir-down { background-image:url("Assets/Player/Move/walk-down-strip.png"); }
.player.dir-left,.player.dir-right { background-image:url("Assets/Player/Move/walk-side-strip.png"); }
.player.idle { background-image:url("Assets/Player/Idle/idle-strip.png"); background-size:288px 104px; animation:idle-frames 1.3s steps(3) infinite,breathe 1.3s ease-in-out infinite; }
.player.walking { animation:walk-frames .42s steps(4) infinite; }
.player.winning { background-image:url("Assets/Player/Victory/win-strip.png"); background-size:576px 104px; animation:win-frames .8s steps(6) infinite; }
.player.hurt { animation:hurt-flash .12s steps(2) infinite; }
.player.dodging { animation:dodge-spin .32s ease-out; filter:drop-shadow(0 0 10px #fff) drop-shadow(0 7px 3px #24482c66); }
@keyframes idle-frames { to { background-position-x:-288px; } }
@keyframes walk-frames { to { background-position-x:-384px; } }
@keyframes win-frames { to { background-position-x:-576px; } }
@keyframes breathe { 50% { scale:1.02 .98; } }
@keyframes hurt-flash { 50% { opacity:.25; filter:brightness(4) saturate(0); } }
@keyframes dodge-spin { 50% { rotate:180deg; scale:.8; } 100% { rotate:360deg; } }
.hud { position:absolute; z-index:20; inset:0 0 auto; height:72px; display:flex; align-items:center; gap:22px; padding:9px 18px; color:#fff; cursor:default; background:#173e35f5; border-bottom:3px solid #0a2922; box-shadow:0 5px 0 #fff2; }
.game-mark { min-width:190px; display:flex; align-items:center; gap:10px; font-size:20px; white-space:nowrap; }
.mark-leaf { width:42px; height:42px; display:grid; place-items:center; border:3px solid #fff; border-radius:50% 50% 46% 54%; background:#5fbf55; box-shadow:0 3px 0 #24643a; transform:rotate(-8deg); font-weight:900; }
.hud-group { display:flex; flex-direction:column; gap:1px; min-width:75px; }
.hud-label,.meter-label { color:#afd4c7; font-size:10px; font-weight:700; }
.hud-group strong { font-size:19px; line-height:1.15; }
.hearts { color:#ff6259; font-size:19px; letter-spacing:1px; text-shadow:0 2px #8c2622; white-space:nowrap; }
.charge-meter { flex:1; min-width:130px; max-width:230px; }
.meter-label { display:flex; justify-content:space-between; margin-bottom:4px; }
.meter-track { height:10px; position:relative; overflow:hidden; border:2px solid #09271f; border-radius:3px; background:#0d3028; }
.meter-track i { display:block; width:100%; height:100%; background:linear-gradient(90deg,#58bc56 0 49%,#f6d54e 50% 79%,#ff8059 80%); transition:width .08s; }
.meter-track b { position:absolute; top:0; bottom:0; width:2px; background:#fff9; }
.tick-a { left:50%; }.tick-b { left:80%; }
.dodge-meter { width:54px; display:grid; gap:4px; color:#afd4c7; font-size:10px; font-weight:700; }
.dodge-meter::after { content:""; grid-column:1; grid-row:2; width:54px; height:7px; border-radius:2px; background:#0b2922; }
.dodge-meter i { z-index:1; grid-column:1; grid-row:2; width:100%; height:7px; border-radius:2px; background:#5dd8de; }
.icon-button { width:42px; height:42px; display:grid; place-items:center; color:#fff; border:2px solid #79a99a; border-radius:6px; background:#295c50; cursor:pointer; }
.icon-button:hover { background:#37786a; }
.boss-hud { position:absolute; z-index:15; top:88px; left:50%; width:min(560px,70vw); transform:translateX(-50%); padding:9px 12px; color:#fff; background:#173e35e8; border:2px solid #f0b5ce; border-radius:5px; box-shadow:0 5px 15px #173e3566; }
.boss-name { display:flex; justify-content:space-between; align-items:end; margin-bottom:5px; }.boss-name span { color:#f4b8d0; font-size:10px; }.boss-name strong { font-size:16px; }
.boss-track { height:12px; padding:2px; background:#341528; border-radius:3px; }.boss-track i { display:block; width:100%; height:100%; background:linear-gradient(90deg,#c63c79,#ef659d); transition:width .15s; }
.objective { position:absolute; z-index:10; top:92px; left:26px; padding:8px 12px; color:#fff; background:#173e35d9; border-left:4px solid var(--yellow); border-radius:3px; pointer-events:none; }
.objective-kicker { display:block; color:#b7d8ce; font-size:9px; }.objective strong { font-size:13px; }
.buff-hud { position:absolute; z-index:11; top:150px; left:26px; display:grid; gap:5px; pointer-events:none; }.buff-hud span { min-width:92px; padding:5px 8px; color:#173e35; border:2px solid #fff9; border-radius:3px; background:#ffdf62e8; font-size:11px; font-weight:900; box-shadow:2px 2px 0 #173e3544; }
.wave-banner { position:absolute; z-index:18; left:50%; top:42%; min-width:310px; padding:13px 34px; opacity:0; transform:translate(-50%,-50%) scale(.85); text-align:center; color:#fff; background:#173e35eb; border:3px solid #fff; box-shadow:7px 7px 0 #0c2923aa; pointer-events:none; transition:.25s; }
.wave-banner.show { opacity:1; transform:translate(-50%,-50%) scale(1); }.wave-banner small,.wave-banner span { display:block; color:#b8d8cd; font-size:10px; letter-spacing:2px; }.wave-banner strong { display:block; margin:2px 0; font-size:30px; }
.status-toast { position:absolute; z-index:16; left:50%; bottom:28px; padding:8px 15px; opacity:0; transform:translate(-50%,10px); color:#fff; background:#173e35e8; border-radius:4px; font-weight:700; pointer-events:none; transition:.18s; }.status-toast.show { opacity:1; transform:translate(-50%,0); }
.screen { position:absolute; z-index:40; inset:0; display:grid; place-items:center; cursor:default; background:#102d27d8; backdrop-filter:blur(5px); }
.hidden { display:none !important; }
.menu-screen { display:block; overflow:hidden; background:#78b85c; backdrop-filter:none; }
.menu-screen::after { content:""; position:absolute; z-index:0; inset:66% 0 0; background:repeating-linear-gradient(0deg,#477f45 0 3px,#548f4b 3px 16px); border-top:8px solid #34683d; }
.menu-art { position:absolute; inset:0; overflow:hidden; background:linear-gradient(#c9edbd 0 65%,transparent 65%); }
.sun { position:absolute; top:8%; right:10%; width:130px; height:130px; border-radius:50%; background:#fff09a; box-shadow:0 0 0 22px #fff6b344; }
.cloud { position:absolute; width:130px; height:32px; border-radius:40px; background:#fff9; }.cloud::before,.cloud::after { content:""; position:absolute; bottom:0; border-radius:50%; background:inherit; }.cloud::before { width:50px;height:50px;left:22px; }.cloud::after { width:65px;height:65px;right:16px; }.cloud-a { top:17%;left:8%; }.cloud-b { top:29%;right:25%;scale:.7; }
.hero-preview { position:absolute; z-index:2; right:9%; bottom:8%; width:288px; height:312px; background:url("Assets/Player/Idle/idle-strip.png") 0 0/864px 312px no-repeat; image-rendering:auto; filter:drop-shadow(18px 20px 0 #23523755); animation:hero-idle 1.3s steps(3) infinite; }
@keyframes hero-idle { to { background-position-x:-864px; } }
.menu-content { position:absolute; z-index:3; left:8%; top:50%; width:min(470px,45vw); transform:translateY(-50%); }
.eyebrow,.dialog-kicker,.chapter-tag { display:inline-block; padding:5px 9px; color:#fff; background:#39794a; font-size:11px; font-weight:900; letter-spacing:1px; }
.menu-content h1 { margin:12px 0 0; font-size:clamp(64px,8vw,104px); line-height:.82; color:#173d35; letter-spacing:0; text-shadow:4px 4px 0 #fff8; }.menu-content h1 span { display:block; color:#e34b3e; }
.subtitle { margin:12px 0 0; color:#477263; font-size:12px; font-weight:900; letter-spacing:5px; }
.menu-copy { max-width:390px; margin:16px 0 20px; color:#31564c; font-size:14px; line-height:1.7; }
.menu-actions { width:260px; display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.main-button,.menu-button { border:0; border-radius:5px; font-weight:900; cursor:pointer; }
.main-button { min-height:50px; padding:12px 22px; color:#fff; background:var(--red); border-bottom:5px solid var(--red-dark); font-size:17px; }.main-button:hover { background:#f05b4d; }.main-button:active { translate:0 3px; border-bottom-width:2px; }
.menu-actions .main-button { grid-column:1/-1; }
.menu-button { min-height:42px; padding:8px 10px; color:#fff; background:#285c4e; border-bottom:4px solid #173e35; font-size:12px; }.menu-button:hover { background:#367565; }
.button-icon { margin-right:7px; }.best-score { margin-top:14px; color:#3f675c; font-size:11px; }.best-score strong { color:#173e35; font-size:15px; }
.briefing-screen { background:#15352ddd; }
.briefing-card,.dialog { width:min(570px,calc(100vw - 32px)); padding:30px; background:var(--paper); border:4px solid var(--ink); border-radius:7px; box-shadow:10px 10px 0 #071c18a8; text-align:center; }
.briefing-card h2,.dialog h2 { margin:10px 0 2px; font-size:38px; letter-spacing:0; }.briefing-card>p,.dialog>p { margin:4px 0 20px; color:#587068; }
.chapter-picker { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:18px; }.chapter-picker button { min-height:50px; display:flex; align-items:center; gap:6px; padding:6px; color:#49645b; border:2px solid #b9caa6; border-radius:5px; background:#edf3d8; cursor:pointer; }.chapter-picker button b { width:28px; flex:0 0 28px; color:#fff; padding:4px 2px; border-radius:3px; background:#6baa54; }.chapter-picker button span { font-size:10px; font-weight:800; }.chapter-picker button.active { color:#fff; border-color:#285c4e; background:#285c4e; }.chapter-picker button.active b { color:#173e35; background:#ffdb58; }.chapter-picker button.locked { opacity:.46; cursor:not-allowed; }.chapter-picker button.locked span::after { content:" · 锁"; }
.mission-row { display:flex; justify-content:space-between; gap:15px; padding:10px 0; border-top:1px solid #c6d2ae; font-size:13px; text-align:left; }.mission-row span { color:#718178; }
.control-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:22px 0; }.control-grid div { padding:10px 4px; background:#e8f1ce; border:2px solid #b9cba5; border-radius:5px; }.control-grid kbd { display:block; margin-bottom:5px; color:#173e35; font-weight:900; }.control-grid span { color:#66766d; font-size:11px; }
.briefing-card .main-button { min-width:200px; }
.compact-dialog { width:min(390px,calc(100vw - 32px)); }.text-button { display:block; margin:13px auto 0; padding:6px 12px; color:#547068; border:0; background:transparent; cursor:pointer; }.text-button:hover { color:var(--red); }
.result-dialog { width:min(540px,calc(100vw - 32px)); }.result-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:22px 0; }.result-stats div { padding:13px 5px; background:#e9f1d3; border:2px solid #bdcba9; border-radius:5px; }.result-stats span { display:block; color:#708178; font-size:10px; }.result-stats strong { font-size:22px; }
.modal-dialog { position:relative; width:min(700px,calc(100vw - 32px)); max-height:80vh; overflow:auto; text-align:left; }.close-button { position:absolute; top:12px; right:12px; width:38px; height:38px; color:#fff; border:0; border-radius:4px; background:#285c4e; font-size:24px; cursor:pointer; }.modal-dialog h2 { padding-right:45px; }.codex-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:18px; }.codex-entry { min-height:126px; position:relative; padding:14px 106px 14px 14px; overflow:hidden; background:#edf3d8; border:2px solid #b8c9a4; border-radius:5px; }.codex-entry img { position:absolute; right:8px; bottom:7px; width:88px; height:96px; object-fit:contain; }.codex-entry strong { display:block; margin-bottom:4px; }.codex-entry span { color:#64766c; font-size:12px; }.rank-dots { margin-top:8px; }.rank-dots i { display:inline-block; width:24px; height:6px; margin-right:4px; background:#5caf51; }.rank-dots i:nth-child(2){background:#39a7d2}.rank-dots i:nth-child(3){background:#c83e7b}
.codex-entry.detailed { min-height:230px; padding:12px; }.codex-entry.detailed>span { display:block; min-height:34px; }.codex-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-top:10px; }.codex-form { min-width:0; padding:6px 3px; text-align:center; border-radius:4px; background:#fff9; }.codex-entry .codex-form img { position:static; width:100%; height:70px; object-fit:contain; }.codex-form b { display:block; margin-top:3px; font-size:9px; }.codex-form:nth-child(1) b { color:#4e9d48; }.codex-form:nth-child(2) b { color:#288fb9; }.codex-form:nth-child(3) b { color:#b52f6a; }.codex-entry.locked { display:grid; place-items:center; min-height:230px; padding:20px; color:#819087; text-align:center; }.codex-entry.locked::before { content:"?"; width:62px; height:62px; display:grid; place-items:center; margin:auto; border:3px solid #99a794; border-radius:50%; font-size:34px; }.codex-skills { margin:9px 0 0; padding-top:8px; border-top:1px solid #cad6b8; color:#49655b; font-size:10px; line-height:1.5; }
.upgrade-balance { display:flex; justify-content:space-between; align-items:center; margin:14px 0; padding:10px 12px; color:#fff; background:#285c4e; border-radius:4px; }.upgrade-balance strong { color:#ffdf60; font-size:20px; }.upgrade-list { display:grid; gap:9px; margin-top:10px; }.upgrade-row { display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; padding:12px; background:#edf3d8; border-left:5px solid #68ad4f; }.upgrade-row div span { display:block; margin-top:3px; color:#63766c; font-size:11px; }.upgrade-row button { min-width:92px; padding:8px 9px; color:#fff; border:0; border-bottom:3px solid #173e35; border-radius:4px; background:#367564; font-weight:800; cursor:pointer; }.upgrade-row button:disabled { opacity:.45; cursor:not-allowed; }.settings-row { display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid #ccd7b7; }.toggle { width:52px;height:28px;position:relative;border:0;border-radius:14px;background:#78b868;cursor:pointer; }.toggle::after { content:"";position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:#fff; }.toggle.off { background:#aab3a4; }.toggle.off::after { right:28px; }
.mobile-controls { display:none; position:absolute; z-index:25; inset:auto 0 18px; padding:0 18px; align-items:end; justify-content:space-between; pointer-events:none; }.joystick,.mobile-fire,.mobile-dodge { pointer-events:auto; touch-action:none; }.joystick { width:112px;height:112px;position:relative;border:2px solid #fff9;border-radius:50%;background:#173e3566; }.joystick i { position:absolute;left:31px;top:31px;width:46px;height:46px;border:2px solid #fff;border-radius:50%;background:#fff7; }.mobile-fire { width:88px;height:88px;border:3px solid #fff;border-radius:50%;color:#fff;background:#e64b3edb;box-shadow:0 6px 0 #8f2b27;font-weight:900; }.mobile-dodge { width:58px;height:58px;margin-left:auto;margin-right:14px;border:3px solid #fff;border-radius:50%;color:#173e35;background:#63d4d8dd;font-weight:900; }
@media (max-width:780px) {
      .app { width:100vw;height:100vh; }.hud { height:64px;gap:9px;padding:7px 10px; }.game-mark { min-width:42px;width:42px; }.game-mark strong { display:none; }.mark-leaf { width:40px;height:40px; }.hud-group { min-width:52px; }.hud-label { font-size:9px; }.hud-group strong,.hearts { font-size:14px; }.health-group { min-width:76px; }.hearts { letter-spacing:0; }.score-group { display:none; }.charge-meter { min-width:80px; }.dodge-meter { display:none; }.icon-button { width:38px;height:38px; }.objective { top:76px;left:12px; }.buff-hud { top:132px;left:12px; }.boss-hud { top:76px;width:82vw; }.mobile-controls { display:flex; }.menu-content { left:6%;top:46%;width:62vw; }.menu-content h1 { font-size:56px; }.menu-copy { font-size:12px; }.hero-preview { right:-70px;bottom:3%;scale:.72; }.menu-actions { width:230px; }.control-grid { grid-template-columns:repeat(2,1fr); }.briefing-card,.dialog { padding:22px 16px; }.codex-grid { grid-template-columns:1fr; }.result-stats { gap:5px; }.result-stats strong { font-size:17px; }
}
@media (max-height:620px) { .menu-content { top:51%; }.menu-copy { display:none; }.menu-content h1 { font-size:62px; }.menu-actions { margin-top:16px; }.briefing-card { padding:16px; }.control-grid { margin:12px 0; } }