/* BloodNode — az oldal teljes stiluslapja.
   Korabban az index.html <helmet> blokkjaban ult beagyazva; onnan kerult ki,
   hogy a HTML olvashato maradjon es a bongeszo kulon tudja gyorsitotarazni.
   A fajlt az index.html <helmet> resze tolti be. */

body {
  margin: 0;
  font-family: "Barlow", system-ui, sans-serif;
  background: #08080a;
  color: #e9e6df;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: #d8b46a;
  text-decoration: none;
}

a:hover {
  color: #ecd39a;
}

input::placeholder {
  color: #5f636e;
}

::selection {
  background: rgba(200, 16, 46, 0.4);
  color: #fff;
}

@keyframes drawerIn {
  from {
    opacity: 0;
    transform: translateX(28px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes drawerSlide {
  from {
    opacity: 0;
    transform: translateX(66px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes backdropIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes iconPop {
  0% {
    opacity: 0;
    transform: scale(0.55) rotate(-10deg);
  }

  60% {
    transform: scale(1.1) rotate(3deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes glowPulse {

  0%,
  100% {
    opacity: 0.32;
    transform: scale(1);
  }

  50% {
    opacity: 0.72;
    transform: scale(1.16);
  }
}

@keyframes accentGrow {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Verseny-jelző a statisztika lapon: jobbról úszik be. */
@keyframes bnSlideInRight {
  from {
    opacity: 0;
    transform: translateX(28px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.bn-race-note {
  animation: bnSlideInRight 0.42s var(--ease-smooth-out) 0.25s both;
}

.bn-race-dot {
  animation: bnRacePulse 1.8s ease-in-out infinite;
}

@keyframes bnRacePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .bn-race-note { animation: fadeUp 0.2s ease both; }
  .bn-race-dot { animation: none; }
}

@keyframes slotland {
  from {
    transform: scale(0.8);
    opacity: 0.3;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fogDrift {
  from {
    transform: translateX(-4%);
  }

  to {
    transform: translateX(4%);
  }
}

@keyframes fogDrift2 {
  from {
    transform: translate(3%, 2%);
  }

  to {
    transform: translate(-3%, -2%);
  }
}

@keyframes emberPulse {

  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 0.9;
  }
}

@keyframes heroTitleIn {
  from {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(6px);
  }

  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes markPulse {

  0%,
  100% {
    box-shadow: 0 0 8px rgba(200, 16, 46, 0.5);
  }

  50% {
    box-shadow: 0 0 22px rgba(200, 16, 46, 0.95);
  }
}

@keyframes heroZoom {
  from {
    transform: scale(1.06);
  }

  to {
    transform: scale(1);
  }
}

@keyframes scrollCue {

  0%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }

  50% {
    transform: translateY(7px);
    opacity: 0.9;
  }
}

[data-ptip] {
  position: absolute;
  left: -1px;
  right: -1px;
  top: calc(100% - 4px);
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--bn-hover-fast) ease, transform var(--bn-hover-fast) ease, visibility var(--bn-hover-fast);
  pointer-events: none;
}

article:hover [data-ptip] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.rdesc ul {
  margin: 0.5em 0;
  padding-left: 1.2em;
}

.rdesc li {
  margin: 0.2em 0;
}

.rdesc b,
.rdesc strong {
  color: #f4f1e9;
}

.rhl {
  color: #d8b46a;
  font-weight: 600;
}

select option {
  background: #101116;
  color: #e9e6df;
}

/* ---------- Responsive / mobile ---------- */
.nav-burger {
  display: none;
}

@media (max-width: 880px) {
  .nav-desktop {
    display: none !important;
  }

  .nav-burger {
    display: grid !important;
  }
}

@media (min-width: 881px) {
  .nav-mobile {
    display: none !important;
  }
}

@media (max-width: 600px) {

  [style*="minmax(300px"],
  [style*="minmax(230px"],
  [style*="minmax(200px"] {
    grid-template-columns: 1fr !important;
  }

  [style*="minmax(320px,1.05fr)"] {
    grid-template-columns: 1fr !important;
  }

  [style*="max-width:1280px"],
  [style*="max-width:1320px"],
  [style*="max-width:1180px"],
  [style*="max-width:1100px"],
  [style*="max-width:1000px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  [data-screen-label="Header"] {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

@keyframes mnavIn {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Kezdőlap (hero + stat sáv + kártyák + hírek) ---------- */
/* A .cards rácsot az auto-fit maga tördeli (215px-es minimum), nem kell töréspont. */
@media (max-width: 1000px) {
  .news-grid {
    grid-template-columns: 1fr !important;
  }

  .news-lead {
    grid-template-columns: 260px 1fr !important;
    gap: 26px !important;
  }

  /* Statisztika: a három hasáb és a toplista egymás alá kerül */
  .dbd-cols,
  .dbd-lb-cols {
    grid-template-columns: 1fr !important;
  }
}


/* Profil: tier lista kártyák és a mobil elrendezés */
.tlcard {
  transition: transform var(--bn-hover) var(--ease-smooth-out), border-color var(--bn-hover), box-shadow var(--bn-hover);
}

.tlcard:hover {
  transform: translateY(-3px);
  border-color: rgba(216, 180, 106, 0.42) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6) !important;
}

.tlcard .tlgo {
  transition: transform var(--bn-hover) var(--ease-smooth-out), opacity var(--bn-hover);
  opacity: .55;
}

.tlcard:hover .tlgo {
  opacity: 1;
  transform: translateX(4px);
}

@media (max-width: 720px) {
  .res-head {
    padding: 20px 16px !important;
    gap: 14px !important;
  }

  .res-chips {
    width: 100% !important;
  }

  .res-chips>div {
    flex: 1 !important;
  }

  .res-pane {
    padding: 20px 16px !important;
  }

  .res-rank img {
    width: 62px !important;
    height: 62px !important;
  }

  .stat3 {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .stattile {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 11px 14px !important;
  }

  .stattile>div:last-child {
    margin-top: 0 !important;
    text-align: right !important;
  }

  .prog-bar {
    gap: 12px !important;
    padding: 12px 14px !important;
  }

  .idrow {
    gap: 14px !important;
  }

  .idrow>span:first-child {
    width: 64px !important;
    height: 64px !important;
    font-size: 28px !important;
  }
}

/* ---------- Kihívások ---------- */
@keyframes pulseRing {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(200, 16, 46, 0.34);
  }

  50% {
    box-shadow: 0 0 0 7px rgba(200, 16, 46, 0);
  }
}

.kh-head {
  position: relative;
  overflow: hidden;
}

.kh-head::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 38%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 180, 106, 0.9), transparent);
  animation: sheen 6.5s cubic-bezier(.5, 0, .5, 1) infinite;
}

.kh-card {
  transition: transform var(--bn-hover) var(--ease-smooth-out), border-color var(--bn-hover), box-shadow var(--bn-hover);
}

.kh-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.6);
}

@media (max-width: 1000px) {

  .kh-hero-grid,
  .kh-body {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 780px) {
  .kh-grid {
    grid-template-columns: 1fr !important;
  }

  .kh-seg {
    width: 100% !important;
  }

  .kh-seg>button {
    flex: 1 !important;
  }
}

/* ---------- Tier lista szerkesztő ---------- */
@keyframes tileIn {
  from {
    opacity: 0;
    transform: scale(.82);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Csempe: hoverre kiemelkedik és előbújik a név. */
.tile {
  transition: transform var(--bn-hover-fast) var(--ease-smooth-out), box-shadow var(--bn-hover-fast), border-color var(--bn-hover-fast);
}

.tile:hover {
  transform: translateY(-3px) scale(1.04);
  border-color: rgba(216, 180, 106, 0.75) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.65);
  z-index: 2;
}

.tile .tname {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--bn-hover-fast), transform var(--bn-hover-fast);
}

.tile:hover .tname {
  opacity: 1;
  transform: none;
}

.gcard {
  transition: transform var(--bn-hover) var(--ease-smooth-out), border-color var(--bn-hover), box-shadow var(--bn-hover);
}

.gcard:hover {
  transform: translateY(-3px);
  border-color: rgba(216, 180, 106, 0.42) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}

@media (max-width: 780px) {
  .tl-bar {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .tl-seg,
  .tl-actions {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .tl-seg>button,
  .tl-actions>button {
    flex: 1 !important;
  }

  .tl-plate {
    width: 58px !important;
  }

  .tl-zone {
    padding: 8px !important;
    gap: 6px !important;
  }
}

/* ---------- Belépés / Steam összekötés (teljes oldal) ---------- */
@keyframes upIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes stepIn {
  from {
    opacity: 0;
    transform: translateX(22px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes glowDrift {
  0% {
    transform: translate3d(-6%, -4%, 0) scale(1);
  }

  50% {
    transform: translate3d(8%, 6%, 0) scale(1.12);
  }

  100% {
    transform: translate3d(-6%, -4%, 0) scale(1);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes floaty {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: .25;
  }

  50% {
    transform: translateY(-22px) rotate(8deg);
    opacity: .6;
  }

  100% {
    transform: translateY(0) rotate(0deg);
    opacity: .25;
  }
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(.5);
  }

  70% {
    transform: scale(1.14);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes barGrow {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* Háttér: lassan sodródó vörös fénykör és halvány pásztázó vonalak. */
.stage {
  position: relative;
  overflow: hidden;
}

.stage::before {
  content: "";
  position: absolute;
  width: 900px;
  height: 900px;
  top: -320px;
  left: -180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 16, 46, 0.30), transparent 62%);
  filter: blur(14px);
  animation: glowDrift 22s ease-in-out infinite;
  pointer-events: none;
}

.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 4px);
  pointer-events: none;
}

.lg-card {
  position: relative;
  overflow: hidden;
  animation: upIn .55s var(--ease-smooth-out) both;
}

.lg-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 36%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 180, 106, 0.95), transparent);
  animation: sheen 7s cubic-bezier(.5, 0, .5, 1) infinite;
  pointer-events: none;
}

.pane-art {
  position: relative;
  overflow: hidden;
}

.pane-art>.dia {
  position: absolute;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: linear-gradient(180deg, #e8cf94, #8f0b20);
}

.fld {
  width: 100%;
  box-sizing: border-box;
  background: rgba(6, 6, 9, 0.85);
  border: 1px solid rgba(216, 180, 106, 0.14);
  border-radius:0;
  padding: 14px 15px;
  color: #f4f1e9;
  font-family: "Barlow", sans-serif;
  font-size: 15px;
  outline: none;
  transition: border-color var(--bn-hover), box-shadow var(--bn-hover), background var(--bn-hover);
}

.fld:focus {
  border-color: rgba(216, 180, 106, 0.6);
  background: rgba(11, 11, 15, 0.95);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.16);
}

.lg-btn {
  cursor: pointer;
  border: none;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: transform var(--bn-hover) var(--ease-smooth-out), filter var(--bn-hover), border-color var(--bn-hover), background var(--bn-hover), color var(--bn-hover);
}

.lg-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.09);
}

.lg-btn:active {
  transform: translateY(0) scale(.99);
}

.lg-btn>.gl {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: translateX(-160%);
  pointer-events: none;
}

.lg-btn:hover>.gl {
  transition: transform .65s ease;
  transform: translateX(300%);
}

.ghost:hover {
  background: rgba(216, 180, 106, 0.08) !important;
  border-color: rgba(216, 180, 106, 0.45) !important;
  color: #f4f1e9 !important;
}

.spin {
  animation: spin .9s linear infinite;
}

/* ---------- Egyseges sarok-nyelv ----------
   Minden felulet levagott sarku. Negy meret van, es csak ket forma:
   - felulet (kartya, panel, mezo, kep): a jobb felso sarok van levagva
   - vezerlo (gomb, chip): atlosan ket sarok van levagva
   A meretskala innen hangolhato, a tobbi hely ezt hasznalja. */
:root {
  --cut-xs: 6px;
  --cut-sm: 10px;
  --cut-md: 14px;
  --cut-lg: 18px;
}

.cut-xs,
.cut-sm,
.cut-md,
.cut-lg,
.cut-btn,
.cut-btn-xs,
.cut,
.cut-s {
  border-radius: 0 !important;
}

.cut-xs {
  clip-path: polygon(0 0, calc(100% - var(--cut-xs)) 0, 100% var(--cut-xs), 100% 100%, 0 100%);
}

.cut-sm {
  clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, 0 100%);
}

.cut-md {
  clip-path: polygon(0 0, calc(100% - var(--cut-md)) 0, 100% var(--cut-md), 100% 100%, 0 100%);
}

.cut-lg {
  clip-path: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, 0 100%);
}

/* Vezerlok: atlos parban levagott sarok. */
.cut-btn,
.cut {
  clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, var(--cut-sm) 100%, 0 calc(100% - var(--cut-sm)));
}

.cut-btn-xs,
.cut-s {
  clip-path: polygon(0 0, calc(100% - var(--cut-xs)) 0, 100% var(--cut-xs), 100% 100%, var(--cut-xs) 100%, 0 calc(100% - var(--cut-xs)));
}

/* ================= transitions.dev =================
   A snippetek szo szerint a transitions-dev skillbol valok.
   A tunable valtozok itt allnak, a mozgas innen hangolhato. */
:root {
  /* A kozos mozgas-skala (--duration-*, --ease-*, --distance-*, --scale-*,
     --blur-*) lentebb, a "BloodNode mozgas-skala" blokkban all egyben. */

  /* Modal open / close */
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Success check */
  --check-opacity-dur: 500ms;
  --check-rotate-dur: 500ms;
  --check-rotate-from: 80deg;
  --check-bob-dur: 500ms;
  --check-y-amount: 40px;
  --check-blur-dur: 500ms;
  --check-blur-from: 10px;
  --check-path-dur: 500ms;
  --check-path-delay: 80ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);

  /* Toggle — a csuszka utja a sin (34) es a gomb (13) kozti tavolsag,
     a ket 3px-es szelen kivul: 34 - 13 - 3 - 3 = 15px. */
  --toggle-dur: 350ms;
  --toggle-travel: 15px;
  --toggle-ov1: 1px;
  --toggle-ov2: 0px;
  --toggle-track: 0ms;
  --toggle-ease: cubic-bezier(0.34, 1.35, 0.64, 1);

  /* Shimmer text — sotet temara hangolt szinek */
  --shimmer-dur: 2000ms;
  --shimmer-base: #5f636e;
  --shimmer-highlight: #f4f1e9;
  --shimmer-band: 400%;
  --shimmer-ease: linear;
}

/* ---------- Modal open / close ---------- */
.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition: transform var(--modal-open-dur) var(--modal-ease),
    opacity   var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}

.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}

.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition: transform var(--modal-close-dur) var(--modal-ease),
    opacity   var(--modal-close-dur) var(--modal-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-modal { transition: none !important; }
}

/* A kilepo masolat: a hatterfatyol is elhalvanyodik vele egyutt. */
.t-modal-layer.is-leaving {
  pointer-events: none;
}

.t-modal-layer.is-leaving > .t-modal-backdrop {
  /* A nyito animacio (backdropIn / av4fade) `both` kitoltessel tartana az
     opacityt, ezert zaraskor le kell venni, kulonben nincs mit atmenetezni. */
  animation: none !important;
  opacity: 0;
  transition: opacity var(--modal-close-dur) var(--modal-ease);
}

/* Az admin dialogusok sajat av4pop animacioja atvenne a nyitast a t-modaltol. */
.t-modal.av4-dialog {
  animation: none;
}

/* ---------- Success check ---------- */
/* Wrapper drives the appear animation; it doesn't own any
   sizing or color so you can drop in any icon. */
.t-success-check {
  display: inline-block;
  transform-origin: center;
  opacity: 0;
  will-change: transform, opacity, filter;
}

/* overflow: visible keeps the stroke from clipping while it
   draws; display: block kills the inline whitespace under SVGs. */
.t-success-check svg { display: block; overflow: visible; }

/* Stroke-draw setup. Replace 20 with the result of
   path.getTotalLength() for your path; round caps mean any
   sub-pixel overshoot is invisible. */
.t-success-check svg path {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
}

.t-success-check[data-state="in"] {
  animation:
    t-check-fade   var(--check-opacity-dur) var(--check-ease-opacity) forwards,
    t-check-rotate var(--check-rotate-dur)  var(--check-ease-rotate)  forwards,
    t-check-blur   var(--check-blur-dur)    var(--check-ease-out)     forwards,
    t-check-bob    var(--check-bob-dur)     var(--check-ease-bob)     forwards;
}

.t-success-check[data-state="in"] svg path {
  animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms) forwards;
}

@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }

@keyframes t-check-rotate {
  from { transform: rotate(var(--check-rotate-from)); }
  to   { transform: rotate(0deg); }
}

@keyframes t-check-blur {
  from { filter: blur(var(--check-blur-from)); }
  to   { filter: blur(0); }
}

@keyframes t-check-bob {
  from { translate: 0 var(--check-y-amount); }
  to   { translate: 0 0; }
}

@keyframes t-check-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .t-success-check { animation: none !important; opacity: 1; }
  .t-success-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }
}

