/* Savi sriftai - apkarpyti is Google Fonts 2026-08-15.
   Buvo: 8 failai / 209 KB is fonts.gstatic.com, o pries pirma raide
   narsykle turejo atlikti DNS+TLS i DU svetimus domenus
   (fonts.googleapis.com del CSS + fonts.gstatic.com del failu).
   Dabar: 10 failu / 106 KB is savo domeno, per ta pati HTTP/2 rysi.

   Zenklu ruozas: Basic Latin + Latin-1 + Latin Extended-A. Dengia
   VISA lietuviu abecele ir lenku/ceku/vokieciu/skandinavu vardus -
   zaideju vardai ir profiliu tekstai yra vartotojo kuriami, tad
   karpyti tik iki siandien matomu zenklu butu buve nesaugu.
   Inter ir JetBrains Mono lieka KINTAMIEJI, tik svorio asis
   apribota iki realiai naudojamos (400-600 / 400-700), tad 500 ir
   600 yra TIKRI svoriai, o ne narsykles imituotas paryskinimas. */

@font-face{
  font-family:'Chakra Petch';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/chakra-petch-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Chakra Petch';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/chakra-petch-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Chakra Petch';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/chakra-petch-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Chakra Petch';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/chakra-petch-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Chakra Petch';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/chakra-petch-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Chakra Petch';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/chakra-petch-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('/assets/fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('/assets/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/jetbrains-mono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   SWEDEN CODES - Dark Premium Gaming (Ice / Blood / Night-Blue)
   Two worlds. One network.  (CS 1.6 Zombie Plague 4.3 × SAMP SFG)
   Design system: ice white = shared chrome · blood red = CS only ·
   electric night-blue/violet = SAMP only. Vanilla CSS, no frameworks.
   NOTE: legacy class name .dot--cyan renders the ice brand color.
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  /* surfaces - midnight navy (Nordic) */
  --c-void:        #060A12;
  --c-void-2:      #03060C;
  --c-panel:       #0B1220;
  --c-panel-2:     #0E1729;
  --c-grid:        #1B2840;
  --c-grid-soft:   rgba(140, 170, 255, 0.06);

  /* neutral OS accent - ice white/silver (shared chrome only) */
  --c-brand:        #E9F2FA;
  --c-brand-dim:    #7E92A8;
  --c-brand-glow:   rgba(214, 234, 255, 0.5);

  /* NODE-01 - CS 1.6 zombie signal (never on shared chrome) */
  --c-zombie:      #E8414D;
  --c-zombie-deep: #3A0D13;
  --c-zombie-glow: rgba(232, 65, 77, 0.5);

  /* NODE-02 - SAMP city signal: electric night-blue (never on shared chrome) */
  --c-city:       #4DA3FF;
  --c-city-deep:  #0E2A52;
  --c-city-glow:  rgba(77, 163, 255, 0.5);
  --c-city-2:     #8B5CF6;

  /* status + text */
  --c-red:         #FF3B47;
  --c-good:        #46D6A0;   /* success / valid / clean (status traffic-light) */
  --c-white:       #EAF0F7;
  --c-hot:         #F7FAFF;
  --c-body:        #B9C6D8;
  --c-gray:        #8295AC;
  --c-gray-dim:    #5C6B82;

  /* local context engine - re-scoped per server node */
  --node-accent:   var(--c-brand);
  --node-accent-2: var(--c-brand-dim);
  --node-glow:     var(--c-brand-glow);

  /* geometry + rhythm */
  --space:      clamp(4rem, 9vw, 8rem);
  --maxw:       1440px;
  --bracket:    18px;
  --radius:     2px;
  --clip-panel: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  --hero-inset: clamp(14px, 2.5vw, 30px);

  /* motion */
  --ease-hud:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  180ms;
  --dur-mid:   500ms;

  /* type */
  --font-display: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', 'Cascadia Code', Consolas, ui-monospace, monospace;
}

/* SFG panel - 2026-06-10v: honor medal badge system */
.pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack,
.pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack--single {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  width: auto;
  min-width: 0;
  max-width: min(100%, 560px);
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack[hidden] {
  display: none;
}

.pp-page.pp-logged #sampDash .pp-honor-badge,
.pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack--single .pp-honor-badge {
  --badge-a: var(--c-city);
  --badge-b: var(--c-city-2);
  position: relative;
  display: inline-grid;
  grid-template-columns: 30px minmax(34px, max-content);
  align-items: center;
  gap: 6px;
  width: auto;
  min-width: 42px;
  height: 38px;
  padding: 3px 10px 3px 4px;
  border-radius: 11px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--badge-a) 54%, rgba(255, 255, 255, 0.18));
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 38%),
    radial-gradient(circle at 18px 15px, color-mix(in srgb, var(--badge-a) 36%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--badge-a) 18%, rgba(12, 18, 31, 0.98)), rgba(3, 6, 12, 0.86));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.035) inset,
    0 10px 22px -18px var(--badge-a),
    0 0 22px -14px var(--badge-b);
}

.pp-page.pp-logged #sampDash .pp-honor-badge::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 10px;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.18), transparent 30%, transparent 72%, rgba(255, 255, 255, 0.08));
  mix-blend-mode: screen;
}

.pp-page.pp-logged #sampDash .pp-honor-badge .pp-char__badge,
.pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack--single .pp-honor-badge .pp-char__badge {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  max-width: 30px;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.54));
}

.pp-page.pp-logged #sampDash .pp-honor-badge__label {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 34px;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #F8FBFF;
  font-size: 0.62rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.54);
}

.pp-page.pp-logged #sampDash .pp-honor-badge--violet { --badge-a: #B606D6; --badge-b: #F0ABFC; }
.pp-page.pp-logged #sampDash .pp-honor-badge--red { --badge-a: #FF3B47; --badge-b: #FFC4C8; }
.pp-page.pp-logged #sampDash .pp-honor-badge--blue { --badge-a: #4DA3FF; --badge-b: #C7E3FF; }
.pp-page.pp-logged #sampDash .pp-honor-badge--green { --badge-a: #5BC976; --badge-b: #D0FBE0; }
.pp-page.pp-logged #sampDash .pp-honor-badge--gold { --badge-a: #FFD76A; --badge-b: #FFF4BA; }
.pp-page.pp-logged #sampDash .pp-honor-badge--silver { --badge-a: #D8E2EF; --badge-b: #FFFFFF; }
.pp-page.pp-logged #sampDash .pp-honor-badge--bronze { --badge-a: #D99A5B; --badge-b: #FFE0B8; }
.pp-page.pp-logged #sampDash .pp-honor-badge--cyan { --badge-a: #56F0FF; --badge-b: #D5FBFF; }
.pp-page.pp-logged #sampDash .pp-honor-badge--teal { --badge-a: #2DD4BF; --badge-b: #D6FFFA; }
.pp-page.pp-logged #sampDash .pp-honor-badge--orange { --badge-a: #FF9E45; --badge-b: #FFE2BE; }
.pp-page.pp-logged #sampDash .pp-honor-badge--pink { --badge-a: #FF5DA8; --badge-b: #FFD0E6; }
.pp-page.pp-logged #sampDash .pp-honor-badge--slate { --badge-a: #AEBBCC; --badge-b: #F8FBFF; }

.pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack__more {
  display: inline-grid;
  place-items: center;
  width: auto;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--c-city) 44%, rgba(255, 255, 255, 0.14));
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 42%),
    rgba(5, 10, 19, 0.86);
  color: #F8FBFF;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: 0 0 18px -12px var(--c-city-glow);
}

@media (max-width: 620px) {
  .pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack,
  .pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack--single {
    max-width: 100%;
    gap: 6px;
  }

  .pp-page.pp-logged #sampDash .pp-honor-badge,
  .pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack--single .pp-honor-badge {
    grid-template-columns: 28px;
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 3px;
    border-radius: 9px;
  }

  .pp-page.pp-logged #sampDash .pp-honor-badge .pp-char__badge,
  .pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack--single .pp-honor-badge .pp-char__badge {
    width: 28px;
    height: 28px;
    max-width: 28px;
  }

  .pp-page.pp-logged #sampDash .pp-honor-badge__label {
    display: none;
  }

  .pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack__more {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 9px;
    font-size: 0.68rem;
  }
}

/* Homepage server cards - final outer chassis override */
.node {
  isolation: isolate;
  transform: translateZ(0);
}

.node::after {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--node-accent) 8%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(15, 24, 40, 0.94), rgba(5, 9, 17, 0.9));
  border-color: color-mix(in srgb, var(--node-accent) 26%, rgba(126, 146, 168, 0.2));
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 0 0 1px rgba(255, 255, 255, 0.018);
}

.node__head {
  min-height: 48px;
  padding: 12px 18px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--node-accent) 11%, transparent), transparent 58%),
    rgba(3, 6, 12, 0.56);
  border-bottom-color: color-mix(in srgb, var(--node-accent) 26%, rgba(126, 146, 168, 0.16));
}

.node__head::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 34px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--node-accent), transparent 64%);
  opacity: 0.5;
}

.node__type {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #B8C5D6;
  font-weight: 800;
}

.node__type::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--node-accent);
  box-shadow: 0 0 14px var(--node-glow);
}

.node__live {
  min-height: 26px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--node-accent) 36%, rgba(126, 146, 168, 0.16));
  border-radius: 999px;
  background: rgba(3, 6, 12, 0.42);
}

.node__body {
  gap: 16px;
  padding-top: clamp(22px, 3vw, 34px);
}

.node__name {
  position: relative;
  display: inline-grid;
  width: fit-content;
  max-width: 100%;
  padding-bottom: 12px;
  color: #F8FBFF;
  text-shadow: 0 0 22px rgba(255, 255, 255, 0.08);
}

.node__name::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(100%, 210px);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--node-accent), transparent);
  box-shadow: 0 0 16px -7px var(--node-glow);
}

.node__name span {
  display: inline-block;
  margin-left: 8px;
}

.node__pitch {
  max-width: 52ch;
  color: #AEBBCC;
  line-height: 1.65;
}

.node .ipline {
  position: relative;
  border-style: solid;
  border-color: color-mix(in srgb, var(--node-accent) 22%, rgba(126, 146, 168, 0.18));
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--node-accent) 9%, transparent), transparent 58%),
    rgba(3, 6, 12, 0.54);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.node .ipline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: var(--node-accent);
  opacity: 0.72;
}

.node .ipline__label {
  color: #8FA0B6;
  font-weight: 800;
}

.node .ipline__value {
  border-bottom-color: color-mix(in srgb, var(--node-accent) 72%, #fff);
  color: #F8FBFF;
}

.node .features {
  gap: 8px;
  padding: 2px 0;
}

.node .features li {
  align-items: center;
  min-height: 31px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--node-accent) 12%, rgba(126, 146, 168, 0.13));
  border-radius: 7px;
  background: rgba(3, 6, 12, 0.26);
  color: #AEBBCC;
}

.node .features__tick {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  flex: none;
  border-radius: 5px;
  background: color-mix(in srgb, var(--node-accent) 13%, transparent);
  line-height: 1;
}

.node__ctas {
  gap: 10px;
  padding-top: 8px;
}

.node__ctas .cta,
.node__ctas .copybtn {
  border-radius: 8px;
}

.node__emblem {
  opacity: 0.08;
  filter: drop-shadow(0 0 20px var(--node-glow));
}

@media (max-width: 600px) {
  .node__head {
    min-height: 44px;
    padding: 10px 13px;
  }

  .node__head::after {
    left: 13px;
    right: 24px;
  }

  .node__body {
    gap: 14px;
    padding-inline: 18px;
  }

  .node__name {
    font-size: 1.46rem;
  }

  .node__name span {
    margin-left: 5px;
  }

  .node .ipline,
  .node .features li {
    border-radius: 7px;
  }
}


/* CS panel - 2026-06-11: live Zombie Plague intel block */
.pp-page.pp-logged #csDash .pp-cs-intel {
  overflow: hidden;
  border-color: color-mix(in srgb, var(--c-zombie) 34%, var(--swc-line));
  background:
    linear-gradient(135deg, rgba(232, 65, 77, 0.12), transparent 38%),
    linear-gradient(180deg, var(--swc-surface-strong), var(--swc-surface));
}

.pp-page.pp-logged #csDash .pp-cs-intel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(232, 65, 77, 0.14), transparent),
    repeating-linear-gradient(180deg, transparent 0 11px, rgba(255, 255, 255, 0.025) 12px);
  opacity: 0.32;
  transform: translateX(-58%);
  animation: csIntelSweep 7s linear infinite;
}

.pp-cs-intel__head {
  position: relative;
  z-index: 1;
}

.pp-cs-intel__class {
  color: var(--c-white);
  border-color: rgba(232, 65, 77, 0.58);
  background: linear-gradient(135deg, rgba(232, 65, 77, 0.28), rgba(3, 6, 12, 0.55));
  box-shadow: 0 0 18px -9px var(--c-zombie-glow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.pp-cs-live {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid rgba(232, 65, 77, 0.2);
  border-radius: 8px;
  background: rgba(3, 6, 12, 0.5);
}

.pp-cs-signal {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  min-height: 78px;
  padding: 14px 12px;
  border: 1px solid rgba(126, 146, 168, 0.18);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(232, 65, 77, 0.1), rgba(6, 10, 18, 0.78)),
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(255, 255, 255, 0.035) 15px);
}

.pp-cs-signal i {
  width: 8px;
  min-height: 20px;
  border-radius: 8px 8px 2px 2px;
  background: linear-gradient(180deg, #FFE1E5, var(--c-zombie) 48%, #8B1620);
  box-shadow: 0 0 14px rgba(232, 65, 77, 0.45);
  animation: csSignalBars 1.55s ease-in-out infinite;
}

.pp-cs-signal i:nth-child(1) { height: 24px; animation-delay: -0.2s; }
.pp-cs-signal i:nth-child(2) { height: 42px; animation-delay: -0.42s; }
.pp-cs-signal i:nth-child(3) { height: 58px; animation-delay: -0.68s; }
.pp-cs-signal i:nth-child(4) { height: 36px; animation-delay: -0.35s; }
.pp-cs-signal i:nth-child(5) { height: 50px; animation-delay: -0.55s; }

.pp-cs-live__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 4px 2px;
}

.pp-cs-live__label,
.pp-cs-metrics span,
.pp-cs-progress__label span,
.pp-cs-progress small {
  color: var(--c-gray);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pp-cs-live__body strong {
  color: var(--c-hot);
  font-size: clamp(2.05rem, 5vw, 3.15rem);
  line-height: 0.92;
  white-space: nowrap;
  text-shadow: 0 0 20px rgba(232, 65, 77, 0.24);
}

.pp-cs-live__meta {
  min-width: 0;
  color: var(--c-body);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.pp-cs-live__meta b {
  color: var(--c-white);
}

.pp-cs-metrics {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pp-cs-metrics div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
  padding: 13px 14px;
  border: 1px solid rgba(126, 146, 168, 0.16);
  border-radius: 7px;
  background: rgba(3, 6, 12, 0.42);
}

.pp-cs-metrics strong {
  min-width: 0;
  color: var(--c-white);
  font-size: 0.94rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.pp-cs-progress {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.pp-cs-progress__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pp-cs-progress__label b,
.pp-cs-progress small b {
  color: var(--c-white);
}

.pp-cs-progress__track {
  display: block;
  height: 8px;
  overflow: hidden;
  border: 1px solid rgba(232, 65, 77, 0.16);
  border-radius: 999px;
  background: rgba(3, 6, 12, 0.78);
}

.pp-cs-progress__track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #81202A, var(--c-zombie), #FFE1E5);
  box-shadow: 0 0 18px rgba(232, 65, 77, 0.5);
  transition: width 0.7s var(--ease-hud);
}

.pp-page.pp-logged #csDash .pp-cs-economy,
.pp-page.pp-logged #csDash .pp-cs-events-card {
  border-color: color-mix(in srgb, var(--c-zombie) 24%, var(--swc-line));
  background:
    radial-gradient(circle at 12% 0%, rgba(232, 65, 77, 0.11), transparent 34%),
    linear-gradient(180deg, var(--swc-surface-strong), var(--swc-surface));
}

.pp-cs-tier {
  display: grid;
  gap: 11px;
  padding: 14px;
  border: 1px solid rgba(232, 65, 77, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(232, 65, 77, 0.1), transparent 62%),
    rgba(3, 6, 12, 0.46);
}

.pp-cs-tier__copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.pp-cs-tier__copy span,
.pp-cs-tier__copy small,
.pp-cs-economy-grid span,
.pp-cs-event__label {
  color: var(--c-gray);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pp-cs-tier__copy strong {
  color: var(--c-white);
  font-size: 1.18rem;
  line-height: 1.1;
}

.pp-cs-tier__copy small {
  margin-left: auto;
  color: #FFD4D8;
}

.pp-cs-tier__track {
  display: block;
  height: 9px;
  overflow: hidden;
  border: 1px solid rgba(232, 65, 77, 0.16);
  border-radius: 999px;
  background: rgba(3, 6, 12, 0.78);
}

.pp-cs-tier__track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5B1420, var(--c-zombie), #FFD6DB);
  box-shadow: 0 0 18px rgba(232, 65, 77, 0.48);
  transition: width 0.7s var(--ease-hud);
}

.pp-cs-tier-badge {
  color: #FFD4D8;
  border-color: rgba(232, 65, 77, 0.5);
  background: rgba(232, 65, 77, 0.11);
}

.pp-cs-economy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.pp-cs-economy-grid div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid rgba(126, 146, 168, 0.16);
  border-radius: 7px;
  background: rgba(3, 6, 12, 0.42);
}

.pp-cs-economy-grid strong {
  min-width: 0;
  color: var(--c-white);
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.pp-cs-events {
  display: grid;
  gap: 8px;
}

.pp-cs-event {
  display: grid;
  grid-template-columns: 44px minmax(86px, 0.7fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid rgba(126, 146, 168, 0.14);
  border-radius: 7px;
  background: rgba(3, 6, 12, 0.42);
}

.pp-cs-event__tag {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  min-height: 24px;
  border-radius: 999px;
  color: #060A12;
  background: linear-gradient(135deg, #FFE1E5, var(--c-zombie));
  font-size: 0.62rem;
  font-weight: 900;
}

.pp-cs-event strong {
  min-width: 0;
  color: var(--c-white);
  overflow-wrap: anywhere;
}

.pp-page.pp-logged #csDash .pp-cs-board-card {
  border-color: rgba(232, 65, 77, 0.22);
}

.pp-page.pp-logged #csDash .pp-cs-board-card .pp-board {
  border: 1px solid rgba(126, 146, 168, 0.14);
  border-radius: 8px;
  background: rgba(3, 6, 12, 0.34);
}

.pp-page.pp-logged #csDash .pp-cs-board-card .pp-board th {
  background: linear-gradient(180deg, rgba(232, 65, 77, 0.12), rgba(255, 255, 255, 0.025));
}

.pp-page.pp-logged #csDash .pp-cs-board-card .pp-board td:nth-child(2) {
  color: var(--c-white);
  font-weight: 700;
}

.pp-page.pp-logged #csDash .pp-cs-board-card .pp-board td:nth-child(3) {
  color: #FFD4D8;
  font-weight: 700;
  white-space: nowrap;
}

.pp-cs-rank-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid rgba(232, 65, 77, 0.32);
  border-radius: 999px;
  color: var(--c-white);
  background: rgba(232, 65, 77, 0.12);
}

.pp-page.pp-logged #csDash .pp-board__me .pp-cs-rank-pill {
  background: var(--c-zombie);
  color: #060A12;
  border-color: #FF9AA2;
}

@keyframes csSignalBars {
  0%, 100% { transform: scaleY(0.62); opacity: 0.62; }
  45% { transform: scaleY(1); opacity: 1; }
}

@keyframes csIntelSweep {
  0% { transform: translateX(-62%); opacity: 0; }
  18%, 72% { opacity: 0.32; }
  100% { transform: translateX(62%); opacity: 0; }
}

@media (max-width: 620px) {
  .pp-cs-live {
    grid-template-columns: 1fr;
  }

  .pp-cs-metrics {
    grid-template-columns: 1fr;
  }

  .pp-cs-economy-grid {
    grid-template-columns: 1fr;
  }

  .pp-cs-event {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
  }

  .pp-cs-event strong {
    grid-column: 2;
  }

  .pp-cs-signal {
    min-height: 58px;
  }

  .pp-cs-live__body strong {
    font-size: 2.05rem;
  }
}

/* Homepage server cards - MAX PRO outer shell */
.node {
  --node-line-soft: color-mix(in srgb, var(--node-accent) 18%, rgba(126, 146, 168, 0.16));
  --node-line-strong: color-mix(in srgb, var(--node-accent) 42%, rgba(255, 255, 255, 0.16));
  --node-glass: rgba(7, 12, 22, 0.72);
}

.node::after {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--node-accent) 12%, transparent), transparent 34%),
    linear-gradient(168deg, rgba(255, 255, 255, 0.055), transparent 18% 74%, rgba(255, 255, 255, 0.025)),
    radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--node-accent) 16%, transparent), transparent 30%),
    linear-gradient(180deg, rgba(16, 25, 42, 0.96), rgba(4, 8, 15, 0.92));
  border-color: var(--node-line-strong);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.42),
    0 0 40px -27px var(--node-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(255, 255, 255, 0.025),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.node__head {
  min-height: 52px;
  padding: 13px 18px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--node-accent) 15%, transparent), transparent 54%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    rgba(3, 6, 12, 0.64);
  border-bottom-color: var(--node-line-soft);
}

.node__head::after {
  height: 2px;
  background: linear-gradient(90deg, var(--node-accent), color-mix(in srgb, var(--node-accent) 34%, transparent), transparent 78%);
  opacity: 0.72;
}

.node > .node__head::before {
  background: var(--node-line-strong);
}

.node__type {
  padding: 5px 0;
  color: #D2DBE8;
  letter-spacing: 0.16em;
}

.node__type::before {
  width: 8px;
  height: 8px;
}

.node__live {
  padding: 6px 10px;
  border-color: var(--node-line-strong);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--node-accent) 14%, transparent), rgba(3, 6, 12, 0.55));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 0 20px -14px var(--node-glow);
}

.node__body {
  gap: 17px;
  padding-top: clamp(24px, 3.2vw, 36px);
}

.node__name {
  padding-bottom: 14px;
  font-size: clamp(1.62rem, 2.8vw, 2.18rem);
  letter-spacing: 0.075em;
}

.node__name::after {
  width: min(100%, 260px);
  height: 4px;
  background: linear-gradient(90deg, var(--node-accent), color-mix(in srgb, var(--node-accent) 28%, transparent), transparent);
}

.node__name span {
  margin-left: 10px;
}

.node__pitch {
  max-width: 58ch;
  padding: 13px 15px;
  border-left: 3px solid color-mix(in srgb, var(--node-accent) 54%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--node-accent) 7%, transparent), transparent 72%),
    rgba(3, 6, 12, 0.24);
}

.node .ipline {
  min-height: 62px;
  padding: 13px 14px;
  border-color: var(--node-line-strong);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--node-accent) 13%, transparent), transparent 54%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent),
    rgba(3, 6, 12, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 10px 24px rgba(0, 0, 0, 0.16);
}

.node .ipline::before {
  top: 11px;
  bottom: 11px;
  width: 4px;
  box-shadow: 0 0 16px -5px var(--node-glow);
}

.node .ipline__label {
  color: #A8B6C8;
}

.node .ipline__value {
  color: #F8FBFF;
  font-size: 1rem;
  text-shadow: 0 0 18px color-mix(in srgb, var(--node-accent) 16%, transparent);
}

.node .features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.node .features li {
  min-height: 42px;
  padding: 9px 10px;
  border-color: var(--node-line-soft);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--node-accent) 8%, transparent), transparent 58%),
    var(--node-glass);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.node .features__tick {
  width: 20px;
  height: 20px;
  border: 1px solid color-mix(in srgb, var(--node-accent) 28%, transparent);
}

.node__ctas {
  gap: 11px;
}

