/* ============================================================
   Spēļotava.lv — jaunā sākumlapas vizuālā sistēma (home.css)
   Tikai index.html. Profils un spēles izmanto savus stilus.
   ============================================================ */

:root {
  color-scheme: dark;
  --bg: #05080f;
  --bg-2: #070c16;
  --panel: rgba(148, 176, 215, 0.045);
  --panel-solid: #0b1220;
  --panel-2: rgba(148, 176, 215, 0.08);
  --line: rgba(158, 182, 214, 0.12);
  --line-strong: rgba(158, 182, 214, 0.24);
  --text: #eef3fa;
  --muted: #93a3ba;
  --muted-2: #64748e;
  --lime: #c8f542;
  --lime-deep: #9ed320;
  --violet: #8b7bff;
  --blue: #4d94ff;
  --cyan: #38d9d0;
  --amber: #ffb84d;
  --orange: #ff8f4d;
  --red: #ff6474;
  --pink: #ff6da9;
  --green: #3ddc84;
  --sky: #6fc3ff;
  --teal: #2fd4b2;
  --indigo: #7a8cff;
  --magenta: #e766d4;
  --radius: 18px;
  --radius-sm: 12px;
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --shadow-lift: 0 18px 44px rgba(2, 6, 14, 0.55);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.home {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: linear-gradient(180deg, #070b16 0%, #05080f 42%, #04060d 100%);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ============ Vienota atmosfēra visai lapai ============
   Iepriekš fons bija plakani gandrīz melns un tikai atsevišķām sekcijām
   bija lokāli "glow" plankumi, kas radīja salauztu, nevienmērīgu sajūtu
   (dažas vietas spīd, citas mirušas). Šis fiksētais slānis dod vienmērīgu,
   dzīvu krāsu miglu visai lapai, lai nekur nav "tukšas melnas" zonas. */
body.home::before {
  content: "";
  position: fixed;
  inset: -10vh -10vw;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(46rem 30rem at 12% 4%, rgba(139, 123, 255, 0.16), transparent 60%),
    radial-gradient(42rem 30rem at 92% 8%, rgba(200, 245, 66, 0.09), transparent 58%),
    radial-gradient(40rem 30rem at 78% 52%, rgba(56, 217, 208, 0.08), transparent 58%),
    radial-gradient(44rem 32rem at 6% 62%, rgba(77, 148, 255, 0.10), transparent 60%),
    radial-gradient(40rem 30rem at 96% 96%, rgba(255, 109, 169, 0.07), transparent 58%);
  animation: atmosDrift 28s ease-in-out infinite alternate;
  will-change: transform;
}

/* Smalka tīkla tekstūra, lai fons nav pilnīgi gluds tukšums */
body.home::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(158, 182, 214, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(158, 182, 214, 0.028) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(80rem 60rem at 50% 0%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(80rem 60rem at 50% 0%, #000 30%, transparent 90%);
}

@keyframes atmosDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(0, -2.2%, 0) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  body.home::before { animation: none; }
}

::selection { background: rgba(200, 245, 66, 0.28); color: #fff; }

body.home::-webkit-scrollbar { width: 10px; }
body.home::-webkit-scrollbar-track { background: var(--bg); }
body.home::-webkit-scrollbar-thumb {
  background: #1c2942;
  border-radius: 99px;
  border: 2px solid var(--bg);
}
body.home::-webkit-scrollbar-thumb:hover { background: #2a3b5e; }

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img { max-width: 100%; }
.hidden { display: none !important; }

body.home main { overflow-x: clip; }

:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ============ Atklāšanās animācijas (scroll reveal) ============ */

html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.65, 0.25, 1);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}

html.js .reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}

/* ==================== Augšējā josla ==================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 90;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.topbar.scrolled {
  background: rgba(5, 8, 15, 0.86);
  border-color: var(--line);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 34px rgba(2, 5, 12, 0.5);
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: 1240px;
  margin: 0 auto;
  height: 68px;
  padding: 0 24px;
}

.logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.6px;
  white-space: nowrap;
}

.logo b { color: var(--lime); }

.logo-mark {
  display: grid;
  grid-template-columns: repeat(2, 8px);
  gap: 3px;
  transform: rotate(-8deg);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.logo:hover .logo-mark { transform: rotate(8deg) scale(1.08); }

.logo-mark i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--lime);
}

.logo-mark i:nth-child(2),
.logo-mark i:nth-child(3) { background: #fff; }

.top-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.top-nav a {
  position: relative;
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.2s ease, background 0.2s ease;
}

.top-nav a:hover { color: var(--text); background: var(--panel-2); }

.top-nav a.active { color: var(--text); }

.top-nav a.active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--lime);
}

.topbar-search {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
  max-width: 300px;
  margin-left: auto;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
  color: var(--muted-2);
  cursor: text;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.topbar-search:focus-within {
  border-color: rgba(200, 245, 66, 0.5);
  box-shadow: 0 0 0 3px rgba(200, 245, 66, 0.08);
}

.topbar-search svg {
  width: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.topbar-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
}

.topbar-search input::placeholder { color: var(--muted-2); }

.topbar-search kbd {
  flex: none;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(5, 9, 17, 0.7);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--muted-2);
}

.top-actions {
  display: flex;
  align-items: center;
  flex: none;
  gap: 14px;
}

.clock {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  color: var(--muted);
}

.profile-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--panel);
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.profile-chip:hover {
  border-color: var(--line-strong);
  background: var(--panel-2);
  transform: translateY(-1px);
}

.profile-chip .avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lime), #7ec42a);
  color: #10200a;
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
}

.profile-chip .avatar .avatar-art,
.profile-chip .avatar .goblin-art {
  width: 100%;
  height: 100%;
  margin: 0;
}

.profile-chip strong {
  display: block;
  font-size: 12.5px;
  line-height: 1.2;
}

.profile-chip small {
  display: block;
  font-size: 10.5px;
  color: var(--muted-2);
  line-height: 1.2;
}

/* ==================== Varonis (hero) ==================== */

.hero {
  position: relative;
  overflow: clip;
  padding: 74px 24px 40px;
}

.motion-toggle {
  position: absolute;
  top: 18px;
  right: max(18px, calc((100% - 1240px) / 2 + 24px));
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(7, 12, 22, 0.72);
  color: var(--muted);
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.motion-toggle:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.motion-toggle-icon {
  display: grid;
  place-items: center;
  width: 14px;
  font-size: 11px;
  font-weight: 800;
}

.motion-toggle-label {
  font-size: 11px;
  font-weight: 700;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(38rem 24rem at 18% -6%, rgba(139, 123, 255, 0.16), transparent 70%),
    radial-gradient(44rem 26rem at 84% 4%, rgba(200, 245, 66, 0.1), transparent 70%),
    radial-gradient(30rem 22rem at 55% 108%, rgba(77, 148, 255, 0.12), transparent 70%);
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(158, 182, 214, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(158, 182, 214, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(60rem 34rem at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(60rem 34rem at 50% 0%, #000 20%, transparent 78%);
}

.hero-float {
  position: absolute;
  inset: 10px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-float i {
  position: absolute;
  display: grid;
  place-items: center;
  width: var(--sz, 42px);
  height: var(--sz, 42px);
  border: 1px solid rgba(158, 182, 214, 0.11);
  border-radius: 6px;
  background: rgba(7, 13, 24, 0.28);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  color: rgba(158, 182, 214, 0.26);
  font-size: calc(var(--sz, 42px) * 0.56);
  line-height: 1;
  opacity: 0.74;
  box-shadow: inset 0 0 18px rgba(158, 182, 214, 0.025);
  backdrop-filter: blur(2px);
}

/* Statisks izklājums bez JS / reduced-motion gadījumam. Kad JS pārņem
   fiziku, tas pats uzstāda left/top uz 0 un kustina caur transform. */
.hero-float i:nth-child(1) { left: 6%; top: 16%; }
.hero-float i:nth-child(2) { left: 14%; top: 68%; }
.hero-float i:nth-child(3) { left: 44%; top: 10%; }
.hero-float i:nth-child(4) { left: 60%; top: 78%; }
.hero-float i:nth-child(5) { left: 88%; top: 60%; }
.hero-float i:nth-child(6) { left: 93%; top: 22%; }
.hero-float i:nth-child(7) { left: 30%; top: 86%; }
.hero-float i:nth-child(8) { left: 74%; top: 6%; }
.hero-float i:nth-child(9) { left: 50%; top: 42%; }

/* JS pārņem kustību (DVD ekrānsaudzētāja fizika) - CSS floaty ir tikai
   rezerves stāvoklis, kamēr JS vēl nav paspēris pozicionēt ikonas, un
   vienīgā kustība tiem, kam prefers-reduced-motion: reduce. */
@media (prefers-reduced-motion: no-preference) {
  .hero-float i { animation: floaty 7s ease-in-out infinite; animation-delay: var(--fd, 0s); }
  .hero-float.bounce-live i {
    animation: none;
    will-change: transform;
    transition: color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  }
}

.hero-float.bounce-live i {
  animation: none;
  will-change: transform;
  transition: color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.hero-float i.lit { color: rgba(200, 245, 66, 0.55); }
.hero-float i.vio { color: rgba(139, 123, 255, 0.55); }
.hero-float i.blu { color: rgba(111, 195, 255, 0.55); }

.hero-float i.corner-hit {
  animation: cornerPulse 0.7s ease-out !important;
}

.hero-float i.wall-hit {
  border-color: currentColor;
  box-shadow: inset 0 0 18px rgba(158, 182, 214, 0.08), 0 0 12px currentColor;
}

@keyframes cornerPulse {
  0% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
  30% { filter: brightness(2.4) drop-shadow(0 0 16px currentColor); }
  100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
}

@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-16px) rotate(5deg); }
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.85fr);
  align-items: center;
  gap: 56px;
  max-width: 1240px;
  margin: 0 auto;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border: 1px solid rgba(200, 245, 66, 0.25);
  border-radius: 99px;
  background: rgba(200, 245, 66, 0.07);
  font-size: 12.5px;
  font-weight: 600;
  color: #dff5a8;
}

.hero-badge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 0 rgba(200, 245, 66, 0.5);
  animation: ping 2.2s ease-out infinite;
}

@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(200, 245, 66, 0.45); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(200, 245, 66, 0); }
}

.hero h1 {
  margin: 20px 0 16px;
  font-family: var(--font-display);
  font-size: clamp(38px, 5.6vw, 64px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -2px;
}

.hero h1 .grad {
  background: linear-gradient(100deg, var(--lime) 10%, #7ef0c3 38%, var(--violet) 72%, var(--lime) 95%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}

@keyframes shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 220% 50%; }
}

.hero-lead {
  max-width: 520px;
  margin: 0 0 26px;
  font-size: 16.5px;
  color: var(--muted);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: 13px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease,
    background 0.22s ease, border-color 0.22s ease;
}

.btn-primary {
  background: linear-gradient(120deg, var(--lime), #a5e32c);
  color: #131f05;
  box-shadow: 0 10px 28px rgba(200, 245, 66, 0.22);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(200, 245, 66, 0.3);
}

.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  border-color: var(--line-strong);
  background: var(--panel);
  color: var(--text);
}

.btn-ghost:hover {
  transform: translateY(-2px);
  border-color: rgba(200, 245, 66, 0.4);
  background: var(--panel-2);
}

.hero-stats {
  display: flex;
  gap: 38px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.hero-stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}

.hero-stats strong em {
  font-style: normal;
  color: var(--lime);
}

.hero-stats span {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--muted-2);
}

/* Izceltās spēles kartīte hero labajā pusē */

.hero-feature {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 184, 77, 0.1), rgba(11, 18, 32, 0.85) 46%);
  padding: 26px;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  animation: heroCardIn 0.9s cubic-bezier(0.2, 0.65, 0.25, 1) both 0.25s;
}

@keyframes heroCardIn {
  from { opacity: 0; transform: translateY(34px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.hero-feature::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 0deg, transparent 72%, rgba(255, 184, 77, 0.16) 86%, transparent 100%);
  animation: slowspin 11s linear infinite;
}

@keyframes slowspin {
  to { transform: rotate(360deg); }
}

.hero-feature > * { position: relative; }

.hf-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.hf-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--amber);
}

