:root { color-scheme: dark; font-family: "Segoe UI", system-ui, sans-serif; background: #05090f; color: #e8f1f8; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button, input, select { min-height: 42px; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
.app { min-height: 100vh; display: grid; }
.desktop { grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: 66px minmax(0, 1fr); }
.desktop > .shell-command-bar { grid-column: 1 / -1; grid-row: 1; }
.desktop > nav { grid-column: 1; grid-row: 2; position: sticky; top: 66px; height: calc(100vh - 66px); flex-direction: column; }
.desktop > main { grid-column: 2; grid-row: 2; }
.app > nav { display: flex; gap: 8px; padding: 22px 16px 16px; background: linear-gradient(180deg, #081522, #050a11); border-right: 1px solid #17445f; z-index: 2; }
.nav-button { padding: 12px 14px; border: 1px solid #254a61; background: #0b1925; color: #bcd5e5; text-align: left; letter-spacing: .04em; }
.nav-button:hover { border-color: #2fcaff; color: #fff; }
.nav-button.active { border-color: #36c8ff; background: linear-gradient(90deg, #10314a, #0a1721); color: #fff; box-shadow: inset 3px 0 #36c8ff, 0 0 18px #008fd433; }
main { min-width: 0; padding: 24px; }
section { max-width: 1280px; margin: 0 auto; }
.panel, .card { border: 1px solid #405266; background: #111b26; padding: 16px; }
.grid, .card-grid, .season-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.resource-list { list-style: none; display: flex; gap: 24px; flex-wrap: wrap; }
.resource-list li { display: grid; gap: 4px; }
.identity { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.avatar-placeholder { width: 72px; height: 72px; border-radius: 50%; background: #27394a; }
.progress { height: 10px; background: #263849; overflow: hidden; }
.progress span { display: block; height: 100%; background: #36c8ff; }
.badge { display: inline-block; min-width: 24px; padding: 3px 7px; border-radius: 999px; background: #36c8ff; color: #041018; text-align: center; }
.filters { display: grid; gap: 12px; margin-bottom: 12px; }
.filters label { display: grid; gap: 5px; }
.filters fieldset { display: flex; flex-wrap: wrap; gap: 10px; }
.filters fieldset label { display: flex; align-items: center; }
.card.locked { opacity: .65; }
.card-art-placeholder { aspect-ratio: 4 / 5; display: grid; place-items: center; background: #1b2937; color: #91a4b7; text-align: center; padding: 12px; }
.contract { padding-block: 14px; border-top: 1px solid #304253; }
.error { color: #ff8e9b; }
.shell-command-bar { min-width: 0; height: 66px; padding: 8px 14px; display: grid; grid-template-columns: minmax(250px, .8fr) minmax(390px, 1.4fr) minmax(245px, .8fr); align-items: center; gap: 18px; position: sticky; top: 0; z-index: 10; border-bottom: 1px solid #2b7898; background: linear-gradient(180deg, #091824f5, #040b12f5); box-shadow: 0 8px 24px #0008; backdrop-filter: blur(2px); }
.shell-brand { min-height: 48px; padding: 0; display: flex; align-items: center; gap: 12px; border: 0; background: transparent; color: #dff7ff; letter-spacing: .17em; text-align: left; white-space: nowrap; }
.shell-brand b { color: #4bd5ff; }
.shell-brand-mark, .shell-avatar { display: grid; place-items: center; border: 1px solid #4ed5ff; background: #0a293b; color: #a2e8ff; font-weight: 900; font-style: italic; box-shadow: 0 0 16px #00b7ff44; }
.shell-brand-mark { width: 48px; height: 40px; font-size: 20px; transform: skew(-8deg); }
.shell-wallet { min-width: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; }
.shell-wallet li { min-width: 0; min-height: 40px; padding: 3px 14px; display: grid; align-content: center; gap: 1px; border-left: 1px solid #1e4d63; }
.shell-wallet li:last-child { border-right: 1px solid #1e4d63; }
.shell-wallet span { overflow: hidden; color: #7895a6; font-size: 9px; letter-spacing: .07em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.shell-wallet strong { color: #e5f9ff; font-size: 16px; }
.shell-account { min-width: 0; display: flex; justify-content: flex-end; align-items: center; gap: 9px; }
.shell-identity { min-width: 0; min-height: 46px; padding: 3px 8px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 1px solid #234b60; background: #07131ddd; color: #d9f3ff; text-align: left; }
.shell-identity > span:nth-child(2) { min-width: 0; display: grid; }
.shell-identity strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.shell-identity small { color: #54d7ff; font-size: 8px; }
.shell-identity em { color: #8faab9; font-size: 9px; font-style: normal; white-space: nowrap; }
.shell-avatar { width: 34px; height: 34px; border-radius: 50%; font-size: 11px; }
.shell-settings { position: relative; }
.shell-settings summary { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #2f6077; background: #081721; color: #c7eaf8; cursor: pointer; font-size: 19px; list-style: none; }
.shell-settings summary::-webkit-details-marker { display: none; }
.shell-settings[open] summary { border-color: #4ed5ff; color: #fff; }
.shell-settings > div { width: 170px; padding: 12px; position: absolute; top: 50px; right: 0; border: 1px solid #2a657f; background: #06111cf7; box-shadow: 0 14px 30px #000b; }
.shell-settings label { display: grid; gap: 6px; color: #87a5b5; font-size: 10px; text-transform: uppercase; }
.shell-settings select { width: 100%; border: 1px solid #34718f; background: #081723; color: #e8f8ff; padding: 8px 10px; }
.shell-settings-button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #2f6077; background: #081721; color: #c7eaf8; cursor: pointer; font-size: 19px; }
.shell-settings-button:hover, .shell-settings-button:focus-visible { border-color: #4ed5ff; color: #fff; }

/* Functional product map. Deliberately light: one static surface per route, no continuous effects. */
.app[data-route="CITY_HUB"], .app[data-route="CITY_SCHEME"], .app[data-route="BATTLE_HUB"], .app[data-route="MATCH_QUEUE"], .app[data-route="RATING"], .app[data-route="TRAINING"], .app[data-route="GOALS"], .app[data-route="PVE_MAP"], .app[data-route="PVE_BRIEFING"], .app[data-route="CONTAINERS"], .app[data-route="STORE"], .app[data-route="ORGANIZATION"] { background: radial-gradient(circle at 70% 15%, #12324b 0, #07121d 36%, #03070c 78%); }
.structure-screen { max-width: 1380px; min-height: calc(100vh - 114px); padding: 18px 6px 54px; }
.structure-heading { max-width: 800px; padding: 18px 0 25px; border-bottom: 1px solid #286783; }
.structure-heading p { margin: 0 0 8px; color: #55d9ff; font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.structure-heading h1 { margin: 0; font-size: clamp(34px, 5vw, 66px); line-height: .95; letter-spacing: .035em; text-transform: uppercase; }
.structure-heading span { display: block; margin-top: 14px; color: #89a4b5; font-size: 15px; }
.structure-context { min-height: 64px; margin-top: 18px; padding: 10px 12px 10px 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid #285f79; background: #081722e8; }
.structure-context > div { min-width: 0; display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 12px; }
.structure-context small { grid-column: 1 / -1; color: #65dfff; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.structure-context strong { overflow: hidden; color: #edfaff; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.structure-context span { color: #8fa8b7; font-size: 12px; }
.structure-context-action { min-height: 38px; padding: 7px 18px; border: 1px solid #347f9f; background: #0a2433; color: #d9f7ff; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.structure-grid { display: grid; grid-template-columns: repeat(4, minmax(190px, 1fr)); gap: 14px; margin-top: 22px; }
.structure-tile { min-height: 220px; padding: 18px; display: grid; grid-template-rows: auto 1fr auto; border: 1px solid #285f79; background: linear-gradient(145deg, #0d2130f2, #071019f5); }
.structure-tile header { display: flex; justify-content: space-between; gap: 12px; color: #65dfff; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.structure-tile header strong { color: #e8f8ff; font-size: 14px; }
.structure-tile h2 { margin: 26px 0 8px; font-size: 21px; text-transform: uppercase; }
.structure-tile p { margin: 0; color: #8ba5b5; line-height: 1.45; }
.structure-action { min-height: 40px; margin-top: 22px; padding: 8px 12px; border: 1px solid #3b91b6; background: #0a2839; color: #d9f7ff; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.structure-action:hover { border-color: #64dcff; background: #10405a; }
.structure-placeholder { max-width: 760px; min-height: 330px; margin-top: 24px; padding: 34px; display: grid; align-content: center; justify-items: start; border: 1px solid #2d6984; background: #08141ee8; }
.structure-placeholder > span { color: #55d9ff; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.structure-placeholder h2 { margin: 18px 0 8px; font-size: clamp(30px, 4vw, 52px); text-transform: uppercase; }
.structure-placeholder p { max-width: 620px; margin: 0; color: #91aab9; font-size: 15px; line-height: 1.55; }
.city-district-map { margin-top: 18px; padding: 16px; border: 1px solid #285f79; background: #07141ddf; }
.city-district-map > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; }
.city-district-map h2 { margin: 0; color: #dff8ff; font-size: 18px; }
.city-district-map p { margin: 0; color: #8ba5b5; font-size: 12px; }
.city-district-surface { position: relative; margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.city-district { position: absolute; width: clamp(145px, 16vw, 210px); padding: 10px; transform: translate(-50%, -50%); display: grid; gap: 3px; border: 1px solid #3b91b6; background: #07131cf2; }
.city-district strong { color: #e8f8ff; font-size: 13px; }
.city-district span { color: #65dfff; font-size: 10px; }
.city-district small { color: #9db4c1; font-size: 9px; }
.city-district-action { margin-top: 5px; min-height: 30px; border: 1px solid #347f9f; background: #0a2839; color: #d9f7ff; font-size: 9px; }
.city-district-surface .city-district { position: relative; width: auto; min-width: 0; padding: 16px; transform: none; border: 0; background: linear-gradient(135deg, #0b2230f5, #040e18f5); clip-path: polygon(4.17% 0, 93.33% 0, 100% 16.67%, 100% 83.33%, 93.33% 100%, 4.17% 100%, 0 89.58%, 0 10.42%); }
.city-district-surface .city-district > :not(svg) { position: relative; z-index: 1; }
.city-district-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: none; }
.city-district-frame path { vector-effect: non-scaling-stroke; }
.city-district-frame .district-edge { stroke: #86b9c8; stroke-width: 1; }
.city-district-frame .district-inner { stroke: #2b788b; stroke-width: .8; }
.city-district-frame .district-light { stroke: #91efff; stroke-width: 1.5; filter: drop-shadow(0 0 3px #29cfff80); }
.city-district .city-district-status[data-tone="active"] { color: #82e4ff; }
.city-district .city-district-status[data-tone="success"] { color: #a5f3e5; }
.city-district .city-district-status[data-tone="failure"] { color: #ff9d9d; }
.city-district .city-district-status[data-tone="idle"] { color: #adc5d3; }
@media (max-width: 600px) { .city-district-surface { grid-template-columns: 1fr; } .city-district-surface .city-district span, .city-district-surface .city-district small { font-size: 12px; line-height: 1.35; } }
.queue-screen { max-width: 920px; min-height: calc(100vh - 120px); padding: 32px 8px 60px; }
.queue-screen > header p { margin: 0 0 7px; color: #5edfff; font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.queue-screen > header h1 { margin: 0; font-size: clamp(36px, 5vw, 64px); text-transform: uppercase; }
.queue-deck { margin-top: 22px; padding: 12px 16px; display: grid; grid-template-columns: 1fr auto; border: 1px solid #285f79; background: #081722e8; }
.queue-deck small { grid-column: 1 / -1; color: #65dfff; font-size: 9px; letter-spacing: .12em; }
.queue-deck span { color: #9db4c1; }
.queue-status { min-height: 260px; margin-top: 14px; padding: 34px; display: grid; align-content: center; justify-items: center; border: 1px solid #2e7697; background: linear-gradient(145deg, #0c2231, #060e16); text-align: center; }
.queue-status > span { color: #5edfff; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.queue-status h2 { margin: 16px 0 8px; font-size: clamp(25px, 4vw, 42px); text-transform: uppercase; }
.queue-status p { margin: 0; color: #91aab9; }
.queue-status > strong { margin-top: 18px; font-size: 22px; }
.queue-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.queue-secondary, .queue-fallback, .queue-back { min-height: 40px; padding: 8px 14px; border: 1px solid #315e73; background: #07131d; color: #b9d4e1; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.queue-fallback { border-color: #3d98bc; color: #dff8ff; }
.queue-back { margin-left: auto; }

@media (max-width: 1180px) {
  .structure-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}

@media (max-width: 767px) {
  .structure-screen { padding: 8px 0 86px; }
  .structure-grid { grid-template-columns: 1fr; }
  .structure-tile { min-height: 190px; }
  .city-district-surface { height: auto; display: grid; grid-template-columns: 1fr; gap: 12px; padding: 0; }
  .city-district { position: static; width: auto; transform: none; }
}

/* Collection geometry master. Artwork remains deliberately replaceable. */
.app[data-route="COLLECTION"] { background: linear-gradient(180deg, #02070b80, #02070bc4), url("/app/client/assets/production/collection-deck-hangar-1680x941.png") center / cover fixed no-repeat; }
.app[data-route="COLLECTION"] > nav { background: linear-gradient(180deg, #071521ee, #03080ef5); backdrop-filter: blur(5px); }
.app[data-route="COLLECTION"] main { padding: 0 24px 48px; }
.collection-screen { max-width: 1420px; min-height: 100vh; padding-top: 26px; }
.collection-header { min-height: 108px; display: flex; align-items: end; justify-content: space-between; gap: 24px; border-bottom: 1px solid #24799f; padding: 0 6px 20px; }
.collection-header h1 { margin: 3px 0 0; font-size: clamp(30px, 4vw, 54px); line-height: 1; letter-spacing: .05em; text-transform: uppercase; }
.collection-mode-tabs { display: flex; gap: 7px; margin-top: 13px; }
.collection-mode-tabs button { min-height: 34px; padding: 6px 14px; border: 1px solid #28546a; background: #07131dcc; color: #84a0b0; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.collection-mode-tabs button.active { border-color: #43cfff; background: #0d3044; color: #e5faff; box-shadow: inset 0 -2px #43cfff; }
.collection-eyebrow { margin: 0; color: #57d8ff; font-size: 11px; font-weight: 700; letter-spacing: .18em; }
.collection-counter { min-width: 150px; display: grid; grid-template-columns: auto 1fr; align-items: baseline; justify-items: end; column-gap: 5px; }
.collection-counter strong { color: #77e3ff; font-size: 38px; line-height: 1; }
.collection-counter span { color: #819aaa; font-size: 20px; }
.collection-counter small { grid-column: 1 / -1; color: #6c8798; letter-spacing: .18em; }
.collection-sticky-controls { position: sticky; top: 66px; z-index: 6; padding-top: 1px; background: linear-gradient(180deg, #050d14fa 0%, #050d14f2 78%, #050d1400 100%); backdrop-filter: blur(8px); }
.collection-searchbar { min-height: 78px; margin: 18px 0 14px; padding: 13px 20px; display: grid; grid-template-columns: minmax(280px, 1fr) auto; align-items: end; gap: 24px; }
.collection-searchbar label { display: grid; gap: 5px; color: #7794a6; font-size: 11px; letter-spacing: .06em; }
.collection-searchbar input, .collection-filters select { width: 100%; border: 1px solid #2b718f; background: #06131d; color: #e7f8ff; padding: 9px 12px; outline: none; }
.collection-searchbar input:focus, .collection-filters select:focus { border-color: #58d8ff; box-shadow: 0 0 0 2px #21bdf02d; }
.collection-searchbar p { margin: 0 0 10px; color: #86a5b7; white-space: nowrap; }
.collection-searchbar strong { color: #dff8ff; }
.collection-workspace { display: grid; grid-template-columns: 252px minmax(0, 1fr); align-items: start; gap: 14px; }
.collection-filters { position: sticky; top: 14px; display: grid; gap: 15px; padding: 20px; }
.collection-filter-title { margin: 0; color: #67dfff; font-size: 12px; font-weight: 700; letter-spacing: .13em; }
.collection-filters > label { display: grid; gap: 5px; color: #829ead; font-size: 11px; }
.collection-filters fieldset { margin: 0; padding: 11px 0 0; display: grid; gap: 6px; border: 0; border-top: 1px solid #1b4d66; }
.collection-filters legend { padding: 0 0 5px; color: #829ead; font-size: 11px; }
.collection-filters fieldset label { min-height: 28px; display: flex; align-items: center; gap: 8px; color: #bed1dc; font-size: 12px; }
.collection-filters input[type="checkbox"] { width: 15px; height: 15px; min-height: 0; accent-color: var(--filter-accent, #39cfff); }
.collection-results { min-width: 0; }
.collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.collection-card { min-width: 0; display: grid; align-content: start; overflow: hidden; border: 1px solid color-mix(in srgb, var(--faction-accent, #38caff) 65%, #263949); background: linear-gradient(160deg, #0c2130f5, #061019f7); box-shadow: inset 0 0 24px #02070b, 0 8px 18px #0007; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.collection-card.locked { opacity: .68; filter: saturate(.55); }
.collection-card-frame { position: relative; padding: 9px 9px 0; }
.collection-card .card-art-placeholder { aspect-ratio: 1 / 1.08; padding: 14px; display: grid; align-content: center; gap: 7px; border: 1px solid #24546c; background: radial-gradient(circle, color-mix(in srgb, var(--faction-accent, #38caff) 17%, #102333) 0, #08131d 68%); }
.card-art-mark { color: color-mix(in srgb, var(--faction-accent, #63dcff) 75%, white); font-size: 34px; font-weight: 900; font-style: italic; opacity: .6; }
.card-art-placeholder small { color: #7290a2; font-size: 10px; line-height: 1.25; }
.collection-card-flags { min-height: 25px; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: -13px; padding: 0 7px; position: relative; }
.collection-card-flags > span { padding: 4px 8px; border: 1px solid #345a6c; background: #07131ded; color: #b8ceda; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.collection-card-copy { padding: 8px 5px 10px; }
.collection-card-copy > small { color: var(--faction-accent, #54d8ff); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.collection-card-copy h2 { min-height: 42px; margin: 5px 0 6px; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.collection-card-copy p { margin: 0; color: #8ea8b7; font-size: 11px; }
.collection-card-copy dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0 0; }
.collection-card-copy dl div { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; border-top: 1px solid #1b485f; padding-top: 6px; }
.collection-card-copy dt { color: #7c98a8; font-size: 9px; text-transform: uppercase; }
.collection-card-copy dd { margin: 0; color: #dff8ff; font-weight: 700; }
.collection-lock { position: absolute; inset: 9px 9px auto; padding: 7px; background: #03080cba; color: #bdc8ce; text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.collection-details-button { min-height: 36px; width: 100%; border: 0; border-top: 1px solid #285b73; background: #0b2636; color: #bfefff; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.collection-details-button:hover { background: #12435e; color: white; }
.collection-empty { padding: 28px; text-align: center; }
.collection-empty .collection-details-button { width: auto; padding-inline: 24px; border: 1px solid #35bce9; }
.collection-detail-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; background: #010407d9; backdrop-filter: blur(8px); }
.collection-detail { width: min(720px, 100%); max-height: calc(100vh - 48px); overflow: auto; display: grid; grid-template-columns: minmax(220px, .8fr) minmax(280px, 1.2fr); gap: 24px; padding: 24px; }
.collection-detail-art { min-height: 300px; aspect-ratio: auto; border: 1px solid #2a7797; background: radial-gradient(circle, #10334a, #07111a 70%); }
.collection-detail-copy { min-width: 0; }
.collection-detail-copy h2 { margin: 8px 0; font-size: 30px; overflow-wrap: anywhere; }
.collection-card-id { color: #668495; font-family: ui-monospace, monospace; font-size: 11px; }
.collection-detail-copy dl { display: grid; gap: 4px; margin: 22px 0; }
.collection-detail-copy dl div { display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px solid #1d4c63; padding: 8px 0; }
.collection-detail-copy dt { color: #829eae; }
.collection-detail-copy dd { margin: 0; color: #ddf7ff; font-weight: 700; text-align: right; }
.collection-detail-close { width: 100%; border: 1px solid #38c7f7; background: #0d3044; color: #e4f9ff; padding: 10px 16px; }

/* Vardem faction archive: the primary collection experience. */
.collection-faction-rail { display: flex; gap: 8px; margin: 0 0 12px; padding: 0 0 7px; overflow-x: auto; background: transparent; border: 0; scrollbar-width: thin; }
.faction-node { min-width: 122px; min-height: 68px; padding: 9px 10px; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 7px; border: 1px solid #254b60; background: linear-gradient(145deg, #091721, #061019); color: #8ca4b2; text-align: left; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.faction-node span { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid var(--faction-accent, #3a718b); color: var(--faction-accent, #86a8ba); font-size: 10px; box-shadow: 0 0 12px color-mix(in srgb, var(--faction-accent, #36c8ff) 30%, transparent); }
.faction-node strong { font-size: 10px; line-height: 1.2; text-transform: uppercase; letter-spacing: .04em; }
.faction-node:hover, .faction-node.active { border-color: var(--faction-accent, #46d1ff); color: #effbff; background: linear-gradient(145deg, color-mix(in srgb, var(--faction-accent, #36c8ff) 20%, #0b1b27), #071019); box-shadow: inset 0 -2px var(--faction-accent, #36c8ff), 0 0 18px color-mix(in srgb, var(--faction-accent, #36c8ff) 18%, transparent); }
.collection-filter-drawer { margin: 0 0 12px; padding: 0; }
.collection-filter-drawer summary { padding: 10px 16px; color: #77aabd; cursor: pointer; font-size: 10px; letter-spacing: .12em; list-style-position: inside; }
.collection-filter-drawer[open] summary { border-bottom: 1px solid #20536b; color: #8be6ff; }
.collection-filter-drawer-grid { padding: 14px 16px; display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)) minmax(260px, 1.4fr); gap: 12px; }
.collection-filter-drawer-grid > label { display: grid; gap: 5px; color: #829ead; font-size: 11px; }
.collection-filter-drawer select { width: 100%; border: 1px solid #2b718f; background: #06131d; color: #e7f8ff; padding: 9px 12px; outline: none; }
.collection-filter-drawer fieldset { margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; border: 0; }
.collection-filter-drawer legend { color: #829ead; font-size: 11px; }
.collection-filter-drawer fieldset label { display: flex; align-items: center; gap: 4px; color: #bdd1dc; font-size: 10px; }
.collection-filter-drawer input[type="checkbox"] { min-height: 0; accent-color: #36c8ff; }
.archive-stage { display: grid; grid-template-columns: minmax(350px, .78fr) minmax(500px, 1.22fr); align-items: start; gap: 18px; }
.archive-featured { width: min(100%, 390px); aspect-ratio: 3 / 4; justify-self: center; min-height: 0; padding: 18px; display: grid; grid-template-rows: 48% 72px 44px 36px 36px minmax(28px, 1fr); gap: 5px; position: sticky; top: 260px; overflow: hidden; border: 2px solid var(--faction-accent, #279ed0); background: linear-gradient(160deg, color-mix(in srgb, var(--faction-accent, #36c8ff) 13%, #0b1e2b), #050b11 65%); box-shadow: inset 0 0 0 5px #02080d, inset 0 0 0 7px color-mix(in srgb, var(--faction-accent, #36c8ff) 45%, #162c38), 0 0 30px color-mix(in srgb, var(--faction-accent, #36c8ff) 18%, transparent); clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px); }
.archive-featured::before { content: ""; position: absolute; inset: 8px; border: 1px solid color-mix(in srgb, var(--faction-accent, #36c8ff) 64%, #fff); clip-path: inherit; pointer-events: none; }
.archive-featured-art { min-height: 0; aspect-ratio: auto; position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--faction-accent, #36c8ff) 70%, #24546c); background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--faction-accent, #36c8ff) 28%, #153247), #07111a 72%); }
.archive-featured-art::before { content: ""; position: absolute; inset: 8px; border: 1px solid color-mix(in srgb, var(--faction-accent, #36c8ff) 38%, transparent); clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.archive-scanline { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 5px, #7fe5ff08 6px); }
.archive-card-badge, .archive-card-level { position: absolute; z-index: 3; top: 27px; min-width: 38px; min-height: 32px; display: grid; place-items: center; border: 1px solid var(--faction-accent, #3ebde8); background: #06111de8; color: #dff9ff; font-weight: 800; box-shadow: 0 0 14px color-mix(in srgb, var(--faction-accent, #36c8ff) 28%, transparent); }
.archive-card-badge { left: 27px; }
.archive-card-level { right: 27px; padding: 3px 7px; font-size: 13px; }
.archive-card-level span { color: #6f94a7; font-size: 7px; text-transform: uppercase; }
.archive-featured-name { min-width: 0; padding: 6px 10px; border: 1px solid #2c566a; background: linear-gradient(90deg, #081522, color-mix(in srgb, var(--faction-accent, #36c8ff) 14%, #081522)); text-align: center; }
.archive-featured-name p { margin: 0; color: var(--faction-accent, #70dcff); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.archive-featured-name h2 { margin: 2px 0 0; font-size: clamp(16px, 1.8vw, 23px); line-height: 1; overflow-wrap: anywhere; }
.archive-featured-name span { color: #5e7b8b; font-family: ui-monospace, monospace; font-size: 8px; }
.archive-featured-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.archive-featured-stats div { padding: 5px 10px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #31566a; background: #07121b; }
.archive-featured-stats small, .archive-featured-effect small { color: #7291a2; font-size: 8px; letter-spacing: .08em; }
.archive-featured-stats strong { color: #e8fbff; font-size: 22px; }
.archive-featured-effect { min-height: 34px; padding: 5px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid #284f63; background: #07131d; }
.archive-featured-effect strong { color: var(--faction-accent, #a2eaff); font-size: 10px; letter-spacing: .04em; text-align: right; }
.archive-featured-description { padding: 2px 9px 0; overflow: hidden; color: #8299a6; font-size: 8px; line-height: 1.2; text-align: center; }
.archive-index { min-width: 0; min-height: 550px; padding: 16px; border: 1px solid #244f65; background: linear-gradient(150deg, #091a27e8, #050d14ed); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.archive-index > header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid #235168; margin-bottom: 12px; padding: 0 2px 12px; }
.archive-index h2 { margin: 4px 0 0; font-size: 18px; text-transform: uppercase; }
.archive-index > header > strong { color: var(--faction-accent, #5edcff); font-size: 34px; font-weight: 300; }
.archive-mini-grid { display: grid; grid-template-columns: repeat(4, minmax(105px, 1fr)); gap: 9px; }
.archive-mini-card { min-width: 0; aspect-ratio: 3 / 4; padding: 7px; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 5px; position: relative; overflow: hidden; border: 1px solid #27495a; background: linear-gradient(160deg, color-mix(in srgb, var(--faction-accent, #36c8ff) 10%, #0a1822), #050d13); color: #b3c5cf; text-align: left; clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px); }
.archive-mini-card.locked { opacity: .55; filter: saturate(.45); }
.archive-mini-card:hover, .archive-mini-card.active { opacity: 1; border-color: var(--faction-accent, #49d5ff); background: color-mix(in srgb, var(--faction-accent, #36c8ff) 12%, #08131c); box-shadow: inset 0 0 18px color-mix(in srgb, var(--faction-accent, #36c8ff) 12%, transparent); }
.archive-mini-art { min-height: 0; display: grid; place-items: center; position: relative; border: 1px solid color-mix(in srgb, var(--faction-accent, #36c8ff) 50%, #24495c); background: radial-gradient(circle, color-mix(in srgb, var(--faction-accent, #36c8ff) 20%, #142b39), #071018); color: var(--faction-accent, #6bdfff); }
.archive-mini-art i { position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid currentColor; background: #07131ddd; font-size: 7px; font-style: normal; }
.archive-mini-art b { font-style: italic; font-size: 16px; opacity: .75; }
.archive-mini-name { min-width: 0; min-height: 38px; padding: 4px 5px; display: grid; align-content: center; border: 1px solid #27495a; background: #07121bdd; text-align: center; }
.archive-mini-name small { color: var(--faction-accent, #78dfff); font-size: 6px; text-transform: uppercase; }
.archive-mini-name strong { font-size: 9px; line-height: 1.1; overflow-wrap: anywhere; }
.archive-mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.archive-mini-stats em { min-height: 27px; padding: 3px 5px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #27495a; color: #dff7ff; font-size: 12px; font-style: normal; }
.archive-mini-stats small { color: #678899; font-size: 6px; text-transform: uppercase; }

/* Functional deck builder: exact eight-card loadout, artwork remains replaceable. */
.app[data-route="DECK_BUILDER"] { background: linear-gradient(180deg, #02070b80, #02070bd4), url("/app/client/assets/production/collection-deck-hangar-1680x941.png") center / cover fixed no-repeat; }
.app[data-route="DECK_BUILDER"] > nav { background: linear-gradient(180deg, #071521ee, #03080ef5); backdrop-filter: blur(5px); }
.app[data-route="DECK_BUILDER"] main { padding: 0 24px 48px; }
.deck-builder-screen { max-width: 1420px; min-height: 100vh; padding-top: 26px; }
.deck-builder-header { min-height: 108px; padding: 0 6px 20px; display: flex; align-items: end; justify-content: space-between; gap: 24px; border-bottom: 1px solid #24799f; }
.deck-builder-header h1 { margin: 3px 0 0; font-size: clamp(30px, 4vw, 54px); line-height: 1; letter-spacing: .05em; text-transform: uppercase; }
.deck-builder-count { display: flex; align-items: baseline; color: #819aaa; font-size: 20px; }
.deck-builder-count strong { color: #77e3ff; font-size: 38px; }
.deck-builder-layout { padding-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) 350px; align-items: start; gap: 16px; }
.deck-pool { min-width: 0; padding: 18px; }
.deck-pool-controls { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(180px, .35fr); gap: 12px; }
.deck-pool-controls label, .deck-name { display: grid; gap: 5px; color: #7e9bab; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.deck-pool-controls input, .deck-pool-controls select, .deck-name input { width: 100%; border: 1px solid #2b718f; background: #06131d; color: #e7f8ff; padding: 9px 12px; outline: none; }
.deck-pool-controls input:focus, .deck-pool-controls select:focus, .deck-name input:focus { border-color: #58d8ff; box-shadow: 0 0 0 2px #21bdf02d; }
.deck-pool > h2 { margin: 20px 0 12px; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; }
.deck-pool > h2 small { color: #54d8ff; }
.deck-pool-grid { display: grid; gap: 12px; }
.deck-pool-grid.all-factions { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.deck-pool-grid.single-faction { grid-template-columns: repeat(var(--deck-columns), minmax(0, 220px)); justify-content: center; }
.deck-pool-card { min-width: 0; aspect-ratio: 3 / 4; padding: 7px; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 5px; overflow: hidden; border: 1px solid #27495a; background: linear-gradient(160deg, color-mix(in srgb, var(--faction-accent) 10%, #0a1822), #050d13); color: #b3c5cf; text-align: left; clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px); }
.deck-pool-card:hover, .deck-pool-card.selected { opacity: 1; border-color: var(--faction-accent); background: color-mix(in srgb, var(--faction-accent) 14%, #08131c); box-shadow: inset 0 0 20px color-mix(in srgb, var(--faction-accent) 14%, transparent), 0 0 16px color-mix(in srgb, var(--faction-accent) 12%, transparent); }
.deck-pool-card.tutorial-reward-card { outline: 2px solid #45e6ff; outline-offset: -3px; }
.deck-pool-card { position: relative; }
.deck-card-focus { min-width: 0; min-height: 0; padding: 0; display: block; border: 0; background: transparent; color: inherit; text-align: inherit; }
.deck-card-art { width: 100%; height: 100%; min-height: 0; display: grid; place-items: center; position: relative; border: 1px solid color-mix(in srgb, var(--faction-accent) 50%, #24495c); background: radial-gradient(circle, color-mix(in srgb, var(--faction-accent) 20%, #142b39), #071018); }
.deck-card-art b { color: var(--faction-accent); font-style: italic; opacity: .72; }
.deck-card-information { min-width: 0; display: grid; gap: 4px; }
.deck-card-meta { min-height: 21px; display: grid; grid-template-columns: 22px minmax(0, 1fr) 22px; align-items: center; gap: 4px; border: 1px solid #294e61; background: #06111b; }
.deck-card-meta > i { width: 21px; height: 19px; display: grid; place-items: center; border-right: 1px solid color-mix(in srgb, var(--faction-accent) 60%, #294e61); color: var(--faction-accent); font-size: 6px; font-style: normal; }
.deck-card-meta > small { overflow: hidden; color: var(--faction-accent); font-size: 5.5px; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.deck-card-headline { min-height: 27px; display: grid; grid-template-columns: 27px minmax(0, 1fr) 27px; align-items: center; border: 1px solid #294e61; background: #07121bdd; }
.deck-card-headline > strong { min-width: 0; padding: 3px 2px; font-size: 9px; line-height: 1.05; text-align: center; overflow-wrap: anywhere; }
.deck-card-headline > em { min-height: 21px; display: flex; align-items: center; justify-content: center; gap: 2px; color: #f2fbff; font-size: 12px; font-style: normal; }
.deck-card-headline > em:first-child { border-right: 1px solid #294e61; }
.deck-card-headline > em:last-child { border-left: 1px solid #294e61; }
.deck-card-headline > em small { color: var(--faction-accent); font-size: 6px; line-height: 1; text-transform: uppercase; }
.deck-card-abilities { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.deck-ability { min-width: 0; min-height: 22px; padding: 2px 5px; display: flex; align-items: center; justify-content: space-between; gap: 4px; border: 1px solid #294e61; background: #06111b; }
.deck-ability small { color: #6d8a9a; font-size: 7px; text-transform: uppercase; }
.deck-ability strong { overflow: hidden; color: var(--faction-accent, #b9edff); font-size: 8px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.deck-card-toggle { width: 21px; min-height: 19px; padding: 0; display: grid; place-items: center; border: 0; border-left: 1px solid color-mix(in srgb, var(--faction-accent) 60%, #294e61); background: color-mix(in srgb, var(--faction-accent) 8%, #06131d); color: var(--faction-accent); font-size: 12px; font-weight: 800; }
.deck-pool-card.selected .deck-card-toggle { background: color-mix(in srgb, var(--faction-accent) 14%, #091823); }
.deck-loadout { padding: 20px; position: sticky; top: 84px; }
.deck-name { margin: 14px 0; }
.deck-inspector { margin-bottom: 12px; padding: 12px; display: grid; gap: 7px; border: 1px solid color-mix(in srgb, var(--faction-accent) 55%, #31566a); background: linear-gradient(145deg, color-mix(in srgb, var(--faction-accent) 10%, #0a1a25), #061019); }
.deck-inspector > div:first-child small { color: var(--faction-accent); font-size: 8px; text-transform: uppercase; }
.deck-inspector h2 { margin: 3px 0 0; font-size: 17px; line-height: 1.1; }
.deck-inspector-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.deck-inspector-stats span { padding: 5px 8px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #294e61; }
.deck-inspector-stats small { color: #718e9e; font-size: 8px; text-transform: uppercase; }
.deck-inspector-stats strong { font-size: 18px; }
.deck-slots { display: grid; gap: 7px; }
.deck-slot { min-height: 54px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: stretch; border: 1px dashed #31566a; background: #061019b8; }
.deck-slot > span { display: grid; place-items: center; border-right: 1px solid #294e61; color: #5f7f90; font-family: ui-monospace, monospace; }
.deck-slot p { margin: 0; padding: 10px; display: flex; align-items: center; color: #587282; font-size: 10px; text-transform: uppercase; }
.deck-slot.filled { border-style: solid; border-color: color-mix(in srgb, var(--faction-accent) 60%, #31566a); }
.deck-slot.filled > span { color: var(--faction-accent); }
.deck-slot button { min-width: 0; padding: 7px 10px; display: grid; align-content: center; gap: 2px; border: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--faction-accent) 10%, #091720), #071019); color: #e4f7ff; text-align: left; }
.deck-slot button strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.deck-slot button small { color: #7894a4; font-size: 8px; }
.deck-synergy { margin-top: 13px; padding-top: 10px; border-top: 1px solid #254b60; }
.deck-synergy h2 { margin: 0 0 7px; color: #7b9aaa; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.deck-synergy > div { min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #17394b; font-size: 9px; }
.deck-synergy > div span { display: flex; align-items: center; gap: 6px; color: #a9bfca; }
.deck-synergy i { width: 7px; height: 7px; border-radius: 50%; background: var(--faction-accent); box-shadow: 0 0 8px var(--faction-accent); }
.deck-synergy strong { color: #c58d95; font-size: 8px; font-weight: 600; }
.deck-synergy strong.active { color: #54efa8; }
.deck-synergy p { color: #667f8d; font-size: 9px; }
.deck-save-status { min-height: 20px; margin: 14px 0 8px; color: #7f9aaa; font-size: 10px; text-transform: uppercase; }
.deck-save-status.ready, .deck-save-status.saved { color: #54efa8; }
.deck-save-status.reward_required { color: #55dcff; }
.deck-tutorial-guide { margin: 12px 0 0; padding: 10px 12px; border: 1px solid #2fbdd8; background: #06202a; color: #8cecff; font-size: 11px; line-height: 1.45; }
.deck-tutorial-guide.complete { border-color: #32c98a; color: #63efae; }
.deck-save-button { width: 100%; border: 1px solid #43ceff; background: linear-gradient(90deg, #0b3148, #0b2536); color: #e8fbff; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.deck-save-button:not(:disabled):hover { background: linear-gradient(90deg, #105077, #0c334b); box-shadow: 0 0 18px #00bfff33; }

/* Approved profile geometry with one user-supplied production background. */
.app[data-route="PROFILE"] { background: #05090f url("/app/client/assets/production/profile-vardem-command-center-1680x941.png") center / cover fixed no-repeat; }
.app[data-route="PROFILE"] > nav { background: linear-gradient(180deg, #06111bea, #03080eef); backdrop-filter: blur(5px); }
.app[data-route="PROFILE"] main { padding: 0; background: transparent; }
.profile-screen { max-width: none; min-height: 100vh; margin: 0; position: relative; overflow: hidden; }
.profile-screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 55% 48%, #02070b24 0, #02070b52 54%, #02070b88 100%); }
.profile-layout { width: min(1120px, calc(100% - 64px)); margin: 52px auto 0; display: grid; grid-template-columns: minmax(250px, .72fr) minmax(430px, 1.65fr); grid-template-areas: "avatar identity" "left right" "actions actions"; gap: 14px; position: relative; z-index: 1; }
.panel-cut { position: relative; border: 1px solid #279ed0; background: linear-gradient(145deg, #0b2030ee, #07131eee); box-shadow: inset 0 0 28px #06101b, 0 0 14px #009cdc22; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.panel-cut::after { content: ""; position: absolute; inset: 7px; border: 1px solid #1d526b88; pointer-events: none; clip-path: inherit; }
.archive-stage > .archive-featured { position: sticky; top: 260px; }
.profile-avatar-panel { grid-area: avatar; min-height: 245px; padding: 22px; display: grid; place-items: center; align-content: center; gap: 14px; }
.profile-avatar-panel p { max-width: 250px; margin: 0; color: #8fa9ba; font-size: 12px; line-height: 1.4; text-align: center; }
.profile-avatar-panel .avatar-placeholder { width: 154px; height: 154px; display: grid; place-items: center; border: 2px solid #38c8ff; border-radius: 50%; background: radial-gradient(circle, #14354c, #08131e 68%); box-shadow: inset 0 0 28px #009bdc55, 0 0 24px #00aeee55; }
.profile-avatar-panel .avatar-placeholder span { color: #85dcff; font-size: 38px; font-weight: 900; font-style: italic; opacity: .72; }
.profile-identity-panel { grid-area: identity; min-height: 245px; padding: 28px 38px; }
.profile-kicker { margin: 0 0 18px; color: #80dfff; font-size: 14px; font-weight: 700; letter-spacing: .14em; }
.profile-identity-panel h1 { margin: 0 0 22px; font-size: clamp(24px, 2.2vw, 38px); line-height: 1.05; letter-spacing: .045em; overflow-wrap: anywhere; }
.profile-identity-list { display: grid; gap: 8px; margin: 0; }
.profile-identity-list div { display: grid; grid-template-columns: minmax(125px, .65fr) 1fr; align-items: baseline; border-bottom: 1px solid #1b4e6988; padding-bottom: 6px; }
.profile-identity-list dt { color: #718d9f; font-size: 12px; text-transform: uppercase; }
.profile-identity-list dd { margin: 0; color: #d9f4ff; font-weight: 700; overflow-wrap: anywhere; }
.profile-identity-list .profile-online { color: #39f3a0; }
.profile-data-panel { min-height: 210px; padding: 24px 28px; }
.profile-progress-panel { grid-area: left; }
.profile-competitive-panel { grid-area: right; }
.profile-metric { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 34px; border-bottom: 1px solid #1a4962; color: #abc3d1; }
.profile-metric strong { color: #7ddcff; text-align: right; }
.profile-metric-sub { border: 0; min-height: 26px; font-size: 12px; }
.profile-data-panel .progress { margin: 8px 0 2px; height: 8px; border: 1px solid #29576d; background: #06111a; }
.profile-data-panel .progress span { background: linear-gradient(90deg, #087db6, #42e1ff); box-shadow: 0 0 12px #20d3ff; }
.profile-actions { grid-area: actions; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.profile-action { min-height: 106px; padding: 18px 20px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; }
.profile-action > div { min-width: 0; display: grid; gap: 5px; }
.profile-action span { color: #8da9ba; font-size: 12px; text-transform: uppercase; }
.profile-action strong { color: #dff7ff; overflow-wrap: anywhere; }
.profile-action-button { min-width: 122px; padding: 10px 14px; border: 1px solid #35bce9; background: #0c2a3d; color: #e5faff; font-size: 12px; text-transform: uppercase; }
.profile-action-button:hover { background: #124866; box-shadow: 0 0 16px #00bfff44; }

/* User-authored profile armor owns all profile panel chrome. */
tc-profile-frame.profile-avatar-panel,
tc-profile-frame.profile-identity-panel,
tc-profile-frame.profile-data-panel,
tc-profile-frame.profile-action {
  padding: 0;
  display: block;
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}
tc-profile-frame.profile-avatar-panel,
tc-profile-frame.profile-identity-panel { min-height: 260px; }
tc-profile-frame.profile-data-panel { min-height: 220px; }
tc-profile-frame.profile-action { min-height: 110px; }
.profile-frame-content { width: 100%; height: 100%; min-width: 0; }
.profile-identity-content { padding-top: 3px; }
.profile-progress-content,
.profile-status-content { display: grid; align-content: center; }
tc-profile-frame.profile-action > [slot="action-content"] { min-width: 0; display: grid; gap: 5px; }
tc-profile-frame.profile-action > [slot="action-content"] span { color: #8da9ba; font-size: 12px; text-transform: uppercase; }
tc-profile-frame.profile-action > [slot="action-content"] strong {
  max-height: 2.5em;
  overflow: hidden;
  color: #dff7ff;
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
tc-profile-frame.profile-action > button.profile-action-button[slot="action"] {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0 9px;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 11px;
  line-height: 1.12;
}
tc-profile-frame.profile-action > button.profile-action-button[slot="action"]:hover {
  border: 0;
  background: rgba(52, 210, 238, .09);
  box-shadow: none;
}
.mobile { display: block; padding: 66px 0 78px; }
.mobile > .shell-command-bar { height: 66px; padding: 8px 10px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; position: fixed; left: 0; right: 0; }
.mobile .shell-brand { min-width: 42px; }
.mobile .shell-brand > span:last-child { display: none; }
.mobile .shell-brand-mark { width: 40px; height: 36px; font-size: 16px; }
.mobile .shell-wallet { grid-template-columns: repeat(3, minmax(46px, 1fr)); }
.mobile .shell-wallet li { min-height: 36px; padding: 2px 5px; text-align: center; }
.mobile .shell-wallet span { display: none; }
.mobile .shell-wallet strong { font-size: 12px; }
.mobile .shell-identity { min-width: 38px; grid-template-columns: 32px; padding: 2px; }
.mobile .shell-identity > span:nth-child(2), .mobile .shell-identity em { display: none; }
.mobile .shell-avatar { width: 30px; height: 30px; }
.mobile .shell-settings summary { width: 38px; height: 38px; }
.mobile > nav { position: fixed; bottom: 0; left: 0; right: 0; justify-content: space-around; overflow-x: auto; }
.mobile main { padding: 12px 12px 16px; }
.mobile .nav-button { flex: 1; padding-inline: 6px; }
.mobile .profile-layout { width: auto; margin: 14px 12px 0; grid-template-columns: 1fr; grid-template-areas: "avatar" "identity" "left" "right" "actions"; }
.mobile .profile-avatar-panel { min-height: 190px; }
.mobile .profile-avatar-panel .avatar-placeholder { width: 116px; height: 116px; }
.mobile .profile-identity-panel, .mobile .profile-data-panel { min-height: 0; padding: 22px; }
.mobile .profile-actions { grid-template-columns: 1fr; }
.mobile .profile-action { min-height: 92px; }
.mobile.app[data-route="COLLECTION"] { padding-bottom: 78px; }
.mobile.app[data-route="COLLECTION"] main { padding: 0 12px 22px; }
.mobile .collection-screen { padding-top: 12px; }
.mobile .collection-header { min-height: 82px; }
.mobile .collection-sticky-controls { position: static; padding-top: 0; background: transparent; backdrop-filter: none; }
.mobile .collection-searchbar { grid-template-columns: 1fr; gap: 6px; }
.mobile .collection-searchbar p { margin: 0; }
.mobile .collection-workspace { grid-template-columns: 1fr; }
.mobile .collection-filters { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mobile .collection-filter-title, .mobile .collection-filters fieldset { grid-column: 1 / -1; }
.mobile .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mobile .collection-card-copy h2 { font-size: 13px; }
.mobile .collection-detail { grid-template-columns: 1fr; }
.mobile .collection-detail-art { min-height: 220px; }
.mobile .collection-faction-rail { margin-inline: -2px; }
.mobile .faction-node { min-width: 108px; }
.mobile .collection-filter-drawer-grid { grid-template-columns: 1fr; }
.mobile .archive-stage { grid-template-columns: 1fr; }
.mobile .archive-featured { width: min(100%, 315px); position: static; }
.mobile .archive-featured-name h2 { font-size: 17px; }
.mobile .archive-index { min-height: 0; }
.mobile .archive-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mobile.app[data-route="DECK_BUILDER"] main { padding: 0 12px 20px; }
.mobile .deck-builder-screen { padding-top: 12px; }
.mobile .deck-builder-header { min-height: 82px; }
.mobile .deck-builder-layout { grid-template-columns: 1fr; }
.mobile .deck-loadout { position: static; grid-row: 1; }
.mobile .deck-pool { grid-row: 2; padding: 12px; }
.mobile .deck-pool-controls { grid-template-columns: 1fr; }
.mobile .deck-pool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) and (min-width: 768px) {
  .deck-pool-grid.all-factions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .deck-pool-grid.single-faction { grid-template-columns: repeat(var(--deck-columns), minmax(0, 200px)); }
  .profile-command-bar { padding-right: 118px; }
  .profile-wallet span { display: none; }
  .profile-layout { width: min(860px, calc(100% - 32px)); grid-template-columns: minmax(220px, .7fr) minmax(360px, 1.5fr); margin-top: 28px; }
  .profile-actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }

/* S16-01 SELECT -> S16-02 FOCUS visual checkpoint. Battle owns its chrome. */
.app[data-route="BATTLE"] { min-height: 100svh; display: block; overflow: hidden; background: #020609; }
.app[data-route="BATTLE"] > main { width: 100%; height: 100svh; padding: 0; overflow: hidden; }
.battle-screen { --blue: #42d9ff; --red: #ff4d59; width: 100%; max-width: none; height: 100svh; position: relative; display: grid; grid-template-rows: 48px 54px 160px 22px minmax(220px, 1fr) 190px 54px; overflow: hidden; isolation: isolate; background:
  radial-gradient(ellipse at 50% 48%, #143c486e 0, #061219b8 35%, #020609 72%),
  linear-gradient(90deg, #061019 0 1px, transparent 1px 100%), linear-gradient(#061019 0 1px, transparent 1px 100%), #03090d;
  background-size: auto, 72px 72px, 72px 72px, auto;
}
.battle-screen::before { content: ""; position: absolute; inset: 102px 8% 54px; z-index: -1; border: 1px solid #1a4a5f66; clip-path: polygon(6% 0, 94% 0, 100% 14%, 100% 86%, 94% 100%, 6% 100%, 0 86%, 0 14%); background: linear-gradient(90deg, transparent 49.8%, #3ce0ff1c 50%, transparent 50.2%), linear-gradient(#050f15aa, #07131a66); box-shadow: inset 0 0 90px #000, 0 0 40px #0dbce817; }
.battle-screen::after { content: ""; position: absolute; left: 50%; top: 48%; width: min(680px, 58vw); height: min(250px, 28vh); z-index: -1; transform: translate(-50%, -50%); border: 1px solid #27718e55; border-radius: 50%; background: radial-gradient(ellipse, #0c334255, transparent 66%); box-shadow: 0 0 50px #13cfff10, inset 0 0 34px #1cbfe70e; }
.battle-topline { min-width: 0; padding: 0 20px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid #1c566b; background: #03090dd9; }
.battle-topline > div { display: flex; align-items: baseline; gap: 12px; }
.battle-topline small { color: #4ddaff; font-size: 10px; letter-spacing: .18em; }
.battle-topline b { color: #91a9b5; font-size: 10px; letter-spacing: .1em; }
.battle-topline > strong { color: #e8f9ff; font-size: 16px; letter-spacing: .18em; }
.battle-topline > strong i { margin-left: 5px; color: #617b89; font-size: 11px; font-style: normal; }
.battle-exit { justify-self: end; min-height: 30px; padding: 4px 11px; border: 1px solid #315668; background: #07131a; color: #8ca4af; font-size: 9px; letter-spacing: .08em; }
.battle-hud { width: min(560px, 54vw); min-width: 390px; align-self: center; display: grid; grid-template-columns: 38px minmax(120px, auto) minmax(110px, 1fr) auto; align-items: center; gap: 10px; padding: 5px 12px; border: 1px solid currentColor; background: linear-gradient(90deg, #07141dec, #09141aab); clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%, 0 10px); }
.battle-hud.opponent { justify-self: end; margin-right: 6%; color: var(--red); border-right-width: 3px; }
.battle-hud.player { justify-self: start; margin-left: 6%; color: var(--blue); border-left-width: 3px; }
.battle-avatar { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; background: #071118; color: currentColor; font-size: 10px; font-weight: 900; }
.battle-hud > div:nth-child(2) { display: grid; }
.battle-hud small { color: #8ca4b1; font-size: 8px; letter-spacing: .12em; }
.battle-hud strong { color: #ecf9ff; font-size: 11px; }
.battle-hud > b { color: currentColor; font-size: 11px; white-space: nowrap; }
.battle-health { height: 8px; overflow: hidden; border: 1px solid #304954; background: #03090d; }
.battle-health i { height: 100%; display: block; background: currentColor; box-shadow: 0 0 12px currentColor; }
.battle-hand { min-width: 0; display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.4vw, 24px); }
.battle-hand .battle-card, .battle-card-space { flex: 0 0 auto; }
.opponent-hand { align-items: start; }
.player-hand { align-items: end; }
.opponent-hand .battle-card { width: 112px; height: 149px; }
.player-hand .battle-card, .player-hand .battle-card-space { width: 142px; height: 189px; }
.battle-card-space { border: 1px dashed #3fd8ff36; background: #0a253022; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.battle-card { min-height: 0; padding: 0; position: relative; display: block; aspect-ratio: 3 / 4; border: 0; background: transparent; color: #eafbff; text-align: left; }
button.battle-card { transition: transform 150ms ease, filter 150ms ease; }
button.battle-card:hover, button.battle-card:focus-visible { z-index: 3; transform: translateY(-10px) scale(1.035); filter: brightness(1.12); outline: none; }
.battle-card-shell { width: 100%; height: 100%; padding: 5px; display: grid; grid-template-rows: 55% auto auto 1fr; overflow: hidden; border: 2px solid color-mix(in srgb, var(--faction-accent) 72%, #d9f7ff); background: linear-gradient(155deg, #132834, #071017 72%); box-shadow: inset 0 0 0 2px #061017, inset 0 0 24px #000, 0 7px 18px #000b, 0 0 13px color-mix(in srgb, var(--faction-accent) 24%, transparent); clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.opponent-card .battle-card-shell { border-color: color-mix(in srgb, var(--red) 54%, var(--faction-accent)); }
.player-card .battle-card-shell { border-color: color-mix(in srgb, var(--blue) 45%, var(--faction-accent)); }
.battle-card-art { min-height: 0; position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--faction-accent) 55%, #294552); background: #0c202a; }
.battle-card-art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.battle-card-art i { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, #02070bdd 100%); }
.battle-card-art b { max-width: 90%; position: absolute; left: 6px; bottom: 4px; overflow: hidden; color: #b9d4df; font-size: 7px; font-weight: 600; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.battle-card-title { min-width: 0; padding: 4px 3px 3px; display: grid; border-bottom: 1px solid #284753; }
.battle-card-title small { color: var(--faction-accent); font-size: 6px; line-height: 1; letter-spacing: .08em; }
.battle-card-title strong { overflow: hidden; color: #eefbff; font-size: 9px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.battle-card-stats { display: grid; grid-template-columns: 1fr 1fr; }
.battle-card-stats em { padding: 2px 4px; display: flex; align-items: baseline; justify-content: space-between; color: #fff; font-size: 13px; font-style: normal; font-weight: 900; }
.battle-card-stats em:first-child { color: #65ddff; border-right: 1px solid #254650; }
.battle-card-stats em:last-child { color: #ffb35e; }
.battle-card-stats small { color: #78929d; font-size: 5px; font-weight: 600; }
.battle-card-abilities { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #213e49; }
.battle-card-abilities span { min-width: 0; padding: 2px 3px; display: grid; align-content: center; }
.battle-card-abilities span + span { border-left: 1px solid #213e49; }
.battle-card-abilities small { color: #667f8a; font-size: 5px; }
.battle-card-abilities b { overflow: hidden; color: #b9ced7; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.battle-card-abilities .active b { color: #6fffc0; }
.battle-seal { display: flex; align-items: center; justify-content: center; gap: 10px; color: #7e98a4; font-size: 8px; letter-spacing: .14em; }
.battle-seal i { width: min(150px, 14vw); height: 1px; background: linear-gradient(90deg, transparent, #8b3540); }
.battle-seal i:last-child { transform: scaleX(-1); }
.battle-arena { min-height: 0; position: relative; display: grid; place-items: center; }
.battle-select-callout { text-align: center; animation: battle-pulse 2.4s ease-in-out infinite; }
.battle-select-callout small { color: #688693; font-size: 9px; letter-spacing: .18em; }
.battle-select-callout > strong { display: block; margin-top: 4px; color: var(--blue); font-size: 13px; letter-spacing: .22em; }
.battle-select-callout h1 { margin: 8px 0 3px; color: #f0fbff; font-size: clamp(24px, 2.4vw, 40px); letter-spacing: .13em; text-shadow: 0 0 24px #38d7ff55; }
.battle-select-callout p { margin: 0; color: #829ba6; font-size: 11px; }
.battle-focus { width: min(880px, 76vw); height: 100%; min-height: 250px; display: grid; grid-template-columns: 215px minmax(340px, 1fr); align-items: center; justify-content: center; gap: 28px; }
.battle-deployed-card { width: 210px; height: 280px; animation: battle-card-enter 360ms cubic-bezier(.2,.8,.2,1) both; }
.battle-deployed-card .battle-card { width: 100%; height: 100%; }
.battle-deployed-card .battle-card-shell { grid-template-rows: 58% auto auto 1fr; }
.battle-deployed-card .battle-card-title strong { font-size: 13px; white-space: normal; }
.battle-deployed-card .battle-card-title small { font-size: 8px; }
.battle-deployed-card .battle-card-art b { font-size: 8px; }
.battle-deployed-card .battle-card-abilities b { font-size: 8px; }
.battle-deployed-card .battle-card-abilities small { font-size: 6px; }
.battle-decision { min-width: 0; padding: 16px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; border: 1px solid #2ba9d2; background: linear-gradient(145deg, #0a202beF, #061016ef); box-shadow: 0 0 30px #0cbce31d, inset 0 0 30px #010609; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); animation: battle-panel-enter 300ms 100ms ease-out both; }
.battle-decision > p { margin: 0; color: var(--blue); font-size: 8px; letter-spacing: .16em; }
.battle-decision > h2 { margin: 0; justify-self: end; overflow: hidden; color: #effbff; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.battle-decision-link { grid-column: 1 / -1; padding: 6px 8px; display: flex; justify-content: space-between; border: 1px solid #214a59; color: #91acb7; font-size: 9px; }
.battle-decision-link strong { color: #67ffc0; }
.battle-decision > section { min-width: 0; display: grid; gap: 5px; }
.battle-decision label { color: #7895a1; font-size: 8px; letter-spacing: .1em; }
.battle-stepper { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; }
.battle-stepper button { min-height: 36px; border: 1px solid #2e7590; background: #0a2632; color: #bff3ff; font-size: 20px; }
.battle-stepper strong { height: 36px; display: grid; place-items: center; border-block: 1px solid #2e7590; color: #fff; font-size: 20px; }
.battle-overclock { min-height: 54px; padding: 6px 9px; display: grid; grid-template-columns: 1fr auto; align-items: center; border: 1px solid #5b4937; background: #18120e; color: #b89c7b; text-align: left; }
.battle-overclock.active { border-color: #ff982f; background: #32170b; color: #ffc061; box-shadow: 0 0 16px #ff7a1833; }
.battle-overclock span, .battle-overclock b { font-size: 10px; }
.battle-overclock small { grid-column: 1 / -1; font-size: 7px; }
.battle-decision dl { grid-column: 1 / -1; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.battle-decision dl div { min-width: 0; padding: 6px 8px; display: flex; align-items: baseline; justify-content: space-between; border: 1px solid #1f4c5d; background: #07151c; }
.battle-decision dt { color: #6f8d99; font-size: 7px; }
.battle-decision dd { margin: 0; color: #e8faff; font-size: 16px; font-weight: 800; }
.battle-decision-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.35fr; gap: 7px; }
.battle-decision-actions button { min-height: 34px; border: 1px solid #2f687c; background: #0a202a; color: #a8c3ce; font-size: 8px; letter-spacing: .06em; }
.battle-decision-actions .battle-return { border-color: #329ec2; color: #bfefff; }
@keyframes battle-card-enter { from { opacity: 0; transform: translateY(155px) scale(.66); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes battle-panel-enter { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes battle-pulse { 50% { filter: brightness(1.18); } }

@media (max-width: 767px) {
  .mobile.app[data-route="BATTLE"] { padding: 0; }
  .battle-screen { grid-template-rows: 42px 48px 116px 18px minmax(210px, 1fr) 136px 48px; }
  .battle-topline { padding: 0 8px; }
  .battle-topline > div b, .battle-topline > div small, .battle-exit { font-size: 7px; }
  .battle-topline > div { gap: 5px; }
  .battle-topline > strong { font-size: 11px; }
  .battle-hud { width: calc(100% - 22px); min-width: 0; margin-inline: 11px !important; grid-template-columns: 30px minmax(80px, auto) 1fr auto; padding: 4px 7px; gap: 6px; }
  .battle-avatar { width: 28px; height: 28px; }
  .battle-hud strong, .battle-hud > b { font-size: 8px; }
  .battle-hand { gap: 5px; }
  .opponent-hand .battle-card { width: min(70px, 21vw); height: auto; }
  .player-hand .battle-card, .player-hand .battle-card-space { width: min(78px, 22vw); height: auto; aspect-ratio: 3 / 4; }
  .battle-card-shell { padding: 3px; }
  .battle-card-title { padding: 2px; }
  .battle-card-title strong { font-size: 6px; }
  .battle-card-title small, .battle-card-art b { font-size: 4px; }
  .battle-card-stats em { padding: 1px 2px; font-size: 8px; }
  .battle-card-stats small, .battle-card-abilities small { display: none; }
  .battle-card-abilities b { font-size: 4px; }
  .battle-select-callout h1 { font-size: 19px; }
  .battle-select-callout p { font-size: 9px; }
  .battle-focus { width: calc(100% - 16px); grid-template-columns: 124px minmax(0, 1fr); gap: 8px; }
  .battle-deployed-card { width: 122px; height: 163px; }
  .battle-deployed-card .battle-card-title strong { font-size: 8px; }
  .battle-decision { padding: 8px; gap: 5px; }
  .battle-decision > h2 { font-size: 10px; }
  .battle-decision-link { padding: 4px; font-size: 6px; }
  .battle-overclock { min-height: 42px; }
  .battle-overclock small { display: none; }
  .battle-stepper button, .battle-stepper strong { height: 31px; min-height: 31px; }
  .battle-decision dl { gap: 3px; }
  .battle-decision dl div { padding: 3px; display: grid; }
  .battle-decision dt { font-size: 5px; }
  .battle-decision dd { font-size: 11px; }
  .battle-decision-actions { grid-template-columns: 1fr; }
  .battle-decision-actions button { min-height: 28px; font-size: 6px; }
}

/* Authored player/opponent HUDs: layout anchors stay in the battle grid; visuals live in shadow DOM. */
tc-battle-hud.battle-hud {
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

@media (min-width: 1180px) and (min-height: 680px) {
  tc-battle-hud.battle-hud {
    display: block;
    height: var(--battle-band-height) !important;
  }
}

/* Premium combat trial: approved arena background and art-first rarity cards. */
.battle-screen {
  grid-template-rows: 48px 154px 62px 22px minmax(260px, 1fr) 174px 62px;
  background:
    linear-gradient(180deg, #0206091c 0%, #02060935 42%, #02060973 100%),
    url("/app/client/assets/production/battle-vardem-arena-1680x941.png") center / cover no-repeat;
}
.battle-screen::before { inset: 48px 0 0; border: 0; clip-path: none; background: radial-gradient(ellipse at 50% 54%, transparent 0 30%, #0104071a 58%, #0104076e 100%); box-shadow: inset 0 -90px 100px #01040775; }
.battle-screen::after { width: min(760px, 62vw); height: min(310px, 33vh); background: radial-gradient(ellipse, #06151b1f, transparent 70%); border-color: #b9edff1f; }
.battle-topline { background: linear-gradient(180deg, #03070cdd, #071019a8); border-bottom-color: #66d9ff55; backdrop-filter: blur(10px); }
.battle-hud { width: min(690px, 58vw); min-width: 560px; grid-template-columns: 46px minmax(210px, 1.35fr) minmax(170px, .9fr) 104px; gap: 12px; padding: 6px 14px; border-radius: 12px; clip-path: none; background: linear-gradient(100deg, #071018ef, #0c1822d9); box-shadow: 0 12px 30px #0009, inset 0 0 24px #071018; backdrop-filter: blur(12px); }
.battle-hud.opponent { margin-right: 4%; border-color: #ff596b9e; box-shadow: 0 12px 30px #0009, inset -4px 0 #ff425b, inset 0 0 24px #12080b; }
.battle-hud.player { margin-left: 4%; border-color: #4ce3ff9e; box-shadow: 0 -12px 30px #0009, inset 4px 0 #2ddcff, inset 0 0 24px #061219; }
.battle-hud.opponent,
.battle-hud.player { width: min(600px, calc(100% - 24px)); min-width: 0; margin-inline: 0; justify-self: center; }
.battle-avatar { width: 40px; height: 40px; border-width: 2px; background: radial-gradient(circle, #19303e, #050a0e); box-shadow: inset 0 0 12px #000, 0 0 14px currentColor; }
.battle-hud .battle-identity { min-width: 0; display: grid; align-content: center; gap: 1px; }
.battle-identity small { color: #7f98a4; font-size: 7px; letter-spacing: .2em; }
.battle-identity strong { overflow: hidden; color: #f3fbff; font-size: clamp(13px, 1.25vw, 19px); line-height: 1.05; letter-spacing: .045em; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 0 12px currentColor; }
.battle-vital { min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 9px; }
.battle-vital > small { grid-column: 1; color: #8499a4; font-size: 7px; letter-spacing: .12em; }
.battle-vital > b { grid-column: 1; grid-row: 2; color: #fff; font-size: 22px; line-height: 1; }
.battle-vital .battle-health { grid-column: 2; grid-row: 1 / 3; height: 12px; border-radius: 999px; border-color: #71838b8c; background: #010407cc; box-shadow: inset 0 2px 5px #000; }
.battle-vital .battle-health i { border-radius: inherit; background: currentColor; box-shadow: 0 0 16px currentColor; }
.battle-charge { display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 5px; }
.battle-charge small { grid-column: 1 / -1; color: #8499a4; font-size: 7px; letter-spacing: .12em; }
.battle-charge b { color: currentColor; font-size: 24px; line-height: 1; }
.battle-charge em { padding-bottom: 2px; color: #8399a4; font-size: 7px; font-style: normal; white-space: nowrap; }
.battle-hand { gap: clamp(12px, 1.5vw, 25px); }
.opponent-hand .battle-card { width: 112px; height: 149px; }
.player-hand .battle-card, .player-hand .battle-card-space { width: 132px; height: 176px; }
.battle-card-space { border-radius: 14px; clip-path: none; border-color: #68e6ff5c; background: linear-gradient(180deg, #06202b33, #06101870); }
.battle-card { overflow: visible; border-radius: 14px; }
.battle-card-shell { padding: 0; display: block; position: relative; overflow: hidden; border: 0; border-radius: 14px; clip-path: none; background: #071017; box-shadow: 0 12px 24px #000b; }
.battle-card-art { position: absolute; inset: 6px; overflow: hidden; border: 0; border-radius: 10px; background: #09141a; }
.battle-card-art img { object-fit: cover; transform: scale(1.02); }
.battle-card-art i { background: linear-gradient(180deg, #02070b05 0 42%, #02070b44 58%, #02070be8 82%, #02070b 100%); }
.battle-card-material { position: absolute; inset: 0; z-index: 3; pointer-events: none; border: 3px solid #aebdca; border-radius: 14px; box-shadow: inset 0 0 0 1px #e7f6ff88, inset 0 0 18px #a9c2d344, 0 0 11px #9db2c65c; }
.battle-card-material::before, .battle-card-material::after { content: ""; position: absolute; width: 28%; height: 9px; background: linear-gradient(90deg, transparent, currentColor, transparent); opacity: .78; }
.battle-card-material::before { left: 10%; top: 1px; }
.battle-card-material::after { right: 10%; bottom: 1px; }
.rarity-common .battle-card-material { color: #d5e1e8; border-color: #9dafba; }
.rarity-rare .battle-card-material { color: #45d7ff; border-color: #239ad9; box-shadow: inset 0 0 0 1px #9beaff99, inset 0 0 21px #147ebe70, 0 0 14px #1bbfff7d; }
.rarity-epic .battle-card-material { color: #df75ff; border-color: #8b48dc; box-shadow: inset 0 0 0 1px #e8aeff99, inset 0 0 24px #8436bd75, 0 0 15px #be56ff82; }
.rarity-legendary .battle-card-material { color: #ffd769; border-color: #d39824; box-shadow: inset 0 0 0 1px #fff1a6, inset 0 0 26px #da8f287d, 0 0 18px #ffbf3d94; }
.battle-card-rarity { position: absolute; z-index: 4; top: 8px; left: 10px; display: flex; align-items: center; gap: 4px; padding: 3px 7px 3px 4px; border-radius: 999px; background: #020609b8; backdrop-filter: blur(5px); }
.battle-card-rarity i { width: 7px; height: 7px; border-radius: 50%; background: #cbd7dd; box-shadow: 0 0 8px currentColor; }
.rarity-rare .battle-card-rarity { color: #49d9ff; }
.rarity-rare .battle-card-rarity i { background: #49d9ff; }
.rarity-epic .battle-card-rarity { color: #e18aff; }
.rarity-epic .battle-card-rarity i { background: #d86cff; }
.rarity-legendary .battle-card-rarity { color: #ffe389; }
.rarity-legendary .battle-card-rarity i { background: #ffd04f; }
.battle-card-rarity small { color: currentColor; font-size: 6px; font-weight: 800; letter-spacing: .08em; }
.battle-card-title { min-width: 0; padding: 0; position: absolute; z-index: 4; left: 12px; right: 12px; bottom: 51px; display: grid; border: 0; text-shadow: 0 2px 7px #000, 0 0 8px #000; }
.battle-card-title small { overflow: hidden; color: var(--faction-accent); font-size: 6px; font-weight: 700; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.battle-card-title strong { overflow: hidden; color: #fff; font-size: 10px; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.battle-card-stats { position: absolute; z-index: 5; left: 7px; right: 7px; bottom: 7px; display: flex; justify-content: space-between; pointer-events: none; }
.battle-card-stats em { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; position: relative; border: 2px solid currentColor !important; border-radius: 50%; background: #02070bda; box-shadow: 0 3px 10px #000, inset 0 0 10px currentColor; }
.battle-card-stats em small { position: absolute; bottom: -1px; color: #b9c9d0; font-size: 4px; letter-spacing: .05em; }
.battle-card-stats em b { color: currentColor; font-size: 16px; line-height: 1; }
.battle-card-stats em.power { color: #51dcff; }
.battle-card-stats em.damage { color: #ffac45; }
.battle-card-abilities { position: absolute; z-index: 4; left: 43px; right: 43px; bottom: 9px; display: flex; justify-content: center; gap: 4px; border: 0; }
.battle-card-abilities span { width: 23px; height: 23px; padding: 0; display: grid; place-items: center; border: 1px solid #78909a; border-radius: 7px; background: #02070bcf; box-shadow: 0 3px 8px #000; }
.battle-card-abilities span + span { border-left: 1px solid #78909a; }
.battle-card-abilities span.active { border-color: #68ffc0; box-shadow: 0 0 10px #37ef9b6e, inset 0 0 8px #2bf5a43d; }
.battle-card-abilities small { color: #dce8ed; font-size: 7px; font-weight: 900; }
.battle-card-abilities b { display: none; }
.battle-seal { color: #d7e8ef; text-shadow: 0 2px 8px #000; }
.battle-seal span { padding: 3px 12px; border: 1px solid #b7384682; border-radius: 999px; background: #12070ac2; backdrop-filter: blur(8px); }
.battle-seal i { background: linear-gradient(90deg, transparent, #ff4258); }
.battle-select-callout { padding: 17px 28px; border-radius: 20px; background: #03080c79; box-shadow: 0 0 40px #0008; backdrop-filter: blur(7px); }
.battle-select-callout h1 { text-shadow: 0 3px 16px #000, 0 0 24px #38d7ff75; }
.battle-focus { width: min(900px, 78vw); grid-template-columns: 300px minmax(400px, 1fr); gap: 30px; }
.battle-deployed-card { width: 294px; height: 392px; }
.battle-deployed-card .battle-card-title { left: 20px; right: 20px; bottom: 78px; }
.battle-deployed-card .battle-card-title small { font-size: 9px; }
.battle-deployed-card .battle-card-title strong { font-size: 20px; }
.battle-deployed-card .battle-card-rarity { top: 13px; left: 14px; padding: 5px 10px 5px 6px; }
.battle-deployed-card .battle-card-rarity i { width: 10px; height: 10px; }
.battle-deployed-card .battle-card-rarity small { font-size: 9px; }
.battle-deployed-card .battle-card-stats { left: 13px; right: 13px; bottom: 13px; }
.battle-deployed-card .battle-card-stats em { width: 54px; height: 54px; }
.battle-deployed-card .battle-card-stats em b { font-size: 27px; }
.battle-deployed-card .battle-card-stats em small { bottom: 2px; font-size: 6px; }
.battle-deployed-card .battle-card-abilities { left: 75px; right: 75px; bottom: 18px; gap: 8px; }
.battle-deployed-card .battle-card-abilities span { width: 42px; height: 42px; border-radius: 12px; }
.battle-deployed-card .battle-card-abilities small { font-size: 12px; }
.battle-decision { padding: 18px 20px; gap: 10px 15px; border-radius: 18px; clip-path: none; border-color: #63ddff7d; background: linear-gradient(145deg, #07131be8, #09141bd1); box-shadow: 0 18px 46px #000b, inset 0 0 35px #051016; backdrop-filter: blur(14px); }
.battle-decision-link { border-radius: 9px; background: #07131b9c; }
.battle-stepper button:first-child { border-radius: 10px 0 0 10px; }
.battle-stepper button:last-child { border-radius: 0 10px 10px 0; }
.battle-overclock { border-radius: 10px; }
.battle-decision dl div { border-radius: 9px; background: #07131bc7; }
.battle-decision-actions button { border-radius: 9px; }

@media (max-width: 767px) {
  .battle-screen { grid-template-rows: 40px 108px 54px 18px minmax(238px, 1fr) 128px 54px; background-position: center; }
  .battle-hud { width: calc(100% - 14px); min-width: 0; grid-template-columns: 34px minmax(92px, 1fr) minmax(95px, 1fr) 58px; padding: 5px 7px; gap: 5px; border-radius: 9px; }
  .battle-avatar { width: 30px; height: 30px; }
  .battle-identity strong { font-size: 9px; }
  .battle-vital > b { font-size: 16px; }
  .battle-vital .battle-health { height: 8px; }
  .battle-charge b { font-size: 17px; }
  .battle-charge em { font-size: 5px; }
  .opponent-hand .battle-card { width: min(68px, 20vw); }
  .player-hand .battle-card, .player-hand .battle-card-space { width: min(75px, 21.5vw); }
  .battle-card-title { left: 7px; right: 7px; bottom: 32px; }
  .battle-card-title strong { font-size: 6px; }
  .battle-card-title small { font-size: 4px; }
  .battle-card-rarity { top: 5px; left: 6px; padding: 2px 4px; }
  .battle-card-rarity small { font-size: 4px; }
  .battle-card-stats em { width: 23px; height: 23px; }
  .battle-card-stats em b { font-size: 10px; }
  .battle-card-stats em small { display: none; }
  .battle-card-abilities { left: 31px; right: 31px; bottom: 7px; gap: 2px; }
  .battle-card-abilities span { width: 15px; height: 15px; border-radius: 4px; }
  .battle-card-abilities small { display: block; font-size: 5px; }
  .battle-focus { width: calc(100% - 10px); grid-template-columns: 146px minmax(0, 1fr); gap: 7px; }
  .battle-deployed-card { width: 144px; height: 192px; }
  .battle-deployed-card .battle-card-title { left: 10px; right: 10px; bottom: 42px; }
  .battle-deployed-card .battle-card-title strong { font-size: 10px; }
  .battle-deployed-card .battle-card-title small { font-size: 5px; }
  .battle-deployed-card .battle-card-rarity { top: 7px; left: 7px; padding: 3px 5px; }
  .battle-deployed-card .battle-card-rarity small { font-size: 5px; }
  .battle-deployed-card .battle-card-stats { left: 7px; right: 7px; bottom: 7px; }
  .battle-deployed-card .battle-card-stats em { width: 31px; height: 31px; }
  .battle-deployed-card .battle-card-stats em b { font-size: 15px; }
  .battle-deployed-card .battle-card-abilities { left: 42px; right: 42px; bottom: 10px; gap: 3px; }
  .battle-deployed-card .battle-card-abilities span { width: 23px; height: 23px; }
  .battle-deployed-card .battle-card-abilities small { font-size: 7px; }
  .battle-decision { padding: 8px; border-radius: 10px; }
}

/* SELECT correction: information remains explicit and never competes with the artwork. */
.battle-card-rarity { display: none; }
.battle-card-title { bottom: 57px; }
.battle-card-stats { left: 8px; right: 8px; bottom: 30px; gap: 5px; }
.battle-card-stats em {
  width: calc(50% - 2.5px); height: 23px; padding: 2px 5px;
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid currentColor !important; border-radius: 6px;
  background: #02070be8; box-shadow: 0 3px 8px #0008, inset 0 0 8px #0a2028;
}
.battle-card-stats em small { position: static; display: block; color: #d5e2e7; font-size: 5px; letter-spacing: .02em; }
.battle-card-stats em b { display: block; color: currentColor; font-size: 13px; line-height: 1; }
.battle-card-abilities { left: 8px; right: 8px; bottom: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.battle-card-abilities span { width: auto; height: 20px; padding: 2px 4px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 3px; border-radius: 5px; }
.battle-card-abilities span + span { border-left-width: 1px; }
.battle-card-abilities small { display: block; color: #9db1ba; font-size: 4px; font-weight: 700; }
.battle-card-abilities b { display: block; overflow: hidden; color: #eef8fb; font-size: 5px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.battle-card-abilities span.active b { color: #75ffc4; }
.battle-card.inspectable:hover .battle-card-material, .battle-card.inspectable:focus-visible .battle-card-material { border-color: #fff; box-shadow: inset 0 0 0 1px #fff, 0 0 22px #ff586f; }
.battle-inspector { width: min(720px, calc(100% - 40px)); min-height: 330px; padding: 16px; position: absolute; z-index: 30; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px; border: 1px solid color-mix(in srgb, var(--faction-accent) 78%, white); border-radius: 20px; background: linear-gradient(145deg, #07131bf5, #03080cf2); box-shadow: 0 30px 90px #000, 0 0 30px color-mix(in srgb, var(--faction-accent) 28%, transparent); backdrop-filter: blur(18px); }
.battle-inspector-art { min-height: 300px; overflow: hidden; border: 1px solid var(--faction-accent); border-radius: 14px; }
.battle-inspector-art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.battle-inspector-copy { min-width: 0; display: grid; align-content: start; gap: 10px; }
.battle-inspector-copy > small { color: var(--faction-accent); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.battle-inspector-copy h2 { margin: 0; color: #fff; font-size: 28px; }
.battle-inspector-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.battle-inspector-stats span { padding: 9px 12px; display: flex; align-items: baseline; justify-content: space-between; border: 1px solid #32586a; border-radius: 9px; background: #07131b; }
.battle-inspector-stats small, .battle-inspector-copy dt { color: #8da5af; font-size: 9px; }
.battle-inspector-stats b { font-size: 22px; }
.battle-inspector-copy dl { margin: 0; display: grid; gap: 7px; }
.battle-inspector-copy dl div { padding: 9px 11px; display: flex; justify-content: space-between; border: 1px solid #2d5668; border-radius: 9px; }
.battle-inspector-copy dd { margin: 0; color: #e8f8ff; font-weight: 800; }
.battle-inspector-copy p { margin: 0; color: #b6c8d0; font-size: 12px; line-height: 1.45; }
.battle-inspector-close { min-height: 36px; border: 1px solid #41cffa; border-radius: 9px; background: #0b2b39; color: #e9fbff; }

@media (max-width: 767px) {
  .battle-card-title { bottom: 40px; }
  .battle-card-stats { left: 5px; right: 5px; bottom: 21px; gap: 2px; }
  .battle-card-stats em { height: 17px; padding: 1px 3px; }
  .battle-card-stats em small { display: block; font-size: 3px; }
  .battle-card-stats em b { font-size: 9px; }
  .battle-card-abilities { left: 5px; right: 5px; bottom: 4px; gap: 2px; }
  .battle-card-abilities span { height: 15px; padding: 1px 2px; gap: 1px; }
  .battle-card-abilities small { font-size: 3px; }
  .battle-card-abilities b { font-size: 3px; }
  .battle-inspector { width: calc(100% - 16px); min-height: 0; max-height: calc(100% - 20px); padding: 10px; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; overflow: auto; border-radius: 12px; }
  .battle-inspector-art { min-height: 210px; }
  .battle-inspector-copy h2 { font-size: 17px; }
}

/* S16 card geometry: every information band owns a fixed row, so text cannot overlap. */
.battle-screen { grid-template-rows: 42px 50px 190px 18px minmax(160px, 1fr) 190px 50px; }
.battle-hud { width: min(660px, calc(100% - 24px)); min-width: 0; grid-template-columns: 40px minmax(150px, 1.2fr) minmax(145px, 1fr) 82px 92px; gap: 10px; padding: 5px 12px; }
.battle-hud.opponent,
.battle-hud.player { width: min(660px, calc(100% - 24px)); margin: 0; justify-self: center; }
.battle-hud-initiative { min-width: 0; display: grid; align-content: center; gap: 2px; border-left: 1px solid currentColor; padding-left: 10px; }
.battle-hud-initiative small { color: #8499a4; font-size: 7px; letter-spacing: .1em; }
.battle-hud-initiative b { overflow: hidden; color: currentColor; font-size: 10px; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.battle-hand { gap: 16px; }
.opponent-hand .battle-card,
.player-hand .battle-card,
.player-hand .battle-card-space { width: 150px; height: 190px; }
.battle-card-shell,
.battle-card-shell.compact { padding: 4px; display: grid; grid-template-rows: 12px minmax(0, 1fr) 22px 20px 20px; gap: 2px; }
.battle-card-rarity { grid-row: 1; min-width: 0; position: static; z-index: 4; display: flex; align-items: center; gap: 5px; padding: 0 3px; border-radius: 0; background: transparent; backdrop-filter: none; }
.battle-card-rarity i { flex: 0 0 auto; width: 6px; height: 6px; }
.battle-card-rarity small { overflow: hidden; font-size: 7px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.battle-card-art { grid-row: 2; min-height: 0; position: relative; inset: auto; border-radius: 7px; }
.battle-card-art i { background: linear-gradient(180deg, transparent 0 68%, #02070b6b 100%); }
.battle-card-title { grid-row: 3; min-width: 0; position: static; z-index: 4; padding: 0 3px; align-content: center; }
.battle-card-title small { font-size: 6px; line-height: 1.05; }
.battle-card-title strong { font-size: 10px; line-height: 1.1; }
.battle-card-stats { grid-row: 4; min-width: 0; position: static; z-index: 4; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; pointer-events: none; }
.battle-card-stats em { width: auto; height: auto; min-width: 0; padding: 2px 5px; display: flex; align-items: center; justify-content: space-between; border-radius: 5px; }
.battle-card-stats em small { position: static; display: block; overflow: hidden; font-size: 5px; text-overflow: ellipsis; white-space: nowrap; }
.battle-card-stats em b { flex: 0 0 auto; font-size: 12px; }
.battle-card-abilities { grid-row: 5; min-width: 0; position: static; z-index: 4; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.battle-card-abilities span { width: auto; height: auto; min-width: 0; padding: 2px 4px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px; border-radius: 5px; }
.battle-card-abilities small { display: block; flex: 0 0 auto; font-size: 4px; }
.battle-card-abilities b { display: block; min-width: 0; overflow: hidden; font-size: 5px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }

.battle-deployed-card .battle-card-shell { padding: 9px; grid-template-rows: 22px minmax(0, 1fr) 48px 38px 38px; gap: 6px; }
.battle-deployed-card .battle-card-rarity { position: static; padding: 0 5px; }
.battle-deployed-card .battle-card-rarity i { width: 9px; height: 9px; }
.battle-deployed-card .battle-card-rarity small { font-size: 10px; }
.battle-deployed-card .battle-card-title { position: static; padding: 0 5px; }
.battle-deployed-card .battle-card-title small { font-size: 9px; }
.battle-deployed-card .battle-card-title strong { font-size: 19px; white-space: normal; }
.battle-deployed-card .battle-card-stats { position: static; }
.battle-deployed-card .battle-card-stats em { width: auto; height: auto; padding: 5px 9px; }
.battle-deployed-card .battle-card-stats em small { position: static; font-size: 8px; }
.battle-deployed-card .battle-card-stats em b { font-size: 22px; }
.battle-deployed-card .battle-card-abilities { position: static; }
.battle-deployed-card .battle-card-abilities span { width: auto; height: auto; padding: 5px 8px; border-radius: 7px; }
.battle-deployed-card .battle-card-abilities small { font-size: 7px; }
.battle-deployed-card .battle-card-abilities b { display: block; font-size: 8px; }
.battle-screen.focus { grid-template-rows: 42px 50px 0 0 minmax(0, 1fr) 0 50px; }
.battle-screen.focus .battle-hand,
.battle-screen.focus .battle-seal,
.battle-screen.locked .battle-hand,
.battle-screen.locked .battle-seal,
.battle-screen.reveal .battle-hand,
.battle-screen.reveal .battle-seal { visibility: hidden; }

@media (max-width: 767px) {
  .battle-screen { grid-template-rows: 40px 52px 140px 18px minmax(190px, 1fr) 140px 52px; }
  .battle-hud { grid-template-columns: 30px minmax(80px, 1fr) minmax(88px, 1fr) 52px; gap: 5px; padding: 4px 6px; }
  .battle-hud-initiative { display: none; }
  .opponent-hand .battle-card,
  .player-hand .battle-card,
  .player-hand .battle-card-space { width: min(84px, 22vw); height: 136px; }
  .battle-card-shell,
  .battle-card-shell.compact { padding: 3px; grid-template-rows: 10px minmax(0, 1fr) 18px 17px 17px; gap: 2px; }
  .battle-card-rarity { padding: 0 2px; }
  .battle-card-rarity small { font-size: 5px; }
  .battle-card-title { padding: 0 2px; }
  .battle-card-title small { font-size: 4px; }
  .battle-card-title strong { font-size: 7px; }
  .battle-card-stats em { height: auto; padding: 1px 2px; }
  .battle-card-stats em small { font-size: 3px; }
  .battle-card-stats em b { font-size: 8px; }
  .battle-card-abilities span { height: auto; padding: 1px 2px; gap: 1px; }
  .battle-card-abilities small { font-size: 3px; }
  .battle-card-abilities b { font-size: 3px; }
}

/* S16 spacing pass: hands have protected air around HUD and stake. */
.battle-screen { grid-template-rows: 42px 48px 208px 24px minmax(128px, 1fr) 208px 48px; }
.opponent-hand { align-items: flex-end; }
.player-hand { align-items: flex-start; }
.opponent-hand .battle-card,
.player-hand .battle-card,
.player-hand .battle-card-space { width: 158px; height: 198px; }
.battle-hand { gap: 18px; }
.battle-seal { align-items: flex-end; padding-bottom: 2px; box-sizing: border-box; }
.battle-stepper { grid-template-columns: 28px minmax(72px, 1fr) 28px; }
.battle-stepper button { padding-inline: 0; }
.battle-stepper strong { min-width: 72px; }

@media (max-width: 767px) {
  .battle-screen { grid-template-rows: 40px 48px 150px 20px minmax(130px, 1fr) 150px 48px; }
  .opponent-hand .battle-card,
  .player-hand .battle-card,
  .player-hand .battle-card-space { width: min(88px, 22vw); height: 142px; }
  .battle-hand { gap: 4px; }
  .battle-stepper { grid-template-columns: 25px minmax(46px, 1fr) 25px; }
  .battle-stepper strong { min-width: 46px; }
}

/* Reference composition #2: one contained card surface, five isolated content bands. */
button.battle-card:hover,
button.battle-card:focus-visible { transform: none; filter: brightness(1.08); }
.battle-card { box-sizing: border-box; }
.battle-card-shell,
.battle-card-shell.compact {
  box-sizing: border-box;
  padding: 6px;
  grid-template-rows: 16px minmax(0, 1fr) 22px 22px 22px;
  gap: 2px;
  border-radius: 15px;
  background: linear-gradient(155deg, #111c25, #050a0f 74%);
}
.battle-card-material {
  z-index: 10;
  border-width: 3px;
  box-shadow: inset 0 0 0 2px #02070b, inset 0 0 0 3px currentColor, 0 8px 18px #000b;
}
.battle-card-material::before,
.battle-card-material::after { display: none; }
.battle-card-rarity {
  min-width: 0;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, currentColor 58%, #24323b);
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(90deg, color-mix(in srgb, currentColor 18%, #091119), #091119 68%);
  box-shadow: inset 3px 0 currentColor;
}
.battle-card-rarity i { display: none; }
.battle-card-rarity small { color: currentColor; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.battle-card-art { border: 1px solid color-mix(in srgb, currentColor 45%, #344954); border-radius: 3px; }
.battle-card-title { padding: 2px 4px; border-bottom: 1px solid #5365718a; }
.battle-card-title small { font-size: 6px; }
.battle-card-title strong { font-size: 11px; }
.battle-card-stats,
.battle-card-abilities { padding-inline: 2px; gap: 5px; }
.battle-card-stats em,
.battle-card-abilities span {
  min-width: 0;
  border: 1px solid #607480 !important;
  border-radius: 4px;
  background: linear-gradient(155deg, #101a21ed, #05090ded);
  box-shadow: inset 0 0 0 1px #000, inset 2px 0 color-mix(in srgb, currentColor 70%, transparent);
}
.battle-card-stats em { padding: 3px 6px; }
.battle-card-stats em small { font-size: 5px; }
.battle-card-stats em b { font-size: 13px; }
.battle-card-abilities span { padding: 3px 5px; }
.battle-card-abilities small { font-size: 4px; }
.battle-card-abilities b { font-size: 6px; }
.battle-card-abilities span.active { border-color: #57e9aa !important; }

.battle-deployed-card .battle-card-shell {
  padding: 11px;
  grid-template-rows: 30px minmax(0, 1fr) 52px 43px 43px;
  gap: 7px;
}
.battle-deployed-card .battle-card-rarity { padding: 0 12px; }
.battle-deployed-card .battle-card-rarity small { font-size: 13px; }
.battle-deployed-card .battle-card-title { padding: 4px 7px; }
.battle-deployed-card .battle-card-stats,
.battle-deployed-card .battle-card-abilities { padding-inline: 3px; gap: 8px; }

@media (max-width: 767px) {
  .battle-card-shell,
  .battle-card-shell.compact { padding: 4px; grid-template-rows: 12px minmax(0, 1fr) 18px 17px 17px; gap: 2px; }
  .battle-card-rarity { padding: 0 4px; }
  .battle-card-rarity small { font-size: 5px; }
  .battle-card-stats,
  .battle-card-abilities { padding-inline: 1px; gap: 2px; }
}

/* Final viewport geometry: explicit safe space around every interactive band. */
.battle-screen {
  grid-template-rows: 42px 56px 208px 34px minmax(102px, 1fr) 208px 64px;
}
.battle-hud { height: 48px; box-sizing: border-box; }
.battle-hud.opponent { align-self: end; }
.battle-hud.player { align-self: start; }
.opponent-hand { align-items: flex-end; }
.player-hand { align-items: flex-start; }
.battle-seal { align-items: flex-end; padding-bottom: 0; }
.battle-stepper { grid-template-columns: 31px 54px 31px; justify-content: center; }
.battle-stepper strong { min-width: 54px; }
.battle-screen.focus { grid-template-rows: 42px 56px 0 0 minmax(0, 1fr) 0 64px; }

@media (max-width: 767px) {
  .battle-screen { grid-template-rows: 40px 52px 150px 28px minmax(104px, 1fr) 150px 60px; }
  .battle-hud { height: 44px; }
  .battle-screen.focus { grid-template-rows: 40px 52px 0 0 minmax(0, 1fr) 0 60px; }
  .battle-stepper { grid-template-columns: 27px 46px 27px; }
  .battle-stepper strong { min-width: 46px; }
}

@media (min-width: 768px) and (min-height: 800px) {
  .battle-screen { grid-template-rows: 42px 56px 224px 34px minmax(102px, 1fr) 224px 64px; }
  .opponent-hand .battle-card,
  .player-hand .battle-card,
  .player-hand .battle-card-space { width: 170px; height: 214px; }
  .battle-hand { gap: 20px; }
  .battle-screen.focus { grid-template-rows: 42px 56px 0 0 minmax(0, 1fr) 0 64px; }
}

/* Battle field anchors: the two combatants and both hands own separate safe zones. */
@media (min-width: 1180px) and (min-height: 680px) {
  .battle-screen {
    --battle-edge: 18px;
    --battle-hud-width: clamp(310px, 24vw, 390px);
    --battle-band-top: 58px;
    --battle-band-height: 214px;
    display: block;
  }

  .battle-topline {
    position: absolute;
    inset: 0 0 auto;
    z-index: 20;
    height: 42px;
    box-sizing: border-box;
  }

  .battle-hud {
    position: absolute;
    z-index: 12;
    width: var(--battle-hud-width) !important;
    height: var(--battle-band-height) !important;
    min-width: 0;
    margin: 0 !important;
    padding: 12px;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: 42px 44px 44px 42px;
    align-items: stretch;
    gap: 5px 12px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 14px;
    backdrop-filter: blur(12px);
  }

  .battle-hud.opponent {
    top: var(--battle-band-top);
    left: var(--battle-edge);
    right: auto;
    bottom: auto;
    color: var(--red);
    border: 1px solid #ff596b9e;
    box-shadow: 0 14px 32px #000a, inset 4px 0 #ff425b, inset 0 0 30px #18080d;
  }

  .battle-hud.player {
    top: auto;
    left: auto;
    right: var(--battle-edge);
    bottom: var(--battle-edge);
    color: var(--blue);
    border: 1px solid #4ce3ff9e;
    box-shadow: 0 -14px 32px #000a, inset -4px 0 #2ddcff, inset 0 0 30px #06151d;
  }

  .battle-avatar {
    grid-column: 1;
    grid-row: 1 / 4;
    width: 96px;
    height: 140px;
    position: relative;
    align-self: stretch;
    overflow: hidden;
    border: 2px solid currentColor;
    border-radius: 12px;
    background: #050b10;
    box-shadow: inset 0 0 18px #000, 0 0 14px color-mix(in srgb, currentColor 48%, transparent);
  }

  .battle-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 28%;
    filter: saturate(.82) contrast(1.06);
  }

  .battle-avatar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 52%, #020609d9 100%);
    pointer-events: none;
  }

  .battle-avatar b {
    position: absolute;
    z-index: 1;
    right: 7px;
    bottom: 6px;
    color: currentColor;
    font-size: 10px;
    letter-spacing: .12em;
    text-shadow: 0 2px 7px #000;
  }

  .battle-hud .battle-identity {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding: 2px 0 5px;
    align-content: end;
    border-bottom: 1px solid color-mix(in srgb, currentColor 42%, transparent);
  }

  .battle-identity strong {
    font-size: clamp(14px, 1.25vw, 18px);
  }

  .battle-vital {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 16px 18px;
    gap: 2px 8px;
  }

  .battle-vital > small { grid-column: 1; grid-row: 1; }
  .battle-vital > b { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 25px; }
  .battle-vital .battle-health { grid-column: 1; grid-row: 2; height: 12px; }

  .battle-charge {
    grid-column: 2;
    grid-row: 3;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 16px 22px;
    align-items: center;
    gap: 1px 8px;
  }

  .battle-charge small { grid-column: 1; grid-row: 1; }
  .battle-charge b { grid-column: 2; grid-row: 1 / 3; font-size: 25px; }
  .battle-charge em { grid-column: 1; grid-row: 2; padding: 0; font-size: 8px; }

  .battle-hud-initiative {
    grid-column: 1 / -1;
    grid-row: 4;
    min-width: 0;
    padding: 5px 10px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    border: 1px solid color-mix(in srgb, currentColor 48%, #263640);
    border-radius: 7px;
    background: #03090dcc;
  }

  .battle-hud-initiative b { font-size: 11px; }

  .battle-hand {
    position: absolute;
    z-index: 8;
    height: var(--battle-band-height);
    gap: 14px;
  }

  .opponent-hand {
    top: var(--battle-band-top);
    left: calc(var(--battle-edge) + var(--battle-hud-width) + 26px);
    right: var(--battle-edge);
    justify-content: flex-start;
    align-items: stretch;
  }

  .player-hand {
    left: var(--battle-edge);
    right: calc(var(--battle-edge) + var(--battle-hud-width) + 26px);
    bottom: var(--battle-edge);
    justify-content: flex-end;
    align-items: stretch;
  }

  .opponent-hand .battle-card,
  .player-hand .battle-card,
  .player-hand .battle-card-space {
    width: 170px;
    height: 214px;
  }

  .battle-seal {
    position: absolute;
    z-index: 9;
    top: calc(var(--battle-band-top) + var(--battle-band-height) + 8px);
    left: calc(var(--battle-edge) + var(--battle-hud-width) + 26px);
    right: var(--battle-edge);
    height: 28px;
    padding: 0;
    align-items: center;
  }

  .battle-arena {
    position: absolute;
    z-index: 5;
    top: calc(var(--battle-band-top) + var(--battle-band-height) + 44px);
    right: calc(var(--battle-edge) + var(--battle-hud-width) + 8px);
    bottom: calc(var(--battle-edge) + var(--battle-band-height) + 18px);
    left: calc(var(--battle-edge) + var(--battle-hud-width) + 8px);
    min-height: 0;
  }

  .battle-screen.focus .battle-arena {
    top: 58px;
    right: calc(var(--battle-edge) + var(--battle-hud-width) + 20px);
    bottom: 58px;
    left: calc(var(--battle-edge) + var(--battle-hud-width) + 20px);
  }

  .battle-screen.focus .battle-focus {
    width: min(900px, 100%);
  }
}

/* Correct side ownership and asset-ready HUD frame layer. */
@media (min-width: 1180px) and (min-height: 680px) {
  .battle-screen {
    --battle-hud-width: clamp(270px, 20.5vw, 340px);
  }

  .battle-hud {
    grid-template-columns: 82px minmax(0, 1fr);
    padding: 11px;
    gap: 5px 10px;
    overflow: visible;
    border: 0 !important;
    border-radius: 0;
    background: linear-gradient(105deg, #071018ef, #0b1821e8);
    box-shadow: 0 14px 32px #000a, inset 0 0 30px #061018 !important;
    isolation: isolate;
  }

  .battle-hud-frame {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    border: 2px solid currentColor;
    background-image: var(--battle-hud-frame-image, none);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
    box-shadow: inset 0 0 0 2px #020609, inset 0 0 0 3px color-mix(in srgb, currentColor 42%, transparent), 0 0 15px color-mix(in srgb, currentColor 24%, transparent);
  }

  .battle-hud.opponent {
    top: var(--battle-band-top);
    right: var(--battle-edge);
    bottom: auto;
    left: auto;
  }

  .battle-hud.player {
    top: auto;
    right: auto;
    bottom: var(--battle-edge);
    left: var(--battle-edge);
  }

  .battle-avatar {
    width: 82px;
    height: 140px;
    z-index: 2;
  }

  .battle-hud .battle-identity,
  .battle-vital,
  .battle-charge,
  .battle-hud-initiative { position: relative; z-index: 2; }

  .battle-vital,
  .battle-charge {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 15px 15px;
    gap: 2px 7px;
    align-items: center;
  }

  .battle-vital > small,
  .battle-charge > small { grid-column: 1; grid-row: 1; }

  .battle-vital > b,
  .battle-charge > b {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    color: #edfaff;
    font-size: 15px;
    letter-spacing: .02em;
  }

  .battle-vital .battle-health,
  .battle-charge .battle-energy {
    grid-column: 1;
    grid-row: 2;
    height: 11px;
    overflow: hidden;
    border: 1px solid #526b76;
    border-radius: 999px;
    background: #020609dd;
    box-shadow: inset 0 2px 5px #000;
  }

  .battle-health i,
  .battle-energy i {
    height: 100%;
    display: block;
    border-radius: inherit;
    box-shadow: 0 0 13px currentColor;
  }

  .battle-hud.opponent .battle-health i { background: #ff5264; }
  .battle-hud.player .battle-health i { background: #4fe4ff; }
  .battle-energy i { background: #5c9fff; }

  .battle-hand {
    left: 50%;
    right: auto;
    width: max-content;
    transform: translateX(-50%);
    justify-content: center;
    gap: 12px;
  }

  .opponent-hand { top: var(--battle-band-top); }
  .player-hand { bottom: var(--battle-edge); }

  .battle-seal {
    left: 50%;
    right: auto;
    width: 720px;
    transform: translateX(-50%);
  }

  .battle-arena {
    left: 20%;
    right: 20%;
  }

  .battle-screen.focus .battle-arena {
    left: 8%;
    right: 8%;
  }

  .battle-screen.locked .battle-arena {
    top: 58px;
    right: 8%;
    bottom: 58px;
    left: 8%;
  }

  .battle-screen.locked .battle-focus { width: min(900px, 100%); }

  .battle-screen.reveal .battle-arena {
    top: 58px;
    right: 6%;
    bottom: 58px;
    left: 6%;
  }
}

.battle-focus { position: relative; }
.battle-turn-timer { position: absolute; right: 150px; display: flex; align-items: center; gap: 10px; color: #91a9b5; letter-spacing: .1em; }
.battle-turn-timer small { font-size: 9px; }
.battle-turn-timer b { min-width: 50px; color: #6eeaff; font-size: 15px; text-align: right; font-variant-numeric: tabular-nums; }
.battle-turn-timer.urgent b { color: #ff6262; text-shadow: 0 0 10px #ff323288; }

.containers-screen, .container-opening-screen { min-height: calc(100vh - 132px); padding: 34px clamp(24px, 5vw, 86px); color: #dceaf2; }
.containers-heading p, .container-opening-screen > header p { margin: 0; color: #54dcff; font-size: 11px; letter-spacing: .2em; }
.containers-heading h1, .container-opening-screen > header h1 { margin: 7px 0; font-size: clamp(28px, 3vw, 48px); letter-spacing: .08em; }
.containers-heading span { color: #78909e; }
.container-family-grid { margin-top: 34px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.container-family { position: relative; min-height: 480px; padding: 28px; display: flex; flex-direction: column; border: 1px solid #456276; background: linear-gradient(160deg, #0d1b25ee, #050a0fee); clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); box-shadow: inset 0 0 45px #000; }
.container-blue { --container-accent: #35bfff; }.container-violet { --container-accent: #bd54ff; }.container-gold { --container-accent: #ffca4f; }
.container-family { border-color: var(--container-accent); box-shadow: inset 0 0 45px #000, 0 0 24px color-mix(in srgb, var(--container-accent) 25%, transparent); }
.container-core { height: 210px; display: grid; place-items: center; position: relative; }
.container-core i { position: absolute; width: 150px; height: 180px; border: 3px solid var(--container-accent); clip-path: polygon(20% 0, 80% 0, 100% 18%, 92% 88%, 70% 100%, 30% 100%, 8% 88%, 0 18%); background: radial-gradient(circle, color-mix(in srgb, var(--container-accent) 40%, transparent), #071019 62%); box-shadow: 0 0 30px var(--container-accent), inset 0 0 25px #000; }
.container-core b { z-index: 1; color: var(--container-accent); letter-spacing: .15em; }
.container-family header small { color: var(--container-accent); }.container-family h2 { margin: 4px 0 16px; font-size: 21px; }
.container-family dl { margin: 0; display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }.container-family dl div { padding: 9px; border: 1px solid #294250; }.container-family dt { color: #718c9b; font-size: 9px; }.container-family dd { margin: 3px 0 0; font-weight: 800; }
.container-family p { flex: 1; color: #91a6b1; font-size: 12px; }.container-open-action { min-height: 46px; border: 1px solid var(--container-accent); background: #07131c; color: var(--container-accent); font-weight: 900; letter-spacing: .12em; }
.container-opening-screen > header { text-align: center; }.container-result-cards { margin: 40px auto; display: flex; justify-content: center; align-items: stretch; gap: 16px; flex-wrap: wrap; }
.container-result-card { width: min(210px, 18vw); min-width: 150px; padding: 10px; border: 1px solid #69808d; background: #060c12; box-shadow: 0 14px 30px #000a; }.container-result-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }.container-result-card h2 { margin: 5px 0; font-size: 15px; }.container-result-card small { color: #6bdfff; }.container-result-card strong { color: #66ffb2; font-size: 10px; }
.container-result-card.rarity-epic { border-color: #c252ff; }.container-result-card.rarity-legendary { border-color: #ffc642; }.container-result-actions { display: flex; justify-content: center; gap: 14px; }
.container-card-dossier { width: 100%; min-height: 34px; margin-top: 9px; border: 1px solid #42d9ff; background: #07151d; color: #8feaff; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
@media (max-width: 900px) { .container-family-grid { grid-template-columns: 1fr; }.container-family { min-height: 400px; }.container-result-card { width: 42vw; } }
.battle-action-error {
  position: relative;
  z-index: 16;
  margin: 8px auto 0;
  max-width: min(560px, 90%);
  padding: 10px 16px;
  border: 1px solid #f8a35d;
  background: #2a1d18;
  color: #ffd7ad;
  font-size: 12px;
  text-align: center;
  letter-spacing: .04em;
}
.battle-waiting-banner {
  position: absolute;
  left: 50%;
  bottom: 2px;
  z-index: 15;
  min-width: min(620px, 72vw);
  padding: 9px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  transform: translateX(-50%);
  border: 1px solid #49dfff;
  border-radius: 10px;
  background: #06141ded;
  box-shadow: 0 12px 30px #000b, inset 0 0 20px #16cfff20;
  color: #a9c4cf;
  white-space: nowrap;
}
.battle-waiting-banner strong { color: #58e3ff; font-size: 12px; letter-spacing: .1em; }
.battle-waiting-banner span { font-size: 10px; letter-spacing: .08em; }
.battle-reveal-trigger {
  min-height: 30px;
  padding: 5px 13px;
  border: 1px solid #4ce3ff;
  border-radius: 6px;
  background: #0a2632;
  color: #c9f7ff;
  font-size: 9px;
  letter-spacing: .08em;
}
.battle-focus-locked .battle-decision { border-color: #49dfff9e; }
.battle-focus-locked .battle-turn-frame {
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--rarity-main) 48%, transparent));
}
.battle-focus-locked .battle-decision > p { color: #58e3ff; }
.battle-focus-locked button:disabled { opacity: .55; cursor: default; }
.battle-screen.locked .battle-deployed-card,
.battle-screen.locked .battle-decision { animation: none; }

.battle-reveal {
  width: min(880px, 78vw);
  height: 100%;
  display: grid;
  grid-template-columns: 240px minmax(260px, 1fr) 240px;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.battle-reveal-card { width: 240px; height: 320px; }
.battle-reveal-card .battle-card { width: 100%; height: 100%; }
.battle-reveal-card .battle-card-shell {
  padding: 8px;
  grid-template-rows: 24px minmax(0, 1fr) 40px 34px 34px;
  gap: 5px;
}
.battle-reveal-card .battle-card-rarity { padding: 0 9px; }
.battle-reveal-card .battle-card-rarity small { font-size: 10px; }
.battle-reveal-card .battle-card-title { padding: 3px 6px; }
.battle-reveal-card .battle-card-title small { font-size: 8px; }
.battle-reveal-card .battle-card-title strong { font-size: 15px; }
.battle-reveal-card .battle-card-stats em { padding: 4px 7px; }
.battle-reveal-card .battle-card-stats em small { font-size: 7px; }
.battle-reveal-card .battle-card-stats em b { font-size: 17px; }
.battle-reveal-card .battle-card-abilities span { padding: 4px 6px; }
.battle-reveal-card .battle-card-abilities small { font-size: 6px; }
.battle-reveal-card .battle-card-abilities b { font-size: 7px; }
.player-reveal-card { filter: drop-shadow(0 0 16px #36dbff66); }
.opponent-reveal-card { filter: drop-shadow(0 0 16px #ff4d5966); }
.battle-reveal-stack {
  min-width: 0;
  padding: 14px;
  display: grid;
  gap: 10px;
  border: 1px solid #426674;
  border-radius: 14px;
  background: #061017e8;
  box-shadow: 0 18px 42px #000b, inset 0 0 28px #061923;
  text-align: center;
}
.battle-reveal-stack > small { color: #9bb2bd; font-size: 8px; letter-spacing: .16em; }
.battle-reveal-steps { display: grid; gap: 6px; }
.battle-reveal-steps div {
  min-width: 0;
  padding: 7px 8px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  border: 1px solid #294b59;
  border-radius: 7px;
  background: #07151ccb;
  color: #c8dce4;
  font-size: 9px;
  text-align: left;
}
.battle-reveal-steps i {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid #4bdcff;
  border-radius: 50%;
  color: #5fe4ff;
  font-size: 8px;
  font-style: normal;
}
.battle-reveal-score {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}
.battle-reveal-score b { font-size: 30px; line-height: 1; }
.battle-reveal-score b:first-child { color: var(--blue); text-shadow: 0 0 15px #42d9ff; }
.battle-reveal-score b:last-child { color: var(--red); text-shadow: 0 0 15px #ff4d59; }
.battle-reveal-score span { color: #9fb4bd; font-size: 14px; }
.battle-reveal-stack > strong { color: var(--blue); font-size: 14px; letter-spacing: .1em; }
.battle-tutorial-guide {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 50%;
  width: min(560px, 90%);
  margin: 0;
  padding: 8px 12px;
  transform: translateX(-50%);
  border: 1px solid #4cbdd8;
  background: #06151ce8;
  color: #d7f5ff;
  font-size: 11px;
  text-align: center;
}
.battle-tutorial-review {
  width: min(620px, 92%);
  max-height: 100%;
  overflow: auto;
  padding: 18px;
  display: grid;
  gap: 12px;
  border: 1px solid #4cbdd8;
  background: #061017f0;
  box-shadow: 0 12px 40px #0009;
  color: #e2f5fa;
}
.battle-tutorial-review h2 { margin: 0; font-size: 16px; letter-spacing: .12em; }
.battle-combat-cue { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid #3b91b6; color: #eafaff; background: #0c2838; letter-spacing: .12em; }
.battle-combat-cue strong { font-size: 12px; }
.battle-combat-cue small { color: #85c9e0; font-size: 10px; }
.battle-combat-cue-damage, .battle-combat-cue-outcome { border-color: #f8a35d; background: #2a1d18; }
.battle-review-cards { display: flex; justify-content: center; gap: clamp(12px, 5vw, 44px); }
.battle-review-cards span { width: min(125px, 35%); display: grid; gap: 5px; text-align: center; }
.battle-review-cards img { width: 100%; height: 115px; object-fit: cover; border: 1px solid #4a869e; }
.battle-review-cards strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.battle-review-stakes { display: flex; justify-content: center; gap: 20px; color: #a8e6f4; font-size: 11px; }
.battle-review-damage { justify-self: center; color: #ffc27e; font-size: 18px; }
.battle-tutorial-review .battle-reveal-score { max-width: 260px; width: 100%; margin: auto; }
.battle-tutorial-review button { justify-self: center; min-width: 180px; }
.battle-topline .battle-top-actions { min-width: 0; justify-self: end; display: flex; align-items: center; gap: 6px; }
.battle-help-button { min-height: 28px; padding: 3px 7px; border: 1px solid #357189; background: #07151ddc; color: #a8e6f4; font-size: 9px; white-space: nowrap; }
.battle-help-popover { position: absolute; z-index: 30; top: 52px; right: 20px; width: min(420px, calc(100% - 40px)); padding: 18px; border: 1px solid #4cbdd8; background: #061017f5; box-shadow: 0 18px 45px #000b; color: #e2f5fa; }
.battle-help-popover h2 { margin: 0 0 8px; font-size: 15px; }
.battle-help-popover p { margin: 0 0 14px; color: #b8d3dd; line-height: 1.5; }

@media (min-width: 1180px) and (max-width: 1320px) and (min-height: 680px) {
  .battle-screen { --battle-hud-width: 270px; }
  .battle-hud { grid-template-columns: 80px minmax(0, 1fr); }
  .battle-avatar { width: 80px; }
}

/* Authored rarity frames: original HTML/CSS lives in an isolated shadow layer. */
.battle-card-shell,
.battle-card-shell.compact {
  position: relative;
  display: block;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.battle-card-content {
  position: relative;
  inset: auto;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 2px;
  display: grid;
  grid-template-rows: 14px minmax(0, 1fr) 25px 23px 23px;
  gap: 2px;
  overflow: hidden;
  border-radius: 4px;
  background: linear-gradient(155deg, #111c25, #050a0f 74%);
  box-shadow: inset 0 0 0 1px #263c48, inset 0 0 22px #000;
}

.rarity-common .battle-card-content,
.rarity-rare .battle-card-content,
.rarity-epic .battle-card-content,
.rarity-legendary .battle-card-content { inset: auto; }

.battle-card-content .battle-card-rarity,
.battle-card-content .battle-card-art,
.battle-card-content .battle-card-title,
.battle-card-content .battle-card-stats,
.battle-card-content .battle-card-abilities {
  position: static;
  min-width: 0;
  min-height: 0;
  margin: 0;
}

.battle-card-content .battle-card-rarity { grid-row: 1; padding: 0 5px; }
.battle-card-content .battle-card-rarity small { font-size: 7px; }
.battle-card-content .battle-card-art { grid-row: 2; border-radius: 2px; }
.battle-card-content .battle-card-title { grid-row: 3; padding: 2px 3px; }
.battle-card-content .battle-card-title small { font-size: 6px; }
.battle-card-content .battle-card-title strong { font-size: 10px; }
.battle-card-content .battle-card-stats { grid-row: 4; padding: 0; gap: 4px; }
.battle-card-content .battle-card-abilities { grid-row: 5; padding: 0; gap: 4px; }
.battle-card-content .battle-card-stats em,
.battle-card-content .battle-card-abilities span { padding: 2px 4px; }
.battle-card-content .battle-card-stats em small { font-size: 5px; }
.battle-card-content .battle-card-stats em b { font-size: 12px; }
.battle-card-content .battle-card-abilities small { font-size: 4px; }
.battle-card-content .battle-card-abilities b { font-size: 5px; }

.battle-deployed-card .battle-card-content {
  padding: 5px;
  grid-template-rows: 24px minmax(0, 1fr) 48px 38px 38px;
  gap: 5px;
}
.battle-deployed-card .battle-card-content .battle-card-rarity { padding: 0 9px; }
.battle-deployed-card .battle-card-content .battle-card-rarity small { font-size: 11px; }
.battle-deployed-card .battle-card-content .battle-card-title { padding: 3px 6px; }
.battle-deployed-card .battle-card-content .battle-card-title small { font-size: 9px; }
.battle-deployed-card .battle-card-content .battle-card-title strong { font-size: 18px; }
.battle-deployed-card .battle-card-content .battle-card-stats em,
.battle-deployed-card .battle-card-content .battle-card-abilities span { padding: 5px 8px; }
.battle-deployed-card .battle-card-content .battle-card-stats em small { font-size: 8px; }
.battle-deployed-card .battle-card-content .battle-card-stats em b { font-size: 21px; }
.battle-deployed-card .battle-card-content .battle-card-abilities small { font-size: 7px; }
.battle-deployed-card .battle-card-content .battle-card-abilities b { font-size: 8px; }

.battle-reveal-card .battle-card-content {
  grid-template-rows: 20px minmax(0, 1fr) 36px 30px 30px;
  gap: 4px;
}

@media (min-width: 1180px) and (min-height: 680px) {
  .battle-screen {
    --battle-band-height: 246px;
  }

  .opponent-hand .battle-card,
  .player-hand .battle-card,
  .player-hand .battle-card-space {
    width: 164px;
    height: 246px;
  }
}

@media (min-width: 1180px) and (max-width: 1320px) and (min-height: 680px) and (max-height: 799px) {
  .opponent-hand {
    transform: scale(var(--battle-scene-scale));
    transform-origin: top left;
  }

  .player-hand {
    transform: scale(var(--battle-scene-scale));
    transform-origin: bottom right;
  }
}

/* S18 / S19R functional layer. Values come from the finished match and reward receipt. */
.match-result-screen,
.match-reward-screen {
  min-height: 100vh;
  padding: clamp(18px, 3vw, 46px);
  display: grid;
  place-items: center;
  color: #edfaff;
  background:
    linear-gradient(180deg, rgba(2, 8, 14, .32), rgba(2, 8, 14, .78)),
    url('/app/client/assets/production/battle-vardem-arena-1680x941.png') center / cover fixed;
}

.result-panel,
.reward-panel {
  width: min(1180px, 100%);
  padding: clamp(22px, 3vw, 42px);
  border: 1px solid rgba(84, 225, 255, .5);
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
  background: linear-gradient(145deg, rgba(8, 23, 31, .94), rgba(2, 8, 14, .92));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .62), inset 0 0 42px rgba(33, 201, 238, .06);
  text-align: center;
}

.result-kicker { margin: 0; color: #72eaff; font-size: 11px; letter-spacing: .32em; font-weight: 800; }
.result-panel > h1, .reward-panel > h1 { margin: 8px 0 20px; font-size: clamp(32px, 5vw, 70px); letter-spacing: .08em; }
.outcome-defeat .result-panel { border-color: rgba(255, 94, 94, .56); }
.outcome-draw .result-panel, .outcome-technical .result-panel { border-color: rgba(231, 192, 103, .58); }
.result-technical, .reward-suppressed { color: #ffc77a; }

.result-health { display: grid; grid-template-columns: 1fr 80px 1fr; align-items: center; max-width: 720px; margin: 0 auto 22px; }
.result-health span { display: grid; gap: 4px; }
.result-health small { color: #8ba9b4; letter-spacing: .16em; }
.result-health b { font-size: clamp(22px, 3vw, 38px); }
.result-health i { height: 1px; background: linear-gradient(90deg, transparent, #60e9ff, transparent); }
.result-panel > h2 { color: #9fc1cb; font-size: 12px; letter-spacing: .22em; }

.result-rounds { display: grid; gap: 10px; margin: 16px 0 24px; }
.result-round { display: grid; grid-template-columns: 1fr 80px 1fr; gap: 14px; align-items: center; padding: 12px; border: 1px solid rgba(124, 170, 184, .24); background: rgba(3, 11, 17, .72); }
.result-round > header { grid-column: 1 / -1; display: flex; justify-content: space-between; color: #9fbac4; font-size: 10px; letter-spacing: .12em; }
.result-round-side { display: grid; grid-template-columns: 62px 1fr; gap: 12px; align-items: center; text-align: left; }
.result-round-side.opponent { grid-template-columns: 1fr 62px; text-align: right; }
.result-round-side.opponent .result-card { grid-column: 2; grid-row: 1; }
.result-round-side.opponent dl { grid-column: 1; grid-row: 1; }
.result-side-label { grid-column: 1 / -1; color: #6fdff4; font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.result-round-side.opponent .result-side-label { text-align: right; }
.result-card { overflow: hidden; border: 1px solid #657b83; background: #071015; }
.result-card img { width: 100%; aspect-ratio: 3 / 2; display: block; object-fit: cover; }
.result-card div { display: grid; padding: 4px 6px; }
.result-card small { color: #6ccfe5; font-size: 7px; }
.result-card strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.result-card.rarity-rare { border-color: #28b9ff; }.result-card.rarity-epic { border-color: #c756ff; }.result-card.rarity-legendary { border-color: #ffcb43; }
.result-round dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; }
.result-round dl div { padding: 7px; border-bottom: 1px solid rgba(83, 216, 244, .28); }
.result-round dt { color: #708f9a; font-size: 7px; }.result-round dd { margin: 3px 0 0; font-size: 15px; font-weight: 800; }
.result-versus { display: grid; gap: 5px; }.result-versus b { color: #6eeaff; font-size: 18px; }.result-versus span { color: #ff9b72; font-size: 9px; }
.result-primary { min-width: min(360px, 100%); padding: 14px 24px; border: 1px solid #4ce8ff; color: #eaffff; background: linear-gradient(180deg, #123240, #07151d); font-weight: 900; letter-spacing: .08em; }
.result-primary:hover { box-shadow: 0 0 22px rgba(76, 232, 255, .28); }

.reward-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); justify-content: center; gap: 14px; margin: 24px 0; }
.reward-totals article { padding: 18px; border: 1px solid rgba(82, 225, 255, .34); background: rgba(4, 18, 25, .8); }
.reward-totals small { display: block; color: #86a8b3; letter-spacing: .12em; }.reward-totals b { color: #65eeff; font-size: 30px; }
.reward-cards { display: grid; grid-template-columns: repeat(4, minmax(130px, 190px)); justify-content: center; gap: 16px; margin: 22px 0 28px; }
.reward-card { padding: 8px; border: 1px solid rgba(106, 176, 194, .25); background: rgba(3, 11, 17, .7); }
.reward-card p { color: #9fb9c2; font-size: 10px; line-height: 1.8; }.reward-card p b { color: #75edff; }

@media (max-width: 767px) {
  .match-result-screen, .match-reward-screen { align-items: start; padding: 10px; }
  .result-panel, .reward-panel { padding: 18px 12px; }
  .result-health { grid-template-columns: 1fr 34px 1fr; }
  .result-round { grid-template-columns: 1fr; }
  .result-round-side, .result-round-side.opponent { grid-template-columns: 86px 1fr; text-align: left; padding: 9px; border: 1px solid rgba(96, 207, 231, .18); background: rgba(5, 18, 25, .58); }
  .result-round-side.opponent { border-color: rgba(255, 105, 105, .24); }
  .result-round-side.opponent .result-card { grid-column: 1; grid-row: 2; }.result-round-side.opponent dl { grid-column: 2; grid-row: 2; }
  .result-side-label, .result-round-side.opponent .result-side-label { grid-row: 1; text-align: left; font-size: 9px; }
  .result-versus { grid-row: auto; }
  .reward-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Approved rarity frames now own every card surface in the collection. */
.archive-featured {
  width: min(100%, 390px);
  aspect-ratio: 2 / 3;
  min-height: 0;
  padding: 0;
  display: block;
  position: sticky;
  top: 260px;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}
.archive-featured::before { display: none; }
.archive-featured-content {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 5px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 72px 44px 36px 36px minmax(28px, auto);
  gap: 5px;
  overflow: hidden;
  border-radius: 5px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--faction-accent, #36c8ff) 10%, #0b1e2b), #050b11 65%);
  color: #e8f8ff;
}
.archive-featured-content .archive-card-badge,
.archive-featured-content .archive-card-level { top: 12px; }
.archive-featured-content .archive-card-badge { left: 12px; }
.archive-featured-content .archive-card-level { right: 12px; }

.archive-mini-card {
  min-width: 0;
  aspect-ratio: 2 / 3;
  padding: 0;
  display: block;
  position: relative;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  --mini-frame-light: #eef5fa;
  --mini-frame-mid: #8997a2;
  --mini-frame-dark: #232b32;
  --mini-frame-glow: #dce9f2;
}
.archive-mini-card:hover,
.archive-mini-card.active {
  border: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  opacity: 1;
}
.archive-mini-card.locked { filter: none; opacity: .58; }
.archive-mini-card:hover .archive-mini-frame,
.archive-mini-card.active .archive-mini-frame {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mini-frame-light) 75%, #fff), 0 0 13px color-mix(in srgb, var(--mini-frame-glow) 55%, transparent), inset 0 0 16px #000;
}
.archive-mini-frame-blue { --mini-frame-light:#78e7ff; --mini-frame-mid:#087fba; --mini-frame-dark:#082335; --mini-frame-glow:#00baff; }
.archive-mini-frame-purple { --mini-frame-light:#efadff; --mini-frame-mid:#8b29c7; --mini-frame-dark:#29113b; --mini-frame-glow:#bd42ff; }
.archive-mini-frame-gold { --mini-frame-light:#fff0a7; --mini-frame-mid:#c88a19; --mini-frame-dark:#3b2a0a; --mini-frame-glow:#ffbd35; }
.archive-mini-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  border: 2px solid var(--mini-frame-mid);
  background:
    linear-gradient(135deg, var(--mini-frame-light), transparent 28%) top left / 34px 34px no-repeat,
    linear-gradient(225deg, var(--mini-frame-light), transparent 28%) top right / 34px 34px no-repeat,
    linear-gradient(45deg, var(--mini-frame-light), transparent 28%) bottom left / 34px 34px no-repeat,
    linear-gradient(315deg, var(--mini-frame-light), transparent 28%) bottom right / 34px 34px no-repeat,
    linear-gradient(160deg, color-mix(in srgb, var(--mini-frame-mid) 42%, #151b20), #05080b 48%, color-mix(in srgb, var(--mini-frame-dark) 68%, #020405));
  box-shadow: 0 0 0 1px #020405, 0 0 8px color-mix(in srgb, var(--mini-frame-glow) 34%, transparent), inset 0 0 14px #000;
}
.archive-mini-frame::before {
  content:"";
  position:absolute;
  inset:5px;
  clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px);
  border:1px solid color-mix(in srgb, var(--mini-frame-light) 64%, var(--mini-frame-mid));
  box-shadow:inset 0 0 0 2px #03070a,inset 0 0 9px color-mix(in srgb, var(--mini-frame-glow) 18%, transparent);
}
.archive-mini-frame::after {
  content:"";
  position:absolute;
  inset:3px 14px;
  background:
    linear-gradient(90deg,transparent,var(--mini-frame-light),var(--mini-frame-mid),transparent) top / 62% 2px no-repeat,
    linear-gradient(90deg,transparent,var(--mini-frame-mid),var(--mini-frame-light),transparent) bottom / 62% 2px no-repeat;
  opacity:.88;
}
.archive-mini-frame > i,
.archive-mini-frame > b {
  position:absolute;
  z-index:2;
  width:5px;
  height:30%;
  top:35%;
  background:linear-gradient(180deg,transparent,var(--mini-frame-light),var(--mini-frame-mid),transparent);
  box-shadow:0 0 5px color-mix(in srgb, var(--mini-frame-glow) 55%, transparent);
}
.archive-mini-frame > i { left:3px; }
.archive-mini-frame > b { right:3px; }
.archive-mini-content {
  position: absolute;
  inset: 8px;
  z-index: 1;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 2px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 38px 27px;
  gap: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--faction-accent, #36c8ff) 8%, #0a1822), #050d13);
  color: #b3c5cf;
  text-align: left;
}
.archive-featured-art > img,
.archive-mini-art > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 45%;
}
.archive-featured-art > img { position: absolute; inset: 0; }
.archive-mini-art { overflow: hidden; }
.archive-mini-art > img { position: absolute; inset: 0; }
.archive-mini-card {
  contain: layout style;
}

@media (max-width: 767px) {
  .archive-featured { width: min(100%, 315px); position: static; }
  .archive-mini-content { grid-template-rows: minmax(0, 1fr) 34px 25px; }
}

/* Rarity-reactive authored frames for the turn decision and opponent inspection windows. */
.battle-turn-frame {
  width: 100%;
  height: auto;
  aspect-ratio: 940 / 452;
  min-width: 0;
  align-self: center;
}

.battle-select-frame {
  width: min(690px, 58vw);
  height: auto;
  aspect-ratio: 900 / 264;
  min-width: 0;
}

.battle-select-frame > [slot="select-initiative"],
.battle-select-frame > [slot="select-turn"],
.battle-select-frame > [slot="select-title"],
.battle-select-frame > [slot="select-hint"] { color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }

@media (min-width: 1180px) and (max-width: 1400px) and (min-height: 680px) {
  .battle-screen.focus .battle-turn-frame,
  .battle-screen.locked .battle-turn-frame { transform: translateY(32px); }
  .battle-screen.focus .battle-deployed-card,
  .battle-screen.locked .battle-deployed-card { position: relative; top: -6px; }
}
.battle-turn-frame > [slot="turn-label"] { color: var(--rarity-bright); font-size: 11px; font-weight: 900; letter-spacing: .17em; }
.battle-turn-frame > [slot="title"] { color: #f5fbff; font-size: 24px; font-weight: 850; }
.battle-turn-frame > [slot="link-label"] { color: #8ba4ae; font-size: 11px; }
.battle-turn-frame > [slot="link-state"] { color: #62ffba; font-size: 11px; font-weight: 800; }
.battle-turn-frame > [slot="charge-label"] { color: #77939e; font-size: 10px; letter-spacing: .12em; }
.battle-authored-overclock { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-content: center; gap: 7px 14px; text-align: left; }
.battle-authored-overclock span { color: #bd9a73; font-size: 11px; letter-spacing: .08em; }
.battle-authored-overclock b { color: #d6baa0; font-size: 11px; }
.battle-authored-overclock small { grid-column: 1 / -1; color: #a48262; font-size: 10px; line-height: 1.35; }
.battle-authored-overclock.active span,
.battle-authored-overclock.active b { color: #ffd08c; text-shadow: 0 0 8px #ffb24d55; }
.battle-authored-stat { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.battle-authored-stat small { color: #6f8b96; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.battle-authored-stat b { color: #f5fbff; font-size: 23px; line-height: 1; }
.battle-turn-frame > [slot="return"],
.battle-turn-frame > [slot="commit"] { color: #c3d8df; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.battle-turn-frame > [slot="commit"] { color: var(--rarity-bright); }

.battle-inspector-frame {
  width: min(850px, calc(100% - 56px));
  height: min(520px, calc(100% - 54px));
  min-height: 390px;
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.battle-inspector-card {
  width: 100%;
  height: 100%;
  min-height: 0;
}
.battle-inspector-card .battle-card,
.battle-inspector-card .battle-card-shell { width: 100%; height: 100%; }
.battle-inspector-card .battle-card { pointer-events: none; }
.battle-inspector-header { padding: 10px 16px; display: grid; align-content: center; gap: 3px; }
.battle-inspector-header small { color: var(--rarity-main); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.battle-inspector-header h2 { margin: 0; overflow: hidden; color: #fff; font-size: 22px; text-overflow: ellipsis; white-space: nowrap; }
.battle-inspector-slot { padding: 0 14px; color: #eafaff; }
.battle-inspector-slot small { color: #91a8b1; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.battle-inspector-slot b { max-width: 68%; overflow: hidden; color: #f4fbff; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.battle-inspector-slot[slot^="inspect-stat"] b { color: var(--rarity-bright); font-size: 22px; }
.battle-inspector-description { padding: 12px 14px; overflow: auto; color: #b6c8d0; font-size: 11px; line-height: 1.45; }
.battle-inspector-close {
  color: var(--rarity-bright);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .battle-turn-frame,
  .battle-select-frame { height: auto; }
  .battle-inspector-frame {
    width: calc(100% - 12px);
    height: calc(100% - 16px);
    min-height: 0;
  }
}

/* One compact coordinate mode for short desktop windows. Every large battle
   surface scales by the same factor, so resizing cannot make them converge. */
@media (min-width: 1180px) and (min-height: 680px) and (max-height: 799px) {
  .battle-screen { --battle-scene-scale: .78; }

  .battle-hud.opponent {
    transform: scale(var(--battle-scene-scale));
    transform-origin: top right;
  }

  .battle-hud.player {
    transform: scale(var(--battle-scene-scale));
    transform-origin: bottom left;
  }

  .opponent-hand {
    transform: translateX(-50%) scale(var(--battle-scene-scale));
    transform-origin: top center;
  }

  .player-hand {
    transform: translateX(-50%) scale(var(--battle-scene-scale));
    transform-origin: bottom center;
  }

  .battle-screen.focus .battle-focus,
  .battle-screen.locked .battle-focus,
  .battle-screen.reveal .battle-reveal {
    transform: scale(var(--battle-scene-scale));
    transform-origin: center;
  }

  .battle-select-frame {
    transform: scale(var(--battle-scene-scale));
    transform-origin: center;
  }

  .battle-seal {
    top: 254px;
    height: 20px;
  }
}

@media (max-width: 767px) {
  .battle-card-content {
    padding: 1px;
    grid-template-rows: 9px minmax(0, 1fr) 16px 15px 15px;
    gap: 1px;
  }
  .battle-card-content .battle-card-rarity { padding: 0 2px; }
  .battle-card-content .battle-card-rarity small { font-size: 4px; }
  .battle-card-content .battle-card-title { padding: 1px 2px; }
  .battle-card-content .battle-card-title small { font-size: 3px; }
  .battle-card-content .battle-card-title strong { font-size: 6px; }
  .battle-card-content .battle-card-stats,
  .battle-card-content .battle-card-abilities { gap: 2px; }
  .battle-card-content .battle-card-stats em,
  .battle-card-content .battle-card-abilities span { padding: 1px 2px; }
  .battle-card-content .battle-card-stats em small,
  .battle-card-content .battle-card-abilities small,
  .battle-card-content .battle-card-abilities b { font-size: 3px; }
  .battle-card-content .battle-card-stats em b { font-size: 8px; }
}

/* Final authored HUD ownership. Keep all legacy layout rules from painting over the supplied frames. */

.profile-service-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.profile-service-button,
.service-screen button,
.service-screen select {
  min-height: 44px;
  border: 1px solid #2b8197;
  background: linear-gradient(180deg, #112b34, #071318);
  color: #e9fbff;
  font: inherit;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.service-screen {
  width: min(1120px, calc(100% - 40px));
  margin: 32px auto 80px;
  color: #eafaff;
}

.service-screen > header { margin-bottom: 22px; }
.service-screen > header p { color: #62eaff; letter-spacing: .2em; font-size: 12px; }
.service-screen > header h1 { margin: 4px 0; font-size: clamp(28px, 4vw, 54px); }
.service-panel,
.history-entry,
.support-grid article,
.version-panel,
.details-summary,
.details-rounds article,
.service-empty {
  border: 1px solid #245a68;
  background: rgba(3, 15, 20, .92);
  box-shadow: inset 0 0 28px rgba(39, 207, 235, .06);
}
.settings-panel { max-width: 760px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 22px; border-bottom: 1px solid #173d47; }
.setting-row:last-child { border-bottom: 0; }
.setting-row input { width: 24px; height: 24px; accent-color: #35e5ff; }
.setting-row select { min-width: 180px; padding: 0 14px; }
.history-list, .details-rounds { display: grid; gap: 12px; }
.history-entry { display: grid; grid-template-columns: 1fr 1fr auto; gap: 20px; align-items: center; padding: 18px; border-left: 4px solid #4ee9ff; }
.history-entry.outcome-defeat { border-left-color: #ff5262; }
.history-entry.outcome-victory { border-left-color: #45ffaf; }
.history-entry > div { display: grid; gap: 4px; }
.history-entry > div strong { font-size: 22px; }
.history-entry dl { display: flex; gap: 28px; margin: 0; }
.history-entry dl div { display: grid; gap: 3px; }
.history-entry dt { color: #7598a1; font-size: 11px; text-transform: uppercase; }
.history-entry dd { margin: 0; }
.support-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.support-grid article, .version-panel { padding: 20px; }
.support-grid h2, .version-panel h2 { margin-top: 0; }
.support-grid p { color: #a9c1c7; line-height: 1.55; }
.version-panel { margin-top: 14px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.version-panel h2 { width: 100%; }
.version-panel span { display: grid; gap: 3px; }
.version-panel small { color: #71919a; }
.details-summary { display: flex; justify-content: space-between; padding: 18px; margin-bottom: 14px; }
.details-rounds article { padding: 18px; }
.details-rounds article > header, .details-rounds article > footer { display: flex; justify-content: space-between; }
.details-sides { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; margin: 18px 0; }
.details-sides > div { display: grid; gap: 6px; padding: 12px; background: #08181e; }
.details-sides > div:last-child { text-align: right; }
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
.organization-connection { padding: 22px; margin-bottom: 16px; border: 1px solid #976d2d; background: linear-gradient(110deg, rgba(58, 38, 9, .78), rgba(5, 17, 22, .95)); }
.organization-connection small { color: #f0ba62; letter-spacing: .14em; }
.organization-connection h2 { margin: 7px 0; }
.organization-connection p { max-width: 820px; color: #c7b99f; line-height: 1.5; }
.organization-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.organization-block { min-height: 180px; padding: 22px; display: flex; flex-direction: column; border: 1px solid #245a68; background: linear-gradient(145deg, rgba(9, 31, 39, .95), rgba(2, 10, 14, .97)); }
.organization-block small { color: #6f949e; }
.organization-block h2 { margin: 12px 0; font-size: 24px; }
.organization-block strong { margin-top: auto; color: #55dff8; text-transform: uppercase; letter-spacing: .08em; }
.rating-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rating-metric { min-height: 116px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #245a68; background: rgba(3, 17, 23, .94); }
.rating-metric strong { font-size: clamp(24px, 4vw, 42px); color: #69e8ff; }
.rating-position, .rating-division { opacity: .7; }
.rating-position strong, .rating-division strong { font-size: 18px; }
.rating-unavailable { color: #7898a1; font-size: 12px; }
.rating-lower { display: grid; grid-template-columns: 1.35fr .65fr; gap: 14px; margin-top: 24px; }
.rating-lower > section, .rating-lower > aside { padding: 20px; border: 1px solid #245a68; background: rgba(3, 17, 23, .94); }
.rating-lower h2 { margin-top: 0; }
.rating-history { display: grid; gap: 8px; }
.rating-history article { padding: 12px; display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 12px; align-items: center; border-left: 3px solid #42e9ff; background: #07171d; }
.rating-history article button { white-space: nowrap; }
.rating-history article.outcome-victory { border-left-color: #45ffaf; }
.rating-history article.outcome-defeat { border-left-color: #ff5262; }
.rating-lower ol { padding-left: 22px; color: #a9c1c7; line-height: 1.55; }
.pve-chapters { display: grid; gap: 18px; }
.pve-chapter { min-height: 420px; padding: 24px; border: 1px solid #3e6047; background: radial-gradient(circle at 75% 35%, rgba(71, 116, 65, .25), transparent 38%), rgba(3, 16, 16, .95); }
.pve-chapter > header small { color: #9ebc6a; letter-spacing: .14em; }
.pve-chapter > header h2 { font-size: 30px; }
.pve-node { width: min(620px, 100%); margin: 80px auto 0; padding: 22px; display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: center; border: 1px solid #6f8f51; background: #091814; }
.pve-node > i { width: 38px; height: 38px; border: 2px solid #9acb66; transform: rotate(45deg); box-shadow: 0 0 18px rgba(151, 221, 97, .35); }
.pve-node h3 { margin: 5px 0 0; font-size: 24px; }
.pve-node small { color: #8ca477; }
.pve-briefing-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 14px; }
.pve-deck, .pve-facts article { padding: 22px; border: 1px solid #365d50; background: rgba(4, 20, 20, .95); }
.pve-deck { min-height: 260px; display: flex; flex-direction: column; }
.pve-deck h2 { font-size: 30px; }
.pve-deck strong { margin-top: auto; color: #83e6b2; }
.pve-facts { display: grid; gap: 10px; }
.pve-facts article { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.pve-facts strong { color: #9bb0aa; text-transform: uppercase; }
.pve-warning { padding: 16px; border-left: 3px solid #d89a43; background: rgba(55, 34, 7, .55); color: #e1c28d; }
.pve-actions { display: flex; justify-content: flex-end; gap: 12px; }
.archive-dossier-button { width: 100%; min-height: 42px; margin-top: 8px; border: 1px solid var(--faction-accent); background: #06151b; color: #e9fbff; text-transform: uppercase; letter-spacing: .1em; }
.card-detail-layout { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(420px, 1.28fr); gap: 18px; }
.card-detail-art { min-height: 540px; position: relative; overflow: hidden; border: 2px solid var(--card-accent); background: #030b0f; box-shadow: 0 0 30px color-mix(in srgb, var(--card-accent) 25%, transparent); }
.card-detail-art img { width: 100%; height: 100%; object-fit: cover; }
.card-detail-art > div { position: absolute; inset: auto 0 0; padding: 22px; background: linear-gradient(transparent, rgba(1, 7, 10, .98) 38%); }
.card-detail-art h2 { margin: 6px 0 0; font-size: 28px; }
.card-detail-data { padding: 22px; border: 1px solid #245a68; background: rgba(3, 16, 21, .96); }
.card-detail-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.card-detail-stats article, .card-detail-abilities article { padding: 16px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #234d58; background: #07171c; }
.card-detail-stats strong { color: var(--card-accent); font-size: 30px; }
.card-detail-data > p { min-height: 100px; padding: 20px 0; color: #b4c9ce; line-height: 1.6; }
.card-detail-abilities { display: grid; gap: 10px; }
.card-detail-abilities strong { color: #61e8ba; }
.card-detail-ownership { display: flex; gap: 18px; justify-content: space-between; margin-top: 16px; padding-top: 16px; border-top: 1px solid #21444d; }
.card-evolution { margin-top: 16px; padding: 20px; border: 1px solid #245a68; background: rgba(3, 16, 21, .96); }
.card-evolution > header { display: flex; justify-content: space-between; align-items: center; }
.card-evolution > header h2 { margin: 0; }
.card-evolution > header strong { color: #f0b65b; }
.card-evolution > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.card-evolution article { padding: 14px; display: flex; justify-content: space-between; border: 1px solid #3a4a4d; }
.card-evolution article.ready { border-color: #42d99a; color: #65efb1; }
.card-detail-unavailable { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.card-detail-unavailable article { padding: 18px; border: 1px dashed #35545d; color: #829aa0; }
.card-detail-unavailable h2 { margin-top: 0; color: #b8cbd0; }
.app[data-route="BOOT"], .app[data-route="CONNECT"], .app[data-route="ONBOARDING_STORY"], .app[data-route="STARTER_GRANT"] { grid-template: 1fr / 1fr; background: radial-gradient(circle at 50% 20%, #123047, #03070c 68%); }
.app[data-route="BOOT"] > main, .app[data-route="CONNECT"] > main, .app[data-route="ONBOARDING_STORY"] > main, .app[data-route="STARTER_GRANT"] > main { grid-column: 1; grid-row: 1; padding: 0; }
.app[data-route="BOOT"] { min-height: 100vh; overflow: hidden; background: #02080d; }
.app[data-route="BOOT"] > main { min-width: 0; min-height: 0; overflow: hidden; }
.boot-screen { position: relative; width: 100%; height: 100vh; min-height: 620px; overflow: hidden; color: #effbff; isolation: isolate; }
.boot-background { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.boot-shade { position: absolute; z-index: -2; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,7,12,.68) 0%, rgba(0,11,18,.32) 36%, rgba(0,9,15,.18) 68%, rgba(0,5,9,.4) 100%), linear-gradient(180deg, rgba(0,5,10,.38), transparent 30%, transparent 76%, rgba(0,4,8,.52)); }
.boot-layout { width: min(1300px, calc(100% - 64px)); height: 100%; margin: 0 auto; position: relative; display: grid; grid-template-rows: clamp(76px, 11vh, 112px) auto clamp(42px, 10vh, 104px) auto auto; }
.boot-brand { position: absolute; top: clamp(22px, 3.6vh, 38px); left: 0; height: clamp(30px, 4.7vh, 48px); display: flex; align-items: center; pointer-events: none; filter: drop-shadow(0 0 8px rgba(34,218,255,.28)); }
.boot-brand img { display: block; object-fit: contain; }
.boot-brand img:nth-child(1), .boot-brand img:nth-child(2) { width: auto; height: 100%; }
.boot-brand img:nth-child(2) { margin-left: -1px; }
.boot-brand img:nth-child(3) { width: auto; height: 82%; margin-left: 14px; }
.boot-heading { grid-row: 2; width: min(650px, 62vw); margin-top: clamp(34px, 7vh, 76px); align-self: start; }
.boot-heading h1 { margin: 9px 0 8px; font-size: clamp(42px, 5.3vw, 74px); line-height: .96; letter-spacing: -.035em; text-shadow: 0 3px 18px rgba(0,0,0,.85), 0 0 22px rgba(61,204,255,.18); }
.boot-heading p { margin: 13px 0 0; color: #c6dce6; font-size: clamp(14px, 1.25vw, 18px); line-height: 1.3; text-shadow: 0 2px 7px #000; }
.boot-heading-rail { width: 88%; height: 10px; border-top: 2px solid #2ce5ff; clip-path: polygon(0 0, 14% 0, 16% 70%, 75% 70%, 77% 0, 100% 0, 100% 30%, 77% 30%, 75% 100%, 15% 100%, 13% 30%, 0 30%); background: linear-gradient(90deg, #25e7ff, rgba(37,231,255,.12)); filter: drop-shadow(0 0 5px rgba(36,226,255,.65)); }
.boot-heading-rail-bottom { width: 94%; margin-top: 2px; transform: scaleY(-1); }
.boot-checks { grid-row: 4; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1vw, 16px); align-items: center; }
.boot-checks .boot-check { aspect-ratio: 1.44 / 1; min-width: 0; min-height: 0; padding: 0; position: relative; display: block; overflow: hidden; border: 0; background: none; isolation: isolate; filter: drop-shadow(0 10px 16px rgba(0,0,0,.62)); }
.boot-check-frame { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; } /* 08.10.2026: decorative frame invisible to the mouse -> no Yandex Browser image-search button (same as .boot-registration-frame) */
.boot-check-shade { position: absolute; z-index: 1; left: 5.6%; right: 4.8%; top: 11%; bottom: 10%; background: linear-gradient(90deg, rgba(0,9,15,.9), rgba(0,12,19,.7) 62%, rgba(0,8,13,.84)), linear-gradient(180deg, rgba(0,7,12,.38), rgba(0,8,13,.88)); clip-path: polygon(1.5% 0,98.5% 0,100% 8%,100% 92%,98.5% 100%,1.5% 100%,0 92%,0 8%); }
.boot-check-content { position: absolute; z-index: 2; left: 8%; right: 9%; top: 18%; bottom: 19.5%; display: grid; grid-template-rows: 62% 38%; overflow: hidden; pointer-events: none; }
.boot-check-main { min-height: 0; display: grid; grid-template-columns: 27% minmax(0,1fr); column-gap: 3%; align-items: center; }
.boot-check-icon { width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; }
.boot-check-icon img { display: block; width: 70%; height: 70%; object-fit: contain; transform: translateX(-17%); filter: drop-shadow(0 0 7px rgba(32,214,255,.35)); }
.boot-check-copy { min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.boot-check-copy small, .boot-check-copy strong { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boot-check-copy small { color: #c1d9e2; font-size: clamp(10px, .72vw, 13px); line-height: 1.15; letter-spacing: .02em; }
.boot-check-copy strong { margin-top: 7px; color: #f6fcff; font-size: clamp(14px, 1vw, 19px); line-height: 1.08; text-shadow: 0 1px 4px rgba(0,0,0,.9); }
.boot-check-ready { min-height: 0; display: grid; grid-template-columns: 22% minmax(0,1fr); column-gap: 2%; align-items: center; }
.boot-check-ready b { width: clamp(25px, 2vw, 35px); aspect-ratio: 1; justify-self: center; position: relative; border: 3px solid #32f1d0; border-radius: 50%; box-shadow: 0 0 9px rgba(50,241,208,.2); }
.boot-check-ready b::after { content:""; position:absolute; left:25%; top:21%; width:39%; height:22%; border-left:3px solid #32f1d0; border-bottom:3px solid #32f1d0; transform:rotate(-45deg); }
.boot-check-ready span { color: #48efb1; font-size: clamp(14px, 1.05vw, 20px); line-height: 1; font-weight: 750; white-space: nowrap; text-shadow: 0 0 8px rgba(72,239,177,.15); }
.boot-actions { grid-row: 5; align-self: start; margin-top: clamp(10px, 1.5vh, 18px); display: flex; justify-content: flex-end; gap: 12px; }
.boot-button { min-width: clamp(150px, 12vw, 190px); min-height: 44px; padding: 0 22px; position: relative; border: 1px solid #36bed8; color: #eafaff; background: linear-gradient(180deg, rgba(10,38,50,.96), rgba(2,14,21,.98)); clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); box-shadow: inset 0 0 0 2px rgba(55,197,224,.08), inset 0 -9px 20px rgba(0,148,192,.08); font-size: 11px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.boot-button::before { content:""; position:absolute; inset:4px; pointer-events:none; border-top:1px solid rgba(117,232,255,.24); border-bottom:1px solid rgba(117,232,255,.12); }
.boot-button-primary { border-color: #42dcff; background: linear-gradient(180deg, rgba(9,73,98,.98), rgba(2,31,45,.98)); box-shadow: inset 0 0 18px rgba(39,203,255,.16), 0 0 13px rgba(35,204,255,.12); }
.boot-button:hover:not(:disabled), .boot-button:focus-visible { color:#fff; border-color:#9af2ff; box-shadow: inset 0 0 22px rgba(46,220,255,.23), 0 0 13px rgba(46,220,255,.24); }
@media (max-width: 900px) {
  .boot-screen { min-height: 560px; }
  .boot-layout { width: calc(100% - 30px); grid-template-rows: 65px auto 1fr auto 30px; }
  .boot-heading { width: min(560px, 76vw); margin-top: 20px; }
  .boot-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(720px, 82vw); justify-self: center; gap: 4px 10px; }
  .boot-checks .boot-check { aspect-ratio: 1.5 / 1; }
  .boot-check-content { top: 17%; bottom: 14%; }
  .boot-actions { position: absolute; right: 0; bottom: 14px; }
}
.onboarding-screen { width: min(1120px, calc(100% - 40px)); min-height: calc(100vh - 80px); margin: 0 auto; padding: 56px 0; color: #edfaff; display: flex; flex-direction: column; justify-content: center; }
.onboarding-screen > header { margin-bottom: 28px; }
.onboarding-screen > header p { color: #5be6ff; letter-spacing: .2em; }
.onboarding-screen > header h1 { margin: 6px 0; font-size: clamp(38px, 6vw, 72px); }
.onboarding-screen > header span { color: #9eb5bd; }
.boot-checks, .connect-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.boot-checks article, .connect-facts article { min-height: 130px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #295c6c; background: rgba(3, 17, 23, .94); }
.boot-checks strong, .connect-facts strong { overflow-wrap: anywhere; color: #e9fbff; }
.boot-checks span { color: #51e9a9; }
.onboarding-actions { margin-top: 24px; display: flex; justify-content: flex-end; gap: 12px; }
.story-frames { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.story-frames article { min-height: 170px; padding: 22px; border: 1px solid #2b6476; background: linear-gradient(145deg, rgba(7, 30, 41, .95), rgba(3, 10, 15, .97)); }
.story-frames b { color: #4de7ff; font-size: 26px; }
.story-frames p { font-size: 20px; line-height: 1.45; }
.starter-screen > header strong { display: block; margin-top: 16px; color: #68f0b9; font-size: 20px; }
.starter-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.starter-cards article { min-height: 330px; padding: 8px; display: flex; flex-direction: column; border: 1px solid #46616c; background: #030c10; }
.starter-cards img { width: 100%; min-height: 240px; flex: 1; object-fit: cover; }
.starter-cards small { margin-top: 10px; color: #72dff4; }
.starter-cards strong { margin: 5px 0; }
.starter-cards article button { margin-top: auto; }
.training-screen { width: min(1320px, calc(100% - 44px)); margin: 28px auto 60px; color: #eaf8fb; }
.training-screen > header { padding: 24px 26px; border: 1px solid #265b68; background: linear-gradient(110deg, rgba(4, 21, 28, .98), rgba(7, 31, 38, .91)); }
.training-screen > header p { margin: 0; color: #54e4ff; letter-spacing: .16em; text-transform: uppercase; }
.training-screen > header h1 { margin: 7px 0; font-size: clamp(32px, 4vw, 54px); }
.training-screen > header span { color: #9eb6bc; }
.training-stage-list { margin: 14px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.training-stage-list article { min-height: 126px; padding: 17px; display: flex; gap: 14px; border: 1px solid #244b55; background: rgba(3, 15, 20, .94); }
.training-stage-list article > b { color: #4ce4ff; font-size: 24px; }
.training-stage-list h2 { margin: 0 0 8px; font-size: 18px; }
.training-stage-list p { margin: 0; color: #8ea6ac; line-height: 1.45; }
.training-hands { display: grid; gap: 12px; }
.training-hands > section { padding: 14px 18px 18px; border: 1px solid #223f48; background: rgba(2, 12, 17, .94); }
.training-hands h2 { margin: 0 0 12px; color: #9eb6bc; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }
.training-hands section > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.training-card { min-height: 190px; display: grid; grid-template-columns: 42% 58%; overflow: hidden; border: 1px solid var(--training-accent); background: #061116; box-shadow: inset 0 0 24px color-mix(in srgb, var(--training-accent) 9%, transparent); }
.training-card img { width: 100%; height: 100%; min-height: 190px; object-fit: cover; }
.training-card > div { padding: 12px; display: flex; flex-direction: column; min-width: 0; }
.training-card small { color: var(--training-accent); font-size: 10px; }
.training-card strong { margin-top: 9px; font-size: 17px; overflow-wrap: anywhere; }
.training-card span { margin-top: auto; display: flex; gap: 8px; }
.training-card span b { flex: 1; padding: 7px; border: 1px solid #244954; font-size: 10px; }
.training-screen > footer { margin-top: 14px; display: flex; justify-content: flex-end; gap: 10px; }

/* Training visual, pass 1: background, three supplied stage plates and code-drawn connectors only. */
.desktop.app[data-route="TRAINING"] { height: 100dvh; min-height: 0; overflow: hidden; }
.desktop.app[data-route="TRAINING"] > main {
  height: calc(100dvh - 86 * var(--u));
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.training-screen-visual {
  --training-content-shift: clamp(42px, 2.8vw, 54px);
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: clamp(34px, 4.2vh, 52px) clamp(34px, 3.2vw, 62px) 44px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.training-visual-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("/app/client/assets/ui/training/training-background.png") center / cover no-repeat;
}
.training-visual-background::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(1, 7, 12, .74) 0%, rgba(1, 7, 12, .31) 48%, rgba(1, 7, 12, .08) 100%), linear-gradient(180deg, rgba(1, 6, 11, .22), rgba(1, 6, 11, .08) 56%, rgba(1, 6, 11, .55));
  pointer-events: none;
}
.training-visual-heading {
  width: min(980px, 74%);
  padding: 0 0 14px 17px !important;
  position: relative;
  transform: translateX(calc(var(--training-content-shift) * -1));
  border: 0 !important;
  border-left: 2px solid #35ddff !important;
  background: none !important;
  text-shadow: 0 2px 8px #000;
}
.training-visual-heading::after {
  content: '';
  width: 76%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: linear-gradient(90deg, #27d9ff, transparent);
}
.training-visual-heading p { margin: 0 0 8px !important; color: #30e6ff !important; font-size: 13px; font-weight: 800; }
.training-visual-heading h1 { margin: 0 0 8px !important; font-size: clamp(40px, 3vw, 55px) !important; line-height: .98; letter-spacing: .015em; text-transform: uppercase; white-space: nowrap; }
.training-visual-heading span { display: block; max-width: 710px; color: #d3e6ec !important; font-size: 15px; line-height: 1.42; }
.training-visual-intro {
  width: min(640px, 52%);
  margin: 12px 0 0;
  transform: translateX(calc(var(--training-content-shift) * -1));
  color: #c5d9e1;
  font-size: 16px;
  line-height: 1.4;
  text-shadow: 0 2px 8px #000;
}
.training-visual-stages {
  width: calc(91% + var(--training-content-shift));
  margin-inline: auto;
  margin-top: clamp(30px, 3.5vh, 38px);
  transform: translateY(8px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) 30px minmax(0, 1fr);
  align-items: center;
  gap: 2px;
}
.training-visual-stage {
  min-width: 0;
  height: clamp(100px, 11.6vh, 116px);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
  padding: 12px 22px 12px 18px;
  text-shadow: 0 2px 7px #000;
}
.training-visual-stage > img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: fill;
  pointer-events: none;
}
.training-visual-stage > b,
.training-visual-stage > div { position: relative; z-index: 1; }
.training-visual-stage > b { width: 100%; display: grid; place-items: center; color: #39e7ff; font-size: clamp(28px, 2.1vw, 38px); font-weight: 800; line-height: 1; text-align: center; }
.training-visual-stage > div { min-width: 0; align-self: center; }
.training-visual-stage-2 > b { transform: translateX(4px); }
.training-visual-stage h2 { margin: 0 0 5px; color: #effcff; font-size: clamp(14px, 1.05vw, 18px); line-height: 1.12; text-transform: uppercase; }
.training-visual-stage p { max-width: 330px; margin: 0; color: #c0d5dc; font-size: clamp(10px, .76vw, 13px); line-height: 1.32; }
.training-stage-arrow { width: 30px; height: 62px; display: grid; place-items: center; filter: drop-shadow(0 0 8px #00cfff); }
.training-stage-arrow svg { width: 26px; height: 52px; overflow: visible; }
.training-stage-arrow path { fill: none; stroke: #25e8ff; stroke-width: 4; stroke-linecap: square; stroke-linejoin: miter; }
.training-card-bay {
  --training-bay-inset: clamp(42px, 3.2vw, 62px);
  width: calc(100% - (var(--training-bay-inset) * 2));
  height: clamp(245px, calc(18.75vw - 6px), 290px);
  margin-top: clamp(22px, 2.7vh, 30px);
  margin-left: var(--training-bay-inset);
  position: relative;
  isolation: isolate;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .62));
}
.training-card-bay > .tc-cut-glass {
  background: linear-gradient(180deg, rgba(6, 20, 28, .74), rgba(2, 9, 15, .82));
  backdrop-filter: blur(2px);
}
.training-path-cards {
  position: absolute;
  inset: 24px 34px 25px;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 160px));
  align-items: center;
  justify-content: center;
  gap: clamp(8px, .7vw, 14px);
}
.training-path-card {
  width: min(100%, 160px);
  max-height: 100%;
  aspect-ratio: 2 / 3;
  min-width: 0;
  position: relative;
  overflow: visible;
  justify-self: center;
}
.training-path-card > tc-card-frame { position: absolute; inset: 0; }
.training-path-card-content {
  width: 100%;
  height: 100%;
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) clamp(28px, 3.5vh, 40px) clamp(23px, 2.8vh, 32px);
  overflow: hidden;
  background: #03090d;
  color: #f0fbff;
}
.training-path-card-art { min-height: 0; position: relative; overflow: hidden; border-bottom: 1px solid color-mix(in srgb, var(--training-accent) 45%, #173b4a); }
.training-path-card-art > img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 43%; }
.training-path-card-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, rgba(2, 7, 11, .5)); box-shadow: inset 0 0 12px rgba(0, 0, 0, .32); }
.faction-corner-training { width: 63px; height: 62px; left: 6px; top: 6px; z-index: 2; transform: scale(.45); transform-origin: 0 0; }
.training-path-card-name { min-width: 0; padding: 3px 6px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(180deg, rgba(5, 17, 24, .98), rgba(2, 8, 13, .99)); text-align: center; }
.training-path-card-name small { width: 100%; overflow: hidden; color: var(--training-accent); font-size: clamp(5px, .42vw, 7px); font-weight: 800; letter-spacing: .05em; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.training-path-card-name strong { width: 100%; overflow: hidden; margin-top: 2px; color: #f6fcff; font-size: clamp(7px, .62vw, 11px); line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.training-path-card-stats { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #294656; background: #02080d; }
.training-path-card-stats b { min-width: 0; padding: 2px 5px; display: flex; align-items: center; justify-content: space-between; border-right: 1px solid #294656; color: #f7fcff; font-size: clamp(10px, .8vw, 15px); }
.training-path-card-stats b:last-child { border-right: 0; }
.training-path-card-stats small { overflow: hidden; color: #638a9b; font-size: clamp(4px, .34vw, 6px); letter-spacing: .04em; text-overflow: clip; text-transform: uppercase; }
/* Closed reward slots on TRAINING (tutorial reward v2): same card geometry, art replaced by a sealed "?" panel. */
.training-path-card-slot-art { display: grid; place-items: center; background: radial-gradient(circle at 50% 46%, rgba(84, 221, 255, .16), transparent 58%), repeating-linear-gradient(135deg, rgba(84, 221, 255, .05) 0 6px, transparent 6px 12px), linear-gradient(180deg, #071720, #02080d); }
.training-path-card-slot-art::after { background: none; box-shadow: inset 0 0 18px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(84, 221, 255, .18); }
.training-path-card-slot-art > b { position: relative; z-index: 1; color: #6ffff6; font-size: clamp(30px, 3.2vw, 58px); font-weight: 800; line-height: 1; text-shadow: 0 0 12px rgba(54, 200, 255, .75), 0 0 26px rgba(54, 200, 255, .35); }
.training-path-card-slot .training-path-card-stats b { color: #4f7383; }
.training-advisor-plate {
  width: var(--training-advisor-width, min(700px, 46vw));
  aspect-ratio: 1916 / 821;
  margin: 0;
  position: absolute;
  left: var(--training-advisor-left, 0);
  top: var(--training-advisor-top, auto);
  transform: scaleY(1.08);
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .52));
}
.training-advisor-plate img { width: 100%; height: 100%; display: block; object-fit: contain; }
.training-waveform { width: 100%; height: 24px; display: block; overflow: visible; }
.training-waveform path { fill: none; stroke: #32e6ff; stroke-width: 1.35; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(29, 222, 255, .8)); }
.training-knowledge-note {
  width: clamp(210px, 16vw, 270px);
  min-height: 96px;
  position: absolute;
  isolation: isolate;
  z-index: 2;
  top: var(--training-knowledge-top, clamp(76px, 9.6vh, 102px));
  right: clamp(18px, 2vw, 38px);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5));
}
.training-knowledge-note > .tc-cut-body { padding: 13px 16px 10px; }
.training-knowledge-note p { margin: 0; color: #b9e9f6; font-size: clamp(9px, .67vw, 12px); font-weight: 600; line-height: 1.48; text-transform: uppercase; }
.training-knowledge-note .training-waveform { width: 58%; height: 22px; margin-top: 3px; }
.training-advisor-copy {
  position: absolute;
  z-index: 1;
  left: 27%;
  right: 7%;
  top: 21%;
  bottom: 27%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-shadow: 0 2px 6px #000;
}
.training-advisor-copy h2 { margin: 0 0 6px; color: #25e7ff; font-size: clamp(10px, .78vw, 14px); line-height: 1; letter-spacing: .08em; text-transform: uppercase; }
.training-advisor-copy p { margin: 0; color: #d6eaf0; font-size: clamp(7.5px, .58vw, 10.5px); line-height: 1.38; }
.training-advisor-copy .training-waveform { width: 44%; height: 19px; margin-top: 4px; }
.training-progress-panel,
.training-journey-actions {
  height: max(104px, calc(100% - var(--training-footer-top, 0px) - 10px));
  max-height: 158px;
  position: absolute;
  z-index: 3;
  top: var(--training-footer-top, auto);
}
.training-progress-panel {
  width: var(--training-progress-width, clamp(330px, 25vw, 430px));
  left: calc(var(--training-advisor-width, 560px) + 24px);
  isolation: isolate;
  filter: drop-shadow(0 9px 20px rgba(0, 0, 0, .48));
}
.training-progress-panel > .tc-cut-body { padding: 15px 18px 11px; }
.training-progress-panel header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.training-progress-panel h2 { margin: 0; color: #20e5ff; font-size: clamp(11px, .82vw, 14px); letter-spacing: .045em; }
.training-progress-panel header b { color: #f4fbff; font-size: clamp(15px, 1.2vw, 20px); }
.training-progress-line { height: 10px; margin-top: 10px; padding: 2px; border: 1px solid #2fcfea; background: #03121a; box-shadow: inset 0 0 8px #000; }
.training-progress-line i { width: 0; height: 100%; display: block; background: linear-gradient(90deg, #12d9ed, #d9fcff 74%, #33e6ff); box-shadow: 0 0 8px rgba(25, 225, 255, .72); }
.training-progress-panel ol { margin: 8px 0 0; padding: 0 4px; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; }
.training-progress-panel ol::before { content: ''; height: 1px; position: absolute; left: 15%; right: 15%; top: 13px; background: #36dcf3; box-shadow: 0 0 7px #19dfff; }
.training-progress-panel li { min-width: 0; position: relative; display: grid; justify-items: center; gap: 3px; color: #deedf1; text-align: center; font-size: clamp(8px, .58vw, 10px); line-height: 1.12; }
.training-progress-panel li i { width: 28px; height: 28px; z-index: 1; display: grid; place-items: center; border: 2px solid #45636d; border-radius: 50%; background: #07141a; color: #78909a; font-size: 14px; font-style: normal; box-shadow: inset 0 0 7px rgba(0, 0, 0, .75); }
.training-progress-panel li.active i { border-color: #3be9ff; background: #073a48; color: #dffcff; box-shadow: 0 0 10px rgba(27, 222, 255, .7); }
.training-journey-actions {
  width: var(--training-actions-width, clamp(340px, 21vw, 370px));
  height: max(100px, calc(100% - var(--training-footer-top, 0px) - 10px));
  max-height: 126px;
  right: var(--training-bay-right, clamp(84px, 6.4vw, 124px));
  display: grid;
  grid-template-rows: minmax(68px, 1fr) 28px;
  gap: 2px;
}
.training-continue-button,
.training-battle-center-link { font-family: inherit; font-weight: 800; text-transform: uppercase; cursor: pointer; }
.training-continue-button {
  position: relative;
  isolation: isolate;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f3fbff;
  font-size: clamp(16px, 1.2vw, 22px);
  letter-spacing: .035em;
  white-space: nowrap;
  text-shadow: 0 2px 7px #000;
  filter: drop-shadow(0 9px 18px rgba(0, 0, 0, .48));
}
.training-continue-button > .tc-cut-body { padding: 0 20px; display: flex; align-items: center; justify-content: center; gap: 24px; }
.training-continue-button:hover > .tc-cut-glass { filter: brightness(1.25); }
.training-continue-button b { color: #24efff; font-size: 32px; line-height: 1; }
.training-battle-center-link { width: 86%; position: relative; isolation: isolate; justify-self: center; padding: 0; border: 0; background: transparent; color: #43def4; font-size: clamp(9px, .66vw, 11px); letter-spacing: .035em; filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .5)); }
.training-battle-center-link > .tc-cut-body { display: flex; align-items: center; justify-content: center; }
.training-battle-center-link b { margin-left: 8px; font-size: 20px; vertical-align: -1px; }

.training-knowledge-note > .tc-cut-glass,
.training-progress-panel > .tc-cut-glass,
.training-continue-button > .tc-cut-glass,
.training-battle-center-link > .tc-cut-glass {
  background: linear-gradient(180deg, rgba(7, 31, 43, .9), rgba(2, 10, 17, .95));
  backdrop-filter: blur(2px);
}

@media (min-width: 1180px) and (min-height: 901px) and (max-height: 980px) {
  .training-card-bay { height: 280px; margin-top: 18px; }
}

@media (min-width: 1180px) and (max-height: 900px) {
  .training-screen-visual { padding-top: 28px; }
  .training-visual-heading h1 { font-size: 48px !important; }
  .training-visual-heading span { font-size: 13px; }
  .training-visual-intro { width: min(590px, 52%); margin-top: 8px; font-size: 13px; line-height: 1.34; }
  .training-visual-stages { margin-top: 18px; }
  .training-visual-stage { height: 100px; }
  .training-card-bay { height: 245px; margin-top: 14px; }
}

@media (min-width: 1180px) and (max-height: 790px) {
  .training-screen-visual { padding-top: 28px; }
  .training-visual-heading h1 { font-size: 48px !important; }
  .training-visual-heading span { font-size: 13px; }
  .training-visual-intro { width: min(590px, 52%); margin-top: 8px; font-size: 13px; line-height: 1.34; }
  .training-visual-stages { margin-top: 18px; }
  .training-visual-stage { height: 100px; }
  .training-knowledge-note { min-height: 88px; }
  .training-progress-panel, .training-journey-actions { min-height: 96px; }
  .training-progress-panel > .tc-cut-body { padding-top: 10px; }
  .training-progress-panel ol { margin-top: 5px; }
}
.store-screen { width: min(1320px, calc(100% - 44px)); margin: 28px auto 60px; color: #eef9fb; }
.store-screen > header { padding: 24px; display: flex; justify-content: space-between; gap: 24px; border: 1px solid #3f5d66; background: linear-gradient(110deg, rgba(5, 19, 24, .98), rgba(24, 17, 8, .9)); }
.store-screen > header p { margin: 0; color: #f0b65b; letter-spacing: .16em; text-transform: uppercase; }
.store-screen > header h1 { margin: 7px 0; font-size: clamp(34px, 4vw, 56px); }
.store-screen > header span { color: #aabac0; }
.store-screen > header aside { min-width: 180px; padding: 14px 20px; display: flex; flex-direction: column; justify-content: center; border-left: 2px solid #d69a44; background: #101719; }
.store-screen > header aside small { color: #9aadb2; }
.store-screen > header aside strong { color: #f4c36d; font-size: 30px; }
.store-products { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.store-product { --store-accent:#4edbff; min-height: 430px; padding: 20px; display: flex; flex-direction: column; border: 1px solid var(--store-accent); background: linear-gradient(160deg, color-mix(in srgb, var(--store-accent) 10%, #061116), #040b0e 55%); }
.store-violet { --store-accent:#bd62ff; }
.store-gold { --store-accent:#f0b642; }
.store-product-core { width: 92px; height: 76px; margin-bottom: 18px; display: grid; place-items: center; position: relative; border: 1px solid var(--store-accent); clip-path: polygon(12% 0, 88% 0, 100% 18%, 100% 82%, 88% 100%, 12% 100%, 0 82%, 0 18%); background: color-mix(in srgb, var(--store-accent) 14%, #071014); }
.store-product-core i { position: absolute; inset: 12px; border: 1px solid var(--store-accent); }
.store-product-core b { color: var(--store-accent); z-index: 1; }
.store-product header small { color: var(--store-accent); text-transform: uppercase; }
.store-product h2 { margin: 6px 0 14px; font-size: 27px; }
.store-product dl { display: grid; grid-template-columns: .6fr 1.4fr; gap: 8px; }
.store-product dl div { padding: 10px; border: 1px solid #30464d; }
.store-product dt { color: #789096; font-size: 10px; text-transform: uppercase; }
.store-product dd { margin: 5px 0 0; font-weight: 800; }
.store-product > p { color: #a5b7bc; }
.store-product > strong { margin-top: auto; padding: 12px 0; color: var(--store-accent); font-size: 19px; }
.store-product footer { display: flex; gap: 8px; }
.store-product footer button { flex: 1; }
.store-sections { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.store-sections article { min-height: 160px; padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid #344f57; background: rgba(5, 16, 20, .96); }
.store-sections h2 { margin: 6px 0; }
.store-sections p { margin: 0; color: #94a9af; line-height: 1.45; }
.store-sections small { color: #65dfb1; text-transform: uppercase; }
.store-rule { padding: 14px 18px; border-left: 3px solid #f0b642; background: rgba(58, 37, 4, .42); color: #e0c18b; }
.store-detail-screen { --store-accent:#4edbff; width: min(1120px, calc(100% - 44px)); margin: 38px auto 60px; color: #eef9fb; }
.store-detail-screen.store-violet { --store-accent:#bd62ff; }
.store-detail-screen.store-gold { --store-accent:#f0b642; }
.store-detail-screen > header { padding: 24px; border: 1px solid var(--store-accent); background: linear-gradient(120deg, color-mix(in srgb, var(--store-accent) 9%, #061116), #050b0e); }
.store-detail-screen > header p { margin: 0; color: var(--store-accent); letter-spacing: .16em; text-transform: uppercase; }
.store-detail-screen > header h1 { margin: 7px 0; font-size: clamp(34px, 5vw, 60px); }
.store-detail-screen > header span { color: #9db0b5; }
.store-detail-layout { margin-top: 14px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 12px; }
.store-detail-product, .store-detail-facts { padding: 22px; border: 1px solid #304c54; background: rgba(4, 15, 19, .97); }
.store-detail-product { min-height: 310px; display: flex; flex-direction: column; }
.store-detail-core { width: 150px; height: 130px; margin-bottom: 22px; display: grid; place-items: center; position: relative; border: 1px solid var(--store-accent); clip-path: polygon(12% 0, 88% 0, 100% 18%, 100% 82%, 88% 100%, 12% 100%, 0 82%, 0 18%); background: color-mix(in srgb, var(--store-accent) 14%, #071014); }
.store-detail-core i { position: absolute; inset: 16px; border: 1px solid var(--store-accent); }
.store-detail-core b { color: var(--store-accent); font-size: 22px; z-index: 1; }
.store-detail-product small { color: #9db0b5; text-transform: uppercase; }
.store-detail-product > strong { margin-top: 8px; color: var(--store-accent); font-size: 25px; }
.store-detail-product > p { margin-top: auto; color: #b3c4c8; }
.store-detail-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.store-detail-facts article { padding: 17px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #29454d; background: #071418; }
.store-detail-facts small { color: #81999f; text-transform: uppercase; }
.store-detail-facts strong { color: var(--store-accent); font-size: 19px; overflow-wrap: anywhere; }
.store-detail-notices { margin-top: 12px; display: grid; gap: 8px; }
.store-detail-notices p { margin: 0; padding: 15px 18px; display: flex; gap: 14px; border-left: 2px solid var(--store-accent); background: rgba(5, 18, 22, .96); color: #a8bbc0; }
.store-detail-notices b { color: var(--store-accent); }
.store-detail-screen > footer { margin-top: 14px; display: flex; justify-content: flex-end; gap: 10px; }
.details-actions { display: flex; justify-content: flex-end; gap: 10px; }
.match-replay-screen { width: min(1320px, calc(100% - 44px)); margin: 28px auto 60px; color: #eef9fb; }
.match-replay-screen > header { padding: 20px 24px; border: 1px solid #315a65; background: rgba(4, 17, 22, .97); }
.match-replay-screen > header p { margin: 0; color: #829ca3; }
.match-replay-screen > header h1 { margin: 6px 0 0; font-size: 42px; }
.replay-layout { margin-top: 12px; display: grid; grid-template-columns: 1fr 220px; gap: 12px; }
.replay-scene { min-height: 590px; padding: 24px; display: flex; align-items: center; border: 1px solid #315a65; background: radial-gradient(circle at 50% 50%, rgba(18, 73, 86, .35), rgba(2, 10, 14, .98) 62%); }
.replay-versus { width: 100%; display: grid; grid-template-columns: 1fr 150px 1fr; gap: 18px; align-items: center; }
.replay-versus > div { text-align: center; }
.replay-versus > div small, .replay-versus > div span { display: block; color: #86a0a6; }
.replay-versus > div strong { display: block; margin: 8px 0; color: #56e4ff; font-size: 25px; }
.replay-side { min-height: 430px; overflow: hidden; border: 1px solid var(--replay-accent); background: #061116; box-shadow: 0 0 26px color-mix(in srgb, var(--replay-accent) 14%, transparent); }
.replay-side img { width: 100%; height: 280px; object-fit: cover; }
.replay-side > div { padding: 15px; }
.replay-side small { color: var(--replay-accent); }
.replay-side h2 { margin: 6px 0 14px; font-size: 24px; }
.replay-side dl { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.replay-side dl div { padding: 9px; border: 1px solid #29434a; }
.replay-side dt { color: #81979c; font-size: 9px; text-transform: uppercase; }
.replay-side dd { margin: 5px 0 0; font-weight: 800; }
.replay-timeline { padding: 16px; border: 1px solid #315a65; background: rgba(4, 16, 20, .97); }
.replay-timeline h2 { margin: 0 0 14px; color: #8da5ab; font-size: 14px; text-transform: uppercase; }
.replay-timeline button { width: 100%; min-height: 52px; margin-bottom: 8px; border: 1px solid #294c56; background: #07171c; color: #a7bcc1; }
.replay-timeline button.active { border-color: #4cdef8; color: #ecfcff; box-shadow: inset 3px 0 #4cdef8; }
.match-replay-screen > footer { margin-top: 12px; display: flex; justify-content: flex-end; }

@media (max-width: 767px) {
  .profile-service-actions, .support-grid, .organization-grid, .rating-metrics, .rating-lower, .pve-briefing-grid, .card-detail-layout, .card-detail-unavailable { grid-template-columns: 1fr; }
  .card-detail-art { min-height: 480px; }
  .card-detail-stats, .card-evolution > div { grid-template-columns: 1fr; }
  .boot-checks, .connect-facts, .story-frames, .starter-cards, .training-stage-list, .store-products, .store-sections { grid-template-columns: 1fr; }
  .store-screen > header { flex-direction: column; }
  .store-detail-layout, .store-detail-facts { grid-template-columns: 1fr; }
  .store-detail-screen > footer { flex-direction: column; }
  .replay-layout, .replay-versus { grid-template-columns: 1fr; }
  .replay-timeline { order: -1; }
  .training-hands section > div { grid-template-columns: repeat(2, 1fr); }
  .training-card { grid-template-columns: 1fr; }
  .training-card img { min-height: 150px; }
  .pve-node { grid-template-columns: 34px 1fr; margin-top: 40px; }
  .pve-node button { grid-column: 1 / -1; }
  .history-entry { grid-template-columns: 1fr; }
  .history-entry dl { justify-content: space-between; }
  .service-screen { width: calc(100% - 20px); margin-top: 18px; }
}

tc-battle-hud.battle-hud {
  padding: 0 !important;
  display: block;
  overflow: visible;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
}

@media (min-width: 1180px) and (min-height: 680px) {
  .battle-screen {
    --battle-hud-width: clamp(340px, 23vw, 390px);
  }
}

@media (min-width: 1180px) and (max-width: 1320px) and (min-height: 680px) {
  .battle-screen { --battle-hud-width: 370px; }

  .opponent-hand {
    left: var(--battle-edge);
    right: auto;
    transform: none;
  }

  .player-hand {
    right: var(--battle-edge);
    left: auto;
    transform: none;
  }
}

/* This override intentionally follows the narrow-desktop anchoring above. */
@media (min-width: 1180px) and (max-width: 1320px) and (min-height: 680px) and (max-height: 799px) {
  .opponent-hand {
    transform: scale(var(--battle-scene-scale));
    transform-origin: top left;
  }

  .player-hand {
    transform: scale(var(--battle-scene-scale));
    transform-origin: bottom right;
  }
}

/* Functional non-combat city scheme. Deliberately avoids perpetual glow animations. */
.city-scheme-screen { max-width: 1080px; margin: 0 auto; padding: 24px 20px 44px; color: #e8f7ff; }
.city-scheme-heading p { margin: 0 0 6px; color: #70dfff; font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.city-scheme-heading h1 { margin: 0 0 8px; font-size: clamp(26px, 3vw, 42px); }
.city-scheme-heading span { color: #a9bfca; line-height: 1.5; }
.city-scheme-topline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 12px; }
.city-scheme-topline h2 { margin: 0; font-size: 21px; }
.city-scheme-topline > div { display: flex; flex-wrap: wrap; gap: 8px; }
.city-scheme-topline span { display: flex; gap: 12px; align-items: center; border: 1px solid #407084; background: #091820; padding: 8px 12px; color: #a9bfca; font-size: 12px; }
.city-scheme-topline strong { color: #ecfaff; font-size: 16px; }
.city-scheme-map { position: relative; width: 100%; height: clamp(310px, 36vw, 450px); border: 1px solid #42758b; background: radial-gradient(circle at 50% 50%, #103448 0, #07151f 60%, #040b11 100%); overflow: hidden; }
.city-scheme-map::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(#8ad7f00d 1px, transparent 1px), linear-gradient(90deg, #8ad7f00d 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; }
.city-scheme-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.city-scheme-map line { stroke: #4e879b; stroke-width: 2; vector-effect: non-scaling-stroke; }
.city-scheme-map .scheme-edge-quiet { stroke: #56c7df; }
.city-scheme-map .scheme-edge-watched { stroke: #d6ad69; stroke-dasharray: 1.6 1; }
.city-scheme-map .scheme-edge-heavy { stroke: #ee7375; stroke-dasharray: .8 .8; }
.city-scheme-map .scheme-edge.revealed { stroke-width: 3; }
.city-scheme-node { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; }
.city-scheme-node-button { min-width: 96px; max-width: 132px; min-height: 44px; padding: 8px 10px; border: 1px solid #7fcfe2; background: #081b26; color: #e5f9ff; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; box-shadow: 0 0 0 3px #020b12; }
.city-scheme-node-button:disabled { opacity: .7; cursor: default; border-color: #527180; }
.city-scheme-node.current .city-scheme-node-button { border-color: #fff; background: #124058; box-shadow: 0 0 0 3px #020b12, 0 0 18px #60dfff88; }
.city-scheme-node.goal .city-scheme-node-button { border-color: #92efc6; }
.city-scheme-node.visited .city-scheme-node-button { color: #a9d9e8; }
.city-scheme-intel { position: absolute; top: -17px; right: -5px; color: #c8f782; font-size: 18px; }
.city-scheme-legend { display: flex; flex-wrap: wrap; gap: 16px; padding: 12px 0; font-size: 12px; color: #a9bfca; }
.city-scheme-legend span::before { content: '━'; margin-right: 6px; }
.city-scheme-legend .scheme-signal-quiet::before { color: #56c7df; }
.city-scheme-legend .scheme-signal-watched::before { color: #d6ad69; }
.city-scheme-legend .scheme-signal-heavy::before { color: #ee7375; }
.city-scheme-result { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 14px 16px; border: 1px solid #325e72; background: #091820; }
.city-scheme-result.won { border-color: #65d2a0; }
.city-scheme-result.failed { border-color: #d37680; }
.city-scheme-result span { color: #a9bfca; }
.city-scheme-result b { margin-left: auto; color: #a5f0c3; }
.city-scheme-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; }
.city-scheme-actions button { min-height: 40px; }
.city-scheme-actions button:disabled { opacity: .45; }
.city-scheme-note { color: #89a5b1; font-size: 12px; }
.city-event-screen { max-width: 980px; margin: 0 auto; }
.city-event-summary { margin: 16px 0; padding: 18px; border: 1px solid #3a5863; background: #0a151dcc; }
.city-event-summary h2 { margin: 0 0 8px; }
.city-event-summary strong { color: #9ee8f5; }
.city-event-summary small { display: block; color: #75919d; margin-top: 7px; }
.city-event-result { color: #a5f0c3; font-weight: 700; }
.city-event-actions h3 { margin: 20px 0 8px; font-size: 13px; color: #9eb8c5; }
.city-event-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.city-event-actions > button { margin: 8px 8px 0 0; }
.city-event-actions button:disabled { opacity: .35; }
@media (max-width: 680px) { .city-event-action-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) {
  .city-scheme-screen { padding: 16px 10px 28px; }
  .city-scheme-map { height: 330px; }
  .city-scheme-node-button { min-width: 65px; max-width: 82px; min-height: 42px; padding: 5px; font-size: 10px; }
  .city-scheme-actions button { flex: 1 1 145px; }
}

/* === Shell skin v1 (header + left menu from GPT frame, 1u = 1px at 1920 wide) === */
:root { --u: min(1px, calc(100vw / 1900)); }
.desktop { grid-template-columns: calc(228 * var(--u)) minmax(0, 1fr); grid-template-rows: calc(86 * var(--u)) minmax(0, 1fr); background: #040c14; }
.desktop > nav { top: calc(86 * var(--u)); height: calc(100vh - 86 * var(--u)); }
.desktop .collection-sticky-controls { top: calc(86 * var(--u)); }

.desktop > .shell-command-bar { height: calc(86 * var(--u)); padding: 0; display: block; position: sticky; top: 0; border: 0; background: #040c14; box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) #000a; backdrop-filter: none; }
.desktop .shell-frame { position: absolute; inset: 0; display: flex; pointer-events: none; }
.desktop .shell-frame > i { flex: 0 0 auto; height: 100%; background-repeat: no-repeat; background-size: 100% 100%; }
.desktop .sf-left { width: calc(476 * var(--u)); background-image: url("assets/ui/hdr-left.png"); }
.desktop .sf-res { width: calc(265 * var(--u)); background-image: url("assets/ui/hdr-res.png"); }
.desktop .sf-pl { width: calc(19 * var(--u)); background-image: url("assets/ui/hdr-player-l.png"); }
.desktop .shell-frame > .sf-fill { flex: 1 1 auto; min-width: 0; background-image: url("assets/ui/hdr-fill.png"); background-repeat: repeat-x; background-size: calc(1 * var(--u)) 100%; }
.desktop .sf-right { width: calc(420 * var(--u)); background-image: url("assets/ui/hdr-right.png"); }

.desktop .shell-brand { min-height: 0; width: calc(476 * var(--u)); height: calc(86 * var(--u)); padding: 0; position: absolute; left: 0; top: 0; display: block; border: 0; background: none; }
.desktop .shell-brand img { position: absolute; display: block; }
.desktop .brand-l1 { left: calc(65 * var(--u)); top: calc(22.45 * var(--u)); width: calc(52 * var(--u)); height: calc(35 * var(--u)); }
.desktop .brand-l2 { left: calc(103 * var(--u)); top: calc(23.9 * var(--u)); width: calc(50 * var(--u)); height: calc(33 * var(--u)); }
.desktop .brand-word { left: calc(177 * var(--u)); top: calc(5.5 * var(--u)); width: calc(210 * var(--u)); height: calc(70 * var(--u)); }
.desktop .shell-brand:hover img { filter: brightness(1.15); }
.desktop .shell-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }

.desktop .shell-wallet { position: absolute; left: calc(479 * var(--u)); top: calc(14 * var(--u)); height: calc(53 * var(--u)); display: grid; grid-template-columns: repeat(3, calc(253 * var(--u))); column-gap: calc(12 * var(--u)); }
.desktop .shell-wallet li { min-height: 0; height: 100%; padding: 0 calc(12 * var(--u)) 0 calc(14 * var(--u)); display: grid; grid-template-columns: calc(40 * var(--u)) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: calc(12 * var(--u)); row-gap: calc(2 * var(--u)); align-content: center; border: 0; }
.desktop .shell-wallet li:last-child { border: 0; }
.desktop .wallet-icon { grid-row: 1 / 3; width: calc(40 * var(--u)); height: calc(40 * var(--u)); align-self: center; object-fit: contain; }
.desktop .shell-wallet span { font-size: max(9px, calc(11 * var(--u))); color: #7fa7ba; letter-spacing: .07em; }
.desktop .shell-wallet strong { overflow: hidden; color: #eefaff; font-size: calc(20 * var(--u)); line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }

.desktop .shell-account { position: absolute; inset: 0; display: block; pointer-events: none; }
.desktop .shell-account > * { pointer-events: auto; }
.desktop .shell-identity, .desktop .shell-identity-loading { min-height: 0; height: calc(53 * var(--u)); max-width: calc(100% - 1605 * var(--u)); padding: 0 calc(8 * var(--u)) 0 calc(4 * var(--u)); position: absolute; left: calc(1287 * var(--u)); top: calc(14 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u)); border: 0; background: none; color: #e9f8ff; }
.desktop .shell-avatar { flex: 0 0 auto; width: calc(44 * var(--u)); height: calc(44 * var(--u)); padding: 0; display: block; overflow: hidden; border: calc(2 * var(--u)) solid #4ed5ff; border-radius: 50%; background: #050f17; box-shadow: none; }

.desktop .shell-identity > span:nth-child(2) { min-width: 0; display: flex; align-items: baseline; gap: calc(6 * var(--u)); }
.desktop .shell-identity strong { overflow: hidden; font-size: calc(16 * var(--u)); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.desktop .shell-identity small { color: #54d7ff; font-size: calc(12 * var(--u)); }
.desktop .shell-identity em { flex: 0 0 auto; color: #bdf0ff; font-size: max(11px, calc(14 * var(--u))); font-weight: 700; letter-spacing: .02em; }
.desktop .shell-settings-button { min-height: 0; width: calc(55 * var(--u)); height: calc(47 * var(--u)); padding: 0; position: absolute; right: calc(25.5 * var(--u)); top: calc(17 * var(--u)); display: grid; place-items: center; border: 0; background: none; }
.desktop .shell-settings-button img { width: calc(32 * var(--u)); height: calc(32 * var(--u)); display: block; transition: transform .25s; }
.desktop .shell-settings-button:hover img, .desktop .shell-settings-button:focus-visible img { transform: rotate(45deg); filter: brightness(1.25); }
.desktop .shell-settings-button:hover, .desktop .shell-settings-button:focus-visible { border: 0; }

.desktop > nav { width: calc(228 * var(--u)); padding: calc(11 * var(--u)) 0 0; display: flex; gap: 0; overflow: hidden; border: 0; background: url("assets/ui/nav-top.png") top left / calc(228 * var(--u)) calc(11 * var(--u)) no-repeat, url("assets/ui/nav-fill.png") top left / calc(228 * var(--u)) calc(1 * var(--u)) repeat-y; }
.desktop .nav-button { flex: 0 0 auto; min-height: 0; width: calc(228 * var(--u)); height: calc(157 * var(--u)); padding: 0; position: relative; border: 0; background: url("assets/ui/nav-tile.png") center / 100% 100% no-repeat; box-shadow: none; color: #bfe6f6; }
.desktop .nav-icon { width: calc(64 * var(--u)); height: calc(64 * var(--u)); position: absolute; left: calc(82 * var(--u)); top: calc(26 * var(--u)); object-fit: contain; filter: drop-shadow(0 0 calc(6 * var(--u)) #00b7ff66); }
.desktop .nav-label { width: calc(148 * var(--u)); height: calc(31 * var(--u)); position: absolute; left: calc(40 * var(--u)); top: calc(104 * var(--u)); display: grid; place-items: center; overflow: hidden; font-size: max(10px, calc(13 * var(--u))); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.desktop .nav-button:hover { border: 0; filter: brightness(1.15); color: #fff; }
.desktop .nav-button.active { border: 0; background: url("assets/ui/nav-tile.png") center / 100% 100% no-repeat; box-shadow: none; filter: brightness(1.35) saturate(1.2); color: #fff; }
.desktop .nav-button.active .nav-icon { filter: drop-shadow(0 0 calc(10 * var(--u)) #3fdcff); }
.desktop .nav-deco { flex: 0 1 calc(198 * var(--u)); min-height: 0; margin-top: auto; background: url("assets/ui/nav-bottom.png") bottom left / calc(228 * var(--u)) calc(198 * var(--u)) no-repeat; }
.mobile .shell-frame, .mobile .nav-deco, .mobile .nav-icon { display: none; }
.mobile .shell-brand .brand-word { display: none; }
.mobile .shell-brand img { height: 22px; width: auto; }
.mobile .shell-avatar { overflow: hidden; padding: 0; }
.mobile .shell-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.mobile .shell-settings-button img { width: 22px; height: 22px; }
.desktop .nav-button.active::after { content: ""; position: absolute; left: calc(24 * var(--u)); top: calc(8 * var(--u)); width: calc(180 * var(--u)); height: calc(136 * var(--u)); border-radius: calc(8 * var(--u)); box-shadow: inset 0 0 calc(22 * var(--u)) #1fd2ffaa; pointer-events: none; }
.mobile .wallet-icon { width: 16px; height: 16px; justify-self: center; object-fit: contain; }
.mobile .shell-wallet li { gap: 1px; }
/* Dossier button sat in-flow at the top of the fixed-aspect featured card, hidden under the frame with its border peeking out. Place it under the card. */
.archive-featured > .archive-dossier-button { position: absolute; left: 0; right: 0; top: calc(100% + 12px); margin: 0; z-index: 5; }

/* === City hub v2 (desktop). Stage 1640u. Panorama 1640 x 440u, cards 4 x 398 + 5 x 316 by 176u. Armor frames ported from profile-frames/profile.html. === */
@property --tc-edge-spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes tc-edge-spin { to { --tc-edge-spin: 360deg; } }
@keyframes tc-reflection { 0%, 55% { left: -20%; } 85%, 100% { left: 115%; } }

.tc-armor { --cut: 18px; --frame: 10px; position: relative; padding: var(--frame); isolation: isolate;
  clip-path: polygon(var(--cut) 0, calc(100% - 34px) 0, calc(100% - 22px) 7px, 100% 7px, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 27px 100%, 17px calc(100% - 7px), 0 calc(100% - 7px), 0 var(--cut));
  background: linear-gradient(180deg, #78909b 0, #314652 3px, #14232c 8px, #091117 48%, #101c23 88%, #3f5661 calc(100% - 3px), #8299a4 100%);
  box-shadow: 0 17px 35px rgba(0,0,0,.45), 0 3px 6px rgba(0,0,0,.62), inset 0 1px rgba(255,255,255,.20), inset 0 -1px rgba(0,0,0,.9); }
.tc-armor::before { content: ""; position: absolute; inset: 0; z-index: -2; padding: 2px; clip-path: inherit;
  background: conic-gradient(from var(--tc-edge-spin), #163844 0deg, #4c707c 16deg, #a9ffff 27deg, #44f9f1 38deg, #1ca6d2 58deg, #172d38 91deg, #47a5ff 128deg, #172c45 153deg, #927aff 190deg, #e9e4ff 203deg, #51b3ff 224deg, #173541 259deg, #77fff8 303deg, #f0ffff 315deg, #2be2ef 328deg, #163844 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
  filter: drop-shadow(0 0 3px rgba(71,247,245,.35)); animation: tc-edge-spin 8s linear infinite; animation-play-state: paused; }
.tc-armor::after { content: ""; position: absolute; inset: 4px; z-index: -1;
  clip-path: polygon(14px 0, calc(100% - 29px) 0, calc(100% - 19px) 6px, 100% 6px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 22px 100%, 13px calc(100% - 5px), 0 calc(100% - 5px), 0 14px);
  background: linear-gradient(180deg, rgba(255,255,255,.14), transparent 8%), linear-gradient(90deg, rgba(85,255,249,.09), transparent 18%, transparent 82%, rgba(95,138,255,.10)), linear-gradient(180deg, #172934 0%, #091219 31%, #040a0f 63%, #101c24 100%);
  box-shadow: inset 0 1px 0 rgba(231,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.88); }
.tc-armor-live::before, .tc-armor:hover::before, .tc-armor:focus-visible::before { animation-play-state: running; }
.tc-armor-face { position: relative; display: block; width: 100%; height: 100%; overflow: hidden;
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
  background: linear-gradient(180deg, rgba(7,25,35,.97), rgba(3,12,18,.97)); border: 1px solid rgba(70,198,216,.18); box-shadow: inset 0 0 0 1px rgba(0,0,0,.76); }
.tc-armor-top, .tc-armor-bottom { position: absolute; z-index: 8; left: 25px; right: 25px; height: 12px; pointer-events: none; }
.tc-armor-top { top: 3px; }
.tc-armor-bottom { bottom: 3px; transform: rotate(180deg); }
.tc-armor-top::before, .tc-armor-bottom::before { content: ""; position: absolute; inset: 0;
  clip-path: polygon(0 55%, 10px 0, 25% 0, 28% 48%, 45% 48%, 48% 0, 69% 0, 72% 48%, 90% 48%, calc(100% - 9px) 0, 100% 55%, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #66808b 0%, #30444e 18%, #14232b 48%, #080f14 100%); box-shadow: inset 0 1px rgba(255,255,255,.19); }
.tc-armor-top::after, .tc-armor-bottom::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(99,255,248,.05) 4%, #6dfff8 8%, #ecffff 10%, #2ad8ea 16%, rgba(31,104,126,.08) 31%, transparent 42%, transparent 55%, rgba(73,102,255,.15) 70%, #4fa9ff 83%, #78fff8 91%, transparent 98%);
  filter: drop-shadow(0 0 4px rgba(88,255,249,.75)); }

.desktop > main:has(> .city-hub) { padding: calc(12 * var(--u)) 0; }
.desktop .city-hub { width: calc(1640 * var(--u)); max-width: none; margin: 0 auto; display: grid; gap: calc(16 * var(--u)); }
.desktop .city-panorama { --frame: calc(10 * var(--u)); width: calc(1640 * var(--u)); height: calc(440 * var(--u)); }
.desktop .city-panorama > .tc-armor-face { background: #03080e; }
.desktop .city-scene, .desktop .city-scene img.city-still, .desktop .city-scene video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.desktop .city-panorama > .tc-armor-face::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, #02070ce6 0, #02070ca0 calc(420 * var(--u)), #02070c00 calc(640 * var(--u))), radial-gradient(ellipse at 50% 55%, transparent 60%, #0008 100%); }
.desktop .city-title { position: absolute; z-index: 2; left: calc(34 * var(--u)); top: calc(34 * var(--u)); width: calc(470 * var(--u)); padding-left: calc(18 * var(--u)); border-left: calc(2 * var(--u)) solid #36c8ff; }
.desktop .city-title p { margin: 0 0 calc(8 * var(--u)); color: #4bd5ff; font-size: max(10px, calc(13 * var(--u))); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.desktop .city-title h1 { margin: 0; color: #eefaff; font-size: calc(50 * var(--u)); line-height: 1; letter-spacing: .03em; text-transform: uppercase; text-shadow: 0 0 calc(18 * var(--u)) #00b7ff55; }
.desktop .city-title span { display: block; margin-top: calc(12 * var(--u)); color: #b9d3e0; font-size: max(11px, calc(16 * var(--u))); }
.desktop .city-title small { display: block; margin-top: calc(8 * var(--u)); color: #7f9cab; font-size: max(9px, calc(11 * var(--u))); line-height: 1.4; }
.desktop .city-hub .city-district-map { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; border: 0; background: none; }
.desktop .city-leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.desktop .city-leader { stroke: #5fdcff; stroke-width: 1.2; opacity: .75; vector-effect: non-scaling-stroke; }
.desktop .city-anchor { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(12 * var(--u)); height: calc(12 * var(--u)); margin: calc(-6 * var(--u)) 0 0 calc(-6 * var(--u)); border: calc(2 * var(--u)) solid #7fe6ff; border-radius: 50%; background: #0b3a50; box-shadow: 0 0 calc(10 * var(--u)) #3fdcff; pointer-events: none; }
.desktop .city-anchor::after { content: ""; position: absolute; inset: calc(-8 * var(--u)); border: 1px solid #7fe6ff; border-radius: 50%; opacity: 0; animation: city-ping 3.2s ease-out infinite; }
@keyframes city-ping { 0% { transform: scale(.4); opacity: .9; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
.desktop .city-district { min-height: calc(96 * var(--u)); height: auto; position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(240 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); display: grid; grid-template-columns: 1fr; align-content: center; gap: calc(3 * var(--u)); transform: none; border: 0; background: linear-gradient(135deg, #0c2330f5 0%, #05111af0 55%, #0a1c28ec 100%); color: #e8f8ff; text-align: left; line-height: 1.2; clip-path: polygon(calc(10 * var(--u)) 0, calc(100% - calc(16 * var(--u))) 0, 100% calc(16 * var(--u)), 100% calc(100% - calc(16 * var(--u))), calc(100% - calc(16 * var(--u))) 100%, calc(10 * var(--u)) 100%, 0 calc(100% - calc(10 * var(--u))), 0 calc(10 * var(--u))); transition: background .2s; }
.desktop .city-district > :not(svg) { position: relative; z-index: 1; }
.desktop .city-district strong { font-size: max(11px, calc(16 * var(--u))); letter-spacing: .08em; text-transform: uppercase; }
.desktop .city-district span { color: #adc5d3; font-size: max(10px, calc(11 * var(--u))); font-weight: 600; letter-spacing: .02em; line-height: 1.3; white-space: nowrap; }
.desktop .city-district small { color: #adc5d3; font-size: max(10px, calc(11 * var(--u))); line-height: 1.3; white-space: nowrap; }
.desktop .city-district:hover, .desktop .city-district:focus-visible { background: linear-gradient(135deg, #11354af5, #071b2bf0); }
.desktop .city-district:hover .district-edge, .desktop .city-district:focus-visible .district-edge { stroke: #b9f5ff; }

.desktop .city-cards { display: grid; gap: calc(14 * var(--u)); }
.desktop .city-cards-row { display: grid; gap: calc(16 * var(--u)); }
.desktop .city-cards-row.wide { grid-template-columns: repeat(4, calc(398 * var(--u))); }
.desktop .city-cards-row.narrow { grid-template-columns: repeat(5, calc(316 * var(--u))); gap: calc(15 * var(--u)); }
.desktop .city-card { --frame: calc(10 * var(--u)); min-height: 0; height: calc(188 * var(--u)); border: 0; color: #e8f8ff; text-align: left; transition: filter .25s ease, transform .25s ease; }
.desktop .city-card:hover, .desktop .city-card:focus-visible { filter: brightness(1.08); transform: translateY(-1px); }
.desktop .city-card .tc-armor-face > * { position: absolute; z-index: 2; }
.desktop .city-card-art { inset: 0; z-index: 0 !important; background-size: cover; background-position: center; transition: transform .4s; }
.desktop .city-card-shade { inset: 0; z-index: 1 !important; background: linear-gradient(90deg, #030a10f5 0, #030a10d8 42%, #030a1040 78%, #030a1010 100%), linear-gradient(0deg, #030a10cc 0, transparent 45%); }
.desktop .city-card-icon { left: calc(16 * var(--u)); top: calc(14 * var(--u)); width: calc(42 * var(--u)); height: calc(42 * var(--u)); object-fit: contain; filter: drop-shadow(0 0 calc(6 * var(--u)) #00c8ff88); }
.desktop .city-card-text { left: calc(70 * var(--u)); top: calc(12 * var(--u)); right: calc(16 * var(--u)); display: grid; gap: calc(2 * var(--u)); }
.desktop .city-card-text small { color: #4bd5ff; font-size: max(9px, calc(10 * var(--u))); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.desktop .city-card-text strong { font-size: max(12px, calc(18 * var(--u))); line-height: 1.1; letter-spacing: .05em; text-transform: uppercase; }
.desktop .city-card:has(.city-card-meta) .city-card-text strong { padding-right: calc(62 * var(--u)); }
.desktop .city-card-text em { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #d7e8f2; font-size: max(12px, calc(15 * var(--u))); font-weight: 500; font-style: normal; line-height: 1.3; text-shadow: 0 1px 0 #000; }
.desktop .city-card.wide .city-card-text em, .desktop .city-card.wide .city-card-duration { max-width: calc(270 * var(--u)); }
.desktop .city-card-text .city-card-duration { margin-top: calc(2 * var(--u)); color: #7fa0b0; font-size: max(9px, calc(11 * var(--u))); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.desktop .city-card-meta { right: calc(16 * var(--u)); top: calc(12 * var(--u)); color: #eefaff; font-size: max(12px, calc(18 * var(--u))); }
.desktop .city-card-go { right: calc(14 * var(--u)); bottom: calc(12 * var(--u)); height: calc(28 * var(--u)); padding: 0 calc(12 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u)); border: 1px solid #3aa9cf; background: #04121ccc; color: #e8f8ff; font-size: max(9px, calc(11 * var(--u))); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.desktop .city-card-go i { color: #4bd5ff; font-style: normal; font-size: 1.4em; line-height: 1; }
.desktop .city-card:hover .city-card-art, .desktop .city-card:focus-visible .city-card-art { transform: scale(1.05); }
.desktop .city-card:hover .city-card-go { border-color: #8ff0ff; background: #0a2a3ce6; }

.desktop .city-sprite { position: absolute; left: 0; top: 0; z-index: 0; transform-origin: 0 100%; pointer-events: none; opacity: 0; will-change: transform, opacity; }
.desktop .city-sprite img { display: block; width: 100%; height: auto; }
.desktop .city-boat { width: calc(103 * var(--u)); animation: city-boat 46s linear infinite; animation-delay: 4s; }
.desktop .city-boat img { filter: brightness(1.1) drop-shadow(0 calc(3 * var(--u)) calc(4 * var(--u)) #000a); }
@keyframes city-boat {
  0% { transform: translate(calc(652 * var(--u)), calc(318 * var(--u))) scale(1); opacity: 0; }
  5% { opacity: 1; }
  30% { transform: translate(calc(849 * var(--u)), calc(301 * var(--u))) scale(.8); }
  42% { transform: translate(calc(948 * var(--u)), calc(279 * var(--u))) scale(.6); opacity: 1; }
  50% { transform: translate(calc(988 * var(--u)), calc(269 * var(--u))) scale(.5); opacity: 0; }
  100% { transform: translate(calc(988 * var(--u)), calc(269 * var(--u))) scale(.5); opacity: 0; }
}
.desktop .city-aircraft { width: calc(76 * var(--u)); animation: city-aircraft 34s ease-in infinite; animation-delay: 9s; }
.desktop .city-aircraft img { transform: scaleX(-1); filter: drop-shadow(0 0 calc(6 * var(--u)) #3fdcff88); }
@keyframes city-aircraft {
  0% { transform: translate(calc(1640 * var(--u)), calc(38 * var(--u))) scale(1.1); opacity: 0; }
  3% { opacity: 1; }
  26% { transform: translate(calc(1175 * var(--u)), calc(10 * var(--u))) scale(.55); opacity: .9; }
  31% { transform: translate(calc(1121 * var(--u)), calc(8 * var(--u))) scale(.48); opacity: 0; }
  100% { transform: translate(calc(1121 * var(--u)), calc(8 * var(--u))) scale(.48); opacity: 0; }
}
.reduced-motion .city-video, .reduced-motion .city-sprite { display: none; }
.reduced-motion .tc-armor::before, .reduced-motion .city-anchor::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .desktop .city-video, .desktop .city-sprite { display: none; } .tc-armor::before { animation: none; } }
@media (max-width: 1599px) { .desktop .city-card.narrow .city-card-duration { display: none; } }

/* === Collection v2: vault background, clan emblems, armor panels, neutral card interiors. === */
.app[data-route="COLLECTION"] { background: linear-gradient(180deg, #02070b33, #02070b99), url("/app/client/assets/production/collection-archive-vault.jpg") center / cover fixed no-repeat; }
.collection-searchbar.tc-armor { margin: 18px 0 14px; padding: 18px 26px 16px; min-height: 86px; border: 0; }
.collection-filter-drawer.tc-armor { margin: 0 0 12px; padding: 8px 14px; border: 0; }
.archive-index.tc-armor { padding: 20px 22px; border: 0; }
.collection-faction-rail { gap: 10px; padding: 4px 2px 10px; }
.faction-node.tc-armor { --cut: 12px; flex: 0 0 auto; min-width: 158px; min-height: 76px; padding: 10px 14px 10px 12px; grid-template-columns: 44px 1fr; gap: 10px; border: 0; color: #cfe6f1; text-align: left; transition: filter .2s, transform .2s; }
.faction-emblem { width: 44px; height: 44px; display:block; align-self:center; justify-self:center; object-fit:contain; object-position:50% 50%; filter:drop-shadow(0 2px 3px rgba(0,0,0,.9)); transition:transform .2s,filter .2s; }
.faction-node.tc-armor strong { font-size: 11px; line-height: 1.2; letter-spacing: .05em; }
.faction-node.tc-armor:hover { filter: brightness(1.12); background: linear-gradient(180deg, #78909b 0, #314652 3px, #14232c 8px, #091117 48%, #101c23 88%, #3f5661 calc(100% - 3px), #8299a4 100%); }
.faction-node.tc-armor:hover .faction-emblem { transform: scale(1.06); }
.faction-node.tc-armor.active { color: #fff; }
.faction-node.tc-armor.active::before { animation-play-state: running; }
.faction-node.tc-armor.active::after { background: linear-gradient(180deg, color-mix(in srgb, var(--faction-accent, #36c8ff) 24%, #0b1b25) 0%, #07111a 60%, #0b1720 100%); box-shadow: inset 0 0 18px color-mix(in srgb, var(--faction-accent, #36c8ff) 35%, transparent); }
.faction-node.tc-armor.active .faction-emblem { filter:drop-shadow(0 2px 4px rgba(0,0,0,.95)); transform:scale(1.04); }
.faction-node.tc-armor.active strong { color: color-mix(in srgb, var(--faction-accent, #36c8ff) 55%, #fff); }
/* Card interiors: neutral steel instead of the old faction-tinted (green/teal) backing. */
.archive-featured-content { background: linear-gradient(180deg, #0c1720, #060b10 70%); }
.archive-featured-art { border-color: #2d4a5a; background: #05090d; }
.archive-featured-art::before { border-color: #ffffff14; }
.archive-featured-name { border-color: #2a4150; background: linear-gradient(180deg, #0d1a24, #070d13); }
.archive-featured-stats div, .archive-featured-effect { border-color: #2a4150; background: #080f15; }
.archive-mini-content { background: linear-gradient(180deg, #0b151d, #060a0f); }
.archive-mini-art { border-color: #2a4150; background: #05090d; }
.archive-mini-name, .archive-mini-stats em { border-color: #243a48; background: #080f15; }
.faction-node.tc-armor.active { background: linear-gradient(180deg, #78909b 0, #314652 3px, #14232c 8px, #091117 48%, #101c23 88%, #3f5661 calc(100% - 3px), #8299a4 100%); border: 0; box-shadow: 0 10px 22px rgba(0,0,0,.45); }
.desktop .collection-faction-rail { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); overflow: visible; }
.desktop .faction-node.tc-armor { min-width: 0; padding: 10px 10px 10px 10px; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; }
.desktop .faction-node.tc-armor .faction-emblem { width: 40px; height: 40px; }
.desktop .faction-node.tc-armor strong { font-size: 10px; letter-spacing: .02em; overflow-wrap: normal; hyphens: manual; }
.desktop .collection-screen { width: 100%; max-width: calc(1640 * var(--u)); }
.desktop .collection-header { padding-right: 24px; }
.archive-card-badge { padding: 3px; }
.archive-card-badge img { width:34px; height:34px; display:block; object-fit:contain; object-position:50% 50%; filter:drop-shadow(0 2px 3px #000); }
.archive-mini-art i { z-index: 2; width: 26px !important; height: 26px !important; padding: 1px !important; border-color: #ffffff30 !important; background: #050b10cc !important; }
.archive-mini-art i img { width:22px; height:22px; display:block; object-fit:contain; object-position:50% 50%; filter:drop-shadow(0 1px 2px #000); }
/* Collection v2: mode tabs in armor frames; featured card sticks fully below the sticky search + clan rail and scales to fit the viewport. */
.collection-mode-tabs { gap: 10px; }
.collection-mode-tabs button.tc-armor { --cut: 10px; min-height: 40px; padding: 8px 20px; border: 0; background: linear-gradient(180deg, #78909b 0, #314652 3px, #14232c 8px, #091117 48%, #101c23 88%, #3f5661 calc(100% - 3px), #8299a4 100%); box-shadow: 0 8px 18px rgba(0,0,0,.45); color: #9fb8c6; font-size: 11px; font-weight: 700; letter-spacing: .12em; transition: filter .2s, color .2s; }
.collection-mode-tabs button.tc-armor:hover { filter: brightness(1.15); color: #e5faff; }
.collection-mode-tabs button.tc-armor.active { color: #fff; }
.collection-mode-tabs button.tc-armor.active::before { animation-play-state: running; }
.collection-mode-tabs button.tc-armor.active::after { background: linear-gradient(180deg, #164a64 0%, #0b2433 60%, #0d2230 100%); box-shadow: inset 0 0 16px #1fd2ff66; }
.desktop .archive-stage > .archive-featured { top: calc(var(--coll-sticky-bottom, 300px) + 10px); width: min(100%, 390px, calc((100vh - var(--coll-sticky-bottom, 300px) - 76px) * 2 / 3)); }
.desktop .collection-screen { --coll-sticky-bottom: calc(86 * var(--u) + 218px); }
/* Compact collection controls: search lives inside the expandable filter drawer. */
.desktop .collection-sticky-controls { padding-top: 6px; }
.desktop .collection-faction-rail { padding-top: 0; }
.desktop .collection-filter-drawer-grid { grid-template-columns: minmax(210px,1.15fr) repeat(3,minmax(130px,.8fr)) minmax(360px,1.7fr); align-items: end; }
.collection-compact-search { position: relative; }
.collection-compact-search input { width: 100%; min-height: 36px; box-sizing: border-box; border: 1px solid #2b718f; background: #06131d; color: #e7f8ff; padding: 8px 88px 8px 11px; outline: none; }
.collection-compact-search input:focus { border-color: #58d8ff; box-shadow: 0 0 0 2px #21bdf02d; }
.collection-compact-search small { position: absolute; right: 10px; bottom: 10px; color: #86a5b7; font-size: 9px; white-space: nowrap; pointer-events: none; }
.collection-compact-search strong { color: #dff8ff; }
.desktop .collection-filter-drawer fieldset { justify-content: flex-end; }
.desktop .collection-filter-drawer legend { width: 100%; text-align: right; }
.desktop .collection-screen { --coll-sticky-bottom: calc(86 * var(--u) + 116px); }
/* Compact collection header: title, mode tabs and ownership counter share one line. */
.desktop .collection-header { min-height: calc(86 * var(--u)); padding: calc(7 * var(--u)) calc(24 * var(--u)) calc(9 * var(--u)) calc(6 * var(--u)); display: grid; grid-template-columns: minmax(calc(330 * var(--u)),1fr) auto minmax(calc(170 * var(--u)),auto); align-items: center; gap: calc(34 * var(--u)); }
.desktop .collection-heading { align-self: center; }
.desktop .collection-eyebrow { font-size: calc(9 * var(--u)); letter-spacing: .16em; }
.desktop .collection-header h1 { margin-top: calc(4 * var(--u)); font-size: calc(38 * var(--u)); letter-spacing: .045em; }
.desktop .collection-mode-tabs { margin: 0; align-self: center; gap: calc(10 * var(--u)); }
.desktop .collection-mode-tabs button.tc-armor { min-height: calc(36 * var(--u)); padding: calc(7 * var(--u)) calc(18 * var(--u)); }
.desktop .collection-counter { min-width: calc(142 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4 * var(--u)); }
.desktop .collection-counter > div { display: flex; align-items: baseline; justify-content: center; gap: calc(8 * var(--u)); white-space: nowrap; }
.desktop .collection-counter strong { color: #77e3ff; font-size: calc(31 * var(--u)); font-weight: 900; line-height: 1; text-shadow: 0 0 calc(9 * var(--u)) rgba(65,220,255,.36); }
.desktop .collection-counter span { color: #a1b9c7; font-size: calc(18 * var(--u)); }
.desktop .collection-counter small { color: #92b6c8; font-size: calc(10 * var(--u)); font-weight: 700; letter-spacing: .17em; line-height: 1; }
.desktop .collection-screen { --coll-sticky-bottom: calc(86 * var(--u) + 100px); }
/* Final collection header alignment: remove the empty band below the global HUD. */
.desktop > main:has(> .collection-screen) { padding-top: 0; }
.desktop .collection-screen { padding-top: 0; }
.desktop .collection-header { min-height: calc(72 * var(--u)); padding-top: calc(5 * var(--u)); padding-bottom: calc(5 * var(--u)); }
.desktop .collection-mode-tabs { align-self: end; margin: 0 0 calc(2 * var(--u)); transform: translateX(calc(14 * var(--u))); }
.desktop .collection-mode-tabs button.tc-armor { min-height: calc(42 * var(--u)); padding: calc(9 * var(--u)) calc(22 * var(--u)); font-size: calc(12 * var(--u)); }
.desktop .collection-counter { align-self: end; margin-bottom: calc(2 * var(--u)); transform: translateY(calc(2 * var(--u))); }
.desktop .collection-screen { --coll-sticky-bottom: calc(86 * var(--u) + 86px); }
/* Deck header: keep both mode frames on one baseline, aligned with the title and clear of it. */
.desktop.app[data-route="DECK_BUILDER"] .deck-builder-header .collection-mode-tabs {
  margin: calc(10 * var(--u)) 0 0;
  transform: none;
  align-items: center;
}
/* Deck builder: clicking the card art adds/removes it; show the real card art instead of the TC placeholder. */
.deck-card-art { position: relative; overflow: hidden; }
.deck-card-art img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 30%; }
.deck-pool-card.selected .deck-card-art::after { content: "✓"; position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #0bb5e6; color: #fff; font-weight: 700; box-shadow: 0 0 10px #1fd2ff; }
.deck-card-focus:disabled { cursor: default; }

/* === HUD frame v6 (owner's cyberpunk_turn_hud_frame_v6): asymmetric monocoque shell + orbiting edge sheen. Used on the deck screen. === */
@property --tc-trace { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes tc-trace { to { --tc-trace: 360deg; } }
.tc-hud { position: relative; isolation: isolate; border: 0 !important; clip-path: none !important; background: none !important; box-shadow: none !important; filter: drop-shadow(0 24px 36px rgba(0,0,0,.66)) drop-shadow(0 0 14px rgba(65,226,239,.10)); }
.tc-hud::before { content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none;
  clip-path: polygon(18px 0, 74% 0, 77% 8px, calc(100% - 18px) 8px, 100% 26px, 100% calc(100% - 22px), calc(100% - 20px) 100%, 29% 100%, 26% calc(100% - 8px), 18px calc(100% - 8px), 0 calc(100% - 26px), 0 26px);
  background: linear-gradient(145deg, rgba(255,255,255,.13), transparent 9% 88%, rgba(91,244,239,.06)), linear-gradient(110deg, #091015 0%, #22343d 11%, #0a1015 24%, #16242c 48%, #080d12 72%, #2c414c 90%, #0a1015 100%);
  box-shadow: inset 0 1px 0 rgba(224,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.94), inset 0 0 0 1px rgba(89,223,229,.14), inset 0 -8px 18px rgba(0,0,0,.38); }
.tc-hud::after { content: ""; position: absolute; inset: 7px; z-index: -2; pointer-events: none;
  clip-path: polygon(14px 0, 73% 0, 76% 5px, calc(100% - 14px) 5px, 100% 20px, 100% calc(100% - 18px), calc(100% - 16px) 100%, 30% 100%, 27% calc(100% - 5px), 14px calc(100% - 5px), 0 calc(100% - 20px), 0 20px);
  background: linear-gradient(90deg, transparent 0 8%, rgba(94,255,248,.30) 8.2%, transparent 8.4% 84%, rgba(121,112,255,.20) 84.2%, transparent 84.4%), repeating-linear-gradient(0deg, rgba(255,255,255,.011) 0 1px, transparent 1px 4px), radial-gradient(120% 95% at 50% -10%, #11242d 0%, #07131a 50%, #050c12 100%);
  box-shadow: inset 0 0 0 1px rgba(70,208,221,.32), inset 0 0 28px rgba(0,0,0,.45), 0 0 9px rgba(62,216,232,.09); }
.tc-hud-gloss { position: absolute; inset: 2px; z-index: -1; pointer-events: none; padding: 1.45px;
  clip-path: polygon(18px 0, 74% 0, 77% 8px, calc(100% - 18px) 8px, 100% 26px, 100% calc(100% - 22px), calc(100% - 20px) 100%, 29% 100%, 26% calc(100% - 8px), 18px calc(100% - 8px), 0 calc(100% - 26px), 0 26px);
  background: conic-gradient(from var(--tc-trace), #173a45 0deg, #68fff7 24deg, #f1ffff 38deg, #36c9e7 58deg, #1b4654 91deg, #92fff8 119deg, #4ebfff 148deg, #303d5c 181deg, #977fff 211deg, #e8e5ff 229deg, #4cd6ff 257deg, #1d4552 292deg, #6dfff5 327deg, #173a45 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: .92; filter: drop-shadow(0 0 2px rgba(89,255,247,.18)); animation: tc-trace 7.4s linear infinite; }
.tc-hud-mark { position: absolute; z-index: 4; pointer-events: none; }
.tc-hud-mark.top-a { top: 5px; left: 8%; width: 22%; height: 2px; background: linear-gradient(90deg, transparent, #77fff8 35%, #dfffff 58%, #6c76ff 80%, transparent); box-shadow: 0 0 6px rgba(82,237,244,.24); }
.tc-hud-mark.top-b { top: 9px; right: 8%; width: 13%; height: 1px; background: linear-gradient(90deg, transparent, #345b68, #8df8f4, #777cff, transparent); }
.tc-hud-mark.bottom-a { bottom: 7px; right: 11%; width: 25%; height: 2px; background: linear-gradient(90deg, transparent, #77fff8 35%, #dfffff 58%, #6c76ff 80%, transparent); box-shadow: 0 0 6px rgba(82,237,244,.24); }
.tc-hud-mark.bottom-b { bottom: 10px; left: 10%; width: 10%; height: 1px; background: linear-gradient(90deg, transparent, #345b68, #8df8f4, #777cff, transparent); }
.tc-hud-tabs { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.tc-hud-tabs::before, .tc-hud-tabs::after { content: ""; position: absolute; top: 36%; width: 7px; height: 28%; max-height: 180px; background: linear-gradient(180deg, transparent, #14252d 13%, #6cfff7 32%, #dfffff 46%, #245f74 61%, #727aff 82%, transparent); box-shadow: 0 0 7px rgba(61,221,247,.18); opacity: .82; }
.tc-hud-tabs::before { left: 5px; clip-path: polygon(100% 0, 100% 100%, 25% 88%, 0 70%, 0 30%, 25% 12%); }
.tc-hud-tabs::after { right: 5px; clip-path: polygon(0 0, 0 100%, 75% 88%, 100% 70%, 100% 30%, 75% 12%); }
.tc-hud-cut { position: absolute; z-index: 6; width: 24px; height: 24px; pointer-events: none; opacity: .8; }
.tc-hud-cut::before, .tc-hud-cut::after { content: ""; position: absolute; background: #6ffff6; box-shadow: 0 0 5px rgba(86,232,255,.32); }
.tc-hud-cut::before { width: 14px; height: 1px; top: 5px; left: 2px; transform: rotate(-24deg); transform-origin: left center; }
.tc-hud-cut::after { width: 1px; height: 10px; left: 5px; top: 10px; transform: rotate(18deg); }
.tc-hud-cut.cc1 { left: 12px; top: 10px; } .tc-hud-cut.cc2 { right: 10px; top: 11px; transform: scaleX(-1); } .tc-hud-cut.cc3 { left: 12px; bottom: 10px; transform: scaleY(-1); } .tc-hud-cut.cc4 { right: 10px; bottom: 10px; transform: scale(-1); }
.reduced-motion .tc-hud-gloss { animation: none; }

/* Deck screen v2 */
.deck-pool.tc-hud { padding: 30px 30px 28px; }
.deck-loadout.tc-hud { padding: 30px 28px 28px; }
.deck-builder-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; }
/* inner modules: machined bevel like the v6 stat pods */
.deck-pool-controls input, .deck-pool-controls select, .deck-name input { border: 1px solid rgba(84,220,227,.40); background: linear-gradient(180deg, #1b3039 0%, #0d1e25 30%, #07151c 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.96); }
.deck-slot { border: 1px solid rgba(84,220,227,.30) !important; background: linear-gradient(180deg, #16262e 0%, #0b171d 40%, #07121a 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.9); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.deck-slot.filled { border-color: color-mix(in srgb, var(--faction-accent) 60%, #2a4a55) !important; background: linear-gradient(90deg, color-mix(in srgb, var(--faction-accent) 16%, #0b1a22), #07121a 70%) !important; }
.deck-save-button { min-height: 50px; border: 1px solid rgba(84,220,227,.62) !important; background: linear-gradient(180deg, #1f4150 0%, #10262f 30%, #08171e 100%) !important; color: #eaffff !important; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; clip-path: polygon(11px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 6px 100%, 0 calc(100% - 6px), 0 11px); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 14px rgba(92,239,241,.10); }
.deck-save-button:hover:not(:disabled) { filter: brightness(1.15); }

/* Saved decks library: plaques */
.deck-library { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(84,220,227,.22); }
.deck-library h2 { margin: 0 0 12px; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: #dff8ff; display: flex; justify-content: space-between; align-items: baseline; }
.deck-library h2 small { color: #54d8ff; font-size: 13px; }
.deck-library-new { width: 100%; min-height: 42px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px dashed rgba(110,245,241,.55) !important; background: #06131a !important; color: #9ff4f0 !important; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.deck-library-new::before { content: "+"; font-size: 18px; line-height: 1; }
.deck-library-new:hover:not(:disabled) { background: #0b2430 !important; color: #fff !important; }
.deck-library-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.deck-plaque { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 40px; min-height: 56px; border: 1px solid rgba(84,220,227,.30); background: linear-gradient(180deg, #172a33 0%, #0c1b22 40%, #07131a 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.9); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); transition: border-color .2s, filter .2s; }
.deck-plaque:hover { border-color: rgba(128,245,244,.62); filter: brightness(1.1); }
.deck-plaque.editing { border-color: #6ffff6; background: linear-gradient(90deg, #11404c 0%, #0b2530 55%, #07141b 100%); box-shadow: inset 3px 0 0 #6ffff6, 0 0 14px rgba(92,239,241,.12); }
.deck-plaque-main { min-height: 0; padding: 8px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; column-gap: 8px; row-gap: 2px; border: 0; background: none; color: #e8f8ff; text-align: left; cursor: pointer; }
.deck-plaque-main:disabled { cursor: default; opacity: 1; }
.deck-plaque-main strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.deck-plaque-main small { grid-row: 2; color: #7fa0b0; font-size: 11px; }
.deck-plaque-tags { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; }
.deck-plaque-tags em { padding: 2px 7px; border: 1px solid; font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.deck-plaque-tags .tag-battle { border-color: #ffb24d99; background: #3a2610aa; color: #ffcf8a; }
.deck-plaque-tags .tag-editing { border-color: #6ffff699; background: #0d3a44aa; color: #b9fffa; }
.deck-plaque-delete { min-height: 0; display: grid; place-items: center; border: 0; border-left: 1px solid rgba(84,220,227,.18); background: none; color: #6f8f9c; cursor: pointer; }
.deck-plaque-delete svg { width: 18px; height: 18px; }
.deck-plaque-delete:hover:not(:disabled) { background: #3a101899; color: #ff8a9a; }
.deck-plaque-delete:disabled { opacity: .25; cursor: not-allowed; }

/* Pool card frames — two variants for owner comparison. HUD (default) vs ARMOR. */
.deck-pool-card { transition: transform .2s, filter .2s; }
.deck-cards-hud .deck-pool-card { padding: 9px; border: 1px solid transparent; background: linear-gradient(180deg, #16262e 0%, #0a161c 45%, #07121a 100%) padding-box, linear-gradient(120deg, #394851, #7ff7f2 9%, #3a7f8e 18%, #192227 38%, #0a0e11 55%, #3d7382 75%, #b9fff9 89%, #42515a) border-box; clip-path: polygon(12px 0, calc(100% - 22%) 0, calc(100% - 20%) 5px, calc(100% - 8px) 5px, 100% 16px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 24% 100%, 22% calc(100% - 5px), 8px calc(100% - 5px), 0 calc(100% - 16px), 0 12px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.96); }
.deck-cards-hud .deck-pool-card:hover { filter: brightness(1.12); transform: translateY(-2px); }
.deck-cards-hud .deck-pool-card.selected { background: linear-gradient(180deg, color-mix(in srgb, var(--faction-accent) 20%, #122830), #07121a 60%) padding-box, linear-gradient(120deg, #6ffff6, #e8ffff 20%, var(--faction-accent) 50%, #777eff 80%, #6ffff6) border-box; box-shadow: 0 0 16px color-mix(in srgb, var(--faction-accent) 35%, transparent); }
.deck-cards-armor .deck-pool-card { --cut: 12px; padding: 9px; border: 0; clip-path: polygon(var(--cut) 0, calc(100% - 26px) 0, calc(100% - 16px) 6px, 100% 6px, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 22px 100%, 13px calc(100% - 6px), 0 calc(100% - 6px), 0 var(--cut)); background: linear-gradient(180deg, #78909b 0, #314652 3px, #14232c 8px, #091117 48%, #101c23 88%, #3f5661 calc(100% - 3px), #8299a4 100%); box-shadow: inset 0 1px rgba(255,255,255,.20); }
.deck-cards-armor .deck-pool-card:hover { filter: brightness(1.12); transform: translateY(-2px); }
.deck-cards-armor .deck-pool-card.selected { background: linear-gradient(180deg, #9ff8ff 0, var(--faction-accent) 3px, #14343f 8px, #0a1a22 48%, #102530 88%, var(--faction-accent) calc(100% - 3px), #bdfaff 100%); box-shadow: 0 0 16px color-mix(in srgb, var(--faction-accent) 35%, transparent); }
/* Deck v2.1: no corner ticks on HUD frame; pool cards use the collection rarity frames. */
.tc-hud-cut { display: none; }
:where(.deck-pool-card) { --mini-frame-light:#eef5fa; --mini-frame-mid:#8997a2; --mini-frame-dark:#232b32; --mini-frame-glow:#dce9f2; }
.deck-cards-rarity .deck-pool-card { position: relative; padding: 10px; border: 0; background: transparent; box-shadow: none; clip-path: none; }
.deck-cards-rarity .deck-pool-card > :not(.archive-mini-frame) { position: relative; z-index: 1; }
.deck-cards-rarity .deck-pool-card:hover { filter: brightness(1.12); transform: translateY(-2px); background: transparent; }
.deck-cards-rarity .deck-pool-card.selected { background: transparent; }
.deck-cards-rarity .deck-pool-card.selected .archive-mini-frame, .deck-cards-rarity .deck-pool-card:hover .archive-mini-frame { box-shadow: 0 0 0 1px color-mix(in srgb, var(--mini-frame-light) 75%, #fff), 0 0 14px color-mix(in srgb, var(--mini-frame-glow) 60%, transparent), inset 0 0 16px #000; }
.deck-library-hint { margin: 8px 2px 0; color: #7fa0b0; font-size: 11px; }

/* Collection + deck: new deck background, see-through panels so the background art reads. */
.app[data-route="DECK_BUILDER"] { background: linear-gradient(180deg, #02070b33, #02070b88), url("/app/client/assets/production/deck-archive-vault.jpg") center / cover fixed no-repeat; }
.app[data-route="COLLECTION"] { background: linear-gradient(180deg, #02070b1a, #02070b80), url("/app/client/assets/production/collection-archive-vault.jpg") center / cover fixed no-repeat; }
.collection-searchbar.tc-armor, .collection-filter-drawer.tc-armor, .archive-index.tc-armor {
  background: linear-gradient(180deg, #78909b 0, #314652 3px, #14232c 8px, transparent 10px, transparent calc(100% - 10px), #101c23 calc(100% - 8px), #3f5661 calc(100% - 3px), #8299a4 100%),
              linear-gradient(90deg, #2a3a44 0, #14232c 6px, transparent 10px, transparent calc(100% - 10px), #14232c calc(100% - 6px), #2a3a44 100%);
}
.collection-searchbar.tc-armor::after, .collection-filter-drawer.tc-armor::after, .archive-index.tc-armor::after {
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 8%), linear-gradient(180deg, rgba(10,22,30,.62) 0%, rgba(4,10,15,.48) 60%, rgba(10,20,28,.58) 100%);
  backdrop-filter: blur(3px);
}
.tc-hud::before { padding: 7px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.tc-hud::after {
  background: linear-gradient(90deg, transparent 0 8%, rgba(94,255,248,.30) 8.2%, transparent 8.4% 84%, rgba(121,112,255,.20) 84.2%, transparent 84.4%), linear-gradient(180deg, rgba(10,24,32,.60) 0%, rgba(5,12,18,.46) 55%, rgba(8,18,26,.58) 100%);
  backdrop-filter: blur(3px);
}
.collection-sticky-controls { background: linear-gradient(180deg, #050d14cc 0%, #050d1499 78%, #050d1400 100%); }

/* v2.2: collection gallery background; no vertical inner lines in HUD frames; lighter archive panel + clan buttons. */
.app[data-route="COLLECTION"] { background: linear-gradient(180deg, #02070b10, #02070b70), url("/app/client/assets/production/collection-card-gallery.jpg") center / cover fixed no-repeat; }
.tc-hud::after { background: linear-gradient(180deg, rgba(10,24,32,.60) 0%, rgba(5,12,18,.46) 55%, rgba(8,18,26,.58) 100%); }
.archive-index.tc-armor::after { background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 8%), linear-gradient(180deg, rgba(8,18,26,.34) 0%, rgba(4,10,15,.24) 60%, rgba(8,18,26,.32) 100%); backdrop-filter: blur(2px); }
.faction-node.tc-armor, .faction-node.tc-armor:hover, .faction-node.tc-armor.active {
  background: linear-gradient(180deg, #78909b 0, #314652 3px, #14232c 7px, transparent 9px, transparent calc(100% - 9px), #101c23 calc(100% - 7px), #3f5661 calc(100% - 3px), #8299a4 100%),
              linear-gradient(90deg, #2a3a44 0, #14232c 5px, transparent 9px, transparent calc(100% - 9px), #14232c calc(100% - 5px), #2a3a44 100%);
}
.faction-node.tc-armor::after { background: linear-gradient(180deg, rgba(10,22,30,.42), rgba(4,10,15,.32)); backdrop-filter: blur(2px); }
.faction-node.tc-armor.active::after { background: linear-gradient(180deg, color-mix(in srgb, var(--faction-accent, #36c8ff) 30%, rgba(8,20,28,.4)) 0%, rgba(6,14,20,.4) 70%); }
/* v2.3: every card fully opaque and readable (locked ones too); panel see-through halfway between v2.1 and v2.2. */
.archive-mini-card.locked, .archive-mini-card.locked:hover { opacity: 1; filter: none; }
.archive-mini-card.locked .archive-mini-art img { filter: none; opacity: 1; }
.archive-mini-content { background: linear-gradient(180deg, #0b151d, #060a0f) !important; }
.archive-index.tc-armor::after { background: linear-gradient(180deg, rgba(255,255,255,.07), transparent 8%), linear-gradient(180deg, rgba(9,20,28,.48) 0%, rgba(4,10,15,.36) 60%, rgba(9,20,28,.45) 100%); }
.faction-node.tc-armor::after { background: linear-gradient(180deg, rgba(10,22,30,.54), rgba(4,10,15,.44)); }

/* === Battle hub v1 (desktop). Stage 1560 x 890 in --bu (≈ u, shrinks to fit window height). Frames: tc-cut-frame.js (SVG + clip-path), material as .tc-armor, glossy steel. === */
@property --tc-trace { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes tc-trace { to { --tc-trace: 360deg; } }
.app[data-route="BATTLE_HUB"] { background: linear-gradient(90deg, #03080ecc, #03080e33 40%, #03080e40), linear-gradient(0deg, #03080e99, transparent 45%), url("/app/client/assets/ui/battle/bh-bg.jpg") center / cover fixed no-repeat; }
.desktop > main:has(> .battle-hub) { padding: calc(10 * var(--u)) 0 0; }
.desktop .battle-hub { --bu: min(calc(var(--u) * .96), calc((100vh - 86 * var(--u) - 28px) / 890)); position: relative; width: calc(1560 * var(--bu)); height: calc(890 * var(--bu)); margin: 0 0 0 calc(64 * var(--u)); color: #e8f1f8; }
.battle-hub .bh-title { position: absolute; left: 0; top: 0; width: calc(1000 * var(--bu)); height: calc(170 * var(--bu)); }
.battle-hub .bh-title p { position: absolute; left: calc(44 * var(--bu)); top: calc(18 * var(--bu)); margin: 0; font-size: calc(14 * var(--bu)); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #36c8ff; }
.battle-hub .bh-title h1 { position: absolute; left: calc(42 * var(--bu)); top: calc(40 * var(--bu)); margin: 0; font-size: calc(60 * var(--bu)); line-height: 1; font-weight: 900; letter-spacing: .01em; text-transform: uppercase; color: #f2f7fb; text-shadow: 0 calc(3 * var(--bu)) calc(14 * var(--bu)) #000c; white-space: nowrap; }
.battle-hub .bh-title > span { position: absolute; left: calc(44 * var(--bu)); top: calc(116 * var(--bu)); width: calc(560 * var(--bu)); font-size: calc(14 * var(--bu)); line-height: 1.45; letter-spacing: .04em; text-transform: uppercase; color: #b9cbd8; }
.battle-hub .bh-slash { position: absolute; left: calc(726 * var(--bu)); top: calc(46 * var(--bu)); width: calc(2 * var(--bu)); height: calc(104 * var(--bu)); transform: skewX(-32deg); background: linear-gradient(180deg, transparent, #36c8ff 30%, #9ff4ff 55%, #2c6fae 85%, transparent); box-shadow: 0 0 calc(8 * var(--bu)) #36c8ff88; }
.battle-hub .bh-title em { position: absolute; left: calc(776 * var(--bu)); top: calc(58 * var(--bu)); display: grid; font-style: normal; font-size: calc(15 * var(--bu)); line-height: 1.45; letter-spacing: .06em; text-transform: uppercase; color: #cfe3ee; }

.battle-hub .bh-frame { position: absolute; isolation: isolate; filter: drop-shadow(0 calc(22 * var(--bu)) calc(30 * var(--bu)) rgba(0,0,0,.6)); }
.battle-hub .bh-quick { left: calc(8 * var(--bu)); top: calc(186 * var(--bu)); width: calc(953 * var(--bu)); height: calc(355 * var(--bu)); }
.battle-hub .bh-deck { left: calc(988 * var(--bu)); top: calc(213 * var(--bu)); width: calc(537 * var(--bu)); height: calc(349 * var(--bu)); }
.battle-hub .bh-mode { top: calc(580 * var(--bu)); width: calc(502 * var(--bu)); height: calc(300 * var(--bu)); }
.battle-hub .bh-slot-1 { left: calc(8 * var(--bu)); } .battle-hub .bh-slot-2 { left: calc(529 * var(--bu)); } .battle-hub .bh-slot-3 { left: calc(1050 * var(--bu)); }
.battle-hub .bh-podium { position: absolute; z-index: 3; left: calc(1034 * var(--bu)); top: calc(300 * var(--bu)); width: calc(360 * var(--bu)); pointer-events: none; filter: drop-shadow(0 calc(10 * var(--bu)) calc(18 * var(--bu)) rgba(0,0,0,.6)); }

.tc-cut-glass, .tc-cut-art, .tc-cut-metal, .tc-cut-rim { position: absolute; inset: 0; pointer-events: none; }
.tc-cut-glass { z-index: 0; background: linear-gradient(180deg, rgba(10,24,32,.62) 0%, rgba(5,12,18,.5) 55%, rgba(8,18,26,.6) 100%); backdrop-filter: blur(3px); }
.tc-cut-art { z-index: 1; overflow: hidden; }
.tc-cut-art img { position: absolute; top: 0; height: 100%; object-fit: cover; }
.tc-cut-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,10,18,.95) 0%, rgba(3,10,18,.8) 24%, rgba(3,10,18,.12) 55%, rgba(3,10,18,0) 72%), linear-gradient(0deg, rgba(3,10,18,.55), transparent 42%); }
.tc-cut-metal { z-index: 2; background: linear-gradient(115deg, #0e1a21 0%, #4b6674 7%, #c9dde6 10%, #3a5260 13%, #0f1b22 26%, #1f313b 45%, #7d98a5 58%, #e3f3f9 60.5%, #3c5563 63%, #101c23 76%, #2f4653 90%, #0e1a21 100%); }
.tc-cut-rim { z-index: 3; background: conic-gradient(from var(--tc-trace), #163844 0deg, #4c707c 16deg, #a9ffff 27deg, #44f9f1 38deg, #1ca6d2 58deg, #172d38 91deg, #47a5ff 128deg, #172c45 153deg, #927aff 190deg, #e9e4ff 203deg, #51b3ff 224deg, #173541 259deg, #77fff8 303deg, #f0ffff 315deg, #2be2ef 328deg, #163844 360deg); animation: tc-trace 8s linear infinite; }
.tc-cut-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4; overflow: visible; pointer-events: none; }
.tc-cut-body { position: absolute; inset: 0; z-index: 5; }
.bh-frame:hover > .tc-cut-rim { filter: brightness(1.2); }
.reduced-motion .tc-cut-rim { animation: none; }
@media (prefers-reduced-motion: reduce) { .tc-cut-rim { animation: none; } }

.battle-hub .tc-cut-body > * { position: absolute; margin: 0; }
.battle-hub .bh-status { font-size: calc(13 * var(--bu)); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #4bd5ff; }
.battle-hub .bh-icon { filter: drop-shadow(0 0 calc(10 * var(--bu)) rgba(54,200,255,.45)); }
.battle-hub h2 { font-size: calc(22 * var(--bu)); font-weight: 800; line-height: 1.1; text-transform: uppercase; color: #f2f7fb; text-shadow: 0 calc(2 * var(--bu)) calc(10 * var(--bu)) rgba(0,0,0,.85); white-space: nowrap; }
.battle-hub .tc-cut-body p { font-size: calc(15 * var(--bu)); line-height: 1.35; color: #c8d8e4; text-shadow: 0 1px 6px #000; }
.battle-hub .bh-num { font-size: calc(32 * var(--bu)); font-weight: 600; line-height: 1; color: rgba(150,186,206,.5); }
.battle-hub .bh-side { display: grid; font-size: calc(12 * var(--bu)); line-height: 1.6; letter-spacing: .05em; text-transform: uppercase; color: rgba(196,218,232,.82); }
.battle-hub .bh-go { display: inline-flex; align-items: center; justify-content: center; gap: calc(22 * var(--bu)); min-height: 0; padding: 0 calc(20 * var(--bu)); border: calc(1.5 * var(--bu)) solid rgba(54,200,255,.85); border-radius: 0; background: linear-gradient(180deg, rgba(8,36,52,.84), rgba(4,20,31,.92)); box-shadow: inset 0 0 calc(14 * var(--bu)) rgba(54,200,255,.12); color: #eaf6ff; font-size: calc(12.5 * var(--bu)); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; transition: background .2s, border-color .2s; }
.battle-hub .bh-go::after { content: ""; width: calc(9 * var(--bu)); height: calc(9 * var(--bu)); border: solid #4bd5ff; border-width: calc(2.5 * var(--bu)) calc(2.5 * var(--bu)) 0 0; transform: rotate(45deg); }
.battle-hub .bh-go:hover { background: linear-gradient(180deg, rgba(14,64,88,.88), rgba(6,30,44,.92)); border-color: #8ae8ff; }
.battle-hub .bh-go:disabled { opacity: .5; cursor: default; }

.battle-hub .bh-quick .tc-cut-art img { left: calc(120 * var(--bu)); width: calc(1000 * var(--bu)); object-position: 50% 72%; }
.battle-hub .bh-quick .bh-status { left: calc(46 * var(--bu)); top: calc(36 * var(--bu)); }
.battle-hub .bh-quick .bh-icon { left: calc(48 * var(--bu)); top: calc(64 * var(--bu)); width: calc(98 * var(--bu)); }
.battle-hub .bh-quick h2 { left: calc(44 * var(--bu)); top: calc(176 * var(--bu)); font-size: calc(34 * var(--bu)); }
.battle-hub .bh-quick p { left: calc(46 * var(--bu)); top: calc(226 * var(--bu)); font-size: calc(16 * var(--bu)); }
.battle-hub .bh-quick .bh-go { left: calc(46 * var(--bu)); top: calc(272 * var(--bu)); width: calc(300 * var(--bu)); height: calc(44 * var(--bu)); font-size: calc(13 * var(--bu)); }
.battle-hub .bh-quick .bh-num { left: calc(822 * var(--bu)); top: calc(38 * var(--bu)); font-size: calc(36 * var(--bu)); }
.battle-hub .bh-quick .bh-side { left: calc(868 * var(--bu)); top: calc(252 * var(--bu)); }

.battle-hub .bh-mode .tc-cut-art img { left: calc(110 * var(--bu)); width: calc(420 * var(--bu)); object-position: 50% 50%; }
.battle-hub .bh-mode .tc-cut-art::after { background: linear-gradient(90deg, rgba(3,10,18,.92) 0%, rgba(3,10,18,.72) 30%, rgba(3,10,18,.1) 62%, rgba(3,10,18,0) 80%), linear-gradient(0deg, rgba(3,10,18,.6), transparent 45%); }
.battle-hub .bh-mode .bh-status { left: calc(41 * var(--bu)); top: calc(24 * var(--bu)); }
.battle-hub .bh-mode .bh-icon { left: calc(38 * var(--bu)); top: calc(56 * var(--bu)); width: calc(70 * var(--bu)); }
.battle-hub .bh-mode h2 { left: calc(36 * var(--bu)); top: calc(148 * var(--bu)); }
.battle-hub .bh-mode p { left: calc(38 * var(--bu)); top: calc(178 * var(--bu)); width: calc(300 * var(--bu)); font-size: calc(14 * var(--bu)); }
.battle-hub .bh-mode .bh-go { left: calc(36 * var(--bu)); top: calc(232 * var(--bu)); width: calc(268 * var(--bu)); height: calc(44 * var(--bu)); }
.battle-hub .bh-mode .bh-num { left: calc(444 * var(--bu)); top: calc(18 * var(--bu)); }
.battle-hub .bh-mode .bh-side { left: calc(410 * var(--bu)); top: calc(198 * var(--bu)); font-size: calc(11 * var(--bu)); letter-spacing: .02em; }

.battle-hub .bh-deck .bh-status { left: calc(52 * var(--bu)); top: calc(27 * var(--bu)); width: calc(210 * var(--bu)); padding-bottom: calc(9 * var(--bu)); border-bottom: calc(1 * var(--bu)) solid rgba(54,200,255,.4); }
.battle-hub .bh-deck-name { left: calc(52 * var(--bu)); top: calc(56 * var(--bu)); font-size: calc(22 * var(--bu)); font-weight: 700; }
.battle-hub .bh-deck-count { left: calc(52 * var(--bu)); top: calc(90 * var(--bu)); font-size: calc(17 * var(--bu)); color: #9fc0d4; }
.battle-hub .bh-deck .bh-go { left: calc(266 * var(--bu)); top: calc(69 * var(--bu)); width: calc(228 * var(--bu)); height: calc(39 * var(--bu)); font-size: calc(11.5 * var(--bu)); }
.battle-hub .bh-deck .bh-side { left: calc(457 * var(--bu)); top: calc(222 * var(--bu)); }

/* === Goals hub v1 (desktop). The 1672 x 941 background begins behind the left-menu edge and stays
   bottom-anchored. It fills the available height first, so the complete Vardem flag remains visible
   instead of being cropped by a full-window "cover" scale. Stage = image area y 75..941. === */
.app[data-route="GOALS"] {
  --goals-bg-scale: max(calc((100vw - 228 * var(--u)) / 1672), calc(100vh / 941));
  background-color: #03080e;
  background-image: url("/app/client/assets/ui/goals/gl-bg.jpg");
  background-position: calc(228 * var(--u)) bottom;
  background-size: calc(1672 * var(--goals-bg-scale)) calc(941 * var(--goals-bg-scale));
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.desktop > main:has(> .goals-hub) { position: relative; height: calc(100vh - 86 * var(--u)); padding: 0; overflow: hidden; }
.desktop .goals-hub { --s: var(--goals-bg-scale); --gs: min(var(--s), calc((100vh - 86 * var(--u)) / 866));
  position: absolute; bottom: 0; left: calc(854 * var(--s) - 854 * var(--gs));
  width: calc(1672 * var(--gs)); height: calc(866 * var(--gs)); color: #e8f1f8; }
.goals-hub > * { position: absolute; margin: 0; }
.goals-hub .gl-title-block { left: calc(540 * var(--gs)); top: calc(46 * var(--gs)); width: calc(600 * var(--gs)); text-align: center; }
.goals-hub .gl-title-block p { margin: 0; font-size: calc(14 * var(--gs)); font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: #36c8ff; }
.goals-hub .gl-title-block h1 { margin: calc(4 * var(--gs)) 0 0; font-size: calc(84 * var(--gs)); line-height: 1; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; color: #f3f8fb; text-shadow: 0 calc(3 * var(--gs)) calc(16 * var(--gs)) #000c; }
.goals-hub .gl-title-block span { display: block; margin-top: calc(18 * var(--gs)); font-size: calc(17 * var(--gs)); color: #c9d9e4; text-shadow: 0 1px 6px #000; }
.goals-hub .gl-motto { display: grid; white-space: nowrap; font-size: calc(14 * var(--gs)); line-height: 1.45; letter-spacing: .08em; text-transform: uppercase; color: rgba(200,222,236,.78); }
.goals-hub .gl-motto::after { content: ""; width: calc(20 * var(--gs)); height: 1px; margin-top: calc(10 * var(--gs)); background: rgba(200,222,236,.6); }
.goals-hub .gl-motto { position: fixed; left: auto; right: calc(52 * var(--u)); top: calc(100vh - (941 - 452) * var(--s)); transform: none; justify-items: center; text-align: center; }
.goals-hub .gl-motto::after { justify-self: center; }

.goals-hub .gl-cards { left: calc(430 * var(--gs)); top: calc(222 * var(--gs)); width: calc(818 * var(--gs)); height: calc(453 * var(--gs)); }

/* Card frame: from the owner's sci_fi_frames.html, scaled in --gs, glossy steel like the battle hub. */
.gl-card { --c: calc(18 * var(--gs)); position: absolute; top: 0; width: calc(395 * var(--gs)); height: 100%; isolation: isolate;
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
  background: linear-gradient(115deg, #0e1a21 0%, #4b6674 7%, #c9dde6 10%, #3a5260 13%, #0f1b22 26%, #1f313b 45%, #7d98a5 58%, #e3f3f9 60.5%, #3c5563 63%, #101c23 76%, #2f4653 90%, #0e1a21 100%);
  filter: drop-shadow(0 calc(22 * var(--gs)) calc(30 * var(--gs)) rgba(0,0,0,.6)); }
.gl-card-contracts { left: 0; } .gl-card-season { right: 0; }
.gl-card::before { content: ""; position: absolute; inset: 0; z-index: 10; padding: calc(2 * var(--gs)); clip-path: inherit; pointer-events: none;
  background: linear-gradient(115deg, #23343d 0%, #8da2ab 8%, #1a2b35 15%, #03a9d4 26%, #efffff 29%, #19e9ff 33%, #0b6c8b 42%, #21313b 54%, #94a7b0 66%, #21313a 75%, #19e9ff 84%, #f3ffff 87%, #24343d 100%); background-size: 320% 320%; animation: gl-perimeter 5.8s ease-in-out infinite;
  filter: drop-shadow(0 0 calc(2 * var(--gs)) rgba(64,224,255,.32));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.gl-card::after { content: ""; position: absolute; inset: calc(7 * var(--gs)); z-index: 1; pointer-events: none; border: 1px solid rgba(112,222,242,.3);
  clip-path: polygon(calc(12 * var(--gs)) 0, calc(100% - 12 * var(--gs)) 0, 100% calc(12 * var(--gs)), 100% calc(100% - 12 * var(--gs)), calc(100% - 12 * var(--gs)) 100%, calc(12 * var(--gs)) 100%, 0 calc(100% - 12 * var(--gs)), 0 calc(12 * var(--gs))); }
.gl-inner { position: absolute; inset: calc(14 * var(--gs)); z-index: 2; overflow: hidden; border: 1px solid rgba(28,227,255,.7); box-shadow: 0 0 calc(7 * var(--gs)) rgba(29,234,255,.35), inset 0 0 calc(20 * var(--gs)) rgba(0,206,255,.08); background: #030b11;
  clip-path: polygon(calc(10 * var(--gs)) 0, calc(100% - 10 * var(--gs)) 0, 100% calc(10 * var(--gs)), 100% calc(100% - 10 * var(--gs)), calc(100% - 10 * var(--gs)) 100%, calc(10 * var(--gs)) 100%, 0 calc(100% - 10 * var(--gs)), 0 calc(10 * var(--gs))); }
.gl-art { position: absolute; left: 0; top: 0; width: 100%; height: 56%; object-fit: cover; object-position: 50% 30%; }
/* Transition: the art fades into a dark info panel whose top edge has shoulders and a neon line. */
.gl-panel { position: absolute; left: 0; right: 0; top: calc(171 * var(--gs)); bottom: 0; }
.gl-panel::before { content: ""; position: absolute; inset: 0; clip-path: polygon(0 0, calc(33 * var(--gs)) calc(28 * var(--gs)), calc(100% - 30 * var(--gs)) calc(28 * var(--gs)), 100% calc(48 * var(--gs)), 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(5,17,26,.82) 0, rgba(4,13,20,.94) calc(70 * var(--gs)), rgba(3,10,16,.97) 100%); backdrop-filter: blur(2px); }
.gl-panel::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(52 * var(--gs));
  clip-path: polygon(0 0, calc(33 * var(--gs)) calc(28 * var(--gs)), calc(100% - 30 * var(--gs)) calc(28 * var(--gs)), 100% calc(48 * var(--gs)), 100% calc(50.5 * var(--gs)), calc(100% - 30.7 * var(--gs)) calc(30.2 * var(--gs)), calc(32.2 * var(--gs)) calc(30.2 * var(--gs)), 0 calc(2.6 * var(--gs)));
  background: linear-gradient(90deg, rgba(43,190,230,.45) 0, #52e6ff 9%, #bff8ff 30%, #f0feff 50%, #bff8ff 70%, #52e6ff 91%, rgba(43,190,230,.45) 100%); filter: drop-shadow(0 0 calc(5 * var(--gs)) #1fd7ff); }
.gl-inner::after { content: ""; position: absolute; left: 0; right: 0; top: calc(80 * var(--gs)); height: calc(120 * var(--gs)); background: linear-gradient(180deg, transparent, rgba(3,11,17,.55) 60%, rgba(3,11,17,.8)); pointer-events: none; }
.gl-panel { z-index: 1; }

.gl-rail { position: absolute; left: calc(46 * var(--gs)); right: calc(46 * var(--gs)); height: calc(2 * var(--gs)); z-index: 7; background: linear-gradient(90deg, transparent, rgba(0,126,174,.42) 7%, #19e9ff 17%, #d1ffff 31%, #03a9d4 48%, #19e9ff 73%, #b9ffff 86%, transparent); background-size: 220% 100%; animation: gl-rail 3.8s linear infinite; box-shadow: 0 0 calc(5 * var(--gs)) rgba(0,237,255,.9); }
.gl-rail.top { top: calc(6 * var(--gs)); } .gl-rail.bottom { bottom: calc(6 * var(--gs)); animation-direction: reverse; }
.gl-side { position: absolute; top: calc(70 * var(--gs)); bottom: calc(70 * var(--gs)); width: calc(2 * var(--gs)); z-index: 8; background: linear-gradient(180deg, transparent, rgba(64,238,255,.8) 12%, rgba(0,198,236,.25) 32%, rgba(0,198,236,.7) 50%, rgba(0,198,236,.25) 68%, rgba(64,238,255,.8) 88%, transparent); box-shadow: 0 0 calc(5 * var(--gs)) rgba(0,231,255,.7); }
.gl-side.left { left: calc(6 * var(--gs)); } .gl-side.right { right: calc(6 * var(--gs)); }
.gl-joint { position: absolute; top: 50%; z-index: 13; width: calc(10 * var(--gs)); height: calc(38 * var(--gs)); transform: translateY(-50%); background: linear-gradient(180deg, #4c5e67 0%, #111b21 22%, #c5d6de 40%, #1c2a31 61%, #0b1216 76%, #566872 100%); clip-path: polygon(35% 0, 100% 16%, 100% 84%, 35% 100%, 0 80%, 0 20%); }
.gl-joint.left { left: calc(2 * var(--gs)); } .gl-joint.right { right: calc(2 * var(--gs)); transform: translateY(-50%) scaleX(-1); }
.gl-corner { position: absolute; z-index: 12; width: calc(40 * var(--gs)); height: calc(13 * var(--gs)); pointer-events: none;
  background: linear-gradient(180deg, #c9dbe3 0, #7d919b 12%, #2d3d46 30%, #1a2830 62%, #3a4b55 88%, #0c151b 100%);
  clip-path: polygon(calc(6 * var(--gs)) 0, calc(100% - 6 * var(--gs)) 0, 100% 50%, calc(100% - 6 * var(--gs)) 100%, calc(6 * var(--gs)) 100%, 0 50%);
  filter: drop-shadow(0 0 calc(3 * var(--gs)) rgba(40,200,255,.35)); }
.gl-corner::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(5 * var(--gs)); height: calc(5 * var(--gs)); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 32%, #e9f6fb 0 14%, #6c7e87 15% 34%, #0b1318 35% 100%); }
.gl-corner.tl { left: calc(-9 * var(--gs)); top: calc(3.5 * var(--gs)); transform: rotate(-45deg); }
.gl-corner.tr { right: calc(-9 * var(--gs)); top: calc(3.5 * var(--gs)); transform: rotate(45deg); }
.gl-corner.br { right: calc(-9 * var(--gs)); bottom: calc(3.5 * var(--gs)); transform: rotate(-45deg); }
.gl-corner.bl { left: calc(-9 * var(--gs)); bottom: calc(3.5 * var(--gs)); transform: rotate(45deg); }
@keyframes gl-perimeter { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes gl-rail { from { background-position: 0% 0; } to { background-position: 220% 0; } }
.reduced-motion .gl-card::before, .reduced-motion .gl-rail { animation: none; }
@media (prefers-reduced-motion: reduce) { .gl-card::before, .gl-rail { animation: none; } }
.gl-card:hover::before { filter: brightness(1.25); }

.gl-body { position: absolute; inset: 0; z-index: 14; }
.gl-body > * { position: absolute; margin: 0; }
.gl-status { left: calc(52 * var(--gs)); top: calc(232 * var(--gs)); font-size: calc(13 * var(--gs)); font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: #3fd6ff; }
.gl-meta { right: calc(50 * var(--gs)); top: calc(224 * var(--gs)); font-size: calc(26 * var(--gs)); font-weight: 800; color: #f3f8fb; }
.gl-icon { left: calc(48 * var(--gs)); top: calc(262 * var(--gs)); width: calc(46 * var(--gs)); height: calc(46 * var(--gs)); object-fit: contain; filter: drop-shadow(0 0 calc(6 * var(--gs)) rgba(54,220,255,.55)); }
.gl-title { left: calc(117 * var(--gs)); top: calc(268 * var(--gs)); font-size: calc(26 * var(--gs)); font-weight: 800; text-transform: uppercase; color: #f3f8fb; white-space: nowrap; }
.gl-detail { left: calc(117 * var(--gs)); top: calc(314 * var(--gs)); font-style: normal; white-space: nowrap; font-size: calc(14 * var(--gs)); color: #c3d3de; }
.gl-go { left: calc(42 * var(--gs)); right: calc(42 * var(--gs)); top: calc(370 * var(--gs)); height: calc(48 * var(--gs)); display: flex; align-items: center; justify-content: center; gap: calc(20 * var(--gs)); padding: 0; border: calc(1.5 * var(--gs)) solid rgba(54,210,255,.9); border-radius: calc(4 * var(--gs)); background: linear-gradient(180deg, rgba(6,32,46,.86), rgba(3,18,28,.92)); box-shadow: 0 0 calc(8 * var(--gs)) rgba(54,210,255,.3), inset 0 0 calc(12 * var(--gs)) rgba(54,210,255,.14); color: #eaf6ff; font-size: calc(14 * var(--gs)); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .2s, border-color .2s; }
.gl-go::after { content: ""; width: calc(8 * var(--gs)); height: calc(8 * var(--gs)); border: solid #4bd5ff; border-width: calc(2.5 * var(--gs)) calc(2.5 * var(--gs)) 0 0; transform: rotate(45deg); }
.gl-go:hover { background: linear-gradient(180deg, rgba(14,64,88,.9), rgba(6,30,44,.94)); border-color: #8ae8ff; }

/* === Organization headquarters v1 (desktop). The owner's 1671 x 941 scene is the geometry. === */
.app[data-route="ORGANIZATION"] { background: #02080d; }
.desktop > main:has(> .organization-hub) { position: relative; height: calc(100vh - 86 * var(--u)); padding: 0; overflow: hidden; }
.desktop .organization-hub {
  --ow: calc(100vw / 1671); --oh: calc(100vh / 941); --oz: min(var(--ow), var(--oh));
  position: absolute; left: calc(-228 * var(--u)); top: calc(-86 * var(--u)); width: 100vw; max-width: none; height: 100vh; margin: 0;
  color: #edf9ff; background: url("/app/client/assets/ui/organization/org-scene.png") 0 0 / 100% 100% no-repeat;
  text-shadow: 0 calc(1 * var(--oz)) calc(6 * var(--oz)) #000; isolation: isolate;
}
.organization-hub > * { position: absolute; box-sizing: border-box; }
.org-scene-arts { inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.org-scene-hero { left: calc(220 * var(--ow)); top: calc(100 * var(--oh)); z-index: 2; width: calc(335 * var(--ow)); padding-left: calc(20 * var(--ow)); border-left: calc(2 * var(--oz)) solid #2bddff; }
.org-scene-hero p { margin: 0; color: #3edcff; font-size: calc(14 * var(--oz)); font-weight: 800; letter-spacing: .16em; }
.org-scene-hero h1 { margin: calc(9 * var(--oh)) 0 calc(12 * var(--oh)); color: #f3f8fb; font-size: calc(58 * var(--oz)); line-height: .9; letter-spacing: .035em; }
.org-scene-hero span { color: #b8d6e6; font-size: calc(13 * var(--oz)); line-height: 1.5; }

.org-scene-status { left: calc(592 * var(--ow)); top: calc(139 * var(--oh)); z-index: 2; width: calc(573 * var(--ow)); height: calc(113 * var(--oh)); overflow: hidden; clip-path: polygon(4% 0,96% 0,100% 20%,100% 80%,96% 100%,4% 100%,0 80%,0 20%); }
.org-scene-status > img, .org-scene-panel .org-scene-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.org-scene-status > img { object-position: 58% 47%; opacity: .9; }
.org-scene-status > .org-status-icon { inset: auto; left: calc(25 * var(--ow)); top: calc(33 * var(--oh)); z-index: 2; width: calc(42 * var(--oz)); height: calc(42 * var(--oz)); object-fit: contain; object-position: center; opacity: 1; filter: drop-shadow(0 0 calc(9 * var(--oz)) rgba(28,220,255,.7)); }
.org-scene-status > i { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24,17,8,.97) 0%, rgba(31,22,9,.91) 52%, rgba(3,17,27,.08) 90%); }
.org-scene-status > div { position: absolute; left: calc(75 * var(--ow)); top: calc(15 * var(--oh)); width: calc(430 * var(--ow)); }
.org-scene-status small { color: #42dfff; font-size: calc(11 * var(--oz)); font-weight: 800; letter-spacing: .13em; }
.org-scene-status h2 { margin: calc(12 * var(--oh)) 0 calc(8 * var(--oh)); color: #ffa82f; font-size: calc(17 * var(--oz)); line-height: 1; text-transform: uppercase; }
.org-scene-status p { margin: 0; color: #d8c8b3; font-size: calc(12 * var(--oz)); }
.org-scene-status button { position: absolute; left: calc(330 * var(--ow)); top: calc(54 * var(--oh)); min-height: calc(30 * var(--oh)); font-size: calc(9 * var(--oz)); }

.org-scene-panel { overflow: hidden; z-index: 2; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.org-scene-panel:focus-visible { outline: calc(2 * var(--oz)) solid #8ceeff; outline-offset: calc(-8 * var(--oz)); }
.org-scene-panel:hover::after,.org-scene-panel[aria-expanded="true"]::after { background: linear-gradient(112deg,rgba(44,203,255,.06) 0 36%,rgba(187,247,255,.2) 48%,rgba(44,203,255,.05) 60%); box-shadow: inset 0 0 calc(20 * var(--oz)) rgba(34,201,255,.12); }
.org-scene-identity { left: calc(264 * var(--ow)); top: calc(330 * var(--oh)); width: calc(457 * var(--ow)); height: calc(190 * var(--oh)); clip-path: polygon(5% 0,94% 0,100% 14%,100% 86%,94% 100%,5% 100%,0 86%,0 14%); }
.org-scene-members { left: calc(1064 * var(--ow)); top: calc(330 * var(--oh)); width: calc(499 * var(--ow)); height: calc(190 * var(--oh)); clip-path: polygon(6% 0,95% 0,100% 14%,100% 86%,95% 100%,6% 100%,0 86%,0 14%); }
.org-scene-contribution { left: calc(301 * var(--ow)); top: calc(579 * var(--oh)); width: calc(445 * var(--ow)); height: calc(170 * var(--oh)); clip-path: polygon(9% 0,100% 0,100% 72%,91% 100%,7% 100%,0 84%,0 14%); }
.org-scene-objective { left: calc(1016 * var(--ow)); top: calc(579 * var(--oh)); width: calc(484 * var(--ow)); height: calc(170 * var(--oh)); clip-path: polygon(0 0,91% 0,100% 14%,100% 84%,93% 100%,9% 100%,0 72%); }
.org-scene-panel .org-scene-art { object-position: 62% 50%; opacity: .78; }
.org-scene-members .org-scene-art, .org-scene-objective .org-scene-art { object-position: 72% 50%; }
.org-scene-fade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,14,21,.98) 0%, rgba(3,17,25,.9) 46%, rgba(3,16,24,.18) 83%), linear-gradient(0deg, rgba(2,11,16,.75), transparent 64%); }
.org-scene-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, transparent 0 42%, rgba(107,226,255,.08) 48%, transparent 54%); }
.org-scene-copy { position: absolute; left: calc(34 * var(--ow)); top: calc(19 * var(--oh)); width: calc(340 * var(--ow)); }
.org-scene-copy > small { display: block; margin-bottom: calc(15 * var(--oh)); color: #39dcff; font-size: calc(10.5 * var(--oz)); font-weight: 800; letter-spacing: .12em; text-align: center; }
.org-scene-copy > div { display: flex; align-items: center; gap: calc(14 * var(--ow)); }
.org-scene-copy > div img { width: calc(45 * var(--oz)); height: calc(45 * var(--oz)); object-fit: contain; filter: drop-shadow(0 0 calc(8 * var(--oz)) rgba(30,217,255,.72)); }
.org-scene-identity .org-scene-copy > div img { width: calc(49 * var(--oz)); height: calc(49 * var(--oz)); }
.org-scene-copy h2 { margin: 0; font-size: calc(22 * var(--oz)); line-height: 1; }
.org-scene-copy strong { display: block; margin: calc(8 * var(--oh)) 0 0 calc(59 * var(--ow)); color: #32ddff; font-size: calc(12 * var(--oz)); letter-spacing: .07em; text-transform: uppercase; }
.org-scene-copy p { margin: calc(14 * var(--oh)) 0 0; padding-top: calc(10 * var(--oh)); border-top: 1px solid rgba(42,202,238,.22); color: #9cb4c0; font-size: calc(11 * var(--oz)); line-height: 1.35; }
.org-scene-contribution .org-scene-copy, .org-scene-objective .org-scene-copy { top: calc(14 * var(--oh)); }
.org-scene-members .org-scene-copy, .org-scene-objective .org-scene-copy { left: calc(48 * var(--ow)); }
.org-scene-objective .org-scene-copy p { position: relative; left: calc(48 * var(--ow)); width: calc(292 * var(--ow)); }

.org-panel-overlay { position: absolute; inset: 0; z-index: 40; background: rgba(0,5,9,.58); backdrop-filter: blur(calc(2 * var(--oz))); }
.org-panel-inspector { position: absolute; left: 50%; top: 50%; width: calc(560 * var(--ow)); min-height: calc(260 * var(--oh)); transform: translate(-50%,-50%); padding: calc(30 * var(--oh)) calc(36 * var(--ow)); clip-path: polygon(5% 0,95% 0,100% 10%,100% 90%,95% 100%,5% 100%,0 90%,0 10%); background: linear-gradient(180deg,#587687 0,#17303d calc(7 * var(--oz)),#06131c calc(11 * var(--oz)),#020a10 calc(100% - 9 * var(--oz)),#375769 100%); color: #eaf8ff; box-shadow: 0 0 calc(28 * var(--oz)) rgba(26,209,255,.5),0 calc(20 * var(--oz)) calc(50 * var(--oz)) rgba(0,0,0,.78); }
.org-panel-inspector::before { content: ""; position: absolute; inset: calc(7 * var(--oz)); z-index: -1; clip-path: polygon(4% 0,96% 0,100% 10%,100% 90%,96% 100%,4% 100%,0 90%,0 10%); border-top: calc(2 * var(--oz)) solid #3cddff; border-bottom: calc(2 * var(--oz)) solid #168cad; background: linear-gradient(180deg,rgba(13,42,55,.98),rgba(2,12,18,.99)); }
.org-panel-inspector article { position: relative; z-index: 1; }
.org-panel-inspector article > small { color: #49dbff; font-size: calc(11 * var(--oz)); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.org-panel-inspector h2 { margin: calc(12 * var(--oh)) 0 calc(18 * var(--oh)); font-size: calc(28 * var(--oz)); }
.org-panel-inspector article > strong { display: block; margin-bottom: calc(12 * var(--oh)); color: #fff; font-size: calc(18 * var(--oz)); }
.org-panel-inspector p,.org-panel-inspector article > small:last-child { color: #a9c5d2; font-size: calc(13 * var(--oz)); line-height: 1.5; }
.org-panel-close { position: absolute; right: calc(22 * var(--ow)); top: calc(16 * var(--oh)); z-index: 3; width: calc(36 * var(--oz)); height: calc(36 * var(--oz)); min-height: 0; padding: 0; border: 1px solid #3bdcff; background: #071923; color: #dffaff; font-size: calc(25 * var(--oz)); line-height: 1; cursor: pointer; }
.org-inspector-members { max-height: calc(130 * var(--oh)); margin: 0; padding: 0; overflow: auto; list-style: none; }
.org-inspector-members li { display: grid; grid-template-columns: 1fr auto auto; gap: calc(14 * var(--ow)); padding: calc(8 * var(--oh)) 0; border-top: 1px solid rgba(56,203,239,.25); font-size: calc(12 * var(--oz)); }
.org-inspector-members em { color: #4cddff; font-style: normal; }

.org-scene-core { left: calc(752 * var(--ow)); top: calc(334 * var(--oh)); width: calc(258 * var(--ow)); height: calc(258 * var(--oh)); z-index: 3; }
/* 08.10.2026: drawn as a background, not <img>, so Yandex Browser does not put its image-search button on it (trial on one element). */
.org-scene-core-art { display: block; width: 100%; height: 100%; border-radius: 50%; background: url("/app/client/assets/ui/organization/org-core.png") center / cover no-repeat; filter: saturate(1.08) drop-shadow(0 0 calc(14 * var(--oz)) rgba(22,204,255,.44)); }
.org-scene-core span { position: absolute; left: 50%; top: calc(360 * var(--oh)); transform: translateX(-50%); color: #a3d9e9; font-size: calc(11 * var(--oz)); line-height: 1.55; letter-spacing: .13em; text-align: center; white-space: nowrap; }

.org-scene-bottom { --cut: calc(20 * var(--oz)); left: calc(297 * var(--ow)); top: calc(788 * var(--oh)); width: calc(1159 * var(--ow)); height: calc(126 * var(--oh)); z-index: 5; padding: calc(23 * var(--oh)) calc(31 * var(--ow)); overflow: visible; background: transparent; }
.org-scene-bottom::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; clip-path: polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut)); background: linear-gradient(180deg,#d0e8ef 0,#5c7887 calc(3 * var(--oz)),#172b37 calc(8 * var(--oz)),#07131b 48%,#0b1a24 88%,#4b6977 calc(100% - 3 * var(--oz)),#bddde6 100%); box-shadow: 0 calc(12 * var(--oz)) calc(18 * var(--oz)) rgba(0,0,0,.62),inset 0 calc(1 * var(--oz)) rgba(255,255,255,.65),inset 0 calc(-2 * var(--oz)) rgba(0,0,0,.92); }
.org-scene-bottom::after { content: ""; position: absolute; inset: calc(6 * var(--oz)); z-index: 0; pointer-events: none; clip-path: polygon(calc(15 * var(--oz)) 0,calc(100% - 15 * var(--oz)) 0,100% calc(15 * var(--oz)),100% calc(100% - 15 * var(--oz)),calc(100% - 15 * var(--oz)) 100%,calc(15 * var(--oz)) 100%,0 calc(100% - 15 * var(--oz)),0 calc(15 * var(--oz))); background: linear-gradient(180deg,rgba(94,217,255,.13),transparent 18%),linear-gradient(180deg,#081b26,#020b11 64%,#0a1b25); border-top: calc(2 * var(--oz)) solid #35d9ff; border-bottom: calc(2 * var(--oz)) solid #178cad; box-shadow: inset 0 calc(1 * var(--oz)) rgba(226,250,255,.18),inset 0 calc(-2 * var(--oz)) rgba(0,0,0,.9),0 0 calc(10 * var(--oz)) rgba(35,210,255,.32); }
.org-scene-create { position: relative; z-index: 20; display: grid; grid-template-columns: 1.08fr .78fr .92fr calc(265 * var(--ow)); gap: calc(26 * var(--ow)); align-items: end; }
.org-scene-create label,.org-scene-create .org-create-field { display: grid; gap: calc(7 * var(--oh)); min-width: 0; }
.org-scene-create label > span,.org-scene-create .org-create-field > span { color: #53ddff; font-size: calc(9.5 * var(--oz)); font-weight: 900; letter-spacing: .1em; line-height: 1; text-transform: uppercase; text-shadow: 0 0 calc(7 * var(--oz)) rgba(38,201,255,.45); }
.org-scene-create input,.org-joinmode-picker > summary { width: 100%; height: calc(43 * var(--oh)); min-width: 0; box-sizing: border-box; padding: 0 calc(13 * var(--ow)); border: max(1px,calc(2 * var(--oz))) solid #39788e; outline: calc(1 * var(--oz)) solid rgba(149,219,235,.2); outline-offset: calc(-5 * var(--oz)); border-radius: calc(2 * var(--oz)); background: linear-gradient(180deg,rgba(17,43,56,.98),rgba(5,18,27,.98)); color: #effaff; font-size: calc(12 * var(--oz)); box-shadow: inset 0 calc(1 * var(--oz)) rgba(223,249,255,.12),inset 0 calc(-2 * var(--oz)) rgba(0,0,0,.7),0 0 calc(8 * var(--oz)) rgba(29,183,225,.18); }
.org-scene-create input:focus,.org-joinmode-picker[open] > summary { border-color: #43dcff; outline-color: rgba(175,242,255,.42); box-shadow: inset 0 0 calc(12 * var(--oz)) rgba(30,172,217,.18),0 0 calc(11 * var(--oz)) rgba(38,208,255,.38); }
.org-scene-create button.organization-create { height: calc(51 * var(--oh)); min-height: 0; border: max(1px,calc(2 * var(--oz))) solid #31d9ff; outline: calc(1 * var(--oz)) solid rgba(164,232,245,.22); outline-offset: calc(-6 * var(--oz)); font-size: calc(11 * var(--oz)); font-weight: 900; text-transform: uppercase; background: linear-gradient(180deg,rgba(18,54,69,.96),rgba(3,18,27,.98)); box-shadow: inset 0 0 calc(17 * var(--oz)) rgba(31,213,255,.18),0 0 calc(10 * var(--oz)) rgba(31,213,255,.25); }
.org-scene-create button.organization-create:not(:disabled):hover { border-color: #a4f4ff; background: linear-gradient(180deg,rgba(25,79,98,.98),rgba(4,26,38,.98)); }
.org-joinmode-picker { position: relative; min-width: 0; }
.org-joinmode-picker > summary { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--ow)); cursor: pointer; list-style: none; }
.org-joinmode-picker > summary::-webkit-details-marker { display: none; }
.org-joinmode-picker > summary b { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.org-joinmode-picker > summary i { width: calc(8 * var(--oz)); height: calc(8 * var(--oz)); flex: 0 0 auto; border-right: calc(2 * var(--oz)) solid #bdefff; border-bottom: calc(2 * var(--oz)) solid #bdefff; transform: translateY(calc(-2 * var(--oh))) rotate(45deg); transition: transform .18s ease; }
.org-joinmode-picker[open] > summary i { transform: translateY(calc(2 * var(--oh))) rotate(225deg); }
.org-joinmode-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 3 * var(--oh)); z-index: 60; box-sizing: border-box; padding: calc(5 * var(--oz)); clip-path: polygon(3% 0,97% 0,100% 12%,100% 88%,97% 100%,3% 100%,0 88%,0 12%); background: linear-gradient(135deg,#bcecf5 0,#2bd8f6 8%,#173746 18%,#254957 82%,#26cfee 92%,#9ce9f5 100%); border: calc(2 * var(--oz)) solid #42dfff; box-shadow: inset calc(3 * var(--oz)) 0 rgba(120,235,255,.3),inset calc(-3 * var(--oz)) 0 rgba(120,235,255,.3),0 0 calc(9 * var(--oz)) rgba(33,205,255,.28),0 calc(6 * var(--oz)) calc(14 * var(--oz)) rgba(0,0,0,.72); }
.org-joinmode-menu button { display: block; width: 100%; height: calc(35 * var(--oh)); padding: 0 calc(12 * var(--ow)); border: 0; border-bottom: 1px solid rgba(58,171,204,.24); background: rgba(4,18,27,.94); color: #c8e4ee; text-align: left; font-size: calc(11.5 * var(--oz)); cursor: pointer; }
.org-joinmode-menu button:last-child { border-bottom: 0; }
.org-joinmode-menu button:hover,.org-joinmode-menu button[aria-selected="true"] { background: linear-gradient(90deg,rgba(24,116,143,.72),rgba(7,35,49,.96)); color: #fff; box-shadow: inset calc(3 * var(--oz)) 0 #41ddff; }
.org-scene-directory { z-index: 35; box-sizing: border-box; border: 1px solid #27d7f4; background: rgba(3,15,22,.98); }
.org-scene-directory summary { padding: calc(7 * var(--oh)) calc(10 * var(--ow)); color: #42dcff; cursor: pointer; font-size: calc(10 * var(--oz)); font-weight: 800; letter-spacing: .08em; list-style: none; }
.org-scene-directory summary::-webkit-details-marker { display: none; }
.org-scene-directory ul { max-height: calc(170 * var(--oh)); margin: 0; padding: calc(7 * var(--oz)); overflow: auto; list-style: none; background: rgba(2,11,17,.99); box-shadow: 0 0 calc(16 * var(--oz)) rgba(31,202,244,.35),0 calc(10 * var(--oz)) calc(22 * var(--oz)) rgba(0,0,0,.72); }
.org-scene-directory li { display: grid; grid-template-columns: 1fr auto; gap: calc(4 * var(--oh)) calc(8 * var(--ow)); padding: calc(7 * var(--oz)); border-top: 1px solid #173d4a; }
.org-scene-directory li button { grid-column: 2; grid-row: 1 / 3; }
.org-scene-bottom:not(.org-membership-bottom) > .org-scene-directory { position: absolute; left: calc(25 * var(--ow)); bottom: calc(75 * var(--oh)); width: calc(330 * var(--ow)); }
.org-membership-bottom { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1.35fr) calc(230 * var(--ow)); gap: calc(18 * var(--ow)); align-items: center; }
.org-membership-bottom > * { position: relative; z-index: 2; min-width: 0; }
.org-membership-summary h2,.org-membership-summary p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-membership-summary h2 { color: #f1fbff; font-size: calc(15 * var(--oz)); }
.org-membership-summary h2 small { color: #4bdcff; }
.org-membership-summary p { margin-top: calc(4 * var(--oh)); color: #90abb7; font-size: calc(9 * var(--oz)); }
.org-membership-summary .org-scene-directory { position: relative; width: 100%; margin-top: calc(7 * var(--oh)); }
.org-membership-summary .org-scene-directory ul { position: absolute; left: 0; right: 0; bottom: calc(100% + 72 * var(--oh)); z-index: 50; }
.org-membership-bottom .organization-goal { display: grid; gap: calc(5 * var(--oh)); margin: 0; min-width: 0; }
.org-membership-bottom .organization-goal-bar { height: calc(8 * var(--oh)); border: 1px solid #245b70; background: #02090e; }
.org-membership-bottom .organization-goal span { color: #eefaff; font-size: calc(12 * var(--oz)); font-weight: 800; white-space: nowrap; }
.org-membership-bottom .organization-goal small { color: #8eb1c0; font-size: calc(9 * var(--oz)); }
.org-membership-bottom .organization-weekly-reward { display: grid; grid-template-columns: minmax(0,1fr); gap: calc(7 * var(--oh)); min-width: 0; }
.org-membership-bottom .organization-weekly-reward > span { color: #cce5ef; font-size: calc(10 * var(--oz)); line-height: 1.25; }
.org-membership-bottom .organization-weekly-reward button { min-height: calc(32 * var(--oh)); padding: 0 calc(10 * var(--ow)); font-size: calc(9 * var(--oz)); }
.org-membership-bottom > button.organization-leave { width: 100%; min-height: calc(44 * var(--oh)); padding: 0 calc(12 * var(--ow)); border-color: #637b86; font-size: calc(10 * var(--oz)); }
.org-scene-error { left: 50%; top: calc(278 * var(--oh)); z-index: 10; transform: translateX(-50%); }
.org-scene-unavailable { position: relative; z-index: 2; margin: calc(15 * var(--oh)); text-align: center; color: #a8c1cc; }

/* Organization owner correction: quiet panels and complete lower controls. */
.org-scene-panel { cursor: default; }
.org-scene-panel::after { display: none; }
.org-scene-panel:hover::after,.org-scene-panel[aria-expanded="true"]::after { background: none; box-shadow: none; }
.org-scene-bottom { top: calc(800 * var(--oh)); }
.org-scene-bottom::before { filter: drop-shadow(calc(1 * var(--oz)) 0 #4bdcff) drop-shadow(calc(-1 * var(--oz)) 0 #4bdcff); }
.org-scene-bottom::after { border-right: calc(1 * var(--oz)) solid rgba(66,217,255,.78); border-left: calc(1 * var(--oz)) solid rgba(66,217,255,.78); }
.org-membership-bottom { padding-top: calc(20 * var(--oh)); padding-bottom: calc(20 * var(--oh)); }
.org-membership-bottom > .org-membership-summary,
.org-membership-bottom > .organization-goal,
.org-membership-bottom > .organization-weekly-reward {
  box-sizing: border-box; min-height: calc(68 * var(--oh)); padding: calc(8 * var(--oh)) calc(11 * var(--ow));
  border: max(1px,calc(1.5 * var(--oz))) solid #287d99; outline: calc(1 * var(--oz)) solid rgba(118,220,244,.18); outline-offset: calc(-5 * var(--oz));
  background: linear-gradient(180deg,rgba(14,39,51,.96),rgba(3,14,21,.98));
  box-shadow: inset 0 calc(1 * var(--oz)) rgba(218,248,255,.13),inset 0 calc(-2 * var(--oz)) rgba(0,0,0,.7),0 0 calc(7 * var(--oz)) rgba(34,188,225,.14);
}
.org-membership-summary .org-scene-directory { margin-top: calc(5 * var(--oh)); border-color: #35c9eb; background: rgba(2,13,20,.98); }
.org-membership-summary .org-scene-directory summary { padding: calc(5 * var(--oh)) calc(8 * var(--ow)); }
.org-membership-bottom .organization-goal-bar { border-color: #35c9eb; box-shadow: inset 0 0 calc(5 * var(--oz)) rgba(38,205,242,.22); }
.org-membership-bottom .organization-weekly-reward button,
.org-membership-bottom > button.organization-leave { border: max(1px,calc(1.5 * var(--oz))) solid #3aa7c6; outline: calc(1 * var(--oz)) solid rgba(155,224,241,.2); outline-offset: calc(-5 * var(--oz)); background: linear-gradient(180deg,rgba(25,53,65,.98),rgba(6,20,28,.99)); box-shadow: inset 0 0 calc(10 * var(--oz)) rgba(33,186,221,.12); }

/* BOOT reference lock: full video, reference typography and empty approval frames. */
.app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-screen { width:100vw; max-width:none; height:100vh; min-height:620px; }
.app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-background { inset:0; width:100vw; height:100vh; object-fit:cover; object-position:center center; transform:none; }
.app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-shade { background:none; }
.app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-layout { width:100%; max-width:none; height:100%; margin:0; display:block; }
.app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-brand { top:6.6vh; left:5.7vw; height:auto; display:flex; align-items:center; filter:drop-shadow(0 0 7px rgba(34,218,255,.23)); }
.app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-brand > span { height:clamp(40px,5.1vh,52px); display:flex; align-items:center; }
.app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-brand > span img { width:auto; height:100%; object-fit:contain; }
.app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-brand > span img + img { margin-left:clamp(-20px,-1vw,-14px); transform:translateY(3px); }
.app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-brand > i { width:1px; height:clamp(36px,4.5vh,45px); margin:0 clamp(16px,1.25vw,24px); background:linear-gradient(transparent,#3de5ff 17%,#3de5ff 83%,transparent); box-shadow:0 0 5px rgba(61,229,255,.4); }
.app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-brand .boot-brand-word { width:auto; height:clamp(14px,.88vw,17px); margin:0; object-fit:contain; }
.app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-heading { position:absolute; left:14.6vw; top:28.5vh; width:min(650px,52vw); margin:0; }
.app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-heading h1 { margin:0; font-size:clamp(54px,4.2vw,81px); line-height:1; letter-spacing:-.035em; font-weight:900; white-space:nowrap; text-shadow:0 3px 6px rgba(0,0,0,.9),0 0 13px rgba(94,212,255,.28); }
.app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-heading h1 span { color:#f3fbff; }
.app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-heading h1 em { color:#aeeaff; font-style:normal; -webkit-text-fill-color:#aeeaff; text-shadow:0 3px 6px rgba(0,0,0,.9),0 0 8px rgba(77,211,255,.34); }
.app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-heading p { margin:34px 0 0; color:#d5e6ed; font-size:clamp(15px,1.18vw,20px); line-height:1.2; text-shadow:0 2px 5px #000; }
.app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-heading-rail { position:absolute; left:0; top:-20px; width:min(620px,49vw); height:22px; overflow:visible; border:0; background:none; clip-path:none; filter:drop-shadow(0 0 3px rgba(36,226,255,.24)); }
.app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-heading-rail path { fill:none; vector-effect:non-scaling-stroke; stroke-linecap:square; stroke-linejoin:miter; }
.app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-heading-rail .boot-rail-base { stroke:rgba(0,19,28,.92); stroke-width:3; }
.app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-heading-rail .boot-rail-dim { stroke:rgba(50,205,231,.66); stroke-width:1.1; }
.app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-heading-rail .boot-rail-bright { stroke:#31eaff; stroke-width:1.75; }
.app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-heading-rail-bottom { top:calc(clamp(54px,4.2vw,81px) + 11px); bottom:auto; width:min(620px,49vw); height:14px; transform:none; }
.app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-checks { position:absolute; left:14%; right:9.9%; top:44.2vh; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1vw,19px); }
.app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-checks .boot-check { width:100%; aspect-ratio:1.56/1; min-width:0; min-height:0; padding:0; display:block; border:0; background:none; overflow:hidden; filter:drop-shadow(0 8px 12px rgba(0,0,0,.46)); }
.app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-check-frame { z-index:0; inset:0; width:100%; height:100%; object-fit:fill; }
.app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-actions { position:absolute; right:6.4vw; bottom:6.8vh; margin:0; display:flex; align-items:stretch; gap:clamp(14px,1.15vw,22px); }
.app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-button { width:clamp(235px,15.1vw,290px); min-width:0; height:clamp(54px,6.7vh,64px); margin:0; top:auto; bottom:auto; align-self:stretch; transform:none; padding:0 28px; border:3px solid #36cae8; outline:1px solid rgba(140,237,255,.3); outline-offset:-7px; color:#eafaff; clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px); background:linear-gradient(180deg,rgba(5,25,35,.95),rgba(1,10,16,.98)); font-size:clamp(11px,.72vw,14px); box-shadow:inset 0 0 0 4px rgba(55,197,224,.08),inset 0 0 18px rgba(29,190,225,.08),0 0 10px rgba(35,204,255,.16); }
.app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-button-primary { width:clamp(255px,16.7vw,320px); padding-right:50px; background:linear-gradient(180deg,rgba(12,68,88,.96),rgba(3,27,40,.98)); box-shadow:inset 0 0 23px rgba(39,203,255,.2),0 0 13px rgba(35,204,255,.2); }
.app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-button-primary::after { content:"›"; position:absolute; right:20px; top:50%; transform:translateY(-54%); color:#26e7ff; font-size:30px; line-height:1; }

/* First-entry profile creation. The owner frame is shown only while displayName is absent. */
.app[data-route="BOOT"] .boot-screen-registration .boot-heading { top:14.8vh; }
.app[data-route="BOOT"] .boot-screen-registration .boot-checks { top:29.5vh; }
.app[data-route="BOOT"] .boot-screen-registration .boot-actions { left:31.5vw; right:auto; bottom:5.8vh; }
.boot-check-pending .boot-check-ready b { border-color:#ffd36b; box-shadow:0 0 10px rgba(255,190,66,.28); }
.boot-check-pending .boot-check-ready b::before { content:""; position:absolute; left:34%; top:17%; width:27%; aspect-ratio:1; border:2px solid #ffd36b; border-radius:50%; box-sizing:border-box; }
.boot-check-pending .boot-check-ready b::after { left:21%; top:auto; bottom:14%; width:54%; height:30%; border:2px solid #ffd36b; border-bottom:0; border-radius:50% 50% 0 0; background:none; transform:none; box-shadow:none; box-sizing:border-box; }
.boot-check-pending .boot-check-copy strong { font-size:clamp(12px,.88vw,17px); letter-spacing:-.015em; }
.boot-check-pending .boot-check-ready span { color:#ffd36b; font-size:clamp(11px,.88vw,16px); white-space:normal; line-height:1.05; }
.boot-registration { position:absolute; z-index:4; right:5.2vw; bottom:1.4vh; width:clamp(305px,19vw,365px); aspect-ratio:1145/1373; filter:drop-shadow(0 13px 20px rgba(0,0,0,.72)); }
.boot-registration-frame { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; }
.boot-registration-content { position:absolute; z-index:1; left:14.5%; right:14.5%; top:14%; bottom:14%; min-width:0; padding:clamp(8px,.75vw,14px); display:flex; flex-direction:column; justify-content:center; overflow:hidden; color:#ecfaff; background:linear-gradient(180deg,rgba(0,8,14,.82),rgba(0,10,17,.72)); box-shadow:inset 0 0 28px rgba(1,8,13,.78); }
.boot-registration-content header { min-width:0; text-align:left; }
.boot-registration-content h2 { margin:0; color:#f4fbff; font-size:clamp(18px,1.25vw,24px); line-height:1.02; letter-spacing:.025em; text-transform:uppercase; text-shadow:0 2px 8px #000,0 0 10px rgba(38,212,255,.24); }
.boot-registration-content header p { margin:5px 0 0; color:#9fd2df; font-size:clamp(10px,.66vw,13px); line-height:1.2; }
.boot-registration-content label { display:block; margin-top:clamp(10px,1.2vh,15px); min-width:0; }
.boot-registration-content label > span { display:block; margin-bottom:5px; color:#d8edf3; font-size:clamp(10px,.62vw,12px); font-weight:750; letter-spacing:.045em; text-transform:uppercase; }
.boot-registration-content input { width:100%; height:clamp(38px,4.8vh,46px); padding:0 12px; border:1px solid #24dff8; outline:1px solid rgba(93,218,244,.2); outline-offset:-5px; color:#f4fcff; background:rgba(0,8,14,.9); box-shadow:inset 0 0 14px rgba(20,180,216,.09),0 0 8px rgba(22,206,238,.12); font:700 clamp(13px,.82vw,16px)/1 system-ui,sans-serif; }
.boot-registration-content input::placeholder { color:#6c8e99; font-weight:600; }
.boot-registration-content input:focus { border-color:#9af4ff; box-shadow:inset 0 0 18px rgba(28,207,241,.16),0 0 10px rgba(47,222,248,.22); }
.boot-registration-rules { display:block; margin-top:5px; color:#7fa6b2; font-size:clamp(8px,.53vw,10px); line-height:1.15; }
.boot-registration-error,.boot-registration-status { min-height:clamp(22px,2.5vh,26px); margin:5px 0 0; color:#ffae77; font-size:clamp(9px,.56vw,11px); line-height:1.15; }
.boot-registration-privacy { margin:2px 0 8px; display:flex; gap:6px; align-items:flex-start; color:#b6d2da; font-size:clamp(8px,.54vw,10px); line-height:1.2; }
.boot-registration-privacy b { color:#42e8ff; font-size:8px; line-height:1.4; }
.boot-registration-submit { width:100%; min-height:clamp(40px,4.8vh,48px); margin-top:auto; border:2px solid #31d9f4; outline:1px solid rgba(141,239,255,.25); outline-offset:-6px; color:#f3fcff; background:linear-gradient(180deg,rgba(12,78,100,.96),rgba(2,26,39,.98)); clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); font-size:clamp(11px,.7vw,14px); font-weight:850; letter-spacing:.055em; text-transform:uppercase; box-shadow:inset 0 0 18px rgba(36,203,239,.17),0 0 9px rgba(39,214,246,.14); }
.boot-registration-submit:disabled { color:#6d858d; border-color:#315e69; background:rgba(2,15,22,.9); box-shadow:none; }
.boot-registration-submit:hover:not(:disabled),.boot-registration-submit:focus-visible { border-color:#a8f5ff; box-shadow:inset 0 0 22px rgba(47,220,255,.25),0 0 12px rgba(47,220,255,.24); }
@media (max-width:900px) {
  .app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-heading { left:8vw; top:23vh; width:78vw; }
  .app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-checks { left:7vw; right:7vw; top:45vh; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 10px; }
  .app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-checks .boot-check { aspect-ratio:1.7/1; }
  .app:is([data-route="BOOT"],[data-route="CONNECT"]) .boot-actions { right:5vw; bottom:4vh; }
  .app[data-route="BOOT"] .boot-screen-registration .boot-heading { top:10vh; }
  .app[data-route="BOOT"] .boot-screen-registration .boot-checks { top:25vh; }
  .app[data-route="BOOT"] .boot-screen-registration .boot-actions { left:5vw; right:auto; bottom:3vh; }
  .boot-registration { right:3vw; bottom:1vh; width:min(310px,43vw); }
}

/* ONBOARDING STORY — owner's animated Vardem scene and exact four-frame timeline. */
.app[data-route="ONBOARDING_STORY"] { background:#02080d; overflow:hidden; }
.app[data-route="ONBOARDING_STORY"] > main { padding:0; }
.story-screen { position:fixed; z-index:20; inset:0; width:100vw; max-width:none; height:100vh; min-height:620px; margin:0; overflow:hidden; color:#edfaff; isolation:isolate; }
.story-background { position:absolute; z-index:-4; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; background:#02080d; }
.story-holo-world { position:absolute; z-index:-3; left:50%; top:50%; width:max(100vw,177.7778vh); height:max(56.25vw,100vh); transform:translate(-50%,-50%); pointer-events:none; }
.story-hologram { position:absolute; z-index:4; left:66.35%; top:10.8%; width:11.25%; height:21.3%; mix-blend-mode:screen; isolation:isolate; }
.story-hologram > i { position:absolute; inset:0; display:block; transform-origin:50% 100%; }
.story-hologram-volume { inset:-2% 7% 0!important; clip-path:polygon(3% 0,97% 0,61% 100%,39% 100%); background:radial-gradient(ellipse 48% 10% at 50% 99%,rgba(236,255,255,.98) 0%,rgba(95,230,255,.58) 40%,transparent 100%),radial-gradient(ellipse 51% 78% at 50% 56%,rgba(207,255,255,.45) 0%,rgba(76,211,255,.22) 31%,rgba(33,124,255,.1) 55%,transparent 78%),linear-gradient(78deg,transparent 8%,rgba(48,127,255,.05) 24%,rgba(91,212,255,.18) 39%,rgba(226,255,255,.56) 49%,transparent 68%),linear-gradient(102deg,transparent 8%,rgba(218,255,255,.53) 49%,rgba(83,205,255,.2) 61%,rgba(46,126,255,.05) 76%,transparent 90%); filter:blur(7px) saturate(1.06) brightness(1.08); -webkit-mask-image:radial-gradient(ellipse 62% 98% at 50% 54%,#000 0 48%,rgba(0,0,0,.82) 64%,rgba(0,0,0,.28) 82%,transparent 100%); mask-image:radial-gradient(ellipse 62% 98% at 50% 54%,#000 0 48%,rgba(0,0,0,.82) 64%,rgba(0,0,0,.28) 82%,transparent 100%); animation:story-holo-volume 9.3s ease-in-out infinite; }
.story-hologram-volume::after { content:""; position:absolute; left:38%; right:38%; bottom:0; height:7%; border-radius:50%; background:rgba(224,255,255,.94); box-shadow:0 0 7px 3px rgba(173,255,255,.74),0 0 18px 8px rgba(60,203,255,.46); filter:blur(1.5px); }
.story-hologram-prism { inset:3% 20% 2%!important; clip-path:polygon(3% 0,97% 0,59% 100%,41% 100%); background:linear-gradient(68deg,transparent 17%,rgba(75,192,255,.16) 33%,rgba(184,255,255,.58) 49%,transparent 63%),linear-gradient(112deg,transparent 18%,rgba(177,255,255,.56) 48%,rgba(72,185,255,.17) 64%,transparent 78%); filter:blur(1.7px); opacity:.7; -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 17%,#000 82%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0%,#000 17%,#000 82%,transparent 100%); animation:story-holo-prism 4.65s ease-in-out infinite; }
.story-hologram-scan { inset:4% 24% 5%!important; clip-path:polygon(5% 0,95% 0,55% 100%,45% 100%); background:linear-gradient(180deg,transparent 0%,transparent 42%,rgba(170,255,255,.05) 45%,rgba(202,255,255,.5) 49%,rgba(77,237,255,.15) 53%,transparent 58%,transparent 100%); background-size:100% 52%; filter:blur(.65px); opacity:.56; -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 78%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 78%,transparent 100%); animation:story-holo-scan 4.65s linear infinite; }
.story-hologram-mist { inset:10% 13% 28%!important; z-index:2; border-radius:50%; opacity:.5; background:radial-gradient(ellipse at 50% 52%,rgba(206,255,255,.32) 0%,rgba(80,219,255,.17) 38%,rgba(42,116,255,.07) 57%,transparent 76%); filter:blur(10px); animation:story-holo-mist 9.3s ease-in-out infinite; }
.story-hologram-rays { inset:8% 8% 4%!important; opacity:.48; filter:blur(.7px); background:linear-gradient(83deg,transparent 0 29%,rgba(154,255,255,.42) 30%,transparent 31% 43%,rgba(51,166,255,.26) 44%,transparent 45% 100%),linear-gradient(97deg,transparent 0 31%,rgba(60,175,255,.24) 32%,transparent 33% 56%,rgba(162,255,255,.42) 57%,transparent 58% 100%); -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 21%,#000 84%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0%,#000 21%,#000 84%,transparent 100%); animation:story-holo-rays 4.65s ease-in-out infinite; }
.story-hologram-particles { inset:0 7% 1%!important; z-index:3; opacity:.66; background:radial-gradient(circle at 28% 25%,rgba(224,255,255,.92) 0 1px,rgba(69,218,255,.45) 1.5px,transparent 4px),radial-gradient(circle at 70% 19%,rgba(183,250,255,.84) 0 1px,transparent 3.5px),radial-gradient(circle at 18% 46%,rgba(107,226,255,.78) 0 1.2px,transparent 4px),radial-gradient(circle at 82% 43%,rgba(211,255,255,.88) 0 1px,transparent 4px),radial-gradient(circle at 34% 58%,rgba(198,255,255,.9) 0 1px,transparent 3px),radial-gradient(circle at 66% 62%,rgba(75,210,255,.8) 0 1.2px,transparent 4px),radial-gradient(circle at 24% 76%,rgba(167,245,255,.84) 0 1px,transparent 3px),radial-gradient(circle at 76% 79%,rgba(210,255,255,.9) 0 1px,transparent 3.5px),radial-gradient(circle at 45% 33%,rgba(255,255,255,.9) 0 .8px,transparent 3px),radial-gradient(circle at 57% 49%,rgba(128,236,255,.8) 0 1px,transparent 3px); filter:blur(.45px) drop-shadow(0 0 3px rgba(76,211,255,.8)); -webkit-mask-image:radial-gradient(ellipse 59% 96% at 50% 55%,#000 0 56%,rgba(0,0,0,.65) 72%,transparent 94%); mask-image:radial-gradient(ellipse 59% 96% at 50% 55%,#000 0 56%,rgba(0,0,0,.65) 72%,transparent 94%); animation:story-holo-particles 9.3s ease-in-out infinite; }
.story-hologram::before { content:""; position:absolute; z-index:3; inset:4% 25% 5%; opacity:.38; clip-path:polygon(5% 0,95% 0,55% 100%,45% 100%); background:repeating-linear-gradient(180deg,transparent 0 4px,rgba(138,250,255,.46) 5px,transparent 6px 9px); -webkit-mask-image:linear-gradient(180deg,transparent,#000 17%,#000 86%,transparent); mask-image:linear-gradient(180deg,transparent,#000 17%,#000 86%,transparent); animation:story-holo-lines 2.325s linear infinite; }
.story-wordmark-code { position:absolute; z-index:2; left:69.18%; top:20.37%; width:5.85%; height:2.7%; display:flex; align-items:center; justify-content:center; box-sizing:border-box; color:#bdfaff; font-family:"Bahnschrift SemiCondensed","Arial Narrow","Segoe UI",sans-serif; font-size:max(1.03vw,1.83vh); font-stretch:condensed; font-weight:650; line-height:1; letter-spacing:.075em; white-space:nowrap; transform:scaleX(1.02); transform-origin:center; -webkit-text-stroke:max(.025vw,.044vh) rgba(218,255,255,.82); paint-order:stroke fill; text-shadow:0 0 max(.08vw,.14vh) rgba(226,255,255,.94),0 0 max(.22vw,.39vh) rgba(50,218,255,.78),0 0 max(.48vw,.85vh) rgba(25,109,255,.38); animation:story-wordmark-code 9.3s ease-in-out infinite; }
.story-wordmark-code::before { content:attr(data-word); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:transparent; background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(204,255,255,.94) 30%,rgba(77,224,255,.82) 57%,rgba(203,255,255,.9) 72%,rgba(94,188,255,.75) 100%); -webkit-background-clip:text; background-clip:text; opacity:.88; }
.story-wordmark-code::after { content:attr(data-word); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:transparent; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.98) 45%,rgba(184,255,255,.96) 52%,transparent 67%); background-size:260% 100%; -webkit-background-clip:text; background-clip:text; filter:drop-shadow(0 0 max(.13vw,.23vh) rgba(211,255,255,.78)); animation:story-wordmark-code-glint 4.65s ease-in-out infinite; }
.story-shade { position:absolute; z-index:-2; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(0,7,12,.42) 0%,rgba(0,8,14,.16) 42%,rgba(0,7,12,.08) 72%,rgba(0,5,9,.28) 100%),linear-gradient(180deg,rgba(0,4,8,.24),transparent 30%,transparent 74%,rgba(0,4,8,.45)); }
@keyframes story-holo-volume { 0%,100% { opacity:.46; transform:scaleX(.92); } 24% { opacity:.68; transform:scaleX(1.05); } 47% { opacity:.54; transform:scaleX(.98); } 52% { opacity:.76; transform:scaleX(1.1); } 76% { opacity:.59; transform:scaleX(1.01); } }
@keyframes story-holo-prism { 0%,100% { opacity:.44; transform:translateX(-2%) scaleX(.94); filter:blur(1.7px); } 45% { opacity:.74; transform:translateX(3%) scaleX(1.08); filter:blur(1.25px); } 52% { opacity:.53; transform:translateX(0) scaleX(1); } }
@keyframes story-holo-scan { 0% { background-position:0 -52%; opacity:.16; } 18% { opacity:.55; } 78% { opacity:.4; } 100% { background-position:0 152%; opacity:.16; } }
@keyframes story-holo-lines { 0% { background-position:0 0; opacity:.26; } 50% { opacity:.48; } 100% { background-position:0 18px; opacity:.26; } }
@keyframes story-holo-rays { 0%,100% { opacity:.24; transform:scaleX(.92); } 44% { opacity:.58; transform:scaleX(1.05); } 51% { opacity:.34; } 72% { opacity:.66; transform:scaleX(.98); } }
@keyframes story-holo-mist { 0%,100% { opacity:.28; transform:scale(.92); } 36% { opacity:.56; transform:scale(1.07); } 52% { opacity:.39; transform:scale(.98); } 76% { opacity:.62; transform:scale(1.03); } }
@keyframes story-holo-particles { 0%,100% { opacity:.18; transform:translateY(5%) scaleX(.82); } 18% { opacity:.7; } 45% { opacity:.48; transform:translateY(-2%) scaleX(1.08); } 52% { opacity:.72; transform:translateY(-4%) scaleX(.96); } 78% { opacity:.55; transform:translateY(-8%) scaleX(1.13); } }
@keyframes story-wordmark-code { 0% { opacity:.08; transform:scaleX(.72) scaleY(.2); filter:blur(2px); } 5% { opacity:.9; transform:scaleX(1.04) scaleY(1); filter:blur(0); } 7% { opacity:.3; transform:scaleX(.96) scaleY(.72); } 10%,46% { opacity:.77; transform:scaleX(1.02) scaleY(1); filter:blur(0); } 49% { opacity:.48; transform:scaleX(1.01) scaleY(.96); } 52% { opacity:.84; transform:scaleX(1.025) scaleY(1); } 56%,94% { opacity:.72; transform:scaleX(1.02) scaleY(1); } 97% { opacity:.3; filter:blur(.7px); } 100% { opacity:.08; transform:scaleX(.76) scaleY(.22); filter:blur(2px); } }
@keyframes story-wordmark-code-glint { 0%,10% { background-position:130% 0; opacity:0; } 20% { opacity:.9; } 46% { background-position:-30% 0; opacity:.72; } 55%,100% { background-position:-130% 0; opacity:0; } }
.story-brand { position:absolute; z-index:3; left:5.7vw; top:4.3vh; height:clamp(34px,4.8vh,52px); display:flex; align-items:center; gap:clamp(10px,1vw,18px); pointer-events:none; filter:drop-shadow(0 0 8px rgba(34,218,255,.3)); }
.story-brand > span { height:100%; display:flex; align-items:center; }
.story-brand > span img { width:auto; height:100%; display:block; object-fit:contain; }
.story-brand > span img + img { margin-left:clamp(-10px,-.5vw,-6px); }
.story-brand > i { width:1px; height:74%; background:linear-gradient(180deg,transparent,#b7eafa 18%,#b7eafa 82%,transparent); }
.story-brand > strong { color:#e7f4fb; font-size:clamp(11px,1.05vw,18px); letter-spacing:.19em; white-space:nowrap; }
.story-brand > strong em { color:#39d9ff; font-style:normal; }
.story-heading { position:absolute; z-index:3; left:8.8vw; top:13.3vh; width:min(790px,63vw); text-shadow:0 3px 16px rgba(0,0,0,.95); }
.story-heading > h1 { margin:0 0 9px; color:#edf7fc; font-size:clamp(42px,4vw,68px); line-height:.98; letter-spacing:-.035em; white-space:nowrap; }
.story-heading > h1 em { color:#69dcff; font-style:normal; }
.story-heading > span { display:block; margin-top:10px; color:#c9dce6; font-size:clamp(12px,1vw,18px); line-height:1.3; }
.story-timeline { position:absolute; z-index:2; left:12.7vw; top:3.2vh; width:87.3vw; aspect-ratio:1672/941; pointer-events:none; }
.story-timeline-frame { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:contain; }
.story-copy-grid { position:absolute; inset:0; display:block; }
.story-copy { position:absolute; top:53.85%; min-width:0; height:11.35%; display:grid; grid-template-columns:clamp(54px,4.65vw,80px) minmax(0,1fr); align-items:center; gap:clamp(10px,.76vw,14px); padding:clamp(3px,.32vw,6px) clamp(8px,.62vw,12px) clamp(3px,.32vw,6px) 0; overflow:visible; }
.story-copy-1 { left:3%; width:21.1%; }
.story-copy-2 { left:27.8%; width:21.1%; }
.story-copy-3 { left:52.4%; width:21.5%; }
.story-copy-4 { left:76.65%; width:21.85%; }
.story-copy > img { width:100%; max-height:100%; display:block; object-fit:contain; filter:none; }

/* COLLECTION — only the outer rarity frame changes; the established card interior stays intact. */
.app[data-route="COLLECTION"] .archive-featured,.app[data-route="COLLECTION"] .archive-mini-card { aspect-ratio:320/464; }
.app[data-route="COLLECTION"] .archive-mini-card:hover,.app[data-route="COLLECTION"] .archive-mini-card.active { outline:0; transform:none; box-shadow:none; }
.app[data-route="COLLECTION"] .archive-mini-content { position:relative; inset:auto; }
.app[data-route="COLLECTION"] .archive-card-badge { border:0; background:transparent; box-shadow:none; }
.app[data-route="COLLECTION"] .archive-card-badge img { filter:drop-shadow(0 2px 3px #000); }
.app[data-route="COLLECTION"] .archive-card-level { border:0; background:transparent; box-shadow:none; text-shadow:0 1px 4px #000; }
.app[data-route="COLLECTION"] .archive-mini-art i { border:0!important; background:transparent!important; box-shadow:none!important; }

/* Approved puzzle-fit clan corner: exact geometry from the signed-off card preview. */
.faction-corner { position:absolute; z-index:5; left:0; top:0; width:63px; height:62px; display:block; isolation:isolate; pointer-events:none; }
.faction-corner > svg { position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible; }
.faction-corner > img { position:absolute; z-index:2; left:9px; top:8px; width:36px; height:36px; display:block; object-fit:contain; object-position:50% 50%; filter:drop-shadow(0 2px 3px rgba(0,0,0,.92)); }
.faction-corner-featured { left:0; top:0; }
.faction-corner-mini { left:0; top:0; transform:scale(.68); transform-origin:0 0; }
/* Starter cards: exactly the approved TRAINING corner geometry (emblem 9/8/36 in the 63x62 box), scaled by the card-width ratio 204/160 (.45 x 1.275 = .574). Own class only — .faction-corner-training is untouched. */
.faction-corner.faction-corner-starter { left:0; top:0; width:63px; height:62px; transform:scale(.574); transform-origin:0 0; }
.faction-corner.faction-corner-starter > img { left:9px; top:8px; width:36px; height:36px; }

/* DECK BUILDER — replace only the old card shells with the owner's v14 rarity frames. */
.app[data-route="DECK_BUILDER"] .deck-cards-rarity .deck-pool-card { aspect-ratio:320/464; padding:0; display:block; overflow:visible; border:0; background:transparent; box-shadow:none; clip-path:none; }
.app[data-route="DECK_BUILDER"] .deck-cards-rarity .deck-pool-card > tc-card-frame { position:absolute; inset:0; z-index:4; }
.app[data-route="DECK_BUILDER"] .deck-card-frame-content { position:relative; display:grid; grid-template-rows:minmax(0,1fr) auto; gap:5px; overflow:hidden; background:linear-gradient(160deg,color-mix(in srgb,var(--faction-accent) 10%,#0a1822),#050d13); color:#b3c5cf; text-align:left; pointer-events:auto; }
.app[data-route="DECK_BUILDER"] .deck-card-frame-content button { pointer-events:auto; }
.app[data-route="DECK_BUILDER"] .deck-card-focus { width:100%; height:100%; }
.app[data-route="DECK_BUILDER"] .deck-card-information { padding:0; }
.app[data-route="DECK_BUILDER"] .deck-cards-rarity .deck-pool-card:hover,.app[data-route="DECK_BUILDER"] .deck-cards-rarity .deck-pool-card.selected { background:transparent; }
.story-copy > p { min-width:0; margin:0; color:#f5fbff; font-family:"Bahnschrift","Arial Narrow","Segoe UI",sans-serif; font-size:clamp(13px,1.1vw,20px); font-weight:400; line-height:1.2; letter-spacing:.005em; overflow-wrap:normal; white-space:nowrap; -webkit-text-stroke:.28px rgba(0,0,0,.92); paint-order:stroke fill; text-shadow:-1px -1px 0 rgba(0,0,0,.78),1px -1px 0 rgba(0,0,0,.78),-1px 1px 0 rgba(0,0,0,.78),1px 1px 0 rgba(0,0,0,.78),0 2px 6px #000; }
.story-copy-3 > p,.story-copy-4 > p { font-size:clamp(12px,1.04vw,19px); }
.story-actions { position:absolute; z-index:4; right:3.7vw; bottom:4.7vh; display:flex; align-items:stretch; gap:clamp(12px,1vw,19px); }
.story-button { min-width:clamp(225px,15vw,290px); height:clamp(52px,6.5vh,64px); padding:0 27px; position:relative; border:3px solid #36cae8; outline:1px solid rgba(140,237,255,.3); outline-offset:-7px; color:#eafaff; clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px); background:linear-gradient(180deg,rgba(5,25,35,.95),rgba(1,10,16,.98)); box-shadow:inset 0 0 0 4px rgba(55,197,224,.08),inset 0 0 18px rgba(29,190,225,.08),0 0 10px rgba(35,204,255,.16); font-size:clamp(10px,.72vw,14px); font-weight:850; letter-spacing:.055em; text-transform:uppercase; white-space:nowrap; }
.story-button-primary { min-width:clamp(250px,16.5vw,320px); padding-right:50px; background:linear-gradient(180deg,rgba(12,68,88,.96),rgba(3,27,40,.98)); box-shadow:inset 0 0 23px rgba(39,203,255,.2),0 0 13px rgba(35,204,255,.2); }
.story-button-primary::after { content:"›"; position:absolute; right:20px; top:50%; transform:translateY(-54%); color:#26e7ff; font-size:30px; line-height:1; }
.story-button:hover:not(:disabled),.story-button:focus-visible { border-color:#a8f5ff; box-shadow:inset 0 0 22px rgba(47,220,255,.25),0 0 12px rgba(47,220,255,.24); }
.story-error { position:absolute; z-index:5; right:4vw; bottom:12.5vh; max-width:620px; margin:0; padding:8px 12px; border:1px solid #ff7888; background:rgba(32,4,9,.9); }
@media (max-width:1100px) {
  .story-heading { left:6vw; top:11vh; width:76vw; }
  .story-timeline { left:4vw; top:4.5vh; width:96vw; }
  .story-copy { top:53.65%; grid-template-columns:clamp(40px,4.45vw,54px) minmax(0,1fr); gap:6px; padding:2px 5px 2px 0; }
  .story-copy > p { font-size:clamp(9px,1.12vw,12px); }
  .story-actions { right:3vw; bottom:3vh; }
}

/* STARTER GRANT — owner video, title frame and five factual account cards. */
.app[data-route="STARTER_GRANT"] { background:#02070c; overflow:hidden; }
.app[data-route="STARTER_GRANT"] > main { padding:0; }
.starter-grant-screen { position:fixed; z-index:20; inset:0; width:100vw; max-width:none; height:100vh; min-height:620px; margin:0; overflow:hidden; color:#edfaff; isolation:isolate; }
.starter-grant-background { position:absolute; z-index:-4; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; background:#02070c; }
.starter-grant-shade { position:absolute; z-index:-3; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(0,5,10,.1),transparent 28%,transparent 70%,rgba(0,4,8,.42)),radial-gradient(ellipse 52% 46% at 50% 53%,transparent 28%,rgba(0,5,10,.14) 100%); }
.starter-grant-heading { position:absolute; z-index:3; left:50%; top:-1.2vh; width:min(1120px,64vw); aspect-ratio:2172/724; transform:translateX(-50%); pointer-events:none; filter:drop-shadow(0 0 13px rgba(22,212,255,.32)); }
.starter-grant-heading > img { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:contain; }
.starter-grant-heading > div { position:absolute; left:12%; right:12%; top:31%; height:35%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; text-transform:uppercase; }
.starter-grant-heading h1 { margin:0; color:#f4fbff; font-family:"Bahnschrift SemiCondensed","Arial Narrow","Segoe UI",sans-serif; font-size:clamp(34px,3.15vw,61px); font-weight:800; line-height:.95; letter-spacing:.055em; white-space:nowrap; -webkit-text-stroke:.35px rgba(118,227,255,.7); paint-order:stroke fill; text-shadow:0 0 4px #fff,0 0 11px rgba(48,207,255,.8),0 3px 12px #000; }
.starter-grant-heading p { margin:clamp(9px,1vh,13px) 0 0; display:flex; align-items:center; gap:12px; color:#31e6f6; font-size:clamp(10px,.82vw,15px); font-weight:700; line-height:1; letter-spacing:.2em; white-space:nowrap; text-shadow:0 0 8px rgba(18,218,255,.62); }
.starter-grant-heading p i { width:clamp(28px,2.6vw,50px); height:1px; background:linear-gradient(90deg,transparent,#47eaff); box-shadow:0 0 5px rgba(47,229,255,.65); }
.starter-grant-heading p i:last-child { transform:scaleX(-1); }
.starter-grant-cards { position:absolute; z-index:2; left:50%; top:34.5vh; width:min(1160px,66vw); height:min(43vh,465px); transform:translateX(-50%); display:flex; justify-content:center; align-items:flex-start; gap:clamp(5px,.65vw,13px); perspective:1400px; }
.starter-grant-card { position:relative; flex:0 0 clamp(150px,10.6vw,204px); aspect-ratio:2/3; padding:0; border:0; overflow:visible; background:transparent; color:#effaff; cursor:pointer; transform-origin:50% 92%; transition:transform .16s ease; filter:none; }
.starter-grant-card-1 { transform:translateY(15px); }
.starter-grant-card-2 { transform:translateY(5px); }
.starter-grant-card-3 { transform:translateY(-7px); z-index:2; }
.starter-grant-card-4 { transform:translateY(5px); }
.starter-grant-card-5 { transform:translateY(15px); }
.starter-grant-card:hover,.starter-grant-card:focus-visible { z-index:5; transform:translateY(-8px); filter:none; outline:0; }
.starter-grant-card-content { position:relative; width:100%; height:100%; display:grid; grid-template-rows:minmax(0,1fr) 42px 25px 25px 32px; overflow:hidden; background:#03070b; color:#edfaff; text-align:left; }
.starter-grant-card-art { position:relative; min-height:0; overflow:hidden; border-bottom:1px solid color-mix(in srgb,var(--starter-card-accent) 48%,#183447); }
.starter-grant-card-art img { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; object-position:50% 45%; }
.starter-grant-card-art > i { position:absolute; inset:0; background:linear-gradient(180deg,transparent 64%,rgba(2,7,12,.42)); box-shadow:inset 0 0 17px rgba(0,0,0,.38); }
.starter-grant-card-art > em { position:absolute; z-index:2; left:8px; top:8px; width:31px; height:31px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--starter-card-accent) 65%,#193c52); background:rgba(2,12,18,.82); clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); }
.starter-grant-card-art > em img { position:static; width:82%; height:82%; object-fit:contain; }
.starter-grant-card-name { min-width:0; padding:3px 8px 2px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(180deg,rgba(4,15,23,.98),rgba(2,9,14,.98)); border-bottom:1px solid #294656; text-align:center; }
.starter-grant-card-name strong { width:100%; overflow:hidden; color:#f5fbff; font-size:clamp(8px,.6vw,11px); font-weight:850; line-height:1.05; text-overflow:ellipsis; white-space:nowrap; text-transform:uppercase; }
.starter-grant-card-name small { margin-bottom:2px; color:var(--starter-card-accent); font-size:6px; font-weight:800; letter-spacing:.1em; }
.starter-grant-card-ability { min-width:0; padding:0 8px; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:6px; border-bottom:1px solid #294656; background:linear-gradient(90deg,rgba(5,19,28,.99),rgba(2,9,14,.99)); }
.starter-grant-card-ability small { color:#5a879b; font-size:5.5px; font-weight:800; letter-spacing:.08em; }
.starter-grant-card-ability strong { min-width:0; overflow:hidden; color:var(--starter-card-accent); font-size:clamp(6.5px,.44vw,8px); font-weight:850; letter-spacing:.015em; text-align:right; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 0 7px color-mix(in srgb,var(--starter-card-accent) 42%,transparent); }
.starter-grant-card-stats { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #07131b; background:#02080d; }
.starter-grant-card-stats b { min-width:0; padding:3px 7px; display:flex; align-items:center; justify-content:space-between; border-right:1px solid #294656; color:#f7fcff; font-size:clamp(13px,.88vw,17px); font-style:normal; }
.starter-grant-card-stats b:last-child { border-right:0; }
.starter-grant-card-stats small { color:#5a879b; font-size:6px; font-weight:750; letter-spacing:.08em; }
.starter-grant-card-stats em { color:#f7fcff; font-size:inherit; font-style:normal; font-weight:500; }
.starter-grant-actions { position:absolute; z-index:4; left:50%; bottom:3.8vh; transform:translateX(-50%); display:flex; align-items:stretch; gap:clamp(18px,1.4vw,28px); }
.starter-grant-button { min-width:clamp(250px,16.4vw,315px); height:clamp(54px,6.2vh,66px); padding:0 30px; position:relative; border:2px solid #38cce8; outline:1px solid rgba(133,238,255,.3); outline-offset:-7px; clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px); background:linear-gradient(180deg,rgba(3,18,28,.96),rgba(1,8,13,.98)); color:#eafaff; box-shadow:inset 0 0 0 3px rgba(55,197,224,.07),0 0 10px rgba(35,204,255,.14); font-size:clamp(10px,.72vw,14px); font-weight:850; letter-spacing:.055em; text-transform:uppercase; white-space:nowrap; }
.starter-grant-button-primary { background:linear-gradient(180deg,rgba(10,70,94,.97),rgba(2,30,44,.98)); box-shadow:inset 0 0 24px rgba(39,203,255,.24),0 0 14px rgba(35,204,255,.22); }
.starter-grant-button:hover:not(:disabled),.starter-grant-button:focus-visible { border-color:#b7f8ff; box-shadow:inset 0 0 25px rgba(47,220,255,.27),0 0 14px rgba(47,220,255,.3); }
.starter-grant-error { position:absolute; z-index:5; left:50%; bottom:11.5vh; transform:translateX(-50%); max-width:640px; margin:0; padding:8px 12px; border:1px solid #ff7888; background:rgba(32,4,9,.9); }
@media (max-width:1100px) {
  .starter-grant-heading { top:1vh; width:82vw; }
  .starter-grant-cards { top:34vh; width:88vw; gap:3px; }
  .starter-grant-card { flex-basis:16vw; }
  .starter-grant-actions { bottom:2.5vh; }
}

/* === PvE sector v1 (desktop, 08.10.2026). Owner's looping video 1920x1080 with four frames and four map
   markers drawn into it. The video fits the work-area WIDTH and is anchored to the bottom (frames always
   fully visible; only sky may be trimmed on short windows). --p = 1 video pixel. === */
.desktop > main:has(> .pve-sector) { position: relative; height: calc(100vh - 86 * var(--u)); padding: 0; overflow: hidden; }
.pve-sector { position: absolute; inset: 0; max-width: none; margin: 0; overflow: hidden; container-type: size; background: radial-gradient(120% 70% at 50% 0%, #0d2a24 0%, #04100f 45%, #03080e 100%); color: #e8f1f8; }
.pve-sector-stage, .pve-sector-heading { --p: calc(100cqw / 1920); }
.pve-sector-stage { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(1080 * var(--p)); background: url("/app/client/assets/ui/pve/pve-sector-poster.jpg") center / 100% 100% no-repeat; }
.pve-sector-stage::before { content: ""; position: absolute; inset: 0 0 auto; height: calc(220 * var(--p)); background: linear-gradient(180deg, rgba(3, 8, 14, .78), rgba(3, 8, 14, 0)); z-index: 1; pointer-events: none; }
.pve-sector-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; pointer-events: none; }
.reduced-motion .pve-sector-video { display: none; }

.pve-sector-heading { position: absolute; z-index: 3; left: calc(40 * var(--p)); top: calc(18 * var(--u)); max-width: calc(900 * var(--p)); text-shadow: 0 2px 10px #000; pointer-events: none; }
.pve-sector-heading p { margin: 0; color: #4bd5ff; font-size: calc(13 * var(--u)); font-weight: 800; letter-spacing: .28em; text-transform: uppercase; }
.pve-sector-heading h1 { margin: calc(4 * var(--u)) 0 0; color: #f3f8fb; font-size: calc(46 * var(--u)); line-height: 1; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
.pve-sector-heading span { display: block; margin-top: calc(8 * var(--u)); color: #c9d9e4; font-size: calc(15 * var(--u)); }

/* Frames: the article covers the drawn frame; the plate sits inside its inner edge. */
.pve-op { --acc: #4bd5ff; position: absolute; z-index: 2; pointer-events: none; }
.pve-op-1, .pve-op-4 { --acc: #52ff9a; }
.pve-op-2 { --acc: #4bd5ff; }
.pve-op-3 { --acc: #ff5b6b; }
.pve-op-plate { --bw: calc(var(--fi, 9) * var(--p)); --c: calc(var(--fc, 15) * var(--p)); --cb: calc(var(--fcb, 20) * var(--p));
  position: absolute; left: var(--bw); right: var(--bw); top: var(--bw); bottom: var(--bw); display: flex; flex-direction: column; padding: calc(16 * var(--p)) calc(22 * var(--p)) calc(14 * var(--p));
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--cb)), calc(100% - var(--cb)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
  background: linear-gradient(90deg, rgba(2, 8, 13, .9) 0%, rgba(2, 8, 13, .72) 48%, rgba(2, 8, 13, .18) 100%), linear-gradient(0deg, rgba(2, 8, 13, .7) 0%, rgba(2, 8, 13, 0) 45%); pointer-events: auto; }
.pve-op-summary { margin: calc(6 * var(--p)) 0 0; max-width: calc(330 * var(--p)); color: #d3e2ea; font-size: max(11px, calc(14 * var(--p))); line-height: 1.35; text-shadow: 0 1px 4px #000;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.pve-op-plate small { display: block; color: var(--acc); font-size: max(11px, calc(13 * var(--p))); font-weight: 800; letter-spacing: .22em; text-transform: uppercase; text-shadow: 0 0 calc(8 * var(--p)) color-mix(in srgb, var(--acc) 60%, transparent); }
.pve-op-plate h2 { margin: calc(2 * var(--p)) 0 0; color: #f4f9fc; font-size: max(18px, calc(30 * var(--p))); line-height: 1.05; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pve-op-status { margin: auto 0 calc(8 * var(--p)); padding-top: calc(6 * var(--p)); color: #9fb8c5; font-size: max(12px, calc(15 * var(--p))); line-height: 1.3; }
.pve-op-open { align-self: flex-start; display: inline-flex; align-items: center; min-height: max(26px, calc(36 * var(--p))); padding: 0 max(12px, calc(18 * var(--p))); border: 1px solid var(--acc); background: linear-gradient(180deg, rgba(8, 30, 40, .92), rgba(3, 12, 18, .96));
  color: #f2fbff; font: inherit; font-size: max(11px, calc(13 * var(--p))); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
  clip-path: polygon(calc(10 * var(--p)) 0, 100% 0, 100% calc(100% - calc(10 * var(--p))), calc(100% - calc(10 * var(--p))) 100%, 0 100%, 0 calc(10 * var(--p)));
  box-shadow: inset 0 0 calc(14 * var(--p)) color-mix(in srgb, var(--acc) 28%, transparent); transition: background .2s, box-shadow .2s; }
.pve-op-open:hover, .pve-op-open:focus-visible { background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 30%, #08202a), rgba(3, 12, 18, .96)); box-shadow: inset 0 0 calc(22 * var(--p)) color-mix(in srgb, var(--acc) 55%, transparent); outline: none; }
.pve-op-city-impact .pve-op-plate small::after { content: " · !"; color: #ff5b6b; }
/* Reserved for a future danger level (owner idea 08.10.2026, not implemented in the game yet). */
.pve-op-danger { position: absolute; left: calc(24 * var(--p)); top: calc(22 * var(--p)); }

/* Map markers: invisible hit zones over the markers drawn in the video; ring + name on hover. */
.pve-marker { position: absolute; z-index: 2; width: calc(118 * var(--p)); height: calc(150 * var(--p)); transform: translate(-50%, -50%); padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 50%; }
.pve-marker::before { content: ""; position: absolute; left: 50%; top: 44%; width: calc(96 * var(--p)); height: calc(96 * var(--p)); transform: translate(-50%, -50%) scale(.8); border: 2px solid rgba(111, 255, 246, .0); border-radius: 50%; transition: transform .25s, border-color .25s, box-shadow .25s; }
.pve-marker:hover::before, .pve-marker:focus-visible::before { transform: translate(-50%, -50%) scale(1); border-color: rgba(111, 255, 246, .85); box-shadow: 0 0 calc(18 * var(--p)) rgba(54, 200, 255, .6); }
.pve-marker span { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, calc(6 * var(--p))); padding: calc(4 * var(--p)) calc(10 * var(--p)); background: rgba(3, 12, 18, .92); border: 1px solid rgba(75, 213, 255, .7); color: #e8f7ff;
  font-size: max(12px, calc(14 * var(--p))); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; }
.pve-marker:hover span, .pve-marker:focus-visible span { opacity: 1; transform: translate(-50%, 0); }
.pve-marker:focus-visible { outline: none; }
/* Sector frames: title, status and button never shrink; on smaller windows the description keeps two
   whole lines (never cut mid-line) and spacing tightens. */
.pve-op-plate > small, .pve-op-plate > h2, .pve-op-status, .pve-op-open { flex-shrink: 0; }
.pve-op-plate > h2 { padding-bottom: 2px; }
.pve-op-summary { flex-shrink: 0; }
@container (max-width: 1400px) {
  .pve-op-plate { padding: calc(10 * var(--p)) calc(14 * var(--p)) calc(8 * var(--p)); }
  .pve-op-summary { -webkit-line-clamp: 2; margin-top: 2px; line-height: 1.3; }
  .pve-op-status { margin-bottom: 4px; padding-top: 2px; font-size: 11px; line-height: 1.25; }
  .pve-op-open { min-height: 24px; }
}


/* === PvE briefing v1 (desktop, 08.10.2026) — owner's mock «операция клиника». Design box = work area at
   1920x950 (1692 x 864); --p scales by the smaller of width/height so everything fits without scrolling.
   Frames/buttons use the battle-hub tc-cut material ("training" shape). === */
.desktop > main:has(> .pve-brief) { position: relative; height: calc(100vh - 86 * var(--u)); padding: 0; overflow: hidden; }
.pve-brief { position: absolute; inset: 0; max-width: none; margin: 0; overflow: hidden; container-type: size; color: #e8f1f8; background-color: #03080e; }
.pve-brief > * { --p: min(calc(100cqw / 1692), calc(100cqh / 864)); }
.pve-brief::before { content: ""; position: absolute; inset: 0; background-repeat: no-repeat; background-size: cover; background-position: 50% 100%; }
.pve-brief.pb-bg-sector::before { background-image: url("/app/client/assets/ui/pve/pve-sector-poster.jpg"); background-position: 50% 30%; }
.pve-brief::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(3, 8, 14, .86) 0%, rgba(3, 8, 14, .55) 26%, rgba(3, 8, 14, 0) 46%), linear-gradient(0deg, rgba(3, 8, 14, .9) 0%, rgba(3, 8, 14, .45) 30%, rgba(3, 8, 14, 0) 52%); }
.pve-brief > * { position: absolute; z-index: 1; margin: 0; }

.pb-head { left: calc(44 * var(--p)); top: calc(26 * var(--p)); width: calc(640 * var(--p)); text-shadow: 0 2px 10px #000; }
.pb-crumbs { display: flex; gap: calc(10 * var(--p)); align-items: center; margin: 0; color: #4bd5ff; font-size: max(11px, calc(14 * var(--p))); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.pb-crumbs span:first-child { color: #8fb6c6; }
.pb-crumbs b { color: #4bd5ff; font-weight: 700; }
.pb-head h1 { margin: calc(6 * var(--p)) 0 0; color: #f4f9fc; font-size: calc(96 * var(--p)); line-height: .95; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; }
.pb-sector { margin: calc(8 * var(--p)) 0 0; color: #c9dce6; font-size: max(12px, calc(24 * var(--p))); letter-spacing: .14em; text-transform: uppercase; }
.pb-story { margin: calc(22 * var(--p)) 0 0; max-width: calc(560 * var(--p)); color: #d9e6ed; font-size: max(12px, calc(18 * var(--p))); line-height: 1.55; }

.pb-cards { left: calc(24 * var(--p)); right: calc(24 * var(--p)); bottom: calc(118 * var(--p)); height: calc(318 * var(--p)); display: flex; gap: calc(14 * var(--p)); }
.pb-card { position: relative; flex: 1 1 0; min-width: 0; height: 100%; }
.pb-card > .tc-cut-body { display: flex; flex-direction: column; padding: calc(16 * var(--p)) calc(18 * var(--p)) calc(16 * var(--p)); }
.pb-card-head { display: flex; align-items: center; gap: calc(10 * var(--p)); color: #c9f4ff; font-size: max(11px, calc(15 * var(--p))); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pb-icon { width: calc(24 * var(--p)); height: calc(24 * var(--p)); min-width: 14px; min-height: 14px; color: #4bd5ff; filter: drop-shadow(0 0 calc(6 * var(--p)) rgba(75, 213, 255, .6)); flex: none; }
.pb-art { position: relative; display: block; flex: none; height: calc(118 * var(--p)); margin: calc(12 * var(--p)) 0 calc(12 * var(--p)); border: 1px solid rgba(75, 213, 255, .28);
  clip-path: polygon(calc(10 * var(--p)) 0, 100% 0, 100% calc(100% - calc(10 * var(--p))), calc(100% - calc(10 * var(--p))) 100%, 0 100%, 0 calc(10 * var(--p))); background-color: #061018; background-repeat: no-repeat; }
.pb-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3, 10, 18, .55), rgba(3, 10, 18, 0) 55%); }
.pb-art-district, .pb-art-conditions { background-image: url("/app/client/assets/ui/pve/pve-sector-poster.jpg"); background-size: 260% auto; background-position: 50% 30%; }
.pb-art-conditions { height: calc(84 * var(--p)); }
.pb-art-opponent { background: var(--emblem) center / auto 86% no-repeat, radial-gradient(70% 90% at 50% 55%, rgba(170, 20, 40, .55), rgba(20, 4, 10, .95) 75%); }
.pb-art-reward { background-image: url("/app/client/assets/ui/hq/card-containers.jpg"); background-size: cover; background-position: 50% 55%; }
.pb-card h2 { margin: 0; color: #f4f9fc; font-size: max(12px, calc(19 * var(--p))); line-height: 1.15; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.pb-card p { margin: calc(6 * var(--p)) 0 0; color: #bcd0da; font-size: max(11px, calc(14 * var(--p))); line-height: 1.4; }
.pb-card .pb-note { color: #ff8a95; }
.pb-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(9 * var(--p)); }
.pb-lines li { display: flex; align-items: center; gap: calc(10 * var(--p)); color: #d8e7ee; font-size: max(11px, calc(14 * var(--p))); line-height: 1.3; }
.pb-line-icon { width: calc(20 * var(--p)); height: calc(20 * var(--p)); min-width: 12px; min-height: 12px; flex: none; color: #e9f6ff; }
.pb-reward-text.used { color: #ffc77a; }

.pb-fan { position: relative; display: block; flex: none; height: calc(128 * var(--p)); margin: calc(12 * var(--p)) 0 calc(10 * var(--p)); }
.pb-fan-card { position: absolute; left: 50%; bottom: 0; width: calc(62 * var(--p)); height: calc(88 * var(--p)); margin-left: calc(-31 * var(--p)); border: 1px solid rgba(160, 230, 255, .55); border-radius: calc(4 * var(--p));
  background: #0a1620 center / cover no-repeat; box-shadow: 0 calc(4 * var(--p)) calc(12 * var(--p)) rgba(0, 0, 0, .7);
  transform-origin: 50% 160%; transform: translateX(calc(var(--i) * 34 * var(--p))) rotate(calc(var(--i) * 9deg)); }
.pb-fan-card:nth-child(3) { z-index: 2; height: calc(100 * var(--p)); width: calc(70 * var(--p)); margin-left: calc(-35 * var(--p)); border-color: #6ffff6; box-shadow: 0 0 calc(14 * var(--p)) rgba(75, 213, 255, .55); }
.pb-deck-name { text-transform: none !important; }

/* Scene layout (08.10.2026, owner's mock v3): the operation picture sits in its own code frame on top, cards below.
   Pictures per operation: pve-brief-<op>-scene/district/conditions/reward.jpg (never stretched). Clinic scene = owner's original
   «Неоновая клиника карантина ночью» (wide view: whole clinic + ambulance fit the wide frame). */
.pve-brief.pb-has-scene::before { background: radial-gradient(80% 60% at 60% 30%, rgba(20, 60, 90, .25), rgba(3, 8, 14, 0) 70%); }
.pve-brief.pb-has-scene::after { display: none; }
.pb-scene { left: calc(24 * var(--p)); right: calc(24 * var(--p)); top: calc(12 * var(--p)); bottom: calc(422 * var(--p)); z-index: 0; }
.pb-scene-art { background: #050b12 center / cover no-repeat; }
.pb-scene-art::after { background: linear-gradient(90deg, rgba(3, 10, 18, .88) 0%, rgba(3, 10, 18, .62) 26%, rgba(3, 10, 18, .12) 46%, rgba(3, 10, 18, 0) 60%), linear-gradient(0deg, rgba(3, 10, 18, .45), rgba(3, 10, 18, 0) 30%); }
.pb-bg-clinic .pb-scene-art { background-image: url("/app/client/assets/ui/pve/pve-brief-clinic-scene.jpg"); background-position: 50% 26%; }
.pb-has-scene .pb-head { left: calc(60 * var(--p)); top: calc(40 * var(--p)); }
.pb-has-scene .pb-head h1 { font-size: calc(84 * var(--p)); }
.pb-has-scene .pb-story { margin-top: calc(16 * var(--p)); }
.pb-has-scene .pb-cards { bottom: calc(108 * var(--p)); height: calc(300 * var(--p)); }
.pb-has-scene .pb-actions { bottom: calc(16 * var(--p)); }
.pb-has-scene .pb-art { height: calc(104 * var(--p)); }
.pb-has-scene .pb-art-conditions { height: calc(84 * var(--p)); }
.pb-bg-clinic .pb-art-district, .pb-bg-clinic .pb-art-conditions, .pb-bg-clinic .pb-art-reward { background-size: cover; background-position: 50% 45%; }
.pb-bg-clinic .pb-art-district { background-image: url("/app/client/assets/ui/pve/pve-brief-clinic-district.jpg"); }
.pb-bg-clinic .pb-art-conditions { background-image: url("/app/client/assets/ui/pve/pve-brief-clinic-conditions.jpg"); }
.pb-bg-clinic .pb-art-reward { background-image: url("/app/client/assets/ui/pve/pve-brief-clinic-reward.jpg"); }
/* Archive (operation-02): scene = owner's «Неоновая крепость над тёмными водами»; the four frame pictures are the owner's own
   (GPT, 09.10, 3:1): district = gates, opponent = Syndicate troopers (replaces the emblem here), conditions = vault corridor, reward = cards. */
.pb-bg-archive .pb-scene-art { background-image: url("/app/client/assets/ui/pve/pve-brief-archive-scene.jpg"); background-position: 50% 12%; }
.pb-bg-archive .pb-art-district, .pb-bg-archive .pb-art-conditions, .pb-bg-archive .pb-art-reward { background-size: cover; background-position: 50% 45%; }
.pb-bg-archive .pb-art-district { background-image: url("/app/client/assets/ui/pve/pve-brief-archive-district.jpg"); background-position: 62% 50%; }
.pb-bg-archive .pb-art-conditions { background-image: url("/app/client/assets/ui/pve/pve-brief-archive-conditions.jpg"); background-position: 50% 55%; }
.pb-bg-archive .pb-art-reward { background-image: url("/app/client/assets/ui/pve/pve-brief-archive-reward.jpg"); }
/* Docks (operation-03, 09.10): scene = owner's «Неоновая гавань под водопадами»; four frame pictures are the owner's own (GPT, 16:9,
   shown through the frame window — only proportional scaling, the band is chosen per picture). */
.pb-bg-docks .pb-scene-art { background-image: url("/app/client/assets/ui/pve/pve-brief-docks-scene.jpg"); background-position: 50% 18%; }
.pb-bg-docks .pb-art-district, .pb-bg-docks .pb-art-conditions, .pb-bg-docks .pb-art-reward { background-size: cover; }
.pb-bg-docks .pb-art-district { background-image: url("/app/client/assets/ui/pve/pve-brief-docks-district.jpg"); background-position: 50% 40%; }
.pb-bg-docks .pb-art-conditions { background-image: url("/app/client/assets/ui/pve/pve-brief-docks-conditions.jpg"); background-position: 50% 42%; }
.pb-bg-docks .pb-art-reward { background-image: url("/app/client/assets/ui/pve/pve-brief-docks-reward.jpg"); background-position: 50% 62%; }
/* Signal (operation-04, 09.10): scene = owner's «Киберпанк-город под дождём»; four frame pictures are the owner's own (GPT, 16:9,
   made with the Echo Masque cards + emblem from «Опирация Сигнал/для GPT — Маска Эха»). */
.pb-bg-signal .pb-scene-art { background-image: url("/app/client/assets/ui/pve/pve-brief-signal-scene.jpg"); background-position: 50% 14%; }
.pb-bg-signal .pb-art-district, .pb-bg-signal .pb-art-conditions, .pb-bg-signal .pb-art-reward { background-size: cover; }
.pb-bg-signal .pb-art-district { background-image: url("/app/client/assets/ui/pve/pve-brief-signal-district.jpg"); background-position: 50% 40%; }
.pb-bg-signal .pb-art-conditions { background-image: url("/app/client/assets/ui/pve/pve-brief-signal-conditions.jpg"); background-position: 50% 58%; }
.pb-bg-signal .pb-art-reward { background-image: url("/app/client/assets/ui/pve/pve-brief-signal-reward.jpg"); background-position: 50% 55%; }
.pb-bg-signal .pb-art-opponent { background: linear-gradient(90deg, rgba(3, 10, 18, .92) 0%, rgba(3, 10, 18, .55) 30%, rgba(3, 10, 18, 0) 52%), url("/app/client/assets/ui/pve/pve-brief-signal-opponent.jpg") 50% 30% / cover no-repeat; }
.pb-bg-docks .pb-art-opponent { background: linear-gradient(90deg, rgba(3, 10, 18, .92) 0%, rgba(3, 10, 18, .55) 30%, rgba(3, 10, 18, 0) 52%), url("/app/client/assets/ui/pve/pve-brief-docks-opponent.jpg") 75% 55% / cover no-repeat; }
.pb-bg-archive .pb-art-opponent { background: linear-gradient(90deg, rgba(3, 10, 18, .92) 0%, rgba(3, 10, 18, .55) 30%, rgba(3, 10, 18, 0) 52%), url("/app/client/assets/ui/pve/pve-brief-archive-opponent.jpg") 60% 40% / cover no-repeat; }
/* Owner 09.10: opponent frame = operation picture (stays) + the faction emblem as a glowing badge on the darkened left side.
   The emblem comes from the operation's faction (--emblem), the glow colour from data-faction. Add an operation here once it has
   its own opponent picture; operations without one keep the plain emblem frame. */
.pb-bg-clinic .pb-art-opponent { background: linear-gradient(90deg, rgba(3, 10, 18, .92) 0%, rgba(3, 10, 18, .55) 30%, rgba(3, 10, 18, 0) 52%), url("/app/client/assets/ui/pve/pve-brief-clinic-opponent.jpg") 50% 26% / cover no-repeat; }
.pb-bg-clinic .pb-art-opponent::before, .pb-bg-archive .pb-art-opponent::before, .pb-bg-docks .pb-art-opponent::before, .pb-bg-signal .pb-art-opponent::before { content: ""; position: absolute; z-index: 1; left: 5%; top: 10%; bottom: 10%; aspect-ratio: 1;
  background: var(--emblem) center / contain no-repeat; filter: drop-shadow(0 0 calc(4 * var(--p)) var(--glow)) drop-shadow(0 0 calc(12 * var(--p)) var(--glow)); }
.pb-art-opponent { --glow: rgba(90, 200, 255, .85); }
.pb-art-opponent[data-faction="FERRUM_COMPACT"] { --glow: rgba(255, 70, 60, .85); }
.pb-art-opponent[data-faction="SUTURE_CHOIR"] { --glow: rgba(80, 255, 170, .8); }
.pb-art-opponent[data-faction="ECHO_MASQUE"] { --glow: rgba(190, 110, 255, .85); }
.pb-deck-count { color: #9fb8c5 !important; font-weight: 800; }
.pb-deck-count.full { color: #52ff9a !important; }
.pb-deck-edit { --c: calc(9 * var(--p)); position: relative; isolation: isolate; margin: auto calc(4 * var(--p)) 0; display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--p)); min-height: max(28px, calc(42 * var(--p))); border: 0; padding: 0;
  background: #4bd5ff; color: #f2fbff; font: inherit; font-size: max(11px, calc(14 * var(--p))); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }
/* Owner 09.10: all four corners cut the same way, the 1px outline follows the cuts (outer = outline colour, ::before = fill). */
.pb-deck-edit::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: linear-gradient(180deg, rgb(8, 30, 40), rgb(3, 12, 18));
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }
.pb-deck-edit:hover::before, .pb-deck-edit:focus-visible::before { background: linear-gradient(180deg, rgb(20, 70, 90), rgb(3, 12, 18)); }
.pb-deck-edit:focus-visible { outline: none; }
.pb-deck-edit b { color: #4bd5ff; }

.pb-error { left: calc(44 * var(--p)); bottom: calc(40 * var(--p)); max-width: calc(900 * var(--p)); padding: calc(10 * var(--p)) calc(16 * var(--p)); border: 1px solid rgba(255, 90, 110, .7); background: rgba(40, 6, 12, .85); color: #ffd0d6; font-size: max(12px, calc(15 * var(--p))); }
.pb-actions { right: calc(24 * var(--p)); bottom: calc(22 * var(--p)); display: flex; gap: calc(18 * var(--p)); align-items: center; }
.pb-btn { position: relative; padding: 0; border: 0; background: none; color: #f2fbff; font: inherit; cursor: pointer; }
.pb-btn > .tc-cut-body { display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--p)); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pb-back { width: calc(300 * var(--p)); height: calc(70 * var(--p)); font-size: max(12px, calc(17 * var(--p))); }
.pb-start { width: calc(420 * var(--p)); height: calc(78 * var(--p)); font-size: max(13px, calc(22 * var(--p))); }
.pb-start > .tc-cut-glass { background: linear-gradient(180deg, rgba(10, 60, 80, .78), rgba(4, 22, 34, .82)); }
.pb-start b { color: #6ffff6; font-size: 1.2em; text-shadow: 0 0 calc(10 * var(--p)) rgba(75, 213, 255, .8); }
.pb-btn-icon { width: calc(26 * var(--p)); height: calc(26 * var(--p)); color: #4bd5ff; }
.pb-btn:hover > .tc-cut-glass, .pb-btn:focus-visible > .tc-cut-glass { filter: brightness(1.35); }
.pb-btn:focus-visible { outline: none; }
.pb-btn:disabled { cursor: not-allowed; opacity: .55; }

/* === Рейтинговая арена V1 (09.10.2026) — функциональная раскладка, визуал позже с владельцем === */
.arena-status { margin: 10px 0 16px; color: #69e8ff; text-transform: uppercase; letter-spacing: .12em; }
.arena-status small { margin-left: 10px; color: #ffc77a; text-transform: none; letter-spacing: 0; }
.arena-error { padding: 10px 14px; border: 1px solid rgba(255, 90, 110, .7); background: rgba(40, 6, 12, .85); color: #ffd0d6; }
.arena-screen section.arena-panel, .arena-screen aside.arena-panel { max-width: none; margin: 0; }
.arena-panel { padding: 18px 20px; border: 1px solid #245a68; background: rgba(3, 17, 23, .94); }
.arena-panel h2 { margin: 0 0 12px; }
.arena-me .rating-metrics { grid-template-columns: repeat(4, 1fr); }
.arena-note { margin: 10px 0 0; color: #9fb8c5; font-size: 14px; }
.arena-unclaimed { color: #ffc77a; }
.arena-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
.arena-lower { display: grid; grid-template-columns: 1.3fr .7fr; gap: 14px; }
.arena-table, .arena-rewards { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.arena-table td, .arena-rewards td, .arena-rewards th { padding: 7px 8px; border-bottom: 1px solid rgba(36, 90, 104, .5); text-align: left; }
.arena-rewards th { color: #7898a1; font-weight: 600; font-size: 12px; }
.arena-table td:nth-child(1) { width: 40px; color: #7898a1; }
.arena-table td:nth-child(3) { color: #69e8ff; font-weight: 800; }
.arena-table tr.self td { background: rgba(105, 232, 255, .1); }
.arena-table i { color: #52ff9a; font-style: normal; font-size: 12px; text-transform: uppercase; }
.arena-empty { color: #7898a1; }
.arena-bracket { margin-bottom: 14px; }
.arena-rounds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.arena-rounds h3 { margin: 0 0 8px; color: #7898a1; font-size: 13px; text-transform: uppercase; }
.arena-rounds article { display: grid; gap: 2px; margin-bottom: 8px; padding: 8px 10px; border: 1px solid rgba(36, 90, 104, .7); }
.arena-rounds article .won { color: #52ff9a; font-weight: 800; }
.arena-rounds article small { color: #ffc77a; }
.arena-podium { margin: 0; padding-left: 18px; }
@media (max-width: 760px) { .arena-lower, .arena-rounds { grid-template-columns: 1fr; } .arena-me .rating-metrics { grid-template-columns: repeat(2, 1fr); } }
/* Война кланов V1 (09.10.2026) — поверх раскладки арены */
.clan-war-org { color: #c9dce6 !important; }
.clan-war-score { margin-bottom: 14px; }
.clan-war-scoreline { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-bottom: 14px; font-size: 18px; font-weight: 800; }
.clan-war-scoreline span:last-child { text-align: right; }
.clan-war-scoreline b { color: #69e8ff; font-size: 34px; }
.clan-war-score .rating-metrics { grid-template-columns: repeat(2, 1fr); }
.clan-war-lower { margin-top: 14px; }
.clan-war-screen .arena-table td small { color: #7898a1; }
.organization-clan-war { margin-right: 10px; }
.clan-war-screen .clan-table td:nth-child(1) { width: auto; color: #e8f1f8; }
.clan-war-screen .clan-table td:last-child { text-align: right; white-space: nowrap; }
.org-membership-bottom > .org-bottom-actions { display: grid; gap: calc(8 * var(--oh)); }
.org-membership-bottom .org-bottom-actions button { width: 100%; min-height: calc(36 * var(--oh)); margin: 0; padding: 0 calc(12 * var(--ow)); font-size: calc(10 * var(--oz)); }
.org-membership-bottom .org-bottom-actions .organization-clan-war { border: 1px solid #35d9ff; background: linear-gradient(180deg, rgba(8, 40, 54, .95), rgba(3, 14, 20, .96)); color: #eafaff; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.org-membership-bottom .org-bottom-actions .organization-leave { border-color: #637b86; }


/* === Штаб организации: вкладки (09.10.2026). Рамки — кодом, как у нижней панели штаба. === */
.org-summary-tabs { display: flex; gap: calc(6 * var(--oz)); margin-top: calc(7 * var(--oh)); }
.org-summary-tabs button { flex: 1; min-height: calc(26 * var(--oh)); padding: 0 calc(8 * var(--ow)); border: 1px solid #287d99; background: linear-gradient(180deg, rgba(8, 40, 54, .95), rgba(3, 14, 20, .96)); color: #dff7ff; font-size: calc(9 * var(--oz)); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.org-summary-tabs button.has-badge { border-color: #ffa82f; color: #ffcf8a; }
.org-scene-panel.org-scene-clickable { cursor: pointer; }
.org-scene-panel.org-scene-clickable:hover .org-scene-copy h2, .org-scene-panel.org-scene-clickable:focus-visible .org-scene-copy h2 { color: #8ceeff; text-shadow: 0 0 calc(10 * var(--oz)) rgba(53, 217, 255, .7); }

.org-tab-panel { --cut: calc(22 * var(--oz)); z-index: 8; display: flex; flex-direction: column; color: #e6f6fc; }
.organization-hub > .org-tab-panel { left: calc(250 * var(--ow)); top: calc(118 * var(--oh)); width: calc(1330 * var(--ow)); height: calc(665 * var(--oh)); padding: calc(18 * var(--oh)) calc(26 * var(--ow)); }
.org-tab-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut)); background: linear-gradient(180deg,#d0e8ef 0,#5c7887 3px,#172b37 8px,#07131b 6%,#06111a 94%,#4b6977 calc(100% - 3px),#bddde6 100%); box-shadow: 0 12px 30px rgba(0,0,0,.7); }
.org-tab-panel::after { content: ""; position: absolute; inset: 6px; z-index: -1; pointer-events: none; clip-path: polygon(calc(var(--cut) - 4px) 0,calc(100% - var(--cut) + 4px) 0,100% calc(var(--cut) - 4px),100% calc(100% - var(--cut) + 4px),calc(100% - var(--cut) + 4px) 100%,calc(var(--cut) - 4px) 100%,0 calc(100% - var(--cut) + 4px),0 calc(var(--cut) - 4px)); background: linear-gradient(180deg,rgba(94,217,255,.1),transparent 12%),linear-gradient(180deg,rgba(8,27,38,.97),rgba(2,11,17,.98)); border-top: 2px solid #35d9ff; border-bottom: 2px solid #178cad; }
.org-tab-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.org-tab-strip .org-tab { position: relative; min-height: 34px; padding: 0 16px; border: 1px solid #245b70; background: rgba(4, 20, 29, .9); color: #a9c7d3; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.org-tab-strip .org-tab.active { border-color: #35d9ff; background: linear-gradient(180deg, rgba(20, 78, 102, .95), rgba(5, 26, 37, .96)); color: #f2fcff; box-shadow: inset 0 0 12px rgba(53, 217, 255, .25); }
.org-tab-strip .org-tab b { margin-left: 8px; padding: 1px 6px; background: #ffa82f; color: #1a1006; font-size: 11px; }
.org-tab-strip .org-tab-close { margin-left: auto; min-height: 34px; padding: 0 16px; border: 1px solid #637b86; background: rgba(3, 12, 18, .9); color: #cfe2ea; cursor: pointer; }
.org-tab-body { flex: 1; min-height: 0; overflow: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: #2a7f9c transparent; }
.org-tab-body h2 { margin: 0 0 8px; color: #ffa82f; font-size: 20px; letter-spacing: .08em; text-transform: uppercase; }
.org-tab-body h3 { margin: 14px 0 6px; color: #42dfff; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.org-tab-summary, .org-tab-empty { margin: 0 0 10px; color: #8eb1c0; }
.org-members-table, .org-points-table { width: 100%; border-collapse: collapse; }
.org-members-table td, .org-points-table td { padding: 7px 8px; border-bottom: 1px solid rgba(40, 125, 153, .35); vertical-align: middle; }
.org-members-table tr.self td, .org-points-table tr.self td { background: rgba(53, 217, 255, .08); }
.org-members-table .org-m-name strong { color: #f3fbff; }
.org-members-table .org-m-name small { color: #6fd7f2; }
.org-members-table .org-m-points, .org-members-table .org-m-war { color: #a9c7d3; white-space: nowrap; }
.org-members-table .org-m-actions { text-align: right; white-space: nowrap; }
.org-role-badge { display: inline-block; min-width: 70px; padding: 2px 8px; border: 1px solid #287d99; color: #cfefff; font-size: 12px; font-weight: 800; text-align: center; text-transform: uppercase; letter-spacing: .06em; }
.role-leader .org-role-badge, .org-role-badge.role-leader { border-color: #ffa82f; color: #ffcf8a; }
.role-deputy .org-role-badge, .org-role-badge.role-deputy { border-color: #35d9ff; color: #9cefff; }
.role-veteran .org-role-badge, .org-role-badge.role-veteran { border-color: #b48cff; color: #d6c2ff; }
.org-act { min-height: 28px; margin-left: 6px; padding: 0 10px; border: 1px solid #287d99; background: rgba(5, 26, 37, .9); color: #dff7ff; font-size: 12px; cursor: pointer; }
.org-act-danger { border-color: #a5483d; color: #ffb3a8; }
.org-act:disabled { opacity: .45; cursor: default; }
.org-confirm { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; color: #ffcf8a; white-space: normal; }
.org-confirm button { min-height: 28px; padding: 0 12px; border: 1px solid #ffa82f; background: rgba(40, 24, 6, .9); color: #ffe2b5; cursor: pointer; }
.org-confirm .org-confirm-no { border-color: #637b86; background: rgba(3, 12, 18, .9); color: #cfe2ea; }
.org-leave-dialog-backdrop { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:24px; background:rgba(0,6,12,.8); backdrop-filter:blur(4px); }
.org-leave-dialog { --cut:22px; position:relative; isolation:isolate; width:min(620px,100%); max-height:calc(100dvh - 48px); overflow:auto; padding:32px; gap:16px; text-shadow:none; }
.org-leave-dialog .org-leave-kicker { color:#52e5ff; font-size:12px; font-weight:800; letter-spacing:.14em; }
.org-leave-dialog h2 { margin:0; color:#f2faff; font-size:clamp(22px,2.2vw,28px); line-height:1.25; overflow-wrap:anywhere; }
.org-leave-dialog p { margin:0; color:#e1eff6; font-size:16px; line-height:1.6; overflow-wrap:anywhere; }
.org-leave-dialog ol { margin:0; padding-left:24px; color:#c7e1ed; font-size:15px; line-height:1.6; }
.org-leave-dialog li + li { margin-top:8px; }
.org-leave-dialog li::marker { color:#52e5ff; font-weight:800; }
.org-leave-alternative { padding-top:16px; border-top:1px solid #28576b; }
.org-leave-alternative h3 { margin:0 0 8px; color:#a0edff; font-size:16px; line-height:1.4; }
.org-leave-alternative p { font-size:15px; }
.org-leave-dialog p.org-leave-error { color:#ffb9ae; }
.org-leave-dialog-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
.org-leave-dialog-actions button { flex:1 1 180px; min-height:44px; padding:12px 18px; border:1px solid #3fdfff; background:linear-gradient(#12475b,#061c29); color:#f0fbff; font:inherit; font-size:14px; font-weight:800; cursor:pointer; clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.org-leave-dialog-actions .org-leave-cancel { border-color:#718b98; background:linear-gradient(#172c37,#08131c); color:#cee3ed; }
.org-leave-dialog-actions button:focus-visible { outline:2px solid #fff; outline-offset:-5px; }
.org-leave-dialog-actions button:disabled { opacity:.5; cursor:default; }
.battle-surrender-open { position:fixed; left:18px; top:18px; z-index:90; width:136px; min-height:42px; padding:0; border:0; background:none; color:#ffe2dc; font:inherit; font-size:14px; font-weight:800; cursor:pointer; }
.battle-surrender-open > .tc-cut-glass { background:linear-gradient(#291b20,#0a111b); }
.battle-surrender-open > .tc-cut-body { position:relative; inset:auto; display:grid; place-items:center; min-height:42px; padding:8px 16px; }
.battle-surrender-open:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.battle-surrender-open:disabled { cursor:default; opacity:.55; }
.battle-surrender-hint { position:fixed; left:18px; top:66px; z-index:90; width:136px; padding:4px 6px; background:rgba(3,10,16,.82); color:#adc4cf; font-size:12px; line-height:1.25; text-align:center; pointer-events:none; }
.battle-surrender-backdrop { z-index:160; }
.battle-surrender-dialog .battle-surrender-comparison { padding:12px 14px; border-left:2px solid #4bdef8; background:#0a2430; color:#cfecf8; font-size:15px; }
.battle-surrender-dialog .battle-surrender-note { color:#adc4cf; font-size:14px; }
.battle-surrender-dialog .battle-surrender-yes { background:linear-gradient(#4c2726,#211318); border-color:#ec9a89; color:#ffe3dc; }
.org-roles-legend p { margin: 6px 0; color: #b9d3dd; }
.org-contrib-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 22px; }
.org-contrib-goal .organization-goal { display: grid; gap: 6px; }
.org-contrib-goal .organization-goal-bar { height: 10px; border: 1px solid #245b70; background: #02090e; }
.org-contrib-mine { display: flex; justify-content: space-between; margin: 14px 0; padding: 8px 10px; border: 1px solid #287d99; }
.org-contrib-mine small { color: #8eb1c0; }
.org-contrib-rules { margin: 12px 0 0; padding-left: 18px; color: #a9c7d3; line-height: 1.45; }
.org-points-table td:last-child { text-align: right; color: #9cefff; font-weight: 800; white-space: nowrap; }
.org-points-table small { color: #7898a1; }
.org-history { margin: 0; padding-left: 18px; color: #b9d3dd; }
.org-settings-form { display: grid; gap: 14px; max-width: 720px; }
.org-settings-form label { display: grid; gap: 6px; color: #8eb1c0; }
.org-settings-form textarea { min-height: 110px; padding: 10px; border: 1px solid #287d99; background: #02090e; color: #e6f6fc; font: inherit; resize: vertical; }
.org-settings-form select { min-height: 34px; border: 1px solid #287d99; background: #02090e; color: #e6f6fc; }
.org-settings-form small { justify-self: end; color: #6f8e9a; }
.org-settings-form .org-settings-save { justify-self: start; min-height: 36px; padding: 0 22px; margin: 0; border-color: #35d9ff; font-weight: 800; text-transform: uppercase; }
.org-settings-view p { margin: 0 0 8px; color: #d6e8ef; }
.organization-screen .org-tab-panel { position: relative; padding: 16px; margin: 12px 0; }
.organization-screen .org-tab-strip > button { min-height: 34px; }
.organization-screen .org-contrib-grid { grid-template-columns: 1fr; }
.organization-screen .org-members-table td { display: block; border: 0; padding: 2px 4px; }
.organization-screen .org-members-table tr { display: block; padding: 8px 0; border-bottom: 1px solid rgba(40, 125, 153, .35); }
.organization-screen .org-members-table .org-m-actions { text-align: left; white-space: normal; }
.organization-hub:has(> .org-tab-panel) > .org-scene-hero { visibility: hidden; }

/* Список организаций в рамке вкладок (09.10.2026). */
.org-scene-status.has-actions > div:not(.org-status-actions) { width: calc(318 * var(--ow)); }
.org-scene-status.has-actions > div.org-status-actions { position: absolute; z-index: 3; left: auto; right: calc(26 * var(--ow)); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: calc(6 * var(--oh)); width: calc(160 * var(--ow)); }
.org-scene-status .org-status-actions button { position: static; width: 100%; min-height: calc(30 * var(--oh)); padding: 0 calc(12 * var(--ow)); font-size: calc(9 * var(--oz)); white-space: nowrap; }
.org-scene-status .organization-find { border: 1px solid #35d9ff; background: linear-gradient(180deg, rgba(8, 40, 54, .95), rgba(3, 14, 20, .96)); color: #eafaff; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.org-tab-strip span.org-tab { display: inline-flex; align-items: center; cursor: default; }
.org-directory-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.org-directory-head h2 { margin: 0; }
.org-directory-head input { width: min(360px, 45%); min-height: 34px; padding: 0 12px; border: 1px solid #287d99; background: #02090e; color: #e6f6fc; font: inherit; }
.org-directory-pending { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding: 8px 12px; border: 1px solid #ffa82f; color: #ffcf8a; background: rgba(40, 24, 6, .5); }
.org-directory-table .org-m-name p { margin: 3px 0 0; color: #8eb1c0; font-size: 13px; white-space: normal; }
.org-directory-table .org-m-name small { color: #4bdcff; }
.org-act-join { border-color: #35d9ff; color: #f2fcff; font-weight: 800; text-transform: uppercase; }
.org-directory-head p { margin: 0; color: #8eb1c0; }

/* Кнопки в блоке статуса (владелец 09.10.2026): срезанные углы (левый верхний и правый нижний), опущены к низу рамки. */
.org-scene-status.has-actions > div.org-status-actions { top: auto; bottom: calc(8 * var(--oh)); right: calc(40 * var(--ow)); transform: none; width: calc(150 * var(--ow)); }
.org-scene-status .org-status-actions button {
  --c: calc(9 * var(--oz));
  position: relative; left: 0; top: 0; isolation: isolate; min-height: calc(28 * var(--oh)); border: 0; background: #35d9ff; color: #eafaff;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  filter: drop-shadow(0 0 calc(6 * var(--oz)) rgba(53, 217, 255, .35));
}
.org-scene-status .org-status-actions button::before {
  content: ""; position: absolute; inset: 1px; z-index: -1;
  clip-path: polygon(calc(var(--c) - 1px) 0, 100% 0, 100% calc(100% - var(--c) + 1px), calc(100% - var(--c) + 1px) 100%, 0 100%, 0 calc(var(--c) - 1px));
  background: linear-gradient(180deg, rgba(10, 46, 62, .97), rgba(3, 14, 20, .97));
}
.org-scene-status .org-status-actions button:hover::before { background: linear-gradient(180deg, rgba(18, 74, 98, .97), rgba(5, 24, 34, .97)); }
.org-scene-status .org-status-actions .organization-cancel-application { background: #ffa82f; color: #ffe2b5; }

/* === КОНТРАКТЫ (desktop), набросок владельца 09.10.2026. Фон 1774×887 — от края меню, по высоте/ширине «cover»,
   прижат вправо-вниз, чтобы страж и экраны справа всегда были видны; картинка не растягивается непропорционально.
   Рамки, срезы углов, полосы прогресса — кодом. Прокручивается только колонка со списком. === */
.app[data-route="CONTRACTS"] {
  --ct-bg-scale: max(calc((100vw - 228 * var(--u)) / 1774), calc(100vh / 887));
  background-color: #03080e;
  background-image: url("/app/client/assets/ui/contracts/contracts-bg.jpg");
  background-position: right bottom;
  background-size: calc(1774 * var(--ct-bg-scale)) calc(887 * var(--ct-bg-scale));
  background-attachment: fixed; background-repeat: no-repeat;
}
.desktop > main:has(> .contracts-scene) { position: relative; height: calc(100vh - 86 * var(--u)); padding: 0; overflow: hidden; max-width: none; }
.contracts-scene { --cu: var(--u); position: absolute; inset: 0; color: #e8f4fa; }
.contracts-scene::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(2, 8, 13, .88) 0, rgba(2, 8, 13, .72) 52%, rgba(2, 8, 13, .12) 72%, transparent 82%); }
.contracts-scene > * { position: absolute; }

.ct-head { left: calc(36 * var(--cu)); top: calc(22 * var(--cu)); width: calc(1110 * var(--cu)); display: flex; align-items: center; gap: calc(22 * var(--cu)); }
.ct-head-ico { width: calc(78 * var(--cu)); height: calc(78 * var(--cu)); color: #3edcff; filter: drop-shadow(0 0 calc(10 * var(--cu)) rgba(62, 220, 255, .7)); }
.ct-head-ico svg { width: 100%; height: 100%; }
.ct-head h1 { margin: 0; font-size: calc(62 * var(--cu)); line-height: 1; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; color: #f4f9fc; text-shadow: 0 calc(3 * var(--cu)) calc(14 * var(--cu)) #000; }
.ct-head p { margin: calc(10 * var(--cu)) 0 0; max-width: calc(640 * var(--cu)); color: #39cdf7; font-size: calc(15 * var(--cu)); line-height: 1.35; text-transform: uppercase; letter-spacing: .03em; }
.ct-ready { --c: calc(12 * var(--cu)); position: relative; isolation: isolate; align-self: flex-start; margin: calc(8 * var(--cu)) 0 0 auto; display: flex; align-items: center; gap: calc(12 * var(--cu)); padding: calc(13 * var(--cu)) calc(26 * var(--cu)); font-size: calc(16 * var(--cu)); color: #e8f4fa;
  background: #2aa9cf; clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.ct-ready::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: linear-gradient(180deg, rgba(9, 32, 44, .96), rgba(3, 13, 20, .96)); clip-path: polygon(calc(var(--c) - 1px) 0, 100% 0, 100% calc(100% - var(--c) + 1px), calc(100% - var(--c) + 1px) 100%, 0 100%, 0 calc(var(--c) - 1px)); }
.ct-ready i { width: calc(24 * var(--cu)); height: calc(24 * var(--cu)); color: #3edcff; }
.ct-ready svg { width: 100%; height: 100%; }
.ct-ready.has-ready { background: #ffa82f; }
.ct-ready.has-ready b { color: #ffcf8a; }
.ct-motto { right: calc(36 * var(--cu)); top: calc(40 * var(--cu)); width: calc(200 * var(--cu)); margin: 0; color: #3edcff; font-size: calc(15 * var(--cu)); line-height: 1.45; text-transform: uppercase; letter-spacing: .06em; text-shadow: 0 1px 6px #000; }

.ct-scroll { left: calc(28 * var(--cu)); top: calc(148 * var(--cu)); bottom: calc(14 * var(--cu)); width: calc(1130 * var(--cu)); overflow-y: auto; overflow-x: hidden; padding: calc(6 * var(--cu)) calc(14 * var(--cu)) calc(20 * var(--cu)) calc(8 * var(--cu)); display: grid; gap: calc(22 * var(--cu)); align-content: start;
  scrollbar-width: thin; scrollbar-color: #2a8fb0 rgba(2, 10, 16, .6); }
.ct-state { margin: 0; color: #a9c7d3; font-size: calc(18 * var(--cu)); }

/* Блок раздела: срез левого верхнего и правого нижнего угла, окантовка — голубая (ежедневные) / оранжевая (недельные). */
.ct-section { --accent: #2fc8f4; --accent-soft: rgba(47, 200, 244, .35); --c: calc(26 * var(--cu)); position: relative; isolation: isolate; padding: calc(16 * var(--cu)) calc(18 * var(--cu)) calc(20 * var(--cu));
  background: var(--accent); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  filter: drop-shadow(0 0 calc(8 * var(--cu)) var(--accent-soft)); }
.ct-section-weekly { --accent: #ff9a2a; --accent-soft: rgba(255, 154, 42, .35); }
.ct-section::before { content: ""; position: absolute; inset: calc(2 * var(--cu)); z-index: -1; clip-path: polygon(calc(var(--c) - 1px) 0, 100% 0, 100% calc(100% - var(--c) + 1px), calc(100% - var(--c) + 1px) 100%, 0 100%, 0 calc(var(--c) - 1px));
  background: linear-gradient(180deg, rgba(8, 24, 34, .95), rgba(2, 9, 14, .95)); }
.ct-section::after { content: ""; position: absolute; left: calc(8 * var(--cu)); right: calc(8 * var(--cu)); top: calc(64 * var(--cu)); height: 1px; background: linear-gradient(90deg, var(--accent), transparent 70%); opacity: .55; }
.ct-section-head { display: flex; align-items: center; gap: calc(16 * var(--cu)); padding: calc(4 * var(--cu)) calc(12 * var(--cu)) calc(18 * var(--cu)); }
.ct-section-head i { width: calc(32 * var(--cu)); height: calc(32 * var(--cu)); color: var(--accent); }
.ct-section-head svg { width: 100%; height: 100%; }
.ct-section-head h2 { margin: 0; font-size: calc(28 * var(--cu)); font-weight: 900; color: #f4f9fc; }
.ct-stripes { width: calc(44 * var(--cu)); height: calc(22 * var(--cu)); background: repeating-linear-gradient(115deg, var(--accent) 0 calc(4 * var(--cu)), transparent calc(4 * var(--cu)) calc(10 * var(--cu))); opacity: .85; }
.ct-section-head time { color: #d8e8ef; font-size: calc(15 * var(--cu)); }
.ct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(18 * var(--cu)); }

/* Карточка: срез левого верхнего и правого нижнего угла, картинка слева (заглушка, пока нет файла). */
.ct-card { --c: calc(16 * var(--cu)); position: relative; isolation: isolate; display: grid; grid-template-columns: calc(150 * var(--cu)) minmax(0, 1fr); min-height: calc(200 * var(--cu));
  background: var(--accent); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.ct-card::before { content: ""; position: absolute; inset: 1px; z-index: -1; clip-path: polygon(calc(var(--c) - 1px) 0, 100% 0, 100% calc(100% - var(--c) + 1px), calc(100% - var(--c) + 1px) 100%, 0 100%, 0 calc(var(--c) - 1px));
  background: linear-gradient(180deg, rgba(10, 30, 42, .98), rgba(3, 12, 19, .98)); }
.ct-art { margin: calc(6 * var(--cu)) 0 calc(6 * var(--cu)) calc(6 * var(--cu)); clip-path: polygon(calc(var(--c) - 6px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--c) - 6px));
  background-image: var(--ct-art), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%232fc8f4' stroke-opacity='.45' stroke-width='2.5'%3E%3Ccircle cx='32' cy='32' r='20'/%3E%3Ccircle cx='32' cy='32' r='9'/%3E%3Cpath d='M32 4v12M32 48v12M4 32h12M48 32h12'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 50% 40%, rgba(47, 200, 244, .16), rgba(2, 9, 14, .95) 70%);
  background-size: cover, calc(56 * var(--cu)) calc(56 * var(--cu)), cover; background-position: center, center, center; background-repeat: no-repeat; border-right: 1px solid rgba(47, 200, 244, .25); }
.ct-body { display: flex; flex-direction: column; gap: calc(10 * var(--cu)); padding: calc(14 * var(--cu)) calc(18 * var(--cu)) calc(14 * var(--cu)) calc(18 * var(--cu)); min-width: 0; }
.ct-body header { display: flex; align-items: center; gap: calc(12 * var(--cu)); }
.ct-ico { flex: none; width: calc(30 * var(--cu)); height: calc(30 * var(--cu)); color: var(--accent); }
.ct-ico svg { width: 100%; height: 100%; }
.ct-body h3 { margin: 0; flex: 1; min-width: 0; font-size: calc(18 * var(--cu)); font-weight: 800; color: #f4f9fc; }
.ct-chev { flex: none; width: calc(30 * var(--cu)); height: calc(14 * var(--cu)); opacity: .55; background: linear-gradient(135deg, transparent 40%, var(--accent) 40% 55%, transparent 55%) 0 0 / calc(10 * var(--cu)) 100% repeat-x; }
.ct-progress span { color: #d8e8ef; font-size: calc(15 * var(--cu)); }
.ct-bar { margin-top: calc(6 * var(--cu)); height: calc(10 * var(--cu)); border: 1px solid rgba(47, 200, 244, .45); background: #02080d; }
.ct-section-weekly .ct-bar { border-color: rgba(255, 154, 42, .5); }
.ct-bar i { display: block; height: 100%; background: linear-gradient(90deg, #1b8fbf, #4fe0ff); box-shadow: 0 0 calc(8 * var(--cu)) rgba(79, 224, 255, .6); }
.ct-section-weekly .ct-bar i { background: linear-gradient(90deg, #c06a12, #ffb347); box-shadow: 0 0 calc(8 * var(--cu)) rgba(255, 179, 71, .6); }
.ct-rewards { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(5 * var(--cu)); }
.ct-rewards li { display: flex; align-items: center; gap: calc(10 * var(--cu)); color: #d8e8ef; font-size: calc(14 * var(--cu)); }
.ct-rewards img { width: calc(20 * var(--cu)); height: calc(20 * var(--cu)); object-fit: contain; }
.ct-error { margin: 0; color: #ff9d8f; font-size: calc(13 * var(--cu)); }
.ct-foot { margin-top: auto; display: flex; justify-content: flex-end; }
.ct-claim { --c: calc(9 * var(--cu)); position: relative; isolation: isolate; min-width: calc(170 * var(--cu)); min-height: calc(38 * var(--cu)); padding: 0 calc(20 * var(--cu)); border: 0; background: var(--accent, #2fc8f4); color: #f4f9fc; font-size: calc(15 * var(--cu)); font-weight: 800; letter-spacing: .04em; cursor: pointer;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.ct-claim::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: linear-gradient(180deg, rgba(20, 78, 102, .96), rgba(5, 26, 37, .96)); clip-path: polygon(calc(var(--c) - 1px) 0, 100% 0, 100% calc(100% - var(--c) + 1px), calc(100% - var(--c) + 1px) 100%, 0 100%, 0 calc(var(--c) - 1px)); }
.ct-section-weekly .ct-claim::before { background: linear-gradient(180deg, rgba(102, 56, 12, .96), rgba(37, 20, 5, .96)); }
.ct-claim:disabled { background: #3c5662; color: #7d95a0; cursor: default; }
.ct-claim:disabled::before { background: linear-gradient(180deg, rgba(22, 36, 44, .96), rgba(10, 18, 24, .96)); }
.ct-claim:not(:disabled):hover::before { filter: brightness(1.25); }
.ct-status-claimable .ct-claim { filter: drop-shadow(0 0 calc(8 * var(--cu)) var(--accent)); }
.ct-done { display: inline-flex; align-items: center; gap: calc(8 * var(--cu)); color: #7fe3a8; font-size: calc(15 * var(--cu)); font-weight: 800; }
.ct-done svg { width: calc(18 * var(--cu)); height: calc(18 * var(--cu)); }
.ct-status-claimed .ct-art, .ct-status-claimed h3 { opacity: .6; }
.desktop main > .contracts-scene, .contracts-scene .ct-section { max-width: none; margin: 0; }
.ct-scroll { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(14 * var(--cu)), #000 calc(100% - 18 * var(--cu)), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 calc(14 * var(--cu)), #000 calc(100% - 18 * var(--cu)), transparent 100%); }

/* === Контракты v2 (владелец 09.10.2026: «рамки худенькие — нужны как у активной колоды»). Разделы и карточки рисует
   tc-cut-frame.js (формы ctsection / ctcard): стальной пояс, переливающаяся кромка, светящиеся уголки, пластины, язычки.
   Недельные — тот же материал в тёплом (оранжевом) цвете. Высота — по содержимому (тело не абсолютное). === */
.ct-section, .ct-card { background: none; clip-path: none; filter: none; padding: 0; }
.ct-section::before, .ct-section::after, .ct-card::before { content: none; display: none; }
.ct-section { position: relative; isolation: isolate; }
.ct-section > .tc-cut-body.ct-section-body { position: relative; inset: auto; padding: calc(10 * var(--cu)) calc(30 * var(--cu)) calc(34 * var(--cu)) calc(30 * var(--cu)); }
.ct-section-head { padding: calc(6 * var(--cu)) calc(4 * var(--cu)) calc(26 * var(--cu)); min-height: calc(40 * var(--cu)); }
.ct-section > .tc-cut-glass { background: linear-gradient(180deg, rgba(8, 22, 31, .86), rgba(3, 10, 16, .9)); }
.ct-card { position: relative; isolation: isolate; display: block; min-height: calc(210 * var(--cu)); }
.ct-card > .tc-cut-glass { background: linear-gradient(180deg, rgba(10, 28, 39, .92), rgba(3, 11, 17, .95)); backdrop-filter: none; }
.ct-card > .tc-cut-body.ct-card-body { position: relative; inset: auto; display: grid; grid-template-columns: 28% minmax(0, 1fr); min-height: calc(210 * var(--cu)); }
.ct-card .ct-body { padding: calc(18 * var(--cu)) calc(26 * var(--cu)) calc(20 * var(--cu)) calc(20 * var(--cu)); }
.ct-card > .tc-cut-art .ct-art { position: absolute; left: 0; top: 0; bottom: 0; width: 28%;
  background-image: var(--ct-art), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%232fc8f4' stroke-opacity='.45' stroke-width='2.5'%3E%3Ccircle cx='32' cy='32' r='20'/%3E%3Ccircle cx='32' cy='32' r='9'/%3E%3Cpath d='M32 4v12M32 48v12M4 32h12M48 32h12'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 50% 42%, rgba(47, 200, 244, .18), rgba(2, 9, 14, .96) 72%);
  background-size: cover, calc(56 * var(--cu)) calc(56 * var(--cu)), cover; background-position: center; background-repeat: no-repeat; }
.ct-card > .tc-cut-art::after { background: linear-gradient(0deg, rgba(3, 10, 18, .45), transparent 40%); }
.ct-section-weekly .tc-cut-rim, .ct-section-weekly .tc-cut-svg { filter: hue-rotate(195deg) saturate(1.35); }
.ct-section-weekly > .tc-cut-glass, .ct-section-weekly .ct-card > .tc-cut-glass { background: linear-gradient(180deg, rgba(30, 20, 10, .88), rgba(10, 7, 4, .92)); }
.ct-section-weekly .ct-card .ct-art { background-image: var(--ct-art), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23ff9a2a' stroke-opacity='.5' stroke-width='2.5'%3E%3Ccircle cx='32' cy='32' r='20'/%3E%3Ccircle cx='32' cy='32' r='9'/%3E%3Cpath d='M32 4v12M32 48v12M4 32h12M48 32h12'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 50% 42%, rgba(255, 154, 42, .16), rgba(10, 6, 2, .96) 72%); }
.ct-scroll { gap: calc(28 * var(--cu)); padding-left: calc(6 * var(--cu)); padding-right: calc(18 * var(--cu)); }
.ct-grid { gap: calc(22 * var(--cu)); }
.ct-claim2 { position: relative; width: calc(180 * var(--cu)); height: calc(42 * var(--cu)); padding: 0; border: 0; background: none; color: #f2fbff; font: inherit; cursor: pointer; }
.ct-claim2 > .tc-cut-body { display: flex; align-items: center; justify-content: center; font-size: calc(15 * var(--cu)); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ct-claim2 > .tc-cut-glass { background: linear-gradient(180deg, rgba(14, 70, 94, .9), rgba(4, 22, 33, .92)); backdrop-filter: none; }
.ct-section-weekly .ct-claim2 > .tc-cut-glass { background: linear-gradient(180deg, rgba(96, 52, 10, .9), rgba(32, 17, 4, .92)); }
.ct-claim2:not(:disabled):hover > .tc-cut-glass { filter: brightness(1.35); }
.ct-claim2:disabled { cursor: default; color: #7d95a0; }
.ct-claim2:disabled > .tc-cut-glass { background: linear-gradient(180deg, rgba(20, 32, 40, .92), rgba(8, 15, 20, .94)); }
.ct-claim2:disabled > .tc-cut-rim, .ct-claim2:disabled > .tc-cut-metal { filter: saturate(.25) brightness(.75); }
.ct-status-claimable .ct-claim2 { filter: drop-shadow(0 0 calc(10 * var(--cu)) rgba(79, 224, 255, .55)); }
.ct-section-weekly .ct-status-claimable .ct-claim2 { filter: drop-shadow(0 0 calc(10 * var(--cu)) rgba(255, 170, 60, .55)); }
/* Контракты: колонка шире — до правого запаса под стража и девиз (владелец 09.10.2026: «справа много свободного»). */
.ct-head { width: auto; right: calc(290 * var(--cu)); }
.ct-scroll { width: auto; right: calc(276 * var(--cu)); }
/* Quick match scene: battle hub material; artwork keeps its proportions. */
.desktop > main:has(> .qm-scene) { position:relative; padding:0; height:calc(100vh - 86 * var(--u)); overflow:hidden; background:linear-gradient(90deg,#02091070,transparent 65%),url('assets/ui/quick-match/arena-bg.png') center/cover no-repeat; }
.qm-scene { --qs:min(calc((100vw - 228 * var(--u)) / 1600),calc((100vh - 86 * var(--u)) / 900)); position:relative; width:100%; height:calc(900 * var(--qs)); max-width:none; margin:0; color:#edfaff; }
.qm-heading { position:absolute; left:calc(62 * var(--qs)); top:calc(52 * var(--qs)); text-shadow:0 3px 20px #000; }
.qm-heading p { margin:0 0 calc(12 * var(--qs)); color:#4cecff; font-size:calc(14 * var(--qs)); font-weight:800; letter-spacing:.2em; }
.qm-heading h1 { margin:0; font-size:calc(78 * var(--qs)); font-weight:900; line-height:.94; letter-spacing:-.03em; }
.qm-heading > span { display:block; margin-top:calc(22 * var(--qs)); font-size:calc(14 * var(--qs)); line-height:1.6; color:#b5e2f6; }
.qm-frame { position:relative; isolation:isolate; filter:drop-shadow(0 12px 18px #0009); }
.qm-frame > .tc-cut-glass { background:linear-gradient(130deg,#07151de8,#031019bd 65%,#092934ce); }
.qm-frame > .tc-cut-body { position:relative; inset:auto; }
.qm-deck { position:absolute; left:calc(18 * var(--qs)); right:calc(520 * var(--qs)); top:calc(324 * var(--qs)); height:calc(340 * var(--qs)); container-type:inline-size; }
.qm-deck > .tc-cut-glass { background:linear-gradient(#03121b59,#03121b59),url('assets/ui/quick-match/deck-panorama.png') center/cover no-repeat; }
.qm-deck header { height:calc(88 * var(--qs)); padding:calc(24 * var(--qs)) calc(38 * var(--qs)) 0; display:flex; gap:calc(22 * var(--qs)); align-items:center; }
.qm-deck header div { flex:1; display:grid; gap:calc(3 * var(--qs)); }
.qm-deck small,.qm-status small { color:#4cecff; font-size:calc(13 * var(--qs)); letter-spacing:.08em; font-weight:800; }
.qm-deck strong { font-size:calc(24 * var(--qs)); }
.qm-deck header > span { font-size:calc(21 * var(--qs)); color:#b9dae7; }
.qm-edit { position:relative; left:0; top:0; padding:calc(8 * var(--qs)) calc(18 * var(--qs)); min-height:0; border:1px solid #39cde8; background:#052331; color:#e2faff; text-transform:uppercase; font-size:calc(12 * var(--qs)); font-weight:800; }
.qm-cards { display:flex; justify-content:center; gap:calc(7 * var(--qs)); padding:calc(22 * var(--qs)) calc(26 * var(--qs)); }
.qm-cards img { display:block; width:calc(105 * var(--qs)); height:calc(158 * var(--qs)); object-fit:contain; filter:drop-shadow(0 4px 6px #000); }
.qm-status { position:absolute; right:calc(70 * var(--qs)); top:calc(138 * var(--qs)); width:calc(430 * var(--qs)); height:calc(520 * var(--qs)); transform:perspective(calc(1100 * var(--qs))) rotateY(-14deg) rotateZ(-1.5deg); transform-origin:center; }
.qm-status > .tc-cut-glass { background:linear-gradient(180deg,#03121ba6 0%,#03121bbf 45%,#020b13f2 74%,#020b13f5 100%),url('assets/ui/quick-match/status-background.png') center/cover no-repeat; }
.qm-status .tc-cut-body { padding:calc(48 * var(--qs)) calc(30 * var(--qs)) calc(26 * var(--qs)); text-align:center; }
.qm-dial { display:grid; place-items:center; width:calc(202 * var(--qs)); height:calc(202 * var(--qs)); margin:calc(22 * var(--qs)) auto; border:calc(5 * var(--qs)) solid #23d8eb; border-radius:50%; background:radial-gradient(circle,#0d526577,transparent 65%); box-shadow:0 0 calc(25 * var(--qs)) #00ddff55,inset 0 0 calc(24 * var(--qs)) #00ddff55; outline:calc(2 * var(--qs)) dashed #37c9df; outline-offset:calc(-18 * var(--qs)); }
.qm-dial span { font-size:calc(105 * var(--qs)); line-height:1; color:#5ff6ff; text-shadow:0 0 calc(22 * var(--qs)) #00dfff; }
.qm-dial span:has(> .qm-search-icon) { display:grid; place-items:center; width:100%; height:100%; }
.qm-search-icon { display:block; width:calc(105 * var(--qs)); height:calc(105 * var(--qs)); overflow:visible; filter:drop-shadow(0 0 calc(10 * var(--qs)) #00dfff); }
.qm-status h2 { margin:0 0 calc(18 * var(--qs)); font-size:calc(30 * var(--qs)); line-height:1.1; text-transform:uppercase; color:#f4fbff; text-shadow:0 2px 4px #000; }
.qm-status p { margin:0; font-size:calc(16 * var(--qs)); line-height:1.5; font-weight:600; color:#edf7ff; text-shadow:0 1px 3px #000; overflow-wrap:anywhere; }
.qm-wait { display:block; margin-top:calc(14 * var(--qs)); color:#adf7ff; font-size:calc(26 * var(--qs)); font-weight:800; text-shadow:0 2px 4px #000; }
.qm-info { position:absolute; left:calc(18 * var(--qs)); right:calc(70 * var(--qs)); top:calc(678 * var(--qs)); display:grid; grid-template-columns:repeat(3,1fr); gap:calc(20 * var(--qs)); }
.qm-info-card { height:calc(130 * var(--qs)); }
.qm-info-card .tc-cut-body { display:flex; gap:calc(16 * var(--qs)); padding:calc(33 * var(--qs)) calc(28 * var(--qs)) calc(18 * var(--qs)); }
.qm-info-card img { width:calc(38 * var(--qs)); height:calc(38 * var(--qs)); object-fit:contain; align-self:center; }
.qm-info-card h3 { margin:0 0 calc(10 * var(--qs)); color:#4cecff; font-size:calc(15 * var(--qs)); text-transform:uppercase; }
.qm-info-card p { margin:0; color:#b9d2e0; font-size:calc(13 * var(--qs)); line-height:1.35; }
.qm-actions { position:absolute; left:calc(18 * var(--qs)); right:calc(70 * var(--qs)); top:calc(827 * var(--qs)); display:flex; justify-content:center; gap:calc(16 * var(--qs)); }
.qm-button { position:relative; isolation:isolate; width:calc(250 * var(--qs)); height:calc(56 * var(--qs)); min-height:0; padding:0; border:0; border-radius:0; background:transparent; color:#e9fbff; font-size:calc(12 * var(--qs)); font-weight:800; text-transform:uppercase; }
.qm-button .tc-cut-body { display:flex; justify-content:center; align-items:center; padding:calc(10 * var(--qs)) calc(22 * var(--qs)); }
.qm-button .tc-cut-glass { background:linear-gradient(180deg,#0b4154ed,#041722ef); }
.qm-button:hover .tc-cut-glass { background:#0a5269; }
.qm-button:hover .tc-cut-rim { filter:brightness(1.4); }
.qm-button:focus-visible,.qm-edit:focus-visible { outline:2px solid #b6fbff; outline-offset:4px; }
.qm-primary { width:calc(460 * var(--qs)); font-size:calc(23 * var(--qs)); filter:drop-shadow(0 0 calc(12 * var(--qs)) #00d9ff66); }
.qm-back { position:absolute; right:calc(70 * var(--qs)); top:calc(827 * var(--qs)); }
.qm-searching .qm-dial,.qm-starting .qm-dial { animation:qm-pulse 2s ease-in-out infinite; }
@keyframes qm-pulse { 50% { box-shadow:0 0 calc(38 * var(--qs)) #00ddff99,inset 0 0 calc(30 * var(--qs)) #00ddff66; } }
.reduced-motion .qm-dial { animation:none; }
@media(prefers-reduced-motion:reduce) { .qm-dial { animation:none; } }
.qm-cards { padding-top:calc(16 * var(--qs)); }
.qm-card { display:block; flex:0 0 calc(105 * var(--qs)); width:calc(105 * var(--qs)); height:calc(176 * var(--qs)); }
.qm-card-content { display:flex; flex-direction:column; width:100%; height:100%; background:#030e17; }
.qm-card-content > img { width:100%; height:67%; object-fit:cover; filter:none; }
.qm-card-content > strong { display:flex; align-items:center; justify-content:center; flex:1; padding:0 calc(5 * var(--qs)); text-align:center; color:#e4f8ff; font-size:calc(10 * var(--qs)); line-height:1.1; }
.qm-card-content > span { display:flex; justify-content:space-between; align-items:center; padding:calc(4 * var(--qs)); background:#102332; }
.qm-card-content b { font-size:calc(12 * var(--qs)); }
.qm-card-content small { font-size:calc(6 * var(--qs)); color:#9fbfcf; }
.qm-card { position:relative; inset:auto; z-index:auto; flex:0 0 calc((100% - 49 * var(--qs)) / 8); min-width:0; width:calc((100% - 49 * var(--qs)) / 8); height:calc((100cqw - 101 * var(--qs)) / 8 * 1.45); }

/* Ranked arena desktop; owner-supplied artwork, code-built frames. */
.desktop > main:has(> .ar-scene) { position:relative; height:calc(100vh - 86 * var(--u)); padding:0; overflow:hidden; background:linear-gradient(180deg,#02081333,#02081315 40%,#020813cc 80%),url('assets/ui/arena/arena-bg.png') center/cover no-repeat; }
.ar-scene { --au:min(calc((100vw - 228 * var(--u)) / 1600),calc((100vh - 86 * var(--u)) / 900)); max-width:none; width:100%; height:100%; margin:0; padding:calc(18 * var(--au)) calc(20 * var(--au)); display:flex; flex-direction:column; gap:calc(16 * var(--au)); }
.ar-hero { position:relative; height:calc(350 * var(--au)); flex-shrink:0; }
.ar-heading { padding:calc(12 * var(--au)) calc(18 * var(--au)); width:70%; text-shadow:0 2px 12px #000; }
.ar-heading > small,.ar-season small,.ar-my-place small { color:#4fe9ff; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:calc(13 * var(--au)); }
.ar-heading h1 { margin:calc(12 * var(--au)) 0; font-size:calc(48 * var(--au)); line-height:1.05; text-transform:uppercase; }
.ar-heading p { max-width:calc(660 * var(--au)); font-size:calc(16 * var(--au)); line-height:1.5; color:#d0e7f5; }
.ar-heading > strong { color:#57ebff; font-size:calc(14 * var(--au)); }
.ar-frame { position:relative; isolation:isolate; min-width:0; filter:drop-shadow(0 8px 12px #0009); }
.ar-frame > .tc-cut-glass { background:linear-gradient(130deg,#03121de8,#04131be0); }
.ar-frame > .tc-cut-body { padding:calc(26 * var(--au)); display:flex; flex-direction:column; gap:calc(10 * var(--au)); }
.ar-frame h2 { margin:0; font-size:calc(18 * var(--au)); line-height:1.2; text-transform:uppercase; color:#98f1ff; }
.ar-frame p { margin:0; font-size:calc(14 * var(--au)); line-height:1.45; color:#bed5e4; }
.ar-frame small { font-size:calc(12 * var(--au)); color:#a2c5d9; }
.ar-season { position:absolute; right:0; top:calc(12 * var(--au)); width:calc(330 * var(--au)); height:calc(260 * var(--au)); }
.ar-season h2 { overflow-wrap:anywhere; font-size:calc(22 * var(--au)); }
.ar-season .ar-button { margin-top:auto; width:100%; }
.ar-band { display:grid; grid-template-columns:1fr .95fr 1.3fr; gap:calc(18 * var(--au)); height:calc(126 * var(--au)); flex-shrink:0; }
.ar-my-place .tc-cut-body { flex-direction:row; align-items:center; padding:calc(18 * var(--au)) calc(28 * var(--au)); }
.ar-my-place .tc-cut-body > div { display:flex; flex-direction:column; gap:calc(4 * var(--au)); }
.ar-my-place .tc-cut-body > div > strong { font-size:calc(34 * var(--au)); line-height:1; }
.ar-my-place p { font-size:calc(12 * var(--au)); }
.ar-place-badge { flex-shrink:0; display:inline-grid; place-items:center; width:calc(32 * var(--au)); height:calc(36 * var(--au)); background:linear-gradient(140deg,#e1faff,#3f687c 35%,#051c29 55%,#8ceaff); color:white; clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); font-size:calc(17 * var(--au)); font-weight:900; text-shadow:0 2px 4px #000; }
.ar-place-badge.large { width:calc(72 * var(--au)); height:calc(82 * var(--au)); font-size:calc(38 * var(--au)); }
.ar-place-1 { background:linear-gradient(140deg,#fff1a0,#a47b22 35%,#33210a 55%,#ffc548); }
.ar-place-2 { background:linear-gradient(140deg,#fff,#7d929f 35%,#192533 55%,#d4eeff); }
.ar-place-3 { background:linear-gradient(140deg,#ffd1aa,#a05a32 35%,#301b12 55%,#d88f55); }
.ar-main-actions { display:flex; flex-direction:column; justify-content:center; align-items:stretch; gap:calc(5 * var(--au)); }
.ar-main-actions > strong { color:#64e9ff; text-align:center; font-size:calc(20 * var(--au)); }
.ar-button { position:relative; isolation:isolate; border:0; border-radius:0; padding:0; background:transparent; color:#eafaff; width:calc(220 * var(--au)); height:calc(42 * var(--au)); min-height:0; font-size:calc(12 * var(--au)); font-weight:800; text-transform:uppercase; }
.ar-button .tc-cut-body { display:grid; place-items:center; padding:calc(10 * var(--au)); }
.ar-button .tc-cut-glass { background:linear-gradient(180deg,#135366,#031a29); }
.ar-primary { width:100%; height:calc(64 * var(--au)); font-size:calc(21 * var(--au)); filter:drop-shadow(0 0 12px #00dfff55); }
.ar-button:hover .tc-cut-rim { filter:brightness(1.4); }
.ar-button:focus-visible { outline:2px solid #a9f6ff; outline-offset:3px; }
.ar-stats .tc-cut-body { padding:calc(20 * var(--au)) calc(28 * var(--au)); }
.ar-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:calc(12 * var(--au)); }
.ar-metrics > div { display:flex; flex-direction:column; gap:calc(4 * var(--au)); padding-left:calc(12 * var(--au)); border-left:1px solid #1c566b; }
.ar-metrics strong { font-size:calc(28 * var(--au)); }
.ar-notes { flex-shrink:0; color:#ffcf84; font-size:calc(12 * var(--au)); display:flex; flex-wrap:wrap; gap:calc(12 * var(--au)); }
.ar-notes p { margin:0; }
.ar-lower { flex:1; min-height:calc(170 * var(--au)); display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:calc(18 * var(--au)); }
.ar-lower .tc-cut-body { height:100%; padding:calc(24 * var(--au)); }
.ar-ranking header { display:flex; justify-content:space-between; align-items:center; gap:calc(10 * var(--au)); }
.ar-scroll { min-height:0; overflow:auto; scrollbar-color:#29b8d5 #04111b; flex:1; padding-right:calc(4 * var(--au)); }
.ar-table,.ar-reward-table { width:100%; border-collapse:collapse; font-size:calc(13 * var(--au)); }
.ar-table td,.ar-table th,.ar-reward-table td,.ar-reward-table th { padding:calc(7 * var(--au)) calc(5 * var(--au)); text-align:left; border-bottom:1px solid #21536688; }
.ar-table th,.ar-reward-table th { color:#8dbdce; font-weight:500; font-size:calc(11 * var(--au)); }
.ar-table td:nth-child(3) { color:#4febff; font-weight:800; }
.ar-table tr.self { background:#097aa244; box-shadow:inset 0 0 12px #11dfff55; }
.ar-table td small { display:block; color:#70ffbe; }
.ar-reward-table { font-size:calc(12 * var(--au)); }
.ar-reward-table .ar-place-badge { display:flex; margin-bottom:calc(4 * var(--au)); }
.ar-tournament h2 { margin-bottom:calc(14 * var(--au)); }
.ar-phase { display:block; color:#57edff; margin-bottom:calc(10 * var(--au)); font-size:calc(17 * var(--au)); }
.ar-rounds h3 { font-size:calc(14 * var(--au)); color:#69e6ff; }
.ar-pair { display:grid; gap:calc(4 * var(--au)); padding:calc(8 * var(--au)); border:1px solid #24586e; margin-bottom:calc(8 * var(--au)); font-size:calc(12 * var(--au)); }
.ar-pair .won { color:#60ffa9; }
.ar-footer { display:flex; justify-content:flex-end; gap:calc(12 * var(--au)); flex-shrink:0; }
/* Arena composition refinement: preserve the open stage around the two fighters. */
.ar-hero { height:calc(510 * var(--au)); }
.ar-heading { width:72%; }
.ar-heading h1 { font-size:calc(42 * var(--au)); }
.ar-heading p { font-size:calc(14 * var(--au)); }
.ar-heading .ar-stand { display:block; margin-top:calc(5 * var(--au)); font-size:calc(11 * var(--au)); color:#8eafc5; }
.ar-season { width:calc(290 * var(--au)); height:calc(180 * var(--au)); top:0; }
.ar-season > .tc-cut-body { padding:calc(18 * var(--au)) calc(22 * var(--au)); gap:calc(6 * var(--au)); }
.ar-season h2 { font-size:calc(17 * var(--au)); }
.ar-season p { font-size:calc(12 * var(--au)); }
.ar-season .ar-button { height:calc(32 * var(--au)); font-size:calc(10 * var(--au)); }
.ar-band { height:calc(90 * var(--au)); }
.ar-my-place .tc-cut-body { padding:calc(12 * var(--au)) calc(26 * var(--au)); }
.ar-place-badge.large { width:calc(48 * var(--au)); height:calc(56 * var(--au)); font-size:calc(28 * var(--au)); }
.ar-my-place .tc-cut-body > div > strong { font-size:calc(26 * var(--au)); }
.ar-stats .tc-cut-body { padding:calc(12 * var(--au)) calc(26 * var(--au)); gap:calc(6 * var(--au)); }
.ar-stats h2 { font-size:calc(15 * var(--au)); }
.ar-metrics strong { font-size:calc(23 * var(--au)); }
.ar-primary { height:calc(54 * var(--au)); font-size:calc(19 * var(--au)); }
.ar-lower { grid-template-columns:1.2fr 1fr; min-height:calc(130 * var(--au)); }
.ar-lower:has(.ar-tournament) { grid-template-columns:1.15fr 1fr 1fr; }
.ar-lower .tc-cut-body { padding:calc(16 * var(--au)) calc(24 * var(--au)); gap:calc(7 * var(--au)); }
.ar-lower h2 { font-size:calc(16 * var(--au)); }
.ar-table td,.ar-table th,.ar-reward-table td,.ar-reward-table th { padding:calc(3 * var(--au)) calc(6 * var(--au)); }
.ar-table .ar-place-badge,.ar-reward-table .ar-place-badge { width:calc(23 * var(--au)); height:calc(26 * var(--au)); font-size:calc(14 * var(--au)); }
.ar-reward-table .ar-place-badge { display:inline-grid; margin:0 calc(7 * var(--au)) 0 0; vertical-align:middle; }
.ar-metrics strong { line-height:1; }
.ar-metrics small { line-height:1.1; font-size:calc(10 * var(--au)); }
/* New stage reserves the lower floor for eight ranking rows and reward artwork. */
.ar-scene { gap:calc(10 * var(--au)); }
.desktop > main:has(> .ar-scene) { --au:min(calc((100vw - 228 * var(--u)) / 1600),calc((100vh - 86 * var(--u)) / 900)); background-color:#020813; background-position:center calc(-75 * var(--au)); }
.ar-hero { height:calc(410 * var(--au)); }
.ar-band { height:calc(80 * var(--au)); }
.ar-footer .ar-button { height:calc(34 * var(--au)); }
.ar-lower { min-height:calc(300 * var(--au)); }
.ar-lower .tc-cut-body { padding:calc(14 * var(--au)) calc(24 * var(--au)); gap:calc(6 * var(--au)); }
.ar-place-badge.ar-place-art { background-color:transparent; background-position:center; background-size:contain; background-repeat:no-repeat; clip-path:none; }
.ar-place-art.ar-place-1 { background-image:url('assets/ui/arena/arena-place-1.png'); }
.ar-place-art.ar-place-2 { background-image:url('assets/ui/arena/arena-place-2.png'); }
.ar-place-art.ar-place-3 { background-image:url('assets/ui/arena/arena-place-3.png'); }
.ar-place-art.ar-place-4 { background-image:url('assets/ui/arena/arena-place-4.png'); }
.ar-place-art.ar-place-5 { background-image:url('assets/ui/arena/arena-place-5.png'); }
.ar-place-badge.large { width:calc(64 * var(--au)); height:calc(64 * var(--au)); }
.ar-table .ar-place-badge,.ar-reward-table .ar-place-badge { width:calc(28 * var(--au)); height:calc(28 * var(--au)); }
.ar-table .ar-place-badge { display:grid; }
.ar-table td { padding:calc(1 * var(--au)) calc(6 * var(--au)); height:calc(30 * var(--au)); }
.ar-my-place .tc-cut-body,.ar-stats .tc-cut-body { padding-top:calc(8 * var(--au)); padding-bottom:calc(8 * var(--au)); gap:calc(4 * var(--au)); }
.ar-my-place p { font-size:calc(10 * var(--au)); }
.ar-table td small { display:inline; margin-left:calc(6 * var(--au)); }
.ar-reward-cell { display:flex; align-items:center; gap:calc(6 * var(--au)); }
.ar-reward-table .ar-place-badge { margin:0; }
.ar-container { display:block; flex-shrink:0; width:calc(40 * var(--au)); height:calc(40 * var(--au)); background:center/contain no-repeat; }
.ar-container-gold { background-image:url('assets/ui/arena/arena-container-gold.png'); }
.ar-container-violet { background-image:url('assets/ui/arena/arena-container-violet.png'); }
.ar-container-blue { background-image:url('assets/ui/arena/arena-container-blue.png'); }
.ar-rewards .ar-scroll > p { margin-top:calc(7 * var(--au)); }
@media (min-width:1100px) and (max-height:1000px) and (min-aspect-ratio:19/10) {
  .ar-hero { height:calc(392 * var(--au)); }
}
/* Arena readability pass: padded contents and larger ranking, clear panel interiors. */
.ar-hero { height:calc(100% - 568 * var(--au)); min-height:calc(260 * var(--au)); }
.desktop > main:has(> .ar-scene) { background-position:center calc(-165 * var(--au)); }
.ar-heading { width:72%; }
.ar-heading p,.ar-heading > strong,.ar-heading .ar-stand { display:table; max-width:100%; background:none; padding:0; border-radius:0; text-shadow:0 1px 2px #000,0 2px 5px #000; }
.ar-heading p { color:#fff; font-weight:600; line-height:1.55; }
.ar-heading > strong { color:#69f4ff; }
.ar-heading .ar-stand { color:#e8faff; font-weight:800; }
.ar-band { height:calc(104 * var(--au)); }
.ar-my-place .tc-cut-body,.ar-stats .tc-cut-body { padding:calc(18 * var(--au)) calc(28 * var(--au)); gap:calc(8 * var(--au)); }
.ar-stats h2 { line-height:1.15; }
.ar-metrics { align-items:start; }
.ar-metrics > div { gap:calc(6 * var(--au)); }
.ar-my-place p { font-size:calc(11 * var(--au)); }
.ar-my-place .tc-cut-body > div > .ar-unplaced { font-size:calc(20 * var(--au)); line-height:1.2; }
.ar-participant { flex-shrink:0; width:calc(62 * var(--au)); height:calc(62 * var(--au)); background:url('assets/ui/arena/arena-participant.png') center/contain no-repeat; }
.ar-place-badge.large { width:calc(60 * var(--au)); height:calc(60 * var(--au)); }
.ar-season { height:calc(204 * var(--au)); }
.ar-season .ar-button { height:calc(48 * var(--au)); font-size:calc(11 * var(--au)); }
.ar-footer .ar-button { height:calc(52 * var(--au)); width:calc(240 * var(--au)); }
.ar-primary { height:calc(74 * var(--au)); }
.ar-button .tc-cut-body { padding:calc(14 * var(--au)) calc(24 * var(--au)); line-height:1.2; }
.ar-lower { min-height:calc(340 * var(--au)); }
.ar-ranking h2 { font-size:calc(18 * var(--au)); }
.ar-table { font-size:calc(15 * var(--au)); }
.ar-table th { font-size:calc(12 * var(--au)); }
.ar-table .ar-place-badge { width:calc(34 * var(--au)); height:calc(34 * var(--au)); }
.ar-table td { height:calc(36 * var(--au)); }
.ar-scene .tc-cut-svg { overflow:hidden; }
/* Let available height determine visible ranking rows, without squeezing them to a target count. */
.ar-hero { height:calc(340 * var(--au)); min-height:0; }
.ar-lower { min-height:0; }
.ar-ranking header { padding-right:calc(20 * var(--au)); min-height:calc(32 * var(--au)); align-items:center; }
.ar-ranking header > small { padding-top:calc(5 * var(--au)); white-space:nowrap; }
.ar-ranking { --ar-row-unit:clamp(.8px,calc((100vw - 228 * var(--u)) / 1600),1.2px); }
.ar-table { font-size:calc(15 * var(--ar-row-unit)); }
.ar-table th { font-size:calc(12 * var(--ar-row-unit)); }
.ar-table .ar-place-badge { width:calc(34 * var(--ar-row-unit)); height:calc(34 * var(--ar-row-unit)); }
.ar-table td { height:calc(36 * var(--ar-row-unit)); padding:calc(1 * var(--ar-row-unit)) calc(6 * var(--au)); }
.ar-place-other { background:none; clip-path:none; color:#d8f7ff; font-weight:800; font-variant-numeric:tabular-nums; text-shadow:0 0 6px #27c9ff66; }
.ar-table .ar-place-other { font-size:calc(23 * var(--ar-row-unit)); }
.ar-rules { flex-shrink:0; display:flex; flex-direction:column; gap:calc(5 * var(--au)); margin-top:calc(6 * var(--au)); padding-top:calc(6 * var(--au)); border-top:1px solid #21536688; overflow-wrap:anywhere; }
.ar-rules > strong { color:#69f4ff; font-size:calc(13 * var(--au)); }
.ar-rules > p { color:#ecf7ff; font-size:calc(12 * var(--au)); line-height:1.45; }
.ar-rules .ar-stand { color:#a9cedd; font-size:calc(10 * var(--au)); line-height:1.35; padding-left:calc(12 * var(--au)); }
.ar-rewards .ar-container { width:calc(34 * var(--au)); height:calc(34 * var(--au)); }
/* Complete arena composition: ranking, recent battles and rewards. */
.ar-hero { height:calc(300 * var(--au)); }
.ar-lower { grid-template-columns:1.15fr .8fr 1.4fr; gap:calc(14 * var(--au)); }
.ar-lower:has(.ar-tournament) { grid-template-columns:1.15fr .8fr 1.4fr; grid-template-rows:1fr; }
.ar-lower > .ar-frame > .tc-cut-body { padding:calc(20 * var(--au)) calc(24 * var(--au)); }
.ar-ranking header { padding-right:calc(10 * var(--au)); align-items:start; gap:calc(8 * var(--au)); }
.ar-ranking header > small { padding-top:calc(4 * var(--au)); }
.ar-ranking h2 { font-size:calc(17 * var(--au)); }
.ar-ranking .ar-table th:nth-child(4) { max-width:calc(110 * var(--au)); }
.ar-full-table { width:100%; height:calc(52 * var(--au)); flex-shrink:0; margin-top:calc(8 * var(--au)); font-size:calc(11 * var(--au)); }
.ar-history h2 { font-size:calc(17 * var(--au)); }
.ar-history-empty { flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(14 * var(--au)); text-align:center; padding:calc(8 * var(--au)); }
.ar-history-empty .ar-participant { width:calc(82 * var(--au)); height:calc(82 * var(--au)); opacity:.8; }
.ar-history-empty strong { color:#def6ff; font-size:calc(16 * var(--au)); line-height:1.3; }
.ar-history-empty p { font-size:calc(12 * var(--au)); line-height:1.5; color:#9ebccc; }
.ar-result-legend { display:flex; justify-content:space-around; gap:calc(4 * var(--au)); padding-top:calc(12 * var(--au)); border-top:1px solid #21536688; flex-shrink:0; }
.ar-result-legend > div { display:flex; flex-direction:column; align-items:center; gap:calc(7 * var(--au)); }
.ar-result-legend small { font-size:calc(11 * var(--au)); }
.ar-result-icon { display:block; flex-shrink:0; width:calc(34 * var(--au)); height:calc(34 * var(--au)); filter:drop-shadow(0 0 4px #00cfff44); }
.ar-result-icon svg { width:100%; height:100%; }
.ar-result-win { color:#5be7ff; }
.ar-result-loss { color:#ff7886; }
.ar-result-draw { color:#efc580; }
.ar-recent-row { display:flex; align-items:center; gap:calc(10 * var(--au)); border-bottom:1px solid #21536688; padding:calc(10 * var(--au)) 0; }
.ar-recent-row > div { flex:1; min-width:0; display:flex; flex-direction:column; gap:calc(5 * var(--au)); overflow-wrap:anywhere; }
.ar-recent-row strong,.ar-recent-row b { font-size:calc(14 * var(--au)); color:#e8faff; }
.ar-reward-cell { gap:calc(4 * var(--au)); }
.ar-reward-table { font-size:calc(11 * var(--au)); }
.ar-reward-table td,.ar-reward-table th { padding:calc(3 * var(--au)) calc(3 * var(--au)); }
.ar-rules > p { font-size:calc(11 * var(--au)); }
.ar-table-dialog { width:min(1100px,90vw); height:min(740px,86vh); max-width:none; max-height:none; padding:0; border:0; background:transparent; overflow:visible; color:#e8faff; --au:clamp(.8px,1vw,1px); }
.ar-table-dialog::backdrop { background:#010711dd; backdrop-filter:blur(4px); }
.ar-dialog-frame { width:100%; height:100%; --ar-row-unit:1px; }
.ar-dialog-frame > .tc-cut-body { padding:28px 34px; gap:18px; }
.ar-dialog-frame header { align-items:center; min-height:64px; padding:0; }
.ar-dialog-frame header > div { display:flex; flex-direction:column; gap:10px; }
.ar-dialog-frame header .ar-button { height:48px; }
.ar-dialog-frame h2 { font-size:22px; }
.ar-dialog-frame .ar-table th { position:sticky; top:0; background:#04131b; z-index:1; }
.ar-bracket-open { position:absolute; right:calc(550 * var(--au)); bottom:calc(18 * var(--au)); height:calc(52 * var(--au)); }
.ar-bracket-frame .ar-rounds { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.ar-bracket-frame header { display:flex; justify-content:flex-end; }
.ar-history > .tc-cut-body > h2 { width:100%; text-align:center; }
.ar-result-icon { background-position:center; background-size:contain; background-repeat:no-repeat; filter:none; }
.ar-result-win { background-image:url('assets/ui/arena/arena-result-win.png'); }
.ar-result-loss { background-image:url('assets/ui/arena/arena-result-loss.png'); }
.ar-result-draw { background-image:url('assets/ui/arena/arena-result-draw.png'); }
.ar-result-legend .ar-result-icon { width:calc(44 * var(--au)); height:calc(44 * var(--au)); }

/* Ranked queue: one proportional canvas keeps live text aligned with the painted display. */
.desktop > main:has(> .rq-scene) { position:relative; padding:0; height:calc(100vh - 86 * var(--u)); overflow:hidden; background:#020910; }
.rq-scene { --rs:max(calc((100vw - 228 * var(--u)) / 1672),calc((100vh - 86 * var(--u)) / 941)); position:relative; width:100%; height:100%; max-width:none; margin:0; color:#edfbff; }
.rq-canvas { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:calc(1672 * var(--rs)); height:calc(941 * var(--rs)); background:url('assets/ui/ranked-match/arena-display-bg.png') center/100% 100% no-repeat; }
.rq-heading { position:absolute; left:calc(62 * var(--rs)); top:calc(96 * var(--rs)); text-shadow:0 2px 8px #000,0 0 20px #00121e; }
.rq-heading p { color:#45eeff; font-weight:800; font-size:calc(15 * var(--rs)); letter-spacing:.2em; margin:0 0 calc(12 * var(--rs)); }
.rq-heading h1 { margin:0; font-size:calc(66 * var(--rs)); font-weight:900; line-height:1.1; text-transform:uppercase; }
.rq-deck { position:absolute; isolation:isolate; left:calc(510 * var(--rs)); top:calc(251 * var(--rs)); width:calc(715 * var(--rs)); height:calc(85 * var(--rs)); filter:drop-shadow(0 8px 14px #0008); }
.rq-deck > .tc-cut-glass { background:linear-gradient(130deg,#07151de8,#031019d9); }
.rq-deck > .tc-cut-body { display:flex; align-items:center; justify-content:space-between; padding:calc(15 * var(--rs)) calc(30 * var(--rs)); }
.rq-deck .tc-cut-body > div { display:grid; gap:calc(5 * var(--rs)); min-width:0; }
.rq-deck small { color:#4cecff; font-size:calc(13 * var(--rs)); font-weight:800; letter-spacing:.1em; }
.rq-deck strong { font-size:calc(23 * var(--rs)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rq-deck .tc-cut-body > span { color:#cbe8f3; font-size:calc(22 * var(--rs)); margin-left:calc(24 * var(--rs)); }
.rq-status { position:absolute; left:calc(750 * var(--rs)); top:calc(445 * var(--rs)); width:calc(550 * var(--rs)); height:calc(227 * var(--rs)); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; text-shadow:0 2px 5px #000,0 0 12px #00141d; }
.rq-status small { color:#39efff; font-size:calc(14 * var(--rs)); font-weight:800; letter-spacing:.2em; }
.rq-status h2 { margin:calc(23 * var(--rs)) 0 calc(15 * var(--rs)); font-size:calc(42 * var(--rs)); line-height:1.12; font-weight:900; text-transform:uppercase; }
.rq-status p { margin:0; color:#e4f8ff; font-size:calc(15 * var(--rs)); line-height:1.5; overflow-wrap:anywhere; }
.rq-wait { margin-top:calc(20 * var(--rs)); font-size:calc(28 * var(--rs)); color:#fff; }
.rq-actions { position:absolute; left:calc(514 * var(--rs)); top:calc(738 * var(--rs)); width:calc(986 * var(--rs)); display:flex; gap:calc(12 * var(--rs)); justify-content:center; }
.rq-button { position:relative; isolation:isolate; flex:1; max-width:calc(320 * var(--rs)); height:calc(70 * var(--rs)); min-height:0; padding:0; border:0; border-radius:0; background:transparent; color:#edfbff; font-size:calc(13 * var(--rs)); font-weight:800; text-transform:uppercase; }
.rq-button > .tc-cut-body { display:flex; align-items:center; justify-content:center; padding:calc(15 * var(--rs)) calc(25 * var(--rs)); line-height:1.3; }
.rq-button > .tc-cut-glass { background:linear-gradient(180deg,#082f3eed,#03111aef); }
.rq-button > .tc-cut-svg,.rq-button > .tc-cut-metal,.rq-button > .tc-cut-rim { filter:brightness(.85); }
.rq-button:hover > .tc-cut-glass { background:#083c4e; }
.rq-button:hover > .tc-cut-rim { filter:brightness(1.1); }
.rq-button:focus-visible { outline:2px solid #b6fbff; outline-offset:4px; }

/* === ПОСТАНОВКА БОЯ (09.10.2026, решение владельца). Смена локации → карты издалека → заряд/атака над картами →
   выстрел проигравшего гаснет на щите («НЕ ПРОБИЛ») → выстрел победителя: попадание, искры, кровь, урон.
   Механика не меняется. Ролик — app/client/battle-scene.js; без JS / «меньше движения» видно итоговое состояние. === */
.battle-scene { --bsu: min(1px, calc(100vw / 1600), calc(100vh / 900)); position: fixed; inset: 0; z-index: 60; overflow: hidden; color: #eaf6fb; background: #02070b; font-family: inherit; isolation: isolate; }
.battle-scene .bs-bg, .battle-scene .bs-vignette, .battle-scene .bs-glitch, .battle-scene .bs-fx { position: absolute; inset: 0; pointer-events: none; }
.battle-scene .bs-bg-media { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; display: block; }
.battle-scene .bs-vignette { background: radial-gradient(ellipse at 50% 55%, transparent 35%, rgba(2, 6, 10, .55) 75%, rgba(2, 6, 10, .9) 100%), linear-gradient(0deg, rgba(2, 6, 10, .75), transparent 30%); }
.battle-scene .bs-fx { z-index: 6; width: 100%; height: 100%; }
.battle-scene .bs-glitch { z-index: 20; opacity: 0; background: repeating-linear-gradient(0deg, rgba(79, 224, 255, .18) 0 2px, transparent 2px 6px), linear-gradient(90deg, rgba(255, 0, 80, .25), rgba(0, 220, 255, .25)); mix-blend-mode: screen; }

.bs-round { position: absolute; z-index: 8; left: 50%; top: calc(26 * var(--bsu)); transform: translateX(-50%); display: flex; align-items: baseline; gap: calc(12 * var(--bsu)); padding: calc(8 * var(--bsu)) calc(26 * var(--bsu)); background: linear-gradient(180deg, rgba(5, 22, 32, .88), rgba(2, 10, 16, .88)); border: 1px solid rgba(79, 224, 255, .55); clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); letter-spacing: .14em; }
.bs-round small { color: #4fe0ff; font-weight: 800; font-size: calc(14 * var(--bsu)); }
.bs-round b { font-size: calc(30 * var(--bsu)); font-weight: 900; }
.bs-round span { color: #c9dde6; font-size: calc(18 * var(--bsu)); font-weight: 800; }

/* Бойцы: игрок — ближе (слева внизу), соперник — дальше (справа выше, меньше). */
.bs-unit { --cw: calc(250 * var(--bsu)); position: absolute; z-index: 5; width: var(--cw); display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--bsu)); }
.bs-player { left: 13%; bottom: 11%; }
.bs-opponent { right: 15%; top: 15%; --cw: calc(205 * var(--bsu)); }
.bs-card { position: relative; width: var(--cw); aspect-ratio: 5 / 7; --c: calc(18 * var(--bsu)); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  background: linear-gradient(160deg, #c9dde6, #3c5563 30%, #0e1a21 60%, var(--accent)); padding: 3px; box-sizing: border-box; filter: drop-shadow(0 0 calc(18 * var(--bsu)) color-mix(in srgb, var(--accent) 60%, transparent)); }
.bs-card img { width: 100%; height: 100%; object-fit: cover; display: block; clip-path: polygon(calc(var(--c) - 3px) 0, 100% 0, 100% calc(100% - var(--c) + 3px), calc(100% - var(--c) + 3px) 100%, 0 100%, 0 calc(var(--c) - 3px)); }
.bs-card-name { position: absolute; left: 3px; right: 3px; bottom: 3px; padding: calc(26 * var(--bsu)) calc(12 * var(--bsu)) calc(10 * var(--bsu)); background: linear-gradient(0deg, rgba(2, 8, 13, .95), transparent); font-weight: 900; font-size: calc(17 * var(--bsu)); line-height: 1.1; text-shadow: 0 1px 4px #000; }
.bs-card-name small { display: block; color: var(--accent); font-size: calc(11 * var(--bsu)); letter-spacing: .12em; text-transform: uppercase; }
.bs-card-stats { position: absolute; top: calc(10 * var(--bsu)); right: calc(10 * var(--bsu)); display: grid; gap: calc(6 * var(--bsu)); }
.bs-card-stats b { padding: calc(3 * var(--bsu)) calc(8 * var(--bsu)); background: rgba(2, 10, 16, .82); border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent); font-size: calc(15 * var(--bsu)); }
.bs-shield { position: absolute; inset: -14%; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, transparent 52%, color-mix(in srgb, var(--accent) 55%, transparent) 64%, transparent 72%); }

.bs-stake { display: flex; align-items: stretch; gap: calc(8 * var(--bsu)); }
.bs-stake > span { display: grid; place-items: center; min-width: calc(74 * var(--bsu)); padding: calc(6 * var(--bsu)) calc(10 * var(--bsu)); background: linear-gradient(180deg, rgba(6, 26, 37, .92), rgba(2, 10, 16, .92)); border: 1px solid color-mix(in srgb, var(--accent) 65%, transparent); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.bs-stake small { color: #8fb3c2; font-size: calc(10 * var(--bsu)); letter-spacing: .14em; font-weight: 800; }
.bs-stake b { font-size: calc(26 * var(--bsu)); font-weight: 900; line-height: 1; }
.bs-attack b { color: #ffd27a; font-size: calc(32 * var(--bsu)); text-shadow: 0 0 calc(12 * var(--bsu)) rgba(255, 170, 60, .6); }
.bs-pips { display: flex; gap: 3px; margin-top: 4px; }
.bs-pips i { width: calc(7 * var(--bsu)); height: calc(10 * var(--bsu)); background: #12303d; transform: skewX(-15deg); }
.bs-pips i.on { background: #4fe0ff; box-shadow: 0 0 6px #4fe0ff; }
.bs-oc { color: #ff9a2a; font-weight: 900; font-size: calc(13 * var(--bsu)); letter-spacing: .1em; border-color: #ff9a2a !important; box-shadow: inset 0 0 calc(12 * var(--bsu)) rgba(255, 154, 42, .35); }
.bs-hp { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(8 * var(--bsu)); width: calc(var(--cw) + 40 * var(--bsu)); font-weight: 900; font-size: calc(13 * var(--bsu)); letter-spacing: .1em; }
.bs-hp > div { position: relative; height: calc(12 * var(--bsu)); background: #071820; border: 1px solid #2f6a86; overflow: hidden; }
.bs-hp > div i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #1fb36b, #8cff6a); transition: width .5s cubic-bezier(.3,.7,.3,1); }
.bs-opponent .bs-hp > div i { background: linear-gradient(90deg, #c22b37, #ff7a5c); }
.bs-hp b { font-size: calc(18 * var(--bsu)); }
.bs-plates { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(6 * var(--bsu)); min-height: calc(26 * var(--bsu)); }
.bs-plate { padding: calc(4 * var(--bsu)) calc(10 * var(--bsu)); font-size: calc(13 * var(--bsu)); font-weight: 800; background: rgba(4, 18, 26, .9); border-left: 3px solid #4fe0ff; }
.bs-plate.good { border-color: #6dff9f; color: #c9ffd9; }
.bs-plate.bad { border-color: #ff5a5a; color: #ffd0d0; }

.bs-banner { position: absolute; z-index: 9; left: 50%; top: 46%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; padding: calc(14 * var(--bsu)) calc(46 * var(--bsu)); background: linear-gradient(90deg, transparent, rgba(2, 10, 16, .92) 18%, rgba(2, 10, 16, .92) 82%, transparent); }
.bs-banner strong { font-size: calc(37 * var(--bsu)); font-weight: 900; letter-spacing: .08em; white-space: nowrap; }
.bs-banner.won strong { color: #7dffb0; text-shadow: 0 0 calc(18 * var(--bsu)) rgba(80, 255, 160, .55); }
.bs-banner.lost strong { color: #ff8a7a; text-shadow: 0 0 calc(18 * var(--bsu)) rgba(255, 90, 80, .55); }
.bs-banner small { color: #c9dde6; font-size: calc(14 * var(--bsu)); }

.bs-controls { position: absolute; z-index: 12; left: 0; right: 0; bottom: calc(20 * var(--bsu)); display: flex; justify-content: center; align-items: flex-end; gap: calc(14 * var(--bsu)); padding: 0 calc(24 * var(--bsu)); }
.bs-controls button { --c: 10px; min-height: calc(46 * var(--bsu)); min-width: calc(200 * var(--bsu)); padding: 0 calc(22 * var(--bsu)); border: 1px solid #4fe0ff; background: linear-gradient(180deg, rgba(14, 70, 94, .95), rgba(4, 22, 33, .95)); color: #f2fbff; font: inherit; font-weight: 900; letter-spacing: .1em; cursor: pointer; clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.bs-controls .bs-skip { min-width: calc(150 * var(--bsu)); border-color: #637b86; background: rgba(3, 12, 18, .85); color: #c9dde6; }
.bs-log { position: absolute; left: calc(24 * var(--bsu)); bottom: 0; max-width: min(520px, 40vw); background: rgba(2, 10, 16, .9); border: 1px solid #245b70; font-size: calc(14 * var(--bsu)); }
.bs-log summary { padding: calc(10 * var(--bsu)) calc(14 * var(--bsu)); cursor: pointer; color: #8fdcff; font-weight: 800; letter-spacing: .1em; }
.bs-log ol { margin: 0; padding: 0 calc(16 * var(--bsu)) calc(12 * var(--bsu)) calc(34 * var(--bsu)); line-height: 1.4; color: #d6e8ef; max-height: 34vh; overflow: auto; }

/* Выстрелы и всплывающие цифры (создаются в battle-scene.js). */
.bs-shot { position: absolute; z-index: 7; left: 0; top: 0; width: calc(120 * var(--bsu)); height: calc(6 * var(--bsu)); margin: calc(-3 * var(--bsu)) 0 0 calc(-60 * var(--bsu)); border-radius: 6px; pointer-events: none; transform-origin: 50% 50%;
  background: linear-gradient(90deg, transparent, var(--shot) 55%, #fff); box-shadow: 0 0 calc(14 * var(--bsu)) var(--shot), 0 0 calc(30 * var(--bsu)) var(--shot); }
.bs-shot.strong { height: calc(10 * var(--bsu)); width: calc(170 * var(--bsu)); margin-left: calc(-85 * var(--bsu)); }
.bs-pop { position: absolute; z-index: 10; transform: translate(-50%, -50%); pointer-events: none; font-weight: 900; white-space: nowrap; animation: bs-pop 1.1s cubic-bezier(.2,.8,.3,1) forwards; text-shadow: 0 2px 8px #000; }
.bs-pop.blocked { color: #c9e9f5; font-size: calc(22 * var(--bsu)); letter-spacing: .14em; padding: 4px 12px; background: rgba(2, 10, 16, .75); border: 1px solid #4fe0ff; }
.bs-pop.damage { color: #ff4b4b; font-size: calc(64 * var(--bsu)); }
.bs-pop.note { color: #ffd27a; font-size: calc(16 * var(--bsu)); animation-delay: .15s; opacity: 0; }
@keyframes bs-pop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 30% { transform: translate(-50%, -55%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -95%) scale(1); } }

/* Ролик: исходные состояния и шаги. */
.battle-scene.bs-playing .bs-bg { opacity: 0; transform: scale(1.08); transition: opacity .45s ease, transform 1.4s cubic-bezier(.2,.7,.2,1); }
.battle-scene.bs-playing.bs-in .bs-bg { opacity: 1; transform: none; }
.battle-scene.bs-playing .bs-glitch { animation: none; }
.battle-scene.bs-playing.bs-in .bs-glitch { animation: bs-glitch .45s steps(6) 1; }
@keyframes bs-glitch { 0% { opacity: 1; transform: translateX(-3%); } 30% { opacity: .8; transform: translateX(4%) skewX(-8deg); } 60% { opacity: .9; transform: translateX(-2%); } 100% { opacity: 0; transform: none; } }
.battle-scene.bs-playing .bs-unit { opacity: 0; transition: opacity .35s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.battle-scene.bs-playing .bs-player { transform: translate(-60%, 20%) scale(.7); }
.battle-scene.bs-playing .bs-opponent { transform: translate(60%, -20%) scale(.7); }
.battle-scene.bs-playing.bs-cards .bs-unit { opacity: 1; transform: none; }
.battle-scene.bs-playing .bs-stake, .battle-scene.bs-playing .bs-plates .bs-plate { opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; }
.battle-scene.bs-playing.bs-stakes .bs-stake { opacity: 1; transform: none; }
.battle-scene.bs-playing .bs-attack { opacity: .25; transition: opacity .2s; }
.battle-scene.bs-playing.bs-attack-on .bs-attack { opacity: 1; }
.battle-scene.bs-playing.bs-plates-on .bs-plates .bs-plate:not(.bs-plate-after) { opacity: 1; transform: none; }
.battle-scene.bs-playing.bs-after-on .bs-plates .bs-plate-after { opacity: 1; transform: none; }
.battle-scene.bs-playing .bs-banner { opacity: 0; transform: translate(-50%, -50%) scale(1.25); transition: opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.battle-scene.bs-playing.bs-outcome .bs-banner { opacity: 1; transform: translate(-50%, -50%); }
.battle-scene.bs-playing .bs-continue { visibility: hidden; }
.battle-scene.bs-done .bs-skip { display: none; }
.battle-scene .bs-shield-on .bs-shield { animation: bs-shield .7s ease-out 1; }
@keyframes bs-shield { 0% { opacity: 0; transform: scale(.7); } 25% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.15); } }
.battle-scene .bs-hit .bs-card { animation: bs-hit .5s ease-out 1; }
@keyframes bs-hit { 0% { filter: brightness(3) saturate(0); transform: translateX(0); } 20% { transform: translateX(-10px) rotate(-2deg); } 40% { transform: translateX(8px) rotate(1.5deg); } 60% { transform: translateX(-5px); filter: brightness(1.2) hue-rotate(-30deg); } 100% { transform: none; } }
.battle-scene .bs-firing .bs-card { animation: bs-recoil .35s ease-out 1; }
@keyframes bs-recoil { 0% { transform: none; } 30% { transform: translate(-8px, 4px) scale(.98); } 100% { transform: none; } }
.battle-scene.bs-shake { animation: bs-shake .4s linear 1; }
@keyframes bs-shake { 0%, 100% { transform: none; } 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-3px, 2px); } 80% { transform: translate(2px, -1px); } }
/* Нокаут: «отказ системы» — помехи, сбой, затухание. */
.battle-scene.bs-ko .bs-ko-target .bs-card, .battle-scene.bs-done .bs-ko-target .bs-card { animation: bs-ko 1s steps(8) 1 forwards; }
@keyframes bs-ko { 0% { filter: none; } 30% { filter: contrast(2) hue-rotate(90deg); transform: translateX(6px) skewX(6deg); } 60% { filter: grayscale(1) brightness(1.6); transform: translateX(-4px); } 100% { filter: grayscale(1) brightness(.35); transform: none; opacity: .55; } }
.battle-scene.bs-no-anim *, .battle-scene.bs-no-anim { transition: none !important; }
@media (max-width: 760px) {
  .bs-unit { --cw: 34vw; }
  .bs-opponent { --cw: 28vw; right: 6%; top: 13%; }
  .bs-player { left: 6%; bottom: 16%; }
  .bs-log { position: static; max-width: none; }
  .bs-controls { flex-wrap: wrap; }
}
.app .battle-scene { max-width: none; margin: 0; width: auto; }
/* Карты в сцене крупнее (оценка по кадрам 1920×1080). */
.bs-unit { --cw: calc(300 * var(--bsu)); }
.bs-opponent { --cw: calc(240 * var(--bsu)); right: 17%; top: 13%; }
.bs-player { left: 14%; bottom: 10%; }

/* === Постановка боя v2 (09.10.2026): карты в рамках редкости, камера, оружие фракций, Разгон, блеф,
   опасный раунд, живые карты, реакция фона, разлёт карты, ПОБЕДА/ПОРАЖЕНИЕ. === */
.battle-scene .bs-stage { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
.battle-scene .bs-stage > .bs-bg, .battle-scene .bs-stage > .bs-vignette { position: absolute; inset: 0; }
/* Карта в нашей рамке редкости (tc-card-frame v14: серебро / синяя / фиолетовая / золотая). */
.battle-scene .bs-card { position: relative; width: var(--cw); aspect-ratio: 320 / 464; padding: 0; background: none; clip-path: none; filter: none; box-sizing: border-box; }
.battle-scene .bs-card > tc-card-frame { position: absolute; inset: 0; }
.battle-scene .bs-card-content { display: flex; flex-direction: column; width: 100%; height: 100%; background: #030e17; }
.battle-scene .bs-card-content > img { width: 100%; height: 72%; object-fit: cover; display: block; clip-path: none; }
.battle-scene .bs-card-content .bs-card-name { position: static; flex: 1; display: grid; align-content: center; justify-items: center; padding: 0 calc(8 * var(--bsu)); background: none; text-align: center; font-size: calc(16 * var(--bsu)); line-height: 1.1; }
.battle-scene .bs-card-content .bs-card-name small { color: var(--accent); font-size: calc(10 * var(--bsu)); }
.battle-scene .bs-card-content .bs-card-stats { position: static; display: flex; justify-content: space-between; align-items: center; padding: calc(5 * var(--bsu)) calc(10 * var(--bsu)); background: #102332; }
.battle-scene .bs-card-content .bs-card-stats b { padding: 0; background: none; border: 0; font-size: calc(18 * var(--bsu)); }
.battle-scene .bs-card-content .bs-card-stats small { color: #9fbfcf; font-size: calc(9 * var(--bsu)); letter-spacing: .08em; }
/* Свечение по редкости. */
/* Свечение редкости (12.10.2026): вместо прямоугольной тени по контуру карты — тот же мягкий овал за картой. */
.battle-scene .bs-rarity-rare { --halo: #25a2ff; --halo-base: .28; }
.battle-scene .bs-rarity-epic { --halo: #b541ff; --halo-base: .34; }
.battle-scene .bs-rarity-legendary { --halo: #ffbe3c; --halo-base: .42; }
.battle-scene .bs-rarity-legendary .bs-card-wrap::after { content: ""; position: absolute; inset: -12%; pointer-events: none; background: radial-gradient(circle, rgba(255, 211, 92, .22), transparent 62%); animation: bs-legend 2.6s ease-in-out infinite; }
@keyframes bs-legend { 50% { opacity: .45; transform: scale(1.06); } }
/* Живые карты: лёгкое «дыхание» (отдельное свойство translate — не мешает ударам и камере). */
.battle-scene .bs-card-wrap { position: relative; animation: bs-breathe 3.6s ease-in-out infinite; }
.battle-scene .bs-opponent .bs-card-wrap { animation-delay: -1.8s; }
@keyframes bs-breathe { 50% { translate: 0 calc(-6 * var(--bsu)); } }
/* Спрайты-эффекты: на чёрном фоне → режим свечения; кровь — обычный (PNG с прозрачностью). */
.bs-sprite { position: absolute; z-index: 7; left: 0; top: 0; pointer-events: none; mix-blend-mode: screen; object-fit: contain; }
.bs-sprite:not(.bs-bolt) { transform: translate(-50%, -50%); }
.bs-sprite.normal { mix-blend-mode: normal; }
.bs-bolt { left: 0; top: 0; }
.bs-beam { position: absolute; z-index: 7; height: calc(8 * var(--bsu)); margin-top: calc(-4 * var(--bsu)); transform-origin: 0 50%; pointer-events: none; border-radius: 6px; background: linear-gradient(90deg, #fff, var(--beam) 30%, #fff 70%, var(--beam)); box-shadow: 0 0 calc(14 * var(--bsu)) var(--beam), 0 0 calc(34 * var(--bsu)) var(--beam); }
.bs-beam.hack { height: calc(14 * var(--bsu)); background: repeating-linear-gradient(90deg, var(--beam) 0 12px, #fff 12px 16px, transparent 16px 22px); filter: drop-shadow(0 0 8px var(--beam)); animation: bs-hack .08s steps(2) infinite; }
@keyframes bs-hack { 50% { margin-top: calc(-10 * var(--bsu)); } }
.bs-glob { position: absolute; z-index: 7; left: 0; top: 0; width: calc(46 * var(--bsu)); height: calc(46 * var(--bsu)); border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 40% 35%, #f4ffd8, #8dff6a 35%, #2f9a2a 70%, transparent 72%); box-shadow: 0 0 calc(24 * var(--bsu)) #7dff5a; }
.bs-pop.oc { color: #ffb347; font-size: calc(30 * var(--bsu)); letter-spacing: .12em; text-shadow: 0 0 calc(16 * var(--bsu)) rgba(255, 140, 30, .9), 0 2px 6px #000; }
.bs-pop.bluff { color: #ffe169; font-size: calc(72 * var(--bsu)); letter-spacing: .16em; text-shadow: 0 0 calc(26 * var(--bsu)) rgba(255, 200, 60, .85), 0 3px 10px #000; animation-duration: 1.6s; }
.bs-pop.danger { color: #ff5a5a; font-size: calc(22 * var(--bsu)); letter-spacing: .2em; padding: 4px 16px; background: rgba(30, 2, 4, .78); border: 1px solid #ff5a5a; animation-duration: 1.8s; }
/* Разгон: аура у карты остаётся тлеть. */
/* Разгон (12.10.2026): прямоугольное оранжевое свечение вокруг карты убрано — горит и пульсирует сама плашка «РАЗГОН», от карты поднимаются искры (battle-scene.js). */
.battle-scene .bs-oc-on .bs-oc { animation: bs-oc-pulse 1.1s ease-in-out infinite; }
@keyframes bs-oc-pulse { 0%,100% { filter: brightness(1); box-shadow: inset 0 0 calc(12 * var(--bsu)) rgba(255,154,42,.35), 0 0 calc(10 * var(--bsu)) rgba(255,140,40,.35); } 50% { filter: brightness(1.35); box-shadow: inset 0 0 calc(18 * var(--bsu)) rgba(255,170,60,.6), 0 0 calc(22 * var(--bsu)) rgba(255,140,40,.7); } }
/* Опасный раунд: красная пульсация по краям. */
.battle-scene .bs-danger { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; box-shadow: inset 0 0 calc(160 * var(--bsu)) rgba(255, 30, 40, .55); }
.battle-scene.bs-danger-on .bs-danger { animation: bs-danger 1.1s ease-in-out infinite; }
@keyframes bs-danger { 50% { opacity: 1; } }
/* Фон вспыхивает при попадании. */
.battle-scene.bs-flash .bs-bg { animation: bs-bgflash .45s ease-out 1; }
@keyframes bs-bgflash { 0% { filter: brightness(2.2) saturate(1.4); } 100% { filter: none; } }
.battle-scene.bs-slowmo .bs-vignette { box-shadow: inset 0 0 calc(220 * var(--bsu)) rgba(0, 0, 0, .9); transition: box-shadow .6s; }
/* Нокаут: карта разлетелась (её куски рисует canvas). */
.battle-scene .bs-shattered .bs-card-wrap, .battle-scene.bs-done .bs-ko-target .bs-card-wrap { opacity: 0; transition: opacity .12s; }
.battle-scene.bs-done .bs-ko-target .bs-card, .battle-scene.bs-ko .bs-ko-target .bs-card { animation: none; }
/* Проигрыш по очкам: карта «отключается» — трещины, сбой, гаснет. */
.battle-scene .bs-shutdown .bs-card, .battle-scene.bs-done .bs-shutdown-target .bs-card { filter: grayscale(.85) brightness(.45) contrast(1.2); transition: filter 1s; }
/* 10.10.2026: сетка-трещины на «отключённой» карте убрана по просьбе владельца. */
/* ПОБЕДА / ПОРАЖЕНИЕ / НИЧЬЯ. */
.bs-final { position: absolute; z-index: 11; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(2, 6, 10, .55), rgba(2, 6, 10, .85)); }
.bs-final strong { font-size: calc(120 * var(--bsu)); font-weight: 900; letter-spacing: .16em; }
.bs-final.win strong { color: #ffe169; text-shadow: 0 0 calc(40 * var(--bsu)) rgba(255, 200, 60, .8), 0 4px 14px #000; }
.bs-final.loss strong { color: #ff6a5a; text-shadow: 0 0 calc(40 * var(--bsu)) rgba(255, 60, 50, .7), 0 4px 14px #000; }
.bs-final.draw strong { color: #c9e9f5; text-shadow: 0 0 calc(30 * var(--bsu)) rgba(80, 200, 255, .6), 0 4px 14px #000; }
.battle-scene.bs-final-on .bs-final, .battle-scene.bs-done .bs-final { opacity: 1; transition: opacity .5s; }
.battle-scene.bs-final-on .bs-final strong { animation: bs-final .9s cubic-bezier(.2,.8,.2,1) 1; }
@keyframes bs-final { 0% { transform: scale(1.6); opacity: 0; letter-spacing: .5em; } 100% { transform: none; opacity: 1; } }
.battle-scene.bs-final-on .bs-banner, .battle-scene.bs-done:has(.bs-final) .bs-banner { opacity: 0; }
.bs-banner em { color: #ffe169; font-style: normal; font-weight: 900; letter-spacing: .14em; font-size: calc(18 * var(--bsu)); }
.battle-scene.bs-playing .bs-banner em { display: none; }
.bs-sprite.bs-beamimg { transform-origin: 0 50%; object-fit: fill; }

/* === Тренировка V1 (09.10.2026): бой с ботом (3 уровня) / дуэль с другом. Сцена 1560 x 890 в --pu, как боевой центр. === */
.app[data-route="PRACTICE"] { background: linear-gradient(90deg, #03080ee0, #03080e55 45%, #03080e70), linear-gradient(0deg, #03080eaa, transparent 50%), url("/app/client/assets/ui/battle/bh-bg.jpg") center / cover fixed no-repeat; }
.desktop > main:has(> .practice) { padding: calc(10 * var(--u)) 0 0; }
.practice { --pu: calc((100vw - 32px) / 760); position: relative; display: grid; gap: calc(22 * var(--pu)); padding: 16px; color: #e8f1f8; }
.desktop .practice { --pu: min(calc(var(--u) * .96), calc((100vh - 86 * var(--u) - 28px) / 890)); display: block; width: calc(1560 * var(--pu)); height: calc(890 * var(--pu)); margin: 0 0 0 calc(64 * var(--u)); padding: 0; }
.practice .pr-title { position: relative; min-height: calc(150 * var(--pu)); }
.desktop .practice .pr-title { position: absolute; left: 0; top: 0; width: calc(1500 * var(--pu)); height: calc(170 * var(--pu)); }
.practice .pr-title p { margin: 0 0 0 calc(44 * var(--pu)); padding-top: calc(18 * var(--pu)); font-size: calc(14 * var(--pu)); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #36c8ff; }
.practice .pr-title h1 { margin: calc(6 * var(--pu)) 0 0 calc(42 * var(--pu)); font-size: calc(60 * var(--pu)); line-height: 1; font-weight: 900; text-transform: uppercase; color: #f2f7fb; text-shadow: 0 calc(3 * var(--pu)) calc(14 * var(--pu)) #000c; }
.practice .pr-title > span { display: block; margin: calc(14 * var(--pu)) 0 0 calc(44 * var(--pu)); max-width: calc(760 * var(--pu)); font-size: calc(15 * var(--pu)); line-height: 1.45; letter-spacing: .03em; color: #b9cbd8; }
.practice .pr-badge { position: absolute; right: calc(40 * var(--pu)); top: calc(54 * var(--pu)); padding: calc(10 * var(--pu)) calc(20 * var(--pu)); border: calc(1.5 * var(--pu)) solid rgba(255,196,84,.7); background: linear-gradient(180deg, rgba(48,32,6,.75), rgba(22,14,3,.85)); clip-path: polygon(calc(12 * var(--pu)) 0, 100% 0, 100% calc(100% - 12 * var(--pu)), calc(100% - 12 * var(--pu)) 100%, 0 100%, 0 calc(12 * var(--pu))); font-style: normal; font-size: calc(13 * var(--pu)); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ffd27a; }

.practice .pr-panel { position: relative; isolation: isolate; height: calc(560 * var(--pu)); filter: drop-shadow(0 calc(22 * var(--pu)) calc(30 * var(--pu)) rgba(0,0,0,.6)); }
.desktop .practice .pr-panel { position: absolute; top: calc(190 * var(--pu)); }
.desktop .practice .pr-bot { left: calc(8 * var(--pu)); width: calc(760 * var(--pu)); }
.desktop .practice .pr-friend { left: calc(792 * var(--pu)); width: calc(740 * var(--pu)); }
.practice .pr-panel .tc-cut-art img { left: 0; width: 100%; object-position: 70% 40%; opacity: .55; }
.practice .pr-panel .tc-cut-art::after { background: linear-gradient(180deg, rgba(3,10,18,.55) 0%, rgba(3,10,18,.86) 34%, rgba(3,10,18,.94) 100%); }
.practice .tc-cut-body { padding: calc(34 * var(--pu)) calc(44 * var(--pu)); display: flex; flex-direction: column; gap: calc(14 * var(--pu)); }
.practice .pr-num { position: absolute; right: calc(36 * var(--pu)); top: calc(22 * var(--pu)); font-size: calc(30 * var(--pu)); font-weight: 900; color: rgba(140,220,255,.35); }
.practice .pr-panel h2 { margin: 0; font-size: calc(32 * var(--pu)); font-weight: 900; letter-spacing: .02em; text-transform: uppercase; color: #f2f7fb; }
.practice .pr-detail { margin: 0; max-width: calc(600 * var(--pu)); font-size: calc(15 * var(--pu)); line-height: 1.45; color: #b9cbd8; }

.practice .pr-levels { display: grid; gap: calc(10 * var(--pu)); margin-top: calc(6 * var(--pu)); }
.practice .pr-level { display: grid; grid-template-columns: calc(54 * var(--pu)) 1fr auto; align-items: center; gap: calc(16 * var(--pu)); min-height: calc(70 * var(--pu)); padding: 0 calc(22 * var(--pu)) 0 calc(10 * var(--pu)); border: calc(1.5 * var(--pu)) solid rgba(54,200,255,.32); border-radius: 0; background: linear-gradient(90deg, rgba(8,30,44,.78), rgba(4,16,26,.6)); clip-path: polygon(calc(14 * var(--pu)) 0, 100% 0, 100% calc(100% - 14 * var(--pu)), calc(100% - 14 * var(--pu)) 100%, 0 100%, 0 calc(14 * var(--pu))); color: #e8f1f8; text-align: left; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.practice .pr-level:hover { border-color: rgba(138,232,255,.8); }
.practice .pr-level b { display: grid; place-items: center; width: calc(46 * var(--pu)); height: calc(46 * var(--pu)); border: calc(1.5 * var(--pu)) solid rgba(54,200,255,.55); font-size: calc(22 * var(--pu)); font-weight: 900; color: #4bd5ff; }
.practice .pr-level span { display: grid; gap: calc(2 * var(--pu)); }
.practice .pr-level strong { font-size: calc(20 * var(--pu)); font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.practice .pr-level small { font-size: calc(13.5 * var(--pu)); color: #9fb5c4; }
.practice .pr-pips { display: flex; gap: calc(5 * var(--pu)); }
.practice .pr-pips em { width: calc(10 * var(--pu)); height: calc(22 * var(--pu)); transform: skewX(-18deg); background: rgba(80,120,140,.35); }
.practice .pr-level-easy .pr-pips em.on { background: #48e39a; box-shadow: 0 0 calc(8 * var(--pu)) #48e39a88; }
.practice .pr-level-medium .pr-pips em.on { background: #ffc454; box-shadow: 0 0 calc(8 * var(--pu)) #ffc45488; }
.practice .pr-level-hard .pr-pips em.on { background: #ff4f5e; box-shadow: 0 0 calc(8 * var(--pu)) #ff4f5e88; }
.practice .pr-level.selected { border-color: #8ae8ff; background: linear-gradient(90deg, rgba(14,74,104,.88), rgba(6,30,46,.75)); box-shadow: inset 0 0 calc(22 * var(--pu)) rgba(54,200,255,.25); }
.practice .pr-level.selected b { background: #36c8ff; color: #03111a; border-color: #8ae8ff; }

.practice .pr-row { padding-right: calc(64 * var(--pu)); display: flex; align-items: center; justify-content: space-between; gap: calc(20 * var(--pu)); margin-top: auto; }
.practice .pr-deck { display: grid; grid-template-columns: auto auto; column-gap: calc(12 * var(--pu)); align-items: baseline; }
.practice .pr-deck small { grid-column: 1 / -1; font-size: calc(12 * var(--pu)); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #4bd5ff; }
.practice .pr-deck b { font-size: calc(22 * var(--pu)); }
.practice .pr-deck em { font-style: normal; font-size: calc(15 * var(--pu)); color: #9fb5c4; }

.practice .pr-go, .pr-toast .pr-go { display: inline-flex; align-items: center; justify-content: center; gap: calc(18 * var(--pu, 1px)); min-height: calc(50 * var(--pu, 1px)); padding: 0 calc(30 * var(--pu, 1px)); border: calc(1.5 * var(--pu, 1px)) solid rgba(54,200,255,.9); border-radius: 0; background: linear-gradient(180deg, rgba(14,70,96,.92), rgba(5,28,42,.95)); box-shadow: inset 0 0 calc(16 * var(--pu, 1px)) rgba(54,200,255,.2), 0 0 calc(18 * var(--pu, 1px)) rgba(54,200,255,.18); clip-path: polygon(calc(12 * var(--pu, 1px)) 0, 100% 0, 100% calc(100% - 12 * var(--pu, 1px)), calc(100% - 12 * var(--pu, 1px)) 100%, 0 100%, 0 calc(12 * var(--pu, 1px))); color: #eaf6ff; font-size: calc(15 * var(--pu, 1px)); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.practice .pr-go::after { content: ""; width: calc(9 * var(--pu)); height: calc(9 * var(--pu)); border: solid #4bd5ff; border-width: calc(2.5 * var(--pu)) calc(2.5 * var(--pu)) 0 0; transform: rotate(45deg); }
.practice .pr-go:hover, .pr-toast .pr-go:hover { background: linear-gradient(180deg, rgba(22,98,130,.95), rgba(8,40,58,.95)); border-color: #8ae8ff; }
.practice .pr-go:disabled, .practice .pr-ghost:disabled, .pr-toast button:disabled { opacity: .5; cursor: default; }
.practice .pr-start { min-width: calc(290 * var(--pu)); min-height: calc(58 * var(--pu)); font-size: calc(17 * var(--pu)); }
.practice .pr-ghost, .pr-toast .pr-ghost { min-height: calc(40 * var(--pu, 1px)); padding: 0 calc(18 * var(--pu, 1px)); border: calc(1 * var(--pu, 1px)) solid rgba(160,200,220,.4); border-radius: 0; background: rgba(6,18,28,.6); color: #cfe3ee; font-size: calc(13 * var(--pu, 1px)); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.practice .pr-ghost:hover, .pr-toast .pr-ghost:hover { border-color: rgba(138,232,255,.8); color: #fff; }

.practice .pr-form { display: flex; gap: calc(12 * var(--pu)); margin-top: calc(6 * var(--pu)); }
.practice .pr-input { flex: 1; min-width: 0; height: calc(56 * var(--pu)); padding: 0 calc(18 * var(--pu)); border: calc(1.5 * var(--pu)) solid rgba(54,200,255,.45); border-radius: 0; background: rgba(2,10,16,.82); color: #f2f7fb; font: inherit; font-size: calc(18 * var(--pu)); font-weight: 700; letter-spacing: .03em; outline: none; clip-path: polygon(calc(10 * var(--pu)) 0, 100% 0, 100% 100%, 0 100%, 0 calc(10 * var(--pu))); }
.practice .pr-input::placeholder { color: #5f7787; font-weight: 600; }
.practice .pr-input:focus { border-color: #8ae8ff; box-shadow: inset 0 0 calc(16 * var(--pu)) rgba(54,200,255,.18); }
.practice .pr-send { min-width: calc(180 * var(--pu)); min-height: calc(56 * var(--pu)); }
.practice .pr-outgoing { display: flex; align-items: center; justify-content: space-between; gap: calc(14 * var(--pu)); padding: calc(14 * var(--pu)) calc(18 * var(--pu)); border-left: calc(3 * var(--pu)) solid #36c8ff; background: rgba(6,24,36,.72); }
.practice .pr-outgoing p { display: flex; align-items: center; gap: calc(12 * var(--pu)); margin: 0; font-size: calc(15.5 * var(--pu)); font-weight: 700; }
.practice .pr-out-declined, .practice .pr-out-expired { border-left-color: #ff6b6b; }
.practice .pr-out-accepted { border-left-color: #48e39a; }
.practice .pr-wait { width: calc(16 * var(--pu)); height: calc(16 * var(--pu)); border: calc(2.5 * var(--pu)) solid rgba(54,200,255,.25); border-top-color: #4bd5ff; border-radius: 50%; animation: pr-spin 1s linear infinite; }
@keyframes pr-spin { to { transform: rotate(360deg); } }
.practice .pr-incoming { display: grid; gap: calc(10 * var(--pu)); }
.practice .pr-incoming > small { font-size: calc(12 * var(--pu)); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ffc454; }
.practice .pr-invite { display: flex; align-items: center; justify-content: space-between; gap: calc(14 * var(--pu)); padding: calc(14 * var(--pu)) calc(18 * var(--pu)); border: calc(1.5 * var(--pu)) solid rgba(255,196,84,.55); background: rgba(40,28,6,.6); animation: pr-pulse 1.6s ease-in-out infinite; }
.practice .pr-invite p { margin: 0; font-size: calc(16 * var(--pu)); font-weight: 800; }
.practice .pr-invite div { display: flex; gap: calc(10 * var(--pu)); }
.practice .pr-accept { min-height: calc(42 * var(--pu)); padding: 0 calc(20 * var(--pu)); }
@keyframes pr-pulse { 50% { box-shadow: 0 0 calc(22 * var(--pu, 1px)) rgba(255,196,84,.35); } }

.practice .pr-foot { display: grid; gap: calc(12 * var(--pu)); }
.desktop .practice .pr-foot { position: absolute; left: calc(8 * var(--pu)); right: calc(28 * var(--pu)); top: calc(778 * var(--pu)); grid-template-columns: 1fr auto; align-items: center; }
.practice .pr-error { grid-column: 1 / -1; margin: 0; padding: calc(12 * var(--pu)) calc(18 * var(--pu)); border-left: calc(3 * var(--pu)) solid #ff6b6b; background: rgba(40,8,12,.75); color: #ffd0d0; font-size: calc(15 * var(--pu)); font-weight: 700; }
.practice .pr-replay { display: flex; align-items: center; gap: calc(16 * var(--pu)); }
.practice .pr-replay small { font-size: calc(13.5 * var(--pu)); color: #8ea6b5; }
.practice .pr-back { justify-self: end; }

/* Входящий вызов поверх любого экрана. */
.pr-toast { --pu: min(1px, calc(100vw / 600)); position: fixed; z-index: 60; right: 24px; top: 96px; width: min(440px, calc(100vw - 32px)); display: grid; gap: 8px; padding: 18px 20px; border: 1.5px solid rgba(255,196,84,.75); background: linear-gradient(180deg, rgba(36,26,6,.96), rgba(10,8,3,.96)); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); box-shadow: 0 18px 40px rgba(0,0,0,.6); color: #f2f7fb; animation: pr-toast-in .35s ease-out, pr-pulse 1.6s ease-in-out .35s infinite; }
.pr-toast small { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ffc454; }
.pr-toast p { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.35; }
.pr-toast em { font-style: normal; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #b9a77a; }
.pr-toast div { display: flex; gap: 10px; margin-top: 4px; }
@keyframes pr-toast-in { from { transform: translateY(-14px); opacity: 0; } }
.result-secondary { margin-left: 12px; min-width: min(240px, 100%); padding: 14px 24px; border: 1px solid rgba(160,200,220,.45); color: #cfe3ee; background: rgba(6,18,28,.7); font-weight: 900; letter-spacing: .08em; }
.app:not(.desktop) .practice .pr-badge { position: static; display: inline-block; margin: calc(14 * var(--pu)) 0 0 calc(44 * var(--pu)); }
.app:not(.desktop) .practice .pr-friend { height: calc(420 * var(--pu)); }
.practice .pr-left { margin-left: calc(6 * var(--pu)); padding: calc(2 * var(--pu)) calc(10 * var(--pu)); border: calc(1 * var(--pu)) solid rgba(54,200,255,.5); color: #8ae8ff; font-variant-numeric: tabular-nums; }
/* Clinic city event: owner artwork, code frames, all existing role-specific actions. */
.desktop > main:has(> .ce-scene) { position:relative; padding:0; height:calc(100vh - 86 * var(--u)); overflow:auto; background:url('assets/ui/city-event-clinic/clinic-bg.png') center/cover no-repeat; }
.desktop > main:has(> .ce-scene[data-ce-district="ARCHIVE"]) { background-image:url('assets/ui/city-event-archive/archive-bg.png'); }
.desktop > main:has(> .ce-scene[data-ce-district="DOCKS"]) { background-image:url('assets/ui/city-event-docks/docks-bg.png'); }
.desktop > main:has(> .ce-scene[data-ce-district="SIGNAL"]) { background-image:url('assets/ui/city-event-signal/signal-bg.png'); }
.ce-scene { --ce:min(calc((100vw - 228 * var(--u)) / 1444),calc((100vh - 86 * var(--u)) / 940)); width:100%; min-height:100%; max-width:none; margin:0; padding:calc(24 * var(--ce)) calc(28 * var(--ce)); color:#edfbff; }
.ce-content { width:min(100%,calc(1100 * var(--ce))); display:flex; flex-direction:column; gap:calc(12 * var(--ce)); }
.ce-heading { padding:calc(6 * var(--ce)) calc(18 * var(--ce)) calc(4 * var(--ce)); text-shadow:0 2px 5px #000,0 0 12px #00121e; }
.ce-heading > p { margin:0 0 calc(8 * var(--ce)); color:#3deeff; font-weight:800; font-size:clamp(11px,calc(14 * var(--ce)),16px); letter-spacing:.2em; }
.ce-heading h1 { margin:0 0 calc(7 * var(--ce)); font-size:calc(56 * var(--ce)); font-weight:900; line-height:1.05; text-transform:uppercase; }
.ce-heading > span { display:block; max-width:calc(820 * var(--ce)); font-size:clamp(12px,calc(15 * var(--ce)),17px); line-height:1.45; color:#d4eaf6; }
.ce-frame { position:relative; isolation:isolate; filter:drop-shadow(0 7px 12px #0007); }
.ce-frame > .tc-cut-glass { background:linear-gradient(125deg,#04131be8,#031119b8); }
.ce-frame > .tc-cut-body { position:relative; inset:auto; }
.ce-summary { width:calc(1000 * var(--ce)); max-width:100%; min-height:calc(205 * var(--ce)); }
.ce-summary > .tc-cut-body { overflow:hidden; min-height:calc(205 * var(--ce)); clip-path:polygon(2% 3%,97% 3%,99% 12%,99% 90%,97% 97%,2% 97%,1% 89%,1% 12%); }
.ce-panorama { position:absolute; width:70%; height:100%; right:0; top:0; object-fit:cover; object-position:center; }
.ce-summary-shade { position:absolute; inset:0; background:linear-gradient(90deg,#03121bf5 0%,#03121bed 30%,#03121b88 46%,transparent 68%); }
.ce-summary-copy { position:relative; z-index:1; width:56%; padding:calc(25 * var(--ce)) calc(32 * var(--ce)); }
.ce-summary h2 { margin:0 0 calc(7 * var(--ce)); font-size:calc(39 * var(--ce)); line-height:1.1; font-weight:900; }
.ce-summary strong { color:#45eeff; font-size:clamp(13px,calc(20 * var(--ce)),23px); line-height:1.2; }
.ce-summary small { display:block; color:#adcbd8; font-size:clamp(10px,calc(12 * var(--ce)),14px); margin:calc(8 * var(--ce)) 0; }
.ce-summary p { margin:calc(10 * var(--ce)) 0 0; color:#e0eef5; font-size:clamp(11px,calc(14 * var(--ce)),16px); line-height:1.4; overflow-wrap:anywhere; }
.ce-summary .ce-result { color:#8ef1c7; font-weight:700; }
.ce-action-panel > .tc-cut-body { padding:calc(16 * var(--ce)) calc(26 * var(--ce)); }
.ce-action-panel h3 { margin:0 0 calc(8 * var(--ce)); font-size:clamp(12px,calc(17 * var(--ce)),20px); font-weight:800; color:#e9f8ff; }
.ce-action-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:calc(6 * var(--ce)); }
.ce-button { position:relative; isolation:isolate; width:100%; min-width:0; min-height:calc(43 * var(--ce)); padding:0; border:0; border-radius:0; background:transparent; color:#edfaff; font-size:clamp(10px,calc(12 * var(--ce)),14px); font-weight:800; text-transform:uppercase; }
.ce-button > .tc-cut-body { position:relative; inset:auto; display:flex; align-items:center; gap:calc(12 * var(--ce)); min-height:calc(43 * var(--ce)); padding:calc(8 * var(--ce)) calc(21 * var(--ce)); text-align:left; line-height:1.3; }
.ce-button .tc-cut-body > span { flex:1; min-width:0; overflow-wrap:anywhere; }
.ce-icon { width:calc(24 * var(--ce)); height:calc(24 * var(--ce)); min-width:calc(24 * var(--ce)); color:#32eaff; }
.ce-button > .tc-cut-glass { background:linear-gradient(180deg,#083444e8,#03131ded); }
.ce-button > .tc-cut-svg,.ce-button > .tc-cut-metal,.ce-button > .tc-cut-rim { filter:brightness(.85); }
.ce-button:hover:not(:disabled) > .tc-cut-glass { background:#0a4052; }
.ce-button:focus-visible { outline:2px solid #b5f9ff; outline-offset:3px; }
.ce-button:disabled { color:#8ca7b4; }
.ce-button:disabled .ce-icon { color:#7897a5; }
.ce-button:disabled > .tc-cut-glass { background:#071820eb; }
.ce-button:disabled > .tc-cut-svg,.ce-button:disabled > .tc-cut-rim { filter:brightness(.6) saturate(.5); }
.ce-clues > .tc-cut-body,.ce-error > .tc-cut-body { padding:calc(20 * var(--ce)) calc(30 * var(--ce)); }
.ce-clues p,.ce-error p { margin:0; font-size:clamp(12px,calc(14 * var(--ce)),16px); line-height:1.5; }
.ce-error p { color:#ffb1a9; }
.ce-footer { display:flex; gap:calc(12 * var(--ce)); padding:calc(2 * var(--ce)) calc(8 * var(--ce)) calc(10 * var(--ce)); }
.ce-footer .ce-button { width:calc(255 * var(--ce)); min-height:calc(54 * var(--ce)); font-size:clamp(11px,calc(13 * var(--ce)),15px); }
.ce-footer .ce-button > .tc-cut-body { min-height:calc(54 * var(--ce)); }

/* Переработка боя (10.10.2026): «История раунда» — свёрнутая кнопка вверху справа, сама не открывается и не закрывает сцену. */
.battle-scene > .bs-log { position: absolute; z-index: 30; left: auto; bottom: auto; top: calc(22 * var(--bsu)); right: calc(24 * var(--bsu)); width: min(460px, 34vw); max-width: none; background: rgba(2, 10, 16, .82); backdrop-filter: blur(4px); }
.battle-scene > .bs-log:not([open]) { width: auto; }
.battle-scene > .bs-log summary { font-size: calc(13 * var(--bsu)); }
.battle-scene > .bs-log ol { max-height: 46vh; }

/* Переработка боя п. 4–5 (10.10.2026): накопление заряда, очередь, толчки, трещины, плавное здоровье. */
.battle-scene .bs-unit { --charge: 0; }
.battle-scene .bs-charging .bs-card { animation: bs-charge .45s ease-in-out infinite alternate; }
/* 12.10.2026 (владелец): прямоугольная тень вокруг карты при накоплении заряда убрана — карта только чуть ярче пульсирует,
   а сияние — мягкий овал цвета фракции за картой, без краёв. */
@keyframes bs-charge { from { filter: brightness(1); } to { filter: brightness(calc(1.04 + var(--charge) * .22)); } }
.battle-scene .bs-card-wrap { isolation: isolate; }
.battle-scene .bs-card-wrap::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 150%; height: 120%; transform: translate(-50%, -50%) scale(.85); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--halo, var(--accent, #8ce6ff)) 70%, transparent), color-mix(in srgb, var(--halo, var(--accent, #8ce6ff)) 22%, transparent) 55%, transparent 100%); opacity: var(--halo-base, 0); filter: blur(calc(14 * var(--bsu, 1px))); }
.battle-scene .bs-charging .bs-card-wrap::before { animation: bs-charge-halo .45s ease-in-out infinite alternate; }
@keyframes bs-charge-halo { from { opacity: calc(.18 + var(--charge) * .35); transform: translate(-50%, -50%) scale(.85); } to { opacity: calc(.3 + var(--charge) * .55); transform: translate(-50%, -50%) scale(.95); } }
.reduced-motion .battle-scene .bs-charging .bs-card-wrap::before { animation: none; opacity: .35; }
.battle-scene .bs-jolt .bs-card { animation: bs-jolt .22s ease-out 1; }
@keyframes bs-jolt { 0% { filter: brightness(2.2); transform: none; } 35% { transform: translate(7px, -3px) rotate(1.2deg); } 100% { filter: none; transform: none; } }
.bs-hp > div i { transition: width 1.1s cubic-bezier(.25,.8,.3,1); }
.bs-hp { width: auto; grid-template-columns: auto calc(var(--cw) * .82) auto; }
.bs-hp > span { white-space: nowrap; }
/* Нокаут (12.10.2026): плашки над картой и полоса здоровья разлетаются вместе с картой — отлетают в стороны с поворотом и гаснут. */
.battle-scene .bs-shattered .bs-stake > *, .battle-scene .bs-shattered .bs-plates, .battle-scene .bs-shattered .bs-hp { animation: bs-chip-fly .6s cubic-bezier(.2,.7,.3,1) forwards; }
.battle-scene .bs-shattered .bs-stake > :nth-child(1) { --fx: calc(-90 * var(--bsu)); --fy: calc(-60 * var(--bsu)); --fr: -28deg; }
.battle-scene .bs-shattered .bs-stake > :nth-child(2) { --fx: calc(10 * var(--bsu)); --fy: calc(-110 * var(--bsu)); --fr: 16deg; }
.battle-scene .bs-shattered .bs-stake > :nth-child(3) { --fx: calc(100 * var(--bsu)); --fy: calc(-50 * var(--bsu)); --fr: 30deg; }
.battle-scene .bs-shattered .bs-plates { --fx: calc(-60 * var(--bsu)); --fy: calc(-40 * var(--bsu)); --fr: -12deg; }
.battle-scene .bs-shattered .bs-hp { --fx: 0px; --fy: calc(70 * var(--bsu)); --fr: 8deg; }
@keyframes bs-chip-fly { 0% { opacity: 1; transform: none; filter: brightness(1.8); } 25% { opacity: 1; filter: brightness(1.3); } 100% { opacity: 0; transform: translate(var(--fx, 0px), var(--fy, -60px)) rotate(var(--fr, 0deg)) scale(.7); filter: brightness(1) blur(1px); } }
.reduced-motion .battle-scene .bs-shattered .bs-stake > *, .reduced-motion .battle-scene .bs-shattered .bs-plates, .reduced-motion .battle-scene .bs-shattered .bs-hp { animation: none; opacity: 0; }
/* Картинки-эффекты в формате JPG (удар, искры, дым, взрыв) — мягкое круглое затухание к краям, чтобы не было видно прямоугольника. */
.battle-scene .bs-sprite:not(.normal):not(.bs-bolt) { -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 100%); mask-image: radial-gradient(closest-side, #000 58%, transparent 100%); }

/* Плашки «Заряд / Разгон / Атака» над картами в бою (10.10.2026, по просьбе владельца): в стиле наших кодовых рамок —
   срез двух углов, стальная кромка с бликом, тёмное стекло, неоновая полоса сверху, значки. */
.battle-scene .bs-stake { gap: calc(10 * var(--bsu)); filter: drop-shadow(0 calc(6 * var(--bsu)) calc(10 * var(--bsu)) rgba(0, 0, 0, .65)); }
.battle-scene .bs-stake > span {
  --tone: #4fe0ff; --cut: calc(12 * var(--bsu));
  position: relative; isolation: isolate; border: 0 !important; border-radius: 0;
  min-width: calc(86 * var(--bsu)); padding: calc(9 * var(--bsu)) calc(14 * var(--bsu)) calc(8 * var(--bsu));
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background: linear-gradient(115deg, #0e1a21 0%, #4b6674 9%, #d9ecf3 13%, #3a5260 17%, #101c23 34%, #22343e 55%, #8aa6b3 68%, #eef8fc 71%, #3c5563 75%, #0f1b22 100%);
  box-shadow: none;
}
.battle-scene .bs-stake > span::before { content: ""; position: absolute; inset: calc(2 * var(--bsu)); z-index: -1; clip-path: inherit;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--tone) 22%, transparent), transparent 60%), linear-gradient(180deg, rgba(8, 24, 34, .97), rgba(2, 8, 13, .98)); }
.battle-scene .bs-stake > span::after { content: ""; position: absolute; left: calc(var(--cut) + 4 * var(--bsu)); right: calc(8 * var(--bsu)); top: calc(3 * var(--bsu)); height: calc(3 * var(--bsu));
  background: linear-gradient(90deg, transparent, var(--tone) 20%, #ffffff 50%, var(--tone) 80%, transparent); box-shadow: 0 0 calc(10 * var(--bsu)) var(--tone); opacity: .9; }
.battle-scene .bs-stake small { display: inline-flex; align-items: center; gap: calc(5 * var(--bsu)); color: color-mix(in srgb, var(--tone) 55%, #cfe3ee); font-size: calc(10.5 * var(--bsu)); letter-spacing: .16em; }
.battle-scene .bs-stake b { margin-top: calc(2 * var(--bsu)); color: #f2fbff; text-shadow: 0 0 calc(10 * var(--bsu)) color-mix(in srgb, var(--tone) 70%, transparent); }
.battle-scene .bs-stake .bs-attack { --tone: #ffb84a; min-width: calc(96 * var(--bsu)); }
.battle-scene .bs-stake .bs-attack b { color: #ffd98a; font-size: calc(34 * var(--bsu)); text-shadow: 0 0 calc(14 * var(--bsu)) rgba(255, 170, 60, .75); }
.battle-scene .bs-stake .bs-oc { --tone: #ff8a2a; display: grid; align-content: center; justify-items: center; gap: calc(4 * var(--bsu)); color: #ffb35c; font-size: calc(12 * var(--bsu)); letter-spacing: .14em;
  background: repeating-linear-gradient(135deg, #ff9a2a 0 calc(6 * var(--bsu)), #2a1606 calc(6 * var(--bsu)) calc(12 * var(--bsu))); }
.battle-scene .bs-stake .bs-oc::before { background: radial-gradient(120% 90% at 50% 0%, rgba(255, 140, 40, .32), transparent 60%), linear-gradient(180deg, rgba(36, 16, 4, .96), rgba(14, 6, 2, .98)); }
.battle-scene .bs-pips { margin-top: calc(5 * var(--bsu)); }
.battle-scene .bs-pips i { background: #0f2a36; box-shadow: inset 0 0 0 1px rgba(79, 224, 255, .18); }
.battle-scene .bs-pips i.on { background: linear-gradient(180deg, #b8f6ff, #33d2ff); box-shadow: 0 0 calc(7 * var(--bsu)) #4fe0ff; }
/* Значки: молния (заряд), прицел (атака), пламя-шеврон (разгон) — кодом, без картинок. */
.bs-ico { display: inline-block; flex: none; width: calc(11 * var(--bsu)); height: calc(13 * var(--bsu)); background: currentColor; }
.bs-ico-charge { color: #6fe8ff; clip-path: polygon(58% 0, 8% 58%, 44% 58%, 34% 100%, 92% 38%, 54% 38%); filter: drop-shadow(0 0 3px #4fe0ff); }
.bs-ico-attack { color: #ffc266; width: calc(13 * var(--bsu)); height: calc(13 * var(--bsu)); background: none; border: calc(2 * var(--bsu)) solid currentColor; border-radius: 50%; position: relative; box-sizing: border-box; }
.bs-ico-attack::before { content: ""; position: absolute; inset: 35%; background: currentColor; border-radius: 50%; }
.bs-ico-oc { color: #ffb35c; width: calc(16 * var(--bsu)); height: calc(10 * var(--bsu)); clip-path: polygon(0 0, 35% 0, 60% 50%, 35% 100%, 0 100%, 25% 50%, 40% 0, 75% 0, 100% 50%, 75% 100%, 40% 100%, 65% 50%); }

/* Плашки эффектов над картами («Сцепка активна», «Атака +4», «Помеха»…) — тот же стиль, что у «Заряд / Атака» (10.10.2026). */
.battle-scene .bs-plates { gap: calc(8 * var(--bsu)); filter: drop-shadow(0 calc(4 * var(--bsu)) calc(8 * var(--bsu)) rgba(0, 0, 0, .6)); }
.battle-scene .bs-plate {
  --tone: #4fe0ff; --cut: calc(8 * var(--bsu));
  position: relative; isolation: isolate; border: 0 !important;
  display: inline-flex; align-items: center; gap: calc(6 * var(--bsu));
  padding: calc(5 * var(--bsu)) calc(12 * var(--bsu)) calc(5 * var(--bsu)) calc(10 * var(--bsu));
  font-size: calc(12.5 * var(--bsu)); font-weight: 800; letter-spacing: .04em; color: #e6f6fc;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background: linear-gradient(115deg, #0e1a21 0%, #4b6674 10%, #d9ecf3 15%, #3a5260 20%, #101c23 40%, #22343e 60%, #8aa6b3 74%, #eef8fc 78%, #3c5563 82%, #0f1b22 100%);
}
.battle-scene .bs-plate::before { content: ""; position: absolute; inset: calc(1.5 * var(--bsu)); z-index: -1; clip-path: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 26%, transparent), transparent 55%), linear-gradient(180deg, rgba(8, 24, 34, .97), rgba(2, 8, 13, .98)); }
.battle-scene .bs-plate::after { content: ""; flex: none; order: -1; width: calc(7 * var(--bsu)); height: calc(7 * var(--bsu)); transform: rotate(45deg); background: var(--tone); box-shadow: 0 0 calc(8 * var(--bsu)) var(--tone); }
.battle-scene .bs-plate.good { --tone: #6dff9f; color: #d6ffe3; }
.battle-scene .bs-plate.bad { --tone: #ff5a64; color: #ffd6d6; }

/* ===================== Экран выбора карты v2 (10.10.2026, утверждённый макет владельца) =====================
   Сцена 1920×1080, масштабируется целиком (--bv2s ставит рендер под размер окна). Рамки — tc-cut-frame (форма arena). */
.app[data-route="BATTLE"]:has(.bv2) > main { padding: 0; max-width: none; }
.battle-screen.bv2 { --cyan:#4fe0ff; --amber:#ffb84a; --oc:#ff8a2a; --red:#ff5a64; --green:#6dff9f;
  position: fixed; inset: 0; z-index: 20; display: block; overflow: hidden; background: #02060a; color: #e8f4fa; max-width: none; margin: 0; padding: 0; }
.bv2 .bv2-bg { position: absolute; inset: -24px; }
.bv2 .bv2-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.42) saturate(1.1) blur(3px); }
.bv2 .bv2-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 60% at 50% 48%, transparent 30%, rgba(0,0,0,.75) 100%), linear-gradient(180deg, rgba(2,6,10,.75), transparent 22%, transparent 70%, rgba(2,6,10,.85)); }
.bv2 .bv2-stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform: translate(-50%, -50%) scale(var(--bv2s, .8)); transform-origin: 50% 50%; }
.bv2 .bv2-stage > * { position: absolute; }
.bv2 [data-tc-cut] { isolation: isolate; filter: drop-shadow(0 16px 26px rgba(0,0,0,.65)); }
.bv2 [data-tc-cut] .tc-cut-glass { background: linear-gradient(180deg, rgba(10,24,32,.84) 0%, rgba(5,12,18,.8) 55%, rgba(8,18,26,.86) 100%); }
.bv2 .red .tc-cut-rim, .bv2 .red .tc-cut-svg, .bv2 .red.tc-cut-rim { filter: hue-rotate(160deg) saturate(1.6); }
.bv2 .bv2-lbl { font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #8fdcff; display: inline-flex; align-items: center; gap: 6px; }
.bv2 .red .bv2-lbl { color: #ff9aa2; } .bv2 .bv2-lbl.amber { color: #ffcf88; } .bv2 .bv2-lbl.hp { color: #8dffb5; } .bv2 .red .bv2-lbl.hp { color: #ff9aa2; }
.bv2 .bv2-lbl em { font-style: normal; color: #8fb3c2; }
.bv2 .bv2-table { left: 360px; top: 280px; width: 1200px; height: 400px; background: radial-gradient(60% 50% at 50% 60%, rgba(79,224,255,.10), transparent 70%); }

/* раунд */
.bv2 .bv2-round { left: 770px; top: 16px; width: 380px; height: 80px; }
.bv2 .bv2-round .tc-cut-body { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px 30px 6px 34px; }
.bv2 .bv2-round .r b { display: block; font-size: 30px; font-weight: 900; white-space: nowrap; } .bv2 .bv2-round .r b small { font-size: 16px; color: #8fb3c2; }
.bv2 .bv2-round .score { font-size: 30px; font-weight: 900; letter-spacing: .05em; }
.bv2 .bv2-timer { justify-self: end; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--cyan) 0 var(--p), rgba(79,224,255,.15) var(--p) 100%); box-shadow: 0 0 14px rgba(79,224,255,.5); }
.bv2 .bv2-timer span { width: 46px; height: 46px; border-radius: 50%; background: #04121b; display: grid; place-items: center; font-weight: 900; font-size: 15px; }
.bv2 .bv2-timer.urgent { background: conic-gradient(var(--red) 0 var(--p), rgba(255,90,100,.15) var(--p) 100%); box-shadow: 0 0 16px rgba(255,90,100,.6); }

/* панели игроков */
.bv2 .bv2-pp { width: 420px; height: 170px; }
.bv2 .bv2-pp.red { right: 28px; top: 20px; } .bv2 .bv2-pp.me { left: 24px; top: 676px; }
.bv2 .bv2-pp .tc-cut-body { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; padding: 12px 24px 24px 22px; }
.bv2 .bv2-pp h3 { margin: 0 0 4px; font-size: 21px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bv2 .bv2-ava { position: relative; width: 112px; height: 128px; clip-path: polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px); background: linear-gradient(115deg, #0e1a21, #4b6674 12%, #e3f3f9 18%, #3a5260 26%, #101c23 50%, #8aa6b3 76%, #eef8fc 80%, #22343e); }
.bv2 .red .bv2-ava { background: linear-gradient(115deg, #210a0d, #7a2a33 12%, #ffd2d6 18%, #6a2a33 26%, #1c0b0e 50%, #b0616b 76%, #ffe6e8 80%, #3a1418); }
.bv2 .bv2-ava img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: cover; object-position: 50% 25%; clip-path: inherit; }
.bv2 .bv2-row { display: flex; justify-content: space-between; align-items: baseline; font-weight: 900; margin-top: 4px; } .bv2 .bv2-row b { font-size: 19px; }
.bv2 .bv2-bar { position: relative; height: 13px; background: #071820; border: 1px solid #2f6a86; margin: 3px 0 2px; }
.bv2 .bv2-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #1fb36b, #8cff6a); box-shadow: 0 0 10px rgba(110,255,150,.5); transition: width .6s; }
.bv2 .red .bv2-bar i { background: linear-gradient(90deg, #c22b37, #ff7a5c); box-shadow: 0 0 10px rgba(255,90,100,.5); }
.bv2 .bv2-pips { display: flex; gap: 3px; margin-top: 5px; }
.bv2 .bv2-pips i { flex: 1; max-width: 16px; height: 11px; transform: skewX(-15deg); background: #0f2a36; box-shadow: inset 0 0 0 1px rgba(79,224,255,.2); }
.bv2 .bv2-pips i.on { background: linear-gradient(180deg, #b8f6ff, #33d2ff); box-shadow: 0 0 7px #4fe0ff; }
.bv2 .bv2-pips i.res { background: linear-gradient(180deg, #ffe0a8, #ffb84a); box-shadow: 0 0 7px #ffb84a; }
.bv2 .bv2-tag { right: 40px; top: 200px; padding: 5px 12px; font-size: 11px; font-weight: 900; letter-spacing: .14em; border: 1px solid var(--amber); color: var(--amber); background: rgba(2,10,16,.85); }

/* сводки сцепок */
.bv2 .bv2-sum { width: 420px; height: 106px; }
.bv2 .bv2-sum.red { right: 30px; top: 240px; } .bv2 .bv2-sum:not(.red) { left: 30px; top: 870px; height: 116px; }
.bv2 .bv2-sum .tc-cut-body { display: grid; align-content: center; gap: 6px; padding: 10px 18px 10px 20px; }
.bv2 .bv2-sumrow { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.bv2 .bv2-sumrow img { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 0 4px rgba(120,220,255,.5)); }
.bv2 .bv2-sumrow .ok { color: var(--green); text-shadow: 0 0 8px rgba(110,255,150,.5); } .bv2 .bv2-sumrow .no { color: #7f9aa8; }

/* карты */
.bv2 .bv2-card { position: relative; display: block; aspect-ratio: 320 / 464; padding: 0; border: 0; background: none; cursor: default; color: inherit; font-family: inherit; text-align: center; transition: transform .2s, filter .2s; }
.bv2 button.bv2-card { cursor: pointer; } .bv2 button.bv2-card:hover:not(:disabled) { transform: translateY(-10px); filter: drop-shadow(0 0 16px rgba(79,224,255,.45)); }
.bv2 .bv2-card:disabled { cursor: default; } .bv2 .bv2-card.used { filter: brightness(.38) saturate(.4); }
.bv2 .bv2-card tc-card-frame { position: absolute; inset: 0; }
.bv2 .bv2-cc { display: flex; flex-direction: column; width: 100%; height: 100%; background: #030e17; }
.bv2 .bv2-cc > img { width: 100%; height: 72%; object-fit: cover; display: block; }
.bv2 .bv2-nm { flex: 1; display: grid; align-content: center; justify-items: center; padding: 0 .6em; line-height: 1.1; }
.bv2 .bv2-nm small { font-size: .6em; font-weight: 800; letter-spacing: .14em; color: var(--fc, #7fdcff); text-transform: uppercase; } .bv2 .bv2-nm b { font-size: 1em; }
.bv2 .bv2-st { display: flex; justify-content: space-between; padding: 0 .8em .45em; font-weight: 900; font-size: 1.05em; }
.bv2 .bv2-st span { color: #8fb3c2; font-size: .5em; letter-spacing: .14em; align-self: center; }
.bv2 .bv2-emb { position: absolute; z-index: 6; left: 7%; top: 5%; width: 21%; aspect-ratio: 1; display: grid; place-items: center; clip-path: polygon(22% 0,100% 0,100% 78%,78% 100%,0 100%,0 22%); background: linear-gradient(135deg, #d9ecf3, #3a5260 40%, #0f1b22 70%, #8aa6b3); }
.bv2 .bv2-emb::before { content: ""; position: absolute; inset: 7%; clip-path: inherit; background: rgba(3,12,18,.92); }
.bv2 .bv2-emb img { position: relative; width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 0 3px rgba(120,220,255,.6)); }
.bv2 .bv2-abil { position: absolute; z-index: 6; left: 7%; right: 7%; top: 56%; display: flex; justify-content: space-between; gap: 4%; }
.bv2 .bv2-chip { --tone: #4fe0ff; display: inline-flex; align-items: center; gap: .3em; height: 1.55em; padding: 0 .45em 0 .35em; font-size: .62em; font-weight: 900; letter-spacing: .04em; color: #fff; white-space: nowrap;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 55%, #04121b), rgba(4,18,27,.92)); border: 1px solid var(--tone); box-shadow: 0 0 .5em color-mix(in srgb, var(--tone) 60%, transparent); clip-path: polygon(.35em 0,100% 0,100% calc(100% - .35em),calc(100% - .35em) 100%,0 100%,0 .35em); }
.bv2 .small .bv2-chip { padding: 0 .3em; height: 1.7em; font-size: .75em; }
.bv2 .bv2-chip.link.on { --tone: #6dff9f; } .bv2 .bv2-chip.link.off { --tone: #5d707a; color: #a9bcc6; }
.bv2 .bv2-lamp { width: .6em; height: .6em; border-radius: 50%; background: currentColor; flex: none; }
.bv2 .on > .bv2-lamp, .bv2 .bv2-chip.on .bv2-lamp { color: #6dff9f; box-shadow: 0 0 .5em #6dff9f; } .bv2 .bv2-chip.off .bv2-lamp { color: #5d707a; }
.bv2 .bv2-ic { display: inline-block; width: 1em; height: 1em; background: #fff; flex: none; }
.bv2 .ic-CHARGE { clip-path: polygon(58% 0, 8% 58%, 44% 58%, 34% 100%, 92% 38%, 54% 38%); }
.bv2 .ic-ARMOR, .bv2 .ic-FIREWALL { clip-path: polygon(50% 0, 100% 15%, 92% 60%, 50% 100%, 8% 60%, 0 15%); }
.bv2 .ic-DRAIN, .bv2 .ic-BURN { clip-path: polygon(50% 100%, 85% 50%, 70% 10%, 30% 10%, 15% 50%); }
.bv2 .ic-BLACKOUT { clip-path: polygon(0 18%, 18% 0, 50% 32%, 82% 0, 100% 18%, 68% 50%, 100% 82%, 82% 100%, 50% 68%, 18% 100%, 0 82%, 32% 50%); }
.bv2 .ic-JAM { clip-path: polygon(0 40%, 20% 20%, 40% 40%, 60% 20%, 80% 40%, 100% 20%, 100% 50%, 80% 70%, 60% 50%, 40% 70%, 20% 50%, 0 70%); }
.bv2 .ic-COPY_PROTOCOL { clip-path: polygon(0 0, 65% 0, 65% 20%, 20% 20%, 20% 65%, 0 65%, 0 0, 35% 35%, 100% 35%, 100% 100%, 35% 100%, 35% 35%); }
.bv2 .ic-BREACH { clip-path: polygon(0 40%, 60% 40%, 60% 15%, 100% 50%, 60% 85%, 60% 60%, 0 60%); }
.bv2 .ic-ATTACK, .bv2 .ic-DAMAGE { clip-path: polygon(45% 0,55% 0,55% 45%,100% 45%,100% 55%,55% 55%,55% 100%,45% 100%,45% 55%,0 55%,0 45%,45% 45%); }
.bv2 .ic-REPAIR { clip-path: polygon(38% 0,62% 0,62% 38%,100% 38%,100% 62%,62% 62%,62% 100%,38% 100%,38% 62%,0 62%,0 38%,38% 38%); }
.bv2 .ic-CORROSION { clip-path: circle(45%); }
.bv2 .ic-OVERCLOCK_COST_MODIFIER { clip-path: polygon(0 0, 35% 0, 60% 50%, 35% 100%, 0 100%, 25% 50%, 40% 0, 75% 0, 100% 50%, 75% 100%, 40% 100%, 65% 50%); }
.bv2 .t-CHARGE { --tone: #4fe0ff; } .bv2 .t-ARMOR, .bv2 .t-FIREWALL { --tone: #7fb8ff; } .bv2 .t-DRAIN, .bv2 .t-COPY_PROTOCOL { --tone: #c07bff; } .bv2 .t-BLACKOUT { --tone: #ff5a64; }
.bv2 .t-JAM { --tone: #ffb84a; } .bv2 .t-BREACH, .bv2 .t-BURN { --tone: #ff7a3c; } .bv2 .t-ATTACK, .bv2 .t-DAMAGE { --tone: #ffd35c; } .bv2 .t-OVERCLOCK_COST_MODIFIER { --tone: #ff9a2a; } .bv2 .t-REPAIR { --tone: #6dff9f; } .bv2 .t-CORROSION { --tone: #8dff6a; }

/* руки */
.bv2 .bv2-opphand { left: 0; right: 0; top: 110px; display: flex; justify-content: center; gap: 18px; }
.bv2 .bv2-opphand .on-table { filter: brightness(.45) saturate(.6); }
.bv2 .bv2-myhand { left: 0; right: 0; top: 860px; display: flex; justify-content: center; gap: 22px; }
.bv2 .bv2-ghost { position: relative; width: 160px; aspect-ratio: 320/464; border: 2px dashed rgba(79,224,255,.45); clip-path: polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px); background: rgba(79,224,255,.04); }
.bv2 .bv2-ghost span { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); padding: 4px 10px; font-size: 11px; font-weight: 900; letter-spacing: .14em; background: rgba(2,10,16,.85); border: 1px solid var(--cyan); color: var(--cyan); }

/* стол */
.bv2 .bv2-cap { top: 276px; width: 206px; text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #8fdcff; }
.bv2 .bv2-cap.me { left: 652px; } .bv2 .bv2-cap.red { left: 1062px; color: #ff9aa2; }
.bv2 .bv2-slot { top: 316px; width: 206px; aspect-ratio: 320/464; }
.bv2 .bv2-slot.me { left: 652px; } .bv2 .bv2-slot.red { left: 1062px; }
.bv2 .bv2-slot .ring { position: absolute; inset: -14px; border: 2px dashed rgba(79,224,255,.35); clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); pointer-events: none; }
.bv2 .bv2-slot.red .ring { border-color: rgba(255,90,100,.35); }
.bv2 .bv2-slotcard { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.bv2 .bv2-slotcard .bv2-card { width: 100% !important; }
.bv2 .bv2-empty { display: grid; place-content: center; text-align: center; gap: 6px; width: 100%; height: 100%; color: #8fdcff; background: rgba(79,224,255,.04); }
.bv2 .bv2-empty b { font-size: 18px; letter-spacing: .06em; text-transform: uppercase; } .bv2 .bv2-empty small { color: #7f9aa8; font-size: 13px; }
.bv2 .bv2-empty.red { color: #ff9aa2; background: rgba(255,90,100,.04); }
.bv2 .bv2-lock { position: absolute; left: 50%; bottom: -50px; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; white-space: nowrap; padding: 7px 18px 6px; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #ff9aa2;
  background: linear-gradient(180deg, rgba(40,8,12,.92), rgba(14,3,5,.95)); border: 1px solid rgba(255,90,100,.6); clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); }
.bv2 .bv2-lock i { width: 14px; height: 12px; background: var(--red); clip-path: polygon(15% 40%, 15% 20%, 30% 0, 70% 0, 85% 20%, 85% 40%, 100% 40%, 100% 100%, 0 100%, 0 40%, 30% 40%, 30% 25%, 38% 14%, 62% 14%, 70% 25%, 70% 40%); }
.bv2 .bv2-vs { left: 932px; top: 436px; width: 56px; height: 56px; display: grid; place-items: center; font-weight: 900; font-size: 22px; color: #fff; text-shadow: 0 0 12px var(--cyan); }
.bv2 .bv2-vs::before { content: ""; position: absolute; inset: 0; transform: rotate(45deg); border: 2px solid rgba(79,224,255,.7); box-shadow: 0 0 16px rgba(79,224,255,.5), inset 0 0 12px rgba(79,224,255,.3); background: rgba(4,18,27,.8); }
.bv2 .bv2-vs span { position: relative; }

/* панели «что делает карта» */
.bv2 .bv2-infobox { top: 344px; } .bv2 .bv2-infobox.me { left: 362px; } .bv2 .bv2-infobox.red { left: 1292px; top: 358px; }
.bv2 .bv2-info { position: relative; width: 268px; height: 284px; }
.bv2 .bv2-info .tc-cut-body { padding: 16px 18px 14px 20px; display: grid; align-content: start; gap: 9px; }
.bv2 .bv2-info h4 { margin: 0; font-size: 17px; font-weight: 900; line-height: 1.15; }
.bv2 .bv2-ab { --tone: var(--cyan); padding: 8px 10px 8px 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 16%, transparent), rgba(2,10,16,.6)); border-left: 3px solid var(--tone); clip-path: polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%); text-align: left; }
.bv2 .bv2-ab.link.on { --tone: var(--green); } .bv2 .bv2-ab.link.off { --tone: #5d707a; }
.bv2 .bv2-ab .h { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--tone) 65%, #cfe3ee); }
.bv2 .bv2-ab .h em { font-style: normal; font-size: 12px; letter-spacing: .06em; text-transform: none; color: #fff; }
.bv2 .bv2-ab p { margin: 4px 0 0; font-size: 13px; line-height: 1.3; color: #d6e8ef; }
.bv2 .bv2-ab .bv2-st { display: inline-block; margin-top: 5px; padding: 2px 6px; font-size: 10px; font-weight: 900; letter-spacing: .12em; border: 1px solid currentColor; }
.bv2 .bv2-ab .bv2-st.on { color: var(--green); } .bv2 .bv2-ab .bv2-st.off { color: #7f9aa8; }

/* пульт */
.bv2 .bv2-console { left: 462px; top: 676px; width: 920px; height: 170px; }
.bv2 .bv2-console .tc-cut-body { display: grid; grid-template-columns: 1.3fr 1fr 1fr; align-items: stretch; padding: 18px 26px 16px 30px; }
.bv2 .bv2-console .col { position: relative; padding: 4px 18px; display: flex; flex-direction: column; justify-content: center; }
.bv2 .bv2-console .col + .col::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, transparent, rgba(120,220,255,.55), transparent); }
.bv2 .bv2-seg { display: flex; gap: 4px; margin-top: 12px; }
.bv2 .bv2-seg i { flex: 1; height: 30px; transform: skewX(-16deg); background: linear-gradient(180deg, #0c2430, #071820); box-shadow: inset 0 0 0 1px rgba(79,224,255,.22), inset 0 -6px 8px rgba(0,0,0,.4); }
.bv2 .bv2-seg i.on { background: linear-gradient(180deg, #e6fdff 0%, #6fe8ff 35%, #1aa9e0 100%); box-shadow: 0 0 10px #4fe0ff, inset 0 2px 0 rgba(255,255,255,.7); }
.bv2 .bv2-ctl { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.bv2 .bv2-mbtn { position: relative; isolation: isolate; width: 46px; height: 40px; display: grid; place-items: center; border: 0; font: 900 24px/1 inherit; color: #eaffff; cursor: pointer;
  clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); background: linear-gradient(115deg, #24343e, #c9dde6 18%, #3a5260 30%, #10202a 60%, #8aa6b3 85%, #22343e); }
.bv2 .bv2-mbtn::before { content: ""; position: absolute; inset: 2px; z-index: -1; clip-path: inherit; background: linear-gradient(180deg, #0f4a64, #062130); }
.bv2 .bv2-mbtn:disabled { opacity: .4; cursor: default; }
.bv2 .bv2-hex { position: relative; isolation: isolate; width: 74px; height: 64px; display: grid; place-items: center; font-size: 36px; font-weight: 900; color: #fff; text-shadow: 0 0 12px #4fe0ff;
  clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); background: linear-gradient(115deg, #3a5260, #e3f3f9 20%, #4b6674 35%, #0f1b22 60%, #7d98a5 85%, #22343e); }
.bv2 .bv2-hex::before { content: ""; position: absolute; inset: 3px; z-index: -1; clip-path: inherit; background: radial-gradient(circle at 50% 30%, rgba(79,224,255,.35), transparent 70%), #04131c; }
.bv2 .bv2-ocmod { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.bv2 .bv2-ocbtn { position: relative; width: 96px; height: 96px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; color: #fff; font-family: inherit;
  background: conic-gradient(from 0deg, #ff9a2a, #3a1b05 12%, #ff9a2a 25%, #3a1b05 37%, #ff9a2a 50%, #3a1b05 62%, #ff9a2a 75%, #3a1b05 87%, #ff9a2a); box-shadow: 0 0 18px rgba(255,138,42,.4); filter: saturate(.7) brightness(.85); transition: filter .2s, box-shadow .2s; }
.bv2 .bv2-ocbtn::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #ffcf7a 0%, #ff8a1a 38%, #7a3300 75%, #2a1203 100%); box-shadow: inset 0 0 16px rgba(0,0,0,.6), 0 0 0 2px rgba(255,200,120,.6); }
.bv2 .bv2-ocbtn.active { filter: none; box-shadow: 0 0 34px rgba(255,138,42,.95), 0 0 70px rgba(255,138,42,.45); animation: bv2-oc 1.1s ease-in-out infinite alternate; }
@keyframes bv2-oc { to { box-shadow: 0 0 44px rgba(255,160,60,1), 0 0 90px rgba(255,138,42,.6); } }
.bv2 .bv2-ocbtn:disabled { opacity: .45; cursor: default; }
.bv2 .bv2-ocbtn > span { position: relative; font-size: 13px; font-weight: 900; letter-spacing: .12em; text-shadow: 0 0 8px #ff9a2a, 0 1px 2px #000; margin-top: 6px; }
.bv2 .bv2-ocbtn > b { position: absolute; bottom: 13px; font-size: 10px; letter-spacing: .14em; color: #ffe1b0; }
.bv2 .bv2-ocbtn .chev { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 26px; height: 14px; background: #fff3d8; clip-path: polygon(0 0, 35% 0, 60% 50%, 35% 100%, 0 100%, 25% 50%, 40% 0, 75% 0, 100% 50%, 75% 100%, 40% 100%, 65% 50%); }
.bv2 .bv2-chips2 { display: grid; gap: 8px; }
.bv2 .bv2-chipx { display: inline-flex; align-items: center; padding: 6px 12px; font-size: 13px; font-weight: 800; color: #ffe0b8; clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); background: linear-gradient(90deg, rgba(255,138,42,.28), rgba(40,18,4,.9)); border-left: 3px solid #ff9a2a; }
.bv2 .bv2-chipx.cost { color: #cfeefa; background: linear-gradient(90deg, rgba(79,224,255,.18), rgba(4,18,27,.9)); border-left-color: var(--cyan); }
.bv2 .bv2-atk { text-align: center; align-items: center; }
.bv2 .bv2-atk .f { font-size: 15px; font-weight: 800; color: #cfe3ee; } .bv2 .bv2-atk .f em { font-style: normal; color: var(--cyan); }
.bv2 .bv2-atk > b { display: block; margin-top: 2px; font-size: 62px; line-height: 1; font-weight: 900; color: #ffd98a; text-shadow: 0 0 22px rgba(255,170,60,.85), 0 2px 0 #7a4a10; }
.bv2 .bv2-sub { display: flex; gap: 14px; margin-top: 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #8fb3c2; text-transform: uppercase; } .bv2 .bv2-sub b { color: #fff; font-size: 13px; }
.bv2 .bv2-hint { display: grid; place-content: center; gap: 8px; height: 100%; text-align: center; } .bv2 .bv2-hint b { font-size: 22px; letter-spacing: .08em; text-transform: uppercase; color: #8fdcff; } .bv2 .bv2-hint small { font-size: 14px; color: #a9c2cf; }

/* кнопка */
.bv2 .bv2-go { left: 1406px; top: 712px; width: 340px; height: 100px; border: 0; padding: 0; background: none; cursor: pointer; color: #fff; font-family: inherit; }
.bv2 .bv2-go .tc-cut-glass { background: linear-gradient(180deg, rgba(18,92,124,.92), rgba(5,30,44,.94)); }
.bv2 .bv2-go .tc-cut-body { display: grid; place-items: center; }
.bv2 .bv2-go b { display: block; font-size: 22px; font-weight: 900; letter-spacing: .16em; text-shadow: 0 0 14px rgba(79,224,255,.9); }
.bv2 .bv2-go small { display: block; margin-top: 4px; font-size: 11px; letter-spacing: .2em; color: #8fdcff; }
.bv2 .bv2-go:hover:not(:disabled) .tc-cut-glass { background: linear-gradient(180deg, rgba(26,120,160,.95), rgba(8,40,58,.95)); }
.bv2 .bv2-go:disabled { cursor: default; } .bv2 .bv2-go.locked b { color: #8dffb5; text-shadow: 0 0 14px rgba(110,255,150,.8); }
.bv2 .bv2-wait { left: 1406px; top: 822px; width: 340px; padding: 8px 14px; display: grid; gap: 2px; text-align: center; background: rgba(2,10,16,.85); border: 1px solid rgba(110,255,150,.5); }
.bv2 .bv2-wait strong { font-size: 13px; letter-spacing: .14em; color: var(--green); } .bv2 .bv2-wait span { font-size: 12px; color: #a9c2cf; }
.bv2 .bv2-err { left: 462px; top: 640px; width: 920px; padding: 8px 14px; background: rgba(40,8,12,.92); border-left: 3px solid var(--red); color: #ffd0d0; font-weight: 700; }

/* осмотр карты */
.bv2 .bv2-inspect { inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(1,4,8,.72); backdrop-filter: blur(3px); }
.bv2 .bv2-inspect-in { position: relative; display: flex; gap: 30px; align-items: center; }
.bv2 .bv2-inspect .bv2-info { height: 300px; }
.bv2 .bv2-close { position: absolute; right: 0; bottom: -58px; padding: 10px 22px; border: 1px solid rgba(79,224,255,.7); background: rgba(4,18,27,.9); color: #eaffff; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.bv2 .bv2-card { height: auto !important; border-radius: 0; overflow: visible; }
.bv2 .bv2-console.hint .tc-cut-body { display: block; padding: 0; }
.bv2 .bv2-console.hint .bv2-hint { height: 100%; }
.bv2 .bv2-myhand { top: 856px; }
.bv2 .bv2-ghost { width: 150px; }
.bv2 .bv2-sum:not(.red) { top: 862px; height: auto; }

/* ===== Обучение v2 (10.10.2026): панель советника на экране выбора v2 (свободный верхний левый угол) ===== */
.bv2 .bv2-guide { left: 24px; top: 20px; width: 640px; height: 236px; }
.bv2 .bv2-guide.quiet { height: 176px; }
.bv2 .bv2-guide .tc-cut-body { display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: start; padding: 20px 26px 22px 22px; }
/* лицо советника — кусок плашки training-advisor-live.png (1916×821), равномерный масштаб 0.33, без растяжения */
.bv2 .bv2-guide-face { display: block; width: 112px; height: 128px; background: #04121b url('/app/client/assets/ui/training/training-advisor-live.png') -33px -50px / 632px 271px no-repeat; clip-path: polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px); box-shadow: 0 0 0 2px rgba(79,224,255,.45); }
.bv2 .bv2-guide-copy { display: grid; gap: 10px; min-width: 0; }
.bv2 .bv2-guide-steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bv2 .bv2-guide-steps li { width: 56px; height: 6px; transform: skewX(-20deg); background: #0f2a36; box-shadow: inset 0 0 0 1px rgba(79,224,255,.3); }
.bv2 .bv2-guide-steps li.done { background: #2a8fb0; } .bv2 .bv2-guide-steps li.on { background: linear-gradient(90deg, #b8f6ff, #33d2ff); box-shadow: 0 0 8px #4fe0ff; }
.bv2 .bv2-guide-copy p { margin: 0; font-size: 16.5px; line-height: 1.42; color: #e3f2f8; }
.bv2 .bv2-guide-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.bv2 .bv2-gbtn { padding: 7px 12px; border: 1px solid rgba(79,224,255,.55); background: rgba(4,18,27,.85); color: #bfefff; font-size: 12px; font-weight: 800; letter-spacing: .06em; cursor: pointer; }
.bv2 .bv2-gbtn:hover { border-color: #8ff0ff; color: #fff; box-shadow: 0 0 10px rgba(79,224,255,.35); }
.bv2 .bv2-gbtn.exit { border-color: rgba(255,154,162,.5); color: #ffc3c8; margin-left: auto; }
.bv2 .bv2-help-in { position: relative; width: 620px; height: 260px; }
.bv2 .bv2-help-in .tc-cut-body { display: grid; align-content: start; gap: 14px; padding: 28px 34px; }
.bv2 .bv2-help-in p { margin: 0; font-size: 18px; line-height: 1.5; color: #e3f2f8; }
.bv2 .bv2-help .bv2-close { right: 0; bottom: -58px; }
/* 4 фракции в руке (бывает и в обычных боях) — сводка сцепок плотнее, сводка соперника чуть выше, его справка чуть ниже: без наложений */
.bv2 .bv2-sum.many .tc-cut-body { gap: 0; padding-top: 6px; padding-bottom: 8px; }
.bv2 .bv2-sum.many .bv2-sumrow { font-size: 13px; height: 22px; }
.bv2 .bv2-sum.many .bv2-sumrow img { width: 19px; height: 19px; }
.bv2 .bv2-sum.red.many { top: 232px; }
.bv2 .bv2-infobox.red { top: 372px; }
/* Прогресс новичка — 2 боя (обучение v2) */
.training-progress-panel ol.steps-2 { grid-template-columns: repeat(2, 1fr); }
.training-progress-panel ol.steps-2::before { left: 25%; right: 25%; }
.training-progress-panel li.done i { border-color: #3be9ff; background: #0b5566; color: #dffcff; }
.match-result-screen .result-primary ~ h2 { margin-top: 30px; }
/* Автопереход: кнопку «Следующий раунд» не показываем вовсе (её нажимает сам автопереход), 10.10.2026 */
.battle-scene[data-auto-advance="1"] .bs-continue { visibility: hidden; pointer-events: none; }

/* ===== Городские операции v1 (11.10.2026) — на материале событий районов (ce-*, рамки arena / ctbtn) ===== */
.ce-content.co-content { width:min(100%,calc(1380 * var(--ce))); }
.co-head { display:flex; align-items:flex-end; justify-content:space-between; gap:calc(20 * var(--ce)); }
.co-head .ce-heading > span { max-width:calc(760 * var(--ce)); }
.co-limits { display:flex; gap:calc(8 * var(--ce)); padding-bottom:calc(8 * var(--ce)); }
.co-limits > div { min-width:calc(150 * var(--ce)); padding:calc(9 * var(--ce)) calc(14 * var(--ce)); border:1px solid #2aa9c5; background:linear-gradient(180deg,#06222ee8,#03111ae8); clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px)); }
.co-limits small { display:block; color:#8fd6e8; font-size:clamp(10px,calc(11 * var(--ce)),13px); letter-spacing:.08em; text-transform:uppercase; }
.co-limits b { display:block; margin-top:2px; font-size:clamp(16px,calc(24 * var(--ce)),28px); color:#f0fbff; }
.co-pano { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
/* активная операция / перехват */
.co-active { min-height:calc(250 * var(--ce)); }
.co-active > .tc-cut-body { overflow:hidden; min-height:calc(250 * var(--ce)); clip-path:polygon(1.4% 3%,98.2% 3%,99.3% 12%,99.3% 90%,98.2% 97%,1.4% 97%,.7% 89%,.7% 12%); }
.co-active .co-pano { left:auto; width:62%; }
.co-shade { position:absolute; inset:0; background:linear-gradient(90deg,#03121bf7 0%,#03121bf0 40%,#03121b80 58%,transparent 78%); }
.co-active-copy { position:relative; z-index:1; width:60%; padding:calc(22 * var(--ce)) calc(34 * var(--ce)); display:grid; gap:calc(8 * var(--ce)); }
.co-active-copy small { color:#45eeff; font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:clamp(10px,calc(12 * var(--ce)),14px); }
.co-active-copy h2 { margin:0; font-size:calc(34 * var(--ce)); font-weight:900; line-height:1.1; }
.co-status { color:#ffd27a; font-size:clamp(13px,calc(18 * var(--ce)),21px); }
.co-timer { margin-left:6px; padding:1px 8px; border:1px solid #ffb84a; color:#ffe2a8; font-variant-numeric:tabular-nums; }
.co-active-copy p { margin:0; color:#d7e9f2; font-size:clamp(11px,calc(14 * var(--ce)),16px); line-height:1.45; }
.co-intercept { font-weight:800; } .co-intercept.warn { color:#ffcf6a !important; } .co-intercept.good { color:#8ef1c7 !important; } .co-intercept.bad { color:#ff9f95 !important; }
.co-reward b { color:#8ef1c7; }
.co-steps { display:flex; gap:calc(8 * var(--ce)); margin:calc(2 * var(--ce)) 0; padding:0; list-style:none; }
.co-steps li { display:flex; align-items:center; gap:6px; padding:calc(5 * var(--ce)) calc(12 * var(--ce)); border:1px solid #2b5d6e; background:#04141cd9; color:#8fb3c2; font-size:clamp(10px,calc(12 * var(--ce)),14px); font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.co-steps li i { width:9px; height:9px; transform:rotate(45deg); background:#2b5d6e; }
.co-steps li.done { border-color:#3fbf8f; color:#bff5dc; } .co-steps li.done i { background:#4fe0a0; }
.co-steps li.current { border-color:#45eeff; color:#eafcff; box-shadow:0 0 10px rgba(69,238,255,.35); } .co-steps li.current i { background:#45eeff; }
.co-cta { margin-top:calc(4 * var(--ce)); }
.co-cta .ce-button.co-go { width:calc(260 * var(--ce)); min-height:calc(52 * var(--ce)); font-size:clamp(12px,calc(15 * var(--ce)),17px); }
.co-cta .ce-button.co-go > .tc-cut-body { min-height:calc(52 * var(--ce)); }
/* районы */
.co-districts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:calc(12 * var(--ce)); }
.co-district > .tc-cut-body { display:flex; flex-direction:column; height:100%; padding:calc(12 * var(--ce)) calc(14 * var(--ce)) calc(14 * var(--ce)); }
.co-district-art { position:relative; height:calc(120 * var(--ce)); overflow:hidden; clip-path:polygon(4% 0,96% 0,100% 12%,100% 100%,0 100%,0 12%); }
.co-district-copy { flex:1; padding:calc(10 * var(--ce)) calc(6 * var(--ce)) 0; display:grid; align-content:start; gap:calc(5 * var(--ce)); }
.co-district-copy h3 { margin:0; font-size:calc(24 * var(--ce)); font-weight:900; text-transform:uppercase; }
.co-district-copy em { font-style:normal; color:#45eeff; font-weight:800; font-size:clamp(11px,calc(14 * var(--ce)),16px); }
.co-district-copy p { margin:0; color:#d2e5ee; font-size:clamp(10px,calc(13 * var(--ce)),15px); line-height:1.4; }
.co-district-copy p span { color:#8fb3c2; }
.co-rule { color:#ffd27a !important; }
.co-district-cta { padding:calc(10 * var(--ce)) calc(4 * var(--ce)) 0; }
/* списки: чужие операции и итоги */
.co-lists { display:grid; grid-template-columns:1fr 1fr; gap:calc(12 * var(--ce)); }
.co-list > .tc-cut-body { padding:calc(16 * var(--ce)) calc(24 * var(--ce)); display:grid; gap:calc(8 * var(--ce)); align-content:start; }
.co-list h3 { margin:0 0 calc(2 * var(--ce)); font-size:clamp(12px,calc(17 * var(--ce)),20px); font-weight:800; }
.co-empty { margin:0; color:#a9c2cf; font-size:clamp(11px,calc(13 * var(--ce)),15px); line-height:1.45; }
.co-alert { display:grid; grid-template-columns:1fr calc(190 * var(--ce)); gap:calc(10 * var(--ce)); align-items:center; padding:calc(8 * var(--ce)) 0; border-top:1px solid #1f4a5a; }
.co-alert b, .co-result b { display:block; font-size:clamp(11px,calc(14 * var(--ce)),16px); }
.co-alert span, .co-result span { display:block; color:#a9c2cf; font-size:clamp(10px,calc(12 * var(--ce)),14px); margin-top:2px; }
.co-alert span .co-timer { margin-left:0; }
.co-result { padding:calc(7 * var(--ce)) 0 calc(7 * var(--ce)) calc(12 * var(--ce)); border-left:3px solid #2b5d6e; }
.co-result.good { border-left-color:#4fe0a0; } .co-result.good b { color:#bff5dc; }
.co-result.bad { border-left-color:#ff7a6e; } .co-result.bad b { color:#ffc0b8; }
/* оповещение в городе и боевом центре */
.co-toast { position:fixed; z-index:60; bottom:18px; left:calc(50% + 100px); transform:translateX(-50%); display:flex; align-items:center; gap:16px; max-width:min(720px,calc(100vw - 32px)); padding:12px 14px 12px 18px; border:1px solid #ffb84a; background:linear-gradient(180deg,#2a1a06f2,#140c03f2); color:#fff3dc; box-shadow:0 8px 24px #000a,0 0 18px rgba(255,184,74,.25); clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px)); }
.co-toast.hunt { border-color:#45eeff; background:linear-gradient(180deg,#062633f2,#03121af2); color:#eafcff; box-shadow:0 8px 24px #000a,0 0 18px rgba(69,238,255,.25); }
.co-toast b { display:block; font-size:15px; } .co-toast span { display:block; margin-top:2px; font-size:13px; opacity:.85; } .co-toast i { font-style:normal; font-variant-numeric:tabular-nums; }
.co-toast-btn { flex:none; padding:9px 16px; border:1px solid currentColor; background:#ffffff14; color:inherit; font-weight:900; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.co-toast-btn:hover { background:#ffffff26; }
@media (max-width: 900px) {
  .co-toast { left:50%; bottom:84px; }
  .co-head { flex-direction:column; align-items:stretch; }
  .co-districts { grid-template-columns:1fr 1fr; }
  .co-lists { grid-template-columns:1fr; }
  .co-active-copy { width:100%; } .co-active .co-pano { width:100%; opacity:.35; }
}
/* Экран обучения на узких ПК (1366): тексты трёх плашек этапов помещаются в плашку (11.10.2026) */
@media (max-width: 1500px) and (min-width: 769px) {
  .training-visual-stage h2 { margin-bottom: 3px; font-size: 13px; }
  .training-visual-stage p { max-width: none; font-size: 10px; line-height: 1.22; }
}
/* Быстрый матч: плашка фракции на картах колоды, как в коллекции и в бою (11.10.2026). Размер — доля ширины карты. */
.qm-card-content > .qm-card-art { position:relative; display:block; width:100%; height:67%; overflow:hidden; }
.qm-card-content > .qm-card-art > img { width:100%; height:100%; object-fit:cover; display:block; }
.faction-corner.faction-corner-qm { left:0; top:0; width:38%; height:auto; aspect-ratio:63 / 62; }
.faction-corner.faction-corner-qm > img { left:14.3%; top:12.9%; width:57%; height:58%; }

/* Эмблема организации (11.10.2026): настройки главы, жалобы в списке, модерация администратора. */
.org-emblem-settings { display: flex; gap: 16px; align-items: flex-start; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid #1d4a5b; max-width: 720px; }
.org-emblem-preview { flex: none; width: 96px; height: 96px; display: grid; place-items: center; border: 1px solid #287d99; background: #02090e; }
.org-emblem-preview.has-emblem { border-color: #3fd6f0; box-shadow: 0 0 14px #1fc3e655; }
.org-emblem-preview > img { width: 100%; height: 100%; object-fit: contain; }
.org-emblem-placeholder { display: flex; gap: 2px; }
.org-emblem-placeholder img { width: 30px; height: auto; }
.org-emblem-copy { min-width: 0; }
.org-emblem-copy h3 { margin: 0 0 6px; }
.org-emblem-copy p { margin: 0 0 8px; color: #8eb1c0; font-size: 12px; }
.org-emblem-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.org-emblem-actions .org-act { margin-left: 0; }
.org-emblem-upload { position: relative; display: inline-flex; align-items: center; overflow: hidden; }
.org-emblem-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.org-emblem-upload.is-disabled { opacity: .5; }
.org-emblem-upload:focus-within { outline: 1px solid #5fe0f6; }
.org-dir-emblem { float: left; width: 40px; height: 40px; object-fit: contain; margin: 0 10px 4px 0; border: 1px solid #287d99; background: #02090e; }
.org-emblem-report { min-height: 0; margin-top: 4px; padding: 2px 8px; border: 1px solid #5a3a3a; background: transparent; color: #e7a4a4; font-size: 10px; cursor: pointer; }
.org-emblem-report:hover:not(:disabled) { border-color: #ff8a8a; color: #ffd2d2; }
.org-emblem-moderation { margin: 14px 0; padding: 12px; border: 1px solid #6b3434; background: #1a0a0d99; max-width: 720px; }
.org-emblem-moderation h3 { margin: 0 0 8px; color: #ffb3b3; }
.org-emblem-moderation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.org-emblem-moderation li { display: flex; align-items: center; gap: 10px; }
.org-emblem-moderation li img { width: 44px; height: 44px; object-fit: contain; border: 1px solid #6b3434; background: #02090e; }
.org-emblem-moderation li span { flex: 1; min-width: 0; display: grid; }
.org-emblem-moderation li small { color: #e7a4a4; }
@media (max-width: 650px) { .org-emblem-settings { flex-direction: column; } }

/* 15.10.2026: клан в сборке колоды читается значком (те же значки, что в полосе активной колоды). */
.deck-card-art > .deck-card-emblem { position: absolute; top: 6px; left: 6px; width: 30px; height: 30px; object-fit: contain; padding: 3px; border: 1px solid color-mix(in srgb, var(--faction-accent) 70%, #294e61); background: #050c12d9; box-shadow: 0 0 8px color-mix(in srgb, var(--faction-accent) 45%, transparent); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); z-index: 2; pointer-events: none; }
.deck-card-meta > i img { width: 15px; height: 15px; object-fit: contain; }
.deck-card-meta > small { font-size: 7px !important; letter-spacing: .04em; }
.deck-slot button strong { display: flex; align-items: center; gap: 6px; }
.deck-slot-emblem { flex: 0 0 auto; width: 18px; height: 18px; object-fit: contain; }
.deck-faction-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.deck-faction-pick button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 6px; border: 1px solid #294e61; background: linear-gradient(180deg, #13232b, #08131a); color: #8fb0bf; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.deck-faction-pick button img { width: 22px; height: 22px; object-fit: contain; opacity: .75; }
.deck-faction-pick button:hover { border-color: color-mix(in srgb, var(--faction-accent) 70%, #294e61); color: #e4f7ff; }
.deck-faction-pick button:hover img, .deck-faction-pick button.selected img { opacity: 1; }
.deck-faction-pick button.selected { border-color: var(--faction-accent); color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--faction-accent) 22%, #13232b), #08131a); box-shadow: inset 0 0 10px color-mix(in srgb, var(--faction-accent) 30%, transparent); }
.deck-pool-controls { grid-template-columns: 1fr !important; } .deck-pool-controls > label:has(select[data-deck-faction]) { display: none; }

/* 15.10.2026: «Стартовая рука» — замена одной карты в начале боя. */
.bv2 .bv3-mull { z-index: 60; }
.bv2 .bv3-mull-in { width: 980px; height: 560px; }
.bv2 .bv3-mull-in .tc-cut-body { justify-items: center; text-align: center; gap: 12px; padding: 26px 34px 28px; }
.bv2 .bv3-mull-in p { max-width: 760px; font-size: 16px; }
.bv3-mull-cards { display: flex; gap: 18px; justify-content: center; margin: 4px 0; }
.bv3-mull-card { position: relative; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .18s ease, filter .18s ease; }
.bv3-mull-card:hover:not(:disabled) { transform: translateY(-6px); }
.bv3-mull-card .bv3-mull-mark { position: absolute; inset: 0; display: grid; place-items: center; font-size: 64px; color: #ffd27a; text-shadow: 0 0 18px #ff9d2e; background: rgba(4, 8, 14, .55); opacity: 0; transition: opacity .18s ease; pointer-events: none; }
.bv3-mull-card.marked { transform: translateY(-6px); filter: drop-shadow(0 0 14px rgba(255, 170, 60, .75)); }
.bv3-mull-card.marked .bv3-mull-mark { opacity: 1; }
.bv3-mull-note { color: #8fb0bf; font-size: 12px; letter-spacing: .04em; }
.bv3-mull-btns { display: flex; gap: 16px; margin-top: 2px; }
/* Кнопки — как у ежедневной награды (одобрено владельцем): срезанные уголки, металл/неон. */
.bv2 .bv3-mull-btns button { min-width: 230px; min-height: 46px; padding: 10px 26px; border: 0; font: 900 14px system-ui, Segoe UI, sans-serif; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.bv2 .bv3-mull-btns .bv3-mull-keep { border: 1px solid #52707e; background: linear-gradient(130deg, #182a34, #0a1721); color: #a6c1cf; }
.bv2 .bv3-mull-btns .bv3-mull-keep:hover:not(:disabled) { color: #fff; border-color: #7fb3c6; }
.bv2 .bv3-mull-btns .bv3-mull-go { border-top: 1px solid #d6fbff; background: linear-gradient(180deg, #2cc6ea, #0b6f8c); color: #f2fdff; box-shadow: 0 0 22px #3fe0ff55; text-shadow: 0 1px 2px #0008; }
.bv2 .bv3-mull-btns .bv3-mull-go:hover:not(:disabled) { filter: brightness(1.15); }
.bv2 .bv3-mull-btns button:disabled { opacity: .45; cursor: default; filter: grayscale(.6); }
.deck-battle-rule { margin: 8px 0 0; padding: 8px 10px; border-left: 2px solid #54dce3; background: #061019b8; color: #a9c7d4; font-size: 11px; line-height: 1.45; }
.battle-leave-saved-dialog .battle-surrender-yes { background:linear-gradient(180deg,#0a4257,#061b28); border-color:#4dbbd5; color:#e9fbff; }