/* MMORPG atmosphere and responsive polish shared by player-facing screens. */
:root {
    --mmo-ink: #07090d;
    --mmo-void: #0d1117;
    --mmo-panel: rgba(18, 24, 25, 0.92);
    --mmo-panel-strong: rgba(25, 31, 35, 0.96);
    --mmo-line: rgba(198, 164, 91, 0.24);
    --mmo-line-cool: rgba(82, 137, 176, 0.26);
    --mmo-gold: #d5b16a;
    --mmo-green: #57b783;
    --mmo-blue: #5f8fc2;
    --mmo-rust: #b76445;
    --mmo-text: #e7eadf;
    --mmo-muted: #9ca99d;
    --mmo-shadow: 0 18px 44px rgba(0, 0, 0, 0.54);
    --mmo-soft-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
}

html {
    color-scheme: dark;
}

body.mmo-ui-page {
    min-height: 100vh;
    background:
        linear-gradient(115deg, rgba(9, 13, 17, 0.94), rgba(15, 23, 20, 0.96) 46%, rgba(12, 15, 21, 0.98)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 64px),
        repeating-linear-gradient(0deg, rgba(213, 177, 106, 0.018) 0 1px, transparent 1px 72px),
        #07090d !important;
    color: var(--mmo-text);
    letter-spacing: 0;
}

body.mmo-ui-page * {
    text-underline-offset: 3px;
}

body.mmo-ui-page button,
body.mmo-ui-page input,
body.mmo-ui-page select,
body.mmo-ui-page textarea {
    font-family: inherit;
}

body.mmo-ui-page button,
body.mmo-ui-page .facility-btn,
body.mmo-ui-page .tab-btn,
body.mmo-ui-page .chat-tab,
body.mmo-ui-page .action-btn,
body.mmo-ui-page .menu-item {
    min-height: 42px;
}

body.mmo-ui-page button:focus-visible,
body.mmo-ui-page a:focus-visible,
body.mmo-ui-page input:focus-visible,
body.mmo-ui-page select:focus-visible,
body.mmo-ui-page textarea:focus-visible {
    outline: 2px solid var(--mmo-gold);
    outline-offset: 2px;
}

body.mmo-ui-page ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.mmo-ui-page ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.22);
}

body.mmo-ui-page ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #52616b, #354049);
    border-radius: 8px;
}

@keyframes mmoPanelEnter {
    from { opacity: 0; transform: translateY(12px); filter: brightness(0.88); }
    to { opacity: 1; transform: translateY(0); filter: brightness(1); }
}

@keyframes mmoBorderWake {
    0%, 100% { box-shadow: var(--mmo-soft-shadow), inset 0 0 0 rgba(213, 177, 106, 0); }
    45% { box-shadow: var(--mmo-soft-shadow), inset 0 0 26px rgba(213, 177, 106, 0.08); }
}

@keyframes mmoReadyPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(87, 183, 131, 0); }
    50% { box-shadow: 0 0 20px rgba(87, 183, 131, 0.22); }
}

/* Login */
body.mmo-login {
    overflow: hidden;
}

body.mmo-login .login-box {
    position: relative;
    max-width: 390px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(24, 27, 31, 0.96), rgba(12, 15, 18, 0.98)),
        var(--mmo-panel-strong) !important;
    border-color: rgba(213, 177, 106, 0.72) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.78), 0 0 0 1px rgba(95, 143, 194, 0.14) !important;
    animation: mmoPanelEnter 420ms ease both;
}

body.mmo-login .login-box::before {
    content: "";
    display: block;
    height: 96px;
    margin: -40px -30px 24px;
    background:
        linear-gradient(180deg, rgba(213, 177, 106, 0.24), transparent 70%),
        linear-gradient(135deg, rgba(95, 143, 194, 0.18), rgba(87, 183, 131, 0.12)),
        repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, 0.055) 22px 23px);
    border-bottom: 1px solid rgba(213, 177, 106, 0.22);
}

body.mmo-login h2 {
    margin-top: -8px !important;
    text-shadow: 0 2px 20px rgba(213, 177, 106, 0.28);
}