/* Listanyitaskor egyszerre sok pipa jonne be — ott animacio nelkul allnak be. */
.t-success-check.t-instant {
  animation: none !important;
  opacity: 1;
}

.t-success-check.t-instant svg path {
  animation: none !important;
  stroke-dashoffset: 0 !important;
}

/* ---------- Toggle ---------- */
.t-toggle { transition: background var(--toggle-track) var(--toggle-ease); }

.t-toggle-thumb { translate: 0 0; will-change: translate; }

.t-toggle[data-on="true"] .t-toggle-thumb { translate: var(--toggle-travel) 0; }

.t-toggle.is-init[data-on="true"] .t-toggle-thumb { animation: t-toggle-on var(--toggle-dur) var(--toggle-ease) both; }

.t-toggle.is-init[data-on="false"] .t-toggle-thumb { animation: t-toggle-off var(--toggle-dur) var(--toggle-ease) both; }

@keyframes t-toggle-on {
  0% { translate: 0 0; }
  55% { translate: calc(var(--toggle-travel) + var(--toggle-ov1)) 0; }
  80% { translate: calc(var(--toggle-travel) - var(--toggle-ov2)) 0; }
  100% { translate: var(--toggle-travel) 0; }
}

@keyframes t-toggle-off {
  0% { translate: var(--toggle-travel) 0; }
  55% { translate: calc(0px - var(--toggle-ov1)) 0; }
  80% { translate: var(--toggle-ov2) 0; }
  100% { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .t-toggle-thumb { animation: none !important; }
}

/* ---------- Shimmer text ---------- */
/* Two-layer construction:
   1. The base text renders normally in --shimmer-base.
   2. ::before duplicates it via content: attr(data-text),
      paints a transparent -> highlight -> transparent gradient
      onto it, and clips that gradient to the glyphs via
      background-clip: text. Animating background-position
      sweeps the band across the text. */
.t-shimmer {
  position: relative;
  display: inline-block;
  color: var(--shimmer-base);
}

.t-shimmer::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    90deg,
    transparent          0%,
    transparent         40%,
    var(--shimmer-highlight) 50%,
    transparent         60%,
    transparent        100%
  );
  background-size: var(--shimmer-band) 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: t-shimmer var(--shimmer-dur) var(--shimmer-ease) infinite;
}

