/* ========================================
   CLAN LORD MOBILE - "DARK ILLUMINATED MANUSCRIPT" AESTHETIC
   Typography: Cinzel (ornate display) + Crimson Pro (readable body)
   Color Palette: Deep blacks with jewel-toned accents
   Motion: Liquid, organic transitions with medieval flair
   ======================================== */

/* ========================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ======================================== */

:root {
    /* Color Palette - Jewel Tones on Obsidian */
    --color-obsidian: #0a0a0a;
    --color-charcoal: #1a1a1a;
    --color-slate: #2a2a2a;
    --color-ash: #3a3a3a;

    /* Jewel Accent Colors */
    --color-ruby: #c41e3a;
    --color-ruby-glow: rgba(196, 30, 58, 0.4);
    --color-emerald: #50c878;
    --color-emerald-glow: rgba(80, 200, 120, 0.4);
    --color-sapphire: #0f52ba;
    --color-sapphire-glow: rgba(15, 82, 186, 0.4);
    --color-amber: #ffbf00;
    --color-amber-glow: rgba(255, 191, 0, 0.4);

    /* Status Colors */
    --color-health: var(--color-emerald);
    --color-spirit: var(--color-ruby);
    --color-balance: var(--color-sapphire);

    /* Text Colors */
    --color-text-primary: #f5f5f5;
    --color-text-secondary: #b0b0b0;
    --color-text-tertiary: #808080;
    --color-text-system: var(--color-emerald);

    /* Typography */
    --font-display: 'Cinzel', serif;
    --font-body: 'Crimson Pro', serif;

    /* Spacing System (8px base) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Shadows - Ornate Medieval Depth */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);
    --shadow-glow-ruby: 0 0 20px var(--color-ruby-glow);
    --shadow-glow-emerald: 0 0 20px var(--color-emerald-glow);
    --shadow-glow-sapphire: 0 0 20px var(--color-sapphire-glow);

    /* Z-Index Stack */
    --z-base: 1;
    --z-canvas: 10;
    --z-ui: 100;
    --z-panels: 200;
    --z-message-mode: 300;
    --z-overlay: 400;
    --z-splash: 500;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-elastic: 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Ornamental Pattern (Data URI for performance) */
    --pattern-ornate: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L35 15L50 10L40 25L55 30L40 35L50 50L35 45L30 60L25 45L10 50L20 35L5 30L20 25L10 10L25 15Z' fill='%23ffffff' opacity='0.03'/%3E%3C/svg%3E");
}

/* ========================================
   BASE STYLES & RESET
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-primary);
    background: var(--color-obsidian);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

/* iOS Safe Areas */
body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* ========================================
   SPLASH SCREEN - Ornate Loading
   ======================================== */

.splash-screen {
    position: fixed;
    inset: 0;
    background:
        var(--pattern-ornate),
        radial-gradient(circle at 50% 30%, rgba(196, 30, 58, 0.1), transparent 50%),
        linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-splash);
    animation: fadeIn 0.6s ease-out;
}

.splash-content {
    text-align: center;
    animation: slideUpFade 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards;
}

.ornate-border {
    position: relative;
    padding: var(--space-xxl) var(--space-xl);
    border: 2px solid var(--color-ash);
    border-radius: var(--radius-lg);
    background: rgba(26, 26, 26, 0.8);
    backdrop-filter: blur(20px);
    box-shadow:
        var(--shadow-lg),
        inset 0 0 30px rgba(196, 30, 58, 0.1);
}

/* Ornate corner decorations */
.ornate-border::before,
.ornate-border::after {
    content: '◆';
    position: absolute;
    color: var(--color-ruby);
    font-size: 12px;
    opacity: 0.6;
}

.ornate-border::before {
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
}

.ornate-border::after {
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
}

.splash-title {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--color-ruby), var(--color-amber));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-lg);
    animation: shimmer 3s ease-in-out infinite;
}

.splash-subtitle {
    font-family: var(--font-body);
    font-size: 14px;
    font-style: italic;
    color: var(--color-text-secondary);
    letter-spacing: 2px;
    margin-top: var(--space-lg);
}

/* Illuminated Loader - Three nested rings */
.illuminated-loader {
    position: relative;
    width: 80px;
    height: 80px;
    margin: var(--space-lg) auto;
}

.loader-ring {
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    animation: rotate 2s linear infinite;
}

.loader-ring:nth-child(1) {
    border-top-color: var(--color-ruby);
    animation-duration: 1.5s;
}

.loader-ring:nth-child(2) {
    border-right-color: var(--color-sapphire);
    animation-duration: 2s;
    animation-direction: reverse;
    inset: 10px;
}

.loader-ring:nth-child(3) {
    border-bottom-color: var(--color-amber);
    animation-duration: 2.5s;
    inset: 20px;
}

/* ========================================
   MAIN GAME CONTAINER
   ======================================== */

.game-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--color-obsidian);
    position: relative;
}

/* ========================================
   STATUS BAR - Top (Health/Spirit/Balance)
   ======================================== */

.status-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background:
        linear-gradient(180deg, rgba(26, 26, 26, 0.95) 0%, rgba(26, 26, 26, 0.8) 100%);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-slate);
    z-index: var(--z-ui);
    box-shadow: var(--shadow-sm);
}

/* Soft keyboard open (body.kbd-open, toggled by handleResize in main-mobile.js):
   hide the top/bottom chrome so the reflowed layout keeps the play area visible
   above the keyboard. The input .action-bar stays — it's what the player types
   into. Landscape-play hides the same bars via its own class, so no conflict. */
body.kbd-open .status-bar,
body.kbd-open .chat-panel,
body.kbd-open .macro-action-bar,
body.kbd-open .right-click-bar {
    display: none;
}

.status-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 12px;
}

.status-icon {
    font-size: 16px;
    line-height: 1;
    filter: drop-shadow(0 0 4px currentColor);
}

.status-health .status-icon { color: var(--color-health); }
.status-spirit .status-icon { color: var(--color-spirit); }
.status-balance .status-icon { color: var(--color-balance); }

.status-bar-track {
    flex: 1;
    height: 8px;
    background: var(--color-charcoal);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--color-slate);
}

.status-bar-fill {
    height: 100%;
    transition: width var(--transition-base);
    position: relative;
    overflow: hidden;
}

.health-fill {
    background: linear-gradient(90deg, var(--color-emerald) 0%, #81d4a0 100%);
    box-shadow: var(--shadow-glow-emerald);
}

.spirit-fill {
    background: linear-gradient(90deg, var(--color-ruby) 0%, #ff5252 100%);
    box-shadow: var(--shadow-glow-ruby);
}

.balance-fill {
    background: linear-gradient(90deg, var(--color-sapphire) 0%, #4fc3f7 100%);
    box-shadow: var(--shadow-glow-sapphire);
}

/* Animated shimmer effect */
.status-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%);
    animation: shimmer 2s ease-in-out infinite;
}

.status-value {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    color: var(--color-text-secondary);
    min-width: 24px;
    text-align: right;
}

.message-mode-toggle {
    margin-left: auto;
}

.mute-button.muted {
    color: var(--color-ruby);
    opacity: 0.85;
}

/* ========================================
   GAME CANVAS WRAPPER
   ======================================== */

.game-canvas-wrapper {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--color-obsidian);
}

#pixiCanvas {
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
}

/* Touch Movement Indicator */
.touch-indicator {
    position: absolute;
    width: 60px;
    height: 60px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: var(--z-ui);
}

.touch-indicator.hidden {
    display: none;
}

.touch-ripple {
    position: absolute;
    inset: 0;
    border: 2px solid var(--color-emerald);
    border-radius: 50%;
    opacity: 0;
    animation: ripple 0.6s ease-out;
}

.touch-ripple:nth-child(2) {
    animation-delay: 0.1s;
}

/* Ornate Corner Decorations */
.corner-ornament {
    position: absolute;
    width: 40px;
    height: 40px;
    pointer-events: none;
    opacity: 0.15;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0 L20 0 L20 2 L2 2 L2 20 L0 20 Z M38 0 L40 0 L40 20 L38 20 L38 2 L20 2 L20 0 Z M0 20 L2 20 L2 38 L20 38 L20 40 L0 40 Z M20 40 L20 38 L38 38 L38 20 L40 20 L40 40 Z' fill='%23c41e3a'/%3E%3C/svg%3E");
    background-size: contain;
}

