/* DakkyMT2 visual layer — complements index.css without changing PHP behaviour. */
:root {
    --bg: #050506;
    --surface: rgba(13, 11, 12, .90);
    --surface-strong: rgba(22, 17, 17, .96);
    --line: rgba(214, 154, 67, .22);
    --line-hot: rgba(239, 65, 45, .52);
    --text: #f8efe1;
    --muted: #bcb1a2;
    --gold: #e8b75d;
    --red: #e53c29;
    --teal: #d19b50;
    --radius: 16px;
    --shadow: 0 28px 90px rgba(0, 0, 0, .58);
}

body {
    background:
        radial-gradient(circle at 22% 8%, rgba(190, 35, 20, .18), transparent 34%),
        linear-gradient(180deg, rgba(4, 3, 4, .50) 0%, rgba(4, 3, 4, .82) 56%, rgba(4, 3, 4, .94) 100%),
        url("images/dakky_launcher_background.png") center top / cover fixed no-repeat;
}

body::before {
    opacity: .56;
    background:
        linear-gradient(rgba(224, 169, 88, .027) 1px, transparent 1px),
        linear-gradient(90deg, rgba(224, 169, 88, .027) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 58% at 50% 10%, #000 0 40%, transparent 84%);
}

.site-header {
    min-height: 84px;
    border-bottom-color: rgba(225, 164, 76, .22);
    background: linear-gradient(180deg, rgba(8, 6, 7, .94), rgba(8, 6, 7, .80));
    box-shadow: 0 14px 50px rgba(0, 0, 0, .30);
}

.site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(228, 57, 38, .9), rgba(236, 185, 91, .72), transparent);
}

.brand img {
    width: 58px;
    height: 58px;
    padding: 3px;
    object-fit: contain;
    border: 1px solid rgba(235, 174, 83, .35);
    border-radius: 50%;
    background: rgba(0, 0, 0, .52);
    box-shadow: 0 0 0 4px rgba(213, 45, 30, .08), 0 0 30px rgba(213, 45, 30, .33);
}

.brand-wordmark { display: block; }
.brand-wordmark small { color: #b99c72; font-size: 9px; letter-spacing: .22em; }
.brand-wordmark strong { font-size: 25px; letter-spacing: .035em; }
.brand-wordmark strong span { margin-left: 2px; }

.main-nav {
    border-color: rgba(226, 171, 89, .16);
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
    box-shadow: inset 0 1px rgba(255,255,255,.04), 0 8px 28px rgba(0,0,0,.2);
}

.main-nav a:hover,
.main-nav a.active {
    background: linear-gradient(135deg, #8b1918, #d83c27 54%, #d4a24f);
    box-shadow: 0 8px 20px rgba(185, 35, 27, .28), inset 0 1px rgba(255,255,255,.25);
}

.session-pill { border-color: rgba(226, 171, 89, .18); }
.session-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: 9px;
    border-radius: 50%;
    background: #6be88d;
    box-shadow: 0 0 12px rgba(107, 232, 141, .8);
}

.site-shell { margin-top: 26px; }

.hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #aa9c89;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .16em;
    text-decoration: none;
    text-transform: uppercase;
    transform: translateX(-50%);
}
.hero-scroll i { width: 28px; height: 1px; background: linear-gradient(90deg,#d7432d,#eac16d); }

.hero {
    min-height: 588px;
    border-color: rgba(227, 69, 43, .55);
    border-radius: 24px;
    background:
        radial-gradient(circle at var(--hero-x, 80%) var(--hero-y, 50%), rgba(202, 56, 30, .23), transparent 28%),
        linear-gradient(105deg, rgba(9, 8, 9, .99) 0%, rgba(17, 11, 12, .96) 48%, rgba(26, 15, 13, .82) 100%);
    box-shadow: 0 34px 110px rgba(0,0,0,.65), 0 0 0 1px rgba(235, 175, 87, .08) inset;
}

.hero::before {
    inset: 14px;
    border-color: rgba(224, 169, 88, .16);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(227, 63, 37, .09), transparent 28%),
        repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,.012) 23px 24px);
}

