/* ==================== ZAMOLXIA — SHARED UI DESIGN SYSTEM ====================
   Reusable classes extracted from the homepage (index.php) so every page
   (How to Play, etc.) shares the exact same visual language. Do NOT fork
   these into page-specific variants — reuse the .zx-* classes below. */
:root{
    --zx-navy:#0b0f17; --zx-navy-2:#0e131d; --zx-panel:rgba(17,22,32,.72);
    --zx-panel-solid:#111620; --zx-line:rgba(214,173,59,.18); --zx-line-strong:rgba(214,173,59,.45);
    --zx-gold:#d6ad3b; --zx-gold-soft:#e8c766; --zx-ice:#78bfff; --zx-ice-soft:#a9d8ff;
    --zx-online:#3fd07f; --zx-ally:#3d7bd6; --zx-horde:#d6453d;
    --zx-text:#c9d1dc; --zx-text-dim:#8a93a1; --zx-white:#eef2f7;
    --zx-radius:12px; --zx-maxw:1280px;
    --zx-shadow:0 18px 46px rgba(0,0,0,.5);
}

/* shared container — identical to homepage so all sections share one X axis */
.zx-wrap{max-width:var(--zx-maxw);margin:0 auto;padding:0 clamp(16px,3vw,32px)}
.zx-section{margin-top:clamp(40px,6vw,72px)}

/* card / panel */
.zx-card{
    position:relative;background:var(--zx-panel);
    border:1px solid var(--zx-line);border-radius:var(--zx-radius);
    box-shadow:var(--zx-shadow);
    backdrop-filter:blur(9px) saturate(1.05);-webkit-backdrop-filter:blur(9px) saturate(1.05);
    transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.zx-card:hover{border-color:var(--zx-line-strong)}
.zx-hoverlift:hover{transform:translateY(-3px)}

/* section headings */
.zx-h{display:flex;align-items:center;gap:.7rem;margin:0 0 clamp(16px,2.5vw,24px)}
.zx-h h2{font-family:'Cinzel',serif;font-weight:700;color:var(--zx-white);
    font-size:clamp(1.15rem,2.4vw,1.6rem);letter-spacing:.01em;margin:0;line-height:1.1}
.zx-h .zx-h-ic{color:var(--zx-gold);display:flex}
.zx-h .zx-h-line{flex:1;height:1px;background:linear-gradient(90deg,var(--zx-line-strong),transparent)}

/* buttons */
.zx-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
    padding:.85rem 1.6rem;border-radius:10px;font-weight:700;font-size:.9rem;letter-spacing:.02em;
    text-decoration:none;border:1px solid transparent;cursor:pointer;
    transition:transform .18s ease, box-shadow .25s ease, background .25s, border-color .25s}
.zx-btn svg{width:18px;height:18px}
.zx-btn:hover{transform:translateY(-2px)}
.zx-btn-gold{background:linear-gradient(180deg,var(--zx-gold-soft),var(--zx-gold) 55%,#b4901f);
    color:#20180a;box-shadow:0 8px 22px rgba(214,173,59,.28), inset 0 1px 0 rgba(255,255,255,.35)}
.zx-btn-gold:hover{box-shadow:0 12px 30px rgba(214,173,59,.45)}
.zx-btn-ghost{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.14);color:var(--zx-white)}
.zx-btn-ghost:hover{border-color:var(--zx-ice);color:#fff;box-shadow:0 8px 22px rgba(120,191,255,.18)}
.zx-btn-discord{background:linear-gradient(180deg,#6f82f0,#4954c9);color:#fff;
    box-shadow:0 8px 22px rgba(88,101,242,.28)}
.zx-btn-discord:hover{box-shadow:0 12px 30px rgba(88,101,242,.5)}

/* scroll reveal */
.zx-reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease, transform .55s ease}
.zx-reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
    .zx-reveal{opacity:1;transform:none;transition:none}
    .zx-btn:hover,.zx-card:hover,.zx-hoverlift:hover{transform:none}
}