@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Teko:wght@400;500;600;700&display=swap");

:root {
    --bg:#130b06;
    --panel:rgba(29,17,11,.82);
    --panel-strong:rgba(19,10,7,.96);
    --panel-soft:rgba(24,14,10,.78);
    --line:rgba(255,206,113,.14);
    --text:#fff4d9;
    --muted:#d8bb95;
    --accent:#f6cf1f;
    --accent-2:#ef6a22;
    --accent-3:#ffb648;
    --shadow:0 24px 90px rgba(0,0,0,.48);
    --card-shadow:0 20px 40px rgba(0,0,0,.32);
    --panel-shadow:0 28px 78px rgba(0,0,0,.38);
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

html.has-smooth-scroll {
    scroll-behavior:auto;
}

html,
body,
body * {
    -webkit-user-select:none;
    user-select:none;
}

body {
    margin:0;
    color:var(--text);
    background:
        radial-gradient(circle at top, rgba(246,207,31,.08), transparent 24%),
        linear-gradient(180deg, #120905, #1c1009 52%, #130b06 100%);
    font-family:"Space Grotesk", sans-serif;
    overflow-x:hidden;
}

body::before {
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
        linear-gradient(90deg, rgba(246,207,31,.025) 1px, transparent 1px),
        linear-gradient(180deg, rgba(239,106,34,.018) 1px, transparent 1px),
        radial-gradient(circle at top, rgba(246,207,31,.11), transparent 28%);
    background-size:32px 32px, 32px 32px, auto;
    mask-image:linear-gradient(180deg, rgba(0,0,0,.42), transparent 78%);
}

body.modal-open {
    overflow:hidden;
}

body.gate-open {
    overflow:hidden;
}

.pointer-light {
    position:fixed;
    left:0;
    top:0;
    pointer-events:none;
    z-index:140;
    opacity:0;
    width:24px;
    height:24px;
    border-radius:50%;
    filter:blur(2.5px);
    mix-blend-mode:screen;
    will-change:transform, opacity, background;
    transition:opacity .18s ease, background .16s ease;
}

.pointer-light.is-button {
    background:
        radial-gradient(circle, rgba(252,229,30,.58) 0%, rgba(252,229,30,.28) 34%, rgba(252,229,30,.12) 58%, rgba(252,229,30,0) 78%);
}

.pointer-light.is-discord {
    background:
        radial-gradient(circle, rgba(96,129,255,.58) 0%, rgba(96,129,255,.3) 34%, rgba(96,129,255,.13) 58%, rgba(96,129,255,0) 78%);
}

a {
    color:inherit;
    text-decoration:none;
}

button,
a {
    font:inherit;
}

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

code {
    font-family:"Space Grotesk", sans-serif;
}

.page-backdrop {
    position:fixed;
    inset:0;
    z-index:0;
    overflow:hidden;
}

.backdrop-layer {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transform:scale(1.12) rotate(-1.2deg);
    filter:saturate(.8) blur(8px);
    transition:opacity .7s ease, transform 1.1s cubic-bezier(.22,1,.36,1), filter 1.1s ease;
}

.backdrop-layer.is-visible {
    opacity:1;
    transform:scale(1.05) rotate(0deg);
    filter:saturate(1.05) blur(4px);
}

.page-backdrop-sweep {
    position:absolute;
    inset:-10%;
    opacity:0;
    background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.11) 50%, transparent 65%);
    transform:translateX(-60%) skewX(-18deg);
    pointer-events:none;
}

.page-backdrop.is-transitioning .page-backdrop-sweep {
    animation:backdropSweep .85s ease;
}

.page-backdrop-overlay {
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top left, rgba(246,207,31,.2), transparent 26%),
        radial-gradient(circle at 85% 12%, rgba(239,106,34,.22), transparent 28%),
        radial-gradient(circle at 50% 100%, rgba(255,182,72,.12), transparent 30%),
        linear-gradient(180deg, rgba(12,7,5,.36), rgba(12,7,5,.72) 34%, rgba(12,7,5,.92));
}

.lobby-stage {
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
    overflow:hidden;
    perspective:1800px;
    perspective-origin:50% 36%;
}

.lobby-stage-glow {
    position:absolute;
    inset:0;
    z-index:0;
    background:
        radial-gradient(circle at 50% 18%, rgba(255,244,217,.16), rgba(255,244,217,0) 18%),
        radial-gradient(circle at 50% 42%, rgba(246,207,31,.22), rgba(246,207,31,0) 30%),
        radial-gradient(circle at 70% 32%, rgba(239,106,34,.14), rgba(239,106,34,0) 24%);
}

.site-stage-title {
    position:absolute;
    left:50%;
    top:8vh;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    transform:translateX(-50%);
    text-align:center;
    pointer-events:none;
}

.site-stage-title-main,
.site-stage-title-sub {
    font-family:"Teko", sans-serif;
    letter-spacing:.06em;
    text-transform:uppercase;
    line-height:.9;
}

.site-stage-title-main {
    font-size:clamp(5.4rem, 17vw, 13rem);
    color:rgba(255,236,199,.2);
    text-shadow:0 0 40px rgba(246,207,31,.08), 0 18px 42px rgba(0,0,0,.26);
}

.site-stage-title-sub {
    font-size:clamp(1.8rem, 4.2vw, 3.2rem);
    color:rgba(239,106,34,.78);
    text-shadow:0 0 24px rgba(239,106,34,.18), 0 10px 24px rgba(0,0,0,.22);
}

.lobby-stage-fade {
    position:absolute;
    inset:0;
    z-index:4;
    background:
        radial-gradient(circle at 50% 20%, rgba(255,255,255,.05), rgba(255,255,255,0) 22%),
        linear-gradient(180deg, rgba(5,7,10,.08), rgba(5,7,10,.16) 22%, rgba(5,7,10,.4) 52%, rgba(5,7,10,.92) 100%);
}