.hero::after {
    width: 64%;
    height: 100%;
    opacity: .7;
    background:
        radial-gradient(circle at 68% 45%, transparent 0 31%, rgba(226, 169, 83, .15) 31.3% 31.8%, transparent 32.2%),
        radial-gradient(circle at 68% 45%, transparent 0 41%, rgba(193, 42, 26, .14) 41.3% 41.8%, transparent 42.2%);
}

.hero-copy { padding: clamp(42px, 6vw, 76px); }
.hero h1 {
    margin: 12px 0 20px;
    font-size: clamp(65px, 8.4vw, 108px);
    letter-spacing: -.045em;
    background: linear-gradient(180deg, #fff7e7 0%, #f1c875 42%, #dd4a2d 76%, #7a1617 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 7px 0 rgba(68, 8, 10, .75)) drop-shadow(0 0 28px rgba(218, 47, 31, .22));
}

.hero-text { max-width: 570px; color: #d9cfc0; }
.button { border-radius: 10px; text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
.button.primary { background: linear-gradient(135deg, #f0c66d, #dd4a2d 56%, #781416); }
.button.secondary { border-color: rgba(225, 174, 91, .42); }
.hero-stats span { border-color: rgba(226, 171, 89, .14); background: rgba(5,4,4,.48); }

.hero-art { isolation: isolate; min-height: 588px; }
.hero-art::before {
    content: "";
    position: absolute;
    left: 5%;
    right: 2%;
    bottom: 0;
    height: 32%;
    border-radius: 50% 50% 0 0;
    background: radial-gradient(ellipse at center, rgba(230, 69, 36, .30), transparent 64%);
    filter: blur(12px);
}

.hero-sigil {
    position: absolute;
    left: 50%;
    top: 47%;
    width: min(36vw, 420px);
    aspect-ratio: 1;
    border: 1px solid rgba(231, 176, 86, .21);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(18deg);
    box-shadow: 0 0 70px rgba(213, 44, 26, .11), inset 0 0 60px rgba(213, 44, 26, .08);
}

.hero-sigil::before,
.hero-sigil::after {
    content: "";
    position: absolute;
    inset: 12%;
    border: 1px solid rgba(219, 165, 77, .14);
    transform: rotate(45deg);
}
.hero-sigil::after { inset: 28%; border-color: rgba(219, 58, 38, .26); }

.hero-character {
    bottom: 52px;
    transition: transform .3s ease, filter .3s ease;
    filter: drop-shadow(0 30px 25px rgba(0,0,0,.72)) drop-shadow(0 0 18px rgba(228, 66, 34, .12));
}
.hero-art:hover .hero-character { filter: drop-shadow(0 32px 25px rgba(0,0,0,.74)) drop-shadow(0 0 25px rgba(228, 66, 34, .20)); }
.hero-warrior { right: 2%; width: clamp(190px, 21vw, 276px); }
.hero-shaman { right: 24%; bottom: 44px; width: clamp(205px, 23vw, 300px); }
.hero-sura { right: 48%; width: clamp(170px, 19vw, 245px); }
.hero-ninja { right: 67%; bottom: 60px; width: clamp(150px, 17vw, 220px); }

.hero-art-caption {
    position: absolute;
    right: 28px;
    bottom: 22px;
    z-index: 8;
    display: grid;
    padding: 10px 14px;
    border: 1px solid rgba(226,171,89,.22);
    border-radius: 8px;
    background: rgba(6,5,5,.72);
    backdrop-filter: blur(8px);
    text-align: right;
}
.hero-art-caption span { color: #a99d8c; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.hero-art-caption strong { margin-top: 2px; color: #f0c875; font-family: Georgia,serif; font-size: 16px; }

.surface,
.side-panel,
.mini-panel {
    position: relative;
    overflow: hidden;
    border-color: rgba(222, 168, 85, .20);
    background:
        linear-gradient(180deg, rgba(26,20,20,.96), rgba(11,10,11,.92)),
        var(--surface);
}
.surface::before,
.side-panel::before {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(235,183,96,.42), transparent);
}

.intro-section { padding-block: clamp(30px,5vw,46px); }
.section-heading h1,
.section-heading h2,
.side-panel h2,
.mini-panel h2 { color: #f7e9d0; }

.feature-card {
    min-height: 206px;
    border-color: rgba(226, 171, 89, .16);
    background: linear-gradient(145deg, rgba(116,29,23,.18), rgba(255,255,255,.025));
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.feature-card:hover { transform: translateY(-5px); border-color: rgba(232,183,93,.42); box-shadow: 0 20px 36px rgba(0,0,0,.28); }
.feature-card span { display: inline-flex; padding-bottom: 8px; border-bottom: 1px solid rgba(232,183,93,.35); }

.classes-section {
    padding: clamp(26px, 4vw, 42px);
    border: 1px solid rgba(222, 168, 85, .20);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(21, 16, 17, .96), rgba(7, 7, 8, .95));
    box-shadow: var(--shadow);
}
.classes-heading > p:last-child { max-width: 660px; margin: 10px 0 0; color: var(--muted); line-height: 1.65; }
.class-showcase { margin-top: 24px; }
.class-card {
    position: relative;
    min-height: 230px;
    padding: 0;
    overflow: hidden;
    border-color: rgba(224,169,83,.18);
    border-style: solid;
    border-width: 1px;
    border-radius: 15px;
    background:
        radial-gradient(circle at 50% 78%, rgba(200,46,29,.14), transparent 42%),
        linear-gradient(180deg, rgba(31,22,21,.95), rgba(9,8,9,.96));
    color: #fff;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.class-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 34%,rgba(3,3,4,.25) 58%,rgba(3,3,4,.94) 100%); pointer-events:none; }
.class-card:hover,
.class-card:focus-visible { transform: translateY(-5px); border-color: rgba(232,183,93,.56); box-shadow: 0 18px 35px rgba(0,0,0,.34); outline: 0; }
.class-card.is-active { border-color: #e9b45a; box-shadow: 0 0 0 1px rgba(233,180,90,.20), 0 16px 38px rgba(168,39,25,.22); }
.class-card img { position:absolute; left:50%; bottom:42px; width:82%; height:calc(100% - 46px); max-height:none; object-fit:contain; transform:translateX(-50%); filter:drop-shadow(0 20px 22px rgba(0,0,0,.62)) saturate(.92); transition:transform .35s ease,filter .35s ease; }
.class-card:hover img,
.class-card.is-active img { transform:translateX(-50%) scale(1.04); filter:drop-shadow(0 22px 24px rgba(0,0,0,.68)) saturate(1.08); }
.class-card strong { position:absolute; z-index:2; left:15px; right:15px; bottom:34px; padding:0; border:0; background:none; color:#f3c873; font-family:Georgia,"Times New Roman",serif; font-size:19px; }
.class-card > span { position:absolute; z-index:2; left:15px; right:15px; bottom:15px; color:#bcb0a0; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }

.class-detail { display:grid; grid-template-columns:minmax(260px,.92fr) minmax(300px,1.08fr); min-height:410px; margin-top:18px; overflow:hidden; border:1px solid rgba(224,169,83,.20); border-radius:15px; background:linear-gradient(135deg,rgba(112,27,22,.17),rgba(6,6,7,.96) 62%); transition:opacity .16s ease,transform .16s ease; }
.class-detail.is-changing { opacity:.3; transform:translateY(4px); }
.class-detail-visual { position:relative; min-height:410px; overflow:hidden; }
.class-detail-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 54%,rgba(8,7,8,.94) 100%),linear-gradient(0deg,rgba(6,5,6,.75),transparent 45%); }
.class-detail-visual img { width:100%; height:100%; object-fit:cover; }
.class-detail-role { position:absolute; z-index:2; left:20px; bottom:20px; padding:8px 11px; border:1px solid rgba(238,189,100,.30); border-radius:7px; background:rgba(6,5,6,.76); color:#efc470; font-size:10px; font-weight:900; letter-spacing:.10em; text-transform:uppercase; backdrop-filter:blur(8px); }
.class-detail-copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(28px,4vw,48px); }
.class-detail-title { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:5px 0 18px; }
.class-detail-title h3 { margin:0; color:#fff0d5; font-family:Georgia,"Times New Roman",serif; font-size:clamp(34px,4vw,52px); }
.class-detail-title > span { padding:7px 10px; border:1px solid rgba(228,174,88,.22); border-radius:999px; color:#d8ad62; background:rgba(216,57,37,.08); font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.class-detail-copy > p:not(.eyebrow) { margin:0; color:#c8bdb0; font-size:15px; line-height:1.75; }
.class-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:25px 0 20px; }
.class-stats div { padding:14px; border:1px solid rgba(224,169,83,.13); border-radius:9px; background:rgba(255,255,255,.025); }
.class-stats dt { color:#8f8478; font-size:9px; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
.class-stats dd { margin:6px 0 0; color:#e7d8c0; font-size:12px; font-weight:700; line-height:1.45; }
.class-paths { display:flex; flex-wrap:wrap; gap:8px; }
.class-paths span { padding:7px 10px; border-radius:6px; color:#f1c56e; background:linear-gradient(135deg,rgba(184,39,29,.20),rgba(215,154,58,.09)); font-size:10px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }

.download-panel { background: linear-gradient(145deg, rgba(119,25,21,.30), rgba(17,13,14,.98)); }
.download-panel::after { z-index:0; opacity: .20; filter: saturate(1.15); pointer-events:none; }
.download-panel > * { position:relative; z-index:1; }
.status-list strong::before { content: "•"; margin-right: 6px; }

.ranking-list li,
.character-card,
.ranking-table tbody tr { transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.ranking-list li:hover { background: rgba(229,63,40,.08); border-color: rgba(231,176,86,.25); transform: translateX(3px); }
.ranking-list li > span { background: linear-gradient(135deg, #f3d183, #c88630); }
.ranking-list em { color: #e5b45c; }

.ranking-all {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(229,174,89,.12);
    color: #ddb15d;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}
.ranking-header { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:24px; }
.ranking-header .section-heading { margin:0; }
.ranking-header .section-heading > p:last-child { margin:10px 0 0; color:var(--muted); }
.ranking-search { min-width:min(340px,100%); }
.ranking-search > label { display:block; margin-bottom:8px; color:#cdbd9f; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.ranking-search > div { display:flex; gap:8px; }
.ranking-search input { min-width:0; flex:1; padding:0 13px; border-style:solid; border-width:1px; border-radius:9px; outline:0; color:#fff; }
.ranking-search .button { min-height:44px; padding-inline:16px; }
.ranking-table-wrap { overflow:auto; border:1px solid rgba(229,174,89,.16); border-radius:13px; background:rgba(4,4,5,.32); }
.ranking-table { width:100%; border-collapse:collapse; min-width:760px; }
.ranking-table th { padding:13px 14px; color:#9f9384; background:rgba(255,255,255,.035); font-size:10px; text-align:left; text-transform:uppercase; letter-spacing:.09em; }
.ranking-table td { padding:13px 14px; border-top:1px solid rgba(255,255,255,.055); color:#cfc5b8; font-size:13px; }
.ranking-table tbody tr:hover { background:rgba(213,55,36,.07); }
.ranking-table .rank-player { display:flex; align-items:center; gap:10px; color:#fff; }
.rank-player img { width:38px; height:38px; padding:2px; object-fit:contain; border:1px solid rgba(229,174,89,.18); border-radius:9px; background:rgba(0,0,0,.32); }
.rank-number { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; color:#b9ad9d; background:rgba(255,255,255,.05); font-weight:900; }
.rank-1 .rank-number,.rank-2 .rank-number,.rank-3 .rank-number { color:#24150c; background:linear-gradient(135deg,#fae4a2,#c88932); box-shadow:0 0 18px rgba(225,171,82,.16); }
.empire { display:inline-flex; padding:5px 8px; border-radius:6px; font-size:11px; font-weight:800; }
.empire-1 { color:#ffb3aa; background:rgba(192,45,38,.16); }
.empire-2 { color:#ffe49b; background:rgba(191,139,43,.16); }
.empire-3 { color:#a9d6ff; background:rgba(52,111,173,.16); }
.ranking-no-results { padding:38px !important; color:var(--muted) !important; text-align:center; }
.ranking-pagination { display:flex; justify-content:center; align-items:center; gap:15px; margin-top:18px; }
.ranking-pagination a,.ranking-pagination span { padding:9px 12px; border:1px solid rgba(229,174,89,.16); border-radius:8px; color:#bdb1a2; background:rgba(0,0,0,.26); font-size:12px; text-decoration:none; }
.ranking-pagination a { color:#e6b75f; }

.account-form input,
.ranking-search input { border-color: rgba(226,171,89,.16); background: rgba(3,3,4,.52); }
.account-form input:focus,
.ranking-search input:focus { border-color: rgba(231,176,86,.72); box-shadow: 0 0 0 4px rgba(212,142,51,.10); }

.site-footer {
    border-color: rgba(226,171,89,.12);
    background: linear-gradient(180deg, rgba(20,15,15,.76), rgba(6,5,6,.8));
}
.site-footer a { color: #d9a94f; text-decoration: none; }
.site-footer a:hover { color: #f2cf86; }

.reveal-ready { transform: translateY(16px); filter: blur(3px); }
.reveal-ready.is-visible { transform: translateY(0); filter: blur(0); }

@media (max-width: 1080px) {
    .brand-wordmark { display: none; }
    .hero-art { min-height: 420px; }
    .hero-warrior { right: 5%; }
    .hero-shaman { right: 27%; }
    .hero-sura { right: 50%; }
    .hero-ninja { right: 69%; }
}

@media (max-width: 760px) {
    .site-header { min-height: auto; }
    .brand-wordmark { display: block; }
    .hero { border-radius: 16px; }
    .hero-copy { padding: 34px 26px; }
    .hero h1 { font-size: clamp(50px, 16vw, 76px); }
    .hero-art { min-height: 310px; overflow: hidden; }
    .hero-sigil { width: 320px; }
    .hero-character { bottom: 36px; }
    .hero-art-caption { right: 14px; bottom: 12px; }
    .hero-scroll { display:none; }
    .ranking-header { align-items:stretch; flex-direction:column; }
    .ranking-search { width:100%; }
    .class-showcase { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .class-card { min-height:190px; }
    .class-detail { grid-template-columns:1fr; }
    .class-detail-visual { min-height:290px; }
    .class-detail-visual::after { background:linear-gradient(0deg,rgba(8,7,8,.92),transparent 52%); }
    .class-stats { grid-template-columns:1fr; }
}

@media (max-width: 480px) {
    .brand-wordmark strong { font-size: 22px; }
    .hero-art { min-height: 260px; }
    .hero-ninja { display: none; }
    .hero-sura { right: 58%; }
    .hero-shaman { right: 28%; }
    .hero-warrior { right: -4%; }
    .classes-section { padding:20px 14px; }
    .class-showcase { grid-template-columns:1fr; }
    .class-card { min-height:210px; }
    .class-detail-title { align-items:flex-start; flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}