/* ============================================================
   FanOne — Hajduk Split
   Premium navy/gold fan platform. Built to the reference design.
   ============================================================ */

/* ------------------------------------------------------------
   Sustav ima DVIJE površine.

   SVIJETLA je zadana — feed, vijesti, passport, shop, izbornik.
   Zrak, crni tekst, fotografija nosi boju. Grb dobiva svoje prave
   crveno-bijele kocke umjesto da se gubi na tamnoplavoj.

   TAMNA se stavlja klasom .on-dark i rezervirana je za uronjene
   površine: video, splash, hero preko fotografije. Isto načelo kao
   crna F1 kartica na bijeloj Appleovoj stranici.

   Isti nazivi tokena u oba slučaja, pa se komponente ne mijenjaju.
   ------------------------------------------------------------ */

:root {
  /* površine */
  --ink:        #f5f5f7;   /* pozadina stranice */
  --navy:       #ffffff;
  --panel:      #ffffff;
  --panel-hi:   #fbfbfd;
  --line:       #e0e0e6;
  --line-soft:  #ececf0;
  --track:      rgba(0,0,0,.09);
  --glass:      rgba(255,255,255,.82);

  /* brend */
  --gold:       #8a6a1a;   /* citljivo na bijelom */
  --gold-lo:    #6d5013;
  --gold-hi:    #c9a24e;
  --blue:       #123a7a;   /* Hajdukova mornaricka kao akcent, ne kao tapeta */
  --blue-deep:  #0a2a5c;
  --live:       #b01818;
  --green:      #157f43;

  /* slog */
  --text:       #14161a;
  --dim:        #43464d;
  --muted:      #6e717a;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;

  --shell: 440px;
  --nav-h: 62px;

  /* Na iOS-u se prevodi u SF Pro — isti slog kao na apple.com */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --sf:   -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* Uronjene površine: video, splash, sve preko fotografije. */
.on-dark {
  --ink:        #040e22;
  --navy:       #061431;
  --panel:      #0b1b3d;
  --panel-hi:   #0f2450;
  --line:       #1c3160;
  --line-soft:  #162952;
  --track:      rgba(255,255,255,.16);
  --glass:      rgba(8,24,42,.72);

  --gold:       #c9a24e;
  --gold-lo:    #8d6c2c;
  --gold-hi:    #edd08a;
  --blue:       #4d9bff;
  --blue-deep:  #2a7ae0;
  --live:       #e6423b;
  --green:      #4ade80;

  --text:       #ffffff;
  --dim:        #c3d0de;
  --muted:      #8ea0b4;

  color: var(--text);
}


* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

/* Ljuska aplikacije drži punu visinu, a skrola SAMO sadržaj unutar nje.
   Bez ovoga cijela stranica skrola i donja traka odlazi izvan ekrana
   sve dok se ne dođe do dna. */
body { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--ink);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* Desktop: the stadium plate frames the phone-width app */
@media (min-width: 700px) {
  body {
    background: #0a1626 url("assets/bg-stadium.jpg") center / cover fixed no-repeat;
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(3,15,34,.55), rgba(2,8,20,.94));
    z-index: 0;
  }
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
svg.ic { display: block; flex: none; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------
   Shell
   ------------------------------------------------------------ */

.app {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--shell);
  height: 100dvh;
  margin: 0 auto;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (min-width: 700px) {
  .topbar { padding-top: 14px; }
  .app {
    height: calc(100dvh - 48px);
    margin: 24px auto;
    border-radius: 30px;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 40px 90px rgba(0,0,0,.55);
    overflow: hidden;
  }
}

.content {
  flex: 1 1 auto;
  min-height: 0;              /* ključno: bez ovoga flex dijete ne skuplja se i ne skrola */
  overflow-y: auto;
  overflow-x: hidden;         /* vodoravno se smiju micati samo nizovi, nikad cijela stranica */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 0 16px 26px;
  scrollbar-width: none;
}
.content::-webkit-scrollbar { display: none; }

/* ------------------------------------------------------------
   Top bars
   ------------------------------------------------------------ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  padding: calc(14px + env(safe-area-inset-top)) 16px 12px;
  background: linear-gradient(180deg, var(--glass) 62%, rgba(245,245,247,0) 100%);
  backdrop-filter: saturate(180%) blur(20px);
}

.brand { display: flex; align-items: center; gap: 9px; }
.brand img { width: 30px; height: 30px; }
.brand span {
  font-size: 17px; font-weight: 700; letter-spacing: .1em;
}
.brand span b { font-weight: 400; color: var(--dim); }

.topbar-title {
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
}

.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  color: var(--dim);
  border-radius: 50%;
  transition: color .18s, background .18s;
}
.icon-btn:hover { color: var(--text); background: rgba(0,0,0,.05); }

.icon-btn .badge {
  position: absolute; top: 3px; right: 3px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--live);
  color: #fff;
  font-size: 10px; font-weight: 700; font-style: normal;
  border: 2px solid var(--ink);
}

.topbar .spacer { flex: 1; }

/* ------------------------------------------------------------
   Bottom navigation
   ------------------------------------------------------------ */

.tabbar {
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  flex: none;
  height: var(--nav-h);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line);
}

.tabbar button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--muted);
  transition: color .18s;
}
.tabbar button span {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .1em;
}
.tabbar button:hover { color: var(--text); }
.tabbar button.on { color: var(--blue); }

/* ------------------------------------------------------------
   Shared blocks
   ------------------------------------------------------------ */

.panel {
  background: linear-gradient(165deg, var(--panel-hi), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  margin-bottom: 14px;
}

.eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--muted);
  text-transform: uppercase;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 0 12px;
}
.section-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .12em;
}
.section-head p { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.section-head .link { color: var(--blue); font-size: 12.5px; font-weight: 600; }

.crest { width: 54px; height: 54px; object-fit: contain; }
.crest-sm { width: 34px; height: 34px; object-fit: contain; }

.fixture {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
.fixture .side { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fixture .side strong { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; }
.fixture .vs { font-size: 14px; font-weight: 700; color: var(--dim); letter-spacing: .06em; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  transition: filter .18s, transform .12s;
}
.btn:active { transform: scale(.985); }
.btn-primary { background: linear-gradient(180deg, var(--blue), var(--blue-deep)); color: #fff; }
.btn-primary:hover { filter: brightness(1.09); }
.btn-ghost { border: 1px solid var(--line); color: var(--dim); }
.btn-ghost:hover { border-color: var(--blue); color: #fff; }
.btn-gold { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #241703; }

/* row list: STATISTIKE / SASTAVI / ... */
.rows { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.rows button {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 15px 15px;
  background: var(--panel);
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  transition: background .16s;
}
.rows button:last-child { border-bottom: 0; }
.rows button:hover { background: var(--panel-hi); }
.rows .ic:first-child { color: var(--dim); }
.rows .label { flex: 1; min-width: 0; }
.rows .label b { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.rows .label small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); letter-spacing: 0; font-weight: 400; }
.rows .chev { color: var(--muted); }

.tabs {
  display: flex;
  gap: 4px;
  margin: 4px 0 16px;
  border-bottom: 1px solid var(--line-soft);
}
.tabs button {
  flex: 1;
  padding: 11px 4px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .16s, border-color .16s;
}
.tabs button:hover { color: var(--dim); }
.tabs button.on { color: #fff; border-bottom-color: var(--gold); }

.pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--dim);
}

.empty { padding: 34px 18px; text-align: center; color: var(--muted); font-size: 13px; }

/* ------------------------------------------------------------
   Splash / hub  (the left panel of the reference)
   ------------------------------------------------------------ */

.splash {
  position: relative;
  z-index: 1;
  height: 100dvh;
  overflow-y: auto;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: calc(40px + env(safe-area-inset-top)) 22px calc(34px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Scrim je lagan gore, gdje je katedrala, a jak dolje ispod izbornika. */
  background:
    linear-gradient(180deg,
      rgba(3,13,28,.30) 0%,
      rgba(3,13,28,.20) 28%,
      rgba(3,12,26,.34) 44%,
      rgba(3,11,24,.68) 60%,
      rgba(2,10,22,.90) 76%,
      rgba(2,9,20,.97) 100%),
    url("assets/bg-splash.jpg") center top / cover no-repeat;
}

@media (min-width: 700px) {
  .splash { padding-top: 40px; padding-bottom: 34px; }
  .splash {
    height: calc(100dvh - 48px);
    margin: 24px auto;
    border-radius: 30px;
    border: 1px solid rgba(201,162,78,.22);
    box-shadow: 0 40px 90px rgba(0,0,0,.7);
    overflow-y: auto;
  }
}

.splash-stars {
  display: flex;
  gap: 9px;
  color: var(--gold);
  margin-bottom: 8px;
}

.splash-crest { width: 128px; height: 132px; object-fit: contain; filter: drop-shadow(0 12px 26px rgba(0,0,0,.6)); }

.splash-word {
  margin: 16px 0 0;
  text-shadow: 0 2px 18px rgba(2,10,22,.85);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
}
.splash-word b { font-weight: 300; color: var(--dim); }

.splash-club {
  margin: 8px 0 0;
  text-shadow: 0 2px 12px rgba(2,10,22,.9);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .34em;
  color: var(--dim);
}

.splash-tagline {
  margin: 26px 0 30px;
  text-shadow: 0 2px 16px rgba(2,10,22,.92), 0 0 44px rgba(2,10,22,.7);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: .01em;
}
.splash-tagline em { font-style: normal; color: var(--blue); }

.splash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  width: 100%;
  text-align: left;
}

.splash-grid button {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 8px;
  border-radius: var(--r-sm);
  transition: background .16s;
}
.splash-grid button:hover { background: rgba(255,255,255,.05); }

.splash-grid .glyph {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 9px;
  border: 1px solid rgba(201,162,78,.4);
  background: rgba(9,32,60,.7);
  color: var(--gold);
}
.splash-grid .txt { min-width: 0; }
.splash-grid .txt b {
  display: block;
  text-shadow: 0 1px 10px rgba(2,10,22,.9);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
}
.splash-grid .txt small {
  display: block;
  margin-top: 1px;
  text-shadow: 0 1px 10px rgba(2,10,22,.9);
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.splash-more {
  margin: 26px 0 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--muted);
}

.splash-enter { max-width: 260px; margin-bottom: 22px; }

.wordmark {
  position: relative;
  width: 100%;
  max-width: 300px;
  padding: 12px 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 900;
  font-size: 38px;
  letter-spacing: .01em;
  background: linear-gradient(180deg, #f3dda3 0%, var(--gold) 48%, #8e6b28 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-top: auto;
}
.wordmark::before,
.wordmark::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--blue) 50%, var(--gold) 80%, transparent);
  opacity: .75;
}
.wordmark::before { top: 0; }
.wordmark::after { bottom: 0; }

/* ------------------------------------------------------------
   Home
   ------------------------------------------------------------ */

.greeting { margin: 2px 0 14px; }
.greeting h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.greeting h1 .ic { color: var(--blue); }
.greeting p { margin: 5px 0 0; font-size: 13px; color: var(--dim); }

.hero {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: #04122a;
  margin-bottom: 16px;
}
.hero img {
  display: block;
  width: 100%;
  height: auto;
}
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 32%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4,16,34,0), rgba(3,13,28,.7));
}

.quick {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.quick button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 2px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--panel-hi), var(--panel));
  color: var(--dim);
  transition: border-color .16s, color .16s, transform .12s;
}
.quick button:hover { border-color: var(--blue); color: #fff; }
.quick button:active { transform: scale(.96); }
.quick button span {
  font-size: 7.6px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
  line-height: 1.2;
}

/* Naslov i natjecanje se ne smiju sudarati ni na uskom ekranu:
   razmak od 18px, oba bez preloma, a ako ne stanu — natjecanje ide u novi red. */
.match-card .head,
.md-head .head,
.live-card .head,
.pred-card .head,
.cal-detail .head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.match-card .head b,
.md-head .head b,
.live-card .head b,
.pred-card .head b { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; white-space: nowrap; }
.match-card .head .eyebrow,
.md-head .head .eyebrow,
.live-card .head .eyebrow,
.cal-detail .head .eyebrow { white-space: nowrap; }
.match-card .when {
  margin: 16px 0 0;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .07em;
}
.match-card .venue {
  margin: 4px 0 0;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--muted);
}

