/* ============================================================
   KLADZA — vizuelni sistem
   Tokeni su ZAKLJUCANI. Ne dodavati boje van sekcije "tokeni".
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=Cinzel:wght@600&family=Lilita+One&display=swap');

/* ---------------------------------------------------------- tokeni */
:root {
  /* podloge - sve sa blagim zelenim castom (hue ~155), nikad cisto siva */
  --bg-void:    #060C0A;
  --bg-base:    #0A1310;
  --bg-panel:   #0E1A15;
  --bg-raised:  #13241D;
  --bg-inset:   #071009;

  /* zad - primarna akcija, dobitak, "zivo" */
  --jade-500: #1FA97B;
  --jade-400: #35C894;
  --jade-300: #66E0B0;
  --jade-900: #0C3A2C;

  /* zlato - vrednost, VIP, ornament */
  --gold-500: #C9A227;
  --gold-300: #E7CE84;
  --gold-900: #4A3808;

  /* cinober - gubitak, rizik, "crveni pecat" */
  --verm-500: #D6452F;
  --verm-300: #F07A63;
  --verm-900: #3E120B;

  /* aliasi koje JS koristi u inline gradijentima (dice traka) */
  --green: var(--jade-500);
  --red:   var(--verm-500);

  /* tekst */
  --text-hi:  #ECF3EF;
  --text-mid: #9DB3A9;
  --text-low: #5F7A70;
  --text-dis: #3C524A;

  /* ivice - uvek 1px */
  --line:      rgba(255,255,255,0.06);
  --line-hi:   rgba(255,255,255,0.10);
  --line-gold: rgba(201,162,39,0.35);

  /* radijusi - nema rounded-2xl na svemu */
  --r-chip: 2px;
  --r-ctl:  4px;
  --r-card: 8px;

  /* senke - skoro da ih nema */
  --sh-panel: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.45);
  --sh-modal: 0 24px 80px rgba(0,0,0,0.7);
  --glow-jade: 0 0 0 1px var(--jade-500), 0 0 24px rgba(31,169,123,0.25);

  /* motion */
  --t-press: 100ms;
  --t-state: 180ms;
  --t-enter: 280ms;
  --e-in:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --e-out: cubic-bezier(0.4, 0, 1, 1);

  /* tipografija */
  /* Archivo nosi ceo UI: grotesk sa uskim velikim slovima, ono sto se vidi
     na ozbiljnim kladionicama. Cinzel je ostao SAMO u znaku (.logo, .brand) -
     tako marka zadrzi svoj karakter, a ostatak izgleda komercijalno. */
  --f-ui:   'Archivo', system-ui, -apple-system, sans-serif;
  --f-num:  'IBM Plex Mono', ui-monospace, monospace;
  --f-disp: 'Archivo', system-ui, sans-serif;
  --f-znak: 'Cinzel', Georgia, serif;

  /* mere ljuske */
  --h-top:  56px;
  --w-rail: 72px;
  --w-live: 320px;
}

/* ---------------------------------------------------------- osnova */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--bg-void);
  color: var(--text-hi);
  font: 400 14px/1.55 var(--f-ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* SVAKI broj ide u mono, tabularno - najvaznije pojedinacno pravilo */
.num, .mono,
#balance-val, .stat .v, .stat-v, .odd-v, .bonus-progress,
input[type="number"], td.num, .pt-pay {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.01em;
}

a { color: var(--jade-300); text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
.hidden { display: none !important; }

/* fokus je uvek vidljiv */
:focus-visible {
  outline: 1px solid var(--jade-400);
  outline-offset: 2px;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-raised); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #1b3129; }

/* ---------------------------------------------------------- tekstura
   Tri sloja preko cele aplikacije. Bez njih UI izgleda kao Tailwind demo. */

/* 1. zrno */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 3. vinjeta */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.5) 100%);
}

/* 2. ornament (asanoha) - samo na header trakama i u slot sekciji */
.ornament {
  background-image:
    linear-gradient(30deg, var(--gold-500) 12%, transparent 12.5%, transparent 87%, var(--gold-500) 87.5%, var(--gold-500)),
    linear-gradient(150deg, var(--gold-500) 12%, transparent 12.5%, transparent 87%, var(--gold-500) 87.5%, var(--gold-500)),
    linear-gradient(30deg, var(--gold-500) 12%, transparent 12.5%, transparent 87%, var(--gold-500) 87.5%, var(--gold-500)),
    linear-gradient(150deg, var(--gold-500) 12%, transparent 12.5%, transparent 87%, var(--gold-500) 87.5%, var(--gold-500));
  background-size: 32px 56px;
  background-position: 0 0, 0 0, 16px 28px, 16px 28px;
  opacity: 0.03;
}

/* ---------------------------------------------------------- tipografija */
.display { font: 800 56px/1.02 var(--f-disp); letter-spacing: -0.035em; }
h1, .h1  { font: 700 30px/1.15 var(--f-ui); letter-spacing: -0.025em; }
h2, .h2  { font: 700 21px/1.25 var(--f-ui); letter-spacing: -0.015em; }
h3, .h3  { font: 600 16px/1.4 var(--f-ui); letter-spacing: -0.01em; }
.caption { font: 500 12px/1.4 var(--f-ui); letter-spacing: 0.02em; }

/* labele iznad polja i zaglavlja tabela */
.micro, .nav-label, label, th, .stat .k, .stat-k, .bonus-head, .lbl {
  font: 600 11px/1.3 var(--f-ui);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-low);
}

.numeric-xl { font: 500 44px/1 var(--f-num); font-variant-numeric: tabular-nums; }
.numeric-md { font: 500 18px/1.2 var(--f-num); font-variant-numeric: tabular-nums; }
.numeric-sm { font: 500 13px/1.2 var(--f-num); font-variant-numeric: tabular-nums; }

.note, .hint, .mala { color: var(--text-mid); font-size: 13px; }
.green { color: var(--jade-300); }
.red   { color: var(--verm-300); }
.gold  { color: var(--gold-300); }

/* ============================================================ LJUSKA */
#app {
  display: grid;
  grid-template-columns: var(--w-rail) 1fr var(--w-live);
  grid-template-rows: var(--h-top) 1fr;
  grid-template-areas: "top top top" "rail main live";
  height: 100vh;
  /* na telefonu 100vh ukljucuje i pojas iza adresne trake - dvh je stvarna
     visina, pa donja traka (i okvir kladionice) ostaju u vidnom polju */
  height: 100dvh;
  background: var(--bg-base);
}

/* ---------------------------------------------------------- top bar */
.topbar {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--h-top);
  padding: 0 16px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 40;
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid var(--gold-500);
  border-radius: var(--r-chip);
  color: var(--gold-300);
  font: 600 15px/1 var(--f-znak);
}
.brand-word {
  font: 600 15px/1 var(--f-znak);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-hi);
}
.top-spacer { flex: 1; }          /* sredina je namerno prazna */

.bal-block {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px;
  border-radius: var(--r-ctl);
  transition: background var(--t-press) var(--e-in);
}
.bal-block:hover { background: var(--bg-raised); }
.bal-coin { color: var(--gold-500); display: grid; place-items: center; }
.bal-text { text-align: right; line-height: 1.1; }
#balance-val { font-size: 18px; color: var(--text-hi); }
.bal-cur { display: block; font: 600 11px/1.3 var(--f-ui); letter-spacing: .1em; color: var(--text-low); }
.bal-chev { color: var(--text-low); opacity: 0; transition: opacity var(--t-press); }
.bal-block:hover .bal-chev { opacity: 1; }

.icon-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-ctl);
  color: var(--text-mid);
  transition: background var(--t-press), color var(--t-press);
}
.icon-btn:hover { background: var(--bg-raised); color: var(--text-hi); }

.bell { position: relative; }
.bell .dot {
  position: absolute; top: 7px; right: 8px;
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--verm-500);
}
.avatar {
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--bg-raised);
  border: 1px solid var(--line-hi);
  display: grid; place-items: center;
  font: 600 12px/1 var(--f-ui); color: var(--text-mid);
}
.avatar.vip { border-color: var(--gold-500); color: var(--gold-300); }

/* ---------------------------------------------------------- levi rail */
.rail {
  grid-area: rail;
  background: var(--bg-panel);
  border-right: 1px solid var(--line);
  padding: 8px 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.rail::-webkit-scrollbar { width: 0; }

.nav-item {
  position: relative;
  width: 100%;
  padding: 9px 4px 7px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  color: var(--text-mid);
  transition: background var(--t-press), color var(--t-press);
}
.nav-item .ico { display: grid; place-items: center; height: 20px; }
.nav-item .lbl {
  font: 600 9px/1.1 var(--f-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
  max-width: 64px;
  text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-item:hover { background: var(--bg-raised); color: var(--text-hi); }
.nav-item.sel { background: var(--bg-raised); color: var(--text-hi); }
/* leva ivica se uvuce animacijom */
.nav-item.sel::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--jade-500);
  transform: scaleY(1);
  animation: railIn var(--t-state) var(--e-in);
  transform-origin: center;
}
@keyframes railIn { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.nav-item.gold-item .ico { color: var(--gold-500); }
.nav-item.paused { opacity: .45; }
.nav-item .pz, .nav-item .live {
  position: absolute; top: 4px; right: 8px;
  font: 600 8px/1 var(--f-ui); letter-spacing: .08em;
}
.nav-item .live { color: var(--jade-400); }

.rail-sep { height: 1px; background: var(--line); margin: 16px 12px; }
.nav-label { padding: 12px 8px 4px; text-align: center; }

/* ---------------------------------------------------------- glavna zona */
.content {
  grid-area: main;
  overflow-y: auto;
  position: relative;
}
#view { padding: 24px 32px 64px; max-width: 1120px; margin: 0 auto; }
/* game zona je gusca od lobija */
#view.dense { padding: 16px 16px 48px; }

#announce-bar {
  margin: 0;
  padding: 10px 32px;
  background: var(--gold-900);
  border-bottom: 1px solid var(--line-gold);
  color: var(--gold-300);
  font-size: 13px;
}

/* ---------------------------------------------------------- live sidebar */
.live-side {
  grid-area: live;
  background: var(--bg-panel);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  min-height: 0;
}
.live-tabs {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.live-tabs .ornament {
  position: absolute; inset: 0; pointer-events: none;
}
.live-tab {
  padding: 12px 4px;
  font: 600 11px/1 var(--f-ui);
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--text-low);
  transition: color var(--t-press);
  position: relative;
}
.live-tab:hover { color: var(--text-mid); }
.live-tab.sel { color: var(--text-hi); }
.live-tab.sel::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 1px; background: var(--jade-500);
}
.live-body { flex: 1; overflow-y: auto; min-height: 0; }

.feed-row {
  display: grid;
  grid-template-columns: 20px 1fr auto auto;
  align-items: center; gap: 8px;
  height: 40px; padding: 0 12px;
  border-left: 1px solid transparent;
  animation: feedIn var(--t-state) var(--e-in);
}
@keyframes feedIn { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.feed-row .av {
  width: 20px; height: 20px; border-radius: 999px;
  background: var(--bg-raised);
  display: grid; place-items: center;
  font: 600 9px/1 var(--f-ui); color: var(--text-low);
}
.feed-row .nm {
  color: var(--text-mid); font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.feed-row .gm {
  font: 600 10px/1 var(--f-ui);
  padding: 3px 5px; border-radius: var(--r-chip);
  background: var(--bg-raised); color: var(--text-low);
}
.feed-row .mx, .feed-row .am {
  font-family: var(--f-num); font-variant-numeric: tabular-nums;
  font-size: 12px; text-align: right;
}
.feed-row .mx { color: var(--text-low); min-width: 46px; }
.feed-row .am { color: var(--text-low); min-width: 64px; }
.feed-row.win { border-left-color: var(--jade-500); }
.feed-row.win .am, .feed-row.win .mx { color: var(--jade-300); }

.feed-empty {
  padding: 32px 16px; text-align: center;
  color: var(--text-low); font-size: 13px;
}

/* ============================================================ DUGMAD */
.btn {
  position: relative;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--r-ctl);
  background: linear-gradient(180deg, var(--jade-400), var(--jade-500) 55%, #178A64);
  color: #04120C;                       /* taman tekst na zelenom, ne beli */
  font: 600 14px/1 var(--f-ui); letter-spacing: .01em;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22),
              inset 0 -1px 0 rgba(0,0,0,0.25),
              0 1px 2px rgba(0,0,0,0.35);
  transition: background var(--t-press) var(--e-in), transform var(--t-press),
              box-shadow var(--t-press);
}
.btn:hover:not(:disabled) { background: linear-gradient(180deg, #4BD6A4, var(--jade-400) 55%, var(--jade-500)); }
.btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}
.btn:disabled { background: var(--bg-raised); color: var(--text-dis); box-shadow: none; cursor: not-allowed; }
.btn.block { width: 100%; height: 52px; font-size: 15px; }
.btn.sm { height: 36px; padding: 0 14px; font-size: 13px; }
a.btn { text-decoration: none; }

/* Dva kontakt dugmeta u modalu za uplatu (Viber + poziv). */
.kontakt-red {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px;
}
.kontakt-red .btn.block { height: 44px; font-size: 13px; }
@media (max-width: 420px) {
  .kontakt-red { grid-template-columns: 1fr; }
}

.btn.ghost, .btn.grey {
  background: linear-gradient(180deg, #182E25, #111F19);
  color: var(--text-hi);
  border: 1px solid var(--line-hi);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.btn.ghost:hover, .btn.grey:hover { background: #172c23; border-color: var(--line-hi); }

.btn.gold {
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500) 55%, #A8871E);
  color: #150F00;
}
.btn.gold:hover:not(:disabled) { background: linear-gradient(180deg, #F2DFA6, var(--gold-300) 55%, var(--gold-500)); }

.btn.danger, .btn.red { background: linear-gradient(180deg, var(--verm-300), var(--verm-500) 55%, #B03824); color: #1A0605; }

/* dugme koje ceka rundu */
.btn.pending {
  background: var(--bg-raised); color: var(--text-mid);
  box-shadow: none; position: relative; overflow: hidden;
}
.btn.pending::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px;
  background: var(--jade-500); width: var(--p, 0%);
  transition: width 120ms linear;
}

.mini {
  padding: 0 8px; height: 26px;
  font: 600 11px/1 var(--f-ui); letter-spacing: .04em;
  color: var(--text-mid);
  border-left: 1px solid var(--line);
  transition: color var(--t-press);
}
.mini:hover { color: var(--jade-300); }

/* chip */
.chip {
  height: 28px; padding: 0 10px;
  display: inline-flex; align-items: center;
  border-radius: var(--r-chip);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  color: var(--text-mid);
  font: 500 12px/1 var(--f-ui);
  transition: color var(--t-press), border-color var(--t-press);
}
.chip:hover { color: var(--text-hi); border-color: var(--line-hi); }
.chip.sel { background: var(--jade-900); color: var(--jade-300); border-color: transparent; }

/* segmented */
.seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  height: 34px; padding: 3px;
  background: var(--bg-inset);
  border-radius: var(--r-ctl);
}
.seg button {
  border-radius: 2px;
  font: 600 12px/1 var(--f-ui);
  color: var(--text-low);
  transition: color var(--t-state);
}
.seg button.sel {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  color: var(--text-hi);
}

/* ============================================================ POLJA */
label { display: block; margin-bottom: 6px; }

input[type="text"], input[type="password"], input[type="number"],
input[type="tel"], input[type="email"], input:not([type]), textarea, select {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  color: var(--text-hi);
  transition: border-color var(--t-press);
}
textarea { height: auto; padding: 10px 12px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--jade-500); outline: none; }
input::placeholder { color: var(--text-dis); }

.field { margin-bottom: 16px; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap input { padding-right: 132px; font-size: 18px; }
.input-wrap .suffix {
  position: absolute; left: 12px;
  color: var(--gold-500); font-size: 13px; pointer-events: none;
}
.input-wrap input { padding-left: 42px; }
.input-wrap .mini { position: relative; }
.input-wrap > .mini:nth-of-type(1) { position: absolute; right: 92px; }
.input-wrap > .mini:nth-of-type(2) { position: absolute; right: 48px; }
.input-wrap > .mini:nth-of-type(3) { position: absolute; right: 4px; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 12px; padding: 0;
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 32px;
  background: var(--bg-raised);
  border: 1px solid var(--gold-500);
  border-radius: 2px;
  cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 12px; height: 32px;
  background: var(--bg-raised);
  border: 1px solid var(--gold-500);
  border-radius: 2px;
}

/* ============================================================ PANELI */
.panel, .stat-card, .profil-sekcija, .bonus-box, .sport-match {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-panel);
}

.stat-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-bottom: 12px; }
.stat {
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  padding: 8px 10px;
}
.stat .k { display: block; margin-bottom: 3px; }
.stat .v { font-size: 15px; color: var(--text-hi); }
.stat .v.green { color: var(--jade-300); }

/* ============================================================ LOBI */
.lobby-title {
  font: 600 22px/1.3 var(--f-ui);
  letter-spacing: -0.01em;
  margin: 32px 0 16px;
}
.lobby-title:first-child { margin-top: 0; }

.lobby-filter { display: flex; gap: 8px; margin-bottom: 24px; }

/* red 1 - crash preko celog reda */
.hero-crash {
  position: relative;
  height: 220px;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--bg-panel);
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 16px;
  transition: border-color var(--t-state);
}
.hero-crash:hover { border-color: var(--line-hi); }
.hero-crash canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-crash .hero-grad {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6,12,10,.92) 0%, rgba(6,12,10,.55) 45%, transparent 75%);
}
.hero-meta { position: absolute; left: 24px; bottom: 20px; }
.hero-meta .h1 { margin-bottom: 6px; }
.hero-live { display: flex; align-items: center; gap: 7px; color: var(--text-mid); font-size: 13px; }
.live-dot {
  width: 7px; height: 7px; border-radius: 999px; background: var(--jade-400);
  animation: pulse 1.8s var(--e-in) infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.hero-chips { position: absolute; right: 24px; bottom: 20px; display: flex; gap: 6px; }

/* red 2 - slot 2/3 + rulet 1/3 */
.lobby-duo { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px; }

.tile-slot {
  position: relative; height: 200px; overflow: hidden;
  border-radius: var(--r-card);
  border: 1px solid var(--line-gold);
  background: var(--bg-panel);
  cursor: pointer;
}
.tile-slot .orn {
  position: absolute; inset: 0; pointer-events: none; opacity: .06;
}
.tile-slot .layers { position: absolute; inset: 0; }
.tile-slot .l-bg, .tile-slot .l-sym, .tile-slot .l-frame {
  position: absolute; inset: 0;
  transition: transform 220ms var(--e-in);
  display: grid; place-items: center;
}
.tile-slot .l-sym img { width: 92px; opacity: .9; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.tile-slot .l-frame {
  border: 1px solid var(--line-gold);
  margin: 12px; border-radius: var(--r-ctl);
}
.tile-slot .name {
  position: absolute; left: 20px; bottom: 18px;
  font: 500 24px/1 var(--f-disp);
  letter-spacing: .06em;
  color: var(--gold-300);
}
.tile-slot .sub { position: absolute; left: 20px; bottom: 0; }

/* red 3+ - grid */
.lobby-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.game-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--text-mid);
  transition: transform var(--t-state) var(--e-in), border-color var(--t-state);
}
.game-tile:hover { transform: translateY(-2px); border-color: var(--line-hi); }
.game-tile:hover .ico { color: var(--jade-400); }
.game-tile .ico {
  color: var(--text-mid);
  transition: color var(--t-state);
  margin-bottom: auto; margin-top: auto;
}
.game-tile .ico svg { width: 64px; height: 64px; }
.game-tile .nm {
  position: absolute; left: 16px; bottom: 14px;
  font: 600 16px/1.2 var(--f-ui); color: var(--text-hi);
}
.game-tile .ds {
  position: absolute; right: 16px; bottom: 16px;
  font: 600 11px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-low);
}
.game-tile .badge {
  position: absolute; top: 12px; right: 12px;
  font: 600 9px/1 var(--f-ui); letter-spacing: .1em;
  padding: 4px 6px; border-radius: var(--r-chip);
  background: var(--jade-900); color: var(--jade-300);
}
.game-tile .badge.pz { background: var(--verm-900); color: var(--verm-300); }
.game-tile.paused { opacity: .5; }

/* Atribut hidden mora da pobedi svaki display iz ovog fajla. Bez ovoga
   .game-cover { display: block } gazi skrivanje iz pregledaca i filter na
   stranici Kazino "radi" (atribut se postavi), ali se nista ne sakrije. */
[hidden] { display: none !important; }

