/* ==========================================================================
   Aion 2 CZ — informační web
   Jeden styl pro celý web. Bez závislostí.
   ========================================================================== */

:root{
  --bg:        #0e1117;
  --bg-soft:   #151a23;
  --panel:     #1b212c;
  --panel-2:   #222a37;
  --line:      #2c3645;

  --text:      #e6ebf2;
  --muted:     #93a0b4;
  --dim:       #6b7889;

  --elyos:     #4fb3ff;
  --asmo:      #a97bff;
  --gold:      #e0b158;
  --danger:    #ff6b6b;

  --radius:    12px;
  --radius-sm: 8px;
  --maxw:      1180px;
  --shadow:    0 6px 22px rgba(0,0,0,.35);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 480px at 12% -8%, rgba(79,179,255,.10), transparent 60%),
    radial-gradient(760px 420px at 92% 4%,  rgba(169,123,255,.09), transparent 62%);
  z-index:0;
}

.wrap{position:relative;z-index:1;}

a{color:var(--elyos);text-decoration:none;}
a:hover{text-decoration:underline;}

/* --- hlavička ------------------------------------------------------------ */

header.site{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(14,17,23,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

.nav{
  max-width:var(--maxw);
  margin:0 auto;
  padding:14px 22px;
  display:flex;
  align-items:center;
  gap:26px;
  flex-wrap:wrap;
}

.brand{
  display:flex;
  align-items:baseline;
  gap:9px;
  font-weight:800;
  letter-spacing:.4px;
  font-size:19px;
  color:var(--text);
}
.brand:hover{text-decoration:none;}
.brand .mark{
  display:inline-block;
  width:26px;height:26px;
  border-radius:7px;
  background:linear-gradient(140deg,var(--elyos),var(--asmo));
  text-align:center;
  line-height:26px;
  font-size:14px;
  color:#0e1117;
  font-weight:900;
  transform:translateY(2px);
}
.brand small{
  font-size:11px;
  font-weight:600;
  color:var(--gold);
  letter-spacing:1.6px;
  text-transform:uppercase;
}

nav.main{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
}

nav.main a{
  color:var(--muted);
  padding:7px 13px;
  border-radius:var(--radius-sm);
  font-size:14.5px;
  font-weight:600;
  transition:.16s;
}
nav.main a:hover{color:var(--text);background:var(--panel);text-decoration:none;}
nav.main a.active{color:#0e1117;background:var(--elyos);}

/* --- layout -------------------------------------------------------------- */

main{
  max-width:var(--maxw);
  margin:0 auto;
  padding:34px 22px 80px;
}

.page-head{margin-bottom:30px;}
.page-head h1{font-size:31px;margin:0 0 8px;letter-spacing:-.4px;}
.page-head p{margin:0;color:var(--muted);max-width:74ch;}

.crumbs{font-size:13px;color:var(--dim);margin-bottom:14px;}
.crumbs a{color:var(--muted);}

section.block{margin-bottom:44px;}
section.block > h2{
  font-size:20px;
  margin:0 0 16px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:10px;
}
section.block > h2::before{
  content:"";
  width:4px;height:18px;
  border-radius:2px;
  background:var(--gold);
}

/* --- hero ---------------------------------------------------------------- */

.hero{
  background:linear-gradient(135deg,var(--panel),var(--bg-soft));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:34px 32px;
  margin-bottom:38px;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute;
  right:-70px;top:-70px;
  width:280px;height:280px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(224,177,88,.14),transparent 68%);
}
.hero h1{font-size:36px;margin:0 0 12px;letter-spacing:-.6px;position:relative;}
.hero p{margin:0;color:var(--muted);max-width:66ch;position:relative;}

.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;
  margin-top:24px;
  position:relative;
}
.stat{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:14px 16px;
}
.stat b{display:block;font-size:23px;color:var(--gold);line-height:1.2;}
.stat span{font-size:12.5px;color:var(--muted);}

/* --- karty --------------------------------------------------------------- */

.grid{display:grid;gap:16px;}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.grid.cols-4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr));}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  transition:.18s;
}
.card h3{margin:0 0 6px;font-size:17px;}
.card p{margin:0;color:var(--muted);font-size:14.5px;}

a.card{display:block;color:inherit;}
a.card:hover{
  text-decoration:none;
  border-color:var(--elyos);
  background:var(--panel-2);
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}