.node__ctas .cta,
.node__ctas .copybtn {
  min-height: 42px;
  border-color: var(--node-line-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 12px 22px rgba(0, 0, 0, 0.18);
}

.node__emblem {
  opacity: 0.105;
}

@media (max-width: 760px) {
  .node .features {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .node__head {
    min-height: 46px;
    padding: 10px 13px;
  }

  .node__name {
    font-size: 1.5rem;
    letter-spacing: 0.055em;
  }

  .node__pitch {
    padding: 11px 12px;
  }

  .node .ipline {
    min-height: 58px;
    padding: 12px 13px;
  }

  .node .features li {
    min-height: 38px;
  }
}

/* Homepage server cards - outer chassis polish only */
.node {
  isolation: isolate;
  transform: translateZ(0);
}

.node::after {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--node-accent) 8%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(15, 24, 40, 0.94), rgba(5, 9, 17, 0.9));
  border-color: color-mix(in srgb, var(--node-accent) 26%, rgba(126, 146, 168, 0.2));
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 0 0 1px rgba(255, 255, 255, 0.018);
}

.node__head {
  min-height: 48px;
  padding: 12px 18px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--node-accent) 11%, transparent), transparent 58%),
    rgba(3, 6, 12, 0.56);
  border-bottom-color: color-mix(in srgb, var(--node-accent) 26%, rgba(126, 146, 168, 0.16));
}

.node__head::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 34px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--node-accent), transparent 64%);
  opacity: 0.5;
}

.node__type {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #B8C5D6;
  font-weight: 800;
}

.node__type::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--node-accent);
  box-shadow: 0 0 14px var(--node-glow);
}

.node__live {
  min-height: 26px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--node-accent) 36%, rgba(126, 146, 168, 0.16));
  border-radius: 999px;
  background: rgba(3, 6, 12, 0.42);
}

.node__body {
  gap: 16px;
  padding-top: clamp(22px, 3vw, 34px);
}

.node__name {
  position: relative;
  display: inline-grid;
  width: fit-content;
  max-width: 100%;
  padding-bottom: 12px;
  color: #F8FBFF;
  text-shadow: 0 0 22px rgba(255, 255, 255, 0.08);
}

.node__name::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(100%, 210px);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--node-accent), transparent);
  box-shadow: 0 0 16px -7px var(--node-glow);
}

.node__name span {
  display: inline-block;
  margin-left: 8px;
}

.node__pitch {
  max-width: 52ch;
  color: #AEBBCC;
  line-height: 1.65;
}

.node .ipline {
  position: relative;
  border-style: solid;
  border-color: color-mix(in srgb, var(--node-accent) 22%, rgba(126, 146, 168, 0.18));
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--node-accent) 9%, transparent), transparent 58%),
    rgba(3, 6, 12, 0.54);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.node .ipline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: var(--node-accent);
  opacity: 0.72;
}

.node .ipline__label {
  color: #8FA0B6;
  font-weight: 800;
}

.node .ipline__value {
  border-bottom-color: color-mix(in srgb, var(--node-accent) 72%, #fff);
  color: #F8FBFF;
}

.node .features {
  gap: 8px;
  padding: 2px 0;
}

.node .features li {
  align-items: center;
  min-height: 31px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--node-accent) 12%, rgba(126, 146, 168, 0.13));
  border-radius: 7px;
  background: rgba(3, 6, 12, 0.26);
  color: #AEBBCC;
}

.node .features__tick {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  flex: none;
  border-radius: 5px;
  background: color-mix(in srgb, var(--node-accent) 13%, transparent);
  line-height: 1;
}

.node__ctas {
  gap: 10px;
  padding-top: 8px;
}

.node__ctas .cta,
.node__ctas .copybtn {
  border-radius: 8px;
}

.node__emblem {
  opacity: 0.08;
  filter: drop-shadow(0 0 20px var(--node-glow));
}

@media (max-width: 600px) {
  .node__head {
    min-height: 44px;
    padding: 10px 13px;
  }

  .node__head::after {
    left: 13px;
    right: 24px;
  }

  .node__body {
    gap: 14px;
    padding-inline: 18px;
  }

  .node__name {
    font-size: 1.46rem;
  }

  .node__name span {
    margin-left: 5px;
  }

  .node .ipline,
  .node .features li {
    border-radius: 7px;
  }
}

/* SFG panel: personal server-top rank cards */
.pp-page.pp-logged #sampDash .pp-server-top {
  grid-column: 1 / -1;
}

.pp-page.pp-logged #sampDash .pp-server-top .pp-card__row {
  align-items: center;
  gap: 12px;
}

.pp-page.pp-logged #sampDash .pp-server-ranks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.pp-page.pp-logged #sampDash .pp-server-rank {
  position: relative;
  min-height: 94px;
  overflow: hidden;
  padding: 13px 14px 12px;
  border: 1px solid color-mix(in srgb, var(--c-city) 20%, rgba(126, 146, 168, 0.24));
  border-radius: 6px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--c-city) 10%, transparent), transparent 52%),
    linear-gradient(180deg, rgba(17, 26, 42, 0.78), rgba(5, 9, 17, 0.7));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.pp-page.pp-logged #sampDash .pp-server-rank::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--c-city), transparent);
  opacity: 0.78;
}

.pp-page.pp-logged #sampDash .pp-server-rank__head,
.pp-page.pp-logged #sampDash .pp-server-rank__foot {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.pp-page.pp-logged #sampDash .pp-server-rank__title {
  color: #F8FBFF;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.25;
}

.pp-page.pp-logged #sampDash .pp-server-rank__place {
  color: #F8FBFF;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pp-page.pp-logged #sampDash .pp-server-rank__foot {
  align-items: flex-end;
  margin-top: 18px;
}

.pp-page.pp-logged #sampDash .pp-server-rank__label {
  color: #91A1B4;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pp-page.pp-logged #sampDash .pp-server-rank__value {
  color: var(--c-city-2);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pp-page.pp-logged #sampDash .pp-server-rank.is-top {
  border-color: color-mix(in srgb, var(--c-city) 42%, rgba(255, 255, 255, 0.16));
}

.pp-page.pp-logged #sampDash .pp-server-rank.is-elite {
  border-color: rgba(255, 215, 106, 0.64);
  background:
    linear-gradient(135deg, rgba(255, 215, 106, 0.14), transparent 54%),
    linear-gradient(180deg, rgba(17, 26, 42, 0.82), rgba(5, 9, 17, 0.72));
}

.pp-page.pp-logged #sampDash .pp-server-rank.is-elite::before {
  background: linear-gradient(180deg, #FFD76A, transparent);
}

.pp-page.pp-logged #sampDash .pp-server-rank--empty {
  display: grid;
  place-items: center;
  min-height: 58px;
  color: #AEBDD0;
}

/* SFG panel - 2026-06-10v: specificity lock for honor badge pills */
.pp-page.pp-logged #sampDash .pp-char__headline .pp-honor-badge,
.pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack--single .pp-honor-badge {
  display: inline-grid;
  grid-template-columns: 30px auto;
  align-items: center;
  gap: 6px;
  width: auto;
  min-width: 42px;
  height: 38px;
  padding: 3px 10px 3px 4px;
  border-radius: 11px;
}

.pp-page.pp-logged #sampDash .pp-char__headline .pp-honor-badge .pp-char__badge,
.pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack--single .pp-honor-badge .pp-char__badge {
  width: 30px;
  height: 30px;
  max-width: 30px;
}

.pp-page.pp-logged #sampDash .pp-char__headline .pp-honor-badge__label {
  display: block;
}

@media (max-width: 620px) {
  .pp-page.pp-logged #sampDash .pp-char__headline .pp-honor-badge,
  .pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack--single .pp-honor-badge {
    grid-template-columns: 28px;
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 3px;
    border-radius: 9px;
  }

  .pp-page.pp-logged #sampDash .pp-char__headline .pp-honor-badge .pp-char__badge,
  .pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack--single .pp-honor-badge .pp-char__badge {
    width: 28px;
    height: 28px;
    max-width: 28px;
  }

  .pp-page.pp-logged #sampDash .pp-char__headline .pp-honor-badge__label {
    display: none;
  }
}

/* ---------- 2. Reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  /* SWC 2026-08-16 natyvūs valdikliai (select, checkbox) tamsūs.
     Slankikliai jau stilizuoti ::-webkit-scrollbar, tad ju tai nekeicia. */
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
  -webkit-text-size-adjust: 100%;
}

/* SWC 2026-08-16 pasalina ~300ms dvigubo bakstelejimo delsa telefone.
   Taikoma TIK interaktyviems elementams: visam puslapiui netaikom, kad
   turini vis dar butu galima priartinti dvigubu bakstelejimu. */
a, button, [role="button"], input, select, textarea, label, summary {
  touch-action: manipulation;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-white);
  background-color: var(--c-void);
  /* page-long colour journey: infected green → neutral core → city amber */
  background-image: linear-gradient(180deg,
    var(--c-void) 0%,
    rgba(58, 13, 19, 0.16) 16%,
    rgba(58, 13, 19, 0.06) 34%,
    var(--c-void) 46%,
    var(--c-void) 56%,
    rgba(14, 42, 82, 0.10) 70%,
    rgba(14, 42, 82, 0.18) 86%,
    var(--c-void) 100%);
  overflow-x: hidden;
}

/* community artwork as the page backdrop - light grade only; the split scene
   (zombies left / neon city right) mirrors the site's two-worlds layout */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(6, 10, 18, 0.38) 0%,
      rgba(6, 10, 18, 0.52) 45%,
      rgba(6, 10, 18, 0.62) 75%,
      rgba(4, 7, 13, 0.78) 100%),
    url('../assets/background.webp?v=6') center / cover no-repeat;
}

/* CRT scanlines + faint grain over everything (below boot overlay) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px);
  opacity: 0.16;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
em { font-style: normal; }

::selection { background: var(--c-brand); color: var(--c-void); }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--c-void-2); }
::-webkit-scrollbar-thumb { background: var(--c-grid); border: 2px solid var(--c-void-2); }
::-webkit-scrollbar-thumb:hover { background: var(--c-brand-dim); }

:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }

/* ---------- 3. Utilities ---------- */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skiplink {
  position: fixed; top: -48px; left: 12px; z-index: 10000;
  padding: 10px 16px; font-size: 0.75rem; letter-spacing: 0.08em;
  background: var(--c-panel-2); color: var(--c-brand);
  border: 1px solid var(--c-brand); transition: top var(--dur-fast) var(--ease-hud);
}
.skiplink:focus-visible { top: 12px; }

.section {
  position: relative;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: calc(var(--space) * 0.6) clamp(20px, 4vw, 48px);
  scroll-margin-top: 64px;
}

.section-label {
  display: flex; align-items: center; gap: 18px;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 700; letter-spacing: 0.16em;
  color: var(--c-white); text-transform: uppercase;
}
.section-label::before { content: ''; width: 26px; height: 3px; flex: none; background: var(--c-brand); }
.section-label::after { content: ''; flex: 1; height: 1px; background: var(--c-grid); }

.dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  vertical-align: middle;
}
.dot--cyan { background: var(--c-brand); box-shadow: 0 0 6px var(--c-brand-glow); animation: blink 1.6s infinite; }
.dot--red  { background: var(--c-red);  box-shadow: 0 0 6px rgba(255, 59, 71, 0.5); animation: blink 1.1s infinite; }

@keyframes blink { 0%, 60% { opacity: 1; } 80%, 100% { opacity: 0.25; } }

/* ---------- 4. Wordmark + crosshair glyph ---------- */
.wordmark {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--c-body); white-space: nowrap;
}
.wordmark__accent { color: var(--c-hot); text-shadow: 0 0 16px var(--c-brand-glow); }
.wordmark--sm  { font-size: 0.85rem; }
.wordmark--hero {
  font-size: clamp(0.95rem, 2.2vw, 1.4rem);
  justify-content: center;
  margin-bottom: clamp(1rem, 2.5vw, 1.8rem);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 7. Sticky top bar ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; gap: 18px;
  height: 52px; padding: 0 clamp(14px, 2.5vw, 28px);
  background: rgba(11, 18, 32, 0.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-grid);
  transform: translateY(-100%);
  transition: transform 220ms var(--ease-hud);
}
.topbar.is-visible { transform: translateY(0); }
.topbar::after {
  /* red | ice | blue structural hairline rhyme */
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: linear-gradient(90deg,
    rgba(232, 65, 77, 0.35), rgba(214, 234, 255, 0.4) 50%, rgba(77, 163, 255, 0.35));
}
.topbar__brand { flex: none; display: inline-flex; align-items: center; gap: 9px; }
.topbar__brand .brand__mark { width: 26px; height: 26px; flex: none; border: 1px solid var(--c-grid); border-radius: 7px; }
.topbar__tabs { display: flex; gap: 6px; margin-inline: auto; }

.tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-bottom: 2px solid transparent;
  font-family: var(--font-display); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.08em; color: var(--c-gray);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.tab--cs.is-active, .tab--cs:hover {
  color: var(--c-zombie); border-color: var(--c-zombie);
}
.tab--samp.is-active, .tab--samp:hover {
  color: var(--c-city); border-color: var(--c-city);
}

.topbar__right { display: flex; align-items: center; gap: 16px; }
.topbar__discord {
  font-size: 0.7rem; letter-spacing: 0.12em; color: var(--c-brand);
  padding: 8px 12px; border: 1px solid transparent;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.topbar__discord:hover { border-color: var(--c-brand); box-shadow: 0 0 12px -4px var(--c-brand-glow); }

.langswitch { display: inline-flex; align-items: center; gap: 2px; font-size: 0.7rem; }
.langswitch__sep { color: var(--c-gray-dim); }
.langbtn {
  padding: 6px 7px; letter-spacing: 0.1em; color: var(--c-gray);
  transition: color var(--dur-fast);
}
.langbtn:hover { color: var(--c-white); }
.langbtn.is-active { color: var(--c-brand); text-shadow: 0 0 8px var(--c-brand-glow); }

/* ---------- 8. Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;  /* fallback for browsers without small-viewport units */
  min-height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
}
/* Viso puslapio gyvas fonas. position:fixed + object-fit:cover sukuria savo
   kompozicijos sluoksni, tad slenkant jis NEPERPIESIAMAS - butent todel cia
   NEnaudojam background-attachment:fixed, kuris kaip tik ir stabdo slinkima.
   translateZ(0) uztikrina atskira GPU sluoksni. */
.bgvid {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  object-fit: cover; pointer-events: none;
  z-index: -3;
  transform: translateZ(0);
  opacity: 0; transition: opacity 1.4s ease;
}
.bgvid.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .bgvid { display: none; } }

/* Kai video groja, body::before nebepiesia PAVEIKSLO ir kodo sluoksnio -
   lieka tik tamsinimo gradientas VIRS video. Taip a) nera dvigubo judesio,
   b) dingsta kodo sluoksnio animacija (maziau perpiesimu), c) tekstas visur
   islieka ant tos pacios tamsos, kaip ir anksciau. */
body.has-bgvid::before {
  background: linear-gradient(180deg,
      rgba(6, 10, 18, 0.42) 0%,
      rgba(6, 10, 18, 0.56) 45%,
      rgba(6, 10, 18, 0.66) 75%,
      rgba(4, 7, 13, 0.82) 100%);
  animation: none;
}

#fx { position: absolute; inset: 0; width: 100%; height: 100%; }

.hero__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 50%, var(--c-void-2) 130%);
}



/* HUD chrome readouts */
.hero__chrome {
  position: absolute; z-index: 3;
  font-size: 0.66rem; line-height: 1.9; letter-spacing: 0.12em;
  color: var(--c-gray);
}
.hero__chrome--tr { top: calc(var(--hero-inset) + 16px); right: calc(var(--hero-inset) + 18px); text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.langswitch--hero { font-family: var(--font-mono); }

/* hero centre column */
.hero__center {
  position: relative; z-index: 2;
  max-width: 920px; padding: 130px 22px;
  text-align: center;
}
/* soft scrim so the headline block stays readable over the artwork */
.hero__center::before {
  content: ''; position: absolute; inset: 6% -22%;
  background: radial-gradient(ellipse at center,
    rgba(4, 7, 13, 0.68), rgba(4, 7, 13, 0.4) 55%, transparent 76%);
  z-index: -1; pointer-events: none;
}
.hero__headline {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 5.6rem);
  line-height: 0.98; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero__l1 { color: var(--c-white); }
.hero__l2 {
  color: var(--c-brand);
  text-shadow: 0 0 28px var(--c-brand-glow);
  transition: color 220ms ease, text-shadow 220ms ease;
}
.hero.lean-cs  .hero__l2 { color: var(--c-zombie); text-shadow: 0 0 28px var(--c-zombie-glow); }
.hero.lean-samp .hero__l2 { color: var(--c-city); text-shadow: 0 0 28px var(--c-city-glow); }


.hero__sub {
  max-width: 560px; margin: clamp(1.2rem, 2.5vw, 1.8rem) auto 0;
  color: var(--c-gray); font-size: clamp(0.95rem, 1.4vw, 1.08rem);
}

/* CTA row + connecting bracket */
.hero__ctas {
  display: flex; align-items: center; justify-content: center;
  margin-top: clamp(2rem, 4.5vw, 3.2rem);
}
.hero__link {
  position: relative; width: clamp(36px, 6vw, 84px); height: 1px;
  background: var(--c-grid); flex: none;
}
.hero__link-diamond {
  position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px; border: 1px solid var(--c-brand);
  background: var(--c-void);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 8px var(--c-brand-glow);
}

.cta {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; min-height: 44px;
  font-family: var(--font-display); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--node-accent); color: var(--node-accent);
  /* hover wipe follows the node accent (green/amber/cyan) - cyan literal is the no-color-mix fallback */
  background: linear-gradient(90deg, transparent 50%, rgba(214, 234, 255, 0.08) 50%) 0 0 / 200% 100%;
  background: linear-gradient(90deg, transparent 50%, color-mix(in srgb, var(--node-accent) 8%, transparent) 50%) 0 0 / 200% 100%;
  transition: color var(--dur-fast), background-position 300ms var(--ease-hud),
              box-shadow var(--dur-fast), border-color var(--dur-fast),
              filter 220ms ease, opacity 220ms ease;
}
.cta:hover, .cta:focus-visible {
  background-position: -100% 0;
  box-shadow: 0 0 18px -4px var(--node-glow), inset 0 0 14px -8px var(--node-glow);
}
.cta__arrow { font-size: 0.7em; transform: translateY(-1px); }

.cta--cs   { --node-accent: var(--c-zombie); --node-glow: var(--c-zombie-glow); }
.cta--samp { --node-accent: var(--c-city);  --node-glow: var(--c-city-glow); }

/* choose-your-world: leaning toward one node gently de-emphasises the other.
   Keep its accent hue (no desaturate) so the button never looks disabled. */
.hero.lean-cs .cta--samp,
.hero.lean-samp .cta--cs { opacity: 0.6; }

/* On desktop, give both hero CTAs the SAME width and centre their label, so the
   pair sits exactly on the page centre despite the labels differing in length
   ("ĮEITI Į ZOMBIE PLAGUE" is far wider than "ĮEITI Į SFG SERVERĮ"). */
@media (min-width: 980px) {
  .hero__ctas .cta { min-width: 15.5rem; justify-content: center; }
}

.cta--discord { --node-accent: var(--c-brand); --node-glow: var(--c-brand-glow); }
.cta--discord:hover, .cta--discord:focus-visible { background: var(--c-brand); color: var(--c-void-2); }


.hero__discord {
  display: inline-block; margin-top: 22px;
  font-size: 0.7rem; letter-spacing: 0.18em; color: var(--c-brand-dim);
  transition: color var(--dur-fast), text-shadow var(--dur-fast);
}
.hero__discord:hover { color: var(--c-brand); text-shadow: 0 0 10px var(--c-brand-glow); }

/* faint world emblems flanking the hero (gas mask = NODE-01, star = NODE-02) */
.hero__emblem {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: clamp(170px, 15vw, 260px); z-index: 1;
  pointer-events: none; opacity: 0.055;
}
.hero__emblem svg { width: 100%; height: auto; }
.hero__emblem--cs  { left: 4%;  color: var(--c-zombie); }
.hero__emblem--samp { right: 4%; color: var(--c-city); }
@media (max-width: 1100px) { .hero__emblem { display: none; } }

/* scroll cue */
.hero__scrollcue {
  position: absolute; bottom: calc(var(--hero-inset) + 14px); left: 50%;
  transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 0.62rem; letter-spacing: 0.26em; color: var(--c-gray-dim);
}
.hero__scrollline {
  width: 1px; height: 26px;
  background: linear-gradient(180deg, var(--c-brand), transparent);
  transform-origin: top; animation: scrollpulse 1.8s var(--ease-hud) infinite;
}
@keyframes scrollpulse { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- 10. Dual node board ---------- */
.board__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(20px, 3.5vw, 56px);
  align-items: stretch;
}

.board__seam { position: relative; }
.board__seam::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--c-hot) 35%, var(--c-hot) 65%, transparent);
  box-shadow: 0 0 14px 1px var(--c-brand-glow);
  opacity: 0.7;
}
.board__diamond {
  position: absolute; left: 50%; top: 50%;
  width: 11px; height: 11px;
  border: 1px solid var(--c-brand); background: var(--c-void);
  box-shadow: 0 0 12px var(--c-brand-glow);
  transform: translate(-50%, -50%) rotate(45deg);
  animation: diamondspin 12s linear infinite;
}
@keyframes diamondspin {
  from { transform: translate(-50%, -50%) rotate(45deg); }
  to   { transform: translate(-50%, -50%) rotate(405deg); }
}

/* node panel chassis (identical for both - only the signal differs).
   The notched surface is painted on ::after so the corner brackets (.br),
   which sit 2px OUTSIDE the box, are not clipped away by the panel clip-path. */
.node {
  position: relative;
  display: flex; flex-direction: column;
  scroll-margin-top: 80px;
  transition: box-shadow 250ms ease;
}
.node::after, .term::after, .cap::after, .comms__panel::after, .feedbox::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(11, 18, 32, 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--c-grid);
  clip-path: var(--clip-panel);
  pointer-events: none;
  transition: border-color 250ms ease;
}
.node--cs  { --node-accent: var(--c-zombie); --node-accent-2: #B22F38; --node-glow: var(--c-zombie-glow); }
.node--samp { --node-accent: var(--c-city); --node-accent-2: var(--c-city-2); --node-glow: var(--c-city-glow); }


/* notch diagonal hairline */
.node > .node__head::before {
  content: ''; position: absolute; top: 0; left: calc(100% - 16px);
  width: 23px; height: 1px; background: var(--c-grid);
  transform: rotate(45deg); transform-origin: 0 0;
}

.node__head {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 18px;
  background: rgba(14, 23, 41, 0.8);
  border-bottom: 1px solid var(--c-grid);
  clip-path: var(--clip-panel); /* band follows the chassis notch */
  font-size: 0.64rem; letter-spacing: 0.14em; color: var(--c-gray);
  text-transform: uppercase;
}
.node--cs 
.node__type { font-size: 0.66rem; letter-spacing: 0.18em; color: var(--c-gray); }
.node__live {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.62rem; letter-spacing: 0.16em; color: var(--node-accent);
}
.dot--live {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--node-accent); box-shadow: 0 0 6px var(--node-glow);
  animation: blink 1.6s infinite;
}

.node__body {
  position: relative; z-index: 1;
  flex: 1; display: flex; flex-direction: column; gap: 18px;
  padding: clamp(20px, 3vw, 32px);
  padding-bottom: 104px; /* breathing room over the bottom art strips */
}
.node__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  letter-spacing: 0.05em; line-height: 1.1;
}
.node__name span { color: var(--node-accent); text-shadow: 0 0 18px var(--node-glow); }
.node__pitch { color: var(--c-body); font-size: 0.95rem; max-width: 46ch; }

