/* ============================================================================
   ZenoCMS — Metin2 Homepage Theme
   ----------------------------------------------------------------------------
   Dark fantasy theme (bronze / gold on deep brown), inspired by classic
   Metin2 private-server homepages. Everything is driven by the tokens below —
   change the palette once and the whole site follows.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------ */
:root {
    /* Palette — backgrounds */
    --z-bg:            #131009;
    --z-bg-2:          #1a150c;
    --z-surface:       rgba(38, 30, 19, 0.92);
    --z-surface-2:     #241d12;
    --z-surface-3:     #2c2314;
    --z-input:         #181208;

    /* Palette — lines & accents */
    --z-line:          rgba(201, 165, 92, 0.16);
    --z-line-strong:   rgba(201, 165, 92, 0.34);
    --z-gold:          #c9a55c;
    --z-gold-light:    #ecd096;
    --z-gold-deep:     #8a6a34;
    --z-accent:        #d98e32;

    /* Palette — text */
    --z-text:          #ece2c8;
    --z-text-2:        #b3a582;
    --z-muted:         #7d7057;

    /* Palette — states & misc */
    --z-green:         #8fd14f;
    --z-red:           #d35b4a;
    --z-discord:       #5865f2;
    --z-rank-silver:   #cfd4d9;
    --z-rank-bronze:   #cf9061;

    /* Typography */
    --z-font-display:  'Cinzel', 'Times New Roman', serif;
    --z-font-body:     'Onest', 'Segoe UI', Roboto, sans-serif;

    /* Layout */
    --z-max:           1400px;
    --z-col-left:      300px;
    --z-gap:           20px;
    --z-header-h:      64px;

    /* Shape & depth */
    --z-radius-sm:     6px;
    --z-radius:        10px;
    --z-radius-lg:     14px;
    --z-shadow-panel:  0 14px 34px rgba(0, 0, 0, 0.45);
    --z-glow-gold:     0 0 0 1px rgba(236, 208, 150, 0.10), 0 8px 26px rgba(0, 0, 0, 0.5);

    /* Motion */
    --z-ease:          200ms ease;
}


/* ---------------------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--z-font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--z-text);
    background: var(--z-bg);
    -webkit-font-smoothing: antialiased;
}

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

a { color: var(--z-gold-light); text-decoration: none; transition: color var(--z-ease); }
a:hover { color: var(--z-accent); }

h1, h2, h3, h4 { font-family: var(--z-font-display); margin: 0; }

button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
}

::selection { background: var(--z-gold); color: #1a1408; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--z-bg-2); }
::-webkit-scrollbar-thumb { background: #3d3322; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--z-gold-deep); }


/* ---------------------------------------------------------------------------
   3. Page background
   ------------------------------------------------------------------------ */
.page-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(19, 15, 9, 0.94) 0px, rgba(19, 15, 9, 0.72) 110px, transparent 170px),
        radial-gradient(90% 55% at 50% -8%, rgba(217, 142, 50, 0.10), transparent 60%),
        linear-gradient(180deg, rgba(19, 16, 9, 0.45) 0%, rgba(19, 16, 9, 0.72) 45%, rgba(15, 12, 7, 0.88) 100%),
        radial-gradient(120% 90% at 50% 110%, rgba(0, 0, 0, 0.55), transparent 60%),
        url("../images/ui/hero-bg-alt2.jpg") center 30% / cover no-repeat,
        linear-gradient(180deg, #1c150c 0%, var(--z-bg) 45%, #0f0c07 100%);
}


/* ---------------------------------------------------------------------------
   4. Utilities & shared bits
   ------------------------------------------------------------------------ */
.container {
    width: 100%;
    max-width: var(--z-max);
    margin-inline: auto;
    padding-inline: 20px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--z-radius-sm);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.04em;
    transition: all var(--z-ease);
}