.corner-tl { top: 0; left: 0; }
.corner-tr { top: 0; right: 0; transform: rotate(90deg); }
.corner-bl { bottom: 80px; left: 0; transform: rotate(-90deg); }
.corner-br { bottom: 80px; right: 0; transform: rotate(180deg); }

/* ========================================
   CHAT PANEL - Compact View
   ======================================== */

.chat-panel {
    background:
        linear-gradient(180deg, rgba(10, 10, 10, 0.85) 0%, rgba(10, 10, 10, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--color-slate);
    padding: 4px 12px;
    max-height: 70px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    z-index: var(--z-ui);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.chat-panel::-webkit-scrollbar {
    display: none;
}

/* Ornate divider line */
.chat-divider {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--color-ruby) 50%,
        transparent 100%);
    opacity: 0.3;
}

.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-message {
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.25;
    color: var(--color-text-primary);
    animation: messageSlideIn 0.3s ease-out;
}

.chat-message.system {
    color: var(--color-text-system);
    font-style: italic;
}

.chat-message.arrival,
.chat-message.departure {
    color: var(--color-text-tertiary);
    font-size: 13px;
}

.message-sender {
    font-weight: 600;
    color: var(--color-amber);
}

.message-text {
    color: var(--color-text-primary);
}

.scroll-indicator {
    position: absolute;
    bottom: var(--space-sm);
    right: var(--space-sm);
    width: 32px;
    height: 32px;
    background: var(--color-ruby);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    animation: bounce 1s ease-in-out infinite;
}

.scroll-indicator.hidden {
    display: none;
}

/* ========================================
   ACTION BAR - Bottom Input
   ======================================== */

.action-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background:
        linear-gradient(180deg, rgba(26, 26, 26, 0.8) 0%, rgba(26, 26, 26, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--color-slate);
    z-index: var(--z-ui);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.6);
}

.input-container {
    flex: 1;
    position: relative;
}

.message-input {
    width: 100%;
    height: 44px;
    padding: 0 var(--space-md);
    background: var(--color-charcoal);
    border: 1px solid var(--color-slate);
    border-radius: var(--radius-xl);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    outline: none;
    transition: all var(--transition-base);
}

.message-input::placeholder {
    color: var(--color-text-tertiary);
    font-style: italic;
}

.message-input:focus {
    border-color: var(--color-ruby);
    box-shadow: 0 0 0 3px var(--color-ruby-glow);
}

.input-glow {
    position: absolute;
    inset: -2px;
    border-radius: var(--radius-xl);
    opacity: 0;
    transition: opacity var(--transition-base);
    pointer-events: none;
    background: linear-gradient(90deg,
        var(--color-ruby-glow),
        var(--color-amber-glow),
        var(--color-ruby-glow));
    background-size: 200% 100%;
    animation: glowShift 3s ease-in-out infinite;
    filter: blur(8px);
}

.message-input:focus + .input-glow {
    opacity: 1;
}

/* Command History Indicator */
.history-indicator {
    position: absolute;
    top: -24px;
    right: 0;
    background: var(--color-slate);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--color-text-secondary);
    opacity: 0;
    transform: translateY(4px);
    transition: all var(--transition-fast);
    pointer-events: none;
    box-shadow: var(--shadow-sm);
}

.history-indicator:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
}

.history-indicator #historyText {
    font-weight: 500;
}

/* Icon Buttons */
.icon-button {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-slate);
    border: 1px solid var(--color-ash);
    border-radius: 50%;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.icon-button:active {
    transform: scale(0.95);
    background: var(--color-ash);
}

.icon-button svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
}

.send-button {
    background: var(--color-ruby);
    border-color: var(--color-ruby);
    color: white;
}

.send-button:active {
    background: #a01828;
    box-shadow: var(--shadow-glow-ruby);
}

/* ========================================
   FULL-SCREEN MESSAGE MODE
   ======================================== */

.message-mode {
    position: fixed;
    inset: 0;
    background: var(--color-obsidian);
    z-index: var(--z-message-mode);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform var(--transition-slow);
}

.message-mode:not(.hidden) {
    transform: translateY(0);
}

.message-mode-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-slate);
    background: linear-gradient(180deg, var(--color-charcoal) 0%, var(--color-obsidian) 100%);
}

.message-mode-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--color-ruby), var(--color-amber));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.message-mode-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Message tab bar */
.message-tabs {
    display: flex;
    flex-direction: row;
    gap: 4px;
    padding: 6px 12px 0;
    border-bottom: 1px solid var(--color-slate);
    flex-shrink: 0;
}

.message-tab-btn {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    padding: 8px 18px;
    border: none;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    position: relative;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.3px;
}

.message-tab-btn.active {
    background: var(--color-slate);
    color: var(--color-text-primary);
    border-bottom: 2px solid var(--color-sapphire);
}

/* Unread badge on DMs tab */
.tab-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: rgba(220, 60, 60, 0.85);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.tab-unread-badge.hidden {
    display: none;
}

/* DM back button */
.dm-back-btn {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    margin: 4px 12px 0;
    border: 1px solid var(--color-slate);
    border-radius: 6px;
    background: var(--color-charcoal);
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: 13px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.dm-back-btn.hidden {
    display: none;
}

/* DM conversation list */
.dm-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-slate);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s;
}

.dm-list-item:active {
    background: var(--color-slate);
}

.dm-list-item-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.dm-list-item-body {
    flex: 1;
    min-width: 0;
}

.dm-list-item-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-list-item-preview {
    font-size: 11px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.dm-list-item-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
}

.dm-list-item-time {
    font-size: 10px;
    color: var(--color-text-tertiary);
}

.dm-list-item-unread {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: rgba(220, 60, 60, 0.85);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    line-height: 16px;
}

/* DM list section header */
.dm-section-header {
    padding: 6px 12px 4px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    border-bottom: 1px solid var(--color-slate);
    margin-top: 4px;
}

/* Online presence dot in DM list */
.dm-online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    align-self: center;
}

.dm-online-dot.online {
    background: var(--color-emerald, #4caf50);
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.6);
}

.dm-online-dot.offline {
    background: var(--color-ash);
}

.dm-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-text-tertiary);
    font-size: 14px;
    font-style: italic;
}

/* Sunstone think button */
#thinkBtnFull {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(184, 224, 255, 0.3);
    border-radius: 50%;
    background: rgba(184, 224, 255, 0.08);
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, border-color 0.15s;
}

#thinkBtnFull:active {
    background: rgba(184, 224, 255, 0.2);
    border-color: rgba(184, 224, 255, 0.6);
}

#thinkBtnFull.hidden {
    display: none;
}

.message-mode-content {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    -webkit-overflow-scrolling: touch;
}

/* Message Row - Inline Layout (Avatar + Name + Message + Time) */
.message-row-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    animation: messageSlideIn 0.2s ease-out;
    flex-wrap: wrap;
    line-height: 1.4;
}

/* Self messages (subtle background) */
.message-row-inline.self {
    background: rgba(80, 200, 120, 0.08);
}

/* Thinkto/DM messages (rose highlight) */
.message-row-inline.thinkto {
    background: rgba(255, 100, 100, 0.10);
    border-left: 2px solid rgba(255, 100, 100, 0.45);
    padding-left: 10px;
}

/* Thinkclan messages (warm gold highlight) */
.message-row-inline.thinkclan {
    background: rgba(255, 200, 60, 0.08);
    border-left: 2px solid rgba(255, 200, 60, 0.4);
    padding-left: 10px;
}

/* Inline avatar (36×36, circular crop matching DM list) */
.message-avatar-inline {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* Inline author name */
.message-author-inline {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-amber);
    flex-shrink: 0;
}

/* Inline message text (wraps naturally) */
.message-text-inline {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-text-primary);
    flex: 1;
    min-width: 0;
}

/* Inline timestamp (small, subtle) */
.message-time-inline {
    font-size: 9px;
    color: var(--color-text-tertiary);
    opacity: 0.5;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
}

/* Message type styling (bubble-like colors) */
.message-type-think {
    color: rgba(160, 200, 255, 0.95);
    font-style: italic;
}

