/* HETMAN / Atlas Chromatique — 2026 visual system */
:root {
  --atlas-ink: #132436;
  --atlas-muted: #607282;
  --atlas-paper: rgba(252, 253, 255, .78);
  --atlas-sheet: rgba(242, 247, 251, .82);
  --atlas-line: rgba(33, 59, 79, .12);
  --atlas-line-strong: rgba(31, 71, 99, .22);
  --atlas-shadow: 0 22px 60px rgba(31, 53, 74, .12), 0 3px 9px rgba(31, 53, 74, .05);
  --route-accent: #2764d9;
  --route-rgb: 39, 100, 217;
  --bg: #e7edf2;
  --surface: var(--atlas-paper);
  --surface-2: var(--atlas-sheet);
  --line: var(--atlas-line);
  --ink: var(--atlas-ink);
  --muted: var(--atlas-muted);
  --cyan: #2764d9;
  --cyan-bright: #1757c2;
  --red: #d9394b;
  --gold: #bd7b13;
  --green: #26835f;
  --shadow: var(--atlas-shadow);
  color: var(--atlas-ink);
  font-family: "Segoe UI Variable Display", "Aptos Display", "Bahnschrift", "Segoe UI", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 84% 3%, rgba(63, 122, 202, .22), transparent 30%),
    radial-gradient(ellipse at 8% 92%, rgba(31, 141, 109, .16), transparent 33%),
    linear-gradient(132deg, #f3f6f8 0%, #e4ebf0 47%, #dae5ec 100%);
  color: var(--atlas-ink);
}

body::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .62;
  background:
    repeating-radial-gradient(ellipse at 80% 14%, transparent 0 14px, rgba(31, 67, 96, .065) 15px 16px, transparent 17px 32px),
    repeating-radial-gradient(ellipse at 20% 92%, transparent 0 22px, rgba(39, 100, 217, .05) 23px 24px, transparent 25px 44px);
  mask-image: linear-gradient(135deg, transparent 2%, black 28%, black 68%, transparent 96%);
}

body::after {
  content: "";
  position: fixed;
  z-index: 0;
  top: -26vw;
  right: -18vw;
  width: 68vw;
  height: 68vw;
  pointer-events: none;
  border-radius: 48% 52% 42% 58%;
  background: conic-gradient(from 225deg, rgba(41, 106, 216, .15), rgba(51, 166, 121, .12), rgba(231, 186, 52, .11), rgba(219, 75, 91, .12), rgba(41, 106, 216, .15));
  filter: blur(36px);
}

button, input, select { font-family: inherit; }
button { border: 0; }

.desktop-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template: 96px minmax(0, 1fr) / 302px minmax(0, 1fr);
  min-height: 100vh;
}

.topbar {
  position: relative;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 38px 0 30px;
  border-bottom: 1px solid rgba(26, 55, 79, .12);
  background: rgba(250, 253, 255, .74);
  box-shadow: 0 5px 22px rgba(34, 58, 78, .05);
  backdrop-filter: blur(22px) saturate(1.18);
}

