/* ==========================================================================
   Gloria2 - Metin2 Server Website
   Theme: dark fantasy, gold + deep red accents
   ========================================================================== */

:root {
    --color-bg: #120a09;
    --color-bg-alt: #1c110f;
    --color-panel: #231512;
    --color-panel-border: #3a231d;
    --color-gold: #d9b25c;
    --color-gold-light: #f1dca0;
    --color-red: #9c1c1c;
    --color-red-light: #c62b2b;
    --color-text: #e8ddce;
    --color-text-muted: #b0a290;
    --font-display: 'Cinzel', 'Cinzel Decorative', Georgia, serif;
    --font-body: 'Merriweather', Georgia, 'Times New Roman', serif;
    --shadow-glow: 0 0 24px rgba(217, 178, 92, 0.25);
    --radius: 6px;
}

* { box-sizing: border-box; }

/* custom cursor for every element / interaction on the site */
*, *::before, *::after {
    cursor: url('img/cursor.cur'), auto;
}

html {
    scroll-behavior: smooth;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    height: 100%;
}

/* scroll still works, the scrollbar itself is just not drawn */
html {
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* legacy Edge / IE */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;              /* Chrome, Edge, Safari */
    width: 0;
    height: 0;
}

body {
    background-image:
        radial-gradient(ellipse at top, rgba(156, 28, 28, 0.12), transparent 60%),
        linear-gradient(180deg, var(--color-bg) 0%, #0a0504 100%);
    background-attachment: fixed;
}

a {
    color: var(--color-gold-light);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover { color: var(--color-red-light); }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--color-gold);
    letter-spacing: 0.5px;
    margin: 0 0 0.6em;
    line-height: 1.25;
}

h1 { font-size: 2.6rem; text-transform: uppercase; }
h2 { font-size: 1.9rem; text-transform: uppercase; }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1em; color: var(--color-text); }

img { max-width: 100%; display: block; }

/* ---------- Full-bleed blurred backdrop ---------- */

.page-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(5, 2, 1, 0.55), rgba(5, 2, 1, 0.78)),
        url('img/hero-banner.jpg');
    background-size: cover;
    background-position: center;
    filter: blur(32px) brightness(0.75) saturate(1.15);
    transform: scale(1.15);
    pointer-events: none;
}

/* Grunge grain: a subtle worn/dirty texture over the whole page, kept
   outside .page-bg so the blur filter above doesn't soften it away. */
.page-grunge {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: url('img/ambient/grunge.jpg');
    background-repeat: repeat;
    background-size: 400px 400px;
    mix-blend-mode: overlay;
    opacity: 0.5;
    pointer-events: none;
}

/* Village silhouette resting on the horizon, hinting at the world beyond
   the parchment without competing with the actual content. */
.page-village {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 200px;
    z-index: 0;
    background-image: url('img/ambient/village.svg');
    background-repeat: repeat-x;
    background-position: bottom center;
    background-size: 640px 200px;
    opacity: 0.4;
    filter: blur(1px);
    pointer-events: none;
}

@media (max-width: 700px) {
    .page-village { height: 130px; background-size: 420px 130px; }
}

/* Faint scattered "ruyi" cloud motifs - a small nod to the oriental fantasy
   ornamentation Metin2 itself uses on panels/borders, kept extremely subtle
   so it reads as texture rather than pattern. */
.page-clouds {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: url('img/ambient/oriental-clouds.svg');
    background-repeat: repeat;
    background-size: 520px 520px;
    opacity: 0.5;
    pointer-events: none;
}

/* Large sinuous dragon silhouettes bleeding off the corners - fixed, very
   low opacity, purely atmospheric so the page doesn't feel like a blank
   dark box between sections. */
.page-dragon-br {
    position: fixed;
    left: -60px;
    bottom: -50px;
    width: 340px;
    height: 470px;
    z-index: 0;
    background-image: url('img/ambient/dragon-corner.svg');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.16;
    pointer-events: none;
}

.page-dragon-tl {
    position: fixed;
    right: -70px;
    top: -60px;
    width: 300px;
    height: 415px;
    z-index: 0;
    background-image: url('img/ambient/dragon-corner.svg');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.13;
    transform: rotate(180deg);
    pointer-events: none;
}

/* Drifting embers - a handful of slow-rising golden sparks for a touch of
   living atmosphere across the whole page. */