.hf-label i {
  font-style: normal;
  animation: floaty 3.4s ease-in-out infinite;
  display: inline-block;
}

.hf-new {
  padding: 4px 10px;
  border-radius: 7px;
  background: var(--lime);
  color: #16230a;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.hf-emblem {
  display: grid;
  place-items: center;
  position: relative;
  width: 108px;
  height: 108px;
  margin: 8px auto 18px;
}

.hf-emblem .ring {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(255, 184, 77, 0.4);
  border-radius: 50%;
  animation: slowspin 16s linear infinite;
}

.hf-emblem .ring.r2 {
  inset: -16px;
  border-color: rgba(158, 182, 214, 0.16);
  animation-direction: reverse;
  animation-duration: 26s;
}

.hf-emblem .core {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 24px;
  background: linear-gradient(145deg, #2b2113, #171207);
  border: 1px solid rgba(255, 184, 77, 0.4);
  font-size: 34px;
  transform: rotate(-6deg);
}

.hf-emblem .q {
  position: absolute;
  right: -4px;
  top: -2px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  animation: floaty 3s ease-in-out infinite 0.6s;
}

.hero-feature h2 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.6px;
  text-align: center;
}

.hero-feature p {
  margin: 0 auto 20px;
  max-width: 300px;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
}

.hf-meta {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}