/* IP line */
.ipline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 11px 14px;
  border: 1px dashed var(--c-grid);
  background: rgba(3, 6, 12, 0.55);
}
.ipline__label { font-size: 0.6rem; letter-spacing: 0.16em; color: var(--c-gray); }
.ipline__value {
  font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.04em; color: var(--c-hot);
  border-bottom: 1px solid var(--node-accent);
  padding-bottom: 1px;
  user-select: all;
}
.ipline .copybtn { margin-left: auto; }

/* copy buttons */
.copybtn {
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 11px 14px; min-height: 40px;
  border: 1px solid var(--node-accent); color: var(--node-accent);
  background: transparent;
  transition: background var(--dur-fast), color var(--dur-fast),
              border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.copybtn:hover { background: var(--node-accent); color: var(--c-void-2); box-shadow: 0 0 14px -3px var(--node-glow); }
.copybtn--ghost { border-color: var(--c-grid); color: var(--c-gray); }
.copybtn--ghost:hover { border-color: var(--node-accent); color: var(--node-accent); background: transparent; }
.copybtn.is-copied {
  border-color: var(--node-accent); color: var(--node-accent);
  background: transparent;
  box-shadow: 0 0 16px -2px var(--node-glow);
}

/* live server monitor */
.players {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 82px;
  grid-template-areas:
    "signal copy ring"
    "meter meter meter"
    "stats stats pips";
  gap: 11px 14px;
  padding: 14px;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(circle at 16% 16%, color-mix(in srgb, var(--node-accent) 22%, transparent), transparent 35%),
    radial-gradient(circle at 88% 20%, rgba(247, 250, 255, 0.07), transparent 28%),
    linear-gradient(135deg, rgba(7, 12, 23, 0.9), rgba(3, 6, 12, 0.7));
  border: 1px solid color-mix(in srgb, var(--node-accent) 32%, rgba(247, 250, 255, 0.08));
  box-shadow: inset 0 1px 0 rgba(247, 250, 255, 0.07), 0 14px 34px rgba(0, 0, 0, 0.18);
}
.players::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(120deg, transparent 0 42%, color-mix(in srgb, var(--node-accent) 16%, transparent) 42% 44%, transparent 44%),
    repeating-radial-gradient(circle at 0 0, rgba(247, 250, 255, 0.045) 0 1px, transparent 1px 18px);
  opacity: 0.54;
  pointer-events: none;
}
.players::after {
  content: '';
  position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--node-accent), transparent);
  opacity: 0.78;
}
.players__signal,
.players__copy,
.players__top,
.players__main,
.players__ring,
.players__meter,
.players__stats,
.players__pips { position: relative; z-index: 1; }
.players__signal {
  grid-area: signal;
  align-self: center;
  display: grid;
  place-items: center;
  width: 58px;
  height: 70px;
  color: var(--c-hot);
}
.players__signal::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 13px;
  width: 2px;
  height: 38px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--node-accent) 18% 82%, transparent);
  box-shadow: 0 0 14px var(--node-glow);
  opacity: 0.9;
}
.players__signal-core {
  position: absolute;
  top: 19px;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--node-accent);
  box-shadow: 0 0 16px var(--node-glow), inset 0 0 0 2px rgba(247, 250, 255, 0.25);
}
.players__signal-wave {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--node-accent) 58%, transparent);
  opacity: 0.78;
  animation: signalPing 2.4s var(--ease-hud) infinite;
}
.players__signal-bars {
  position: absolute;
  left: 50%;
  bottom: 7px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  transform: translateX(-50%);
}
.players__signal-bars i {
  display: block;
  width: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--node-accent) 64%, rgba(247, 250, 255, 0.12));
  box-shadow: 0 0 10px -4px var(--node-glow);
  opacity: 0.85;
}
.players__signal-bars i:nth-child(1) { height: 8px; }
.players__signal-bars i:nth-child(2) { height: 15px; }
.players__signal-bars i:nth-child(3) { height: 23px; }
.players__signal-bars i:nth-child(4) { height: 31px; }
@keyframes signalPing {
  0% { opacity: 0; transform: translateX(-50%) scale(0.72); }
  28% { opacity: 0.84; }
  100% { opacity: 0; transform: translateX(-50%) scale(1.28); }
}
.players__copy { grid-area: copy; min-width: 0; align-self: center; }
.players__top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0;
  margin-bottom: 8px;
}
.players__label { font-size: 0.56rem; letter-spacing: 0.18em; color: var(--c-gray); text-transform: uppercase; }
.players__state {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--node-accent) 42%, var(--c-grid));
  background: rgba(3, 6, 12, 0.54);
  color: var(--node-accent);
  font-size: 0.54rem; letter-spacing: 0.16em;
}
.players__main {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "count unit"
    "count cap";
  align-items: center;
  column-gap: 9px;
  line-height: 1;
}
.players__count {
  grid-area: count;
  min-width: 2ch;
  font-size: clamp(2.15rem, 3.8vw, 3rem);
  font-weight: 800;
  color: var(--c-hot);
  letter-spacing: 0;
  text-shadow: 0 0 18px var(--node-glow);
}
.players__count .count { color: var(--c-hot); }
.players__unit {
  grid-area: unit;
  color: var(--node-accent);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.players__capacity {
  grid-area: cap;
  align-self: end;
  color: var(--c-gray);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.players__capacity b {
  color: var(--c-hot);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.players__divider,
.players__max { display: none; }
.players__ring {
  grid-area: ring;
  align-self: center;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(3, 6, 12, 0.92) 0 55%, transparent 56%),
    conic-gradient(var(--node-accent) var(--pct), rgba(247, 250, 255, 0.11) 0);
  box-shadow: inset 0 0 0 1px rgba(247, 250, 255, 0.08), 0 0 18px -8px var(--node-glow);
}
.players__ring::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid rgba(247, 250, 255, 0.09);
}
.players__ring::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 16px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--node-accent);
  box-shadow: 0 0 12px var(--node-glow);
}
.players__meter {
  grid-area: meter;
  display: block;
  min-width: 0;
}
.players__bar {
  display: block;
  height: 10px;
  padding: 2px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, transparent 0 20px, rgba(247, 250, 255, 0.08) 20px 21px),
    rgba(3, 6, 12, 0.72);
  border: 1px solid rgba(247, 250, 255, 0.1);
  overflow: hidden;
}
.players__fill {
  display: block; height: 100%; width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--node-accent-2), var(--node-accent));
  box-shadow: 0 0 14px var(--node-glow);
  transition: width 1.3s var(--ease-hud) 300ms;
}
.is-live .players__fill { width: var(--pct); }
html:not(.js) .players__fill { width: var(--pct); }
.players__pct {
  position: relative;
  z-index: 1;
  color: var(--node-accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
}
.players__ring-label {
  position: relative;
  z-index: 1;
  color: var(--c-gray);
  font-size: 0.42rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.players__stats { grid-area: stats; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.players__stat {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(247, 250, 255, 0.09);
  background: rgba(247, 250, 255, 0.045);
}
.players__stat b {
  display: inline;
  order: 1;
  color: var(--c-hot);
  font-size: 0.8rem;
  line-height: 1.1;
  white-space: nowrap;
}
.players__stat em {
  display: inline;
  order: 2;
  margin-top: 0;
  color: var(--c-gray);
  font-size: 0.5rem;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.players__pips {
  grid-area: pips;
  align-self: center;
  justify-self: end;
  display: grid;
  grid-template-columns: repeat(12, 4px);
  align-items: end;
  gap: 3px;
  min-height: 22px;
}
.players__pip {
  width: 4px;
  height: 8px;
  border-radius: 999px;
  background: rgba(247, 250, 255, 0.1);
  transition: height var(--dur-med), background var(--dur-med), box-shadow var(--dur-med);
}
.players__pip:nth-child(2n) { height: 14px; }
.players__pip:nth-child(3n) { height: 20px; }
.players__pip:nth-child(5n) { height: 11px; }
.players__pip.is-lit {
  background: var(--node-accent);
  box-shadow: 0 0 12px -3px var(--node-glow);
}

/* monitor base: arcade scoreboard */
.players {
  grid-template-columns: 112px minmax(0, 1fr) minmax(112px, 0.46fr);
  grid-template-areas:
    "marquee score stats"
    "marquee meter stats"
    "pips pips pips";
  gap: 12px 15px;
  padding: 15px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--node-accent) 24%, transparent), transparent 32%),
    radial-gradient(circle at 78% 30%, rgba(247, 250, 255, 0.065), transparent 30%),
    linear-gradient(135deg, rgba(3, 6, 12, 0.92), rgba(10, 17, 31, 0.78));
  border: 1px solid color-mix(in srgb, var(--node-accent) 36%, rgba(247, 250, 255, 0.1));
  box-shadow: inset 0 1px 0 rgba(247, 250, 255, 0.07), 0 18px 34px rgba(0, 0, 0, 0.16);
}
.players::before {
  background:
    linear-gradient(120deg, transparent 0 47%, color-mix(in srgb, var(--node-accent) 15%, transparent) 47% 49%, transparent 49%),
    repeating-linear-gradient(90deg, rgba(247, 250, 255, 0.026) 0 1px, transparent 1px 25px);
  opacity: 0.62;
}
.players::after {
  left: 16px;
  right: 16px;
  height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--node-accent) 70%, #fff), transparent);
}
.players__score,
.players__top,
.players__main,
.players__map,
.players__meter,
.players__stats,
.players__pips { position: relative; z-index: 1; }
.players__score {
  grid-area: score;
  min-width: 0;
  align-self: center;
}
.players__top {
  margin-bottom: 9px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.players__label {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
}
.players__main {
  display: grid;
  grid-template-columns: auto auto auto auto 1fr;
  grid-template-areas: "count eq slash max unit";
  align-items: baseline;
  gap: 6px 8px;
}
.players__count {
  grid-area: count;
  position: relative;
  justify-self: start;
  z-index: 1;
  min-width: 1.45ch;
  transform: translateX(7px);
  font-size: clamp(2.65rem, 5vw, 4.2rem);
  line-height: 0.88;
  font-weight: 800;
  color: var(--c-hot);
  text-shadow: 0 0 20px var(--node-glow);
}
.players__count-eq {
  grid-area: eq;
  position: relative;
  justify-self: start;
  align-self: center;
  z-index: 1;
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  height: 34px;
  min-width: 42px;
  padding-inline: 2px;
  transform: translateY(4px);
}
.players__count-eq i {
  display: block;
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--node-accent) 76%, #fff), var(--node-accent-2));
  box-shadow: 0 0 13px -5px var(--node-glow);
  transform-origin: bottom;
  animation: lobbyEq 1.8s ease-in-out infinite;
}
.players__count-eq i:nth-child(1) { height: 14px; animation-delay: -0.2s; }
.players__count-eq i:nth-child(2) { height: 25px; animation-delay: -0.45s; }
.players__count-eq i:nth-child(3) { height: 34px; animation-delay: -0.1s; }
.players__count-eq i:nth-child(4) { height: 20px; animation-delay: -0.62s; }
.players__count-eq i:nth-child(5) { height: 29px; animation-delay: -0.32s; }
.players__slash {
  grid-area: slash;
  justify-self: start;
  color: var(--c-gray-dim);
  font-size: 1.05rem;
  font-weight: 800;
}
.players__max {
  grid-area: max;
  justify-self: start;
  color: var(--c-gray);
  font-size: 1.05rem;
  font-weight: 800;
}
.players__unit {
  grid-area: unit;
  align-self: end;
  justify-self: start;
  min-width: 0;
  color: var(--node-accent);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.players__capacity { display: none; }
.players__map {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  min-width: 0;
  margin-top: 9px;
  color: var(--c-gray);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
}
.players__map span { flex: none; text-transform: uppercase; }
.players__map span::after {
  content: ':';
  margin-left: 2px;
  color: var(--node-accent);
}
.players__map b {
  min-width: 0;
  color: var(--c-hot);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.players__stats {
  grid-area: stats;
  align-self: center;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.players__stat {
  justify-content: space-between;
  padding: 9px 10px;
  border-radius: 7px;
  border-color: color-mix(in srgb, var(--node-accent) 20%, rgba(247, 250, 255, 0.08));
  background: rgba(247, 250, 255, 0.04);
}
.players__meter {
  grid-area: meter;
  align-self: end;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
.players__bar {
  height: 12px;
  padding: 2px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(247, 250, 255, 0.09) 18px 19px),
    rgba(3, 6, 12, 0.7);
}
.players__pct {
  color: var(--node-accent);
  font-size: 0.74rem;
  font-weight: 800;
}
.players__pips {
  grid-area: pips;
  justify-self: stretch;
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  align-items: end;
  gap: 5px;
  min-height: 22px;
}
.players__pip {
  width: auto;
  height: 7px;
  border-radius: 999px;
  background: rgba(247, 250, 255, 0.105);
}
.players__pip:nth-child(2n) { height: 13px; }
.players__pip:nth-child(3n) { height: 18px; }
.players__pip:nth-child(5n) { height: 10px; }
.players__pip.is-lit {
  background: linear-gradient(180deg, color-mix(in srgb, var(--node-accent) 74%, #fff), var(--node-accent));
  box-shadow: 0 0 14px -3px var(--node-glow);
}

/* monitor v3: neon lobby marquee */
.players {
  grid-template-columns: minmax(0, 1fr) minmax(112px, 0.45fr);
  grid-template-areas:
    "score stats"
    "meter stats"
    "pips pips";
  gap: 12px 15px;
  padding: 15px;
  background:
    radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--node-accent) 22%, transparent), transparent 30%),
    linear-gradient(135deg, rgba(3, 6, 12, 0.94), rgba(10, 17, 31, 0.78));
}
.players::before {
  background:
    linear-gradient(115deg, transparent 0 50%, color-mix(in srgb, var(--node-accent) 13%, transparent) 50% 52%, transparent 52%),
    repeating-linear-gradient(0deg, rgba(247, 250, 255, 0.026) 0 1px, transparent 1px 18px);
}
.players__score,
.players__top,
.players__main,
.players__map,
.players__meter,
.players__stats,
.players__pips { position: relative; z-index: 1; }
.players__marquee {
  grid-area: marquee;
  align-self: stretch;
  display: grid;
  place-items: center;
  min-height: 116px;
  border-radius: 0;
  background: radial-gradient(ellipse at 50% 68%, color-mix(in srgb, var(--node-accent) 18%, transparent), transparent 62%);
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.players__marquee::before,
.players__marquee::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--node-accent) 74%, #fff), transparent);
  opacity: 0.34;
}
.players__marquee::before { display: none; }
.players__marquee::after { bottom: 18px; }
.players__marquee-light {
  position: absolute;
  top: 19px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--node-accent);
  box-shadow: 0 0 16px var(--node-glow);
  animation: marqueePulse 2.1s ease-in-out infinite;
}
.players__marquee-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 66px;
  margin-top: 24px;
}
.players__marquee-bars i {
  display: block;
  width: 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--node-accent) 76%, #fff), var(--node-accent-2));
  box-shadow: 0 0 13px -5px var(--node-glow);
  transform-origin: bottom;
  animation: lobbyEq 1.8s ease-in-out infinite;
}
.players__marquee-bars i:nth-child(1) { height: 24px; animation-delay: -0.2s; }
.players__marquee-bars i:nth-child(2) { height: 42px; animation-delay: -0.45s; }
.players__marquee-bars i:nth-child(3) { height: 58px; animation-delay: -0.1s; }
.players__marquee-bars i:nth-child(4) { height: 34px; animation-delay: -0.62s; }
.players__marquee-bars i:nth-child(5) { height: 49px; animation-delay: -0.32s; }
.players__marquee-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--node-accent) 72%, #fff), transparent);
  opacity: 0.54;
  box-shadow: 0 0 16px -5px var(--node-glow);
}
@keyframes marqueePulse {
  0%, 100% { opacity: 0.5; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1.18); }
}
@keyframes lobbyEq {
  0%, 100% { transform: scaleY(0.74); opacity: 0.68; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* feature list */
.features { display: flex; flex-direction: column; gap: 9px; }
.features li { display: flex; gap: 10px; font-size: 0.92rem; color: var(--c-body); }
.features__tick { color: var(--node-accent); font-size: 0.7rem; line-height: 1.9; }

.node__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 6px; }
.cta--node { padding: 12px 20px; font-size: 0.74rem; }

/* spinning watermark emblem (biohazard on CS, GRP star on SAMP - mirrored) */
.node__emblem {
  position: absolute; top: 64px; width: 150px; z-index: 0;
  color: var(--node-accent); opacity: 0.06; pointer-events: none;
}
.node__emblem svg { width: 100%; height: auto; animation: spin 90s linear infinite; }
.node--cs .node__emblem { right: 20px; }
.node--samp .node__emblem { left: 20px; }


/* motifs */
.node__motif { position: absolute; pointer-events: none; }
.node__motif--hazard {
  top: 0; left: 0; right: 16px; height: 3px; z-index: 3;
  background: repeating-linear-gradient(45deg,
    var(--c-zombie) 0 9px, transparent 9px 18px);
  opacity: 0.45;
}

/* zombie hands clawing up the CS panel bottom (mirror of the SAMP skyline) */
.node__motif--hands { left: 0; right: 0; bottom: 0; height: 128px; z-index: 0; overflow: hidden; }
.node__motif--hands::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(232, 65, 77, 0.10) 0%, rgba(58, 13, 19, 0.06) 55%, transparent 100%);
}
.node__motif--hands img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: bottom;
  opacity: 0.85;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
}
.node--cs::before {
  /* faint biohazard hatching across the panel */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(45deg, rgba(232, 65, 77, 0.025) 0 2px, transparent 2px 16px);
  clip-path: var(--clip-panel);
}
.node__motif--skyline { left: 0; right: 0; bottom: 0; height: 116px; z-index: 0; overflow: hidden; }
.node__motif--skyline::before {
  content: ''; position: absolute; inset: 0;
  /* 2026-08-15: buvo ikalta SAMP melyna, tad GRPLS kortele svytejo ne savo
     spalva. Dabar seka mazgo akcenta - visi trys mazgai teisingi savaime. */
  background: linear-gradient(0deg,
              color-mix(in srgb, var(--node-accent) 17%, transparent) 0%,
              color-mix(in srgb, var(--node-accent-2, var(--node-accent)) 8%, transparent) 55%,
              transparent 100%);
  transition: opacity 400ms ease;
}
.node__motif--skyline::after {
  content: ''; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(0deg,
              color-mix(in srgb, var(--node-accent-2, var(--node-accent)) 16%, transparent) 0%,
              color-mix(in srgb, var(--node-accent) 8%, transparent) 60%,
              transparent 100%);
  transition: opacity 400ms ease;
}
.node__motif--skyline img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: bottom;
  opacity: 0.85;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
}


/* node hover personalities (pointer devices only) */
@media (hover: hover) and (pointer: fine) {
  .node:hover { box-shadow: 0 0 30px -8px var(--node-glow); }
  .node:hover::after, .node:focus-within::after { border-color: var(--node-accent); }
  .cap:hover::after { border-color: var(--c-brand); }
  /* CS: infection instability - glitch jitter */
  .node--cs:hover .node__head { animation: csglitch 1.4s steps(2) infinite; }
  /* SAMP: the city warms - sunset shifts amber → magenta */
  .node:hover .node__motif--skyline::before { opacity: 0.4; }
  .node:hover .node__motif--skyline::after  { opacity: 1; }

  .cap:hover { transform: translateY(-3px); box-shadow: 0 0 26px -8px var(--c-brand-glow); }
}
@keyframes csglitch {
  0%, 78%, 100% { transform: translate(0, 0); text-shadow: none; }
  80% { transform: translate(2px, 0);  text-shadow: -2px 0 rgba(232, 65, 77, 0.65), 2px 0 rgba(139, 92, 246, 0.35); }
  84% { transform: translate(-2px, 1px); text-shadow: 2px 0 rgba(232, 65, 77, 0.65); }
  88% { transform: translate(1px, -1px); text-shadow: none; }
}

/* ---------- 12. Deploy terminal ---------- */
.term {
  position: relative;
  --term-accent: var(--c-zombie);
  --term-glow: var(--c-zombie-glow);
}
.term--samp { --term-accent: var(--c-city); --term-glow: var(--c-city-glow); }


.term__tabs { display: flex; border-bottom: 1px solid var(--c-grid); }
.term__tab {
  padding: 13px 22px; min-height: 44px;
  font-size: 0.68rem; letter-spacing: 0.12em; color: var(--c-gray);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.term__tab:hover { color: var(--c-white); }
.term__tab.is-active { color: var(--term-accent); border-color: var(--term-accent); }

.term__body { position: relative; }
.term__panel {
  display: grid; grid-template-columns: 1.45fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(22px, 3.5vw, 38px);
  animation: termfade 220ms ease;
}
.term__panel[hidden] { display: none; }
@keyframes termfade { from { opacity: 0; transform: translateY(4px); } }

.steps { display: flex; flex-direction: column; gap: 16px; }
.steps__line {
  display: grid; grid-template-columns: 32px minmax(110px, auto) 1fr;
  gap: 12px; align-items: baseline;
  font-size: 0.8rem;
  opacity: 0; transform: translateX(-8px);
  transition: opacity 400ms var(--ease-hud), transform 400ms var(--ease-hud);
}
.is-live .steps__line { opacity: 1; transform: none; }
.is-live .steps__line:nth-child(1) { transition-delay: 100ms; }
.is-live .steps__line:nth-child(2) { transition-delay: 240ms; }
.is-live .steps__line:nth-child(3) { transition-delay: 380ms; }
.is-live .steps__line:nth-child(4) { transition-delay: 520ms; }
html:not(.js) .steps__line { opacity: 1; transform: none; }

.steps__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 1px solid var(--term-accent); border-radius: 50%;
  color: var(--term-accent); font-size: 0.62rem; align-self: start;
}
.steps__verb { color: var(--c-white); font-weight: 700; letter-spacing: 0.1em; }
.steps__sep { display: none; }
.steps__text { font-family: var(--font-body); font-size: 0.92rem; color: var(--c-body); line-height: 1.7; }
.steps__cmd {
  color: var(--c-hot); font-weight: 700;
  background: rgba(27, 40, 64, 0.5);
  padding: 3px 8px; user-select: all;
}

.term__side { display: flex; flex-direction: column; gap: 14px; align-self: start; }
.term__art { color: var(--term-accent); max-width: 260px; margin-inline: auto; }
.term__art svg { width: 100%; height: auto; opacity: 0.8; filter: drop-shadow(0 0 7px var(--term-glow)); }
.term__art img { width: 100%; height: auto; display: block; mix-blend-mode: screen; }
.term__side .ipline { --node-accent: var(--term-accent); }
.term__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.term__btns .copybtn { --node-accent: var(--term-accent); --node-glow: var(--term-glow); }
.term__note { font-size: 0.8rem; color: var(--c-gray); }


/* ---------- 13. Capabilities ---------- */
.caps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 18px;
}
.cap {
  position: relative;
  padding: 26px 24px;
  transition: transform 250ms var(--ease-hud), box-shadow 250ms ease;
}
.cap__icon {
  width: 34px; height: 34px; color: var(--c-brand);
  filter: drop-shadow(0 0 6px rgba(214, 234, 255, 0.3));
  margin-bottom: 16px;
}
.cap__title {
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 600;
  letter-spacing: 0.07em; margin-bottom: 8px;
}
.cap__stat {
  font-size: 0.66rem; letter-spacing: 0.12em; color: var(--c-brand);
  margin-bottom: 12px;
}
.cap__copy { font-size: 0.88rem; color: var(--c-body); }

/* staggered card reveal */
.caps__grid .cap { transition-delay: 0ms; }
.caps__grid .cap:nth-child(2) { transition-delay: 90ms; }
.caps__grid .cap:nth-child(3) { transition-delay: 180ms; }
.caps__grid .cap:nth-child(4) { transition-delay: 270ms; }

