:root{
  --bg:#0f1726;
  --panel:#1d2938;
  --panel2:#111827;
  --gold:#ffc42e;
  --gold2:#ff9f1c;
  --muted:#9aa7bb;
  --text:#fff;
  --line:#334155;
  --green:#16a34a;
  --red:#ef4444;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
}

body{
  background:radial-gradient(circle at top,#17223a 0,#0f1726 42%,#0b1220 100%);
}

a{text-decoration:none;color:inherit}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:28px 16px;
}

.narrow{max-width:720px}
.hidden{display:none!important}

.brand{
  font-size:42px;
  letter-spacing:4px;
  color:var(--gold);
  font-weight:900;
}

.hint{
  color:var(--muted);
  line-height:1.4;
}

.panel,
.card{
  background:rgba(29,41,56,.94);
  border:1px solid var(--line);
  border-radius:22px;
  padding:20px;
  box-shadow:0 18px 40px rgba(0,0,0,.25);
}

.btn{
  display:inline-block;
  border:0;
  border-radius:14px;
  padding:14px 20px;
  font-size:18px;
  font-weight:900;
  cursor:pointer;
  background:#334155;
  color:#fff;
  margin:6px;
  text-align:center;
}

.btn.primary{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#101827;
}

.btn.danger{background:#7f1d1d;color:#fff}
.btn.small{font-size:14px;padding:9px 12px}
.btn:disabled{opacity:.55;cursor:not-allowed}
.wide{width:100%}

.input{
  width:100%;
  padding:14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#111827;
  color:white;
  font-size:18px;
  margin:7px 0 12px;
}

.players{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
  margin:12px 0;
}

.player-chip{
  background:#111827;
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 14px;
  font-weight:800;
}

.player-chip.compact{
  font-size:13px;
  padding:7px 10px;
}

.score-row{
  display:flex;
  justify-content:space-between;
  background:#111827;
  border-radius:14px;
  padding:14px 18px;
  margin:9px 0;
  font-size:22px;
  font-weight:900;
}

.big-score{
  font-size:48px;
  font-weight:900;
  margin:14px 0;
}

.end-button-row,
.screen-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:18px;
}

.link-btn{
  background:#334155;
  color:#fff;
}

.music-btn{
  position:fixed;
  right:10px;
  bottom:10px;
  z-index:50;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(17,24,39,.88);
  color:#fff;
  border-radius:999px;
  padding:9px 12px;
  font-weight:900;
  font-size:13px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}

/* Dugmad Igraj u karticama uvek dole */
.game-card,
.platform-card{
  display:flex;
  flex-direction:column;
}

.game-card .card-body,
.game-card .game-content,
.platform-card .card-body,
.platform-card .game-content{
  flex:1;
  display:flex;
  flex-direction:column;
}

.game-card .btn,
.platform-card .btn{
  margin-top:auto;
}

/* Pocetni overlay za pokretanje sajta i muzike */
.home-start-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,196,46,.18),transparent 30%),
    radial-gradient(circle at 70% 75%,rgba(255,159,28,.16),transparent 32%),
    rgba(7,12,24,.86);
  backdrop-filter:blur(12px);
  animation:homeOverlayIn .45s ease both;
}

.home-start-overlay.hide{
  pointer-events:none;
  animation:homeOverlayOut .45s ease both;
}

.home-start-box{
  width:min(620px,100%);
  border:1px solid rgba(255,255,255,.18);
  border-radius:30px;
  padding:34px 28px;
  text-align:center;
  background:
    linear-gradient(180deg,rgba(29,41,56,.96),rgba(15,23,38,.96)),
    radial-gradient(circle at top,rgba(255,196,46,.25),transparent 38%);
  box-shadow:
    0 30px 90px rgba(0,0,0,.55),
    0 0 42px rgba(255,196,46,.18);
  position:relative;
  overflow:hidden;
}

.home-start-box:before{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  left:50%;
  top:-150px;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(255,196,46,.42),transparent 70%);
  animation:homeGlow 2.8s ease-in-out infinite;
}

.home-start-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,196,46,.12);
  border:1px solid rgba(255,196,46,.35);
  color:#ffd86a;
  font-size:13px;
  font-weight:900;
  letter-spacing:.8px;
  text-transform:uppercase;
  position:relative;
  z-index:1;
}

.home-start-title{
  margin:18px 0 8px;
  font-size:44px;
  line-height:.95;
  font-weight:1000;
  letter-spacing:1px;
  color:#fff;
  text-shadow:0 5px 18px rgba(0,0,0,.45);
  position:relative;
  z-index:1;
}

.home-start-subtitle{
  margin:0 auto 24px;
  max-width:470px;
  color:#b9c5d8;
  font-size:17px;
  line-height:1.45;
  position:relative;
  z-index:1;
}

.home-start-btn{
  border:0;
  border-radius:18px;
  padding:18px 28px;
  min-width:280px;
  cursor:pointer;
  font-size:18px;
  font-weight:1000;
  color:#101827;
  background:linear-gradient(135deg,#ffe06b,#ffc42e,#ff9f1c);
  box-shadow:
    0 14px 34px rgba(255,159,28,.35),
    inset 0 2px 0 rgba(255,255,255,.45);
  transform:translateY(0);
  transition:transform .18s ease,box-shadow .18s ease;
  position:relative;
  z-index:1;
}

.home-start-btn:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:
    0 18px 44px rgba(255,159,28,.45),
    inset 0 2px 0 rgba(255,255,255,.5);
}

.home-start-btn:active{
  transform:translateY(1px) scale(.99);
}

.home-start-note{
  margin-top:15px;
  color:#7f8da3;
  font-size:13px;
  position:relative;
  z-index:1;
}

@keyframes homeOverlayIn{
  from{opacity:0}
  to{opacity:1}
}

@keyframes homeOverlayOut{
  from{opacity:1}
  to{opacity:0;visibility:hidden}
}

@keyframes homeGlow{
  0%,100%{opacity:.6;transform:translateX(-50%) scale(.95)}
  50%{opacity:1;transform:translateX(-50%) scale(1.08)}
}

@keyframes blinkGreen{
  0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
  50%{box-shadow:0 0 0 5px rgba(34,197,94,.75)}
}

.blink{
  animation:blinkGreen .8s ease-in-out infinite;
}

@media(max-width:700px){
  .wrap{padding:16px 10px}
  .brand{font-size:30px}
  .btn{font-size:15px;padding:11px 14px}

  .home-start-title{
    font-size:34px;
  }

  .home-start-box{
    padding:28px 20px;
    border-radius:24px;
  }

  .home-start-btn{
    min-width:0;
    width:100%;
    font-size:16px;
    padding:16px 18px;
  }
}