:root{
  --bg-1:#0c1016; --bg-2:#121722;
  --text:#e9ecf1; --muted:#b6bcc6;
  --gold:#d8bf7a; --gold-2:#a78e52;
  --line:rgba(255,255,255,.12);
  --nav-h:56px; --brand-w:150px;
  --compose-h:30px; /* DM textarea-hoz kell */
  --ys-gold:#d8bf7a;
  --ys-gold-strong:#e6cb77;
  --ys-gold-soft:#f6ebbe;
  --ys-line:rgba(255,255,255,.12);
  --ys-modal-bg:#121722;
}
@media (max-width:991.98px){ :root{ --nav-h:56px; --brand-w:140px; } }

html, body{height:100%;margin:0}
body{background:linear-gradient(180deg,var(--bg-1),var(--bg-2)); color:var(--text)}
.text-muted{color:var(--muted)!important}

/* ============ NAVBAR ============ */
.navbar.navbar-dark{
  min-height:var(--nav-h);
  background:#0e131b;
  border-bottom:1px solid var(--line);
}
.navbar .nav-link{color:var(--muted)}
.navbar .nav-link:hover,.navbar .nav-link.active{color:var(--text)}
.navbar .container{display:flex;align-items:center}
.navbar-brand{
  flex:0 0 auto;width:var(--brand-w);height:var(--nav-h);
  display:flex;align-items:center;padding:0;margin:0;overflow:hidden;
}
.brand-box{width:100%;height:100%;display:flex;align-items:center}
.brand-logo{
  max-height:calc(var(--nav-h) + 24px);max-width:100%;
  object-fit:contain;display:block;margin-top:6px;
}

/* ===== HERO SLIDER ===== */
.hero-slider{position:relative; border-bottom:1px solid var(--line)}
.hero-slider .carousel-item{height:clamp(320px,70vh,560px)}
.hero-slider .carousel-item>img{width:100%; height:100%; object-fit:cover; filter:contrast(1.05) brightness(.9)}
.hero-video{width:100%; height:100%; object-fit:cover; display:block}
.slider-bar{
  position:absolute; inset:0 0 auto 0; height:64px; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px;
}
.slider-logo{display:flex; align-items:center; gap:10px; color:var(--text); font-weight:800; letter-spacing:.3px; margin:440px 0 0;}
.slider-logo img{height:400px; width:auto; image-rendering:crisp-edges}