/* ---------- 13b. Live network log ---------- */
.feedbox { position: relative; }
.feedbox__bar {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 18px;
  background: rgba(14, 23, 41, 0.8); border-bottom: 1px solid var(--c-grid);
  clip-path: var(--clip-panel);
  font-size: 0.66rem; letter-spacing: 0.1em; color: var(--c-gray);
}
.feedbox__cmd { color: var(--c-gray-dim); }
.feedbox__live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.62rem; letter-spacing: 0.18em; color: var(--c-brand);
}
.feedbox__lines {
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 300px; overflow: hidden;
  padding: 16px 18px;
  font-size: 0.72rem; line-height: 2.05;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%);
  mask-image: linear-gradient(180deg, transparent, #000 22%);
}
.fl {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline;
  column-gap: 0.65ch; min-width: 0;
  white-space: nowrap; overflow: hidden;
}
.fl--new { animation: flin 320ms var(--ease-hud); }
@keyframes flin { from { opacity: 0; transform: translateY(5px); } }
.fl__t { color: var(--c-gray-dim); }
.fl__tag { display: inline-block; min-width: 3.5ch; font-weight: 700; letter-spacing: 0.08em; }
.fl__tag--cs { color: var(--c-zombie); }
.fl__tag--samp { color: var(--c-city); }

.fl__tag--sys { color: var(--c-brand); }
.fl__msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--c-body); }

/* ---------- 14. Comms / Discord ---------- */
.comms__panel {
  position: relative;
  padding: clamp(48px, 7vw, 84px) clamp(24px, 5vw, 64px);
  text-align: center;
}
.comms__panel::after { box-shadow: inset 0 0 90px rgba(214, 234, 255, 0.05); }
.comms__wave {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 5px;
  pointer-events: none;
}
.comms__wave i {
  width: 3px; height: 14px; background: var(--c-brand);
  opacity: 0.1; animation: wavebar 1.7s ease-in-out infinite alternate;
}
.comms__wave i:nth-child(2n)  { animation-delay: 0.2s; height: 30px; }
.comms__wave i:nth-child(3n)  { animation-delay: 0.45s; height: 48px; }
.comms__wave i:nth-child(4n)  { animation-delay: 0.1s; height: 22px; }
.comms__wave i:nth-child(5n)  { animation-delay: 0.6s; height: 56px; }
.comms__wave i:nth-child(7n)  { animation-delay: 0.35s; height: 38px; }
@keyframes wavebar { from { transform: scaleY(0.4); } to { transform: scaleY(1.6); } }

.comms__head {
  position: relative;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.9rem); letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.comms__sub { position: relative; color: var(--c-body); margin-bottom: 30px; }
.comms__sub .count { color: var(--c-brand); font-weight: 700; }
.comms__micro { font-size: 0.64rem; letter-spacing: 0.14em; color: var(--c-gray); margin-top: 20px; }

/* ---------- 15. Footer ---------- */
.footer {
  position: relative;
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(36px, 5vw, 56px) clamp(20px, 4vw, 48px) 0;
}
.footer::before {
  content: ''; position: absolute; top: 0; left: clamp(20px, 4vw, 48px); right: clamp(20px, 4vw, 48px);
  height: 1px;
  background: linear-gradient(90deg,
    rgba(232, 65, 77, 0.4), rgba(214, 234, 255, 0.5) 50%, rgba(77, 163, 255, 0.4));
}
.footer__cols {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.footer__brand { min-width: 0; max-width: 100%; }
.footer__meta { margin-top: 10px; font-size: 0.62rem; letter-spacing: 0.1em; color: var(--c-gray); overflow-wrap: anywhere; }
.footer__nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px 14px; max-width: 100%; font-size: 0.68rem; letter-spacing: 0.14em; }
.footer__nav a { color: var(--c-gray); transition: color var(--dur-fast), text-shadow var(--dur-fast); padding: 8px 2px; }
.footer__nav a:hover { color: var(--c-brand); text-shadow: 0 0 8px var(--c-brand-glow); }
.footer__nav i { color: var(--c-gray-dim); }
.footer__status { display: flex; align-items: center; gap: 14px; font-size: 0.64rem; letter-spacing: 0.12em; color: var(--c-gray); }


/* ---------- 16. Scroll reveal ---------- */
.js.reveal-ready .reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-mid) var(--ease-hud), transform var(--dur-mid) var(--ease-hud),
              box-shadow 250ms ease;
}
.js.reveal-ready .reveal.is-live { opacity: 1; transform: none; }

/* ---------- 16b. Player panel (panel.html) ---------- */
.pp { padding-top: 64px; }
.pp-head { text-align: center; padding-bottom: 0; }
.pp-head__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: 0.1em; text-transform: uppercase;
}
.pp-head__sub { color: var(--c-body); margin-top: 8px; }
.pp-demo {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; font-size: 0.64rem; letter-spacing: 0.1em; color: var(--c-gray);
}
.pp-choice-wrap { padding-top: calc(var(--space) * 0.25); }
.pp-choice {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  max-width: 780px; margin-inline: auto;
}
.pp-choice__card {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 24px 22px; text-align: left; cursor: pointer;
  background: rgba(11, 18, 32, 0.78);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--c-grid);
  clip-path: var(--clip-panel);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.pp-choice__card--cs   { --node-accent: var(--c-zombie); --node-glow: var(--c-zombie-glow); }
.pp-choice__card--samp { --node-accent: var(--c-city);   --node-glow: var(--c-city-glow); }

.pp-choice__card:hover, .pp-choice__card.is-active {
  border-color: var(--node-accent);
  box-shadow: 0 0 24px -8px var(--node-glow);
  transform: translateY(-2px);
}
.pp-choice__game { font-size: 0.64rem; letter-spacing: 0.16em; color: var(--c-gray); }
.pp-choice__name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: 0.06em; color: var(--c-white);
}
.pp-choice__card.is-active .pp-choice__name { color: var(--node-accent); text-shadow: 0 0 14px var(--node-glow); }
.pp-choice__how { font-size: 0.6rem; letter-spacing: 0.12em; color: var(--c-gray-dim); }

.pp-flow--cs   { --node-accent: var(--c-zombie); --node-glow: var(--c-zombie-glow); }
.pp-flow--samp { --node-accent: var(--c-city);   --node-glow: var(--c-city-glow); }


.pp-card {
  position: relative;
  padding: clamp(20px, 3vw, 30px);
  margin-bottom: 18px;
  background: rgba(11, 18, 32, 0.78);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--c-grid);
  clip-path: var(--clip-panel);
  transition: background 0.4s var(--ease-hud), border-color 0.3s var(--ease-hud);
}
/* rank-tinted corner glow on every dashboard card - follows --c-city (= the player's rank colour),
   so purple for developer, gold/silver/bronze per VIP tier, green admin, red owner, blue player. */
#sampDash .pp-card {
  background:
    radial-gradient(135% 95% at 0% 0%, color-mix(in srgb, var(--c-city) 13%, transparent), transparent 58%),
    rgba(11, 18, 32, 0.78);
  border-color: color-mix(in srgb, var(--c-city) 22%, var(--c-grid));
}
#sampDash .pp-card:hover {
  background:
    radial-gradient(135% 95% at 0% 0%, color-mix(in srgb, var(--c-city) 20%, transparent), transparent 62%),
    rgba(11, 18, 32, 0.78);
  border-color: color-mix(in srgb, var(--c-city) 45%, var(--c-grid));
}
.pp-card__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 14px;
}
.pp-card__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.pp-card__row .pp-card__title { margin-bottom: 0; }
.pp-card__text { color: var(--c-body); font-size: 0.92rem; max-width: 62ch; margin-bottom: 18px; }
.pp-secure-note {
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 58ch; margin: -4px 0 18px;
  color: var(--c-gray); font-size: 0.78rem; line-height: 1.55;
}
.pp-secure-note__dot {
  width: 8px; height: 8px; margin-top: 0.45em; flex: none; border-radius: 50%;
  background: var(--c-good); box-shadow: 0 0 10px rgba(70, 214, 160, 0.45);
}
.pp-ident__status { margin-top: 12px; min-height: 1.3em; font-size: 0.7rem; letter-spacing: 0.06em; color: var(--c-gray); }

.pp-kv { display: grid; gap: 10px; margin: 6px 0 20px; }
.pp-kv div { display: flex; gap: 16px; align-items: baseline; border-bottom: 1px dashed var(--c-grid); padding-bottom: 9px; }
.pp-kv dt { font-size: 0.62rem; letter-spacing: 0.14em; color: var(--c-gray); min-width: 13ch; }
.pp-kv dd { color: var(--c-hot); font-weight: 700; font-size: 0.95rem; }
.pp-found__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.pp-notme { display: inline-flex; align-items: center; }

.pp-badge {
  padding: 7px 13px; border: 1px solid var(--c-zombie); color: var(--c-zombie);
  font-size: 0.7rem; letter-spacing: 0.08em; white-space: nowrap;
}
.pp-badge--samp { border-color: var(--c-city); color: var(--c-city); }

.pp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.pp-stat {
  display: flex; flex-direction: column; gap: 5px;
  padding: 15px 16px; background: rgba(3, 6, 12, 0.5); border: 1px solid var(--c-grid);
}
.pp-stat__num { display: block; max-width: 100%; font-size: 1.15rem; font-weight: 700; color: var(--c-hot); line-height: 1.15; min-width: 0; white-space: nowrap; }
.pp-stat__label { font-size: 0.58rem; letter-spacing: 0.14em; color: var(--c-gray-dim); }

/* attribute rows - clean key : value for categorical / text data (job, gang, status, phone, …)
   so long values like "Brigada · Nigeris" or "Savininkas" get the full row width, never cramped */
.pp-attrs { border: 1px solid var(--c-grid); background: rgba(3, 6, 12, 0.4); }
.pp-attr {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 11px 15px; min-height: 44px;
  transition: background var(--dur-fast) var(--ease-hud);
}
.pp-attr:hover { background: color-mix(in srgb, var(--c-city) 6%, transparent); }
.pp-attr + .pp-attr { border-top: 1px solid var(--c-grid); }
.pp-attr__k { font-size: 0.62rem; letter-spacing: 0.12em; color: var(--c-gray); white-space: nowrap; flex: none; }
.pp-attr__v {
  font-size: 0.92rem; font-weight: 600; color: var(--c-hot);
  text-align: right; line-height: 1.35; min-width: 0; overflow-wrap: anywhere;
}
.pp-attr__v--accent  { color: var(--c-city); }
.pp-attr__v--muted   { color: var(--c-gray); font-weight: 500; }
/* status traffic-light colours */
.pp-attr__v--good    { color: var(--c-good); }
.pp-attr__v--bad     { color: var(--c-red); }
.pp-attr__v--premium { color: var(--c-city-2); }

/* collection progress bar inside a stat box (achievements / pokemon) */
.pp-stat--prog .pp-stat__num { color: var(--c-city); }
.pp-stat__bar { display: block; height: 4px; margin: 2px 0; background: var(--c-grid); overflow: hidden; }
.pp-stat__bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--c-city), var(--c-city-2)); transition: width 0.7s var(--ease-hud); }

.pp-board { width: 100%; border-collapse: collapse; font-size: 0.76rem; }
.pp-board th {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--c-grid);
  font-size: 0.6rem; letter-spacing: 0.12em; color: var(--c-gray); font-weight: 500;
}
.pp-board td { padding: 8px 10px; border-bottom: 1px solid rgba(27, 40, 64, 0.5); color: var(--c-body); }
.pp-board td:first-child { color: var(--c-gray-dim); width: 2.5em; }
.pp-board__gap td { text-align: center; color: var(--c-gray-dim); }
.pp-board__me td {
  color: var(--c-hot); font-weight: 700;
  background: rgba(232, 65, 77, 0.08);
  border-bottom: 1px solid var(--c-zombie);
}

.pp-shop { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.pp-item {
  display: flex; flex-direction: column; gap: 10px;
  padding: 17px 16px; background: rgba(3, 6, 12, 0.5); border: 1px solid var(--c-grid);
}
.pp-item__name { font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.06em; }
.pp-item__time { font-size: 0.6rem; color: var(--c-gray-dim); letter-spacing: 0.1em; }
.pp-item__price { font-size: 1.15rem; font-weight: 700; color: var(--c-hot); white-space: nowrap; }
.pp-item--vip { border-color: var(--node-accent); }
.pp-item--admin { border-color: var(--c-red); }
.pp-buy { align-self: flex-start; }

.pp-assets { display: grid; gap: 10px; }
.pp-assets li {
  display: flex; align-items: baseline; gap: 16px;
  padding-bottom: 10px; border-bottom: 1px dashed var(--c-grid);
  color: var(--c-body); font-size: 0.92rem;
}
.pp-assets__type { font-size: 0.62rem; letter-spacing: 0.14em; color: var(--c-gray); min-width: 13ch; }

/* logged-in = dedicated dashboard page: hide entry UI, show only the dashboard */
.pp-logout { display: none; }
.pp-page.pp-logged .pp-head,
.pp-page.pp-logged .pp-choice-wrap,
.pp-page.pp-logged .pp-card--login,
.pp-page.pp-logged #csIdent,
.pp-page.pp-logged .pp-discord-link { display: none; }
.pp-page.pp-logged .pp-logout { display: inline-flex; align-items: center; color: var(--c-zombie); border-color: transparent; }
.pp-page.pp-logged .pp-logout:hover { border-color: var(--c-zombie); }
.pp-page.pp-logged .pp { padding-top: 88px; }
.pp-page.pp-logged .pp-flow { padding-top: 0; }
.pp-dash:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.pp-dash:not([hidden]) > *, .pp-card { min-width: 0; max-width: 100%; }
/* login/identify error message - red */
.pp-ident__status.is-err { color: var(--c-red); font-weight: 600; }
/* logged-in dashboard: shortest-column JS masonry (panel.js layoutMasonry) - packs
   cards of different heights with even gaps, no balancing whitespace.
   Cancel the base .pp-card margin inside gap-based containers so it never doubles. */
.pp-dash:not([hidden]) > *, .pp-dash__col > * { margin: 0; }
.pp-dash__cols { display: flex; gap: 18px; align-items: flex-start; }
.pp-dash__col { display: flex; flex-direction: column; gap: 18px; flex: 1 1 0; min-width: 0; }
@media (min-width: 920px) {
  .pp-page.pp-logged .pp-dash { display: block; }
  .pp-page.pp-logged .pp-dash > .pp-char { margin-bottom: 18px; }
  .pp-page.pp-logged .pp-dash > .pp-dash__cols + .pp-card { margin-top: 18px; }
}

.pp-page.pp-logged .pp-dash > .pp-shop-card + .pp-server-top {
  margin-top: 18px;
}

/* owned skins gallery */
.pp-skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px; }
.pp-skin {
  position: relative; aspect-ratio: 3/4; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c-city) 15%, transparent), rgba(3,6,12,0.6));
  border: 1px solid var(--c-grid); overflow: hidden;
}
.pp-skin.is-current { border-color: var(--c-city); box-shadow: 0 0 16px -4px var(--c-city-glow); }
.pp-skin img { width: 100%; height: 100%; object-fit: contain; object-position: top; }
.pp-skin__price {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  max-width: calc(100% - 10px);
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--c-city) 28%, rgba(126, 146, 168, 0.24));
  border-radius: 5px;
  background: rgba(3, 6, 12, 0.82);
  color: #F8FBFF;
  font-size: 0.56rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 8px 16px -12px rgba(0, 0, 0, 0.75);
}
.pp-skin.is-current .pp-skin__price { border-color: var(--c-city); color: var(--c-city-2); }
.pp-skin-value {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--pro-border-soft);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(17, 26, 42, 0.72), rgba(5, 9, 17, 0.66));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.pp-skin-value__label,
.pp-skin-value__unit {
  color: #AEBDD0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.pp-skin-value strong {
  color: #F8FBFF;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* character card */
.pp-char { display: flex; align-items: center; gap: 18px; }
.pp-char__skin {
  flex: none; width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c-city) 20%, transparent), rgba(3,6,12,0.6));
  border: 2px solid var(--c-city); box-shadow: 0 0 24px -6px var(--c-city-glow);
}
.pp-char__skin img { width: 96px; height: 96px; object-fit: contain; object-position: top; margin-top: 8px; }
.pp-char__avatar { display: grid; place-items: center; color: var(--c-city); }
.pp-char__avatar[data-gender="f"] { color: var(--c-city-2); }
.pp-char__avatar svg { width: 46px; height: 46px; }
.pp-char__id { display: flex; flex-direction: column; gap: 4px; }
.pp-char__name { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: 0.04em; color: var(--c-hot); }
.pp-char__info { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; }
.pp-char__line { font-family: var(--font-body); font-size: 0.84rem; line-height: 1.35; margin: 0; color: var(--c-gray); }
.pp-char__k { font-weight: 500; }   /* label */
.pp-char__v { font-weight: 600; }   /* value - same colour as its label, just bolder */
.pp-char__right { flex: none; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.pp-char__right .pp-badge { margin: 0; align-self: center; }
.pp-char__glow { display: grid; place-items: center; width: 86px; height: 86px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--c-city) 24%, transparent), color-mix(in srgb, var(--c-city) 6%, rgba(3,6,12,0.45)) 72%);
  border: 1px solid color-mix(in srgb, var(--c-city) 38%, transparent);
  box-shadow: 0 0 22px -5px color-mix(in srgb, var(--c-city) 55%, transparent); }
.pp-char__badge { height: 56px; width: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)); }
@media (max-width: 480px) { .pp-char__glow { width: 66px; height: 66px; } .pp-char__badge { height: 44px; } }

/* status bars (health / armor / hunger) */
.pp-bars { display: grid; gap: 12px; }
.pp-bar__head { display: flex; justify-content: space-between; font-size: 0.64rem; letter-spacing: 0.08em; color: var(--c-gray); margin-bottom: 5px; }
.pp-bar__track { height: 6px; background: var(--c-grid); overflow: hidden; }
.pp-bar__fill { display: block; height: 100%; transition: width 0.6s var(--ease-hud); }
.pp-char .pp-badge { margin-left: auto; align-self: flex-start; }

/* licenses */
.pp-lic { display: flex; flex-wrap: wrap; gap: 10px; }
.pp-licitem {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--c-grid); border-radius: 2px;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--c-gray);
}
.pp-licitem i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-gray-dim); flex: none; }
.pp-licitem.is-on { color: var(--c-body); border-color: var(--c-grid); }
.pp-licitem.is-on i { background: var(--c-gray); box-shadow: none; }
.pp-licitem__cat { color: var(--c-hot); font-weight: 800; white-space: nowrap; }

/* vehicles */
.pp-veh { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pp-veh__item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; background: rgba(3, 6, 12, 0.5); border: 1px solid var(--c-grid);
}
.pp-veh__icon { flex: none; width: 40px; color: var(--c-city); }
.pp-veh__icon svg { width: 100%; }
.pp-veh__body { min-width: 0; }
.pp-veh__name { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--c-hot); }
.pp-veh__meta { font-size: 0.66rem; letter-spacing: 0.04em; color: var(--c-gray); margin-top: 3px; }
.pp-veh__tags { font-size: 0.58rem; letter-spacing: 0.08em; color: var(--c-city); margin-top: 4px; }