@keyframes t-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .t-shimmer::before { animation: none !important; }
}

@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr !important;
  }

  .pane-art {
    padding: 24px 22px !important;
  }

  .pane-art .artbig {
    font-size: 32px !important;
  }

  .perks {
    display: none !important;
  }

  .lg-pad {
    padding: 26px 20px !important;
  }

  .lg-foot {
    padding: 15px 20px !important;
  }

  .stage {
    padding: 20px 12px 34px !important;
  }

  .lg-card {
    border-radius:0;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
  }
}

/* ---------- Statisztika (toplista + eredmény) ---------- */
.bn-fade {
  animation: fadeUp 0.42s var(--ease-smooth-out) both;
}

/* Toplista-sor: bal oldali arany-piros jelölő és elcsúszó név hoverre. */
.lb-row {
  position: relative;
}

.lb-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #d8b46a, #c8102e);
  transform: scaleY(0);
  transition: transform var(--bn-hover-slow) var(--ease-smooth-out);
}

.lb-row:hover {
  background: linear-gradient(90deg, rgba(200, 16, 46, 0.10), rgba(216, 180, 106, 0.05) 45%, transparent) !important;
}

.lb-row:hover::before {
  transform: scaleY(1);
}

.lb-row .lb-name {
  transition: transform var(--bn-hover-slow) var(--ease-smooth-out);
}

.lb-row:hover .lb-name {
  transform: translateX(4px);
}

/* Sor- és pip-belépő, hogy a lista ne egyszerre villanjon be. */
@keyframes rowIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pipIn {
  from {
    opacity: 0;
    transform: scale(.4) rotate(-25deg);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* A kódjegyek zárva finoman lebegnek — nyitva megállnak. */
@keyframes bnTicketFloat {

  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  33% {
    transform: translate3d(-1.5px, -2.5px, 0) rotate(-.35deg);
  }

  66% {
    transform: translate3d(1.5px, 1.5px, 0) rotate(.3deg);
  }
}

/* Az összegző panel két hasábja keskeny kijelzőn egymás alá kerül. */
@media (max-width: 760px) {
  .codes-summary {
    grid-template-columns: 1fr !important;
  }
}

/* Végigfutó fény a kártyafejlécen. */
@keyframes sheen {
  0% {
    transform: translateX(-120%);
  }

  55%,
  100% {
    transform: translateX(320%);
  }
}

.lb-head {
  position: relative;
  overflow: hidden;
}

.lb-head::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 38%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 180, 106, 0.9), transparent);
  animation: sheen 6.5s cubic-bezier(.5, 0, .5, 1) infinite;
}

/* Hover-buborék a sor statjaival. */
.lb-tip {
  opacity: 0;
  transform: translateY(6px) scale(.97);
  transition: opacity var(--bn-hover-fast) ease, transform var(--bn-hover) var(--ease-smooth-out);
  pointer-events: none;
}

.lb-row:hover .lb-tip {
  opacity: 1;
  transform: none;
}

@media (max-width: 1080px) {

  .lb-grid,
  .res-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  .stat-tiles {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 860px) {
  .pad {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Alacsony/keskeny nézeten a görgetés-jelző a hero szövegébe érne. */
  .hero-cue {
    display: none !important;
  }
}

@media (max-width: 620px) {
  .news-lead {
    grid-template-columns: 1fr !important;
  }

  .news-card {
    padding: 20px 18px 24px !important;
  }
}

/* =====================================================================
   MOZGÁS-RÉTEG — gombok, lapváltás, átmenetek
   A mozgást a Beállítások "Mozgás" kapcsolója (html.bn-static) és a
   rendszerszintű prefers-reduced-motion is ki tudja kapcsolni.
   Minden animáció csak transform/opacity-t mozgat (GPU-n fut).
   ===================================================================== */
:root {
  /* ===== transitions.dev mozgas-skala =====
     A harminc-egynehany atmenet ebbol olvas. A felhasznalas donti el, melyik
     token jar egy ertekhez — nem a nyers szam. */
  --duration-stagger: 40ms;
  --duration-micro: 80ms;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-medium: 350ms;
  --duration-slow: 400ms;
  --duration-very-slow: 500ms;

  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;
  --ease-out: ease-out;
  --ease-linear: linear;
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
  --ease-bounce-strong: cubic-bezier(0.34, 3.85, 0.64, 1);

  --distance-micro: 4px;
  --distance-small: 6px;
  --distance-base: 8px;
  --distance-medium: 12px;
  --distance-large: 30px;

  --scale-large: 0.96;
  --scale-medium: 0.97;
  --scale-small: 0.98;
  --scale-tiny: 0.99;

  --blur-small: 2px;
  --blur-medium: 3px;
  --blur-large: 8px;

  /* ===== BloodNode sajat visszajelzes-skala =====
     A hover/fokusz visszajelzest (szin, keret, arnyek, kiemelkedes) a
     transitions.dev tokenek nem fedik le — ott nincs ilyen felhasznalas.
     Ezert kap sajat, harom fokozatu skalat, ugyanazzal a lendulettel. */
  --bn-hover-fast: 150ms;
  /* szin, keret, hatter */
  --bn-hover: 220ms;
  /* kiemelkedes, arnyek, elcsuszas */
  --bn-hover-slow: 340ms;
  /* nagyobb elmozdulas, chevron, nyil */

  /* A korabbi harom, egymastol alig kulonbozo lassulo gorbe egyre olvadt. */
  --bn-ease: var(--ease-smooth-out);
  --bn-ease-in: cubic-bezier(.4, 0, 1, 1);
}

/* ---------- Gombok: tapintható visszajelzés ---------- */
/* A gombok saját inline `transition`-je erősebb, ezért !important kell,
   különben a lapon lévő legtöbb gomb ugrálva váltana állapotot. */
button,
[role="button"],
summary {
  transition: transform var(--bn-hover-slow) var(--bn-ease),
    box-shadow 0.28s var(--bn-ease),
    background-color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    filter 0.2s ease,
    opacity 0.2s ease !important;
  -webkit-tap-highlight-color: transparent;
}

button:hover:not(:disabled),
[role="button"]:hover {
  transform: translateY(-1.5px);
}

/* Lenyomás: rövid, feszes visszapattanás — ez adja a "kattant" érzést.
   !important, mert a style-hover szabályok is azok: a lenyomás erősebb. */
button:active:not(:disabled),
[role="button"]:active {
  transform: translateY(0) scale(0.965) !important;
  transition-duration: 0.08s !important;
}

button:disabled {
  transform: none !important;
}

/* Ikon-gombok (nyelv, fogaskerék, bezárás) ne emelkedjenek, csak nyomódjanak. */
.bn-flat:hover:not(:disabled) {
  transform: none;
}

button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(216, 180, 106, 0.75);
  outline-offset: 2px;
}

/* ---------- Kattintás-hullám (ripple) ---------- */
.bn-ripple {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 68%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0.9;
  animation: bnRipple 0.62s var(--ease-smooth-out) forwards;
  z-index: 2;
}

@keyframes bnRipple {
  to {
    transform: translate(-50%, -50%) scale(16);
    opacity: 0;
  }
}

/* ---------- Fej-navigáció: alulról növő aláhúzás ---------- */
.bn-tab {
  position: relative;
}

/* ::before = arany hover-jelzés, ::after = vörös aktív jelzés (ez fest felül). */
.bn-tab::before,
.bn-tab::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--bn-hover-slow) var(--bn-ease);
}

.bn-tab::before {
  background: #d8b46a;
}

.bn-tab::after {
  background: #c8102e;
  transform: scaleX(var(--bn-active, 0));
}

.bn-tab:hover::before {
  transform: scaleX(1);
}

/* Mobil sor: balról becsúszó jelölő + finom behúzás. */
.bn-mrow {
  position: relative;
}

.bn-mrow::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #c8102e;
  transform: scaleY(var(--bn-active, 0));
  transform-origin: center;
  transition: transform var(--bn-hover-slow) var(--bn-ease);
}

.bn-mrow:hover::after {
  transform: scaleY(1);
  background: #d8b46a;
}