.btn--gold {
    color: #241a08;
    background: linear-gradient(180deg, var(--z-gold-light), var(--z-gold) 55%, var(--z-gold-deep));
    border: 1px solid rgba(255, 226, 160, 0.35);
    box-shadow: 0 4px 14px rgba(201, 165, 92, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    text-shadow: 0 1px 0 rgba(255, 240, 200, 0.35);
}

.btn--gold:hover {
    color: #241a08;
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.btn--outline-gold {
    color: var(--z-gold-light);
    border: 1px solid var(--z-line-strong);
    background: rgba(201, 165, 92, 0.06);
}

.btn--outline-gold:hover {
    color: #241a08;
    background: var(--z-gold);
    border-color: var(--z-gold);
}

.btn--block { width: 100%; }

.flag {
    display: inline-block;
    width: 20px;
    height: 14px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.flag--ro { background: linear-gradient(90deg, #002b7f 33.3%, #fcd116 33.3% 66.6%, #ce1126 66.6%); }


/* ---------------------------------------------------------------------------
   5. Header / navbar
   ------------------------------------------------------------------------ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--z-header-h);
    background: rgba(19, 15, 9, 0.72);
    border-bottom: 1px solid var(--z-line);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: background var(--z-ease), box-shadow var(--z-ease);
}

.site-header.is-scrolled {
    background: rgba(19, 15, 9, 0.94);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.site-header__inner {
    max-width: var(--z-max);
    height: 100%;
    margin-inline: auto;
    padding-inline: 20px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--z-gold-light);
}

.brand__mark { width: 30px; height: 30px; color: var(--z-gold); }

.brand__name {
    font-family: var(--z-font-display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0.14em;
    background: linear-gradient(180deg, #f4e0a8 0%, var(--z-gold) 60%, #96702f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
}

.main-nav__link {
    position: relative;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--z-text-2);
}

.main-nav__link::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--z-gold), transparent);
    opacity: 0;
    transition: opacity var(--z-ease);
}

.main-nav__link:hover,
.main-nav__link.is-active { color: var(--z-gold-light); }

.main-nav__link:hover::after,
.main-nav__link.is-active::after { opacity: 1; }

.header-side {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lang-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius-sm);
    color: var(--z-text-2);
    font-size: 12px;
    font-weight: 600;
    transition: border-color var(--z-ease), color var(--z-ease);
}

.lang-switch:hover { border-color: var(--z-line-strong); color: var(--z-gold-light); }
.lang-switch svg { width: 10px; height: 10px; }

.nav-burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
}

.nav-burger span {
    width: 20px;
    height: 2px;
    background: var(--z-gold);
    border-radius: 2px;
    transition: transform var(--z-ease), opacity var(--z-ease);
}


/* ---------------------------------------------------------------------------
   6. Layout
   ------------------------------------------------------------------------ */
.layout {
    display: grid;
    grid-template-columns: var(--z-col-left) minmax(0, 1fr);
    gap: var(--z-gap);
    align-items: start;
    padding-top: 26px;
    padding-bottom: 40px;
}

.layout__col {
    display: flex;
    flex-direction: column;
    gap: var(--z-gap);
    min-width: 0;
}


/* ---------------------------------------------------------------------------
   7. Panel component
   ------------------------------------------------------------------------ */
.panel {
    position: relative;
    background: linear-gradient(165deg, rgba(48, 39, 25, 0.94), rgba(26, 20, 12, 0.94));
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius);
    box-shadow: var(--z-shadow-panel), inset 0 1px 0 rgba(255, 226, 160, 0.07);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
}

.panel::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(120% 60% at 50% 0%, rgba(236, 208, 150, 0.06), transparent 55%);
}

/* engraved gold corner ornaments on every panel */
.panel::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .8;
    background:
        url('../images/ui/corner-br.svg') right bottom / 42px 42px no-repeat,
        url('../images/ui/corner-bl.svg') left bottom / 42px 42px no-repeat;
}

.panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--z-line);
}

.panel__title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.10em;
    color: var(--z-gold-light);
}

.panel__icon {
    width: 17px;
    height: 17px;
    color: var(--z-gold);
    flex: none;
}

