/*
  VOID-style integration for SkanMine.
  Base visual direction: Codpat VOID TEMPLATE © 2025 Codpat.
  No font files are redistributed in this package.
*/
@import url('https://fonts.googleapis.com/css2?family=Odibee+Sans&display=swap');

:root {
  color-scheme: dark;
  --main-color-: #962FFE;
  --main-color-2: #ff7ac3;
  --main-linear-color-: #962FFE, #8744BE, #43347A;
  --main-color50-: #962FFE50;
  --main-color20-: #962FFE24;
  --bg-color-: #17111f;
  --bg-color-2: #2A2030;
  --white-: #ffffff;
  --white10-: #ffffff10;
  --white40-: #ffffff18;
  --text-color-: #d8cfe0;
  --muted: #c8bad0;
  --green: #67f5ad;
  --red: #ff7d92;
  --gold: #ffe28a;
  --font-size-1-: clamp(72px, 12vw, 150px);
  --font-size-2-: clamp(34px, 5vw, 58px);
  --font-size-3-: clamp(24px, 3vw, 34px);
  --font-size-4-: clamp(16px, 1.35vw, 20px);
  --font-size-5-: 15px;
  --pc-text-line-height-: 1.8;
  --default-radius-: 16px;
  --max: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { scroll-behavior: smooth; }
body {
  overflow-x: hidden;
  min-height: 100vh;
  background-color: var(--bg-color-);
  color: var(--white-);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.hidden { display: none !important; }
.muted { color: var(--text-color-); }
.small-note { font-size: 13px; }

.bg,
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 18% 12%, rgba(150, 47, 254, .28), transparent 28rem),
    radial-gradient(circle at 86% 18%, rgba(255, 122, 195, .16), transparent 30rem),
    linear-gradient(#00000000, var(--bg-color-) 72%),
    url('public/images/bg-image.jpg') center top / cover no-repeat,
    var(--bg-color-);
}
.bg::before,
.bg-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 55% 0%, rgba(255,255,255,.05), transparent 26rem),
    linear-gradient(180deg, rgba(8, 5, 13, .32), rgba(8, 5, 13, .92));
}
.bg::after,
.bg-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .09;
  background-image:
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}
.main { min-height: 100vh; }

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 10vh;
  min-height: 78px;
  z-index: 40;
  transform: translateY(-110%);
  transition: transform .28s ease, background .28s ease, border .28s ease;
}
.header.active {
  background: rgba(23, 17, 31, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateY(0);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header.transparent { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
.header .nav {
  width: 90%;
  max-width: 1360px;
  margin: auto;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header .nav .left { display: flex; align-items: center; gap: clamp(26px, 5vw, 90px); }
.logo { width: clamp(128px, 16vh, 205px); display: block; }
.logo img { width: 100%; height: auto; }
.header .menu { display: flex; align-items: center; gap: clamp(20px, 3.2vw, 70px); }
.header .menu a,
.footer .menu a,
.mobile-header .menu a {
  font-weight: 800;
  color: var(--white-);
  font-size: var(--font-size-5-);
  transition: color .25s ease, opacity .25s ease;
  white-space: nowrap;
}
.header .menu a:hover,
.footer .menu a:hover,
.mobile-header .menu a:hover { color: #ffb4dd; }
.join-btn,
.small-btn,
.nav-admin,
.btn {
  border: 1px solid var(--main-color-);
  border-radius: var(--default-radius-);
  color: var(--white-);
  background: var(--main-color20-);
  transition: background .25s ease, transform .25s ease, opacity .25s ease, border-color .25s ease;
  box-shadow: none;
}
.join-btn {
  padding: 12px 28px;
  font-weight: 850;
  display: block;
  width: max-content;
}
.join-btn:hover,
.small-btn:hover,
.nav-admin:hover,
.btn:hover { background: var(--main-color-); transform: translateY(-2px); }
.mobile-header { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 78px; z-index: 45; background: rgba(23,17,31,.94); backdrop-filter: blur(12px); }
.mobile-header .nav { position: relative; width: 90%; height: 100%; margin: auto; display: flex; justify-content: space-between; align-items: center; }
.mobile-header .right { display: flex; align-items: center; gap: 10px; }
.mobile-header .logo { width: 130px; }
.mobile-header .menu-btn { position: relative; width: 44px; height: 44px; border: 0; border-radius: var(--default-radius-); background: var(--main-color-); }
.mobile-header .menu-btn::before,
.mobile-header .menu-btn::after { content: ""; position: absolute; left: 12px; width: 20px; height: 4px; border-radius: 999px; background: #fff; transition: .25s ease; }
.mobile-header .menu-btn::before { top: 14px; }
.mobile-header .menu-btn::after { bottom: 14px; }
.mobile-header .menu-btn.active::before { transform: translateY(6px) rotate(45deg); }
.mobile-header .menu-btn.active::after { transform: translateY(-6px) rotate(-45deg); }
.mobile-header .menu { position: absolute; top: 92px; left: 0; width: 100%; max-height: 0; overflow: hidden; display: grid; gap: 18px; padding: 0; border: 0; border-radius: var(--default-radius-); background: rgba(23,17,31,.96); transition: max-height .25s ease, padding .25s ease, border .25s ease; }
.mobile-header .menu.active { max-height: 70vh; padding: 28px; border: 1px solid var(--main-color50-); }

/* Hero */
.hero { width: 100%; padding-top: 19vh; min-height: 92vh; }
.hero .container { width: 90%; max-width: 1360px; margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .86fr); gap: 48px; align-items: center; }
.hero-badge,
.eyebrow,
.badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  padding: 8px 14px;
  border: 1px solid var(--main-color50-);
  border-radius: var(--default-radius-);
  background: var(--main-color20-);
  color: #ffd7ef;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hero h1 {
  margin-top: 16px;
  color: var(--white-);
  -webkit-text-stroke: 2px var(--main-color-);
  font-family: "Odibee Sans", Impact, fantasy;
  font-weight: 400;
  font-size: var(--font-size-1-);
  line-height: .88;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero p { color: var(--text-color-); font-size: var(--font-size-4-); line-height: var(--pc-text-line-height-); margin-top: 18px; max-width: 720px; }
.hero .btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.btn { min-height: 54px; padding: 0 34px; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 16px; }
.btn.purple { background: linear-gradient(150deg, var(--main-linear-color-)); border-color: transparent; }
.hero .image { justify-self: end; }
.hero .image img { width: min(56vh, 520px); max-height: 64vh; object-fit: contain; animation: dragon-float 6s infinite alternate ease-in-out; filter: drop-shadow(0 28px 46px rgba(0,0,0,.42)); }
.hero-status { margin-top: 22px; max-width: 480px; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--white40-); border-radius: var(--default-radius-); background: rgba(255,255,255,.055); }
.status-dot { width: 13px; height: 13px; border-radius: 999px; background: var(--gold); flex: 0 0 auto; box-shadow: 0 0 20px currentColor; }
.status-online { background: var(--green); color: var(--green); }
.status-offline { background: var(--red); color: var(--red); }
.status-checking { background: var(--gold); color: var(--gold); }
.hero-status strong { display: block; font-size: 14px; color: #fff; }
.hero-status p { margin: 0; line-height: 1.35; font-weight: 900; color: #fff; }
.hero-status small { color: var(--text-color-); }

/* Template sections */
.why-us,
.packages,
.feedbacks,
.free-support,
.footer { width: 100%; margin-top: 14vh; }
.why-us .container { width: 90%; max-width: 1260px; margin: auto; display: grid; grid-template-columns: minmax(320px,.8fr) minmax(0,1fr); grid-gap: 6vh; align-items: center; }
.why-us .image img { width: min(100%, 500px); filter: drop-shadow(0 25px 44px rgba(0,0,0,.42)); }
.why-us .content h2,
.packages h2,
.feedbacks h2,
.free-support h2 { color: #fff; font-weight: 950; font-size: var(--font-size-2-); line-height: 1.05; margin-top: 12px; }
.why-us .content p,
.free-support p { color: var(--text-color-); font-size: var(--font-size-4-); line-height: var(--pc-text-line-height-); margin-top: 18px; }
.quick-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 20px; }
.quick-item { padding: 16px; border: 1px solid var(--white40-); border-radius: var(--default-radius-); background: rgba(255,255,255,.05); min-width: 0; }
.quick-item span { display: block; color: var(--text-color-); font-size: 13px; margin-bottom: 8px; }
.quick-item b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.packages .container,
.feedbacks .container { width: min(90%, 1180px); margin: auto; }
.packages h2 { text-align: center; }
.packages .wrapper { margin-top: 42px; display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.packages .item { flex-basis: 300px; flex-grow: 1; padding: 28px; border: 1px solid var(--white40-); border-radius: var(--default-radius-); background: rgba(255,255,255,.035); min-height: 100%; }
.packages .item.active { background: linear-gradient(145deg, rgba(150,47,254,.9), rgba(135,68,190,.68)); border-color: rgba(255,255,255,.18); }
.packages .item .title { color: #fff; font-weight: 950; font-size: var(--font-size-3-); }
.packages .item .text { color: var(--text-color-); font-size: var(--font-size-5-); margin-top: 10px; line-height: 1.6; }
.packages .item .price { color: #fff; font-size: clamp(25px, 3vw, 42px); margin-top: 18px; font-weight: 950; overflow-wrap: anywhere; }
.packages .item .price span { font-size: inherit; }
.packages .item .article { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; color: #fff; font-size: var(--font-size-5-); line-height: 1.6; }
.packages .item .article.first { margin-top: 26px; }
.mark { color: #ffb4dd; }
.packages .item .btn { width: 100%; margin-top: 28px; background: #fff; color: var(--main-color-); border-color: transparent; }
.packages .item .btn:hover { opacity: .72; background: #fff; }
.section-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 26px; }
.small-btn { padding: 11px 18px; font-weight: 900; }
.pinned-box { margin: 28px 0; padding: 24px; border: 1px solid var(--main-color50-); border-radius: var(--default-radius-); background: rgba(150,47,254,.12); }
.pinned-box h3 { margin-bottom: 14px; font-size: 22px; }
.feedbacks .wrapper { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 26px; }
.feedbacks .item,
.card.post-card,
.event-card,
.rule-line,
.command-line,
.admin-item { flex-basis: 285px; flex-grow: 1; padding: 22px; border: 1px solid var(--white40-); border-radius: var(--default-radius-); background: rgba(255,255,255,.035); transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.card.post-card:hover,
.event-card:hover,
.rule-line:hover,
.command-line:hover { background: rgba(150,47,254,.18); border-color: var(--main-color50-); transform: translateY(-3px); }
.card-image,
.event-thumb { width: 100%; height: 180px; object-fit: cover; border-radius: calc(var(--default-radius-) - 4px); margin-bottom: 16px; background: rgba(255,255,255,.06); }
.card-image.placeholder,
.event-thumb.placeholder { display: grid; place-items: center; }
.card-image.placeholder img,
.event-thumb.placeholder img { width: 64px; height: 64px; margin: auto; opacity: .8; }
.card-body { display: grid; gap: 12px; }
.card-topline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.card-meta,
.event-body small { color: var(--text-color-); font-size: 13px; }
.card-title,
.event-card h3,
.rule-line h3 { font-size: 22px; line-height: 1.2; color: #fff; }
.card-excerpt,
.event-card p,
.rule-line p,
.command-line span { color: var(--text-color-); line-height: 1.65; }
.card-actions { margin-top: 6px; }
.btn-secondary { min-height: 44px; padding: 0 20px; background: var(--main-color20-); color: #fff; border-color: var(--main-color50-); }
.event-card { display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 18px; align-items: start; }
.event-thumb { height: 150px; margin: 0; }
.event-body { display: grid; gap: 10px; }
.free-support .container { width: min(90%, 1050px); position: relative; margin: auto; padding: clamp(28px, 6vw, 76px); border-radius: var(--default-radius-); text-align: center; overflow: hidden; border: 1px solid var(--main-color-); }
.free-support .support-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22; z-index: -2; }
.free-support .container::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23,17,31,.56), rgba(23,17,31,.90)); }
.gallery-grid { margin-top: 32px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.gallery-item { position: relative; border: 1px solid var(--white40-); border-radius: var(--default-radius-); background: rgba(255,255,255,.05); overflow: hidden; aspect-ratio: 1/0.72; padding: 0; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease, opacity .25s ease; }
.gallery-item:hover img { transform: scale(1.04); opacity: .78; }
.gallery-zoom { position: absolute; left: 10px; bottom: 10px; padding: 7px 10px; border-radius: 10px; background: rgba(23,17,31,.74); font-size: 12px; font-weight: 900; }
.compact-sections { margin-top: 10vh; }
.rules-grid,
.commands-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.rule-line { display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 16px; align-items: start; }
.rule-number { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--default-radius-); background: var(--main-color20-); color: #ffcee8; font-weight: 950; }
.command-line { display: grid; grid-template-columns: minmax(130px,.45fr) minmax(0,1fr); gap: 16px; align-items: center; }
.command-line code { padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.28); color: #ffe1f1; font-weight: 900; overflow-wrap: anywhere; }
.empty { width: 100%; padding: 18px; color: var(--text-color-); border: 1px dashed var(--white40-); border-radius: var(--default-radius-); background: rgba(255,255,255,.035); }

/* Footer */
.footer .container { width: 90%; max-width: 1360px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.footer .logo { width: 160px; }
.footer .menu { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 26px; }
.codpat-footer { width: 100%; margin: 24px 0 4vh; }
.codpat-footer .container { width: 90%; max-width: 1360px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 28px; border-radius: var(--default-radius-); background: var(--white10-); color: var(--text-color-); }
.codpat-footer a { color: #fff; text-decoration: underline; font-weight: 900; }

/* Modals */
.modal,
.image-modal { position: fixed; inset: 0; z-index: 100; background: rgba(4, 3, 8, .82); backdrop-filter: blur(10px); display: grid; place-items: center; padding: 24px; }
.modal-card { width: min(820px, 100%); max-height: min(86vh, 900px); overflow: auto; padding: 28px; border: 1px solid var(--main-color50-); border-radius: var(--default-radius-); background: #21172a; position: relative; }
.modal-close,
.image-close { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--white40-); background: rgba(255,255,255,.08); color: #fff; font-size: 26px; z-index: 2; }
.modal-card h2 { font-size: var(--font-size-3-); margin: 14px 46px 4px 0; }
.modal-date { color: var(--text-color-); margin-bottom: 14px; }
.modal-image { width: 100%; max-height: 360px; object-fit: cover; border-radius: var(--default-radius-); margin-bottom: 18px; }
.modal-content { color: var(--text-color-); line-height: 1.8; }
.modal-content p + p { margin-top: 14px; }
.image-modal img { max-width: min(92vw, 1100px); max-height: 82vh; object-fit: contain; border-radius: var(--default-radius-); box-shadow: 0 24px 80px rgba(0,0,0,.48); }
.image-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 72px; border-radius: var(--default-radius-); border: 1px solid var(--white40-); background: rgba(255,255,255,.10); color: #fff; font-size: 48px; }
.image-nav.prev { left: 24px; }
.image-nav.next { right: 24px; }
.image-counter { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: rgba(0,0,0,.54); color: #fff; font-weight: 900; }

/* Admin */
.site-header { position: sticky; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.brand-gem { width: 38px; height: 38px; border-radius: 12px; display: inline-block; background: linear-gradient(150deg, var(--main-color-), #ff7ac3); }
.brand b { display: block; }
.brand small { display: block; color: var(--text-color-); font-size: 12px; }
.nav { display: flex; align-items: center; gap: 14px; }
.nav a, .nav button { color: #fff; }
.admin-main { width: min(1180px, calc(100% - 30px)); margin: 0 auto; padding: 110px 0 54px; }
.auth-card,
.admin-form,
.info-box { border: 1px solid var(--white40-); border-radius: var(--default-radius-); background: rgba(255,255,255,.04); padding: 24px; }
.auth-card { max-width: 520px; margin: 0 auto; }
.form-stack,
.admin-form { display: grid; gap: 14px; }
.admin-layout { display: grid; grid-template-columns: minmax(0,440px) minmax(0,1fr); gap: 18px; align-items: start; }
.admin-layout.wide { grid-template-columns: minmax(0,1fr) 330px; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 22px; }
.section-head h1 { font-size: var(--font-size-2-); }
.admin-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.tab { padding: 12px 16px; border: 1px solid var(--white40-); border-radius: var(--default-radius-); background: rgba(255,255,255,.06); color: #fff; font-weight: 900; }
.tab.active { background: var(--main-color-); border-color: var(--main-color-); }
label { display: grid; gap: 7px; color: #fff; font-weight: 800; }
input, textarea, select { width: 100%; padding: 12px 14px; border: 1px solid var(--white40-); border-radius: 12px; color: #fff; background: rgba(0,0,0,.22); outline: none; }
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--main-color-); }
.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.textarea-grid { align-items: start; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.message { color: #ffd7ef; min-height: 20px; }
.check-row { display: flex; flex-wrap: wrap; gap: 14px; }
.check-row label { display: flex; align-items: center; gap: 8px; }
.check-row input { width: auto; }
.admin-list { display: grid; gap: 12px; }
.admin-item { display: grid; gap: 8px; }
.admin-item-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.media-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.media-card img { width: 100%; aspect-ratio: 1/0.72; object-fit: cover; border-radius: 12px; }

@keyframes dragon-float { from { transform: translateY(0); } to { transform: translateY(-18px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media screen and (max-width: 1200px) {
  .header { display: none; }
  .mobile-header { display: block; }
  .hero { padding-top: 116px; min-height: auto; }
  .hero .container { grid-template-columns: 1fr; }
  .hero .image { display: none; }
  .why-us .container { grid-template-columns: 1fr; }
  .why-us .image { display: none; }
  .admin-main { padding-top: 112px; }
}
@media screen and (max-width: 820px) {
  .hero h1 { font-size: clamp(74px, 22vw, 112px); }
  .quick-grid,
  .gallery-grid,
  .rules-grid,
  .commands-grid,
  .settings-grid,
  .media-grid { grid-template-columns: 1fr; }
  .event-card { grid-template-columns: 1fr; }
  .footer .container,
  .codpat-footer .container,
  .section-head,
  .admin-layout,
  .admin-layout.wide { grid-template-columns: 1fr; flex-direction: column; align-items: flex-start; }
  .footer .menu { justify-content: flex-start; }
  .free-support .container { width: min(92%, 100%); }
  .command-line { grid-template-columns: 1fr; }
  .image-nav { width: 44px; height: 60px; font-size: 38px; }
  .image-nav.prev { left: 8px; }
  .image-nav.next { right: 8px; }
}
@media screen and (max-width: 520px) {
  .mobile-header .join-btn { padding: 10px 14px; }
  .hero .btns { display: grid; grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .packages .item { flex-basis: 100%; }
  .modal { padding: 12px; }
  .modal-card { padding: 20px; }
}