/* ------------------------------------------------ naslovna plocica igre
   Slika 3:4 sa imenom vec upisanim u nju. Na prelaz se slika malo primakne
   i dno potamni da "Igraj" bude citljivo - bez toga je plocica samo slika. */
.game-cover {
  position: relative; display: block; width: 100%;
  aspect-ratio: 3 / 4; overflow: hidden; padding: 0;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--bg-panel);
  cursor: pointer;
  transition: transform var(--t-state) var(--e-in),
              border-color var(--t-state), box-shadow var(--t-state);
}
.game-cover img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 420ms var(--e-in), filter var(--t-state);
}
.game-cover::after {                     /* blago zatamnjenje ispod dugmeta Igraj */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(4,10,8,.55), rgba(4,10,8,.15) 60%);
  opacity: 0; transition: opacity var(--t-state);
}
.game-cover:hover, .game-cover:focus-visible {
  transform: translateY(-3px);
  border-color: var(--line-gold);
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(201,162,39,.18);
}
.game-cover:hover img { transform: scale(1.045); }
.game-cover:hover::after, .game-cover:focus-visible::after { opacity: 1; }
.game-cover:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 2px; }

/* u centru, ne na dnu - na dnu slike je upisano ime igre */
.gc-igraj {
  position: absolute; left: 50%; top: 45%; z-index: 1;
  transform: translate(-50%, calc(-50% + 8px)); opacity: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--jade-500); color: #04120C;
  font: 700 12px/1 var(--f-ui); letter-spacing: .04em;
  transition: opacity var(--t-state), transform var(--t-state) var(--e-in);
}
.gc-igraj svg { fill: currentColor; }
.game-cover:hover .gc-igraj, .game-cover:focus-visible .gc-igraj {
  opacity: 1; transform: translate(-50%, -50%);
}
.gc-live, .gc-pz {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 7px; border-radius: var(--r-chip);
  font: 700 9px/1 var(--f-ui); letter-spacing: .12em;
  background: rgba(4,10,8,.72); color: var(--jade-300);
  backdrop-filter: blur(4px);
}
.gc-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--jade-400);
             animation: pulse 1.6s infinite; }
.gc-pz { left: auto; right: 10px; color: var(--verm-300); }
.game-cover.paused img { filter: grayscale(.8) brightness(.55); }

/* u lobiju: rulet stoji pored slota, iste visine - slika se sece odozgo,
   da ime (koje je na dnu slike) ostane u kadru */
.lobby-duo .game-cover { aspect-ratio: auto; height: 100%; min-height: 200px; }
.lobby-duo .game-cover img { object-position: 50% 86%; }

/* red igara u lobiju: naslovne plocice su uze od starih kvadrata */
.red-igara:has(.game-cover) { grid-auto-columns: minmax(150px, 172px); }

/* ------------------------------------------------ stranica Kazino */
.kz-zag { display: flex; align-items: flex-end; justify-content: space-between;
          gap: 16px; margin: 4px 0 18px; }
.kz-zag .h1 { font: 800 30px/1 var(--f-ui); letter-spacing: -.03em; color: var(--text-hi); }
.kz-zag .note { margin-top: 8px; }
.kz-filt { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
@media (max-width: 560px) {               /* na telefonu u jednom redu, prevlaci se */
  .kz-filt { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .kz-filt::-webkit-scrollbar { display: none; }
  .kz-cip { flex: 0 0 auto; }
}
.kz-cip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: 999px;
  background: var(--bg-panel); border: 1px solid var(--line);
  color: var(--text-mid); font: 600 13px/1 var(--f-ui);
  transition: background var(--t-state), border-color var(--t-state), color var(--t-state);
}
.kz-cip span { font: 600 11px/1 var(--f-num); color: var(--text-low); }
.kz-cip:hover { border-color: var(--line-hi); color: var(--text-hi); }
.kz-cip.sel { background: var(--jade-900); border-color: var(--jade-500); color: var(--text-hi); }
.kz-cip.sel span { color: var(--jade-300); }
.kz-grid {
  display: grid; gap: 14px;
  /* 150px daje 7 u redu na obicnom ekranu: 13 igara = 7 + 6, bez jedne
     usamljene plocice u poslednjem redu */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.kz-grid .game-tile { aspect-ratio: 3 / 4; }   /* igra bez slike u istoj mrezi */
@media (max-width: 560px) {
  .kz-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
  .kz-zag .h1 { font-size: 24px; }
  .gc-igraj { display: none; }            /* na telefonu dodir vec pokrece igru */
}
@media (prefers-reduced-motion: reduce) {
  .game-cover, .game-cover img, .gc-igraj { transition: none; }
  .game-cover:hover img { transform: none; }
}

/* ============================================================ FUTER */
.futer {
  margin-top: 40px; padding: 28px 0 8px;
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--text-mid);
}
.futer-gore {
  display: grid; gap: 28px;
  grid-template-columns: 1.4fr 0.8fr 1fr 1.4fr;
  align-items: start;
}
.futer-znak { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.futer-znak b {
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid var(--gold-500); border-radius: var(--r-chip);
  font: 600 15px/1 var(--f-znak); color: var(--gold-300);
}
.futer-znak span { font: 600 15px/1 var(--f-znak); letter-spacing: .14em; color: var(--text-hi); }
.futer-znak span i { font-style: normal; color: var(--gold-300); }
.futer-brend p { max-width: 30ch; line-height: 1.55; color: var(--text-low); }
.futer-nas {
  font: 600 10px/1 var(--f-num); letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-low); margin-bottom: 12px;
}
.futer-kol { display: flex; flex-direction: column; gap: 9px; }
.futer-kol a { color: var(--text-mid); text-decoration: none; width: fit-content;
               transition: color var(--t-state); overflow-wrap: anywhere; }
.futer-kol a:hover { color: var(--gold-300); }
.futer-cta {
  padding: 16px 18px; border-radius: var(--r-card);
  background: linear-gradient(135deg, var(--jade-900), var(--bg-panel) 70%);
  border: 1px solid var(--line-gold);
}
.futer-cta-nas { font: 700 15px/1.2 var(--f-ui); color: var(--text-hi); margin-bottom: 6px; }
.futer-cta p { color: var(--text-mid); line-height: 1.5; margin-bottom: 12px; }
.futer-cta .btn { gap: 8px; }
.futer-dole {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--text-low);
}
@media (max-width: 900px) {
  .futer-gore { grid-template-columns: 1fr 1fr; }
  .futer-brend, .futer-cta { grid-column: 1 / -1; }
}

/* ------------------------------------------------ forma za podrsku (modal) */
.pd-forma label { display: block; margin-top: 12px; }
.pd-forma textarea { min-height: 120px; }
.pd-brojac { text-align: right; font: 500 11px/1 var(--f-num); color: var(--text-low); margin: 6px 0 12px; }
.pd-status { font-size: 13px; margin-top: 10px; min-height: 18px; color: var(--text-mid); }
.pd-status.greska { color: var(--verm-300); }
.pd-gotovo { text-align: center; padding: 8px 0 4px; }
.pd-gotovo h3 { padding-right: 0; justify-content: center; text-align: center; }
.pd-gotovo .note { margin-bottom: 18px; }
.pd-krug {
  width: 56px; height: 56px; margin: 4px auto 16px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(31,169,123,.14); color: var(--jade-300);
}
.pd-krug svg { stroke-width: 2; }

/* ============================================================ IGRE */
.game-shell { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
.bet-panel {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 16px;
  box-shadow: var(--sh-panel);
  position: sticky; top: 0;
}
.game-area { min-width: 0; }
.game-canvas {
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 16px;
  min-height: 260px;
  display: grid; place-items: center;
}

.quick-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin-bottom: 16px; }

.result-line {
  margin-top: 12px; min-height: 22px;
  font-family: var(--f-num); font-variant-numeric: tabular-nums;
  font-size: 14px; color: var(--text-mid); text-align: center;
}

/* poštena igra */
.fair-row {
  display: flex; align-items: center; gap: 7px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--text-low);
  font: 600 11px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase;
}

/* odgovorna igra */
.session-foot {
  display: flex; gap: 16px; justify-content: center;
  margin-top: 24px;
  font: 600 11px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-low);
}

/* ============================================================ SLOT */
.slot-wrap { max-width: 660px; margin: 0 auto; }
.slot-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.slot-name { font: 500 26px/1 var(--f-disp); letter-spacing: .1em; color: var(--gold-300); }
.slot-info {
  background: var(--bg-raised); border: 1px solid var(--line);
  color: var(--text-mid); border-radius: var(--r-ctl);
  padding: 7px 12px; font: 600 11px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase;
}
/* kabinet */
.slot-stage {
  position: relative; padding: 16px;
  border-radius: var(--r-card);
  background: var(--bg-inset);
  border: 1px solid var(--gold-500);
  box-shadow: inset 0 0 0 3px var(--bg-panel), inset 0 0 0 4px rgba(201,162,39,0.5);
  background-size: cover; background-position: center;
  overflow: hidden;
}
.slot-stage::before, .slot-stage::after {
  content: ""; position: absolute; left: 0; right: 0; height: 24px; pointer-events: none; z-index: 2;
}
.slot-stage::before { top: 0; background: linear-gradient(var(--bg-void), transparent); }
.slot-stage::after { bottom: 0; background: linear-gradient(transparent, var(--bg-void)); }
.slot-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  grid-auto-flow: column; grid-template-rows: repeat(3, 1fr); gap: 4px;
}
.slot-cell {
  aspect-ratio: 1.15/1;
  display: grid; place-items: center;
  background: rgba(7,16,9,.55);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 2px;
  overflow: hidden;
}
.slot-cell:nth-child(6n+1), .slot-cell:nth-child(6n+2), .slot-cell:nth-child(6n+3) {
  background: rgba(7,16,9,.62);
}
.slot-cell img { width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.slot-cell.drop img { animation: slotDrop 180ms var(--e-in); }
@keyframes slotDrop { from { transform: translateY(-30%); opacity: .3; } }
.slot-cell.win { border-color: var(--gold-500); transform: translateY(-4px); }
.slot-cell.win img { filter: drop-shadow(0 0 10px rgba(201,162,39,.5)); }
.slot-banner {
  position: absolute; left: 0; right: 0; top: 42%; z-index: 3;
  text-align: center;
  font: 500 24px/1.2 var(--f-disp); letter-spacing: .1em;
  color: var(--gold-300);
  text-shadow: 0 2px 20px #000;
  pointer-events: none;
}
.slot-win {
  text-align: center; min-height: 28px; margin: 10px 0 4px;
  font: 500 22px/1 var(--f-num); font-variant-numeric: tabular-nums;
  color: var(--gold-300);
}
.slot-controls {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-panel);
  border: 1px solid var(--line-gold);
  border-radius: var(--r-card);
}
.slot-bet { display: flex; align-items: center; gap: 8px; }
.slot-bt {
  width: 34px; height: 34px; border-radius: var(--r-ctl);
  background: var(--bg-raised); border: 1px solid var(--line);
  color: var(--text-mid); font-size: 18px;
}
.slot-bt:hover { color: var(--text-hi); border-color: var(--line-hi); }
.slot-bet-v { text-align: center; }
.slot-bet-v span { display: block; font: 600 10px/1 var(--f-ui); letter-spacing: .1em; color: var(--text-low); }
.slot-bet-v input {
  width: 96px; height: auto; padding: 2px 0; border: none; background: none;
  text-align: center; font-size: 17px;
}
.slot-spin {
  width: 64px; height: 64px; border-radius: 999px;
  border: 2px solid var(--gold-500);
  background: var(--jade-900);
  color: var(--gold-300);
  display: grid; place-items: center;
  transition: border-color var(--t-press), background var(--t-press);
}
.slot-spin:hover:not(:disabled) { background: var(--jade-500); color: #04120C; }
.slot-spin:disabled { opacity: .5; }
.pt-table td { padding: 6px 4px; vertical-align: middle; }
.pt-sym { width: 46px; }
.pt-sym img { width: 40px; height: 34px; object-fit: contain; }
.pt-pay { text-align: right; color: var(--gold-300); font-size: 12px; white-space: nowrap; }
.pt-wild {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; padding: 10px;
  background: var(--bg-inset); border-radius: var(--r-ctl); font-size: 13px;
}
.pt-wild img { width: 42px; height: 34px; object-fit: contain; }

/* ============================================================ SPORT */
.sport-match { padding: 14px 16px; margin-bottom: 12px; }
.sport-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sport-teams { font: 600 15px/1.3 var(--f-ui); }
.sport-time { font: 600 11px/1 var(--f-ui); letter-spacing: .08em; color: var(--text-low); }
.live-dot-t { color: var(--verm-300); font: 600 10px/1 var(--f-ui); letter-spacing: .1em; }
.odds-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.odd-btn {
  position: relative; overflow: hidden;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  padding: 8px 6px 12px;
  color: var(--text-hi);
  text-align: center;
  transition: border-color var(--t-press), transform var(--t-press);
}
.odd-btn:hover:not(.closed) { border-color: var(--jade-500); transform: translateY(-1px); }
.odd-btn.closed { opacity: .4; cursor: not-allowed; }
.odd-k { display: block; font: 600 10px/1 var(--f-ui); letter-spacing: .1em; color: var(--text-low); }
.odd-l { display: block; font-size: 11px; color: var(--text-low); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odd-v { display: block; font-size: 18px; margin-top: 3px; }
.odd-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.06); }
.odd-bar b { display: block; height: 100%; background: var(--gold-500); }
.tiket-racun {
  margin-top: 12px; padding: 10px 12px;
  background: var(--bg-inset); border: 1px solid var(--line);
  border-radius: var(--r-ctl); font-size: 14px;
}
/* ---------------------------------------------------------- tiketi
   Svaki tiket je kartica, ne red u spisku: levo sta je odigrano,
   desno novac i stanje. Isti prikaz ide i na sport strani i na nalogu. */
.tk-lista { display: grid; gap: 8px; }

.tk-sum {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 2px;
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  font-size: 12px; color: var(--text-mid);
}
.tk-sum b { color: var(--text-hi); font-family: var(--f-num); }
.tk-sum b.tk-gold { color: var(--gold-300); }

.tk {
  display: flex; align-items: stretch; justify-content: space-between; gap: 14px;
  padding: 12px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  transition: border-color var(--t-state) var(--e-in);
}
.tk:hover { border-color: var(--line-hi); }
.tk-l { min-width: 0; display: grid; gap: 5px; align-content: start; }
.tk-mec {
  font: 600 13px/1.25 var(--f-ui); color: var(--text-hi);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tk-pick { display: flex; align-items: center; gap: 7px; min-width: 0; }
.tk-key {
  flex: none; min-width: 20px; padding: 2px 5px;
  background: var(--bg-raised); border: 1px solid var(--line-hi);
  border-radius: var(--r-chip);
  font: 500 11px/1.35 var(--f-num); text-align: center; color: var(--text-hi);
}
.tk-lbl {
  font-size: 12px; color: var(--text-mid);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tk-meta {
  display: flex; align-items: center; gap: 6px;
  font: 400 11px/1 var(--f-num); color: var(--text-low);
}
.tk-dot { opacity: .5; }

.tk-r {
  flex: none; display: grid; gap: 4px; justify-items: end; align-content: space-between;
  text-align: right;
}
.tk-st {
  padding: 3px 8px; border-radius: var(--r-chip);
  font: 600 10px/1.4 var(--f-ui); letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid transparent;
}
.tk-k { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-low); }
.tk-v {
  font: 500 16px/1 var(--f-num); font-variant-numeric: tabular-nums;
  color: var(--text-hi);
}

/* stanja - boja nosi znacenje, bez vikanja */
.tk.pending  .tk-st { color: var(--gold-300);  background: var(--gold-900);  border-color: var(--line-gold); }
.tk.won      .tk-st { color: var(--jade-300);  background: var(--jade-900);  border-color: rgba(31,169,123,.45); }
.tk.lost     .tk-st { color: var(--verm-300);  background: var(--verm-900);  border-color: rgba(214,69,47,.35); }
.tk.refunded .tk-st { color: var(--text-mid);  background: var(--bg-raised); border-color: var(--line-hi); }
.tk.won  .tk-v { color: var(--jade-300); }
.tk.lost { opacity: .72; }
.tk.lost .tk-v { color: var(--text-low); text-decoration: line-through; text-decoration-thickness: 1px; }

.tk-prazno {
  display: grid; justify-items: center; gap: 6px;
  padding: 26px 16px; text-align: center;
  border: 1px dashed var(--line-hi); border-radius: var(--r-card);
  color: var(--text-mid);
}
.tk-prazno svg { color: var(--text-dis); }
.tk-prazno span { font-size: 12px; color: var(--text-low); }

@media (max-width: 560px) {
  .tk { padding: 11px 12px; gap: 10px; }
  .tk-v { font-size: 15px; }
  .tk-k { display: none; }
}

/* ============================================================ PROFIL / BONUSI */
.profil-ime { font: 600 20px/1 var(--f-ui); margin-bottom: 16px; }
.stat-grid { display: grid; gap: 12px; }
.stat-grid.dva { grid-template-columns: 1fr 1fr; }
.stat-card { padding: 14px 16px; }
.stat-card .stat-v { font-size: 22px; margin-top: 4px; }
.stat-card.good { border-color: rgba(31,169,123,0.4); }
.stat-card.good .stat-v { color: var(--jade-300); }
.stat-card.bad { border-color: rgba(214,69,47,0.4); }
.stat-card.bad .stat-v { color: var(--verm-300); }
.profil-sekcija { margin-top: 16px; padding: 14px 16px; }
.profil-sekcija input { margin-bottom: 8px; }

.wager-lock {
  margin: 12px 0; padding: 11px 14px;
  background: var(--verm-900);
  border: 1px solid rgba(214,69,47,0.35);
  border-radius: var(--r-ctl);
  font-size: 13px;
}
.wager-ok {
  margin: 12px 0; padding: 11px 14px;
  background: var(--jade-900);
  border: 1px solid rgba(31,169,123,0.35);
  border-radius: var(--r-ctl);
  font-size: 13px;
}
.bonus-box { margin-top: 16px; padding: 14px 16px; }
.bonus-head { margin-bottom: 10px; }
.bonus-item { padding: 9px 0; border-top: 1px solid var(--line); }
.bonus-item:first-of-type { border-top: none; }
.bonus-title { font-size: 13px; font-weight: 600; }
.bonus-desc { font-size: 12px; color: var(--text-low); margin-top: 2px; }
.bonus-bar { height: 4px; margin-top: 8px; background: rgba(255,255,255,.06); border-radius: var(--r-chip); overflow: hidden; }
.bonus-bar i { display: block; height: 100%; background: var(--jade-500); }
.bonus-progress { font-size: 11px; color: var(--text-low); }

/* ============================================================ AUTH */
.auth-wrap {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(12,58,44,.35), transparent 70%),
    var(--bg-void);
}
.auth-card {
  width: 100%; max-width: 380px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 32px;
  box-shadow: var(--sh-panel);
}
.auth-card .logo {
  font: 600 26px/1 var(--f-znak);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-hi); text-align: center;
}
.auth-card .logo span { color: var(--gold-300); }
.auth-card .sub {
  text-align: center; margin: 8px 0 24px;
  font: 600 11px/1.4 var(--f-ui); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-low);
}
.auth-card .btn { width: 100%; margin-top: 8px; }
.auth-switch { text-align: center; margin-top: 16px; font-size: 13px; color: var(--text-low); }
.auth-pass-red { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.auth-pass-red a { font-size: 12px; color: var(--text-mid); text-decoration: none; cursor: pointer; }
.auth-pass-red a:hover, .zab-nazad:hover { color: var(--gold-300); }
.zab-naslov { font: 700 18px/1.2 var(--f-ui); color: var(--text-hi); margin: 4px 0 6px; }
.zab-opis { font-size: 13px; color: var(--text-mid); margin-bottom: 16px; }
#auth-zab .btn { width: 100%; margin-top: 14px; }
.zab-poruka { font-size: 13px; margin-top: 12px; min-height: 18px; line-height: 1.5; }
.zab-poruka.ok { color: var(--jade-300); }
.zab-poruka.greska { color: var(--verm-300); }
.zab-nazad { display: inline-block; margin-top: 14px; font-size: 13px;
             color: var(--text-mid); text-decoration: none; cursor: pointer; }
.auth-switch a { cursor: pointer; margin-left: 4px; }
/* povratna informacija ispod polja za referral kod na registraciji */
.ref-badge {
  margin: 8px 0 0; padding: 9px 12px;
  background: var(--jade-900); border: 1px solid rgba(31,169,123,.35);
  border-radius: var(--r-ctl);
  font-size: 12px; text-align: center; color: var(--jade-300);
}
.ref-badge.lose {
  background: var(--verm-900);
  border-color: rgba(214,92,80,.35); color: var(--verm-300);
}
#auth-ref-wrap { margin-top: 14px; }
#auth-ref-input { text-transform: uppercase; letter-spacing: .06em; }
#auth-ref-input::placeholder { text-transform: none; letter-spacing: 0; }

/* ============================================================ LOBI
   Tri ulaza, redovi igara sa naslovom i promo traka. Ista paleta i iste
   ostre ivice kao svuda - komercijalno se dobija rasporedom, ne bojama. */
.ulazi {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-bottom: 24px;
}
.ulaz {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  min-height: 116px; padding: 16px;
  background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: var(--r-card); text-align: left;
  transition: border-color var(--t-state), transform var(--t-press);
}
.ulaz::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 100% 0%, var(--boja, transparent), transparent 62%);
  opacity: .5;
}
.ulaz:hover { transform: translateY(-2px); border-color: var(--line-hi); }
a.ulaz { text-decoration: none; color: inherit; }   /* Kontakt je link, ne dugme */
.ulaz-kazino { --boja: rgba(31,169,123,.30); }
.ulaz-sport  { --boja: rgba(201,162,39,.26); }
.ulaz-uplata { --boja: rgba(53,200,148,.22); }
.ulaz-tekst { position: relative; }
.ulaz-nad {
  font: 600 10px/1 var(--f-num); letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-low); margin-bottom: 8px;
}
.ulaz-ime { font: 800 26px/1 var(--f-ui); letter-spacing: -.03em; color: var(--text-hi); }
.ulaz-ds { margin-top: 7px; font-size: 13px; line-height: 1.35; color: var(--text-mid); max-width: 30ch; }
.ulaz-str {
  position: relative; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: var(--r-ctl);
  display: grid; place-items: center;
  background: var(--bg-raised); border: 1px solid var(--line-hi); color: var(--text-hi);
}

