/* HETMAN / PRISMATIC OBSERVATORY — dark interactive visual system */
:root {
  --obs-void: #03050a;
  --obs-ink: #eaf7ff;
  --obs-muted: #8fa9bb;
  --obs-line: rgba(154, 222, 255, .16);
  --obs-pane: rgba(7, 16, 28, .72);
  --obs-pane-deep: rgba(3, 8, 15, .84);
  --obs-bright: #86dfff;
  --obs-accent: #63c4ff;
  --obs-accent-rgb: 99, 196, 255;
  --px: 50%;
  --py: 42%;
  color-scheme: dark;
}

html { min-height: 100%; background: var(--obs-void); }
body {
  min-width: 0;
  min-height: 100vh;
  overflow: hidden;
  background: #03050a;
  color: var(--obs-ink);
  font-family: "Segoe UI Variable Display", "Bahnschrift", "Aptos Display", "Segoe UI", sans-serif;
}
body::before, body::after { display: none; }

#prism-field {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(70rem 44rem at var(--px) var(--py), rgba(var(--obs-accent-rgb), .13), transparent 62%),
    linear-gradient(90deg, rgba(2, 5, 10, .94), rgba(3, 9, 16, .43) 45%, rgba(3, 5, 10, .88)),
    url("assets/prismatic-observatory-v1.png") 50% 50% / cover no-repeat,
    #03050a;
}
#prism-field::before {
  content: "";
  position: absolute;
  inset: -22%;
  opacity: .78;
  background:
    repeating-linear-gradient(115deg, transparent 0 53px, rgba(167, 224, 255, .055) 54px 55px, transparent 56px 108px),
    repeating-linear-gradient(25deg, transparent 0 118px, rgba(var(--obs-accent-rgb), .08) 119px 120px, transparent 121px 236px);
  mix-blend-mode: screen;
  mask-image: radial-gradient(ellipse at 54% 48%, black 0 47%, transparent 76%);
  animation: observatory-lattice 24s linear infinite;
}
#prism-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(37rem 37rem at var(--px) var(--py), rgba(230, 250, 255, .14) 0, rgba(var(--obs-accent-rgb), .085) 15%, transparent 57%),
    conic-gradient(from 135deg at var(--px) var(--py), transparent 0deg, rgba(var(--obs-accent-rgb), .09) 24deg, transparent 49deg, rgba(255, 255, 255, .055) 128deg, transparent 170deg, rgba(var(--obs-accent-rgb), .07) 221deg, transparent 263deg);
  mix-blend-mode: screen;
  transition: opacity .5s ease;
}
#prism-field.impact::after { animation: prism-impact .9s cubic-bezier(.1,.8,.16,1) both; }

.desktop-shell {
  position: relative;
  z-index: 1;
  grid-template: 84px minmax(0, 1fr) / 286px minmax(0, 1fr);
  min-height: 100vh;
  background: linear-gradient(90deg, rgba(2, 5, 10, .26), transparent 29%);
}