.message-type-thinkto {
    color: rgba(255, 160, 160, 0.95);
    font-style: italic;
    font-weight: 500;
}

.message-type-thinkclan {
    color: rgba(255, 215, 100, 0.95);
    font-style: italic;
    font-weight: 500;
}

.message-type-whisper {
    color: rgba(180, 180, 200, 0.85);
    font-size: 12px;
}

.message-type-yell {
    color: rgba(255, 200, 100, 1);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
}

.message-type-ponder {
    color: rgba(220, 200, 255, 0.9);
    font-style: italic;
}

.message-type-emote,
.message-type-narrate,
.message-type-action {
    color: rgba(100, 200, 255, 0.9);
    font-style: italic;
}

.message-type-say {
    color: var(--color-text-primary);
}

/* Legacy message styles (for events/system messages that don't use inline) */
.message-row {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}

.message-content {
    flex: 1;
    min-width: 0;
}

.message-header {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 1px;
}

.message-author {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-amber);
}

.message-time {
    font-size: 10px;
    color: var(--color-text-tertiary);
    opacity: 0.6;
}

.message-body {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.3;
    color: var(--color-text-primary);
    margin: 0;
}

/* Event Messages (arrivals/departures) */
.message-row.event {
    justify-content: center;
}

.event-content {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(80, 200, 120, 0.08);
    border-radius: 6px;
    border: 1px solid rgba(80, 200, 120, 0.15);
}

.event-icon {
    font-size: 14px;
    color: var(--color-emerald);
}

.event-text {
    font-size: 12px;
    font-style: italic;
    color: var(--color-text-secondary);
}

.event-entity-name {
    font-weight: 600;
    font-style: normal;
    color: var(--color-text-primary);
}

.event-avatar {
    width: 20px;
    height: 20px;
    border-radius: 2px;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    vertical-align: middle;
    background: var(--color-charcoal);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* System Messages (server notifications) */
.message-row.system {
    flex-direction: column;
    align-items: center;
    margin: 6px 0;
}

.system-content {
    text-align: center;
    max-width: 80%;
}

.system-text {
    font-size: 12px;
    font-style: italic;
    color: var(--color-text-secondary);
    margin: 0;
    padding: 4px 10px;
    background: rgba(100, 100, 120, 0.08);
    border-radius: 6px;
    border: 1px solid rgba(100, 100, 120, 0.15);
}

.system-time {
    display: block;
    font-size: 11px;
    color: var(--color-text-tertiary);
    margin-top: var(--space-xs);
    opacity: 0.6;
}

/* Compact chat system messages */
.chat-message.system {
    text-align: center;
    font-style: italic;
    color: var(--color-text-secondary);
    background: rgba(100, 100, 120, 0.05);
    padding: 1px 6px;
    margin: 1px 0;
    border-radius: var(--radius-sm);
}

.chat-message.system .message-text {
    font-size: 11px;
}

.message-mode-input {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--color-charcoal);
    border-top: 1px solid var(--color-slate);
}

.message-input-full {
    flex: 1;
    height: 48px;
    padding: 0 var(--space-md);
    background: var(--color-obsidian);
    border: 1px solid var(--color-slate);
    border-radius: var(--radius-xl);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    outline: none;
    transition: all var(--transition-base);
}

.message-input-full:focus {
    border-color: var(--color-ruby);
    box-shadow: 0 0 0 3px var(--color-ruby-glow);
}

.send-button-full {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-ruby);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all var(--transition-base);
}

.send-button-full:active {
    transform: scale(0.95);
    background: #a01828;
}

/* ========================================
   SLIDE-IN PANELS (Inventory, Players, Friends, etc.)
   ======================================== */

.slide-panel {
    position: fixed;
    background:
        var(--pattern-ornate),
        linear-gradient(180deg, var(--color-charcoal) 0%, var(--color-obsidian) 100%);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-panels);
    transition: transform var(--transition-slow);
    border: 1px solid var(--color-slate);
}

/* From Bottom (Inventory, Macros, Settings) - fullscreen on mobile */
.slide-panel.slide-from-bottom {
    inset: 0;
    max-height: none;
    border-radius: 0;
    transform: translateY(100%);
}

.slide-panel.slide-from-bottom:not(.hidden) {
    transform: translateY(0);
}

/* From Right (Players) - fullscreen on mobile */
.slide-panel.slide-from-right {
    inset: 0;
    width: 100%;
    max-width: none;
    border-radius: 0;
    transform: translateX(100%);
}

.slide-panel.slide-from-right:not(.hidden) {
    transform: translateX(0);
}

/* From Left (Friends) - fullscreen on mobile */
.slide-panel.slide-from-left {
    inset: 0;
    width: 100%;
    max-width: none;
    border-radius: 0;
    transform: translateX(-100%);
}

.slide-panel.slide-from-left:not(.hidden) {
    transform: translateX(0);
}

/* Fullscreen Panels */
.slide-panel.fullscreen {
    inset: 0;
    max-height: none;
    border-radius: 0;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-slate);
    background: linear-gradient(180deg, rgba(42, 42, 42, 0.8) 0%, transparent 100%);
}

.panel-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-amber);
}

.panel-content {
    padding: var(--space-md);
    overflow-y: auto;
    height: calc(100% - 60px);
    -webkit-overflow-scrolling: touch;
}

/* Inventory Grid */
.inventory-grid {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Inventory Item */
.inventory-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 6px 10px;
    background: var(--color-charcoal);
    border: 1px solid var(--color-slate);
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
    cursor: pointer;
}

.inventory-item:active {
    transform: scale(0.98);
    background: var(--color-slate);
}

.inventory-item.selected {
    border-color: var(--color-ruby);
    box-shadow: 0 0 0 2px var(--color-ruby-glow);
}

.inventory-item.equipped {
    border-color: var(--color-emerald);
}

.inventory-item.equipped .item-name {
    color: var(--color-emerald);
    font-weight: 600;
}

/* Item Icon */
.item-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-obsidian);
    border: 1px solid var(--color-ash);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.item-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Item Info */
.item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
}

.item-name {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-quantity {
    font-family: var(--font-display);
    font-size: 12px;
    color: var(--color-text-secondary);
}

.item-badges {
    display: flex;
    gap: var(--space-xs);
}

.badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.equipped-badge {
    background: var(--color-emerald);
    color: white;
}

/* Inventory Empty State */
.inventory-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xxl);
    text-align: center;
}

.empty-icon {
    font-size: 64px;
    margin-bottom: var(--space-md);
    opacity: 0.3;
}

.empty-text {
    font-family: var(--font-body);
    font-size: 16px;
    font-style: italic;
    color: var(--color-text-tertiary);
}

/* Equipment View Toggle */
.equip-view-toggle {
    margin-left: auto;
    margin-right: 8px;
    opacity: 0.7;
}

.equip-view-toggle.active {
    opacity: 1;
    color: var(--color-gold);
}

/* Equipment View (Diablo-style paper doll) */
.equipment-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    gap: 6px;
}

.equipment-view.hidden {
    display: none;
}

.equip-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    width: 100%;
}