/* inventory */
.pp-inv { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.pp-inv__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 13px; background: rgba(3, 6, 12, 0.5); border: 1px solid var(--c-grid); }
.pp-inv__name { font-size: 0.8rem; color: var(--c-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-inv__qty { font-size: 0.82rem; font-weight: 700; color: var(--c-hot); flex: none; }

/* weapons */
.pp-weapons { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.pp-weapon {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; background: rgba(3, 6, 12, 0.5); border: 1px solid var(--c-grid);
}
.pp-weapon__ic { width: 26px; flex: none; color: var(--c-zombie); }
.pp-weapon__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-weapon__name { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.03em; color: var(--c-hot); }
.pp-weapon__ammo { font-size: 0.66rem; letter-spacing: 0.06em; color: var(--c-gray); }

/* drug unit suffix - same size/style as the quantity number */
.pp-unit { font-size: 1em; color: inherit; letter-spacing: inherit; }

/* properties (houses / businesses) */
.pp-props { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pp-props--biz {
  grid-template-columns: 1fr;
  gap: 14px;
}
.pp-prop { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: rgba(3, 6, 12, 0.5); border: 1px solid var(--c-grid); }
.pp-prop__ic { width: 26px; flex: none; color: var(--c-city); }
.pp-prop--biz {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  align-items: center;
  min-height: 146px;
  gap: 18px;
  padding: 16px 18px;
  overflow: hidden;
}
.pp-prop__pic {
  position: relative;
  display: grid;
  place-items: center;
  width: 136px;
  height: 112px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--c-city) 36%, rgba(126, 146, 168, 0.22));
  background:
    radial-gradient(82% 75% at 50% 42%, color-mix(in srgb, var(--c-city) 20%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(19, 29, 47, 0.78), rgba(3, 6, 12, 0.78));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 0 24px -18px var(--c-city-glow);
}
.pp-prop__pic::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 8px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(248, 251, 255, 0.26), transparent);
}
.pp-prop__img {
  position: relative;
  z-index: 1;
  width: 118px;
  height: 118px;
  object-fit: contain;
  transform: translateY(-7px);
  filter: brightness(1.12) contrast(1.08) saturate(1.08) drop-shadow(0 10px 12px rgba(0, 0, 0, 0.55));
}
.pp-prop__body { min-width: 0; }
.pp-prop__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.pp-prop__name { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.03em; color: var(--c-hot); }
.pp-prop__meta { font-size: 0.66rem; letter-spacing: 0.04em; color: var(--c-gray); margin-top: 3px; }
.pp-prop__tags { font-size: 0.58rem; letter-spacing: 0.08em; color: var(--c-city); margin-top: 4px; }
.pp-biz-rank {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--c-city) 40%, transparent);
  border-radius: 6px;
  color: #F8FBFF;
  background: color-mix(in srgb, var(--c-city) 12%, transparent);
  font-size: 0.62rem;
  font-weight: 800;
}
.pp-biz-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--c-city) 28%, rgba(126, 146, 168, 0.2));
  background:
    linear-gradient(180deg, rgba(19, 29, 47, 0.6), rgba(3, 6, 12, 0.44)),
    radial-gradient(90% 90% at 8% 0%, color-mix(in srgb, var(--c-city) 14%, transparent), transparent 62%);
}
.pp-biz-summary__item {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(126, 146, 168, 0.18);
  background: rgba(3, 6, 12, 0.42);
}
.pp-biz-summary__item b {
  display: block;
  color: #F8FBFF;
  font-family: var(--font-display);
  font-size: 0.98rem;
  line-height: 1;
}
.pp-biz-summary__item span {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: #AEBDD0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.pp-biz-meter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.pp-biz-meter span {
  height: 7px;
  overflow: hidden;
  border: 1px solid rgba(126, 146, 168, 0.18);
  border-radius: 999px;
  background: rgba(3, 6, 12, 0.6);
}
.pp-biz-meter i {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: linear-gradient(90deg, #24D7A5, color-mix(in srgb, var(--c-city) 78%, #56F0FF));
  box-shadow: 0 0 16px -7px #24D7A5;
}
.pp-prop--biz.is-low .pp-biz-meter i {
  background: linear-gradient(90deg, #FFB84D, #FF5E57);
  box-shadow: 0 0 16px -7px #FF5E57;
}
.pp-prop--biz.is-empty .pp-biz-meter i {
  background: #FF3B47;
}
.pp-biz-meter em {
  color: #D8E2EF;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}
.pp-biz-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}
.pp-biz-kpi {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(126, 146, 168, 0.18);
  background: rgba(3, 6, 12, 0.44);
}
.pp-biz-kpi b,
.pp-biz-kpi small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-biz-kpi b {
  color: #F8FBFF;
  font-size: 0.72rem;
  font-weight: 800;
}
.pp-biz-kpi small {
  margin-top: 3px;
  color: #AEBDD0;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 520px) {
  .pp-prop--biz {
    grid-template-columns: 112px minmax(0, 1fr);
    min-height: 122px;
    gap: 13px;
    padding: 15px 16px;
  }

  .pp-prop__pic {
    width: 112px;
    height: 94px;
  }

  .pp-prop__img {
    width: 100px;
    height: 100px;
    transform: translateY(-6px);
  }

  .pp-biz-summary {
    grid-template-columns: 1fr;
  }

  .pp-biz-kpis {
    grid-template-columns: 1fr;
  }

  .pp-biz-meter {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* crypto */
.pp-coins { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pp-coin { display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: rgba(3, 6, 12, 0.5); border: 1px solid var(--c-grid); opacity: 0.5; }
.pp-coin.is-owned { opacity: 1; border-color: var(--c-brand-dim); }
.pp-coin__tk { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,201,60,0.08); border: 1px solid var(--c-grid); font-size: 0.6rem; font-weight: 700; color: var(--c-brand); }
.pp-coin.is-owned .pp-coin__tk { background: rgba(255,201,60,0.16); border-color: var(--c-brand); }
.pp-coin__body { display: flex; flex-direction: column; min-width: 0; }
.pp-coin__nm { font-size: 0.72rem; color: var(--c-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-coin__amt { font-size: 0.9rem; font-weight: 700; color: var(--c-hot); }
.pp-subhead { font-size: 0.64rem; letter-spacing: 0.16em; color: var(--c-gray); margin: 18px 0 10px; }
.pp-rigs { display: grid; gap: 8px; }
.pp-rig { padding: 10px 13px; background: rgba(3, 6, 12, 0.5); border: 1px solid var(--c-grid); font-size: 0.72rem; color: var(--c-body); }

/* custom skin tile */
.pp-skin.is-custom { background: radial-gradient(circle at 50% 30%, rgba(232,65,77,0.16), rgba(3,6,12,0.6)); border-color: rgba(232,65,77,0.4); }
.pp-skin__custom { display: grid; place-items: center; color: var(--c-zombie); height: 100%; }
.pp-skin__custom svg { width: 46px; height: 46px; }
.pp-skin.is-custom .pp-skin__price { border-color: rgba(232,65,77,0.44); color: #F8FBFF; }

/* drugs card - red accent */
.pp-card--contra::after { border-color: rgba(232,65,77,0.4); }
.pp-card--contra .pp-card__title { color: var(--c-zombie); }
.pp-card--contra .pp-stat { border-color: rgba(232,65,77,0.25); }

@media (max-width: 480px) { .pp-char__skin { width: 64px; height: 64px; } .pp-char__skin img { width: 72px; height: 72px; } }

.ag-row { display: grid; grid-template-columns: 1fr 120px; gap: 14px; }
@media (max-width: 480px) { .ag-row { grid-template-columns: 1fr; } }

.pp-form { display: grid; gap: 14px; max-width: 400px; }
.pp-field { display: flex; flex-direction: column; gap: 6px; }
.pp-field__label { font-size: 0.62rem; letter-spacing: 0.14em; color: var(--c-gray); }
.pp-passwrap {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  background: rgba(3, 6, 12, 0.6); border: 1px solid var(--c-grid);
  transition: border-color var(--dur-fast);
}
.pp-passwrap:focus-within { border-color: var(--node-accent); outline: 2px solid var(--node-accent); outline-offset: 1px; }
.pp-passwrap .pp-input { border: 0; background: transparent; outline: 0; }
.pp-passwrap .pp-input:focus-visible { outline: 0; border-color: transparent; }
.pp-pass-toggle {
  min-width: 76px; padding: 0 12px;
  border-left: 1px solid var(--c-grid);
  font-size: 0.62rem; letter-spacing: 0.1em; color: var(--c-gray);
  transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}
.pp-pass-toggle:hover, .pp-pass-toggle[aria-pressed="true"] {
  color: var(--c-hot); border-left-color: var(--node-accent);
  background: color-mix(in srgb, var(--node-accent) 10%, transparent);
}
.pp-input {
  width: 100%; padding: 12px 14px;
  font-family: var(--font-mono); font-size: 0.9rem; color: var(--c-hot);
  background: rgba(3, 6, 12, 0.6); border: 1px solid var(--c-grid);
  transition: border-color var(--dur-fast);
}
.pp-input::placeholder { color: var(--c-gray-dim); }
.pp-input:focus-visible { outline: 2px solid var(--node-accent); outline-offset: 1px; border-color: var(--node-accent); }
.pp-login__btn { justify-self: start; }
.pp-form.is-loading { pointer-events: none; }
.pp-form.is-loading .pp-input, .pp-form.is-loading .pp-pass-toggle, .pp-form.is-loading .pp-check { opacity: 0.62; }
.pp-login__btn[aria-busy="true"] { opacity: 0.75; cursor: progress; }

.pp-dashbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px; margin-bottom: 18px;
  background: rgba(11, 18, 32, 0.82); border: 1px solid var(--c-grid);
}
.pp-dashbar__id { min-width: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pp-dashbar__label { font-size: 0.62rem; letter-spacing: 0.16em; color: var(--c-gray); }
.pp-dashbar__id strong {
  min-width: 0; overflow-wrap: anywhere;
  font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.04em; color: var(--c-hot);
}
.pp-dashbar__id span:last-child { font-size: 0.66rem; letter-spacing: 0.08em; color: var(--c-gray); }
#sSessionStatus { color: var(--c-gray); }
#sSessionStatus.is-err { color: var(--c-red); font-weight: 700; }
.pp-dashbar__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.pp-dashbar__actions .copybtn { min-height: 36px; padding-block: 8px; }

.pp-modal { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; padding: 20px; }
.pp-modal[hidden] { display: none; }
.pp-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(3, 6, 12, 0.78);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.pp-modal__box {
  position: relative; width: min(460px, 100%);
  padding: 28px;
  background: var(--c-panel); border: 1px solid var(--c-grid);
  clip-path: var(--clip-panel);
}
.pp-modal__title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.1em; margin-bottom: 8px; }
.pp-modal__item { color: var(--c-hot); font-size: 0.8rem; letter-spacing: 0.06em; margin-bottom: 12px; }
.pp-modal__text { color: var(--c-body); font-size: 0.9rem; margin-bottom: 22px; }
.pp-modal__actions { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .pp-choice { grid-template-columns: 1fr; }
  .pp-board { font-size: 0.68rem; }
  .pp-board th:last-child, .pp-board td:last-child { display: none; }
  .pp-card__row { align-items: flex-start; flex-direction: column; }
  .pp-char { align-items: flex-start; flex-wrap: wrap; }
  .pp-char__id { flex: 1 1 170px; min-width: 0; }
  .pp-char .pp-badge { flex-basis: 100%; margin-left: 0; }
  .pp-dashbar { align-items: stretch; flex-direction: column; }
  .pp-dashbar__actions { justify-content: flex-start; }
}

/* ---------- 17. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .js.reveal-ready .reveal { opacity: 1; transform: none; }
  .is-live .players__fill, .players__fill { width: var(--pct); }
  .steps__line { opacity: 1; transform: none; }
}

/* ---------- 18. Responsive ---------- */
@media (max-width: 1100px) {
  .term__panel { grid-template-columns: 1.2fr 1fr; }
}

@media (max-width: 900px) {
  /* board stacks: seam becomes the short connector between nodes */
  .board__grid { grid-template-columns: 1fr; }
  .board__seam { height: 72px; }
  .term__panel { grid-template-columns: 1fr; }
  .footer__cols { flex-direction: column; text-align: center; }
  .footer__brand { display: flex; flex-direction: column; align-items: center; }
}

@media (max-width: 600px) {
  :root { --bracket: 12px; }
  .hero__chrome--bl,     .tab { padding: 8px 10px; }
  .topbar { gap: 8px; width: 100vw; max-width: 100vw; padding-inline: 10px; overflow: hidden; }
  .topbar__brand { display: none; }
  .topbar__tabs {
    flex: 1 1 auto; min-width: 0; margin-inline: 0; gap: 4px;
    justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
  }
  .topbar__tabs::-webkit-scrollbar { display: none; }
  .topbar .tab { flex: 0 0 auto; padding-inline: 8px; font-size: 0.68rem; }
  .topbar__right { flex: none; gap: 6px; }
  .topbar__right .topbar__discord { display: none; }
  .pp-page.pp-logged .pp-logout {
    display: inline-grid; place-items: center;
    width: 34px; height: 32px; padding: 0; flex: none; overflow: hidden;
  }
  .pp-page.pp-logged .pp-logout span {
    position: absolute; width: 1px; height: 1px;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  }
  .topbar .langswitch { font-size: 0.64rem; }
  .topbar .langbtn { padding-inline: 5px; }
  .ipline .copybtn { margin-left: 0; }
  .players {
    grid-template-columns: 1fr;
    grid-template-areas:
      "score"
      "meter"
      "stats"
      "pips";
    gap: 8px 10px;
    padding: 10px;
  }
  .players__marquee {
    min-height: 86px;
  }
  .players__marquee-light { top: 14px; }
  .players__marquee-bars {
    height: 50px;
    gap: 5px;
    margin-top: 22px;
  }
  .players__marquee-bars i { width: 6px; }
  .players__marquee-bars i:nth-child(1) { height: 18px; }
  .players__marquee-bars i:nth-child(2) { height: 31px; }
  .players__marquee-bars i:nth-child(3) { height: 44px; }
  .players__marquee-bars i:nth-child(4) { height: 25px; }
  .players__marquee-bars i:nth-child(5) { height: 36px; }
  .players__marquee-line { bottom: 21px; }
  .players__score { align-self: center; }
  .players__signal { width: 50px; height: 58px; }
  .players__signal::before { top: 11px; height: 32px; }
  .players__signal-wave { width: 38px; height: 38px; }
  .players__signal-bars i { width: 4px; }
  .players__signal-bars i:nth-child(1) { height: 7px; }
  .players__signal-bars i:nth-child(2) { height: 12px; }
  .players__signal-bars i:nth-child(3) { height: 18px; }
  .players__signal-bars i:nth-child(4) { height: 24px; }
  .players__top { gap: 8px; flex-wrap: wrap; }
  .players__label { letter-spacing: 0.14em; }
  .players__state { padding-inline: 7px; }
  .players__main {
    grid-template-columns: auto auto auto auto;
    grid-template-areas:
      "count eq slash max"
      "unit unit unit unit";
    justify-content: start;
    width: max-content;
    max-width: 100%;
    gap: 3px 6px;
  }
  .players__count { font-size: 2.35rem; }
  .players__count-eq {
    height: 28px;
    min-width: 34px;
    gap: 3px;
    transform: translateY(4px);
  }
  .players__count-eq i { width: 4px; }
  .players__count-eq i:nth-child(1) { height: 11px; }
  .players__count-eq i:nth-child(2) { height: 19px; }
  .players__count-eq i:nth-child(3) { height: 27px; }
  .players__count-eq i:nth-child(4) { height: 16px; }
  .players__count-eq i:nth-child(5) { height: 22px; }
  .players__unit { font-size: 0.56rem; }
  .players__map { margin-top: 7px; column-gap: 6px; }
  .players__map b { font-size: 0.62rem; }
  .players__ring {
    justify-self: start;
    width: 56px;
    height: 56px;
  }
  .players__ring::before { inset: 6px; }
  .players__ring::after { top: 7px; right: 13px; width: 6px; height: 6px; }
  .players__ring-label { display: none; }
  .players__meter { align-self: center; }
  .players__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .players__stat { flex: 1 1 120px; justify-content: center; }
  .players__pips {
    justify-self: stretch;
    grid-template-columns: repeat(16, minmax(0, 1fr));
  }
  .players__pip { width: auto; }
}

@media (max-width: 560px) {
  .hero__ctas { flex-direction: column; gap: 0; }
  .hero__link { width: 1px; height: 30px; }
  .cta { width: min(320px, 100%); justify-content: center; }
  .steps__line { grid-template-columns: 22px auto; grid-template-rows: auto auto; row-gap: 2px; }
  .steps__sep { display: none; }
  .steps__text { grid-column: 2; }
}

/* ==========================================================================
   SFG panel - 2026-06-09c: font unification (kill the "font salad")
   labels & text values -> Inter (--font-body); numbers stay mono;
   bold section titles + item/vehicle names keep the display font; inventory as-is.
   ========================================================================== */
.pp-stat__label,
.pp-attr__k,
.pp-attr__v,
.pp-bar__head,
.pp-subhead,
.pp-assets__type { font-family: var(--font-body); }

/* ==========================================================================
   SFG panel - 2026-06-09d: uniform professional palette
   values -> soft (no harsh white); semantic/rank hues removed from text;
   status bars recoloured in JS (4 distinct tones); vehicle cards = real car images.
   ========================================================================== */
.pp-stat__num { color: var(--c-body); font-size: 1.05rem; }
.pp-stat--prog .pp-stat__num { color: var(--c-body); }
.pp-attr__v { color: var(--c-body); }
.pp-attr__v--accent,
.pp-attr__v--good,
.pp-attr__v--bad,
.pp-attr__v--premium { color: var(--c-body); }
.pp-attr__v--muted { color: var(--c-gray); }
.pp-stat__bar > i { background: var(--c-gray); }
.pp-card--contra .pp-card__title { color: var(--c-hot); }
.pp-card--contra::after { border-color: var(--c-grid); }
.pp-veh__icon { width: 60px; }
.pp-veh__img { width: 100%; height: 44px; object-fit: contain; display: block; }
.pp-veh__tags { color: var(--c-gray); }

/* SFG panel - 2026-06-09e: finance labels look like inventory item names (owner request) */
.pp-fin .pp-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.pp-fin .pp-stat__label { color: var(--c-body); font-size: 0.78rem; letter-spacing: 0; text-transform: none; font-weight: 500; }

/* SFG panel - 2026-06-09f: inventory two-tone on EVERY card - soft slate labels + white values */
.pp-stat__label, .pp-attr__k { color: var(--c-body); font-size: 0.78rem; letter-spacing: 0; text-transform: none; font-weight: 500; }
.pp-stat__num, .pp-stat--prog .pp-stat__num,
.pp-attr__v, .pp-attr__v--accent, .pp-attr__v--good, .pp-attr__v--bad, .pp-attr__v--premium { color: var(--c-hot); }
.pp-attr__v--muted { color: var(--c-gray); }

/* SFG panel - 2026-06-09g: "stay logged in" checkbox */
.pp-check { display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; font-family: var(--font-body); font-size: 0.82rem; color: var(--c-body); margin: -2px 0 2px; }
.pp-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.pp-check__box { flex: none; width: 18px; height: 18px; border: 1px solid var(--c-grid); background: rgba(3,6,12,0.55); display: grid; place-items: center; transition: border-color var(--dur-fast) var(--ease-hud), background var(--dur-fast) var(--ease-hud); }
.pp-check__box::after { content: ""; width: 4px; height: 8px; margin-top: -2px; border: solid var(--c-hot); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform var(--dur-fast) var(--ease-hud); }
.pp-check:hover .pp-check__box { border-color: var(--c-city); }
.pp-check input:checked + .pp-check__box { border-color: var(--c-city); background: color-mix(in srgb, var(--c-city) 25%, transparent); }
.pp-check input:checked + .pp-check__box::after { transform: rotate(45deg) scale(1); }
.pp-check input:focus-visible + .pp-check__box { outline: 2px solid var(--c-city); outline-offset: 2px; }


.pp-veh__icon { width: 96px; }
.pp-veh__img { height: 66px; }
.pp-weapons { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.pp-weapon__pic { flex: none; width: 76px; display: grid; place-items: center; padding: 4px; border: 1px solid var(--c-grid); border-radius: 4px; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--c-brand) 18%, transparent), rgba(3,6,12,0.35)); }
.pp-weapon__img { width: 100%; height: 42px; object-fit: contain; display: block; }
#sJobXp td { font-family: var(--font-display); letter-spacing: 0.02em; }
#sJobXp td:last-child { font-family: var(--font-mono); }

/* SFG panel - 2026-06-09l: professional dashboard polish */
.pp-page.pp-logged #sampDash {
  --pro-border: rgba(126, 146, 168, 0.24);
  --pro-border-soft: rgba(126, 146, 168, 0.16);
  --pro-surface: rgba(14, 23, 41, 0.92);
  --pro-surface-2: rgba(5, 9, 17, 0.88);
}

.pp-page.pp-logged #sampDash .pp-card,
.pp-page.pp-logged .pp-dashbar {
  background: linear-gradient(180deg, var(--pro-surface), var(--pro-surface-2));
  border-color: var(--pro-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 42px rgba(0, 0, 0, 0.28);
}

.pp-page.pp-logged #sampDash .pp-card:hover {
  background: linear-gradient(180deg, rgba(18, 29, 49, 0.94), rgba(7, 12, 22, 0.9));
  border-color: color-mix(in srgb, var(--c-city) 36%, var(--pro-border));
}

.pp-page.pp-logged #sampDash .pp-card::before,
.pp-page.pp-logged .pp-dashbar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 18px;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c-city) 74%, var(--c-hot)), transparent);
  opacity: 0.68;
  pointer-events: none;
}

.pp-page.pp-logged .pp-dashbar { position: relative; clip-path: var(--clip-panel); }

.pp-page.pp-logged #sampDash .pp-card--contra::before {
  background: linear-gradient(90deg, rgba(255, 82, 96, 0.84), transparent);
}

.pp-page.pp-logged #sampDash .pp-card__title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c-hot);
  font-size: 0.92rem;
  letter-spacing: 0.08em;
}

.pp-page.pp-logged #sampDash .pp-card__title::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  background: var(--c-city);
  box-shadow: 0 0 12px color-mix(in srgb, var(--c-city) 72%, transparent);
}

.pp-page.pp-logged #sampDash .pp-card--contra .pp-card__title::before { background: var(--c-red); }

.pp-page.pp-logged #sampDash .pp-stat,
.pp-page.pp-logged #sampDash .pp-attr,
.pp-page.pp-logged #sampDash .pp-inv__item,
.pp-page.pp-logged #sampDash .pp-weapon,
.pp-page.pp-logged #sampDash .pp-veh__item,
.pp-page.pp-logged #sampDash .pp-prop,
.pp-page.pp-logged #sampDash .pp-coin,
.pp-page.pp-logged #sampDash .pp-rig,
.pp-page.pp-logged #sampDash .pp-licitem,
.pp-page.pp-logged #sampDash .pp-item,
.pp-page.pp-logged #sampDash .pp-skin {
  background: linear-gradient(180deg, rgba(17, 26, 42, 0.74), rgba(5, 9, 17, 0.66));
  border-color: var(--pro-border-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.pp-page.pp-logged #sampDash .pp-stat {
  min-height: 74px;
  justify-content: center;
  border-radius: 6px;
  transition: transform var(--dur-fast) var(--ease-hud), border-color var(--dur-fast) var(--ease-hud), background var(--dur-fast) var(--ease-hud);
}

.pp-page.pp-logged #sampDash .pp-stat:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--c-hot) 28%, var(--pro-border-soft));
  background: linear-gradient(180deg, rgba(21, 32, 50, 0.82), rgba(7, 12, 22, 0.72));
}

.pp-page.pp-logged #sampDash .pp-stat__num,
.pp-page.pp-logged #sampDash .pp-attr__v,
.pp-page.pp-logged #sampDash .pp-inv__qty,
.pp-page.pp-logged #sampDash .pp-coin__amt,
.pp-page.pp-logged #sampDash .pp-item__price {
  color: #F8FBFF;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pp-page.pp-logged #sampDash .pp-stat__label,
.pp-page.pp-logged #sampDash .pp-attr__k,
.pp-page.pp-logged #sampDash .pp-card__text,
.pp-page.pp-logged #sampDash .pp-veh__meta,
.pp-page.pp-logged #sampDash .pp-prop__meta,
.pp-page.pp-logged #sampDash .pp-weapon__ammo {
  color: #AEBDD0;
}

.pp-page.pp-logged #sampDash .pp-stat__label,
.pp-page.pp-logged #sampDash .pp-attr__k {
  line-height: 1.28;
}

.pp-page.pp-logged #sampDash .pp-attr:hover,
.pp-page.pp-logged #sampDash .pp-inv__item:hover,
.pp-page.pp-logged #sampDash .pp-weapon:hover,
.pp-page.pp-logged #sampDash .pp-veh__item:hover,
.pp-page.pp-logged #sampDash .pp-prop:hover,
.pp-page.pp-logged #sampDash .pp-item:hover {
  border-color: color-mix(in srgb, var(--c-city) 30%, var(--pro-border-soft));
}

.pp-page.pp-logged #sampDash .pp-stat__bar {
  height: 8px;
  padding: 1px;
  border: 1px solid rgba(126, 146, 168, 0.18);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(3, 6, 12, 0.92), rgba(13, 20, 34, 0.86));
}

.pp-page.pp-logged #sampDash .pp-stat__bar > i {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--prog-1, #7DD3FC), var(--prog-2, #A78BFA));
  box-shadow: 0 0 16px color-mix(in srgb, var(--prog-1, #7DD3FC) 46%, transparent);
}

#sAchBar { --prog-1: #46D6A0; --prog-2: #7DD3FC; }
#sPetsBar { --prog-1: #F5C451; --prog-2: #FB7185; }

.pp-page.pp-logged #sampDash .pp-bars { gap: 15px; }

/* Trijų stotelių užpildas - atspalvio kelionė, kaip verslų juostoje
   (.pp-biz-meter i), o ne vienos spalvos šviesėjimas. Kiekviena juosta
   keliauja per gretimus atspalvius, bet lieka savo spalvų šeimoje, kad
   keturias būsenas vis tiek būtų galima atskirti iš pirmo žvilgsnio.
   --bar-0 = pradžia, --bar = vidurys (ir švytėjimas), --bar-2 = galas. */
.pp-page.pp-logged #sampDash .pp-bar {
  --bar-0: #3A6BE0;
  --bar: #4DA3FF;
  --bar-2: #66E8FF;
  --bar-glow: rgba(77, 163, 255, 0.34);
}

/* gyvybės: žarija -> raudona -> gintarinė (kaip GTA:SA HUD) */
.pp-page.pp-logged #sampDash .pp-bar--health {
  --bar-0: #7A1020;
  --bar: #F04438;
  --bar-2: #FFB35C;
  --bar-glow: rgba(240, 68, 56, 0.44);
}

/* šarvai: plienas -> žydra -> beveik balta. Sodresnė mėlyna nei anksčiau -
   pilkas variantas šalia sodrių gyvybių ir sotumo atrodė kaip išjungtas.
   Pradžia artima --c-city (#4DA3FF), t. y. SFG mazgo spalvai. */
.pp-page.pp-logged #sampDash .pp-bar--armor {
  --bar-0: #3E7FC4;
  --bar: #9FD4F0;
  --bar-2: #EAFBFF;
  --bar-glow: rgba(159, 212, 240, 0.48);
}

/* sotumas: oranžinė -> auksinė -> gelsvai žalsva */
.pp-page.pp-logged #sampDash .pp-bar--hunger {
  --bar-0: #E0703A;
  --bar: #F5C451;
  --bar-2: #F2ED72;
  --bar-glow: rgba(245, 196, 81, 0.4);
}

/* girtumas: purpurinė -> violetinė -> rugiagėlių mėlyna */
.pp-page.pp-logged #sampDash .pp-bar--drunk {
  --bar-0: #C4479B;
  --bar: #8B5CF6;
  --bar-2: #6FA8FF;
  --bar-glow: rgba(139, 92, 246, 0.4);
}

/* pavojus: grynas karštas raudonis BE gintaro.
   Gyvybių juosta pati keliauja žarija -> raudona -> gintaras, todėl gintarinė
   pavojaus versija atrodytų beveik identiškai. Čia laikomės vienos spalvos, o
   skubą neša pulsavimas - jis veikia nepriklausomai nuo juostos spalvos. */
.pp-page.pp-logged #sampDash .pp-bar.is-alert {
  --bar-0: #8E0018;
  --bar: #FF1E2D;
  --bar-2: #FF6470;
  --bar-glow: rgba(255, 30, 45, 0.52);
}
.pp-page.pp-logged #sampDash .pp-bar.is-alert .pp-bar__fill {
  animation: ppBarAlert 1.5s ease-in-out infinite;
}
@keyframes ppBarAlert {
  0%, 100% { box-shadow: 0 0 18px var(--bar-glow); }
  50%      { box-shadow: 0 0 26px 2px var(--bar-glow); filter: brightness(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .pp-page.pp-logged #sampDash .pp-bar.is-alert .pp-bar__fill { animation: none; }
}

.pp-page.pp-logged #sampDash .pp-bar__head {
  align-items: baseline;
  margin-bottom: 8px;
  color: #AEBDD0;
  font-family: var(--font-body);
  font-size: 0.76rem;
  letter-spacing: 0;
}

.pp-page.pp-logged #sampDash .pp-bar__head span:first-child {
  color: #B9C6D8;
  font-weight: 600;
}

