/* Thoita application shell
   This stylesheet defines the host surfaces only. Canvas content is drawn by the runtime. */

:root {
    --font-ui: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
    --ink: #f8fbff;
    --ink-muted: #cbd5e1;
    --night: #111827;
    --night-soft: rgba(15, 23, 42, .72);
    --line: rgba(255, 255, 255, .22);
    --button-size: 40px;
    --button-gap: 8px;
    --menu-icon-size: 25px;
    /* Root stack: world < chat < canvas panels < top bar < tooltips < DOM panels. */
    --layer-game: 1;
    --layer-chat: 40;
    --layer-panel: 50;
    --layer-menu: 52;
    --layer-dialog: 1000;
    --layer-login: 10001;
    --layer-orientation: 100000;
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    color: var(--ink);
    background: #111;
    font-family: var(--font-ui);
    font-weight: 700;
    user-select: none;
    touch-action: none;
}

button,
input {
    font: inherit;
}

button {
    border: 0;
}

::selection {
    color: #fff;
    background: rgba(15, 23, 42, .65);
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, .45);
    border-radius: 99px;
}

.hidden,
.is-hidden {
    display: none !important;
}

/* Game planes */
.game-surface,
.game-surface > canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
}

.game-surface {
    z-index: var(--layer-game);
    pointer-events: auto;
}

.game-surface.world-portal-arriving {
    transform: scale(.08);
    transform-origin: 50% 50%;
    transition: transform var(--portal-transition-duration, 1000ms) cubic-bezier(.2, .72, .2, 1);
    will-change: transform;
}

.game-surface.world-portal-arriving.world-portal-arriving-visible {
    transform: scale(1);
}

.world-portal-transition {
    position: fixed;
    inset: 0;
    z-index: calc(var(--layer-login) - 1);
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

.world-portal-transition.is-active {
    visibility: visible;
}

.game-surface > canvas {
    display: block;
}

#canvas {
    z-index: var(--layer-panel);
    pointer-events: none;
}

#canvas.world-overlay-active {
    z-index: calc(var(--layer-game) + 2);
}

#entityCanvas {
    z-index: var(--layer-game);
    pointer-events: none;
    background: transparent;
}

/* Body-level planes sized by canvasSurfaceHost; they must stay outside .game-surface. */
#panelCanvas,
#tooltipCanvas {
    position: fixed;
    pointer-events: none;
    background: transparent;
}

#panelCanvas {
    z-index: var(--layer-panel);
}

#tooltipCanvas {
    z-index: calc(var(--layer-menu) + 1);
}

.game-surface > .compact-world-hud-page {
    inset: auto;
    width: auto;
    height: auto;
    pointer-events: none;
    background: transparent;
}

.compact-world-hud-page {
    z-index: calc(var(--layer-panel) - 1);
}

.loader {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: grid;
    place-items: center;
    color: #fff;
    background: #162033;
    font-size: clamp(2rem, 7vw, 4.5rem);
    letter-spacing: .08em;
}

.world-asset-load-failure {
    position: fixed;
    inset: 0;
    z-index: var(--layer-login);
    display: grid;
    place-items: center;
    padding: 24px;
    color: #fff;
    background: rgba(10, 17, 31, .96);
    pointer-events: auto;
}

.world-asset-load-failure-card {
    width: min(460px, 100%);
    padding: 28px;
    text-align: center;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 12px;
}

.world-asset-load-failure-card h2 {
    margin: 0 0 12px;
    font-size: clamp(1.6rem, 5vw, 2.4rem);
}

.world-asset-load-failure-card p {
    margin: 0 0 22px;
    color: var(--ink-muted);
    line-height: 1.5;
}

.world-asset-load-failure-card button {
    min-width: 150px;
    padding: 12px 22px;
    color: #fff;
    background: #2563eb;
    border: 0;
    border-radius: 8px;
    font: 700 1rem var(--font-ui);
    cursor: pointer;
    touch-action: manipulation;
}

/* Server-authoritative double-drop panel. */
.offline-drop-bonus {
    position: fixed;
    z-index: calc(var(--layer-panel) + 5);
    top: calc(92px + var(--safe-area-top));
    left: calc(17px + var(--safe-area-left));
    width: min(400px, calc(100vw - 34px - var(--safe-area-left) - var(--safe-area-right)));
    max-height: calc(100vh - 104px - var(--safe-area-top) - var(--safe-area-bottom));
    overflow: hidden auto;
    color: #fff;
    background: #d9b448;
    border: 8px solid #a3782d;
    border-radius: 5px;
    box-shadow: none;
    pointer-events: auto;
    touch-action: manipulation;
    animation: offline-drop-bonus-panel-in .16s ease-out both;
}

.offline-drop-bonus:not(.offline-drop-bonus-mobile),
.settings-drawer:not(.settings-drawer-mobile) {
    /* Match the approved desktop appearance at 67% browser zoom. */
    zoom: .67;
}

@keyframes offline-drop-bonus-panel-in {
    from { opacity: 0; transform: translateX(-18px); }
    to { opacity: 1; transform: translateX(0); }
}

.offline-drop-bonus-panel-header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-height: 52px;
    padding: 8px 48px;
    background: transparent;
    border-bottom: 0;
}

.offline-drop-bonus-mark {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    color: #fff;
    background: #c49d38;
    border: 4px solid #a1792a;
    border-radius: 8px;
    box-shadow: none;
}

.offline-drop-bonus-mark img { width: 31px; height: 31px; pointer-events: none; }

.offline-drop-bonus-heading { min-width: 0; }

.offline-drop-bonus-heading h2 {
    margin: 0;
    color: #fff;
    font: 900 18px/1 "Ubuntu", var(--font-ui);
    letter-spacing: 0;
    text-align: center;
    text-shadow:
        -1px -1px 0 #111, 1px -1px 0 #111,
        -1px 1px 0 #111, 1px 1px 0 #111,
        0 2px 0 #111;
    white-space: nowrap;
}

.offline-drop-bonus-panel-header > .offline-drop-bonus-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    background: #c65f5b;
    border-color: #91423f;
    border-width: 4px;
    border-radius: 9px;
}

.offline-drop-bonus-panel-header > .offline-drop-bonus-close::before,
.offline-drop-bonus-panel-header > .offline-drop-bonus-close::after {
    width: 4px;
    height: 19px;
    background: #eee;
}

.offline-drop-bonus-panel-body {
    display: grid;
    gap: 7px;
    padding: 0 8px 8px;
}

.offline-drop-bonus-balance-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 68px;
    padding: 8px;
    background: #e6ca53;
    border: 4px solid #b28e31;
    border-radius: 6px;
    box-shadow: none;
}

.offline-drop-bonus-balance-content { min-width: 0; }

.offline-drop-bonus-balance-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.offline-drop-bonus-balance-label {
    color: #fff;
    font: 900 9px/1 "Ubuntu", var(--font-ui);
    letter-spacing: .055em;
    text-shadow:
        -1px -1px 0 #65501d, 1px -1px 0 #65501d,
        -1px 1px 0 #65501d, 1px 1px 0 #65501d;
    text-transform: uppercase;
}

.offline-drop-bonus-time {
    display: block;
    margin-top: 6px;
    color: #fff;
    font: 900 26px/1 "Ubuntu", var(--font-ui);
    font-variant-numeric: tabular-nums;
    letter-spacing: .025em;
    text-shadow:
        -1px -1px 0 #222, 1px -1px 0 #222,
        -1px 1px 0 #222, 1px 1px 0 #222,
        0 2px 0 #222;
}

.offline-drop-bonus-status {
    max-width: 118px;
    overflow: hidden;
    padding: 3px 7px;
    color: #fff;
    background: #9f7c28;
    border: 3px solid #7b5e1c;
    border-radius: 999px;
    font: 900 9px/1 "Ubuntu", var(--font-ui);
    letter-spacing: .035em;
    text-overflow: ellipsis;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .38);
    white-space: nowrap;
}

.offline-drop-bonus-rule {
    display: grid;
    grid-template-columns: 1fr 34px 1fr;
    align-items: center;
    gap: 6px;
    padding: 0;
    color: #fff;
    background: transparent;
}

.offline-drop-bonus-rule > div {
    display: grid;
    gap: 3px;
    min-height: 48px;
    place-content: center;
    text-align: center;
    background: #c49d38;
    border: 3px solid #a1792a;
    border-radius: 6px;
}

.offline-drop-bonus-rule strong {
    font: 900 16px/1 "Ubuntu", var(--font-ui);
    text-shadow:
        -1px -1px 0 #333, 1px -1px 0 #333,
        -1px 1px 0 #333, 1px 1px 0 #333,
        0 2px 0 #333;
}

.offline-drop-bonus-rule div span {
    color: #f0f0f0;
    font: 800 9px/1 "Ubuntu", var(--font-ui);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.offline-drop-bonus-rule-arrow {
    color: #fff4a2;
    font: 900 24px/1 "Ubuntu", var(--font-ui);
    text-align: center;
    text-shadow: 0 2px 0 #78601c;
}

.offline-drop-bonus-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 7px 9px;
    background: #c49d38;
    border: 3px solid #a1792a;
    border-radius: 6px;
}

.offline-drop-bonus-control strong,
.offline-drop-bonus-control span { display: block; }

.offline-drop-bonus-control strong {
    font: 900 13px/1.1 "Ubuntu", var(--font-ui);
    text-shadow:
        -1px -1px 0 #222, 1px -1px 0 #222,
        -1px 1px 0 #222, 1px 1px 0 #222,
        0 2px 0 #222;
}

.offline-drop-bonus-control div > span {
    margin-top: 4px;
    color: #fff5c5;
    font: 700 9px/1.15 "Ubuntu", var(--font-ui);
}

.offline-drop-bonus-note {
    margin: 0 2px;
    color: #fff8cf;
    font: 700 9px/1.35 "Ubuntu", var(--font-ui);
    text-shadow: 0 1px 0 #666;
}

.offline-drop-bonus[data-phase="active"],
.offline-drop-bonus[data-phase="locked"] {
    background: #66bd6b;
    border-color: #3f9149;
}

.offline-drop-bonus[data-phase="active"] .offline-drop-bonus-balance-card,
.offline-drop-bonus[data-phase="locked"] .offline-drop-bonus-balance-card {
    background: #7aca7e;
    border-color: #469b50;
}

.offline-drop-bonus[data-phase="active"] .offline-drop-bonus-rule > div,
.offline-drop-bonus[data-phase="locked"] .offline-drop-bonus-rule > div,
.offline-drop-bonus[data-phase="active"] .offline-drop-bonus-control,
.offline-drop-bonus[data-phase="locked"] .offline-drop-bonus-control {
    background: #55a95e;
    border-color: #398543;
}

.offline-drop-bonus[data-phase="active"] .offline-drop-bonus-status,
.offline-drop-bonus[data-phase="locked"] .offline-drop-bonus-status {
    background: #449a52;
    border-color: #327940;
}

.offline-drop-bonus[data-phase="syncing"] .offline-drop-bonus-status,
.offline-drop-bonus[data-phase="saving"] .offline-drop-bonus-status {
    background: #71869c;
    border-color: #596f85;
}