/* zaglavlje reda igara */
.red-zag { display: flex; align-items: flex-end; justify-content: space-between;
           margin: 28px 0 12px; }
.red-nad { font: 600 10px/1 var(--f-num); letter-spacing: .18em;
           text-transform: uppercase; color: var(--text-low); margin-bottom: 6px; }
.red-ime { font: 700 20px/1 var(--f-ui); letter-spacing: -.02em; color: var(--text-hi); }
.red-igara {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr);
  gap: 10px; overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x proximity;
}
.red-igara::-webkit-scrollbar { height: 6px; }
.red-igara::-webkit-scrollbar-thumb { background: var(--line-hi); border-radius: 3px; }
.red-igara > * { scroll-snap-align: start; }

/* promo traka na dnu */
.promo-traka {
  margin-top: 30px; padding: 18px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: linear-gradient(100deg, var(--jade-900), var(--bg-panel) 62%);
  border: 1px solid var(--line-gold); border-radius: var(--r-card);
}
.promo-nad { font: 600 10px/1 var(--f-num); letter-spacing: .18em;
             text-transform: uppercase; color: var(--gold-300); margin-bottom: 7px; }
.promo-ime { font: 700 21px/1.1 var(--f-ui); letter-spacing: -.02em; color: var(--text-hi); }
.promo-desno { display: flex; gap: 8px; flex-wrap: wrap; }
.promo-znak {
  padding: 7px 12px; background: rgba(0,0,0,.28);
  border: 1px solid var(--line-hi); border-radius: var(--r-ctl);
  font: 500 11px/1 var(--f-num); letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-mid);
}

@media (max-width: 900px) {
  .ulazi { grid-template-columns: 1fr; gap: 8px; margin-bottom: 18px; }
  .ulaz { min-height: 0; padding: 12px 14px; align-items: center; }
  /* Opisi su na uskom ekranu visak - osim broja telefona, zbog kog se
     kartica Kontakt i otvara. */
  .ulaz-ds { display: none; }
  .ulaz-uplata .ulaz-ds { display: block; margin-top: 4px; font-size: 12px; }
  .ulaz-nad { margin-bottom: 5px; }
  .ulaz-ime { font-size: 20px; }
  .red-igara { grid-auto-columns: minmax(132px, 1fr); }
  .promo-traka { flex-direction: column; align-items: flex-start; }
}

/* ============================================================ SPORTBOOK
   Okvir stoji preko cele glavne zone i ne zivi u #view - zato apsolutno
   pozicioniranje (.content je vec position: relative). */
#sb-host {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--bg-base);
  z-index: 1;
}
#sb-host.hidden { display: none; }
.sb-head {
  flex: 0 0 auto;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 16px;
}
.sb-head .h1 { font-size: 20px; }
.sb-head .note { margin-top: 2px; font-size: 12px; }
.sb-naslov { flex: 0 0 auto; }

/* nase polje za pretragu - kuca se OVDE, ne u tudjem okviru */
.sb-trazi { flex: 1 1 auto; display: flex; gap: 0; max-width: 460px; margin-left: auto; }
.sb-trazi input {
  flex: 1 1 auto; height: 40px; padding: 0 12px;
  background: var(--bg-inset); border: 1px solid var(--line-hi);
  border-radius: 4px 0 0 4px; border-right: 0;
  color: var(--text-hi); font: 400 15px/1 var(--f-ui);
}
.sb-trazi input::placeholder { color: var(--text-dis); }
.sb-trazi input:focus { outline: none; border-color: var(--jade-500); }
.sb-trazi > button {
  flex: 0 0 auto; width: 46px; height: 40px;
  background: var(--jade-500); color: #06120D;
  border: 0; border-radius: 0 4px 4px 0; cursor: pointer;
  display: grid; place-items: center;
}
.sb-trazi > button:hover { filter: brightness(1.08); }
.sb-traka {
  flex: 0 0 auto;
  padding: 8px 16px;
  background: var(--gold-900);
  border-bottom: 1px solid var(--gold-500);
  color: var(--gold-300);
  font: 600 12px/1.35 var(--f-ui);
  text-align: center;
}
.sb-body { flex: 1 1 auto; min-height: 0; overflow: hidden; }
#winhouse-book { width: 100%; }
/* visinu okvira postavlja ucitivac (data-height + refit), sirina je nasa */
#winhouse-book iframe { display: block; width: 100%; border: 0; }
.sb-msg { padding: 40px 16px; text-align: center; }

/* kratak bljesak kad se balans promeni dok je knjiga otvorena */
@keyframes sbSkok {
  0%   { color: var(--jade-300); transform: scale(1.14); }
  100% { color: inherit;         transform: scale(1); }
}
.sb-skok { animation: sbSkok 560ms var(--e-in, ease-out); display: inline-block; }

@media (max-width: 768px) {
  /* Na telefonu naslov ide napolje - igrac vec vidi u donjoj traci gde je,
     a taj prostor treba knjizi. Polje za pretragu OSTAJE: ono je jedini
     nacin da se na telefonu pretrazuje kako treba. */
  .sb-naslov { display: none; }
  .sb-head { padding: 8px 10px; }
  .sb-trazi { max-width: none; margin-left: 0; }
  .sb-trazi input { height: 38px; font-size: 16px; }  /* 16px = telefon ne zumira */
  .sb-trazi > button { height: 38px; width: 44px; }
}

/* ============================================================ MODAL / TOAST */
.modal-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(6,12,10,0.72);
  backdrop-filter: blur(2px);
  display: grid; place-items: center;
  padding: 24px;
}
.modal-card {
  width: 100%; max-width: 480px;
  max-height: 86vh; overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-modal);
  padding: 24px;
  position: relative;
  animation: modalIn var(--t-state) var(--e-in);
}
@keyframes modalIn { from { opacity: 0; transform: scale(.98); } }
.modal-card h3 { margin-bottom: 12px; padding-right: 32px; }
.modal-x {
  position: absolute; top: 16px; right: 16px;
  width: 28px; height: 28px; border-radius: var(--r-ctl);
  color: var(--text-low); font-size: 18px;
}
.modal-x:hover { background: var(--bg-raised); color: var(--text-hi); }

#toasts { position: fixed; right: 24px; bottom: 24px; z-index: 9500; display: flex; flex-direction: column; gap: 8px; }
.toast {
  width: 320px; padding: 12px 14px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-left: 2px solid var(--jade-500);
  border-radius: var(--r-ctl);
  font-size: 13px;
  position: relative; overflow: hidden;
  animation: toastIn var(--t-state) var(--e-in);
}
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
.toast.err { border-left-color: var(--verm-500); }
.toast.ok  { border-left-color: var(--jade-500); }
.toast::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px;
  background: var(--line-hi); width: 100%;
  animation: toastBar 4s linear forwards;
}
@keyframes toastBar { to { width: 0; } }

/* skeleton */
.skel {
  background: var(--bg-raised);
  border-radius: var(--r-ctl);
  position: relative; overflow: hidden;
}
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent);
  animation: shimmer 1.6s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

.empty {
  padding: 40px 16px; text-align: center;
  color: var(--text-low); font-size: 13px;
}
.paused-note {
  margin-bottom: 16px; padding: 12px 14px;
  background: var(--verm-900); border: 1px solid rgba(214,69,47,.3);
  border-radius: var(--r-ctl); font-size: 13px;
}

/* ============================================================ MOBILE */
@media (max-width: 1279px) {
  #app { grid-template-columns: var(--w-rail) 1fr; grid-template-areas: "top top" "rail main"; }
  .live-side { display: none; }
  .lobby-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .game-shell { grid-template-columns: 1fr; }
  .bet-panel { position: static; }
  .lobby-duo { grid-template-columns: 1fr; }
  .lobby-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  #app {
    grid-template-columns: 1fr;
    grid-template-rows: var(--h-top) 1fr auto;
    grid-template-areas: "top" "main" "rail";
  }
  /* bottom bar: samo 5 stavki, ostale igre kroz Lobi */
  .rail {
    display: flex; flex-wrap: nowrap;
    border-right: none; border-top: 1px solid var(--line);
    padding: 2px 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  /* omotaci moraju da nestanu iz rasporeda, inace se dugmad slazu u kolone */
  #nav-main, #nav-games, #nav-slots { display: contents; }
  .rail .nav-item { display: none; flex: 1 1 0; min-width: 0; padding: 7px 2px 5px; }
  .rail .nav-item[data-nav="lobby"],
  .rail .nav-item[data-nav="kazino"],
  .rail .nav-item[data-nav="sportbook"],
  .rail .nav-item[data-nav="crash"],
  .rail .nav-item[data-nav="profil"] { display: flex; }
  /* redosled na telefonu: Lobi, Igre, Sport, Crash, Nalog (nalog na kraju,
     gde palac najlakse stize) */
  .rail .nav-item[data-nav="lobby"]     { order: 1; }
  .rail .nav-item[data-nav="kazino"]    { order: 2; }
  .rail .nav-item[data-nav="sportbook"] { order: 3; }
  .rail .nav-item[data-nav="crash"]     { order: 4; }
  .rail .nav-item[data-nav="profil"]    { order: 5; }
  .rail .nav-item .lbl { font-size: 8px; letter-spacing: .04em; }
  .rail-sep, .nav-label, #btn-fair { display: none; }
  #view { padding: 16px 12px 32px; }
  /* na telefonu top bar nosi samo logo, saldo i avatar - ostalo ide u lobi */
  .topbar { padding: 0 10px; gap: 8px; overflow: hidden; }
  .brand-word { display: none; }
  .topbar #btn-cashout,
  .topbar #btn-history,
  .topbar #btn-bell { display: none; }
  .topbar .btn.sm { padding: 0 10px; font-size: 12px; height: 32px; }
  .bal-block { padding: 4px 6px; gap: 6px; }
  #balance-val { font-size: 15px; }
  .bal-chev { display: none; }
  #crash-canvas { height: 260px; }
  .crash-mult { font-size: 44px; top: 34%; }
  .crash-sub { top: calc(34% + 54px); }
  .hero-crash { height: 180px; }
  /* na uskom ekranu stane samo par poslednjih rundi */
  .hero-chips { left: 16px; right: 16px; justify-content: flex-end; overflow: hidden; }
  .hero-chips .chip:nth-child(n+4) { display: none; }
  .hero-meta { left: 16px; bottom: 16px; }
  #toasts { right: 12px; left: 12px; bottom: 12px; }
  .toast { width: auto; }
  .display { font-size: 40px; }
  h1, .h1 { font-size: 26px; }
}

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



/* ============================================================================
   IGRE
   Selektori odgovaraju stvarnom markupu koji app.js crta.
   ============================================================================ */

/* grid stavka podrazumeva min-width:auto pa je siroka tabela razvlaci - zato 0 */
.game-canvas { position: relative; width: 100%; max-width: 100%; min-width: 0; }
.game-canvas > * { max-width: 100%; min-width: 0; }
.spacer { height: 12px; }

/* ------------------------------------------------------------------- CRASH */
.crash-stage { position: relative; }
#crash-canvas {
  width: 100%; height: 420px; display: block;
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.crash-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; pointer-events: none;
}
.crash-mult {
  font: 500 72px/1 var(--f-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  color: var(--text-hi);
  text-shadow: 0 2px 24px rgba(0,0,0,.6);
}
.crash-mult.betting {
  font: 600 32px/1 var(--f-ui); letter-spacing: .14em; color: var(--text-mid);
}
.crash-mult.crashed { color: var(--verm-500); }
/* sto je mnozilac visi, to je tresak jaci */
.crash-mult.lvl1 { animation: tremor1 90ms steps(2) infinite; }
.crash-mult.lvl2 { color: var(--jade-300); text-shadow: 0 0 34px rgba(53,200,148,.35);
                   animation: tremor2 70ms steps(2) infinite; }
.crash-mult.lvl3 { color: var(--gold-300); text-shadow: 0 0 46px rgba(231,206,132,.4);
                   animation: tremor3 55ms steps(2) infinite; }
@keyframes tremor1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(.5px,-.5px)} }
@keyframes tremor2 { 0%,100%{transform:translate(-1px,.5px)} 50%{transform:translate(1px,-.5px)} }
@keyframes tremor3 { 0%,100%{transform:translate(-1.5px,1px)} 50%{transform:translate(1.5px,-1px)} }

.crash-sub { font: 600 11px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--text-low); }
.crash-bar { width: 200px; height: 2px; background: rgba(255,255,255,.08); border-radius: var(--r-chip); overflow: hidden; }
.crash-bar i { display: block; height: 100%; background: var(--gold-500); transition: width 100ms linear; }

/* crveni pecat kad raketa padne */
.crash-stamp {
  position: absolute; left: 50%; top: 68%;
  transform: translateX(-50%) rotate(-7deg);
  border: 2px solid var(--verm-500); color: var(--verm-500);
  padding: 5px 13px; border-radius: var(--r-chip);
  font: 600 13px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase;
  opacity: .92; pointer-events: none; z-index: 4;
  animation: stampIn 240ms var(--e-out);
}
@keyframes stampIn { from { transform: translateX(-50%) rotate(-7deg) scale(1.5); opacity: 0; } }

.crash-top { min-height: 30px; margin-bottom: 12px; white-space: nowrap; overflow: hidden; }
.crash-bottom { margin-top: 16px; }
.hchip {
  display: inline-block;
  font-family: var(--f-num); font-variant-numeric: tabular-nums; font-size: 12px;
  padding: 4px 7px; margin-right: 6px; border-radius: var(--r-chip);
  background: var(--bg-raised); color: var(--text-low);
  animation: chipIn var(--t-state) var(--e-in);
}
@keyframes chipIn { from { transform: translateX(-12px); opacity: 0; } }
.hchip.lo   { background: var(--bg-raised); color: var(--text-low); }
.hchip.mid  { background: var(--jade-900); color: var(--jade-300); }
.hchip.hi   { background: var(--gold-900); color: var(--gold-300); border: 1px solid var(--line-gold); }
.hchip.mega { background: var(--gold-500); color: #150F00; }

.bets-box { background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.bets-box .hd {
  display: flex; justify-content: space-between; padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font: 600 11px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--text-low);
}
.bets-box .hd span:last-child { font-family: var(--f-num); color: var(--text-mid); }
.bets-list { max-height: 240px; overflow-y: auto; }
.bet-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  height: 36px; padding: 0 12px;
  border-bottom: 1px solid rgba(255,255,255,.03);
  border-left: 1px solid transparent; font-size: 13px;
}
.bet-row .u { color: var(--text-mid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bet-row .x, .bet-row .p {
  font-family: var(--f-num); font-variant-numeric: tabular-nums; font-size: 12px;
  text-align: right; min-width: 62px; color: var(--text-low);
}
.bet-row.me { border-left-color: var(--gold-500); background: rgba(201,162,39,.05); }
.bet-row.won { animation: rowFlash 320ms var(--e-in); }
.bet-row.won .x, .bet-row.won .p { color: var(--jade-300); }
.bet-row.lost { opacity: .5; }
.bet-row.queued .u { color: var(--gold-300); }
@keyframes rowFlash { from { background: var(--jade-900); } }

.fair {
  margin-top: 12px; padding: 10px 12px;
  background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--r-ctl);
  font-family: var(--f-num); font-size: 11px; line-height: 1.6; color: var(--text-low); word-break: break-all;
}
.fair b { color: var(--text-mid); font-family: var(--f-ui); }
.fair span { color: var(--jade-300); }

.queued-note {
  margin-top: 10px; padding: 10px 12px;
  background: var(--gold-900); border: 1px solid var(--line-gold);
  border-radius: var(--r-ctl); font-size: 12px; line-height: 1.6; color: var(--gold-300);
}

/* ------------------------------------------------------------------ PENALI */
.pitch {
  position: relative;
  width: 100%; max-width: 470px; margin: 0 auto;
  aspect-ratio: 4/3;
  border-radius: var(--r-card);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.018) 0 20px, transparent 20px 40px),
    linear-gradient(180deg, #0C1C15, #071009);
  border: 1px solid var(--line);
  overflow: hidden;
}
.pitch .stands {
  position: absolute; top: 0; left: 0; right: 0; height: 15%;
  background: var(--bg-inset);
  border-bottom: 1px solid var(--line);
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 7px);
}
.pitch .box-lines {
  position: absolute; left: 7%; right: 7%; top: 24%; bottom: 5%;
  border: 1px solid rgba(255,255,255,.09); border-top: none;
}
.pitch .spot {
  position: absolute; left: 50%; top: 84%; transform: translate(-50%,-50%);
  width: 5px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.3);
}
/* gol: okvir + dijagonalna mreza */
.goal {
  position: absolute; left: 12%; right: 12%; top: 26%; height: 46%;
  border: 3px solid var(--text-mid); border-bottom: none; border-radius: 3px 3px 0 0;
  background-image:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.07) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 1px, transparent 1px 13px);
}
/* zone dobijaju left/top inline iz JS-a */
.zone {
  position: absolute; transform: translate(-50%,-50%);
  width: 28%; height: 42%;
  border: 1px solid var(--line); border-radius: 2px;
  background: transparent; color: transparent;
  font-family: var(--f-num); font-variant-numeric: tabular-nums; font-size: 12px;
  transition: background var(--t-press), border-color var(--t-press), color var(--t-press);
}
.zone:hover:not(:disabled) { background: rgba(12,58,44,.5); border-color: var(--jade-500); color: var(--jade-300); }
.zone:active:not(:disabled) { background: rgba(31,169,123,.22); }

.keeper {
  position: absolute; left: 50%; top: 52%;
  transform: translate(-50%,-50%);
  width: 42px; height: 56px; z-index: 2;
  /* Golman i lopta su SLIKA, ne dugme. Bez ovoga stoje iznad zona i pojedu
     dodir: na telefonu golman pokriva sredinu obe centralne zone, pa se
     gol u sredinu prosto ne moze ubosti. */
  pointer-events: none;
  transition: left 280ms var(--e-in), top 280ms var(--e-in), transform 280ms var(--e-in);
}
.keeper.dive { filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
.gk-head  { position: absolute; left: 50%; top: 0; transform: translateX(-50%);
            width: 13px; height: 13px; border-radius: 999px;
            background: var(--bg-base); border: 1px solid var(--text-low); }
.gk-torso { position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
            width: 22px; height: 27px; border-radius: 4px;
            background: var(--bg-base); border: 1px solid var(--text-low); }
.gk-arm   { position: absolute; top: 17px; width: 15px; height: 5px; border-radius: 3px;
            background: var(--bg-base); border: 1px solid var(--text-low); }
.gk-arm.l { left: -7px; transform: rotate(-28deg); }
.gk-arm.r { right: -7px; transform: rotate(28deg); }
.gk-legs  { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; gap: 4px; }
.gk-legs i { display: block; width: 7px; height: 15px; border-radius: 0 0 3px 3px;
             background: var(--bg-base); border: 1px solid var(--text-low); }

.ball {
  position: absolute; left: 50%; top: 88%;
  transform: translate(-50%,-50%);
  font-size: 34px; line-height: 1; z-index: 3;
  pointer-events: none;            /* leti kroz gol - ne sme da blokira zone */
  transition: left 420ms var(--e-in), top 420ms var(--e-in), font-size 420ms var(--e-in);
}
.ball.flying { filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }

.pen-flash {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%);
  font: 600 24px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase;
  pointer-events: none; z-index: 5; white-space: nowrap;
  animation: penFlash 900ms var(--e-in) forwards;
}
.pen-flash.is-goal { color: var(--jade-300); text-shadow: 0 0 28px rgba(53,200,148,.55); }
.pen-flash.is-save { color: var(--verm-300); text-shadow: 0 0 28px rgba(240,122,99,.55); }
@keyframes penFlash {
  0%   { opacity: 0; transform: translate(-50%,-38%) scale(.8); }
  22%  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  70%  { opacity: 1; transform: translate(-50%,-52%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-64%) scale(1); }
}