.page-embers {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.page-embers .ember {
    position: absolute;
    bottom: -10px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color-gold-light);
    opacity: 0;
    box-shadow: 0 0 6px 1px rgba(241, 220, 160, 0.8);
    animation: ember-rise linear infinite;
}

.page-embers .ember:nth-child(1)  { left: 6%;  animation-duration: 14s; animation-delay: 0s;  }
.page-embers .ember:nth-child(2)  { left: 18%; animation-duration: 18s; animation-delay: 3s;  }
.page-embers .ember:nth-child(3)  { left: 32%; animation-duration: 12s; animation-delay: 6s;  }
.page-embers .ember:nth-child(4)  { left: 47%; animation-duration: 20s; animation-delay: 1s;  }
.page-embers .ember:nth-child(5)  { left: 61%; animation-duration: 15s; animation-delay: 9s;  }
.page-embers .ember:nth-child(6)  { left: 74%; animation-duration: 22s; animation-delay: 4s;  }
.page-embers .ember:nth-child(7)  { left: 85%; animation-duration: 16s; animation-delay: 7s;  }
.page-embers .ember:nth-child(8)  { left: 94%; animation-duration: 19s; animation-delay: 11s; }

@keyframes ember-rise {
    0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
    8%   { opacity: 0.85; }
    92%  { opacity: 0.6; }
    100% { transform: translate(18px, -105vh) scale(1); opacity: 0; }
}

@media (max-width: 700px) {
    .page-dragon-br { width: 200px; height: 276px; left: -40px; bottom: -30px; }
    .page-dragon-tl { width: 170px; height: 235px; right: -40px; top: -30px; }
}

/* ---------- Centered content column ---------- */

.site-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 1000px;
    margin: 0 auto;
    background:
        linear-gradient(
            180deg,
            transparent 0px,
            transparent 200px,
            var(--color-bg) 360px,
            var(--color-bg) calc(100% - 260px),
            transparent calc(100% - 100px),
            transparent 100%
        );
    box-shadow: 0 0 120px 30px rgba(0, 0, 0, 0.55);
}

.container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Header ---------- */

.site-header {
    position: relative;
    background: transparent;
    border-bottom: none;
    padding: 64px 0 28px;
}

.header-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.brand-logo {
    height: 190px;
    width: auto;
    filter: drop-shadow(0 0 30px rgba(217, 178, 92, 0.35));
}

@media (max-width: 720px) {
    .brand-logo { height: 110px; }
}

/* ---------- Section divider (ornate heading label) ---------- */

.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 0 auto 2.2em;
    max-width: 640px;
}

.section-divider::before,
.section-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-gold) 50%, transparent);
}

.section-divider span {
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-gold);
    white-space: nowrap;
    padding: 0 4px;
}

/* ---------- Ornate box (framed content panel) ---------- */

.ornate-box {
    position: relative;
    background: var(--color-panel);
    border: 1px solid var(--color-panel-border);
    border-radius: var(--radius);
    padding: 36px 44px;
    margin: 0 auto;
}

.ornate-box::before,
.ornate-box::after {
    content: "";
    position: absolute;
    width: 34px;
    height: 34px;
    border: 2px solid var(--color-gold);
    opacity: 0.8;
}

.ornate-box::before {
    top: -9px;
    left: -9px;
    border-right: none;
    border-bottom: none;
}

.ornate-box::after {
    bottom: -9px;
    right: -9px;
    border-left: none;
    border-top: none;
}

.ornate-box h2 {
    text-align: center;
}

.ornate-box p:last-child {
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .ornate-box { padding: 28px 22px; }
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.main-nav ul {
    list-style: none;
    display: flex;
    gap: 26px;
    margin: 0;
    padding: 0;
}

.main-nav ul li a {
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text);
    padding: 6px 2px;
    border-bottom: 2px solid transparent;
}

.main-nav ul li a:hover {
    color: var(--color-gold-light);
    border-bottom-color: var(--color-gold);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: 1px solid var(--color-panel-border);
    border-radius: 4px;
    padding: 8px 10px;
    cursor: pointer;
}
.nav-toggle span {
    width: 20px;
    height: 2px;
    background: var(--color-gold);
    display: block;
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 12px 28px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
}

.btn-primary {
    background: linear-gradient(180deg, var(--color-red-light), var(--color-red));
    color: #fff1d6;
    border-color: #5c0f0f;
    box-shadow: 0 4px 14px rgba(156, 28, 28, 0.35);
}
.btn-primary:hover {
    color: #fff;
    box-shadow: 0 4px 20px rgba(198, 43, 43, 0.55);
}