.offline-drop-bonus[data-phase="low"] { filter: saturate(.5); }

.offline-drop-bonus[data-phase="error"] .offline-drop-bonus-status {
    background: #bd5754;
    border-color: #91403e;
}

.offline-drop-bonus-toggle {
    position: relative;
    width: 48px;
    height: 29px;
    padding: 0;
    overflow: hidden;
    background: #707070;
    border: 3px solid #515151;
    border-radius: 999px;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: none;
    transition: background-color .14s ease, border-color .14s ease, opacity .14s ease, transform .12s ease;
}

.offline-drop-bonus-toggle[aria-checked="true"] {
    background: #45b85b;
    border-color: #2b7e3c;
}
.offline-drop-bonus-toggle:not(:disabled):active { transform: translateY(1px); }
.offline-drop-bonus-toggle:disabled { cursor: default; opacity: .48; }
.offline-drop-bonus-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.offline-drop-bonus-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 17px;
    height: 17px;
    background: #f2f2f2;
    border: 1px solid rgba(45, 45, 45, .28);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .32);
    transition: transform .14s ease;
}

.offline-drop-bonus-toggle[aria-checked="true"] .offline-drop-bonus-toggle-knob {
    transform: translateX(18px);
}

.offline-drop-bonus.offline-drop-bonus-mobile {
    top: calc(56px + var(--safe-area-top));
    bottom: auto;
    left: calc(8px + var(--safe-area-left));
    width: min(360px, calc(100vw - 16px - var(--safe-area-left) - var(--safe-area-right)));
    max-height: calc(100vh - 64px - var(--safe-area-top) - var(--safe-area-bottom));
    border-width: 6px;
    border-radius: 5px;
}

.offline-drop-bonus-mobile .offline-drop-bonus-panel-header {
    min-height: 48px;
    padding: 6px 42px;
}

.offline-drop-bonus-mobile .offline-drop-bonus-mark {
    width: 44px;
    height: 44px;
    font-size: 17px;
}

.offline-drop-bonus-mobile .offline-drop-bonus-heading h2 { font-size: 16px; }
.offline-drop-bonus-mobile .offline-drop-bonus-panel-header > .offline-drop-bonus-close {
    top: 6px;
    right: 6px;
    width: 32px;
    height: 32px;
}
.offline-drop-bonus-mobile .offline-drop-bonus-panel-body { gap: 6px; padding: 0 6px 6px; }
.offline-drop-bonus-mobile .offline-drop-bonus-balance-card { grid-template-columns: 44px minmax(0, 1fr); min-height: 62px; padding: 6px; }
.offline-drop-bonus-mobile .offline-drop-bonus-time { margin-top: 5px; font-size: 24px; }
.offline-drop-bonus-mobile .offline-drop-bonus-rule > div { min-height: 43px; }
.offline-drop-bonus-mobile .offline-drop-bonus-control { min-height: 48px; padding: 6px 8px; }
.offline-drop-bonus-mobile .offline-drop-bonus-note { font-size: 8px; }

/* Shared interaction primitives */
.btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    min-height: 34px;
    padding: 7px 14px;
    color: #fff;
    background: #68758a;
    border: 3px solid rgba(15, 23, 42, .38);
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.1;
    transition: filter .14s ease, transform .14s ease, background-color .14s ease;
}

.btn:hover {
    filter: brightness(1.12);
}

.btn:active {
    transform: translateY(1px);
}

.textbox {
    width: 300px;
    padding: 8px 12px;
    color: #172033;
    background: #f7fafc;
    border: 2px solid #c7d2df;
    border-radius: 10px;
    outline: 0;
    font-size: 16px;
    font-weight: 500;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.textbox:focus {
    background: #fff;
    border-color: #4e8ec9;
    box-shadow: 0 0 0 3px rgba(78, 142, 201, .24);
}

.textbox::placeholder {
    color: #8996a6;
}

.offscreen-input,
.utility-fields {
    position: absolute;
    pointer-events: none;
}

/* Layout box stays at the wrapper origin so focus never scrolls the page;
   transform pulls the proxy input out of view. */
.offscreen-input {
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    transform: translateX(-100vw);
}

/* Keep the focused League proxy on its Canvas field so IME composition and
   candidate UI use the real editing position instead of the page origin. */
#guildmotd:focus {
    position: fixed;
    left: var(--guild-motd-left, 50vw);
    top: var(--guild-motd-top, 50vh);
    width: var(--guild-motd-width, 1px);
    height: var(--guild-motd-height, 1px);
    padding: 0;
    border: 0;
    opacity: 0;
    transform: none;
    text-align: center;
}

/* Navigation surface */
.menu {
    position: fixed;
    z-index: var(--layer-menu);
    pointer-events: none;
}

.menu-actions {
    display: flex;
    align-items: flex-start;
    gap: var(--button-gap);
    padding: 10px;
}

.menu-action,
#settingsButton,
#mobGalleryButton,
#leaderboardButton,
#guildButton,
#changelogButton {
    display: grid;
    place-items: center;
    width: var(--button-size);
    height: var(--button-size);
    flex: 0 0 var(--button-size);
    pointer-events: auto;
    cursor: pointer;
    border: 3px solid transparent;
    border-radius: 11px;
    transition: transform .14s ease, filter .14s ease, background-color .14s ease, border-color .14s ease;
    touch-action: manipulation;
}

.menu-action:hover,
#settingsButton:hover,
#mobGalleryButton:hover,
#leaderboardButton:hover,
#guildButton:hover,
#changelogButton:hover {
    filter: brightness(1.12) saturate(1.05);
    transform: translateY(-1px);
}

.menu-action:active,
#settingsButton:active,
#mobGalleryButton:active,
#leaderboardButton:active,
#guildButton:active,
#changelogButton:active {
    transform: translateY(1px) scale(.97);
}

#settingsButton { background: #98a2ae; border-color: #697786; }
#mobGalleryButton { background: #d2cf4c; border-color: #a6a12f; }
#leaderboardButton { background: #d45a60; border-color: #a43e47; }
#guildButton { background: #1cc9cc; border-color: #159a9d; }
#changelogButton { background: #9bb56a; border-color: #718b49; }
#offlineDropBonusButton { background: #d5a52f; border-color: #99731f; }

#settingsButton.menu-open { background: #768393; border-color: #515f71; }
#mobGalleryButton.menu-open { background: #b4b13d; border-color: #8d8b2b; }
#leaderboardButton.menu-open { background: #b94b55; border-color: #913640; }
#guildButton.menu-open { background: #159da0; border-color: #117b7d; }
#changelogButton.menu-open { background: #819c53; border-color: #60753d; }
#offlineDropBonusButton.menu-open { background: #b68222; border-color: #765817; }

.menu-button-icon {
    width: var(--menu-icon-size);
    height: var(--menu-icon-size);
    object-fit: contain;
    pointer-events: none;
}

.menu.under-backpack-panel {
    pointer-events: none;
}