/* ---------- Lapváltás: mélységi átúsztatás ----------
   A korábbi vörös panel túl hangos volt és eltakarta az egész képernyőt.
   Helyette a lapok a mélységben mozognak: a régi hátralép és elhalványul,
   az új előrejön. A fejléc végig a helyén marad, csak a tartalom cserélődik
   — ettől olvasható egyetlen mozdulatnak. A visszajelzést a fejléc alatti
   vékony vonal adja, nem egy takaró felület. */
.bn-view-out {
  animation: bnViewOut 0.19s cubic-bezier(.4, 0, 1, 1) both !important;
  pointer-events: none;
}

@keyframes bnViewOut {
  to {
    opacity: 0;
    transform: translate3d(0, -10px, 0) scale(0.985);
  }
}

.bn-view {
  animation: bnViewIn 0.52s var(--bn-ease) both;
  transform-origin: 50% 0;
}

@keyframes bnViewIn {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(1.012);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Rétegek kilépő animációi (fiók, mobilmenü, ablakok) ---------- */
.bn-out-right>*+* {
  animation: bnDrawerOut 0.26s var(--bn-ease-in) both !important;
}

.bn-out-right>*:first-child {
  animation: bnFade 0.26s ease both !important;
}

@keyframes bnDrawerOut {
  to {
    opacity: 0;
    transform: translate3d(46px, 0, 0);
  }
}

.bn-out-up>*+* {
  animation: bnMnavOut 0.24s var(--bn-ease-in) both !important;
}

.bn-out-up>*:first-child {
  animation: bnFade 0.24s ease both !important;
}

@keyframes bnMnavOut {
  to {
    opacity: 0;
    transform: translate3d(0, -14px, 0);
  }
}

.bn-out-pop>*+* {
  animation: bnPopOut 0.2s var(--bn-ease-in) both !important;
}

.bn-out-pop>*:first-child {
  animation: bnFade 0.2s ease both !important;
}

@keyframes bnPopOut {
  to {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.97);
  }
}

@keyframes bnFade {
  to {
    opacity: 0;
  }
}

/* ---------- Perk-rács belépése ----------
   Csak akkor fut, amikor MEGÉRKEZEL az archívumba — szűréskor és gépeléskor
   nem. Korábban minden billentyűleütés újrajátszotta a staggert, ezért
   villogott a találati lista írás közben. A késleltetés a --d-ből jön. */
.bn-grid-enter>article {
  animation: bnCardIn 0.26s var(--bn-ease) both;
  animation-delay: var(--d, 0s);
}

@keyframes bnCardIn {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Kártyák: egységes emelkedés ---------- */
article {
  transition: transform var(--bn-hover-slow) var(--bn-ease),
    box-shadow 0.34s var(--bn-ease),
    border-color 0.24s ease;
}

/* ---------- Kezdőlapi csempék ----------
   Mind az öt egyformán viselkedik: a kép ráközelít, a link felizzik és a
   nyíl kilép. A kártya kurzor felé billenését a JS adja hozzá. */
.bn-fcard img {
  transition: transform 0.62s var(--bn-ease), filter var(--bn-hover-slow) ease;
}

.bn-fcard:hover img {
  transform: scale(1.055);
  filter: saturate(1.08) brightness(1.06);
}

.bn-fcta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color var(--bn-hover) ease;
}

.bn-fcard:hover .bn-fcta {
  color: #ecd39a;
}

.bn-arrow {
  font-style: normal;
  display: inline-block;
  transition: transform var(--bn-hover-slow) var(--bn-ease);
}

.bn-fcard:hover .bn-arrow {
  transform: translateX(5px);
}

/* ---------- Kurzor felé billenés ----------
   A szöget a JS írja inline transformba (lásd _setupTilt), itt csak a
   3D-kontextus és a visszaállás sebessége van. */
/* Billenés közben nincs transform-átmenet — a gomb azonnal követi a kurzort. */
.bn-tilting {
  transition: box-shadow var(--bn-hover) ease,
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease !important;
}

/* Elengedve viszont lágyan áll vissza. */
.bn-tilt-back {
  transition: transform 0.5s var(--bn-ease),
    box-shadow 0.3s ease,
    border-color 0.24s ease,
    background-color 0.24s ease,
    color 0.24s ease !important;
}

html.bn-static .bn-tilting,
html.bn-static .bn-tilt-back {
  transform: none !important;
}


/* ---------- Admin panel (v4) ---------- */
@media (max-width: 1100px) {
  .av4-statedot { display: none !important; }
}

@media (max-width: 900px) {
  .av4-searchbtn { display: none !important; }
}

/* A fejléc 64px magas és ragadós, ezért az oldalsáv onnan indul. */
.av4-shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: start;
}

.av4-side {
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow: auto;
  box-sizing: border-box;
  border-right: 1px solid rgba(216, 180, 106, 0.12);
  padding: 16px 12px 22px;
}

.av4-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.av4-split {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1px;
  background: rgba(216, 180, 106, 0.14);
}

.av4-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

/* A Steam lap toplistái: a Túlélő és a Gyilkos egymás mellett. */
.av4-boards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

/* A Rendszer lap két hasábja. A bal oldal szélesebb: ott vannak a
   kapcsolók és a beviteli mezők, a jobb oldal csak leolvasható állapot. */
.av4-ops {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.av4-ops-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

/* A kártyák inline stílusában ott maradt az `align-self:start`, ami a
   korábbi rácsban a függőleges igazítást állította. Flex-oszlopban viszont
   a VÍZSZINTES tengelyen hat: tartalomra zsugorította a kártyákat, és a
   hasáb fele üresen maradt. Itt írjuk felül — az inline érték miatt a
   konténer align-items-e önmagában nem lenne elég. */
.av4-ops-col > * {
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1100px) {
  .av4-ops { grid-template-columns: minmax(0, 1fr); }
}

@keyframes av4in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes av4fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes av4pop {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: none; }
}

@keyframes av4draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

@keyframes av4grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.av4-view { animation: av4in 240ms var(--ease-smooth-out) both; }
.av4-stag > * { animation: av4in 260ms var(--ease-smooth-out) both; }
.av4-stag > *:nth-child(1) { animation-delay: 0ms; }
.av4-stag > *:nth-child(2) { animation-delay: 45ms; }
.av4-stag > *:nth-child(3) { animation-delay: 90ms; }
.av4-stag > *:nth-child(4) { animation-delay: 135ms; }
.av4-stag > *:nth-child(5) { animation-delay: 180ms; }
.av4-stag > *:nth-child(6) { animation-delay: 215ms; }
.av4-stag > *:nth-child(n+7) { animation-delay: 240ms; }
.av4-backdrop { animation: av4fade 200ms var(--ease-smooth-out) both; }
.av4-dialog { animation: av4pop 220ms var(--ease-smooth-out) both; }

.av4-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: av4draw 460ms var(--ease-smooth-out) 80ms both;
}

.av4-area { animation: av4fade 400ms var(--ease-smooth-out) 320ms both; }

.av4-bar {
  transform-origin: left center;
  animation: av4grow 560ms var(--ease-smooth-out) 180ms both;
}

.av4-card {
  transition: transform var(--bn-hover) var(--ease-smooth-out),
    border-color 200ms var(--ease-smooth-out),
    box-shadow 200ms var(--ease-smooth-out);
}

@media (hover: hover) and (pointer: fine) {
  .av4-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.6);
  }
}

/* ------------------------------------------------------------------
   DBD Adatok és Útmutatók lap (a "DBD Adatok" terv szerint).
   A kártya bal szélén futó sáv adja a státuszt, a jelvény csak
   megerősíti — így egy pillantásból látszik, mi a vázlat és mi a kész.
   ------------------------------------------------------------------ */
@keyframes dbdSheetIn {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: none; }
}

@keyframes dbdSheetOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateX(26px); }
}

.dbd-stag > * { animation: av4in 260ms var(--ease-smooth-out) both; }
.dbd-stag > *:nth-child(1) { animation-delay: 0ms; }
.dbd-stag > *:nth-child(2) { animation-delay: 35ms; }
.dbd-stag > *:nth-child(3) { animation-delay: 70ms; }
.dbd-stag > *:nth-child(4) { animation-delay: 105ms; }
.dbd-stag > *:nth-child(5) { animation-delay: 140ms; }
.dbd-stag > *:nth-child(6) { animation-delay: 170ms; }
.dbd-stag > *:nth-child(7) { animation-delay: 195ms; }
.dbd-stag > *:nth-child(8) { animation-delay: 215ms; }
.dbd-stag > *:nth-child(n+9) { animation-delay: 230ms; }