.equip-row {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.equip-slot {
    width: 52px;
    height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(42, 42, 78, 0.8);
    border: 1px solid var(--color-slate);
    border-radius: 6px;
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.equip-slot.equipped {
    border-color: var(--color-emerald);
    background: rgba(74, 138, 74, 0.3);
    box-shadow: 0 0 6px rgba(74, 138, 74, 0.3);
}

.equip-slot:active {
    transform: scale(0.95);
}

.equip-slot-label {
    position: absolute;
    bottom: -12px;
    font-size: 8px;
    color: var(--color-text-tertiary);
    white-space: nowrap;
    pointer-events: none;
}

.equip-slot-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Equipment grid (32-slot inventory below paper doll) */
.equip-grid-title {
    font-size: 11px;
    color: var(--color-gold);
    font-weight: 600;
    margin-top: 16px;
    margin-bottom: 4px;
    align-self: flex-start;
    padding-left: 4px;
}

.equip-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 3px;
    width: 100%;
}

.equip-grid-slot {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(58, 58, 94, 0.6);
    border: 1px solid var(--color-slate);
    border-radius: 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.equip-grid-slot.equipped {
    border-color: var(--color-emerald);
    background: rgba(74, 138, 74, 0.25);
}

.equip-grid-slot:active {
    transform: scale(0.93);
}

.equip-grid-slot img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Bag of Holding section in equipment view */
.equip-bag-title {
    color: #cc99dd;
    border-top: 1px solid rgba(204, 153, 221, 0.3);
    padding-top: 12px;
}

.equip-bag-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 3px;
    width: 100%;
}

.equip-bag-slot {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(80, 50, 100, 0.4);
    border: 1px solid rgba(204, 153, 221, 0.3);
    border-radius: 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.equip-bag-slot:active {
    transform: scale(0.93);
}

.equip-bag-slot img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Context Menu */
.inventory-context-menu {
    position: fixed;
    background: var(--color-charcoal);
    border: 2px solid var(--color-slate);
    border-radius: var(--radius-md);
    padding: var(--space-xs);
    box-shadow: var(--shadow-lg);
    z-index: calc(var(--z-panels) + 10);
    min-width: 150px;
}

.inventory-context-menu.hidden {
    display: none;
}

.context-menu-item {
    width: 100%;
    padding: var(--space-md);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    text-align: left;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.context-menu-item:active {
    background: var(--color-slate);
    color: var(--color-ruby);
}

/* Old slot-based styles (keep for compatibility) */
.inventory-slot {
    aspect-ratio: 1;
    background: var(--color-charcoal);
    border: 2px solid var(--color-slate);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
}

.inventory-slot.empty {
    border-style: dashed;
    opacity: 0.5;
}

.inventory-slot:active {
    transform: scale(0.95);
    border-color: var(--color-ruby);
    box-shadow: var(--shadow-glow-ruby);
}

/* Player List */
.player-list,
.friend-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.player-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 6px 10px;
    background: var(--color-charcoal);
    border: 1px solid var(--color-slate);
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
}

.player-item:active {
    transform: translateX(4px);
    background: var(--color-slate);
}

.player-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text-tertiary);
}

.player-indicator.online {
    background: var(--color-emerald);
    box-shadow: 0 0 8px var(--color-emerald-glow);
}

.player-name {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text-primary);
}

/* Macro Editor */
.macro-tab-bar {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-slate);
    background: var(--color-charcoal);
    align-items: center;
}

.macro-tab-select {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0 var(--space-md);
    background: var(--color-slate);
    border: 1px solid var(--color-ash);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

.macro-tab-select:focus {
    border-color: var(--color-ruby);
}

.macro-tab-icon-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-slate);
    border: 1px solid var(--color-ash);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all var(--transition-base);
    outline: none;
}

.macro-tab-icon-btn:active {
    transform: scale(0.95);
    background: var(--color-ash);
}

.macro-tab-lib-btn {
    font-size: 12px;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.macro-tab-del-btn {
    color: #c44;
    font-size: 20px;
}

.macro-tab-del-btn:disabled {
    color: var(--color-ash);
    cursor: not-allowed;
}

.macro-tab-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 4px var(--space-md);
    background: var(--color-obsidian);
    border-bottom: 1px solid var(--color-slate);
    font-family: var(--font-display);
    font-size: 13px;
    color: var(--color-text-secondary);
    min-height: 32px;
}

.macro-tab-header-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
}

.macro-tab-header-toggle input[type="checkbox"] {
    accent-color: var(--color-emerald);
    cursor: pointer;
}

.macro-tab-header-btn {
    padding: 2px 10px;
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-slate);
    border-radius: 3px;
    font-family: var(--font-display);
    font-size: 12px;
    cursor: pointer;
}

.macro-tab-header-btn:active {
    background: var(--color-slate);
}

/* Use flex layout so the editor container fills available space */
.panel-content.macro-panel-flex {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.macro-editor-container {
    width: 100%;
    flex: 1;
    min-height: 0;
}

.macro-editor-container .mh-backdrop {
    background: var(--color-obsidian);
    color: var(--color-text-primary);
}

.macro-editor {
    width: 100%;
    height: 100%;
    padding: var(--space-md);
    background: var(--color-obsidian);
    border: none;
    color: var(--color-text-primary);
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 14px;
    line-height: 1.6;
    resize: none;
    outline: none;
}

/* Without highlight container, textarea fills flex parent */
.macro-editor:not(.mh-textarea) {
    flex: 1;
    min-height: 0;
}

.macro-editor:focus {
    background: var(--color-charcoal);
}

/* Update backdrop background on focus */
.macro-editor-container:focus-within .mh-backdrop {
    background: var(--color-charcoal);
}

.macro-editor:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.macro-button-bar {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md);
    border-top: 1px solid var(--color-slate);
    background: var(--color-charcoal);
}

.macro-action-button {
    flex: 1;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all var(--transition-base);
    outline: none;
}

.save-button {
    background: var(--color-ruby);
    color: white;
}

.save-button:active {
    transform: scale(0.98);
    background: #a01828;
}

.help-button {
    background: var(--color-slate);
    color: var(--color-text-primary);
}

.help-button:active {
    transform: scale(0.98);
    background: var(--color-ash);
}

/* Macro Library Overlay */
.macro-library-overlay {
    position: fixed;
    inset: 0;
    z-index: 2500;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.macro-library-modal {
    background: var(--color-charcoal);
    border-top: 2px solid var(--color-ruby);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    width: 100%;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    padding: var(--space-md);
    animation: slideUp 0.25s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.macro-library-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-slate);
    margin-bottom: var(--space-sm);
}

.macro-library-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-ruby);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.macro-library-close {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: 24px;
    padding: 4px 8px;
    cursor: pointer;
}

.macro-library-filters {
    display: flex;
    gap: 6px;
    padding: var(--space-sm) 0;
    flex-wrap: wrap;
}

.macro-library-filter-btn {
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 12px;
    border: 1px solid var(--color-ash);
    background: var(--color-slate);
    color: var(--color-text-secondary);
    transition: all var(--transition-base);
}

.macro-library-filter-btn.active {
    background: var(--color-ruby);
    border-color: var(--color-ruby);
    color: white;
}

.macro-library-list {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

.macro-library-item {
    padding: 12px var(--space-md);
    cursor: pointer;
    border-bottom: 1px solid var(--color-slate);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background var(--transition-base);
}

.macro-library-item:active {
    background: var(--color-slate);
}

.macro-library-item-name {
    color: var(--color-text-primary);
    font-size: 14px;
}

.macro-library-item-cat {
    color: var(--color-text-secondary);
    font-size: 11px;
}

.macro-library-empty {
    color: var(--color-text-secondary);
    padding: 24px;
    text-align: center;
    font-style: italic;
}

/* ========================================
   MORE MENU (Bottom Sheet)
   ======================================== */

.more-menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    pointer-events: none;
}

.more-menu:not(.hidden) {
    pointer-events: auto;
}

.more-menu-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.more-menu:not(.hidden) .more-menu-backdrop {
    opacity: 1;
}

.more-menu-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background:
        var(--pattern-ornate),
        linear-gradient(180deg, var(--color-charcoal) 0%, var(--color-obsidian) 100%);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: var(--space-lg) var(--space-md);
    transform: translateY(100%);
    transition: transform var(--transition-slow);
    border: 1px solid var(--color-slate);
    border-bottom: none;
}

.more-menu:not(.hidden) .more-menu-content {
    transform: translateY(0);
}

.more-menu-handle {
    width: 40px;
    height: 4px;
    background: var(--color-slate);
    border-radius: 2px;
    margin: 0 auto var(--space-lg);
}

.more-menu-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: var(--space-md);
}

.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--color-slate);
    border: 1px solid var(--color-ash);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    outline: none;
}

.menu-item:active {
    transform: scale(0.95);
    background: var(--color-ash);
    border-color: var(--color-ruby);
}

.menu-icon {
    font-size: 32px;
}

.menu-label {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-text-secondary);
}

.menu-item-logout {
    border-color: var(--color-ruby);
}

.menu-item-logout .menu-label {
    color: var(--color-ruby);
}

/* ========================================
   MOBILE LOGIN UI
   ======================================== */

.mobile-login-container {
    position: fixed;
    inset: 0;
    background:
        var(--pattern-ornate),
        radial-gradient(circle at 50% 30%, rgba(196, 30, 58, 0.15), transparent 60%),
        linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    /* Landscape phones (~390px tall) are shorter than the login card; allow
       scrolling instead of clipping the title/footer links off-screen (M8
       mobile audit finding, driver.mjs mobile --device both). */
    overflow-y: auto;
    padding: var(--space-lg) 0;
}