/* CJK glyph mark before panel titles — gold gradient, engraved look */
.panel__glyph {
    flex: none;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", "MS Mincho", "SimSun", serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    margin-top: -1px;
    color: transparent;
    background: linear-gradient(180deg, #f4dda0 0%, #caa14e 55%, #8a6420 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7));
}

.panel__action {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--z-line-strong);
    border-radius: 50%;
    color: var(--z-text-2);
    transition: all var(--z-ease);
}

.panel__action:hover {
    color: #241a08;
    background: var(--z-gold);
    border-color: var(--z-gold);
}

.panel__action svg { width: 12px; height: 12px; }

.panel__body { padding: 16px; }


/* ---------------------------------------------------------------------------
   8. Forms / login panel
   ------------------------------------------------------------------------ */
.field { margin-bottom: 13px; }

.field__label {
    display: block;
    margin-bottom: 6px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--z-text-2);
}

.field__wrap { position: relative; }

.field__input {
    width: 100%;
    padding: 10px 12px;
    background: var(--z-input);
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius-sm);
    color: var(--z-text);
    font-size: 13.5px;
    transition: border-color var(--z-ease), box-shadow var(--z-ease);
}

.field__input:focus {
    outline: none;
    border-color: var(--z-gold);
    box-shadow: 0 0 0 3px rgba(201, 165, 92, 0.14);
}

.field__input::placeholder { color: var(--z-muted); }

.field__input--pass { padding-right: 38px; }

.field__toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: var(--z-radius-sm);
    color: var(--z-muted);
    transition: color var(--z-ease);
}

.field__toggle:hover { color: var(--z-gold-light); }
.field__toggle svg { width: 16px; height: 16px; }
.field__toggle.is-on { color: var(--z-gold); }

.login-form__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 4px 0 13px;
    font-size: 12px;
}

.link-muted { color: var(--z-muted); font-size: 12px; }
.link-muted:hover { color: var(--z-gold-light); }

/* Custom checkbox */
.check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--z-text-2);
    font-size: 12px;
    user-select: none;
}

.check input { position: absolute; opacity: 0; pointer-events: none; }

.check__box {
    width: 15px;
    height: 15px;
    border: 1px solid var(--z-line-strong);
    border-radius: 3px;
    background: var(--z-input);
    transition: all var(--z-ease);
    position: relative;
    flex: none;
}

.check input:checked + .check__box {
    background: linear-gradient(180deg, var(--z-gold-light), var(--z-gold-deep));
    border-color: var(--z-gold);
}

.check input:checked + .check__box::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #241a08;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.check input:focus-visible + .check__box { box-shadow: 0 0 0 3px rgba(201, 165, 92, 0.2); }

.check--lg .check__box { width: 20px; height: 20px; }
.check--lg input:checked + .check__box::after { left: 6px; top: 2px; width: 5px; height: 11px; }

/* Captcha placeholder box */
.captcha {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    margin-bottom: 14px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--z-line);
    border-radius: var(--z-radius-sm);
    cursor: pointer;
}

.captcha__text { flex: 1; font-size: 13px; color: var(--z-text); }

.captcha__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--z-muted);
    text-align: center;
}

.captcha__badge svg { width: 20px; height: 20px; }
.captcha__badge small { font-size: 8px; line-height: 1.2; }

.login-panel__footer {
    margin: 14px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--z-muted);
}

.login-panel__footer a { font-weight: 600; }


/* ---------------------------------------------------------------------------
   9. Rankings widget (Clasament) — podium model
   ----------------------------------------------------------------------------
   Three characters stand on stepped podium blocks and rotate positions so
   each player takes the centre spot in turn. pos-* = stage position,
   rank-* = player identity (medal/block colours travel with the player).
   ------------------------------------------------------------------------ */
.podium {
    position: relative;
    height: 264px;
    display: flex;
    flex-direction: column;
    user-select: none;
    overflow: hidden;
    border-radius: var(--z-radius-sm);
    background:
        radial-gradient(ellipse 55% 30% at 50% 78%, rgba(200, 160, 80, .10) 0, transparent 70%),
        linear-gradient(180deg, rgba(20, 16, 12, .3), rgba(30, 24, 18, .55));
}