.hf-meta span {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: rgba(5, 9, 17, 0.55);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}

.hf-cta {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* ==================== Skrejošā rinda (ticker) ==================== */

.ticker {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(7, 12, 22, 0.75);
  padding: 12px 0;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ticker-track {
  display: flex;
  gap: 46px;
  width: max-content;
}

html.home-motion-on .ticker-track {
  animation: tick 42s linear infinite !important;
  animation-iteration-count: infinite !important;
}

.ticker-group {
  display: flex;
  flex: none;
  gap: 46px;
}

.ticker:hover .ticker-track { animation-play-state: paused; }

@keyframes tick {
  to { transform: translateX(calc(-50% - 23px)); }
}

.ticker-track span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

.ticker-track span b {
  color: var(--lime);
  font-weight: 800;
}

/* ==================== Sekcijas ==================== */

.section {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 72px 24px 8px;
  scroll-margin-top: 80px;
}

/* Vienota, simetriska sekcijas gaisma augšā (viens toņa akcents katrai
   sekcijai). Fonu tagad nes globālā atmosfēra (body.home::before), tāpēc
   šeit vairs nav asimetrisku "plankumu", kas agrāk izskatījās nejauši. */
.section::before {
  content: "";
  position: absolute;
  inset: 0 -160px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(40rem 20rem at 50% -6%, var(--section-tint, transparent), transparent 66%);
}

#speles       { --section-tint: rgba(200, 245, 66, 0.07); }
#turniri      { --section-tint: rgba(255, 184, 77, 0.07); }
#topi         { --section-tint: rgba(77, 148, 255, 0.08); }
#kolekcija    { --section-tint: rgba(139, 123, 255, 0.09); }
#laboratorija { --section-tint: rgba(56, 217, 208, 0.08); }
#jaunumi      { --section-tint: rgba(200, 245, 66, 0.06); }

.section-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  background: var(--panel);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}

.section-link span { color: var(--lime); transition: transform 0.22s ease; }

.section-link:hover {
  border-color: rgba(200, 245, 66, 0.45);
  background: var(--panel-2);
  transform: translateY(-1px);
}

.section-link:hover span { transform: translateX(3px); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--lime);
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--lime);
}

.section-head h2 {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 800;
  letter-spacing: -1.2px;
}

.section-note {
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--panel);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.section-note b { color: var(--lime); }