.login-content {
    width: 90%;
    max-width: 400px;
    /* Auto vertical margins do the centering, NOT the container's
       align-items: center — with flex centering, a card taller than a
       landscape-phone viewport overflows BOTH ends and the top half (logo)
       is unreachable by scrolling. Auto margins center the card when it
       fits and collapse to 0 when it doesn't, so scrolling starts at the
       true top. (Auto cross-axis margins override align-self per flexbox
       spec, so the container rule can stay for the transition states.) */
    margin: auto 0;
    animation: slideUpFade 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards;
}

.login-ornate-border {
    position: relative;
    padding: var(--space-xxl) var(--space-lg);
    border: 2px solid var(--color-ash);
    border-radius: var(--radius-xl);
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(30px);
    box-shadow:
        var(--shadow-lg),
        inset 0 0 40px rgba(196, 30, 58, 0.1);
}

/* Ornate corner decorations */
.login-ornate-border::before,
.login-ornate-border::after {
    content: '◆';
    position: absolute;
    color: var(--color-ruby);
    font-size: 14px;
    opacity: 0.6;
}

.login-ornate-border::before {
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
}

.login-ornate-border::after {
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
}

.login-title {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-align: center;
    background: linear-gradient(135deg, var(--color-ruby), var(--color-amber));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-sm);
    animation: shimmer 3s ease-in-out infinite;
}

.login-subtitle {
    font-family: var(--font-body);
    font-size: 16px;
    font-style: italic;
    color: var(--color-text-secondary);
    text-align: center;
    letter-spacing: 2px;
    margin-bottom: var(--space-xl);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.input-group label {
    font-family: var(--font-display);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-amber);
}

.login-input {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-md);
    background: var(--color-obsidian);
    border: 2px solid var(--color-slate);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    outline: none;
    transition: all var(--transition-base);
}

.login-input::placeholder {
    color: var(--color-text-tertiary);
    font-style: italic;
}

.login-input:focus {
    border-color: var(--color-ruby);
    box-shadow: 0 0 0 4px var(--color-ruby-glow);
}

.remember-me {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 14px;
    color: var(--color-text-secondary);
}

.remember-checkbox {
    width: 20px;
    height: 20px;
    accent-color: var(--color-ruby);
}

.login-button {
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    background: linear-gradient(135deg, var(--color-ruby), #a01828);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

.login-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.6s ease-out;
}

.login-button:hover::before {
    transform: translateX(100%);
}

.login-button:active {
    transform: scale(0.98);
    box-shadow: var(--shadow-sm);
}

.login-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.button-icon {
    font-size: 22px;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
}

.login-loading {
    text-align: center;
    padding: var(--space-md);
}

.loading-spinner {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 auto var(--space-md);
}

.spinner-ring {
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    animation: rotate 2s linear infinite;
}

.spinner-ring:nth-child(1) {
    border-top-color: var(--color-ruby);
    animation-duration: 1.5s;
}

.spinner-ring:nth-child(2) {
    border-right-color: var(--color-sapphire);
    animation-duration: 2s;
    animation-direction: reverse;
    inset: 8px;
}

.spinner-ring:nth-child(3) {
    border-bottom-color: var(--color-amber);
    animation-duration: 2.5s;
    inset: 16px;
}

.login-loading p {
    font-family: var(--font-body);
    font-size: 14px;
    font-style: italic;
    color: var(--color-emerald);
}

.login-error {
    padding: var(--space-md);
    background: rgba(196, 30, 58, 0.1);
    border: 1px solid var(--color-ruby);
    border-radius: var(--radius-md);
    color: var(--color-ruby);
    font-family: var(--font-body);
    font-size: 14px;
    text-align: center;
}

.login-demo-link {
    text-align: center;
    color: var(--color-sapphire);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-bottom: 8px;
    transition: color var(--transition-fast);
}

.login-demo-link:active {
    color: var(--color-text-primary);
}

.changelog-link {
    text-align: center;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-fast);
}