/* --- Stage: slots + stepped blocks -------------------------------------- */
/* three absolute-positioned slots so rank changes animate smoothly;
   pos-* = stage position (block height/size), rank-* = identity (colors) */
.podium-stage {
    position: relative;
    z-index: 1;
    flex: 1;
}

.podium-slot {
    position: absolute;
    bottom: 0;
    width: 32%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    transition: left .7s cubic-bezier(.4, 0, .2, 1), transform .45s ease,
                filter .55s ease;
    animation: podium-rise .7s cubic-bezier(.2, .7, .3, 1) backwards;
}

.podium-slot--pos-l { left: 1%;  z-index: 1; }
.podium-slot--pos-c { left: 34%; z-index: 2; }
.podium-slot--pos-r { left: 67%; z-index: 1; }

/* spotlight: the centre slot stays lit, the flanks sit in shadow */
.podium-slot--pos-l,
.podium-slot--pos-r {
    filter: brightness(.42) saturate(.65);
}

/* entrance order: winner first, then the flanks */
.podium-slot--rank-1 { animation-delay: 0s; }
.podium-slot--rank-2 { animation-delay: .3s; }
.podium-slot--rank-3 { animation-delay: .45s; }

@keyframes podium-rise {
    from { opacity: 0; transform: translateY(16px); }
}

/* the center slot is the spotlighted one */
.podium-slot--pos-c { transform: translateY(-7px); }

/* center sprite a touch bigger; sizes follow the position and animate on swap */
.podium-slot .character-sprite {
    flex: none;
    margin-bottom: -4px;
    width: 104px;
    height: 116px;
    transition: width .7s cubic-bezier(.4, 0, .2, 1),
                height .7s cubic-bezier(.4, 0, .2, 1),
                transform .45s ease;
}

.podium-slot--pos-c .character-sprite {
    width: 132px;
    height: 147px;
    transform: scale(1.06);
}

/* label above the character */
.podium-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    margin-bottom: 4px;
    line-height: 1.2;
    white-space: nowrap;
}

.podium-level {
    font-size: 10px;
    font-weight: 700;
    color: #98ff33;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
    letter-spacing: .3px;
}

.podium-name {
    font-size: 11px;
    font-weight: 600;
    color: #ffd74c;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
    letter-spacing: .4px;
    transition: color .3s ease, text-shadow .3s ease;
}

/* name + kingdom flag share one line under the level */
.podium-nameline {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* official kingdom flag next to the name */
.podium-flag-img {
    height: 11px;
    width: auto;
    border-radius: 1px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}



/* stepped block under the character — height follows position */
.podium-block {
    position: relative;
    width: 92%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding-bottom: 5px;
    border: 1px solid rgba(200, 160, 80, .15);
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(180deg, rgba(46, 36, 24, .95), rgba(20, 16, 11, .98));
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .06);
    transition: height .7s cubic-bezier(.4, 0, .2, 1),
                border-color .4s ease, box-shadow .4s ease;
}

.podium-slot--pos-c .podium-block { height: 66px; }
.podium-slot--pos-l .podium-block { height: 48px; }
.podium-slot--pos-r .podium-block { height: 38px; }

/* block top edge glows in the resident player's rank color */
.podium-slot--rank-1 .podium-block { border-top: 2px solid #ffd74c; }
.podium-slot--rank-2 .podium-block { border-top: 2px solid #b8b8b8; }
.podium-slot--rank-3 .podium-block { border-top: 2px solid #cd7f32; }

/* ember colour per rank — feeds the glow and the rising specks below */
.podium-slot--rank-1 { --ember: 255, 215, 76; }
.podium-slot--rank-2 { --ember: 195, 200, 212; }
.podium-slot--rank-3 { --ember: 224, 149, 74; }

/* breathing underglow at the block's base, tinted by the player's rank */
.podium-block::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 65% at 50% 112%, rgba(var(--ember), .20), transparent 72%);
    transform-origin: bottom;
    animation: ember-breathe 3.4s ease-in-out infinite;
    pointer-events: none;
}

/* tiny ember specks rising inside the block face */
.podium-block::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 7px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(var(--ember), .85);
    box-shadow:
        -16px 5px 0 rgba(var(--ember), .55),
         14px 9px 0 rgba(var(--ember), .40);
    animation: ember-rise 3.8s ease-in infinite;
    pointer-events: none;
}