/* ==================== Spēļu katalogs ==================== */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}

.filters button {
  padding: 9px 17px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--panel);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s ease;
}

.filters button:hover {
  color: var(--text);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.filters button.active {
  background: var(--lime);
  border-color: var(--lime);
  color: #16230a;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(200, 245, 66, 0.22);
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
  gap: 18px;
}

.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--tone) 22%, var(--line));
  border-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 7%, var(--panel-solid)), var(--panel-solid) 55%);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.3s cubic-bezier(0.2, 0.65, 0.25, 1), border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.game-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--tone) 55%, transparent);
  box-shadow:
    var(--shadow-lift),
    0 0 34px color-mix(in srgb, var(--tone) 16%, transparent);
}

.game-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.06) 48%, transparent 62%);
  transform: translateX(-110%);
  transition: transform 0.7s ease;
  pointer-events: none;
}

.game-card:hover::after { transform: translateX(110%); }

.game-art {
  position: relative;
  display: grid;
  place-items: center;
  height: 152px;
  overflow: hidden;
  background:
    radial-gradient(16rem 10rem at 85% -20%, color-mix(in srgb, var(--tone) 55%, transparent), transparent 66%),
    radial-gradient(20rem 13rem at 10% 130%, color-mix(in srgb, var(--tone) 45%, #131b30), transparent 74%),
    linear-gradient(150deg, color-mix(in srgb, var(--tone) 36%, #0d1528), #0c1326 82%);
}

/* Divi krāsaini izplūduši burbuļi: dziļums bez tumsas */
.game-art::before {
  content: "";
  position: absolute;
  left: -34px;
  top: -34px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 55%, transparent);
  filter: blur(46px);
  opacity: 0.75;
}

.game-art::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -44px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 42%, #ffffff 8%);
  filter: blur(52px);
  opacity: 0.55;
  transition: opacity 0.35s ease;
}

.game-card:hover .game-art::after { opacity: 0.85; }

.game-tag {
  position: absolute;
  left: 13px;
  top: 13px;
  z-index: 2;
  padding: 4px 11px;
  border-radius: 7px;
  background: rgba(4, 8, 15, 0.72);
  border: 1px solid var(--line);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tone) 78%, #fff);
  backdrop-filter: blur(6px);
}

.new-tag {
  position: absolute;
  right: 13px;
  top: 13px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 7px;
  background: var(--lime);
  color: #16230a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  animation: newpulse 2.4s ease-in-out infinite;
}

@keyframes newpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 245, 66, 0.4); }
  55% { box-shadow: 0 0 0 7px rgba(200, 245, 66, 0); }
}

.glyph {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 24px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--tone) 92%, #fff), color-mix(in srgb, var(--tone) 62%, #1a2440) 90%);
  border: 1px solid color-mix(in srgb, var(--tone) 60%, #fff);
  color: #0d1424;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  box-shadow:
    0 16px 32px rgba(3, 7, 14, 0.45),
    0 0 34px color-mix(in srgb, var(--tone) 45%, transparent),
    inset 0 -3px 0 rgba(0, 0, 0, 0.18);
  animation: glyphFloat 5.4s ease-in-out infinite;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes glyphFloat {
  0%, 100% { transform: rotate(-5deg) translateY(0); }
  50% { transform: rotate(-2deg) translateY(-5px); }
}

.game-card:nth-child(odd) .glyph { animation-delay: 1.2s; }
.game-card:nth-child(3n) .glyph { animation-delay: 2.3s; }

.game-card:hover .glyph {
  animation-play-state: paused;
  transform: rotate(4deg) scale(1.12);
}

.orb {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 11px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.14), rgba(9, 14, 26, 0.75));
  border: 1px solid color-mix(in srgb, var(--tone) 55%, #fff);
  color: color-mix(in srgb, var(--tone) 40%, #fff);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  text-shadow: 0 0 10px color-mix(in srgb, var(--tone) 70%, transparent);
  box-shadow: 0 8px 18px rgba(3, 7, 14, 0.4);
  backdrop-filter: blur(4px);
  animation: floaty 5s ease-in-out infinite;
}

.orb.o1 { left: 20%; top: 24%; animation-delay: 0.4s; }
.orb.o2 { right: 19%; bottom: 22%; animation-delay: 1.3s; }

/* Kāršu vēdeklis kāršu spēlēm */
.card-fan {
  position: relative;
  z-index: 1;
  display: flex;
}

.card-fan i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 60px;
  border-radius: 9px;
  background: linear-gradient(160deg, #f7fafc, #d8e0ea);
  color: #1b2436;
  border: 1px solid rgba(255, 255, 255, 0.6);
  font-family: var(--font-display);
  font-style: normal;
  font-size: 17px;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(3, 7, 14, 0.5);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card-fan i:nth-child(1) { transform: rotate(-14deg) translateX(7px) translateY(4px); }
.card-fan i:nth-child(2) { transform: rotate(-1deg) translateY(-3px); z-index: 1; }
.card-fan i:nth-child(3) { transform: rotate(13deg) translateX(-7px) translateY(4px); }

.card-fan i.red { color: #d33b52; }
.card-fan i.dark { background: linear-gradient(160deg, #232c40, #131a2b); color: #fff; border-color: rgba(158, 182, 214, 0.3); }

.game-card:hover .card-fan i:nth-child(1) { transform: rotate(-20deg) translateX(3px) translateY(2px); }
.game-card:hover .card-fan i:nth-child(2) { transform: rotate(0deg) translateY(-8px); }
.game-card:hover .card-fan i:nth-child(3) { transform: rotate(19deg) translateX(-3px) translateY(2px); }

.game-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 7px;
  padding: 17px 18px 18px;
}

.game-body h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.game-body h3 span {
  color: var(--muted-2);
  font-size: 15px;
  transition: transform 0.25s ease, color 0.25s ease;
}

.game-card:hover .game-body h3 span {
  color: var(--lime);
  transform: translateX(4px);
}

.game-body p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  flex: 1;
}

.game-meta {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.game-meta span {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-2);
}

.game-meta span.on {
  border-color: rgba(61, 220, 132, 0.35);
  color: var(--green);
}

.empty-results {
  display: none;
  padding: 44px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  text-align: center;
  color: var(--muted);
}

.empty-results.show { display: block; }

.empty-results strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-family: var(--font-display);
}

/* ==================== Turnīri ==================== */

.tournament-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 18px;
}

.tournament-main {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border: 1px solid rgba(200, 245, 66, 0.22);
  border-radius: 22px;
  background:
    radial-gradient(26rem 16rem at 88% -20%, rgba(200, 245, 66, 0.13), transparent 70%),
    linear-gradient(155deg, #0d1526, #080e1a 70%);
}

.tournament-main::before {
  content: "♜";
  position: absolute;
  right: -14px;
  bottom: -34px;
  font-size: 170px;
  line-height: 1;
  color: rgba(200, 245, 66, 0.05);
  transform: rotate(10deg);
}

.t-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  border-radius: 99px;
  border: 1px solid rgba(200, 245, 66, 0.3);
  background: rgba(200, 245, 66, 0.08);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--lime);
}

