/* HETMAN / board language — territory colours, silver rails and triangular grammar */
:root {
  --field-blue: #0087cf;
  --field-red: #da2c22;
  --field-green: #3f8765;
  --field-yellow: #ecd600;
  --field-silver: #c8ccce;
  --field-silver-bright: #eff4f5;
  --field-neutral: #9fc3d1;
}

#app-view[data-route="panel"], :root[data-route="panel"] { --obs-accent: var(--field-blue); --obs-accent-rgb: 0, 135, 207; }
#app-view[data-route="gra"], #app-view[data-route^="board-"], :root[data-route="gra"], :root[data-route^="board-"] { --obs-accent: var(--field-red); --obs-accent-rgb: 218, 44, 34; }
#app-view[data-route="zasady"], :root[data-route="zasady"] { --obs-accent: var(--field-yellow); --obs-accent-rgb: 236, 214, 0; }
#app-view[data-route="ranking"], :root[data-route="ranking"] { --obs-accent: #9fbcce; --obs-accent-rgb: 159, 188, 206; }
#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: var(--field-green); --obs-accent-rgb: 63, 135, 101; }
#app-view[data-route="ustawienia"], #app-view[data-route="profil"], :root[data-route="ustawienia"], :root[data-route="profil"] { --obs-accent: var(--field-blue); --obs-accent-rgb: 0, 135, 207; }
#app-view[data-route="regulamin"], #app-view[data-route="prywatnosc"], :root[data-route="regulamin"], :root[data-route="prywatnosc"] { --obs-accent: var(--field-neutral); --obs-accent-rgb: 159, 195, 209; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--obs-accent);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 11px;
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--field-silver-bright), var(--obs-accent) 42%, color-mix(in srgb, var(--obs-accent) 54%, #02070c));
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 0 6px rgba(var(--obs-accent-rgb), .65));
}
.eyebrow::after {
  content: "";
  width: 19px;
  height: 10px;
  flex: 0 0 auto;
  opacity: .82;
  background:
    linear-gradient(60deg, transparent 0 48%, var(--field-silver) 49% 52%, transparent 53%),
    linear-gradient(-60deg, transparent 0 48%, var(--field-silver) 49% 52%, transparent 53%),
    linear-gradient(30deg, var(--field-blue) 0 49%, var(--field-red) 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.view-subtitle {
  padding-left: 16px;
  border-left: 2px solid var(--field-silver);
  background: linear-gradient(90deg, rgba(var(--obs-accent-rgb), .13), transparent 72%);
}
.view-subtitle::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 8px 1px -12px;
  background: var(--obs-accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  vertical-align: middle;
}

.card, .turn-card, .podium-card, .signal-core, .signal-ledger {
  border-color: rgba(200, 204, 206, .37);
}
.card::before, .turn-card::before, .podium-card::before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: 1px;
  border-radius: inherit;
  background:
    linear-gradient(60deg, transparent 0 49%, rgba(238, 244, 245, .88) 49.5% 50.5%, transparent 51%) 0 0 / 36px 27px,
    linear-gradient(-60deg, transparent 0 49%, rgba(238, 244, 245, .72) 49.5% 50.5%, transparent 51%) 0 0 / 36px 27px,
    conic-gradient(from 225deg at 0 0, var(--field-blue), var(--field-silver) 16%, var(--field-red) 34%, var(--field-silver) 50%, var(--field-green) 68%, var(--field-silver) 83%, var(--field-yellow));
  box-shadow: none;
  opacity: .90;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.card > *, .turn-card > *, .podium-card > * { position: relative; z-index: 1; }
.card:hover::before, .turn-card:hover::before, .podium-card:hover::before { opacity: 1; filter: drop-shadow(0 0 7px rgba(var(--obs-accent-rgb), .42)); }

.signal-core::before {
  top: 0;
  left: 0;
  width: 65%;
  height: 2px;
  background: repeating-linear-gradient(60deg, var(--field-silver-bright) 0 11px, var(--field-blue) 12px 22px, var(--field-red) 23px 33px, var(--field-green) 34px 44px, var(--field-yellow) 45px 55px);
  box-shadow: 0 0 15px rgba(200, 204, 206, .42);
}
.signal-ledger::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 62%;
  height: 2px;
  background: repeating-linear-gradient(60deg, var(--field-silver-bright) 0 10px, var(--field-blue) 11px 20px, var(--field-red) 21px 30px, var(--field-green) 31px 40px, var(--field-yellow) 41px 50px);
  box-shadow: 0 0 14px rgba(200, 204, 206, .38);
}

.nav-item span {
  border: 0;
  border-radius: 0;
  background: linear-gradient(145deg, var(--field-silver-bright), var(--obs-accent) 48%, rgba(var(--obs-accent-rgb), .47));
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  color: #06121b;
  filter: drop-shadow(0 0 7px rgba(var(--obs-accent-rgb), .30));
}
.nav-item.active span { border: 0; background: linear-gradient(145deg, #fff, var(--obs-accent) 45%, rgba(var(--obs-accent-rgb), .42)); color: #06121b; }
.nav-item::after {
  content: "";
  position: absolute;
  right: 11px;
  width: 9px;
  height: 9px;
  opacity: 0;
  background: var(--obs-accent);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: rotate(90deg) scale(.5);
  transition: opacity .28s ease, transform .28s ease;
}
.nav-item.active::after { opacity: 1; transform: rotate(90deg) scale(1); }

.button, .filter, .setting-toggle, .time-choice {
  border-color: var(--field-silver);
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%, 8px 50%);
}
.button { background: linear-gradient(135deg, var(--obs-accent), color-mix(in srgb, var(--obs-accent) 49%, #06131c)); }
.button--ghost { background: linear-gradient(135deg, rgba(200,204,206,.16), rgba(3,11,18,.62)); color: var(--field-silver-bright); }
.filter.active, .setting-toggle.on, .time-choice.active { border-color: var(--field-silver-bright); background: linear-gradient(135deg, var(--obs-accent), color-mix(in srgb, var(--obs-accent) 52%, #06131c)); }
.text-action { color: var(--field-silver-bright); }
.text-action::before { content: ""; display: inline-block; width: 9px; height: 8px; margin-right: 7px; background: var(--obs-accent); clip-path: polygon(0 0, 100% 50%, 0 100%); }

.mode-card, .collection-card, .quick-card {
  border-color: rgba(200, 204, 206, .45);
  background-image:
    linear-gradient(60deg, transparent 0 49%, rgba(239,244,245,.11) 50% 51%, transparent 52%),
    linear-gradient(-60deg, transparent 0 49%, rgba(239,244,245,.08) 50% 51%, transparent 52%),
    linear-gradient(145deg, rgba(8, 26, 43, .89), rgba(3, 10, 18, .74));
  background-size: 42px 31px, 42px 31px, auto;
}
.mode-symbol, .collection-card .token {
  border-color: var(--field-silver);
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.mode-symbol { padding-top: 5px; }

.board-window {
  border: 0;
  border-radius: 0;
  padding: 7px;
  background:
    linear-gradient(60deg, transparent 0 48%, var(--field-silver) 49% 51%, transparent 52%) 0 0 / 42px 31px,
    linear-gradient(-60deg, transparent 0 48%, var(--field-silver) 49% 51%, transparent 52%) 0 0 / 42px 31px,
    conic-gradient(from 215deg, var(--field-blue), var(--field-silver) 17%, var(--field-red) 31%, var(--field-silver) 47%, var(--field-green) 66%, var(--field-silver) 81%, var(--field-yellow));
  box-shadow: 0 0 0 1px rgba(239,244,245,.54), 0 28px 85px rgba(0,0,0,.45), 0 0 34px rgba(var(--obs-accent-rgb), .20);
}
.board-window iframe { border-radius: 0; }
.board-window::before { left: 20px; color: var(--field-silver-bright); }

.territory-schema { border-color: var(--field-silver); }
.territory-schema::after { content: ""; position: absolute; inset: 10%; pointer-events: none; background: repeating-linear-gradient(60deg, transparent 0 24px, rgba(239,244,245,.20) 25px 26px, transparent 27px 49px), repeating-linear-gradient(-60deg, transparent 0 24px, rgba(239,244,245,.20) 25px 26px, transparent 27px 49px); opacity: .54; }
.territory-schema span, .territory-schema b { position: relative; z-index: 1; }
.prism-axis--a { --axis-color: var(--field-blue); }
.prism-axis--b { --axis-color: var(--field-red); }
.prism-axis--c { --axis-color: var(--field-yellow); }
.prism-corner--blue { color: var(--field-blue); background: var(--field-blue); }
.prism-corner--red { color: var(--field-red); background: var(--field-red); }
.prism-corner--green { color: var(--field-green); background: var(--field-green); }
.prism-corner--yellow { color: var(--field-yellow); background: var(--field-yellow); }

@media (max-width: 700px) {
  .eyebrow::after { display: none; }
  .view-subtitle { padding-left: 12px; }
}