.audio-gate {
    position:fixed;
    inset:0;
    z-index:70;
    display:grid;
    place-items:center;
    padding:24px;
    background:rgba(0,0,0,.8);
    backdrop-filter:blur(10px);
}

.audio-gate[hidden] {
    display:none;
}

.audio-gate-panel {
    position:relative;
    width:min(560px, 100%);
    padding:32px 28px 30px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:32px;
    background:
        linear-gradient(180deg, rgba(255,241,214,.08), rgba(255,255,255,.02)),
        rgba(18,10,7,.92);
    box-shadow:0 28px 90px rgba(0,0,0,.5);
    text-align:center;
    overflow:hidden;
}

.audio-gate-panel::before {
    content:"";
    position:absolute;
    inset:-30% auto auto -8%;
    width:220px;
    height:220px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(246,207,31,.22), rgba(246,207,31,0) 72%);
    pointer-events:none;
}

.audio-gate-panel h1 {
    margin:0;
    font-family:"Teko", sans-serif;
    font-size:clamp(3rem, 8vw, 4.8rem);
    line-height:.92;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.audio-gate-button {
    min-width:220px;
    margin-top:18px;
}

@keyframes backdropSweep {
    0% {
        opacity:0;
        transform:translateX(-60%) skewX(-18deg);
    }
    20% {
        opacity:.5;
    }
    100% {
        opacity:0;
        transform:translateX(60%) skewX(-18deg);
    }
}

@keyframes discordPulse {
    0% {
        transform:scale(.9);
        opacity:.7;
    }
    70% {
        transform:scale(1.18);
        opacity:0;
    }
    100% {
        transform:scale(1.18);
        opacity:0;
    }
}

@keyframes discordDistortionWave {
    0% {
        opacity:0;
        transform:scale(.72) rotate(-8deg);
    }
    22% {
        opacity:.94;
    }
    100% {
        opacity:0;
        transform:scale(1.26) rotate(8deg);
    }
}

@keyframes discordFloat {
    0%,
    100% {
        transform:translateY(0);
    }
    50% {
        transform:translateY(-6px);
    }
}

@keyframes discordShine {
    0%,
    16% {
        transform:translateX(-130%) skewX(-18deg);
        opacity:0;
    }
    28% {
        opacity:1;
    }
    46%,
    100% {
        transform:translateX(330%) skewX(-18deg);
        opacity:0;
    }
}

.site-header,
.site-main,
.site-footer {
    position:relative;
    z-index:2;
    width:min(1240px, calc(100% - 32px));
    margin:0 auto;
}

.site-header {
    position:fixed;
    top:0;
    left:50%;
    z-index:8;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:24px 0 0;
    margin:0;
    transform:translateX(-50%);
}

.site-brand {
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:16px;
    padding:12px 18px 12px 12px;
    border-radius:22px;
    border:1px solid rgba(255,206,113,.14);
    background:
        linear-gradient(135deg, rgba(255,241,214,.09), rgba(255,255,255,.02) 52%, rgba(239,106,34,.05) 100%),
        rgba(22,12,9,.8);
    backdrop-filter:blur(16px) saturate(1.08);
    box-shadow:
        0 18px 34px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 0 0 1px rgba(255,255,255,.02);
    overflow:hidden;
}

.site-brand::before {
    content:"";
    position:absolute;
    inset:-12% auto -12% -8%;
    width:92px;
    background:radial-gradient(circle, rgba(239,106,34,.2), rgba(239,106,34,0) 72%);
    pointer-events:none;
}

.site-brand::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(255,255,255,.06), transparent 34%, transparent 72%, rgba(255,255,255,.035));
    pointer-events:none;
}

.site-brand-mark {
    position:relative;
    z-index:1;
    width:48px;
    height:48px;
    border-radius:14px;
    background:
        linear-gradient(180deg, rgba(255,245,222,.18), rgba(255,255,255,.03)),
        rgba(33,18,11,.76) url("assets/images/logo.png") center / cover no-repeat;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.08),
        0 10px 22px rgba(0,0,0,.26),
        0 0 0 10px rgba(239,106,34,.08);
}