.t-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  animation: ping 2s ease-out infinite;
}

.tournament-main h3 {
  margin: 16px 0 6px;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.8px;
}

.tournament-main > p {
  margin: 0 0 24px;
  max-width: 430px;
  font-size: 14px;
  color: var(--muted);
}

.countdown {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}

.countdown div {
  min-width: 74px;
  padding: 12px 8px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(5, 9, 17, 0.66);
  text-align: center;
}

.countdown strong {
  display: block;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}

.countdown span {
  display: block;
  margin-top: 1px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted-2);
}

.t-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.t-perks span {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--panel);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.t-registration-state {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 18px;
  padding: 7px 11px;
  border: 1px solid rgba(200, 245, 66, 0.28);
  border-radius: 6px;
  background: rgba(200, 245, 66, 0.07);
  color: var(--lime);
  font-size: 11px;
  font-weight: 800;
}

.t-registration-state.closed {
  border-color: rgba(255, 100, 116, 0.28);
  background: rgba(255, 100, 116, 0.08);
  color: var(--red);
}

.countdown.ended {
  opacity: 0.52;
}

.tournament-side {
  display: grid;
  gap: 18px;
}

.tournament-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid color-mix(in srgb, var(--tone) 24%, var(--line));
  border-radius: var(--radius);
  background:
    radial-gradient(14rem 8rem at 100% 0%, color-mix(in srgb, var(--tone) 12%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--tone) 6%, var(--panel-solid)), var(--panel-solid) 60%);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.tournament-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--tone) 48%, transparent);
  box-shadow: 0 14px 30px rgba(2, 6, 14, 0.45);
}

.t-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  font-size: 23px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--tone) 30%, #0b1322), #0a101d);
  border: 1px solid color-mix(in srgb, var(--tone) 42%, transparent);
  color: color-mix(in srgb, var(--tone) 85%, #fff);
}

.tournament-card h4 {
  margin: 2px 0 3px;
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 800;
}

.tournament-card small {
  display: block;
  font-size: 12px;
  color: var(--muted);
}

.tournament-card .t-game {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tone) 80%, #fff);
}

.t-state {
  margin-left: auto;
  flex: none;
  padding: 5px 12px;
  border-radius: 99px;
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

/* ==================== Topi un līgas ==================== */

.tops-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.leaderboard {
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(22rem 16rem at 100% -15%, rgba(77, 148, 255, 0.16), transparent 68%),
    radial-gradient(18rem 14rem at -8% 118%, rgba(200, 245, 66, 0.08), transparent 70%),
    var(--panel-solid);
  overflow: hidden;
}

.lb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}

.lb-head strong {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 800;
}

.lb-head small { color: var(--muted-2); font-size: 12px; }

.lb-cols {
  display: grid;
  grid-template-columns: 44px 1fr 70px 84px;
  gap: 10px;
  padding: 10px 22px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted-2);
  border-bottom: 1px solid var(--line);
}

.lb-row {
  display: grid;
  grid-template-columns: 44px 1fr 70px 84px;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-bottom: 1px solid rgba(158, 182, 214, 0.06);
  transition: background 0.2s ease;
  animation: lbIn 0.5s ease both;
  animation-delay: var(--d, 0s);
}

@keyframes lbIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: none; }
}

.lb-row:last-child { border-bottom: 0; }
.lb-row:hover { background: var(--panel); }

.lb-rank {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}

