/* HETMAN / WARIACJE — sharp four-territory interface
   Derived from the supplied colour studies: flat structural planes, visible
   construction rails, no rounded UI and four territorial colours. */
:root {
  --variation-paper: #dce9ea;
  --variation-paper-bright: #eef6f6;
  --variation-ink: #26383a;
  --variation-muted: #607579;
  --variation-line: rgba(47, 74, 78, .24);
  --variation-silver: #a9afb0;
  --variation-blue: #039bd7;
  --variation-red: #ed1425;
  --variation-green: #0b9e57;
  --variation-yellow: #ffe21a;
  --variation-shadow: 9px 12px 0 rgba(55, 78, 81, .11);
  --variation-grid: 36px;
  color-scheme: light;
  background: var(--variation-paper);
  color: var(--variation-ink);
  font-family: Bahnschrift, "Segoe UI Variable Display", "Aptos Display", "Segoe UI", sans-serif;
}

html, body { min-width: 0; min-height: 100%; background: var(--variation-paper); color: var(--variation-ink); }
body { overflow: hidden; }
body::before, body::after { display: none; }
.desktop-shell *, .desktop-shell *::before, .desktop-shell *::after, .modal-layer *, .toast { border-radius: 0 !important; }

#prism-field {
  background:
    linear-gradient(90deg, transparent 0 11%, rgba(76, 105, 108, .13) 11.1% 11.16%, transparent 11.3% 88.7%, rgba(76, 105, 108, .13) 88.8% 88.86%, transparent 89%),
    linear-gradient(60deg, transparent 49.65%, rgba(76, 105, 108, .1) 49.8% 50.1%, transparent 50.25%) 0 0 / 140px 121px,
    linear-gradient(-60deg, transparent 49.65%, rgba(76, 105, 108, .08) 49.8% 50.1%, transparent 50.25%) 0 0 / 140px 121px,
    var(--variation-paper);
}
#prism-field::before {
  inset: 0;
  opacity: .7;
  background:
    linear-gradient(90deg, transparent 0 49.8%, rgba(255,255,255,.62) 49.9% 50.1%, transparent 50.2%),
    linear-gradient(60deg, transparent 49.75%, rgba(255,255,255,.64) 49.85% 50.1%, transparent 50.2%);
  mask-image: linear-gradient(90deg, transparent, black 21%, black 79%, transparent);
  animation: none;
}
#prism-field::after { display: none; }

#falling-triangles { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
#falling-triangles i { position: absolute; top: -16vh; display: block; width: 32px; height: 42px; opacity: .72; clip-path: polygon(50% 0, 100% 100%, 0 100%); animation: triangle-fall 18s linear infinite; }
#falling-triangles i:nth-child(1) { left: 4%; width: 18px; height: 28px; background: var(--variation-yellow); animation-delay: -3s; }
#falling-triangles i:nth-child(2) { left: 13%; width: 38px; height: 55px; background: var(--variation-blue); animation-delay: -11s; animation-duration: 23s; }
#falling-triangles i:nth-child(3) { left: 24%; width: 22px; height: 35px; background: var(--variation-red); animation-delay: -17s; animation-duration: 20s; }
#falling-triangles i:nth-child(4) { left: 33%; width: 42px; height: 60px; background: var(--variation-green); animation-delay: -6s; animation-duration: 26s; }
#falling-triangles i:nth-child(5) { left: 43%; width: 24px; height: 39px; background: var(--variation-yellow); animation-delay: -14s; animation-duration: 17s; }
#falling-triangles i:nth-child(6) { left: 52%; width: 15px; height: 26px; background: var(--variation-blue); animation-delay: -8s; animation-duration: 21s; }
#falling-triangles i:nth-child(7) { left: 62%; width: 48px; height: 68px; background: var(--variation-red); animation-delay: -18s; animation-duration: 28s; }
#falling-triangles i:nth-child(8) { left: 71%; width: 20px; height: 32px; background: var(--variation-green); animation-delay: -2s; animation-duration: 18s; }
#falling-triangles i:nth-child(9) { left: 82%; width: 35px; height: 50px; background: var(--variation-yellow); animation-delay: -13s; animation-duration: 24s; }
#falling-triangles i:nth-child(10) { left: 91%; width: 19px; height: 30px; background: var(--variation-blue); animation-delay: -9s; animation-duration: 19s; }
#falling-triangles i:nth-child(11) { left: 7%; width: 28px; height: 40px; background: var(--variation-red); animation-delay: -21s; animation-duration: 30s; }
#falling-triangles i:nth-child(12) { left: 29%; width: 14px; height: 24px; background: var(--variation-yellow); animation-delay: -23s; animation-duration: 22s; }
#falling-triangles i:nth-child(13) { left: 48%; width: 29px; height: 44px; background: var(--variation-green); animation-delay: -5s; animation-duration: 25s; }
#falling-triangles i:nth-child(14) { left: 67%; width: 17px; height: 28px; background: var(--variation-blue); animation-delay: -16s; animation-duration: 23s; }
#falling-triangles i:nth-child(15) { left: 77%; width: 39px; height: 54px; background: var(--variation-red); animation-delay: -28s; animation-duration: 31s; }
#falling-triangles i:nth-child(16) { left: 96%; width: 23px; height: 38px; background: var(--variation-green); animation-delay: -7s; animation-duration: 20s; }
@keyframes triangle-fall { from { transform: translate3d(0, -9vh, 0) rotate(0deg); } to { transform: translate3d(9vw, 128vh, 0) rotate(360deg); } }