/* loyalty */
.loyalty { display: flex; align-items: center; gap: 14px; }
.loyalty .main { flex: 1; min-width: 0; }
.loyalty .value { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 12px; }
.loyalty .value strong { font-size: 29px; font-weight: 800; letter-spacing: -.01em; }
.loyalty .value span { font-size: 12.5px; font-weight: 700; color: var(--green); }

.bar {
  height: 6px;
  border-radius: 3px;
  background: var(--track);
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #9aa0aa, var(--gold-hi));
  transition: width .5s ease;
}

.loyalty .scale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--muted);
}
.loyalty .scale b { color: #cfd6de; font-weight: 700; }
.loyalty .scale strong { color: var(--gold); font-weight: 700; }
.loyalty .scale span { letter-spacing: 0; }

.hex {
  position: relative;
  display: grid;
  place-items: center;
  width: 76px; height: 84px;
  flex: none;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, var(--gold-hi), var(--gold) 45%, var(--gold-lo));
}
.hex::before {
  content: "";
  position: absolute;
  inset: 2px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(165deg, #0d2c53, #071c36);
}
.hex img { position: relative; width: 40px; height: 40px; object-fit: contain; }

.feature {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  text-align: left;
}
.feature .thumb {
  display: block;
  height: 128px;
  background: #04122a url("assets/hero-fans.jpg") center 55% / cover no-repeat;
}
.feature .body { display: block; padding: 13px 15px 15px; background: var(--panel); }
.feature .body .eyebrow { display: block; }
.feature .body .h { display: block; margin-top: 5px; font-size: 14px; font-weight: 700; line-height: 1.35; }
.feature .body .meta { display: block; margin-top: 6px; font-size: 11.5px; color: var(--muted); }

/* ------------------------------------------------------------
   Match centre
   ------------------------------------------------------------ */

.live-card .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 4px;
  background: var(--live);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .13em;
}
.live-badge i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #fff;
  animation: blink 1.6s ease-in-out infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.live-card .score { text-align: center; }
.live-card .score b {
  display: block;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.1;
}
.live-card .score span { font-size: 11.5px; font-weight: 700; color: var(--blue); }

.timeline { padding: 4px 0; }
.timeline .ev {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line-soft);
}
.timeline .ev:last-child { border-bottom: 0; }
.timeline .ev b { width: 34px; flex: none; font-size: 12px; font-weight: 700; color: var(--gold); }
.timeline .ev span { font-size: 13px; }

.table-wrap { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.table-wrap th {
  padding: 10px 8px;
  background: var(--panel-hi);
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-align: right;
}
.table-wrap th:nth-child(2) { text-align: left; }
.table-wrap td {
  padding: 11px 8px;
  background: var(--panel);
  border-top: 1px solid var(--line-soft);
  text-align: right;
}
.table-wrap td:nth-child(2) { text-align: left; font-weight: 600; }
.table-wrap tr.me td { background: rgba(20,71,156,.07); }
.table-wrap td:first-child, .table-wrap th:first-child { padding-left: 13px; color: var(--muted); }
.table-wrap td:last-child, .table-wrap th:last-child { padding-right: 13px; font-weight: 700; }

.fx-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  background: var(--panel);
  border-bottom: 1px solid var(--line-soft);
}
.fx-row:last-child { border-bottom: 0; }
.fx-row .date { width: 52px; flex: none; font-size: 10.5px; color: var(--muted); letter-spacing: .05em; }
.fx-row .teams { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; }
.fx-row .teams small { display: block; font-size: 10.5px; font-weight: 400; color: var(--muted); margin-top: 2px; }

.stat { margin-bottom: 14px; }
.stat .cap {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  margin-bottom: 6px;
}
.stat .cap b { font-weight: 700; }
.stat .cap em { font-style: normal; color: var(--muted); font-size: 10px; letter-spacing: .1em; }
.stat .track { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--track); }
.stat .track i { display: block; height: 100%; }
.stat .track i:first-child { background: var(--blue); }
.stat .track i:last-child { background: var(--gold); }

/* ------------------------------------------------------------
   Tickets
   ------------------------------------------------------------ */

.ticket { padding: 18px 16px 16px; }
.ticket .when { margin: 15px 0 0; text-align: center; font-size: 11.5px; font-weight: 600; letter-spacing: .07em; }
.ticket .venue { margin: 3px 0 15px; text-align: center; font-size: 10.5px; letter-spacing: .12em; color: var(--muted); }

.seat {
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 0 -16px;
  padding: 13px 16px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: rgba(255,255,255,.02);
}
.seat div { text-align: center; }
.seat span { display: block; font-size: 8.5px; letter-spacing: .12em; color: var(--muted); }
.seat b { display: block; margin-top: 3px; font-size: 13px; font-weight: 700; letter-spacing: .04em; }

.qr-holder { display: flex; flex-direction: column; align-items: center; padding: 18px 0 14px; }
.qr-holder .qr {
  padding: 9px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.qr-holder .qr svg { display: block; width: 116px; height: 116px; }
.qr-holder small {
  margin-top: 11px;
  font-size: 10.5px;
  letter-spacing: .13em;
  color: var(--muted);
}

.ticket-past { opacity: .55; }
.ticket-past .qr-holder .qr { filter: grayscale(1); }

.offer {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 15px;
  background: var(--panel);
  border-bottom: 1px solid var(--line-soft);
}
.offer:last-child { border-bottom: 0; }
.offer .info { flex: 1; min-width: 0; }
.offer .info b { display: block; font-size: 12.5px; font-weight: 700; }
.offer .info small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.offer .price { font-size: 14px; font-weight: 800; color: var(--gold); white-space: nowrap; }

/* ------------------------------------------------------------
   Profile
   ------------------------------------------------------------ */

.profile-head { display: flex; align-items: center; gap: 13px; }
.avatar {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: linear-gradient(165deg, #eef1f6, #dfe4ec);
  font-size: 19px;
  font-weight: 800;
  color: var(--gold-hi);
}
.profile-head .who { flex: 1; min-width: 0; }
.profile-head .who b { display: block; font-size: 14px; font-weight: 800; letter-spacing: .06em; }
.profile-head .who small { display: block; margin-top: 3px; font-size: 10.5px; letter-spacing: .1em; color: var(--muted); }

.tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: none;
}
.tier .mark {
  display: grid;
  place-items: center;
  width: 32px; height: 36px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, var(--gold-hi), var(--gold) 50%, var(--gold-lo));
  color: #23180a;
  font-size: 14px;
  font-weight: 900;
  font-family: var(--serif);
}
.tier span { font-size: 8.5px; font-weight: 800; letter-spacing: .12em; color: var(--gold); }

.points-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.points-strip .val strong { display: block; font-size: 24px; font-weight: 800; margin-top: 2px; }
.points-strip .link { color: var(--blue); font-size: 10.5px; font-weight: 700; letter-spacing: .09em; }

.switch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}
.switch-row:last-child { border-bottom: 0; }
.switch-row .info { flex: 1; min-width: 0; }
.switch-row .info b { display: block; font-size: 12.5px; font-weight: 600; }
.switch-row .info small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.switch {
  position: relative;
  width: 42px; height: 24px;
  flex: none;
  border-radius: 12px;
  background: var(--track);
  transition: background .2s;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s;
}
.switch.on { background: var(--blue); }
.switch.on::after { transform: translateX(18px); }

/* ------------------------------------------------------------
   My Legacy
   ------------------------------------------------------------ */

.legacy-cover {
  position: relative;
  display: grid;
  place-items: center;
  height: 172px;
  padding: 20px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #06203d url("assets/legacy-cover.jpg") center / cover no-repeat;
  text-align: center;
  margin-bottom: 8px;
}
.legacy-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,18,38,.55), rgba(3,13,28,.86));
}
.legacy-cover .inner { position: relative; }
.legacy-cover h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: .08em; }
.legacy-cover p { margin: 6px 0 15px; font-size: 12px; letter-spacing: .16em; color: var(--gold); font-weight: 600; }
.legacy-cover .btn { width: auto; padding: 9px 20px; }

.memories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.memory {
  position: relative;
  height: 84px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: linear-gradient(165deg, var(--panel-hi), var(--panel));
  display: flex;
  align-items: flex-end;
  padding: 10px;
  text-align: left;
}
.memory.photo-a { background: #06203d url("assets/tile-stadium.jpg") center / cover no-repeat; }
.memory.photo-b { background: #06203d url("assets/tile-terrace.jpg") center / cover no-repeat; }
.memory::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,16,34,.15), rgba(3,12,26,.85));
}
.memory .glyph { position: absolute; top: 10px; right: 10px; color: var(--gold); opacity: .85; }
.memory .txt { position: relative; }
.memory .txt strong { display: block; font-size: 21px; font-weight: 800; line-height: 1; }
.memory .txt span { display: block; margin-top: 3px; font-size: 8.5px; font-weight: 700; letter-spacing: .12em; color: var(--dim); }

.film { margin-top: 14px; }
.film .track { display: flex; gap: 5px; margin-bottom: 14px; }
.film .track i {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--track);
  transition: background .3s;
}
.film .track i.on { background: var(--gold); }
.film h3 { margin: 6px 0 0; font-size: 17px; font-weight: 800; }
.film p { margin: 8px 0 0; font-size: 13px; color: var(--dim); line-height: 1.55; min-height: 62px; }
.film .controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.film .controls button {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--dim);
  transition: border-color .16s, color .16s;
}
.film .controls button:hover { border-color: var(--blue); color: #fff; }
.film .controls .play {
  width: 46px; height: 46px;
  border-color: var(--gold);
  background: linear-gradient(160deg, var(--gold-hi), var(--gold));
  color: #23180a;
}

/* ------------------------------------------------------------
   Misc screens (shop, community, passport, stadium, assistant)
   ------------------------------------------------------------ */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 15px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--panel-hi), var(--panel));
  text-align: left;
  transition: border-color .16s, transform .12s;
}
.tile:hover { border-color: var(--blue); }
.tile:active { transform: scale(.985); }
.tile .glyph { color: var(--gold); }
.tile b { font-size: 12.5px; font-weight: 700; letter-spacing: .05em; }
.tile small { font-size: 11px; color: var(--muted); }

