/* =============== SHOUTBOX PANEL =============== */
.shoutbox-panel {
  background: linear-gradient(180deg,#0f172a,#0b1320);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 1rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  backdrop-filter: saturate(120%) blur(2px);
}

/* seznam zpráv – jemný scrollbar, mezery */
#shoutbox-messages {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  max-height: min(72vh, 900px);
  overflow-y: auto;
  padding-right: .25rem;
  scrollbar-width: thin;
  scrollbar-color: #3b4252 transparent;
}
#shoutbox-messages::-webkit-scrollbar { width: 8px; }
#shoutbox-messages::-webkit-scrollbar-thumb {
  background: #3b4252; border-radius: 10px;
}
#shoutbox-messages::-webkit-scrollbar-track { background: transparent; }

/* =============== AVATARY =============== */
.shoutbox-avatar {
  box-shadow: 0 0 0 2px rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.35);
  transition: transform .12s ease;
}
.shoutbox-avatar:hover { transform: translateY(-1px); }

/* =============== BUBLINY =============== */
.bubble {
  --bg: rgba(20, 28, 40, .92);
  --bd: rgba(255,255,255,.08);
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: 16px;
  padding: .55rem .8rem .6rem .8rem;
  box-shadow: 0 10px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03);
  position: relative;
  overflow-wrap: anywhere;
}
.bubble:hover {
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 12px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
}

/* ocásek */
.bubble::before{
  content:"";
  position:absolute;
  left:-6px; top:14px;
  width:0; height:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-right:6px solid var(--bg);
  filter: drop-shadow(0 0 0 var(--bd));
}

/* hlavička bubliny: jméno + čas */
.bubble-header {
  display:flex; align-items:center; gap:.5rem;
  margin-bottom:.25rem;
}
.bubble-author {
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .2px;
}
.bubble-meta {
  font-size: .72rem;
  color: #a1a9b7;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  padding: .08rem .4rem;
  border-radius: .4rem;
}

/* text zprávy */
.bubble-body {
  color:#e6e8ee;
  line-height: 1.4;
  font-size: .92rem;
}
.bubble-body a{
  color:#93c5fd; text-decoration: underline;
}
.bubble-body a:hover{ color:#bfdbfe; }

/* — role variace — */
.bubble--admin{
  --bg: linear-gradient(180deg, rgba(35,29,46,.95), rgba(18,16,26,.95));
  border-color: rgba(199,120,221,.25);
  box-shadow: 0 0 0 1px rgba(199,120,221,.18), 0 12px 28px rgba(90,49,120,.25);
}
.bubble--mod{
  --bg: linear-gradient(180deg, rgba(24,36,42,.95), rgba(12,20,26,.95));
  border-color: rgba(59,130,246,.25);
  box-shadow: 0 0 0 1px rgba(59,130,246,.18), 0 12px 28px rgba(29,78,216,.22);
}
.bubble--me{
  --bg: linear-gradient(180deg, rgba(24,33,54,.95), rgba(14,22,38,.95));
  border-color: rgba(255,99,99,.28);
  box-shadow: 0 0 0 1px rgba(255,99,99,.18), 0 12px 28px rgba(120,30,30,.25);
}
.bubble--me::before{
  left:auto; right:-6px;
  border-right:0; border-left:6px solid rgba(24,33,54,.95);
}

/* =============== TOOLBAR =============== */
.sb-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem;
  background: rgba(15,23,42,.6);
  border:1px solid rgba(255,255,255,.06);
  padding:.45rem .5rem;
  border-radius:.75rem;
}