.site-brand-copy {
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.site-brand-copy strong,
.eyebrow,
.section-heading h2,
.intro-copy h1,
.map-card-title,
.modal-header h2 {
    font-family:"Teko", sans-serif;
    letter-spacing:.04em;
}

.site-brand-copy strong {
    font-size:1.7rem;
    line-height:1;
    color:rgba(255,247,227,.98);
    text-shadow:0 3px 18px rgba(0,0,0,.34);
}

.site-brand-copy span,
.site-nav a,
.intro-text,
.map-card-text,
.map-card-code,
.map-card-autor,
.modal-copy-block,
.modal-points,
.site-footer,
.modal-code,
.modal-autor {
    color:var(--muted);
}

.site-brand-copy span {
    color:rgba(247,193,114,.94);
    text-shadow:0 2px 12px rgba(0,0,0,.28);
}

.site-brand-legal {
    display:inline-flex;
    width:max-content;
    max-width:30ch;
    margin-top:6px;
    padding:7px 10px 5px;
    border-radius:12px;
    border:1px solid rgba(255,116,116,.34);
    background:linear-gradient(180deg, rgba(122,16,16,.26), rgba(76,10,10,.48));
    color:rgba(255,232,232,.98);
    box-shadow:0 10px 20px rgba(62,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
    font-size:.66rem;
    line-height:1.35;
    letter-spacing:.09em;
    text-transform:uppercase;
    text-shadow:0 2px 10px rgba(0,0,0,.34);
}

.site-nav {
    display:flex;
    gap:10px;
    padding:8px;
    background:rgba(21,13,10,.7);
    border:1px solid rgba(255,206,113,.12);
    border-radius:999px;
    backdrop-filter:blur(16px) saturate(1.04);
    box-shadow:
        0 16px 36px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.05),
        0 0 0 1px rgba(255,255,255,.025);
}

.site-nav a {
    padding:10px 14px 8px;
    border-radius:999px;
    font-family:"Teko", sans-serif;
    font-size:1.15rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    transition:background .18s ease, color .18s ease, transform .18s ease;
}

.site-nav a:hover {
    color:var(--text);
    background:linear-gradient(180deg, rgba(246,207,31,.14), rgba(239,106,34,.12));
    transform:translateY(-1px);
}

.site-controls {
    display:flex;
    align-items:flex-start;
    gap:12px;
}

.site-controls-meta {
    display:grid;
    justify-items:end;
    gap:8px;
}

.site-controls-meta .header-cta {
    width:100%;
    margin-left:0;
}

.header-cta {
    min-height:48px;
    padding:12px 18px 10px;
    border-radius:999px;
    font-family:"Teko", sans-serif;
    font-size:1.22rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    white-space:nowrap;
    background:
        linear-gradient(180deg, rgba(255,241,214,.08), rgba(255,255,255,.03)),
        rgba(22,13,9,.86);
}

.language-switch {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px;
    border:1px solid rgba(255,206,113,.12);
    border-radius:999px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
        rgba(21,13,10,.72);
    backdrop-filter:blur(14px) saturate(1.05);
    box-shadow:
        0 14px 30px rgba(0,0,0,.2),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.language-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:76px;
    min-height:38px;
    padding:8px 12px 6px;
    border:1px solid transparent;
    border-radius:999px;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    font-family:"Teko", sans-serif;
    font-size:1.08rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    transition:transform .16s ease, color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.language-button:hover {
    color:var(--text);
    background:rgba(246,207,31,.08);
    transform:translateY(-1px);
}

.language-button:focus-visible {
    outline:2px solid rgba(252,229,30,.38);
    outline-offset:2px;
}

.language-button.is-active {
    color:var(--text);
    border-color:rgba(246,207,31,.28);
    background:
        linear-gradient(180deg, rgba(246,207,31,.18), rgba(239,106,34,.08)),
        rgba(255,255,255,.03);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 10px 22px rgba(0,0,0,.18),
        0 0 0 1px rgba(252,229,30,.06);
}

.language-flag {
    width:18px;
    height:18px;
    border-radius:50%;
    object-fit:cover;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.16),
        0 2px 6px rgba(0,0,0,.18);
    flex:0 0 18px;
}

.language-code {
    position:relative;
    top:1px;
}

.volume-control {
    position:fixed;
    top:50%;
    right:20px;
    bottom:auto;
    z-index:9;
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    width:98px;
    padding:20px 14px 18px;
    transform:translateY(-50%);
    border:1px solid rgba(255,206,113,.12);
    border-radius:32px;
    background:
        linear-gradient(180deg, rgba(255,241,214,.08), rgba(255,255,255,.015)),
        rgba(20,12,9,.9);
    backdrop-filter:blur(14px);
    box-shadow:
        0 22px 52px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.06),
        inset 0 0 0 1px rgba(255,255,255,.02);
}

.volume-control-label,
.volume-control-value {
    position:relative;
    z-index:1;
    font-size:.94rem;
    color:var(--muted);
    white-space:nowrap;
    font-family:"Teko", sans-serif;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.volume-control-label {
    color:rgba(252,229,30,.92);
}

.volume-control-value {
    min-width:46px;
    padding:6px 10px 4px;
    border-radius:999px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    text-align:center;
}

.volume-control-slider {
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:240px;
}

.volume-control-slider::before {
    content:"";
    position:absolute;
    left:50%;
    top:8px;
    bottom:8px;
    width:16px;
    border-radius:999px;
    transform:translateX(-50%);
    background:linear-gradient(180deg, rgba(255,196,110,.26), rgba(255,255,255,.03));
    box-shadow:
        inset 0 1px 3px rgba(255,255,255,.08),
        inset 0 -4px 10px rgba(0,0,0,.22),
        0 0 0 1px rgba(255,255,255,.04);
    pointer-events:none;
}

.volume-control input[type="range"] {
    -webkit-appearance:none;
    appearance:none;
    position:absolute;
    left:50%;
    top:50%;
    width:240px;
    height:28px;
    margin:0;
    transform:translate(-50%, -50%) rotate(-90deg);
    background:transparent;
    touch-action:none;
}

.volume-control input[type="range"]:focus {
    outline:none;
}

.volume-control input[type="range"]::-webkit-slider-runnable-track {
    height:12px;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(239,106,34,.22), rgba(246,207,31,.12));
    border:1px solid rgba(255,196,110,.08);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.04),
        inset 0 -2px 6px rgba(0,0,0,.24);
}

.volume-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance:none;
    width:28px;
    height:28px;
    margin-top:-9px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.92);
    background:radial-gradient(circle at 35% 30%, #fff2c5, #f6cf1f 52%, #ef6a22 100%);
    box-shadow:
        0 0 0 7px rgba(252,229,30,.12),
        0 10px 24px rgba(0,0,0,.28),
        0 0 22px rgba(252,229,30,.38);
}

.volume-control input[type="range"]::-moz-range-track {
    height:12px;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(239,106,34,.22), rgba(246,207,31,.12));
    border:1px solid rgba(255,196,110,.08);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.04),
        inset 0 -2px 6px rgba(0,0,0,.24);
}

.volume-control input[type="range"]::-moz-range-thumb {
    width:28px;
    height:28px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.92);
    background:radial-gradient(circle at 35% 30%, #fff2c5, #f6cf1f 52%, #ef6a22 100%);
    box-shadow:
        0 0 0 7px rgba(252,229,30,.12),
        0 10px 24px rgba(0,0,0,.28),
        0 0 22px rgba(252,229,30,.38);
}