.btn-outline {
    background: transparent;
    color: var(--color-gold);
    border-color: var(--color-gold);
}
.btn-outline:hover {
    background: var(--color-gold);
    color: #1a0e0c;
}

/* ---------- Hero ---------- */

.hero {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    background-image: linear-gradient(90deg, rgba(10,5,4,0.94) 20%, rgba(10,5,4,0.55) 60%, rgba(10,5,4,0.2) 100%), url('img/hero-banner.jpg');
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--color-panel-border);
    overflow: hidden;
}

.hero-character {
    position: absolute;
    right: -20px;
    bottom: 0;
    max-height: 100%;
    width: auto;
    max-width: 46%;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.6));
}

.hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1160px;
    margin: 0 auto;
    padding: 60px 24px;
    width: 100%;
}

.hero-content { max-width: 560px; }

.hero-kicker {
    font-family: var(--font-display);
    color: var(--color-red-light);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.85rem;
    margin-bottom: 14px;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 0.3em;
}

.hero-tagline {
    font-family: var(--font-display);
    color: var(--color-gold-light);
    font-size: 1.1rem;
    letter-spacing: 1px;
    margin-bottom: 1.2em;
}

.hero-desc { color: var(--color-text-muted); }

.hero-actions {
    display: flex;
    gap: 16px;
    margin-top: 1.6em;
    flex-wrap: wrap;
}

.hero-stats {
    display: flex;
    gap: 32px;
    margin-top: 2.4em;
    flex-wrap: wrap;
}
.hero-stats .stat-value {
    font-family: var(--font-display);
    color: var(--color-gold);
    font-size: 1.6rem;
    display: block;
}
.hero-stats .stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-muted);
}

/* ---------- Sections ---------- */

.section {
    padding: 72px 0;
    scroll-margin-top: 84px;
}

.section-alt {
    background: var(--color-bg-alt);
    border-top: 1px solid var(--color-panel-border);
    border-bottom: 1px solid var(--color-panel-border);
}

.section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 3em;
}

.section-header p { color: var(--color-text-muted); }

.page-header {
    padding: 56px 0 32px;
    text-align: center;
    border-bottom: 1px solid var(--color-panel-border);
    background: linear-gradient(180deg, rgba(156,28,28,0.10), transparent);
}
.page-header p { color: var(--color-text-muted); max-width: 620px; margin: 0 auto; }

/* ---------- Cards / grid ---------- */

.grid {
    display: grid;
    gap: 24px;
}
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
    background: var(--color-panel);
    border: 1px solid var(--color-panel-border);
    border-radius: var(--radius);
    padding: 28px;
}

.card-icon {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--color-red-light);
    margin-bottom: 0.5em;
}

.news-card {
    background: var(--color-panel);
    border: 1px solid var(--color-panel-border);
    border-radius: var(--radius);
    padding: 26px;
    margin-bottom: 20px;
}
.news-date {
    font-family: var(--font-display);
    color: var(--color-red-light);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.4em;
}
.news-tag {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: rgba(217, 178, 92, 0.12);
    color: var(--color-gold);
    border: 1px solid var(--color-panel-border);
    padding: 3px 10px;
    border-radius: 999px;
    margin-left: 10px;
}

/* ---------- Tables (rankings) ---------- */

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-panel-border);
    border-radius: var(--radius);
}

table.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-panel);
}
table.data-table th {
    font-family: var(--font-display);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.78rem;
    color: var(--color-gold);
    background: rgba(0,0,0,0.25);
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-panel-border);
}
table.data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(58, 35, 29, 0.6);
    color: var(--color-text);
}
table.data-table tr:last-child td { border-bottom: none; }
table.data-table tr:hover td { background: rgba(217, 178, 92, 0.05); }

