:root { color-scheme: dark; font-family: Arial, "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #06090c; touch-action: none; }
button { font: inherit; touch-action: manipulation; }
button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }

.game-shell {
  position: relative; width: min(100vw, calc(100vh * 2.142857)); height: min(100vh, calc(100vw / 2.142857));
  aspect-ratio: 960 / 448; margin: auto; top: 50%; transform: translateY(-50%); overflow: hidden;
  color: #fff; background: #10171b; box-shadow: 0 0 60px #000; isolation: isolate; user-select: none;
}
#game-canvas, .menu-screen, .battle-screen { position: absolute; inset: 0; width: 100%; height: 100%; }
#game-canvas { z-index: 1; display: block; }
.menu-screen { z-index: 10; display: none; }
.menu-screen.is-active { display: block; }
.battle-screen { z-index: 9; display: none; pointer-events: none; }
.battle-screen.is-active { display: block; }

.menu-button {
  border: clamp(2px, .35vw, 4px) solid #eaffff; border-radius: clamp(7px, 1.2vw, 14px); color: #fff;
  background: linear-gradient(#50e9e1, #079d9d 54%, #03606b 55%); box-shadow: inset 0 -5px #003d47, 0 4px 0 #042a31, 0 8px 18px #0009;
  font-weight: 900; text-shadow: 2px 2px #004148; cursor: pointer;
}
.menu-button:active, .nav-tile:active, .mode-card:active, .level-card:active, .equipment-card:active { transform: translateY(3px); filter: brightness(1.2); }
.splash-screen { text-align: center; }
.game-logo { position: absolute; left: 19%; top: 8%; width: 62%; transform: rotate(-2deg); text-shadow: 4px 5px #10260b, 0 0 6px #fff; }
.game-logo small { display: block; color: #fff; font: 900 clamp(7px, 1.1vw, 13px)/1 Arial; letter-spacing: .7em; }
.game-logo strong { display: block; color: #c7ff68; font: 900 clamp(25px, 6.2vw, 68px)/.95 Impact, "Microsoft YaHei", sans-serif; -webkit-text-stroke: clamp(1px, .25vw, 3px) #1b4d12; }
.game-logo span { display: inline-block; padding: .2% 2%; color: #ffe22b; background: #b20c16; font: 900 clamp(10px, 1.8vw, 20px)/1 Impact; letter-spacing: .18em; transform: skew(-10deg); box-shadow: 3px 3px #52070c; }
.start-button { position: absolute; right: 4%; bottom: 6%; width: 24%; height: 12%; font-size: clamp(12px, 2.4vw, 27px); animation: pulse 1.25s ease-in-out infinite; }
@keyframes pulse { 50% { filter: brightness(1.25); transform: scale(1.035); } }

.top-hud { position: absolute; z-index: 2; left: 1%; right: 1%; top: 1%; display: flex; align-items: flex-start; gap: 2.5%; height: 15%; }
.hero-card { display: flex; align-items: center; width: 29%; height: 100%; padding: .5%; border: 2px solid #a9ffff; background: #0a696ccf; box-shadow: inset 0 0 8px #aff; }
.hero-icon { display: grid; place-items: center; width: 25%; aspect-ratio: 1; color: #101516; background: #72ded5; font-size: clamp(18px, 3.6vw, 40px); }
.hero-card div { flex: 1; text-align: center; }
.hero-card b, .hero-card small { display: block; font-style: normal; font-weight: 900; }
.hero-card b { color: #fff; background: linear-gradient(#ae113c, #4e0a26); font-size: clamp(8px, 1.55vw, 17px); }
.hero-card small { color: #063e45; background: #55cfc6; font-size: clamp(7px, 1.25vw, 14px); }
.hero-card i { font-style: normal; }
.currency { margin-top: .7%; min-width: 22%; padding: .6% 1.4%; color: #ffda22; background: #071014de; border-radius: 20px; text-align: center; font-size: clamp(9px, 1.7vw, 19px); text-shadow: 1px 2px #5c3900; }
.currency.coin { margin-left: auto; }
.currency.gem { color: #f752f3; text-shadow: 1px 2px #57005b; }
.home-title { position: absolute; left: 32%; top: 19%; width: 36%; color: #d2f584; text-align: center; font: 900 clamp(20px, 4vw, 44px)/1 Impact, "Microsoft YaHei"; text-shadow: 3px 3px #162c12, -1px -1px #fff; }
.home-nav { position: absolute; left: 19%; right: 15%; bottom: 1%; display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 1.3%; height: 28%; padding: 1.1%; border: 3px solid #bff; background: #0b8f91e8; box-shadow: inset 0 0 13px #9fffff, 0 4px 12px #0009; }
.nav-tile { min-width: 0; border: 3px solid #a9ffff; border-radius: 8px; color: #fff; background: linear-gradient(#19aaa8, #077173); box-shadow: inset 0 -7px #044b51; cursor: pointer; }
.nav-tile span, .nav-tile b, .nav-tile small { display: block; }
.nav-tile span { height: 45%; font-size: clamp(13px, 3.2vw, 35px); }
.nav-tile b { font: 900 clamp(7px, 1.3vw, 15px)/1 Impact, Arial; letter-spacing: .04em; text-shadow: 2px 2px #002f34; }
.nav-tile small { margin-top: 4%; color: #d7ffff; font-size: clamp(6px, .9vw, 11px); }
.play-tile { background: linear-gradient(#38d8cd, #0b7e83); }

.panel-screen { display: none; place-items: center; background: #03161a66; }
.panel-screen.is-active { display: grid; }
.screen-panel { position: relative; width: 90%; height: 76%; margin-top: 7%; padding: 6% 3% 3%; border: clamp(2px, .45vw, 5px) solid #e7ffff; border-radius: 7px; color: #fff; background: linear-gradient(155deg, #20a5a4ee, #087b7eea 58%, #03484eea); box-shadow: inset 0 0 0 3px #0d6a6d, 0 7px 22px #000b; }
.screen-panel h1 { position: absolute; left: 50%; top: -10%; transform: translateX(-50%); min-width: 34%; margin: 0; padding: 1.5% 5%; border: 3px solid #d9ffff; border-radius: 9px; color: #ffe820; background: linear-gradient(#566a70, #26393f); text-align: center; white-space: nowrap; font: 900 clamp(13px, 2.6vw, 29px)/1 Impact, Arial; letter-spacing: .05em; text-shadow: 2px 2px #000; }
.close-button { position: absolute; z-index: 2; right: -1.2%; top: -4%; width: 5.5%; aspect-ratio: 1; padding: 0; border: 3px solid #fff; border-radius: 10px; color: #fff; background: linear-gradient(#e54a3c, #9d1113); box-shadow: 0 3px #5a080a; font: 900 clamp(13px, 2.5vw, 28px)/1 Arial; cursor: pointer; }
.panel-subtitle { margin: -2% 0 1%; text-align: center; color: #d6ffff; font-weight: 900; font-size: clamp(7px, 1.2vw, 14px); }

.mode-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5%; height: 100%; }
.mode-card { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; min-width: 0; padding: 2%; border: 4px solid #f7e87d; border-radius: 7px; color: #fff; background: linear-gradient(#ffedb2d9 0 68%, #29353a 69%); box-shadow: inset 0 0 13px #fff8; text-align: center; cursor: pointer; }
.mode-art { display: grid; place-items: center; flex: 1; color: #1a2225; font-size: clamp(25px, 6vw, 68px); text-shadow: 2px 2px #fff; }
.mode-card b { padding: 4% 2%; border-radius: 30px; color: #fff; background: linear-gradient(#747d81, #24282b); font: 900 clamp(10px, 2vw, 22px)/1 Impact; letter-spacing: .08em; text-shadow: 2px 2px #111; }
.mode-card small { min-height: 14%; padding-top: 4%; color: #1d2224; font-size: clamp(6px, 1vw, 12px); font-weight: 900; }
.main-mode b { background: linear-gradient(#8df32c, #14a50d 55%, #087b0a); }
.locked-card { filter: grayscale(.5); cursor: default; }
.locked-card .mode-art { opacity: .45; }

.level-panel { width: 62%; height: 63%; }
.level-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5%; height: 94%; padding: 1% 5%; }
.level-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3%; border: 4px solid #eaffff; border-radius: 8px; color: #fff; background: linear-gradient(#1eb8b5 0 48%, #fff 49% 54%, #27424a 55%); box-shadow: inset 0 0 0 3px #0c6f72; cursor: pointer; }
.level-card span { font: 900 clamp(28px, 6vw, 68px)/1 Impact; text-shadow: 3px 3px #00363c; }
.level-card b { font-size: clamp(9px, 1.5vw, 17px); }
.level-card small { color: #d8ffff; font-size: clamp(6px, .9vw, 11px); }
.level-card em { color: #ffdf27; font: 900 clamp(12px, 2.4vw, 27px)/1 Arial; font-style: normal; text-shadow: 1px 1px #402b00; }
.level-card:disabled { color: #e6e6e6; background: linear-gradient(#484d50 0 48%, #fff 49% 54%, #242a2d 55%); filter: grayscale(1); }

.loadout-panel { width: 72%; height: 70%; }
.loadout-info { display: flex; justify-content: center; align-items: center; gap: 4%; margin: -1% 0 2%; color: #ff9c25; font-size: clamp(8px, 1.5vw, 17px); text-shadow: 1px 1px #fff; }
.loadout-info span { color: #eaffff; font-weight: 900; }
.equipment-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3%; width: 62%; height: 50%; margin: auto; }
.equipment-card { display: grid; grid-template-columns: 36% 1fr; grid-template-rows: 1fr 1fr; align-items: center; padding: 4%; border: 3px solid #d8ffff; border-radius: 8px; color: #fff; background: linear-gradient(#159899, #074f57); cursor: pointer; }
.equipment-card span { grid-row: 1 / 3; color: #ffec38; font-size: clamp(25px, 5vw, 58px); text-shadow: 2px 2px #000; }
.equipment-card b { font-size: clamp(8px, 1.4vw, 16px); }
.equipment-card small { color: #c8ffff; font-size: clamp(7px, 1vw, 12px); }
.equipment-card.is-selected { border-color: #fff04e; box-shadow: 0 0 12px #fff52c, inset 0 0 9px #fff6; }
.loadout-tip { margin: 2% 0 0; text-align: center; color: #d9ffff; font-size: clamp(7px, 1vw, 12px); }
.fight-button { position: absolute; right: 3%; bottom: 4%; width: 23%; height: 15%; font-size: clamp(10px, 1.8vw, 20px); }

.feature-panel { width: 72%; height: 72%; }
.task-list { display: grid; gap: 4%; height: 92%; }
.task-list article { display: grid; grid-template-columns: 10% 1fr 23%; align-items: center; gap: 2%; padding: 1% 3%; border: 2px solid #9effff; border-radius: 7px; background: #063f48bd; }
.task-list article > span { font-size: clamp(16px, 3.2vw, 36px); }
.task-list b, .task-list small { display: block; }
.task-list b { font-size: clamp(8px, 1.3vw, 15px); }
.task-list small { color: #d5ffff; font-size: clamp(6px, .9vw, 11px); }
.task-list i { font-style: normal; color: #ffe629; }
.task-list progress { width: 100%; height: 7px; accent-color: #75e61f; }
.task-list button, .shop-grid button { padding: 5% 2%; border: 2px solid #fff; border-radius: 6px; color: #fff; background: linear-gradient(#8df02f, #159411); font-weight: 900; font-size: clamp(7px, 1vw, 12px); cursor: pointer; }
.task-list button:disabled { color: #bbb; background: #4a5659; }
.task-list strong { color: #ffe82c; text-align: center; font-size: clamp(8px, 1.3vw, 15px); }
.shop-balance { position: absolute; right: 4%; top: 3%; color: #ffe234; font-size: clamp(7px, 1.1vw, 13px); }
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; height: 90%; }
.shop-grid article { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5%; padding: 4%; border: 3px solid #e8ffff; border-radius: 8px; background: linear-gradient(#147e84, #073c45); text-align: center; }
.shop-grid article > span { color: #ffe530; font-size: clamp(27px, 5.5vw, 62px); text-shadow: 2px 2px #001; }
.shop-grid article > b { font-size: clamp(9px, 1.5vw, 17px); }
.shop-grid small { color: #cdfbff; font-size: clamp(7px, 1vw, 12px); }
.shop-grid i { color: #ffe530; font-style: normal; }
.shop-grid button { width: 100%; }

.options-panel { width: 64%; }
.option-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5%; height: 88%; }
.option-list > button, .control-reference { border: 3px solid #b9ffff; border-radius: 7px; color: #fff; background: #064b54ce; }
.option-list > button { display: flex; align-items: center; justify-content: space-between; padding: 7%; cursor: pointer; }
.option-list > button span { font-weight: 900; font-size: clamp(9px, 1.5vw, 17px); }
.option-list > button b { padding: 4% 10%; border-radius: 20px; background: #2fc72c; font-size: clamp(7px, 1vw, 12px); }
.control-reference { padding: 5%; }
.control-reference b, .control-reference small { display: block; }
.control-reference b { margin-bottom: 4%; color: #ffe42d; font-size: clamp(8px, 1.3vw, 15px); }
.control-reference small { color: #dbffff; line-height: 1.45; font-size: clamp(6px, .9vw, 11px); }

.pause-button { position: absolute; z-index: 4; top: 1.3%; right: .8%; width: 3.6%; height: 8%; padding: 0; pointer-events: auto; border: 2px solid #aafffa; border-radius: 4px; color: #fff; background: linear-gradient(#20beb8, #08777a); font-weight: 900; font-size: clamp(8px, 1.5vw, 16px); box-shadow: inset 0 -3px #054e52; }
.touch-controls { position: absolute; inset: 0; pointer-events: none; }
.touch-controls button { position: absolute; pointer-events: auto; cursor: pointer; transition: transform .06s, filter .06s; }
.touch-controls button.is-pressed, .touch-controls button:active { transform: translateY(2px) scale(.94); filter: brightness(1.35); }
.move { bottom: 2.1%; width: 9.2%; height: 13.5%; border: 0; color: #ecffff; background: linear-gradient(#7bf7ff, #11a9d5 53%, #0574b1 54%); clip-path: polygon(27% 0, 100% 0, 100% 26%, 72% 50%, 100% 74%, 100% 100%, 27% 100%, 0 50%); font: 900 clamp(17px, 4vw, 42px)/1 Arial; text-shadow: 0 3px #00618a; filter: drop-shadow(0 2px 2px #001); }
.move.left { left: 1.7%; }
.move.right { left: 11.5%; transform: scaleX(-1); }
.move.right.is-pressed, .move.right:active { transform: scaleX(-1) translateY(2px) scale(.94); }
.special { left: 31.5%; bottom: 2%; width: 6.8%; aspect-ratio: 1; border: 3px solid #e8f7ff; border-radius: 50%; color: #fef4a0; background: radial-gradient(circle, #fdf8ff 0 27%, #733fad 31% 49%, #25272d 53%); box-shadow: 0 0 0 3px #111, inset 0 0 9px #fff; }
.special span { display: block; font-size: clamp(10px, 2.6vw, 28px); transform: rotate(12deg); }
.special b { position: absolute; right: -18%; bottom: -4%; color: #fff; font: 900 clamp(7px, 1.4vw, 15px) Arial; text-shadow: 2px 2px #000; }
.special:disabled { filter: grayscale(1); opacity: .45; }
.roll { left: 40.6%; bottom: 2%; width: 6.8%; aspect-ratio: 1; border: 0; color: #a5a9ad; background: transparent; font: 900 clamp(19px, 4.7vw, 50px)/1 Arial; text-shadow: 2px 2px #111; }
.roll span { display: block; }
.roll small { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); color: #fff; font: 900 clamp(6px, .9vw, 10px)/1 Arial; }
.action { display: grid; place-items: center; width: 7.9%; aspect-ratio: 1; border: 3px solid #0008; border-radius: 50%; box-shadow: inset 4px 5px 8px #fff3, inset -5px -7px 9px #0006, 0 2px 4px #001; }
.action small { color: #fff; font: 900 clamp(9px, 2vw, 22px)/1 "Microsoft YaHei"; text-shadow: 2px 2px #111; }
.action.brown { right: 8.1%; bottom: 15.7%; background: radial-gradient(circle at 35% 30%, #d9a451, #93601a 65%, #56300e); }
.action.green { right: 1%; bottom: 15.7%; background: radial-gradient(circle at 35% 30%, #8ee768, #269235 65%, #0c501e); }
.action.red { right: 8.1%; bottom: 1.7%; background: radial-gradient(circle at 35% 30%, #e85c59, #a72632 65%, #5b101b); }
.action.blue { right: 1%; bottom: 1.7%; background: radial-gradient(circle at 35% 30%, #62b8e5, #256ba7 65%, #163b6b); }

.dialog-layer { position: absolute; z-index: 30; inset: 0; display: grid; place-items: center; background: #001015b8; }
.pause-panel { width: 31%; min-width: 220px; padding: 3%; border: 4px solid #dfffff; color: #fff; text-align: center; background: linear-gradient(#16aaa8, #07545d); box-shadow: 0 0 0 4px #063138, 0 8px 30px #000; }
.pause-panel h2 { margin: 0 0 8%; color: #ffe51d; letter-spacing: 4px; text-shadow: 2px 2px #000; }
.pause-panel button, .tutorial-panel > button { width: 100%; margin: 2% 0; padding: 3%; border: 2px solid #fff; border-radius: 5px; color: #fff; background: linear-gradient(#75e92b, #12860f); font-weight: 900; cursor: pointer; }
.tutorial-layer { z-index: 40; }
.tutorial-panel { width: 58%; padding: 2.5% 4%; border: 4px solid #dfffff; border-radius: 8px; color: #fff; text-align: center; background: linear-gradient(#168f93f2, #073f49f2); box-shadow: 0 0 0 4px #063138, 0 8px 30px #000; }
.tutorial-panel h2 { margin: 0 0 2%; color: #ffe62c; font-size: clamp(14px, 2.5vw, 28px); text-shadow: 2px 2px #002; }
.tutorial-panel p { margin: 2% 0; font-size: clamp(7px, 1.15vw, 13px); }
.tutorial-actions { display: flex; justify-content: center; gap: 4%; margin: 3% 0; }
.tutorial-actions span { display: grid; place-items: center; width: 13%; aspect-ratio: 1; border: 2px solid #fff8; border-radius: 50%; font: 900 clamp(10px, 1.8vw, 20px)/1 Arial; box-shadow: inset 3px 3px #fff3, inset -3px -4px #0004; }
.tutorial-actions span small { display: block; font-size: .48em; }
.tutorial-actions .brown { background: #93601a; }.tutorial-actions .green { background: #269235; }.tutorial-actions .red { background: #a72632; }.tutorial-actions .blue { background: #256ba7; }

.results-layer { background: #0008; }
.results-panel { position: relative; width: 64%; min-width: 430px; padding: 2.6% 4% 2.2%; color: #333; background: #fff; border: 4px solid #3c6868; box-shadow: 0 0 0 3px #bfe4df, 0 8px 30px #000b; font: 700 clamp(8px, 1.25vw, 14px) Arial, sans-serif; }
.results-panel::before, .results-panel::after { content: ""; position: absolute; left: 4%; right: 4%; height: 2px; background: #6b7b7b; }
.results-panel::before { top: 15%; }.results-panel::after { bottom: 16%; }
.results-panel h2 { margin: 0 0 3.5%; color: #566060; text-align: center; font: 900 clamp(12px, 1.8vw, 20px) Arial; }
.results-close { position: absolute; right: -.9%; top: -3%; width: 4.5%; aspect-ratio: 1; padding: 0; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #c4191d; font-weight: 900; }
.success-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 0 1.3%; }.success-heading b { color: #9a9b68; font-size: 1.8em; }
.result-row { display: grid; grid-template-columns: 4% 1fr 22% 7%; align-items: center; min-height: 29px; border-bottom: 1px solid #bbb; }
.result-row i { display: grid; place-items: center; width: 18px; aspect-ratio: 1; border: 2px solid #307d34; color: #2d9234; font-style: normal; }.result-row em { color: #424d4f; font-style: normal; }.result-row strong { color: #f3ad12; font-size: 1.8em; text-shadow: 1px 1px #6d4400; }
.result-row.is-failed i { border-color: #a52c2c; color: #b92424; }.result-row.is-failed strong { color: #ddd; text-shadow: none; }
.reward-line { margin-top: 2.2%; text-align: center; font-size: .9em; }.money-received { position: absolute; top: -10%; left: 31%; right: 31%; padding: 1% 2%; color: #fff; text-align: center; background: #000b; white-space: nowrap; }
.toast { position: absolute; z-index: 50; left: 50%; bottom: 18%; transform: translateX(-50%); padding: 1.5% 3%; border: 2px solid #dfffff; border-radius: 5px; color: #fff; background: #07171deb; font: 700 clamp(9px, 1.4vw, 15px) Arial; }
.portrait-tip { display: none; }

@media (orientation: portrait) {
  .portrait-tip { position: fixed; z-index: 100; left: 50%; bottom: 10px; display: block; transform: translateX(-50%); padding: 6px 10px; color: #dff; background: #001015da; border-radius: 4px; font: 10px Arial; white-space: nowrap; pointer-events: none; }
}
@media (hover: hover) and (pointer: fine) { button:hover:not(:disabled) { filter: brightness(1.15); } }