.volume-control:hover {
    border-color:rgba(255,255,255,.16);
    box-shadow:
        0 16px 36px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.05),
        0 0 0 1px rgba(252,229,30,.08);
}

.site-main {
    min-height:100svh;
    padding:clamp(280px, 34vh, 390px) 0 40px;
}

section {
    margin-top:26px;
}

.site-main > section:first-child {
    margin-top:0;
}

.intro-panel,
.model-panel,
.maps-panel,
.about-panel,
.discord-panel {
    position:relative;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:32px;
    background:
        radial-gradient(circle at top left, rgba(246,207,31,.12), rgba(246,207,31,0) 30%),
        radial-gradient(circle at 100% 0, rgba(239,106,34,.08), rgba(239,106,34,0) 26%),
        linear-gradient(180deg, rgba(255,245,222,.07), rgba(255,255,255,.03) 16%, rgba(255,255,255,.012) 100%),
        var(--panel-soft);
    box-shadow:var(--panel-shadow);
    backdrop-filter:blur(24px) saturate(1.04);
}

.intro-panel::before,
.model-panel::before,
.maps-panel::before,
.about-panel::before,
.discord-panel::before {
    content:"";
    position:absolute;
    inset:auto auto 62% -4%;
    width:240px;
    height:240px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(246,207,31,.2), rgba(246,207,31,0) 68%);
    pointer-events:none;
}

.intro-panel::after,
.model-panel::after,
.maps-panel::after,
.about-panel::after,
.discord-panel::after {
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(135deg, rgba(255,255,255,.05), transparent 24%, transparent 74%, rgba(255,255,255,.03));
    pointer-events:none;
}

.intro-panel {
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    gap:18px;
    padding:22px 24px;
}

.eyebrow {
    margin:0 0 10px;
    color:var(--accent);
    font-size:1rem;
    text-transform:uppercase;
}

.intro-copy h1,
.section-heading h2,
.modal-header h2 {
    margin:0;
    line-height:.92;
    text-transform:uppercase;
    text-wrap:balance;
}

.intro-copy h1 {
    max-width:11ch;
    font-size:clamp(2.2rem, 4vw, 3.6rem);
}

.intro-text {
    max-width:52ch;
    margin:10px 0 0;
    line-height:1.6;
}

.intro-meta {
    display:grid;
    grid-template-columns:repeat(2, minmax(150px, 180px));
    gap:12px;
}

.meta-box,
.map-card,
.map-modal-dialog {
    border:1px solid var(--line);
    box-shadow:var(--shadow);
}

.meta-box {
    display:grid;
    gap:6px;
    align-content:center;
    min-height:94px;
    padding:16px 18px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
        var(--panel);
    border-radius:24px;
    backdrop-filter:blur(12px);
}

.meta-box span {
    font-family:"Teko", sans-serif;
    font-size:2.2rem;
    line-height:.9;
    text-transform:uppercase;
}

.meta-box small {
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.08em;
}

.maps-panel,
.model-panel,
.about-panel,
.discord-panel {
    max-width:1088px;
    margin-left:auto;
    margin-right:auto;
    padding:26px;
}

.maps-panel {
    transition:transform .45s cubic-bezier(.2,.9,.2,1), opacity .45s ease, filter .45s ease;
    backdrop-filter:blur(24px);
}

body.is-lobby-top .maps-panel {
    opacity:.94;
    filter:saturate(.96);
    transform:translateY(28px);
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.9) 18%, rgba(0,0,0,1) 34%);
    mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.9) 18%, rgba(0,0,0,1) 34%);
}

.panel-heading {
    position:relative;
    z-index:1;
    display:grid;
    gap:12px;
    margin-bottom:24px;
    padding-bottom:18px;
}

.panel-heading::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:1px;
    background:linear-gradient(90deg, rgba(246,207,31,.46), rgba(239,106,34,.16) 36%, rgba(255,255,255,0) 100%);
}

.panel-heading-copy {
    display:grid;
    gap:10px;
    grid-template-columns:minmax(0, 1.2fr) minmax(280px, .85fr);
    align-items:end;
}

.panel-heading-copy-single {
    grid-template-columns:minmax(0, 1fr);
}

.panel-heading h2 {
    margin:0;
    font-family:"Teko", sans-serif;
    font-size:clamp(2.6rem, 5.4vw, 4.8rem);
    line-height:.9;
    letter-spacing:.04em;
    text-transform:uppercase;
    text-wrap:balance;
    text-shadow:0 10px 24px rgba(0,0,0,.18);
}

.panel-heading p {
    margin:0;
    max-width:42ch;
    color:rgba(241,236,228,.78);
    line-height:1.65;
}

.panel-heading-compact {
    margin-bottom:16px;
}

.panel-heading-compact p {
    max-width:52ch;
}

.section-heading {
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:18px;
    position:relative;
    z-index:1;
}

.section-heading h2 {
    max-width:14ch;
    font-size:clamp(2.1rem, 5vw, 4rem);
}

.map-grid {
    gap:24px;
}

.map-grid,
.map-grid-row {
    display:grid;
}

.map-grid-row {
    gap:24px;
    align-items:stretch;
}

.map-grid-row-1 {
    grid-template-columns:minmax(0, 1fr);
}

.map-grid-row-2 {
    grid-template-columns:1fr 1fr;
}

.map-grid-row-3 {
    grid-template-columns:repeat(3, minmax(0, 1fr));
}

.map-grid-actions {
    display:flex;
    justify-content:center;
    margin-top:18px;
}

.map-grid-toggle {
    min-width:220px;
}

.model-stage {
    position:relative;
    display:grid;
    gap:18px;
    justify-items:center;
    min-height:520px;
    padding:24px;
    border-radius:28px;
    border:1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(circle at 50% 22%, rgba(99,233,199,.13), rgba(99,233,199,0) 28%),
        radial-gradient(circle at 20% 14%, rgba(252,229,30,.12), rgba(252,229,30,0) 26%),
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)),
        rgba(10,13,20,.78);
    box-shadow:var(--card-shadow);
}