.desktop-shell { position: relative; z-index: 1; grid-template: 82px minmax(0, 1fr) / 272px minmax(0, 1fr); min-height: 100vh; background: rgba(220, 233, 234, .44); }
.topbar { position: relative; padding: 0 29px 0 21px; border: 0; border-bottom: 2px solid var(--variation-ink); background: rgba(242, 248, 248, .92); box-shadow: none; backdrop-filter: blur(10px); }
.topbar::before { content: "HETMAN / CZTERY KIERUNKI STRATEGII"; top: 15px; left: 294px; color: var(--variation-muted); font-family: Bahnschrift, sans-serif; font-size: 9px; letter-spacing: .18em; }
.topbar::after { right: 0; bottom: -2px; left: 0; height: 5px; opacity: 1; background: linear-gradient(90deg, var(--variation-blue) 0 25%, var(--variation-red) 25% 50%, var(--variation-green) 50% 75%, var(--variation-yellow) 75%); box-shadow: none; }
.brand-wordmark { display: grid; width: 215px; height: 70px; }
.brand-logo { width: 198px; height: 48px; padding: 0; border: 0; background: transparent; object-fit: contain; object-position: left center; box-shadow: none; }
.brand-wordmark small { margin: 1px 0 0; color: var(--variation-muted); font-family: Bahnschrift, sans-serif; font-size: 8px; letter-spacing: .15em; }
.topbar-status { gap: 10px; }
.icon-button, .profile-chip { border: 1px solid var(--variation-ink); background: var(--variation-paper-bright); color: var(--variation-ink); box-shadow: 3px 3px 0 rgba(47, 74, 78, .16); }
.icon-button { width: 38px; height: 38px; }
.icon-button b { top: -7px; right: -7px; display: grid; width: 17px; height: 17px; border: 1px solid var(--variation-ink); background: var(--variation-red); color: white; }
.profile-chip { padding: 5px 8px 5px 5px; }
.profile-chip small { color: var(--variation-muted); }.profile-chip strong { color: var(--variation-ink); }.profile-chip em { color: var(--variation-red); }
.avatar, .commander-avatar { border: 1px solid var(--variation-ink); background: linear-gradient(135deg, var(--variation-blue), #92dced); color: var(--variation-ink); box-shadow: none; }

.sidebar { padding: 25px 14px 17px; border-right: 2px solid var(--variation-ink); background: rgba(230, 239, 240, .9); }
.sidebar::before { content: ""; position: absolute; top: 0; right: -2px; width: 7px; height: 37%; background: linear-gradient(var(--variation-red), var(--variation-yellow), var(--variation-green), var(--variation-blue)); }
.sidebar::after { right: 14px; bottom: 14px; width: 142px; height: 86px; background: linear-gradient(60deg, transparent 49%, rgba(72, 103, 107, .14) 49.5% 50.5%, transparent 51%) 0 0 / 40px 34px; opacity: 1; }
.nav-label { margin: 0 9px 12px; color: var(--variation-muted); font-size: 9px; letter-spacing: .17em; }.nav-label--lower { margin-top: 23px; }
.main-nav { gap: 3px; }.nav-item { position: relative; min-height: 38px; padding: 0 10px; border: 0; border-left: 4px solid transparent; background: transparent; color: var(--variation-ink); font-size: 12px; font-weight: 800; transition: transform .18s ease, background .18s ease; }.nav-item span { width: 17px; color: var(--variation-ink); font-size: 13px; background: var(--variation-silver); filter: none; }.nav-item:hover, .nav-item.active { border-left-color: var(--variation-red); background: linear-gradient(90deg, rgba(237,20,37,.13), transparent); color: var(--variation-ink); transform: translateX(3px); }.nav-item.active span { background: var(--variation-red); color: white; text-shadow: none; }.nav-item::after { right: 7px; background: var(--variation-red); }.main-nav--small .nav-item { min-height: 34px; font-size: 11px; }
.sidebar-bottom { z-index: 1; }.signout { margin-top: 11px; border: 1px solid var(--variation-ink); background: var(--variation-ink); color: var(--variation-paper-bright); font-size: 9px; }.signout span { color: var(--variation-yellow); }.legal-links { gap: 6px; margin: 14px 4px 0; }.legal-links button { color: var(--variation-muted); font-size: 9px; text-decoration-color: var(--variation-red); }.legal-links button:hover { color: var(--variation-ink); }

.app-view { padding: 35px 46px 46px; background: linear-gradient(90deg, rgba(255,255,255,.28), transparent 18%); }
.view-header { position: relative; margin-bottom: 25px; padding-bottom: 16px; border-bottom: 1px solid rgba(47, 74, 78, .28); }
.view-header::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 145px; height: 4px; background: linear-gradient(90deg, var(--variation-blue) 0 25%, var(--variation-red) 25% 50%, var(--variation-green) 50% 75%, var(--variation-yellow) 75%); }
.eyebrow { color: var(--variation-red); font-size: 9px; }.eyebrow::before { background: var(--variation-red); filter: none; }.eyebrow::after { background: linear-gradient(30deg, var(--variation-blue) 0 49%, var(--variation-yellow) 50% 100%); }
.view-title { color: var(--variation-ink); font-weight: 900; letter-spacing: -.055em; }.view-subtitle { color: var(--variation-muted); border-left-color: var(--variation-red); background: linear-gradient(90deg, rgba(237,20,37,.1), transparent); }.view-subtitle::before { background: var(--variation-red); }

.card, .turn-card, .podium-card, .signal-core, .signal-ledger { border: 1px solid var(--variation-ink); background: rgba(246, 250, 249, .82); box-shadow: var(--variation-shadow); }
.card::before, .turn-card::before, .podium-card::before { opacity: .44; background: linear-gradient(60deg, transparent 0 49%, rgba(54,78,81,.36) 49.2% 50.5%, transparent 50.7%) 0 0 / 42px 35px, linear-gradient(-60deg, transparent 0 49%, rgba(54,78,81,.25) 49.2% 50.5%, transparent 50.7%) 0 0 / 42px 35px; }
.card:hover::before, .turn-card:hover::before, .podium-card:hover::before { filter: none; opacity: .72; }
.card-title, .card h2, .card h3 { color: var(--variation-ink); }.card-kicker, .card p, .compact-list div { color: var(--variation-muted); }
.button, .filter, .setting-toggle, .time-choice { border-color: var(--variation-ink); color: var(--variation-ink); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 8px 50%); }
.button { background: var(--variation-yellow); box-shadow: 4px 4px 0 rgba(47, 74, 78, .21); }.button:hover { filter: none; transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(47, 74, 78, .21); }.button--ghost { background: rgba(255,255,255,.66); color: var(--variation-ink); }.button--red { background: var(--variation-red); color: #fff; }.text-action { color: var(--variation-ink); text-decoration: underline; text-decoration-color: var(--variation-red); text-underline-offset: 4px; }

/* Welcome */
.welcome-view { position: relative; display: grid; min-height: calc(100vh - 163px); grid-template-columns: minmax(420px, .95fr) minmax(440px, 1.05fr); overflow: hidden; border: 2px solid var(--variation-ink); background: var(--variation-paper-bright); box-shadow: 12px 14px 0 rgba(47, 74, 78, .13); }
.welcome-view::before { content: ""; position: absolute; z-index: 0; inset: 0; opacity: .58; background: linear-gradient(60deg, transparent 49.55%, rgba(42,58,60,.16) 49.7% 50.2%, transparent 50.35%) 0 0 / 94px 82px, linear-gradient(-60deg, transparent 49.55%, rgba(42,58,60,.12) 49.7% 50.2%, transparent 50.35%) 0 0 / 94px 82px; pointer-events: none; }
.welcome-bands { position: absolute; z-index: 0; inset: 0; pointer-events: none; }.welcome-bands i { position: absolute; display: block; clip-path: polygon(50% 0, 100% 100%, 0 100%); }.welcome-bands i:nth-child(1) { top: -8%; left: -6%; width: 37%; height: 43%; background: linear-gradient(135deg, var(--variation-red), #fa98a1); transform: rotate(-25deg); }.welcome-bands i:nth-child(2) { bottom: -17%; left: 14%; width: 37%; height: 48%; background: linear-gradient(155deg, var(--variation-blue), #8bd3e7); transform: rotate(12deg); }.welcome-bands i:nth-child(3) { right: -3%; bottom: -22%; width: 42%; height: 51%; background: linear-gradient(150deg, var(--variation-yellow), #fff3a0); transform: rotate(21deg); }.welcome-bands i:nth-child(4) { top: 10%; right: 7%; width: 16%; height: 27%; background: var(--variation-green); opacity: .55; transform: rotate(17deg); }.welcome-bands i:nth-child(5) { top: 33%; left: 48%; width: 17%; height: 28%; background: var(--variation-yellow); transform: rotate(-14deg); }
.welcome-copy { position: relative; z-index: 1; display: flex; min-height: 100%; padding: clamp(42px, 7vw, 100px) clamp(36px, 6vw, 94px) 38px; flex-direction: column; align-items: flex-start; justify-content: center; }
.welcome-logo { width: min(320px, 86%); height: 104px; margin: 0 0 22px; object-fit: contain; object-position: left center; mix-blend-mode: multiply; }
.welcome-kicker { margin: 0 0 15px; padding: 7px 13px; border: 1px solid rgba(47,74,78,.2); background: rgba(255,255,255,.61); color: var(--variation-muted); font-size: 11px; font-weight: 800; letter-spacing: .22em; }
.welcome-copy h1 { max-width: 650px; margin: 0; color: var(--variation-ink); font-size: clamp(46px, 4vw, 76px); font-weight: 900; letter-spacing: -.075em; line-height: .89; text-transform: uppercase; }.welcome-copy h1 em { color: var(--variation-red); font-style: normal; }
.welcome-lead { max-width: 500px; margin: 23px 0 0; color: var(--variation-muted); font-size: 15px; line-height: 1.58; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.blade-button { display: inline-flex; min-height: 56px; align-items: center; justify-content: center; gap: 24px; padding: 0 25px; border: 1px solid var(--variation-ink); clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 50%, calc(100% - 17px) 100%, 0 100%, 10px 50%); font-size: 11px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; transition: transform .18s ease, box-shadow .18s ease; }.blade-button:hover { transform: translate(3px, 3px); box-shadow: none; }.blade-button--dark { background: var(--variation-ink); box-shadow: 5px 5px 0 var(--variation-red); color: #f9ffff; }.blade-button--dark span { color: var(--variation-yellow); font-size: 18px; }.blade-button--light { background: rgba(255,255,255,.88); box-shadow: 5px 5px 0 var(--variation-blue); color: var(--variation-ink); }
.welcome-rule-link { display: flex; align-items: center; gap: 9px; margin: 22px 0 0; padding: 0; background: transparent; color: var(--variation-ink); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }.welcome-rule-link span { color: var(--variation-red); font-size: 19px; }
.welcome-reference { position: relative; z-index: 1; min-height: 100%; margin: 0; border-left: 2px solid var(--variation-ink); overflow: hidden; background: #cfe3e4; }.welcome-reference::before { content: ""; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(90deg, var(--variation-paper-bright), transparent 24%); pointer-events: none; }.welcome-reference img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 54%; filter: saturate(1.12) contrast(1.03); }.welcome-reference figcaption { position: absolute; z-index: 2; right: 0; bottom: 0; left: 25%; padding: 14px 20px; border-top: 2px solid var(--variation-ink); background: var(--variation-ink); color: #f5ffff; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-align: right; text-transform: uppercase; }
.welcome-route { position: absolute; z-index: 3; right: 13px; bottom: 13px; display: flex; align-items: center; gap: 7px; padding: 8px 9px; border: 1px solid var(--variation-ink); background: rgba(238,246,246,.92); color: var(--variation-ink); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }.welcome-route span { color: var(--variation-red); font-weight: 900; }.welcome-route i { width: 22px; height: 1px; background: var(--variation-ink); }
.entry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }.entry-card { position: relative; min-height: 176px; padding: 22px 24px; overflow: hidden; border: 1px solid var(--variation-ink); background: rgba(247,252,252,.79); box-shadow: var(--variation-shadow); }.entry-card::after { content: ""; position: absolute; right: -10px; bottom: -34px; width: 120px; height: 122px; clip-path: polygon(50% 0, 100% 100%, 0 100%); opacity: .25; }.entry-card span { color: var(--variation-muted); font-size: 10px; font-weight: 900; }.entry-card h2 { position: relative; z-index: 1; max-width: 260px; margin: 13px 0 6px; color: var(--variation-ink); font-size: 20px; letter-spacing: -.04em; }.entry-card p { position: relative; z-index: 1; max-width: 290px; margin: 0; color: var(--variation-muted); font-size: 12px; line-height: 1.45; }.entry-card button { position: relative; z-index: 1; margin-top: 13px; padding: 0; background: transparent; color: var(--variation-ink); font-size: 10px; font-weight: 900; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 4px; }.entry-card--blue::after { background: var(--variation-blue); }.entry-card--red::after { background: var(--variation-red); }.entry-card--yellow::after { background: var(--variation-yellow); }

/* Account journey */
.command-map { display: grid; grid-template-columns: minmax(0, 1fr) 260px; border: 2px solid var(--variation-ink); background: rgba(247,252,252,.74); box-shadow: var(--variation-shadow); }.command-primary { position: relative; padding: 36px; overflow: hidden; }.command-primary::after { content: ""; position: absolute; top: -50%; right: 10%; width: 330px; height: 330px; border: 1px solid rgba(47,74,78,.23); clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: rotate(30deg); }.command-primary > * { position: relative; z-index: 1; }.command-primary h2 { max-width: 660px; margin: 0; font-size: clamp(28px, 3vw, 47px); letter-spacing: -.06em; line-height: .95; }.command-primary p:not(.eyebrow) { max-width: 600px; color: var(--variation-muted); font-size: 14px; line-height: 1.55; }.command-primary-actions { display: flex; gap: 12px; margin-top: 24px; }.account-triangle { display: grid; padding: 22px; place-content: center; justify-items: center; border-left: 2px solid var(--variation-ink); background: linear-gradient(145deg, var(--variation-blue), #a7e5ed 77%); color: var(--variation-ink); text-align: center; }.account-triangle span { display: grid; width: 66px; height: 66px; place-items: center; border: 2px solid var(--variation-ink); background: var(--variation-paper-bright); clip-path: polygon(50% 0, 100% 100%, 0 100%); font-size: 23px; font-weight: 900; }.account-triangle p { margin: 15px 0 0; font-size: 9px; font-weight: 900; letter-spacing: .16em; }.account-triangle b { font-size: 68px; letter-spacing: -.08em; line-height: .9; }.account-triangle small { margin-top: 8px; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.journey-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-top: 17px; }.journey-card { position: relative; display: grid; min-height: 212px; grid-template-columns: 29px 1fr 16px; gap: 11px; padding: 21px; overflow: hidden; border: 1px solid var(--variation-ink); background: rgba(247,252,252,.82); color: var(--variation-ink); text-align: left; box-shadow: var(--variation-shadow); transition: transform .18s ease, box-shadow .18s ease; }.journey-card:hover { transform: translate(3px, 3px); box-shadow: 5px 7px 0 rgba(55,78,81,.12); }.journey-card::before { content: ""; position: absolute; right: -18px; bottom: -39px; width: 130px; height: 140px; clip-path: polygon(50% 0, 100% 100%, 0 100%); opacity: .8; }.journey-card span, .journey-card b, .journey-card div { position: relative; z-index: 1; }.journey-card span { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid var(--variation-ink); background: #f5ffff; font-size: 10px; font-weight: 900; }.journey-card small { display: block; color: var(--variation-muted); font-size: 8px; font-weight: 900; letter-spacing: .13em; }.journey-card h2 { margin: 8px 0 7px; font-size: 20px; letter-spacing: -.04em; line-height: 1; }.journey-card p { margin: 0; color: var(--variation-muted); font-size: 11px; line-height: 1.45; }.journey-card b { align-self: center; font-size: 20px; }.journey-card--blue::before { background: var(--variation-blue); }.journey-card--red::before { background: var(--variation-red); }.journey-card--green::before { background: var(--variation-green); }.journey-card--yellow::before { background: var(--variation-yellow); }
.progress-rail { display: grid; grid-template-columns: minmax(0, 1fr) 310px auto; align-items: center; gap: 25px; margin-top: 18px; padding: 19px 22px; border: 1px solid var(--variation-ink); background: rgba(247,252,252,.73); box-shadow: var(--variation-shadow); }.progress-rail p { margin: 0 0 5px; color: var(--variation-muted); font-size: 9px; font-weight: 900; letter-spacing: .14em; }.progress-rail strong { font-size: 13px; }.rail-steps { display: flex; align-items: center; }.rail-steps b { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid var(--variation-ink); background: #fff; color: var(--variation-ink); font-size: 9px; }.rail-steps b.done { background: var(--variation-green); }.rail-steps i { width: 36px; height: 2px; background: var(--variation-ink); }

/* Match setup and lobby */
.player-setup { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(500px, 1.22fr); gap: 25px; margin-bottom: 18px; padding: 27px 29px; border: 2px solid var(--variation-ink); background: linear-gradient(90deg, rgba(255,255,255,.68), rgba(228,239,240,.7)); box-shadow: var(--variation-shadow); }.player-setup h2 { margin: 0; font-size: 29px; letter-spacing: -.05em; }.player-setup p:not(.eyebrow) { max-width: 560px; margin: 9px 0 0; color: var(--variation-muted); font-size: 12px; line-height: 1.5; }.player-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: center; }.player-count-card { position: relative; min-height: 125px; padding: 15px 8px; overflow: hidden; border: 1px solid var(--variation-ink); background: #f6fbfa; color: var(--variation-ink); text-align: center; transition: transform .16s ease, background .16s ease; }.player-count-card::before { content: ""; position: absolute; top: -29px; right: -23px; width: 80px; height: 86px; clip-path: polygon(50% 0, 100% 100%, 0 100%); opacity: .6; }.player-count-card:hover, .player-count-card.active { transform: translate(2px, 2px); background: #fff; box-shadow: 4px 4px 0 var(--variation-ink); }.player-count-card b { position: relative; display: block; font-size: 50px; font-weight: 900; letter-spacing: -.09em; line-height: 1; }.player-count-card span { position: relative; display: block; margin-top: 11px; font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }.player-count-card--1::before { background: var(--variation-blue); }.player-count-card--2::before { background: var(--variation-red); }.player-count-card--3::before { background: var(--variation-green); }.player-count-card--4::before { background: var(--variation-yellow); }.player-count-card.active::after { content: "WYBRANE"; position: absolute; right: 0; bottom: 0; left: 0; padding: 5px; background: var(--variation-ink); color: #fff; font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.mode-grid--variations { grid-template-columns: repeat(3, 1fr); }.mode-card { border: 1px solid var(--variation-ink); background: rgba(247,252,252,.84); color: var(--variation-ink); box-shadow: var(--variation-shadow); }.mode-card:hover { border-color: var(--variation-ink); transform: translate(3px, 3px); box-shadow: 5px 7px 0 rgba(55,78,81,.11); }.mode-card::before { content: ""; position: absolute; top: -44px; right: -32px; width: 160px; height: 165px; clip-path: polygon(50% 0, 100% 100%, 0 100%); opacity: .42; }.mode-card--classic::before { background: var(--variation-red); }.mode-card--savant::before { background: var(--variation-blue); }.mode-card--quick::before { background: var(--variation-yellow); }.mode-symbol { position: relative; border: 1px solid var(--variation-ink); background: #fff; color: var(--variation-ink); }.mode-card h2, .mode-card p, .mode-card small { position: relative; }.mode-card h2 { color: var(--variation-ink); }.mode-card p { color: var(--variation-muted); }.mode-card small { color: var(--variation-green); }.play-footer { display: flex; align-items: center; gap: 14px; margin-top: 17px; padding: 17px 20px; border-left: 6px solid var(--variation-blue); background: rgba(255,255,255,.63); }.play-footer > span { color: var(--variation-red); font-size: 25px; }.play-footer p { flex: 1; margin: 0; color: var(--variation-muted); font-size: 12px; }.play-footer strong { color: var(--variation-ink); }
.lobby-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); min-height: 310px; border: 2px solid var(--variation-ink); background: rgba(247,252,252,.82); box-shadow: var(--variation-shadow); }.lobby-hero > div:first-child { padding: 34px; }.lobby-hero h2 { max-width: 590px; margin: 0; font-size: clamp(31px, 3.2vw, 51px); letter-spacing: -.065em; line-height: .94; }.lobby-hero p:not(.eyebrow) { max-width: 570px; color: var(--variation-muted); font-size: 13px; line-height: 1.55; }.lobby-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }.lobby-table { position: relative; overflow: hidden; border-left: 2px solid var(--variation-ink); background: #d2e6e7; }.lobby-table i { position: absolute; display: block; width: 56%; height: 56%; clip-path: polygon(50% 0, 100% 100%, 0 100%); }.lobby-blue { left: -7%; bottom: -5%; background: var(--variation-blue); transform: rotate(90deg); }.lobby-red { top: -7%; left: 22%; background: var(--variation-red); transform: rotate(180deg); }.lobby-green { top: 12%; right: -12%; background: var(--variation-green); transform: rotate(-90deg); }.lobby-yellow { bottom: -9%; left: 27%; background: var(--variation-yellow); }.lobby-table b { position: absolute; top: 50%; left: 50%; display: grid; width: 76px; height: 76px; place-items: center; transform: translate(-50%, -50%) rotate(45deg); border: 2px solid var(--variation-ink); background: #f9ffff; color: var(--variation-ink); font-size: 12px; }.lobby-table b::first-letter { transform: rotate(-45deg); }
.lobby-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 17px; }.lobby-card { min-height: 190px; padding: 23px; border: 1px solid var(--variation-ink); background: rgba(247,252,252,.83); box-shadow: var(--variation-shadow); }.lobby-card span { color: var(--variation-red); font-size: 10px; font-weight: 900; }.lobby-card h2 { margin: 16px 0 8px; font-size: 21px; letter-spacing: -.045em; }.lobby-card p { min-height: 36px; margin: 0; color: var(--variation-muted); font-size: 12px; line-height: 1.45; }.lobby-card button, .skin-card button, .army-card button, .pass-card button, .box-promise button { margin-top: 16px; padding: 0; background: transparent; color: var(--variation-ink); font-size: 10px; font-weight: 900; text-decoration: underline; text-decoration-color: var(--variation-red); text-underline-offset: 4px; }.service-note { max-width: 880px; margin: 20px 0 0; padding-left: 14px; border-left: 3px solid var(--variation-yellow); color: var(--variation-muted); font-size: 11px; line-height: 1.55; }

/* Collections and store */
.arsenal-hero { display: grid; grid-template-columns: minmax(0, 1fr) 290px; min-height: 265px; border: 2px solid var(--variation-ink); background: rgba(247,252,252,.82); box-shadow: var(--variation-shadow); }.arsenal-hero > div:first-child { padding: 32px; }.arsenal-hero h2 { max-width: 560px; margin: 0; font-size: 42px; letter-spacing: -.06em; line-height: .96; }.arsenal-hero p:not(.eyebrow) { max-width: 530px; color: var(--variation-muted); font-size: 13px; line-height: 1.5; }.arsenal-sigil { position: relative; overflow: hidden; border-left: 2px solid var(--variation-ink); background: #d6e8e9; }.arsenal-sigil i { position: absolute; display: block; width: 63%; height: 58%; clip-path: polygon(50% 0, 100% 100%, 0 100%); }.arsenal-sigil i:nth-child(1) { top: -11%; left: 20%; background: var(--variation-red); transform: rotate(180deg); }.arsenal-sigil i:nth-child(2) { right: -12%; bottom: 6%; background: var(--variation-green); transform: rotate(-90deg); }.arsenal-sigil i:nth-child(3) { bottom: -16%; left: -15%; background: var(--variation-blue); transform: rotate(90deg); }.arsenal-sigil i:nth-child(4) { right: 17%; bottom: -14%; background: var(--variation-yellow); }.arsenal-sigil b { position: absolute; top: 50%; left: 50%; display: grid; width: 67px; height: 67px; place-items: center; transform: translate(-50%, -50%); border: 1px solid var(--variation-ink); background: #f8ffff; color: var(--variation-ink); font-size: 29px; }
.skin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 17px; }.skin-card { position: relative; min-height: 255px; padding: 22px; overflow: hidden; border: 1px solid var(--variation-ink); background: rgba(247,252,252,.86); box-shadow: var(--variation-shadow); }.skin-card::after { content: ""; position: absolute; right: -27px; bottom: -37px; width: 150px; height: 170px; clip-path: polygon(50% 0, 100% 100%, 0 100%); opacity: .42; }.skin-card > * { position: relative; z-index: 1; }.skin-card > span { color: var(--variation-muted); font-size: 10px; font-weight: 900; }.skin-piece { margin: 19px 0 11px; color: var(--variation-ink); font-size: 57px; line-height: 1; }.skin-card h2 { margin: 0; font-size: 20px; }.skin-card p { min-height: 34px; margin: 8px 0 0; color: var(--variation-muted); font-size: 11px; line-height: 1.45; }.skin-card--blue::after { background: var(--variation-blue); }.skin-card--red::after { background: var(--variation-red); }.skin-card--yellow::after { background: var(--variation-yellow); }.skin-card--green::after { background: var(--variation-green); }
.army-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.army-card { position: relative; min-height: 315px; padding: 22px; overflow: hidden; border: 1px solid var(--variation-ink); background: rgba(247,252,252,.86); box-shadow: var(--variation-shadow); }.army-card::before { content: ""; position: absolute; right: -15px; bottom: -35px; width: 170px; height: 210px; clip-path: polygon(50% 0, 100% 100%, 0 100%); opacity: .42; }.army-card--0::before { background: var(--variation-blue); }.army-card--1::before { background: var(--variation-red); }.army-card--2::before { background: var(--variation-yellow); }.army-card--3::before { background: var(--variation-green); }.army-card > * { position: relative; z-index: 1; }.army-emblem { position: relative; width: 90px; height: 86px; margin-bottom: 26px; border-bottom: 2px solid var(--variation-ink); }.army-emblem i { position: absolute; bottom: 0; display: block; width: 34px; height: 53px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }.army-emblem i:nth-child(1) { left: 0; background: var(--variation-blue); }.army-emblem i:nth-child(2) { left: 28px; background: var(--variation-red); transform: rotate(180deg); }.army-emblem i:nth-child(3) { left: 55px; background: var(--variation-yellow); }.army-card small { color: var(--variation-muted); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.army-card h2 { margin: 12px 0 8px; font-size: 22px; letter-spacing: -.045em; line-height: 1.02; }.army-card p { margin: 0; color: var(--variation-muted); font-size: 12px; }.collection-callout { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 18px; padding: 26px 30px; border-left: 6px solid var(--variation-green); background: rgba(255,255,255,.69); }.collection-callout h2 { margin: 0; font-size: 26px; letter-spacing: -.045em; }
.pass-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }.pass-card { position: relative; display: flex; min-height: 346px; padding: 28px; flex-direction: column; overflow: hidden; border: 2px solid var(--variation-ink); background: rgba(247,252,252,.86); box-shadow: var(--variation-shadow); }.pass-card::after { content: ""; position: absolute; right: -10%; bottom: -16%; width: 70%; height: 50%; clip-path: polygon(50% 0, 100% 100%, 0 100%); opacity: .45; }.pass-card--0::after { background: var(--variation-blue); }.pass-card--1::after { background: var(--variation-red); }.pass-card--2::after { background: var(--variation-yellow); }.pass-card > * { position: relative; z-index: 1; }.pass-card > span { color: var(--variation-muted); font-size: 10px; font-weight: 900; }.pass-card h2 { margin: 37px 0 12px; font-size: 30px; letter-spacing: -.055em; }.pass-card p { min-height: 54px; margin: 0; color: var(--variation-muted); font-size: 13px; line-height: 1.5; }.pass-card small { margin-top: auto; color: var(--variation-ink); font-size: 10px; font-weight: 900; }.pass-card button { margin-top: 22px; padding: 0; background: transparent; color: var(--variation-ink); font-size: 10px; font-weight: 900; text-align: left; text-decoration: underline; text-decoration-color: var(--variation-red); text-underline-offset: 4px; }
.box-shop { display: grid; grid-template-columns: minmax(360px, 1.1fr) minmax(320px, .9fr); border: 2px solid var(--variation-ink); background: rgba(247,252,252,.86); box-shadow: var(--variation-shadow); }.box-shop figure { position: relative; min-height: 490px; margin: 0; overflow: hidden; border-right: 2px solid var(--variation-ink); background: white; }.box-shop figure::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 38%; background: linear-gradient(0deg, rgba(220,233,234,.9), transparent); }.box-shop img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 45% 48%; }.box-shop figcaption { position: absolute; z-index: 1; right: 14px; bottom: 12px; color: var(--variation-ink); font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }.box-shop article { padding: clamp(28px, 4vw, 62px); }.box-shop h2 { margin: 0; font-size: clamp(42px, 4vw, 69px); letter-spacing: -.08em; }.box-shop article > p:not(.eyebrow) { color: var(--variation-muted); font-size: 14px; line-height: 1.55; }.box-shop dl { display: grid; gap: 0; margin: 26px 0; }.box-shop dl div { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: 1px solid var(--variation-line); }.box-shop dt { color: var(--variation-muted); font-size: 9px; font-weight: 900; letter-spacing: .11em; }.box-shop dd { margin: 0; font-size: 12px; font-weight: 800; }.box-promise { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 18px 23px; border: 1px solid var(--variation-ink); background: rgba(247,252,252,.76); box-shadow: var(--variation-shadow); }.box-promise > span { display: grid; width: 35px; height: 35px; place-items: center; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--variation-yellow); color: var(--variation-ink); }.box-promise p { flex: 1; margin: 0; color: var(--variation-muted); font-size: 12px; }.box-promise strong { color: var(--variation-ink); }

/* Existing gameplay, rules, forms and legal screens inherit the new system. */
.game-stage { gap: 17px; }.board-window { border: 2px solid var(--variation-ink); background: #c5dce1; box-shadow: var(--variation-shadow); }.game-side { gap: 14px; }.turn-card { background: linear-gradient(145deg, #edf8f8, #cde9ea); }.turn-card .turn-color { color: var(--variation-blue); }.turn-card strong { color: var(--variation-red); }.compact-list b { color: var(--variation-ink); }.rules-intro, .rules-recovery, .rules-timer, .options-help, .quick-card, .home-shop-card { background: rgba(247,252,252,.83); }.rules-intro h2, .rules-board-card h2, .rules-section-title, .rules-copy h2 { color: var(--variation-ink); }.rules-intro p, .rules-copy p, .rules-lead, .rules-two-column p, .rules-recovery p, .piece-rule p, .mode-rule-grid p, .rules-timer > p:not(.eyebrow), .legal-document p, .legal-document li { color: var(--variation-muted); }.territory-schema { border-color: var(--variation-ink); background: var(--variation-paper); box-shadow: none; }.territory-schema b { border-color: var(--variation-ink); background: #fff; color: var(--variation-ink); box-shadow: none; }.rules-board-figure { border-color: var(--variation-ink); }.rules-board-figure figcaption { background: var(--variation-ink); color: #fff; }.piece-rule { border-color: var(--variation-line); background: rgba(255,255,255,.41); }.rule-note { border-left-color: var(--variation-yellow); background: rgba(255,226,26,.18); color: var(--variation-ink); }.strategic-mini-grid span { border-color: var(--variation-ink); background: rgba(255,226,26,.19); color: var(--variation-ink); }.strategic-mini-grid b, .strategic-mini-grid small { color: var(--variation-ink); }.rules-score-table td, .legal-table td, .legal-table th { border-color: var(--variation-line); color: var(--variation-ink); }.rules-score-table td:last-child, .rank-point { color: var(--variation-red); }.timer-rule-values b { border-color: var(--variation-ink); background: rgba(255,255,255,.54); color: var(--variation-ink); }.timer-rule-values b.active { background: var(--variation-yellow); color: var(--variation-ink); }.setting-toggle, .time-choice { background: rgba(255,255,255,.62); color: var(--variation-ink); }.setting-toggle.on, .time-choice.active { background: var(--variation-yellow); color: var(--variation-ink); }.setting-toggle i { border-radius: 0 !important; background: var(--variation-silver); }.setting-toggle i::after { border-radius: 0 !important; background: #fff; }.rank-table td { border-color: var(--variation-line); color: var(--variation-ink); }.rank-table tr.me { background: rgba(3,155,215,.15); }.rank-number { color: var(--variation-red); }.rank-change { color: var(--variation-green); }.rank-change.down { color: var(--variation-red); }.podium-card { background: rgba(247,252,252,.82); }.podium-card span { border-radius: 0 !important; background: var(--variation-blue); color: var(--variation-ink); }.podium-card--first { border-color: var(--variation-ink); background: rgba(255,226,26,.2); }.podium-card--first span { background: var(--variation-yellow); color: var(--variation-ink); }.result { border-radius: 0 !important; background: rgba(11,158,87,.18); color: var(--variation-green); }.result.loss { background: rgba(237,20,37,.13); color: var(--variation-red); }.progress { border-radius: 0 !important; background: rgba(47,74,78,.13); }.progress i { border-radius: 0 !important; background: var(--variation-green); box-shadow: none; }
.profile-hero, .commander-card { background: rgba(247,252,252,.82); }.mini-stat { border-color: var(--variation-line); color: var(--variation-muted); }.mini-stat strong { color: var(--variation-ink); }.field input, .field select { border-color: var(--variation-ink); background: rgba(255,255,255,.63); color: var(--variation-ink); }.field label { color: var(--variation-muted); }.field input:focus, .field select:focus { border-color: var(--variation-red); }.modal-layer { background: rgba(35,54,57,.43); backdrop-filter: blur(9px); }.auth-modal { border-color: var(--variation-ink); background: #eff7f7; box-shadow: 12px 15px 0 rgba(35,54,57,.22); }.auth-art { background: linear-gradient(145deg, var(--variation-red), #ff9da6 44%, #d9ecec 44%); }.auth-art h2, .auth-art p { color: var(--variation-ink); }.auth-art::after { color: rgba(255,255,255,.43); }.auth-form h2 { color: var(--variation-ink); }.auth-form p, .check-line { color: var(--variation-muted); }.auth-switch button { color: var(--variation-red); }.close { color: var(--variation-ink); }.toast { border: 1px solid var(--variation-ink); background: var(--variation-paper-bright); box-shadow: 6px 7px 0 rgba(47,74,78,.17); color: var(--variation-ink); }

@media (max-width: 1260px) {
  .desktop-shell { grid-template-columns: 232px minmax(0, 1fr); }.topbar::before { left: 250px; }.app-view { padding: 29px; }.welcome-view { grid-template-columns: minmax(360px, 1fr) minmax(320px, .8fr); }.journey-grid, .skin-grid, .army-grid { grid-template-columns: repeat(2, 1fr); }.player-setup { grid-template-columns: 1fr; }.progress-rail { grid-template-columns: 1fr; }.rail-steps { display: none; }
}
@media (max-width: 930px) {
  body { overflow: auto; }.desktop-shell { grid-template: auto auto / 1fr; }.topbar { grid-column: 1; }.sidebar { display: none; }.app-view { overflow: visible; min-height: calc(100vh - 82px); }.topbar::before { display: none; }.welcome-view, .box-shop, .lobby-hero, .arsenal-hero, .command-map { grid-template-columns: 1fr; }.welcome-reference, .lobby-table, .arsenal-sigil, .account-triangle, .box-shop figure { min-height: 300px; border-top: 2px solid var(--variation-ink); border-left: 0; border-right: 0; }.entry-grid, .lobby-grid, .mode-grid--variations, .pass-grid { grid-template-columns: 1fr; }.welcome-copy { min-height: 580px; }.welcome-route { display: none; }
}
@media (prefers-reduced-motion: reduce) { #falling-triangles i { animation: none; } }