.pen-track { display: flex; gap: 6px; justify-content: center; margin-top: 14px; min-height: 24px; }
.pen-dot {
  width: 24px; height: 24px; border-radius: 999px;
  display: grid; place-items: center; font-size: 11px;
  border: 1px solid var(--text-low); color: var(--text-low);
  animation: popIn var(--t-state) var(--e-in);
}
.pen-dot.is-goal { background: var(--jade-900); border-color: transparent; }
.pen-dot.is-save { background: var(--verm-900); border-color: transparent; }
@keyframes popIn { from { transform: scale(.55); opacity: 0; } }

.pen-ladder { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 12px; }
.pen-step {
  font-family: var(--f-num); font-variant-numeric: tabular-nums; font-size: 11px;
  padding: 4px 6px; border-radius: var(--r-chip);
  background: var(--bg-inset); color: var(--text-low);
  transition: background var(--t-state), color var(--t-state);
}
.pen-step.done { background: var(--jade-900); color: var(--jade-300); }
.pen-step.now  { background: var(--gold-900); color: var(--gold-300); }

/* ---------------------------------------------------------------- COINFLIP */
.coin3d { width: 190px; height: 190px; margin: 28px auto; perspective: 1200px; }
.coin3d .inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 620ms var(--e-in);
}
/* .flipping vrti u krug; kad server odgovori JS postavi konacni rotateY inline */
.coin3d.flipping .inner { animation: coinSpin 900ms linear infinite; transition: none; }
@keyframes coinSpin { to { transform: rotateY(1080deg); } }
.coin3d .face {
  position: absolute; inset: 0; border-radius: 999px;
  display: grid; place-items: center;
  border: 3px solid var(--gold-500);
  backface-visibility: hidden;
  box-shadow: inset 0 0 0 6px rgba(201,162,39,.15), 0 10px 30px rgba(0,0,0,.5);
}
/* kovani metal - svetlo pada odozgo levo, kao na pravom novcicu */
.coin3d .face.heads {
  background: radial-gradient(120% 120% at 32% 24%, #17513E 0%, #0C3A2C 55%, #07271D 100%);
  color: var(--gold-300);
}
.coin3d .face.tails {
  background: radial-gradient(120% 120% at 32% 24%, #5C2113 0%, #3E120B 55%, #2A0B06 100%);
  color: var(--gold-300);
  transform: rotateY(180deg);
}
.coin3d .face svg { width: 74%; height: 74%; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }

/* isti crtez, sicusan, u biracu strane */
.coin-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.coin-seg svg { flex: none; color: var(--text-low); transition: color var(--t-state); }
.coin-seg button.sel svg { color: var(--gold-300); }

/* -------------------------------------------------------------------- DICE */
.dice-wrap { width: 100%; padding: 44px 10px 10px; position: relative; }
.dice-bar { position: relative; height: 14px; border-radius: var(--r-chip); background: var(--bg-inset); }
.dice-track { position: absolute; inset: 0; border-radius: var(--r-chip); overflow: hidden; }
.dice-track i { display: block; width: 100%; height: 100%; }
.dice-pin {
  position: absolute; top: -11px; width: 12px; height: 36px; margin-left: -6px;
  transition: left 320ms var(--e-in);
}
.dice-pin i {
  display: block; width: 12px; height: 36px; border-radius: 2px;
  background: var(--bg-raised); border: 1px solid var(--gold-500);
  box-shadow: 0 0 12px rgba(201,162,39,.3);
}
.dice-pin b {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  font-family: var(--f-num); font-variant-numeric: tabular-nums; font-size: 12px;
  color: var(--gold-300); white-space: nowrap;
  transition: color var(--t-state);
}
.dice-pin b.win  { color: var(--jade-300); }
.dice-pin b.lose { color: var(--verm-300); }
.dice-scale { display: flex; justify-content: space-between; margin-top: 12px; }
.dice-scale span { font-family: var(--f-num); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--text-low); }

/* ------------------------------------------------------------------- RULET */
.wheel-box { position: relative; width: 300px; height: 300px; margin: 0 auto 6px; }
.wheel-box canvas { width: 100%; height: 100%; display: block; }
.wheel-pointer {
  position: absolute; top: -3px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 0; height: 0;
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-top: 15px solid var(--gold-500);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
}
.wheel-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 76px; height: 76px; border-radius: 999px;
  background: var(--bg-inset); border: 1px solid var(--line-gold);
  display: grid; place-items: center;
  font-family: var(--f-num); font-variant-numeric: tabular-nums; font-size: 26px;
  color: var(--text-hi);
  transition: border-color var(--t-state), color var(--t-state);
}
.wheel-center.red   { color: var(--verm-300); border-color: var(--verm-500); animation: popIn 300ms var(--e-in); }
.wheel-center.black { color: var(--text-hi);  border-color: var(--line-hi);  animation: popIn 300ms var(--e-in); }
.wheel-center.green { color: var(--jade-300); border-color: var(--jade-500); animation: popIn 300ms var(--e-in); }

.rtable-wrap { overflow-x: auto; max-width: 100%; min-width: 0; margin-top: 14px; padding-bottom: 6px; }
.rtable { display: grid; grid-template-columns: repeat(14, minmax(34px, 1fr)); gap: 2px; min-width: 540px; }
.rc {
  position: relative;
  border: 1px solid var(--line); border-radius: 2px;
  background: var(--bg-panel); color: var(--text-hi);
  height: 30px; padding: 0 3px;
  font-family: var(--f-num); font-variant-numeric: tabular-nums; font-size: 12px;
  transition: background var(--t-press), border-color var(--t-press);
}
.rc:hover  { border-color: var(--jade-500); }
.rc.red    { background: rgba(214,69,47,.45); }
.rc.black  { background: var(--bg-inset); }
.rc.zero   { background: var(--jade-900); }
.rc.out    { background: var(--bg-raised); color: var(--text-mid); font-family: var(--f-ui); font-size: 11px; letter-spacing: .04em; }
.rc.hit    { outline: 2px solid var(--gold-500); outline-offset: -2px; animation: popIn 300ms var(--e-in); }

/* --------------------------------------------------------------- BLACKJACK */
.bj-area { display: grid; gap: 30px; place-items: center; width: 100%; padding: 10px 0; }
.bj-side { text-align: center; width: 100%; }
.bj-side .lbl { margin-bottom: 10px; font: 600 11px/1 var(--f-ui); letter-spacing: .16em; color: var(--text-low); }
.bj-side .lbl b {
  display: inline-block; min-width: 26px;
  color: var(--text-hi); font-family: var(--f-num); font-variant-numeric: tabular-nums;
  font-size: 15px; margin-left: 8px; letter-spacing: 0;
}
/* zbir kratko pulsira kad ga nova karta pomeri */
.bj-side .lbl b.tik { animation: tik 320ms var(--e-in); }
@keyframes tik {
  0%   { transform: translateY(-3px); color: var(--gold-300); }
  100% { transform: translateY(0);    color: var(--text-hi); }
}
.cards { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; min-height: 104px; perspective: 900px; }
.pcard {
  width: 72px; height: 100px;
  background: #F2EFE6; color: #14110C;
  border: 1px solid rgba(0,0,0,.2); border-radius: var(--r-ctl);
  display: grid; place-items: center;
  font: 500 22px/1 var(--f-num);
  box-shadow: 0 3px 10px rgba(0,0,0,.45);
}
.pcard.redsuit { color: var(--verm-500); }
.pcard.back {
  background: var(--bg-panel); color: transparent;
  border: 1px solid var(--line-gold);
  background-image: repeating-linear-gradient(45deg, rgba(201,162,39,.12) 0 1px, transparent 1px 7px);
  box-shadow: inset 0 0 0 5px var(--bg-panel), inset 0 0 0 6px rgba(201,162,39,.28), 0 3px 10px rgba(0,0,0,.45);
}
/* nova karta doleti sa strane */
.pcard.deal { animation: dealIn 440ms var(--e-settle) backwards; }
@keyframes dealIn { from { transform: translate(70px,-50px) rotate(-14deg); opacity: 0; } }
/* skrivena karta se okrece */
.pcard.flip { animation: cardFlip 560ms var(--e-settle) backwards; backface-visibility: hidden; }
@keyframes cardFlip { from { transform: rotateY(180deg); } to { transform: rotateY(0); } }

/* ------------------------------------------------------------------ BAKARA
   Sto je isti kao kod bledzeka (iste karte, isto deljenje), a ispod njega
   tri polja za cipove - kao na rulet stolu. */
.bc-area { gap: 22px; }
.bj-side.pobednik .lbl { color: var(--jade-300); }
.bj-side.pobednik .lbl b { color: var(--jade-300); }

.bc-table {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  width: 100%; max-width: 520px; margin: 22px auto 0;
}
.bc-field {
  position: relative;
  display: grid; justify-items: center; align-content: center; gap: 3px;
  height: 78px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: linear-gradient(180deg, #172C23, #101E18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform var(--t-press), border-color var(--t-press), background var(--t-state);
}
.bc-field:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(31,169,123,.45); }
.bc-field .n {
  font: 600 13px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-hi);
}
.bc-field .o { font-size: 11px; color: var(--text-low); }
.bc-field .x {
  font-family: var(--f-num); font-variant-numeric: tabular-nums; font-size: 12px;
  color: var(--gold-300);
}
/* nereseno je redje i placa vise - zato zlatna ivica, ne druga boja polja */
.bc-field.f-tie { border-color: var(--line-gold); }
.bc-field.f-tie .n { color: var(--gold-300); }

.bc-field.hit {
  outline: 2px solid var(--gold-500); outline-offset: -2px;
  background: linear-gradient(180deg, #17513E, #0C3A2C);
  animation: popIn 300ms var(--e-in);
}
.bc-field.pao { opacity: .45; }

/* ------------------------------------------------------------ DRAGON TIGER
   Dve strane jedna naspram druge, sa VS izmedju - drugacije od bakare gde
   su jedna ispod druge, jer je ovde ceo smisao duel. */
.dt-area {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 16px;
  width: 100%; padding: 10px 0 22px;
}
.dt-side { text-align: center; min-width: 0; }
.dt-side .lbl {
  margin-bottom: 10px;
  font: 600 11px/1 var(--f-ui); letter-spacing: .16em; color: var(--text-low);
}
.dt-side .lbl b {
  display: inline-block; min-width: 22px; margin-left: 8px;
  color: var(--text-hi); font-family: var(--f-num); font-size: 15px; letter-spacing: 0;
}
.dt-side.pobednik .lbl,
.dt-side.pobednik .lbl b { color: var(--jade-300); }
.dt-vs {
  font: 600 12px/1 var(--f-ui); letter-spacing: .16em; color: var(--text-dis);
  padding: 0 4px;
}
.dt-area .cards { min-height: 104px; perspective: 900px; }

/* -------------------------------------------------------------- VISA/NIZA */
.hl-stol {
  display: grid; grid-template-columns: auto 1fr;
  align-items: center; gap: 24px;
  width: 100%; max-width: 480px; margin: 0 auto;
}
.hl-karta { perspective: 900px; }
.hl-karta .pcard { width: 92px; height: 128px; font-size: 28px; }

.hl-dugmad { display: grid; gap: 10px; }
.hl-btn {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 10px; padding: 12px 14px;
  background: linear-gradient(180deg, #172C23, #101E18);
  border: 1px solid var(--line-hi); border-radius: var(--r-ctl);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  transition: transform var(--t-press), border-color var(--t-press);
}
.hl-btn:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(31,169,123,.5); }
.hl-btn:disabled { opacity: .4; }
.hl-strelica { font-size: 15px; color: var(--jade-300); }
.hl-btn#hl-nize .hl-strelica { color: var(--verm-300); }
.hl-ime { text-align: left; font-size: 13px; color: var(--text-hi); }
.hl-x {
  font-family: var(--f-num); font-variant-numeric: tabular-nums;
  font-size: 14px; color: var(--gold-300);
}
/* sansa stoji ispod kvote - da se vidi zasto je kvota tolika */
.hl-p {
  grid-column: 2 / 4; text-align: right;
  font-family: var(--f-num); font-size: 11px; color: var(--text-low);
}

.hl-niz { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 20px; }
.hl-korak { position: relative; opacity: .75; }
.hl-korak .pcard { width: 38px; height: 54px; font-size: 12px; box-shadow: none; }
.hl-korak .hl-smer {
  position: absolute; right: -2px; bottom: -2px;
  width: 15px; height: 15px; border-radius: 999px;
  display: grid; place-items: center; font-size: 8px;
  background: var(--jade-500); color: #04120C;
}
.hl-korak.ne .hl-smer { background: var(--verm-500); color: #1A0605; }

/* ------------------------------------------------------------------ PLINKO */
.pl-tabla { position: relative; width: 100%; max-width: 520px; margin: 0 auto; }
#pl-canvas {
  width: 100%; height: 420px; display: block;
  background: var(--bg-inset);
  border: 1px solid var(--line); border-radius: var(--r-card);
}
.pl-kante {
  display: flex; gap: 3px; justify-content: center;
  margin-top: 8px; flex-wrap: nowrap;
}
.pl-kanta {
  flex: 1 1 0; min-width: 0;
  padding: 5px 2px; border-radius: var(--r-chip);
  text-align: center;
  font-family: var(--f-num); font-variant-numeric: tabular-nums;
  font-size: 10px; line-height: 1.1;
  transition: transform var(--t-press), background var(--t-state);
}
/* boja nosi rang isplate - ivice su zlatne, sredina bledi */
.pl-kanta.dno  { background: var(--bg-raised); color: var(--text-low); }
.pl-kanta.sred { background: var(--jade-900); color: var(--jade-300); }
.pl-kanta.vrh  { background: var(--gold-900); color: var(--gold-300); }
.pl-kanta.pogodak {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px var(--gold-500), 0 4px 14px rgba(201,162,39,.35);
  animation: popIn 260ms var(--e-in);
}

@media (max-width: 768px) {
  .dt-area { gap: 8px; }
  .dt-vs { font-size: 10px; }
  .hl-stol { grid-template-columns: 1fr; justify-items: center; gap: 16px; }
  .hl-dugmad { width: 100%; }
  .hl-karta .pcard { width: 76px; height: 106px; font-size: 24px; }
  #pl-canvas { height: 300px; }
  .pl-kanta { font-size: 8px; padding: 4px 1px; }
}

/* ------------------------------------------------------------------- MINES */
.mgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: 100%; max-width: 420px; margin: 0 auto; }
.mcell {
  aspect-ratio: 1/1;
  background: linear-gradient(180deg, #172C23, #101E18);
  border: 1px solid var(--line-hi); border-radius: var(--r-ctl);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.4);
  font-size: 24px;
  transition: transform var(--t-press), border-color var(--t-press), background var(--t-state);
}
.mcell:hover:not(:disabled) { transform: translateY(-3px); border-color: rgba(31,169,123,.45); }
.mcell:active:not(:disabled) { transform: translateY(0); }
.mcell.gem  { background: var(--jade-900); border-color: transparent; animation: cellOpen 320ms var(--e-in); }
.mcell.bomb { background: var(--verm-900); border-color: transparent; animation: cellOpen 320ms var(--e-in); }
.mcell.dim  { opacity: .4; }
@keyframes cellOpen { from { transform: rotateY(88deg); } }

/* ------------------------------------------------------------------ TOWERS */
.tower { display: flex; flex-direction: column-reverse; gap: 6px; width: 100%; max-width: 400px; margin: 0 auto; }
.trow { display: flex; gap: 6px; align-items: stretch; transition: opacity var(--t-state); }
.trow.past { opacity: .42; }
.trow.active { outline: 1px solid var(--gold-500); outline-offset: 4px; border-radius: var(--r-ctl); }
.tcell {
  flex: 1; height: 46px; border-radius: var(--r-ctl);
  background: linear-gradient(180deg, #172C23, #101E18);
  border: 1px solid var(--line-hi);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.4);
  font-size: 18px; color: var(--text-mid);
  transition: transform var(--t-press), border-color var(--t-press);
}
.tcell:hover:not(:disabled) { transform: translateY(-3px); border-color: rgba(31,169,123,.45); }
.tcell.safe { background: var(--jade-900); border-color: transparent; animation: cellOpen 320ms var(--e-in); }
.tcell.bomb { background: var(--verm-900); border-color: transparent; animation: cellOpen 320ms var(--e-in); }
.trow .mx {
  flex: 0 0 56px; display: grid; place-items: center;
  font-family: var(--f-num); font-variant-numeric: tabular-nums; font-size: 11px;
  color: var(--text-low);
}
.trow.active .mx { color: var(--gold-300); }
.trow.past .mx { color: var(--jade-300); }

/* ------------------------------------------------------------------ ostalo */
.result-line { min-height: 22px; margin-top: 12px; font-size: 13px; }
.result-line.win  { color: var(--jade-300); }
.result-line.lose { color: var(--verm-300); }
.empty { padding: 26px 16px; text-align: center; color: var(--text-low); font-size: 13px; }

@media (max-width: 768px) {
  #crash-canvas { height: 260px; }
  .crash-mult { font-size: 46px; }
  .crash-mult.betting { font-size: 24px; }
  .wheel-box { width: 240px; height: 240px; }
  .wheel-center { width: 62px; height: 62px; font-size: 21px; }
  .pcard { width: 58px; height: 82px; font-size: 18px; }
  .coin3d { width: 150px; height: 150px; }
  .coin3d .face { font-size: 54px; }
  .bc-field { height: 66px; }
  .bc-field .n { font-size: 11px; letter-spacing: .06em; }
  .bc-field .o { display: none; }
}

/* ============================================================ ISHOD RUNDE
   Velika oznaka preko igre kad se pokupi dobitak. Jedina stvar na ekranu
   koja sme da se pojavi preko svega - zato je kratka i sama nestane. */
.game-area { position: relative; }
.win-pop {
  position: absolute; left: 50%; top: 42%;
  transform: translate(-50%,-50%);
  display: grid; justify-items: center; gap: 6px;
  padding: 16px 30px 18px;
  min-width: 190px; max-width: 86%;
  pointer-events: none; z-index: 20;
  /* plocica, ne crni kvadrat: ista zelenkasta podloga kao paneli,
     zlatna nit okolo i jedva vidljiv jade sjaj ispod */
  background:
    linear-gradient(180deg, rgba(19,36,29,.96), rgba(7,16,9,.97));
  border: 1px solid var(--line-gold);
  border-radius: var(--r-card);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 18px 50px rgba(0,0,0,.65),
    0 0 60px rgba(31,169,123,.14);
  animation: winPop 2200ms var(--e-in) forwards;
}
/* tanka zlatna linija na vrhu - isti ornament kao na header trakama */
.win-pop::before {
  content: "";
  position: absolute; left: 14px; right: 14px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
}
.win-pop .wl {
  font: 500 10px/1 var(--f-disp);
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--gold-300); opacity: .85;
}
.win-pop .wm {
  font: 500 52px/1 var(--f-num); font-variant-numeric: tabular-nums;
  letter-spacing: -.03em; color: var(--jade-300);
  text-shadow: 0 0 40px rgba(53,200,148,.45), 0 4px 20px rgba(0,0,0,.7);
}
.win-pop .wp {
  font: 500 20px/1 var(--f-num); font-variant-numeric: tabular-nums;
  color: var(--gold-300);
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
}
.win-pop.loss { border-color: rgba(214,69,47,.35); box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 18px 50px rgba(0,0,0,.65),
    0 0 60px rgba(214,69,47,.12); }
