:root {
  color-scheme: light;
  --bg: #e4edda;
  --text: #2d4435;
  --muted: #697865;
  --ember: #9c6d35;
  --amber: #8b631f;
  --coral: #b4523c;
  --line: rgba(65, 88, 52, .18);
  --glass: linear-gradient(145deg, rgba(255, 255, 249, .82), rgba(244, 250, 231, .56));
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), inset 0 -1px 0 rgba(255, 255, 255, .2), 0 14px 38px rgba(43, 67, 35, .12);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; width: 100%; height: 100dvh; overflow: hidden; color: var(--text); background: #7eaa66; }
button { font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; }
button:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
button:disabled { cursor: not-allowed; }
button:active:not(:disabled) { scale: .975; }
button, h1, h2, h3, p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.game-shell { position: relative; width: 100%; height: 100dvh; margin: 0; overflow: hidden; }
.topbar { position: absolute; z-index: 6; top: max(14px,env(safe-area-inset-top)); left: max(18px,env(safe-area-inset-left)); right: max(18px,env(safe-area-inset-right)); display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; pointer-events: none; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand h1 { font-size: 17px; font-weight: 700; letter-spacing: 2px; white-space: nowrap; }
.top-controls { pointer-events: auto; display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; margin-left: auto; }
.live-label { display: flex; align-items: center; gap: 6px; font-size: 9px; color: var(--muted); white-space: nowrap; }
.live-label i { display: block; width: 4px; height: 4px; background: var(--ember); border-radius: 50%; }
.hud { position: absolute; z-index: 7; top: max(14px,env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; justify-content: center; gap: 7px; max-width: calc(100% - 24px); pointer-events: none; }
.stat { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 14px; min-width: 76px; min-height: 44px; border: 1px solid #ffffff90; border-radius: 18px; background: var(--glass); box-shadow: var(--glass-shadow); }

.stat strong { font-size: 19px; line-height: 1.1; font-variant-numeric: tabular-nums; font-weight: 650; letter-spacing: .2px; }
.hud-icon { color: var(--muted); font-size: 15px; line-height: 1; }
.gold-stat strong, .gold-stat .hud-icon { color: var(--amber); }
.kills-stat .hud-icon { color: var(--coral); }
.level-stat .hud-icon { color: var(--ember); }
.surge-stat strong, .surge-stat .hud-icon { color: var(--coral); }
.meter { background: #44604525; overflow: hidden; border-radius: 999px; }
.meter i { display: block; height: 100%; transition: width .2s; border-radius: inherit; }
.xp-meter { position: absolute; bottom: 5px; left: 12px; right: 12px; height: 2px; }
.xp-meter i { background: var(--ember); }
.battle-panel { position: absolute; inset: 0; overflow: hidden; }
.boss-health { position: absolute; z-index: 6; top: calc(max(14px,env(safe-area-inset-top)) + 54px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; width: min(340px,70vw); padding: 7px 12px; border: 1px solid #d5967480; border-radius: 14px; background: #fff5dbe8; color: var(--coral); box-shadow: inset 0 1px 0 #ffffffb0,0 3px 12px #35502518; pointer-events: none; }
.boss-health > span { font-size: 10px; font-weight: 650; letter-spacing: .6px; white-space: nowrap; }
.boss-health strong { font-size: 9px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.boss-meter { height: 4px; flex: 1; }
.boss-meter i { background: linear-gradient(90deg,#bd5963,var(--coral)); }
#arena-wrap { position: absolute; inset: 0; width: 100%; height: 100%; background: #7eaa66; isolation: isolate; }
#battlefield { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; cursor: crosshair; }
.placement-hint, .threat-banner, .kill-streak { position: absolute; z-index: 2; border: 1px solid #ffe3c83d; background: linear-gradient(135deg,#fff6dde3,#f4f3e9ed); box-shadow: inset 0 1px 0 #fff8ed20,0 6px 16px #36502521; color: var(--amber); border-radius: 15px; font-size: 10px; line-height: 1.5; text-align: center; pointer-events: none; }
.placement-hint { bottom: 12px; left: 50%; transform: translateX(-50%); max-width: min(480px,calc(100% - 124px)); padding: 7px 13px; color: var(--ember); }
.threat-banner { top: calc(max(14px,env(safe-area-inset-top)) + 88px); left: 50%; transform: translateX(-50%); max-width: calc(100% - 24px); padding: 7px 13px; letter-spacing: .3px; }
.threat-banner[data-kind=boss] { border-color: #b4523c70; box-shadow: inset 0 1px 0 #ffded025,0 0 15px #ec826d25; color: #9b3c2d; }
.kill-streak { top: calc(max(14px,env(safe-area-inset-top)) + 80px); right: 18px; padding: 5px 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: #825821; background: linear-gradient(135deg,#d0a25325,#fff9e5dd); }
.toolbar { position: absolute; z-index: 13; bottom: calc(18px + var(--safe-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; gap: 12px; width: max-content; max-width: calc(100% - 24px); padding: 8px; border: 1px solid #ffffffe0; border-radius: 26px; background: var(--glass); box-shadow: var(--glass-shadow),0 12px 30px #35502520; }
.primary-tools, .utility-tools { display: flex; align-items: center; gap: 7px; }
.primary-button, .secondary-button, .quiet-button, .tool-button { min-height: 44px; padding: 10px 16px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-size: 12px; font-weight: 600; border: 1px solid var(--line); box-shadow: inset 0 1px 0 #ffffffcc; transition: background .15s,border-color .15s,box-shadow .15s; }
.tool-button { min-width: 130px; min-height: 52px; color: var(--text); background: linear-gradient(145deg,#fff5d580,#ffffff40); }
.tool-button > span { font-size: 17px; color: var(--ember); }
.tool-button:hover, .tool-button[aria-expanded=true] { background: #d9b26d30; border-color: #9c6d3570; }
.tool-button:disabled { opacity: .45; }
.primary-button { color: #493b21; border-color: #ffdfba8a; background: linear-gradient(150deg,#ffe7b4,#edc783); box-shadow: inset 0 1px 0 #ffffff70,0 4px 14px #e7996420; }
.primary-button:hover:not(:disabled) { background: linear-gradient(150deg,#fff0c8,#f4d498); }
.primary-button:disabled { color: #89937c; border-color: #54724720; background: #ffffff45; box-shadow: inset 0 1px 0 #ffffff0a; }
.secondary-button { color: var(--text); background: #ffffff55; }
.secondary-button:hover:not(:disabled) { background: #ffffff88; }
.secondary-button:disabled { opacity: .48; }
.quiet-button { color: var(--muted); background: #ffffff35; font-weight: 500; }
.quiet-button:hover { color: var(--text); background: #ffffff88; }
.icon-only-button { width: 44px; min-width: 44px; height: 44px; padding: 0; border-radius: 50%; font-size: 18px; }
.speed-button { font-size: 13px; font-variant-numeric: tabular-nums; }
.sound-button { color: var(--amber); flex-shrink: 0; }
.sound-button[aria-pressed=true] { color: var(--muted); }
.utility-tools #camera-reset { font-size: 21px; }
.command-drawer { --sheet-bottom: calc(100px + var(--safe-bottom)); position: fixed; left: calc((100vw + env(safe-area-inset-left) - env(safe-area-inset-right)) / 2); right: auto; bottom: var(--sheet-bottom); transform: translateX(-50%); z-index: 16; width: min(480px,calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))); max-width: none; max-height: min(70dvh,calc(100dvh - var(--sheet-bottom) - max(14px,env(safe-area-inset-top)))); overflow-y: auto; overscroll-behavior: contain; border: 1px solid #ffffffa0; border-radius: 28px; background: var(--glass); box-shadow: var(--glass-shadow),0 18px 60px #2d4b2b25; scrollbar-color: #60825870 transparent; scrollbar-width: thin; }
.drawer-heading { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 8px 4px 14px; background: #fafdf3e8; border-bottom: 1px solid #6b8a5520; }
.drawer-heading h2 { font-size: 14px; font-weight: 650; letter-spacing: .6px; }
.drawer-close { width: 44px; min-width: 44px; height: 44px; font-size: 23px; background: #ffffff55; border: 1px solid #4b704325; color: var(--muted); border-radius: 50%; }
.drawer-close:hover { background: #ffffffcc; color: var(--text); }
.construction-panel, .selection-panel { padding: 12px; }
.drawer-description, .shared-upgrade-note { font-size: 11px; color: var(--muted); line-height: 1.5; margin-bottom: 9px; }
.shared-upgrade-note { color: var(--amber); font-size: 10px; margin-bottom: 7px; }
.build-mode-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -5px 0 3px; }
.quick-build-control { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 0; color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; touch-action: manipulation; user-select: none; }
.quick-build-control input { width: 18px; height: 18px; flex-shrink: 0; margin: 0; accent-color: #7b6b36; cursor: pointer; }
.quick-build-control:focus-within { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 5px; }
.build-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.build-menu > button { position: relative; min-width: 0; min-height: 86px; display: grid; grid-template-columns: 27px minmax(0,1fr) auto; grid-template-rows: auto 1fr; gap: 5px 5px; border: 1px solid #4b70432a; border-radius: 17px; background: linear-gradient(140deg,#fffdf5a0,#ffffff35); color: var(--text); padding: 12px 9px; text-align: left; box-shadow: inset 0 1px 0 #4b704325; transition: border-color .15s,background .15s; }
.build-menu > button:hover:not(:disabled) { background: #ffffeab0; border-color: #8da06a85; }
.build-menu > button.selected, .build-menu > button[aria-pressed=true] { border-color: #8b9f59b5; background: #d1dba950; }
.build-menu > button:disabled { opacity: .48; }
.build-icon { grid-column: 1; grid-row: 1/3; align-self: center; line-height: 1; font-size: 20px; color: var(--ember); }
.build-icon canvas { display: block; width: 27px; height: 32px; image-rendering: pixelated; }
.build-name { grid-column: 2; grid-row: 1; font-size: 11px; font-weight: 600; line-height: 1.6; }
.build-cost { grid-column: 3; grid-row: 1; font-size: 10px; color: var(--amber); line-height: 1.8; white-space: nowrap; }
.build-description { grid-column: 2/4; grid-row: 2; font-size: 10px; color: var(--muted); line-height: 1.5; }
.type-tabs { display: flex; flex-wrap: nowrap; gap: 5px; margin-bottom: 8px; padding: 1px 1px 3px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #60825840 transparent; }
.type-tab { min-height: 44px; min-width: 44px; flex-shrink: 0; padding: 8px 10px; border: 1px solid #4b704326; border-radius: 14px; background: #ffffff50; color: var(--muted); font-size: 11px; white-space: nowrap; }
.type-tab:hover { background: #ffffff88; }
.type-tab.selected, .type-tab[aria-pressed=true] { background: #d1dba950; border-color: var(--accent,var(--ember)); color: var(--accent,var(--ember)); }
.inspector { font-size: 11px; }
.inspector-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; line-height: 1.4; color: var(--accent,var(--ember)); margin-bottom: 3px; }
.inspector-title > span:last-child, .inspector-title small { font-size: 10px; color: var(--amber); }
.inspector-description, .inspector p { font-size: 11px; color: var(--muted); line-height: 1.7; }
.inspector-stats { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; padding: 6px 0 0; color: var(--muted); font-size: 10px; }
.inspector-stats strong { text-align: right; color: var(--text); font-weight: 500; }
.type-summary { display: block; padding: 3px 0 5px; margin-bottom: 4px; font-size: 10px; color: #627459; line-height: 1.45; border-bottom: 1px solid var(--line); }
.type-summary strong { font-weight: 600; color: var(--accent,var(--ember)); }
.empty-inspector { padding: 16px 0; text-align: center; color: var(--muted); }
.empty-inspector small { display: block; font-size: 10px; margin-top: 5px; }
.type-upgrade-list { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 7px; }
.type-upgrade-card { min-height: 64px; display: grid; grid-template-columns: minmax(0,1fr) auto auto; grid-template-rows: auto auto; gap: 4px 8px; width: 100%; padding: 8px 10px; border: 1px solid #4b70432a; border-radius: 14px; background: linear-gradient(140deg,#ffffff78,#ffffff28); color: var(--text); text-align: left; box-shadow: inset 0 1px 0 #ffffff14; transition: border-color .15s,background .15s,box-shadow .15s; }
.upgrade-name { grid-column: 1; grid-row: 1; font-size: 12px; font-weight: 650; line-height: 1.4; color: var(--accent,var(--ember)); }
.upgrade-price { grid-column: 3; grid-row: 1; color: var(--amber); font-size: 11px; font-weight: 600; white-space: nowrap; line-height: 1.6; }
.upgrade-rank { grid-column: 2; grid-row: 1; font-size: 10px; letter-spacing: .1px; color: #6c7e62; line-height: 1.7; white-space: nowrap; }
.upgrade-description { grid-column: 1/4; grid-row: 2; font-size: 11px; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.compact-selection .inspector-description { font-size: 10px; line-height: 1.4; }
.type-upgrade-card:disabled { background: #ffffff35; border-color: #ffffff12; }
.type-upgrade-card:disabled .upgrade-name { color: #596b50; }
.type-upgrade-card:disabled .upgrade-price { color: #746038; }
.type-upgrade-card:disabled .upgrade-rank { color: #526746; }
.type-upgrade-card:hover:not(:disabled), .type-upgrade-card:focus-visible { border-color: var(--accent,var(--ember)); background: #e7f0d480; }
.branches-complete .type-upgrade-list, .type-upgrade-list.branches-complete { display: none; }
.inspector .branches-summary { margin-top: 7px; padding: 5px 0; color: #52704a; font-size: 10px; line-height: 1.4; }
.evolution-panel { margin-top: 9px; border-top: 1px solid var(--line); padding-top: 7px; }
.evolution-panel .evolution-heading { color: var(--amber); font-size: 10px; font-weight: 600; line-height: 1.45; margin-bottom: 6px; }
.evolution-list { display: grid; grid-template-columns: 1fr; gap: 6px; }
.evolution-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 8px; width: 100%; min-height: 64px; padding: 8px 10px; border: 1px solid #ab8a4c70; border-radius: 14px; color: var(--text); background: linear-gradient(145deg,#fff4d080,#ffffff65); text-align: left; box-shadow: inset 0 1px 0 #ffffffb0; transition: background .15s,border-color .15s; }
.evolution-name { grid-column: 1; grid-row: 1; font-size: 12px; font-weight: 650; line-height: 1.4; color: #705426; }
.evolution-price { grid-column: 2; grid-row: 1; color: var(--amber); font-size: 11px; line-height: 1.6; font-weight: 600; white-space: nowrap; }
.evolution-panel .evolution-description { grid-column: 1/3; grid-row: 2; color: #5f7054; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.evolution-card:hover:not(:disabled), .evolution-card:focus-visible { background: #fff1cbb0; border-color: var(--amber); }
.evolution-card[aria-pressed=true] { border-color: #8b631f; background: #fff0c3a0; box-shadow: inset 0 1px 0 #ffffffb0,inset 0 0 0 1px #8b631f,0 3px 12px #ad8a3920; }
.evolution-card:disabled { border-color: #ab8a4c30; background: #ffffff40; }
.evolution-card:disabled .evolution-price { color: #526746; }
.evolution-confirm { width: 100%; min-height: 44px; margin-top: 6px; font-size: 11px; }
.evolution-selected { padding: 6px 9px; border-radius: 12px; border: 1px solid #6b8a5540; background: #e0eacb65; font-size: 11px; line-height: 1.45; color: #506746; }
.evolution-selected strong { display: block; margin-bottom: 3px; color: #3c633d; font-size: 12px; }
.inspector-actions { display: flex; gap: 8px; margin-top: 12px; }
.inspector-actions button, .inspector > #repair-building-button { width: 100%; min-height: 44px; font-size: 11px; }
.inspector > #repair-building-button { margin-top: 6px; }
.inspector .lock-hint, .inspector .upgrade-hint { margin-top: 8px; color: var(--amber); font-size: 10px; }
.arena-overlay { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 18px; background: #44694225; overflow-y: auto; overscroll-behavior: contain; }
.intro-panel { position: relative; flex-shrink: 0; width: min(440px,100%); margin: auto; padding: 25px 28px; border: 1px solid #ffffffa0; border-radius: 26px; background: linear-gradient(145deg,#fffdf1cf,#eff4e5ee); box-shadow: var(--glass-shadow); }
.eyebrow { display: block; color: var(--ember); font-size: 10px; letter-spacing: 1.6px; line-height: 1.5; }
.intro-panel h2 { font-size: 25px; letter-spacing: 1px; margin-top: 10px; line-height: 1.4; }
.intro-lead { font-size: 12px; color: #657651; margin-top: 7px; line-height: 1.6; }
.intro-rules { margin: 18px 0 20px; border-top: 1px solid #66845625; border-bottom: 1px solid #66845625; padding: 12px 0; }
.intro-rules p { position: relative; padding-left: 24px; font-size: 11px; line-height: 1.9; color: #5b704f; margin: 5px 0; }
.intro-rules p > span { position: absolute; left: 0; top: 2px; color: #879267; font-size: 9px; font-variant-numeric: tabular-nums; }
.intro-rules b { font-weight: 600; color: var(--text); }
.start-button { width: 100%; font-size: 13px; justify-content: space-between; padding: 12px 18px; }
.intro-controls { font-size: 10px; color: #748363; text-align: center; margin-top: 12px; line-height: 1.5; }
.modal-layer { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,var(--safe-bottom)) max(18px,env(safe-area-inset-left)); background: #1b342b45; overflow-y: auto; overscroll-behavior: contain; }
.choice-panel, .result-panel { position: relative; border: 1px solid #ffffffb0; border-radius: 30px; background: linear-gradient(145deg,#fffdf2ce,#eff4e8f2); box-shadow: var(--glass-shadow),0 24px 90px #28452935; }
.choice-panel { display: flex; flex-direction: column; width: min(780px,100%); max-height: calc(100dvh - max(36px,env(safe-area-inset-top) + var(--safe-bottom) + 16px)); overflow: hidden; }
.choice-header { flex-shrink: 0; padding: 25px 26px 14px; }
.choice-panel h2, .result-panel h2 { font-size: 26px; letter-spacing: .8px; line-height: 1.4; margin-top: 8px; }
.modal-description { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.choice-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 7px 22px 20px; scrollbar-color: #60825870 transparent; scrollbar-width: thin; }
.upgrade-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.upgrade-choices > button { min-height: 176px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; color: var(--text); background: linear-gradient(145deg,#ffffff80,#ffffff28); border: 1px solid #66804d36; text-align: left; padding: 18px 16px; border-radius: 21px; box-shadow: inset 0 1px 0 #ffffff19; transition: background .15s,border-color .15s,box-shadow .15s; }
.upgrade-choices > button:hover { border-color: var(--accent,var(--ember)); background: #ffffeeaa; }
.upgrade-choices > button[aria-pressed=true] { border-color: var(--accent,var(--ember)); background: #d1dba950; box-shadow: inset 0 1px 0 #ffffff30,inset 0 0 0 1px var(--accent,var(--ember)),0 5px 19px #5b804b18; }
.upgrade-tag { font-size: 10px; letter-spacing: .7px; color: var(--accent,var(--ember)); background: #ffffff08; padding: 4px 8px; border-radius: 999px; border: 1px solid #5b77462a; }
.upgrade-card h3, .upgrade-card strong { font-size: 16px; line-height: 1.45; }
.upgrade-card p, .upgrade-card small { color: #596e5c; font-size: 11px; line-height: 1.7; }
.upgrade-icon { font-size: 25px; color: var(--accent,var(--ember)); }
.choice-cta { margin-top: auto; font-size: 10px; color: var(--accent,var(--ember)); }
.choice-confirm-area { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 26px; border-top: 1px solid #6b8a5527; background: #f7faefdc; box-shadow: inset 0 1px 0 #ffffff07; }
#choice-selection { min-width: 0; font-size: 11px; line-height: 1.5; color: #526a45; overflow-wrap: anywhere; }
#choice-confirm { min-width: 150px; min-height: 48px; flex-shrink: 0; }
.result-panel { width: min(440px,100%); max-height: calc(100dvh - 36px); overflow-y: auto; text-align: center; padding: 32px 28px; }
.danger-text { color: var(--coral); }
.result-panel h2 { font-size: 31px; }
.result-stats { display: grid; grid-template-columns: repeat(3,1fr); margin: 25px 0; gap: 8px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.result-stats > div { display: flex; flex-direction: column; gap: 8px; }
.result-stats span { font-size: 10px; color: var(--muted); }
.result-stats strong { font-size: 24px; color: var(--text); font-variant-numeric: tabular-nums; }
.result-panel .primary-button { width: 100%; justify-content: space-between; }
#gameover-overlay[data-outcome=victory] .result-panel { border-color: #ab8b3580; }
#gameover-overlay[data-outcome=victory] #result-eyebrow { color: var(--amber); }
.toast { position: fixed; bottom: max(24px,var(--safe-bottom)); left: 50%; transform: translateX(-50%); z-index: 30; max-width: calc(100% - 32px); padding: 12px 19px; background: linear-gradient(135deg,#fffdebdc,#edf4e5f2); border: 1px solid #9e874b45; box-shadow: var(--glass-shadow); color: #385130; font-size: 12px; border-radius: 18px; pointer-events: none; text-align: center; line-height: 1.6; }
.surge-active { color: #a35130 !important; text-shadow: 0 0 10px #b34d2830; }
#loot-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 14; }
.ui-enter { animation: ui-slide-in 160ms ease-out both; }
.ui-exit { animation: ui-slide-out 150ms ease-in both; pointer-events: none; }
.command-drawer.ui-enter { animation: sheet-in 200ms cubic-bezier(.2,.75,.25,1) both; }
.command-drawer.ui-exit { animation: sheet-out 200ms cubic-bezier(.4,0,.8,.25) both; pointer-events: none; }
.modal-layer.ui-enter, .arena-overlay.ui-enter { animation-name: ui-fade-in; }
.modal-layer.ui-exit, .arena-overlay.ui-exit { animation-name: ui-fade-out; }
.modal-layer.ui-enter > section, .arena-overlay.ui-enter > .intro-panel { animation: ui-dialog-in 160ms ease-out both; }
.modal-layer.ui-exit > section, .arena-overlay.ui-exit > .intro-panel { animation: ui-dialog-out 150ms ease-in both; }
@keyframes ui-slide-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes ui-slide-out { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 10px; } }
@keyframes ui-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ui-dialog-in { from { scale: .98; translate: 0 6px; } to { scale: 1; translate: 0 0; } }
@keyframes ui-dialog-out { from { scale: 1; translate: 0 0; } to { scale: .98; translate: 0 6px; } }
@keyframes sheet-in { from { opacity: 1; translate: 0 calc(100% + var(--sheet-bottom) + 16px); } to { opacity: 1; translate: 0 0; } }
@keyframes sheet-out { from { opacity: 1; translate: 0 0; } to { opacity: 1; translate: 0 calc(100% + var(--sheet-bottom) + 16px); } }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .toolbar, .command-drawer, .intro-panel, .choice-panel, .result-panel { -webkit-backdrop-filter: blur(18px) saturate(135%); backdrop-filter: blur(18px) saturate(135%); }
}
.brand { padding: 7px 9px; border-radius: 16px; background: #fffce95c; box-shadow: inset 0 1px 0 #ffffff80; }
.inspector-title, .upgrade-name, .type-tab.selected, .type-tab[aria-pressed=true], .upgrade-tag, .choice-cta { color: color-mix(in srgb,var(--accent,var(--ember)) 48%,#233c2c); }
.upgrade-choices > button { position: relative; }
.upgrade-card[data-rarity=common] .upgrade-tag:before { content: "●"; display: inline-block; margin-right: 5px; font-size: 6px; vertical-align: 1px; }
.upgrade-card[data-rarity=rare] { border-width: 2px; border-color: #6994a765; box-shadow: inset 0 1px 0 #ffffffc0,0 4px 17px #6096b61a; }
.upgrade-card[data-rarity=rare] .upgrade-tag { background: #dff0f788; }
.upgrade-card[data-rarity=rare] .upgrade-tag:before { content: "◆"; display: inline-block; margin-right: 5px; font-size: 9px; }
.upgrade-card[data-rarity=epic] { border-width: 2px; border-color: #a184b380; box-shadow: inset 0 1px 0 #ffffffd0,inset 0 0 0 2px #ccb7dc25,0 5px 20px #a18cb626; }
.upgrade-card[data-rarity=epic] .upgrade-tag { background: #eee2fa88; }
.upgrade-card[data-rarity=epic] .upgrade-tag:before { content: "✦"; display: inline-block; margin-right: 5px; font-size: 11px; }
.upgrade-card[aria-pressed=true]:after { content: "✓"; position: absolute; bottom: 10px; right: 10px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: #fff9df; background: #4a7652; box-shadow: 0 1px 4px #354e3030; font-size: 11px; font-weight: 750; }
.choice-cta { padding-right: 24px; }
.upgrade-choices > button[aria-pressed=true] { border-color: var(--accent,var(--ember)); box-shadow: inset 0 1px 0 #ffffffb0,inset 0 0 0 1px var(--accent,var(--ember)),0 5px 19px #5b804b18; }
@media (max-width: 1000px) {
  .top-controls .live-label { display: none; }
  .brand h1 { font-size: 15px; }
}
@media (max-width: 760px) {
  .topbar { top: calc(max(10px,env(safe-area-inset-top)) + 49px); left: max(10px,env(safe-area-inset-left)); right: max(10px,env(safe-area-inset-right)); }
  .brand { display: none; }
  .hud { top: max(10px,env(safe-area-inset-top)); width: min(470px,calc(100% - 24px)); gap: 5px; }
  .stat { min-width: 0; min-height: 40px; flex: 1; gap: 3px; padding: 10px 5px; border-radius: 15px; }
  .stat strong { font-size: clamp(11px,3.4vw,14px); letter-spacing: 0; }
  .hud-icon { font-size: 10px; }
  .xp-meter { bottom: 4px; left: 7px; right: 7px; }
  .boss-health { top: calc(max(10px,env(safe-area-inset-top)) + 51px); width: min(285px,82vw); padding: 6px 11px; }
  .boss-health > span { font-size: 9px; }
  .boss-health strong { font-size: 8px; }
  .toolbar { bottom: calc(10px + var(--safe-bottom)); padding: 6px; gap: 6px; border-radius: 24px; }
  .primary-tools, .utility-tools { gap: 4px; }
  .tool-button { min-width: 64px; min-height: 48px; padding: 8px 9px; font-size: 12px; gap: 5px; border-radius: 16px; }
  .tool-button > span { font-size: 15px; }
  .primary-tools .quiet-button { min-width: 64px; min-height: 48px; padding: 8px 9px; font-size: 11px; }
  #cancel-build { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); min-height: 44px; min-width: 134px; border-radius: 16px; background: #fffcece8; box-shadow: var(--glass-shadow); }
  .command-drawer { --sheet-bottom: calc(80px + var(--safe-bottom)); width: calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)); max-height: min(78dvh,calc(100dvh - var(--sheet-bottom) - max(15px,env(safe-area-inset-top)))); border-radius: 24px; }
  .toolbar:has(#cancel-build[aria-hidden="false"]) + .command-drawer { --sheet-bottom: calc(132px + var(--safe-bottom)); }
  .construction-panel, .selection-panel { padding: 11px; }
  .build-menu { gap: 8px; }
  .build-menu > button { min-height: 84px; padding: 11px 8px; border-radius: 17px; }
  .type-tab { flex: 0 0 auto; min-width: 44px; padding: 8px; }
  .placement-hint { bottom: calc(136px + var(--safe-bottom)); padding: 6px 10px; font-size: 9px; }
  .threat-banner { top: calc(max(10px,env(safe-area-inset-top)) + 83px); padding: 5px 10px; font-size: 9px; }
  .kill-streak { top: calc(max(10px,env(safe-area-inset-top)) + 155px); right: 12px; padding: 4px 9px; font-size: 9px; }
  .toast { bottom: calc(86px + var(--safe-bottom)); font-size: 11px; padding: 11px 16px; }
  .arena-overlay { padding: max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,var(--safe-bottom)) max(12px,env(safe-area-inset-left)); }
  .intro-panel { width: min(370px,100%); padding: 23px 22px; border-radius: 27px; }
  .intro-panel h2 { font-size: 23px; margin-top: 7px; }
  .intro-rules { margin: 15px 0 17px; padding: 11px 0; }
  .intro-rules p { font-size: 11px; line-height: 1.7; padding-left: 22px; }
  .intro-controls { font-size: 10px; }
  .modal-layer { padding: max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,var(--safe-bottom)) max(12px,env(safe-area-inset-left)); }
  .choice-panel { border-radius: 28px; max-height: calc(100dvh - max(24px,env(safe-area-inset-top) + var(--safe-bottom) + 12px)); }
  .choice-header { padding: 16px 18px 9px; }
  .choice-panel h2 { font-size: 21px; margin-top: 5px; }
  .modal-description { font-size: 11px; margin-top: 5px; }
  .choice-scroll { padding: 5px 14px 10px; }
  .upgrade-choices { grid-template-columns: 1fr; gap: 6px; }
  .upgrade-choices > button { min-height: 76px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 3px 8px; padding: 9px 11px; border-radius: 16px; }
  .upgrade-tag { grid-column: 2; grid-row: 1; font-size: 9px; padding: 3px 6px; letter-spacing: .1px; }
  .upgrade-card h3, .upgrade-card strong { grid-column: 1; grid-row: 1; font-size: 14px; line-height: 1.6; }
  .upgrade-card p, .upgrade-card small { grid-column: 1/3; grid-row: 2; font-size: 11px; line-height: 1.55; }
  .choice-cta { grid-column: 1/3; grid-row: 3; margin: 0; font-size: 9px; }
  .choice-confirm-area { gap: 10px; padding: 10px 18px; }
  #choice-selection { font-size: 10px; }
  #choice-confirm { min-width: 118px; min-height: 44px; font-size: 12px; }
  .result-panel { border-radius: 28px; padding: 27px 23px; }
  .result-panel h2 { font-size: 28px; }
  .result-stats { margin: 21px 0; }
  .result-stats strong { font-size: 22px; }
}
@media (max-width: 365px) {
  .game-shell .toolbar { gap: 6px; padding: 6px; }
  .toolbar .tool-button { flex-direction: column; width: 44px; min-width: 44px; padding: 4px; font-size: 10px; gap: 1px; }
  .primary-tools, .utility-tools { gap: 3px; }
}
@media (max-width: 350px) {
  .hud { gap: 4px; }
  .stat { padding-left: 3px; padding-right: 3px; }
  .build-name { font-size: 10px; }
  .build-cost { font-size: 9px; }
  .intro-panel { padding: 21px 20px; }
  .intro-panel h2 { font-size: 21px; }
  .intro-rules p { font-size: 10px; }
  .choice-header { padding: 17px 17px 9px; }
  .choice-panel h2 { font-size: 19px; }
  .choice-scroll { padding-left: 12px; padding-right: 12px; }
  .choice-confirm-area { padding-left: 16px; padding-right: 16px; }
  #choice-confirm { min-width: 112px; }
}
@media (max-width: 1000px) and (orientation: landscape) and (max-height: 520px) {
  .topbar { top: max(8px,env(safe-area-inset-top)); }
  .brand { display: none; }
  .hud { top: max(8px,env(safe-area-inset-top)); width: min(440px,calc(100% - 140px)); gap: 6px; }
  .stat { min-height: 35px; padding: 9px 11px; min-width: 0; flex: 1; border-radius: 14px; gap: 4px; }
  .stat strong { font-size: 12px; }
  .hud-icon { font-size: 10px; }
  .boss-health { top: calc(max(8px,env(safe-area-inset-top)) + 43px); width: 250px; padding: 5px 10px; }
  .threat-banner { top: calc(max(8px,env(safe-area-inset-top)) + 74px); }
  .kill-streak { top: calc(max(8px,env(safe-area-inset-top)) + 67px); }
  .toolbar { bottom: calc(8px + var(--safe-bottom)); padding: 5px 7px; gap: 10px; }
  .tool-button, .primary-tools .quiet-button { min-height: 44px; min-width: 86px; padding: 8px 13px; }
  .placement-hint { bottom: calc(76px + var(--safe-bottom)); }
  .command-drawer { --sheet-bottom: calc(76px + var(--safe-bottom)); width: min(620px,calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))); max-height: calc(100dvh - var(--sheet-bottom) - max(14px,env(safe-area-inset-top))); border-radius: 22px; }
  .compact-selection .type-upgrade-list { grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; }
  .compact-selection .type-upgrade-card { gap: 4px 5px; padding: 8px; }
  .compact-selection .upgrade-name { font-size: 11px; }
  .compact-selection .upgrade-price { font-size: 10px; }
  .compact-selection .upgrade-rank { font-size: 9px; }
  .evolution-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .toast { bottom: calc(76px + var(--safe-bottom)); }
  .choice-panel { width: min(740px,100%); max-height: calc(100dvh - max(20px,env(safe-area-inset-top) + var(--safe-bottom) + 12px)); border-radius: 25px; }
  .choice-header { padding: 13px 20px 7px; }
  .choice-panel h2 { font-size: 18px; margin-top: 3px; }
  .choice-panel .modal-description { font-size: 10px; margin-top: 3px; }
  .choice-scroll { padding: 5px 15px 10px; }
  .upgrade-choices { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .upgrade-choices > button { min-height: 106px; display: flex; gap: 6px; padding: 11px; border-radius: 17px; }
  .upgrade-card h3 { font-size: 12px; }
  .upgrade-card p { font-size: 10px; line-height: 1.5; }
  .upgrade-tag { font-size: 8px; padding: 2px 5px; }
  .choice-cta { font-size: 9px; margin-top: auto; }
  .choice-confirm-area { padding: 9px 20px 11px; }
  #choice-confirm { min-height: 44px; min-width: 126px; }
  .intro-panel { padding: 16px 20px; }
  .intro-panel h2 { font-size: 21px; }
  .intro-lead { display: none; }
  .intro-rules { padding: 6px 0; margin: 9px 0 11px; }
  .intro-rules p { font-size: 10px; line-height: 1.5; margin: 3px 0; }
  .intro-controls { font-size: 9px; margin-top: 8px; }
}
@media (max-width: 760px) and (orientation: landscape) and (max-height: 520px) {
  .placement-hint { bottom: calc(132px + var(--safe-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}