/* ==========================================================================
   EPOCH2 - tema "Metin2 clasic"
   Inlocuieste style.css / responsive.css / epoch2-v2.css / default-edit.css.
   Bootstrap 5 ramane pentru grid, formulare si componente (alert, modal).
   ========================================================================== */

/* ---------- Fonturi ---------- */
@font-face {
  font-family: "Trajan M2";
  src: url("../webfonts/TrajanPro-Bold.woff") format("woff"),
       url("../webfonts/TrajanPro-Bold.ttf") format("truetype");
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "Trajan M2";
  src: url("../webfonts/TrajanPro-Regular.woff") format("woff"),
       url("../webfonts/TrajanPro-Regular.ttf") format("truetype");
  font-weight: 400; font-display: swap;
}
/* Font Awesome 5 Free: fisierele sunt in fonts/, nu in webfonts/ */
@font-face {
  font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 900; font-display: block;
  src: url("../fonts/fa-solid-900.woff2") format("woff2"), url("../fonts/fa-solid-900.woff") format("woff");
}
@font-face {
  font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 400; font-display: block;
  src: url("../fonts/fa-regular-400.woff2") format("woff2"), url("../fonts/fa-regular-400.woff") format("woff");
}
@font-face {
  font-family: "Font Awesome 5 Brands"; font-style: normal; font-weight: 400; font-display: block;
  src: url("../fonts/fa-brands-400.woff2") format("woff2"), url("../fonts/fa-brands-400.woff") format("woff");
}
/* "fal"/"far" sunt iconite Pro - le afisam cu varianta solid gratuita */
.fal, .far { font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important; }

/* ---------- Culori ---------- */
:root {
  --m2-black: #050302;
  --m2-bg: #0b0806;
  --m2-wood-1: #2a1d10;
  --m2-wood-2: #160f08;
  --m2-panel: rgba(20, 14, 8, 0.94);
  --m2-bronze-d: #3b2a15;
  --m2-bronze: #6b5230;
  --m2-bronze-l: #a8844a;
  --m2-gold: #e9cd84;
  --m2-gold-2: #c9a24a;
  --m2-text: #d8c8a2;
  --m2-muted: #8f7d5c;
  --m2-red: #a9261a;
  --m2-red-l: #d8452f;
  --m2-green: #6fae4a;
  --m2-shinsoo: #e0574a;
  --m2-chunjo: #e8c24a;
  --m2-jinno: #5c9ae6;
  --m2-title: "Trajan M2", "Cinzel", Georgia, serif;
  --m2-body: "Noto Sans", "Segoe UI", Tahoma, Arial, sans-serif;
}