.podium-slot--rank-2 .podium-block::after { animation-delay: 1.3s; }
.podium-slot--rank-3 .podium-block::after { animation-delay: 2.5s; }

@keyframes ember-breathe {
    0%, 100% { opacity: .55; transform: scaleY(.85); }
    50%      { opacity: 1;   transform: scaleY(1); }
}

@keyframes ember-rise {
    0%   { opacity: 0; transform: translateY(0); }
    25%  { opacity: .9; }
    100% { opacity: 0; transform: translateY(-16px); }
}

/* rank insignia hanging from the block's top edge — shield plate,
   roman numerals; colour travels with the player's rank */
.podium-medal {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 31px;
    padding-bottom: 6px; /* optical centre: text sits in the shield's upper body */
    clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
    font-family: var(--z-font-display);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;
    line-height: 1;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55));
}

.podium-medal::before {
    content: "";
    position: absolute;
    inset: 2px 2px 3px;
    clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
    background: linear-gradient(180deg, hsla(0, 0%, 100%, .22), transparent 45%);
    pointer-events: none;
}

.podium-slot--rank-1 .podium-medal {
    color: #3a2800;
    background: linear-gradient(160deg, #ffef9f 0%, #e8b73a 45%, #8f6a14 100%);
    text-shadow: 0 1px 0 hsla(0, 0%, 100%, .35);
}

.podium-slot--rank-2 .podium-medal {
    color: #26262e;
    background: linear-gradient(160deg, #f4f4f6 0%, #a9a9b5 45%, #62626e 100%);
    text-shadow: 0 1px 0 hsla(0, 0%, 100%, .4);
}

.podium-slot--rank-3 .podium-medal {
    color: #2a1600;
    background: linear-gradient(160deg, #f0a860 0%, #b06a28 45%, #5e3610 100%);
    text-shadow: 0 1px 0 hsla(0, 0%, 100%, .25);
}



/* centre block face alternates: the insignia drops away and the guild
   name surfaces in the middle of the block — one shared 6.2s cycle,
   synced with the JS position rotation so the guild gets real screen time;
   only when the player actually has a guild (otherwise the shield stays) */
.podium-slot--pos-c.podium-slot--guild .podium-medal {
    animation: medal-drop 6.2s ease-in-out infinite;
}

@keyframes medal-drop {
    0%, 18%   { transform: translateX(-50%) translateY(0);    opacity: 1; }
    28%, 78%  { transform: translateX(-50%) translateY(12px); opacity: 0; }
    90%, 100% { transform: translateX(-50%) translateY(0);    opacity: 1; }
}

/* guild name centred on the block face — hidden until the cycle calls it */
.podium-block__guild {
    position: absolute;
    top: 13px; /* right under the block's top edge */
    left: 50%;
    transform: translate(-50%, -50%) translateY(5px);
    opacity: 0;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #e8c47a;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
    white-space: nowrap;
    pointer-events: none;
}

.podium-slot--pos-c.podium-slot--guild .podium-block__guild {
    animation: guild-rise 6.2s ease-in-out infinite;
}

@keyframes guild-rise {
    0%, 30%   { opacity: 0; transform: translate(-50%, -50%) translateY(5px); }
    38%, 72%  { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
    82%, 100% { opacity: 0; transform: translate(-50%, -50%) translateY(-4px); }
}

/* center spotlight glow, tinted by whoever stands there */
.podium-slot--pos-c.podium-slot--rank-1 .podium-block { box-shadow: inset 0 1px 0 hsla(0,0%,100%,.06), 0 -10px 24px rgba(255, 215, 76, .28); }
.podium-slot--pos-c.podium-slot--rank-2 .podium-block { box-shadow: inset 0 1px 0 hsla(0,0%,100%,.06), 0 -8px 20px hsla(0, 0%, 75%, .22); }
.podium-slot--pos-c.podium-slot--rank-3 .podium-block { box-shadow: inset 0 1px 0 hsla(0,0%,100%,.06), 0 -8px 20px rgba(205, 127, 50, .25); }
/* --- Sparkles (shared) ---------------------------------------------------- */
.sparkles-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.sparkle {
    position: absolute;
    bottom: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, gold 0, #fa0 50%, transparent 70%);
    box-shadow: 0 0 4px 1px rgba(255, 200, 50, .3);
    opacity: 0;
    animation: sparkle-rise linear infinite;
}

@keyframes sparkle-rise {
    0%   { transform: translateY(0) scale(1);   opacity: 0; }
    10%  { opacity: .5; }
    50%  { opacity: .4; }
    100% { transform: translateY(-280px) scale(.2); opacity: 0; }
}
/* one panel holds both the tabs bar and the article feed */
.news-panel { overflow: hidden; }

.news-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--z-line);
}

.news-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: var(--z-radius-sm);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--z-text-2);
    transition: all var(--z-ease);
}