.win-pop.loss::before { background: linear-gradient(90deg, transparent, var(--verm-500), transparent); }
.win-pop.loss .wl { color: var(--verm-300); }
.win-pop.loss .wm { color: var(--verm-300); text-shadow: 0 0 40px rgba(240,122,99,.4), 0 4px 20px rgba(0,0,0,.7); }
.win-pop.loss .wp { color: var(--verm-300); }

@media (max-width: 560px) {
  .win-pop { padding: 13px 22px 15px; min-width: 158px; }
  .win-pop .wm { font-size: 40px; }
  .win-pop .wp { font-size: 17px; }
}
@keyframes winPop {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.7); }
  10%  { opacity: 1; transform: translate(-50%,-50%) scale(1.06); }
  18%  { transform: translate(-50%,-50%) scale(1); }
  75%  { opacity: 1; transform: translate(-50%,-54%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-64%) scale(1); }
}

/* obavestenje uprave */
.announce {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; padding: 10px 14px;
  background: var(--gold-900); border: 1px solid var(--line-gold);
  border-radius: var(--r-ctl);
  font-size: 13px; color: var(--gold-300);
  animation: announceIn var(--t-enter) var(--e-in);
}
@keyframes announceIn { from { transform: translateY(-8px); opacity: 0; } }