.changelog-link:active {
    color: var(--color-text-primary);
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.hidden {
    display: none !important;
}

/* ========================================
   ANIMATIONS & KEYFRAMES
   ======================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

@keyframes shimmer {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

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

@keyframes ripple {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

@keyframes glowShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Tablet Portrait (600px+) */
@media (min-width: 600px) {
    .status-bar {
        padding: var(--space-md) var(--space-lg);
    }

    .chat-panel {
        max-height: 80px;
    }

    .action-bar {
        padding: var(--space-md) var(--space-lg);
    }

    .message-input,
    .message-input-full {
        font-size: 18px;
    }

    .slide-panel.slide-from-right,
    .slide-panel.slide-from-left {
        width: 400px;
    }
}

/* Tablet Landscape (900px+) — CSS Grid side-by-side layout */
@media (min-width: 900px) and (orientation: landscape) {
    .game-container {
        display: grid;
        grid-template-columns: 1fr min(350px, 30vw);
        grid-template-rows: auto 1fr auto auto;
    }

    .status-bar {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .game-canvas-wrapper {
        grid-column: 1;
        grid-row: 2;
    }

    .chat-panel {
        grid-column: 2;
        grid-row: 2 / 5;
        max-height: none;
        overflow-y: auto;
        border-top: none;
        border-left: 1px solid var(--color-slate);
    }

    .macro-action-bar {
        grid-column: 1;
        grid-row: 3;
    }

    .action-bar {
        grid-column: 1;
        grid-row: 4;
    }
}

/* Large Screens (Redirect to desktop?) */
@media (min-width: 1024px) {
    /* Consider redirecting to desktop client */
}

/* ========================================
   LANDSCAPE PLAY MODE (Task 9)
   Phone rotated to landscape: chrome (top status bar, compact chat, macro
   quick-button row) hides completely; the canvas fills the space above the
   action bar; a filtered "important lines" strip floats over the canvas;
   tapping it opens the existing full-chat UI (#messageMode) reparented into
   a small sheet instead of a second chat UI. Driven entirely by
   body.landscape-play, toggled from LandscapeMode.js's
   matchMedia('(orientation: landscape)') listener.

   Placed after (and using more class-qualified selectors than) the 900px
   tablet-landscape grid block above so it wins on phones that also cross
   that width threshold in landscape — e.g. the Android Pixel 7 profile is
   412x915, so its landscape width (915px) matches `min-width: 900px` even
   though it's a phone, not a tablet. The gate below is HEIGHT-based
   (`max-height: 500px`), not width-based, precisely because width cannot
   separate phones from tablets in landscape (big phones exceed 900px);
   height still discriminates cleanly (phone landscape heights <=~450px vs
   tablet landscape heights >=768px). Since `body.landscape-play` still gets
   applied to the Pixel 7 (412x915, height 412 <= 500), and the tablet grid
   rule above still matches it too (915px >= 900px), the higher-specificity
   override below (two classes vs. the tablet rule's one) is still required
   to win: without it, `.game-container` would stay `display: grid` with a
   reserved (now-empty) 30vw side column for the hidden `.chat-panel`,
   wasting a third of the screen instead of giving it to the canvas.
   ======================================== */

/* Sits to the RIGHT of the joystick (user device-pass preference,
   2026-07-07), aligned to the thumb zone at the bottom edge. `left` clears
   the joystick (bottom-left by default — JoystickWidget.js
   `_corner: 'lower-left'`), so it must track the same sizing constants
   JoystickWidget.js uses to place it:
     - MARGIN(20) = the widget's inset from the left edge
     - + OUTER_RADIUS(60) * 2 * scale (0.65 nominal for the `h < 600` bucket
       in main-mobile.js's _updateJoystickLayout() = 78px diameter; the
       rendered ring can reach ~130px on larger buckets/DPRs)
   = ~98-150px to the joystick's right edge; 160px keeps clearance across
   buckets. If those constants change, this must move with them — there is
   no live measurement wiring the two together. */
.ls-strip {
    position: absolute;
    left: max(148px, calc(env(safe-area-inset-left) + 140px));
    bottom: max(12px, env(safe-area-inset-bottom));
    /* Reaches most of the way to the right-edge column (~120px reserved for
       it incl. margins) instead of the old 40vw — full-stream lines were
       ellipsizing hard at 40vw (device pass 2026-07-07). */
    max-width: calc(100vw - 148px - 128px);
    font-size: 13px;
    line-height: 1.35;
    color: var(--color-text-primary);
    background: rgba(0, 0, 0, 0.45);
    border-radius: var(--radius-md);
    padding: 4px 10px;
    pointer-events: auto;
    display: none;
    z-index: var(--z-ui);
}

.ls-strip-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Landscape quick-equip group (Task 10). Now flows inside .ls-column
   (landscape play v2) instead of positioning itself on the right edge.
   Empty (no pinned slots) collapses to 0x0 — only .qeq-slot children have
   padding/border. */
.ls-equip {
    display: none;
    flex-direction: column;
    gap: 6px;
    pointer-events: auto;
}

/* Landscape right-edge column (landscape play v2): ⋮ / assignable slots /
   quick-equip / 💬 floating over the full-viewport canvas. */
.ls-column {
    position: absolute;
    right: max(8px, env(safe-area-inset-right));
    top: 50%;
    transform: translateY(-50%);
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: var(--z-ui);
    pointer-events: auto;
    /* Cap the column at the viewport: with several quick-equip pins the
       stack (⋮ + 4 slots + up to 6 chips + 💬) exceeds a ~390px-high phone
       screen and would push ⋮/💬 off-screen. Scroll instead — buttons keep
       their 44px touch size. dvh tracks the dynamic browser chrome; the vh
       line is the fallback for engines without dvh. */
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.ls-column::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Once the column is height-capped, default flex-shrink would squash the
   44px buttons to fit instead of overflowing into the scroll — pin them. */
.ls-column > * {
    flex-shrink: 0;
}

.ls-slots {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Compact square variant of .action-slot for the landscape column. The
   base rule's flexible icon (flex-shrink) fits key+icon into 44px; there is
   no room for a text label here (same rationale as the ≤480px grid). */
.ls-slots .action-slot.ls-slot {
    width: 44px;
    height: 44px;
    padding: 2px;
    gap: 1px;
}

.ls-slots .action-slot.ls-slot .action-slot-label {
    display: none;
}

.ls-pinned-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--color-slate);
    background: rgba(0, 0, 0, 0.45);
    color: var(--color-text-primary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Near-full-height (was `10% 5%` — at a 390px-tall phone landscape viewport
   that left ~312px, and the inherited portrait #messageMode chrome alone
   (title header + tabs + presence bar + input bar) ate nearly all of it,
   showing ~1 message row. See the chrome-compaction rules below for the
   other half of the fix — this alone isn't enough without those. */
.ls-sheet {
    position: fixed;
    inset: 8px 5%;
    background: rgba(10, 12, 16, 0.96);
    border-radius: var(--radius-lg);
    z-index: var(--z-message-mode);
    display: none;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.ls-sheet.open {
    display: flex;
    flex-direction: column;
}

.ls-sheet-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: var(--color-text-primary);
    border: 1px solid var(--color-slate);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ls-sheet-body {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* The reparented #messageMode fills the sheet body instead of its normal
   fixed/inset:0 fullscreen sizing — see LandscapeMode.js openSheet(). Its
   own close button is hidden while nested so the sheet's ✕/swipe-down are
   the only dismiss controls (otherwise tapping the inner ✕ would hide the
   content while leaving the outer sheet chrome open, out of sync). */
.ls-sheet #messageMode {
    position: static;
    inset: auto;
    z-index: auto;
    width: 100%;
    height: 100%;
}

.ls-sheet #messageMode #closeMessageMode {
    display: none;
}

/* ----------------------------------------------------------------------
   Landscape sheet chrome compaction (real-device dev pass, finding 2).
   The reparented #messageMode brings its portrait sizing along: a big
   gradient title header, roomy tabs, a spacious presence bar, generous
   message-row padding/avatars, and a tall input bar — all sized for a
   near-100dvh portrait sheet. On a ~374px-tall landscape sheet
   (390px viewport - 8px*2 inset) that chrome alone left room for ~1
   message. Every rule below is scoped under `.ls-sheet #messageMode` so
   the PORTRAIT #messageMode (still at its home position, not reparented)
   stays pixel-identical — same pattern as the #closeMessageMode rule above.
   ---------------------------------------------------------------------- */

/* The big title serves no purpose here — the sheet already has its own
   ✕ (.ls-sheet-close, position:absolute top:8px/right:8px/32x32, above).
   Hiding it (rather than shrinking) reclaims the most space for the least
   loss: the close affordance and tab labels already say what this is. */
.ls-sheet #messageMode .message-mode-header {
    display: none;
}

/* Tabs: with the header gone, this is now the sheet's top edge. Verified via
   the geometry probe (ls2-devpass-fixes-report.md) that its actual button
   row — packed left, well short of the sheet's landscape width — never
   reaches under .ls-sheet-close's top-right corner, so no extra top
   clearance is added here; just a shorter/tighter button style. */
.ls-sheet #messageMode .message-tab-btn {
    padding: 5px 12px;
    font-size: 13px;
}

/* Presence ("Nearby: …") bar: shrunk, not hidden — hiding would drop the
   only at-a-glance who-else-is-here signal in landscape, and its ▾ expand
   affordance still works fine at this size; the tradeoff is a slightly
   tighter tap target on the summary line. */
.ls-sheet #messageMode .entity-summary-bar .esb-summary-line {
    padding: 3px 12px;
}

.ls-sheet #messageMode .entity-summary-bar .esb-summary-text {
    font-size: 11px;
}

/* Message rows: tightened padding/avatar/margins so more history fits per
   pixel — kept modest (26px avatar, 12px text) to stay readable rather than
   cramped. */
.ls-sheet #messageMode .message-row-inline {
    margin-bottom: 3px;
    padding: 3px 8px;
    gap: 8px;
}

.ls-sheet #messageMode .message-avatar-inline {
    width: 26px;
    height: 26px;
}

.ls-sheet #messageMode .message-author-inline,
.ls-sheet #messageMode .message-text-inline {
    font-size: 12px;
}

/* Input row: portrait's 48px input/buttons + 16px padding assume a
   near-full-height sheet with thumb-reach margins; slim it for the
   landscape sheet's tighter budget. */
.ls-sheet #messageMode .message-mode-input {
    padding: 6px 10px;
    gap: 8px;
}

.ls-sheet #messageMode .message-input-full {
    height: 36px;
    font-size: 14px;
}

.ls-sheet #messageMode .send-button-full,
.ls-sheet #messageMode #thinkBtnFull {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
}

/* Phone landscape play mode: only on short (<=500px) landscape viewports.
   Gated by HEIGHT, not width — big phones (Pixel 7 landscape = 915px wide)
   exceed the 900px tablet breakpoint, so width can't separate phones from
   tablets in landscape. Tablets (>=768px landscape height) keep the
   two-column layout via the `min-width: 900px` grid rule above. */
@media (max-height: 500px) {
    body.landscape-play .game-container {
        display: flex;
        flex-direction: column;
    }

    body.landscape-play .status-bar,
    body.landscape-play .chat-panel,
    body.landscape-play .macro-action-bar {
        display: none;
    }

    body.landscape-play #gameContainer {
        position: fixed;
        inset: 0;
        padding: env(safe-area-inset-top) env(safe-area-inset-right)
                 env(safe-area-inset-bottom) env(safe-area-inset-left);
    }

    /* #gameCanvas (the flex:1 canvas wrapper) picks up an inline height/top from
       handleResize()'s keyboard-avoidance logic (main-mobile.js), pinned to
       visualViewport.height/offsetTop regardless of how much of the flex column
       is still occupied by hidden siblings. With the chrome above it gone,
       that inline value no longer matches the space actually available.
       !important reclaims flex-managed sizing so the canvas fills exactly what
       the hidden siblings freed up, up to .action-bar — see task-9-report.md
       "canvas-resize findings". */
    body.landscape-play #gameCanvas {
        height: auto !important;
        top: auto !important;
        flex: 1 1 auto;
    }

    body.landscape-play .ls-strip {
        display: block;
    }

    body.landscape-play .ls-equip {
        display: flex;
    }

    body.landscape-play .ls-column {
        display: flex;
    }

    /* Landscape play v2: the portrait input bar is fully hidden; chat goes
       through the sheet (💬 / strip tap), menu through the pinned ⋮. */
    body.landscape-play .action-bar {
        display: none;
    }
}

