/* char-hq-v1 */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700&family=IBM+Plex+Sans:wght@400;600;700&display=swap');
:root{--accent:#ff7a18;--btn:#b91c1c;--text:#ffe8d6;--muted:#d4a088;--panel:rgba(28,12,8,.94);--bg:#0a0503}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;color:var(--text);font-family:"IBM Plex Sans",sans-serif;background:var(--bg)}
a{color:var(--accent);text-decoration:none}
.theme-carina-fire{background:radial-gradient(900px 480px at 80% 0%,rgba(255,90,20,.28),transparent 55%),linear-gradient(180deg,#1a0a04,#0a0503)}
.m2-ornate-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:14px 10px;background:linear-gradient(180deg,#3a1408,#140804);border-bottom:2px solid var(--accent)}
.m2-ornate-nav a{min-width:130px;padding:12px 10px;text-align:center;color:#ffd7b8;border:1px solid rgba(255,122,24,.35);background:linear-gradient(180deg,#4a1c0c,#1a0a04);border-radius:6px}
.m2-ornate-nav a b{display:block;font-family:Orbitron,sans-serif;font-size:12px;letter-spacing:.04em}
.m2-ornate-nav a small{display:block;font-size:10px;color:#c47a55;margin-top:4px}
.m2-nav-main{border-color:var(--accent)!important;box-shadow:0 0 18px rgba(255,122,24,.35);transform:scale(1.05)}
.m2-banner{position:relative;height:440px;overflow:hidden}
.m2-banner-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.3) hue-rotate(-8deg) brightness(.58) contrast(1.1)}
.m2-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,5,3,.2),rgba(10,5,3,.88))}
.m2-char-art{position:absolute;bottom:-4%;height:112%;max-width:40%;object-fit:contain;object-position:bottom center;z-index:4;pointer-events:none;filter:drop-shadow(0 14px 28px rgba(0,0,0,.8)) drop-shadow(0 0 26px rgba(255,90,20,.4)) contrast(1.12) saturate(1.18) brightness(1.08)}
.m2-char-l{left:1%}.m2-char-r{right:1%;transform:scaleX(-1)}
.m2-banner-center{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}
.m2-kicker{font-family:Orbitron,sans-serif;color:var(--accent);letter-spacing:.3em;font-size:11px}
.m2-banner h1{margin:8px 0;font-family:Orbitron,sans-serif;font-size:clamp(28px,5vw,56px);color:#fff;text-shadow:0 0 30px rgba(255,90,20,.45)}
.m2-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:min(980px,94vw);margin:-40px auto 18px;position:relative;z-index:4}
.m2-stat{text-align:center;padding:16px 10px;background:linear-gradient(180deg,#3a160a,#140804);border:1px solid rgba(255,122,24,.5);border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.4)}
.m2-stat b{display:block;font-size:28px;color:var(--accent);font-family:Orbitron,sans-serif}
.m2-stat span{font-size:11px;letter-spacing:.08em;color:var(--muted)}
.m2-board{width:min(1200px,94vw);margin:0 auto 40px;display:grid;grid-template-columns:280px 1fr 240px;gap:14px}
.m2-btn-ornate{display:inline-block;padding:12px 28px;background:linear-gradient(135deg,#ff7a18,#b91c1c);border-radius:8px;color:#fff!important;font-weight:700}

.m2-portal input,.m2-portal select,.m2-portal textarea{width:100%!important;background:rgba(0,0,0,.35)!important;border:1px solid rgba(255,255,255,.12)!important;color:#fff!important;padding:11px 12px!important;border-radius:8px!important;font:inherit!important}
.m2-portal input:focus{border-color:var(--accent)!important;box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent)!important}
.m2-btn,.m2-btn-login{display:block;width:100%;margin-top:12px;padding:12px;border:0;border-radius:8px;font-weight:700;cursor:pointer;text-align:center;text-decoration:none;color:#fff!important;background:linear-gradient(135deg,var(--accent),var(--btn))}
.m2-btn-dark{background:#222!important}
.m2-links{display:flex;justify-content:space-between;gap:8px;margin-top:10px;font-size:12px}
.m2-rank-row,.m2-news-row{display:flex;justify-content:space-between;gap:8px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06);color:var(--text);text-decoration:none}
.m2-rank-row i{width:22px;color:var(--accent);font-style:normal;font-weight:800}
.m2-muted{color:var(--muted)}
.m2-footer{border-top:1px solid rgba(255,255,255,.08);padding:28px 0 40px;text-align:center;background:rgba(0,0,0,.35);color:var(--muted);margin-top:20px}
.m2-footer-logo{font-size:22px;color:var(--accent);margin-bottom:10px;font-weight:700}
.m2-footer a{margin:0 8px;color:var(--accent);text-decoration:none}
.m2-copy{margin-top:10px;font-size:12px}
.m2-pad{padding:14px}
.m2-box-title{padding:11px 14px;font-weight:700;letter-spacing:.06em;font-size:13px;border-bottom:1px solid rgba(255,255,255,.08);color:var(--accent)}
.m2-box{background:var(--panel);border:1px solid rgba(255,255,255,.1);border-radius:12px;margin-bottom:12px;overflow:hidden;box-shadow:0 12px 28px rgba(0,0,0,.35)}
body.m2-inner .m2-banner{height:160px!important}
body.m2-inner .m2-char-art,body.m2-inner .m2-stat-row,body.m2-inner .m2-cta-row,body.m2-inner .m2-score{display:none!important}
body.m2-inner .m2-banner h1{font-size:clamp(24px,4vw,36px)!important}
@media(max-width:1000px){.m2-board,.m2-board-2,.m2-board-arena{grid-template-columns:1fr!important}.m2-char-art{display:none}.m2-stat-row{grid-template-columns:1fr!important;margin-top:12px}}

/* === Kontrol Paneli === */
.m2-cp{padding:0!important;overflow:hidden}
.m2-cp-head{padding:22px 22px 8px;border-bottom:1px solid rgba(255,255,255,.08)}
.m2-cp-head h1{margin:0;font-size:clamp(22px,3vw,30px);color:#fff;font-weight:700;letter-spacing:.04em}
.m2-cp-head p{margin:6px 0 12px;color:var(--muted);font-size:13px}
.m2-cp-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:16px 18px}
.m2-cp-stat{padding:14px 12px;border-radius:10px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.1)}
.m2-cp-stat span{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.m2-cp-stat b{display:block;font-size:15px;color:#fff;word-break:break-word;font-weight:700}
.m2-cp-stat-ep b{color:var(--accent);font-size:20px}
.m2-cp-section{padding:8px 18px 22px}
.m2-cp-section h2{margin:10px 0 14px;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:8px}
.m2-cp-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.m2-cp-action{display:flex;align-items:center;justify-content:center;min-height:48px;padding:12px 10px;text-align:center;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.25));color:var(--text)!important;font-weight:700;font-size:13px;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.m2-cp-action:hover{transform:translateY(-1px);border-color:var(--accent);box-shadow:0 8px 20px rgba(0,0,0,.35);color:#fff!important}
.m2-cp-action-primary{background:linear-gradient(135deg,var(--accent),var(--btn,#333));border-color:transparent;color:#fff!important}
.m2-cp-action-danger{border-color:rgba(239,68,68,.45);color:#fecaca!important}
.m2-cp-chars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.m2-cp-char{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.28);color:inherit!important;transition:border-color .15s ease,transform .15s ease}
.m2-cp-char:hover{border-color:var(--accent);transform:translateY(-2px)}
.m2-cp-char-art{display:flex;align-items:center;justify-content:center}
.m2-cp-char-art img{max-width:100%;max-height:120px;object-fit:contain;filter:drop-shadow(0 8px 16px rgba(0,0,0,.45))}
.m2-cp-char-meta strong{display:block;font-size:18px;color:#fff;margin-bottom:8px}
.m2-cp-char-meta ul{list-style:none;margin:0;padding:0}
.m2-cp-char-meta li{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:12px}
.m2-cp-char-meta li span{color:var(--muted)}
.m2-cp-char-meta li em{font-style:normal;color:var(--accent);font-weight:700}
.m2-cp-empty{color:var(--muted);padding:8px 0 16px}
.m2-cp-ban-timer{text-align:center;padding:24px;margin:0 18px 12px;border-radius:12px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1)}
.m2-cp-ban-timer span{display:block;font-size:42px;font-weight:800;color:var(--accent)}
.m2-cp-ban-box{padding:14px;border-radius:10px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.1)}
@media(max-width:900px){.m2-cp-stats{grid-template-columns:repeat(2,1fr)}.m2-cp-actions{grid-template-columns:repeat(2,1fr)}.m2-cp-chars{grid-template-columns:1fr}.m2-cp-char{grid-template-columns:90px 1fr}}
@media(max-width:520px){.m2-cp-stats,.m2-cp-actions{grid-template-columns:1fr}}

/* Banner dual-character animated stacks */
.m2-char-stack{
  position:absolute; bottom:-2%; z-index:4; pointer-events:none;
  width:min(38vw, 420px); height:min(92%, 520px);
}
.m2-char-stack.m2-char-l{ left:0.5%; }
.m2-char-stack.m2-char-r{ right:0.5%; }
.m2-char-stack .m2-char-art{
  position:absolute; left:50%; bottom:0;
  height:100%; width:auto; max-width:100%; object-fit:contain; object-position:bottom center;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.8)) drop-shadow(0 0 22px rgba(255,122,24,.28)) contrast(1.08) saturate(1.12) brightness(1.05);
}
.m2-char-stack .m2-char-art.m2-char-a{
  animation: m2CharFadeA 7s ease-in-out infinite, m2CharFloat 4.5s ease-in-out infinite;
}
.m2-char-stack .m2-char-art.m2-char-b{
  animation: m2CharFadeB 7s ease-in-out infinite, m2CharFloat 4.5s ease-in-out infinite .6s;
}
.m2-char-stack.m2-char-r .m2-char-art.m2-char-a{
  animation: m2CharFadeA 7s ease-in-out infinite, m2CharFloatR 4.5s ease-in-out infinite;
}
.m2-char-stack.m2-char-r .m2-char-art.m2-char-b{
  animation: m2CharFadeB 7s ease-in-out infinite, m2CharFloatR 4.5s ease-in-out infinite .6s;
}
@keyframes m2CharFadeA{ 0%,42%{opacity:1} 50%,92%{opacity:0} 100%{opacity:1} }
@keyframes m2CharFadeB{ 0%,42%{opacity:0} 50%,92%{opacity:1} 100%{opacity:0} }
@keyframes m2CharFloat{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%{ transform:translateX(-50%) translateY(-12px); }
}
@keyframes m2CharFloatR{
  0%,100%{ transform:translateX(-50%) scaleX(-1) translateY(0); }
  50%{ transform:translateX(-50%) scaleX(-1) translateY(-12px); }
}
@media (max-width:1000px){ .m2-char-stack{ display:none !important; } }