/* Valora Community TeamSpeak — javna stranica.
   FONTOVI: namjerno BEZ webfontova. Fajlovi u web/public/fonts su neiskoristeni ostaci
   (glavni sajt ih nigdje ne ucitava) i sve tezine su ISTI fajl — deklarisati 400/500/600
   nad jednim fajlom daje sinteticki bold. Koristi se isti sistemski stek koji
   valoragaming.com stvarno renderuje.
   Tokeni su PREUZETI iz valoragaming.com/styles.css da stranica bude dio sajta,
   a ne treci izgled. Ne izmisljati novu paletu. */


:root{
  --bg:#070706; --surface:#0c0c0a; --raised:#131310; --raised-2:#191915;
  --gold:#e6b43c; --gold-hi:#f6dd78; --gold-deep:#b07d1e; --lime:#c4f24a;
  --text:#f4f1ea; --muted:#aaa498; --muted-2:#7e7868;
  --line:rgba(255,255,255,.09); --line-soft:rgba(255,255,255,.05);
  --gold-line:rgba(230,180,60,.35);
  --r:16px; --r-lg:22px; --maxw:1200px;
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow:0 1px 2px rgba(0,0,0,.6), 0 18px 44px rgba(0,0,0,.46);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 16px/1.55 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  /* vinjeta: mekan prelaz, bez tvrde ivice */
  background-image:radial-gradient(1200px 620px at 50% -8%,rgba(230,180,60,.10),transparent 62%);
}
img{max-width:100%;display:block}
a{color:inherit}
code,kbd,.mono{font-family:"JetBrains Mono",ui-monospace,monospace}

/* zrno: daje materijalnost umjesto plosnate ravni */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}

/* ---------- traka ---------- */
.bar{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px max(20px,calc((100vw - var(--maxw))/2));
  /* .86 je propustao tekst hero-a da se vidi KROZ traku dok se skroluje ispod nje */
  background:rgba(7,7,6,.97); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand span{display:flex;flex-direction:column;line-height:1;font-weight:600;letter-spacing:.06em;color:var(--gold)}
.brand small{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.24em;color:var(--muted-2);margin-top:3px}
.bar-links{display:flex;gap:20px;font-size:13.5px;color:var(--muted)}
.bar-links a{text-decoration:none}
.bar-links a:hover{color:var(--gold)}

/* ---------- hero ---------- */
.hero{padding:52px max(20px,calc((100vw - var(--maxw))/2)) 34px;position:relative;z-index:2}
.eyebrow{
  margin:0 0 12px; font-family:"JetBrains Mono",monospace; font-size:11px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--muted-2);
}
.hero h1{margin:0;font-size:clamp(34px,5.2vw,54px);line-height:1.04;font-weight:600;letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--gold)}
.lede{margin:12px 0 26px;max-width:56ch;color:var(--muted);font-size:16.5px}

.addr{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
#addr{
  padding:12px 16px;border:1px solid var(--gold-line);border-radius:12px;
  background:linear-gradient(180deg,var(--raised-2),var(--raised));
  font-size:17px;font-weight:700;color:var(--gold-hi);letter-spacing:.01em;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 20px;border-radius:12px;border:1px solid var(--line);
  background:var(--raised);color:var(--text);font:600 14.5px/1 Inter,sans-serif;
  text-decoration:none;cursor:pointer;
  transition:transform var(--v,.16s) var(--ease),background .16s var(--ease),border-color .16s var(--ease);
}
.btn:hover{transform:translateY(-1px);border-color:var(--gold-line)}
.btn:active{transform:translateY(0)}
.btn.gold{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#221a06;border-color:transparent;box-shadow:0 6px 20px rgba(230,180,60,.22)}
.btn.sm{min-height:36px;padding:0 14px;font-size:13px;margin-top:10px}
.btn:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}

