/* =========================================================
   NO_SA – Főoldal (Home) egyedi stílusai
   ========================================================= */

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(28px, 5vw, 64px) 0 clamp(40px, 6vw, 72px); overflow: hidden; isolation: isolate; }
.hero::before { /* parázsfény a logó mögött */
  content: ""; position: absolute; z-index: -1; left: 50%; top: 42%; width: min(900px, 140vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(208,9,9,.32) 0%, rgba(122,19,9,.18) 30%, transparent 62%);
  animation: ember 5s ease-in-out infinite;
}
.hero::after { /* szikrák */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 80%, #ff6a3d, transparent),
    radial-gradient(1.5px 1.5px at 22% 60%, #ff3b2a, transparent),
    radial-gradient(1px 1px at 78% 70%, #ff6a3d, transparent),
    radial-gradient(1.5px 1.5px at 88% 40%, #ff3b2a, transparent),
    radial-gradient(1px 1px at 65% 85%, #ffa070, transparent),
    radial-gradient(1px 1px at 35% 90%, #ffa070, transparent);
  animation: sparks 9s linear infinite;
}
@keyframes ember { 0%,100% { opacity: .8; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.05); } }
@keyframes sparks { from { transform: translateY(0); } to { transform: translateY(-60px); opacity: 0; } }

.hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(20px, 4vw, 56px); }
.hero-logo { position: relative; justify-self: center; width: min(100%, 520px); }
.hero-logo img { width: 100%; height: auto; filter: drop-shadow(0 0 28px rgba(208,9,9,.45)) drop-shadow(0 18px 30px rgba(0,0,0,.7)); animation: logo-glow 4s ease-in-out infinite; }
@keyframes logo-glow { 0%,100% { filter: drop-shadow(0 0 22px rgba(208,9,9,.38)) drop-shadow(0 18px 30px rgba(0,0,0,.7)); } 50% { filter: drop-shadow(0 0 40px rgba(243,40,39,.6)) drop-shadow(0 18px 30px rgba(0,0,0,.7)); } }

.hero-copy .badge { margin-bottom: 18px; }
.hero-title {
  font: 400 clamp(3.4rem, 9vw, 7rem)/1.08 var(--font-display); margin: 0; padding-bottom: .06em; letter-spacing: .03em;
  background: linear-gradient(180deg, #ff5a4a 0%, var(--red-500) 48%, var(--red-700) 52%, #b4120a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.08);
  filter: drop-shadow(0 4px 0 #2a0303) drop-shadow(0 0 22px rgba(208,9,9,.35));
}
.hero-slogan {
  display: inline-block; margin: 10px 0 22px; padding: 6px 20px 4px;
  font: 400 clamp(1.25rem, 2.6vw, 1.9rem)/1.2 var(--font-brush); color: var(--red-400);
  background: linear-gradient(180deg, #2b2a2f, var(--graphite));
  border-top: 1px solid var(--steel-700); border-bottom: 1px solid #0b0b0d;
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 4% 96%, 0 50%);
  transform: rotate(-2deg);
}
.hero-lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--bone); max-width: 52ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* Következő manőver visszaszámláló */
.next-op {
  margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding: 12px 16px; border: 1px solid var(--red-900); background: rgba(92,2,3,.18);
  border-left: 3px solid var(--red-500);
}
.next-op .label { font: 700 .8rem/1.2 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--steel-400); }
.next-op .what { font: 700 1.05rem/1.2 var(--font-ui); color: var(--white); letter-spacing: .03em; }
.countdown { display: flex; gap: 6px; font: 700 1.25rem/1 var(--font-ui); color: var(--red-400); font-variant-numeric: tabular-nums; }
.countdown span small { font-size: .7rem; color: var(--steel-400); margin-left: 2px; }

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-logo { width: min(78%, 380px); }
  .hero-lead { margin-inline: auto; }
  .hero-cta, .next-op { justify-content: center; }
}

/* ---------- Statisztika sáv ---------- */
.stats { border-block: 1px solid var(--steel-700); background: linear-gradient(90deg, rgba(92,2,3,.25), rgba(32,31,35,.6), rgba(92,2,3,.25)); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 22px 16px; text-align: center; border-right: 1px solid var(--steel-700); }
.stat:last-child { border-right: 0; }
.stat b { display: block; font: 400 clamp(1.7rem, 3.4vw, 2.5rem)/1 var(--font-display); color: var(--white); }
.stat b em { font-style: normal; color: var(--red-400); }
.stat span { display: block; margin-top: 8px; font: 600 .82rem/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--steel-400); }
@media (max-width: 760px) { .stats-grid { grid-template-columns: 1fr 1fr; } .stat:nth-child(2) { border-right: 0; } .stat:nth-child(-n+2) { border-bottom: 1px solid var(--steel-700); } }

/* ---------- Bejelentések ---------- */
.announce { display: grid; gap: var(--gap); grid-template-columns: 1.35fr 1fr; }
@media (max-width: 900px) { .announce { grid-template-columns: 1fr; } }
.announce-main { border-color: var(--red-700); background: linear-gradient(160deg, rgba(122,19,9,.35), var(--graphite) 45%, #17161a); }
.announce-main h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.announce-side { display: grid; gap: var(--gap); align-content: start; }
.author { display: flex; align-items: center; gap: 10px; font: 600 .9rem/1.2 var(--font-ui); letter-spacing: .04em; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; background: var(--red-900); border: 1px solid var(--red-500); color: var(--white); font: 700 .9rem/1 var(--font-ui); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.check-list { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 8px; }
.check-list li { display: flex; gap: 10px; align-items: baseline; }
.check-list li .gem { transform: rotate(45deg) translateY(-2px); }

/* ---------- Klánbemutató ---------- */
.about { display: grid; gap: var(--gap); grid-template-columns: 1.1fr 1fr 1fr; }
@media (max-width: 1000px) { .about { grid-template-columns: 1fr 1fr; } .about > :first-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .about { grid-template-columns: 1fr; } }
.about-intro p { font-size: 1.05rem; }
.req-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--steel-700); }
.req-row:last-child { border-bottom: 0; }
.req-row b { color: var(--white); font: 700 1rem/1.3 var(--font-ui); letter-spacing: .03em; text-align: right; }
.icon-title { display: flex; align-items: center; gap: 10px; }
.icon-title svg { width: 22px; height: 22px; color: var(--red-400); }

/* ---------- Előnézeti blokkok ---------- */
.preview-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(12, 1fr); }
.pv-ops { grid-column: span 7; }
.pv-skirmish { grid-column: span 5; }
.pv-news, .pv-events, .pv-tournaments, .pv-results { grid-column: span 6; }
@media (max-width: 1080px) { .pv-ops, .pv-skirmish { grid-column: 1 / -1; } }
@media (max-width: 760px) { .preview-grid > * { grid-column: 1 / -1 !important; } }

.pv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.pv-head h3 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 1.25rem; }
.pv-head h3 svg { width: 22px; height: 22px; color: var(--red-400); }
.pv-more { font: 700 .85rem/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; }
.pv-more svg { width: 15px; height: 15px; transition: transform var(--t-fast); }
.pv-more:hover svg { transform: translateX(3px); }