body.mmo-login input {
    background: rgba(5, 7, 9, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

body.mmo-login button {
    background: linear-gradient(180deg, #3f7fb4, #295c8a) !important;
    box-shadow: 0 10px 22px rgba(41, 92, 138, 0.28);
}

body.mmo-login .tip-text {
    background: rgba(213, 177, 106, 0.08) !important;
    border-color: rgba(213, 177, 106, 0.34) !important;
}

/* Town */
body.mmo-town {
    align-items: stretch;
}

body.mmo-town .container {
    max-width: 1240px !important;
    grid-template-columns: minmax(0, 1.75fr) minmax(330px, 0.85fr) !important;
    align-items: start;
}

body.mmo-town .panel {
    position: relative;
    overflow: hidden;
    background: var(--mmo-panel) !important;
    border-color: rgba(213, 177, 106, 0.16) !important;
    box-shadow: var(--mmo-shadow) !important;
    animation: mmoPanelEnter 360ms ease both;
}

body.mmo-town .panel:nth-child(2) {
    animation-delay: 70ms;
}

body.mmo-town .header {
    min-height: 140px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: -25px -25px 22px !important;
    padding: 32px 24px 24px !important;
    background:
        linear-gradient(180deg, rgba(13, 19, 22, 0.18), rgba(11, 16, 14, 0.92)),
        linear-gradient(120deg, rgba(87, 183, 131, 0.20), rgba(95, 143, 194, 0.13) 48%, rgba(183, 100, 69, 0.12)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 34px);
    border-bottom: 1px solid rgba(213, 177, 106, 0.24) !important;
}

body.mmo-town .header h1 {
    font-size: clamp(30px, 4vw, 46px) !important;
    text-shadow: 0 3px 24px rgba(213, 177, 106, 0.36);
}

body.mmo-town .npc-box,
body.mmo-town .town-event {
    background: rgba(7, 10, 11, 0.56) !important;
    border-color: rgba(213, 177, 106, 0.34) !important;
}

body.mmo-town .facilities-grid {
    gap: 12px !important;
}

body.mmo-town .facility-btn {
    position: relative;
    min-height: 74px;
    background: linear-gradient(180deg, rgba(30, 42, 36, 0.92), rgba(19, 29, 25, 0.96)) !important;
    border-color: rgba(87, 183, 131, 0.28) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

body.mmo-town .facility-btn::after {
    content: ">";
    margin-left: auto;
    color: rgba(213, 177, 106, 0.72);
    font-weight: 900;
}

body.mmo-town .facility-btn.large {
    border-color: rgba(213, 177, 106, 0.42) !important;
    background: linear-gradient(180deg, rgba(45, 37, 24, 0.92), rgba(24, 31, 27, 0.96)) !important;
}

body.mmo-town .btn-explore-action {
    background: linear-gradient(180deg, #2f6f54, #234d3f) !important;
    border-color: rgba(96, 210, 148, 0.62) !important;
    font-weight: 900;
}

body.mmo-town .chat-box {
    flex: 0 0 auto !important;
    min-height: 440px;
    height: clamp(300px, 48vh, 470px) !important;
    background: rgba(4, 7, 8, 0.62) !important;
    border-color: rgba(213, 177, 106, 0.18) !important;
}

body.mmo-town .chat-tabs {
    background: rgba(4, 7, 8, 0.36);
    border-radius: 8px;
    padding: 4px;
    border-bottom: 0 !important;
}

body.mmo-town .chat-tab.active {
    background: rgba(95, 143, 194, 0.20);
    border: 1px solid rgba(95, 143, 194, 0.38) !important;
    border-radius: 6px;
    margin-bottom: 0 !important;
}

body.mmo-town .chat-input-area input {
    background: rgba(5, 8, 10, 0.78) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

body.mmo-town .chat-input-area button {
    background: linear-gradient(180deg, #4f86b8, #2f638f) !important;
}

/* Adventure */
body.mmo-adventure {
    max-width: 1220px !important;
    background-color: var(--mmo-void) !important;
}

body.mmo-adventure .discord-embed,
body.mmo-adventure .main-panel,
body.mmo-adventure .controls,
body.mmo-adventure .side-panel-card,
body.mmo-adventure .modal-panel {
    background: var(--mmo-panel) !important;
    border-color: rgba(213, 177, 106, 0.16) !important;
    box-shadow: var(--mmo-soft-shadow) !important;
}

body.mmo-adventure .discord-embed {
    min-height: 104px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 5px solid var(--mmo-green) !important;
    background:
        linear-gradient(90deg, rgba(87, 183, 131, 0.16), rgba(95, 143, 194, 0.08)),
        var(--mmo-panel-strong) !important;
}

body.mmo-adventure .grid-2 {
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.95fr) !important;
}

body.mmo-adventure .main-panel {
    border: 1px solid rgba(213, 177, 106, 0.14);
    border-radius: var(--radius-lg, 12px);
    padding: 16px;
    animation: mmoPanelEnter 340ms ease both;
}

body.mmo-adventure .side-panel {
    gap: 14px;
}

body.mmo-adventure .log-box {
    height: clamp(320px, 48vh, 560px) !important;
    background:
        linear-gradient(180deg, rgba(5, 8, 11, 0.72), rgba(8, 10, 12, 0.82)),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 32px) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body.mmo-adventure .tabs-container,
body.mmo-adventure .chat-input,
body.mmo-adventure select,
body.mmo-adventure input {
    border-color: rgba(255, 255, 255, 0.10);
}

body.mmo-adventure #advanceBtn {
    background: linear-gradient(180deg, #38a166, #247347) !important;
    border: 1px solid rgba(128, 238, 171, 0.35);
    box-shadow: 0 10px 24px rgba(36, 115, 71, 0.22);
}

body.mmo-adventure #readyBtn {
    animation: mmoReadyPulse 2.4s ease-in-out infinite;
}

/* Character */
body.mmo-character .container {
    max-width: 1360px !important;
    gap: 18px !important;
}

body.mmo-character .character-panel,
body.mmo-character .inventory-panel {
    background: var(--mmo-panel) !important;
    border-color: rgba(213, 177, 106, 0.16) !important;
    box-shadow: var(--mmo-shadow) !important;
}

body.mmo-character .character-panel {
    flex: 0.96 !important;
}

body.mmo-character .inventory-panel {
    flex: 1.08 !important;
}

body.mmo-character h2 {
    color: var(--mmo-gold) !important;
}

body.mmo-character .stat-item,
body.mmo-character .equip-slot,
body.mmo-character .item-card,
body.mmo-character .appearance-panel,
body.mmo-character .party-panel,
body.mmo-character .echo-panel,
body.mmo-character .ap-panel {
    background: rgba(6, 9, 11, 0.46) !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
}

body.mmo-character .stat-item:hover,
body.mmo-character .equip-slot:hover,
body.mmo-character .item-card:hover {
    border-color: rgba(213, 177, 106, 0.48) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32), inset 0 0 18px rgba(213, 177, 106, 0.045) !important;
}

body.mmo-character .tabs {
    position: sticky;
    top: 0;
    z-index: 8;
    background: rgba(17, 22, 24, 0.96);
    backdrop-filter: blur(10px);
}

body.mmo-character .tab-btn.active {
    background: linear-gradient(180deg, #d5b16a, #b58b42) !important;
}

body.mmo-character .item-list {
    gap: 10px !important;
}

body.mmo-character .item-card {
    border-left: 4px solid rgba(213, 177, 106, 0.36) !important;
}

/* Battle */
body.mmo-battle {
    padding: 12px !important;
    align-items: center !important;
}

body.mmo-battle .game-screen {
    max-width: min(1240px, calc(100vw - 24px)) !important;
    width: 100% !important;
    height: min(94vh, 900px) !important;
    min-height: min(760px, calc(100vh - 24px)) !important;
    background:
        linear-gradient(180deg, rgba(27, 35, 44, 0.98), rgba(10, 12, 15, 0.98)),
        var(--mmo-void) !important;
    border: 1px solid rgba(213, 177, 106, 0.24) !important;
    box-shadow: 0 24px 76px rgba(0, 0, 0, 0.78), inset 0 0 0 1px rgba(255, 255, 255, 0.035) !important;
}

body.mmo-battle .battlefield {
    overflow: auto !important;
    padding: 12px 16px !important;
    cursor: grab;
    touch-action: pan-x pan-y;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
    background:
        linear-gradient(180deg, rgba(95, 143, 194, 0.055), transparent 44%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 56px);
}

body.mmo-battle .battlefield.is-panning {
    cursor: grabbing;
    user-select: none;
}

body.mmo-battle .battle-grid {
    max-width: none !important;
    min-width: max-content !important;
    width: max-content !important;
    height: max-content !important;
    grid-template-columns: repeat(var(--battle-cols, 6), var(--battle-cell-size, 72px)) !important;
    grid-template-rows: repeat(var(--battle-rows, 10), var(--battle-cell-size, 72px)) !important;
    gap: 5px !important;
}

body.mmo-battle .grid-cell {
    min-width: var(--battle-cell-size, 72px) !important;
    min-height: var(--battle-cell-size, 72px) !important;
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

body.mmo-battle .grid-cell.has-terrain.terrain-cliff {
    background:
        radial-gradient(circle at 50% 46%, rgba(0, 0, 0, 0.66), rgba(7, 9, 13, 0.24) 56%, rgba(0, 0, 0, 0.12)),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 2px, rgba(0, 0, 0, 0.18) 2px 7px) !important;
    border-color: rgba(220, 74, 74, 0.66) !important;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.68), inset 0 -12px 20px rgba(111, 42, 35, 0.24) !important;
}

body.mmo-battle .grid-cell.has-terrain.terrain-wall {
    background:
        linear-gradient(135deg, rgba(126, 132, 136, 0.34), rgba(28, 31, 34, 0.76)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.09) 0 4px, rgba(0, 0, 0, 0.18) 4px 8px) !important;
    border-color: rgba(176, 190, 196, 0.68) !important;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.58), inset 0 10px 18px rgba(255, 255, 255, 0.04) !important;
}

body.mmo-battle .grid-cell.has-terrain.terrain-high_ground {
    background:
        radial-gradient(circle at 48% 38%, rgba(246, 219, 142, 0.28), rgba(100, 80, 39, 0.20) 54%, rgba(0, 0, 0, 0.10)),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 3px, rgba(0, 0, 0, 0.15) 3px 9px) !important;
    border-color: rgba(224, 180, 100, 0.72) !important;
    box-shadow: inset 0 0 15px rgba(224, 180, 100, 0.16), inset 0 -10px 18px rgba(74, 54, 25, 0.22) !important;
}

body.mmo-battle .grid-cell.has-terrain.terrain-slope,
body.mmo-battle .grid-cell.has-terrain.terrain-stairs,
body.mmo-battle .grid-cell.has-terrain.terrain-ramp {
    background:
        linear-gradient(135deg, rgba(78, 169, 150, 0.28), rgba(42, 73, 56, 0.32)),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 4px, rgba(0, 0, 0, 0.14) 4px 10px) !important;
    border-color: rgba(111, 212, 181, 0.72) !important;
    box-shadow: inset 0 0 15px rgba(111, 212, 181, 0.18), inset 0 -10px 18px rgba(28, 62, 48, 0.22) !important;
}