.pp-page.pp-logged #sampDash .pp-bar__head span:last-child {
  color: #F8FBFF;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.pp-page.pp-logged #sampDash .pp-bar__track {
  position: relative;
  height: 11px;
  padding: 1px;
  border: 1px solid rgba(126, 146, 168, 0.2);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(3, 6, 12, 0.94), rgba(13, 20, 34, 0.88));
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.48);
}

.pp-page.pp-logged #sampDash .pp-bar__track::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: repeating-linear-gradient(90deg, transparent 0 20px, rgba(255, 255, 255, 0.08) 20px 21px);
  opacity: 0.2;
  pointer-events: none;
}

.pp-page.pp-logged #sampDash .pp-bar__fill {
  position: relative;
  z-index: 1;
  width: var(--pct, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bar-0), var(--bar), var(--bar-2));
  box-shadow: 0 0 18px var(--bar-glow);
}

.pp-page.pp-logged #sampDash .pp-bar__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 56%);
}

@media (max-width: 640px) {
  .pp-page.pp-logged #sampDash .pp-stat { min-height: 68px; }
  .pp-page.pp-logged #sampDash .pp-card__title { font-size: 0.86rem; }
  .pp-page.pp-logged #sampDash .pp-bar__head { font-size: 0.72rem; }
}

/* SFG panel - 2026-06-09m: readable vehicle and weapon previews */
.pp-page.pp-logged #sampDash .pp-veh {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.pp-page.pp-logged #sampDash .pp-veh__item {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 132px;
  padding: 17px 18px;
  overflow: hidden;
}

.pp-page.pp-logged #sampDash .pp-veh__icon,
.pp-page.pp-logged #sampDash .pp-weapon__pic {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--c-city) 26%, var(--pro-border-soft));
  border-radius: 8px;
  background:
    radial-gradient(80% 80% at 50% 42%, color-mix(in srgb, var(--c-city) 18%, transparent), transparent 72%),
    linear-gradient(180deg, rgba(20, 31, 48, 0.72), rgba(4, 7, 13, 0.78));
}

.pp-page.pp-logged #sampDash .pp-veh__icon::after,
.pp-page.pp-logged #sampDash .pp-weapon__pic::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 10px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(248, 251, 255, 0.24), transparent);
  opacity: 0.8;
}

.pp-page.pp-logged #sampDash .pp-veh__icon {
  width: 172px;
  height: 104px;
}

.pp-page.pp-logged #sampDash .pp-veh__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(1.16) contrast(1.1) saturate(1.08) drop-shadow(0 14px 16px rgba(0, 0, 0, 0.48));
}

.pp-page.pp-logged #sampDash .pp-veh__svg {
  position: relative;
  z-index: 1;
  width: 72%;
  color: var(--c-city);
}

.pp-page.pp-logged #sampDash .pp-weapons {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.pp-page.pp-logged #sampDash .pp-weapon {
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 108px;
  padding: 15px 16px;
  overflow: hidden;
}

.pp-page.pp-logged #sampDash .pp-weapon__pic {
  width: 138px;
  height: 82px;
  padding: 0;
  border-color: rgba(232, 65, 77, 0.26);
  background:
    radial-gradient(80% 80% at 50% 45%, rgba(232, 65, 77, 0.16), transparent 72%),
    linear-gradient(180deg, rgba(22, 28, 42, 0.74), rgba(5, 7, 12, 0.78));
}

.pp-page.pp-logged #sampDash .pp-weapon__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(1.36) contrast(1.18) saturate(1.12) drop-shadow(0 10px 12px rgba(0, 0, 0, 0.55));
}

.pp-page.pp-logged #sampDash .pp-weapon__ic {
  position: relative;
  z-index: 1;
  width: 58px;
}

@media (max-width: 620px) {
  .pp-page.pp-logged #sampDash .pp-veh { grid-template-columns: 1fr; }
  .pp-page.pp-logged #sampDash .pp-veh__item {
    grid-template-columns: 1fr;
    gap: 13px;
  }
  .pp-page.pp-logged #sampDash .pp-veh__icon {
    width: 100%;
    height: 128px;
  }
  .pp-page.pp-logged #sampDash .pp-weapons { grid-template-columns: 1fr; }
  .pp-page.pp-logged #sampDash .pp-weapon {
    grid-template-columns: 122px minmax(0, 1fr);
    gap: 14px;
  }
  .pp-page.pp-logged #sampDash .pp-weapon__pic {
    width: 122px;
    height: 76px;
  }
}

@media (max-width: 360px) {
  .pp-page.pp-logged #sampDash .pp-weapon { grid-template-columns: 1fr; }
  .pp-page.pp-logged #sampDash .pp-weapon__pic {
    width: 100%;
    height: 86px;
  }
}

/* SFG panel - 2026-06-09n: compact update controls + status/value refinements */
/* 2026-07-27: čia buvę .pp-bar--health / .pp-bar--armor spalvų perrašymai
   pašalinti. Jie ėjo PO pagrindinio juostų bloko (~3760 eil.), turėjo tokį
   patį specifiškumą ir todėl tyliai laimėdavo - dėl to gyvybių galas likdavo
   lašišinis (#FF8A8F), o šarvai pilki, nesvarbu ką nustatydavai aukščiau.
   Be to jie taikėsi ir į .is-alert, tad panaikindavo pavojaus spalvą.
   Vieta spalvoms dabar viena: „Trijų stotelių užpildas" blokas. */

.pp-page.pp-logged #sampDash .pp-char {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 18px;
}

.pp-page.pp-logged #sampDash .pp-char__right {
  margin-left: auto;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.pp-page.pp-logged #sampDash .pp-char__right .pp-badge {
  margin: 0;
  flex-basis: auto;
  align-self: stretch;
  justify-content: center;
}

.pp-page.pp-logged #sampDash .pp-char .pp-dashbar {
  width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  background: transparent;
  border: 0;
  box-shadow: none;
  clip-path: none;
}

.pp-page.pp-logged #sampDash .pp-char .pp-dashbar::before { display: none; }

.pp-page.pp-logged #sampDash .pp-char .pp-dashbar__id {
  justify-content: flex-end;
  gap: 7px;
  color: #AEBDD0;
}

.pp-page.pp-logged #sampDash .pp-char .pp-dashbar__label,
.pp-page.pp-logged #sampDash .pp-char #sSessionName {
  display: none;
}

.pp-page.pp-logged #sampDash .pp-char #sSessionTime,
.pp-page.pp-logged #sampDash .pp-char #sSessionStatus {
  color: #AEBDD0;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
}

.pp-page.pp-logged #sampDash .pp-char .pp-dashbar__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pp-page.pp-logged #sampDash .pp-char .pp-dashbar__actions .copybtn {
  width: 100%;
  min-height: 32px;
  padding: 7px 9px;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
}

.pp-page.pp-logged #sampDash .pp-char__line,
.pp-page.pp-logged #sampDash .pp-char__k,
.pp-page.pp-logged #sampDash .pp-stat__label {
  color: #AEBDD0;
}

.pp-page.pp-logged #sampDash .pp-value__num {
  color: #F8FBFF;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pp-page.pp-logged #sampDash .pp-value__unit,
.pp-page.pp-logged #sampDash .pp-unit {
  color: #AEBDD0;
  font-size: 0.84em;
  font-weight: 600;
}

.pp-page.pp-logged #sampDash .pp-char__v {
  color: #F8FBFF;
  font-weight: 700;
}

.pp-page.pp-logged #sampDash .pp-char__v .pp-value__unit,
.pp-page.pp-logged #sampDash .pp-stat__num .pp-value__unit {
  color: #AEBDD0;
}

@media (max-width: 720px) {
  .pp-page.pp-logged #sampDash .pp-char {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .pp-page.pp-logged #sampDash .pp-char__right {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    align-items: stretch;
    margin-left: 0;
  }

  .pp-page.pp-logged #sampDash .pp-char__right .pp-badge {
    flex-basis: auto;
    align-self: stretch;
  }

  .pp-page.pp-logged #sampDash .pp-char .pp-dashbar__id {
    justify-content: flex-start;
  }
}

/* SFG panel - 2026-06-10a: advanced player profile header + rank-colored tables */
.pp-page.pp-logged #sampDash .pp-char {
  position: relative;
  isolation: isolate;
  min-height: 292px;
  padding: clamp(24px, 3vw, 36px);
  grid-template-columns: auto minmax(0, 1fr) minmax(232px, auto);
  column-gap: clamp(20px, 3vw, 34px);
  overflow: hidden;
  background:
    radial-gradient(70% 95% at 9% 35%, color-mix(in srgb, var(--c-city) 20%, transparent), transparent 62%),
    radial-gradient(55% 70% at 94% 10%, color-mix(in srgb, var(--c-city) 18%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(15, 24, 42, 0.96), rgba(5, 9, 17, 0.9));
  border-color: color-mix(in srgb, var(--c-city) 54%, var(--pro-border));
}

.pp-page.pp-logged #sampDash .pp-char::before {
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c-city), color-mix(in srgb, var(--c-city) 30%, transparent) 58%, transparent);
  opacity: 0.95;
}

.pp-page.pp-logged #sampDash .pp-char::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 82%, transparent);
  opacity: 0.26;
}

.pp-page.pp-logged #sampDash .pp-char__skin {
  width: 126px;
  height: 126px;
  border-width: 2px;
  border-color: var(--c-city);
  background:
    radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--c-city) 32%, transparent), rgba(3, 6, 12, 0.64) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent);
  box-shadow:
    0 0 0 8px color-mix(in srgb, var(--c-city) 10%, transparent),
    0 0 36px -5px var(--c-city-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.pp-page.pp-logged #sampDash .pp-char__skin img {
  width: 144px;
  height: 144px;
  margin-top: 12px;
}

.pp-page.pp-logged #sampDash .pp-char__id {
  gap: 13px;
}

.pp-page.pp-logged #sampDash .pp-char__id::before {
  content: "SFG PROFILE";
  width: max-content;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--c-city) 42%, transparent);
  color: color-mix(in srgb, var(--c-city) 76%, var(--c-hot));
  background: color-mix(in srgb, var(--c-city) 10%, transparent);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.pp-page.pp-logged #sampDash .pp-char__name {
  font-size: clamp(1.72rem, 2.6vw, 2.45rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: 0 0 24px color-mix(in srgb, var(--c-city) 32%, transparent);
}

.pp-page.pp-logged #sampDash .pp-char__info {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 10px;
  max-width: 560px;
  margin-top: 0;
}

.pp-page.pp-logged #sampDash .pp-char__line {
  min-height: 54px;
  margin: 0;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  background: linear-gradient(180deg, rgba(18, 28, 46, 0.66), rgba(5, 9, 17, 0.58));
  border: 1px solid color-mix(in srgb, var(--c-city) 24%, var(--pro-border-soft));
  border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.pp-page.pp-logged #sampDash .pp-char__line::first-letter { text-transform: uppercase; }

.pp-page.pp-logged #sampDash .pp-char__k {
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pp-page.pp-logged #sampDash .pp-char__v {
  font-size: 0.96rem;
  line-height: 1.2;
}

.pp-page.pp-logged #sampDash .pp-char__right {
  min-width: 232px;
  padding: 14px;
  align-self: stretch;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--c-city) 32%, transparent);
  border-radius: 8px;
  background:
    radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--c-city) 18%, transparent), transparent 72%),
    rgba(5, 9, 17, 0.38);
}

.pp-page.pp-logged #sampDash .pp-char__glow {
  width: 98px;
  height: 98px;
}

.pp-page.pp-logged #sampDash .pp-char__badge {
  height: 66px;
}

.pp-page.pp-logged #sampDash .pp-char__right .pp-badge {
  border-color: var(--c-city);
  color: var(--c-hot);
  background: color-mix(in srgb, var(--c-city) 10%, transparent);
}

.pp-page.pp-logged #sampDash .pp-char .pp-dashbar__actions .copybtn {
  border-color: color-mix(in srgb, var(--c-city) 32%, var(--c-grid));
}

.pp-page.pp-logged #sampDash .pp-card--contra::before,
.pp-page.pp-logged #sampDash .pp-card--contra .pp-card__title::before {
  background: linear-gradient(90deg, var(--c-city), transparent);
}

.pp-page.pp-logged #sampDash .pp-card--contra .pp-card__title::before {
  background: var(--c-city);
}

.pp-page.pp-logged #sampDash .pp-card--contra .pp-stat,
.pp-page.pp-logged #sampDash .pp-card--contra {
  border-color: color-mix(in srgb, var(--c-city) 28%, var(--pro-border-soft));
}

.pp-page.pp-logged #sampDash .pp-weapon__pic {
  border-color: color-mix(in srgb, var(--c-city) 30%, var(--pro-border-soft));
  background:
    radial-gradient(80% 80% at 50% 45%, color-mix(in srgb, var(--c-city) 16%, transparent), transparent 72%),
    linear-gradient(180deg, rgba(22, 28, 42, 0.74), rgba(5, 7, 12, 0.78));
}

.pp-page.pp-logged #sampDash .pp-board__me td {
  background: color-mix(in srgb, var(--c-city) 10%, transparent);
  border-bottom-color: var(--c-city);
}

@media (max-width: 860px) {
  .pp-page.pp-logged #sampDash .pp-char {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 0;
  }

  .pp-page.pp-logged #sampDash .pp-char__right {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    align-items: stretch;
    justify-content: start;
  }
}

@media (max-width: 560px) {
  .pp-page.pp-logged #sampDash .pp-char {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .pp-page.pp-logged #sampDash .pp-char__skin {
    width: 104px;
    height: 104px;
  }

  .pp-page.pp-logged #sampDash .pp-char__skin img {
    width: 120px;
    height: 120px;
  }

  .pp-page.pp-logged #sampDash .pp-char__info {
    grid-template-columns: 1fr;
  }
}

/* SFG panel - 2026-06-10b: multi-badge stack */
.pp-page.pp-logged #sampDash .pp-badge-stack {
  display: grid;
  grid-template-columns: repeat(3, 54px);
  gap: 8px;
  place-content: center;
  align-self: center;
  width: min(100%, 214px);
  min-width: 112px;
  height: auto;
  min-height: 104px;
  padding: 10px;
  border-radius: 8px;
}

.pp-page.pp-logged #sampDash .pp-badge-stack[hidden] {
  display: none;
}

.pp-page.pp-logged #sampDash .pp-badge-stack--single {
  grid-template-columns: 72px;
  width: 104px;
  min-width: 104px;
  min-height: 104px;
  padding: 0;
  border-radius: 50%;
}

.pp-page.pp-logged #sampDash .pp-badge-stack__item,
.pp-page.pp-logged #sampDash .pp-badge-stack__more {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--c-city) 34%, transparent);
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--c-city) 18%, transparent), transparent 70%),
    rgba(4, 8, 15, 0.54);
  box-shadow: 0 0 16px -7px var(--c-city-glow), inset 0 0 16px rgba(255, 255, 255, 0.04);
}

.pp-page.pp-logged #sampDash .pp-badge-stack--single .pp-badge-stack__item {
  width: 72px;
  height: 72px;
}

.pp-page.pp-logged #sampDash .pp-badge-stack__item .pp-char__badge {
  width: auto;
  height: 42px;
  max-width: 48px;
  object-fit: contain;
}

.pp-page.pp-logged #sampDash .pp-badge-stack--single .pp-char__badge {
  height: 58px;
  max-width: 66px;
}

.pp-page.pp-logged #sampDash .pp-badge-stack__more {
  color: var(--c-hot);
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0;
}

@media (max-width: 560px) {
  .pp-page.pp-logged #sampDash .pp-badge-stack {
    grid-template-columns: repeat(3, 48px);
    width: min(100%, 196px);
    gap: 7px;
  }

  .pp-page.pp-logged #sampDash .pp-badge-stack__item,
  .pp-page.pp-logged #sampDash .pp-badge-stack__more {
    width: 48px;
    height: 48px;
  }

  .pp-page.pp-logged #sampDash .pp-badge-stack__item .pp-char__badge {
    height: 37px;
    max-width: 42px;
  }
}

/* SFG panel - 2026-06-10d: cleaner compact profile rail */
.pp-page.pp-logged #sampDash .pp-char__right {
  min-width: 226px;
  padding: 10px 0 10px 16px;
  align-self: stretch;
  justify-content: center;
  align-items: stretch;
  gap: 8px;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--c-city) 28%, rgba(126, 146, 168, 0.18));
  border-radius: 0;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-city) 8%, transparent)),
    radial-gradient(110% 92% at 100% 0%, color-mix(in srgb, var(--c-city) 14%, transparent), transparent 68%);
}

.pp-page.pp-logged #sampDash .pp-badge-stack,
.pp-page.pp-logged #sampDash .pp-badge-stack--single {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 0 2px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pp-page.pp-logged #sampDash .pp-badge-stack[hidden] {
  display: none;
}

.pp-page.pp-logged #sampDash .pp-badge-stack__item,
.pp-page.pp-logged #sampDash .pp-badge-stack__more,
.pp-page.pp-logged #sampDash .pp-badge-stack--single .pp-badge-stack__item {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--c-city) 28%, rgba(255, 255, 255, 0.08));
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.1), transparent 48%),
    linear-gradient(180deg, rgba(16, 21, 33, 0.82), rgba(3, 6, 12, 0.74));
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.24),
    0 0 18px -10px var(--c-city-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.pp-page.pp-logged #sampDash .pp-badge-stack__item .pp-char__badge,
.pp-page.pp-logged #sampDash .pp-badge-stack--single .pp-char__badge {
  width: auto;
  height: 34px;
  max-width: 38px;
  object-fit: contain;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.68));
}

.pp-page.pp-logged #sampDash .pp-badge-stack__more {
  color: var(--c-hot);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0;
}

.pp-page.pp-logged #sampDash .pp-char__right .pp-badge {
  min-height: 38px;
  padding: 9px 12px;
  align-self: stretch;
  justify-content: flex-start;
  border: 0;
  border-left: 2px solid var(--c-city);
  border-radius: 0 8px 8px 0;
  color: var(--c-hot);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--c-city) 18%, rgba(5, 9, 17, 0.82)), rgba(5, 9, 17, 0.46));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}

.pp-page.pp-logged #sampDash .pp-char .pp-dashbar {
  gap: 7px;
}

.pp-page.pp-logged #sampDash .pp-char .pp-dashbar__id {
  justify-content: center;
  min-height: 18px;
  gap: 0;
}

.pp-page.pp-logged #sampDash .pp-char #sSessionTime,
.pp-page.pp-logged #sampDash .pp-char #sSessionStatus {
  width: 100%;
  text-align: center;
  color: #8EA0B5;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
}

.pp-page.pp-logged #sampDash .pp-char .pp-dashbar__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--c-city) 28%, rgba(126, 146, 168, 0.18));
  border-radius: 8px;
  background: rgba(5, 9, 17, 0.44);
}

.pp-page.pp-logged #sampDash .pp-char .pp-dashbar__actions .copybtn {
  width: 100%;
  min-height: 30px;
  padding: 7px 8px;
  border: 0;
  border-radius: 0;
  color: #B9C5D3;
  background: transparent;
  font-size: 0.56rem;
  letter-spacing: 0.1em;
}

.pp-page.pp-logged #sampDash .pp-char .pp-dashbar__actions .copybtn + .copybtn {
  border-left: 1px solid color-mix(in srgb, var(--c-city) 28%, rgba(126, 146, 168, 0.18));
}

.pp-page.pp-logged #sampDash .pp-char .pp-dashbar__actions .copybtn:hover {
  color: var(--c-hot);
  background: color-mix(in srgb, var(--c-city) 12%, transparent);
}

@media (max-width: 860px) {
  .pp-page.pp-logged #sampDash .pp-char__right {
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--c-city) 26%, rgba(126, 146, 168, 0.18));
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--c-city) 8%, transparent), transparent 80%);
  }

  .pp-page.pp-logged #sampDash .pp-char__right .pp-badge {
    justify-content: center;
    border-left: 0;
    border-top: 2px solid var(--c-city);
    border-radius: 0 0 8px 8px;
  }
}

@media (max-width: 560px) {
  .pp-page.pp-logged #sampDash .pp-badge-stack__item,
  .pp-page.pp-logged #sampDash .pp-badge-stack__more,
  .pp-page.pp-logged #sampDash .pp-badge-stack--single .pp-badge-stack__item {
    width: 40px;
    height: 40px;
  }

  .pp-page.pp-logged #sampDash .pp-badge-stack__item .pp-char__badge,
  .pp-page.pp-logged #sampDash .pp-badge-stack--single .pp-char__badge {
    height: 31px;
    max-width: 35px;
  }
}

/* SFG panel - 2026-06-10e: profile identity plate */
.pp-page.pp-logged #sampDash .pp-char__right {
  min-width: 254px;
  padding: 12px 0 12px 18px;
  gap: 9px;
  border-left-color: color-mix(in srgb, var(--c-city) 34%, rgba(126, 146, 168, 0.16));
}

.pp-page.pp-logged #sampDash .pp-char__right .pp-badge {
  order: 1;
  position: relative;
  min-height: 44px;
  padding: 11px 14px 11px 42px;
  border: 1px solid color-mix(in srgb, var(--c-city) 36%, rgba(126, 146, 168, 0.16));
  border-left: 0;
  border-radius: 8px;
  color: #F5F7FB;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--c-city) 22%, rgba(4, 8, 15, 0.9)), rgba(8, 14, 24, 0.58)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent);
  box-shadow:
    inset 3px 0 0 var(--c-city),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 22px rgba(0, 0, 0, 0.22);
  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 0.045em;
}

.pp-page.pp-logged #sampDash .pp-char__right .pp-badge::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--c-city);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--c-city) 14%, transparent),
    0 0 18px -3px var(--c-city-glow);
}

.pp-page.pp-logged #sampDash .pp-badge-stack,
.pp-page.pp-logged #sampDash .pp-badge-stack--single {
  order: 2;
  justify-content: flex-start;
  gap: 7px;
  padding: 0;
}

.pp-page.pp-logged #sampDash .pp-badge-stack__item,
.pp-page.pp-logged #sampDash .pp-badge-stack__more,
.pp-page.pp-logged #sampDash .pp-badge-stack--single .pp-badge-stack__item {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border-color: color-mix(in srgb, var(--c-city) 24%, rgba(255, 255, 255, 0.08));
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(13, 19, 31, 0.92), rgba(3, 6, 12, 0.72));
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.pp-page.pp-logged #sampDash .pp-badge-stack__item .pp-char__badge,
.pp-page.pp-logged #sampDash .pp-badge-stack--single .pp-char__badge {
  height: 31px;
  max-width: 34px;
}

.pp-page.pp-logged #sampDash .pp-badge-stack__more {
  font-size: 0.72rem;
  color: #F5F7FB;
}

.pp-page.pp-logged #sampDash .pp-char .pp-dashbar {
  order: 3;
  gap: 7px;
}

.pp-page.pp-logged #sampDash .pp-char .pp-dashbar__id {
  justify-content: flex-start;
}

.pp-page.pp-logged #sampDash .pp-char #sSessionTime,
.pp-page.pp-logged #sampDash .pp-char #sSessionStatus {
  text-align: left;
  color: #8192A8;
  font-size: 0.62rem;
}

.pp-page.pp-logged #sampDash .pp-char .pp-dashbar__actions {
  gap: 7px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.pp-page.pp-logged #sampDash .pp-char .pp-dashbar__actions .copybtn {
  min-height: 31px;
  border: 1px solid color-mix(in srgb, var(--c-city) 22%, rgba(126, 146, 168, 0.16));
  border-radius: 7px;
  color: #AEBBCC;
  background:
    linear-gradient(180deg, rgba(17, 26, 42, 0.74), rgba(5, 9, 17, 0.58));
}

