/* 鋼鐵生存戰介面樣式：可直接修改，儲存後重新整理 index.html。 */

:root {
  --ink: #e9e4d5;
  --muted: #9a9d91;
  --panel: rgba(13, 18, 14, 0.91);
  --line: rgba(224, 211, 170, 0.22);
  --sand: #d7b660;
  --green: #7ea35b;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; overflow: hidden; background: #0a0d0a; color: var(--ink); }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif; }
button { color: inherit; font: inherit; }
button:focus-visible { outline: 2px solid #ffd166; outline-offset: 3px; }

.game-shell { position: relative; width: 100vw; height: 100dvh; overflow: hidden; isolation: isolate; background: #121712; }
.game-shell::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 90; background: linear-gradient(rgba(255,255,255,.016) 50%, transparent 50%); background-size: 100% 4px; mix-blend-mode: overlay; opacity: .35; }
.game-canvas, .game-canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.minimap-canvas { position: absolute; right: 24px; top: 72px; z-index: 11; width: 126px; height: 126px; border: 1px solid var(--line); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }

.loading-screen { display: grid; place-content: center; gap: 20px; text-align: center; letter-spacing: .28em; font-size: 11px; }
.loading-screen .loading-error { max-width: min(90vw, 680px); color: #ff8f76; font-family: var(--font-body); font-size: clamp(.9rem, 2.4vw, 1.1rem); letter-spacing: .04em; line-height: 1.6; text-align: center; }
.loader-mark { width: 76px; height: 76px; margin: auto; display: grid; place-items: center; border: 1px solid var(--sand); font-weight: 900; font-size: 24px; animation: loader 1.4s ease-in-out infinite; }
@keyframes loader { 50% { transform: rotate(45deg) scale(.82); color: var(--sand); } }

.menu-backdrop { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 65% 38%, color-mix(in srgb, var(--zone-color) 70%, #d2c087) 0 5%, transparent 35%), linear-gradient(115deg, #0c120d 0 42%, color-mix(in srgb, var(--zone-color) 75%, #171b14) 74%, #0a0d09 100%); }
.menu-backdrop::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 120px, rgba(255,255,255,.02) 121px 122px); }
.horizon { position: absolute; right: -5%; bottom: 4%; width: 65%; height: 30%; background: #0b0e0a; clip-path: polygon(0 52%, 9% 42%, 18% 47%, 28% 28%, 41% 40%, 52% 15%, 66% 35%, 76% 25%, 89% 44%, 100% 30%, 100% 100%, 0 100%); opacity: .78; }
.tank-silhouette { position: absolute; width: min(48vw, 700px); height: 32vh; right: 3vw; bottom: 10vh; background: linear-gradient(160deg, #34432e, #111810 58%); clip-path: polygon(4% 72%, 15% 60%, 27% 60%, 31% 41%, 43% 34%, 54% 39%, 72% 20%, 76% 24%, 58% 44%, 63% 58%, 87% 66%, 96% 82%, 89% 94%, 16% 94%); filter: drop-shadow(0 24px 22px rgba(0,0,0,.65)); opacity: .86; }

.brand-strip { position: absolute; left: 0; right: 0; top: 0; height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; border-bottom: 1px solid var(--line); background: rgba(5,8,6,.48); color: var(--muted); letter-spacing: .17em; font-size: 9px; z-index: 2; }
.brand-strip b { color: var(--ink); font-size: 11px; }

.menu-panel { position: absolute; z-index: 3; left: clamp(24px, 7vw, 108px); top: 50%; transform: translateY(-48%); width: min(520px, calc(100vw - 48px)); }
.eyebrow { margin: 0 0 14px; color: var(--sand); font-size: 10px; font-weight: 800; letter-spacing: .25em; }
.menu-panel h1 { margin: 0; font-size: clamp(54px, 7.2vw, 102px); line-height: .78; letter-spacing: -.065em; font-weight: 950; text-shadow: 0 8px 30px rgba(0,0,0,.4); }
.menu-panel h1 span { color: transparent; -webkit-text-stroke: 1px rgba(233,228,213,.82); }
.menu-panel h2 { margin: 18px 0 0; font-size: clamp(22px, 3vw, 36px); letter-spacing: .22em; font-weight: 500; color: #d7cfb7; }
.menu-copy { max-width: 450px; margin: 20px 0 26px; color: #b6b8ab; line-height: 1.8; font-size: 13px; }
.primary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; max-width: 470px; }
.primary-actions button { min-height: 50px; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: rgba(17,23,18,.78); border: 1px solid var(--line); text-align: left; font-size: 13px; cursor: pointer; transition: .18s ease; }
.primary-actions button:hover { border-color: rgba(255,215,120,.6); background: rgba(35,43,31,.92); transform: translateX(3px); }
.primary-actions button span { color: var(--sand); font-size: 17px; }
.primary-actions button em { margin-left: auto; color: var(--sand); font-size: 8px; font-style: normal; }
.primary-actions .primary-button { position: relative; grid-column: 1 / -1; min-height: 70px; display: grid; grid-template-columns: 1fr auto; background: linear-gradient(100deg, #7b8e46, #4f6031); border: 0; color: #0d130d; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.primary-button small { grid-column: 1; font-size: 9px; letter-spacing: .2em; opacity: .72; }.primary-button strong { grid-column: 1; font-size: 19px; }.primary-button i { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: 11px; font-style: normal; font-weight: 800; }
.campaign-status { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 20px; color: #777d73; font-size: 9px; letter-spacing: .1em; }.campaign-status b { color: #c8c4b6; margin-left: 5px; }

.full-panel { position: absolute; inset: 0; z-index: 20; overflow: auto; padding: 48px clamp(20px, 5vw, 72px); background: radial-gradient(circle at 100% 0, rgba(104,116,65,.2), transparent 40%), #0b0f0c; }
.panel-header { display: flex; align-items: center; gap: 18px; margin-bottom: 32px; }.panel-header > button { width: 42px; height: 42px; border: 1px solid var(--line); background: #121813; cursor: pointer; font-size: 21px; }.panel-header small { display: block; color: var(--sand); letter-spacing: .22em; font-size: 9px; }.panel-header h2 { margin: 4px 0 0; font-size: clamp(26px, 3vw, 42px); letter-spacing: -.03em; }
.zone-list { max-width: 1200px; margin: auto; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; padding-bottom: 60px; }
.zone-card { background: linear-gradient(120deg, color-mix(in srgb, var(--zone) 28%, #111811), #101410 70%); border: 1px solid var(--line); padding: 20px; }
.zone-card header { display: grid; grid-template-columns: 1fr auto; align-items: end; border-bottom: 1px solid var(--line); padding-bottom: 14px; }.zone-card header small { color: var(--sand); letter-spacing: .18em; font-size: 9px; }.zone-card h3 { grid-column: 1; margin: 4px 0 0; font-size: 20px; }.zone-card header span { grid-column: 2; grid-row: 1 / 3; color: #8e9288; letter-spacing: .1em; font-size: 11px; }
.stage-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; padding-top: 14px; }.stage-grid button { min-height: 66px; display: grid; place-content: center; gap: 3px; border: 1px solid rgba(255,255,255,.1); background: rgba(11,14,11,.75); cursor: pointer; }.stage-grid button:hover:not(:disabled) { border-color: var(--sand); background: rgba(109,126,71,.35); }.stage-grid button:disabled { opacity: .27; cursor: not-allowed; }.stage-grid button b { font-size: 19px; }.stage-grid button small { color: #92978d; font-size: 7px; letter-spacing: .1em; }.stage-grid .boss-stage:not(:disabled) { border-color: rgba(233,91,68,.48); }.stage-grid .boss-stage small { color: #ef8f78; }

.parts-balance { position: absolute; right: clamp(20px, 5vw, 72px); top: 50px; text-align: right; }.parts-balance small { display: block; color: #a7a89e; font-size: 8px; letter-spacing: .17em; }.parts-balance strong { font-size: 30px; color: var(--sand); }.parts-balance span { display: block; color: #6f746d; font-size: 9px; }
.tech-grid { max-width: 1200px; margin: 6vh auto; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }.tech-grid article { position: relative; min-height: 330px; padding: 26px 18px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px solid color-mix(in srgb, var(--tech) 32%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--tech) 12%, #141915), #0d110e); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }.tech-grid article > i { width: 78px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--tech); border-radius: 50%; color: var(--tech); font-style: normal; font-size: 31px; box-shadow: inset 0 0 25px color-mix(in srgb, var(--tech) 12%, transparent); }.tech-grid article > small { margin-top: 24px; color: var(--tech); font-size: 9px; letter-spacing: .18em; }.tech-grid article h3 { min-height: 42px; margin: 8px 0; font-size: 14px; font-weight: 500; color: #c5c4b9; }.tech-pips { display: flex; gap: 5px; margin: 16px 0 22px; }.tech-pips span { width: 21px; height: 5px; background: #333a34; }.tech-pips .active { background: var(--tech); box-shadow: 0 0 8px var(--tech); }.tech-grid article button { margin-top: auto; width: 100%; height: 42px; border: 1px solid color-mix(in srgb, var(--tech) 45%, transparent); background: rgba(0,0,0,.2); color: var(--tech); cursor: pointer; font-size: 10px; letter-spacing: .09em; }.tech-grid article button:disabled { opacity: .35; cursor: not-allowed; }

.modal-card, .result-panel, .upgrade-overlay { position: absolute; z-index: 40; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(620px, calc(100vw - 32px)); padding: 30px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 24px 80px rgba(0,0,0,.62); backdrop-filter: blur(18px); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }.modal-card .panel-header { margin-bottom: 22px; }.setting-row { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); }.setting-row b { display: block; }.setting-row small { display: block; margin-top: 4px; color: #888e84; }.toggle { width: 52px; height: 28px; padding: 3px; border: 1px solid #4b514b; border-radius: 20px; background: #171b18; cursor: pointer; }.toggle i { display: block; width: 20px; height: 20px; border-radius: 50%; background: #72776f; transition: .18s; }.toggle.active { border-color: #9bbd69; background: #354428; }.toggle.active i { transform: translateX(23px); background: #b5d67e; }.segmented { display: flex; }.segmented button { min-width: 68px; height: 34px; border: 1px solid var(--line); background: #111511; cursor: pointer; }.segmented .active { color: #11160f; background: var(--sand); }.danger-button { width: 100%; height: 42px; margin-top: 18px; border: 1px solid rgba(234,89,72,.4); color: #ef8172; background: rgba(120,30,25,.12); cursor: pointer; }
.control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.control-grid > div { min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }.control-grid kbd, .ability-status kbd { min-width: 64px; padding: 5px 8px; border: 1px solid #69715f; background: #20271e; color: var(--sand); text-align: center; font: 700 9px ui-monospace, monospace; }.control-grid span { color: #c8c9c1; font-size: 12px; }.help-card > p { margin: 22px 2px 0; color: #969b91; line-height: 1.7; font-size: 12px; }
.setting-status { color: #b8d77e; font-size: 11px; letter-spacing: .08em; }

.battle-hud { position: absolute; inset: 0; z-index: 10; pointer-events: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-shadow: 0 1px 4px rgba(0,0,0,.8); }.player-status { position: absolute; left: 24px; top: 22px; width: 230px; padding: 13px 16px; background: linear-gradient(90deg, rgba(7,11,8,.84), rgba(7,11,8,.18)); border-left: 2px solid var(--green); }.hud-title { display: flex; justify-content: space-between; margin-bottom: 10px; }.hud-title span { color: var(--sand); font-weight: 900; }.hud-title b { font-size: 10px; }.player-status label { display: flex; justify-content: space-between; margin: 5px 0 3px; color: #9ca196; font-size: 8px; }.player-status label b { color: #daddd3; }.meter { display: block; height: 6px; background: rgba(255,255,255,.13); overflow: hidden; }.meter i { display: block; height: 100%; transition: width .12s linear; }.mission-status { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); min-width: 280px; text-align: center; }.mission-status small { color: #aeb0a5; font-size: 8px; letter-spacing: .16em; }.mission-status h3 { margin: 3px 0 6px; font-size: 19px; letter-spacing: .06em; }.mission-status h3 span { color: #777d75; }.mission-status b { padding: 5px 12px; background: rgba(11,15,11,.66); color: #d7c76d; font-size: 9px; }.mission-status .boss-label { color: #ff856d; border: 1px solid rgba(255,86,69,.35); }.pause-button { position: absolute; right: 164px; top: 22px; width: 38px; height: 38px; pointer-events: auto; background: rgba(9,13,10,.76); border: 1px solid var(--line); cursor: pointer; }.build-status { position: absolute; left: 25px; bottom: 70px; padding: 9px 12px; border-left: 2px solid var(--sand); background: rgba(8,11,8,.55); }.build-status small, .build-status span { display: block; color: #8b9087; font-size: 7px; letter-spacing: .12em; }.build-status b { display: block; margin: 3px 0; color: var(--sand); font-size: 11px; }.ability-status { position: absolute; right: 22px; bottom: 24px; display: flex; gap: 10px; }.ability-status > div { width: 74px; text-align: center; }.cooldown-ring { position: relative; width: 52px; aspect-ratio: 1; margin: 0 auto 5px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#d0b757 var(--progress), rgba(255,255,255,.12) 0); }.cooldown-ring::before { content: ""; position: absolute; width: 42px; aspect-ratio: 1; border-radius: 50%; background: rgba(9,12,9,.9); }.cooldown-ring i { position: relative; z-index: 1; font-style: normal; }.ability-status .ready .cooldown-ring { box-shadow: 0 0 16px rgba(223,197,93,.32); }.ability-status small { display: block; color: #c7c8bf; font-size: 7px; }.ability-status kbd { display: inline-block; min-width: 42px; padding: 2px 5px; margin-top: 3px; font-size: 7px; }.exp-status { position: absolute; left: 50%; bottom: 21px; width: min(440px, 38vw); transform: translateX(-50%); display: grid; grid-template-columns: 45px 1fr 90px; align-items: center; gap: 7px; }.exp-status span, .exp-status b { font-size: 8px; }.exp-status b { text-align: right; color: #a6aba2; }.boost-status { position: absolute; left: 25px; bottom: 27px; width: 170px; }.boost-status small { font-size: 7px; color: #a7aa9e; }

.pause-card, .result-panel { text-align: center; }.pause-card h2 { margin: 0 0 28px; font-size: 36px; }.pause-card button, .result-actions button { width: 100%; height: 48px; margin-top: 8px; border: 1px solid var(--line); background: #151b16; cursor: pointer; }.primary-small { background: linear-gradient(90deg,#718643,#4a5b32) !important; border: 0 !important; color: #0c120b; font-weight: 800; }
.upgrade-overlay { width: min(1040px, calc(100vw - 36px)); text-align: center; background: rgba(8,11,8,.82); }.upgrade-overlay h2 { margin: 0; font-size: clamp(30px,4vw,55px); letter-spacing: -.04em; }.upgrade-overlay > p:not(.eyebrow) { color: #92978e; font-size: 11px; }.upgrade-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; margin-top: 28px; }.upgrade-cards button { min-height: 310px; padding: 22px; display: flex; flex-direction: column; align-items: center; border: 1px solid color-mix(in srgb, var(--upgrade) 45%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--upgrade) 13%, #151a15), #0c100d); cursor: pointer; clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%); transition: .2s; }.upgrade-cards button:hover { transform: translateY(-8px); border-color: var(--upgrade); box-shadow: 0 16px 50px color-mix(in srgb, var(--upgrade) 12%, transparent); }.upgrade-cards small { color: var(--upgrade); letter-spacing: .2em; font-size: 8px; }.upgrade-cards i { width: 90px; aspect-ratio: 1; margin: 25px 0 17px; display: grid; place-items: center; border: 1px solid var(--upgrade); border-radius: 50%; color: var(--upgrade); font: normal 38px serif; }.upgrade-cards h3 { margin: 0; font-size: 17px; }.upgrade-cards p { color: #aaada5; font-size: 12px; }.upgrade-cards span { margin-top: auto; color: var(--upgrade); font-size: 9px; letter-spacing: .18em; }
.result-panel { width: min(560px,calc(100vw - 32px)); }.result-panel h2 { margin: 0; font-size: 44px; }.result-panel > strong { display: block; margin: 8px 0 22px; color: var(--sand); font-size: 18px; letter-spacing: .17em; }.result-panel.victory { border-color: rgba(177,206,105,.48); }.result-panel.defeat { border-color: rgba(230,93,76,.5); }.result-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }.result-stats span { padding: 13px 6px; border: 1px solid var(--line); color: #898f86; font-size: 9px; }.result-stats b { display: block; margin-top: 6px; color: #d9d8ce; font-size: 13px; }

.mobile-controls { display: none; position: absolute; inset: 0; z-index: 12; pointer-events: none; }.joystick { position: absolute; bottom: 30px; width: 118px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(8,11,8,.28); pointer-events: auto; touch-action: none; }.joystick:first-child { left: 22px; }.joystick > i { position: absolute; left: 50%; top: 50%; width: 46px; aspect-ratio: 1; margin: -23px; border: 1px solid rgba(255,225,133,.6); border-radius: 50%; background: rgba(75,88,49,.78); }.joystick-label { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); color: rgba(255,255,255,.43); font: 700 7px ui-monospace; letter-spacing: .1em; }.mobile-buttons { position: absolute; right: 22px; bottom: 22px; display: grid; grid-template-columns: repeat(2,54px); gap: 7px; pointer-events: auto; }.mobile-buttons button { height: 48px; border: 1px solid rgba(255,215,113,.42); background: rgba(25,34,24,.78); font: 700 8px ui-monospace; color: #e7d58e; touch-action: manipulation; }

@media (max-width: 900px) {
  .menu-panel { left: 28px; }.tank-silhouette { opacity: .48; width: 65vw; }
  .tech-grid { grid-template-columns: repeat(2,1fr); margin: 20px auto; }.tech-grid article:last-child { grid-column: 1 / -1; }.zone-list { grid-template-columns: 1fr; }
  .minimap-canvas { width: 94px; height: 94px; right: 12px; top: 62px; }.pause-button { right: 112px; }.player-status { left: 12px; top: 12px; width: 190px; }.mission-status { top: 12px; }.build-status { left: 12px; }.ability-status { right: 12px; }.exp-status { width: 36vw; }
}

@media (pointer: coarse), (max-width: 680px) {
  .mobile-controls { display: block; }.brand-strip { padding: 0 16px; }.brand-strip span:last-child { display: none; }
  .menu-panel { top: 49%; left: 20px; width: calc(100vw - 40px); }.menu-panel h1 { font-size: clamp(48px,16vw,72px); }.menu-panel h2 { font-size: 21px; }.menu-copy { font-size: 12px; margin: 16px 0 20px; }.primary-actions { grid-template-columns: 1fr; }.primary-actions .primary-button { grid-column: 1; }.campaign-status { gap: 10px; }
  .full-panel { padding: 22px 14px 90px; }.parts-balance { position: static; text-align: left; margin: -18px 0 20px 60px; }.zone-list { gap: 9px; }.stage-grid button { min-height: 56px; }.tech-grid { grid-template-columns: 1fr; gap: 8px; }.tech-grid article, .tech-grid article:last-child { grid-column: auto; min-height: 250px; }.tech-grid article > i { width: 58px; }.tech-grid article > small { margin-top: 12px; }
  .control-grid { grid-template-columns: 1fr; }.modal-card { padding: 22px; max-height: 92dvh; overflow: auto; }.panel-header { margin-bottom: 18px; }.setting-row { min-height: 64px; }
  .battle-hud .player-status { width: 160px; padding: 8px 10px; }.battle-hud .player-status label:nth-of-type(2), .battle-hud .player-status .meter:nth-of-type(2) { display: none; }.mission-status { top: 10px; left: auto; right: 10px; transform: none; min-width: 165px; text-align: right; }.mission-status h3 { font-size: 14px; }.mission-status b { font-size: 7px; padding: 3px 6px; }.minimap-canvas { display: none; }.pause-button { right: 12px; top: 77px; }.build-status { display: none; }.ability-status { display: none; }.boost-status { display: none; }.exp-status { bottom: 156px; width: calc(100vw - 30px); grid-template-columns: 38px 1fr 76px; }.upgrade-overlay { padding: 18px; max-height: 94dvh; overflow: auto; }.upgrade-cards { grid-template-columns: 1fr; gap: 7px; margin-top: 15px; }.upgrade-cards button { min-height: 100px; display: grid; grid-template-columns: 58px 1fr; grid-template-rows: auto auto auto; text-align: left; padding: 10px 14px; }.upgrade-cards small { grid-column: 2; }.upgrade-cards i { grid-column: 1; grid-row: 1 / 4; width: 48px; margin: 0; font-size: 22px; }.upgrade-cards h3 { grid-column: 2; font-size: 14px; }.upgrade-cards p { grid-column: 2; margin: 2px 0; }.upgrade-cards span { display: none; }.result-stats { grid-template-columns: 1fr; }.result-panel h2 { font-size: 34px; }
}

@media (max-width: 420px) {
  .joystick { width: 102px; bottom: 22px; }.joystick:first-child { left: 10px; }.mobile-buttons { right: 10px; grid-template-columns: repeat(2,48px); }.mobile-buttons button { height: 42px; }.menu-panel h1 { font-size: 50px; }.menu-panel h2 { font-size: 17px; }.primary-actions button { min-height: 43px; }.primary-actions .primary-button { min-height: 60px; }
}