/* ==========================================================================
   Project Beelzebub - Dioxus Web UI Overlay Stylesheet
   Fonts: Kanit (Headings/Display), Sarabun (Body/Tooltips/Descriptions)
   ========================================================================== */

@font-face {
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/ui/web/fonts/Kanit-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Sarabun';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/ui/web/fonts/Sarabun-Regular.ttf') format('truetype');
}

/* ==========================================================================
   THEME DEFINITIONS
   ========================================================================== */

/* Theme A: Dark Glass (Modern MMO) */
.theme-dark-glass {
    --theme-window-bg: rgba(16, 20, 28, 0.82);
    --theme-window-backdrop: blur(14px) saturate(160%);
    --theme-border: rgba(212, 175, 55, 0.45);
    --theme-border-accent: #f0c946;
    --theme-slot-bg: rgba(10, 12, 18, 0.75);
    --theme-slot-border: rgba(255, 255, 255, 0.1);
    --theme-slot-hover-border: #f0c946;
    --theme-slot-hover-glow: rgba(240, 201, 70, 0.3);
    --theme-text-primary: #f8fafc;
    --theme-text-secondary: #94a3b8;
    --theme-text-accent: #fcd34d;
    --theme-shadow: 0 12px 36px rgba(0, 0, 0, 0.75), 0 0 1px rgba(255, 255, 255, 0.2);
    --theme-radius: 8px;
    --theme-radius-inner: 6px;
    --theme-tab-bg: rgba(255, 255, 255, 0.05);
    --theme-tab-active-bg: rgba(212, 175, 55, 0.22);
    --theme-tab-active-border: #f0c946;
    --theme-header-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.0) 100%);
    --theme-hp-bar: linear-gradient(90deg, #b91c1c 0%, #ef4444 60%, #f87171 100%);
    --theme-mp-bar: linear-gradient(90deg, #1d4ed8 0%, #3b82f6 60%, #60a5fa 100%);
    --theme-sp-bar: linear-gradient(90deg, #047857 0%, #10b981 60%, #34d399 100%);
    --theme-exp-bar: linear-gradient(90deg, #d97706 0%, #f59e0b 60%, #fbbf24 100%);
    --theme-badge-bg: rgba(212, 175, 55, 0.2);
    --theme-badge-border: rgba(212, 175, 55, 0.5);
    --theme-scroll-thumb: rgba(212, 175, 55, 0.45);
    --theme-scroll-thumb-hover: rgba(240, 201, 70, 0.8);
    --theme-scroll-track: rgba(0, 0, 0, 0.25);
    --theme-window-border: rgba(212, 175, 55, 0.45);
    --ui-surface-inset: rgba(8, 10, 16, 0.72);
    --ui-surface-card: rgba(255, 255, 255, 0.04);
    --ui-btn-bg: rgba(255, 255, 255, 0.06);
    --ui-btn-bg-hover: rgba(212, 175, 55, 0.16);
    --ui-btn-border: rgba(255, 255, 255, 0.14);
    --ui-btn-primary-bg: linear-gradient(180deg, #f0c946 0%, #d4af37 100%);
    --ui-btn-primary-bg-hover: linear-gradient(180deg, #f7d969 0%, #e0bc42 100%);
    --ui-btn-primary-border: #f5d76e;
    --ui-btn-primary-text: #0f172a;
    --lobby-stage-plate-bg: rgba(18, 20, 28, 0.72);
    --lobby-stage-meta-text: #d6dde8;



    --ui-btn-danger-bg: rgba(239, 68, 68, 0.14);
    --ui-btn-danger-bg-hover: rgba(239, 68, 68, 0.26);
    --ui-btn-danger-border: rgba(239, 68, 68, 0.45);
    --ui-btn-danger-text: #fca5a5;
    --ui-input-bg: rgba(8, 10, 16, 0.78);
    --ui-input-bg-focus: rgba(12, 15, 24, 0.92);
    --ui-input-border: rgba(255, 255, 255, 0.14);
    --ui-focus-ring: 0 0 0 2px rgba(240, 201, 70, 0.32);
}

/* Theme B: Warm Light (Clean, Bright, Readable) */
.theme-warm-light {
    --theme-window-bg: rgba(248, 245, 238, 0.95);
    --theme-window-backdrop: blur(10px);
    --theme-border: #c8b89e;
    --theme-border-accent: #9e642e;
    --theme-slot-bg: rgba(238, 233, 222, 0.95);
    --theme-slot-border: rgba(140, 110, 80, 0.3);
    --theme-slot-hover-border: #9e642e;
    --theme-slot-hover-glow: rgba(158, 100, 46, 0.25);
    --theme-text-primary: #2d2013;
    --theme-text-secondary: #6e5844;
    --theme-text-accent: #9e4b10;
    --theme-shadow: 0 10px 30px rgba(60, 45, 30, 0.22), 0 1px 3px rgba(0, 0, 0, 0.1);
    --theme-radius: 10px;
    --theme-radius-inner: 7px;
    --theme-tab-bg: rgba(160, 130, 95, 0.12);
    --theme-tab-active-bg: #edd8be;
    --theme-tab-active-border: #9e642e;
    --theme-header-bg: linear-gradient(180deg, rgba(230, 218, 198, 0.6) 0%, rgba(248, 245, 238, 0) 100%);
    --theme-hp-bar: linear-gradient(90deg, #c53030 0%, #e53e3e 60%, #fc8181 100%);
    --theme-mp-bar: linear-gradient(90deg, #2b6cb0 0%, #3182ce 60%, #63b3ed 100%);
    --theme-sp-bar: linear-gradient(90deg, #276749 0%, #38a169 60%, #68d391 100%);
    --theme-exp-bar: linear-gradient(90deg, #b7791f 0%, #d69e2e 60%, #f6e05e 100%);
    --theme-badge-bg: rgba(158, 100, 46, 0.15);
    --theme-badge-border: #9e642e;
    --theme-scroll-thumb: rgba(158, 100, 46, 0.45);
    --theme-scroll-thumb-hover: rgba(158, 100, 46, 0.8);
    --theme-scroll-track: rgba(160, 130, 95, 0.15);
    --theme-window-border: #c8b89e;
    --ui-surface-inset: rgba(232, 224, 210, 0.85);
    --ui-surface-card: rgba(160, 130, 95, 0.08);
    --ui-btn-bg: rgba(160, 130, 95, 0.12);
    --ui-btn-bg-hover: rgba(158, 100, 46, 0.20);
    --ui-btn-border: rgba(140, 110, 80, 0.35);
    --ui-btn-primary-bg: linear-gradient(180deg, #e5b842 0%, #c99722 100%);
    --ui-btn-primary-bg-hover: linear-gradient(180deg, #efc655 0%, #d6a42c 100%);
    --lobby-stage-plate-bg: rgba(248, 245, 238, 0.76);
    --lobby-stage-meta-text: #3d2c1b;

    --ui-btn-primary-border: #9e642e;
    --ui-btn-primary-text: #2d2013;
    --ui-btn-danger-bg: rgba(197, 48, 48, 0.12);
    --ui-btn-danger-bg-hover: rgba(197, 48, 48, 0.22);
    --ui-btn-danger-border: rgba(197, 48, 48, 0.42);
    --ui-btn-danger-text: #9b2c2c;
    --ui-input-bg: rgba(255, 252, 246, 0.92);
    --ui-input-bg-focus: #ffffff;
    --ui-input-border: rgba(140, 110, 80, 0.38);
    --ui-focus-ring: 0 0 0 2px rgba(158, 100, 46, 0.28);
}

/* ==========================================================================
   ROOT OVERLAY & BASE STYLES
   ========================================================================== */

/* ==========================================================================
   TASK-109 Touch & Mobile Sizing Configuration (Single Source of Truth)
   ========================================================================== */

:root {
    --drag-threshold-px: 8px;
    --touch-target-min-size: 48px;
    --touch-font-min-size: 13px;
    --touch-slot-size: 48px;
    --touch-action-btn-height: 48px;
    --touch-nav-tab-height: 48px;
    --touch-dialog-btn-height: 48px;
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    /* UI-POLISH-0 Kit Design Tokens */
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-font-xs: 11px;
    --ui-font-sm: 12px;
    --ui-font-md: 13px;
    --ui-font-lg: 15px;
    --ui-font-xl: 18px;
    --ui-ctl-h-sm: 24px;
    --ui-ctl-h-md: 28px;
    --ui-ctl-h-lg: 32px;
    --ui-radius-sm: 4px;
    --ui-radius-md: 6px;
    --ui-radius-lg: 8px;
    /* UI-POLISH-1 Lobby Stage Layout (Single Source of Truth mirrored by lobby_stage_layout) */
    --lobby-stage-left: 8%;
    --lobby-stage-top: 14%;
    --lobby-stage-width: 48%;
    --lobby-stage-height: 72%;
    --lobby-feet-x: 32%;
    --lobby-feet-y: 58%;
    --lobby-panel-left: 62%;
    --lobby-panel-right-inset: 6%;
    --lobby-panel-width: 32%;
    --lobby-panel-top: 18%;
    --lobby-panel-bottom: 82%;
}

/* BUG-012: themed scrollbars everywhere (chat, every window, lists) instead of the browser's
   default white bars. Firefox and Chrome 121+ read scrollbar-width / scrollbar-color (Chrome then
   ignores ::-webkit-scrollbar); Safari reads ::-webkit-scrollbar. A rule that hides a scrollbar
   (scrollbar-width: none on a class) still wins over this universal one. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--theme-scroll-thumb, rgba(212, 175, 55, 0.45)) var(--theme-scroll-track, rgba(0, 0, 0, 0.25));
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--theme-scroll-track, rgba(0, 0, 0, 0.25));
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--theme-scroll-thumb, rgba(212, 175, 55, 0.45));
    border: 2px solid transparent;
    border-radius: 4px;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--theme-scroll-thumb-hover, rgba(240, 201, 70, 0.8));
}

::-webkit-scrollbar-corner {
    background: transparent;
}

.inv-slot.occupied,
.equip-slot.occupied,
.hotbar-slot,
.shop-catalog-row,
.inv-header,
.equip-header,
.status-header,
.settings-header,
.shop-header,
.dialog-header {
    touch-action: none;
}

#ui-root {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    font-family: 'Sarabun', system-ui, sans-serif;
    color: var(--theme-text-primary);
    box-sizing: border-box;
}

#ui-root * {
    box-sizing: border-box;
}

.ui-interactive {
    pointer-events: auto !important;
}

/* ==========================================================================
   UI KIT (UI-POLISH-0: Shared Design Tokens, Base Controls & Component Kit)
   ========================================================================== */

.controller-layout,
.controller-mode {
    --ui-ctl-h-sm: 32px;
    --ui-ctl-h-md: 38px;
    --ui-ctl-h-lg: 44px;
}

.controller-layout .ui-btn,
.controller-mode .ui-btn,
.controller-layout .ui-icon-btn,
.controller-mode .ui-icon-btn,
.controller-layout .ui-tab,
.controller-mode .ui-tab {
    position: relative;
}

.controller-layout .ui-btn::before,
.controller-mode .ui-btn::before,
.controller-layout .ui-icon-btn::before,
.controller-mode .ui-icon-btn::before,
.controller-layout .ui-tab::before,
.controller-mode .ui-tab::before {
    content: "";
    position: absolute;
    inset: -6px -4px;
    min-width: 44px;
    min-height: 44px;
}

/* Zero-specificity base look for raw controls inside #ui-root so browser-default
   white inputs or grey buttons never show, while every existing class wins.
   Only sets visual look (colours, border, radius, font, padding, focus ring) — never sizes or display. */
:where(#ui-root button) {
    padding: 4px var(--ui-space-3);
    background: var(--ui-btn-bg, var(--theme-tab-bg));
    color: var(--theme-text-primary);
    border: 1px solid var(--ui-btn-border, var(--theme-slot-border));
    border-radius: var(--ui-radius-sm);
    font-family: 'Kanit', sans-serif;
    font-size: var(--ui-font-sm);
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease, transform 0.08s ease;
}

:where(#ui-root button:hover:not(:disabled):not(.disabled)) {
    background: var(--ui-btn-bg-hover, var(--theme-tab-active-bg));
    border-color: var(--theme-border);
}

:where(#ui-root button:active:not(:disabled):not(.disabled)) {
    transform: translateY(1px);
}

:where(#ui-root button:focus-visible) {
    outline: none;
    border-color: var(--theme-border-accent);
    box-shadow: var(--ui-focus-ring);
}

:where(#ui-root button:disabled),
:where(#ui-root button.disabled) {
    opacity: 0.42;
    cursor: not-allowed;
    filter: saturate(0.35);
}

:where(#ui-root input) {
    padding: 4px 10px;
    background: var(--ui-input-bg, var(--theme-slot-bg));
    color: var(--theme-text-primary);
    border: 1px solid var(--ui-input-border, var(--theme-slot-border));
    border-radius: var(--ui-radius-sm);
    font-family: 'Sarabun', 'Kanit', sans-serif;
    font-size: var(--ui-font-sm);
    font-variant-numeric: tabular-nums;
    outline: none;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

:where(#ui-root input[type="checkbox"]),
:where(#ui-root input[type="radio"]),
:where(#ui-root input[type="range"]) {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    accent-color: var(--theme-border-accent);
    cursor: pointer;
}

:where(#ui-root select) {
    padding: 4px 24px 4px 10px;
    background: var(--ui-input-bg, var(--theme-slot-bg));
    color: var(--theme-text-primary);
    border: 1px solid var(--ui-input-border, var(--theme-slot-border));
    border-radius: var(--ui-radius-sm);
    font-family: 'Sarabun', 'Kanit', sans-serif;
    font-size: var(--ui-font-sm);
    outline: none;
    cursor: pointer;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

:where(#ui-root textarea) {
    padding: var(--ui-space-2) 10px;
    background: var(--ui-input-bg, var(--theme-slot-bg));
    color: var(--theme-text-primary);
    border: 1px solid var(--ui-input-border, var(--theme-slot-border));
    border-radius: var(--ui-radius-sm);
    font-family: 'Sarabun', 'Kanit', sans-serif;
    font-size: var(--ui-font-sm);
    outline: none;
    resize: vertical;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

:where(#ui-root input::placeholder),
:where(#ui-root textarea::placeholder) {
    color: var(--theme-text-secondary);
    opacity: 0.65;
}

:where(#ui-root input:focus),
:where(#ui-root input:focus-visible),
:where(#ui-root select:focus),
:where(#ui-root select:focus-visible),
:where(#ui-root textarea:focus),
:where(#ui-root textarea:focus-visible) {
    background: var(--ui-input-bg-focus, var(--theme-slot-bg));
    border-color: var(--theme-border-accent);
    box-shadow: var(--ui-focus-ring);
    outline: none;
}

:where(#ui-root input:disabled),
:where(#ui-root select:disabled),
:where(#ui-root textarea:disabled) {
    opacity: 0.45;
    cursor: not-allowed;
}

/* --- Kit Buttons: .ui-btn + variants (.is-primary / .is-secondary / .is-ghost / .is-danger) + sizes (.is-sm / .is-lg) --- */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--ui-ctl-h-md);
    padding: 0 var(--ui-space-3);
    background: var(--ui-btn-bg, var(--theme-tab-bg));
    color: var(--theme-text-primary);
    border: 1px solid var(--ui-btn-border, var(--theme-slot-border));
    border-radius: var(--ui-radius-sm);
    font-family: 'Kanit', sans-serif;
    font-size: var(--ui-font-sm);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease, transform 0.08s ease;
}

.ui-btn:hover:not(:disabled):not(.disabled) {
    background: var(--ui-btn-bg-hover, var(--theme-tab-active-bg));
    border-color: var(--theme-border);
}

.ui-btn:active:not(:disabled):not(.disabled) {
    transform: translateY(1px);
}

.ui-btn:focus-visible {
    outline: none;
    border-color: var(--theme-border-accent);
    box-shadow: var(--ui-focus-ring);
}

.ui-btn:disabled,
.ui-btn.disabled {
    opacity: 0.42;
    cursor: not-allowed;
    filter: saturate(0.35);
}

.ui-btn.is-primary {
    background: var(--ui-btn-primary-bg, var(--theme-tab-active-bg));
    color: var(--ui-btn-primary-text, var(--theme-text-accent));
    border-color: var(--ui-btn-primary-border, var(--theme-border-accent));
}

.ui-btn.is-primary:hover:not(:disabled):not(.disabled) {
    background: var(--ui-btn-primary-bg-hover, var(--theme-tab-active-bg));
    border-color: var(--theme-border-accent);
    box-shadow: 0 0 10px var(--theme-slot-hover-glow);
}

.ui-btn.is-secondary {
    background: var(--ui-btn-bg, var(--theme-tab-bg));
    color: var(--theme-text-primary);
    border-color: var(--theme-border);
}

.ui-btn.is-secondary:hover:not(:disabled):not(.disabled) {
    background: var(--ui-btn-bg-hover, var(--theme-tab-active-bg));
    border-color: var(--theme-border-accent);
    color: var(--theme-text-accent);
}

.ui-btn.is-ghost {
    background: transparent;
    color: var(--theme-text-secondary);
    border-color: transparent;
}

.ui-btn.is-ghost:hover:not(:disabled):not(.disabled) {
    background: var(--ui-btn-bg, var(--theme-tab-bg));
    color: var(--theme-text-primary);
    border-color: var(--ui-btn-border, var(--theme-slot-border));
}

.ui-btn.is-danger {
    background: var(--ui-btn-danger-bg);
    color: var(--ui-btn-danger-text);
    border-color: var(--ui-btn-danger-border);
}

.ui-btn.is-danger:hover:not(:disabled):not(.disabled) {
    background: var(--ui-btn-danger-bg-hover);
    border-color: #f87171;
}

.ui-btn.is-danger.is-ghost {
    background: transparent;
    color: var(--ui-btn-danger-text);
    border-color: var(--ui-btn-danger-border);
}

.ui-btn.is-danger.is-ghost:hover:not(:disabled):not(.disabled) {
    background: var(--ui-btn-danger-bg);
    border-color: #f87171;
}

.ui-btn.is-sm {
    height: var(--ui-ctl-h-sm);
    padding: 0 var(--ui-space-2);
    font-size: var(--ui-font-xs);
}

.ui-btn.is-lg {
    height: var(--ui-ctl-h-lg);
    padding: 0 var(--ui-space-4);
    font-size: var(--ui-font-md);
}

/* --- Icon Button: .ui-icon-btn --- */
.ui-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ui-ctl-h-md);
    height: var(--ui-ctl-h-md);
    padding: 0;
    background: transparent;
    color: var(--theme-text-secondary);
    border: 1px solid transparent;
    border-radius: var(--ui-radius-sm);
    font-family: 'Kanit', sans-serif;
    font-size: var(--ui-font-lg);
    line-height: 1;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease, transform 0.08s ease;
}

.ui-icon-btn:hover:not(:disabled):not(.disabled) {
    background: var(--ui-btn-bg-hover, var(--theme-tab-active-bg));
    color: var(--theme-text-primary);
    border-color: var(--theme-border);
}

.ui-icon-btn:active:not(:disabled):not(.disabled) {
    transform: translateY(1px);
}

.ui-icon-btn:focus-visible {
    outline: none;
    border-color: var(--theme-border-accent);
    box-shadow: var(--ui-focus-ring);
}

.ui-icon-btn:disabled,
.ui-icon-btn.disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.ui-icon-btn.is-sm {
    width: var(--ui-ctl-h-sm);
    height: var(--ui-ctl-h-sm);
    font-size: var(--ui-font-md);
}

.ui-icon-btn.is-danger {
    color: var(--ui-btn-danger-text);
}

.ui-icon-btn.is-danger:hover:not(:disabled):not(.disabled) {
    background: var(--ui-btn-danger-bg-hover);
    color: var(--ui-btn-danger-text);
    border-color: var(--ui-btn-danger-border);
}

/* --- Inputs, Selects & Steppers: .ui-input, .ui-select, .ui-stepper --- */
.ui-input {
    height: var(--ui-ctl-h-md);
    padding: 0 10px;
    background: var(--ui-input-bg, var(--theme-slot-bg));
    color: var(--theme-text-primary);
    border: 1px solid var(--ui-input-border, var(--theme-slot-border));
    border-radius: var(--ui-radius-sm);
    font-family: 'Sarabun', 'Kanit', sans-serif;
    font-size: var(--ui-font-sm);
    font-variant-numeric: tabular-nums;
    outline: none;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.ui-input[type="checkbox"],
.ui-input[type="radio"],
.ui-input[type="range"] {
    height: auto;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    accent-color: var(--theme-border-accent);
}

.ui-input::placeholder {
    color: var(--theme-text-secondary);
    opacity: 0.65;
}

.ui-input:focus,
.ui-input:focus-visible {
    background: var(--ui-input-bg-focus, var(--theme-slot-bg));
    border-color: var(--theme-border-accent);
    box-shadow: var(--ui-focus-ring);
}

.ui-input.is-sm {
    height: var(--ui-ctl-h-sm);
    padding: 0 var(--ui-space-2);
    font-size: var(--ui-font-xs);
}

.ui-input.is-lg {
    height: var(--ui-ctl-h-lg);
    padding: 0 var(--ui-space-3);
    font-size: var(--ui-font-md);
}

.ui-select {
    height: var(--ui-ctl-h-md);
    padding: 0 24px 0 10px;
    background: var(--ui-input-bg, var(--theme-slot-bg));
    color: var(--theme-text-primary);
    border: 1px solid var(--ui-input-border, var(--theme-slot-border));
    border-radius: var(--ui-radius-sm);
    font-family: 'Sarabun', 'Kanit', sans-serif;
    font-size: var(--ui-font-sm);
    outline: none;
    cursor: pointer;
}

.ui-select:focus,
.ui-select:focus-visible {
    border-color: var(--theme-border-accent);
    box-shadow: var(--ui-focus-ring);
}

.ui-stepper {
    display: inline-flex;
    align-items: center;
    height: var(--ui-ctl-h-md);
    background: var(--ui-input-bg, var(--theme-slot-bg));
    border: 1px solid var(--ui-input-border, var(--theme-slot-border));
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
    font-variant-numeric: tabular-nums;
}

.ui-stepper-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ui-ctl-h-md);
    height: 100%;
    padding: 0;
    background: var(--ui-btn-bg, var(--theme-tab-bg));
    color: var(--theme-text-primary);
    border: none;
    font-family: 'Kanit', sans-serif;
    font-size: var(--ui-font-md);
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

.ui-stepper-btn:hover:not(:disabled):not(.disabled) {
    background: var(--ui-btn-bg-hover, var(--theme-tab-active-bg));
    color: var(--theme-text-accent);
}

.ui-stepper-input,
.ui-stepper-val {
    min-width: 36px;
    height: 100%;
    padding: 0 var(--ui-space-2);
    background: transparent;
    color: var(--theme-text-primary);
    border: none;
    text-align: center;
    font-family: 'Kanit', sans-serif;
    font-size: var(--ui-font-sm);
    font-variant-numeric: tabular-nums;
}

/* --- Tabs & Segmented Controls: .ui-tabs + .ui-tab (+ .is-active), overflow "…" pattern, NO scrollbar --- */
.ui-tabs {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 var(--ui-space-2);
    border-bottom: 1px solid var(--theme-slot-border);
    background: rgba(0, 0, 0, 0.12);
    overflow-x: hidden;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-shrink: 0;
}

.ui-tabs::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.ui-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: var(--ui-ctl-h-md);
    padding: 0 10px;
    background: transparent;
    color: var(--theme-text-secondary);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0;
    font-family: 'Kanit', sans-serif;
    font-size: var(--ui-font-sm);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    transition: color 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}

.ui-tab:hover:not(:disabled):not(.disabled) {
    color: var(--theme-text-primary);
    background: var(--theme-tab-bg);
}

.ui-tab.is-active,
.ui-tab.active {
    color: var(--theme-text-accent);
    background: var(--theme-tab-active-bg);
    border-bottom-color: var(--theme-tab-active-border);
}

.ui-tab:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus-ring);
}

/* Overflow "…" trigger and menu for crowded tab strips */
.ui-tab-more {
    margin-left: auto;
    padding: 0 var(--ui-space-2);
    font-weight: 600;
    letter-spacing: 1px;
}

.ui-tabs-overflow-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: var(--ui-space-2);
    z-index: 50;
    min-width: 132px;
    padding: var(--ui-space-1);
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: var(--ui-radius-md);
    box-shadow: var(--theme-shadow);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ui-tabs-overflow-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: var(--ui-ctl-h-md);
    padding: 0 var(--ui-space-2);
    background: transparent;
    color: var(--theme-text-primary);
    border: none;
    border-radius: var(--ui-radius-sm);
    font-family: 'Kanit', sans-serif;
    font-size: var(--ui-font-sm);
    text-align: left;
    cursor: pointer;
}

.ui-tabs-overflow-item:hover,
.ui-tabs-overflow-item.is-active {
    background: var(--theme-tab-active-bg);
    color: var(--theme-text-accent);
}

/* Segmented variant of .ui-tabs (e.g. Party EXP / Loot Share) */
.ui-tabs.is-segmented {
    display: inline-flex;
    padding: 2px;
    gap: 2px;
    background: var(--ui-surface-inset, var(--theme-slot-bg));
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--ui-radius-sm);
}

.ui-tabs.is-segmented .ui-tab {
    height: calc(var(--ui-ctl-h-sm) - 2px);
    padding: 0 var(--ui-space-2);
    border: 1px solid transparent;
    border-radius: 3px;
    font-size: var(--ui-font-xs);
}

.ui-tabs.is-segmented .ui-tab.is-active,
.ui-tabs.is-segmented .ui-tab.active {
    background: var(--theme-tab-active-bg);
    color: var(--theme-text-accent);
    border-color: var(--theme-tab-active-border);
}

/* --- Window Frame: .ui-window / .ui-window-header / .ui-window-title / .ui-window-body / .ui-window-footer --- */
.ui-window {
    position: absolute;
    display: flex;
    flex-direction: column;
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    color: var(--theme-text-primary);
    overflow: hidden;
    user-select: none;
}

.ui-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2);
    min-height: 36px;
    padding: var(--ui-space-2) var(--ui-space-3);
    background: var(--theme-header-bg);
    border-bottom: 1px solid var(--theme-slot-border);
    cursor: grab;
    touch-action: none;
    flex-shrink: 0;
}

.ui-window-header:active {
    cursor: grabbing;
}

.ui-window-title {
    font-family: 'Kanit', sans-serif;
    font-size: var(--ui-font-lg);
    font-weight: 500;
    color: var(--theme-text-accent);
    letter-spacing: 0.3px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-window-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-1);
    flex-shrink: 0;
}

.ui-window-close {
    margin-left: auto;
}

.ui-window-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--ui-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
}

.ui-window-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-3);
    background: rgba(0, 0, 0, 0.14);
    border-top: 1px solid var(--theme-slot-border);
    flex-shrink: 0;
}

.controller-layout .ui-window:not(.dialog-window):not(.death-screen-box),
.controller-mode .ui-window:not(.dialog-window):not(.death-screen-box),
.ui-window.controller-layout:not(.dialog-window):not(.death-screen-box) {
    top: max(8px, var(--safe-area-top, 0px));
    max-height: calc(100vh - var(--safe-area-top, 0px) - var(--safe-area-bottom, 0px) - 16px);
    max-height: calc(100dvh - var(--safe-area-top, 0px) - var(--safe-area-bottom, 0px) - 16px);
    max-width: calc(100vw - var(--safe-area-left, 0px) - var(--safe-area-right, 0px) - 16px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.controller-layout .ui-window-body,
.controller-mode .ui-window-body,
.ui-window.controller-layout .ui-window-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.controller-layout .ui-window-footer,
.controller-mode .ui-window-footer,
.ui-window.controller-layout .ui-window-footer {
    flex-shrink: 0;
}

/* --- Scrollable Pane: .ui-scroll (thin 6 px themed scrollbar, no horizontal scrollbar) --- */
.ui-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--theme-scroll-thumb) var(--theme-scroll-track);
}

.ui-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.ui-scroll::-webkit-scrollbar-track {
    background: var(--theme-scroll-track);
    border-radius: 3px;
}

.ui-scroll::-webkit-scrollbar-thumb {
    background-color: var(--theme-scroll-thumb);
    border-radius: 3px;
}

.ui-scroll::-webkit-scrollbar-thumb:hover {
    background-color: var(--theme-scroll-thumb-hover);
}

/* --- Typography & Data Display Helpers: .ui-section-title, .ui-kv, .ui-badge, .ui-legend, .ui-empty, .ui-hint --- */
.ui-section-title {
    font-family: 'Kanit', sans-serif;
    font-size: var(--ui-font-xs);
    font-weight: 500;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding-bottom: var(--ui-space-1);
    border-bottom: 1px solid var(--theme-slot-border);
}

.ui-kv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2);
    font-size: var(--ui-font-sm);
    font-variant-numeric: tabular-nums;
}

.ui-kv-label {
    color: var(--theme-text-secondary);
    font-size: var(--ui-font-xs);
}

.ui-kv-value {
    color: var(--theme-text-primary);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.ui-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    background: var(--theme-badge-bg);
    color: var(--theme-text-accent);
    border: 1px solid var(--theme-badge-border);
    border-radius: var(--ui-radius-sm);
    font-family: 'Kanit', sans-serif;
    font-size: var(--ui-font-xs);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.ui-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-2);
    font-size: var(--ui-font-xs);
    color: var(--theme-text-secondary);
}

.ui-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-4) var(--ui-space-3);
    text-align: center;
    color: var(--theme-text-secondary);
    font-size: var(--ui-font-sm);
}

.ui-hint {
    font-family: 'Sarabun', sans-serif;
    font-size: var(--ui-font-xs);
    color: var(--theme-text-secondary);
    line-height: 1.35;
}

/* ==========================================================================
   COMPACT HUD (Top-Left)
   Audit #4: Sleek, compact horizontal layout, does not block gameplay.
   ========================================================================== */

.hud-container {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 250px;
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    padding: 8px 12px 6px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: all 0.2s ease;
}

.hud-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hud-player-info {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.hud-level-badge {
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 500;
    background: var(--theme-badge-bg);
    border: 1px solid var(--theme-badge-border);
    color: var(--theme-text-accent);
    padding: 1px 5px;
    border-radius: 4px;
    line-height: 1.2;
}

.hud-player-name {
    font-family: 'Kanit', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--theme-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

.hud-class-name {
    font-size: 11px;
    color: var(--theme-text-secondary);
}

.hud-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.hud-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    border-radius: 4px;
    padding: 2px 7px;
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    line-height: 1.2;
    transition: all 0.15s ease;
}

.hud-btn:hover {
    border-color: var(--theme-border-accent);
    color: var(--theme-text-accent);
    background: rgba(240, 201, 70, 0.22);
}

.hud-btn:active {
    transform: scale(0.96);
}

.hud-btn.active-theme {
    border-color: var(--theme-border-accent);
    background: var(--theme-tab-active-bg);
    color: var(--theme-text-accent);
    font-weight: 700;
}

.theme-warm-light .hud-btn {
    background: #ebe0ce;
    border: 1px solid #9c8369;
    color: #1a1208;
    font-weight: 700;
}

.theme-warm-light .hud-btn:hover {
    background: #dfcfbc;
    border-color: #8c5220;
    color: #7a3804;
}

/* HUD Bars */
.hud-bar-row {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 14px;
}

.hud-bar-label {
    font-family: 'Kanit', sans-serif;
    font-size: 10px;
    font-weight: 600;
    width: 18px;
    color: var(--theme-text-secondary);
    text-align: right;
}

.hud-bar-track {
    flex: 1;
    height: 10px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.hud-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.25s ease-out;
}

.hud-bar-fill.hp {
    background: var(--theme-hp-bar);
}

.hud-bar-fill.mp {
    background: var(--theme-mp-bar);
}

.hud-bar-fill.sp {
    background: var(--theme-sp-bar);
}

.hud-bar-fill.exp {
    background: var(--theme-exp-bar);
}

.hud-bar-val {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Kanit', sans-serif;
    font-size: 9px;
    font-weight: 500;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 1px #000;
    white-space: nowrap;
    pointer-events: none;
}

/* Thin EXP line */
.hud-exp-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
}

.hud-exp-track {
    flex: 1;
    height: 4px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    overflow: hidden;
}

.hud-exp-val {
    font-family: 'Kanit', sans-serif;
    font-size: 9px;
    color: var(--theme-text-secondary);
    min-width: 32px;
    text-align: right;
}

/* ==========================================================================
   INVENTORY WINDOW
   Audit #1, #2, #3, #7, #8, #9, #10
   ========================================================================== */

.inv-window {
    position: absolute;
    width: 320px;
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: opacity 0.15s ease;
    box-sizing: border-box;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
}

.inv-header {
    background: var(--theme-header-bg);
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--theme-slot-border);
    cursor: grab;
    user-select: none;
}

.inv-header:active {
    cursor: grabbing;
}

.inv-title {
    font-family: 'Kanit', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--theme-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.inv-close-btn {
    background: transparent;
    border: none;
    color: var(--theme-text-secondary);
    font-family: 'Kanit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.inv-close-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    color: #ef4444;
}

/* Tabs */
.inv-tabs {
    display: flex;
    padding: 6px 8px 0 8px;
    gap: 3px;
    border-bottom: 1px solid var(--theme-slot-border);
}

.inv-tab {
    flex: 1;
    background: var(--theme-tab-bg);
    border: 1px solid var(--theme-slot-border);
    border-bottom: none;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 4px 4px;
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--theme-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: -1px;
    text-align: center;
    white-space: nowrap;
}

.inv-tab:hover {
    color: var(--theme-text-primary);
    background: var(--theme-tab-active-bg);
}

.inv-tab.active {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-tab-active-border);
    color: var(--theme-text-accent);
    font-weight: 600;
    border-bottom: 2px solid var(--theme-tab-active-border);
}

.item-lock-icon {
    position: absolute;
    top: 1px;
    left: 2px;
    font-size: 11px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9));
    pointer-events: none;
    z-index: 2;
}

.inv-slot.cannot-deposit .item-icon-sprite {
    opacity: 0.85;
}

.tooltip-bound-badge {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    display: inline-block;
    margin: 2px 0;
}

.tooltip-no-deposit {
    color: #ef4444;
    font-size: 11px;
    margin: 2px 0;
}

.tooltip-hint-storage {
    color: #38bdf8 !important;
}

.tooltip-hint-disabled {
    color: #94a3b8 !important;
}

/* Grid & Slots */
.inv-grid-container {
    padding: 12px;
}

.inv-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}

.inv-slot {
    width: 42px;
    height: 42px;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: default;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.inv-slot.occupied {
    cursor: pointer;
}

.inv-slot.occupied:hover {
    border-color: var(--theme-slot-hover-border);
    box-shadow: 0 0 8px var(--theme-slot-hover-glow);
}

.inv-slot-icon,
.item-icon-sprite {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    background-image: url('/assets/sprites/items/items_00.png');
    background-repeat: no-repeat;
    background-size: 512px 512px;
    pointer-events: none;
    flex-shrink: 0;
}

.item-count {
    position: absolute;
    bottom: 1px;
    right: 2px;
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.65);
    padding: 0 3px;
    border-radius: 3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
    pointer-events: none;
    line-height: 1.1;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.inv-slot-count {
    position: absolute;
    bottom: 1px;
    right: 2px;
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.65);
    padding: 0 3px;
    border-radius: 3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
    pointer-events: none;
    line-height: 1.1;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.theme-warm-light .inv-slot-count {
    background: rgba(30, 20, 10, 0.85);
    color: #fff9ed;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Footer: Shilling & Weight */
.inv-footer {
    padding: 8px 12px;
    border-top: 1px solid var(--theme-slot-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--theme-header-bg);
    border-bottom-left-radius: var(--theme-radius);
    border-bottom-right-radius: var(--theme-radius);
}

.inv-shilling {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--theme-text-accent);
}

.inv-soul {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #4df;
}

.inv-coin-icon {
    width: 16px;
    height: 16px;
    display: block;
}

.inv-weight {
    font-size: 11px;
    color: var(--theme-text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.inv-weight strong {
    font-family: 'Kanit', sans-serif;
    color: var(--theme-text-primary);
}

/* ==========================================================================
   TOOLTIP
   Audit #15: English Title, Thai Description, Category, Stats, Weight, Sell
   ========================================================================== */

.item-tooltip {
    position: absolute;
    z-index: 20000;
    width: 210px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    box-sizing: border-box;
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-inner);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85);
    padding: 8px 10px;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    animation: fadeInTooltip 0.12s ease-out;
}

.tooltip-element {
    font-size: 11px;
    font-weight: 600;
    margin-top: 2px;
}

@keyframes fadeInTooltip {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}

.tooltip-title {
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-text-accent);
    line-height: 1.2;
}

.tooltip-badge {
    font-size: 10px;
    font-family: 'Kanit', sans-serif;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tooltip-desc {
    font-family: 'Sarabun', sans-serif;
    font-size: 12px;
    color: var(--theme-text-primary);
    line-height: 1.35;
    margin-top: 2px;
}

.tooltip-stats {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed var(--theme-slot-border);
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--theme-text-secondary);
}

.tooltip-stats span strong {
    color: var(--theme-text-primary);
}


/* ==========================================================================
   SETTINGS WINDOW & CORNER BUTTON
   ========================================================================== */

.corner-settings-btn-wrap {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 900;
}

.corner-settings-btn {
    width: 34px;
    height: 34px;
    border-radius: var(--theme-radius-inner);
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    color: var(--theme-text-primary);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--theme-shadow);
    transition: all 0.15s ease-out;
}

.corner-settings-btn:hover {
    border-color: var(--theme-border-accent);
    color: var(--theme-text-accent);
    transform: rotate(30deg);
}

.settings-window {
    position: absolute;
    width: 280px;
    height: 638px;
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    z-index: 950;
    padding: 0;
    box-sizing: border-box;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
    animation: fadeIn 0.15s ease-out;
}

.settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--theme-header-bg);
    border-bottom: 1px solid var(--theme-border);
    cursor: grab;
    user-select: none;
}

.settings-header:active {
    cursor: grabbing;
}

.settings-title {
    font-family: 'Kanit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-text-accent);
    letter-spacing: 0.5px;
}

.settings-close-btn {
    background: transparent;
    border: none;
    color: var(--theme-text-secondary);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.15s ease-out;
}

.settings-close-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
}

.settings-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: calc(638px - 36px);
    overflow-y: auto;
    box-sizing: border-box;
}

.settings-section-title {
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.settings-theme-list {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
}

.theme-choice {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 10px;
    border-radius: var(--theme-radius-inner);
    background: var(--theme-tab-bg);
    border: 1px solid var(--theme-slot-border);
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease-out;
}

.theme-choice:hover {
    border-color: var(--theme-border-accent);
}

.theme-choice.active {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-tab-active-border);
    box-shadow: 0 0 8px var(--theme-slot-hover-glow);
}

.theme-choice-name {
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.theme-choice.active .theme-choice-name {
    color: var(--theme-text-accent);
}

.theme-choice-desc {
    font-family: 'Sarabun', sans-serif;
    font-size: 11px;
    color: var(--theme-text-secondary);
}

/* TASK-192: Settings > Controls - one row per player / command option: an English label, the
   command shown small, a one-line Thai hint, then the choices / stepper */
.gs-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gs-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px;
    border-radius: var(--theme-radius-inner);
    background: var(--theme-tab-bg);
    border: 1px solid var(--theme-slot-border);
}
.gs-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.gs-label {
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-text-primary);
}
.gs-cmd {
    font-size: 10px;
    color: var(--theme-text-secondary);
    opacity: 0.8;
    white-space: nowrap;
}
.gs-hint {
    font-family: 'Sarabun', sans-serif;
    font-size: 11px;
    color: var(--theme-text-secondary);
}
.gs-choices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.gs-choice,
.gs-step {
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    min-height: 26px;
    padding: 2px 10px;
    border-radius: var(--theme-radius-inner);
    border: 1px solid var(--theme-slot-border);
    background: var(--theme-slot-bg);
    color: var(--theme-text-secondary);
    cursor: pointer;
}
.gs-choice.active {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-tab-active-border);
    color: var(--theme-text-accent);
}
.gs-step:disabled {
    opacity: 0.35;
    cursor: default;
}
.gs-stepper {
    display: flex;
    align-items: center;
    gap: 6px;
}
.gs-step-label {
    font-size: 11px;
    color: var(--theme-text-secondary);
}
.gs-step-val {
    min-width: 34px;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--theme-text-accent);
}
/* the controller / phone Settings tab: every control >= 48 px */
.controller-settings-container .gs-choice,
.controller-settings-container .gs-step {
    min-height: var(--touch-target-min-size, 48px);
    min-width: var(--touch-target-min-size, 48px);
    font-size: var(--touch-font-min-size, 13px);
    touch-action: manipulation;
}
.controller-settings-container .gs-label {
    font-size: 14px;
}
.controller-settings-container .gs-hint {
    font-size: 12px;
}

/* ==========================================================================
   INVENTORY EXTRA STYLES (Drag, Selection & Use Button)
   ========================================================================== */

.inv-slot.occupied {
    cursor: grab;
}

.inv-slot.occupied:active {
    cursor: grabbing;
}

.inv-slot.selected {
    border-color: var(--theme-border-accent) !important;
    box-shadow: 0 0 10px var(--theme-slot-hover-glow);
}

.inv-slot.dragging {
    opacity: 0.4;
}

.inv-use-btn {
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    background: var(--theme-border-accent);
    border: none;
    border-radius: var(--theme-radius-inner);
    padding: 3px 12px;
    cursor: pointer;
    transition: all 0.15s ease-out;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.inv-use-btn:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
}

.inv-use-btn:active {
    transform: translateY(0);
}

.tooltip-hint {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed var(--theme-slot-border);
    font-size: 10px;
    font-family: 'Kanit', sans-serif;
    color: var(--theme-text-accent);
}

/* ==========================================================================
   RESPONSIVE SCALING (Audit #10)
   1280x720 base up to 1920x1080
   ========================================================================== */

@media (min-width: 1600px) {
    .hud-container {
        width: 280px;
        padding: 10px 14px 8px 14px;
    }
    .hud-player-name {
        font-size: 15px;
    }
    .inv-window {
        width: 360px;
    }
    .inv-slot {
        width: 48px;
        height: 48px;
    }
    .inv-title {
        font-size: 16px;
    }
}

/* ==========================================================================
   HOTBAR (BOTTOM CENTER 9 QUICK SLOTS)
   ========================================================================== */

.hotbar-container {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    gap: 6px;
    padding: 6px 8px;
    background: var(--theme-window-bg);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    backdrop-filter: var(--theme-window-backdrop);
    z-index: 100;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.hotbar-container.hotbar-dialog-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(16px);
    visibility: hidden;
}

.hotbar-grid {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.hotbar-item-content,
.hotbar-skill-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.hotbar-count {
    position: absolute;
    bottom: 1px;
    right: 2px;
    font-family: 'Kanit', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.75);
    padding: 0 3px;
    border-radius: 2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
    pointer-events: none;
    line-height: 1.1;
    z-index: 5;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.theme-warm-light .hotbar-count,
.theme-warm-light .item-count {
    background: rgba(30, 20, 10, 0.85);
    color: #fff9ed;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hotbar-slot {
    position: relative;
    width: 38px;
    height: 38px;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
    user-select: none;
}

.hotbar-slot:hover {
    border-color: var(--theme-slot-hover-border);
    box-shadow: 0 0 8px var(--theme-slot-hover-glow);
}

.hotbar-slot:active {
    transform: scale(0.96);
}

.hotbar-key-badge {
    position: absolute;
    top: 1px;
    left: 2px;
    font-family: 'Kanit', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: var(--theme-text-accent);
    line-height: 1;
    z-index: 5;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.hotbar-skill-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: 'Kanit', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #ffffff;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
    letter-spacing: 0.5px;
}

.hotbar-skill-icon-img {
    width: 32px;
    height: 32px;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    pointer-events: none;
}

.theme-warm-light .hotbar-skill-badge {
    background: linear-gradient(135deg, #451a03 0%, #78350f 50%, #9a3412 100%);
}

.hotbar-item-dimmed {
    opacity: 0.35;
    filter: grayscale(80%);
}

.hotbar-slot.disabled {
    opacity: 0.45;
    filter: grayscale(100%);
    cursor: not-allowed;
}

.hotbar-slot.disabled .hotbar-skill-badge {
    filter: grayscale(100%);
}

.hotbar-slot.stance-active,
.controller-skill-btn.stance-active,
.skill-card.stance-active,
.controller-skill-item.stance-active {
    box-shadow: 0 0 0 2px #ffd700, 0 0 8px rgba(255, 215, 0, 0.7);
    border-color: #ffd700 !important;
}

/* SKILL-FRAMES-UI: a skill icon in its frame (skill_icon.rs; the art desk's look B, the
   pictures in icons/skill_frames). Bottom to top: the element background, the type's frame, the
   32 px icon (or the text badge), the type's mark over the icon's edge. The slot's cooldown sweep,
   key badge and count sit above (z-index 5+). Whole multiples of the tiles only: 38 px, 76 px
   (2x, tooltips), 48 px round (controller skill buttons); pixelated, never blurred. */
.skill-frame {
    position: relative;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    pointer-events: none;
}

.skill-frame > img,
.skill-frame > .sf-badge {
    position: absolute;
    image-rendering: pixelated;
    pointer-events: none;
}

.skill-frame > .sf-bg,
.skill-frame > .sf-frame,
.skill-frame > .sf-over {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.skill-frame > .sf-icon,
.skill-frame > .sf-badge {
    left: 3px;
    top: 3px;
    width: 32px;
    height: 32px;
}

.skill-frame > .sf-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.5px;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
}

.skill-frame.x2 {
    width: 76px;
    height: 76px;
}

.skill-frame.x2 > .sf-icon,
.skill-frame.x2 > .sf-badge {
    left: 6px;
    top: 6px;
    width: 64px;
    height: 64px;
}

.skill-frame.x2 > .sf-badge {
    font-size: 22px;
}

.skill-frame.round {
    width: 48px;
    height: 48px;
}

.skill-frame.round > .sf-icon,
.skill-frame.round > .sf-badge {
    left: 8px;
    top: 8px;
}

/* the hotbar slot drops its own border and background for the frame */
.hotbar-slot.framed {
    border: none;
    border-radius: 0;
    background: transparent;
}

.hotbar-slot.framed:not(.stance-active):not(.drag-over):hover {
    box-shadow: none;
}

.hotbar-slot.framed:not(.disabled):hover {
    filter: brightness(1.18) drop-shadow(0 0 3px var(--theme-slot-hover-glow));
}

.hotbar-cooldown-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.72);
    pointer-events: none;
    z-index: 6;
    transition: height 0.1s linear;
}

/* the anti-spam skill delay (TASK-198): one thin light line on every skill it holds, shrinking
   to the left; thinner and lighter than the cooldown fill so the bar stays calm */
.hotbar-delay-sweep {
    position: absolute;
    bottom: 1px;
    left: 0;
    height: 2px;
    background: rgba(255, 244, 214, 0.55);
    border-radius: 1px;
    pointer-events: none;
    z-index: 7;
}

.hotbar-delay-sweep.pad {
    bottom: 7px;
    left: 20%;
}

.hotbar-cooldown-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #fbbf24;
    text-shadow: 0 1px 3px #000, 0 0 2px #000;
    z-index: 7;
    pointer-events: none;
}

.hotbar-cost-warning {
    border-color: #ef4444 !important;
    box-shadow: inset 0 0 6px rgba(239, 68, 68, 0.6) !important;
}

.hotbar-tooltip {
    position: absolute;
    bottom: 56px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 160px;
    max-width: 240px;
    background: var(--theme-window-bg);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-inner);
    padding: 6px 10px;
    color: var(--theme-text-primary);
    box-shadow: var(--theme-shadow);
    backdrop-filter: var(--theme-window-backdrop);
    font-size: 11px;
    pointer-events: none;
    z-index: 200;
    white-space: pre-line;
}

/* SKILL-FRAMES-UI: a skill's icon in its frame at 2x (76 px) beside the text (hotbar and skill
   tooltips) */
.hotbar-tooltip.framed {
    min-width: 220px;
    max-width: 260px;
}

.tooltip-skill-icon {
    float: left;
    width: 76px;
    height: 76px;
    margin: 0 8px 4px 0;
}

.item-tooltip.skill-tooltip {
    width: 240px;
}

/* the text holds the floated icon even when it is short */
.skill-tooltip .tooltip-desc {
    display: flow-root;
}

/* ==========================================================================
   WEB-VERSION-GUARD: "A new version is available." (assets/ui/web/version_guard.js adds it to
   <body> when version.txt differs from the page's build id). Top centre over everything, clear of
   the notch (the HUD's safe-area insets); the controller (joystick, CHAT / SIT, the action
   cluster) is at the bottom of a phone, so it is never covered.
   ========================================================================== */
.version-banner {
    position: fixed;
    top: calc(8px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    z-index: 2147483000;
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    padding: 4px 4px 4px 14px;
    background: rgba(10, 14, 22, 0.95);
    border: 1px solid rgba(240, 201, 70, 0.85);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7);
    color: #f8fafc;
    font-family: 'Kanit', 'Sarabun', system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.2;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    animation: fadeInTooltip 0.2s ease-out;
}

.version-banner-text {
    min-width: 0;
}

.version-banner-reload,
.version-banner-close {
    flex: 0 0 auto;
    min-height: 32px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.version-banner-reload {
    padding: 0 14px;
    border: 1px solid #f0c946;
    background: #f0c946;
    color: #1a1406;
}

.version-banner-close {
    min-width: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: #cbd5e1;
    font-size: 18px;
}

/* touch screens and phone sizes (the HUD's phone tiers): finger-sized buttons, the same 48 px
   the controller HUD uses */
@media (pointer: coarse), (max-width: 820px), (max-height: 500px) {
    .version-banner-reload,
    .version-banner-close {
        min-height: var(--touch-target-min-size, 48px);
    }

    .version-banner-close {
        min-width: var(--touch-target-min-size, 48px);
    }
}

/* ==========================================================================
   STATUS & EQUIPMENT WINDOWS (TASK-083)
   ========================================================================== */

/* HUD Notification Badge */
.hud-btn.has-notification {
    position: relative;
    overflow: visible !important;
}

.hud-btn-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    border: 1.5px solid var(--theme-window-bg, #1a202c);
    box-shadow: 0 0 6px #ef4444;
    animation: pulse-red-badge 2s infinite ease-in-out;
    pointer-events: none;
    z-index: 10;
}

@keyframes pulse-red-badge {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.3); opacity: 1; }
}

/* Status Window */
.status-window {
    position: absolute;
    width: 415px;
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    color: var(--theme-text-primary);
    padding: 12px 16px 14px 16px;
    z-index: 100;
    box-sizing: border-box;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
}

@media (max-height: 500px) {
    .status-window {
        top: 8px !important;
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
        overflow-y: auto;
    }
}
@media (max-width: 500px) {
    .status-window {
        left: 8px !important;
        width: calc(100vw - 16px) !important;
        max-width: 415px;
    }
}

.status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    cursor: grab;
    user-select: none;
}

.status-title {
    font-family: 'Kanit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--theme-text-accent);
    letter-spacing: 0.5px;
}

.status-close-btn {
    background: transparent;
    border: none;
    color: var(--theme-text-secondary);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.15s, background-color 0.15s;
}

.status-close-btn:hover {
    color: var(--theme-text-primary);
    background: rgba(255, 255, 255, 0.1);
}

.status-top-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.status-levels {
    font-size: 13px;
    font-weight: 500;
    color: var(--theme-text-primary);
}

.status-points {
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-text-secondary);
    padding: 2px 8px;
    border-radius: 4px;
}

.status-points.highlight {
    color: var(--theme-text-accent);
    background: var(--theme-badge-bg);
    border: 1px solid var(--theme-badge-border);
    text-shadow: 0 0 8px rgba(240, 201, 70, 0.4);
}

.status-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--theme-border), transparent);
    margin: 8px 0;
}

.status-columns {
    display: flex;
    gap: 16px;
}

.status-col-left {
    width: 155px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.status-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 24px;
    font-size: 12px;
}

.stat-name {
    width: 32px;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.stat-val {
    width: 38px;
    font-weight: 500;
    color: var(--theme-text-primary);
}

.stat-bonus {
    color: #34d399;
    font-size: 11px;
}

/* points a buff adds now (Blessing; TASK-197): a warm gold next to the class bonus */
.stat-buff {
    color: #f5c96b;
    font-size: 11px;
}

.stat-cost {
    width: 38px;
    color: var(--theme-text-secondary);
    font-size: 11px;
    text-align: right;
}

.stat-plus-btn,
.stat-minus-btn {
    font-weight: 600;
}

.status-col-right {
    flex: 1.15;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.status-derived-row, .status-attack-element-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    height: 20px;
    gap: 6px;
}

.derived-name {
    color: var(--theme-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.derived-val, .status-element-val {
    font-weight: 500;
    color: var(--theme-text-primary);
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.status-perfection-banner {
    margin-top: 6px;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    color: var(--theme-text-secondary);
}

.status-perfection-banner.perfect {
    background: rgba(0, 180, 216, 0.15);
    border-color: rgba(0, 180, 216, 0.5);
    color: #00e5ff;
    box-shadow: 0 0 6px rgba(0, 180, 216, 0.3);
}

.status-reset-hint {
    margin-top: 6px;
    font-size: 11px;
    font-style: italic;
    color: var(--theme-text-secondary);
    text-align: center;
}

/* Equipment Window */
.equip-window, .equip-window-drive {
    position: absolute;
    width: 280px;
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    color: var(--theme-text-primary);
    padding: 12px 14px 14px 14px;
    z-index: 100;
    box-sizing: border-box;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
}

.equip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    cursor: grab;
    user-select: none;
}

.equip-title {
    font-family: 'Kanit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--theme-text-accent);
    letter-spacing: 0.5px;
}

.equip-close-btn {
    background: transparent;
    border: none;
    color: var(--theme-text-secondary);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.15s, background-color 0.15s;
}

.equip-close-btn:hover {
    color: var(--theme-text-primary);
    background: rgba(255, 255, 255, 0.1);
}

.equip-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin: 8px 0;
}

.equip-slot {
    height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    user-select: none;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.equip-slot.occupied {
    cursor: pointer;
}

.equip-slot.occupied:hover {
    border-color: var(--theme-slot-hover-border);
    box-shadow: 0 0 8px var(--theme-slot-hover-glow);
}

.equip-slot.drag-over.valid-drop {
    border-color: #22c55e !important;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.6) !important;
    background-color: rgba(34, 197, 94, 0.18) !important;
}

.equip-slot.drag-over.invalid-drop {
    border-color: #ef4444 !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.6) !important;
    background-color: rgba(239, 68, 68, 0.18) !important;
}

.equip-slot.valid-target {
    border: 1px dashed rgba(34, 197, 94, 0.7);
    background-color: rgba(34, 197, 94, 0.06);
}

.equip-icon-wrap {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.25);
}

.equip-icon-sprite {
    width: 32px;
    height: 32px;
    background-image: url('/assets/sprites/items/items_00.png');
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

.equip-placeholder-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-secondary);
    opacity: 0.5;
    font-size: 14px;
}

.equip-name {
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--theme-text-primary);
}

.equip-label {
    font-size: 11px;
    color: var(--theme-text-secondary);
}

.equip-summary {
    display: flex;
    justify-content: space-around;
    margin-top: 8px;
    padding: 6px 0;
    border-top: 1px solid var(--theme-border);
    font-size: 12px;
    color: var(--theme-text-secondary);
}

.equip-summary strong {
    color: var(--theme-text-primary);
    font-size: 13px;
    margin-left: 4px;
}

/* ==========================================================================
   NPC DIALOG & SHOP WINDOWS (TASK-084)
   ========================================================================== */

/* NPC Dialog Window (UI-POLISH-2: kit-styled .ui-window, docked bottom-centre above hotbar and right of chat) */
.dialog-window {
    position: absolute;
    bottom: var(--dialog-bottom, 74px);
    left: var(--dialog-left, 440px);
    width: var(--dialog-w, 540px);
    max-width: var(--dialog-w, 540px);
    margin: 0;
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1.5px solid var(--theme-border-accent);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow), 0 8px 32px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    z-index: 120;
    overflow: hidden;
    animation: dialog-bar-appear 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dialog-bar-appear {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.dialog-header {
    background: var(--theme-header-bg);
    padding: 0 var(--ui-space-3);
    min-height: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--theme-slot-border);
}

.dialog-npc-info {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    min-width: 0;
}

.dialog-npc-name {
    font-family: var(--theme-font);
    font-size: var(--ui-font-lg);
    font-weight: 700;
    color: var(--theme-text-accent);
    letter-spacing: 0.3px;
}

.dialog-npc-title {
    font-family: var(--theme-font);
    font-size: var(--ui-font-xs);
    font-weight: 500;
    color: var(--theme-text-secondary);
    background: var(--theme-badge-bg);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--theme-badge-border);
}

.dialog-close-btn {
    flex-shrink: 0;
}

.dialog-body {
    padding: var(--ui-space-2) var(--ui-space-3);
    display: flex;
    flex-direction: column;
    min-height: 64px;
    max-height: 180px;
    overflow-y: auto;
}

.dialog-text {
    font-family: var(--theme-font);
    font-size: var(--ui-font-md);
    line-height: 1.5;
    color: var(--theme-text-primary);
    word-break: break-word;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dialog-actions {
    padding: var(--ui-space-2) var(--ui-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-1);
    border-top: 1px solid var(--theme-border-subtle);
    background: rgba(0, 0, 0, 0.14);
}

.dialog-footer-say,
.dialog-footer-timeout {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.dialog-next-btn,
.dialog-close-action-btn,
.dialog-submit-btn {
    flex-shrink: 0;
}

.dialog-footer-menu {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-1);
    width: 100%;
    align-items: stretch;
}

.dialog-option-btn {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    gap: var(--ui-space-2);
    padding: 0 var(--ui-space-2);
}

.dialog-option-btn.storage-option {
    border-color: var(--theme-border-accent);
}

.dialog-option-badge {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: var(--theme-tab-bg);
    border: 1px solid var(--theme-border-accent);
    font-size: var(--ui-font-xs);
    font-weight: 700;
    color: var(--theme-text-accent);
    flex-shrink: 0;
}

.dialog-option-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dialog-option-fee {
    font-size: var(--ui-font-xs);
    color: var(--theme-text-secondary);
    flex-shrink: 0;
}

.dialog-footer-input {
    display: flex;
    gap: var(--ui-space-2);
    align-items: center;
    width: 100%;
}

.dialog-input-field {
    flex: 1;
    min-width: 0;
}

/* ==========================================================================
   SHOP WINDOW
   ========================================================================== */
.shop-window {
    position: absolute;
    width: 690px;
    max-width: calc(100vw - 20px);
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow), 0 8px 30px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    z-index: 105;
    box-sizing: border-box;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
    animation: shop-appear 0.2s ease-out;
}

@keyframes shop-appear {
    from {
        opacity: 0;
        transform: scale(0.97);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.shop-header {
    background: var(--theme-header-bg);
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--theme-slot-border);
    cursor: grab;
    user-select: none;
}

.shop-header:active {
    cursor: grabbing;
}

.shop-title-area {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.shop-title {
    font-family: 'Kanit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--theme-text-accent);
}

.shop-subtitle {
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--theme-text-secondary);
}

.shop-close-btn {
    background: transparent;
    border: none;
    color: var(--theme-text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.shop-close-btn:hover {
    color: var(--theme-text-primary);
    background: rgba(255, 255, 255, 0.1);
}

.shop-content {
    display: flex;
    gap: 12px;
    padding: 10px;
}

.shop-catalog-pane {
    width: 350px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.shop-pane-title {
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shop-catalog-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 240px;
    overflow-y: auto;
    padding-right: 3px;
}

.shop-catalog-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: 4px;
    cursor: grab;
    transition: all 0.15s;
    user-select: none;
}

.shop-catalog-row:hover {
    border-color: var(--theme-border-accent);
    background: var(--theme-tab-active-bg);
}

.shop-item-icon-box {
    position: relative;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.shop-item-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.shop-item-name {
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--theme-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-item-meta {
    display: flex;
    gap: 8px;
    font-size: 11px;
}

.shop-item-price {
    font-weight: 600;
    color: #fbbf24;
}

.shop-item-weight {
    color: var(--theme-text-secondary);
}

.shop-item-add-btn {
    padding: 3px 8px;
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--theme-text-accent);
    background: var(--theme-tab-bg);
    border: 1px solid var(--theme-border-accent);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.12s;
    white-space: nowrap;
}

.shop-item-add-btn:hover {
    background: var(--theme-tab-active-bg);
    transform: scale(1.04);
}

/* Right Pane: Cart & Checkout & Sell */
.shop-cart-pane {
    width: 305px;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cart-clear-btn {
    background: transparent;
    border: none;
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    color: var(--theme-text-secondary);
    cursor: pointer;
    text-decoration: underline;
}

.cart-clear-btn:hover {
    color: #ef4444;
}

.shop-cart-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 135px;
    min-height: 85px;
    overflow-y: auto;
    padding: 4px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--theme-slot-border);
    border-radius: 4px;
}

.shop-cart-list.drag-over {
    border-color: #34d399;
    background: rgba(52, 211, 153, 0.1);
}

.cart-empty-text {
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-style: italic;
    color: var(--theme-text-secondary);
    text-align: center;
    margin: auto;
    padding: 10px;
}

.shop-cart-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: 3px;
}

.cart-row-icon-box {
    position: relative;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cart-row-icon-box .item-icon-sprite {
    transform: scale(0.6875);
    transform-origin: center center;
}

.cart-row-name {
    flex: 1 1 80px;
    min-width: 80px;
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--theme-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-amt-controls {
    display: flex;
    align-items: center;
    gap: 2px;
}

.cart-amt-btn {
    width: 17px;
    height: 17px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-tab-bg);
    border: 1px solid var(--theme-slot-border);
    color: var(--theme-text-primary);
    border-radius: 2px;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
}

.cart-amt-btn:hover {
    border-color: var(--theme-border-accent);
    color: var(--theme-text-accent);
}

.cart-amt-text {
    font-size: 11px;
    font-weight: 600;
    min-width: 16px;
    text-align: center;
    color: var(--theme-text-primary);
}

.cart-subtotal {
    font-size: 11px;
    font-weight: 600;
    color: #fbbf24;
    min-width: 38px;
    text-align: right;
}

.cart-del-btn {
    background: transparent;
    border: none;
    color: var(--theme-text-secondary);
    cursor: pointer;
    font-size: 12px;
    padding: 0 2px;
}

.cart-del-btn:hover {
    color: #ef4444;
}

.shop-summary-box {
    padding: 6px 8px;
    background: var(--theme-badge-bg);
    border: 1px solid var(--theme-badge-border);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
}

.shop-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--theme-text-secondary);
}

.shop-summary-row.total-row {
    font-weight: 700;
    font-size: 13px;
    color: var(--theme-text-accent);
    border-top: 1px solid var(--theme-slot-border);
    padding-top: 4px;
    margin-top: 2px;
}

.shop-summary-row.danger {
    color: #ef4444;
    font-weight: 600;
}

.shop-checkout-btn {
    padding: 8px;
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(180deg, #10b981, #059669);
    border: 1px solid #34d399;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.shop-checkout-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.45);
}

.shop-checkout-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: #4b5563;
    border-color: transparent;
    box-shadow: none;
}

/* Sell Area (Drop Zone) */
.shop-sell-drop-zone {
    margin-top: 4px;
    padding: 9px 8px;
    border: 1.5px dashed var(--theme-border-accent);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.15);
    text-align: center;
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    color: var(--theme-text-secondary);
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.shop-sell-drop-zone.active-drag {
    border-color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
    animation: pulse-sell-box 1.5s infinite;
}

.shop-sell-drop-zone.drag-over {
    border-color: #34d399;
    background: rgba(52, 211, 153, 0.2);
    color: #34d399;
    transform: scale(1.02);
}

@keyframes pulse-sell-box {
    0%, 100% { border-color: #fbbf24; }
    50% { border-color: #f59e0b; }
}

.shop-sell-title {
    font-weight: 600;
}

.shop-sell-sub {
    font-size: 10px;
    opacity: 0.8;
}


/* Shop Mode Badge */
.shop-mode-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 7px;
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

.shop-mode-badge.buy {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(52, 211, 153, 0.45);
}

.shop-mode-badge.sell {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.45);
}

/* Sell button */
.shop-sell-btn {
    padding: 8px;
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(180deg, #d97706, #b45309);
    border: 1px solid #f59e0b;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
}

.shop-sell-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.45);
}

.shop-sell-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: #4b5563;
    border-color: transparent;
    box-shadow: none;
}

.shop-catalog-row.sellable-row {
    cursor: pointer;
}

.shop-catalog-row.sellable-row:hover {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
}

/* Responsive Shop Window (<= 640px) */
@media (max-width: 640px) {
    .shop-window {
        width: 95%;
        max-width: 360px;
    }
    .shop-content {
        flex-direction: column;
    }
    .shop-catalog-pane, .shop-cart-pane {
        width: 100%;
    }
    .shop-catalog-list {
        max-height: 180px;
    }
}

/* Dialog & Receipt Responsive at 640px */
@media (max-width: 640px) {
    .receipt-popup {
        right: 8px;
        bottom: 8px;
        width: calc(100% - 16px);
        max-width: 320px;
    }
    .dialog-window {
        bottom: 8px;
        left: 8px;
        right: 8px;
        width: auto;
        max-width: calc(100% - 16px);
    }
    .dialog-body {
        padding: 8px 12px 6px;
        max-height: 140px;
    }
    .dialog-actions {
        padding: 4px 12px 8px;
    }
    .dialog-text {
        font-size: 13px;
    }
    .dialog-option-btn {
        padding: 5px 10px;
        font-size: 12px;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .dialog-window {
        animation: none !important;
    }
    .hotbar-container {
        transition: none !important;
    }
    .dialog-option-btn {
        transition: none !important;
        transform: none !important;
    }
}

/* ==========================================================================
   SELL BASKET & ASMR SELLING (TASK-091)
   ========================================================================== */

/* Sell Basket Grid (legacy grid only when not a .shop-cart-list) */
.sell-basket-grid:not(.shop-cart-list) {
    display: grid;
    grid-template-columns: repeat(4, 40px);
    grid-auto-rows: 40px;
    gap: 6px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius);
    min-height: 140px;
    align-content: start;
    justify-content: center;
}

.basket-slot:not(.shop-cart-row) {
    width: 40px;
    height: 40px;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.basket-slot.empty {
    border: 1px dashed rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.12);
}

.basket-slot.occupied {
    cursor: pointer;
    border-color: var(--theme-border-accent);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.basket-slot.occupied:hover {
    transform: scale(1.08);
    border-color: var(--theme-text-accent);
    box-shadow: 0 4px 12px rgba(240, 201, 70, 0.4);
    z-index: 5;
}

.basket-slot.just-received,
.sell-cart-row.just-received {
    animation: basket-slot-bounce 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes basket-slot-bounce {
    0% { transform: scale(1); }
    40% { transform: scale(1.22); border-color: #fde047; box-shadow: 0 0 12px rgba(253, 224, 71, 0.6); }
    100% { transform: scale(1); }
}

.basket-count {
    position: absolute;
    bottom: 1px;
    right: 2px;
    font-family: 'Kanit', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.85);
    padding: 0 3px;
    border-radius: 2px;
    line-height: 1.1;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.shop-basket-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.basket-receipts-toggle-btn {
    padding: 2px 7px;
    font-family: 'Kanit', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--theme-text-secondary);
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
}

.basket-receipts-toggle-btn:hover {
    color: var(--theme-text-accent);
    border-color: var(--theme-border-accent);
}

/* Flying item animation */
.flying-item-fx {
    position: absolute;
    pointer-events: none;
    z-index: 9999;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fly-to-basket 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fly-to-basket {
    0% {
        transform: translate(0, 0) scale(1.15);
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        transform: translate(var(--dx), var(--dy)) scale(0.95);
        opacity: 0.9;
    }
}

/* Flying coin animation when clicking Sell */
.flying-coin-fx {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff176, #fbc02d 60%, #b78103);
    border: 1px solid #ffe082;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.85), 0 2px 4px rgba(0,0,0,0.5);
    pointer-events: none;
    z-index: 10000;
    animation: fly-coin-to-wallet 0.35s cubic-bezier(0.25, 0.9, 0.3, 1) forwards;
}

@keyframes fly-coin-to-wallet {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(calc(var(--dx) * 0.5), calc(var(--dy) * 0.5 - 28px)) scale(1.25);
        opacity: 1;
    }
    100% {
        transform: translate(var(--dx), var(--dy)) scale(0.5);
        opacity: 0.2;
    }
}

.inv-shilling.pulse-glow {
    animation: purse-pulse 0.35s ease-out;
}

@keyframes purse-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); color: #fff59d; text-shadow: 0 0 10px rgba(255, 215, 0, 0.9); }
    100% { transform: scale(1); }
}

/* Rolling Number Glow */
.shop-rolling-total {
    font-family: 'Kanit', sans-serif;
    font-weight: 700;
    color: var(--theme-text-accent);
    transition: color 0.15s ease;
}

/* Receipt Floating Popup */
.receipt-popup {
    position: absolute;
    bottom: 24px;
    right: 24px;
    width: 290px;
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1.5px solid var(--theme-border-accent);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow), 0 8px 30px rgba(0, 0, 0, 0.6);
    z-index: 150;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: receipt-slide-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes receipt-slide-in {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.receipt-header {
    background: var(--theme-header-bg);
    padding: 7px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--theme-slot-border);
}

.receipt-title-box {
    display: flex;
    align-items: center;
    gap: 8px;
}

.receipt-title {
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--theme-text-accent);
}

.receipt-time {
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    color: var(--theme-text-secondary);
}

.receipt-close-btn {
    background: transparent;
    border: none;
    color: var(--theme-text-secondary);
    font-size: 15px;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 3px;
    transition: all 0.15s;
}

.receipt-close-btn:hover {
    color: var(--theme-text-primary);
    background: rgba(255, 255, 255, 0.1);
}

.receipt-body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 180px;
    overflow-y: auto;
}

.receipt-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    padding: 3px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}

.receipt-line-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--theme-text-primary);
}

.receipt-line-price {
    font-weight: 600;
    color: var(--theme-text-accent);
}

.receipt-footer {
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid var(--theme-slot-border);
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
}

.receipt-footer-row {
    display: flex;
    justify-content: space-between;
    color: var(--theme-text-secondary);
}

.receipt-footer-row.bonus {
    color: #f59e0b;
}

.receipt-total-row {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 14px;
    color: #4ade80;
    margin-top: 2px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Receipt History Panel */
.receipt-history-panel {
    margin-top: 6px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius);
    max-height: 160px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.receipt-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--theme-text-accent);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--theme-slot-border);
}

.receipt-history-card {
    padding: 6px 8px;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
}

.receipt-history-card:hover {
    border-color: var(--theme-border-accent);
    background: var(--theme-tab-active-bg);
}

.receipt-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

.receipt-card-payout {
    color: #4ade80;
}

.receipt-card-lines {
    color: var(--theme-text-secondary);
    font-size: 10px;
    margin-top: 2px;
}

/* Theme B (Warm Light) additions */
.theme-warm-light .sell-basket-grid {
    background: #eedec8;
    border-color: #cbb494;
}
.theme-warm-light .basket-slot {
    background: #fdf8f0;
    border-color: #8c6d48;
}
.theme-warm-light .basket-slot.empty {
    background: #e6d3ba;
    border-color: #baa284;
}
.theme-warm-light .receipt-popup {
    background: #fdf8f0;
    border-color: #8c6d48;
    box-shadow: 0 8px 30px rgba(60, 40, 20, 0.25);
}
.theme-warm-light .receipt-header {
    background: #ebdcc8;
    border-color: #d4be9b;
}
.theme-warm-light .receipt-title {
    color: #734e1c;
}
.theme-warm-light .receipt-total-row {
    color: #15803d;
    border-top: 1px solid rgba(140, 109, 72, 0.25);
}
.theme-warm-light .receipt-footer {
    background: #ebdcc8;
    border-color: #d4be9b;
}
.theme-warm-light .receipt-line {
    border-bottom: 1px dashed rgba(140, 109, 72, 0.2);
}
.theme-warm-light .receipt-footer-row {
    color: #8c6d48;
}
.theme-warm-light .receipt-footer-row.bonus {
    color: #b45309;
}
.theme-warm-light .receipt-time {
    color: #8c6d48;
}

/* TASK-091 / WebUI Settings & Controls */
.settings-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    color: var(--theme-text-primary);
    cursor: pointer;
    margin-top: 6px;
}

.settings-slider-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    color: var(--theme-text-primary);
    margin-top: 6px;
}

.hotbar-key {
    position: absolute;
    top: 1px;
    left: 2px;
    font-family: 'Kanit', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: var(--theme-text-accent);
    line-height: 1;
    z-index: 5;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.currency-icon {
    font-size: 11px;
    font-weight: 700;
    color: var(--theme-text-accent);
    margin-right: 2px;
}

/* =======================================================
   HUD Menu Icons Row & Collapse (TASK-089)
   ======================================================= */
.hud-collapse-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--theme-text-dim);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 0 5px;
    line-height: 18px;
    border-radius: var(--theme-radius-inner);
    transition: all 0.15s ease;
    user-select: none;
}

.hud-collapse-btn:hover {
    color: var(--theme-border-accent);
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--theme-slot-border);
}

.hud-container.hud-collapsed {
    padding-bottom: 8px;
}

.hud-menu-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--theme-slot-border);
}

.hud-menu-btn {
    position: relative;
    width: 32px;
    height: 32px;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
    padding: 0;
}

.hud-menu-btn:hover {
    border-color: var(--theme-slot-hover-border);
    box-shadow: 0 0 8px var(--theme-slot-hover-glow);
    transform: translateY(-1.5px);
}

.hud-menu-btn:active {
    transform: scale(0.96);
}

.hud-menu-btn.active {
    border-color: var(--theme-border-accent);
    box-shadow: 0 0 10px var(--theme-border-accent), inset 0 0 5px var(--theme-border-accent);
    background: rgba(234, 179, 8, 0.18);
}

.hud-menu-btn .menu-icon-sprite {
    width: 22px;
    height: 22px;
    display: flex; align-items: center; justify-content: center; color: var(--theme-text-primary);
    background-size: 154px 22px;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    pointer-events: none;
}

.menu-icon-sprite.icon-bag { background-position: 0px 0px; }
.menu-icon-sprite.icon-equipment { background-position: -22px 0px; }
.menu-icon-sprite.icon-status { background-position: -44px 0px; }
.menu-icon-sprite.icon-skills { background-position: -66px 0px; }
.menu-icon-sprite.icon-quests { background-position: -88px 0px; }
.menu-icon-sprite.icon-map { background-position: -110px 0px; }
.menu-icon-sprite.icon-settings { background-position: -132px 0px; }
.menu-icon-sprite.icon-party { color: var(--theme-text-primary); }
.ui-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; pointer-events: none; }
.controller-btn-label { font-family: 'Kanit', sans-serif; font-size: 8px; font-weight: 600; line-height: 1; letter-spacing: 0; max-width: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--theme-text-secondary); pointer-events: none; }

.hud-menu-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: #ffffff;
    font-family: 'Kanit', sans-serif;
    font-size: 10px;
    font-weight: 700;
    min-width: 14px;
    height: 14px;
    padding: 0 2px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    border: 1px solid #ffffff;
    pointer-events: none;
    z-index: 10;
    line-height: 1;
}

.hud-menu-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.95);
    color: #f8fafc;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid var(--theme-border-accent);
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    z-index: 110;
    transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.hud-menu-btn:hover .hud-menu-tooltip {
    visibility: visible;
    opacity: 1;
}

/* Theme B (Warm Light) HUD menu */
.theme-warm-light .hud-collapse-btn:hover {
    color: #b45309;
    background: rgba(180, 83, 9, 0.08);
}

.theme-warm-light .hud-menu-btn {
    background: #fdf8f0;
    border-color: #8c6d48;
    box-shadow: inset 0 1px 2px rgba(140, 109, 72, 0.2);
}

.theme-warm-light .hud-menu-btn:hover {
    border-color: #b45309;
    box-shadow: 0 3px 6px rgba(100, 60, 20, 0.25);
}

.theme-warm-light .hud-menu-btn.active {
    border-color: #b45309;
    box-shadow: 0 0 8px rgba(180, 83, 9, 0.5), inset 0 0 3px rgba(180, 83, 9, 0.3);
    background: #f4e7d5;
}

.theme-warm-light .hud-menu-tooltip {
    background: #fdf8f0;
    color: #451a03;
    border-color: #8c6d48;
    box-shadow: 0 4px 10px rgba(100, 60, 20, 0.25);
}

@media (max-width: 640px) {
    .hud-menu-btn {
        width: 28px;
        height: 28px;
    }
    .hud-menu-btn .menu-icon-sprite {
        width: 18px;
        height: 18px;
        background-size: 126px 18px;
    }
    .menu-icon-sprite.icon-bag { background-position: 0px 0px; }
    .menu-icon-sprite.icon-equipment { background-position: -18px 0px; }
    .menu-icon-sprite.icon-status { background-position: -36px 0px; }
    .menu-icon-sprite.icon-skills { background-position: -54px 0px; }
    .menu-icon-sprite.icon-quests { background-position: -72px 0px; }
    .menu-icon-sprite.icon-map { background-position: -90px 0px; }
    .menu-icon-sprite.icon-settings { background-position: -108px 0px; }
}

/* =======================================================
   Status Window Interactive Allocation & Preview (TASK-089)
   ======================================================= */
.stat-preview {
    color: #22c55e;
    font-weight: 700;
}

.theme-warm-light .stat-preview {
    color: #15803d;
    font-weight: 700;
}

.stat-cost-pending {
    color: #f59e0b;
    font-size: 11px;
    font-weight: 600;
}

.status-hp-preview {
    font-size: 11px;
    color: var(--theme-text-dim);
    margin-left: 4px;
}

.stat-name, .derived-name {
    position: relative;
    cursor: help;
}

.status-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    background: rgba(15, 23, 42, 0.95);
    color: #f8fafc;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid var(--theme-border-accent);
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    white-space: normal;
    width: 210px;
    pointer-events: none;
    z-index: 120;
    transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.stat-name:hover .status-tooltip,
.derived-name:hover .status-tooltip {
    visibility: visible;
    opacity: 1;
}

.theme-warm-light .status-tooltip {
    background: #fdf8f0;
    color: #451a03;
    border-color: #8c6d48;
    box-shadow: 0 4px 12px rgba(100, 60, 20, 0.3);
}

.stat-btn-group {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: transparent;
}

.stat-adj-btn {
    background: var(--ui-btn-bg, var(--theme-tab-bg));
    border: 1px solid var(--ui-btn-border, var(--theme-slot-border));
    color: var(--theme-text-primary);
}

.stat-adj-btn:hover:not(.disabled):not(:disabled) {
    border-color: var(--theme-border-accent);
    background: var(--ui-btn-bg-hover, var(--theme-tab-active-bg));
    color: var(--theme-text-accent);
}

.stat-adj-btn.disabled,
.stat-adj-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.status-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 4px;
}

.status-footer-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-action-btn {
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--theme-radius-inner);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    line-height: 18px;
}

.status-action-btn.btn-apply.active {
    background: var(--ui-btn-primary-bg, var(--theme-tab-active-bg));
    border-color: var(--ui-btn-primary-border, var(--theme-border-accent));
    color: var(--ui-btn-primary-text, var(--theme-text-accent));
}

.status-action-btn.btn-apply.active:hover:not(:disabled):not(.disabled) {
    background: var(--ui-btn-primary-bg-hover, var(--theme-tab-active-bg));
    border-color: var(--theme-border-accent);
    box-shadow: 0 0 10px var(--theme-slot-hover-glow);
}

.status-action-btn.btn-reset.active {
    background: var(--ui-btn-bg, var(--theme-tab-bg));
    border-color: var(--theme-border);
    color: var(--theme-text-primary);
}

.status-action-btn.btn-reset.active:hover:not(:disabled):not(.disabled) {
    background: var(--ui-btn-bg-hover, var(--theme-tab-active-bg));
    border-color: var(--theme-border-accent);
}

.status-action-btn.disabled,
.status-action-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    background: var(--theme-slot-bg);
    border-color: var(--theme-slot-border);
    color: var(--theme-text-dim);
}

/* Theme B (Warm Light) Status Actions */
.theme-warm-light .status-action-btn.btn-apply.active {
    background: var(--ui-btn-primary-bg, var(--theme-tab-active-bg));
    border-color: var(--ui-btn-primary-border, var(--theme-border-accent));
    color: var(--ui-btn-primary-text, var(--theme-text-accent));
}

.theme-warm-light .status-action-btn.btn-reset.active {
    background: var(--ui-btn-bg, var(--theme-tab-bg));
    border-color: var(--theme-border);
    color: var(--theme-text-primary);
}

/* Theme B (Warm Light) Recent Receipts Styling */
.theme-warm-light .receipt-history-panel {
    background: #eedec8;
    border-color: #cbb494;
}
.theme-warm-light .receipt-history-header {
    border-bottom-color: #cbb494;
    color: #4a2e18;
}
.theme-warm-light .receipt-history-card {
    background: #fdf8f0;
    border-color: #baa284;
    color: #2c1810;
}
.theme-warm-light .receipt-history-card:hover {
    background: #faeedd;
    border-color: #8c6d48;
}
.theme-warm-light .receipt-card-lines {
    color: #7d624c;
}
.theme-warm-light .basket-receipts-toggle-btn {
    background: #e6d3ba;
    border-color: #baa284;
    color: #4a2e18;
}
.theme-warm-light .basket-receipts-toggle-btn:hover {
    background: #fdf8f0;
    border-color: #8c6d48;
    color: #8c4a1e;
}

.dialog-footer-timeout {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

.dialog-close-action-btn {
    padding: 6px 20px;
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-text-accent);
    background: var(--theme-header-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.dialog-close-action-btn:hover {
    background: var(--theme-slot-hover);
    border-color: var(--theme-text-accent);
    color: #ffffff;
}

/* Shop timeout view (TASK-093) */
.shop-timeout-pane {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 220px;
    gap: 16px;
    padding: 24px;
}

.shop-timeout-msg {
    font-family: 'Kanit', sans-serif;
    font-size: 15px;
    color: #e57373;
    font-weight: 500;
}

.shop-timeout-close-btn {
    padding: 8px 24px;
    font-family: 'Kanit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-text-accent);
    background: var(--theme-header-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.shop-timeout-close-btn:hover {
    background: var(--theme-slot-hover);
    border-color: var(--theme-text-accent);
    color: #ffffff;
}

/* Game Feel: Disable text selection across UI (TASK-096) */
#game-container,
#ui-root,
.theme-container,
.hud-layer,
.window {
    user-select: none;
    -webkit-user-select: none;
}

input,
textarea {
    user-select: text;
    -webkit-user-select: text;
}


/* ==========================================================================
   GAME CURSORS (TASK-096)
   ========================================================================== */

:root {
    --cursor-default: url('cursors/default.png') 0 0, auto;
    --cursor-pointer: url('cursors/pointer.png') 4 2, pointer;
    --cursor-grab: url('cursors/grab.png') 16 16, grab;
    --cursor-grabbing: url('cursors/grabbing.png') 16 16, grabbing;
    --cursor-attack: url('cursors/attack.png') 2 2, crosshair;
    --cursor-talk: url('cursors/talk.png') 6 6, pointer;
    --cursor-pickup: url('cursors/pickup.png') 16 16, pointer;
    --cursor-aim: url('cursors/aim.png') 16 16, crosshair;
}

body,
#game-container,
#bevy-canvas,
#ui-root,
.theme-container {
    cursor: var(--cursor-default);
}

button,
.btn,
.dialog-option-btn,
.dialog-next-btn,
.dialog-choice-btn,
.window-close-btn,
.inventory-tab-btn,
.hud-tab-btn,
.corner-settings-btn,
.hud-btn,
.nav-btn,
.dialog-close-btn,
a,
[role="button"],
.clickable {
    cursor: var(--cursor-pointer);
}

.item-slot:not(.empty-slot),
.inventory-slot:not(.empty-slot),
.inventory-item,
.equip-slot.has-item,
.skill-tree-node.learned,
.shop-catalog-row,
.shop-cart-item,
.hotbar-slot:not(.empty-slot) {
    cursor: var(--cursor-grab);
}

body.is-dragging,
body.is-dragging *,
.dragging-active,
.dragging-active * {
    cursor: var(--cursor-grabbing) !important;
}

body.mode-ground-aim,
body.mode-ground-aim #bevy-canvas {
    cursor: var(--cursor-aim);
}

body.mode-monster-hover,
body.mode-monster-hover #bevy-canvas {
    cursor: var(--cursor-attack);
}

/* Game Drag & Drop (TASK-096) */
.drag-ghost-floating {
    position: absolute;
    pointer-events: none;
    z-index: 99999;
    background-image: url('assets/sprites/items.png');
    background-repeat: no-repeat;
    image-rendering: pixelated;
    transform: translate(-50%, -50%) scale(1.5);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7));
    opacity: 1.0;
}

.hotbar-slot.valid-target {
    border-color: rgba(56, 189, 248, 0.6) !important;
    background-color: rgba(56, 189, 248, 0.08) !important;
}

.hotbar-slot.drag-over.valid-drop {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.7) !important;
    background-color: rgba(56, 189, 248, 0.22) !important;
}

.inv-slot.valid-target {
    border-color: rgba(234, 179, 8, 0.5) !important;
}

.inv-slot.drag-over.valid-drop {
    border-color: #eab308 !important;
    box-shadow: 0 0 10px rgba(234, 179, 8, 0.6) !important;
    background-color: rgba(234, 179, 8, 0.15) !important;
}

.shop-cart-list.drag-over.valid-drop {
    border-color: #22c55e !important;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.6) !important;
    background-color: rgba(34, 197, 94, 0.12) !important;
}

/* ==========================================================================
   DARK THEME DIALOG POLISH (TASK-096)
   Clean, muted dark styling matching Theme B structure without harsh yellow borders
   ========================================================================== */
.theme-dark-glass .dialog-window {
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75), 0 0 1px rgba(255, 255, 255, 0.15);
}

.theme-dark-glass .dialog-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.theme-dark-glass .dialog-npc-name {
    color: #fcd34d;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.theme-dark-glass .dialog-npc-title {
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-dark-glass .dialog-body {
    border-top: none;
}

.theme-dark-glass .dialog-text {
    color: #f1f5f9;
}

.theme-dark-glass .dialog-actions {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.18);
}

.theme-dark-glass .dialog-option-btn {
    background: rgba(30, 41, 59, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #f1f5f9;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
}

.theme-dark-glass .dialog-option-btn:hover:not(:disabled) {
    background: rgba(51, 65, 85, 0.85);
    border-color: rgba(255, 255, 255, 0.28);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}

.theme-dark-glass .dialog-option-btn:active:not(:disabled) {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.2);
}

.theme-dark-glass .dialog-option-badge {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
}

.theme-dark-glass .dialog-next-btn {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #f1f5f9;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.theme-dark-glass .dialog-next-btn:hover:not(:disabled) {
    background: rgba(51, 65, 85, 0.9);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}

.theme-dark-glass .dialog-close-action-btn {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #f1f5f9;
}

.theme-dark-glass .dialog-close-action-btn:hover:not(:disabled) {
    background: rgba(51, 65, 85, 0.9);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
}

.theme-dark-glass .dialog-submit-btn {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #f1f5f9;
}

.theme-dark-glass .dialog-submit-btn:hover:not(:disabled) {
    background: rgba(51, 65, 85, 0.9);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
}

/* ========================================================================
   TASK-100: Web Lobby Styles
   ======================================================================== */

.lobby-screen-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    user-select: none;
    z-index: 1000;
}

.lobby-top-brand {
    position: absolute;
    top: 40px;
    text-align: center;
    pointer-events: auto;
}

.lobby-main-title {
    font-family: 'Kanit', sans-serif;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 0;
    color: #ffd700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.9);
}

.lobby-sub-title {
    font-family: 'Kanit', sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 6px;
    color: #e2e8f0;
    text-transform: uppercase;
    margin-top: 4px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.lobby-card {
    background: rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7), 0 0 15px rgba(255, 215, 0, 0.15);
    padding: 28px 32px;
    pointer-events: auto;
    color: #f8fafc;
}

.login-card-box {
    width: 340px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.queue-card-box {
    width: 380px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    text-align: center;
}

.queue-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.queue-card-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: 0.5px;
}

.queue-card-badge {
    background: rgba(234, 179, 8, 0.2);
    border: 1px solid rgba(234, 179, 8, 0.6);
    color: #facc15;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.queue-thai-desc {
    font-size: 13px;
    line-height: 1.5;
    color: #cbd5e1;
    text-align: center;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px 14px;
    width: 100%;
    box-sizing: border-box;
}

.queue-metrics-row {
    display: flex;
    gap: 12px;
    width: 100%;
    justify-content: space-between;
}

.queue-metric-box {
    flex: 1;
    background: rgba(30, 41, 59, 0.75);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 8px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.queue-metric-label {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.queue-metric-value {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.queue-metric-value.position-val {
    color: #38bdf8;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

.queue-metric-value.wait-val {
    color: #facc15;
    text-shadow: 0 0 10px rgba(250, 204, 21, 0.4);
}

.queue-loading-status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #94a3b8;
    margin: 4px 0;
}

.queue-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 215, 0, 0.2);
    border-top-color: #ffd700;
    border-radius: 50%;
    animation: queue-spin 1s linear infinite;
}

@keyframes queue-spin {
    to { transform: rotate(360deg); }
}

.queue-leave-btn {
    width: 100%;
    min-height: 48px;
    margin-top: 4px;
}

.lobby-field-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lobby-field-label {
    font-size: 13px;
    font-weight: 600;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.lobby-text-input:not(.ui-input) {
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 10px 12px;
    color: #ffffff;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.lobby-text-input:not(.ui-input):focus {
    border-color: #ffd700;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.lobby-field-hint {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 3px;
    letter-spacing: 0.2px;
}

.lobby-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.lobby-checkbox-input {
    width: 16px;
    height: 16px;
    accent-color: #eab308;
    cursor: pointer;
}

.lobby-checkbox-label {
    font-size: 13px;
    color: #cbd5e1;
    cursor: pointer;
}

.lobby-error-msg {
    background: rgba(220, 38, 38, 0.25);
    border: 1px solid rgba(239, 68, 68, 0.5);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    color: #fca5a5;
    text-align: center;
}

.lobby-credit-footer {
    position: absolute;
    bottom: 20px;
    font-size: 13px;
    color: #94a3b8;
    letter-spacing: 1px;
    pointer-events: auto;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.lobby-version-tag {
    position: absolute;
    bottom: 18px;
    right: 24px;
    font-size: 12px;
    color: #64748b;
    letter-spacing: 0.5px;
    pointer-events: auto;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Character Select Screen (TASK-100) */
.lobby-select-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    padding: 36px 20px 24px;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
    pointer-events: none;
}

.lobby-select-container > * {
    pointer-events: auto;
}

.lobby-slots-row {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.lobby-slot-card {
    position: absolute;
    top: 64%;
    transform: translate(-50%, 0);
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 16px 20px;
    width: 220px;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    user-select: none;
    pointer-events: auto;
}

.lobby-slot-card:hover {
    border-color: rgba(255, 215, 0, 0.4);
    transform: translate(-50%, -4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6);
}

.lobby-slot-card.selected {
    border-color: #ffd700;
    background: rgba(30, 41, 59, 0.85);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.35), inset 0 0 12px rgba(255, 215, 0, 0.12);
    transform: translate(-50%, -6px);
}

.slot-header-badge {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
    margin-bottom: 8px;
    font-weight: 700;
}

.lobby-slot-card.selected .slot-header-badge {
    color: #ffd700;
}

.slot-card-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.slot-char-name {
    font-size: 18px;
    font-weight: 700;
    color: #f8fafc;
}

.slot-char-details {
    font-size: 13px;
    color: #cbd5e1;
}

.slot-char-map {
    font-size: 12px;
    color: #64748b;
}

.slot-empty-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 70px;
    gap: 8px;
}

.slot-empty-label {
    font-size: 13px;
    font-style: italic;
    color: #64748b;
}

.lobby-slot-create-btn {
    flex-shrink: 0;
}

.lobby-slot-create-btn-unused {
    background: rgba(234, 179, 8, 0.12);
    border: 1px dashed rgba(234, 179, 8, 0.5);
    color: #ffd700;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    outline: none;
}

.lobby-slot-create-btn-unused:hover {
    background: rgba(234, 179, 8, 0.28);
    border-style: solid;
    transform: scale(1.03);
}

.lobby-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 720px;
    margin-bottom: 16px;
    gap: 16px;
}

.lobby-actions-right {
    display: flex;
    gap: 12px;
    align-items: center;
}

.lobby-danger-btn {
    background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%);
    border: 1px solid #f87171;
    color: #ffffff;
    border-radius: 6px;
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.lobby-danger-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.5);
    transform: translateY(-1px);
}

.lobby-danger-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(0.6);
}

/* Modal Confirmation */
.lobby-modal-backdrop {
    position: fixed;
    inset: 0;
    /* BUG-010: .lobby-screen-overlay is pointer-events: none and it inherits; without this the
       confirm box took no clicks or typing and its blur covered the screen until a reload */
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.lobby-modal-content {
    background: rgba(15, 23, 42, 0.95);
    border: 2px solid rgba(239, 68, 68, 0.5);
    border-radius: 14px;
    padding: 26px 30px;
    width: 440px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(239, 68, 68, 0.2);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #f87171;
}

.modal-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #cbd5e1;
}

.modal-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lobby-delete-confirm-input {
    width: 100%;
    box-sizing: border-box;
}

.modal-btn-row {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 6px;
}

/* Character Creation Screen (TASK-100) */
.lobby-create-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    padding: 36px 20px 24px;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
    pointer-events: none;
}

.lobby-create-container > * {
    pointer-events: auto;
}

.lobby-create-layout {
    display: flex;
    width: 100%;
    max-width: 1100px;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    position: relative;
    pointer-events: none;
}

.lobby-create-preview-space {
    flex: 1;
    min-width: 320px;
}

.lobby-create-card {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    border: 2px solid rgba(255, 215, 0, 0.35);
    border-radius: 16px;
    padding: 28px 32px;
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(255, 215, 0, 0.15);
    pointer-events: auto;
    margin-right: 40px;
}

.lobby-name-error {
    color: var(--ui-btn-danger-text, #f87171);
    font-weight: 500;
    margin-top: 2px;
}

.lobby-validation-warning-unused {
    font-size: 12px;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 5px;
    padding: 6px 10px;
    margin-top: -10px;
}

.lobby-gender-toggle-row {
    display: flex;
    gap: 12px;
    width: 100%;
}

.lobby-gender-btn {
    flex: 1;
    padding: 10px;
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
    text-align: center;
}

.lobby-gender-btn:hover {
    border-color: rgba(255, 215, 0, 0.5);
    color: #f8fafc;
}

.lobby-gender-btn.active {
    background: rgba(234, 179, 8, 0.2);
    border-color: #ffd700;
    color: #ffd700;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.25);
}

/* ==========================================================================
   TASK-108: CONTROLLER MODE & MOBILE LAYOUT STYLES
   ========================================================================== */

/* F1 Full UI Hide (TASK-108 §5) */
#ui-root.f1-hidden {
    display: none !important;
}

/* Web Command Box (TASK-108 §5 - Above UI, does not hide HUD) */
.web-command-box {
    position: absolute;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    left: calc(20px + env(safe-area-inset-left, 0px));
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(14, 18, 26, 0.95);
    border: 1px solid #f0c946;
    border-radius: 8px;
    padding: 6px 12px;
    width: clamp(280px, 45vw, 460px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    pointer-events: auto;
}

.web-command-prompt {
    font-family: 'Kanit', monospace;
    font-size: 16px;
    font-weight: 700;
    color: #f0c946;
}

.web-command-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #f8fafc;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
    font-size: 14px;
}

.web-command-send-btn {
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.web-command-send-btn:hover {
    background: #1d4ed8;
}

.web-command-close-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 6px;
    line-height: 1;
}

.web-command-close-btn:hover {
    color: #ef4444;
}

/* Controller Root Overlay */
.controller-root {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

/* 1. Compact HUD (Top Left) */
.controller-hud-compact {
    position: absolute;
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: calc(10px + env(safe-area-inset-left, 0px));
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 100;
    box-shadow: var(--theme-shadow);
    max-width: 220px;
}

.controller-hud-badge {
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--theme-text-accent);
}

.controller-hud-bars {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.controller-bar-track {
    width: 160px;
    height: 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.controller-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.2s ease-out;
}

.controller-bar-fill.hp {
    background: var(--theme-hp-bar);
}

.controller-bar-fill.mp {
    background: var(--theme-mp-bar);
}

.controller-bar-fill.sp {
    background: var(--theme-sp-bar);
}

.controller-bar-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Kanit', sans-serif;
    font-size: 8px;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
    pointer-events: none;
}

/* 2. Top-Right Menu & Fullscreen Buttons (≥ 48px, TASK-166 Bug #9) */
.controller-top-right {
    position: absolute;
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: calc(10px + env(safe-area-inset-right, 0px));
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 8px;
}

.controller-btn-fullscreen {
    min-width: 48px;
    min-height: 48px;
    width: 48px;
    height: 48px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    color: var(--theme-text-primary);
    font-size: 20px;
    cursor: pointer;
    box-shadow: var(--theme-shadow);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    transition: all 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
}

.controller-btn-fullscreen:active {
    transform: scale(0.96);
    border-color: var(--theme-border-accent);
}

/* Same button on the login / character screens, touch screens only (BUG-007) */
.lobby-btn-fullscreen {
    display: none;
}

@media (pointer: coarse) {
    .lobby-btn-fullscreen {
        display: flex;
        position: fixed;
        top: calc(10px + env(safe-area-inset-top, 0px));
        right: calc(10px + env(safe-area-inset-right, 0px));
        z-index: 1001; /* above .lobby-screen-overlay */
        width: 48px;
        height: 48px;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
        background: var(--theme-slot-bg);
        border: 1px solid var(--theme-border);
        border-radius: 8px;
        color: var(--theme-text-primary);
        font-size: 20px;
        cursor: pointer;
        box-shadow: var(--theme-shadow);
        pointer-events: auto;
        user-select: none;
        -webkit-user-select: none;
    }
}

/* iPhone has no full screen for web pages: hint card for the home screen icon (BUG-007) */
.fullscreen-hint-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: auto;
}

.fullscreen-hint-card {
    max-width: 380px;
    max-height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    background: var(--theme-window-bg);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
}

.fullscreen-hint-title {
    margin: 0;
    font-family: 'Kanit', sans-serif;
    font-size: 16px;
    color: #f0c946;
}

.fullscreen-hint-text {
    margin: 0;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--theme-text-primary);
}

.fullscreen-hint-ok {
    min-width: 96px;
    min-height: 48px;
    border: 1px solid var(--theme-border-accent);
    border-radius: 8px;
    background: var(--theme-slot-bg);
    color: var(--theme-text-primary);
    font-family: 'Kanit', sans-serif;
    font-size: 15px;
    cursor: pointer;
}

.controller-btn-menu {
    width: 71px;
    min-width: 71px;
    height: 48px;
    box-sizing: border-box;
    background: var(--theme-slot-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    color: var(--theme-text-primary);
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 0 6px;
    gap: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--theme-shadow);
    transition: all 0.15s ease;
}

.controller-btn-menu:active {
    transform: scale(0.96);
    border-color: var(--theme-border-accent);
}

/* 3. Gamepad Hints Overlay (ControllerGamepad mode) */
.gamepad-hints-overlay {
    position: absolute;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 90;
    pointer-events: none;
}

.gamepad-hints-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    background: rgba(10, 14, 22, 0.85);
    border: 1px solid var(--theme-border);
    border-radius: 20px;
    padding: 6px 14px;
    box-shadow: var(--theme-shadow);
    backdrop-filter: blur(8px);
}

.gamepad-badge {
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--theme-text-accent);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 2px 6px;
}

/* 4. Virtual Floating Joystick (Bottom-Left Activation Zone, TASK-166 Bug #2) */
.joystick-touch-zone {
    position: absolute;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    left: calc(16px + env(safe-area-inset-left, 0px));
    width: 240px;
    height: 240px;
    touch-action: none;
    pointer-events: auto;
    z-index: 40;
}

.joystick-base {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(20, 26, 38, 0.45);
    border: 2px solid rgba(240, 201, 70, 0.4);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.5), inset 0 0 12px rgba(240, 201, 70, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.15s ease;
}

.joystick-stick {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fce99f 0%, #d4af37 60%, #9e7b16 100%);
    border: 2px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7), 0 0 10px rgba(240, 201, 70, 0.6);
    pointer-events: none;
}

/* 5. Bottom Left Utility Buttons */
.controller-bottom-left {
    position: absolute;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: calc(16px + env(safe-area-inset-left, 0px));
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 80;
}

.controller-btn-util {
    min-width: 50px;
    min-height: 50px;
    height: 50px;
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 0 10px;
    border-radius: 10px;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    color: var(--theme-text-primary);
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--theme-shadow);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    transition: all 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
}

.controller-btn-util:active {
    transform: scale(0.94);
    border-color: var(--theme-border-accent);
}

.controller-btn-util.item-btn {
    border-color: rgba(240, 201, 70, 0.4);
    color: var(--theme-text-accent);
}

/* 6. Action Buttons Cluster (Bottom Right) */
.controller-action-cluster {
    position: absolute;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
    width: 280px;
    height: 240px;
    z-index: 80;
}

/* Attack Button [ ตี ] (≥ 68px) */
.controller-attack-btn {
    position: absolute;
    left: 130px;
    top: 78px;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: rgba(16, 20, 30, 0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); flex-direction: column; gap: 2px;
    border: 1.5px solid rgba(240, 201, 70, 0.55);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    z-index: 10;
}

.controller-attack-btn:active {
    transform: scale(0.92);
    transform: scale(0.95); filter: brightness(1.18); border-color: var(--theme-border-accent); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

/* Skill Buttons (4 buttons arranged in an arc, all ≥ 48px) */
.controller-skill-btn {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--theme-slot-bg);
    border: 2px solid var(--theme-border);
    color: var(--theme-text-primary);
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--theme-shadow);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.1s ease, border-color 0.15s ease;
    z-index: 5;
}

.controller-skill-btn:active {
    transform: scale(0.92);
    border-color: var(--theme-border-accent);
}

.controller-skill-btn.empty {
    opacity: 0.35;
    border-style: dashed;
    cursor: default;
}

.controller-skill-btn.on-cooldown {
    opacity: 0.65;
    cursor: not-allowed;
}

.skill-cooldown-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    pointer-events: none;
    transition: height 0.1s linear;
}

.skill-label {
    position: relative;
    z-index: 2;
}

.controller-skill-icon-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.controller-skill-icon-wrap .skill-icon-img {
    width: 32px;
    height: 32px;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    pointer-events: none;
}

/* SKILL-FRAMES-UI: a skill in its 48 px round frame is the whole button: no CSS border, plate or
   blur; the cooldown fill, the skill-delay line and the pad badge stay above it */
.controller-skill-btn.framed {
    border: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.controller-skill-btn.framed:not(.stance-active) {
    box-shadow: none;
}

.controller-skill-btn.framed .skill-cooldown-overlay {
    z-index: 3;
}

.controller-skill-btn.framed .hotbar-delay-sweep {
    z-index: 4;
}

.controller-btn-util .quick-slot-skill-icon {
    width: 28px;
    height: 28px;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    pointer-events: none;
}

/* SKILL-FRAMES-UI: a quick slot skill in its 38 px frame; the button stays 50 px wide (the
   CHAT / SIT / items row of the compact HUD, compact_hud.rs) */
.controller-btn-util.framed {
    padding: 0 5px;
}

/* Skill Button positions in arc */
.controller-skill-btn.pos-skill-1 {
    left: 88px;
    top: 16px;
}

.controller-skill-btn.pos-skill-2 {
    left: 148px;
    top: 16px;
}

.controller-skill-btn.pos-skill-3 {
    left: 68px;
    top: 92px;
}

.controller-skill-btn.pos-skill-4 {
    left: 72px;
    top: 164px;
}

/* Page Toggle Button */
.controller-page-btn {
    position: absolute;
    left: 8px;
    top: 44px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-border);
    color: var(--theme-text-accent);
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--theme-shadow);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.1s ease;
    user-select: none;
    -webkit-user-select: none;
    z-index: 5;
}

.controller-page-btn:active {
    transform: scale(0.92);
}

/* Target Switch Button */
.controller-target-btn {
    position: absolute;
    left: 135px;
    top: 164px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(16, 20, 30, 0.76);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: var(--theme-text-primary);
    font-family: 'Kanit', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 0;
    cursor: pointer;
    box-shadow: var(--theme-shadow);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.1s ease;
    user-select: none;
    -webkit-user-select: none;
    z-index: 10;
}

.controller-target-btn:active {
    transform: scale(0.92);
}

/* Untarget Button (TARGET-CANCEL): next to TARGET, only while a target is locked */
.controller-untarget-btn {
    position: absolute;
    left: 210px;
    top: 164px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(161, 98, 7, 0.35);
    border: 2px solid #facc15;
    color: #fef08a;
    font-family: 'Kanit', sans-serif;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--theme-shadow);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.1s ease;
    user-select: none;
    -webkit-user-select: none;
    z-index: 10;
}

.controller-untarget-btn:active {
    transform: scale(0.92);
}

/* Interact / Pickup Button */
.controller-interact-btn {
    position: absolute;
    left: 214px;
    top: 90px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(16, 20, 30, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    flex-direction: column;
    gap: 1px;
    padding: 0;
    border: 1.5px solid rgba(110, 231, 183, 0.55);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-family: 'Kanit', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.1s ease, filter 0.1s ease, border-color 0.12s ease;
    z-index: 10;
}

@keyframes interact-pulse {
    0% { transform: scale(1); box-shadow: 0 4px 14px rgba(5, 150, 105, 0.65); }
    50% { transform: scale(1.04); box-shadow: 0 6px 20px rgba(16, 185, 129, 0.85); }
    100% { transform: scale(1); box-shadow: 0 4px 14px rgba(5, 150, 105, 0.65); }
}

/* Gamepad Badges & Hints Overlay */
.icon-img-tag { display: none; }
.controller-top-right .controller-btn-menu { gap: 4px; }
.controller-bottom-left .controller-btn-util { width: 50px; min-width: 50px; min-height: 50px; height: 50px; padding: 0; border-radius: 50%; background: rgba(16, 20, 30, 0.76); border: 1px solid rgba(255, 255, 255, 0.22); flex-direction: column; gap: 1px; }
.controller-bottom-left .controller-btn-util.framed { padding: 0 5px; }
.controller-bottom-left .controller-btn-util:active { transform: scale(0.96); filter: brightness(1.18); border-color: var(--theme-border-accent); }
/* Unread chat lines (never the System channel; opening the chat clears it): a small count on the CHAT button, "9+" above 9 */
.controller-bottom-left .controller-btn-util[data-action="chat"] { position: relative; }
.controller-chat-unread {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 8px;
    background: var(--theme-danger, #ef4444);
    border: 1px solid rgba(16, 20, 30, 0.9);
    color: #fff;
    font-family: 'Kanit', sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    pointer-events: none;
    z-index: 20;
}
.controller-action-cluster .controller-target-btn:active { transform: scale(0.95); filter: brightness(1.18); border-color: var(--theme-border-accent); }
.controller-action-cluster .controller-untarget-btn { background: rgba(16, 20, 30, 0.76); border: 1px solid rgba(255, 255, 255, 0.24); color: var(--theme-text-secondary); }
.controller-action-cluster .controller-untarget-btn:active { transform: scale(0.95); filter: brightness(1.18); border-color: var(--theme-border-accent); }
.controller-action-cluster .controller-interact-btn:active { transform: scale(0.95); filter: brightness(1.18); border-color: #6ee7b7; }
.controller-action-cluster .controller-page-btn { border: 1px solid var(--theme-border); color: var(--theme-text-accent); }
.controller-action-cluster .controller-page-btn:active { transform: scale(0.95); filter: brightness(1.18); border-color: var(--theme-border-accent); }
.btn-gamepad-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #1e293b;
    border: 1px solid #94a3b8;
    color: #f8fafc;
    font-family: monospace;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    z-index: 20;
}

.gamepad-hints-overlay {
    position: absolute;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 75;
    pointer-events: none;
}

.gamepad-hints-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 8px;
    padding: 6px 14px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.gamepad-badge {
    color: #cbd5e1;
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 600;
}

/* 7. Controller Full-Screen Tabbed Menu (TASK-109 Item 3) */
.controller-tabbed-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: stretch;
    justify-content: center;
    z-index: 950;
    padding-top: var(--safe-area-top);
    padding-bottom: var(--safe-area-bottom);
    padding-left: var(--safe-area-left);
    padding-right: var(--safe-area-right);
    box-sizing: border-box;
}

.controller-tabbed-window {
    width: 100%;
    max-width: 900px;
    height: 100%;
    background: var(--theme-window-bg);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--theme-shadow);
}

.controller-tabbed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: var(--touch-target-min-size, 48px);
    padding: 0 8px;
    background: var(--theme-header-bg);
    border-bottom: 1px solid var(--theme-slot-border);
    box-sizing: border-box;
    flex-shrink: 0;
}

.controller-tab-list {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1;
    align-items: center;
}

.controller-tab-list::-webkit-scrollbar {
    display: none;
}

.controller-tab-btn {
    min-height: var(--touch-target-min-size, 48px);
    min-width: 56px;
    padding: 0 14px;
    font-family: 'Kanit', sans-serif;
    font-size: var(--touch-font-min-size, 13px);
    font-weight: 600;
    color: var(--theme-text-secondary);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.controller-tab-btn:active,
.controller-tab-btn.active {
    color: var(--theme-text-accent);
    border-bottom-color: var(--theme-border-accent);
    background: var(--theme-tab-active-bg);
}

.controller-tabbed-close-btn {
    min-width: var(--touch-target-min-size, 48px);
    min-height: var(--touch-target-min-size, 48px);
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid #ef4444;
    color: #fca5a5;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    margin-left: 8px;
    flex-shrink: 0;
}

.controller-tabbed-close-btn:active {
    background: rgba(239, 68, 68, 0.4);
    transform: scale(0.95);
}

.controller-tabbed-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    box-sizing: border-box;
}

/* Controller Bag View */
.controller-bag-container {
    display: flex;
    flex-direction: row;
    gap: 12px;
    height: 100%;
    min-height: 0;
}

.controller-bag-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.controller-cat-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.controller-cat-btn {
    min-width: var(--touch-target-min-size, 48px);
    min-height: var(--touch-target-min-size, 48px);
    height: 48px;
    padding: 0 16px;
    font-family: 'Kanit', sans-serif;
    font-size: var(--touch-font-min-size, 13px);
    font-weight: 600;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    color: var(--theme-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    transition: all 0.15s ease;
}

.controller-cat-btn:active,
.controller-cat-btn.active {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-border-accent);
    color: var(--theme-text-accent);
}

.controller-bag-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    flex: 1;
    overflow-y: auto;
    align-content: start;
}

/* BUG-011: the phone bag's own wallet line (Sh / Soul / bound / weight), under the grid */
.controller-bag-wallet {
    flex-shrink: 0;
    margin-top: 6px;
    gap: 10px;
    border-radius: var(--theme-radius-inner);
}

.controller-bag-grid .bag-slot {
    aspect-ratio: 1;
    min-width: var(--touch-target-min-size, 48px);
    min-height: var(--touch-target-min-size, 48px);
    border-radius: var(--theme-radius-inner);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
}

/* Side Column: Equipment on wide screens (>= 800px) */
.controller-bag-side-equip {
    width: 220px;
    border-left: 1px solid var(--theme-slot-border);
    padding-left: 12px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

@media (max-width: 799px) {
    .controller-bag-side-equip {
        display: none !important;
    }
}

.controller-bag-side-equip .side-equip-title {
    font-family: 'Kanit', sans-serif;
    font-size: var(--touch-font-min-size, 13px);
    font-weight: 700;
    color: var(--theme-text-accent);
    margin-bottom: 8px;
    flex-shrink: 0;
}

.controller-bag-side-equip .side-equip-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    overflow-y: auto;
}

/* Controller Equip Tab View */
.controller-equip-container {
    height: 100%;
    overflow-y: auto;
}

.controller-equip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}

.controller-equip-grid .equip-slot,
.controller-bag-side-equip .equip-slot {
    min-height: var(--touch-target-min-size, 48px);
    padding: 4px 8px;
    border-radius: var(--theme-radius-inner);
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    touch-action: manipulation;
    cursor: pointer;
}

.controller-equip-grid .equip-slot.occupied,
.controller-bag-side-equip .equip-slot.occupied {
    border-color: var(--theme-border);
}

.controller-equip-grid .equip-slot.selected,
.controller-bag-side-equip .equip-slot.selected {
    border-color: var(--theme-border-accent);
    box-shadow: 0 0 8px var(--theme-slot-hover-glow);
}

.controller-equip-grid .equip-icon-wrap,
.controller-bag-side-equip .equip-icon-wrap {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.controller-equip-grid .equip-placeholder-icon,
.controller-bag-side-equip .equip-placeholder-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-secondary);
    font-size: 16px;
    flex-shrink: 0;
}

.controller-equip-grid .equip-name,
.controller-bag-side-equip .equip-name {
    font-family: 'Sarabun', sans-serif;
    font-size: var(--touch-font-min-size, 13px);
    color: var(--theme-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.controller-equip-grid .equip-label,
.controller-bag-side-equip .equip-label {
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    color: var(--theme-text-secondary);
}

/* Controller Status Tab View */
.controller-status-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 10px;
}

.controller-status-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    flex-shrink: 0;
}

.controller-status-container .status-levels {
    font-family: 'Kanit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.controller-status-container .status-points {
    font-family: 'Kanit', sans-serif;
    font-size: 14px;
    color: var(--theme-text-secondary);
}

.controller-status-container .status-points strong {
    color: var(--theme-text-accent);
    font-size: 16px;
}

.controller-status-stats-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 auto;
    overflow: visible;
}

.controller-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 10px;
    min-height: var(--touch-target-min-size, 48px);
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    box-sizing: border-box;
}

.controller-stat-row .stat-name {
    font-family: 'Kanit', sans-serif;
    font-size: var(--touch-font-min-size, 13px);
    font-weight: 700;
    color: var(--theme-text-primary);
    width: 60px;
}

.controller-stat-row .stat-val {
    font-family: 'Kanit', sans-serif;
    font-size: 14px;
    color: var(--theme-text-primary);
    flex: 1;
}

.controller-stat-row .stat-preview {
    color: var(--theme-text-accent);
    font-weight: bold;
}

.controller-stat-row .stat-bonus {
    color: #34d399;
    font-size: 12px;
}

.controller-mode .stat-btn-group,
.controller-status-container .stat-btn-group {
    display: flex;
    gap: 6px;
}

.controller-mode .stat-adj-btn,
.controller-status-container .stat-adj-btn {
    min-width: var(--touch-target-min-size, 48px);
    min-height: var(--touch-target-min-size, 48px);
    font-size: 20px;
    font-weight: bold;
    background: var(--theme-tab-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    color: var(--theme-text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    box-sizing: border-box;
}

.controller-mode .stat-adj-btn:active,
.controller-status-container .stat-adj-btn:active {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-border-accent);
}

.controller-mode .stat-adj-btn.disabled,
.controller-mode .stat-adj-btn:disabled,
.controller-status-container .stat-adj-btn.disabled,
.controller-status-container .stat-adj-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.controller-status-footer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 8px;
    flex-shrink: 0;
}

.controller-status-footer-actions .status-action-btn,
.controller-mode .status-footer-actions .status-action-btn {
    min-height: var(--touch-target-min-size, 48px);
    min-width: 100px;
    padding: 0 18px;
    font-family: 'Kanit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--theme-radius-inner);
    border: 1px solid transparent;
    cursor: pointer;
    touch-action: manipulation;
    box-sizing: border-box;
}

.controller-status-footer-actions .status-action-btn.btn-apply.active,
.controller-mode .status-footer-actions .status-action-btn.btn-apply.active {
    background: var(--ui-btn-primary-bg, var(--theme-tab-active-bg));
    color: var(--ui-btn-primary-text, var(--theme-text-accent));
    border-color: var(--ui-btn-primary-border, var(--theme-border-accent));
}

.controller-status-footer-actions .status-action-btn.btn-reset.active,
.controller-mode .status-footer-actions .status-action-btn.btn-reset.active {
    background: var(--ui-btn-bg, var(--theme-tab-bg));
    border-color: var(--theme-border);
    color: var(--theme-text-primary);
}

.controller-status-footer-actions .status-action-btn.disabled,
.controller-status-footer-actions .status-action-btn:disabled,
.controller-mode .status-footer-actions .status-action-btn.disabled,
.controller-mode .status-footer-actions .status-action-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: var(--theme-slot-bg);
    border-color: var(--theme-slot-border);
    color: var(--theme-text-secondary);
}

/* Controller Settings Tab View */
.controller-settings-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px;
}

.controller-settings-container .settings-section-title {
    font-family: 'Kanit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--theme-text-accent);
    margin-bottom: 4px;
}

.controller-settings-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.controller-settings-choices .theme-choice {
    min-height: var(--touch-target-min-size, 48px);
    padding: 0 16px;
    font-family: 'Kanit', sans-serif;
    font-size: var(--touch-font-min-size, 13px);
    font-weight: 600;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    color: var(--theme-text-secondary);
    cursor: pointer;
    touch-action: manipulation;
    transition: all 0.15s ease;
}

.controller-settings-choices .theme-choice:active,
.controller-settings-choices .theme-choice.active {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-border-accent);
    color: var(--theme-text-accent);
}

/* Controller Slider & Audio */
.controller-slider-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.controller-slider-label {
    font-family: 'Kanit', sans-serif;
    font-size: var(--touch-font-min-size, 13px);
    color: var(--theme-text-primary);
}

.controller-slider-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.controller-step-btn {
    min-width: var(--touch-target-min-size, 48px);
    min-height: var(--touch-target-min-size, 48px);
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-tab-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    color: var(--theme-text-primary);
    cursor: pointer;
    touch-action: manipulation;
    box-sizing: border-box;
}

.controller-step-btn:active {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-border-accent);
}

.controller-slider-input {
    flex: 1;
    min-height: var(--touch-target-min-size, 48px);
    height: 48px;
    cursor: pointer;
    accent-color: var(--theme-accent, #38bdf8);
    background: transparent;
}

/* 8. Rotate Device Overlay (Portrait Mode) */
.rotate-device-overlay {
    display: none;
}

@media (orientation: portrait), (max-aspect-ratio: 1/1) {
    .rotate-device-overlay {
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        z-index: 999999;
        background: #07080c;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: #f8fafc;
        padding: 24px;
        box-sizing: border-box;
    }
}

.rotate-device-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 320px;
}

.rotate-phone-anim {
    width: 64px;
    height: 96px;
    border: 3px solid #f0c946;
    border-radius: 12px;
    margin-bottom: 24px;
    position: relative;
    animation: rotate-phone 2.5s ease-in-out infinite;
}

.rotate-phone-anim::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f0c946;
}

@keyframes rotate-phone {
    0%, 15% { transform: rotate(0deg); }
    45%, 70% { transform: rotate(90deg); }
    85%, 100% { transform: rotate(0deg); }
}

.rotate-title {
    font-family: 'Kanit', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #f0c946;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.rotate-desc-th {
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #cbd5e1;
    margin: 0 0 8px 0;
}

.rotate-desc-en {
    font-family: 'Sarabun', sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
    margin: 0;
}

/* 9. F1 Hidden & Web Command Box (TASK-108) */
#ui-root.f1-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}

.web-command-box {
    position: fixed;
    bottom: 84px;
    left: 50%;
    transform: translateX(-50%);
    width: min(520px, calc(100vw - 32px));
    height: 44px;
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(240, 201, 70, 0.6);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 10px rgba(240, 201, 70, 0.2);
    display: flex;
    align-items: center;
    padding: 0 8px 0 12px;
    gap: 8px;
    z-index: 10000;
    pointer-events: auto;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.web-command-prompt {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: 16px;
    color: #f0c946;
    user-select: none;
}

.web-command-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #f8fafc;
    font-family: 'Sarabun', -apple-system, sans-serif;
    font-size: 14px;
    height: 100%;
}

.web-command-input::placeholder {
    color: #64748b;
    font-size: 13px;
}

.web-command-send-btn {
    padding: 6px 14px;
    background: linear-gradient(135deg, #f0c946 0%, #d4af37 100%);
    border: none;
    border-radius: 6px;
    color: #0f172a;
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.15s ease;
}

.web-command-send-btn:active {
    transform: scale(0.96);
}

.web-command-close-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 6px;
    color: #fca5a5;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.web-command-close-btn:active {
    transform: scale(0.95);
}

/* ==========================================================================
   Status Bar Component (TASK-101: Buff / Debuff / System)
   ========================================================================== */

.status-bar-container {
    position: fixed;
    right: calc(12px + var(--safe-area-right));
    top: 30%;
    max-height: 45vh;
    max-height: 45dvh;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    z-index: 100;
    pointer-events: auto;
    user-select: none;
}

.status-group {
    display: flex;
    flex-flow: column wrap-reverse;
    align-content: flex-end;
    gap: 4px;
    max-height: 284px; /* 8 items * 32px + 7 gaps * 4px = 284px */
}

.status-group-divider {
    width: 24px;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1px;
    margin: 2px 4px;
}

.status-item {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: visible;
    transition: transform 0.15s ease, border-color 0.15s ease;
    box-sizing: border-box;
}

.status-item:hover {
    transform: scale(1.08);
    z-index: 200;
}

/* Buff item styling */
.status-item.status-buff {
    border-color: rgba(234, 179, 8, 0.4);
}

.status-item.status-buff:hover {
    border-color: #facc15;
    box-shadow: 0 0 8px rgba(250, 204, 21, 0.5);
}

/* Debuff item styling (red border) */
.status-item.status-debuff {
    border-color: rgba(239, 68, 68, 0.6);
    background: rgba(40, 10, 15, 0.85);
}

.status-item.status-debuff:hover {
    border-color: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

/* System item styling */
.status-item.status-system {
    border-color: rgba(148, 163, 184, 0.4);
    background: rgba(30, 41, 59, 0.85);
}

/* Status Icon Image */
.status-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 5px;
    image-rendering: pixelated;
    pointer-events: none;
}

.status-icon-img.status-icon-smooth {
    image-rendering: auto;
}

/* Fallback Initials Box */
.status-icon-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #e2e8f0;
    background: rgba(30, 41, 59, 0.9);
    border-radius: 5px;
    user-select: none;
    pointer-events: none;
}

/* Circular Conic Countdown Mask (55% red) */
.status-conic-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    pointer-events: none;
    z-index: 2;
}

/* Slow blink in last 5 seconds */
@keyframes status-blink-anim {
    0%, 100% {
        opacity: 1;
        filter: brightness(1);
    }
    50% {
        opacity: 0.35;
        filter: brightness(1.4);
    }
}

.status-item.status-blink-slow {
    animation: status-blink-anim 1s ease-in-out infinite;
}

/* Stacks Badge */
.status-stacks-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    min-width: 14px;
    height: 14px;
    padding: 0 2px;
    border-radius: 4px;
    background: #0f172a;
    border: 1px solid #eab308;
    color: #fef08a;
    font-family: 'Kanit', sans-serif;
    font-size: 10px;
    font-weight: 800;
    line-height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Tooltip on Hover */
.status-tooltip {
    display: none;
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    min-width: 170px;
    max-width: 260px;
    padding: 8px 10px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), 0 0 1px rgba(255, 255, 255, 0.2);
    pointer-events: none;
    z-index: 500;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.status-item:hover .status-tooltip,
.status-item.pinned .status-tooltip {
    display: flex;
}

.status-tooltip-title {
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #f8fafc;
    line-height: 1.2;
}

.status-tooltip-desc {
    font-family: 'Sarabun', sans-serif;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.3;
}

.status-tooltip-time {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    font-weight: 700;
    color: #fbbf24;
    margin-top: 2px;
}

.status-tooltip-meta {
    font-family: 'Sarabun', sans-serif;
    font-size: 11px;
    color: #64748b;
    display: flex;
    gap: 6px;
    margin-top: 2px;
}

.status-tooltip-hint {
    font-family: 'Sarabun', sans-serif;
    font-size: 10px;
    color: #38bdf8;
    margin-top: 2px;
    font-style: italic;
}

/* ==========================================================================
   ITEM ACTION MENU MODAL (TASK-109 Item 2)
   Touch-friendly action menu when tapping inventory or equipment items
   ========================================================================== */

.item-action-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.item-action-card {
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 2px solid var(--theme-border-accent);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    padding: 16px;
    min-width: 280px;
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.item-action-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--theme-slot-border);
    padding-bottom: 8px;
}

.item-action-icon {
    width: 32px;
    height: 32px;
    background-image: url('assets/sprites/items.png');
    background-repeat: no-repeat;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.item-action-skill-badge {
    width: 32px;
    height: 32px;
    background: var(--theme-slot-bg, #2a241e);
    border: 1px solid var(--theme-slot-border, #4a3e32);
    border-radius: var(--theme-radius-inner, 4px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--theme-text-accent, #e5a93c);
    flex-shrink: 0;
}

.item-action-title {
    font-family: 'Kanit', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--theme-text-primary);
    flex-grow: 1;
}

.item-action-close-btn {
    background: transparent;
    border: none;
    color: var(--theme-text-secondary);
    font-size: 20px;
    width: var(--touch-target-min-size, 48px);
    height: var(--touch-target-min-size, 48px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    touch-action: manipulation;
}

.item-action-btn-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.item-action-btn {
    min-height: var(--touch-target-min-size, 48px);
    min-width: var(--touch-target-min-size, 48px);
    padding: 10px 16px;
    font-family: 'Kanit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--theme-border);
    background: var(--theme-slot-bg);
    color: var(--theme-text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    transition: all 0.15s ease;
}

.item-action-btn:hover,
.item-action-btn:active {
    filter: brightness(1.15);
}

.item-action-btn.btn-use {
    background: rgba(16, 185, 129, 0.25);
    border-color: #10b981;
    color: #34d399;
}

.item-action-btn.btn-equip {
    background: rgba(59, 130, 246, 0.25);
    border-color: #3b82f6;
    color: #60a5fa;
}

.item-action-btn.btn-unequip {
    background: rgba(245, 158, 11, 0.25);
    border-color: #f59e0b;
    color: #fbbf24;
}

.item-action-btn.btn-hotbar {
    background: rgba(168, 85, 247, 0.25);
    border-color: #a855f7;
    color: #c084fc;
}

.item-action-btn.btn-drop {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.6);
    color: #f87171;
}

/* DESTROY-1: Destroy (next to Drop) and its confirm: a deeper red, it cannot be undone */
.item-action-btn.btn-destroy {
    background: rgba(153, 27, 27, 0.35);
    border-color: #dc2626;
    color: #fca5a5;
}

.item-action-btn.btn-cancel {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--theme-text-secondary);
}

/* ITEM-002: an action the item rules / switches refuse; the reason is the title tooltip */
.item-action-btn.btn-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(1);
}

/* ITEM-002: Core / socket lines in item tooltips (minimal; lane B polishes) */
.tooltip-sockets,
.tooltip-core {
    margin-top: 4px;
    font-size: 0.9em;
}

.tooltip-socket {
    color: var(--theme-text-secondary);
}

.tooltip-core-line:first-child {
    color: var(--theme-text-secondary);
}

/* TASK-186: Cores. The item menu shows the Core / socket lines (a phone has no hover tooltip)
   and scrolls on a short screen; picker rows carry the Core's effect; one question card for
   an insert (permanent) and for selling gear that holds Cores */
.item-action-card {
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
}
.item-action-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: #67e8f9;
}
.item-action-detail-line:first-child {
    color: var(--theme-text-secondary);
}
.item-action-btn.btn-insert-row {
    flex-direction: column;
    gap: 2px;
}
.insert-row-effect {
    font-size: 12px;
    font-weight: 500;
    color: #67e8f9;
}
.core-mark {
    margin-left: 4px;
    color: #67e8f9;
    font-size: 0.85em;
}
.basket-core-mark {
    position: absolute;
    top: 1px;
    left: 3px;
    margin: 0;
    text-shadow: 0 0 3px #000;
    pointer-events: none;
}
.core-confirm-backdrop {
    z-index: 10001;
}
.core-confirm-card {
    background: var(--theme-window-bg);
    border: 2px solid rgba(239, 68, 68, 0.6);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    padding: 14px 16px;
    min-width: 260px;
    max-width: min(420px, 92vw);
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: 'Kanit', sans-serif;
    color: var(--theme-text-primary);
}
.core-confirm-title {
    font-size: 16px;
    font-weight: 600;
}
.core-confirm-line {
    font-size: 13px;
    color: #67e8f9;
}
.core-confirm-warn {
    font-size: 14px;
    font-weight: 600;
    color: #f87171;
}
.core-confirm-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}
/* the cart's Sell question sits on top of the shop window */
.shop-confirm-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    border-radius: var(--theme-radius);
}

.item-action-picker-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.item-action-picker-title {
    font-family: 'Kanit', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--theme-text-secondary);
}

.hotbar-picker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 4px 0;
}

.hotbar-pick-btn {
    min-height: var(--touch-target-min-size, 48px);
    min-width: var(--touch-target-min-size, 48px);
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    font-family: 'Kanit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

.hotbar-pick-btn:hover,
.hotbar-pick-btn:active {
    background: rgba(240, 201, 70, 0.25);
    border-color: var(--theme-border-accent);
    color: var(--theme-text-accent);
}

/* ==========================================================================
   TASK-109 Item 4: Touch-friendly Shop & NPC Dialog in Controller Mode
   ========================================================================== */

/* Full-Screen 2-Column Shop in Controller Mode */
.controller-mode .shop-window {
    position: fixed !important;
    top: var(--safe-area-top) !important;
    left: var(--safe-area-left) !important;
    right: var(--safe-area-right) !important;
    bottom: var(--safe-area-bottom) !important;
    width: auto !important;
    height: auto !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0;
    z-index: 950;
    animation: none !important;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.controller-mode .shop-header {
    min-height: var(--touch-target-min-size, 48px);
    padding: 0 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.controller-mode .shop-close-btn {
    min-width: var(--touch-target-min-size, 48px);
    min-height: var(--touch-target-min-size, 48px);
    flex-shrink: 0;
    box-sizing: border-box;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--theme-radius-inner);
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid #ef4444;
    color: #fca5a5;
    cursor: pointer;
    touch-action: manipulation;
}

.controller-mode .shop-content {
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 10px;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}

/* Left Pane: Catalog */
.controller-mode .shop-catalog-pane {
    flex: 1;
    min-width: 0;
    width: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.controller-mode .shop-catalog-list {
    flex: 1;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.controller-mode .shop-catalog-row {
    min-height: var(--touch-target-min-size, 48px);
    flex-shrink: 0;
    padding: 4px 10px;
    cursor: pointer;
    touch-action: manipulation;
    box-sizing: border-box;
}

.controller-mode .shop-item-add-btn {
    min-height: var(--touch-target-min-size, 48px);
    min-width: 60px;
    flex-shrink: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--touch-font-min-size, 13px);
    font-weight: 700;
    touch-action: manipulation;
}

/* Right Pane: Cart + Summary + Action */
.controller-mode .shop-cart-pane {
    width: 320px;
    max-width: 45%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.controller-mode .shop-cart-list {
    flex: 1;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
}

.controller-mode .shop-cart-row {
    min-height: var(--touch-target-min-size, 48px);
    padding: 4px 8px;
    box-sizing: border-box;
}

/* Big +/- quantity buttons */
.controller-mode .cart-amt-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.controller-mode .cart-amt-btn {
    min-width: var(--touch-target-min-size, 48px);
    min-height: var(--touch-target-min-size, 48px);
    flex-shrink: 0;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--theme-radius-inner);
    touch-action: manipulation;
    cursor: pointer;
}

.controller-mode .cart-del-btn {
    min-width: var(--touch-target-min-size, 48px);
    min-height: var(--touch-target-min-size, 48px);
    flex-shrink: 0;
    box-sizing: border-box;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    cursor: pointer;
}

/* Big Checkout & Sell buttons at bottom right */
.controller-mode .shop-checkout-btn,
.controller-mode .shop-sell-btn {
    min-height: var(--touch-target-min-size, 48px);
    min-width: var(--touch-target-min-size, 48px);
    font-size: 15px;
    font-weight: 700;
    border-radius: var(--theme-radius-inner);
    touch-action: manipulation;
    cursor: pointer;
    box-sizing: border-box;
    margin-top: 8px;
    flex-shrink: 0;
}

.controller-mode .cart-clear-btn {
    min-height: var(--touch-target-min-size, 48px);
    min-width: var(--touch-target-min-size, 48px);
    flex-shrink: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

.controller-mode .basket-receipts-toggle-btn {
    min-height: var(--touch-target-min-size, 48px);
    min-width: var(--touch-target-min-size, 48px);
    flex-shrink: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

.controller-mode .receipt-close-btn {
    min-width: var(--touch-target-min-size, 48px);
    min-height: var(--touch-target-min-size, 48px);
    flex-shrink: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    touch-action: manipulation;
}

.controller-mode .shop-timeout-close-btn {
    min-height: var(--touch-target-min-size, 48px);
    min-width: var(--touch-target-min-size, 48px);
    flex-shrink: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

/* NPC Dialog in Controller Mode (TASK-166 Bug #5 / UI-POLISH-2 R2) */
.controller-mode .dialog-window,
.controller-layout .dialog-window {
    position: fixed !important;
    top: auto !important;
    bottom: var(--safe-area-bottom) !important;
    left: var(--safe-area-left) !important;
    right: var(--safe-area-right) !important;
    width: auto !important;
    max-width: min(540px, calc(100% - 32px)) !important;
    margin: 0 auto !important;
    z-index: 950 !important;
    animation: none !important;
    border-radius: var(--theme-radius) var(--theme-radius) 0 0;
    box-sizing: border-box;
}

#ui-root.dialog-active .chat-top-layer {
    display: none !important;
    pointer-events: none !important;
}

/* While NPC dialogue is active: dim non-essential windows & panels (TASK-166 Bug #5) */
#ui-root.dialog-active .chat-window,
#ui-root.dialog-active .hotbar-container,
#ui-root.dialog-active .controller-bottom-left,
#ui-root.dialog-active .controller-action-cluster {
    opacity: 0.25;
    pointer-events: none !important;
    transition: opacity 0.2s ease;
}

.controller-mode .dialog-header {
    min-height: var(--touch-target-min-size, 48px);
    padding: 0 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.controller-mode .dialog-close-btn {
    min-width: var(--touch-target-min-size, 48px);
    min-height: var(--touch-target-min-size, 48px);
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border-radius: var(--theme-radius-inner);
    touch-action: manipulation;
}

.controller-mode .dialog-body {
    max-height: 120px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 16px;
}

.controller-mode .dialog-text {
    font-size: var(--touch-font-min-size, 13px);
    line-height: 1.5;
}

.controller-mode .dialog-actions {
    padding: 8px 14px 12px;
}

.controller-mode .dialog-footer-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
}

.controller-mode .dialog-option-btn {
    width: 100%;
    min-height: var(--touch-target-min-size, 48px);
    min-width: var(--touch-target-min-size, 48px);
    flex-shrink: 0;
    font-size: var(--touch-font-min-size, 13px);
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    touch-action: manipulation;
}

.controller-mode .dialog-next-btn,
.controller-mode .dialog-close-action-btn,
.controller-mode .dialog-submit-btn {
    min-height: var(--touch-target-min-size, 48px);
    min-width: 120px;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    touch-action: manipulation;
    box-sizing: border-box;
}

/* ========================================================================
   TASK-109: Responsive Lobby Screens (844x390 and mobile landscape)
   ======================================================================== */
@media (max-height: 500px) {
    .lobby-screen-overlay {
        justify-content: flex-start;
        padding-top: max(10px, var(--safe-area-top));
        padding-bottom: max(10px, var(--safe-area-bottom));
        padding-left: max(16px, var(--safe-area-left));
        padding-right: max(16px, var(--safe-area-right));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }

    /* 1. Login */
    .lobby-top-brand {
        position: static;
        margin-bottom: 8px;
    }

    .lobby-main-title {
        font-size: 24px;
        letter-spacing: 1px;
    }

    .lobby-sub-title {
        font-size: 11px;
        letter-spacing: 3px;
        margin-top: 2px;
    }

    .login-card-box,
    .queue-card-box {
        width: 320px;
        max-width: 90vw;
        padding: 14px 20px;
        gap: 10px;
        box-sizing: border-box;
    }

    .lobby-field-row {
        gap: 4px;
    }

    .lobby-text-input:not(.ui-input) {
        min-height: var(--touch-target-min-size, 48px);
        font-size: var(--touch-font-min-size, 13px);
        padding: 6px 12px;
        box-sizing: border-box;
        scroll-margin: 20px;
    }

    .lobby-checkbox-row {
        min-height: 36px;
    }

    .lobby-checkbox-input {
        width: 20px;
        height: 20px;
    }

    .lobby-danger-btn {
        min-height: var(--touch-target-min-size, 48px);
        font-size: 14px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        touch-action: manipulation;
    }

    .lobby-credit-footer,
    .lobby-version-tag {
        display: none;
    }

    /* 2. Character Select */
    .lobby-select-container {
        padding: 8px 16px;
        justify-content: space-between;
        height: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        overflow-y: hidden;
    }

    .lobby-select-container .lobby-header,
    .lobby-create-container .lobby-header {
        margin-bottom: 2px;
    }

    .lobby-title {
        font-size: 20px;
        margin: 0;
    }

    .lobby-subtitle {
        font-size: 12px;
        margin: 2px 0 0 0;
    }

    /* Horizontal scrollable cards container */
    .lobby-slots-row {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 16px !important;
        /* not "center": a centred row wider than the screen clips slot 1 on the left (BUG-008) */
        justify-content: flex-start !important;
        padding: 8px 12px !important;
        box-sizing: border-box !important;
        pointer-events: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .lobby-slot-card {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        flex-shrink: 0 !important;
        /* 3 cards fit down to 568 px wide (BUG-008), 200 px from 720 px up: 120 px = overlay +
           container padding 64, row padding 24, 2 gaps 32 */
        width: clamp(140px, calc((100vw - 120px - var(--safe-area-left) - var(--safe-area-right)) / 3), 200px) !important;
        min-height: 100px !important;
        padding: 10px 14px !important;
        box-sizing: border-box !important;
    }

    .lobby-slot-card.selected {
        transform: translateY(-2px) !important;
    }

    /* centre the cards while they fit, start at the left edge once they do not (BUG-008) */
    .lobby-slot-card:first-child {
        margin-left: auto !important;
    }

    .lobby-slot-card:last-child {
        margin-right: auto !important;
    }

    .lobby-slot-create-btn {
    flex-shrink: 0;
}

.lobby-slot-create-btn-unused {
        min-height: var(--touch-target-min-size, 48px);
        min-width: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
    }

    .lobby-actions-bar {
        margin-bottom: 4px;
        max-width: 680px;
        gap: 12px;
    }

    /* 3. Character Create */
    .lobby-create-container {
        padding: 8px 16px;
        overflow-y: auto;
    }

    .lobby-create-layout {
        gap: 16px;
        justify-content: center;
        align-items: center;
    }

    .lobby-create-preview-space {
        min-width: 160px;
        flex: 0.6;
    }

    .lobby-create-card {
        max-width: 360px;
        margin-right: 0;
        padding: 12px 18px;
        gap: 10px;
        box-sizing: border-box;
    }

    .lobby-gender-btn {
        min-height: var(--touch-target-min-size, 48px);
        font-size: 14px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
    }

    /* 4. Delete Modal */
    .lobby-modal-content {
        max-width: 90vw;
        padding: 14px 20px;
        gap: 10px;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   SKILL TREE WINDOW (PC Mode) & CONTROLLER SKILLS VIEW (TASK-121)
   ========================================================================== */

.skill-tree-window {
    position: absolute;
    width: 490px;
    /* BUG-017: a plain board widens the window to fit (inline width); never past the screen */
    max-width: calc(100vw - 20px);
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    display: flex;
    flex-direction: column;
    z-index: 100;
    user-select: none;
    font-family: 'Kanit', sans-serif;
    box-sizing: border-box;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
}

.skill-tree-header {
    background: var(--theme-header-bg);
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--theme-slot-border);
    cursor: grab;
    user-select: none;
}

.skill-tree-header:active {
    cursor: grabbing;
}

.skill-tree-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--theme-text-primary);
}

.skill-tree-close-btn {
    background: none;
    border: none;
    color: var(--theme-text-secondary);
    font-size: 18px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
}

.skill-tree-close-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
}

.skill-tree-tabs {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--theme-slot-border);
    background: var(--theme-slot-bg);
    overflow-x: auto;
}

.skill-tree-tab {
    background: var(--theme-tab-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    color: var(--theme-text-secondary);
    font-size: 12px;
    font-family: 'Kanit', sans-serif;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.skill-tree-tab:hover {
    color: var(--theme-text-primary);
    border-color: var(--theme-border-accent);
}

.skill-tree-tab.active {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-tab-active-border);
    color: var(--theme-text-primary);
    font-weight: 500;
}

.skill-tree-canvas-container {
    width: 100%;
    height: 320px;
    position: relative;
    overflow: auto;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 0 0 var(--theme-radius) var(--theme-radius);
}

.skill-tree-canvas {
    position: relative;
    width: 480px;
    height: 300px;
    min-width: 480px;
    min-height: 300px;
}

.skill-link-seg {
    position: absolute;
    pointer-events: none;
}

.skill-link-seg.satisfied {
    background-color: var(--theme-border-accent, #d4af37);
}

.skill-link-seg.unsatisfied {
    background-color: rgba(148, 163, 184, 0.35);
}

.skill-link-badge {
    position: absolute;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 9px;
    font-family: 'Kanit', sans-serif;
    font-weight: 600;
    line-height: 1.1;
    pointer-events: none;
    z-index: 2;
}

.skill-link-badge.satisfied {
    background: rgba(16, 20, 28, 0.9);
    color: var(--theme-border-accent, #d4af37);
    border: 1px solid var(--theme-border-accent, #d4af37);
}

.skill-link-badge.unsatisfied {
    background: rgba(16, 20, 28, 0.9);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.skill-link-seg.highlighted {
    background-color: #f59e0b !important;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.8);
    opacity: 1 !important;
    z-index: 4;
}

.skill-link-badge.highlighted {
    border-color: #f59e0b !important;
    color: #f59e0b !important;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.8);
    opacity: 1 !important;
    z-index: 5;
}

.skill-link-seg.dimmed,
.skill-link-badge.dimmed {
    opacity: 0.22;
}

.skill-card {
    position: absolute;
    width: 136px;
    height: 56px;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    /* SKILL-FRAMES-UI: the 38 px framed icon, the name keeps about the room it had */
    padding: 4px 5px 4px 4px;
    display: flex;
    align-items: center;
    gap: 5px;
    box-sizing: border-box;
    cursor: grab;
    z-index: 3;
    transition: all 0.15s ease;
}

.skill-card:hover {
    border-color: var(--theme-slot-hover-border);
    box-shadow: 0 0 6px var(--theme-slot-hover-glow);
}

.skill-card.learned {
    border-color: rgba(212, 175, 55, 0.6);
    background: rgba(212, 175, 55, 0.08);
}

.skill-card.can-learn {
    border-color: rgba(59, 130, 246, 0.6);
}

.skill-card.passive {
    border-style: dashed;
}

.skill-card.highlighted {
    border-color: #f59e0b !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.9) !important;
    opacity: 1 !important;
    z-index: 5;
}

.skill-card.dimmed {
    opacity: 0.28;
    filter: grayscale(40%);
}

.skill-card.disabled {
    opacity: 0.45;
    filter: grayscale(100%);
}

.skill-board-disabled-banner {
    padding: 6px 12px;
    margin: 8px 16px;
    background: rgba(220, 38, 38, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #fca5a5;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    border-radius: 4px;
}

/* SKILL-FRAMES-UI: the 38 px frame (skill_tree.rs skill_card_icon), in the K card and the
   controller list */
.skill-card-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.skill-card-icon.framed {
    background: none;
    border-radius: 0;
}

.skill-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
}

.skill-card-name {
    font-size: 10px;
    font-weight: 600;
    color: var(--theme-text-primary);
    line-height: 1.15;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.skill-card-lv {
    font-size: 9px;
    color: var(--theme-text-secondary);
}

.planned-add-tag {
    color: #22c55e;
    font-weight: 700;
}

.skill-card-passive {
    font-size: 8px;
    color: #f59e0b;
    font-weight: 600;
    text-transform: uppercase;
}

.skill-card-btns {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}

.skill-learn-btn {
    width: 20px;
    height: 18px;
    min-width: 20px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    border: 1px solid var(--theme-border-accent);
    cursor: pointer;
    transition: all 0.15s;
}

.skill-learn-btn,
.skill-learn-btn.active {
    background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
    border-color: #4ade80;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.skill-learn-btn:hover:not(:disabled):not(.disabled),
.skill-learn-btn.active:hover:not(:disabled):not(.disabled) {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
    border-color: #86efac;
}

.skill-learn-btn.disabled,
.skill-learn-btn:disabled {
    background: rgba(255, 255, 255, 0.05);
    color: #64748b;
    border-color: rgba(255, 255, 255, 0.1);
    cursor: not-allowed;
    opacity: 0.5;
    box-shadow: none;
}

.skill-planning-stepper {
    display: flex;
    align-items: center;
    gap: 2px;
}

.skill-plan-btn {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    border: 1px solid var(--theme-border-accent);
    cursor: pointer;
    transition: all 0.15s;
}

.skill-plan-btn.plus,
.skill-plan-btn.plus.active {
    background: rgba(245, 158, 11, 0.16);
    color: #fcd34d;
    border-color: #f59e0b;
}

.skill-plan-btn.plus:hover:not(:disabled):not(.disabled),
.skill-plan-btn.plus.active:hover:not(:disabled):not(.disabled) {
    background: rgba(245, 158, 11, 0.3);
    border-color: #fbbf24;
    color: #fffbeb;
}

.skill-plan-btn.plus.disabled,
.skill-plan-btn.plus:disabled {
    background: rgba(255, 255, 255, 0.05);
    color: #64748b;
    border-color: rgba(255, 255, 255, 0.1);
    cursor: not-allowed;
    opacity: 0.5;
}

.skill-plan-btn.minus {
    background: #dc2626;
    color: #ffffff;
    border-color: #b91c1c;
}

.skill-plan-btn.minus:hover {
    background: #ef4444;
}

.skill-planned-val {
    font-size: 11px;
    font-weight: 700;
    color: #4ade80;
    padding: 0 2px;
}

.skill-plan-minus-btn {
    width: 20px;
    height: 18px;
    min-width: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    background: #dc2626;
    color: #ffffff;
    border: 1px solid #b91c1c;
    cursor: pointer;
    transition: all 0.15s;
}

.skill-plan-minus-btn:hover {
    background: #ef4444;
}

.skill-tree-plan-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    background: rgba(15, 23, 42, 0.95);
    border-top: 1px solid var(--theme-border-accent);
    border-radius: 0 0 var(--theme-radius-inner) var(--theme-radius-inner);
}

.plan-bar-label {
    font-size: 12px;
    font-weight: 600;
    color: #22c55e;
}

.plan-bar-actions {
    display: flex;
    gap: 8px;
}

.plan-confirm-btn {
    background: var(--ui-btn-primary-bg, var(--theme-tab-active-bg));
    color: var(--ui-btn-primary-text, var(--theme-text-accent));
    border: 1px solid var(--ui-btn-primary-border, var(--theme-border-accent));
    padding: 6px 14px;
    border-radius: var(--ui-radius-sm);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.plan-confirm-btn:hover:not(:disabled) {
    background: var(--ui-btn-primary-bg-hover, var(--theme-tab-active-bg));
    border-color: var(--theme-border-accent);
}

.plan-reset-btn {
    background: var(--ui-btn-bg, var(--theme-tab-bg));
    color: var(--theme-text-primary);
    border: 1px solid var(--theme-border);
    padding: 6px 12px;
    border-radius: var(--ui-radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.plan-reset-btn:hover:not(:disabled) {
    background: var(--ui-btn-bg-hover, var(--theme-tab-active-bg));
    border-color: var(--theme-border-accent);
}

/* Skill tree branch sections (TASK-178): a board with branches stacks one band per section
   (shared first). Sizes match crates/beelzebub_webui/src/skill_branches.rs. */
.skill-tree-canvas-container.with-branches {
    height: 480px;
    max-height: calc(100vh - 210px);
    max-height: calc(100dvh - 210px);
    /* TASK-196: the ultimates add a row to each branch, so a board can scroll down; a thin
       vertical scrollbar must never push the sections sideways */
    scrollbar-width: thin;
}

/* the sections end at the band's right edge (BAND_X 26 + BAND_W 446 = 472 px, skill_branches.rs):
   the canvas is no wider, so it still fits beside a vertical scrollbar (TASK-196 box q118) */
.skill-tree-canvas-container.with-branches > .skill-tree-canvas {
    width: 472px;
    min-width: 472px;
}

.skill-card.in-branch {
    width: 130px;
}

.skill-branch-band {
    position: absolute;
    left: 26px;
    width: 446px;
    box-sizing: border-box;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: var(--theme-radius-inner);
    background: rgba(255, 255, 255, 0.025);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.skill-branch-band.equipped {
    border-color: rgba(212, 175, 55, 0.65);
    background: rgba(212, 175, 55, 0.07);
    box-shadow: inset 0 0 14px rgba(212, 175, 55, 0.1);
}

.skill-branch-band.selected {
    border-color: var(--theme-slot-hover-border, rgba(96, 165, 250, 0.7));
}

.skill-branch-header {
    height: 22px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    cursor: help;
    overflow: hidden;
    white-space: nowrap;
}

.skill-branch-header:hover .skill-branch-name {
    color: var(--theme-text-accent);
}

.skill-branch-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--theme-text-primary);
    letter-spacing: 0.02em;
    margin-right: 2px;
}

.skill-branch-band.equipped .skill-branch-name {
    color: var(--theme-border-accent, #d4af37);
}

.skill-branch-weapon {
    font-size: 9px;
    line-height: 1.2;
    padding: 1px 6px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: var(--theme-text-secondary);
}

.skill-branch-weapon.held {
    border-color: var(--theme-border-accent, #d4af37);
    background: var(--theme-border-accent, #d4af37);
    color: #1a1408;
    font-weight: 700;
}

.skill-branch-points {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    color: var(--theme-text-secondary);
}

.skill-branch-points.planned {
    color: #4ade80;
}

.skill-branch-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.skill-branch-info-title {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.skill-branch-info-desc {
    font-family: 'Sarabun', sans-serif;
    font-size: 12px;
    line-height: 1.35;
    color: var(--theme-text-primary);
}

.skill-weapon-need {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--theme-text-secondary);
}

.skill-weapon-need.missing {
    color: #f87171;
}

/* TASK-196: what an ultimate needs to be learned ("Unlock: Lv 30 · 2 Bloodrager skills") */
.skill-unlock {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #f87171;
}

.skill-unlock.met {
    color: var(--theme-text-secondary);
}

/* Controller Mode Skills View */
.controller-skills-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px;
    box-sizing: border-box;
    font-family: 'Kanit', sans-serif;
    overflow: hidden;
}

.controller-skills-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.controller-skills-tabs {
    display: flex;
    gap: 8px;
}

.controller-skill-tab {
    min-height: var(--touch-target-min-size, 48px);
    min-width: 90px;
    padding: 8px 16px;
    border-radius: var(--theme-radius-inner);
    font-size: 14px;
    font-weight: 500;
    background: var(--theme-tab-bg);
    border: 1px solid var(--theme-slot-border);
    color: var(--theme-text-secondary);
    cursor: pointer;
    touch-action: manipulation;
}

.controller-skill-tab.active {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-tab-active-border);
    color: var(--theme-text-primary);
}

.controller-skills-points-badge {
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-text-accent);
    background: rgba(0, 0, 0, 0.4);
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--theme-border);
}

.controller-skills-body {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 12px;
    overflow: hidden;
}

.controller-skills-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
}

.controller-skill-item {
    min-height: var(--touch-target-min-size, 48px);
    /* SKILL-FRAMES-UI: 4 px top / bottom keep the row 48 px tall with the 38 px icon */
    padding: 4px 12px;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.15s;
    touch-action: manipulation;
}

.controller-skill-item.selected {
    border-color: var(--theme-border-accent);
    box-shadow: 0 0 8px var(--theme-slot-hover-glow);
    background: rgba(212, 175, 55, 0.15);
}

.controller-skill-item.learned {
    border-color: rgba(212, 175, 55, 0.5);
}

.controller-skill-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.controller-skill-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.controller-skill-item-lv {
    font-size: 12px;
    color: var(--theme-text-secondary);
}

.controller-skill-active-tag {
    font-size: 11px;
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.4);
    padding: 2px 6px;
    border-radius: 4px;
}

.controller-skills-details {
    width: 280px;
    min-width: 240px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 0;
    overflow-y: auto;
}

.controller-skill-detail-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.controller-skill-detail-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--theme-text-accent);
    margin-bottom: 2px;
}

.controller-skill-detail-type {
    font-size: 11px;
    color: var(--theme-text-secondary);
    margin-bottom: 4px;
}

.controller-skill-detail-desc {
    font-size: 12px;
    font-family: 'Sarabun', sans-serif;
    color: var(--theme-text-primary);
    white-space: pre-line;
    line-height: 1.3;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin-bottom: 6px;
}

.controller-skill-actions {
    display: flex;
    gap: 8px;
    flex-direction: column;
}

.controller-skill-action-btn {
    min-height: var(--touch-target-min-size, 48px);
    border-radius: var(--theme-radius-inner);
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Kanit', sans-serif;
    touch-action: manipulation;
}

.controller-skill-action-btn.primary,
.controller-skill-learn-btn:not(.disabled):not(:disabled) {
    background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
    border: 1px solid #4ade80;
    color: #ffffff;
}

.controller-skill-action-btn.primary:hover:not(:disabled):not(.disabled),
.controller-skill-learn-btn:hover:not(:disabled):not(.disabled) {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
    border-color: #86efac;
}

.controller-skill-action-btn.secondary {
    background: var(--ui-btn-bg, var(--theme-tab-bg));
    color: var(--theme-text-primary);
    border: 1px solid var(--theme-border);
}

.controller-skill-action-btn.secondary:hover:not(:disabled):not(.disabled) {
    background: var(--ui-btn-bg-hover, var(--theme-tab-active-bg));
    border-color: var(--theme-border-accent);
}

.controller-skill-action-btn.success {
    background: #16a34a;
    color: #ffffff;
}

.controller-skill-action-btn.success:hover {
    background: #22c55e;
}

.controller-skill-action-btn.warning {
    background: #dc2626;
    color: #ffffff;
}

.controller-skill-action-btn.warning:hover {
    background: #ef4444;
}

.controller-skill-action-btn.disabled {
    background: rgba(255, 255, 255, 0.08);
    color: #64748b;
    cursor: not-allowed;
}

.controller-skill-item.highlighted {
    border-color: #f59e0b !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.8) !important;
    background: rgba(245, 158, 11, 0.15) !important;
    opacity: 1 !important;
}

.controller-skill-item.dimmed {
    opacity: 0.3 !important;
    filter: grayscale(40%);
}

.controller-skill-reqs-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.controller-skill-req {
    font-size: 13px;
    font-weight: 600;
}

.controller-skill-req.satisfied {
    color: #fbbf24;
}

.controller-skill-req.unsatisfied {
    color: #ef4444;
}

.skill-prereq-msg,
.controller-skill-prereq-msg {
    font-size: 12px;
    font-weight: 600;
    color: #f87171;
    margin-bottom: 6px;
}

.skill-points-to-unlock,
.controller-skill-unlock-points {
    font-size: 12px;
    font-weight: 700;
    color: #38bdf8;
    margin-bottom: 6px;
}

.skill-learn-reason,
.controller-skill-learn-reason {
    font-size: 12px;
    color: #ef4444;
    margin-bottom: 6px;
}

.skill-tree-info-footer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 12px;
    background: rgba(15, 23, 42, 0.95);
    border-top: 1px solid var(--theme-slot-border);
}

.skill-tree-prereq-banner {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
}

.skill-tree-unlock-banner {
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #7dd3fc;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
}

.controller-plan-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.controller-plan-stepper .controller-skill-action-btn {
    flex: 1;
    min-height: 48px;
    height: 48px;
}

.controller-plan-step-btn {
    min-width: 48px;
    width: 48px;
    min-height: 48px;
    height: 48px;
    border-radius: var(--theme-radius-inner);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
    font-family: 'Kanit', sans-serif;
    transition: all 0.15s;
    border: 1px solid var(--theme-border-accent);
    flex-shrink: 0;
}

.controller-plan-step-btn.plus,
.controller-plan-step-btn.plus.active,
.controller-plan-plus-btn:not(.disabled):not(:disabled) {
    background: rgba(245, 158, 11, 0.16);
    color: #fcd34d;
    border-color: #f59e0b;
}

.controller-plan-step-btn.plus:hover:not(:disabled):not(.disabled),
.controller-plan-step-btn.plus.active:hover:not(:disabled):not(.disabled),
.controller-plan-plus-btn:hover:not(:disabled):not(.disabled) {
    background: rgba(245, 158, 11, 0.3);
    border-color: #fbbf24;
    color: #fffbeb;
}

.controller-plan-step-btn.plus.disabled,
.controller-plan-step-btn.plus:disabled,
.controller-plan-plus-btn.disabled,
.controller-plan-plus-btn:disabled {
    background: rgba(255, 255, 255, 0.05);
    color: #64748b;
    border-color: rgba(255, 255, 255, 0.1);
    cursor: not-allowed;
    opacity: 0.5;
}

.controller-plan-step-btn.minus {
    background: #dc2626;
    color: #ffffff;
    border-color: #b91c1c;
}

.controller-plan-step-btn.minus:hover {
    background: #ef4444;
}

.controller-plan-step-val {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #4ade80;
    padding: 0 4px;
}

.controller-skills-plan-bar {
    display: flex;
    gap: 8px;
    padding-top: 8px;
    flex-shrink: 0;
}

.controller-plan-confirm-btn {
    min-height: var(--touch-target-min-size, 48px);
    flex: 1;
    background: var(--ui-btn-primary-bg, var(--theme-tab-active-bg));
    color: var(--ui-btn-primary-text, var(--theme-text-accent));
    border: 1px solid var(--ui-btn-primary-border, var(--theme-border-accent));
    border-radius: var(--theme-radius-inner);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    font-family: 'Kanit', sans-serif;
}

.controller-plan-reset-btn {
    min-height: var(--touch-target-min-size, 48px);
    padding: 0 16px;
    background: var(--ui-btn-bg, var(--theme-tab-bg));
    color: var(--theme-text-primary);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-inner);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    font-family: 'Kanit', sans-serif;
}

.controller-skills-empty-hint {
    color: var(--theme-text-secondary);
    font-size: 14px;
    text-align: center;
    margin: auto;
}

/* Branch section headers in the controller skill list (TASK-178); tap = branch info */
.controller-skill-branch-header {
    min-height: var(--touch-target-min-size, 48px);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 6px 12px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-left: 3px solid rgba(148, 163, 184, 0.45);
    border-radius: var(--theme-radius-inner);
    cursor: pointer;
    touch-action: manipulation;
}

.controller-skill-branch-header .skill-branch-name {
    font-size: 14px;
}

.controller-skill-branch-header .skill-branch-weapon {
    font-size: 11px;
}

.controller-skill-branch-header .skill-branch-points {
    font-size: 12px;
}

.controller-skill-branch-header.equipped {
    border-left-color: var(--theme-border-accent, #d4af37);
    background: rgba(212, 175, 55, 0.12);
}

.controller-skill-branch-header.equipped .skill-branch-name {
    color: var(--theme-border-accent, #d4af37);
}

.controller-skill-branch-header.selected {
    border-color: var(--theme-border-accent, #d4af37);
    box-shadow: 0 0 8px var(--theme-slot-hover-glow);
}

.controller-branch-detail-weapons {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

/* ==========================================================================
   Quest Journal Window (PC & Controller Mode) (TASK-121 Item 2)
   ========================================================================== */
.quest-journal-window {
    width: 280px;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    background: var(--theme-window-bg);
    border: 1px solid var(--theme-border);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border-radius: var(--theme-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    position: absolute;
    z-index: 100;
}

.quest-journal-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px;
    max-height: 380px;
    overflow-y: auto;
}

.quest-empty-msg {
    color: var(--theme-text-secondary);
    font-size: 13px;
    font-style: italic;
    text-align: center;
    padding: 24px 8px;
}

.quest-section-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--theme-text-secondary);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.quest-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quest-card {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--theme-radius-inner);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: all 0.15s ease;
}

.quest-card:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.45);
}

.quest-card.completed {
    opacity: 0.7;
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.05);
}

.quest-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.quest-kind-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.quest-journal-entry {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quest-kind-badge.kind-main,
.quest-kind-badge.kind-job,
.kind-main,
.kind-job {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.4);
}

.quest-kind-badge.kind-side,
.kind-side {
    background: rgba(148, 163, 184, 0.2);
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.4);
}

.quest-kind-badge.kind-repeatable,
.quest-kind-badge.kind-bounty,
.kind-repeatable,
.kind-bounty {
    background: rgba(56, 189, 248, 0.2);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.4);
}

.quest-kind-badge.kind-guild,
.kind-guild {
    background: rgba(168, 85, 247, 0.2);
    color: #c084fc;
    border-color: rgba(168, 85, 247, 0.4);
}

.quest-card.kind-main,
.quest-card.kind-side,
.quest-card.kind-repeatable,
.quest-card.kind-bounty,
.quest-card.kind-job,
.quest-card.kind-guild,
.controller-quest-card.kind-main,
.controller-quest-card.kind-side,
.controller-quest-card.kind-repeatable,
.controller-quest-card.kind-bounty,
.controller-quest-card.kind-job,
.controller-quest-card.kind-guild {
    background: rgba(0, 0, 0, 0.35);
    color: var(--theme-text-primary);
}

.quest-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-text-primary);
    flex: 1;
}

.quest-check-icon {
    font-size: 13px;
    font-weight: 700;
    color: #22c55e;
}

.quest-objective {
    font-size: 12px;
    font-family: 'Sarabun', sans-serif;
    color: var(--theme-text-secondary);
    line-height: 1.35;
    padding-left: 2px;
}

.quest-repeat-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.3px;
}

.quest-repeat-tag.repeat-daily {
    background: rgba(56, 189, 248, 0.2);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.4);
}

.quest-repeat-tag.repeat-weekly {
    background: rgba(168, 85, 247, 0.2);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.4);
}

.quest-repeat-tag.repeat-repeat,
.quest-repeat-tag.repeat-repeatable {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.quest-repeat-tag.repeat-once {
    background: rgba(148, 163, 184, 0.16);
    color: var(--theme-text-secondary);
    border: 1px solid rgba(148, 163, 184, 0.32);
}

.quest-track-btn {
    color: var(--theme-text-secondary);
}

.quest-track-btn.is-tracked,
.quest-track-btn.tracked,
.tracked {
    color: var(--theme-text-accent);
    border-color: var(--theme-border-accent);
}

.quest-resets-in {
    font-size: 11px;
    font-style: italic;
    color: #94a3b8;
    padding-left: 2px;
    margin-top: 2px;
}

.draggable-window {
    position: absolute;
}

.window-header,
.window-drag-handle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2);
    min-height: 36px;
    padding: var(--ui-space-2) var(--ui-space-3);
    background: var(--theme-header-bg);
    border-bottom: 1px solid var(--theme-slot-border);
    cursor: grab;
    touch-action: none;
}

.window-title {
    font-family: 'Kanit', sans-serif;
    font-size: var(--ui-font-lg);
    font-weight: 500;
    color: var(--theme-text-accent);
}

.btn-close,
.quest-journal-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    flex-shrink: 0;
    color: var(--theme-text-secondary);
}

.quest-section-title {
    font-family: 'Kanit', sans-serif;
    font-size: var(--ui-font-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--theme-text-secondary);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--theme-slot-border);
}

.quest-section-title.completed-header {
    margin-top: var(--ui-space-2);
}

.quest-empty-text {
    color: var(--theme-text-secondary);
    font-size: var(--ui-font-sm);
    text-align: center;
    padding: var(--ui-space-4) var(--ui-space-2);
}

.quest-card.active {
    border-color: var(--theme-border);
}

.quest-card-title {
    font-family: 'Kanit', sans-serif;
    font-size: var(--ui-font-md);
    font-weight: 500;
    color: var(--theme-text-primary);
}

.quest-card-desc {
    font-family: 'Sarabun', sans-serif;
    font-size: var(--ui-font-sm);
    color: var(--theme-text-secondary);
    line-height: 1.35;
}

.quest-card-objectives {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.quest-objective-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-family: 'Sarabun', sans-serif;
    font-size: var(--ui-font-sm);
    color: var(--theme-text-primary);
}

.quest-objective-row.done {
    color: var(--theme-text-secondary);
    text-decoration: line-through;
}

.quest-obj-check {
    color: var(--theme-text-accent);
    font-weight: 600;
    flex-shrink: 0;
}

.quest-obj-text {
    flex: 1;
}

/* Controller / Mobile Quests View */
.controller-quests-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    overflow-y: auto;
    padding: 12px;
}

.controller-quest-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.controller-section-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--theme-text-secondary);
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.controller-quest-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.controller-quest-card {
    min-height: var(--touch-target-min-size, 48px);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--theme-radius-inner);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.controller-quest-card.completed {
    opacity: 0.65;
    background: rgba(0, 0, 0, 0.2);
}

.quest-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.completed-section {
    margin-top: 8px;
}

.controller-empty-notice {
    color: var(--theme-text-secondary);
    font-size: var(--ui-font-sm);
    text-align: center;
    padding: 24px 8px;
}

.controller-quest-card-header,
.controller-quest-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ==========================================================================
   Toast Notifications (TASK-121 Item 3)
   ========================================================================== */
:root {
    --touch-target-min-size: 48px;
    --toast-pc-bottom: 72px;
    --toast-pc-right: 16px;
    --toast-mobile-top: 16px;
    --toast-max-width: 320px;
}

.toast-container {
    position: fixed;
    z-index: 25000;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
}

.toast-container.pc-mode {
    bottom: var(--toast-pc-bottom);
    right: var(--toast-pc-right);
    align-items: flex-end;
}

.toast-container.controller-mode {
    top: var(--toast-mobile-top);
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
}

/* Phones: toasts have no action and sit over the top row (the world event chip, the minimap, the
   boss bar): a tap goes through them to what is underneath (bug phone minimap, m21 at 844x390) */
.toast-container.controller-mode .toast-item {
    pointer-events: none;
}

.toast-item {
    max-width: var(--toast-max-width);
    padding: 8px 14px;
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--theme-radius-inner);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    font-size: 13px;
    line-height: 1.4;
    color: var(--theme-text-primary);
    pointer-events: auto;
    animation: toast-fade-in 0.2s ease-out;
}

@keyframes toast-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.toast-item.kind-error {
    border-color: rgba(239, 68, 68, 0.6);
    color: #ef4444;
    background: rgba(30, 10, 10, 0.95);
}

.toast-item.kind-item {
    border-color: rgba(34, 197, 94, 0.6);
    color: #22c55e;
    background: rgba(10, 30, 15, 0.95);
}

.toast-item.kind-info {
    border-color: rgba(56, 189, 248, 0.6);
    color: #38bdf8;
    background: rgba(10, 25, 35, 0.95);
}

/* ==========================================================================
   Chat Window (UI-POLISH-2: Kit-styled PC & Controller Chat Window, Top-Layer Popups)
   ========================================================================== */

.web-chat-window {
    position: absolute;
    z-index: 200;
    background: var(--theme-window-bg);
    border: 1px solid var(--theme-border-accent);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    box-sizing: border-box;
}

.web-chat-window.is-minimized {
    height: 28px !important;
    min-height: 28px !important;
}

@media (max-height: 500px), (max-width: 500px) {
    .web-chat-window {
        z-index: 90;
    }
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    background: var(--theme-header-bg);
    border-bottom: 1px solid var(--theme-border-subtle);
    padding: 0 6px;
    gap: 4px;
    cursor: move;
    user-select: none;
    box-sizing: border-box;
    flex-shrink: 0;
}

.chat-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    height: 26px;
    padding: 0;
    border-bottom: none;
    overflow: hidden !important;
    scrollbar-width: none !important;
}

.chat-tabs::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.chat-tab {
    background: transparent;
    border: 1px solid transparent;
    padding: 0 7px;
    height: 22px;
    min-height: 22px;
    font-family: var(--theme-font);
    font-size: var(--ui-font-xs);
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    position: relative;
    color: var(--theme-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.chat-tab:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--theme-text-primary);
}

.chat-tab.active,
.chat-tab.is-active {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-border-accent);
    font-weight: 700;
    color: var(--theme-text-accent) !important;
}

.chat-tab-more {
    padding: 0 6px;
    font-weight: 700;
}

.chat-tab-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--theme-danger, #ff4757);
    pointer-events: none;
}

.chat-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 2px;
}

.chat-action-btn {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    padding: 0;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

.chat-action-btn.is-active {
    border-color: var(--theme-border-accent);
    color: var(--theme-text-accent);
    background: var(--theme-tab-active-bg);
}

.chat-body {
    flex: 1;
    padding: 6px 8px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-family: var(--theme-font);
    font-size: 12.5px;
    line-height: 1.38;
    min-height: 0;
}

/* Thin scrollbar visible on hover only */
.chat-body.ui-scroll {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.chat-body.ui-scroll:hover {
    scrollbar-color: rgba(240, 201, 70, 0.35) transparent;
}

.chat-body.ui-scroll::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.chat-body.ui-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.chat-body.ui-scroll::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
}

.chat-body.ui-scroll:hover::-webkit-scrollbar-thumb {
    background: rgba(240, 201, 70, 0.38);
}

/* Wrapped lines indented under the speaker name */
.chat-line {
    word-break: break-word;
    padding-left: 14px;
    text-indent: -14px;
}

.chat-timestamp {
    color: var(--theme-text-muted);
    font-size: var(--ui-font-xs);
    margin-right: 4px;
    user-select: none;
}

.chat-channel-badge {
    font-weight: 600;
    font-size: var(--ui-font-xs);
    margin-right: 4px;
    user-select: none;
}

.chat-player-name {
    font-weight: 600;
    color: var(--theme-text-primary);
    margin-right: 4px;
}

.chat-player-name.clickable {
    cursor: pointer;
    text-decoration: underline dotted;
}

.chat-player-name.clickable:hover {
    color: var(--theme-text-accent);
}

.chat-from {
    color: var(--theme-text-muted);
    font-size: var(--ui-font-xs);
    margin-right: 2px;
}

.chat-text.selectable {
    user-select: text !important;
    -webkit-user-select: text !important;
    color: var(--theme-text-primary);
}

.chat-text.system {
    user-select: text !important;
    -webkit-user-select: text !important;
    color: #facc15;
    font-style: italic;
}

.chat-input-row {
    display: flex;
    align-items: center;
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    gap: 4px;
    padding: 0 6px;
    background: var(--theme-header-bg);
    border-top: 1px solid var(--theme-border-subtle);
    box-sizing: border-box;
    flex-shrink: 0;
}

/* BUGFIX-B7: the chat box's own answer ("unknown command /x", a usage line) above the input */
.chat-hint-msg {
    padding: 2px 8px;
    font-size: var(--ui-font-xs);
    color: var(--theme-text-accent);
    background: var(--theme-header-bg);
    border-top: 1px solid var(--theme-border-subtle);
    flex-shrink: 0;
}

.chat-channel-selector {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.chat-channel-btn {
    height: 22px;
    min-height: 22px;
    padding: 0 7px;
    font-family: var(--theme-font);
    font-size: var(--ui-font-xs);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

.chat-input {
    flex: 1;
    min-width: 0;
    height: 22px;
    min-height: 22px;
    padding: 0 8px;
    font-family: var(--theme-font);
    font-size: var(--ui-font-sm);
    user-select: text !important;
    -webkit-user-select: text !important;
}

.chat-quick-container {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.chat-quick-btn {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    padding: 0;
    color: var(--theme-text-accent);
    font-size: 12px;
    flex-shrink: 0;
}

.chat-send-btn {
    height: 22px;
    min-height: 22px;
    padding: 0 10px;
    font-family: var(--theme-font);
    font-size: var(--ui-font-xs);
    font-weight: 700;
    flex-shrink: 0;
}

/* Top-Layer Popups (never clipped by .web-chat-window or .controller-chat-panel) */
.chat-top-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 950;
}

.chat-popup-backdrop {
    position: fixed;
    inset: 0;
    pointer-events: auto;
    background: transparent;
    z-index: 1;
}

.chat-tabs-overflow-menu,
.chat-dropdown-menu,
.chat-quick-popover,
.chat-context-menu {
    position: fixed;
    top: auto;
    right: auto;
    min-width: 148px;
    z-index: 2;
    pointer-events: auto;
    background: var(--theme-window-bg);
    border: 1px solid var(--theme-border-accent);
    border-radius: var(--theme-radius-inner);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: var(--theme-shadow), 0 8px 24px rgba(0, 0, 0, 0.85);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
}

.chat-quick-popover {
    width: 220px;
    padding: 6px;
    gap: 3px;
}

.chat-overflow-item,
.chat-dropdown-item,
.chat-quick-item,
.chat-context-item {
    background: transparent;
    border: 1px solid transparent;
    color: var(--theme-text-primary);
    padding: 5px 10px;
    text-align: left;
    font-family: var(--theme-font);
    font-size: var(--ui-font-sm);
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.chat-overflow-item:hover,
.chat-dropdown-item:hover,
.chat-quick-item:hover,
.chat-context-item:hover {
    background: var(--theme-tab-active-bg);
    color: var(--theme-text-accent);
}

.chat-overflow-item.is-active {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-border-accent);
    color: var(--theme-text-accent);
}

.chat-quick-item {
    justify-content: flex-start;
}

.chat-quick-num {
    color: var(--theme-text-accent);
    font-weight: 700;
}

.chat-context-title {
    font-family: var(--theme-font);
    font-size: var(--ui-font-xs);
    color: var(--theme-text-muted);
    font-weight: 700;
    padding: 2px 6px;
    border-bottom: 1px solid var(--theme-border-subtle);
}

.chat-context-item.danger:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.chat-context-item.cancel {
    border-top: 1px solid var(--theme-border-subtle);
    color: var(--theme-text-muted);
}

/* Controller Mode Chat (Touch >= 48px, kit styling, top-layer popups). It opens from the CHAT
   button (bottom left); nothing of it floats over the HUD while it is closed. */
.controller-chat-panel {
    position: absolute;
    top: calc(8px + env(safe-area-inset-top, 0px));
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    left: calc(12px + env(safe-area-inset-left, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    max-width: 760px;
    margin: 0 auto;
    z-index: 940;
    background: var(--theme-window-bg);
    border: 1.5px solid var(--theme-border-accent);
    border-radius: var(--theme-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--theme-shadow), 0 12px 32px rgba(0, 0, 0, 0.85);
    pointer-events: auto;
}

.controller-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    background: var(--theme-header-bg);
    border-bottom: 1px solid var(--theme-border-subtle);
    gap: 6px;
}

.controller-chat-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    overflow: hidden !important;
    scrollbar-width: none !important;
    border-bottom: none;
}

.controller-chat-tabs::-webkit-scrollbar {
    display: none !important;
}

.controller-chat-tab {
    min-height: 48px;
    min-width: 48px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    font-family: var(--theme-font);
    font-size: 13px;
    font-weight: 700;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--theme-radius-inner);
    cursor: pointer;
    color: var(--theme-text-secondary);
    position: relative;
    flex-shrink: 0;
}

.controller-chat-tab.active,
.controller-chat-tab.is-active {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-border-accent);
    color: var(--theme-text-accent) !important;
}

.controller-chat-close-btn {
    min-height: 48px;
    min-width: 48px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

.controller-chat-messages {
    flex: 1;
    padding: 8px 12px;
    overflow-y: auto;
    font-family: var(--theme-font);
    font-size: var(--ui-font-md);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 100px;
}

.controller-chat-line {
    word-break: break-word;
    line-height: 1.45;
    padding-left: 14px;
    text-indent: -14px;
}

.controller-chat-hint-msg {
    padding: 4px 12px;
    font-size: var(--ui-font-sm);
    color: var(--theme-text-accent);
    background: var(--theme-header-bg);
    border-top: 1px solid var(--theme-border-subtle);
    flex-shrink: 0;
}

.controller-chat-overflow-menu {
    top: calc(64px + env(safe-area-inset-top, 0px));
    right: calc(20px + env(safe-area-inset-right, 0px));
    bottom: auto;
    left: auto;
    min-width: 180px;
    padding: 6px;
    gap: 4px;
}

.controller-overflow-item,
.controller-chat-overflow-menu .ui-tabs-overflow-item {
    min-height: 48px;
    min-width: 48px;
    padding: 8px 14px;
    font-size: 14px;
    box-sizing: border-box;
}

.controller-quick-popover {
    position: fixed;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    left: calc(16px + env(safe-area-inset-left, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
    max-width: 720px;
    margin: 0 auto;
    z-index: 2;
    pointer-events: auto;
    background: var(--theme-window-bg);
    border: 1.5px solid var(--theme-border-accent);
    border-radius: var(--theme-radius);
    padding: 8px 12px;
    box-shadow: var(--theme-shadow), 0 8px 24px rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
}

.controller-quick-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px;
}

.controller-quick-title {
    font-family: var(--theme-font);
    font-size: 14px;
    font-weight: 700;
    color: var(--theme-text-accent);
}

.controller-quick-close-btn {
    min-height: 48px;
    min-width: 48px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.controller-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

@media (max-width: 600px) {
    .controller-quick-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.controller-quick-btn,
.controller-quick-slot-btn {
    min-height: 48px;
    min-width: 48px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    font-family: var(--theme-font);
    font-size: var(--ui-font-md);
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.controller-chat-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--theme-header-bg);
    border-top: 1px solid var(--theme-border-subtle);
}

.controller-chat-quick-btn {
    min-height: 48px;
    min-width: 64px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--theme-font);
    font-size: var(--ui-font-md);
    font-weight: 700;
    padding: 6px 12px;
    white-space: nowrap;
}

.controller-chat-input {
    flex: 1;
    min-height: 48px;
    box-sizing: border-box;
    padding: 8px 12px;
    font-family: var(--theme-font);
    font-size: 14px;
    user-select: text !important;
    -webkit-user-select: text !important;
}

.controller-chat-send-btn {
    min-height: 48px;
    min-width: 68px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--theme-font);
    font-size: 14px;
    font-weight: 700;
    padding: 6px 14px;
}

/* Settings Additions for Chat */
.settings-quick-messages-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.settings-quick-msg-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-quick-num {
    font-weight: bold;
    color: #f0c946;
    font-size: 13px;
    width: 20px;
}

.settings-quick-input {
    flex: 1;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 4px 8px;
    color: #fff;
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    user-select: text !important;
}

.settings-blocked-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    max-height: 120px;
    overflow-y: auto;
}

.settings-blocked-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 4px;
}

.settings-blocked-name {
    color: #e2e8f0;
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
}

.settings-unblock-btn {
    background: #475569;
    color: #f8fafc;
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}

.settings-unblock-btn:hover {
    background: #ef4444;
}

.settings-blocked-empty {
    color: #94a3b8;
    font-style: italic;
    font-size: 12px;
    padding: 4px 0;
}

/* ==========================================================================
   TASK-127: Death Screen (HTML Overlay & Responsive Respawn Modal)
   ========================================================================== */

.death-screen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.82);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 15000;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: auto;
    user-select: none;
    outline: none;
}

.death-screen-box {
    background: rgba(18, 6, 6, 0.95);
    border: 2px solid rgba(220, 50, 50, 0.85);
    box-shadow: 0 0 32px rgba(180, 20, 20, 0.45), inset 0 0 16px rgba(100, 10, 10, 0.35);
    border-radius: 8px;
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 90vw;
    width: 480px;
    gap: 12px;
    box-sizing: border-box;
    font-family: 'Kanit', sans-serif;
    animation: death-fade-in 0.3s ease-out;
}

@keyframes death-fade-in {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.death-screen-title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #ff4d4d;
    text-shadow: 0 0 12px rgba(255, 77, 77, 0.6);
    text-transform: uppercase;
}

.death-screen-shroud {
    font-size: 13px;
    color: #b0b0b0;
    line-height: 1.4;
}

.death-screen-penalty {
    font-size: 14px;
    font-weight: 600;
    color: #ffd166;
    background: rgba(255, 209, 102, 0.1);
    border: 1px solid rgba(255, 209, 102, 0.3);
    padding: 6px 14px;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

.death-screen-desc {
    font-size: 13px;
    color: #a0a5b5;
    line-height: 1.5;
}

.death-screen-timer {
    font-size: 12px;
    color: #888899;
}

.death-screen-btn {
    min-width: 48px;
    min-height: 48px;
    height: 48px;
    padding: 0 28px;
    background: linear-gradient(180deg, #c92a2a 0%, #8b1818 100%);
    border: 1px solid #ff6b6b;
    border-radius: 6px;
    color: #ffffff;
    font-family: 'Kanit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 10px rgba(201, 42, 42, 0.3);
    transition: all 0.15s ease-in-out;
    margin-top: 4px;
    touch-action: manipulation;
}

.death-screen-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #e03131 0%, #a51d1d 100%);
    border-color: #ffa8a8;
    box-shadow: 0 4px 16px rgba(224, 49, 49, 0.5);
    transform: translateY(-1px);
}

.death-screen-btn:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.death-screen-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    filter: grayscale(0.5);
}

/* Resurrect's question (TASK-197): a calm holy panel above the town button */
.death-screen-revive {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid rgba(240, 220, 140, 0.55);
    border-radius: 6px;
    background: rgba(60, 54, 30, 0.45);
}

.death-screen-revive-text {
    font-size: 13px;
    color: #f3e6b0;
    text-align: center;
    line-height: 1.5;
}

.death-screen-revive-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.death-screen-btn.revive-accept {
    background: linear-gradient(180deg, #d9b84a 0%, #a2801f 100%);
    border-color: #f6e08a;
    color: #1d1708;
}

.death-screen-btn.revive-decline {
    background: linear-gradient(180deg, #4a4f5e 0%, #2f323c 100%);
    border-color: #8a90a2;
}

.death-screen-btn .btn-gamepad-badge {
    background: rgba(240, 201, 70, 0.2);
    border: 1px solid #f0c946;
    color: #f0c946;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 700;
}

@media (max-height: 480px) {
    .death-screen-box {
        padding: 10px 20px;
        gap: 6px;
        max-height: 96vh;
        max-height: 96dvh;
    }
    .death-screen-title {
        font-size: 18px;
        letter-spacing: 1px;
    }
    .death-screen-shroud {
        font-size: 11px;
    }
    .death-screen-penalty {
        font-size: 12px;
        padding: 4px 10px;
    }
    .death-screen-desc {
        font-size: 11px;
    }
    .death-screen-timer {
        font-size: 11px;
    }
    .death-screen-btn {
        min-width: 48px;
        min-height: 48px;
        height: 48px;
        padding: 0 20px;
        font-size: 14px;
    }
}

/* ==========================================================================
   TASK-092b: Storage Window (PC & Controller Mode) & Quantity Modal
   ========================================================================== */

/* PC Storage Window */
.storage-window {
    position: absolute;
    width: 420px;
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: opacity 0.15s ease;
    box-sizing: border-box;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
}

.storage-header {
    background: var(--theme-header-bg);
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--theme-slot-border);
    cursor: grab;
    user-select: none;
}

.storage-header:active {
    cursor: grabbing;
}

.storage-title-area {
    display: flex;
    align-items: center;
    gap: 8px;
}

.storage-title {
    font-family: 'Kanit', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--theme-text-primary);
}

.storage-subtitle {
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    color: var(--theme-text-secondary);
}

.storage-close-btn {
    background: transparent;
    border: none;
    color: var(--theme-text-secondary);
    font-family: 'Kanit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.storage-close-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    color: #ef4444;
}

/* Storage Tabs (3 tabs: Consume, Equip, Etc) */
.storage-tabs {
    display: flex;
    padding: 6px 8px 0 8px;
    gap: 4px;
    border-bottom: 1px solid var(--theme-slot-border);
}

.storage-tab {
    flex: 1;
    background: var(--theme-tab-bg);
    border: 1px solid var(--theme-slot-border);
    border-bottom: none;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 5px 8px;
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--theme-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: -1px;
    text-align: center;
    white-space: nowrap;
}

.storage-tab:hover {
    color: var(--theme-text-primary);
    background: var(--theme-tab-active-bg);
}

.storage-tab.active {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-tab-active-border);
    color: var(--theme-text-accent);
    font-weight: 600;
    border-bottom: 2px solid var(--theme-tab-active-border);
}

/* 100-Slot Grid */
.storage-grid-container {
    padding: 10px 12px;
    max-height: 380px;
    overflow-y: auto;
    overflow-x: hidden;
}

.storage-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
}

.storage-slot {
    width: 42px;
    height: 42px;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: default;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.storage-slot.occupied {
    cursor: pointer;
}

.storage-slot.occupied:hover {
    border-color: var(--theme-slot-hover-border);
    box-shadow: 0 0 8px var(--theme-slot-hover-glow);
}

.storage-slot.occupied.selected {
    border-color: var(--theme-border-accent);
    box-shadow: 0 0 10px rgba(240, 201, 70, 0.5);
}

.storage-slot.drag-over.valid-drop {
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.2);
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}

/* Footer & Actions */
.storage-footer {
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--theme-slot-border);
    background: rgba(0, 0, 0, 0.2);
}

.storage-footer-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-family: 'Sarabun', sans-serif;
    color: var(--theme-text-secondary);
}

.storage-selected-name {
    color: var(--theme-text-accent);
    font-weight: 600;
}

.storage-selected-count {
    color: var(--theme-text-primary);
}

.storage-hint {
    font-size: 11px;
    color: var(--theme-text-secondary);
    font-style: italic;
}

.storage-footer-actions {
    display: flex;
    gap: 6px;
}

.storage-action-btn {
    padding: 4px 12px;
    border-radius: var(--theme-radius-inner);
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid var(--theme-border);
    background: rgba(255, 255, 255, 0.08);
    color: var(--theme-text-primary);
}

.storage-action-btn:hover:not(:disabled) {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-border-accent);
    color: var(--theme-text-accent);
}

.storage-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.storage-action-btn.withdraw {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
    color: #93c5fd;
}

.storage-action-btn.withdraw:hover:not(:disabled) {
    background: rgba(59, 130, 246, 0.35);
    border-color: #60a5fa;
    color: #ffffff;
}

/* Quantity Selection Modal (Deposit/Withdraw) */
.storage-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.storage-modal-window {
    width: 300px;
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.storage-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--theme-header-bg);
    border-bottom: 1px solid var(--theme-slot-border);
}

.storage-modal-title {
    font-family: 'Kanit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.storage-modal-close-btn {
    background: transparent;
    border: none;
    color: var(--theme-text-secondary);
    font-size: 14px;
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.storage-modal-close-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    color: #ef4444;
}

.storage-modal-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.storage-modal-item-info {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    padding: 6px 10px;
    border-radius: var(--theme-radius-inner);
    border: 1px solid var(--theme-slot-border);
}

.storage-modal-item-meta {
    display: flex;
    flex-direction: column;
}

.storage-modal-item-name {
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--theme-text-accent);
}

.storage-modal-item-avail {
    font-family: 'Sarabun', sans-serif;
    font-size: 11px;
    color: var(--theme-text-secondary);
}

.storage-modal-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.storage-modal-input {
    flex: 1;
    height: 32px;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    color: var(--theme-text-primary);
    font-family: 'Kanit', sans-serif;
    font-size: 15px;
    text-align: center;
}

.storage-modal-input:focus {
    outline: none;
    border-color: var(--theme-border-accent);
}

.storage-modal-footer {
    padding: 8px 12px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--theme-slot-border);
    background: rgba(0, 0, 0, 0.2);
}

.storage-modal-btn {
    padding: 4px 10px;
    border-radius: var(--theme-radius-inner);
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--theme-slot-border);
    background: rgba(255, 255, 255, 0.08);
    color: var(--theme-text-primary);
    transition: all 0.15s ease;
}

.storage-modal-btn:hover {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-border-accent);
}

.storage-modal-btn.confirm {
    background: rgba(16, 185, 129, 0.25);
    border-color: #10b981;
    color: #6ee7b7;
    font-weight: 600;
}

.storage-modal-btn.confirm:hover {
    background: rgba(16, 185, 129, 0.4);
    border-color: #34d399;
}

/* NPC Dialog Storage Fee Notice */
.dialog-option-fee {
    color: #fcd34d;
    font-size: 12px;
    margin-left: 6px;
    font-weight: 400;
}

/* ==========================================================================
   Controller Mode Styles (Touch targets >= 48px only in .controller-mode)
   ========================================================================== */

/* Hide UI elements that could cover or conflict with the storage windows */
.controller-mode:has(.storage-window) .chat-container,
.controller-mode:has(.storage-window) #chat-container,
.controller-mode:has(.storage-window) .controller-dpad-cluster,
.controller-mode:has(.storage-window) .controller-action-cluster,
.controller-mode:has(.storage-window) .hotbar-container,
.controller-mode:has(.storage-window) .mobile-hotbar-cluster,
.controller-mode:has(.storage-window) .controller-menu-trigger {
    display: none !important;
}
/* The phone chat panel and its popups are not in this list: whether they are drawn while a window
   covers them is decided in Rust (chat::phone_chat_panel_visible), the same call that decides
   whether the lines behind the window count as seen. */

/* Left Window: Inventory (Controller Mode with Storage Open) */
.controller-mode .inv-window.storage-layout {
    position: fixed !important;
    left: calc(4px + var(--safe-area-left)) !important;
    top: calc(4px + var(--safe-area-top)) !important;
    bottom: calc(4px + var(--safe-area-bottom)) !important;
    right: auto !important;
    width: calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
    height: auto !important;
    max-height: calc(100vh - 8px) !important;
    max-height: calc(100dvh - 8px) !important;
    margin: 0 !important;
    border-radius: var(--theme-radius-inner) !important;
    z-index: 950 !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    background: var(--theme-window-bg);
}

.controller-mode .inv-window.storage-layout .inv-header {
    height: 48px;
    min-height: 48px;
    padding: 0 8px;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.controller-mode .inv-window.storage-layout .inv-close-btn {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    font-size: 20px;
    border-radius: var(--theme-radius-inner);
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid #ef4444;
    color: #fca5a5;
    cursor: pointer;
    touch-action: manipulation;
}

.controller-mode .inv-window.storage-layout .inv-tabs {
    height: 48px;
    min-height: 48px;
    flex-shrink: 0;
    display: flex;
}

.controller-mode .inv-window.storage-layout .inv-tab {
    flex: 1;
    height: 48px;
    min-height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    font-size: 11px;
    touch-action: manipulation;
}

.controller-mode .inv-window.storage-layout .inv-grid-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px;
}

.controller-mode .inv-window.storage-layout .inv-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.controller-mode .inv-window.storage-layout .inv-footer {
    height: 48px;
    min-height: 48px;
    padding: 0 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Right Window: Storage (Controller Mode) */
.controller-mode .storage-window {
    position: fixed !important;
    left: calc(50% + 2px) !important;
    right: calc(4px + var(--safe-area-right)) !important;
    top: calc(4px + var(--safe-area-top)) !important;
    bottom: calc(4px + var(--safe-area-bottom)) !important;
    width: calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
    height: auto !important;
    max-height: calc(100vh - 8px) !important;
    max-height: calc(100dvh - 8px) !important;
    margin: 0 !important;
    border-radius: var(--theme-radius-inner) !important;
    z-index: 950 !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    background: var(--theme-window-bg);
}

.controller-mode .storage-header {
    height: 48px;
    min-height: 48px;
    padding: 0 8px;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.controller-mode .storage-close-btn {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    font-size: 20px;
    border-radius: var(--theme-radius-inner);
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid #ef4444;
    color: #fca5a5;
    cursor: pointer;
    touch-action: manipulation;
}

.controller-mode .storage-tabs {
    height: 48px;
    min-height: 48px;
    flex-shrink: 0;
    display: flex;
}

.controller-mode .storage-tab {
    flex: 1;
    height: 48px;
    min-height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    touch-action: manipulation;
}

.controller-mode .storage-grid-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px;
}

.controller-mode .storage-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.controller-mode .storage-footer {
    height: 52px;
    min-height: 52px;
    padding: 2px 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.controller-mode .storage-action-btn {
    min-width: 90px;
    height: 48px;
    min-height: 48px;
    font-size: 14px;
    touch-action: manipulation;
}

/* Quantity Selection Modal (Deposit/Withdraw) in Controller Mode */
.controller-mode .storage-modal-backdrop {
    z-index: 1100 !important;
}

.controller-mode .storage-modal-window {
    width: 360px !important;
    max-width: 90vw !important;
    border-radius: var(--theme-radius-inner) !important;
    box-sizing: border-box !important;
}

.controller-mode .storage-modal-header {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.controller-mode .storage-modal-close-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation !important;
}

.controller-mode .storage-modal-controls {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
}

.controller-mode .storage-modal-controls .storage-modal-btn {
    width: 52px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation !important;
}

.controller-mode .storage-modal-input {
    flex: 1 !important;
    height: 48px !important;
    min-height: 48px !important;
    font-size: 18px !important;
}

.controller-mode .storage-modal-footer {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    padding: 8px 12px !important;
}

.controller-mode .storage-modal-footer .storage-modal-btn {
    min-width: 90px !important;
    height: 48px !important;
    min-height: 48px !important;
    font-size: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation !important;
}

/* =======================================================
   Trade Window & System UI (TASK-094b)
   ======================================================= */

/* 1. PC Trade Window */
.trade-window {
    position: absolute;
    width: 560px;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 950;
    color: #e2e8f0;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
    user-select: none;
}

.trade-header {
    height: 38px;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.9) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    cursor: move;
}

.trade-header-title {
    font-size: 14px;
    font-weight: 600;
    color: #f8fafc;
    display: flex;
    align-items: center;
    gap: 8px;
}

.trade-close-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.trade-close-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
}

.trade-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px;
    background: rgba(10, 15, 30, 0.4);
}

.trade-panel {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trade-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 6px;
}

.trade-status-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.trade-status-badge.editing {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.trade-status-badge.locked {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.trade-status-badge.confirmed {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.5);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.trade-shilling-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.25);
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.trade-shilling-label {
    color: #cbd5e1;
    font-weight: 500;
}

.trade-shilling-input {
    flex: 1;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fbbf24;
    font-weight: 600;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 12px;
}

.trade-shilling-input:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
}

.trade-shilling-val {
    color: #fbbf24;
    font-weight: 600;
}

.trade-slots-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.trade-slot {
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: all 0.15s ease;
}

.trade-slot.empty:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.03);
}

.trade-slot.filled:hover {
    border-color: #38bdf8;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.3);
}

/* Pulsing highlight for slots changed by trade partner (TASK-094b Item 4) */
.trade-slot-changed {
    border-color: #ef4444 !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.8), inset 0 0 8px rgba(239, 68, 68, 0.4) !important;
    animation: pulse-trade-change 0.9s infinite alternate !important;
}

@keyframes pulse-trade-change {
    from {
        border-color: #ef4444;
        box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
    }
    to {
        border-color: #f59e0b;
        box-shadow: 0 0 14px rgba(245, 158, 11, 0.9);
    }
}

.trade-slot-count {
    position: absolute;
    bottom: 2px;
    right: 3px;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 1px 1px 2px #000, 0 0 3px #000;
    pointer-events: none;
}

.trade-slot-refine {
    position: absolute;
    top: 2px;
    left: 3px;
    font-size: 10px;
    font-weight: 700;
    color: #4ade80;
    text-shadow: 1px 1px 2px #000;
    pointer-events: none;
}

.trade-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(15, 23, 42, 0.85);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.trade-btn {
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
}

.trade-btn-ok {
    background: #0284c7;
    color: #f8fafc;
}
.trade-btn-ok:hover:not(:disabled) {
    background: #0369a1;
}
.trade-btn-ok.locked, .trade-btn-ok:disabled {
    background: #334155;
    color: #94a3b8;
    cursor: not-allowed;
    opacity: 0.8;
}

.trade-btn-confirm {
    background: #16a34a;
    color: #f8fafc;
}
.trade-btn-confirm:hover:not(:disabled) {
    background: #15803d;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
}
.trade-btn-confirm.disabled, .trade-btn-confirm:disabled {
    background: #334155;
    color: #94a3b8;
    cursor: not-allowed;
    opacity: 0.6;
}
.trade-btn-confirm.confirmed {
    background: #15803d;
    color: #86efac;
    cursor: default;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
}

.trade-btn-cancel {
    background: #475569;
    color: #f8fafc;
}
.trade-btn-cancel:hover {
    background: #64748b;
}

/* 2. Trade Invitation Banner / Overlay (TASK-094b Item 3) */
.trade-invite-overlay {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    pointer-events: auto;
}

.trade-invite-card {
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid #38bdf8;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 15px rgba(56, 189, 248, 0.3);
    border-radius: 8px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #f8fafc;
    min-width: 340px;
}

.trade-invite-info {
    flex: 1;
}

.trade-invite-title {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 700;
    color: #38bdf8;
}

.trade-invite-body {
    margin: 0;
    font-size: 13px;
    color: #cbd5e1;
}

.trade-invite-name {
    font-weight: 700;
    color: #f8fafc;
}

.trade-invite-timer-badge {
    margin-top: 4px;
    font-size: 11px;
    color: #fbbf24;
    font-weight: 600;
}

.trade-invite-actions {
    display: flex;
    gap: 8px;
}

.trade-invite-btn {
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    padding: 6px 14px;
    transition: all 0.15s ease;
}

.trade-invite-btn.accept {
    background: #16a34a;
    color: #ffffff;
}
.trade-invite-btn.accept:hover {
    background: #15803d;
}

.trade-invite-btn.decline {
    background: #dc2626;
    color: #ffffff;
}
.trade-invite-btn.decline:hover {
    background: #b91c1c;
}

/* 3. Trade Quantity Modal */
.trade-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
}

.trade-modal-card {
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    width: 320px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
    color: #e2e8f0;
    overflow: hidden;
}

.trade-modal-header {
    height: 38px;
    background: rgba(30, 41, 59, 0.8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    font-weight: 600;
    font-size: 14px;
}

.trade-modal-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 16px;
}

.trade-modal-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.trade-modal-item-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.trade-modal-item-meta {
    display: flex;
    flex-direction: column;
}

.trade-modal-item-name {
    font-weight: 600;
    color: #f8fafc;
}

.trade-modal-item-avail {
    font-size: 12px;
    color: #94a3b8;
}

.trade-modal-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.trade-modal-btn {
    background: #334155;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f8fafc;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.trade-modal-btn:hover {
    background: #475569;
}

.trade-modal-input {
    flex: 1;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #f8fafc;
    text-align: center;
    padding: 6px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
}

.trade-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(30, 41, 59, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.trade-modal-footer .confirm {
    background: #0284c7;
}
.trade-modal-footer .confirm:hover {
    background: #0369a1;
}

.trade-modal-footer .trade-modal-btn {
    min-height: 48px;
    min-width: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* 4. Controller Mode Layout (844x390) (TASK-094b Item 5) */
.trade-window.controller-layout {
    position: fixed;
    inset: 0;
    padding: var(--safe-area-top) var(--safe-area-right) var(--safe-area-bottom) var(--safe-area-left);
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
    z-index: 960;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

.trade-window.controller-layout .trade-header {
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    padding: 0 8px;
    box-sizing: border-box;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.trade-window.controller-layout .trade-close-btn {
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    position: relative;
    top: 1px;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trade-window.controller-layout .trade-body {
    flex: 1;
    padding: 4px 10px;
    gap: 8px;
    margin: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.trade-window.controller-layout .trade-panel {
    padding: 4px 8px;
    gap: 4px;
}

.trade-window.controller-layout .trade-panel-header {
    margin-bottom: 2px;
    font-size: 11px;
}

.trade-window.controller-layout .trade-grid {
    grid-template-columns: repeat(3, 44px);
    gap: 4px;
    justify-content: center;
}

.trade-window.controller-layout .trade-slot {
    width: 44px;
    height: 44px;
}

.trade-window.controller-layout .trade-shilling-row {
    padding: 2px 6px;
    font-size: 11px;
}

.trade-window.controller-layout .trade-lock-indicator {
    padding: 2px 6px;
    font-size: 11px;
}

.trade-controller-bag-section {
    background: rgba(15, 23, 42, 0.9);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    height: 80px;
    min-height: 80px;
    max-height: 80px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.trade-bag-header {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #94a3b8;
    font-weight: 600;
    line-height: 12px;
}

.trade-bag-grid {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 0 0 2px 0;
}

.trade-bag-slot {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.trade-bag-slot.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.trade-item-lock-icon {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 12px;
}

.trade-window.controller-layout .trade-footer {
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    padding: 2px 16px;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.trade-window.controller-layout .trade-btn {
    min-width: 90px;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    box-sizing: border-box;
    padding: 0 16px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.min-touch-target {
    min-width: 48px;
    min-height: 48px;
    box-sizing: border-box;
}

/* Controller Players Tab View */
.controller-players-view {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.controller-players-title {
    margin: 0;
    font-size: 16px;
    color: #38bdf8;
}

.controller-players-empty {
    color: #94a3b8;
    font-size: 14px;
    text-align: center;
    padding: 40px 0;
}

.controller-players-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}

.controller-player-card {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.controller-player-name {
    font-size: 15px;
    font-weight: 600;
    color: #f8fafc;
}

.controller-btn-trade {
    background: #0284c7;
    border: none;
    border-radius: 6px;
    color: #ffffff;
    font-weight: 600;
    padding: 0 18px;
    cursor: pointer;
    font-size: 14px;
}

.controller-btn-trade:hover {
    background: #0369a1;
}

.controller-players-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.controller-player-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.controller-btn-open-party {
    background: #0284c7;
    border: none;
    border-radius: 6px;
    color: #ffffff;
    font-weight: 600;
    padding: 0 14px;
    cursor: pointer;
    font-size: 13px;
}
.controller-btn-open-party:hover {
    background: #0369a1;
}

.controller-btn-party {
    background: #059669;
    border: none;
    border-radius: 6px;
    color: #ffffff;
    font-weight: 600;
    padding: 0 14px;
    cursor: pointer;
    font-size: 13px;
}
.controller-btn-party:hover {
    background: #047857;
}

/* ==========================================================================
   TASK-095 Party System Styles
   ========================================================================== */

/* 1. Party Invite Modal */
.party-invite-overlay {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

.party-invite-card {
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid #38bdf8;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 15px rgba(56, 189, 248, 0.3);
    border-radius: 8px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #f8fafc;
    min-width: 340px;
}

.party-invite-icon {
    font-size: 28px;
}
.party-invite-icon::before {
    content: none;
}

.party-invite-info {
    flex: 1;
}

.party-invite-title {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 700;
    color: #38bdf8;
    font-family: 'Kanit', sans-serif;
}

.party-invite-body {
    margin: 0;
    font-size: 13px;
    color: #cbd5e1;
    font-family: 'Sarabun', sans-serif;
}

.party-invite-timer {
    margin-top: 4px;
    font-size: 11px;
    color: #fbbf24;
    font-weight: 600;
}

.party-invite-actions {
    display: flex;
    gap: 8px;
}

.party-btn-accept,
.party-btn-decline {
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    padding: 6px 14px;
    transition: all 0.15s ease;
    font-family: 'Kanit', sans-serif;
}

.party-btn-accept {
    background: #16a34a;
    color: #ffffff;
}
.party-btn-accept:hover {
    background: #15803d;
}

.party-btn-decline {
    background: #dc2626;
    color: #ffffff;
}
.party-btn-decline:hover {
    background: #b91c1c;
}

/* 2. Floating Party Window */
.party-window-container {
    position: fixed;
    top: 120px;
    left: 280px;
    width: 340px;
    max-height: calc(100vh - 136px);
    max-height: calc(100dvh - 136px);
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    color: var(--theme-text-primary);
    z-index: 200;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.party-window-container.has-party {
    border-color: var(--theme-border);
}

.controller-layout .party-window-container,
.controller-mode .party-window-container {
    top: max(8px, var(--safe-area-top, 0px));
    left: max(12px, var(--safe-area-left, 0px));
    width: min(360px, calc(100vw - var(--safe-area-left, 0px) - var(--safe-area-right, 0px) - 24px));
    max-height: calc(100vh - var(--safe-area-top, 0px) - var(--safe-area-bottom, 0px) - 16px);
    max-height: calc(100dvh - var(--safe-area-top, 0px) - var(--safe-area-bottom, 0px) - 16px);
}

.party-window-header {
    height: 38px;
    min-height: 38px;
    background: var(--theme-header-bg);
    border-bottom: 1px solid var(--theme-slot-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    user-select: none;
}

.party-window-title {
    font-family: 'Kanit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--theme-text-accent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.party-window-close-btn {
    background: transparent;
    border: none;
    color: var(--theme-text-secondary);
    font-size: 18px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.party-window-close-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    color: #ef4444;
}

.party-window-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.party-window-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 10px;
    text-align: center;
}

.party-empty-text {
    font-size: 13px;
    color: var(--theme-text-secondary);
    font-family: 'Sarabun', sans-serif;
}

.party-btn-create {
    background: #0284c7;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.party-btn-create:hover {
    background: #0369a1;
}

.party-section-label {
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--theme-text-secondary);
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.party-settings-panel {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.party-setting-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.party-setting-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.party-setting-desc {
    font-size: 10px;
    color: #f59e0b;
    font-style: italic;
}

.party-toggle-group {
    display: flex;
    gap: 4px;
}

.party-toggle-btn {
    flex: 1;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    color: var(--theme-text-secondary);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 11px;
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}
.party-toggle-btn:hover:not(.disabled) {
    border-color: var(--theme-border-accent);
    color: var(--theme-text-primary);
}
.party-toggle-btn.active {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-tab-active-border);
    color: var(--theme-text-accent);
    font-weight: 700;
}
.party-toggle-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.party-invite-form {
    display: flex;
    gap: 6px;
}

.party-input {
    flex: 1;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    color: var(--theme-text-primary);
    outline: none;
    font-family: 'Sarabun', sans-serif;
}
.party-input:focus {
    border-color: var(--theme-border-accent);
}

.party-btn-invite {
    background: #0284c7;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.party-btn-invite:hover {
    background: #0369a1;
}

.party-members-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.party-member-card {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.party-member-card.self {
    border-color: rgba(56, 189, 248, 0.5);
    background: rgba(14, 165, 233, 0.1);
}

.party-member-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.party-crown {
    font-size: 12px;
}

.party-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}
.party-status-dot.online {
    background: #22c55e;
    box-shadow: 0 0 5px #22c55e;
}
.party-status-dot.offline {
    background: #64748b;
}

.party-member-name {
    font-weight: 600;
    color: var(--theme-text-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.party-member-level {
    font-size: 11px;
    color: var(--theme-text-accent);
    font-weight: 600;
}

.party-member-map {
    font-size: 10px;
    color: var(--theme-text-secondary);
    background: rgba(255, 255, 255, 0.05);
    padding: 1px 4px;
    border-radius: 3px;
}

.party-member-bars {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.party-bar-row {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 10px;
}

.party-bar-track {
    flex: 1;
    height: 6px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.party-bar-fill.hp {
    height: 100%;
    background: var(--theme-hp-bar);
    transition: width 0.2s ease;
}
.party-bar-fill.sp {
    height: 100%;
    background: var(--theme-sp-bar);
    transition: width 0.2s ease;
}

.party-bar-text {
    font-size: 9px;
    font-family: monospace;
    color: var(--theme-text-secondary);
    min-width: 50px;
    text-align: right;
}

.party-member-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    margin-top: 2px;
}

.party-action-btn {
    border: none;
    border-radius: 3px;
    font-size: 10px;
    font-family: 'Kanit', sans-serif;
    font-weight: 600;
    padding: 2px 6px;
    cursor: pointer;
}
.party-action-btn.leader {
    background: #d97706;
    color: #ffffff;
}
.party-action-btn.leader:hover {
    background: #b45309;
}
.party-action-btn.kick {
    background: #dc2626;
    color: #ffffff;
}
.party-action-btn.kick:hover {
    background: #b91c1c;
}
.party-action-btn.leave,
.party-action-btn.disband {
    background: #dc2626;
    color: #ffffff;
    padding: 4px 10px;
    font-size: 11px;
}
.party-action-btn.leave:hover,
.party-action-btn.disband:hover {
    background: #b91c1c;
}

.party-window-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
    border-top: 1px solid var(--theme-slot-border);
}

/* UI-POLISH-0: Rebuilt Party Window Classes on the Kit */
.party-header-title-group {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    min-width: 0;
    flex: 1;
}

.party-rename-btn {
    color: var(--theme-text-secondary);
    font-size: var(--ui-font-sm);
}

.party-rename-bar,
.party-name-edit {
    display: flex;
    align-items: center;
    gap: var(--ui-space-1);
    padding: var(--ui-space-2) var(--ui-space-3);
    background: var(--ui-surface-inset, rgba(0, 0, 0, 0.25));
    border-bottom: 1px solid var(--theme-slot-border);
    flex: 0 0 auto;
}

.party-name-input {
    flex: 1;
    min-width: 0;
}

.party-name-save-btn,
.party-name-cancel-btn {
    flex-shrink: 0;
}

.party-no-party {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-3);
    padding: var(--ui-space-4) var(--ui-space-3);
    text-align: center;
}

.party-no-party-msg {
    margin: 0;
    color: var(--theme-text-secondary);
    font-size: var(--ui-font-sm);
}

.party-content {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-3);
}

.party-settings-section {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2);
    background: var(--ui-surface-card, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--ui-radius-md);
}

.party-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2);
}

.party-setting-val {
    font-variant-numeric: tabular-nums;
}

.party-btn-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.party-mode-btn {
    min-width: 44px;
}

.party-member-list {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
}

.party-members-header {
    margin-bottom: 2px;
}

.party-member-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) 10px;
    background: var(--ui-surface-card, rgba(0, 0, 0, 0.28));
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--ui-radius-md);
    transition: border-color 0.14s ease, background 0.14s ease;
}

.party-member-row.online:hover {
    border-color: var(--theme-border);
}

.party-member-row.offline {
    opacity: 0.55;
}

.party-member-row.out-of-range {
    opacity: 0.78;
}

.party-member-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.party-member-header-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.party-crown-icon {
    color: var(--theme-text-accent);
    font-size: var(--ui-font-sm);
    line-height: 1;
    flex-shrink: 0;
}

.party-member-lv-class {
    font-family: 'Kanit', sans-serif;
    font-size: var(--ui-font-xs);
    color: var(--theme-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

.party-bar-bg {
    width: 100%;
    height: 5px;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 3px;
    overflow: hidden;
}

.party-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.2s ease;
}

.party-bar-fill.mp {
    background: var(--theme-mp-bar);
}

.party-member-substatus {
    font-family: 'Sarabun', sans-serif;
    font-size: var(--ui-font-xs);
    color: var(--theme-text-secondary);
}

.btn-lead,
.btn-kick {
    flex-shrink: 0;
}

.party-footer-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-3);
    background: rgba(0, 0, 0, 0.14);
    border-top: 1px solid var(--theme-slot-border);
    flex-shrink: 0;
}

.party-invite-input-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    flex: 1;
    min-width: 0;
}

.party-invite-input {
    flex: 1;
    min-width: 0;
    height: var(--ui-ctl-h-md);
    padding: 0 10px;
    background: var(--ui-input-bg, var(--theme-slot-bg));
    color: var(--theme-text-primary);
    border: 1px solid var(--ui-input-border, var(--theme-slot-border));
    border-radius: var(--ui-radius-sm);
    font-family: 'Sarabun', 'Kanit', sans-serif;
    font-size: var(--ui-font-sm);
}

.party-btn-leave {
    flex-shrink: 0;
}

.party-btn-create {
    height: var(--ui-ctl-h-md);
    padding: 0 var(--ui-space-3);
    background: var(--ui-btn-primary-bg, var(--theme-tab-active-bg));
    color: var(--ui-btn-primary-text, var(--theme-text-accent));
    border: 1px solid var(--ui-btn-primary-border, var(--theme-border-accent));
    border-radius: var(--ui-radius-sm);
    font-family: 'Kanit', sans-serif;
    font-size: var(--ui-font-sm);
    font-weight: 500;
}

.party-btn-create:hover:not(:disabled):not(.disabled) {
    background: var(--ui-btn-primary-bg-hover, var(--theme-tab-active-bg));
    border-color: var(--theme-border-accent);
}

.party-btn-invite {
    height: var(--ui-ctl-h-md);
    padding: 0 var(--ui-space-3);
    background: var(--ui-btn-bg, var(--theme-tab-bg));
    color: var(--theme-text-primary);
    border: 1px solid var(--theme-border);
    border-radius: var(--ui-radius-sm);
    font-family: 'Kanit', sans-serif;
    font-size: var(--ui-font-sm);
    font-weight: 500;
}

.party-btn-invite:hover:not(:disabled):not(.disabled) {
    background: var(--ui-btn-bg-hover, var(--theme-tab-active-bg));
    color: var(--theme-text-accent);
    border-color: var(--theme-border-accent);
}

/* 3. Compact Party HUD Overlay (UI-POLISH-4: stacked 8px below the character HUD block & menu row, styled on the UI kit) */
.party-tab-badge {
    margin-left: 4px;
}

.party-hud-overlay {
    position: fixed;
    top: calc(176px + var(--safe-area-top));
    left: calc(14px + var(--safe-area-left));
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 50;
    pointer-events: auto;
    width: 184px;
}

.controller-layout .party-hud-overlay,
.controller-mode .party-hud-overlay {
    top: calc(88px + var(--safe-area-top));
    left: calc(10px + var(--safe-area-left));
    width: 168px;
    z-index: 50;
}

.controller-mode:has(.controller-tabbed-modal) .party-hud-overlay,
.controller-mode:has(.inventory-window) .party-hud-overlay,
.controller-mode:has(.status-window) .party-hud-overlay,
.controller-mode:has(.equipment-window) .party-hud-overlay,
.controller-mode:has(.skill-tree-window) .party-hud-overlay,
.controller-mode:has(.quest-journal-window) .party-hud-overlay,
.controller-mode:has(.party-window-container) .party-hud-overlay,
.controller-mode:has(.guild-window) .party-hud-overlay,
.controller-mode:has(.profession-window) .party-hud-overlay,
.controller-mode:has(.sov-window) .party-hud-overlay,
.controller-mode:has(.smith-window) .party-hud-overlay,
.controller-mode:has(.barber-window) .party-hud-overlay,
.controller-mode:has(.auction-house-window) .party-hud-overlay,
.controller-mode:has(.trade-guild-window) .party-hud-overlay,
.controller-mode:has(.storage-window) .party-hud-overlay,
.controller-mode:has(.trade-window) .party-hud-overlay,
.controller-mode:has(.shop-window) .party-hud-overlay,
.controller-mode:has(.dialog-window) .party-hud-overlay,
.controller-mode:has(.inspect-window) .party-hud-overlay {
    display: none !important;
}

.party-hud-member {
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: var(--ui-radius-sm, 6px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.38);
    padding: 4px 8px 5px 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-family: var(--theme-font, 'Kanit', sans-serif);
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.party-hud-member.self {
    border-color: var(--theme-border-accent);
}

.party-hud-member.offline {
    opacity: 0.5;
    filter: saturate(0.45);
}

.party-hud-member-row,
.party-hud-header {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    line-height: 14px;
    min-width: 0;
}

.party-hud-crown {
    font-size: 11px;
    line-height: 1;
    color: var(--theme-text-accent);
    flex-shrink: 0;
}

.party-hud-dot,
.party-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
/* ECON-2b: a member running AUTO soulless (the status icon) */
.party-soulless {
    width: 12px;
    height: 12px;
    image-rendering: pixelated;
    flex-shrink: 0;
}
.party-hud-dot.online,
.party-dot.online {
    background: #22c55e;
    box-shadow: 0 0 4px rgba(34, 197, 94, 0.65);
}
.party-hud-dot.offline,
.party-dot.offline {
    background: #64748b;
}

.party-hud-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--theme-text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.party-hud-level {
    font-size: 10px;
    font-weight: 600;
    color: var(--theme-text-accent);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.party-hud-offline-tag {
    font-size: 9px;
    font-weight: 700;
    color: var(--theme-text-secondary);
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.party-hud-map {
    font-size: 10px;
    color: var(--theme-text-secondary);
    max-width: 56px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

.party-hud-bar-track,
.party-hud-bar-bg {
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 2px;
    overflow: hidden;
}

.party-hud-bar-fill.hp {
    height: 100%;
    background: var(--theme-hp-bar, linear-gradient(90deg, #b91c1c 0%, #ef4444 100%));
    transition: width 0.2s ease;
}
.party-hud-bar-fill.sp {
    height: 100%;
    background: var(--theme-sp-bar, linear-gradient(90deg, #047857 0%, #10b981 100%));
    transition: width 0.2s ease;
}

/* ==========================================================================
   TASK-129: Capacity, Queue, and Congestion UI Modals
   ========================================================================== */

/* Universal Min Touch Target for Mobile / Controller (>= 48px) */
.min-touch-target {
    min-height: 48px;
    box-sizing: border-box;
}

/* Density Badges */
.density-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.density-badge.normal {
    background: rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(34, 197, 94, 0.6);
    color: #4ade80;
}
.density-badge.crowded {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.6);
    color: #fbbf24;
}
.density-badge.full {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.6);
    color: #f87171;
}

/* 1. Map Full Offer Modal (TASK-129 Item 2) */
.map-offer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.15s ease-out;
}

.map-offer-card {
    width: 440px;
    max-width: 92vw;
    max-height: 90vh;
    max-height: 90dvh;
    background: #1e293b;
    border: 2px solid #eab308;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8), 0 0 16px rgba(234, 179, 8, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.map-offer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: rgba(15, 23, 42, 0.85);
    border-bottom: 1px solid rgba(234, 179, 8, 0.3);
}

.map-offer-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #facc15;
    letter-spacing: 0.5px;
}

.map-offer-close-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 18px;
    cursor: pointer;
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
}
.map-offer-close-btn:hover {
    color: #f8fafc;
}

.map-offer-body {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}

.map-offer-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #cbd5e1;
}

.map-offer-highlight {
    color: #38bdf8;
    font-weight: 700;
}

.map-offer-queue-info {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
}

.queue-info-label {
    color: #94a3b8;
}

.queue-info-val {
    font-weight: 800;
    color: #38bdf8;
}

.queue-info-wait {
    margin-left: auto;
    color: #facc15;
    font-weight: 600;
}

.map-offer-alts-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.map-offer-alts-title {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.map-offer-alts-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 160px;
    overflow-y: auto;
}

.map-alt-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 6px 10px;
    gap: 8px;
}

.map-alt-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    overflow: hidden;
}

.map-alt-name {
    font-weight: 600;
    font-size: 13px;
    color: #f8fafc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-alt-count {
    font-size: 11px;
    color: #94a3b8;
}

.map-alt-go-btn {
    background: #0284c7;
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #fff;
    padding: 0 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    white-space: nowrap;
    transition: background 0.15s;
}
.map-alt-go-btn:hover {
    background: #0369a1;
}

.map-offer-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px;
    background: rgba(15, 23, 42, 0.85);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.queue-btn-join {
    background: #eab308;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #0f172a;
    font-weight: 700;
    font-size: 13px;
    padding: 0 20px;
    border-radius: 6px;
    cursor: pointer;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.queue-btn-join:hover {
    background: #facc15;
}

.queue-btn-cancel {
    background: #334155;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #f8fafc;
    font-weight: 600;
    font-size: 13px;
    padding: 0 16px;
    border-radius: 6px;
    cursor: pointer;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.queue-btn-cancel:hover {
    background: #475569;
}

/* 2. In-Game Floating Queue Badge (TASK-129 Item 3, UI-POLISH-4 HUD band z-index) */
.in-game-queue-badge {
    position: fixed;
    top: calc(56px + var(--safe-area-top));
    right: calc(180px + var(--safe-area-right));
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(234, 179, 8, 0.5);
    border-radius: 24px;
    padding: 4px 10px 4px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 55;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.queue-badge-content {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.queue-badge-icon {
    font-size: 13px;
}

.queue-badge-title {
    font-weight: 600;
    color: #f8fafc;
}

.queue-badge-pos {
    font-weight: 800;
    color: #38bdf8;
}

.queue-badge-wait {
    color: #facc15;
    font-size: 11px;
}

.queue-badge-cancel {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #f87171;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.15s;
}
.queue-badge-cancel:hover {
    background: #ef4444;
    color: #fff;
}

/* 3. Map Ready Confirmation Modal (TASK-129 Item 3) */
.map-ready-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.15s ease-out;
}

.map-ready-card {
    width: 380px;
    max-width: 90vw;
    background: #1e293b;
    border: 2px solid #22c55e;
    border-radius: 12px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8), 0 0 20px rgba(34, 197, 94, 0.35);
    animation: pulseBorder 2s infinite ease-in-out;
}

@keyframes pulseBorder {
    0%, 100% { border-color: #22c55e; box-shadow: 0 0 20px rgba(34, 197, 94, 0.35); }
    50% { border-color: #4ade80; box-shadow: 0 0 30px rgba(74, 222, 128, 0.55); }
}

.map-ready-icon-anim {
    font-size: 36px;
}

.map-ready-title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #4ade80;
    letter-spacing: 0.5px;
}

.map-ready-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #cbd5e1;
}

.map-ready-map-name {
    color: #facc15;
    font-weight: 700;
}

.map-ready-timer-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 6px;
    padding: 8px 16px;
}

.map-ready-timer-label {
    font-size: 12px;
    color: #94a3b8;
}

.map-ready-countdown {
    font-size: 20px;
    font-weight: 800;
    color: #4ade80;
}

.map-ready-actions {
    display: flex;
    gap: 12px;
    width: 100%;
    margin-top: 8px;
}

.map-ready-btn-enter {
    flex: 1;
    background: #16a34a;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.map-ready-btn-enter:hover {
    background: #22c55e;
}

.map-ready-btn-decline {
    flex: 1;
    background: #dc2626;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.map-ready-btn-decline:hover {
    background: #ef4444;
}

/* 4. AFK Idle Warning Modal (TASK-129 Item 5) */
.afk-warning-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(6px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.15s ease-out;
}

.afk-warning-card {
    width: 380px;
    max-width: 90vw;
    background: #1e293b;
    border: 2px solid #ef4444;
    border-radius: 12px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8), 0 0 24px rgba(239, 68, 68, 0.35);
}

.afk-warning-icon {
    font-size: 38px;
}

.afk-warning-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #f87171;
    letter-spacing: 0.5px;
}

.afk-warning-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #cbd5e1;
    font-family: 'Kanit', 'Sarabun', sans-serif;
}

.afk-timer-highlight {
    color: #ef4444;
    font-weight: 800;
    font-size: 16px;
}

.afk-warning-actions {
    width: 100%;
    margin-top: 6px;
}

.afk-btn-confirm {
    width: 100%;
    background: #0284c7;
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    border-radius: 8px;
    cursor: pointer;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
}
.afk-btn-confirm:hover {
    background: #0369a1;
}

/* 6. Portal Density Indicator (TASK-129 Item 4, UI-POLISH-4 HUD band z-index) */
.portal-density-indicator {
    position: fixed;
    top: calc(56px + var(--safe-area-top));
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(56, 189, 248, 0.5);
    border-radius: 20px;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 55;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 10px rgba(56, 189, 248, 0.2);
    animation: fadeIn 0.2s ease-out;
}

.portal-indicator-icon {
    font-size: 16px;
}

.portal-indicator-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.portal-indicator-title {
    font-size: 12px;
    font-weight: 700;
    color: #f8fafc;
}

.portal-indicator-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.portal-status-label {
    font-size: 11px;
    color: #94a3b8;
}

/* 5. Mobile (844x390 landscape) Adjustments for Modals */
@media (max-width: 900px) and (max-height: 450px) {
    .map-offer-card,
    .map-ready-card,
    .afk-warning-card {
        padding: 12px 16px;
        gap: 8px;
    }
    .map-offer-body {
        padding: 8px 12px;
        gap: 8px;
    }
    .map-offer-alts-list {
        max-height: 90px;
    }
    .in-game-queue-badge {
        top: calc(8px + var(--safe-area-top));
        right: calc(80px + var(--safe-area-right));
        padding: 2px 8px;
        font-size: 11px;
    }
}

/* ==========================================================================
   MINIMAP UI (TASK-151: Corner Minimap & Full Map Window)
   ========================================================================== */

/* 1. Corner Minimap (PC: Top-Right) */
.minimap-corner {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 50;
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    user-select: none;
    transition: all 0.2s ease;
}

.minimap-corner.minimap-folded {
    height: auto;
}

.minimap-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    background: rgba(15, 23, 42, 0.6);
    border-bottom: 1px solid var(--theme-border);
}

.minimap-map-name {
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--theme-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.minimap-fold-btn {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--theme-text-muted);
    font-family: monospace;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: all 0.15s ease;
}

.minimap-fold-btn:hover {
    color: var(--theme-text-primary);
    background: var(--theme-slot-bg);
    border-color: var(--theme-border);
}

.minimap-canvas-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: #000000;
    overflow: hidden;
}

.minimap-canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    display: block;
}

.minimap-coords {
    font-family: 'Kanit', monospace, sans-serif;
    font-size: 11px;
    color: var(--theme-text-muted);
    text-align: center;
    padding: 2px 4px;
    background: rgba(15, 23, 42, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
/* 2. Full Map Window (PC & Mobile) */
.fullmap-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullmap-window {
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    user-select: none;
    max-width: 90vw;
    max-height: 85vh;
    max-height: 85dvh;
}

.fullmap-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    background: rgba(15, 23, 42, 0.75);
    border-bottom: 1px solid var(--theme-border);
}

.fullmap-title {
    font-family: 'Kanit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--theme-text-primary);
}

.fullmap-close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--theme-text-muted);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s ease;
}

.fullmap-close-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

.fullmap-body {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #000000;
    overflow: hidden;
}

.fullmap-controls {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 10;
}

.fullmap-ctrl-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-slot-bg);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    color: var(--theme-text-primary);
    font-family: monospace;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    transition: all 0.15s ease;
}

.fullmap-ctrl-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.fullmap-ctrl-btn:not(:disabled):hover {
    background: var(--theme-slot-hover-bg);
    border-color: var(--theme-border-accent);
    transform: scale(1.05);
}

.fullmap-canvas-container {
    position: relative;
    overflow: hidden;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
}

.fullmap-canvas-container:active {
    cursor: grabbing;
}

.fullmap-canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    display: block;
}

.fullmap-marker-tooltip {
    position: absolute;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid var(--theme-border-accent);
    border-radius: 4px;
    padding: 3px 8px;
    color: #f8fafc;
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 500;
    pointer-events: none;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

.fullmap-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 6px 14px;
    background: rgba(15, 23, 42, 0.85);
    border-top: 1px solid var(--theme-border);
}

.fullmap-legend-title {
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--theme-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fullmap-legend-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.fullmap-legend-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fullmap-legend-icon {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullmap-legend-glyph {
    color: #ffffff;
    font-size: 8px;
    font-weight: bold;
    line-height: 1;
}

.fullmap-legend-label {
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    color: var(--theme-text-primary);
}

/* 3. Controller Mode & Mobile Touch Targets */
.controller-mode .minimap-corner {
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: calc(304px + env(safe-area-inset-right, 0px));
    border-radius: 8px;
}

.controller-mode .minimap-fold-btn {
    min-width: 48px;
    min-height: 48px;
}

.controller-mode .fullmap-close-btn {
    min-width: 48px;
    min-height: 48px;
    font-size: 20px;
}

.controller-mode .fullmap-ctrl-btn {
    min-width: 48px;
    min-height: 48px;
    font-size: 22px;
}

@media (max-width: 900px) and (max-height: 450px) {
    .minimap-corner {
        top: calc(10px + env(safe-area-inset-top, 0px));
        right: calc(304px + env(safe-area-inset-right, 0px));
        border-radius: 8px;
    }

    .fullmap-overlay.fullmap-mobile {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        z-index: 10000;
    }

    .fullmap-overlay.fullmap-mobile .fullmap-window {
        padding: var(--safe-area-top) var(--safe-area-right) var(--safe-area-bottom) var(--safe-area-left);
        box-sizing: border-box;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-width: 100vw;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        border: none;
    }
}

/* =======================================================
   WORLD-MAP: World View, Real Zoom, Coordinate Search, Rulers & Side Panel
   ========================================================================== */

.fullmap-window {
    max-width: 94vw;
    max-height: 88vh;
    max-height: 88dvh;
}

.fullmap-header {
    gap: 10px;
    padding: 6px 10px;
    flex-wrap: nowrap;
}

.fullmap-header-left,
.fullmap-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.fullmap-header-left {
    flex: 1 1 auto;
    overflow: hidden;
}

.fullmap-header-right {
    flex: 0 0 auto;
}

.fullmap-view-tabs {
    display: inline-flex;
    align-items: center;
    background: rgba(2, 6, 23, 0.65);
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
    flex-shrink: 0;
}

.fullmap-view-btn {
    height: 24px;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--theme-text-secondary);
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.14s ease;
    white-space: nowrap;
}

.fullmap-view-btn:hover {
    color: var(--theme-text-primary);
}

.fullmap-view-btn.active {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-tab-active-border);
    color: var(--theme-text-accent);
}

.fullmap-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fullmap-meta-pill {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 7px;
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: #cbd5e1;
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

.fullmap-pvp-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 7px;
    border-radius: 4px;
    font-family: 'Kanit', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.fullmap-pvp-badge.pvp-safe,
.pvp-safe {
    background: rgba(56, 189, 248, 0.14);
    border: 1px solid rgba(56, 189, 248, 0.42);
    color: #7dd3fc;
}

.fullmap-pvp-badge.pvp-red,
.pvp-red {
    background: rgba(239, 68, 68, 0.16);
    border: 1px solid rgba(239, 68, 68, 0.52);
    color: #fca5a5;
}

.fullmap-pvp-badge.pvp-black,
.pvp-black {
    background: rgba(127, 29, 29, 0.35);
    border: 1px solid rgba(248, 113, 113, 0.65);
    color: #fecaca;
}

.fullmap-mymap-btn {
    height: 24px;
    padding: 0 8px;
    border-radius: 5px;
    border: 1px solid rgba(56, 189, 248, 0.55);
    background: rgba(14, 116, 144, 0.25);
    color: #7dd3fc;
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.14s ease;
}

.fullmap-mymap-btn:hover {
    background: rgba(14, 116, 144, 0.42);
    border-color: #38bdf8;
    color: #f8fafc;
}

.fullmap-coord-bar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(2, 6, 23, 0.6);
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    padding: 2px 6px;
}

.fullmap-coord-label {
    font-family: 'Kanit', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: var(--theme-text-muted);
    user-select: none;
}

.fullmap-coord-input {
    width: 36px;
    height: 20px;
    padding: 0 4px;
    border-radius: 4px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.85);
    color: var(--theme-text-primary);
    font-family: 'Kanit', monospace, sans-serif;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    box-sizing: border-box;
    outline: none;
}

.fullmap-coord-input:focus {
    border-color: var(--theme-border-accent);
    box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.28);
}

.fullmap-coord-go {
    height: 20px;
    padding: 0 7px;
    border-radius: 4px;
    border: 1px solid var(--theme-tab-active-border);
    background: var(--theme-tab-active-bg);
    color: var(--theme-text-accent);
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.14s ease;
}

.fullmap-coord-go:hover {
    border-color: var(--theme-border-accent);
    color: #ffffff;
}

.fullmap-pin-clear {
    height: 20px;
    padding: 0 6px;
    border-radius: 4px;
    border: 1px solid rgba(250, 204, 21, 0.55);
    background: rgba(234, 179, 8, 0.16);
    color: #fde047;
    font-family: 'Kanit', monospace, sans-serif;
    font-size: 10px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    white-space: nowrap;
}

.fullmap-pin-clear:hover {
    background: rgba(239, 68, 68, 0.22);
    border-color: rgba(239, 68, 68, 0.6);
    color: #fecaca;
}

.fullmap-coord-hint {
    font-family: 'Kanit', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #f87171;
    padding: 0 3px;
    white-space: nowrap;
}

.fullmap-scale-readout {
    min-width: 38px;
    text-align: right;
    font-family: 'Kanit', monospace, sans-serif;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--theme-text-muted);
}

.fullmap-drawer-btn {
    height: 28px;
    padding: 0 8px;
    border-radius: 5px;
    border: 1px solid var(--theme-border);
    background: var(--theme-slot-bg);
    color: var(--theme-text-secondary);
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.fullmap-drawer-btn.active {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-tab-active-border);
    color: var(--theme-text-accent);
}

.fullmap-main-row {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 0;
    background: #070b12;
}

.fullmap-controls {
    top: 24px;
    left: 24px;
}

.fullmap-zoom-in,
.fullmap-zoom-out {
    user-select: none;
}

.fullmap-cell-readout {
    position: absolute;
    left: 24px;
    bottom: 8px;
    z-index: 12;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 5px;
    background: rgba(8, 12, 20, 0.86);
    border: 1px solid rgba(148, 163, 184, 0.25);
    font-family: 'Kanit', monospace, sans-serif;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.fullmap-readout-self {
    color: #7dd3fc;
    font-weight: 600;
}

.fullmap-readout-cursor {
    color: #e2e8f0;
}

.fullmap-side-panel {
    width: 236px;
    max-height: 460px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(11, 16, 27, 0.94);
    border-left: 1px solid var(--theme-border);
    overflow-y: auto;
    box-sizing: border-box;
}

.fullmap-level-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.fullmap-level-chip {
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.65);
    color: var(--theme-text-secondary);
    font-family: 'Kanit', sans-serif;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
}

.fullmap-level-chip:hover {
    color: var(--theme-text-primary);
    border-color: rgba(148, 163, 184, 0.45);
}

.fullmap-level-chip.active {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-tab-active-border);
    color: var(--theme-text-accent);
}

.fullmap-side-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.fullmap-side-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.fullmap-side-name {
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--theme-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fullmap-side-open-btn {
    height: 20px;
    padding: 0 7px;
    border-radius: 4px;
    border: 1px solid var(--theme-tab-active-border);
    background: var(--theme-tab-active-bg);
    color: var(--theme-text-accent);
    font-family: 'Kanit', sans-serif;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

.fullmap-side-badges {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.fullmap-side-section {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fullmap-side-section-title {
    font-family: 'Kanit', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-muted);
}

.fullmap-side-empty {
    font-size: 11px;
    color: var(--theme-text-muted);
    padding: 1px 0;
}

.fullmap-side-item {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(15, 23, 42, 0.55);
    color: var(--theme-text-primary);
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
    transition: all 0.12s ease;
}

.fullmap-side-item:hover {
    background: var(--theme-slot-hover-bg);
    border-color: var(--theme-border-accent);
}

.fullmap-side-item-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fullmap-side-item-coords {
    flex: 0 0 auto;
    font-family: 'Kanit', monospace, sans-serif;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: var(--theme-text-muted);
}

@keyframes fullmap-zoom-enter-area {
    0% {
        opacity: 0.72;
        transform: scale(0.84);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fullmap-zoom-enter-world {
    0% {
        opacity: 0.78;
        transform: scale(1.16);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.fullmap-stage-enter-area {
    animation: fullmap-zoom-enter-area 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fullmap-stage-enter-world {
    animation: fullmap-zoom-enter-world 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .fullmap-stage-enter-area,
    .fullmap-stage-enter-world {
        animation: none !important;
        transition: none !important;
    }
}

.fullmap-btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    pointer-events: none;
    box-sizing: border-box;
}

.fullmap-side-item-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    pointer-events: none;
    box-sizing: border-box;
}

/* Phone / Controller drawer & compact header (844 x 390) */
.fullmap-side-panel.fullmap-drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 248px;
    max-width: 72vw;
    max-height: 100%;
    z-index: 25;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.65);
    transform: translateX(102%);
    transition: transform 0.18s ease;
}

.fullmap-side-panel.fullmap-drawer:not(.open) {
    display: none;
    visibility: hidden;
    pointer-events: none;
}

.fullmap-side-panel.fullmap-drawer.open {
    display: flex;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

.controller-mode .fullmap-window {
    max-width: 96vw;
    max-height: 94vh;
    max-height: 94dvh;
}

.controller-mode .fullmap-header {
    height: 48px;
    min-height: 48px;
    padding: 0 8px;
    gap: 4px;
    box-sizing: border-box;
}

.controller-mode .fullmap-header-left,
.controller-mode .fullmap-header-right {
    gap: 4px;
}

.controller-mode .fullmap-view-tabs,
.controller-mode .fullmap-coord-bar {
    background: transparent;
    border-color: transparent;
    padding: 0;
    gap: 2px;
}

.controller-mode .fullmap-view-btn,
.controller-mode .fullmap-mymap-btn,
.controller-mode .fullmap-coord-go,
.controller-mode .fullmap-pin-clear,
.controller-mode .fullmap-drawer-btn,
.controller-mode .fullmap-level-chip,
.controller-mode .fullmap-side-open-btn {
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    margin: 0;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
}

.controller-mode .fullmap-view-btn .fullmap-btn-pill {
    height: 24px;
    padding: 0 8px;
    border-radius: 4px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(2, 6, 23, 0.65);
}

.controller-mode .fullmap-view-btn.active .fullmap-btn-pill {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-tab-active-border);
    color: var(--theme-text-accent);
}

.controller-mode .fullmap-mymap-btn .fullmap-btn-pill {
    height: 24px;
    padding: 0 7px;
    border-radius: 5px;
    border: 1px solid rgba(56, 189, 248, 0.55);
    background: rgba(14, 116, 144, 0.25);
    color: #7dd3fc;
}

.controller-mode .fullmap-coord-input {
    width: 36px;
    height: 22px;
    font-size: 11px;
}

.controller-mode .fullmap-coord-go .fullmap-btn-pill {
    height: 22px;
    padding: 0 8px;
    border-radius: 4px;
    border: 1px solid var(--theme-tab-active-border);
    background: var(--theme-tab-active-bg);
    color: var(--theme-text-accent);
}

.controller-mode .fullmap-pin-clear .fullmap-btn-pill {
    height: 22px;
    padding: 0 6px;
    border-radius: 4px;
    border: 1px solid rgba(250, 204, 21, 0.55);
    background: rgba(234, 179, 8, 0.16);
    color: #fde047;
}

.controller-mode .fullmap-drawer-btn .fullmap-btn-pill {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    border: 1px solid var(--theme-border);
    background: var(--theme-slot-bg);
    color: var(--theme-text-secondary);
}

.controller-mode .fullmap-drawer-btn.active .fullmap-btn-pill {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-tab-active-border);
    color: var(--theme-text-accent);
}

.controller-mode .fullmap-level-chip .fullmap-btn-pill {
    height: 22px;
    padding: 0 7px;
    border-radius: 4px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.65);
    color: var(--theme-text-secondary);
}

.controller-mode .fullmap-level-chip.active .fullmap-btn-pill {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-tab-active-border);
    color: var(--theme-text-accent);
}

.controller-mode .fullmap-side-open-btn .fullmap-btn-pill {
    height: 22px;
    padding: 0 8px;
    border-radius: 4px;
    border: 1px solid var(--theme-tab-active-border);
    background: var(--theme-tab-active-bg);
    color: var(--theme-text-accent);
}

.controller-mode .fullmap-side-item {
    min-width: 48px;
    min-height: 48px;
    padding: 2px 0;
    margin: 0;
    background: transparent;
    border-color: transparent;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    box-sizing: border-box;
}

.controller-mode .fullmap-side-item .fullmap-side-item-inner {
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(15, 23, 42, 0.55);
}

.controller-mode .fullmap-side-item:hover .fullmap-side-item-inner {
    background: var(--theme-slot-hover-bg);
    border-color: var(--theme-border-accent);
}

.controller-mode .fullmap-legend {
    padding: 4px 10px;
    gap: 8px;
}

/* =======================================================
   Bug Report Modal & Menu Icon (OPS-001 Item 2)
   ======================================================= */
.menu-icon-custom.icon-bug {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 15px;
    line-height: 1;
    pointer-events: none;
}

.bug-report-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(2px);
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.bug-report-modal {
    width: 90%;
    max-width: 360px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    background: var(--theme-header-bg, rgba(16, 20, 28, 0.96));
    border: 1px solid var(--theme-border-accent, #eab308);
    border-radius: var(--theme-radius, 8px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    font-family: 'Kanit', sans-serif;
    color: var(--theme-text-primary, #f8fafc);
}

.theme-warm-light .bug-report-modal {
    background: #fdf6e7;
    border-color: #d97706;
    color: #1e140a;
}

.bug-report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid var(--theme-slot-border, rgba(255, 255, 255, 0.1));
}

.theme-warm-light .bug-report-header {
    background: rgba(0, 0, 0, 0.04);
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

.bug-report-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--theme-text-accent, #fde047);
}

.theme-warm-light .bug-report-title {
    color: #b45309;
}

.bug-report-close-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 20px;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
}

.bug-report-close-btn:hover {
    color: #f8fafc;
}

.theme-warm-light .bug-report-close-btn {
    color: #78716c;
}

.theme-warm-light .bug-report-close-btn:hover {
    color: #1e140a;
}

.bug-report-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bug-report-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bug-report-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bug-report-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--theme-text-secondary, #cbd5e1);
}

.theme-warm-light .bug-report-label {
    color: #44403c;
}

.bug-report-counter {
    font-size: 11px;
    color: #64748b;
}

.bug-report-counter.overflow {
    color: #ef4444;
}

.bug-report-category-group {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.bug-report-cat-btn {
    padding: 6px 2px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Kanit', sans-serif;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.3);
    color: #cbd5e1;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}

.theme-warm-light .bug-report-cat-btn {
    background: #f5eedc;
    border-color: rgba(0, 0, 0, 0.15);
    color: #44403c;
}

.bug-report-cat-btn.active {
    background: var(--theme-tab-active-bg, rgba(234, 179, 8, 0.25));
    border-color: var(--theme-border-accent, #eab308);
    color: var(--theme-text-accent, #fde047);
}

.theme-warm-light .bug-report-cat-btn.active {
    background: #fed7aa;
    border-color: #ea580c;
    color: #9a3412;
}

.bug-report-textarea {
    width: 100%;
    height: 90px;
    resize: none;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.4);
    color: #f8fafc;
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    padding: 8px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s;
}

.theme-warm-light .bug-report-textarea {
    background: #fff;
    border-color: #d6d3d1;
    color: #1e140a;
}

.bug-report-textarea:focus {
    border-color: var(--theme-border-accent, #eab308);
}

.theme-warm-light .bug-report-textarea:focus {
    border-color: #d97706;
}

.bug-report-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.15);
}

.theme-warm-light .bug-report-actions {
    border-top-color: rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.03);
}

.bug-report-btn {
    padding: 6px 16px;
    border-radius: 4px;
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.bug-report-btn.cancel {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #94a3b8;
}

.bug-report-btn.cancel:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: #f8fafc;
}

.theme-warm-light .bug-report-btn.cancel {
    border-color: #d6d3d1;
    color: #78716c;
}

.theme-warm-light .bug-report-btn.cancel:hover {
    border-color: #a8a29e;
    color: #1c1917;
}

.bug-report-btn.send {
    background: var(--theme-tab-active-bg, #ca8a04);
    border: 1px solid var(--theme-border-accent, #eab308);
    color: #ffffff;
}

.theme-warm-light .bug-report-btn.send {
    background: #d97706;
    border-color: #b45309;
    color: #ffffff;
}

.bug-report-btn.send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---- Soul Drive AUTO switch (TASK-175 A2): top centre, glows while the bot drives ---- */
.auto-btn {
    position: fixed;
    top: calc(10px + var(--safe-area-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 55;
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 16px;
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: 999px;
    box-shadow: var(--theme-shadow);
    color: var(--theme-text-secondary);
    font-weight: 700;
    letter-spacing: 0.12em;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}
.auto-btn:hover {
    border-color: var(--theme-border-accent);
    color: var(--theme-text-primary);
}
.auto-btn .auto-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.6);
}
.auto-btn.auto-on {
    color: var(--theme-text-accent);
    border-color: var(--theme-border-accent);
    box-shadow: var(--theme-shadow), 0 0 14px rgba(240, 201, 70, 0.45);
}
.auto-btn.auto-on .auto-dot {
    background: #4ade80;
    box-shadow: 0 0 8px #4ade80;
    animation: auto-pulse 1.4s ease-in-out infinite;
}
.auto-btn.auto-locked {
    opacity: 0.55;
    cursor: default;
}
@keyframes auto-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
/* Controller mode: the minimap sits right of centre and the toasts at the top centre, so the
   pill goes in the gap right of the status panel (lane F A2: never under a toast) */
.controller-mode .auto-btn {
    left: calc(200px + var(--safe-area-left));
    transform: none;
    min-height: var(--touch-target-min-size);
    font-size: var(--touch-font-min-size);
}

/* ---- Soul Drive tab (TASK-175 A4d): Equipment window "Gear | Soul Drive" ---- */
.equip-tabs {
    display: flex;
    gap: 2px;
    margin-left: auto;
    margin-right: 4px;
}
.equip-tab-btn {
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    padding: 2px 7px;
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    background: var(--theme-tab-bg);
    color: var(--theme-text-secondary);
    cursor: pointer;
    white-space: nowrap;
}
.equip-tab-btn.active {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-tab-active-border);
    color: var(--theme-text-primary);
}
.sd-panel {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 11px;
    color: var(--theme-text-primary);
}
.sd-readonly {
    padding: 5px 8px;
    border-radius: var(--theme-radius-inner);
    border: 1px solid rgba(240, 201, 70, 0.5);
    background: rgba(240, 201, 70, 0.12);
    color: var(--theme-text-accent);
    font-weight: 600;
    text-align: center;
}
.sd-head {
    display: flex;
    align-items: center;
}
.sd-level {
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-text-accent);
}
.sd-meter,
.sd-line {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 16px;
}
.sd-meter-label {
    position: relative;
    flex: 0 0 64px;
    color: var(--theme-text-secondary);
    cursor: help;
    white-space: nowrap;
}
.sd-offline .sd-meter-label {
    flex: 1 1 auto;
}
.sd-bar {
    flex: 1 1 auto;
    height: 7px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--theme-slot-border);
    overflow: hidden;
}
.sd-bar-fill {
    height: 100%;
    border-radius: 4px;
}
.sd-bar-fill.compute { background: linear-gradient(90deg, #0e7490 0%, #22d3ee 100%); }
.sd-bar-fill.memory { background: linear-gradient(90deg, #6d28d9 0%, #a78bfa 100%); }
.sd-bar-fill.battery { background: linear-gradient(90deg, #15803d 0%, #4ade80 100%); }
.sd-meter.over .sd-bar-fill.compute { background: linear-gradient(90deg, #b91c1c 0%, #f87171 100%); }
.sd-meter.over .sd-meter-val,
.sd-over {
    color: #f87171;
    font-weight: 700;
}
.sd-meter.empty .sd-meter-val { color: #f87171; }
.sd-meter-val {
    flex: 0 0 auto;
    min-width: 30px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* hover help (long-press on touch) */
.sd-tip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    width: 210px;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid var(--theme-border-accent);
    background: rgba(15, 23, 42, 0.95);
    color: #f8fafc;
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    white-space: normal;
    pointer-events: none;
    z-index: 120;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    transition: opacity 0.15s ease;
}
.sd-meter-label:hover .sd-tip,
.sd-slot:hover .sd-slot-tip {
    visibility: visible;
    opacity: 1;
}
.theme-warm-light .sd-tip {
    background: #fdf8f0;
    color: #451a03;
    border-color: #8c6d48;
}
.sd-slots {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    margin: 4px 0 2px;
}
.sd-slot {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 42px;
    padding: 3px 5px;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    user-select: none;
    box-sizing: border-box;
    min-width: 0;
}
.sd-slot.filled { cursor: pointer; }
.sd-slot.filled:hover {
    border-color: var(--theme-slot-hover-border);
    box-shadow: 0 0 8px var(--theme-slot-hover-glow);
}
.sd-slot.locked { opacity: 0.55; }
.sd-slot.valid-target {
    border: 1px dashed rgba(34, 197, 94, 0.7);
    background-color: rgba(34, 197, 94, 0.06);
}
.sd-slot.drag-over.valid-drop {
    border-color: #22c55e;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.6);
    background-color: rgba(34, 197, 94, 0.18);
}
.sd-slot.drag-over.invalid-drop {
    border-color: #ef4444;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.6);
    background-color: rgba(239, 68, 68, 0.18);
}
.sd-slot-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-secondary);
    font-size: 13px;
}
.sd-slot-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.sd-slot-label {
    font-size: 9px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--theme-text-secondary);
}
.sd-slot-main {
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sd-sockets {
    font-size: 10px;
    letter-spacing: 1px;
    color: #22d3ee;
}
.sd-slot-tip {
    bottom: calc(100% + 4px);
}
/* the bars sit at the top of a scrolling window: their help opens below them */
.sd-meter .sd-tip,
.sd-line .sd-tip {
    top: calc(100% + 4px);
    bottom: auto;
}
.sd-section-title {
    display: flex;
    margin-top: 3px;
    font-weight: 600;
}
.sd-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.sd-skill {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 6px;
    border-radius: 10px;
    border: 1px solid var(--theme-border);
    background: var(--theme-tab-bg);
    cursor: grab;
    user-select: none;
}
.sd-skill.dragging { opacity: 0.5; }
.sd-skill.drop-here {
    border-color: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
}
.sd-skill-n {
    color: var(--theme-text-secondary);
    font-variant-numeric: tabular-nums;
}
.sd-skill-btn,
.sd-skill-add,
.sd-step-btn,
.sd-pick-btn {
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    line-height: 14px;
    padding: 1px 6px;
    border-radius: 8px;
    border: 1px solid var(--theme-slot-border);
    background: var(--theme-slot-bg);
    color: var(--theme-text-primary);
    cursor: pointer;
}
.sd-skill-btn:disabled,
.sd-step-btn:disabled {
    opacity: 0.35;
    cursor: default;
}
.sd-skill-remove {
    border: none;
    background: transparent;
    color: var(--theme-text-secondary);
}
.sd-skill-add.active {
    border-color: var(--theme-border-accent);
}
.sd-skill-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 5px;
    border-radius: var(--theme-radius-inner);
    border: 1px dashed var(--theme-border);
}
.sd-note {
    color: var(--theme-text-secondary);
}
.sd-tactical {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 3px;
}
.sd-stepper {
    display: flex;
    align-items: center;
    gap: 4px;
}
.sd-step-val {
    min-width: 16px;
    text-align: center;
    font-weight: 700;
    color: var(--theme-text-accent);
}
/* TASK-183: a saved bot skill the bot never casts, and the Loot Filter row */
.sd-note.warn,
.sd-loot-hint.warn {
    color: #f87171;
}
.sd-skill.invalid {
    border-color: rgba(239, 68, 68, 0.7);
    background: rgba(239, 68, 68, 0.12);
}
.sd-skill.invalid .sd-skill-name {
    color: #f87171;
    text-decoration: line-through;
}
.sd-loot {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 3px;
}
.sd-loot-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.sd-loot-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    line-height: 14px;
    padding: 2px 8px 2px 6px;
    border-radius: 8px;
    border: 1px solid var(--theme-slot-border);
    background: var(--theme-slot-bg);
    color: var(--theme-text-secondary);
    cursor: pointer;
}
/* the check box: empty = off, filled = picked up */
.sd-loot-btn::before {
    content: '';
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    border: 1px solid var(--theme-text-secondary);
}
.sd-loot-btn.on {
    color: var(--theme-text-primary);
    border-color: rgba(34, 211, 238, 0.7);
    background: rgba(34, 211, 238, 0.12);
}
.sd-loot-btn.on::before {
    border-color: #22d3ee;
    background: #22d3ee;
}
.sd-loot-btn:disabled {
    opacity: 0.45;
    cursor: default;
}
/* Controller / phone: the Equip view's switch and every Soul Drive button >= 48px */
.controller-subtabs {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    padding-right: 14px;
}
.controller-subtab-btn {
    flex: 1 1 0;
    min-height: var(--touch-target-min-size, 48px);
    min-width: var(--touch-target-min-size, 48px);
    font-family: 'Kanit', sans-serif;
    font-size: var(--touch-font-min-size, 13px);
    font-weight: 600;
    border-radius: var(--theme-radius-inner);
    border: 1px solid var(--theme-slot-border);
    background: var(--theme-tab-bg);
    color: var(--theme-text-secondary);
    touch-action: manipulation;
}
.controller-subtab-btn.active {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-tab-active-border);
    color: var(--theme-text-primary);
}
.controller-mode .sd-panel {
    font-size: var(--touch-font-min-size, 13px);
    gap: 7px;
    /* keep the values clear of the phone's overlay scrollbar */
    padding-right: 14px;
}
.controller-mode .sd-slots {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}
.controller-mode .sd-slot {
    min-height: var(--touch-target-min-size, 48px);
}
.controller-mode .sd-slot-main { font-size: 13px; }
.controller-mode .sd-skills.rows {
    flex-direction: column;
    flex-wrap: nowrap;
}
.controller-mode .sd-skills.rows .sd-skill {
    border-radius: var(--theme-radius-inner);
    padding: 0 0 0 10px;
}
.controller-mode .sd-skills.rows .sd-skill-name {
    flex: 1 1 auto;
}
.controller-mode .sd-skill-btn,
.controller-mode .sd-skill-add,
.controller-mode .sd-step-btn,
.controller-mode .sd-pick-btn {
    min-width: var(--touch-target-min-size, 48px);
    min-height: var(--touch-target-min-size, 48px);
    font-size: 16px;
    touch-action: manipulation;
}
.controller-mode .sd-pick-btn {
    font-size: var(--touch-font-min-size, 13px);
    padding: 0 12px;
}
.controller-mode .sd-meter-label { flex-basis: 84px; }
.controller-mode .sd-bar { height: 10px; }
/* Loot Filter on a phone: four >= 48 px toggles, one row down to 568 px wide (TASK-183) */
.controller-mode .sd-loot-toggles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 8px;
}
.controller-mode .sd-loot-btn {
    justify-content: flex-start;
    min-width: var(--touch-target-min-size, 48px);
    min-height: var(--touch-target-min-size, 48px);
    padding: 0 10px;
    font-size: var(--touch-font-min-size, 13px);
    touch-action: manipulation;
}
.controller-mode .sd-loot-btn::before {
    width: 12px;
    height: 12px;
}
/* action menu: Soul Drive notes and an over-Compute equip */
.item-action-note {
    font-size: 13px;
    color: var(--theme-text-accent);
    text-align: center;
}
/* BUGFIX-B6 M4: Drop asks how many of a stack (the trade quantity controls) and once for a
   valuable item; the tags say why (Rare, +7, Cards, Cash) */
.drop-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}
.drop-tag {
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(240, 201, 70, 0.6);
    background: rgba(240, 201, 70, 0.12);
    color: var(--theme-text-accent);
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    font-weight: 600;
}
.drop-amount-controls .trade-modal-btn {
    min-height: var(--touch-target-min-size, 48px);
    min-width: var(--touch-target-min-size, 48px);
}
.drop-amount-controls .drop-amount-input {
    min-height: var(--touch-target-min-size, 48px);
    min-width: 0;
}
.item-action-btn.btn-over,
.item-action-btn.btn-over:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.7);
    color: #f87171;
    cursor: not-allowed;
    filter: none;
}
.item-action-over { font-weight: 700; }
.tooltip-soul .tooltip-desc { color: #67e8f9; }
/* soul total: the bound part */
.soul-bound {
    margin-left: 4px;
    white-space: nowrap;
    color: #a78bfa;
    font-size: 0.9em;
    cursor: help;
}
/* AUTO: thin battery bar along the bottom edge; blocked = no Role module / empty battery */
.auto-btn .auto-battery {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 3px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.45);
    overflow: hidden;
    pointer-events: none;
}
.auto-btn .auto-battery-fill {
    display: block;
    height: 100%;
    background: #4ade80;
}
.auto-btn .auto-battery.low .auto-battery-fill { background: #f87171; }
.auto-btn.auto-blocked {
    opacity: 0.6;
    color: var(--theme-text-secondary);
}
.auto-btn.auto-blocked .auto-dot { background: #f87171; }
/* ROUTE-AUTO-UI-B: route mark on AUTO button wins over .auto-blocked while walking or paused */
.auto-btn.auto-routing {
    opacity: 1;
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.75);
    box-shadow: var(--theme-shadow), 0 0 12px rgba(56, 189, 248, 0.35);
}
.auto-btn.auto-routing .auto-dot {
    background: #38bdf8;
    box-shadow: 0 0 8px #38bdf8;
    animation: auto-pulse 1.4s ease-in-out infinite;
}
.auto-btn.auto-route-paused {
    opacity: 1;
    border-color: rgba(251, 191, 36, 0.85);
}
.auto-btn.auto-route-paused::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fbbf24;
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.8);
}

/* ==========================================================================
   BUG phone minimap (2026-10-13): every phone in landscape (844x390, 896x414, 915x412,
   932x430, and the BUG-008 sizes) keeps the minimap in the top strip, left of the
   top-right buttons, compact (canvas <= 92 px + the 48 px button column). The TASK-151
   rule (right: 304 px, 140 px canvas, about 220 px tall) put it in the middle of the top
   row and down over the player on every phone wider than 820 px.
   The numbers mirror crates/beelzebub_webui/src/compact_hud.rs (its tests read this block).
   ========================================================================== */
@media (max-width: 820px), (max-height: 500px) {
    .controller-mode {
        /* minimap canvas side: what is left between AUTO (ends at 292 px) and the
           top-right buttons (127 px + 10 px margin + 8 px gap), minus the 48 px
           button column and the border */
        --mm-compact-size: clamp(64px, calc(100vw - 497px - var(--safe-area-left) - var(--safe-area-right)), 92px);
    }

    /* Minimap: top strip, left of the top-right buttons, never over AUTO / the joystick */
    .controller-mode .minimap-corner {
        top: calc(10px + var(--safe-area-top));
        right: calc(145px + var(--safe-area-right));
    }

    .controller-mode .minimap-corner:not(.minimap-folded) {
        display: grid;
        grid-template-columns: var(--mm-compact-size) 48px;
        grid-template-rows: 48px auto;
    }

    .controller-mode .minimap-corner:not(.minimap-folded) .minimap-header {
        grid-column: 2;
        grid-row: 1;
        padding: 0;
        justify-content: center;
        border-bottom: none;
        border-left: 1px solid var(--theme-border);
    }

    /* the full map (tap the canvas) shows the map name */
    .controller-mode .minimap-corner:not(.minimap-folded) .minimap-map-name {
        display: none;
    }

    .controller-mode .minimap-corner:not(.minimap-folded) .minimap-canvas-wrap {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: var(--mm-compact-size);
        height: var(--mm-compact-size);
    }

    .controller-mode .minimap-corner:not(.minimap-folded) .minimap-canvas {
        width: var(--mm-compact-size);
        height: var(--mm-compact-size);
        image-rendering: auto; /* scaled down from the 140 px buffer: smooth, not pixelated */
    }

    .controller-mode .minimap-corner:not(.minimap-folded) .minimap-coords {
        grid-column: 2;
        grid-row: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2px;
        font-size: 10px;
        line-height: 1.2;
        overflow-wrap: anywhere;
        border-top: 1px solid var(--theme-border);
        border-left: 1px solid var(--theme-border);
    }

    .controller-mode .minimap-folded .minimap-map-name {
        max-width: calc(var(--mm-compact-size) - 24px);
    }
}

/* Phones wider than the compact tier (844x390, 896x414, 915x412, 932x430): a thin map name
   row above the canvas (the compact tier has no room and shows the name in the full map).
   Open minimap = 10 + 21 + 92 + 2 = 125 px at most, clear of the 240 px action cluster at 390 px
   high (it starts at 134 px). compact_hud.rs PHONE_MINIMAP_NAME_ROW mirrors the row. */
@media (min-width: 821px) and (min-height: 361px) and (max-height: 500px) {
    .controller-mode .minimap-corner:not(.minimap-folded) {
        grid-template-rows: auto 48px auto;
    }

    .controller-mode .minimap-corner:not(.minimap-folded) .minimap-header {
        display: contents;
    }

    .controller-mode .minimap-corner:not(.minimap-folded) .minimap-map-name {
        display: block;
        grid-column: 1 / span 2;
        grid-row: 1;
        max-width: none;
        height: 20px;
        padding: 0 8px;
        font-size: 11px;
        line-height: 20px;
        background: rgba(15, 23, 42, 0.6);
        border-bottom: 1px solid var(--theme-border);
    }

    .controller-mode .minimap-corner:not(.minimap-folded) .minimap-fold-btn {
        grid-column: 2;
        grid-row: 2;
        border-left: 1px solid var(--theme-border);
        border-radius: 0;
    }

    .controller-mode .minimap-corner:not(.minimap-folded) .minimap-canvas-wrap {
        grid-row: 2 / span 2;
    }

    .controller-mode .minimap-corner:not(.minimap-folded) .minimap-coords {
        grid-row: 3;
        border-left: 1px solid var(--theme-border);
    }

    /* RAID-5: while the top boss bar shows, the name steps aside (as everywhere on phones) */
    .controller-mode:has(.boss-bars-top) .minimap-corner:not(.minimap-folded) .minimap-map-name {
        display: none;
    }
}

/* ==========================================================================
   BUG-008: small phones (iPhone SE 667x375, 667x320 with Safari's bar, 568x320)
   Every earlier mobile layout was tuned at 844x390 and stays as it was: these
   blocks start below 821 px wide or 361 px high (HUD) and 386 px high (login).
   The numbers mirror crates/beelzebub_webui/src/compact_hud.rs (its tests read
   this block: change both together).
   ========================================================================== */

/* 1. Controller HUD, compact tier */
@media (max-width: 820px), (max-height: 360px) {
    /* Joystick zone: from under the status panel (88 px, where the party frames start) down to above CHAT / SIT */
    .controller-mode .joystick-touch-zone {
        min-height: 96px;
        max-height: calc(100vh - 164px - var(--safe-area-top) - var(--safe-area-bottom));
        max-height: calc(100dvh - 164px - var(--safe-area-top) - var(--safe-area-bottom));
    }

    /* Portal sign: under the status panel, see-through for taps and under the joystick
       knob (the zone is z 40), instead of the top centre where the minimap sits now */
    .controller-mode .portal-density-indicator {
        top: calc(88px + var(--safe-area-top));
        left: calc(16px + var(--safe-area-left));
        transform: none;
        max-width: 240px;
        padding: 4px 12px;
        gap: 8px;
        z-index: 30;
    }

    .controller-mode .portal-density-indicator.ui-interactive {
        pointer-events: none !important;
    }

    .controller-mode .portal-indicator-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Action cluster 280x190 instead of 280x240: same arc, rows closer, gaps >= 8 px */
    .controller-mode .controller-action-cluster {
        height: 190px;
    }

    /* On a small screen the cluster box reaches the middle: taps between its buttons go to the
       game (tap to walk) instead of being swallowed by the empty box. Buttons stay off while an
       NPC dialog dims the cluster (#ui-root.dialog-active). */
    .controller-mode .controller-action-cluster.ui-interactive {
        pointer-events: none !important;
    }

    .controller-mode .controller-action-cluster .controller-btn-label,
    .controller-mode .controller-bottom-left .controller-btn-label {
        display: none;
    }

    .controller-mode .controller-top-right .controller-btn-label {
        display: none;
    }

    .controller-mode .controller-btn-menu {
        width: 48px;
        min-width: 48px;
        height: 48px;
        padding: 0;
    }

    .controller-mode:not(.dialog-active) .controller-action-cluster > button {
        pointer-events: auto;
    }

    .controller-mode .controller-skill-btn.pos-skill-1 {
        left: 88px;
        top: 0px;
    }

    .controller-mode .controller-skill-btn.pos-skill-2 {
        left: 148px;
        top: 0px;
    }

    .controller-mode .controller-page-btn {
        left: 8px;
        top: 28px;
    }

    .controller-mode .controller-attack-btn {
        left: 130px;
        top: 58px;
    }

    .controller-mode .controller-skill-btn.pos-skill-3 {
        left: 68px;
        top: 72px;
    }

    .controller-mode .controller-interact-btn {
        left: 214px;
        top: 70px;
        width: 48px;
        height: 48px;
    }

    .controller-mode .controller-skill-btn.pos-skill-4 {
        left: 72px;
        top: 136px;
    }

    .controller-mode .controller-target-btn {
        left: 135px;
        top: 142px;
        width: 48px;
        height: 48px;
    }

    .controller-mode .controller-untarget-btn {
        left: 210px;
        top: 142px;
    }
}

/* 2. Lobby on short screens: login as username | password side by side with Login next to
   the checkbox; a tighter character-create card */
@media (max-height: 385px) {
    /* centre while it fits, start at the top (and scroll) when it does not */
    .lobby-top-brand {
        margin-top: auto;
    }

    .login-card-box {
        margin-bottom: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 14px;
        row-gap: 10px;
        align-items: start;
        width: min(460px, calc(100vw - 32px - var(--safe-area-left) - var(--safe-area-right)));
        max-width: none;
    }

    .login-card-box > * {
        min-width: 0;
    }

    .login-card-box > .lobby-error-msg {
        grid-column: 1 / -1;
        order: -1;
    }

    .login-card-box > .lobby-checkbox-row,
    .login-card-box > .ui-btn {
        align-self: center;
    }

    /* Character create: the name warning still leaves Back / Create on screen at 568x320 */
    .lobby-create-container {
        padding-top: 2px;
        padding-bottom: 2px;
    }

    .lobby-create-card {
        gap: 8px;
        padding: 10px 16px;
    }
}

/* TASK-188: Elemental Attunement picker, on top of the status bar column */
.attune-picker {
    display: flex;
    gap: 4px;
    padding: 3px 4px;
    background: rgba(10, 10, 18, 0.45);
    border-radius: 6px;
    pointer-events: auto;
}
.attune-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 20, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    opacity: 0.5;
    cursor: pointer;
}
.attune-btn:hover {
    opacity: 0.85;
}
.attune-btn.active {
    opacity: 1;
    border-color: #ffd36b;
    box-shadow: 0 0 6px rgba(255, 211, 107, 0.75);
}
.attune-btn img {
    width: 18px;
    height: 18px;
    image-rendering: pixelated;
    pointer-events: none;
}
.controller-mode .attune-btn {
    width: 34px;
    height: 34px;
}
.controller-mode .attune-btn img {
    width: 24px;
    height: 24px;
}

/* TASK-199: the Busker's song (status column) and its skill check bar (centre-bottom) */
.song-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 6px;
    background: rgba(10, 10, 18, 0.45);
    border-radius: 5px;
    pointer-events: auto;
    font-size: 10px;
    color: #e8e0ff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
}
.song-name {
    font-weight: bold;
    letter-spacing: 0.3px;
}
.song-pips, .song-marks {
    display: flex;
    gap: 2px;
}
.song-pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.song-pip.on {
    background: #c9a2ff;
    border-color: #f0e2ff;
    box-shadow: 0 0 4px rgba(200, 160, 255, 0.8);
}
.song-time {
    color: #b8b0d0;
    font-variant-numeric: tabular-nums;
}
.song-check {
    position: fixed;
    left: 50%;
    bottom: 132px;
    transform: translateX(-50%);
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 10px 5px;
    background: rgba(12, 10, 24, 0.72);
    border: 1px solid rgba(200, 170, 255, 0.35);
    border-radius: 8px;
    pointer-events: auto;
    user-select: none;
    touch-action: manipulation;
    cursor: pointer;
}
.song-check-head {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 11px;
    color: #e8e0ff;
}
.song-check-title {
    font-weight: bold;
    letter-spacing: 0.6px;
}
.song-track {
    position: relative;
    width: 240px;
    height: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 7px;
    overflow: hidden;
}
.song-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(140, 230, 160, 0.55);
    box-shadow: inset 0 0 0 1px rgba(200, 255, 210, 0.8);
}
.song-needle {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 3px;
    margin-left: -1px;
    background: #fff4c8;
    box-shadow: 0 0 5px rgba(255, 240, 180, 0.9);
    animation-name: song-needle;
    animation-timing-function: linear;
    animation-fill-mode: both;
}
@keyframes song-needle {
    from { left: 0%; }
    to { left: 100%; }
}
.song-mark {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.16);
}
.song-mark.hit { background: #7be38f; }
.song-mark.miss { background: #f0606a; }
.song-mark.now { box-shadow: 0 0 0 1px #fff4c8; }
.song-result {
    font-size: 12px;
    font-weight: bold;
    color: #7be38f;
}
.song-result.fall { color: #f0606a; }
.song-tap {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #fff4c8;
}
.controller-mode .song-check {
    bottom: 96px;
    padding: 8px 14px;
}
.controller-mode .song-track {
    width: 280px;
    height: 18px;
}

/* TASK-193: the Barbarian's Rage meter, a slim bar on top of the status bar column */
.rage-meter {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 5px;
    background: rgba(10, 10, 18, 0.45);
    border-radius: 5px;
    pointer-events: auto;
}
.rage-label {
    font-size: 10px;
    font-weight: bold;
    color: #f0b8a8;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
}
.rage-track {
    width: 72px;
    height: 6px;
    background: rgba(40, 10, 10, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 3px;
    overflow: hidden;
}
.rage-fill {
    height: 100%;
    background: linear-gradient(90deg, #a8321e, #e8542a);
    transition: width 0.2s ease-out;
}
.rage-meter.full .rage-fill {
    background: linear-gradient(90deg, #e8542a, #ffb347);
}
.rage-meter.full .rage-track {
    box-shadow: 0 0 6px rgba(255, 120, 60, 0.85);
}
.controller-mode .rage-track {
    width: 96px;
    height: 8px;
}
.controller-mode .rage-label {
    font-size: 12px;
}

/* ==========================================================================
   TASK-190: Smith window (Refine | Add Slot). PC = floating next to the bag;
   phone (.controller-layout) = full screen, gear list left, anvil right, all
   touch targets >= 48 px. Effects are placeholders (Art makes the real ones).
   ========================================================================== */
.smith-window {
    position: absolute;
    width: 580px;
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    font-family: 'Kanit', sans-serif;
    color: var(--theme-text-primary);
}
.smith-header {
    background: var(--theme-header-bg);
    padding: 6px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--theme-slot-border);
    cursor: grab;
    touch-action: none;
    flex-shrink: 0;
}
.smith-title {
    font-size: 15px;
    font-weight: 500;
}
.smith-leave-btn {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.6);
    color: #fca5a5;
    border-radius: var(--theme-radius-inner);
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    padding: 3px 10px;
    cursor: pointer;
}
.smith-tabs {
    display: flex;
    gap: 4px;
    padding: 6px 8px 0 8px;
    border-bottom: 1px solid var(--theme-slot-border);
    flex-shrink: 0;
}
.smith-tab {
    flex: 1;
    background: var(--theme-tab-bg);
    border: 1px solid var(--theme-slot-border);
    border-bottom: none;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 5px 8px;
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    color: var(--theme-text-secondary);
    cursor: pointer;
    margin-bottom: -1px;
}
.smith-tab.active {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-tab-active-border);
    color: var(--theme-text-accent);
    font-weight: 600;
}
.smith-body {
    display: flex;
    min-height: 0;
    flex: 1;
}
.smith-main {
    flex: 1;
    min-width: 0;
    padding: 10px 12px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
}
.smith-anvil {
    position: relative;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 2px dashed var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    background: var(--theme-slot-bg);
}
.smith-anvil.drag-over {
    border-color: var(--theme-border-accent);
    box-shadow: 0 0 10px var(--theme-slot-hover-glow);
}
.smith-anvil-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    image-rendering: pixelated;
}
.smith-anvil-name {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--theme-text-accent);
}
.smith-anvil-hint {
    flex: 1;
    font-size: 13px;
    color: var(--theme-text-secondary);
    text-align: center;
}
.smith-takeoff-btn {
    background: transparent;
    border: 1px solid var(--theme-slot-border);
    color: var(--theme-text-secondary);
    border-radius: var(--theme-radius-inner);
    width: 26px;
    height: 26px;
    cursor: pointer;
}
.smith-fx-text {
    position: absolute;
    right: 12px;
    top: 6px;
    font-size: 22px;
    font-weight: 700;
    pointer-events: none;
    animation: smith-fx-rise 1.3s ease-out forwards;
}
.smith-fx-success { animation: smith-glow 1.2s ease-out; }
.smith-fx-success .smith-fx-text { color: #fde68a; text-shadow: 0 0 8px #f59e0b; }
.smith-fx-down { animation: smith-shake 0.45s ease-in-out 2; }
.smith-fx-down .smith-fx-text { color: #fb923c; }
.smith-ghost { animation: smith-fade 1.3s ease-in forwards; }
@keyframes smith-glow {
    0% { box-shadow: 0 0 0 rgba(253, 224, 71, 0); }
    30% { box-shadow: 0 0 22px rgba(253, 224, 71, 0.9); border-color: #fde047; }
    100% { box-shadow: 0 0 0 rgba(253, 224, 71, 0); }
}
@keyframes smith-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}
@keyframes smith-fade {
    0% { opacity: 1; transform: scale(1); filter: none; }
    100% { opacity: 0; transform: scale(0.6) rotate(-12deg); filter: grayscale(1); }
}
@keyframes smith-fx-rise {
    0% { opacity: 0; transform: translateY(8px); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-18px); }
}
@media (prefers-reduced-motion: reduce) {
    .smith-fx-success, .smith-fx-down, .smith-ghost, .smith-fx-text { animation-duration: 0.01s; }
}
.smith-result {
    font-size: 13px;
    padding: 4px 8px;
    border-radius: var(--theme-radius-inner);
    background: rgba(0, 0, 0, 0.25);
}
.smith-result.ok { color: #86efac; }
.smith-result.down { color: #fdba74; }
.smith-result.broken { color: #f87171; }
.smith-result.refused { color: var(--theme-text-secondary); }
.smith-panel {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.smith-line { font-size: 14px; }
.smith-level { font-size: 16px; font-weight: 600; color: var(--theme-text-accent); }
.smith-chance { color: #67e8f9; }
.smith-down { font-size: 12px; color: #fdba74; }
.smith-note { font-size: 12px; color: var(--theme-text-secondary); }
.smith-note.denied { color: #fca5a5; }
.smith-costs {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
}
.smith-cost {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 13px;
}
.smith-cost.short .smith-cost-count { color: #f87171; font-weight: 600; }
.smith-cost-note { flex-basis: 100%; font-size: 11px; color: var(--theme-text-secondary); }
.smith-charms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.smith-charm {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 5px 6px;
    background: var(--theme-tab-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    color: var(--theme-text-primary);
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    cursor: pointer;
}
.smith-charm.on {
    background: rgba(34, 197, 94, 0.18);
    border-color: #22c55e;
    color: #bbf7d0;
}
.smith-charm:disabled { opacity: 0.5; cursor: not-allowed; }
.smith-charm-have { color: var(--theme-text-secondary); }
.smith-charm-note { font-size: 11px; color: #fca5a5; }
.smith-warn {
    font-size: 14px;
    font-weight: 600;
    color: #f87171;
}
.smith-warn.cores { font-size: 12px; font-weight: 500; }
.smith-go-btn {
    margin-top: 4px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.35), rgba(180, 83, 9, 0.35));
    border: 1px solid #f59e0b;
    border-radius: var(--theme-radius-inner);
    color: #fde68a;
    font-family: 'Kanit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.smith-go-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.smith-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(253, 230, 138, 0.35);
    border-top-color: #fde68a;
    border-radius: 50%;
    animation: smith-spin 0.8s linear infinite;
}
@keyframes smith-spin { to { transform: rotate(360deg); } }

/* the phone's gear list */
.smith-pieces {
    width: 42%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    border-right: 1px solid var(--theme-slot-border);
    overflow-y: auto;
}
.smith-pieces-title { font-size: 12px; color: var(--theme-text-secondary); }
.smith-piece-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 4px 8px;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    color: var(--theme-text-primary);
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    text-align: left;
    touch-action: manipulation;
}
.smith-piece-row.picked { border-color: var(--theme-border-accent); box-shadow: 0 0 8px var(--theme-slot-hover-glow); }
.smith-piece-row.on-anvil { background: var(--theme-tab-active-bg); }
.smith-piece-row.denied { opacity: 0.5; }
.smith-piece-icon { width: 32px; height: 32px; flex-shrink: 0; }
.smith-piece-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smith-put-btn {
    position: sticky;
    bottom: 0;
    min-height: 48px;
    background: rgba(34, 197, 94, 0.2);
    border: 1px solid #22c55e;
    border-radius: var(--theme-radius-inner);
    color: #bbf7d0;
    font-family: 'Kanit', sans-serif;
    font-size: 14px;
    font-weight: 600;
}
.smith-put-btn:disabled { opacity: 0.45; }

/* phone / controller: full screen, >= 48 px targets */
.controller-mode .smith-window.controller-layout {
    position: fixed !important;
    left: calc(4px + var(--safe-area-left)) !important;
    right: calc(4px + var(--safe-area-right)) !important;
    top: calc(4px + var(--safe-area-top)) !important;
    bottom: calc(4px + var(--safe-area-bottom)) !important;
    width: auto !important;
    max-height: none !important;
    z-index: 950 !important;
}
.controller-mode .smith-header { min-height: 48px; height: 48px; padding: 0 8px; }
.controller-mode .smith-leave-btn { min-width: 72px; min-height: 48px; font-size: 15px; }
.controller-mode .smith-tabs { padding: 0 8px; }
.controller-mode .smith-tab { min-height: 48px; font-size: 15px; }
.controller-mode .smith-takeoff-btn { min-width: 48px; min-height: 48px; font-size: 18px; }
.controller-mode .smith-charm { min-height: 48px; }
.controller-mode .smith-go-btn { min-height: 48px; }
.controller-mode .smith-main { padding: 8px 10px 10px 10px; }
.controller-mode .smith-anvil { min-height: 56px; padding: 4px 8px; }
@media (max-height: 400px) {
    .controller-mode .smith-line { font-size: 13px; }
    .controller-mode .smith-level { font-size: 15px; }
    .controller-mode .smith-panel { gap: 3px; }
}
.controller-mode:has(.smith-window) .chat-container,
.controller-mode:has(.smith-window) #chat-container,
.controller-mode:has(.smith-window) .controller-dpad-cluster,
.controller-mode:has(.smith-window) .controller-action-cluster,
.controller-mode:has(.smith-window) .hotbar-container,
.controller-mode:has(.smith-window) .mobile-hotbar-cluster,
.controller-mode:has(.smith-window) .controller-menu-trigger {
    display: none !important;
}

/* ==========================================================================
   WORLD EVENT STRIP (TASK-195): small timers under the minimap + a compact panel.
   Its top / right are set from the minimap's place (world_events.rs); these are
   the fallbacks when no minimap is on screen.
   ========================================================================== */
.world-event-strip {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 50;
    display: flex;
    gap: 4px;
    align-items: flex-start;
    user-select: none;
}

.world-event-chip {
    width: 44px;
    height: 34px;
    padding: 2px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    color: var(--theme-text-primary);
    font-family: 'Kanit', sans-serif;
    cursor: pointer;
}

.world-event-chip:hover,
.world-event-chip.open {
    border-color: var(--theme-text-primary);
}

.world-event-chip.live {
    border-color: #e74c3c;
}

.world-event-icon {
    width: 16px;
    height: 16px;
    flex: none;
}

.world-event-time {
    font-size: 10px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--theme-text-primary);
}

.world-event-live {
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.5px;
    color: #fff;
    background: #e74c3c;
    border-radius: 3px;
    padding: 0 3px;
    animation: world-event-pulse 1.2s ease-in-out infinite;
}

@keyframes world-event-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
    .world-event-live { animation: none; }
}

/* the panel: under the strip, right edges aligned (PC) */
.world-event-panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    width: 240px;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    padding: 6px 8px 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    color: var(--theme-text-primary);
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
}

.world-event-panel-head {
    display: flex;
    align-items: center;
    gap: 6px;
}

.world-event-panel-name {
    flex: 1;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.world-event-panel-close {
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--theme-text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.world-event-panel-desc {
    color: var(--theme-text-muted);
    line-height: 1.35;
}

.world-event-panel-row {
    display: flex;
    gap: 6px;
}

.world-event-panel-label {
    color: var(--theme-text-muted);
}

.world-event-panel-status {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.world-event-panel-status.live {
    color: #e74c3c;
}

/* Phone / controller: 48 px chips, the panel as a small centred card */
.controller-mode .world-event-chip {
    width: 48px;
    height: 48px;
}

.controller-mode .world-event-icon {
    width: 20px;
    height: 20px;
}

.controller-mode .world-event-time {
    font-size: 11px;
}

.controller-mode .world-event-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: min(300px, 90vw);
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    z-index: 900;
    font-size: 13px;
}

.controller-mode .world-event-panel-close {
    width: 48px;
    height: 48px;
    font-size: 20px;
}

/* one main window at a time on the phone: the strip steps aside for the smith / profession */
.controller-mode:has(.smith-window) .world-event-strip,
.controller-mode:has(.profession-window) .world-event-strip {
    display: none !important;
}

/* ==========================================================================
   RAID-5: raid boss bar + announcement banner (crates/beelzebub_webui/src/boss_bar.rs)
   PC: top centre under the AUTO pill, clear of the HUD (left) and the minimap (right).
   Phone (controller mode): the free band at the bottom between CHAT / SIT and the action
   cluster's buttons, see-through for taps. The phone rule's numbers mirror PHONE_BAND_* in
   boss_bar.rs (its test reads the rule: change both together). Offsets / width / timings
   come from assets/data/boss_bar.ron as --bb-* variables.
   ========================================================================== */
.boss-bars {
    position: fixed;
    top: calc(52px + var(--safe-area-top) + var(--bb-dy, 0px));
    left: calc(50% + var(--bb-dx, 0px));
    transform: translateX(-50%);
    width: min(var(--bb-w, 440px), calc(100vw - 560px));
    min-width: 220px;
    z-index: 45;
    display: flex;
    flex-direction: column;
    gap: 3px;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    font-family: 'Kanit', sans-serif;
    color: var(--theme-text-primary);
}

.boss-bar-full {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 8px 5px 8px;
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
}

.boss-bar-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}

.boss-bar-name {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.boss-bar-pips {
    display: flex;
    gap: 4px;
    flex: none;
}

.boss-bar-pip {
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    border: 1px solid var(--theme-text-accent);
    opacity: 0.6;
}

.boss-bar-pip.on {
    background: var(--theme-text-accent);
    opacity: 1;
}

.boss-bar-phase-text {
    flex: none;
    font-size: 10px;
    font-weight: 700;
    color: var(--theme-text-accent);
}

.boss-bar-title {
    font-size: 10px;
    line-height: 1.1;
    text-align: center;
    color: var(--theme-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.boss-bar-track {
    position: relative;
    height: 12px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(0, 0, 0, 0.6);
    border-radius: 3px;
    overflow: hidden;
}

/* PC: the full bar and the thin rows are a HUD panel (hover numbers, tooltips; clicks stop at
   them, the gaps between them let clicks through); phones stay tap-through */
.boss-bars:not(.boss-bars-phone) .boss-bar-full,
.boss-bars:not(.boss-bars-phone) .boss-bar-thin {
    pointer-events: auto;
}

.boss-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--theme-hp-bar);
    transition: width var(--bb-drain, 250ms) ease-out;
}

/* the recent damage: drains after a short hold (boss_bar.rs trail_pct_at, ticked 10x a second) */
.boss-bar-trail {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: rgba(253, 230, 138, 0.85);
    transition: width 100ms linear;
}

.boss-bar-pct,
.boss-bar-num {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 2px #000;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.boss-bar-num {
    display: none;
}

.numbers-hover:hover .boss-bar-pct {
    display: none;
}

.numbers-hover:hover .boss-bar-num,
.numbers-always .boss-bar-num {
    display: inline;
}

.numbers-always .boss-bar-pct {
    left: auto;
    right: 4px;
    transform: translateY(-50%);
}

.boss-bar-defeated {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    color: var(--theme-text-accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    animation: boss-bar-stamp 0.35s ease-out;
}

@keyframes boss-bar-stamp {
    0% { opacity: 0; transform: scale(1.3); }
    100% { opacity: 1; transform: scale(1); }
}

.boss-bar-fading {
    animation: boss-bar-fade var(--bb-fade, 800ms) linear forwards;
}

@keyframes boss-bar-fade {
    from { opacity: 1; }
    to { opacity: 0; }
}

.boss-bar-statuses {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.boss-bar-status {
    position: relative;
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--theme-slot-border);
}

.boss-bar-status-img {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

.boss-bar-status-fallback {
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 700;
}

.boss-bar-status-time {
    position: absolute;
    right: -3px;
    bottom: -4px;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 2px #000;
    font-variant-numeric: tabular-nums;
}

/* other bosses: thin rows (name, thin bar, %) */
.boss-bar-thin {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
    align-items: center;
    gap: 6px;
    height: 14px;
    padding: 0 8px;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 4px;
    font-size: 10px;
    line-height: 1;
}

.boss-bar-thin-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.boss-bar-thin-track {
    position: relative;
    height: 5px;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 2px;
    overflow: hidden;
}

.boss-bar-thin-pct {
    font-size: 9px;
    font-variant-numeric: tabular-nums;
}

/* the portal sign steps down under a PC boss bar */
body:has(.boss-bars:not(.boss-bars-phone)) .portal-density-indicator {
    top: calc(190px + var(--safe-area-top));
}

/* Phone (controller mode): see-through for taps. Two places (boss_bar.ron phone_place) */
.controller-mode .boss-bars {
    width: auto;
    min-width: 0;
    transform: none;
    gap: 2px;
    overflow: hidden;
    z-index: 35;
}

/* phone_place: Bottom: the band between CHAT / SIT and the action cluster's buttons, never over
   a button; the full bar at the bottom, a thin row above it */
.controller-mode .boss-bars.boss-bars-bottom {
    top: auto;
    left: calc(264px + var(--safe-area-left) + var(--bb-dx, 0px));
    right: calc(232px + var(--safe-area-right) - var(--bb-dx, 0px));
    bottom: calc(16px + var(--safe-area-bottom) - var(--bb-dy, 0px));
    max-width: var(--bb-w, 440px);
    max-height: 72px;
    margin: 0 auto;
    flex-direction: column-reverse;
}

/* phone_place: Top (user 2026-10-12, "top centre, in place of the map name"): the top row between
   the HP panel / AUTO icon and the minimap; boss_bar.rs measures the row and sets --bb-left /
   --bb-width / --bb-top (phone_top_span). Slim: name + pips (+ statuses) on one line, the bar
   with its % below, at most one thin row; it ends above the party frames (75 px) */
.controller-mode .boss-bars.boss-bars-top {
    top: calc(var(--bb-top, 10px) + var(--bb-dy, 0px));
    left: calc(var(--bb-left, 256px) + var(--bb-dx, 0px));
    right: auto;
    bottom: auto;
    width: var(--bb-width, 110px);
    max-height: 50px;
    flex-direction: column;
    z-index: 95;
}

.controller-mode .boss-bar-full {
    gap: 2px;
    padding: 3px 6px 4px 6px;
}

.controller-mode .boss-bar-name {
    font-size: 11px;
}

.controller-mode .boss-bar-track {
    height: 10px;
}

.controller-mode .boss-bar-status {
    width: 14px;
    height: 14px;
}

.controller-mode .boss-bar-thin {
    height: 13px;
    padding: 0 6px;
    font-size: 9px;
}

.boss-bars-top .boss-bar-full {
    gap: 2px;
    padding: 2px 6px 3px 6px;
}

.boss-bars-top .boss-bar-head {
    justify-content: flex-start;
    gap: 5px;
}

.boss-bars-top .boss-bar-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 10px;
    line-height: 13px;
}

.boss-bars-top .boss-bar-pip {
    width: 5px;
    height: 5px;
}

.boss-bars-top .boss-bar-statuses {
    flex: none;
    gap: 2px;
}

.boss-bars-top .boss-bar-status {
    width: 12px;
    height: 12px;
}

.boss-bars-top .boss-bar-status-time {
    font-size: 7px;
}

.boss-bars-top .boss-bar-thin {
    height: 12px;
}

/* while a phone shows the top bar: the map name steps aside and AUTO becomes a round 48 px icon
   (same action, same state colours); both come back when the bar has gone */
.controller-mode:has(.boss-bars-top) .minimap-map-name {
    display: none;
}

.controller-mode:has(.boss-bars-top) .auto-btn {
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    gap: 0;
    justify-content: center;
    border-radius: 50%;
    letter-spacing: 0;
}

.controller-mode:has(.boss-bars-top) .auto-btn .auto-label,
.controller-mode:has(.boss-bars-top) .auto-btn .auto-battery {
    display: none;
}

.controller-mode:has(.boss-bars-top) .auto-btn .auto-dot {
    width: 14px;
    height: 14px;
}

/* the announcement banner: centred, goes by itself, never takes a tap */
.boss-banner {
    position: fixed;
    top: 24%;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(560px, calc(100vw - 32px));
    box-sizing: border-box;
    padding: 6px 28px;
    z-index: 60;
    pointer-events: none;
    font-family: 'Kanit', sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: var(--theme-text-accent);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
    background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.8) 15%, rgba(15, 23, 42, 0.8) 85%, transparent);
    animation: boss-banner-life var(--bb-banner, 4000ms) ease-out forwards;
}

/* under the phone's top bar (it ends at 60 px) */
.boss-banner-phone {
    top: max(30%, calc(76px + var(--safe-area-top)));
    font-size: 14px;
    padding: 4px 22px;
}

@keyframes boss-banner-life {
    0% { opacity: 0; }
    8% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .boss-bar-fill,
    .boss-bar-trail { transition: none; }
    .boss-bar-defeated { animation: none; }
}

/* ==========================================================================
   Guild (TASK-153, UI-POLISH-4 rebuilt on the UI kit): window, roles, emblem editor, invite, menu icon
   ========================================================================== */
.party-window-container.guild-window {
    top: 120px;
    left: 480px;
    width: 380px;
    max-height: 560px;
}
.guild-window-header {
    gap: var(--ui-space-2);
}
.guild-window-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.guild-header-shield {
    width: 16px;
    height: 18px;
    flex-shrink: 0;
}
.guild-header-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guild-header-count {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.guild-close-btn {
    flex-shrink: 0;
}
.guild-emblem-img {
    image-rendering: pixelated;
    flex: none;
    vertical-align: middle;
}
.guild-tabs {
    display: flex;
    gap: 2px;
    padding: 6px 8px 0 8px;
    border-bottom: 1px solid var(--theme-slot-border);
    flex-shrink: 0;
}
.guild-tab {
    flex: 1;
    min-height: 32px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--theme-text-secondary);
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    cursor: pointer;
}
.guild-tab.active,
.guild-tab.is-active {
    color: var(--theme-text-accent);
    border-bottom-color: var(--theme-text-accent);
}
.guild-window-body {
    padding: 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
}
.guild-create {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.guild-create-need {
    font-size: 12px;
    color: var(--theme-text-secondary);
}
.guild-create-need.short {
    color: #f87171;
}
.guild-members-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.guild-count {
    font-size: 12px;
    color: var(--theme-text-secondary);
}
.guild-sort-header {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr) 44px minmax(0, 0.9fr) 28px;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--ui-radius-sm, 4px);
}
.guild-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 0;
    background: transparent;
    border: none;
    color: var(--theme-text-secondary);
    font-family: var(--theme-font, 'Kanit', sans-serif);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    text-align: left;
    min-width: 0;
}
.guild-sort-btn:hover,
.guild-sort-btn.is-active {
    color: var(--theme-text-accent);
}
.guild-col-name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}
.guild-sort-arrow {
    font-size: 10px;
    line-height: 1;
    color: var(--theme-text-accent);
}
.guild-sort-spacer {
    width: 28px;
}
.guild-member-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.guild-member-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr) 44px minmax(0, 0.9fr) 28px;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: var(--ui-radius-sm, 4px);
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    font-size: 12px;
    opacity: 0.65;
}
.controller-mode .guild-sort-header,
.controller-mode .guild-member-row {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr) 48px minmax(0, 0.9fr) 48px;
}
.guild-member-row.online {
    opacity: 1;
}
.guild-member-row.offline {
    opacity: 0.6;
}
.guild-member-name {
    font-weight: 600;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guild-member-level,
.guild-member-role,
.guild-member-seen {
    color: var(--theme-text-secondary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.guild-member-actions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    flex-shrink: 0;
}
.guild-row-menu-btn {
    min-width: 24px;
    min-height: 24px;
    padding: 0 4px;
}
.guild-row-menu-backdrop {
    z-index: 1199;
}
.guild-row-action-menu {
    position: fixed;
    z-index: 1200;
    min-width: 184px;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    overflow: visible;
    transform: none;
}
.controller-mode .guild-row-action-menu .player-menu-item {
    min-height: 48px;
    font-size: 14px;
}
.guild-member-actions .party-action-btn {
    padding: 2px 6px;
}
/* compact on PC (the phone rule below makes every guild button 48 px) */
.guild-row-btn {
    min-width: 22px;
    min-height: 22px;
    line-height: 1;
}
.guild-invite-footer {
    margin-top: 4px;
    border-radius: var(--ui-radius-sm, 4px);
}
.guild-notice-tab {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.guild-notice-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.guild-notice-edit-btn {
    flex-shrink: 0;
}
.guild-notice-editor {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.guild-notice-editor-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.guild-notice-save-btn,
.guild-notice-cancel-btn {
    flex-shrink: 0;
}
.guild-settings-tab {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.guild-settings-kv-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--ui-radius-md, 6px);
}
.guild-kv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.guild-emblem-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.guild-edit-emblem-btn {
    flex-shrink: 0;
}
.guild-roles {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.guild-role-row {
    padding: 6px 8px;
    border-radius: var(--ui-radius-sm, 4px);
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
}
.guild-role-row.locked {
    opacity: 0.65;
}
.guild-role-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.guild-role-name {
    font-weight: 600;
    font-size: 13px;
    background: transparent;
    color: var(--theme-text-primary);
    border: 1px solid var(--theme-slot-border);
    border-radius: 4px;
    padding: 2px 6px;
    max-width: 160px;
}
span.guild-role-name {
    border: none;
    padding: 2px 0;
}
.guild-perm-ticks {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--theme-text-secondary);
}
.guild-perm.on {
    color: var(--theme-text-primary);
}
.guild-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.guild-info-emblem {
    display: flex;
    align-items: center;
    gap: 12px;
}
.guild-emblem-empty {
    width: 32px;
    height: 32px;
    border: 1px dashed var(--theme-slot-border);
    border-radius: 4px;
}
.guild-notice,
.guild-notice-edit {
    font-size: 12px;
    white-space: pre-wrap;
    color: var(--theme-text-primary);
}
.guild-notice {
    padding: 8px 10px;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--ui-radius-sm, 4px);
    min-height: 44px;
}
.guild-notice-edit {
    min-height: 76px;
    resize: vertical;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: 4px;
    padding: 6px 8px;
    font-family: inherit;
}
.guild-info-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.guild-leave-btn {
    flex-shrink: 0;
}
.guild-disband {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(239, 68, 68, 0.5);
    border-radius: var(--ui-radius-sm, 4px);
    background: rgba(239, 68, 68, 0.08);
}
.guild-disband-warn {
    font-size: 12px;
    color: #fca5a5;
}
.guild-disband-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.guild-disband-btn,
.guild-roles-save {
    align-self: flex-start;
    flex-shrink: 0;
}
.guild-invite-overlay {
    z-index: 950;
}
.guild-invite-card {
    border-color: var(--theme-border-accent);
}
.guild-name-input {
    width: 100%;
}
.guild-members {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.player-report {
    border-color: var(--theme-border-accent);
}
/* the editor: 16 x 18 px cells (each >= 16 px, tappable on a phone) */
.guild-emblem-editor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
.guild-emblem-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
.guild-emblem-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}
.guild-tool {
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: 4px;
    color: var(--theme-text-primary);
    font-size: 12px;
    padding: 4px 8px;
    cursor: pointer;
}
.guild-tool.active {
    border-color: var(--theme-text-accent);
    color: var(--theme-text-accent);
}
.guild-emblem-grid {
    display: grid;
    touch-action: none;
    user-select: none;
    background-color: #2a2f3a;
    background-image: linear-gradient(45deg, #3a4150 25%, transparent 25%, transparent 75%, #3a4150 75%),
        linear-gradient(45deg, #3a4150 25%, transparent 25%, transparent 75%, #3a4150 75%);
    background-size: 18px 18px;
    background-position: 0 0, 9px 9px;
    border: 1px solid var(--theme-slot-border);
    cursor: crosshair;
}
.guild-cell {
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.05);
    pointer-events: none;
}
.guild-palette {
    display: grid;
    grid-template-columns: repeat(8, 28px);
    gap: 4px;
}
.guild-swatch {
    width: 28px;
    height: 28px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    cursor: pointer;
}
.guild-swatch.active {
    border-color: #ffffff;
    box-shadow: 0 0 0 1px #000;
}
.guild-emblem-preview {
    display: flex;
    gap: 16px;
    align-items: center;
}
.guild-tag-mock {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 3px;
}
.guild-tag-mock-name {
    color: #b4ff50;
}
.guild-emblem-footer {
    display: flex;
    gap: 8px;
}
.guild-invite-icon {
    font-size: 26px;
}
.guild-invite-icon::before {
    content: none;
}
/* HUD menu: a small shield drawn in CSS (no sprite cell for it yet) */
.menu-icon-guild {
    width: 18px;
    height: 20px;
    background: transparent; display: flex; align-items: center; justify-content: center; color: #e5c07b;
    clip-path: none;
    pointer-events: none;
}
/* phones (844 x 390 landscape): full-screen window, every button >= 48 px, editor in a row;
   the HUD chips that float over the top of the screen step aside while it is open (m25) */
.controller-mode:has(.guild-window) .portal-density-indicator {
    display: none !important;
}
.controller-mode .party-window-container.guild-window {
    left: calc(4px + var(--safe-area-left));
    right: calc(4px + var(--safe-area-right));
    top: calc(4px + var(--safe-area-top));
    width: auto;
    max-height: calc(100% - 8px - var(--safe-area-top) - var(--safe-area-bottom));
}
.controller-mode .guild-window button {
    min-width: 48px;
    min-height: 48px;
}
.controller-mode .guild-emblem-editor {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
}
.controller-mode .guild-palette {
    grid-template-columns: repeat(8, 48px);
}
.controller-mode .guild-swatch {
    width: 48px;
    height: 48px;
}

/* ==========================================================================
   SOCIAL-1 & UI-POLISH-4: the one player menu, Friends tab, friend request, inspect window,
   Settings > Interface, Muted list, the HUD guild emblem
   ========================================================================== */
.player-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1199;
    background: transparent;
}
.player-menu {
    width: 200px;
    overflow: visible;
    position: fixed;
    z-index: 1200;
    min-width: 190px;
    max-width: 230px;
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: var(--ui-radius-md, var(--theme-radius));
    box-shadow: var(--theme-shadow), 0 8px 24px rgba(0, 0, 0, 0.55);
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--theme-text-primary);
    font-family: var(--theme-font, 'Kanit', sans-serif);
}
.player-menu-title {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    min-height: 28px;
    padding: 0 8px;
    border-bottom: 1px solid var(--theme-slot-border);
    font-size: 12px;
    font-weight: 700;
}
.player-menu-name {
    color: var(--theme-text-accent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.player-menu-party {
    color: #8cd9ff;
    font-weight: 600;
}
.player-menu-friend {
    color: #ff6996;
}
.player-menu .player-menu-item {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    min-height: 28px;
    background: transparent;
    border: none;
    border-radius: var(--ui-radius-sm, var(--theme-radius-inner));
    color: var(--theme-text-primary);
    padding: 0 10px;
    font-family: var(--theme-font, 'Kanit', sans-serif);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.player-menu .player-menu-item:hover:not(:disabled) {
    background: var(--theme-tab-active-bg);
    color: var(--theme-text-accent);
}
.player-menu .player-menu-item.danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}
.player-menu .player-menu-item.disabled,
.player-menu .player-menu-item:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.player-menu .player-menu-item.cancel {
    border-top: 1px solid var(--theme-slot-border);
    color: var(--theme-text-secondary);
}
.player-menu-arrow {
    margin-left: auto;
    color: var(--theme-text-secondary);
}
.player-menu-sub {
    position: absolute;
    z-index: 1201;
    width: 160px;
    min-width: 150px;
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: var(--ui-radius-md, var(--theme-radius));
    box-shadow: var(--theme-shadow), 0 8px 24px rgba(0, 0, 0, 0.55);
    padding: 5px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /*
    padding-left: 6px;
    border-left: 1px solid var(--theme-border);
}
*/
}
.player-menu-check {
    width: 12px;
    color: var(--theme-text-accent);
}
.player-menu .player-menu-item.sub.on {
    color: var(--theme-text-accent);
}
.player-menu .player-menu-item.sub.list {
    color: var(--theme-text-secondary);
}
.hud-top-chips {
    pointer-events: none;
}
.hud-btn {
    background: var(--theme-tab-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--ui-radius-sm, 4px);
    color: var(--theme-text-primary);
    font-family: var(--theme-font, 'Kanit', sans-serif);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
.hud-btn:hover {
    border-color: var(--theme-border-accent);
    color: var(--theme-text-accent);
}
.friend-request-overlay {
    z-index: 950;
}
.equip-slot.empty {
    opacity: 0.75;
}
.gs-row-head {
    color: var(--theme-text-secondary);
    font-size: 12px;
}
.settings-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* phones / Controller mode: centred via clamp_player_menu_pos, every row >= 48 px */
.player-menu.controller {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 6px;
    row-gap: 4px;
    width: 420px;
    min-width: 260px;
    max-width: calc(100vw - 16px);
    padding: 6px;
    overflow: visible;
}
.player-menu.controller .player-menu-title {
    grid-column: 1 / -1;
    height: 32px;
    min-height: 32px;
}
.player-menu.controller .player-menu-item {
    height: 48px;
    min-height: 48px;
    font-size: 14px;
}
.player-menu.controller .player-menu-item.cancel {
    grid-column: 1 / -1;
}
.player-menu.controller .player-menu-sub {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 160px;
    min-width: 150px;
    padding: 5px;
    margin: 0;
    border: 1px solid var(--theme-border);
}
.player-menu.controller .player-menu-sub .player-menu-item {
    width: 100%;
    height: 48px;
    min-height: 48px;
}
/*
.player-menu.controller {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 260px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
}
.player-menu.controller .player-menu-item {
    height: auto;
    min-height: 48px;
    font-size: 14px;
}
    -- three columns --
.player-menu.controller {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 6px;
    row-gap: 4px;
    min-width: 460px;
}
.player-menu.controller .player-menu-title,
.player-menu.controller .player-menu-sub,
.player-menu.controller .player-menu-item.cancel {
    grid-column: 1 / -1;
}
.player-menu.controller .player-menu-sub {
    position: absolute;
    z-index: 1201;
    width: 160px;
    min-width: 150px;
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: var(--ui-radius-md, var(--theme-radius));
    box-shadow: var(--theme-shadow), 0 8px 24px rgba(0, 0, 0, 0.55);
    padding: 5px;
    margin: 0;
    flex-direction: row;
    margin: 0;
    padding: 0;
    border-left: none;
}
.player-menu.controller .player-menu-sub .player-menu-item {
    flex: 1;
}

*/
/* the party window's Party | Friends tabs */
.party-window-tabs {
    display: flex;
    gap: 4px;
    padding: 6px 8px 0;
}
.party-tab {
    flex: 1;
    min-height: 30px;
    background: var(--theme-tab-bg);
    border: 1px solid transparent;
    border-radius: var(--theme-radius-inner) var(--theme-radius-inner) 0 0;
    color: var(--theme-text-secondary);
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.party-tab.active {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-tab-active-border);
    color: var(--theme-text-accent);
}
.party-name-edit {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}
.party-name-input {
    flex: 1;
    min-width: 0;
}
.friends-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.friends-count {
    font-size: 11px;
    color: var(--theme-text-secondary);
    padding: 2px 2px 0;
}
.friends-empty {
    font-size: 12px;
    color: var(--theme-text-secondary);
    margin: 6px 2px;
}
.friends-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.friend-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--ui-surface-card, rgba(0, 0, 0, 0.28));
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--ui-radius-md, var(--theme-radius-inner));
    transition: border-color 0.14s ease, background 0.14s ease;
}
.friend-row.online:hover {
    border-color: var(--theme-border);
}
.friend-row.offline {
    opacity: 0.58;
}
.friend-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.friend-header-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.friend-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--theme-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.friend-level {
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    color: var(--theme-text-accent);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}
.friend-where {
    font-size: 11px;
    color: var(--theme-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.friend-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.friend-btn {
    min-height: 26px;
    min-width: 26px;
    padding: 2px 7px;
    background: var(--theme-tab-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--ui-radius-sm, var(--theme-radius-inner));
    color: var(--theme-text-primary);
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.friend-btn.min-touch-target {
    min-height: 26px;
}
.friend-btn:hover:not(:disabled) {
    border-color: var(--theme-slot-hover-border);
    color: var(--theme-text-accent);
}
.friend-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.friend-btn.danger:hover:not(:disabled) {
    border-color: #ef4444;
    color: #f87171;
}
.friends-footer-actions {
    border-radius: var(--ui-radius-sm, 4px);
    margin-top: 2px;
}
.friend-add-input {
    flex: 1;
    min-width: 0;
}
.friend-add-btn {
    flex-shrink: 0;
}
.controller-mode .friend-btn,
.controller-mode .friend-btn.min-touch-target {
    min-height: 48px;
    min-width: 48px;
}
.friend-request-icon {
    filter: hue-rotate(300deg);
}

/* the inspect window */
.inspect-window {
    position: fixed;
    top: 120px;
    left: 540px;
    width: 300px;
    max-height: 520px;
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    color: var(--theme-text-primary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Kanit', sans-serif;
}
.inspect-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 8px;
}
.inspect-slot {
    cursor: pointer;
}
.inspect-slot .equip-name,
.inspect-slot .equip-label {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inspect-detail {
    margin: 0 8px 8px;
    padding: 6px 8px;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    font-size: 11px;
}
.inspect-detail-line {
    color: var(--theme-text-secondary);
}
.inspect-detail-line.socket {
    color: #a5f3fc;
}
.controller-mode .inspect-window {
    left: calc(4px + var(--safe-area-left));
    right: calc(4px + var(--safe-area-right));
    top: calc(4px + var(--safe-area-top));
    width: auto;
    max-height: calc(100% - 8px - var(--safe-area-top) - var(--safe-area-bottom));
    overflow-y: auto;
}
.controller-mode .inspect-window .inspect-grid {
    grid-template-columns: repeat(4, 1fr);
}
.controller-mode .inspect-window .equip-slot {
    min-height: 48px;
}

/* Settings > Interface + Muted list */
.social-settings .gs-row,
.muted-list .muted-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 2px;
}
.muted-row {
    font-size: 12px;
}
.muted-name {
    flex: 1;
    font-weight: 700;
}
.muted-kinds {
    color: var(--theme-text-secondary);
    font-size: 11px;
}

/* the report form for a player */
.player-report-name {
    width: 100%;
}
.player-report-desc {
    font-size: 11px;
    color: var(--theme-text-secondary);
    margin: 4px 0 0;
}

/* the HUD guild button: my guild's emblem */
.menu-icon-guild-emblem {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu-icon-guild-emblem .guild-emblem-img {
    image-rendering: pixelated;
}

/* SOCIAL-1 fix round: the Muted Players window */
.mute-window {
    left: 520px;
    width: 340px;
}
.mute-window-count {
    margin-left: auto;
    margin-right: 8px;
    font-size: 12px;
    color: var(--theme-text-secondary);
}
.mute-window-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    overflow-y: auto;
}
.mute-window .muted-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
}
.mute-window .party-toggle-btn {
    min-height: 26px;
    padding: 2px 6px;
    font-size: 11px;
}
.controller-mode .mute-window .party-toggle-btn,
.controller-mode .mute-window .friend-btn {
    min-height: 48px;
    min-width: 48px;
}

.friend-icon {
    display: inline-block;
    vertical-align: middle;
    margin-left: 3px;
}

/* AH-1: Auction House at the Market Clerk */
.hud-ah-claim-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    margin-left: 6px;
    background: var(--theme-badge-bg);
    border: 1px solid var(--theme-badge-border);
    border-radius: 999px;
    color: var(--theme-text-accent);
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.hud-ah-claim-count {
    background: var(--theme-tab-active-bg);
    color: var(--theme-text-accent);
    padding: 0 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.auction-house-window {
    position: absolute;
    top: 120px;
    left: 490px;
    width: 640px;
    max-width: calc(100vw - 20px);
    height: 500px;
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    color: var(--theme-text-primary);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    font-family: 'Kanit', sans-serif;
}
.ah-header-slots {
    font-size: 12px;
    color: var(--theme-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ah-premium-badge {
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--theme-badge-bg);
    border: 1px solid var(--theme-badge-border);
    color: var(--theme-text-accent);
    font-size: 10px;
    font-weight: 700;
}
.ah-banner {
    padding: 5px 10px;
    border-bottom: 1px solid var(--theme-slot-border);
    background: var(--theme-slot-bg);
    color: var(--theme-text-primary);
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}
.ah-banner.ok {
    color: var(--theme-text-accent);
}
.ah-banner.warn {
    color: var(--theme-border-accent);
}
.ah-tabs {
    display: flex;
    gap: 4px;
    padding: 6px 8px 0 8px;
    border-bottom: 1px solid var(--theme-slot-border);
    background: var(--theme-tab-bg);
    flex-shrink: 0;
    overflow-x: auto;
}
.ah-tab {
    flex: 1;
    padding: 5px 10px;
    background: var(--theme-tab-bg);
    border: 1px solid var(--theme-slot-border);
    border-bottom: none;
    border-top-left-radius: var(--theme-radius-inner);
    border-top-right-radius: var(--theme-radius-inner);
    color: var(--theme-text-secondary);
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: -1px;
    white-space: nowrap;
}
.ah-tab.active {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-tab-active-border);
    color: var(--theme-text-accent);
}
.ah-tab-badge {
    padding: 0 6px;
    border-radius: 999px;
    background: var(--theme-badge-bg);
    border: 1px solid var(--theme-badge-border);
    color: var(--theme-text-accent);
    font-size: 10px;
    font-weight: 800;
}
.ah-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 8px 10px;
    gap: 8px;
}
.ah-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}
.ah-cats,
.ah-sub-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.ah-cat-btn {
    padding: 3px 9px;
    background: var(--theme-tab-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    color: var(--theme-text-secondary);
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
.ah-cat-btn.active {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-tab-active-border);
    color: var(--theme-text-accent);
}
.ah-search-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ah-search-input {
    flex: 1;
    min-width: 120px;
    padding: 5px 8px;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    color: var(--theme-text-primary);
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
}
.ah-sort-select {
    padding: 5px 8px;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    color: var(--theme-text-primary);
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
}
.ah-split-pane,
.ah-sell-layout {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 10px;
    overflow: hidden;
}
.ah-list-pane,
.ah-bag-pane,
.ah-detail-pane,
.ah-form-pane {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    overflow: hidden;
}
.ah-detail-pane,
.ah-form-pane {
    padding: 8px;
    gap: 8px;
    overflow-y: auto;
}
.ah-detail-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ah-table-head {
    display: grid;
    grid-template-columns: 2.2fr 0.7fr 1.1fr 1.1fr 0.9fr;
    gap: 6px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--theme-slot-border);
    font-size: 11px;
    font-weight: 700;
    color: var(--theme-text-secondary);
}
.ah-table-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.ah-row {
    display: grid;
    grid-template-columns: 2.2fr 0.7fr 1.1fr 1.1fr 0.9fr;
    gap: 6px;
    align-items: center;
    padding: 6px 8px;
    border-bottom: 1px solid var(--theme-slot-border);
    font-size: 12px;
    cursor: pointer;
}
.ah-row:hover,
.ah-row.selected {
    background: var(--theme-tab-active-bg);
}
.ah-item-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--theme-slot-border);
    background: var(--theme-tab-bg);
    font-size: 12px;
    cursor: pointer;
}
.ah-item-row:hover,
.ah-item-row.selected {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-tab-active-border);
}
.ah-item-row.locked {
    opacity: 0.5;
    cursor: not-allowed;
}
.ah-item-info {
    flex: 1;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ah-item-sub {
    font-size: 11px;
    color: var(--theme-text-secondary);
}
.ah-col-item {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.ah-icon {
    width: 24px;
    height: 24px;
    image-rendering: pixelated;
    flex-shrink: 0;
}
.ah-item-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}
.ah-bag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 6px;
    padding: 8px;
    overflow-y: auto;
}
.ah-bag-slot {
    position: relative;
    height: 56px;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.ah-bag-slot.selected {
    border-color: var(--theme-slot-hover-border);
    box-shadow: 0 0 0 1px var(--theme-slot-hover-border);
}
.ah-bag-slot.denied {
    opacity: 0.38;
    filter: grayscale(0.8);
}
.ah-bag-qty {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--theme-text-primary);
}
.ah-bag-refine {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--theme-text-accent);
}
.ah-drop-zone,
.ah-selected-item {
    padding: 8px;
    border: 1px dashed var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.ah-field-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
}
.ah-stepper {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.ah-num-input {
    width: 96px;
    padding: 4px 6px;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    color: var(--theme-text-primary);
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    text-align: right;
}
.ah-step-btn,
.ah-btn,
.ah-dur-btn {
    padding: 4px 10px;
    background: var(--theme-tab-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    color: var(--theme-text-primary);
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.ah-btn.primary,
.ah-dur-btn.active {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-tab-active-border);
    color: var(--theme-text-accent);
}
.ah-btn.danger {
    border-color: var(--theme-border-accent);
    color: var(--theme-text-secondary);
}
.ah-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.ah-fee-box,
.ah-ref-card,
.ah-action-card {
    padding: 8px;
    background: var(--theme-tab-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 11px;
}
.ah-fee-line {
    display: flex;
    justify-content: space-between;
    color: var(--theme-text-secondary);
}
.ah-fee-line.total {
    color: var(--theme-text-primary);
    font-weight: 700;
}
.ah-fee-line.warn {
    color: var(--theme-border-accent);
    font-weight: 700;
}
.ah-ref-title,
.ah-detail-header {
    font-size: 12px;
    font-weight: 700;
    color: var(--theme-text-accent);
    display: flex;
    align-items: center;
    gap: 6px;
}
.ah-ref-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
}
.ah-ref-cell {
    display: flex;
    justify-content: space-between;
    color: var(--theme-text-secondary);
}
.ah-detail-props {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.ah-prop-chip {
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--theme-badge-bg);
    border: 1px solid var(--theme-badge-border);
    color: var(--theme-text-accent);
    font-size: 10px;
}
.ah-empty {
    padding: 20px;
    text-align: center;
    color: var(--theme-text-secondary);
    font-size: 12px;
}

.auction-house-window.ah-compact,
.controller-mode .auction-house-window {
    position: fixed !important;
    left: calc(4px + var(--safe-area-left)) !important;
    right: calc(4px + var(--safe-area-right)) !important;
    top: calc(4px + var(--safe-area-top)) !important;
    bottom: calc(4px + var(--safe-area-bottom)) !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    z-index: 950 !important;
}
.auction-house-window.ah-compact .profession-header,
.controller-mode .auction-house-window .profession-header {
    min-height: 48px;
    height: 48px;
    padding: 0 8px;
}
.auction-house-window.ah-compact .ah-split-pane,
.auction-house-window.ah-compact .ah-sell-layout,
.controller-mode .auction-house-window .ah-split-pane,
.controller-mode .auction-house-window .ah-sell-layout {
    grid-template-columns: 1fr;
    overflow-y: auto;
}
.auction-house-window.ah-compact .profession-close-btn,
.auction-house-window.ah-compact .ah-tab,
.auction-house-window.ah-compact .ah-cat-btn,
.auction-house-window.ah-compact .ah-btn,
.auction-house-window.ah-compact .ah-step-btn,
.auction-house-window.ah-compact .ah-dur-btn,
.auction-house-window.ah-compact .ah-item-row,
.auction-house-window.ah-compact .ah-row,
.auction-house-window.ah-compact .ah-bag-slot,
.controller-mode .auction-house-window .profession-close-btn,
.controller-mode .auction-house-window .ah-tab,
.controller-mode .auction-house-window .ah-cat-btn,
.controller-mode .auction-house-window .ah-btn,
.controller-mode .auction-house-window .ah-step-btn,
.controller-mode .auction-house-window .ah-dur-btn,
.controller-mode .auction-house-window .ah-item-row,
.controller-mode .auction-house-window .ah-row,
.controller-mode .auction-house-window .ah-bag-slot {
    min-height: 48px;
    min-width: 48px;
}
.auction-house-window.ah-compact .ah-search-input,
.auction-house-window.ah-compact .ah-num-input,
.controller-mode .auction-house-window .ah-search-input,
.controller-mode .auction-house-window .ah-num-input {
    min-height: 44px;
}
.controller-mode:has(.auction-house-window) .chat-container,
.controller-mode:has(.auction-house-window) #chat-container,
.controller-mode:has(.auction-house-window) .controller-dpad-cluster,
.controller-mode:has(.auction-house-window) .controller-action-cluster,
.controller-mode:has(.auction-house-window) .hotbar-container,
.controller-mode:has(.auction-house-window) .mobile-hotbar-cluster,
.controller-mode:has(.auction-house-window) .controller-menu-trigger,
.controller-mode:has(.auction-house-window) .world-event-strip,
.controller-mode:has(.auction-house-window) .portal-density-indicator {
    display: none !important;
}

/* ==========================================================================
   SOV SHOP + CASH TAB (CASH-1): a centred window on PC, full screen on a phone.
   Names / buttons English, notices Thai. Placeholder coin glyph (art: open).
   ========================================================================== */
.sov-window {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    font-family: 'Kanit', sans-serif;
    color: var(--theme-text-primary);
    z-index: 960;
}
.sov-header {
    background: var(--theme-header-bg);
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--theme-slot-border);
    flex-shrink: 0;
}
.sov-title {
    font-size: 15px;
    font-weight: 500;
    flex: 1;
}
.sov-balance {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #fcd34d;
    font-variant-numeric: tabular-nums;
}
.sov-coin {
    color: #fbbf24;
    font-size: 14px;
    line-height: 1;
}
.sov-close-btn {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.6);
    color: #fca5a5;
    border-radius: var(--theme-radius-inner);
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    padding: 3px 10px;
    cursor: pointer;
}
.sov-tabs {
    display: flex;
    gap: 3px;
    padding: 6px 8px 0 8px;
    border-bottom: 1px solid var(--theme-slot-border);
    flex-shrink: 0;
}
.sov-tab {
    flex: 1;
    background: var(--theme-tab-bg);
    border: 1px solid var(--theme-slot-border);
    border-bottom: none;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 5px 4px;
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    color: var(--theme-text-secondary);
    cursor: pointer;
    margin-bottom: -1px;
    white-space: nowrap;
}
.sov-tab.active {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-tab-active-border);
    color: var(--theme-text-accent);
    font-weight: 600;
}
.sov-tab.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.sov-body {
    flex: 1;
    min-height: 120px;
    overflow-y: auto;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sov-empty {
    margin: 24px auto;
    color: var(--theme-text-secondary);
    font-size: 14px;
    text-align: center;
}
.sov-note.paused {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #fca5a5;
    border-radius: var(--theme-radius-inner);
    padding: 6px 8px;
    font-size: 13px;
}
.sov-offer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
}
.sov-offer-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    image-rendering: pixelated;
}
.sov-offer-icon.service {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fbbf24;
    font-size: 20px;
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 6px;
}
.sov-offer-text {
    flex: 1;
    min-width: 0;
}
.sov-offer-name {
    font-size: 14px;
    font-weight: 600;
}
.sov-offer-desc {
    font-size: 12px;
    color: var(--theme-text-secondary);
    line-height: 1.35;
}
.sov-offer-buy {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.sov-offer-price {
    font-size: 13px;
    font-weight: 600;
    color: #fcd34d;
    font-variant-numeric: tabular-nums;
}
.sov-buy-btn {
    min-width: 72px;
    background: rgba(251, 191, 36, 0.18);
    border: 1px solid rgba(251, 191, 36, 0.7);
    color: #fde68a;
    border-radius: var(--theme-radius-inner);
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    padding: 4px 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.sov-buy-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.sov-spinner {
    width: 10px;
    height: 10px;
    border: 2px solid rgba(253, 230, 138, 0.35);
    border-top-color: #fde68a;
    border-radius: 50%;
    animation: sov-spin 0.8s linear infinite;
}
@keyframes sov-spin {
    to { transform: rotate(360deg); }
}
.sov-result {
    flex-shrink: 0;
    padding: 6px 10px;
    font-size: 13px;
    border-top: 1px solid var(--theme-slot-border);
}
.sov-result.ok { color: #86efac; }
.sov-result.fail { color: #fca5a5; }
.sov-confirm .sov-name-label {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--theme-text-secondary);
}
.sov-name-input {
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    padding: 6px 8px;
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    color: var(--theme-text-primary);
    font-family: 'Kanit', sans-serif;
    font-size: 14px;
}
.sov-name-input.invalid { border-color: rgba(239, 68, 68, 0.8); }
.sov-name-hint {
    font-size: 11px;
    color: var(--theme-text-secondary);
    margin-top: 2px;
}
/* PAY-1: the Top-up tab (packs, QR, outcome card, history) */
.topup-packs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.topup-pack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 6px;
    background: var(--theme-slot-bg);
    border: 1px solid rgba(251, 191, 36, 0.55);
    border-radius: var(--theme-radius-inner);
    color: var(--theme-text-primary);
    font-family: 'Kanit', sans-serif;
    cursor: pointer;
}
.topup-pack:hover:not(.disabled) { border-color: rgba(251, 191, 36, 0.95); }
.topup-pack.disabled { opacity: 0.5; cursor: not-allowed; }
.topup-pack-price { font-size: 18px; font-weight: 600; color: #fde68a; }
.topup-pack-sov { font-size: 13px; }
.topup-pack-bonus { font-size: 11px; color: #86efac; }
.topup-requesting {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--theme-text-secondary);
}
.topup-qr-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.topup-qr-box {
    background: #ffffff;
    padding: 6px;
    border-radius: var(--theme-radius-inner);
    line-height: 0;
}
.topup-qr-svg { width: 236px; height: 236px; display: block; }
.topup-qr-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
}
.topup-qr-amount { font-size: 22px; font-weight: 600; color: #fde68a; }
.topup-qr-get { font-size: 13px; }
.topup-countdown { font-size: 14px; color: #fbbf24; font-variant-numeric: tabular-nums; }
.topup-code { font-size: 12px; color: var(--theme-text-secondary); letter-spacing: 0.5px; }
.topup-note { font-size: 12px; color: var(--theme-text-secondary); max-width: 340px; }
.topup-note.warn { color: #fca5a5; }
.topup-btns { display: flex; gap: 8px; margin-top: 4px; }
.topup-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 18px auto;
    padding: 14px 16px;
    border-radius: var(--theme-radius-inner);
    text-align: center;
    max-width: 340px;
}
.topup-card.ok { background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.5); }
.topup-card.fail, .topup-card.expired { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.45); }
.topup-card-text { font-size: 15px; }
.topup-history { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.topup-history-title { font-size: 12px; color: var(--theme-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.topup-history-empty { font-size: 12px; color: var(--theme-text-secondary); }
.topup-history-row {
    display: grid;
    grid-template-columns: 76px 56px 1fr auto;
    gap: 6px;
    align-items: baseline;
    font-size: 12px;
    padding: 3px 4px;
    border-bottom: 1px solid var(--theme-slot-border);
}
.topup-h-date { color: var(--theme-text-secondary); font-variant-numeric: tabular-nums; }
.topup-h-status { font-size: 11px; }
.topup-h-status.credited { color: #86efac; }
.topup-h-status.pending, .topup-h-status.created { color: #fbbf24; }
.topup-h-status.failed, .topup-h-status.review { color: #fca5a5; }
.topup-h-code { grid-column: 1 / 3; color: var(--theme-text-secondary); letter-spacing: 0.5px; }
.topup-h-excess { grid-column: 3 / 5; color: #86efac; font-size: 11px; }
.controller-mode .topup-pack { min-height: 64px; }
.controller-mode .topup-btns button, .controller-mode .topup-ok { min-height: 48px; min-width: 104px; font-size: 14px; }
/* phone: the QR big enough for another phone's camera, the text beside it */
.controller-mode .topup-qr-view { flex-direction: row; justify-content: center; align-items: center; gap: 14px; }
.controller-mode .topup-qr-svg {
    width: min(64vh, 300px);
    width: min(64dvh, 300px);
    height: min(64vh, 300px);
    height: min(64dvh, 300px);
}
@media (max-height: 500px) {
    .topup-packs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.menu-icon-custom.icon-sov {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 17px;
    line-height: 1;
    color: #fbbf24;
    pointer-events: none;
}
.inv-tab.cash { color: #fcd34d; }
.cash-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--theme-slot-border);
    font-family: 'Kanit', sans-serif;
}
.cash-balance {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}
.cash-balance-num {
    font-size: 16px;
    font-weight: 700;
    color: #fcd34d;
    font-variant-numeric: tabular-nums;
}
.cash-balance-unit {
    font-size: 12px;
    color: var(--theme-text-secondary);
}
.cash-premium {
    flex: 1;
    font-size: 12px;
    color: var(--theme-text-secondary);
}
.cash-premium.on { color: #fde68a; }
.cash-shop-btn {
    background: rgba(251, 191, 36, 0.18);
    border: 1px solid rgba(251, 191, 36, 0.7);
    color: #fde68a;
    border-radius: var(--theme-radius-inner);
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    padding: 3px 10px;
    cursor: pointer;
}
.cash-empty {
    width: 100%;
    font-size: 12px;
    color: var(--theme-text-secondary);
}
.controller-mode .sov-window.controller-layout {
    left: calc(4px + var(--safe-area-left)) !important;
    right: calc(4px + var(--safe-area-right)) !important;
    top: calc(4px + var(--safe-area-top)) !important;
    bottom: calc(4px + var(--safe-area-bottom)) !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    z-index: 990 !important;
}
.controller-mode .sov-header { min-height: 48px; }
.controller-mode .sov-close-btn { min-width: 72px; min-height: 48px; font-size: 15px; }
.controller-mode .sov-tab { min-height: 48px; font-size: 14px; }
.controller-mode .sov-buy-btn { min-height: 48px; min-width: 88px; font-size: 14px; }
.controller-mode .sov-name-input { min-height: 48px; font-size: 16px; }
.controller-mode .cash-shop-btn { min-height: 48px; font-size: 14px; }
.controller-mode:has(.sov-window) .controller-dpad-cluster,
.controller-mode:has(.sov-window) .controller-action-cluster,
.controller-mode:has(.sov-window) .mobile-hotbar-cluster {
    display: none !important;
}

/* ===== CASH-2: Trade Sov, Tax Preview, Cash Items, Committing Lock ===== */
.trade-currencies-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.trade-sov-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.28);
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid rgba(56, 189, 248, 0.16);
}

.trade-sov-label {
    color: #7dd3fc;
    font-weight: 600;
}

.trade-sov-balance-hint {
    color: #94a3b8;
    font-size: 11px;
}

.trade-sov-input {
    flex: 1;
    min-width: 0;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(56, 189, 248, 0.25);
    color: #38bdf8;
    font-weight: 600;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 12px;
}

.trade-sov-input:focus {
    outline: none;
    border-color: #38bdf8;
    box-shadow: 0 0 6px rgba(56, 189, 248, 0.4);
}

.trade-sov-val {
    color: #38bdf8;
    font-weight: 600;
}

.trade-tax-preview {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 7px;
    border-radius: 5px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    font-size: 11px;
    color: #fde68a;
}

.trade-tax-line {
    line-height: 1.25;
}

.trade-slot.cash-item-slot {
    border-color: rgba(251, 191, 36, 0.65);
    box-shadow: inset 0 0 6px rgba(251, 191, 36, 0.22);
}

.trade-cash-badge {
    position: absolute;
    top: 1px;
    right: 2px;
    padding: 0 3px;
    border-radius: 3px;
    background: rgba(245, 158, 11, 0.88);
    color: #0f172a;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.3px;
    line-height: 1.3;
    pointer-events: none;
}

.trade-cash-items-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.trade-cash-item-row {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(251, 191, 36, 0.14);
    border: 1px solid rgba(251, 191, 36, 0.45);
    font-size: 11px;
    color: #fde68a;
}

.trade-cash-item-tag {
    padding: 0 4px;
    border-radius: 3px;
    background: #fbbf24;
    color: #0f172a;
    font-size: 9px;
    font-weight: 800;
}

.trade-cash-item-name {
    font-weight: 600;
}

.trade-committing-banner {
    padding: 4px 10px;
    border-radius: 5px;
    background: rgba(56, 189, 248, 0.16);
    border: 1px solid rgba(56, 189, 248, 0.45);
    color: #7dd3fc;
    font-size: 12px;
    font-weight: 600;
    margin-right: auto;
}

.trade-window.controller-layout .trade-sov-input,
.trade-window.controller-layout .trade-shilling-input {
    min-height: 40px;
    font-size: 14px;
}

/* Barber Window (BARBER-NPC) */
.barber-window {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    max-width: 90vw;
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1.5px solid var(--theme-border-accent);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow), 0 8px 32px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: dialog-bar-appear 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.barber-header {
    background: var(--theme-header-bg);
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--theme-slot-border);
}

.barber-title-info {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.barber-title {
    font-weight: bold;
    color: #fff;
    font-size: 15px;
}

.barber-subtitle {
    font-size: 12px;
    color: #aaa;
}

.barber-close-btn {
    background: none;
    border: none;
    color: #bbb;
    font-size: 16px;
    cursor: pointer;
}

.barber-close-btn:hover {
    color: #fff;
}

.barber-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 380px;
    overflow-y: auto;
}

.barber-instruction {
    font-size: 13px;
    color: #ddd;
}

.barber-options-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.barber-option-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    cursor: pointer;
    color: #eee;
    font-size: 13px;
    transition: background 0.15s, border-color 0.15s;
}

.barber-option-card:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
}

.barber-option-card.selected {
    background: rgba(212, 160, 23, 0.2);
    border-color: #d4a017;
    color: #fff;
    font-weight: bold;
}

.barber-current-badge {
    font-size: 11px;
    padding: 2px 6px;
    background: #4caf50;
    color: #fff;
    border-radius: 3px;
    text-transform: uppercase;
}

.barber-fee-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13px;
}

.barber-fee-label {
    color: #bbb;
}

.barber-fee-value {
    color: #ffd700;
    font-weight: bold;
}

.barber-fee-value.free {
    color: #4caf50;
}

.barber-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px;
    background: var(--theme-header-bg);
    border-top: 1px solid var(--theme-slot-border);
}

.barber-btn {
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid transparent;
}

.barber-btn.cancel {
    background: rgba(255, 255, 255, 0.1);
    color: #ccc;
}

.barber-btn.cancel:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.barber-btn.confirm {
    background: #d4a017;
    color: #000;
    font-weight: bold;
}

.barber-btn.confirm:hover:not(:disabled) {
    background: #e6b325;
}

.barber-btn.confirm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================================================
   FISH-4: Profession Window (Fishing: Tackle, Tackle box, Collection)
   ========================================================================== */

.profession-window {
    position: absolute;
    width: 420px;
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    font-family: 'Kanit', sans-serif;
    color: var(--theme-text-primary);
}

.profession-header {
    background: var(--theme-header-bg);
    padding: 6px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--theme-slot-border);
    cursor: grab;
    touch-action: none;
    user-select: none;
    flex-shrink: 0;
}

.profession-header:active {
    cursor: grabbing;
}

.profession-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--theme-text-primary);
}

.profession-close-btn {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.6);
    color: #fca5a5;
    border-radius: var(--theme-radius-inner);
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    padding: 3px 10px;
    cursor: pointer;
}

.profession-close-btn:hover {
    background: rgba(239, 68, 68, 0.25);
}

.profession-top-tabs {
    display: flex;
    gap: 4px;
    padding: 6px 8px 0 8px;
    border-bottom: 1px solid var(--theme-slot-border);
    flex-shrink: 0;
}

.profession-top-tab {
    flex: 1;
    background: var(--theme-tab-bg);
    border: 1px solid var(--theme-slot-border);
    border-bottom: none;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 5px 8px;
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    color: var(--theme-text-secondary);
    cursor: pointer;
    margin-bottom: -1px;
}

.profession-top-tab.active {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-tab-active-border);
    color: var(--theme-text-accent);
    font-weight: 600;
}

.profession-lv-bar {
    padding: 8px 10px;
    background: var(--theme-slot-bg);
    border-bottom: 1px solid var(--theme-slot-border);
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
}

.profession-lv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.profession-lv-badge {
    font-weight: 600;
    color: var(--theme-text-accent);
    background: var(--theme-badge-bg);
    border: 1px solid var(--theme-badge-border);
    padding: 1px 6px;
    border-radius: 4px;
}

.profession-exp-text {
    color: var(--theme-text-secondary);
    font-variant-numeric: tabular-nums;
}

.profession-exp-track {
    width: 100%;
    height: 8px;
    background: var(--theme-scroll-track);
    border-radius: 4px;
    overflow: hidden;
}

.profession-exp-fill {
    height: 100%;
    background: var(--theme-exp-bar);
    transition: width 0.2s ease;
}

.profession-subtabs {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--theme-slot-border);
    flex-shrink: 0;
}

.profession-subtab {
    flex: 1;
    min-height: 32px;
    padding: 5px 8px;
    border-radius: var(--theme-radius-inner);
    border: 1px solid var(--theme-slot-border);
    background: var(--theme-tab-bg);
    color: var(--theme-text-secondary);
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
}

.profession-subtab:hover {
    border-color: var(--theme-slot-hover-border);
}

.profession-subtab.active {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-tab-active-border);
    color: var(--theme-text-accent);
    font-weight: 600;
}

.profession-body {
    flex: 1;
    min-height: 120px;
    max-height: 360px;
    overflow-y: auto;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profession-tackle-pane,
.profession-tackle-box-pane,
.profession-collection-pane {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profession-help-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    border: 1px solid var(--theme-slot-border);
    background: var(--theme-tab-bg);
    color: var(--theme-text-secondary);
    font-size: 11px;
    font-weight: 700;
    cursor: help;
    user-select: none;
}

.profession-help-badge:hover {
    color: var(--theme-text-primary);
    border-color: var(--theme-border-accent);
}

.profession-help-badge .profession-help-tip {
    right: 0;
    left: auto;
    top: calc(100% + 6px);
    bottom: auto;
    width: 240px;
    white-space: normal;
    z-index: 30;
}

.profession-help-badge:hover .profession-help-tip {
    display: block;
}

.profession-kit-list,
.profession-tackle-box-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profession-kit-slot,
.profession-tackle-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--theme-radius-inner);
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.profession-kit-slot.occupied {
    touch-action: none;
}

.profession-kit-slot:hover,
.profession-tackle-item.equippable:hover {
    border-color: var(--theme-slot-hover-border);
    box-shadow: 0 0 8px var(--theme-slot-hover-glow);
}

.profession-kit-slot.drop-valid {
    border-color: var(--theme-border-accent);
    box-shadow: 0 0 10px var(--theme-slot-hover-glow);
}

.profession-icon-tile {
    position: relative;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: var(--theme-radius-inner);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: var(--theme-text-primary);
    border: 1px solid var(--theme-slot-border);
    background: var(--theme-tab-bg);
    user-select: none;
}

.profession-icon-letter {
    line-height: 1;
}

.profession-icon-tile.rarity-empty {
    background: transparent;
    border-style: dashed;
    color: var(--theme-text-secondary);
}

.profession-icon-tile.rarity-common {
    background: rgba(148, 163, 184, 0.22);
    border-color: #94a3b8;
    color: #e2e8f0;
}

.profession-icon-tile.rarity-uncommon {
    background: rgba(52, 211, 153, 0.22);
    border-color: #34d399;
    color: #a7f3d0;
}

.profession-icon-tile.rarity-rare {
    background: rgba(96, 165, 250, 0.24);
    border-color: #60a5fa;
    color: #bfdbfe;
}

.profession-icon-tile.rarity-prize {
    background: rgba(192, 132, 252, 0.26);
    border-color: #c084fc;
    color: #e9d5ff;
}

.profession-icon-tile.rarity-legendary {
    background: rgba(251, 191, 36, 0.28);
    border-color: #fbbf24;
    color: #fde68a;
}

.profession-icon-count {
    position: absolute;
    right: 2px;
    bottom: 1px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.65);
    padding: 0 3px;
    border-radius: 3px;
}

.profession-kit-info,
.profession-tackle-info,
.profession-species-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.profession-kit-title-row,
.profession-species-header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.profession-slot-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--theme-tab-bg);
    border: 1px solid var(--theme-slot-border);
    color: var(--theme-text-secondary);
}

.profession-item-name,
.profession-species-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.profession-item-empty {
    font-size: 12px;
    color: var(--theme-text-secondary);
    font-style: italic;
}

.profession-tuning-lv {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--theme-badge-bg);
    border: 1px solid var(--theme-badge-border);
    color: var(--theme-text-accent);
}

.profession-stat-lines {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.profession-stat-line {
    font-size: 11px;
    color: var(--theme-text-accent);
}

.profession-item-desc {
    font-size: 11px;
    color: var(--theme-text-secondary);
}

.profession-action-btn {
    padding: 5px 10px;
    min-height: 30px;
    border-radius: var(--theme-radius-inner);
    border: 1px solid var(--theme-slot-border);
    background: var(--theme-tab-bg);
    color: var(--theme-text-primary);
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.profession-action-btn.equip {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-tab-active-border);
    color: var(--theme-text-accent);
}

.profession-action-btn.unequip {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.6);
    color: #fca5a5;
}

.profession-empty-notice {
    padding: 20px 12px;
    text-align: center;
    font-size: 12px;
    color: var(--theme-text-secondary);
}

.profession-collection-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profession-species-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--theme-radius-inner);
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
}

.profession-species-card.uncaught {
    opacity: 0.68;
}

.profession-rarity-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: uppercase;
}

.profession-rarity-badge.rarity-common {
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.2);
}

.profession-rarity-badge.rarity-uncommon {
    color: #6ee7b7;
    background: rgba(52, 211, 153, 0.2);
}

.profession-rarity-badge.rarity-rare {
    color: #93c5fd;
    background: rgba(96, 165, 250, 0.22);
}

.profession-rarity-badge.rarity-prize {
    color: #d8b4fe;
    background: rgba(192, 132, 252, 0.24);
}

.profession-rarity-badge.rarity-legendary {
    color: #fde047;
    background: rgba(251, 191, 36, 0.26);
}

.profession-species-stats {
    font-size: 11px;
    color: var(--theme-text-secondary);
}

/* phone / controller: full screen, safe-area aware, above HUD badges, >= 48 px targets */
.controller-mode .profession-window.controller-layout {
    position: fixed !important;
    left: calc(4px + var(--safe-area-left)) !important;
    right: calc(4px + var(--safe-area-right)) !important;
    top: calc(4px + var(--safe-area-top)) !important;
    bottom: calc(4px + var(--safe-area-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    z-index: 950 !important;
}

.controller-mode .profession-header {
    min-height: 48px;
    height: 48px;
    padding: 0 8px;
}

.controller-mode .profession-window.controller-layout .profession-close-btn,
.controller-mode .profession-window.controller-layout .profession-top-tab,
.controller-mode .profession-window.controller-layout .profession-subtab,
.controller-mode .profession-window.controller-layout .profession-kit-slot,
.controller-mode .profession-window.controller-layout .profession-tackle-item,
.controller-mode .profession-window.controller-layout .profession-action-btn,
.controller-mode .profession-window.controller-layout .profession-help-badge {
    min-width: 48px;
    min-height: 48px;
}

.controller-mode .profession-window.controller-layout .profession-body {
    flex: 1;
    max-height: none;
}

.controller-mode:has(.profession-window) .chat-container,
.controller-mode:has(.profession-window) #chat-container,
.controller-mode:has(.profession-window) .controller-dpad-cluster,
.controller-mode:has(.profession-window) .controller-action-cluster,
.controller-mode:has(.profession-window) .hotbar-container,
.controller-mode:has(.profession-window) .mobile-hotbar-cluster,
.controller-mode:has(.profession-window) .controller-menu-trigger,
.controller-mode:has(.profession-window) .world-event-strip,
.controller-mode:has(.profession-window) .portal-density-indicator {
    display: none !important;
}

/* =========================================================================
   PERF-TOOL: /perf top-left overlay + 48px system switch tap targets
   ========================================================================= */

.perf-overlay {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 300px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    background: var(--theme-window-bg);
    border: var(--theme-border-width) solid var(--theme-border-color);
    border-radius: var(--theme-border-radius);
    box-shadow: var(--theme-window-shadow);
    color: var(--theme-text-primary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 60;
    font-size: 12px;
}

.controller-layout .perf-overlay {
    top: max(8px, env(safe-area-inset-top));
    left: max(8px, env(safe-area-inset-left));
    width: 280px;
    max-width: calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));
    max-height: calc(100vh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    z-index: 65;
}

.controller-layout:has(.perf-overlay) .world-event-strip {
    display: none;
}

.perf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--theme-header-bg);
    border-bottom: 1px solid var(--theme-slot-border);
    touch-action: none;
}

.perf-title {
    font-size: 13px;
    font-weight: bold;
    color: #ffd700;
}

.perf-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.perf-all-on-btn {
    background: rgba(255, 215, 0, 0.14);
    border: 1px solid rgba(255, 215, 0, 0.45);
    border-radius: 4px;
    color: #ffd700;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 8px;
    min-height: 28px;
    cursor: pointer;
}

.perf-all-on-btn:hover {
    background: rgba(255, 215, 0, 0.24);
}

.perf-close-btn {
    background: transparent;
    border: none;
    color: #aaa;
    font-size: 15px;
    min-width: 28px;
    min-height: 28px;
    cursor: pointer;
    padding: 2px 6px;
}

.perf-close-btn:hover {
    color: #fff;
}

.perf-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px;
    overflow-y: auto;
}

.perf-metrics {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.perf-metric-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    line-height: 1.35;
}

.perf-metric-label {
    color: #bbb;
}

.perf-metric-value {
    color: #fff;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
}

.perf-switches {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.perf-switch-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 2px;
    min-height: 48px;
    padding: 6px 10px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.05);
    color: #eee;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.perf-switch-btn.is-on {
    border-color: rgba(76, 175, 80, 0.55);
    background: rgba(76, 175, 80, 0.12);
}

.perf-switch-btn.is-off {
    border-color: rgba(229, 115, 115, 0.45);
    background: rgba(229, 115, 115, 0.08);
    opacity: 0.85;
}

.perf-switch-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.perf-switch-label {
    font-size: 12px;
    font-weight: bold;
    color: #fff;
}

.perf-switch-pill {
    font-size: 11px;
    font-weight: bold;
    padding: 1px 7px;
    border-radius: 10px;
}

.perf-switch-btn.is-on .perf-switch-pill {
    background: rgba(76, 175, 80, 0.28);
    color: #81c784;
}

.perf-switch-btn.is-off .perf-switch-pill {
    background: rgba(229, 115, 115, 0.25);
    color: #ef9a9a;
}

.perf-switch-hint {
    font-size: 10px;
    color: #aaa;
    line-height: 1.25;
}

/* =========================================================================
   PVP-1a: Duel Invite, HUD Chip, Countdown / Out-of-Ring Banner & Result Card
   ========================================================================= */

.duel-invite-overlay,
.duel-result-overlay {
    z-index: 1400;
}

.duel-hud-chip {
    z-index: 60;
}

.duel-center-banner {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 60;
    padding: 8px 18px;
    border-radius: var(--theme-border-radius);
    background: rgba(16, 18, 28, 0.85);
    border: 2px solid #ffd700;
    color: #ffd700;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.05em;
    pointer-events: none;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}

.duel-center-banner.duel-oor-warning {
    top: 38%;
    border-color: #ef4444;
    color: #fca5a5;
    font-size: 16px;
}

/* PVP-2a: the PK button, the name colour and the Red zone */
.duel-center-banner.pk-zone-warning {
    top: 22%;
    border-color: #ef4444;
    color: #fca5a5;
    font-size: 16px;
    text-align: center;
    max-width: 80vw;
}

.pk-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pk-button {
    pointer-events: auto;
    padding: 2px 8px;
    min-height: 28px;
    font-size: 12px;
}

.pk-button.pk-on {
    border-color: #ef4444;
    color: #fca5a5;
}

.pk-colour {
    font-size: 12px;
    font-weight: 700;
    text-shadow: 0 1px 2px #000;
}

.pk-colour-purple {
    color: #c77dff;
}

.pk-jail {
  color: #e8b04a;
}

.pk-colour-red {
    color: #ff453b;
}

.minimap-map-name.pk-zone-red {
    color: #ef4444;
}

.minimap-map-name.pk-zone-black {
    color: #17171c;
    text-shadow: 0 0 3px #f4f4f5, 0 0 1px #f4f4f5;
}

/* =========================================================================
   UI-POLISH-3 — Character Windows (Status, Equipment, Soul Drive, Skills)
   ========================================================================= */

/* --- Status Window (PC) --- */
.status-window {
    width: 415px;
    height: 494px;
    padding: 8px 14px 10px 14px;
    box-sizing: border-box;
}

.status-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

.status-columns {
    flex: 1;
    min-height: 0;
    gap: 10px;
}

.status-col-left {
    gap: 3px;
    padding-right: 6px;
}

.status-col-right {
    gap: 1px;
    padding-left: 2px;
    justify-content: space-between;
}

.status-derived-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.status-derived-section-title {
    font-size: 10px;
    line-height: 1.1;
    padding-bottom: 1px;
    margin-top: 2px;
}

.status-derived-group:first-child .status-derived-section-title {
    margin-top: 0;
}

.status-derived-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 16px;
    line-height: 16px;
    padding: 0 4px;
    font-size: 11px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.status-derived-name {
    color: var(--ui-text-muted);
    font-size: 11px;
}

.status-derived-val {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.status-perfection-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 2px 6px;
    margin-bottom: 2px;
    border-radius: var(--ui-radius-sm);
    font-size: 11px;
    line-height: 1.2;
    cursor: help;
}

.status-ratio-badge {
    height: 16px;
    padding: 0 5px;
    font-size: 10px;
}

.status-footer-bar {
    margin-top: 4px;
    padding: 4px 0 0 0;
    border-top: 1px solid var(--theme-border-inner);
    justify-content: space-between;
}

.status-footer-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-elder-reset-info-btn {
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    color: var(--ui-text-muted);
    cursor: help;
}

.status-apply-btn,
.status-reset-btn {
    min-width: 64px;
}

.is-disabled {
    opacity: 0.45;
}

/* --- Equipment Window (PC) --- */
.equip-window:not(.equip-window-drive) {
    width: 280px;
    height: 311px;
    padding: 10px 12px 12px 12px;
    box-sizing: border-box;
}

.equip-window.equip-window-drive {
    width: 392px;
    padding: 10px 12px 12px 12px;
    box-sizing: border-box;
}

.equip-mode-tabs {
    margin: 4px 0 6px 0;
}

.equip-stage {
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex: 1;
    min-height: 0;
    margin-top: 2px;
}

.equip-paperdoll {
    width: 52px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: var(--ui-surface-inset);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--ui-radius-sm);
    padding: 6px 4px;
}

.equip-paperdoll-head {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid rgba(212, 175, 55, 0.38);
    background: rgba(212, 175, 55, 0.08);
}

.equip-paperdoll-torso {
    width: 24px;
    height: 32px;
    border-radius: 5px 5px 3px 3px;
    border: 1.5px solid rgba(212, 175, 55, 0.32);
    background: rgba(212, 175, 55, 0.06);
}

.equip-paperdoll-legs {
    width: 20px;
    height: 28px;
    border-radius: 2px 2px 4px 4px;
    border: 1.5px solid rgba(212, 175, 55, 0.25);
    background: rgba(212, 175, 55, 0.04);
}

.equip-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    margin: 0;
}

.equip-slot {
    min-height: 44px;
    padding: 5px 7px;
    justify-content: space-between;
}

.equip-placeholder-icon {
    width: 26px;
    height: 26px;
    border-radius: var(--ui-radius-sm);
    border: 1px dashed rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.22);
}

/* --- Soul Drive Panel --- */
.sd-panel.read-only {
    opacity: 0.92;
}

.sd-burn {
    font-size: 11px;
    color: var(--ui-text-muted);
}

.sd-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.sd-readonly-badge {
    font-size: 10px;
}

.sd-meters {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sd-line-label {
    color: var(--ui-text-muted);
}

.sd-line-val {
    font-variant-numeric: tabular-nums;
}

.sd-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sd-route {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sd-route-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 11px;
}

.sd-route-name {
    font-weight: 700;
    color: var(--theme-text-gold);
}

.sd-route-meta {
    color: var(--ui-text-muted);
    font-variant-numeric: tabular-nums;
}

.sd-route-status {
    font-size: 10px;
}

.sd-route-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sd-route-btn {
    flex: 1;
    min-width: 58px;
}

.sd-loot-chip {
    flex: 1;
    min-width: 58px;
}

/* --- Skill Tree & Branches & Tooltip --- */
.skill-tree-window:not(:has(.with-branches)) {
    width: 810px;
    height: 407px;
}

.skill-tree-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.skill-tree-points-badge {
    font-variant-numeric: tabular-nums;
}

.skill-tree-legend,
.controller-skill-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 3px 12px;
    background: rgba(0, 0, 0, 0.22);
    border-bottom: 1px solid var(--theme-slot-border);
    font-size: 11px;
    color: var(--ui-text-muted);
    flex-shrink: 0;
}

.ui-legend-item,
.skill-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.skill-legend-plan,
.skill-legend-learn {
    white-space: nowrap;
}

.skill-legend-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.skill-legend-chip.is-plan {
    background: rgba(245, 158, 11, 0.16);
    border: 1px solid #f59e0b;
    color: #fcd34d;
}

.skill-legend-chip.is-learn {
    background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
    border: 1px solid #4ade80;
    color: #ffffff;
}

.skill-legend-text {
    font-size: 11px;
    color: var(--theme-text-main);
}

.skill-tree-canvas-container:not(.with-branches) {
    flex: 1;
    height: auto;
    min-height: 0;
}

.skill-tree-canvas-container:not(.with-branches) > .skill-tree-canvas {
    height: 270px;
    min-height: 270px;
}

.skill-plan-btn.plus,
.skill-plan-btn.plus.active {
    background: rgba(245, 158, 11, 0.16);
    border: 1px solid #f59e0b;
    color: #fcd34d;
}

.skill-plan-btn.plus:hover:not(:disabled):not(.disabled),
.skill-plan-btn.plus.active:hover:not(:disabled):not(.disabled) {
    background: rgba(245, 158, 11, 0.3);
    border-color: #fbbf24;
    color: #fffbeb;
}

.skill-learn-btn,
.skill-learn-btn.active {
    background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
    border: 1px solid #4ade80;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.skill-learn-btn:hover:not(:disabled):not(.disabled),
.skill-learn-btn.active:hover:not(:disabled):not(.disabled) {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
    border-color: #86efac;
}

.skill-learn-btn.is-armed,
.skill-learn-btn.active.is-armed,
.controller-skill-action-btn.primary.is-armed,
.controller-skill-learn-btn.is-armed {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
    border-color: #86efac;
    color: #ffffff;
    box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.55), 0 0 8px rgba(34, 197, 94, 0.65);
}

.skill-card.ultimate,
.controller-skill-item.ultimate {
    border-color: rgba(245, 158, 11, 0.55);
}

.controller-skill-item.can-learn {
    border-color: rgba(74, 222, 128, 0.45);
}

.skill-branch-shared,
.skill-branch-lancer,
.skill-branch-juggernaut,
.skill-branch-duelist,
.skill-branch-bulwark,
.skill-branch-blade_dancer,
.skill-branch-cutthroat,
.skill-branch-phantom,
.skill-branch-rapid,
.skill-branch-sharpshot,
.skill-branch-siege,
.skill-branch-healer,
.skill-branch-battle_cleric,
.skill-branch-smiter,
.skill-branch-bloodrager,
.skill-branch-headsman,
.skill-branch-crusher,
.skill-branch-pyromancer,
.skill-branch-frostweaver,
.skill-branch-stormcaller,
.skill-branch-geomancer,
.skill-branch-maestro,
.skill-branch-minstrel,
.skill-branch-troubadour,
.skill-branch-archer,
.skill-branch-artificer,
.skill-branch-assassin,
.skill-branch-barbarian,
.skill-branch-berserker,
.skill-branch-bishop,
.skill-branch-busker,
.skill-branch-cleric,
.skill-branch-druid,
.skill-branch-elementalist,
.skill-branch-gladiator,
.skill-branch-gypsy,
.skill-branch-knight,
.skill-branch-machinist,
.skill-branch-mage,
.skill-branch-marksman,
.skill-branch-mecha,
.skill-branch-necromancer,
.skill-branch-nomad,
.skill-branch-occultist,
.skill-branch-psion,
.skill-branch-punisher,
.skill-branch-rogue,
.skill-branch-shaman,
.skill-branch-shapeshifter,
.skill-branch-strider,
.skill-branch-sword_saint,
.skill-branch-trapper,
.skill-branch-tree_warden,
.skill-branch-trickster,
.skill-branch-witch,
.skill-branch-info-shared,
.skill-branch-info-lancer,
.skill-branch-info-juggernaut,
.skill-branch-info-duelist,
.skill-branch-info-bulwark,
.skill-branch-info-blade_dancer,
.skill-branch-info-cutthroat,
.skill-branch-info-phantom,
.skill-branch-info-rapid,
.skill-branch-info-sharpshot,
.skill-branch-info-siege,
.skill-branch-info-healer,
.skill-branch-info-battle_cleric,
.skill-branch-info-smiter,
.skill-branch-info-bloodrager,
.skill-branch-info-headsman,
.skill-branch-info-crusher,
.skill-branch-info-pyromancer,
.skill-branch-info-frostweaver,
.skill-branch-info-stormcaller,
.skill-branch-info-geomancer,
.skill-branch-info-maestro,
.skill-branch-info-minstrel,
.skill-branch-info-troubadour,
.skill-branch-info-archer,
.skill-branch-info-artificer,
.skill-branch-info-assassin,
.skill-branch-info-barbarian,
.skill-branch-info-berserker,
.skill-branch-info-bishop,
.skill-branch-info-busker,
.skill-branch-info-cleric,
.skill-branch-info-druid,
.skill-branch-info-elementalist,
.skill-branch-info-gladiator,
.skill-branch-info-gypsy,
.skill-branch-info-knight,
.skill-branch-info-machinist,
.skill-branch-info-mage,
.skill-branch-info-marksman,
.skill-branch-info-mecha,
.skill-branch-info-necromancer,
.skill-branch-info-nomad,
.skill-branch-info-occultist,
.skill-branch-info-psion,
.skill-branch-info-punisher,
.skill-branch-info-rogue,
.skill-branch-info-shaman,
.skill-branch-info-shapeshifter,
.skill-branch-info-strider,
.skill-branch-info-sword_saint,
.skill-branch-info-trapper,
.skill-branch-info-tree_warden,
.skill-branch-info-trickster,
.skill-branch-info-witch {
    box-sizing: border-box;
}

.skill-plan-bar {
    flex-shrink: 0;
}

.skill-plan-summary {
    font-variant-numeric: tabular-nums;
}

.tooltip-warning {
    color: #fca5a5;
    font-size: 11px;
}

.skill-plan-btn-confirm,
.skill-plan-btn-reset {
    min-width: 72px;
}

.skill-unlock-msg {
    font-size: 11px;
    color: var(--ui-text-muted);
}

.skill-tooltip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.skill-tooltip-title {
    font-weight: 700;
    color: var(--theme-text-gold);
    font-size: 13px;
}

.skill-tooltip-lv,
.skill-tooltip-type {
    font-size: 10px;
}

.skill-tooltip-desc {
    font-size: 12px;
    line-height: 1.4;
    color: var(--theme-text-main);
    margin: 4px 0 6px 0;
}

.ui-badge.is-good {
    background: rgba(34, 197, 94, 0.16);
    border-color: rgba(74, 222, 128, 0.45);
    color: #86efac;
}

.ui-badge.is-bad {
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(248, 113, 113, 0.45);
    color: #fca5a5;
}

/* --- Controller / Phone Mode (Status, Equip, Soul Drive, Skills) --- */
.controller-status-ratio-badge {
    font-size: 10px;
}

.controller-status-scroll-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 2px;
}

.controller-status-derived-groups {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.controller-status-elder-info-btn {
    margin-right: auto;
}

.controller-status-main,
.controller-status-derived {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.controller-derived-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.controller-derived-section-title {
    margin-top: 2px;
}

.controller-derived-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.controller-derived-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 6px;
}

.controller-derived-name {
    color: var(--ui-text-muted);
}

.controller-derived-val {
    font-variant-numeric: tabular-nums;
}

.controller-stat-cost {
    font-size: 11px;
    color: var(--ui-text-muted);
    min-width: 28px;
    text-align: right;
}

.controller-equip-stage {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.controller-equip-paperdoll {
    width: 60px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: var(--ui-surface-inset);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--ui-radius-sm);
    padding: 8px 4px;
}

.side-equip-slot {
    min-height: 48px;
}

.controller-branch-detail {
    margin-bottom: 6px;
}

/* Enforce >= 48px touch targets inside controller menu tabs */
.controller-tabbed-window .controller-subtab-btn,
.controller-tabbed-window .controller-stat-btn,
.controller-tabbed-window .controller-stat-minus,
.controller-tabbed-window .controller-stat-plus,
.controller-tabbed-window .controller-status-apply-btn,
.controller-tabbed-window .controller-status-reset-btn,
.controller-tabbed-window .status-elder-reset-info-btn,
.controller-tabbed-window .controller-status-elder-info-btn,
.controller-tabbed-window .sd-loot-chip,
.controller-tabbed-window .sd-step-btn,
.controller-tabbed-window .sd-route-btn,
.controller-tabbed-window .sd-skill-btn,
.controller-tabbed-window .sd-skill-add,
.controller-tabbed-window .sd-pick-btn,
.controller-tabbed-window .controller-skill-tab,
.controller-tabbed-window .controller-plan-step-btn,
.controller-tabbed-window .controller-plan-minus-btn,
.controller-tabbed-window .controller-plan-plus-btn,
.controller-tabbed-window .controller-skill-action-btn,
.controller-tabbed-window .controller-skill-learn-btn,
.controller-tabbed-window .controller-skill-hotbar-btn,
.controller-tabbed-window .controller-plan-confirm-btn,
.controller-tabbed-window .controller-plan-reset-btn {
    min-width: 48px;
    min-height: 48px;
}

/* UI-POLISH-7 Round 2: CSS class definitions for all webui components */
.toast-text { line-height: 1.3; }
.barber-option-name { font-family: 'Kanit', sans-serif; font-size: var(--ui-font-sm); color: var(--theme-text-primary); }
.boss-bar { position: relative; }
.confirm-cancel, .confirm-ok, .topup-cancel, .topup-confirm, .topup-save { cursor: pointer; }
.cost-warning { color: var(--ui-btn-danger-text, #fca5a5); }
.btn-drive-equip, .btn-insert-chip, .btn-insert-core, .btn-smith-put { cursor: pointer; }
.drop-panel { display: flex; flex-direction: column; gap: 6px; }
.insert-row-label { font-weight: 500; }
.lobby-login-container, .lobby-queue-container { position: relative; }
.danger-btn { color: var(--ui-btn-danger-text, #fca5a5); border-color: var(--ui-btn-danger-border, rgba(239, 68, 68, 0.45)); }
.queue-status-text { color: var(--theme-text-secondary); }
.minimap-loading { color: var(--theme-text-secondary); font-size: var(--ui-font-xs); }
.fullmap-zoom-in, .fullmap-zoom-out { display: inline-flex; align-items: center; justify-content: center; }
.caught { opacity: 1; }
.common { color: var(--theme-text-primary); }
.smith-cost-label, .smith-stat { font-size: var(--ui-font-sm); }
.topup-h-amount, .topup-h-sov { font-weight: 600; }
.topup-qr-error { color: var(--ui-btn-danger-text, #fca5a5); font-size: var(--ui-font-sm); }
.buffs-group, .debuffs-group { display: inline-flex; align-items: center; gap: 4px; }
.status-tooltip-source, .status-tooltip-stacks { font-size: var(--ui-font-xs); color: var(--theme-text-secondary); }
.close, .half, .max, .min { cursor: pointer; }
.inline { display: inline-flex; align-items: center; }
.pc-layout { box-sizing: border-box; }
.readonly { opacity: 0.85; }
.sov { color: var(--theme-text-accent); }
.sov-disabled { opacity: 0.5; }
.their-offer, .your-offer { display: flex; flex-direction: column; }
.trade-bag-title, .trade-modal-title, .trade-panel-title { font-family: 'Kanit', sans-serif; font-weight: 600; }
.trade-invite-icon, .trade-title-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--theme-text-accent); }
.world-event-panel-map, .world-event-panel-mobile { box-sizing: border-box; }



/* =========================================================================
   UI-POLISH-5: Quest Journal (Two-Pane PC + One-Pane Phone),
   Settings (Category Nav PC + Horizontal Tabs Phone + Compact Rows),
   and Compact Kit Death Screen
   ========================================================================= */

.ui-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2);
    padding: 6px 8px;
    background: var(--ui-surface-card);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--ui-radius-sm);
    transition: background 0.14s ease, border-color 0.14s ease;
}

.ui-row-title {
    font-family: 'Kanit', sans-serif;
    font-size: var(--ui-font-sm);
    font-weight: 500;
    color: var(--theme-text-primary);
}

.ui-row-sub {
    font-family: 'Sarabun', sans-serif;
    font-size: var(--ui-font-xs);
    color: var(--theme-text-secondary);
}

.is-selected {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-tab-active-border);
}

/* --- 1. Quest Journal (PC 620x420 two-pane + Phone one-pane-at-a-time) --- */
.quest-journal-window {
    width: 620px;
    height: 420px;
    min-height: 320px;
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.quest-journal-window > .quest-journal-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding: 0;
    overflow: hidden;
}

.quest-journal-content > .quest-journal-panes,
.quest-journal-panes {
    display: grid;
    grid-template-columns: 236px 1fr;
    gap: var(--ui-space-3);
    padding: var(--ui-space-2) var(--ui-space-3);
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: hidden;
}

.quest-pane-list {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
    padding-right: var(--ui-space-2);
    min-height: 0;
    border-right: 1px solid var(--theme-slot-border);
}

.quest-pane-detail {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
    min-height: 0;
    min-width: 0;
    padding-left: var(--ui-space-1);
}

.quest-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-card);
    border: 1px solid var(--theme-slot-border);
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease;
}

.quest-row:hover {
    border-color: var(--theme-border);
    background: var(--theme-tab-bg);
}

.quest-row.is-selected {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-tab-active-border);
}

.quest-row.completed {
    opacity: 0.72;
}

.quest-row .quest-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.quest-row .quest-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--ui-font-sm);
    font-weight: 500;
}

.quest-track-dot {
    color: var(--theme-text-accent);
    font-size: var(--ui-font-xs);
    flex-shrink: 0;
}

.quest-progress {
    margin-left: auto;
    padding: 1px 6px;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.quest-detail-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: var(--ui-space-2);
    border-bottom: 1px solid var(--theme-slot-border);
}

.quest-detail-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.quest-detail-title {
    font-family: 'Kanit', sans-serif;
    font-size: var(--ui-font-lg);
    font-weight: 600;
    color: var(--theme-text-accent);
    line-height: 1.25;
}

.quest-detail-giver {
    font-family: 'Sarabun', sans-serif;
    font-size: var(--ui-font-xs);
    color: var(--theme-text-secondary);
}

.quest-detail-goal {
    font-family: 'Sarabun', sans-serif;
    font-size: var(--ui-font-sm);
    color: var(--theme-text-primary);
    line-height: 1.4;
}

.quest-detail-steps-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.quest-steps-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quest-step-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-card);
    border: 1px solid var(--theme-slot-border);
    font-family: 'Sarabun', sans-serif;
    font-size: var(--ui-font-sm);
}

.quest-step-row.is-done {
    opacity: 0.68;
    color: var(--theme-text-secondary);
}

.quest-step-row.is-done .quest-step-marker {
    color: #22c55e;
}

.quest-step-row.is-done .quest-step-label {
    text-decoration: line-through;
}

.quest-step-row.is-current {
    border-color: var(--theme-border);
    background: var(--theme-tab-active-bg);
    color: var(--theme-text-primary);
}

.quest-step-row.is-current .quest-step-marker {
    color: var(--theme-text-accent);
}

.quest-step-row.is-pending {
    opacity: 0.55;
    color: var(--theme-text-secondary);
}

.quest-step-marker {
    width: 14px;
    text-align: center;
    font-weight: 700;
    flex-shrink: 0;
}

.quest-step-label {
    flex: 1;
    min-width: 0;
}

.quest-step-progress {
    margin-left: auto;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.quest-detail-footer {
    margin-top: auto;
    padding-top: var(--ui-space-2);
    border-top: 1px solid var(--theme-slot-border);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ui-space-2);
    flex-wrap: wrap;
}

.quest-rewards-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.quest-rewards-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.quest-reward-chip {
    font-variant-numeric: tabular-nums;
}

.quest-reward-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: var(--ui-radius-sm);
    background: var(--theme-slot-bg);
    border: 1px solid var(--theme-slot-border);
    cursor: help;
}

.quest-reward-icon {
    position: relative;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.quest-reward-icon .item-icon-sprite {
    transform: scale(0.6875);
    transform-origin: center center;
}

.quest-reward-qty {
    font-family: 'Kanit', sans-serif;
    font-size: var(--ui-font-xs);
    color: var(--theme-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Phone Quest Journal: one pane at a time (list first, tap -> details + Back) */
.controller-quests-view {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
    height: 100%;
    min-height: 0;
    padding: var(--ui-space-2);
    overflow: hidden;
}

.quest-phone-list-pane,
.quest-phone-detail-pane {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
    overflow-y: auto;
}

.quest-phone-detail-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2);
    flex-shrink: 0;
}

.quest-phone-back-btn {
    min-height: 44px;
}

/* --- 2. Settings (PC 560x420 category nav + Phone horizontal .ui-tabs + compact .gs-row) --- */
.settings-window {
    width: 560px;
    height: 420px;
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.settings-window-panes {
    display: grid;
    grid-template-columns: 144px 1fr;
    gap: 0;
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.settings-nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--ui-space-2);
    background: rgba(0, 0, 0, 0.16);
    border-right: 1px solid var(--theme-slot-border);
    overflow-y: auto;
}

.settings-nav-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: var(--ui-ctl-h-md);
    padding: 0 10px;
    background: transparent;
    color: var(--theme-text-secondary);
    border: 1px solid transparent;
    border-radius: var(--ui-radius-sm);
    font-family: 'Kanit', sans-serif;
    font-size: var(--ui-font-sm);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.settings-nav-btn:hover {
    background: var(--theme-tab-bg);
    color: var(--theme-text-primary);
}

.settings-nav-btn.is-active,
.settings-nav-btn.active {
    background: var(--theme-tab-active-bg);
    color: var(--theme-text-accent);
    border-color: var(--theme-tab-active-border);
}

.settings-body {
    padding: var(--ui-space-2) var(--ui-space-3);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

.gs-section,
.settings-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gs-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2);
    min-height: 34px;
    padding: 4px 10px;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-card);
    border: 1px solid var(--theme-slot-border);
}

.gs-row.gs-row-stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px 10px;
}

.gs-row-head {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.gs-controls-cluster {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.gs-val-badge {
    min-width: 42px;
    font-variant-numeric: tabular-nums;
}

.gs-slider-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gs-range-input {
    width: 112px;
    cursor: pointer;
}

.gs-report-btn {
    flex-shrink: 0;
}

.muted-count-badge {
    font-variant-numeric: tabular-nums;
}

.controller-settings-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: var(--ui-space-2);
    padding: 0;
}

.settings-phone-tabs-wrap {
    position: relative;
    flex-shrink: 0;
}

.settings-phone-tabs {
    width: 100%;
}

.controller-layout .settings-phone-tabs > .ui-tab,
.controller-mode .settings-phone-tabs > .ui-tab,
.controller-settings-container .settings-phone-tabs > .ui-tab,
.controller-layout .settings-phone-tabs > .ui-tab-more,
.controller-mode .settings-phone-tabs > .ui-tab-more,
.controller-settings-container .settings-phone-tabs > .ui-tab-more,
.controller-layout .settings-phone-overflow-menu > .ui-tabs-overflow-item,
.controller-mode .settings-phone-overflow-menu > .ui-tabs-overflow-item,
.controller-settings-container .settings-phone-overflow-menu > .ui-tabs-overflow-item,
.controller-layout .controller-settings-container .ui-tab,
.controller-mode .controller-settings-container .ui-tab,
.controller-layout .controller-settings-container .gs-choice,
.controller-mode .controller-settings-container .gs-choice,
.controller-layout .controller-settings-container .gs-step,
.controller-mode .controller-settings-container .gs-step,
.controller-layout .controller-settings-container .ui-btn,
.controller-mode .controller-settings-container .ui-btn,
.controller-layout .controller-quests-view .ui-btn,
.controller-mode .controller-quests-view .ui-btn {
    min-width: 48px;
    min-height: 48px;
    height: 48px;
}

.controller-layout .controller-settings-container .ui-stepper,
.controller-mode .controller-settings-container .ui-stepper {
    min-height: 48px;
    height: 48px;
}

.settings-phone-overflow-menu {
    z-index: 60;
}

.controller-settings-body {
    flex: 1;
    min-height: 0;
    padding: 4px var(--ui-space-2) var(--ui-space-2);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* --- 3. Death Screen (Compact .ui-window card with red accent) --- */
.death-screen-box {
    position: relative;
    top: auto;
    left: auto;
    width: 320px;
    max-width: calc(100vw - 24px);
    padding: var(--ui-space-4);
    gap: var(--ui-space-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--theme-window-bg);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    border: 1px solid rgba(239, 68, 68, 0.55);
    border-top: 2px solid #ef4444;
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    box-sizing: border-box;
}

.death-screen-title {
    font-family: 'Kanit', sans-serif;
    font-size: var(--ui-font-lg);
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #f87171;
    text-shadow: none;
    text-transform: uppercase;
}

.death-screen-penalty {
    font-family: 'Kanit', sans-serif;
    font-size: var(--ui-font-md);
    font-weight: 600;
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.32);
    padding: 3px 12px;
    border-radius: var(--ui-radius-sm);
    width: auto;
}

.death-screen-timer {
    font-family: 'Kanit', sans-serif;
    font-size: var(--ui-font-xs);
    color: var(--theme-text-secondary);
    font-variant-numeric: tabular-nums;
}

.death-screen-btn {
    width: 100%;
    height: var(--ui-ctl-h-lg);
    min-height: var(--ui-ctl-h-lg);
    padding: 0 var(--ui-space-3);
    justify-content: center;
    gap: var(--ui-space-2);
    margin-top: 2px;
}

.death-screen-btn.controller-mode {
    min-height: 48px;
    height: 48px;
}

.death-screen-btn-label {
    font-weight: 600;
}

.death-key-badge {
    font-size: 10px;
    padding: 1px 6px;
}

/* ==========================================================================
   UI-POLISH-6: Commerce Windows (Cart Shop, Smith, Trade Guild)
   ========================================================================== */

/* --- Cart Shop QoL --- */
.shop-catalog-toolbar,
.shop-search-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 6px;
    flex-shrink: 0;
}

.shop-catalog-search,
.shop-search-input {
    width: 100%;
    box-sizing: border-box;
}

.shop-catalog-count {
    font-size: 11px;
    color: var(--theme-text-muted, #b5a68e);
    margin-left: auto;
}

.shop-sell-filters,
.shop-sell-filter-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 6px;
    flex-shrink: 0;
}

.shop-sell-all-etc-btn {
    flex-shrink: 0;
    white-space: nowrap;
    margin-left: auto;
}

.shop-item-row.in-cart,
.shop-catalog-row.in-cart {
    border-color: rgba(212, 168, 75, 0.55);
    background: rgba(212, 168, 75, 0.08);
}

.sellable-row {
    cursor: pointer;
}

.shop-inline-stepper,
.catalog-stepper-controls,
.catalog-stepper-btn,
.catalog-stepper-val {
    flex-shrink: 0;
}

.sell-cart-list {
    display: flex;
    flex-direction: column;
}

.shop-cart-row,
.sell-cart-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    width: 100%;
    min-height: 30px;
    padding: 4px 6px;
    box-sizing: border-box;
}

.shop-cart-row-top {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.shop-cart-row-bottom {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: 4px;
}

.shop-cart-max-btn,
.cart-max-btn {
    flex-shrink: 0;
    padding: 2px 6px;
    font-size: 10px;
}

.shop-cart-remove-btn {
    flex-shrink: 0;
}

.shop-cart-dropzone {
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.shop-cart-dropzone.drop-hover {
    border-color: var(--theme-gold-bright, #f0c75e);
    box-shadow: inset 0 0 0 1px rgba(240, 199, 94, 0.45);
}

.shop-cart-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* --- Smith Refine / Add Slot 2-Column Layout --- */
.smith-left-col {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

.smith-left-col .smith-pieces {
    width: 100%;
    flex: 1 1 auto;
}

.smith-anvil {
    background: rgba(16, 13, 10, 0.82);
    border: 1px solid var(--theme-border-gold, rgba(212, 168, 75, 0.45));
    border-radius: 6px;
    padding: 8px 10px;
    flex-shrink: 0;
}

.smith-anvil-empty,
.smith-empty-card {
    color: var(--theme-text-muted, #9a8d78);
    font-size: 12px;
    text-align: center;
    padding: 12px 8px;
}

.smith-anvil-slot {
    display: flex;
    align-items: center;
    gap: 10px;
}

.smith-anvil-icon {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(212, 168, 75, 0.45);
    border-radius: 6px;
}

.smith-anvil-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.smith-anvil-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--theme-text-main, #f5ebd6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.smith-anvil-sub {
    font-size: 11px;
    color: var(--theme-text-muted, #b5a68e);
}

.smith-stats-card {
    background: rgba(18, 15, 11, 0.72);
    border: 1px solid rgba(212, 168, 75, 0.25);
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.smith-stat,
.smith-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.smith-stat-delta {
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(74, 222, 128, 0.14);
    border: 1px solid rgba(74, 222, 128, 0.4);
    color: #86efac;
    font-size: 11px;
    font-weight: 600;
}

.smith-chance-card {
    background: rgba(18, 15, 11, 0.72);
    border: 1px solid rgba(212, 168, 75, 0.28);
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.smith-chance-head,
.smith-chance-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.smith-chance-big {
    font-size: 18px;
    font-weight: 800;
    color: var(--theme-gold-bright, #f0c75e);
}

.smith-chance-big.safe {
    color: #86efac;
}

.smith-chance-big.risky {
    color: #fbbf24;
}

.smith-chance-bar {
    height: 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(212, 168, 75, 0.25);
    overflow: hidden;
}

.smith-chance-fill {
    height: 100%;
    background: linear-gradient(90deg, #d4a84b, #4ade80);
    transition: width 0.2s ease;
}

.smith-chance-fill.safe {
    background: linear-gradient(90deg, #22c55e, #86efac);
}

.smith-chance-fill.risky {
    background: linear-gradient(90deg, #f59e0b, #ef4444);
}

.smith-cost-left {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.smith-cost-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 4px;
    flex-shrink: 0;
}

.smith-cost-currency-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    font-size: 11px;
    font-weight: 700;
    color: var(--theme-gold-bright, #f0c75e);
}

.smith-failure-line {
    font-size: 11px;
    color: var(--theme-text-muted, #a89984);
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.28);
}

.smith-failure-line.is-danger {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(239, 68, 68, 0.35);
}

/* --- Trade Guild Pack List & Detail --- */
.tg-header,
.tg-banner,
.tg-body {
    box-sizing: border-box;
}

.tg-split-layout {
    display: flex;
    gap: 10px;
    min-height: 0;
    flex: 1 1 auto;
}

.tg-pack-list-pane {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
}

.tg-pack-toolbar,
.tg-search-row,
.tg-clerk-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-shrink: 0;
}

.tg-cat-bar,
.tg-pack-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    position: relative;
}

.tg-tabs-overflow-wrap {
    position: relative;
    flex-shrink: 0;
}

.tg-top-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 950;
}

.tg-popup-backdrop {
    position: fixed;
    inset: 0;
    pointer-events: auto;
    background: transparent;
    z-index: 1;
}

.tg-tabs-overflow-menu {
    position: fixed;
    top: auto;
    right: auto;
    min-width: 148px;
    z-index: 2;
    pointer-events: auto;
}

.tg-cat-tabs {
    flex: 1 1 auto;
}

.tg-cat-more-btn,
.ui-tabs-overflow-btn {
    flex-shrink: 0;
}

.tg-search-input,
.tg-pack-search {
    width: 100%;
    box-sizing: border-box;
}

.tg-pack-list {
    flex: 1 1 auto;
    min-height: 120px;
    max-height: 360px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tg-pack-row {
    flex: 0 0 auto;
    min-height: 44px;
    max-height: 52px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 6px 10px;
    box-sizing: border-box;
    background: var(--theme-tab-bg);
    border: 1px solid var(--theme-slot-border);
    border-radius: var(--theme-radius-inner);
    color: var(--theme-text-primary);
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    cursor: pointer;
}

.tg-pack-row.active,
.tg-pack-row.is-active {
    background: var(--theme-tab-active-bg);
    border-color: var(--theme-tab-active-border);
    color: var(--theme-text-accent);
}

.tg-pack-row-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.tg-pack-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.tg-pack-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
}

.tg-pack-tier,
.tg-slip-status {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 11px;
}

.tg-pack-row-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 11px;
    color: var(--theme-text-muted, #b5a68e);
}

.tg-pack-output {
    color: var(--theme-gold-bright, #f0c75e);
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
}

.tg-pack-cat-chip {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(212, 168, 75, 0.14);
    color: var(--theme-gold-bright, #f0c75e);
}

.tg-pack-stock-chip {
    font-size: 10px;
    color: #86efac;
}

.tg-pack-stock-chip.empty {
    color: #f87171;
}

.tg-detail-pane {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tg-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tg-detail-title-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tg-detail-sub {
    font-size: 11px;
    color: var(--theme-text-muted, #b5a68e);
}

.tg-recipe-box,
.tg-routes-card,
.tg-clerk-empty-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tg-mat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tg-mat-row.short,
.ah-fee-line.short {
    color: #fca5a5;
}

.tg-mat-count {
    font-weight: 600;
}

.tg-routes-title,
.tg-routes-head,
.tg-routes-list,
.tg-route-row {
    box-sizing: border-box;
}

.tg-routes-head,
.tg-route-row {
    grid-template-columns: 1.4fr 1.1fr 1.5fr 0.55fr 0.75fr;
}

.tg-you-get-cell {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.15;
    min-width: 0;
}

.tg-you-get-main {
    font-weight: 600;
    white-space: nowrap;
}

.tg-you-get-sub {
    font-size: 10px;
    color: var(--theme-text-muted, #b5a68e);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tg-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.tg-detail-kv {
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(212, 168, 75, 0.2);
    border-radius: 4px;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 12px;
}

.smith-piece-sockets {
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--theme-gold-bright, #f0c75e);
    flex-shrink: 0;
}

.tg-pack-slot-status {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(212, 168, 75, 0.28);
    background: rgba(0, 0, 0, 0.35);
    color: var(--theme-text-muted, #b5a68e);
    margin-right: auto;
}

.tg-pack-slot-status.is-free {
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.14);
}

.tg-pack-slot-status.is-carrying {
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.16);
}

.tg-craft-action-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.tg-craft-btn,
.tg-deliver-btn {
    flex-shrink: 0;
}

/* --- Phone / Controller Mode Commerce Rules --- */
.controller-mode .smith-body,
.controller-mode .tg-split-layout,
.controller-mode .trade-guild-window .ah-split-pane {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.controller-mode .smith-left-col,
.controller-mode .tg-pack-list-pane,
.controller-mode .trade-guild-window .ah-list-pane {
    width: 100%;
    flex: 0 0 auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
}

.controller-mode .smith-left-col .smith-pieces,
.controller-mode .tg-pack-list {
    border-right: none;
    border-bottom: 1px solid var(--theme-slot-border);
    flex: 0 0 auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
    overflow-y: visible;
}

.controller-mode .smith-main,
.controller-mode .tg-detail-pane,
.controller-mode .trade-guild-window .ah-detail-pane {
    width: 100%;
    flex: 0 0 auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
    overflow-y: visible;
}

.controller-mode .shop-window button,
.controller-mode .smith-window button,
.controller-mode .trade-guild-window button {
    min-width: var(--touch-target-min-size, 48px);
    min-height: var(--touch-target-min-size, 48px);
}

.controller-mode .tg-top-layer button {
    min-width: var(--touch-target-min-size, 48px);
    min-height: var(--touch-target-min-size, 48px);
}

/* Phone cart rows: two lines (icon + name + price on top, stepper + Max + remove below) */
.controller-mode .shop-cart-row,
.controller-mode .sell-cart-row {
    flex-wrap: wrap;
    row-gap: 4px;
    column-gap: 6px;
    padding: 6px 8px;
    min-height: var(--touch-target-min-size, 48px);
    box-sizing: border-box;
}

.controller-mode .shop-cart-row .cart-row-icon-box,
.controller-mode .sell-cart-row .cart-row-icon-box {
    order: 1;
}

.controller-mode .shop-cart-row .cart-row-name,
.controller-mode .sell-cart-row .cart-row-name {
    order: 2;
    flex: 1 1 calc(100% - 110px);
    min-width: 80px;
    font-size: 12px;
}

.controller-mode .shop-cart-row .cart-subtotal,
.controller-mode .sell-cart-row .cart-subtotal {
    order: 3;
    min-width: 56px;
    margin-left: auto;
    text-align: right;
}

.controller-mode .shop-cart-row .cart-amt-controls,
.controller-mode .sell-cart-row .cart-amt-controls {
    order: 4;
}

.controller-mode .shop-cart-row .cart-max-btn,
.controller-mode .sell-cart-row .cart-max-btn {
    order: 5;
}

.controller-mode .shop-cart-row .cart-del-btn,
.controller-mode .sell-cart-row .cart-del-btn {
    order: 6;
    margin-left: auto;
}

/* =========================================================================
   UI-POLISH-1: Lobby (Character Select + Character Create, PC + Phone)
   ========================================================================= */

.lobby-select-container,
.lobby-create-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    pointer-events: none;
    overflow: hidden;
}

/* Top-left brand block ("Project Beelzebub" + "Chapter 1") */
.lobby-brand-block {
    position: absolute;
    top: 24px;
    left: 32px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: auto;
}

.lobby-brand-title {
    margin: 0;
    font-family: 'Kanit', sans-serif;
    font-size: var(--ui-font-xl, 18px);
    font-weight: 600;
    color: var(--theme-text-primary);
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.lobby-brand-chapter {
    margin: 0;
    font-family: 'Kanit', sans-serif;
    font-size: var(--ui-font-sm, 12px);
    font-weight: 500;
    color: var(--theme-text-secondary);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

/* Centre-left character stage (matches beelzebub_webui::lobby::lobby_stage_layout) */
.lobby-stage {
    position: absolute;
    left: var(--lobby-stage-left);
    width: var(--lobby-stage-width);
    top: 0;
    height: 100%;
    pointer-events: none;
    z-index: 12;
}

.lobby-stage-figure {
    position: absolute;
    left: 50%;
    top: var(--lobby-feet-y);
    width: 0;
    height: 0;
    pointer-events: none;
}

.lobby-stage-shadow {
    position: absolute;
    left: 0;
    top: 0;
    width: 124px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.62) 0%,
        rgba(0, 0, 0, 0.28) 52%,
        rgba(0, 0, 0, 0) 76%
    );
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.lobby-stage-silhouette {
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 56px;
    height: 108px;
    transform: translateX(-50%);
    border-radius: 28px 28px 10px 10px;
    background: linear-gradient(
        180deg,
        rgba(148, 163, 184, 0.26) 0%,
        rgba(71, 85, 105, 0.16) 70%,
        rgba(15, 23, 42, 0.04) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.lobby-stage-silhouette::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -34px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: rgba(148, 163, 184, 0.24);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.lobby-stage-caption {
    position: absolute;
    left: 50%;
    top: calc(var(--lobby-feet-y) + 12px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 184px;
    padding: 10px 12px;
    background: var(--lobby-stage-plate-bg, rgba(18, 20, 28, 0.72));
    border: 1px solid var(--theme-window-border, var(--theme-border));
    border-radius: var(--ui-radius-lg, 8px);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32);
    text-align: center;
    pointer-events: auto;
}

.lobby-stage-name {
    font-family: 'Kanit', sans-serif;
    font-size: var(--ui-font-lg, 15px);
    font-weight: 600;
    color: var(--theme-text-primary);
    line-height: 1.25;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.lobby-stage-name.is-muted,
.is-muted {
    color: var(--theme-text-secondary);
    font-weight: 500;
}

.lobby-stage-meta {
    font-size: var(--ui-font-sm, 12px);
    color: var(--lobby-stage-meta-text, var(--theme-text-primary));
    font-weight: 500;
    line-height: 1.25;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.lobby-stage-caption .lobby-actions-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    max-width: none;
    margin: 6px 0 0 0;
    gap: var(--ui-space-2, 8px);
}

.lobby-enter-btn,
.primary-btn {
    min-width: 144px;
}

.lobby-enter-btn:not(:disabled) {
    background: var(--ui-btn-primary-bg);
    border-color: var(--ui-btn-primary-border);
    color: var(--ui-btn-primary-text);
    font-weight: 600;
    opacity: 1;
}

.lobby-enter-btn:disabled,
.lobby-enter-btn.is-loading {
    background: var(--ui-btn-bg);
    border-color: var(--theme-border);
    color: var(--theme-text-secondary);
    opacity: 0.65;
}

/* Keep pointer-events: auto on disabled stage primary button so on-screen occlusion probes see the button */
.lobby-stage-caption .lobby-enter-btn:disabled {
    pointer-events: auto;
    cursor: not-allowed;
}

/* Right-side vertical slot list (3 compact .ui-window rows, ~56 px high each) */
.lobby-slot-list {
    position: absolute;
    left: var(--lobby-panel-left);
    right: max(var(--lobby-panel-right-inset), env(safe-area-inset-right, 0px));
    top: var(--lobby-panel-top);
    bottom: calc(100% - var(--lobby-panel-bottom));
    width: auto;
    max-width: min(340px, var(--lobby-panel-width));
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--ui-space-2, 8px);
    z-index: 20;
    pointer-events: auto;
}

.lobby-slot-list .lobby-slot-row.lobby-slot-card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    min-height: 56px !important;
    height: 56px;
    margin: 0 !important;
    padding: 8px 12px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--ui-space-3, 12px) !important;
    background: var(--theme-window-bg) !important;
    border: 1px solid var(--theme-window-border, var(--theme-border)) !important;
    border-radius: var(--ui-radius-md, 6px) !important;
    box-shadow: var(--theme-shadow) !important;
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    box-sizing: border-box !important;
    cursor: pointer;
    transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

.lobby-slot-list .lobby-slot-row.lobby-slot-card:hover {
    border-color: var(--theme-border) !important;
    transform: none !important;
}

.lobby-slot-list .lobby-slot-row.lobby-slot-card.is-selected,
.lobby-slot-list .lobby-slot-row.lobby-slot-card.selected {
    border-color: var(--theme-border-accent) !important;
    box-shadow: 0 0 0 1px var(--theme-border-accent), var(--theme-shadow) !important;
    transform: none !important;
}

.lobby-slot-row .slot-card-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.lobby-slot-row .slot-char-name {
    font-family: 'Kanit', sans-serif;
    font-size: var(--ui-font-md, 13px);
    font-weight: 600;
    color: var(--theme-text-primary);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lobby-slot-row .slot-char-details {
    font-size: var(--ui-font-xs, 11px);
    color: var(--theme-text-secondary);
    line-height: 1.2;
}

.lobby-slot-delete-btn {
    width: var(--ui-ctl-h-sm, 24px);
    min-width: var(--ui-ctl-h-sm, 24px);
    height: var(--ui-ctl-h-sm, 24px);
    padding: 0;
    flex-shrink: 0;
}

.lobby-slot-row .slot-empty-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 0;
    gap: var(--ui-space-2, 8px);
}

.lobby-slot-row .slot-empty-label {
    font-size: var(--ui-font-sm, 12px);
    font-style: normal;
    color: var(--theme-text-secondary);
}

.lobby-slot-row .lobby-slot-create-btn,
.lobby-stage-create-btn {
    flex-shrink: 0;
}

.lobby-slot-create-btn-unused {
    flex-shrink: 0;
}

/* Bottom-left Logout button */
.lobby-logout-btn {
    position: absolute;
    left: 32px;
    bottom: 20px;
    z-index: 20;
    pointer-events: auto;
}

/* Character Create compact right-hand window (~320 px wide) */
.lobby-create-window.lobby-create-card {
    position: absolute;
    left: var(--lobby-panel-left);
    right: max(var(--lobby-panel-right-inset), env(safe-area-inset-right, 0px));
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    max-width: min(340px, var(--lobby-panel-width));
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    padding: 0;
    margin: 0;
    gap: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--theme-window-bg);
    border: 1px solid var(--theme-window-border, var(--theme-border));
    border-radius: var(--ui-radius-lg, 8px);
    box-shadow: var(--theme-shadow);
    backdrop-filter: var(--theme-window-backdrop);
    -webkit-backdrop-filter: var(--theme-window-backdrop);
    z-index: 20;
    pointer-events: auto;
}

.lobby-create-window .ui-window-header,
.lobby-create-window .lobby-create-footer {
    flex-shrink: 0;
}

.lobby-create-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    gap: var(--ui-space-3, 12px);
    padding: var(--ui-space-3, 12px);
}

.lobby-create-window .lobby-field-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lobby-create-window .lobby-field-label {
    font-size: var(--ui-font-sm, 12px);
    font-weight: 600;
    color: var(--theme-text-secondary);
    text-transform: none;
    letter-spacing: 0;
}

.lobby-create-window .lobby-text-input:not(.ui-input) {
    width: 100%;
    height: var(--ui-ctl-h-md, 28px);
    min-height: var(--ui-ctl-h-md, 28px);
    padding: 0 10px;
    font-size: var(--ui-font-md, 13px);
    box-sizing: border-box;
}

.lobby-name-hint {
    margin-top: 2px;
}

.lobby-gender-tabs {
    width: 100%;
    display: flex;
}

.lobby-gender-tabs .ui-tab,
.lobby-gender-tabs .ui-tab.active {
    flex: 1;
    justify-content: center;
}

.lobby-create-footer {
    margin: 0;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-end;
    gap: var(--ui-space-2, 8px);
}

/* Delete confirmation modal built on .ui-window */
.lobby-modal-backdrop .lobby-modal-content.ui-window {
    width: min(380px, 90vw);
    padding: 0;
    gap: 0;
    background: var(--theme-window-bg);
    border: 1px solid var(--theme-window-border, var(--theme-border));
    border-radius: var(--ui-radius-lg, 8px);
    box-shadow: var(--theme-shadow);
}

.lobby-modal-content.ui-window .ui-window-body {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-3, 12px);
}

.lobby-modal-content.ui-window .modal-title {
    font-size: var(--ui-font-md, 13px);
    font-weight: 600;
    color: var(--theme-text-primary);
}

.lobby-modal-content.ui-window .modal-desc {
    font-size: var(--ui-font-sm, 12px);
    color: var(--theme-text-secondary);
    line-height: 1.45;
}

.lobby-modal-content.ui-window .modal-btn-row {
    margin-top: 0;
}

.lobby-create-window .lobby-create-name-input,
.lobby-modal-content .lobby-delete-confirm-input {
    width: 100%;
    box-sizing: border-box;
}

/* Phone / Landscape Mobile & Narrow Viewport Layout (844x390, 667x375, 568x320, <=900px) */
@media (max-height: 500px), (max-width: 900px) {
    :root,
    .lobby-screen-overlay {
        --lobby-stage-left: 2%;
        --lobby-stage-top: 14%;
        --lobby-stage-width: 45%;
        --lobby-stage-height: 74%;
        --lobby-feet-x: 24.5%;
        --lobby-feet-y: 50%;
        --lobby-panel-left: 50%;
        --lobby-panel-right-inset: 2%;
        --lobby-panel-width: 48%;
        --lobby-panel-top: 16%;
        --lobby-panel-bottom: 92%;
    }

    .lobby-brand-block {
        top: max(10px, env(safe-area-inset-top, 0px));
        left: max(16px, env(safe-area-inset-left, 0px));
    }

    .lobby-brand-title {
        font-size: 16px;
    }

    .lobby-brand-chapter {
        font-size: 11px;
    }

    .lobby-stage {
        left: var(--lobby-stage-left, 2%);
        width: var(--lobby-stage-width, 45%);
    }

    .lobby-stage-figure {
        top: var(--lobby-feet-y, 50%);
    }

    .lobby-stage-shadow {
        width: 96px;
        height: 20px;
    }

    .lobby-stage-silhouette {
        width: 46px;
        height: 88px;
    }

    .lobby-stage-caption {
        top: calc(var(--lobby-feet-y, 50%) + 4px);
        gap: 2px;
        min-width: 148px;
        padding: 8px 10px;
    }

    .lobby-stage-name {
        font-size: 14px;
        line-height: 1.15;
    }

    .lobby-stage-meta {
        font-size: 11px;
        line-height: 1.15;
    }

    .lobby-stage-caption .lobby-actions-bar {
        margin-top: 4px;
    }

    .lobby-enter-btn {
        min-height: 48px;
        min-width: 128px;
        padding: 0 14px;
    }

    .lobby-slot-list {
        left: var(--lobby-panel-left, 50%);
        right: max(var(--lobby-panel-right-inset, 2%), env(safe-area-inset-right, 0px));
        width: auto;
        max-width: none;
        top: var(--lobby-panel-top, 16%);
        bottom: calc(100% - var(--lobby-panel-bottom, 92%));
        transform: none;
        max-height: none;
        justify-content: center;
        gap: 6px;
    }

    .lobby-slot-list .lobby-slot-row.lobby-slot-card {
        min-height: 56px !important;
        height: 56px !important;
        padding: 4px 10px !important;
    }

    .lobby-slot-row .lobby-slot-create-btn {
        min-height: 48px;
        min-width: 72px;
    }

    .lobby-slot-delete-btn {
        width: 48px;
        min-width: 48px;
        height: 48px;
        min-height: 48px;
    }

    .lobby-logout-btn {
        left: max(12px, env(safe-area-inset-left, 0px));
        bottom: max(6px, env(safe-area-inset-bottom, 0px));
        min-height: 48px;
        min-width: 72px;
    }

    .lobby-create-window.lobby-create-card {
        left: var(--lobby-panel-left, 50%);
        right: max(var(--lobby-panel-right-inset, 2%), env(safe-area-inset-right, 0px));
        width: auto;
        max-width: min(340px, var(--lobby-panel-width, 48%));
        top: 50%;
        transform: translateY(-50%);
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
    }

    .lobby-create-body {
        padding: 8px 12px;
        gap: 6px;
    }

    .lobby-create-window .lobby-create-name-input {
        height: 34px;
        min-height: 34px;
        font-size: 13px;
    }

    .lobby-gender-tabs {
        height: 48px;
        min-height: 48px;
    }

    .lobby-gender-tabs .ui-tab {
        height: 100%;
        min-height: 48px;
        min-width: 64px;
    }

    .lobby-create-footer {
        padding: 6px 12px;
    }

    .lobby-create-footer .ui-btn {
        min-height: 48px;
        min-width: 76px;
    }

    .lobby-modal-content .ui-window-close,
    .lobby-top-right-controls .ui-icon-btn {
        min-height: 48px;
        min-width: 48px;
        width: 48px;
        height: 48px;
    }

    .modal-btn-row .ui-btn,
    .login-card-box .ui-btn,
    .queue-cancel-btn {
        min-height: 48px;
        min-width: 48px;
    }
}

/* The Status window's Karma section (user 2026-10-31): under the attributes on PC */
.status-col-left .status-karma {
    margin-top: 8px;
}

.status-karma .status-derived-row:first-of-type .derived-val {
    font-weight: 600;
}

.status-karma[data-pk-colour="blue"] .status-derived-row:first-of-type .derived-val {
    color: #60a5fa;
}

.status-karma[data-pk-colour="purple"] .status-derived-row:first-of-type .derived-val {
    color: #c084fc;
}

.status-karma[data-pk-colour="red"] .status-derived-row:first-of-type .derived-val {
    color: #f87171;
}

.status-karma[data-pk-colour="black"] .status-derived-row:first-of-type .derived-val {
    color: #9ca3af;
}