.state{display:flex;align-items:center;gap:10px;margin:22px 0 0;font-size:15px;color:var(--muted)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--muted-2);flex:0 0 auto}
.dot{position:relative}
.dot.up{background:var(--lime)}
/* puls ide preko transform/opacity na pseudo-elementu, ne preko box-shadow */
.dot.up::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:rgba(196,242,74,.45);animation:pulse 2.6s var(--ease) infinite;
}
.dot.down{background:#e5645f}
@keyframes pulse{0%{transform:scale(1);opacity:.5}70%{transform:scale(2.9);opacity:0}100%{transform:scale(2.9);opacity:0}}
.state b{color:var(--text);font-weight:600}

.facts{display:flex;flex-wrap:wrap;gap:8px 26px;margin:16px 0 0}
.facts div{display:flex;gap:8px;align-items:baseline}
.facts dt{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
.facts dd{margin:0;font-size:14px;color:var(--muted)}

/* ---------- raspored ---------- */
.cols{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:20px;
  padding:0 max(20px,calc((100vw - var(--maxw))/2)) 56px;position:relative;z-index:2;
}
@media (max-width:900px){.cols{grid-template-columns:1fr}}
.side{display:flex;flex-direction:column;gap:20px;min-width:0}

.panel{
  background:linear-gradient(180deg,var(--surface),#0a0a08);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:18px 18px 16px;min-width:0;
}
.panel-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.panel-h h2{margin:0;font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.hint,.tick{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.14em;color:var(--muted-2);text-transform:uppercase}

/* ---------- potpis: tabla soba ---------- */
.rooms{max-height:620px;overflow:auto;margin:0 -6px;padding:0 6px;scrollbar-width:thin;scrollbar-color:var(--raised-2) transparent}
.rooms::-webkit-scrollbar{width:8px}
.rooms::-webkit-scrollbar-thumb{background:var(--raised-2);border-radius:99px}
.rooms::-webkit-scrollbar-track{background:transparent}
.sect{
  display:flex;align-items:center;gap:10px;margin:16px 0 7px;
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.24em;color:var(--muted-2);
}
.sect::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.sect:first-child{margin-top:0}
.room{
  display:flex;align-items:center;gap:10px;min-height:32px;padding:4px 8px;border-radius:9px;
  border-top:1px solid var(--line-soft);
}
.room.sub{margin-left:16px}
.room.busy{background:rgba(230,180,60,.05)}
.room img{width:16px;height:16px;flex:0 0 auto;opacity:.95}
.room .nm{flex:1;min-width:0;font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room.busy .nm{color:var(--text)}
.room .cnt{font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--muted-2);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.room.busy .cnt{color:var(--gold)}
.who{margin:2px 0 6px 42px;display:flex;flex-wrap:wrap;gap:6px}
.who span{
  font-size:12.5px;padding:3px 9px;border-radius:999px;
  background:var(--raised-2);border:1px solid var(--line-soft);color:var(--text);
  max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.who span.new{animation:tickin .5s var(--ease)}
@keyframes tickin{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

/* ---------- koraci ---------- */
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.steps li{display:flex;gap:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
.steps li:first-child{padding-top:0;border-top:0}
.num{font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;color:var(--gold-deep);padding-top:2px}
.steps b{display:block;font-weight:600;font-size:15px}
.steps p{margin:4px 0 0;font-size:13.5px;color:var(--muted)}
.steps code{color:var(--gold-hi);font-size:13px}
kbd{
  font-family:"JetBrains Mono",monospace;font-size:11.5px;padding:1px 6px;border-radius:5px;
  background:var(--raised-2);border:1px solid var(--line);color:var(--text);
}

/* ---------- muzicki bot ---------- */
.botstate{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:14px;color:var(--muted)}
.np{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;margin:0 0 12px}
/* ★ `display:grid` gazi ugradjeno [hidden]{display:none} — bez ovoga prazna traka ostaje vidljiva */
.np[hidden]{display:none}
.np-t{grid-column:1/-1;font-size:14px;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-bar{height:4px;border-radius:99px;background:var(--raised-2);overflow:hidden}
.np-bar i{display:block;height:100%;background:var(--lime);transition:width .4s var(--ease)}
.np-time{font-size:11.5px;color:var(--muted-2);font-variant-numeric:tabular-nums}
.bothow{margin:0 0 10px;font-size:13px;color:var(--muted)}
.bothow code,.cmds code{color:var(--gold-hi);font-size:12.5px}
.cmds{margin:0;display:flex;flex-direction:column}
.cmds div{display:flex;gap:10px;align-items:baseline;padding:5px 0;border-top:1px solid var(--line-soft)}
.cmds div:first-child{border-top:0}
.cmds dt{flex:0 0 74px;font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--gold)}
.cmds dd{margin:0;font-size:13px;color:var(--muted)}

.prio{
  margin:12px 0 0;padding:10px 12px;border-radius:10px;font-size:12.5px;line-height:1.5;
  color:var(--muted);background:rgba(230,180,60,.05);border:1px solid var(--gold-line);
}
.prio b{color:var(--gold)}

/* ---------- rang-lista ---------- */
.top{list-style:none;margin:0;padding:0;counter-reset:r}
.top li{
  display:flex;align-items:center;gap:10px;min-height:38px;
  padding:6px 0;border-top:1px solid var(--line-soft);font-size:14px;
}
.top li:first-child{border-top:0}
.top li::before{
  counter-increment:r;content:counter(r,decimal-leading-zero);
  font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted-2);width:20px;flex:0 0 auto;
  font-variant-numeric:tabular-nums;
}
.top img{width:16px;height:16px;flex:0 0 auto}
.top .who-nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .rk{font-size:12px;color:var(--muted-2)}
.top .hrs{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--gold);font-variant-numeric:tabular-nums}
.empty{color:var(--muted-2);font-size:13.5px;margin:6px 0}

/* ---------- podnozje ---------- */
.foot{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  padding:18px max(20px,calc((100vw - var(--maxw))/2)) 34px;
  border-top:1px solid var(--line-soft);color:var(--muted-2);font-size:13px;position:relative;z-index:2;
}
.foot a{color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* preskoci na sadrzaj — vidljiv tek na fokus */
.skip{
  position:absolute;left:-9999px;top:8px;z-index:9;
  padding:10px 16px;border-radius:10px;background:var(--gold);color:#221a06;font-weight:600;
}
.skip:focus{left:max(20px,calc((100vw - var(--maxw))/2))}