.news-tab svg { width: 15px; height: 15px; fill: currentColor; }

.news-tab:hover { color: var(--z-gold-light); background: rgba(201, 165, 92, 0.08); }

.news-tab.is-active {
    color: var(--z-gold-light);
    background: rgba(201, 165, 92, 0.13);
    box-shadow: inset 0 0 0 1px var(--z-line-strong);
}

.news-feed {
    display: flex;
    flex-direction: column;
}

/* articles are rows inside the panel — hairline separator between them */
.news-card { padding: 18px 20px 20px; }
.news-card + .news-card { border-top: 1px solid var(--z-line); }

.news-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
}

.news-card__title {
    font-family: var(--z-font-body);
    font-size: 15.5px;
    font-weight: 700;
    color: var(--z-text);
    line-height: 1.4;
}

.news-card__time {
    flex: none;
    font-size: 11px;
    color: var(--z-muted);
    white-space: nowrap;
}

.news-card__tags {
    margin: 0 0 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
}

.news-card__tags span {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--z-accent);
}


/* Article body text */
.news-card__body { font-size: 13.5px; color: var(--z-text-2); }
.news-card__body p { margin: 0 0 10px; }
.news-card__body p:last-child { margin-bottom: 0; }
.news-card__body ul { margin: 0 0 10px 1.2em; }
.news-card__body ul:last-child { margin-bottom: 0; }
.news-card__body h4 { margin: .8em 0 .3em; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--z-gold); }
.news-card__body a { color: var(--z-gold-light); }
.news-card__body b, .news-card__body strong { color: var(--z-gold-light); font-weight: 600; }

.news-subtitle {
    margin-top: 14px !important;
    font-weight: 700;
    color: var(--z-accent) !important;
}

.news-list {
    margin: 0 0 10px;
    padding-left: 0;
    list-style: none;
}

.news-list li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 6px;
}

.news-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    background: var(--z-gold);
    opacity: 0.7;
}

.news-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--z-muted);
    font-size: 13px;
}



/* ---------------------------------------------------------------------------
   12. Footer
   ------------------------------------------------------------------------ */
.site-footer {
    border-top: 1px solid var(--z-line);
    background: linear-gradient(180deg, rgba(19, 15, 9, 0.6), rgba(12, 9, 5, 0.95));
    padding: 34px 0 26px;
    margin-top: 10px;
}

.site-footer__inner {
    max-width: var(--z-max);
    margin-inline: auto;
    padding-inline: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.socials { display: flex; gap: 10px; }

.socials a {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--z-line);
    border-radius: 50%;
    color: var(--z-text-2);
    transition: all var(--z-ease);
}