/* tlačítka */
.sb-btn{
  background:#2b3445;
  color:#e5e7eb;
  border:1px solid #3b465a;
  padding:.38rem .6rem;
  border-radius:.55rem;
  font-size:.85rem; line-height:1rem;
  display:inline-flex; align-items:center; gap:.4rem;
  transition: transform .08s ease, background .16s, border-color .16s, color .16s;
}
.sb-btn:hover{ background:#3b465a; border-color:#51607a; color:#fff; transform: translateY(-1px); }
.sb-btn:active{ transform: translateY(0); }

/* barevný input */
#sb-color{
  height: 2rem; width: 2.25rem;
  border-radius:.55rem;
  border:1px solid #3b465a;
  background:#111827;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

/* popover emoji */
#sb-emoji-pop{
  border-radius:.9rem;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(8,13,22,.98);
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
  padding:.5rem;
  min-width: 240px;
}
#sb-emoji-pop::before{
  content:"";
  position:absolute; top:-8px; left:22px;
  width:0;height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-bottom:8px solid rgba(8,13,22,.98);
}
.sb-emoji{
  background:#1f2937;
  border:1px solid rgba(255,255,255,.07);
  border-radius:.55rem;
  padding:.25rem .35rem;
  font-size:1.1rem;
  transition: transform .08s ease, background .16s, border-color .16s;
}
.sb-emoji:hover{ transform: scale(1.08); background:#334155; border-color:#4b5563; }

/* =============== TEXTAREA + COUNTER =============== */
#shoutbox-input{
  resize:none;
  background:#273244;
  border:1px solid rgba(255,255,255,.07);
  color:#e6e8ee;
  border-radius:.8rem;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.25);
  transition: border-color .16s, box-shadow .16s, background .16s;
}
#shoutbox-input:focus{
  border-color:#ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,.12), inset 0 2px 6px rgba(0,0,0,.28);
  background:#2a364b;
}

