@font-face {
    font-family: "Beaufort for LoL";
    src: url("../fonts/beaufort-regular.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

/* Branded first-paint loader */
html.is-loading body {
    overflow: hidden;
}

.site-loader {
    position: fixed;
    z-index: 99999;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 18px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    background:
        radial-gradient(circle at 50% 46%, rgba(112, 21, 28, 0.22), transparent 30%),
        linear-gradient(145deg, #05070c, #09111d 52%, #05070c);
    transition: opacity 520ms ease, visibility 520ms ease;
    pointer-events: none;
}

.site-loader::before,
.site-loader::after {
    position: absolute;
    top: 50%;
    width: min(28vw, 420px);
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(212, 161, 78, 0.42));
}

.site-loader::before {
    right: calc(50% + 170px);
}

.site-loader::after {
    left: calc(50% + 170px);
    transform: scaleX(-1);
}

.is-loading .site-loader {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.site-loader-emblem {
    position: relative;
    display: grid;
    width: min(330px, 68vw);
    height: 150px;
    place-items: center;
}

.site-loader-emblem img {
    position: relative;
    z-index: 2;
    width: min(290px, 62vw);
    max-height: 120px;
    object-fit: contain;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.82));
    animation: siteLoaderLogo 1.8s ease-in-out infinite;
}

.site-loader-glow {
    position: absolute;
    inset: 15px 25px;
    border: 1px solid rgba(214, 166, 82, 0.14);
    background: radial-gradient(ellipse, rgba(184, 43, 39, 0.22), transparent 68%);
    filter: blur(5px);
    animation: siteLoaderGlow 1.8s ease-in-out infinite;
}

.site-loader p {
    margin: 0;
    color: #c6a260;
    font: 800 12px/1 Tahoma, Arial, sans-serif;
    letter-spacing: 0.2em;
    text-shadow: 0 0 14px rgba(205, 157, 76, 0.2);
}

.site-loader-track {
    position: relative;
    width: min(240px, 58vw);
    height: 2px;
    overflow: hidden;
    background: rgba(219, 177, 103, 0.12);
}

.site-loader-track i {
    position: absolute;
    inset: 0 auto 0 0;
    width: 42%;
    background: linear-gradient(90deg, transparent, #bd3035, #edc779, transparent);
    box-shadow: 0 0 14px rgba(221, 176, 93, 0.46);
    animation: siteLoaderTrack 1.05s ease-in-out infinite;
}

@keyframes siteLoaderLogo {
    0%, 100% { opacity: 0.78; transform: scale(0.985); }
    50% { opacity: 1; transform: scale(1.015); }
}

@keyframes siteLoaderGlow {
    0%, 100% { opacity: 0.45; transform: scale(0.92); }
    50% { opacity: 1; transform: scale(1.04); }
}

@keyframes siteLoaderTrack {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(350%); }
}

@media (prefers-reduced-motion: reduce) {
    .site-loader-emblem img,
    .site-loader-glow,
    .site-loader-track i {
        animation: none;
    }
}

/* Runtime performance: isolate section painting and pause off-screen CSS motion. */
main > section { contain: paint; }
main > section.performance-paused,
main > section.performance-paused *,
main > section.performance-paused::before,
main > section.performance-paused::after,
main > section.performance-paused *::before,
main > section.performance-paused *::after { animation-play-state: paused !important; }

/* Interactive guild land system */
.guild-lands {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 104px 0 90px;
    background: #060b10;
    isolation: isolate;
}
.guild-lands::before,
.guild-lands::after,
.guild-lands-backdrop { position: absolute; inset: 0; z-index: -2; content: ""; pointer-events: none; }
.guild-lands-backdrop {
    background:
        linear-gradient(180deg, rgba(3, 9, 14, 0.96), rgba(4, 13, 18, 0.35) 22%, rgba(4, 11, 15, 0.5) 72%, #060b10 96%),
        url("../images/characters/lonca-arazi-empty.webp") center 36% / cover no-repeat;
    filter: saturate(0.76) brightness(0.54);
}
.guild-lands::before { z-index: -1; background: linear-gradient(90deg, rgba(7, 15, 20, 0.94), transparent 25%, transparent 75%, rgba(7, 15, 20, 0.94)); }
.guild-lands::after { z-index: -1; background: linear-gradient(180deg, #04101a 0, transparent 15%, transparent 88%, #04101a 100%); }
.guild-lands > .section-shell { position: relative; z-index: 1; }
.guild-lands-heading { margin-bottom: 42px; text-shadow: 0 3px 18px #000; }
.guild-lands-heading .ornate-description { color: #c8cfcb; }

.guild-land-stage {
    position: relative;
    min-height: 780px;
    overflow: hidden;
    border: 1px solid rgba(214, 171, 89, 0.4);
    background: #09131a;
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.52), inset 0 0 80px rgba(0, 0, 0, 0.28);
    isolation: isolate;
}
.guild-stage-scene,
.guild-stage-shade { position: absolute; inset: 0; pointer-events: none; }
.guild-stage-scene { z-index: -2; background-position: center; background-size: cover; transition: opacity 700ms ease, filter 700ms ease, transform 1100ms ease; }
.guild-stage-village { background-image: url("../images/characters/npc-bg.webp"); }
.guild-stage-land { background-image: url("../images/characters/lonca-arazi-empty.webp"); opacity: 0; transform: scale(1.035); }
.guild-stage-shade { z-index: -1; background: linear-gradient(180deg, rgba(4, 10, 13, 0.1) 20%, rgba(3, 9, 13, 0.2) 48%, rgba(3, 9, 13, 0.88) 100%); }
.guild-land-stage[data-state="estate"] .guild-stage-village,
.guild-land-stage[data-state="buying"] .guild-stage-village,
.guild-land-stage[data-state="building"] .guild-stage-village,
.guild-land-stage[data-state="complete"] .guild-stage-village { opacity: 0; }
.guild-land-stage[data-state="estate"] .guild-stage-land,
.guild-land-stage[data-state="buying"] .guild-stage-land,
.guild-land-stage[data-state="building"] .guild-stage-land,
.guild-land-stage[data-state="complete"] .guild-stage-land { opacity: 1; transform: scale(1); }

.guild-location-bar {
    position: absolute;
    z-index: 30;
    top: 18px;
    right: 18px;
    left: 18px;
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 3px solid #d9a64d;
    background: rgba(5, 13, 18, 0.88);
    box-shadow: 0 13px 30px rgba(0, 0, 0, 0.34);
}
.guild-location-bar > span { display: grid; gap: 3px; }
.guild-location-bar small { color: #dda94f; font-size: 8px; font-weight: 900; letter-spacing: 0.14em; }
.guild-location-bar strong { color: #eee3cd; font: 700 14px/1.1 "Beaufort for LoL", Georgia, serif; }
.guild-location-bar b { min-width: 190px; padding: 8px 12px; border: 1px solid rgba(222, 174, 85, 0.38); color: #efc974; background: rgba(139, 91, 22, 0.17); font: 900 8px/1 Tahoma, Arial, sans-serif; letter-spacing: 0.08em; text-align: center; }
.guild-land-stage[data-state="building"] .guild-location-bar b { border-color: rgba(83, 185, 139, 0.42); color: #79d4a6; background: rgba(23, 112, 77, 0.16); }
.guild-land-stage[data-state="complete"] .guild-location-bar b { border-color: rgba(97, 205, 151, 0.54); color: #92e0b5; background: rgba(28, 121, 79, 0.22); }

.guild-player,
.guild-guard,
.guild-estate-agent { position: absolute; z-index: 7; bottom: 80px; width: 50%; height: 610px; transition: opacity 520ms ease, transform 620ms ease; }
.guild-player { left: 3%; }
.guild-guard { right: 2%; border: 0; padding: 0; color: inherit; background: transparent; cursor: pointer; }
.guild-estate-agent { right: 7%; }
.guild-player img,
.guild-guard img,
.guild-estate-agent img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 24px 22px rgba(0, 0, 0, 0.68)); }
.guild-player img { transform: scale(1.35); }
.guild-guard img { transform: scale(1.24); transition: filter 180ms ease, transform 180ms ease; }
.guild-guard:hover img,
.guild-guard:focus-visible img { filter: brightness(1.12) drop-shadow(0 24px 22px rgba(0, 0, 0, 0.68)); transform: scale(1.27); }
.guild-estate-agent img { transform: scale(1.32); }
.guild-game-label,
.guild-npc-name { position: absolute; z-index: 2; color: #55ef55; font: 700 11px/1.15 Tahoma, Arial, sans-serif; text-shadow: -1px -1px 0 #041004, 1px -1px 0 #041004, -1px 1px 0 #041004, 1px 1px 0 #041004, 0 2px 4px #000; text-align: center; }
.guild-game-label { top: 25%; left: 50%; display: grid; gap: 2px; transform: translateX(-50%); }
.guild-game-label b { color: #f0cf72; font: 700 10px/1.1 Tahoma, Arial, sans-serif; }
.guild-npc-name { top: 16%; left: 50%; transform: translateX(-50%); }
.guild-npc-prompt { position: absolute; z-index: 3; right: 15%; bottom: 120px; display: grid; min-width: 180px; gap: 4px; padding: 12px 15px; border: 1px solid rgba(222, 178, 94, 0.52); border-left: 3px solid #dda94d; background: rgba(5, 13, 18, 0.93); box-shadow: 0 18px 38px rgba(0, 0, 0, 0.48); text-align: left; }
.guild-npc-prompt strong { color: #f1d89f; font-size: 11px; }
.guild-npc-prompt small { color: #9ca7a6; font-size: 9px; }

.guild-land-stage[data-state="leaving"] .guild-player,
.guild-land-stage[data-state="leaving"] .guild-guard { opacity: 0; transform: translateY(34px); pointer-events: none; }
.guild-land-stage[data-state="estate"] .guild-guard,
.guild-land-stage[data-state="buying"] .guild-guard,
.guild-land-stage[data-state="building"] .guild-player,
.guild-land-stage[data-state="building"] .guild-guard,
.guild-land-stage[data-state="complete"] .guild-player,
.guild-land-stage[data-state="complete"] .guild-guard { display: none; }
.guild-land-stage[data-state="estate"] .guild-player,
.guild-land-stage[data-state="buying"] .guild-player { left: -2%; width: 48%; }
.guild-estate-agent[hidden] { display: none; }
.guild-estate-agent { animation: guild-actor-arrive 560ms cubic-bezier(0.16, 0.76, 0.24, 1) both; }
.guild-land-stage[data-state="building"] .guild-estate-agent,
.guild-land-stage[data-state="complete"] .guild-estate-agent { opacity: 0; transform: translateX(50px); pointer-events: none; }

.guild-dialogue {
    position: absolute;
    z-index: 24;
    bottom: 122px;
    left: 50%;
    display: grid;
    width: min(470px, calc(100% - 36px));
    gap: 12px;
    padding: 19px;
    border: 1px solid rgba(222, 177, 91, 0.58);
    border-top: 3px solid #d9a64d;
    color: #ded7c7;
    background: rgba(4, 12, 17, 0.96);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.62), inset 0 0 38px rgba(211, 158, 68, 0.05);
    transform: translateX(-50%);
    animation: guild-dialogue-arrive 340ms ease both;
}
.guild-dialogue[hidden] { display: none; }
.guild-dialogue header span { display: grid; gap: 4px; }
.guild-dialogue header small,
.guild-dialogue label { color: #dca84e; font-size: 8px; font-weight: 900; letter-spacing: 0.14em; }
.guild-dialogue header strong { color: #f0dfbd; font: 700 19px/1.15 "Beaufort for LoL", Georgia, serif; }
.guild-dialogue p { margin: 0; color: #aab0ad; font-size: 11px; line-height: 1.55; }
.guild-name-entry { display: grid; grid-template-columns: 1fr 136px; gap: 8px; }
.guild-name-entry input { min-width: 0; height: 44px; border: 1px solid rgba(255, 255, 255, 0.14); border-bottom-color: rgba(225, 178, 88, 0.62); outline: 0; padding: 0 13px; color: #f0e6d2; background: rgba(14, 22, 27, 0.94); font: 700 13px Tahoma, Arial, sans-serif; }
.guild-name-entry input:focus { border-color: #d9ad5c; box-shadow: 0 0 0 2px rgba(217, 173, 92, 0.13); }
.guild-name-entry button,
.guild-estate-dialogue button { min-height: 44px; border: 1px solid rgba(224, 174, 79, 0.58); color: #fff0cb; background: linear-gradient(110deg, #674519, #a36c25 52%, #674519); font-size: 10px; font-weight: 900; cursor: pointer; transition: filter 160ms ease, transform 160ms ease; }
.guild-name-entry button:hover,
.guild-name-entry button:focus-visible,
.guild-estate-dialogue button:hover,
.guild-estate-dialogue button:focus-visible { filter: brightness(1.15); transform: translateY(-2px); }
.guild-name-entry button:disabled,
.guild-estate-dialogue button:disabled { cursor: wait; filter: saturate(0.4); }
.guild-payment { display: flex; min-height: 35px; align-items: center; gap: 8px; padding: 7px 10px; border-left: 3px solid #dca84e; background: rgba(151, 101, 28, 0.13); }
.guild-payment img,
.guild-estate-dialogue button img { width: 28px; height: 28px; object-fit: contain; }
.guild-payment b { color: #eed49a; font-size: 9px; letter-spacing: 0.12em; }
.guild-payment small { margin-left: auto; color: #8fa19d; font-size: 9px; }
.guild-estate-dialogue { left: 31%; }
.guild-estate-dialogue button { display: flex; align-items: center; justify-content: center; gap: 9px; }

.guild-yang-transfer { position: absolute; z-index: 28; top: 44%; left: 50%; width: 280px; height: 90px; opacity: 0; pointer-events: none; transform: translate(-50%, -50%); }
.guild-yang-transfer img { position: absolute; top: 50%; left: 12%; width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(255, 204, 91, 0.78)); }
.guild-yang-transfer img:nth-child(2) { top: 26%; animation-delay: 70ms; }
.guild-yang-transfer img:nth-child(3) { top: 70%; animation-delay: 130ms; }
.guild-yang-transfer img:nth-child(4) { top: 38%; animation-delay: 200ms; }
.guild-yang-transfer img:nth-child(5) { top: 62%; animation-delay: 270ms; }
.guild-yang-transfer img:nth-child(6) { top: 48%; animation-delay: 340ms; }
.guild-land-stage.is-paying .guild-yang-transfer { opacity: 1; }
.guild-land-stage.is-paying .guild-yang-transfer img { animation: guild-yang-move 720ms ease-in both; }

.guild-build-world[hidden],
.guild-build-panel[hidden] { display: none; }
.guild-build-world { position: absolute; z-index: 5; inset: 74px 0 164px; }
.guild-build-plot { position: absolute; display: grid; place-items: center; border: 2px dashed rgba(242, 201, 117, 0.9); border-radius: 50%; background: radial-gradient(ellipse, rgba(189, 135, 48, 0.2), rgba(105, 75, 31, 0.05) 68%, transparent 70%); box-shadow: inset 0 0 30px rgba(217, 165, 77, 0.16), 0 0 20px rgba(221, 169, 77, 0.1); opacity: 0.94; transition: opacity 220ms ease; }
.guild-build-plot span { max-width: 84%; padding: 7px 10px; border: 1px solid rgba(231, 188, 103, 0.55); color: #ffe0a1; background: rgba(3, 10, 14, 0.94); box-shadow: 0 5px 14px rgba(0, 0, 0, 0.48); font: 800 10px/1.25 Tahoma, Arial, sans-serif; text-align: center; }
.guild-build-plot.is-forge { bottom: 52px; left: 5%; width: 27%; height: 120px; }
.guild-build-plot.is-home { bottom: 63px; left: 35%; width: 31%; height: 132px; }
.guild-build-plot.is-altar { right: 4%; bottom: 55px; width: 27%; height: 118px; }
.guild-build-plot.is-built { opacity: 0; }
.guild-built-structure { position: absolute; z-index: 7; height: auto; object-fit: contain; filter: drop-shadow(0 24px 20px rgba(0, 0, 0, 0.55)); pointer-events: none; }
.guild-built-structure[hidden] { display: none; }
.guild-built-structure.is-forge { bottom: -42px; left: -1%; width: 39%; }
.guild-built-structure.is-home { bottom: -22px; left: 27%; width: 48%; }
.guild-built-structure.is-altar { right: -2%; bottom: -34px; width: 40%; }
.guild-built-structure.is-constructing { animation: guild-structure-build 760ms cubic-bezier(0.16, 0.76, 0.24, 1) both; }

.guild-build-panel { position: absolute; z-index: 25; right: 18px; bottom: 18px; left: 18px; display: grid; gap: 10px; padding: 12px; border: 1px solid rgba(105, 193, 153, 0.4); border-left: 3px solid #64c294; background: rgba(3, 13, 17, 0.95); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.54); }
.guild-build-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.guild-build-panel > header span { display: grid; gap: 3px; }
.guild-build-panel > header small { color: #69cf9d; font-size: 8px; font-weight: 900; letter-spacing: 0.14em; }
.guild-build-panel > header strong { color: #e4e4d4; font-size: 11px; }
.guild-build-panel > header b { min-width: 58px; color: #8dd9b4; font: 900 11px Tahoma, Arial, sans-serif; text-align: right; }
.guild-building-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.guild-building-options button { display: grid; grid-template-columns: 58px 1fr; min-width: 0; min-height: 70px; align-items: center; gap: 10px; border: 1px solid rgba(255, 255, 255, 0.1); padding: 6px 9px; color: #dcd9cc; background: rgba(255, 255, 255, 0.035); text-align: left; cursor: pointer; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; }
.guild-building-options button:hover,
.guild-building-options button:focus-visible { border-color: rgba(222, 174, 83, 0.62); background: rgba(165, 110, 34, 0.12); transform: translateY(-2px); }
.guild-building-options button:disabled { border-color: rgba(88, 191, 139, 0.35); background: rgba(33, 116, 79, 0.12); cursor: default; opacity: 0.58; transform: none; }
.guild-building-options img { width: 58px; height: 54px; object-fit: contain; }
.guild-building-options button > span { display: grid; min-width: 0; gap: 4px; }
.guild-building-options strong { overflow: hidden; color: #ead9b7; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.guild-building-options small { color: #8f9d99; font-size: 8px; line-height: 1.25; }

.guild-land-notice { position: absolute; z-index: 23; bottom: 20px; left: 20px; display: grid; width: min(350px, calc(100% - 40px)); min-height: 78px; gap: 5px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.11); border-left: 3px solid #d8a349; background: rgba(4, 13, 18, 0.93); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.46); }
.guild-land-notice span { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.guild-land-notice small { color: #d9a64d; font-size: 8px; font-weight: 900; letter-spacing: 0.14em; }
.guild-land-notice strong { color: #ead9b6; font-size: 11px; text-align: right; }
.guild-land-notice p { margin: 0; color: #929e9d; font-size: 10px; line-height: 1.4; }
.guild-land-notice[data-tone="success"] { border-left-color: #66ca97; background: rgba(4, 28, 21, 0.94); }
.guild-land-notice[data-tone="success"] small { color: #76dba4; }
.guild-land-notice[data-tone="red"] { border-left-color: #d95d54; background: rgba(36, 11, 12, 0.94); }
.guild-land-stage[data-state="building"] .guild-land-notice { top: 86px; right: 18px; bottom: auto; left: auto; width: 330px; }
.guild-reset { position: absolute; z-index: 29; right: 20px; bottom: 20px; min-height: 38px; border: 1px solid rgba(255, 255, 255, 0.18); padding: 0 16px; color: #d9d4c9; background: rgba(5, 14, 18, 0.9); font-size: 9px; font-weight: 800; cursor: pointer; }
.guild-reset[hidden] { display: none; }

.guild-lands-copy { display: grid; gap: 22px; margin-top: 38px; }
.guild-lands-copy header { display: grid; max-width: 980px; margin: 0 auto; gap: 10px; text-align: center; }
.guild-lands-copy header > span { color: #d8a54c; font-size: 9px; font-weight: 900; letter-spacing: 0.2em; }
.guild-lands-copy h3 { margin: 0; color: #efd6a0; font: 700 clamp(1.8rem, 3vw, 2.6rem)/1 "Beaufort for LoL", Georgia, serif; }
.guild-lands-copy header p { max-width: 900px; margin: 0 auto; color: #c5c7c1; font-size: 15px; line-height: 1.7; }
.guild-lands-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.guild-lands-benefits p { position: relative; min-height: 132px; margin: 0; padding: 22px 20px 20px 24px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.025); }
.guild-lands-benefits p::before { position: absolute; top: 20px; bottom: 20px; left: 0; width: 3px; background: currentColor; content: ""; opacity: 0.8; }
.guild-lands-benefits span { display: grid; gap: 7px; }
.guild-lands-benefits strong { color: #ece1ca; font-size: 12px; letter-spacing: 0.04em; }
.guild-lands-benefits small { color: #9ca3a1; font-size: 11px; line-height: 1.55; }
.guild-lands-benefits .is-gold { color: #dfa94f; border-color: rgba(220, 164, 73, 0.32); background: rgba(151, 99, 27, 0.09); }
.guild-lands-benefits .is-red { color: #d85f58; border-color: rgba(201, 77, 70, 0.3); background: rgba(128, 38, 36, 0.09); }
.guild-lands-benefits .is-green { color: #65c996; border-color: rgba(74, 181, 130, 0.3); background: rgba(24, 111, 76, 0.09); }
.guild-strategy-notice { display: flex; max-width: 980px; min-height: 76px; align-items: center; margin: 0 auto; padding: 15px 20px; border: 1px solid rgba(220, 165, 75, 0.32); border-left: 3px solid #d9a64d; background: linear-gradient(90deg, rgba(151, 98, 25, 0.19), rgba(12, 28, 34, 0.72)); box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24); }
.guild-strategy-notice span { display: grid; gap: 4px; }
.guild-strategy-notice strong { color: #e8dcc4; font-size: 12px; letter-spacing: 0.04em; }
.guild-strategy-notice small { color: #9ca6a2; font-size: 11px; line-height: 1.5; }

@keyframes guild-dialogue-arrive { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes guild-actor-arrive { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } }
@keyframes guild-yang-move { from { opacity: 0; transform: translateX(0) rotateY(0); } 18% { opacity: 1; } to { opacity: 0; transform: translateX(220px) rotateY(540deg); } }
@keyframes guild-structure-build { from { opacity: 0; transform: translateY(60px) scale(0.76); filter: brightness(2.2) drop-shadow(0 0 30px rgba(239, 196, 105, 0.9)); } to { opacity: 1; transform: translateY(0) scale(1); filter: drop-shadow(0 24px 20px rgba(0, 0, 0, 0.55)); } }

@media (max-width: 980px) {
    .guild-land-stage { min-height: 760px; }
    .guild-player { left: -3%; width: 58%; }
    .guild-guard { right: -2%; width: 58%; }
    .guild-estate-agent { right: 1%; width: 58%; }
    .guild-dialogue { bottom: 112px; }
    .guild-estate-dialogue { left: 35%; }
    .guild-built-structure.is-forge { left: -5%; width: 43%; }
    .guild-built-structure.is-home { left: 25%; width: 51%; }
    .guild-built-structure.is-altar { right: -5%; width: 44%; }
    .guild-lands-benefits { grid-template-columns: 1fr; }
    .guild-lands-benefits p { min-height: 0; }
}

@media (max-width: 700px) {
    .guild-lands { padding: 86px 0 70px; }
    .guild-lands-heading { margin-bottom: 28px; }
    .guild-land-stage { min-height: 850px; }
    .guild-stage-village { background-position: 57% center; }
    .guild-stage-land { background-position: 54% center; }
    .guild-location-bar { top: 10px; right: 10px; left: 10px; min-height: 50px; gap: 8px; padding: 7px 9px; }
    .guild-location-bar strong { font-size: 12px; }
    .guild-location-bar b { min-width: 124px; max-width: 44%; padding: 7px; font-size: 7px; line-height: 1.25; }
    .guild-player,
    .guild-guard,
    .guild-estate-agent { bottom: 230px; width: 82%; height: 470px; }
    .guild-player { left: -18%; }
    .guild-guard { right: -17%; }
    .guild-estate-agent { right: -13%; bottom: 230px; }
    .guild-land-stage[data-state="estate"] .guild-player,
    .guild-land-stage[data-state="buying"] .guild-player { left: -8%; width: 82%; }
    .guild-player img { transform: scale(1.38); }
    .guild-guard img { transform: scale(1.2); }
    .guild-estate-agent img { transform: scale(1.28); }
    .guild-game-label { top: 25%; font-size: 9px; }
    .guild-npc-name { top: 17%; font-size: 9px; }
    .guild-npc-prompt { display: none; }
    .guild-dialogue,
    .guild-estate-dialogue { right: auto; bottom: 96px; left: 50%; width: calc(100% - 20px); margin-left: 15px; padding: 15px; transform: translateX(-50%); }
    .guild-dialogue { animation-name: guild-dialogue-mobile-arrive; }
    .guild-dialogue header strong { font-size: 17px; }
    .guild-name-entry { grid-template-columns: 1fr 112px; }
    .guild-payment small { font-size: 8px; }
    .guild-land-notice { right: 10px; bottom: 10px; left: 10px; width: auto; min-height: 70px; padding: 10px 12px; }
    .guild-land-stage[data-state="building"] .guild-land-notice { top: 70px; right: 10px; left: 10px; width: auto; min-height: 58px; }
    .guild-build-world { inset: 64px 0 250px; }
    .guild-build-plot span { max-width: 92%; padding: 5px 6px; font-size: 8px; }
    .guild-build-plot.is-forge { bottom: 70px; left: 0; width: 31%; height: 90px; }
    .guild-build-plot.is-home { bottom: 78px; left: 31%; width: 38%; height: 102px; }
    .guild-build-plot.is-altar { right: 0; bottom: 68px; width: 31%; height: 90px; }
    .guild-built-structure.is-forge { bottom: 12px; left: -11%; width: 50%; }
    .guild-built-structure.is-home { bottom: 24px; left: 19%; width: 63%; }
    .guild-built-structure.is-altar { right: -12%; bottom: 13px; width: 52%; }
    .guild-build-panel { right: 10px; bottom: 10px; left: 10px; padding: 9px; }
    .guild-building-options { grid-template-columns: 1fr; gap: 6px; }
    .guild-building-options button { grid-template-columns: 46px 1fr; min-height: 52px; padding: 4px 8px; }
    .guild-building-options img { width: 44px; height: 42px; }
    .guild-reset { right: 10px; bottom: 10px; }
    .guild-lands-copy { margin-top: 28px; gap: 16px; }
    .guild-lands-copy header { padding: 0 8px; }
    .guild-lands-copy header p { font-size: 13px; }
    .guild-lands-benefits { gap: 10px; }
    .guild-lands-benefits p { padding: 15px; }
    .guild-strategy-notice { margin: 0 8px; padding: 13px 14px; }
}

@media (max-width: 430px) {
    .guild-land-stage { min-height: 820px; }
    .guild-player,
    .guild-guard { width: 88%; }
    .guild-player { left: -22%; }
    .guild-guard { right: -21%; }
    .guild-name-entry { grid-template-columns: 1fr; }
    .guild-name-entry button { min-height: 40px; }
    .guild-payment { min-height: 31px; }
    .guild-dialogue { bottom: 92px; gap: 9px; }
    .guild-build-world { bottom: 246px; }
}

@keyframes guild-dialogue-mobile-arrive { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (prefers-reduced-motion: reduce) {
    .guild-stage-scene,
    .guild-player,
    .guild-guard,
    .guild-estate-agent,
    .guild-dialogue,
    .guild-yang-transfer img,
    .guild-built-structure { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* Interactive biologist research */
.biologist-system {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 104px 0 92px;
    background: #060b10;
    isolation: isolate;
}
.biologist-backdrop { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(4, 10, 14, 0.96), rgba(5, 14, 18, 0.42) 22%, rgba(5, 12, 16, 0.72) 72%, #060b10 96%), url("../images/characters/biolog-bg.webp") center 28% / cover no-repeat; filter: saturate(0.7) brightness(0.56); pointer-events: none; }
.biologist-system::before,
.biologist-system::after { position: absolute; inset: 0; z-index: -1; content: ""; pointer-events: none; }
.biologist-system::before { background: linear-gradient(90deg, rgba(4, 11, 16, 0.95), transparent 24%, transparent 76%, rgba(4, 11, 16, 0.95)); }
.biologist-system::after { background: linear-gradient(180deg, #041018 0, transparent 14%, transparent 88%, #041018 100%); }
.biologist-system > .section-shell { position: relative; z-index: 1; }
.biologist-heading { margin-bottom: 40px; text-shadow: 0 3px 18px #000; }
.biologist-heading .ornate-description { color: #c8cfcb; }

.biologist-stage {
    position: relative;
    min-height: 790px;
    overflow: hidden;
    border: 1px solid rgba(214, 171, 89, 0.42);
    background: url("../images/characters/biolog-bg.webp") center / cover no-repeat;
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.55), inset 0 0 80px rgba(0, 0, 0, 0.2);
    isolation: isolate;
}
.biologist-stage-shade { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(3, 9, 12, 0.04) 26%, rgba(3, 9, 12, 0.16) 52%, rgba(3, 9, 12, 0.92) 100%); pointer-events: none; }
.biologist-status-bar { position: absolute; z-index: 30; top: 18px; right: 18px; left: 18px; display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 13px; border: 1px solid rgba(255, 255, 255, 0.14); border-left: 3px solid #d9a64d; background: rgba(5, 13, 18, 0.9); box-shadow: 0 13px 30px rgba(0, 0, 0, 0.36); }
.biologist-status-bar span { display: grid; gap: 3px; }
.biologist-status-bar small { color: #dda94f; font-size: 8px; font-weight: 900; letter-spacing: 0.14em; }
.biologist-status-bar strong { color: #eee3cd; font: 700 14px/1.1 "Beaufort for LoL", Georgia, serif; }
.biologist-status-bar > b { min-width: 72px; padding: 9px 12px; border: 1px solid rgba(105, 197, 151, 0.4); color: #86d7ad; background: rgba(28, 121, 79, 0.17); font: 900 10px/1 Tahoma, Arial, sans-serif; text-align: center; }

.biologist-player,
.biologist-npc { position: absolute; z-index: 6; bottom: 88px; width: 48%; height: 610px; }
.biologist-player { left: 1%; }
.biologist-npc { right: auto; left: 26%; border: 0; outline: 0 !important; padding: 0; color: inherit; background: transparent; cursor: pointer; }
.biologist-npc:focus,
.biologist-npc:focus-visible { outline: 0 !important; box-shadow: none !important; }
.biologist-player img,
.biologist-npc > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 26px 24px rgba(0, 0, 0, 0.7)); transition: filter 180ms ease, transform 180ms ease; }
.biologist-player img { transform: scale(1.38); }
.biologist-npc > img { transform: scale(1.35); }
.biologist-npc:hover > img,
.biologist-npc:focus-visible > img { filter: brightness(1.1) drop-shadow(0 26px 24px rgba(0, 0, 0, 0.7)); transform: scale(1.38); }
.biologist-game-name { position: absolute; z-index: 2; top: 20%; left: 50%; color: #55ef55; font: 700 11px/1.15 Tahoma, Arial, sans-serif; text-shadow: -1px -1px 0 #041004, 1px -1px 0 #041004, -1px 1px 0 #041004, 1px 1px 0 #041004, 0 2px 4px #000; transform: translateX(-50%); }
.biologist-npc .biologist-game-name { top: 17%; }
.biologist-research-effect { position: absolute; z-index: 4; top: 28%; left: 50%; width: 180px; height: 250px; opacity: 0; pointer-events: none; transform: translateX(-50%); }
.biologist-research-effect::before { position: absolute; inset: 20% 12% 8%; border-radius: 50%; background: radial-gradient(circle, rgba(111, 255, 194, 0.74), rgba(69, 183, 152, 0.24) 42%, transparent 70%); filter: blur(8px); content: ""; }
.biologist-research-effect i { position: absolute; top: 50%; left: 50%; width: 92px; height: 92px; border: 2px solid rgba(126, 255, 209, 0.84); border-radius: 50%; box-shadow: 0 0 18px rgba(84, 235, 183, 0.78), inset 0 0 15px rgba(84, 235, 183, 0.45); transform: translate(-50%, -50%); }
.biologist-research-effect i:nth-child(2) { width: 138px; height: 138px; border-color: rgba(225, 184, 91, 0.78); box-shadow: 0 0 24px rgba(222, 173, 77, 0.58); }
.biologist-research-effect i:nth-child(3) { top: 72%; width: 112px; height: 30px; border-color: rgba(116, 243, 194, 0.75); transform: translate(-50%, -50%) rotateX(64deg); }
.biologist-npc.is-researching .biologist-research-effect { animation: biologist-effect-flash 1250ms ease-out both; }
.biologist-npc.is-researching .biologist-research-effect i { animation: biologist-effect-ring 1050ms ease-out both; }
.biologist-npc.is-researching .biologist-research-effect i:nth-child(2) { animation-delay: 90ms; }
.biologist-npc.is-researching .biologist-research-effect i:nth-child(3) { animation-delay: 170ms; }
.biologist-npc-prompt { position: absolute; z-index: 3; right: 12%; bottom: 110px; display: grid; min-width: 188px; gap: 4px; padding: 12px 15px; border: 1px solid rgba(222, 178, 94, 0.52); border-left: 3px solid #dda94d; background: rgba(5, 13, 18, 0.94); box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5); text-align: left; }
.biologist-npc-prompt strong { color: #f1d89f; font-size: 11px; }
.biologist-npc-prompt small { color: #9ca7a6; font-size: 9px; }
.biologist-stage[data-state="request"] .biologist-npc-prompt,
.biologist-stage[data-state="collecting"] .biologist-npc-prompt,
.biologist-stage[data-state="submitting"] .biologist-npc-prompt,
.biologist-stage[data-state="reward"] .biologist-npc-prompt,
.biologist-stage[data-state="complete"] .biologist-npc-prompt { display: none; }

.biologist-quest-window { position: absolute; z-index: 25; top: 108px; left: 76%; display: grid; width: min(500px, calc(100% - 40px)); gap: 13px; padding: 18px; border: 1px solid rgba(222, 177, 91, 0.62); border-top: 3px solid #d9a64d; color: #ded7c7; background: rgba(4, 12, 17, 0.97); box-shadow: 0 28px 70px rgba(0, 0, 0, 0.65), inset 0 0 38px rgba(211, 158, 68, 0.05); transform: translateX(-50%); animation: biologist-window-in 320ms ease both; }
.biologist-quest-window[hidden] { display: none; }
.biologist-quest-window > header { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 12px; }
.biologist-quest-window > header > span:nth-child(2) { display: grid; gap: 4px; }
.biologist-quest-icon { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid rgba(219, 171, 80, 0.45); background: rgba(170, 111, 30, 0.1); }
.biologist-quest-icon img { width: 42px; height: 42px; object-fit: contain; image-rendering: pixelated; }
.biologist-quest-window header small { color: #dca84e; font-size: 8px; font-weight: 900; letter-spacing: 0.14em; }
.biologist-quest-window header strong { color: #f0dfbd; font: 700 19px/1.15 "Beaufort for LoL", Georgia, serif; }
.biologist-quest-window header > b { min-width: 48px; color: #f0c874; font: 900 12px/1 Tahoma, Arial, sans-serif; text-align: right; }
.biologist-quest-window > p { margin: 0; color: #b8b8b1; font-size: 12px; line-height: 1.6; }
.biologist-quest-window > button,
.biologist-item-tray button { min-height: 44px; border: 1px solid rgba(224, 174, 79, 0.58); color: #fff0cb; background: linear-gradient(110deg, #674519, #a36c25 52%, #674519); font-size: 10px; font-weight: 900; cursor: pointer; transition: filter 160ms ease, transform 160ms ease; }
.biologist-quest-window > button:hover,
.biologist-quest-window > button:focus-visible,
.biologist-item-tray button:hover,
.biologist-item-tray button:focus-visible { filter: brightness(1.15); transform: translateY(-2px); }
.biologist-quest-window > button:disabled,
.biologist-item-tray button:disabled { cursor: wait; filter: saturate(0.4); }
.biologist-reward { display: grid; gap: 5px; padding: 12px 14px; border: 1px solid rgba(96, 201, 149, 0.38); border-left: 3px solid #65ca97; background: rgba(25, 113, 76, 0.13); }
.biologist-reward[hidden] { display: none; }
.biologist-reward small { color: #72d6a2; font-size: 8px; font-weight: 900; letter-spacing: 0.14em; }
.biologist-reward strong { color: #d9f2e3; font-size: 12px; }

.biologist-item-tray { position: absolute; z-index: 24; right: 20px; bottom: 20px; left: 20px; display: grid; gap: 9px; padding: 12px; border: 1px solid rgba(105, 193, 153, 0.4); border-left: 3px solid #64c294; background: rgba(3, 13, 17, 0.96); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.56); }
.biologist-item-tray[hidden] { display: none; }
.biologist-item-tray > header span { display: grid; gap: 3px; }
.biologist-item-tray > header small { color: #69cf9d; font-size: 8px; font-weight: 900; letter-spacing: 0.14em; }
.biologist-item-tray > header strong { color: #e4e4d4; font-size: 11px; }
.biologist-item-tray > div { display: grid; grid-template-columns: 70px 1fr 190px; align-items: center; gap: 12px; }
.biologist-item-tray > div > span:nth-child(2) { display: grid; gap: 4px; }
.biologist-item-tray > div > span:nth-child(2) strong { color: #ead9b7; font-size: 12px; }
.biologist-item-tray > div > span:nth-child(2) small { color: #8f9d99; font-size: 9px; }
.biologist-tray-icon { position: relative; display: grid; width: 64px; height: 58px; place-items: center; border: 1px solid rgba(222, 177, 91, 0.34); background: rgba(155, 100, 26, 0.1); }
.biologist-tray-icon img { width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated; }
.biologist-tray-icon b { position: absolute; right: 4px; bottom: 4px; color: #ffe0a0; font: 900 9px/1 Tahoma, Arial, sans-serif; text-shadow: 0 1px 3px #000; }

.biologist-item-transfer { position: absolute; z-index: 29; top: 45%; left: 36%; width: 30%; height: 120px; opacity: 0; pointer-events: none; transform: translate(-50%, -50%); }
.biologist-item-transfer img { position: absolute; top: 48%; left: 2%; width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 0 9px rgba(255, 211, 120, 0.86)); }
.biologist-item-transfer img:nth-child(2) { top: 20%; animation-delay: 80ms; }
.biologist-item-transfer img:nth-child(3) { top: 72%; animation-delay: 150ms; }
.biologist-item-transfer img:nth-child(4) { top: 35%; animation-delay: 220ms; }
.biologist-item-transfer img:nth-child(5) { top: 61%; animation-delay: 290ms; }
.biologist-item-transfer img:nth-child(6) { top: 46%; animation-delay: 360ms; }
.biologist-stage.is-delivering .biologist-item-transfer { opacity: 1; }
.biologist-stage.is-delivering .biologist-item-transfer img { animation: biologist-item-move 800ms ease-in both; }

.biologist-notice { position: absolute; z-index: 23; bottom: 20px; left: 20px; display: grid; width: min(350px, calc(100% - 40px)); min-height: 78px; gap: 5px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.11); border-left: 3px solid #d8a349; background: rgba(4, 13, 18, 0.94); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.48); }
.biologist-notice span { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.biologist-notice small { color: #d9a64d; font-size: 8px; font-weight: 900; letter-spacing: 0.14em; }
.biologist-notice strong { color: #ead9b6; font-size: 11px; text-align: right; }
.biologist-notice p { margin: 0; color: #929e9d; font-size: 10px; line-height: 1.4; }
.biologist-notice[data-tone="success"] { border-left-color: #66ca97; background: rgba(4, 28, 21, 0.95); }
.biologist-notice[data-tone="success"] small { color: #76dba4; }
.biologist-stage[data-state="collecting"] .biologist-notice,
.biologist-stage[data-state="submitting"] .biologist-notice { bottom: 126px; }
.biologist-reset { position: absolute; z-index: 30; right: 20px; bottom: 20px; min-height: 38px; border: 1px solid rgba(255, 255, 255, 0.18); padding: 0 16px; color: #d9d4c9; background: rgba(5, 14, 18, 0.92); font-size: 9px; font-weight: 800; cursor: pointer; }
.biologist-reset[hidden] { display: none; }

.biologist-copy { position: relative; z-index: 3; width: 100%; margin: -1px auto 0; padding: 34px 44px 30px; border: 1px solid rgba(221, 169, 80, 0.22); border-top: 0; background: linear-gradient(180deg, rgba(8, 12, 19, 0.98), rgba(6, 8, 13, 0.98)); box-shadow: 0 34px 82px rgba(0, 0, 0, 0.5); text-align: center; }
.biologist-copy header > span { color: #bc8b46; font-size: 9px; font-weight: 800; letter-spacing: 0.2em; }
.biologist-copy h3 { max-width: 1080px; margin: 10px auto 12px; color: #ffdda0; font: 700 2rem/1.16 "Beaufort for LoL", Georgia, serif; }
.biologist-copy header p { max-width: 1040px; margin: 0 auto 20px; color: #c9c0ae; font-size: 14px; line-height: 1.72; }
.biologist-copy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.biologist-copy-grid p { display: grid; min-height: 112px; grid-template-columns: 44px 1fr; align-items: center; gap: 15px; margin: 0; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, 0.07); color: #aeb5c0; background: rgba(255, 255, 255, 0.02); text-align: left; }
.biologist-copy-grid p > b { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(212, 156, 69, 0.36); color: #d8a34d; background: rgba(185, 120, 31, 0.08); font: 900 10px Tahoma, Arial, sans-serif; }
.biologist-copy-grid p > span { display: grid; gap: 5px; }
.biologist-copy-grid strong { color: #e8dcc4; font-size: 12px; }
.biologist-copy-grid small { color: #9da6a7; font-size: 11px; line-height: 1.55; }
.biologist-motto { display: flex; min-height: 48px; align-items: center; justify-content: center; margin-top: 14px; border: 1px solid rgba(202, 57, 54, 0.26); color: #f0ca82; background: linear-gradient(90deg, transparent, rgba(116, 24, 27, 0.28), transparent); font-size: 11px; font-weight: 800; letter-spacing: 0.16em; }

.biologist-table-wrap { margin-top: 28px; border: 1px solid rgba(91, 145, 181, 0.28); background: rgba(4, 12, 18, 0.95); box-shadow: 0 26px 70px rgba(0, 0, 0, 0.38); }
.biologist-table-heading { display: flex; min-height: 66px; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 16px; border-bottom: 1px solid rgba(220, 169, 79, 0.28); border-left: 3px solid #d9a64d; background: linear-gradient(90deg, rgba(145, 94, 25, 0.16), rgba(16, 35, 47, 0.34)); }
.biologist-table-heading span { display: grid; gap: 4px; }
.biologist-table-heading small { color: #dca84e; font-size: 8px; font-weight: 900; letter-spacing: 0.14em; }
.biologist-table-heading strong { color: #f0dfbd; font: 700 19px/1.1 "Beaufort for LoL", Georgia, serif; }
.biologist-table-heading > b { color: #7fd0a8; font: 900 9px Tahoma, Arial, sans-serif; letter-spacing: 0.1em; }
.biologist-table { width: 100%; border-collapse: separate; border-spacing: 0 5px; padding: 5px 8px 9px; table-layout: fixed; }
.biologist-table th { padding: 9px 10px; color: #91a7b9; font-size: 9px; font-weight: 900; letter-spacing: 0.09em; text-align: left; }
.biologist-table th:nth-child(1) { width: 7%; }
.biologist-table th:nth-child(2) { width: 23%; }
.biologist-table th:nth-child(3) { width: 8%; }
.biologist-table th:nth-child(4) { width: 29%; }
.biologist-table th:nth-child(5) { width: 13%; }
.biologist-table th:nth-child(6) { width: 20%; }
.biologist-table td { height: 64px; border-top: 1px solid rgba(92, 149, 187, 0.15); border-bottom: 1px solid rgba(92, 149, 187, 0.15); padding: 7px 10px; color: #d9d6cd; background: linear-gradient(90deg, rgba(12, 31, 45, 0.94), rgba(22, 54, 77, 0.82)); font-size: 11px; }
.biologist-table td:first-child { border-left: 3px solid rgba(93, 137, 166, 0.5); color: #f0cc83; font: 800 15px "Beaufort for LoL", Georgia, serif; text-align: center; }
.biologist-table td:last-child { border-right: 1px solid rgba(92, 149, 187, 0.15); }
.biologist-table td:nth-child(3),
.biologist-table td:nth-child(5) { color: #eed194; font-weight: 800; }
.biologist-table td > span { display: flex; align-items: center; gap: 11px; }
.biologist-table td img { width: 44px; height: 44px; flex: 0 0 44px; object-fit: contain; image-rendering: pixelated; }
.biologist-table td strong { color: #f2dbad; font-size: 12px; }
.biologist-table td:last-child b { display: inline-flex; min-width: 88px; min-height: 27px; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.12); color: #879a9e; background: rgba(255, 255, 255, 0.035); font-size: 8px; letter-spacing: 0.08em; }
.biologist-table tr.is-active td { border-color: rgba(217, 87, 79, 0.52); background: linear-gradient(90deg, rgba(69, 20, 22, 0.96), rgba(48, 41, 42, 0.9)); }
.biologist-table tr.is-active td:first-child { border-left-color: #df5b54; }
.biologist-table tr.is-active td:last-child b { border-color: rgba(226, 89, 82, 0.56); color: #ffaaa4; background: rgba(154, 38, 38, 0.2); }
.biologist-table tr.is-complete td { border-color: rgba(82, 184, 133, 0.28); background: linear-gradient(90deg, rgba(12, 50, 39, 0.9), rgba(17, 43, 47, 0.86)); }
.biologist-table tr.is-complete td:first-child { border-left-color: #63ca96; }
.biologist-table tr.is-complete td:last-child b { border-color: rgba(91, 201, 147, 0.42); color: #82d8ac; background: rgba(26, 115, 77, 0.15); }
.biologist-table tr.is-future td { border-color: rgba(116, 131, 143, 0.16); color: #899296; background: linear-gradient(90deg, rgba(17, 24, 30, 0.92), rgba(24, 34, 41, 0.84)); }
.biologist-table tr.is-future td:first-child { border-left-color: #64727b; color: #c4aa79; }
.biologist-table tr.is-future td:nth-child(3),
.biologist-table tr.is-future td:nth-child(4),
.biologist-table tr.is-future td:nth-child(5) { color: #aeb4b5; }
.biologist-table tr.is-future td:last-child b { border-color: rgba(133, 145, 151, 0.28); color: #aeb4b5; background: rgba(126, 137, 143, 0.07); }

@keyframes biologist-window-in { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes biologist-item-move { from { opacity: 0; transform: translateX(0) scale(0.78); } 18% { opacity: 1; } to { opacity: 0; transform: translateX(380px) scale(1.08) rotate(18deg); } }
@keyframes biologist-effect-flash { 0% { opacity: 0; transform: translateX(-50%) scale(0.65); } 20% { opacity: 1; } 72% { opacity: 0.92; } 100% { opacity: 0; transform: translateX(-50%) scale(1.18); } }
@keyframes biologist-effect-ring { from { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } 28% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } }

@media (max-width: 900px) {
    .biologist-stage { min-height: 760px; }
    .biologist-player { left: -7%; width: 58%; }
    .biologist-npc { right: auto; left: 21%; width: 58%; }
    .biologist-quest-window { left: 68%; }
    .biologist-copy { padding: 32px 24px 28px; }
    .biologist-copy-grid { grid-template-columns: 1fr; }
    .biologist-table th:nth-child(4) { width: 25%; }
    .biologist-table th:nth-child(6) { width: 16%; }
}

@media (max-width: 700px) {
    .biologist-system { padding: 86px 0 68px; }
    .biologist-heading { margin-bottom: 28px; }
    .biologist-stage { min-height: 860px; background-position: 58% center; }
    .biologist-status-bar { top: 10px; right: 10px; left: 10px; min-height: 50px; gap: 8px; padding: 7px 9px; }
    .biologist-status-bar strong { font-size: 12px; }
    .biologist-player,
    .biologist-npc { bottom: 260px; width: 82%; height: 470px; }
    .biologist-player { left: -25%; }
    .biologist-npc { right: auto; left: 9%; }
    .biologist-player img { transform: scale(1.4); }
    .biologist-npc > img { transform: scale(1.32); }
    .biologist-game-name { top: 24%; font-size: 9px; }
    .biologist-npc .biologist-game-name { top: 20%; }
    .biologist-npc-prompt { display: none; }
    .biologist-quest-window { top: auto; right: 10px; bottom: 96px; left: 10px; width: auto; padding: 14px; transform: none; animation-name: biologist-window-mobile-in; }
    .biologist-quest-window > header { grid-template-columns: 52px 1fr auto; gap: 9px; }
    .biologist-quest-icon { width: 50px; height: 50px; }
    .biologist-quest-icon img { width: 38px; height: 38px; }
    .biologist-quest-window header strong { font-size: 16px; }
    .biologist-item-tray { right: 10px; bottom: 10px; left: 10px; padding: 10px; }
    .biologist-item-tray > div { grid-template-columns: 56px 1fr; gap: 9px; }
    .biologist-item-tray button { grid-column: 1 / -1; }
    .biologist-tray-icon { width: 54px; height: 52px; }
    .biologist-stage[data-state="collecting"] .biologist-notice,
    .biologist-stage[data-state="submitting"] .biologist-notice { bottom: 162px; }
    .biologist-notice { right: 10px; bottom: 10px; left: 10px; width: auto; min-height: 70px; padding: 10px 12px; }
    .biologist-reset { right: 10px; bottom: 10px; }
    .biologist-copy { padding: 28px 16px 24px; }
    .biologist-copy h3 { font-size: 18px; }
    .biologist-copy header p { font-size: 13px; }
    .biologist-copy-grid p { min-height: 0; padding: 15px 10px; }
    .biologist-motto { padding: 12px; font-size: 9px; line-height: 1.45; text-align: center; }
    .biologist-table-wrap { border-right: 0; border-left: 0; }
    .biologist-table { display: block; padding: 7px 10px 12px; }
    .biologist-table thead { display: none; }
    .biologist-table tbody { display: grid; gap: 9px; }
    .biologist-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid rgba(92, 149, 187, 0.2); background: rgba(12, 31, 45, 0.8); }
    .biologist-table td { display: grid; min-width: 0; height: auto; min-height: 58px; grid-template-columns: 1fr; align-content: center; gap: 5px; border: 0; padding: 9px 11px; background: transparent; font-size: 10px; }
    .biologist-table td::before { color: #7892a5; font-size: 7px; font-weight: 900; letter-spacing: 0.1em; content: attr(data-label); }
    .biologist-table td:first-child { border: 0; border-left: 3px solid rgba(93, 137, 166, 0.5); text-align: left; }
    .biologist-table td:nth-child(2),
    .biologist-table td:nth-child(4) { grid-column: span 1; }
    .biologist-table td > span { gap: 8px; }
    .biologist-table td img { width: 36px; height: 36px; flex-basis: 36px; }
    .biologist-table td strong { font-size: 10px; }
    .biologist-table td:last-child b { min-width: 0; width: 100%; }
    .biologist-table tr.is-active td,
    .biologist-table tr.is-complete td { background: transparent; }
    .biologist-table tr.is-future td { background: transparent; }
}

@keyframes biologist-window-mobile-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    .biologist-npc > img,
    .biologist-quest-window,
    .biologist-research-effect,
    .biologist-research-effect i,
    .biologist-item-transfer img { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* Interactive Demon Tower boss encounter */
.demon-tower {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 108px 0 92px;
    background: #07090d;
    isolation: isolate;
}
.demon-tower-backdrop,
.demon-tower::before,
.demon-tower::after { position: absolute; inset: 0; z-index: -2; content: ""; pointer-events: none; }
.demon-tower-backdrop {
    background:
        linear-gradient(180deg, rgba(5, 7, 11, 0.97), rgba(7, 9, 13, 0.42) 20%, rgba(7, 8, 12, 0.6) 76%, #07090d 97%),
        url("../images/characters/lusifer-bg.webp") center 35% / cover no-repeat;
    filter: saturate(0.72) brightness(0.48);
}
.demon-tower::before { z-index: -1; background: linear-gradient(90deg, rgba(7, 9, 13, 0.95), transparent 24%, transparent 76%, rgba(7, 9, 13, 0.95)); }
.demon-tower::after { z-index: -1; background: linear-gradient(180deg, #07090d 0, transparent 15%, transparent 87%, #07090d 100%); }
.demon-tower > .section-shell { position: relative; z-index: 1; }
.demon-tower-heading { margin-bottom: 42px; text-shadow: 0 3px 18px #000; }
.demon-tower-heading .ornate-description { color: #cfc9c0; }

.demon-tower-stage {
    position: relative;
    min-height: 760px;
    overflow: hidden;
    border: 1px solid rgba(202, 72, 57, 0.42);
    background: url("../images/characters/lusifer-bg.webp") center / cover no-repeat;
    box-shadow: 0 34px 92px rgba(0, 0, 0, 0.58), inset 0 0 100px rgba(0, 0, 0, 0.34);
    isolation: isolate;
}
.demon-tower-stage-shade { position: absolute; z-index: 0; inset: 0; background: linear-gradient(180deg, rgba(4, 5, 8, 0.13), rgba(4, 5, 8, 0.04) 44%, rgba(4, 5, 8, 0.86) 100%), linear-gradient(90deg, rgba(3, 5, 8, 0.46), transparent 22%, transparent 78%, rgba(3, 5, 8, 0.46)); pointer-events: none; }

.tower-location-bar {
    position: absolute;
    z-index: 30;
    top: 18px;
    right: 18px;
    left: 18px;
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 3px solid #c84c42;
    background: rgba(8, 9, 13, 0.9);
    box-shadow: 0 13px 30px rgba(0, 0, 0, 0.38);
}
.tower-location-bar > span { display: grid; gap: 3px; }
.tower-location-bar small { color: #dd665c; font-size: 8px; font-weight: 900; letter-spacing: 0.14em; }
.tower-location-bar strong { color: #eee2d0; font: 700 14px/1.1 "Beaufort for LoL", Georgia, serif; }
.tower-location-bar > b { min-width: 174px; padding: 8px 12px; border: 1px solid rgba(205, 78, 67, 0.42); color: #ffaaa3; background: rgba(139, 36, 30, 0.2); font: 900 8px/1 Tahoma, Arial, sans-serif; letter-spacing: 0.08em; text-align: center; }
.demon-tower-stage[data-state="victory"] .tower-location-bar > b,
.demon-tower-stage[data-state="chest"] .tower-location-bar > b,
.demon-tower-stage[data-state="loot"] .tower-location-bar > b { border-color: rgba(226, 176, 82, 0.48); color: #f3cf84; background: rgba(145, 93, 23, 0.2); }

.tower-boss-hud {
    position: absolute;
    z-index: 26;
    top: 92px;
    left: 50%;
    display: grid;
    width: min(570px, calc(100% - 48px));
    grid-template-columns: 140px 1fr 74px;
    align-items: center;
    gap: 13px;
    padding: 10px 13px;
    border: 1px solid rgba(194, 65, 57, 0.46);
    background: rgba(9, 8, 12, 0.9);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.52);
    transform: translateX(-50%);
    transition: opacity 420ms ease, transform 420ms ease;
}
.tower-boss-hud > span:first-child { display: grid; gap: 3px; }
.tower-boss-hud small { color: #bd5a54; font-size: 7px; font-weight: 900; letter-spacing: 0.12em; }
.tower-boss-hud strong { color: #f0d9bc; font: 700 16px/1 "Beaufort for LoL", Georgia, serif; }
.tower-health-track { position: relative; height: 13px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(0, 0, 0, 0.7); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.72); }
.tower-health-track::after { position: absolute; inset: 2px; border-top: 1px solid rgba(255, 255, 255, 0.16); content: ""; pointer-events: none; }
.tower-health-track i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #701c1b, #d84e42 72%, #f57b63); box-shadow: 0 0 14px rgba(225, 65, 51, 0.52); transform-origin: left center; transition: transform 430ms cubic-bezier(0.22, 0.75, 0.25, 1); }
.tower-boss-hud > b { color: #e5c2a4; font: 900 10px/1 Tahoma, Arial, sans-serif; text-align: right; }
.demon-tower-stage[data-state="dying"] .tower-boss-hud,
.demon-tower-stage[data-state="victory"] .tower-boss-hud,
.demon-tower-stage[data-state="chest"] .tower-boss-hud,
.demon-tower-stage[data-state="loot"] .tower-boss-hud { opacity: 0; transform: translate(-50%, -12px); pointer-events: none; }

.tower-boss {
    position: absolute;
    z-index: 8;
    bottom: 102px;
    left: 50%;
    width: min(780px, 72%);
    aspect-ratio: 8 / 5;
    overflow: visible;
    border: 0;
    padding: 0;
    color: inherit;
    background: transparent;
    cursor: crosshair;
    transform: translateX(-50%);
    transition: opacity 650ms ease, filter 500ms ease, transform 650ms ease;
}
.tower-boss:focus-visible { outline: 2px solid #e7b15a; outline-offset: -14px; }
.tower-boss-name { position: absolute; z-index: 5; top: 15%; left: 50%; color: #ff7a6f; font: 700 11px/1 Tahoma, Arial, sans-serif; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 6px #000; transform: translateX(-50%); }
.tower-boss-visual { position: absolute; inset: 0; filter: drop-shadow(0 28px 22px rgba(0, 0, 0, 0.72)); transition: filter 220ms ease, transform 220ms ease; }
.tower-boss-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 190ms ease; user-select: none; pointer-events: none; }
.tower-boss-frame.is-active { opacity: 1; }
.tower-boss.is-skill .tower-boss-visual { filter: drop-shadow(0 0 28px rgba(137, 66, 196, 0.8)) drop-shadow(0 28px 22px rgba(0, 0, 0, 0.72)); }
.tower-boss.is-hit .tower-boss-visual { filter: brightness(1.7) saturate(0.45) drop-shadow(0 0 22px rgba(255, 76, 57, 0.86)); transform: translateX(8px); }
.tower-boss.is-dead { cursor: default; pointer-events: none; transform: translateX(-50%) translateY(105px) rotate(7deg) scale(0.88); opacity: 0; filter: brightness(0.24) saturate(0.15); }

.tower-impact { position: absolute; z-index: 7; top: 48%; left: 50%; width: 170px; height: 170px; opacity: 0; pointer-events: none; transform: translate(-50%, -50%); }
.tower-impact i { position: absolute; inset: 20%; border: 2px solid rgba(255, 217, 144, 0.82); transform: rotate(45deg); }
.tower-impact i:nth-child(2) { inset: 32%; border-color: rgba(237, 83, 65, 0.92); transform: rotate(12deg); }
.tower-impact i:nth-child(3) { inset: 42%; border-width: 5px; border-color: #fff1c7; transform: rotate(68deg); }
.tower-boss.is-hit .tower-impact { animation: tower-impact-flash 480ms ease-out both; }
.tower-damage-layer { position: absolute; z-index: 9; inset: 0; pointer-events: none; }
.tower-damage-number { position: absolute; top: 39%; left: 55%; color: #ffd99a; font: 900 25px/1 Tahoma, Arial, sans-serif; text-shadow: 0 2px 2px #000, 0 0 11px rgba(218, 51, 39, 0.9); animation: tower-damage-rise 850ms ease-out both; }

.tower-combat-notice { position: absolute; z-index: 23; bottom: 20px; left: 20px; display: grid; width: min(370px, calc(100% - 40px)); min-height: 78px; gap: 5px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.11); border-left: 3px solid #ce5046; background: rgba(10, 9, 13, 0.94); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.48); transition: opacity 300ms ease, transform 300ms ease; }
.tower-combat-notice span { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tower-combat-notice small { color: #dd655b; font-size: 8px; font-weight: 900; letter-spacing: 0.14em; }
.tower-combat-notice strong { color: #ead8be; font-size: 11px; text-align: right; }
.tower-combat-notice p { margin: 0; color: #99989a; font-size: 10px; line-height: 1.4; }
.tower-combat-notice[data-tone="alert"] { border-left-color: #9d62c8; background: rgba(20, 11, 27, 0.95); }
.tower-combat-notice[data-tone="alert"] small { color: #c38ae5; }
.tower-combat-notice[data-tone="victory"] { border-left-color: #d9a64e; background: rgba(32, 23, 9, 0.95); }
.tower-combat-notice[data-tone="victory"] small { color: #e8b85d; }
.demon-tower-stage[data-state="loot"] .tower-combat-notice { opacity: 0; transform: translateY(10px); pointer-events: none; }

.tower-chest {
    position: absolute;
    z-index: 18;
    top: 52%;
    left: 50%;
    display: grid;
    width: 390px;
    justify-items: center;
    border: 0;
    padding: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
    transform: translate(-50%, -50%);
    animation: tower-chest-arrive 650ms cubic-bezier(0.18, 0.74, 0.22, 1) both;
}
.tower-chest[hidden] { display: none; }
.tower-chest img { position: relative; z-index: 2; width: 290px; height: auto; filter: drop-shadow(0 28px 24px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 22px rgba(213, 153, 54, 0.2)); transition: filter 180ms ease, transform 180ms ease; }
.tower-chest:hover img,
.tower-chest:focus-visible img { filter: brightness(1.12) drop-shadow(0 28px 24px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 30px rgba(228, 173, 72, 0.54)); transform: translateY(-5px); }
.tower-chest:focus-visible { outline: 0; }
.tower-chest:focus-visible .tower-chest-action { outline: 2px solid #e0ae55; outline-offset: 4px; }
.tower-chest.is-opening:focus-visible .tower-chest-action { outline: 0; }
.tower-chest-label { position: relative; z-index: 3; display: grid; gap: 3px; margin-bottom: 8px; padding: 9px 18px; border: 1px solid rgba(222, 174, 82, 0.4); background: rgba(8, 10, 13, 0.92); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); }
.tower-chest-label small { color: #daa64c; font-size: 7px; font-weight: 900; letter-spacing: 0.14em; }
.tower-chest-label strong { color: #f0dab1; font: 700 17px/1.1 "Beaufort for LoL", Georgia, serif; }
.tower-chest-action { position: relative; z-index: 3; min-width: 170px; min-height: 38px; margin-top: 20px; padding: 11px 18px; border: 1px solid rgba(225, 177, 86, 0.58); color: #ffebbd; background: linear-gradient(110deg, #624217, #996523 52%, #624217); font-size: 9px; font-weight: 900; }
.tower-chest-effect { position: absolute; z-index: 5; top: 52%; left: 50%; width: 390px; height: 300px; border-radius: 50%; opacity: 0; background: radial-gradient(ellipse, rgba(255, 250, 211, 1) 0, rgba(255, 221, 122, 0.96) 17%, rgba(239, 165, 51, 0.78) 36%, rgba(197, 101, 22, 0.38) 57%, transparent 76%); filter: blur(6px); mix-blend-mode: screen; pointer-events: none; transform: translate(-50%, -50%) scale(0.5); }
.tower-chest-effect i { display: none; }
.tower-chest.is-opening { pointer-events: none; }
.tower-chest.is-opening img { filter: brightness(1.1) drop-shadow(0 28px 24px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 34px rgba(255, 204, 105, 0.5)); }
.tower-chest.is-opening .tower-chest-effect { animation: tower-chest-burst 1280ms ease-out both; }
.tower-chest.is-opening .tower-chest-label,
.tower-chest.is-opening .tower-chest-action { opacity: 0; transition: opacity 180ms ease; }

.tower-loot-window { position: absolute; z-index: 25; top: 50%; left: 50%; display: grid; width: min(690px, calc(100% - 40px)); gap: 16px; padding: 20px; border: 1px solid rgba(224, 174, 79, 0.54); border-top: 3px solid #d8a54c; background: rgba(7, 10, 14, 0.97); box-shadow: 0 32px 84px rgba(0, 0, 0, 0.72), inset 0 0 60px rgba(181, 116, 29, 0.06); transform: translate(-50%, -50%); animation: tower-loot-arrive 450ms ease both; }
.tower-loot-window[hidden] { display: none; }
.tower-loot-window > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(218, 169, 79, 0.2); }
.tower-loot-window > header span { display: grid; gap: 4px; }
.tower-loot-window header small { color: #d9a54d; font-size: 8px; font-weight: 900; letter-spacing: 0.14em; }
.tower-loot-window header strong { color: #f1ddb8; font: 700 22px/1 "Beaufort for LoL", Georgia, serif; }
.tower-loot-window header b { color: #80d4a7; font: 900 8px Tahoma, Arial, sans-serif; letter-spacing: 0.1em; }
.tower-loot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tower-loot-item { display: grid; min-width: 0; min-height: 142px; align-content: center; justify-items: center; gap: 9px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.025); animation: tower-loot-item-in 380ms ease both; }
.tower-loot-item:nth-child(2) { animation-delay: 80ms; }
.tower-loot-item:nth-child(3) { animation-delay: 160ms; }
.tower-loot-item:nth-child(4) { animation-delay: 240ms; }
.tower-loot-item span { display: grid; width: 70px; height: 70px; place-items: center; border: 1px solid rgba(219, 171, 80, 0.42); background: radial-gradient(circle, rgba(186, 124, 33, 0.18), rgba(8, 12, 17, 0.82) 72%); }
.tower-loot-item img { max-width: 52px; max-height: 58px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 8px 9px rgba(0, 0, 0, 0.7)); }
.tower-loot-item strong { max-width: 118px; overflow-wrap: anywhere; color: #eddab5; font-size: 10px; line-height: 1.25; text-align: center; }
.tower-loot-window > p { margin: 0; color: #949c9b; font-size: 10px; line-height: 1.5; text-align: center; }
.tower-reset { position: absolute; z-index: 31; right: 20px; bottom: 20px; min-height: 40px; border: 1px solid rgba(225, 177, 86, 0.44); padding: 0 16px; color: #f0d9ad; background: rgba(54, 37, 13, 0.94); font-size: 9px; font-weight: 900; cursor: pointer; }
.tower-reset[hidden] { display: none; }

.demon-tower-copy { position: relative; z-index: 3; width: 100%; margin: -1px auto 0; padding: 36px 44px 32px; border: 1px solid rgba(202, 72, 57, 0.24); border-top: 0; background: linear-gradient(180deg, rgba(10, 10, 15, 0.98), rgba(6, 8, 12, 0.98)); box-shadow: 0 34px 82px rgba(0, 0, 0, 0.52); text-align: center; }
.demon-tower-copy header > span { color: #c95b50; font-size: 9px; font-weight: 900; letter-spacing: 0.2em; }
.demon-tower-copy h3 { max-width: 1080px; margin: 10px auto 12px; color: #f5d59b; font: 700 32px/1.16 "Beaufort for LoL", Georgia, serif; }
.demon-tower-copy header p { max-width: 980px; margin: 0 auto 22px; color: #c5beb3; font-size: 14px; line-height: 1.72; }
.demon-tower-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.demon-tower-highlights p { position: relative; display: grid; min-height: 136px; align-items: center; margin: 0; padding: 22px 24px; border: 1px solid color-mix(in srgb, currentColor 34%, transparent); color: #d8a34d; background: rgba(255, 255, 255, 0.022); text-align: left; }
.demon-tower-highlights p::before { position: absolute; top: 16px; bottom: 16px; left: 0; width: 3px; background: currentColor; content: ""; }
.demon-tower-highlights p > span { display: grid; gap: 6px; }
.demon-tower-highlights strong { color: #ede0cb; font-size: 12px; }
.demon-tower-highlights small { color: #9da2a0; font-size: 11px; line-height: 1.5; }
.demon-tower-highlights .is-red { color: #d95e54; background: rgba(128, 36, 31, 0.08); }
.demon-tower-highlights .is-violet { color: #a47bc9; background: rgba(86, 52, 119, 0.08); }
.demon-tower-highlights .is-gold { color: #d9a54d; background: rgba(139, 91, 22, 0.08); }
.demon-tower-motto { display: flex; min-height: 70px; align-items: center; margin-top: 14px; padding: 13px 18px; border: 1px solid rgba(206, 75, 63, 0.28); border-left: 3px solid #ce5046; background: linear-gradient(90deg, rgba(111, 29, 27, 0.19), rgba(36, 18, 22, 0.35)); text-align: left; }
.demon-tower-motto span { display: grid; gap: 4px; }
.demon-tower-motto strong { color: #efd19c; font-size: 12px; }
.demon-tower-motto small { color: #9e9995; font-size: 11px; line-height: 1.45; }

@keyframes tower-impact-flash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.35) rotate(-20deg); } 22% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35) rotate(18deg); } }
@keyframes tower-damage-rise { 0% { opacity: 0; transform: translateY(8px) scale(0.72); } 20% { opacity: 1; transform: translateY(0) scale(1.1); } 100% { opacity: 0; transform: translateY(-70px) scale(0.94); } }
@keyframes tower-chest-arrive { from { opacity: 0; transform: translate(-50%, calc(-50% + 45px)) scale(0.78); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes tower-chest-burst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.38); } 18% { opacity: 1; } 48% { opacity: 0.94; transform: translate(-50%, -50%) scale(1.02); } 72% { opacity: 0.72; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.28); } }
@keyframes tower-loot-arrive { from { opacity: 0; transform: translate(-50%, calc(-50% + 18px)) scale(0.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes tower-loot-item-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 960px) {
    .demon-tower-stage { min-height: 720px; }
    .tower-boss { width: min(750px, 88%); }
    .demon-tower-highlights { grid-template-columns: 1fr; }
    .demon-tower-highlights p { min-height: 0; }
}

@media (max-width: 700px) {
    .demon-tower { padding: 86px 0 70px; }
    .demon-tower-heading { margin-bottom: 28px; }
    .demon-tower-stage { min-height: 740px; background-position: center; }
    .tower-location-bar { top: 10px; right: 10px; left: 10px; min-height: 50px; gap: 8px; padding: 7px 9px; }
    .tower-location-bar strong { font-size: 12px; }
    .tower-location-bar > b { min-width: 112px; padding-inline: 7px; font-size: 7px; }
    .tower-boss-hud { top: 72px; width: calc(100% - 20px); grid-template-columns: 92px 1fr 54px; gap: 8px; padding: 9px; }
    .tower-boss-hud small { font-size: 6px; }
    .tower-boss-hud strong { font-size: 13px; }
    .tower-boss-hud > b { font-size: 8px; }
    .tower-boss { bottom: 166px; width: min(720px, 172vw); }
    .tower-boss-name { top: 14%; font-size: 9px; }
    .tower-damage-number { font-size: 20px; }
    .tower-combat-notice { right: 10px; bottom: 10px; left: 10px; width: auto; min-height: 72px; padding: 10px 12px; }
    .tower-chest { top: 49%; width: 280px; }
    .tower-chest img { width: 215px; }
    .tower-chest-label strong { font-size: 15px; }
    .tower-loot-window { top: 51%; width: calc(100% - 20px); gap: 12px; padding: 14px; }
    .tower-loot-window header strong { font-size: 18px; }
    .tower-loot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .tower-loot-item { min-height: 116px; }
    .tower-loot-item span { width: 58px; height: 58px; }
    .tower-loot-item img { max-width: 44px; max-height: 50px; }
    .tower-reset { right: 10px; bottom: 10px; }
    .demon-tower-copy { padding: 28px 16px 24px; }
    .demon-tower-copy h3 { font-size: 19px; }
    .demon-tower-copy header p { font-size: 13px; }
    .demon-tower-highlights { gap: 9px; }
    .demon-tower-highlights p { padding: 17px 15px; }
    .demon-tower-motto { padding: 12px 14px; }
}

@media (max-width: 420px) {
    .demon-tower-stage { min-height: 710px; }
    .tower-boss { bottom: 172px; width: 184vw; }
    .tower-loot-item { min-height: 108px; }
}

@media (prefers-reduced-motion: reduce) {
    .tower-boss,
    .tower-boss-visual,
    .tower-boss-frame,
    .tower-boss-hud,
    .tower-impact,
    .tower-damage-number,
    .tower-chest,
    .tower-chest img,
    .tower-chest-effect,
    .tower-loot-window,
    .tower-loot-item { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* Interactive level quests */
.level-quests {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 116px 0 96px;
    background: #070c16;
}

.level-quests::before,
.level-quests::after,
.level-quests-backdrop {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
}

.level-quests-backdrop {
    z-index: -3;
    background:
        linear-gradient(180deg, #070c16 0%, rgba(7, 12, 22, 0.2) 17%, rgba(7, 12, 22, 0.5) 76%, #070c16 100%),
        url("../images/characters/npc-bg.webp") center 24% / cover no-repeat;
    opacity: 0.7;
    filter: saturate(0.7) brightness(0.6);
}

.level-quests::before {
    z-index: -2;
    background:
        radial-gradient(circle at 22% 42%, rgba(209, 144, 53, 0.13), transparent 31%),
        radial-gradient(circle at 79% 48%, rgba(66, 177, 171, 0.1), transparent 32%),
        linear-gradient(90deg, rgba(5, 9, 17, 0.86), transparent 20%, transparent 80%, rgba(5, 9, 17, 0.86));
}

.level-quests::after {
    z-index: -1;
    background: linear-gradient(180deg, #070c16 0, transparent 15%, transparent 86%, #070c16 100%);
}

.level-quests > .section-shell {
    position: relative;
    z-index: 1;
}

.level-quests-heading {
    margin-bottom: 42px;
    text-shadow: 0 3px 16px #000, 0 0 34px rgba(0, 0, 0, 0.92);
}

.level-quests-heading .ornate-description { color: #d8cdbb; }

.level-quest-stage {
    position: relative;
    min-height: 720px;
    overflow: hidden;
    border: 1px solid rgba(221, 166, 76, 0.28);
    background:
        linear-gradient(180deg, rgba(5, 9, 16, 0.18), rgba(5, 9, 16, 0.18) 50%, rgba(5, 9, 16, 0.86) 100%),
        linear-gradient(90deg, rgba(5, 9, 16, 0.6), transparent 23%, transparent 77%, rgba(5, 9, 16, 0.6)),
        url("../images/characters/npc-bg.webp") center bottom / cover no-repeat;
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.52), inset 0 0 90px rgba(2, 6, 12, 0.5);
}

.level-quest-stage-shade {
    position: absolute;
    z-index: 0;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 76%, rgba(220, 155, 54, 0.11), transparent 34%),
        linear-gradient(180deg, rgba(4, 8, 14, 0.18), transparent 44%, rgba(4, 8, 14, 0.66));
    pointer-events: none;
}

.level-quest-stage::after {
    position: absolute;
    z-index: 1;
    right: 6%;
    bottom: -54px;
    left: 6%;
    height: 145px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.72), transparent 70%);
    content: "";
    filter: blur(18px);
    pointer-events: none;
}

.level-quest-hint {
    position: absolute;
    z-index: 9;
    top: 22px;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border: 1px solid rgba(223, 170, 83, 0.28);
    color: #ddd2c1;
    background: rgba(6, 10, 18, 0.9);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.35);
    font-size: 12px;
    letter-spacing: 0.04em;
    transform: translateX(-50%);
    white-space: nowrap;
}

.level-quest-hint i { color: #77cbc6; }

.level-guardian {
    position: absolute;
    z-index: 4;
    bottom: 54px;
    left: 50%;
    width: 540px;
    height: 610px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
    transform: translateX(-50%);
    transition: opacity 0.45s ease, visibility 0.45s ease, transform 0.55s ease, filter 0.3s ease;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

.level-guardian > img {
    position: absolute;
    right: 50%;
    bottom: 0;
    width: 890px;
    max-width: none;
    height: auto;
    filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.68));
    transform: translateX(50%);
    transition: filter 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

.level-guardian *::selection { background: transparent; }

.level-guardian:hover > img,
.level-guardian:focus-visible > img {
    filter: brightness(1.08) drop-shadow(0 0 18px rgba(217, 157, 55, 0.28)) drop-shadow(0 25px 25px rgba(0, 0, 0, 0.68));
    transform: translateX(50%) scale(1.025);
}

.level-game-name {
    position: absolute;
    z-index: 7;
    top: 42px;
    left: 50%;
    color: #4dff42;
    font: 700 10px/1 Tahoma, Arial, sans-serif;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 4px #000;
    transform: translateX(-50%);
    white-space: nowrap;
}

.level-guardian-prompt {
    position: absolute;
    z-index: 8;
    bottom: 12px;
    left: 50%;
    display: grid;
    grid-template-columns: 34px auto;
    gap: 1px 10px;
    min-width: 260px;
    padding: 12px 18px;
    border: 1px solid rgba(222, 166, 72, 0.42);
    color: #f0ddb5;
    background: linear-gradient(90deg, rgba(8, 12, 19, 0.94), rgba(22, 20, 18, 0.9), rgba(8, 12, 19, 0.94));
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.05);
    text-align: left;
    transform: translateX(-50%);
}

.level-guardian-prompt i {
    grid-row: 1 / 3;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid rgba(221, 162, 65, 0.4);
    border-radius: 50%;
    color: #e3aa4a;
}

.level-guardian-prompt b {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.level-guardian-prompt small { color: #8f929a; font-size: 10px; }

.level-mission-backdrop {
    position: absolute;
    z-index: 20;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    background: rgba(3, 6, 11, 0.48);
    -webkit-backdrop-filter: blur(7px) saturate(0.7);
    backdrop-filter: blur(7px) saturate(0.7);
    transition: opacity 0.25s ease, visibility 0.25s ease;
    pointer-events: none;
}

.level-mission-paper {
    position: absolute;
    z-index: 22;
    top: 50%;
    left: 50%;
    width: min(460px, calc(100% - 36px));
    padding: 34px 38px 32px;
    opacity: 0;
    visibility: hidden;
    color: #29231b;
    background:
        radial-gradient(circle at 18% 14%, rgba(116, 81, 42, 0.13), transparent 24%),
        radial-gradient(circle at 81% 72%, rgba(102, 67, 29, 0.11), transparent 26%),
        linear-gradient(135deg, #d9c5a4, #eee0c4 48%, #cdb38b);
    box-shadow: 0 35px 75px rgba(0, 0, 0, 0.7), inset 0 0 42px rgba(86, 53, 21, 0.18);
    clip-path: polygon(1% 3%, 12% 1%, 25% 2%, 39% 0, 52% 2%, 66% 1%, 80% 3%, 98% 1%, 99% 16%, 97% 31%, 100% 47%, 98% 63%, 100% 79%, 97% 98%, 82% 97%, 68% 100%, 53% 98%, 38% 100%, 23% 97%, 2% 99%, 3% 82%, 1% 66%, 3% 51%, 1% 34%);
    transform: translate(-50%, -46%) scale(0.96);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.3s ease;
    pointer-events: none;
}

.level-quest-stage.is-mission-open .level-mission-backdrop,
.level-quest-stage.is-mission-open .level-mission-paper {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.level-quest-stage.is-mission-open .level-mission-paper { transform: translate(-50%, -50%) scale(1); }

.level-mission-close {
    position: absolute;
    top: 18px;
    right: 20px;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(68, 48, 27, 0.35);
    border-radius: 50%;
    color: #49341f;
    background: rgba(255, 248, 228, 0.36);
    cursor: pointer;
}

.level-mission-paper > header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding-right: 24px;
    border-bottom: 1px solid rgba(77, 54, 28, 0.28);
    padding-bottom: 16px;
}

.level-mission-paper > header > i {
    display: grid;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    place-items: center;
    border: 1px solid rgba(83, 57, 27, 0.34);
    border-radius: 50%;
    font-size: 22px;
}

.level-mission-paper > header span { display: grid; gap: 4px; }
.level-mission-paper > header small { font-size: 9px; font-weight: 900; letter-spacing: 0.18em; }
.level-mission-paper > header strong { font: 700 1.5rem/1.05 "Beaufort for LOL", Georgia, serif; }

.level-mission-sketch {
    display: grid;
    width: 116px;
    height: 90px;
    margin: 0 auto 18px;
    place-items: center;
    border: 1px solid rgba(76, 53, 27, 0.25);
    color: rgba(51, 40, 28, 0.78);
    background: rgba(255, 248, 228, 0.2);
    font-size: 55px;
    transform: rotate(-1.5deg);
}

.level-mission-paper dl { display: grid; gap: 8px; margin: 0 0 22px; }
.level-mission-paper dl div { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 7px; border-bottom: 1px dashed rgba(69, 48, 24, 0.22); }
.level-mission-paper dt { color: #5b4d3c; font-size: 12px; }
.level-mission-paper dd { margin: 0; font-size: 12px; font-weight: 800; text-align: right; }

.level-accept-button,
.level-complete-button,
.level-reset-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    border: 1px solid rgba(224, 169, 76, 0.5);
    color: #fff2d0;
    background: linear-gradient(110deg, #5e351b, #a76623 50%, #63371d);
    box-shadow: 0 13px 28px rgba(0, 0, 0, 0.32), inset 0 1px rgba(255, 255, 255, 0.12);
    font: 800 11px/1 "Beaufort for LOL", Georgia, serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease;
}

.level-accept-button { width: 100%; }
.level-accept-button:hover,
.level-accept-button:focus-visible,
.level-complete-button:hover,
.level-complete-button:focus-visible,
.level-reset-button:hover,
.level-reset-button:focus-visible { filter: brightness(1.15); transform: translateY(-2px); }

.level-hunt {
    position: absolute;
    z-index: 3;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    pointer-events: none;
}

.level-quest-stage[data-state="hunt"] .level-hunt,
.level-quest-stage[data-state="ready"] .level-hunt,
.level-quest-stage[data-state="reward"] .level-hunt {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.level-quest-stage[data-state="hunt"] .level-guardian,
.level-quest-stage[data-state="ready"] .level-guardian,
.level-quest-stage[data-state="reward"] .level-guardian {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(36px) scale(0.96);
    pointer-events: none;
}

.level-warrior {
    position: absolute;
    z-index: 3;
    bottom: 58px;
    left: 50%;
    width: 620px;
    height: 540px;
    transform: translateX(-50%);
    pointer-events: none;
}

.level-warrior > img {
    position: absolute;
    right: 50%;
    bottom: 0;
    width: 870px;
    max-width: none;
    height: auto;
    filter: drop-shadow(0 27px 26px rgba(0, 0, 0, 0.65));
    transform: translateX(50%);
}

.level-warrior .level-game-name { top: 43px; }

.level-reward-flare {
    position: absolute;
    z-index: 3;
    top: 8%;
    left: 50%;
    width: 330px;
    height: 440px;
    opacity: 0;
    background:
        linear-gradient(90deg, transparent 0 12%, rgba(241, 170, 61, 0.08) 23%, rgba(255, 231, 157, 0.72) 48%, rgba(255, 174, 52, 0.14) 72%, transparent 90%),
        repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 219, 133, 0.18) 23px 27px, transparent 28px 46px),
        linear-gradient(180deg, transparent 0, rgba(255, 214, 126, 0.12) 18%, rgba(255, 183, 63, 0.52) 75%, rgba(255, 243, 184, 0.76) 92%, transparent 100%);
    filter: blur(1px) drop-shadow(0 0 18px rgba(243, 166, 58, 0.58));
    mix-blend-mode: screen;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 88%, transparent 100%);
    transform: translateX(-50%) scaleX(0.42) scaleY(0.2);
    transform-origin: center bottom;
    pointer-events: none;
}

.level-reward-flare::before {
    position: absolute;
    right: -92px;
    bottom: -8px;
    left: -92px;
    height: 132px;
    border-radius: 50%;
    background:
        radial-gradient(ellipse, transparent 0 24%, rgba(255, 244, 183, 0.92) 25% 27%, rgba(232, 151, 44, 0.64) 29% 33%, transparent 37%),
        conic-gradient(from 12deg, transparent 0 5%, rgba(255, 229, 151, 0.9) 6% 8%, transparent 9% 20%, rgba(235, 151, 42, 0.72) 21% 23%, transparent 24% 42%, rgba(255, 231, 154, 0.82) 43% 45%, transparent 46% 67%, rgba(234, 147, 39, 0.76) 68% 70%, transparent 71%);
    content: "";
    filter: blur(2px) drop-shadow(0 0 12px rgba(255, 180, 62, 0.7));
    transform: perspective(260px) rotateX(67deg) scale(0.48);
}

.level-reward-flare::after {
    position: absolute;
    top: 28%;
    left: 50%;
    width: 4px;
    height: 22px;
    border-radius: 3px;
    background: #fff2ba;
    box-shadow:
        -104px 28px 0 -1px #ffd26f, 92px 54px 0 -1px #fff0b4, -76px 118px 0 #e89b37,
        118px 148px 0 -1px #ffd879, -126px 196px 0 -1px #fff2b1, 86px 236px 0 #e79a36,
        -58px 276px 0 -1px #ffd46e, 124px 314px 0 -1px #ffedaa, -108px 346px 0 #e89c39;
    content: "";
    filter: drop-shadow(0 0 6px rgba(255, 185, 64, 0.9));
}

.level-warrior > img { z-index: 2; }

.level-quest-stage[data-state="reward"] .level-reward-flare {
    animation: level-reward-column 1.35s cubic-bezier(0.16, 0.78, 0.24, 1) 1 both;
}

.level-quest-stage[data-state="reward"] .level-reward-flare::before { animation: level-reward-ring 1.08s cubic-bezier(0.12, 0.72, 0.22, 1) 1 both; }
.level-quest-stage[data-state="reward"] .level-reward-flare::after { animation: level-reward-particles 1.28s ease-out 1 both; }
.level-quest-stage[data-state="reward"] .level-warrior > img { animation: level-reward-character-flash 1.05s ease-out 1 both; }

@keyframes level-reward-column {
    0% { opacity: 0; transform: translateX(-50%) scaleX(0.34) scaleY(0.08); }
    18% { opacity: 0.96; transform: translateX(-50%) scaleX(0.58) scaleY(1); }
    58% { opacity: 0.68; transform: translateX(-50%) scaleX(1) scaleY(1); }
    100% { opacity: 0; transform: translateX(-50%) scaleX(1.18) scaleY(1.04); }
}

@keyframes level-reward-ring {
    0% { opacity: 0; transform: perspective(260px) rotateX(67deg) scale(0.38); }
    24% { opacity: 1; }
    100% { opacity: 0; transform: perspective(260px) rotateX(67deg) scale(1.34); }
}

@keyframes level-reward-particles {
    0% { opacity: 0; transform: translate(-50%, 82px) scale(0.62); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -118px) scale(1.08); }
}

@keyframes level-reward-character-flash {
    0% { filter: brightness(1) drop-shadow(0 27px 26px rgba(0, 0, 0, 0.65)); }
    24% { filter: brightness(1.72) saturate(0.78) drop-shadow(0 0 24px rgba(255, 193, 79, 0.62)) drop-shadow(0 27px 26px rgba(0, 0, 0, 0.65)); }
    100% { filter: brightness(1) saturate(1) drop-shadow(0 27px 26px rgba(0, 0, 0, 0.65)); }
}

.level-dog-field { position: absolute; z-index: 5; inset: 62px 24px 112px; }

.level-dog-target {
    position: absolute;
    top: var(--dog-y);
    left: var(--dog-x);
    width: 160px;
    height: 118px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: transparent;
    background: transparent;
    cursor: crosshair;
    transform: translate(-50%, -50%) scale(var(--dog-scale));
    transition: filter 0.2s ease, opacity 0.35s ease, transform 0.35s ease;
    animation: level-dog-arrive 0.45s calc(var(--dog-delay) * 1ms) ease both;
}

.level-dog-target::before {
    position: absolute;
    z-index: 1;
    inset: 13px 2px 2px;
    opacity: 0;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 210, 105, 0.34) 0, rgba(255, 174, 66, 0.13) 42%, transparent 72%);
    content: "";
    filter: blur(9px);
    transform: scale(0.72);
    transition: opacity 0.2s ease, transform 0.25s ease;
    pointer-events: none;
}

.level-dog-target::after {
    position: absolute;
    right: 14px;
    bottom: 5px;
    left: 14px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.68), transparent 68%);
    content: "";
    filter: blur(3px);
}

.level-dog-target img {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 610px;
    max-width: none;
    height: auto;
    filter: drop-shadow(0 11px 11px rgba(0, 0, 0, 0.62));
    transform: translate(-50%, -67%) scaleX(var(--dog-flip));
    pointer-events: none;
}

.level-dog-target:hover,
.level-dog-target:focus-visible {
    filter: brightness(1.18) drop-shadow(0 0 11px rgba(255, 190, 72, 0.48));
    outline: 0;
}

.level-dog-target:hover::before,
.level-dog-target:focus-visible::before { opacity: 1; transform: scale(1); }

.level-dog-target.is-defeated {
    opacity: 0;
    filter: brightness(2) sepia(1);
    transform: translate(-50%, -50%) scale(calc(var(--dog-scale) * 0.7)) rotate(-8deg);
    pointer-events: none;
}

@keyframes level-dog-arrive {
    from { opacity: 0; transform: translate(-50%, -34%) scale(calc(var(--dog-scale) * 0.78)); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(var(--dog-scale)); }
}

.level-progress {
    position: absolute;
    z-index: 11;
    top: 76px;
    right: 28px;
    display: grid;
    width: 250px;
    gap: 11px;
    padding: 14px 16px;
    opacity: 0;
    visibility: hidden;
    border: 1px solid rgba(117, 205, 199, 0.35);
    background: rgba(6, 11, 19, 0.9);
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.36);
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.level-quest-stage[data-state="hunt"] .level-progress,
.level-quest-stage[data-state="ready"] .level-progress { opacity: 1; visibility: visible; }
.level-progress > div { display: flex; align-items: center; gap: 11px; }
.level-progress > div > i { color: #79ccc7; font-size: 18px; }
.level-progress > div span { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; }
.level-progress small { color: #8e97a4; font-size: 8px; font-weight: 900; letter-spacing: 0.14em; }
.level-progress strong { color: #f0d08b; font-size: 16px; }
.level-progress-track { display: block; height: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.08); }
.level-progress-track i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #65c6c0, #e1ad52); box-shadow: 0 0 12px rgba(101, 198, 192, 0.6); transition: width 0.3s ease; }

.level-complete-button,
.level-reset-button {
    position: absolute;
    z-index: 12;
    right: 28px;
    bottom: 28px;
    min-width: 230px;
    padding: 0 20px;
}

.level-reset-button { background: linear-gradient(110deg, #173b3d, #26706e 52%, #173b3d); }
.level-complete-button[hidden],
.level-reset-button[hidden] { display: none; }

.level-quest-notice {
    position: absolute;
    z-index: 10;
    bottom: 28px;
    left: 28px;
    display: flex;
    align-items: center;
    gap: 13px;
    max-width: 480px;
    min-height: 64px;
    padding: 13px 18px;
    border: 1px solid rgba(222, 166, 72, 0.34);
    color: #e8dcc7;
    background: rgba(6, 10, 17, 0.91);
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.36);
    transition: border-color 0.25s ease, background 0.25s ease;
}

.level-quest-notice > i {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    border: 1px solid rgba(222, 166, 72, 0.36);
    border-radius: 50%;
    color: #dda64c;
}

.level-quest-notice div { display: grid; gap: 3px; }
.level-quest-notice strong { color: #efd9a9; font-size: 12px; letter-spacing: 0.05em; }
.level-quest-notice span { color: #9096a1; font-size: 11px; }
.level-quest-notice.is-success { border-color: rgba(99, 204, 147, 0.44); background: rgba(7, 29, 23, 0.92); }
.level-quest-notice.is-success > i { border-color: rgba(99, 204, 147, 0.45); color: #73d49e; }

.level-quests-copy {
    display: grid;
    gap: 24px;
    margin-top: 34px;
    padding: 38px 42px;
    border: 1px solid rgba(219, 164, 76, 0.22);
    background: linear-gradient(135deg, rgba(10, 15, 24, 0.94), rgba(9, 14, 23, 0.8));
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.32);
}

.level-quests-copy header { display: grid; gap: 10px; text-align: center; }
.level-quests-copy header > span { color: #d8a34a; font-size: 9px; font-weight: 900; letter-spacing: 0.2em; }
.level-quests-copy h3 { margin: 0; color: #f0d7a0; font: 700 clamp(1.8rem, 3vw, 2.6rem)/1 "Beaufort for LOL", Georgia, serif; }
.level-quests-copy header p { max-width: 1050px; margin: 0 auto; color: #c9c1b4; font-size: 15px; line-height: 1.7; }
.level-quests-benefits { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 14px; }
.level-quests-benefits p { display: flex; align-items: center; gap: 15px; margin: 0; padding: 18px 20px; border: 1px solid rgba(255, 255, 255, 0.08); color: #b9b5ae; background: rgba(255, 255, 255, 0.018); line-height: 1.55; }
.level-quests-benefits i { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border: 1px solid rgba(217, 160, 68, 0.35); color: #dda64b; background: rgba(217, 160, 68, 0.08); }

@media (max-width: 980px) {
    .level-quest-stage { min-height: 680px; }
    .level-guardian { bottom: 52px; width: 470px; height: 570px; }
    .level-guardian > img { width: 800px; }
    .level-warrior { bottom: 58px; width: 540px; height: 500px; }
    .level-warrior > img { width: 800px; }
    .level-dog-field { inset-inline: 10px; }
    .level-quests-benefits { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .level-quests { padding: 90px 0 72px; }
    .level-quests-heading { margin-bottom: 28px; }
    .level-quest-stage { min-height: 670px; }
    .level-quest-hint { top: 14px; max-width: calc(100% - 24px); padding: 9px 12px; font-size: 10px; white-space: normal; text-align: center; }
    .level-guardian { bottom: 62px; width: 355px; height: 520px; }
    .level-guardian > img { width: 715px; }
    .level-game-name { top: 54px; }
    .level-guardian-prompt { bottom: 0; min-width: 245px; }
    .level-mission-paper { padding: 30px 24px 26px; }
    .level-mission-paper > header strong { font-size: 1.25rem; }
    .level-warrior { bottom: 88px; width: 390px; height: 430px; }
    .level-warrior > img { width: 700px; }
    .level-warrior .level-game-name { top: 30px; }
    .level-dog-field { inset: 60px 3px 142px; }
    .level-dog-target { width: 108px; height: 84px; }
    .level-dog-target img { width: 440px; }
    .level-progress { top: 62px; right: 12px; width: 205px; padding: 11px 12px; }
    .level-progress small { font-size: 7px; }
    .level-quest-notice { right: 12px; bottom: 16px; left: 12px; min-height: 58px; padding: 10px 12px; }
    .level-quest-notice span { font-size: 9px; }
    .level-complete-button,
    .level-reset-button { right: 50%; bottom: 86px; min-width: 220px; transform: translateX(50%); }
    .level-complete-button:hover,
    .level-complete-button:focus-visible,
    .level-reset-button:hover,
    .level-reset-button:focus-visible { transform: translateX(50%) translateY(-2px); }
    .level-quests-copy { margin-top: 22px; padding: 28px 18px; }
    .level-quests-copy header p { font-size: 13px; }
    .level-quests-benefits p { padding: 15px; font-size: 12px; }
}

@font-face {
    font-family: "Beaufort for LoL";
    src: url("../fonts/beaufort-medium.otf") format("opentype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Beaufort for LoL";
    src: url("../fonts/beaufort-bold.otf") format("opentype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    --bg: #0a0f1c;
    --surface: #121a2a;
    --surface-2: #19243a;
    --text: #f8f2e8;
    --muted: #a9a39c;
    --gold: #dfaa53;
    --gold-light: #ffe4a0;
    --red: #dc403d;
    --red-deep: #7f1823;
    --line: rgba(255, 255, 255, 0.11);
    --font: "Beaufort for LoL", Georgia, serif;
    --shell: min(1180px, calc(100% - 48px));
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 92px;
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    overflow-x: hidden;
    color: var(--text);
    background: var(--bg);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
}

body.menu-open {
    overflow: hidden;
}

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

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    font: inherit;
}

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

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: 4px;
}

.page-progress {
    position: fixed;
    z-index: 1000;
    inset: 0 0 auto;
    height: 2px;
}

.page-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #9a2029, #f45246, #f2c46f);
    box-shadow: 0 0 16px rgba(242, 196, 111, 0.68);
}

.site-header {
    position: fixed;
    z-index: 100;
    top: 18px;
    left: 0;
    width: 100%;
    transition: top 0.35s ease;
}

.site-header.scrolled {
    top: 0;
}

.header-shell {
    width: min(1340px, calc(100% - 52px));
    min-height: 74px;
    margin: auto;
    display: grid;
    grid-template-columns: 180px 1fr auto;
    align-items: center;
    gap: 28px;
    padding: 8px 9px 8px 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(110deg, rgba(10, 15, 27, 0.78), rgba(20, 27, 42, 0.7));
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(22px) saturate(1.25);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.site-header.scrolled .header-shell {
    border-color: rgba(223, 170, 83, 0.19);
    background: rgba(10, 15, 27, 0.95);
}

.brand {
    width: 145px;
}

.brand img {
    width: 100%;
}

.main-nav {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 30px;
}

.main-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 12px 0;
    color: #cac4bc;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    transition: color 0.25s ease;
}

.main-nav a > i {
    font-size: 0.78em;
    color: var(--gold-light);
    opacity: 0.72;
    transition: opacity 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.main-nav a:hover > i,
.main-nav a.active > i {
    opacity: 1;
    color: var(--gold);
    transform: translateY(-1px);
}

.main-nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--red), var(--gold-light));
    box-shadow: 0 0 10px rgba(223, 170, 83, 0.6);
    transform: translateX(-50%);
    transition: width 0.25s ease;
}

.main-nav a:hover,
.main-nav a.active {
    color: white;
}

.main-nav a:hover::after,
.main-nav a.active::after {
    width: 100%;
}

.nav-play-menu {
    position: relative;
    justify-self: end;
}

.nav-action {
    position: relative;
    min-width: 156px;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    overflow: hidden;
    border: 1px solid rgba(255, 173, 111, 0.42);
    color: white;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.11), transparent 38%),
        linear-gradient(120deg, #861a25, #df3f3d 58%, #ef7650);
    box-shadow: 0 12px 30px rgba(159, 30, 37, 0.3), inset 0 1px rgba(255, 255, 255, 0.14);
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.nav-action-chevron {
    margin-left: 2px;
    font-size: 0.55rem;
    transition: transform 180ms ease;
}

.nav-action::before,
.gradient-button::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -70%;
    width: 45%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent);
    transform: rotate(20deg);
    transition: left 0.55s ease;
}

.nav-action:hover,
.gradient-button:hover {
    transform: translateY(-3px);
}

.nav-action:hover {
    box-shadow: 0 17px 38px rgba(159, 30, 37, 0.42), inset 0 1px rgba(255, 255, 255, 0.18);
}

.nav-action:hover::before,
.gradient-button:hover::before {
    left: 125%;
}

.nav-play-menu.open .nav-action,
.nav-play-menu:focus-within .nav-action {
    box-shadow: 0 17px 38px rgba(159, 30, 37, 0.42), inset 0 1px rgba(255, 255, 255, 0.18);
}

.nav-play-menu.open .nav-action-chevron {
    transform: rotate(180deg);
}

.nav-play-dropdown {
    position: absolute;
    z-index: 12;
    top: calc(100% + 11px);
    right: 0;
    width: 286px;
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(218, 169, 86, 0.34);
    opacity: 0;
    visibility: hidden;
    background: rgba(7, 12, 22, 0.98);
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.52), inset 0 1px rgba(255, 255, 255, 0.04);
    transform: translateY(-8px);
    transform-origin: top right;
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
    pointer-events: none;
}

.nav-play-dropdown::before {
    position: absolute;
    top: -6px;
    right: 28px;
    width: 11px;
    height: 11px;
    border-top: 1px solid rgba(218, 169, 86, 0.34);
    border-left: 1px solid rgba(218, 169, 86, 0.34);
    background: #080d18;
    content: "";
    transform: rotate(45deg);
}

.nav-play-menu.open .nav-play-dropdown {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

.nav-platform-link {
    min-height: 62px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    color: #eee9df;
    background: linear-gradient(110deg, rgba(31, 43, 58, 0.9), rgba(13, 21, 33, 0.96));
    letter-spacing: 0;
    text-transform: none;
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.nav-platform-link > i {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(218, 169, 86, 0.3);
    color: #e0ad57;
    background: rgba(126, 82, 26, 0.12);
    font-size: 1.05rem;
}

.nav-platform-link > span {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.nav-platform-link small {
    color: #8f969f;
    font: 800 8px/1 Tahoma, Arial, sans-serif;
    letter-spacing: 0.1em;
}

.nav-platform-link strong {
    color: #f0e5d0;
    font: 700 16px/1 "Beaufort for LoL", Georgia, serif;
}

.nav-platform-link:hover,
.nav-platform-link:focus-visible {
    border-color: rgba(223, 170, 83, 0.5);
    background-color: rgba(36, 47, 62, 0.96);
    transform: translateX(-2px);
}

.nav-mobile-platforms {
    display: none;
}

.menu-toggle {
    display: none;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--line);
    color: white;
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 20px;
    height: 1px;
    margin: 5px auto;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.hero {
    position: relative;
    min-height: 100svh;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 118px 24px 92px;
    isolation: isolate;
}

.hero-media,
.hero-blur,
.hero-shade,
.hero-noise {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-media {
    z-index: -2;
    overflow: hidden;
    background: #0b101b url("../media/hero-poster-forest.webp") center 10% / cover no-repeat;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 10%;
}

.hero-blur {
    z-index: 1;
    background:
        radial-gradient(ellipse at center 42%, rgba(5, 7, 12, 0.26) 0%, rgba(6, 8, 14, 0.39) 46%, rgba(7, 9, 15, 0.9) 100%);
    backdrop-filter: blur(0.4px);
}

.hero-shade {
    z-index: 2;
    background:
        linear-gradient(180deg, rgba(5, 6, 10, 0.58) 0%, rgba(5, 7, 12, 0.14) 27%, rgba(5, 7, 12, 0.2) 64%, #0a0f1c 100%),
        linear-gradient(90deg, rgba(5, 7, 12, 0.66), rgba(5, 7, 12, 0.12) 29%, rgba(5, 7, 12, 0.12) 71%, rgba(5, 7, 12, 0.66));
}

.hero-noise {
    z-index: 3;
    opacity: 0.2;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: radial-gradient(circle at center, black, transparent 74%);
}

.light-orb {
    position: absolute;
    z-index: 2;
    display: block;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(8px);
    animation: orbFloat 7s ease-in-out infinite;
}

.light-orb-one {
    top: 22%;
    left: 17%;
    width: 330px;
    height: 330px;
    background: radial-gradient(circle, rgba(198, 38, 44, 0.18), transparent 67%);
}

.light-orb-two {
    right: 15%;
    bottom: 14%;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(234, 177, 81, 0.13), transparent 67%);
    animation-delay: -3s;
}

.hero-content {
    position: relative;
    z-index: 4;
    width: min(860px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0 0 13px;
    color: var(--gold-light);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.hero-eyebrow span {
    width: 48px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--red));
}

.hero-eyebrow span:last-child {
    background: linear-gradient(90deg, var(--red), transparent);
}

.logo-stage {
    position: relative;
    width: clamp(310px, 36vw, 570px);
    display: grid;
    place-items: center;
    margin: 0 auto 8px;
}

.logo-halo {
    position: absolute;
    width: 77%;
    aspect-ratio: 1;
    border: 1px solid rgba(232, 174, 76, 0.13);
    border-radius: 50%;
    box-shadow:
        0 0 0 18px rgba(232, 174, 76, 0.018),
        0 0 0 42px rgba(232, 174, 76, 0.012),
        0 0 90px rgba(214, 53, 48, 0.16);
    animation: haloPulse 4.5s ease-in-out infinite;
}

.logo-halo::before,
.logo-halo::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border-top: 1px solid rgba(255, 218, 143, 0.55);
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
    animation: haloSpin 13s linear infinite;
}

.logo-halo::after {
    inset: 22px;
    border-top-color: transparent;
    border-bottom-color: rgba(218, 51, 46, 0.5);
    animation-direction: reverse;
    animation-duration: 10s;
}

.hero-logo {
    position: relative;
    z-index: 1;
    width: 100%;
    filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.46));
}

.server-type {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 0 10px;
    color: #e3c27d;
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.2em;
}

.server-type i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 12px var(--red);
}

.hero h1 {
    margin: 0;
    color: #fffaf0;
    font-size: clamp(2.35rem, 4vw, 4.7rem);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1;
    text-shadow: 0 10px 38px rgba(0, 0, 0, 0.46);
}

.hero h1 em,
.section-heading h2 em {
    color: var(--gold-light);
    font-style: normal;
    text-shadow: 0 0 34px rgba(223, 170, 83, 0.22);
}

.hero-description {
    max-width: 650px;
    margin: 14px auto 0;
    color: #c6c0b8;
    font-size: 0.93rem;
    line-height: 1.65;
}

.countdown-shell {
    width: min(720px, 100%);
    margin: 20px auto 0;
    padding: 13px 18px 15px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.055), transparent 38%),
        rgba(8, 10, 17, 0.5);
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px) saturate(1.2);
}

.countdown-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 9px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #a8a29b;
    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.countdown-heading span i {
    margin-right: 7px;
    color: #ff6a50;
}

.countdown-heading time {
    color: var(--gold-light);
}

.server-since {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    min-height: 54px;
    text-align: left;
}

.server-since-mark {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(238, 184, 89, 0.3);
    border-radius: 4px;
    color: var(--gold-light);
    background: linear-gradient(145deg, rgba(238, 184, 89, 0.16), rgba(183, 48, 48, 0.11));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.07);
}

.server-since-copy strong,
.server-since-copy small {
    display: block;
}

.server-since-copy strong {
    color: #fff8e9;
    font-family: "Beaufort for LOL", Georgia, serif;
    font-size: clamp(1.2rem, 2.2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.01em;
}

.server-since-copy small {
    margin-top: 6px;
    color: #a9a29a;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.server-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid rgba(89, 201, 138, 0.2);
    border-radius: 999px;
    color: #9dddb9;
    background: rgba(45, 129, 83, 0.1);
    font-size: 0.54rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.server-live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #65d49a;
    box-shadow: 0 0 10px rgba(101, 212, 154, 0.7);
}

.hero-actions,
.features-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
}

.hero-actions {
    width: min(720px, 100%);
    margin-top: 15px;
}

.gradient-button {
    position: relative;
    isolation: isolate;
    min-width: 0;
    flex: 1 1 0;
    min-height: 66px;
    display: grid;
    grid-template-columns: 42px 1fr 22px;
    align-items: center;
    gap: 13px;
    overflow: hidden;
    padding: 8px 19px 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: white;
    text-align: left;
    box-shadow: 0 15px 34px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.gradient-red {
    background:
        radial-gradient(circle at 15% 0%, rgba(255, 211, 162, 0.2), transparent 27%),
        linear-gradient(120deg, #741521, #c53235 52%, #ec6a4c);
}

.gradient-gold {
    background:
        radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.18), transparent 27%),
        linear-gradient(120deg, #58401b, #a8752e 50%, #d6a34d);
}

.gradient-button:hover {
    border-color: rgba(255, 231, 185, 0.5);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.36), 0 0 30px rgba(205, 68, 55, 0.12), inset 0 1px rgba(255, 255, 255, 0.18);
}

.button-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.17);
    background: rgba(9, 10, 16, 0.18);
}

.button-copy small,
.button-copy strong {
    display: block;
}

.button-copy small {
    margin-bottom: 3px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.54rem;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.button-copy strong {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.button-arrow {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.75rem;
    transition: transform 0.25s ease;
}

.gradient-button:hover .button-arrow {
    transform: translateX(5px);
}

.hero-socials {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.hero-socials > span {
    margin-right: 6px;
    color: #8f8a84;
    font-size: 0.57rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.hero-socials a {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.11);
    color: #bcb6af;
    background: rgba(8, 10, 17, 0.44);
    backdrop-filter: blur(12px);
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.hero-socials a:hover {
    color: var(--gold-light);
    border-color: rgba(223, 170, 83, 0.4);
    transform: translateY(-3px);
}

.scroll-down {
    position: absolute;
    z-index: 5;
    bottom: 16px;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: #85807c;
    font-size: 0.51rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transform: translateX(-50%);
}

.scroll-down i {
    color: var(--gold);
    animation: scrollBounce 1.8s ease-in-out infinite;
}

.scroll-down span {
    white-space: nowrap;
}

.general-features {
    position: relative;
    overflow: hidden;
    padding: 130px 0 120px;
    background: #0c1220;
    isolation: isolate;
}

.features-backdrop {
    position: absolute;
    z-index: -2;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(9, 15, 27, 0.96) 0%, rgba(9, 15, 27, 0.7) 38%, rgba(9, 15, 27, 0.82) 72%, #0c1220 100%),
        linear-gradient(90deg, rgba(9, 15, 27, 0.94) 0%, rgba(9, 15, 27, 0.42) 48%, rgba(9, 15, 27, 0.92) 100%),
        url("../images/characters/npc-bg.webp") center 42% / cover no-repeat;
}

.general-features::before,
.general-features::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(12px);
}

.general-features::before {
    top: 10%;
    left: -250px;
    background: radial-gradient(circle, rgba(178, 37, 42, 0.14), transparent 68%);
}

.general-features::after {
    right: -260px;
    bottom: 6%;
    background: radial-gradient(circle, rgba(223, 170, 83, 0.1), transparent 68%);
}

.section-shell {
    width: var(--shell);
    margin: auto;
}

.section-heading {
    max-width: 780px;
    margin: 0 auto 60px;
    text-align: center;
}

.section-heading > p:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 0 0 15px;
    color: #d6ad68;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
}

.section-heading > p:first-child span {
    width: 42px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--red));
}

.section-heading > p:first-child span:last-child {
    background: linear-gradient(90deg, var(--red), transparent);
}

.section-heading h2 {
    margin: 0;
    font-size: clamp(2.7rem, 5vw, 5.4rem);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1;
}

.heading-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin: 21px auto;
}

.heading-rule i {
    width: 54px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(223, 170, 83, 0.55));
}

.heading-rule i:last-child {
    background: linear-gradient(90deg, rgba(223, 170, 83, 0.55), transparent);
}

.heading-rule b {
    width: 6px;
    height: 6px;
    border: 1px solid var(--gold);
    transform: rotate(45deg);
}

.heading-description {
    max-width: 590px;
    margin: auto;
    color: #aaa49d;
    font-size: 0.93rem;
    line-height: 1.75;
}

.feature-console {
    display: grid;
    grid-template-columns: minmax(360px, 0.84fr) minmax(0, 1.16fr);
    gap: 16px;
    align-items: stretch;
}

.feature-display {
    position: relative;
    min-height: 550px;
    display: flex;
    flex-direction: column;
    padding: 36px;
    overflow: hidden;
    border: 1px solid rgba(223, 170, 83, 0.24);
    background:
        radial-gradient(circle at 100% 100%, rgba(180, 39, 42, 0.16), transparent 38%),
        linear-gradient(145deg, rgba(23, 21, 24, 0.93), rgba(9, 11, 18, 0.93));
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.32), inset 0 1px rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(18px);
}

.feature-display::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(223, 170, 83, 0.1);
    border-radius: 50%;
    box-shadow: 0 0 0 28px rgba(223, 170, 83, 0.018), 0 0 0 62px rgba(223, 170, 83, 0.012);
}

.display-topline {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 70px;
    color: #8f8a84;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.display-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.display-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ad38f;
    box-shadow: 0 0 0 5px rgba(74, 211, 143, 0.08), 0 0 14px rgba(74, 211, 143, 0.45);
}

.display-icon {
    position: relative;
    z-index: 1;
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 221, 151, 0.28);
    color: var(--gold-light);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent),
        rgba(223, 170, 83, 0.07);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.25), 0 0 32px rgba(223, 170, 83, 0.08);
    font-size: 1.55rem;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.display-kicker {
    margin: 0 0 8px;
    color: #d6a758;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.feature-display h3 {
    margin: 0;
    font-size: clamp(2rem, 3.2vw, 3.7rem);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.05;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.display-description {
    max-width: 500px;
    margin: 20px 0 30px;
    color: #b7b1aa;
    font-size: 1rem;
    line-height: 1.8;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.feature-display.changing .display-icon,
.feature-display.changing h3,
.feature-display.changing .display-description {
    opacity: 0;
    transform: translateY(10px);
}

.display-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    color: #8f8a84;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.display-footer > span i {
    margin-right: 7px;
    color: #4ad38f;
}

.display-footer a {
    color: var(--gold-light);
}

.display-footer a i {
    margin-left: 7px;
    transition: transform 0.2s ease;
}

.display-footer a:hover i {
    transform: translateX(4px);
}

.feature-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.feature-button {
    position: relative;
    min-height: 82px;
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 13px;
    overflow: hidden;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #aaa49d;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.035), transparent 40%),
        rgba(13, 16, 25, 0.8);
    text-align: left;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: transform 0.24s ease, color 0.24s ease, border-color 0.24s ease, background 0.24s ease, box-shadow 0.24s ease;
}

.feature-button::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(120deg, rgba(126, 25, 34, 0.72), rgba(203, 53, 50, 0.48) 48%, rgba(219, 164, 73, 0.28));
    transition: opacity 0.24s ease;
}

.feature-button > * {
    position: relative;
    z-index: 1;
}

.feature-button > i {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: #c79850;
    background: rgba(255, 255, 255, 0.025);
}

.feature-button span {
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.feature-button small {
    color: rgba(255, 255, 255, 0.25);
    font-size: 0.56rem;
    font-weight: 700;
}

.feature-button:hover {
    color: #eee7de;
    border-color: rgba(223, 170, 83, 0.28);
    transform: translateY(-2px);
}

.feature-button.active {
    color: white;
    border-color: rgba(255, 200, 123, 0.42);
    background: rgba(107, 27, 32, 0.68);
    box-shadow: 0 12px 28px rgba(100, 20, 28, 0.2), inset 0 1px rgba(255, 255, 255, 0.08);
}

.feature-button.active::before {
    opacity: 1;
}

.feature-button.active > i {
    color: var(--gold-light);
    border-color: rgba(255, 227, 166, 0.25);
}

.feature-button.active small {
    color: rgba(255, 255, 255, 0.56);
}

.features-actions {
    width: min(780px, 100%);
    margin: 46px auto 0;
}

.site-footer {
    min-height: 106px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    padding: 20px max(24px, calc((100% - 1180px) / 2));
    border-top: 1px solid var(--line);
    background: #080d18;
}

.site-footer > div {
    display: flex;
    align-items: center;
    gap: 18px;
}

.site-footer img {
    width: 120px;
}

.site-footer p {
    margin: 0;
    color: #ffe39e;
    font-size: 13px
}

.site-footer nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 22px;
}

.site-footer nav a {
    color: #ffe39e;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    transition: color 0.2s ease;
}

.site-footer nav a:hover {
    color: var(--gold-light);
}

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

@keyframes orbFloat {
    0%,
    100% { opacity: 0.65; transform: translate3d(0, 0, 0) scale(0.95); }
    50% { opacity: 1; transform: translate3d(0, -18px, 0) scale(1.06); }
}

@keyframes haloPulse {
    0%,
    100% { opacity: 0.66; transform: scale(0.97); }
    50% { opacity: 1; transform: scale(1.03); }
}

@keyframes haloSpin {
    to { transform: rotate(360deg); }
}

@keyframes scrollBounce {
    0%,
    100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

@media (min-width: 961px) and (max-height: 860px) {
    .hero {
        padding-top: 100px;
        padding-bottom: 70px;
    }

    .logo-stage {
        width: min(390px, 31vw);
    }

    .hero h1 {
        font-size: clamp(2rem, 3.25vw, 3.65rem);
    }

    .hero-description {
        margin-top: 10px;
        font-size: 0.86rem;
    }

    .countdown-shell {
        margin-top: 13px;
        padding-block: 10px;
    }

    .countdown-heading {
        margin-bottom: 6px;
        padding-bottom: 6px;
    }

    .hero-actions {
        margin-top: 10px;
    }

    .gradient-button {
        min-height: 58px;
    }

    .button-icon {
        width: 38px;
        height: 38px;
    }

    .hero-socials {
        margin-top: 9px;
    }
}

@media (max-width: 1120px) {
    .header-shell {
        grid-template-columns: 150px 1fr auto;
        gap: 18px;
    }

    .main-nav {
        gap: 19px;
    }

    .main-nav a {
        font-size: 0.68rem;
    }

    .feature-console {
        grid-template-columns: 1fr;
    }

    .feature-display {
        min-height: 430px;
    }

    .display-topline {
        margin-bottom: 35px;
    }
}

@media (max-width: 900px) {
    .site-header {
        top: 10px;
    }

    .header-shell {
        width: calc(100% - 24px);
        min-height: 64px;
        grid-template-columns: 1fr auto auto;
        padding-left: 14px;
    }

    .brand {
        width: 125px;
    }

    .menu-toggle {
        position: relative;
        z-index: 2;
        display: block;
        grid-column: 3;
    }

    .nav-action {
        grid-column: 2;
        grid-row: 1;
        min-width: 132px;
        min-height: 48px;
    }

    .nav-play-menu {
        grid-column: 2;
        grid-row: 1;
    }

    .main-nav {
        position: fixed;
        top: 0;
        right: 0;
        width: min(390px, 88vw);
        height: 100svh;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 108px 38px 38px;
        background:
            radial-gradient(circle at 100% 0%, rgba(164, 34, 38, 0.18), transparent 35%),
            rgba(7, 9, 15, 0.98);
        box-shadow: -25px 0 70px rgba(0, 0, 0, 0.42);
        transform: translateX(104%);
        transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
    }

    .main-nav.open {
        transform: none;
    }

    .main-nav::before {
        content: "MARKMT2";
        margin-bottom: 20px;
        color: #665f5b;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.24em;
    }

    .main-nav a {
        padding: 18px 0;
        border-bottom: 1px solid var(--line);
        font-size: 0.78rem;
    }

    .main-nav a::after {
        display: none;
    }

    .menu-toggle.active span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .hero {
        min-height: auto;
        padding-top: 118px;
    }
}

@media (max-width: 640px) {
    :root {
        --shell: calc(100% - 30px);
    }

    .header-shell {
        grid-template-columns: 1fr auto;
    }

    .nav-action {
        display: none;
    }

    .nav-play-menu {
        display: none;
    }

    .nav-mobile-platforms {
        display: grid;
        gap: 9px;
        margin-top: 24px;
    }

    .main-nav .nav-platform-link {
        min-height: 60px;
        padding: 9px 11px;
        border: 1px solid rgba(223, 170, 83, 0.2);
        letter-spacing: 0;
        text-transform: none;
    }

    .main-nav .nav-platform-link::after {
        display: none;
    }

    .main-nav .nav-platform-link:hover,
    .main-nav .nav-platform-link:focus-visible {
        transform: none;
    }

    .menu-toggle {
        grid-column: 2;
    }

    .hero {
        min-height: 100svh;
        padding: 106px 15px 74px;
    }

    .hero-media {
        background-position: 62% 8%;
    }

    .hero-video {
        object-position: 62% 8%;
    }

    .hero-eyebrow {
        gap: 9px;
        font-size: 0.52rem;
        line-height: 1.5;
    }

    .hero-eyebrow span {
        width: 24px;
    }

    .logo-stage {
        width: min(330px, 92vw);
    }

    .logo-halo {
        width: 74%;
    }

    .server-type {
        gap: 8px;
        font-size: 0.54rem;
        letter-spacing: 0.15em;
    }

    .hero h1 {
        font-size: clamp(2.1rem, 10.8vw, 3.2rem);
    }

    .hero-description {
        max-width: 370px;
        font-size: 0.82rem;
        line-height: 1.6;
    }

    .countdown-shell {
        margin-top: 17px;
        padding: 12px 10px;
    }

    .countdown-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .server-since {
        grid-template-columns: auto 1fr;
        gap: 12px;
    }

    .server-since-mark {
        width: 42px;
        height: 42px;
    }

    .server-since-copy strong {
        font-size: 1.1rem;
    }

    .server-since-copy small {
        font-size: 0.45rem;
        line-height: 1.5;
    }

    .server-live {
        display: none;
    }

    .hero-actions,
    .features-actions {
        flex-direction: column;
    }

    .gradient-button {
        width: 100%;
        min-height: 62px;
        flex: none;
    }

    .hero-socials {
        margin-top: 12px;
    }

    .scroll-down {
        display: none;
    }

    .general-features {
        padding: 90px 0 80px;
    }

    .section-heading {
        margin-bottom: 42px;
    }

    .section-heading > p:first-child {
        font-size: 0.52rem;
    }

    .section-heading > p:first-child span {
        width: 24px;
    }

    .section-heading h2 {
        font-size: clamp(2.5rem, 13vw, 4rem);
    }

    .heading-description {
        font-size: 0.82rem;
    }

    .feature-display {
        min-height: 440px;
        padding: 27px 22px;
    }

    .display-topline {
        margin-bottom: 32px;
    }

    .display-status {
        font-size: 0.5rem;
    }

    .display-icon {
        width: 64px;
        height: 64px;
        font-size: 1.3rem;
    }

    .feature-display h3 {
        font-size: 2.25rem;
    }

    .display-description {
        font-size: 0.9rem;
    }

    .display-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 11px;
    }

    .feature-buttons {
        grid-template-columns: 1fr;
    }

    .feature-button {
        min-height: 70px;
    }

    .features-actions {
        margin-top: 34px;
    }

    .site-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 22px;
        padding-block: 30px;
    }

    .site-footer > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .site-footer nav {
        justify-content: flex-start;
        gap: 14px 20px;
    }
}

/* NPC scene refinements */
.npc-section.scene-flow {
    --scene-flow-overlap: 72px;
    --scene-flow-padding: 188px;
}

.npc-section::before {
    background:
        linear-gradient(180deg, #080b12 0%, rgba(8, 11, 18, 0.96) 9%, rgba(8, 11, 18, 0.8) 22%, rgba(8, 11, 18, 0.52) 42%, rgba(8, 11, 18, 0.76) 78%, #080b12 100%),
        linear-gradient(90deg, rgba(8, 11, 18, 0.9), transparent 20%, transparent 80%, rgba(8, 11, 18, 0.9)),
        url("../images/characters/npc-bg.webp") center top / cover no-repeat;
    filter: saturate(0.68) brightness(0.62);
}

.npc-section .scene-flow-fade {
    height: 310px;
    bottom: auto;
    background: linear-gradient(180deg, #080b12 0 52px, rgba(8, 11, 18, 0.97) 96px, rgba(8, 11, 18, 0.82) 162px, rgba(8, 11, 18, 0.38) 240px, transparent 100%);
}

.npc-heading {
    text-shadow: 0 3px 16px #000, 0 0 34px rgba(0, 0, 0, 0.94);
}

.npc-heading .ornate-description {
    color: #eadbbd;
    text-shadow: 0 2px 10px #000, 0 0 22px #000;
}

.npc-world {
    min-height: 690px;
}

.npc-world-info {
    position: absolute;
    z-index: 12;
    top: 18px;
    left: 50%;
    margin: 0;
    padding: 11px 18px;
    border: 1px solid rgba(226, 173, 87, 0.32);
    color: #e8d6ae;
    background: linear-gradient(90deg, rgba(8, 12, 19, 0.88), rgba(20, 28, 36, 0.92), rgba(8, 12, 19, 0.88));
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    font: 800 0.64rem/1 "Beaufort for LOL", Georgia, serif;
    letter-spacing: 0.06em;
    white-space: nowrap;
    transform: translateX(-50%);
}

.npc-world-info i {
    margin-right: 7px;
    color: #77cdc7;
}

.npc-actor {
    top: auto;
    bottom: 24px;
    height: 500px;
}

.npc-actor img,
.npc-actor:hover img,
.npc-actor:focus-visible img,
.npc-actor.is-active img {
    width: 720px;
    height: 450px;
    transform: translateX(-50%) scale(1.02);
}

.npc-actor-weaponsmith img,
.npc-actor-weaponsmith:hover img,
.npc-actor-weaponsmith:focus-visible img,
.npc-actor-weaponsmith.is-active img {
    transform: translateX(-50%) scale(1.1);
}

.npc-actor:hover img,
.npc-actor:focus-visible img,
.npc-actor.is-active img {
    filter: brightness(1.05) saturate(1.04) drop-shadow(0 0 19px rgba(118, 203, 197, 0.24)) drop-shadow(0 25px 20px rgba(0, 0, 0, 0.76));
}

.npc-game-name,
.npc-player-name {
    font: 700 10px/1 Tahoma, Arial, sans-serif;
}

.npc-game-name {
    top: 10px;
}

.npc-actor-weaponsmith .npc-game-name {
    top: 72px;
}

.npc-player {
    bottom: -18px;
    width: 565px;
    height: 420px;
}

.npc-player > img,
.npc-player.is-equipped .npc-player-base,
.npc-player.is-equipped .npc-player-equipped {
    transform: scale(1.47);
}

.npc-player-name {
    top: 8px;
}

.npc-player.is-changing::after {
    content: none;
    animation: none;
}

.npc-player.is-changing::before {
    position: absolute;
    z-index: 9;
    top: 7%;
    bottom: 6%;
    left: 50%;
    width: 190px;
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 221, 142, 0.22), rgba(255, 250, 218, 0.88), rgba(255, 179, 71, 0.2), transparent);
    filter: blur(4px);
    mix-blend-mode: screen;
    animation: npc-equip-scan 0.82s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    transform: translateX(-50%) skewX(-8deg);
}

.npc-equip-burst {
    top: 16%;
    left: 50%;
    width: 250px;
    height: 330px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background:
        radial-gradient(circle at 30% 18%, #fff8cc 0 2px, transparent 3px),
        radial-gradient(circle at 68% 31%, #ffce64 0 2px, transparent 3px),
        radial-gradient(circle at 25% 72%, #fff1a2 0 2px, transparent 3px),
        radial-gradient(circle at 77% 81%, #e99a35 0 2px, transparent 3px);
    transform: translateX(-50%);
}

.npc-player.is-changing .npc-equip-burst {
    animation: npc-equip-shards 0.95s ease-out both;
}

.npc-player.is-changing .npc-player-equipped {
    animation: npc-equip-materialize 0.82s cubic-bezier(0.18, 0.8, 0.2, 1) both;
}

@keyframes npc-equip-scan {
    0% { opacity: 0; clip-path: inset(100% 0 0); }
    28% { opacity: 1; }
    100% { opacity: 0; clip-path: inset(0 0 0); }
}

@keyframes npc-equip-shards {
    0% { opacity: 0; transform: translateX(-50%) scale(0.76); filter: blur(0); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: translateX(-50%) scale(1.22); filter: blur(2px); }
}

@keyframes npc-equip-materialize {
    0% { opacity: 0; clip-path: inset(100% 0 0); filter: brightness(2.4) saturate(0.2); }
    46% { opacity: 1; filter: brightness(1.75) saturate(0.65); }
    100% { opacity: 1; clip-path: inset(0 0 0); filter: brightness(1.08) saturate(1.1) drop-shadow(0 0 24px rgba(226, 173, 87, 0.24)) drop-shadow(0 26px 22px rgba(0, 0, 0, 0.78)); }
}

.npc-store-preview {
    position: absolute;
    z-index: 10;
    bottom: 58px;
    left: 67%;
    width: 218px;
    margin: 0;
    opacity: 1;
    filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.72));
    transform: translateX(-50%);
    transition: left 0.34s ease, opacity 0.22s ease, transform 0.34s ease;
    pointer-events: none;
}

.npc-world[data-active-npc="armorer"] .npc-store-preview { left: 29%; }
.npc-world[data-active-npc="seller"] .npc-store-preview { left: 67%; }
.npc-world[data-active-npc="weaponsmith"] .npc-store-preview { left: 71%; }

.npc-store-preview.is-changing {
    animation: npc-shop-window-in 0.32s ease both;
}

.npc-store-preview img {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: auto;
}

.npc-store-preview figcaption {
    display: none;
}

@keyframes npc-shop-window-in {
    from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.97); }
    to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.npc-equip-button {
    position: absolute;
    z-index: 13;
    bottom: 18px;
    left: 50%;
    min-width: 242px;
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid rgba(106, 203, 153, 0.52);
    color: #f2f8f2;
    background: linear-gradient(110deg, #173e2b, #2b7450 48%, #163b29 100%);
    background-size: 200% 100%;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.08);
    font: 900 0.67rem/1 "Beaufort for LOL", Georgia, serif;
    letter-spacing: 0.07em;
    cursor: pointer;
    transform: translateX(-50%);
    transition: background-position 0.28s ease, filter 0.2s ease;
}

.npc-equip-button:hover,
.npc-equip-button:focus-visible {
    background-position: 100% 0;
    filter: brightness(1.14);
}

.npc-equip-button.is-complete {
    border-color: rgba(226, 173, 87, 0.56);
    color: #ffe6aa;
    background: linear-gradient(110deg, #533218, #936024 50%, #4b2c16);
}

@media (max-width: 1100px) {
    .npc-world { min-height: 640px; }
    .npc-actor { bottom: 32px; height: 430px; }
    .npc-actor img,
    .npc-actor:hover img,
    .npc-actor:focus-visible img,
    .npc-actor.is-active img { width: 590px; height: 410px; }
    .npc-player { bottom: -8px; width: 500px; height: 390px; }
    .npc-player > img,
    .npc-player.is-equipped .npc-player-base,
    .npc-player.is-equipped .npc-player-equipped { transform: scale(1.42); }
    .npc-store-preview { width: 190px; }
}

@media (max-width: 700px) {
    .npc-section.scene-flow {
        --scene-flow-overlap: 42px;
        --scene-flow-padding: 132px;
    }
    .npc-world { min-height: 590px; }
    .npc-world-info {
        top: 12px;
        max-width: calc(100% - 24px);
        padding: 9px 12px;
        font-size: 0.55rem;
        white-space: normal;
        text-align: center;
    }
    .npc-actor { bottom: 244px; height: 255px; }
    .npc-actor img,
    .npc-actor:hover img,
    .npc-actor:focus-visible img,
    .npc-actor.is-active img { width: 350px; height: 270px; }
    .npc-actor-weaponsmith img,
    .npc-actor-weaponsmith:hover img,
    .npc-actor-weaponsmith:focus-visible img,
    .npc-actor-weaponsmith.is-active img { transform: translateX(-50%) scale(1.08); }
    .npc-game-name { top: 7px; }
    .npc-actor-weaponsmith .npc-game-name { top: 45px; }
    .npc-player { bottom: 56px; width: 430px; height: 330px; }
    .npc-player > img,
    .npc-player.is-equipped .npc-player-base,
    .npc-player.is-equipped .npc-player-equipped { transform: scale(1.35); }
    .npc-player-name { top: 18px; }
    .npc-store-preview,
    .npc-world[data-active-npc="armorer"] .npc-store-preview,
    .npc-world[data-active-npc="seller"] .npc-store-preview,
    .npc-world[data-active-npc="weaponsmith"] .npc-store-preview {
        bottom: 64px;
        left: 76%;
        width: 128px;
    }
    .npc-equip-button {
        bottom: 12px;
        min-width: 210px;
        min-height: 42px;
    }
}

/* Oyuna başlangıç — interactive inventory */
.game-start {
    --start-gold: #e1aa4e;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: -124px;
    padding: 140px 0 92px;
    background: linear-gradient(180deg, #080b12 0, rgba(8, 11, 18, 0.78) 84px, #090d16 178px, #080b12 100%);
}

.game-start::before,
.game-start::after,
.game-start-backdrop {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.game-start::before {
    z-index: -3;
    background:
        linear-gradient(180deg, rgba(8, 11, 18, 0) 0, rgba(8, 11, 18, 0.5) 130px, rgba(8, 11, 18, 0.84) 270px, rgba(8, 11, 18, 0.94) 100%),
        linear-gradient(90deg, #080b12 0%, transparent 17%, transparent 83%, #080b12 100%),
        url("../images/characters/baslangic-bg.webp") center 20% / cover no-repeat;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0, rgba(0, 0, 0, 0.9) 62px, #000 138px);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0, rgba(0, 0, 0, 0.9) 62px, #000 138px);
}

.game-start::after {
    z-index: -2;
    background:
        radial-gradient(circle at 39% 34%, rgba(225, 170, 78, 0.13), transparent 28%),
        linear-gradient(180deg, transparent 54%, rgba(8, 11, 18, 0.58) 74%, #080b12 100%);
}

.game-start-backdrop {
    z-index: -1;
    opacity: 0.22;
    background-image: linear-gradient(120deg, transparent 0 46%, rgba(225, 170, 78, 0.09) 50%, transparent 54%);
    background-size: 720px 100%;
}

.game-start-heading {
    margin-bottom: 38px;
}

.game-start-stage {
    position: relative;
    min-height: 755px;
    border: 1px solid rgba(207, 154, 69, 0.3);
    border-bottom: 0;
    background: #080c14;
    box-shadow: 0 34px 100px rgba(0, 0, 0, 0.52), inset 0 0 90px rgba(0, 0, 0, 0.34);
}

.game-start-stage::before,
.game-start-stage::after {
    content: "";
    position: absolute;
    z-index: 3;
    pointer-events: none;
}

.game-start-stage::before {
    inset: 0;
    border: 1px solid rgba(255, 220, 147, 0.05);
    clip-path: polygon(0 0, 22% 0, 22% 1px, 78% 1px, 78% 0, 100% 0, 100% 100%, 0 100%);
}

.game-start-stage::after {
    inset: auto 0 0;
    height: 170px;
    background: linear-gradient(180deg, transparent, rgba(5, 8, 14, 0.9));
}

.game-start-scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(4, 7, 13, 0.52), rgba(4, 7, 13, 0.05) 45%, rgba(4, 7, 13, 0.34)),
        linear-gradient(180deg, rgba(6, 9, 15, 0.08), rgba(6, 9, 15, 0.14) 52%, rgba(6, 9, 15, 0.58)),
        url("../images/characters/baslangic-bg.webp") center center / cover no-repeat;
}

.game-start-character {
    --start-effect-color: #f0bf68;
    --start-effect-soft: rgba(240, 191, 104, 0.42);
    position: absolute;
    z-index: 2;
    left: clamp(72px, 12vw, 180px);
    bottom: -50px;
    width: min(730px, 56vw);
    aspect-ratio: 784 / 589;
    transform: scale(2);
    transform-origin: center bottom;
    filter: drop-shadow(0 28px 22px rgba(0, 0, 0, 0.7));
}

.game-start-character::before {
    content: "";
    position: absolute;
    z-index: 3;
    left: 29%;
    top: 18%;
    width: 34%;
    height: 63%;
    border: 1px solid rgba(255, 203, 104, 0.76);
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 20px rgba(255, 183, 66, 0.5), inset 0 0 25px rgba(203, 67, 38, 0.28);
    pointer-events: none;
}

.game-start-character.is-equipping::before {
    animation: start-equip-ring 0.76s cubic-bezier(0.16, 1, 0.3, 1);
}

.game-start-character > img:not(.game-start-character-sword) {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    transition: opacity 0.42s ease, transform 0.55s cubic-bezier(0.2, 0.75, 0.2, 1), filter 0.42s ease;
}


.game-start-character-base {
    opacity: 1;
}

.game-start-character-equipped {
    opacity: 0;
    transform: translateY(5px) scale(0.99);
    filter: brightness(1.08) saturate(1.06);
}

.game-start-character.is-equipped .game-start-character-base {
    opacity: 0;
    transform: scale(1.015);
}

.game-start-character.is-equipped .game-start-character-equipped {
    opacity: 1;
    transform: none;
}

.game-start-equip-flash {
    position: absolute;
    z-index: 5;
    left: 35%;
    top: 48%;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 22px 12px rgba(255, 205, 111, 0.86), 0 0 80px 42px rgba(205, 72, 40, 0.34);
}

.game-start-character.is-equipping .game-start-equip-flash {
    animation: start-equip-flash 0.72s ease-out;
}

.game-start-use-effect {
    position: absolute;
    z-index: 7;
    inset: 16% 28% 8% 25%;
    opacity: 0;
    pointer-events: none;
}

.game-start-use-effect::before,
.game-start-use-effect img,
.game-start-use-effect i,
.game-start-use-effect b,
.game-start-use-effect em {
    position: absolute;
    content: "";
    pointer-events: none;
}

.game-start-use-effect img {
    z-index: 3;
    left: 24%;
    top: 66%;
    width: 22px;
    height: 22px;
    object-fit: contain;
    image-rendering: pixelated;
    opacity: 0;
    filter: drop-shadow(0 0 7px var(--start-effect-color));
}

.game-start-use-effect::before {
    inset: 8% 4%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--start-effect-soft) 0, transparent 66%);
}

.game-start-use-effect i {
    inset: 10% 7%;
    border: 2px solid var(--start-effect-color);
    border-radius: 50%;
    box-shadow: 0 0 18px var(--start-effect-soft), inset 0 0 24px var(--start-effect-soft);
}

.game-start-use-effect b {
    top: 7%;
    bottom: 7%;
    left: 50%;
    width: 3px;
    background: linear-gradient(180deg, transparent, var(--start-effect-color), transparent);
    box-shadow: 0 0 12px var(--start-effect-color);
    transform: translateX(-50%);
}

.game-start-use-effect em {
    top: 23%;
    left: 28%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--start-effect-color);
    box-shadow: 34px -18px var(--start-effect-color), 58px 18px var(--start-effect-color), 12px 62px var(--start-effect-color), 50px 84px var(--start-effect-color), -10px 96px var(--start-effect-color);
}

.game-start-character.is-using-item .game-start-use-effect {
    animation: start-item-aura 0.82s ease-out;
}

.game-start-character.is-using-item .game-start-use-effect i {
    animation: start-item-ring 0.82s cubic-bezier(0.16, 1, 0.3, 1);
}

.game-start-character.is-using-item .game-start-use-effect b {
    animation: start-item-beam 0.72s ease-out;
}

.game-start-character.is-using-item .game-start-use-effect em {
    animation: start-item-particles 0.82s ease-out;
}

.game-start-character.is-using-item:is([data-start-effect="heal"], [data-start-effect="mana"], [data-start-effect="speed"], [data-start-effect="haste"]) .game-start-use-effect img {
    animation: start-potion-drink 0.82s cubic-bezier(0.2, 0.72, 0.22, 1);
}

.game-start-character:is([data-start-effect="heal"], [data-start-effect="mana"], [data-start-effect="speed"], [data-start-effect="haste"]) .game-start-use-effect::before {
    inset: 12% 21% 42%;
    background: radial-gradient(circle, var(--start-effect-soft), transparent 68%);
}

.game-start-character:is([data-start-effect="heal"], [data-start-effect="mana"], [data-start-effect="speed"], [data-start-effect="haste"]) .game-start-use-effect i {
    inset: 22% 25% 36%;
    border-width: 2px;
    border-radius: 50%;
    box-shadow: 0 0 20px var(--start-effect-soft), inset 0 0 18px var(--start-effect-soft);
}

.game-start-character:is([data-start-effect="heal"], [data-start-effect="mana"], [data-start-effect="speed"], [data-start-effect="haste"]) .game-start-use-effect b {
    top: 28%;
    bottom: 34%;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--start-effect-color), transparent);
    box-shadow: 0 0 10px var(--start-effect-color), -8px 12px 0 -1px var(--start-effect-soft), 8px 22px 0 -1px var(--start-effect-soft);
}

.game-start-character:is([data-start-effect="heal"], [data-start-effect="mana"], [data-start-effect="speed"], [data-start-effect="haste"]) .game-start-use-effect em {
    top: 26%;
    left: 39%;
    box-shadow: 18px -12px var(--start-effect-color), 36px 8px var(--start-effect-color), 8px 34px var(--start-effect-color), 30px 48px var(--start-effect-color), -4px 54px var(--start-effect-color);
}

.game-start-character[data-start-effect="wind"] .game-start-use-effect::before {
    background: linear-gradient(90deg, transparent, var(--start-effect-soft), transparent);
}

.game-start-character[data-start-effect="wind"] .game-start-use-effect i {
    border-style: dashed;
}

.game-start-character[data-start-effect="wind"] .game-start-use-effect b {
    top: 28%;
    right: -20%;
    bottom: auto;
    left: -20%;
    width: auto;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--start-effect-color), transparent);
    box-shadow: 0 28px 0 var(--start-effect-soft), 0 56px 0 var(--start-effect-soft);
    transform: none;
}

.game-start-character[data-start-effect="critical"] .game-start-use-effect b,
.game-start-character[data-start-effect="pierce"] .game-start-use-effect b {
    --start-slash-angle: -34deg;
    top: 50%;
    right: -8%;
    bottom: auto;
    left: -8%;
    width: auto;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--start-effect-color) 24% 76%, transparent);
    transform: rotate(var(--start-slash-angle));
}

.game-start-character[data-start-effect="pierce"] .game-start-use-effect b {
    --start-slash-angle: 18deg;
}

.game-start-character.is-using-item[data-start-effect="wind"] .game-start-use-effect b {
    animation: start-item-wind 0.72s ease-out;
}

.game-start-character.is-using-item[data-start-effect="critical"] .game-start-use-effect b,
.game-start-character.is-using-item[data-start-effect="pierce"] .game-start-use-effect b {
    animation: start-item-slash 0.68s cubic-bezier(0.16, 1, 0.3, 1);
}

.game-start-character[data-start-effect="loot"] .game-start-use-effect i,
.game-start-character[data-start-effect="teleport"] .game-start-use-effect i,
.game-start-character[data-start-effect="bonus"] .game-start-use-effect i,
.game-start-character[data-start-effect="support"] .game-start-use-effect i {
    border-width: 3px;
    box-shadow: 0 0 0 7px transparent, 0 0 18px var(--start-effect-color), inset 0 0 28px var(--start-effect-soft);
}

.game-start-character[data-start-effect="teleport"] .game-start-use-effect i {
    border-style: double;
    border-width: 6px;
}

.game-start-character[data-start-effect="loot"] .game-start-use-effect::before {
    inset: 56% 8% 0;
    background: radial-gradient(ellipse at center bottom, var(--start-effect-soft), transparent 70%);
}

.game-start-character[data-start-effect="loot"] .game-start-use-effect i {
    inset: 58% 18% 2%;
    border-radius: 50% 50% 12% 12%;
}

.game-start-character[data-start-effect="revive"] .game-start-use-effect::before {
    inset: 2% -8%;
    background: radial-gradient(circle, rgba(255, 215, 106, 0.58), rgba(222, 151, 31, 0.16) 42%, transparent 70%);
}

.game-start-character[data-start-effect="revive"] .game-start-use-effect > img {
    display: none;
}

.game-start-character[data-start-effect="revive"] .game-start-use-effect i {
    inset: 8% 5%;
    border: 2px solid rgba(255, 215, 106, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 28px rgba(247, 190, 62, 0.54), inset 0 0 34px rgba(255, 222, 119, 0.34);
}

.game-start-character[data-start-effect="revive"] .game-start-use-effect b {
    top: 10%;
    bottom: 8%;
    width: 3px;
    background: linear-gradient(180deg, transparent, #ffe08b 32%, #d89422 72%, transparent);
    box-shadow: 0 0 14px rgba(255, 206, 82, 0.86);
}

.game-start-character[data-start-effect="revive"] .game-start-use-effect i::before,
.game-start-character[data-start-effect="revive"] .game-start-use-effect i::after {
    position: absolute;
    z-index: 4;
    opacity: 0;
}

.game-start-character[data-start-effect="revive"] .game-start-use-effect i::before {
    content: "\f6d5";
    left: 50%;
    top: 50%;
    color: #ffd96f;
    font: 900 68px/1 "Font Awesome 6 Free";
    text-shadow: 0 0 9px #fff0a9, 0 0 24px rgba(238, 165, 32, 0.88);
    transform: translate(-50%, -50%);
}

.game-start-character[data-start-effect="revive"] .game-start-use-effect i::after {
    content: "";
    inset: 13%;
    border: 2px dashed rgba(255, 218, 117, 0.78);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(255, 203, 73, 0.48);
}

.game-start-character.is-using-item[data-start-effect="revive"] .game-start-use-effect i::before {
    animation: start-dragon-rise 1.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.game-start-character.is-using-item[data-start-effect="revive"] .game-start-use-effect i::after {
    animation: start-dragon-orbit 1.22s ease-out;
}

.game-start-character.is-using-item[data-start-effect="revive"] .game-start-use-effect i {
    animation-duration: 1.22s;
}

.game-start-character[data-start-effect="detector"] .game-start-use-effect i {
    inset: 18% 8% 12%;
    border: 2px solid var(--start-effect-color);
    border-radius: 50%;
    background: repeating-radial-gradient(circle, transparent 0 18%, var(--start-effect-soft) 19% 20%);
}

.game-start-character[data-start-effect="detector"] .game-start-use-effect b {
    top: 50%;
    bottom: auto;
    left: 50%;
    width: 42%;
    height: 2px;
    transform-origin: left center;
    background: linear-gradient(90deg, var(--start-effect-color), transparent);
}

.game-start-character.is-using-item[data-start-effect="detector"] .game-start-use-effect b {
    animation: start-detector-sweep 0.82s linear;
}

.game-start-character.is-using-item[data-start-effect="teleport"] .game-start-use-effect i {
    animation: start-teleport-ring 0.82s ease-out;
}

@keyframes start-equip-flash {
    0% { opacity: 0; transform: scale(0.2); }
    34% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(2.8); }
}

@keyframes start-equip-ring {
    0% { opacity: 0; transform: scale(0.48) rotate(-8deg); }
    28% { opacity: 0.9; }
    100% { opacity: 0; transform: scale(1.22) rotate(4deg); }
}

@keyframes start-item-aura {
    0% { opacity: 0; transform: scale(0.72); }
    24% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.18); }
}

@keyframes start-item-ring {
    0% { opacity: 0; transform: scale(0.42) rotate(-24deg); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.22) rotate(42deg); }
}

@keyframes start-item-beam {
    0% { opacity: 0; transform: translateX(-50%) scaleY(0.2); }
    34% { opacity: 1; }
    100% { opacity: 0; transform: translateX(-50%) scaleY(1.2); }
}

@keyframes start-item-particles {
    0% { opacity: 0; transform: translateY(24px) scale(0.6); }
    28% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-38px) scale(1.18); }
}

@keyframes start-item-wind {
    0% { opacity: 0; transform: translateX(-36px) scaleX(0.35); }
    32% { opacity: 1; }
    100% { opacity: 0; transform: translateX(42px) scaleX(1.08); }
}

@keyframes start-item-slash {
    0% { opacity: 0; transform: rotate(var(--start-slash-angle)) scaleX(0.08); }
    34% { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--start-slash-angle)) scaleX(1.18); }
}

@keyframes start-potion-drink {
    0% { opacity: 0; transform: translate(-8px, 18px) rotate(-20deg) scale(0.72); }
    24% { opacity: 1; }
    58% { opacity: 1; transform: translate(43px, -105px) rotate(28deg) scale(1); }
    100% { opacity: 0; transform: translate(48px, -112px) rotate(40deg) scale(0.72); }
}

@keyframes start-detector-sweep {
    0% { opacity: 0; transform: rotate(-80deg); }
    18% { opacity: 1; }
    100% { opacity: 0; transform: rotate(280deg); }
}

@keyframes start-teleport-ring {
    0% { opacity: 0; transform: scale(0.32) rotate(-80deg); }
    32% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.28) rotate(180deg); }
}

@keyframes start-dragon-rise {
    0% { opacity: 0; transform: translate(-50%, -28%) scale(0.38) rotate(-16deg); }
    30% { opacity: 1; }
    68% { opacity: 1; transform: translate(-50%, -54%) scale(1.04) rotate(4deg); }
    100% { opacity: 0; transform: translate(-50%, -72%) scale(1.24) rotate(10deg); }
}

@keyframes start-dragon-orbit {
    0% { opacity: 0; transform: scale(0.42) rotate(-80deg); }
    28% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.24) rotate(140deg); }
}

.game-start-status {
    --notice-accent: #d8a34d;
    --notice-soft: rgba(216, 163, 77, 0.12);
    position: absolute;
    z-index: 9;
    left: 24px;
    bottom: 20px;
    display: grid;
    width: min(410px, calc(100% - 48px));
    min-height: 62px;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    padding: 10px 15px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--notice-accent), transparent 54%);
    color: #e8dfcf;
    background: linear-gradient(112deg, rgba(12, 16, 24, 0.95), rgba(6, 9, 15, 0.94));
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.46), inset 0 0 28px var(--notice-soft);
    transform-origin: left bottom;
}

.game-start-status > i {
    position: relative;
    display: block;
    width: 27px;
    height: 27px;
    margin-left: 5px;
    border: 1px solid color-mix(in srgb, var(--notice-accent), transparent 48%);
    background: var(--notice-soft);
    box-shadow: 0 0 18px var(--notice-soft);
    transform: rotate(45deg);
}

.game-start-status > i::before,
.game-start-status > i::after {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid var(--notice-accent);
}

.game-start-status > i::after {
    inset: 11px;
    border: 0;
    background: var(--notice-accent);
}

.game-start-status.is-equipped {
    --notice-accent: #83d59a;
    --notice-soft: rgba(80, 171, 105, 0.13);
}

.game-start-status.is-removed {
    --notice-accent: #e8a55d;
    --notice-soft: rgba(183, 93, 39, 0.13);
}

.game-start-status.is-moved {
    --notice-accent: #72c9c5;
    --notice-soft: rgba(67, 161, 158, 0.13);
}

.game-start-status.is-used {
    --notice-accent: #c89af0;
    --notice-soft: rgba(140, 85, 190, 0.14);
}

.game-start-status > div {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.game-start-status strong {
    color: var(--notice-accent);
    font: 700 0.82rem/1 var(--font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.game-start-status small {
    overflow: hidden;
    color: #9ca5b1;
    font: 400 0.67rem/1.25 var(--font);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-start-status > span {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--notice-accent), transparent);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
}

.game-start-status.is-notifying {
    animation: start-notice-pop 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

.game-start-status.is-notifying > span {
    opacity: 0.86;
    animation: start-notice-progress 3.2s linear forwards;
}

@keyframes start-notice-pop {
    0% { opacity: 0; transform: translateY(10px) scale(0.97); }
    100% { opacity: 1; transform: none; }
}

@keyframes start-notice-progress {
    0% { transform: scaleX(1); }
    100% { transform: scaleX(0); }
}

.metin-inventory {
    position: absolute;
    z-index: 8;
    top: 50%;
    right: clamp(42px, 8vw, 132px);
    width: 242px;
    height: 723px;
    transform: translate(var(--inventory-x), calc(-50% + var(--inventory-y))) scale(0.78);
    transform-origin: center;
    filter: drop-shadow(0 28px 30px rgba(0, 0, 0, 0.72));
    touch-action: none;
    user-select: none;
}

.metin-inventory.is-dragging {
    z-index: 12;
    filter: drop-shadow(0 34px 38px rgba(0, 0, 0, 0.82)) brightness(1.08);
}

.metin-inventory > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.metin-inventory-handle {
    position: absolute;
    z-index: 6;
    left: 26px;
    top: 15px;
    width: 190px;
    height: 26px;
    border: 0;
    color: #f3ddbb;
    background: transparent;
    cursor: grab;
    font: 700 0.66rem/1 var(--font);
    letter-spacing: 0.14em;
}

.metin-inventory-handle span {
    opacity: 0;
}

.metin-inventory-handle i {
    position: absolute;
    right: 8px;
    top: 7px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.metin-inventory:hover .metin-inventory-handle i,
.metin-inventory.is-dragging .metin-inventory-handle i {
    opacity: 0.72;
}

.metin-inventory-handle:active {
    cursor: grabbing;
}

.metin-equipment-slot {
    position: absolute;
    z-index: 3;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
}

.metin-weapon-slot {
    left: 31px;
    top: 76px;
    width: 38px;
    height: 76px;
}

.metin-shoes-slot {
    left: 31px;
    top: 204px;
    width: 38px;
    height: 40px;
}

.metin-glove-slot {
    left: 126px;
    top: 204px;
    width: 38px;
    height: 40px;
}

.metin-equipment-slot.is-over,
.metin-equipment-slot.has-item {
    border-color: rgba(255, 203, 111, 0.8);
    background: rgba(220, 148, 48, 0.14);
    box-shadow: inset 0 0 18px rgba(244, 178, 64, 0.3), 0 0 16px rgba(244, 178, 64, 0.28);
}

.metin-equipment-slot.has-item {
    border-color: rgba(125, 216, 156, 0.42);
    background: rgba(62, 151, 92, 0.08);
    box-shadow: inset 0 0 14px rgba(70, 174, 106, 0.16);
}

.metin-inventory-grid {
    position: absolute;
    z-index: 4;
    left: 21px;
    top: 317px;
    display: grid;
    width: 200px;
    height: 360px;
    grid-template-columns: repeat(5, 40px);
    grid-template-rows: repeat(9, 40px);
}

.metin-grid-cell {
    align-self: center;
    justify-self: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
}

.metin-grid-cell.is-over {
    border-color: rgba(255, 203, 111, 0.62);
    background: rgba(220, 148, 48, 0.12);
    box-shadow: inset 0 0 12px rgba(244, 178, 64, 0.22);
}

.metin-grid-cell.is-invalid {
    border-color: rgba(232, 82, 75, 0.82);
    background: rgba(176, 40, 36, 0.22);
    box-shadow: inset 0 0 13px rgba(232, 82, 75, 0.28);
}

.metin-grid-cell.is-footprint-start {
    border-bottom-color: rgba(255, 203, 111, 0.28);
}

.metin-grid-cell.is-footprint-end {
    border-top-color: rgba(255, 203, 111, 0.28);
}

.metin-start-item {
    position: absolute;
    z-index: 5;
    left: var(--item-left);
    top: var(--item-top);
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: left 0.48s cubic-bezier(0.2, 0.75, 0.2, 1), top 0.48s cubic-bezier(0.2, 0.75, 0.2, 1), opacity 0.24s ease, transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease;
}

.metin-start-item.is-tall {
    height: 64px;
    cursor: grab;
}

.metin-start-item[draggable="true"] {
    cursor: grab;
}

.metin-start-item.is-dragging {
    opacity: 0.38;
    cursor: grabbing;
}

.metin-start-item:hover,
.metin-start-item:focus-visible {
    box-shadow: inset 0 0 14px rgba(245, 180, 68, 0.2), 0 0 14px rgba(245, 180, 68, 0.22);
}

.metin-start-item:active {
    transform: scale(0.9);
}

.metin-start-item.is-tall:active {
    cursor: grabbing;
}

.metin-start-item.is-equipped {
    left: 34px;
    top: 82px;
}

.metin-start-item.is-equipped-shoes {
    left: 34px;
    top: 208px;
}

.metin-start-item.is-equipped-glove {
    left: 129px;
    top: 208px;
}

.metin-start-item img {
    display: block;
    width: 41px;
    height: 41px;
    max-width: none;
    object-fit: contain;
    image-rendering: pixelated;
    pointer-events: none;
    transform: translate(-4.5px, -4.5px);
}

.metin-start-item.is-tall img {
    width: 41px;
    height: 79px;
    object-fit: fill;
    transform: translate(-5px, -7px);
    image-rendering: auto;
}

.metin-start-item.is-purple-potion img {
    filter: hue-rotate(150deg) saturate(1.45) brightness(0.96);
}

.metin-item-count {
    position: absolute;
    z-index: 7;
    right: -5px;
    bottom: -5px;
    min-width: 13px;
    color: #f5f5f0;
    font: 700 9px/1 Tahoma, Arial, sans-serif;
    letter-spacing: 0;
    text-align: right;
    text-shadow: -1px -1px 0 #080808, 1px -1px 0 #080808, -1px 1px 0 #080808, 1px 1px 0 #080808, 0 0 3px #000;
    pointer-events: none;
}

.metin-start-consumable.is-using {
    filter: brightness(1.9) drop-shadow(0 0 8px var(--start-gold));
    transform: scale(1.13);
}

.metin-start-consumable.is-consumed {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.55);
}

.metin-start-item > span {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    width: 260px;
    padding: 10px 12px;
    border: 1px solid rgba(197, 144, 61, 0.44);
    color: #f0d6a1;
    background: rgba(6, 8, 13, 0.95);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transform: translate(6px, -50%);
    transition: opacity 0.2s ease, transform 0.2s ease;
    font: 700 0.88rem/1.35 var(--font);
    white-space: normal;
}

.metin-start-item > span small {
    display: block;
    margin-top: 3px;
    color: rgba(230, 230, 230, 0.56);
    font-size: 0.8rem;
    line-height: 1.45;
}

.metin-start-item:hover > span,
.metin-start-item:focus-visible > span {
    opacity: 1;
    transform: translate(0, -50%);
}

.metin-inventory-note {
    position: absolute;
    left: 50%;
    top: calc(100% + 14px);
    width: max-content;
    color: rgba(224, 222, 214, 0.55);
    transform: translateX(-50%);
    font: 700 0.58rem/1 var(--font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.metin-inventory-note i {
    margin-right: 6px;
    color: var(--start-gold);
}

.game-start-copy {
    position: relative;
    z-index: 3;
    width: 100%;
    margin: -1px auto 0;
    padding: 34px 44px 30px;
    border: 1px solid rgba(221, 169, 80, 0.22);
    border-top: 0;
    background: linear-gradient(180deg, rgba(8, 12, 19, 0.98), rgba(6, 8, 13, 0.98));
    box-shadow: 0 34px 82px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.game-start-copy header > span {
    color: #bc8b46;
    font: 800 0.55rem/1 var(--font);
    letter-spacing: 0.2em;
}

.game-start-copy h3 {
    max-width: 1080px;
    margin: 10px auto 12px;
    color: #ffdda0;
    font: 700 clamp(1.45rem, 2.6vw, 2.25rem)/1.16 var(--font);
}

.game-start-copy header p {
    max-width: 1040px;
    margin: 0 auto 20px;
    color: #c9c0ae;
    font: 400 0.92rem/1.72 var(--font);
}

.game-start-copy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.game-start-copy-grid p {
    display: grid;
    min-height: 118px;
    grid-template-columns: 42px 1fr;
    gap: 15px;
    align-items: center;
    margin: 0;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #aeb5c0;
    background: rgba(255, 255, 255, 0.018);
    font: 400 0.76rem/1.62 var(--font);
    text-align: left;
}

.game-start-copy-grid p + p {
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.game-start-copy-grid i {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(212, 156, 69, 0.36);
    color: #d8a34d;
    background: rgba(185, 120, 31, 0.08);
}

.game-start-motto {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
    border: 1px solid rgba(202, 57, 54, 0.26);
    color: #f0ca82;
    background: linear-gradient(90deg, transparent, rgba(116, 24, 27, 0.28), transparent);
    font: 800 0.72rem/1 var(--font);
    letter-spacing: 0.18em;
}

.game-start-motto i {
    color: #e5675d;
}

@media (max-width: 900px) {
    .game-start {
        margin-top: -90px;
        padding-top: 126px;
    }

    .game-start-stage {
        min-height: 700px;
    }

    .game-start-character {
        left: -44px;
        bottom: -38px;
        width: 680px;
        max-width: 80vw;
        transform: scale(1.8);
    }

    .metin-inventory {
        right: 12px;
        transform: translate(var(--inventory-x), calc(-50% + var(--inventory-y))) scale(0.78);
    }

    .game-start-copy {
        width: 100%;
        padding: 38px 24px 30px;
    }

    .game-start-copy-grid {
        grid-template-columns: 1fr;
    }

    .game-start-copy-grid p + p {
        border-left: 0;
        border-top: 1px solid rgba(215, 164, 78, 0.16);
    }
}

@media (max-width: 600px) {
    .game-start {
        padding-bottom: 62px;
    }

    .game-start-stage {
        min-height: 650px;
    }

    .game-start-character {
        left: 50%;
        bottom: -2px;
        width: 620px;
        max-width: 118vw;
        transform: translateX(-61%) scale(1.85);
    }

    .metin-inventory {
        top: 18px;
        right: 6px;
        transform: translate(var(--inventory-x), var(--inventory-y)) scale(0.78);
        transform-origin: top right;
    }

    .metin-inventory-note {
        display: none;
    }

    .game-start-status {
        left: 18px;
        right: 18px;
        bottom: 16px;
        font-size: 0.56rem;
    }

    .game-start-copy {
        margin-top: -20px;
    }

    .game-start-copy h3 {
        font-size: 1.12rem;
    }

    .game-start-copy-grid p {
        padding: 20px 4px;
        font-size: 0.88rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .game-start-character > img,
    .metin-start-item {
        transition: none;
    }
}

/* Interactive horse quests */
.horse-quests {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 116px 0 104px;
    background: #06101a;
}

.horse-quests::before,
.horse-quests::after,
.horse-quests-backdrop {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
}

.horse-quests-backdrop {
    z-index: -3;
    background:
        linear-gradient(180deg, #06101a 0%, rgba(6, 16, 26, 0.26) 19%, rgba(6, 16, 26, 0.48) 74%, #06101a 100%),
        url("../images/characters/npc-bg.webp") center 30% / cover no-repeat;
    opacity: 0.68;
    filter: saturate(0.72) brightness(0.56);
}

.horse-quests::before {
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(3, 9, 16, 0.88), transparent 23%, transparent 77%, rgba(3, 9, 16, 0.88)),
        linear-gradient(180deg, rgba(11, 31, 49, 0.12), rgba(213, 158, 70, 0.05) 52%, rgba(4, 11, 19, 0.74));
}

.horse-quests::after {
    z-index: -1;
    background: linear-gradient(180deg, #06101a 0, transparent 15%, transparent 86%, #06101a 100%);
}

.horse-quests > .section-shell {
    position: relative;
    z-index: 1;
}

.horse-quests-heading {
    margin-bottom: 42px;
    text-shadow: 0 3px 16px #000, 0 0 34px rgba(0, 0, 0, 0.92);
}

.horse-quests-heading .ornate-description { color: #d8cdbb; }

.horse-quest-stage {
    position: relative;
    min-height: 720px;
    overflow: hidden;
    overflow: clip;
    border: 1px solid rgba(225, 171, 83, 0.32);
    background:
        linear-gradient(180deg, rgba(4, 10, 17, 0.18), rgba(4, 10, 17, 0.12) 50%, rgba(4, 10, 17, 0.9) 100%),
        linear-gradient(90deg, rgba(4, 10, 17, 0.58), transparent 22%, transparent 78%, rgba(4, 10, 17, 0.58)),
        url("../images/characters/npc-bg.webp") center bottom / cover no-repeat;
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.55), inset 0 0 90px rgba(2, 7, 12, 0.46);
}

.horse-stage-shade {
    position: absolute;
    z-index: 0;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(3, 8, 14, 0.14), transparent 47%, rgba(3, 8, 14, 0.72)),
        linear-gradient(90deg, rgba(4, 9, 15, 0.18), transparent 35%, transparent 67%, rgba(4, 9, 15, 0.2));
    pointer-events: none;
}

.horse-quest-stage::after {
    position: absolute;
    z-index: 1;
    right: 4%;
    bottom: -58px;
    left: 4%;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.76), transparent 70%);
    content: "";
    filter: blur(18px);
    pointer-events: none;
}

.horse-quest-hint {
    position: absolute;
    z-index: 15;
    top: 22px;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 40px);
    padding: 11px 16px;
    border: 1px solid rgba(223, 170, 83, 0.32);
    color: #e0d5c4;
    background: rgba(5, 11, 19, 0.92);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.38);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-align: center;
    transform: translateX(-50%);
    white-space: nowrap;
}

.horse-player,
.horse-trainer {
    position: absolute;
    z-index: 4;
    bottom: 40px;
    display: block;
    width: min(64%, 760px);
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    filter: drop-shadow(0 24px 20px rgba(0, 0, 0, 0.62));
}

.horse-player { left: -3%; }

.horse-trainer {
    right: -6%;
    width: min(72%, 850px);
    cursor: pointer;
}

.horse-player > img,
.horse-trainer > img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    transition: filter 240ms ease, transform 240ms ease;
}

.horse-trainer:hover > img,
.horse-trainer:focus-visible > img,
.horse-quest-stage[data-state="offer"] .horse-trainer > img {
    filter: brightness(1.11) drop-shadow(0 0 18px rgba(225, 171, 83, 0.34));
    transform: translateY(-4px);
}

.horse-trainer:focus-visible { outline: 1px solid rgba(235, 188, 106, 0.72); outline-offset: -8px; }
.horse-trainer:disabled { cursor: default; }

.horse-game-name {
    position: absolute;
    z-index: 7;
    top: 8%;
    left: 50%;
    color: #4dff42;
    font: 700 10px/1 Tahoma, Arial, sans-serif;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 4px #000;
    transform: translateX(-50%);
    white-space: nowrap;
}

.horse-trainer-prompt {
    position: absolute;
    z-index: 4;
    right: 12%;
    bottom: 8%;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    min-width: 190px;
    padding: 10px 13px;
    border: 1px solid rgba(226, 171, 81, 0.34);
    color: #ead7af;
    background: rgba(6, 13, 21, 0.92);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.4);
    opacity: 0;
    text-align: center;
    transform: translateY(7px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.horse-trainer:hover .horse-trainer-prompt,
.horse-trainer:focus-visible .horse-trainer-prompt,
.horse-quest-stage[data-state="intro"] .horse-trainer-prompt {
    opacity: 1;
    transform: translateY(0);
}

.horse-trainer-prompt b { font-size: 11px; letter-spacing: 0.05em; }
.horse-trainer-prompt small { color: #8f98a3; font-size: 9px; }

.horse-dialogue {
    position: absolute;
    z-index: 14;
    top: 104px;
    left: 50%;
    width: min(440px, calc(100% - 40px));
    padding: 20px;
    border: 1px solid rgba(222, 168, 80, 0.42);
    color: #c7c0b5;
    background: rgba(6, 12, 20, 0.96);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.62), inset 0 0 34px rgba(202, 145, 57, 0.04);
    transform: translateX(-50%);
    animation: horse-dialogue-in 260ms ease-out both;
}

.horse-dialogue[hidden] { display: none; }
.horse-dialogue header { display: flex; align-items: center; gap: 12px; }
.horse-dialogue header > img { width: 42px; height: 42px; image-rendering: pixelated; }
.horse-dialogue header span { display: grid; gap: 2px; }
.horse-dialogue header small { color: #dca54c; font-size: 9px; font-weight: 900; letter-spacing: 0.16em; }
.horse-dialogue header strong { color: #f0d6a0; font: 700 19px/1.2 "Beaufort for LoL", Georgia, serif; }
.horse-dialogue p { margin: 15px 0 18px; color: #aaa69f; font-size: 13px; line-height: 1.6; }

.horse-dialogue button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 43px;
    border: 1px solid rgba(226, 171, 81, 0.52);
    color: #f0d9ac;
    background: rgba(178, 118, 37, 0.17);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
}

.horse-dialogue button:hover,
.horse-dialogue button:focus-visible { border-color: #e1ae5d; background: rgba(190, 127, 40, 0.28); }
.horse-dialogue button img { width: 28px; height: 28px; image-rendering: pixelated; }

.horse-medals-panel {
    position: absolute;
    z-index: 12;
    bottom: 18px;
    left: 20px;
    display: grid;
    grid-template-columns: 62px 1fr;
    align-items: center;
    gap: 13px;
    width: 270px;
    min-height: 82px;
    padding: 10px 14px 10px 10px;
    border: 1px solid rgba(221, 168, 80, 0.46);
    border-left: 3px solid #dca64d;
    background:
        linear-gradient(90deg, rgba(118, 75, 22, 0.2), transparent 42%),
        rgba(5, 12, 19, 0.94);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5), inset 0 0 26px rgba(210, 153, 61, 0.05);
}

.horse-medals-panel[hidden] { display: none; }

.horse-medals-panel::after {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #68d99b;
    box-shadow: 0 0 10px rgba(104, 217, 155, 0.75);
    content: "";
}

.horse-medals-icon {
    position: relative;
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 1px solid rgba(225, 177, 95, 0.48);
    background: radial-gradient(circle, rgba(191, 132, 43, 0.2), rgba(11, 20, 28, 0.96) 68%);
    box-shadow: inset 0 0 18px rgba(226, 169, 75, 0.1);
}

.horse-medals-icon::before { position: absolute; inset: 4px; border: 1px solid rgba(255, 255, 255, 0.06); content: ""; }
.horse-medals-icon > img { width: 42px; height: 42px; image-rendering: pixelated; filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.55)); }

.horse-medals-copy { display: grid; min-width: 0; gap: 4px; }
.horse-medals-copy small { color: #d7a956; font-size: 8px; font-weight: 900; letter-spacing: 0.13em; }
.horse-medals-copy strong { color: #f0dfbd; font: 700 14px/1.1 "Beaufort for LoL", Georgia, serif; }
.horse-medals-copy em { color: #8ebca2; font: normal 700 8px/1.35 Tahoma, Arial, sans-serif; }
.horse-picture-reward {
    position: absolute;
    z-index: 17;
    top: 42%;
    left: 50%;
    display: grid;
    grid-template-columns: 62px 1fr;
    align-items: center;
    gap: 13px;
    width: 286px;
    min-height: 88px;
    padding: 12px 15px;
    border: 1px solid rgba(240, 194, 105, 0.82);
    color: #f1dcaf;
    background: rgba(9, 15, 21, 0.97);
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.62), inset 3px 0 0 rgba(225, 172, 83, 0.72);
    text-align: left;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.horse-picture-reward[hidden] { display: none; }

.horse-picture-icon {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 1px solid rgba(240, 196, 109, 0.52);
    background: rgba(4, 10, 16, 0.72);
    box-shadow: inset 0 0 18px rgba(226, 171, 78, 0.15);
}

.horse-picture-icon img { width: 43px; height: 43px; image-rendering: pixelated; }
.horse-picture-reward > span:nth-child(2) { display: grid; gap: 4px; }
.horse-picture-reward strong { color: #f3d493; font: 700 17px/1.1 "Beaufort for LoL", Georgia, serif; }
.horse-picture-reward small { color: #aaa59a; font: 700 9px/1.3 Tahoma, Arial, sans-serif; }
.horse-picture-reward:hover,
.horse-picture-reward:focus-visible { border-color: #e2b866; background: rgba(16, 23, 29, 0.98); }

.horse-quest-notice {
    position: absolute;
    z-index: 12;
    right: 20px;
    bottom: 20px;
    display: flex;
    align-items: center;
    width: min(340px, calc(100% - 40px));
    min-height: 61px;
    padding: 10px 14px;
    border: 1px solid rgba(220, 165, 78, 0.27);
    border-left: 3px solid rgba(220, 165, 78, 0.72);
    color: #aeb1b3;
    background: rgba(5, 11, 18, 0.92);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.46);
}

.horse-quest-notice div { display: grid; gap: 3px; }
.horse-quest-notice strong { color: #efd9a9; font-size: 12px; letter-spacing: 0.05em; }
.horse-quest-notice span { color: #9096a1; font-size: 10px; }
.horse-quest-notice.is-success { border-color: rgba(105, 203, 151, 0.44); background: rgba(6, 27, 22, 0.94); }
.horse-quest-notice.is-success { border-left-color: #73d49e; }

.horse-reset {
    position: absolute;
    z-index: 16;
    top: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid rgba(220, 166, 79, 0.36);
    color: #dac89f;
    background: rgba(5, 11, 18, 0.9);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.horse-reset[hidden] { display: none; }
.horse-reset:hover,
.horse-reset:focus-visible { border-color: #e1ac58; color: #f2dbad; }

.horse-flying-medal {
    position: absolute;
    z-index: 20;
    top: var(--medal-start-y);
    left: var(--medal-start-x);
    width: 32px;
    height: 32px;
    pointer-events: none;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 7px rgba(243, 195, 100, 0.86));
    animation: horse-medal-flight 850ms cubic-bezier(0.22, 0.68, 0.28, 1) var(--medal-delay) both;
}

.horse-mount-effect {
    position: absolute;
    z-index: 5;
    top: 10%;
    left: 50%;
    width: 48%;
    aspect-ratio: 1;
    border: 2px solid rgba(244, 205, 116, 0.78);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) scale(0.2);
}

.horse-mount-effect::before,
.horse-mount-effect::after {
    position: absolute;
    inset: 10%;
    border: 1px solid rgba(116, 222, 205, 0.72);
    border-radius: 50%;
    content: "";
}

.horse-mount-effect::after { inset: 25%; border-color: rgba(246, 193, 87, 0.82); }

.horse-mount-effect > i {
    position: absolute;
    top: 48%;
    left: 48%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f6cf7d;
    box-shadow: 0 0 11px #f6cf7d;
}

.horse-mount-effect > i:nth-child(1) { --particle-x: -110px; --particle-y: -80px; }
.horse-mount-effect > i:nth-child(2) { --particle-x: -30px; --particle-y: -126px; }
.horse-mount-effect > i:nth-child(3) { --particle-x: 75px; --particle-y: -102px; }
.horse-mount-effect > i:nth-child(4) { --particle-x: 118px; --particle-y: -18px; }
.horse-mount-effect > i:nth-child(5) { --particle-x: 88px; --particle-y: 82px; }
.horse-mount-effect > i:nth-child(6) { --particle-x: 3px; --particle-y: 122px; }
.horse-mount-effect > i:nth-child(7) { --particle-x: -92px; --particle-y: 74px; }
.horse-mount-effect > i:nth-child(8) { --particle-x: -126px; --particle-y: 4px; }

.horse-quest-stage[data-state="mounting"] .horse-player > img { animation: horse-character-transform 1.18s ease-in-out both; }
.horse-quest-stage[data-state="mounting"] .horse-mount-effect { animation: horse-mount-ring 1.18s cubic-bezier(0.17, 0.74, 0.25, 1) both; }
.horse-quest-stage[data-state="mounting"] .horse-mount-effect::before { animation: horse-mount-spin 900ms linear both; }
.horse-quest-stage[data-state="mounting"] .horse-mount-effect::after { animation: horse-mount-spin-reverse 800ms linear both; }
.horse-quest-stage[data-state="mounting"] .horse-mount-effect > i { animation: horse-mount-particle 900ms ease-out 150ms both; }
.horse-quest-stage[data-state="mounted"] .horse-player > img { animation: horse-mounted-arrival 620ms cubic-bezier(0.16, 0.76, 0.26, 1) both; }

.horse-quests-copy {
    display: grid;
    gap: 22px;
    margin-top: 36px;
}

.horse-quests-copy header { display: grid; gap: 10px; max-width: 980px; margin: 0 auto; text-align: center; }
.horse-quests-copy header > span { color: #d8a34a; font-size: 9px; font-weight: 900; letter-spacing: 0.2em; }
.horse-quests-copy h3 { margin: 0; color: #f0d7a0; font: 700 clamp(1.8rem, 3vw, 2.6rem)/1 "Beaufort for LoL", Georgia, serif; }
.horse-quests-copy header p { max-width: 880px; margin: 0 auto; color: #c9c1b4; font-size: 15px; line-height: 1.7; }

.horse-quests-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.horse-quests-benefits p {
    position: relative;
    display: block;
    min-height: 128px;
    margin: 0;
    padding: 22px 20px 20px 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #b9b5ae;
    background: rgba(255, 255, 255, 0.025);
}

.horse-quests-benefits p::before { position: absolute; top: 20px; bottom: 20px; left: 0; width: 3px; background: currentColor; content: ""; opacity: 0.72; }
.horse-quests-benefits span { display: grid; gap: 6px; }
.horse-quests-benefits strong { color: #eee0c3; font-size: 12px; letter-spacing: 0.04em; }
.horse-quests-benefits small { color: #9c9c99; font-size: 11px; line-height: 1.55; }
.horse-quests-benefits .is-gold { border-color: rgba(220, 164, 73, 0.32); background: rgba(151, 99, 27, 0.09); }
.horse-quests-benefits .is-gold { color: #dfa94f; }
.horse-quests-benefits .is-cyan { border-color: rgba(78, 184, 181, 0.3); background: rgba(29, 119, 119, 0.09); }
.horse-quests-benefits .is-cyan { color: #6fc8c3; }
.horse-quests-benefits .is-green { border-color: rgba(91, 191, 132, 0.3); background: rgba(38, 119, 75, 0.09); }
.horse-quests-benefits .is-green { color: #70cf98; }

.horse-system-notice { display: flex; align-items: center; max-width: 980px; min-height: 76px; margin: 0 auto; padding: 15px 20px; border: 1px solid rgba(103, 134, 213, 0.32); border-left: 3px solid rgba(117, 151, 230, 0.66); color: #aeb8da; background: linear-gradient(90deg, rgba(36, 57, 112, 0.24), rgba(15, 25, 45, 0.64)); box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24); }
.horse-system-notice span { display: grid; gap: 4px; }
.horse-system-notice strong { color: #d6ddf2; font-size: 12px; letter-spacing: 0.04em; }
.horse-system-notice small { color: #929dbb; font-size: 11px; line-height: 1.5; }

@keyframes horse-dialogue-in {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes horse-dialogue-in-mobile {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes horse-medal-flight {
    0% { top: var(--medal-start-y); left: var(--medal-start-x); opacity: 0; transform: translateY(0) rotate(0) scale(0.55); }
    14% { opacity: 1; }
    50% { transform: translateY(calc(var(--medal-arc) * -1)) rotate(210deg) scale(1.18); }
    100% { top: var(--medal-end-y); left: var(--medal-end-x); opacity: 0; transform: translateY(0) rotate(480deg) scale(0.5); }
}

@keyframes horse-character-transform {
    0% { opacity: 1; filter: brightness(1); transform: scale(1); }
    34% { opacity: 0.2; filter: brightness(3.2) saturate(0); transform: scale(0.9); }
    52% { opacity: 0; filter: brightness(4); transform: scale(0.86); }
    72% { opacity: 0.25; filter: brightness(2.7); transform: scale(1.05); }
    100% { opacity: 1; filter: brightness(1); transform: scale(1); }
}

@keyframes horse-mount-ring {
    0% { opacity: 0; transform: translateX(-50%) scale(0.18) rotate(0); }
    25% { opacity: 1; }
    72% { opacity: 0.86; }
    100% { opacity: 0; transform: translateX(-50%) scale(1.45) rotate(150deg); }
}

@keyframes horse-mount-spin { to { transform: rotate(300deg) scale(1.24); opacity: 0; } }
@keyframes horse-mount-spin-reverse { to { transform: rotate(-260deg) scale(1.55); opacity: 0; } }

@keyframes horse-mount-particle {
    from { opacity: 1; transform: translate(0, 0) scale(1); }
    to { opacity: 0; transform: translate(var(--particle-x), var(--particle-y)) scale(0); }
}

@keyframes horse-mounted-arrival {
    from { opacity: 0; filter: brightness(2.4); transform: translateY(18px) scale(0.94); }
    to { opacity: 1; filter: brightness(1); transform: translateY(0) scale(1); }
}

@media (max-width: 980px) {
    .horse-quest-stage { min-height: 690px; }
    .horse-player { left: -5%; width: 70%; }
    .horse-trainer { right: -7%; width: 72%; }
    .horse-dialogue { top: 92px; }
    .horse-quest-notice { width: 290px; }
    .horse-quests-benefits { grid-template-columns: 1fr; }
    .horse-quests-benefits p { min-height: 0; }
}

@media (max-width: 700px) {
    .horse-quests { padding: 88px 0 76px; }
    .horse-quests-heading { margin-bottom: 28px; }
    .horse-quest-stage { min-height: 735px; }
    .horse-quest-hint { top: 12px; padding: 9px 12px; font-size: 10px; white-space: normal; }
    .horse-dialogue {
        top: 70px;
        right: 12px;
        left: 12px;
        width: auto;
        padding: 17px;
        transform: none;
        animation-name: horse-dialogue-in-mobile;
    }
    .horse-dialogue header strong { font-size: 17px; }
    .horse-dialogue p { margin: 12px 0 14px; font-size: 11px; }
    .horse-player { bottom: 188px; left: -27%; width: 102%; }
    .horse-trainer { right: -12%; bottom: 188px; width: 94%; }
    .horse-game-name { top: 5%; font-size: 9px; }
    .horse-trainer-prompt { right: 18%; bottom: 2%; min-width: 150px; grid-template-columns: 1fr; padding: 8px 10px; }
    .horse-trainer-prompt b { font-size: 9px; }
    .horse-trainer-prompt small { font-size: 8px; }
    .horse-medals-panel { right: 12px; bottom: 14px; left: 12px; width: auto; min-height: 68px; grid-template-columns: 52px 1fr; padding: 7px 11px 7px 8px; }
    .horse-medals-icon { width: 48px; height: 48px; }
    .horse-medals-icon > img { width: 36px; height: 36px; }
    .horse-medals-copy strong { font-size: 13px; }
    .horse-quest-notice { right: 12px; bottom: 97px; left: 12px; width: auto; min-height: 56px; padding: 9px 11px; }
    .horse-quest-notice strong { font-size: 10px; }
    .horse-quest-notice span { font-size: 9px; }
    .horse-reset { top: 62px; right: 12px; min-height: 32px; padding: 0 9px; }
    .horse-mount-effect { top: 19%; width: 52%; }
    .horse-picture-reward { top: 43%; width: 280px; min-height: 82px; grid-template-columns: 56px 1fr; padding: 10px 12px; }
    .horse-picture-icon { width: 52px; height: 52px; }
    .horse-picture-reward strong { font-size: 15px; }
    .horse-quests-copy { margin-top: 28px; gap: 16px; }
    .horse-quests-copy header { padding: 0 8px; }
    .horse-quests-copy header p { font-size: 13px; }
    .horse-quests-benefits { gap: 10px; }
    .horse-quests-benefits p { padding: 15px; }
    .horse-system-notice { margin: 0 8px; padding: 13px 14px; }
}

@media (max-width: 420px) {
    .horse-quest-stage { min-height: 700px; }
    .horse-player { bottom: 190px; left: -29%; width: 104%; }
    .horse-trainer { right: -13%; bottom: 190px; width: 96%; }
    .horse-dialogue { top: 68px; }
}

@media (prefers-reduced-motion: reduce) {
    .horse-dialogue,
    .horse-picture-reward,
    .horse-flying-medal,
    .horse-quest-stage[data-state="mounting"] .horse-player > img,
    .horse-quest-stage[data-state="mounting"] .horse-mount-effect,
    .horse-quest-stage[data-state="mounting"] .horse-mount-effect::before,
    .horse-quest-stage[data-state="mounting"] .horse-mount-effect::after,
    .horse-quest-stage[data-state="mounting"] .horse-mount-effect > i,
    .horse-quest-stage[data-state="mounted"] .horse-player > img {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Legal trade — interactive official marketplace */
.legal-trade {
    --legal-accent: #e4ad55;
    --legal-accent-soft: rgba(228, 173, 85, 0.18);
    position: relative;
    z-index: 1;
    isolation: isolate;
    overflow: hidden;
    margin-top: -72px;
    padding: 146px 0 82px;
    color: #f5e7c5;
    background: linear-gradient(180deg, rgba(8, 11, 18, 0) 0, #080b12 150px, #090d16 100%);
}

.legal-trade > .section-shell {
    width: min(1560px, calc(100% - 40px));
}

.legal-trade[data-mode="item"] {
    --legal-accent: #7fc9c6;
    --legal-accent-soft: rgba(86, 181, 178, 0.18);
}

.legal-trade::before,
.legal-trade::after,
.legal-trade-backdrop {
    position: absolute;
    z-index: -2;
    inset: 0;
    content: "";
    pointer-events: none;
}

.legal-trade::before {
    background:
        linear-gradient(180deg, rgba(8, 11, 18, 0) 0, rgba(8, 11, 18, 0.62) 130px, rgba(8, 11, 18, 0.28) 38%, rgba(8, 11, 18, 0.86) 78%, #080b12 100%),
        linear-gradient(90deg, #080b12 0%, transparent 18%, transparent 82%, #080b12 100%),
        url("../images/characters/legal-bg.webp") center / cover no-repeat;
    opacity: 0.72;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 180px);
    mask-image: linear-gradient(180deg, transparent 0, #000 180px);
}

.legal-trade::after {
    z-index: -1;
    background:
        radial-gradient(circle at 50% 34%, var(--legal-accent-soft), transparent 30%),
        linear-gradient(180deg, transparent 55%, rgba(4, 6, 10, 0.84) 90%, #080b12 100%);
    transition: background 0.35s ease;
}

.legal-trade-backdrop {
    opacity: 0.07;
    background: url("../images/bg.jpg") center / cover no-repeat;
}

.legal-heading {
    position: relative;
    z-index: 5;
    margin-bottom: 24px;
}

.legal-heading .ornate-description {
    max-width: 690px;
    margin-inline: auto;
}

.legal-stage {
    position: relative;
    display: grid;
    min-height: 620px;
    grid-template-columns: minmax(150px, 1fr) minmax(760px, 920px) minmax(150px, 1fr);
    align-items: start;
    outline: none;
}

.legal-stage::before {
    position: absolute;
    z-index: 1;
    right: 8%;
    bottom: 18px;
    left: 8%;
    height: 105px;
    border-radius: 50%;
    content: "";
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.75), transparent 70%);
}

.legal-stage:focus-visible .legal-console {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--legal-accent), transparent 30%), 0 34px 90px rgba(0, 0, 0, 0.66);
}

.legal-character {
    --character-label-accent: #dfa84b;
    --character-label-glow: rgba(223, 168, 75, 0.28);
    position: relative;
    z-index: 2;
    display: flex;
    height: 690px;
    align-self: start;
    align-items: flex-end;
    justify-content: center;
    margin-top: 80px;
    pointer-events: none;
}

.legal-character-buyer {
    --character-label-accent: #75c9c5;
    --character-label-glow: rgba(117, 201, 197, 0.28);
}

.legal-character img {
    display: block;
    width: 800px;
    max-width: none;
    height: 690px;
    object-fit: contain;
    object-position: center bottom;
    transform-origin: center bottom;
    user-select: none;
    filter: brightness(0.78) saturate(0.78);
    transition: filter 0.4s ease, transform 0.5s ease;
}

.legal-character-seller img {
    transform: translate(-25px, 55px) scale(1.5);
}

.legal-character-buyer img {
    transform: translate(25px, 55px) scale(1.5);
}

.legal-trade[data-mode="character"] .legal-character-seller img,
.legal-trade[data-mode="item"] .legal-character-buyer img {
    filter: brightness(1.03) saturate(1.02);
}

.legal-character > span {
    position: absolute;
    z-index: 3;
    top: -18px;
    display: inline-flex;
    min-width: 124px;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 16px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--character-label-accent), transparent 35%);
    color: #f4e8cb;
    background:
        linear-gradient(90deg, transparent, rgba(7, 10, 15, 0.86) 16%, color-mix(in srgb, var(--character-label-accent), transparent 90%) 50%, rgba(7, 10, 15, 0.86) 84%, transparent);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.19em;
    text-shadow: 0 0 10px var(--character-label-glow);
    box-shadow: 0 12px 22px -16px rgba(0, 0, 0, 0.9);
}

.legal-character > span::before {
    position: absolute;
    top: 0;
    right: 38%;
    bottom: auto;
    left: 38%;
    height: 1px;
    content: "";
    background: var(--character-label-accent);
    box-shadow: 0 0 8px var(--character-label-accent);
}

.legal-character > span::after {
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 6px;
    height: 6px;
    border: 0;
    content: "";
    transform: translateX(-50%) rotate(45deg);
    background: var(--character-label-accent);
    box-shadow: 0 0 7px var(--character-label-glow);
}

.legal-character > span i {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--character-label-accent), transparent 62%);
    border-radius: 50%;
    color: var(--character-label-accent);
    background: color-mix(in srgb, var(--character-label-accent), transparent 88%);
    font-size: 0.55rem;
    box-shadow: none;
}

.legal-character-seller > span {
    left: 50%;
    transform: translateX(-50%);
}

.legal-character-buyer > span {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}

.legal-console {
    position: relative;
    z-index: 6;
    align-self: center;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(225, 174, 83, 0.3);
    background: linear-gradient(145deg, rgba(16, 20, 30, 0.96), rgba(6, 8, 13, 0.97));
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.66), inset 0 1px rgba(255, 229, 174, 0.05);
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.legal-console::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 62%;
    height: 1px;
    content: "";
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--legal-accent), transparent);
    box-shadow: 0 0 18px var(--legal-accent);
}

.legal-mode-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.legal-mode-tabs button {
    position: relative;
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    gap: 11px;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.055);
    color: #7f8999;
    background: rgba(255, 255, 255, 0.012);
    font: 700 0.78rem/1 "Beaufort for LOL", Georgia, serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.25s ease, background 0.25s ease;
}

.legal-mode-tabs button:last-child {
    border-right: 0;
}

.legal-mode-tabs button::after {
    position: absolute;
    right: 18%;
    bottom: -1px;
    left: 18%;
    height: 2px;
    content: "";
    transform: scaleX(0);
    background: linear-gradient(90deg, transparent, var(--legal-accent), transparent);
    transition: transform 0.3s ease;
}

.legal-mode-tabs button:hover,
.legal-mode-tabs button.is-active {
    color: #f4ddb0;
    background: linear-gradient(180deg, var(--legal-accent-soft), transparent);
}

.legal-mode-tabs button.is-active::after {
    transform: scaleX(1);
}

.legal-mode-tabs i {
    color: var(--legal-accent);
    font-size: 1rem;
    transition: color 0.35s ease;
}

.legal-transaction {
    padding: 20px 22px 18px;
}

.legal-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 13px;
}

.legal-flow button {
    position: relative;
    display: grid;
    min-height: 58px;
    grid-template-columns: 30px 1fr;
    gap: 9px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: #788291;
    background: rgba(255, 255, 255, 0.018);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.legal-flow button:hover,
.legal-flow button.is-active {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--legal-accent), transparent 52%);
    color: #eee0c2;
    background: var(--legal-accent-soft);
}

.legal-flow b {
    color: var(--legal-accent);
    font: 700 1.24rem/1 "Beaufort for LOL", Georgia, serif;
}

.legal-flow span {
    font-size: 0.67rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.legal-live-card {
    position: relative;
    display: grid;
    min-height: 150px;
    grid-template-columns: 70px 1fr;
    gap: 20px;
    align-items: center;
    padding: 18px 24px 34px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background:
        radial-gradient(circle at 10% 50%, var(--legal-accent-soft), transparent 28%),
        linear-gradient(125deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.008));
}

.legal-live-card::after {
    position: absolute;
    right: -35px;
    bottom: -42px;
    width: 150px;
    height: 150px;
    border: 1px solid color-mix(in srgb, var(--legal-accent), transparent 82%);
    border-radius: 50%;
    content: "";
    box-shadow: 0 0 0 18px color-mix(in srgb, var(--legal-accent), transparent 94%), 0 0 0 38px color-mix(in srgb, var(--legal-accent), transparent 97%);
}

.legal-live-icon {
    display: grid;
    width: 66px;
    height: 66px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--legal-accent), transparent 50%);
    color: var(--legal-accent);
    background: var(--legal-accent-soft);
    font-size: 1.4rem;
    transform: rotate(45deg);
    transition: color 0.35s ease, background 0.35s ease;
}

.legal-live-icon i {
    transform: rotate(-45deg);
}

.legal-live-card span {
    display: block;
    margin-bottom: 7px;
    color: var(--legal-accent);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.legal-live-card h3 {
    margin: 0 0 8px;
    color: #fff0cb;
    font: 700 clamp(1.45rem, 2.3vw, 2.1rem)/1.05 "Beaufort for LOL", Georgia, serif;
}

.legal-live-card p {
    max-width: 480px;
    margin: 0;
    color: #a8b0bd;
    font-size: 0.9rem;
    line-height: 1.65;
}

.legal-security {
    position: absolute;
    z-index: 2;
    right: 22px;
    bottom: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #657383;
    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.legal-security i {
    color: #62ad78;
}

.legal-progress {
    height: 2px;
    margin-top: 13px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
}

.legal-progress i {
    display: block;
    width: 33.333%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--legal-accent));
    box-shadow: 0 0 12px var(--legal-accent);
    transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.35s ease;
}

.legal-trade-demo {
    position: relative;
    margin-top: 20px;
    overflow: hidden;
    border: 1px solid rgba(213, 164, 79, 0.24);
    background:
        linear-gradient(135deg, rgba(22, 27, 38, 0.96), rgba(7, 10, 16, 0.98)),
        #090c12;
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.34), inset 0 1px rgba(255, 255, 255, 0.025);
}

.legal-trade-demo::before {
    position: absolute;
    top: 0;
    right: 12%;
    left: 12%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, var(--legal-accent), transparent);
    opacity: 0.72;
}

.legal-trade-demo-head,
.legal-trade-demo-foot,
.legal-inventory-title,
.legal-trade-party > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.legal-trade-demo-head {
    min-height: 42px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    background: rgba(255, 255, 255, 0.018);
}

.legal-trade-demo-head > span,
.legal-inventory-title > span {
    color: #e8c581;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.15em;
}

.legal-trade-demo-head > span i,
.legal-inventory-title > span i {
    margin-right: 7px;
    color: var(--legal-accent);
}

.legal-trade-demo-head small,
.legal-inventory-title small {
    color: #7c8796;
    font-size: 0.63rem;
}

.legal-game-trade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px 12px;
}

.metin2-trade-window {
    position: relative;
    isolation: isolate;
    width: min(100%, 560px);
    aspect-ratio: 344 / 200;
    overflow: hidden;
    background: #18130f;
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(218, 178, 112, 0.18);
}

.metin2-trade-skin {
    position: absolute;
    z-index: -1;
    top: -14.92%;
    left: -8.72%;
    display: block;
    width: 124.13%;
    max-width: none;
    height: auto;
    pointer-events: none;
    user-select: none;
}

.metin2-trade-drop,
.metin2-trade-receiver {
    position: absolute;
    top: 18%;
    width: 45.7%;
    height: 65.5%;
    outline: none;
}

.metin2-trade-drop {
    left: 2.6%;
    cursor: copy;
}

.metin2-trade-receiver {
    left: 50.8%;
    pointer-events: none;
}

.metin2-trade-drop::after {
    position: absolute;
    inset: 1px;
    border: 1px solid transparent;
    content: "";
    pointer-events: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.metin2-trade-drop.is-over::after,
.metin2-trade-drop:focus-visible::after {
    border-color: rgba(255, 198, 84, 0.8);
    background: rgba(199, 127, 28, 0.08);
    box-shadow: inset 0 0 24px rgba(238, 161, 46, 0.17), 0 0 10px rgba(238, 161, 46, 0.18);
}

.metin2-trade-item-slot {
    position: absolute;
    top: 1.2%;
    left: 1.2%;
    display: grid;
    width: 24%;
    height: 24.5%;
    place-items: center;
    color: rgba(225, 188, 120, 0.42);
}

.metin2-trade-item-slot > i {
    font-size: clamp(0.65rem, 1.1vw, 0.95rem);
}

.metin2-trade-item-slot > img {
    display: block;
    width: auto;
    max-width: 82%;
    height: 82%;
    object-fit: contain;
    image-rendering: auto;
    filter: drop-shadow(0 2px 2px #000);
    transition: opacity 0.15s ease;
}

.metin2-trade-item-slot > small {
    position: absolute;
    z-index: 4;
    bottom: calc(100% + 5px);
    left: 0;
    width: max-content;
    max-width: 180px;
    padding: 4px 6px;
    border: 1px solid rgba(203, 160, 87, 0.38);
    color: #eed29e;
    background: rgba(8, 6, 5, 0.96);
    font-size: 0.42rem;
    line-height: 1.2;
    opacity: 0;
    pointer-events: none;
    transform: translateY(3px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.metin2-trade-item-slot:hover > small,
.legal-trade-demo.has-item .metin2-trade-drop:focus-visible .metin2-trade-item-slot > small {
    opacity: 1;
    transform: none;
}

.metin2-trade-offer {
    position: absolute;
    z-index: 3;
    right: 17.7%;
    bottom: 2.8%;
    display: flex;
    width: 29%;
    height: 11.5%;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    padding: 0 4px;
    color: #e9e1ca;
    background: rgba(8, 7, 5, 0.88);
    text-align: right;
}

.metin2-trade-offer small {
    color: #a68c66;
    font-size: clamp(0.25rem, 0.5vw, 0.42rem);
    font-weight: 800;
    letter-spacing: 0.04em;
}

.metin2-trade-offer strong {
    color: #e9e1ca;
    font: 700 clamp(0.46rem, 0.85vw, 0.72rem)/1 Arial, sans-serif;
    white-space: nowrap;
}

.metin2-trade-accept {
    position: absolute;
    z-index: 4;
    right: 3.8%;
    bottom: 3.2%;
    width: 12.8%;
    height: 10.5%;
    padding: 0;
    border: 1px solid #8d887c;
    border-radius: 2px;
    color: #d9d4c7;
    background: linear-gradient(#686860, #41413d);
    box-shadow: inset 0 0 0 1px #22231f, 0 1px 2px #000;
    font: 400 clamp(0.42rem, 0.8vw, 0.68rem)/1 Arial, sans-serif;
    text-shadow: 1px 1px #222;
    cursor: pointer;
}

.metin2-trade-accept:not(:disabled):hover {
    color: #fff3cf;
    background: linear-gradient(#8c7d5e, #544b38);
}

.metin2-trade-accept:disabled {
    color: #8e8b84;
    background: linear-gradient(#4e4e49, #343430);
    cursor: not-allowed;
}

.legal-trade-demo.is-pending .metin2-trade-accept {
    color: #e4c98f;
}

.legal-trade-demo.is-complete .metin2-trade-accept {
    border-color: #728d62;
    color: #d9efce;
    background: linear-gradient(#586f4d, #35452f);
}

.metin2-trade-manager {
    display: flex;
    width: min(calc(100% - 36px), 560px);
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 auto 4px;
    padding: 0 14px;
    border: 1px solid rgba(218, 168, 80, 0.18);
    color: #b99455;
    background: rgba(5, 8, 13, 0.72);
}

.metin2-trade-manager span {
    font-size: 0.48rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.metin2-trade-manager span i {
    margin-right: 6px;
}

.metin2-trade-manager small {
    color: #7e8996;
    font-size: 0.49rem;
}

.legal-trade-demo.is-pending .metin2-trade-manager small {
    color: #e6c57d;
}

.legal-trade-demo.is-complete .metin2-trade-manager {
    border-color: rgba(102, 181, 124, 0.34);
}

.legal-trade-demo.is-complete .metin2-trade-manager small {
    color: #8cd49f;
}

.legal-transfer-ghost {
    object-fit: contain;
    image-rendering: auto;
}

.legal-trade-party {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    background: linear-gradient(145deg, rgba(23, 29, 40, 0.86), rgba(10, 13, 20, 0.9));
}

.legal-trade-party > header {
    margin-bottom: 11px;
    color: #8792a2;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.legal-trade-party > header b {
    color: #d4ae6d;
    font-size: 0.56rem;
}

.legal-trade-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 48px;
    gap: 5px;
    cursor: pointer;
}

.legal-trade-slots > i,
.legal-trade-slot {
    border: 1px solid rgba(139, 153, 172, 0.14);
    background: rgba(2, 5, 10, 0.58);
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.25);
}

.legal-trade-slot-main {
    display: grid;
    grid-column: span 2;
    grid-row: span 2;
    place-content: center;
    gap: 7px;
    padding: 10px;
    color: #697687;
    text-align: center;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.legal-trade-slot-main > i {
    font-size: 1.35rem;
}

.legal-trade-slot-main strong {
    color: #ffe1a3;
    font: 700 0.78rem/1.1 "Beaufort for LOL", Georgia, serif;
}

.legal-trade-slot-main small {
    font-size: 0.43rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.legal-trade-slots.is-over .legal-trade-slot-main {
    border-color: rgba(239, 183, 83, 0.84);
    color: #f5c86e;
    background: rgba(132, 83, 25, 0.2);
    box-shadow: inset 0 0 22px rgba(230, 163, 54, 0.12), 0 0 18px rgba(220, 149, 42, 0.12);
}

.legal-trade-demo.has-item .legal-trade-slot-main {
    border-color: color-mix(in srgb, var(--legal-accent), transparent 48%);
    color: var(--legal-accent);
    background: color-mix(in srgb, var(--legal-accent), transparent 91%);
}

.legal-trade-grid {
    --trade-row-height: 40px;
    position: relative;
    display: grid;
    min-height: 172px;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: repeat(4, 40px);
    grid-auto-flow: column;
    gap: 4px;
    padding: 4px;
    overflow: visible;
    border: 1px solid rgba(139, 153, 172, 0.15);
    background:
        linear-gradient(rgba(139, 153, 172, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 153, 172, 0.1) 1px, transparent 1px),
        rgba(2, 5, 10, 0.58);
    background-size: 12.5% 25%;
    box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.38);
    cursor: copy;
}

.legal-trade-grid.is-over {
    border-color: rgba(239, 183, 83, 0.82);
    background-color: rgba(132, 83, 25, 0.16);
    box-shadow: inset 0 0 26px rgba(230, 163, 54, 0.13), 0 0 16px rgba(220, 149, 42, 0.1);
}

.legal-trade-grid.is-invalid {
    border-color: rgba(231, 82, 72, 0.86);
    box-shadow: inset 0 0 25px rgba(210, 54, 48, 0.16), 0 0 16px rgba(210, 54, 48, 0.12);
}

.legal-trade-drop-preview {
    position: absolute;
    z-index: 6;
    top: calc(4px + var(--trade-row) * (var(--trade-row-height) + 4px));
    left: calc(4px + var(--trade-column) * ((100% - 36px) / 8 + 4px));
    width: calc((100% - 36px) / 8);
    height: calc(var(--trade-span) * var(--trade-row-height) + (var(--trade-span) - 1) * 4px);
    border: 1px solid rgba(255, 204, 104, 0.9);
    background: rgba(214, 151, 48, 0.2);
    box-shadow: inset 0 0 16px rgba(255, 193, 78, 0.18), 0 0 12px rgba(240, 169, 58, 0.25);
    pointer-events: none;
}

.legal-trade-drop-preview[hidden] {
    display: none;
}

.legal-trade-drop-preview.is-invalid {
    border-color: rgba(244, 91, 78, 0.92);
    background: rgba(202, 54, 47, 0.22);
    box-shadow: inset 0 0 16px rgba(231, 72, 62, 0.18), 0 0 12px rgba(215, 60, 53, 0.24);
}

.legal-trade-empty {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    place-content: center;
    gap: 8px;
    color: #5f6b79;
    font-size: 0.48rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-align: center;
    pointer-events: none;
}

.legal-trade-empty i {
    color: #8a714a;
    font-size: 1rem;
}

.legal-trade-empty.is-complete {
    color: #7fbd8e;
}

.legal-trade-grid-item {
    position: absolute;
    z-index: 2;
    display: grid;
    top: calc(4px + var(--trade-row) * (var(--trade-row-height) + 4px));
    left: calc(4px + var(--trade-column) * ((100% - 36px) / 8 + 4px));
    width: calc((100% - 36px) / 8);
    height: calc(var(--trade-span) * var(--trade-row-height) + (var(--trade-span) - 1) * 4px);
    place-items: center;
    padding: 3px;
    border: 1px solid rgba(215, 164, 78, 0.28);
    background: radial-gradient(circle, rgba(193, 132, 43, 0.15), rgba(3, 5, 8, 0.82));
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.48);
    cursor: pointer;
    transition: border-color 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}

.legal-trade-grid-item:hover {
    border-color: rgba(255, 202, 103, 0.75);
    filter: brightness(1.12);
}

.legal-trade-grid-item.is-dragging {
    opacity: 0.38;
    cursor: grabbing;
}

.legal-trade-grid-item img {
    display: block;
    width: auto;
    max-width: 88%;
    height: auto;
    max-height: calc(100% - 8px);
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.9));
}

.legal-trade-grid-item.is-size-1 img {
    max-width: 32px;
    max-height: 32px;
}

.legal-trade-grid-item.is-size-2 img {
    max-width: 32px;
    max-height: 64px;
}

.legal-trade-grid-item small {
    position: absolute;
    z-index: 5;
    bottom: calc(100% + 5px);
    left: 0;
    width: max-content;
    max-width: 170px;
    padding: 5px 7px;
    border: 1px solid rgba(203, 160, 87, 0.36);
    color: #eed29e;
    background: rgba(8, 6, 5, 0.96);
    font-size: 0.44rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(3px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.legal-trade-grid-item:hover small {
    opacity: 1;
    transform: none;
}

.legal-trade-grid-item.is-awaiting {
    opacity: 0.08;
}

.legal-trade-receiver-grid {
    cursor: default;
}

.legal-trade-party-offer .legal-tl-offer {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    padding: 0 12px;
    border: 1px solid rgba(104, 179, 127, 0.14);
    background: rgba(2, 5, 10, 0.62);
}

.legal-wallet {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    padding: 0 12px;
    border: 1px solid rgba(221, 169, 80, 0.18);
    background: rgba(2, 5, 10, 0.62);
}

.legal-wallet span {
    color: #a58e67;
    font-size: 0.46rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.legal-wallet span i {
    margin-right: 6px;
    color: #d3a655;
}

.legal-wallet strong {
    color: #f1ca79;
    font: 700 1rem/1 "Beaufort for LOL", Georgia, serif;
    white-space: nowrap;
    transition: color 0.25s ease, text-shadow 0.25s ease;
}

.legal-trade-demo.is-complete .legal-wallet strong {
    color: #9fe3ad;
    text-shadow: 0 0 14px rgba(91, 190, 116, 0.3);
}

.legal-trade-party-offer .legal-tl-offer > span {
    color: #718071;
    font-size: 0.43rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.legal-trade-party-offer .legal-tl-offer > strong {
    color: #a8dfb3;
    font-size: 1rem;
    white-space: nowrap;
}

.legal-trade-manager-line {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 16px 10px;
    padding: 0 14px;
    border: 1px solid rgba(218, 168, 80, 0.18);
    color: #b99455;
    background: rgba(5, 8, 13, 0.72);
}

.legal-trade-manager-line span {
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.legal-trade-manager-line span i {
    margin-right: 6px;
}

.legal-trade-manager-line small {
    color: #7e8996;
    font-size: 0.59rem;
}

.legal-trade-demo.is-pending .legal-trade-manager-line small {
    color: #e6c57d;
}

.legal-trade-demo.is-complete .legal-trade-manager-line {
    border-color: rgba(102, 181, 124, 0.34);
}

.legal-trade-demo.is-complete .legal-trade-manager-line small {
    color: #8cd49f;
}

.legal-exchange-mark {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 7px;
    color: #596575;
    text-align: center;
}

.legal-exchange-mark > i {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(205, 158, 78, 0.24);
    border-radius: 50%;
    color: #cb9a4c;
    background: #0b0e14;
}

.legal-exchange-mark span {
    font-size: 0.52rem;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.legal-tl-offer {
    display: grid;
    min-height: 149px;
    align-content: center;
    justify-items: center;
    gap: 6px;
    border: 1px solid rgba(104, 179, 127, 0.14);
    background: radial-gradient(circle at 50% 40%, rgba(63, 137, 86, 0.11), transparent 58%), rgba(2, 5, 10, 0.55);
    text-align: center;
}

.legal-tl-offer > i {
    color: #65a878;
    font-size: 1.25rem;
}

.legal-tl-offer > small {
    color: #718071;
    font-size: 0.43rem;
    font-weight: 900;
    letter-spacing: 0.13em;
}

.legal-tl-offer > strong {
    color: #d8e8d9;
    font: 700 1.55rem/1 "Beaufort for LOL", Georgia, serif;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.legal-tl-offer > span {
    color: #657568;
    font-size: 0.48rem;
}

.legal-trade-demo.has-item .legal-tl-offer > strong {
    color: #9fe3ad;
    text-shadow: 0 0 18px rgba(91, 190, 116, 0.23);
}

.legal-inventory {
    position: relative;
    min-height: 132px;
    margin: 0 16px 12px;
    padding: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.055);
    background: rgba(2, 5, 10, 0.34);
}

.legal-sale-notification {
    position: absolute;
    z-index: 12;
    inset: 6px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    border: 1px solid rgba(102, 191, 128, 0.5);
    color: #dcefe0;
    background: linear-gradient(110deg, rgba(18, 48, 28, 0.98), rgba(10, 24, 17, 0.98));
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(98, 192, 125, 0.08);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px) scale(0.985);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.legal-sale-notification.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.legal-sale-notification > i {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(126, 214, 151, 0.42);
    border-radius: 50%;
    color: #8cdda2;
    background: rgba(80, 171, 105, 0.12);
    font-size: 1.35rem;
}

.legal-sale-notification > div {
    display: grid;
    gap: 5px;
}

.legal-sale-notification strong {
    color: #b8efc5;
    font: 700 1rem/1 "Beaufort for LOL", Georgia, serif;
}

.legal-sale-notification span {
    color: #a9bcae;
    font-size: 0.67rem;
}

.legal-sale-notification span b {
    color: #f0d083;
}

.legal-sale-notification button {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #9eb0a2;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.legal-inventory-title {
    margin-bottom: 7px;
}

.legal-inventory-items {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.legal-inventory-items button {
    display: grid;
    min-width: 0;
    min-height: 78px;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(146, 160, 179, 0.16);
    color: #d5d9df;
    background: linear-gradient(135deg, rgba(31, 37, 49, 0.84), rgba(14, 18, 26, 0.9));
    font: inherit;
    text-align: left;
    cursor: grab;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.legal-inventory-items button[hidden] {
    display: none;
}

.legal-inventory-items button > i {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(218, 166, 78, 0.22);
    color: #d8a654;
    background: rgba(184, 111, 35, 0.08);
}

.legal-inventory-items button > .legal-item-icon {
    display: grid;
    width: 44px;
    height: 68px;
    place-items: center;
    border: 1px solid rgba(218, 166, 78, 0.24);
    background: radial-gradient(circle, rgba(193, 132, 43, 0.14), rgba(3, 5, 8, 0.7));
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.42);
}

.legal-item-icon img {
    display: block;
    width: auto;
    max-width: none;
    height: auto;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.9));
}

.legal-inventory-items button span {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.legal-inventory-items button strong {
    overflow: hidden;
    font-size: 0.69rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.legal-inventory-items button small {
    color: #768291;
    font-size: 0.57rem;
}

.legal-inventory-items button:hover,
.legal-inventory-items button:focus-visible,
.legal-inventory-items button.is-selected {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--legal-accent), transparent 42%);
    background: linear-gradient(135deg, color-mix(in srgb, var(--legal-accent), transparent 84%), rgba(14, 18, 26, 0.94));
}

.legal-inventory-items button.is-dragging {
    opacity: 0.38;
    cursor: grabbing;
}

.legal-trade-demo-foot {
    min-height: 54px;
    justify-content: flex-end;
    padding: 11px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.018);
}

.legal-trade-demo-foot > span {
    color: #6f7a89;
    font-size: 0.49rem;
    line-height: 1.45;
}

.legal-trade-demo-foot > span i {
    margin-right: 6px;
    color: #a57b3f;
}

.legal-trade-demo-foot button {
    min-width: 166px;
    min-height: 40px;
    padding: 0 17px;
    border: 1px solid rgba(104, 190, 129, 0.52);
    color: #e5f4e8;
    background: linear-gradient(110deg, #315d40, #4c8f5e 52%, #315d40);
    background-size: 180% 100%;
    font: 800 0.65rem/1 "Beaufort for LOL", Georgia, serif;
    letter-spacing: 0.07em;
    cursor: pointer;
    transition: filter 0.2s ease, background-position 0.3s ease, opacity 0.2s ease;
}

.legal-trade-demo-foot button:last-child {
    min-width: 194px;
}

.legal-trade-demo-foot button:not(:disabled):hover {
    background-position: 100% 0;
    filter: brightness(1.12);
}

.legal-trade-demo-foot button:disabled {
    border-color: rgba(119, 130, 144, 0.16);
    color: #68727f;
    background: #171c24;
    cursor: not-allowed;
    opacity: 0.76;
}

.legal-trade-demo-foot .legal-trade-clear {
    min-width: 104px;
    border-color: rgba(180, 147, 94, 0.28);
    color: #ae9b79;
    background: linear-gradient(110deg, #24211d, #373027 52%, #24211d);
}

.legal-trade-demo.is-complete {
    border-color: rgba(100, 185, 125, 0.42);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.34), inset 0 0 36px rgba(70, 142, 91, 0.055);
}

.legal-trade-demo.is-complete .legal-trade-demo-head small {
    color: #8bd49f;
}

.legal-cta {
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 26px;
    border-top: 1px solid color-mix(in srgb, var(--legal-accent), transparent 72%);
    color: #fff0ca;
    background: linear-gradient(90deg, var(--legal-accent-soft), rgba(255, 255, 255, 0.01));
    text-decoration: none;
    transition: background 0.25s ease, padding 0.25s ease;
}

.legal-cta:hover {
    padding-right: 22px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--legal-accent), transparent 72%), rgba(255, 255, 255, 0.025));
}

.legal-cta span {
    display: grid;
    gap: 4px;
}

.legal-cta small {
    color: #8993a2;
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.legal-cta strong {
    font: 700 1.15rem/1 "Beaufort for LOL", Georgia, serif;
}

.legal-cta > i {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--legal-accent), transparent 54%);
    color: var(--legal-accent);
}

.legal-copy {
    position: relative;
    z-index: 8;
    width: min(1240px, calc(100% - 44px));
    margin: 28px auto 0;
    padding: 28px 38px 24px;
    border: 1px solid rgba(221, 169, 80, 0.22);
    background: linear-gradient(145deg, rgba(12, 15, 23, 0.97), rgba(6, 8, 13, 0.95));
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.54);
    text-align: center;
}

.legal-copy > header > span {
    color: #bc8b46;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.legal-copy h3 {
    margin: 10px auto 14px;
    color: #ffdda0;
    font: 700 clamp(1.6rem, 3vw, 2.5rem)/1.12 "Beaufort for LOL", Georgia, serif;
}

.legal-copy header p {
    max-width: 1080px;
    margin: 0 auto;
    color: #c9c0ae;
    font-size: 0.92rem;
    line-height: 1.72;
}

.legal-copy a {
    color: #f1be67;
}

.legal-benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 18px;
}

.legal-benefits p {
    display: grid;
    min-height: 104px;
    grid-template-columns: 42px 1fr;
    gap: 15px;
    align-items: center;
    margin: 0;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #aeb5c0;
    background: rgba(255, 255, 255, 0.018);
    font-size: 13px;
    line-height: 1.62;
    text-align: left;
}

.legal-benefits i {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(223, 168, 75, 0.26);
    color: #dfa84b;
    background: rgba(223, 168, 75, 0.08);
}

.legal-warning {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
    padding: 12px 22px;
    border: 1px solid rgba(224, 86, 74, 0.28);
    background: linear-gradient(90deg, rgba(38, 10, 14, 0.18), rgba(108, 26, 29, 0.38), rgba(38, 10, 14, 0.18));
}

.legal-warning > i {
    color: #ec6b5c;
    font-size: 1.35rem;
}

.legal-warning p {
    display: grid;
    gap: 4px;
    margin: 0;
    color: #e2cba0;
    font-size: 0.76rem;
    line-height: 1.45;
}

.legal-warning strong {
    color: #ffcf80;
    letter-spacing: 0.11em;
}

@media (max-width: 1120px) {
    .legal-stage {
        grid-template-columns: 1fr minmax(520px, 670px) 1fr;
    }

    .legal-character img {
        width: 680px;
        max-width: none;
        opacity: 0.62;
    }

    .legal-character-seller img {
        transform: translate(86px, 38px) scale(1.25);
    }

    .legal-character-buyer img {
        transform: translate(-86px, 38px) scale(1.25);
    }
}

@media (max-width: 820px) {
    .legal-trade {
        margin-top: -56px;
        padding: 132px 0 82px;
    }

    .legal-stage {
        display: block;
        min-height: 680px;
        padding: 174px 10px 0;
    }

    .legal-character {
        position: absolute;
        top: 0;
        width: 50%;
        height: 270px;
        margin-top: 0;
        opacity: 0.72;
    }

    .legal-character-seller {
        left: 0;
    }

    .legal-character-buyer {
        right: 0;
    }

    .legal-character img {
        width: 380px;
        max-width: none;
        height: 340px;
    }

    .legal-character-seller img,
    .legal-character-buyer img {
        transform: scale(1);
    }

    .legal-character > span {
        top: 42px;
        bottom: auto;
    }

    .legal-character-seller > span {
        left: 50%;
    }

    .legal-character-buyer > span {
        right: auto;
        left: 50%;
    }

    .legal-console {
        max-width: 680px;
        margin-inline: auto;
    }

    .legal-copy {
        width: calc(100% - 20px);
        margin-top: 12px;
        padding: 32px 24px 24px;
    }

    .legal-benefits {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .legal-heading {
        margin-bottom: 18px;
    }

    .legal-stage {
        min-height: 740px;
        padding-top: 160px;
    }

    .legal-character img {
        width: 320px;
        max-width: none;
        height: 285px;
    }

    .legal-character > span {
        min-width: 110px;
        min-height: 36px;
        padding-inline: 14px;
        font-size: 0.52rem;
    }

    .legal-character > span i {
        width: 20px;
        height: 20px;
        font-size: 0.5rem;
    }

    .legal-mode-tabs button {
        min-height: 58px;
        gap: 7px;
        font-size: 0.57rem;
    }

    .legal-transaction {
        padding: 18px 14px;
    }

    .legal-flow {
        gap: 5px;
    }

    .legal-flow button {
        min-height: 76px;
        grid-template-columns: 1fr;
        gap: 5px;
        padding: 9px;
        text-align: center;
    }

    .legal-live-card {
        min-height: 250px;
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 22px 19px 54px;
    }

    .legal-live-icon {
        width: 52px;
        height: 52px;
    }

    .legal-security {
        right: 16px;
        left: 16px;
        justify-content: center;
    }

    .legal-trade-demo {
        margin-top: 24px;
    }

    .legal-trade-demo-head,
    .legal-trade-demo-foot {
        align-items: flex-start;
        flex-direction: column;
        padding: 13px 14px;
    }

    .legal-game-trade {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px;
    }

    .metin2-trade-manager {
        width: calc(100% - 28px);
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
        padding: 10px 12px;
    }

    .legal-trade-manager-line {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
        margin-inline: 14px;
        padding: 10px 12px;
    }

    .legal-trade-grid {
        --trade-row-height: 32px;
        grid-template-rows: repeat(4, 32px);
        min-height: 140px;
    }

    .legal-sale-notification {
        grid-template-columns: 42px minmax(0, 1fr) 30px;
        gap: 9px;
        padding: 11px;
    }

    .legal-sale-notification > i {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .legal-sale-notification strong {
        font-size: 0.82rem;
    }

    .legal-sale-notification span {
        font-size: 0.56rem;
    }

    .metin2-trade-item-slot > small {
        display: none;
    }

    .legal-exchange-mark {
        grid-template-columns: auto auto;
        justify-content: center;
    }

    .legal-exchange-mark > i {
        transform: rotate(90deg);
    }

    .legal-inventory {
        margin: 0 14px 14px;
    }

    .legal-inventory-items {
        grid-template-columns: 1fr;
    }

    .legal-trade-demo-foot button {
        width: 100%;
    }

    .legal-cta {
        min-height: 68px;
        padding: 12px 18px;
    }

    .legal-copy {
        padding: 28px 16px 18px;
    }

    .legal-copy header p {
        font-size: 0.8rem;
    }

    .legal-benefits p {
        grid-template-columns: 1fr;
        gap: 10px;
        text-align: center;
    }

    .legal-benefits i {
        margin-inline: auto;
    }

    .legal-warning {
        align-items: flex-start;
        gap: 10px;
        padding-inline: 14px;
    }
}

/* Character selection — carousel behavior, visual language */
.character-select {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 108px 0 110px;
    background: #080b12;
}

.character-select::before,
.character-select::after {
    position: absolute;
    z-index: -1;
    content: "";
    pointer-events: none;
}

.character-select::before {
    inset: 0;
    background:
        linear-gradient(180deg, rgba(8, 11, 18, 0.98) 0%, rgba(8, 11, 18, 0.54) 27%, rgba(8, 11, 18, 0.72) 76%, #080b12 100%),
        url("../images/characters/character-select-bg.jpg") center 18% / cover no-repeat;
    opacity: 0.35;
    filter: saturate(0.72);
}

.character-select::after {
    inset: 0;
    background:
        radial-gradient(circle at 50% 42%, rgba(215, 158, 63, 0.11), transparent 32%),
        linear-gradient(90deg, #080b12 0%, transparent 18%, transparent 82%, #080b12 100%);
}

.character-select-backdrop {
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 0.18;
    background: url("../images/bg.jpg") center / cover no-repeat;
    mix-blend-mode: soft-light;
}

.character-bridge {
    top: 8px;
}

.character-heading {
    position: relative;
    z-index: 2;
    margin-bottom: 34px;
}

.character-heading .ornate-description {
    max-width: 620px;
    margin-inline: auto;
}

.character-selector {
    width: min(1220px, 100%);
    margin-inline: auto;
    outline: none;
}

.character-selector:focus-visible .character-stage {
    box-shadow: 0 0 0 2px rgba(228, 177, 86, 0.72), 0 28px 75px rgba(0, 0, 0, 0.58);
}

.character-stage {
    position: relative;
    min-height: 720px;
    overflow: hidden;
    border: 1px solid rgba(212, 158, 66, 0.28);
    background:
        linear-gradient(180deg, rgba(5, 7, 11, 0.1) 0%, rgba(5, 7, 11, 0.04) 54%, rgba(5, 7, 11, 0.9) 100%),
        linear-gradient(90deg, rgba(4, 6, 10, 0.76) 0%, transparent 24%, transparent 76%, rgba(4, 6, 10, 0.76) 100%),
        url("../images/characters/character-select-bg.jpg") center / cover no-repeat;
    box-shadow: 0 28px 75px rgba(0, 0, 0, 0.58), inset 0 0 90px rgba(0, 0, 0, 0.42);
    transition: box-shadow 0.25s ease;
}

.character-stage::before {
    position: absolute;
    z-index: 8;
    inset: 0;
    border: 1px solid rgba(255, 219, 145, 0.08);
    content: "";
    pointer-events: none;
}

.character-stage::after {
    position: absolute;
    z-index: 7;
    right: 0;
    bottom: 0;
    left: 0;
    height: 34%;
    content: "";
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(5, 7, 11, 0.9));
}

.character-sky-glow {
    position: absolute;
    top: 7%;
    left: 50%;
    width: 46%;
    height: 32%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 206, 111, 0.2), transparent 68%);
    filter: blur(22px);
}

.character-ground {
    position: absolute;
    z-index: 1;
    bottom: 68px;
    left: 50%;
    width: 460px;
    height: 76px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.72), transparent 68%);
    filter: blur(5px);
}

.character-figure {
    position: absolute;
    z-index: 3;
    bottom: 62px;
    left: 50%;
    width: 400px;
    height: 625px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    cursor: pointer;
    transform-origin: 50% 100%;
    transition: transform 0.72s cubic-bezier(0.2, 0.78, 0.2, 1), opacity 0.55s ease, filter 0.55s ease;
    will-change: transform, opacity;
}

.character-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 24px 20px rgba(0, 0, 0, 0.72));
}


.character-figure[data-position="active"] {
    z-index: 6;
    opacity: 1;
    transform: translateX(-50%) scale(1);
    filter: brightness(1.06) saturate(1.06);
}

.character-figure[data-position="next"] {
    z-index: 4;
    opacity: 0.68;
    transform: translateX(10%) scale(0.83);
    filter: brightness(0.7) saturate(0.78);
}

.character-figure[data-position="previous"] {
    z-index: 4;
    opacity: 0.68;
    transform: translateX(-110%) scale(0.83);
    filter: brightness(0.7) saturate(0.78);
}

.character-figure[data-position="far"] {
    z-index: 2;
    opacity: 0.18;
    transform: translateX(-50%) scale(0.58);
    filter: brightness(0.42) saturate(0.45) blur(1px);
}

.character-figure:focus-visible img {
    filter: drop-shadow(0 0 18px rgba(236, 184, 88, 0.78)) drop-shadow(0 24px 20px rgba(0, 0, 0, 0.72));
}

.character-arrow {
    position: absolute;
    z-index: 12;
    top: 47%;
    display: grid;
    width: 58px;
    height: 74px;
    place-items: center;
    transform: translateY(-50%);
    border: 1px solid rgba(225, 174, 81, 0.34);
    color: #f6d99e;
    background: linear-gradient(135deg, rgba(43, 33, 20, 0.88), rgba(10, 13, 20, 0.88));
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.38), inset 0 0 18px rgba(213, 155, 61, 0.06);
    cursor: pointer;
    transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.character-arrow:hover,
.character-arrow:focus-visible {
    border-color: rgba(255, 205, 111, 0.76);
    color: #fff2ca;
    background: linear-gradient(135deg, rgba(92, 59, 23, 0.94), rgba(17, 20, 28, 0.94));
}

.character-arrow-prev {
    left: 26px;
    clip-path: polygon(18% 0, 100% 0, 82% 50%, 100% 100%, 18% 100%, 0 50%);
}

.character-arrow-next {
    right: 26px;
    clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%, 18% 50%);
}

.character-arrow-prev:hover,
.character-arrow-prev:focus-visible {
    transform: translate(-3px, -50%);
}

.character-arrow-next:hover,
.character-arrow-next:focus-visible {
    transform: translate(3px, -50%);
}

.character-counter {
    position: absolute;
    z-index: 12;
    top: 24px;
    right: 28px;
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(224, 172, 78, 0.42);
    color: rgba(238, 214, 171, 0.56);
    font-size: 0.68rem;
    letter-spacing: 0.15em;
}

.character-counter strong {
    color: #f0c878;
    font: 700 1.5rem/1 "Beaufort for LOL", Georgia, serif;
}

.character-interface {
    position: relative;
    z-index: 20;
    width: calc(100% - 96px);
    margin: -120px auto 0;
    border: 1px solid rgba(203, 153, 67, 0.3);
    background: linear-gradient(135deg, rgba(15, 18, 26, 0.97), rgba(7, 9, 14, 0.95));
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.52), inset 0 1px rgba(255, 224, 164, 0.05);
}

.character-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid rgba(202, 151, 63, 0.22);
}

.character-tabs button {
    position: relative;
    display: flex;
    min-height: 66px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-right: 1px solid rgba(202, 151, 63, 0.16);
    color: #8e96a5;
    background: rgba(255, 255, 255, 0.012);
    font: 700 0.7rem/1 "Beaufort for LOL", Georgia, serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.25s ease, background 0.25s ease;
}

.character-tabs button:last-child {
    border-right: 0;
}

.character-tabs button::after {
    position: absolute;
    right: 22%;
    bottom: -1px;
    left: 22%;
    height: 2px;
    content: "";
    transform: scaleX(0);
    background: linear-gradient(90deg, transparent, #e7ad4c, #ee5252, transparent);
    transition: transform 0.3s ease;
}

.character-tabs button:hover,
.character-tabs button.is-active {
    color: #f4dba6;
    background: linear-gradient(180deg, rgba(218, 156, 58, 0.1), transparent);
}

.character-tabs button.is-active::after {
    transform: scaleX(1);
}

.character-tabs i {
    color: #c99241;
    font-size: 1rem;
}

.character-detail {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    padding: 26px 32px 22px;
}

.character-title-block {
    padding-left: 18px;
    border-left: 2px solid #c78a35;
}

.character-title-block span {
    display: block;
    margin-bottom: 4px;
    color: #b19d78;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.character-title-block h3 {
    margin: 0;
    color: #fff1cd;
    font: 700 clamp(2rem, 3vw, 3.2rem)/0.94 "Beaufort for LOL", Georgia, serif;
}

.character-detail > p {
    max-width: 590px;
    margin: 0;
    color: #aeb4bf;
    font-size: 0.85rem;
    line-height: 1.75;
}

.character-traits {
    display: flex;
    max-width: 280px;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.character-traits span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(205, 154, 70, 0.23);
    color: #c8cbd2;
    background: rgba(255, 255, 255, 0.025);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.character-traits i {
    color: #d99c42;
}

.character-hint {
    margin: 0 32px;
    padding: 12px 0 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: #666f7e;
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

.character-hint i {
    margin-right: 7px;
    color: #9f7841;
}

@media (max-width: 1020px) {
    .character-stage {
        min-height: 650px;
    }

    .character-figure {
        bottom: 54px;
        width: 350px;
        height: 560px;
    }

    .character-interface {
        width: calc(100% - 36px);
    }

    .character-detail {
        grid-template-columns: 190px 1fr;
    }

    .character-traits {
        grid-column: 1 / -1;
        max-width: none;
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .character-select {
        padding: 78px 0 76px;
    }

    .character-heading {
        margin-bottom: 24px;
    }

    .character-stage {
        min-height: 540px;
        background-position: center;
    }

    .character-figure {
        bottom: 32px;
        width: 270px;
        height: 455px;
    }

    .character-figure[data-position="next"] {
        opacity: 0.4;
        transform: translateX(0%) scale(0.72);
    }

    .character-figure[data-position="previous"] {
        opacity: 0.4;
        transform: translateX(-100%) scale(0.72);
    }

    .character-figure[data-position="far"] {
        opacity: 0.08;
    }

    .character-ground {
        bottom: 45px;
        width: 280px;
    }

    .character-arrow {
        top: 50%;
        width: 44px;
        height: 58px;
    }

    .character-arrow-prev {
        left: 8px;
    }

    .character-arrow-next {
        right: 8px;
    }

    .character-counter {
        top: 12px;
        right: 12px;
    }

    .character-interface {
        width: calc(100% - 16px);
        margin-top: -76px;
    }

    .character-tabs button {
        min-height: 58px;
        gap: 5px;
        font-size: 0.52rem;
        letter-spacing: 0.06em;
    }

    .character-tabs i {
        font-size: 0.82rem;
    }

    .character-detail {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 22px 20px 18px;
    }

    .character-title-block h3 {
        font-size: 2.35rem;
    }

    .character-detail > p {
        font-size: 0.76rem;
        line-height: 1.65;
    }

    .character-traits {
        grid-column: auto;
    }

    .character-traits span {
        font-size: 0.55rem;
    }

    .character-hint {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .character-figure {
        transition-duration: 0.01ms;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* Foreword and image-faithful feature sections */
.foreword {
    position: relative;
    overflow: hidden;
    padding: 118px 0 42px;
    background: #0b111a;
    isolation: isolate;
}

.foreword::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    opacity: 0.66;
    background:
        linear-gradient(90deg, rgba(7, 13, 20, 0.72), rgba(7, 13, 20, 0.2) 44%, rgba(7, 13, 20, 0.66)),
        linear-gradient(180deg, rgba(6, 11, 18, 0.48), rgba(6, 11, 18, 0.18) 42%, rgba(6, 11, 18, 0.76)),
        url("../images/characters/legal-bg.webp") center 42% / cover no-repeat;
}

.foreword::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(180deg, #07101a 0, transparent 16%, transparent 78%, #08111c 100%);
    pointer-events: none;
}

.foreword-glow {
    position: absolute;
    z-index: -1;
    top: 18%;
    left: 50%;
    width: 760px;
    height: 760px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(68, 145, 194, 0.14), rgba(166, 38, 43, 0.08) 38%, transparent 70%);
    filter: blur(16px);
    transform: translateX(-50%);
    pointer-events: none;
}

.ornate-heading {
    max-width: 780px;
    margin: 0 auto 60px;
    text-align: center;
}

.ornate-heading > p:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 0 0 14px;
    color: #d7ae68;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
}

.ornate-heading > p:first-child span {
    width: 46px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--red));
}

.ornate-heading > p:first-child span:last-child {
    background: linear-gradient(90deg, var(--red), transparent);
}

.ornate-heading h2 {
    margin: 0;
    color: #fffaf0;
    font-size: clamp(3rem, 5.4vw, 5.8rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 0.95;
    text-shadow: 0 14px 42px rgba(0, 0, 0, 0.35);
}

.ornate-heading h2 em {
    color: var(--gold-light);
    font-style: normal;
}

.ornate-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin: 22px auto 0;
}

.ornate-rule i {
    width: 70px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(223, 170, 83, 0.6));
}

.ornate-rule i:last-child {
    background: linear-gradient(90deg, rgba(223, 170, 83, 0.6), transparent);
}

.ornate-rule b {
    width: 7px;
    height: 7px;
    border: 1px solid var(--gold);
    transform: rotate(45deg);
}

.ornate-description {
    max-width: 560px;
    margin: 20px auto 0;
    color: #9d9892;
    font-size: 0.9rem;
    line-height: 1.7;
}

.foreword-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
    align-items: center;
    gap: 72px;
}

.foreword-visual {
    position: relative;
    margin: 0;
    padding: 10px;
    border: 1px solid rgba(223, 170, 83, 0.25);
    background: rgba(255, 255, 255, 0.025);
    box-shadow: 0 34px 80px rgba(0, 0, 0, 0.38), 0 0 60px rgba(54, 126, 172, 0.08);
}

.foreword-visual::before,
.foreword-visual::after {
    content: "";
    position: absolute;
    z-index: 4;
    pointer-events: none;
}

.foreword-visual::before {
    top: -2px;
    left: 0;
    width: 118px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffe4a9 38%, #efad41 66%, transparent);
    box-shadow: 0 0 8px #efad41, 0 0 22px rgba(239, 173, 65, 0.72);
    animation: forewordLightX 4.8s ease-in-out infinite alternate;
}

.foreword-visual::after {
    top: 0;
    left: -2px;
    width: 2px;
    height: 92px;
    background: linear-gradient(180deg, transparent, #ffd58b 34%, #e33c37 72%, transparent);
    box-shadow: 0 0 8px #db3835, 0 0 22px rgba(219, 56, 53, 0.7);
    animation: forewordLightY 4.3s 0.8s ease-in-out infinite alternate;
}

.foreword-visual img {
    width: 100%;
    aspect-ratio: 1071 / 570;
    object-fit: cover;
    filter: saturate(0.86) contrast(1.04);
}

.foreword-visual figcaption {
    position: absolute;
    right: 28px;
    bottom: -25px;
    left: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 20px;
    border: 1px solid rgba(255, 211, 139, 0.27);
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.07), transparent 35%),
        rgba(9, 11, 18, 0.88);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.36);
    backdrop-filter: blur(16px);
    z-index: 6;
}

.foreword-visual figcaption span {
    color: #8f8982;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.foreword-visual figcaption strong {
    color: var(--gold-light);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.foreword-copy {
    position: relative;
    padding-left: 34px;
}

.foreword-copy::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: linear-gradient(transparent, rgba(223, 170, 83, 0.62) 22%, rgba(176, 43, 45, 0.52) 76%, transparent);
}

.foreword-copy h3 {
    margin: 0 0 24px;
    color: #fffaf0;
    font-size: clamp(2.5rem, 4.5vw, 4.9rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1;
}

.foreword-copy h3 em {
    color: var(--gold-light);
    font-style: normal;
}

.copy-lead {
    margin: 0;
    color: #c2bcb5;
    font-size: 1rem;
    line-height: 1.85;
}

.copy-lead strong {
    color: white;
}

.foreword-question {
    position: relative;
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: start;
    gap: 16px;
    margin: 28px 0;
    padding: 20px 22px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        linear-gradient(110deg, rgba(255, 255, 255, 0.035), transparent),
        rgba(12, 15, 24, 0.72);
    backdrop-filter: blur(12px);
    overflow: hidden;
    box-shadow: inset 0 0 24px rgba(223, 170, 83, 0.025);
}

.foreword-question::before,
.opening-note::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: -1px;
    left: -38%;
    width: 38%;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, #ffe5ac 44%, #eea73b 72%, transparent);
    box-shadow: 0 0 9px rgba(255, 201, 108, 0.8), 0 0 20px rgba(222, 147, 45, 0.42);
    animation: cardLightSweep 4.2s linear infinite;
}

.foreword-question::after,
.opening-note::after {
    content: "";
    position: absolute;
    z-index: 3;
    right: -1px;
    top: -32%;
    width: 2px;
    height: 32%;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, #ffcf78 45%, #d83835 78%, transparent);
    box-shadow: 0 0 9px rgba(223, 59, 55, 0.78), 0 0 18px rgba(223, 59, 55, 0.38);
    animation: cardLightDrop 3.7s 1.1s linear infinite;
}

.foreword-question > i {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: var(--gold-light);
    font-size: 0.72rem;
    background: rgba(223, 170, 83, 0.08);
}

.foreword-question p {
    margin: 0;
    color: #a9a39d;
    font-size: 0.88rem;
    line-height: 1.75;
}

.opening-note {
    position: relative;
    display: grid;
    grid-template-columns: 152px 1fr;
    align-items: center;
    gap: 20px;
    overflow: hidden;
    padding: 18px 22px 18px 16px;
    border: 1px solid rgba(255, 169, 104, 0.32);
    background:
        radial-gradient(circle at 0 0, rgba(255, 193, 111, 0.16), transparent 34%),
        linear-gradient(115deg, rgba(117, 24, 32, 0.8), rgba(38, 17, 23, 0.82));
    box-shadow: 0 18px 42px rgba(71, 15, 21, 0.22);
}

.opening-date {
    display: grid;
    min-height: 70px;
    place-items: center;
    border: 1px solid rgba(255, 220, 160, 0.27);
    color: var(--gold-light);
    background: rgba(8, 10, 17, 0.25);
    padding: 10px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.35;
    text-align: center;
}

.opening-note p {
    margin: 0;
    color: #d1cac3;
    font-size: 0.83rem;
    line-height: 1.65;
}

.opening-note strong {
    color: white;
}

.general-features {
    padding-block: 64px 58px;
}

.general-features .section-shell {
    width: min(1360px, calc(100% - 64px));
}

.general-features .ornate-heading {
    position: relative;
    z-index: 1;
    margin-bottom: 34px;
    padding: 27px 34px 25px;
}

.general-features .ornate-heading::after {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    border-top: 1px solid rgba(141, 157, 190, 0.08);
    border-bottom: 1px solid rgba(171, 65, 68, 0.08);
    background: linear-gradient(90deg, transparent, rgba(24, 34, 54, 0.42) 30%, rgba(24, 34, 54, 0.42) 70%, transparent);
}

.general-features .ornate-heading h2 {
    font-size: clamp(2.8rem, 4.6vw, 4.8rem);
}

.general-features .ornate-description {
    max-width: 720px;
    margin-top: 16px;
    font-size: 1rem;
    line-height: 1.7;
}

.section-bridge {
    position: absolute;
    z-index: 3;
    top: 12px;
    left: 50%;
    width: min(980px, calc(100% - 48px));
    display: flex;
    align-items: center;
    gap: 14px;
    pointer-events: none;
    transform: translateX(-50%);
}

.section-bridge > span {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(128, 145, 178, 0.28), rgba(207, 57, 57, 0.42));
}

.section-bridge > span:last-child {
    background: linear-gradient(90deg, rgba(207, 57, 57, 0.42), rgba(223, 170, 83, 0.3), transparent);
}

.section-bridge b {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 8px 22px;
    border: 1px solid rgba(223, 170, 83, 0.24);
    color: #c9a15f;
    background: linear-gradient(110deg, #111a2b, #171626 54%, #23151c);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24), inset 0 1px rgba(255, 255, 255, 0.045);
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
    font-size: 0.55rem;
    letter-spacing: 0.16em;
    white-space: nowrap;
}

.section-bridge b i {
    color: #d75349;
    font-size: 0.46rem;
}

.feature-pill-grid {
    width: min(1320px, 100%);
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    list-style: none;
}

.feature-pill-grid li {
    position: relative;
    isolation: isolate;
    min-height: 64px;
    display: grid;
    grid-template-columns: 9px 1fr;
    align-items: center;
    gap: 13px;
    overflow: hidden;
    padding: 13px 18px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #dcd9d3;
    background:
        linear-gradient(#111a2c, #111a2c) padding-box,
        linear-gradient(115deg, rgba(112, 123, 158, 0.72), rgba(216, 177, 104, 0.5), rgba(142, 54, 59, 0.55)) border-box;
    box-shadow: 0 9px 22px rgba(0, 0, 0, 0.18), inset 0 1px rgba(255, 255, 255, 0.035);
    text-align: left;
    transition: transform 0.22s ease, box-shadow 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.feature-pill-grid li::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 100% 0, rgba(215, 171, 93, 0.09), transparent 42%),
        linear-gradient(120deg, rgba(40, 52, 78, 0.68), rgba(13, 20, 35, 0.94) 64%);
    transition: opacity 0.22s ease, background 0.22s ease;
}

.feature-pill-grid li::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    right: auto;
    left: -38%;
    width: 38%;
    height: 1px;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 237, 198, 0.8), rgba(210, 155, 71, 0.62), transparent);
    box-shadow: 0 0 7px rgba(255, 215, 143, 0.52);
    animation: none;
}

@keyframes forewordLightX {
    0% {
        left: 0;
        opacity: 0.25;
    }
    12%,
    88% {
        opacity: 1;
    }
    100% {
        left: calc(100% - 118px);
        opacity: 0.35;
    }
}

@keyframes forewordLightY {
    0% {
        top: 0;
        opacity: 0.25;
    }
    12%,
    88% {
        opacity: 1;
    }
    100% {
        top: calc(100% - 92px);
        opacity: 0.35;
    }
}

@keyframes cardLightSweep {
    0% {
        left: -38%;
        opacity: 0;
    }
    12%,
    88% {
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

@keyframes cardLightDrop {
    0% {
        top: -32%;
        opacity: 0;
    }
    14%,
    86% {
        opacity: 1;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}

@keyframes pillLightSweep {
    0% {
        left: -42%;
        opacity: 0;
    }
    10%,
    78% {
        opacity: 1;
    }
    88%,
    100% {
        left: 100%;
        opacity: 0;
    }
}

.feature-pill-grid li:hover {
    color: #fff5df;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25), 0 0 18px rgba(204, 149, 63, 0.08);
    transform: translateY(-2px);
}

.feature-pill-grid li:hover::after {
    animation: pillLightSweep 1.15s ease-out 1;
}

.feature-pill-grid li:hover::before {
    background:
        radial-gradient(circle at 100% 0, rgba(226, 180, 95, 0.14), transparent 44%),
        linear-gradient(120deg, rgba(44, 52, 76, 0.72), rgba(13, 16, 29, 0.96) 64%);
}

.feature-pill-grid li.feature-negative {
    background:
        linear-gradient(#171221, #171221) padding-box,
        linear-gradient(115deg, rgba(126, 56, 72, 0.72), rgba(206, 139, 77, 0.44), rgba(114, 46, 53, 0.7)) border-box;
}

.feature-pill-grid li.feature-negative::before {
    background:
        radial-gradient(circle at 100% 0, rgba(202, 112, 70, 0.1), transparent 42%),
        linear-gradient(120deg, rgba(52, 23, 32, 0.64), rgba(14, 12, 23, 0.95) 64%);
}

.feature-pill-grid li > i {
    width: 7px;
    height: 7px;
    border: 1px solid rgba(234, 199, 131, 0.78);
    background: linear-gradient(135deg, rgba(235, 183, 91, 0.65), rgba(151, 48, 55, 0.52));
    transform: rotate(45deg);
    box-shadow: 0 0 8px rgba(212, 157, 72, 0.24);
}

.feature-pill-grid li > b {
    display: none;
}

.feature-pill-grid li > span {
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    line-height: 1.35;
}

.cross-platform {
    position: relative;
    overflow: hidden;
    padding: 78px 0 108px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: linear-gradient(180deg, #0c1220, #101827 52%, #0a0f1c);
    isolation: isolate;
}

.cross-platform::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 0.2;
    background:
        linear-gradient(180deg, #0c1220 0%, rgba(12, 18, 32, 0.3) 38%, rgba(10, 15, 28, 0.5) 74%, #0a0f1c 100%),
        linear-gradient(90deg, #0c1220 0%, transparent 42%, transparent 66%, #0b111f 100%),
        url("../images/bg.jpg") center 42% / cover fixed;
}

.cross-platform::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -1px;
    left: 50%;
    width: min(820px, 76%);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(216, 65, 57, 0.72), rgba(237, 190, 102, 0.78), transparent);
    box-shadow: 0 0 18px rgba(217, 141, 65, 0.38);
    transform: translateX(-50%);
}

.platform-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(470px, 1.06fr);
    align-items: center;
    gap: clamp(48px, 7vw, 92px);
}

.platform-copy {
    position: relative;
}

.platform-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 17px;
    color: #d4a75e;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.2em;
}

.platform-kicker span {
    width: 38px;
    height: 1px;
    background: linear-gradient(90deg, var(--red), var(--gold-light));
    box-shadow: 0 0 10px rgba(223, 170, 83, 0.42);
}

.platform-copy h2 {
    margin: 0;
    color: #fffaf0;
    font-size: clamp(3.2rem, 5.2vw, 5.8rem);
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 0.94;
}

.platform-copy h2 em {
    color: var(--gold-light);
    font-style: normal;
    text-shadow: 0 0 34px rgba(223, 170, 83, 0.13);
}

.platform-description {
    max-width: 590px;
    margin: 25px 0 0;
    color: #aaa59f;
    font-size: 0.94rem;
    line-height: 1.78;
}

.platform-points {
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    list-style: none;
}

.platform-points li {
    min-height: 84px;
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(26, 32, 48, 0.68), rgba(10, 13, 23, 0.74));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}

.platform-points li > i {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(223, 170, 83, 0.22);
    border-radius: 8px;
    color: var(--gold-light);
    background: linear-gradient(135deg, rgba(180, 45, 51, 0.18), rgba(221, 167, 80, 0.08));
    font-size: 0.7rem;
}

.platform-points strong,
.platform-points small {
    display: block;
}

.platform-points strong {
    color: #f3eee5;
    font-size: 0.67rem;
    letter-spacing: 0.06em;
}

.platform-points small {
    margin-top: 5px;
    color: #777b84;
    font-size: 0.56rem;
    line-height: 1.35;
}

.platform-stores {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 18px;
}

.features-platform-stores {
    width: min(660px, 100%);
    margin: 28px auto 0;
}

.hero-platform-stores {
    width: min(430px, 100%);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 9px auto 0;
}

.hero-platform-stores .store-button {
    min-height: 48px;
    padding-block: 6px;
}

.hero-platform-stores .store-button > i {
    font-size: 1.05rem;
}

.hero-platform-stores .store-button small {
    font-size: 10px;
}

.hero-platform-stores .store-button strong {
    font-size: 12px;
}

.store-button {
    position: relative;
    min-height: 58px;
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: center;
    gap: 9px;
    overflow: hidden;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: white;
    box-shadow: 0 11px 24px rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.08);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.store-button::before {
    content: "";
    position: absolute;
    top: -90%;
    left: -60%;
    width: 36%;
    height: 280%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    transform: rotate(22deg);
    transition: left 0.5s ease;
}

.store-button:hover {
    box-shadow: 0 15px 32px rgba(0, 0, 0, 0.28), 0 0 20px rgba(211, 155, 68, 0.08);
    transform: translateY(-2px);
}

.store-button:hover::before {
    left: 125%;
}

.store-apple {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 44%),
        linear-gradient(120deg, #303541, #151a26 62%, #4d5361);
    border-color: rgba(196, 204, 219, 0.26);
}

.store-play {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 44%),
        linear-gradient(120deg, #173d3d, #17304a 55%, #845d25);
    border-color: rgba(99, 191, 169, 0.22);
}

.store-pc {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 44%),
        linear-gradient(120deg, #5e1722, #862127 54%, #b36f2c);
    border-color: rgba(232, 155, 87, 0.28);
}

.store-button > i {
    position: relative;
    font-size: 1.35rem;
    text-align: center;
}

.store-button span {
    position: relative;
}

.store-button small,
.store-button strong {
    display: block;
}

.store-button small {
    color: rgba(255, 255, 255, 0.62);
    font-size: 10px;
    letter-spacing: 0.045em;
}

.store-button strong {
    margin-top: 2px;
    font-size: 0.73rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.platform-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 15px 0 0;
    color: #807d79;
    font-size: 0.6rem;
    letter-spacing: 0.06em;
}

.platform-note i {
    color: #6aa477;
}

.platform-showcase {
    position: relative;
    min-height: 530px;
    isolation: isolate;
}

.platform-showcase::before {
    content: "";
    position: absolute;
    z-index: -3;
    top: 50%;
    left: 50%;
    width: 92%;
    height: 72%;
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.035);
    background: linear-gradient(180deg, rgba(20, 27, 39, 0.2), rgba(6, 9, 16, 0.05));
    transform: translate(-50%, -50%);
}

.platform-network {
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
}

.network-link {
    position: absolute;
    height: 1px;
    background: repeating-linear-gradient(90deg, rgba(129, 145, 162, 0.36) 0 9px, transparent 9px 15px);
    transform-origin: left center;
}

.network-link::before {
    content: "";
    position: absolute;
    inset: -4px 0;
    background: linear-gradient(90deg, transparent, rgba(76, 129, 160, 0.08), rgba(205, 151, 70, 0.08), transparent);
    filter: blur(4px);
}

.network-link > i {
    position: absolute;
    z-index: 2;
    top: -3px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e3b967;
    box-shadow: 0 0 7px #d69d4d, 0 0 14px rgba(214, 157, 77, 0.48);
    animation: networkPacket 3.2s linear infinite;
}

.link-pc-ios {
    top: 53%;
    left: 50%;
    width: 41%;
    transform: rotate(144deg);
}

.link-pc-android {
    top: 53%;
    left: 50%;
    width: 41%;
    transform: rotate(36deg);
}

.link-pc-android > i {
    animation-delay: -1.1s;
}

.link-ios-android {
    top: 79%;
    left: 17%;
    width: 66%;
}

.link-ios-android > i {
    background: #6da7c4;
    box-shadow: 0 0 7px #568fad, 0 0 14px rgba(86, 143, 173, 0.45);
    animation-delay: -2.1s;
}

.network-node {
    position: absolute;
    width: 8px;
    height: 8px;
    border: 1px solid rgba(226, 187, 113, 0.64);
    background: #101621;
    box-shadow: 0 0 0 4px rgba(223, 170, 83, 0.045);
    transform: translate(-50%, -50%) rotate(45deg);
}

.node-pc {
    top: 53%;
    left: 50%;
}

.node-ios {
    top: 79%;
    left: 17%;
}

.node-android {
    top: 79%;
    left: 83%;
}

.platform-device {
    position: absolute;
    border: 1px solid transparent;
    background:
        linear-gradient(#0b0e17, #0b0e17) padding-box,
        linear-gradient(135deg, rgba(200, 208, 225, 0.58), rgba(223, 170, 83, 0.48), rgba(140, 42, 48, 0.54)) border-box;
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.48), 0 0 34px rgba(53, 116, 157, 0.08);
}

.device-screen {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 38%, rgba(47, 111, 153, 0.2), transparent 42%),
        linear-gradient(155deg, #0e1421, #090b12 65%);
}

.device-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.22;
    background:
        linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.1) 48%, transparent 62%),
        url("../images/bg.jpg") center / cover;
}

.device-screen img {
    position: relative;
    z-index: 1;
    width: 54%;
    filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.45));
}

.device-screen .device-login-scene {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    filter: saturate(1.06) contrast(1.04) brightness(0.9);
}

.device-screen:has(.device-login-scene)::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 7, 12, 0.08), transparent 55%, rgba(4, 7, 12, 0.56));
    pointer-events: none;
}

.device-screen > small {
    position: absolute;
    z-index: 2;
    bottom: 14px;
    color: rgba(255, 228, 160, 0.7);
    font-size: 0.48rem;
    font-weight: 700;
    letter-spacing: 0.2em;
}

.desktop-device {
    top: 56px;
    left: 50%;
    width: 390px;
    height: 238px;
    padding: 9px;
    border-radius: 10px;
    transform: translateX(-50%);
}

.desktop-device::before {
    content: "";
    position: absolute;
    top: calc(100% + 1px);
    left: 50%;
    width: 68px;
    height: 54px;
    background: linear-gradient(90deg, #171b25, #515765 50%, #151923);
    clip-path: polygon(38% 0, 62% 0, 72% 78%, 100% 100%, 0 100%, 28% 78%);
    transform: translateX(-50%);
}

.desktop-device::after {
    content: "";
    position: absolute;
    top: calc(100% + 53px);
    left: 50%;
    width: 150px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(90deg, transparent, #59606e, transparent);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
    transform: translateX(-50%);
}

.device-status {
    position: absolute;
    z-index: 2;
    top: 13px;
    left: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #a7d7b0;
    font-size: 0.45rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.device-status i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #71c181;
    box-shadow: 0 0 8px #71c181;
}

.phone-device {
    bottom: 42px;
    width: 230px;
    height: 120px;
    padding: 7px;
    border-radius: 23px;
}

.phone-device .device-screen {
    border-radius: 17px;
}

.phone-device .device-screen > i {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 18px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 1rem;
    transform: translateY(-50%);
}

.phone-device .device-screen img {
    width: 56%;
}

.phone-device .device-screen .device-login-scene {
    width: 100%;
    height: 100%;
}

.iphone-device {
    left: 0;
    transform: rotate(-3deg);
}

.android-device {
    right: 0;
    transform: rotate(3deg);
}

.phone-speaker {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 11px;
    width: 4px;
    height: 32px;
    border-radius: 4px;
    background: #030408;
    transform: translateY(-50%);
}

.phone-camera {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 11px;
    width: 7px;
    height: 7px;
    border: 2px solid #05070b;
    border-radius: 50%;
    background: #263954;
    transform: translate(-50%, -50%);
}

.platform-live {
    position: absolute;
    bottom: 0;
    left: 50%;
    min-width: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid rgba(223, 170, 83, 0.2);
    border-radius: 99px;
    color: #b8b2aa;
    background: rgba(8, 10, 17, 0.78);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    transform: translateX(-50%);
}

.platform-live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #69bd79;
    box-shadow: 0 0 9px #69bd79;
    animation: platformPulse 1.8s ease-in-out infinite;
}

@keyframes networkPacket {
    0% {
        left: 0;
        opacity: 0;
    }
    12%,
    86% {
        opacity: 1;
    }
    100% {
        left: calc(100% - 6px);
        opacity: 0;
    }
}

@keyframes platformPulse {
    0%,
    100% {
        opacity: 0.45;
        transform: scale(0.9);
    }
    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}

@media (max-width: 1020px) {
    .foreword-layout {
        grid-template-columns: 1fr;
        gap: 72px;
    }

    .foreword-visual {
        width: min(760px, 100%);
        margin-inline: auto;
    }

    .foreword-copy {
        max-width: 760px;
        margin-inline: auto;
    }

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

    .platform-layout {
        grid-template-columns: 1fr;
    }

    .platform-copy {
        max-width: 760px;
        margin-inline: auto;
    }

    .platform-showcase {
        width: min(620px, 100%);
        margin-inline: auto;
    }
}

@media (max-width: 640px) {
    .foreword {
        padding: 84px 0 34px;
    }

    .ornate-heading {
        margin-bottom: 42px;
    }

    .ornate-heading > p:first-child {
        gap: 9px;
        font-size: 0.52rem;
    }

    .ornate-heading > p:first-child span {
        width: 26px;
    }

    .ornate-heading h2 {
        font-size: clamp(2.8rem, 14vw, 4rem);
    }

    .foreword-layout {
        gap: 58px;
    }

    .foreword-visual {
        padding: 6px;
    }

    .foreword-visual figcaption {
        right: 14px;
        bottom: -34px;
        left: 14px;
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
        padding: 13px 15px;
    }

    .foreword-copy {
        padding-left: 20px;
    }

    .foreword-copy h3 {
        font-size: 2.75rem;
    }

    .copy-lead {
        font-size: 0.9rem;
        line-height: 1.75;
    }

    .foreword-question {
        grid-template-columns: 32px 1fr;
        gap: 12px;
        padding: 17px 15px;
    }

    .foreword-question > i {
        width: 32px;
        height: 32px;
    }

    .opening-note {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px;
    }

    .opening-date {
        min-height: 52px;
    }

    .feature-pill-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .feature-pill-grid li {
        min-height: 56px;
        padding: 11px 15px;
    }

    .cross-platform {
        padding: 64px 0 78px;
    }

    .general-features {
        padding: 58px 0 46px;
    }

    .general-features .section-shell {
        width: calc(100% - 30px);
    }

    .section-bridge {
        top: 10px;
        width: calc(100% - 30px);
        gap: 8px;
    }

    .section-bridge b {
        min-height: 30px;
        padding: 7px 14px;
        font-size: 0.48rem;
    }

    .general-features .ornate-heading {
        margin-bottom: 28px;
        padding: 24px 10px 20px;
    }

    .general-features .ornate-description {
        font-size: 0.92rem;
        line-height: 1.65;
    }

    .platform-copy h2 {
        font-size: clamp(3rem, 14vw, 4.2rem);
    }

    .platform-description {
        font-size: 0.86rem;
        line-height: 1.7;
    }

    .platform-points,
    .platform-stores {
        grid-template-columns: 1fr;
    }

    .hero-platform-stores {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .platform-points li {
        min-height: 68px;
    }

    .store-button {
        min-height: 56px;
    }

    .platform-showcase {
        min-height: 410px;
    }

    .link-pc-ios,
    .link-pc-android {
        width: 45%;
    }

    .link-pc-ios {
        transform: rotate(137deg);
    }

    .link-pc-android {
        transform: rotate(43deg);
    }

    .desktop-device {
        top: 55px;
        width: min(310px, 78vw);
        height: 188px;
        padding: 7px;
    }

    .desktop-device::before {
        height: 42px;
    }

    .desktop-device::after {
        top: calc(100% + 41px);
        width: 118px;
    }

    .phone-device {
        bottom: 44px;
        width: min(174px, 44vw);
        height: auto;
        aspect-ratio: 1.92 / 1;
        padding: 5px;
        border-radius: 18px;
    }

    .phone-device .device-screen {
        border-radius: 13px;
    }

    .iphone-device {
        left: 0;
    }

    .android-device {
        right: 0;
    }

    .phone-speaker {
        top: 50%;
        left: 8px;
        width: 3px;
        height: 24px;
    }

    .phone-camera {
        top: 50%;
        left: 8px;
    }

    .platform-live {
        min-width: 205px;
        padding-inline: 12px;
        font-size: 0.48rem;
    }
}

/* Interactive in-game NPC shops */
.npc-section {
    --npc-accent: #76cbc5;
    --npc-gold: #e2ad57;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 154px 0 94px;
    color: #ece4d4;
    background: #080b12;
}

.npc-section::before,
.npc-section::after,
.npc-section-backdrop {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
}

.npc-section::before {
    z-index: -3;
    background:
        linear-gradient(180deg, rgba(8, 11, 18, 0.04) 0%, rgba(8, 11, 18, 0.34) 30%, rgba(8, 11, 18, 0.72) 76%, #080b12 100%),
        linear-gradient(90deg, rgba(8, 11, 18, 0.9), transparent 18%, transparent 82%, rgba(8, 11, 18, 0.9)),
        url("../images/characters/npc-bg.webp") center top / cover no-repeat;
    filter: saturate(0.72) brightness(0.68);
}

.npc-section::after {
    z-index: -2;
    background:
        radial-gradient(circle at 50% 38%, rgba(226, 173, 87, 0.12), transparent 30%),
        linear-gradient(180deg, transparent 55%, rgba(8, 11, 18, 0.64) 82%, #080b12 100%);
}

.npc-section-backdrop {
    z-index: -1;
    opacity: 0.2;
    background: linear-gradient(115deg, transparent 0 45%, rgba(118, 203, 197, 0.08) 50%, transparent 55%);
    background-size: 780px 100%;
}

.npc-section > .section-shell {
    width: min(1560px, calc(100% - 40px));
}

.npc-heading {
    position: relative;
    z-index: 2;
    margin-bottom: 34px;
}

.npc-heading .ornate-description {
    max-width: 760px;
    color: #c8b998;
    font: 700 1rem/1.55 "Beaufort for LOL", Georgia, serif;
}

.npc-stage {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border: 1px solid rgba(217, 165, 78, 0.3);
    background: linear-gradient(180deg, rgba(5, 8, 13, 0.2), rgba(5, 8, 13, 0.76));
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.54), inset 0 0 100px rgba(0, 0, 0, 0.24);
}

.npc-stage::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    background:
        linear-gradient(90deg, rgba(4, 7, 12, 0.72), transparent 20%, transparent 80%, rgba(4, 7, 12, 0.72)),
        linear-gradient(180deg, rgba(4, 7, 12, 0.05), rgba(4, 7, 12, 0.38) 56%, rgba(4, 7, 12, 0.88)),
        url("../images/characters/npc-bg.webp") center / cover no-repeat;
    filter: saturate(0.76) brightness(0.72);
}

.npc-world {
    position: relative;
    min-height: 650px;
    overflow: hidden;
}

.npc-world::after {
    position: absolute;
    z-index: 1;
    right: 5%;
    bottom: 0;
    left: 5%;
    height: 170px;
    content: "";
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.7), transparent 72%);
    filter: blur(9px);
    pointer-events: none;
}

.npc-actor {
    position: absolute;
    z-index: 2;
    top: 44px;
    width: 33.333%;
    height: 480px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
    outline: none;
}

.npc-actor-armorer { left: 0; }
.npc-actor-seller { left: 33.333%; }
.npc-actor-weaponsmith { right: 0; }

.npc-actor img {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 720px;
    max-width: none;
    height: 450px;
    object-fit: contain;
    object-position: center bottom;
    user-select: none;
    filter: brightness(0.66) saturate(0.62) drop-shadow(0 25px 20px rgba(0, 0, 0, 0.72));
    transform: translateX(-50%) scale(1.02);
    transform-origin: center bottom;
    transition: filter 0.28s ease, transform 0.36s cubic-bezier(0.2, 0.76, 0.2, 1), opacity 0.28s ease;
    pointer-events: none;
}

.npc-actor-weaponsmith img {
    transform: translateX(-50%) scale(1.1);
}

.npc-actor:hover img,
.npc-actor:focus-visible img,
.npc-actor.is-active img {
    filter: brightness(1.04) saturate(1.02) drop-shadow(0 0 20px rgba(118, 203, 197, 0.2)) drop-shadow(0 25px 20px rgba(0, 0, 0, 0.76));
    transform: translateX(-50%) scale(1.08);
}

.npc-actor-weaponsmith:hover img,
.npc-actor-weaponsmith:focus-visible img,
.npc-actor-weaponsmith.is-active img {
    transform: translateX(-50%) scale(1.16);
}

.npc-actor::after {
    position: absolute;
    z-index: -1;
    bottom: 12px;
    left: 50%;
    width: 180px;
    height: 68px;
    border-radius: 50%;
    content: "";
    opacity: 0;
    background: radial-gradient(ellipse, rgba(118, 203, 197, 0.26), transparent 70%);
    filter: blur(7px);
    transform: translateX(-50%);
    transition: opacity 0.28s ease;
}

.npc-actor.is-active::after {
    opacity: 1;
}

.npc-game-name,
.npc-player-name {
    position: absolute;
    z-index: 6;
    left: 50%;
    color: #65ef58;
    font: 700 8px/1 Tahoma, Arial, sans-serif;
    letter-spacing: 0;
    white-space: nowrap;
    text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, -1px 0 0 #000, 1px 0 0 #000, -1px 1px 0 #000, 0 1px 0 #000, 1px 1px 0 #000, 0 0 4px #000;
    transform: translateX(-50%);
    pointer-events: none;
}

.npc-game-name { top: 10px; }
.npc-actor-weaponsmith .npc-game-name { top: 72px; }

.npc-actor.is-active .npc-game-name {
    color: #8aff76;
    text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, -1px 0 0 #000, 1px 0 0 #000, -1px 1px 0 #000, 0 1px 0 #000, 1px 1px 0 #000, 0 0 6px rgba(102, 255, 86, 0.8);
}

.npc-player {
    position: absolute;
    z-index: 5;
    bottom: -10px;
    left: 50%;
    width: 650px;
    height: 440px;
    transform: translateX(-50%);
    pointer-events: none;
}

.npc-player > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    filter: brightness(0.98) saturate(0.96) drop-shadow(0 26px 22px rgba(0, 0, 0, 0.78));
    transform: scale(1.72);
    transform-origin: center bottom;
    transition: opacity 0.44s ease, transform 0.58s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.44s ease;
}

.npc-player-equipped {
    opacity: 0;
}

.npc-player.is-equipped .npc-player-base {
    opacity: 0;
    transform: scale(1.78);
    filter: brightness(1.2) saturate(1.14) blur(1px);
}

.npc-player.is-equipped .npc-player-equipped {
    opacity: 1;
    transform: scale(1.76);
    filter: brightness(1.08) saturate(1.1) drop-shadow(0 0 24px rgba(226, 173, 87, 0.24)) drop-shadow(0 26px 22px rgba(0, 0, 0, 0.78));
}

.npc-player-name {
    top: 69px;
}

.npc-equip-burst {
    position: absolute;
    z-index: 8;
    left: 50%;
    top: 53%;
    width: 6px;
    height: 6px;
    border: 1px solid rgba(255, 213, 127, 0.9);
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 22px 12px rgba(255, 207, 110, 0.86), 0 0 95px 58px rgba(203, 71, 38, 0.28);
    transform: translate(-50%, -50%);
}

.npc-player.is-changing .npc-equip-burst {
    animation: npc-equip-burst 0.9s ease-out;
}

.npc-player.is-changing::after {
    position: absolute;
    z-index: 7;
    left: 50%;
    top: 52%;
    width: 210px;
    height: 320px;
    border: 1px solid rgba(230, 177, 86, 0.74);
    border-radius: 50%;
    content: "";
    animation: npc-equip-ring 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translate(-50%, -50%);
}

@keyframes npc-equip-burst {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.18); }
    30% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(3.2); }
}

@keyframes npc-equip-ring {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.42); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.38); }
}

.npc-shop {
    position: relative;
    z-index: 8;
    margin: 0 28px 28px;
    border: 1px solid rgba(118, 203, 197, 0.34);
    background: linear-gradient(135deg, rgba(14, 22, 29, 0.96), rgba(8, 12, 19, 0.97));
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.42), inset 0 0 50px rgba(118, 203, 197, 0.035);
}

.npc-shop-head {
    display: grid;
    min-height: 78px;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.065);
    background: linear-gradient(90deg, rgba(118, 203, 197, 0.1), transparent 58%);
}

.npc-shop-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(118, 203, 197, 0.42);
    color: #8ddbd6;
    background: rgba(118, 203, 197, 0.08);
}

.npc-shop-head > div:nth-child(2) {
    display: grid;
    gap: 3px;
}

.npc-shop-head small {
    color: #708292;
    font-size: 0.52rem;
    font-weight: 900;
    letter-spacing: 0.16em;
}

.npc-shop-head h3 {
    margin: 0;
    color: #f4dfb6;
    font: 700 1.35rem/1 "Beaufort for LOL", Georgia, serif;
}

.npc-shop-head > span {
    min-width: 76px;
    padding: 8px 11px;
    border: 1px solid rgba(226, 173, 87, 0.2);
    color: #d5b573;
    background: rgba(226, 173, 87, 0.06);
    font-size: 0.54rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-align: center;
}

.npc-shop-items {
    display: grid;
    min-height: 112px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 18px;
}

.npc-shop-item {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 88px;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 8px;
    border: 1px solid rgba(142, 158, 178, 0.15);
    color: #d9dce1;
    background: linear-gradient(135deg, rgba(29, 36, 47, 0.88), rgba(12, 17, 24, 0.94));
    animation: npc-item-in 0.36s both;
}

.npc-shop-item:nth-child(2) { animation-delay: 35ms; }
.npc-shop-item:nth-child(3) { animation-delay: 70ms; }
.npc-shop-item:nth-child(4) { animation-delay: 105ms; }
.npc-shop-item:nth-child(5) { animation-delay: 140ms; }
.npc-shop-item:nth-child(6) { animation-delay: 175ms; }

@keyframes npc-item-in {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: none; }
}

.npc-shop-item > span:first-child {
    display: grid;
    width: 42px;
    height: 70px;
    place-items: center;
    border: 1px solid rgba(226, 173, 87, 0.22);
    background: radial-gradient(circle, rgba(194, 130, 42, 0.14), rgba(3, 5, 8, 0.72));
}

.npc-shop-item img {
    display: block;
    width: auto;
    max-width: 32px;
    height: auto;
    max-height: 64px;
    image-rendering: pixelated;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.9));
}

.npc-shop-item > span:last-child {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.npc-shop-item strong {
    overflow: hidden;
    color: #e4e0d7;
    font-size: 0.65rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.npc-shop-item small {
    color: #73808f;
    font-size: 0.52rem;
}

.npc-shop-foot {
    display: flex;
    min-height: 68px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.018);
}

.npc-shop-foot p {
    margin: 0;
    color: #7f8b99;
    font-size: 0.62rem;
}

.npc-shop-foot p i {
    margin-right: 7px;
    color: var(--npc-accent);
}

.npc-shop-foot button {
    min-width: 230px;
    min-height: 44px;
    padding: 0 20px;
    border: 1px solid rgba(106, 203, 153, 0.48);
    color: #eff8f1;
    background: linear-gradient(110deg, #17452e, #28714a 52%, #17452e);
    background-size: 200% 100%;
    font: 900 0.64rem/1 "Beaufort for LOL", Georgia, serif;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: filter 0.2s ease, background-position 0.3s ease, transform 0.2s ease;
}

.npc-shop-foot button:hover,
.npc-shop-foot button:focus-visible {
    background-position: 100% 0;
    filter: brightness(1.14);
    transform: translateY(-1px);
}

.npc-shop-foot button.is-complete {
    border-color: rgba(226, 173, 87, 0.52);
    color: #ffe6ae;
    background: linear-gradient(110deg, #5a3517, #9a6427 52%, #5a3517);
}

@media (max-width: 1100px) {
    .npc-world { min-height: 590px; }
    .npc-actor { height: 420px; }
    .npc-actor img { width: 590px; height: 410px; }
    .npc-player { width: 560px; height: 400px; }
    .npc-player > img { transform: scale(1.58); }
    .npc-player.is-equipped .npc-player-base { transform: scale(1.64); }
    .npc-player.is-equipped .npc-player-equipped { transform: scale(1.62); }
    .npc-shop-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .npc-section { padding-bottom: 64px; }
    .npc-section > .section-shell { width: min(100% - 20px, 1560px); }
    .npc-heading { margin-bottom: 24px; }
    .npc-heading .ornate-description { padding-inline: 12px; font-size: 0.86rem; }
    .npc-world { min-height: 570px; }
    .npc-actor { top: 28px; height: 280px; }
    .npc-actor img { width: 370px; height: 280px; }
    .npc-actor-weaponsmith img { transform: translateX(-50%) scale(1.08); }
    .npc-game-name { top: 8px; }
    .npc-actor-weaponsmith .npc-game-name { top: 48px; }
    .npc-player { bottom: -10px; width: 510px; max-width: 142vw; height: 350px; }
    .npc-player > img { transform: scale(1.48); }
    .npc-player.is-equipped .npc-player-base { transform: scale(1.54); }
    .npc-player.is-equipped .npc-player-equipped { transform: scale(1.52); }
    .npc-player-name { top: 58px; }
    .npc-shop { margin: 0 10px 10px; }
    .npc-shop-head { grid-template-columns: 42px minmax(0, 1fr) auto; padding-inline: 12px; }
    .npc-shop-items { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px 12px; }
    .npc-shop-item { min-height: 82px; grid-template-columns: 38px minmax(0, 1fr); }
    .npc-shop-item > span:first-child { width: 36px; height: 64px; }
    .npc-shop-foot { align-items: stretch; flex-direction: column; padding: 12px; }
    .npc-shop-foot button { width: 100%; min-width: 0; }
}

/* Cross-platform → character scene continuity */
.cross-platform {
    padding-bottom: 72px;
    border-bottom: 0;
    background: linear-gradient(180deg, #0c1220 0%, #101827 48%, #0b111e 78%, #080b12 100%);
    box-shadow: inset 0 -90px 95px -86px rgba(8, 11, 18, 0.96);
}

.cross-platform::before {
    background:
        linear-gradient(180deg, #0c1220 0%, rgba(12, 18, 32, 0.3) 38%, rgba(9, 13, 22, 0.68) 76%, #080b12 100%),
        linear-gradient(90deg, #0c1220 0%, transparent 42%, transparent 66%, #0b111f 100%),
        url("../images/bg.jpg") center 42% / cover fixed;
}

.character-select {
    margin-top: -112px;
    padding-top: 168px;
    padding-bottom: 92px;
    background: linear-gradient(180deg, rgba(8, 11, 18, 0) 0%, rgba(8, 11, 18, 0.62) 72px, #080b12 178px);
}

.character-select::after {
    background:
        linear-gradient(180deg, transparent 58%, rgba(8, 11, 18, 0.18) 70%, rgba(8, 11, 18, 0.78) 88%, #080b12 100%),
        radial-gradient(circle at 50% 42%, rgba(215, 158, 63, 0.11), transparent 32%),
        linear-gradient(90deg, #080b12 0%, transparent 18%, transparent 82%, #080b12 100%);
}

/* Reusable seamless scene transition.
   Add `scene-flow` to every new image-backed section. */
.scene-flow {
    --scene-flow-overlap: 40px;
    --scene-flow-padding: 160px;
    --scene-flow-image-y: 0px;
    margin-top: calc(var(--scene-flow-overlap) * -1);
    padding-top: var(--scene-flow-padding);
    background: linear-gradient(180deg, transparent 0, rgba(8, 11, 18, 0.2) 38px, rgba(8, 11, 18, 0.62) 96px, #080b12 178px, #090d16 100%);
}

.scene-flow > .section-shell {
    position: relative;
    z-index: 1;
}

.scene-flow-fade {
    position: absolute;
    z-index: 0;
    top: -3px;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
    pointer-events: none;
    background: linear-gradient(180deg, #080b12 0, #080b12 48px, rgba(8, 11, 18, 0.98) 82px, rgba(8, 11, 18, 0.82) 148px, rgba(8, 11, 18, 0.5) 220px, rgba(8, 11, 18, 0.18) 286px, transparent 340px, transparent 100%);
}

.scene-flow::before {
    background-position: 0 0, 0 0, center var(--scene-flow-image-y);
    -webkit-mask-image: none;
    mask-image: none;
}

.scene-flow::after,
.scene-flow > .legal-trade-backdrop,
.scene-flow > .game-start-backdrop {
    -webkit-mask-image: none;
    mask-image: none;
}

.legal-trade.scene-flow {
    --scene-flow-overlap: 40px;
    --scene-flow-padding: 160px;
    --scene-flow-image-y: 0px;
}

.game-start.scene-flow {
    --scene-flow-overlap: 40px;
    --scene-flow-padding: 160px;
    --scene-flow-image-y: 0px;
}

.character-select::before {
    top: 0;
    background:
        linear-gradient(180deg, rgba(8, 11, 18, 0) 0%, rgba(8, 11, 18, 0.46) 15%, rgba(8, 11, 18, 0.66) 32%, rgba(8, 11, 18, 0.74) 76%, #080b12 100%),
        url("../images/characters/character-select-bg.jpg") center 18% / cover no-repeat;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.42) 90px, #000 190px);
    mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.42) 90px, #000 190px);
}

.character-select::after {
    top: 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 190px);
    mask-image: linear-gradient(180deg, transparent 0, #000 190px);
}

.character-bridge {
    display: none;
}

.character-select-backdrop {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 210px);
    mask-image: linear-gradient(180deg, transparent 0, #000 210px);
}

@media (max-width: 640px) {
    .cross-platform {
        padding-bottom: 50px;
    }

    .character-select {
        margin-top: -76px;
        padding-top: 116px;
        padding-bottom: 58px;
        background: linear-gradient(180deg, rgba(8, 11, 18, 0) 0%, rgba(8, 11, 18, 0.7) 52px, #080b12 126px);
    }

    .scene-flow {
        --scene-flow-overlap: 28px;
        --scene-flow-padding: 112px;
        --scene-flow-image-y: 0px;
    }

    .scene-flow-fade {
        background: linear-gradient(180deg, #080b12 0, #080b12 34px, rgba(8, 11, 18, 0.94) 66px, rgba(8, 11, 18, 0.7) 116px, rgba(8, 11, 18, 0.3) 178px, transparent 240px, transparent 100%);
    }
}

/* Final NPC layout overrides */
.npc-section.scene-flow {
    --scene-flow-overlap: 72px;
    --scene-flow-padding: 188px;
}

.npc-section::before {
    background:
        linear-gradient(180deg, #080b12 0%, rgba(8, 11, 18, 0.96) 9%, rgba(8, 11, 18, 0.8) 22%, rgba(8, 11, 18, 0.52) 42%, rgba(8, 11, 18, 0.76) 78%, #080b12 100%),
        linear-gradient(90deg, rgba(8, 11, 18, 0.9), transparent 20%, transparent 80%, rgba(8, 11, 18, 0.9)),
        url("../images/characters/npc-bg.webp") center top / cover no-repeat;
    filter: saturate(0.68) brightness(0.62);
}

.npc-section .scene-flow-fade {
    height: 310px;
    bottom: auto;
    background: linear-gradient(180deg, #080b12 0 52px, rgba(8, 11, 18, 0.97) 96px, rgba(8, 11, 18, 0.82) 162px, rgba(8, 11, 18, 0.38) 240px, transparent 100%);
}

.npc-heading,
.npc-heading .ornate-description {
    text-shadow: 0 3px 16px #000, 0 0 34px rgba(0, 0, 0, 0.94);
}

.npc-heading .ornate-description { color: #eadbbd; }
.npc-world { min-height: 690px; }

.npc-actor {
    top: auto;
    bottom: 62px;
    height: 500px;
}

.npc-actor img,
.npc-actor:hover img,
.npc-actor:focus-visible img,
.npc-actor.is-active img {
    width: 720px;
    height: 450px;
    transform: translateX(-50%) scale(1.02);
}

.npc-actor-weaponsmith img,
.npc-actor-weaponsmith:hover img,
.npc-actor-weaponsmith:focus-visible img,
.npc-actor-weaponsmith.is-active img {
    transform: translateX(-50%) scale(1.1);
}

.npc-game-name,
.npc-player-name { font: 700 10px/1 Tahoma, Arial, sans-serif; }
.npc-game-name { top: 10px; }
.npc-actor-weaponsmith .npc-game-name { top: 72px; }

.npc-player {
    bottom: 52px;
    width: 565px;
    height: 420px;
}

.npc-player > img,
.npc-player.is-equipped .npc-player-base,
.npc-player.is-equipped .npc-player-equipped { transform: scale(1.47); }
.npc-player-name { top: 8px; }
.npc-player.is-changing::after { content: none; animation: none; }

.npc-equip-burst {
    top: 16%;
    left: 50%;
    width: 250px;
    height: 330px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background:
        radial-gradient(circle at 30% 18%, #fff8cc 0 2px, transparent 3px),
        radial-gradient(circle at 68% 31%, #ffce64 0 2px, transparent 3px),
        radial-gradient(circle at 25% 72%, #fff1a2 0 2px, transparent 3px),
        radial-gradient(circle at 77% 81%, #e99a35 0 2px, transparent 3px);
    transform: translateX(-50%);
}

.npc-player.is-changing .npc-equip-burst { animation: npc-equip-shards 0.95s ease-out both; }

@media (max-width: 1100px) {
    .npc-world { min-height: 640px; }
    .npc-actor { bottom: 70px; height: 430px; }
    .npc-actor img,
    .npc-actor:hover img,
    .npc-actor:focus-visible img,
    .npc-actor.is-active img { width: 590px; height: 410px; }
    .npc-player { bottom: 58px; width: 500px; height: 390px; }
    .npc-player > img,
    .npc-player.is-equipped .npc-player-base,
    .npc-player.is-equipped .npc-player-equipped { transform: scale(1.42); }
}

@media (max-width: 700px) {
    .npc-section.scene-flow {
        --scene-flow-overlap: 42px;
        --scene-flow-padding: 132px;
    }
    .npc-world { min-height: 590px; }
    .npc-actor { top: auto; bottom: 244px; height: 255px; }
    .npc-actor img,
    .npc-actor:hover img,
    .npc-actor:focus-visible img,
    .npc-actor.is-active img { width: 350px; height: 270px; }
    .npc-actor-weaponsmith img,
    .npc-actor-weaponsmith:hover img,
    .npc-actor-weaponsmith:focus-visible img,
    .npc-actor-weaponsmith.is-active img { transform: translateX(-50%) scale(1.08); }
    .npc-game-name { top: 7px; }
    .npc-actor-weaponsmith .npc-game-name { top: 45px; }
    .npc-player { bottom: 56px; width: 430px; height: 330px; }
    .npc-player > img,
    .npc-player.is-equipped .npc-player-base,
    .npc-player.is-equipped .npc-player-equipped { transform: scale(1.35); }
    .npc-player-name { top: 18px; }
}

@media (min-width: 1101px) {
    .npc-actor { bottom: 24px; }
    .npc-player { bottom: -18px; }
}

@media (min-width: 701px) and (max-width: 1100px) {
    .npc-actor { bottom: 32px; }
    .npc-player { bottom: -8px; }
}

/* NPC depth and fixed shop-window behavior */
.npc-actor-seller {
    bottom: 94px;
    z-index: 3;
}

.npc-actor-seller img,
.npc-actor-seller:hover img,
.npc-actor-seller:focus-visible img,
.npc-actor-seller.is-active img {
    transform: translateX(-50%) scale(0.94);
}

@media (min-width: 1101px) {
    .npc-player {
        bottom: -65px;
        width: 540px;
    }

    .npc-player > img,
    .npc-player.is-equipped .npc-player-base,
    .npc-player.is-equipped .npc-player-equipped {
        transform: scale(1.34);
    }
}

body .npc-world[data-active-npc] .npc-store-preview {
    right: auto;
    bottom: 58px;
    left: 67%;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(8px) scale(0.97);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.24s ease;
}

body .npc-world[data-active-npc] .npc-store-preview.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}

body .npc-world[data-active-npc] .npc-store-preview.is-changing {
    animation: npc-shop-fixed-in 0.25s ease both;
}

@keyframes npc-shop-fixed-in {
    from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@media (min-width: 701px) and (max-width: 1100px) {
    .npc-actor-seller { bottom: 86px; }
    .npc-player { bottom: -42px; width: 475px; }
    .npc-player > img,
    .npc-player.is-equipped .npc-player-base,
    .npc-player.is-equipped .npc-player-equipped { transform: scale(1.32); }
}

@media (max-width: 700px) {
    .npc-actor-seller { bottom: 274px; }
    body .npc-world[data-active-npc] .npc-store-preview {
        bottom: 64px;
        left: 76%;
    }
}

/* Separate bridge equipment scene */
.npc-world {
    min-height: 610px;
}

.npc-actor-seller {
    bottom: 24px;
    z-index: 2;
}

.npc-actor-seller img,
.npc-actor-seller:hover img,
.npc-actor-seller:focus-visible img,
.npc-actor-seller.is-active img {
    transform: translateX(-50%) scale(1.02);
}

.npc-equipment-stage {
    position: relative;
    min-height: 570px;
    overflow: hidden;
    border-top: 1px solid rgba(226, 173, 87, 0.32);
    background:
        linear-gradient(180deg, rgba(5, 8, 13, 0.24), rgba(5, 8, 13, 0.04) 30%, rgba(5, 8, 13, 0.32) 68%, rgba(5, 8, 13, 0.92) 100%),
        linear-gradient(90deg, rgba(5, 8, 13, 0.76), transparent 22%, transparent 78%, rgba(5, 8, 13, 0.76)),
        url("../images/characters/baslangic-bg.webp") center 50% / cover no-repeat;
    box-shadow: inset 0 30px 50px rgba(0, 0, 0, 0.28);
}

.npc-equipment-stage::after {
    position: absolute;
    z-index: 1;
    right: 12%;
    bottom: 36px;
    left: 12%;
    height: 74px;
    border-radius: 50%;
    content: "";
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.58), transparent 72%);
    filter: blur(12px);
    pointer-events: none;
}

.npc-equipment-label {
    position: absolute;
    z-index: 8;
    top: 26px;
    left: 28px;
    display: grid;
    gap: 6px;
    max-width: 330px;
    padding: 14px 18px;
    border-left: 2px solid #d9a13f;
    color: #e8dbc2;
    background: linear-gradient(90deg, rgba(7, 11, 17, 0.88), rgba(7, 11, 17, 0.34), transparent);
    text-shadow: 0 2px 10px #000;
}

.npc-equipment-label small {
    color: #d6a34d;
    font-size: 0.5rem;
    font-weight: 900;
    letter-spacing: 0.16em;
}

.npc-equipment-label strong {
    font: 700 1.15rem/1.15 "Beaufort for LOL", Georgia, serif;
}

.npc-equipment-stage .npc-player {
    z-index: 5;
    bottom: 58px;
    width: 660px;
    height: 470px;
}

.npc-equipment-stage .npc-player > img,
.npc-equipment-stage .npc-player.is-equipped .npc-player-base,
.npc-equipment-stage .npc-player.is-equipped .npc-player-equipped {
    transform: scale(1.08);
}

.npc-equipment-stage .npc-player-name {
    top: 16px;
}

.npc-equipment-stage .npc-equip-button {
    bottom: 18px;
}

@media (max-width: 1100px) {
    .npc-world { min-height: 570px; }
    .npc-equipment-stage { min-height: 535px; }
    .npc-equipment-stage .npc-player {
        bottom: 56px;
        width: 570px;
        height: 430px;
    }
    .npc-equipment-stage .npc-player > img,
    .npc-equipment-stage .npc-player.is-equipped .npc-player-base,
    .npc-equipment-stage .npc-player.is-equipped .npc-player-equipped {
        transform: scale(1.1);
    }
}

@media (max-width: 700px) {
    .npc-world { min-height: 560px; }
    .npc-actor-seller { bottom: 244px; }
    .npc-equipment-stage {
        min-height: 500px;
        background-position: 45% 50%;
    }
    .npc-equipment-label {
        top: 16px;
        left: 16px;
        padding: 10px 12px;
    }
    .npc-equipment-label strong { font-size: 0.9rem; }
    .npc-equipment-stage .npc-player {
        bottom: 50px;
        width: 440px;
        height: 350px;
    }
    .npc-equipment-stage .npc-player > img,
    .npc-equipment-stage .npc-player.is-equipped .npc-player-base,
    .npc-equipment-stage .npc-player.is-equipped .npc-player-equipped {
        transform: scale(1.12);
    }
    .npc-equipment-stage .npc-player-name { top: 20px; }
    .npc-equipment-stage .npc-equip-button { bottom: 12px; }
}

/* Grounded NPC scene and centered modal shop */
.npc-stage::before {
    content: none;
}

.npc-world {
    isolation: isolate;
    background:
        linear-gradient(180deg, rgba(5, 8, 13, 0.18), rgba(5, 8, 13, 0.06) 44%, rgba(5, 8, 13, 0.38) 82%, rgba(5, 8, 13, 0.78) 100%),
        linear-gradient(90deg, rgba(5, 8, 13, 0.58), transparent 20%, transparent 80%, rgba(5, 8, 13, 0.58)),
        url("../images/characters/npc-bg.webp") center bottom / cover no-repeat;
}

.npc-actor,
.npc-actor-seller {
    bottom: -10px;
}

.npc-store-backdrop {
    position: absolute;
    z-index: 20;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    opacity: 0;
    visibility: hidden;
    background: rgba(4, 7, 12, 0.42);
    -webkit-backdrop-filter: blur(7px) saturate(0.7);
    backdrop-filter: blur(7px) saturate(0.7);
    cursor: pointer;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.npc-world.is-shop-open .npc-store-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body .npc-world[data-active-npc] .npc-store-preview {
    z-index: 22;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: 272px;
    opacity: 0;
    visibility: hidden;
    filter: drop-shadow(0 24px 32px rgba(0, 0, 0, 0.9));
    transform: translate(-50%, -46%) scale(0.96);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.25s ease;
    pointer-events: none;
}

body .npc-world[data-active-npc] .npc-store-preview.is-open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

body .npc-world[data-active-npc] .npc-store-preview.is-changing {
    animation: npc-shop-modal-in 0.28s ease both;
}

@keyframes npc-shop-modal-in {
    from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.npc-store-close {
    position: absolute;
    z-index: 3;
    top: 5px;
    right: 5px;
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(230, 203, 164, 0.5);
    color: #f1e2cb;
    background: linear-gradient(180deg, #4a4b49, #1f2425);
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.7);
    cursor: pointer;
}

.npc-store-close:hover,
.npc-store-close:focus-visible {
    color: #fff;
    filter: brightness(1.2);
}

@media (max-width: 700px) {
    .npc-actor,
    .npc-actor-seller { bottom: 0; }
    body .npc-world[data-active-npc] .npc-store-preview { width: 220px; }
}

/* Offline market */
.offline-market {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 112px 0 96px;
    background: #070c16;
}

.offline-market::before,
.offline-market::after,
.offline-market-backdrop {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
}

.offline-market-backdrop {
    z-index: -3;
    background:
        linear-gradient(180deg, #070c16 0%, rgba(7, 12, 22, 0.15) 15%, rgba(7, 12, 22, 0.42) 72%, #070c16 100%),
        url("../images/characters/legal-bg.webp") center 18% / cover no-repeat;
    opacity: 0.72;
    filter: saturate(0.72) brightness(0.68);
}

.offline-market::before {
    z-index: -2;
    background:
        radial-gradient(circle at 25% 44%, rgba(217, 157, 65, 0.13), transparent 32%),
        radial-gradient(circle at 77% 49%, rgba(75, 188, 185, 0.12), transparent 34%),
        linear-gradient(90deg, rgba(5, 9, 17, 0.82), transparent 22%, transparent 78%, rgba(5, 9, 17, 0.82));
}

.offline-market::after {
    z-index: -1;
    background: linear-gradient(180deg, #070c16 0, transparent 13%, transparent 87%, #070c16 100%);
}

.offline-market > .section-shell {
    position: relative;
    z-index: 1;
}

.offline-market-heading {
    margin-bottom: 42px;
}

.offline-market-heading .ornate-description {
    color: #d0c6b6;
}

.offline-market-stage {
    position: relative;
    min-height: 720px;
    overflow: hidden;
    border: 0;
    background:
        linear-gradient(180deg, rgba(6, 11, 19, 0.28), rgba(6, 11, 19, 0.86)),
        url("../images/characters/legal-bg.webp") center / cover no-repeat;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5), inset 0 0 80px rgba(3, 7, 14, 0.7);
}

.offline-market-stage::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at 19% 82%, rgba(216, 153, 57, 0.15), transparent 31%),
        radial-gradient(ellipse at 77% 58%, rgba(65, 182, 177, 0.12), transparent 33%),
        linear-gradient(180deg, rgba(4, 8, 15, 0.12), rgba(4, 8, 15, 0.72));
    content: "";
    pointer-events: none;
}

.offline-market-stage::after {
    position: absolute;
    right: 28px;
    bottom: 26px;
    left: 28px;
    z-index: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(223, 170, 83, 0.38), transparent);
    content: "";
}

.offline-market-hint {
    position: absolute;
    z-index: 8;
    top: 22px;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 16px;
    border: 1px solid rgba(223, 170, 83, 0.24);
    color: #d9d0c2;
    background: rgba(6, 10, 18, 0.88);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3);
    font-size: 12px;
    letter-spacing: 0.04em;
    transform: translateX(-50%);
    white-space: nowrap;
}

.offline-market-hint i { color: #75d0ca; }

.offline-character-zone {
    position: absolute;
    z-index: 2;
    bottom: 88px;
    left: 9%;
    width: 43%;
    height: 590px;
    pointer-events: none;
}

.offline-character-zone::after {
    position: absolute;
    right: 10%;
    bottom: 22px;
    left: 11%;
    z-index: -1;
    height: 54px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.72), transparent 68%);
    content: "";
    filter: blur(5px);
}

.offline-character-zone > img {
    position: absolute;
    right: -260px;
    bottom: -8px;
    width: 800px;
    max-width: none;
    height: auto;
    filter: drop-shadow(0 24px 25px rgba(0, 0, 0, 0.68));
    transform-origin: 54% 90%;
    transition: opacity 0.24s ease, filter 0.3s ease, transform 0.45s ease;
}

.offline-game-name {
    position: absolute;
    z-index: 4;
    top: 58px;
    left: 65%;
    color: #6cff58;
    font: 700 11px/1 Tahoma, Arial, sans-serif;
    text-shadow: -1px -1px #020500, 1px -1px #020500, -1px 1px #020500, 1px 1px #020500, 0 0 6px #193b12;
    transform: translateX(-50%);
}

.offline-character-zone.is-switching > img {
    animation: offline-character-swap 0.42s ease both;
}

.offline-character-zone.is-leaving > img {
    animation: offline-character-exit 0.95s cubic-bezier(0.22, 0.76, 0.32, 1) forwards;
}

.offline-character-zone.is-leaving .offline-game-name { opacity: 0; }

.offline-exit-effect {
    position: absolute;
    z-index: 5;
    top: 9%;
    left: 22%;
    width: 270px;
    height: 540px;
    opacity: 0;
    background:
        radial-gradient(circle at 50% 78%, rgba(255, 195, 80, 0.88) 0 2px, transparent 3px),
        radial-gradient(circle at 44% 38%, rgba(104, 221, 214, 0.78) 0 2px, transparent 3px),
        radial-gradient(circle at 68% 56%, rgba(255, 226, 157, 0.85) 0 2px, transparent 3px),
        linear-gradient(90deg, transparent 42%, rgba(108, 226, 218, 0.48) 49%, rgba(255, 211, 120, 0.58) 52%, transparent 60%);
    filter: blur(0.4px) drop-shadow(0 0 18px rgba(88, 208, 200, 0.65));
    transform: scaleY(0.1);
    transform-origin: bottom;
}

.offline-character-zone.is-leaving .offline-exit-effect {
    animation: offline-exit-light 1.05s ease-out both;
}

.offline-equipment {
    position: absolute;
    z-index: 6;
    top: 108px;
    left: 32%;
    width: 270px;
    padding: 14px;
    border: 1px solid rgba(220, 164, 80, 0.32);
    background: linear-gradient(145deg, rgba(12, 18, 29, 0.96), rgba(8, 13, 22, 0.9));
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.38);
}

.offline-equipment > header,
.offline-shop-title,
.offline-shop-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.offline-equipment > header {
    margin-bottom: 10px;
    color: #e7c477;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.13em;
}

.offline-equipment > header small { color: #6dc4c0; }

.offline-source-item {
    display: grid;
    grid-template-columns: 44px 1fr 20px;
    align-items: center;
    width: 100%;
    min-height: 69px;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ede5d7;
    text-align: left;
    background: linear-gradient(100deg, rgba(25, 34, 49, 0.96), rgba(13, 19, 30, 0.96));
    cursor: grab;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.offline-source-item:hover,
.offline-source-item:focus-visible {
    border-color: rgba(223, 170, 83, 0.52);
    background: linear-gradient(100deg, rgba(54, 42, 31, 0.96), rgba(18, 25, 37, 0.96));
    transform: translateX(3px);
}

.offline-source-item.is-placed {
    opacity: 0.2;
    pointer-events: none;
}

.offline-source-item.is-dragging { opacity: 0.38; }

.offline-item-icon {
    display: grid;
    width: 38px;
    height: 54px;
    place-items: center;
    border: 1px solid rgba(223, 170, 83, 0.28);
    background: radial-gradient(circle, rgba(223, 170, 83, 0.11), rgba(0, 0, 0, 0.42));
}

.offline-item-icon img {
    width: auto;
    max-width: 32px;
    height: auto;
    max-height: 64px;
    image-rendering: auto;
}

.offline-source-item > span:nth-child(2) { min-width: 0; padding-left: 3px; }
.offline-source-item strong { display: block; font-size: 13px; color: #f1dfbd; }
.offline-source-item small { display: block; margin-top: 5px; color: #818b9a; font-size: 10px; }
.offline-source-item > i { color: #6d7888; font-size: 13px; }

.offline-shop-console {
    position: absolute;
    z-index: 5;
    top: 82px;
    right: 3%;
    width: 420px;
    border: 1px solid rgba(88, 198, 191, 0.36);
    background: linear-gradient(180deg, rgba(13, 21, 32, 0.98), rgba(6, 11, 18, 0.98));
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.52), inset 0 1px rgba(255, 255, 255, 0.04);
}

.offline-shop-title,
.offline-shop-footer {
    min-height: 46px;
    padding: 0 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #eadbbf;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
}

.offline-shop-title span i { margin-right: 8px; color: #70cbc6; }
.offline-shop-title b { color: #7c8797; font-size: 9px; letter-spacing: 0.12em; }

.offline-shop-body {
    position: relative;
    height: 390px;
    overflow: hidden;
    background:
        linear-gradient(rgba(255, 255, 255, 0.036) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.036) 1px, transparent 1px),
        radial-gradient(circle at 50% 42%, rgba(72, 177, 170, 0.12), rgba(2, 6, 12, 0.92) 65%);
    background-size: 65px 65px, 65px 65px, auto;
}

.offline-shop-model {
    position: absolute;
    z-index: 0;
    top: 100px;
    left: -28px;
    width: 270px;
    max-width: none;
    opacity: 0.37;
    filter: saturate(0.65) drop-shadow(0 18px 28px rgba(0, 0, 0, 0.65));
    pointer-events: none;
    transition: opacity 0.35s ease, filter 0.35s ease;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, rgba(0, 0, 0, 0.42) 92%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 72%, rgba(0, 0, 0, 0.42) 92%, transparent 100%);
}

.offline-shop-grid {
    position: absolute;
    z-index: 2;
    top: 31px;
    right: 28px;
    display: grid;
    grid-template-columns: repeat(5, 52px);
    grid-template-rows: repeat(6, 52px);
    border-top: 1px solid rgba(181, 142, 76, 0.34);
    border-left: 1px solid rgba(181, 142, 76, 0.34);
    background: rgba(1, 5, 10, 0.54);
}

.offline-shop-grid::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 51px, rgba(181, 142, 76, 0.34) 52px) 0 0 / 52px 52px,
        linear-gradient(transparent 51px, rgba(181, 142, 76, 0.34) 52px) 0 0 / 52px 52px;
    content: "";
    pointer-events: none;
}

.offline-shop-grid.is-over {
    outline: 1px solid #70cbc6;
    box-shadow: 0 0 24px rgba(74, 199, 191, 0.22), inset 0 0 24px rgba(74, 199, 191, 0.08);
}

.offline-shop-empty {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 39px;
    display: grid;
    width: 238px;
    place-items: center;
    margin: 0;
    color: #707b89;
    font-size: 10px;
    letter-spacing: 0.08em;
    transform: translateY(-50%);
    pointer-events: none;
}

.offline-shop-empty i { margin-bottom: 8px; color: #a9803d; font-size: 18px; }
.offline-shop-empty[hidden] { display: none; }

.offline-grid-item {
    position: absolute;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 52px;
    height: 104px;
    padding: 0;
    border: 1px solid rgba(223, 170, 83, 0.55);
    color: #fff;
    background: radial-gradient(circle, rgba(166, 116, 46, 0.22), rgba(5, 8, 13, 0.9));
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.55), 0 0 14px rgba(221, 162, 72, 0.1);
    cursor: grab;
    transition: filter 0.2s ease, transform 0.2s ease;
}

.offline-grid-item:hover { filter: brightness(1.22); transform: translateY(-2px); }
.offline-grid-item img { width: auto; max-width: 44px; height: auto; max-height: 86px; pointer-events: none; }
.offline-grid-item span {
    position: absolute;
    right: 2px;
    bottom: 1px;
    color: #ffe39e;
    font: 700 9px/1 Tahoma, Arial, sans-serif;
    text-shadow: 0 1px 2px #000;
}

.offline-shop-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: 0;
}

.offline-shop-footer span { display: flex; align-items: center; gap: 8px; color: #8893a1; }
.offline-shop-footer span i { width: 7px; height: 7px; border-radius: 50%; background: #7c8797; }
.offline-shop-footer strong { color: #e7c473; font-size: 14px; }

.offline-shop-console.is-online { border-color: rgba(104, 225, 154, 0.58); }
.offline-shop-console.is-online .offline-shop-title b { color: #74dd9b; }
.offline-shop-console.is-online .offline-shop-footer span i { background: #67dc94; box-shadow: 0 0 9px #67dc94; }
.offline-shop-console.is-online .offline-shop-model { opacity: 0.78; filter: saturate(1.1) drop-shadow(0 0 22px rgba(255, 163, 61, 0.28)); }

.offline-market-actions {
    position: absolute;
    z-index: 7;
    right: 3%;
    bottom: 56px;
    display: flex;
    width: 420px;
    gap: 10px;
}

.offline-market-actions button {
    min-height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #d6cec0;
    background: rgba(15, 22, 33, 0.94);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.offline-reset { width: 104px; }
.offline-market-actions i { margin-right: 7px; }

.offline-launch {
    flex: 1;
    border-color: rgba(223, 170, 83, 0.5) !important;
    color: #fff2d4 !important;
    background: linear-gradient(105deg, #7e2730, #d3483d 55%, #d8963f) !important;
    box-shadow: 0 10px 28px rgba(158, 43, 47, 0.24);
}

.offline-launch:disabled { opacity: 0.34; filter: saturate(0.4); cursor: not-allowed; }
.offline-launch:not(:disabled):hover { filter: brightness(1.12); transform: translateY(-2px); }

.offline-notice {
    position: absolute;
    z-index: 7;
    bottom: 60px;
    left: 32%;
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: center;
    width: 270px;
    min-height: 66px;
    padding: 10px 12px;
    border: 1px solid rgba(223, 170, 83, 0.27);
    color: #eaddc7;
    background: rgba(7, 12, 20, 0.91);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38);
}

.offline-notice > i {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(223, 170, 83, 0.36);
    border-radius: 50%;
    color: #e0ae57;
}

.offline-notice strong,
.offline-notice span { display: block; }
.offline-notice strong { color: #f4dfb5; font-size: 12px; }
.offline-notice span { margin-top: 4px; color: #929baa; font-size: 10px; line-height: 1.35; }
.offline-notice.is-success { border-color: rgba(94, 213, 142, 0.48); }
.offline-notice.is-success > i { border-color: rgba(94, 213, 142, 0.48); color: #72df9e; }

.offline-market-copy {
    margin: 28px auto 0;
    padding: 34px 42px;
    border: 1px solid rgba(223, 170, 83, 0.25);
    background: linear-gradient(135deg, rgba(14, 21, 33, 0.94), rgba(7, 12, 20, 0.92));
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.26);
    text-align: center;
}

.offline-market-copy > header > span {
    color: #d9a54f;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
}

.offline-market-copy h3 {
    margin: 8px 0 12px;
    color: #ffe1a3;
    font-size: clamp(27px, 3vw, 42px);
}

.offline-market-copy header p {
    max-width: 930px;
    margin: 0 auto;
    color: #c5beb2;
    font-size: 15px;
    line-height: 1.75;
}

.offline-market-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 24px;
}

.offline-market-benefits p {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    margin: 0;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #aaa69f;
    text-align: left;
    font-size: 13px;
    line-height: 1.6;
}

.offline-market-benefits i {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(223, 170, 83, 0.32);
    color: #dea94f;
    background: rgba(223, 170, 83, 0.07);
}

@keyframes offline-character-swap {
    0% { opacity: 1; filter: brightness(1) drop-shadow(0 24px 25px rgba(0, 0, 0, 0.68)); transform: scale(1); }
    45% { opacity: 0.28; filter: brightness(2.1) drop-shadow(0 0 24px rgba(102, 220, 211, 0.75)); transform: scale(1.025); }
    100% { opacity: 1; filter: brightness(1) drop-shadow(0 24px 25px rgba(0, 0, 0, 0.68)); transform: scale(1); }
}

@keyframes offline-character-exit {
    0% { opacity: 1; filter: brightness(1) blur(0); transform: translateY(0) scale(1); }
    35% { opacity: 1; filter: brightness(2.4) drop-shadow(0 0 28px rgba(93, 218, 207, 0.88)); }
    100% { opacity: 0; filter: brightness(3) blur(7px); transform: translateY(-72px) scale(0.88); }
}

@keyframes offline-exit-light {
    0% { opacity: 0; transform: scaleY(0.1); }
    28% { opacity: 1; transform: scaleY(1); }
    100% { opacity: 0; transform: scaleY(1.18); }
}

@media (max-width: 1100px) {
    .offline-market-stage { min-height: 760px; }
    .offline-character-zone { left: 5%; width: 44%; }
    .offline-equipment { left: 29%; width: 245px; }
    .offline-shop-console,
    .offline-market-actions { right: 2%; width: 390px; }
    .offline-notice { left: 29%; width: 245px; }
}

@media (max-width: 860px) {
    .offline-market { padding: 86px 0 72px; }
    .offline-market-stage { display: grid; min-height: 0; padding: 72px 18px 22px; }
    .offline-market-hint { top: 18px; max-width: calc(100% - 30px); white-space: normal; }
    .offline-character-zone,
    .offline-equipment,
    .offline-shop-console,
    .offline-market-actions,
    .offline-notice {
        position: relative;
        inset: auto;
        width: 100%;
    }
    .offline-character-zone { order: 1; height: 470px; }
    .offline-character-zone > img { right: 50%; width: 660px; transform: translateX(50%); }
    .offline-game-name { top: 46px; left: 50%; }
    .offline-equipment { order: 2; margin-top: -46px; }
    .offline-shop-console { order: 3; margin-top: 16px; }
    .offline-shop-body { height: 365px; }
    .offline-shop-grid { right: 50%; transform: translateX(50%); }
    .offline-shop-model { left: 50%; opacity: 0.18; transform: translateX(-50%); }
    .offline-shop-empty { right: 50%; transform: translate(50%, -50%); }
    .offline-notice { order: 4; margin-top: 12px; }
    .offline-market-actions { order: 5; margin-top: 12px; }
    .offline-market-benefits { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .offline-market { padding-top: 72px; }
    .offline-market-heading { margin-bottom: 28px; }
    .offline-market-stage { padding: 74px 10px 12px; }
    .offline-market-hint { font-size: 10px; }
    .offline-character-zone { height: 400px; }
    .offline-character-zone > img { width: 575px; }
    .offline-equipment { margin-top: -40px; padding: 10px; }
    .offline-shop-console { width: 100%; }
    .offline-shop-body { height: 330px; }
    .offline-shop-grid {
        top: 20px;
        grid-template-columns: repeat(5, 46px);
        grid-template-rows: repeat(6, 46px);
    }
    .offline-shop-grid::before {
        background:
            linear-gradient(90deg, transparent 45px, rgba(181, 142, 76, 0.34) 46px) 0 0 / 46px 46px,
            linear-gradient(transparent 45px, rgba(181, 142, 76, 0.34) 46px) 0 0 / 46px 46px;
    }
    .offline-grid-item { width: 46px; height: 92px; }
    .offline-shop-empty { width: 210px; }
    .offline-market-actions { display: grid; grid-template-columns: 88px 1fr; }
    .offline-reset { width: auto; }
    .offline-market-copy { padding: 26px 18px; }
    .offline-market-copy header p { font-size: 13px; }
    .offline-market-benefits p { grid-template-columns: 36px 1fr; padding: 14px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .offline-character-zone.is-switching > img,
    .offline-character-zone.is-leaving > img,
    .offline-character-zone.is-leaving .offline-exit-effect { animation-duration: 0.01ms; }
}

/* Offline market: character + shop opening flow */
.offline-shop-actor {
    position: absolute;
    z-index: 4;
    right: 9%;
    bottom: 88px;
    width: 43%;
    height: 575px;
    padding: 0;
    overflow: visible;
    border: 0;
    color: #f6e6c4;
    background: transparent;
    cursor: pointer;
    transition: right 0.75s cubic-bezier(0.2, 0.78, 0.25, 1), transform 0.75s cubic-bezier(0.2, 0.78, 0.25, 1), filter 0.35s ease;
}

.offline-shop-actor::before {
    position: absolute;
    right: 7%;
    bottom: 8px;
    left: 7%;
    z-index: -1;
    height: 68px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.8), transparent 70%);
    content: "";
    filter: blur(7px);
}

.offline-shop-actor > img {
    position: absolute;
    right: 50%;
    bottom: -6px;
    width: 690px;
    max-width: none;
    height: auto;
    filter: drop-shadow(0 22px 22px rgba(0, 0, 0, 0.72));
    transform: translateX(50%);
    transform-origin: 50% 85%;
    transition: filter 0.3s ease, transform 0.3s ease;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, rgba(0, 0, 0, 0.92) 80%, rgba(0, 0, 0, 0.48) 91%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 70%, rgba(0, 0, 0, 0.92) 80%, rgba(0, 0, 0, 0.48) 91%, transparent 100%);
}

.offline-shop-actor:hover > img,
.offline-shop-actor:focus-visible > img {
    filter: brightness(1.16) drop-shadow(0 0 25px rgba(223, 170, 83, 0.35));
    transform: translateX(50%) scale(1.025);
}

.offline-shop-actor:focus-visible { outline: 0; }

.offline-shop-game-name {
    position: absolute;
    z-index: 3;
    top: 132px;
    left: 50%;
    color: #6cff58;
    font: 700 11px/1 Tahoma, Arial, sans-serif;
    text-shadow: -1px -1px #020500, 1px -1px #020500, -1px 1px #020500, 1px 1px #020500, 0 0 7px #193b12;
    transform: translateX(-50%);
    white-space: nowrap;
}

.offline-shop-prompt {
    position: absolute;
    z-index: 5;
    right: 50%;
    top: 164px;
    bottom: auto;
    display: grid;
    grid-template-columns: 32px auto;
    grid-template-rows: auto auto;
    min-width: 210px;
    padding: 12px 18px;
    border: 1px solid rgba(223, 170, 83, 0.52);
    color: #f4dfb7;
    text-align: left;
    background: linear-gradient(110deg, rgba(15, 21, 32, 0.96), rgba(42, 29, 22, 0.96));
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.46), 0 0 22px rgba(223, 170, 83, 0.08);
    transform: translateX(50%);
}

.offline-shop-prompt i {
    grid-row: 1 / 3;
    align-self: center;
    color: #74d3cc;
}

.offline-shop-prompt b { font-size: 12px; letter-spacing: 0.07em; }
.offline-shop-prompt small { margin-top: 3px; color: #929ba8; font-size: 9px; }

.offline-shop-actor:hover .offline-shop-prompt,
.offline-shop-actor:focus-visible .offline-shop-prompt {
    border-color: rgba(110, 215, 205, 0.65);
    background: linear-gradient(110deg, rgba(19, 35, 43, 0.98), rgba(54, 35, 22, 0.98));
}

.offline-market-modal {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: grid;
    place-items: center end;
    padding: 28px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
    pointer-events: none;
}

.offline-market-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.offline-modal-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(3, 7, 13, 0.53);
    backdrop-filter: blur(4px);
    cursor: default;
}

.offline-modal-dialog {
    position: relative;
    z-index: 2;
    width: min(870px, calc(100% - 270px));
    border: 1px solid rgba(223, 170, 83, 0.42);
    background: linear-gradient(145deg, rgba(12, 18, 29, 0.99), rgba(6, 11, 18, 0.99));
    box-shadow: 0 38px 90px rgba(0, 0, 0, 0.78), 0 0 40px rgba(78, 186, 178, 0.09);
    transform: translateY(20px) scale(0.975);
    transition: transform 0.28s ease;
    scrollbar-width: thin;
    scrollbar-color: #7f6135 #0a1019;
}

.offline-modal-dialog::-webkit-scrollbar { width: 7px; }
.offline-modal-dialog::-webkit-scrollbar-track { background: #0a1019; }
.offline-modal-dialog::-webkit-scrollbar-thumb { border: 1px solid #0a1019; background: #7f6135; }

.offline-market-modal.is-open .offline-modal-dialog { transform: translateY(0) scale(1); }

.offline-modal-character {
    position: absolute;
    z-index: 2;
    bottom: 140px;
    left: 0;
    width: 31%;
    height: 570px;
    overflow: hidden;
    pointer-events: none;
}

.offline-modal-character::after {
    position: absolute;
    right: 4%;
    bottom: 0;
    left: 4%;
    height: 150px;
    background: linear-gradient(180deg, transparent, rgba(4, 8, 15, 0.94));
    content: "";
}

.offline-modal-character > img {
    position: absolute;
    right: -52%;
    bottom: 34px;
    width: 750px;
    max-width: none;
    height: auto;
    filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.7));
    transition: opacity 0.25s ease, filter 0.3s ease, transform 0.4s ease;
}

.offline-modal-character .offline-game-name {
    top: 66px;
    left: 51%;
}

.offline-modal-character > small {
    position: absolute;
    z-index: 3;
    right: 18px;
    bottom: 24px;
    left: 18px;
    color: #a89c88;
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.offline-modal-character.is-switching > img {
    animation: offline-character-swap 0.42s ease both;
}

.offline-market-stage.is-modal-open > .offline-character-zone {
    opacity: 0;
}

.offline-modal-head,
.offline-modal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    background: linear-gradient(90deg, rgba(28, 39, 53, 0.96), rgba(12, 18, 28, 0.96));
}

.offline-modal-head > div { display: flex; align-items: center; gap: 12px; }
.offline-modal-head > div > i { color: #70cbc6; font-size: 17px; }
.offline-modal-head span { display: grid; gap: 2px; }
.offline-modal-head small { color: #9b7b49; font-size: 8px; font-weight: 700; letter-spacing: 0.18em; }
.offline-modal-head strong { color: #f2e3c7; font-size: 16px; }
.offline-modal-head > button {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #d7d0c4;
    background: rgba(5, 9, 15, 0.72);
    cursor: pointer;
}

.offline-modal-content {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 16px;
    padding: 16px;
}

.offline-modal-content .offline-equipment,
.offline-modal-content .offline-shop-console {
    position: relative;
    inset: auto;
    width: 100%;
    margin: 0;
}

.offline-modal-content .offline-equipment { min-height: 482px; padding: 16px; }
.offline-modal-content .offline-shop-body { height: 388px; }

.offline-modal-foot {
    min-height: 58px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 0;
}

.offline-modal-foot > span { color: #8993a1; font-size: 10px; }
.offline-modal-foot > span i { margin-right: 8px; color: #6fc6c1; }
.offline-modal-foot > button {
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid rgba(223, 170, 83, 0.43);
    color: #f2dfba;
    background: linear-gradient(100deg, rgba(91, 52, 29, 0.9), rgba(48, 38, 30, 0.9));
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.offline-market-stage:not(.is-modal-open) .offline-equipment,
.offline-market-stage:not(.is-modal-open) .offline-shop-console {
    pointer-events: none;
}

.offline-market-stage.is-online .offline-shop-actor {
    right: 28.5%;
    z-index: 8;
    transform: scale(1.12);
    pointer-events: none;
}

.offline-market-stage.is-online .offline-shop-prompt { opacity: 0; }
.offline-market-stage.is-online .offline-shop-game-name { color: #79f197; }

.offline-market-stage.is-online .offline-shop-actor > img {
    filter: brightness(1.16) saturate(1.12) drop-shadow(0 0 30px rgba(255, 133, 41, 0.42));
}

.offline-market-actions {
    right: 50%;
    width: 430px;
    transform: translateX(50%);
}

.offline-notice {
    bottom: 55px;
    left: 28px;
    width: 290px;
}

.offline-market-stage.is-online .offline-market-actions {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 860px) {
    .offline-market-stage {
        display: block;
        min-height: 940px;
        padding: 72px 12px 20px;
    }

    .offline-character-zone {
        position: absolute;
        inset: auto auto 245px -17%;
        width: 72%;
        height: 540px;
    }

    .offline-character-zone > img {
        right: -16%;
        width: 650px;
        transform: none;
    }

    .offline-game-name { top: 72px; left: 57%; }

    .offline-shop-actor {
        right: -15%;
        bottom: 245px;
        width: 72%;
        height: 540px;
    }

    .offline-shop-actor > img { width: 650px; }
    .offline-shop-game-name { top: 132px; }
    .offline-shop-prompt { top: 164px; bottom: auto; min-width: 188px; padding: 10px 13px; }

    .offline-market-actions {
        position: absolute;
        right: 50%;
        bottom: 88px;
        width: calc(100% - 28px);
    }

    .offline-notice {
        position: absolute;
        bottom: 18px;
        left: 14px;
        width: calc(100% - 28px);
    }

    .offline-market-modal { padding: 16px; }
    .offline-modal-character { display: none; }
    .offline-modal-dialog { width: 100%; max-height: calc(100% - 6px); overflow: auto; }
    .offline-modal-content { grid-template-columns: 1fr; }
    .offline-modal-content .offline-equipment { min-height: 0; }
    .offline-modal-content .offline-shop-console { margin-top: 0; }
    .offline-modal-foot { gap: 12px; }

    .offline-market-stage.is-online .offline-shop-actor {
        right: 14%;
        transform: scale(1.08);
    }
}

@media (max-width: 560px) {
    .offline-market-stage { min-height: 790px; }
    .offline-character-zone { bottom: 225px; left: 0; width: 50%; height: 440px; }
    .offline-character-zone > img { right: auto; left: 50%; width: 430px; transform: translateX(-50%); }
    .offline-game-name { top: 70px; left: 50%; }
    .offline-shop-actor { right: 0; bottom: 225px; width: 50%; height: 440px; }
    .offline-shop-actor > img { width: 430px; }
    .offline-shop-game-name { top: 126px; }
    .offline-shop-prompt { top: 154px; bottom: auto; min-width: 160px; }
    .offline-shop-prompt b { font-size: 10px; }
    .offline-shop-prompt small { font-size: 8px; }
    .offline-modal-head { position: sticky; top: 0; z-index: 5; }
    .offline-modal-content { padding: 10px; }
    .offline-modal-foot { position: sticky; bottom: 0; z-index: 5; align-items: stretch; flex-direction: column; padding: 10px; }
    .offline-modal-foot > button { width: 100%; }
    .offline-character-zone.is-switching > img { animation-name: offline-character-swap-mobile; }
    .offline-character-zone.is-leaving > img { animation-name: offline-character-exit-mobile; }
    .offline-market-stage.is-online .offline-shop-actor { right: 25%; transform: scale(1.12); }
}

@keyframes offline-character-swap-mobile {
    0% { opacity: 1; filter: brightness(1); transform: translateX(-50%) scale(1); }
    45% { opacity: 0.28; filter: brightness(2.1) drop-shadow(0 0 24px rgba(102, 220, 211, 0.75)); transform: translateX(-50%) scale(1.025); }
    100% { opacity: 1; filter: brightness(1); transform: translateX(-50%) scale(1); }
}

@keyframes offline-character-exit-mobile {
    0% { opacity: 1; filter: brightness(1) blur(0); transform: translateX(-50%) translateY(0) scale(1); }
    35% { opacity: 1; filter: brightness(2.4) drop-shadow(0 0 28px rgba(93, 218, 207, 0.88)); }
    100% { opacity: 0; filter: brightness(3) blur(7px); transform: translateX(-50%) translateY(-72px) scale(0.88); }
}

/* Interactive fishing system */
.fishing-system {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 116px 0 104px;
    background: #04101a;
}

.fishing-system::before,
.fishing-system::after,
.fishing-system-backdrop {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
}

.fishing-system-backdrop {
    z-index: -3;
    background:
        linear-gradient(180deg, #04101a 0%, rgba(4, 16, 26, 0.25) 22%, rgba(4, 16, 26, 0.62) 76%, #04101a 100%),
        url("../images/characters/fishing-bg.webp") center 38% / cover no-repeat;
    opacity: 0.38;
    filter: saturate(0.72) brightness(0.55);
}

.fishing-system::before {
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(2, 10, 17, 0.92), transparent 22%, transparent 78%, rgba(2, 10, 17, 0.92)),
        linear-gradient(180deg, rgba(28, 97, 123, 0.08), rgba(4, 13, 22, 0.62));
}

.fishing-system::after { z-index: -1; background: linear-gradient(180deg, #04101a 0, transparent 14%, transparent 87%, #04101a 100%); }
.fishing-system > .section-shell { position: relative; z-index: 1; }
.fishing-system-heading { margin-bottom: 42px; text-shadow: 0 3px 16px #000, 0 0 34px rgba(0, 0, 0, 0.9); }
.fishing-system-heading .ornate-description { color: #cbd5d2; }

.fishing-stage {
    position: relative;
    min-height: 760px;
    overflow: hidden;
    border: 1px solid rgba(102, 195, 208, 0.38);
    background:
        linear-gradient(180deg, rgba(2, 12, 20, 0.08), transparent 48%, rgba(2, 10, 18, 0.58) 100%),
        url("../images/characters/fishing-bg.webp") center center / cover no-repeat;
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.58), inset 0 0 100px rgba(2, 8, 14, 0.35);
}

.fishing-stage-shade {
    position: absolute;
    z-index: 0;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(3, 10, 16, 0.22), transparent 30%, transparent 78%, rgba(2, 10, 17, 0.16)),
        linear-gradient(180deg, rgba(3, 10, 16, 0.08), transparent 55%, rgba(2, 9, 15, 0.44));
    pointer-events: none;
}

.fishing-location-bar {
    position: absolute;
    z-index: 14;
    top: 20px;
    right: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    padding: 8px 12px 8px 15px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-left: 3px solid #65c4cf;
    background: rgba(4, 13, 21, 0.88);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
}

.fishing-location-bar > span { display: grid; gap: 3px; }
.fishing-location-bar small { color: #78cbd3; font-size: 8px; font-weight: 900; letter-spacing: 0.14em; }
.fishing-location-bar strong { color: #e8ddc7; font: 700 14px/1.1 "Beaufort for LoL", Georgia, serif; }
.fishing-location-bar b { min-width: 148px; padding: 7px 10px; border: 1px solid rgba(98, 196, 207, 0.28); color: #8bd9df; background: rgba(28, 112, 122, 0.13); font: 900 8px/1 Tahoma, Arial, sans-serif; letter-spacing: 0.1em; text-align: center; }
.fishing-stage[data-state="bite"] .fishing-location-bar b,
.fishing-stage[data-state="catching"] .fishing-location-bar b { border-color: rgba(235, 180, 84, 0.48); color: #f1ca7e; background: rgba(155, 101, 24, 0.19); }
.fishing-stage[data-state="reward"] .fishing-location-bar b { border-color: rgba(100, 207, 151, 0.44); color: #82dba7; background: rgba(35, 130, 79, 0.16); }

.fishing-water { position: absolute; z-index: 1; top: 43%; right: 0; bottom: 90px; left: 0; overflow: hidden; clip-path: polygon(64% 0, 100% 0, 100% 100%, 0 100%, 0 56%, 64% 56%); pointer-events: none; }
.fishing-water-surface,
.fishing-water-depth { position: absolute; inset: 0; content: ""; }
.fishing-water-surface { z-index: 1; height: 24%; background: repeating-linear-gradient(174deg, transparent 0 10px, rgba(191, 238, 240, 0.16) 11px 12px, transparent 13px 24px), linear-gradient(180deg, rgba(165, 232, 237, 0.2), transparent); mix-blend-mode: screen; opacity: 0.72; animation: fishing-water-shift 8s linear infinite; }
.fishing-water-depth { z-index: 4; background: linear-gradient(180deg, rgba(37, 160, 182, 0.05), rgba(5, 74, 107, 0.22) 54%, rgba(2, 34, 59, 0.44)), repeating-linear-gradient(112deg, transparent 0 42px, rgba(159, 233, 229, 0.045) 44px 48px, transparent 50px 88px); box-shadow: inset 0 18px 34px rgba(172, 237, 239, 0.08); mix-blend-mode: multiply; }
.fishing-sea-life { position: absolute; z-index: 3; inset: 5% 2% 2%; }
.fishing-sea-item { position: absolute; top: var(--sea-y); left: var(--sea-x); width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; opacity: 0.58; filter: saturate(0.68) brightness(0.78) drop-shadow(0 5px 7px rgba(0, 20, 32, 0.64)); transform: translate(-50%, -50%) scale(var(--sea-scale)); }
.fishing-sea-item.is-fish { animation: fishing-fish-swim var(--sea-duration) ease-in-out var(--sea-delay) infinite alternate; }
.fishing-sea-item.is-fish.is-reverse { animation-name: fishing-fish-swim-reverse; }
.fishing-sea-item.is-oyster { opacity: 0.72; animation: fishing-seabed-drift var(--sea-duration) ease-in-out var(--sea-delay) infinite; }
.fishing-sea-item.is-pearl { width: 27px; height: 27px; opacity: 0.78; animation: fishing-pearl-glint var(--sea-duration) ease-in-out var(--sea-delay) infinite; }

.fishing-character {position: absolute;z-index: 6;bottom: 265px;left: 36%;width: min(64%, 900px);filter: drop-shadow(0 25px 24px rgba(0, 0, 0, 0.58));pointer-events: none;}
.fishing-character > img { display: block; width: 100%; height: auto; }
.fishing-game-name {position: absolute;z-index: 8;top: 24%;left: 15%;color: #4dff42;font: 700 10px/1 Tahoma, Arial, sans-serif;text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 4px #000;white-space: nowrap;}

.fishing-bobber { position: absolute; z-index: 8; top: 63%; left: 73%; width: 18px; height: 22px; opacity: 0; transition: opacity 180ms ease; }
.fishing-bobber::before { position: absolute; top: -5px; left: 7px; width: 3px; height: 13px; border-radius: 2px; background: linear-gradient(#e24439 0 45%, #eee4c3 46% 70%, #24282a 71%); content: ""; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45); }
.fishing-bobber i,
.fishing-bobber i::before,
.fishing-bobber i::after { position: absolute; border: 1px solid rgba(177, 231, 233, 0.64); border-radius: 50%; content: ""; }
.fishing-bobber i { inset: 7px 0 -2px; animation: fishing-ripple 1.45s ease-out infinite; }
.fishing-bobber i::before { inset: -7px; animation: fishing-ripple 1.45s ease-out 0.46s infinite; }
.fishing-bobber i::after { inset: -14px; animation: fishing-ripple 1.45s ease-out 0.9s infinite; }
.fishing-stage[data-state="waiting"] .fishing-bobber,
.fishing-stage[data-state="bite"] .fishing-bobber,
.fishing-stage[data-state="catching"] .fishing-bobber { opacity: 1; }
.fishing-stage[data-state="waiting"] .fishing-bobber { animation: fishing-bobber-wait 1.9s ease-in-out infinite; }
.fishing-stage[data-state="bite"] .fishing-bobber { animation: fishing-bobber-bite 420ms ease-in-out infinite alternate; }
.fishing-stage[data-state="catching"] .fishing-bobber { animation: fishing-bobber-pull 850ms ease-in both; }

.fishing-catch-trail { position: absolute; z-index: 9; top: 57%; left: 70%; width: 150px; height: 160px; opacity: 0; pointer-events: none; }
.fishing-catch-trail i { position: absolute; bottom: 8px; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: #b5edef; box-shadow: 0 0 12px rgba(181, 237, 239, 0.9); }
.fishing-catch-trail i:nth-child(1) { --trail-x: -62px; --trail-y: -86px; }
.fishing-catch-trail i:nth-child(2) { --trail-x: -23px; --trail-y: -126px; }
.fishing-catch-trail i:nth-child(3) { --trail-x: 16px; --trail-y: -142px; }
.fishing-catch-trail i:nth-child(4) { --trail-x: 52px; --trail-y: -101px; }
.fishing-catch-trail i:nth-child(5) { --trail-x: 69px; --trail-y: -58px; }
.fishing-stage[data-state="catching"] .fishing-catch-trail { opacity: 1; }
.fishing-stage[data-state="catching"] .fishing-catch-trail i { animation: fishing-catch-drop 920ms ease-out both; }

.fishing-action-panel { position: absolute; z-index: 16; right: 20px; bottom: 20px; display: grid; grid-template-columns: 58px 126px minmax(180px, 1fr); align-items: center; gap: 12px; width: min(520px, calc(100% - 40px)); min-height: 80px; padding: 10px; border: 1px solid rgba(101, 195, 207, 0.42); border-left: 3px solid #65c4cf; background: rgba(3, 13, 21, 0.94); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5), inset 0 0 28px rgba(66, 177, 191, 0.05); transition: opacity 180ms ease, transform 180ms ease; }
.fishing-stage:not([data-state="idle"]) .fishing-action-panel { opacity: 0; pointer-events: none; transform: translateY(12px); }
.fishing-bait-slot { display: grid; width: 56px; height: 56px; place-items: center; border: 1px solid rgba(224, 179, 98, 0.4); background: radial-gradient(circle, rgba(184, 132, 52, 0.16), rgba(5, 17, 25, 0.92) 70%); }
.fishing-bait-slot img { width: 38px; height: 38px; image-rendering: pixelated; filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.6)); }
.fishing-action-copy { display: grid; min-width: 0; gap: 3px; }
.fishing-action-copy small { color: #d8a550; font-size: 8px; font-weight: 900; letter-spacing: 0.14em; }
.fishing-action-copy strong { color: #eee0c4; font: 700 15px/1 "Beaufort for LoL", Georgia, serif; }
.fishing-action-copy em { color: #83b8b5; font: normal 700 8px/1.3 Tahoma, Arial, sans-serif; }

.fishing-action-panel button,
.fishing-loot button { min-height: 44px; border: 1px solid rgba(111, 208, 215, 0.5); color: #e3f0ed; background: linear-gradient(110deg, rgba(18, 82, 90, 0.86), rgba(26, 124, 128, 0.9) 52%, rgba(18, 82, 90, 0.86)); font-size: 10px; font-weight: 900; letter-spacing: 0.04em; cursor: pointer; transition: filter 160ms ease, transform 160ms ease, border-color 160ms ease; }
.fishing-action-panel button:hover,
.fishing-action-panel button:focus-visible,
.fishing-loot button:hover,
.fishing-loot button:focus-visible { border-color: #8adddf; filter: brightness(1.14); transform: translateY(-2px); }
.fishing-action-panel button:disabled { cursor: wait; filter: saturate(0.5); }

.fishing-notice { position: absolute; z-index: 15; bottom: 20px; left: 20px; display: grid; gap: 5px; width: min(340px, calc(100% - 40px)); min-height: 80px; padding: 13px 15px; border: 1px solid rgba(255, 255, 255, 0.11); border-left: 3px solid #d7a451; background: rgba(4, 13, 21, 0.92); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.46); }
.fishing-notice span { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fishing-notice small { color: #d4a14f; font-size: 8px; font-weight: 900; letter-spacing: 0.14em; }
.fishing-notice strong { color: #eadab9; font-size: 11px; text-align: right; }
.fishing-notice p { margin: 0; color: #919aa0; font-size: 10px; line-height: 1.4; }
.fishing-notice[data-tone="waiting"] { border-left-color: #65c4cf; background: rgba(4, 24, 31, 0.94); }
.fishing-notice[data-tone="waiting"] small { color: #78d1d6; }
.fishing-notice[data-tone="alert"] { border-left-color: #e0aa50; background: rgba(35, 24, 8, 0.94); }
.fishing-notice[data-tone="success"] { border-left-color: #70d19a; background: rgba(5, 30, 23, 0.94); }
.fishing-notice[data-tone="success"] small { color: #7edca7; }

.fishing-loot { position: absolute; z-index: 20; top: 48%; left: 67%; display: grid; width: 310px; min-height: 304px; justify-items: center; padding: 22px; border: 1px solid rgba(230, 184, 100, 0.66); color: #e9dec8; background: rgba(4, 13, 20, 0.97); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.64), inset 0 0 48px rgba(211, 158, 68, 0.05); text-align: center; transform: translate(-50%, -50%); animation: fishing-loot-arrive 420ms cubic-bezier(0.16, 0.76, 0.24, 1) both; }
.fishing-loot[hidden] { display: none; }
.fishing-loot-label { color: #70cbd1; font-size: 8px; font-weight: 900; letter-spacing: 0.18em; }
.fishing-loot-icon { position: relative; display: grid; width: 82px; height: 82px; margin: 10px 0 8px; place-items: center; border: 1px solid rgba(230, 184, 100, 0.48); background: radial-gradient(circle, rgba(212, 164, 76, 0.17), rgba(4, 15, 23, 0.9) 70%); box-shadow: 0 0 28px rgba(114, 204, 210, 0.12); }
.fishing-loot-icon::before { position: absolute; inset: 5px; border: 1px solid rgba(255, 255, 255, 0.06); content: ""; }
.fishing-loot-icon img { width: 54px; height: 54px; image-rendering: pixelated; filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.64)); }
.fishing-loot h3 { margin: 0; color: #f1d69e; font: 700 21px/1.1 "Beaufort for LoL", Georgia, serif; }
.fishing-loot p { min-height: 32px; margin: 8px 0 14px; color: #9ba1a1; font-size: 11px; line-height: 1.45; }
.fishing-loot button { width: 100%; }
.fishing-loot .fishing-open-oyster { margin-bottom: 8px; border-color: rgba(223, 174, 87, 0.52); background: linear-gradient(110deg, #604018, #9b6928 52%, #604018); }
.fishing-loot button[hidden] { display: none; }

.fishing-system-copy { display: grid; gap: 22px; margin-top: 36px; }
.fishing-system-copy header { display: grid; gap: 10px; max-width: 980px; margin: 0 auto; text-align: center; }
.fishing-system-copy header > span { color: #70c7ce; font-size: 9px; font-weight: 900; letter-spacing: 0.2em; }
.fishing-system-copy h3 { margin: 0; color: #f0d7a0; font: 700 clamp(1.8rem, 3vw, 2.6rem)/1 "Beaufort for LoL", Georgia, serif; }
.fishing-system-copy header p { max-width: 920px; margin: 0 auto; color: #c4c7c1; font-size: 15px; line-height: 1.7; }
.fishing-system-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fishing-system-benefits p { position: relative; min-height: 130px; margin: 0; padding: 22px 20px 20px 24px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.025); }
.fishing-system-benefits p::before { position: absolute; top: 20px; bottom: 20px; left: 0; width: 3px; background: currentColor; content: ""; opacity: 0.76; }
.fishing-system-benefits span { display: grid; gap: 7px; }
.fishing-system-benefits strong { color: #ece1ca; font-size: 12px; letter-spacing: 0.04em; }
.fishing-system-benefits small { color: #9ca3a1; font-size: 12px; line-height: 1.55; }
.fishing-system-benefits .is-cyan { color: #69cbd0; border-color: rgba(78, 184, 191, 0.3); background: rgba(25, 113, 120, 0.09); }
.fishing-system-benefits .is-gold { color: #dfa94f; border-color: rgba(220, 164, 73, 0.32); background: rgba(151, 99, 27, 0.09); }
.fishing-system-benefits .is-pearl { color: #c6b9e8; border-color: rgba(171, 151, 221, 0.3); background: rgba(86, 69, 137, 0.09); }
.fishing-investment-notice { display: flex; align-items: center; max-width: 980px; min-height: 76px; margin: 0 auto; padding: 15px 20px; border: 1px solid rgba(106, 204, 209, 0.3); border-left: 3px solid #69cbd0; background: linear-gradient(90deg, rgba(21, 94, 101, 0.2), rgba(12, 28, 38, 0.68)); box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24); }
.fishing-investment-notice span { display: grid; gap: 4px; }
.fishing-investment-notice strong { color: #d9e9e4; font-size: 12px; letter-spacing: 0.04em; }
.fishing-investment-notice small { color: #91a9a7; font-size: 11px; line-height: 1.5; }

@keyframes fishing-water-shift { to { background-position: 120px 0, 0 0; } }
@keyframes fishing-fish-swim {
    0% { transform: translate(-50%, -50%) translateX(calc(var(--sea-drift) * -1)) scale(var(--sea-scale)); }
    48% { transform: translate(-50%, calc(-50% - 7px)) translateX(0) scale(var(--sea-scale)); }
    100% { transform: translate(-50%, -50%) translateX(var(--sea-drift)) scale(var(--sea-scale)); }
}
@keyframes fishing-fish-swim-reverse {
    0% { transform: translate(-50%, -50%) translateX(var(--sea-drift)) scaleX(-1) scale(var(--sea-scale)); }
    52% { transform: translate(-50%, calc(-50% + 8px)) translateX(0) scaleX(-1) scale(var(--sea-scale)); }
    100% { transform: translate(-50%, -50%) translateX(calc(var(--sea-drift) * -1)) scaleX(-1) scale(var(--sea-scale)); }
}
@keyframes fishing-seabed-drift { 50% { transform: translate(-50%, calc(-50% - 5px)) scale(var(--sea-scale)) rotate(4deg); filter: brightness(0.96); } }
@keyframes fishing-pearl-glint { 0%, 100% { transform: translate(-50%, -50%) scale(var(--sea-scale)); filter: brightness(0.72) drop-shadow(0 0 0 transparent); } 50% { transform: translate(-50%, calc(-50% - 9px)) scale(var(--sea-scale)); filter: brightness(1.35) drop-shadow(0 0 8px rgba(215, 239, 236, 0.7)); } }
@keyframes fishing-ripple { from { opacity: 0.8; transform: scale(0.3); } to { opacity: 0; transform: scale(1.5); } }
@keyframes fishing-bobber-wait { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(5px) rotate(2deg); } }
@keyframes fishing-bobber-bite { from { transform: translateY(-3px) rotate(-8deg); } to { transform: translateY(12px) rotate(10deg); } }
@keyframes fishing-bobber-pull { to { opacity: 0; transform: translate(-190px, -240px) scale(0.5); } }
@keyframes fishing-catch-drop { from { opacity: 1; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(var(--trail-x), var(--trail-y)) scale(0); } }
@keyframes fishing-loot-arrive { from { opacity: 0; transform: translate(-50%, calc(-50% + 18px)) scale(0.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

@media (max-width: 1080px) {
    .fishing-stage { min-height: 720px; }
    .fishing-character { bottom: 200px; left: 38%; width: 70%; }
    .fishing-action-panel { grid-template-columns: 52px 110px minmax(170px, 1fr); width: 470px; }
    .fishing-notice { width: 300px; }
    .fishing-system-benefits { grid-template-columns: 1fr; }
    .fishing-system-benefits p { min-height: 0; }
}

@media (max-width: 760px) {
    .fishing-system { padding: 88px 0 76px; }
    .fishing-system-heading { margin-bottom: 28px; }
    .fishing-stage { min-height: 760px; background-position: 46% center; }
    .fishing-location-bar { top: 12px; right: 12px; left: 12px; min-height: 46px; }
    .fishing-location-bar b { min-width: 118px; font-size: 7px; }
    .fishing-water { top: 42%; right: 0; bottom: 155px; left: 0; clip-path: polygon(82% 0, 100% 0, 100% 100%, 0 100%, 0 50%, 82% 50%); }
    .fishing-sea-life { inset: 9% 0 2%; }
    .fishing-sea-item { width: 31px; height: 31px; }
    .fishing-sea-item.is-pearl { width: 24px; height: 24px; }
    .fishing-character { bottom: 230px; left: 48%; width: 92%; }
    .fishing-game-name { top: 27%; left: 18%; font-size: 9px; }
    .fishing-bobber { top: 61%; left: 78%; }
    .fishing-catch-trail { top: 54%; left: 66%; }
    .fishing-action-panel { right: 12px; bottom: 12px; left: 12px; grid-template-columns: 48px 1fr; width: auto; min-height: 130px; gap: 9px; padding: 9px; }
    .fishing-bait-slot { width: 48px; height: 48px; }
    .fishing-bait-slot img { width: 34px; height: 34px; }
    .fishing-action-panel button { grid-column: 1 / -1; min-height: 40px; }
    .fishing-notice { right: 12px; bottom: 151px; left: 12px; width: auto; min-height: 68px; padding: 10px 12px; }
    .fishing-notice strong { font-size: 10px; }
    .fishing-notice p { font-size: 9px; }
    .fishing-stage:not([data-state="idle"]) .fishing-notice { bottom: 16px; }
    .fishing-loot { top: 64%; left: 50%; width: min(300px, calc(100% - 28px)); min-height: 292px; padding: 19px; }
    .fishing-system-copy { margin-top: 28px; gap: 16px; }
    .fishing-system-copy header { padding: 0 8px; }
    .fishing-system-copy header p { font-size: 13px; }
    .fishing-system-benefits { gap: 10px; }
    .fishing-system-benefits p { padding: 15px; }
    .fishing-investment-notice { margin: 0 8px; padding: 13px 14px; }
}

@media (max-width: 430px) {
    .fishing-stage { min-height: 730px; }
    .fishing-location-bar strong { font-size: 12px; }
    .fishing-location-bar b { min-width: 104px; padding-inline: 7px; }
    .fishing-character { bottom: 232px; left: 46%; width: 98%; }
    .fishing-game-name { left: 18%; }
    .fishing-water { bottom: 151px; }
}

@media (prefers-reduced-motion: reduce) {
    .fishing-water-surface,
    .fishing-sea-item,
    .fishing-bobber,
    .fishing-bobber i,
    .fishing-bobber i::before,
    .fishing-bobber i::after,
    .fishing-catch-trail i,
    .fishing-loot { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}

/* Shared spacing and crossfade for the image-backed story sections. */
main > .scene-flow.scene-flow {
    --scene-flow-overlap: 68px;
    --scene-flow-padding: 108px;
    margin-top: calc(var(--scene-flow-overlap) * -1);
    padding-top: var(--scene-flow-padding);
    padding-bottom: 72px;
}

main > .scene-flow > .scene-flow-fade {
    top: 0;
    bottom: 0;
    height: auto;
    background: linear-gradient(
        180deg,
        #061019 0,
        rgba(6, 16, 25, 0.96) 38px,
        rgba(6, 16, 25, 0.74) 92px,
        rgba(6, 16, 25, 0.26) 154px,
        transparent 208px,
        transparent calc(100% - 96px),
        rgba(6, 16, 25, 0.38) calc(100% - 46px),
        #061019 100%
    );
}

@media (max-width: 760px) {
    main > .scene-flow.scene-flow {
        --scene-flow-overlap: 44px;
        --scene-flow-padding: 84px;
        padding-bottom: 56px;
    }

    main > .scene-flow > .scene-flow-fade {
        background: linear-gradient(
            180deg,
            #061019 0,
            rgba(6, 16, 25, 0.92) 30px,
            rgba(6, 16, 25, 0.6) 66px,
            rgba(6, 16, 25, 0.2) 112px,
            transparent 158px,
            transparent calc(100% - 72px),
            rgba(6, 16, 25, 0.34) calc(100% - 34px),
            #061019 100%
        );
    }
}

/* General features: three-level information hierarchy. */
.feature-groups {
    width: min(1320px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 32px;
}

.feature-group {
    min-width: 0;
}

.feature-group-heading {
    display: grid;
    grid-template-columns: 42px max-content minmax(40px, 1fr);
    align-items: center;
    gap: 14px;
    margin-bottom: 13px;
}

.feature-group-heading > span {
    display: grid;
    width: 42px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(217, 170, 88, 0.4);
    color: #e7b866;
    background: rgba(102, 65, 23, 0.22);
    font: 800 10px/1 Tahoma, Arial, sans-serif;
}

.feature-group-heading h3 {
    margin: 0;
    color: #e9ddc7;
    font: 800 12px/1 Tahoma, Arial, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.feature-group-heading > i {
    height: 1px;
    background: linear-gradient(90deg, rgba(216, 170, 88, 0.36), rgba(103, 137, 161, 0.15) 55%, transparent);
}

.feature-primary-grid,
.feature-core-grid,
.feature-missing-grid {
    margin: 0;
    padding: 0;
    display: grid;
    list-style: none;
}

.feature-primary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.feature-primary-grid li {
    --feature-accent: #d8a44c;
    position: relative;
    min-height: 390px;
    display: grid;
    grid-template-rows: 224px minmax(0, 1fr);
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(198, 153, 77, 0.3);
    border-radius: 5px;
    background: #0b0d12;
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.34), inset 0 1px rgba(255, 255, 255, 0.035);
    transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.feature-primary-grid li::after {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 78px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--feature-accent));
    content: "";
    opacity: 0.7;
}

.feature-primary-grid li:hover {
    border-color: rgba(222, 177, 94, 0.58);
    box-shadow: 0 28px 54px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.05);
    transform: translateY(-3px);
}

.feature-primary-visual {
    position: relative;
    overflow: hidden;
    background: #090c12;
}

.feature-primary-visual::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(90deg, rgba(4, 7, 11, 0.42), transparent 22%, transparent 78%, rgba(4, 7, 11, 0.42));
    pointer-events: none;
}

.feature-primary-visual > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    filter: saturate(0.82) contrast(1.04);
    transition: opacity 220ms ease;
}

.feature-primary-visual > span {
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 14px;
    display: grid;
    min-width: 38px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(222, 174, 91, 0.42);
    color: #e5bd75;
    background: rgba(9, 10, 13, 0.8);
    font: 900 10px/1 Tahoma, Arial, sans-serif;
}

.feature-primary-copy {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 9px;
    padding: 20px 22px 22px;
    background: linear-gradient(145deg, rgba(52, 37, 20, 0.2), rgba(10, 12, 17, 0.96) 54%);
}

.feature-primary-grid small {
    color: var(--feature-accent);
    font: 800 9px/1 Tahoma, Arial, sans-serif;
    letter-spacing: 0.13em;
}

.feature-primary-grid strong {
    color: #f1e7d4;
    font: 700 clamp(1.15rem, 1.65vw, 1.5rem)/1.15 "Beaufort for LoL", Georgia, serif;
}

.feature-primary-grid p {
    margin: 3px 0 0;
    color: #9fa3a6;
    font: 500 12px/1.65 Tahoma, Arial, sans-serif;
}

.feature-core-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 11px;
}

.feature-core-grid li {
    min-height: 68px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    padding: 12px 18px;
    border: 1px solid rgba(191, 145, 69, 0.3);
    border-left: 3px solid rgba(216, 164, 76, 0.72);
    border-radius: 5px;
    color: #dcdedc;
    background: linear-gradient(115deg, rgba(61, 43, 21, 0.34), rgba(10, 18, 30, 0.9));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
    font: 700 13px/1.3 Tahoma, Arial, sans-serif;
    transition: border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.feature-core-grid li:hover {
    border-color: rgba(208, 171, 100, 0.48);
    color: #fff4df;
    transform: translateY(-2px);
}

.feature-group-missing .feature-group-heading > span {
    border-color: rgba(208, 79, 75, 0.48);
    color: #e57069;
    background: rgba(118, 34, 37, 0.2);
}

.feature-group-missing .feature-group-heading > i {
    background: linear-gradient(90deg, rgba(207, 77, 73, 0.46), rgba(127, 47, 56, 0.13) 55%, transparent);
}

.feature-missing-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.feature-missing-grid li {
    min-height: 78px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 12px;
    border: 1px solid rgba(174, 63, 65, 0.34);
    border-radius: 5px;
    background: linear-gradient(120deg, rgba(73, 24, 31, 0.5), rgba(17, 14, 23, 0.9));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.feature-missing-grid li > i {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(210, 83, 78, 0.42);
    color: #d8625d;
    background: rgba(134, 39, 42, 0.14);
    font-size: 13px;
}

.feature-missing-grid li.feature-missing-system {
    grid-template-columns: 78px minmax(0, 1fr);
}

.feature-missing-grid li.feature-missing-single {
    grid-template-columns: 43px minmax(0, 1fr);
}

.feature-missing-icons {
    display: flex;
    align-items: center;
    gap: 3px;
}

.feature-missing-icon {
    position: relative;
    display: grid;
    width: 37px;
    height: 46px;
    place-items: center;
    border: 1px solid rgba(193, 77, 75, 0.3);
    background: rgba(7, 11, 17, 0.72);
}

.feature-missing-icon img {
    width: auto;
    max-width: 32px;
    height: auto;
    max-height: 40px;
    object-fit: contain;
    filter: saturate(0.72) brightness(0.78);
}

.feature-missing-icon i {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: grid;
    place-items: center;
    color: #ef5e58;
    font-size: 22px;
    text-shadow: 0 1px 2px #250708, 0 0 8px rgba(220, 52, 49, 0.58);
}

.feature-missing-grid li > span {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.feature-missing-grid strong {
    color: #d9d2cc;
    font: 700 11px/1.3 Tahoma, Arial, sans-serif;
}

.feature-missing-grid small {
    color: #e46a63;
    font: 900 10px/1 Tahoma, Arial, sans-serif;
    letter-spacing: 0.14em;
}

@media (max-width: 1120px) {
    .feature-core-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .feature-missing-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .feature-groups {
        gap: 27px;
    }

    .feature-group-heading {
        grid-template-columns: 36px max-content minmax(24px, 1fr);
        gap: 10px;
    }

    .feature-group-heading > span {
        width: 36px;
        height: 28px;
    }

    .feature-group-heading h3 {
        font-size: 10px;
    }

    .feature-primary-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .feature-primary-grid li {
        min-height: 330px;
        grid-template-rows: 185px minmax(0, 1fr);
    }

    .feature-primary-grid strong {
        font-size: 1.12rem;
    }

    .feature-primary-copy {
        padding: 16px;
    }

    .feature-primary-grid p {
        font-size: 11px;
    }

    .feature-core-grid,
    .feature-missing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .feature-core-grid li {
        min-height: 68px;
        grid-template-columns: minmax(0, 1fr);
        padding: 10px;
    }

    .feature-missing-grid li {
        min-height: 68px;
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 9px;
        padding: 10px;
    }

    .feature-missing-grid li > i {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }

    .feature-missing-grid li.feature-missing-system {
        grid-template-columns: 66px minmax(0, 1fr);
    }

    .feature-missing-grid li.feature-missing-single {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .feature-missing-icon {
        width: 31px;
        height: 40px;
    }

    .feature-missing-icon img {
        max-width: 27px;
        max-height: 34px;
    }

    .feature-missing-icon i {
        font-size: 18px;
    }

    .feature-core-grid li {
        font-size: 11px;
    }

    .feature-missing-grid strong {
        font-size: 13px;
    }
}

@media (max-width: 350px) {
    .feature-core-grid,
    .feature-missing-grid {
        grid-template-columns: 1fr;
    }
}

.guild-lands-benefits .is-gold,
.guild-lands-benefits .is-red,
.guild-lands-benefits .is-green {
    color: #dfa94f;
    border-color: rgba(220, 164, 73, 0.32);
    background: rgba(151, 99, 27, 0.09);
}

/* Soft section continuity: artwork fades to a shared canvas at both edges. */
main {
    background: #07101a;
    --section-art-fade: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.06) 28px,
        rgba(0, 0, 0, 0.18) 56px,
        rgba(0, 0, 0, 0.38) 92px,
        rgba(0, 0, 0, 0.62) 132px,
        rgba(0, 0, 0, 0.82) 176px,
        #000 230px,
        #000 calc(100% - 230px),
        rgba(0, 0, 0, 0.82) calc(100% - 176px),
        rgba(0, 0, 0, 0.62) calc(100% - 132px),
        rgba(0, 0, 0, 0.38) calc(100% - 92px),
        rgba(0, 0, 0, 0.18) calc(100% - 56px),
        rgba(0, 0, 0, 0.06) calc(100% - 28px),
        transparent 100%
    );
}

main > .scene-flow.scene-flow {
    --scene-flow-overlap: 0px;
    --scene-flow-padding: 78px;
    padding-bottom: 0px;
    background: transparent;
}

main > .character-select {
    margin-top: 0;
    padding-top: 88px;
    padding-bottom: 64px;
    background: linear-gradient(180deg, rgba(7, 16, 26, 0) 0%, rgba(7, 16, 26, 0.62) 72px, #07101a 178px);
}

main > .scene-flow > .scene-flow-fade {
    display: none;
}

main > .scene-flow::before,
main > .scene-flow::after,
main > .scene-flow > .game-start-backdrop,
main > .scene-flow > .npc-section-backdrop,
main > .scene-flow > .offline-market-backdrop,
main > .scene-flow > .level-quests-backdrop,
main > .scene-flow > .horse-quests-backdrop,
main > .scene-flow > .fishing-system-backdrop,
main > .scene-flow > .guild-lands-backdrop,
main > .scene-flow > .biologist-backdrop,
main > .scene-flow > .demon-tower-backdrop {
    -webkit-mask-image: var(--section-art-fade);
    mask-image: var(--section-art-fade);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    mask-mode: alpha;
}

/* Final signature scene */
.final-signature {
    position: relative;
    display: flex;
    min-height: 1160px;
    align-items: flex-end;
    overflow: hidden;
    color: #f5ead5;
    isolation: isolate;
}

.final-signature-backdrop {
    position: absolute;
    z-index: -3;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(4, 9, 16, 0.08) 0%, rgba(4, 9, 16, 0.14) 34%, rgba(7, 16, 26, 0.68) 60%, #07101a 88%, #07101a 100%),
        linear-gradient(90deg, rgba(3, 9, 16, 0.78) 0%, transparent 28%, transparent 72%, rgba(3, 9, 16, 0.78) 100%),
        url("../images/characters/footer-bg.webp?v3") center top / cover no-repeat;
    filter: saturate(0.82) contrast(1.03);
    pointer-events: none;
}

.final-signature::before,
.final-signature::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
}

.final-signature::before {
    z-index: -2;
    background: radial-gradient(circle at 50% 23%, rgba(76, 137, 192, 0.1), transparent 32%);
}

.final-signature::after {
    z-index: -1;
    background: linear-gradient(180deg, transparent 42%, rgba(5, 11, 18, 0.38) 55%, rgba(7, 16, 26, 0.92) 78%, #07101a 100%);
}

.final-signature > .section-shell {
    position: relative;
    z-index: 1;
    width: min(1260px, calc(100% - 64px));
    margin-top: auto;
}

.final-signature-content {
    position: relative;
    top: 150px;
    max-width: 1040px;
    margin: 0 auto;
    text-align: center;
}

.final-signature-kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 0 18px;
    color: #ddb46d;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.final-signature-kicker span {
    width: 62px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #b52e35);
}

.final-signature-kicker span:last-child {
    background: linear-gradient(90deg, #b52e35, transparent);
}

.final-signature h2 {
    display: grid;
    margin: 0;
    color: #fff8ec;
    font-family: "Beaufort for LoL", Georgia, serif;
    font-size: 86px;
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: 0;
    text-shadow: 0 12px 40px rgba(0, 0, 0, 0.72);
}

.final-signature h2 span {
    font-size: 0.58em;
    line-height: 1.15;
}

.final-signature h2 em {
    color: #f4d28f;
    font-style: normal;
}

.final-signature h2 strong {
    margin-top: 12px;
    color: #dfac54;
    font-size: 0.54em;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.final-signature-copy {
    max-width: 800px;
    margin: 26px auto 30px;
    color: #c5c1ba;
    font-size: 16px;
    line-height: 1.75;
    text-shadow: 0 2px 12px #000;
}

.final-signature-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: min(780px, 100%);
    margin: 0 auto;
}

.final-signature-stores {
    width: min(680px, 100%);
    margin: 16px auto 0;
}

main > .final-signature > .final-signature-backdrop {
    -webkit-mask-image: var(--section-art-fade);
    mask-image: var(--section-art-fade);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    mask-mode: alpha;
}

@media (max-width: 900px) {
    .final-signature {
        min-height: 1080px;
    }

    .final-signature h2 {
        font-size: 64px;
    }

    .final-signature-content {
        top: 100px;
    }
}

@media (max-width: 760px) {
    .final-signature {
        min-height: 1120px;
        padding-bottom: 58px;
    }

    .final-signature-backdrop {
        background-position: center top;
    }

    .final-signature > .section-shell {
        width: calc(100% - 28px);
    }

    .final-signature-kicker {
        gap: 9px;
        font-size: 8px;
    }

    .final-signature-kicker span {
        width: 34px;
    }

    .final-signature h2 {
        font-size: 48px;
    }

    .final-signature-copy {
        margin: 20px auto 24px;
        padding: 0 8px;
        font-size: 13px;
        line-height: 1.7;
    }

    .final-signature-content {
        top: 64px;
    }

    .final-signature-actions,
    .final-signature-stores {
        grid-template-columns: 1fr;
    }

    .final-signature-actions {
        gap: 10px;
    }

    .final-signature-stores {
        gap: 8px;
        margin-top: 12px;
    }

    .final-signature-stores .store-button {
        min-height: 54px;
    }
}

/* Early-page artwork follows the same top/bottom dissolve. */
main > .foreword::before,
main > .general-features::before,
main > .general-features::after,
main > .cross-platform::before,
main > .cross-platform::after,
main > .character-select::before,
main > .character-select::after,
main > .character-select > .character-select-backdrop,
main > .general-features > .features-backdrop {
    -webkit-mask-image: var(--section-art-fade);
    mask-image: var(--section-art-fade);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    mask-mode: alpha;
}

/* The first screen has no previous section, so only its lower edge dissolves. */
main > .hero .hero-video {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 64%, rgba(0, 0, 0, 0.9) 70%, rgba(0, 0, 0, 0.62) 80%, rgba(0, 0, 0, 0.28) 90%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 64%, rgba(0, 0, 0, 0.9) 70%, rgba(0, 0, 0, 0.62) 80%, rgba(0, 0, 0, 0.28) 90%, transparent 100%);
}

.general-features > .section-bridge {
    display: none;
}

/* Split play action: direct download on the label, platform menu on the chevron. */
.nav-play-menu {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
}

.nav-play-menu > .nav-action {
    min-width: 130px;
    border-right: 0;
}

.nav-action-toggle {
    position: relative;
    display: grid;
    min-width: 40px;
    min-height: 54px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 173, 111, 0.42);
    border-left-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    background: linear-gradient(120deg, #b52c31, #e05443 70%, #ef7650);
    box-shadow: 0 12px 30px rgba(159, 30, 37, 0.3), inset 0 1px rgba(255, 255, 255, 0.14);
    cursor: pointer;
}

.nav-action-toggle i {
    font-size: 9px;
    transition: transform 180ms ease;
}

.nav-action-toggle:hover,
.nav-action-toggle:focus-visible {
    color: #fff5dc;
    background: linear-gradient(120deg, #c73438, #eb624b 70%, #f3865e);
    outline: 0;
}

.nav-play-menu.open .nav-action-toggle i {
    transform: rotate(180deg);
}

/* Image-led system cards, matching the visual rhythm of the primary features. */
.feature-group-heading {
    grid-template-columns: max-content minmax(24px, 1fr);
    margin-bottom: 18px;
}

.feature-group-heading h3 {
    color: #f0e2c8;
    font-size: 13px;
    letter-spacing: 0.13em;
}

.feature-core-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.feature-core-grid li {
    position: relative;
    min-height: 390px;
    display: block;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(199, 154, 80, 0.28);
    border-radius: 7px;
    background: #090b0f;
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.38), inset 0 1px rgba(255, 255, 255, 0.035);
    transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.feature-core-grid li::after {
    position: absolute;
    right: 18px;
    bottom: 0;
    left: 18px;
    z-index: 3;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(223, 174, 87, 0.72), transparent);
    content: "";
    opacity: 0;
    transition: opacity 220ms ease;
}

.feature-core-grid li > a {
    position: relative;
    height: 100%;
    min-height: 390px;
    display: block;
    isolation: isolate;
    color: inherit;
    text-decoration: none;
}

.feature-core-grid li > a::before,
.feature-core-grid li > a::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    pointer-events: none;
}

.feature-core-grid li > a::before {
    background:
        linear-gradient(180deg, rgba(5, 7, 10, 0.03) 0%, rgba(5, 7, 10, 0.08) 32%, rgba(6, 8, 12, 0.72) 59%, #090b0f 82%, #090b0f 100%),
        linear-gradient(90deg, rgba(5, 7, 10, 0.18), transparent 35%, transparent 65%, rgba(5, 7, 10, 0.18));
}

.feature-core-grid li > a::after {
    border: 1px solid transparent;
    background: linear-gradient(145deg, rgba(255, 232, 184, 0.09), transparent 24%) border-box;
    opacity: 0.65;
}

.feature-core-grid img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.74) brightness(0.72) contrast(1.08);
    transform: scale(1.01);
    transition: filter 300ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.feature-core-grid a > span {
    position: absolute;
    right: 24px;
    bottom: 25px;
    left: 24px;
    z-index: 2;
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 13px;
    padding-top: 18px;
    border-top: 1px solid rgba(222, 180, 108, 0.2);
}

.feature-core-grid strong {
    color: #f1d38f;
    font: 700 20px/1.15 "Beaufort for LoL", Georgia, serif;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.9);
}

.feature-core-grid p {
    margin: 0;
    color: #bbb5aa;
    font: 500 11px/1.7 Tahoma, Arial, sans-serif;
    text-shadow: 0 2px 8px #000;
}

.feature-core-grid a > i {
    position: absolute;
    z-index: 3;
    top: 18px;
    right: 18px;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid rgba(225, 184, 110, 0.32);
    border-radius: 50%;
    color: #e8bd70;
    background: rgba(6, 9, 14, 0.72);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32);
    font-size: 9px;
    transition: color 180ms ease, transform 180ms ease, background 180ms ease;
}

.feature-core-grid li:hover img,
.feature-core-grid li:focus-within img {
    filter: saturate(0.95) brightness(0.84) contrast(1.05);
    transform: scale(1.075);
}

.feature-core-grid li:hover a > i,
.feature-core-grid li:focus-within a > i {
    color: #fff4d4;
    background: rgba(144, 91, 26, 0.78);
    transform: translateX(2px);
}

.feature-core-grid li:hover,
.feature-core-grid li:focus-within {
    border-color: rgba(224, 178, 94, 0.58);
    box-shadow: 0 30px 58px rgba(0, 0, 0, 0.48), 0 0 24px rgba(190, 127, 37, 0.08);
    transform: translateY(-5px);
}

.feature-core-grid li:hover::after,
.feature-core-grid li:focus-within::after {
    opacity: 1;
}

.feature-core-grid a:focus-visible {
    outline: 1px solid #d8a44c;
    outline-offset: -2px;
}

/* One omitted system per compact card, with one clearly readable icon. */
.feature-missing-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
}

.feature-missing-grid li,
.feature-missing-grid li.feature-missing-system,
.feature-missing-grid li.feature-missing-single {
    min-height: 66px;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 11px;
    padding: 8px 11px;
}

.feature-missing-grid .feature-missing-icon {
    position: relative;
    width: 48px;
    height: 48px;
    border-color: rgba(202, 80, 77, 0.36);
}

.feature-missing-grid .feature-missing-icon img {
    max-width: 42px;
    max-height: 42px;
    filter: saturate(0.72) brightness(0.88);
}

.feature-missing-grid .feature-missing-icon > i,
.feature-missing-grid .feature-missing-icon > b {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: grid;
    place-items: center;
    color: #ef5e58;
    font-size: 24px;
    font-weight: 900;
    text-shadow: 0 1px 2px #250708, 0 0 8px rgba(220, 52, 49, 0.6);
}

.feature-missing-grid .feature-missing-symbol > i {
    color: #76676a;
    font-size: 22px;
    text-shadow: none;
}

.feature-missing-grid .feature-missing-symbol > b {
    color: #ef5e58;
}

.feature-missing-grid li > span:last-child {
    gap: 4px;
}

.feature-missing-grid strong {
    font-size: 13px;
}

/* Corporate footer and fixed community calls. */
.site-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px 42px;
    padding-top: 30px;
    padding-bottom: 20px;
}

.footer-follow {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    width: 100%;
    padding: 20px 22px;
    border: 1px solid rgba(207, 163, 85, 0.22);
    border-left: 3px solid rgba(210, 162, 76, 0.78);
    background: linear-gradient(105deg, rgba(37, 27, 20, 0.34), rgba(10, 16, 25, 0.88));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.03);
}

.footer-follow > span:first-child {
    display: grid;
    gap: 7px;
}

.footer-follow small {
    color: #a9854c;
    font: 800 8px/1 Tahoma, Arial, sans-serif;
    letter-spacing: 0.16em;
}

.footer-follow strong {
    color: #e9dfcf;
    font: 700 18px/1.1 "Beaufort for LoL", Georgia, serif;
}

.site-footer > .site-footer-brand {
    display: flex;
    align-items: center;
    gap: 22px;
}

.footer-since {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    min-width: min(400px, 100%);
}

.footer-since article {
    display: grid;
    place-content: center;
    gap: 8px;
    min-width: 0;
    padding: 8px 16px;
    text-align: center;
}

.footer-since small {
    color: #c4b48a;
    font: 800 10px/1 Tahoma, Arial, sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.footer-since strong {
    color: #f4d28f;
    font: 700 20px/1 "Beaufort for LoL", Georgia, serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.footer-since-rule {
    width: 1px;
    margin: 6px 0;
    background: linear-gradient(180deg, transparent, rgba(232, 174, 76, 0.45), transparent);
}

.footer-socials {
    display: flex;
    gap: 9px;
}

.footer-socials a {
    min-width: 110px;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 8px 13px;
    border: 1px solid rgba(206, 161, 84, 0.24);
    color: #f3d998;
    background: rgb(9 15 27);
    font-size: 17px;
    text-decoration: none;
    transition: color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.footer-socials a span {
    font: 700 10px/1 Tahoma, Arial, sans-serif;
    letter-spacing: 0.06em;
}

.footer-socials a:hover,
.footer-socials a:focus-visible {
    border-color: rgba(224, 178, 94, 0.62);
    color: #f1cf8e;
    outline: 0;
    transform: translateY(-2px);
}

.fixed-community-card {
    position: fixed;
    z-index: 80;
    bottom: 22px;
    width: auto;
    max-width: 220px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(10, 14, 22, 0.88);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease, background 200ms ease;
}

.fixed-community-discord {
    left: 22px;
    border-color: rgba(88, 101, 242, 0.22);
    animation: fixedCommunityEnterLeft 500ms 450ms ease both;
}

.fixed-community-whatsapp {
    right: 22px;
    border-color: rgba(37, 211, 102, 0.22);
    animation: fixedCommunityEnterRight 500ms 600ms ease both;
}

.fixed-community-card > a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 6px 14px 6px 6px;
    color: #eee8dc;
    text-decoration: none;
}

.fixed-community-mark {
    display: grid;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    font-size: 16px;
}

.fixed-community-discord .fixed-community-mark {
    color: #fff;
    background: rgba(88, 101, 242, 0.9);
}

.fixed-community-whatsapp .fixed-community-mark {
    color: #fff;
    background: rgba(37, 211, 102, 0.9);
}

.fixed-community-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fixed-community-copy strong {
    color: #f0ebe3;
    font: 700 0.68rem/1.2 Tahoma, Arial, sans-serif;
    letter-spacing: 0.04em;
}

.fixed-community-copy small {
    color: #8a919a;
    font: 500 0.58rem/1.3 Tahoma, Arial, sans-serif;
}

.fixed-community-arrow {
    flex-shrink: 0;
    margin-left: 2px;
    color: #6f7782;
    font-size: 0.62rem;
    transition: color 180ms ease, transform 180ms ease;
}

.fixed-community-card:hover,
.fixed-community-card:focus-within {
    background: rgba(14, 18, 28, 0.94);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42);
    transform: translateY(-2px);
}

.fixed-community-discord:hover,
.fixed-community-discord:focus-within {
    border-color: rgba(88, 101, 242, 0.42);
}

.fixed-community-whatsapp:hover,
.fixed-community-whatsapp:focus-within {
    border-color: rgba(37, 211, 102, 0.42);
}

.fixed-community-card:hover .fixed-community-arrow,
.fixed-community-card:focus-within .fixed-community-arrow {
    color: var(--gold-light);
    transform: translate(1px, -1px);
}

@keyframes fixedCommunityEnterLeft {
    from { opacity: 0; transform: translateX(-16px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fixedCommunityEnterRight {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 1120px) {
    .feature-core-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

@media (max-width: 760px) {
    .nav-action-toggle {
        min-height: 48px;
    }

    .feature-core-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .feature-missing-grid {
        grid-template-columns: 1fr;
    }

    .feature-core-grid li,
    .feature-core-grid li > a {
        min-height: 350px;
    }

    .feature-core-grid a > span {
        right: 18px;
        bottom: 20px;
        left: 18px;
        padding-top: 14px;
    }

    .feature-core-grid strong {
        font-size: 15px;
    }

    .feature-core-grid p {
        font-size: 10px;
    }

    .feature-missing-grid li,
    .feature-missing-grid li.feature-missing-system,
    .feature-missing-grid li.feature-missing-single {
        min-height: 62px;
        grid-template-columns: 46px minmax(0, 1fr);
        padding: 7px 10px;
    }

    .feature-missing-grid .feature-missing-icon {
        width: 44px;
        height: 44px;
    }

    .feature-missing-grid .feature-missing-icon img {
        max-width: 38px;
        max-height: 38px;
    }

    .site-footer {
        grid-template-columns: 1fr;
        padding-bottom: 82px;
    }

    .footer-follow {
        display: grid;
        justify-items: center;
        text-align: center;
    }

    .footer-socials {
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer-socials a {
        min-width: 96px;
    }

    .site-footer > .site-footer-brand,
    .site-footer nav {
        justify-content: center;
    }

    .site-footer > .site-footer-brand {
        text-align: left;
    }

    .footer-since {
        min-width: 0;
        width: 100%;
    }

    .fixed-community-card {
        bottom: 12px;
        max-width: none;
        width: 44px;
        height: 44px;
        border-radius: 50%;
    }

    .fixed-community-discord { left: 12px; }
    .fixed-community-whatsapp { right: 12px; }

    .fixed-community-card > a {
        justify-content: center;
        min-height: 44px;
        padding: 0;
    }

    .fixed-community-mark {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    .fixed-community-copy,
    .fixed-community-arrow {
        display: none;
    }
}

@media (max-width: 520px) {
    .feature-core-grid {
        grid-template-columns: 1fr;
    }

    .feature-core-grid li,
    .feature-core-grid li > a {
        min-height: 390px;
    }
}

@media (max-width: 640px) {
    .nav-play-menu {
        display: none;
    }
}

@media (max-width: 760px) {
    main {
        --section-art-fade: linear-gradient(
            180deg,
            transparent 0%,
            rgba(0, 0, 0, 0.08) 18px,
            rgba(0, 0, 0, 0.24) 38px,
            rgba(0, 0, 0, 0.5) 68px,
            rgba(0, 0, 0, 0.78) 104px,
            #000 146px,
            #000 calc(100% - 146px),
            rgba(0, 0, 0, 0.78) calc(100% - 104px),
            rgba(0, 0, 0, 0.5) calc(100% - 68px),
            rgba(0, 0, 0, 0.24) calc(100% - 38px),
            rgba(0, 0, 0, 0.08) calc(100% - 18px),
            transparent 100%
        );
    }

    main > .scene-flow.scene-flow {
        --scene-flow-overlap: 0px;
        --scene-flow-padding: 62px;
        padding-bottom: 46px;
    }

    main > .character-select {
        margin-top: 0;
        padding-top: 68px;
        padding-bottom: 48px;
        background: linear-gradient(180deg, rgba(7, 16, 26, 0) 0%, rgba(7, 16, 26, 0.7) 52px, #07101a 126px);
    }

    main > .scene-flow::before,
    main > .scene-flow::after,
    main > .scene-flow > .game-start-backdrop,
    main > .scene-flow > .npc-section-backdrop,
    main > .scene-flow > .offline-market-backdrop,
    main > .scene-flow > .level-quests-backdrop,
    main > .scene-flow > .horse-quests-backdrop,
    main > .scene-flow > .fishing-system-backdrop,
    main > .scene-flow > .guild-lands-backdrop,
    main > .scene-flow > .biologist-backdrop,
    main > .scene-flow > .demon-tower-backdrop {
        -webkit-mask-image: var(--section-art-fade);
        mask-image: var(--section-art-fade);
    }
}