.topbar::after {
  content: "";
  position: absolute;
  right: 34px;
  bottom: -1px;
  left: 34px;
  height: 2px;
  background: linear-gradient(90deg, #2e7cc3 0 25%, #d74751 25% 50%, #2a976a 50% 75%, #dda918 75%);
  opacity: .72;
}

.brand { display: flex; align-items: center; color: var(--atlas-ink); text-decoration: none; }
.brand-wordmark { display: grid; width: 176px; height: 84px; justify-items: center; align-content: center; }
.brand-logo { display: block; width: 176px; height: 72px; object-fit: cover; object-position: 50% 50%; filter: drop-shadow(0 4px 8px rgba(31, 53, 74, .12)); }
.brand-wordmark small { margin-top: -2px; color: #607484; font-family: "Cascadia Code", "Aptos Mono", monospace; font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.brand-mark { display: none; }

.topbar-status { gap: 12px; }
.icon-button {
  width: 42px;
  height: 42px;
  border: 1px solid var(--atlas-line-strong);
  border-radius: 14px;
  background: rgba(255, 255, 255, .74);
  color: var(--route-accent);
  box-shadow: 0 6px 16px rgba(31, 56, 76, .06);
  font-size: 20px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.icon-button:hover { transform: translateY(-2px); box-shadow: 0 12px 23px rgba(31, 56, 76, .12); }
.icon-button b { top: -6px; right: -6px; border: 2px solid #f7fafc; background: #d9394b; box-shadow: 0 4px 10px rgba(217, 57, 75, .3); }
.profile-chip { gap: 10px; padding: 5px 11px 5px 6px; border: 1px solid var(--atlas-line-strong); border-radius: 16px; background: rgba(255,255,255,.73); color: var(--atlas-ink); box-shadow: 0 6px 16px rgba(31,56,76,.05); }
.profile-chip small { color: var(--atlas-muted); font-size: 10px; letter-spacing: .1em; }
.profile-chip strong { font-size: 13px; }
.profile-chip em { color: var(--route-accent); }
.avatar { border: 0; border-radius: 12px; background: linear-gradient(135deg, #183650, #395e7c); color: white; box-shadow: inset 0 1px rgba(255,255,255,.25), 0 4px 9px rgba(26, 59, 89, .2); }

.sidebar {
  position: relative;
  min-height: 0;
  padding: 30px 16px 20px;
  overflow-y: auto;
  border-right: 1px solid rgba(255,255,255,.1);
  background:
    linear-gradient(180deg, rgba(22, 37, 52, .98), rgba(17, 31, 45, .96)),
    #152838;
  box-shadow: 14px 0 35px rgba(22, 37, 52, .12);
}
.sidebar::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 4px; background: linear-gradient(#3180cb 0 25%, #d9404e 25% 50%, #2c966b 50% 75%, #d8aa18 75%); }
.sidebar::after { right: 18px; bottom: 17px; width: 76px; height: 76px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.10) 0 2px, transparent 3px); background-size: 13px 13px; opacity: .45; }
.nav-label { position: relative; margin: 0 12px 12px; color: #93a9b9; font-family: "Cascadia Code", "Aptos Mono", monospace; font-size: 10px; letter-spacing: .14em; }
.nav-label--lower { margin-top: 30px; }
.main-nav { position: relative; gap: 6px; }
.nav-item {
  position: relative;
  min-height: 48px;
  gap: 13px;
  padding: 0 13px;
  overflow: hidden;
  border: 1px solid transparent;
  border-left: 0;
  border-radius: 15px 0 0 15px;
  background: transparent;
  color: #c5d2da;
  font-size: 14px;
  font-weight: 720;
  letter-spacing: .005em;
  transition: color .24s ease, background .24s ease, transform .24s ease, border-color .24s ease;
}
.nav-item::before { content: ""; position: absolute; top: 50%; left: 0; width: 4px; height: 0; transform: translateY(-50%); border-radius: 0 4px 4px 0; background: var(--route-accent); box-shadow: 0 0 15px var(--route-accent); transition: height .24s ease; }
.nav-item span { position: relative; z-index: 1; width: 23px; height: 23px; border: 1px solid rgba(204,227,238,.22); border-radius: 8px; background: rgba(255,255,255,.06); color: #a9cbe1; font-size: 14px; transition: background .24s ease, color .24s ease, transform .24s ease; }
.nav-item:hover { transform: translateX(3px); background: rgba(255,255,255,.055); color: white; }
.nav-item:hover span { transform: rotate(-7deg); background: rgba(255,255,255,.13); color: white; }
.nav-item.active { border-color: rgba(146, 197, 226, .20); background: linear-gradient(100deg, rgba(59,129,185,.26), rgba(255,255,255,.04)); color: white; box-shadow: inset 0 1px rgba(255,255,255,.10), 0 9px 22px rgba(2, 12, 22, .18); }
.nav-item.active::before { height: 58%; }
.nav-item.active span { color: white; background: var(--route-accent); text-shadow: none; box-shadow: 0 5px 15px rgba(var(--route-rgb), .35); }
.main-nav--small .nav-item { min-height: 42px; font-size: 13px; }
.sidebar-bottom { position: relative; margin-top: auto; }
.signout { min-height: 46px; margin-top: 15px; border: 1px solid rgba(191,223,239,.24); border-radius: 15px; background: rgba(255,255,255,.065); color: #d8ebf5; font-size: 11px; letter-spacing: .07em; transition: transform .24s ease, background .24s ease; }
.signout:hover { transform: translateY(-2px); background: rgba(255,255,255,.12); }
.legal-links { margin: 17px 6px 0; }
.legal-links button { color: #96aebb; font-size: 11px; }
.legal-links button:hover { color: #f5fbff; }

.app-view {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: clamp(28px, 3vw, 52px);
  overflow: auto;
  isolation: isolate;
  background:
    radial-gradient(circle at 93% 1%, rgba(var(--route-rgb), .19), transparent 25%),
    linear-gradient(145deg, rgba(248, 252, 254, .88), rgba(224, 235, 242, .72)),
    url("assets/aurora-atlas-v1.png") 51% 49% / cover fixed;
}
.app-view::before { content: ""; position: absolute; z-index: -1; top: 34px; right: 40px; width: min(32vw, 520px); height: min(32vw, 520px); border: 1px solid rgba(var(--route-rgb), .12); border-radius: 43% 57% 63% 37%; background: radial-gradient(circle at 40% 36%, rgba(255,255,255,.76) 0 2px, transparent 3px), radial-gradient(circle at 52% 52%, rgba(var(--route-rgb), .13), transparent 60%); background-size: 17px 17px, auto; opacity: .8; transform: rotate(-12deg); pointer-events: none; }
.app-view::after { content: ""; position: absolute; z-index: -2; inset: 0; pointer-events: none; opacity: .19; background: url("assets/aurora-atlas-v1.png") 50% 50% / cover; mix-blend-mode: multiply; mask-image: linear-gradient(112deg, transparent 0 9%, black 33% 68%, transparent 93%); animation: atlas-drift 22s ease-in-out infinite alternate; }
.app-view > * { position: relative; z-index: 1; }
.app-view[data-route="ranking"] { --route-accent: #8a46c8; --route-rgb: 138, 70, 200; }
.app-view[data-route="zasady"] { --route-accent: #bd7b13; --route-rgb: 189, 123, 19; }
.app-view[data-route^="board-"] { --route-accent: #d44857; --route-rgb: 212, 72, 87; }
.app-view[data-route="arsenal"], .app-view[data-route="sklep"] { --route-accent: #1a8a69; --route-rgb: 26, 138, 105; }
.app-view[data-route="regulamin"], .app-view[data-route="prywatnosc"] { --route-accent: #496777; --route-rgb: 73, 103, 119; }

.view-header { align-items: flex-end; gap: 28px; margin-bottom: 30px; }
.view-title { max-width: 830px; color: #14283a; font-size: clamp(34px, 3vw, 53px); font-weight: 780; letter-spacing: -.06em; line-height: .98; text-transform: none; }
.view-subtitle { max-width: 660px; color: #536877; font-size: 15px; line-height: 1.6; }
.eyebrow { color: var(--route-accent); font-family: "Cascadia Code", "Aptos Mono", monospace; font-size: 10px; font-weight: 800; letter-spacing: .16em; }

.button {
  min-height: 44px;
  padding: 0 19px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--route-accent), color-mix(in srgb, var(--route-accent) 72%, #14283a));
  box-shadow: 0 12px 22px rgba(var(--route-rgb), .20), inset 0 1px rgba(255,255,255,.22);
  color: white;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .075em;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.button:hover { transform: translateY(-3px); filter: saturate(1.13) brightness(1.03); box-shadow: 0 17px 29px rgba(var(--route-rgb), .28), inset 0 1px rgba(255,255,255,.25); }
.button--ghost { border-color: rgba(var(--route-rgb), .24); background: rgba(255,255,255,.55); box-shadow: none; color: var(--route-accent); }
.button--red { background: linear-gradient(135deg, #e55260, #b82d43); }

.grid { gap: 18px; }
.card {
  border: 1px solid rgba(31, 61, 85, .11);
  border-radius: 23px;
  background: linear-gradient(145deg, rgba(255,255,255,.84), rgba(244,249,252,.69));
  box-shadow: var(--atlas-shadow);
  color: var(--atlas-ink);
  backdrop-filter: blur(18px) saturate(1.12);
}
.card::before { background: linear-gradient(126deg, rgba(255,255,255,.78), transparent 31%); }
.card-title { color: #1a3143; font-size: 17px; font-weight: 760; }
.card-kicker { color: #667a89; font-size: 13px; font-weight: 560; line-height: 1.48; }

.dashboard-grid { grid-template-columns: minmax(340px, 1.45fr) minmax(200px, .85fr) minmax(200px, .85fr); }
.quick-card { min-height: 282px; border-color: rgba(44, 105, 149, .20); background: linear-gradient(125deg, rgba(255,255,255,.92), rgba(223,237,246,.75) 46%, rgba(217,232,239,.82)); }
.quick-card::after { right: -6%; bottom: -28%; width: 47%; height: 110%; border: 1px solid rgba(35, 100, 163, .16); border-radius: 50% 42% 58% 38%; background: conic-gradient(from 45deg, rgba(39,100,217,.02), rgba(39,100,217,.19), rgba(38,131,95,.10), rgba(217,169,24,.13), rgba(217,57,75,.08), rgba(39,100,217,.02)); color: transparent; font-size: 0; transform: rotate(-27deg); }
.quick-card h2 { max-width: 440px; color: #142a3d; font-size: clamp(28px, 2.25vw, 39px); font-weight: 760; }
.quick-card p { max-width: 445px; color: #516a7b; font-size: 15px; line-height: 1.6; }
.quick-actions { gap: 11px; }
.stat-card { min-height: 140px; border-radius: 21px; }
.stat-card strong { color: #1a3245; font-size: 34px; font-weight: 760; }
.stat-card .trend { color: #167b58; font-size: 12px; }
.progress { height: 7px; border-radius: 99px; background: #dfe8ed; }
.progress i { background: linear-gradient(90deg, var(--route-accent), #75b5e8); box-shadow: none; }
.battle-row { min-height: 67px; border-color: rgba(31,61,85,.10); }
.battle-row strong { color: #233c4f; font-size: 13px; }
.battle-row small, .battle-row time { color: #758996; font-size: 11px; }
.battle-row em { color: #ad6d0e; font-size: 13px; }
.result { border: 1px solid rgba(26,131,95,.22); border-radius: 11px; background: #e2f2ea; color: #177957; }
.result.loss { border-color: rgba(204,58,76,.22); background: #fbe7e9; color: #bd3344; }

.mode-grid { gap: 18px; }
.mode-card {
  min-height: 270px;
  overflow: hidden;
  border: 1px solid rgba(31,61,85,.12);
  border-radius: 24px;
  background: linear-gradient(155deg, rgba(255,255,255,.91), rgba(234,243,248,.79));
  box-shadow: var(--atlas-shadow);
  color: var(--atlas-ink);
}
.mode-card::before { content: ""; position: absolute; top: -65px; right: -45px; width: 170px; height: 170px; border-radius: 47% 53% 60% 40%; background: rgba(var(--route-rgb), .11); filter: blur(1px); }
.mode-card:hover { border-color: rgba(var(--route-rgb), .34); transform: translateY(-7px) rotate(-.3deg); box-shadow: 0 27px 52px rgba(31,53,74,.16); }
.mode-symbol { border: 1px solid rgba(var(--route-rgb), .22); border-radius: 16px; background: rgba(var(--route-rgb), .09); color: var(--route-accent); font-family: "Cascadia Code", "Aptos Mono", monospace; font-size: 18px; }
.mode-card h2 { position: relative; color: #193247; font-size: 22px; font-weight: 760; }
.mode-card p { position: relative; color: #607585; font-size: 14px; line-height: 1.6; }
.mode-card small { position: relative; color: var(--route-accent); font-family: "Cascadia Code", "Aptos Mono", monospace; font-size: 10px; }

.game-stage { gap: 22px; min-height: 0; }
.board-window { border: 8px solid rgba(255,255,255,.76); border-radius: 27px; background: #c6dce5; box-shadow: 0 24px 50px rgba(21,47,69,.18), inset 0 0 0 1px rgba(31,61,85,.14); }
.board-window iframe { min-height: 600px; border-radius: 18px; }
.game-side { gap: 16px; }
.turn-card { border: 1px solid rgba(var(--route-rgb), .24); border-radius: 23px; background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(var(--route-rgb), .09)); box-shadow: var(--atlas-shadow); }
.turn-card .turn-color { color: var(--route-accent); font-size: 29px; }
.turn-card strong { color: #314d62; font-size: 13px; }
.game-side .card { padding: 19px; }
.compact-list div { color: #607585; font-size: 13px; }
.compact-list b { color: #213c50; }

.ranking-layout, .profile-layout, .options-layout { gap: 20px; }
.filter { border: 1px solid rgba(31,61,85,.14); border-radius: 12px; background: rgba(255,255,255,.66); color: #687d8c; font-size: 11px; }
.filter.active { border-color: rgba(var(--route-rgb), .32); background: rgba(var(--route-rgb), .11); color: var(--route-accent); }
.rank-table th { color: #6a7e8c; font-size: 10px; }
.rank-table td { border-color: rgba(31,61,85,.09); color: #3a5263; font-size: 13px; }
.rank-table tr.me { background: rgba(var(--route-rgb), .08); }
.rank-number, .rank-point { color: var(--route-accent); }
.player-cell { color: #213c50; }
.commander-card { background: linear-gradient(150deg, rgba(255,255,255,.89), rgba(var(--route-rgb), .10)); }
.commander-avatar { border: 0; border-radius: 28px 15px 28px 15px; background: linear-gradient(135deg, #1e4261, #4b7592); box-shadow: 0 14px 30px rgba(29,67,97,.21); }
.mini-stat { border-color: rgba(31,61,85,.10); color: #637887; }
.mini-stat strong { color: #203a4d; }
.podium-card { border: 1px solid rgba(31,61,85,.12); border-radius: 22px; background: rgba(255,255,255,.72); box-shadow: var(--atlas-shadow); }
.podium-card span { background: rgba(var(--route-rgb), .11); color: var(--route-accent); }
.podium-card--first { border-color: rgba(190,123,19,.30); background: linear-gradient(160deg, #fffdf5, #f8eed0); }

.rules-layout { gap: 19px; }
.rules-intro, .rules-board-card, .rules-two-column, .rules-recovery, .rules-timer { border-radius: 26px; }
.rules-intro { border: 1px solid rgba(var(--route-rgb), .16); background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(246,238,216,.72)); }
.rules-intro h2, .rules-board-card h2, .rules-section-title { color: #1b3448; }
.rules-intro p, .rules-copy p, .rules-lead, .rules-two-column p, .rules-recovery p, .rules-timer > p:not(.eyebrow) { color: #587080; }
.territory-schema { border: 0; border-radius: 24px; box-shadow: 0 15px 30px rgba(34,58,78,.13); }
.territory-schema b { border-color: rgba(255,255,255,.94); border-radius: 15px; background: #1c3448; box-shadow: 0 10px 25px rgba(18,44,64,.28); }
.rule-stat b, .mode-rule-grid b { color: var(--route-accent); }
.rules-board-figure { border: 6px solid rgba(255,255,255,.75); border-radius: 21px; box-shadow: 0 13px 27px rgba(31,53,74,.12); }
.rules-board-figure figcaption { background: rgba(245,249,251,.95); color: #587080; font-size: 12px; }
.piece-rule { border-color: rgba(31,61,85,.10); border-radius: 18px; background: rgba(255,255,255,.55); }
.piece-rule p, .mode-rule-grid p { color: #607585; }
.rule-note { border-left-color: var(--route-accent); border-radius: 0 17px 17px 0; background: rgba(var(--route-rgb), .08); color: #425d70; }
.teleport-diagram { color: #506979; }
.teleport-diagram i { background: linear-gradient(150deg, var(--route-accent), color-mix(in srgb, var(--route-accent) 60%, #314a5c)); }
.strategic-mini-grid span { border-color: rgba(190,123,19,.24); border-radius: 15px; background: #fff9e7; color: #a4680a; }
.strategic-mini-grid b { color: #344e61; }
.strategic-mini-grid small { color: #9b691b; }
.rules-recovery { background: linear-gradient(135deg, #edf8f1, #e2f2e9); }
.rules-timer { background: linear-gradient(135deg, #fbf7e8, #f4ead1); }
.timer-rule-values b { border-color: rgba(31,61,85,.13); background: rgba(255,255,255,.6); color: #536b7a; }
.timer-rule-values b.active { border-color: rgba(var(--route-rgb), .36); background: rgba(var(--route-rgb), .10); color: var(--route-accent); }
.rules-score-table td { border-color: rgba(31,61,85,.10); color: #4e6677; }
.rules-score-table td:last-child { color: var(--route-accent); }

.option-row { border-color: rgba(31,61,85,.10); }
.option-row h3 { color: #263f52; }
.option-row p { color: #657987; }
.setting-toggle { border-color: rgba(31,61,85,.15); background: rgba(255,255,255,.65); color: #617684; }
.setting-toggle.on { border-color: rgba(var(--route-rgb), .29); background: rgba(var(--route-rgb), .09); color: var(--route-accent); }
.setting-toggle.on i { background: var(--route-accent); }
.time-choices { border-color: rgba(31,61,85,.16); background: rgba(255,255,255,.58); }
.time-choice { border-color: rgba(31,61,85,.10); background: transparent; color: #657987; }
.time-choice.active { background: var(--route-accent); color: white; box-shadow: inset 0 1px rgba(255,255,255,.22); }
.options-help { border-radius: 24px; background: linear-gradient(150deg, #1e3a52, #315b77); color: white; }
.options-help h2 { color: white; }
.options-help p { color: #d4e4ee; }
.options-help .button--ghost { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.08); color: white; }

.field label { color: #627685; font-size: 10px; }
.field input, .field select { border-color: rgba(31,61,85,.16); border-radius: 12px; background: rgba(255,255,255,.70); color: #263f52; }
.field input:focus, .field select:focus { border-color: var(--route-accent); box-shadow: 0 0 0 4px rgba(var(--route-rgb), .10); }
.collection-card { border-radius: 22px; }
.collection-card .token { border: 0; border-radius: 20px 11px 20px 11px; background: linear-gradient(135deg, rgba(var(--route-rgb), .15), rgba(var(--route-rgb), .05)); color: var(--route-accent); }
.empty-state { border-color: rgba(var(--route-rgb), .25); border-radius: 24px; color: #617685; }
.empty-state strong { color: #263f52; }
.empty-state span { color: var(--route-accent); }

.legal-document { border-radius: 27px; }
.legal-document h2 { color: var(--route-accent); }
.legal-document h3, .legal-document strong { color: #243d50; }
.legal-document p, .legal-document li, .legal-table th, .legal-table td { color: #4e6676; font-size: 14px; }
.legal-document a, .inline-link { color: var(--route-accent); }
.legal-notice { border-left-color: #bd7b13; border-radius: 0 15px 15px 0; background: #fff4d8; color: #745112; }
.legal-meta { color: #708390; }
.legal-table th, .legal-table td { border-color: rgba(31,61,85,.11); }

.modal-layer { background: rgba(18,33,47,.42); backdrop-filter: blur(15px) saturate(1.08); }
.auth-modal { border: 1px solid rgba(255,255,255,.70); border-radius: 28px; background: #f9fcfe; box-shadow: 0 35px 110px rgba(18,33,47,.30); }
.auth-art { background: linear-gradient(148deg, #183b57, #30637e); }
.auth-art::after { color: rgba(255,255,255,.12); }
.auth-art h2 { color: white; }
.auth-art p { color: #c9dfeb; }
.auth-form { color: #20394d; }
.auth-form h2 { color: #1b3448; }
.auth-form p, .auth-switch, .check-line { color: #607585; }
.auth-switch button { color: var(--route-accent); }
.close { color: #617685; }
.toast { border-color: rgba(255,255,255,.74); border-radius: 17px; background: #203e56; box-shadow: 0 18px 35px rgba(20,45,65,.24); color: white; font-size: 13px; }
.text-action { color: var(--route-accent); font-size: 12px; }

#app-view.view-enter > * { animation: atlas-route-in .48s cubic-bezier(.2,.78,.22,1) both; }
#app-view.view-enter > :nth-child(2) { animation-delay: .055s; }
#app-view.view-enter > :nth-child(3) { animation-delay: .09s; }
#app-view.view-enter > :nth-child(4) { animation-delay: .12s; }
@keyframes atlas-route-in { from { opacity: 0; transform: translateY(16px) scale(.988); filter: blur(4px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes atlas-drift { from { transform: scale(1.03) translate3d(-1.2%, -0.5%, 0); filter: hue-rotate(0deg); } to { transform: scale(1.09) translate3d(1.1%, .6%, 0); filter: hue-rotate(8deg); } }

@media (max-width: 1420px) {
  .desktop-shell { grid-template-columns: 258px minmax(0, 1fr); }
  .app-view { padding: 30px; }
  .dashboard-grid { grid-template-columns: 1.25fr .9fr; }
  .dashboard-grid .wide { grid-column: span 1; }
  .mode-grid { grid-template-columns: 1fr; }
  .game-stage { grid-template-columns: minmax(0, 1fr) 254px; }
}

@media (max-width: 1080px) {
  body { overflow: auto; }
  .desktop-shell { grid-template: 90px auto minmax(0, 1fr) / 1fr; }
  .topbar { grid-column: 1; }
  .sidebar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 18px 22px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.10); overflow: visible; }
  .sidebar::before { top: auto; right: 0; bottom: 0; left: 0; width: auto; height: 3px; background: linear-gradient(90deg, #3180cb 0 25%, #d9404e 25% 50%, #2c966b 50% 75%, #d8aa18 75%); }
  .sidebar::after { display: none; }
  .nav-label, .nav-label--lower { margin-top: 0; }
  .sidebar-bottom { margin-top: 0; }
  .main-nav { gap: 4px; }
  .legal-links { display: none; }
  .app-view { min-height: 70vh; }
  .game-stage, .ranking-layout, .profile-layout, .options-layout { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .desktop-shell { grid-template-rows: 86px auto minmax(0, 1fr); }
  .topbar { padding: 0 18px; }
  .brand-wordmark { width: 145px; height: 76px; }
  .brand-logo { width: 145px; height: 62px; }
  .profile-chip span:not(.avatar), .icon-button { display: none; }
  .sidebar { grid-template-columns: 1fr; }
  .app-view { padding: 23px 18px 34px; }
  .view-header { align-items: flex-start; flex-direction: column; }
  .view-title { font-size: 34px; }
  .dashboard-grid, .rules-stat-grid, .piece-rule-grid, .collection-grid, .ranking-podium { grid-template-columns: 1fr; }
  .rules-intro, .rules-board-card, .rules-two-column { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}