body.mmo-battle .grid-cell.has-terrain.terrain-terrain {
    background:
        radial-gradient(circle at 50% 50%, rgba(111, 179, 138, 0.20), rgba(255, 255, 255, 0.04)) !important;
    border-color: rgba(111, 179, 138, 0.56) !important;
    box-shadow: inset 0 0 14px rgba(111, 179, 138, 0.12) !important;
}

body.mmo-battle .grid-cell.range-danger-highlight {
    background:
        radial-gradient(circle, rgba(220, 74, 74, 0.30), rgba(0, 0, 0, 0.28)),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 2px, rgba(0, 0, 0, 0.16) 2px 7px) !important;
    border-color: rgba(255, 104, 104, 0.92) !important;
    box-shadow: inset 0 0 18px rgba(220, 74, 74, 0.42), 0 0 12px rgba(220, 74, 74, 0.24) !important;
}

body.mmo-battle .entity-card {
    background: linear-gradient(180deg, rgba(12, 14, 18, 0.96), rgba(4, 6, 8, 0.96)) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

body.mmo-battle .control-panel {
    height: clamp(216px, 28vh, 258px) !important;
    background: rgba(15, 17, 21, 0.96) !important;
    border-top-color: rgba(213, 177, 106, 0.30) !important;
}

body.mmo-battle .log-container {
    background: rgba(3, 5, 7, 0.38);
}

body.mmo-battle .actions {
    width: min(420px, 38vw) !important;
}

body.mmo-battle .action-btn {
    background: linear-gradient(180deg, rgba(48, 53, 61, 0.96), rgba(32, 35, 41, 0.96)) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

body.mmo-battle #btn_end_turn {
    background: linear-gradient(180deg, #496db4, #2e4e8d) !important;
}

body.mmo-battle #formationModeBtn {
    background: linear-gradient(180deg, #d08a31, #a85f20) !important;
}

/* Responsive */
@media (max-width: 900px) {
    body.mmo-town {
        padding: 10px !important;
    }

    body.mmo-town .container,
    body.mmo-adventure .grid-2 {
        grid-template-columns: 1fr !important;
    }

    body.mmo-town .header {
        min-height: 118px;
        margin: -18px -18px 18px !important;
        padding: 26px 18px 20px !important;
    }

    body.mmo-town .panel {
        padding: 18px !important;
    }

    body.mmo-town .chat-box {
        min-height: 260px;
        height: 34vh !important;
    }

    body.mmo-adventure {
        max-width: none !important;
    }

    body.mmo-adventure .main-panel {
        padding: 12px;
    }

    body.mmo-adventure .discord-embed {
        min-height: 86px;
    }

    body.mmo-character .container {
        max-width: none !important;
    }

    body.mmo-battle {
        padding: 0 !important;
    }

    body.mmo-battle .game-screen {
        max-width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
    }

    body.mmo-battle .battlefield {
        padding: 6px !important;
        --battle-cell-size: 64px;
        overflow: auto !important;
    }

    body.mmo-battle .battle-grid {
        grid-template-columns: repeat(var(--battle-cols, 6), var(--battle-cell-size)) !important;
        grid-template-rows: repeat(var(--battle-rows, 10), var(--battle-cell-size)) !important;
        gap: 3px !important;
    }

    body.mmo-battle .grid-cell {
        min-width: var(--battle-cell-size) !important;
        min-height: var(--battle-cell-size) !important;
    }

    body.mmo-battle .control-panel {
        flex: 0 0 min(39dvh, 330px) !important;
        height: min(39dvh, 330px) !important;
        min-height: 306px !important;
        max-height: 330px !important;
    }

    body.mmo-battle .actions {
        width: 100% !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        overflow-y: auto !important;
        padding: 8px !important;
    }

    body.mmo-battle #btn_end_turn {
        grid-column: auto !important;
    }

    body.mmo-battle #btn_cancel_action {
        grid-column: 1 / -1 !important;
    }

    body.mmo-battle .log-container {
        flex: 0 0 70px !important;
        min-height: 70px !important;
        max-height: 70px !important;
        padding: 8px 10px !important;
    }

    body.mmo-battle .action-btn {
        min-height: 38px !important;
        padding: 6px 5px !important;
        font-size: 0.74rem !important;
        line-height: 1.12 !important;
    }

    body.mmo-battle .chat-panel {
        flex: 0 0 54px !important;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (max-width: 560px) {
    body.mmo-ui-page {
        font-size: 15px;
    }

    body.mmo-login {
        padding: 14px !important;
        align-items: stretch !important;
    }

    body.mmo-login .login-box {
        align-self: center;
        padding: 30px 20px !important;
    }

    body.mmo-login .login-box::before {
        margin: -30px -20px 20px;
        height: 82px;
    }

    body.mmo-town .facilities-grid {
        grid-template-columns: 1fr !important;
    }

    body.mmo-town .facility-btn {
        min-height: 62px;
    }

    body.mmo-town .chat-input-area,
    body.mmo-adventure .chat-input,
    body.mmo-battle .chat-panel {
        gap: 8px !important;
    }

    body.mmo-battle .battlefield {
        --battle-cell-size: 60px;
    }

    body.mmo-town .chat-input-area button,
    body.mmo-adventure .chat-input button,
    body.mmo-battle .chat-panel button {
        min-width: 68px;
        padding-inline: 10px !important;
    }

    body.mmo-character .stat-grid {
        gap: 8px !important;
    }

    body.mmo-character .mobile-section-nav {
        top: env(safe-area-inset-top, 0px) !important;
        border-bottom: 1px solid rgba(213, 177, 106, 0.14);
    }

    body.mmo-character .tabs {
        top: 54px !important;
    }

    body.mmo-battle .battle-grid {
        grid-template-rows: repeat(var(--battle-rows, 10), var(--battle-cell-size, 64px)) !important;
    }

    body.mmo-battle .grid-cell {
        min-height: var(--battle-cell-size, 64px) !important;
    }

    body.mmo-battle .entity-card {
        padding: 2px !important;
    }

    body.mmo-battle .control-panel {
        flex-basis: min(41dvh, 336px) !important;
        height: min(41dvh, 336px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.mmo-ui-page *,
    body.mmo-ui-page *::before,
    body.mmo-ui-page *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 1ms !important;
    }

    body.mmo-battle .floating-text {
        animation: float-readable 1.2s ease-out forwards !important;
    }

    body.mmo-battle .impact-flash {
        animation-duration: 420ms !important;
    }

    body.mmo-battle .slash-trace {
        animation-duration: 320ms !important;
    }
}