:root {
  --bg: #0a0e17;
  --bg-panel: #121a2b;
  --bg-panel-2: #17203380;
  --line: #26314a;
  --volt: #f5c400;
  --volt-soft: #f5c40022;
  --spark: #37e6e6;
  --text: #edeff5;
  --text-dim: #8b93a7;
  --danger: #ff6b6b;
  --radius: 18px;
  --font-display: "Space Grotesk", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100dvh;
  background-image:
    linear-gradient(var(--bg) 0%, #0a0e17 60%, #0d1424 100%),
    repeating-linear-gradient(0deg, transparent 0, transparent 39px, #ffffff05 40px),
    repeating-linear-gradient(90deg, transparent 0, transparent 39px, #ffffff05 40px);
  display: flex;
  justify-content: center;
  padding: 0 16px;
}

.wrap {
  width: 100%;
  max-width: 460px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 40px 0 28px;
}

/* ---------- hero ---------- */

.hero {
  text-align: center;
  padding: 12px 0 28px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--spark);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}

.eyebrow::before,
.eyebrow::after {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--spark);
  opacity: 0.5;
}

.bolt-stage {
  position: relative;
  width: 128px;
  height: 128px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
}

.bolt-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
}

.bolt-mark {
  position: relative;
  width: 56px;
  height: 56px;
  z-index: 1;
  transition: filter 0.4s ease;
}

.bolt-mark path {
  fill: var(--text-dim);
  transition: fill 0.5s ease;
}

/* ---------- utripanje emblema ----------
   Nenaročeno: strela počasi "diha" v rumeno in od okvirja se širi val.
   Naročeno (bolt-charged): strela sveti in občasno električno zatrepeta. */

.bolt-mark:not(.bolt-charged) path {
  animation: bolt-breathe 2.8s ease-in-out infinite;
}

.bolt-mark:not(.bolt-charged) {
  filter: drop-shadow(0 0 6px #f5c40055);
}

@keyframes bolt-breathe {
  0%, 100% { fill: var(--text-dim); }
  50% { fill: var(--volt); }
}

@keyframes bolt-breathe-glow {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50% { filter: drop-shadow(0 0 10px #f5c40088); }
}

.bolt-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  border: 1px solid var(--volt);
  opacity: 0;
  pointer-events: none;
  animation: stage-pulse 2.8s ease-out infinite;
}

/* ko je naročeno, val ni več potreben - ostane mirni sij okvirja (.bolt-ring) */
.bolt-stage.charged::after {
  animation: none;
}

@keyframes stage-pulse {
  0% { transform: scale(1); opacity: 0.45; }
  70%, 100% { transform: scale(1.28); opacity: 0; }
}

.bolt-mark.bolt-charged path {
  fill: var(--volt);
  animation: bolt-flicker 4.5s linear 0.5s infinite;
}

.bolt-mark.bolt-charged {
  filter: drop-shadow(0 0 12px var(--volt));
  animation: jolt 0.5s ease;
}

@keyframes jolt {
  0% { transform: scale(1); }
  30% { transform: scale(1.18) rotate(-4deg); }
  55% { transform: scale(0.95) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes bolt-glow {
  0%, 100% { filter: drop-shadow(0 0 10px var(--volt)); }
  50% { filter: drop-shadow(0 0 22px var(--volt)); }
}

/* kratek dvojni "preskok iskre" enkrat na cikel */
@keyframes bolt-flicker {
  0%, 88%, 91%, 94%, 100% { fill: var(--volt); }
  89.5% { fill: #fff6c2; }
  92.5% { fill: #b38f00; }
}

.bolt-ring {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  border: 1px solid var(--volt-soft);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.bolt-stage.charged .bolt-ring {
  opacity: 1;
  box-shadow: 0 0 0 1px var(--volt-soft), 0 0 30px 2px var(--volt-soft);
}

h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

.tagline {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 320px;
}

/* ---------- card / cta ---------- */

.card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 16px;
}

.btn {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 16px 20px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.15s ease, opacity 0.2s ease, background 0.2s ease;
}

.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--volt);
  color: #14100a;
}

.btn-primary:disabled {
  background: #2a3348;
  color: var(--text-dim);
  cursor: default;
}

.btn-primary:not(:disabled):hover {
  background: #ffd633;
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  text-decoration: none;
  box-sizing: border-box;
}

.btn-secondary:hover {
  border-color: var(--spark);
  color: var(--spark);
}

.link-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.link-row .btn {
  font-size: 15px;
  padding: 14px 10px;
}

@media (max-width: 340px) {
  .link-row { grid-template-columns: 1fr; }
}

/* števec aktivnih obvestil na gumbu oglasne deske */
.link-row .btn { position: relative; }

.badge {
  position: absolute;
  top: -8px;
  right: -6px;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 3px var(--bg);
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--volt);
  color: #14100a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.badge[hidden] { display: none; }

.btn-secondary.has-new {
  border-color: var(--volt);
  animation: new-pulse 2s ease-in-out infinite;
}

@keyframes new-pulse {
  0%, 100% { box-shadow: 0 0 0 0 #f5c40000; }
  50% { box-shadow: 0 0 0 3px #f5c40033, 0 0 18px #f5c40055; }
}

/* kartica "Naslednje na urniku" */
.next-card {
  display: block;
  margin-bottom: 16px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #121a2be6;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.next-card[hidden] { display: none; }
.next-card:hover { border-color: var(--spark); }

.next-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--spark);
}
.next-when { color: var(--volt); letter-spacing: 0.02em; text-transform: none; white-space: nowrap; }
/* na ozkem zaslonu gre "čez X dni" raje v novo vrstico, kot da bi se prelomil napis */
.next-head { flex-wrap: wrap; row-gap: 2px; }
.next-head > span:first-child { white-space: nowrap; }

.next-main {
  margin: 8px 0 4px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.next-sub {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-dim);
}
.next-sub::first-letter { text-transform: uppercase; }

.next-now {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 12.5px;
  color: var(--text-dim);
}
.next-now::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 6px #3ddc84aa;
  vertical-align: 1px;
}
.next-now[hidden] { display: none; }

.status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #0d1422;
  border: 1px solid var(--line);
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-dim);
}

[data-status-chip][data-kind="granted"] .status-dot { background: #3ddc84; box-shadow: 0 0 8px #3ddc8488; }
[data-status-chip][data-kind="idle"] .status-dot { background: var(--text-dim); }
[data-status-chip][data-kind="denied"] .status-dot { background: var(--danger); }
[data-status-chip][data-kind="needs-install"] .status-dot { background: var(--spark); }
[data-status-chip][data-kind="unsupported"] .status-dot { background: var(--danger); }

.status-text {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* ---------- kartica za namestitev na domači zaslon ---------- */

.install-card {
  border-color: #f5c40066;
  box-shadow: 0 0 0 1px #f5c40014, 0 8px 30px #00000055;
}
.install-card[hidden] { display: none; }
.install-card.done { border-color: #3ddc8466; }

.install-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
}

.install-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-dim);
}

.install-steps {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.install-steps[hidden] { display: none; }

.install-steps li {
  position: relative;
  padding: 0 0 12px 38px;
  font-size: 14px;
  line-height: 1.6;
  counter-increment: step;
}
.install-steps li:last-child { padding-bottom: 0; }

.install-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--volt);
  color: #14100a;
  font-size: 13px;
  font-weight: 700;
}

.install-steps kbd {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: #0d1422;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 7px;
  white-space: nowrap;
}
.install-steps .alt { color: var(--text-dim); font-size: 12.5px; }

.share-icon {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #4da3ff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.install-card .btn { margin-top: 16px; }
.install-card .btn[hidden] { display: none; }

/* ---------- ios banner ---------- */

.banner {
  background: #17203380;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.banner[hidden] { display: none; }

.banner h2 {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--spark);
  margin: 0 0 10px;
}

.banner ol {
  margin: 0;
  padding-left: 20px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
}

.banner kbd {
  font-family: var(--font-mono);
  background: #0d1422;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 12.5px;
}

.warning {
  background: #2a1500;
  border: 1px solid #6b3a00;
  color: #ffcf8a;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 16px;
}

.warning[hidden] { display: none; }

.warning code {
  font-family: var(--font-mono);
  background: #00000040;
  padding: 1px 5px;
  border-radius: 4px;
}

/* ---------- footer ---------- */

.footer {
  margin-top: auto;
  padding-top: 24px;
  text-align: center;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
}

/* ---------- živo nebo v ozadju (nebo.js) ---------- */

.sky {
  --sky-top: #05080f;
  --sky-mid: #0a0e17;
  --sky-low: #0d1424;
  --cloud-color: #8e97b3;
  --cloud-opacity: 0.1;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg,
    var(--sky-top) 0%, var(--sky-mid) 28%, var(--sky-low) 50%, var(--bg) 80%);
}

/* tanka mreža kot prej, čez nebo */
.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0, transparent 39px, #ffffff06 40px),
    repeating-linear-gradient(90deg, transparent 0, transparent 39px, #ffffff06 40px);
}

.has-sky .wrap { position: relative; z-index: 1; }

.sky-stars { position: absolute; inset: 0; transition: opacity 3s linear; }
.sky-stars span {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: twinkle 4s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.25; }
}