/* ---------- Baza ---------- */
html { scroll-behavior: smooth; }
body.m2 {
  margin: 0;
  min-height: 100vh;
  font-family: var(--m2-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--m2-text);
  background: var(--m2-bg);
}
.m2-bg {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(160, 90, 20, 0.18), transparent 70%),
    linear-gradient(180deg, rgba(8, 5, 3, 0.38), rgba(8, 5, 3, 0.92) 70%),
    url("../images/m2/bg.jpg") center top / cover no-repeat,
    var(--m2-bg);
}
body.m2 a { color: var(--m2-gold); text-decoration: none; transition: color .15s; }
body.m2 a:hover { color: #fff3cf; }
body.m2 h1, body.m2 h2, body.m2 h3, body.m2 h4, body.m2 h5 {
  font-family: var(--m2-title); color: var(--m2-gold); letter-spacing: .04em;
}
body.m2 hr { border-color: var(--m2-bronze-d); opacity: 1; }
::selection { background: rgba(201, 162, 74, .35); color: #fff; }

/* bara de derulare */
body.m2 ::-webkit-scrollbar { width: 10px; height: 10px; }
body.m2 ::-webkit-scrollbar-track { background: #0d0905; }
body.m2 ::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #4a3519, #6b5230); border: 1px solid #000; }

/* ==========================================================================
   Fereastra Metin2 (panou cu rama de bronz + bara de titlu)
   ========================================================================== */
.m2-win {
  position: relative;
  background: linear-gradient(180deg, rgba(34, 24, 14, .96), rgba(16, 11, 7, .97));
  border: 1px solid #000;
  box-shadow:
    inset 0 0 0 1px var(--m2-bronze),
    inset 0 0 0 2px #000,
    inset 0 0 0 3px var(--m2-bronze-d),
    0 10px 30px rgba(0, 0, 0, .65);
  margin-bottom: 22px;
}
/* colturi aurii */
.m2-win::after {
  content: ""; position: absolute; inset: -2px; pointer-events: none;
  --c: var(--m2-gold-2);
  background:
    linear-gradient(var(--c), var(--c)) top left / 14px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 2px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 14px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 2px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 14px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 2px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 14px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 2px 14px no-repeat;
}
.m2-win__title {
  position: relative;
  margin: 3px 3px 0;
  padding: 9px 40px 8px;
  text-align: center;
  font-family: var(--m2-title);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--m2-gold);
  text-shadow: 0 1px 0 #000, 0 0 10px rgba(201, 162, 74, .35);
  background:
    linear-gradient(180deg, rgba(255, 220, 150, .08), transparent 50%),
    linear-gradient(180deg, #3e2c17, #22170c);
  border-bottom: 1px solid var(--m2-bronze);
  box-shadow: inset 0 -1px 0 #000;
}
.m2-win__title h1, .m2-win__title h2, .m2-win__title h3 {
  margin: 0; font-size: inherit; letter-spacing: inherit; color: inherit; font-weight: 700; line-height: 1.4;
}
/* romburi decorative stanga/dreapta */
.m2-win__title::before, .m2-win__title::after {
  content: ""; position: absolute; top: 50%; width: 7px; height: 7px;
  background: var(--m2-gold-2); transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 6px rgba(233, 205, 132, .6);
}
.m2-win__title::before { left: 14px; }
.m2-win__title::after { right: 14px; }
.m2-win__body { padding: 16px 16px 18px; }
.m2-win__body--flush { padding: 0; }
.m2-win__foot {
  padding: 10px 16px 14px; text-align: center;
  border-top: 1px solid var(--m2-bronze-d);
}

/* ==========================================================================
   Butoane (stil butoane din joc)
   ========================================================================== */
.m2-btn,
body.m2 .btn,
body.m2 .default-button,
body.m2 .submit-button,
body.m2 input[type="submit"],
body.m2 button[type="submit"]:not(.btn-close) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 36px;
  padding: 7px 20px;
  font-family: var(--m2-title);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #f6e7bf !important;
  text-shadow: 0 1px 1px #000;
  background: linear-gradient(180deg, #8c6c36 0%, #5f4520 46%, #47321a 54%, #6a4f26 100%);
  border: 1px solid #120b04;
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 233, 170, .35),
    inset 0 0 0 1px rgba(201, 162, 74, .45),
    0 2px 5px rgba(0, 0, 0, .6);
  cursor: pointer;
  transition: filter .15s, box-shadow .15s, transform .05s;
}
.m2-btn:hover,
body.m2 .btn:hover,
body.m2 .default-button:hover,
body.m2 .submit-button:hover,
body.m2 input[type="submit"]:hover,
body.m2 button[type="submit"]:not(.btn-close):hover {
  filter: brightness(1.18);
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 233, 170, .45),
    inset 0 0 0 1px rgba(233, 205, 132, .8),
    0 0 14px rgba(201, 162, 74, .35),
    0 2px 5px rgba(0, 0, 0, .6);
}
.m2-btn:active, body.m2 .btn:active, body.m2 input[type="submit"]:active { transform: translateY(1px); filter: brightness(.95); }

/* buton principal rosu (ca "Start" din joc) */
.m2-btn--red,
body.m2 .btn-danger,
body.m2 .btn-success,
body.m2 .btn-primary {
  background: linear-gradient(180deg, #c4412b 0%, #8e2216 46%, #6e180f 54%, #9a2a1a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 160, .35),
    inset 0 0 0 1px rgba(233, 205, 132, .55),
    0 2px 5px rgba(0, 0, 0, .6);
}
.m2-btn--lg { min-height: 50px; padding: 12px 34px; font-size: 16px; }
body.m2 .btn-sm { min-height: 28px; padding: 3px 12px; font-size: 11px; }
body.m2 .btn-lg { min-height: 44px; font-size: 15px; }
body.m2 .btn-block, body.m2 .d-grid > .btn { width: 100%; }
body.m2 .btn-secondary, body.m2 .btn-light, body.m2 .btn-dark, body.m2 .btn-info, body.m2 .btn-warning {
  background: linear-gradient(180deg, #4b3d2b 0%, #2f2518 50%, #3b2f20 100%);
}
body.m2 .btn-close { filter: invert(80%) sepia(30%) saturate(400%) hue-rotate(5deg); opacity: .8; }

/* ==========================================================================
   Formulare
   ========================================================================== */
body.m2 .form-control,
body.m2 .form-select,
body.m2 input[type="text"], body.m2 input[type="password"], body.m2 input[type="email"],
body.m2 input[type="number"], body.m2 input[type="date"], body.m2 input[type="datetime-local"],
body.m2 select, body.m2 textarea {
  background: #0c0805 !important;
  color: #f1e3bf !important;
  border: 1px solid var(--m2-bronze) !important;
  border-radius: 2px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .8);
  padding: 8px 12px;
  font-family: var(--m2-body);
}
body.m2 .form-control::placeholder, body.m2 input::placeholder, body.m2 textarea::placeholder { color: #6e5f45; }
body.m2 .form-control:focus, body.m2 input:focus, body.m2 select:focus, body.m2 textarea:focus {
  outline: none;
  border-color: var(--m2-gold-2) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .8), 0 0 0 2px rgba(201, 162, 74, .25) !important;
}
body.m2 label, body.m2 .form-label { color: var(--m2-gold); font-size: 13px; }
body.m2 .form-check-input { background-color: #0c0805; border-color: var(--m2-bronze); }
body.m2 .form-check-input:checked { background-color: var(--m2-gold-2); border-color: var(--m2-gold-2); }

/* camp cu iconita (login din sidebar) */
.m2-field { position: relative; margin-bottom: 10px; }
.m2-field i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--m2-bronze-l); font-size: 13px; pointer-events: none;
}
.m2-field input { width: 100%; padding-left: 36px !important; }

/* ==========================================================================
   Tabele
   ========================================================================== */
body.m2 .table,
body.m2 .table-dark {
  --bs-table-bg: transparent;
  --bs-table-color: var(--m2-text);
  --bs-table-striped-bg: rgba(201, 162, 74, .05);
  --bs-table-striped-color: var(--m2-text);
  --bs-table-hover-bg: rgba(201, 162, 74, .1);
  --bs-table-hover-color: #fff;
  --bs-table-border-color: #2c2013;
  --bs-table-active-bg: rgba(201, 162, 74, .12);
  color: var(--m2-text);
  background: transparent;
  border-color: #2c2013;
  margin-bottom: 14px;
  vertical-align: middle;
}
body.m2 .table > :not(caption) > * > * { background-color: var(--bs-table-bg); color: inherit; border-bottom-color: #2c2013; padding: 9px 10px; }
body.m2 .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(201, 162, 74, .05); box-shadow: inset 0 0 0 9999px rgba(201, 162, 74, .04); }
body.m2 .table tbody tr:hover > * { box-shadow: inset 0 0 0 9999px rgba(201, 162, 74, .09); }
body.m2 .table thead th,
body.m2 .table .thead-inverse th {
  font-family: var(--m2-title);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--m2-gold);
  background: linear-gradient(180deg, #2e2112, #1a1209) !important;
  border-bottom: 1px solid var(--m2-bronze) !important;
}
body.m2 .table th[scope="row"] { color: var(--m2-gold-2); font-family: var(--m2-title); }
body.m2 .center, body.m2 th.center, body.m2 td.center { text-align: center; }

/* ==========================================================================
   Alerte, liste, paginare, modale
   ========================================================================== */
body.m2 .alert {
  border-radius: 2px;
  border: 1px solid;
  background: rgba(10, 7, 4, .85);
  color: var(--m2-text);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6);
}
body.m2 .alert-danger  { border-color: #7c2418; background: linear-gradient(90deg, rgba(120, 25, 15, .35), rgba(10, 7, 4, .85)); color: #f3c4b8; }
body.m2 .alert-success { border-color: #3f6b26; background: linear-gradient(90deg, rgba(60, 110, 30, .3), rgba(10, 7, 4, .85)); color: #cfe9bd; }
body.m2 .alert-info    { border-color: #2c5a85; background: linear-gradient(90deg, rgba(40, 90, 140, .3), rgba(10, 7, 4, .85)); color: #c5dcf2; }
body.m2 .alert-warning { border-color: #8a6a1f; background: linear-gradient(90deg, rgba(150, 115, 25, .3), rgba(10, 7, 4, .85)); color: #f2e2b0; }
body.m2 .alert a { color: #fff; text-decoration: underline; }

body.m2 .list-group-item {
  background: rgba(16, 11, 7, .9);
  color: var(--m2-text);
  border-color: var(--m2-bronze-d);
}
body.m2 .list-group-item.active {
  background: linear-gradient(180deg, #4a361b, #2c1f10);
  border-color: var(--m2-bronze);
  color: var(--m2-gold);
  font-family: var(--m2-title);
}
body.m2 .list-group-item-action:hover { background: rgba(201, 162, 74, .12); color: #fff; }

body.m2 .pagination { display: flex; justify-content: center; margin: 16px 0 4px; }
body.m2 .pagination .buttons { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
body.m2 .pagination .buttons a,
body.m2 .pagination .buttons span,
body.m2 .page-link {
  min-width: 36px; height: 34px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--m2-title);
  color: var(--m2-gold) !important;
  background: linear-gradient(180deg, #3a2a16, #1e150b);
  border: 1px solid var(--m2-bronze);
  box-shadow: inset 0 1px 0 rgba(255, 233, 170, .15);
}
body.m2 .pagination .buttons span.active,
body.m2 .page-item.active .page-link {
  color: #fff !important;
  background: linear-gradient(180deg, #c4412b, #7e1d12);
  border-color: var(--m2-gold-2);
}

body.m2 .modal-content {
  background: linear-gradient(180deg, #22180d, #120c07);
  color: var(--m2-text);
  border: 1px solid var(--m2-bronze);
  border-radius: 2px;
  box-shadow: 0 0 0 1px #000, 0 20px 60px rgba(0, 0, 0, .8);
}
body.m2 .modal-header { border-bottom-color: var(--m2-bronze-d); background: linear-gradient(180deg, #3e2c17, #22170c); }
body.m2 .modal-title { font-family: var(--m2-title); color: var(--m2-gold); font-size: 15px; }
body.m2 .modal-footer { border-top-color: var(--m2-bronze-d); }
body.m2 .dropdown-menu { background: #150e08; border: 1px solid var(--m2-bronze); }
body.m2 .dropdown-item { color: var(--m2-text); }
body.m2 .dropdown-item:hover { background: rgba(201, 162, 74, .15); color: #fff; }
body.m2 .nav-tabs { border-bottom-color: var(--m2-bronze); }
body.m2 .nav-tabs .nav-link { color: var(--m2-muted); border-radius: 0; }
body.m2 .nav-tabs .nav-link.active { background: #2a1d10; color: var(--m2-gold); border-color: var(--m2-bronze) var(--m2-bronze) transparent; }
body.m2 .card { background: rgba(16, 11, 7, .9); border: 1px solid var(--m2-bronze-d); color: var(--m2-text); }
body.m2 .card-header { background: linear-gradient(180deg, #3e2c17, #22170c); border-bottom-color: var(--m2-bronze); color: var(--m2-gold); font-family: var(--m2-title); }
body.m2 .badge { font-family: var(--m2-title); border-radius: 2px; }
body.m2 .text-muted { color: var(--m2-muted) !important; }
body.m2 .text-danger { color: var(--m2-red-l) !important; }
body.m2 .tooltip-inner { background: #120c07; border: 1px solid var(--m2-bronze); color: var(--m2-text); }

/* ==========================================================================
   Bara de sus
   ========================================================================== */
.m2-topbar {
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(180deg, rgba(36, 25, 14, .97), rgba(14, 9, 5, .97));
  border-bottom: 1px solid #000;
  box-shadow: inset 0 -1px 0 var(--m2-bronze), inset 0 -2px 0 #000, 0 6px 20px rgba(0, 0, 0, .6);
  backdrop-filter: blur(4px);
}
.m2-topbar__inner {
  max-width: 1320px; margin: 0 auto; padding: 0 16px;
  height: 62px; display: flex; align-items: center; gap: 18px;
}
.m2-topbar__logo img { height: 42px; width: auto; display: block; filter: drop-shadow(0 2px 4px #000); }
.m2-nav { display: flex; align-items: stretch; height: 100%; margin: 0 auto; padding: 0; list-style: none; }
.m2-nav li { display: flex; }
.m2-nav a {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 0 18px;
  font-family: var(--m2-title); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--m2-text) !important;
  text-shadow: 0 1px 1px #000;
}
.m2-nav a i { color: var(--m2-bronze-l); font-size: 12px; }
.m2-nav a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--m2-gold), transparent);
  transform: scaleX(0); transition: transform .2s;
}
.m2-nav a:hover, .m2-nav a.is-active { color: var(--m2-gold) !important; }
.m2-nav a:hover::after, .m2-nav a.is-active::after { transform: scaleX(1); }
.m2-nav a.m2-nav__shop { color: #f1c86a !important; }

.m2-topbar__right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.m2-lang { position: relative; display: flex; align-items: center; gap: 6px; }
.m2-lang img { width: 20px; height: auto; border: 1px solid #000; }
.m2-lang select {
  appearance: none; -webkit-appearance: none;
  padding: 5px 26px 5px 8px !important;
  font-size: 12px; cursor: pointer;
  background: #0c0805 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23c9a24a'/%3E%3C/svg%3E") right 8px center no-repeat !important;
}
.m2-burger {
  display: none; width: 42px; height: 38px; margin-left: 6px;
  align-items: center; justify-content: center;
  color: var(--m2-gold); font-size: 18px;
  background: linear-gradient(180deg, #3a2a16, #1e150b);
  border: 1px solid var(--m2-bronze); cursor: pointer;
}

/* meniu mobil */
.m2-drawer {
  position: fixed; inset: 0 0 0 auto; z-index: 200; width: min(300px, 85vw);
  background: linear-gradient(180deg, #22180d, #0d0905);
  border-left: 1px solid var(--m2-bronze);
  transform: translateX(100%); transition: transform .25s ease;
  padding: 70px 0 20px; overflow-y: auto;
}
.m2-drawer.is-open { transform: none; box-shadow: -20px 0 40px rgba(0, 0, 0, .7); }
.m2-drawer a {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 24px; border-bottom: 1px solid #23180d;
  font-family: var(--m2-title); font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--m2-text) !important;
}
.m2-drawer a i { width: 18px; color: var(--m2-bronze-l); text-align: center; }
.m2-drawer a:hover { background: rgba(201, 162, 74, .08); color: var(--m2-gold) !important; }
.m2-drawer__close { position: absolute; top: 14px; right: 16px; }
.m2-scrim { position: fixed; inset: 0; z-index: 150; background: rgba(0, 0, 0, .6); opacity: 0; pointer-events: none; transition: opacity .25s; }
.m2-scrim.is-open { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   Hero
   ========================================================================== */
.m2-hero {
  position: relative; overflow: hidden;
  min-height: 430px;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid #000;
  box-shadow: inset 0 -1px 0 var(--m2-bronze-d);
}
/* Epoch2: parallax - fundalul hero-ului e un strat separat care se misca mai incet la scroll */
.m2-hero__sky {
  position: absolute; inset: -70px -30px; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 5, 3, .30), rgba(8, 5, 3, .55) 75%),
    url("../images/m2/bg.jpg") center 32% / cover no-repeat;
}
.m2-hero__sky, .m2-hero__art, .m2-embers, .m2-hero__content { will-change: transform; }
.m2-hero.is-static .m2-hero__sky, .m2-hero.is-static .m2-hero__art, .m2-hero.is-static .m2-embers, .m2-hero.is-static .m2-hero__content { will-change: auto; }
.m2-hero__art {
  position: absolute; top: 0; bottom: 0; right: max(0px, calc(50% - 760px)); width: 520px;
  background: url("../images/m2/hero-warrior.jpg") center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 70%, transparent 100%), linear-gradient(180deg, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 70%, transparent 100%), linear-gradient(180deg, #000 70%, transparent 100%);
  mask-composite: intersect;
  opacity: .9;
}
.m2-hero__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 40% 50% at 50% 55%, rgba(201, 120, 30, .22), transparent 70%),
    linear-gradient(180deg, transparent 60%, var(--m2-bg) 100%);
}
.m2-embers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.m2-embers span {
  position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%;
  background: #f0a040; box-shadow: 0 0 6px #e06a12;
  animation: m2-ember linear infinite;
}
@keyframes m2-ember {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: .9; }
  100% { transform: translate(var(--dx, 20px), -460px); opacity: 0; }
}
.m2-hero__content { position: relative; z-index: 2; text-align: center; padding: 40px 16px 50px; }
.m2-hero__logo { width: min(560px, 86vw); height: auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .9)); }
.m2-hero__tag {
  margin: 4px 0 26px;
  font-family: var(--m2-title); font-size: 13px; letter-spacing: .45em; text-transform: uppercase;
  color: rgba(233, 205, 132, .75); text-shadow: 0 1px 2px #000;
}
.m2-hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.m2-status {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0;
  margin-top: 26px;
  background: rgba(10, 7, 4, .75);
  border: 1px solid var(--m2-bronze);
  box-shadow: inset 0 0 0 1px #000;
}
.m2-status > div { padding: 8px 18px; text-align: center; border-left: 1px solid var(--m2-bronze-d); }
.m2-status > div:first-child { border-left: 0; }
.m2-status b { display: block; font-family: var(--m2-title); font-size: 18px; color: var(--m2-gold); line-height: 1.2; }
.m2-status small { font-size: 11px; color: var(--m2-muted); text-transform: uppercase; letter-spacing: .08em; }
.m2-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--m2-green); box-shadow: 0 0 8px var(--m2-green); margin-right: 6px; vertical-align: middle; }
.m2-dot--off { background: var(--m2-red-l); box-shadow: 0 0 8px var(--m2-red-l); }

/* ==========================================================================
   Layout 3 coloane
   ========================================================================== */
.m2-layout {
  max-width: 1320px; margin: -40px auto 0; padding: 0 16px 30px;
  position: relative; z-index: 3;
  display: grid; grid-template-columns: 280px minmax(0, 1fr) 280px; gap: 22px;
  align-items: start;
}
.m2-main { min-width: 0; }
.m2-main .m2-win__body { min-height: 420px; }

/* meniu cont */
.m2-menu { list-style: none; margin: 0; padding: 0; }
.m2-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  color: var(--m2-text) !important;
  border-bottom: 1px solid #23180d;
  transition: background .15s, padding .15s;
}
.m2-menu a i { width: 18px; text-align: center; color: var(--m2-bronze-l); }
.m2-menu a:hover { background: linear-gradient(90deg, rgba(201, 162, 74, .14), transparent); color: var(--m2-gold) !important; padding-left: 16px; }
.m2-menu a.is-logout { color: #e7a090 !important; }
.m2-menu .m2-badge { margin-left: auto; }
.m2-badge { padding: 1px 7px; font-size: 11px; background: var(--m2-red); color: #fff; border: 1px solid #000; }

.m2-login-links { display: flex; justify-content: space-between; gap: 8px; margin: 8px 0 12px; font-size: 12px; }
.m2-captcha { display: flex; justify-content: center; margin: 6px 0 12px; transform-origin: center; }
.m2-captcha .g-recaptcha { transform: scale(.82); transform-origin: center; }

/* clasament mic din sidebar */
.m2-champ { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px; border-bottom: 1px solid var(--m2-bronze-d); background: radial-gradient(ellipse at 20% 50%, rgba(201, 162, 74, .15), transparent 70%); }
.m2-champ__img { position: relative; width: 54px; height: 54px; flex: none; display: flex; align-items: center; justify-content: center; background: #0b0704; border: 1px solid var(--m2-gold-2); box-shadow: 0 0 12px rgba(201, 162, 74, .35), inset 0 0 0 1px #000; }
.m2-champ__img img.job { max-width: 40px; max-height: 46px; }
.m2-champ__img img.medal { position: absolute; right: -8px; bottom: -8px; width: 22px; }
.m2-champ__name { font-family: var(--m2-title); font-size: 15px; color: var(--m2-gold); line-height: 1.2; word-break: break-word; }
.m2-champ__meta { font-size: 12px; color: var(--m2-muted); }
.m2-rank { width: 100%; border-collapse: collapse; font-size: 13px; }
.m2-rank td { padding: 7px 10px; border-bottom: 1px solid #22170c; }
.m2-rank tr:hover td { background: rgba(201, 162, 74, .06); }
.m2-rank td:first-child { width: 34px; text-align: center; font-family: var(--m2-title); color: var(--m2-muted); }
.m2-rank td:first-child img { width: 18px; }
.m2-rank td:last-child { text-align: right; color: var(--m2-gold-2); white-space: nowrap; }
.m2-rank .name { color: #efe0bb; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.emp-1, .m2-emp-1 { color: var(--m2-shinsoo) !important; }
.emp-2, .m2-emp-2 { color: var(--m2-chunjo) !important; }
.emp-3, .m2-emp-3 { color: var(--m2-jinno) !important; }

/* statistici */
.m2-stats { list-style: none; margin: 0; padding: 4px 0; }
.m2-stats li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 14px; border-bottom: 1px solid #22170c; font-size: 13px; }
.m2-stats li::before { content: "\25C6"; color: var(--m2-bronze); font-size: 8px; margin-right: 8px; align-self: center; }
.m2-stats li span { flex: 1; }
.m2-stats li b { font-family: var(--m2-title); color: var(--m2-gold); }
.m2-stats__time { padding: 8px 14px 10px; font-size: 11px; color: var(--m2-muted); text-align: center; }

/* ==========================================================================
   Continut paginilor existente (clase vechi din pages/*.php)
   ========================================================================== */
.m2-main .page-hd { display: none; }                 /* titlul e deja in bara ferestrei */
.m2-main .container { max-width: 100%; padding: 0; }
.m2-main .row { --bs-gutter-x: 1rem; }
.m2-main .col-sm-offset-2, .m2-main .col-md-offset-3 { margin-left: 0; }
.m2-main .padding-container { padding: 0; }
.m2-main .jumbotron {
  background: rgba(10, 7, 4, .6) !important;
  border: 1px solid var(--m2-bronze-d);
  margin-bottom: 14px; border-radius: 0;
}
.m2-main .ranking-page .btn { width: 100%; }
.xy-news-header { display: flex; justify-content: flex-end; margin: -6px 0 14px; }
.xy-news-header .left { display: none; }
.xy-nh-ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.xy-nh-ul a {
  display: inline-block; padding: 6px 16px;
  font-family: var(--m2-title); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--m2-muted) !important;
  background: linear-gradient(180deg, #2a1d10, #160f08);
  border: 1px solid var(--m2-bronze-d);
}
.xy-nh-ul a.active, .xy-nh-ul a:hover { color: var(--m2-gold) !important; border-color: var(--m2-bronze); box-shadow: inset 0 -2px 0 var(--m2-gold-2); }

/* articol stire */
.m2-main .post_title {
  display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--m2-title); font-size: 18px; color: var(--m2-gold);
  padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--m2-bronze-d);
}
.m2-main .post_content { color: var(--m2-text); }
.m2-main .post_content img { max-width: 100%; height: auto; }
.m2-main .post_date { margin-top: 16px; font-size: 12px; color: var(--m2-muted); text-align: right; }

/* calendarul de evenimente (iframe pe prima pagina) */
.m2-frame { width: 100%; min-height: 480px; border: 0; display: block; background: transparent; }

/* etichete folosite in admin */
body.m2 .tag { display: inline-block; padding: 1px 8px; font-size: 11px; border: 1px solid var(--m2-bronze); }
body.m2 .tag-danger { border-color: #7c2418; color: #f3c4b8; }
body.m2 .gold { color: var(--m2-gold) !important; }
body.m2 .blue { color: var(--m2-jinno) !important; }
body.m2 .green { color: var(--m2-green) !important; }
body.m2 .purple { color: #b48cff !important; }

/* ==========================================================================
   Footer
   ========================================================================== */
.m2-footer {
  margin-top: 10px;
  background: linear-gradient(180deg, rgba(14, 9, 5, .9), #050302);
  border-top: 1px solid #000;
  box-shadow: inset 0 1px 0 var(--m2-bronze-d);
}
.m2-footer__inner {
  max-width: 1320px; margin: 0 auto; padding: 26px 16px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 12px; color: var(--m2-muted);
}
.m2-footer__inner img { height: 34px; opacity: .85; }
.m2-footer__links { display: flex; gap: 18px; flex-wrap: wrap; }
.m2-footer__links a { color: var(--m2-muted) !important; text-transform: uppercase; letter-spacing: .06em; }
.m2-footer__links a:hover { color: var(--m2-gold) !important; }

.m2-totop {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  color: var(--m2-gold); background: linear-gradient(180deg, #3a2a16, #1e150b);
  border: 1px solid var(--m2-bronze); box-shadow: 0 4px 12px rgba(0, 0, 0, .6);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.m2-totop.is-visible { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 1200px) and (max-width: 1399px) {
  .m2-nav a { padding: 0 11px; font-size: 12px; letter-spacing: .06em; }
  .m2-nav a i { display: none; }
}
@media (max-width: 1199px) {
  .m2-nav { display: none; }
  .m2-burger { display: inline-flex; }
  .m2-layout { grid-template-columns: minmax(0, 1fr) 280px; }
  .m2-side--left { grid-column: 2; grid-row: 1; }
  .m2-main { grid-column: 1; grid-row: 1 / span 2; }
  .m2-side--right { grid-column: 2; grid-row: 2; }
}
@media (max-width: 860px) {
  .m2-layout { grid-template-columns: minmax(0, 1fr); margin-top: -24px; }
  .m2-side--left, .m2-main, .m2-side--right { grid-column: 1; grid-row: auto; }
  .m2-main { order: -1; }
  .m2-hero { min-height: 340px; }
  .m2-hero__art { width: 100%; right: 0; opacity: .35; }
  .m2-status > div { padding: 6px 12px; }
  .m2-topbar__logo img { height: 34px; }
  .m2-win__body { padding: 12px; }
  .m2-lang span { display: none; }
}
@media (max-width: 480px) {
  .m2-hero__tag { letter-spacing: .25em; font-size: 11px; }
  .m2-btn--lg { width: 100%; }
  body.m2 .table { font-size: 12px; }
  body.m2 .exp-table { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .m2-embers { display: none; }
  html { scroll-behavior: auto; }
}

/* hero mic pe paginile interioare */
.m2-hero--compact { min-height: 230px; }
.m2-hero--compact .m2-hero__logo { width: min(360px, 70vw); }
.m2-hero--compact .m2-hero__content { padding: 24px 16px 54px; }
.m2-hero--compact .m2-hero__tag { margin-bottom: 0; }
@media (max-width: 860px) { .m2-hero--compact { min-height: 170px; } .m2-hero--compact .m2-hero__tag { display: none; } }

/* caseta goala (ex. nu exista bresle) */
.m2-empty { padding: 22px 16px 24px; text-align: center; font-size: 13px; color: var(--m2-muted); line-height: 1.6; }
.m2-empty i { display: block; margin-bottom: 8px; font-size: 26px; color: var(--m2-bronze); }

/* Epoch2: parallax oprit pentru cine are "reducere miscare" activa */
@media (prefers-reduced-motion: reduce) {
  .m2-hero__sky, .m2-hero__art, .m2-embers, .m2-hero__content { transform: none !important; opacity: 1 !important; }
}