.class-card{position:relative;}
.class-card .role{
  display:inline-block;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  padding:3px 9px;
  border-radius:20px;
  margin-bottom:10px;
}
.role.tank   {background:rgba(79,179,255,.14); color:#7fc7ff;}
.role.heal   {background:rgba(110,231,183,.14);color:#6ee7b7;}
.role.melee  {background:rgba(255,107,107,.14);color:#ff8f8f;}
.role.ranged {background:rgba(224,177,88,.14); color:#e8c276;}
.role.magic  {background:rgba(169,123,255,.14);color:#c2a3ff;}
.role.support{background:rgba(147,160,180,.14);color:#b6c2d3;}

.class-card .more{margin-top:12px;font-size:13px;color:var(--elyos);font-weight:600;}

/* --- filtry -------------------------------------------------------------- */

.filters{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  margin-bottom:24px;
}
.filters h3{
  margin:0 0 12px;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted);
}
.filters .row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.filters .row:last-child{margin-bottom:0;}

.chip{
  border:1px solid var(--line);
  background:var(--bg-soft);
  color:var(--muted);
  padding:7px 14px;
  border-radius:20px;
  font-size:13.5px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  transition:.15s;
}
.chip:hover{border-color:var(--elyos);color:var(--text);}
.chip[aria-pressed="true"]{background:var(--elyos);border-color:var(--elyos);color:#0e1117;}

input[type="search"],input[type="text"]{
  width:100%;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--text);
  padding:11px 14px;
  font-size:15px;
  font-family:inherit;
}
input[type="search"]:focus,input[type="text"]:focus{outline:none;border-color:var(--elyos);}

.filter-foot{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.count{font-size:14px;color:var(--muted);}
.count b{color:var(--gold);}

.btn{
  background:transparent;
  border:1px solid var(--line);
  color:var(--muted);
  border-radius:var(--radius-sm);
  padding:8px 15px;
  font-size:13.5px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  transition:.15s;
}
.btn:hover{border-color:var(--danger);color:var(--danger);}

.build-card{display:flex;flex-direction:column;}
.build-card .top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:10px;
}
.build-card h3{margin:0;font-size:16.5px;}
.tag{
  font-size:11px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:5px;
  white-space:nowrap;
}
.tag.pve{background:rgba(79,179,255,.14);color:#7fc7ff;}
.tag.pvp{background:rgba(255,107,107,.14);color:#ff8f8f;}
.tag.level{background:rgba(110,231,183,.14);color:#6ee7b7;}

.stigmas{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--line);
  font-size:13px;
  color:var(--dim);
}
.stigmas b{color:var(--muted);font-weight:600;}

.empty{
  text-align:center;
  padding:54px 20px;
  color:var(--dim);
  border:1px dashed var(--line);
  border-radius:var(--radius);
  grid-column:1/-1;
}

/* plusy / mínusy na detailu postavy */
.card.pros{border-left:3px solid #6ee7b7;}
.card.cons{border-left:3px solid #ff8f8f;}
.card.pros ul,
.card.cons ul{margin:8px 0 0;padding-left:20px;color:var(--muted);font-size:14.5px;}
.card.pros li,
.card.cons li{margin-bottom:7px;}

/* --- accordion ----------------------------------------------------------- */

.acc{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--panel);
}
.acc + .acc{margin-top:10px;}

.acc > button.head{
  width:100%;
  background:transparent;
  border:0;
  color:var(--text);
  font-family:inherit;
  font-size:16.5px;
  font-weight:700;
  text-align:left;
  padding:17px 20px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:14px;
  transition:.15s;
}
.acc > button.head:hover{background:var(--panel-2);}

.acc .num{
  flex:0 0 auto;
  width:28px;height:28px;
  border-radius:8px;
  background:var(--panel-2);
  color:var(--gold);
  font-size:13px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
}
.acc .sub{display:block;font-size:13px;font-weight:500;color:var(--dim);margin-top:2px;}

.acc .arrow{margin-left:auto;flex:0 0 auto;color:var(--muted);transition:transform .2s;font-size:12px;}
.acc.open .arrow{transform:rotate(180deg);}

.acc .body{display:none;padding:4px 20px 22px;border-top:1px solid var(--line);}
.acc.open .body{display:block;}

.acc .body h4{
  margin:18px 0 8px;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--gold);
}
.acc .body h4:first-child{margin-top:14px;}
.acc .body p{margin:0 0 10px;color:var(--muted);font-size:14.5px;}
.acc .body ul{margin:0 0 10px;padding-left:20px;color:var(--muted);font-size:14.5px;}
.acc .body li{margin-bottom:5px;}

table.data{width:100%;border-collapse:collapse;font-size:14px;margin:6px 0 14px;}
table.data th,table.data td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);}
table.data th{
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.7px;
  font-weight:700;
}
table.data td{color:var(--text);}
table.data tr:last-child td{border-bottom:0;}

.callout{
  background:rgba(224,177,88,.07);
  border-left:3px solid var(--gold);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:12px 16px;
  font-size:14px;
  color:var(--muted);
  margin:14px 0;
}
.callout b{color:var(--gold);}

/* --- podzáložky ---------------------------------------------------------- */

.tabs{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  margin-bottom:22px;
}
.tabs button{
  background:transparent;
  border:0;
  border-bottom:2px solid transparent;
  color:var(--muted);
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  padding:11px 17px;
  cursor:pointer;
  transition:.15s;
}
.tabs button:hover{color:var(--text);}
.tabs button[aria-selected="true"]{color:var(--elyos);border-bottom-color:var(--elyos);}

.tabpanel{display:none;}
.tabpanel.active{display:block;}

.unlock{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(79,179,255,.10);
  border:1px solid rgba(79,179,255,.28);
  color:#9ed3ff;
  border-radius:20px;
  padding:5px 14px;
  font-size:13px;
  font-weight:700;
  margin-bottom:16px;
}

/* --- detail postavy ------------------------------------------------------ */

.detail-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:8px;}
.detail-head h1{margin:0;font-size:32px;letter-spacing:-.5px;}

.specs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:12px;
  margin:22px 0 28px;
}
.spec{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:14px 16px;
}
.spec small{
  display:block;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.9px;
  color:var(--dim);
  margin-bottom:4px;
}
.spec b{font-size:15px;font-weight:600;}

/* --- patička ------------------------------------------------------------- */

footer.site{
  border-top:1px solid var(--line);
  background:var(--bg-soft);
  padding:30px 22px;
  margin-top:20px;
}
footer.site .inner{
  max-width:var(--maxw);
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  font-size:13px;
  color:var(--dim);
}
footer.site b{color:var(--muted);}
footer.site .disclaimer{max-width:62ch;}

/* --- responzivita -------------------------------------------------------- */

@media (max-width:720px){
  .nav{gap:14px;}
  nav.main{margin-left:0;width:100%;}
  main{padding:24px 16px 60px;}
  .hero{padding:26px 20px;}
  .hero h1{font-size:27px;}
  .page-head h1{font-size:25px;}
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr;}
  .acc > button.head{font-size:15px;padding:15px 16px;}
  .filters{padding:16px;}
}


/* ==========================================================================
   Portréty tříd + ikony skillů
   ========================================================================== */

.class-portrait{
  float:left;
  width:150px;
  height:auto;
  margin:0 22px 14px 0;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.55));
  shape-outside:margin-box;
}

/* popis s portrétem v levém rohu */
.prose-with-portrait{
  display:flow-root;
}
.prose-with-portrait p{
  margin-top:0;
  color:var(--muted);
  font-size:15px;
  max-width:80ch;
}

/* build karta s portrétem v borderu */
.build-card.has-portrait{
  display:flex;
  gap:0;
  padding:0;
  overflow:hidden;
  position:relative;
}
.build-card .build-thumb{
  flex:0 0 120px;
  display:block;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 30%, rgba(79,179,255,.16), transparent 68%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  border-right:1px solid var(--line);
  transition:.2s;
}
.build-card .build-thumb img{
  position:absolute;
  bottom:0;left:50%;
  transform:translateX(-50%);
  width:auto;
  height:96%;
  object-fit:contain;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));
}
.build-card.has-portrait:hover .build-thumb{
  background:
    radial-gradient(circle at 50% 30%, rgba(79,179,255,.3), transparent 70%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
}
.build-card.has-portrait:hover{
  transform:translateY(-3px);
}
.build-card .build-body{
  flex:1;
  padding:20px;
  min-width:0;
}

/* skill chipy s ikonami */
.skills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:14px 0 12px;
}
.sk{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:20px;
  padding:4px 11px 4px 4px;
  font-size:12.5px;
  color:var(--muted);
  transition:.15s;
}
.sk:hover{
  border-color:var(--elyos);
  color:var(--text);
}
.sk img{
  width:22px;height:22px;
  flex:0 0 auto;
  display:block;
}
.sk i{font-style:normal;white-space:nowrap;}

/* tabulka stigem – chipy v buňce */
table.data td .skills{margin:0;}

/* schéma desky */
.board-figure{
  margin:18px 0;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg-soft);
}
.board-figure img{width:100%;display:block;}
.board-figure figcaption{
  padding:11px 16px;
  font-size:13px;
  color:var(--dim);
  border-top:1px solid var(--line);
}