.rank-1 { color: var(--color-gold-light); font-weight: bold; }
.rank-2 { color: #d7d7d7; font-weight: bold; }
.rank-3 { color: #c98a4b; font-weight: bold; }

.ranking-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

/* ---------- Rules list ---------- */

.rules-list {
    counter-reset: rule;
    list-style: none;
    padding: 0;
    margin: 0;
}
.rules-list > li {
    counter-increment: rule;
    position: relative;
    padding: 18px 20px 18px 60px;
    background: var(--color-panel);
    border: 1px solid var(--color-panel-border);
    border-radius: var(--radius);
    margin-bottom: 14px;
}
.rules-list > li::before {
    content: counter(rule);
    position: absolute;
    left: 18px;
    top: 16px;
    font-family: var(--font-display);
    color: var(--color-red-light);
    font-size: 1.2rem;
    border: 1px solid var(--color-panel-border);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rules-list h4 { margin-bottom: 0.3em; }
.rules-list p { margin: 0; color: var(--color-text-muted); }

.rules-note {
    background: rgba(156, 28, 28, 0.12);
    border: 1px solid var(--color-red);
    border-radius: var(--radius);
    padding: 18px 22px;
    margin-top: 32px;
    color: var(--color-text-muted);
}

/* ---------- Downloads ---------- */

.download-card {
    background: var(--color-panel);
    border: 1px solid var(--color-panel-border);
    border-radius: var(--radius);
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.download-meta { color: var(--color-text-muted); font-size: 0.9rem; }

.steps-list {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 18px;
}
.steps-list li {
    counter-increment: step;
    position: relative;
    padding-left: 46px;
}
.steps-list li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-red);
    color: #fff1d6;
    font-family: var(--font-display);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Footer ---------- */

.site-footer {
    margin-top: auto;
    background: #0a0504;
    border-top: 1px solid var(--color-panel-border);
    padding-top: 48px;
}
.footer-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px 32px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 32px;
}
.footer-logo { height: 34px; margin-bottom: 10px; }
.footer-brand p { color: var(--color-text-muted); font-size: 0.9rem; }
.footer-links h4, .footer-social h4 {
    font-family: var(--font-display);
    color: var(--color-gold);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.8em;
}
.footer-links ul, .footer-social ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
}
.footer-links a, .footer-social a {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}
.footer-links a:hover, .footer-social a:hover { color: var(--color-gold-light); }

.footer-bottom {
    border-top: 1px solid var(--color-panel-border);
    text-align: center;
    padding: 18px 24px;
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .footer-inner { grid-template-columns: 1fr 1fr; }
    .hero-character { max-width: 38%; opacity: 0.5; }
}

@media (max-width: 720px) {
    .nav-toggle { display: flex; }
    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(10,5,4,0.98);
        border-bottom: 1px solid var(--color-panel-border);
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 24px;
        display: none;
        gap: 16px;
    }
    .main-nav.open { display: flex; }
    .main-nav ul { flex-direction: column; gap: 14px; }
    .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: 1fr; }
    .hero { min-height: auto; }
    .hero-character { display: none; }
    .hero h1 { font-size: 2.1rem; }
    .download-card { flex-direction: column; align-items: flex-start; }
}

/* ---------- Feature panels (sistemas) ---------- */

.feature-panel {
    position: relative;
    background: var(--color-panel);
    border: 1px solid var(--color-panel-border);
    border-radius: var(--radius);
    padding: 30px 28px;
    text-align: center;
}

.feature-panel::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(217, 178, 92, 0.15);
    border-radius: 3px;
    pointer-events: none;
}

.feature-icon {
    width: 44px;
    height: 44px;
    display: block;
    margin: 0 auto 18px;
    color: var(--color-gold);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.feature-panel h3 {
    margin-bottom: 0.5em;
}

.feature-panel p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin: 0;
}

/* ---------- Daily rewards strip ---------- */

.reward-strip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
}

.reward-day {
    background: var(--color-panel);
    border: 1px solid var(--color-panel-border);
    border-radius: var(--radius);
    padding: 18px 8px;
    text-align: center;
}

.reward-day-label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-red-light);
    margin-bottom: 8px;
}

.reward-icon {
    font-size: 1.6rem;
    margin-bottom: 8px;
}

.reward-name {
    display: block;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    line-height: 1.3;
}

.reward-day-final {
    background: linear-gradient(180deg, rgba(217, 178, 92, 0.16), var(--color-panel));
    border-color: var(--color-gold);
}
.reward-day-final .reward-name {
    color: var(--color-gold-light);
    font-weight: bold;
}