.product { padding: 0; overflow: hidden; }
.product .shot {
  width: 100%;
  height: 108px;
  display: grid;
  place-items: center;
  font-size: 40px;
  background: linear-gradient(165deg, #f0f2f6, #e4e8ef);
  border-bottom: 1px solid var(--line-soft);
}
.product .body { padding: 12px 13px 14px; width: 100%; }
.product .body b { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 0; }
.product .body .price { margin-top: 6px; font-size: 14px; font-weight: 800; color: var(--gold); }

.post { padding: 15px 16px; }
.post .top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.post .mini {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(165deg, #eef1f6, #dfe4ec);
  font-size: 13px;
  font-weight: 700;
}
.post .top b { font-size: 12.5px; font-weight: 700; }
.post .top small { display: block; font-size: 10.5px; color: var(--muted); }
.post p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.post .like {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  transition: color .16s, border-color .16s;
}
.post .like.on { color: var(--blue); border-color: var(--blue); }

.field {
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--panel-hi);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  margin-bottom: 10px;
  resize: vertical;
}
.field::placeholder { color: var(--muted); }
.field:focus { outline: none; border-color: var(--blue); }

.chat { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
.bubble {
  max-width: 84%;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
}
.bubble.bot { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.bubble.me { align-self: flex-end; background: linear-gradient(180deg, var(--blue), var(--blue-deep)); border-bottom-right-radius: 4px; }

.map {
  position: relative;
  height: 230px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 50%, #0e3a2a, #061a33 70%);
  margin-bottom: 14px;
}
.map .pitch {
  position: absolute;
  inset: 24% 18%;
  border: 2px solid rgba(255,255,255,.24);
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 10px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.5);
}
.map .pin {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: rgba(6,26,51,.95);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--gold-hi);
  white-space: nowrap;
}
.map .pin.on { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ------------------------------------------------------------
   Toast
   ------------------------------------------------------------ */

#toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + 22px + env(safe-area-inset-bottom));
  z-index: 200;
  transform: translateX(-50%) translateY(14px);
  max-width: 84vw;
  padding: 11px 18px;
  border-radius: 999px;
  background: #14161a;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   FanOne 2.0 — Match Day, Bila riznica, Dobra djela, Business
   Isti tokeni kao gore. Bez !important, bez preklapanja selektora.
   ============================================================ */

/* ---- kontekstualne kartice (Home i Passport) ---- */
.ctx {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  width: 100%;
  padding: 15px 16px 14px;
  margin-bottom: 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--panel-hi), var(--panel));
  text-align: left;
  transition: border-color .18s, transform .12s;
}
.ctx:active { transform: scale(.99); }
.ctx-zaklada { border-left: 3px solid var(--gold); }
.ctx-zaklada:hover { border-color: var(--gold); }
.ctx-biz { border-left: 3px solid var(--blue); }
.ctx-biz:hover { border-color: var(--blue); }

.ctx-top {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--muted);
}
.ctx-zaklada .ctx-top { color: var(--gold); }
.ctx-biz .ctx-top { color: var(--blue); }
.ctx-title { font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.ctx-sub { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.ctx-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
  font-size: 11.5px;
}
.ctx-foot b { font-weight: 700; }
.ctx-foot em {
  display: flex;
  align-items: center;
  gap: 3px;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--blue);
}
.ctx-zaklada .ctx-foot em { color: var(--gold); }

/* ---- Match Day ---- */
.md-head { margin-bottom: 14px; }
.md-steps { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.md-steps button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 15px;
  background: var(--panel);
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  transition: background .16s;
}
.md-steps button:last-child { border-bottom: 0; }
.md-steps button:hover { background: var(--panel-hi); }
.md-steps .n {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--gold);
  font-size: 10px;
  font-weight: 800;
  color: var(--gold);
}
.md-steps .g { color: var(--dim); display: flex; }
.md-steps .t { flex: 1; min-width: 0; }
.md-steps .t b { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.md-steps .t small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.md-steps .chev { color: var(--muted); display: flex; }

/* ---- Bila riznica ---- */
.riznica-hero,
.quiz-hero,
.impact-hero,
.biz-hero {
  padding: 18px 16px 20px;
  margin-bottom: 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, #0d2a58, #051733);
  text-align: center;
}
.riznica-hero h2,
.quiz-hero h2,
.impact-hero h2,
.biz-hero h2 { margin: 8px 0 0; font-size: 21px; font-weight: 800; letter-spacing: .02em; }
.riznica-hero p,
.quiz-hero p,
.impact-hero p,
.biz-hero p { margin: 7px 0 0; font-size: 12.5px; color: var(--dim); line-height: 1.5; }
.riznica-hero .btn { display: inline-flex; }

.timeline-club { padding-top: 4px; }
.tl-entry { display: grid; grid-template-columns: 16px 54px 1fr; gap: 10px; }
.tl-rail { position: relative; display: flex; justify-content: center; }
.tl-rail::before {
  content: "";
  position: absolute;
  top: 0; bottom: -2px;
  width: 1px;
  background: var(--line);
}
.tl-entry:last-child .tl-rail::before { bottom: auto; height: 22px; }
.tl-rail i {
  position: relative;
  margin-top: 18px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--panel);
  border: 2px solid var(--line);
}
.tl-entry.mine .tl-rail i { border-color: var(--gold); background: var(--gold); }
.tl-year {
  padding-top: 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--muted);
}
.tl-entry.mine .tl-year { color: var(--gold); }
.tl-card {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  padding: 13px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-soft);
  background: var(--panel);
}
.tl-entry.mine .tl-card { border-color: rgba(143,108,28,.4); background: linear-gradient(160deg, #fdf7e8, var(--panel)); }
.tl-icon { color: var(--dim); flex: none; }
.tl-entry.mine .tl-icon { color: var(--gold); }
.tl-card h3 { margin: 0; font-size: 13.5px; font-weight: 700; }
.tl-card p { margin: 5px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ---- Kviz ---- */
.quiz-hero .bar { margin: 14px 0 8px; }
.quiz-hero small { font-size: 9.5px; font-weight: 700; letter-spacing: .16em; color: var(--muted); }
.quiz-seal { display: flex; justify-content: center; color: var(--gold); margin-bottom: 6px; }
.quiz-hero.done h2 { font-size: 30px; }
.quiz-card h3 { margin: 0 0 14px; font-size: 15px; font-weight: 700; line-height: 1.45; }
.quiz-options { display: flex; flex-direction: column; gap: 8px; }
.qopt {
  width: 100%;
  padding: 13px 15px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--panel-hi);
  text-align: left;
  font-size: 13.5px;
  transition: border-color .16s, background .16s;
}
.qopt:hover { border-color: var(--blue); }
.qopt.correct { border-color: var(--green); background: rgba(21,127,67,.09); }
.qopt.wrong { border-color: var(--live); background: rgba(201,48,44,.09); }
.convert { margin-top: 14px; text-align: center; }
.convert p { margin: 8px 0 14px; font-size: 12.5px; color: var(--dim); line-height: 1.5; }

/* ---- Dobra djela ---- */
.campaign h3 { margin: 8px 0 0; font-size: 16px; font-weight: 700; line-height: 1.35; }
.campaign p { margin: 5px 0 0; font-size: 12px; color: var(--muted); }
.campaign-nums {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 9px;
}
.campaign-nums b { font-size: 17px; font-weight: 800; color: var(--gold); }
.campaign-nums span { font-size: 11.5px; color: var(--muted); }

.contrib-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  text-align: center;
}
.contrib-grid div { min-width: 0; }
.contrib-grid strong { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.contrib-grid span { display: block; margin-top: 3px; font-size: 8px; font-weight: 700; letter-spacing: .1em; color: var(--muted); }
.contrib-impact {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--dim);
}
.contrib-impact .ic { color: var(--gold); margin-top: 2px; }
.cup-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: -2px 0 4px;
  padding: 0 3px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}
.cup-note .ic { color: var(--gold); margin-top: 2px; flex: none; }

/* ---- Business Club ---- */
.biz-card h2 { margin: 8px 0 0; font-size: 19px; font-weight: 800; }
.biz-card p { margin: 5px 0 0; font-size: 12px; color: var(--muted); }
.rows .pill.on { border-color: var(--green); color: var(--green); }
.rows button[disabled] { opacity: .45; cursor: not-allowed; }
.csr-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--gold-hi);
}


/* ============================================================
   Prijelaz između ekrana
   Okvir (topbar i navigacija) ostaje miran, animira se samo sadržaj.
   ============================================================ */

@keyframes viewFade { from { opacity: 0; } to { opacity: 1; } }

@keyframes cardRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.view-enter { animation: viewFade .18s ease both; }

.view-enter > * { animation: cardRise .34s cubic-bezier(.22,.61,.36,1) both; }
.view-enter > *:nth-child(1) { animation-delay: .01s; }
.view-enter > *:nth-child(2) { animation-delay: .04s; }
.view-enter > *:nth-child(3) { animation-delay: .07s; }
.view-enter > *:nth-child(4) { animation-delay: .10s; }
.view-enter > *:nth-child(5) { animation-delay: .13s; }
.view-enter > *:nth-child(n+6) { animation-delay: .15s; }

/* Splash se pojavljuje kao cjelina, bez stepenica */
.splash.view-enter { animation: viewFade .34s ease both; }
.splash.view-enter > * { animation: none; }

/* Dodir na navigaciju daje trenutni odgovor, prije nego se sadržaj zamijeni */
.tabbar button { transition: color .18s, transform .12s; }
.tabbar button:active { transform: scale(.9); }

@media (prefers-reduced-motion: reduce) {
  .view-enter, .view-enter > * { animation: none; }
}

/* ============================================================
   TRENUCI — vertikalni feed
   Jedini ekran koji ide od ruba do ruba. Namjerno drukčiji od
   ostatka aplikacije, jer je format sam po sebi poznat korisniku.
   ============================================================ */

.app.flush .content { padding: 0; scroll-behavior: smooth; }

.mo-feed {
  height: 100%;
  scroll-snap-type: y mandatory;
  overflow-y: auto;
  scrollbar-width: none;
}
.mo-feed::-webkit-scrollbar { display: none; }

.mo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  background: #02090f;
}

.mo-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mo-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2,9,16,.62) 0%, rgba(2,9,16,0) 26%),
    linear-gradient(0deg, rgba(2,9,16,.88) 0%, rgba(2,9,16,.25) 34%, rgba(2,9,16,0) 58%);
  pointer-events: none;
}

.mo-top {
  position: absolute;
  top: 14px; left: 16px; right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mo-tag {
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(226,58,52,.92);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .14em;
}
.mo-there {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: rgba(4,16,32,.7);
  backdrop-filter: blur(6px);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--gold-hi);
}

.mo-body {
  position: relative;
  padding: 0 78px 26px 16px;
}
.mo-body h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.22;
  text-shadow: 0 2px 18px rgba(2,9,16,.9);
}
.mo-meta {
  margin: 7px 0 0;
  font-size: 12.5px;
  color: #cfdcea;
  text-shadow: 0 1px 12px rgba(2,9,16,.9);
}
.mo-seat {
  display: inline-block;
  margin: 10px 0 0;
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid rgba(201,162,78,.45);
  background: rgba(4,16,32,.62);
  backdrop-filter: blur(6px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gold-hi);
}

.mo-rail {
  position: absolute;
  right: 10px;
  bottom: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mo-rail button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(2,9,16,.9);
  transition: transform .14s, color .16s;
}
.mo-rail button:active { transform: scale(.88); }
.mo-rail button span {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .07em;
}
.mo-rail button.on { color: var(--gold); }

/* Zadnja kartica: duga forma ostaje kod kluba */
.mo-outro {
  justify-content: center;
  align-items: center;
  background: linear-gradient(170deg, #0c2c53, #04142a 62%, #02090f);
  text-align: center;
}
.mo-outro-inner { padding: 0 30px; }
.mo-outro-inner img { width: 76px; height: 76px; margin: 0 auto 18px; }
.mo-outro-inner h2 { margin: 0; font-size: 21px; font-weight: 800; }
.mo-outro-inner p { margin: 8px 0 22px; font-size: 13px; color: var(--dim); }

.mo-plus {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 13px 22px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: rgba(6,26,51,.7);
  color: #fff;
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  transition: border-color .18s;
}
.mo-plus:hover { border-color: var(--blue); }
.mo-plus .ic { color: var(--blue); }
.mo-plus small {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .mo-feed { scroll-snap-type: none; }
}

/* ============================================================
   POČETNA — veliko mjerilo i beskonačni feed
   Pravilo: jedan dominantan element, pa niz kartica. Naslovi su
   kratki po prirodi (osobni), pa se ne moraju rezati trotočkom.
   ============================================================ */

.app.wide .content { padding-left: 0; padding-right: 0; }
.app.wide .content > .feed,
.app.wide .content > .feed-sentinel { padding: 0 14px; }

/* ---- hero ---- */
.hero-big {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 62vh;
  margin-bottom: 18px;
  overflow: hidden;
  background: #04122a;
}
.hero-big-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-big-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3,13,28,.75) 0%, rgba(3,13,28,0) 30%),
    linear-gradient(0deg, rgba(3,13,28,.96) 4%, rgba(3,13,28,.45) 42%, rgba(3,13,28,0) 72%);
}
.hero-big-body { position: relative; padding: 0 18px 22px; }
.hero-big-eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--gold);
}
.hero-big-title {
  margin: 10px 0 0;
  font-size: 38px;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.02em;
  text-shadow: 0 3px 24px rgba(2,9,20,.8);
}
.hero-big-seat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(201,162,78,.55);
  background: rgba(5,20,40,.66);
  backdrop-filter: blur(8px);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--gold-hi);
}
.hero-big-actions { display: flex; gap: 9px; margin-top: 18px; }
.hero-big-actions .btn { flex: 1; }