/* dopunske varijante dugmadi koje igre koriste */
.btn.red { background: linear-gradient(180deg, var(--verm-300), var(--verm-500) 55%, #B03824); color: #1A0605; }
.btn.red:hover:not(:disabled) { background: linear-gradient(180deg, #F79582, var(--verm-300) 55%, var(--verm-500)); }
/* .green je isto sto i osnovno dugme - nasledjuje gradijent, ne gazi ga */
.btn.blue {
  background: linear-gradient(180deg, #1B3229, #12211B);
  color: var(--text-hi); border: 1px solid var(--line-gold);
  box-shadow: inset 0 1px 0 rgba(201,162,39,0.12);
}
.btn.blue:hover:not(:disabled) { border-color: var(--gold-500); color: var(--gold-300); }

/* poštovanje sistemskog izbora - ko gasi animacije, gasi ih svuda */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================ ČIPOVI
   Pravi kazino cip: telo, uvuceni prsten, i sest belih useka na ivici.
   Useci se crtaju conic-gradientom pa nema nijedne dodatne oznake u HTML-u. */
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chipbtn {
  position: relative;
  width: 46px; height: 46px; border-radius: 999px;
  border: none; padding: 0;
  color: var(--text-hi);
  font-family: var(--f-num); font-variant-numeric: tabular-nums;
  font-size: 11px; font-weight: 500;
  display: grid; place-items: center;
  /* useci na ivici + telo cipa; boja tela dolazi iz .chip-c* */
  background-image:
    conic-gradient(from 15deg, rgba(255,255,255,.85) 0 6deg, transparent 6deg 60deg,
      rgba(255,255,255,.85) 60deg 66deg, transparent 66deg 120deg,
      rgba(255,255,255,.85) 120deg 126deg, transparent 126deg 180deg,
      rgba(255,255,255,.85) 180deg 186deg, transparent 186deg 240deg,
      rgba(255,255,255,.85) 240deg 246deg, transparent 246deg 300deg,
      rgba(255,255,255,.85) 300deg 306deg, transparent 306deg 360deg);
  box-shadow: 0 2px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform var(--t-press), box-shadow var(--t-press);
}
/* telo cipa preko useka, tako da useci vire samo po obodu */
.chipbtn::before {
  content: ""; position: absolute; inset: 4px; border-radius: 999px;
  background: var(--cip, var(--bg-raised));
}
/* uvuceni prsten - ono po cemu se cip prepoznaje iz daljine */
.chipbtn::after {
  content: ""; position: absolute; inset: 8px; border-radius: 999px;
  border: 1px dashed rgba(255,255,255,.22);
}
.chipbtn { isolation: isolate; }
.chipbtn::before { z-index: -2; }   /* telo, preko useka */
.chipbtn::after  { z-index: -1; }   /* uvuceni prsten */

.chipbtn:hover { transform: translateY(-3px); }
.chipbtn.sel {
  transform: translateY(-3px);
  box-shadow: 0 0 0 2px var(--gold-500), 0 4px 12px rgba(0,0,0,.55);
}
.chipbtn.sel::after { border-style: solid; border-color: rgba(255,255,255,.35); }

/* vrednosti - svaka svoju boju, kao na pravom stolu */
.chipbtn.chip-c0 { --cip: linear-gradient(180deg, #16523E, #0C3A2C); }
.chipbtn.chip-c1 { --cip: linear-gradient(180deg, #17414F, #10303A); }
.chipbtn.chip-c2 { --cip: linear-gradient(180deg, #5C4A12, #3A2E08); }
.chipbtn.chip-c3 { --cip: linear-gradient(180deg, #5C2113, #3E120B); }
.chipbtn.chip-c4 { --cip: linear-gradient(180deg, #35264A, #241A2E); }
.chipbtn.chip-c5 { --cip: linear-gradient(180deg, #6B5310, #4A3808); }
/* veliki cipovi - 1K crni, 2K kraljevsko plavi, 5K zlatni (kao na pravom stolu,
   najveci je najupadljiviji) */
.chipbtn.chip-c6 { --cip: linear-gradient(180deg, #26272C, #0D0E11); }
.chipbtn.chip-c7 { --cip: linear-gradient(180deg, #1E4287, #112757); }
.chipbtn.chip-c8 { --cip: linear-gradient(180deg, #E3C15A, #A67C12); color: #1A1204; font-weight: 700; }
.chipbtn.chip-c8::after { border-color: rgba(26,18,4,.35); }
.chipbtn.chip-c8.sel::after { border-color: rgba(26,18,4,.55); }

/* isti cip, sicusan, kad stoji na polju */
.cellchip {
  position: absolute; right: 2px; bottom: 2px;
  min-width: 19px; height: 19px; padding: 0 3px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--gold-500); color: #150F00;
  border: 1px dashed rgba(0,0,0,.35);
  font-family: var(--f-num); font-variant-numeric: tabular-nums;
  font-size: 9px; line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
  animation: popIn 160ms var(--e-in);
}

/* ============================================================ GLIFOVI
   Predmeti u igrama prate font-size roditelja, pa postojece animacije
   koje menjaju font-size (lopta u penalima) rade netaknute. */
.glif-em { width: 1em; height: 1em; display: block; }
.mcell, .tcell, .pen-dot, .bc-field { display: grid; place-items: center; }
.mcell svg, .tcell svg, .pen-dot svg { display: block; }

/* ikona uz naslov ili u dugmetu - uvek u istoj liniji sa tekstom */
h3 svg, .bonus-head svg, .announce svg, .profil-ime svg,
.wager-lock svg, .wager-ok svg, .seg button svg, .slot-info svg {
  vertical-align: -2px; flex: none;
}
h3, .bonus-head, .profil-ime, .wager-lock, .wager-ok {
  display: flex; align-items: center; gap: 8px;
}
.seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.rc svg { display: block; margin: 0 auto; }

/* statusi tiketa: boja nosi znacenje umesto emojia */

/* mec koji je poceo - kladjenje zatvoreno */
.sport-time .zatvoreno {
  font: 600 10px/1 var(--f-ui); letter-spacing: .12em;
  padding: 3px 6px; border-radius: var(--r-chip);
  background: var(--verm-900); color: var(--verm-300);
}


/* ============================================================
   POKRET — jedinstven recnik krivih i scena za sve igre.
   Ova sekcija namerno ide POSLEDNJA: dopunjuje ranije blokove.
   ============================================================ */

:root {
  --e-settle:  cubic-bezier(.16,1,.3,1);
  --e-spring:  cubic-bezier(.34,1.56,.64,1);
  --e-rise:    cubic-bezier(.12,.72,.35,1);
  --e-fall:    cubic-bezier(.6,.04,.98,.58);
}

/* ---------------------------------------------------------------- sto
   Igra se odvija na povrsini, ne u praznoj crnoj kutiji. Tri sloja:
   toplo svetlo odozgo, tkanje filca, i tamnjenje ka ivicama. */
.game-canvas {
  position: relative;
  overflow: hidden;
  min-height: clamp(360px, calc(100vh - 148px), 640px);
  background:
    radial-gradient(78% 62% at 50% 6%, rgba(31,169,123,.075) 0%, transparent 62%),
    radial-gradient(120% 96% at 50% 44%, #0C1C15 0%, #081410 58%, #050C09 100%);
}
/* tkanje filca - dve ukrstene niti, jedva vidljive */
.game-canvas::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.016) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.16) 0 1px, transparent 1px 4px);
}
/* tamnjenje ka ivicama + zlatna nit po obodu stola */
.game-canvas::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(201,162,39,.07),
    inset 0 60px 90px -60px rgba(0,0,0,.75),
    inset 0 -70px 90px -60px rgba(0,0,0,.85);
}
.game-canvas > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------- COINFLIP */
/* Novcic lezi PRI DNU stola, pa iznad njega ostaje vazduh za bacak.
   Visine su uskladjene sa lukom iz app.js (polet 168px) - ako se luk
   menja, i ova visina mora, inace se novcic secka o gornju ivicu. */
.coin-stage {
  position: relative;
  display: grid; place-items: end center;
  width: 100%; height: 100%; min-height: 360px;
  padding-bottom: 54px;
  perspective: 1400px;
  perspective-origin: 50% 62%;
}
/* senka lezi na stolu i prati visinu novcica (JS je animira) */
.coin-shadow {
  position: absolute; left: 50%; bottom: 40px;
  width: 138px; height: 22px; margin-left: -69px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 72%);
  opacity: .5;
  will-change: transform, opacity;
}
/* kontejner leti (translateY + squash), .inner se obrce - dve odvojene uloge */
.coin3d {
  width: 150px; height: 150px; margin: 0;
  perspective: none;
  will-change: transform;
}
.coin3d .inner { transition: none; will-change: transform; }
/* stara beskonacna vrtnja vise ne postoji - bacak vodi JS */
.coin3d.flipping .inner { animation: none; }
/* kratak sjaj po obodu u trenutku dodira sa stolom */
.coin3d.landed .face { animation: coinLand 400ms var(--e-settle); }
@keyframes coinLand {
  0%   { box-shadow: inset 0 0 0 6px rgba(201,162,39,.15), 0 10px 30px rgba(0,0,0,.5),
                     0 0 0 0 rgba(201,162,39,.55); }
  35%  { box-shadow: inset 0 0 0 6px rgba(201,162,39,.28), 0 4px 14px rgba(0,0,0,.6),
                     0 0 26px 6px rgba(201,162,39,.22); }
  100% { box-shadow: inset 0 0 0 6px rgba(201,162,39,.15), 0 10px 30px rgba(0,0,0,.5),
                     0 0 0 0 rgba(201,162,39,0); }
}

/* -------------------------------------------------------------- DICE */
.dice-wrap { padding-top: 64px; padding-bottom: 26px; }
/* dok putuje, klizac se izduzi u pravcu kretanja - daje mu brzinu */
.dice-pin { transition: none; will-change: left; }
.dice-pin.rolling i { transform: scaleY(1.14) scaleX(.8); filter: blur(.4px); }
.dice-pin i { transition: transform 160ms var(--e-settle), filter 160ms linear,
                          border-color var(--t-state), box-shadow var(--t-state); }
.dice-pin.hit-win  i { border-color: var(--jade-400); box-shadow: 0 0 18px rgba(53,200,148,.55); }
.dice-pin.hit-lose i { border-color: var(--verm-500); box-shadow: 0 0 18px rgba(214,69,47,.5); }
.dice-pin.hit-win  { animation: pinThunk 420ms var(--e-spring); }
.dice-pin.hit-lose { animation: pinThunk 420ms var(--e-spring); }
@keyframes pinThunk {
  0%   { transform: translateY(-7px); }
  55%  { transform: translateY(2px); }
  100% { transform: translateY(0); }
}
/* traka bljesne u boji ishoda */
.dice-bar.flash-win::after, .dice-bar.flash-lose::after {
  content: ""; position: absolute; inset: -3px;
  border-radius: var(--r-chip); pointer-events: none;
  animation: barFlash 420ms var(--e-settle);
}
.dice-bar.flash-win::after  { box-shadow: 0 0 0 1px var(--jade-400), 0 0 22px rgba(53,200,148,.4); }
.dice-bar.flash-lose::after { box-shadow: 0 0 0 1px var(--verm-500), 0 0 22px rgba(214,69,47,.35); }
@keyframes barFlash { from { opacity: 1; } to { opacity: 0; } }

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

/* velika cifra ishoda - daje bacanju tezinu i popunjava sto */
.dice-wrap { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.dice-readout { text-align: center; margin-bottom: 46px; }
.ro-num {
  font-family: var(--f-num); font-variant-numeric: tabular-nums;
  font-size: clamp(52px, 8vw, 92px); font-weight: 500; line-height: 1;
  letter-spacing: -.03em;
  color: var(--text-dis);
  transition: color 220ms var(--e-settle), text-shadow 220ms var(--e-settle);
}
.ro-lbl {
  margin-top: 10px;
  font: 600 11px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-low);
}
.dice-readout.rolling .ro-num { color: var(--text-mid); }
.dice-readout.win  .ro-num {
  color: var(--jade-300); text-shadow: 0 0 34px rgba(53,200,148,.35);
  animation: roHit 460ms var(--e-spring);
}
.dice-readout.lose .ro-num {
  color: var(--verm-300); text-shadow: 0 0 34px rgba(214,69,47,.28);
  animation: roHit 460ms var(--e-spring);
}
.dice-readout.win .ro-lbl  { color: var(--jade-400); }
.dice-readout.lose .ro-lbl { color: var(--verm-300); }
@keyframes roHit { 0% { transform: scale(1.14); } 60% { transform: scale(.985); } 100% { transform: scale(1); } }

/* ------------------------------------------------------------- CRASH */
/* crveni bljesak preko scene u trenutku pada - traje kratko, ne smeta */
.crash-stage { position: relative; }
.crash-stage.bust::after {
  content: "";
  position: absolute; inset: 0; z-index: 4;
  pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 90% at 50% 50%, rgba(214,69,47,.20) 0%, rgba(214,69,47,0) 70%);
  box-shadow: inset 0 0 0 1px rgba(214,69,47,.45);
  animation: bustFlash 460ms var(--e-settle);
}
@keyframes bustFlash { from { opacity: 1; } to { opacity: 0; } }

/* ------------------------------------------------------- MINES / TOWERS
   Polje se okrece u prostoru (perspektiva na roditelju), pa "dosedne" -
   stara animacija je bila ravan rotateY bez tezine. */
.mgrid, .tower { perspective: 900px; }

.mcell.gem, .tcell.safe {
  animation: pollePogodak 460ms var(--e-settle) both;
}
.mcell.bomb, .tcell.bomb {
  animation: poljeBomba 520ms var(--e-settle) both;
}
@keyframes pollePogodak {
  0%   { transform: rotateY(92deg) scale(.94); }
  55%  { transform: rotateY(-7deg) scale(1.05); }
  78%  { transform: rotateY(3deg) scale(.99); }
  100% { transform: rotateY(0) scale(1); }
}
@keyframes poljeBomba {
  0%   { transform: rotateY(92deg) scale(.94); }
  42%  { transform: rotateY(0) scale(1.12); }
  56%  { transform: translateX(-4px) scale(1.06); }
  68%  { transform: translateX(4px) scale(1.04); }
  80%  { transform: translateX(-2px) scale(1.01); }
  100% { transform: translateX(0) scale(1); }
}
/* znak u polju ulece tek kad se polje okrenulo - inace se vidi kroz "ledja" */
.mcell.gem svg, .tcell.safe svg {
  animation: znakUpad 380ms var(--e-spring) 140ms both;
}
.mcell.bomb svg, .tcell.bomb svg {
  animation: znakUdar 420ms var(--e-spring) 120ms both;
}
@keyframes znakUpad {
  from { transform: scale(.3); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes znakUdar {
  0%   { transform: scale(.4); opacity: 0; }
  45%  { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
/* trag eksplozije oko mine */
.mcell.bomb, .tcell.bomb { position: relative; }
.mcell.bomb::after, .tcell.bomb::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(214,69,47,.6);
  animation: bombaTalas 620ms var(--e-settle) 100ms both;
}
@keyframes bombaTalas {
  from { box-shadow: 0 0 0 0 rgba(214,69,47,.6); opacity: 1; }
  to   { box-shadow: 0 0 0 18px rgba(214,69,47,0); opacity: 0; }
}
/* dobitno polje pri naplati blago svetli */
.mcell.gem  { box-shadow: inset 0 0 0 1px rgba(53,200,148,.25); }
.tcell.safe { box-shadow: inset 0 0 0 1px rgba(53,200,148,.25); }

/* ------------------------------------------------------------- KARTE
   Deljenje: karta dolazi iz spila gore-desno, sa lukom i blagim prebacajem. */
@keyframes dealIn {
  0%   { transform: translate(92px, -68px) rotate(-16deg) scale(.92); opacity: 0; }
  60%  { opacity: 1; }
  76%  { transform: translate(-5px, 4px) rotate(2deg) scale(1.02); }
  100% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
}
@keyframes cardFlip {
  0%   { transform: rotateY(180deg) scale(.96); }
  70%  { transform: rotateY(-8deg) scale(1.03); }
  100% { transform: rotateY(0) scale(1); }
}

/* ------------------------------------------------------------ PLINKO
   Kanta primi udarac: ugne se nadole pa iskoci - kao da je kuglica teska. */
.pl-kanta.pogodak {
  animation: kantaUdar 560ms var(--e-spring);
  box-shadow: 0 0 0 1px var(--gold-500), 0 6px 20px rgba(201,162,39,.45);
  z-index: 2;
}
@keyframes kantaUdar {
  0%   { transform: translateY(0) scaleY(1); }
  16%  { transform: translateY(5px) scaleY(.78); }
  46%  { transform: translateY(-7px) scaleY(1.12); }
  72%  { transform: translateY(2px) scaleY(.96); }
  100% { transform: translateY(0) scaleY(1); }
}

/* --------------------------------------------------------- telefon
   Na uskom ekranu sto stoji ISPOD panela za ulog, pa mora da bude nizak -
   inace igrac skroluje kroz prazno filc polje da bi video igru. */
@media (max-width: 768px) {
  .game-canvas { min-height: 268px; }
  /* Sest zona na telefonu: sire i vise, da se prsti ne gadjaju u prazan
     razmak izmedju njih. Golman je ovde skoro velik kao zona, pa se i on
     smanjuje da ne zaklanja pogled na sredinu. */
  .zone { width: 32%; height: 46%; }
  .keeper { width: 34px; height: 46px; }
  .gk-torso { top: 12px; width: 19px; height: 22px; }
  .gk-arm { top: 14px; width: 12px; }
  .gk-legs i { height: 12px; }
  .coin-stage { height: 238px; min-height: 0; padding-bottom: 20px; }
  .coin3d { width: 118px; height: 118px; }
  .coin-shadow { width: 108px; height: 18px; margin-left: -54px; bottom: 18px; }
  .dice-wrap { padding-top: 22px; padding-bottom: 14px; }
  .dice-readout { margin-bottom: 30px; }
  .ro-num { font-size: 48px; }
}

/* ------------------------------------------------------------- PENALI
   Lopta se vrti dok leti i malo uspori pred golom - dosad je klizila
   ravnomerno, sto je odavalo da je u pitanju obicna CSS tranzicija. */
.ball {
  transition: left 460ms var(--e-rise), top 460ms var(--e-rise),
              font-size 460ms var(--e-rise);
}
.ball.flying svg { animation: loptaVrti 620ms linear infinite; transform-origin: 50% 50%; }
@keyframes loptaVrti { to { transform: rotate(360deg); } }

/* golman se baca naglo pa se zaustavi - ne klizi kao na sinama */
.keeper { transition: left 400ms var(--e-spring), top 400ms var(--e-spring),
                      transform 400ms var(--e-spring); }

/* mreza se zatalasa kad lopta udje */
.goal.gol::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 40px rgba(53,200,148,.45);
  animation: mrezaTalas 620ms var(--e-settle);
}
@keyframes mrezaTalas { from { opacity: 1; } to { opacity: 0; } }

/* teren koristi celu visinu stola umesto da lebdi u gornjoj polovini */
.pitch { max-width: min(640px, 100%); aspect-ratio: 4 / 3; }
@media (min-width: 769px) {
  .game-canvas > .pitch,
  .pitch { max-height: 100%; }
}

/* ============================================================ DODIR
   Na telefonu je minimum za prst 44x44 px (Apple i Google smernice). Ranije
   su dugmici za ulog bili 27x26, odjava 28x28, polja ruleta 37x30 - igraci
   su promasivali. Sve sto se dodiruje ovde dobija bar 44 px u bar jednom
   pravcu, a po pravilu u oba. */

/* znak gore levo vodi na pocetnu */
.topbar .brand { padding: 4px 6px 4px 0; border-radius: var(--r-ctl); }
.topbar .brand:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 2px; }
.topbar .brand:hover .brand-mark { border-color: var(--gold-300); }
.bal-block { cursor: pointer; }

/* novcanik (dodir na balans) */
.nov-stanje {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 16px 18px; margin: 4px 0 14px;
  background: var(--bg-inset); border: 1px solid var(--line); border-radius: var(--r-card);
}
.nov-stanje span { font: 600 11px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--text-low); }
.nov-stanje b { font: 600 24px/1 var(--f-num); color: var(--gold-300); font-variant-numeric: tabular-nums; }
.nov-dugmad { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.nov-tel { margin-top: 14px; text-align: center; }
.profil-odjava { margin-top: 24px; }

@media (max-width: 768px) {
  /* gornja traka: Uplata i Isplata jedna do druge - isplata je ono sto
     igrac najvise trazi, ne sme da bude sakrivena u meniju */
  .topbar { gap: 6px; }
  .topbar #btn-cashout { display: inline-flex; }
  .topbar .brand-mark { width: 36px; height: 36px; font-size: 17px; }
  .topbar .btn.sm { height: 40px; padding: 0 14px; font-size: 13px; }
  .bal-block { min-height: 44px; padding: 4px 8px; }
  .avatar { width: 40px; height: 40px; font-size: 14px; }

  /* iznos uloga: 1/2, 2x, MAX su bili 27x26 */
  .input-wrap input { height: 52px; padding-right: 150px; font-size: 18px; }
  .mini { height: 44px; min-width: 44px; padding: 0 10px; font-size: 13px; }
  .input-wrap > .mini:nth-of-type(1) { right: 100px; }
  .input-wrap > .mini:nth-of-type(2) { right: 52px; }
  .input-wrap > .mini:nth-of-type(3) { right: 4px; }

  /* prekidaci (ispod/iznad, pismo/glava, rizik) */
  .seg { height: 48px; padding: 4px; }
  .seg button { font-size: 14px; }

  /* klizac sanse kod Dice: input je i staza. Dodirna zona 40 px, a vidljiva
     staza ostaje tanka traka (pozadina nacrtana samo po sredini). */
  input[type="range"] {
    height: 40px; border: 0;
    background: linear-gradient(var(--line-hi), var(--line-hi)) center / 100% 10px no-repeat;
  }
  input[type="range"]::-webkit-slider-thumb { width: 22px; height: 40px; border-radius: 4px; }
  input[type="range"]::-moz-range-thumb { width: 22px; height: 40px; border-radius: 4px; }

  /* rulet: polja stola i Vrati / Ocisti */
  .rc { height: 42px; font-size: 13px; }
  .rtable { grid-template-columns: repeat(14, minmax(40px, 1fr)); min-width: 600px; }
  #rt-undo, #rt-clear { min-height: 44px; }

  /* slot: - / + i ulog */
  .slot-bt { width: 44px; height: 44px; font-size: 20px; }
  .slot-controls #bet { height: 44px; }

  /* Kazino filteri, futer */
  .kz-cip { height: 42px; padding: 0 16px; }
  .futer-kol { gap: 0; }
  .futer-kol a { padding: 10px 0; }
  .futer-dole { margin-top: 12px; }

  /* dugmad u prozorima */
  .modal-x { width: 44px; height: 44px; }
  .futer-cta .btn.sm { height: 44px; width: 100%; font-size: 14px; }
  .slot-info { min-height: 44px; }
}

/* uski telefoni (iPhone SE, manji Android): da logo, balans, Uplata, Isplata
   i krug stanu u jedan red - sklanja se ikonica novcica i "RSD" ispod iznosa */
@media (max-width: 400px) {
  .topbar { padding: 0 8px; gap: 5px; }
  .topbar .bal-coin, .topbar .bal-cur { display: none; }
  .topbar .btn.sm { padding: 0 11px; font-size: 12.5px; }
  .topbar .brand { padding-right: 0; }
  .topbar .brand-mark { width: 34px; height: 34px; }
  .avatar { width: 38px; height: 38px; }
  .bal-block { padding: 4px 4px; }
}
@media (max-width: 340px) {
  .topbar .btn.sm { padding: 0 8px; font-size: 12px; }
  #balance-val { font-size: 14px; }
}

/* ============================================================ PENALI — FOTO
   Stadion je slika (web/penali/stadion.webp), gol na njoj je izmeren:
   unutrasnjost 19.18%-80.74% sirine, 29.43%-63.75% visine. .goal lezi
   tacno preko toga, pa zone i golman stoje u pravom golu. */
.pitch.pitch-foto {
  background: #0A1310;
  border-color: var(--line-hi);
  overflow: hidden;
}
/* sve sto je deo slike (stadion, gol, golman, lopta) zivi u .sceni - tako
   se na telefonu cela scena uveca ka golu i nista ne izadje iz poravnanja */
.pitch-foto .scena {
  position: absolute; inset: 0;
  background: url("/static/penali/stadion.webp") center / cover no-repeat;
}
/* blago zatamnjenje ivica, da oko ide na gol */
.pitch.pitch-foto::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(4,10,8,.55));
}
.pitch-foto .goal {
  left: 19.18%; right: 19.26%; top: 29.43%; height: 34.32%;
  border: none; background: none; z-index: 1;
}
/* mreza se zatalasa kod gola - svetli talas preko cele mreze */
.pitch-foto .goal.gol::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 50%, rgba(255,255,255,.28), transparent 70%);
  animation: mrezaTalas 680ms var(--e-settle);
}

/* golman: okvir se pomera (Web Animations), slika unutra se samo njise */
.gk-okvir {
  position: absolute; z-index: 2; pointer-events: none;
  transform: translate(-50%, -50%);
  will-change: left, top, width, height, transform;
}
.gk-slika {
  width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
  display: block; user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.55));
}
.gk-okvir.ceka .gk-slika { animation: golmanCeka 1.5s ease-in-out infinite; }
@keyframes golmanCeka {
  0%, 100% { translate: -2% 0; }
  50%      { translate:  2% -1.5%; }
}
.gk-senka {
  position: absolute; left: 50%; bottom: -3%; width: 22%; height: 8%;
  transform: translateX(-50%); border-radius: 50%; z-index: 1;
  background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent);
  transition: opacity 180ms;
}

/* mete: krugovi (kao mete na treningu), ne kvadrati. Velicina ide od visine
   gola, sirina iz aspect-ratio - krug ostaje krug na svakoj sirini ekrana */
.pitch-foto .zone {
  z-index: 3;
  /* gol je uvek 2.392 puta siri nego visi (teren je 4:3, gol je izmeren),
     pa krug = visina H% i sirina H/2.392 %. aspect-ratio ovde ne radi:
     natpis unutra drzi minimalnu sirinu dugmeta i krug postane elipsa */
  height: 40%; width: calc(40% / 2.392);
  padding: 0; min-width: 0; overflow: hidden;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.55);
  background: radial-gradient(circle, rgba(255,255,255,.10) 0 30%, transparent 31% 100%),
              rgba(4,10,8,.18);
  box-shadow: 0 0 0 4px rgba(255,255,255,.06), 0 2px 10px rgba(0,0,0,.35);
  color: transparent;
  font-weight: 700; font-size: 13px;
  transition: background var(--t-press), border-color var(--t-press), color var(--t-press);
}
.pitch-foto .zone:hover:not(:disabled),
.pitch-foto .zone:focus-visible {
  background: radial-gradient(circle, rgba(102,224,176,.35) 0 30%, rgba(31,169,123,.28) 31% 100%);
  border-color: var(--jade-300); color: #fff;
  box-shadow: 0 0 0 4px rgba(53,200,148,.25), 0 0 18px rgba(53,200,148,.45);
  text-shadow: 0 1px 4px rgba(0,0,0,.8); outline: none;
  transform: translate(-50%, -50%) scale(1.06);
}
.pitch-foto .zone:disabled { border-color: rgba(255,255,255,.18); box-shadow: none;
                             background: rgba(4,10,8,.10); }

/* lopta na beloj tacki */
.lopta {
  position: absolute; z-index: 4; pointer-events: none;
  transform: translate(-50%, -50%);
  aspect-ratio: 1; height: auto;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.5));
  user-select: none; -webkit-user-drag: none;
  will-change: left, top, width, transform, opacity;
}
.lopta-senka {
  position: absolute; left: 50%; top: 90.5%; width: 7%; height: 1.6%;
  transform: translateX(-50%); border-radius: 50%; z-index: 3;
  background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent);
  transition: opacity 120ms;
}
.pitch-foto .pen-flash { z-index: 6; }

@media (max-width: 768px) {
  /* na telefonu su zone vec 32%x46% (vidi DODIR) - ovde samo vidljivije
     ivice, jer nema hovera koji bi ih otkrio */
  /* bez natpisa: isti mnozilac vec pise u "Sledeci gol nosi", a ovde bi
     pokrivao golmana i loptu */
  .pitch-foto .zone { height: 42%; width: calc(42% / 2.392);
                      color: transparent !important; text-shadow: none; }
  .pitch-foto .zone:active:not(:disabled) {
    background: rgba(31,169,123,.45); border-color: var(--jade-300);
  }
  /* veci gol: scena se uveca 1.42x oko tacke ispod gola, pa gol zauzima
     ~87% sirine a bela tacka sa loptom i dalje ostaje u kadru */
  .pitch-foto .scena { transform: scale(1.42); transform-origin: 50% 80%; }
}
@media (prefers-reduced-motion: reduce) {
  .gk-okvir.ceka .gk-slika { animation: none; }
}

/* ============================================================ IGRE — KOMERCIJALNO
   Slike su iz web/sredstva (Higgsfield, izvori u promo/igre-sredstva).
   Blok ide poslednji i namerno dopunjuje sve ranije. */

/* ---- telefon: igra gore, kontrole ispod (kao na velikim sajtovima) */
@media (max-width: 900px) {
  .game-shell { gap: 12px; }
  .game-shell > .game-area { order: -1; }
  /* crash: grafikon gore, pa ulog, pa lista opklada - ne lista pa ulog */
  .game-shell:has(.crash-stage) > .game-area { display: contents; }
  .game-shell:has(.crash-stage) .crash-top    { order: -3; min-width: 0; margin-bottom: 0; }
  .game-shell:has(.crash-stage) .crash-stage  { order: -2; min-width: 0; }
  .game-shell:has(.crash-stage) .crash-bottom,
  .game-shell:has(.crash-stage) .fair         { order: 2; min-width: 0; margin-top: 0; }
}
@media (max-width: 768px) {
  .game-canvas { min-height: 0; padding: 12px; }
  .bet-panel { padding: 12px; }
  .bet-panel .stat-row { gap: 6px; margin-bottom: 10px; }
  .bet-panel .stat { padding: 6px 8px; }
  .bet-panel .stat .k { font-size: 9px; margin-bottom: 2px; }
  .bet-panel .stat .v { font-size: 13px; }
}
.lbl-uz { margin-left: 6px; font-size: 10px; letter-spacing: 0; text-transform: none; color: var(--text-low); font-weight: 400; }

/* ---- sto za karte: prava coja sa grbom, zlatna ivica */
.game-canvas.sto-karte {
  background:
    radial-gradient(130% 100% at 50% 40%, transparent 55%, rgba(2,8,5,.7) 100%),
    url("/static/sredstva/coja.webp") center 38% / cover no-repeat,
    #0B2A1C;
  border: 1px solid rgba(231,206,132,.3);
  box-shadow: inset 0 0 0 6px rgba(8,20,14,.55), inset 0 0 0 7px rgba(231,206,132,.28),
              0 10px 30px rgba(0,0,0,.45);
}
.game-canvas.sto-karte::before { opacity: .25; }
.sto-karte .lbl { color: rgba(236,226,196,.75); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.sto-natpis { display: grid; gap: 5px; text-align: center; pointer-events: none; }
.sto-natpis b {
  font: 600 13px/1 var(--f-znak); letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-300); text-shadow: 0 1px 0 rgba(0,0,0,.6), 0 0 18px rgba(231,206,132,.25);
}
.sto-natpis span {
  font: 500 9.5px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(231,206,132,.55);
}

/* ---- karta: indeks u uglovima, veliki znak u sredini */
.pcard {
  position: relative;
  background: linear-gradient(155deg, #FFFFFF 0%, #F6F2E8 60%, #EAE4D4 100%);
  border: 1px solid rgba(0,0,0,.18); border-radius: 7px;
  color: #17130D;
  box-shadow: 0 6px 14px rgba(0,0,0,.5), inset 0 0 0 3px #FFFFFF, inset 0 0 0 4px rgba(0,0,0,.05);
}
.pcard.redsuit { color: #C0301F; }
.pcard .ku {
  position: absolute; left: 5px; top: 5px;
  display: flex; flex-direction: column; align-items: center;
  font: 700 15px/1 var(--f-znak); letter-spacing: -.02em;
}
.pcard .ku i { font-style: normal; font-size: 12px; margin-top: 2px; font-family: system-ui, sans-serif; }
.pcard .ku.dole { left: auto; top: auto; right: 5px; bottom: 5px; transform: rotate(180deg); }
.pcard .ks { font: 400 34px/1 system-ui, sans-serif; }
.pcard .ks.slika {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font: 700 28px/1 var(--f-znak);
  padding: 8px 6px; border: 1px solid currentColor; border-radius: 4px; opacity: .92;
}
.pcard .ks.slika i { font: normal 13px/1 system-ui, sans-serif; }
.pcard.back {
  background: #0B3A26 url("/static/sredstva/poledjina.webp") center / cover no-repeat;
  border: 1px solid rgba(0,0,0,.35);
  box-shadow: 0 6px 14px rgba(0,0,0,.5);
  color: transparent;
}
@media (max-width: 768px) {
  .pcard .ku { font-size: 12px; left: 4px; top: 4px; }
  .pcard .ku i { font-size: 10px; }
  .pcard .ku.dole { right: 4px; bottom: 4px; }
  .pcard .ks { font-size: 26px; }
  .pcard .ks.slika { font-size: 20px; padding: 5px 4px; }
  .pcard .ks.slika i { font-size: 10px; }
}

/* ---- blackjack: krug za ulog sa stekom cipova */
.sto-karte .bj-area { gap: 16px; padding: 6px 0 34px; }
.sto-karte .bj-side .lbl { margin: 8px 0; }
.bj-krug {
  position: relative;
  width: 104px; height: 104px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid rgba(231,206,132,.6);
  box-shadow: inset 0 0 0 6px rgba(0,0,0,.16), inset 0 0 0 7px rgba(231,206,132,.25),
              0 0 24px rgba(231,206,132,.08);
  transition: box-shadow 300ms, border-color 300ms;
}
.bj-krug.prazan { border-style: dashed; border-color: rgba(231,206,132,.4); }
.bj-krug.u-igri { border-color: var(--gold-300); box-shadow: inset 0 0 0 6px rgba(0,0,0,.16),
                  inset 0 0 0 7px rgba(231,206,132,.35), 0 0 26px rgba(231,206,132,.28); }
.bj-stek { position: relative; width: 46px; height: 46px; margin-top: -10px; }
.chipbtn.stek-cip {
  position: absolute; left: 0; bottom: calc(var(--k) * 4px);
  pointer-events: none; transform: none;
  box-shadow: 0 2px 0 rgba(0,0,0,.45), 0 3px 6px rgba(0,0,0,.4);
}
.chipbtn.stek-cip.pada { animation: cipPada 320ms var(--e-settle) both; }
@keyframes cipPada { from { transform: translateY(-46px) scale(1.12); opacity: 0; } }
.bj-iznos {
  max-width: 92%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; padding: 5px 10px; border-radius: 999px;
  background: rgba(4,12,8,.8); border: 1px solid rgba(231,206,132,.35);
  font: 600 12px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--gold-300);
}
.bj-krug.prazan .bj-iznos { font: 500 11px/1 var(--f-ui); color: rgba(236,226,196,.7); }
.bj-akcije { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bj-akcije .btn { margin: 0; }
#bj-setup .seg { margin: 10px 0; }
#bj-setup .seg button { flex: 1; }

/* ---- bakara na coji: polja za cipove poluprovidna, sa zlatnom ivicom */
.sto-karte .bc-field {
  background: rgba(4,16,10,.55);
  border-color: rgba(231,206,132,.3);
  backdrop-filter: blur(2px);
}
.sto-karte .bc-field:hover:not(:disabled) { border-color: rgba(231,206,132,.65); }
.sto-karte .bc-area { padding-bottom: 4px; }

/* ---- dragon tiger: zmaj levo gleda desno, tigar desno gleda levo */
.dt-side { display: flex; flex-direction: column; align-items: center; }
.dt-grb {
  width: 92px; height: 92px; object-fit: contain; margin-bottom: 6px;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.55));
  transition: filter 300ms, transform 300ms;
  user-select: none; -webkit-user-drag: none;
}
.dt-side.pobednik .dt-grb {
  filter: drop-shadow(0 0 16px rgba(231,206,132,.75)) drop-shadow(0 6px 10px rgba(0,0,0,.55));
  animation: grbRika 700ms var(--e-spring);
}
@keyframes grbRika { 40% { transform: scale(1.14) rotate(-3deg); } }
.dt-vs {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  padding: 0; font: 700 13px/1 var(--f-znak); letter-spacing: .04em;
  color: #1A1204; background: linear-gradient(180deg, #F0D683, #B08A22);
  box-shadow: 0 0 0 3px rgba(4,12,8,.6), 0 0 18px rgba(231,206,132,.35);
}
@media (max-width: 768px) {
  .dt-grb { width: 68px; height: 68px; }
  .dt-vs { width: 32px; height: 32px; font-size: 11px; }
}

/* ---- visa/niza: spil levo, trenutna karta desno */
.hl-spil { display: flex; align-items: center; gap: 16px; }
.hl-kup { position: relative; width: 64px; height: 90px; }
.hl-kup .pcard { position: absolute; inset: 0; width: 100%; height: 100%; }
.hl-kup .pcard:nth-child(2) { transform: translate(-3px, -3px); }
.hl-kup .pcard:nth-child(3) { transform: translate(-6px, -6px); }
.hl-karta .pcard .ks { font-size: 44px; }
.hl-karta .pcard .ku { font-size: 18px; }
.hl-korak .pcard .ku { display: none; }
.hl-korak .pcard .ks { font-size: 16px; }
.hl-korak .pcard .ks.slika { font-size: 13px; padding: 2px; border: 0; }
.hl-korak .pcard .ks.slika i { display: none; }
.sto-karte .hl-btn { background: rgba(4,16,10,.6); border-color: rgba(231,206,132,.28); }
@media (max-width: 768px) {
  .hl-kup { width: 52px; height: 74px; }
  .hl-karta .pcard .ks { font-size: 36px; }
  .hl-karta .pcard .ku { font-size: 15px; }
}

/* ---- mines / towers: plocice sa zlatnim rubom, ispod dragulj ili bomba */
.mcell, .tcell {
  background: linear-gradient(180deg, #1E3D30 0%, #122A20 55%, #0C1E17 100%);
  border: 1px solid rgba(231,206,132,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -3px 0 rgba(0,0,0,.35),
              0 3px 7px rgba(0,0,0,.45);
}
.mcell:hover:not(:disabled), .tcell:hover:not(:disabled) {
  border-color: rgba(231,206,132,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -3px 0 rgba(0,0,0,.35),
              0 0 16px rgba(53,200,148,.28), 0 3px 7px rgba(0,0,0,.45);
}
.mcell.gem, .tcell.safe {
  background: radial-gradient(circle at 50% 45%, rgba(53,200,148,.45), #0B2A1E 72%);
  border-color: rgba(53,200,148,.6);
}
.mcell.bomb, .tcell.bomb {
  background: radial-gradient(circle at 50% 45%, rgba(255,140,50,.5), #2E0B06 72%);
  border-color: rgba(214,69,47,.7);
}
.polje-slika {
  display: block; width: 74%; height: 74%; object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.5));
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.mcell.gem .polje-slika, .tcell.safe .polje-slika { animation: znakUpad 380ms var(--e-spring) 140ms both; }
.mcell.bomb .polje-slika, .tcell.bomb .polje-slika { animation: znakUdar 420ms var(--e-spring) 120ms both; }
.tcell { min-width: 0; overflow: hidden; }
.tcell .polje-slika { width: 34px; height: 34px; }
.mcell.otkriveno { opacity: .38; }
.mcell.otkriveno .polje-slika { width: 52%; height: 52%; filter: saturate(.6); }

/* kula: okvir od zlata, na vrhu dragulj - cilj penjanja */
.tower {
  padding: 12px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(231,206,132,.07), rgba(0,0,0,.28));
  border: 1px solid rgba(231,206,132,.22);
}
.tower::before {
  content: ""; order: 99; display: block; height: 46px; margin-bottom: 2px;
  background: url("/static/sredstva/dragulj.webp") center / contain no-repeat;
  filter: drop-shadow(0 0 12px rgba(53,200,148,.55));
}

/* ---- coinflip: pravi novcic (glava = kruna, pismo = K) */
.coin3d .face.foto { background: none; border: 0; box-shadow: none; }
.coin3d .face.foto img {
  width: 100%; height: 100%; display: block; object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.55));
  user-select: none; -webkit-user-drag: none;
}
.seg-novcic { width: 20px; height: 20px; object-fit: contain; flex: none; }
@media (max-width: 768px) {
  .coin3d { width: 136px; height: 136px; }
}

/* ---- dice: klizac sa zlatnim rubom */
.dice-bar { box-shadow: inset 0 0 0 1px rgba(231,206,132,.22), 0 0 0 5px rgba(0,0,0,.25); }
.ro-num { text-shadow: 0 0 30px rgba(231,206,132,.18); }

/* ---- crash: grafikon na tamnom nebu sa zvezdama */
.crash-stage {
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 34% 12%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.5px 1.5px at 58% 28%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 76% 9%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 88% 36%, rgba(255,255,255,.3), transparent),
    radial-gradient(1.5px 1.5px at 22% 48%, rgba(255,255,255,.22), transparent),
    radial-gradient(90% 70% at 50% 100%, rgba(31,169,123,.12), transparent 70%),
    linear-gradient(180deg, #06100C, #0A1A13);
}
@media (max-width: 768px) {
  .sto-karte .cards { min-height: 82px; }
  .sto-karte .bj-area { gap: 10px; padding-bottom: 26px; }
  .sto-karte .bj-side .lbl { margin: 6px 0; }
  .bj-krug { width: 86px; height: 86px; }
  .bj-stek { transform: scale(.86); margin-top: -8px; }
  /* ukupan ulog vec pise u krugu na stolu - statistika ovde samo gura dugme dole */
  #bj-setup .stat-row { display: none; }
  /* cipovi u jednom redu koji se prevlaci, umesto dva reda */
  .chip-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
              padding: 5px 2px 6px; margin: -5px -2px -6px; scroll-snap-type: x proximity; }
  .chip-row::-webkit-scrollbar { display: none; }
  .chip-row .chipbtn { flex: none; scroll-snap-align: start; }
}

/* red cipova koji se prevlaci ne sme da rasiri panel (i celu stranu) */
.game-shell > .bet-panel, .game-shell > .game-area { min-width: 0; }

/* ============================================================ REDIZAJN — 3D IKONICE I PLOCICE
   Po uzoru na velike kripto kazina: svaka igra svoja boja, 3D predmet
   (web/ikone), ime pravim fontom umesto slova iscrtanih u slici. */
:root { --f-igra: 'Lilita One', 'Archivo', system-ui, sans-serif; --zlato: #FFC83D; }

.ik3d { display: block; object-fit: contain; user-select: none; -webkit-user-drag: none; pointer-events: none; }

/* ---- meni: 3D ikonice umesto linijskih */
.nav-item .ico { height: 26px; }
.nav-item .ico .ik3d { width: 26px; height: 26px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45));
  transition: transform 160ms var(--e-spring); }
.nav-item:hover .ico .ik3d { transform: scale(1.12) rotate(-4deg); }
.nav-item.sel .ico .ik3d { transform: scale(1.1); }
.nav-item.sel { background: linear-gradient(90deg, rgba(255,200,61,.10), transparent); }
.nav-item.sel::before { background: var(--zlato); }
@media (max-width: 768px) {
  .rail .nav-item .ico { height: 28px; }
  .rail .nav-item .ico .ik3d { width: 28px; height: 28px; }
  .rail .nav-item.sel { background: none; }
  .rail .nav-item.sel .lbl { color: var(--zlato); }
  .rail .nav-item:not(.sel) .ico .ik3d { filter: saturate(.55) brightness(.85) drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
}

/* ---- dugmad: uplata i glavni "zlatni" poziv */
.btn-zlato, .topbar #btn-redeem {
  background: linear-gradient(180deg, #FFD65C, var(--zlato) 50%, #E8A512);
  color: #2A1A00; font-weight: 800;
  box-shadow: 0 3px 0 #A66F00, 0 6px 16px rgba(255,200,61,.25);
  border: 0;
}
.btn-zlato:hover, .topbar #btn-redeem:hover:not(:disabled) {
  background: linear-gradient(180deg, #FFE08A, #FFD04F 50%, #F0B020);
}
.btn-zlato:active, .topbar #btn-redeem:active { transform: translateY(2px); box-shadow: 0 1px 0 #A66F00; }
.btn-staklo {
  background: rgba(255,255,255,.12); color: #fff; font-weight: 700;
  border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(6px);
}
.btn-staklo:hover { background: rgba(255,255,255,.2); }
.btn-zlato, .btn-staklo {
  height: 46px; padding: 0 22px; border-radius: 12px; font-size: 15px; font-family: var(--f-ui);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}

/* ---- plocica igre */
.igra-k {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  aspect-ratio: 16 / 10; min-height: 0; padding: 12px 12px 12px 14px;
  border-radius: 14px; text-align: left; cursor: pointer;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255,255,255,.28), transparent 55%),
    linear-gradient(145deg, var(--b1), var(--b2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -3px 0 rgba(0,0,0,.18),
              0 6px 16px rgba(0,0,0,.35);
  transition: transform 180ms var(--e-spring), box-shadow 180ms;
}
.igra-k::after {                       /* sitne tackice kao na referenci */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px);
  background-size: 12px 12px; mask-image: linear-gradient(120deg, #000, transparent 70%);
}
.igra-k:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3),
  inset 0 -3px 0 rgba(0,0,0,.18), 0 12px 24px rgba(0,0,0,.45); }
.igra-k:hover .ik-obj { transform: translate(-2px, -4px) rotate(-6deg) scale(1.06); }
.igra-k:focus-visible { outline: 2px solid var(--zlato); outline-offset: 2px; }
.ik-ime {
  position: relative; z-index: 2; max-width: 62%;
  font: 400 22px/.95 var(--f-igra); letter-spacing: .01em; text-transform: uppercase;
  color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.28), 0 4px 10px rgba(0,0,0,.25);
  overflow-wrap: anywhere;
}
.ik-igraj {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 5px 0 11px; border-radius: 999px;
  background: rgba(10,12,20,.55); border: 1px solid rgba(255,255,255,.28);
  font: 700 11px/1 var(--f-ui); color: #fff;
}
.ik-igraj i {
  width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
  background: var(--zlato); color: #2A1A00;
}
.ik-igraj i svg { fill: currentColor; stroke: none; }
.ik-obj {
  position: absolute; right: -6%; bottom: -4%; width: 58%; height: 100%; z-index: 1;
  object-position: 100% 100%;
  filter: drop-shadow(-4px 8px 10px rgba(0,0,0,.35));
  transition: transform 260ms var(--e-spring);
}
.ik-uzivo {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; border-radius: 999px; background: rgba(0,0,0,.45);
  font: 700 9px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
.ik-uzivo i { width: 6px; height: 6px; border-radius: 50%; background: #5CFF9D;
  box-shadow: 0 0 8px #5CFF9D; animation: pulse 1.4s infinite; }
.ik-pz { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center;
  background: rgba(0,0,0,.55); font: 700 12px/1 var(--f-ui); letter-spacing: .14em;
  text-transform: uppercase; color: #fff; }
.igra-k.paused { filter: grayscale(.6); }

/* ---- kazino strana: mreza plocica */
.kz-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.kz-grid .igra-k { aspect-ratio: 16 / 10; }
.kz-cip { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; }
.kz-cip .ik3d { width: 20px; height: 20px; }
.kz-cip.sel { background: rgba(255,200,61,.14); border-color: var(--zlato); }
.kz-cip.sel span { color: var(--zlato); }
@media (max-width: 768px) {
  .kz-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kz-filt { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px 14px; padding: 0 12px; }
  .kz-filt::-webkit-scrollbar { display: none; }
  .kz-cip { flex: none; }
}

/* ============================================================ LOBI */
/* baner */
.lb-baner {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: center;
  min-height: 250px; padding: 30px 34px; border-radius: 18px;
  background:
    radial-gradient(60% 90% at 78% 40%, rgba(255,200,61,.35), transparent 60%),
    radial-gradient(80% 120% at 0% 100%, rgba(31,169,123,.55), transparent 60%),
    linear-gradient(120deg, #0B4D38 0%, #0E6B4C 45%, #1B8A5E 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 30px rgba(0,0,0,.35);
}
.lb-baner::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.4px);
  background-size: 14px 14px; mask-image: linear-gradient(90deg, #000, transparent 60%);
}
.lb-b-nad { font: 700 11px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.lb-baner h1 {
  margin: 10px 0 10px; font: 400 44px/.95 var(--f-igra); letter-spacing: .005em;
  color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.2);
}
.lb-baner p { margin: 0 0 18px; max-width: 34ch; color: rgba(255,255,255,.85); font-size: 14px; line-height: 1.45; }
.lb-b-dugmad { display: flex; gap: 10px; flex-wrap: wrap; }
.lb-b-scena { position: relative; height: 210px; }
.lb-b-o { position: absolute; filter: drop-shadow(0 12px 18px rgba(0,0,0,.35)); }
.lb-b-o.o1 { width: 46%; right: 26%; top: -4%; animation: lebdi 4.2s ease-in-out infinite; }
.lb-b-o.o2 { width: 40%; right: -2%; bottom: -2%; animation: lebdi 5s ease-in-out -1s infinite; }
.lb-b-o.o3 { width: 26%; left: 4%; bottom: 4%; animation: lebdi 3.6s ease-in-out -2s infinite; }
.lb-b-o.o4 { width: 24%; right: 6%; top: 0; animation: lebdi 4.6s ease-in-out -3s infinite; }
@keyframes lebdi { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -8px; rotate: -3deg; } }

/* cetiri kartice */
.lb-akcije { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0 22px; }
.lb-akc {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 10px 14px 10px 10px; border-radius: 14px; text-align: left; cursor: pointer;
  background: linear-gradient(135deg, var(--b1), var(--b2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px rgba(0,0,0,.3);
  transition: transform 160ms var(--e-spring);
}
.lb-akc:hover { transform: translateY(-3px); }
.lb-akc-ik { width: 48px; height: 48px; flex: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.lb-akc b { display: block; font: 800 15px/1.1 var(--f-ui); color: #fff; }
.lb-akc small { display: block; margin-top: 3px; font-size: 12px; color: rgba(255,255,255,.78);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-akc > span { min-width: 0; }

/* kategorije kao pilule */
.lb-cipovi { display: flex; gap: 8px; margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.lb-cipovi::-webkit-scrollbar { display: none; }
.lb-cip {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 14px 0 8px; border-radius: 999px;
  background: var(--bg-raised); border: 1px solid var(--line-hi);
  font: 700 13px/1 var(--f-ui); color: var(--text-hi); cursor: pointer;
}
.lb-cip .ik3d { width: 24px; height: 24px; }
.lb-cip:hover { border-color: var(--zlato); background: rgba(255,200,61,.08); }

/* redovi igara */
.lb-sekcija { margin-bottom: 24px; }
.lb-zag { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.lb-zag h2 { display: flex; align-items: center; gap: 8px; margin: 0; margin-right: auto;
  font: 800 19px/1 var(--f-ui); letter-spacing: -.01em; color: var(--text-hi); }
.lb-zag-ik { width: 26px; height: 26px; }
.lb-vidi { font: 700 13px/1 var(--f-ui); color: var(--text-mid); padding: 8px 4px; cursor: pointer; }
.lb-vidi:hover { color: var(--zlato); }
.lb-strelice { display: flex; gap: 6px; }
.lb-strelice button {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: var(--bg-raised); border: 1px solid var(--line-hi); color: var(--text-hi); cursor: pointer;
}
.lb-strelice button:hover { border-color: var(--zlato); color: var(--zlato); }
.lb-red {
  display: grid; grid-auto-flow: column; grid-auto-columns: 232px; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 6px 2px 10px; margin: -6px -2px -10px;
}
.lb-red::-webkit-scrollbar { display: none; }
.lb-red .igra-k { scroll-snap-align: start; }

/* mozaik kategorija */
.lb-mozaik {
  display: grid; gap: 12px; margin: 4px 0 26px;
  grid-template-columns: 1.1fr 1fr 1fr 1.1fr; grid-template-rows: 130px 130px;
  grid-template-areas: "kaz cr ru sp" "kaz mi bj sp";
}
.mz {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 16px; border-radius: 16px; text-align: left; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 20px rgba(0,0,0,.35);
  transition: transform 180ms var(--e-spring);
}
.mz:hover { transform: translateY(-4px); }
.mz:hover .mz-obj { transform: scale(1.07) rotate(-5deg); }
.mz-ime { position: relative; z-index: 2; font: 400 26px/1 var(--f-igra); text-transform: uppercase;
  color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.mz-op { position: relative; z-index: 2; margin-top: 6px; max-width: 70%;
  font-size: 12px; line-height: 1.35; color: rgba(255,255,255,.8); }
.mz-obj { position: absolute; z-index: 1; right: -4%; bottom: -6%; width: 62%; height: 88%;
  object-position: 100% 100%; filter: drop-shadow(-6px 10px 14px rgba(0,0,0,.4));
  transition: transform 260ms var(--e-spring); }
.mz-kazino { grid-area: kaz; background: linear-gradient(160deg, #E0452F, #7E1510); }
.mz-crash  { grid-area: cr;  background: linear-gradient(135deg, #3B3F9C, #181A55); }
.mz-rulet  { grid-area: ru;  background: linear-gradient(135deg, #B3223D, #4E0918); }
.mz-mines  { grid-area: mi;  background: linear-gradient(135deg, #1E8B55, #0A3F26); }
.mz-bj     { grid-area: bj;  background: linear-gradient(135deg, #2E5BD8, #10286B); }
.mz-sport  { grid-area: sp;  background: linear-gradient(160deg, #7B3CFF, #2D0F7A); }
.mz-kazino .mz-obj, .mz-sport .mz-obj { width: 88%; height: 66%; right: -6%; bottom: -4%; }

@media (max-width: 1100px) {
  .lb-akcije { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .lb-baner { grid-template-columns: 1fr; min-height: 0; padding: 20px 18px 0; border-radius: 16px; }
  .lb-baner h1 { font-size: 34px; }
  .lb-baner p { font-size: 13px; margin-bottom: 14px; }
  .lb-b-scena { height: 150px; margin-top: 4px; }
  .lb-b-o.o1 { width: 34%; right: 34%; top: 0; }
  .lb-b-o.o2 { width: 30%; right: 2%; bottom: 0; }
  .lb-b-o.o3 { width: 20%; left: 6%; bottom: 8%; }
  .lb-b-o.o4 { width: 20%; right: 8%; top: 0; }
  .lb-akcije { gap: 8px; margin: 12px 0 16px; }
  .lb-akc { padding: 8px 10px 8px 6px; gap: 6px; border-radius: 12px; }
  .lb-akc-ik { width: 40px; height: 40px; }
  .lb-akc b { font-size: 14px; }
  .lb-akc small { font-size: 11px; }
  .lb-cipovi { margin: 0 -12px 16px; padding: 0 12px; }
  .lb-red { grid-auto-columns: 168px; gap: 10px; }
  .lb-strelice { display: none; }
  .ik-ime { font-size: 18px; }
  .ik-igraj { height: 24px; font-size: 10px; }
  .lb-mozaik {
    grid-template-columns: 1fr 1fr; grid-template-rows: 150px 104px 104px;
    grid-template-areas: "kaz sp" "cr ru" "mi bj"; gap: 8px;
  }
  .mz { padding: 12px; border-radius: 14px; }
  .mz-ime { font-size: 20px; }
  .mz-op { font-size: 11px; max-width: 90%; }
  .mz-kazino .mz-obj, .mz-sport .mz-obj { width: 70%; height: 62%; }
}

/* ============================================================ ZAGLAVLJE IGRE */
.igra-zag {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px; padding: 8px 14px 8px 8px; border-radius: 14px;
  background:
    radial-gradient(60% 140% at 100% 0%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(120deg, var(--b1), var(--b2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 16px rgba(0,0,0,.3);
}
.igra-nazad {
  width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: rgba(0,0,0,.25); color: #fff; cursor: pointer;
}
.igra-nazad:hover { background: rgba(0,0,0,.4); }
.igra-zag-ik { width: 46px; height: 46px; flex: none; margin: -6px 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.igra-zag-t { display: flex; flex-direction: column; min-width: 0; }
.igra-zag-t b { font: 400 22px/1 var(--f-igra); text-transform: uppercase; color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.igra-zag-t span { margin-top: 3px; font-size: 12px; color: rgba(255,255,255,.8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.igra-zag .ik-uzivo { position: static; margin-left: auto; }
@media (max-width: 768px) {
  .igra-zag { margin-bottom: 10px; padding: 6px 12px 6px 6px; gap: 10px; }
  .igra-zag-ik { width: 38px; height: 38px; }
  .igra-zag-t b { font-size: 19px; }
}

/* ---- panel za ulog: zaobljeniji, glavno dugme zlatno kao na referenci */
.bet-panel { border-radius: 16px; }
.game-canvas { border-radius: 16px; }
.bet-panel .btn.block:not(.grey):not(.ghost):not(.red):not(.blue):not(.gold) {
  background: linear-gradient(180deg, #FFD65C, var(--zlato) 50%, #E8A512);
  color: #2A1A00; font-weight: 800; border-radius: 12px;
  box-shadow: 0 3px 0 #A66F00, 0 6px 16px rgba(255,200,61,.2);
}
.bet-panel .btn.block:not(.grey):not(.ghost):not(.red):not(.blue):not(.gold):hover:not(:disabled) {
  background: linear-gradient(180deg, #FFE08A, #FFD04F 50%, #F0B020);
}
.bet-panel .btn.block:not(.grey):not(.ghost):not(.red):not(.blue):not(.gold):disabled {
  background: var(--bg-raised); color: var(--text-dis); box-shadow: none;
}
.bet-panel .btn.block { border-radius: 12px; }
.bet-panel .input-wrap, .bet-panel .seg, .bet-panel .stat, .bet-panel select { border-radius: 10px; }
.nw { white-space: nowrap; font-weight: 700; color: #fff; }
.ik-ime { overflow-wrap: normal; word-break: keep-all; max-width: 66%; }
.ik-ime.dugo { font-size: 18px; }
@media (max-width: 768px) { .ik-ime.dugo { font-size: 15px; } }
.mz-obj { width: 54%; height: 82%; }
.mz-ime { max-width: 60%; }
.mz-kazino .mz-ime, .mz-sport .mz-ime { max-width: none; }

/* ============================================================ REDIZAJN 2 — DUGMAD, NOVCANIK, OBLICI
   Sva dugmad na sajtu u istom jeziku kao nove plocice: zaobljena, sa
   "debljinom" (senka ispod), glavni poziv zlatni, sporedni stakleni. */
:root { --r-ctl: 10px; --r-card: 16px; }

.skriveno { display: none !important; }

/* ---- glavno dugme: zlatno */
.btn {
  border-radius: 12px; border: 0;
  background: linear-gradient(180deg, #FFD65C, var(--zlato) 50%, #E8A512);
  color: #2A1A00; font-weight: 800; letter-spacing: 0;
  box-shadow: 0 3px 0 #A66F00, 0 6px 14px rgba(255,200,61,.18);
}
.btn:hover:not(:disabled) { background: linear-gradient(180deg, #FFE08A, #FFD04F 50%, #F0B020); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #A66F00; }
.btn:disabled { background: #1A2A23; color: var(--text-dis); box-shadow: 0 3px 0 #0C1511; }
.btn.sm { border-radius: 10px; box-shadow: 0 2px 0 #A66F00; }
.btn.block { border-radius: 12px; }

/* sporedno: tamno staklo sa svetlom ivicom */
.btn.ghost, .btn.grey {
  background: linear-gradient(180deg, #1E3029, #15231D);
  color: var(--text-hi); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 3px 0 #0A1310, inset 0 1px 0 rgba(255,255,255,.07);
}
.btn.ghost:hover:not(:disabled), .btn.grey:hover:not(:disabled) {
  background: linear-gradient(180deg, #25392F, #1A2B23); border-color: rgba(255,200,61,.45);
}
.btn.ghost:active:not(:disabled), .btn.grey:active:not(:disabled) { box-shadow: 0 1px 0 #0A1310; }
/* zeleno = naplati / pokupi */
.btn.green {
  background: linear-gradient(180deg, #5BE3A8, #2BC486 50%, #17A06A); color: #04210F;
  box-shadow: 0 3px 0 #0C6B45, 0 6px 14px rgba(43,196,134,.2);
}
.btn.green:hover:not(:disabled) { background: linear-gradient(180deg, #7AF0BE, #3DD597 50%, #1FB078); }
.btn.gold { background: linear-gradient(180deg, #FFD65C, var(--zlato) 50%, #E8A512); color: #2A1A00; }
.btn.red, .btn.danger {
  background: linear-gradient(180deg, #FF7B6B, #E8463A 50%, #C22A20); color: #fff;
  box-shadow: 0 3px 0 #7E1510;
}
.btn.blue {
  background: linear-gradient(180deg, #5C8BFF, #3A67F0 50%, #2549C8); color: #fff;
  border: 0; box-shadow: 0 3px 0 #16307F;
}
.btn.blue:hover:not(:disabled) { background: linear-gradient(180deg, #7AA0FF, #4B76F5 50%, #2D55D6); color: #fff; }
.btn.pending { background: #1A2A23; color: var(--text-mid); box-shadow: 0 3px 0 #0C1511; }
.btn.pending::after { background: var(--zlato); }

/* ---- polja i birac */
input[type="text"], input[type="password"], input[type="number"],
input[type="tel"], input[type="email"], input:not([type]), textarea, select {
  border-radius: 12px; background: #08120E; border-color: rgba(255,255,255,.09);
}
input:focus, textarea:focus, select:focus { border-color: var(--zlato); box-shadow: 0 0 0 3px rgba(255,200,61,.12); }
.mini { border-radius: 8px; }
.mini:hover { color: var(--zlato); }
.seg { border-radius: 12px; padding: 4px; }
.seg button { border-radius: 9px; }
.seg button.sel {
  background: linear-gradient(180deg, #2A4237, #1D3129); color: #fff;
  box-shadow: 0 2px 0 #0A1310, inset 0 1px 0 rgba(255,255,255,.08);
}
input[type="range"]::-webkit-slider-thumb { background: var(--zlato); border-color: #A66F00; }
input[type="range"]::-moz-range-thumb { background: var(--zlato); border-color: #A66F00; }
.stat { border-radius: 10px; }
.icon-btn { border-radius: 10px; }
.icon-btn:hover { color: var(--zlato); }

/* ---- modal */
.modal-card { border-radius: 20px; border-color: rgba(255,255,255,.08);
  box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.modal-x { border-radius: 10px; }

/* ---- prijava */
.auth-card { border-radius: 20px; }

/* ---- znak gore levo */
.brand-mark { border-radius: 9px; background: linear-gradient(180deg, #FFD65C, #E8A512);
  color: #2A1A00; border: 0; box-shadow: 0 2px 0 #A66F00; font-weight: 700; }

/* ============================================================ NOVCANIK U TRACI
   Stanje + jedno zlatno dugme "Novcanik" (kao Stake), umesto Uplata/Isplata. */
.bal-block {
  height: 40px; padding: 0 12px 0 10px; gap: 8px;
  background: #08120E; border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px 0 0 12px; margin-right: -8px;
}
.bal-block:hover { background: #0C1813; }
.bal-text { display: flex; align-items: baseline; gap: 5px; }
.bal-cur { display: inline; font-size: 10px; }
#balance-val { font-size: 16px; font-weight: 600; }
.bal-chev { display: none; }
.wallet-btn {
  height: 40px; padding: 0 14px 0 8px; display: inline-flex; align-items: center; gap: 7px;
  border-radius: 12px; border: 0; cursor: pointer;
  background: linear-gradient(180deg, #FFD65C, var(--zlato) 50%, #E8A512);
  color: #2A1A00; font: 800 14px/1 var(--f-ui);
  box-shadow: 0 3px 0 #A66F00, 0 6px 16px rgba(255,200,61,.22);
  position: relative; z-index: 1;
  transition: transform 120ms, box-shadow 120ms;
}
.wallet-btn img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.wallet-btn:hover { background: linear-gradient(180deg, #FFE08A, #FFD04F 50%, #F0B020); }
.wallet-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #A66F00; }
@media (max-width: 768px) {
  .bal-block { height: 38px; padding: 0 12px 0 8px; }
  .bal-coin { display: none; }
  #balance-val { font-size: 14px; }
  .wallet-btn { height: 38px; padding: 0 10px 0 6px; font-size: 13px; }
  .wallet-btn img { width: 24px; height: 24px; }
  .topbar #btn-cashout, .topbar #btn-redeem { display: none !important; }
}
@media (max-width: 360px) {
  .wallet-btn span { display: none; }
  .wallet-btn { padding: 0 8px; }
}

/* ---- prozor novcanika */
.nov-zag { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-right: 36px; }
.nov-zag img { filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.nov-zag h3 { margin: 0; font: 400 24px/1 var(--f-igra); text-transform: uppercase; }
.nov-zag span { display: block; margin-top: 4px; font-size: 12px; color: var(--text-mid); }
.nov-stanje {
  border-radius: 16px; border: 0; padding: 18px 20px;
  background: radial-gradient(80% 140% at 100% 0%, rgba(255,200,61,.3), transparent 60%),
              linear-gradient(135deg, #0F5C42, #0A3B2B);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}
.nov-stanje span { color: rgba(255,255,255,.75); }
.nov-stanje b { font-size: 28px; color: #fff; }
.nov-dugmad { gap: 10px; margin-bottom: 12px; }
.nov-plocica {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start;
  min-height: 116px; padding: 14px; border-radius: 16px; border: 0; cursor: pointer; text-align: left;
  color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 0 rgba(0,0,0,.35);
  transition: transform 160ms var(--e-spring);
}
.nov-plocica:hover { transform: translateY(-3px); }
.nov-plocica img { position: absolute; right: -6px; bottom: -6px; width: 72px; height: 72px;
  object-fit: contain; filter: drop-shadow(-3px 6px 8px rgba(0,0,0,.35)); }
.nov-plocica b { font: 400 22px/1 var(--f-igra); text-transform: uppercase; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.nov-plocica small { margin-top: 4px; font-size: 12px; color: rgba(255,255,255,.8); }
.nov-uplata  { background: linear-gradient(135deg, #7B3CFF, #3E1896); }
.nov-isplata { background: linear-gradient(135deg, #1FAE6C, #0A5C38); }
.nov-red {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-top: 8px; padding: 12px 14px; border-radius: 12px;
  background: #0C1813; border: 1px solid rgba(255,255,255,.07);
  color: var(--text-hi); font-size: 14px; text-decoration: none; cursor: pointer; text-align: left;
}
.nov-red span { flex: 1; min-width: 0; }
.nov-red b { color: var(--zlato); white-space: nowrap; }
.nov-red:hover { border-color: rgba(255,200,61,.4); }
.nov-red svg:last-child { color: var(--text-low); }

/* ---- ostale kartice i paneli: zaobljeniji */
.panel, .stat-card, .profil-sekcija, .bonus-box, .sport-match, .bets-box { border-radius: 16px; }
.futer-pomoc, .pd-kartica { border-radius: 16px; }
.nov-stanje b { white-space: nowrap; }
@media (max-width: 480px) { .nov-stanje b { font-size: 22px; } .nov-stanje span { font-size: 10px; } }
.nalog-zag { margin-bottom: 16px; padding: 10px 12px 10px 10px; }
.nalog-nov { margin-left: auto; flex: none; }
.ik-novo { background: linear-gradient(180deg, #FFE08A, #FFC83D); color: #5A3300; }
.otvaram { display: grid; place-items: center; gap: 14px; padding: 80px 16px; text-align: center;
  font: 400 24px/1 var(--f-igra); color: #fff; }
.otvaram-ik { width: 110px; height: 110px; animation: lebdi 1.6s ease-in-out infinite; }
.mz-sweet { grid-area: mi; background: linear-gradient(135deg, #FF6FB5, #9E1B63); }
/* valuta uvek pored stanja - i na telefonu */
.topbar .bal-cur { display: inline !important; margin-left: 3px; font-size: 10px; letter-spacing: .06em; color: var(--text-mid); }

/* ---- sport: predlozi liga dok se kuca + brzi dugmici za top lige */
.sb-trazi { position: relative; }
.sb-predlozi { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  max-height: min(60vh, 420px); overflow-y: auto; padding: 6px; border-radius: 14px;
  background: var(--bg-panel); border: 1px solid rgba(255,200,61,.3); box-shadow: 0 18px 40px rgba(0,0,0,.55); }
.sb-pred-nad { padding: 6px 8px 4px; font: 700 10px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--text-low); }
.sb-pred { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 10px;
  text-align: left; color: var(--text-hi); background: none; cursor: pointer; }
.sb-pred:hover, .sb-pred:focus-visible { background: rgba(255,200,61,.1); outline: none; }
.sb-pred-ik { font-size: 20px; flex: none; width: 26px; text-align: center; }
.sb-pred-t { flex: 1; min-width: 0; }
.sb-pred-t b { display: block; font: 700 14px/1.2 var(--f-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-pred-t small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-mid); }
.sb-pred-n { flex: none; font: 600 11px/1 var(--f-num); color: var(--zlato); }
.sb-pred-sve { border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; margin-top: 4px; }
.sb-pred-sve .sb-pred-t b { font-weight: 600; color: var(--text-mid); }
.sb-top { flex: 0 0 auto; display: flex; gap: 8px; padding: 8px 16px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line); }
.sb-top:empty { display: none; }
.sb-top::-webkit-scrollbar { display: none; }
.sb-top-cip { flex: none; height: 34px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  background: var(--bg-raised); border: 1px solid var(--line-hi); color: var(--text-hi); font: 700 13px/1 var(--f-ui); white-space: nowrap; }
.sb-top-cip:hover { border-color: var(--zlato); }
.sb-top-cip.sel { background: rgba(255,200,61,.14); border-color: var(--zlato); color: var(--zlato); }
@media (max-width: 768px) {
  .sb-top { padding: 6px 10px; }
  .sb-top-cip { height: 32px; padding: 0 12px; font-size: 12px; }
}
/* redovi predloga su dugmad u formi - nikad ne nasledjuju izgled lupe */
.sb-predlozi .sb-pred { width: 100%; height: auto; }
/* 10K cip - ljubicasto-zlatni, najveci na stolu */
.chipbtn.chip-c9 { --cip: linear-gradient(180deg, #8E4BFF, #4A1AA8); color: #FFE08A; font-weight: 700; }

/* ---------------------------------------------------------------- besplatni spinovi u lobiju */
.lb-spinovi { display: grid; gap: 8px; margin-bottom: 14px; }
.lb-sp { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: #2A1400;
  background: linear-gradient(135deg, #FFF0A8, #FFC83D 55%, #F0A814); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.lb-sp-ik { font-size: 28px; line-height: 1; }
.lb-sp-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lb-sp-t b { font-size: 16px; }
.lb-sp-t small { font-size: 12px; font-weight: 700; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-sp-igraj { padding: 8px 16px; border-radius: 999px; background: #2A1400; color: #FFE08A; font-weight: 900; font-size: 13px; }
/* ---------------------------------------------------------------- obavezan telefon */
#tel-modal .modal-card h3 { margin: 0 0 8px; }
#tel-modal .tel-greska { color: #FF8A80; font-weight: 700; margin: 6px 0 0; }
#tel-modal .tel-dugme { width: 100%; margin-top: 12px; }

/* ---------------------------------------------------------------- PREDJI ULICU */
.ul-canvas { display: grid; gap: 10px; padding: 0; overflow: hidden; }
.ul-scena { position: relative; height: 330px; overflow-x: auto; overflow-y: hidden; border-radius: 16px;
  scrollbar-width: none; background: #2E333D; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.ul-scena::-webkit-scrollbar { display: none; }
.ul-scena.trese { animation: ulTrese 450ms; }
@keyframes ulTrese { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.ul-put { position: relative; display: flex; height: 100%; width: max-content; }
.ul-trotoar { flex: none; width: 110px; height: 100%;
  background: repeating-linear-gradient(0deg, #8A8F99 0 38px, #7C818B 38px 40px), #858A94;
  box-shadow: inset -6px 0 0 #B9BEC7, inset -10px 0 0 #6A6F78; }
.ul-cilj { display: grid; place-items: center; box-shadow: inset 6px 0 0 #B9BEC7, inset 10px 0 0 #6A6F78;
  background: repeating-linear-gradient(0deg, #9C8B5A 0 38px, #8E7E50 38px 40px), #978654; }
.ul-put img { max-width: none; }
.ul-cilj img { width: 86px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.ul-traka { position: relative; flex: none; width: 104px; height: 100%; overflow: hidden;
  background: linear-gradient(90deg, rgba(0,0,0,.08), transparent 30%), #3A3F4A; }
.ul-traka + .ul-traka::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 4px; z-index: 1;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.75) 0 26px, transparent 26px 50px); }
.ul-traka.predjena { background: #454A55; }
.ul-traka.sledeca { cursor: pointer; }
.ul-traka.sledeca .ul-sahta { animation: ulZove 1.2s ease-in-out infinite; }
@keyframes ulZove { 50% { transform: translate(-50%, -50%) scale(1.08); filter: drop-shadow(0 0 12px rgba(255,210,90,.8)); } }
.ul-sahta { position: absolute; left: 50%; top: 58%; z-index: 2; width: 80px; height: 80px; transform: translate(-50%, -50%);
  display: grid; place-items: center; }
.ul-sahta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ul-sahta span { position: relative; padding: 3px 8px; border-radius: 999px; background: rgba(12,14,18,.82);
  color: #fff; font-weight: 900; font-size: 13px; font-variant-numeric: tabular-nums; }
.ul-traka.predjena .ul-sahta span { background: #2A1C00; color: #FFD54A; }
.ul-barijera { position: absolute; left: 50%; top: 6px; z-index: 3; width: 78px; transform: translateX(-50%);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); animation: ulPadne 380ms cubic-bezier(.34,1.56,.64,1); }
@keyframes ulPadne { from { transform: translate(-50%, -40px); opacity: 0; } }
.ul-auto { position: absolute; left: 50%; top: -140px; z-index: 4; width: 62px; transform: translateX(-50%);
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)); animation: ulVozi linear forwards; }
@keyframes ulVozi { to { top: 110%; } }
.ul-auto.udara { animation-name: ulUdara; animation-timing-function: cubic-bezier(.5,0,1,.6); }
@keyframes ulUdara { to { top: 38%; } }
.ul-auto.stao { animation-play-state: paused; }
.ul-kokoska { position: absolute; top: 58%; z-index: 5; width: 74px; transform: translate(-50%, -62%);
  transition: left 360ms cubic-bezier(.3,.7,.3,1); filter: drop-shadow(0 8px 8px rgba(0,0,0,.45)); pointer-events: none; }
.ul-kokoska.skok { animation: ulSkok 380ms ease-out; }
@keyframes ulSkok { 45% { transform: translate(-50%, -95%); } }
.ul-kokoska.pecena { width: 80px; animation: ulPecena 500ms cubic-bezier(.34,1.56,.64,1); }
@keyframes ulPecena { from { transform: translate(-50%, -62%) scale(.4) rotate(-20deg); } }
.ul-savet { text-align: center; font-weight: 800; font-size: 13px; opacity: .85; min-height: 18px; padding: 0 8px 10px; }
.ul-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ul-seg button { min-width: 0; padding-left: 4px; padding-right: 4px; }
.ul-dalje { font-size: 17px; }
@media (max-width: 640px) {
  .ul-scena { height: 270px; }
  .ul-traka { width: 88px; }
  .ul-trotoar { width: 84px; }
  .ul-sahta { width: 68px; height: 68px; }
  .ul-kokoska { width: 62px; }
  .ul-auto { width: 52px; }
  .ul-barijera { width: 66px; }
}
@media (prefers-reduced-motion: reduce) { .ul-traka.sledeca .ul-sahta, .ul-scena.trese { animation: none; } }
.ul-canvas { align-content: center; }
.btn.ul-pokupi { background: linear-gradient(180deg, #3EDB84, #16A34A); color: #032611; box-shadow: 0 4px 0 #0E6B30, 0 8px 18px rgba(0,0,0,.3); }
.btn.ul-pokupi:disabled { filter: saturate(.3) brightness(.7); }

/* ---------------------------------------------------------------- promo kod (kupon u lobiju) */
/* kupon: levo "otcepak" sa kodom, perforacija, desno napredak uplate */
.pf-kupon { display: flex; align-items: stretch; margin-bottom: 14px; min-height: 96px;
  background: var(--bg-panel); border: 1px solid var(--line-gold); border-radius: 16px; overflow: hidden;
  font-family: var(--f-ui); }
.pf-stub { position: relative; flex: none; width: 96px; display: grid; place-content: center; justify-items: center; gap: 4px;
  background: var(--gold-500); color: #1A1404; border-right: 2px dashed rgba(26,20,4,.45); }
/* zarezi na ivici perforacije */
.pf-stub::before, .pf-stub::after { content: ""; position: absolute; right: -9px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg-void); border: 1px solid var(--line-gold); }
.pf-stub::before { top: -9px; }
.pf-stub::after { bottom: -9px; }
.pf-stub-l { font: 600 10px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; opacity: .75; }
.pf-stub-k { font: 600 22px/1 var(--f-num); letter-spacing: .08em; }
.pf-telo { flex: 1; min-width: 0; padding: 12px 14px 12px 18px; display: grid; gap: 4px; align-content: center; }
.pf-nas { font: 700 17px/1.2 var(--f-ui); color: var(--text-hi); letter-spacing: -.01em; }
.pf-nas b { color: var(--gold-300); font-family: var(--f-num); font-weight: 600; }
.pf-pod { font-size: 12px; color: var(--text-mid); line-height: 1.35; }
.pf-traka { height: 5px; margin-top: 6px; background: rgba(255,255,255,.07); border-radius: 3px; overflow: hidden; }
.pf-traka i { display: block; height: 100%; background: var(--gold-500); border-radius: 3px; transition: width var(--t-enter) var(--e-in); }
.pf-red { display: flex; justify-content: space-between; gap: 8px; font: 500 11px/1.3 var(--f-num); color: var(--text-low); }
.pf-red b { color: var(--text-hi); font-weight: 600; }
.pf-dugme { flex: none; align-self: center; margin-right: 14px; height: 38px; padding: 0 18px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--jade-500); color: #04140E; font: 700 14px/1 var(--f-ui); }
.pf-dugme:hover { background: var(--jade-400); }
.pf-dugme:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 2px; }
@media (max-width: 520px) {
  /* telefon: otcepak ide celom visinom, dugme ispod napretka */
  .pf-kupon { display: grid; grid-template-columns: 78px 1fr; }
  .pf-stub { grid-row: 1 / span 2; width: auto; }
  .pf-stub-k { font-size: 18px; }
  .pf-telo { padding: 12px 12px 8px 18px; }
  .pf-dugme { grid-column: 2; margin: 0 12px 12px 18px; height: 38px; }
}

/* Kafana: na plocici je logo (sirok) umesto predmeta - malo veci da se procita */
.igra-k[data-g="kafana"] .ik-obj { width: 72%; right: -4%; bottom: -2%; }
/* besplatan bonus u lobiju: zelena kartica (spinovi su zlatni) */
.lb-sp.lb-fb { color: #fff; background: linear-gradient(135deg, #3FD08A, #129A5C 55%, #0B6B3F); }
.lb-sp.lb-fb .lb-sp-igraj { background: #fff; color: #0B6B3F; }

/* ---------------------------------------------------------------- Viber grupa (obavezno) */
#viber-modal { z-index: 8990; }            /* ispod prozora za telefon (9000) */
.vb-kartica { text-align: center; max-width: 400px; }
.vb-znak { width: 76px; height: 76px; margin: 0 auto 12px; border-radius: 22px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(160deg, #8f7ff7, #7360f2 55%, #5a46d6); box-shadow: 0 10px 28px rgba(115, 96, 242, 0.45); }
.vb-kartica h3 { margin: 0 0 8px; font-size: 22px; }
.vb-kartica .note b { color: var(--gold-300); }
.vb-dugme { margin-top: 16px; height: 50px; display: flex; align-items: center; justify-content: center; text-decoration: none;
  background: #7360f2; color: #fff; font-weight: 800; font-size: 16px; border-radius: 12px; }
.vb-dugme:hover { background: #8272f5; }
.vb-sitno { margin: 10px 0 0; font-size: 12px; color: var(--text-low); }