@media (max-width: 900px) {
    .reward-strip { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
    .reward-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Level badge (mapas / bosses) ---------- */

.level-badge {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-gold);
    background: rgba(217, 178, 92, 0.12);
    border: 1px solid var(--color-panel-border);
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}


/* ---------- Class cards (Guerreiro / Ninja / Sura / Xama) ---------- */

.class-card {
    background: var(--color-panel);
    border: 1px solid var(--color-panel-border);
    border-radius: var(--radius);
    overflow: hidden;
    text-align: center;
}

.class-image {
    position: relative;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(217, 178, 92, 0.14), transparent 65%),
        var(--color-bg-alt);
    border-bottom: 1px solid var(--color-panel-border);
}

.class-icon {
    width: 56%;
    height: 56%;
    color: var(--color-gold);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 14px rgba(217, 178, 92, 0.25));
}

.class-photo {
    width: 84%;
    height: 84%;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.55));
}

.class-card .class-name {
    font-family: var(--font-display);
    color: var(--color-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.1rem;
    margin: 18px 0 8px;
}

.class-card p {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    padding: 0 18px 22px;
    margin: 0;
}

@media (max-width: 560px) {
    .class-image { aspect-ratio: 4 / 3; }
}

/* ---------- Screenshot frame (feature previews) ---------- */

.screenshot-caption {
    margin: 1.6em auto 0;
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-gold);
}

.screenshot-frame {
    display: block;
    width: 100%;
    max-width: 640px;
    margin: 1.8em auto 0;
    padding: 14px;
    border: 1px solid var(--color-panel-border);
    border-radius: var(--radius);
    box-sizing: border-box;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.screenshot-frame img {
    width: 100%;
    border-radius: 4px;
    display: block;
}

/* ---------- Topic nav (rotated squares, outside the scroll) ---------- */

.topic-nav {
    position: fixed;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: flex-start;
    width: max-content;
    max-height: 82vh;
    overflow-y: auto;
    overflow-x: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 6px 24px 6px 2px;
}

.topic-nav::-webkit-scrollbar {
    display: none;
}

.topic-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.topic-dot,
.topic-subdot {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    outline: none;
}

.topic-dot:focus,
.topic-subdot:focus {
    outline: none;
}

.topic-dot:focus-visible,
.topic-subdot:focus-visible {
    outline: 1px dashed var(--color-gold-light);
    outline-offset: 6px;
}

.topic-diamond {
    position: relative;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: transparent;
    border: 2px solid var(--color-gold);
    transform: rotate(45deg);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Inner square: stays empty until the item is active, so the outer square
   always reads as an outline and the active state shows as a filled core */
.topic-diamond::after {
    content: "";
    position: absolute;
    inset: 3px;
    background: transparent;
    transition: background 0.25s ease;
}

.topic-diamond--sub {
    width: 9px;
    height: 9px;
    border-width: 1.5px;
    border-color: var(--color-text-muted);
}

.topic-diamond--sub::after {
    inset: 2px;
}

.topic-label {
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
    opacity: 0.75;
    transition: opacity 0.25s ease, color 0.25s ease, text-shadow 0.25s ease;
}

.topic-label--sub {
    font-size: 0.62rem;
    letter-spacing: 1px;
    opacity: 0.55;
}

.topic-dot:hover .topic-diamond,
.topic-subdot:hover .topic-diamond {
    border-color: var(--color-gold-light);
}

.topic-dot:hover .topic-label,
.topic-subdot:hover .topic-label {
    opacity: 1;
    color: var(--color-text);
}

/* Sub-item list: collapsed by default, expands under the active topic group */
.topic-subs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-left: 6px;
    padding-left: 13px;
    border-left: 1px solid rgba(217, 178, 92, 0.25);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.3s ease, margin 0.35s ease;
}

.topic-group.active .topic-subs {
    max-height: 400px;
    opacity: 1;
}

/* Active MAIN topic: filled diamond + full-strength label + breathing glow */
.topic-dot.active .topic-label {
    opacity: 1;
    color: var(--color-gold-light);
}

.topic-dot.active .topic-diamond {
    border-color: var(--color-gold);
    transform: rotate(45deg) scale(1.25);
    animation: topic-glow 2.2s ease-in-out infinite;
}

.topic-dot.active .topic-diamond::after {
    background: var(--color-gold);
}

/* Active SUB item: filled small diamond + brighter label + its own glow */
.topic-subdot.active .topic-label {
    opacity: 1;
    color: var(--color-gold-light);
    text-shadow: 0 0 8px rgba(217, 178, 92, 0.5);
}

.topic-subdot.active .topic-diamond--sub {
    border-color: var(--color-gold);
    transform: rotate(45deg) scale(1.35);
    animation: topic-glow-sub 2.2s ease-in-out infinite;
}

.topic-subdot.active .topic-diamond--sub::after {
    background: var(--color-gold);
}

@keyframes topic-glow {
    0%, 100% { box-shadow: 0 0 8px rgba(217, 178, 92, 0.55), 0 0 2px rgba(217, 178, 92, 0.8); }
    50%      { box-shadow: 0 0 22px rgba(217, 178, 92, 0.95), 0 0 6px rgba(255, 220, 150, 0.9); }
}

@keyframes topic-glow-sub {
    0%, 100% { box-shadow: 0 0 5px rgba(217, 178, 92, 0.55); }
    50%      { box-shadow: 0 0 14px rgba(217, 178, 92, 0.9); }
}

@media (max-width: 1240px) {
    .topic-nav { display: none; }
}

/* ---------- Character select (Metin2-style, circular stage) ---------- */

.charselect-stage {
    position: relative;
    height: 420px;
    max-width: 680px;
    margin: 1.8em auto 1em;
    padding-top: 20px;
    perspective: 1100px;
    border-radius: 6px;
}

/* The wheel is a true 4-seat carousel: each seat sits at a fixed angle
   (0/90/180/270deg) around it at a fixed radius. Bringing a seat "to
   front" simply rotates the whole wheel by a multiple of 90deg, so every
   character always swings through the same circular arc, no matter which
   one is clicked or where it currently stands. */
.charselect-wheel {
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.charselect-seat {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 168px;
    margin-left: -84px;
    background: transparent;
    border: none;
    padding: 0;
    transform-style: preserve-3d;
    /* No opacity/filter here on purpose: applying either to an element that
       carries a 3D transform makes browsers flatten its descendants'
       preserve-3d, which turned the side/back characters edge-on and
       invisible. The dimming lives on .charselect-photo (a leaf) instead. */
}

/* Billboard: counter-rotates in sync with the wheel so the flat character
   art always faces the viewer instead of turning edge-on as it orbits. */
.charselect-billboard {
    display: block;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.charselect-photo {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
    opacity: 1;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
    transition: opacity 0.8s ease, filter 0.8s ease;
}

/* Role = current position around the wheel, recomputed after every
   rotation. Front is large/sharp; side and back seats dim and desaturate
   (their size already falls off naturally from the 3D perspective). */
.charselect-seat.role-front {
    z-index: 5;
}

.charselect-seat.role-right,
.charselect-seat.role-left {
    z-index: 3;
}

.charselect-seat.role-back {
    z-index: 1;
}

.charselect-seat.role-right .charselect-photo,
.charselect-seat.role-left .charselect-photo {
    opacity: 0.7;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55)) grayscale(40%) brightness(0.52);
}

.charselect-seat.role-back .charselect-photo {
    opacity: 0.55;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55)) grayscale(55%) brightness(0.4);
}