.lb-row:nth-child(1) .lb-rank { color: var(--lime); }
.lb-row:nth-child(2) .lb-rank { color: #cfd9e6; }
.lb-row:nth-child(3) .lb-rank { color: var(--amber); }

.lb-player {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.lb-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  background: linear-gradient(150deg, color-mix(in srgb, var(--tone, #4d94ff) 38%, #0b1322), #0a101d);
  border: 1px solid color-mix(in srgb, var(--tone, #4d94ff) 45%, transparent);
  color: color-mix(in srgb, var(--tone, #4d94ff) 85%, #fff);
}

.lb-player strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
}

.lb-player small {
  display: block;
  font-size: 11px;
  color: var(--muted-2);
}

.lb-num {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.lb-num.pts { color: var(--text); font-weight: 800; }

.lb-empty {
  padding: 36px 24px;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
}

.lb-empty strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-family: var(--font-display);
}

.lb-skeleton {
  height: 46px;
  margin: 10px 22px;
  border-radius: 12px;
  background: linear-gradient(100deg, var(--panel) 40%, var(--panel-2) 50%, var(--panel) 60%);
  background-size: 220% 100%;
  animation: skel 1.4s linear infinite;
}

@keyframes skel {
  to { background-position: -220% 0; }
}

/* Līgu kāpnes */

.league-panel {
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(20rem 12rem at 100% -20%, rgba(139, 123, 255, 0.09), transparent 70%),
    var(--panel-solid);
  padding: 24px;
}

.league-panel h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 800;
}

.league-panel > p {
  margin: 0 0 20px;
  font-size: 12.5px;
  color: var(--muted);
}

.league-list {
  display: grid;
  gap: 10px;
}

.league {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  transition: transform 0.22s ease, border-color 0.22s ease;
}

.league:hover {
  transform: translateX(4px);
  border-color: color-mix(in srgb, var(--tone) 40%, transparent);
}

.league-gem {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  font-size: 16px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--tone) 32%, #0b1322), #0a101d);
  border: 1px solid color-mix(in srgb, var(--tone) 46%, transparent);
  color: color-mix(in srgb, var(--tone) 88%, #fff);
}

.league strong {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 800;
}

.league small {
  display: block;
  font-size: 11px;
  color: var(--muted-2);
}

.league em {
  margin-left: auto;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: color-mix(in srgb, var(--tone) 80%, #fff);
  white-space: nowrap;
}

.xp-note {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding: 13px 15px;
  border: 1px dashed var(--line-strong);
  border-radius: 13px;
  font-size: 12px;
  color: var(--muted);
}

.xp-note b { color: var(--lime); }

/* ==================== Kolekcija un veikals ==================== */

.economy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 18px;
  margin-bottom: 18px;
}

.economy-intro {
  position: relative;
  overflow: hidden;
  padding: 28px;
  border: 1px solid rgba(139, 123, 255, 0.24);
  border-radius: 22px;
  background:
    radial-gradient(20rem 14rem at 10% -20%, rgba(139, 123, 255, 0.16), transparent 70%),
    linear-gradient(160deg, #0e1224, #080e1a 70%);
}

.economy-intro .coin {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: conic-gradient(from 200deg, #ffd76e, #b8860b, #ffd76e, #f5c542, #ffd76e);
  color: #4a3305;
  font-size: 25px;
  font-weight: 800;
  box-shadow: 0 10px 30px rgba(255, 199, 89, 0.25), inset 0 0 0 4px rgba(255, 244, 214, 0.35);
  animation: coinTilt 5s ease-in-out infinite;
}

@keyframes coinTilt {
  0%, 100% { transform: rotateY(0deg); }
  50% { transform: rotateY(38deg) translateY(-4px); }
}

.economy-intro h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.economy-intro p {
  margin: 0 0 18px;
  font-size: 13.5px;
  color: var(--muted);
}

.economy-rules {
  display: grid;
  gap: 8px;
}

.economy-rules span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.economy-rules span::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: rgba(61, 220, 132, 0.14);
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
}

.economy-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.economy-feature {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--tone) 22%, var(--line));
  border-radius: var(--radius);
  background:
    radial-gradient(13rem 8rem at 100% 0%, color-mix(in srgb, var(--tone) 11%, transparent), transparent 70%),
    var(--panel-solid);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.economy-feature:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--tone) 40%, transparent);
}

.economy-feature .fe-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 19px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--tone) 30%, #0b1322), #0a101d);
  border: 1px solid color-mix(in srgb, var(--tone) 44%, transparent);
  color: color-mix(in srgb, var(--tone) 86%, #fff);
}

.economy-feature span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tone) 78%, #fff);
}

.economy-feature h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 800;
}

.economy-feature p {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}

/* Veikala rotācija */

.shop-panel {
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(26rem 14rem at 0% -30%, rgba(255, 215, 110, 0.07), transparent 70%),
    radial-gradient(22rem 12rem at 100% 130%, rgba(139, 123, 255, 0.08), transparent 70%),
    var(--panel-solid);
  padding: 24px;
}

.shop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.shop-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
}

.shop-head small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted-2);
}

.shop-timer {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--panel);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