/* ===== Szekciók, kártyák, gombok ===== */
.section{padding-block: clamp(28px,6vw,56px)}
.card{background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--text)}
.brand-accent{color:var(--gold)}
.btn-gold{
  background:linear-gradient(180deg,var(--gold),var(--gold-2));
  color:#151515;font-weight:700;border:0
}
.btn-outline-light{border-color:#d0d6df;color:#d0d6df}
.btn-outline-light:hover{background:#d0d6df;color:#111}

/* ============ FEJLÉC JOBB OLDAL: COIN & FRIENDS ======== */
.btn-coin,.btn-friends{
  background:rgba(255,255,255,.06); border:1px solid var(--line);
  color:#fff; border-radius:10px; font-weight:800;
  box-shadow:0 6px 16px rgba(0,0,0,.25); backdrop-filter: blur(6px);
  display:inline-flex; align-items:center; gap:.45rem;
}
.btn-coin{padding:.15rem .65rem;line-height:1}
.btn-friends{padding:.35rem .65rem;line-height:1}
.btn-coin:hover,.btn-friends:hover{background:rgba(255,255,255,.12)}
.coin-img{width:30px;height:30px;object-fit:contain;display:block;image-rendering:crisp-edges;filter:drop-shadow(0 0 4px rgba(216,191,122,.35))}
.coin-balance{font-variant-numeric:tabular-nums;min-width:3ch;text-align:right}
.friend-ico{font-size:1.1rem;line-height:1}
.online-pill{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.18rem .45rem;border-radius:999px;
  background:rgba(45,227,143,.15);border:1px solid rgba(45,227,143,.35);
  color:#c9ffd8;font-weight:800;font-size:.85rem;
}
.online-pill .dot{width:8px;height:8px;border-radius:50%;background:#2de38f;box-shadow:0 0 8px rgba(45,227,143,.75)}
@media (max-width:420px){ .coin-balance,.online-pill .online-num{display:none} }

/* Avatar + státusz dot */
.btn-avatar{
  position:relative;width:40px;height:40px;padding:0;border-radius:50%;
  border:1px solid var(--line);background:transparent;display:grid;place-items:center;
}
.btn-avatar:hover{border-color:#c9b37a}
.avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.avatar-ico{font-size:1.4rem;color:var(--text);line-height:1}
.status-dot{
  position:absolute;right:0;bottom:2px;width:12px;height:12px;border-radius:50%;
  border:2px solid #0e131b;box-shadow:0 0 8px rgba(0,0,0,.25);
}
.status-dot.is-online{background:#2de38f;animation: ping 1.6s ease-out infinite}
.status-dot.is-offline{background:#8b96a6}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(45,227,143,.6)}70%,100%{box-shadow:0 0 0 8px rgba(45,227,143,0)}}

/* ===== Modern modálok + social gombok ===== */
.modal-modern .modal-content{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line); border-radius:20px; color:var(--text);
  box-shadow:0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:saturate(1.1) blur(8px);
}
.modal-modern .modal-header{ border-bottom:1px solid var(--line) }
.modal-modern .modal-footer{ border-top:1px solid var(--line) }
.form-floating>.form-control{
  background-color: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  color: var(--text);
}

.form-floating>.form-control.is-invalid{
  border-color: var(--bs-form-invalid-border-color) !important;
  /* nem kötelező, de biztosítja az ikont, ha valahol mégis lenullázódna: */
}
.form-floating>.form-control:focus{ border-color:#c9b37a; box-shadow:0 0 0 .25rem rgba(216,191,122,.25) }
.divider{ display:flex; align-items:center; gap:.75rem; color:#aab2bd; font-size:.9rem; margin:.25rem 0 1rem; }
.divider::before,.divider::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--line), transparent); }
.btn-social{ display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; border-radius:10px; border:1px solid var(--line); font-weight:700; }
.btn-google{ background:#ffffff; color:#111; border-color:#e2e2e2 }
.btn-facebook{ background:#1877F2; color:#fff }
.btn-discord{ background:#5865F2; color:#fff }
.btn-github{ background:#24292e; color:#fff }
.legal{ color:#9da5b1; font-size:.85rem }

/* ============ FRIENDS PANEL (DRAWER + DM) ============ */
.friends-panel{position:fixed;inset:0;z-index:1060;display:none}
.friends-panel.open{display:block}
.fp-overlay{position:absolute;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(2px);opacity:0;transition:opacity .18s ease}
.friends-panel.open .fp-overlay{opacity:1}
.fp-drawer{
  position:absolute;top:0;right:0;height:100dvh;width:min(420px,92vw);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border-left:1px solid var(--line);box-shadow:-20px 0 60px rgba(0,0,0,.45);
  backdrop-filter:blur(10px) saturate(1.1);
  transform:translateX(100%);transition:transform .22s ease;
  display:grid;grid-template-rows:auto auto auto 1fr;
}
.friends-panel.open .fp-drawer{transform:translateX(0)}
.fp-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line)}

.fp-topbar{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:10px 12px;border-bottom:1px dashed var(--line)}
.fp-icos{display:flex;gap:8px;align-items:center}
.fp-ico{
  width:36px;height:36px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:10px;
  background:rgba(255,255,255,.05);color:#fff;position:relative;
}
.fp-ico:hover,.fp-ico.active{background:rgba(255,255,255,.12)}
.fp-ico[data-badge]:not([data-badge=""])::after{
  content:attr(data-badge);
  position:absolute;top:-6px;right:-6px;
  background:#dc3545;color:#fff;border-radius:999px;
  font-size:.72rem;line-height:1;padding:0 .35rem;border:1px solid var(--line);font-weight:800;
}
.fp-search{padding:10px 12px;border-bottom:1px solid var(--line)}
.fp-search .form-control{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.18);color:#fff}
.form-control:focus{box-shadow:0 0 0 .05rem rgba(216,191,122,.25);border-color:#c9b37a;outline:0}

/* Lista */
.fp-list{
  display:grid;grid-template-columns:1fr;grid-auto-rows:80px;
  gap:10px;padding:10px 12px;overflow:auto;
  scrollbar-width:thin;scrollbar-color:rgba(180,190,200,.35) transparent;
  overscroll-behavior:contain;scrollbar-gutter:stable both-edges;
}
.fp-list::-webkit-scrollbar{width:8px}
.fp-list::-webkit-scrollbar-thumb{
  background-color:rgba(180,190,200,.35);border-radius:999px;border:2px solid transparent;background-clip:padding-box;transition:background-color .15s ease,opacity .15s ease;
}
.fp-list:hover::-webkit-scrollbar-thumb{background-color:rgba(180,190,200,.55)}

.fp-item{
  height:100%;width:100%;box-sizing:border-box;display:grid;
  grid-template-columns:48px 1fr auto;align-items:center;gap:10px;padding:10px;
  border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);
}
.fp-item .n,.fp-item .st{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-item .st.play{font-size:.7rem}
.fp-item .st.text{font-size:.8rem}
.fp-item > div:nth-child(2){min-width:0}
.fp-actions{display:flex;gap:8px;align-items:center}
.fp-dot{width:10px;height:10px;border-radius:50%;background:#8b96a6}
.fp-dot.online{background:#2de38f;box-shadow:0 0 8px rgba(45,227,143,.7)}
.fp-empty{opacity:.75;text-align:center;padding:24px 8px}

/* Avatar + státusz pötty a kártyákban */
.fp-item .av-wrap{position:relative;width:40px;height:40px;justify-self:center}
.fp-item .av-wrap .av,.fp-item .av-wrap .av-fallback{
  width:100%;height:100%;border-radius:50%;object-fit:cover;border:1px solid var(--line);display:block;
}
.fp-item .av-dot{
  position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;
  background:#8b96a6;border:2px solid #0e131b;
}
.fp-item .av-dot.online{background:#2de38f;box-shadow:0 0 8px rgba(45,227,143,.7)}

/* Új sor kiemelés */
.fp-item.flash{position:relative;animation:flashPop .22s ease-out, flashGlow 1.2s ease-out;outline:2px solid rgba(216,191,122,.65);border-radius:12px}
@keyframes flashPop{0%{transform:scale(.98)}100%{transform:scale(1)}}
@keyframes flashGlow{0%{box-shadow:0 0 0 0 rgba(216,191,122,.85)}100%{box-shadow:0 0 0 14px rgba(216,191,122,0)}}
.fp-item.has-unread .n,.fp-item.has-unread .st{font-weight:800}

/* Fej-sor (nyitott beszélgetések) */
.fp-heads{
  display:flex;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);
  overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(180,190,200,.35) transparent;
}
.fp-heads::-webkit-scrollbar{height:8px}
.fp-heads::-webkit-scrollbar-thumb{
  background-color:rgba(180,190,200,.35);border-radius:999px;border:2px solid transparent;background-clip:padding-box;
}
.fp-head{
  position:relative;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);cursor:pointer;background:rgba(255,255,255,.06);
  box-shadow:0 6px 16px rgba(0,0,0,.25);overflow:visible;flex:0 0 auto;
}
.fp-head img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.fp-head .dot{position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;background:#8b96a6;border:2px solid #0e131b}
.fp-head.online .dot{background:#2de38f;box-shadow:0 0 8px rgba(45,227,143,.7)}
.fp-head .badge{position:absolute;top:-5px;right:-5px;background:#dc3545;color:#fff;border-radius:999px;font-weight:800;font-size:.72rem;padding:0 .4rem}
.fp-head .x{
  position:absolute;left:-6px;top:-6px;width:18px;height:18px;border-radius:50%;
  border:1px solid var(--line);display:grid;place-items:center;background:rgba(0,0,0,.45);color:#cfd6df;font-size:.7rem;
}
.fp-head.active{outline:2px solid rgba(216,191,122,.65)}

/* Panel törzs + beépített DM chat */
.fp-body{display:grid;gap:12px;padding:10px 12px;height:calc(100dvh - 210px);grid-template-columns:1fr}
@media (max-width:980px){ .fp-chat{order:-1} }
.fp-body:not(.has-active-chat) #fpChat{display:none!important}
.fp-body.has-active-chat #fpList{display:none!important}

/* DM Chat doboz */
.fp-chat{
  display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:12px;background:rgba(255,255,255,.04);min-height:280px;overflow:hidden;
}
.fp-chat[hidden]{display:none}
.fpc-head{display:flex;align-items:center;gap:10px;padding:10px;border-bottom:1px solid var(--line)}
.fpc-name{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fpc-dot{width:10px;height:10px;border-radius:50%;background:#8b96a6}
.fpc-dot.online{background:#2de38f;box-shadow:0 0 8px rgba(45,227,143,.7)}
.fp-chat-scroll{
  flex:1 1 auto;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:6px;
  scrollbar-width:thin;scrollbar-color:rgba(180,190,200,.35) transparent;
}
.fp-chat-scroll::-webkit-scrollbar{width:8px}
.fp-chat-scroll::-webkit-scrollbar-thumb{
  background-color:rgba(180,190,200,.35);border-radius:999px;border:2px solid transparent;background-clip:padding-box;
}
.fp-chat-scroll:hover::-webkit-scrollbar-thumb{background-color:rgba(180,190,200,.55)}
.fpc-msg{
  max-width:86%;padding:.42rem .55rem;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.06);line-height:1.15;
}
.fpc-msg.me{
  align-self:flex-end;background:linear-gradient(180deg,var(--gold),var(--gold-2));
  color:#151515;border-color:rgba(255,255,255,.25);
}
.fpc-msg .meta{font-size:.78rem;opacity:.8;display:flex;gap:6px;margin-bottom:2px;align-items:center}
.fpc-msg .ts{font-variant-numeric:tabular-nums;opacity:.7}
.fp-chat-typing{font-size:.8rem;opacity:.7;padding:0 10px 6px;background:none}
.fp-chat-compose{display:flex;gap:8px;padding:8px;border-top:1px solid var(--line)}
.fp-chat-compose input,.fp-chat-compose textarea{
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.18);color:#fff
}
.fp-chat-compose textarea#fpChatInput{
  flex:1 1 auto;min-width:0;min-height:var(--compose-h);height:auto;max-height:160px;overflow:auto;resize:none;line-height:1.25;padding:.45rem 0;
}
/* --- CTA: "Játsz most" --- */
.btn-cta{--g1:#d8bf7a; --g2:#a78e52; --txt:#151515;position:relative; overflow:hidden; border:0;padding:1.7rem 1.8rem;font-weight:800; letter-spacing:.3px; color:var(--txt);background:linear-gradient(180deg,var(--g1),var(--g2));box-shadow:0 10px 24px rgba(216,191,122,.25), 0 0 0 1px rgba(167,142,82,.35) inset;transform:translateZ(0);will-change:transform, box-shadow;transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;animation:cta-breathe 2.4s ease-in-out infinite;text-align:center;float: right;}
.btn-cta .cta-label{line-height:1.05; display:inline-block}
.btn-cta .cta-sub{display:block; font-size:.85rem; line-height:1; opacity:.8; margin-top:.15rem}
.btn-cta:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 14px 34px rgba(216,191,122,.35), 0 0 0 1px rgba(255,255,255,.3) inset; }
.btn-cta:active{ transform:translateY(0) scale(.98); }@keyframes cta-breathe{ 0%,100%{ filter:saturate(1);} 50%{ filter:saturate(1.12);} }
.btn-cta::before{content:""; position:absolute; inset:-40% -60%;background:linear-gradient(60deg, transparent 38%, rgba(255,255,255,.85) 40%, rgba(255,255,255,.4) 42%, transparent 46%);transform:translateX(-60%) rotate(10deg);animation:cta-glint 2.8s cubic-bezier(.2,.6,.2,1) infinite;}
@keyframes cta-glint{0%{ transform:translateX(-60%) rotate(10deg); opacity:0; }8%{ opacity:1; }40%{ transform:translateX(60%) rotate(10deg); opacity:0; }
100%{ transform:translateX(60%) rotate(10deg); opacity:0; }}
.btn-cta .aura{position:absolute; inset:-45%; border-radius:50%;background:radial-gradient(closest-side, rgba(255,255,255,.18), transparent 60%),conic-gradient(from 0deg, rgba(216,191,122,.25), transparent 40%, rgba(216,191,122,.25) 60%, transparent 100%);filter:blur(6px);animation:aura-spin 8s linear infinite;pointer-events:none;}
@keyframes aura-spin{ to{ transform:rotate(360deg); } }
.btn-cta .spark{position:absolute; width:6px; height:6px; border-radius:50%;background: radial-gradient(circle at 30% 30%, #fff, #ffe6a6 60%, transparent 70%);filter:drop-shadow(0 0 6px rgba(255,225,150,.9));opacity:0; pointer-events:none;animation:spark var(--dur,2.2s) linear infinite var(--delay,0s);}
@keyframes spark{0%{ transform:translate(0,0) scale(.9) rotate(0); opacity:0; }10%{ opacity:1; }100%{ transform:translate(var(--tx,40px), var(--ty,-60px)) scale(.2) rotate(180deg); opacity:0; }}
@media (prefers-reduced-motion: reduce){.btn-cta, .btn-cta::before, .btn-cta .aura, .btn-cta .spark{ animation:none!important; }}
.slider-cta {margin-top: 700px;}
/* Keep slider-bar centered on wide screens and prevent children reaching page edges */
.slider-desc {max-width: 450px;}
.slider-bar {
  /* center the absolutely positioned bar and limit width */
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1200px; /* adjust as needed */
  box-sizing: border-box;
  padding: 0 24px; /* give some inner breathing space */
}
@media (max-width: 1200px) {
  /* on smaller screens keep full-bleed behaviour */
  .slider-bar { left: 0; right: 0; transform: none; max-width: none; padding: 0 16px; }
}
/* Monogramos fallback avatarok */
.av-fallback{display:grid;place-items:center;border-radius:50%;font-weight:800;text-transform:uppercase;color:#fff;border:1px solid var(--line);user-select:none;overflow:hidden}
.av-20{width:20px;height:20px;font-size:.70rem}
.av-32{width:32px;height:32px;font-size:.95rem}
.av-40{width:40px;height:40px;font-size:1.05rem}
.fp-heads .fp-head .av-fallback{width:100%;height:100%;font-size:1rem}

/* Navbar friends gomb badge */
.btn-friends[data-badge]:not([data-badge=""])::after{
  content:attr(data-badge);
  position:absolute;top:-6px;right:-6px;
  background:#dc3545;color:#fff;border-radius:999px;font-weight:800;font-size:.72rem;
  line-height:1;padding:0 .35rem;border:1px solid var(--line);
}

/* Emoji minipanel */
.em-pop{
  position:absolute;z-index:2100;background:rgba(0,0,0,.55);
  border:1px solid var(--line);border-radius:12px;backdrop-filter:blur(8px);
  box-shadow:0 10px 28px rgba(0,0,0,.45);overflow:hidden;
}
.em-btn{
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:#fff;border-radius:10px;
  width:var(--compose-h);height:var(--compose-h);display:grid;place-items:center;font-size:1rem;padding:0;
}
.em-btn:hover{background:rgba(255,255,255,.12)}

/* ===== Galéria ===== */
.gallery-card{
  position:relative; overflow:hidden; border:1px solid rgba(216,191,122,.35);
  border-radius:16px; background:rgba(255,255,255,.03); box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .18s ease, box-shadow .18s ease;
}
.gallery-card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.28); }
.gallery-thumb{ aspect-ratio:16/9; width:100%; background-size:cover; background-position:center; filter:contrast(1.06) saturate(1.02); }
.gallery-meta{ position:absolute; inset:auto 0 0 0; padding:12px 14px; background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.55)); }
.gallery-title{ font-weight:700; letter-spacing:.2px }
.gallery-sub{ color:#bfc5cf; font-size:.9rem }

/* ===== Fülsor – széltől szélig, rés nélkül, 50/50 ===== */
#winModal .tabs-square,#authModal .tabs-square{display:flex;width:100%;margin:0;padding:0;border-bottom:1px solid var(--ys-line);list-style:none;gap:0;}
#winModal .tabs-square .nav-item,
#authModal .tabs-square .nav-item{flex:1 1 0;margin:0; padding:0;}
#winModal .tabs-square .nav-link,
#authModal .tabs-square .nav-link{display:block;width:100%;text-align:center;margin:0;border:1px solid transparent;border-bottom:none;border-radius:.375rem .375rem 0 0;  background:transparent;color:#cfd5df;padding:.65rem 1rem;transition:background .2s, color .2s, box-shadow .2s, border-color .2s;}
#winModal .tabs-square .nav-link:hover,
#authModal .tabs-square .nav-link:hover{ color:#fff; }
#winModal .tabs-square .nav-link:focus-visible,
#authModal .tabs-square .nav-link:focus-visible{outline:2px solid var(--ys-gold-strong);outline-offset:-2px;}
/* A két fül találkozásánál ne legyen dupla szegély */
#winModal .tabs-square .nav-item + .nav-item .nav-link,
#authModal .tabs-square .nav-item + .nav-item .nav-link{border-left:1px solid var(--ys-line);}
/* Aktív: LOGIN – sötét fül */
#winModal .tabs-square .nav-link#login-tab.active,
#authModal .tabs-square .nav-link#login-tab.active{color:#fff;background:#182131;border-color:#2a3347 #2a3347 #182131 #2a3347; /* alul „eltűnik” */box-shadow:0 6px 18px rgba(0,0,0,.25);}
/* Aktív: REG – sárga fül */
#winModal .tabs-square .nav-link#login-tab.active,
#authModal .tabs-square .nav-link#login-tab.active,
#winModal .tabs-square .nav-link#register-tab.active,
#authModal .tabs-square .nav-link#register-tab.active{color:#111;background: var(--ys-gold);border-color:var(--ys-gold-strong) var(--ys-gold-strong) var(--ys-gold-soft) var(--ys-gold-strong);box-shadow:0 6px 18px rgba(0,0,0,.25), inset 0 -1px 0 var(--ys-gold-soft);}
/* ===== Panelek a fülek alatt ===== */
#winModal .auth-pane, #authModal .auth-pane{padding:1rem;border-top:none;border-radius:0 0 .5rem .5rem;}
/* Login panel – sötét */
#winModal .login-pane, #authModal .login-pane{color:#e9ecf1;background:transparent;border:1px solid rgba(255,255,255,.08);}
/* Divider + CTA (meghagyva, mert használod) */
#winModal .divider, #authModal .divider{display:flex; align-items:center; gap:.75rem;color:#b6bcc6; margin:.9rem 0;}
#winModal .divider::before, #winModal .divider::after,
#authModal .divider::before, #authModal .divider::after{content:""; height:1px; flex:1; background:var(--ys-line);}
#winModal .btn-gold, #authModal .btn-gold{background:var(--ys-gold); color:#111; border:0;}
#winModal .btn-gold:hover, #authModal .btn-gold:hover{ filter:brightness(1.05); }

/* Mobil finomítás */
@media (max-width:575.98px){
  #winModal .tabs-square .nav-link,
  #authModal .tabs-square .nav-link{ padding:.55rem .65rem; }
}
/* Auth modal - kompakt floating inputok */
.auth-modal .form-floating,.auth-modal .form-floating > .form-control {--yiro-h: 2.6rem;               }

.auth-modal .form-floating > .form-control {height: calc(var(--yiro-h) + var(--bs-border-width) * 2);min-height: calc(var(--yiro-h) + var(--bs-border-width) * 2);padding-top: .6rem;               /* hely a lebegő labelnek */padding-bottom: .2rem;line-height: 1.2;}
.auth-modal .form-floating > label {padding: .35rem .75rem;}
/* Kereső */
.navbar .navbar-search .form-control::placeholder { color: rgba(255,255,255,.6); }
.navbar .navbar-search .form-control:focus {border-color:#c9b37a;box-shadow: 0 0 0 .2rem rgba(201,179,122,.25);}
.navbar .navbar-search .btn { line-height: 1; }
/* ===== Profi lábléc ===== */
.site-footer{background:#0e131b; border-top:1px solid var(--line)}
.footer-logo{height:188px; width:auto; image-rendering:crisp-edges; transform: scale(1.40); transform-origin:left center;}
.logo-strip img{height:28px; width:auto; filter:grayscale(1) opacity(.7); transition:filter .2s ease, transform .2s ease}
.logo-strip img:hover{filter:none; transform:translateY(-2px)}
.footer-link{color:var(--muted); text-decoration:none}
.footer-link:hover{color:var(--text); text-decoration:underline}
.footer-heading{font-weight:800; letter-spacing:.2px; color:var(--text)}





    :root{ --bg-1:#0c1016; --bg-2:#121722; --text:#e9ecf1; --muted:#b6bcc6; --line:rgba(255,255,255,.12) }
    body{background:linear-gradient(180deg,var(--bg-1),var(--bg-2)); color:var(--text)}
	
/* Header háttér + overlay */
.forum-hero{
  position: relative;
  border-bottom: 1px solid var(--line);
  background: #0e131b url('/assets/yirosoft/img/forum/header.png?v=1') center/cover no-repeat;
}
.forum-hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(60% 60% at 50% 30%, rgba(0,0,0,.25), rgba(0,0,0,.55)),
              linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
}
.forum-hero .inner{
  display:grid; place-items:center; text-align:center; position:relative;
  min-height:250px; z-index:1;
}

.forum-stats{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.pill{ display:inline-flex; gap:.4rem; padding:.35rem .65rem; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--line); font-weight:700 }

.section{ padding-block: clamp(18px,4vw,32px) }
.forum-grid{ display:grid; grid-template-columns: 1fr 320px; gap:16px }
@media (max-width:1199.98px){ .forum-grid{ grid-template-columns:1fr } }

/* ====== Kártya-készlet (home + category) ====== */
.home-cats{ display:grid; gap:14px }

/* konténer */
.cat-section{ --cat:#7aa2f7; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.03); overflow:hidden; position:relative }
.cat-section::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--cat) }

/* fej */
.cat-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.03) }
.cat-title{ display:flex; align-items:center; gap:10px; font-weight:800 }
.cat-dot{ width:12px; height:12px; border-radius:50%; background:var(--cat) }
.cat-meta{ color:var(--muted); font-size:.92rem }

/* test */
.cat-body{ padding:12px }
.cat-threads{ display:grid; gap:8px }

/* elem */
.cat-thread{
  display:grid; grid-template-columns:48px 1fr auto; gap:12px;
  padding:10px 12px; border-radius:10px; border:1px solid var(--line);
  background:rgba(255,255,255,.02); align-items:center;
}
.cat-thread:hover{ background:rgba(255,255,255,.05) }

/* ikon */
.ct-icon{
  width:48px; height:48px; display:grid; place-items:center; border-radius:10px;
  background: color-mix(in srgb, var(--cat) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--cat) 55%, rgba(255,255,255,.18));
}
.ct-icon i{ font-size:20px; line-height:1 }

/* tartalom */
.ct-title{ font-weight:700; margin:0; font-size:.98rem }
.ct-meta{ color:var(--muted); font-size:.85rem; margin-top:4px }
.ct-stats{ display:flex; gap:6px; align-items:center; font-size:.8rem; }

/* Deleted topic appearance */
.cat-thread.deleted{ opacity: .55; filter: grayscale(.9); }
.cat-thread.deleted .ct-title, .cat-thread.deleted .ct-meta, .cat-thread.deleted .thread-title { color: #9aa0a6; }
.ct-deleted-icon{ color: #c82333; margin-right:6px; display:inline-flex; align-items:center; }
.ct-deleted-icon{ cursor: pointer; }
.ct-deleted-wrap{ display:flex; align-items:center; margin-right:8px; }
/* Popover (Bootstrap) theming to match forum dark design */
.popover {
  background: linear-gradient(180deg, rgba(18,23,32,0.98), rgba(12,15,20,0.98));
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  min-width: 200px;
  border-radius: 10px;
}
.popover .popover-header { background: transparent; color: var(--text); border-bottom: none; padding: .5rem .75rem; font-weight:700 }
.popover .popover-body { padding: .6rem .75rem; color: var(--muted); }
.popover .btn-pop-confirm { padding: .25rem .5rem; font-size: .85rem }
.popover .btn-pop-cancel { padding: .25rem .5rem; font-size: .85rem }
.popover .arrow::before { border-top-color: transparent !important; border-right-color: transparent !important; border-bottom-color: transparent !important; border-left-color: transparent !important; }
.popover .arrow::after { background: transparent; }
/* style arrow using a pseudo-element overlay so it blends with popover background */
.popover.bs-popover-auto[x-placement^="top"] .arrow::after,
.popover.bs-popover-top .arrow::after { border-top-color: rgba(12,15,20,0.98); }
.popover.bs-popover-auto[x-placement^="bottom"] .arrow::after,
.popover.bs-popover-bottom .arrow::after { border-bottom-color: rgba(12,15,20,0.98); }
.popover.bs-popover-auto[x-placement^="left"] .arrow::after,
.popover.bs-popover-left .arrow::after { border-left-color: rgba(12,15,20,0.98); }
.popover.bs-popover-auto[x-placement^="right"] .arrow::after,
.popover.bs-popover-right .arrow::after { border-right-color: rgba(12,15,20,0.98); }
/* Deleted post styling */
.post.deleted{ opacity:.6; filter:grayscale(.85); }
.post.deleted .post-body{ color: #9aa0a6; }
.ph-left-deleted{ display:inline-flex; align-items:center; margin-left:8px; }
.deleted-control{ display:inline-block; position:relative; }
.delete-bubble{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  background: #0f1720;
  border:1px solid var(--line);
  padding:.5rem;
  border-radius:8px;
  min-width:180px;
  box-shadow:0 8px 24px rgba(0,0,0,.6);
  z-index:2200;
}
.delete-bubble .small{ display:block; margin-bottom:.35rem; color:var(--muted); }
.delete-bubble .btn{ margin-right:.35rem; }
.ct-side{ display:flex; align-items:center; gap:12px; }  /* jobb oldali sáv: stats + author egymás mellett */
.ct-main span {
    font-size: 0.7rem;
}
/* mobilon a jobb oldali sáv lecsúszik alulra, jobbra igazítva */
@media (max-width: 768px){
  .cat-thread{ grid-template-columns:48px 1fr; }
  .ct-side{ grid-column: 1 / -1; justify-content:flex-end; margin-top:6px; }
}

/* jobb oldal */
.ct-author{ display:flex; flex-direction:column; align-items:flex-end; gap:6px }
.author-mini{ display:flex; align-items:center; gap:8px }
.avatar-15{ width:35px; height:35px; object-fit:cover }
.avatar-16{ width:45px; height:45px; object-fit:cover }

/* thread (home “Legújabb témák”-hoz marad) */
.thread{ display:grid; grid-template-columns: 1fr auto; gap:8px; padding:14px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.03) }
.thread:hover{ background:rgba(255,255,255,.06) }
.thread-title{ margin:0; font-weight:800 }
.tags{ display:flex; gap:6px; flex-wrap:wrap }
.tag{ font-size:.8rem; border:1px solid var(--line); padding:.1rem .45rem; border-radius:999px; color:#cfd6e3 }
.stat-chip{ display:inline-flex; align-items:center; gap:.35rem; border-radius:10px;}
.thread-stats{ display:flex; gap:6px; align-items:center; margin-top:6px }
.thread-aside{ text-align:right }
.author-box{ display:inline-flex; align-items:center; gap:8px }
.avatar-18{ width:50px; height:50px; object-fit:cover }

/* topic ikon */
#threadTitle{ display:flex; align-items:center; gap:8px }
.topic-head{ display:flex; align-items:center; gap:8px }
 /* wrapper használható template-ből és a topicIconHtml által beszúrt belső wrapper-re is */
 .topic-icon, .topic-icon-inner {
   position:relative;
   display:inline-block;
   width:24px;
   height:24px;
   vertical-align:middle;
   line-height:0;
 }
 .topic-icon i, .topic-icon-inner i {
   position:absolute;
   left:50%;
   top:50%;
   transform:translate(-50%,-50%);
   font-size:20px;
   line-height:1;
   pointer-events:none;
   color:inherit;
 }
 /* stacked offsets (két ikon esetén) */
 .topic-icon i.b1, .topic-icon-inner i.b1 { transform:translate(-50%,-50%) translate(-2px,-4px); opacity:.95; }
 .topic-icon i.b2, .topic-icon-inner i.b2 { transform:scaleX(-1) translate(-50%,-50%) translate(15px,2px); opacity:.45; }

/* post */
.avatar{ width:56px; height:56px; border-radius:12px; object-fit:cover; border:1px solid var(--line) }
/* VIP styling: glowing avatar border + animated name sparkle */
.vip { position: relative; display: inline-block; font-weight:900; letter-spacing: .6px; }
.vip{ /* bold gold gradient text with subtle outline */
  background: linear-gradient(180deg, #fff7d6 0%, #ffd36a 35%, #e5a80e 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5), 0 0 6px rgba(255,200,60,0.15);
  -webkit-text-stroke: 0.6px rgba(40,20,0,0.45);
}
.vip::before{
  content: '';
  position: absolute; left:0; right:0; top:0; bottom:0; pointer-events:none;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-140%) skewX(-12deg);
  filter: blur(10px);
  opacity: 0.9;
  mix-blend-mode: screen;
  animation: vip-shimmer 2600ms ease-in-out infinite;
}
.vip-avatar{ position: relative; border-radius:12px; box-shadow: 0 0 12px rgba(255,215,0,0.22), 0 0 30px rgba(255,215,0,0.08); border:2px solid rgba(255,215,0,0.65); }
.vip-avatar::after{
  content: "";
  position: absolute; inset:-6px; border-radius:18px; pointer-events:none;
  background: radial-gradient(circle at 10% 20%, rgba(255,255,255,0.9) 0px, rgba(255,255,255,0.0) 4px),
              radial-gradient(circle at 80% 70%, rgba(255,235,150,0.9) 0px, rgba(255,235,150,0.0) 5px);
  opacity: .0;
  animation: vip-avatar-sparkle 2500ms linear infinite;
}

@keyframes vip-name-shine{
  0%{ transform: translateX(-120%); opacity:0 }
  40%{ opacity:1 }
  60%{ opacity:1 }
  100%{ transform: translateX(120%); opacity:0 }
}

@keyframes vip-shimmer{
  0%{ transform: translateX(-140%) skewX(-12deg); opacity:0 }
  20%{ opacity:0.8 }
  60%{ transform: translateX(120%) skewX(-12deg); opacity:0.6 }
  100%{ transform: translateX(140%) skewX(-12deg); opacity:0 }
}

@keyframes vip-avatar-sparkle{
  0%{ opacity:0; transform: scale(.95) }
  20%{ opacity:.9; transform: scale(1.02) }
  50%{ opacity:.3; transform: scale(1) }
  100%{ opacity:0; transform: scale(.98) }
}

/* Fancy rank badge (gold/colored) */
.rank-badge.fancy{
  --rb-color: #ffd36a; /* fallback */
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.18rem .5rem; border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.06));
  border: 1px solid color-mix(in srgb, var(--rb-color) 40%, rgba(255,255,255,0.06));
  box-shadow: 0 4px 18px rgba(0,0,0,0.45), 0 0 10px color-mix(in srgb, var(--rb-color) 30%, transparent);
  color: #fff; font-weight:700; font-size:.78rem;
}
.rank-badge.fancy .rb-logo{ width:20px; height:20px; display:inline-grid; place-items:center; flex:0 0 20px; border-radius:6px; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.06)); }
.rank-badge.fancy .rb-logo img{ width:100%; height:100%; object-fit:cover; display:block }
.rank-badge.fancy .rb-label{ color:var(--rb-color); font-weight:800; font-size:.78rem; text-shadow: 0 1px 0 rgba(0,0,0,.6); }
.rank-badge.fancy .rb-icon{ color:var(--rb-color); font-size:14px }
.rank-badge.fancy[data-outline="true"]{ box-shadow: 0 0 8px color-mix(in srgb, var(--rb-color) 45%, transparent); }

.post-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px }
.author{ display:flex; align-items:center; gap:8px; font-weight:800 }
.role{ font-size:.72rem; padding:.05rem .4rem; border-radius:6px; border:1px solid var(--line); color:#c9ffd8 }
.role.mod{ color:#ffe08a }

/* chipek + linkek színezése a kategória színével */
.subcat-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.2rem .55rem; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  font-size:.85rem
}
.stretched-link{display:contents}

/* home: linkek a kategória színével */
.home-cats .cat-section a:not(.btn):not(.stretched-link){ color: var(--cat) !important; }
.home-cats .cat-section a:hover{ opacity:.95; text-decoration:underline; }
.home-cats .cat-section .cat-title a,
.home-cats .cat-section .ct-title,
.home-cats .cat-section .thread .thread-title{ color: var(--cat) !important; }

/* cat-section chip színek */
.home-cats .cat-section .subcat-chip{
  color: var(--cat) !important;
  border-color: color-mix(in srgb, var(--cat) 65%, transparent);
  background:   color-mix(in srgb, var(--cat) 12%, transparent);
}
.home-cats .cat-section .subcat-chip:hover{
  background: color-mix(in srgb, var(--cat) 18%, transparent);
}

/* ellipsis */
.ellipsis-1{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden }
.ellipsis-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }

/* sub-sub chipek (ha használnád máshol) */
.ct-sub2{ margin-top:8px; display:flex; gap:6px; flex-wrap:wrap; }
.subchip-2{ font-size:.82rem; border-style:dashed; padding:.15rem .5rem; }
.subchip-2{ display:inline-flex; align-items:center; gap:.35rem; }
.subchip-icon .bi{ font-size:14px; line-height:1; color: var(--cat); }

/* ikon badge */
.icon-badge{ display:inline-grid; place-items:center; width:36px; height:36px; border-radius:10px; background: var(--cat); border: 1px solid var(--line) }
.icon-badge .bi{ font-size:18px; line-height:1; color:#0f1117; }
.icon-badge.image{ padding:4px; overflow:hidden; background:transparent }
.icon-badge.image .icon-img{ width:100%; height:100%; object-fit:contain; border-radius:8px }
.icon-badge.sm{ width:22px; height:22px; border-radius:6px }
.icon-badge.sm .bi{ font-size:13px }

/* ikonválasztó rács */
.icon-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px }
.icon-cell{ border:1px solid var(--line); border-radius:10px; padding:8px; cursor:pointer; text-align:center; background:rgba(255,255,255,.03) }
.icon-cell:hover{ background:rgba(255,255,255,.06) }
.icon-cell i{ font-size:20px; display:block; margin-bottom:6px }
.icon-name{ font-size:.8rem; color:#cfd6e3; word-break:break-all }
.icon-cell.active{ outline:2px solid var(--cat,#7aa2f7) }

/* stacked modals */
.modal-backdrop.show ~ .modal-backdrop.show { z-index:1055 }
.modal.show { z-index:1060 }

/* ===== extra: ugyanaz a márkázás a kategória és téma nézetben ===== */
#viewCategory a:not(.btn):not(.stretched-link),
#viewThread  a:not(.btn):not(.stretched-link){ color: var(--cat) !important; }
#viewCategory a:hover, #viewThread a:hover{ opacity:.95; text-decoration:underline; }

/* címek színezése kategória nézetben is */
#viewCategory .ct-title,
#viewCategory .thread .thread-title{ color: var(--cat) !important; }

#viewThread .post{
  border-color: color-mix(in srgb, var(--cat) 40%, rgba(255,255,255,.18));
  background:   color-mix(in srgb, var(--cat) 10%, transparent);
}
#viewThread .post:hover{ background: color-mix(in srgb, var(--cat) 16%, transparent); }
#viewThread #threadTitle{ color: var(--cat) }
/* ha nincs rightbar, legyen 1 oszlop */
.forum-grid.no-rightbar{ grid-template-columns: 1fr; }
/* Thread fejléc ugyanaz a hangulat */
 #threadSection .cat-title .topic-icon {
   position:relative;
   display:inline-block;
   width:24px;
   height:24px;
  vertical-align:middle;
}
#threadSection .cat-title { gap: 10px; }
#threadSection .cat-title a { font-weight:800; }
#threadSection .cat-meta .stat-chip { padding: .2rem .5rem; }
/* ========== POST LAYOUT: poster (bal) + postarea (jobb) ========== */
.post{
  display:grid;
  grid-template-columns: 220px 1fr; /* bal infóhasáb + jobb tartalom */
  border-radius:12px;
  background:rgba(255,255,255,.03);
}
/* ---- POST header/footer ---- */
.post-header,
.post-footer{ grid-column: 1 / -1; }

.post-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px;
  border:1px solid var(--line); border-bottom:0;
  border-radius:12px 12px 0 0;
  background:rgba(255,255,255,.04);
}

.post-header .ph-left{ display:flex; align-items:center; gap:8px; font-weight:800; }
.post-header .ph-left .topic-icon{ width:18px; height:18px; }
.post-header .ph-right{ color:var(--muted); font-size:.9rem; }

.post-footer{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  padding:10px 12px;
  border:1px solid var(--line); border-top:0;
  border-radius:0 0 12px 12px;
  background:rgba(255,255,255,.03);
}

/* tag chipek a témaszínnel */
.post-footer .tag{
  border-color: color-mix(in srgb, var(--cat) 60%, transparent);
  background:   color-mix(in srgb, var(--cat) 12%, transparent);
  color: var(--cat) !important;
}

/* a thread-nézetben legyen tényleges keret a poston */
#viewThread .post{
  border: 1px solid color-mix(in srgb, var(--cat) 40%, rgba(255,255,255,.18));
  background:    color-mix(in srgb, var(--cat) 10%, transparent);
}
#viewThread .post:hover{ background: color-mix(in srgb, var(--cat) 16%, transparent); }

/* Bal hasáb: poster */
.poster{
  border:1px solid var(--line);
  background:rgb(0 0 0 / 31%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:15px;
}
.poster{
  position: relative;        
  overflow: visible;          
}

/* 2) külső (keretes) háromszög – jobbra mutat */
.message-userArrow{
  position: absolute;
  top: 25%;
  right: -1px;               /* kilógjon a posterből */
  transform: translateY(-50%);
  width: 0; height: 0;
  border: 10px solid transparent;
  border-left-width: 0;
  border-right-color: rgb(33 41 59);          /* keret színe */
  z-index: 1;
  pointer-events: none;
}

/* 3) belső (kitöltés) háromszög – a .poster háttérszínével */
.message-userArrow::after{
  content: "";
  position: absolute;
  top: -9px;
  right: -8px;
  width: 0; height: 0;
  border: 9px solid transparent;
  border-left-width: 0;
  border-right-color: rgb(0 0 0 / 31%);
}
@media (max-width: 768px){ .message-userArrow{ display:none; } }

.avatar-wrap{ position:relative; width:150px; height:150px; }
/* framed avatar: külső keret + belső kép */
.avatar-frame{
  position:relative;
  width:100%; height:100%;
  border-radius:16px;
  padding:8px; /* space for the frame */
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  box-shadow: 0 6px 18px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.avatar-frame .avatar-xl{
  width:100%; height:100%; border-radius:10px; object-fit:cover; display:block; box-shadow: 0 2px 10px rgba(0,0,0,0.6);
  border: 1px solid var(--line);
}
.avatar-frame .avatar-inner-border{
  position:absolute; inset:8px; border-radius:10px; pointer-events:none;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.18) inset, 0 6px 12px rgba(0,0,0,0.45);
}
.online-dot{
  position:absolute; right:10px; bottom:10px;
  width:14px; height:14px; border-radius:50%;
  background:#9ca3af; /* offline szürke */
  border:2px solid #0f1117; /* sötét keret a kontrasztért */
}
.online-dot.on{ background:#22c55e; } /* online zöld */

.poster-name{ font-weight:800; text-align:center; }
.rank-badge{
  font-size:.75rem; padding:.15rem .5rem; border-radius:999px;
  border:1px solid var(--line); color:#c9ffd8;
}

/* extra meta a felhasználóról */
.poster-meta{ width:100%; display:grid; gap:6px; }
.poster-meta .row{
  display:flex; align-items:center; justify-content:space-between;
  font-size:.85rem; color:var(--muted);
  border-bottom:1px dashed rgba(255,255,255,.08);
  padding-bottom:4px;
}
.poster-meta .row:last-child{ border-bottom:0; padding-bottom:0; }

.poster-stats .stat-chip{ padding:.15rem .45rem; font-size:.8rem; }

/* Jobb hasáb: postarea – maradhat a régi fej + törzs + action */
.postarea{ display:flex; flex-direction:column; gap:8px; padding: 14px; }
.postarea .post-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.postarea .author{ display:flex; align-items:center; gap:8px; font-weight:800; }
.postarea .post-body{ line-height:1.6; }
/* Post header jobb oldala: dátum + #sorszám + permalink ikon */
.post-header .ph-right{
  display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.9rem;
}
.post-number{ font-variant-numeric: tabular-nums; font-weight:600; }
a.permalink{ color:var(--muted); text-decoration:none }
a.permalink:hover{ opacity:.9; text-decoration:underline; }

/* reszponzív: mobilon egymás alatt */
@media (max-width: 768px){
  .post{ grid-template-columns: 1fr; }
  .poster{ order:1; }
  .postarea{ order:2; }
}
/* Post fejléc: balra cím/ikon, jobbra dátum + # + permalink */
.post-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 14px;
  border-bottom:1px dashed var(--line);
}
.post-header .ph-left{ display:flex; align-items:center; gap:8px; font-weight:800; }
.post-header .ph-right{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.9rem; }
.post-number{ font-variant-numeric: tabular-nums; font-weight:600; }
a.permalink{ color:var(--muted); text-decoration:none }
a.permalink:hover{ opacity:.9; text-decoration:underline }

/* Post lábléc: műveletek + (első posztnál) tagek */
.post-footer{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 14px; 
  border-top:1px dashed var(--line);
}
.post-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

@media (max-width:768px){
  .post-footer{ flex-wrap:wrap; row-gap:8px; }
}

/* posztok már a var(--cat)-et használják, ez maradhat */

/* TinyMCE – dark skin a fórum témához */
.tox-tinymce{ border:1px solid var(--line) !important; border-radius:12px !important; }
.tox .tox-editor-header, .tox .tox-menubar, .tox .tox-toolbar{
  background: rgba(255,255,255,.03) !important; border-color: var(--line) !important;
}
.tox .tox-statusbar{ display:none !important; } /* amúgy is letiltjuk, csak biztos ami biztos */
.reply-box{
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255,255,255,.03);
}
#viewThread .reply-box{
  border-color: color-mix(in srgb, var(--cat) 35%, rgba(255,255,255,.18));
  background:   color-mix(in srgb, var(--cat) 8%,  transparent);
}
.postarea pre{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  padding: 10px;
  border-radius: 8px;
  overflow: auto;
}
.postarea pre code{
  display:block;
  white-space: pre; /* megőrzi a formázást */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size:.9rem;
}
.postarea blockquote.reply-quote{
  border-left: 3px solid var(--line);
  padding-left: 10px;
  margin:.5rem 0;
  opacity:.95;
}
#replyBox .tox-tinymce { min-height: 220px; }
#viewNew  .tox-tinymce { min-height: 380px; }
/* Thread header: nagy, egy soros cím az ikon mellett */
#threadSection .cat-title { max-width: 100%; }
#threadSection .cat-title .topic-icon{ flex:0 0 auto; }
#threadSection .cat-title a{
  display:inline-block;
  font-weight:800;
  font-size: 1.15rem;     /* ha kell nagyobb: 1.25rem */
  line-height:1.2;
  max-width: min(78vw, 1100px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
#threadSection .cat-title a:hover{ text-decoration: underline; }
.post-footer .edited-info{ color:var(--muted); font-size:.85rem; }
.locked-link{
  color: #9ca3af;
  cursor: not-allowed;
  border-bottom: 1px dotted rgba(255,255,255,.35);
  white-space: nowrap;
}
.locked-link .bi{ font-size: .9em; opacity: .85; vertical-align: -2px; }
.rank-badges{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.rank-badge{
  font-size:.75rem; padding:.15rem .5rem; border-radius:999px;
  border:1px solid var(--line); color:#c9ffd8; white-space:nowrap;
}
.poster-stats{
  display:grid;
  gap:4px;
  width:100%;
}
.stat-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 20px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--line);
    font-size: .6rem;
}
.stat-row .label{ color:var(--muted); }
.poster-actions{
  display:flex; gap:.5rem; justify-content:flex-end; align-items:center; flex-wrap:wrap;
}
.icon-btn{
  border:1px solid var(--btn-border,#d0d7de);
  background:var(--btn-bg,#fff);
  border-radius:999px;
  padding:.20rem 0.25rem; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.2rem;
}
.icon-btn.ccolor {
    color: #e9ecf1;
    border-color: #e9ecf1;
    background: #f0fff400;
}
.icon-btn:hover{ background:#f6f8fa; }
.icon-btn .bi{ font-size:0.7rem; }
.icon-btn.danger{ color:#b42318; border-color:#f1c2bf; background:#fff5f5; }
.icon-btn.warn{ color:#a15c00; border-color:#ffd8a8; background:#fff7e6; }
.icon-btn.success{ color:#116329; border-color:#b7e1c1; background:#f0fff4; }
/* Toast fallback (ha nincs Bootstrap CSS) */
#toastHost{
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 2000;           /* modálok fölé */
  pointer-events: none;    /* ne takarja a kattintást */
}
#toastHost .toast{
  display: block;          /* mindig látszódjon */
  opacity: 1;
  pointer-events: auto;
  background: rgba(33,41,59,.98);
  color: #e9ecf1;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .6rem .75rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
#toastHost .toast + .toast{ margin-top: 8px; }
#toastHost .btn-close{ filter: invert(1) grayscale(1) contrast(200%); }
/* Tiltott felhasználó megjelenítése */
.poster-name.banned,
.postarea .author .name.banned {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  opacity: .8;
}
/* Tiltott felhasználó megjelenítése */
.poster-name.banned { 
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  opacity: .8;
}

/* kártyákon / listákon szereplő nevek */
.ct-author strong.banned,
.ct-main .open_member.banned {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  opacity: .8;
}
/* Globális: ahol .banned osztály kerül egy névre, biztosan legyen áthúzva */
.banned{
  text-decoration: line-through !important;
  text-decoration-thickness: 2px;
  opacity: .8;
}
/* biztosítsd, hogy a hidden mindig elrejtse az elemet, akkor is, ha d-flex rajta van */
[hidden] { display: none !important; }

.post-foot-right{
  display:flex;
  flex-direction:column;           /* edited-info fölül, tagek alatta */
  gap:6px;
  align-items:flex-end;            /* desktopon jobbra zár */
}

.post-tags{                        /* már létezik nálad, csak itt a biztos ami biztos */
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.post-footer .tag{                 /* a meglévő chip-stílusod működni fog a tagekre is */
  border-color: color-mix(in srgb, var(--cat) 60%, transparent);
  background:   color-mix(in srgb, var(--cat) 12%, transparent);
  color: var(--cat) !important;
}

@media (max-width:768px){
  .post-footer{ flex-direction:column; }
  .post-foot-right{ align-items:flex-start; }  /* mobilon balra zár */
}
.postarea{
  position: relative;
  /* hagyjunk helyet az edited-info-nak, hogy ne lógjon rá a láblécre */
  padding-bottom: 28px; /* ha két soros lehet, emeld 40–48px-re */
}

.postarea .edited-info{
  position: absolute;
  right: 14px;
  bottom: 0px;
  font-size: .85rem;
  color: var(--muted);
  white-space: nowrap;
  max-width: calc(100% - 28px);
  text-overflow: ellipsis;
  overflow: hidden;
}

/* lábléc maradhat a szokásos elrendezésben */
.post-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 14px;
  margin-top:8px;
  border-top:1px dashed var(--line);
}

.post-tags{
  display:flex; gap:6px; flex-wrap:wrap;
}

/* mobilon inkább ne legyen fix sarokban: menjen a tartalom alá szépen tördelve */
@media (max-width: 768px){
  .postarea{ padding-bottom: 0; }
  .postarea .edited-info{
    position: static;
    display: block;
    text-align: right;   /* ha balra kéred: left */
    margin-top: 6px;
    white-space: normal;
  }
}
.poll .progress{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  height: 12px;
}
.poll .progress-bar{
  background: var(--cat, #7aa2f7);
}

/* ============ Statistics section (moved from inline view) ============ */
#statistics .display-6 { font-size: clamp(1.0rem, 3.2vw, 1.5rem) !important; line-height: 1; }
#statistics h5 { font-size: clamp(0.8rem, 1.8vw, 0.95rem); margin-bottom: .2rem; }
#statistics .bi { font-size: clamp(0.9rem, 2.0vw, 1rem); }
#statistics .card { padding: clamp(.5rem, 1.2vw, .75rem); }
#statistics .display-6.fw-bold { font-weight: 700; }