@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;
  --bg: #090e15;
  --panel: #111a25;
  --panel-soft: #151f2c;
  --line: rgba(177, 202, 220, .1);
  --text: #eff5f7;
  --muted: #8192a1;
  --amber: #ffb649;
  --amber-strong: #ffc76b;
  --cyan: #5cd6d1;
  --red: #ff6660;
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-body); }
body { min-height: 100dvh; background: radial-gradient(ellipse at 50% -30%, #1b2c3c 0, #0b121c 47%, var(--bg) 78%); }
button { color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.app-shell { width: min(100%, 620px); min-height: 100dvh; margin: 0 auto; padding: 0 18px 20px; overflow: hidden; position: relative; container-type:inline-size; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: relative; z-index: 2; }
.brand-lockup { display: flex; align-items: center; gap: 10px; }
.brand-mark { height: 31px; width: 31px; border: 1px solid rgba(255,182,73,.55); border-radius: 50%; display: grid; place-items: center; position: relative; box-shadow: 0 0 18px rgba(255,182,73,.1); }
.brand-mark::before { content: ''; width: 17px; height: 17px; border: 2px solid var(--amber); border-radius: 50%; opacity: .8; }
.brand-mark span { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
.eyebrow { margin: 0; color: #8798a7; font-size: 9px; letter-spacing: .19em; font-weight: 700; }
.brand-name { margin-top: 1px; font-family: var(--font-display); font-size: 20px; line-height: 1; font-weight: 800; letter-spacing: .04em; }
.brand-name span { color: var(--amber); }
.top-resources { display: flex; align-items: center; gap: 7px; }
.resource-chip { display: flex; align-items: center; gap: 6px; min-width: 58px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: rgba(16,25,36,.8); font-size: 12px; }
.resource-glyph { display: block; width: 17px; height: 15px; flex: 0 0 auto; }
.bag-jump-button { width: 31px; height: 31px; flex: 0 0 auto; border: 1px solid rgba(92,214,209,.23); border-radius: 7px; background: rgba(92,214,209,.08); color: var(--cyan); font-size: 19px; line-height: 1; }
.screen { position: relative; }
.is-hidden { display: none !important; }
.home-screen { padding-top: 16px; }
.hero-panel { height: 330px; position: relative; overflow: hidden; border: 1px solid rgba(180,205,220,.13); border-radius: 15px; background: linear-gradient(112deg, rgba(20,32,43,.98) 0%, rgba(14,24,34,.93) 52%, rgba(17,27,37,.86) 100%); isolation: isolate; }
.hero-panel::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 72% 53%, rgba(50,126,129,.19), transparent 36%), linear-gradient(90deg, rgba(7,12,19,.23), transparent 58%); }
.hero-grid { position: absolute; inset: 0; opacity: .24; background-image: linear-gradient(rgba(117,160,175,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(117,160,175,.11) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(90deg, transparent, #000 56%, #000); }
.hero-copy { position: relative; z-index: 1; width: 63%; padding: 28px 0 20px 22px; }
.hero-kicker { display: flex; align-items: center; gap: 7px; color: #b8c6ca; font-size: 8px; letter-spacing: .15em; font-weight: 700; }
.hero-kicker i, .persist-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px rgba(92,214,209,.75); }
h1 { margin: 12px 0 7px; font-family: var(--font-display); font-size: clamp(48px, 13vw, 66px); font-weight: 900; line-height: .78; letter-spacing: -.015em; text-shadow: 0 7px 24px rgba(0,0,0,.35); }
h1 em { color: var(--amber); font-style: normal; }
.hero-description { max-width: 245px; margin: 13px 0 17px; color: #a8b6be; font-size: 11px; line-height: 1.55; }
.primary-button { display: flex; align-items: center; justify-content: space-between; gap: 15px; border: 0; border-radius: 7px; padding: 13px 15px; background: var(--amber); color: #1a1a18; font-family: var(--font-display); font-size: 16px; line-height: 1; letter-spacing: .04em; font-weight: 800; box-shadow: 0 5px 20px rgba(255,182,73,.18); transition: transform .15s, background .15s, box-shadow .15s; }
.primary-button:hover { background: var(--amber-strong); box-shadow: 0 7px 22px rgba(255,182,73,.27); transform: translateY(-1px); }
.primary-button:active { transform: translateY(1px); }
.start-button { min-width: 202px; }
.button-arrow { font-family: var(--font-body); font-size: 16px; }
.start-hint { margin: 8px 0 0 2px; color: #718390; font-size: 8px; letter-spacing: .16em; font-weight: 700; }
.hero-corner-label { position: absolute; left: 21px; bottom: 14px; color: #5d707d; font-size: 7px; font-weight: 700; letter-spacing: .17em; }
.hero-corner-label span { color: var(--amber); }
.hero-art { position: absolute; width: 228px; height: 228px; right: -17px; top: 50px; border-radius: 50%; background: radial-gradient(circle, rgba(15,28,37,.05) 0 35%, rgba(9,18,27,.23) 64%, transparent 72%); }
.hero-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(92,214,209,.15); inset: 10px; }
.ring-two { inset: 32px; border-style: dashed; border-color: rgba(255,182,73,.17); }
.ring-three { inset: 68px; border-color: rgba(92,214,209,.2); }
.hero-player { position: absolute; top: 94px; left: 94px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #d9ffff 0 10%, #66d7d1 12% 32%, #247a7c 34% 63%, rgba(39,98,103,.12) 66%); border: 1px solid rgba(164,255,239,.7); box-shadow: 0 0 20px rgba(74,219,214,.45); z-index: 2; }
.hero-player span { width: 6px; height: 6px; background: #fff; border-radius: 50%; box-shadow: 0 0 9px #fff; }
.hero-wall { position: absolute; width: 27px; height: 8px; border: 1px solid rgba(255,202,123,.8); border-radius: 3px; background: linear-gradient(#d89845, #684a32); box-shadow: 0 0 12px rgba(255,176,74,.22); z-index: 1; }
.wall-a { top: 19px; left: 100px; }.wall-b { right: 16px; top: 109px; transform: rotate(90deg); }.wall-c { bottom: 20px; left: 100px; }.wall-d { left: 17px; top: 109px; transform: rotate(90deg); }
.hero-drone { position: absolute; display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid rgba(92,214,209,.8); border-radius: 5px; background: #173537; color: #a7fbf1; font-size: 11px; box-shadow: 0 0 13px rgba(92,214,209,.42); z-index: 2; }
.drone-a { top: 70px; right: 41px; }.drone-b { left: 34px; bottom: 67px; }
.hero-enemy { position: absolute; width: 14px; height: 14px; background: #bb534f; border: 1px solid #ff8170; transform: rotate(45deg); box-shadow: 0 0 14px rgba(255,93,75,.35); }
.enemy-a { top: 18px; right: 47px; }.enemy-b { bottom: 33px; right: 14px; width: 10px; height: 10px; }.enemy-c { left: 33px; top: 34px; width: 10px; height: 10px; }
.hero-beam { position: absolute; height: 1px; width: 70px; background: linear-gradient(90deg, rgba(97,234,225,.65), transparent); transform-origin: left center; z-index: 1; }
.beam-a { top: 100px; left: 123px; transform: rotate(-35deg); }.beam-b { top: 122px; left: 98px; width: 50px; transform: rotate(140deg); }
.progress-strip { height: 64px; margin-top: 12px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(100deg, rgba(20,31,43,.85), rgba(16,25,35,.65)); }
.progress-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; border: 1px solid rgba(255,182,73,.24); background: rgba(255,182,73,.08); color: var(--amber); font-size: 22px; }
.progress-copy { display: flex; flex: 1; flex-direction: column; gap: 3px; }
.progress-copy span { color: #7d8d99; font-size: 8px; letter-spacing: .16em; font-weight: 700; }
.progress-copy b { font-size: 12px; font-weight: 600; }
.progress-mark { color: rgba(255,182,73,.7); font-family: var(--font-display); font-size: 29px; }
.workshop-section { padding: 23px 0 0; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 11px; }
.section-heading h2 { margin: 4px 0 0; font-family: var(--font-display); font-size: 25px; line-height: 1; letter-spacing: .02em; }
.persist-tag { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border: 1px solid rgba(92,214,209,.16); border-radius: 5px; color: #91c9c6; font-size: 7px; letter-spacing: .1em; font-weight: 700; }
.persist-tag i { width: 5px; height: 5px; }
.upgrade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.upgrade-card { min-width: 0; min-height: 77px; padding: 10px 9px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(150deg, rgba(19,29,41,.97), rgba(15,23,33,.93)); }
.upgrade-icon { flex: 0 0 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; font-family: var(--font-display); font-size: 21px; font-weight: 700; }
.icon-damage { color: #ff9d61; background: rgba(255,117,66,.1); }.icon-speed { color: #82d7ff; background: rgba(89,178,231,.1); }.icon-health { color: #ff8083; background: rgba(255,102,106,.1); }.icon-move { color: #b5a2ff; background: rgba(164,135,255,.1); }
.icon-wall { color: var(--amber); background: rgba(255,182,73,.1); }
.icon-magnet { color: #8be1d9; background: rgba(92,214,209,.1); }
.icon-circle { color: #ffc671; background: rgba(255,182,73,.1); }
.wall-upgrade-card { grid-column: 1 / -1; }
.upgrade-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.upgrade-meta span { color: #738493; font-size: 7px; letter-spacing: .13em; font-weight: 700; }
.upgrade-meta b { overflow: hidden; color: #d9e1e4; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.upgrade-meta small { color: #748592; font-size: 8px; }
.upgrade-action { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 36px; }
.upgrade-action > span { color: var(--amber); font-size: 9px; font-weight: 700; white-space: nowrap; }
.upgrade-action button { width: 25px; height: 22px; border: 1px solid rgba(255,182,73,.38); border-radius: 5px; background: rgba(255,182,73,.11); color: var(--amber); font-size: 16px; line-height: 1; }
.upgrade-action button:active { background: rgba(255,182,73,.3); }
.upgrade-action button:disabled { opacity: .32; cursor: default; }
.upgrade-action small { color: #687986; font-size: 7px; white-space: nowrap; }
.base-note-row { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.base-note { display: flex; align-items: center; gap: 7px; color: #748490; font-size: 8px; line-height: 1.35; }
.note-dot { width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: var(--cyan); }
.secondary-button { border: 1px solid rgba(92,214,209,.32); border-radius: 6px; padding: 7px 8px; background: rgba(92,214,209,.08); color: #98e1db; font-family: var(--font-display); font-size: 10px; font-weight: 700; white-space: nowrap; }
.secondary-button:disabled { opacity: .4; }
.home-footer { display: flex; justify-content: space-between; padding: 8px 0 2px; border-top: 1px solid var(--line); color: #52616d; font-size: 7px; letter-spacing: .14em; font-weight: 700; }
.weapon-section { padding: 19px 0 13px; }
.bag-resource-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; margin: 10px 0 16px; }
.bag-resource { display: flex; min-width: 0; min-height: 65px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(145deg, rgba(19,29,41,.94), rgba(13,21,30,.92)); }
.resource-icon { display: block; width: 29px; height: 25px; overflow: visible; fill: none; stroke: #91a3a9; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.weapon-count-icon path:first-child { fill: rgba(92,214,209,.2); stroke: #a8e9e4; }
.weapon-count-icon path + path { fill: none; stroke: #f0fffa; stroke-width: 1.15; }
.credit-icon ellipse { fill: rgba(255,190,86,.22); stroke: #f0bd69; }
.credit-icon path { fill: none; stroke: #f0bd69; }
.scrap-icon path:first-child { fill: rgba(137,163,169,.32); stroke: #afc3c6; }
.scrap-icon path + path { fill: none; stroke: #82d5cf; stroke-width: 1.2; }
.bag-resource.core-resource { border-color: rgba(196,151,255,.25); background: linear-gradient(145deg, rgba(45,31,64,.8), rgba(13,21,30,.95)); }
.bag-icon { stroke: #9ec8c5; }
.bag-resource.core-resource b { color: #c99cff; }
.bag-resource small { min-height: 13px; color: #71828e; font-size: 6px; font-weight: 700; letter-spacing: .08em; line-height: 1.15; text-align: center; }
.bag-resource b { color: #e6eff0; font-size: 11px; }
.bag-weapons-heading { align-items: center; margin: 0 0 9px; }
.bag-weapons-heading h3 { margin: 4px 0 0; font-family: var(--font-display); font-size: 20px; line-height: 1; }
.bag-weapons-subtitle { display: block; margin-top: 4px; color: #71828e; font-size: 7px; line-height: 1.35; }
.weapon-bag-actions { display: flex; flex: 0 0 auto; gap: 5px; }
.weapon-bag-actions button { min-height: 30px; border: 1px solid rgba(255,182,73,.34); border-radius: 5px; padding: 6px 7px; background: rgba(255,182,73,.09); color: #ffd28b; font-family: var(--font-display); font-size: 9px; font-weight: 900; letter-spacing: .04em; white-space: nowrap; }
.weapon-bag-actions .merge-all-button { border-color: rgba(92,214,209,.28); background: rgba(92,214,209,.08); color: #9ce5de; }
.weapon-bag-actions button:disabled { opacity: .38; cursor: default; }
.weapon-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.weapon-card { position: relative; display: flex; min-width: 0; aspect-ratio: 1 / 1; flex-direction: column; justify-content: center; overflow: hidden; padding: 5px; border: 2px solid color-mix(in srgb,var(--weapon-rank,#7ddbcf) 78%,transparent); border-radius: 8px; background: radial-gradient(ellipse at 50% 48%,color-mix(in srgb,var(--weapon-rank,#7ddbcf) 13%,transparent),rgba(11,19,28,.96) 72%); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--weapon-rank,#7ddbcf) 22%,transparent); cursor: default; transition: border-color .16s, transform .16s, box-shadow .16s; }
.weapon-card.is-equipped { box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--weapon-rank,#7ddbcf) 25%,transparent),0 0 0 1px rgba(92,214,209,.34),0 0 10px rgba(92,214,209,.12); }
.weapon-card.is-fusion-target { cursor: pointer; }
.weapon-card.is-fusion-target:active { transform: scale(.97); }
.weapon-card.is-selected { border-color: rgba(255,206,118,.95); box-shadow: inset 0 0 22px rgba(255,182,73,.12),0 0 0 2px rgba(255,182,73,.34); }
.weapon-card:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.weapon-card-name { display: block; overflow: hidden; margin-top: 1px; color: #e2eeea; font-family: var(--font-display); font-size: 9px; line-height: 1.1; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.weapon-card-meta { display: flex; min-width: 0; min-height: 11px; align-items: center; justify-content: center; gap: 4px; color: #9bb0ae; font-size: 7px; font-weight: 800; line-height: 1; white-space: nowrap; }
.weapon-card-meta > b { overflow: hidden; text-overflow: ellipsis; }
.weapon-card-meta i { overflow: hidden; color: #9ae9db; font-size: 5px; font-style: normal; letter-spacing: .03em; text-overflow: ellipsis; }
.weapon-card .weapon-card-rank { position: absolute; z-index: 1; top: 4px; right: 4px; display: grid; min-width: 20px; height: 17px; place-items: center; border: 1px solid currentColor; border-radius: 5px; padding: 0 3px; font-family: var(--font-display); font-size: 8px; font-weight: 900; line-height: 1; }
.weapon-icon { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid rgba(92,214,209,.22); border-radius: 9px; background: rgba(92,214,209,.08); color: var(--cyan); font-size: 24px; }
.weapon-card h3 { margin: 2px 0 1px; font-family: var(--font-display); font-size: 18px; line-height: 1; }
.weapon-card-heading small { color: #7b8d98; font-size: 8px; }
.weapon-upgrade-list { display: grid; gap: 5px; }
.weapon-upgrade-row { min-height: 39px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 7px; border: 1px solid rgba(177,202,220,.07); border-radius: 6px; background: rgba(6,12,19,.34); }
.weapon-upgrade-row > span { display: flex; flex-direction: column; gap: 2px; }
.weapon-upgrade-row b { color: #cbd6dc; font-size: 9px; font-weight: 600; }
.weapon-upgrade-row small { color: #71828e; font-size: 7px; }
.weapon-upgrade-row button, .weapon-unlock { display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid rgba(255,182,73,.3); border-radius: 5px; padding: 5px 7px; background: rgba(255,182,73,.09); color: var(--amber); font-size: 10px; font-weight: 700; white-space: nowrap; }
.weapon-upgrade-row button small { color: #b89762; font-size: 7px; }
.weapon-upgrade-row button:disabled, .weapon-unlock:disabled { opacity: .36; cursor: default; }
.weapon-lock-copy { margin: 0 0 10px; color: #95a4ad; font-size: 10px; line-height: 1.45; }
.weapon-unlock { width: 100%; min-height: 34px; font-family: var(--font-display); font-size: 13px; }
.bag-note { display: grid; gap: 4px; margin: -7px 0 12px; padding: 9px 10px; border: 1px solid rgba(177,202,220,.08); border-radius: 8px; background: rgba(7,13,19,.34); color: #85919d; font-size: 8px; line-height: 1.5; }
.bag-note p { margin: 0; }
.bag-note b { color: #b6c5ca; }
.weapon-slot-panel { display: grid; gap: 6px; margin: 0 0 16px; }
.equipped-slot-row, .slot-unlock-row { display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 7px 9px; border: 1px solid rgba(92,214,209,.17); border-radius: 8px; background: linear-gradient(100deg, rgba(92,214,209,.06), rgba(14,22,31,.92)); }
.slot-number { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; border: 1px solid rgba(92,214,209,.35); border-radius: 7px; background: rgba(92,214,209,.11); color: var(--cyan); font-family: var(--font-display); font-size: 15px; font-weight: 800; }
.secondary-slot-number { border-color: rgba(181,156,255,.35); background: rgba(181,156,255,.1); color: #c9acff; }
.equipped-slot-row > div, .slot-unlock-row > div:first-child { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.equipped-slot-row small, .slot-unlock-row small { color: #748590; font-size: 7px; line-height: 1.4; letter-spacing: .08em; }
.equipped-slot-row b, .slot-unlock-row b { color: #d9e6e8; font-size: 10px; }
.slot-check { color: var(--cyan); font-size: 12px; }
.slot-unlock-row { border-color: rgba(255,182,73,.18); background: linear-gradient(100deg, rgba(255,182,73,.06), rgba(14,22,31,.92)); }
.slot-unlock-actions { display: flex; flex: 0 0 auto; gap: 5px; }
.slot-unlock-actions button { border: 1px solid rgba(255,182,73,.36); border-radius: 5px; padding: 7px 8px; background: rgba(255,182,73,.1); color: var(--amber); font-family: var(--font-display); font-size: 10px; font-weight: 800; white-space: nowrap; }
.slot-unlock-actions button:disabled { opacity: .36; }
.crate-rule-note { margin: 0 0 8px; color: #81919a; font-size: 8px; line-height: 1.45; }
.crate-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; overflow-x: auto; padding: 1px 1px 5px; scrollbar-color: rgba(92,214,209,.2) transparent; }
.crate-card { --crate-accent:#79e0d0; position: relative; display: flex; min-width: 0; flex-direction: column; align-items: center; overflow: hidden; padding: 6px 7px 8px; border: 1px solid color-mix(in srgb,var(--crate-accent) 32%,rgba(190,220,231,.13)); border-radius: 10px; background: radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--crate-accent) 16%,transparent),transparent 61%),linear-gradient(155deg,rgba(24,35,44,.98),rgba(10,17,25,.99)); box-shadow: inset 0 1px 0 rgba(255,255,255,.07),0 7px 16px rgba(0,0,0,.2); text-align: center; }
.crate-card::before { position:absolute; z-index:0; top:0; right:12%; left:12%; height:2px; border-radius:0 0 4px 4px; background:linear-gradient(90deg,transparent,var(--crate-accent),transparent); opacity:.85; content:''; }
.crate-card::after { position:absolute; z-index:0; top:14px; left:50%; width:88px; height:74px; border-radius:50%; background:radial-gradient(ellipse,rgba(195,166,116,.12),transparent 72%); filter:blur(8px); transform:translateX(-50%); pointer-events:none; content:''; }
.crate-svg { position:relative; z-index:1; display:block; width:100%; height:110px; margin:-6px 0 -3px; overflow:visible; filter:drop-shadow(0 8px 8px rgba(0,0,0,.62)) drop-shadow(0 2px 4px rgba(164,144,108,.16)); transition:transform .18s ease,filter .18s ease; }
.crate-card:hover .crate-svg { transform:translateY(-3px) scale(1.045); filter:drop-shadow(0 11px 9px rgba(0,0,0,.66)) drop-shadow(0 3px 5px rgba(187,163,119,.2)); }
.crate-card > b { position:relative; z-index:1; margin:4px 0 7px; color:color-mix(in srgb,var(--crate-accent) 74%,#f1e8d8); font-family:var(--font-display); font-size:10px; line-height:1.2; }
.crate-guarantees { position:relative; z-index:1; display:grid; width:100%; align-self:stretch; gap:3px; margin:0 0 7px; }
.crate-guarantee-row { display:grid; min-width:0; grid-template-columns:15px minmax(0,1fr); align-items:start; gap:4px; color:#aab8bd; font-size:7px; font-weight:750; letter-spacing:0; line-height:1.35; text-align:left; white-space:normal; }
.crate-guarantee-row > i { display:grid; width:15px; height:15px; place-items:center; border:1px solid rgba(131,215,237,.36); border-radius:50%; background:rgba(131,215,237,.1); color:#83d7ed; font-family:var(--font-display); font-size:8px; font-style:normal; font-weight:900; line-height:1; }
.crate-guarantee-row > span { min-width:0; padding-top:1px; overflow-wrap:anywhere; }
.crate-guarantee-row > span b { color:#f0f5f6; font-family:var(--font-display); font-size:10px; font-weight:900; }
.crate-guarantee-a > i { border-color:rgba(240,201,112,.36); background:rgba(240,201,112,.1); color:#f0c970; }
.crate-open-actions { position:relative; z-index:1; display:grid; width:100%; gap:4px; }
.crate-stage-lock { position:relative; z-index:1; color:#c0cbd0; font-family:var(--font-display); font-size:7px; font-weight:850; line-height:1.2; letter-spacing:.035em; }
.crate-card.is-stage-locked .crate-svg { filter:grayscale(.62) saturate(.55); opacity:.56; }
.crate-card.is-stage-locked > b { color:#c0cbd0; }
.crate-card button { position:relative; z-index:1; width:100%; min-height:31px; border:1px solid color-mix(in srgb,var(--crate-accent) 45%,transparent); border-radius:6px; padding:5px 3px; background:linear-gradient(135deg,color-mix(in srgb,var(--crate-accent) 15%,rgba(9,15,21,.75)),rgba(9,15,21,.78)); color:var(--crate-accent); font-family:var(--font-display); font-size:9px; font-weight:900; white-space:nowrap; transition:background .15s,transform .15s; }
.crate-open-actions button { min-height:29px; font-size:8px; }
.crate-price-tag { display:flex; align-items:center; justify-content:center; gap:4px; min-height:18px; color:#bce5df; font-size:7px; font-weight:900; letter-spacing:.04em; }
.crate-price-tag svg { width:13px; height:12px; }
.core-pack-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0 0 10px; }
.core-pack-card { display:flex; min-height:100px; align-items:center; justify-content:center; gap:4px; flex-direction:column; padding:9px 8px; border:1px solid rgba(141,192,194,.2); border-radius:9px; background:linear-gradient(150deg,rgba(27,43,54,.96),rgba(11,19,28,.98)); box-shadow:inset 0 1px rgba(255,255,255,.035),0 5px 12px rgba(0,0,0,.12); }
.core-pack-icon { width:29px; height:25px; filter:drop-shadow(0 0 5px rgba(92,214,209,.28)); }
.core-pack-amount { color:#c9f2ec; font-size:16px; font-weight:950; line-height:1; font-variant-numeric:tabular-nums; }
.core-pack-price { width:62%; margin-top:5px; padding-top:7px; border-top:1px solid rgba(255,210,116,.22); color:#ffd274; font-size:13px; font-weight:950; line-height:1; text-align:center; font-variant-numeric:tabular-nums; }
.crate-card button:active:not(:disabled) { transform:translateY(1px) scale(.985); background:color-mix(in srgb,var(--crate-accent) 22%,rgba(9,15,21,.75)); }
.mini-core-icon { display: inline-block; width: 10px; height: 10px; vertical-align: -1px; fill: rgba(177,121,255,.3); stroke: #d4aaff; stroke-width: 1.2; stroke-linejoin: round; }
.crate-card button:disabled { opacity: .34; }
.crate-open-choice-overlay { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:18px; background:rgba(3,8,13,.78); backdrop-filter:blur(8px); }
.crate-open-choice-sheet { width:min(360px,100%); padding:17px; border:1px solid color-mix(in srgb,var(--crate-choice-accent,#72dfc9) 40%,rgba(190,220,231,.16)); border-radius:13px; background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--crate-choice-accent,#72dfc9) 12%,transparent),transparent 70%),linear-gradient(155deg,rgba(19,29,39,.99),rgba(7,13,20,.99)); box-shadow:0 18px 60px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.07); }
.crate-open-choice-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:15px; }
.crate-open-choice-header .eyebrow { margin:0 0 3px; color:var(--crate-choice-accent,#72dfc9); font-size:7px; }
.crate-open-choice-header h2 { margin:0; color:#edf5f6; font-family:var(--font-display); font-size:21px; line-height:1; }
.crate-open-choice-header > div > b { display:block; margin-top:6px; color:var(--crate-choice-accent,#72dfc9); font-family:var(--font-display); font-size:13px; }
.crate-choice-guarantees { margin-top:8px; }
.crate-open-choice-header .crate-choice-guarantees .crate-guarantees { width:auto; gap:5px; margin:0; }
.crate-open-choice-header .crate-guarantee-row { grid-template-columns:18px minmax(0,1fr); gap:6px; font-size:9px; line-height:1.4; }
.crate-open-choice-header .crate-guarantee-row > i { width:18px; height:18px; font-size:9px; }
.crate-open-choice-header .crate-guarantee-row > span { padding-top:2px; }
.crate-open-choice-header .crate-guarantee-row > span b { font-size:11px; }
.crate-open-choice-close { flex:0 0 auto; width:29px; height:29px; border:1px solid rgba(188,210,219,.18); border-radius:7px; background:rgba(255,255,255,.04); color:#c7d3d7; font-size:20px; line-height:1; }
.crate-open-choice-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.crate-open-choice-option { display:flex; min-width:0; min-height:66px; align-items:center; justify-content:space-between; gap:8px; border:1px solid color-mix(in srgb,var(--crate-choice-accent,#72dfc9) 42%,transparent); border-radius:9px; padding:10px 12px; background:linear-gradient(145deg,color-mix(in srgb,var(--crate-choice-accent,#72dfc9) 13%,rgba(9,15,21,.95)),rgba(8,14,21,.97)); color:#f1f6f6; box-shadow:inset 0 1px rgba(255,255,255,.055); }
.crate-open-choice-option > span { display:flex; align-items:center; color:var(--crate-choice-accent,#72dfc9); font-family:var(--font-display); font-weight:900; }
.crate-open-choice-option .crate-choice-count { flex-direction:column; align-items:flex-start; gap:2px; color:#f1f6f6; }
.crate-open-choice-option .crate-choice-count b { font-size:25px; line-height:.95; }
.crate-open-choice-option .crate-choice-count small { color:#9dafb3; font-size:7px; font-weight:800; letter-spacing:.08em; }
.crate-open-choice-option .crate-choice-price { gap:5px; font-size:13px; }
.crate-open-choice-option .mini-core-icon { width:16px; height:16px; }
.crate-open-choice-option:disabled { opacity:.34; cursor:not-allowed; }
.crate-open-choice-option:active:not(:disabled) { transform:translateY(1px); }
.crate-card-short { border-color:rgba(224,237,244,.58); background:radial-gradient(ellipse at 50% 35%,rgba(215,231,239,.22),transparent 61%),linear-gradient(155deg,rgba(30,39,48,.99),rgba(10,17,25,.99)); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 7px 18px rgba(0,0,0,.22),0 0 15px rgba(214,231,240,.1); }
.crate-card-short::before { height:3px; background:linear-gradient(90deg,transparent,#f5f9fc,#c8d6df,transparent); opacity:1; }
.crate-card-short > b { color:#eef5f8; text-shadow:0 0 10px rgba(210,230,240,.3); }
.crate-card-short .crate-svg { filter:drop-shadow(0 8px 8px rgba(0,0,0,.62)) drop-shadow(0 2px 4px rgba(190,197,185,.2)); }
.crate-card-short button { border-color:rgba(220,235,243,.62); background:linear-gradient(135deg,rgba(198,216,226,.2),rgba(33,44,54,.78)); color:#eaf3f7; }
.crate-drop-label { min-height: 14px; margin: 3px 0 5px; color: #a8efe1; font-size: 9px; font-weight: 700; letter-spacing: .05em; }
.crate-drop-label:not(:empty) { margin: 6px 0 9px; padding: 8px 9px; border: 1px solid rgba(92,214,209,.2); border-radius: 7px; background: rgba(24,65,64,.22); line-height: 1.45; }
.weapon-art { display: grid; flex: 0 0 auto; width: 100%; height: 48px; margin: 9px 0 3px; place-items: center; overflow: visible; border-radius: 6px; background: radial-gradient(ellipse at 50% 58%,rgba(92,214,209,.075),rgba(5,11,16,.08) 70%); }
.weapon-svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 3px rgba(0,0,0,.55)); }
.weapon-detail-overlay { filter: drop-shadow(0 0 2px rgba(104,222,213,.11)); }
.slot-locked-note { display: flex; flex: 1; min-height: 30px; align-items: center; justify-content: center; padding: 2px 4px; border: 1px dashed rgba(164,177,185,.15); border-radius: 5px; color: #71818c; font-size: 7px; font-weight: 800; text-align: center; }
.weapon-card-heading .rank-badge { margin-left: auto; display: grid; place-items: center; min-width: 32px; height: 32px; border: 1px solid rgba(255,182,73,.32); border-radius: 8px; background: rgba(255,182,73,.1); color: var(--amber); font-family: var(--font-display); font-size: 16px; font-weight: 900; }
.rank-badge.rank-S { border-color: rgba(255,128,92,.5); background: rgba(255,128,92,.12); color: #ff9d75; }
.rank-badge.rank-Splus, .rank-badge.rank-SSplus { border-color: rgba(199,143,255,.5); background: rgba(176,114,255,.13); color: #d0a8ff; box-shadow: 0 0 12px rgba(176,114,255,.12); }
.weapon-stat-line { display: grid; grid-template-columns: repeat(4,1fr); gap: 3px; padding: 8px 4px; border-top: 1px solid rgba(177,202,220,.08); border-bottom: 1px solid rgba(177,202,220,.08); }
.weapon-stat-line span { display: flex; flex-direction: column; gap: 3px; color: #788994; font-size: 6px; font-weight: 700; letter-spacing: .09em; }
.weapon-stat-line b { color: #d9e5e8; font-size: 9px; letter-spacing: 0; white-space: nowrap; }
.weapon-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.weapon-action-button { min-width: 0; min-height: 30px; border: 1px solid rgba(92,214,209,.3); border-radius: 5px; background: rgba(92,214,209,.08); color: #9ee9e1; font-family: var(--font-display); font-size: 10px; font-weight: 800; }
.weapon-action-button.merge-button { border-color: rgba(255,182,73,.3); background: rgba(255,182,73,.08); color: var(--amber); }
.weapon-action-button.merge-button { grid-column: 1 / -1; }
.weapon-action-button:disabled { opacity: .34; cursor: default; }
.equipped-label { flex: 1; align-self: center; color: var(--cyan); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-align: center; }
.weapon-card-help { display: block; margin-top: 6px; color: #687b87; font-size: 7px; }
.weapon-select-hint { display: block; margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(177,202,220,.08); color: #91aaa9; font-size: 8px; font-weight: 800; letter-spacing: .13em; text-align: center; }
.weapon-card.is-selected .weapon-select-hint { color: var(--amber); }
.weapon-fusion { margin-top: 11px; }
.weapon-fusion-panel { padding: 13px; border: 1px solid rgba(255,182,73,.23); border-radius: 12px; background: radial-gradient(ellipse at 50% 31%, rgba(104,75,35,.2), transparent 48%), linear-gradient(155deg, rgba(23,31,41,.98), rgba(11,18,27,.98)); box-shadow: inset 0 0 28px rgba(255,182,73,.025); }
.fusion-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fusion-heading h3 { margin: 3px 0 0; font-family: var(--font-display); font-size: 22px; line-height: 1; }
.fusion-grade { flex: 0 0 auto; padding: 6px 8px; border: 1px solid rgba(255,182,73,.25); border-radius: 7px; background: rgba(255,182,73,.07); color: #f2d49e; font-family: var(--font-display); font-size: 14px; font-weight: 900; }
.fusion-grade i { margin: 0 3px; color: var(--amber); font-style: normal; }
.fusion-intro { margin: 8px 0 0; color: #8999a2; font-size: 9px; line-height: 1.5; }
.fusion-chamber { position: relative; display: flex; min-height: 146px; margin: 12px 0 13px; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(92,214,209,.16); border-radius: 9px; background: radial-gradient(ellipse at 50% 47%, rgba(50,120,120,.17), rgba(5,11,17,.45) 67%); }
.fusion-cube-frame { position: absolute; width: 102px; height: 102px; border: 1px solid rgba(92,214,209,.32); border-radius: 14px; transform: rotate(45deg) scaleY(.76); box-shadow: 0 0 19px rgba(92,214,209,.09), inset 0 0 15px rgba(92,214,209,.05); }
.fusion-cube-frame::before, .fusion-cube-frame::after { position: absolute; content: ''; inset: 10px; border: 1px solid rgba(92,214,209,.2); border-radius: 10px; }
.fusion-cube-frame::before { transform: translate(-9px,-9px); }
.fusion-cube-frame::after { transform: translate(9px,9px); }
.fusion-cube-frame i { position: absolute; z-index: 1; top: 50%; left: 50%; width: 126px; height: 1px; background: rgba(92,214,209,.2); transform: translate(-50%,-50%) rotate(45deg); }
.fusion-cube-frame i:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.fusion-cube-frame i:nth-child(n+3) { display: none; }
.fusion-gun-art { position: relative; z-index: 1; display: grid; width: min(78%, 280px); height: 74px; place-items: center; }
.fusion-gun-art .weapon-svg { filter: drop-shadow(0 0 10px rgba(92,214,209,.26)); }
.fusion-chamber > b, .fusion-chamber > small { position: relative; z-index: 1; }
.fusion-chamber > b { margin-top: 1px; color: #e9f0ed; font-family: var(--font-display); font-size: 16px; letter-spacing: .06em; }
.fusion-chamber > small { margin-top: 2px; color: var(--cyan); font-size: 7px; font-weight: 800; letter-spacing: .16em; }
.fusion-copy-heading { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; color: #99a9ae; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.fusion-copy-heading span { color: var(--amber); }
.fusion-copy-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.fusion-copy { display: flex; min-width: 0; min-height: 95px; flex-direction: column; align-items: center; justify-content: center; padding: 5px 3px; border: 1px dashed rgba(177,202,220,.17); border-radius: 7px; background: rgba(4,10,15,.38); text-align: center; }
.fusion-copy.is-present { border-style: solid; border-color: rgba(92,214,209,.24); background: rgba(30,68,66,.18); }
.fusion-copy.is-selected-copy { border-color: rgba(255,182,73,.48); background: rgba(67,48,25,.18); }
.fusion-copy-art { display: grid; width: 100%; height: 50px; place-items: center; overflow: hidden; }
.fusion-copy-art .weapon-svg { width: 100%; height: 100%; }
.fusion-copy:not(.is-present) .fusion-copy-art { color: #61717a; }
.fusion-plus { font-size: 26px; line-height: 1; }
.fusion-copy > b { max-width: 100%; margin-top: 2px; color: #a9c2c0; font-size: 6px; letter-spacing: .08em; }
.fusion-copy.is-missing > b { color: #89959a; }
.fusion-copy > small { max-width: 100%; margin-top: 3px; overflow: hidden; color: #75858b; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.fusion-copy-button { width: 100%; color: inherit; font: inherit; cursor: pointer; }
.fusion-copy-button.can-add { border-style: solid; border-color: rgba(92,214,209,.36); background: rgba(30,68,66,.12); }
.fusion-copy-button.can-add:hover { border-color: rgba(92,214,209,.75); background: rgba(30,86,81,.23); }
.fusion-copy-button:disabled { opacity: .62; cursor: default; }
.fusion-help { min-height: 27px; margin: 8px 0; color: #9ca9a9; font-size: 8px; line-height: 1.45; text-align: center; }
.fusion-stat-preview { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px 9px; margin: 9px 0; padding: 8px 10px; border: 1px solid rgba(123, 205, 218, .16); border-radius: 8px; background: rgba(5, 13, 19, .52); color: #c6d7d9; font-size: 9px; line-height: 1.35; }
.fusion-stat-preview b { color: #85dce6; font-size: 8px; letter-spacing: .06em; }
.fusion-stat-preview span { white-space: nowrap; }
.fusion-stat-preview i { color: #f3bd58; font-style: normal; }
.fusion-button { width: 100%; min-height: 39px; border: 1px solid rgba(255,182,73,.43); border-radius: 6px; background: linear-gradient(110deg, rgba(255,182,73,.2), rgba(255,182,73,.08)); color: #ffd38d; font-family: var(--font-display); font-size: 14px; font-weight: 900; letter-spacing: .05em; }
.fusion-button:disabled { opacity: .4; cursor: default; }
.fusion-controls { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; }
.fusion-reset-button { min-width: 96px; border: 1px solid rgba(177,202,220,.14); border-radius: 6px; padding: 5px 8px; background: rgba(177,202,220,.05); color: #9aa9ae; font-family: var(--font-display); font-size: 9px; font-weight: 800; }
.weapon-loadout { margin-top: 9px; }
.weapon-loadout-panel { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 10px; border: 1px solid rgba(92,214,209,.2); border-radius: 8px; background: rgba(12,30,35,.42); }
.weapon-loadout-panel > div:first-child { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.weapon-loadout-panel > div:first-child b { overflow: hidden; color: #d6e7e3; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.weapon-loadout-actions { display: flex; flex: 0 0 auto; gap: 5px; }
.weapon-loadout-actions button { min-height: 30px; padding: 5px 7px; border: 1px solid rgba(92,214,209,.28); border-radius: 5px; background: rgba(92,214,209,.08); color: #a3e5df; font-family: var(--font-display); font-size: 8px; font-weight: 800; }
.weapon-loadout-actions button:disabled { opacity: .55; cursor: default; }
.fusion-equip { margin-top: 13px; padding-top: 11px; border-top: 1px solid rgba(177,202,220,.1); }
.fusion-equip-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin-top: 6px; }
.fusion-equip-actions button { min-height: 34px; padding: 5px; border: 1px solid rgba(92,214,209,.24); border-radius: 5px; background: rgba(92,214,209,.07); color: #a3e5df; font-size: 8px; font-weight: 800; line-height: 1.25; }
.fusion-equip-actions button:disabled { border-color: rgba(177,202,220,.1); background: rgba(177,202,220,.035); color: #76838a; opacity: .82; cursor: default; }
.loadout-heading { margin: 0 0 2px; }
.equipped-slot-row { justify-content: space-between; }
.secondary-equipped-row { border-color: rgba(181,156,255,.16); }

.game-screen { position: fixed; inset: 0; z-index: 10; width: 100%; height: 100dvh; overflow: hidden; background: #08111a; touch-action: none; }
#game3dCanvas { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; touch-action: none; }
#gameCanvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.game-screen.game-3d-ready #gameCanvas { opacity: 0; pointer-events: none; }
.game-vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5,10,16,.66), transparent 21%, transparent 70%, rgba(4,9,15,.84)); }
.game-hud { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 13px; right: 13px; z-index: 2; display: grid; grid-template-columns: 42px 1fr auto; align-items: start; gap: 10px; pointer-events: none; }
.game-hud > * { pointer-events: auto; }
.icon-button { display: flex; align-items: center; justify-content: center; gap: 3px; width: 38px; height: 38px; border: 1px solid rgba(180,210,225,.18); border-radius: 10px; background: rgba(9,17,25,.72); backdrop-filter: blur(8px); }
.pause-button span { width: 3px; height: 12px; border-radius: 2px; background: #dae5e8; }
.wave-hud { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 6px; padding: 6px 9px; width: fit-content; min-width: 142px; border: 1px solid rgba(180,210,225,.12); border-radius: 8px; background: rgba(9,17,25,.7); backdrop-filter: blur(8px); }
.wave-hud small { color: var(--amber); font-size: 7px; font-style: normal; font-weight: 800; letter-spacing: .1em; white-space: nowrap; }
.wave-hud small i { color: #f4dcb3; font-style: normal; }
.wave-hud b { font-family: var(--font-display); font-size: 24px; line-height: .9; }
.wave-hud span { align-self: center; color: #8496a3; font-size: 7px; letter-spacing: .08em; }
.wave-hud em { flex-basis: 100%; color: #91d7cc; font-size: 7px; font-style: normal; font-weight: 800; letter-spacing: .12em; }
.wave-hud .wave-number-label { color: #8496a3; }
.wave-hud .wave-limit { color: #8496a3; font-size: 8px; letter-spacing: 0; }
.wave-hud .spawn-interval-label { flex-basis: 100%; color: #b4c4cc; font-size: 6px; letter-spacing: .07em; }
.hud-resources { display: flex; flex-direction: column; gap: 4px; align-items: end; padding: 6px 8px; border: 1px solid rgba(180,210,225,.12); border-radius: 8px; background: rgba(9,17,25,.7); font-size: 9px; backdrop-filter: blur(8px); }
.hud-resources span { display: flex; align-items: center; gap: 4px; }
.hud-resource-icon { display: block; width: 13px; height: 12px; flex: 0 0 auto; }
.hud-resources span:first-child { color: var(--amber); }.hud-resources span:last-child { color: var(--cyan); }
.health-hud { grid-column: 2 / 4; display: flex; flex-direction: column; gap: 4px; margin-top: -1px; }
.health-hud > div:first-child { display: flex; justify-content: space-between; color: #a0b0b9; font-size: 8px; font-weight: 700; letter-spacing: .08em; }
.health-hud b { color: #e5eeee; font-size: 9px; letter-spacing: 0; }
.health-hud small { color: #87dfff; font-size: 7px; font-weight: 800; letter-spacing: 0; }
.health-track { height: 5px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 5px; background: rgba(3,8,12,.7); }
.health-track i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ed655e, #ffb649); box-shadow: 0 0 8px rgba(255,112,85,.45); transition: width .18s; }
.objective-hud { grid-column: 2 / 4; display: flex; flex-direction: column; gap: 4px; margin-top: -5px; padding: 5px 7px; border: 1px solid rgba(92,214,209,.18); border-radius: 7px; background: rgba(8,19,25,.68); backdrop-filter: blur(7px); }
.objective-hud > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #8fcac3; font-size: 7px; font-weight: 900; letter-spacing: .09em; }
.objective-hud b { color: #d9efeb; font-size: 8px; letter-spacing: 0; }
.objective-health-track { height: 4px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 4px; background: rgba(3,8,12,.7); }
.objective-health-track i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#278f88,#63e1d4); box-shadow: 0 0 8px rgba(82,217,208,.35); transition: width .18s; }
.objective-hud.is-critical { border-color: rgba(255,115,98,.42); }
.objective-hud.is-critical .objective-health-track i { background: linear-gradient(90deg,#d94f4a,#ffad6d); box-shadow: 0 0 8px rgba(255,100,81,.32); }
.weapon-ammo-stack { position: absolute; bottom: max(18px,calc(env(safe-area-inset-bottom) + 18px)); left: 50%; z-index: 3; display: flex; align-items: center; gap: 7px; transform: translateX(-50%); pointer-events: none; }
.ammo-hud { position: relative; display: flex; min-width: 112px; height: 42px; align-items: center; justify-content: center; gap: 8px; padding: 5px 11px 7px; overflow: hidden; border: 1px solid rgba(255,190,92,.38); border-radius: 12px; background: linear-gradient(155deg,rgba(28,34,38,.94),rgba(7,13,18,.96) 72%); color: #f4d59b; box-shadow: inset 0 1px 0 rgba(255,255,255,.09),0 5px 18px rgba(0,0,0,.42),0 0 14px rgba(255,177,69,.08); backdrop-filter: blur(8px); }
.ammo-hud::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg,#ffe2a0,#c58b3c); content: ''; opacity: .9; }
.ammo-glyph { display: block; width: 35px; height: 27px; flex: 0 0 auto; overflow: visible; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.ammo-round path:first-child { fill: #f0c46d; stroke: #ffe7a2; stroke-width: .8; stroke-linejoin: round; }
.ammo-round .ammo-base { fill: #b87935; stroke: #f2c471; stroke-width: .55; }
.ammo-round .ammo-glint { fill: none; stroke: rgba(255,247,208,.82); stroke-width: 1; stroke-linecap: round; }
.ammo-divider { width: 1px; height: 23px; flex: 0 0 auto; background: linear-gradient(180deg,transparent,rgba(231,194,128,.35),transparent); }
.ammo-count { display: inline-flex; align-items: baseline; gap: 4px; color: #f4f6f5; font-family: var(--font-display); font-size: 17px; font-variant-numeric: tabular-nums; font-weight: 900; letter-spacing: .01em; line-height: 1; white-space: nowrap; }
.ammo-count i { color: #84939a; font-size: 11px; font-style: normal; font-weight: 700; }
.ammo-count span:last-child { color: #c7d2d2; font-size: 14px; }
.ammo-caption { position: absolute; right: 12px; bottom: 3px; color: rgba(171,189,191,.65); font-size: 5px; font-weight: 900; letter-spacing: .16em; line-height: 1; }
.ammo-hud.is-low { border-color: rgba(255,166,77,.65); box-shadow: inset 0 1px 0 rgba(255,255,255,.08),0 5px 18px rgba(0,0,0,.42),0 0 15px rgba(255,145,57,.14); }
.ammo-hud.is-low .ammo-count span:first-child { color: #ffc26f; }
.ammo-hud.is-empty, .ammo-hud.is-locked { border-color: rgba(180,210,225,.14); background: linear-gradient(155deg,rgba(24,30,34,.78),rgba(7,13,18,.84)); filter: saturate(.42); opacity: .72; }
@media (max-width: 420px) { .weapon-ammo-stack { bottom: max(14px,calc(env(safe-area-inset-bottom) + 14px)); gap: 5px; } .ammo-hud { min-width: 104px; height: 40px; gap: 6px; padding-inline: 8px; } .ammo-glyph { width: 31px; } .ammo-count { font-size: 16px; } }
.wave-toast { position: absolute; top: 35%; left: 50%; z-index: 1; color: rgba(255,226,180,0); font-family: var(--font-display); font-size: 38px; font-weight: 900; letter-spacing: .13em; transform: translate(-50%,-50%) scale(.9); pointer-events: none; text-shadow: 0 0 25px rgba(255,182,73,.45); }
.wave-toast.show { animation: toastIn 1.5s ease-out both; }
@keyframes toastIn { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.85); } 20% { opacity: 1; color: rgba(255,226,180,.9); transform: translate(-50%,-50%) scale(1); } 70% { opacity: 1; color: rgba(255,226,180,.8); } 100% { opacity: 0; color: rgba(255,226,180,0); transform: translate(-50%,-50%) scale(1.05); } }
.game-controls { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.joystick-wrap { position: absolute; top: -100px; left: -100px; display: grid; width: 92px; height: 92px; place-items: center; opacity: 0; transform: translate(-50%,-50%) scale(.84); transition: opacity .12s ease,transform .12s ease; pointer-events: none; }
.joystick-wrap.is-active { opacity: .94; transform: translate(-50%,-50%) scale(1); }
.joystick-wrap > span { display: none; }
.joystick { position: relative; display: grid; place-items: center; width: 92px; height: 92px; border: 1px solid rgba(185,217,223,.23); border-radius: 50%; background: radial-gradient(circle, rgba(37,61,72,.5), rgba(13,24,34,.64)); box-shadow: inset 0 0 20px rgba(83,141,151,.09), 0 6px 25px rgba(0,0,0,.2); touch-action: none; }
.joystick-center { color: rgba(190,222,225,.25); font-size: 27px; }
.joystick-thumb { position: absolute; width: 34px; height: 34px; top: 50%; left: 50%; border: 1px solid rgba(183,248,244,.75); border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(148,248,238,.8), rgba(65,151,154,.72)); box-shadow: 0 0 17px rgba(82,228,220,.25); transform: translate(-50%,-50%); }
.build-controls { position: absolute; right: 12px; bottom: max(18px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: end; gap: 8px; pointer-events: auto; }
.build-button { display: flex; align-items: center; gap: 9px; min-width: 155px; padding: 8px 9px; text-align: left; border: 1px solid rgba(255,182,73,.25); border-radius: 9px; background: rgba(10,19,27,.82); backdrop-filter: blur(8px); box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.build-button:active { background: rgba(44,54,57,.93); }
.build-button:disabled { opacity: .42; }
.drone-button { border-color: rgba(92,214,209,.25); }
.build-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: rgba(255,182,73,.11); color: var(--amber); font-size: 17px; }
.drone-button .build-icon { background: rgba(92,214,209,.1); color: var(--cyan); }
.build-copy { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.build-copy b { font-family: var(--font-display); font-size: 12px; letter-spacing: .04em; }
.build-copy small { color: #81929e; font-size: 8px; }
.build-count { color: var(--amber); font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.drone-button .build-count { color: var(--cyan); }
@media (pointer: coarse) and (max-width: 900px) {
  .joystick-wrap { top: auto; bottom: max(108px,calc(env(safe-area-inset-bottom) + 104px)); left: 76px; width: 104px; height: 104px; opacity: .58; transform: translate(-50%,0); pointer-events: auto; }
  .joystick-wrap.is-active { opacity: .96; transform: translate(-50%,0); }
  .joystick { width: 104px; height: 104px; border-color: rgba(185,217,223,.4); background: radial-gradient(circle, rgba(37,61,72,.68), rgba(13,24,34,.78)); }
  .joystick-center { color: rgba(190,222,225,.48); }
  .build-controls { right: 8px; bottom: max(12px,env(safe-area-inset-bottom)); gap: 5px; }
  .build-button { box-sizing: border-box; width: 132px; min-width: 0; min-height: 44px; gap: 6px; padding: 5px 6px; border-radius: 8px; }
  .build-icon { width: 23px; height: 23px; flex: 0 0 23px; font-size: 14px; }
  .build-copy { min-width: 0; }
  .build-copy b { font-size: 9px; letter-spacing: 0; white-space: nowrap; }
  .build-copy small { overflow: hidden; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
  .build-count { font-size: 14px; }
  .wall-expiry-note { font-size: 6px; }
}
@media (pointer: coarse) and (max-width: 380px) {
  .joystick-wrap { left: 66px; width: 92px; height: 92px; }
  .joystick { width: 92px; height: 92px; }
  .build-button { width: 118px; gap: 4px; padding-inline: 4px; }
  .build-copy b { font-size: 8px; }
  .build-copy small { font-size: 5px; }
}
.modal-overlay { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 20px; background: rgba(3,8,13,.72); backdrop-filter: blur(9px); }
.result-card { width: min(100%, 360px); padding: 24px 21px 19px; border: 1px solid rgba(190,220,231,.17); border-radius: 16px; background: linear-gradient(155deg, rgba(23,36,48,.97), rgba(12,20,29,.98)); box-shadow: 0 20px 80px rgba(0,0,0,.5); text-align: center; }
.result-emblem { width: 43px; height: 43px; margin: 0 auto 13px; display: grid; place-items: center; border: 1px solid rgba(255,102,96,.35); border-radius: 50%; background: rgba(255,102,96,.1); color: #ff7972; font-size: 27px; font-weight: 400; }
.result-card h2 { margin: 5px 0 6px; font-family: var(--font-display); font-size: 42px; line-height: 1; }
.result-description { max-width: 260px; margin: 0 auto 18px; color: #9aabb4; font-size: 11px; line-height: 1.5; }
.result-stats { display: grid; grid-template-columns: repeat(3,1fr); margin: 0 0 17px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.result-stats div { display: flex; flex-direction: column; gap: 4px; }
.result-stats div + div { border-left: 1px solid var(--line); }
.result-stats span { color: #718491; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.result-stats b { color: var(--amber); font-family: var(--font-display); font-size: 23px; line-height: 1; }
.result-button { width: 100%; justify-content: center; position: relative; }
.result-button .button-arrow { position: absolute; right: 16px; }
.result-footnote { display: block; margin-top: 11px; color: #738592; font-size: 7px; letter-spacing: .12em; }
.pause-card { padding-top: 27px; }
.pause-symbol { width: 43px; height: 43px; margin: 0 auto 13px; display: grid; place-items: center; border: 1px solid rgba(92,214,209,.32); border-radius: 50%; color: var(--cyan); font-size: 20px; }
.menu-button { width: 100%; margin-top: 9px; padding: 10px; border: 1px solid rgba(177,202,220,.16); border-radius: 7px; background: rgba(177,202,220,.045); color: #a9b9c0; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .05em; }
.stage-emblem { width: 43px; height: 43px; margin: 0 auto 13px; display: grid; place-items: center; border: 1px solid rgba(92,214,209,.35); border-radius: 50%; background: rgba(92,214,209,.1); color: var(--cyan); font-size: 22px; }
.stage-card h2 { color: var(--amber); }
.next-stage-callout { display: flex; justify-content: center; align-items: center; gap: 9px; margin: 0 0 17px; padding: 11px; border: 1px solid rgba(255,182,73,.17); border-radius: 8px; background: rgba(255,182,73,.06); color: #8b9ba3; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.next-stage-callout b { color: var(--amber); font-family: var(--font-display); font-size: 18px; }
.stage-core-reward { margin: -7px 0 15px; color: #d0aeff; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.core-inline-icon { display: inline-block; width: 13px; height: 12px; vertical-align: -2px; }

@media (min-width: 560px) {
  .app-shell { padding-inline: 24px; }
  .hero-panel { height: 360px; }
  .hero-art { width: 270px; height: 270px; right: 5px; top: 44px; transform: scale(1.12); }
  .hero-copy { padding-left: 30px; padding-top: 35px; }
  .upgrade-card { padding-inline: 13px; }
}
@media (max-width: 370px) {
  .app-shell { padding-inline: 12px; }
  .hero-panel { height: 320px; }
  .hero-copy { width: 67%; padding-left: 16px; }
  .hero-art { right: -52px; transform: scale(.88); }
  .hero-description { font-size: 10px; }
  .upgrade-card { gap: 6px; padding-inline: 6px; }
  .upgrade-icon { flex-basis: 27px; height: 27px; }
  .upgrade-meta b { font-size: 9px; }
  .upgrade-action { flex-basis: 32px; }
  .persist-tag { font-size: 6px; }
}
@media (max-width: 400px) { .bag-resource-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 370px) { .crate-grid { grid-template-columns: repeat(3,minmax(100px,1fr)); } .slot-unlock-row { align-items: flex-start; flex-wrap: wrap; } .slot-unlock-actions { width: 100%; margin-left: 0; } .slot-unlock-actions button { flex: 1; } .fusion-copy-grid { gap: 4px; } .fusion-copy { min-height: 87px; } .fusion-copy > b { font-size: 5px; } .fusion-controls { grid-template-columns: 1fr; } .fusion-reset-button { min-height: 32px; } .weapon-loadout-panel { align-items: stretch; flex-direction: column; } .weapon-loadout-actions button { flex: 1; } .weapon-bag-actions { gap: 3px; } .weapon-bag-actions button { padding-inline: 5px; font-size: 8px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }

/* Rozdelené menu a detail výbavy */
.menu-nav { position: sticky; top: 0; z-index: 4; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; margin: 10px 0 14px; padding: 5px; border: 1px solid rgba(177,202,220,.1); border-radius: 10px; background: rgba(10,16,24,.94); box-shadow: 0 8px 20px rgba(0,0,0,.2); backdrop-filter: blur(10px); }
.menu-nav-button { display: flex; min-height: 39px; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #8696a0; font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: .09em; }
.menu-nav-button span { color: #94aaa9; font-size: 14px; }
.menu-nav-button.is-active { border-color: rgba(92,214,209,.25); background: linear-gradient(120deg, rgba(92,214,209,.13), rgba(92,214,209,.04)); color: #d6efeb; box-shadow: inset 0 0 14px rgba(92,214,209,.04); }
.menu-nav-button.is-active span { color: var(--cyan); }
.menu-view { min-width: 0; animation: menuViewIn .2s ease-out both; }
.admin-view { padding: 4px 0 20px; }
.admin-local-badge { padding: 6px 8px; border: 1px solid rgba(255,190,95,.22); border-radius: 5px; background: rgba(255,190,95,.07); color: #d7b87d; font-size: 7px; font-weight: 900; letter-spacing: .12em; white-space: nowrap; }
.admin-summary-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding: 13px 15px; border: 1px solid rgba(92,214,209,.18); border-radius: 10px; background: radial-gradient(ellipse at 0 0,rgba(92,214,209,.08),transparent 58%),linear-gradient(145deg,rgba(18,29,40,.96),rgba(10,17,25,.98)); }
.admin-summary-card > div { display: grid; gap: 4px; }
.admin-summary-card small { color: #81979c; font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.admin-summary-card b { color: #dff8f2; font-family: var(--font-display); font-size: 25px; }
.admin-summary-card > span { color: #67cfc8; font-size: 7px; font-weight: 900; letter-spacing: .1em; text-align: right; }
.admin-table-wrap { overflow-x: auto; border: 1px solid rgba(177,202,220,.12); border-radius: 9px; background: rgba(11,18,26,.88); }
.admin-stats-table { width: 100%; min-width: 610px; border-collapse: collapse; font-size: 9px; text-align: right; }
.admin-stats-table th,.admin-stats-table td { padding: 10px 9px; border-bottom: 1px solid rgba(177,202,220,.08); white-space: nowrap; }
.admin-stats-table thead th { color: #7e949c; font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.admin-stats-table th:first-child,.admin-stats-table tbody th { text-align: left; }
.admin-stats-table tbody th { color: #d4e1df; font-weight: 800; }
.admin-stats-table tbody td { color: #afc2c1; font-variant-numeric: tabular-nums; }
.admin-stats-table tfoot th,.admin-stats-table tfoot td { border-bottom: 0; color: #f0c77e; font-weight: 900; }
.admin-stats-table .admin-net-credit { color: #8de1a8; }
.admin-data-note { max-width: 650px; margin: 10px 2px 0; color: #809297; font-size: 8px; line-height: 1.6; }
.admin-tools-panel { margin-top: 14px; padding: 14px; border: 1px solid rgba(92,214,209,.16); border-radius: 11px; background: linear-gradient(145deg,rgba(17,27,37,.94),rgba(9,15,22,.97)); }
.admin-tools-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.admin-tools-heading .eyebrow { margin: 0 0 3px; color: #6bbeb9; font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.admin-tools-heading h3 { margin: 0; color: #e3eeeb; font-family: var(--font-display); font-size: 16px; }
.admin-tools-heading > span { padding: 5px 7px; border: 1px solid rgba(92,214,209,.18); border-radius: 5px; color: #82c7c2; font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.admin-resource-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.admin-resource-card { min-width: 0; padding: 11px; border: 1px solid rgba(177,202,220,.12); border-radius: 9px; background: rgba(7,13,20,.72); }
.admin-resource-credits { --admin-resource: #f1c763; }
.admin-resource-scrap { --admin-resource: #c58c5a; }
.admin-resource-cores { --admin-resource: #c59bff; }
.admin-resource-head { display: flex; min-width: 0; align-items: center; gap: 6px; }
.admin-resource-icon { width: 24px; height: 22px; flex: 0 0 auto; overflow: visible; }
.admin-resource-head > b { color: #b8c9c8; font-size: 10px; }
.admin-resource-head > strong { overflow: hidden; margin-left: auto; color: var(--admin-resource); font-family: var(--font-display); font-size: 16px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; }
.admin-resource-card > label { display: block; margin: 10px 0 4px; color: #81949a; font-size: 8px; font-weight: 700; }
.admin-resource-card > input { width: 100%; min-height: 34px; padding: 7px 9px; border: 1px solid rgba(177,202,220,.16); border-radius: 6px; outline: none; background: rgba(4,9,14,.75); color: #eef6f4; font: inherit; font-size: 11px; }
.admin-resource-card > input:focus { border-color: rgba(92,214,209,.55); box-shadow: 0 0 0 2px rgba(92,214,209,.08); }
.admin-resource-card > input::placeholder { color: #65767c; }
.admin-resource-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 7px; }
.admin-resource-actions button { min-height: 32px; padding: 6px 7px; border: 1px solid rgba(92,214,209,.3); border-radius: 6px; background: rgba(92,214,209,.1); color: #a6e3da; font-family: var(--font-display); font-size: 8px; font-weight: 900; letter-spacing: .04em; cursor: pointer; }
.admin-resource-actions button:hover { border-color: rgba(92,214,209,.56); background: rgba(92,214,209,.16); }
.admin-resource-actions button.is-clear { border-color: rgba(255,129,120,.2); background: rgba(255,129,120,.045); color: #cc938d; }
.admin-resource-actions button.is-clear:hover { border-color: rgba(255,129,120,.5); background: rgba(255,129,120,.1); }
.admin-currency-reset { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 11px 12px; border: 1px solid rgba(240,199,126,.16); border-radius: 8px; background: rgba(240,199,126,.035); }
.admin-currency-reset > div { display: grid; gap: 3px; }
.admin-currency-reset b { color: #d8e3e1; font-size: 10px; }
.admin-currency-reset small { color: #89999d; font-size: 8px; line-height: 1.4; }
.admin-currency-reset button { flex: 0 0 auto; min-height: 34px; padding: 7px 10px; border: 1px solid rgba(240,199,126,.3); border-radius: 6px; background: rgba(240,199,126,.08); color: #e7ca8f; font-family: var(--font-display); font-size: 8px; font-weight: 900; letter-spacing: .04em; cursor: pointer; }
.admin-currency-reset button:hover { border-color: rgba(240,199,126,.58); background: rgba(240,199,126,.14); }
.admin-progress-reset { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 11px 12px; border: 1px solid rgba(255,129,120,.18); border-radius: 8px; background: rgba(255,129,120,.035); }
.admin-progress-reset > div { display: grid; gap: 3px; }
.admin-progress-reset b { color: #d8e3e1; font-size: 10px; }
.admin-progress-reset small { color: #89999d; font-size: 8px; line-height: 1.4; }
.admin-progress-reset button { flex: 0 0 auto; min-height: 34px; padding: 7px 10px; border: 1px solid rgba(255,129,120,.35); border-radius: 6px; background: rgba(255,129,120,.1); color: #f0aaa2; font-family: var(--font-display); font-size: 8px; font-weight: 900; letter-spacing: .04em; cursor: pointer; }
.admin-progress-reset button:hover { border-color: rgba(255,129,120,.62); background: rgba(255,129,120,.17); }
@media (max-width: 620px) { .admin-resource-grid { grid-template-columns: 1fr; } .admin-resource-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(108px,.8fr); align-items: center; column-gap: 9px; } .admin-resource-head { grid-column: 1/-1; } .admin-resource-card > label { margin: 10px 0 0; } .admin-resource-card > input { margin-top: 7px; } .admin-resource-actions { grid-column: 1/-1; } }
@keyframes menuViewIn { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.defense-view { padding: 4px 0 15px; }
.defense-briefing-panel { display: grid; grid-template-columns: minmax(120px,.72fr) minmax(0,1.6fr); align-items: center; gap: 14px; padding: 15px; border: 1px solid rgba(92,214,209,.18); border-radius: 13px; background: radial-gradient(ellipse at 15% 50%,rgba(92,214,209,.07),transparent 48%),linear-gradient(145deg,rgba(18,29,40,.96),rgba(10,17,25,.98)); }
.defense-briefing-visual { --planet-accent: #e8ab67; position: relative; display: grid; width: min(100%,160px); aspect-ratio: 1; place-items: center; overflow: hidden; justify-self: center; border: 1px solid color-mix(in srgb,var(--planet-accent) 30%,transparent); border-radius: 50%; background: radial-gradient(circle at 36% 32%,color-mix(in srgb,var(--planet-accent) 30%,transparent),transparent 38%),radial-gradient(circle at 50% 50%,rgba(33,56,62,.95),rgba(8,14,21,.98) 70%); box-shadow: inset -15px -9px 30px rgba(0,0,0,.4),0 0 28px color-mix(in srgb,var(--planet-accent) 10%,transparent); }
.defense-briefing-visual::before,.defense-briefing-visual::after { position: absolute; width: 74%; height: 19%; border: 1px solid color-mix(in srgb,var(--planet-accent) 38%,transparent); border-radius: 50%; transform: rotate(-27deg); content: ''; }
.defense-briefing-visual::after { width: 92%; height: 31%; border-color: color-mix(in srgb,var(--planet-accent) 19%,transparent); transform: rotate(28deg); }
.defense-briefing-visual > i { position: absolute; inset: 11%; border: 1px dashed color-mix(in srgb,var(--planet-accent) 22%,transparent); border-radius: 50%; animation: planetOrbit 24s linear infinite; }
.defense-briefing-visual > b { z-index: 1; color: #f3f0e7; font-family: var(--font-display); font-size: 31px; text-shadow: 0 0 18px var(--planet-accent); }
.defense-briefing-visual > span { position: absolute; right: 18%; bottom: 20%; width: 10px; height: 10px; border: 1px solid #e6fff2; border-radius: 50%; background: var(--planet-accent); box-shadow: 0 0 12px var(--planet-accent); }
@keyframes planetOrbit { to { transform: rotate(333deg); } }
.planet-varkos { --planet-accent: #e8ab67; }
.planet-nivara { --planet-accent: #91dfff; background: radial-gradient(circle at 36% 32%,rgba(184,237,255,.55),transparent 33%),radial-gradient(circle at 50% 50%,#315b75,#08131e 72%); }
.planet-pyra { --planet-accent: #ff845a; background: radial-gradient(circle at 36% 32%,rgba(255,198,112,.5),transparent 34%),radial-gradient(circle at 50% 50%,#743b35,#1a1014 72%); }
.planet-mycel { --planet-accent: #c38fff; background: radial-gradient(circle at 36% 32%,rgba(209,156,255,.48),transparent 34%),radial-gradient(circle at 50% 50%,#44395f,#10111e 72%); }
.planet-elysium { --planet-accent: #a8edb2; background: radial-gradient(circle at 36% 32%,rgba(203,255,173,.48),transparent 34%),radial-gradient(circle at 50% 50%,#355746,#0c1919 72%); }
.defense-briefing-copy { min-width: 0; }
.defense-briefing-copy .eyebrow { margin: 0 0 5px; color: var(--planet-accent,#e8ab67); font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.defense-briefing-copy h3 { margin: 0; color: #e6efec; font-family: var(--font-display); font-size: clamp(22px,5vw,32px); line-height: 1.05; }
.defense-briefing-copy > p:not(.eyebrow) { max-width: 440px; margin: 8px 0; color: #8fa2a7; font-size: 10px; line-height: 1.55; }
.planet-stage-caption { display: inline-flex; margin-top: 3px; padding: 5px 7px; border: 1px solid rgba(92,214,209,.16); border-radius: 5px; background: rgba(92,214,209,.06); color: #9dd6d0; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.defense-launch-row { display: grid; grid-column: 1/-1; grid-template-columns: minmax(0,1fr) minmax(155px,.55fr); align-items: center; gap: 9px; padding-top: 12px; border-top: 1px solid rgba(177,202,220,.09); }
.defense-launch-row .start-button { min-width: 0; justify-content: center; gap: 6px; padding: 13px 10px; font-size: 13px; }
.defense-launch-row .button-arrow { font-size: 13px; }
@media (max-width: 520px) { .defense-briefing-panel { grid-template-columns: minmax(86px,.48fr) minmax(0,1.52fr); gap: 10px; padding: 10px; } .defense-briefing-visual { width: min(100%,125px); } .defense-launch-row { grid-template-columns: 1fr; gap: 7px; } .defense-launch-row .start-button { min-height: 42px; } }
.top-resources { gap: 4px; }
.resource-chip { min-width: 45px; padding: 6px 7px; font-size: 10px; }
.resource-chip .resource-glyph { width: 14px; }
.resource-name { color: #8696a0; font-size: 7px; font-weight: 800; letter-spacing: .04em; }
.core-chip { border-color: rgba(196,151,255,.2); color: #d3b1ff; }
.core-chip .resource-glyph { fill: rgba(177,121,255,.3); stroke: #d4aaff; stroke-width: 1.5; stroke-linejoin: round; }
.player-dashboard { padding: 5px 0 17px; }
.dashboard-player-name { display: flex; flex-direction: column; align-items: center; padding: 5px 0 13px; text-align: center; }
.dashboard-player-name > span { color: #82949d; font-size: 8px; font-weight: 800; letter-spacing: .22em; }
.dashboard-player-name h1 { margin: 3px 0 2px; color: #eef6f4; font-size: clamp(28px,8vw,38px); line-height: .95; letter-spacing: .035em; text-shadow: 0 0 18px rgba(92,214,209,.15); }
.dashboard-player-name > small { color: #637681; font-size: 7px; font-weight: 700; letter-spacing: .18em; }
.dashboard-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.22fr) minmax(0,1fr); grid-template-rows: repeat(2,minmax(112px,1fr)); gap: 7px; }
.dashboard-item { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 7px 5px; border: 1px solid rgba(177,202,220,.12); border-radius: 10px; background: linear-gradient(150deg,rgba(20,30,40,.92),rgba(10,17,25,.97)); color: inherit; text-align: center; }
.dashboard-weapon-card { border-color: rgba(92,214,209,.2); background: radial-gradient(ellipse at 50% 48%,rgba(92,214,209,.1),transparent 65%),linear-gradient(150deg,rgba(20,36,43,.95),rgba(10,17,25,.97)); }
.dashboard-weapon-card:active { border-color: rgba(255,182,73,.62); }
.dashboard-item-label { align-self: stretch; color: #7c929a; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.dashboard-weapon-art { display: grid; width: 100%; height: 58px; place-items: center; overflow: hidden; }
.dashboard-weapon-art .weapon-svg { width: 100%; height: 100%; }
.dashboard-weapon-card > b { overflow: hidden; max-width: 100%; color: #e1ece9; font-family: var(--font-display); font-size: 14px; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-weapon-card > small { margin-top: 5px; color: #829b9d; font-size: 6px; font-weight: 800; letter-spacing: .07em; line-height: 1.25; }
.dashboard-second-slot.is-locked { border-color: rgba(177,202,220,.1); background: linear-gradient(150deg,rgba(19,25,34,.9),rgba(9,14,21,.98)); }
.dashboard-second-slot.is-locked > b,.dashboard-second-slot.is-locked > small { color: #75848e; }
.dashboard-second-slot .dashboard-weapon-art > i,.dashboard-drone-art .drone-locked-cube { display: grid; width: 34px; height: 34px; place-items: center; border: 1px dashed rgba(177,202,220,.2); border-radius: 9px; color: #83929a; font-size: 17px; font-style: normal; }
.dashboard-second-slot .dashboard-empty-slot { color: var(--cyan) !important; font-size: 25px !important; }
.dashboard-character-cell { grid-column: 2; grid-row: 1 / span 2; display: flex; width: 100%; min-width: 0; flex-direction: column; color: inherit; text-align: center; }
.dashboard-character-action { position: absolute; z-index: 3; top: 8px; left: 50%; min-height: 25px; padding: 4px 11px; transform: translateX(-50%); border: 1px solid rgba(92,214,209,.48); border-radius: 20px; background: rgba(5,15,21,.9); box-shadow: 0 0 13px rgba(92,214,209,.18),inset 0 0 12px rgba(92,214,209,.08); color: #c9fff2; font-family: var(--font-display); font-size: 8px; font-weight: 900; letter-spacing: .12em; white-space: nowrap; cursor: pointer; }
.dashboard-character-action:active { background: rgba(33,84,83,.94); }
.dashboard-character-action:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.dashboard-character-stage { position: relative; display: grid; flex: 1; min-height: 231px; place-items: center; overflow: hidden; border: 1px solid rgba(92,214,209,.22); border-radius: 12px; background: radial-gradient(ellipse at 50% 57%,rgba(92,214,209,.15),transparent 53%),linear-gradient(150deg,rgba(18,36,43,.92),rgba(8,16,23,.98)); }
.dashboard-character-stage::before { position: absolute; inset: 0; content: ''; opacity: .25; background-image: linear-gradient(rgba(145,190,195,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(145,190,195,.12) 1px,transparent 1px); background-size: 19px 19px; mask-image: linear-gradient(transparent,#000 14%,#000 84%,transparent); }
.dashboard-character-stage .character-stage-ring { width: min(95%,158px); height: auto; aspect-ratio: 1; }
.dashboard-character-stage .character-stage-ring-inner { width: min(69%,112px); }
.dashboard-character-stage .character-shadow { bottom: 37px; }
.dashboard-character-stage .loadout-character { transform: scale(.82); }
.dashboard-character-caption { padding-top: 6px; color: #92bcb8; font-size: 7px; font-weight: 900; letter-spacing: .13em; text-align: center; }
.dashboard-character-hint { margin-top: 4px; color: #6f9694; font-size: 5px; font-weight: 800; letter-spacing: .08em; }
.dashboard-drone-card { border-color: rgba(92,214,209,.14); background: radial-gradient(ellipse at 50% 45%,rgba(92,214,209,.07),transparent 65%),linear-gradient(150deg,rgba(17,28,37,.95),rgba(10,16,23,.98)); }
.dashboard-drone-card.is-locked { border-style: dashed; border-color: rgba(255,182,73,.2); background: radial-gradient(ellipse at 50% 45%,rgba(255,182,73,.055),transparent 65%),linear-gradient(150deg,rgba(25,27,31,.95),rgba(10,16,23,.98)); }
.dashboard-drone-card:disabled { opacity: 1; cursor: default; }
.dashboard-drone-art { position: relative; display: flex; width: 72px; height: 53px; align-items: center; justify-content: center; margin: 1px 0; }
.dashboard-drone-art .drone-svg { display: none; width: 72px; height: 53px; overflow: visible; filter: drop-shadow(0 3px 6px rgba(0,0,0,.42)) drop-shadow(0 0 5px rgba(92,214,209,.18)); }
.dashboard-drone-card:not(.is-locked) .dashboard-drone-art .drone-svg { display: block; }
.dashboard-drone-card:not(.is-locked) .drone-locked-cube { display: none; }
.drone-arms path:first-child { fill: none; stroke: #1a2c32; stroke-width: 6; stroke-linecap: round; }
.drone-arms .drone-arm-highlight { fill: none; stroke: #72918e; stroke-width: 1.4; stroke-linecap: round; opacity: .8; }
.drone-rotor circle { fill: #17262c; stroke: #83aaa4; stroke-width: 1.4; }
.drone-rotor circle:nth-child(even) { fill: #20373c; }
.drone-rotor .drone-blades { fill: none; stroke: #9be8d9; stroke-width: 2.1; stroke-linecap: round; opacity: .9; }
.drone-shell { fill: #263c40; stroke: #b5d0c6; stroke-width: 1.5; stroke-linejoin: round; }
.drone-plate { fill: #456b68; stroke: #78dbcf; stroke-width: 1; stroke-linejoin: round; }
.drone-nose { fill: #ffd27e; stroke: #fff0c6; stroke-width: .7; stroke-linejoin: round; }
.drone-lens { fill: #c6fff2; stroke: #57decf; stroke-width: 1.3; filter: drop-shadow(0 0 3px #6ce9d6); }
.drone-detail { fill: none; stroke: #b5d0c6; stroke-width: 1.2; stroke-linecap: round; opacity: .8; }
.dashboard-drone-card > b { color: #d2e2e1; font-family: var(--font-display); font-size: 14px; }
.dashboard-drone-card > b em { margin-left: 3px; color: var(--cyan); font-style: normal; }
.dashboard-drone-card > small { margin-top: 4px; color: #778b92; font-size: 6px; font-weight: 800; letter-spacing: .1em; }
.dashboard-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-top: 9px; }
.dashboard-stat { display: flex; min-width: 0; min-height: 68px; flex-direction: column; justify-content: space-between; gap: 5px; padding: 8px; border: 1px solid rgba(177,202,220,.1); border-radius: 8px; background: linear-gradient(145deg,rgba(18,28,38,.92),rgba(10,16,23,.96)); }
.dashboard-stat-top { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 3px; }
.dashboard-stat-top > small { overflow: hidden; color: #768a93; font-size: 6px; font-weight: 800; letter-spacing: .09em; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-stat-top > em { overflow: hidden; color: #71838d; font-size: 6px; font-style: normal; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-stat-bottom { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 3px; }
.dashboard-stat b { overflow: hidden; color: #dce8e6; font-family: var(--font-display); font-size: 16px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-stat-upgrade { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
.dashboard-stat-upgrade button { display: grid; width: 22px; height: 22px; place-items: center; padding: 0; border: 1px solid rgba(255,182,73,.38); border-radius: 5px; background: rgba(255,182,73,.11); color: var(--amber); font-size: 16px; line-height: 1; }
.dashboard-stat-upgrade button:active { background: rgba(255,182,73,.3); }
.dashboard-stat-upgrade button:disabled { opacity: .32; cursor: default; }
.dashboard-stat-upgrade small { color: #b89762; font-size: 6px; font-weight: 700; white-space: nowrap; }
.dashboard-stat.stat-health b { color: #ff9390; }.dashboard-stat.stat-attack b { color: #ffc36a; }.dashboard-stat.stat-crit b { color: #d5adff; }.dashboard-stat.stat-move b { color: #9aa8ff; }.dashboard-stat.stat-shield b { color: #87dfff; }.dashboard-stat.stat-magnet b { color: #8be1d9; }.dashboard-stat.stat-circle b { color: #ffd083; }.dashboard-stat.stat-regen b { color: #80e4ba; }
.dashboard-bottom-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(150px,.8fr); align-items: center; gap: 8px; margin-top: 9px; }
.dashboard-record { display: flex; min-width: 0; flex-direction: column; gap: 3px; padding: 8px 9px; border: 1px solid rgba(177,202,220,.09); border-radius: 8px; background: rgba(10,17,25,.68); }
.dashboard-record span { color: #748892; font-size: 6px; font-weight: 800; letter-spacing: .12em; }
.dashboard-record b { color: #e0ebe8; font-size: 9px; }
.dashboard-record small { color: #71858e; font-size: 6px; line-height: 1.3; }
.dashboard-bottom-row .start-button { min-width: 0; justify-content: center; gap: 5px; padding: 12px 8px; font-size: 13px; }
.dashboard-bottom-row .button-arrow { font-size: 13px; }
.loadout-view { padding: 4px 0 15px; }
.loadout-title { margin-bottom: 12px; }
.loadout-title h2 { margin: 4px 0 0; font-family: var(--font-display); font-size: 27px; line-height: 1; }
.loadout-back-button { min-height: 30px; padding: 5px 9px; border: 1px solid rgba(92,214,209,.2); border-radius: 6px; background: rgba(92,214,209,.07); color: #9ce2d8; font-family: var(--font-display); font-size: 8px; font-weight: 800; letter-spacing: .06em; }
.character-loadout-panel { display: grid; grid-template-columns: 1.02fr .98fr; min-height: 218px; overflow: hidden; border: 1px solid rgba(92,214,209,.18); border-radius: 13px; background: linear-gradient(130deg, rgba(19,36,45,.94), rgba(12,20,30,.96)); }
.character-stage { position: relative; display: grid; min-height: 218px; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 62%, rgba(92,214,209,.13), transparent 43%), linear-gradient(135deg, rgba(7,15,21,.2), rgba(27,43,52,.15)); }
.character-stage::before { position: absolute; inset: 0; content: ''; opacity: .22; background-image: linear-gradient(rgba(145,190,195,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(145,190,195,.12) 1px,transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(transparent,#000 20%,#000 80%,transparent); }
.character-stage-ring { position: absolute; width: 154px; height: 154px; border: 1px solid rgba(92,214,209,.2); border-radius: 50%; box-shadow: 0 0 28px rgba(92,214,209,.07),inset 0 0 22px rgba(92,214,209,.05); }
.character-stage-ring-inner { width: 110px; height: 110px; border-style: dashed; border-color: rgba(255,182,73,.2); }
.character-shadow { position: absolute; bottom: 37px; width: 93px; height: 21px; border-radius: 50%; background: rgba(0,0,0,.55); filter: blur(7px); }
.loadout-character { position: relative; z-index: 1; width: 89px; height: 128px; margin-top: 18px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
.character-head { position: absolute; z-index: 3; top: 3px; left: 31px; width: 28px; height: 31px; border: 2px solid #d0c8ae; border-radius: 11px 11px 9px 9px; background: linear-gradient(135deg,#d4c9a7 0 27%,#56646a 29% 100%); }
.character-head::before { position: absolute; top: 8px; left: -5px; width: 34px; height: 9px; border: 2px solid #91a3a1; border-radius: 5px 5px 2px 2px; background: #26363a; content: ''; }
.character-head i { position: absolute; right: 5px; top: 13px; width: 4px; height: 3px; background: var(--hero-accent,#71e3d6); box-shadow: 0 0 8px var(--hero-accent,#71e3d6); }
.character-torso { position: absolute; z-index: 2; top: 31px; left: 18px; width: 54px; height: 53px; border: 2px solid var(--hero-accent,#83928d); border-radius: 13px 13px 8px 8px; background: linear-gradient(100deg,#263c41,#536260 52%,#202d31); }
.character-torso::before,.character-torso::after { position: absolute; top: 6px; bottom: 5px; width: 10px; border: 1px solid rgba(215,207,171,.45); border-radius: 4px; background: rgba(192,164,107,.22); content: ''; }
.character-torso::before { left: 5px; }.character-torso::after { right: 5px; }
.character-arm { position: absolute; z-index: 1; top: 39px; width: 14px; height: 48px; border: 2px solid #75847f; border-radius: 8px; background: linear-gradient(#66736c,#384548); }
.character-arm-left { left: 7px; transform: rotate(12deg); }.character-arm-right { right: 3px; height: 42px; transform: rotate(-29deg); }
.character-leg { position: absolute; z-index: 1; top: 77px; width: 19px; height: 42px; border: 2px solid #6e7d79; border-radius: 4px 4px 7px 7px; background: linear-gradient(90deg,#202d31,#53615d); }
.character-leg-left { left: 21px; transform: rotate(3deg); }.character-leg-right { right: 18px; transform: rotate(-4deg); }
.character-gun { position: absolute; z-index: 4; top: 42px; right: -47px; width: 68px; height: 31px; transform: rotate(-11deg); }
.character-gun::after { position: absolute; top: 12px; right: -1px; width: 9px; height: 4px; border-radius: 50%; background: #ffe3a1; box-shadow: 0 0 5px 2px rgba(255,183,85,.7),0 0 12px 4px rgba(92,214,209,.28); content: ''; animation: muzzlePulse 1.15s steps(2,end) infinite; }
@keyframes muzzlePulse { 0%,68%,100% { opacity: 0; transform: scale(.5); } 72%,82% { opacity: 1; transform: scale(1); } }
.character-gun .weapon-svg { filter: drop-shadow(0 0 5px rgba(92,214,209,.26)); }
.character-status { position: absolute; z-index: 2; bottom: 9px; display: flex; align-items: center; gap: 6px; padding: 4px 7px; border: 1px solid rgba(92,214,209,.17); border-radius: 20px; background: rgba(5,13,18,.68); color: #93bdb8; font-size: 7px; font-weight: 800; letter-spacing: .13em; }
.character-status i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 7px var(--cyan); }
.character-copy { align-self: center; padding: 15px 13px 15px 5px; }
.character-copy h3 { margin: 5px 0 7px; font-family: var(--font-display); font-size: 22px; line-height: 1; }
.character-copy > p:not(.eyebrow) { margin: 0; color: #8b9ca4; font-size: 9px; line-height: 1.55; }
.character-stat-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.character-stat-chips span { padding: 5px 6px; border: 1px solid rgba(177,202,220,.1); border-radius: 5px; color: #82939b; font-size: 7px; font-weight: 800; letter-spacing: .08em; }
.character-stat-chips b { margin-left: 3px; color: #d7e5e4; font-size: 9px; }
.loadout-slots { margin-top: 17px; }
.loadout-heading { margin-bottom: 7px; }
.loadout-slot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.equipped-weapon-slot { display: flex; min-width: 0; min-height: 148px; flex-direction: column; align-items: stretch; padding: 9px; border: 1px solid rgba(92,214,209,.2); border-radius: 10px; background: linear-gradient(150deg,rgba(20,39,45,.84),rgba(11,19,28,.97)); color: inherit; text-align: left; }
.equipped-weapon-slot.is-active { border-color: rgba(255,182,73,.55); box-shadow: inset 0 0 20px rgba(255,182,73,.06),0 0 0 1px rgba(255,182,73,.08); }
.equipped-weapon-slot.secondary-slot { border-color: rgba(177,202,220,.14); background: linear-gradient(150deg,rgba(20,28,39,.84),rgba(11,18,26,.97)); }
.equipped-weapon-slot.secondary-slot.is-active { border-color: rgba(255,182,73,.5); }
.equipped-weapon-slot.slot-locked { border-style: dashed; color: #7d8992; }
.weapon-slot-topline { display: flex; align-items: center; justify-content: space-between; color: #7f929b; }
.weapon-slot-topline small { font-size: 7px; font-weight: 800; letter-spacing: .13em; }
.weapon-slot-topline b { color: rgba(92,214,209,.62); font-family: var(--font-display); font-size: 13px; }
.slot-weapon-art { display: grid; width: 100%; height: 67px; margin: 3px 0 1px; overflow: hidden; place-items: center; }
.slot-weapon-art > .weapon-svg { width: 100%; height: 67px; min-width: 0; min-height: 0; max-width: 100%; max-height: 67px; overflow: hidden; }
.slot-weapon-name { display: flex; align-items: center; gap: 7px; color: #e4eded; font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.1; }
.slot-weapon-name i { display: grid; min-width: 25px; height: 22px; place-items: center; border: 1px solid rgba(255,182,73,.3); border-radius: 5px; background: rgba(255,182,73,.08); color: var(--amber); font-size: 12px; font-style: normal; }
.slot-weapon-action { display: flex; justify-content: space-between; margin-top: 7px; padding-top: 6px; border-top: 1px solid rgba(177,202,220,.08); color: #94c7c3; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.slot-weapon-action b { color: var(--cyan); font-size: 11px; line-height: 7px; }
.empty-slot-mark { display: grid; flex: 1; min-height: 65px; place-items: center; color: rgba(92,214,209,.55); font-size: 37px; font-weight: 300; }
.lock-mark { color: #77848b; font-size: 32px; }
.slot-locked .slot-weapon-name { color: #8c989e; }
.slot-unlock-actions { display: flex; gap: 5px; margin-top: 8px; }
.slot-unlock-actions button { flex: 1; min-height: 29px; border: 1px solid rgba(255,182,73,.34); border-radius: 5px; background: rgba(255,182,73,.09); color: #ffd28b; font-family: var(--font-display); font-size: 9px; font-weight: 900; }
.slot-unlock-actions button:disabled { opacity: .38; }
.weapon-detail { margin-top: 12px; }
.weapon-detail-panel { padding: 12px; border: 1px solid rgba(177,202,220,.12); border-radius: 11px; background: linear-gradient(145deg,rgba(18,29,40,.96),rgba(10,17,25,.98)); }
.weapon-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.weapon-detail-heading h3,.weapon-picker-heading h3 { display: flex; align-items: center; gap: 7px; margin: 3px 0 0; font-family: var(--font-display); font-size: 22px; line-height: 1; }
.weapon-detail-heading .rank-badge { display: grid; min-width: 25px; height: 24px; place-items: center; border: 1px solid rgba(255,182,73,.32); border-radius: 6px; background: rgba(255,182,73,.1); color: var(--amber); font-size: 13px; }
.weapon-change-button { min-height: 29px; padding: 5px 8px; border: 1px solid rgba(92,214,209,.25); border-radius: 5px; background: rgba(92,214,209,.07); color: #a5e6df; font-family: var(--font-display); font-size: 9px; font-weight: 800; letter-spacing: .07em; white-space: nowrap; }
.weapon-change-button span { margin-left: 5px; }
.weapon-detail-art { display: grid; height: 94px; margin: 5px 0 9px; overflow: hidden; place-items: center; border: 1px solid rgba(177,202,220,.07); border-radius: 8px; background: radial-gradient(ellipse at 50% 60%,rgba(92,214,209,.1),rgba(5,11,16,.2) 73%); }
.weapon-detail-art > .weapon-svg { width: 100%; height: 92px; min-width: 0; min-height: 0; max-width: 100%; max-height: 92px; overflow: hidden; }
.weapon-detail-upgrades { display: grid; gap: 6px; }
.weapon-detail-upgrade { display: flex; min-height: 49px; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 1px solid rgba(177,202,220,.08); border-radius: 7px; background: rgba(5,11,17,.36); }
.weapon-detail-upgrade > div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; }
.weapon-detail-upgrade > div small { grid-column: 1/-1; color: #788d97; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.weapon-detail-upgrade > div b { color: #d8e5e5; font-size: 10px; }
.weapon-detail-upgrade > div span { color: #788b94; font-size: 7px; }
.weapon-detail-upgrade button { min-width: 79px; min-height: 31px; border: 1px solid rgba(255,182,73,.3); border-radius: 5px; background: rgba(255,182,73,.09); color: var(--amber); font-family: var(--font-display); font-size: 13px; font-weight: 900; white-space: nowrap; }
.weapon-detail-upgrade button small { margin-left: 2px; color: #c5a267; font-family: var(--font-body); font-size: 7px; font-weight: 800; }
.weapon-detail-upgrade button:disabled { opacity: .38; }
.weapon-upgrade-message { min-height: 13px; margin: 8px 1px 0; color: #8ab8b2; font-size: 8px; line-height: 1.4; }
.empty-detail { text-align: center; }
.empty-detail h3 { margin: 5px 0; font-family: var(--font-display); font-size: 20px; }
.empty-detail > p:not(.eyebrow) { margin: 0 0 10px; color: #8b9ca4; font-size: 9px; }
.weapon-picker { margin: 8px 0 12px; scroll-margin-top: 18px; }
.weapon-picker-panel { padding: 11px; border: 1px solid rgba(92,214,209,.17); border-radius: 10px; background: rgba(8,15,22,.92); }
.weapon-picker-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.weapon-picker-heading > button { width: 27px; height: 27px; border: 1px solid rgba(177,202,220,.15); border-radius: 6px; background: rgba(177,202,220,.05); color: #9aa9b0; font-size: 19px; }
.weapon-picker-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.weapon-picker-option { display: grid; min-width: 0; grid-template-columns: 39px minmax(0,1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 2px 6px; padding: 6px; border: 1px solid rgba(177,202,220,.1); border-radius: 7px; background: rgba(17,27,37,.8); text-align: left; }
.weapon-picker-option > span { grid-row: 1/3; display: grid; width: 39px; height: 35px; place-items: center; overflow: hidden; }
.weapon-picker-option > b { overflow: hidden; color: #dce8e6; font-family: var(--font-display); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.weapon-picker-option > small { color: #84949c; font-size: 7px; }
.weapon-picker-option > i { grid-column: 2/4; justify-self: end; color: #8ce1d7; font-size: 6px; font-style: normal; font-weight: 900; letter-spacing: .1em; }
.weapon-picker-empty { color: #95a4ab; font-size: 9px; text-align: center; }
@media (max-width: 520px) { .weapon-picker-list { grid-template-columns: 1fr; } }
@media (max-width: 420px) {
  .resource-name { display: none; }
  .character-loadout-panel { grid-template-columns: .9fr 1.1fr; min-height: 200px; }
  .character-stage { min-height: 200px; }
  .character-stage-ring { width: 130px; height: 130px; }
  .character-stage-ring-inner { width: 94px; height: 94px; }
  .character-copy { padding-right: 9px; }
  .character-copy h3 { font-size: 19px; }
  .character-copy > p:not(.eyebrow) { font-size: 8px; }
  .dashboard-layout { grid-template-columns: minmax(0,1fr) minmax(0,1.18fr) minmax(0,1fr); gap: 5px; }
  .dashboard-item { padding-inline: 4px; }
  .dashboard-weapon-card > b,.dashboard-drone-card > b { font-size: 12px; }
  .dashboard-weapon-art { height: 52px; }
  .dashboard-character-stage { min-height: 220px; }
  .dashboard-character-stage .loadout-character { transform: scale(.96); }
  .dashboard-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-stat { padding-inline: 8px; }
  .dashboard-bottom-row { grid-template-columns: minmax(0,1fr) minmax(135px,.8fr); gap: 5px; }
}
@media (max-width: 370px) {
  .menu-nav-button { gap: 3px; font-size: 8px; letter-spacing: .06em; }
  .menu-nav-button span { font-size: 12px; }
  .character-status { font-size: 6px; }
  .weapon-picker-list { grid-template-columns: 1fr; }
  .weapon-detail-upgrade > div { grid-template-columns: 1fr; }
  .weapon-detail-upgrade > div span { grid-column: auto; }
  .topbar { gap: 5px; }
  .brand-name { font-size: 17px; }
  .top-resources { gap: 3px; }
  .resource-chip { min-width: 39px; gap: 4px; padding-inline: 5px; }
  .resource-chip .resource-glyph { width: 12px; }
  .brand-mark { width: 27px; height: 27px; }
  .brand-lockup { gap: 6px; }
  .brand-lockup .eyebrow { font-size: 6px; letter-spacing: .12em; }
  .dashboard-layout { grid-template-columns: minmax(0,.95fr) minmax(0,1.12fr) minmax(0,.95fr); gap: 4px; }
  .dashboard-item-label { font-size: 6px; }
  .dashboard-weapon-art { height: 47px; }
  .dashboard-weapon-card > b,.dashboard-drone-card > b { font-size: 11px; }
  .dashboard-weapon-card > small,.dashboard-drone-card > small { font-size: 5px; }
  .dashboard-character-stage .loadout-character { transform: scale(.72); }
  .dashboard-stat { min-height: 65px; padding: 6px 6px; }
  .dashboard-stat-top > small,.dashboard-stat-top > em,.dashboard-stat-upgrade small { font-size: 5px; }
  .dashboard-stat b { font-size: 14px; }
  .dashboard-bottom-row { grid-template-columns: 1fr; }
  .dashboard-bottom-row .start-button { min-height: 40px; }
}

/* Postavy a samostatný obchod */
.hero-fragment-wallet { display: flex; min-width: 104px; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid rgba(92,214,209,.18); border-radius: 8px; background: rgba(22,48,49,.35); }
.hero-fragment-wallet svg { width: 19px; height: 17px; }
.hero-fragment-wallet b { color: #d8fff6; font-family: var(--font-display); font-size: 15px; }
.hero-fragment-wallet small { color: #7da9a5; font-size: 6px; font-weight: 800; letter-spacing: .08em; }
.hero-fragment-resource .resource-icon { fill: rgba(102,226,211,.28); stroke: #79e0d0; }
.bag-fusion-note { margin: 9px 0 12px; padding: 8px 10px; border: 1px solid rgba(92,214,209,.16); border-radius: 7px; background: rgba(18,45,46,.3); color: #a9d9d4; font-size: 8px; font-weight: 800; line-height: 1.45; }
.shop-view,.heroes-view,.hero-upgrades-view { padding: 4px 0 18px; }
.shop-info-note { display: flex; align-items: center; gap: 9px; margin: -2px 0 14px; padding: 10px 11px; border: 1px solid rgba(92,214,209,.15); border-radius: 9px; background: linear-gradient(110deg,rgba(92,214,209,.08),rgba(12,20,29,.7)); }
.shop-info-note > span { color: #9fe2d5; font-size: 18px; }
.shop-info-note p { margin: 0; color: #94a7aa; font-size: 8px; line-height: 1.5; }
.shop-section-heading,.hero-roster-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin: 14px 0 8px; }
.shop-section-heading h3,.hero-roster-heading h3 { margin: 2px 0 0; color: #deebe8; font-family: var(--font-display); font-size: 17px; }
.shop-section-heading > small,.hero-roster-heading > small { max-width: 52%; color: #748991; font-size: 6px; font-weight: 800; line-height: 1.45; letter-spacing: .08em; text-align: right; }
.featured-crate-grid { margin-bottom: 3px; }
.featured-crate { --crate-accent:#c285f3; background:radial-gradient(ellipse at 50% 36%,rgba(161,100,224,.18),rgba(15,23,33,.96) 72%); }
.featured-crate > b { color: #e1c8ff; }
.drone-crate,.drone-fragment-crate { --crate-accent:#4edce4; background:radial-gradient(ellipse at 50% 36%,rgba(60,207,222,.18),rgba(15,23,33,.96) 72%); }
.drone-crate > b,.drone-fragment-crate > b { color: #b8f5f3; }
.weapon-fragment-crate { --crate-accent:#a9d36c; background:radial-gradient(ellipse at 50% 36%,rgba(143,191,76,.18),rgba(15,23,33,.96) 72%); }
.weapon-fragment-crate > b { color: #dbefbd; }
.weapon-fragment-crate button { border-color: rgba(151,193,92,.46); background: rgba(118,154,63,.13); color: #b9dc84; }
.drone-collection-heading { margin-top: 18px; }
.weapon-crates-heading { margin-top: 22px; }
.drone-model-grid { display: grid; gap: 6px; }
.drone-model-card { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 8px 9px; border: 1px solid color-mix(in srgb,var(--hero-color) 28%,transparent); border-radius: 8px; background: linear-gradient(100deg,color-mix(in srgb,var(--hero-color) 8%,transparent),rgba(12,19,28,.92)); }
.drone-model-card.is-locked { opacity: .62; }
.drone-model-symbol { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid color-mix(in srgb,var(--hero-color) 60%,transparent); border-radius: 9px; background: color-mix(in srgb,var(--hero-color) 15%,transparent); color: var(--hero-color); font-size: 18px; font-weight: 900; }
.drone-model-card > div { min-width: 0; }
.drone-model-card small { display: block; color: #82959c; font-size: 5px; font-weight: 800; letter-spacing: .08em; }
.drone-model-card b { display: block; margin-top: 2px; color: #d9e8e7; font-family: var(--font-display); font-size: 10px; }
.drone-model-card p { margin: 2px 0 0; color: #788a93; font-size: 7px; line-height: 1.35; }
.drone-model-card button { min-width: 60px; border: 1px solid color-mix(in srgb,var(--hero-color) 45%,transparent); border-radius: 5px; padding: 6px 7px; background: color-mix(in srgb,var(--hero-color) 10%,transparent); color: var(--hero-color); font-family: var(--font-display); font-size: 6px; font-weight: 800; }
.drone-model-card button:disabled { opacity: .6; }
.crate-card .crate-info-button { position: absolute; z-index: 2; top: 7px; right: 7px; display: grid; width: 24px; min-height: 24px; place-items: center; border: 1px solid rgba(159,226,213,.48); border-radius: 50%; padding: 0; background: rgba(9,19,27,.88); color: #a8eee1; font-family: var(--font-display); font-size: 13px; font-weight: 900; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.crate-card .crate-info-button[aria-expanded="true"] { border-color: rgba(159,226,213,.8); background: rgba(51,121,115,.55); color: #edfffb; box-shadow: 0 0 12px rgba(92,214,209,.22); }
.crate-info-panel { margin: 7px 0 13px; padding: 12px; border: 1px solid rgba(92,214,209,.22); border-radius: 10px; background: radial-gradient(ellipse at 8% 0,rgba(92,214,209,.09),transparent 45%),linear-gradient(145deg,rgba(13,23,32,.98),rgba(7,13,20,.98)); box-shadow: inset 0 1px rgba(255,255,255,.025),0 8px 24px rgba(0,0,0,.2); }
.crate-info-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.crate-info-heading .eyebrow { margin: 0 0 3px; color: #8dbdb6; font-size: 6px; font-weight: 900; letter-spacing: .12em; }
.crate-info-heading h4 { margin: 0; color: #e7f3ef; font-family: var(--font-display); font-size: 16px; }
.crate-info-close { flex: 0 0 auto; border: 1px solid rgba(166,188,197,.16); border-radius: 5px; padding: 6px 8px; background: rgba(255,255,255,.035); color: #9eafb2; font-family: var(--font-display); font-size: 7px; font-weight: 800; }
.crate-info-copy { margin: 0 0 9px; color: #9bafb2; font-size: 8px; line-height: 1.55; }
.crate-info-copy b { color: #d5f0e9; }
.crate-info-subheading { margin: 11px 0 6px; color: #8ba6aa; font-size: 6px; font-weight: 900; letter-spacing: .12em; }
.crate-hero-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; }
.crate-hero-row { display: flex; min-width: 0; flex-direction: column; gap: 2px; padding: 6px 7px; border: 1px solid rgba(177,202,220,.08); border-radius: 5px; background: rgba(4,10,15,.3); }
.crate-hero-row b { overflow: hidden; color: #d7e7e4; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.crate-hero-row span { color: #82969a; font-size: 7px; line-height: 1.3; }
.drone-howto-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; margin: 8px 0 10px; }
.drone-howto-grid > div { display: flex; flex-direction: column; gap: 3px; padding: 7px; border: 1px solid rgba(116,176,228,.13); border-radius: 6px; background: rgba(28,59,82,.16); }
.drone-howto-grid b { color: #b9d5f5; font-size: 7px; }
.drone-howto-grid span { color: #8a9da5; font-size: 7px; line-height: 1.4; }
.crate-info-panel .drone-model-grid { gap: 5px; }
.crate-info-panel .drone-model-card { grid-template-columns: 32px minmax(0,1fr) auto; gap: 7px; padding: 7px; }
.crate-info-panel .drone-model-card small { font-size: 6px; }
.crate-info-panel .drone-model-card b { font-size: 9px; }
.crate-info-panel .drone-model-card p { color: #94a7a9; font-size: 7px; line-height: 1.45; }
.crate-info-panel .drone-model-card .drone-level-effect { color: #7f969c; }
.crate-info-panel .drone-model-card button { min-width: 64px; width: auto; min-height: 28px; padding: 5px; font-size: 6px; }
.crate-info-panel .drone-model-card.drone-crate-model-card { grid-template-columns: 54px minmax(0,1fr); align-items: start; gap: 8px; padding: 8px; }
.drone-crate-art { display: grid; min-height: 45px; place-items: center; border: 1px solid color-mix(in srgb,var(--hero-color) 44%,transparent); border-radius: 7px; background: color-mix(in srgb,var(--hero-color) 10%,transparent); }
.drone-crate-art .drone-card-art { width: 52px; height: 40px; }
.drone-model-copy { min-width: 0; }
.crate-info-panel .drone-model-card.drone-crate-model-card .drone-model-copy > small { font-size: 6px; }
.crate-info-panel .drone-model-card.drone-crate-model-card .drone-model-copy > b { font-size: 9px; }
.drone-crate-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; margin-top: 6px; }
.drone-crate-stats > span { display: flex; min-width: 0; flex-direction: column; gap: 2px; padding: 5px; border: 1px solid rgba(177,202,220,.09); border-radius: 5px; background: rgba(4,11,17,.28); color: #80949b; font-size: 5px; line-height: 1.2; }
.drone-crate-stats > span > b { color: #d4e4e4; font-family: var(--font-display); font-size: 7px; }
.crate-info-panel .drone-model-card.drone-crate-model-card .drone-model-copy > p { margin-top: 5px; color: #9aabad; font-size: 6px; line-height: 1.4; }
.crate-weapon-grid { display: grid; gap: 6px; }
.crate-weapon-detail { min-width: 0; padding: 7px; border: 1px solid rgba(177,202,220,.1); border-radius: 7px; background: rgba(5,12,18,.42); }
.crate-weapon-heading { display: flex; min-width: 0; align-items: center; gap: 7px; }
.crate-weapon-heading > span { display: block; flex: 0 0 65px; width: 65px; height: 34px; overflow: hidden; border: 1px solid rgba(92,214,209,.1); border-radius: 5px; background: radial-gradient(ellipse,rgba(92,214,209,.07),transparent); }
.crate-weapon-heading .weapon-svg { height: 34px; }
.crate-weapon-heading > div { min-width: 0; }
.crate-weapon-heading b { display: block; color: #e0ece8; font-family: var(--font-display); font-size: 9px; }
.crate-weapon-heading small { color: #7f9398; font-size: 6px; }
.crate-weapon-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; margin-top: 6px; }
.crate-weapon-stats span { display: flex; min-width: 0; justify-content: space-between; gap: 3px; padding: 4px 5px; border-radius: 4px; background: rgba(255,255,255,.025); color: #7f9297; font-size: 6px; }
.crate-weapon-stats b { color: #c6d8d4; font-size: 6px; white-space: nowrap; }
.crate-weapon-stats .crate-weapon-dps { grid-column: 1 / -1; border: 1px solid rgba(98,216,201,.18); color: #98d8cd; }
.crate-weapon-stats .crate-weapon-dps b { color: #8be9d5; }
@media (min-width: 620px) { .crate-weapon-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 370px) { .crate-info-panel { padding: 9px; } .crate-hero-list,.drone-howto-grid { grid-template-columns: 1fr; } .crate-info-panel .drone-model-card { grid-template-columns: 28px minmax(0,1fr); } .crate-info-panel .drone-model-card.drone-crate-model-card { grid-template-columns: 42px minmax(0,1fr); } .drone-crate-art { min-height: 40px; } .drone-crate-art .drone-card-art { width: 42px; height: 34px; } .drone-crate-stats { grid-template-columns: repeat(2,minmax(0,1fr)); } .crate-info-panel .drone-model-card button { grid-column: 2; justify-self: start; } .crate-weapon-stats span { flex-direction: column; } }
.active-hero-panel { display: block; grid-template-columns: 112px minmax(0,1fr); gap: 11px; overflow: hidden; padding: 11px; border: 1px solid color-mix(in srgb,var(--hero-accent) 32%,transparent); border-radius: 12px; background: radial-gradient(ellipse at 10% 15%,color-mix(in srgb,var(--hero-accent) 13%,transparent),transparent 53%),linear-gradient(135deg,rgba(15,28,36,.96),rgba(9,15,23,.98)); }
.active-hero-art { display: flex; min-height: 145px; flex-direction: column; align-items: center; justify-content: center; gap: 1px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--hero-color) 30%,transparent); border-radius: 9px; background: radial-gradient(ellipse at 50% 42%,color-mix(in srgb,var(--hero-color) 18%,transparent),rgba(4,10,15,.35) 70%); }
.hero-portrait { display: block; width: 74px; height: 88px; overflow: visible; filter: drop-shadow(0 0 6px color-mix(in srgb,var(--hero-color,#62d8c9) 30%,transparent)) drop-shadow(0 5px 7px rgba(0,0,0,.4)); }
.active-hero-art > span { color: var(--hero-color); font-size: 5px; font-weight: 900; letter-spacing: .11em; }
.active-hero-copy { min-width: 0; align-self: center; }
.active-hero-copy h3 { margin: 3px 0 5px; color: #edf8f4; font-family: var(--font-display); font-size: 21px; line-height: 1.05; }
.active-hero-copy > p:not(.eyebrow) { margin: 0; color: #a5b5b7; font-size: 8px; line-height: 1.5; }
.active-hero-copy .eyebrow { margin: 0; color: var(--hero-accent); font-size: 6px; }
.hero-stat-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; margin-top: 10px; }
.hero-stat-row span { display: flex; min-width: 0; flex-direction: column; gap: 2px; padding: 5px 6px; border: 1px solid rgba(183,209,215,.09); border-radius: 5px; background: rgba(4,10,15,.38); }
.hero-stat-row small { color: #758c94; font-size: 5px; font-weight: 800; }
.hero-stat-row b { overflow: hidden; color: #d5e8e5; font-family: var(--font-display); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.hero-roster-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.hero-card { display: flex; min-width: 0; flex-direction: column; gap: 7px; padding: 8px; border: 1px solid color-mix(in srgb,var(--hero-color) 22%,transparent); border-radius: 9px; background: linear-gradient(145deg,color-mix(in srgb,var(--hero-color) 6%,transparent),rgba(10,17,25,.96) 56%); }
.hero-card.is-locked { border-color: rgba(171,192,201,.12); background: linear-gradient(145deg,rgba(151,169,176,.035),rgba(10,17,25,.96) 56%); }
.hero-card.is-active { border-color: color-mix(in srgb,var(--hero-color) 55%,transparent); box-shadow: inset 0 0 18px color-mix(in srgb,var(--hero-color) 7%,transparent),0 0 12px color-mix(in srgb,var(--hero-color) 8%,transparent); }
.hero-card-top { display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 7px; }
.hero-card-portrait { display: grid; width: 48px; height: 57px; place-items: end center; overflow: hidden; border: 1px solid color-mix(in srgb,var(--hero-color) 28%,transparent); border-radius: 7px; background: radial-gradient(ellipse at 50% 42%,color-mix(in srgb,var(--hero-color) 15%,transparent),rgba(4,9,14,.55)); }
.hero-card-portrait .hero-portrait { width: 47px; height: 55px; }
.hero-card-heading { min-width: 0; }
.hero-card-heading small { display: block; overflow: hidden; color: var(--hero-color); font-size: 5px; font-weight: 800; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.hero-card-heading strong { display: block; overflow: hidden; margin: 3px 0; color: #e5efec; font-family: var(--font-display); font-size: 12px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.hero-card-heading span { color: #82959b; font-size: 6px; font-weight: 800; }
.hero-card-stats { display: flex; justify-content: space-between; gap: 4px; color: #c3d7d2; font-size: 7px; font-weight: 800; }
.hero-ability { min-height: 53px; padding: 6px; border: 1px solid rgba(174,204,210,.08); border-radius: 6px; background: rgba(3,9,14,.3); }
.hero-ability b { color: var(--hero-color); font-family: var(--font-display); font-size: 8px; }
.hero-ability p { margin: 3px 0 0; color: #8e9fa4; font-size: 6px; line-height: 1.45; }
.hero-progress > div { display: flex; justify-content: space-between; gap: 3px; color: #7f9398; font-size: 5px; font-weight: 700; }
.hero-progress > div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-progress > div b { flex: 0 0 auto; color: #9ccac2; }
.hero-progress > i { display: block; height: 3px; margin-top: 4px; overflow: hidden; border-radius: 4px; background: rgba(177,202,220,.12); }
.hero-progress > i span { display: block; height: 100%; border-radius: inherit; background: var(--hero-color); box-shadow: 0 0 6px var(--hero-color); }
.hero-primary-action,.hero-select-action,.hero-upgrade-action { min-height: 28px; border: 1px solid color-mix(in srgb,var(--hero-color) 38%,transparent); border-radius: 5px; padding: 5px 4px; background: color-mix(in srgb,var(--hero-color) 10%,transparent); color: var(--hero-color); font-family: var(--font-display); font-size: 6px; font-weight: 900; letter-spacing: .02em; }
.hero-action-row { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4px; }
.hero-upgrade-action { border-color: rgba(255,190,99,.3); background: rgba(255,190,99,.08); color: #e3b971; }
.hero-card button:disabled { opacity: .4; }
.hero-fragment-resource { border-color: rgba(92,214,209,.15); }
@media (min-width: 700px) { .hero-roster-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .hero-ability p { font-size: 7px; } }
@media (max-width: 370px) { .menu-nav-button { gap: 2px; font-size: 7px; letter-spacing: .035em; } .active-hero-panel { grid-template-columns: 91px minmax(0,1fr); gap: 8px; padding: 8px; } .active-hero-art { min-height: 130px; } .hero-stat-row { gap: 2px; } .hero-stat-row span { padding-inline: 3px; } .hero-stat-row b { font-size: 7px; } .hero-card { padding: 6px; } }

/* Kompaktná zbierka a čitateľné farby stupňov zbraní */
.weapon-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.weapon-card.rank-D { --weapon-rank: #69dc8c; }
.weapon-card.rank-C { --weapon-rank: #e17845; }
.weapon-card.rank-B { --weapon-rank: #efd05b; }
.weapon-card.rank-A { --weapon-rank: #f26372; }
.weapon-card.rank-S { --weapon-rank: #68caff; }
.weapon-card.rank-Splus { --weapon-rank: #d8e2eb; }
.weapon-card.rank-SSplus { --weapon-rank: #ffd166; }
.weapon-card .weapon-card-rank.rank-D,.rank-badge.rank-D { border-color: #69dc8c; background: rgba(72,187,111,.2); color: #8cf1aa; }
.weapon-card .weapon-card-rank.rank-C,.rank-badge.rank-C { border-color: #e17845; background: rgba(180,80,40,.22); color: #ff986b; }
.weapon-card .weapon-card-rank.rank-B,.rank-badge.rank-B { border-color: #efd05b; background: rgba(190,158,54,.2); color: #ffe57c; }
.weapon-card .weapon-card-rank.rank-A,.rank-badge.rank-A { border-color: #f26372; background: rgba(191,58,74,.2); color: #ff8290; }
.weapon-card .weapon-card-rank.rank-S,.rank-badge.rank-S { border-color: #68caff; background: rgba(47,131,188,.2); color: #89d8ff; box-shadow: 0 0 9px rgba(104,202,255,.1); }
.weapon-card .weapon-card-rank.rank-Splus,.rank-badge.rank-Splus { border-color: #d8e2eb; background: linear-gradient(145deg,rgba(228,237,245,.23),rgba(109,128,146,.18)); color: #f1f7fc; box-shadow: 0 0 10px rgba(216,226,235,.18); }
.weapon-card .weapon-card-rank.rank-SSplus,.rank-badge.rank-SSplus { border-color: #ffd166; background: linear-gradient(145deg,rgba(255,222,132,.28),rgba(174,112,34,.2)); color: #ffe49a; box-shadow: 0 0 12px rgba(255,209,102,.22); }
.equipped-weapon-slot.rank-D { border-color: rgba(105,220,140,.42); }
.equipped-weapon-slot.rank-C { border-color: rgba(225,120,69,.48); }
.equipped-weapon-slot.rank-B { border-color: rgba(239,208,91,.48); }
.equipped-weapon-slot.rank-A { border-color: rgba(242,99,114,.48); }
.equipped-weapon-slot.rank-S { border-color: rgba(104,202,255,.5); }
.equipped-weapon-slot.rank-Splus { border-color: rgba(216,226,235,.58); }
.equipped-weapon-slot.rank-SSplus { border-color: rgba(255,209,102,.62); }
.weapon-card.rank-SS { --weapon-rank: #ffd166; }
.weapon-card .weapon-card-rank.rank-SS,.rank-badge.rank-SS { border-color: #ffd166; background: linear-gradient(145deg,rgba(255,222,132,.28),rgba(174,112,34,.2)); color: #ffe49a; box-shadow: 0 0 12px rgba(255,209,102,.22); }
.drone-grid { margin-top: 2px; }
.drone-card .drone-art-wrap { display: grid; width: 100%; height: 53px; place-items: center; }
.drone-card-art { width: min(100%,82px); height: 100%; overflow: visible; filter: drop-shadow(0 0 8px color-mix(in srgb,var(--drone-accent,#70ddd0) 28%,transparent)); }
.drone-card.is-equipped { box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--weapon-rank,#7ddbcf) 25%,transparent),0 0 0 1px rgba(92,214,209,.34),0 0 10px rgba(92,214,209,.12); }
.dashboard-drone-card.is-selected { border-color: rgba(255,190,92,.75); box-shadow: 0 0 0 1px rgba(255,190,92,.27),0 0 14px rgba(255,190,92,.1); }
.dashboard-drone-card:not(.is-locked):not(.is-selected) { border-color: color-mix(in srgb,var(--drone-rank-color,#5cd6d1) 50%,transparent); }
.drone-model-card { grid-template-columns: 32px minmax(0,1fr); }
.dashboard-drone-detail { margin: 10px 0 12px; }
.drone-parts-panel { display: grid; gap: 11px; }
.drone-base-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.drone-base-heading h3 { display: flex; align-items: center; gap: 7px; }
.drone-level-box { display: grid; min-width: 62px; gap: 3px; place-items: center; padding: 7px; border: 1px solid rgba(123,216,238,.22); border-radius: 7px; background: rgba(123,216,238,.06); }
.drone-level-box small { color: #7e9da3; font-size: 6px; font-weight: 900; letter-spacing: .1em; }
.drone-level-box b { color: #a9eaf0; font-family: var(--font-display); font-size: 16px; }
.drone-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.drone-choice { display: flex; min-width: 0; align-items: center; gap: 7px; padding: 7px; border: 1px solid rgba(161,190,200,.12); border-radius: 7px; background: rgba(4,11,17,.48); color: #dce9e6; text-align: left; }
.drone-choice.is-active { border-color: color-mix(in srgb,var(--hero-color,#70ddd0) 48%,transparent); background: color-mix(in srgb,var(--hero-color,#70ddd0) 8%,rgba(5,12,18,.82)); }
.drone-choice.is-locked { opacity: .48; }
.drone-choice-symbol { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border: 1px solid color-mix(in srgb,var(--drone-accent,#70ddd0) 38%,transparent); border-radius: 6px; background: color-mix(in srgb,var(--drone-accent,#70ddd0) 9%,transparent); color: var(--drone-accent,#70ddd0); font-size: 15px; }
.drone-choice > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.drone-choice > span:nth-child(2) b { overflow: hidden; font-family: var(--font-display); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.drone-choice > span:nth-child(2) small { color: #819398; font-size: 6px; }
.drone-choice .rank-badge { margin-left: auto; min-width: 19px; padding: 3px; border: 1px solid currentColor; border-radius: 4px; font-size: 8px; font-weight: 900; text-align: center; }
.drone-upgrade-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(177,202,220,.09); }
.drone-upgrade-row > small { color: #82999e; font-size: 7px; line-height: 1.45; }
.drone-upgrade-row > small b { color: #a6e7ee; }
.drone-upgrade-row > button { flex: 0 0 auto; min-height: 34px; padding: 6px 9px; border: 1px solid rgba(123,216,238,.32); border-radius: 5px; background: rgba(123,216,238,.1); color: #8de1f0; font-size: 8px; font-weight: 900; }
.drone-upgrade-row > button:disabled { opacity: .42; }
.drone-fusion-copy .drone-card-art { max-width: 76px; }
.bag-drones-heading { margin-top: 22px; }
.rank-badge.rank-D { border-color: #69dc8c; background: rgba(72,187,111,.2); color: #8cf1aa; }
.rank-badge.rank-C { border-color: #e17845; background: rgba(180,80,40,.22); color: #ff986b; }
.rank-badge.rank-B { border-color: #efd05b; background: rgba(190,158,54,.2); color: #ffe57c; }
.rank-badge.rank-A { border-color: #f26372; background: rgba(191,58,74,.2); color: #ff8290; }
.rank-badge.rank-S { border-color: #68caff; background: rgba(47,131,188,.2); color: #89d8ff; box-shadow: 0 0 9px rgba(104,202,255,.1); }
@media (max-width: 420px) { .drone-choice-grid { grid-template-columns: 1fr; } .drone-upgrade-row { align-items: stretch; flex-direction: column; } .drone-upgrade-row > button { width: 100%; } }
@media (min-width: 430px) { .weapon-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (min-width: 700px) { .weapon-grid { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; } .weapon-card { padding: 6px; } .weapon-card-name { font-size: 10px; } .weapon-art { height: 53px; } }
@media (min-width: 1000px) { .weapon-grid { grid-template-columns: repeat(6,minmax(0,1fr)); } }

/* Samostatné výpravy s rastúcou obtiažnosťou a vlastnou korisťou */
.mode-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 18px 0 8px; }
.mode-section-heading h3 { margin: 2px 0 0; color: #e3ece9; font-family: var(--font-display); font-size: 18px; }
.mode-section-heading > small { color: #6f848d; font-size: 7px; font-weight: 800; letter-spacing: .1em; text-align: right; }
.resource-mode-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.resource-mode-card { display: flex; min-width: 0; flex-direction: column; gap: 8px; padding: 11px; border: 1px solid color-mix(in srgb,var(--mode-accent) 25%,transparent); border-radius: 11px; background: radial-gradient(ellipse at 90% 0%,color-mix(in srgb,var(--mode-accent) 8%,transparent),transparent 52%),linear-gradient(150deg,rgba(18,29,40,.96),rgba(9,16,23,.98)); }
.resource-mode-card-head { display: flex; align-items: center; gap: 8px; }
.resource-mode-icon { display: grid; width: 31px; height: 31px; flex: none; place-items: center; border: 1px solid color-mix(in srgb,var(--mode-accent) 38%,transparent); border-radius: 8px; background: color-mix(in srgb,var(--mode-accent) 9%,transparent); }
.resource-mode-icon svg,.resource-mode-reward svg { width: 23px; height: 23px; }
.resource-mode-card-head > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.resource-mode-card-head small { color: var(--mode-accent); font-size: 6px; font-weight: 900; letter-spacing: .12em; }
.resource-mode-card-head b { color: #eaf2ee; font-family: var(--font-display); font-size: 14px; }
.resource-mode-card-head em { margin-left: auto; color: #71858e; font-size: 8px; font-style: normal; }
.resource-mode-card h4 { margin: 0; color: #f0f4ef; font-size: 12px; }
.resource-mode-story { min-height: 50px; margin: 0; color: #91a3a7; font-size: 9px; line-height: 1.5; }
.resource-mode-meta { display: flex; justify-content: space-between; gap: 4px; color: #71878e; font-size: 7px; font-weight: 800; }
.resource-mode-reward { display: grid; gap: 3px; padding: 7px; border-radius: 6px; background: color-mix(in srgb,var(--mode-accent) 7%,transparent); }
.resource-mode-reward > span { display: flex; align-items: center; gap: 5px; color: var(--mode-accent); font-size: 7px; font-weight: 900; }
.resource-mode-reward svg { width: 17px; height: 17px; }
.resource-mode-reward small { color: #778d93; font-size: 7px; line-height: 1.4; }
.mode-target-picker { display: grid; gap: 4px; color: #83969a; font-size: 7px; font-weight: 800; }
.mode-target-picker select { width: 100%; min-height: 29px; padding: 4px 6px; border: 1px solid color-mix(in srgb,var(--mode-accent) 28%,transparent); border-radius: 5px; background: #0c171d; color: #dce8e4; font: inherit; }
.resource-mode-footer { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-top: auto; padding-top: 4px; }
.resource-mode-footer > small { color: #77898e; font-size: 7px; line-height: 1.4; }
.resource-mode-footer button { min-height: 30px; flex: none; padding: 5px 8px; border: 1px solid color-mix(in srgb,var(--mode-accent) 42%,transparent); border-radius: 5px; background: color-mix(in srgb,var(--mode-accent) 12%,transparent); color: var(--mode-accent); font-family: var(--font-display); font-size: 8px; font-weight: 900; }
.resource-mode-footer button span { margin-left: 5px; }
.drone-parts-upgrade { margin: 10px 0 16px; }
.drone-parts-panel { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px; border: 1px solid rgba(123,216,238,.2); border-radius: 9px; background: linear-gradient(135deg,rgba(22,47,57,.7),rgba(10,18,26,.96)); }
.drone-parts-panel h3 { margin: 3px 0; color: #e5f4f4; font-family: var(--font-display); font-size: 15px; }
.drone-parts-panel p:not(.eyebrow) { margin: 3px 0; color: #899da2; font-size: 8px; }
.drone-parts-panel > div > small { color: #78c8d8; font-size: 8px; }
.drone-parts-panel button { display: flex; min-height: 34px; align-items: center; justify-content: center; gap: 4px; padding: 6px 8px; border: 1px solid rgba(123,216,238,.32); border-radius: 5px; background: rgba(123,216,238,.1); color: #8de1f0; font-size: 8px; font-weight: 900; white-space: nowrap; }
.drone-parts-panel button svg { width: 18px; height: 16px; }
.drone-parts-panel button:disabled { opacity: .42; }
.mode-hud-resource { min-width: 94px; }
.mode-hud-resource > small { color: #91adb5; font-size: 6px; font-weight: 900; letter-spacing: .08em; }
.core-objective-hud { position:absolute; top:calc(100% + 8px); left:0; display:grid; width:min(154px,44vw); gap:4px; padding:6px 8px; border:1px solid rgba(105,211,232,.22); border-radius:8px; background:rgba(7,16,23,.84); color:#e5f6f8; box-shadow:0 4px 14px rgba(0,0,0,.26); backdrop-filter:blur(8px); }
.core-objective-hud.is-smoking { border-color:rgba(255,184,93,.48); box-shadow:0 0 12px rgba(255,156,74,.13); }
.core-objective-hud.is-burning { border-color:rgba(255,101,73,.66); box-shadow:0 0 16px rgba(255,84,53,.22); }
.core-objective-heading,.core-objective-foot { display:flex; align-items:center; justify-content:space-between; gap:7px; }
.core-objective-heading > span { color:#9db5bc; font-size:6px; font-weight:900; letter-spacing:.08em; }
.core-objective-heading > b { color:#8fe8ff; font-family:var(--font-display); font-size:10px; font-variant-numeric:tabular-nums; }
.core-objective-hud.is-smoking .core-objective-heading > b { color:#ffc171; }
.core-objective-hud.is-burning .core-objective-heading > b { color:#ff8c68; }
.core-heat-track { height:5px; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:5px; background:rgba(2,7,11,.72); }
.core-heat-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#38c7eb,#90edff); box-shadow:0 0 7px rgba(57,207,240,.52); }
.core-objective-hud.is-smoking .core-heat-track i { background:linear-gradient(90deg,#e4a044,#ffd180); box-shadow:0 0 8px rgba(255,176,73,.56); }
.core-objective-hud.is-burning .core-heat-track i { background:linear-gradient(90deg,#e6543d,#ffbd58); box-shadow:0 0 9px rgba(255,82,46,.66); }
.core-objective-foot { color:#91a8ae; font-size:6px; font-weight:900; letter-spacing:.07em; }
.core-objective-hud.is-smoking .core-objective-foot > span:first-child { color:#ffc171; }
.core-objective-hud.is-burning .core-objective-foot > span:first-child { color:#ff8c68; }
.core-coolant-count { display:flex; align-items:center; gap:3px; color:#7eddf7; }
.core-coolant-count svg { width:9px; height:11px; fill:#34bde7; stroke:#c0f4ff; stroke-width:1.2; }
.core-coolant-count b { font-size:7px; font-variant-numeric:tabular-nums; }
.core-coolant-count small { color:#91d5e2; font-size:6px; font-weight:900; letter-spacing:0; }
.bag-resource.drone-part-resource { border-color: rgba(123,216,238,.2); }
.bag-resource.weapon-fragment-resource { border-color: rgba(212,170,255,.2); }
.weapon-detail-upgrade button { min-width: 92px; max-width: 136px; white-space: normal; }
.weapon-detail-upgrade button small { display: inline-block; white-space: normal; }
@media (max-width: 680px) { .resource-mode-grid { grid-template-columns: 1fr; } .resource-mode-story { min-height: 0; } .resource-mode-card { gap: 7px; } }
@media (max-width: 420px) { .mode-section-heading { align-items: start; flex-direction: column; gap: 4px; } .mode-section-heading > small { text-align: left; } .drone-parts-panel { align-items: stretch; flex-direction: column; } .drone-parts-panel button { width: 100%; } }

/* Resource identity: brighter, dimensional icons with a distinct palette. */
.resource-chip { position: relative; overflow: hidden; border-color: color-mix(in srgb,var(--resource-accent,#aebfc3) 26%,transparent); background: radial-gradient(ellipse at 12% 50%,color-mix(in srgb,var(--resource-accent,#aebfc3) 14%,transparent),transparent 76%),rgba(16,25,36,.9); }
.resource-chip::before { position: absolute; top: 0; left: 9px; width: 19px; height: 1px; background: var(--resource-accent,#aebfc3); box-shadow: 0 0 8px color-mix(in srgb,var(--resource-accent,#aebfc3) 75%,transparent); content: ''; }
.resource-chip .resource-glyph { width: 17px; height: 16px; filter: drop-shadow(0 0 4px color-mix(in srgb,var(--resource-accent,#aebfc3) 48%,transparent)); }
.resource-chip b { color: color-mix(in srgb,var(--resource-accent,#e8eff0) 70%,white); }
.credit-chip { --resource-accent:#ffc66b; }
.scrap-chip { --resource-accent:#9dbcc0; }
.core-chip { --resource-accent:#c99cff; border-color: color-mix(in srgb,var(--resource-accent) 35%,transparent); background: radial-gradient(ellipse at 12% 50%,rgba(194,141,255,.19),transparent 77%),rgba(16,25,36,.9); }
.core-chip .resource-glyph { fill: none; stroke: inherit; filter: drop-shadow(0 0 5px rgba(200,151,255,.55)); }
.bag-resource { --resource-accent:#aebfc3; position: relative; min-height: 74px; padding: 6px 3px 7px; border-color: color-mix(in srgb,var(--resource-accent) 28%,transparent); background: radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--resource-accent) 17%,transparent),transparent 70%),linear-gradient(145deg,rgba(19,29,41,.96),rgba(11,19,28,.98)); box-shadow: inset 0 1px 0 color-mix(in srgb,var(--resource-accent) 17%,transparent); }
.bag-resource::before { position: absolute; top: 0; left: 50%; width: 25px; height: 1px; transform: translateX(-50%); background: var(--resource-accent); box-shadow: 0 0 9px color-mix(in srgb,var(--resource-accent) 75%,transparent); content: ''; }
.bag-resource .resource-icon { width: 33px; height: 28px; filter: drop-shadow(0 2px 5px color-mix(in srgb,var(--resource-accent) 36%,transparent)); }
.bag-resource small { color: color-mix(in srgb,var(--resource-accent) 54%,#82909b); font-size: 6.5px; }
.bag-resource b { color: color-mix(in srgb,var(--resource-accent) 28%,#f2f5f4); font-family: var(--font-display); font-size: 14px; font-weight: 800; line-height: 1; }
.credit-resource { --resource-accent:#ffc66b; }
.scrap-resource { --resource-accent:#a9c2c5; }
.core-resource { --resource-accent:#c99cff; }
.drone-part-resource { --resource-accent:#79dbef; }
.drone-count-resource { --resource-accent:#6dd6d0; }
.weapon-fragment-resource { --resource-accent:#c6b4df; border-color: rgba(198,180,223,.34); background: radial-gradient(ellipse at 50% 0%,rgba(198,180,223,.19),transparent 70%),linear-gradient(145deg,rgba(29,25,39,.96),rgba(12,18,28,.98)); }
.weapon-count-resource { --resource-accent:#ffbd72; }
.hero-fragment-resource { --resource-accent:#76e0d4; }
.hero-fragment-wallet { border-color: rgba(118,224,212,.3); background: radial-gradient(ellipse at 0 50%,rgba(118,224,212,.17),transparent 85%),rgba(22,48,49,.45); box-shadow: inset 0 1px 0 rgba(201,255,245,.08); }
.hero-fragment-wallet img { width: 22px; height: 20px; object-fit: contain; filter: drop-shadow(0 0 5px rgba(94,230,214,.55)); }
.hero-fragment-resource .resource-icon { fill: none; stroke: #79e0d0; }
.weapon-fragment-resource .resource-icon { filter: drop-shadow(0 0 6px rgba(197,177,225,.48)); }
@media (max-width: 420px) {
  .bag-resource { min-height: 70px; }
  .bag-resource .resource-icon { width: 30px; height: 26px; }
}

/* Second polish pass: make each stored material read like a collectible token. */
.bag-resource { min-height: 80px; gap: 4px; overflow: hidden; isolation: isolate; border-radius: 10px; transition: border-color .18s, transform .18s, box-shadow .18s; }
.bag-resource::after { position: absolute; z-index: -1; inset: 1px; border-radius: 9px; background: linear-gradient(135deg,rgba(255,255,255,.07),transparent 32% 72%,rgba(255,255,255,.025)); content: ''; pointer-events: none; }
.bag-resource .resource-icon { width: 38px; height: 32px; padding: 3px; border: 1px solid color-mix(in srgb,var(--resource-accent) 40%,transparent); border-radius: 9px; background: radial-gradient(ellipse at 36% 27%,color-mix(in srgb,var(--resource-accent) 34%,transparent),transparent 76%),linear-gradient(145deg,rgba(22,32,43,.85),rgba(9,16,24,.9)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12),0 4px 11px color-mix(in srgb,var(--resource-accent) 17%,transparent); filter: drop-shadow(0 0 4px color-mix(in srgb,var(--resource-accent) 26%,transparent)); }
.bag-resource b { font-size: 15px; text-shadow: 0 0 10px color-mix(in srgb,var(--resource-accent) 27%,transparent); }
.weapon-fragment-resource { border-color: rgba(198,180,223,.48); background: radial-gradient(ellipse at 50% 0%,rgba(198,180,223,.24),transparent 68%),linear-gradient(145deg,rgba(35,29,47,.98),rgba(12,18,28,.99)); }
.weapon-fragment-resource .resource-icon { border-color: rgba(214,198,235,.58); background: radial-gradient(ellipse at 40% 25%,rgba(207,190,232,.42),transparent 78%),linear-gradient(145deg,rgba(38,31,51,.96),rgba(14,18,28,.98)); box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 0 14px rgba(198,180,223,.25); }
.bag-resource:hover { transform: translateY(-1px); border-color: color-mix(in srgb,var(--resource-accent) 56%,transparent); }
@media (max-width: 420px) { .bag-resource { min-height: 76px; } .bag-resource .resource-icon { width: 34px; height: 30px; } }

.exchange-section-heading { align-items: center; margin-top: 18px; }
.exchange-core-balance { display: flex; align-items: center; gap: 4px; padding: 5px 8px; border: 1px solid rgba(201,156,255,.24); border-radius: 7px; background: rgba(115,71,168,.12); color: #d4b7ff; }
.exchange-core-balance svg { width: 18px; height: 16px; filter: drop-shadow(0 0 5px rgba(201,156,255,.45)); }
.exchange-core-balance b { font-family: var(--font-display); font-size: 14px; }
.exchange-core-balance small { color: #967fb2; font-size: 6px; font-weight: 900; letter-spacing: .06em; }
.resource-exchange-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.exchange-card { min-width: 0; padding: 10px; border: 1px solid color-mix(in srgb,var(--exchange-accent) 25%,transparent); border-radius: 10px; background: radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--exchange-accent) 11%,transparent),transparent 60%),linear-gradient(145deg,rgba(18,29,40,.97),rgba(9,16,24,.98)); }
.exchange-card-head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.exchange-resource-icon { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid color-mix(in srgb,var(--exchange-accent) 39%,transparent); border-radius: 9px; background: color-mix(in srgb,var(--exchange-accent) 10%,rgba(5,12,19,.8)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08),0 0 12px color-mix(in srgb,var(--exchange-accent) 13%,transparent); }
.exchange-resource-icon svg { width: 26px; height: 23px; filter: drop-shadow(0 0 4px color-mix(in srgb,var(--exchange-accent) 40%,transparent)); }
.exchange-resource-name { display: grid; gap: 2px; }
.exchange-resource-name small,.exchange-stock small { color: #7f9399; font-size: 6px; font-weight: 900; letter-spacing: .1em; }
.exchange-resource-name b { color: var(--exchange-accent); font-family: var(--font-display); font-size: 15px; line-height: 1; }
.exchange-stock { display: grid; gap: 1px; margin-left: auto; text-align: right; }
.exchange-stock b { color: #e7efed; font-family: var(--font-display); font-size: 13px; }
.exchange-offer-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.exchange-scaling-note { display: block; margin-top: 7px; color: #8fa5b3; font-size: 10px; line-height: 1.35; }
.exchange-offer { display: flex; min-width: 0; min-height: 58px; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 5px 2px; border: 1px solid color-mix(in srgb,var(--exchange-accent) 30%,transparent); border-radius: 7px; background: linear-gradient(155deg,color-mix(in srgb,var(--exchange-accent) 10%,transparent),rgba(6,13,20,.7)); color: #e8f0ee; transition: background .15s,transform .15s,border-color .15s; }
.exchange-offer:active:not(:disabled) { transform: scale(.97); background: color-mix(in srgb,var(--exchange-accent) 18%,rgba(6,13,20,.7)); }
.exchange-offer > b { color: var(--exchange-accent); font-family: var(--font-display); font-size: 17px; line-height: .95; }
.exchange-offer > small { color: #91a1a4; font-size: 6px; font-weight: 800; }
.exchange-offer > span { display: flex; align-items: center; gap: 2px; margin-top: 2px; color: #cdb8ed; font-size: 6px; font-weight: 900; white-space: nowrap; }
.exchange-offer > span svg { width: 12px; height: 11px; filter: drop-shadow(0 0 3px rgba(201,156,255,.35)); }
.exchange-offer:disabled { opacity: .38; cursor: default; filter: grayscale(.6); }
.resource-exchange-message { min-height: 16px; margin: 5px 1px 14px; color: #81979b; font-size: 7px; line-height: 1.4; }
@media (max-width: 520px) { .resource-exchange-grid { grid-template-columns: 1fr; } }
.featured-crate-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.drone-fragment-crate { --crate-accent:#73d9f2; background:radial-gradient(ellipse at 50% 36%,rgba(86,198,232,.23),rgba(15,23,33,.96) 72%); border-color:rgba(123,216,238,.4); }
.drone-fragment-crate > b { color: #b4efff; }
.drone-fragment-crate button { border-color: rgba(123,216,238,.42); background: rgba(93,192,224,.12); color: #a7eaff; }
.drone-fragment-resource { --resource-accent:#7bd8ee; background: radial-gradient(ellipse at 50% 0%,rgba(89,199,230,.21),transparent 68%),linear-gradient(145deg,rgba(17,35,47,.98),rgba(11,18,28,.99)); }
.drone-fragment-resource .resource-icon { border-color: rgba(123,216,238,.5); background: radial-gradient(ellipse at 40% 25%,rgba(90,207,237,.38),transparent 78%),linear-gradient(145deg,rgba(20,47,59,.96),rgba(12,20,31,.98)); box-shadow: inset 0 1px 0 rgba(255,255,255,.18),0 0 14px rgba(99,205,235,.21); }
.drone-fragment-resource b { color: #b4efff; }
@media (max-width: 370px) { .featured-crate-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }

/* Farebné, čelné 3D portréty hrdinov namiesto znakov a siluet */
.active-hero-panel { grid-template-columns: 138px minmax(0,1fr); }
.active-hero-art { position: relative; min-height: 178px; background: radial-gradient(ellipse at 50% 25%,color-mix(in srgb,var(--hero-color) 28%,transparent),rgba(4,10,15,.28) 72%),linear-gradient(165deg,rgba(255,255,255,.035),rgba(4,10,15,.45)); }
.active-hero-art .hero-portrait { width: 100%; height: 168px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 0 10px color-mix(in srgb,var(--hero-color,#62d8c9) 32%,transparent)) drop-shadow(0 8px 9px rgba(0,0,0,.52)); }
.hero-card-top { grid-template-columns: 72px minmax(0,1fr); }
.hero-card-portrait { width: 72px; height: 92px; align-items: end; background: radial-gradient(ellipse at 50% 20%,color-mix(in srgb,var(--hero-color) 25%,transparent),rgba(4,9,14,.72)); box-shadow: inset 0 1px rgba(255,255,255,.08),0 5px 12px rgba(0,0,0,.18); }
.hero-card-portrait .hero-portrait { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 0 5px color-mix(in srgb,var(--hero-color) 30%,transparent)); }
.hero-count-pill { max-width: none !important; padding: 7px 9px; border: 1px solid rgba(92,214,209,.2); border-radius: 7px; background: rgba(10,28,34,.62); color: #8edfd1 !important; font-size: 7px !important; white-space: nowrap; }
@media (max-width: 520px) { .active-hero-panel { grid-template-columns: 120px minmax(0,1fr); } .active-hero-art .hero-portrait { height: 158px; } }
@media (max-width: 370px) { .active-hero-panel { grid-template-columns: 100px minmax(0,1fr); } .active-hero-art { min-height: 146px; } .active-hero-art .hero-portrait { height: 136px; } .hero-card-top { grid-template-columns: 62px minmax(0,1fr); } .hero-card-portrait { width: 62px; height: 80px; } .hero-card-heading h4 { font-size: 10px; } .hero-count-pill { font-size: 5px !important; padding: 6px; } }

.slot-machine-heading { margin-top: 20px; }
.slot-machine-card { --slot-accent:#bd83ff; position:relative; overflow:hidden; padding:14px; border:1px solid rgba(190,132,255,.34); border-radius:12px; background:radial-gradient(ellipse at 12% 0,rgba(157,91,222,.2),transparent 46%),radial-gradient(ellipse at 100% 100%,rgba(190,72,174,.13),transparent 48%),linear-gradient(145deg,rgba(33,25,47,.99),rgba(11,16,26,.99)); box-shadow:inset 0 1px rgba(235,213,255,.1),0 10px 28px rgba(0,0,0,.24),0 0 22px rgba(153,87,206,.07); }
.slot-machine-card::before { position:absolute; top:0; right:10%; left:10%; height:2px; border-radius:0 0 4px 4px; background:linear-gradient(90deg,transparent,#d4a8ff,#ffd77d,transparent); opacity:.85; content:''; }
.slot-machine-heading h3 { color:#eadcff; }
.slot-jackpot-label { color:#f4d27a; text-shadow:0 0 12px rgba(255,207,111,.24); }
.slot-machine-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px; }
.slot-machine-header .eyebrow { margin:0 0 3px; color:#c7a4e9; font-size:7px; font-weight:900; letter-spacing:.14em; }
.slot-machine-header h4 { margin:0; color:#f1e5ff; font-family:var(--font-display); font-size:17px; letter-spacing:.035em; }
.slot-machine-wager { flex:none; padding:7px 9px; border:1px solid rgba(190,132,255,.3); border-radius:7px; background:rgba(157,91,222,.1); color:#b7a0ce; font-size:7px; font-weight:900; letter-spacing:.08em; }
.slot-machine-wager b { color:#ffdc8c; font-family:var(--font-display); font-size:13px; }
.slot-machine-play { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(130px,.8fr); align-items:center; gap:10px; padding:10px; border:1px solid rgba(190,132,255,.2); border-radius:9px; background:linear-gradient(110deg,rgba(8,8,18,.78),rgba(39,23,53,.72)); box-shadow:inset 0 2px 12px rgba(0,0,0,.36); }
.slot-machine-reels { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.slot-reel { display:grid; min-width:0; min-height:58px; place-items:center; border:1px solid rgba(211,174,255,.58); border-radius:8px; background:linear-gradient(155deg,#52396c 0%,#342246 20%,#21182f 58%,#3b294b 100%); box-shadow:inset 0 2px 0 rgba(255,255,255,.14),inset 0 -5px 8px rgba(7,3,15,.34),0 4px 11px rgba(0,0,0,.4),0 0 10px rgba(176,111,232,.1); color:#ffdf8e; font-family:var(--font-display); font-size:34px; font-weight:900; text-shadow:0 0 12px rgba(255,206,112,.35),0 2px 4px rgba(0,0,0,.55); }
.slot-machine-card.is-spinning .slot-reel { animation:slotReelJolt .1s linear infinite alternate; filter:brightness(1.12); }
@keyframes slotReelJolt { to { transform:translateY(-2px); } }
.slot-machine-controls { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:6px; }
.slot-machine-field { display:grid; min-width:0; gap:3px; color:#b9a2cd; font-size:6px; font-weight:900; letter-spacing:.1em; }
.slot-machine-field select,.slot-machine-field input { width:100%; min-width:0; min-height:34px; padding:6px 7px; border:1px solid rgba(190,132,255,.25); border-radius:6px; outline:none; background:#15111e; color:#f1e6ff; font:700 10px var(--font-display); }
.slot-machine-field select:focus,.slot-machine-field input:focus { border-color:rgba(207,158,255,.72); box-shadow:0 0 0 2px rgba(173,113,232,.14); }
.slot-machine-field input:disabled,.slot-machine-field select:disabled { opacity:.58; }
.slot-spin-button { min-height:40px; padding:8px 7px; border:1px solid rgba(238,197,111,.65); border-radius:7px; background:linear-gradient(135deg,rgba(127,76,175,.88),rgba(77,43,111,.95) 65%,rgba(55,32,77,.96)); box-shadow:inset 0 1px rgba(255,239,201,.2),0 3px 12px rgba(0,0,0,.28),0 0 12px rgba(168,109,222,.14); color:#fff0c9; font-family:var(--font-display); font-size:10px; font-weight:900; letter-spacing:.045em; }
.slot-machine-controls .slot-spin-button,.slot-machine-balance-label { grid-column:1/-1; }
.slot-spin-button:active:not(:disabled) { transform:translateY(1px); background:linear-gradient(135deg,#8152af,#51306f); }
.slot-spin-button:disabled { opacity:.42; cursor:default; }
.slot-machine-balance-label { display:grid; gap:2px; color:#7f8b8c; font-size:6px; font-weight:900; letter-spacing:.12em; text-align:center; }
.slot-machine-balance-label b { color:#e5ccff; font-family:var(--font-display); font-size:10px; letter-spacing:.04em; }
.slot-machine-result { min-height:14px; margin:8px 1px 0; color:#ffdc91; font-size:8px; font-weight:800; line-height:1.45; }
.slot-machine-footnote { margin:2px 1px 0; color:#748184; font-size:7px; line-height:1.5; }
@media (max-width:520px) { .slot-machine-card { padding:10px; } .slot-machine-play { grid-template-columns:1fr; gap:9px; } .slot-machine-reels { gap:5px; } .slot-reel { min-height:51px; font-size:29px; } .slot-machine-controls { grid-template-columns:1fr 1fr; align-items:center; } .slot-machine-balance-label { font-size:6px; } }
@media (prefers-reduced-motion:reduce) { .slot-machine-card.is-spinning .slot-reel { animation:none; } }

/* Backpack cards: currencies, their fragment row, then matching collection counts. */
.bag-resource-grid { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-areas:"credits scrap cores" "drone-fragments weapon-fragments hero-fragments" "drones weapons mission-crates" "drone-parts . ."; gap:7px; }
.mission-crate-resource { grid-area:mission-crates; --resource-accent:#f1c76d; }
.mission-crate-resource .resource-icon { object-fit:contain; }
.bag-resource-button { appearance:none; width:100%; padding:6px 3px 7px; color:inherit; font:inherit; text-align:center; cursor:pointer; }
.bag-resource-button:hover { transform:translateY(-2px); }
.bag-resource-button:focus-visible { outline:2px solid #91e5df; outline-offset:2px; }
.bag-resource-button.is-selected { border-color:color-mix(in srgb,var(--resource-accent) 78%,white); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--resource-accent) 40%,transparent),0 0 16px color-mix(in srgb,var(--resource-accent) 25%,transparent); }
.bag-selection-panel { min-height:85px; margin:0 0 16px; padding:11px; border:1px solid rgba(121,215,230,.18); border-radius:10px; background:radial-gradient(ellipse at 0 0,rgba(121,215,230,.055),transparent 66%),rgba(9,16,24,.62); }
.bag-selection-empty { margin:18px 0; color:#82959c; font-size:9px; text-align:center; }
.bag-selection-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.bag-selection-heading .eyebrow { margin:0 0 3px; color:#78949a; font-size:7px; letter-spacing:.12em; }
.bag-selection-heading h3 { margin:0; color:#e2eff0; font-family:var(--font-display); font-size:13px; }
.bag-selection-heading > b { flex:none; color:#9ddbd8; font-size:7px; letter-spacing:.06em; }
.bag-selection-description { margin:0; color:#9aabb0; font-size:9px; line-height:1.55; }
.mission-crate-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:7px; }
.mission-crate-card { display:flex; min-width:0; min-height:132px; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:8px; border:1px solid rgba(241,199,109,.28); border-radius:8px; background:linear-gradient(145deg,rgba(38,34,26,.76),rgba(9,16,24,.92)); text-align:center; }
.mission-crate-art { width:74px; height:51px; }
.mission-crate-art .crate-illustration { width:100%; height:100%; }
.mission-crate-art .crate-svg { width:100%; height:100%; object-fit:contain; }
.mission-crate-card > b { color:#f2d891; font-size:8px; line-height:1.25; }
.mission-crate-card > small { color:#91a1a5; font-size:7px; }
.mission-crate-card > button { min-height:27px; padding:5px 8px; border:1px solid rgba(241,199,109,.48); border-radius:6px; background:rgba(126,94,34,.28); color:#ffe7a4; font-size:7px; font-weight:900; cursor:pointer; }
.mission-crate-card > button:hover { background:rgba(164,125,46,.42); }
.bag-owned-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(105px,1fr)); gap:6px; }
.bag-owned-card { position:relative; display:flex; min-width:0; min-height:92px; flex-direction:column; align-items:center; justify-content:center; gap:4px; overflow:hidden; padding:10px 5px 7px; border:1px solid color-mix(in srgb,var(--weapon-rank,#79d7e6) 42%,rgba(121,215,230,.2)); border-radius:8px; background:linear-gradient(145deg,rgba(17,28,39,.96),rgba(8,15,23,.98)); text-align:center; }
.bag-owned-card .rank-badge { position:absolute; top:4px; left:4px; min-width:17px; padding:2px 4px; font-size:7px; }
.bag-owned-art { display:grid; width:53px; height:47px; place-items:center; border-radius:7px; background:radial-gradient(ellipse at 50% 50%,rgba(116,215,225,.09),transparent 73%); }
.bag-owned-art .drone-sprite { width:44px; height:44px; }
.bag-owned-weapon-art { width:80px; }
.bag-owned-weapon-art .weapon-sprite { width:75px; }
.bag-owned-card > b { overflow:hidden; max-width:100%; color:#dce9ea; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.bag-owned-card > span:last-child { color:#80959a; font-size:6px; }
.bag-legacy-fragments { margin:9px 0 0; padding-top:8px; border-top:1px solid rgba(121,215,230,.12); color:#81969c; font-size:8px; line-height:1.45; }
.bag-legacy-fragments b { color:#c7dcdd; }
.hero-fragment-exchange { display:grid; gap:9px; margin-top:12px; padding:10px; border:1px solid rgba(194,163,255,.24); border-radius:9px; background:linear-gradient(135deg,rgba(67,46,91,.22),rgba(9,16,24,.55)); }
.hero-fragment-exchange-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.hero-fragment-exchange-heading > div { display:grid; gap:3px; }
.hero-fragment-exchange-heading small,.hero-fragment-exchange-controls label small { color:#aa91ca; font-size:7px; font-weight:850; letter-spacing:.1em; }
.hero-fragment-exchange-heading b { color:#e3d6f8; font-size:10px; }
.hero-fragment-exchange-heading > span { color:#cbb5e8; font-size:8px; white-space:nowrap; }
.hero-fragment-exchange-controls { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) 66px auto; align-items:end; gap:7px; }
.hero-fragment-exchange-controls label { display:grid; min-width:0; gap:4px; }
.hero-fragment-exchange-controls select,.hero-fragment-exchange-controls input { width:100%; min-width:0; height:32px; padding:0 7px; border:1px solid rgba(187,157,225,.3); border-radius:6px; background:#111a25; color:#e8e3ef; font:700 9px var(--font-body); }
.hero-fragment-exchange-controls button { min-height:32px; padding:0 11px; border:1px solid rgba(194,163,255,.45); border-radius:6px; background:linear-gradient(180deg,#a57bda,#7552ae); color:#fff; font:850 8px var(--font-body); cursor:pointer; }
.hero-fragment-exchange-controls button:disabled { opacity:.45; cursor:not-allowed; }
.hero-fragment-exchange-arrow { padding-bottom:7px; color:#d8c1f5; font-size:15px; }
.hero-fragment-exchange > p { margin:0; color:#9fadb5; font-size:8px; }
@media (max-width:600px) { .hero-fragment-exchange-controls { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); } .hero-fragment-exchange-quantity { grid-column:1; } .hero-fragment-exchange-controls button { grid-column:3; } }
.credit-resource { grid-area:credits; }
.scrap-resource { grid-area:scrap; }
.core-resource { grid-area:cores; }
.drone-fragment-resource { grid-area:drone-fragments; }
.weapon-fragment-resource { grid-area:weapon-fragments; }
.hero-fragment-resource { grid-area:hero-fragments; }
.drone-count-resource { grid-area:drones; }
.weapon-count-resource { grid-area:weapons; }
.drone-part-resource { grid-area:drone-parts; }

/* One shared cyan identity for fragments, one metallic silver for weapons and capsules. */
.bag-resource.drone-fragment-resource,.bag-resource.weapon-fragment-resource,.bag-resource.hero-fragment-resource { --resource-accent:#79d7e6; border-color:rgba(121,215,230,.44); background:radial-gradient(ellipse at 50% 0%,rgba(121,215,230,.2),transparent 68%),linear-gradient(145deg,rgba(18,37,46,.98),rgba(11,18,28,.99)); }
.bag-resource.drone-fragment-resource .resource-icon,.bag-resource.weapon-fragment-resource .resource-icon,.bag-resource.hero-fragment-resource .resource-icon { border-color:rgba(148,230,241,.58); background:radial-gradient(ellipse at 40% 25%,rgba(106,211,229,.38),transparent 78%),linear-gradient(145deg,rgba(20,47,59,.96),rgba(12,20,31,.98)); box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 14px rgba(99,205,235,.24); }
.hero-fragment-wallet { border-color:rgba(121,215,230,.4); background:radial-gradient(ellipse at 0 50%,rgba(121,215,230,.18),transparent 85%),rgba(20,43,51,.48); }
.hero-fragment-wallet svg { filter:drop-shadow(0 0 5px rgba(121,215,230,.55)); }
.weapon-card .weapon-art { background:radial-gradient(ellipse at 50% 58%,rgba(92,214,209,.075),rgba(5,11,16,.08) 70%); }
article.crate-card[class]:not(.crate-card-pistols):not(.crate-card-short):not(.crate-card-long) { --crate-accent:#dce7ed; border-color:rgba(220,231,237,.5); background:radial-gradient(ellipse at 50% 35%,rgba(220,231,237,.14),transparent 61%),linear-gradient(155deg,rgba(25,34,42,.99),rgba(10,17,25,.99)); box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 7px 17px rgba(0,0,0,.22),0 0 13px rgba(220,231,237,.08); }
article.crate-card[class]:not(.crate-card-pistols):not(.crate-card-short):not(.crate-card-long)::before { height:2px; background:linear-gradient(90deg,transparent,#f5f9fc,#c8d6df,transparent); opacity:1; }
article.crate-card[class]:not(.crate-card-pistols):not(.crate-card-short):not(.crate-card-long)::after { background:radial-gradient(ellipse,rgba(220,231,237,.17),transparent 72%); }
article.crate-card[class]:not(.crate-card-pistols):not(.crate-card-short):not(.crate-card-long) > b { color:#eef5f8; text-shadow:0 0 10px rgba(210,230,240,.24); }
article.crate-card[class]:not(.crate-card-pistols):not(.crate-card-short):not(.crate-card-long) .crate-svg { filter:drop-shadow(0 8px 8px rgba(0,0,0,.62)) drop-shadow(0 2px 4px rgba(174,164,139,.15)); }
article.crate-card[class]:not(.crate-card-pistols):not(.crate-card-short):not(.crate-card-long) > button:not(.crate-info-button) { border-color:rgba(220,235,243,.58); background:linear-gradient(135deg,rgba(198,216,226,.16),rgba(24,34,43,.82)); color:#eaf3f7; }
article.crate-card[class]:not(.crate-card-pistols):not(.crate-card-short):not(.crate-card-long) .crate-info-button { border-color:rgba(220,231,237,.5); color:#dce7ed; }
.wall-expiry-note { max-width:155px; color:#829196; font-size:6px; font-weight:800; line-height:1.35; text-align:right; letter-spacing:.05em; }

/* Painted hero portraits and detailed sprite atlases for weapons and drones. */
.hero-skin-image { position:absolute; z-index:1; bottom:0; left:50%; display:block; width:auto; max-width:96%; height:92%; max-height:212px; transform:translateX(-50%); object-fit:contain; object-position:center bottom; filter:drop-shadow(0 5px 9px rgba(0,0,0,.48)) drop-shadow(0 0 12px color-mix(in srgb,var(--hero-color,#62d8c9) 24%,transparent)); pointer-events:none; }
.dashboard-hero-skin { height:91%; max-height:215px; }
.loadout-hero-skin { height:94%; max-height:210px; }
.dashboard-character-stage .character-shadow { z-index:0; }
.dashboard-character-stage .character-stage-ring,.character-stage .character-stage-ring { z-index:0; }
.dashboard-character-stage .character-status,.character-stage .character-status { z-index:2; }
.weapon-svg.weapon-sprite { display:block; flex:none; width:min(100%,144px); height:auto; aspect-ratio:3 / 2; overflow:visible; background-image:url('./assets/weapon-atlas.webp'); background-repeat:no-repeat; background-size:400% 600%; background-position:var(--weapon-x,0%) var(--weapon-y,0%); filter:brightness(1.18) contrast(1.08) saturate(1.12) drop-shadow(0 3px 4px rgba(0,0,0,.6)) drop-shadow(0 0 5px rgba(194,211,222,.12)); }
.weapon-card .weapon-art { background:radial-gradient(ellipse at 50% 58%,color-mix(in srgb,var(--weapon-rank,#9fb7b7) 16%,transparent),rgba(5,11,16,.08) 70%); }
.weapon-art .weapon-svg.weapon-sprite { width:min(100%,72px); }
.dashboard-weapon-art .weapon-svg.weapon-sprite { width:min(100%,87px); }
.slot-weapon-art > .weapon-svg.weapon-sprite { width:min(100%,100px); }
.weapon-detail-art > .weapon-svg.weapon-sprite { width:min(100%,138px); }
.crate-weapon-heading .weapon-svg.weapon-sprite { width:51px; }
.fusion-copy-art .weapon-svg.weapon-sprite { width:75px; }
.weapon-picker-option > span .weapon-svg.weapon-sprite { width:52px; }
.drone-sprite { display:block; flex:none; width:min(100%,82px); height:auto; aspect-ratio:1; overflow:visible; background-image:url('./assets/drone-atlas.webp'); background-repeat:no-repeat; background-size:300% 400%; background-position:var(--drone-x,0%) var(--drone-y,0%); filter:drop-shadow(0 3px 5px rgba(0,0,0,.45)) drop-shadow(0 0 8px color-mix(in srgb,var(--drone-accent,#70ddd0) 44%,transparent)); }
.drone-card .drone-art-wrap { height:68px; }
.drone-card .drone-card-art { width:min(100%,68px); height:auto; aspect-ratio:1; }
.drone-crate-art .drone-card-art { width:50px; height:auto; aspect-ratio:1; }
.drone-choice-art { display:grid; width:40px; height:40px; flex:0 0 40px; place-items:center; border:1px solid color-mix(in srgb,var(--drone-accent,#70ddd0) 34%,transparent); border-radius:7px; background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--drone-accent,#70ddd0) 17%,transparent),rgba(4,11,17,.6)); }
.drone-choice-art .drone-card-art { width:38px; height:38px; }
.dashboard-drone-art { width:76px; height:60px; }
.dashboard-drone-art .drone-card-art { width:60px; height:60px; }
.dashboard-drone-card:not(.is-locked) .dashboard-drone-art .drone-sprite { display:block; }
.drone-fusion-copy .drone-card-art { max-width:72px; }

/* Oversized, high-contrast loot art and a touch-following movement stick. */
.crate-svg { width:calc(100% + 16px); height:124px; flex:0 0 124px; margin:-10px -8px -2px; }
.crate-svg .crate-glint { stroke-dasharray:22 180; animation:crateGlint 4.6s ease-in-out infinite; }
.crate-svg .crate-aura { transform-origin:91px 103px; animation:crateAura 3.8s ease-in-out infinite; }
.crate-svg .crate-latch-light { animation:crateLatch 2.8s ease-in-out infinite; }
.bag-resource { min-height:98px; gap:5px; }
.bag-resource .resource-icon { width:49px; height:43px; padding:2px; overflow:visible; filter:drop-shadow(0 2px 7px color-mix(in srgb,var(--resource-accent) 45%,transparent)); }
.bag-resource small { min-height:14px; font-size:6px; }
.crate-card { box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 9px 19px rgba(0,0,0,.24),0 0 15px color-mix(in srgb,var(--crate-accent) 8%,transparent); }
@keyframes crateGlint { 0%,24% { stroke-dashoffset:150; opacity:.28; } 62% { stroke-dashoffset:0; opacity:.9; } 100% { stroke-dashoffset:-120; opacity:.25; } }
@keyframes crateAura { 0%,100% { opacity:.55; } 50% { opacity:.95; } }
@keyframes crateLatch { 0%,100% { opacity:.56; } 48% { opacity:1; } }
@media (max-width:420px) { .bag-resource { min-height:94px; } .bag-resource .resource-icon { width:45px; height:40px; } }
@media (prefers-reduced-motion:reduce) { .crate-svg .crate-glint,.crate-svg .crate-aura,.crate-svg .crate-latch-light { animation:none; } }
@media (max-width:520px) {
  .hero-skin-image { max-width:100%; }
  .weapon-detail-art > .weapon-svg.weapon-sprite { width:min(100%,138px); }
  .drone-choice-art { width:35px; height:35px; flex-basis:35px; }
  .drone-choice-art .drone-card-art { width:34px; height:34px; }
}

/* Individual hero progression: compact portrait, clear combat values and three upgrade tracks. */
.hero-progression-card { overflow:hidden; border:1px solid color-mix(in srgb,var(--hero-color) 34%,transparent); border-radius:14px; background:radial-gradient(ellipse at 8% 0,color-mix(in srgb,var(--hero-color) 13%,transparent),transparent 48%),linear-gradient(145deg,rgba(16,27,37,.98),rgba(7,13,20,.99)); box-shadow:inset 0 1px rgba(255,255,255,.055),0 14px 32px rgba(0,0,0,.2); }
.hero-progression-top { display:grid; grid-template-columns:minmax(112px,26%) minmax(0,1fr); gap:13px; padding:12px; }
.hero-progression-art { position:relative; display:flex; min-height:180px; flex-direction:column; align-items:center; justify-content:flex-end; overflow:hidden; border:1px solid color-mix(in srgb,var(--hero-color) 28%,transparent); border-radius:10px; background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--hero-color) 24%,transparent),transparent 66%),linear-gradient(180deg,rgba(255,255,255,.035),rgba(3,9,15,.75)); }
.hero-progression-art::before { position:absolute; right:8%; bottom:18px; left:8%; height:15px; border:1px solid color-mix(in srgb,var(--hero-color) 27%,transparent); border-radius:50%; background:radial-gradient(ellipse, color-mix(in srgb,var(--hero-color) 13%,transparent),rgba(3,9,15,.7)); box-shadow:0 0 18px color-mix(in srgb,var(--hero-color) 18%,transparent); content:''; }
.hero-progression-art .hero-portrait { position:relative; z-index:1; width:94%; height:164px; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 5px 7px rgba(0,0,0,.5)); }
.hero-progression-art > span { position:absolute; z-index:2; right:5px; bottom:5px; left:5px; padding:4px; border-radius:4px; background:rgba(4,10,15,.78); color:var(--hero-color); font-size:6px; font-weight:900; letter-spacing:.08em; text-align:center; }
.hero-progression-summary { min-width:0; align-self:center; }
.hero-progression-title { display:flex; align-items:flex-start; justify-content:space-between; gap:7px; }
.hero-progression-title .eyebrow { margin:0 0 3px; color:var(--hero-color); font-size:6px; font-weight:900; letter-spacing:.11em; }
.hero-progression-title h3 { margin:0; color:#eff8f5; font-family:var(--font-display); font-size:clamp(18px,4vw,25px); line-height:1.05; }
.hero-level-badge { flex:0 0 auto; padding:5px 7px; border:1px solid color-mix(in srgb,var(--hero-color) 34%,transparent); border-radius:6px; background:color-mix(in srgb,var(--hero-color) 9%,rgba(4,10,15,.8)); color:var(--hero-color); font-size:7px; font-weight:900; white-space:nowrap; }
.hero-progression-card .hero-stat-row { gap:5px; margin-top:11px; }
.hero-progression-card .hero-stat-row span { min-height:43px; justify-content:center; padding:6px; }
.hero-progression-card .hero-stat-row small { font-size:6px; letter-spacing:.04em; }
.hero-progression-card .hero-stat-row b { color:#e6f0ed; font-size:clamp(9px,2vw,12px); }
.hero-progression-card .hero-stat-row span:last-child b { color:#a6b8bb; font-family:inherit; font-size:8px; }
.hero-progression-actions { display:flex; min-height:34px; align-items:center; justify-content:flex-end; gap:7px; margin-top:9px; }
.hero-level-up-button,.hero-equip-button { display:inline-flex; min-height:34px; align-items:center; justify-content:center; gap:8px; padding:5px 12px; border:1px solid color-mix(in srgb,var(--hero-color) 48%,transparent); border-radius:7px; background:linear-gradient(135deg,color-mix(in srgb,var(--hero-color) 24%,rgba(4,12,18,.8)),rgba(8,16,23,.92)); color:var(--hero-color); font-family:var(--font-display); font-size:9px; font-weight:900; letter-spacing:.04em; }
.hero-level-up-button small { color:#9aadb0; font-family:inherit; font-size:7px; }
.hero-level-up-button:disabled,.hero-equip-button:disabled { opacity:.45; }
.hero-base-note { color:#82959a; font-size:7px; font-weight:800; }
.hero-progression-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; padding:0 12px 10px; }
.hero-progression-tabs button { min-width:0; min-height:33px; border:1px solid rgba(171,196,202,.12); border-radius:7px; background:rgba(5,11,17,.62); color:#869a9f; font-family:var(--font-display); font-size:8px; font-weight:900; letter-spacing:.045em; }
.hero-progression-tabs button.is-selected { border-color:color-mix(in srgb,var(--hero-color) 48%,transparent); background:color-mix(in srgb,var(--hero-color) 12%,rgba(5,11,17,.8)); color:var(--hero-color); box-shadow:inset 0 1px color-mix(in srgb,var(--hero-color) 20%,transparent); }
.hero-progression-content { min-height:125px; padding:11px 12px 12px; border-top:1px solid rgba(175,202,209,.09); background:rgba(4,10,16,.32); }
.hero-level-current,.hero-level-next { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hero-level-current { padding:1px 2px 10px; }
.hero-level-current > div,.hero-level-next > div { display:grid; min-width:0; gap:3px; }
.hero-level-current small,.hero-level-next small,.hero-team-milestone small { color:#80949a; font-size:6px; font-weight:900; letter-spacing:.1em; }
.hero-level-current > div > b { color:#f2f7f4; font-family:var(--font-display); font-size:23px; line-height:1; }
.hero-level-current > div > b i { color:#91a4a8; font-size:10px; font-style:normal; }
.hero-level-current > div > span,.hero-level-next > div > span { color:#91a3a6; font-size:7px; line-height:1.45; }
.hero-level-next { padding:9px 9px; border:1px solid color-mix(in srgb,var(--hero-color) 18%,transparent); border-radius:8px; background:color-mix(in srgb,var(--hero-color) 5%,rgba(7,14,21,.7)); }
.hero-level-next > div > b { color:#e7f0ed; font-family:var(--font-display); font-size:12px; }
.hero-level-next > div > b span { color:#607277; }
.hero-level-next .hero-level-up-button { flex:0 0 auto; flex-direction:column; gap:2px; min-width:90px; }
.hero-stat-tracks { display:grid; gap:7px; }
.hero-stat-track { min-width:0; padding:7px; border:1px solid color-mix(in srgb,var(--hero-color) 17%,transparent); border-radius:8px; background:rgba(7,14,21,.56); }
.hero-stat-track .hero-level-next { padding:2px; border:0; background:transparent; }
.hero-stat-track .hero-level-next > div > b { font-size:11px; }
.hero-stat-track .hero-level-up-button { min-width:84px; }
.hero-stat-track .hero-scrap-progress { margin-top:5px; }
.hero-unlock-button { min-width:125px; }
.hero-scrap-progress { margin:9px 1px 0; }
.hero-scrap-progress > div { display:flex; justify-content:space-between; gap:8px; color:#8ea1a5; font-size:6px; font-weight:800; }
.hero-scrap-progress > div b { color:#c3d0ce; font-size:7px; }
.hero-scrap-progress > i { display:block; height:4px; margin-top:4px; overflow:hidden; border-radius:9px; background:rgba(171,191,203,.12); }
.hero-scrap-progress > i span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#758c87,#c0d2c8); box-shadow:0 0 8px rgba(157,192,179,.32); }
.hero-team-milestone { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:9px; margin-top:9px; padding:8px 9px; border:1px solid rgba(255,200,117,.16); border-radius:7px; background:linear-gradient(90deg,rgba(255,190,89,.07),rgba(255,190,89,.015)); }
.hero-team-milestone > div:first-child { display:grid; gap:2px; }
.hero-team-milestone > div:first-child b { color:#f1cc88; font-family:var(--font-display); font-size:12px; }
.hero-team-milestone > div:first-child span { color:#849398; font-size:6px; }
.hero-team-milestone > small:last-child { color:#b8a275; font-size:6px; font-weight:800; white-space:nowrap; }
.hero-milestone-dots { display:flex; gap:3px; }
.hero-milestone-dots i { width:7px; height:7px; border:1px solid rgba(236,193,119,.26); border-radius:50%; background:rgba(7,13,19,.7); }
.hero-milestone-dots i.is-filled { border-color:#f2c66f; background:#f2c66f; box-shadow:0 0 6px rgba(242,198,111,.48); }
.hero-ability-progression { display:grid; gap:6px; }
.hero-skill-tier { display:grid; grid-template-columns:max-content minmax(0,1fr) auto; align-items:center; gap:9px; min-height:58px; padding:7px 9px; border:1px solid rgba(170,194,201,.1); border-radius:7px; background:rgba(11,19,27,.68); opacity:.62; }
.hero-skill-tier.is-reached { border-color:color-mix(in srgb,var(--hero-color) 30%,transparent); background:color-mix(in srgb,var(--hero-color) 7%,rgba(11,19,27,.75)); opacity:1; }
.hero-skill-stars { display:block; width:max-content; max-width:100%; overflow:hidden; color:#d9b66f; font-size:13px; letter-spacing:-2px; line-height:1.2; white-space:nowrap; }
.hero-skill-tier > div { min-width:0; }
.hero-skill-tier > div small,.hero-awakening-card > div > small { color:var(--hero-color); font-size:7px; font-weight:900; letter-spacing:.07em; overflow-wrap:anywhere; }
.hero-skill-tier p,.hero-awakening-card p { margin:3px 0 0; color:#b0bdbd; font-size:8px; line-height:1.45; overflow-wrap:anywhere; }
.hero-extra-skill-list { margin-top:12px; }
.hero-extra-skill-list h4 { margin:0 0 6px; color:#aebdc1; font-family:var(--font-display); font-size:8px; letter-spacing:.12em; }
.hero-extra-skill { min-height:50px; margin-top:5px; }
.hero-extra-skill .hero-skill-stars { color:var(--hero-color); }
.hero-extra-skill p b { color:#e8efed; }
.hero-skill-tier > b { color:#829397; font-size:6px; white-space:nowrap; }
.hero-skill-tier.is-reached > b { color:var(--hero-color); }
.hero-skill-upgrade { display:inline-flex; min-height:28px; align-items:center; justify-content:center; gap:8px; margin-top:6px; padding:4px 9px; border:1px solid color-mix(in srgb,var(--hero-color) 48%,transparent); border-radius:6px; background:color-mix(in srgb,var(--hero-color) 13%,rgba(4,12,18,.9)); color:var(--hero-color); font-family:var(--font-display); font-size:8px; font-weight:900; }
.hero-skill-upgrade small { color:#9aadb0; font-family:inherit; font-size:7px; }
.hero-skill-upgrade:disabled { opacity:.58; }
.hero-skill-requirement { display:inline-block; margin-top:5px; color:#839397; font-size:6px; font-weight:900; letter-spacing:.05em; }
.hero-awakening-progress { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; padding:8px 10px; border:1px solid color-mix(in srgb,var(--hero-color) 23%,transparent); border-radius:7px; background:rgba(6,12,18,.62); }
.hero-awakening-progress > span { color:#aab8b8; font-size:7px; font-weight:900; letter-spacing:.06em; }
.hero-awakening-progress .hero-skill-upgrade { flex:0 0 auto; margin:0; }
.hero-progression-note { margin:7px 2px 0; color:#9eadaf; font-size:8px; line-height:1.5; }
.hero-upgrade-hint { margin:0 0 9px; padding:8px 10px; border:1px solid rgba(121,215,230,.15); border-radius:8px; background:rgba(8,18,25,.78); color:#c1cdca; }
.hero-awakening-card { display:grid; grid-template-columns:47px minmax(0,1fr); align-items:center; gap:11px; min-height:104px; padding:11px; border:1px solid color-mix(in srgb,var(--hero-color) 18%,transparent); border-radius:9px; background:linear-gradient(130deg,color-mix(in srgb,var(--hero-color) 6%,rgba(8,15,22,.88)),rgba(8,15,22,.9)); opacity:.7; }
.hero-awakening-card.is-awakened { border-color:color-mix(in srgb,var(--hero-color) 46%,transparent); box-shadow:inset 0 0 22px color-mix(in srgb,var(--hero-color) 7%,transparent); opacity:1; }
.hero-awakening-mark { display:grid; width:42px; height:42px; place-items:center; border:1px solid color-mix(in srgb,var(--hero-color) 38%,transparent); border-radius:50%; background:color-mix(in srgb,var(--hero-color) 10%,rgba(2,8,14,.7)); color:var(--hero-color); font-size:24px; text-shadow:0 0 14px var(--hero-color); }
.hero-awakening-card h4 { margin:3px 0; color:#eff5f2; font-family:var(--font-display); font-size:12px; }
.hero-awakening-card > div > span { display:inline-block; margin-top:5px; color:var(--hero-color); font-size:6px; font-weight:900; letter-spacing:.07em; }
.hero-progress-empty { display:grid; min-height:92px; align-content:center; gap:5px; padding:12px; border:1px dashed rgba(172,198,206,.16); border-radius:8px; background:rgba(7,14,20,.5); }
.hero-progress-empty b { color:#b3c5c5; font-family:var(--font-display); font-size:9px; }
.hero-progress-empty p { margin:0; color:#8c9da0; font-size:7px; line-height:1.5; }
.hero-progress-empty.compact { min-height:auto; margin-top:8px; padding:8px; }
.hero-card-inspect { display:block; width:100%; padding:0; border:0; background:transparent; color:inherit; text-align:left; }
.hero-card-inspect:focus-visible { outline:1px solid var(--hero-color); outline-offset:3px; }
.hero-card-summary { display:block; width:100%; color:inherit; text-align:left; }
.hero-card.is-inspected { outline:1px solid color-mix(in srgb,var(--hero-color) 54%,transparent); outline-offset:1px; }
.hero-card-stats { margin:4px 0 0; }
.hero-card-stats > span:last-child { color:#8fa7aa; font-size:6px; }
.dashboard-upgrade-action { appearance:none; cursor:pointer; font-family:var(--font-display); transition:border-color .16s ease,background .16s ease,box-shadow .16s ease; }
.dashboard-upgrade-action:hover { border-color:rgba(92,214,209,.56); background:rgba(7,24,29,.9); box-shadow:0 0 11px rgba(92,214,209,.14); }
.dashboard-upgrade-action:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
@media (max-width:620px) {
  .hero-progression-top { grid-template-columns:104px minmax(0,1fr); gap:9px; padding:9px; }
  .hero-progression-art { min-height:151px; }
  .hero-progression-art .hero-portrait { height:138px; }
  .hero-progression-card .hero-stat-row { gap:3px; margin-top:8px; }
  .hero-progression-card .hero-stat-row span { min-height:39px; padding:4px 3px; }
  .hero-progression-card .hero-stat-row b { font-size:8px; }
  .hero-progression-tabs { padding:0 9px 8px; }
  .hero-progression-tabs button { min-height:31px; font-size:7px; }
  .hero-progression-content { padding:9px; }
}
@media (max-width:390px) {
  .hero-progression-top { grid-template-columns:82px minmax(0,1fr); gap:7px; padding:7px; }
  .hero-progression-art { min-height:129px; }
  .hero-progression-art .hero-portrait { height:117px; }
  .hero-progression-art > span { font-size:5px; }
  .hero-progression-title h3 { font-size:17px; }
  .hero-level-badge { padding:4px; font-size:6px; }
  .hero-progression-card .hero-stat-row span:last-child b { font-size:6px; }
  .hero-progression-card .hero-stat-row small { font-size:5px; }
  .hero-level-next { align-items:flex-start; gap:5px; padding:7px; }
  .hero-level-next .hero-level-up-button { min-width:73px; padding:4px; font-size:7px; }
  .hero-stat-track { padding:6px; }
  .hero-stat-track .hero-level-next { padding:1px; }
  .hero-stat-track .hero-level-up-button { min-width:67px; }
  .hero-team-milestone { grid-template-columns:minmax(0,1fr) auto; gap:5px; padding:7px; }
  .hero-milestone-dots { grid-column:2; grid-row:1; }
  .hero-team-milestone > small:last-child { grid-column:1/-1; }
  .hero-skill-tier { grid-template-columns:max-content minmax(0,1fr) auto; gap:5px; padding:6px; }
  .hero-skill-stars { font-size:11px; }
  .hero-skill-tier p,.hero-awakening-card p { font-size:7px; }
  .hero-progression-note { font-size:7px; }
  .hero-card-stats { flex-direction:column; align-items:flex-start; }
}

.fragment-inventory { margin:8px 0 12px; border:1px solid rgba(121,215,230,.16); border-radius:8px; background:rgba(12,21,29,.62); }
.fragment-inventory summary { padding:9px 11px; color:#9bcbd0; font-size:9px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.fragment-inventory > div { display:grid; gap:7px; padding:0 10px 10px; }
.fragment-inventory-group { display:grid; gap:4px; }
.fragment-inventory-group > b { color:#6f8a92; font-size:7px; letter-spacing:.12em; }
.fragment-inventory-group > div { display:flex; flex-wrap:wrap; gap:4px; }
.fragment-inventory-item { display:inline-flex; align-items:center; gap:7px; min-width:112px; max-width:100%; padding:5px 8px 5px 5px; border:1px solid rgba(121,215,230,.18); border-radius:7px; background:linear-gradient(135deg,rgba(121,215,230,.075),rgba(12,21,29,.65)); color:#b5c9ca; }
.fragment-shard-art { position:relative; display:grid; width:39px; height:35px; flex:none; place-items:center; overflow:hidden; clip-path:polygon(12% 4%,77% 0,100% 29%,88% 90%,40% 100%,0 68%); background:linear-gradient(145deg,color-mix(in srgb,var(--fragment-accent) 34%,#0d1820),#182832 52%,color-mix(in srgb,var(--fragment-accent) 22%,#101a22)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fragment-accent) 60%,transparent); }
.fragment-shard-art::after { position:absolute; inset:0; background:linear-gradient(119deg,transparent 0 45%,rgba(225,250,249,.72) 46% 48%,transparent 49%),linear-gradient(58deg,transparent 0 59%,color-mix(in srgb,var(--fragment-accent) 72%,transparent) 60% 62%,transparent 63%),linear-gradient(160deg,transparent 0 27%,rgba(220,244,246,.46) 28% 30%,transparent 31%); opacity:.72; pointer-events:none; content:''; }
.fragment-shard-art > .hero-portrait { width:100%; height:100%; object-fit:cover; object-position:center 22%; filter:saturate(.82) brightness(.82) drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.fragment-shard-art > .weapon-svg.weapon-sprite { width:43px; height:auto; aspect-ratio:3 / 2; filter:brightness(1.24) contrast(1.15) drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.fragment-shard-art > .drone-card-art.drone-sprite { width:33px; height:33px; aspect-ratio:1; filter:brightness(.95) saturate(.8) drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.fragment-inventory-copy { display:grid; min-width:0; gap:2px; }
.fragment-inventory-copy b { overflow:hidden; color:#c5d7d9; font-size:8px; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }
.fragment-inventory-copy strong { color:#e5fbf7; font-size:8px; }
.fragment-inventory-empty { margin:0; color:#82959c; font-size:8px; }
.weapon-fragment-count { margin:-4px 0 8px; color:#9ab4b8; font-size:8px; }
.weapon-fragment-count b { color:#dff8f4; }
.weapon-fragment-count span { color:#748990; }

/* Clean realistic chest art and larger, more legible collection icons. */
.crate-illustration { position:relative; z-index:1; display:grid; width:calc(100% + 16px); height:124px; flex:0 0 124px; margin:-10px -8px -2px; place-items:center; isolation:isolate; }
.crate-illustration::before { position:absolute; z-index:-1; right:12%; bottom:12%; left:12%; height:58%; border-radius:50%; background:radial-gradient(ellipse,color-mix(in srgb,var(--crate-accent) 24%,transparent),transparent 72%); filter:blur(9px); content:''; }
.crate-illustration .crate-svg { position:relative; z-index:1; display:block; width:min(100%,190px); height:118px; flex:none; margin:0; object-fit:contain; filter:drop-shadow(0 8px 7px rgba(0,0,0,.58)); transition:transform .18s ease,filter .18s ease; }
.crate-card:hover .crate-illustration .crate-svg { transform:translateY(-3px) scale(1.035); filter:drop-shadow(0 11px 9px rgba(0,0,0,.63)); }
.crate-card-short .crate-illustration::before { background:radial-gradient(ellipse,rgba(220,235,243,.3),transparent 72%); }
.bag-resource .resource-icon { width:52px; height:46px; }
.bag-resource img.resource-icon { object-fit:contain; }
@media (max-width:420px) { .crate-illustration { height:116px; flex-basis:116px; } .crate-illustration .crate-svg { height:112px; } .bag-resource .resource-icon { width:49px; height:44px; } }

/* Make the credit token crisp and easy to recognize at every displayed size. */
.credit-chip .credit-glyph { width:21px; height:19px; margin:-2px -2px; filter:brightness(1.12) contrast(1.22) saturate(1.35) drop-shadow(0 0 4px rgba(31,220,255,.9)) drop-shadow(0 0 9px rgba(255,190,77,.6)); }
.credit-resource .resource-icon { filter:brightness(1.14) contrast(1.2) saturate(1.35) drop-shadow(0 0 7px rgba(33,218,255,.72)) drop-shadow(0 0 12px rgba(255,190,77,.48)); }
.credit-inline-icon { display:inline-block; width:19px; height:17px; flex:0 0 auto; overflow:visible; vertical-align:-4px; filter:brightness(1.16) contrast(1.22) saturate(1.45) drop-shadow(0 0 4px rgba(33,218,255,.9)) drop-shadow(0 0 8px rgba(255,190,77,.58)); }
.dashboard-drone-card small .credit-inline-icon { width:15px; height:13px; vertical-align:-3px; }
.slot-currency-control { position:relative; display:block; }
.slot-currency-control select { padding-left:34px !important; }
.slot-currency-icon { position:absolute; z-index:1; top:50%; left:8px; width:21px; height:19px; transform:translateY(-50%); pointer-events:none; filter:brightness(1.16) contrast(1.22) saturate(1.45) drop-shadow(0 0 4px rgba(33,218,255,.9)) drop-shadow(0 0 8px rgba(255,190,77,.58)); }
.slot-currency-value-icon { display:inline-block; width:18px; height:16px; vertical-align:-4px; filter:brightness(1.16) contrast(1.22) saturate(1.45) drop-shadow(0 0 4px rgba(33,218,255,.9)) drop-shadow(0 0 8px rgba(255,190,77,.58)); }
.slot-machine-wager .credit-inline-icon { width:22px; height:19px; vertical-align:-5px; }
.slot-machine-result .credit-inline-icon { width:19px; height:17px; }
.slot-machine-balance-label .slot-currency-value-icon { width:19px; height:17px; }
.slot-spin-button .slot-currency-value-icon { width:17px; height:15px; }
.admin-credit-icon { width:19px; height:17px; vertical-align:-4px; filter:brightness(1.16) contrast(1.22) saturate(1.45) drop-shadow(0 0 4px rgba(33,218,255,.9)) drop-shadow(0 0 8px rgba(255,190,77,.58)); }

/* Keep upgrade costs compact, with a little inset after the + button. */
.dashboard-stat-upgrade { gap:5px; margin-right:5px; }
.dashboard-stat-upgrade small { display:inline-flex; align-items:center; gap:3px; font-size:7px; }
.dashboard-stat-upgrade .credit-inline-icon,.dashboard-stat-upgrade .scrap-inline-icon { width:15px; height:13px; vertical-align:0; }
.dashboard-stat-upgrade .credit-inline-icon { filter:brightness(1.04) contrast(1.12) saturate(1.08) drop-shadow(0 0 1px rgba(33,218,255,.28)) drop-shadow(0 0 2px rgba(255,190,77,.2)); }
.scrap-inline-icon { display:inline-block; flex:0 0 auto; overflow:visible; filter:drop-shadow(0 0 3px rgba(140,215,220,.62)); }

/* Obrana: čisté taktické rozhranie s reálnym náhľadom mapy. */
.defense-view { max-width: 1040px; margin: 0 auto; padding: 7px 0 20px; }
.defense-view > .section-heading { align-items: center; margin-bottom: 15px; }
.defense-view > .section-heading h2 { font-size: clamp(27px,5vw,34px); letter-spacing: -.015em; }
.defense-briefing-panel { display: grid; grid-template-columns: minmax(135px,.84fr) minmax(0,1.5fr); align-items: center; gap: 19px; overflow: hidden; padding: 17px; border: 1px solid rgba(133,169,181,.19); border-radius: 16px; background: linear-gradient(145deg,rgba(19,30,41,.98),rgba(10,16,24,.99)); box-shadow: 0 16px 36px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.035); }
.defense-briefing-visual { --planet-accent:#86d6ce; position: relative; display: block; width: min(100%,230px); aspect-ratio: 1; justify-self: center; overflow: hidden; border: 1px solid color-mix(in srgb,var(--planet-accent) 36%,rgba(255,255,255,.12)); border-radius: 14px; background: #111b23; box-shadow: 0 9px 22px rgba(0,0,0,.32); isolation: isolate; }
.defense-map-image,.defense-map-shade { position: absolute; inset: 0; }
.defense-map-image { background-repeat: no-repeat; background-size: 200% 200%; filter: saturate(.91) brightness(.88); transition: filter .25s ease,transform .35s ease; }
.defense-briefing-visual:hover .defense-map-image { filter: saturate(1) brightness(.98); transform: scale(1.025); }
.defense-map-shade { background: linear-gradient(180deg,rgba(5,10,15,.35),transparent 32%,transparent 52%,rgba(5,10,15,.65)),linear-gradient(90deg,rgba(5,10,15,.12),transparent 45%); }
.defense-map-index { position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 7px; padding: 5px 8px 5px 6px; border: 1px solid rgba(230,242,239,.18); border-radius: 7px; background: rgba(7,13,19,.76); color: #dce7e3; backdrop-filter: blur(8px); }
.defense-map-index span { color: #9bb0af; font-size: 7px; font-weight: 900; letter-spacing: .13em; }
.defense-map-index b { color: var(--planet-accent); font-family: var(--font-display); font-size: 14px; letter-spacing: .04em; }
.defense-map-label { position: absolute; right: 10px; bottom: 10px; padding: 6px 8px; border: 1px solid rgba(228,239,235,.18); border-radius: 6px; background: rgba(7,13,19,.72); color: #dae4de; font-size: 7px; font-style: normal; font-weight: 900; letter-spacing: .12em; backdrop-filter: blur(8px); }
.defense-briefing-copy { min-width: 0; }
.defense-briefing-copy .eyebrow { margin: 0 0 7px; color: var(--planet-accent,#86d6ce); font-size: 8px; font-weight: 900; line-height: 1.45; letter-spacing: .12em; }
.defense-briefing-copy h3 { margin: 0; color: #f0f5f2; font-family: var(--font-display); font-size: clamp(27px,5vw,36px); line-height: 1.02; letter-spacing: -.02em; }
.defense-briefing-copy > p:not(.eyebrow) { max-width: 470px; margin: 9px 0 12px; color: #aab9bb; font-size: 11px; line-height: 1.55; }
.defense-mission-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: 0 0 9px; }
.defense-mission-facts > span { display: flex; min-width: 0; min-height: 52px; flex-direction: column; justify-content: center; gap: 5px; padding: 8px 9px; border: 1px solid rgba(167,193,197,.12); border-radius: 8px; background: rgba(5,11,17,.38); }
.defense-mission-facts > span > small { overflow: hidden; color: #84989a; font-size: 7px; font-weight: 900; letter-spacing: .1em; text-overflow: ellipsis; white-space: nowrap; }
.defense-mission-facts > span > b { overflow: hidden; color: #e5eeea; font-size: 11px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.defense-mission-facts > span:last-child > b { color: #f1c77f; font-size: 9px; }
.planet-stage-caption { display: inline-flex; max-width: 100%; margin-top: 1px; padding: 6px 8px; border: 1px solid color-mix(in srgb,var(--planet-accent) 28%,transparent); border-radius: 6px; background: color-mix(in srgb,var(--planet-accent) 7%,rgba(5,12,18,.7)); color: color-mix(in srgb,var(--planet-accent) 65%,#e0e9e4); font-size: 7px; font-weight: 900; letter-spacing: .09em; }
.defense-launch-row { display: grid; grid-column: 1/-1; grid-template-columns: minmax(0,1fr) minmax(175px,.45fr); align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(167,193,197,.12); }
.defense-launch-row .dashboard-record { min-height: 58px; justify-content: center; gap: 5px; padding: 10px 12px; border: 1px solid rgba(167,193,197,.12); border-radius: 9px; background: rgba(5,11,17,.38); }
.defense-launch-row .dashboard-record span { color: #8fa1a3; font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.defense-launch-row .dashboard-record b { color: #edf3ef; font-size: 12px; }
.defense-launch-row .dashboard-record small { color: #98a8a9; font-size: 8px; }
.defense-launch-row .start-button { min-width: 0; min-height: 56px; justify-content: center; gap: 10px; padding: 13px 17px; border: 1px solid rgba(255,211,145,.54); border-radius: 9px; background: linear-gradient(135deg,#d99d4e,#bd753e); box-shadow: inset 0 1px rgba(255,255,255,.22),0 6px 18px rgba(137,78,39,.18); color: #fff7e9; font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.defense-launch-row .start-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.defense-launch-row .button-arrow { font-size: 15px; }
.mode-section-heading { align-items: end; margin: 24px 0 10px; }
.mode-section-heading h3 { margin: 2px 0 0; color: #e8efeb; font-size: 20px; letter-spacing: -.01em; }
.mode-section-heading > small { color: #87999c; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.resource-mode-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; gap: 9px; }
.resource-mode-card { position: relative; display: flex; min-width: 0; flex-direction: column; gap: 9px; overflow: hidden; padding: 12px; border: 1px solid color-mix(in srgb,var(--mode-accent) 24%,rgba(167,193,197,.1)); border-radius: 12px; background: linear-gradient(155deg,rgba(18,29,39,.97),rgba(10,16,23,.99)); box-shadow: inset 0 1px rgba(255,255,255,.035),0 8px 20px rgba(0,0,0,.14); transition: border-color .18s,transform .18s,box-shadow .18s; }
.resource-mode-card::before { display: none; }
.resource-mode-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb,var(--mode-accent) 48%,rgba(255,255,255,.1)); box-shadow: inset 0 1px rgba(255,255,255,.045),0 12px 24px rgba(0,0,0,.2); }
.resource-mode-card-head { display: flex; min-height: 40px; align-items: center; gap: 8px; }
.resource-mode-icon { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border: 1px solid color-mix(in srgb,var(--mode-accent) 23%,transparent); border-radius: 9px; background: color-mix(in srgb,var(--mode-accent) 9%,rgba(6,12,18,.7)); }
.resource-mode-icon svg { width: 21px; height: 21px; filter: drop-shadow(0 0 7px color-mix(in srgb,var(--mode-accent) 22%,transparent)); }
.resource-mode-card-head > span:nth-child(2) { display: grid; min-width: 0; flex: 1; gap: 4px; }
.resource-mode-card-head small { color: #819397; font-size: 7px; font-weight: 900; letter-spacing: .13em; }
.resource-mode-card-head b { color: #edf3ef; font-family: var(--font-display); font-size: 11px; line-height: 1.2; }
.resource-mode-stage { flex: 0 0 auto; padding: 4px 5px; border: 1px solid color-mix(in srgb,var(--mode-accent) 24%,transparent); border-radius: 6px; background: color-mix(in srgb,var(--mode-accent) 7%,transparent); color: var(--mode-accent); font-size: 7px; font-weight: 900; letter-spacing: .04em; white-space: nowrap; }
.resource-mode-story { display: -webkit-box; min-height: 45px; margin: 0; overflow: hidden; color: #a5b2b3; font-size: 9px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.resource-mode-meta { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; }
.resource-mode-meta span { display: grid; min-height: 31px; align-content: center; padding: 4px 3px; border: 1px solid rgba(167,193,197,.1); border-radius: 6px; background: rgba(5,11,17,.35); color: #96a7a7; font-size: 7px; font-weight: 800; line-height: 1.25; text-align: center; }
.resource-mode-reward { display: grid; min-height: 53px; align-content: center; gap: 4px; padding: 7px 8px; border: 1px solid color-mix(in srgb,var(--mode-accent) 17%,transparent); border-radius: 8px; background: color-mix(in srgb,var(--mode-accent) 4%,rgba(5,11,17,.55)); }
.resource-mode-reward > span { display: flex; align-items: center; gap: 6px; color: color-mix(in srgb,var(--mode-accent) 72%,#e7eeeb); font-size: 8px; font-weight: 900; line-height: 1.25; letter-spacing: .025em; }
.resource-mode-reward svg { width: 16px; height: 16px; flex: 0 0 16px; }
.resource-mode-reward small { color: #839597; font-size: 6px; line-height: 1.35; }
.resource-mode-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 9px; border-top: 1px solid rgba(167,193,197,.1); }
.resource-mode-footer small { color: #8b9b9c; font-size: 6px; line-height: 1.4; }
.resource-mode-footer button { min-width: 68px; min-height: 34px; padding: 7px 8px; border: 1px solid color-mix(in srgb,var(--mode-accent) 40%,transparent); border-radius: 7px; background: color-mix(in srgb,var(--mode-accent) 11%,rgba(5,11,17,.75)); color: #eaf3ef; font-size: 8px; font-weight: 900; letter-spacing: .06em; }
.resource-mode-footer button:hover { background: color-mix(in srgb,var(--mode-accent) 20%,rgba(5,11,17,.72)); }
.mode-target-picker { display: grid; gap: 5px; color: #9caaaa; font-size: 7px; font-weight: 800; }
.mode-target-picker select { width: 100%; min-height: 32px; padding: 6px 7px; border: 1px solid rgba(167,193,197,.15); border-radius: 6px; background: #101a23; color: #e7eeea; font-size: 9px; }
.defense-view > .home-footer { margin-top: 16px; }
@media (max-width: 520px) {
  .defense-view { padding-top: 4px; }
  .defense-view > .section-heading { margin-bottom: 11px; }
  .defense-briefing-panel { grid-template-columns: minmax(96px,.65fr) minmax(0,1.35fr); gap: 11px; padding: 11px; border-radius: 12px; }
  .defense-briefing-visual { width: 100%; max-width: 148px; border-radius: 10px; }
  .defense-map-index { top: 6px; left: 6px; gap: 5px; padding: 4px 6px; }
  .defense-map-index span { font-size: 6px; }
  .defense-map-index b { font-size: 12px; }
  .defense-map-label { right: 6px; bottom: 6px; padding: 4px 5px; font-size: 5px; }
  .defense-briefing-copy .eyebrow { margin-bottom: 5px; font-size: 7px; letter-spacing: .08em; }
  .defense-briefing-copy h3 { font-size: clamp(22px,7vw,29px); }
  .defense-briefing-copy > p:not(.eyebrow) { margin: 6px 0 8px; font-size: 10px; line-height: 1.45; }
  .defense-mission-facts { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; margin-bottom: 7px; }
  .defense-mission-facts > span { min-height: 44px; gap: 4px; padding: 6px 7px; }
  .defense-mission-facts > span > small { font-size: 6px; }
  .defense-mission-facts > span > b { font-size: 10px; }
  .defense-mission-facts > span:last-child { grid-column: 1/-1; min-height: 38px; }
  .defense-mission-facts > span:last-child > b { font-size: 8px; }
  .planet-stage-caption { font-size: 6px; }
  .defense-launch-row { grid-template-columns: 1fr; gap: 8px; padding-top: 10px; }
  .defense-launch-row .dashboard-record { min-height: 52px; }
  .defense-launch-row .start-button { min-height: 48px; }
  .mode-section-heading { align-items: start; flex-direction: column; gap: 5px; margin-top: 20px; }
  .mode-section-heading > small { font-size: 7px; text-align: left; }
  .resource-mode-card { gap: 9px; padding: 12px; }
  .resource-mode-card-head b { font-size: 13px; }
  .resource-mode-story { min-height: 0; font-size: 10px; -webkit-line-clamp: 4; }
  .resource-mode-meta span { font-size: 8px; }
  .resource-mode-reward > span { font-size: 9px; }
  .resource-mode-reward small { font-size: 7px; }
  .resource-mode-footer small { font-size: 7px; }
}
@media (max-width: 420px) { .resource-mode-grid { grid-template-columns: minmax(0,1fr); gap: 9px; } }
@media (min-width: 761px) { .app-shell:has(#defenseView:not(.is-hidden)) { width: min(100%,1080px); padding-inline: clamp(24px,4vw,42px); } }
@media (prefers-reduced-motion:reduce) { .defense-map-image,.resource-mode-card { transition:none; } }
@media (min-width: 521px) and (max-width: 760px) {
  .resource-mode-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
  .resource-mode-card { gap: 7px; padding: 9px; border-radius: 10px; }
  .resource-mode-card-head { min-height: 32px; gap: 6px; }
  .resource-mode-icon { width: 30px; height: 30px; flex-basis: 30px; }
  .resource-mode-icon svg { width: 18px; height: 18px; }
  .resource-mode-card-head small { font-size: 6px; letter-spacing: .08em; }
  .resource-mode-card-head b { font-size: 10px; }
  .resource-mode-stage { padding: 4px; font-size: 6px; }
  .resource-mode-story { min-height: 44px; font-size: 8px; line-height: 1.4; -webkit-line-clamp: 4; }
  .resource-mode-meta { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .resource-mode-meta span { min-height: 27px; padding: 3px; font-size: 6px; }
  .resource-mode-meta span:last-child { grid-column: 1/-1; }
  .resource-mode-reward { min-height: 47px; padding: 6px; }
  .resource-mode-reward > span { font-size: 7px; }
  .resource-mode-reward small { font-size: 6px; }
  .mode-target-picker { font-size: 6px; }
  .mode-target-picker select { min-height: 28px; padding: 5px; font-size: 8px; }
  .resource-mode-footer { gap: 5px; }
  .resource-mode-footer small { font-size: 6px; }
  .resource-mode-footer button { min-width: 60px; min-height: 31px; padding: 6px; font-size: 7px; }
}

/* Special missions: choose a mode first, then compare difficulty and rewards. */
.resource-mode-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.resource-mode-entry { position:relative; min-width:0; }
.resource-mode-tile { position: relative; display: grid; grid-template-columns: 44px minmax(0,1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 3px 11px; min-width: 0; min-height: 82px; padding: 12px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--mode-accent) 25%,rgba(167,193,197,.1)); border-radius: 12px; background: linear-gradient(145deg,rgba(19,31,41,.98),rgba(9,15,22,.99)); box-shadow: inset 0 1px rgba(255,255,255,.045),0 8px 20px rgba(0,0,0,.15); color: #edf3ef; font: inherit; text-align: left; cursor: pointer; transition: border-color .18s,transform .18s,box-shadow .18s,background .18s; }
.resource-mode-entry .resource-mode-tile { width:100%; height:100%; }
.resource-mode-info { position:absolute; z-index:4; top:7px; right:7px; display:grid; width:24px; height:24px; place-items:center; padding:0; border:1px solid rgba(220,236,232,.48); border-radius:50%; background:rgba(7,14,20,.82); color:#f0f5f1; font:900 14px/1 Georgia,serif; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.35); }
.resource-mode-info:hover,.resource-mode-info:focus-visible { border-color:var(--mode-accent); background:color-mix(in srgb,var(--mode-accent) 22%,#071018); outline:2px solid color-mix(in srgb,var(--mode-accent) 48%,transparent); outline-offset:1px; }
.resource-mode-entry .resource-mode-tile .mode-tile-copy { padding-right:25px; }
.resource-mode-tile::before { position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--mode-accent); content: ''; opacity: .55; }
.resource-mode-tile:hover,.resource-mode-tile:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb,var(--mode-accent) 58%,rgba(255,255,255,.15)); box-shadow: inset 0 1px rgba(255,255,255,.06),0 12px 24px rgba(0,0,0,.22); outline: none; }
.resource-mode-tile.is-selected { border-color: color-mix(in srgb,var(--mode-accent) 70%,white); background: linear-gradient(145deg,color-mix(in srgb,var(--mode-accent) 11%,#14212a),#0b121a 78%); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--mode-accent) 18%,transparent),0 0 22px color-mix(in srgb,var(--mode-accent) 10%,transparent); }
.mode-tile-icon { display: grid; width: 44px; height: 44px; grid-row: 1 / 3; place-items: center; border: 1px solid color-mix(in srgb,var(--mode-accent) 34%,transparent); border-radius: 11px; background: color-mix(in srgb,var(--mode-accent) 10%,rgba(5,11,17,.7)); }
.mode-tile-icon svg { width: 28px; height: 28px; filter: drop-shadow(0 0 8px color-mix(in srgb,var(--mode-accent) 28%,transparent)); }
.mode-tile-copy { display: grid; min-width: 0; gap: 4px; }
.mode-tile-copy small { overflow: hidden; color: color-mix(in srgb,var(--mode-accent) 72%,#aab9b8); font-size: 7px; font-weight: 900; letter-spacing: .12em; text-overflow: ellipsis; white-space: nowrap; }
.mode-tile-copy b { color: #f1f5f1; font-family: var(--font-display); font-size: 12px; line-height: 1.2; }
.resource-mode-tile .resource-mode-stage { justify-self: end; }
.mode-tile-arrow { grid-column: 3; grid-row: 1; align-self: start; color: var(--mode-accent); font-size: 13px; font-weight: 800; }
.resource-mode-detail { --mode-accent:#7bd8ee; display: grid; gap: 13px; margin-top: 11px; padding: clamp(14px,2.5vw,21px); border: 1px solid color-mix(in srgb,var(--mode-accent) 24%,rgba(167,193,197,.12)); border-radius: 15px; background: radial-gradient(ellipse at 12% 0%,color-mix(in srgb,var(--mode-accent) 8%,transparent),transparent 42%),linear-gradient(150deg,rgba(17,27,37,.98),rgba(8,14,21,.99)); box-shadow: inset 0 1px rgba(255,255,255,.045),0 14px 32px rgba(0,0,0,.2); }
.mode-detail-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mode-detail-title { display: flex; min-width: 0; align-items: center; gap: 11px; }
.mode-detail-icon { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border: 1px solid color-mix(in srgb,var(--mode-accent) 38%,transparent); border-radius: 12px; background: color-mix(in srgb,var(--mode-accent) 10%,#0b141c); }
.mode-detail-icon svg { width: 30px; height: 30px; filter: drop-shadow(0 0 8px color-mix(in srgb,var(--mode-accent) 30%,transparent)); }
.mode-detail-title .eyebrow,.mode-difficulty-heading .eyebrow { margin: 0 0 4px; color: color-mix(in srgb,var(--mode-accent) 75%,#a8b8b5); font-size: 7px; font-weight: 900; letter-spacing: .13em; }
.mode-detail-title h4 { margin: 0; color: #f0f5f0; font-family: var(--font-display); font-size: clamp(16px,3vw,21px); letter-spacing: -.02em; }
.mode-detail-back { min-height: 34px; padding: 7px 10px; border: 1px solid rgba(167,193,197,.17); border-radius: 8px; background: rgba(5,11,17,.5); color: #a8b7b7; font-size: 8px; font-weight: 900; letter-spacing: .06em; cursor: pointer; }
.mode-detail-back:hover { border-color: color-mix(in srgb,var(--mode-accent) 45%,transparent); color: #e9f2ef; }
.mode-detail-story { max-width: 780px; margin: 0; color: #b5c1bf; font-size: 11px; line-height: 1.6; }
.mode-detail-facts { display: grid; grid-template-columns: .6fr .6fr 1fr 1.4fr; gap: 7px; }
.mode-detail-facts span { display: grid; min-height: 51px; align-content: center; gap: 5px; padding: 8px 10px; border: 1px solid rgba(167,193,197,.11); border-radius: 8px; background: rgba(4,10,16,.39); }
.mode-detail-facts small { color: #819396; font-size: 7px; font-weight: 900; letter-spacing: .09em; }
.mode-detail-facts b { overflow: hidden; color: #e7efeb; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.mode-difficulty-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: 2px; }
.mode-difficulty-heading h5 { margin: 0; color: #eaf1ed; font-family: var(--font-display); font-size: 16px; }
.mode-difficulty-heading > small { color: #849597; font-size: 7px; font-weight: 800; letter-spacing: .08em; text-align: right; }
.mode-difficulty-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.mode-difficulty-card { display: grid; min-width: 0; gap: 8px; padding: 11px; border: 1px solid rgba(167,193,197,.14); border-radius: 10px; background: linear-gradient(145deg,rgba(13,21,29,.94),rgba(8,14,20,.94)); color: #e5ece8; font: inherit; text-align: left; cursor: pointer; transition: border-color .16s,background .16s,transform .16s,box-shadow .16s; }
.mode-difficulty-card:hover,.mode-difficulty-card:focus-visible { transform: translateY(-1px); border-color: color-mix(in srgb,var(--mode-accent) 46%,transparent); outline: none; }
.mode-difficulty-card.is-selected { border-color: color-mix(in srgb,var(--mode-accent) 72%,white); background: linear-gradient(145deg,color-mix(in srgb,var(--mode-accent) 11%,#13212b),rgba(8,14,20,.96)); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--mode-accent) 16%,transparent),0 5px 16px color-mix(in srgb,var(--mode-accent) 8%,transparent); }
.mode-difficulty-top { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.mode-difficulty-top b { color: color-mix(in srgb,var(--mode-accent) 82%,#eff5f1); font-size: 9px; font-weight: 900; letter-spacing: .09em; }
.mode-difficulty-top i { color: #91a1a0; font-size: 6px; font-style: normal; font-weight: 900; letter-spacing: .07em; }
.mode-difficulty-card.is-selected .mode-difficulty-top i { color: var(--mode-accent); }
.mode-difficulty-reward { display: flex; min-height: 29px; align-items: center; gap: 7px; padding: 5px 7px; border: 1px solid color-mix(in srgb,var(--mode-accent) 18%,transparent); border-radius: 7px; background: color-mix(in srgb,var(--mode-accent) 5%,rgba(3,8,13,.58)); }
.mode-difficulty-reward svg { width: 19px; height: 19px; flex: 0 0 19px; }
.mode-difficulty-reward strong { color: #edf4ef; font-size: 10px; line-height: 1.3; }
.mode-difficulty-card > small { color: #91a1a1; font-size: 8px; line-height: 1.4; }
.mode-target-picker { gap: 6px; color: #9caaaa; font-size: 8px; }
.mode-target-picker select { min-height: 38px; padding: 8px 10px; border-radius: 8px; font-size: 10px; }
.mode-detail-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 11px; border-top: 1px solid rgba(167,193,197,.11); }
.mode-detail-footer p { max-width: 620px; margin: 0; color: #92a3a2; font-size: 9px; line-height: 1.55; }
.mode-detail-footer p b { color: color-mix(in srgb,var(--mode-accent) 82%,#f0f5f1); }
.mode-launch-button { display: flex; min-height: 43px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 12px; padding: 10px 15px; border: 1px solid color-mix(in srgb,var(--mode-accent) 48%,transparent); border-radius: 8px; background: linear-gradient(135deg,color-mix(in srgb,var(--mode-accent) 28%,#15212b),rgba(7,13,19,.96)); color: #f0f5f1; font-size: 9px; font-weight: 900; letter-spacing: .08em; cursor: pointer; }
.mode-launch-button:hover { border-color: color-mix(in srgb,var(--mode-accent) 78%,white); filter: brightness(1.1); }
.mode-launch-button span { color: var(--mode-accent); font-size: 14px; }
.mode-hud-resource > small:last-child { grid-column: 1 / -1; color: #93a6a6; font-size: 6px; font-weight: 800; letter-spacing: .08em; }
.mode-hud-resource .drone-repair-status { grid-column: 1 / -1; width: 100%; color: #79d8ff; font-size: 6px; font-weight: 900; letter-spacing: .055em; line-height: 1.3; text-align: right; white-space: normal; }
@media (max-width: 520px) {
  .core-objective-hud { top:calc(100% + 6px); width:min(144px,43vw); padding:5px 7px; }
  .core-objective-heading > span,.core-objective-foot { font-size:5px; }
  .core-objective-heading > b { font-size:9px; }
  .core-coolant-count b { font-size:6px; }
  .resource-mode-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
  .resource-mode-tile { grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; justify-items: center; gap: 6px 3px; min-height: 124px; padding: 9px 5px; border-radius: 10px; text-align: center; }
  .resource-mode-tile::before { width: 100%; height: 2px; inset: 0 0 auto; }
  .mode-tile-icon { width: 37px; height: 37px; grid-row: 1; grid-column: 1 / -1; border-radius: 10px; }
  .mode-tile-icon svg { width: 24px; height: 24px; }
  .mode-tile-copy { grid-row: 2; grid-column: 1 / -1; justify-items: center; gap: 3px; }
  .mode-tile-copy small { max-width: 100%; font-size: 5px; letter-spacing: .07em; }
  .mode-tile-copy b { font-size: 9px; line-height: 1.15; }
  .resource-mode-tile .resource-mode-stage { grid-row: 3; grid-column: 1 / -1; justify-self: center; padding: 4px 6px; font-size: 6px; }
  .mode-tile-arrow { grid-row: 1; grid-column: 2; position: absolute; top: 6px; right: 7px; font-size: 11px; }
  .resource-mode-detail { gap: 11px; margin-top: 8px; padding: 12px; border-radius: 12px; }
  .mode-detail-icon { width: 40px; height: 40px; flex-basis: 40px; border-radius: 10px; }
  .mode-detail-icon svg { width: 25px; height: 25px; }
  .mode-detail-title { gap: 8px; }
  .mode-detail-title .eyebrow { font-size: 6px; }
  .mode-detail-title h4 { font-size: 15px; }
  .mode-detail-back { min-height: 30px; padding: 6px 7px; font-size: 7px; }
  .mode-detail-story { font-size: 10px; }
  .mode-detail-facts { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  .mode-detail-facts span { min-height: 45px; padding: 7px 8px; }
  .mode-detail-facts b { font-size: 9px; }
  .mode-difficulty-heading { align-items: start; flex-direction: column; gap: 4px; }
  .mode-difficulty-heading > small { font-size: 6px; text-align: left; }
  .mode-difficulty-grid { grid-template-columns: 1fr; gap: 6px; }
  .mode-difficulty-card { grid-template-columns: minmax(70px,.7fr) minmax(110px,1fr); gap: 5px 8px; align-items: center; padding: 8px; }
  .mode-difficulty-top { grid-column: 1; grid-row: 1; }
  .mode-difficulty-reward { grid-column: 2; grid-row: 1; }
  .mode-difficulty-card > small { grid-column: 1 / -1; font-size: 7px; }
  .mode-difficulty-card > small + small { margin-top: -3px; }
  .mode-detail-footer { align-items: stretch; flex-direction: column; gap: 9px; }
  .mode-detail-footer p { font-size: 8px; }
  .mode-launch-button { width: 100%; min-height: 42px; }
}
@media (prefers-reduced-motion:reduce) { .resource-mode-tile,.mode-difficulty-card { transition:none; } }

/* Compact special expedition details to match the simplified Defense menu. */
.resource-mode-detail { gap:8px; margin-top:7px; padding:10px; border-radius:11px; }
.mode-detail-header { gap:8px; }
.mode-detail-title { gap:8px; }
.mode-detail-icon { width:38px; height:38px; flex-basis:38px; border-radius:9px; }
.mode-detail-icon svg { width:24px; height:24px; }
.mode-detail-title .eyebrow { margin-bottom:2px; font-size:6px; }
.mode-detail-title h4 { font-size:15px; }
.mode-detail-back { min-height:28px; padding:5px 8px; font-size:7px; }
.mode-detail-story { display:-webkit-box; overflow:hidden; max-width:720px; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:9px; line-height:1.4; }
.mode-detail-facts { grid-template-columns:.55fr 1fr 1.55fr; gap:5px; }
.mode-detail-facts span { min-height:36px; gap:3px; padding:6px 8px; border-radius:7px; }
.mode-detail-facts small { font-size:6px; }
.mode-detail-facts b { font-size:9px; }
.mode-difficulty-heading { align-items:center; margin:0; }
.mode-difficulty-heading h5 { font-size:12px; }
.mode-difficulty-heading > small { font-size:6px; }
.mode-difficulty-grid { gap:6px; }
.mode-difficulty-card { gap:6px; padding:8px; border-radius:8px; }
.mode-difficulty-top b { font-size:8px; }
.mode-difficulty-top i { font-size:5px; }
.mode-difficulty-reward { min-height:24px; gap:5px; padding:3px 5px; }
.mode-difficulty-reward svg { width:16px; height:16px; flex-basis:16px; }
.mode-difficulty-reward strong { font-size:9px; }
.mode-difficulty-card > small { font-size:6px; line-height:1.3; }
.mode-target-picker { grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px; font-size:7px; }
.mode-target-picker select { min-height:30px; padding:5px 8px; font-size:9px; }
.mode-detail-footer { justify-content:flex-end; padding-top:7px; }
.mode-launch-button { min-height:34px; gap:8px; padding:7px 11px; font-size:8px; }
@media (max-width:520px) {
  .resource-mode-detail { gap:7px; margin-top:6px; padding:8px; }
  .mode-detail-icon { width:34px; height:34px; flex-basis:34px; }
  .mode-detail-title h4 { font-size:13px; }
  .mode-detail-back { min-height:26px; padding:4px 6px; font-size:6px; }
  .mode-detail-story { font-size:8px; }
  .mode-detail-facts { grid-template-columns:.55fr .9fr 1.55fr; gap:4px; }
  .mode-detail-facts span { min-height:34px; padding:5px 6px; }
  .mode-detail-facts small { font-size:5px; }
  .mode-detail-facts b { font-size:7px; white-space:normal; }
  .mode-difficulty-heading { flex-direction:row; align-items:center; gap:6px; }
  .mode-difficulty-heading > small { font-size:5px; text-align:right; }
  .mode-difficulty-grid { grid-template-columns:1fr; gap:4px; }
  .mode-difficulty-card { grid-template-columns:minmax(78px,.65fr) minmax(0,1fr); gap:4px 7px; align-items:center; padding:6px 7px; }
  .mode-difficulty-top { grid-column:1; grid-row:1; }
  .mode-difficulty-reward { grid-column:2; grid-row:1; }
  .mode-difficulty-card > small { grid-column:1 / -1; font-size:6px; }
  .mode-detail-footer { align-items:stretch; }
  .mode-launch-button { width:100%; min-height:34px; }
}

/* Obrana: compact mission picker with only the information players need. */
.defense-view { max-width:960px; padding:4px 0 12px; }
.defense-view > .section-heading { margin-bottom:8px; }
.defense-view > .section-heading > div > .eyebrow,.defense-view .persist-tag { display:none; }
.defense-view > .section-heading h2 { margin:0; font-size:clamp(22px,4vw,29px); }
.defense-briefing-panel { grid-template-columns:minmax(105px,.4fr) minmax(0,1fr); gap:13px; padding:12px; border-radius:12px; }
.defense-briefing-visual { width:min(100%,150px); border-radius:10px; }
.defense-map-index span,.defense-map-label { display:none; }
.defense-briefing-copy .eyebrow { margin-bottom:4px; font-size:7px; }
.defense-briefing-copy h3 { font-size:clamp(22px,4vw,30px); }
#defensePlanetDescription,#defenseMapCount,#defensePlanetCycle,#startHint { display:none !important; }
.defense-mission-facts > span:nth-child(2) { display:none; }
.defense-mission-facts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:9px 0 0; }
.defense-mission-facts > span { min-height:40px; gap:3px; padding:6px 8px; }
.defense-mission-facts > span > small { font-size:6px; }
.defense-mission-facts > span:last-child { grid-column:auto; }
.defense-mission-facts > span:last-child > b { font-size:9px; }
.defense-launch-row { grid-template-columns:minmax(0,1fr) minmax(155px,.42fr); gap:8px; padding-top:8px; }
.defense-launch-row .dashboard-record { min-height:43px; gap:3px; padding:7px 9px; }
.defense-launch-row .dashboard-record span { font-size:6px; }
.defense-launch-row .dashboard-record b { font-size:11px; }
.defense-launch-row .start-button { min-height:44px; padding:9px 12px; font-size:10px; }
.mode-section-heading { margin:15px 0 7px; }
.mode-section-heading .eyebrow,.mode-section-heading > small { display:none; }
.mode-section-heading h3 { margin:0; font-size:17px; }
.resource-mode-grid { gap:7px; }
.resource-mode-tile { min-height:72px; grid-template-columns:34px minmax(0,1fr) auto; gap:3px 8px; padding:8px; border-radius:9px; }
.mode-tile-icon { width:32px; height:32px; border-radius:8px; }
.mode-tile-icon svg { width:21px; height:21px; }
.mode-tile-copy { gap:0; }
.mode-tile-copy small,.mode-tile-arrow { display:none; }
.mode-tile-copy b { font-size:10px; line-height:1.2; }
.resource-mode-tile .resource-mode-stage { padding:3px 5px; font-size:6px; }
.defense-view > .home-footer { display:none; }
@media (max-width:520px) {
  .defense-briefing-panel { grid-template-columns:88px minmax(0,1fr); gap:10px; padding:9px; }
  .defense-briefing-visual { width:88px; }
  .defense-briefing-copy .eyebrow { font-size:6px; }
  .defense-briefing-copy h3 { font-size:22px; }
  .defense-mission-facts { margin-top:7px; }
  .defense-launch-row { grid-template-columns:minmax(0,1fr) minmax(130px,.65fr); gap:7px; padding-top:7px; }
  .defense-launch-row .dashboard-record { min-height:40px; padding:6px 7px; }
  .defense-launch-row .start-button { min-height:40px; gap:5px; padding:7px; font-size:9px; }
  .mode-section-heading { margin-top:13px; }
  .resource-mode-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .resource-mode-tile { grid-template-columns:1fr auto; grid-template-rows:30px auto auto; justify-items:center; gap:3px; min-height:82px; padding:6px 4px; text-align:center; }
  .mode-tile-icon { grid-row:1; grid-column:1/-1; width:28px; height:28px; }
  .mode-tile-icon svg { width:19px; height:19px; }
  .mode-tile-copy { grid-row:2; grid-column:1/-1; justify-items:center; }
  .mode-tile-copy b { font-size:8px; }
  .resource-mode-tile .resource-mode-stage { grid-row:3; grid-column:1/-1; justify-self:center; font-size:6px; }
}
@media (max-width:350px) {
  .defense-briefing-panel { grid-template-columns:74px minmax(0,1fr); gap:8px; }
  .defense-briefing-visual { width:74px; }
  .defense-mission-facts > span { padding-inline:5px; }
  .defense-launch-row { grid-template-columns:1fr; }
}

/* Extra compact defense header and launch card. */
.defense-view { padding-bottom:8px; }
.defense-view > .section-heading { margin-bottom:4px; }
.defense-briefing-panel { grid-template-columns:82px minmax(0,1fr); gap:8px; padding:8px; border-radius:10px; }
.defense-briefing-visual { width:82px; border-radius:8px; }
.defense-map-index { display:none; }
.defense-briefing-copy { display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:center; align-items:center; gap:2px 7px; }
.defense-briefing-copy .eyebrow { grid-column:1/-1; margin:0; font-size:6px; line-height:1.2; }
.defense-briefing-copy h3 { grid-column:1; grid-row:2; font-size:21px; line-height:1; }
.defense-mission-facts { display:flex; grid-column:1; grid-row:3; flex-wrap:wrap; gap:4px; margin:2px 0 0; }
.defense-mission-facts > span { min-height:0; flex-direction:row; align-items:center; gap:4px; padding:3px 5px; border-radius:5px; }
.defense-mission-facts > span > small { font-size:5px; }
.defense-mission-facts > span > b,.defense-mission-facts > span:last-child > b { font-size:7px; }
.defense-briefing-copy > .start-button { grid-column:2; grid-row:3; min-width:112px; min-height:32px; gap:5px; padding:6px 8px; border-radius:6px; font-size:8px; letter-spacing:.04em; }
.defense-briefing-copy > .start-button .button-arrow { font-size:11px; }
.defense-launch-row { display:none; }
.mode-section-heading { margin:9px 0 4px; }
.mode-section-heading h3 { font-size:15px; }
.resource-mode-grid { gap:5px; }
.resource-mode-tile { min-height:62px; gap:2px 6px; padding:5px 7px; border-radius:8px; }
.mode-tile-icon { width:27px; height:27px; }
.mode-tile-icon svg { width:18px; height:18px; }
.mode-tile-copy b { font-size:9px; }
.resource-mode-tile .resource-mode-stage { padding:2px 4px; font-size:5px; }
@media (max-width:520px) {
  .defense-briefing-panel { grid-template-columns:70px minmax(0,1fr); gap:7px; padding:7px; }
  .defense-briefing-visual { width:70px; }
  .defense-briefing-copy > .start-button { min-width:102px; min-height:30px; padding:5px 6px; font-size:7px; }
  .resource-mode-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
  .resource-mode-tile { min-height:70px; grid-template-rows:26px auto auto; gap:2px; padding:4px 3px; }
  .mode-tile-icon { width:24px; height:24px; }
  .mode-tile-icon svg { width:16px; height:16px; }
  .mode-tile-copy b { font-size:7px; }
}
@media (max-width:350px) {
  .defense-briefing-panel { grid-template-columns:62px minmax(0,1fr); gap:6px; padding:6px; }
  .defense-briefing-visual { width:62px; }
  .defense-progress-card { grid-column:1/-1; grid-row:3; }
  .defense-briefing-copy > .start-button { grid-column:1/-1; grid-row:4; justify-self:stretch; }
}

/* Mission tiles stay small; difficulty is chosen in a focused launch sheet. */
.defense-progress-card { grid-column:1; grid-row:3; display:inline-flex; width:max-content; max-width:100%; align-items:center; padding:4px 7px; border:1px solid rgba(255,182,73,.28); border-radius:6px; background:rgba(255,182,73,.07); }
.defense-progress-card b { overflow:hidden; color:#ead9b8; font-size:8px; font-weight:900; letter-spacing:.04em; text-overflow:ellipsis; white-space:nowrap; }
.defense-briefing-copy > .start-button { grid-column:2; grid-row:3; min-width:76px; min-height:30px; justify-content:center; gap:5px; padding:6px 8px; border-radius:6px; font-size:9px; }
.defense-briefing-copy > .start-button .button-arrow { font-size:11px; }
.resource-mode-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.resource-mode-tile { display:grid; grid-template-columns:30px minmax(0,1fr) auto; grid-template-rows:auto auto; align-items:center; gap:3px 7px; min-height:64px; padding:6px; text-align:left; }
.resource-mode-tile .mode-tile-icon { grid-column:1; grid-row:1 / 3; width:28px; height:28px; }
.resource-mode-tile .mode-tile-copy { grid-column:2; grid-row:1; justify-items:start; gap:1px; }
.resource-mode-tile .mode-tile-copy small { display:block; font-size:5px; }
.resource-mode-tile .mode-tile-copy b { overflow:hidden; max-width:100%; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.resource-mode-tile .resource-mode-stage { grid-column:2; grid-row:2; display:flex; justify-self:start; align-items:center; gap:4px; padding:0; color:#91a4a6; font-size:6px; }
.resource-mode-tile .resource-mode-stage i { color:#74888c; font-size:6px; font-style:normal; }
.mode-tile-action { grid-column:3; grid-row:1 / 3; display:flex; align-items:center; gap:3px; padding:5px 6px; border:1px solid color-mix(in srgb,var(--mode-accent) 30%,transparent); border-radius:5px; background:color-mix(in srgb,var(--mode-accent) 8%,transparent); color:color-mix(in srgb,var(--mode-accent) 80%,white); font-size:7px; font-weight:900; letter-spacing:.04em; }
.mode-tile-action b { font-size:9px; }
.mode-difficulty-overlay { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:14px; background:rgba(3,8,13,.78); backdrop-filter:blur(8px); }
.mode-difficulty-sheet { display:grid; width:min(100%,410px); max-height:min(88dvh,620px); gap:10px; overflow:auto; padding:15px; border:1px solid color-mix(in srgb,var(--mode-accent) 28%,rgba(167,193,197,.15)); border-radius:13px; background:radial-gradient(ellipse at 10% 0%,color-mix(in srgb,var(--mode-accent) 9%,transparent),transparent 45%),linear-gradient(150deg,#121e28,#091018); box-shadow:0 20px 70px rgba(0,0,0,.55); }
.mode-sheet-header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mode-sheet-header .eyebrow { margin-bottom:2px; color:var(--mode-accent); font-size:6px; }
.mode-sheet-header h3 { margin:0; color:#f0f5f1; font-family:var(--font-display); font-size:19px; }
.mode-sheet-header > div > small { color:#a0b0ad; font-size:7px; font-weight:900; letter-spacing:.08em; }
.mode-sheet-close { width:29px; height:29px; border:1px solid rgba(167,193,197,.17); border-radius:7px; background:rgba(5,11,17,.6); color:#d3dfdb; font-size:20px; line-height:1; }
.mode-sheet-story { display:-webkit-box; overflow:hidden; margin:0; color:#aab9b7; font-size:9px; line-height:1.4; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.mode-sheet-subheading { display:flex; align-items:center; justify-content:space-between; gap:8px; color:#dce7e2; font-size:8px; font-weight:900; letter-spacing:.06em; }
.mode-sheet-subheading small { color:#849899; font-size:6px; text-align:right; }
.mode-difficulty-sheet .mode-difficulty-grid { grid-template-columns:1fr; gap:5px; }
.mode-difficulty-sheet .mode-difficulty-card { grid-template-columns:minmax(76px,.58fr) minmax(0,1fr); align-items:center; gap:4px 7px; padding:7px; }
.mode-difficulty-sheet .mode-difficulty-top { grid-column:1; grid-row:1; }
.mode-difficulty-sheet .mode-difficulty-reward { grid-column:2; grid-row:1; }
.mode-difficulty-sheet .mode-difficulty-card > small { grid-column:1 / -1; font-size:6px; }
.mode-difficulty-sheet .mode-target-picker { grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px; font-size:7px; }
.mode-difficulty-sheet .mode-target-picker select { min-height:31px; padding:5px 8px; font-size:9px; }
.mode-sheet-play { display:flex; min-height:38px; align-items:center; justify-content:center; gap:8px; border:1px solid color-mix(in srgb,var(--mode-accent) 45%,transparent); border-radius:7px; background:color-mix(in srgb,var(--mode-accent) 17%,#14212a); color:#f0f5f1; font-size:9px; font-weight:900; letter-spacing:.08em; }
.mode-sheet-play span { color:var(--mode-accent); font-size:13px; }
.mode-guide-overlay { position:fixed; inset:0; z-index:40; display:grid; place-items:center; padding:14px; background:rgba(3,8,13,.8); backdrop-filter:blur(8px); }
.mode-guide-sheet { display:grid; width:min(100%,420px); max-height:min(84dvh,580px); gap:13px; overflow:auto; padding:17px; border:1px solid rgba(167,193,197,.2); border-radius:14px; background:linear-gradient(150deg,#14212a,#091018); box-shadow:0 20px 70px rgba(0,0,0,.58); color:#edf3ef; }
.mode-guide-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mode-guide-header .eyebrow { margin:0 0 4px; color:#9db9b6; font-size:8px; font-weight:900; letter-spacing:.12em; }
.mode-guide-header h2 { margin:0; font-family:var(--font-display); font-size:20px; line-height:1.15; }
.mode-guide-close { display:grid; flex:0 0 34px; width:34px; height:34px; place-items:center; border:1px solid rgba(167,193,197,.24); border-radius:8px; background:rgba(5,11,17,.65); color:#e8f0ed; font-size:23px; cursor:pointer; }
.mode-guide-intro { margin:0; color:#d1ded9; font-size:13px; line-height:1.5; }
.mode-guide-steps { display:grid; gap:9px; margin:0; padding:0 0 0 24px; color:#aebfba; font-size:12px; line-height:1.5; }
.mode-guide-steps li { padding-left:2px; }
.mode-guide-steps li::marker { color:#8fd9d1; font-weight:900; }
.mode-guide-done { min-height:38px; border:1px solid rgba(167,193,197,.25); border-radius:7px; background:rgba(222,238,233,.08); color:#e8f0ed; font-size:10px; font-weight:900; letter-spacing:.08em; cursor:pointer; }
@media (max-width:520px) { .resource-mode-info { top:5px; right:5px; width:22px; height:22px; font-size:13px; } .mode-guide-overlay { padding:10px; } .mode-guide-sheet { gap:11px; padding:15px; } .mode-guide-header h2 { font-size:18px; } .mode-guide-intro { font-size:12px; } .mode-guide-steps { gap:8px; font-size:11px; } }

/* Mobilná základňa: výrazné zásoby hore, postava uprostred a navigácia dole. */
@container (max-width:620px) {
  .app-shell { padding:0 14px calc(88px + env(safe-area-inset-bottom)); }
  .topbar { height:auto; display:grid; grid-template-columns:1fr; gap:9px; padding:10px 0 9px; }
  .brand-mark { width:27px; height:27px; }
  .brand-lockup { gap:8px; }
  .brand-lockup .eyebrow { font-size:7px; }
  .brand-name { font-size:17px; }
  .top-resources { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) 42px; gap:6px; }
  .resource-chip { display:grid; min-width:0; min-height:47px; grid-template-columns:23px minmax(0,1fr); grid-template-rows:auto auto; gap:1px 6px; padding:6px 7px; border-radius:9px; }
  .resource-chip .resource-glyph { width:22px; height:21px; grid-column:1; grid-row:1 / span 2; align-self:center; }
  .top-resources .resource-name { display:block; grid-column:2; grid-row:1; color:#93a6ad; font-size:6px; font-weight:900; letter-spacing:.08em; line-height:1; }
  .resource-chip b { grid-column:2; grid-row:2; align-self:end; font-size:14px; font-variant-numeric:tabular-nums; line-height:1; }
  .bag-jump-button { width:42px; height:47px; border-radius:9px; font-size:22px; }
  .home-screen { padding-top:4px; padding-bottom:8px; }
  .menu-nav { position:fixed; top:auto; bottom:0; left:50%; z-index:25; width:min(100%,620px); grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; margin:0; padding:6px 9px calc(6px + env(safe-area-inset-bottom)); transform:translateX(-50%); border:1px solid rgba(177,202,220,.15); border-bottom:0; border-radius:15px 15px 0 0; background:rgba(8,13,20,.97); box-shadow:0 -9px 26px rgba(0,0,0,.42); backdrop-filter:blur(14px); }
  .menu-nav-button { min-width:0; min-height:51px; flex-direction:column; gap:3px; border-radius:9px; font-size:7px; letter-spacing:.045em; }
  .menu-nav-button span { font-size:17px; line-height:1; }
  .menu-nav-button.is-active { border-color:rgba(92,214,209,.28); background:linear-gradient(180deg,rgba(92,214,209,.16),rgba(92,214,209,.035)); }
  .dashboard-player-name { padding:3px 0 11px; }
  .dashboard-player-name > span { font-size:7px; }
  .dashboard-player-name h1 { font-size:clamp(27px,7.6vw,34px); }
  .dashboard-player-name > small { font-size:6px; }
  .dashboard-layout { grid-template-columns:minmax(0,.98fr) minmax(0,1.12fr) minmax(0,.98fr); grid-template-rows:repeat(2,minmax(116px,1fr)); gap:6px; }
  .dashboard-item { padding:7px 5px; border-radius:11px; }
  .dashboard-item-label { font-size:7px; letter-spacing:.08em; }
  .dashboard-weapon-art { height:55px; }
  .dashboard-weapon-card > b,.dashboard-drone-card > b { font-size:12px; }
  .dashboard-weapon-card > small,.dashboard-drone-card > small { margin-top:4px; font-size:6px; letter-spacing:.045em; }
  .dashboard-character-stage { min-height:238px; border-radius:14px; }
  .dashboard-character-stage .dashboard-hero-skin { height:94%; max-height:226px; }
  .dashboard-character-caption { font-size:7px; }
  .dashboard-character-hint { font-size:6px; }
  .dashboard-stats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin-top:8px; }
  .dashboard-stat { min-height:54px; gap:3px; padding:6px 7px; border-color:rgba(177,202,220,.16); border-radius:8px; background:linear-gradient(145deg,rgba(21,32,43,.98),rgba(10,16,23,.98)); }
  .dashboard-stat-top > small { font-size:6.3px; letter-spacing:.035em; }
  .dashboard-stat-top > em { font-size:5.5px; }
  .dashboard-stat b { font-size:14px; }
  .dashboard-stat-upgrade { display:grid; grid-template-columns:32px 42px; justify-items:end; gap:4px; width:78px; flex:0 0 78px; }
  .dashboard-stat-upgrade button { justify-self:end; width:17px; height:17px; border-radius:5px; font-size:12px; transform:none; }
  .dashboard-stat-upgrade small { display:grid; grid-template-columns:minmax(0,1fr) 18px; align-items:center; justify-items:end; column-gap:3px; width:42px; font-size:8px; }
  .dashboard-stat-upgrade small .upgrade-cost-amount { justify-self:end; text-align:right; font-variant-numeric:tabular-nums; }
  .dashboard-stat-upgrade .credit-inline-icon,.dashboard-stat-upgrade .scrap-inline-icon { width:14px; height:12px; }
  .dashboard-bottom-row { grid-template-columns:minmax(0,1fr) minmax(125px,.82fr); gap:6px; }
  .home-footer { padding-bottom:7px; }
}
@container (max-width:390px) {
  .app-shell { padding-inline:11px; }
  .top-resources { gap:4px; }
  .resource-chip { grid-template-columns:20px minmax(0,1fr); gap:1px 4px; padding-inline:5px; }
  .resource-chip .resource-glyph { width:19px; height:19px; }
  .top-resources .resource-name { font-size:5.5px; }
  .resource-chip b { font-size:13px; }
  .bag-jump-button { width:39px; }
  .dashboard-layout { grid-template-columns:minmax(0,.96fr) minmax(0,1.08fr) minmax(0,.96fr); gap:4px; }
  .dashboard-item { padding-inline:3px; }
  .dashboard-item-label { font-size:6px; }
  .dashboard-weapon-art { height:49px; }
  .dashboard-weapon-card > b,.dashboard-drone-card > b { font-size:11px; }
  .dashboard-weapon-card > small,.dashboard-drone-card > small { font-size:5.5px; }
  .dashboard-character-stage { min-height:226px; }
  .dashboard-character-stage .dashboard-hero-skin { height:91%; max-height:213px; }
  .dashboard-stat { min-height:53px; padding:5px 6px; }
  .dashboard-stat-top > small { font-size:6px; }
  .dashboard-stat b { font-size:13px; }
  .dashboard-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
  .dashboard-stat-upgrade { grid-template-columns:32px 42px; width:78px; flex-basis:78px; }
  .dashboard-stat-upgrade button { justify-self:end; width:17px; height:17px; font-size:12px; }
  .dashboard-stat-upgrade small { width:42px; font-size:8px; }
}
@media (max-width:520px) {
  .defense-progress-card b { font-size:7px; }
  .defense-briefing-copy > .start-button { min-width:68px; min-height:29px; padding:5px 6px; font-size:8px; }
  .resource-mode-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
  .resource-mode-tile { grid-template-columns:1fr; grid-template-rows:27px auto auto auto; justify-items:center; gap:3px; min-height:91px; padding:6px 3px; text-align:center; }
  .resource-mode-tile .mode-tile-icon { grid-column:1; grid-row:1; width:25px; height:25px; }
  .resource-mode-tile .mode-tile-icon svg { width:17px; height:17px; }
  .resource-mode-tile .mode-tile-copy { grid-column:1; grid-row:2; justify-items:center; gap:1px; }
  .resource-mode-tile .mode-tile-copy small { font-size:4px; letter-spacing:.07em; }
  .resource-mode-tile .mode-tile-copy b { max-width:100%; font-size:7px; }
  .resource-mode-tile .resource-mode-stage { grid-column:1; grid-row:3; justify-self:center; gap:3px; font-size:5px; }
  .resource-mode-tile .resource-mode-stage i { font-size:5px; }
  .mode-tile-action { grid-column:1; grid-row:4; justify-content:center; gap:2px; padding:3px 7px; font-size:6px; }
  .mode-tile-action b { font-size:7px; }
  .mode-difficulty-sheet { gap:8px; padding:12px; }
}

/* Mode tiles carry a small narrative scene behind their reward label. */
.resource-mode-tile::after { position:absolute; inset:0; z-index:0; border-radius:inherit; background-image:linear-gradient(90deg,rgba(8,14,20,.96) 0%,rgba(8,14,20,.88) 38%,rgba(8,14,20,.42) 100%),linear-gradient(0deg,rgba(5,9,14,.4),rgba(5,9,14,.04)),var(--mode-art); background-position:center,center,right center; background-size:100% 100%,100% 100%,cover; content:''; opacity:.94; pointer-events:none; transition:opacity .18s; }
.resource-mode-tile:hover::after,.resource-mode-tile:focus-visible::after,.resource-mode-tile.is-selected::after { opacity:1; }
.resource-mode-tile { z-index:1; pointer-events:auto; touch-action:manipulation; }
.resource-mode-tile::before { z-index:0; pointer-events:none; }
.resource-mode-tile > * { position:relative; z-index:1; }

/* Restore the original resource art; give the credit coin a restrained edge highlight. */
.credit-chip .credit-glyph,.credit-resource .resource-icon,.credit-inline-icon,.admin-credit-icon {
  filter:contrast(1.12) saturate(1.12) brightness(1.04) drop-shadow(0 0 1px rgba(112,232,255,.48)) drop-shadow(0 1px 1px rgba(0,0,0,.7));
}
.scrap-chip .scrap-glyph,.scrap-resource .resource-icon,.scrap-inline-icon,
.slot-currency-icon,.slot-currency-value-icon { filter:contrast(1.1) saturate(1.06) drop-shadow(0 1px 1px rgba(0,0,0,.7)); }

/* Difficulty picker: show the expedition artwork and give all three choices room. */
.mode-difficulty-sheet { width:min(100%,760px); max-height:min(90dvh,760px); gap:12px; padding:18px; }
.mode-difficulty-card { position:relative; isolation:isolate; display:block; overflow:hidden; min-height:218px; padding:11px; }
.mode-difficulty-card::before { position:absolute; inset:0; z-index:0; background-image:linear-gradient(90deg,rgba(5,10,15,.96) 0%,rgba(5,10,15,.9) 52%,rgba(5,10,15,.16) 100%),linear-gradient(0deg,rgba(5,10,15,.28),transparent 55%),var(--mode-art); background-position:center,center,78% 12%; background-size:100% 100%,100% 100%,cover; content:''; opacity:.82; pointer-events:none; transition:opacity .16s; }
.mode-difficulty-card.is-selected::before { opacity:.92; }
.mode-difficulty-card > * { position:relative; z-index:1; }
.mode-difficulty-sheet .mode-difficulty-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.mode-difficulty-copy { display:flex; width:64%; min-height:194px; box-sizing:border-box; flex-direction:column; align-items:stretch; gap:7px; padding-top:9px; }
.mode-difficulty-top { display:flex; align-items:center; justify-content:flex-start; gap:6px; margin-top:7px; }
.mode-difficulty-name { display:grid; gap:2px; }
.mode-difficulty-name > small { color:color-mix(in srgb,var(--mode-accent) 78%,#dce8e3); font-size:7px; font-weight:900; letter-spacing:.1em; }
.mode-difficulty-name > b { color:#f3f7f4; font-family:var(--font-display); font-size:12px; letter-spacing:.02em; }
.mode-difficulty-points { display:grid; gap:5px; }
.mode-difficulty-points > span { position:relative; padding-left:9px; color:#d4dfdc; font-size:8px; line-height:1.35; overflow-wrap:anywhere; }
.mode-difficulty-points > span::before { position:absolute; top:.42em; left:1px; width:4px; height:4px; border-radius:50%; background:var(--mode-accent); box-shadow:0 0 5px color-mix(in srgb,var(--mode-accent) 70%,transparent); content:''; }
.mode-difficulty-boss-reward { display:grid; gap:2px; margin-top:0; padding-top:0; border-top:0; }
.mode-difficulty-boss-reward > small { color:color-mix(in srgb,var(--mode-accent) 78%,#dce8e3); font-size:6px; font-weight:900; letter-spacing:.1em; }
.mode-difficulty-boss-reward > b { color:#f0f5f1; font-size:8px; line-height:1.25; }
@media (max-width:600px) {
  .mode-difficulty-overlay { padding:7px; }
  .mode-difficulty-sheet { width:100%; max-height:90dvh; gap:8px; padding:9px; border-radius:11px; }
  .mode-sheet-header h3 { font-size:16px; }
  .mode-sheet-story { font-size:8px; }
  .mode-sheet-subheading { font-size:7px; }
  .mode-sheet-subheading small { font-size:5px; }
  .mode-difficulty-sheet .mode-difficulty-grid { grid-template-columns:1fr; gap:6px; }
  .mode-difficulty-sheet .mode-difficulty-card { min-height:118px; padding:8px 10px; border-radius:8px; }
  .mode-difficulty-copy { width:64%; min-height:102px; gap:4px; padding-top:6px; }
  .mode-difficulty-sheet .mode-difficulty-top { margin-top:4px; }
  .mode-difficulty-points { gap:3px; }
  .mode-difficulty-points > span { padding-left:8px; font-size:7px; line-height:1.25; }
  .mode-difficulty-name > small { font-size:6px; }
  .mode-difficulty-name > b { font-size:10px; }
  .mode-difficulty-boss-reward > small { font-size:5px; }
  .mode-difficulty-boss-reward > b { font-size:7px; }
  .mode-sheet-play { min-height:36px; }
}
.dashboard-stat-upgrade { gap:4px; margin-right:0; }
.dashboard-stat-upgrade small { color:#f0c875; font-size:9px; font-weight:800; }
.dashboard-stat-upgrade .credit-inline-icon { width:18px; height:16px; }
.dashboard-stat-upgrade .scrap-inline-icon { width:14px; height:12px; }
.dashboard-stat-upgrade small { grid-template-columns:minmax(0,1fr) 18px; width:42px; }
.menu-nav-button .menu-nav-icon { width:18px; height:18px; flex:0 0 auto; color:#91bfc0; }
.menu-nav-button.is-active .menu-nav-icon { color:var(--cyan); }
.slot-machine-field-label { display:flex; align-items:center; gap:4px; }
.slot-field-currency-icon { width:15px; height:13px; flex:0 0 auto; filter:drop-shadow(0 1px 1px rgba(0,0,0,.72)); }
.slot-machine-wager .slot-currency-value-icon { width:19px; height:16px; vertical-align:-4px; }
.slot-machine-result .slot-currency-value-icon { width:19px; height:17px; vertical-align:-4px; }
.slot-machine-balance-label .slot-currency-value-icon { width:19px; height:17px; vertical-align:-4px; }
.slot-spin-button .slot-currency-value-icon { width:17px; height:15px; vertical-align:-4px; }
@container (max-width:390px) { .dashboard-stat-upgrade small { font-size:8px; } .dashboard-stat-upgrade .credit-inline-icon { width:18px; height:16px; } .dashboard-stat-upgrade .scrap-inline-icon { width:14px; height:12px; } }
.scrap-chip .scrap-glyph,.scrap-resource .resource-icon,.scrap-inline-icon { filter:contrast(1.16) saturate(1.12) drop-shadow(0 1px 1px rgba(0,0,0,.72)) drop-shadow(0 0 2px rgba(215,125,61,.28)); }
.mode-difficulty-card > small.mode-repair-budget { color: #a8dce9; font-size: 7px; line-height: 1.35; letter-spacing: .015em; }

/* Obrana a útok sú dve rovnocenné misie vedľa seba. */
.mission-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:9px; }
.mission-choice-grid .defense-briefing-panel,.attack-briefing-panel { grid-template-columns:clamp(48px,16vw,100px) minmax(0,1fr); align-items:stretch; gap:9px; min-width:0; min-height:122px; padding:9px; border-radius:11px; }
.mission-choice-grid .defense-briefing-visual { width:100%; max-width:100px; height:100%; min-height:100px; aspect-ratio:auto; align-self:stretch; border-radius:9px; }
.mission-choice-grid .defense-map-index { top:5px; left:5px; padding:3px 4px; }
.mission-choice-grid .defense-map-index b { font-size:10px; }
.mission-choice-grid .defense-briefing-copy,.attack-briefing-copy { display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:center; align-items:center; gap:4px 6px; }
.mission-choice-grid .defense-briefing-copy .eyebrow,.attack-briefing-copy .eyebrow { grid-column:1/-1; margin:0; overflow:hidden; font-size:7px; line-height:1.25; letter-spacing:.08em; text-overflow:ellipsis; white-space:nowrap; }
.mission-choice-grid .defense-briefing-copy h3,.attack-briefing-copy h3 { grid-column:1/-1; min-width:0; overflow:hidden; font-size:clamp(15px,2vw,23px); line-height:1.05; text-overflow:ellipsis; white-space:nowrap; }
.mission-choice-grid .defense-progress-card,.attack-briefing-copy .defense-progress-card { grid-column:1; grid-row:3; max-width:100%; padding:4px 5px; }
.mission-choice-grid .defense-progress-card b,.attack-briefing-copy .defense-progress-card b { font-size:clamp(6px,.8vw,8px); }
.mission-choice-grid .defense-briefing-copy > .start-button,.attack-briefing-copy > .start-button { grid-column:2; grid-row:3; min-width:54px; min-height:28px; gap:4px; padding:5px 6px; border-radius:6px; font-size:7px; letter-spacing:.04em; }
.mission-choice-grid .defense-briefing-copy > .start-button .button-arrow,.attack-briefing-copy > .start-button .button-arrow { font-size:10px; }
.attack-briefing-panel { --mode-accent:#86d6ce; position:relative; display:grid; overflow:hidden; border:1px solid rgba(133,169,181,.19); background:linear-gradient(145deg,rgba(19,30,41,.98),rgba(10,16,24,.99)); box-shadow:0 16px 36px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.035); }
.attack-briefing-visual { position:relative; display:grid; min-width:0; min-height:100px; place-items:center; overflow:hidden; isolation:isolate; border:1px solid rgba(133,169,181,.22); border-radius:9px; background:#111b23; }
.mission-choice-grid .defense-map-index { display:none; }
.attack-briefing-visual svg { position:absolute; right:5px; bottom:5px; width:22px; height:auto; padding:3px; border:1px solid rgba(133,169,181,.3); border-radius:6px; background:rgba(8,14,20,.78); filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.attack-briefing-copy .eyebrow { color:#86d6ce; }
.attack-briefing-copy h3 { color:#f0f5f2; }
.attack-briefing-copy .defense-progress-card { grid-column:1; grid-row:3; }
.attack-briefing-copy > .start-button { grid-row:3; }
@media (max-width:520px) {
  .mission-choice-grid { gap:6px; }
  .mission-choice-grid .defense-briefing-panel,.attack-briefing-panel { grid-template-columns:clamp(42px,14vw,58px) minmax(0,1fr); gap:5px; min-height:116px; padding:6px; border-radius:9px; }
  .mission-choice-grid .defense-briefing-visual { max-width:none; min-height:100px; border-radius:7px; }
  .mission-choice-grid .defense-map-index { display:none; }
  .mission-choice-grid .defense-briefing-copy,.attack-briefing-copy { gap:4px 3px; }
  .mission-choice-grid .defense-briefing-copy .eyebrow,.attack-briefing-copy .eyebrow { font-size:6px; letter-spacing:.04em; }
  .mission-choice-grid .defense-briefing-copy h3,.attack-briefing-copy h3 { font-size:clamp(13px,4vw,17px); }
  .mission-choice-grid .defense-progress-card,.attack-briefing-copy .defense-progress-card { padding:3px 4px; }
  .mission-choice-grid .defense-progress-card b,.attack-briefing-copy .defense-progress-card b { font-size:6px; letter-spacing:0; }
  .mission-choice-grid .defense-briefing-copy > .start-button,.attack-briefing-copy > .start-button { min-width:44px; min-height:26px; gap:2px; padding:4px 3px; font-size:6px; }
  .mission-choice-grid .defense-briefing-copy > .start-button .button-arrow,.attack-briefing-copy > .start-button .button-arrow { font-size:8px; }
  .attack-briefing-visual { min-height:100px; border-radius:7px; }
  .attack-briefing-visual svg { right:3px; bottom:3px; width:19px; padding:2px; }
}
@media (max-width:350px) {
  .mission-choice-grid { gap:4px; }
  .mission-choice-grid .defense-briefing-panel,.attack-briefing-panel { grid-template-columns:42px minmax(0,1fr); gap:4px; padding:5px; }
  .mission-choice-grid .defense-briefing-copy > .start-button,.attack-briefing-copy > .start-button { min-width:38px; font-size:5px; }
}

/* Mobile special-expedition tiles: taller cards, readable labels, and a tighter crop on the scene art. */
@media (max-width:520px) {
  .resource-mode-grid { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:6px; }
  .resource-mode-tile { grid-template-columns:minmax(0,1fr); grid-template-rows:36px auto auto auto; justify-items:center; align-content:start; gap:4px; min-height:128px; padding:7px 4px; border-radius:9px; text-align:center; }
  .resource-mode-tile .mode-tile-icon { grid-column:1; grid-row:1; width:34px; height:34px; border-radius:9px; }
  .resource-mode-tile .mode-tile-icon svg { width:23px; height:23px; }
  .resource-mode-tile .mode-tile-copy { grid-column:1; grid-row:2; justify-items:center; align-content:center; width:100%; gap:2px; }
  .resource-mode-tile .mode-tile-copy small { display:block; max-width:100%; font-size:6px; letter-spacing:.08em; }
  .resource-mode-tile .mode-tile-copy b { display:block; max-width:100%; overflow:visible; font-size:9px; line-height:1.08; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; }
  .resource-mode-tile .resource-mode-stage { grid-column:1; grid-row:3; justify-self:center; gap:3px; padding:0; font-size:6px; }
  .resource-mode-tile .resource-mode-stage i { font-size:6px; }
  .resource-mode-tile .mode-tile-action { grid-column:1; grid-row:4; justify-content:center; min-height:22px; gap:3px; padding:3px 9px; font-size:7px; }
  .resource-mode-tile .mode-tile-action b { font-size:8px; }
  .resource-mode-tile::after { background-image:linear-gradient(180deg,rgba(8,14,20,.40) 0%,rgba(8,14,20,.28) 50%,rgba(5,9,14,.76) 100%),linear-gradient(90deg,rgba(8,14,20,.22),rgba(8,14,20,.04)),var(--mode-art); background-position:center,center,100% center; background-size:100% 100%,100% 100%,auto 122%; opacity:1; }
}


/* Wide mission-card art, with copy layered over the quiet left side. */
.mission-choice-grid .defense-briefing-panel,.mission-choice-grid .attack-briefing-panel { position:relative; grid-template-columns:minmax(0,1fr); min-height:138px; padding:9px; isolation:isolate; }
.mission-choice-grid .defense-briefing-visual,.mission-choice-grid .attack-briefing-visual { position:absolute; inset:0; z-index:0; width:auto; max-width:none; height:auto; min-height:0; aspect-ratio:auto; align-self:auto; justify-self:stretch; border:0; border-radius:inherit; box-shadow:none; }
.mission-choice-grid .defense-briefing-visual::before,.mission-choice-grid .defense-briefing-visual::after { display:none; }
.mission-choice-grid .defense-map-image { background-position:64% center !important; background-size:cover !important; }
.mission-choice-grid .mission-defense-art { background-image:url('./assets/mission-defense-v4.png') !important; filter:saturate(.9) brightness(.86) !important; }
.mission-choice-grid .defense-map-shade { background:linear-gradient(90deg,rgba(5,10,15,.92) 0%,rgba(5,10,15,.78) 42%,rgba(5,10,15,.16) 100%),linear-gradient(0deg,rgba(5,10,15,.24),transparent 45%); }
.mission-choice-grid .defense-map-index,.mission-choice-grid .defense-map-label { display:none !important; }
.mission-choice-grid .defense-briefing-copy,.mission-choice-grid .attack-briefing-copy { position:relative; z-index:1; grid-column:1; width:100%; min-height:118px; align-content:space-between; gap:4px 6px; }
.mission-choice-grid .attack-briefing-visual { background:#111b23; }
.mission-choice-grid .attack-scene-art { position:absolute; inset:0; z-index:0; background-image:linear-gradient(90deg,rgba(5,10,15,.92) 0%,rgba(5,10,15,.78) 42%,rgba(5,10,15,.12) 100%),url('./assets/mission-attack-v5.png'); background-position:center,62% center; background-size:cover,cover; transform:none; }
.mission-choice-grid .attack-briefing-visual svg { display:none; }
@media (max-width:520px) {
  .mission-choice-grid .defense-briefing-panel,.mission-choice-grid .attack-briefing-panel { min-height:136px; padding:7px; }
  .mission-choice-grid .defense-briefing-copy,.mission-choice-grid .attack-briefing-copy { min-height:120px; gap:4px 3px; }
}
@media (max-width:350px) {
  .mission-choice-grid .defense-briefing-panel,.mission-choice-grid .attack-briefing-panel { min-height:130px; padding:6px; }
  .mission-choice-grid .defense-briefing-copy,.mission-choice-grid .attack-briefing-copy { min-height:116px; }
}


/* Attack card: shift the scene left and keep its CTA clear and easy to tap. */
.mission-choice-grid .attack-briefing-visual { left:-22%; right:0; pointer-events:none; }
.mission-choice-grid .attack-briefing-copy { grid-template-rows:auto 1fr auto; }
.mission-choice-grid .attack-briefing-copy .eyebrow { grid-row:1; }
.mission-choice-grid .attack-briefing-copy .defense-progress-card { grid-column:1; grid-row:3; }
.mission-choice-grid .attack-briefing-copy > .start-button { grid-column:2; grid-row:3; justify-self:end; min-width:68px; min-height:32px; justify-content:center; padding:6px 8px; font-size:9px; line-height:1; }
@media (max-width:520px) {
  .mission-choice-grid .attack-briefing-copy > .start-button { min-width:64px; min-height:31px; padding:6px 6px; font-size:8px; }
}
@media (max-width:350px) {
  .mission-choice-grid .attack-briefing-copy > .start-button { min-width:60px; min-height:30px; padding:5px; font-size:7px; }
}


/* Further left-shift for the attack scene art. */
.mission-choice-grid .attack-briefing-visual { left:-36%; right:0; }


/* Shift the defense scene left inside its card. */
.mission-choice-grid .defense-briefing-visual { left:-36%; right:0; }

/* Keep the defense card focused on the mode and progress, without a map title. */
.mission-choice-grid .defense-progress-card,.mission-choice-grid .defense-briefing-copy > .start-button { grid-row:2; }

/* Match the compact attack CTA while keeping defense's orange accent restrained. */
.mission-choice-grid .defense-briefing-copy > #startButton { justify-self:end; min-width:68px; min-height:32px; justify-content:center; gap:5px; padding:6px 8px; border:1px solid rgba(144,190,198,.38); border-radius:6px; background:linear-gradient(145deg,rgba(30,48,57,.94),rgba(15,27,35,.96)); color:#e3ece9; box-shadow:inset 0 1px rgba(255,255,255,.07),0 4px 12px rgba(0,0,0,.2); font-size:9px; line-height:1; }
.mission-choice-grid .defense-briefing-copy > #startButton:hover { border-color:rgba(164,215,220,.58); background:linear-gradient(145deg,rgba(38,60,68,.96),rgba(18,34,41,.98)); box-shadow:inset 0 1px rgba(255,255,255,.09),0 5px 14px rgba(0,0,0,.24); }
.mission-choice-grid .defense-briefing-copy > #startButton .button-arrow { color:#9bcbd0; font-size:10px; }
@media (max-width:520px) { .mission-choice-grid .defense-briefing-copy > #startButton { min-width:64px; min-height:31px; padding:6px; font-size:8px; } }
@media (max-width:350px) { .mission-choice-grid .defense-briefing-copy > #startButton { min-width:60px; min-height:30px; padding:5px; font-size:7px; } }

/* Keep the play action consistent across Defense, Attack and special expeditions. */
.mission-choice-grid .defense-briefing-copy > #startButton,
.mission-choice-grid .attack-briefing-copy > #attackStartButton,
.resource-mode-tile .mode-tile-action,
#modeStartButton {
  display:flex; min-width:68px; min-height:32px; align-items:center; justify-content:center; gap:5px; padding:6px 8px;
  border:1px solid rgba(177,190,190,.3); border-radius:6px;
  background:linear-gradient(145deg,rgba(31,43,49,.96),rgba(15,25,31,.98));
  color:#e3ece9; font-family:var(--font-display); font-size:9px; font-weight:900; letter-spacing:.045em; line-height:1;
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 4px 12px rgba(0,0,0,.2);
  transition:background .15s,border-color .15s,transform .15s,box-shadow .15s;
}
.mission-choice-grid .defense-briefing-copy > #startButton:hover,
.mission-choice-grid .attack-briefing-copy > #attackStartButton:hover,
.resource-mode-tile:hover .mode-tile-action,
#modeStartButton:hover {
  border-color:rgba(208,219,215,.48); background:linear-gradient(145deg,rgba(43,57,63,.98),rgba(20,32,38,.99));
  box-shadow:inset 0 1px rgba(255,255,255,.09),0 5px 14px rgba(0,0,0,.24);
}
.mission-choice-grid .defense-briefing-copy > #startButton .button-arrow,
.mission-choice-grid .attack-briefing-copy > #attackStartButton .button-arrow,
.resource-mode-tile .mode-tile-action b,
#modeStartButton span { color:#b7c8c8; font-size:10px; }
@media (max-width:520px) {
  .mission-choice-grid .defense-briefing-copy > #startButton,
  .mission-choice-grid .attack-briefing-copy > #attackStartButton { min-width:64px; min-height:31px; padding:6px; font-size:8px; }
  .resource-mode-tile .mode-tile-action { min-width:58px; min-height:28px; padding:5px 7px; font-size:8px; }
}
@media (max-width:350px) {
  .mission-choice-grid .defense-briefing-copy > #startButton,
  .mission-choice-grid .attack-briefing-copy > #attackStartButton { min-width:60px; min-height:30px; padding:5px; font-size:7px; }
  .resource-mode-tile .mode-tile-action { min-width:54px; min-height:26px; padding:4px 6px; font-size:7px; }
}

/* Stronger, still translucent backplates keep expedition labels readable over art. */
.resource-mode-tile .mode-tile-action { min-width:58px; min-height:27px; padding:4px 6px; border-radius:5px; font-size:8px; }
.resource-mode-tile .mode-tile-action b { font-size:8px; }
#modeStartButton { min-width:0; min-height:34px; padding:7px 12px; font-size:8px; }
.resource-mode-tile .mode-tile-copy {
  width:fit-content; max-width:100%; padding:4px 7px; border:1px solid color-mix(in srgb,var(--mode-accent) 30%,rgba(190,208,208,.2));
  border-radius:5px; background:rgba(5,10,15,.5); box-shadow:0 2px 8px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.06); backdrop-filter:blur(2px);
}
.resource-mode-tile .mode-tile-copy small { color:color-mix(in srgb,var(--mode-accent) 82%,#e5efeb); }
.resource-mode-tile .mode-tile-copy b { color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.7); }
.resource-mode-tile .resource-mode-stage,
#modeDifficultyStage {
  width:max-content; max-width:100%; padding:4px 7px; border:1px solid color-mix(in srgb,var(--mode-accent) 34%,rgba(190,208,208,.22));
  border-radius:5px; background:rgba(5,10,15,.5); box-shadow:0 2px 8px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.06); text-shadow:0 1px 2px rgba(0,0,0,.65); backdrop-filter:blur(2px);
}
.resource-mode-stage,#modeDifficultyStage { color:#f5f8f6 !important; }
.resource-mode-stage i { color:#e5eeea !important; }
.mode-difficulty-boss-reward,
.mode-difficulty-points > span,
.mode-difficulty-reward,
.resource-mode-reward {
  border:1px solid color-mix(in srgb,var(--mode-accent) 25%,rgba(190,208,208,.19));
  border-radius:6px; background:rgba(5,10,15,.5); box-shadow:0 2px 7px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.045);
}
.mode-difficulty-boss-reward { padding:6px 8px; }
.mode-difficulty-points > span { padding:5px 7px 5px 15px; }
.mode-difficulty-points > span::before { top:.85em; left:6px; }
.mode-difficulty-reward,.resource-mode-reward { background:color-mix(in srgb,var(--mode-accent) 7%,rgba(5,10,15,.5)); }
.resource-mode-tile { grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; }
.resource-mode-tile .mode-tile-copy { grid-column:1; grid-row:1; justify-self:start; justify-items:start; text-align:left; }
.resource-mode-tile .resource-mode-stage { grid-column:1; grid-row:2; justify-self:start; }
.resource-mode-tile .mode-tile-action { grid-column:2; grid-row:1 / 3; justify-self:end; }
@media (max-width:520px) {
  .resource-mode-tile { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; align-content:center; gap:7px 4px; }
  .resource-mode-tile .mode-tile-copy { grid-column:1; grid-row:1; justify-self:center; justify-items:center; text-align:center; }
  .resource-mode-tile .resource-mode-stage { grid-column:1; grid-row:2; justify-self:center; }
  .resource-mode-tile .mode-tile-action { grid-column:1; grid-row:3; justify-self:center; }
  .resource-mode-tile .mode-tile-action { min-width:54px; min-height:26px; padding:4px 6px; font-size:7px; }
  #modeStartButton { min-height:32px; padding:6px 10px; }
}
@media (max-width:350px) {
  .resource-mode-tile .mode-tile-action { min-width:50px; min-height:24px; padding:3px 5px; font-size:7px; }
}

/* Crate opening reveal: charge-up, lid lift, then a tier-colored reward reveal. */
.crate-reveal-overlay { position:fixed; z-index:300; inset:0; display:grid; place-items:center; padding:12px; overflow-y:auto; background:rgba(2,7,12,.82); backdrop-filter:blur(9px); }
.crate-reveal-sheet { position:relative; width:min(430px,100%); max-height:calc(100dvh - 24px); overflow-y:auto; padding:21px 18px 16px; border:1px solid color-mix(in srgb,var(--crate-reveal-accent,#72dfc9) 48%,rgba(190,220,231,.18)); border-radius:17px; background:radial-gradient(ellipse at 50% 14%,color-mix(in srgb,var(--crate-reveal-accent,#72dfc9) 15%,transparent),transparent 53%),linear-gradient(155deg,rgba(19,29,39,.99),rgba(5,11,18,.995)); box-shadow:0 24px 80px rgba(0,0,0,.68),inset 0 1px rgba(255,255,255,.08); text-align:center; animation:crateRevealSheetIn .24s ease-out both; }
.crate-reveal-close { position:absolute; top:10px; right:10px; z-index:4; display:grid; width:31px; height:31px; place-items:center; border:1px solid rgba(188,210,219,.2); border-radius:8px; background:rgba(255,255,255,.045); color:#c7d3d7; font-size:21px; line-height:1; }
.crate-reveal-kicker { margin:0 0 5px; color:var(--crate-reveal-accent,#72dfc9); font-size:8px; font-weight:900; letter-spacing:.16em; }
.crate-reveal-sheet h2 { margin:0; color:#f0f7f7; font-family:var(--font-display); font-size:22px; line-height:1.1; }
.crate-reveal-stage { position:relative; display:grid; min-height:170px; place-items:center; margin:5px 0 0; overflow:hidden; isolation:isolate; }
.crate-reveal-burst { position:absolute; z-index:-1; width:190px; height:150px; border-radius:50%; background:radial-gradient(ellipse,color-mix(in srgb,var(--crate-tier-accent,var(--crate-reveal-accent,#72dfc9)) 48%,transparent),color-mix(in srgb,var(--crate-tier-accent,var(--crate-reveal-accent,#72dfc9)) 13%,transparent) 42%,transparent 72%); opacity:0; transform:scale(.22); }
.crate-reveal-rays { position:absolute; z-index:0; width:230px; height:205px; border-radius:50%; background:repeating-conic-gradient(from 0deg,transparent 0deg 12deg,color-mix(in srgb,var(--crate-tier-accent,#72dfc9) 48%,transparent) 14deg 16deg,transparent 19deg 30deg); opacity:0; transform:scale(.25) rotate(-12deg); mask-image:radial-gradient(ellipse,transparent 0 21%,#000 48%,transparent 72%); }
.crate-reveal-rings { position:absolute; z-index:0; width:225px; height:160px; pointer-events:none; }
.crate-reveal-rings i { position:absolute; inset:12% 8%; border:1px solid color-mix(in srgb,var(--crate-tier-accent,#72dfc9) 78%,transparent); border-radius:50%; opacity:0; transform:scale(.22); box-shadow:0 0 13px color-mix(in srgb,var(--crate-tier-accent,#72dfc9) 38%,transparent),inset 0 0 12px color-mix(in srgb,var(--crate-tier-accent,#72dfc9) 16%,transparent); }
.crate-reveal-rings i:nth-child(2) { inset:22% 17%; }
.crate-reveal-chest { position:relative; z-index:1; display:grid; width:260px; height:162px; place-items:center; }
.crate-reveal-chest .crate-illustration { position:relative; display:grid; width:250px; height:155px; flex:none; place-items:center; margin:0; overflow:visible; }
.crate-reveal-chest .crate-illustration::before { right:12%; bottom:12%; left:12%; height:58%; background:radial-gradient(ellipse,color-mix(in srgb,var(--crate-reveal-accent,#72dfc9) 36%,transparent),transparent 72%); filter:blur(14px); }
.crate-reveal-chest .crate-illustration .crate-svg { position:absolute; inset:0; display:block; width:100%; height:100%; margin:0; object-fit:contain; filter:drop-shadow(0 12px 11px rgba(0,0,0,.66)); transition:none; }
.crate-reveal-chest .crate-illustration .crate-reveal-closed { z-index:2; }
.crate-reveal-chest .crate-illustration .crate-reveal-open-art { z-index:3; opacity:0; clip-path:inset(0 0 58% 0); transform:translateY(7px) scale(.97); filter:drop-shadow(0 14px 12px rgba(0,0,0,.68)) brightness(.82); }
.crate-reveal-sparks { position:absolute; z-index:2; inset:15px 25px; pointer-events:none; }
.crate-reveal-sparks i { position:absolute; left:50%; top:50%; width:5px; height:5px; border-radius:50%; background:#fff6d0; box-shadow:0 0 11px 3px color-mix(in srgb,var(--crate-tier-accent,var(--crate-reveal-accent,#72dfc9)) 76%,transparent); opacity:0; }
.crate-reveal-sparks i:nth-child(1) { --spark-x:-92px; --spark-y:-30px; }
.crate-reveal-sparks i:nth-child(2) { --spark-x:87px; --spark-y:-38px; }
.crate-reveal-sparks i:nth-child(3) { --spark-x:-105px; --spark-y:21px; }
.crate-reveal-sparks i:nth-child(4) { --spark-x:103px; --spark-y:24px; }
.crate-reveal-sparks i:nth-child(5) { --spark-x:-44px; --spark-y:-62px; }
.crate-reveal-sparks i:nth-child(6) { --spark-x:43px; --spark-y:-64px; }
.crate-reveal-sparks i:nth-child(7) { --spark-x:-60px; --spark-y:53px; }
.crate-reveal-sparks i:nth-child(8) { --spark-x:63px; --spark-y:52px; }
.crate-reveal-meta { display:flex; align-items:center; justify-content:center; gap:12px; margin:-2px 0 10px; color:#899ba2; font-size:8px; font-weight:800; letter-spacing:.06em; }
.crate-reveal-meta b { color:#c9b2ec; font-family:var(--font-display); font-size:9px; }
.crate-reveal-rewards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; text-align:left; }
.crate-reveal-reward { display:flex; min-width:0; min-height:42px; flex-direction:column; justify-content:center; gap:3px; padding:7px 9px; border:1px solid color-mix(in srgb,var(--crate-reveal-accent,#72dfc9) 24%,rgba(177,202,220,.08)); border-radius:8px; background:linear-gradient(125deg,color-mix(in srgb,var(--crate-reveal-accent,#72dfc9) 8%,rgba(7,14,21,.8)),rgba(7,13,20,.9)); opacity:0; transform:translateY(8px) scale(.97); }
.crate-reveal-reward b { overflow:hidden; color:#e6f0ef; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.crate-reveal-reward span { color:var(--crate-reveal-accent,#72dfc9); font-size:8px; font-weight:900; letter-spacing:.035em; }
.crate-reveal-reward[data-grade="B"] { border-color:rgba(239,208,91,.55); background:linear-gradient(125deg,rgba(239,208,91,.14),rgba(7,13,20,.92)); box-shadow:inset 0 0 18px rgba(239,208,91,.06); }
.crate-reveal-reward[data-grade="B"] span { color:#ffe57c; }
.crate-reveal-reward[data-grade="A"] { border-color:rgba(242,99,114,.72); background:linear-gradient(125deg,rgba(242,99,114,.2),rgba(7,13,20,.92)); box-shadow:inset 0 0 20px rgba(242,99,114,.1),0 0 10px rgba(242,99,114,.1); }
.crate-reveal-reward[data-grade="A"] span { color:#ff9aa5; }
.crate-reveal-continue { width:100%; min-height:39px; margin-top:11px; border:1px solid color-mix(in srgb,var(--crate-reveal-accent,#72dfc9) 50%,transparent); border-radius:8px; background:linear-gradient(120deg,color-mix(in srgb,var(--crate-reveal-accent,#72dfc9) 18%,rgba(10,17,24,.9)),rgba(8,14,21,.96)); color:#e8f5f2; font-family:var(--font-display); font-size:10px; font-weight:900; letter-spacing:.08em; }
.crate-reveal-overlay.is-opening .crate-reveal-chest { animation:crateChestCharge .88s cubic-bezier(.3,.05,.4,1) both; }
.crate-reveal-overlay.is-opening .crate-reveal-open-art { animation:crateChestOpenReveal .82s cubic-bezier(.18,.72,.25,1) .3s both; }
.crate-reveal-overlay.is-opening .crate-reveal-closed { animation:crateClosedFade .3s ease-out .76s both; }
.crate-reveal-overlay.is-opening .crate-reveal-burst { animation:crateLightBurst .88s ease-out .7s both; }
.crate-reveal-overlay.is-opening .crate-reveal-sparks i { animation:crateSparkFly .78s ease-out .72s both; }
.crate-reveal-overlay.is-guarantee-b .crate-reveal-kicker,.crate-reveal-overlay.is-guarantee-a .crate-reveal-kicker { color:var(--crate-tier-accent); text-shadow:0 0 12px color-mix(in srgb,var(--crate-tier-accent) 54%,transparent); }
.crate-reveal-overlay.is-guarantee-b .crate-reveal-sheet { border-color:rgba(239,208,91,.58); box-shadow:0 24px 80px rgba(0,0,0,.68),0 0 38px rgba(239,208,91,.12),inset 0 1px rgba(255,255,255,.09); }
.crate-reveal-overlay.is-guarantee-a .crate-reveal-sheet { border-color:rgba(242,99,114,.78); background:radial-gradient(ellipse at 50% 15%,rgba(242,99,114,.22),rgba(107,39,100,.12) 35%,transparent 62%),linear-gradient(155deg,rgba(28,25,42,.99),rgba(8,10,19,.995)); box-shadow:0 24px 80px rgba(0,0,0,.72),0 0 48px rgba(242,99,114,.2),inset 0 1px rgba(255,255,255,.1); }
.crate-reveal-overlay.is-guarantee-b.is-opening .crate-reveal-chest { animation:crateChestRare .98s cubic-bezier(.25,.7,.3,1) both; }
.crate-reveal-overlay.is-guarantee-b.is-opening .crate-reveal-open-art { animation-duration:.96s; animation-delay:.32s; }
.crate-reveal-overlay.is-guarantee-b.is-opening .crate-reveal-closed { animation-delay:.88s; }
.crate-reveal-overlay.is-guarantee-b.is-opening .crate-reveal-rays { animation:crateTierRays 1.22s ease-out .34s both; }
.crate-reveal-overlay.is-guarantee-b.is-opening .crate-reveal-rings i:first-child { animation:crateTierRing .94s ease-out .52s both; }
.crate-reveal-overlay.is-guarantee-b.is-opening .crate-reveal-rings i:nth-child(2) { animation:crateTierRing .9s ease-out .7s both; }
.crate-reveal-overlay.is-guarantee-b.is-opening .crate-reveal-burst { animation-duration:1.05s; animation-delay:.66s; }
.crate-reveal-overlay.is-guarantee-a.is-opening .crate-reveal-chest { animation:crateChestLegend 1.3s cubic-bezier(.16,.72,.22,1) both; }
.crate-reveal-overlay.is-guarantee-a.is-opening .crate-reveal-open-art { animation-duration:1.08s; animation-delay:.38s; }
.crate-reveal-overlay.is-guarantee-a.is-opening .crate-reveal-closed { animation-delay:1.02s; }
.crate-reveal-overlay.is-guarantee-a.is-opening .crate-reveal-rays { animation:crateTierRaysLegend 1.65s cubic-bezier(.16,.65,.25,1) .26s both; }
.crate-reveal-overlay.is-guarantee-a.is-opening .crate-reveal-rings i:first-child { animation:crateTierRingLegend 1.25s ease-out .54s both; }
.crate-reveal-overlay.is-guarantee-a.is-opening .crate-reveal-rings i:nth-child(2) { animation:crateTierRingLegend .98s ease-out .77s both; }
.crate-reveal-overlay.is-guarantee-a.is-opening .crate-reveal-burst { animation:crateLegendBurst 1.4s ease-out .62s both; }
.crate-reveal-overlay.is-guarantee-a.is-opening .crate-reveal-sparks i { animation-duration:1.05s; animation-delay:.7s; }
.crate-reveal-overlay.is-revealed .crate-reveal-reward { animation:crateRewardRise .3s cubic-bezier(.2,.8,.25,1) calc(var(--reward-index,0) * 35ms) both; }
@keyframes crateRevealSheetIn { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes crateChestCharge { 0%,100% { transform:translateY(0) scale(1); filter:brightness(1); } 18% { transform:translateY(-3px) rotate(-1.4deg); } 34% { transform:translateY(2px) rotate(1.6deg); } 52% { transform:translateY(-4px) rotate(-1deg); } 68% { transform:translateY(1px) rotate(.7deg); } 84% { transform:translateY(-2px) scale(1.025); filter:brightness(1.3); } }
@keyframes crateChestRare { 0%,100% { transform:translateY(0) scale(1); filter:brightness(1); } 18% { transform:translateY(-4px) rotate(-1.7deg); } 36% { transform:translateY(2px) rotate(1.7deg); } 54% { transform:translateY(-5px) rotate(-1deg); filter:brightness(1.22); } 72% { transform:translateY(1px) rotate(.7deg); } 88% { transform:translateY(-10px) scale(1.07); filter:brightness(1.55) drop-shadow(0 0 17px rgba(239,208,91,.75)); } }
@keyframes crateChestLegend { 0%,100% { transform:translateY(0) scale(1); filter:brightness(1); } 15% { transform:translateY(-4px) rotate(-2deg); } 30% { transform:translateY(3px) rotate(2deg); } 47% { transform:translateY(-6px) rotate(-1.4deg); filter:brightness(1.3); } 63% { transform:translateY(2px) rotate(1deg); } 78% { transform:translateY(-6px) scale(1.035); } 100% { transform:translateY(-15px) scale(1.1); filter:brightness(1.7) drop-shadow(0 0 24px rgba(242,99,114,.9)); } }
@keyframes crateChestOpenReveal { 0% { opacity:0; clip-path:inset(0 0 58% 0); transform:translateY(7px) scale(.97); filter:drop-shadow(0 14px 12px rgba(0,0,0,.68)) brightness(.82); } 30% { opacity:.48; clip-path:inset(0 0 48% 0); transform:translateY(2px) scale(.99); } 68% { opacity:1; clip-path:inset(0 0 18% 0); transform:translateY(-2px) scale(1.015); filter:drop-shadow(0 14px 12px rgba(0,0,0,.68)) brightness(1.22); } 100% { opacity:1; clip-path:inset(0); transform:translateY(-2px) scale(1); filter:drop-shadow(0 14px 12px rgba(0,0,0,.68)) brightness(1); } }
@keyframes crateClosedFade { from { opacity:1; } to { opacity:0; } }
@keyframes crateLightBurst { 0% { opacity:0; transform:scale(.22); } 35% { opacity:.95; } 100% { opacity:0; transform:scale(1.25); } }
@keyframes crateLegendBurst { 0% { opacity:0; transform:scale(.12); filter:saturate(1); } 28% { opacity:1; filter:saturate(1.4); } 64% { opacity:.8; } 100% { opacity:0; transform:scale(1.55); filter:saturate(1.9); } }
@keyframes crateTierRays { 0% { opacity:0; transform:scale(.25) rotate(-12deg); } 35% { opacity:.72; } 100% { opacity:0; transform:scale(1.08) rotate(18deg); } }
@keyframes crateTierRaysLegend { 0% { opacity:0; transform:scale(.2) rotate(-25deg); } 27% { opacity:.92; } 64% { opacity:.75; transform:scale(1.12) rotate(18deg); } 100% { opacity:0; transform:scale(1.42) rotate(55deg); } }
@keyframes crateTierRing { 0% { opacity:0; transform:scale(.2); } 30% { opacity:.85; } 100% { opacity:0; transform:scale(1.22); } }
@keyframes crateTierRingLegend { 0% { opacity:0; transform:scale(.12) rotate(-12deg); } 30% { opacity:1; } 100% { opacity:0; transform:scale(1.38) rotate(16deg); } }
@keyframes crateSparkFly { 0% { opacity:0; transform:translate(0,0) scale(.2); } 30% { opacity:1; } 100% { opacity:0; transform:translate(var(--spark-x),var(--spark-y)) scale(1.25); } }
@keyframes crateRewardRise { from { opacity:0; transform:translateY(8px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (max-width:420px) { .crate-reveal-sheet { padding:20px 12px 13px; } .crate-reveal-stage { min-height:151px; } .crate-reveal-chest { width:230px; height:144px; } .crate-reveal-chest .crate-illustration { width:225px; height:140px; } .crate-reveal-reward { min-height:39px; padding:6px 7px; } .crate-reveal-reward b { font-size:9px; } }
@media (prefers-reduced-motion:reduce) { .crate-reveal-sheet,.crate-reveal-overlay.is-opening .crate-reveal-chest,.crate-reveal-overlay.is-opening .crate-reveal-open-art,.crate-reveal-overlay.is-opening .crate-reveal-closed,.crate-reveal-overlay.is-opening .crate-reveal-burst,.crate-reveal-overlay.is-opening .crate-reveal-rays,.crate-reveal-overlay.is-opening .crate-reveal-rings i,.crate-reveal-overlay.is-opening .crate-reveal-sparks i,.crate-reveal-overlay.is-revealed .crate-reveal-reward { animation:none; } .crate-reveal-overlay.is-opening .crate-reveal-closed { opacity:0; } .crate-reveal-overlay.is-opening .crate-reveal-open-art { opacity:1; clip-path:inset(0); transform:none; } .crate-reveal-overlay.is-opening .crate-reveal-reward,.crate-reveal-overlay.is-revealed .crate-reveal-reward { opacity:1; transform:none; } }

/* Daily, weekly and login rewards */
.mission-center { margin:18px 0 14px; }
.mission-center-card { overflow:hidden; border:1px solid rgba(104,143,159,.34); border-radius:14px; background:linear-gradient(145deg,rgba(17,28,38,.96),rgba(9,15,23,.96)); box-shadow:0 12px 30px rgba(0,0,0,.2); }
.mission-center-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; padding:16px 18px 12px; border-bottom:1px solid rgba(130,164,177,.16); }
.mission-center-heading .eyebrow,.weekly-mission-card .eyebrow,.login-calendar-card .eyebrow { margin:0 0 4px; color:#79c9d2; font-size:9px; letter-spacing:.14em; font-weight:800; }
.mission-center-heading h2,.weekly-mission-card h3,.login-calendar-card h3 { margin:0; color:#edf5f7; font-size:20px; }
.mission-center-heading h2 small { margin-left:7px; color:#e9bd61; font-size:12px; }
.daily-missions-toggle { display:flex; align-items:center; gap:8px; padding:5px 9px; border:1px solid rgba(104,143,159,.28); border-radius:7px; background:rgba(9,15,23,.42); color:#9eb4bc; font-size:10px; font-weight:800; cursor:pointer; }
.daily-missions-toggle b { color:#79c9d2; font-size:14px; line-height:1; }
.daily-missions-content[hidden] { display:none; }
.weekly-mission-heading { align-items:center !important; margin:0 !important; }
.weekly-missions-toggle { display:flex; align-items:center; gap:8px; padding:5px 8px; border:1px solid rgba(104,143,159,.24); border-radius:7px; background:rgba(9,15,23,.36); color:#9eb4bc; font-size:9px; font-weight:800; cursor:pointer; }
.weekly-missions-toggle b { color:#79c9d2; font-size:13px; }
.weekly-missions-content[hidden] { display:none; }
.weekly-missions-note { margin:8px 0; font-size:8px !important; line-height:1.4; }
.mission-center-heading>p { max-width:430px; margin:0; color:#93a7ae; font-size:11px; line-height:1.45; text-align:right; }
.daily-mission-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; padding:8px; }
.mission-row { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; gap:3px 7px; padding:7px 8px; border:1px solid rgba(125,150,164,.17); border-radius:8px; background:rgba(24,37,48,.66); }
.mission-row.is-ready { border-color:rgba(95,204,165,.48); background:linear-gradient(110deg,rgba(29,68,62,.46),rgba(24,37,48,.68)); }
.mission-row.is-claimed { opacity:.58; }
.mission-row.is-locked { opacity:.48; }
.mission-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
.mission-copy b,.weekly-mission b { min-width:0; color:#e3edf0; font-size:10px; line-height:1.25; white-space:normal; overflow-wrap:anywhere; }
.mission-copy small,.weekly-mission small { color:#91a7af; font-size:9px; font-weight:700; }
.mission-progress { grid-column:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:3px; color:#a8bec4; font-size:8px; font-weight:800; }
.mission-progress i,.weekly-mission>i { overflow:hidden; width:100%; height:4px; border-radius:9px; background:rgba(3,8,13,.6); }
.mission-progress em,.weekly-mission>i em { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#4daaa7,#81e1bd); }
.mission-row>button,.daily-completion-reward button,.login-calendar-card header>button,.weekly-mission>button { grid-column:auto; grid-row:auto; align-self:center; justify-self:end; min-width:64px; padding:4px 7px; border:1px solid rgba(115,205,177,.4); border-radius:6px; background:rgba(44,125,104,.28); color:#a9f1d5; font-size:7px; font-weight:900; letter-spacing:.04em; cursor:pointer; }
.mission-row>button { grid-column:2; grid-row:2; }
.mission-row>button:disabled,.daily-completion-reward button:disabled,.login-calendar-card header>button:disabled,.weekly-mission>button:disabled { border-color:rgba(118,142,153,.16); background:rgba(9,15,21,.42); color:#627780; cursor:default; }
.daily-completion-reward { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 11px 11px; padding:9px 12px; border:1px solid rgba(228,190,97,.25); border-radius:8px; background:rgba(117,83,32,.14); }
.daily-completion-reward.is-ready { border-color:rgba(239,205,104,.7); background:rgba(117,83,32,.3); }
.daily-completion-reward span { display:flex; flex-direction:column; gap:3px; }
.daily-completion-reward b { color:#f0d27d; font-size:10px; letter-spacing:.08em; }
.daily-completion-reward small { color:#adbac0; font-size:9px; }
.daily-completion-reward button { grid-column:auto; }
.weekly-completion-reward { display:flex; align-items:center; justify-content:space-between; gap:9px; margin-top:8px; padding:8px 9px; border:1px solid rgba(228,190,97,.24); border-radius:7px; background:rgba(117,83,32,.12); }
.weekly-completion-reward.is-ready { border-color:rgba(239,205,104,.7); background:rgba(117,83,32,.28); }
.weekly-completion-reward span { min-width:0; display:flex; flex-direction:column; gap:3px; }
.weekly-completion-reward b { color:#f0d27d; font-size:9px; letter-spacing:.07em; }
.weekly-completion-reward small { color:#adbac0; font-size:8px; line-height:1.35; }
.weekly-completion-reward button { flex:none; padding:5px 7px; border:1px solid rgba(115,205,177,.4); border-radius:6px; background:rgba(44,125,104,.28); color:#a9f1d5; font-size:7px; font-weight:900; letter-spacing:.04em; cursor:pointer; }
.weekly-completion-reward button:disabled { border-color:rgba(118,142,153,.16); background:rgba(9,15,21,.42); color:#627780; cursor:default; }
.mission-lower-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:10px; padding:0 11px 11px; }
.mission-lower-grid:not(.weekly-expanded) { grid-template-columns:1fr; }
.weekly-mission-card,.login-calendar-card { min-width:0; padding:12px; border:1px solid rgba(125,150,164,.2); border-radius:10px; background:rgba(11,19,27,.62); }
.weekly-mission-card header,.login-calendar-card header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
.weekly-mission-card h3,.login-calendar-card h3 { font-size:14px; }
.weekly-milestones { display:flex; gap:4px; }
.weekly-milestones button { display:flex; flex-direction:column; gap:2px; min-width:47px; padding:4px; border:1px solid rgba(229,192,96,.24); border-radius:6px; background:rgba(96,72,30,.16); color:#e3ca8e; font-size:8px; cursor:pointer; }
.weekly-milestones button:disabled { opacity:.52; cursor:default; }
.weekly-milestones button b { font-size:10px; }
.weekly-mission-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; padding:8px 0; }
.weekly-mission { display:grid; grid-template-columns:minmax(0,1fr) 70px auto; align-items:center; gap:7px; padding:6px 7px; border-radius:6px; background:rgba(26,39,49,.7); }
.weekly-mission>span { min-width:0; display:flex; flex-direction:column; gap:2px; }
.weekly-mission>i { height:3px; }
.weekly-mission>button { grid-column:auto; min-width:63px; padding:4px 5px; font-size:7px; }
.weekly-mission.is-complete { background:rgba(29,67,60,.44); }
.login-calendar-card header>button { grid-column:auto; justify-self:auto; min-width:76px; }
.login-calendar-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
.login-day { display:flex; min-height:42px; flex-direction:column; justify-content:center; gap:4px; padding:5px 6px; border:1px solid rgba(117,147,160,.17); border-radius:6px; background:rgba(23,35,46,.72); }
.login-day small { color:#8399a2; font-size:7px; font-weight:800; }
.login-day b { color:#c8d6da; font-size:8px; }
.login-day.is-today { border-color:rgba(95,205,172,.6); background:rgba(35,99,82,.3); }
.login-day.is-today b { color:#9ce7c9; }
.login-day.is-past { opacity:.45; }
.login-calendar-note { display:block; margin-top:8px; color:#83949b; font-size:8px; line-height:1.4; }
.login-reward-overlay { position:fixed; inset:0; z-index:320; display:grid; place-items:center; padding:16px; background:rgba(3,8,13,.78); backdrop-filter:blur(8px); }
.login-reward-sheet { position:relative; width:min(360px,100%); padding:24px 20px 19px; border:1px solid rgba(239,202,112,.42); border-radius:15px; background:radial-gradient(ellipse at 50% 0,rgba(224,176,74,.16),transparent 66%),linear-gradient(155deg,rgba(25,31,39,.99),rgba(8,14,21,.99)); box-shadow:0 24px 70px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.08); text-align:center; animation:loginRewardRise .28s cubic-bezier(.2,.75,.25,1) both; }
.login-reward-sheet .eyebrow { margin:0 24px 7px; color:#e9c46f; font-size:9px; font-weight:900; letter-spacing:.14em; }
.login-reward-sheet h2 { margin:0; color:#f2f5f6; font-size:23px; }
.login-reward-day { display:inline-flex; margin:12px auto 8px; padding:5px 10px; border:1px solid rgba(239,202,112,.24); border-radius:999px; background:rgba(151,109,37,.16); color:#f0d48a; font-size:10px; font-weight:900; letter-spacing:.08em; }
.login-reward-preview { margin:4px 0 18px; color:#c8d4d8; font-size:14px; font-weight:800; }
.login-reward-claim { width:100%; min-height:42px; border:1px solid rgba(245,211,126,.55); border-radius:8px; background:linear-gradient(135deg,rgba(179,132,45,.44),rgba(97,69,27,.42)); color:#ffe9a8; font-size:11px; font-weight:900; letter-spacing:.08em; cursor:pointer; }
.login-reward-close { position:absolute; top:10px; right:10px; width:30px; height:30px; border:1px solid rgba(220,236,241,.14); border-radius:7px; background:rgba(255,255,255,.04); color:#c8d3d7; font-size:20px; cursor:pointer; }
@keyframes loginRewardRise { from { opacity:0; transform:translateY(8px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (max-width:720px) { .mission-lower-grid { grid-template-columns:1fr; } }
@media (max-width:420px) { .mission-center-heading { align-items:flex-start; flex-direction:column; gap:7px; padding:13px; } .mission-center-heading>p { text-align:left; } .daily-mission-list { grid-template-columns:1fr; gap:4px; padding:7px; } .mission-row { grid-template-columns:minmax(0,1fr) auto; padding:6px 8px; } .mission-copy b { font-size:10px; } .weekly-mission { grid-template-columns:minmax(0,1fr) 52px auto; gap:5px; } .weekly-mission b { font-size:9px; } .weekly-mission small { font-size:8px; } .weekly-mission>button { min-width:54px; } .weekly-completion-reward { align-items:flex-start; } .weekly-completion-reward button { max-width:92px; } }

.hero-skill-upgrade:disabled { opacity:.86; filter:saturate(.58); cursor:not-allowed; }
.milestone-choice-overlay { position:fixed; inset:0; z-index:250; display:grid; place-items:center; padding:16px; background:rgba(3,8,13,.8); backdrop-filter:blur(8px); }
.milestone-choice-sheet { position:relative; width:min(390px,100%); padding:23px 19px 19px; border:1px solid color-mix(in srgb,var(--milestone-choice-accent,#c285f3) 55%,rgba(190,220,231,.18)); border-radius:15px; background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--milestone-choice-accent,#c285f3) 16%,transparent),transparent 68%),linear-gradient(155deg,rgba(20,29,39,.99),rgba(7,13,20,.99)); box-shadow:0 22px 70px rgba(0,0,0,.65),inset 0 1px rgba(255,255,255,.08); }
.milestone-choice-chest { display:block; width:118px; height:78px; margin:-4px auto 8px; object-fit:contain; filter:drop-shadow(0 8px 8px rgba(0,0,0,.58)); }
.milestone-choice-sheet>.eyebrow { margin:0 35px 8px 0; color:var(--milestone-choice-accent,#c285f3); font-size:9px; font-weight:900; letter-spacing:.12em; }
.milestone-choice-sheet h2 { margin:0; color:#f1f5f7; font-size:21px; }
.milestone-choice-copy { margin:7px 0 17px; color:#9eafb6; font-size:11px; }
.milestone-choice-close { position:absolute; top:11px; right:11px; width:32px; height:32px; border:1px solid rgba(220,236,241,.15); border-radius:8px; background:rgba(255,255,255,.05); color:#d8e3e7; font-size:22px; cursor:pointer; }
.milestone-choice-types { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.milestone-choice-types button { min-height:42px; border:1px solid rgba(177,201,210,.17); border-radius:8px; background:rgba(255,255,255,.035); color:#bdcbd0; font-size:11px; font-weight:850; cursor:pointer; }
.milestone-choice-types button[aria-pressed="true"] { border-color:var(--milestone-choice-accent,#c285f3); background:color-mix(in srgb,var(--milestone-choice-accent,#c285f3) 15%,rgba(255,255,255,.035)); color:#fff; box-shadow:0 0 16px color-mix(in srgb,var(--milestone-choice-accent,#c285f3) 14%,transparent); }
.milestone-choice-target-label { display:grid; gap:7px; margin:15px 0; color:var(--milestone-choice-accent,#c285f3); font-size:9px; font-weight:900; letter-spacing:.1em; }
.milestone-choice-target-label select { width:100%; min-height:43px; padding:0 11px; border:1px solid rgba(177,201,210,.2); border-radius:8px; outline:none; background:#111b25; color:#f1f5f7; font:700 13px inherit; }
.milestone-choice-claim { width:100%; min-height:45px; border:1px solid color-mix(in srgb,var(--milestone-choice-accent,#c285f3) 75%,white); border-radius:9px; background:color-mix(in srgb,var(--milestone-choice-accent,#c285f3) 24%,#111a24); color:#fff; font-size:11px; font-weight:950; letter-spacing:.04em; cursor:pointer; }
.milestone-choice-claim:hover { filter:brightness(1.15); }
.mission-crate-choice { border-color:rgba(121,195,224,.52); background:radial-gradient(ellipse at 50% 18%,rgba(90,178,208,.17),transparent 64%),linear-gradient(145deg,rgba(27,38,47,.92),rgba(9,16,24,.96)); }
.mission-crate-choice .mission-crate-art { width:88px; height:61px; }
.mission-crate-choice > b { color:#c4e7f4; }
.mission-crate-choice > button { border-color:rgba(121,195,224,.62); background:rgba(39,103,128,.28); color:#dcf4fb; }
@media (max-width:420px) { .milestone-choice-sheet { padding:20px 15px 15px; } .milestone-choice-sheet h2 { font-size:19px; } }

.update-game-button { display:flex; width:42px; min-width:42px; height:47px; flex:0 0 auto; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:3px; border:1px solid rgba(108,204,181,.3); border-radius:9px; background:rgba(37,93,79,.2); color:#b4ebd5; cursor:pointer; }
.update-game-button > span { font-size:21px; line-height:1; }
.update-game-button > small { font-size:5px; font-weight:900; letter-spacing:.04em; }
.update-game-button:hover { border-color:rgba(108,204,181,.65); background:rgba(37,93,79,.36); }
.update-game-button:disabled { opacity:.6; cursor:wait; }
@container (max-width:620px) { .top-resources { grid-template-columns:repeat(3,minmax(0,1fr)) 38px 38px; gap:5px; } .update-game-button,.bag-jump-button { width:38px; min-width:38px; height:47px; } }
@container (max-width:390px) { .top-resources { gap:3px; grid-template-columns:repeat(3,minmax(0,1fr)) 35px 35px; } .update-game-button,.bag-jump-button { width:35px; min-width:35px; } .update-game-button > small { font-size:4.5px; } }

/* Overflow menu for rewards and help */
.utility-menu-wrap { position:relative; flex:0 0 auto; }
.utility-menu-button { display:grid; place-items:center; width:31px; height:31px; padding:0; border:1px solid rgba(177,202,220,.2); border-radius:7px; background:rgba(20,30,41,.88); color:#d5e2e5; cursor:pointer; }
.utility-menu-button > svg { display:block; width:18px; height:18px; }
.utility-menu-button:hover,.utility-menu-button[aria-expanded="true"] { border-color:rgba(92,214,209,.55); color:var(--cyan); background:rgba(35,70,78,.48); }
.utility-menu-panel { position:absolute; top:calc(100% + 8px); right:0; z-index:40; width:min(230px,calc(100vw - 28px)); padding:6px; border:1px solid rgba(111,151,165,.35); border-radius:11px; background:rgba(12,19,28,.98); box-shadow:0 16px 35px rgba(0,0,0,.48); backdrop-filter:blur(14px); }
.utility-menu-panel[hidden] { display:none; }
.utility-menu-panel button { display:block; width:100%; padding:10px 11px; border:0; border-radius:7px; background:transparent; color:#d8e4e8; text-align:left; font-size:12px; font-weight:700; cursor:pointer; }
.utility-menu-panel button:hover,.utility-menu-panel button:focus-visible { outline:none; background:rgba(92,214,209,.12); color:#aaf2eb; }
.utility-menu-divider { display:block; height:1px; margin:4px 7px; background:rgba(150,180,190,.18); }
.support-dialog-overlay { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:18px; background:rgba(3,7,12,.78); backdrop-filter:blur(7px); }
.support-dialog-overlay.is-hidden { display:none; }
.support-dialog-card { position:relative; width:min(100%,360px); padding:22px; border:1px solid rgba(92,214,209,.32); border-radius:15px; background:linear-gradient(145deg,#172430,#0b1119); box-shadow:0 22px 60px rgba(0,0,0,.55); }
.support-dialog-card h2 { margin:4px 0 10px; color:#edf5f7; font-size:22px; }
.support-dialog-card > p:not(.eyebrow) { margin:0; color:#b7c7cd; font-size:13px; line-height:1.55; }
.support-dialog-close { position:absolute; top:9px; right:10px; width:30px; height:30px; border:0; border-radius:7px; background:rgba(255,255,255,.06); color:#d7e5e8; font-size:22px; cursor:pointer; }
.support-dialog-action { margin-top:18px; padding:9px 14px; border:1px solid rgba(92,214,209,.35); border-radius:7px; background:rgba(92,214,209,.12); color:#b7f4eb; font-size:10px; font-weight:900; letter-spacing:.08em; cursor:pointer; }
@container (max-width:620px) { .top-resources { grid-template-columns:repeat(3,minmax(0,1fr)) 38px 38px 38px; } .utility-menu-button { width:38px; height:47px; border-radius:9px; } .utility-menu-button > svg { width:20px; height:20px; } }
@container (max-width:390px) { .top-resources { grid-template-columns:repeat(3,minmax(0,1fr)) 35px 35px 35px; } .utility-menu-button { width:35px; } }

.settings-toggle-row { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:12px; padding:12px; border:1px solid rgba(125,150,164,.22); border-radius:9px; background:rgba(11,19,27,.62); color:#e6f0f2; cursor:pointer; }
.settings-toggle-row span { display:grid; gap:4px; }
.settings-toggle-row b { font-size:12px; }
.settings-toggle-row small,.utility-panel-intro { color:#9fb2ba; font-size:11px; line-height:1.45; }
.settings-toggle-row input { width:20px; height:20px; accent-color:#5cd6d1; flex:0 0 auto; }
.settings-toggle-row select { min-width:148px; max-width:54%; min-height:38px; padding:0 10px; border:1px solid rgba(125,150,164,.38); border-radius:8px; background:#111a24; color:#e6f0f2; font:inherit; }
.utility-panel-intro { margin:4px 0 10px; }
.utility-panel-intro b { color:#e3f5f4; }
.achievement-list,.news-list { display:grid; gap:7px; max-height:min(54vh,440px); overflow:auto; }
.achievement-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 10px; border:1px solid rgba(125,150,164,.18); border-radius:8px; background:rgba(11,19,27,.6); }
.achievement-row.is-complete { border-color:rgba(108,204,181,.35); background:rgba(37,93,79,.15); }
.achievement-row span { display:grid; gap:3px; }
.achievement-row b,.news-list article>b { color:#e2eef0; font-size:11px; }
.achievement-row small,.news-list article>small { color:#86bfc1; font-size:8px; font-weight:900; letter-spacing:.1em; }
.achievement-row strong { color:#70848d; font-size:11px; font-variant-numeric:tabular-nums; }
.achievement-row.is-complete strong { color:#8ce6c0; }
.news-list article { display:grid; gap:5px; padding:10px; border:1px solid rgba(125,150,164,.18); border-radius:8px; background:rgba(11,19,27,.6); }
.news-list article p,.support-dialog-copy { margin:0; color:#a9bac0; font-size:10px; line-height:1.45; }
html.motion-reduced *,html.motion-reduced *::before,html.motion-reduced *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }

/* Achievements are presented as a small field chronicle rather than a modal list. */
.support-dialog-card.achievement-book-open { width:min(920px,100%); max-height:94dvh; overflow:auto; padding:25px 25px 20px; border-color:rgba(182,153,99,.42); background:radial-gradient(ellipse at 50% 0,rgba(174,139,78,.14),transparent 58%),linear-gradient(145deg,#17211f,#0b1112); }
.achievement-book { color:#e8e4d8; }
.achievement-book-toolbar,.achievement-book-controls,.achievement-book-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.achievement-book-toolbar { margin:0 32px 15px 0; }
.achievement-book-toolbar>div:first-child { display:grid; gap:3px; }
.achievement-book-toolbar small { color:#b8a171; font-size:9px; font-weight:950; letter-spacing:.17em; }
.achievement-book-toolbar b { color:#f1ebd9; font-size:13px; }
.achievement-book-controls { color:#d8cba9; }
.achievement-book-controls>span { font-size:9px; font-weight:950; letter-spacing:.1em; white-space:nowrap; }
.achievement-book-controls button { display:grid; place-items:center; width:32px; height:32px; border:1px solid rgba(206,180,125,.28); border-radius:7px; background:rgba(196,163,97,.1); color:#f3dda9; font-size:25px; line-height:1; cursor:pointer; }
.achievement-book-controls button:hover:not(:disabled) { background:rgba(196,163,97,.23); border-color:rgba(228,196,128,.62); }
.achievement-book-controls button:disabled { opacity:.32; cursor:default; }
.achievement-book-cover { position:relative; padding:13px 15px; border:1px solid #8f7142; border-radius:12px 15px 15px 12px; background:linear-gradient(110deg,#3d3022 0,#6b5130 2.4%,#2d241a 3%,#26251e 4%,#25231d 50%,#1d211d 51%,#25231d 96%,#67502f 97%,#382c20 100%); box-shadow:0 16px 35px rgba(0,0,0,.43),inset 0 1px rgba(255,239,196,.15),inset 0 -2px rgba(0,0,0,.38); }
.achievement-book-cover::before,.achievement-book-cover::after { position:absolute; z-index:0; right:7px; left:7px; height:4px; border:1px solid rgba(203,174,119,.24); border-radius:4px; content:""; pointer-events:none; }
.achievement-book-cover::before { top:5px; }
.achievement-book-cover::after { bottom:5px; }
.achievement-book-spread { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:350px; overflow:hidden; border:1px solid rgba(107,78,42,.8); border-radius:5px; background:#d2c39e; box-shadow:inset 0 0 18px rgba(77,53,27,.19); }
.achievement-book-page { position:relative; min-width:0; padding:20px 24px 27px; color:#34352d; background:linear-gradient(90deg,#c9b78d 0,#e4d8b9 5%,#e8ddc2 94%,#c9b78e 100%); }
.achievement-book-page+ .achievement-book-page { border-left:1px solid rgba(80,58,31,.3); background:linear-gradient(90deg,#c6b58d 0,#e8ddc2 6%,#e4d8b9 95%,#c4b28a 100%); }
.achievement-book-page:first-child { box-shadow:inset -10px 0 15px -17px #332618; }
.achievement-book-page:nth-child(2) { box-shadow:inset 10px 0 15px -17px #332618; }
.book-page-corner { position:absolute; top:13px; right:17px; color:#a88b55; font-size:17px; }
.book-chapter-label { margin:0 22px 6px 0; color:#8b7142; font-size:8px; font-weight:950; letter-spacing:.17em; }
.achievement-book-page h3 { margin:0 20px 6px 0; color:#34372f; font-family:Georgia,'Times New Roman',serif; font-size:19px; line-height:1.16; }
.book-page-note { min-height:30px; margin:0 0 12px; color:#66634f; font-size:10px; line-height:1.4; }
.book-current-progress { display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 8px; margin:0 0 12px; padding:8px 10px; border:1px solid rgba(107,83,43,.2); border-radius:5px; background:rgba(255,250,229,.34); }
.book-current-progress>span { color:#3e503c; font-family:Georgia,'Times New Roman',serif; font-size:17px; font-weight:800; }
.book-current-progress>span small { color:#70674e; font:700 9px inherit; }
.book-current-progress>b { color:#887042; font-size:7px; font-weight:950; letter-spacing:.07em; text-align:right; }
.book-current-progress>i { grid-column:1/-1; height:4px; overflow:hidden; border-radius:4px; background:rgba(79,69,48,.18); }
.book-current-progress>i em { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#6c8b65,#b99a5d); transition:width .25s ease; }
.achievement-book-entries { display:grid; gap:5px; }
.achievement-book-entry { display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:7px; min-height:38px; padding:5px 7px; border-bottom:1px solid rgba(91,74,46,.17); color:#66614f; }
.achievement-book-entry.is-next { border-radius:4px; background:rgba(255,249,225,.38); }
.achievement-book-entry.is-reached { color:#3d5e48; }
.achievement-book-seal { display:grid; place-items:center; width:21px; height:21px; border:1px solid rgba(131,105,61,.36); border-radius:50%; color:#8c7548; font-size:8px; font-weight:900; }
.achievement-book-entry.is-reached .achievement-book-seal { border-color:#82956c; background:rgba(106,140,95,.16); color:#557449; font-size:12px; }
.achievement-book-entry-copy { display:grid; gap:2px; min-width:0; }
.achievement-book-entry-copy b { overflow:hidden; color:inherit; font-family:Georgia,'Times New Roman',serif; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.achievement-book-entry-copy small { color:#918261; font-size:7px; font-weight:950; letter-spacing:.1em; }
.achievement-book-entry>strong { color:#77705c; font-size:8px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.achievement-book-entry.is-reached>strong { color:#557449; font-size:13px; }
.book-folio { position:absolute; bottom:9px; left:50%; color:#8d7956; font-family:Georgia,'Times New Roman',serif; font-size:9px; transform:translateX(-50%); }
.book-end-page { display:grid; align-content:center; justify-items:center; gap:10px; color:#8f7b51; font-family:Georgia,'Times New Roman',serif; }
.book-end-page>span { font-size:28px; }
.book-end-page>b { font-size:11px; letter-spacing:.16em; }
.achievement-book-footer { margin:10px 3px 0; color:#8c9b91; font-size:7px; font-weight:900; letter-spacing:.1em; }
.achievement-book-spread.turn-forward { animation:bookTurnForward .28s ease-out; }
.achievement-book-spread.turn-back { animation:bookTurnBack .28s ease-out; }
@keyframes bookTurnForward { from { opacity:.65; transform:perspective(900px) rotateY(-3deg) translateX(7px); } to { opacity:1; transform:perspective(900px) rotateY(0) translateX(0); } }
@keyframes bookTurnBack { from { opacity:.65; transform:perspective(900px) rotateY(3deg) translateX(-7px); } to { opacity:1; transform:perspective(900px) rotateY(0) translateX(0); } }
@media (max-width:650px) {
  .support-dialog-card.achievement-book-open { width:min(520px,100%); padding:21px 14px 16px; }
  .achievement-book-toolbar { margin-right:29px; }
  .achievement-book-toolbar b { font-size:11px; }
  .achievement-book-cover { padding:10px; }
  .achievement-book-spread { display:block; min-height:390px; }
  .achievement-book-page { display:none; min-height:390px; padding:20px 17px 29px; }
  .achievement-book[data-mobile-page="left"] .achievement-book-page:first-child,.achievement-book[data-mobile-page="right"] .achievement-book-page:nth-child(2) { display:block; }
  .achievement-book-page+.achievement-book-page { border-left:0; }
  .achievement-book-page h3 { font-size:20px; }
  .book-page-note { font-size:11px; }
  .achievement-book-entry { min-height:43px; }
  .achievement-book-entry-copy b { font-size:12px; }
  .achievement-book-entry-copy small { font-size:8px; }
  .achievement-book-entry>strong { font-size:9px; }
  .achievement-book-footer { font-size:6px; }
}
@media (prefers-reduced-motion:reduce) { .achievement-book-spread.turn-forward,.achievement-book-spread.turn-back { animation:none; } }

.rewards-view-heading { margin-bottom:12px; }
.rewards-view { padding-bottom:24px; }

/* Startup screen stays visible until the game has rendered its first frame. */
.boot-splash{position:fixed;inset:0;z-index:1000000;display:flex;flex-direction:column;align-items:center;overflow:hidden;background:#070c13 url('./assets/loading-arena.png') center/cover no-repeat;color:#f1f6fa;opacity:1;visibility:visible;transition:opacity .42s ease,visibility .42s ease}
.boot-splash__veil{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 8%,#07101b55 58%,#050a12c7 100%),linear-gradient(180deg,#050a1285,transparent 24%,transparent 75%,#050a12c7);pointer-events:none}
.boot-splash__brand,.boot-splash__eyebrow,.boot-splash__title,.boot-splash__subtitle,.boot-splash__loader,.boot-splash__status,.boot-splash__track{position:relative;z-index:2}
.boot-splash__brand{display:flex;align-items:center;gap:10px;margin-top:clamp(28px,7vh,64px);color:#c1d1dc;font:800 11px/1 'DM Sans',sans-serif;letter-spacing:.3em}
.boot-splash__sigil{display:grid;width:30px;height:30px;place-items:center;border:1px solid #6ce0d98a;border-radius:9px;color:#8af7ed;box-shadow:0 0 18px #41d6cc30}
.boot-splash__eyebrow{margin:clamp(20px,4vh,40px) 0 7px;color:#78ebe3;font:800 10px/1 'DM Sans',sans-serif;letter-spacing:.3em}
.boot-splash__title{margin:0;text-align:center;font:900 clamp(25px,5vw,40px)/1.08 'DM Sans',sans-serif;letter-spacing:.09em;text-shadow:0 3px 20px #03060c}
.boot-splash__subtitle{margin:9px 0 0;color:#ccdae4;font:500 12px/1.4 'DM Sans',sans-serif;text-shadow:0 2px 8px #03060c}
.boot-splash__loader{position:absolute;top:50%;left:50%;display:grid;width:clamp(160px,25vw,220px);aspect-ratio:1;place-items:center;border:1px solid #73eee65c;border-radius:50%;background:#07131e50;box-shadow:0 0 35px #3be4dd20,inset 0 0 28px #4ce6df12;transform:translate(-50%,-50%)}
.boot-splash__loader:before,.boot-splash__loader:after{position:absolute;inset:7px;border:1px solid #61e7df39;border-radius:50%;content:''}.boot-splash__loader:after{inset:13px;border-color:#75f1e72b}
.boot-splash__arc{position:absolute;inset:-2px;border:2px solid transparent;border-top-color:#8afff0;border-right-color:#48d9d9;border-radius:50%;filter:drop-shadow(0 0 7px #50f5e9);animation:boot-ring 1.8s linear infinite}
.boot-splash__core{width:25px;height:25px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#e0ffff,#76fff1 31%,#16a9b9 74%);box-shadow:0 0 14px #65fff5,0 0 38px #48dff0;animation:boot-pulse 1.5s ease-in-out infinite}
.boot-splash__status{position:absolute;top:calc(50% + clamp(94px,13vw,125px));color:#e4edf5;font:700 12px/1.4 'DM Sans',sans-serif;text-shadow:0 2px 10px #03060c}
.boot-splash__track{position:absolute;top:calc(50% + clamp(124px,16vw,157px));width:min(300px,64vw);height:4px;overflow:hidden;border-radius:99px;background:#d9eef32b}.boot-splash__track span{display:block;width:34%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#50d9d1,#a3fff2);box-shadow:0 0 12px #56f7e8;animation:boot-progress 1.25s ease-in-out infinite alternate}
.boot-splash__laser{position:absolute;z-index:1;left:-45%;top:var(--from-y);width:clamp(70px,10vw,125px);height:2px;opacity:0;transform:rotate(var(--angle));transform-origin:left center;background:linear-gradient(90deg,transparent,var(--beam) 72%,#fff 94%,transparent);filter:drop-shadow(0 0 5px var(--beam)) drop-shadow(0 0 14px var(--beam));animation:boot-shot var(--duration) linear infinite;animation-delay:var(--delay);pointer-events:none}
.boot-splash__laser--one{--from-y:82%;--dy:-40vw;--angle:-14deg;--beam:#69edff;--duration:.72s;--delay:.2s}.boot-splash__laser--two{--from-y:20%;--dy:23vw;--angle:8deg;--beam:#ba6dff;--duration:.82s;--delay:1.1s}.boot-splash__laser--three{--from-y:77%;--dy:-20vw;--angle:-7deg;--beam:#57dcff;--duration:.68s;--delay:1.9s}
.boot-splash__laser--four{left:115%;--from-y:84%;--dy:-36vw;--angle:13deg;--beam:#ff9d55;--duration:.78s;--delay:.9s;transform:rotate(193deg);transform-origin:right center;animation-name:boot-shot-reverse}
.boot-splash.is-exiting{opacity:0;visibility:hidden;pointer-events:none}
@keyframes boot-ring{to{transform:rotate(360deg)}}@keyframes boot-pulse{50%{transform:scale(1.3);filter:brightness(1.45)}}@keyframes boot-progress{to{transform:translateX(190%)}}
@keyframes boot-shot{0%{left:-45%;top:var(--from-y);opacity:0}10%{opacity:.9}82%{opacity:.9}100%{left:115%;top:calc(var(--from-y) + var(--dy));opacity:0}}@keyframes boot-shot-reverse{0%{left:115%;top:var(--from-y);opacity:0}10%{opacity:.9}82%{opacity:.9}100%{left:-45%;top:calc(var(--from-y) + var(--dy));opacity:0}}
@media(max-width:600px){.boot-splash__brand{margin-top:28px}.boot-splash__eyebrow{margin-top:32px}.boot-splash__loader{width:clamp(155px,47vw,190px)}.boot-splash__status{top:calc(50% + clamp(94px,27vw,112px))}.boot-splash__track{top:calc(50% + clamp(124px,35vw,145px));width:min(260px,68vw)}.boot-splash__laser{width:30vw}}
@media(prefers-reduced-motion:reduce){.boot-splash__arc,.boot-splash__core,.boot-splash__track span,.boot-splash__laser{animation-duration:4s}.boot-splash__laser{opacity:.25}}
html.motion-reduced .boot-splash__arc,html.motion-reduced .boot-splash__core,html.motion-reduced .boot-splash__track span,html.motion-reduced .boot-splash__laser{animation-duration:4s}
.boot-splash__shard{position:absolute;z-index:1;left:var(--x);top:var(--y);width:var(--size);height:calc(var(--size)*1.45);opacity:.86;background:linear-gradient(145deg,#d5e4ed 0%,#7f9caf 20%,#344a5c 48%,#172434 70%,#91c4d3 100%);clip-path:polygon(35% 0,79% 11%,100% 42%,82% 69%,68% 100%,24% 82%,0 53%,15% 24%);filter:drop-shadow(0 3px 7px #020710cc) drop-shadow(0 0 5px #79dcf066);animation:boot-debris var(--duration) ease-in-out infinite alternate;animation-delay:var(--delay);pointer-events:none}
.boot-splash__shard--one{--x:11%;--y:31%;--size:18px;--duration:5.4s;--delay:-1s}.boot-splash__shard--two{--x:84%;--y:26%;--size:14px;--duration:6.8s;--delay:-2s}.boot-splash__shard--three{--x:18%;--y:68%;--size:17px;--duration:7.2s;--delay:-.6s}.boot-splash__shard--four{--x:88%;--y:69%;--size:21px;--duration:5.9s;--delay:-2.4s}.boot-splash__shard--five{--x:31%;--y:20%;--size:12px;--duration:6.2s;--delay:-1.7s}.boot-splash__shard--six{--x:70%;--y:78%;--size:16px;--duration:7.5s;--delay:-.3s}.boot-splash__shard--seven{--x:53%;--y:18%;--size:11px;--duration:5.2s;--delay:-3.3s}.boot-splash__shard--eight{--x:59%;--y:77%;--size:19px;--duration:6.5s;--delay:-4.2s}
@keyframes boot-debris{0%{transform:translate3d(-9px,-18px,0) rotate(-35deg) scale(.86);opacity:.48}48%{transform:translate3d(13px,6px,0) rotate(49deg) scale(1.08);opacity:.95}100%{transform:translate3d(-5px,24px,0) rotate(145deg) scale(.9);opacity:.68}}