/* progress pod inputem – přidej <div class="sb-progress"><span id="sb-progress"></span></div> */
.sb-progress{
  height: 4px;
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  overflow: hidden;
}
.sb-progress > span{
  display:block; height:100%; width:0%;
  background: linear-gradient(90deg, #22c55e, #f59e0b, #ef4444);
  transition: width .15s ease;
}

/* hint text */
.sb-hint{ color:#9aa3b2; font-size:.75rem; }

/* =============== ARCHIV ODKAZ =============== */
.shoutbox-archive{
  display:inline-block; color:#aab2c0; font-size:.85rem;
}
.shoutbox-archive:hover{ color:#fff; text-decoration:underline; }

/* === Slider šipky === */
/* slider šipky */
#srv-prev, #srv-next{
  width: 46px; height: 46px; border-radius: 9999px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; font-weight:700;
  color:#e5e7eb; background: rgba(15,23,42,.9);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  cursor:pointer; transition:transform .2s, background .2s, box-shadow .2s;
}
#srv-prev:hover, #srv-next:hover{
  background:#ef4444; color:#fff; transform:scale(1.08);
  box-shadow:0 10px 24px rgba(0,0,0,.55);
}
#srv-prev:active, #srv-next:active{ transform:scale(.96); }
#srv-prev{ left:-22px; }
#srv-next{ right:-22px; }

/* ====== NEWS / ARTICLES ====== */

/* celý box */
.news-box{
  background: rgba(31,41,55,.6);           /* gray-800/60 */
  border: 1px solid rgba(255,255,255,.08);  /* jemná hrana */
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

/* titulní pruh */
.news-head{
  background: #ef4444;                      /* red-600 */
  color:#fff;
  font-weight: 800;
  padding:.75rem 1rem;
  font-size:1.05rem;
}

/* FEATURED blok (první článek) */
.news-feature{
  display:grid; gap:1.25rem;
  grid-template-columns: 1fr;
  padding:1rem 1.25rem;
}
@media (min-width: 768px){
  .news-feature{ grid-template-columns: 1fr 2fr; padding:1.25rem 1.5rem; }
}

.news-cover{
  border:1px solid rgba(255,255,255,.08);
  border-radius:.9rem;
  overflow:hidden;
  height:14rem;
}
.news-cover > img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .3s ease;
}
.news-feature:hover .news-cover > img{ transform: scale(1.02); }

.news-title{
  color:#fff; font-weight:800; line-height:1.2;
  font-size:1.35rem; margin-bottom:.35rem;
  transition: color .2s ease;
}
.news-title:hover{ color:#fca5a5; } /* red-300 */

.news-perex{ color:#d1d5db; }       /* gray-300 */
.news-meta{
  display:flex; align-items:center; gap:.5rem;
  color:#cbd5e1; font-size:.75rem;   /* slate-300 */
  margin-bottom:.4rem;
}
.meta-dot{ opacity:.5; }

/* badge/štítek */
.badge{
  display:inline-block; font-size:.7rem; line-height:1;
  padding:.25rem .45rem; border-radius:.4rem;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(59,130,246,.9);  /* default blue */
  color:#fff; font-weight:700;
}
.badge--top{ background:#2563eb; }  /* modřejší pro TOP */

/* LIST položky */
.news-list-item{
  display:flex; align-items:center; gap:.75rem;
  padding:.6rem .8rem;
  border-top:1px solid rgba(255,255,255,.06);
  transition: background .18s ease;
}
.news-list-item:hover{ background:rgba(55,65,81,.35); } /* gray-700/35 */

.news-thumb{
  width:3rem; height:3rem; flex:0 0 auto;
  border:1px solid rgba(255,255,255,.08);
  border-radius:.5rem; overflow:hidden;
}
.news-thumb > img{ width:100%; height:100%; object-fit:cover; }

.news-list-title{
  color:#fff; font-weight:600; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.news-list-meta{
  color:#94a3b8; font-size:.75rem; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}

.comment-pill{
  background:#2563eb; color:#fff; font-weight:800;
  font-size:.7rem; padding:.2rem .45rem;
  border-radius:.4rem; margin-left:auto;
}

/* odkaz „Zobrazit vše“ */
.news-more{
  display:inline-flex; align-items:center; gap:.35rem;
  color:#cbd5e1; padding:.6rem 0 1rem 0;
  transition: color .2s ease;
}
.news-more:hover{ color:#fff; }

/* utilita: line-clamp (fallback bez Tailwind pluginu) */
.line-clamp-3{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.line-clamp-2{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ====== HERO animace ====== */
.hero-animated{
  pointer-events:none;
  background: radial-gradient(1200px 400px at 50% 0%, rgba(255,255,255,.06), rgba(0,0,0,0) 60%),
              radial-gradient(800px 300px at 10% 20%, rgba(239,68,68,.10), transparent 60%),
              radial-gradient(800px 300px at 90% 20%, rgba(59,130,246,.10), transparent 60%);
  animation: heroFloat 12s ease-in-out infinite alternate;
}
@keyframes heroFloat{
  0%{ transform: translateY(0px); opacity:.9; }
  100%{ transform: translateY(-8px); opacity:1; }
}

/* ====== NEWS / ARTICLES ====== */
.news-box{
  background: rgba(31,41,55,.6);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

/* FEATURED */
.news-feature{ text-decoration:none; }
.news-cover{ height: 14rem; }
@media (min-width:768px){ .news-cover{ height: 100%; } }

.news-title{
  color:#fff; font-weight:800; line-height:1.2;
  font-size:1.35rem; margin-bottom:.35rem; transition:color .2s;
}
.news-perex{ color:#d1d5db; }
.news-meta{ color:#cbd5e1; font-size:.75rem; }
.meta-dot{ opacity:.6; }

/* badge */
.badge{
  display:inline-block; font-size:.7rem; line-height:1;
  padding:.25rem .45rem; border-radius:.4rem;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(59,130,246,.9); color:#fff; font-weight:700;
}
.badge--top{ background:#2563eb; }

/* LIST položky */
.news-list-item{ text-decoration:none; }
.news-list-item:hover{ background:rgba(55,65,81,.35); }
.news-thumb{ border:1px solid rgba(255,255,255,.08); }
.news-list-title{ color:#fff; font-weight:600; }
.news-list-meta{ color:#94a3b8; font-size:.75rem; }
.comment-pill{ background:#2563eb; color:#fff; font-weight:800; font-size:.7rem; }

/* line clamp (když nemáš tailwind plugin) */
.line-clamp-3{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ====== TOP servers slider – šipky (ladí s tvým stylem) ====== */
#srv-prev,#srv-next{
  width:46px;height:46px;border-radius:9999px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;font-weight:700;cursor:pointer;
  color:#e5e7eb;background:rgba(15,23,42,.9);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  transition:transform .2s,background .2s,box-shadow .2s;
}
#srv-prev:hover,#srv-next:hover{
  background:#ef4444;color:#fff;transform:scale(1.08);
  box-shadow:0 10px 24px rgba(0,0,0,.55);
}
#srv-prev:active,#srv-next:active{ transform:scale(.96); }
#srv-prev{ left:-22px; } #srv-next{ right:-22px; }

/* ====== Shoutbox bubliny (jemné sjednocení) ====== */
.shoutbox .bubble{
  background: rgba(31,41,55,0.9);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
  position: relative;
}
.shoutbox .bubble::before{
  content:""; position:absolute; left:-6px; top:12px; width:0; height:0;
  border-top:6px solid transparent; border-bottom:6px solid transparent;
  border-right:6px solid rgba(31,41,55,0.9);
}
.shoutbox .bubble--me{ background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); }
.shoutbox .bubble--me::before{ left:auto; right:-6px; border-right:none; border-left:6px solid rgba(239,68,68,.12); }

/* Karty serverů – sjednocená výška/efekt */
.srv-card{ transition: transform .2s ease, box-shadow .2s ease; }
.srv-card:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.45); }