@media (max-width:720px){
  .class-portrait{width:110px;margin:0 16px 10px 0;}
  .build-card.has-portrait{flex-direction:column;}
  .build-card .build-thumb{
    flex:0 0 150px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
}


/* portrét v kartě třídy (stránka Postavy) */
.class-card-thumb{
  height:190px;
  margin:-20px -20px 16px;
  border-radius:var(--radius) var(--radius) 0 0;
  background:
    radial-gradient(circle at 50% 35%, rgba(79,179,255,.14), transparent 70%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.class-card-thumb img{
  position:absolute;
  bottom:0;left:50%;
  transform:translateX(-50%);
  width:auto;height:94%;
  object-fit:contain;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.5));
}
a.class-card:hover .class-card-thumb{
  background:
    radial-gradient(circle at 50% 35%, rgba(79,179,255,.28), transparent 72%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
}

/* ==========================================================================
   Twitch přenosy
   ========================================================================== */



.stream-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:.18s;
}
.stream-card:hover{
  border-color:rgba(169,123,255,.5);
}

.stream-head{
  display:flex;
  align-items:center;
  gap:9px;
  padding:13px 16px;
  border-bottom:1px solid var(--line);
  background:var(--panel-2);
}
.stream-head b{
  font-size:15px;
  color:var(--text);
}

.stream-live-dot{
  width:9px;height:9px;
  border-radius:50%;
  background:#ff6b6b;
  box-shadow:0 0 0 3px rgba(255,107,107,.18);
  flex:0 0 auto;
}

.stream-open{
  margin-left:auto;
  font-size:12.5px;
  font-weight:600;
  color:var(--muted);
  white-space:nowrap;
}
.stream-open:hover{color:var(--asmo);text-decoration:none;}

.stream-frame{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  background:#0b0d12;
}
.stream-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* varianta pro mobil — bez přehrávače */
.stream-card--link{
  display:block;
  padding:16px;
  color:inherit;
}
.stream-card--link:hover{
  text-decoration:none;
  border-color:var(--asmo);
  background:var(--panel-2);
}
.stream-card--link .stream-head{
  padding:0 0 10px;
  border-bottom:0;
  background:transparent;
}
.stream-card--link p{
  margin:0 0 12px;
  color:var(--muted);
  font-size:14px;
}
.stream-cta{
  font-size:13.5px;
  font-weight:600;
  color:var(--asmo);
}

@media (max-width:720px){
  
}




/* střední sloupec s obsahem */



/* hero v užším středním sloupci */











/* --- sociální tlačítka --- */
.social-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.social-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 20px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  font-size:14.5px;
  font-weight:600;
  transition:.18s;
}
.social-btn:hover{
  text-decoration:none;
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}
.social-btn svg{
  width:20px;height:20px;
  flex:0 0 auto;
  fill:currentColor;
}
/* facebook */
.social-btn[href*="facebook"]{color:#8ab4f8;}
.social-btn[href*="facebook"]:hover{
  border-color:#1877f2;
  background:rgba(24,119,242,.10);
}
/* discord */
.social-btn[href*="discord"]{color:#a9a3ff;}
.social-btn[href*="discord"]:hover{
  border-color:#5865f2;
  background:rgba(88,101,242,.12);
}

/* ==========================================================================
   Domovská stránka — obsah vlevo, streamy vpravo
   ========================================================================== */



.rail-head{
  font-size:14px;
  margin:0 0 12px;
  padding-bottom:9px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:8px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted);
}
.rail-head::before{
  content:"";
  width:8px;height:8px;
  border-radius:50%;
  background:#ff6b6b;
  box-shadow:0 0 0 3px rgba(255,107,107,.18);
  flex:0 0 auto;
}
.rail-note{
  margin:12px 0 0;
  font-size:11.5px;
  line-height:1.5;
  color:var(--dim);
}

.stream-stack .stream-card{border-radius:var(--radius-sm);}
.stream-stack .stream-head{padding:9px 11px;gap:7px;}
.stream-stack .stream-head b{font-size:13px;}
.stream-stack .stream-open{font-size:11px;}
.stream-stack .stream-live-dot{width:7px;height:7px;}
.stream-stack .stream-frame{aspect-ratio:16 / 9;}
.stream-stack .stream-card--link{padding:11px;}
.stream-stack .stream-card--link .stream-head{padding:0 0 7px;}
.stream-stack .stream-card--link p{font-size:12.5px;margin:0 0 8px;}
.stream-stack .stream-cta{font-size:12px;}

/* hero v levém sloupci */

/* ==========================================================================
   Domovská stránka — obsah vlevo, streamy vpravo (JEDINÁ definice)
   ========================================================================== */


.home-center .hero{margin-bottom:0;}



/* hero v levém (širším) sloupci */
.home-top .hero{padding:30px 32px;}
.home-top .hero h1{font-size:32px;}
.home-top .hero p{max-width:none;}
.home-top .hero .stats{
  grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  gap:10px;
}
.home-top .hero .stat{padding:12px 13px;}
.home-top .hero .stat b{font-size:20px;}
.home-top .hero .stat span{font-size:11.5px;}

/* ==========================================================================
   Domovská stránka — obsah vlevo (širší), streamy vpravo (300px)
   Jediná definice, žádné duplicity.
   ========================================================================== */

.home-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:26px;
  align-items:start;
  margin-bottom:38px;
}

.home-center{
  min-width:0;
  overflow:hidden;
}
.home-center .hero{margin-bottom:0;}

.stream-rail{
  position:sticky;
  top:86px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  min-width:0;
  overflow:hidden;
}

.stream-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

.home-top .hero{padding:30px 32px;}
.home-top .hero h1{font-size:32px;}
.home-top .hero p{max-width:none;}
.home-top .hero .stats{
  grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  gap:10px;
}
.home-top .hero .stat{padding:12px 13px;}
.home-top .hero .stat b{font-size:20px;}
.home-top .hero .stat span{font-size:11.5px;}

@media (max-width:1000px){
  .home-top{grid-template-columns:1fr;}
  .stream-rail{position:static;}
  .stream-stack{flex-direction:row;flex-wrap:wrap;}
  .stream-stack .stream-card{flex:1 1 260px;}
}

@media (max-width:720px){
  .stream-stack{flex-direction:column;}
  .stream-stack .stream-card{flex:1 1 auto;}
}

/* ==========================================================================
   Sociální ikony v navigaci (vpravo nahoře)
   ========================================================================== */

.nav-social{
  display:flex;
  align-items:center;
  gap:4px;
  margin-left:auto;
  padding-left:14px;
  border-left:1px solid var(--line);
}

.nav-social a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:var(--radius-sm);
  color:var(--muted);
  transition:.16s;
}
.nav-social a:hover{
  background:var(--panel);
  text-decoration:none;
  transform:translateY(-1px);
}
.nav-social svg{
  width:18px;
  height:18px;
  fill:currentColor;
  display:block;
}
.nav-social a[href*="facebook"]:hover{color:#5b9bff;}
.nav-social a[href*="discord"]:hover{color:#8b94ff;}

/* na mobilu ať se nezalomí divně */
@media (max-width:720px){
  .nav-social{
    margin-left:0;
    padding-left:0;
    border-left:0;
  }
  .nav-social a{width:30px;height:30px;}
  .nav-social svg{width:17px;height:17px;}
}

/* ==========================================================================
   Odkazy na obsah uvnitř uvítacího bloku + karty novinek
   ========================================================================== */

.hero-links{
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.hero-sub{
  font-size:13px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 14px;
  padding:0;
  border:0;
}
.hero-sub::before{content:none;}

.hero-links .grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;}
.hero-links .card{padding:14px 16px;}
.hero-links .card h3{font-size:15px;margin-bottom:4px;}
.hero-links .card p{font-size:13px;line-height:1.5;}

/* karty novinek s datem */
.news-card{display:flex;flex-direction:column;}
.news-meta{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--dim);
  margin-bottom:9px;
}
.news-meta time{
  font-weight:600;
  color:var(--muted);
  letter-spacing:.3px;
}
.news-tag{
  display:inline-block;
  font-size:10px;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
  padding:2px 9px;
  border-radius:20px;
  background:rgba(147,160,180,.12);
  color:var(--muted);
  border:1px solid transparent;
}
.news-more{
  margin-top:11px;
  padding-top:10px;
  border-top:1px solid var(--line);
  font-size:13.5px;
  color:var(--muted);
}
.news-more b{color:var(--text);}
.news-card .stigmas{margin-top:auto;padding-top:11px;}

@media (max-width:720px){
  .hero-links .grid{grid-template-columns:1fr;}
}

/* odznak platformy u streamu (Twitch / Kick) */
.stream-platform{
  font-size:10px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  padding:2px 7px;
  border-radius:20px;
  background:rgba(147,160,180,.14);
  color:var(--muted);
  flex:0 0 auto;
}
.stream-card--link .stream-platform{margin-left:auto;}




/* ==========================================================================
   Video návody
   ========================================================================== */

.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:18px;
}