.socials a:hover {
    color: #241a08;
    background: var(--z-gold);
    border-color: var(--z-gold);
    transform: translateY(-2px);
}

.socials svg { width: 15px; height: 15px; }

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
}

.site-footer__legal a { font-size: 12px; color: var(--z-text-2); }
.site-footer__legal a:hover { color: var(--z-gold-light); }

.site-footer__copy {
    margin: 6px 0 0;
    font-size: 11.5px;
    color: var(--z-muted);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.site-footer__copy span {
    color: var(--z-text-2);
    font-size: 10.5px;
    letter-spacing: .04em;
    opacity: .8;
}

.site-footer__copy b { color: var(--z-gold); }


/* ---------------------------------------------------------------------------
   13. Floating action buttons — circle icons that expand left on hover
   ------------------------------------------------------------------------ */
.float-actions {
    position: fixed;
    right: 0;
    top: calc(var(--z-header-h) + 18px);
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.float-action {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px 0 0 14px;
    overflow: hidden;
    white-space: nowrap;
    background: linear-gradient(165deg, rgba(48, 39, 25, .97), rgba(26, 20, 12, .97));
    border: 1px solid var(--z-line-strong);
    border-right: 0;
    color: var(--z-gold);
    box-shadow: -6px 8px 20px rgba(0, 0, 0, .45), inset 0 1px 0 hsla(0, 0%, 100%, .07);
    transition: width .35s cubic-bezier(.4, 0, .2, 1), border-color .3s, color .3s;
}

.float-action:hover,
.float-action:focus-visible {
    width: 152px;
    border-color: var(--z-gold);
    color: var(--z-gold-light);
}

.float-action__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 45px;
    height: 44px;
}

.float-action__icon svg { width: 18px; height: 18px; }

.float-action__label {
    flex: none;
    padding-left: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity .25s ease .06s, transform .3s ease .06s;
}

.float-action:hover .float-action__label,
.float-action:focus-visible .float-action__label {
    opacity: 1;
    transform: none;
}


/* ---------------------------------------------------------------------------
   14. Responsive
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
    .main-nav {
        position: absolute;
        top: var(--z-header-h);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px;
        background: rgba(19, 15, 9, 0.98);
        border-bottom: 1px solid var(--z-line);
        display: none;
    }

    .main-nav.is-open { display: flex; }
    .main-nav__link { padding: 12px 16px; }
    .main-nav__link::after { display: none; }
    .main-nav__link.is-active { background: rgba(201, 165, 92, 0.1); border-radius: var(--z-radius-sm); }

    .nav-burger { display: flex; }
    .nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-burger.is-open span:nth-child(2) { opacity: 0; }
    .nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 760px) {
    .layout { grid-template-columns: 1fr; }

    .podium { height: 246px; }

    .news-card__head { flex-direction: column; gap: 4px; }
    .float-actions { top: calc(var(--z-header-h) + 12px); }
}



/* Home view swap (news <-> register) */
.home-view[hidden] { display: none !important; }

/* ============================================================
   Download view (swaps with the news view)
   ============================================================ */
.dl-main { display: flex; align-items: center; gap: 20px; padding: 22px 20px; border-bottom: 1px solid var(--z-line); flex-wrap: wrap; }
.dl-gem { flex-shrink: 0; display: grid; place-items: center; width: 56px; height: 56px; color: var(--z-gold); border: 1px solid var(--z-line-strong); transform: rotate(45deg); background: var(--z-surface-2); }
.dl-gem svg { width: 22px; height: 22px; transform: rotate(-45deg); }
.dl-info { flex: 1; min-width: 180px; }
.dl-info h3 { font-size: 1.25rem; margin-bottom: 4px; }
.dl-info p { font-size: .85rem; color: var(--z-text-2); }
.dl-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.dl-req { display: grid; grid-template-columns: 1fr 1fr; }
.dl-col { padding: 20px; }
.dl-col + .dl-col { border-left: 1px solid var(--z-line); }
.dl-col h4 { font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--z-gold); margin-bottom: 14px; }
.dl-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.dl-col li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: .85rem; }
.dl-col li span { color: var(--z-text-2); }
.dl-col li strong { font-weight: 600; color: var(--z-text); text-align: right; }
@media (max-width: 640px) {
    .dl-req { grid-template-columns: 1fr; }
    .dl-col + .dl-col { border-left: none; border-top: 1px solid var(--z-line); }
}