.sky-sun {
  position: absolute;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fffbe6 0%, #ffe066 45%, #ffc21a 100%);
  box-shadow: 0 0 40px 14px #ffd23f55, 0 0 110px 40px #ffd23f22;
  transition: opacity 3s linear, background 3s, box-shadow 3s;
}

.sky-sun.low {
  background: radial-gradient(circle at 40% 40%, #fff1d6 0%, #ffab4a 50%, #ff7a2e 100%);
  box-shadow: 0 0 40px 16px #ff8a3d55, 0 0 120px 50px #ff6a2a26;
}

.sky-moon {
  position: absolute;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  overflow: visible;
  filter: drop-shadow(0 0 12px #f4f1e455);
  transition: opacity 3s linear;
}
.sky-moon .moon-dark { fill: #f4f1e4; opacity: 0.08; }
.sky-moon .moon-lit { fill: #f4f1e4; }

.sky-cloud {
  position: absolute;
  left: 0;
  will-change: transform;
  opacity: var(--cloud-opacity);
  transition: opacity 3s linear;
  animation: cloud-drift linear infinite;
}
.sky-cloud svg { display: block; width: 100%; height: auto; }
.sky-cloud path { fill: var(--cloud-color); transition: fill 3s linear; }

@keyframes cloud-drift {
  from { transform: translateX(-260px); }
  to { transform: translateX(calc(100vw + 40px)); }
}

/* hitri predstavitveni način (?demo): brez zamika prehodov */
.sky-fast, .sky-fast * { transition: none !important; }

/* berljivost besedila neposredno na nebu */
.has-sky .eyebrow,
.has-sky h1,
.has-sky .tagline,
.has-sky .refresh-row .status-text,
.has-sky .board-empty,
.has-sky .back-link {
  text-shadow: 0 1px 10px #0a0e17cc, 0 0 2px #0a0e1799;
}
.has-sky .tagline { color: #d3d8e4; }

.has-sky .btn-secondary,
.has-sky .refresh-row .btn-ghost {
  background: #0a0e17d9;
}

/* ---------- električno vezje (iskre.js) ---------- */

.iskre-back,
.iskre-front {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.iskre-back { z-index: 0; }
.iskre-front { z-index: 60; }
.has-iskre .wrap { position: relative; z-index: 1; }

[data-zap],
.board-item {
  transition: opacity 0.45s ease, transform 0.45s ease, border-color 0.35s ease,
    box-shadow 0.35s ease, background 0.2s ease;
}

/* utrip, ko tok doseže kartico: z leve zelenkasto moder, z desne rose gold */
.zap {
  border-color: #26e2c4 !important;
  box-shadow: 0 0 0 1px #26e2c444, 0 0 22px #26e2c433 !important;
}
.zap-rose {
  border-color: #eca896 !important;
  box-shadow: 0 0 0 1px #eca89644, 0 0 22px #eca89633 !important;
}

/* uvod: temen zaslon -> udar strele -> tok prižge kartice */
.iskre-veil {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #04060b;
}

.iskre-flash {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: #e9fcff;
  pointer-events: none;
  transition: opacity 0.55s ease-out;
}

/* ---------- nalagalna scena "30. Elektriada" ---------- */

.splash {
  display: grid;
  place-items: center;
  background: none;
}
/* ozadje posebej, da se lahko razkadi (prelivov ni mogoče animirati) */
.splash::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #020308;
  transition: opacity 0.6s ease, background 0.8s ease;
}
/* ko pride elektrika, se v temi prikaže rahel modri sij */
.splash.electric::before {
  background: radial-gradient(circle at 50% 40%, #10203a 0%, #080d1a 45%, #03050a 100%);
}
.splash.reveal::before { opacity: 0; }

.splash-center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin-top: -4vh;
}
.splash-center.shake { animation: shake 0.35s ease-out; }
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-5px, 3px); }
  40% { transform: translate(5px, -3px); }
  60% { transform: translate(-3px, 2px); }
  80% { transform: translate(2px, -1px); }
}

/* emblem: obroč, ploščica in strela v isti celici */
.splash-emblem {
  position: relative;
  width: 250px;
  height: 250px;
  display: grid;
  place-items: center;
  transition: transform 0.6s cubic-bezier(0.6, 0, 0.2, 1), opacity 0.15s ease;
}
.splash-emblem > * { grid-area: 1 / 1; }
.splash.gone .splash-emblem { opacity: 0; }

.splash-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.splash.electric .splash-ring { opacity: 1; }
.ring-track { fill: none; stroke: #1a2336; stroke-width: 2; }
.ring-charge {
  fill: none;
  stroke: url(#splashGrad);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 6px #26e2c488);
}
.ring-orbit {
  transform-origin: 100px 100px;
  animation: orbit 1.1s linear infinite;
  filter: drop-shadow(0 0 5px #ffffffaa);
}
@keyframes orbit { to { transform: rotate(360deg); } }

.splash-panel {
  width: 160px;
  height: 160px;
  border-radius: 35px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  box-shadow: 0 0 50px #26e2c41f;
  opacity: 0;
  transition: box-shadow 0.3s ease;
}
/* ploščica se prižge kot fluorescenčna luč */
.splash.electric .splash-panel { animation: power-on 0.5s linear forwards; }
@keyframes power-on {
  0% { opacity: 0; }
  15% { opacity: 1; }
  25% { opacity: 0.2; }
  40% { opacity: 1; }
  48% { opacity: 0.5; }
  60%, 100% { opacity: 1; }
}
.splash.charged .splash-panel { box-shadow: 0 0 0 1px #f5c40066, 0 0 60px #f5c40066; }

.splash-bolt { position: relative; width: 72px; height: 72px; }
.bolt-outline { fill: none; stroke: #1c2436; stroke-width: 1.5; }

/* ---- napis ---- */
.splash-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  transition: opacity 0.35s ease, transform 0.5s ease;
}
.splash-num {
  font-size: 60px;
  line-height: 1;
  color: var(--volt);
  opacity: 0;
  text-shadow: 0 0 22px #f5c400aa, 0 0 60px #f5c40055;
}
/* "30." prileti z udarcem */
.splash.title .splash-num { animation: slam 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards; }
@keyframes slam {
  0% { opacity: 0; transform: scale(2.6); filter: blur(10px); }
  55% { opacity: 1; transform: scale(0.92); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

.splash-name {
  font-size: 30px;
  letter-spacing: 0.2em;
  margin-right: -0.2em;
  color: #fff;
}
.splash-name span {
  display: inline-block;
  opacity: 0;
  text-shadow: 0 0 12px #26e2c4aa, 0 0 28px #eca89666;
}
.splash-name span:nth-child(n+6) { text-shadow: 0 0 12px #eca896aa, 0 0 28px #26e2c466; }
/* črka zasveti, ko jo strela "privari" */
.splash-name span.on { animation: weld 0.45s linear forwards; }
@keyframes weld {
  0% { opacity: 0; color: #fff; transform: translateY(-6px) scale(1.4); }
  25% { opacity: 1; transform: translateY(0) scale(1); }
  35% { opacity: 0.3; }
  50%, 100% { opacity: 1; transform: none; }
}
/* val sija čez napis */
.splash.wave .splash-name span { animation: weld 0.45s linear forwards, wave 0.7s ease-in-out forwards; animation-delay: 0s, calc(var(--i) * 45ms); }
@keyframes wave {
  0%, 100% { transform: none; }
  50% { transform: translateY(-5px); color: #fffbe0; text-shadow: 0 0 16px #f5c400, 0 0 40px #f5c40099; }
}

/* "utrip srca" med polnjenjem */
.splash.beat .splash-bolt { animation: beat 0.4s ease-out; }
@keyframes beat {
  0% { transform: scale(1); }
  35% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* podnapis se izpiše črko za črko */
.splash-sub {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  margin-right: -0.28em;
  color: #a9bdd3;
  white-space: nowrap;
}
.splash-sub span { opacity: 0; }
.splash-sub span.on { animation: neon-in 0.35s linear forwards; }
@keyframes neon-in {
  0% { opacity: 0; }
  30% { opacity: 1; }
  45% { opacity: 0.3; }
  60%, 100% { opacity: 1; }
}

/* EKG monitor nad gumbom (krivuljo riše iskre.js na platno) */
.splash-ecg {
  width: min(300px, 78vw);
  height: 48px;
  margin-top: 20px;
  border-radius: 10px;
  background: linear-gradient(180deg, #eca8960a, #eca89600);
  box-shadow: inset 0 0 0 1px #eca8961a;
  opacity: 0;
  transform: scaleX(0.6);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.splash.ready .splash-ecg { opacity: 1; transform: none; }
.splash.entering .splash-ecg { opacity: 0; transition-duration: 0.25s; }

/* gumb za vstop: kovinska "tableta" zlato -> rose gold, 3D rob, vgraviran napis */
.splash-enter {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  padding: 17px 34px 17px 30px;
  min-width: 260px;
  border: 1px solid #ffe9c4;
  border-radius: 999px;
  background:
    radial-gradient(120% 90% at 50% -10%, #fff6e0 0%, #fff6e000 55%),
    linear-gradient(180deg, #ffe3a3 0%, #f2c46c 24%, #e2a45e 50%, #cf8a6f 74%, #b8707a 100%);
  color: #3a1a14;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px) scale(0.94);
  pointer-events: none;
  /* debelina "tablete" (spodnji rob) + mehka senca + zlat sij */
  box-shadow:
    inset 0 2px 1px #ffffffb3,
    inset 0 -3px 6px #7a3a3a59,
    0 5px 0 #8a4a4a,
    0 7px 0 #5c2c30,
    0 16px 26px #000000b3,
    0 0 34px #f5c40040;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3), box-shadow 0.15s ease;
  isolation: isolate;
}
.splash.ready .splash-enter { opacity: 1; transform: none; pointer-events: auto; }
/* pritisk: gumb se "pogrezne" v svoj rob */
.splash.ready .splash-enter:active {
  transform: translateY(5px);
  box-shadow:
    inset 0 2px 1px #ffffffb3,
    inset 0 -2px 5px #7a3a3a59,
    0 1px 0 #8a4a4a,
    0 2px 0 #5c2c30,
    0 6px 12px #000000b3,
    0 0 40px #f5c40066;
}
.splash-enter:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }

.enter-label {
  position: relative;
  z-index: 1;
  /* vgraviran napis */
  text-shadow: 0 1px 0 #fff3dc99, 0 -1px 0 #6a2e2a40;
}
.enter-ico {
  position: relative;
  z-index: 1;
  width: 17px;
  height: 17px;
  fill: #3a1a14;
  filter: drop-shadow(0 1px 0 #fff3dc99);
}

/* bleščica, ki vsake 3 s zdrsne čez kovino */
.enter-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.enter-shine::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -40%;
  width: 30%;
  background: linear-gradient(90deg, #fff0 0%, #ffffff66 50%, #fff0 100%);
  transform: skewX(-22deg) translateX(-120%);
  animation: enter-sheen 3.2s ease-in-out 0.6s infinite;
}
@keyframes enter-sheen {
  0%, 55% { transform: skewX(-22deg) translateX(-120%); }
  85%, 100% { transform: skewX(-22deg) translateX(520%); }
}

/* udarni val ob utripu */
.splash-enter::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  border: 2px solid #ffd078;
  opacity: 0;
  pointer-events: none;
}
.splash-enter.lub { animation: lub 0.5s cubic-bezier(0.2, 0.9, 0.3, 1); }
.splash-enter.dub { animation: dub 0.4s cubic-bezier(0.2, 0.9, 0.3, 1); }
.splash-enter.lub::after { animation: shockwave 0.9s ease-out; }
.splash-enter.dub::after { animation: shockwave-soft 0.7s ease-out; }
@keyframes lub {
  0% { transform: scale(1); }
  28% { transform: scale(1.075); filter: brightness(1.12); }
  100% { transform: scale(1); filter: none; }
}
@keyframes dub {
  0% { transform: scale(1); }
  35% { transform: scale(1.035); filter: brightness(1.06); }
  100% { transform: scale(1); }
}
@keyframes shockwave {
  0% { opacity: 0.9; transform: scale(1); box-shadow: 0 0 18px #f5c400aa; }
  100% { opacity: 0; transform: scale(1.35, 1.9); box-shadow: 0 0 0 #f5c40000; }
}
@keyframes shockwave-soft {
  0% { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.18, 1.45); }
}

/* začetni zaslon: prvi dotik odklene zvok */
.splash-gate {
  position: absolute;
  left: 50%;
  bottom: calc(18vh + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.splash.gate .splash-gate { display: flex; }
.splash.gate .splash-load,
.splash.gate .splash-skip { display: none; }
.splash.gate .splash-bolt { filter: drop-shadow(0 0 6px #f5c40033); }
.splash.gate .bolt-outline { stroke: #3a4460; animation: gate-breathe 2.2s ease-in-out infinite; }
@keyframes gate-breathe {
  0%, 100% { stroke: #2a3248; }
  50% { stroke: #f5c400aa; }
}
.gate-go {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  border: 1px solid #f5c40066;
  border-radius: 999px;
  background: #0b0b0c;
  color: var(--volt);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.gate-pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--volt);
  box-shadow: 0 0 0 0 #f5c40088;
  animation: gate-ping 1.4s ease-out infinite;
}
@keyframes gate-ping {
  0% { box-shadow: 0 0 0 0 #f5c400aa; }
  100% { box-shadow: 0 0 0 14px #f5c40000; }
}
.gate-mute {
  border: none;
  background: none;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* preskoči (zgoraj desno) */
.splash-skip {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  right: 16px;
  padding: 8px 12px;
  border: 1px solid #ffffff1a;
  border-radius: 999px;
  background: #ffffff08;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.4s ease 1.2s;
}
.splash.started .splash-skip { opacity: 1; }
.splash.ready .splash-skip,
.splash.entering .splash-skip { opacity: 0; pointer-events: none; transition-delay: 0s; }

/* nalagalna vrstica na dnu */
.splash-load {
  position: absolute;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom));
  width: min(260px, 70vw);
  transform: translateX(-50%);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: opacity 0.3s ease;
}
.splash-bar {
  height: 3px;
  margin-top: 9px;
  border-radius: 2px;
  background: #1a2336;
  overflow: hidden;
}
.splash-bar span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #26e2c4, #f5c400, #eca896);
  box-shadow: 0 0 10px #f5c40088;
}
.splash.ready .splash-load-text { color: var(--volt); }

.splash.reveal .splash-ring { opacity: 0; }
.splash.reveal .splash-title { opacity: 0; transform: translateY(18px); }
.splash.entering .splash-enter { opacity: 0; transform: scale(1.12); pointer-events: none; animation: none; transition-duration: 0.25s; }
.splash.entering .splash-load { opacity: 0; }

/* nižji zasloni (npr. iPhone SE): vse malo manjše */
@media (max-height: 700px) {
  .splash-emblem { width: 200px; height: 200px; }
  .splash-panel { width: 128px; height: 128px; border-radius: 28px; }
  .splash-bolt { width: 58px; height: 58px; }
  .splash-num { font-size: 48px; }
  .splash-name { font-size: 26px; }
  .splash-center { gap: 16px; }
  .splash-enter { margin-top: 12px; }
  .splash-ecg { height: 38px; margin-top: 12px; }
}

/* pravi emblem je skrit, dokler emblem s scene ne prileti na njegovo mesto */
body.intro-emblem .hero .bolt-stage { opacity: 0; }

/* ---- izris aplikacije po sceni ---- */
.hero > :not(.bolt-stage) { transition: opacity 0.7s ease, transform 0.7s ease; }
.hero > h1 { transition-delay: 0.15s; }
.hero > .tagline { transition-delay: 0.3s; }
body.intro-dark .hero > :not(.bolt-stage) { opacity: 0; transform: translateY(12px); }

/* kartica se ob prihodu toka "materializira" iz meglice */
body.intro-pending [data-zap] { transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease; }
body.intro-pending [data-zap]:not(.powered),
body.intro-pending .footer {
  opacity: 0;
  transform: translateY(18px) scale(0.96);
}
/* ... in nato še njegova vsebina */
body.intro-pending [data-zap] > * { transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s; }
body.intro-pending [data-zap]:not(.powered) > * { opacity: 0; transform: translateY(6px); }

.bolt-stage.struck,
.splash-panel.struck { animation: struck 0.55s ease-out; }
@keyframes struck {
  0% { transform: scale(1.14); filter: brightness(2.4); }
  100% { transform: scale(1); filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .bolt-mark, .bolt-mark path, .bolt-stage::after { animation: none !important; }
  .btn { transition: none !important; }
  .sky-stars span, .sky-cloud, .btn-secondary.has-new { animation: none !important; }
}

/* =============================================================
   PREMIUM + 3D sloj (globina.js, zvok.js)
   ============================================================= */

@property --ang {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ---- 3D nagib + steklen odsev (globina.js nastavlja --rx, --ry, --gx, --gy, --glare) ---- */
[data-tilt] {
  position: relative;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
}
[data-tilt]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), #ffffff24, #ffffff00 55%);
  opacity: var(--glare, 0);
  transition: opacity 0.35s ease;
}
body:not(.intro-pending) [data-tilt] {
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s ease, box-shadow 0.35s ease, background 0.2s ease;
}

/* ---- steklene kartice z globino: prelivna obroba (zelenkasto modra -> rose gold) ---- */
.has-iskre .card,
.has-iskre .next-card,
.has-iskre .link-row .btn,
.has-iskre .board-item {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, #182236f2 0%, #0f1625f2 100%) padding-box,
    linear-gradient(145deg, #26e2c466 0%, #26314a99 32%, #26314a99 68%, #eca89666 100%) border-box;
  box-shadow:
    inset 0 1px 0 #ffffff12,
    0 1px 2px #00000066,
    0 14px 34px -14px #000000cc,
    0 30px 60px -30px #26e2c41a;
}
.has-iskre .install-card {
  background:
    linear-gradient(180deg, #1c1f22f2 0%, #111519f2 100%) padding-box,
    linear-gradient(145deg, #f5c400aa 0%, #26314a99 40%, #26314a99 70%, #f5c40066 100%) border-box;
}
.has-iskre .install-card.done {
  background:
    linear-gradient(180deg, #182236f2 0%, #0f1625f2 100%) padding-box,
    linear-gradient(145deg, #3ddc84aa, #26314a99 50%, #3ddc8466) border-box;
}
.has-iskre .btn-secondary.has-new { border-color: var(--volt); }

/* ---- kartica za obvestila: glava s signalom ---- */
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.card-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--spark);
}
.signal { display: flex; align-items: flex-end; gap: 3px; height: 14px; }
.signal i {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: #2a3348;
  transition: background 0.4s ease;
}
.signal i:nth-child(1) { height: 25%; }
.signal i:nth-child(2) { height: 50%; }
.signal i:nth-child(3) { height: 75%; }
.signal i:nth-child(4) { height: 100%; }
/* ko so obvestila vklopljena, signal "oddaja" */
.notify-card:has([data-kind="granted"]) .signal i { background: #3ddc84; animation: signal 1.6s ease-in-out infinite; }
.notify-card:has([data-kind="granted"]) .signal i:nth-child(2) { animation-delay: 0.15s; }
.notify-card:has([data-kind="granted"]) .signal i:nth-child(3) { animation-delay: 0.3s; }
.notify-card:has([data-kind="granted"]) .signal i:nth-child(4) { animation-delay: 0.45s; }
@keyframes signal {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; box-shadow: 0 0 6px #3ddc84; }
}
.notify-card:has([data-kind="granted"]) .card-kicker { color: #3ddc84; }

/* status: pulzirajoča pika */
[data-status-chip][data-kind="granted"] .status-dot { animation: dot-ping 1.8s ease-out infinite; }
@keyframes dot-ping {
  0% { box-shadow: 0 0 0 0 #3ddc8488; }
  100% { box-shadow: 0 0 0 10px #3ddc8400; }
}

/* ---- gumb "Omogoči obvestila": vrteči se obroč energije ---- */
[data-subscribe-btn] { position: relative; }
[data-subscribe-btn]:not(:disabled)::before {
  content: "";
  position: absolute;
  inset: -3px;
  padding: 2px;
  border-radius: 15px;
  background: conic-gradient(from var(--ang), #26e2c4, #f5c400, #eca896, #f5c400, #26e2c4);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spin-ang 3s linear infinite;
  pointer-events: none;
}
[data-subscribe-btn]:not(:disabled) {
  background: linear-gradient(180deg, #ffd633 0%, #f5c400 55%, #e0b000 100%);
  box-shadow: inset 0 1px 0 #fff6, inset 0 -2px 0 #0000001f, 0 10px 24px -10px #f5c400aa, 0 0 18px #f5c40044;
}
@keyframes spin-ang { to { --ang: 360deg; } }

/* ---- zavihka: ikone v barvi vodnika (levo zelenkasto modra, desno rose gold) ---- */
.tab-btn { gap: 9px; }
.tab-btn .ico {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px currentColor);
}
.tab-btn .ico circle { fill: currentColor; stroke: none; }
.tab-left .ico { color: #26e2c4; }
.tab-right .ico { color: #eca896; }
.tab-btn:hover .ico { transform: translateY(-1px) scale(1.06); transition: transform 0.2s ease; }

/* ---- kartica "Naslednje na urniku": številčnica ---- */
.next-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
}
.next-card[hidden] { display: none; }
.next-body { min-width: 0; }
.next-dial {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}
.next-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.dial-track { fill: none; stroke: #ffffff12; stroke-width: 4; }
.dial-fill {
  fill: none;
  stroke: url(#dialGrad);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 4px #f5c40088);
  transition: stroke-dashoffset 1s ease;
}
.dial-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.dial-text b { font-family: var(--font-display); font-size: 20px; color: #fff; font-variant-numeric: tabular-nums; }
.dial-text span {
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
/* manj kot 15 min: številčnica utripa */
.next-dial.soon svg { animation: dial-pulse 1.2s ease-in-out infinite; }
@keyframes dial-pulse {
  0%, 100% { filter: none; }
  50% { filter: drop-shadow(0 0 10px #f5c400aa); }
}
/* dogodek poteka: zelena pika v živo */
.next-dial.live .dial-fill { stroke: #3ddc84; filter: drop-shadow(0 0 5px #3ddc84); }
.next-dial.live .dial-text b { color: #3ddc84; animation: live-blink 1.4s ease-in-out infinite; }
@keyframes live-blink { 50% { opacity: 0.35; } }

/* ---- gumb za zvok ---- */
.zvok-toggle {
  position: fixed;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 70;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #ffffff1f;
  border-radius: 50%;
  background: #0a0e17e6;
  color: var(--volt);
  cursor: pointer;
  box-shadow: 0 6px 20px -6px #000;
}
.zvok-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.zvok-toggle svg path:first-child { fill: currentColor; fill-opacity: 0.25; }
.zvok-toggle .w1 { animation: wave-out 1.6s ease-in-out infinite; }
.zvok-toggle .w2 { animation: wave-out 1.6s ease-in-out 0.25s infinite; }
@keyframes wave-out { 50% { opacity: 0.3; } }
.zvok-toggle.off { color: var(--text-dim); }

@media (prefers-reduced-motion: reduce) {
  [data-subscribe-btn]::before,
  .signal i, .status-dot, .next-dial svg, .dial-text b, .zvok-toggle path { animation: none !important; }
}

/* ---- zmogljivost na telefonih ---- */
@media (pointer: coarse) {
  .sky-stars span:nth-child(n+41) { display: none; }
}

/* =============================================================
   Emblem v 3D, premium naslov, večja zavihka, okna (plosce.js)
   ============================================================= */

/* ---- emblem: dvakrat utripne, nato se zavrti v prostoru ---- */
.hero { perspective: 800px; }
.bolt-stage {
  transform-style: preserve-3d;
  animation: emblem-3d 9s cubic-bezier(0.45, 0, 0.2, 1) 2.5s infinite;
}
/* strela lebdi nad ploščico, zato se pri vrtenju vidi globina */
.bolt-stage .bolt-mark { transform: translateZ(26px); }
.bolt-stage .bolt-mark.bolt-charged { animation: none; }
@keyframes emblem-3d {
  0% { transform: rotateY(0deg) scale(1); }
  5% { transform: rotateY(0deg) scale(1.1); }
  9% { transform: rotateY(0deg) scale(1); }
  14% { transform: rotateY(0deg) scale(1.1); }
  18% { transform: rotateY(0deg) scale(1); }
  40%, 100% { transform: rotateY(360deg) scale(1); }
}
body.intro-pending .bolt-stage,
body.intro-emblem .bolt-stage { animation: none; }

/* ---- premium naslov: šampanjec -> rose gold kovina z bleščico ---- */
.hero h1 {
  font-size: 44px;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  background:
    linear-gradient(105deg, #fff0 42%, #ffffffd9 50%, #fff0 58%) 150% 0 / 250% 100% no-repeat,
    linear-gradient(180deg, #ffffff 0%, #fbeede 40%, #efc8a3 72%, #d6977f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: title-sheen 7s ease-in-out 3s infinite;
}
.has-sky .hero h1 { text-shadow: none; filter: drop-shadow(0 3px 16px #00000099) drop-shadow(0 0 22px #f5c40026); }
@keyframes title-sheen {
  0%, 62% { background-position: 150% 0, 0 0; }
  88%, 100% { background-position: -60% 0, 0 0; }
}
/* podnaslov: razprte kapitalke z zlatima črtama */
.hero [data-event-tagline] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: none;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #e6d2bf;
}
@media (max-width: 440px) {
  .hero [data-event-tagline] { font-size: 10.5px; letter-spacing: 0.14em; }
  .hero [data-event-tagline]::before,
  .hero [data-event-tagline]::after { display: none; }
}
.hero [data-event-tagline]::before,
.hero [data-event-tagline]::after {
  content: "";
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, #eca89600, #eca896);
}
.hero [data-event-tagline]::after { transform: scaleX(-1); }

/* ---- večja zavihka ---- */
.link-row { gap: 12px; }
.link-row .btn {
  min-height: 66px;
  padding: 16px 12px;
  font-size: 16.5px;
  border-radius: 16px;
}
.tab-btn .ico { width: 26px; height: 26px; }

/* ---- strani, ki priletijo z leve (deska) ali desne (urnik) ---- */
.sheet { position: fixed; inset: 0; z-index: 65; }
.sheet[hidden] { display: none; }
.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: #02040a99;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.sheet.open .sheet-backdrop { opacity: 1; }
.sheet-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #121b2d 0%, #0a0f1a 100%);
  box-shadow: 0 0 60px #000000b3;
  transform: translateX(var(--from));
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  touch-action: pan-y;
}
/* svetla robna črta na strani, s katere je stran prišla */
.sheet-panel::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--sheet-c) 30%, var(--sheet-c) 70%, transparent);
  opacity: 0.7;
}
.sheet-left { --from: -105%; --sheet-c: #26e2c4; }
.sheet-left .sheet-panel::before { right: 0; }
.sheet-right { --from: 105%; --sheet-c: #eca896; }
.sheet-right .sheet-panel::before { left: 0; }
.sheet.open .sheet-panel { transform: none; }

/* glavna stran se odmakne v nasprotno smer (paralaksa) */
.wrap { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease; }
body.push-left .wrap { transform: translateX(22%) scale(0.94); opacity: 0.3; }
body.push-right .wrap { transform: translateX(-22%) scale(0.94); opacity: 0.3; }

.sheet-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: calc(14px + env(safe-area-inset-top)) 14px 14px;
  border-bottom: 1px solid #ffffff0f;
}
.sheet-spacer { display: block; }
.sheet-title { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--sheet-c); }
.sheet-title h2 { margin: 0; font-family: var(--font-display); font-size: 19px; color: #fff; white-space: nowrap; }
.sheet-title .ico {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sheet-title .ico circle { fill: currentColor; stroke: none; }
.sheet-close {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px 8px 8px;
  border: 1px solid #ffffff1a;
  border-radius: 999px;
  background: #ffffff0a;
  color: var(--sheet-c);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  justify-self: start;
}
.sheet-left .sheet-close { justify-self: end; flex-direction: row-reverse; padding: 8px 8px 8px 12px; }
.sheet-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sheet-close span { color: var(--text); }
.sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px 16px calc(28px + env(safe-area-inset-bottom));
}
.sheet-body-frame { padding: 0; overflow: hidden; }
.sheet-body-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; }

/* ---- urnik v oknu ---- */
.urnik-days { display: flex; gap: 8px; margin-bottom: 16px; }
.u-day {
  flex: 1;
  padding: 10px 6px;
  border: 1px solid #ffffff14;
  border-radius: 14px;
  background: #ffffff07;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.u-day b { display: block; font-family: var(--font-display); font-size: 15px; text-transform: capitalize; }
.u-day span { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 11px; }
.u-day[aria-selected="true"] {
  border-color: #eca89699;
  background: linear-gradient(180deg, #eca89626, #eca89608);
  color: #fff;
}
.urnik-list { position: relative; display: flex; flex-direction: column; gap: 8px; }
.u-row {
  display: grid;
  grid-template-columns: 52px 12px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid #ffffff0f;
  border-radius: 14px;
  background: #ffffff06;
}
.u-time b { display: block; font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: #fff; }
.u-time span { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.u-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.u-name { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.u-loc { margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--text-dim); }
.u-badge {
  padding: 4px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.u-row.past { opacity: 0.42; }
.u-row.now { border-color: #3ddc8470; background: linear-gradient(90deg, #3ddc8418, #3ddc8403); }
.u-row.now .u-badge { background: #3ddc8426; color: #3ddc84; animation: live-blink 1.4s ease-in-out infinite; }
.u-row.next { border-color: #f5c40070; background: linear-gradient(90deg, #f5c40014, #f5c40000); }
.u-row.next .u-badge { background: #f5c40024; color: var(--volt); }
.urnik-empty { padding: 30px 10px; text-align: center; color: var(--text-dim); font-size: 14px; }
.urnik-ext {
  display: block;
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  text-decoration: none;
}
.urnik-ext:hover { color: var(--spark); }

@media (prefers-reduced-motion: reduce) {
  .bolt-stage, .hero h1, .u-row.now .u-badge { animation: none !important; }
  .sheet-panel, .sheet-backdrop, .wrap { transition: none; }
}

/* =============================================================
   Nalagalna scena: velika 3D strela namesto ploščice
   ============================================================= */
.splash-emblem { perspective: 700px; transform-style: preserve-3d; }
.splash .splash-panel {
  position: relative;
  width: 150px;
  height: 150px;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  opacity: 1;
  transform-style: preserve-3d;
  transform: rotateY(-14deg) rotateX(6deg);
}
/* po polnjenju se strela ziba in se na vsake ~6 s zavrti okrog svoje osi */
.splash.electric .splash-panel {
  animation: bolt-sway 6s cubic-bezier(0.45, 0, 0.25, 1) 0.4s infinite;
}
@keyframes bolt-sway {
  0% { transform: rotateY(-14deg) rotateX(6deg); }
  28% { transform: rotateY(14deg) rotateX(-4deg); }
  52% { transform: rotateY(-14deg) rotateX(6deg); }
  100% { transform: rotateY(346deg) rotateX(6deg); }
}
.splash.charged .splash-panel { box-shadow: none; }
.splash.reveal .splash-panel { animation: none; transform: none; }

.bolt3d {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.bolt3d.struck { animation: struck 0.55s ease-out; }
.splash.beat .splash-bolt { animation: none; }
.splash.beat .bolt3d { animation: beat 0.4s ease-out; }

/* debelina: 10 slojev, vsak malo globlje in temnejši */
.b3-depth {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  opacity: 0;
}
.b3-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translateZ(calc(var(--i) * -1.5px));
}
.b3-layer path { fill: hsl(38, 95%, calc(40% - var(--i) * 2%)); }

/* sprednja kovinska ploskev */
.splash .splash-bolt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translateZ(1px);
}
.b3-bevel { fill: none; stroke: url(#b3Edge); stroke-width: 1.6; }

@media (max-height: 700px) {
  .splash .splash-panel { width: 120px; height: 120px; }
}

/* emblem aplikacije se po preletu mehko prikaže */
.hero .bolt-stage { transition: opacity 0.35s ease; }

@media (prefers-reduced-motion: reduce) {
  .splash.electric .splash-panel { animation: none; }
}

/* ---- vstop v aplikacijo: pristanek emblema in finalni BUM ---- */
/* emblem se okrog priletele strele "sestavi" z odskokom */
body.intro-pending .bolt-stage.land,
.bolt-stage.land { animation: stage-land 0.7s cubic-bezier(0.2, 1.5, 0.4, 1); }
@keyframes stage-land {
  0% { transform: scale(0.45); }
  55% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
/* BUM: strela se napihne, zablesti in zavrti */
body.intro-pending .bolt-stage.boom,
.bolt-stage.boom { animation: stage-boom 1.1s cubic-bezier(0.3, 0.8, 0.3, 1); }
@keyframes stage-boom {
  0% { transform: scale(1) rotateY(0deg); filter: brightness(1); }
  14% { transform: scale(1.32) rotateY(0deg); filter: brightness(2.2); }
  45% { transform: scale(0.94) rotateY(200deg); filter: brightness(1.3); }
  75% { transform: scale(1.05) rotateY(360deg); filter: brightness(1.1); }
  100% { transform: scale(1) rotateY(360deg); filter: brightness(1); }
}
.bolt-stage.boom .bolt-mark path { fill: var(--volt); }
/* zaslon se ob BUM-u strese */
.wrap.app-shake { animation: shake 0.45s ease-out; }
/* blisk okna, ko ga tok nazaj preteče */
.zap-gold {
  border-color: #ffd078 !important;
  box-shadow: 0 0 0 1px #ffd07855, 0 0 26px #ffd07844 !important;
}

/* =============================================================
   Emblem v aplikaciji: samo 3D strela (brez ploščice), povezana v vezje
   ============================================================= */
.bolt-stage.b3 {
  width: 150px;
  height: 150px;
  margin: 0 auto 16px;
  transform: rotateY(-12deg) rotateX(5deg);
  animation: hero-bolt 9s cubic-bezier(0.45, 0, 0.2, 1) 2.5s infinite;
}
/* brez ploščice okrog strele */
.bolt-stage.b3::before { display: none; }
/* utripajoči val je okrogel in izhaja iz strele */
.bolt-stage.b3::after {
  inset: 22px;
  border-radius: 50%;
  border-color: #ffd078;
}

/* dva utripa, vrtenje in zibanje (zadnji položaj = začetni, zato zanka ne poskoči) */
@keyframes hero-bolt {
  0% { transform: rotateY(-12deg) rotateX(5deg) scale(1); }
  5% { transform: rotateY(-12deg) rotateX(5deg) scale(1.1); }
  9% { transform: rotateY(-12deg) rotateX(5deg) scale(1); }
  14% { transform: rotateY(-12deg) rotateX(5deg) scale(1.1); }
  18% { transform: rotateY(-12deg) rotateX(5deg) scale(1); }
  42% { transform: rotateY(348deg) rotateX(5deg) scale(1); }
  70% { transform: rotateY(372deg) rotateX(-3deg) scale(1); }
  100% { transform: rotateY(348deg) rotateX(5deg) scale(1); }
}

/* zlat halo za strelo, ki "diha" (animira se le prosojnost/velikost - poceni) */
.hb-halo {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd25a66 0%, #f5c40026 38%, #f5c40000 68%);
  transform: translateZ(-24px);
  animation: hb-halo 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hb-halo {
  0%, 100% { opacity: 0.55; transform: translateZ(-24px) scale(0.9); }
  50% { opacity: 1; transform: translateZ(-24px) scale(1.06); }
}
.bolt-stage.b3.charged .hb-halo {
  background: radial-gradient(circle, #ffe08acc 0%, #f5c40040 40%, #f5c40000 70%);
  animation-duration: 1.8s;
}

/* debelina: 10 slojev */
.hb-depth { position: absolute; inset: 0; transform-style: preserve-3d; }
.hb-depth svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translateZ(calc(var(--i) * -1.6px));
}
.hb-depth path { fill: hsl(38, 95%, calc(40% - var(--i) * 2%)); }

/* kovinska sprednja ploskev z močnim sijem */
.bolt-stage.b3 .bolt-mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translateZ(1px);
  filter: drop-shadow(0 0 14px #ffc83c8c) drop-shadow(0 6px 10px #00000073);
}
.bolt-stage.b3 .bolt-mark path { animation: none; transition: none; }
.bolt-stage.b3 .bolt-mark .hb-fill { fill: url(#hbFace); }
.bolt-stage.b3 .bolt-mark .hb-bevel { fill: none; stroke: url(#hbEdge); stroke-width: 1.6; }
.bolt-stage.b3 .bolt-mark.bolt-charged {
  filter: drop-shadow(0 0 22px #ffd250cc) drop-shadow(0 6px 10px #00000073);
}
/* bleščica, ki vsakih 5 s preleti ploskev */
.hb-sheen { animation: hb-sheen 5s ease-in-out 1.5s infinite; }
@keyframes hb-sheen {
  0%, 70% { transform: translateX(0); }
  92%, 100% { transform: translateX(170px); }
}
.bolt-stage.b3.boom .bolt-mark path.hb-fill { fill: url(#hbFace); }

@media (prefers-reduced-motion: reduce) {
  .bolt-stage.b3, .hb-halo, .hb-sheen { animation: none !important; }
}

/* ---- oglasna deska v strani (enak slog kot urnik) ---- */
.board-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.board-updated { font-size: 12.5px; color: var(--text-dim); }
.board-refresh {
  padding: 7px 12px;
  border: 1px solid #ffffff1a;
  border-radius: 999px;
  background: #ffffff08;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
}
.board-refresh:disabled { opacity: 0.5; }
.board-note { margin: 0 0 14px; font-size: 12px; color: var(--text-dim); }
.board-note b { color: var(--text); font-weight: 600; }
.b-list { display: flex; flex-direction: column; gap: 10px; }
.b-row {
  padding: 14px;
  border: 1px solid #ffffff12;
  border-left: 3px solid #26e2c4;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff09, #ffffff03);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.b-row.leaving { opacity: 0; transform: translateX(-14px); }
.b-row.ending { border-left-color: var(--volt); }
.b-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.b-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--volt); }
.b-time { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.b-msg { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; }
.b-link { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; color: #26e2c4; text-decoration: none; }
.b-foot { margin-top: 10px; font-family: var(--font-mono); font-size: 11px; color: #26e2c4; font-variant-numeric: tabular-nums; }
.b-row.ending .b-foot { color: var(--volt); }
.b-bar { height: 3px; margin-top: 6px; border-radius: 2px; background: #ffffff12; overflow: hidden; }
.b-bar span { display: block; height: 100%; background: linear-gradient(90deg, #26e2c4, #f5c400); transition: width 1s linear; }
.b-row.ending .b-bar span { background: var(--volt); }

/* vezje: platno z vodniki se premika skupaj s stranjo (ne zaostaja pri drsenju) */
.iskre-back.doc { position: absolute; top: 0; left: 0; bottom: auto; right: auto; }

/* =============================================================
   Rezultati v živo: zavihek čez celo širino in okno od spodaj
   ============================================================= */
.link-row .tab-full { grid-column: 1 / -1; }
.tab-results .ico { color: var(--volt); }
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 2px;
  padding: 3px 8px;
  border: 1px solid #3ddc8466;
  border-radius: 999px;
  background: #3ddc841a;
  color: #3ddc84;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
}
.live-pill i, .rz-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 8px #3ddc84;
  animation: live-blink 1.4s ease-in-out infinite;
}

.sheet-bottom { --sheet-c: #f5c400; }
.sheet-bottom .sheet-panel { transform: translateY(105%); }
.sheet-bottom .sheet-panel::before {
  top: 0; left: 0; right: 0; bottom: auto;
  width: auto; height: 2px;
  background: linear-gradient(90deg, transparent, var(--sheet-c) 30%, var(--sheet-c) 70%, transparent);
}
.sheet-bottom .sheet-close { justify-self: end; flex-direction: row-reverse; padding: 8px 8px 8px 12px; }
body.push-bottom .wrap { transform: translateY(-5%) scale(0.92); opacity: 0.3; }

.rz-status { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); }
.rz-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); }
.rz-status.ok .rz-dot { background: #3ddc84; box-shadow: 0 0 8px #3ddc84; animation: live-blink 1.4s ease-in-out infinite; }
.rz-status.err .rz-dot { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.rz-disc { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 6px; scrollbar-width: none; }
.rz-chip {
  flex: none;
  padding: 9px 14px;
  border: 1px solid #ffffff14;
  border-radius: 999px;
  background: #ffffff07;
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.rz-chip[aria-selected="true"] { border-color: #f5c40099; background: linear-gradient(180deg, #f5c40026, #f5c40008); color: #fff; }

.rz-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 10px;
  font-family: var(--font-display);
  font-size: 16px;
  color: #fff;
}
.rz-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #f5c40055, transparent); }
.rz-h small { padding: 2px 8px; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.rz-h small.ok { background: #3ddc8422; color: #3ddc84; }
.rz-h.live { color: #3ddc84; }
.rz-h.live::after { background: linear-gradient(90deg, #3ddc8466, transparent); }
.rz-round { margin: 16px 0 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #26e2c4; }
.rz-grid { display: grid; gap: 8px; }
.rz-round + .rz-match, .rz-match + .rz-match { margin-top: 8px; }
.rz-grid .rz-match + .rz-match { margin-top: 0; }

.rz-match { border: 1px solid #ffffff10; border-radius: 14px; background: #ffffff06; overflow: hidden; }
.rz-match.live { border-color: #3ddc8480; background: linear-gradient(90deg, #3ddc8416, #3ddc8403); box-shadow: 0 0 22px -8px #3ddc84; }
.rz-match.soon { border-color: #f5c40055; }
.rz-match.final { border-color: #f5c400aa; background: linear-gradient(135deg, #f5c4001c, #ffffff05); }
.rz-mh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid #ffffff0c;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}
.rz-mh b { color: #26e2c4; font-weight: 500; }
.rz-badge { padding: 2px 8px; border-radius: 999px; background: #ffffff0d; white-space: nowrap; letter-spacing: 0.04em; }
.rz-match.done .rz-badge { color: var(--text-dim); }
.rz-match.live .rz-badge { background: #3ddc8426; color: #3ddc84; text-transform: uppercase; animation: live-blink 1.4s ease-in-out infinite; }
.rz-match.soon .rz-badge { background: #f5c40024; color: var(--volt); }
.rz-team { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.rz-team + .rz-team { border-top: 1px solid #ffffff08; }
.rz-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.rz-team.ph .rz-name { font-weight: 500; font-style: italic; color: var(--text-dim); }
.rz-team.lose { opacity: 0.55; }
.rz-pen { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.rz-score {
  min-width: 30px;
  padding: 3px 6px;
  border-radius: 8px;
  background: #ffffff0c;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
}
.rz-team.win .rz-score { background: linear-gradient(180deg, #ffd84a, #f5b400); color: #1a1200; box-shadow: 0 0 12px -2px #f5c400aa; }

.rz-table { margin-bottom: 10px; border: 1px solid #ffffff0f; border-radius: 14px; overflow: hidden; }
.rz-tr { display: grid; grid-template-columns: 22px 1fr 24px 34px 34px; gap: 6px; align-items: center; padding: 7px 12px; font-size: 13px; }
.rz-tr + .rz-tr { border-top: 1px solid #ffffff08; }
.rz-tr span:nth-child(n + 3), .rz-tr b { text-align: center; font-family: var(--font-mono); }
.rz-tr span:first-child { font-family: var(--font-mono); color: var(--text-dim); }
.rz-tr b { color: var(--volt); }
.rz-tr.up { box-shadow: inset 3px 0 0 #26e2c4; }
.rz-th { background: #ffffff08; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--text-dim); text-transform: uppercase; }

.rz-podium { display: grid; gap: 8px; }
.rz-place { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid #ffffff12; background: #ffffff06; font-size: 15px; }
.rz-place span { font-size: 22px; }
.rz-place.p1 { border-color: #f5c400aa; background: linear-gradient(90deg, #f5c40022, #ffffff04); }
.rz-generic { overflow-x: auto; border: 1px solid #ffffff0f; border-radius: 14px; }
.rz-generic table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rz-generic th, .rz-generic td { padding: 8px 10px; text-align: left; white-space: nowrap; border-bottom: 1px solid #ffffff08; }
.rz-generic th { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; color: var(--text-dim); background: #ffffff08; }

/* ---- rezultati: moje ekipe, zadetki v živo ---- */
.rz-match { position: relative; }
.rz-star {
  flex: none;
  width: 26px;
  height: 26px;
  margin: -4px 0 -4px -4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #ffffff4d;
  font-size: 17px;
  line-height: 26px;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}
.rz-star:active { transform: scale(1.3); }
.rz-star.on { color: var(--volt); text-shadow: 0 0 10px #f5c400aa; }
.rz-tr .rz-star { width: 22px; height: 22px; line-height: 22px; font-size: 14px; margin: -4px 2px -4px -4px; vertical-align: middle; }
.rz-team.mine .rz-name { color: #fff3c4; }
.rz-tr.mine { background: #f5c40012; }
.rz-match.mine { border-color: #f5c40066; }
.rz-h.mine { color: var(--volt); }
.rz-hint {
  margin: 4px 0 10px;
  padding: 10px 12px;
  border: 1px dashed #f5c40055;
  border-radius: 12px;
  background: #f5c40009;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-dim);
}

/* zadetek: kartica zasveti, rezultat se obrne, "GOL!" in konfeti */
.rz-match.goal { animation: rz-goal-card 1.8s ease-out; }
@keyframes rz-goal-card {
  0%, 35% { border-color: #f5c400; box-shadow: 0 0 0 2px #f5c40066, 0 0 34px -4px #f5c400; }
  100% { box-shadow: none; }
}
.rz-team.scored .rz-score { animation: rz-flip 0.5s ease, rz-hot 1.8s ease; }
@keyframes rz-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@keyframes rz-hot {
  0%, 45% { background: linear-gradient(180deg, #ffd84a, #f5b400); color: #1a1200; box-shadow: 0 0 18px #f5c400; }
  100% { box-shadow: none; }
}
.rz-goal-pill {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--volt);
  color: #1a1200;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  animation: rz-pill 2.2s ease forwards;
}
@keyframes rz-pill {
  0% { transform: scale(0); opacity: 0; }
  15% { transform: scale(1.15); opacity: 1; }
  25%, 80% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0; }
}
.rz-confetti { position: absolute; right: 30px; top: 46px; width: 0; height: 0; pointer-events: none; }
.rz-confetti i {
  position: absolute;
  width: 7px;
  height: 4px;
  background: var(--c);
  border-radius: 1px;
  opacity: 0;
  animation: rz-conf 1.4s cubic-bezier(0.2, 0.7, 0.4, 1) var(--d) forwards;
}
@keyframes rz-conf {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 60px)) rotate(var(--r)); }
}

/* opozorilo ob zadetku ekipe, ki jo spremljam */
.rz-toast {
  position: fixed;
  left: 12px;
  right: 12px;
  top: calc(12px + env(safe-area-inset-top));
  z-index: 95;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #f5c400aa;
  border-radius: 16px;
  background: linear-gradient(135deg, #2b2208 0%, #121a2b 70%);
  box-shadow: 0 12px 40px #000000b3, 0 0 30px -8px #f5c400;
  transform: translateY(-160%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
}
.rz-toast.show { transform: none; }
.rz-toast-ic { font-size: 28px; }
.rz-toast b { display: block; font-family: var(--font-display); font-size: 16px; color: var(--volt); }
.rz-toast-ln { display: block; margin-top: 2px; font-size: 13px; color: var(--text); }
@media (prefers-reduced-motion: reduce) {
  .rz-match.goal, .rz-team.scored .rz-score, .rz-goal-pill, .rz-confetti i { animation: none; }
  .rz-confetti { display: none; }
}

/* ---- rezultati: pravila discipline, uvrstitve ---- */
.rz-info { margin: 2px 0 6px; padding: 10px 12px; border-radius: 12px; background: #ffffff06; border: 1px solid #ffffff0d; font-size: 12.5px; line-height: 1.45; color: var(--text-dim); }
.rz-info b { display: block; margin-bottom: 3px; color: var(--text); font-weight: 600; }
.rz-prov { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: #ffffff12; font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; font-style: normal; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); vertical-align: middle; }
.rz-sub { display: block; font-size: 11px; font-weight: 400; color: var(--text-dim); }
.rz-igre { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 9px; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.rz-igre span { min-width: 30px; padding: 2px 6px; border-radius: 6px; background: #ffffff0a; text-align: center; }
.rz-igre span.x { text-decoration: line-through; opacity: 0.5; }
.rz-row .rz-team { padding: 10px 12px; }
.rz-row .rz-badge { padding: 2px 8px; border-radius: 999px; background: #ffffff0d; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); white-space: nowrap; }
.rz-row.live .rz-badge { background: #3ddc8426; color: #3ddc84; }
.rz-row + .rz-row { margin-top: 8px; }
.rz-pos { min-width: 26px; font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); }
.rz-tr2 { grid-template-columns: 34px 1fr; }
.rz-tr3 { grid-template-columns: 34px 1fr auto; }
.rz-tr3 b { text-align: right; }
.rz-big { padding: 18px 14px; font-size: 15px; text-align: center; color: var(--text); }