.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: 12px 0; border-top: 1px solid rgba(62,60,66,.7); }
.list > li:first-child { border-top: 0; padding-top: 2px; }
.li-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 600 .78rem/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--steel-400); margin-bottom: 4px; }
.li-title { font: 700 1.05rem/1.3 var(--font-ui); color: var(--white); letter-spacing: .02em; }
.li-actions { margin-top: 8px; }
.date-chip { display: grid; place-items: center; min-width: 54px; padding: 6px 4px; background: var(--black-2); border: 1px solid var(--steel-700); text-align: center; }
.date-chip b { font: 400 1.35rem/1 var(--font-display); color: var(--white); }
.date-chip small { font: 700 .7rem/1 var(--font-ui); letter-spacing: .1em; color: var(--red-400); text-transform: uppercase; margin-top: 3px; }
.row-with-date { display: flex; gap: 14px; align-items: center; }

/* Hadművelet blokk – a legfontosabb rész */
.pv-ops { border-color: var(--red-700); background: linear-gradient(160deg, rgba(122,19,9,.28), var(--graphite) 40%, #17161a); }
.op-day { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.op-time { font: 400 1.6rem/1 var(--font-display); color: var(--white); }
.op-time small { display: block; font: 600 .75rem/1.3 var(--font-ui); letter-spacing: .1em; color: var(--steel-400); text-transform: uppercase; margin-top: 4px; }
.tank-reqs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.rsvp { margin-top: 6px; }
.rsvp-bar { display: flex; height: 8px; background: var(--black-2); border: 1px solid var(--steel-700); overflow: hidden; }
.rsvp-bar i { display: block; height: 100%; }
.rsvp-bar .ok { background: var(--ok); } .rsvp-bar .maybe { background: var(--maybe); } .rsvp-bar .no { background: var(--no); }
.rsvp-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 7px; font: 600 .85rem/1.2 var(--font-ui); letter-spacing: .03em; }
.rsvp-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; transform: rotate(45deg); }
.rsvp-legend .ok::before { background: var(--ok); } .rsvp-legend .maybe::before { background: var(--maybe); } .rsvp-legend .no::before { background: var(--no); }
.rsvp-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rsvp-buttons .btn[data-v="ok"]:hover, .rsvp-buttons .btn[data-v="ok"].active { --c: var(--ok); background: rgba(63,163,77,.15); }
.rsvp-buttons .btn[data-v="maybe"]:hover, .rsvp-buttons .btn[data-v="maybe"].active { --c: var(--maybe); background: rgba(217,154,30,.13); }
.rsvp-buttons .btn[data-v="no"]:hover, .rsvp-buttons .btn[data-v="no"].active { --c: var(--red-500); background: rgba(208,9,9,.13); }

/* Hírek */
.news-src { font: 600 .78rem/1.2 var(--font-ui); letter-spacing: .06em; color: var(--steel-500); text-transform: uppercase; }
.news-note { margin: 12px 0 0; font-size: .82rem; color: var(--steel-500); }

/* Eredmények */
.result-row { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.result-rank { min-width: 64px; text-align: center; font: 400 1.5rem/1 var(--font-display); color: var(--red-400); padding: 8px 4px; border: 1px solid var(--red-900); background: rgba(92,2,3,.2); }

/* CTA szalag */
.cta-band { position: relative; overflow: hidden; text-align: center; padding: clamp(36px, 5vw, 56px) var(--gap); border: 1px solid var(--red-700); background: radial-gradient(600px 220px at 50% 0%, rgba(208,9,9,.3), transparent 70%), var(--graphite); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 50% 100%, 0 calc(100% - 22px)); }
.cta-band h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
.cta-band .hero-cta { justify-content: center; }
.tank-reqs .badge { white-space: normal; }
@media (max-width: 480px) { .op-day { grid-template-columns: 1fr; gap: 6px; } .op-time { display: flex; gap: 10px; align-items: baseline; } .op-time small { margin: 0; } }

/* ---------- Hadművelet ---------- */
.op-name { font: 400 clamp(1.5rem, 2.6vw, 2rem)/1.1 var(--font-display); color: var(--white); margin: 4px 0 10px; }
.op-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.op-fact { padding: 10px 12px; background: rgba(0,0,0,.35); border: 1px solid var(--steel-700); }
.op-fact span { display: block; font: 700 .72rem/1.2 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--steel-400); }
.op-fact b { display: block; margin-top: 4px; font: 700 1.1rem/1.2 var(--font-ui); color: var(--white); letter-spacing: .02em; }
.op-count { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 14px; border-left: 3px solid var(--red-500); background: rgba(92,2,3,.22); }
.op-count .countdown { font-size: 1.6rem; }
.op-sample { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--steel-700); }
.status { display: inline-flex; align-items: center; gap: 6px; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.status-upcoming { color: var(--maybe); border-color: var(--maybe); }
.status-active, .status-live { color: #6fd27c; border-color: var(--ok); }
.status-live::before { animation: blink 1.2s ease-in-out infinite; }
.status-done { color: var(--steel-400); }
@keyframes blink { 50% { opacity: .3; } }
.rsvp-legend .reserve::before { background: var(--steel-400); }
.rsvp-bar .reserve { background: var(--steel-500); }
.rsvp-buttons .btn[data-v="yes"]:hover, .rsvp-buttons .btn[data-v="yes"].active { --c: var(--ok); background: rgba(63,163,77,.15); }

/* ---------- Skirmish ---------- */
.sk-item { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.sk-default { font: 600 .85rem/1.3 var(--font-ui); letter-spacing: .04em; color: var(--steel-400); margin: -4px 0 12px; }
.sk-default b { color: var(--white); }

/* ---------- Vezetőség ---------- */
.leaders { display: grid; gap: var(--gap); grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1150px) { .leaders { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .leaders { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .leaders { gap: 10px; } .leader { padding: 14px 8px; } .leader .avatar { width: 48px; height: 48px; } .leader-name { font-size: .92rem; } }
.leader { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.leader .avatar { width: 64px; height: 64px; font-size: 1.5rem; margin-bottom: 6px; }
.leader-name { font: 700 1.05rem/1.2 var(--font-ui); color: var(--white); letter-spacing: .02em; overflow-wrap: anywhere; }
.leader-rank { font: 700 .78rem/1.2 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--red-400); }
.leader-rank-en { font-size: .78rem; color: var(--steel-500); }
.leader.commander { border-color: var(--red-500); background: linear-gradient(180deg, rgba(208,9,9,.22), var(--graphite) 55%); }
.leader.commander .avatar { background: var(--red-500); box-shadow: 0 0 18px rgba(208,9,9,.6); }
.leader .btn { margin-top: 8px; }