/* ---- kartice feeda ---- */
.feed { display: flex; flex-direction: column; gap: 14px; }

.f-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--panel-hi), var(--panel));
  text-align: left;
  transition: border-color .18s, transform .12s;
}
.f-card:active { transform: scale(.99); }
.f-card:hover { border-color: var(--blue); }

.f-shot { display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; }
.f-shot img { width: 100%; height: 100%; object-fit: cover; }

.f-body { display: block; padding: 14px 16px 17px; }

.f-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
  color: var(--muted);
}
.f-tag-live { color: var(--live); }
.f-tag-gold { color: var(--gold); }
.f-tag-blue { color: var(--blue); }

.f-title {
  display: block;
  margin-top: 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.005em;
}
.f-title-lg { font-size: 22px; font-weight: 800; line-height: 1.2; }
.f-meta { display: block; margin-top: 8px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.f-meta b { color: var(--gold); font-weight: 800; }

/* video kartica: uspravna sličica uz tekst */
.f-video { flex-direction: row; align-items: stretch; }
.f-video .f-thumb {
  position: relative;
  display: block;
  width: 116px;
  flex: none;
  overflow: hidden;
}
.f-video .f-thumb img { width: 100%; height: 100%; object-fit: cover; }
.f-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.f-video .f-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }

/* osobne kartice: bez fotografije, brojka nosi ekran */
.f-you { padding: 17px 18px 19px; border-left: 3px solid var(--gold); }
.f-you.f-biz { border-left-color: var(--blue); }
.f-big {
  display: block;
  margin-top: 9px;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.f-campaign { padding: 17px 18px 19px; border-left: 3px solid var(--gold); }
.f-campaign .bar { margin-top: 13px; }

/* ---- dohvat sljedeće stranice ---- */
.feed-sentinel { display: grid; place-items: center; min-height: 76px; padding: 22px 14px; }
.spin {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--gold);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.feed-end { margin: 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--dim); }
.feed-end small { display: block; margin-top: 6px; font-weight: 400; font-size: 11.5px; color: var(--muted); }

@media (max-width: 360px) {
  .hero-big-title { font-size: 32px; }
  .f-title-lg { font-size: 19px; }
  .f-big { font-size: 27px; }
}

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

/* ============================================================
   DANAS — razlog da se aplikacija otvori ujutro
   ============================================================ */

.today-wrap { padding: 0 14px; margin-bottom: 16px; }

.today {
  display: block;
  padding: 18px 18px 16px;
  border-radius: var(--r-md);
  border: 1px solid rgba(201,162,78,.45);
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(201,162,78,.14), transparent 62%),
    linear-gradient(160deg, #0e2c5e, #08213e);
}
.today-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--gold);
}
.today-title {
  margin: 11px 0 0;
  font-size: 25px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.015em;
}
.today-sub { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--dim); }
.today-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 15px;
  padding: 9px 15px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  color: #221602;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .13em;
  transition: filter .16s, transform .12s;
}
.today-cta:hover { filter: brightness(1.06); }
.today-cta:active { transform: scale(.97); }

/* ============================================================
   Poliranje mjerila na ostalim ekranima
   Isti korak povećanja kao na Početnoj, da app djeluje kao cjelina.
   ============================================================ */

.section-head h2 { font-size: 19px; letter-spacing: .04em; }
.section-head p { font-size: 12.5px; margin-top: 5px; }

.rows .label b { font-size: 13px; letter-spacing: .04em; }
.rows .label small { font-size: 12px; margin-top: 3px; }
.rows button { padding: 16px 15px; }

.md-steps .t b { font-size: 13.5px; letter-spacing: .04em; }
.md-steps .t small { font-size: 12px; }
.md-steps button { padding: 16px 15px; }

.riznica-hero h2, .quiz-hero h2, .impact-hero h2, .biz-hero h2 { font-size: 27px; letter-spacing: -.015em; }
.riznica-hero p, .quiz-hero p, .impact-hero p, .biz-hero p { font-size: 13.5px; }

.campaign h3 { font-size: 20px; line-height: 1.25; }
.campaign-nums b { font-size: 21px; }
.contrib-grid strong { font-size: 21px; }
.contrib-impact { font-size: 13.5px; }

.tl-card h3 { font-size: 15px; }
.tl-card p { font-size: 12.5px; }
.tl-year { font-size: 15px; }

.biz-card h2 { font-size: 23px; }
.quiz-card h3 { font-size: 17px; line-height: 1.4; }
.qopt { font-size: 14.5px; padding: 15px 16px; }

.loyalty .value strong { font-size: 34px; }
.points-strip .val strong { font-size: 28px; }
.profile-head .who b, .pass-id .who b { font-size: 16px; }
.seat b { font-size: 14.5px; }
.memory .txt strong { font-size: 25px; }

/* ---- oznaka verzije ---- */
.build-tag {
  margin: 14px 0 0;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  color: rgba(143,163,188,.55);
  text-align: center;
}
.build-tag-block {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
}
.build-tag-block small {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: .08em;
  color: rgba(143,163,188,.6);
}


/* ============================================================
   IZBORNIK — cijeli ekran, samo tipografija
   Bez ikona, bez okvira, bez razdjelnika. Slog je sistemski, pa se
   na iPhoneu prikazuje u SF Pro, jednako kao na apple.com.
   ============================================================ */

body.sheet-locked { overflow: hidden; }

.menu {
  position: absolute;
  inset: 0;
  z-index: 70;
  pointer-events: none;
}
.menu.open { pointer-events: auto; }

.menu-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: calc(16px + env(safe-area-inset-top)) 0 calc(26px + env(safe-area-inset-bottom));
  background: var(--ink);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .28s ease, transform .32s cubic-bezier(.22,.61,.36,1);
}
.menu.open .menu-panel { opacity: 1; transform: none; }

.menu-close {
  align-self: flex-end;
  margin-right: 18px;
  padding: 8px;
  color: var(--dim);
  transition: color .16s;
}
.menu-close:hover { color: var(--text); }

.menu-list {
  flex: 1;
  overflow-y: auto;
  padding: 22px 30px 0;
  scrollbar-width: none;
}
.menu-list::-webkit-scrollbar { display: none; }

.menu-item,
.menu-sub {
  display: block;
  width: 100%;
  padding: 13px 0;
  font-family: var(--sf);
  text-align: left;
  color: var(--text);
  opacity: 0;
  transform: translateY(8px);
  transition: color .16s;
}
.menu.open .menu-item,
.menu.open .menu-sub {
  animation: menuIn .42s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: calc(var(--i) * 26ms + 60ms);
}
@keyframes menuIn { to { opacity: 1; transform: none; } }

.menu-item {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -.022em;
}
.menu-item:active { color: var(--gold); }

.menu-rule {
  height: 1px;
  margin: 24px 0 20px;
  background: var(--line);
}

.menu-sub {
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -.012em;
  color: var(--muted);
}
.menu-sub:active { color: var(--text); }

.menu-ver {
  margin: 18px 30px 0;
  font-family: var(--sf);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--muted);
}

@media (max-height: 700px) {
  .menu-item { font-size: 25px; padding: 10px 0; }
  .menu-sub { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-panel { transition: none; }
  .menu.open .menu-item, .menu.open .menu-sub { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   VODORAVNI NIZ VISOKIH KARTICA
   Susjedi vire s obje strane, pa je jasno da se povlači.
   ============================================================ */

.rail-wrap { margin-bottom: 22px; }

.rail-head {
  margin: 0 0 14px;
  padding: 0 18px;
  font-family: var(--sf);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.024em;
}

.rail {
  display: flex;
  gap: 12px;
  padding: 0 18px 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }

.rail-card {
  position: relative;
  flex: 0 0 74%;
  max-width: 300px;
  aspect-ratio: 3 / 4;
  padding: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  scroll-snap-align: center;
  background: #04122a;
  transition: transform .14s;
}
.rail-card:active { transform: scale(.98); }
.rail-card img { width: 100%; height: 100%; object-fit: cover; }

.rail-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(2,9,16,.9) 2%, rgba(2,9,16,.25) 44%, rgba(2,9,16,.1) 70%);
}

.rail-there {
  position: absolute;
  top: 12px; left: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: rgba(4,16,32,.72);
  backdrop-filter: blur(6px);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .13em;
  color: var(--gold-hi);
}

.rail-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0 15px 16px;
  text-align: left;
}
.rail-body b {
  display: block;
  font-family: var(--sf);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -.018em;
  text-shadow: 0 2px 14px rgba(2,9,16,.85);
}
.rail-play {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--gold);
}

/* Isti slog i za velike naslove, radi mirnijeg dojma */
.hero-big-title, .today-title, .f-title-lg { font-family: var(--sf); }
.hero-big-title { font-weight: 700; letter-spacing: -.028em; }
.today-title { font-weight: 600; letter-spacing: -.022em; }
.f-title-lg { font-weight: 600; letter-spacing: -.018em; }

/* ============================================================
   URONJENE POVRŠINE
   Sve što leži preko fotografije ili videa zadržava tamne tokene.
   Isto načelo kao crna F1 kartica na bijeloj Appleovoj stranici:
   bijela stranica postoji da bi tamna ploha imala udar.
   ============================================================ */

.splash,
.hero-big,
.mo,
.rail-card,
.memory,
.legacy-cover,
.today,
.map,
.riznica-hero,
.quiz-hero,
.impact-hero,
.biz-hero {
  --panel:      #0b1b3d;
  --panel-hi:   #0f2450;
  --line:       #1c3160;
  --line-soft:  #162952;
  --track:      rgba(255,255,255,.18);
  --gold:       #c9a24e;
  --gold-hi:    #edd08a;
  --blue:       #4d9bff;
  --text:       #ffffff;
  --dim:        #c3d0de;
  --muted:      #93a5b8;
  color: #fff;
}

