:root {
  --ink: #10120f;
  --paper: #ece8dc;
  --paper-deep: #ded8c8;
  --card: #f6f2e7;
  --line: rgba(25, 29, 24, .14);
  --muted: #6b6d63;
  --moss: #697247;
  --acid: #d6f36b;
  --rust: #be5a35;
  --gold: #d0a94f;
  --nav-height: 78px;
  --display: "Archivo Black", Impact, sans-serif;
  --sans: "Space Mono", monospace;
  --mono: "Space Mono", monospace;
}

* { box-sizing: border-box; }
html { background: #292c27; }
body { margin: 0; color: var(--ink); font-family: var(--sans); background: radial-gradient(circle at 50% 0, #4b5145 0, #252824 54%, #191b18 100%); min-height: 100dvh; }
body.sheet-open { overflow: hidden; }
button { color: inherit; font: inherit; }
button, [data-open-sheet] { -webkit-tap-highlight-color: transparent; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app-shell { position: relative; width: min(100%, 430px); min-height: 100dvh; margin: 0 auto; background: var(--paper); overflow: hidden; box-shadow: 0 0 80px rgba(0,0,0,.35); }
.topbar { min-height: 63px; padding: max(12px, env(safe-area-inset-top)) 18px 8px; display: flex; align-items: center; justify-content: space-between; background: var(--paper); }
.brand-mark { display: flex; align-items: end; gap: 2px; width: 30px; height: 29px; }
.brand-mark span { display: block; width: 8px; background: var(--ink); border-radius: 1px 1px 0 0; }
.brand-mark span:nth-child(1) { height: 17px; }
.brand-mark span:nth-child(2) { height: 27px; }
.brand-mark span:nth-child(3) { height: 21px; }
.season-pill { border: 1px solid var(--line); border-radius: 99px; background: rgba(255,255,255,.3); padding: 7px 11px; font-size: 10px; font-family: var(--mono); letter-spacing: .03em; }
.season-pill b { color: var(--rust); margin-left: 6px; }
.pulse-dot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--rust); box-shadow: 0 0 0 4px rgba(190,90,53,.12); }
.avatar { width: 31px; height: 31px; border: 0; border-radius: 50%; background: var(--ink); color: var(--paper); font: 10px var(--mono); }
main { min-height: calc(100dvh - 63px); }
.screen { display: none; padding: 16px 17px calc(var(--nav-height) + 30px); animation: screen-in .25s ease; }
.screen.active { display: block; }
@keyframes screen-in { from { opacity: 0; transform: translateY(5px); } }
.screen-heading { min-height: 66px; display: flex; align-items: flex-start; justify-content: space-between; }
.screen-heading.compact { min-height: 61px; }
.eyebrow { margin: 0 0 3px; font: 500 9px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font: 600 32px/.92 var(--display); letter-spacing: -.035em; }
h2 { margin-bottom: 0; font: 600 23px/1 var(--display); letter-spacing: -.025em; }
.tier-badge { padding: 7px 9px; border: 1px solid var(--ink); font: 500 9px var(--mono); letter-spacing: .1em; }
.run-card { position: relative; height: 277px; overflow: hidden; border-radius: 3px; background: linear-gradient(#87907b 0%, #566151 58%, #333a30 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.run-card:after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(105deg, transparent 0 18px, rgba(255,255,255,.025) 19px, transparent 20px); pointer-events: none; }
.run-sky { position: absolute; inset: 0; overflow: hidden; opacity: .9; }
.moon { position: absolute; width: 92px; height: 92px; right: -16px; top: 17px; border-radius: 50%; background: #d8d4b7; box-shadow: 0 0 35px rgba(226,222,186,.24); }
.cloud { position: absolute; width: 170px; height: 18px; border-radius: 50%; background: rgba(42,48,40,.5); filter: blur(8px); }
.cloud-one { top: 61px; left: -40px; }.cloud-two { top: 104px; right: -60px; }
.fortress { position: absolute; width: 228px; height: 125px; left: 50%; bottom: 42px; transform: translateX(-50%); filter: drop-shadow(0 15px 8px rgba(0,0,0,.25)); }
.tower, .keep { position: absolute; bottom: 0; background: #232820; border: 1px solid #11140f; }
.tower { width: 51px; height: 82px; }.tower:before { content: ""; position: absolute; top: -13px; left: -5px; width: 59px; height: 16px; background: repeating-linear-gradient(90deg, #232820 0 10px, transparent 10px 16px); }
.tower.left { left: 11px; }.tower.right { right: 11px; }.keep { left: 56px; width: 116px; height: 112px; }
.keep:before { content: ""; position: absolute; top: -17px; left: -1px; width: 116px; height: 20px; background: repeating-linear-gradient(90deg, #232820 0 15px, transparent 15px 24px); }
.keep b { position: absolute; width: 22px; height: 41px; bottom: 0; left: 47px; border-radius: 11px 11px 0 0; background: #73765d; }
.enemy-line { position: absolute; display: flex; justify-content: space-between; width: 280px; left: 55px; bottom: 35px; }
.enemy-line i { width: 9px; height: 20px; background: #151813; border-radius: 50% 50% 20% 20%; box-shadow: 0 -7px 0 -2px #151813; animation: march 1.7s ease-in-out infinite alternate; }
.enemy-line i:nth-child(2n) { animation-delay: -.8s; }
@keyframes march { to { transform: translateY(5px); } }
.run-overlay { position: absolute; z-index: 2; left: 14px; right: 14px; top: 13px; display: flex; justify-content: space-between; color: #f3f0e4; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.run-overlay p { margin-bottom: 1px; font: 9px var(--mono); letter-spacing: .14em; }.run-overlay strong { font: 600 23px var(--display); }.run-stat { text-align: right; }.run-stat span { display: block; font: 9px var(--mono); }.run-stat b { font: 500 16px var(--mono); }
.health-track { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px; height: 4px; background: rgba(255,255,255,.22); }.health-track span { display: block; height: 100%; background: var(--acid); box-shadow: 0 0 10px rgba(214,243,107,.45); }
.resource-strip { display: grid; grid-template-columns: 1fr 1fr 1.08fr; margin: 9px 0 24px; border: 1px solid var(--line); background: rgba(255,255,255,.24); }
.resource-strip > * { min-height: 58px; border: 0; border-right: 1px solid var(--line); background: transparent; padding: 9px 9px 8px 34px; text-align: left; position: relative; }.resource-strip > *:last-child { border-right: 0; }
.resource-strip p { margin: 0; color: var(--muted); font-size: 9px; }.resource-strip strong { display: block; margin-top: 3px; font: 500 13px var(--mono); }
.resource-icon { position: absolute; left: 10px; top: 19px; width: 13px; height: 13px; transform: rotate(45deg); background: var(--gold); }.resource-icon.spark { background: #8ca7ae; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.perk-alert { position: absolute; left: 10px; top: 16px; width: 18px; height: 18px; padding-top: 2px; border-radius: 50%; background: var(--rust); color: white; text-align: center; font: 11px var(--mono); animation: throb 1.3s ease-in-out infinite alternate; }
@keyframes throb { to { transform: scale(1.08); box-shadow: 0 0 0 5px rgba(190,90,53,.12); } }
.section-row { display: flex; align-items: end; justify-content: space-between; margin: 22px 1px 10px; }.section-row span { max-width: 130px; color: var(--muted); font-size: 8px; line-height: 1.4; text-align: right; }.section-row .text-button { border: 0; background: none; font: 10px var(--mono); text-decoration: underline; }
.upgrade-list { border-top: 1px solid var(--ink); }
.upgrade { display: grid; grid-template-columns: 41px 1fr auto; align-items: center; width: 100%; min-height: 65px; padding: 8px 4px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; transition: background .2s; }.upgrade:active { background: rgba(255,255,255,.5); }.upgrade-glyph { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid var(--line); }.upgrade-glyph svg { width: 16px; height: 16px; }.upgrade b { display: block; font: 600 12px var(--sans); }.upgrade small { color: var(--muted); font-size: 9px; }.upgrade em { margin-left: 7px; color: var(--moss); font-style: normal; }.upgrade .cost { padding: 7px 8px; border: 1px solid var(--ink); font: 10px var(--mono); }
.bottom-nav { position: fixed; z-index: 20; bottom: 0; left: 50%; width: min(100%, 430px); height: calc(var(--nav-height) + env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; grid-template-columns: repeat(4,1fr); padding: 8px 8px env(safe-area-inset-bottom); border-top: 1px solid rgba(16,18,15,.2); background: rgba(240,236,224,.93); backdrop-filter: blur(14px); }
.bottom-nav button { position: relative; border: 0; background: transparent; color: #7b7b71; font: 9px var(--mono); }.bottom-nav svg { display: block; width: 21px; height: 21px; margin: 0 auto 4px; stroke-width: 1.5; }.bottom-nav button.active { color: var(--ink); }.bottom-nav button.active:before { content: ""; position: absolute; top: -9px; left: 24%; width: 52%; height: 2px; background: var(--rust); }.nav-alert { position: absolute; z-index: 2; top: 4px; right: 29px; width: 6px; height: 6px; border-radius: 50%; background: var(--rust); }
.icon-button, .crest { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--ink); background: transparent; font: 12px var(--mono); }.crest { background: var(--ink); color: var(--paper); }.crest svg { width: 17px; height: 17px; }
.map-screen { padding-left: 0; padding-right: 0; padding-top: 16px; background: #d9d3c3; }.map-heading { padding: 0 17px; }.front-summary { margin: 9px 17px 0; padding: 11px 12px; background: rgba(246,242,231,.84); border: 1px solid var(--line); }.front-summary > div:first-child { display: flex; justify-content: space-between; font-size: 10px; }.front-summary strong { color: var(--rust); font: 10px var(--mono); text-transform: uppercase; }.front-summary p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }.front-summary p b { color: var(--ink); font-family: var(--mono); }.pressure-track { height: 3px; margin-top: 7px; background: #c4beb0; }.pressure-track span { display: block; width: 68%; height: 100%; background: var(--rust); }
.map-canvas { position: relative; height: 544px; margin-top: 8px; overflow: hidden; background-color: #c9c4b5; background-image: linear-gradient(30deg, rgba(255,255,255,.13) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.13) 87.5%), linear-gradient(150deg, rgba(255,255,255,.13) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.13) 87.5%), linear-gradient(30deg, rgba(255,255,255,.13) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.13) 87.5%); background-size: 42px 74px; }.map-canvas:before { content: ""; position: absolute; width: 230px; height: 210px; right: -95px; top: -35px; border-radius: 45%; background: repeating-radial-gradient(ellipse, #555c4e 0 10px, #494f43 11px 15px); transform: rotate(-20deg); opacity: .9; }.routes { position: absolute; inset: 0; width: 100%; height: 500px; }.route { fill: none; stroke: #8f8c81; stroke-width: 2; stroke-dasharray: 4 5; }.route.active { stroke: #5d6448; stroke-width: 3; stroke-dasharray: none; }.route.danger { stroke: var(--rust); }
.hold-node { position: absolute; width: 80px; border: 0; background: none; padding: 0; font-size: 8px; text-align: center; }.hold-node span { display: grid; place-items: center; width: 35px; height: 35px; margin: 0 auto 3px; border-radius: 50%; background: #4e5448; color: #e9e4d7; box-shadow: 0 3px 12px rgba(0,0,0,.22); }.hold-node svg { width: 19px; height: 19px; }.hold-node b, .hold-node small { display: block; text-shadow: 0 1px rgba(255,255,255,.6); }.hold-node small { margin-top: 2px; color: var(--muted); font-size: 7px; }.hold-node.yours span { width: 47px; height: 47px; background: var(--ink); outline: 3px solid var(--acid); outline-offset: 3px; }.hold-node.yours { width: 92px; }.hold-node.yours i { position: absolute; z-index: 3; top: -8px; right: 4px; padding: 3px 5px; border-radius: 7px; background: var(--rust); color: white; font: normal 7px var(--mono); }.hold-node.lost span { background: var(--rust); opacity: .72; }.map-label { position: absolute; font: 500 10px var(--mono); letter-spacing: .25em; }.label-tide { right: 18px; top: 24px; color: #e7e2d4; transform: rotate(-9deg); }.map-key { position: absolute; bottom: 15px; left: 15px; right: 15px; display: flex; gap: 13px; padding: 8px; background: rgba(238,234,222,.85); font: 7px var(--mono); }.map-key span { display: flex; align-items: center; gap: 4px; }.map-key i { width: 8px; height: 8px; border-radius: 50%; }.key-home { background: var(--ink); box-shadow: 0 0 0 2px var(--acid); }.key-road { height: 2px!important; border-radius: 0!important; background: var(--moss); }.key-tide { background: var(--rust); }
.siege-banner { position: relative; overflow: hidden; margin-top: 6px; padding: 18px 16px 37px; background: var(--ink); color: var(--paper); }.siege-banner:after { content: ""; position: absolute; width: 150px; height: 150px; right: -50px; top: -70px; border: 23px solid rgba(214,243,107,.07); border-radius: 50%; }.siege-banner h2 { margin: 7px 0 2px; font-size: 25px; }.siege-banner p { margin-bottom: 0; color: #acaea3; font: 9px var(--mono); }.siege-banner > svg { position: absolute; width: 21px; height: 21px; right: 15px; top: 25px; }.live-label { color: var(--acid); font: 8px var(--mono); letter-spacing: .13em; }.contribution-track { position: absolute; left: 16px; right: 16px; bottom: 21px; height: 4px; background: #3d403a; }.contribution-track span { display: block; width: 58%; height: 100%; background: var(--acid); }.siege-banner > small { position: absolute; left: 16px; bottom: 7px; color: #96998f; font-size: 7px; }
.impact-card { display: grid; grid-template-columns: 1fr 122px; min-height: 114px; margin-top: 9px; border: 1px solid var(--line); background: rgba(255,255,255,.25); }.impact-card > div:first-child { padding: 18px; }.impact-card strong { display: inline-block; font: 600 41px var(--display); }.impact-card span { color: var(--muted); font-size: 9px; }.impact-ring { display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: 1px solid var(--line); background: conic-gradient(var(--moss) 0 84%, transparent 84%); position: relative; }.impact-ring:before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--paper-deep); }.impact-ring span, .impact-ring small { position: relative; z-index: 2; }.impact-ring span { color: var(--ink); font: 500 17px var(--mono); }.impact-ring small { max-width: 60px; color: var(--muted); font-size: 7px; text-align: center; }
.watchfire-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: 112px; gap: 8px; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }.watchfire { padding: 13px 10px 11px; border: 1px solid var(--line); background: rgba(255,255,255,.26); text-align: left; }.watchfire b, .watchfire small, .watchfire em { display: block; }.watchfire b { margin-top: 9px; font-size: 10px; }.watchfire small { min-height: 21px; color: var(--muted); font-size: 8px; }.watchfire em { padding-top: 6px; border-top: 1px solid var(--line); font: normal 8px var(--mono); color: var(--rust); }.watchfire.lit { opacity: .6; }.member-avatar { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #f3efe5; font: 8px var(--mono); }.member-avatar i { position: absolute; width: 7px; height: 7px; right: 0; bottom: 0; border: 2px solid var(--paper); border-radius: 50%; background: #6aa962; }.member-avatar.amber { background: #a77545; }.member-avatar.blue { background: #5c7880; }.member-avatar.green { background: #5e765d; }.member-avatar.small { width: 28px; height: 28px; }
.ledger { border-top: 1px solid var(--ink); }.ledger > div { display: grid; grid-template-columns: 37px 1fr auto; align-items: center; min-height: 61px; border-bottom: 1px solid var(--line); }.ledger p { margin: 0; }.ledger p b, .ledger p small { display: block; }.ledger p b { font-size: 9px; }.ledger p small { margin-top: 2px; color: var(--muted); font-size: 7px; }.ledger > div > strong { font: 9px var(--mono); }.ledger .accent { color: var(--moss); }
.balance-card { margin-top: 7px; padding: 16px; background: var(--ink); color: var(--paper); }.balance-card span { font: 8px var(--mono); color: #aaa99f; }.balance-card strong { display: block; margin: 2px 0 8px; font: 500 26px var(--mono); }.balance-card small { display: block; max-width: 290px; color: #aaa99f; font-size: 8px; line-height: 1.5; }
.segmented { display: grid; grid-template-columns: repeat(3,1fr); margin: 13px 0 15px; padding: 3px; background: #d8d2c4; }.segmented button { min-height: 34px; border: 0; background: transparent; color: var(--muted); font-size: 9px; }.segmented button.active { background: var(--card); color: var(--ink); box-shadow: 0 2px 5px rgba(0,0,0,.06); }.segmented i { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--rust); color: white; font: normal 7px var(--mono); }
.market-panel { display: none; }.market-panel.active { display: block; animation: screen-in .2s ease; }.filter-row { display: flex; gap: 7px; margin-bottom: 7px; }.filter-row button { border: 1px solid var(--line); background: transparent; padding: 6px 9px; font-size: 8px; }.filter-row button.active { border-color: var(--ink); background: var(--ink); color: var(--paper); }.goods-list { border-top: 1px solid var(--ink); }.good { display: grid; grid-template-columns: 40px 1fr 48px; gap: 7px; align-items: center; width: 100%; min-height: 75px; padding: 8px 2px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }.good > span:nth-child(2) > * { display: block; }.good b { font-size: 11px; }.good small { color: var(--muted); font-size: 7px; line-height: 1.5; }.good em { margin-top: 4px; color: var(--moss); font: normal 7px var(--mono); }.good > span:last-child { text-align: right; }.good > span:last-child strong { font: 500 14px var(--mono); }.good-icon { display: grid; place-items: center; width: 33px; height: 33px; color: white; font: 7px var(--mono); transform: rotate(45deg); }.good-icon::first-line { transform: rotate(-45deg); }.good-icon.wood { background: #6d5b43; }.good-icon.aether { background: #64818a; border-radius: 50%; }.good-icon.grain { background: #8a7945; }.good-icon.salt { background: #776f69; border-radius: 2px 50% 50%; }
.empty-panel { padding: 55px 22px; text-align: center; }.empty-panel .good-icon { margin: 0 auto 25px; }.empty-panel p { color: var(--muted); font-size: 10px; }.order-card { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; padding: 17px 5px; border-bottom: 1px solid var(--line); }.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--moss); box-shadow: 0 0 0 4px rgba(105,114,71,.12); }.order-card b,.order-card small { display: block; }.order-card b { font-size: 10px; }.order-card small { margin-top: 3px; color: var(--muted); font-size: 8px; }.order-card > strong { color: var(--moss); font: 8px var(--mono); }
.sheet-backdrop { position: fixed; z-index: 40; inset: 0; background: rgba(11,13,10,.54); opacity: 0; pointer-events: none; transition: opacity .25s; backdrop-filter: blur(2px); }.sheet-backdrop.open { opacity: 1; pointer-events: auto; }.bottom-sheet { position: fixed; z-index: 41; left: 50%; bottom: 0; width: min(100%, 430px); max-height: 84dvh; overflow-y: auto; padding: 26px 20px calc(20px + env(safe-area-inset-bottom)); background: var(--card); transform: translate(-50%, 105%); transition: transform .34s cubic-bezier(.22,.85,.25,1); border-radius: 14px 14px 0 0; box-shadow: 0 -18px 60px rgba(0,0,0,.22); }.bottom-sheet.open { transform: translate(-50%, 0); }.bottom-sheet:before { content: ""; position: absolute; width: 34px; height: 3px; left: 50%; top: 9px; transform: translateX(-50%); border-radius: 99px; background: #c4c0b6; }.sheet-close { position: absolute; right: 16px; top: 18px; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); background: transparent; }.sheet-close svg { width: 15px; height: 15px; }.bottom-sheet h2 { max-width: 300px; margin: 6px 0 8px; font-size: 31px; }.sheet-intro { max-width: 350px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.perk-options { margin-top: 19px; border-top: 1px solid var(--ink); }.perk-options button { display: grid; grid-template-columns: 47px 1fr; gap: 10px; width: 100%; padding: 14px 3px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }.perk-glyph { display: grid; place-items: center; width: 41px; height: 41px; border-radius: 50%; background: var(--ink); color: var(--acid); font: 9px var(--mono); }.perk-options b { display: block; font-size: 11px; }.perk-options p { margin: 3px 0 5px; color: var(--muted); font-size: 9px; }.perk-options em { color: var(--rust); font: normal 7px var(--mono); letter-spacing: .1em; }
.sheet-metric { margin: 22px 0 10px; padding: 13px; border: 1px solid var(--line); }.sheet-metric > span { font-size: 9px; }.sheet-metric > b { float: right; font: 12px var(--mono); }.sheet-metric > div { clear: both; height: 4px; margin: 9px 0 5px; background: var(--paper-deep); }.sheet-metric i { display: block; height: 100%; background: var(--moss); }.sheet-metric small { color: var(--muted); font-size: 8px; }.supply-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 17px; }.supply-grid div { padding: 12px; background: var(--paper-deep); }.supply-grid span, .supply-grid b { display: block; }.supply-grid span { color: var(--muted); font-size: 8px; }.supply-grid b { margin-top: 4px; font: 10px var(--mono); }.primary-button { width: 100%; min-height: 49px; border: 0; background: var(--ink); color: var(--paper); font: 500 10px var(--mono); letter-spacing: .05em; }.quantity-row { display: grid; grid-template-columns: 50px 1fr 50px; align-items: center; margin: 22px 0 12px; border: 1px solid var(--line); }.quantity-row button { min-height: 55px; border: 0; background: var(--paper-deep); font: 21px var(--display); }.quantity-row div { text-align: center; }.quantity-row span { display: block; color: var(--muted); font-size: 8px; }.quantity-row b { font: 15px var(--mono); }.order-total { display: flex; justify-content: space-between; margin-bottom: 16px; font-size: 10px; }.order-total b { font-family: var(--mono); }.order-total i { font-style: normal; }.season-stat { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: 9px; margin-top: 20px; padding: 15px; border: 1px solid var(--line); }.season-stat strong { font: 21px var(--display); }.season-stat span { color: var(--muted); font-size: 8px; }.toast { position: fixed; z-index: 60; left: 50%; bottom: calc(var(--nav-height) + 14px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100% - 32px); padding: 10px 14px; border-radius: 2px; background: var(--ink); color: var(--paper); font: 9px var(--mono); opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: .25s; box-shadow: 0 7px 25px rgba(0,0,0,.25); }.toast.show { opacity: 1; transform: translate(-50%,0); }

.siege-banner { width: 100%; border: 0; text-align: left; }
.good-icon { transform: none; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.good-icon.aether { clip-path: none; }
.good-icon.salt { clip-path: none; }

/* Brutalist game-console pass: hard geometry, exposed state, no ornamental softness. */
:root {
  --ink: #0b0c0a;
  --paper: #d7d8cd;
  --paper-deep: #bfc1b5;
  --card: #e4e5da;
  --line: rgba(11,12,10,.42);
  --muted: #51534d;
  --moss: #747e3e;
  --acid: #d8ff3e;
  --rust: #e84924;
  --gold: #d6a52e;
  --nav-height: 72px;
}

html { background: #0b0c0a; }
body { background: #0b0c0a; }
body:before { content: ""; position: fixed; z-index: 80; inset: 0; pointer-events: none; opacity: .16; background: repeating-linear-gradient(0deg, transparent 0 3px, #000 4px); mix-blend-mode: multiply; }
button { cursor: pointer; }
button:focus-visible { outline: 3px solid var(--acid); outline-offset: 2px; }
.app-shell { background-color: var(--paper); background-image: linear-gradient(rgba(11,12,10,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(11,12,10,.07) 1px, transparent 1px); background-size: 24px 24px; border-left: 2px solid var(--ink); border-right: 2px solid var(--ink); box-shadow: 14px 0 0 #20221e, -14px 0 0 #20221e; }
.topbar { min-height: 68px; padding: max(10px, env(safe-area-inset-top)) 13px 8px; border-bottom: 2px solid var(--ink); background: var(--acid); }
.brand-lockup { display: flex; align-items: center; gap: 7px; }
.brand-lockup > b { font: 700 8px/1.05 var(--mono); letter-spacing: .08em; }
.brand-lockup i { font-style: normal; color: #4c541a; }
.brand-mark { width: 26px; height: 27px; gap: 2px; padding: 3px; border: 2px solid var(--ink); background: var(--ink); }
.brand-mark span { width: 5px; background: var(--acid); border-radius: 0; }
.brand-mark span:nth-child(1) { height: 11px; }.brand-mark span:nth-child(2) { height: 19px; }.brand-mark span:nth-child(3) { height: 15px; }
.season-pill { border: 2px solid var(--ink); border-radius: 0; background: transparent; padding: 6px 8px; font-size: 8px; font-weight: 700; box-shadow: 3px 3px 0 var(--ink); }
.season-pill b { color: var(--ink); }
.pulse-dot { border-radius: 0; background: var(--rust); box-shadow: none; }
.avatar { border: 2px solid var(--ink); border-radius: 0; background: var(--ink); color: var(--acid); font-weight: 700; box-shadow: 3px 3px 0 rgba(11,12,10,.35); }
main { min-height: calc(100dvh - 68px); }
.screen { padding: 13px 12px calc(var(--nav-height) + 28px); animation: screen-in .12s steps(2,end); }
.screen-heading { min-height: 72px; padding-top: 4px; }
.screen-heading.compact { min-height: 69px; }
.eyebrow { margin-bottom: 5px; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.eyebrow:before { content: "// "; color: var(--rust); }
h1 { font-size: clamp(27px, 9vw, 38px); line-height: .88; letter-spacing: -.055em; text-transform: uppercase; }
h2 { font-size: 20px; line-height: .95; letter-spacing: -.035em; text-transform: uppercase; }
.tier-badge { padding: 7px; border: 2px solid var(--ink); background: var(--ink); color: var(--acid); font-size: 8px; font-weight: 700; box-shadow: 4px 4px 0 var(--rust); }
.run-card { height: 270px; border: 2px solid var(--ink); border-radius: 0; background: linear-gradient(#777f67 0%, #454c3c 58%, #191d17 100%); box-shadow: 6px 6px 0 var(--ink); }
.run-card:before { content: "LIVE FEED  04-B"; position: absolute; z-index: 4; right: 0; bottom: 0; padding: 4px 7px; background: var(--acid); color: var(--ink); font: 700 7px var(--mono); letter-spacing: .08em; }
.run-card:after { opacity: .75; background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(0,0,0,.2) 5px), linear-gradient(90deg, transparent 49.5%, rgba(216,255,62,.16) 50%, transparent 50.5%); }
.moon { border-radius: 0; background: var(--acid); box-shadow: 10px 10px 0 rgba(11,12,10,.2); transform: rotate(45deg); }
.tower, .keep { background: #11150e; border-width: 2px; }
.run-overlay { left: 10px; right: 10px; top: 9px; padding: 8px; border: 1px solid rgba(216,255,62,.6); background: rgba(11,12,10,.74); color: var(--acid); text-shadow: none; }
.run-overlay strong { font-size: 19px; text-transform: uppercase; }.run-overlay p, .run-stat span { color: #d7d8cd; font-size: 7px; }
.health-track { left: 10px; right: 10px; bottom: 27px; height: 7px; border: 1px solid var(--acid); background: var(--ink); }.health-track span { background: var(--acid); box-shadow: none; }
.resource-strip { margin: 13px 0 25px; border: 2px solid var(--ink); background: var(--card); box-shadow: 4px 4px 0 var(--ink); }
.resource-strip > * { border-right: 2px solid var(--ink); padding-left: 30px; }.resource-strip p { font-size: 7px; text-transform: uppercase; }.resource-strip strong { font-size: 11px; font-weight: 700; }
.resource-icon { border: 1px solid var(--ink); }.perk-alert { border-radius: 0; background: var(--rust); animation: throb .8s steps(2,end) infinite alternate; }
.section-row { margin-top: 24px; }.section-row span { font-size: 7px; text-transform: uppercase; }
.upgrade-list, .goods-list, .ledger, .perk-options { border-top: 3px solid var(--ink); }
.upgrade { min-height: 67px; grid-template-columns: 43px 1fr auto; padding: 7px 4px; border-bottom: 2px solid var(--ink); }.upgrade:active { background: var(--acid); }
.upgrade-glyph { border: 2px solid var(--ink); background: var(--paper-deep); box-shadow: 3px 3px 0 var(--ink); }.upgrade b { font-size: 10px; text-transform: uppercase; }.upgrade small { font-size: 7px; }.upgrade em { color: #4d581f; font-weight: 700; }.upgrade .cost { border: 2px solid var(--ink); background: var(--ink); color: var(--acid); font-weight: 700; }
.bottom-nav { height: calc(var(--nav-height) + env(safe-area-inset-bottom)); padding: 0 0 env(safe-area-inset-bottom); border-top: 2px solid var(--ink); background: var(--ink); backdrop-filter: none; }
.bottom-nav button { border-right: 1px solid #45483e; color: #96998d; font-size: 7px; text-transform: uppercase; }.bottom-nav button:last-child { border-right: 0; }.bottom-nav svg { width: 19px; height: 19px; margin-bottom: 5px; stroke-width: 2; }.bottom-nav button.active { background: var(--acid); color: var(--ink); }.bottom-nav button.active:before { display: none; }.nav-alert { top: 10px; right: 22px; border-radius: 0; background: var(--rust); }
.icon-button, .crest { border-width: 2px; box-shadow: 3px 3px 0 var(--ink); }.crest { color: var(--acid); }
.map-screen { padding-top: 13px; background: #aeb0a4; }.map-heading { padding: 0 12px; }.front-summary { margin: 8px 12px 0; padding: 10px; border: 2px solid var(--ink); background: var(--card); box-shadow: 4px 4px 0 var(--ink); }.front-summary strong { padding: 2px 4px; background: var(--rust); color: white; }.pressure-track { height: 7px; border: 1px solid var(--ink); background: var(--ink); }.pressure-track span { background: var(--rust); }
.map-canvas { margin-top: 12px; border-top: 2px solid var(--ink); background-color: #aeb0a4; background-image: linear-gradient(rgba(11,12,10,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(11,12,10,.13) 1px, transparent 1px); background-size: 24px 24px; }.map-canvas:after { content: "SECTOR GRID / N-12"; position: absolute; left: 8px; top: 8px; padding: 3px 5px; background: var(--ink); color: var(--acid); font: 7px var(--mono); }.map-canvas:before { border-radius: 0; background: repeating-linear-gradient(135deg, #4a4f43 0 8px, #3b4037 8px 16px); }
.route { stroke: #51554e; stroke-width: 2; }.route.active { stroke: var(--acid); stroke-width: 5; filter: drop-shadow(1px 1px 0 #0b0c0a); }.route.danger { stroke: var(--rust); }
.hold-node span { border: 2px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }.hold-node b { margin-top: 5px; padding: 2px 3px; background: var(--ink); color: var(--paper); text-shadow: none; text-transform: uppercase; }.hold-node.yours span { background: var(--ink); color: var(--acid); outline: 3px solid var(--acid); }.hold-node.yours i { border: 1px solid var(--ink); border-radius: 0; font-weight: 700; }.hold-node.lost span { background: var(--rust); color: white; opacity: 1; }
.map-key { border: 2px solid var(--ink); background: var(--card); font-size: 6px; box-shadow: 4px 4px 0 var(--ink); }.map-key i { border-radius: 0; }
.siege-banner { border: 2px solid var(--ink); padding: 17px 14px 39px; box-shadow: 5px 5px 0 var(--rust); }.siege-banner:after { border-radius: 0; transform: rotate(45deg); }.siege-banner h2 { color: var(--acid); font-size: 22px; }.live-label { display: inline-block; padding: 3px 5px; background: var(--rust); color: white; font-weight: 700; }.contribution-track { height: 7px; border: 1px solid var(--acid); background: #24271f; }
.impact-card { border: 2px solid var(--ink); background: var(--card); box-shadow: 4px 4px 0 var(--ink); }.impact-card strong { font: 32px var(--display); }.impact-ring { border-left: 2px solid var(--ink); background: conic-gradient(var(--acid) 0 84%, var(--ink) 84%); }.impact-ring:before { inset: 11px; border-radius: 0; background: var(--card); }
.watchfire { border: 2px solid var(--ink); background: var(--card); box-shadow: 3px 3px 0 var(--ink); }.watchfire em { color: var(--rust); font-weight: 700; }.member-avatar { border: 2px solid var(--ink); border-radius: 0; }.member-avatar i { border-color: var(--ink); border-radius: 0; background: var(--acid); }
.ledger > div { border-bottom: 2px solid var(--ink); }.ledger p b { text-transform: uppercase; }.ledger .accent { color: #4c571c; }
.balance-card { border: 2px solid var(--ink); background: var(--ink); box-shadow: 5px 5px 0 var(--rust); }.balance-card strong { color: var(--acid); font-size: 24px; }
.segmented { padding: 0; border: 2px solid var(--ink); background: var(--paper-deep); }.segmented button { border-right: 2px solid var(--ink); font-size: 8px; font-weight: 700; text-transform: uppercase; }.segmented button:last-child { border: 0; }.segmented button.active { background: var(--acid); box-shadow: none; }.segmented i { border-radius: 0; background: var(--rust); }
.filter-row { gap: 5px; }.filter-row button { border: 2px solid var(--ink); font-size: 7px; text-transform: uppercase; }.filter-row button.active { background: var(--ink); color: var(--acid); }
.good { min-height: 76px; border-bottom: 2px solid var(--ink); }.good:active { background: var(--acid); }.good b { font-size: 10px; text-transform: uppercase; }.good small, .good em { font-size: 7px; }.good-icon { border: 2px solid var(--ink); clip-path: none; box-shadow: 3px 3px 0 var(--ink); }.good-icon.aether, .good-icon.salt { border-radius: 0; }.order-card { border-bottom: 2px solid var(--ink); }.status-dot { border-radius: 0; background: var(--acid); box-shadow: 2px 2px 0 var(--ink); }
.sheet-backdrop { background: rgba(11,12,10,.76); backdrop-filter: none; }.bottom-sheet { padding: 28px 16px calc(18px + env(safe-area-inset-bottom)); border: 2px solid var(--ink); border-bottom: 0; border-radius: 0; background: var(--card); box-shadow: 0 -8px 0 var(--acid); transition: transform .2s steps(3,end); }.bottom-sheet:before { width: 58px; height: 5px; top: 10px; border-radius: 0; background: var(--ink); }.sheet-close { border: 2px solid var(--ink); background: var(--acid); box-shadow: 3px 3px 0 var(--ink); }.bottom-sheet h2 { font-size: 28px; text-transform: uppercase; }.sheet-intro { font-size: 9px; }
.perk-options button { border-bottom: 2px solid var(--ink); }.perk-options button:active { background: var(--acid); }.perk-glyph { border: 2px solid var(--ink); border-radius: 0; background: var(--ink); color: var(--acid); box-shadow: 3px 3px 0 var(--rust); }.perk-options b { text-transform: uppercase; }.sheet-metric, .quantity-row, .season-stat { border: 2px solid var(--ink); }.sheet-metric > div { height: 7px; border: 1px solid var(--ink); background: var(--ink); }.sheet-metric i { background: var(--acid); }.supply-grid { gap: 5px; }.supply-grid div { border: 2px solid var(--ink); }.primary-button { min-height: 52px; border: 2px solid var(--ink); background: var(--acid); color: var(--ink); font-weight: 700; text-transform: uppercase; box-shadow: 5px 5px 0 var(--ink); }.primary-button:disabled { background: var(--paper-deep); box-shadow: none; }.quantity-row button { border-right: 2px solid var(--ink); background: var(--acid); }.quantity-row button:last-child { border-right: 0; border-left: 2px solid var(--ink); }.toast { border: 2px solid var(--acid); border-radius: 0; background: var(--ink); color: var(--acid); font-weight: 700; box-shadow: 5px 5px 0 var(--rust); }

@media (min-width: 700px) { body { padding: 28px 0; }.app-shell { min-height: calc(100dvh - 56px); }.bottom-nav { bottom: 28px; }.bottom-sheet { bottom: 28px; }.toast { bottom: 115px; } }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation-duration: .01ms!important; transition-duration: .01ms!important; } }