/* ========================================
   ACCESSIBILITY & TOUCH ENHANCEMENTS
   ======================================== */

/* Larger touch targets on small screens */
@media (max-width: 375px) {
    .icon-button {
        width: 40px;
        height: 40px;
    }

    .status-value {
        display: none;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .status-bar-track {
        border-width: 2px;
    }

    .icon-button {
        border-width: 2px;
    }
}

/* ========================================
   RIGHT-CLICK MODE BAR
   ======================================== */

.right-click-bar {
    position: absolute;
    bottom: 10px;
    right: 10px;
    left: auto;
    display: flex;
    align-items: center;
    pointer-events: none;
    z-index: var(--z-ui);
    transition: left 0.2s ease, right 0.2s ease;
}

/* When joystick is on the right, button moves to bottom-left */
.right-click-bar.joystick-right {
    right: auto;
    left: 10px;
}

.right-click-mode-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(10, 10, 10, 0.75);
    border: 1px solid var(--color-slate);
    border-radius: 16px;
    color: var(--color-silver);
    font-family: var(--font-serif);
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: auto;
    transition: all 0.15s ease;
}

.right-click-mode-btn.active {
    background: rgba(180, 80, 80, 0.4);
    border-color: rgba(220, 100, 100, 0.8);
    color: #f08080;
}

/* ========================================
   MACRO ACTION BAR
   ======================================== */

.macro-action-bar {
    background: rgba(10, 10, 10, 0.95);
    border-top: 1px solid var(--color-slate);
    padding: 8px 8px;
    z-index: var(--z-ui);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Swipeable pages: row = pages viewport (flex: 1) + trailing non-paged group */
.ab-row {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.ab-pages-viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    position: relative;
}

.ab-pages-track {
    display: flex;
    width: 100%;
    transition: transform 150ms ease;
    will-change: transform;
}

.ab-pages-track > .action-bar-scroll {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Trailing non-paged slot group (Task 10: quick-equip). Hidden until
   MobileActionBarManager.setTrailingGroup() mounts something into it. */
.ab-trailing {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid var(--color-slate);
}

/* Empty-state guard: MobileActionBarManager.setTrailingGroup() mounts the
   caller-owned wrapper element once at setup (main-mobile.js) and leaves it
   mounted even when QuickEquipBar has no pinned slots yet (e.g. a fresh
   install), so `.ab-trailing:empty` never matches — it always has that
   wrapper div as a child. Use :has() to key off the actual slot buttons
   instead, so the stray border-left divider disappears until something is
   pinned. */
.ab-trailing:not(:has(.qeq-slot)) {
    display: none;
}

/* Quick-equip slots (Task 10): pinned equip/use buttons, rendered by
   QuickEquipBar.js into two mount points — `.ab-trailing` above (portrait)
   and `.ls-equip` below (landscape). Compact variant of `.action-slot`
   (smaller — this group sits alongside the full action bar/edge strip, not
   in place of it). JS renders nothing when there are no pinned slots, so no
   "empty" visual state is needed here (contrast `.action-slot.empty`). */
.qeq-group {
    display: flex;
    gap: 6px;
}

.qeq-landscape {
    flex-direction: column;
}

.qeq-slot {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
        rgba(30, 30, 35, 0.8),
        rgba(20, 20, 25, 0.9));
    border: 1px solid var(--color-slate);
    border-radius: 8px;
    color: var(--color-silver);
    cursor: pointer;
    padding: 2px;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.qeq-slot:active {
    transform: scale(0.95);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

.qeq-slot-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.qeq-slot-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-gold);
    pointer-events: none;
}

/* Inline unpin-confirm menu (long-press a pinned slot) — mirrors
   `.inventory-context-menu` / `.context-menu-item`'s look, not window.confirm. */
.qeq-unpin-menu {
    position: fixed;
    background: var(--color-charcoal);
    border: 2px solid var(--color-slate);
    border-radius: var(--radius-md);
    padding: var(--space-xs);
    box-shadow: var(--shadow-lg);
    z-index: calc(var(--z-panels) + 20);
}

.qeq-unpin-btn {
    padding: var(--space-md);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-ruby);
    font-family: var(--font-body);
    font-size: 15px;
    cursor: pointer;
    white-space: nowrap;
}

.qeq-unpin-btn:active {
    background: var(--color-slate);
}

/* Page-dots indicator */
.ab-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding-top: 5px;
}

.ab-dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(150, 150, 165, 0.4);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.ab-dot.active {
    /* NOTE: intentionally --color-slate, not --color-gold — --color-gold is
       referenced elsewhere in this file (action-slot-key, borders, etc.) but
       is never defined by any theme CSS (grepped theme-classic.css and the
       rest of public/css/*.css), so those rules silently fall back to the
       initial/inherited value. --color-slate ("Gold/tan border") is the
       theme's actual defined near-gold tone and renders correctly. */
    background: var(--color-slate);
    transform: scale(1.3);
}

.action-bar-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.action-bar-scroll::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.action-slot {
    flex-shrink: 0;
    width: 64px;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: linear-gradient(135deg,
        rgba(30, 30, 35, 0.8),
        rgba(20, 20, 25, 0.9));
    border: 1px solid var(--color-slate);
    border-radius: 8px;
    color: var(--color-silver);
    font-family: var(--font-serif);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 6px;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.action-slot.empty {
    border-color: rgba(100, 100, 120, 0.3);
    opacity: 0.6;
}

.action-slot.assigned {
    border-color: var(--color-gold);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
}

.action-slot.pressed {
    transform: scale(0.95);
    background: linear-gradient(135deg, 
        rgba(50, 50, 55, 0.9), 
        rgba(40, 40, 45, 1));
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
}

.action-slot-key {
    font-size: 10px;
    font-weight: 600;
    /* line-height 1: the slot's key+gap+icon stack runs right at the 46px
       content height; a default line-height overflows and pushes the key
       label up into the button's top border */
    line-height: 1;
    flex-shrink: 0;
    color: var(--color-gold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.action-slot-label {
    font-size: 11px;
    font-weight: 400;
    color: var(--color-silver);
    text-align: center;
    line-height: 1.2;
    flex-shrink: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.action-slot.empty .action-slot-label {
    color: rgba(200, 200, 220, 0.5);
    font-style: italic;
}

/* Active/hover states */
.action-slot:active {
    transform: scale(0.95);
}

@media (hover: hover) {
    .action-slot:hover {
        border-color: var(--color-gold);
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
    }
}

/* Small screens: compact 2-row grid layout for action bar */
@media (max-width: 480px) {
    .action-bar-scroll {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 5px;
        overflow-x: visible;
    }

    .macro-action-bar {
        padding: 6px;
    }

    .action-slot {
        width: auto;
        height: 42px;
        padding: 3px 2px;
        border-radius: 6px;
        gap: 2px;
    }

    .action-slot-key {
        font-size: 9px;
        letter-spacing: 0.3px;
    }

    /* 42px slot − border/padding leaves 34px: 9px key + 2px gap + icon
       must fit, so the 28px base icon shrinks here */
    .action-slot-icon {
        width: 24px;
        height: 24px;
        flex-shrink: 1;
        min-height: 0;
    }

    .action-slot-label {
        font-size: 9px;
    }

    /* No room for key + icon + label in a 42px slot: icon-assigned slots
       go icon-only here (wider layouts show both, shrinking the icon) */
    .action-slot.has-icon .action-slot-label {
        display: none;
    }

    /* Two-row bar is taller on small screens */
}

/* ========================================
   ACTION SLOT ASSIGNMENT MODAL
   ======================================== */

.action-slot-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-slot-modal.hidden {
    display: none;
}

.action-slot-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.action-slot-modal-content {
    position: relative;
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    background: linear-gradient(135deg, 
        rgba(20, 20, 25, 0.98), 
        rgba(15, 15, 20, 0.98));
    border: 2px solid var(--color-gold);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6),
                0 0 20px rgba(212, 175, 55, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.action-slot-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, 
        rgba(30, 30, 35, 0.9), 
        rgba(25, 25, 30, 0.9));
    border-bottom: 1px solid var(--color-slate);
}

.action-slot-modal-title {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-gold);
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.action-slot-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-silver);
    font-size: 28px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-slot-modal-close:hover {
    color: var(--color-gold);
    transform: scale(1.1);
}

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

.action-slot-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 12px;
    background: rgba(30, 30, 35, 0.6);
    border-radius: 8px;
    border: 1px solid var(--color-slate);
}

.action-slot-info-label {
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-silver);
}