.topbar {
  z-index: 5;
  min-width: 0;
  padding: 0 32px 0 22px;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid rgba(180, 229, 255, .15);
  background: linear-gradient(90deg, rgba(3, 8, 14, .94), rgba(5, 13, 23, .72) 56%, rgba(3, 8, 15, .92));
  box-shadow: 0 13px 40px rgba(0, 0, 0, .26);
  backdrop-filter: blur(22px) saturate(1.35);
}
.topbar::before {
  content: "PRISMATIC\00a0 OBSERVATORY  /  COMMAND CHANNEL";
  position: absolute;
  top: 12px;
  left: 312px;
  color: rgba(188, 222, 242, .45);
  font-family: "Cascadia Code", "Aptos Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .19em;
}
.topbar::after {
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  opacity: .95;
  background: linear-gradient(90deg, #48baff 0 24%, #ff526a 24% 49%, #55e4a0 49% 74%, #ffc85b 74%);
  box-shadow: 0 0 15px rgba(128, 211, 255, .45);
}
.brand { isolation: isolate; }
.brand-wordmark { width: 212px; height: 78px; justify-items: start; align-content: center; }
.brand-logo {
  width: 201px;
  height: 60px;
  padding: 1px 5px;
  border: 1px solid rgba(204, 235, 255, .70);
  border-radius: 3px 17px 3px 17px;
  background: #f7fbff;
  object-fit: cover;
  object-position: 50% 52%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .22), 0 0 27px rgba(96, 202, 255, .28), inset 0 1px rgba(255,255,255,.9);
}
.brand-wordmark small {
  margin: 1px 0 0 9px;
  color: #a7c9dd;
  font-family: "Cascadia Code", "Aptos Mono", monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
}
.topbar-status { position: relative; z-index: 1; gap: 11px; }
.icon-button {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(151, 216, 247, .26);
  border-radius: 3px 13px 3px 13px;
  background: rgba(9, 22, 37, .70);
  color: var(--obs-accent);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 23px rgba(var(--obs-accent-rgb), .07);
}
.icon-button:hover { transform: translateY(-2px) rotate(3deg); color: #fff; box-shadow: 0 0 26px rgba(var(--obs-accent-rgb), .24); }
.icon-button b { border-color: #07111e; background: #ff5368; box-shadow: 0 0 15px rgba(255,83,104,.55); }
.profile-chip {
  border: 1px solid rgba(151, 216, 247, .20);
  border-radius: 3px 17px 3px 17px;
  background: linear-gradient(135deg, rgba(12, 28, 46, .86), rgba(8, 16, 28, .60));
  color: #eaf7ff;
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}
.profile-chip small { color: #8eb4ca; }
.profile-chip strong { color: #f0f9ff; }
.profile-chip em { color: var(--obs-accent); }
.avatar { border-radius: 2px 10px 2px 10px; background: linear-gradient(135deg, #d8f5ff, #3a9cc8 57%, #0c3556); color: #04111d; }

.sidebar {
  min-height: 0;
  padding: 31px 14px 18px;
  overflow-y: auto;
  border: 0;
  border-right: 1px solid rgba(156, 219, 255, .14);
  background: linear-gradient(180deg, rgba(3, 8, 14, .94), rgba(3, 8, 15, .75) 61%, rgba(6, 16, 25, .91));
  box-shadow: 18px 0 62px rgba(0, 0, 0, .27);
  backdrop-filter: blur(22px) saturate(1.25);
}
.sidebar::before {
  top: 22px;
  right: 10px;
  bottom: 22px;
  width: 1px;
  opacity: .82;
  background: linear-gradient(#56c6ff 0 24%, #ff536b 24% 49%, #55e3a0 49% 74%, #ffcd62 74%);
  box-shadow: 0 0 15px rgba(129, 209, 255, .42);
}
.sidebar::after {
  right: -17px;
  bottom: 30px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(147, 222, 255, .46);
  border-radius: 0;
  background: #081727;
  box-shadow: 0 0 25px rgba(81, 191, 255, .34);
  opacity: .92;
  transform: rotate(45deg);
}
.nav-label {
  margin: 0 11px 13px;
  color: #789bb1;
  font-family: "Cascadia Code", "Aptos Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
}
.nav-label--lower { margin-top: 31px; }
.main-nav { gap: 7px; }
.nav-item {
  min-height: 46px;
  gap: 12px;
  padding: 0 16px 0 13px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 3px 14px 3px 14px;
  background: linear-gradient(90deg, rgba(15, 35, 54, .08), rgba(255,255,255,0));
  color: #b5cedd;
  font-size: 14px;
  font-weight: 720;
  transition: color .28s ease, transform .28s cubic-bezier(.18,.85,.24,1), border-color .28s ease, background .28s ease;
}
.nav-item::before { top: 0; left: 0; width: 3px; height: 100%; transform: none; border-radius: 0; background: var(--obs-accent); box-shadow: 0 0 18px var(--obs-accent); opacity: 0; transition: opacity .28s ease; }
.nav-item span {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(157, 222, 255, .24);
  border-radius: 3px 9px 3px 9px;
  background: rgba(151, 220, 255, .055);
  color: #8fc9ea;
  font-size: 14px;
  transition: transform .28s ease, background .28s ease, color .28s ease, box-shadow .28s ease;
}
.nav-item:hover { transform: translateX(5px); border-color: rgba(149, 219, 255, .16); background: linear-gradient(90deg, rgba(var(--obs-accent-rgb), .12), rgba(255,255,255,0)); color: #f1fbff; }
.nav-item:hover span { transform: rotate(-9deg) scale(1.08); color: #fff; background: rgba(var(--obs-accent-rgb), .20); }
.nav-item.active { border-color: rgba(var(--obs-accent-rgb), .37); background: linear-gradient(90deg, rgba(var(--obs-accent-rgb), .24), rgba(var(--obs-accent-rgb), .035)); color: #fff; box-shadow: inset 0 1px rgba(255,255,255,.10), 0 0 27px rgba(var(--obs-accent-rgb), .10); }
.nav-item.active::before { opacity: 1; }
.nav-item.active span { transform: rotate(-9deg); border-color: rgba(255,255,255,.58); background: var(--obs-accent); color: #04101a; box-shadow: 0 0 17px rgba(var(--obs-accent-rgb), .70); }
.main-nav--small .nav-item { min-height: 41px; font-size: 13px; }
.signout {
  min-height: 43px;
  border: 1px solid rgba(150, 219, 250, .22);
  border-radius: 3px 13px 3px 13px;
  background: rgba(122, 205, 255, .065);
  color: #ccecff;
  font-size: 11px;
  letter-spacing: .08em;
}
.signout:hover { transform: translateY(-2px); border-color: rgba(156, 225, 255, .55); background: rgba(103, 201, 255, .16); }
.legal-links { margin: 19px 7px 0; }
.legal-links button { color: #779caf; font-size: 11px; }
.legal-links button:hover { color: #e2f6ff; }

.app-view {
  min-width: 0;
  min-height: 0;
  padding: clamp(34px, 4vw, 66px) clamp(30px, 4vw, 74px) 68px;
  overflow: auto;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(3, 8, 14, .64), rgba(3, 9, 17, .09) 52%, rgba(3, 8, 14, .57)),
    radial-gradient(54rem 35rem at var(--px) var(--py), rgba(var(--obs-accent-rgb), .095), transparent 69%);
  scrollbar-color: var(--obs-accent) rgba(255,255,255,.04);
}
.app-view::before {
  z-index: -2;
  top: 11%;
  right: -10%;
  width: min(49vw, 760px);
  height: min(49vw, 760px);
  border: 1px solid rgba(var(--obs-accent-rgb), .20);
  border-radius: 0;
  background:
    linear-gradient(135deg, transparent 0 47%, rgba(var(--obs-accent-rgb), .15) 48% 49%, transparent 50%),
    repeating-linear-gradient(45deg, transparent 0 54px, rgba(191, 231, 255, .055) 55px 56px, transparent 57px 112px);
  box-shadow: 0 0 130px rgba(var(--obs-accent-rgb), .09);
  opacity: .9;
  transform: rotate(45deg);
  animation: prism-orbit 17s ease-in-out infinite alternate;
}
.app-view::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 19%, rgba(178, 227, 255, .055) 19.05% 19.12%, transparent 19.18% 68%, rgba(178, 227, 255, .035) 68.05% 68.11%, transparent 68.16%),
    linear-gradient(transparent 0 21%, rgba(178, 227, 255, .035) 21.08% 21.15%, transparent 21.22% 79%, rgba(178, 227, 255, .025) 79.08% 79.14%, transparent 79.2%);
  mask-image: linear-gradient(180deg, black, transparent 74%);
}
.app-view > * { position: relative; z-index: 1; }

#app-view[data-route="panel"], :root[data-route="panel"] { --obs-accent: #62c6ff; --obs-accent-rgb: 98, 198, 255; }
#app-view[data-route="gra"], #app-view[data-route^="board-"], :root[data-route="gra"], :root[data-route^="board-"] { --obs-accent: #ff5b72; --obs-accent-rgb: 255, 91, 114; }
#app-view[data-route="zasady"], :root[data-route="zasady"] { --obs-accent: #ffcb62; --obs-accent-rgb: 255, 203, 98; }
#app-view[data-route="ranking"], :root[data-route="ranking"] { --obs-accent: #bb8dff; --obs-accent-rgb: 187, 141, 255; }
#app-view[data-route="arsenal"], #app-view[data-route="sklep"], #app-view[data-route="werbunek"], :root[data-route="arsenal"], :root[data-route="sklep"], :root[data-route="werbunek"] { --obs-accent: #63e7b0; --obs-accent-rgb: 99, 231, 176; }
#app-view[data-route="ustawienia"], #app-view[data-route="profil"], :root[data-route="ustawienia"], :root[data-route="profil"] { --obs-accent: #74d8ff; --obs-accent-rgb: 116, 216, 255; }
#app-view[data-route="regulamin"], #app-view[data-route="prywatnosc"], :root[data-route="regulamin"], :root[data-route="prywatnosc"] { --obs-accent: #a9bed1; --obs-accent-rgb: 169, 190, 209; }

.view-header { align-items: flex-end; gap: 28px; margin-bottom: 36px; }
.eyebrow { color: var(--obs-accent); font-family: "Cascadia Code", "Aptos Mono", monospace; font-size: 10px; font-weight: 800; letter-spacing: .19em; text-shadow: 0 0 17px rgba(var(--obs-accent-rgb), .42); }
.view-title {
  max-width: 930px;
  color: #f1fbff;
  font-family: "Bahnschrift", "Segoe UI Variable Display", sans-serif;
  font-size: clamp(39px, 4.1vw, 68px);
  font-stretch: condensed;
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .91;
  text-shadow: 0 0 36px rgba(var(--obs-accent-rgb), .12);
}
.view-subtitle { max-width: 690px; color: #9db6c6; font-size: 16px; line-height: 1.65; }

.button {
  min-height: 45px;
  padding: 0 20px;
  border: 1px solid rgba(var(--obs-accent-rgb), .67);
  border-radius: 3px 15px 3px 15px;
  background: linear-gradient(130deg, rgba(var(--obs-accent-rgb), .94), rgba(var(--obs-accent-rgb), .45));
  box-shadow: inset 0 1px rgba(255,255,255,.35), 0 0 0 1px rgba(var(--obs-accent-rgb), .09), 0 0 28px rgba(var(--obs-accent-rgb), .21);
  color: #03101b;
  font-family: "Cascadia Code", "Aptos Mono", monospace;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .09em;
}
.button:hover { transform: translateY(-3px) skewX(-2deg); border-color: #fff; box-shadow: inset 0 1px rgba(255,255,255,.54), 0 0 39px rgba(var(--obs-accent-rgb), .46); filter: brightness(1.11); }
.button--ghost { border-color: rgba(183, 228, 255, .28); background: rgba(5, 16, 28, .58); box-shadow: inset 0 1px rgba(255,255,255,.06); color: #d8efff; }
.button--red { border-color: rgba(255, 102, 121, .75); background: linear-gradient(135deg, #ff6679, #a82344); color: white; }

.grid { gap: 20px; }
.card, .turn-card, .podium-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(168, 223, 255, .15);
  border-radius: 3px 23px 3px 23px;
  background: linear-gradient(135deg, rgba(10, 25, 41, .82), rgba(4, 12, 22, .69) 62%, rgba(var(--obs-accent-rgb), .09));
  box-shadow: inset 0 1px rgba(255,255,255,.065), 0 22px 51px rgba(0,0,0,.21);
  color: #e6f6ff;
  backdrop-filter: blur(17px) saturate(1.2);
  transition: transform .34s cubic-bezier(.16,.84,.2,1), border-color .34s ease, box-shadow .34s ease;
}
.card::before, .turn-card::before, .podium-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 54%;
  height: 1px;
  background: linear-gradient(90deg, var(--obs-accent), transparent);
  box-shadow: 0 0 14px var(--obs-accent);
}
.card:hover, .mode-card:hover, .podium-card:hover { transform: translateY(-6px); border-color: rgba(var(--obs-accent-rgb), .48); box-shadow: inset 0 1px rgba(255,255,255,.10), 0 29px 62px rgba(0,0,0,.32), 0 0 29px rgba(var(--obs-accent-rgb), .08); }
.card-title, .card h2, .turn-card h2 { color: #f0f9ff; font-size: 18px; font-weight: 720; }
.card-kicker { color: #91adbf; font-size: 14px; line-height: 1.55; }

.dashboard-grid { grid-template-columns: minmax(350px, 1.55fr) minmax(220px, .83fr) minmax(220px, .83fr); }
.quick-card {
  min-height: 295px;
  clip-path: polygon(0 0, calc(100% - 35px) 0, 100% 35px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
  border-color: rgba(var(--obs-accent-rgb), .37);
  background:
    radial-gradient(27rem 19rem at 94% 50%, rgba(var(--obs-accent-rgb), .28), transparent 66%),
    linear-gradient(117deg, rgba(10, 29, 47, .94), rgba(3, 10, 19, .87) 58%, rgba(3, 10, 19, .58));
}
.quick-card::after { right: -4%; bottom: -32%; width: 48%; height: 128%; border: 1px solid rgba(var(--obs-accent-rgb), .38); border-radius: 0; background: conic-gradient(from 45deg, transparent, rgba(var(--obs-accent-rgb), .24), transparent 27%, rgba(255,255,255,.09), transparent 43%, rgba(var(--obs-accent-rgb), .13), transparent 70%); opacity: .86; transform: rotate(22deg); }
.quick-card h2 { color: #f4fbff; font-size: clamp(32px, 2.8vw, 47px); font-weight: 730; letter-spacing: -.055em; }
.quick-card p { color: #b4cedd; font-size: 16px; }
.quick-actions { gap: 11px; }
.stat-card { min-height: 143px; }
.stat-card strong { color: #f5fbff; font-family: "Bahnschrift", sans-serif; font-size: 37px; }
.stat-card .trend { color: #6ee9b5; font-size: 12px; }
.progress { height: 6px; border-radius: 0; background: rgba(198, 231, 255, .10); }
.progress i { background: linear-gradient(90deg, var(--obs-accent), #e9fbff); box-shadow: 0 0 13px rgba(var(--obs-accent-rgb), .63); }
.battle-row { border-color: rgba(172, 224, 255, .10); background: rgba(2, 10, 18, .20); }
.battle-row strong { color: #e6f6ff; }
.battle-row small, .battle-row time { color: #8faabe; }
.battle-row em { color: #ffc85d; }
.result { border: 1px solid rgba(93, 232, 176, .44); border-radius: 3px 9px 3px 9px; background: rgba(86, 230, 169, .12); color: #77ebbd; }
.result.loss { border-color: rgba(255, 105, 124, .4); background: rgba(255, 82, 106, .12); color: #ff93a2; }

.signal-deck {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(246px, .54fr);
  gap: 20px;
  margin-bottom: 20px;
}
.signal-core {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(246px, .78fr);
  min-height: 338px;
  overflow: hidden;
  border: 1px solid rgba(var(--obs-accent-rgb), .45);
  clip-path: polygon(0 0, calc(100% - 42px) 0, 100% 42px, 100% 100%, 32px 100%, 0 calc(100% - 32px));
  background:
    radial-gradient(32rem 26rem at 86% 54%, rgba(var(--obs-accent-rgb), .23), transparent 63%),
    linear-gradient(118deg, rgba(8, 25, 43, .96), rgba(3, 8, 17, .83) 67%, rgba(4, 12, 23, .64));
  box-shadow: inset 0 1px rgba(255,255,255,.10), 0 29px 72px rgba(0,0,0,.34), 0 0 34px rgba(var(--obs-accent-rgb), .10);
}
.signal-core::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 43%;
  height: 2px;
  background: linear-gradient(90deg, #effcff, var(--obs-accent), transparent);
  box-shadow: 0 0 17px var(--obs-accent);
}
.signal-core::after {
  content: "";
  position: absolute;
  right: -20%;
  bottom: -31%;
  width: 54%;
  height: 135%;
  border: 1px solid rgba(var(--obs-accent-rgb), .23);
  background: repeating-linear-gradient(45deg, transparent 0 25px, rgba(var(--obs-accent-rgb), .05) 26px 27px, transparent 28px 52px);
  transform: rotate(31deg);
}
.signal-copy { position: relative; z-index: 2; align-self: center; padding: 41px 16px 35px 39px; }
.signal-copy h2 { max-width: 615px; margin: 10px 0 15px; color: #f1fbff; font-family: "Bahnschrift", "Segoe UI Variable Display", sans-serif; font-size: clamp(28px, 2.55vw, 43px); font-weight: 720; letter-spacing: -.055em; line-height: .98; }
.signal-copy > p:not(.eyebrow) { max-width: 570px; color: #aac5d5; font-size: 16px; line-height: 1.62; }
.signal-copy .quick-actions { margin-top: 24px; }
.signal-readout { display: flex; flex-wrap: wrap; gap: 10px 21px; margin-top: 27px; color: #91b0c2; font-family: "Cascadia Code", "Aptos Mono", monospace; font-size: 10px; letter-spacing: .03em; }
.signal-readout span { display: inline-flex; align-items: baseline; gap: 6px; }
.signal-readout b { color: var(--obs-accent); font-size: 16px; font-weight: 800; text-shadow: 0 0 15px rgba(var(--obs-accent-rgb), .56); }
.prism-engine { position: relative; z-index: 1; width: min(23vw, 326px); min-width: 245px; aspect-ratio: 1; align-self: center; justify-self: center; filter: drop-shadow(0 0 28px rgba(var(--obs-accent-rgb), .22)); transform: perspective(670px) rotateX(58deg) rotateZ(-19deg); animation: engine-breathe 7.5s ease-in-out infinite alternate; }
.prism-engine::before, .prism-engine::after { content: ""; position: absolute; inset: 13%; border: 1px solid rgba(215, 244, 255, .25); transform: rotate(45deg); }
.prism-engine::after { inset: 28%; border-color: rgba(var(--obs-accent-rgb), .55); box-shadow: 0 0 25px rgba(var(--obs-accent-rgb), .45), inset 0 0 24px rgba(var(--obs-accent-rgb), .12); }
.prism-axis { position: absolute; top: 50%; left: 50%; width: 105%; height: 1px; transform-origin: 0 50%; background: linear-gradient(90deg, transparent, rgba(224, 249, 255, .17) 18%, var(--axis-color) 50%, rgba(224, 249, 255, .14) 82%, transparent); box-shadow: 0 0 13px var(--axis-color); }
.prism-axis--a { --axis-color: #54c4ff; transform: rotate(0deg); }
.prism-axis--b { --axis-color: #ff5b73; transform: rotate(120deg); }
.prism-axis--c { --axis-color: #ffcb63; transform: rotate(240deg); }
.prism-core { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; border: 1px solid rgba(244, 253, 255, .86); background: radial-gradient(circle at 34% 31%, #ffffff, var(--obs-accent) 31%, rgba(var(--obs-accent-rgb), .15) 66%, transparent 68%); box-shadow: 0 0 15px #effcff, 0 0 44px var(--obs-accent); transform: translate(-50%, -50%) rotate(45deg); }
.prism-corner { position: absolute; width: 25px; height: 25px; border: 1px solid rgba(255,255,255,.64); box-shadow: 0 0 19px currentColor; }
.prism-corner--blue { top: 10%; left: 47%; color: #55c4ff; background: #55c4ff; }
.prism-corner--red { top: 48%; right: 9%; color: #ff5a72; background: #ff5a72; }
.prism-corner--green { bottom: 10%; left: 47%; color: #54e2a1; background: #54e2a1; }
.prism-corner--yellow { top: 48%; left: 9%; color: #ffcd62; background: #ffcd62; }
.signal-ledger { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) minmax(118px, .48fr); gap: 10px; min-height: 338px; padding: 23px; overflow: hidden; border: 1px solid rgba(166, 223, 255, .20); border-radius: 3px 22px 3px 22px; background: linear-gradient(155deg, rgba(7, 21, 37, .88), rgba(3, 10, 18, .75)); box-shadow: inset 0 1px rgba(255,255,255,.07), 0 25px 58px rgba(0,0,0,.25); }
.signal-ledger::after { content: ""; position: absolute; right: -44px; bottom: -44px; width: 150px; height: 150px; border: 1px solid rgba(var(--obs-accent-rgb), .28); transform: rotate(45deg); box-shadow: 0 0 38px rgba(var(--obs-accent-rgb), .13); }
.signal-ledger .eyebrow { position: relative; z-index: 1; margin: 0; }
.signal-rank { position: relative; z-index: 1; display: grid; align-content: center; justify-items: start; min-height: 0; padding: 12px 16px; border: 1px solid rgba(var(--obs-accent-rgb), .28); border-radius: 2px 18px 2px 18px; background: linear-gradient(135deg, rgba(var(--obs-accent-rgb), .15), rgba(255,255,255,.02)); color: #f0fbff; text-align: left; transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.signal-rank:hover { transform: translateY(-3px); border-color: rgba(var(--obs-accent-rgb), .70); box-shadow: 0 0 27px rgba(var(--obs-accent-rgb), .17); }
.signal-rank span, .signal-rank small, .signal-rank em { font-family: "Cascadia Code", "Aptos Mono", monospace; font-size: 9px; font-style: normal; letter-spacing: .13em; }
.signal-rank span { color: #9dbaca; }
.signal-rank b { color: #f7fcff; font-family: "Bahnschrift", sans-serif; font-size: 62px; letter-spacing: -.1em; line-height: .88; text-shadow: 0 0 24px rgba(var(--obs-accent-rgb), .43); }
.signal-rank small { color: #a9c4d2; letter-spacing: .02em; }
.signal-rank em { position: absolute; right: 15px; bottom: 14px; color: #63e7af; letter-spacing: .03em; }
.signal-streak { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 12px; padding: 13px 0 1px; border-top: 1px solid rgba(170, 222, 255, .12); }
.signal-streak span { color: #9bb8c8; font-size: 12px; }
.signal-streak b { grid-row: span 2; color: var(--obs-accent); font-family: "Bahnschrift", sans-serif; font-size: 45px; line-height: .9; text-shadow: 0 0 19px rgba(var(--obs-accent-rgb), .40); }
.signal-streak small { color: #6f94aa; font-size: 10px; }
.operations-grid { grid-template-columns: minmax(350px, 1.32fr) minmax(226px, .66fr) minmax(226px, .66fr); }
.battle-console { min-height: 244px; }
.battle-console .battle-list { margin-top: 15px; }
.reward-console { min-height: 244px; background: linear-gradient(145deg, rgba(52, 36, 4, .75), rgba(4, 13, 23, .77)); }
.reward-console > strong { display: block; margin: 13px 0 10px; color: #ffcb63; font-family: "Bahnschrift", sans-serif; font-size: 43px; line-height: .9; text-shadow: 0 0 25px rgba(255, 200, 91, .32); }
.reward-console > strong small { color: #c9a95f; font-size: 13px; letter-spacing: .08em; }
.home-rules-card, .home-shop-card { min-height: 219px; }
.home-shop-card { background: linear-gradient(145deg, rgba(4, 54, 41, .68), rgba(3, 13, 23, .78)); }
@keyframes engine-breathe { from { transform: perspective(670px) rotateX(58deg) rotateZ(-19deg) scale(.95); } to { transform: perspective(670px) rotateX(58deg) rotateZ(18deg) scale(1.05); } }

.mode-grid { gap: 20px; }
.mode-card {
  min-height: 278px;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 17px 100%, 0 calc(100% - 17px));
  border: 1px solid rgba(165, 222, 255, .17);
  border-radius: 0;
  background: linear-gradient(145deg, rgba(9, 25, 42, .86), rgba(2, 9, 17, .69));
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 22px 47px rgba(0,0,0,.20);
  color: #e6f6ff;
}
.mode-card::before { top: -43px; right: -35px; width: 154px; height: 154px; border: 1px solid rgba(var(--obs-accent-rgb), .34); border-radius: 0; background: radial-gradient(circle, rgba(var(--obs-accent-rgb), .18), transparent 68%); transform: rotate(45deg); }
.mode-card h2 { color: #effaff; font-size: 23px; }
.mode-card p { color: #9db8c8; }
.mode-card small { color: var(--obs-accent); }
.mode-symbol { border: 1px solid rgba(var(--obs-accent-rgb), .38); border-radius: 3px 12px 3px 12px; background: rgba(var(--obs-accent-rgb), .11); color: var(--obs-accent); box-shadow: 0 0 22px rgba(var(--obs-accent-rgb), .12); }

.game-stage { gap: 23px; }
.board-window {
  overflow: visible;
  border: 1px solid rgba(177, 228, 255, .33);
  border-radius: 2px 28px 2px 28px;
  background: linear-gradient(135deg, rgba(121, 214, 255, .45), rgba(6, 15, 26, .94) 10%, rgba(6, 17, 28, .92));
  box-shadow: 0 0 0 7px rgba(4, 10, 17, .70), 0 0 0 8px rgba(var(--obs-accent-rgb), .13), 0 30px 85px rgba(0,0,0,.45), 0 0 48px rgba(var(--obs-accent-rgb), .13);
}
.board-window::before { content: "LIVE TACTICAL SURFACE"; position: absolute; top: -21px; left: 16px; color: var(--obs-accent); font-family: "Cascadia Code", "Aptos Mono", monospace; font-size: 9px; font-weight: 800; letter-spacing: .16em; text-shadow: 0 0 14px rgba(var(--obs-accent-rgb), .62); }
.board-window iframe { border-radius: 1px 20px 1px 20px; filter: saturate(1.05) contrast(1.04); }
.game-side { gap: 17px; }
.turn-card { border-color: rgba(var(--obs-accent-rgb), .39); }
.turn-card .turn-color { color: var(--obs-accent); text-shadow: 0 0 18px rgba(var(--obs-accent-rgb), .52); }
.turn-card strong, .compact-list b { color: #e5f4ff; }
.compact-list div { color: #9cb6c6; }

.ranking-layout, .profile-layout, .options-layout { gap: 21px; }
.filter { border-color: rgba(165, 221, 255, .22); border-radius: 2px 11px 2px 11px; background: rgba(6, 19, 31, .66); color: #9eb8c9; }
.filter.active { border-color: rgba(var(--obs-accent-rgb), .65); background: rgba(var(--obs-accent-rgb), .14); color: #eaffff; box-shadow: 0 0 20px rgba(var(--obs-accent-rgb), .15); }
.rank-table th { color: #88a7bb; }
.rank-table td { border-color: rgba(163, 218, 255, .10); color: #b8cfdd; }
.rank-table tr.me { background: linear-gradient(90deg, rgba(var(--obs-accent-rgb), .17), transparent); }
.rank-number, .rank-point { color: var(--obs-accent); text-shadow: 0 0 14px rgba(var(--obs-accent-rgb), .35); }
.player-cell { color: #f0f9ff; }
.commander-card { background: linear-gradient(145deg, rgba(13, 31, 51, .91), rgba(var(--obs-accent-rgb), .10)); }
.commander-avatar { border: 1px solid rgba(202, 241, 255, .40); border-radius: 2px 24px 2px 24px; background: linear-gradient(135deg, #c8f5ff, #347cad 55%, #061c32); box-shadow: 0 0 32px rgba(var(--obs-accent-rgb), .22); }
.mini-stat { border-color: rgba(165, 222, 255, .13); color: #a5bdcb; }
.mini-stat strong { color: #eefaff; }
.podium-card { border-radius: 2px 20px 2px 20px; background: linear-gradient(145deg, rgba(10, 25, 41, .86), rgba(3, 10, 18, .69)); }
.podium-card span { background: rgba(var(--obs-accent-rgb), .14); color: var(--obs-accent); }
.podium-card--first { border-color: rgba(255, 201, 91, .48); background: linear-gradient(145deg, rgba(62, 43, 7, .72), rgba(10, 18, 25, .74)); }

.rules-layout { gap: 20px; }
.rules-intro, .rules-board-card, .rules-two-column, .rules-recovery, .rules-timer { border: 1px solid rgba(166, 220, 255, .15); border-radius: 3px 26px 3px 26px; background: linear-gradient(145deg, rgba(10, 26, 43, .84), rgba(3, 10, 19, .72)); box-shadow: inset 0 1px rgba(255,255,255,.06), 0 22px 48px rgba(0,0,0,.19); }
.rules-intro h2, .rules-board-card h2, .rules-section-title { color: #f2fbff; }
.rules-intro p, .rules-copy p, .rules-lead, .rules-two-column p, .rules-recovery p, .rules-timer > p:not(.eyebrow) { color: #a2bccb; }
.territory-schema { border: 1px solid rgba(187, 232, 255, .32); border-radius: 2px 20px 2px 20px; box-shadow: 0 0 38px rgba(var(--obs-accent-rgb), .12); }
.territory-schema b { border-radius: 2px 12px 2px 12px; background: #061729; box-shadow: 0 0 24px rgba(var(--obs-accent-rgb), .32); }
.piece-rule { border-color: rgba(169, 224, 255, .14); border-radius: 2px 17px 2px 17px; background: rgba(4, 15, 26, .49); }
.piece-rule p, .mode-rule-grid p { color: #9db9c9; }
.rule-note { border-left-color: var(--obs-accent); border-radius: 0 17px 17px 0; background: rgba(var(--obs-accent-rgb), .095); color: #bdd4e2; }
.teleport-diagram { color: #aed0e2; }
.teleport-diagram i { background: linear-gradient(150deg, var(--obs-accent), #0a2439); box-shadow: 0 0 20px rgba(var(--obs-accent-rgb), .40); }
.strategic-mini-grid span { border-color: rgba(255, 203, 98, .35); border-radius: 2px 13px 2px 13px; background: rgba(255, 201, 91, .09); color: #ffcb62; }
.strategic-mini-grid b { color: #e9f8ff; }
.strategic-mini-grid small { color: #c2a564; }
.rules-recovery { background: linear-gradient(135deg, rgba(7, 51, 44, .77), rgba(4, 15, 26, .73)); }
.rules-timer { background: linear-gradient(135deg, rgba(57, 40, 7, .74), rgba(4, 15, 26, .73)); }
.timer-rule-values b { border-color: rgba(169, 224, 255, .19); border-radius: 2px 11px 2px 11px; background: rgba(5, 17, 29, .62); color: #b9d4e3; }
.timer-rule-values b.active { border-color: rgba(var(--obs-accent-rgb), .57); background: rgba(var(--obs-accent-rgb), .16); color: #ebfbff; }
.rules-score-table td { border-color: rgba(162, 218, 255, .10); color: #b0c7d5; }
.rules-score-table td:last-child { color: var(--obs-accent); }

.option-row { border-color: rgba(167, 223, 255, .11); }
.option-row h3 { color: #f1faff; }
.option-row p { color: #9db7c8; }
.setting-toggle { border-color: rgba(167, 222, 255, .20); border-radius: 2px 11px 2px 11px; background: rgba(5, 17, 29, .65); color: #aac4d3; }
.setting-toggle.on { border-color: rgba(var(--obs-accent-rgb), .58); background: rgba(var(--obs-accent-rgb), .13); color: #e5f7ff; }
.setting-toggle.on i { background: var(--obs-accent); box-shadow: 0 0 13px rgba(var(--obs-accent-rgb), .72); }
.time-choices { border-color: rgba(168, 223, 255, .16); border-radius: 3px 15px 3px 15px; background: rgba(4, 14, 24, .57); }
.time-choice { border-color: rgba(168, 223, 255, .11); background: transparent; color: #9db8c9; }
.time-choice.active { background: var(--obs-accent); color: #03111d; box-shadow: 0 0 21px rgba(var(--obs-accent-rgb), .40); }
.options-help { border-radius: 3px 24px 3px 24px; background: linear-gradient(145deg, #082e43, #06111f); box-shadow: 0 0 35px rgba(var(--obs-accent-rgb), .15); }
.options-help h2 { color: white; }
.options-help p { color: #bed9e8; }
.options-help .button--ghost { border-color: rgba(174, 229, 255, .36); background: rgba(255,255,255,.07); color: #e9f9ff; }

.field label { color: #99b6c7; font-size: 10px; }
.field input, .field select { border-color: rgba(168, 223, 255, .20); border-radius: 2px 11px 2px 11px; background: rgba(4, 15, 27, .76); color: #e9f8ff; }
.field input:focus, .field select:focus { border-color: var(--obs-accent); box-shadow: 0 0 0 4px rgba(var(--obs-accent-rgb), .11), 0 0 22px rgba(var(--obs-accent-rgb), .20); }
.collection-card { border-radius: 0; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.collection-card .token { border: 1px solid rgba(var(--obs-accent-rgb), .33); border-radius: 2px 15px 2px 15px; background: rgba(var(--obs-accent-rgb), .11); color: var(--obs-accent); }
.empty-state { border-color: rgba(var(--obs-accent-rgb), .30); border-radius: 2px 22px 2px 22px; color: #a5bfce; background: rgba(3, 14, 24, .35); }
.empty-state strong { color: #effaff; }
.empty-state span { color: var(--obs-accent); text-shadow: 0 0 25px rgba(var(--obs-accent-rgb), .55); }

.legal-document { border-radius: 3px 28px 3px 28px; }
.legal-document h2 { color: var(--obs-accent); }
.legal-document h3, .legal-document strong { color: #effaff; }
.legal-document p, .legal-document li, .legal-table th, .legal-table td { color: #aec6d3; }
.legal-document a, .inline-link { color: var(--obs-accent); }
.legal-notice { border-left-color: #ffca62; border-radius: 0 15px 15px 0; background: rgba(255, 201, 91, .10); color: #f8d795; }
.legal-meta { color: #8da9bb; }
.legal-table th, .legal-table td { border-color: rgba(163, 220, 255, .10); }

.modal-layer { z-index: 20; background: rgba(0, 4, 9, .72); backdrop-filter: blur(21px) saturate(1.22); }
.auth-modal { border: 1px solid rgba(162, 223, 255, .28); border-radius: 3px 30px 3px 30px; background: #06111e; box-shadow: 0 35px 120px rgba(0,0,0,.70), 0 0 70px rgba(var(--obs-accent-rgb), .13); }
.auth-art { background: linear-gradient(145deg, #0a3550, #06101e); }
.auth-art::after { color: rgba(169, 227, 255, .14); }
.auth-art h2 { color: #f3fbff; }
.auth-art p { color: #b3d2e4; }
.auth-form { color: #dff3ff; }
.auth-form h2 { color: #f1fbff; }
.auth-form p, .auth-switch, .check-line { color: #a8c0ce; }
.auth-switch button { color: var(--obs-accent); }
.close { color: #a5c0cf; }
.toast { z-index: 30; border: 1px solid rgba(var(--obs-accent-rgb), .47); border-radius: 2px 15px 2px 15px; background: rgba(4, 16, 28, .94); box-shadow: 0 18px 48px rgba(0,0,0,.47), 0 0 27px rgba(var(--obs-accent-rgb), .16); color: #effaff; }
.text-action { color: var(--obs-accent); }

#app-view.view-enter > * { animation: observatory-arrive .68s cubic-bezier(.16,.86,.2,1) both; }
#app-view.view-enter > :nth-child(2) { animation-delay: .07s; }
#app-view.view-enter > :nth-child(3) { animation-delay: .12s; }
#app-view.view-enter > :nth-child(4) { animation-delay: .17s; }
@keyframes observatory-arrive { from { opacity: 0; transform: translate3d(0, 23px, 0) scale(.985); filter: blur(8px); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); } }
@keyframes observatory-lattice { from { transform: translate3d(-2%, -1%, 0) rotate(0deg); } to { transform: translate3d(2%, 1%, 0) rotate(4deg); } }
@keyframes prism-orbit { from { transform: rotate(45deg) scale(.94); opacity: .49; } to { transform: rotate(56deg) scale(1.08); opacity: .98; } }
@keyframes prism-impact { 0% { opacity: .2; transform: scale(.88); } 48% { opacity: .9; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }

@media (max-width: 1420px) {
  .desktop-shell { grid-template-columns: 248px minmax(0, 1fr); }
  .topbar::before { left: 270px; }
  .app-view { padding: 33px; }
  .dashboard-grid { grid-template-columns: 1.22fr .89fr; }
  .dashboard-grid .wide { grid-column: span 1; }
  .mode-grid { grid-template-columns: 1fr; }
  .game-stage { grid-template-columns: minmax(0, 1fr) 250px; }
}
@media (max-width: 1080px) {
  body { overflow: auto; }
  .desktop-shell { grid-template: 82px auto minmax(0, 1fr) / 1fr; }
  .topbar { grid-column: 1; }
  .topbar::before { display: none; }
  .sidebar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 18px 21px; border-right: 0; border-bottom: 1px solid rgba(164, 222, 255, .13); overflow: visible; }
  .sidebar::before { top: auto; right: 24px; bottom: 0; left: 24px; width: auto; height: 1px; background: linear-gradient(90deg, #56c6ff 0 24%, #ff536b 24% 49%, #55e3a0 49% 74%, #ffcd62 74%); }
  .sidebar::after { display: none; }
  .nav-label, .nav-label--lower { margin-top: 0; }
  .sidebar-bottom { margin-top: 0; }
  .legal-links { display: none; }
  .app-view { min-height: 70vh; }
  .signal-deck, .game-stage, .ranking-layout, .profile-layout, .options-layout { grid-template-columns: 1fr; }
  .signal-ledger { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(116px, 1fr); min-height: 230px; }
  .signal-ledger > .eyebrow { grid-column: 1 / -1; }
  .signal-streak { align-self: stretch; }
}
@media (max-width: 700px) {
  .desktop-shell { grid-template-rows: 82px auto minmax(0, 1fr); }
  .topbar { padding: 0 17px; }
  .brand-wordmark { width: 167px; }
  .brand-logo { width: 159px; height: 51px; }
  .brand-wordmark small { font-size: 6px; }
  .profile-chip span:not(.avatar), .icon-button { display: none; }
  .sidebar { grid-template-columns: 1fr; }
  .app-view { padding: 28px 18px 42px; }
  .view-header { align-items: flex-start; flex-direction: column; }
  .view-title { font-size: 38px; }
  .signal-core { grid-template-columns: 1fr; min-height: 415px; }
  .signal-copy { padding: 35px 25px; }
  .signal-copy h2 { font-size: 32px; }
  .prism-engine { position: absolute; right: -40px; bottom: -37px; width: 245px; min-width: 0; opacity: .66; }
  .signal-ledger { grid-template-columns: 1fr; grid-template-rows: auto minmax(150px, 1fr) auto; }
  .signal-ledger > .eyebrow { grid-column: auto; }
  .dashboard-grid, .rules-stat-grid, .piece-rule-grid, .collection-grid, .ranking-podium { grid-template-columns: 1fr; }
  .rules-intro, .rules-board-card, .rules-two-column, .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  #prism-field::before, #prism-field::after, .app-view::before, #app-view.view-enter > * { animation: none !important; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}