.shop-timer b {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  color: var(--lime);
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.skin-card {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  text-align: center;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.skin-card:hover { transform: translateY(-4px); }

.skin-card.rare { border-color: rgba(77, 148, 255, 0.35); }
.skin-card.epic { border-color: rgba(139, 123, 255, 0.45); }

.skin-card.epic::before {
  content: "";
  position: absolute;
  inset: -60%;
  background: conic-gradient(from 0deg, transparent 70%, rgba(139, 123, 255, 0.2) 86%, transparent 100%);
  animation: slowspin 8s linear infinite;
  pointer-events: none;
}

.skin-card > * { position: relative; }

.skin-art {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 4px auto 12px;
  border-radius: 19px;
  font-size: 27px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--tone) 34%, #0b1322), #0a101d);
  border: 1px solid color-mix(in srgb, var(--tone) 50%, transparent);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.skin-card:hover .skin-art { transform: scale(1.12) rotate(-5deg); }

.skin-rarity {
  display: inline-block;
  margin-bottom: 7px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.skin-card.common .skin-rarity { background: rgba(158, 182, 214, 0.13); color: #b8c6da; }
.skin-card.rare .skin-rarity { background: rgba(77, 148, 255, 0.16); color: var(--sky); }
.skin-card.epic .skin-rarity { background: rgba(139, 123, 255, 0.18); color: #b3a7ff; }

.skin-card h4 {
  margin: 0 0 3px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
}

.skin-card small {
  display: block;
  margin-bottom: 12px;
  font-size: 11.5px;
  color: var(--muted-2);
}

.skin-price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: rgba(5, 9, 17, 0.6);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 800;
  color: #ffd76e;
}

/* ==================== Laboratorija ==================== */

.lab-grid {
  display: grid;
  gap: 18px;
}

.lab-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel-solid);
  overflow: hidden;
}

.lab-reaction {
  border-color: rgba(56, 217, 208, 0.22);
  background:
    radial-gradient(26rem 16rem at 100% -30%, rgba(56, 217, 208, 0.1), transparent 70%),
    radial-gradient(20rem 14rem at -10% 120%, rgba(200, 245, 66, 0.07), transparent 70%),
    var(--panel-solid);
}

.lab-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  padding: 5px 13px;
  border-radius: 99px;
  border: 1px solid var(--line-strong);
  background: rgba(5, 9, 17, 0.5);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
}

.lab-label i {
  font-style: normal;
  font-size: 12px;
}

.lab-reaction .lab-label i { color: var(--cyan); }

.lab-panel h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.4px;
}

.lab-panel p {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
}

.reakcija-results { margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.reakcija-results .react-label {
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted-2);
}
.reakcija-results .react-score { font-variant-numeric: tabular-nums; }
.reakcija-results .react-score.best { color: var(--lime); font-weight: 700; }

.reaction-control {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  padding: 26px 0;
  text-align: center;
}

.reaction-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 210px;
  height: 210px;
  margin: -105px 0 0 -105px;
  border: 1px dashed rgba(56, 217, 208, 0.25);
  border-radius: 50%;
  animation: slowspin 22s linear infinite;
  pointer-events: none;
}

.reaction-ring.r2 {
  width: 268px;
  height: 268px;
  margin: -134px 0 0 -134px;
  border-color: rgba(158, 182, 214, 0.12);
  animation-direction: reverse;
  animation-duration: 34s;
}

.reakcija-btn {
  position: relative;
  width: 148px;
  height: 148px;
  border: 0;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  color: #10131c;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.3s ease;
}

.reakcija-btn:active { transform: scale(0.94); }