.charselect-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 0.4em;
}

.charselect-arrow {
    background: transparent;
    border: none;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: filter 0.2s ease, transform 0.2s ease;
}

.charselect-arrow img {
    width: 136px;
    height: auto;
    display: block;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.6));
    transition: filter 0.2s ease;
}

.charselect-arrow:hover {
    transform: scale(1.08);
}

.charselect-arrow:hover img {
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 10px rgba(217, 178, 92, 0.85));
}

/* ---------- Transmutations (PvP / PvM, side by side) ---------- */

.transmute-columns {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 28px;
    margin: 2em auto;
    flex-wrap: wrap;
}

.transmute-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 1 300px;
}

.transmute-divider {
    width: 1px;
    align-self: stretch;
    flex-shrink: 0;
    background: linear-gradient(to bottom, transparent, var(--color-gold) 12%, var(--color-gold) 88%, transparent);
}

.transmute-badge {
    width: 100px;
    height: 100px;
    display: block;
    margin: 0 auto 1em;
}

.transmute-slots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 256px;
    row-gap: 12px;
}

.transmute-slot {
    position: relative;
    width: 54px;
    height: 54px;
    flex-shrink: 0;
}

.transmute-slot img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Item slots (PvP): the frame sits full-size, the item icon floats
   centered on top of it, scaled down so it reads like an inventory slot. */
.transmute-slot .slot-frame {
    position: absolute;
    inset: 0;
}