.video-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:.18s;
}
.video-card:hover{
  border-color:rgba(255,107,107,.45);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

.video-frame{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  background:#0b0d12;
}
.video-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

.video-body{padding:16px 18px 18px;}
.video-body h3{
  margin:8px 0 6px;
  font-size:16px;
  line-height:1.35;
}
.video-body p{
  margin:0 0 10px;
  color:var(--muted);
  font-size:14px;
}
.video-tag{
  display:inline-block;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.7px;
  text-transform:uppercase;
  padding:2px 8px;
  border-radius:20px;
  background:rgba(255,107,107,.18);
  color:#ff9b9b;
  border:1px solid rgba(255,107,107,.35);
}
.video-author{
  font-size:12.5px;
  color:var(--dim);
  font-weight:600;
}

/* varianta pro mobil */
.video-card--link{
  display:block;
  color:inherit;
}
.video-card--link:hover{
  text-decoration:none;
}
.video-thumb{
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  background:#0b0d12;
}

/* prázdný stav */
.video-empty{
  grid-column:1 / -1;
  text-align:center;
  padding:44px 24px;
  border:1px dashed var(--line);
  border-radius:var(--radius);
  color:var(--dim);
}
.video-empty b{
  display:block;
  color:var(--muted);
  font-size:15px;
  margin-bottom:8px;
}
.video-empty p{
  margin:0;
  font-size:14px;
  max-width:56ch;
  margin-inline:auto;
  line-height:1.6;
}
.video-empty code{
  background:var(--panel-2);
  padding:2px 6px;
  border-radius:5px;
  font-size:13px;
  color:var(--gold);
}

@media (max-width:720px){
  .video-grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   Barvy štítků u novinek — jedna čistá vrstva
   ========================================================================== */

.news-tag.tag-event  { background:rgba(110,231,183,.13); color:#8fdcbf; border:1px solid rgba(110,231,183,.30); }
.news-tag.tag-raid   { background:rgba(255,107,107,.13); color:#e89a9a; border:1px solid rgba(255,107,107,.32); }
.news-tag.tag-server { background:rgba(125,211,252,.13); color:#9cc9e8; border:1px solid rgba(125,211,252,.30); }
.news-tag.tag-korea  { background:rgba(240,201,90,.13);  color:#dcc079; border:1px solid rgba(240,201,90,.30); }
.news-tag.tag-patch  { background:rgba(169,123,255,.13); color:#b9a3e0; border:1px solid rgba(169,123,255,.30); }
.news-tag.tag-system { background:rgba(79,179,255,.12);  color:#8bbde0; border:1px solid rgba(79,179,255,.28); }
.news-tag.tag-launch { background:rgba(224,177,88,.13);  color:#d9b977; border:1px solid rgba(224,177,88,.30); }

/* ==========================================================================
   Patička — "Připoj se k nám"
   ========================================================================== */

.footer-social{margin-top:16px;display:block;}

.footer-social-label{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 10px;
}

.footer-social-row{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}

.footer-social-row a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 14px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--muted);
  font-size:13px;
  font-weight:600;
  line-height:1;
  max-width:max-content;
  transition:.16s;
  text-decoration:none;
}
.footer-social-row a:hover{
  transform:translateY(-1px);
}

/* ikona MUSÍ mít pevnou velikost – jinak se roztáhne */
.footer-social-row a svg{
  width:16px !important;
  height:16px !important;
  min-width:16px;
  max-width:16px;
  max-height:16px;
  flex:0 0 16px;
  fill:currentColor;
  display:block;
}
.footer-social-row a span{
  white-space:nowrap;
}

.footer-social-row a[href*="facebook"]:hover{
  color:#6aa5ff;
  border-color:rgba(24,119,242,.55);
  background:rgba(24,119,242,.10);
}
.footer-social-row a[href*="discord"]:hover{
  color:#9aa2ff;
  border-color:rgba(88,101,242,.55);
  background:rgba(88,101,242,.12);
}

@media (max-width:720px){
  .footer-social-row a{font-size:12.5px;padding:6px 12px;}
}

/* ==========================================================================
   TIMERY — živé odpočty
   ========================================================================== */

.tz-note{
  background:var(--panel);
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  border-radius:var(--radius-sm);
  padding:11px 16px;
  font-size:13.5px;
  color:var(--muted);
  margin-bottom:26px;
}
.tz-note b{color:var(--text);}

.timers-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:14px;
}

.timer-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 18px;
  transition:.18s;
}
.timer-card.is-now{
  border-color:rgba(110,231,183,.55);
  background:linear-gradient(180deg, rgba(110,231,183,.07), var(--panel) 70%);
  box-shadow:0 0 0 1px rgba(110,231,183,.18);
}

.tm-head{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:4px;
}
.tm-head b{
  font-size:15.5px;
  color:var(--text);
}

.tm-badge{
  font-size:10px;
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;
  padding:2px 8px;
  border-radius:20px;
  flex:0 0 auto;
}
.tm-now{
  background:rgba(110,231,183,.20);
  color:#7cf0c0;
  border:1px solid rgba(110,231,183,.45);
}
.tm-soon{
  background:rgba(224,177,88,.18);
  color:#e8c276;
  border:1px solid rgba(224,177,88,.40);
}

.tm-zone{
  font-size:12.5px;
  color:var(--dim);
  margin-bottom:9px;
}

.tm-time{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding-top:8px;
  border-top:1px solid var(--line);
}
.tm-left{
  font-size:20px;
  font-weight:700;
  color:var(--gold);
  font-variant-numeric:tabular-nums;
  letter-spacing:.3px;
}
.timer-card.is-now .tm-left{color:#7cf0c0;font-size:16px;}
.tm-at{
  font-size:13px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.tm-note{
  margin-top:9px;
  font-size:12.5px;
  line-height:1.5;
  color:var(--dim);
}

@media (max-width:720px){
  .timers-grid{grid-template-columns:1fr;}
  .tm-left{font-size:18px;}
}

/* ==========================================================================
   Lišta timerů na hlavní stránce
   ========================================================================== */

.timer-bar{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:13px 18px;
  margin-bottom:26px;
  color:inherit;
  text-decoration:none;
  transition:.18s;
}
.timer-bar:hover{
  text-decoration:none;
  border-color:var(--gold);
  background:var(--panel-2);
}

.tb-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:var(--gold);
  flex:0 0 auto;
}

.tb-items{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  min-width:0;
  flex:1 1 auto;
}

.tb-item{
  display:inline-flex;
  align-items:baseline;
  gap:7px;
  font-size:13.5px;
  white-space:nowrap;
}
.tb-item b{
  color:var(--muted);
  font-weight:600;
}
.tb-item i{
  font-style:normal;
  color:var(--gold);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.tb-item.is-soon i{color:#e8c276;}

.tb-arrow{
  font-size:12.5px;
  font-weight:600;
  color:var(--dim);
  flex:0 0 auto;
  margin-left:auto;
}
.timer-bar:hover .tb-arrow{color:var(--gold);}

@media (max-width:720px){
  .timer-bar{padding:12px 14px;gap:10px;}
  .tb-items{gap:12px;}
  .tb-item{font-size:12.5px;}
  .tb-arrow{display:none;}
}

/* ==========================================================================
   Lišta timerů v hlavičce — drobnější provedení
   ========================================================================== */

header.site .timer-bar{
  max-width:var(--maxw);
  margin:0 auto;
  border-radius:0;
  border:0;
  border-top:1px solid var(--line);
  background:transparent;
  padding:8px 22px;
}
header.site .timer-bar:hover{
  background:rgba(255,255,255,.025);
}
header.site .timer-bar .tb-label{
  font-size:10px;
  letter-spacing:1.2px;
}
header.site .timer-bar .tb-item{
  font-size:12.5px;
}
header.site .timer-bar .tb-arrow{
  font-size:11.5px;
}

@media (max-width:720px){
  header.site .timer-bar{padding:7px 16px;}
  header.site .timer-bar .tb-items{gap:11px;}
  header.site .timer-bar .tb-item{font-size:11.5px;}
}

/* odkaz na rozepsaný build */
.build-more{
  display:inline-block;
  margin-top:12px;
  font-size:13px;
  font-weight:600;
  color:var(--asmo);
  border-bottom:1px dashed rgba(169,123,255,.5);
  padding-bottom:1px;
}
.build-more:hover{
  text-decoration:none;
  color:#c2a3ff;
  border-bottom-color:#c2a3ff;
}
.build-card .build-more{margin-top:auto;}

/* tabulka bez hlavičky (souhrny) */
table.data tbody th{
  text-align:left;
  padding:9px 12px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-weight:600;
  width:38%;
}

/* ==========================================================================
   ROZEPSANÉ BUILDY — gladiátorský styl (gold akcent)
   Sjednoceno napříč všemi buildy: tabulky, KPI, poznámky, chipsy.
   ========================================================================== */

/* --- KPI / spec lišta ---------------------------------------------------- */
.build-main .specs,
.build-main .kpi{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;
  margin:20px 0 24px;
}
.build-main .specs > div,
.build-main .kpi > div{
  background:rgba(224,177,88,.06);
  border:1px solid rgba(224,177,88,.30);
  border-radius:var(--radius-sm);
  padding:13px 16px;
}
.build-main .spec small,
.build-main .kpi small{
  display:block;font-size:11px;text-transform:uppercase;
  letter-spacing:.6px;color:var(--dim);margin-bottom:4px;font-weight:700;
}
.build-main .spec b,
.build-main .kpi b{font-size:20px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums;}

/* --- nadpisy ------------------------------------------------------------- */
.build-main > h2,
.build-main section.block > h2{
  font-size:19px;margin:36px 0 12px;padding-left:11px;
  border-left:3px solid var(--gold);border-top:0;color:var(--text);
  text-transform:none;letter-spacing:0;
}
.build-main > h2::before,
.build-main section.block > h2::before{content:none !important;}
.build-main h3{font-size:15.5px;margin:24px 0 8px;color:var(--elyos);}
.build-main h4{font-size:14.5px;margin:20px 0 6px;color:var(--gold);letter-spacing:.2px;}

/* --- tabulky ------------------------------------------------------------- */
.build-main table,
.build-main table.data{
  width:100%;border-collapse:collapse;margin:12px 0 18px;font-size:13.5px;
  background:transparent;border:0;border-radius:0;
}
.build-main table th,
.build-main table td{
  text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);
  vertical-align:top;background:transparent;
}
.build-main table thead th,
.build-main table th{
  color:var(--dim);font-weight:700;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.6px;white-space:nowrap;
  background:transparent;border-bottom:1px solid var(--line);
}
.build-main table tbody tr:last-child td{border-bottom:1px solid var(--line);}
.build-main table tbody tr:hover td{background:rgba(224,177,88,.045);}
.build-main table td:last-child{color:var(--muted);}
.build-main table td.num,
.build-main table th.num{text-align:left;white-space:nowrap;color:var(--text);font-variant-numeric:tabular-nums;}

/* --- poznámky / callouty ------------------------------------------------- */
.build-main .note,
.build-main .callout{
  background:rgba(224,177,88,.07);
  border-left:3px solid var(--gold);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:12px 16px;margin:14px 0;font-size:14px;color:var(--muted);
}
.build-main .note b,
.build-main .note strong,
.build-main .callout b,
.build-main .callout strong{color:var(--gold);}
.build-main .note.warn,
.build-main .callout.warn{
  background:rgba(255,107,107,.07);
  border-left-color:var(--danger);
}
.build-main .note.warn b,
.build-main .note.warn strong,
.build-main .callout.warn b,
.build-main .callout.warn strong{color:var(--danger);}

/* --- chipsy priorit (pill) ---------------------------------------------- */
.pill{
  display:inline-block;padding:2px 9px;border-radius:99px;
  font-size:11.5px;font-weight:700;letter-spacing:.3px;white-space:nowrap;
}
.p-core {background:rgba(224,177,88,.16);color:var(--gold);   border:1px solid rgba(224,177,88,.38);}
.p-flex {background:rgba(79,179,255,.14); color:#7fc7ff;      border:1px solid rgba(79,179,255,.34);}
.p-skip {background:rgba(147,160,180,.14);color:var(--dim);   border:1px solid rgba(147,160,180,.30);}
.p-pvp  {background:rgba(169,123,255,.14);color:#c2a4ff;      border:1px solid rgba(169,123,255,.34);}
.p-warn {background:rgba(255,107,107,.14);color:#ff9a9a;      border:1px solid rgba(255,107,107,.32);}

/* --- hlavička buildu ----------------------------------------------------- */
.build-main .page-head h1{margin:0 0 6px;font-size:29px;letter-spacing:-.4px;}
.build-main .crumbs{color:var(--dim);font-size:13px;margin-bottom:14px;}
.build-main .crumbs a{color:var(--muted);text-decoration:none;}
.build-main .crumbs a:hover{color:var(--gold);}

/* ==========================================================================
   NAVIGACE BUILDU — desktop: stálý panel vpravo · mobil: rozbalovací
   ========================================================================== */

/* výchozí (mobil): rozbalovací přes tlačítko */
.build-toc-toggle{
  position:fixed; z-index:60; display:flex; align-items:center; gap:8px;
  top:auto; bottom:26px; right:78px;
  padding:9px 15px; border-radius:99px; cursor:pointer;
  background:rgba(21,26,35,.95); backdrop-filter:blur(10px);
  border:1px solid rgba(224,177,88,.42); color:var(--gold);
  font-size:13px; font-weight:700; letter-spacing:.2px;
  box-shadow:0 6px 20px rgba(0,0,0,.42); transition:.16s;
}
.build-toc-toggle:hover{background:rgba(224,177,88,.14); border-color:var(--gold);}
.build-toc-toggle svg{width:15px; height:15px; fill:currentColor;}
.build-toc-toggle .cnt{
  background:var(--gold); color:#0e1117; border-radius:99px;
  padding:1px 7px; font-size:11.5px; font-weight:800;
}

.build-toc{
  position:fixed; z-index:61;
  top:auto; bottom:80px; right:12px; left:12px; width:auto;
  max-height:58vh; overflow:auto;
  background:rgba(21,26,35,.98); backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 14px 40px rgba(0,0,0,.55); padding:8px;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .16s, transform .16s, visibility .16s;
}
.build-toc.open{opacity:1; visibility:visible; transform:translateY(0);}
.build-toc-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px 10px; border-bottom:1px solid var(--line); margin-bottom:6px;
}
.build-toc-head b{font-size:12px; text-transform:uppercase; letter-spacing:.7px; color:var(--dim);}
.build-toc-head button{
  background:none; border:0; color:var(--muted); cursor:pointer;
  font-size:17px; line-height:1; padding:2px 6px; border-radius:6px;
}
.build-toc-head button:hover{background:var(--panel); color:var(--text);}
.build-toc a{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:var(--radius-sm);
  color:var(--muted); font-size:13.5px; font-weight:600;
  text-decoration:none; transition:.13s;
}
.build-toc a:hover{background:var(--panel); color:var(--text); text-decoration:none;}
.build-toc a.active{background:rgba(224,177,88,.14); color:var(--gold);}
.build-toc a i{
  flex:0 0 22px; height:22px; display:grid; place-items:center;
  background:var(--panel-2); border-radius:6px;
  font-style:normal; font-size:11.5px; font-weight:800;
  color:var(--dim); font-variant-numeric:tabular-nums;
}
.build-toc a.active i{background:var(--gold); color:#0e1117;}

/* tlačítko nahoru */
.to-top{
  position:fixed; z-index:60; right:18px; bottom:26px;
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(21,26,35,.95); backdrop-filter:blur(10px);
  border:1px solid var(--line); color:var(--muted);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:.18s;
}
.to-top.show{opacity:1; visibility:visible; transform:translateY(0);}
.to-top:hover{border-color:var(--gold); color:var(--gold);}
.to-top svg{width:17px; height:17px; fill:currentColor;}

/* --- desktop: panel je stále otevřený a drží se vpravo ------------------ */
@media (min-width:1101px){
  .build-toc-toggle{display:none;}
  .build-toc{
    top:calc(var(--toc-top, 140px)); bottom:auto;
    right:max(16px, calc((100vw - var(--maxw)) / 2 - 250px));
    left:auto; width:236px; max-height:calc(100vh - 200px);
    opacity:1; visibility:visible; transform:none; z-index:40;
  }
  .build-toc-head button{display:none;}
  /* obsah buildu se zúží, aby panelu nepřekážel */
  .build-main{max-width:calc(var(--maxw) - 260px); margin-right:auto;}
}

/* --- tablet: zpět rozbalovací ------------------------------------------- */
@media (min-width:721px) and (max-width:1100px){
  .build-toc-toggle{top:calc(var(--toc-top, 140px)); bottom:auto; right:16px;}
  .build-toc{top:calc(var(--toc-top, 140px) + 52px); bottom:auto; right:16px; left:auto; width:280px; max-height:calc(100vh - 260px);}
  .to-top{bottom:26px; right:16px;}
}

/* --- mobil --------------------------------------------------------------- */
@media (max-width:720px){
  .build-toc-toggle{top:auto; bottom:26px; right:78px; font-size:12.5px; padding:8px 12px;}
  .build-toc{top:auto; bottom:80px; right:12px; left:12px; width:auto; max-height:58vh;}
  .to-top{bottom:26px; right:18px;}
}

/* --- archiv v sekci Novinky ---------------------------------------------- */
.news-archive-head{
  margin:38px 0 16px;font-size:16px;text-transform:uppercase;
  letter-spacing:.8px;color:var(--dim);font-weight:700;
  padding-left:11px;border-left:3px solid var(--line);
}

/* --- novinky: rozbalitelný detail ---------------------------------------- */
.news-expandable .news-detail{display:none;}

.news-toggle{
  display:inline-flex;align-items:center;gap:7px;
  margin:4px 0 0;padding:6px 12px;
  background:transparent;
  border:1px solid var(--line);border-radius:999px;
  cursor:pointer;color:var(--muted);
  font-family:inherit;font-size:12px;font-weight:600;
  letter-spacing:.2px;line-height:1;transition:.15s;
  -webkit-appearance:none;appearance:none;
}
.news-toggle:hover{color:var(--gold);border-color:rgba(224,177,88,.5);background:rgba(224,177,88,.07);}
.news-toggle:focus-visible{outline:2px solid var(--elyos);outline-offset:2px;}

.news-toggle .nt-more,
.news-toggle .nt-less{display:none;}
.news-toggle .nt-more{display:inline;}
.news-expandable.open .news-toggle .nt-more{display:none;}
.news-expandable.open .news-toggle .nt-less{display:inline;}

.news-toggle .nt-arrow{
  font-size:10px;line-height:1;color:currentColor;
  transition:transform .2s;
}
.news-expandable.open .news-toggle .nt-arrow{transform:rotate(180deg);}

.news-expandable.open{
  border-color:rgba(224,177,88,.38);
  background:linear-gradient(180deg,rgba(224,177,88,.05),transparent 120px);
}
.news-expandable.open .news-toggle{color:var(--gold);border-color:rgba(224,177,88,.5);}

.news-detail{
  margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line);
  animation:newsOpen .18s ease-out;
}
@keyframes newsOpen{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}

/* --- náhledová mapa v modalu lokace --------------------------------------- */
.map-preview{
  display:block;margin:14px 0 4px;border-radius:var(--radius-sm);
  overflow:hidden;border:1px solid var(--line);background:var(--panel-2);
  cursor:zoom-in;position:relative;
}
.map-preview img{display:block;width:100%;height:auto;}
.map-preview:hover{border-color:var(--gold);}
.map-preview .mp-cta{
  position:absolute;left:0;right:0;bottom:0;
  padding:8px 12px;font-size:12px;font-weight:700;color:var(--gold);
  background:linear-gradient(transparent,rgba(14,17,23,.92));
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.map-preview .mp-cta span:last-child{color:var(--muted);font-weight:600;}

/* lightbox přes celou obrazovku */
.map-light{
  position:fixed;inset:0;z-index:120;display:none;
  background:rgba(8,11,16,.94);backdrop-filter:blur(6px);
  padding:3vh 3vw;cursor:zoom-out;
}
.map-light.open{display:flex;align-items:center;justify-content:center;}
.map-light img{
  max-width:100%;max-height:94vh;border-radius:var(--radius);
  border:1px solid var(--line);box-shadow:0 24px 70px rgba(0,0,0,.7);
}
.map-light .ml-close{
  position:absolute;top:18px;right:22px;
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  background:rgba(21,26,35,.95);color:var(--text);cursor:pointer;font-size:19px;
  display:grid;place-items:center;
}
.map-light .ml-close:hover{border-color:var(--gold);color:var(--gold);}

/* --- novinky: skrytá část detailu ---------------------------------------- */
.news-expandable .news-detail-hidden{display:none;}
.news-expandable.open .news-detail-hidden{display:block;}
.news-expandable .news-detail-open{border-top:0;margin-top:10px;padding-top:0;}
.news-expandable.open .news-detail-open{border-top:1px solid var(--line);}

/* --- novinky: rozbalená karta se vymkne z gridu (ostatní drží řádek) ----- */
.grid.cols-2 > .news-expandable.open{
  grid-column:1 / -1;
}

/* ikony a screenshoty ze hry */
.acc .num.num-img{width:36px;height:36px;border-radius:0;background:none;}
.acc .num.num-img img{width:100%;height:100%;object-fit:contain;display:block;}
.ico-inline{width:26px;height:auto;vertical-align:middle;margin-right:8px;}
.shot{margin:14px 0;}
.shot img{display:block;max-width:100%;height:auto;border-radius:10px;border:1px solid var(--line);}
.shot.narrow img{max-width:380px;}
.shot figcaption{font-size:13px;color:var(--dim);margin-top:6px;max-width:78ch;}
.skill-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:12px 0 4px;}
.skill-grid > div{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;}
.skill-grid b{color:var(--gold);}

.acc .num.num-craft{width:46px;height:46px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--panel-2);}
.acc .num.num-craft img{width:100%;height:100%;object-fit:cover;display:block;}
.ico-craft{width:30px;height:30px;border-radius:7px;vertical-align:middle;margin-right:8px;border:1px solid var(--line);object-fit:cover;}

/* ikona + název vedle sebe (tabulky) */
.ico-label{display:flex;align-items:center;gap:10px;}
.ico-label > img{flex:0 0 auto;margin:0;}
.ico-label .ico-text{display:block;min-width:0;line-height:1.3;}
.ico-label .ico-text small{display:block;color:var(--dim);font-size:13px;font-weight:400;}
/* screenshot nesmí přetéct na úzkém displeji */
.shot.narrow img{max-width:min(380px,100%);}
.shot img{max-width:100%;height:auto;}

@media (max-width:720px){
  table.tbl-ico th,table.tbl-ico td{padding:9px 7px;}
  table.tbl-ico th{font-size:10px;letter-spacing:.3px;}
  table.tbl-ico td{font-size:13px;}
  table.tbl-ico .ico-label{gap:7px;}
  table.tbl-ico .ico-label > img{width:26px;height:26px;}
}

@media (max-width:720px){
  .acc .body table.tbl-ico{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
}

/* timery: na desktopu lišta v hlavičce, na mobilu tlačítko v menu */
nav.main a.nav-timery{display:none;}
@media (max-width:720px){
  nav.main a.nav-timery{display:inline-block;}
  header.site .timer-bar{display:none;}
}

/* anotované screenshoty */
.hot-wrap{position:relative;display:block;max-width:100%;}
.hot-wrap img{display:block;width:100%;height:auto;}
.hot{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:var(--gold);color:#0e1117;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #0e1117;pointer-events:none;}
.hot-legend{list-style:none;padding:0;margin:10px 0;display:grid;gap:8px;}
.hot-legend li{display:block;}
.hot-n{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--gold);color:#0e1117;font-weight:800;font-size:12px;display:inline-flex;align-items:center;justify-content:center;margin-right:10px;vertical-align:middle;}
.shot-row{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;}
.shot-row .shot{margin:8px 0;}
.shot-row .shot img{max-width:100%;height:auto;}
.shot-row .shot{flex:0 1 auto;max-width:100%;}
@media (max-width:720px){.hot{width:20px;height:20px;font-size:11px;}}

/* ==========================================================================
   OBSAH ROZBALENÝCH SEKCÍ (.acc-toc) — plovoucí lišta, vzhled shodný s buildy
   ========================================================================== */
.build-toc-toggle.acc-toc-btn{display:none;right:18px;bottom:26px;}
.build-toc-toggle.acc-toc-btn.acc-on{display:flex;}
.build-toc.acc-toc{
  top:auto;bottom:80px;right:16px;left:auto;width:min(320px,calc(100vw - 32px));
  max-height:min(60vh,520px);opacity:0;visibility:hidden;transform:translateY(8px);
}
.build-toc.acc-toc.open.acc-on{opacity:1;visibility:visible;transform:translateY(0);}
.acc-toc-actions{display:flex;align-items:center;gap:6px;}
.build-toc.acc-toc .acc-toc-collapse{
  font-size:11.5px;font-weight:700;color:var(--muted);padding:4px 8px;border:1px solid var(--line);
  border-radius:99px;background:none;cursor:pointer;line-height:1.2;
}
.build-toc.acc-toc .acc-toc-collapse:hover{color:var(--gold);border-color:var(--gold);}
.build-toc.acc-toc .acc-toc-close,.build-toc.acc-toc .acc-toc-collapse{display:inline-block;}
.build-toc.acc-toc a{line-height:1.3;}
.build-toc.acc-toc a i{align-self:flex-start;margin-top:1px;}
.build-main ~ .to-top, .to-top{z-index:60;}
/* široký desktop: stálý panel vpravo vedle obsahu */
@media (min-width:1700px){
  .build-toc-toggle.acc-toc-btn,.build-toc-toggle.acc-toc-btn.acc-on{display:none;}
  .build-toc.acc-toc{
    top:calc(var(--toc-top,140px));bottom:auto;left:auto;width:250px;
    right:max(16px,calc((100vw - var(--maxw)) / 2 - 270px));max-height:calc(100vh - 200px);
  }
  .build-toc.acc-toc .acc-toc-close{display:none;}
}

/* filtr novinek */
.news-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;}
.nf-chip{background:var(--panel);border:1px solid var(--line);color:var(--muted);border-radius:99px;padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer;transition:.13s;font-family:inherit;}
.nf-chip:hover{border-color:var(--gold);color:var(--text);}
.nf-chip.active{background:rgba(224,177,88,.16);border-color:var(--gold);color:var(--gold);}
article.news-card[hidden]{display:none;}

/* vyhledávání */
.nav-search{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;color:var(--muted);}
.nav-search:hover{color:var(--gold);background:var(--panel);}
.nav-search svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.search-box{display:flex;gap:10px;margin:8px 0 20px;}
.search-box input{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:var(--radius-sm);padding:12px 14px;font-size:16px;font-family:inherit;}
.search-box input:focus{outline:none;border-color:var(--gold);}
.sr-item{display:block;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);margin-bottom:10px;text-decoration:none;}
.sr-item:hover{border-color:var(--gold);text-decoration:none;}
.sr-item b{display:block;color:var(--text);font-size:15px;margin-bottom:3px;}
.sr-item small{display:block;color:var(--dim);font-size:12px;letter-spacing:.4px;text-transform:uppercase;margin-bottom:5px;}
.sr-item span{color:var(--muted);font-size:14px;line-height:1.5;}
.sr-item mark{background:rgba(224,177,88,.28);color:var(--text);border-radius:3px;padding:0 2px;}

/* ---- herní emblémy classů ---- */
.cls-emblem{display:inline-block;flex:none;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}
h1.with-emblem .cls-emblem{vertical-align:middle;margin:-6px 12px 0 0}
.emb-md{width:44px;height:44px}
.emb-xl{width:72px;height:72px}
.emb-sm{width:20px;height:20px;vertical-align:-5px;margin-right:6px}
.ico-label .cls-emblem{width:28px;height:28px}
.class-card-thumb .emb-corner{position:absolute;top:10px;left:10px;bottom:auto;width:56px;height:56px;transform:none;z-index:2;transition:transform .2s}
a.class-card:hover .emb-corner{transform:scale(1.1)}
@media (max-width:640px){.emb-xl{width:52px;height:52px}.emb-md{width:36px;height:36px}}
.detail-head{align-items:center}
.detail-head h1.with-emblem{order:-1}
.detail-head h1.with-emblem{display:flex;align-items:center;gap:14px}
.detail-head h1.with-emblem .cls-emblem{margin:0}

.tab-ico{width:20px;height:20px;vertical-align:-5px;margin-right:7px;border-radius:5px;object-fit:cover}

table.data th.pct,table.data td.pct{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;width:1%;padding-left:22px}
table.data td.pct b{color:var(--gold)}

/* Buildy: karta jako u Classy */
.class-card-thumb .tag{position:absolute;top:10px;right:10px;z-index:2;backdrop-filter:blur(4px)}
.build-card .build-cls{display:block;color:var(--dim);font-size:13px;margin:-2px 0 10px}
.build-card h3{margin:10px 0 4px}

.board-figure{max-width:660px}
.board-figure figcaption{font-size:14px;line-height:1.55}
.board-legend{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;color:var(--muted)}
.board-legend li{display:flex;gap:10px;align-items:baseline}
.board-legend b{color:var(--text)}
.bd{flex:none;width:12px;height:12px;border-radius:3px;border:1px solid rgba(255,255,255,.18);transform:translateY(1px)}
.bd-grey{background:#4a4f5c}.bd-green{background:#2f9e5b}.bd-blue{background:#3b7bd8}.bd-orange{background:#e0773a}
.build-card .role{align-self:flex-start}

/* Enhancement: posuvné menu sekcí */
.subnav{position:sticky;top:110px;z-index:20;display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 26px;padding:10px 12px;background:rgba(17,20,28,.92);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:12px}
.subnav a{padding:6px 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted);border:1px solid transparent;transition:.15s}
.subnav a:hover{color:var(--text);background:var(--panel-2)}
.subnav a.on{color:var(--gold);background:rgba(224,177,88,.12);border-color:rgba(224,177,88,.35)}
.eh-sec{scroll-margin-top:190px;padding-top:6px;margin-bottom:46px}
.eh-h{font-size:20px;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.eh-h small{font-size:12.5px;font-weight:500;color:var(--dim)}
@media (max-width:640px){.subnav{top:0;position:static}.eh-sec{scroll-margin-top:20px}}
/* deska: menší obrázek, legenda vedle něj */
.board-figure{max-width:none;display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);align-items:stretch}
.board-figure img{width:100%;height:100%;object-fit:cover}
.board-figure figcaption{border-top:0;border-left:1px solid var(--line);padding:18px 20px;align-self:center}
@media (max-width:820px){
  .board-figure{grid-template-columns:1fr}
  .board-figure img{max-width:340px;margin:0 auto;height:auto}
  .board-figure figcaption{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:820px){.board-figure img{height:auto;aspect-ratio:962/954;object-fit:contain;width:100%}}


/* ==========================================================================
   Armory + databáze itemů
   ========================================================================== */
.grade-Common{color:var(--text);}
.grade-Rare{color:#6ee7b7;}
.grade-Legend{color:var(--elyos);}
.grade-Unique{color:var(--gold);}
.grade-Epic{color:#ff9f5a;}
.elyos{color:var(--elyos);}
.asmo{color:var(--asmo);}

select{
  width:100%;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--text);
  padding:11px 14px;
  font-size:15px;
  font-family:inherit;
}
select:focus{outline:none;border-color:var(--elyos);}

.a2-form{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;}
.a2-form label{flex:1 1 170px;min-width:0;}
.a2-form label span{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--muted);}
.a2-form .a2-grow{flex:3 1 260px;}
.a2-form input,.a2-form select{height:46px;}
.a2-submit{min-height:46px;padding-inline:24px;}
#subRow{margin-bottom:18px;}
#itemFilters .row:has(+ .a2-form){margin-bottom:18px;}

.a2-status{color:var(--muted);padding:18px 0;}
.a2-status--error{color:var(--danger);}
.a2-note{color:var(--dim);font-size:13.5px;margin-top:36px;}
.a2-more{text-align:center;margin-top:22px;}
.a2-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px;flex-wrap:wrap;}

.a2-icon{display:block;flex:none;border-radius:var(--radius-sm);background:var(--bg-soft);object-fit:contain;}
.a2-icon--empty{display:block;border:1px solid var(--line);}
.a2-portrait{display:block;flex:none;border-radius:50%;background:var(--bg-soft);object-fit:cover;}
.a2-portrait--empty{display:block;border:1px solid var(--line);}

.a2-char-grid,.a2-item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-top:14px;}
a.a2-char,a.a2-item{display:flex;align-items:center;gap:14px;padding:13px 15px;min-width:0;}
.a2-char-text,.a2-item-text{display:flex;flex-direction:column;min-width:0;line-height:1.4;}
.a2-char-text small,.a2-item-text small{display:flex;align-items:center;gap:5px;flex-wrap:wrap;color:var(--muted);font-size:13px;}
.a2-char-text .cls-emblem{width:20px;height:20px;}
.a2-item-text .a2-options{display:block;color:var(--dim);font-size:12.5px;}
.a2-item-grid[aria-busy="true"]{opacity:.55;}

.a2-profile{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--panel),var(--bg-soft));
  border:1px solid var(--line);border-radius:var(--radius);padding:24px;
  margin-bottom:36px;
}
.a2-profile-main{flex:1 1 260px;min-width:0;}
.a2-profile h1{margin:0;font-size:31px;line-height:1.2;overflow-wrap:anywhere;}
.a2-profile p{margin:4px 0 0;color:var(--muted);}
.a2-profile .cls-emblem{display:inline-block;vertical-align:-7px;margin-right:6px;}
.a2-profile p.a2-title{margin:0 0 3px;font-size:13.5px;font-weight:600;}
.a2-power{display:flex;gap:12px;flex-wrap:wrap;}
.a2-power .stat{min-width:132px;}

.a2-gear{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px;}
.a2-gear--extra{margin-top:10px;}
.a2-gear-item{
  display:flex;align-items:center;gap:12px;width:100%;min-width:0;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
  color:inherit;font:inherit;padding:10px 12px;
}
button.a2-gear-item{cursor:pointer;transition:.15s;}
button.a2-gear-item:hover,button.a2-gear-item:focus-visible{border-color:var(--elyos);}
.a2-gear-item span{display:flex;flex-direction:column;min-width:0;line-height:1.35;}
.a2-gear-item small{color:var(--muted);font-size:12.5px;}

.a2-stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;}
.a2-effect{display:block;color:var(--muted);font-size:12.5px;line-height:1.4;}
.a2-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.a2-list li{display:flex;align-items:center;gap:10px;}
.a2-list small{color:var(--muted);}
.a2-list--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));}
.a2-boards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}
.a2-board > div:first-child{display:flex;justify-content:space-between;gap:10px;font-size:14px;}
.a2-board span{color:var(--muted);}
.a2-bar{height:7px;border-radius:4px;background:var(--bg-soft);overflow:hidden;margin-top:5px;}
.a2-bar i{display:block;height:100%;background:var(--gold);}