.reakcija-btn.idle,
.reakcija-btn.result {
  background: linear-gradient(140deg, var(--lime), #96cf25);
  box-shadow: 0 12px 34px rgba(200, 245, 66, 0.25);
}

.reakcija-btn.waiting {
  background: linear-gradient(140deg, #ffd76e, #f0a92e);
  box-shadow: 0 12px 34px rgba(255, 199, 89, 0.22);
  animation: breath 1.6s ease-in-out infinite;
}

@keyframes breath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.reakcija-btn.active {
  background: linear-gradient(140deg, #ff7385, #e93850);
  color: #fff;
  box-shadow: 0 12px 40px rgba(255, 100, 116, 0.4);
  animation: none;
}

.reakcija-msg {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* ==================== Jaunumi ==================== */

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.news-card {
  position: relative;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--tone, #c8f542) 22%, var(--line));
  border-radius: var(--radius);
  background:
    radial-gradient(16rem 9rem at 0% 0%, color-mix(in srgb, var(--tone, #c8f542) 10%, transparent), transparent 70%),
    var(--panel-solid);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.news-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--tone, #c8f542) 45%, transparent);
  box-shadow: 0 14px 30px rgba(2, 6, 14, 0.45);
}

.news-card time {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted-2);
}

.news-card .news-tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 11px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--tone, #c8f542) 14%, transparent);
  color: color-mix(in srgb, var(--tone, #c8f542) 82%, #fff);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.news-card h3 {
  margin: 0 0 7px;
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.news-card p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* ==================== Kājene (footer) ==================== */

.site-footer {
  margin-top: 90px;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(40rem 22rem at 50% 130%, rgba(200, 245, 66, 0.05), transparent 70%),
    var(--bg-2);
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(240px, 1.2fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 56px 24px 44px;
}

.footer-brand p {
  margin: 14px 0 20px;
  max-width: 280px;
  font-size: 13px;
  color: var(--muted);
}

.footer-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border: 1px solid rgba(61, 220, 132, 0.3);
  border-radius: 99px;
  background: rgba(61, 220, 132, 0.07);
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
}

.footer-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: ping 2.4s ease-out infinite;
}

.footer-col strong {
  display: block;
  margin-bottom: 15px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted-2);
}

.footer-col a {
  display: block;
  width: max-content;
  padding: 5px 0;
  font-size: 13.5px;
  color: var(--muted);
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer-col a:hover {
  color: var(--lime);
  transform: translateX(3px);
}

.footer-bottom {
  border-top: 1px solid var(--line);
}

.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 24px;
  font-size: 12.5px;
  color: var(--muted-2);
}

.footer-bottom-inner b { color: var(--muted); font-weight: 600; }

.footer-heart { color: var(--red); }

/* ==================== Mobilā navigācija ==================== */

.mobile-nav {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 95;
  display: none;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: rgba(7, 11, 20, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 40px rgba(2, 5, 12, 0.6);
}

.mobile-nav a {
  flex: 1;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 8px 4px;
  border-radius: 12px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
}

.mobile-nav a span { font-size: 17px; line-height: 1; }

.mobile-nav a.active {
  background: rgba(200, 245, 66, 0.1);
  color: var(--lime);
}

/* ==================== Responsivitāte ==================== */

@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-feature { max-width: 480px; }
  .tournament-grid,
  .tops-grid,
  .economy-grid { grid-template-columns: 1fr; }
  .economy-features { grid-template-columns: repeat(3, 1fr); }
  .lab-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 30px; }
}

@media (max-width: 860px) {
  .top-nav { display: none; }
  .topbar-search { max-width: none; }
  .news-grid,
  .economy-features,
  .shop-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  body.home { padding-bottom: 84px; }
  .mobile-nav { display: flex; }
  .topbar-inner { gap: 10px; padding: 0 14px; }
  .topbar-search kbd { display: none; }
  .profile-chip span:last-child { display: none; }
  .profile-chip { padding: 5px; }
  .clock { display: none; }
  .hero { padding: 46px 16px 30px; }
  .hero-stats { gap: 24px; flex-wrap: wrap; }
  .hero-stats strong { font-size: 24px; }
  .section { padding: 54px 16px 8px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .games-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .game-art { height: 116px; }
  .glyph { width: 54px; height: 54px; font-size: 22px; border-radius: 16px; }
  .card-fan i { width: 36px; height: 50px; font-size: 14px; }
  .orb { display: none; }
  .game-body { padding: 13px 14px 15px; }
  .game-body p { display: none; }
  .game-meta span { font-size: 10px; padding: 3px 8px; }
  .countdown div { min-width: 0; flex: 1; }
  .countdown strong { font-size: 21px; }
  .tournament-main { padding: 22px; }
  .lab-panel { grid-template-columns: 1fr; gap: 22px; padding: 22px; text-align: center; }
  .lab-copy { justify-items: center; }
  .reaction-control { justify-self: center; }
  .news-grid,
  .economy-features,
  .shop-grid { grid-template-columns: 1fr; }
  .lb-cols,
  .lb-row { grid-template-columns: 34px 1fr 54px 70px; padding-left: 14px; padding-right: 14px; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; padding: 40px 16px 30px; }
  .footer-bottom-inner { justify-content: center; text-align: center; }

  /* Uz šauriem ekrāniem sašaurinām sekcijas gaismas horizontālo bleed. */
  .section::before { inset: 0 -20px; }

  .tournament-main::before { font-size: 96px; right: -10px; bottom: -18px; }
}

/* ==================== Paziņojumi (notifications) ==================== */

.notif { position: relative; }

.notif-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.notif-btn svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notif-btn:hover { color: var(--text); border-color: var(--line-strong); }
.notif.open .notif-btn { color: var(--lime); border-color: rgba(200, 245, 66, 0.4); }

.notif-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 99px;
  background: var(--red);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  border: 2px solid var(--bg);
}

.notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  max-width: calc(100vw - 32px);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--panel-solid);
  box-shadow: 0 24px 60px rgba(2, 6, 14, 0.7);
  z-index: 60;
  overflow: hidden;
  animation: notifIn 0.2s ease both;
}

@keyframes notifIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.notif-head strong { font-family: var(--font-display); font-size: 14.5px; }

.notif-readall {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s ease;
}

.notif-readall:hover { color: var(--lime); }

.notif-list { max-height: 360px; overflow-y: auto; }

.notif-item {
  display: flex;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(158, 182, 214, 0.06);
  cursor: default;
  transition: background 0.2s ease;
}

.notif-item:hover { background: var(--panel); }
.notif-item:last-child { border-bottom: 0; }

.notif-item.unread { background: rgba(200, 245, 66, 0.05); }

.notif-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--tone, #c8f542) 30%, #0b1322), #0a101d);
  border: 1px solid color-mix(in srgb, var(--tone, #c8f542) 44%, transparent);
  font-size: 16px;
}

.notif-body { min-width: 0; }
.notif-body strong { display: block; font-size: 13px; font-weight: 800; }
.notif-body p { margin: 2px 0 0; font-size: 12px; color: var(--muted); line-height: 1.4; }
.notif-body time { display: block; margin-top: 4px; font-size: 10.5px; color: var(--muted-2); }

.notif-empty {
  padding: 34px 20px;
  text-align: center;
  color: var(--muted-2);
}

.notif-empty span { font-size: 26px; }
.notif-empty p { margin: 8px 0 0; font-size: 13px; }

@media (max-width: 640px) {
  .notif-panel { position: fixed; top: 62px; right: 12px; left: 12px; width: auto; }
}