.transmute-slot .slot-item {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    max-width: 58%;
    max-height: 72%;
    object-fit: contain;
}

.transmute-slot .slot-item[src=""] {
    display: none;
}

@media (max-width: 620px) {
    .transmute-columns { flex-direction: column; align-items: center; gap: 1.6em; }
    .transmute-divider { width: 60%; height: 1px; align-self: center; background: linear-gradient(to right, transparent, var(--color-gold) 12%, var(--color-gold) 88%, transparent); }
}

@media (max-width: 620px) {
    .charselect-stage { height: 340px; }
    .charselect-seat { width: 128px; margin-left: -64px; }
}

/* ---------- Guestbook / Assinatura ---------- */

.guestbook {
    margin: 2em auto 0;
    max-width: 480px;
}

.guestbook-line {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 84px;
    padding: 18px 12px 14px;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--color-gold);
    text-align: center;
    font: inherit;
}

.guestbook-line:hover {
    border-bottom-color: var(--color-gold-light);
}

.guestbook-hint {
    display: block;
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    opacity: 0.8;
    transition: opacity 0.5s ease 0.15s;
}

.guestbook.is-signed .guestbook-hint {
    opacity: 0;
}

.guestbook-signature {
    position: absolute;
    left: 50%;
    top: -22px;
    transform: translateX(-50%);
    width: min(380px, 86vw);
    height: 128px;
    pointer-events: none;
}

/* A real cursive signature font (single connected stroke look). Generous
   padding around the text keeps its tall loops/flourishes from being cut
   by the clip-path box below - script fonts paint well outside the plain
   line-height metrics. */
.sig-text {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    display: inline-block;
    white-space: nowrap;
    padding: 32px 22px 24px;
    font-family: 'Mrs Saint Delafield', 'Dancing Script', cursive;
    font-size: clamp(2.6rem, 9vw, 3.6rem);
    line-height: 1;
    color: var(--color-gold-light);
    -webkit-text-stroke: 0.3px var(--color-gold);
    text-shadow: 0 0 0 rgba(217, 178, 92, 0);
    /* Reveal via a slanted parallelogram (not a straight vertical wipe) so
       the sweeping edge follows the forward lean of the cursive strokes,
       reading as the pen actually tracing the letters left to right. */
    clip-path: polygon(0% 0%, 0% 0%, -18% 100%, 0% 100%);
    transition: clip-path 1.8s cubic-bezier(0.55, 0.05, 0.4, 1), text-shadow 1.8s ease;
}

.guestbook.is-signed .sig-text {
    clip-path: polygon(0% 0%, 118% 0%, 100% 100%, 0% 100%);
    text-shadow: 0 0 12px rgba(217, 178, 92, 0.9);
}

.guestbook-sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.guestbook-sparkles .sparkle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--color-gold-light);
    transform: rotate(45deg) scale(0);
    opacity: 0;
    box-shadow: 0 0 6px 1px rgba(241, 220, 160, 0.9);
}

.guestbook.is-signed .guestbook-sparkles .sparkle {
    animation: sparkle-twinkle 1s ease-out forwards;
}

.guestbook-sparkles .sparkle:nth-child(1) { top: 4px;  left: 18%; animation-delay: 0.05s; }
.guestbook-sparkles .sparkle:nth-child(2) { top: 34px; left: 8%;  animation-delay: 0.25s; }
.guestbook-sparkles .sparkle:nth-child(3) { top: 2px;  left: 46%; animation-delay: 0.4s;  }
.guestbook-sparkles .sparkle:nth-child(4) { top: 30px; left: 62%; animation-delay: 0.15s; }
.guestbook-sparkles .sparkle:nth-child(5) { top: 8px;  left: 78%; animation-delay: 0.55s; }
.guestbook-sparkles .sparkle:nth-child(6) { top: 40px; left: 90%; animation-delay: 0.35s; }

@keyframes sparkle-twinkle {
    0%   { transform: rotate(45deg) scale(0);    opacity: 0; }
    40%  { transform: rotate(45deg) scale(1.15); opacity: 1; }
    100% { transform: rotate(45deg) scale(0);    opacity: 0; }
}

.guestbook-count {
    margin-top: 1.4em;
    font-family: var(--font-display);
    font-size: 0.95rem;
    letter-spacing: 1px;
    color: var(--color-text-muted);
}

.guestbook-count strong {
    color: var(--color-gold-light);
    font-size: 1.15rem;
}