.action-slot-info-value {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-gold);
}

.action-slot-section {
    margin-bottom: 24px;
}

.action-slot-section-title {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-gold);
    margin: 0 0 12px 0;
}

.action-slot-macro-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.action-slot-macro-item {
    padding: 12px 16px;
    background: linear-gradient(135deg, 
        rgba(30, 30, 35, 0.8), 
        rgba(25, 25, 30, 0.9));
    border: 1px solid var(--color-slate);
    border-radius: 8px;
    color: var(--color-silver);
    font-family: var(--font-serif);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-slot-macro-item:hover {
    border-color: var(--color-gold);
    background: linear-gradient(135deg, 
        rgba(40, 40, 45, 0.9), 
        rgba(35, 35, 40, 1));
    transform: translateX(4px);
}

.action-slot-macro-item:active {
    transform: scale(0.98);
}

.action-slot-empty {
    padding: 20px;
    text-align: center;
    color: rgba(200, 200, 220, 0.5);
    font-style: italic;
    font-family: var(--font-serif);
}

.action-slot-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    background: rgba(10, 10, 15, 0.8);
    border: 1px solid var(--color-slate);
    border-radius: 8px;
    color: var(--color-silver);
    font-family: var(--font-serif);
    font-size: 14px;
    margin-bottom: 12px;
}

.action-slot-input:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
}

.action-slot-button {
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, 
        rgba(30, 30, 35, 0.9), 
        rgba(25, 25, 30, 1));
    border: 1px solid var(--color-gold);
    border-radius: 8px;
    color: var(--color-gold);
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-slot-button:hover {
    background: linear-gradient(135deg, 
        rgba(40, 40, 45, 1), 
        rgba(35, 35, 40, 1));
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
    transform: translateY(-2px);
}

.action-slot-button:active {
    transform: scale(0.98);
}

.action-slot-button.clear-slot {
    border-color: rgba(220, 60, 60, 0.8);
    color: rgba(255, 100, 100, 0.9);
}

.action-slot-button.clear-slot:hover {
    border-color: rgba(255, 80, 80, 1);
    box-shadow: 0 0 10px rgba(255, 80, 80, 0.3);
}

/* Action Slot Icon (inside each slot button) */
.action-slot-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.action-slot-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Icon & Color Section in Assignment Modal */
.action-slot-icon-preview-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.action-slot-icon-preview {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    background: rgba(30, 30, 35, 0.8);
    border: 2px solid var(--color-slate);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.action-slot-icon-preview:active {
    border-color: var(--color-gold);
}

.action-slot-icon-preview-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.action-slot-icon-no-icon {
    font-size: 10px;
    color: rgba(200, 200, 220, 0.4);
    text-align: center;
    line-height: 1.2;
}

.action-slot-color-controls {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.action-slot-color-label {
    font-size: 10px;
    color: rgba(200, 200, 220, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--font-serif);
}

.action-slot-color-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.action-slot-color-input {
    flex: 1;
    padding: 8px 10px;
    background: rgba(10, 10, 15, 0.8);
    border: 1px solid var(--color-slate);
    border-radius: 6px;
    color: var(--color-silver);
    font-family: 'Courier New', monospace;
    font-size: 12px;
}

.action-slot-color-input:focus {
    outline: none;
    border-color: var(--color-gold);
}

.action-slot-color-picker {
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-slate);
    border-radius: 6px;
    cursor: pointer;
    background: none;
    padding: 2px;
}

.action-slot-color-presets {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.action-slot-color-preset {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(100, 100, 120, 0.4);
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
    padding: 0;
}

.action-slot-color-preset:active {
    transform: scale(0.9);
    border-color: var(--color-gold);
}

/* Icon Grid in Assignment Modal */
.action-slot-icon-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
    padding: 6px;
    background: rgba(10, 10, 15, 0.6);
    border: 1px solid var(--color-slate);
    border-radius: 6px;
    margin-top: 8px;
}

.action-slot-icon-btn {
    width: 100%;
    aspect-ratio: 1;
    background: rgba(30, 30, 35, 0.8);
    border: 2px solid var(--color-slate);
    border-radius: 6px;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, background 0.15s;
}

.action-slot-icon-btn.selected {
    border-color: var(--color-gold);
    background: rgba(212, 175, 55, 0.15);
    box-shadow: 0 0 6px rgba(212, 175, 55, 0.3);
}

.action-slot-icon-btn:active {
    transform: scale(0.95);
}

.action-slot-icon-btn-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(1);
}

/* ========================================
   SETTINGS PANEL
   ======================================== */

.settings-container {
    padding: var(--space-lg);
}

.settings-section {
    margin-bottom: var(--space-xl);
}

.settings-section-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-amber);
    margin: 0 0 var(--space-md) 0;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-ash);
}

.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.setting-item:last-child {
    border-bottom: none;
}

.setting-label {
    flex: 1;
    margin-right: var(--space-md);
}

.setting-name {
    display: block;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
}

.setting-description {
    display: block;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-slate);
    transition: all 0.3s ease;
    border-radius: 28px;
    border: 1px solid var(--color-ash);
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: var(--color-text-secondary);
    transition: all 0.3s ease;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: var(--color-emerald);
    border-color: var(--color-emerald);
}

input:checked + .toggle-slider:before {
    transform: translateX(24px);
    background-color: white;
}

.toggle-slider:hover {
    box-shadow: 0 0 8px rgba(80, 200, 120, 0.3);
}

/* Volume Control */
.volume-control {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-shrink: 0;
}

.volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 120px;
    height: 6px;
    background: var(--color-slate);
    border-radius: 3px;
    outline: none;
    border: 1px solid var(--color-ash);
    transition: all 0.2s ease;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--color-emerald);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.volume-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--color-emerald);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.volume-slider::-webkit-slider-thumb:hover {
    background: var(--color-emerald);
    box-shadow: 0 0 8px var(--color-emerald-glow);
    transform: scale(1.1);
}

.volume-slider::-moz-range-thumb:hover {
    background: var(--color-emerald);
    box-shadow: 0 0 8px var(--color-emerald-glow);
    transform: scale(1.1);
}

.volume-value {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text-secondary);
    min-width: 40px;
    text-align: right;
}

/* Select Dropdown */
.setting-select {
    appearance: none;
    background: var(--color-charcoal);
    border: 1px solid var(--color-ash);
    border-radius: 8px;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 14px;
    padding: var(--space-sm) var(--space-md);
    padding-right: 32px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="12" height="8" viewBox="0 0 12 8" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L6 6L11 1" stroke="%23b0b0b0" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.setting-select:hover {
    border-color: var(--color-emerald);
    box-shadow: 0 0 8px rgba(80, 200, 120, 0.2);
}

.setting-select:focus {
    outline: none;
    border-color: var(--color-emerald);
    box-shadow: 0 0 12px rgba(80, 200, 120, 0.3);
}

/* Settings Info */
.setting-action-button {
    background: var(--color-ash);
    color: var(--color-text-primary);
    border: 1px solid var(--color-amber);
    border-radius: 6px;
    padding: 8px 16px;
    font-family: var(--font-body);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.setting-action-button:hover,
.setting-action-button:active {
    background: var(--color-amber);
    color: #000;
}

.setting-action-button:disabled {
    opacity: 0.6;
    cursor: default;
}

.settings-info {
    margin-top: var(--space-xl);
    padding: var(--space-md);
    background: rgba(80, 200, 120, 0.1);
    border: 1px solid rgba(80, 200, 120, 0.2);
    border-radius: 8px;
    text-align: center;
}

.settings-info p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-emerald);
}

/* Drag-and-drop highlight for equipment overlay */
.drop-highlight {
    outline: 2px solid #44FF44 !important;
    outline-offset: -2px;
    background: rgba(68, 255, 68, 0.1) !important;
}