/* Tamni blokovi koji nisu fotografija dobivaju plavu plohu */
.riznica-hero,
.quiz-hero,
.impact-hero,
.biz-hero {
  background: linear-gradient(160deg, #0e2c5e, #061a44);
  border: 0;
}

.today {
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(201,162,78,.18), transparent 62%),
    linear-gradient(160deg, #102c5c, #061a44);
  border: 0;
}
.today-cta { background: linear-gradient(180deg, #edd08a, #c9a24e); color: #221602; }

.map { background: radial-gradient(circle at 50% 50%, #0e3a2a, #071a2e 70%); border: 0; }

/* ============================================================
   Doradе za svijetlu podlogu
   ============================================================ */

/* Kartice dobivaju mekanu sjenu umjesto obruba — zrak umjesto linija */
.panel,
.f-card,
.rows,
.table-wrap,
.md-steps,
.tile {
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 18px rgba(16,24,40,.05);
}

.f-card:hover,
.tile:hover { border-color: var(--blue); box-shadow: 0 2px 4px rgba(16,24,40,.06), 0 10px 26px rgba(16,24,40,.09); }

/* QR na bijelom treba obrub, inače lebdi */
.qr-holder .qr { border: 1px solid var(--line); box-shadow: none; }

/* Sekcijski naslovi u Appleovom slogu */
.section-head h2,
.rail-head,
.hero-big-title,
.today-title,
.f-title-lg,
.riznica-hero h2,
.quiz-hero h2,
.impact-hero h2,
.biz-hero h2,
.legacy-cover h2 {
  font-family: var(--sf);
  letter-spacing: -.022em;
}
.section-head h2 { font-weight: 600; text-transform: none; letter-spacing: -.02em; }

/* Zlatna na bijelom mora biti tamnija da ostane čitljiva */
.f-meta b,
.campaign-nums b,
.tier span,
.rows .label b { color: inherit; }
.eyebrow { color: var(--muted); }

/* Zaglavlje splasha ostaje svijetlo jer leži na noćnoj fotografiji */
.splash-club,
.splash-more { color: var(--dim); }

/* Sjene teksta imaju smisla samo preko fotografije */
.section-head h2,
.section-head p { text-shadow: none; }

/* ============================================================
   KARTICE U BOJI
   Ploha bez fotografije, kao Appleov Fitness+ i Music blok.
   Daju feedu ritam neovisno o tome kakav je fotomaterijal —
   dizajn ne smije biti talac kvalitete slika.
   ============================================================ */

.f-tile {
  padding: 22px 20px 24px;
  border: 0;
  box-shadow: none;
  --text: #fff;
  --dim: rgba(255,255,255,.86);
  --muted: rgba(255,255,255,.7);
  --track: rgba(255,255,255,.26);
  color: #fff;
}
.f-tile:hover { box-shadow: 0 10px 30px rgba(16,24,40,.16); }
.f-tile .f-tag { color: rgba(255,255,255,.78); }
.f-tile .f-meta { color: rgba(255,255,255,.82); }
.f-tile .f-meta b { color: #fff; }
.f-tile .f-big { font-size: 40px; letter-spacing: -.03em; }
.f-tile .f-title-lg { font-size: 25px; }
.f-tile .bar i { background: #fff; }

.f-tile-gold { background: linear-gradient(155deg, #b08420, #74530f); }
.f-tile-blue { background: linear-gradient(155deg, #1a4f9e, #0e3572); }
.f-tile-navy { background: linear-gradient(155deg, #0e1c3c, #050e22); }
.f-tile-ink  { background: linear-gradient(155deg, #2b2f38, #14161a); }

/* ============================================================
   FILTER CHIPS
   Vodoravni red pilula na vrhu feeda. Man Utd, Chelsea i Real
   svi ovako drže „sve u jednom feedu" a da se ne utopi.
   ============================================================ */

.chips {
  display: flex;
  gap: 8px;
  padding: 2px 14px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  padding: 9px 17px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-family: var(--sf);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--dim);
  transition: background .16s, color .16s, border-color .16s;
}
.chip:hover { border-color: var(--muted); }
.chip.on {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
  font-weight: 600;
}

/* ============================================================
   ODBROJAVANJE
   Teče u sekundu, kao na Man Utd match kartici.
   ============================================================ */

.today-count .today-title { margin-bottom: 4px; }

.countdown {
  display: flex;
  gap: 10px;
  margin: 16px 0 4px;
}
.countdown span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 56px;
  padding: 10px 8px 9px;
  border-radius: 12px;
  background: rgba(255,255,255,.1);
}
.countdown b {
  font-family: var(--sf);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.countdown i {
  font-style: normal;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
  color: rgba(255,255,255,.62);
}

/* ============================================================
   MOJA ULAZNICA — uvijek nadohvat u Match Dayu
   Chelsea je drži kao pilulu u zaglavlju; ista logika.
   ============================================================ */

.ticket-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 999px;
  border: 1px solid var(--gold-hi);
  background: linear-gradient(180deg, #fdf8ec, #f7efdc);
  color: #4a3708;
  font-family: var(--sf);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  transition: filter .16s, transform .12s;
}
.ticket-pill:active { transform: scale(.99); }
.ticket-pill:hover { filter: brightness(1.03); }
.ticket-pill .ic:first-child { color: #8f6c1c; }
.ticket-pill .ic:last-child { margin-left: auto; color: #8f6c1c; }

/* ============================================================
   KALENDAR — mjesečna mreža, grb na danu utakmice (Real Madrid)
   ============================================================ */

.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cal-head h2 { margin: 0; font-family: var(--sf); font-size: 21px; font-weight: 600; letter-spacing: -.022em; }
.cal-nav {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--dim);
  transition: border-color .16s, color .16s;
}
.cal-nav:hover { border-color: var(--blue); color: var(--text); }

.cal-week {
  display: grid; grid-template-columns: repeat(7, 1fr);
  margin-bottom: 6px;
  text-align: center;
}
.cal-week span { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--muted); }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 10px;
  font-family: var(--sf);
}
.cal-cell.empty { visibility: hidden; }
.cal-num { font-size: 14px; font-weight: 500; color: var(--dim); }
.cal-cell.has-match { background: var(--panel); border: 1px solid var(--line); }
.cal-cell.has-match .cal-num {
  position: absolute; bottom: 3px; right: 5px;
  font-size: 9.5px; font-weight: 700; color: var(--muted);
}
.cal-crest { width: 60%; height: 60%; object-fit: contain; margin-bottom: 4px; }
.cal-dot { position: absolute; top: 5px; left: 5px; width: 6px; height: 6px; border-radius: 50%; }
.cal-dot.h { background: var(--blue); }
.cal-dot.a { background: var(--gold); }

.cal-legend { display: flex; gap: 16px; margin: 14px 0 6px; font-size: 11.5px; color: var(--muted); }
.cal-legend span { display: flex; align-items: center; gap: 6px; }
.cal-legend i { width: 7px; height: 7px; border-radius: 50%; }
.cal-legend i.h { background: var(--blue); }
.cal-legend i.a { background: var(--gold); }
.cal-hint { margin: 18px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }
.cal-detail { margin-top: 14px; }

/* ============================================================
   MOMČAD — grb kao žig gdje nema portreta (MUTV)
   ============================================================ */

.squad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; }

.player {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  padding: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(170deg, #16233c, #0a1424);
  text-align: left;
  transition: transform .14s, border-color .16s;
}
.player:active { transform: scale(.985); }
.player:hover { border-color: var(--blue); }
.player-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.player.no-photo { background: linear-gradient(170deg, #e9ecf2, #cfd6e2); }
.player-mark {
  position: absolute;
  top: 50%; left: 50%;
  width: 78%;
  transform: translate(-50%, -58%);
  opacity: .17;
}
.player-num {
  position: absolute;
  top: 10px; left: 12px;
  font-family: var(--sf);
  font-size: 15px;
  font-weight: 800;
  color: rgba(255,255,255,.9);
}
.player.no-photo .player-num { color: rgba(20,22,26,.45); }

.player-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 12px 12px 13px;
  background: linear-gradient(0deg, rgba(4,10,20,.9), rgba(4,10,20,0));
}
.player.no-photo .player-body { background: linear-gradient(0deg, rgba(255,255,255,.94), rgba(255,255,255,0)); }
.player-first, .player-last, .player-videos { display: block; font-family: var(--sf); color: #fff; }
.player.no-photo .player-first,
.player.no-photo .player-last { color: var(--text); }
.player-first { font-size: 13px; font-weight: 400; letter-spacing: -.01em; }
.player-last { font-size: 16px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.player-videos { margin-top: 4px; font-size: 10.5px; color: rgba(255,255,255,.68); }
.player.no-photo .player-videos { color: var(--muted); }

/* ============================================================
   PROGNOZA
   ============================================================ */

.pred-hero {
  padding: 20px 16px 22px;
  margin-bottom: 16px;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, #0e2c5e, #061a44);
  text-align: center;
  color: #fff;
  --muted: #93a5b8;
}
.pred-hero h2 {
  margin: 8px 0 0;
  font-family: var(--sf);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.pred-hero p { margin: 8px 0 0; font-size: 13px; color: #c3d0de; }

.pred-card .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pred-card .head b { font-size: 12.5px; font-weight: 700; }

.pred-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.pred-row .side { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.pred-row .side strong { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-align: center; }

.pred-score { display: flex; align-items: center; gap: 8px; }
.pred-score > span { font-size: 17px; font-weight: 700; color: var(--muted); }

.stepper { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stepper button {
  width: 30px; height: 24px;
  border-radius: 7px;
  border: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--dim);
  transition: border-color .16s, color .16s;
}
.stepper button:hover { border-color: var(--blue); color: var(--text); }
.stepper b {
  font-family: var(--sf);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  text-align: center;
}

.rules { margin: 10px 0 0; padding-left: 20px; }
.rules li { margin-bottom: 9px; font-size: 13.5px; line-height: 1.5; }
.rules-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.rules-note .ic { color: var(--gold); flex: none; margin-top: 1px; }

/* ---- profil igrača ---- */
.pl-hero {
  position: relative;
  aspect-ratio: 4 / 5;
  margin-bottom: 14px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(170deg, #16233c, #0a1424);
}
.pl-hero.no-photo { background: linear-gradient(170deg, #e9ecf2, #ccd4e0); }
.pl-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pl-mark {
  position: absolute; top: 44%; left: 50%;
  width: 72%; transform: translate(-50%, -50%);
  opacity: .18;
}
.pl-hero-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 20px 20px 22px;
  background: linear-gradient(0deg, rgba(4,10,20,.92), rgba(4,10,20,0));
  font-family: var(--sf);
  color: #fff;
}
.pl-hero.no-photo .pl-hero-body {
  background: linear-gradient(0deg, rgba(255,255,255,.96), rgba(255,255,255,0));
  color: var(--text);
}
.pl-hero-num {
  display: block;
  font-size: 13px; font-weight: 800; letter-spacing: .1em;
  color: var(--gold-hi);
}
.pl-hero.no-photo .pl-hero-num { color: #8f6c1c; }
.pl-hero-first { display: block; margin-top: 8px; font-size: 19px; font-weight: 400; letter-spacing: -.015em; }
.pl-hero-last { display: block; font-size: 34px; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; }
.pl-hero-meta { display: block; margin-top: 9px; font-size: 12.5px; opacity: .78; }

.pl-stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; text-align: center; }
.pl-stats strong { display: block; font-family: var(--sf); font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.pl-stats span { display: block; margin-top: 4px; font-size: 8.5px; font-weight: 700; letter-spacing: .12em; color: var(--muted); }
.pl-bio { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--dim); }

/* ---- skupine u izborniku ---- */
.menu-group {
  margin: 26px 0 6px;
  font-family: var(--sf);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--muted);
  opacity: 0;
  transform: translateY(8px);
}
.menu-list > .menu-group:first-child { margin-top: 0; }
.menu.open .menu-group {
  animation: menuIn .42s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: calc(var(--i) * 26ms + 60ms);
}
.menu-item { padding: 11px 0; }
@media (prefers-reduced-motion: reduce) {
  .menu.open .menu-group { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   FAN SHOP
   ============================================================ */

.product .shot { position: relative; }
.tag-hit, .tag-z {
  position: absolute; top: 8px; left: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  font-style: normal;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
}
.tag-hit { background: var(--live); color: #fff; }
.tag-z { background: linear-gradient(180deg, #edd08a, #c9a24e); color: #3a2a05; }

/* kupi po igracu */
.pshop {
  position: relative;
  flex: 0 0 132px;
  aspect-ratio: 3 / 4;
  padding: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  scroll-snap-align: start;
  background: linear-gradient(170deg, #eef1f6, #d8dee8);
  transition: transform .14s;
}
.pshop:active { transform: scale(.98); }
.pshop img {
  position: absolute; top: 38%; left: 50%;
  width: 76%; transform: translate(-50%, -50%);
  opacity: .2;
}
.pshop-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 11px 12px; text-align: left; }
.pshop-body b { display: block; font-family: var(--sf); font-size: 13px; font-weight: 700; letter-spacing: -.015em; }
.pshop-cta { display: block; margin-top: 5px; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; color: var(--blue); }

/* ---- detalj proizvoda ---- */
.pd-shot {
  display: grid; place-items: center;
  aspect-ratio: 1;
  margin-bottom: 14px;
  border-radius: var(--r-md);
  background: linear-gradient(165deg, #f2f4f8, #e2e7ef);
  font-size: 96px;
}
.pd-info h2 { margin: 0; font-family: var(--sf); font-size: 24px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.pd-price { margin-top: 8px; font-family: var(--sf); font-size: 22px; font-weight: 600; color: var(--gold); }

.pd-block { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.pd-label { font-family: var(--sf); font-size: 14px; font-weight: 600; margin-bottom: 11px; }
.pd-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-opt {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-family: var(--sf);
  font-size: 13.5px;
  color: var(--dim);
  transition: border-color .16s, background .16s, color .16s;
}
.pd-opt:hover { border-color: var(--muted); }
.pd-opt.on { border-color: var(--blue); background: rgba(20,71,156,.07); color: var(--blue); font-weight: 600; }

.pd-players { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.pd-player {
  padding: 8px 13px;
  border-radius: 8px;
  border: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--dim);
}
.pd-player.on { border-color: var(--blue); background: rgba(20,71,156,.07); color: var(--blue); font-weight: 600; }
.pd-mine {
  margin-top: 12px; padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--panel-hi);
  border: 1px dashed var(--line);
  font-family: var(--sf);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  letter-spacing: .04em;
}
.pd-note {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 18px 0 0; padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.pd-note .ic { color: var(--gold); flex: none; margin-top: 1px; }

/* partner koji udvostručuje donacije — dokaz, ne baner */
.match-note {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 12px 0 0; padding-top: 11px;
  border-top: 1px solid var(--line-soft);
  font-size: 11.5px; line-height: 1.45; color: var(--muted);
}
.match-note .ic { color: var(--gold); flex: none; margin-top: 1px; }

/* ============================================================
   BRAND PLOHA — Hajdukova mornarička
   Samo ekrani o PRIPADNOSTI: Passport, My Legacy, Dobra djela.
   Ne kalendar i ne shop — ondje je bijelo bolje za skeniranje i
   za studijsku fotografiju proizvoda snimljenu na bijelom.
   ============================================================ */

.app.brand {
  --panel:      rgba(3,16,40,0.24);
  --panel-hi:   rgba(3,16,40,0.16);
  --line:       rgba(255,255,255,.17);
  --line-soft:  rgba(255,255,255,.11);
  --track:      rgba(255,255,255,.2);
  --glass:      rgba(11,42,94,.86);


  --gold:       #dcb56a;
  --gold-hi:    #f0d79a;
  --blue:       #7fb4ff;
  --green:      #6ee7a0;

  --text:       #ffffff;
  --dim:        #cfdcef;
  --muted:      #9db3d2;

  background:
    radial-gradient(120% 80% at 50% 0%, #17408a 0%, transparent 58%),
    linear-gradient(180deg, #0f3576 0%, #0a2454 46%, #051633 100%);
  color: #fff;
}

.app.brand .topbar {
  background: linear-gradient(180deg, rgba(15,53,118,.96) 62%, rgba(15,53,118,0) 100%);
}
.app.brand .tabbar {
  background: rgba(5,22,51,.94);
  border-top-color: rgba(255,255,255,.14);
}
.app.brand .tabbar button { color: #8fa8ca; }
.app.brand .tabbar button.on { color: #fff; }
.app.brand .icon-btn:hover { color: #fff; background: rgba(255,255,255,.1); }

/* kartice postaju staklo umjesto bijelih ploha */
.app.brand .panel,
.app.brand .rows,
.app.brand .f-card {
  box-shadow: none;
  backdrop-filter: blur(10px);
}
.app.brand .rows button { background: rgba(3,16,40,0.24); }
.app.brand .rows button:hover { background: rgba(3,16,40,0.36); }
.app.brand .fx-row { background: rgba(3,16,40,0.24); }

/* blokovi koji su bili tamni ne smiju biti tamni NA plavom */
.app.brand .impact-hero,
.app.brand .riznica-hero,
.app.brand .quiz-hero {
  background: rgba(3,16,40,0.24);
  backdrop-filter: blur(10px);
}
.app.brand .ctx,
.app.brand .ctx-zaklada,
.app.brand .ctx-biz {
  background: rgba(3,16,40,0.24);
  backdrop-filter: blur(10px);
}
.app.brand .memory { border-color: rgba(255,255,255,.16); }
.app.brand .avatar { background: rgba(255,255,255,.12); color: var(--gold-hi); }
.app.brand .hex::before { background: linear-gradient(165deg, #16457f, #0c2a5c); }
.app.brand .btn-ghost { border-color: rgba(255,255,255,.28); color: #fff; }
.app.brand .btn-ghost:hover { border-color: #fff; }
.app.brand .qr-holder .qr { border: 0; box-shadow: 0 8px 26px rgba(0,0,0,.3); }
.app.brand .pill { border-color: rgba(255,255,255,.24); }
.app.brand .film .controls button { border-color: rgba(255,255,255,.24); }
.app.brand .contrib-impact,
.app.brand .cup-note,
.app.brand .match-note { color: var(--dim); }

/* ============================================================
   MEĐUSOBNI SUSRETI I STRIJELCI
   ============================================================ */

.h2h-sum { padding: 18px 16px 16px; }
.h2h-nums { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.h2h-nums strong { display: block; font-family: var(--sf); font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.h2h-nums span { display: block; margin-top: 4px; font-size: 8px; font-weight: 700; letter-spacing: .11em; color: var(--muted); }

.h2h-form { display: flex; gap: 6px; justify-content: center; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line-soft); }
.h2h-form i {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}
.h2h-form i.w { background: var(--green); }
.h2h-form i.d { background: var(--muted); }
.h2h-form i.l { background: var(--live); }

.h2h-row .teams { font-size: 12.5px; }
.h2h-score {
  font-family: var(--sf);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  padding: 4px 9px;
  border-radius: 7px;
}
.h2h-score.w { background: rgba(21,127,67,.12); color: var(--green); }
.h2h-score.d { background: rgba(0,0,0,.06); color: var(--muted); }
.h2h-score.l { background: rgba(201,48,44,.1); color: var(--live); }

.table-wrap td small { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 400; color: var(--muted); }

.src-note {
  display: flex; align-items: center; gap: 7px;
  margin: 16px 0 0;
  font-size: 11px;
  color: var(--muted);
}
.src-note .ic { color: var(--gold); flex: none; }

/* sekcije na naslovnici — svaka ima naslov i vlastiti ritam */
.sec { margin-bottom: 26px; }
.sec .section-head { margin: 0 0 12px; padding: 0 14px; }
.sec .feed { gap: 10px; }
.app.wide .content > .sec > .feed { padding: 0 14px; }

/* ============================================================
   PREČACI NA VRHU NASLOVNICE
   Diskretno: manji od filtera, bez obruba, samo tekst.
   Ne natječu se s hero fotografijom ispod.
   ============================================================ */

.jumps {
  display: flex;
  gap: 7px;
  padding: 2px 14px 14px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.jumps::-webkit-scrollbar { display: none; }

.jump {
  flex: none;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--panel-hi);
  border: 1px solid var(--line-soft);
  font-family: var(--sf);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.008em;
  color: var(--dim);
  transition: background .16s, color .16s, transform .12s;
}
.jump:hover { background: var(--panel); color: var(--text); }
.jump:active { transform: scale(.96); }

/* dva gumba na kartici odbrojavanja */
.today-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 15px; }
.today-actions .today-cta { margin-top: 0; }
.today-cta.ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,.32);
  color: #fff;
}
.today-cta.ghost:hover { border-color: #fff; filter: none; }

/* ============================================================
   PREČACI — lijepe se na vrh dok se skrola
   ============================================================ */

.jumps {
  position: sticky;
  top: 0;
  z-index: 15;
  padding: 10px 14px 12px;
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line-soft);
}
.app.wide .content { padding-top: 0; }

/* ---- odbrojavanje u herou ---- */
.hero-big .countdown { margin: 14px 0 2px; }
.hero-big .countdown span {
  min-width: 52px;
  padding: 8px 7px 7px;
  background: rgba(4,14,30,.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14);
}
.hero-big .countdown b { font-size: 21px; }

.hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 14px;
}
.hero-links button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sf);
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255,255,255,.82);
  transition: color .16s;
}
.hero-links button:hover { color: #fff; }
.hero-links .ic { opacity: .8; }

/* ---- niz proizvoda na naslovnici ---- */
.prail {
  flex: 0 0 138px;
  padding: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  scroll-snap-align: start;
  text-align: left;
  transition: transform .14s, border-color .16s;
}
.prail:active { transform: scale(.98); }
.prail:hover { border-color: var(--blue); }
.prail-shot {
  display: grid;
  place-items: center;
  height: 118px;
  font-size: 46px;
  background: linear-gradient(165deg, #f2f4f8, #e4e8ef);
}
.prail-body { display: block; padding: 11px 12px 13px; }
.prail-body b {
  display: block;
  font-family: var(--sf);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.prail-price { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--gold); }

/* kalendar: odigrane utakmice nose rezultat, nadolazeće točku */
.cal-cell.played { background: var(--panel-hi); }
.cal-cell.played.w { border-color: rgba(21,127,67,.4); }
.cal-cell.played.l { border-color: rgba(201,48,44,.35); }
.cal-res {
  position: absolute;
  top: 4px; left: 0; right: 0;
  font-family: var(--sf);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.cal-cell.played.w .cal-res { color: var(--green); }
.cal-cell.played.d .cal-res { color: var(--muted); }
.cal-cell.played.l .cal-res { color: var(--live); }
.cal-legend i.won { background: var(--green); }
.cal-legend i.lost { background: var(--live); }
.pill.score { border-color: var(--line); font-weight: 700; font-variant-numeric: tabular-nums; }


/* ============================================================
   Zastita od vodoravnog pomicanja stranice
   Vodoravno se smiju micati SAMO nizovi (.rail, .chips, .jumps),
   nikad sam sadrzaj. Ovo je pojas i naramenice.
   ============================================================ */

.app, .splash { max-width: var(--shell); overflow-x: hidden; }
.rail, .chips, .jumps, .mo-feed, .pd-players, .pd-opts { max-width: 100%; }
.hero-big, .today, .sec, .feed, .panel { max-width: 100%; }
img, svg, video { max-width: 100%; }

/* ============================================================
   AI COMPANION
   ============================================================ */

.ai-hero {
  padding: 22px 18px 24px;
  margin-bottom: 16px;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, #0e2c5e, #061a44);
  text-align: center;
  color: #fff;
}
.ai-mark { display: flex; justify-content: center; color: var(--gold-hi); margin-bottom: 8px; }
.ai-hero h2 { margin: 0; font-family: var(--sf); font-size: 24px; font-weight: 700; letter-spacing: -.025em; }
.ai-hero p { margin: 8px 0 0; font-size: 13px; color: #c3d0de; line-height: 1.5; }

.ai-sugg { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ai-sugg button {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-family: var(--sf);
  font-size: 12.5px;
  color: var(--dim);
  text-align: left;
  transition: border-color .16s, color .16s;
}
.ai-sugg button:hover { border-color: var(--blue); color: var(--text); }

/* ============================================================
   GLAS NAVIJAČA
   ============================================================ */

.voice-id { padding: 16px; }
.voice-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--green);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--green);
}
.voice-id .switch-row { border-bottom: 0; padding-bottom: 0; }

.poll h3 { margin: 9px 0 0; font-family: var(--sf); font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.018em; }
.poll-note { margin: 7px 0 0; font-size: 12px; color: var(--muted); }
.poll-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 15px; }

.poll-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 15px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  overflow: hidden;
  text-align: left;
  transition: border-color .16s;
}
.poll-opt:not([disabled]):hover { border-color: var(--blue); }
.poll-opt.on { border-color: var(--blue); }
.poll-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: rgba(20,71,156,.1);
  transition: width .5s cubic-bezier(.22,.61,.36,1);
}
.poll-opt.on .poll-bar { background: rgba(20,71,156,.2); }
.poll-label { position: relative; flex: 1; font-size: 13.5px; }
.poll-opt.on .poll-label { font-weight: 600; }
.poll-pct {
  position: relative;
  font-family: var(--sf);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.poll-opt.on .poll-pct { color: var(--blue); }

.poll-receipt, .poll-hint {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 13px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 11.5px;
  color: var(--muted);
}
.poll-receipt .ic { color: var(--green); flex: none; }
.poll-receipt b { color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.bubble.long { max-width: 100%; font-size: 13px; line-height: 1.65; }
.bubble.long br + br { line-height: 2.2; }
.bubble.typing { display: flex; gap: 5px; align-items: center; padding: 15px 16px; }
.bubble.typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted);
  animation: dot 1.2s ease-in-out infinite;
}
.bubble.typing i:nth-child(2) { animation-delay: .16s; }
.bubble.typing i:nth-child(3) { animation-delay: .32s; }
@keyframes dot { 0%,60%,100% { opacity: .3; } 30% { opacity: 1; } }

/* ---- forma zadnjih pet ---- */
.form-row { display: flex; gap: 7px; margin-bottom: 6px; overflow-x: auto; scrollbar-width: none; }
.form-row::-webkit-scrollbar { display: none; }
.form-cell {
  flex: 1 0 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 11px 6px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--panel);
  border-top-width: 3px;
}
.form-cell.w { border-top-color: var(--green); }
.form-cell.d { border-top-color: var(--muted); }
.form-cell.l { border-top-color: var(--live); }
.fc-opp { font-size: 8.5px; font-weight: 800; letter-spacing: .1em; color: var(--muted); }
.fc-res { font-family: var(--sf); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fc-min { font-size: 10px; color: var(--muted); }
.fc-rate {
  margin-top: 2px; padding: 2px 7px;
  border-radius: 5px;
  background: rgba(20,71,156,.1);
  font-family: var(--sf);
  font-size: 11px; font-weight: 700; color: var(--blue);
}
.fc-ga { font-size: 9px; font-weight: 800; letter-spacing: .06em; color: var(--gold); }

/* ---- usporedba s prosjekom pozicije ---- */
.cmp { margin-bottom: 16px; }
.cmp:last-child { margin-bottom: 0; }
.cmp-cap { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.cmp-cap span { font-size: 12.5px; color: var(--dim); }
.cmp-cap b { font-family: var(--sf); font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.cmp-track {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: var(--track);
  overflow: visible;
}
.cmp-track i.me {
  display: block; height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--blue), var(--blue-deep));
}
.cmp-track i.avg {
  position: absolute; top: -3px;
  width: 2px; height: 14px;
  background: var(--gold);
  border-radius: 1px;
}
.cmp-foot { margin-top: 6px; font-size: 10.5px; color: var(--muted); }

/* ---- enciklopedija ---- */
.enc-search { position: relative; margin-bottom: 14px; }
.enc-search .field { margin-bottom: 0; padding-right: 44px; }
.enc-clear {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%) rotate(45deg);
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  color: var(--muted);
}
.enc-clear:hover { color: var(--text); background: rgba(0,0,0,.05); }
.table-wrap td small { display: block; margin-top: 2px; font-size: 10.5px; color: var(--muted); }
.trophy-tile { align-items: center; text-align: center; }
.trophy-tile .glyph { color: var(--gold); }
.tr-count { font-family: var(--sf); font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.tr-total { font-family: var(--sf); font-size: 44px; font-weight: 700; letter-spacing: -.03em; color: var(--gold); }

/* ============================================================
   DIVOVSKE KRATICE — grb PREKO slova
   Ta jedna odluka nosi najveci dio dojma: kompozicija dobiva
   dubinu umjesto urednog reda jedan-do-drugoga.
   ============================================================ */

.hero-kicker {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .24em;
  color: rgba(255,255,255,.72);
  text-align: center;
}

.vs-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 2px 0 4px;
}

.vs-side { position: relative; display: block; }

.vs-code {
  display: block;
  font-family: "Anton", var(--sf);
  font-size: clamp(56px, 19vw, 84px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.01em;
  color: #fff;
  text-shadow: 0 4px 26px rgba(2,9,20,.7);
}

.vs-crest {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -46%);
  pointer-events: none;
}
.vs-crest-img {
  width: clamp(46px, 16vw, 70px);
  height: clamp(46px, 16vw, 70px);
  object-fit: contain;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.55));
}

.vs-x {
  flex: none;
  padding: 0 4px;
  font-family: var(--sf);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(255,255,255,.85);
}

.vs-names {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 12px;
  font-size: 12px;
  color: rgba(255,255,255,.82);
}
.vs-names span { flex: 1; text-align: center; }

.vs-when {
  margin: 0;
  text-align: center;
  font-family: var(--sf);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.vs-venue {
  margin: 12px 0 0;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: .16em;
  color: rgba(255,255,255,.62);
}

.countdown.wide { justify-content: center; gap: 6px; margin: 14px 0 0; }
.countdown.wide span { min-width: 0; flex: 1; max-width: 74px; }

.hero-big .hero-big-seat { align-self: center; margin-top: 14px; }
.hero-big-actions.stacked { flex-direction: column; gap: 9px; margin-top: 16px; }
.hero-big-actions.stacked .btn { width: 100%; padding: 15px 16px; border-radius: 999px; font-size: 12.5px; }
.hero-links { justify-content: center; }

.btn-glass {
  border: 1px solid rgba(255,255,255,.34);
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  color: #fff;
}
.btn-glass:hover { background: rgba(255,255,255,.18); }

.hero-big-body { text-align: center; }
.hero-big .hero-big-body > .hero-links { margin-top: 16px; }

/* ============================================================
   KARTICE REZULTATA
   Jedna struktura za sve, suptilna dijagonalna tekstura,
   rezultat u uokvirenom polju s oznakom stanja.
   ============================================================ */

.res-card {
  position: relative;
  margin-bottom: 14px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px),
    linear-gradient(160deg, #164490, #08234f);
  color: #fff;
}
.res-card.played { background:
  repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 26px),
  linear-gradient(160deg, #113672, #061a3c); }

.res-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 16px 4px;
  font-size: 11px;
  letter-spacing: .18em;
}
.res-top b { font-weight: 800; }
.res-top span { color: rgba(255,255,255,.78); }

.res-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 6px;
}
.res-side { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.res-side span { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-align: center; }
.res-crest { width: 48px; height: 48px; object-fit: contain; }

.res-score {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1.5px solid rgba(255,255,255,.55);
  border-radius: 10px;
}
.res-score b {
  font-family: var(--sf);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.res-score b.t { font-size: 22px; letter-spacing: -.01em; }
.res-score i {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  color: rgba(255,255,255,.85);
}

.res-venue {
  padding: 0 16px 14px;
  text-align: center;
  font-size: 10px;
  letter-spacing: .14em;
  color: rgba(255,255,255,.78);
}

.res-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 16px;
  background: rgba(3,16,40,.4);
}
.res-actions .btn { border-radius: 999px; padding: 14px 16px; }

/* ============================================================
   KARTICA UTAKMICE
   Jedna struktura za nadolazece i odigrane. Boja obruba nosi ishod.
   ============================================================ */

.mc-card {
  position: relative;
  margin-bottom: 14px;
  border-radius: var(--r-lg);
  overflow: hidden;
  color: #fff;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px),
    linear-gradient(160deg, #164490, #08234f);
}
.mc-card.played {
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 26px),
    linear-gradient(160deg, #113672, #061a3c);
}

.mc-top {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 15px 16px 2px;
  font-size: 10.5px;
  letter-spacing: .16em;
}
.mc-top b { font-weight: 800; }
.mc-top span { color: rgba(255,255,255,.78); }
.mc-flag {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  font-style: normal;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .12em;
}
.mc-flag.w { background: rgba(110,231,160,.22); color: #b6f2cf; }
.mc-flag.d { background: rgba(255,255,255,.16); color: #dbe6f3; }
.mc-flag.l { background: rgba(255,120,112,.2); color: #ffc2bd; }
.mc-flag.t { background: rgba(236,216,176,.2); color: #f0dcaf; }

.mc-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 6px;
}
.mc-side { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.mc-side span { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-align: center; }
.mc-crest { width: 50px; height: 50px; object-fit: contain; }

.mc-score {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1.5px solid rgba(255,255,255,.55);
  border-radius: 10px;
}
.mc-score b {
  font-family: var(--sf);
  font-size: 32px; font-weight: 700; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.mc-score b.t { font-size: 21px; letter-spacing: -.01em; }
.mc-score i { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .1em; color: rgba(255,255,255,.85); }

.mc-venue {
  padding: 0 16px 12px;
  text-align: center;
  font-size: 10px; letter-spacing: .14em;
  color: rgba(255,255,255,.78);
}

.mc-scorers {
  display: flex; align-items: center; gap: 8px;
  margin: 0 16px 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: rgba(3,16,40,.34);
  font-size: 11.5px;
  line-height: 1.45;
}
.mc-scorers .ic { flex: none; color: var(--gold-hi); }

.mc-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 0 16px 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,.16);
  border-bottom: 1px solid rgba(255,255,255,.16);
  text-align: center;
}
.mc-stats b { display: block; font-family: var(--sf); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.mc-stats span { display: block; margin-top: 3px; font-size: 8px; font-weight: 700; letter-spacing: .1em; color: rgba(255,255,255,.72); }

.mc-actions {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 14px 16px;
  background: rgba(3,16,40,.42);
}
.mc-actions .btn { border-radius: 999px; padding: 14px 16px; }
.mc-actions .btn[disabled] { opacity: .45; cursor: not-allowed; }

.cal-picked { margin-top: 16px; }

/* ============================================================
   SPONZORSKI SLOJ
   Brand je uvijek na DNU kartice, malim slovom. Funkcija je glavna,
   partner je potpis — ne obrnuto.
   ============================================================ */

.sec-plain { padding: 0 14px; margin-bottom: 22px; }
.sec .sec-plain { margin-top: 10px; margin-bottom: 0; padding: 0; }

/* ---- trenutak utakmice ---- */
.moment {
  padding: 18px 18px 16px;
  border-radius: var(--r-md);
  border: 1px solid rgba(201,162,78,.5);
  background:
    radial-gradient(130% 100% at 10% 0%, rgba(201,162,78,.2), transparent 62%),
    linear-gradient(160deg, #1a3f2c, #0d2418);
  color: #fff;
}
.moment-top {
  display: flex; align-items: center; gap: 7px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .18em;
  color: var(--gold-hi);
}
.moment-title { margin: 11px 0 0; font-family: var(--sf); font-size: 22px; font-weight: 700; letter-spacing: -.022em; }
.moment-offer { margin: 6px 0 0; font-size: 14px; color: rgba(255,255,255,.9); }
.moment-bar {
  height: 6px; margin-top: 14px;
  border-radius: 3px;
  background: rgba(255,255,255,.18);
  overflow: hidden;
}
.moment-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #edd08a, #c9a24e); }
.moment-count { margin-top: 8px; font-size: 11.5px; color: rgba(255,255,255,.82); }
.moment-count b { font-family: var(--sf); font-weight: 700; }
.moment .btn { margin-top: 14px; }
.moment-code {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px dashed rgba(236,216,176,.6);
  font-family: var(--sf);
  font-size: 13px; font-weight: 700; letter-spacing: .08em;
  color: var(--gold-hi);
}
.moment-note { margin: 12px 0 0; font-size: 11px; color: rgba(255,255,255,.66); line-height: 1.45; }
.moment-by {
  display: flex; align-items: center; gap: 9px;
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: 11px; letter-spacing: .04em;
  color: rgba(255,255,255,.66);
}

/* Potpis partnera: tipografski znak umjesto tudjeg logotipa.
   Pravi logotipi traze pismenu dozvolu vlasnika znaka. */
.pbadge {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.1);
  font-family: var(--sf);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: #fff;
  white-space: nowrap;
}
.pbadge.light {
  border-color: var(--line);
  background: var(--panel-hi);
  color: var(--text);
}

/* ---- zajednički cilj ---- */
.cgoal {
  padding: 18px;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, #0e2c5e, #061a44);
  color: #fff;
}
.cgoal-top {
  display: flex; align-items: center; gap: 7px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .16em;
  color: #9dc0ff;
}
.cgoal h3 { margin: 11px 0 0; font-family: var(--sf); font-size: 21px; font-weight: 700; letter-spacing: -.022em; }
.cgoal p { margin: 7px 0 0; font-size: 12.5px; color: #c3d0de; line-height: 1.5; }
.cgoal-num { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
.cgoal-num b { font-family: var(--sf); font-size: 27px; font-weight: 700; letter-spacing: -.03em; }
.cgoal-num span { font-size: 11.5px; color: #9db3d2; }
.cgoal-bar {
  position: relative;
  height: 22px; margin-top: 10px;
  border-radius: 11px;
  background: rgba(255,255,255,.14);
  overflow: hidden;
}
.cgoal-bar i { display: block; height: 100%; border-radius: 11px; background: linear-gradient(90deg, #4d9bff, #2a7ae0); }
.cgoal-bar span {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--sf); font-size: 11px; font-weight: 700;
}
.cgoal-prize {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: 12.5px; line-height: 1.5; color: #dbe6f3;
}
.cgoal-prize .ic { color: var(--gold-hi); flex: none; margin-top: 1px; }
.cgoal-prize b { color: #fff; }
.cgoal-by {
  display: flex; align-items: center; gap: 9px;
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: 11px; color: rgba(255,255,255,.66);
}
.cgoal-how {
  margin: 10px 0 0;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.08);
  font-size: 11.5px;
  line-height: 1.5;
  color: #c3d0de;
}
.cgoal .btn { margin-top: 14px; }
.cgoal-in {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 12px 14px;
  border-radius: var(--r-sm);
  background: rgba(110,231,160,.14);
  font-size: 12.5px; font-weight: 600; color: #b6f2cf;
}

/* ---- misije ---- */
.mission { align-items: center; }
.mission-ic { display: flex; color: var(--muted); flex: none; }
.mission.done .mission-ic { color: var(--green); }
.mission-pts {
  display: flex; align-items: center;
  font-family: var(--sf); font-size: 14px; font-weight: 700;
  color: var(--gold);
}
.mission.done .mission-pts { color: var(--green); }
.mission.done .teams { opacity: .72; }

/* ---- B2B pregled ---- */
.dash-hero {
  padding: 20px 18px 22px;
  margin-bottom: 16px;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, #22262e, #14161a);
  color: #fff;
}
.dash-hero h2 { margin: 8px 0 0; font-family: var(--sf); font-size: 22px; font-weight: 700; letter-spacing: -.024em; }
.dash-hero p { margin: 7px 0 0; font-size: 12.5px; color: #a9b0bb; }
.dash-row { align-items: center; }
.dash-v { font-family: var(--sf); font-size: 19px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.dash-no { margin: 0; padding-left: 20px; }
.dash-no li { margin-bottom: 9px; font-size: 13px; line-height: 1.5; color: var(--dim); }
.dash-pitch { margin-top: 14px; }
.dash-old, .dash-new { margin: 10px 0 0; font-size: 13px; line-height: 1.55; }
.dash-old { color: var(--muted); }
.dash-old em { text-decoration: line-through; }
.dash-new { color: var(--text); font-weight: 600; }
.dash-new em { font-style: normal; color: var(--blue); }

/* ---- izazov prije utakmice ---- */
.chal {
  padding: 18px;
  border-radius: var(--r-md);
  border: 1px solid rgba(77,155,255,.4);
  background:
    radial-gradient(130% 100% at 90% 0%, rgba(77,155,255,.2), transparent 60%),
    linear-gradient(160deg, #14315c, #0a1f3e);
  color: #fff;
}
.chal-top {
  display: flex; align-items: center; gap: 7px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .18em; color: #9dc0ff;
}
.chal h3 { margin: 11px 0 0; font-family: var(--sf); font-size: 21px; font-weight: 700; letter-spacing: -.022em; }
.chal-sub { margin: 6px 0 0; font-size: 12px; color: #a9c0dc; }

.chal-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.chal-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.07);
  color: #fff;
  transition: border-color .16s, background .16s;
}
.chal-opt:hover { border-color: rgba(255,255,255,.5); }
.chal-opt.on { border-color: #7fb4ff; background: rgba(77,155,255,.26); }
.chal-opt.wide { width: 100%; justify-content: center; }
.chal-n { font-family: var(--sf); font-size: 13px; font-weight: 800; color: var(--gold-hi); }
.chal-name { font-size: 13px; font-weight: 600; }

.chal-prize {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 15px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.chal-prize .ic { color: var(--gold-hi); flex: none; margin-top: 2px; }
.chal-prize b { display: block; font-size: 13.5px; font-weight: 700; }
.chal-prize span { display: block; margin-top: 3px; font-size: 11.5px; color: #a9c0dc; }
.chal-count { margin: 13px 0 0; font-size: 11.5px; color: #a9c0dc; }
.chal-in {
  display: flex; align-items: center; gap: 8px;
  margin-top: 13px; padding: 12px 14px;
  border-radius: var(--r-sm);
  background: rgba(110,231,160,.14);
  font-size: 12.5px; font-weight: 600; color: #b6f2cf;
}

/* ---- ponude uz utakmicu ---- */
.offer-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 15px;
  background: var(--panel);
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  transition: background .16s;
}
.offer-row:last-child { border-bottom: 0; }
.offer-row:hover { background: var(--panel-hi); }
.offer-main { flex: 1; min-width: 0; }
.offer-main b { display: block; font-size: 13.5px; font-weight: 600; }
.offer-main small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.offer-main em {
  display: inline-block; margin-top: 6px;
  font-style: normal; font-size: 9.5px; font-weight: 800;
  letter-spacing: .12em; color: var(--muted);
}
.offer-left { text-align: right; font-family: var(--sf); font-size: 17px; font-weight: 700; }
.offer-left i { display: block; font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: .1em; color: var(--muted); }
.offer-code {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px dashed var(--gold);
  font-family: var(--sf);
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  color: var(--gold);
  white-space: nowrap;
}
.offer-row.taken .offer-main b { opacity: .7; }

/* pravilo stoji prije brojki, da nitko ne mora pogađati */
.cgoal-rule {
  display: inline-block;
  margin-top: 12px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  font-family: var(--sf);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.cgoal-counts, .cgoal-why {
  margin-top: 15px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.cgoal-counts-h {
  margin-bottom: 11px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .16em;
  color: #9dc0ff;
}
.cgoal-count { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 11px; }
.cgoal-count .ic { color: var(--gold-hi); flex: none; margin-top: 1px; }
.cgoal-count b { display: block; font-size: 13px; font-weight: 600; }
.cgoal-count small { display: block; margin-top: 2px; font-size: 11.5px; color: #a9c0dc; }
.cgoal-mine {
  display: flex; align-items: center; gap: 8px;
  margin-top: 15px; padding: 12px 14px;
  border-radius: var(--r-sm);
  background: rgba(110,231,160,.14);
  font-size: 12.5px; color: #b6f2cf;
}
.cgoal-mine b { color: #fff; }
.cgoal-why ul { margin: 0; padding-left: 18px; }
.cgoal-why li { margin-bottom: 9px; font-size: 12px; line-height: 1.5; color: #c3d0de; }

/* ============================================================
   LAUNCH
   Jedan predmet, jedan pokret, 2,4 s. Dodir preskace.
   ============================================================ */

.launch {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: var(--shell);
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 42%, #123f86 0%, #08265a 42%, #041232 100%);
}

@media (min-width: 700px) {
  .launch {
    height: calc(100dvh - 48px);
    margin: 24px auto;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 40px 90px rgba(0,0,0,.55);
  }
}

/* svjetlo koje se širi iza grba */
.launch-glow {
  position: absolute;
  top: 42%; left: 50%;
  width: 74vw; height: 74vw;
  max-width: 420px; max-height: 420px;
  transform: translate(-50%, -50%) scale(.4);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(170,151,94,.34) 0%, rgba(170,151,94,0) 66%);
  animation: lglow 2.4s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes lglow {
  0%   { transform: translate(-50%,-50%) scale(.4); opacity: 0; }
  38%  { opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1.15); opacity: .5; }
}

.launch-crest {
  position: relative;
  animation: lcrest 1.5s cubic-bezier(.16,.84,.28,1) both;
}
.launch-crest img {
  width: clamp(150px, 44vw, 215px);
  height: auto;
  filter: drop-shadow(0 18px 44px rgba(0,0,0,.55));
}
@keyframes lcrest {
  0%   { opacity: 0; transform: scale(.72); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}

.launch-word {
  margin-top: 30px;
  font-family: var(--sf);
  font-size: clamp(32px, 10vw, 42px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
  opacity: 0;
  animation: lup .8s cubic-bezier(.22,.61,.36,1) .55s forwards;
}
.launch-word b { font-weight: 300; color: rgba(255,255,255,.7); }

.launch-sub {
  margin-top: 9px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .34em;
  color: rgba(255,255,255,.62);
  opacity: 0;
  animation: lup .8s cubic-bezier(.22,.61,.36,1) .75s forwards;
}

@keyframes lup {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* tanka zlatna crta koja odbrojava do ulaska */
.launch-bar {
  position: absolute;
  left: 50%; bottom: calc(56px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: 92px; height: 2px;
  border-radius: 1px;
  background: rgba(255,255,255,.16);
  overflow: hidden;
}
.launch-bar i {
  display: block; height: 100%; width: 0;
  border-radius: 1px;
  background: linear-gradient(90deg, #aa975e, #edd08a);
  animation: lbar 2.4s linear forwards;
}
@keyframes lbar { to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .launch-glow, .launch-crest, .launch-word, .launch-sub, .launch-bar i { animation: none; opacity: 1; transform: none; }
  .launch-bar i { width: 100%; }
}

/* ============================================================
   HERO OD RUBA DO RUBA
   Fotografija ide ispod gornje trake, bez bocne margine i bez
   zaobljenog kuta. Traka lebdi preko nje s tamnim prijelazom.

   Za povratak na staro: obrisi ovaj blok i "bleed" iz shell() poziva
   na Pocetnoj i profilu igraca. Nista drugo nije dirano.
   ============================================================ */

.app.bleed .topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 30;
  background: linear-gradient(180deg, rgba(3,13,28,.62) 0%, rgba(3,13,28,.28) 62%, rgba(3,13,28,0) 100%);
  backdrop-filter: none;
  border: 0;
}
.app.bleed .topbar .icon-btn { color: rgba(255,255,255,.9); }
.app.bleed .topbar .icon-btn:hover { color: #fff; background: rgba(255,255,255,.14); }
.app.bleed .topbar .brand span { color: #fff; }
.app.bleed .topbar .brand span b { color: rgba(255,255,255,.7); }
.app.bleed .topbar .topbar-title { color: #fff; }
.app.bleed .topbar .badge { border-color: transparent; }

/* sadrzaj krece od samog vrha, ispod trake */
.app.bleed .content { padding-top: 0; }

/* hero gubi kut i margine */
.app.bleed .hero-big,
.app.bleed .pl-hero {
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
  border: 0;
}
.app.bleed .hero-big { margin-bottom: 0; }
.app.bleed .pl-hero { margin-bottom: 14px; }

/* tekst u herou mora izbjeci traku */
.app.bleed .hero-big-body { padding-top: calc(58px + env(safe-area-inset-top)); }
.app.bleed .pl-hero-body { padding-bottom: 22px; }

/* prijelaz na dnu heroa u boju stranice, bez ruba */
.app.bleed .hero-big::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 90px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(245,245,247,0), var(--ink) 92%);
}
.app.bleed .hero-big-body { position: relative; z-index: 2; }

/* precaci se lijepe tek ispod heroa */
.app.bleed .jumps { top: 0; padding-top: 14px; }

/* profil igraca: fotografija ide pod traku */
.app.bleed .pl-hero { aspect-ratio: auto; min-height: 62vh; }
.app.bleed .pl-mark { top: 48%; }