.model-stage::before {
    content:"";
    position:absolute;
    left:50%;
    bottom:56px;
    width:min(420px, 72%);
    height:68px;
    background:radial-gradient(circle, rgba(0,0,0,.55), rgba(0,0,0,0) 72%);
    transform:translateX(-50%);
    filter:blur(8px);
    pointer-events:none;
}

.model-stage-copy {
    position:relative;
    z-index:1;
    text-align:center;
}

.model-stage-copy p {
    margin:0;
    color:var(--muted);
}

.map-card {
    position:relative;
    display:grid;
    grid-template-rows:auto 1fr;
    overflow:hidden;
    background:
        radial-gradient(circle at top left, rgba(246,207,31,.08), rgba(246,207,31,0) 34%),
        radial-gradient(circle at top right, rgba(239,106,34,.07), rgba(239,106,34,0) 28%),
        linear-gradient(180deg, rgba(255,245,222,.055), rgba(255,255,255,.018)),
        rgba(18,11,8,.92);
    border-radius:26px;
    transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
    backdrop-filter:blur(16px) saturate(1.04);
    min-height:100%;
    cursor:pointer;
}

.map-card-outline {
    position:absolute;
    inset:-1px;
    z-index:0;
    padding:2px;
    border-radius:inherit;
    background:
        linear-gradient(135deg, rgba(255,245,222,.18), rgba(255,255,255,0) 30%, rgba(255,255,255,.1) 68%, rgba(255,245,222,.2)),
        var(--map-outline-gradient, linear-gradient(135deg, rgba(246,207,31,.72), rgba(239,106,34,.48), rgba(255,182,72,.38)));
    opacity:0;
    transform:scale(.985);
    transition:opacity .22s ease, transform .22s ease, filter .22s ease;
    pointer-events:none;
    filter:saturate(1.02) brightness(.96);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite:exclude;
}

.map-card::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:1px;
    background:linear-gradient(90deg, rgba(246,207,31,.45), rgba(239,106,34,.14), rgba(255,255,255,0));
    opacity:.65;
}

.map-card::after {
    content:"";
    position:absolute;
    inset:auto 0 0;
    height:90px;
    background:linear-gradient(180deg, rgba(18,11,8,0), rgba(18,11,8,.3));
    pointer-events:none;
}

.map-card:hover {
    transform:translateY(-7px);
    border-color:rgba(246,207,31,.2);
    box-shadow:0 26px 52px rgba(0,0,0,.38), 0 0 0 1px rgba(239,106,34,.08);
}

.map-card.is-selected {
    border-color:rgba(246,207,31,.18);
    box-shadow:0 22px 44px rgba(0,0,0,.36), 0 0 0 1px rgba(246,207,31,.08);
}

.map-card.is-selected .map-card-outline {
    opacity:1;
    transform:scale(1);
    filter:saturate(1.12) brightness(1.02);
}

.map-card-media {
    position:relative;
    aspect-ratio:16 / 10;
    padding:14px;
    background:linear-gradient(180deg, rgba(255,245,222,.04), rgba(255,255,255,.012));
}

.map-card-media::after {
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:14px;
    height:48px;
    border-radius:0 0 14px 14px;
    background:linear-gradient(180deg, rgba(5,7,10,0), rgba(5,7,10,.22));
    pointer-events:none;
}

.map-card-image {
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:16px;
    background:#120b06;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
    transition:transform .32s cubic-bezier(.22,1,.36,1), filter .32s ease, opacity .26s ease;
}

.map-card-image.is-lazy-pending {
    opacity:0;
}

.map-card:hover .map-card-image {
    transform:scale(1.03);
    filter:saturate(1.03);
}

.map-card-body {
    display:grid;
    grid-template-rows:auto minmax(0, 1fr) auto auto;
    gap:14px;
    padding:20px 20px 22px;
    position:relative;
    z-index:1;
}

.map-card-body::before {
    content:"";
    position:absolute;
    top:0;
    left:20px;
    right:20px;
    height:1px;
    background:linear-gradient(90deg, rgba(255,204,133,.12), rgba(255,255,255,0));
    opacity:.35;
}

.map-card-title {
    margin:0;
    font-size:2.24rem;
    line-height:.9;
    text-transform:uppercase;
    text-shadow:0 8px 18px rgba(0,0,0,.14);
}

.map-card-text,
.modal-copy-block {
    line-height:1.65;
}

.map-card-text {
    display:-webkit-box;
    min-height:6.6em;
    overflow:hidden;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    color:rgba(237,232,224,.8);
    font-size:.98rem;
    line-height:1.72;
}

.map-card-meta {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,.07);
    margin-top:auto;
}

.map-card-meta-copy {
    display:grid;
    gap:4px;
    min-width:0;
    flex:1 1 auto;
}

.map-card-code,
.map-card-autor,
.modal-code,
.modal-autor {
    margin:0;
    font-size:.94rem;
    letter-spacing:.08em;
}

.map-card-code {
    color:rgba(255,236,199,.84);
}

.map-card-autor {
    color:rgba(240,189,124,.76);
}

.map-card-actions,
.modal-actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:6px;
    align-items:center;
}

.modal-actions {
    display:grid;
    justify-items:start;
    gap:12px;
}

.map-card-actions {
    display:grid;
    grid-template-columns:1fr;
    align-items:stretch;
}

.map-card-actions > * {
    width:100%;
}

.map-card-play,
.map-card-copy {
    min-width:0;
}

.map-card-gg {
    flex:0 0 64px;
    min-width:64px;
    padding:0;
    min-height:64px;
    align-self:flex-start;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:
        linear-gradient(180deg, rgba(255,245,222,.1), rgba(255,255,255,.035)),
        rgba(20,12,9,.86);
}