/* ============================================================
   Rankings page (/clasament)
   ============================================================ */
.rk-page { display: block; }
.rk-main { display: grid; gap: 26px; }

.rk-count { font-size: .72rem; color: var(--z-muted); border: 1px solid var(--z-line); padding: 2px 10px; border-radius: 20px; }
.rk-empty { padding: 1.2rem 1.4rem; color: var(--z-muted); font-size: .85rem; }

/* tabs */
.rk-tabs { display: flex; gap: 8px; }
.rk-tab { flex: 1; padding: 12px 14px; font-family: inherit; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--z-muted); background: var(--z-surface); border: 1px solid var(--z-line); border-radius: 8px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.rk-tab:hover { color: var(--z-text-2); border-color: var(--z-line-strong); }
.rk-tab--active, .rk-tab--active:hover { color: var(--z-gold-light); border-color: var(--z-line-strong); background: linear-gradient(180deg, rgba(201,165,92,.12), transparent), var(--z-surface); }
.rk-tab .panel__glyph { margin-right: 6px; }
.rk-hidden { display: none; }

/* table */
.rk-table { display: grid; }
.rk-row { display: grid; grid-template-columns: 46px 1fr 110px 60px 1fr 80px; align-items: center; gap: 8px; padding: 8px 16px; border-top: 1px solid rgba(201,165,92,.08); font-size: .85rem; }
.rk-row--guild { grid-template-columns: 46px 1fr 110px 50px 60px 80px 90px; }
.rk-row--head { font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: var(--z-muted); border-top: 1px solid var(--z-line); background: rgba(0,0,0,.18); padding-top: 10px; padding-bottom: 10px; }
.rk-row--head span:last-child { text-align: right; }
.rk-row:not(.rk-row--head):hover { background: rgba(201,165,92,.05); }
.rk-row--top .rk-pname { color: var(--z-gold-light); }
.rk-rank { font-weight: 700; color: var(--z-muted); font-size: .8rem; }
.rk-rank--1 { color: var(--z-gold-light); }
.rk-rank--2 { color: var(--z-rank-silver); }
.rk-rank--3 { color: var(--z-rank-bronze); }
.rk-player { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rk-ava { width: 30px; height: 34px; flex: none; object-fit: cover; object-position: top; }
.rk-pname { font-weight: 600; display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-flag { width: 16px; height: 11px; flex: none; border-radius: 2px; }
.rk-flag--sm { width: 15px; height: 10px; }
.rk-class { color: var(--z-text-2); font-size: .8rem; }
.rk-gender { font-style: normal; font-size: .68rem; font-weight: 700; color: var(--z-muted); }
.rk-gender--m { color: #7fa8d8; }
.rk-gender--f { color: #d88fa8; }
.rk-level { font-weight: 700; color: var(--z-gold-light); }
.rk-guild { color: var(--z-text-2); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-guild i { color: var(--z-muted); font-style: normal; }
.rk-time { color: var(--z-muted); font-size: .78rem; text-align: right; }
.rk-points { font-weight: 700; color: var(--z-gold-light); }
.rk-wdl { color: var(--z-text-2); font-size: .78rem; text-align: right; }
.rk-pname--guild { font-weight: 700; }

@media (max-width: 720px) {
    .rk-row { grid-template-columns: 34px 1fr 70px 46px; }
    .rk-row span:nth-child(5), .rk-row span:nth-child(6) { display: none; }
    .rk-row--guild { grid-template-columns: 34px 1fr 46px 70px; }
    .rk-row--guild span:nth-child(3), .rk-row--guild span:nth-child(5), .rk-row--guild span:nth-child(7) { display: none; }
    .rk-row--guild span:nth-child(6) { display: block; }
}