/* Account suspension surface */
.account-ban-page {
    position: fixed;
    inset: 0;
    z-index: var(--layer-login);
    display: grid;
    place-items: center;
    overflow-y: auto;
    padding: max(24px, var(--safe-area-top)) max(20px, var(--safe-area-right))
        max(24px, var(--safe-area-bottom)) max(20px, var(--safe-area-left));
    background: #24435b;
    touch-action: pan-y;
}
.account-ban-card {
    width: min(460px, 100%);
    margin: auto;
    padding: clamp(24px, 6vw, 40px);
    color: #233446;
    background: #f8f7f2;
    border: 1px solid #fff;
    border-radius: 22px;
    box-shadow: 0 20px 60px #0f253966;
    text-align: center;
}
.account-ban-symbol {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 20px;
    border: 2px solid #c35b53;
    border-radius: 50%;
    background: #f5e4dd;
    color: #ac403a;
    font-size: 38px;
}
.account-ban-brand { color: #7c858b; font-size: 11px; letter-spacing: .25em; }
.account-ban-card h1 { margin: 14px 0 10px; font-size: clamp(25px, 6vw, 32px); }
.account-ban-description { margin: 0; color: #63717b; line-height: 1.6; }
.account-ban-details { margin: 28px 0 20px; text-align: left; }
.account-ban-details > div { padding: 14px 0; border-top: 1px solid #dce0df; }
.account-ban-details dt { margin-bottom: 6px; color: #78838a; font-size: 12px; }
.account-ban-details dd { margin: 0; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; user-select: text; }
.account-ban-note { margin: 0 0 24px; color: #78838a; font-size: 12px; line-height: 1.7; }
#accountBanSwitch, #accountBanRetry {
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    background: #24435b;
    color: #fff;
    cursor: pointer;
    touch-action: manipulation;
}
#accountBanRetry { margin-bottom: 10px; background: #48687d; }
#accountBanSwitch:hover, #accountBanRetry:hover { background: #355b76; }
#accountBanSwitch:focus-visible, #accountBanRetry:focus-visible { outline: 3px solid #739ebc; outline-offset: 3px; }
#accountBanSwitch:disabled { opacity: .6; cursor: wait; }
#accountBanError { margin: 12px 0 0; color: #ac403a; font-size: 12px; }
#accountBanError:empty { display: none; }

/* Authentication surface */
.login-menu {
    position: fixed;
    inset: 0;
    z-index: var(--layer-login);
    display: grid;
    place-items: center;
    padding: 24px;
    background: radial-gradient(circle at 50% 18%, #77b4e5, #4f88bb 70%, #3f719e);
    pointer-events: auto;
    touch-action: manipulation;
}

.login-card {
    width: min(390px, 94vw);
    padding: 22px;
    color: #172033;
    background: rgba(245, 249, 253, .93);
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .3);
}

.login-header {
    position: relative;
    padding: 4px 0 18px;
    text-align: center;
}

.login-server-trigger {
    position: absolute;
    top: 8px;
    right: 0;
    min-height: 34px;
    padding: 5px 10px;
    color: #49627b;
    background: #dbe8f3;
    border: 2px solid #c3d3e2;
    border-radius: 9px;
    font: 700 13px/1.2 "Ubuntu", var(--font-ui);
    cursor: pointer;
    touch-action: manipulation;
}
.login-server-trigger:hover { background: #cdddEB; }
.login-server-trigger:focus-visible { outline: 3px solid #78ac60; outline-offset: 2px; }

.login-server-picker {
    position: absolute;
    z-index: 2;
    top: 48px;
    right: 0;
    width: min(280px, calc(100vw - 64px));
    padding: 12px;
    background: #eaf3fb;
    border: 3px solid #bdd0e0;
    border-radius: 11px;
    box-shadow: 0 5px 0 rgba(24, 50, 75, .12);
    text-align: left;
}
.login-server-picker[hidden] { display: none; }
.login-server-status { margin: 0 0 9px; color: #49627b; font: 700 12px/1.4 "Ubuntu", var(--font-ui); }
.login-server-picker .settings-server-choices { padding: 0; background: transparent; }
.login-server-picker .settings-server-option {
    min-height: 44px;
    color: #49627b;
    background: #dbe8f3;
    border: 2px solid #bdd0e0;
    text-shadow: none;
}
.login-server-picker .settings-server-option[aria-pressed="true"] { color: #fff; background: #78a960; border-color: #588143; }

.login-title {
    margin: 0;
    color: #18324b;
    font-size: clamp(26px, 7vw, 34px);
    font-weight: 800;
    letter-spacing: .03em;
}

.login-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}

.login-tab {
    min-height: 38px;
    display: grid;
    place-items: center;
    color: #49627b;
    background: #dbe8f3;
    border: 2px solid #c3d3e2;
    border-radius: 9px;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    pointer-events: auto;
}

.login-tab:hover {
    background: #eaf2f8;
}

.login-tab.active {
    color: #fff;
    background: #3e78aa;
    border-color: #2c5d89;
}

.login-tab span,
.auth-submit-text {
    pointer-events: none;
}

.login-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.login-body .textbox {
    width: 100%;
    margin: 0;
    padding: 12px 13px;
    color: #172033;
    background: #fff;
    border: 2px solid #c4d0dc;
    border-radius: 9px;
    pointer-events: auto;
    touch-action: manipulation;
}

.login-body .textbox:focus {
    border-color: #3f83bd;
    box-shadow: 0 0 0 3px rgba(63, 131, 189, .16);
}

.login-body .confirm {
    transition: transform .24s ease, opacity .2s ease;
}

.login-body .textbox.confirm-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-52%);
}

.login-error {
    min-height: 20px;
    margin-top: 2px;
    padding: 8px 10px;
    color: #fff;
    background: #a9363c;
    border: 1px solid #7f242d;
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    transition: opacity .16s ease, visibility .16s ease;
}

.login-error.show {
    opacity: 1;
    visibility: visible;
}

.login-error.show.pending {
    background: #2f6796;
    border-color: #214a70;
}

.login-footer {
    padding-top: 16px;
}

.login-footer .auth-submit {
    width: 100%;
    min-height: 44px;
    color: #fff;
    background: #1cba4a;
    border-color: #138437;
    font-size: 16px;
}

.login-footer .auth-submit:hover {
    background: #25ce58;
}

/* Chat dock */
.chat-dock {
    position: fixed;
    z-index: var(--layer-chat);
    pointer-events: auto;
}

.chat-input-wrap {
    position: fixed;
    left: 110px;
    bottom: 20px;
    z-index: 41;
    display: flex;
    align-items: center;
    gap: 5px;
    width: 450px;
    height: 36px;
    padding: 0 9px;
    background: rgba(4, 12, 24, .52);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 9px;
    isolation: isolate;
}

.chat-field {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 100%;
    padding: 3px 0;
    color: #fff;
    caret-color: #fff;
    background: transparent;
    border: 0;
    border-radius: 0;
    outline: 0;
    font-size: 13.5px;
    font-weight: 800;
    text-shadow: 0 1px 2px #000;
    pointer-events: auto;
    touch-action: manipulation;
}

.chat-field::placeholder {
    color: #fff;
    opacity: 1;
}

/* 输入 / 时的指令提示：挂在输入框上面，Tab 补全选中的那条 */
.chat-suggest {
    position: absolute;
    left: 0;
    bottom: calc(100% + 4px);
    width: 100%;
    box-sizing: border-box;
    padding: 4px 0;
    color: #fff;
    background: rgba(0, 0, 0, .85);
    border: 0;
    border-radius: 0;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Thoita CJK", monospace;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.7;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
    pointer-events: none;
}

.chat-suggest-usage {
    padding: 2px 8px 4px;
    color: #e2e5eb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-suggest-row {
    display: grid;
    grid-template-columns: minmax(0, 15ch) minmax(0, 1fr);
    gap: 12px;
    padding: 1px 8px;
    white-space: nowrap;
}

.chat-suggest-name,
.chat-suggest-description {
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-suggest-description {
    color: #e2e5eb;
}

.chat-suggest-row.selected {
    color: #09121f;
    background: rgba(111, 174, 255, .9);
    text-shadow: none;
}

.chat-suggest-row.selected .chat-suggest-description {
    color: inherit;
}

.chat-mode-button {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
    padding: 0;
    color: #fff;
    background: transparent;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 800;
    white-space: nowrap;
    text-shadow: 0 1px 2px #000;
}

.chat-mode-button.squad { color: #ff9ecb; }
.chat-mode-button.guild { color: #22d3d3; }
.chat-mode-button.game { color: #ff6767; }
.chat-mode-button.whisper { color: #c084fc; }
.chat-mode-button:focus-visible { outline: 1px solid #fff; border-radius: 4px; }

.chat-send-btn {
    position: fixed;
    z-index: 31;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(4, 12, 24, .58);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 9px;
    cursor: pointer;
    pointer-events: auto;
}

.chat-send-btn:active { background: rgba(4, 12, 24, .8); }

/* Set by ui.panels.syncLayer while a Canvas panel is visible: chat stays visual only. */
.chat-dock.behind-menu,
.chat-dock.behind-menu .chat-field,
.chat-dock.behind-menu .chat-log,
.chat-dock.behind-menu .chat-send-btn {
    pointer-events: none !important;
}

.chat-log {
    position: fixed;
    left: 110px;
    bottom: 64px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    width: 450px;
    height: 348px;
    min-height: 0;
    padding: 5px;
    overflow-x: hidden;
    overflow-y: hidden;
    color: #fff;
    background: transparent;
    border-radius: 9px;
    font-size: var(--chat-msg-font, 13.5px);
    font-weight: 800;
    pointer-events: none;
    scrollbar-gutter: stable;
}

.chat-log.history-open {
    overflow-y: scroll;
    background: rgba(4, 12, 24, .22);
    pointer-events: auto;
    overscroll-behavior: contain;
}

.chat-log:not(.history-open) .chat-msg-idle-hidden { display: none !important; }

.chat-channel-tag { color: #fff; }
.chat-channel-tag.chat-channel-squad { color: #ff9ecb; }
.chat-channel-tag.chat-channel-league { color: #22d3d3; }
.chat-channel-tag.chat-channel-game { color: #ff6767; }
.chat-channel-tag.chat-channel-whisper { color: #c084fc; }

.chat-message,
.chat-announcement,
.chat-system {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-wrap: break-word;
    user-select: none;
    text-shadow: 0 1px 2px #000;
}

.chat-message { color: #fff; font-size: var(--chat-msg-font, 13.5px); }
.chat-announcement { color: #fff; font-size: var(--chat-announce-font, 15px); }
.server-announcement-subtitle {
    position: fixed;
    z-index: calc(var(--layer-login) + 1);
    top: max(72px, calc(var(--safe-area-top) + 24px));
    left: 50%;
    transform: translateX(-50%);
    width: min(900px, calc(100% - 32px));
    padding: 12px 20px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .55);
    color: #ffdf80;
    font-size: clamp(18px, 2.5vw, 30px);
    line-height: 1.4;
    text-align: center;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    text-shadow: 0 2px 4px #000;
    pointer-events: none;
}
.chat-system {
    color: #fff500;
    font-size: var(--chat-system-font, var(--chat-msg-font, 13.5px));
    font-weight: 800;
}

.chat-message.admin,
.chat-message.admin span {
    color: #ff4e4e !important;
    font-weight: 900;
}

/* World 玩家语音气泡：独立 DOM 层保留 Unicode，不占用只含 ASCII 的 WebGL SDF atlas。 */
.world-speech-layer {
    position: fixed;
    inset: 0;
    /* 位于 World 实体之上、Canvas 面板之下，图鉴等面板会自然遮住聊天泡泡。 */
    z-index: calc(var(--layer-panel) - 1);
    overflow: hidden;
    pointer-events: none;
}

.world-speech-bubble {
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    max-width: 78vw;
    padding: var(--speech-pad-y, 4px) var(--speech-pad-x, 7px);
    color: #111;
    background: #fff;
    border: var(--speech-border, 2px) solid #000;
    border-radius: var(--speech-radius, 8px);
    font-size: var(--speech-font, 12px);
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    transform: translate(-50%, -50%);
    opacity: var(--speech-alpha, 1);
    overflow: hidden;
    will-change: transform, opacity;
    user-select: none;
}

.animated-text { color: #75ddc6; animation: hue-drift 4s ease-in-out infinite; }
.animated-text-ruby { color: #ff9dbd; animation: ruby-drift 4s ease-in-out infinite; }
.animated-text-peterpeterp {
    color: #f4d06f;
    text-shadow: 0 1px 2px #000;
}

@keyframes hue-drift {
    0%, 100% { color: #75ddc6; }
    50% { color: #d58bdb; }
}

@keyframes ruby-drift {
    0%, 100% { color: #ff9dbd; }
    50% { color: #e4a4ec; }
}

/* Account dialog */
.modal {
    position: fixed;
    inset: 0;
    z-index: var(--layer-dialog);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(2, 6, 23, .72);
    pointer-events: auto;
    touch-action: manipulation;
}

.modal-content {
    display: flex;
    flex-direction: column;
    width: min(680px, 90vw);
    min-height: min(360px, 70vh);
    max-height: 82vh;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(160deg, #4c8fbe, #32618d);
    border: 5px solid rgba(28, 58, 88, .7);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
    font-size: clamp(14px, 1.3vw, 18px);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    background: rgba(15, 23, 42, .18);
    border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.modal-header h2 {
    margin: 0;
    color: #fff;
    font-size: 1.35em;
    line-height: 1.1;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .55);
}

.modal-close {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    background: #ae4747;
    border: 4px solid #7a2e2e;
    border-radius: 9px;
    cursor: pointer;
}

.modal-close:hover { background: #cb5d5d; }

.modal-close::before,
.modal-close::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 4px;
    height: 18px;
    background: #fff;
    border-radius: 3px;
}

.modal-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.modal-body {
    flex: 1 1 auto;
    padding: 20px;
    overflow-y: auto;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 18px 16px;
    background: rgba(15, 23, 42, .16);
}

.modal-footer .btn {
    min-width: 82px;
    background: #1cba4a;
    border-color: #138437;
}

.modal-footer .btn:hover { background: #25ce58; }

.account-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.account-field-name,
.account-field-value {
    font-size: .88em;
    text-shadow: 0 1px 2px #000;
}

.account-field-name { color: #fff; }
.account-field-value {
    max-width: 60%;
    color: #ffe16b;
    text-align: right;
    overflow-wrap: anywhere;
}

.account-note {
    margin-top: 22px;
    padding: 12px;
    color: #dbeafe;
    background: rgba(15, 23, 42, .22);
    border-left: 4px solid #ffe16b;
    border-radius: 6px;
}

.account-note p {
    margin: 0;
    color: inherit;
    font-size: .78em;
    line-height: 1.45;
    text-shadow: 0 1px 2px #000;
}

/* QQ/status marker */
.qq-group-label {
    position: fixed;
    top: 12px;
    right: 10vw;
    z-index: 100;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    pointer-events: none;
    text-shadow: 0 1px 2px #000;
}

/* Mobile orientation gate */
.rotate-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--layer-orientation);
    display: grid;
    place-items: center;
    padding: 24px;
    background: #05070b;
    pointer-events: auto;
}

.rotate-overlay-card {
    display: grid;
    justify-items: center;
    gap: 24px;
    max-width: 420px;
    text-align: center;
}

.rotate-overlay-message {
    margin: 0;
    color: #fff;
    font-size: clamp(20px, 5.5vw, 32px);
    line-height: 1.3;
}

.rotate-overlay-glyph {
    display: block;
    width: clamp(72px, 22vw, 112px);
    height: clamp(72px, 22vw, 112px);
}

.rotate-overlay-glyph-motion {
    transform-origin: 48px 48px;
    animation: rotate-device 1.6s ease-in-out infinite;
}

@keyframes rotate-device {
    0% { transform: rotate(0); }
    35%, 55% { transform: rotate(90deg); }
    100% { transform: rotate(0); }
}

/* Invitation cards use the same outlined type and chunky controls as the other panels. */
.join-invite {
    position: fixed;
    z-index: calc(var(--layer-panel) + 10);
    top: 64px;
    left: calc(17px + var(--safe-area-left));
    width: min(320px, calc(100vw - 34px - var(--safe-area-left) - var(--safe-area-right)));
    max-height: calc(100dvh - 80px - var(--safe-area-bottom));
    overflow-y: auto;
    color: #fff;
    background: #aaa;
    border: 6px solid #858585;
    border-radius: 9px;
    font: 900 14px/1.3 "Ubuntu", var(--font-ui);
    text-shadow: none;
    touch-action: pan-y;
    animation: settings-drawer-in .16s ease-out both;
}
.join-invite[data-kind="squad"] { border-color: #b67792; background: #dca4bd; }
.join-invite[data-kind="guild"] { border-color: #19b1b4; background: #1fdbde; }
.join-invite-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .12);
    border-bottom: 3px solid rgba(0, 0, 0, .12);
}
.join-invite-title { margin: 0; font: inherit; font-size: 19px; }
.join-invite-count { font-size: 11px; white-space: nowrap; }
.join-invite-title,
.join-invite-count,
.join-invite-name,
.join-invite-detail,
.join-invite-status,
.join-invite-actions button {
    /* Match GuildPanel.outlinedText: stroke first, then fill without thinning the glyph. */
    -webkit-text-stroke: max(2px, .12em) #202020;
    paint-order: stroke fill;
}
.join-invite-body { padding: 10px 12px 12px; }
.join-invite-name {
    margin: 0 0 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 17px;
}
.join-invite-detail { margin: 0; overflow-wrap: anywhere; }
.join-invite-status { margin: 7px 0 10px; font-size: 12px; }
.join-invite-status.is-error { color: #ffe2ac; }
.join-invite-actions { display: flex; gap: 10px; }
.join-invite-actions button {
    flex: 1;
    min-width: 0;
    min-height: 42px;
    padding: 6px 10px;
    border: 4px solid;
    border-radius: 8px;
    color: #fff;
    font: inherit;
    text-shadow: inherit;
    cursor: pointer;
    touch-action: manipulation;
}
.join-invite-actions .join-invite-accept { background: #36c756; border-color: #248f38; }
.join-invite-actions .join-invite-decline { background: #c95353; border-color: #9f3f3f; }
.join-invite-actions .join-invite-block { background: #76586e; border-color: #594253; }
.join-invite-block-duration { display: block; font-size: 10px; }
.join-invite-actions button[hidden] { display: none; }
.join-invite-actions button:hover:not(:disabled) { filter: brightness(1.12); }
.join-invite-actions button:active:not(:disabled) { transform: translateY(1px); }
.join-invite-actions button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.join-invite-actions button:disabled { opacity: .6; cursor: default; }

/* Settings follows the gallery panel's horizontal desktop footprint and the reference's flat grey styling. */
.settings-drawer {
    position: fixed;
    z-index: calc(var(--layer-panel) + 5);
    top: calc(92px + var(--safe-area-top));
    bottom: auto;
    left: calc(17px + var(--safe-area-left));
    display: flex;
    flex-direction: column;
    width: min(968px, calc(100vw - 34px - var(--safe-area-left) - var(--safe-area-right)));
    height: min(573px, calc(100vh - 104px - var(--safe-area-top) - var(--safe-area-bottom)));
    color: #fff;
    background: #aaa;
    border: 12px solid #858585;
    border-radius: 5px;
    overflow: hidden;
    pointer-events: auto;
    touch-action: pan-y;
    animation: settings-drawer-in .16s ease-out both;
}

@keyframes settings-drawer-in {
    from { transform: translateX(calc(-100% - 24px)); }
    to { transform: translateX(0); }
}

.settings-drawer-header {
    position: relative;
    flex: 0 0 54px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 54px;
    padding: 7px 14px;
    background: #b7b7b7;
}

.settings-drawer-header h2 {
    margin: 0;
    color: #fff;
    font: 900 25px/1 "Ubuntu", var(--font-ui);
    letter-spacing: -.2px;
    text-align: center;
    text-shadow:
        -1px -1px 0 #111, 1px -1px 0 #111,
        -1px 1px 0 #111, 1px 1px 0 #111,
        0 2px 0 #111;
}

.settings-drawer-close {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 34px;
    height: 34px;
    background: #c65f5b;
    border-color: #9e4543;
    border-width: 4px;
    border-radius: 9px;
}

.settings-drawer-close::before,
.settings-drawer-close::after {
    width: 4px;
    height: 19px;
    background: #eee;
}

.settings-drawer-body {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto;
    align-content: start;
    column-gap: 14px;
    min-height: 0;
    padding: 12px 16px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: #777 #aaa;
    scrollbar-width: thin;
}

.settings-preferences {
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 14px;
    padding-bottom: 12px;
    margin-bottom: 8px;
    border-bottom: 2px solid #969696;
    font: 900 15px/1.2 "Ubuntu", var(--font-ui);
    text-shadow: -1px -1px 0 #555, 1px 1px 0 #555;
}
.settings-preferences .language-control { padding: 0; }
.settings-server-control { display: grid; gap: 7px; }
.settings-server-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.settings-server-status { font-size: 12px; opacity: .85; text-align: right; }
.settings-server-choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    background: #969696;
    border-radius: 10px;
}
.settings-server-option {
    min-width: 0;
    min-height: 36px;
    padding: 5px 4px;
    color: #fff;
    background: #aaa;
    border: 3px solid #858585;
    border-radius: 7px;
    font: 900 13px/1.2 "Ubuntu", var(--font-ui);
    text-shadow: -1px -1px 0 #555, 1px 1px 0 #555;
    cursor: pointer;
    touch-action: manipulation;
}
.settings-server-option[aria-pressed="true"] { background: #78a960; border-color: #588143; }
.settings-server-option:hover:not(:disabled) { filter: brightness(1.08); }
.settings-server-option:active:not(:disabled) { transform: translateY(1px); }
.settings-server-option:disabled { opacity: .55; cursor: default; }
.settings-server-option:focus-visible { outline: 3px solid #ffe16b; outline-offset: 1px; }

.settings-drawer-body > .settings-group-title:nth-of-type(1),
.settings-drawer-body > .settings-group:nth-of-type(1) { grid-column: 1; }

.settings-drawer-body > .settings-group-title:nth-of-type(2),
.settings-drawer-body > .settings-group:nth-of-type(2) { grid-column: 2; }

.settings-drawer-body > .settings-group-title:nth-of-type(1),
.settings-drawer-body > .settings-group-title:nth-of-type(2) { grid-row: 2; }

.settings-drawer-body > .settings-group:nth-of-type(1),
.settings-drawer-body > .settings-group:nth-of-type(2) { grid-row: 3; }

.settings-drawer-body > .settings-group-title:nth-of-type(3),
.settings-drawer-body > .settings-group:nth-of-type(3) { grid-column: 1; }

.settings-drawer-body > .settings-group-title:nth-of-type(4),
.settings-drawer-body > .settings-group:nth-of-type(4) { grid-column: 2; }

.settings-drawer-body > .settings-group-title:nth-of-type(3),
.settings-drawer-body > .settings-group-title:nth-of-type(4) { grid-row: 4; }

.settings-drawer-body > .settings-group:nth-of-type(3),
.settings-drawer-body > .settings-group:nth-of-type(4) { grid-row: 5; }

.settings-drawer-body > .settings-group-title:nth-of-type(n + 3) { margin-top: 12px; }

.settings-credits-toggle {
    position: absolute;
    top: 8px;
    right: 54px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 5px 12px;
    color: #fff;
    background: #999;
    border: 2px solid #858585;
    border-radius: 6px;
    cursor: pointer;
    font: 700 15px/1.2 "Ubuntu", var(--font-ui);
    text-shadow:
        -1px -1px 0 #111, 1px -1px 0 #111,
        -1px 1px 0 #111, 1px 1px 0 #111,
        0 2px 0 #111;
}
.settings-credits-toggle:hover { filter: brightness(1.08); }
.settings-credits-toggle:active { transform: translateY(1px); }
.settings-credits-toggle:focus-visible { outline: 3px solid #ffe16b; outline-offset: 1px; }
.settings-credits-toggle img { width: 22px; height: 22px; object-fit: contain; }
.settings-credits-toggle.is-back img { display: none; }
.settings-credits-toggle.is-back::before {
    content: '';
    width: 7px;
    height: 7px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.settings-credits {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 32px;
    color: #fff;
    background: #aaa;
    text-shadow:
        -1px -1px 0 #111, 1px -1px 0 #111,
        -1px 1px 0 #111, 1px 1px 0 #111,
        0 2px 0 #111;
    overflow-y: auto;
    scrollbar-color: #777 #aaa;
    scrollbar-width: thin;
}
.settings-credits-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font: 900 32px/1 "Ubuntu", var(--font-ui);
}
.settings-credits-brand img { width: 48px; height: 48px; object-fit: contain; }
.settings-credits-note {
    margin: 10px 0 0;
    font: 900 14px/1.6 "Ubuntu", var(--font-ui);
    text-align: center;
}
.settings-credits-columns {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
    width: min(800px, 100%);
    margin: 22px 0 0;
}
.settings-credits-group {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    min-width: 0;
    padding: 20px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .16);
}
.settings-credits-group:last-child { border-bottom: 0; }
.settings-credits-group-title {
    margin: 0;
    font: 900 18px/1.3 "Ubuntu", var(--font-ui);
    text-align: left;
    overflow-wrap: anywhere;
}
.settings-credits-names {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.settings-credits-names > li {
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: left;
    font: 900 22px/1.3 "Ubuntu", var(--font-ui);
    letter-spacing: 0;
}

.settings-group-title {
    min-height: 39px;
    margin: 0 0 5px;
    padding: 6px 10px;
    color: #fff;
    background: #999;
    border: 4px solid #858585;
    border-radius: 9px;
    font: 900 15px/1.1 "Ubuntu", var(--font-ui);
    letter-spacing: 0;
    text-align: center;
    text-shadow:
        -1px -1px 0 #111, 1px -1px 0 #111,
        -1px 1px 0 #111, 1px 1px 0 #111,
        0 2px 0 #111;
}

.settings-group {
    display: grid;
    align-content: start;
    gap: 3px;
    padding: 6px 10px 8px;
    background: #b5b5b5;
    border-radius: 3px;
}

.settings-toggle-row,
.settings-action {
    width: 100%;
    min-height: 39px;
    color: #fff;
    cursor: pointer;
    text-shadow:
        -1px -1px 0 #111, 1px -1px 0 #111,
        -1px 1px 0 #111, 1px 1px 0 #111,
        0 2px 0 #111;
    transition: filter .12s ease, transform .12s ease, background-color .12s ease;
}

.settings-toggle-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 4px 2px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    text-align: left;
}

.settings-toggle-row[hidden] { display: none; }

.settings-toggle-row:hover,
.settings-action:hover { filter: brightness(1.08); }

.settings-toggle-row:hover { background: rgba(255, 255, 255, .1); }

.settings-toggle-row:active,
.settings-action:active { transform: translateY(1px); }

.settings-toggle-row:focus-visible,
.settings-action:focus-visible,
.settings-input:focus-visible {
    outline: 3px solid #ffe16b;
    outline-offset: 1px;
}

.settings-check {
    position: relative;
    display: block;
    width: 28px;
    height: 28px;
    background: #666;
    border: 4px solid #3d3d3d;
    border-radius: 3px;
}

.settings-check.is-on { background: #ddd; }
.settings-check.is-on::after { content: none; }

.settings-row-label {
    overflow: hidden;
    font: 900 14px/1.15 "Ubuntu", var(--font-ui);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-account-actions { margin-bottom: 0; }
.settings-action {
    padding: 7px 10px;
    background: #999;
    border: 4px solid #858585;
    border-radius: 8px;
    font: 900 14px/1.1 "Ubuntu", var(--font-ui);
}
.settings-action-green { background: #1dcf29; border-color: #179a19; }
.settings-action-muted { background: #969696; border-color: #747474; }
.settings-action-danger { background: #cf4b4b; border-color: #963636; }

.settings-action[hidden] { display: none; }
.content-tuning-panel {
    position: fixed;
    z-index: 3000;
    top: max(16px, env(safe-area-inset-top));
    left: 50%;
    width: min(420px, calc(100vw - 24px));
    max-height: calc(100dvh - 32px);
    transform: translateX(-50%);
    overflow: auto;
    background: #aaa;
    border: 5px solid #696969;
    border-radius: 12px;
    box-shadow: 0 12px 32px #0008;
    color: #fff;
    font: 700 14px/1.3 "Ubuntu", var(--font-ui);
}
.content-tuning-panel.is-hidden { display: none; }
.content-tuning-panel header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    background: #8b8b8b;
}
.content-tuning-panel h2 { margin: 0; font-size: 21px; }
.content-tuning-panel .modal-close { position: relative; flex: 0 0 34px; height: 34px; }
.content-tuning-body { display: grid; gap: 10px; padding: 14px; }
.content-tuning-body label { display: grid; gap: 3px; }
.content-tuning-body select, .content-tuning-body input {
    width: 100%;
    min-height: 38px;
    padding: 5px 7px;
    color: #172033;
    background: #f5f5f5;
    border: 3px solid #555;
    border-radius: 6px;
    font: inherit;
}
.content-tuning-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.content-tuning-actions button {
    min-height: 42px;
    padding: 5px;
    color: #fff;
    background: #4a994f;
    border: 3px solid #326f35;
    border-radius: 7px;
    font: inherit;
    cursor: pointer;
}
.content-tuning-actions button:disabled { opacity: .5; cursor: default; }
.content-tuning-actions button:last-child { background: #777; border-color: #555; }
.content-tuning-version { font-size: 12px; }
.content-tuning-status { min-height: 20px; margin: 0; }
.content-tuning-status[data-kind="error"] { color: #ffdbdb; }

.settings-inline-form {
    display: grid;
    gap: 6px;
    padding: 8px;
    background: #a2a2a2;
    border: 4px solid #858585;
    border-radius: 7px;
}

.settings-input {
    width: 100%;
    min-height: 36px;
    padding: 6px 8px;
    color: #172033;
    background: #eee;
    border: 3px solid #3d3d3d;
    border-radius: 3px;
}

.settings-form-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.settings-form-status {
    min-height: 16px;
    color: #fff;
    font-size: 11px;
    line-height: 1.25;
    text-shadow: 0 1px 0 #000;
}
.settings-form-status[data-kind="error"] { color: #ffe0e0; }
.settings-form-status[data-kind="success"] { color: #dcffe1; }

.settings-drawer.is-compact-layout {
    top: calc(56px + var(--safe-area-top));
    bottom: calc(8px + var(--safe-area-bottom));
    left: calc(8px + var(--safe-area-left));
    width: min(320px, calc(100vw - 16px - var(--safe-area-left) - var(--safe-area-right)));
    height: auto;
    border-width: 6px;
    border-radius: 7px;
}
.settings-drawer.is-compact-layout .settings-drawer-header {
    flex-basis: 54px;
    min-height: 54px;
    padding: 7px 12px;
}
.settings-drawer.is-compact-layout .settings-credits-toggle {
    top: 4px;
    min-height: 44px;
    padding: 5px 9px;
    font-size: 13px;
}
.settings-drawer.is-compact-layout .settings-credits { padding: 14px 16px; }
.settings-drawer.is-compact-layout .settings-credits-brand { font-size: 24px; }
.settings-drawer.is-compact-layout .settings-credits-brand img { width: 36px; height: 36px; }
.settings-drawer.is-compact-layout .settings-credits-note { margin-top: 6px; font-size: 12px; }
.settings-drawer.is-compact-layout .settings-credits-columns { margin-top: 12px; row-gap: 12px; }
.settings-drawer.is-compact-layout .settings-credits-group { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 14px 0; }
.settings-drawer.is-compact-layout .settings-credits-group-title { font-size: 11px; }
.settings-drawer.is-compact-layout .settings-credits-names { gap: 12px; }
.settings-drawer.is-compact-layout .settings-credits-names > li { font-size: 15px; }

.settings-drawer.is-compact-layout .settings-drawer-header h2 { font-size: 20px; }

.settings-drawer.is-compact-layout .settings-drawer-close {
    top: 7px;
    right: 8px;
    width: 34px;
    height: 34px;
    border-width: 4px;
    border-radius: 9px;
}

.settings-drawer.is-compact-layout .settings-drawer-close::before,
.settings-drawer.is-compact-layout .settings-drawer-close::after {
    width: 4px;
    height: 19px;
}

.settings-drawer.is-compact-layout .settings-drawer-body {
    display: block;
    padding: 8px 10px 14px;
}

.settings-drawer.is-compact-layout .settings-preferences { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.settings-drawer.is-compact-layout .settings-server-option { min-height: 44px; }

.settings-drawer.is-compact-layout .settings-group-title {
    margin-top: 10px;
    min-height: 39px;
    padding: 6px 10px;
    font-size: 15px;
    border-width: 4px;
    border-radius: 9px;
}

.settings-drawer.is-compact-layout .settings-group { padding: 6px 8px 8px; }

.settings-drawer.is-compact-layout .settings-toggle-row,
.settings-drawer.is-compact-layout .settings-action { min-height: 44px; }

.settings-drawer.is-compact-layout .settings-toggle-row {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
}

.settings-drawer.is-compact-layout .settings-check {
    width: 30px;
    height: 30px;
    border-width: 4px;
}

.settings-drawer.is-compact-layout .settings-row-label {
    font-size: 14px;
    white-space: normal;
}

@media (max-width: 1024px) {
    .modal-content {
        width: min(680px, 92vw);
        min-height: 52vh;
    }

    #accountDialog .modal-content {
        min-height: 70vh;
    }
}

@media (max-width: 700px) {
    :root {
        --button-size: 36px;
        --button-gap: 5px;
        --menu-icon-size: 22px;
    }

    .menu-actions { padding: 8px; }
    .login-card { padding: 18px; }
    .account-field { align-items: flex-start; flex-direction: column; gap: 5px; }
    .account-field-value { max-width: 100%; text-align: left; }
}

@media (orientation: landscape) and (max-height: 520px) {
    :root {
        --button-size: 35px;
        --button-gap: 10px;
        --menu-icon-size: 25px;
    }

    .menu-actions { padding: 10px; }

    .login-menu {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding:
            max(8px, var(--safe-area-top))
            max(8px, var(--safe-area-right))
            max(8px, var(--safe-area-bottom))
            max(8px, var(--safe-area-left));
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .login-card {
        flex: 0 0 auto;
        width: min(520px, 100%);
        margin-block: auto;
        padding: 12px 16px;
    }

    .login-header { padding: 0 0 8px; }
    .login-title { font-size: 26px; }
    .login-tabs { margin-bottom: 8px; }
    .login-tab { min-height: 34px; }
    .login-body { gap: 6px; }
    .login-body .textbox { padding-block: 8px; }
    .login-error {
        min-height: 20px;
        margin-top: 0;
        padding: 4px 8px;
    }
    .login-footer { padding-top: 8px; }
}

/* Local Ubuntu Latin and CJK subsets: Canvas text must not depend on device-installed fonts. */
@font-face {
    font-family: "Ubuntu";
    src: url("assets/fonts/ubuntu-latin.woff2?v=C1013INVENTORYFONT1") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0020-024F, U+20AC, U+2122;
}
@font-face {
    font-family: "Ubuntu";
    src: url("assets/fonts/thoita-cjk.woff2?v=39a1b8851dd7742e") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+2000-206F, U+3000-30FF, U+3400-9FFF, U+FF00-FFEF;
}
@font-face {
    font-family: "Thoita CJK";
    src: url("assets/fonts/thoita-cjk.woff2?v=39a1b8851dd7742e") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+2000-206F, U+3000-30FF, U+3400-9FFF, U+FF00-FFEF;
}
:root { --font-ui: "Trebuchet MS", "Segoe UI", "Thoita CJK", system-ui, sans-serif; }
.language-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 4px;
    color: inherit;
    font: inherit;
}
.language-control select {
    font: inherit;
    color: #fff;
    background: #34393f;
    border: 1px solid #6b737d;
    border-radius: 5px;
    padding: 7px 12px;
    min-height: 40px;
    cursor: pointer;
}
.language-control select:focus-visible { outline: 2px solid #a6e588; outline-offset: 2px; }
.login-card > .language-control { margin: 0 20px 12px; }

.offline-drop-bonus-mark svg { width: 31px; height: 31px; }
.offline-drop-bonus-description { display: block; margin-top: 6px; font-size: 10px; line-height: 1.35; font-weight: bold; }
/* Bedwars Trade presentation restored from Downloads/thoita-trade.html. */
#bedwars-trade-toggle { position:fixed; z-index:22; padding:0; border:0; background:transparent; cursor:pointer; }
#bedwars-trade-toggle canvas { display:block; width:100%; height:100%; }
#bedwars-trade-toggle:focus-visible { outline:3px solid #fff7c4; outline-offset:3px; }
#bedwars-trade {
    --panel:#c6a66a; --edge:#967b48; --surface:#b0935b; --deep:#9e814d;
    --panel-w:640px; --panel-h:696px; --panel-left:128px; --panel-bottom:24px;
    color:#fff9e9; font:700 13px "Ubuntu",var(--font-ui),sans-serif; box-sizing:border-box;
}
#bedwars-trade * { box-sizing:border-box; }
:where(#bedwars-trade) button { font:inherit; color:inherit; cursor:pointer; }
#bedwars-trade button:disabled { cursor:not-allowed; }
#bedwars-trade button:focus-visible { outline:3px solid #fff7c4; outline-offset:3px; }
:where(#bedwars-trade) .icon { display:block; width:24px; height:24px; flex:none; pointer-events:none; }
#bedwars-trade[hidden],#bedwars-trade-toggle[hidden],#bedwars-trade [hidden] { display:none!important; }
#bedwars-trade { position:fixed; z-index:var(--layer-panel); left:var(--panel-left); bottom:auto; width:var(--panel-w); height:var(--panel-h); display:flex; flex-direction:column; border:8px solid var(--edge); border-radius:6px; background:var(--panel); box-shadow:0 6px 0 #463b2025; transform:scale(var(--trade-scale,1)); transform-origin:top left; opacity:1; transition:transform 180ms cubic-bezier(.22,.75,.25,1),opacity 140ms; }
#bedwars-trade.trade-closed { transform:translateY(110vh) scale(var(--trade-scale,1)); pointer-events:none; opacity:0; }
#bedwars-trade header { position:relative; height:51px; flex:none; display:flex; align-items:center; justify-content:center; }
#bedwars-trade header h1,#bedwars-trade header h2 { font-size:26px; font-weight:900; letter-spacing:1.6px; margin:0; line-height:1; color:#f9f4e7; -webkit-text-stroke:2.7px #2d281e; paint-order:stroke fill; text-shadow:0 2px 0 #34291e38; }
.trade-header-mark { position:absolute; left:17px; top:16px; font-size:10px; letter-spacing:1px; color:#f6dfb0; display:flex; align-items:center; gap:5px; }
.trade-header-mark .icon { width:15px; height:15px; opacity:.84; }
.trade-close { position:absolute; right:10px; top:9px; width:31px; height:31px; padding:5px; background:#d66c62; border:4px solid #a14f49; border-radius:3px; display:grid; place-items:center; }
.trade-close:hover { background:#e87d70; }
.trade-close .icon { width:15px; height:15px; color:#fff4df; }
.trade-stage { flex:none; margin:1px 18px 0; padding:11px 15px 13px; background:var(--surface); border:3px solid var(--deep); border-radius:4px; position:relative; }
.trade-summary { min-height:27px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.trade-summary strong { font-size:17px; font-weight:900; -webkit-text-stroke:2px #433421; paint-order:stroke fill; letter-spacing:.1px; }
.trade-summary strong .roman { font-size:19px; margin-left:7px; color:#ffe8a4; }
.trade-badge { padding:4px 7px; border-radius:3px; background:#7e693f; color:#ffecb4; font-size:12px; white-space:nowrap; border:1px solid #715b39; }
.trade-flow { display:grid; grid-template-columns:110px 42px 110px 158px; gap:18px; align-items:center; justify-content:center; margin-top:10px; }
.trade-flow-group { min-width:0; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; }
.trade-flow-group > small { font-size:11px; line-height:1; color:#fff0cc; letter-spacing:.3px; }
.trade-flow-group > small strong { font-size:13px; }
.trade-cost-count { display:flex; align-items:baseline; justify-content:center; gap:4px; font-size:16px; font-weight:900; line-height:1; white-space:nowrap; -webkit-text-stroke:1.8px #423722; paint-order:stroke fill; }
.trade-cost-count .divider { color:#ddc69b; font-size:12px; -webkit-text-stroke:0; }
.trade-cost-count .owned-count { font-size:12px; color:#f0dfb5; -webkit-text-stroke:1.2px #423722; }
.trade-cost-card { background:#d0ab5b; border:5px solid #a17e3d; width:82px; height:76px; border-radius:3px; padding:11px 8px; display:grid; place-items:center; position:relative; box-shadow:inset 0 -5px 0 #97733428; }
.trade-cost-card:hover { background:#ddbb71; }
.trade-cost-card .icon { width:59px; height:44px; }
.trade-flow-group small { line-height:1; min-height:12px; color:#f3e0ba; font-size:11px; }
.trade-arrow { align-self:center; margin-top:10px; color:#f9e8b5; }
.trade-arrow .icon { width:40px; height:30px; filter:drop-shadow(0 2px 0 #846a3e); }
.trade-result-card { width:82px; height:76px; border:5px solid var(--trade-border); background:var(--trade-fill); border-radius:3px; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:inset 0 -5px 0 #00000012; }
.trade-result-card { padding:0; color:inherit; }
.trade-result-card:not(:disabled) { cursor:pointer; }
.trade-result-card:not(:disabled):hover { filter:brightness(1.1); }
.trade-result-card .icon { width:37px; height:37px; color:white; filter:drop-shadow(0 2px 0 #00000024); }
.trade-result-card > b { position:absolute; right:5px; top:3px; font-size:12px; font-weight:900; -webkit-text-stroke:2px #252020; paint-order:stroke fill; }
.trade-result-card > span { font-size:11px; position:absolute; bottom:4px; color:#fff; -webkit-text-stroke:2px #20201e; paint-order:stroke fill; }
.trade-action { align-self:stretch; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:20px 0 0 8px; gap:7px; min-width:0; }
.trade-buy { position:relative; overflow:hidden; width:100%; min-height:49px; border:4px solid #4c7840; border-radius:4px; background:#7fb863; box-shadow:inset 0 -5px 0 #679b50; font-size:21px; line-height:1; font-weight:900; letter-spacing:1px; -webkit-text-stroke:2px #2d4526; paint-order:stroke fill; padding:8px 10px 11px; transition:background .12s,transform .1s; }
.trade-buy:hover:not(:disabled) { background:#91c776; }
.trade-buy:active:not(:disabled) { transform:translateY(2px); box-shadow:inset 0 -2px 0 #679b50; }
.trade-buy:disabled { background:#a79872; border-color:#837653; box-shadow:inset 0 -5px 0 #938561; color:#e5d9b6; -webkit-text-stroke:1.6px #5b513b; font-size:17px; letter-spacing:0; }
.trade-action > span { min-height:13px; text-align:center; color:#ffefbd; font-size:11px; line-height:1.3; }
.trade-action > small { font-size:10px; color:#e9d3a7; line-height:1.2; text-align:center; white-space:nowrap; }
.trade-catalog-top { display:flex; justify-content:space-between; align-items:center; padding:14px 22px 9px; flex:none; font-size:12px; line-height:1; }
.trade-catalog-top strong { color:#fff2d3; display:flex; align-items:center; gap:6px; }
.trade-catalog-top strong .icon { width:14px; height:14px; }
.trade-catalog-top > span { font-size:10px; color:#ecdbb5; letter-spacing:.2px; }
.trade-catalog { min-height:0; flex:1; overflow-y:auto; overflow-x:hidden; margin:0 10px 0 17px; padding-right:7px; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#967b48 transparent; }
.trade-catalog::-webkit-scrollbar { width:6px; }
.trade-catalog::-webkit-scrollbar-thumb { background:#967b48; border-radius:9px; }
.trade-row { display:flex; gap:10px; align-items:center; padding:2px 10px 1px; background:#7454251c; border-bottom:2px solid #8b6d3629; min-height:85px; margin-bottom:4px; border-radius:3px; }
.trade-row:nth-child(even) { background:#85642e12; }
.trade-row:last-child { border:0; margin-bottom:0; }
.trade-row-info { width:116px; flex:none; align-self:center; }
.trade-row-info h3 { margin:0 0 6px; font-size:14px; font-weight:900; -webkit-text-stroke:1.7px #46351e; paint-order:stroke fill; line-height:1.45; white-space:nowrap; }
.trade-row-info small { font-size:10px; font-weight:700; color:#ead5a9; display:flex; align-items:center; gap:4px; line-height:1.4; }
.trade-row-info small b { font-size:11px; color:#fff3cd; }
.trade-row-info small .dot { width:4px; height:4px; display:inline-block; background:#ffe4a7; border-radius:50%; margin:0 1px; }
.trade-row-cards { display:flex; align-items:center; gap:10px; min-width:0; overflow-x:auto; overflow-y:hidden; padding:3px 3px 3px; scrollbar-width:thin; scrollbar-color:#977942 transparent; }
.trade-tier { position:relative; flex:none; width:62px; padding:0; border:0; background:transparent; outline-offset:2px; }
.trade-tier-face { display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; width:62px; height:58px; border:4px solid var(--trade-border); border-radius:3px; background:var(--trade-fill); color:#fff; box-shadow:inset 0 -4px 0 #0000000e; }
.trade-tier-face > .icon { width:28px; height:28px; margin-top:-6px; filter:drop-shadow(0 1.5px 0 #00000025); }
.trade-tier-face > b { position:absolute; bottom:3px; font-size:11px; font-weight:900; line-height:1; -webkit-text-stroke:2px #29251e; paint-order:stroke fill; }
.trade-tier > small { font-size:10px; display:flex; align-items:center; gap:2px; justify-content:center; line-height:1; margin-top:5px; color:#fff0c5; height:11px; }
.trade-tier > small .icon { width:10px; height:10px; }
.trade-tier:hover .trade-tier-face { filter:brightness(1.12); transform:translateY(-2px); }
.trade-tier[aria-pressed=true] .trade-tier-face { outline:2px solid #fff4bc; outline-offset:2px; }
.trade-tier[aria-pressed=true] .trade-tier > small { color:#fffbdc; }
.trade-tier.locked .trade-tier-face { background:color-mix(in srgb,var(--trade-fill) 52%,#9d8b63); border-color:color-mix(in srgb,var(--trade-border) 58%,#8b7955); }
.trade-tier.locked .trade-tier-face>.icon { opacity:.48; }
.trade-tier.locked .trade-tier-face > b { opacity:.78; }
.trade-tier.locked .trade-tier > small { color:#d5bd92; }
.trade-tier.purchased .trade-tier-face { background:color-mix(in srgb,var(--trade-fill) 76%,#9c8b5b); }
.trade-state-pin { position:absolute; right:-5px; top:-5px; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; z-index:1; background:#7fa456; border:2px solid #4d6f39; box-shadow:0 1px #54432123; }
.trade-state-pin .icon { width:10px; height:10px; margin:0; filter:none; }
.trade-state-pin.trade-lock { background:#8c7853; border-color:#725d3c; }
.trade-state-pin.trade-lock .icon { width:9px; height:9px; color:#e6d7b6; }
.trade-tier.purchased .trade-tier > small { color:#e9ecc3; }
.trade-row-cards.blessings .trade-tier-face > .icon { width:30px; height:30px; }
#bedwars-trade footer { flex:none; min-height:48px; display:flex; justify-content:space-between; gap:8px; align-items:center; padding:8px 18px 9px; border-top:2px solid #98793e3d; margin-top:7px; }
.trade-wallet { display:flex; gap:7px; align-items:center; border:0; background:none; padding:0; font-size:12px; color:#f7e4b5; }
.trade-wallet .icon { width:26px; height:26px; }
.trade-wallet strong { font-size:18px; font-weight:900; color:#fff0be; -webkit-text-stroke:2px #46351e; paint-order:stroke fill; }
.trade-wallet:hover .trade-wallet strong { color:#fffbe3; }
.trade-wallet small { font-size:10px; color:#e9d5a9; margin-top:3px; }
.trade-footer-tip { color:#ecdbb2; font-size:10px; text-align:center; }
.trade-history-button { display:flex; align-items:center; gap:4px; background:#b3965d; border:2px solid #9e814b; border-radius:3px; padding:5px 7px; font-size:10px; color:#f3e4be; white-space:nowrap; }
.trade-history-button .icon { width:13px; height:13px; }
.trade-history-button:hover { background:#c1a365; }
.trade-history-count { font-size:10px; color:#fff6d4; }

.trade-cost-count strong { font-size:16px; }
.trade-cost-count span { font-size:12px; color:#f0dfb5; -webkit-text-stroke:0; }
.trade-cost-card,.trade-result-card { width:82px; height:76px; }
.trade-cost-card,.trade-cost-card:hover,.trade-result-card.trade-native-card { background:transparent; border:0; padding:0; box-shadow:none; }
.trade-cost-card canvas,.trade-result-card canvas { display:block; width:76px; height:76px; }
.trade-result-card > b { position:absolute; right:5px; top:3px; font-size:12px; font-weight:900; paint-order:stroke fill; -webkit-text-stroke:2px #252020; }
.trade-result-card > span { position:absolute; bottom:4px; font-size:11px; color:#fff; paint-order:stroke fill; -webkit-text-stroke:2px #20201e; }
.trade-action > span { min-height:13px; text-align:center; color:#ffefbd; font-size:11px; line-height:1.3; }
.trade-action > small { font-size:10px; color:#e9d3a7; line-height:1.2; text-align:center; white-space:nowrap; }
.trade-buy { font-size:21px!important; }
.trade-buy:disabled { font-size:17px!important; }
.trade-catalog-top strong { color:#fff2d3; font-size:12px; }
.trade-catalog-top > span { font-size:10px; color:#ecdbb5; }
.trade-tier-face > b { position:absolute; bottom:3px; font-size:11px; font-weight:900; line-height:1; paint-order:stroke fill; -webkit-text-stroke:2px #29251e; }
.trade-tier > small { display:flex; align-items:center; justify-content:center; gap:2px; height:11px; margin-top:5px; font-size:10px; line-height:1; color:#fff0c5; }
.trade-state-pin { font-style:normal; }
.trade-petal-tier .trade-tier-face { background:transparent; border:0; box-shadow:none; }
.trade-tier-face > canvas { display:block; width:58px; height:58px; }
.trade-stock-note { align-self:center; font-size:11px; color:#f5dfb6; line-height:1.7; margin-left:8px; }
.trade-history { position:absolute; bottom:58px; right:12px; width:min(360px,95%); max-height:300px; overflow:auto; padding:15px; border:4px solid #967b48; border-radius:5px; background:#b0935b; box-shadow:0 4px 0 #463b2030; }
.trade-history p { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid #967b4855; padding-bottom:8px; font-size:11px; }
.trade-history p span { color:#ffecb4; }
#bedwars-trade.trade-narrow .trade-flow { grid-template-columns:90px 29px 88px minmax(110px,1fr); gap:5px; }
#bedwars-trade.trade-narrow .trade-row-info { width:107px; }
#bedwars-trade.trade-narrow .trade-tier,#bedwars-trade.trade-narrow .trade-tier-face { width:57px; }
#bedwars-trade.trade-narrow .trade-row-cards { gap:8px; }
@media(max-width:620px) {
    #bedwars-trade { border-width:6px; }
    #bedwars-trade header { height:46px; }
    #bedwars-trade h2 { font-size:24px; }
    .trade-header-mark { font-size:8px; left:12px; top:16px; letter-spacing:.4px; }
    .trade-header-mark .icon { width:12px; height:12px; }
    .trade-stage { margin:0 10px; padding:10px; border-width:2px; }
    .trade-summary strong { font-size:14px; -webkit-text-stroke:1.5px #433421; }
    .trade-badge { font-size:10px; padding:3px 5px; }
    #bedwars-trade.trade-narrow .trade-flow { grid-template-columns:73px 24px 76px minmax(86px,1fr); gap:4px; margin-top:8px; }
    .trade-cost-card,.trade-result-card { width:66px; height:65px; }
    .trade-cost-card canvas,.trade-result-card canvas { width:65px; height:65px; }
    .trade-arrow .icon { width:23px; }
    .trade-action { padding-left:1px; padding-top:13px; gap:6px; }
    .trade-buy { font-size:18px!important; min-height:43px; padding:7px 4px 10px; }
    .trade-buy:disabled { font-size:13px!important; }
    .trade-action > span { font-size:9px; }
    .trade-action > small { font-size:8px; }
    .trade-catalog-top { padding:12px 15px 8px; }
    .trade-catalog-top > span { font-size:8px; }
    .trade-catalog { margin:0 4px 0 9px; padding-right:4px; }
    .trade-row { padding:6px; gap:5px; min-height:83px; }
    #bedwars-trade.trade-narrow .trade-row-info { width:98px; }
    .trade-row-info h3 { font-size:12px; -webkit-text-stroke:1.4px #46351e; }
    .trade-row-info small { font-size:9px; }
    #bedwars-trade.trade-narrow .trade-tier,#bedwars-trade.trade-narrow .trade-tier-face { width:53px; }
    .trade-tier-face { height:55px; }
    .trade-tier-face > canvas { width:53px; height:53px; }
    #bedwars-trade footer { padding:8px 12px; min-height:45px; }
    .trade-footer-tip { display:none; }
    .trade-wallet strong { font-size:17px; }
    .trade-wallet small { font-size:9px; }
    .trade-history-button { font-size:9px; }
}

/* Bedwars top panel: adapted from the supplied thoita_bedwars_top_panel.html. */
#bedwars-hud{
  --hud-top:10px;
  --ink:#202020; --panel:#aaa; --panel-edge:#858585;
  --red:#de5c5c; --red-edge:#b84a4a; --blue:#5a9fdb; --blue-edge:#4981b1;
  --green:#7fb863; --green-edge:#4c7840; --yellow:#dbd74b; --yellow-edge:#b0ae3d;
  --craft:#d99c60; --craft-edge:#956a43; --hud-w:720px; --edge:6px; --radius:6px; --gap:6px;
  font-family:Ubuntu,"Microsoft YaHei","PingFang SC",Arial,sans-serif;
  pointer-events:none;
  position:fixed;
  z-index:20;
  top:var(--hud-top);
  left:50%;
  width:min(var(--hud-w), calc(100vw - 560px));
  min-width:620px;
  transform:translateX(-50%);
  transition:transform 160ms cubic-bezier(.333333,1,.666667,1);
  color:#fff;
  user-select:none;
  filter:none;
}

#bedwars-hud .hud-frame{
  padding:6px;
  background:var(--panel);
  border:var(--edge) solid var(--panel-edge);
  border-radius:var(--radius);
}

#bedwars-hud .hud-titlebar{
  position:relative;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:5px;
}

#bedwars-hud .hud-title{
  margin:0;
  font-size:19px;
  line-height:1;
  font-weight:900;
  letter-spacing:.1px;
  color:#fff;
  -webkit-text-stroke:2.1px var(--ink);
  paint-order:stroke fill;
  text-shadow:0 2px 0 rgba(0,0,0,.12);
}

#bedwars-hud .phase-badge{
  position:absolute;
  right:2px;
  top:50%;
  transform:translateY(-50%);
  min-width:62px;
  padding:3px 7px 4px;
  text-align:center;
  font-size:11px;
  line-height:1;
  font-weight:900;
  color:#fff;
  background:#7d8d92;
  border:3px solid #657379;
  border-radius:4px;
  -webkit-text-stroke:1.25px var(--ink);
  paint-order:stroke fill;
}

#bedwars-hud .teams{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--gap);
}

#bedwars-hud .team{
  position:relative;
  min-width:0;
  height:58px;
  padding:5px 7px 6px;
  border:4px solid var(--team-edge);
  border-radius:5px;
  background:var(--team);
  color:#fff;
  overflow:hidden;
}

#bedwars-hud .team.own{
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.30);
}
#bedwars-hud .team.own::after{
  content:"★";
  position:absolute;
  right:6px;
  top:2px;
  font-size:10px;
  color:#fff7c8;
  -webkit-text-stroke:1px #5e4f24;
  paint-order:stroke fill;
}

#bedwars-hud .team.red{--team:var(--red);--team-edge:var(--red-edge);}
#bedwars-hud .team.blue{--team:var(--blue);--team-edge:var(--blue-edge);}
#bedwars-hud .team.green{--team:var(--green);--team-edge:var(--green-edge);}
#bedwars-hud .team.yellow{--team:var(--yellow);--team-edge:var(--yellow-edge);}

#bedwars-hud .team-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding-right:12px;
  line-height:1;
}

#bedwars-hud .team-name{
  min-width:0;
  font-size:15px;
  font-weight:900;
  white-space:nowrap;
  -webkit-text-stroke:1.7px var(--ink);
  paint-order:stroke fill;
}

#bedwars-hud .team-count{
  flex:none;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
  -webkit-text-stroke:1.4px var(--ink);
  paint-order:stroke fill;
}

#bedwars-hud .home{
  display:grid;
  grid-template-columns:auto minmax(28px,1fr) auto;
  align-items:center;
  gap:5px;
  margin-top:7px;
}

#bedwars-hud .home-label{
  font-size:10px;
  font-weight:900;
  opacity:.96;
  -webkit-text-stroke:1px var(--ink);
  paint-order:stroke fill;
}

#bedwars-hud .hp-track{
  height:9px;
  border:2px solid rgba(39,39,39,.62);
  border-radius:3px;
  background:rgba(52,52,52,.30);
  overflow:hidden;
}
#bedwars-hud .hp-fill{
  display:block;
  width:100%;
  height:100%;
  background:#f3f0d9;
}

#bedwars-hud .hp-text{
  min-width:54px;
  text-align:right;
  font-size:9.5px;
  line-height:1;
  font-weight:900;
  white-space:nowrap;
  -webkit-text-stroke:1px var(--ink);
  paint-order:stroke fill;
}






#bedwars-hud .vote{
  margin-top:6px;
  min-height:42px;
  padding:5px 6px 5px 9px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  background:var(--craft);
  border:4px solid var(--craft-edge);
  border-radius:5px;
}

#bedwars-hud .vote-state{
  display:flex;
  align-items:baseline;
  gap:5px;
  white-space:nowrap;
}
#bedwars-hud .vote-state strong{
  font-size:13px;
  font-weight:900;
  -webkit-text-stroke:1.55px #49321f;
  paint-order:stroke fill;
}
#bedwars-hud .vote-count{
  min-width:32px;
  padding:2px 5px 3px;
  text-align:center;
  background:#b27f4e;
  border:2px solid #956a43;
  border-radius:3px;
  font-size:11px;
  font-weight:900;
  -webkit-text-stroke:1px #49321f;
  paint-order:stroke fill;
}
#bedwars-hud .vote-note{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#f8dfc3;
  font-size:10px;
  font-weight:800;
}

#bedwars-hud .vote-button{
  pointer-events:auto;
  min-width:94px;
  height:29px;
  padding:0 10px 2px;
  border:4px solid var(--green-edge);
  border-radius:4px;
  background:var(--green);
  color:#fff;
  font:900 11px/1 Ubuntu,"Microsoft YaHei",sans-serif;
  -webkit-text-stroke:1.3px #2d4526;
  paint-order:stroke fill;
  cursor:pointer;
  transition:filter .12s ease, transform .10s ease, background .12s ease;
}
#bedwars-hud .vote-button:hover:not(:disabled){ filter:brightness(1.10); transform:translateY(-1px); }
#bedwars-hud .vote-button:active:not(:disabled){ transform:translateY(1px); }
#bedwars-hud .vote-button:disabled{
  background:#9c937b;
  border-color:#756d59;
  color:#e8dfc8;
  -webkit-text-stroke:1px #514b3d;
  cursor:default;
}

@media (max-width:1400px){
  #bedwars-hud{
    width:min(680px,calc(100vw - 360px));
    min-width:600px;
  }
  #bedwars-hud .team{padding-inline:6px}
  #bedwars-hud .hp-text{min-width:46px;font-size:9px}
}

@media (max-width:960px){

#bedwars-hud{
    --hud-top:76px;
    width:min(680px,calc(100vw - 18px));
    min-width:0;
  }
  #bedwars-hud .teams{grid-template-columns:repeat(2,minmax(0,1fr));}
  #bedwars-hud .team{height:56px;}
  #bedwars-hud .hud-titlebar{height:25px}
  #bedwars-hud .hud-title{font-size:17px}
  #bedwars-hud .phase-badge{font-size:10px;min-width:56px}
  #bedwars-hud .vote{grid-template-columns:auto 1fr auto}
}

@media (max-width:560px){
  #bedwars-hud{--hud-top:72px;}
  #bedwars-hud .hud-frame{padding:5px;border-width:5px}
  #bedwars-hud .teams{gap:5px}
  #bedwars-hud .team{height:54px;border-width:3px}
  #bedwars-hud .team-name{font-size:13px}
  #bedwars-hud .team-count{font-size:10px}
  #bedwars-hud .home{margin-top:6px}
  #bedwars-hud .hp-text{min-width:42px;font-size:8px}

#bedwars-hud .info-strip .wide-only{display:none;}
  #bedwars-hud .vote-note{display:none;}
  #bedwars-hud .vote{grid-template-columns:1fr auto;}
  #bedwars-hud .vote-state{gap:4px}
  #bedwars-hud .vote-button{
  pointer-events:auto;min-width:82px}
  #bedwars-hud .hud-titlebar{height:auto;min-height:25px;gap:5px;flex-wrap:wrap;}
  #bedwars-hud .phase-badge{position:static;transform:none;}
}


#bedwars-hud .vote[data-passed="true"] { grid-template-columns:minmax(0,1fr); }
#bedwars-hud .vote[data-passed="true"] .vote-state { white-space:normal; }
#bedwars-hud .vote[data-passed="true"] .vote-actions { display:none; }

#bedwars-hud * { box-sizing:border-box; }
#bedwars-hud [hidden] { display:none!important; }
#bedwars-hud .hp-track { display:block; }
#bedwars-hud .vote-actions { display:flex; }
#bedwars-hud .match-notice { margin-top:6px;padding:5px 8px;border:3px solid #797979;border-radius:4px;background:#949494;font-size:12px;font-weight:800;text-align:center; }
#bedwars-hud .match-actions { display:flex;align-items:center;gap:8px;margin-top:6px; }
#bedwars-hud .match-actions .vote-button { flex:none;height:33px; }
#bedwars-hud .spectate-selector { display:block;min-width:0;max-width:100%;height:33px;margin:0 0 0 auto;padding:5px 8px;border:3px solid #797979;border-radius:4px;background:#949494;color:#fff;font:800 12px Ubuntu,"Microsoft YaHei",sans-serif;pointer-events:auto; }

#bedwars-hud .hud-titlebar { padding-right:30px; }
#bedwars-hud .phase-badge { right:32px; }
#bedwars-hud .hud-close,
#bedwars-hud .hud-expand {
  pointer-events:auto;
  cursor:pointer;
  color:#fff;
  background:var(--panel);
  border:3px solid var(--panel-edge);
  border-radius:4px;
}
#bedwars-hud .hud-close {
  position:absolute;
  top:0;
  right:0;
  width:25px;
  height:25px;
  padding:0;
  font:900 23px/19px Arial,sans-serif;
}
#bedwars-hud .hud-close:hover,
#bedwars-hud .hud-expand:hover { filter:brightness(1.1); }
#bedwars-hud[data-collapsed="true"] { transform:translate(-50%,calc(-100% - var(--hud-top))); }
#bedwars-hud .hud-expand {
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  visibility:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:27px;
  border-top:0;
  border-radius:0 0 6px 6px;
}
#bedwars-hud[data-collapsed="true"] .hud-expand { visibility:visible; }
#bedwars-hud .hud-chevron {
  width:10px;
  height:10px;
  margin-top:-5px;
  border-right:3px solid #fff;
  border-bottom:3px solid #fff;
  transform:rotate(45deg);
}

/* 手机横屏的可用高度包含浏览器工具栏占用后的视口。 */
@media (max-width:960px) and (max-height:500px) and (orientation:landscape) {
  #bedwars-hud { --hud-top:max(32px,env(safe-area-inset-top,0px)); }
  #bedwars-hud .hud-frame {
    max-height:calc(100dvh - var(--hud-top) - max(8px,env(safe-area-inset-bottom,0px)));
    overflow-y:auto;
    pointer-events:auto;
    touch-action:pan-y;
  }
  #bedwars-hud .team { height:52px;padding:5px; }
  #bedwars-hud .team-head { gap:4px;padding-right:8px; }
  #bedwars-hud .team-name { font-size:12px; }
  #bedwars-hud .team-count { font-size:10px; }
  #bedwars-hud .hp-text { min-width:0;font-size:8px; }
  #bedwars-hud .hud-titlebar { height:auto;min-height:25px;gap:5px;flex-wrap:wrap; }
  #bedwars-hud .phase-badge { position:static;transform:none; }
  #bedwars-hud .match-notice { font-size:10px; }
}
@media (min-width:560px) and (max-width:960px) and (max-height:500px) and (orientation:landscape) {
  #bedwars-hud .teams { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
/* 宽横屏直接利用顶部中间区域，两侧留给菜单、全屏按钮和小地图。 */
@media (min-width:800px) and (max-width:960px) and (max-height:500px) and (orientation:landscape) {
  #bedwars-hud {
    --hud-top:max(8px,env(safe-area-inset-top,0px));
    left:calc(50% + 65px);
    width:min(680px,calc(100vw - 260px));
  }
}

/* ==================== Pixel Art Style（设置 → 像素画风；host/guard.js 和 uiRuntime/settingsStore.js 给 html 加 pixel-art） ====================
   方角、平涂、不模糊的描边和投影；字体是像素字：英文、数字用 Pixelify Sans 粗体，
   中文和其它字符用 Fusion Pixel；通用标点（…“”—）和上面的中文子集一样归 Fusion。下面三个字体面是唯一的声明：
   settingsStore.js 照抄一份登记到 "Ubuntu" 下，World 里的 SDF 字（scripts/bake-world-sdf-font.js --pixel）按 Pixelify 的 unicode-range 分字。
   后写的字体面先试：Pixelify 管拉丁字符；界面文字和界面代码里的符号用 Fusion 的界面子集（33 KB，scripts/subset-ui-cjk-font.py --pixel）；
   子集里没有的字（聊天里的中日韩文字、符号、Pixelify 缺的拉丁字母）才下载完整的 Fusion（666 KB）；它的 unicode-range
   去掉了界面用到、Fusion 却没有的 − ≈ ✅ ✓ ✦ ⟳（免得为它们白下载）和 emoji 所在的增补平面（只留中日韩扩展字）。
   "Thoita Pixel" 写在这里，开局的 Loading... 也能用上；字体没下载完先用后备字体显示；不用像素画风时不会下载。 */
@font-face {
    font-family: "Thoita Pixel";
    src: url("assets/fonts/fusion-pixel-12px-zh_hans.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+00A0-2211, U+2213-2247, U+2249-2704, U+2706-2712, U+2714-2725, U+2727-27F2, U+27F4-9FFF,
        U+AC00-D7AF, U+F900-FAFF, U+FE10-FE6F, U+FF00-FFEF, U+20000-3FFFF;
}
@font-face {
    font-family: "Thoita Pixel";
    src: url("assets/fonts/fusion-pixel-12px-ui.woff2?v=fc207fcf8f198dd9") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: "Thoita Pixel";
    src: url("assets/fonts/pixelify-sans-bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0020-024F, U+20AC, U+2122;
}
/* Switching Pixel Art Style (settingsStore.js applyArtStyle): no transitions for that one style change. */
html.art-style-switching *, html.art-style-switching *::before, html.art-style-switching *::after {
    transition: none !important;
}
html.pixel-art {
    --font-ui: "Thoita Pixel", "Thoita CJK", monospace;
    font-synthesis: none;
    -webkit-font-smoothing: none;
}
html.pixel-art *, html.pixel-art *::before, html.pixel-art *::after {
    border-radius: 0 !important;
    font-synthesis: none !important;
    transition: none !important;
}
html.pixel-art img, html.pixel-art canvas { image-rendering: pixelated; }
html.pixel-art svg { shape-rendering: crispEdges; }
html.pixel-art .menu-action:hover { transform: none; }
html.pixel-art .menu-action:active { transform: translateY(2px); }
html.pixel-art .login-menu { background: #4f88bb; }
html.pixel-art .login-card { box-shadow: 6px 6px 0 rgba(15, 23, 42, .35); }
html.pixel-art .modal-content { background: #3e78a6; box-shadow: 6px 6px 0 rgba(0, 0, 0, .45); }
html.pixel-art .textbox:focus { box-shadow: 0 0 0 2px rgba(78, 142, 201, .9); }
html.pixel-art .offline-drop-bonus-toggle-knob { box-shadow: 1px 1px 0 rgba(0, 0, 0, .4); }
html.pixel-art .chat-field, html.pixel-art .chat-mode-button, html.pixel-art .chat-system, html.pixel-art .animated-text-peterpeterp,
html.pixel-art .account-field-value, html.pixel-art .account-note p, html.pixel-art .qq-group-label { text-shadow: 1px 1px 0 #000; }