.a2-dialog{
  width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 48px);
  background:var(--panel);color:var(--text);
  border:1px solid var(--line);border-radius:var(--radius);padding:0;box-shadow:var(--shadow);
}
.a2-dialog::backdrop{background:rgba(7,10,15,.72);}
.a2-dialog-body{padding:24px;}
.a2-dialog h3{margin:20px 0 8px;font-size:15px;color:var(--gold);}
.a2-dialog h3 small{color:var(--muted);font-weight:400;}
.a2-dialog .specs{margin:14px 0 0;}
.a2-close{
  position:sticky;top:10px;float:right;margin:10px 10px 0 0;z-index:1;
  width:36px;height:36px;border-radius:50%;
  background:var(--bg-soft);border:1px solid var(--line);color:var(--text);
  font-size:21px;line-height:1;cursor:pointer;
}
.a2-close:hover{border-color:var(--elyos);}
.a2-item-head{display:flex;align-items:center;gap:14px;padding-right:34px;}
.a2-item-head h2{margin:0;font-size:21px;line-height:1.25;border:0;padding:0;}
.a2-item-head h2::after,.a2-item-head h2::before{display:none;}
.a2-item-head p{margin:2px 0 0;color:var(--muted);font-size:14px;}
.a2-stats{margin:0;}
.a2-stats th{font-weight:500;}
.a2-bonus{color:#6ee7b7;}
.a2-gear-note{color:var(--muted);font-size:14px;}
.a2-popular{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px;margin:12px 0 18px;}
.a2-popular-slot{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;min-width:0;}
.a2-popular-slot h5{margin:0 0 6px;font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);}
a.a2-popular-item{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:14px;font-weight:600;line-height:1.3;min-width:0;}
a.a2-popular-item:hover{text-decoration:none;filter:brightness(1.15);}
.a2-popular-item span{flex:1;min-width:0;overflow-wrap:anywhere;}
.a2-popular-item small{flex:none;text-align:right;color:var(--muted);font-size:12px;font-weight:500;}
.a2-skill{display:inline-flex;align-items:center;gap:7px;vertical-align:middle;font-weight:600;color:var(--text);}
.a2-skill .a2-icon{border-radius:6px;box-shadow:0 0 0 1px var(--line);}
.a2-tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:700;background:var(--panel-2);color:var(--muted);}
.a2-tag--core{background:rgba(224,177,88,.16);color:var(--gold);}
.a2-tag--filler{background:rgba(79,179,255,.14);color:var(--elyos);}
.a2-tag--support{background:rgba(110,231,183,.13);color:#6ee7b7;}
.a2-tag--skip{background:rgba(255,107,107,.13);color:var(--danger);}
.a2-item-link{display:inline-flex;align-items:center;gap:7px;vertical-align:middle;font-weight:600;}

@media (max-width:720px){
  .a2-char-grid,.a2-item-grid,.a2-gear{grid-template-columns:1fr;}
  .a2-profile{padding:18px;gap:16px;}
  .a2-power,.a2-power .stat{flex:1 1 130px;}
  .a2-submit{width:100%;}
}