.pp-page.pp-logged #sampDash .pp-char .pp-dashbar__actions .copybtn + .copybtn {
  border-left: 1px solid color-mix(in srgb, var(--c-city) 22%, rgba(126, 146, 168, 0.16));
}

.pp-page.pp-logged #sampDash .pp-char .pp-dashbar__actions #ppRefresh {
  color: #F5F7FB;
  border-color: color-mix(in srgb, var(--c-city) 42%, rgba(126, 146, 168, 0.16));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--c-city) 18%, rgba(17, 26, 42, 0.82)), rgba(5, 9, 17, 0.6));
}

@media (max-width: 860px) {
  .pp-page.pp-logged #sampDash .pp-char__right {
    min-width: 0;
    padding: 12px 0 0;
  }

  .pp-page.pp-logged #sampDash .pp-char__right .pp-badge,
  .pp-page.pp-logged #sampDash .pp-badge-stack,
  .pp-page.pp-logged #sampDash .pp-badge-stack--single,
  .pp-page.pp-logged #sampDash .pp-char .pp-dashbar__id {
    justify-content: center;
  }

  .pp-page.pp-logged #sampDash .pp-char__right .pp-badge {
    padding-left: 42px;
  }

  .pp-page.pp-logged #sampDash .pp-char #sSessionTime,
  .pp-page.pp-logged #sampDash .pp-char #sSessionStatus {
    text-align: center;
  }
}

/* SFG panel - 2026-06-10f: badges beside name, update controls in profile corner */
.pp-page.pp-logged #sampDash .pp-char {
  position: relative;
  grid-template-columns: auto minmax(0, 1fr);
  padding-right: 278px;
}

.pp-page.pp-logged #sampDash .pp-char__headline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px 11px;
  min-width: 0;
}

.pp-page.pp-logged #sampDash .pp-char__headline .pp-char__name {
  min-width: 0;
  max-width: 100%;
}

.pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack,
.pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack--single {
  order: 0;
  display: flex;
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: min(100%, 214px);
  min-height: 0;
  height: auto;
  padding: 0;
  gap: 5px;
  align-items: center;
  justify-content: flex-start;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack[hidden] {
  display: none;
}

.pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack__item,
.pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack__more,
.pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack--single .pp-badge-stack__item {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack__item .pp-char__badge,
.pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack--single .pp-char__badge {
  height: 27px;
  max-width: 30px;
}

.pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack__more {
  font-size: 0.68rem;
}

.pp-page.pp-logged #sampDash .pp-char__right {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 236px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  align-self: auto;
  align-items: flex-end;
  justify-content: flex-start;
}

.pp-page.pp-logged #sampDash .pp-char .pp-dashbar {
  width: 100%;
  display: grid;
  gap: 7px;
  justify-items: end;
}

.pp-page.pp-logged #sampDash .pp-char .pp-dashbar__id {
  width: 100%;
  justify-content: flex-end;
  text-align: right;
}

.pp-page.pp-logged #sampDash .pp-char .pp-dashbar__label,
.pp-page.pp-logged #sampDash .pp-char #sSessionName {
  display: none;
}

.pp-page.pp-logged #sampDash .pp-char #sSessionTime,
.pp-page.pp-logged #sampDash .pp-char #sSessionStatus {
  width: auto;
  text-align: right;
  color: #8EA0B5;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.pp-page.pp-logged #sampDash .pp-char .pp-dashbar__actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  width: 100%;
}

.pp-page.pp-logged #sampDash .pp-char .pp-dashbar__actions .copybtn {
  width: auto;
  min-width: 92px;
  min-height: 30px;
  padding: 7px 10px;
}

@media (max-width: 980px) {
  .pp-page.pp-logged #sampDash .pp-char {
    padding-right: 0;
  }

  .pp-page.pp-logged #sampDash .pp-char__right {
    position: static;
    grid-column: 1 / -1;
    width: 100%;
    padding-top: 12px;
    align-items: stretch;
    border-top: 1px solid color-mix(in srgb, var(--c-city) 24%, rgba(126, 146, 168, 0.16));
  }

  .pp-page.pp-logged #sampDash .pp-char .pp-dashbar,
  .pp-page.pp-logged #sampDash .pp-char .pp-dashbar__id,
  .pp-page.pp-logged #sampDash .pp-char .pp-dashbar__actions {
    justify-items: center;
    justify-content: center;
    text-align: center;
  }

  .pp-page.pp-logged #sampDash .pp-char #sSessionTime,
  .pp-page.pp-logged #sampDash .pp-char #sSessionStatus {
    text-align: center;
  }
}

@media (max-width: 560px) {
  .pp-page.pp-logged #sampDash .pp-char__headline {
    justify-content: center;
  }

  .pp-page.pp-logged #sampDash .pp-char__headline .pp-char__name {
    width: 100%;
    text-align: center;
  }

  .pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack,
  .pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack--single {
    justify-content: center;
  }
}

/* SWC site polish - 2026-06-10s */
:root {
  --swc-line: rgba(126, 146, 168, 0.18);
  --swc-line-strong: rgba(185, 198, 216, 0.26);
  --swc-surface: rgba(11, 18, 32, 0.82);
  --swc-surface-strong: rgba(14, 23, 41, 0.92);
  --swc-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

body {
  text-rendering: geometricPrecision;
}

body::before {
  filter: saturate(0.94) contrast(1.04);
}

body::after {
  opacity: 0.1;
}

.section {
  padding-block: clamp(3.25rem, 7vw, 6.65rem);
}

.section-label {
  margin-bottom: clamp(1.55rem, 3vw, 2.45rem);
  letter-spacing: 0.13em;
}

.section-label::after {
  background: linear-gradient(90deg, var(--swc-line-strong), transparent);
}

.topbar {
  height: 58px;
  background: rgba(5, 9, 17, 0.86);
  border-bottom-color: var(--swc-line);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.topbar__tabs {
  gap: 4px;
}

.tab {
  min-height: 38px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  transition:
    color var(--dur-fast),
    border-color var(--dur-fast),
    background-color var(--dur-fast),
    box-shadow var(--dur-fast);
}

.tab:hover,
.tab:focus-visible {
  color: var(--c-hot);
  border-color: var(--swc-line);
  background: rgba(255, 255, 255, 0.025);
}

.tab--cs.is-active {
  color: var(--c-zombie);
  border-color: color-mix(in srgb, var(--c-zombie) 48%, transparent);
  background: color-mix(in srgb, var(--c-zombie) 8%, transparent);
}

.tab--samp.is-active {
  color: var(--c-city);
  border-color: color-mix(in srgb, var(--c-city) 48%, transparent);
  background: color-mix(in srgb, var(--c-city) 8%, transparent);
}

.topbar__discord,
.langswitch {
  border: 1px solid var(--swc-line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
}

.topbar__discord {
  padding: 8px 11px;
}

.langswitch {
  padding-inline: 4px;
}

.hero__center::before {
  opacity: 0.84;
}

.hero__sub,
.node__pitch,
.cap__copy,
.pp-card__text,
.feedbox__text {
  color: #AEBBCC;
}

.hero__ctas {
  gap: 0;
}

.cta,
.copybtn,
.pp-input,
.pp-passwrap,
.pp-check__box {
  border-radius: 7px;
}

.cta,
.copybtn {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.cta:hover,
.cta:focus-visible,
.copybtn:hover,
.copybtn:focus-visible {
  transform: translateY(-1px);
}

.node::after,
.term::after,
.cap::after,
.comms__panel::after,
.feedbox::after,
.pp-card {
  background: linear-gradient(180deg, var(--swc-surface-strong), var(--swc-surface));
  border-color: var(--swc-line);
  box-shadow:
    var(--swc-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.node__head,
.feedbox__bar,
.pp-dashbar {
  background: rgba(5, 9, 17, 0.5);
  border-bottom-color: var(--swc-line);
}

.node__body {
  gap: 16px;
}

.ipline,
.pp-attrs,
.pp-stat,
.pp-item,
.pp-veh__item,
.pp-weapon,
.pp-prop,
.pp-inv__item,
.pp-rig,
.pp-coin,
.pp-licitem {
  border-color: var(--swc-line);
  background: rgba(3, 6, 12, 0.44);
  border-radius: 7px;
}

.pp-input,
.pp-passwrap {
  background: rgba(3, 6, 12, 0.66);
  border-color: var(--swc-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.pp-input:hover,
.pp-passwrap:hover {
  border-color: var(--swc-line-strong);
}

.pp-board {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.pp-board th {
  background: rgba(255, 255, 255, 0.025);
  border-bottom-color: var(--swc-line);
}

.pp-board td {
  border-bottom-color: rgba(126, 146, 168, 0.12);
}

.pp-board tbody tr:hover td {
  background: rgba(255, 255, 255, 0.025);
}

.pp-page:not(.pp-logged) .pp-head {
  padding-top: clamp(5rem, 9vw, 7.5rem);
}

.pp-choice__card {
  border-radius: 8px;
}

.pp-modal__box {
  border-radius: 8px;
}

.ag-row,
.pp-card__row {
  align-items: end;
}

.pp-card__row {
  gap: 16px;
}

.pp-head__sub,
.pp-secure-note,
.pp-ident__status,
.pp-field__label,
.pp-choice__how {
  color: #AEBDD0;
}

.pp-choice__card,
.pp-modal__box {
  border-color: var(--swc-line);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.pp-choice__card:hover,
.pp-choice__card.is-active {
  box-shadow:
    0 20px 46px rgba(0, 0, 0, 0.28),
    0 0 24px -10px var(--node-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.pp-page.pp-logged #sampDash .pp-card,
.pp-page.pp-logged #sampDash .pp-char {
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.pp-page.pp-logged #sampDash .pp-card__title {
  letter-spacing: 0.075em;
}

.pp-page.pp-logged #sampDash .pp-board th {
  color: #AEBBCC;
}

.pp-page.pp-logged #sampDash .pp-board__me td {
  background: color-mix(in srgb, var(--c-city) 12%, rgba(5, 9, 17, 0.62));
}

.pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack__item,
.pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack__more {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 44%),
    linear-gradient(180deg, rgba(15, 22, 36, 0.96), rgba(3, 6, 12, 0.78));
}

.pp-headcount {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 8px;
  width: auto;
  min-width: 0;
  min-height: 0;
  padding: 0 0 5px;
  border: 0;
  border-radius: 0;
  color: #9AAABD;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-body);
}

.pp-headcount::before {
  content: '';
  width: 5px;
  height: 5px;
  flex: none;
  align-self: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-city) 82%, #FFFFFF);
  box-shadow: 0 0 10px color-mix(in srgb, var(--c-city) 55%, transparent);
}

.pp-headcount::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(100%, 74px);
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-city) 48%, transparent));
}

.pp-headcount__num {
  color: #F8FBFF;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.pp-headcount__label {
  color: #91A1B4;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.pp-page.pp-logged #sampDash .pp-licitem {
  min-height: 38px;
  padding: 9px 12px;
  border-radius: 7px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
  color: #AEBBCC;
}

.pp-page.pp-logged #sampDash .pp-licitem.is-on {
  color: var(--c-body);
  border-color: var(--pro-border-soft);
}

.pp-page.pp-logged #sampDash .pp-licitem.is-on i {
  background: #8295AC;
  box-shadow: none;
}

.pp-page.pp-logged #sampDash .pp-licitem__cat {
  color: #F8FBFF;
  font-weight: 800;
}

.pp-page.pp-logged #sampDash .pp-char__right {
  top: 14px;
  right: 14px;
  width: auto;
  max-width: 236px;
}

.pp-page.pp-logged #sampDash .pp-char .pp-dashbar {
  width: auto;
  justify-items: end;
}

.pp-page.pp-logged #sampDash .pp-char .pp-dashbar__id {
  order: 2;
  width: auto;
  display: grid;
  justify-items: end;
  justify-content: end;
  gap: 3px;
  text-align: right;
}

.pp-page.pp-logged #sampDash .pp-char .pp-dashbar__actions {
  order: 1;
  width: auto;
  justify-content: flex-end;
}

.pp-page.pp-logged #sampDash .pp-char .pp-dashbar__actions #ppRefresh {
  min-width: 108px;
}

.pp-page.pp-logged #sampDash .pp-veh__name,
.pp-page.pp-logged #sampDash .pp-weapon__name,
.pp-page.pp-logged #sampDash .pp-prop__name {
  letter-spacing: 0.02em;
}

.pp-slotmeter {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 34px;
  color: #AEBBCC;
}

.pp-slotmeter__label {
  color: #AEBBCC;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pp-slotmeter__slots {
  display: grid;
  grid-template-columns: repeat(3, 22px);
  gap: 5px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--c-city) 24%, rgba(126, 146, 168, 0.18));
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(16, 25, 41, 0.72), rgba(4, 8, 15, 0.58)),
    color-mix(in srgb, var(--c-city) 6%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 20px rgba(0, 0, 0, 0.18);
}

.pp-slotmeter__slots i {
  display: block;
  height: 7px;
  border: 1px solid rgba(126, 146, 168, 0.2);
  border-radius: 999px;
  background: rgba(126, 146, 168, 0.13);
}

.pp-slotmeter__slots i.is-on {
  border-color: transparent;
  background: linear-gradient(90deg, var(--c-city), var(--c-city-2));
  box-shadow: 0 0 14px -4px var(--c-city-glow);
}

.pp-buy {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--node-accent) 62%, var(--c-grid));
  color: var(--node-accent);
  background: linear-gradient(90deg, transparent 50%, color-mix(in srgb, var(--node-accent) 10%, transparent) 50%) 0 0 / 200% 100%;
  transition:
    color var(--dur-fast),
    background-position 300ms var(--ease-hud),
    box-shadow var(--dur-fast),
    border-color var(--dur-fast),
    transform var(--dur-fast);
}

.pp-buy:hover,
.pp-buy:focus-visible {
  color: var(--node-accent);
  border-color: var(--node-accent);
  background: linear-gradient(90deg, transparent 50%, color-mix(in srgb, var(--node-accent) 10%, transparent) 50%) -100% 0 / 200% 100%;
  box-shadow:
    0 0 18px -5px var(--node-glow),
    inset 0 0 14px -8px var(--node-glow);
}

.pp-buy:active {
  background: linear-gradient(90deg, transparent 50%, color-mix(in srgb, var(--node-accent) 15%, transparent) 50%) -100% 0 / 200% 100%;
}

.fl {
  max-width: 100%;
}

.fl__msg {
  display: block;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .topbar {
    height: auto;
    min-height: 58px;
    align-items: center;
  }

  .hero__ctas {
    flex-wrap: wrap;
    gap: 10px;
  }

  .hero__link {
    display: none;
  }

  .node__body {
    padding-bottom: 88px;
  }
}

/* Keep both hero CTAs on ONE centered line down to the mobile stack breakpoint
   - they used to wrap onto a second line. Shrink them fluidly instead; the
   <=560px column stack still takes over on real phones. */
@media (max-width: 860px) and (min-width: 561px) {
  .hero__ctas {
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(5px, 1.3vw, 10px);
  }
  .hero__ctas .cta {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 40px;
    padding: 11px clamp(8px, 2.1vw, 18px);
    font-size: clamp(0.6rem, 1.85vw, 0.8rem);
    letter-spacing: 0.05em;
    gap: 5px;
    white-space: nowrap;
  }
  .hero__ctas .cta__arrow { font-size: 0.62em; }
}


@media (max-width: 600px) {
  .section {
    padding-inline: 16px;
  }

  .topbar__right {
    gap: 6px;
  }

  .topbar__discord {
    padding-inline: 9px;
  }

  .topbar .tab {
    min-height: 34px;
    padding-inline: 9px;
    font-size: 0.68rem;
  }

  .wordmark {
    letter-spacing: 0.22em;
  }

  .hero__center {
    padding-inline: 18px;
  }

  .node__ctas,
  .term__btns,
  .pp-modal__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .node__ctas .cta,
  .node__ctas .copybtn,
  .term__btns .copybtn,
  .pp-modal__actions .copybtn,
  .pp-form .cta {
    width: 100%;
    justify-content: center;
  }

  .pp-slotmeter {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
  }

  .pp-slotmeter__slots {
    grid-template-columns: repeat(3, minmax(18px, 1fr));
    width: min(104px, 42vw);
  }

  .pp-headcount {
    width: 100%;
    align-items: center;
    gap: 9px;
    justify-content: flex-start;
    padding-left: 0;
    padding-top: 10px;
    padding-bottom: 0;
    min-height: 32px;
    border-radius: 0;
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--c-city) 30%, rgba(126, 146, 168, 0.18));
    border-right: 0;
    border-bottom: 0;
    background: transparent;
    box-shadow: none;
  }

  .pp-headcount::after {
    display: none;
  }

  .pp-headcount__num {
    margin-left: auto;
    font-size: 1rem;
  }

  .pp-page.pp-logged #sampDash .pp-char__right {
    position: static;
    top: auto;
    right: auto;
    width: 100%;
    max-width: none;
  }

  .pp-page.pp-logged #sampDash .pp-char .pp-dashbar {
    width: 100%;
    justify-items: center;
  }

  .pp-page.pp-logged #sampDash .pp-char .pp-dashbar__id {
    width: 100%;
    justify-items: center;
    justify-content: center;
    text-align: center;
  }

  .pp-page.pp-logged #sampDash .pp-char .pp-dashbar__actions {
    width: 100%;
    justify-content: center;
  }

  .ipline .copybtn {
    margin-left: 0;
  }

  .feedbox__lines {
    height: 360px;
    gap: 8px;
    line-height: 1.45;
  }

  .fl {
    grid-template-columns: auto auto;
    row-gap: 2px;
    white-space: normal;
  }

  .fl__msg {
    grid-column: 1 / -1;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* SFG panel - 2026-06-10v: final honor badge cascade override */
.pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack,
.pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack--single {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  width: auto;
  min-width: 0;
  max-width: min(100%, 560px);
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack[hidden] {
  display: none;
}

.pp-page.pp-logged #sampDash .pp-char__headline .pp-honor-badge,
.pp-page.pp-logged #sampDash .pp-honor-badge,
.pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack--single .pp-honor-badge {
  --badge-a: var(--c-city);
  --badge-b: var(--c-city-2);
  position: relative;
  display: inline-grid;
  grid-template-columns: 30px minmax(34px, max-content);
  align-items: center;
  gap: 6px;
  width: auto;
  min-width: 42px;
  height: 38px;
  padding: 3px 10px 3px 4px;
  border-radius: 11px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--badge-a) 54%, rgba(255, 255, 255, 0.18));
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 38%),
    radial-gradient(circle at 18px 15px, color-mix(in srgb, var(--badge-a) 36%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--badge-a) 18%, rgba(12, 18, 31, 0.98)), rgba(3, 6, 12, 0.86));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.035) inset,
    0 10px 22px -18px var(--badge-a),
    0 0 22px -14px var(--badge-b);
}

.pp-page.pp-logged #sampDash .pp-honor-badge::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 10px;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.18), transparent 30%, transparent 72%, rgba(255, 255, 255, 0.08));
  mix-blend-mode: screen;
}

.pp-page.pp-logged #sampDash .pp-char__headline .pp-honor-badge .pp-char__badge,
.pp-page.pp-logged #sampDash .pp-honor-badge .pp-char__badge,
.pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack--single .pp-honor-badge .pp-char__badge {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  max-width: 30px;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.54));
}

.pp-page.pp-logged #sampDash .pp-char__headline .pp-honor-badge__label,
.pp-page.pp-logged #sampDash .pp-honor-badge__label {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 34px;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #F8FBFF;
  font-size: 0.62rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.54);
}

.pp-page.pp-logged #sampDash .pp-honor-badge--violet { --badge-a: #B606D6; --badge-b: #F0ABFC; }
.pp-page.pp-logged #sampDash .pp-honor-badge--red { --badge-a: #FF3B47; --badge-b: #FFC4C8; }
.pp-page.pp-logged #sampDash .pp-honor-badge--blue { --badge-a: #4DA3FF; --badge-b: #C7E3FF; }
.pp-page.pp-logged #sampDash .pp-honor-badge--green { --badge-a: #5BC976; --badge-b: #D0FBE0; }
.pp-page.pp-logged #sampDash .pp-honor-badge--gold { --badge-a: #FFD76A; --badge-b: #FFF4BA; }
.pp-page.pp-logged #sampDash .pp-honor-badge--silver { --badge-a: #D8E2EF; --badge-b: #FFFFFF; }
.pp-page.pp-logged #sampDash .pp-honor-badge--bronze { --badge-a: #D99A5B; --badge-b: #FFE0B8; }
.pp-page.pp-logged #sampDash .pp-honor-badge--cyan { --badge-a: #56F0FF; --badge-b: #D5FBFF; }
.pp-page.pp-logged #sampDash .pp-honor-badge--teal { --badge-a: #2DD4BF; --badge-b: #D6FFFA; }
.pp-page.pp-logged #sampDash .pp-honor-badge--orange { --badge-a: #FF9E45; --badge-b: #FFE2BE; }
.pp-page.pp-logged #sampDash .pp-honor-badge--pink { --badge-a: #FF5DA8; --badge-b: #FFD0E6; }
.pp-page.pp-logged #sampDash .pp-honor-badge--slate { --badge-a: #AEBBCC; --badge-b: #F8FBFF; }

.pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack__more {
  display: inline-grid;
  place-items: center;
  width: auto;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--c-city) 44%, rgba(255, 255, 255, 0.14));
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 42%),
    rgba(5, 10, 19, 0.86);
  color: #F8FBFF;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: 0 0 18px -12px var(--c-city-glow);
}

@media (max-width: 620px) {
  .pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack,
  .pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack--single {
    max-width: 100%;
    gap: 6px;
  }

  .pp-page.pp-logged #sampDash .pp-char__headline .pp-honor-badge,
  .pp-page.pp-logged #sampDash .pp-honor-badge,
  .pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack--single .pp-honor-badge {
    grid-template-columns: 28px;
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 3px;
    border-radius: 9px;
  }

  .pp-page.pp-logged #sampDash .pp-char__headline .pp-honor-badge .pp-char__badge,
  .pp-page.pp-logged #sampDash .pp-honor-badge .pp-char__badge,
  .pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack--single .pp-honor-badge .pp-char__badge {
    width: 28px;
    height: 28px;
    max-width: 28px;
  }

  .pp-page.pp-logged #sampDash .pp-char__headline .pp-honor-badge__label,
  .pp-page.pp-logged #sampDash .pp-honor-badge__label {
    display: none;
  }

  .pp-page.pp-logged #sampDash .pp-char__headline .pp-badge-stack__more {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 9px;
    font-size: 0.68rem;
  }
}

/* Homepage server cards - final outer chassis override */
.node {
  isolation: isolate;
  transform: translateZ(0);
}

.node::after {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--node-accent) 8%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(15, 24, 40, 0.94), rgba(5, 9, 17, 0.9));
  border-color: color-mix(in srgb, var(--node-accent) 26%, rgba(126, 146, 168, 0.2));
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 0 0 1px rgba(255, 255, 255, 0.018);
}

.node__head {
  min-height: 48px;
  padding: 12px 18px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--node-accent) 11%, transparent), transparent 58%),
    rgba(3, 6, 12, 0.56);
  border-bottom-color: color-mix(in srgb, var(--node-accent) 26%, rgba(126, 146, 168, 0.16));
}

.node__head::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 34px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--node-accent), transparent 64%);
  opacity: 0.5;
}

.node__type {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #B8C5D6;
  font-weight: 800;
}

.node__type::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--node-accent);
  box-shadow: 0 0 14px var(--node-glow);
}

.node__live {
  min-height: 26px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--node-accent) 36%, rgba(126, 146, 168, 0.16));
  border-radius: 999px;
  background: rgba(3, 6, 12, 0.42);
}

.node__body {
  gap: 16px;
  padding-top: clamp(22px, 3vw, 34px);
}