.dbd-card {
  transition: transform var(--bn-hover) var(--ease-smooth-out),
    border-color 200ms var(--ease-smooth-out),
    box-shadow 200ms var(--ease-smooth-out),
    background 200ms var(--ease-smooth-out);
}
.dbd-card:active { transform: scale(0.985); }
.dbd-card:focus-visible { outline: 2px solid #d8b46a; outline-offset: 2px; }

.dbd-thumb { transition: transform var(--bn-hover) var(--ease-smooth-out); }

@media (hover: hover) and (pointer: fine) {
  .dbd-card:hover {
    transform: translateY(-2px);
    border-color: rgba(216, 180, 106, 0.34);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  }
  .dbd-card:hover .dbd-thumb { transform: scale(1.05); }
  .dbd-tile:hover { border-color: rgba(216, 180, 106, 0.34); }
  .dbd-btn:hover { border-color: rgba(216, 180, 106, 0.5); color: #f4f1e9; }
  .dbd-x:hover { border-color: rgba(216, 180, 106, 0.5); color: #f4f1e9; }
}

.dbd-tile {
  transition: border-color var(--bn-hover) var(--ease-smooth-out),
    background 200ms var(--ease-smooth-out),
    box-shadow 200ms var(--ease-smooth-out);
}
.dbd-tile:active { transform: scale(0.99); }
.dbd-tile:focus-visible { outline: 2px solid #d8b46a; outline-offset: 2px; }

.dbd-btn {
  transition: border-color var(--bn-hover-fast) ease,
    color 170ms ease,
    background 170ms ease,
    transform 140ms var(--ease-smooth-out);
}
.dbd-btn:active { transform: scale(0.98); }
.dbd-btn:focus-visible { outline: 2px solid #d8b46a; outline-offset: 2px; }

.dbd-x { transition: border-color var(--bn-hover-fast) ease, color var(--bn-hover-fast) ease, transform var(--bn-hover-fast) ease; }
.dbd-x:active { transform: scale(0.92); }

.dbd-field { transition: border-color var(--bn-hover-fast) var(--ease-smooth-out); }
.dbd-field:focus { outline: none; border-color: #d8b46a; }

.dbd-back { animation: av4fade 200ms var(--ease-smooth-out) both; }
.dbd-back.out { animation: av4fade 170ms var(--ease-smooth-out) reverse both; }
.dbd-sheet { animation: dbdSheetIn 260ms var(--ease-smooth-out) both; }
.dbd-sheet.out { animation: dbdSheetOut 170ms cubic-bezier(0.4, 0, 1, 1) both; }

/* Az oldalpanel keskeny kijelzőn a teljes szélességet elfoglalja. */
@media (max-width: 760px) {
  .dbd-sheet { width: 100% !important; border-left: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .dbd-sheet, .dbd-sheet.out, .dbd-back, .dbd-back.out {
    animation: av4fade 140ms ease both;
  }
  .dbd-stag > * { animation: av4fade 160ms ease both; animation-delay: 0ms !important; }
  .dbd-card:hover, .dbd-card:active, .dbd-tile:active { transform: none; }
  .dbd-card:hover .dbd-thumb { transform: none; }
}

/* Keskeny kijelzőn az oldalsáv vízszintes, görgethető sávvá lapul. */
@media (max-width: 1024px) {
  .av4-shell { grid-template-columns: minmax(0, 1fr); }

  .av4-side {
    position: sticky;
    top: 64px;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(216, 180, 106, 0.14);
    background: rgba(9, 9, 12, 0.97);
    backdrop-filter: blur(14px);
    z-index: 20;
    padding: 9px 12px;
  }

  .av4-nav {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .av4-nav::-webkit-scrollbar { display: none; }
  .av4-nav > * { flex: none; margin-top: 0 !important; }
  .av4-nav > * button { width: auto !important; padding: 9px 13px !important; }
  .av4-grouplabel { display: none !important; }
  .av4-sidefoot { display: none !important; }
  .av4-split { grid-template-columns: minmax(0, 1fr); }
  .av4-two { grid-template-columns: minmax(0, 1fr); }
  .av4-boards { grid-template-columns: minmax(0, 1fr); }
  .av4-hero { padding: 30px 20px 24px !important; }
  .av4-body { padding: 22px 20px 80px !important; }
}

html.bn-static .av4-view,
html.bn-static .av4-stag > *,
html.bn-static .av4-line,
html.bn-static .av4-area,
html.bn-static .av4-bar {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {

  .av4-view,
  .av4-stag > *,
  .av4-dialog,
  .av4-line,
  .av4-area,
  .av4-bar {
    animation: av4fade 160ms ease both;
    animation-delay: 0ms !important;
  }

  .av4-card:hover { transform: none; }
}

/* ---------- Útmutatók ---------- */
@keyframes gRise {
  from {
    opacity: 0;
    transform: translate3d(0, 26px, 0) scale(0.99);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.g-rev {
  animation: fadeUp 0.52s var(--ease-smooth-out) both;
}

.g-card {
  animation: gRise 0.58s var(--ease-smooth-out) both;
  transition: transform var(--bn-hover) var(--ease-smooth-out),
    border-color 200ms var(--ease-smooth-out),
    box-shadow 200ms var(--ease-smooth-out);
}

.g-card:nth-child(1) { animation-delay: 0.02s; }
.g-card:nth-child(2) { animation-delay: 0.07s; }
.g-card:nth-child(3) { animation-delay: 0.12s; }
.g-card:nth-child(4) { animation-delay: 0.17s; }
.g-card:nth-child(5) { animation-delay: 0.22s; }
.g-card:nth-child(6) { animation-delay: 0.27s; }
.g-card:nth-child(n+7) { animation-delay: 0.32s; }

@media (hover: hover) and (pointer: fine) {
  .g-card:hover {
    transform: translate3d(0, -4px, 0);
    border-color: rgba(216, 180, 106, 0.34);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  }
}

/* Egyetlen oszlop, ha a kiemelt útmutatóhoz nincs videó. */
.g-feat-solo {
  grid-template-columns: 1fr !important;
}

@media (max-width: 900px) {
  .g-feat {
    grid-template-columns: 1fr !important;
  }

  .g-bar {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {

  .g-rev,
  .g-card {
    animation: none;
  }

  .g-card:hover {
    transform: none;
  }
}

/* ---------- Mozgás kikapcsolva ---------- */
html.bn-static *,
html.bn-static *::before,
html.bn-static *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

html.bn-static .bn-ripple {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .bn-ripple {
    display: none !important;
  }
}

/* =====================================================================
   Fokusz — billentyuzetes hasznalathoz
   A :focus-visible csak akkor jelenik meg, amikor a bongeszo szerint a
   fokusz billentyuzetbol jott; egeres kattintasnal nem zavar be.
   Az arany kontur a marka szine, es sotet alapon is jol lathato.
   ===================================================================== */
:where(a, button, input, select, textarea, summary,
  [tabindex], [role="button"], [role="switch"], [role="checkbox"]):focus-visible {
  outline: 2px solid #d8b46a;
  outline-offset: 2px;
}

/* A clip-path a doboz hataran KIVUL rajzolt mindent levag — igy a konturt is.
   Mivel az oldalon szinte minden vezerlo levagott sarku, a fokuszjelzes ezekre
   befele rajzolt gyuruvel keszul: az a levagas belsejeben van, ezert latszik,
   es a sarkoknal maga is koveti a format.
   Az !important azert kell, mert sok elemen beagyazott box-shadow ul, es a
   fokusz lathatosaga nem bukhat el rajta. */
:focus-visible {
  box-shadow: inset 0 0 0 2px #d8b46a !important;
}

/* A modal-fatyol kattinthato, de nem fokuszalhato: Escape zarja. */
.t-modal-backdrop:focus-visible {
  outline: none;
  box-shadow: none;
}

/* =====================================================================
   Tabs sliding — transitions.dev
   A snippetbol a mozgas resze kerult at valtoztatas nelkul: a pill
   szelesseget es eltolasat a JS irja, a tweent a CSS adja. A snippet
   .t-tab szabalya kimaradt: a gombok merete es szine az oldal sajat
   segStyle/optStyle helpereibol jon, es a beagyazott stilus ugyis erosebb.
   A forma a BloodNode sarok-nyelvet koveti a snippet pirula-radiusza helyett.
   ===================================================================== */
:root {
  --tabs-dur: 250ms;
  --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* A sav es a benne csuszo jelolo ugyanazt a format viseli: atlosan ket
   levagott sarok. Korabban savonkent kulonbozott (hol 6, hol 10 px, es csak a
   jobb felso sarok), ezert nem talalkozott a ket alak. */
.t-tabs {
  position: relative;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, var(--cut-sm) 100%, 0 calc(100% - var(--cut-sm)));
}

/* A pill: a width + transform a JS-bol jon inline, hogy az atmenet a
   korabbi es a kovetkezo mert pozicio kozott fusson. */
.t-tabs-pill {
  position: absolute;
  top: 3px;
  left: 0;
  height: 30px;
  width: 0;
  background: var(--seg-pill, #c8102e);
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, var(--cut-sm) 100%, 0 calc(100% - var(--cut-sm)));
  transform: translateX(0);
  transition:
    transform var(--tabs-dur) var(--tabs-ease),
    width var(--tabs-dur) var(--tabs-ease);
  will-change: transform, width;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
}

.t-tabs-pill.is-ready {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .t-tabs-pill {
    transition: none !important;
  }
}

/* =====================================================================
   Toast — transitions.dev
   A snippet valtoztatas nelkul; ala kerul a BloodNode sajat kulseje
   (levagott sarok, sotet felulet, arany kiemeles).
   ===================================================================== */
:root {
  --toast-open: 350ms;
  --toast-close: 250ms;
  --toast-distance: 16px;
  --toast-blur: 2px;
  --toast-scale: 0.97;
  --toast-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-toast {
  opacity: 0;
  transform: translateY(var(--toast-distance)) scale(var(--toast-scale));
  filter: blur(var(--toast-blur));
  will-change: transform, opacity, filter;
  transition:
    opacity var(--toast-close) var(--toast-ease),
    transform var(--toast-close) var(--toast-ease),
    filter var(--toast-close) var(--toast-ease);
}

.t-toast.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition:
    opacity var(--toast-open) var(--toast-ease),
    transform var(--toast-open) var(--toast-ease),
    filter var(--toast-open) var(--toast-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-toast { transition: none !important; }
}

/* ---- A BloodNode kulseje ---- */
.bn-toast-layer {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  pointer-events: none;
}

.t-toast {
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: min(420px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 13px 18px;
  background: linear-gradient(180deg, #14151b, #0b0b0f);
  border: 1px solid rgba(216, 180, 106, 0.3);
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, 0 100%);
  color: #f4f1e9;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.t-toast[data-tone="error"] {
  border-color: rgba(200, 16, 46, 0.5);
}

/* A gyemant a lap tobbi jelolesevel egyezik. */
.t-toast::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: #d8b46a;
}

.t-toast[data-tone="error"]::before {
  background: #c8102e;
}

/* =====================================================================
   Skeleton — transitions.dev
   A snippetbol a pulzalo resz kerult at valtoztatas nelkul. A cross-fade
   fele kimaradt: ahhoz a csontvaznak es a valodi tartalomnak egyszerre
   kell a DOM-ban ulnie, ez az oldal viszont sc-if-fel az egyiket vagy a
   masikat rendereli — a ket reteg egymasra pakolasa az osszes betoltodo
   lap atszabasat jelentene.
   ===================================================================== */
:root {
  --pulse-dur: 1000ms;
  --pulse-count: infinite;
  --pulse-min: 0.5;
  --reveal-dur: 400ms;
  --reveal-blur: 2px;
  --reveal-ease: ease-in-out;
}

/* Pulse: place the animation on the bar/avatar children, not
   on the skeleton itself, so the skeleton's opacity / filter
   stay free for the cross-fade transition above. */
.t-skel-skeleton.is-pulsing > * {
  animation: t-skel-pulse var(--pulse-dur) ease-in-out var(--pulse-count);
}

@keyframes t-skel-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: var(--pulse-min); }
}

@media (prefers-reduced-motion: reduce) {
  .t-skel-skeleton.is-pulsing > * { animation: none !important; }
}

/* ---- A BloodNode csontvaz-sora: egy kodsor korvonala ---- */
.bn-skel-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  clip-path: polygon(0 0, calc(100% - var(--cut-md)) 0, 100% var(--cut-md), 100% 100%, 0 100%);
}

.bn-skel-row > * {
  display: block;
  background: rgba(255, 255, 255, 0.07);
}

.bn-skel-mark {
  flex: none;
  width: 34px;
  height: 34px;
  clip-path: polygon(0 0, calc(100% - var(--cut-xs)) 0, 100% var(--cut-xs), 100% 100%, 0 100%);
}

.bn-skel-line {
  height: 11px;
}

.bn-skel-chip {
  flex: none;
  margin-left: auto;
  width: 74px;
  height: 22px;
  clip-path: polygon(0 0, calc(100% - var(--cut-xs)) 0, 100% var(--cut-xs), 100% 100%, 0 100%);
}

/* A pulzalast a snippet a csontvaz kozvetlen gyerekeire teszi — itt ezek
   maguk a sorok —, ezert a lepcsozes is oda kerul. */
.t-skel-skeleton > .bn-skel-row:nth-child(2) { animation-delay: 120ms; }
.t-skel-skeleton > .bn-skel-row:nth-child(3) { animation-delay: 240ms; }
.t-skel-skeleton > .bn-skel-row:nth-child(4) { animation-delay: 360ms; }

/* =====================================================================
   Perk-fiok zarasa
   A transitions.dev panel-reveal snippetje fuggolegesen csuszik; ez a fiok
   viszont a jobb szelrol jon (lasd a drawerSlide keyframe-et), ezert a
   snippet forditas nelkul nem illik ra — a fuggoleges mozgas itt rontana a
   felulet logikajat. A zarast a modallal kozos gepezet vezenyli, de a fiok
   sajat, vizszintes iranyaval es a snippet cross-blur otletevel.
   ===================================================================== */
:root {
  --panel-close-dur: 350ms;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-drawer.is-closing {
  transform: translateX(66px);
  opacity: 0;
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition:
    transform var(--panel-close-dur) var(--panel-ease),
    opacity var(--panel-close-dur) var(--panel-ease),
    filter var(--panel-close-dur) var(--panel-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-drawer.is-closing { transition: none !important; }
}

/* =====================================================================
   Like gomb — transitions.dev
   A snippet valtoztatas nelkul. Ala kerul a BloodNode szamlaloja: a szam
   akkor is olvashato marad, ha meg senki nem szivezte meg a listat.
   ===================================================================== */
:root {
  --like-color: #c8102e;
  /* A snippet #f40051-et hoz; itt a marka voros arnyalata all a helyen. */
  --like-fill: 150ms;
  --like-pop: 350ms;
  --like-pop-ease: cubic-bezier(0.34, 1.96, 0.64, 1);
  --like-particle-dur: 600ms;
  --like-particle-dist: 20px;
  --like-particle-size: 2.5px;
  --like-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-like-heart { color: currentColor; transition: color var(--like-fill) var(--like-ease); }

.t-like-heart path {
  fill: transparent; stroke: currentColor;
  transition: fill var(--like-fill) var(--like-ease), stroke var(--like-fill) var(--like-ease);
}

.t-like[data-liked="true"] .t-like-heart { color: var(--like-color); }
.t-like[data-liked="true"] .t-like-heart path { fill: currentColor; }

/* Pop scale lives on an HTML wrapper, never the <svg> itself:
   transforming an inline SVG makes Chromium rasterise it at 1x
   (pixelated on hi-DPI). Wrapping keeps the vector crisp. */
.t-like[data-liked="true"] .t-like-icon { animation: t-like-pop var(--like-pop) var(--like-pop-ease); }

@keyframes t-like-pop { 0% { transform: scale(1); } 30% { transform: scale(0.82); } 100% { transform: scale(1); } }

/* Particle burst — 8 dots flung along per-particle vectors. */
.t-like-particles { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; color: var(--like-color); }

.t-like-particles i {
  position: absolute;
  left: calc(var(--like-particle-size) * var(--psize, 1) / -2);
  top: calc(var(--like-particle-size) * var(--psize, 1) / -2);
  width: calc(var(--like-particle-size) * var(--psize, 1));
  height: calc(var(--like-particle-size) * var(--psize, 1));
  border-radius: 50%; background: currentColor; opacity: 0;
}

@keyframes t-like-burst {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  20%  { opacity: 1; transform: translate(calc(var(--px) * 0.25), calc(var(--py) * 0.25)) scale(1); }
  100% { opacity: 0; transform: translate(var(--px), var(--py)) scale(var(--p-end-scale, 0.6)); }
}

.t-like.is-bursting .t-like-particles i {
  animation: t-like-burst var(--pdur, var(--like-particle-dur)) ease-out var(--pdelay, 0ms) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .t-like-icon, .t-like-particles i { animation: none !important; }
}

/* ---- A BloodNode kulseje ---- */
.t-like:hover { color: #8b98ab; }

.t-like[data-liked="true"] { color: var(--like-color); }

.t-like-count {
  min-width: 1ch;
  /* A szamlalo ne ugraljon, amikor 9-rol 10-re valt. */
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   Error state shake — transitions.dev
   A snippetbol a razas es a keret-atmenet kerult at valtoztatas nelkul.
   A hibauzenet feltarasa (.t-error-msg) kimaradt: azt az oldal sc-if-fel
   csatolja fel, a snippet viszont allandoan a DOM-ban ulo, elrejtett
   uzenetet feltetelez — az itt allando ures helyet hagyna az urlapon.
   ===================================================================== */
:root {
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --revert-hold: 3000ms;
  --revert-dur: 280ms;
}

/* Border-color tween. Define your input's default / focused
   / error border-color in your own component CSS — this rule
   only owns the interpolation. Use a constant border-width
   across states so the tween never shifts inner content. */
.t-input {
  transition: border-color 150ms ease-out;
  will-change: transform;
}

.t-input.is-error {
  /* Error border auto-reverts on the hold timer, so the
     fade-out uses the slower revert duration (matches the
     message fade). */
  transition: border-color var(--revert-dur, 280ms) ease-out;
}

/* Multi-segment keyframe with per-stop easing so each leg
   of the shake follows its own cubic-bezier independently.
   %-stops are cumulative durations as a fraction of the
   total (80, 60, 80, 60 = 280ms): 28.57%, 57.14%, 78.57%,
   100%. Recompute if any segment duration changes. */
.t-input.is-shaking {
  animation: t-input-shake calc(
      var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2
    ) linear;
}

@keyframes t-input-shake {
  0%      { transform: translateX(0);                                animation-timing-function: var(--shake-ease); }
  28.57%  { transform: translateX(var(--shake-distance));            animation-timing-function: var(--shake-ease); }
  57.14%  { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); }
  78.57%  { transform: translateX(var(--shake-overshoot));           animation-timing-function: var(--shake-ease); }
  100%    { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .t-input { animation: none !important; transform: none !important; }
}

/* ---- A BloodNode kulseje: hibas mezo kerete ---- */
.fld.t-input.is-error {
  border-color: rgba(200, 16, 46, 0.65);
}

/* =====================================================================
   Number pop-in — transitions.dev
   A snippet valtoztatas nelkul. A szamjegyeket az alkalmazas rendereli
   kulon elemekbe (sc-for), igy a React birtokolja oket — a vezerlo csak
   az .is-animating osztalyt kapcsolja, amikor az ertek valtozik.
   ===================================================================== */
:root {
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
}

@keyframes t-digit-pop-in {
  0%   {
    transform: translate(
      calc(var(--digit-distance) * var(--digit-dir-x)),
      calc(var(--digit-distance) * var(--digit-dir-y))
    );
    opacity: 0;
    filter: blur(var(--digit-blur));
  }
  100% { transform: translate(0, 0); opacity: 1; filter: blur(0); }
}

.t-digit-group {
  display: inline-flex;
  align-items: baseline;
}

.t-digit {
  display: inline-block;
  will-change: transform, opacity, filter;
}

.t-digit-group.is-animating .t-digit {
  animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
}

.t-digit-group.is-animating .t-digit[data-stagger="1"] {
  animation-delay: var(--digit-stagger);
}

.t-digit-group.is-animating .t-digit[data-stagger="2"] {
  animation-delay: calc(var(--digit-stagger) * 2);
}

@media (prefers-reduced-motion: reduce) {
  .t-digit-group .t-digit { animation: none !important; }
}

/* =====================================================================
   Admin — kodok lap
   A panelek, a szerkeszto es a lista kozos nyelve. Sajat osztalyok, mert
   ez a lap sok apro elembol all, es beagyazott stilussal olvashatatlan
   lenne a sablon.
   ===================================================================== */
.bn-panel {
  background: linear-gradient(180deg, #12131a, #0a0a0d);
  border: 1px solid rgba(255, 255, 255, 0.08);
  clip-path: polygon(0 0, calc(100% - var(--cut-md)) 0, 100% var(--cut-md), 100% 100%, 0 100%);
  margin-bottom: 18px;
}

.bn-panel-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 20px;
  background: linear-gradient(90deg, rgba(200, 16, 46, 0.16), transparent 70%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.bn-panel-bar {
  display: block;
  width: 16px;
  height: 3px;
  flex: none;
  background: #c8102e;
  transform: skewX(-24deg);
}

.bn-panel-bar-gold {
  background: #d8b46a;
}

.bn-panel-title {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f4f1e9;
}

.bn-panel-meta {
  margin-left: auto;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: #8b98ab;
}

.bn-panel-body {
  padding: 18px 20px 20px;
}

.bn-panel-edit {
  border-color: rgba(216, 180, 106, 0.3);
}

/* ---------- Forrasok: Discord + beillesztes egymas mellett ---------- */
.bn-src-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  align-items: start;
}

.bn-src {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px 16px;
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid rgba(255, 255, 255, 0.06);
  clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, 0 100%);
}

.bn-src-top {
  display: flex;
  align-items: center;
  gap: 9px;
}

.bn-src-name {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f4f1e9;
}

.bn-src-when {
  margin-left: auto;
  font-size: 11px;
  color: #5f636e;
}

.bn-src-note {
  font-size: 12.5px;
  line-height: 1.5;
  color: #8b98ab;
}

.bn-dot {
  width: 6px;
  height: 6px;
  flex: none;
  background: #5f636e;
  transform: rotate(45deg);
}

.bn-dot-on {
  background: #3fae5a;
  box-shadow: 0 0 9px rgba(63, 174, 90, 0.75);
}

.bn-dot-bad {
  background: #c8102e;
  box-shadow: 0 0 9px rgba(200, 16, 46, 0.75);
}

/* ---------- Beviteli mezok ---------- */
.bn-ta,
.bn-i {
  width: 100%;
  box-sizing: border-box;
  background: #0a0a0c;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f4f1e9;
  padding: 11px 13px;
  font-size: 13.5px;
  font-family: inherit;
  line-height: 1.5;
  outline: none;
  clip-path: polygon(0 0, calc(100% - var(--cut-xs)) 0, 100% var(--cut-xs), 100% 100%, 0 100%);
  transition: border-color var(--bn-hover-fast) ease;
}

.bn-ta {
  resize: vertical;
}

.bn-ta:focus,
.bn-i:focus {
  border-color: rgba(216, 180, 106, 0.55);
}

.bn-i[readonly] {
  color: #8b98ab;
  background: rgba(255, 255, 255, 0.02);
}

.bn-i-code {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
}

/* ---------- Gombok ---------- */
.bn-btn {
  align-self: flex-start;
  border: 0;
  padding: 11px 20px;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, var(--cut-sm) 100%, 0 calc(100% - var(--cut-sm)));
  transition: background var(--bn-hover-fast) ease, border-color var(--bn-hover-fast) ease, color var(--bn-hover-fast) ease;
}

.bn-btn-primary {
  background: #c8102e;
  color: #fff;
  font-weight: 700;
  /* Ugyanaz a piros hangsuly, mint az "+ Uj kihivas" gombon a kihivasoknal. */
  box-shadow: 0 10px 26px rgba(200, 16, 46, 0.28);
}

.bn-btn-primary:hover {
  background: #e2182f;
}

.bn-btn-gold {
  background: transparent;
  border: 1px solid rgba(216, 180, 106, 0.5);
  color: #d8b46a;
}

.bn-btn-gold:hover {
  border-color: rgba(216, 180, 106, 0.9);
  color: #ecd39a;
}

.bn-btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #c9d2de;
}

.bn-btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.34);
  color: #f4f1e9;
}

.bn-btn-quiet {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #8b98ab;
}

.bn-btn-quiet:hover {
  border-color: rgba(255, 255, 255, 0.28);
  color: #c9d2de;
}

/* ---------- Szerkeszto urlap ---------- */
.bn-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px 16px;
}

.bn-f {
  display: block;
  min-width: 0;
}

.bn-f-wide {
  grid-column: span 2;
}

@media (max-width: 620px) {
  .bn-f-wide {
    grid-column: span 1;
  }
}

.bn-l {
  display: block;
  font-family: "Oswald", sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #5f636e;
  margin-bottom: 7px;
}

.bn-seg {
  position: relative;
  z-index: 1;
  background: transparent;
  border: 0;
  padding: 9px 15px;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8b8f99;
  cursor: pointer;
}

.bn-seg-on {
  color: #fff;
}

.bn-form-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.bn-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: #8b98ab;
  font-size: 12.5px;
  cursor: pointer;
  user-select: none;
}

/* ---------- Lista fejlec ---------- */
.bn-list-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 22px 0 12px;
}

.bn-search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 220px;
  max-width: 400px;
  background: #0a0a0c;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 13px;
  clip-path: polygon(0 0, calc(100% - var(--cut-xs)) 0, 100% var(--cut-xs), 100% 100%, 0 100%);
}

.bn-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: #f4f1e9;
  font-size: 13.5px;
  font-family: inherit;
}

/* ---------- Forras-sav: Discord-allapot + a lekeres gomb ----------
   Egyetlen sor, mert egyetlen muvelet van rajta. A jobb szelen allo gomb
   mindig ugyanott van, akarmilyen hosszu az allapotszoveg. */
.bn-srcbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 16px;
  background: linear-gradient(90deg, rgba(88, 101, 242, 0.12), rgba(255, 255, 255, 0.022) 55%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, var(--cut-sm) 100%, 0 calc(100% - var(--cut-sm)));
}

.bn-srcbar .bn-src-note {
  flex: 1 1 240px;
  min-width: 0;
}

.bn-srcbar .bn-src-when {
  margin-left: 0;
}

.bn-srcbar .bn-btn {
  align-self: center;
  margin-left: auto;
}

.bn-btn-sm {
  padding: 9px 15px;
  font-size: 10.5px;
}

/* ---------- Szuro-fulek: egyben szamlalok is ---------- */
.bn-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.bn-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #8b98ab;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - var(--cut-xs)) 0, 100% var(--cut-xs), 100% 100%, var(--cut-xs) 100%, 0 calc(100% - var(--cut-xs)));
  transition: border-color var(--bn-hover-fast) ease, color var(--bn-hover-fast) ease, background var(--bn-hover-fast) ease;
}

.bn-filter:hover {
  border-color: rgba(255, 255, 255, 0.26);
  color: #e9e6df;
}

.bn-filter-on {
  background: rgba(200, 16, 46, 0.14);
  border-color: rgba(200, 16, 46, 0.5);
  color: #f4f1e9;
}

.bn-filter-n {
  font-size: 10px;
  color: #5f636e;
  font-variant-numeric: tabular-nums;
}

.bn-filter-on .bn-filter-n {
  color: #e2727a;
}

/* A megerositetlenek szama arany, hogy a szemed odaakadjon. */
.bn-filter-warn .bn-filter-n {
  color: #d8b46a;
}

/* Az uj kod gomb a sor jobb szelere kerul, a szuroktol elvalasztva. */
.bn-list-head .bn-btn-primary {
  margin-left: auto;
}

/* ---------- Ures allapot ---------- */
.bn-empty {
  padding: 34px 20px;
  text-align: center;
  color: #8b98ab;
  font-size: 13.5px;
  line-height: 1.6;
  background: rgba(255, 255, 255, 0.015);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, var(--cut-sm) 100%, 0 calc(100% - var(--cut-sm)));
}

/* ---------- Sorok ---------- */
.bn-rows {
  display: grid;
  gap: 7px;
}

/* Racs, nem flexbox: a jelveny, a datum es a gombok minden sorban ugyanabban
   az oszlopban allnak. Flexboxszal a tartalom hossza tolta oket, es lefele
   olvasva osszevissza ugrottak. */
.bn-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px 104px 76px;
  align-items: center;
  gap: 16px;
  padding: 13px 16px;
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid rgba(255, 255, 255, 0.06);
  clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, 0 100%);
  transition: border-color var(--bn-hover-fast) ease, background var(--bn-hover-fast) ease;
}

.bn-row:hover {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}

/* A megerositetlen sort egy vekony arany el jelzi — ezekkel van dolgod. */
.bn-row-warn {
  box-shadow: inset 2px 0 0 #d8b46a;
}

.bn-row-dim {
  opacity: 0.55;
}

.bn-row-main {
  min-width: 0;
  flex: 1;
}

.bn-row-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bn-code {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.06em;
  color: #f4f1e9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bn-row-sub {
  margin-top: 3px;
  font-size: 12.5px;
  color: #8b98ab;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A jelveny a sajat oszlopaban, balra igazitva — igy a szoveguk eleje
   egy vonalban all akkor is, ha kulonbozo hosszuak. */
.bn-chip-cell {
  justify-self: start;
}

.bn-when {
  font-size: 12px;
  color: #5f636e;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.bn-chip {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 9px;
  flex: none;
  clip-path: polygon(0 0, calc(100% - var(--cut-xs)) 0, 100% var(--cut-xs), 100% 100%, 0 100%);
}

.bn-chip-live {
  color: #8fd3a3;
  background: rgba(63, 174, 90, 0.12);
}

.bn-chip-gold {
  color: #d8b46a;
  background: rgba(216, 180, 106, 0.12);
}

.bn-chip-dead {
  color: #8b8f99;
  background: rgba(255, 255, 255, 0.05);
}

.bn-chip-warn {
  color: #d8b46a;
  background: rgba(216, 180, 106, 0.12);
}

/* ---------- Sor-muveletek ---------- */
.bn-row-acts {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.bn-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #8b8f99;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - var(--cut-xs)) 0, 100% var(--cut-xs), 100% 100%, var(--cut-xs) 100%, 0 calc(100% - var(--cut-xs)));
  transition: border-color var(--bn-hover-fast) ease, color var(--bn-hover-fast) ease;
}

.bn-icon:hover {
  border-color: rgba(216, 180, 106, 0.6);
  color: #d8b46a;
}

.bn-icon-ok:hover {
  border-color: rgba(63, 174, 90, 0.7);
  color: #8fd3a3;
}

.bn-icon-bad:hover {
  border-color: rgba(200, 16, 46, 0.7);
  color: #e2727a;
}

/* Keskenyen a kod es a jutalom kapja a teljes elso sort, alatta egy sorban a
   jelveny, a datum es a gombok. Minden elem sajat oszlopot kap, hogy ne
   kerulhessenek egymasra. */
@media (max-width: 720px) {
  .bn-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 9px 12px;
  }

  .bn-row-main {
    grid-column: 1 / -1;
  }

  .bn-chip-cell {
    grid-column: 1;
  }

  .bn-when {
    grid-column: 2;
    text-align: left;
  }

  .bn-row-acts {
    grid-column: 3;
  }
}


/* ---------- Kihívás-fa ----------
   A kinyíló csomópont villanása (bnUnlock és a két fényréteg), meg a háttér
   lassú lélegzése. A vászon többi mozgása inline transitionnel megy. */
@keyframes bnUnlock {
  0% { transform: scale(.94) rotateZ(-.8deg); filter: brightness(.5) saturate(0); }
  14% { transform: scale(.97); filter: brightness(3.4) saturate(.2); }
  30% { filter: brightness(1.5) saturate(1.1); }
  46% { transform: scale(1.07) rotateZ(.6deg); }
  62% { transform: scale(1.01) rotateZ(-.35deg); }
  78% { transform: scale(1.035) rotateZ(.18deg); }
  100% { transform: none; filter: none; }
}

@keyframes bnUnlockShine {
  0% { transform: scale(.5) rotate(-18deg); opacity: 0; border-radius: 62% 38% 46% 54%/58% 44% 56% 42%; }
  22% { opacity: .95; }
  55% { border-radius: 38% 62% 58% 42%/44% 62% 38% 56%; }
  100% { transform: scale(1.8) rotate(26deg); opacity: 0; border-radius: 52% 48% 36% 64%/62% 38% 62% 38%; }
}

@keyframes bnUnlockBlob {
  0% { transform: scale(.55) rotate(8deg); opacity: 0; border-radius: 58% 42% 62% 38%/46% 58% 42% 54%; }
  24% { opacity: .9; }
  60% { border-radius: 42% 58% 38% 62%/58% 42% 60% 40%; }
  100% { transform: scale(1.85) rotate(-20deg); opacity: 0; border-radius: 64% 36% 54% 46%/38% 62% 40% 60%; }
}

@keyframes bnFog {
  0% { transform: translate3d(-4%, 0, 0) scale(1.05); }
  50% { transform: translate3d(4%, -2%, 0) scale(1.12); }
  100% { transform: translate3d(-4%, 0, 0) scale(1.05); }
}

@keyframes bnEmber {
  0%, 100% { opacity: .45; }
  50% { opacity: .95; }
}

/* A kihívások admin lapon a fa tölti ki a helyet: nincs körülötte doboz, sem
   belső margó. A szűk képernyős szabály !important-tal ír, ezért ez is azzal. */
.av4-body.av4-body--bare { padding: 0 !important; }

/* A vászon maga kezeli a húzást; a lap ne ugráljon alatta. */
.kh-tree { touch-action: none; }

/* A kártya átfordul, ha az egér a dobozában van. A hovert szándékosan az álló
   doboz figyeli és nem a forgó lap: a lap forgás közben — főleg a sarkain —
   kifordul az egér alól, elvesztette volna a hovert, visszafordult volna, és ez
   végtelen oda-vissza villogást adott. A zárolt kártyák nem kapják meg az
   osztályt, így azok nem fordulnak. */
.kh-tree-card:hover .kh-tree-flip { transform: rotateY(180deg) translateZ(0); }

/* A lapváltás alap-animációja 1.012-re nagyít. Egy 100vh magas vásznon ez
   25 pixelnyi fölösleges görgetést hagy a lap alján, ezért a fa csak áttűnik. */
.kh-tree.bn-view { animation: bnTreeIn 0.36s var(--bn-ease) both; }

@keyframes bnTreeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .kh-tree *,
  .kh-tree *::before,
  .kh-tree *::after { animation: none !important; }
}

/* ---------- Perk gyűjtemény ----------
   A gyűjtemény-képernyő saját mozgásai. A "bnc" előtag szándékos: a lap
   kilépő animációi már foglalják a bnFade/bnPop neveket, és egy névütközés
   ott csendben átírná a fiók záró mozgását. */
@keyframes bncPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.95; }
}