.map-card-gg-icon {
    width:38px;
    height:38px;
    object-fit:cover;
    transform:scale(.98);
    transform-origin:center;
    filter:drop-shadow(0 4px 10px rgba(0,0,0,.24));
}

.about-strip {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px;
}

.discord-panel {
    display:grid;
    grid-template-columns:minmax(0, .95fr) minmax(320px, .9fr);
    gap:20px;
    align-items:center;
    background:
        radial-gradient(circle at 82% 20%, rgba(114,137,218,.12), rgba(114,137,218,0) 24%),
        radial-gradient(circle at 12% 18%, rgba(239,106,34,.12), rgba(239,106,34,0) 22%),
        radial-gradient(circle at 58% 0, rgba(246,207,31,.1), rgba(246,207,31,0) 20%),
        linear-gradient(180deg, rgba(255,245,222,.08), rgba(255,255,255,.02)),
        var(--panel-soft);
    min-height:184px;
}

.discord-panel-copy {
    display:grid;
    gap:12px;
}

.discord-panel-copy h2 {
    margin:0;
    font-family:"Teko", sans-serif;
    font-size:clamp(3rem, 5vw, 4.8rem);
    line-height:.9;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.discord-panel-copy p {
    margin:0;
    max-width:38ch;
    color:var(--muted);
    line-height:1.65;
}

.discord-eyebrow {
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:max-content;
    padding:8px 12px 6px;
    border-radius:999px;
    color:#fff0cb;
    background:linear-gradient(180deg, rgba(239,106,34,.18), rgba(246,207,31,.08));
    border:1px solid rgba(255,190,106,.24);
    font-family:"Teko", sans-serif;
    font-size:1rem;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.discord-link {
    position:relative;
    display:flex;
    align-items:center;
    gap:18px;
    min-height:132px;
    padding:26px 30px;
    overflow:hidden;
    border-radius:28px;
    border:1px solid rgba(255,190,106,.18);
    background:
        linear-gradient(135deg, rgba(114,137,218,.18), rgba(84,103,191,.08) 34%, rgba(239,106,34,.06) 68%, rgba(255,255,255,.04) 100%),
        rgba(18,11,8,.92);
    box-shadow:
        0 28px 60px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 0 1px rgba(114,137,218,.08);
    animation:discordFloat 3.6s ease-in-out infinite;
    width:100%;
}

.discord-link::before {
    content:"";
    position:absolute;
    inset:-10% auto -10% -32%;
    width:44%;
    background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.18), rgba(255,255,255,0));
    transform:skewX(-18deg);
    animation:discordShine 3.2s ease-in-out infinite;
    pointer-events:none;
}

.discord-link::after {
    content:"";
    position:absolute;
    inset:auto 18px 16px auto;
    width:104px;
    height:48px;
    border-radius:999px;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
    opacity:.34;
    pointer-events:none;
}

.discord-link:hover {
    transform:translateY(-4px) scale(1.01);
    border-color:rgba(114,137,218,.4);
    box-shadow:
        0 34px 72px rgba(0,0,0,.36),
        inset 0 1px 0 rgba(255,255,255,.1),
        0 0 0 1px rgba(114,137,218,.16);
}