.node__name {
  position: relative;
  display: inline-grid;
  width: fit-content;
  max-width: 100%;
  padding-bottom: 12px;
  color: #F8FBFF;
  text-shadow: 0 0 22px rgba(255, 255, 255, 0.08);
}

.node__name::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(100%, 210px);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--node-accent), transparent);
  box-shadow: 0 0 16px -7px var(--node-glow);
}

.node__name span {
  display: inline-block;
  margin-left: 8px;
}

.node__pitch {
  max-width: 52ch;
  color: #AEBBCC;
  line-height: 1.65;
}

.node .ipline {
  position: relative;
  border-style: solid;
  border-color: color-mix(in srgb, var(--node-accent) 22%, rgba(126, 146, 168, 0.18));
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--node-accent) 9%, transparent), transparent 58%),
    rgba(3, 6, 12, 0.54);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.node .ipline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: var(--node-accent);
  opacity: 0.72;
}

.node .ipline__label {
  color: #8FA0B6;
  font-weight: 800;
}

.node .ipline__value {
  border-bottom-color: color-mix(in srgb, var(--node-accent) 72%, #fff);
  color: #F8FBFF;
}

.node .features {
  gap: 8px;
  padding: 2px 0;
}

.node .features li {
  align-items: center;
  min-height: 31px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--node-accent) 12%, rgba(126, 146, 168, 0.13));
  border-radius: 7px;
  background: rgba(3, 6, 12, 0.26);
  color: #AEBBCC;
}

.node .features__tick {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  flex: none;
  border-radius: 5px;
  background: color-mix(in srgb, var(--node-accent) 13%, transparent);
  line-height: 1;
}

.node__ctas {
  gap: 10px;
  padding-top: 8px;
}

.node__ctas .cta,
.node__ctas .copybtn {
  border-radius: 8px;
}

.node__emblem {
  opacity: 0.08;
  filter: drop-shadow(0 0 20px var(--node-glow));
}

@media (max-width: 600px) {
  .node__head {
    min-height: 44px;
    padding: 10px 13px;
  }

  .node__head::after {
    left: 13px;
    right: 24px;
  }

  .node__body {
    gap: 14px;
    padding-inline: 18px;
  }

  .node__name {
    font-size: 1.46rem;
  }

  .node__name span {
    margin-left: 5px;
  }

  .node .ipline,
  .node .features li {
    border-radius: 7px;
  }
}

/* ---------- CS account chooser (multiple players behind one IP / name) ---------- */
.pp-cs-chooser { margin-top: 16px; }
.pp-cs-chooser__text { margin-bottom: 10px; }
.pp-cs-chooser__list { display: flex; flex-direction: column; gap: 8px; }
.pp-cs-cand {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 11px 14px;
  border: 1px solid rgba(126, 146, 168, 0.18);
  border-radius: 8px;
  background: rgba(3, 6, 12, 0.34);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.pp-cs-cand:hover,
.pp-cs-cand:focus-visible {
  border-color: color-mix(in srgb, var(--node-accent) 55%, transparent);
  background: var(--c-panel-2);
}
.pp-cs-cand__name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--c-hot);
}
.pp-cs-cand__meta {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--c-gray);
}

/* SWC 2026-07-01 connect-panel professional polish: subtle depth + faint accent glow */
.term__art{ box-shadow: 0 12px 34px rgba(0,0,0,.50), 0 0 26px -8px var(--term-glow); background-image: radial-gradient(125% 120% at 50% 32%, color-mix(in srgb, var(--term-accent) 10%, transparent), rgba(3,6,12,0) 68%); transition: box-shadow .25s ease, transform .25s ease; }
.term__art:hover{ box-shadow: 0 16px 40px rgba(0,0,0,.55), 0 0 34px -6px var(--term-glow); }
/* SWC 2026-08-15 pakelima taikom PAVEIKSLUI, o ne .term__art.
   transform ant tevo sukuria dedanciuju konteksta, del to mix-blend-mode:screen
   nustoja naikinti juoda rastro fona ir uzvedus issilysdavo juoda deze. */
.term__art img{ transition: transform .25s ease; }
.term__art:hover img{ transform: translateY(-2px); }
.term__side{ box-shadow: 0 18px 46px rgba(0,0,0,.42); }

/* ===== Mobile app download CTA (rev3 2026-07-09) - height-matched to .comms__panel ===== */
.appdl__panel { position: relative; padding: clamp(30px, 4vw, 44px) clamp(24px, 5vw, 64px); text-align: center; }
.appdl__panel::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(11, 18, 32, 0.78);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--c-grid); clip-path: var(--clip-panel);
  pointer-events: none; transition: border-color 250ms ease;
}
.appdl__panel:hover::after { border-color: rgba(86, 230, 255, 0.5); }
.appdl__glyph {
  width: clamp(40px, 5vw, 50px); height: clamp(40px, 5vw, 50px); margin: 0 auto 12px;
  display: grid; place-items: center; color: #56E6FF;
  border: 1px solid var(--c-grid); border-radius: 13px; background: rgba(86, 230, 255, 0.06);
  box-shadow: inset 0 0 20px -12px rgba(86, 230, 255, 0.7);
}
.appdl__glyph svg { width: 52%; height: 52%; }
.appdl__eyebrow { display: inline-block; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .2em; color: #56E6FF; margin-bottom: 10px; }
.appdl__head { position: relative; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 4vw, 2.9rem); letter-spacing: .06em; color: var(--c-white); margin: 0 0 10px; text-transform: uppercase; }
.appdl__sub { position: relative; color: var(--c-body); margin: 0 auto 22px; max-width: 60ch; }
.appdl__ctas { position: relative; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; }
.appdl__meta { font-family: var(--font-mono); margin-top: 16px; font-size: .64rem; letter-spacing: .14em; color: var(--c-gray); }
.cta--app { --node-accent: #56E6FF; --node-glow: rgba(86, 230, 255, 0.5); border-color: #56E6FF; color: var(--c-void-2); background: linear-gradient(180deg, #7df0ff, #28c8ec); }
.cta--app:hover, .cta--app:focus-visible { box-shadow: 0 0 22px -4px var(--node-glow); filter: brightness(1.06); background: linear-gradient(180deg, #8ff3ff, #3ad0f2); }
.cta--app .cta__dlicon { width: 20px; height: 20px; }
.cta--ghost { --node-accent: var(--c-brand-dim); --node-glow: rgba(214, 234, 255, 0.28); }

/* ============================================================
   SFG KAZINO - gyvas valdiklis SFG skydelyje (2026-07-27)
   Perkelta is pagrindinio puslapio, kur buvo inline stiliai su
   savo palete. Cia remiasi .pp-card / .pp-stat, todel apraso tik
   tai, ko tos klases neturi.
   ============================================================ */

/* Vienintelis auksas svetaineje - toks pat kaip SWGC pinigineje ir /unboxing/. */
:root{ --c-gold: #FFD24A; }

.pp-kaz__title{ display: flex; align-items: center; gap: 10px; }
.pp-kaz__live{
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.62rem; font-weight: 400; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--c-gray);
}
.pp-kaz__pulse{
  width: 6px; height: 6px; border-radius: 50%; background: var(--c-good);
  box-shadow: 0 0 8px var(--c-good); animation: kazPulse 1.8s ease-in-out infinite;
}
@keyframes kazPulse{ 0%, 100%{ opacity: 1 } 50%{ opacity: 0.3 } }

/* sumos atsinaujina kas 20 s - fiksuoto plocio skaitmenys, kad neblaskytu */
.pp-kaz__num{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.pp-kaz__num--gold{ color: var(--c-gold); }
.pp-kaz__num--green{ color: var(--c-good); }

.pp-kaz__winners{ margin-top: 16px; }
.pp-kaz__label{
  display: block; margin-bottom: 9px;
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-gray);
}
.pp-kaz__list{ list-style: none; margin: 0; padding: 0; counter-reset: kaz; }
.pp-kaz__list li{
  counter-increment: kaz;
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  padding: 6px 0; font-size: 0.82rem; color: var(--c-body);
  border-top: 1px solid var(--c-grid-soft);
}
.pp-kaz__list li:first-child{ border-top: 0; }
.pp-kaz__list li::before{
  content: counter(kaz) ".";
  min-width: 1.5em; font-family: var(--font-mono); font-size: 0.68rem; color: var(--c-gray-dim);
}
.pp-kaz__who{ color: var(--c-white); font-weight: 500; }
.pp-kaz__sum{ font-family: var(--font-mono); color: var(--c-good); font-variant-numeric: tabular-nums; }
.pp-kaz__game{ margin-left: auto; font-family: var(--font-mono); font-size: 0.68rem; color: var(--c-gray); }
.pp-kaz__empty{ color: var(--c-gray); }
.pp-kaz__empty::before{ content: "" !important; min-width: 0 !important; }

@media (max-width: 560px){ .pp-kaz__game{ margin-left: 0; width: 100%; } }
@media (prefers-reduced-motion: reduce){ .pp-kaz__pulse{ animation: none } }

/* ============================================================
   Logotipas prie visų „SWEDEN CODES" užrašų (2026-07-29)
   Anksčiau </> ženklas buvo tik pagrindinio puslapio viršuje.
   ============================================================ */

/* poraštėje ženklas ir užrašas laikomi vienoje eilutėje: tėvinis
   .footer__brand mobiliajame vaizde tampa flex-direction:column, todėl be
   šio apvalkalo ženklas atsistotų virš teksto. */
.footer__brandline{
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.footer__brandline .brand__mark{
  width: 22px; height: 22px; flex: none;
  border: 1px solid var(--c-grid);
  border-radius: 6px;
}


/* ==========================================================================
   `hidden` privalo iš tikrųjų slėpti.            (pridėta 2026-08-02)
   Naršyklės `[hidden]{display:none}` yra UA taisyklė, todėl BET KOKS mūsų
   `display:flex/grid` - ar net inline `style="display:flex"` - ją perrašo ir
   elementas lieka matomas, nors atributas nustatytas. Taip kazino stalą
   nuolat dengė permatomas `.kz-verdict` sluoksnis su blur, o prisijungimo
   puslapyje visada matėsi el. pašto keitimo laukelis.
   Patikrinta: nė vienas elementas su `hidden` nėra rodomas per inline
   style.display, tad `!important` čia nieko nesulaužo.
   ========================================================================== */
[hidden] { display: none !important; }


/* ---------------------------------------------------------------
   GRPLS (English SA-MP server, samp.swedencode.com:8000).
   Token kept green: GRPLS inherited the slot from ProjectX, retired 2026-08-21.
   Third server node. Reuses the existing node-accent mechanism -
   no new components, only a new accent triple, so it inherits every
   .node / .cta / .term rule already in this file.
--------------------------------------------------------------- */
:root{
  --c-grpls:       #35E0A1;                      /* GRPLS green */
  --c-grpls-2:     #4DA3FF;                      /* secondary sweep */
  --c-grpls-glow:  rgba(53, 224, 161, 0.34);
}
/* the terminal chrome (ip line, copy buttons, tab) reads --term-accent from #term */
.hero.lean-px .cta--cs,
.hero.lean-px .cta--samp,



/* ==========================================================================
   .pp-choice__card - svytejimo atstatymas               (pridėta 2026-08-15)
   clip-path kerpa VISKA, kas piešiama už kontūro - įskaitant elemento paties
   box-shadow. Kortelė turėjo ir clip-path, ir :hover švytėjimą, tad švytėjimas
   nupiešdavo LYGIAI 0 pikselių (izoliuotas testas: 0/33600 pries, 20218/33280 po).
   Sprendimas - tas pats, kuri autorius jau naudoja .node atveju (l. 1748):
   notch'as keliauja i ::after su z-index:-1, o tevas lieka nekirptas ir gali
   piesti sesėlį. Papildomai svytejimui duodam tikra spinduli: -10px spread
   pries 24px blur siekė vos ~2px uz deziutes, tad net nekirptas buvo nematomas.
   ========================================================================== */
.pp-choice__card{
  background: transparent;
  border: 0;
  clip-path: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.pp-choice__card::after{
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(11, 18, 32, 0.78);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--swc-line, var(--c-grid));
  clip-path: var(--clip-panel);
  pointer-events: none;
  transition: border-color var(--dur-fast);
}
.pp-choice__card:hover::after,
.pp-choice__card.is-active::after{ border-color: var(--node-accent); }
.pp-choice__card:hover,
.pp-choice__card.is-active{
  box-shadow:
    0 20px 46px rgba(0, 0, 0, 0.28),
    0 0 34px -2px var(--node-glow);
}


/* ==========================================================================
   Prisijungimo vartai (panele / dezes)                     (pridėta 2026-08-15)
   Anksciau tai buvo JS suklijuota inline stiliu eilute: 18px apvalinimas ten,
   kur visur naudojamas clip-path, emoji vietoj stroke ikonos, penki ne is
   paletės hex'ai ir AUKSINIS mygtukas - o auksas svetaineje reiskia valiuta.
   Dabar tai .pp-card, kaip kazino vartai, tad perdanga atrodo kaip ta pati
   svetaine, o ne kaip pigesnis antstatas.
   ========================================================================== */
.pnl-gate {
  position: fixed; inset: 0;
  z-index: 2200;                    /* virs CRT grudetumo sluoksnio (2000) */
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  /* buvo .88 - produkto uz vartu praktiskai nesimate. Langas, o ne siena. */
  background: color-mix(in srgb, var(--c-void) 74%, transparent);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.pnl-gate__box {
  max-width: 460px; width: 100%;
  text-align: center;
  margin-bottom: 0;
}
.pnl-gate__icon {
  width: 34px; height: 34px;
  display: block; margin: 0 auto 14px;
  color: var(--node-accent);
}
.pnl-gate .cta { margin-top: 4px; }
.pnl-gate:focus { outline: none; }   /* dialogas fokusuojamas programiskai - ziedas nereikalingas */
.pnl-gate__links {
  margin-top: 18px;
  display: flex; flex-direction: column; gap: 9px;
}
.pnl-gate__link {
  color: var(--c-brand);
  font-family: var(--font-body);
  font-size: 0.82rem;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-snap);
}
.pnl-gate__link:hover { color: var(--c-hot); text-decoration: underline; }
.pnl-gate__link--muted { color: var(--c-gray); font-size: 0.74rem; }
.pnl-gate__link--muted:hover { color: var(--c-body); }

/* SWC 2026-08-17 poliravimas: antrastes lauzomos tolygiai, be vienisu zodziu */
h1, h2 { text-wrap: balance; }
.hero__sub { text-wrap: pretty; }

/* SWC 2026-08-19: mazgo juostos buvo per silpnai matomos. Kauke nukirsdavo
   virsutine piesinio dali (fade iki 45%), o opacity .85 dar papildomai nublukindavo.
   Fade sutrumpintas iki 28%, nepermatomumas grazintas i 1. */
.node__motif--hands img,
.node__motif--skyline img {
  opacity: 1;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 28%);
}

/* SWC 2026-08-20: atidarius puslapi trumpam blyksteledavo STATINE nuotrauka,
   nes bgvid.js yra "defer" - CSS spėja nupiesti background.webp, ir tik paskui
   skriptas ji pakeicia video. Todel plaCiame ekrane (ten, kur bgvid.js paleidzia
   video) is karto piesiam VIDEO PLAKATA - pirma to paties klipo kadra.
   Telefone (<900px) video nepaleidziamas, tad ten lieka nuotrauka. */
@media (min-width: 900px) {
  body::before { background-image: url('../assets/hero-poster.webp?v=3') !important; }
}


/* ===== GRPLS panel cards (2026-08-21) =========================================
   GRPLS took over the second SA-MP slot from the retired ProjectX, and reuses
   its green accent tokens. Added: an achievement gallery with global rarity,
   which no other server on the network can show. */
.pp-choice__card--grpls { --node-accent: var(--c-grpls); --node-glow: var(--c-grpls-glow); }
.pp-flow--samp.is-grpls { --node-accent: var(--c-grpls); --node-glow: var(--c-grpls-glow); }

.pp-board__v     { text-align: right; color: var(--node-accent, #35E0A1); }
.pp-board__empty { opacity: 0.45; }

.pp-achfilter    { display: flex; gap: 6px; margin: 0 0 14px; flex-wrap: wrap; }
.pp-achfilter__b {
  background: transparent; color: inherit; opacity: 0.5; cursor: pointer;
  border: 1px solid currentColor; border-radius: 999px;
  padding: 4px 12px; font-size: 0.68rem; letter-spacing: 0.08em;
  transition: opacity 0.16s ease, background 0.16s ease;
}
.pp-achfilter__b:hover  { opacity: 0.85; }
.pp-achfilter__b.is-on  { opacity: 1; color: var(--node-accent, #35E0A1); background: rgba(53, 224, 161, 0.08); }

.pp-ach {
  display: grid; gap: 10px; max-height: 520px; overflow-y: auto;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.pp-achitem {
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 10px;
  padding: 11px 13px; background: rgba(255, 255, 255, 0.02);
}
.pp-achitem.is-done { border-color: var(--node-accent, #35E0A1); background: rgba(53, 224, 161, 0.06); }
.pp-achitem__head   { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pp-achitem__name   { font-weight: 600; font-size: 0.86rem; }
.pp-achitem__rar    { font-size: 0.62rem; opacity: 0.55; white-space: nowrap; }
.pp-achitem__desc   { font-size: 0.74rem; opacity: 0.68; margin: 4px 0 8px; }
.pp-achitem__bar    { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.pp-achitem__bar> i { display: block; height: 100%; background: var(--node-accent, #35E0A1); transition: width 0.3s ease; }
.pp-achitem__prog   { font-size: 0.64rem; opacity: 0.6; margin-top: 5px; }
.pp-achitem.is-done .pp-achitem__prog { opacity: 0.9; color: var(--node-accent, #35E0A1); }


/* GRPLS took the retired ProjectX slot on the homepage (2026-08-21) and reuses
   its green accent tokens; --c-grpls is kept as the token name to avoid a sweep
   through every rule that references it. */
.node--grpls { --node-accent: var(--c-grpls); --node-accent-2: var(--c-grpls-2); --node-glow: var(--c-grpls-glow); }
.cta--grpls  { --node-accent: var(--c-grpls); --node-glow: var(--c-grpls-glow); }
.term__panel--grpls { --node-accent: var(--c-grpls); --node-glow: var(--c-grpls-glow); }
.term--grpls { --term-accent: var(--c-grpls); --term-glow: var(--c-grpls-glow); }
.hero.lean-grpls .hero__l2 { color: var(--c-grpls); text-shadow: 0 0 28px var(--c-grpls-glow); }
.hero.lean-cs .cta--grpls,
.hero.lean-samp .cta--grpls { opacity: 0.6; }
.node--grpls .node__emblem { left: 20px; }

/* ===== Windows launcher download (2026-08-21) =====
   Reuses the .appdl component the mobile app and casino already use. Only the
   accent changes: .appdl hardcodes cyan #56E6FF, and the launcher is shared
   chrome - it belongs to no node - so it takes ice white instead. Nothing here
   redefines layout; if .appdl moves, this moves with it. */
.appdl--launcher .appdl__glyph {
  color: var(--c-brand);
  background: rgba(233, 242, 250, 0.06);
  box-shadow: inset 0 0 20px -12px var(--c-brand-glow);
}
.appdl--launcher .appdl__eyebrow { color: var(--c-brand); }
.appdl--launcher .appdl__panel:hover::after { border-color: rgba(233, 242, 250, 0.45); }

/* Theme through the token pair, never by restyling the button. node-pro.css
   loads after this file and owns `main .cta` at (0,0,1,1), so a plain
   .cta--launcher background is simply discarded - which is exactly what
   happened on the first attempt. The descendant selector clears that
   specificity and then only has to hand the engine an accent. */
.appdl--launcher .cta--launcher {
  --btn-accent: var(--c-brand);
  --btn-glow: var(--c-brand-glow);
}
.cta--launcher .cta__dlicon { width: 20px; height: 20px; }

/* The spec strip is what makes this read as a listing rather than a banner:
   three facts, hairline-separated, in the figure face. Version and size are
   filled from launcher/latest.json at runtime so they cannot go stale. */
.appdl__specs {
  position: relative;
  list-style: none; margin: 0 auto 22px; padding: 0;
  display: flex; justify-content: center; flex-wrap: wrap;
  border: 1px solid var(--c-grid);
  clip-path: var(--clip-panel);
  background: rgba(3, 6, 12, 0.5);
  width: fit-content;
}
.appdl__specs li {
  display: grid; gap: 3px; justify-items: center;
  padding: 11px clamp(16px, 3vw, 30px);
  border-left: 1px solid var(--c-grid);
}
.appdl__specs li:first-child { border-left: 0; }
.appdl__specs b {
  font-weight: 700; font-size: .95rem; letter-spacing: .04em;
  color: var(--c-white);
}
.appdl__specs span {
  font-size: .58rem; letter-spacing: .18em; color: var(--c-gray);
}
@media (max-width: 560px) {
  .appdl__specs li { padding: 9px 14px; }
}


/* .pp-attr ir .pp-stat nustato display:flex. Autoriaus display NUGALI narsykles
   UA taisykle [hidden]{display:none}, tad be sito el.hidden=true ant eilutes
   nieko nedarytu (ta pati klaida, kuri kadaise "sulieje" kazino). .pp-card
   display nenustato, todel korteliu slepimas veike ir be sios taisykles.
   2026-09-01. */
.pp-attr[hidden], .pp-stat[hidden] { display: none !important; }

/* ==========================================================================
   MU Online - SwedenCode MU (2026-09-04)
   Sava akcento spalva: siltas gintaras. Sazoningai ATSKIRTA nuo valiutos
   aukso #FFD24A (unboxing kainos), kad serveris ir kaina nesusipainiotu;
   atspalvis 33 laipsniai vs aukso 45. Kiti serveriai: raudona #E8414D,
   melyna #4DA3FF, zalia #35E0A1 - gintaras nesikerta ne su vienu.
   BE .node--mu / .cta--mu kortele buvo piesiama be jokio akcento.
   ========================================================================== */
:root {
  --c-mu:      #F2A93B;
  --c-mu-2:    #E8414D;
  --c-mu-glow: rgba(242, 169, 59, 0.34);
}
.node--mu { --node-accent: var(--c-mu); --node-accent-2: var(--c-mu-2); --node-glow: var(--c-mu-glow); }
.cta--mu  { --node-accent: var(--c-mu); --node-glow: var(--c-mu-glow); }

/* MU korta skydelyje - tai nuoroda i /mu, ne serverio pasirinkimas. */
.pp-choice__card--mu { --node-accent: var(--c-mu); --node-glow: var(--c-mu-glow); }
.pp-choice__card--mu { text-decoration: none; }

/* MU terminalo akcentas. Be sios eilutes #deploy MU kortele paveldedavo
   numatytaji CS raudona - tabas ir zingsniai atrode kaip Zombie Plague.
   Kiti serveriai turi tokia pat viena eilute (.term--samp, .term--grpls). */
.term--mu { --term-accent: var(--c-mu); --term-glow: var(--c-mu-glow); }

/* MU serverio parametrai po monitoriumi. NENAUDOJAM .players__stats: ji yra
   monitoriaus grid vaikas (grid-area: stats), o atskirai stovinti issidesto
   nenuspejamai - kortelėje visos keturios sustodavo i viena stulpeli.
   Cia aiskus 2x2 tinklelis, o siaurame ekrane - vienas stulpelis. */
.mu-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 14px 0 4px;
}
.mu-stats .players__stat {
  justify-content: space-between;
  padding: 9px 11px;
  border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--node-accent) 22%, rgba(247,250,255,0.08));
  background: rgba(247,250,255,0.04);
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.mu-stats .players__stat b { color: var(--node-accent); }
@media (max-width: 420px) { .mu-stats { grid-template-columns: 1fr; } }

/* Srauto zymu spalvos. .fl__tag--grpls NEBUVO nuo pat GRPLS pridejimo -
   jo zyma naudojo numatytaja spalva vietoj zalios. 2026-09-04. */
.fl__tag--grpls { color: var(--c-grpls); }
.fl__tag--mu { color: var(--c-mu); }