@keyframes bncSlotIn {
  0% { transform: scale(0.72); opacity: 0; }
  55% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes bncBadgeIn {
  0% { transform: scale(0.4) rotate(-12deg); opacity: 0; }
  60% { transform: scale(1.18) rotate(3deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes bncBarUp {
  from { transform: translateY(100%); }
  to { transform: none; }
}

@keyframes bncCmpIn {
  from { transform: translateY(14px) scale(0.96); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* A gyűjtemény alsó sávjai a lap aljára ülnek. A rács alsó térköze tartja
   a helyüket, hogy a legalsó kártya gombjait ne takarják el. */
.bn-collection-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .bn-collection-dock *,
  .bn-cgrid article * { animation: none !important; }
}

/* Keskeny kijelzőn az adatlap két hasábja egymás alá kerül: fölül a portré,
   alatta a leírás. A build négy slotja pedig két sorba tördelődik, hogy a
   perk neve olvasható maradjon. */
@media (max-width: 760px) {
  .bn-perk-sheet { grid-template-columns: minmax(0, 1fr) !important; }
  .bn-perk-sheet > div:first-child { min-height: 240px !important; }
  /* A négy slot rácsba áll: kettő egy sorban. */
  .bn-cslots { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
}

/* Telefonon mind a négy slot egy sorba fér, de már csak az ikonok: a név
   ekkora helyen úgyis csak három betűig jutna. */
@media (max-width: 460px) {
  .bn-cslots { grid-template-columns: repeat(4, 1fr); }
  .bn-cslots > div { justify-content: center; }
  .bn-cslots > div > div:last-child { display: none !important; }
}