.discord-link-badge {
    position:relative;
    z-index:1;
    display:grid;
    place-items:center;
    flex:0 0 78px;
    width:78px;
    height:78px;
    border-radius:22px;
    color:#fff;
    background:linear-gradient(180deg, #7f95ff, #6376db);
    box-shadow:
        0 18px 34px rgba(86,104,190,.32),
        inset 0 1px 0 rgba(255,255,255,.32);
    isolation:isolate;
}

.discord-link-badge::before {
    content:"";
    position:absolute;
    inset:-10px;
    border-radius:28px;
    border:1px solid rgba(114,137,218,.22);
    opacity:.85;
    animation:discordPulse 2.1s ease-out infinite;
}

.discord-link-wave-holder {
    position:absolute;
    inset:-18px;
    border-radius:32px;
    pointer-events:none;
    overflow:visible;
}

.discord-link-wave {
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:
        radial-gradient(circle at center, transparent 32%, rgba(216,226,255,.48) 33.5%, transparent 36.5%),
        radial-gradient(circle at center, transparent 48%, rgba(144,167,255,.4) 49.5%, transparent 53%),
        radial-gradient(circle at center, transparent 64%, rgba(114,137,218,.28) 65.5%, transparent 69%);
    opacity:0;
    transform:scale(.72) rotate(0deg);
    pointer-events:none;
    mix-blend-mode:screen;
    will-change:transform, opacity;
}

.discord-link-badge img {
    width:48px;
    height:48px;
    object-fit:contain;
    transform:translate3d(var(--discord-look-x, 0px), var(--discord-look-y, 0px), 0) rotate(var(--discord-look-rotate, 0deg));
    transform-origin:center;
    will-change:transform;
    transition:transform .22s ease;
}

.discord-link:hover .discord-link-badge img {
    transform:
        translate3d(var(--discord-look-x, 0px), var(--discord-look-y, 0px), 0)
        rotate(var(--discord-look-rotate, 0deg))
        scale(1.06);
}

.discord-link-copy {
    position:relative;
    z-index:1;
    display:grid;
    gap:6px;
    min-width:0;
    flex:1 1 auto;
}

.discord-link-copy strong {
    font-family:"Teko", sans-serif;
    font-size:2rem;
    line-height:.9;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.discord-link-copy span {
    color:var(--muted);
    line-height:1.6;
}

.about-mini-card {
    position:relative;
    padding:18px 20px;
    background:
        radial-gradient(circle at top left, rgba(246,207,31,.08), rgba(246,207,31,0) 36%),
        linear-gradient(180deg, rgba(255,245,222,.04), rgba(255,255,255,.016));
    border-radius:24px;
    border:1px solid var(--line);
    box-shadow:var(--card-shadow);
    overflow:hidden;
    min-height:100%;
}

.about-mini-card::before {
    content:"";
    position:absolute;
    inset:0 auto auto 0;
    width:78px;
    height:78px;
    background:radial-gradient(circle, rgba(239,106,34,.16), rgba(239,106,34,0) 70%);
    pointer-events:none;
}

.about-mini-card::after {
    content:"";
    position:absolute;
    left:20px;
    right:20px;
    top:0;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(246,207,31,.74), rgba(239,106,34,.36), rgba(255,255,255,0));
    opacity:.72;
}

.about-mini-label {
    display:inline-block;
    margin-bottom:10px;
    color:var(--accent);
    font-family:"Teko", sans-serif;
    font-size:1.3rem;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.about-mini-card p {
    margin:0;
    color:var(--muted);
    line-height:1.6;
}

.site-footer {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:16px;
    max-width:1088px;
    padding:18px 0 34px;
    font-size:.94rem;
    color:rgba(241,224,199,.76);
    border-top:1px solid rgba(255,206,113,.14);
}

.site-footer-disclaimer {
    flex-basis:100%;
    margin:0;
    padding:12px 14px;
    border-radius:18px;
    border:1px solid rgba(255,116,116,.28);
    background:linear-gradient(180deg, rgba(255,116,116,.16), rgba(255,116,116,.06));
    color:rgba(255,232,232,.96);
    box-shadow:0 0 0 1px rgba(255,116,116,.08), 0 10px 22px rgba(109,13,13,.18);
    font-size:.88rem;
    line-height:1.65;
}

.button,
.button-ghost {
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:52px;
    padding:7px 16px 2px;
    border-radius:8px;
    border:0;
    cursor:pointer;
    text-transform:uppercase;
    text-decoration:none;
    overflow:hidden;
    isolation:isolate;
    transition-duration:.15s;
    transition-timing-function:ease-out;
}

.button {
    background:var(--accent);
    color:#120a04;
    font-family:"Teko", sans-serif;
    font-size:1.35rem;
    letter-spacing:.06em;
    box-shadow:0 2px rgba(78,37,11,.94), 0 2px rgba(255,246,220,.9) inset;
    outline-width:0;
    outline-color:transparent;
    outline-offset:10px;
    outline-style:solid;
    transition-property:outline-color, outline-offset, outline-width, transform, background;
}

.button::before {
    content:"";
    position:absolute;
    inset:1px 1px auto;
    height:44%;
    border-radius:7px 7px 12px 12px;
    background:linear-gradient(180deg, rgba(255,246,220,.28), rgba(255,255,255,0));
    opacity:.65;
    pointer-events:none;
}

.button:hover {
    outline-color:rgba(255,255,255,.8);
    outline-offset:3px;
    outline-width:3px;
    box-shadow:0 4px rgba(78,37,11,.94), 0 2px rgba(255,246,220,.9) inset, 0 10px 22px rgba(239,106,34,.24);
    background:linear-gradient(180deg, #ffd94c, #f6cf1f);
}

.button:active {
    transform:scale(.96);
}

.button.is-copied {
    background:#7df0b8;
}

.button.is-copy-error {
    background:#ff8f3f;
    color:#120a04;
}

.button-ghost {
    padding:13px 18px 11px;
    color:var(--text);
    background:linear-gradient(180deg, rgba(255,245,222,.08), rgba(255,255,255,.035));
    border:1px solid rgba(255,206,113,.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 22px rgba(0,0,0,.15);
}

.button-ghost:hover {
    background:linear-gradient(180deg, rgba(246,207,31,.12), rgba(239,106,34,.06));
    border-color:rgba(255,206,113,.28);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 14px 28px rgba(0,0,0,.18);
}

.hover-arrow {
    position:relative;
    top:1px;
    margin-left:4px;
    stroke-width:2;
    fill:none;
    stroke:currentColor;
    transition:opacity .16s ease, transform .16s ease;
    z-index:1;
}

.hover-arrow-linepath {
    opacity:0;
    transition:opacity .2s;
}

.button:hover .hover-arrow-linepath {
    opacity:1;
}

.hover-arrow-tippath {
    transition:transform .2s;
}

.button:hover .hover-arrow-tippath {
    transform:translateX(3px);
}

.copy-button {
    min-width:170px;
}

.button-main-label,
.button-status {
    font-family:"Teko", sans-serif;
    font-size:1.35rem;
    letter-spacing:.06em;
}

.button-main-label {
    position:relative;
    z-index:1;
    white-space:nowrap;
    transition:opacity .16s ease, transform .16s ease;
}

.button-status {
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    padding:7px 16px 2px;
    opacity:0;
    transform:translateY(8px) scale(.98);
    transition:opacity .18s ease, transform .18s ease;
    pointer-events:none;
    white-space:nowrap;
}

.copy-button.is-copied .button-main-label,
.copy-button.is-copied .hover-arrow,
.copy-button.is-copy-error .button-main-label,
.copy-button.is-copy-error .hover-arrow {
    opacity:0;
    transform:translateY(-7px);
}

.copy-button.is-copied .button-status,
.copy-button.is-copy-error .button-status {
    opacity:1;
    transform:translateY(0) scale(1);
}

.map-modal[hidden] {
    display:none;
}

.map-modal {
    position:fixed;
    inset:0;
    z-index:30;
}

.map-modal-backdrop {
    position:absolute;
    inset:0;
    background:rgba(4,6,10,.76);
    backdrop-filter:blur(12px);
}

.map-modal-dialog {
    position:relative;
    width:min(1120px, calc(100% - 24px));
    max-height:calc(100vh - 24px);
    margin:12px auto;
    padding:24px;
    overflow:auto;
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
        var(--panel-strong);
    border-radius:28px;
    backdrop-filter:blur(20px);
    scrollbar-width:thin;
    scrollbar-color:rgba(252,229,30,.55) rgba(255,255,255,.06);
}

.map-modal-dialog::-webkit-scrollbar {
    width:12px;
}

.map-modal-dialog::-webkit-scrollbar-track {
    background:rgba(255,255,255,.04);
    border-radius:999px;
}

.map-modal-dialog::-webkit-scrollbar-thumb {
    background:linear-gradient(180deg, rgba(252,229,30,.82), rgba(255,111,63,.56));
    border-radius:999px;
    border:2px solid rgba(10,13,20,.84);
}

.map-modal-dialog::-webkit-scrollbar-thumb:hover {
    background:linear-gradient(180deg, rgba(252,229,30,.92), rgba(255,111,63,.7));
}

.button-particle-layer {
    position:fixed;
    inset:0;
    z-index:80;
    pointer-events:none;
    overflow:hidden;
}

.button-particle {
    position:absolute;
    left:0;
    top:0;
    border-radius:999px;
    pointer-events:none;
    will-change:transform, opacity;
    mix-blend-mode:screen;
}

.button-particle-hover {
    filter:blur(.2px);
}

.button-particle-click {
    filter:blur(.3px);
}

.modal-close {
    position:absolute;
    top:16px;
    right:16px;
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    color:var(--text);
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    cursor:pointer;
    font-family:"Teko", sans-serif;
    font-size:1.7rem;
    line-height:1;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    transition:transform .15s ease-out, background .15s ease-out, border-color .15s ease-out, box-shadow .15s ease-out;
}

.modal-close:hover {
    background:rgba(255,255,255,.16);
    border-color:rgba(255,255,255,.24);
    box-shadow:0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.1);
}

.modal-close:active {
    transform:scale(.94);
}

.modal-header {
    padding-right:56px;
}

.modal-header h2 {
    font-size:clamp(3rem, 7vw, 5rem);
}

.modal-gallery {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
    margin-top:22px;
}

.modal-figure {
    margin:0;
    padding:12px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--line);
    border-radius:22px;
    box-shadow:var(--card-shadow);
}

.modal-figure-wide {
    grid-column:1 / -1;
}

.modal-figure img {
    width:100%;
    aspect-ratio:16 / 9;
    object-fit:contain;
    border-radius:16px;
    background:#06080c;
}

.modal-figure figcaption {
    margin-top:10px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:.82rem;
}

.modal-copy-block {
    display:grid;
    gap:14px;
    margin-top:22px;
}

.modal-copy-block p {
    margin:0;
}

.modal-points {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    padding:0;
    margin:18px 0 0;
    list-style:none;
}

.modal-points li {
    padding:10px 12px 8px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;
}

.reveal {
    opacity:0;
    transform:translateY(24px);
    transition:opacity .6s ease, transform .6s ease;
}

.reveal.is-visible {
    opacity:1;
    transform:none;
}

.loading-state,
.empty-state {
    padding:24px;
    border:1px dashed rgba(255,255,255,.14);
    border-radius:22px;
    color:var(--muted);
}

@media(max-width:980px) {
    .intro-panel,
    .about-strip,
    .panel-heading-copy {
        grid-template-columns:1fr;
    }

    .discord-panel {
        grid-template-columns:1fr;
    }

    .site-header {
        flex-direction:column;
        align-items:flex-start;
        gap:14px;
    }

    .site-controls {
        width:100%;
        flex-wrap:wrap;
    }

    .site-controls-meta {
        margin-left:auto;
    }

    .site-controls-meta .header-cta {
        margin-left:auto;
    }

    .intro-meta {
        grid-template-columns:1fr 1fr;
    }

    .modal-gallery {
        grid-template-columns:1fr;
    }

    .modal-figure-wide {
        grid-column:auto;
    }

    .about-strip {
        grid-template-columns:1fr;
    }

    .model-stage {
        min-height:460px;
    }

}

@media(max-width:760px) {
    .site-header,
    .site-main,
    .site-footer {
        width:min(1240px, calc(100% - 24px));
    }

    .site-nav {
        width:100%;
        justify-content:space-between;
        flex-wrap:wrap;
    }

    .site-controls {
        width:100%;
        justify-content:space-between;
    }

    .site-controls-meta {
        width:100%;
        margin-left:0;
        justify-items:stretch;
    }

    .site-controls-meta .header-cta {
        margin-left:0;
    }

    .language-switch {
        width:100%;
        justify-content:center;
    }

    .volume-control {
        top:50%;
        right:12px;
        bottom:auto;
        width:84px;
        padding:18px 10px 16px;
        transform:translateY(-50%);
    }

    .volume-control-slider {
        height:196px;
    }

    .volume-control input[type="range"] {
        width:196px;
    }

    .map-card-meta {
        align-items:center;
    }

    .map-grid-row {
        grid-template-columns:1fr !important;
    }

    .site-main {
        padding:clamp(220px, 28vh, 300px) 0 32px;
    }

    .panel-heading {
        padding-bottom:14px;
    }

    .audio-gate-panel {
        padding:28px 22px 24px;
        border-radius:24px;
    }

    .intro-panel,
    .model-panel,
    .maps-panel,
    .about-panel,
    .discord-panel,
    .map-modal-dialog {
        border-radius:24px;
    }

    .intro-meta {
        grid-template-columns:1fr;
    }

    .map-card-copy,
    .map-card-play,
    .modal-actions .copy-button,
    .modal-actions .button-ghost {
        flex:1 1 100%;
    }

    .site-footer {
        flex-direction:column;
    }

    .model-stage {
        min-height:380px;
        padding:18px;
        border-radius:22px;
    }

    .site-stage-title {
        top:9vh;
    }

    body.is-lobby-top .maps-panel {
        transform:translateY(36px);
    }
}