/* Prevent all zoom behavior on mobile */
html {
    touch-action: manipulation;
}

/* === Dark Scrollbars === */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #444 #1a1a1a;
}

/* === Client Main Area === */
#client-main {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

/* === Toolbar === */
#client-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background-color: #1e1e1e;
    border-bottom: 1px solid #333;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

#toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

#toolbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

#client-title {
    font-weight: bold;
    color: #ffcc00;
    font-size: 1rem;
}

/* Connection status */
#connection-status {
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.status-disconnected {
    color: #ff4444;
    background-color: rgba(255, 68, 68, 0.15);
}

.status-connecting {
    color: #ffaa00;
    background-color: rgba(255, 170, 0, 0.15);
}

.status-connected {
    color: #44ff44;
    background-color: rgba(68, 255, 68, 0.15);
}

/* Toolbar buttons */
.toolbar-btn {
    background-color: #2b2b2b;
    color: #f1f1f1;
    border: 1px solid #444;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 0.8rem;
    border-radius: 3px;
    transition: background-color 0.2s, color 0.2s;
    letter-spacing: 0.3px;
}

.toolbar-btn:hover:not(:disabled) {
    background-color: #444;
    color: #ffcc00;
}

.toolbar-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.toolbar-btn-danger {
    color: #ff6666 !important;
    border-color: #663333 !important;
}

.toolbar-btn-danger:hover {
    background-color: #3a1a1a !important;
    color: #ff8888 !important;
}

/* Visual separator before automation buttons */
#btn-triggers {
    margin-left: 8px;
    border-left: 2px solid #3a3a3a;
}

/* === Vitals Bar === */
#vitals-bar {
    display: flex;
    align-items: center;
    padding: 5px 12px;
    background-color: #1a1a1a;
    border-top: 1px solid #2a2a2a;
    border-bottom: 1px solid #333;
    gap: 16px;
    flex-shrink: 0;
}

#vitals-char-info {
    display: flex;
    flex-direction: column;
    min-width: 120px;
}

#char-name {
    color: #FFD700;
    font-weight: bold;
    font-size: 0.9rem;
}


#vitals-bars {
    display: flex;
    gap: 12px;
    flex: 1;
}

.vital-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.vital-label {
    color: #aaa;
    font-size: 0.75rem;
    min-width: 24px;
    text-transform: uppercase;
}

.vital-bar-bg {
    flex: 1;
    height: 18px;
    background-color: #2b2b2b;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #444;
    position: relative;
}

.vital-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease, background-color 0.4s ease;
    width: 0%;
}

.vital-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-family: monospace;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    pointer-events: none;
    white-space: nowrap;
}

/* === Game Area (Terminal + Sidebar) === */
#game-area {
    display: flex;
    flex: 1;
    overflow: hidden;
}

#terminal-container {
    flex: 1;
    overflow: hidden;
    background-color: #121212;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: none; /* Disable ALL browser touch behaviors - our handler must control everything */
}

#terminal-container .xterm {
    height: 100%;
    padding: 4px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Disable xterm.js selection layer to prevent touch interference with scrolling */
.xterm-selection {
    pointer-events: none !important;
    display: none !important;
}

/* === Sidebar resize handle (desktop) === */
#sidebar-resizer {
    width: 6px;
    flex-shrink: 0;
    cursor: col-resize;
    background: #2a2a2a;
    border-left: 1px solid #1a1a1a;
    border-right: 1px solid #1a1a1a;
}
#sidebar-resizer:hover { background: #ffcc00; }

/* === Right Sidebar === */
#game-sidebar {
    width: 300px;
    background: linear-gradient(180deg, #1c1c1c 0%, #181818 100%);
    border-left: 1px solid #333;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    flex-shrink: 0;
    transition: width 0.3s ease;
}
/* No width animation while actively dragging the resizer. */
#game-sidebar.resizing { transition: none; }

#game-sidebar.collapsed {
    width: 0;
    overflow: hidden;
    border-left: none;
}

.sidebar-collapse-btn {
    background: none;
    border: none;
    color: #555;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 0.7rem;
    text-align: right;
    transition: color 0.2s;
}

.sidebar-collapse-btn:hover {
    color: #ffcc00;
}

.sidebar-section {
    padding: 10px 12px;
    border-bottom: 1px solid #2b2b2b;
}

.sidebar-section-title {
    color: #ff8800;
    font-size: 0.7rem;
    text-transform: uppercase;
    margin-bottom: 6px;
    font-weight: bold;
    letter-spacing: 0.5px;
    border-left: 2px solid #ff8800;
    padding-left: 6px;
}

#room-name {
    color: #FFD700;
    font-weight: bold;
    font-size: 0.85rem;
}

.room-sub {
    color: #888;
    font-size: 0.75rem;
    margin-top: 2px;
}

/* === Map Panel (GMCP Room.Map) === */
.map-type-label {
    color: #888;
    font-size: 0.65rem;
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
}

.map-grid {
    font-family: 'Courier New', Consolas, monospace;
    /* The map is a fixed-width grid; let the glyphs sit tight so a full
       world/space row (29 cells) fits the sidebar without wrapping. */
    /* font-size is auto-fitted in JS (fitMapPanel) so the whole grid fits the
       panel width; this is just the reference/fallback size. */
    font-size: 11px;
    line-height: 1.05;
    letter-spacing: 0;
    white-space: pre;
    overflow-x: hidden;   /* fitMapPanel scales the map to fit — no scrollbar */
    overflow-y: auto;
    text-align: center;   /* center .map-inner when the panel is wider than the map */
    max-height: 340px;
    margin: 0;
    padding: 6px;
    background: #0a0a0a;
    border: 1px solid #2b2b2b;
    border-radius: 4px;
    color: #cccccc;
}

/* Preferred per-cell grid (data.cells): each cell is a fixed 2ch box and each
   row is its own block, so the panel lines up exactly like the in-game map no
   matter how the browser sizes emoji vs. ASCII glyphs. */
.map-grid .map-inner {
    display: inline-block;   /* shrink-wrap to the map's natural width */
    text-align: left;        /* don't re-center the cells inside each row */
}
.map-grid .mrow {
    display: block;
    white-space: nowrap;
}
.map-grid .mc {
    display: inline-block;
    width: 2ch;
    text-align: center;
    vertical-align: top;
    overflow: hidden;
}

/* Legacy flat-row fallback: emoji overlays are double-width in the MUD terminal
   but get the browser's own width in a <pre>, throwing the grid off. Force each
   into a 2ch box (wrapped by wrapWideGlyphs() in custom_client.js). */
.map-grid .me {
    display: inline-block;
    width: 2ch;
    text-align: center;
    vertical-align: top;
    overflow: hidden;
}

/* Movement still works via the mobile #mobile-dir-bar (.dir-btn, styled below)
   and by typing; the desktop compass rose was replaced by the map panel. */
.dir-btn.available {
    color: #f1f1f1;
    border-color: #666;
    background-color: #333;
}

/* === Affects === */
.affects-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.affect-item {
    color: #ccc;
    font-size: 0.78rem;
    padding: 1px 0;
}

.no-data {
    color: #555;
    font-size: 0.75rem;
    font-style: italic;
}

/* === Here / Items (GMCP Room.Chars + Room.Items) === */
.room-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 180px;
    overflow-y: auto;
}

.room-entry {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: #ccc;
    padding: 1px 0;
    white-space: nowrap;
    overflow: hidden;
}

.room-entry .re-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Players stand out from mobs with a subtle accent bar. */
.room-entry.is-player {
    border-left: 2px solid #2e8bff;
    padding-left: 5px;
}

.room-entry.is-fighting .re-name {
    color: #ff6b6b;
}

.room-entry .re-count {
    color: #4ec9d6;   /* cyan [N] count prefix, matching the terminal */
    font-size: 0.78rem;
    flex: none;
}

.room-entry .re-fight {
    color: #ff4500;
    font-size: 0.72rem;
    flex: none;
}

/* Compact NPC health bar (only shown when hurt). */
.room-entry .re-hp-bg {
    flex: none;
    width: 34px;
    height: 5px;
    margin-left: auto;
    background: #2b2b2b;
    border: 1px solid #444;
    border-radius: 2px;
    overflow: hidden;
}

.room-entry .re-hp-fill {
    display: block;
    height: 100%;
    background: #cc3a3a;
}

/* === Opponent === */
#opponent-name {
    color: #FF4500;
    font-weight: bold;
    font-size: 0.85rem;
    margin-bottom: 4px;
}

#bar-opponent {
    background-color: #cc0000;
}

/* === Channel Log === */
#section-channels {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

#channel-tab-strip {
    display: flex;
    flex-wrap: wrap;          /* wrap to multiple rows so up to 8 tabs all fit */
    background-color: #161616;
    border-bottom: 1px solid #2b2b2b;
    flex-shrink: 0;
    scrollbar-width: none;
}

#channel-tab-strip::-webkit-scrollbar {
    display: none;
}

.ch-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #666;
    font-size: 0.72rem;
    padding: 6px 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
    position: relative;
    flex-shrink: 0;
}

.ch-tab:hover {
    color: #ccc;
}

.ch-tab.active {
    color: #ffcc00;
    border-bottom-color: #ffcc00;
}

/* Gear button at the end of the channel tab strip (opens the channel picker). */
.ch-tab.ch-config { color: #888; font-size: 0.9rem; }
.ch-tab.ch-config:hover { color: #ffcc00; }

/* Channel picker rows (in the ps-form overlay). */
/* Lay the channel checkboxes out in responsive columns so the picker isn't a
   giant vertical list that overflows the screen. */
#ch-pick-list, #ch-all-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 0 10px;
}
.ch-pick-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 2px;
    color: #f1f1f1;
    font-size: 0.85rem;
    cursor: pointer;
}
.ch-pick-row input { width: 16px; height: 16px; flex-shrink: 0; }
#drawer-ch-config {
    background: #2b2b2b;
    border: 1px solid #444;
    color: #ccc;
    border-radius: 4px;
    cursor: pointer;
    padding: 0 8px;
    margin-left: 6px;
}

.ch-unread {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #ffcc00;
    border-radius: 50%;
    margin-left: 3px;
    vertical-align: middle;
    margin-bottom: 1px;
}

#channel-log {
    flex: 1;
    overflow-y: auto;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
}

.ch-msg {
    font-size: 0.75rem;
    line-height: 1.5;
    word-break: break-word;
}

.ch-msg-time {
    color: #444;
    font-family: monospace;
    font-size: 0.7rem;
    margin-right: 4px;
    flex-shrink: 0;
}

/* === Chat Bubbles === */
.cb-row {
    display: flex;
    width: 100%;
    margin: 2px 0;
}
.cb-row.cb-you    { justify-content: flex-end; }
.cb-row.cb-other  { justify-content: flex-start; }
.cb-row.cb-system { justify-content: center; }

.cb-bubble {
    display: inline-flex;
    flex-direction: column;
    max-width: 85%;
    padding: 5px 9px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.06);
}
.cb-row.cb-you .cb-bubble    { border-bottom-right-radius: 2px; }
.cb-row.cb-other .cb-bubble  { border-bottom-left-radius: 2px; }
.cb-bubble[data-speaker] { cursor: pointer; }

.cb-bubble-system {
    max-width: 95%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.cb-speaker {
    font-size: 0.7rem;
    font-weight: bold;
    margin-bottom: 1px;
}
.cb-text {
    font-size: 0.8rem;
    line-height: 1.4;
    color: #e6e6e6;
    word-break: break-word;
    white-space: pre-wrap;
}
.cb-bubble-system .cb-text { color: #b0b0b0; font-size: 0.75rem; }
.cb-time {
    font-size: 0.6rem;
    color: #777;
    font-family: monospace;
    margin-top: 2px;
    align-self: flex-end;
}
.cb-row.cb-other .cb-time  { align-self: flex-start; }
.cb-row.cb-system .cb-time { align-self: center; }

/* Chat style toggle row in the popup-settings modal */
.chat-style-row {
    display: flex;
    gap: 18px;
    padding: 4px 12px;
    font-size: 0.9rem;
}
.chat-style-row label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

/* Speaker colour picker popup */
.speaker-color-popup {
    position: fixed;
    z-index: 1200;
    background: #1e1e1e;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 10px;
    width: 210px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
}
.scp-title {
    color: #ffcc00;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.scp-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}
.scp-swatch {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
}
.scp-swatch:hover { border-color: #fff; }
.scp-reset {
    width: 100%;
    padding: 6px;
    background: #4a4a4a;
    color: #f1f1f1;
    border: 1px solid #666;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}
.scp-reset:hover { background: #5a5a5a; }

/* Mobile drawer channel select */
#drawer-channel-select-wrap {
    padding: 8px 12px 4px;
}

#drawer-channel-select {
    width: 100%;
    background-color: #2b2b2b;
    color: #f1f1f1;
    border: 1px solid #444;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    outline: none;
    cursor: pointer;
}

#drawer-channel-select:focus {
    border-color: #ffcc00;
}

#drawer-channel-log {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 35vh;
    overflow-y: auto;
}

/* === Stats Panel === */
.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #333;
}

.stats-name {
    color: #FFD700;
    font-weight: bold;
    font-size: 0.95rem;
}

.stats-race {
    color: #aaa;
    font-size: 0.8rem;
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.stats-table td {
    padding: 2px 0;
}

.stats-section-row td {
    color: #ff8800;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    padding-top: 8px;
    padding-bottom: 2px;
    letter-spacing: 0.5px;
}

.stats-label {
    color: #888;
    width: 40%;
}

.stats-value {
    color: #f1f1f1;
    text-align: right;
    font-family: "Cascadia Code", "Fira Code", "Consolas", monospace;
}

/* === Action Bar === */
#action-bar {
    background-color: #1e1e1e;
    border-top: 1px solid #333;
    flex-shrink: 0;
}

#quick-actions {
    display: flex;
    gap: 4px;
    padding: 5px 8px 0;
    flex-wrap: wrap;
}

.action-btn {
    background-color: #2b2b2b;
    color: #ccc;
    border: 1px solid #444;
    padding: 3px 10px;
    cursor: pointer;
    font-size: 0.8rem;
    border-radius: 3px;
    font-family: monospace;
    transition: all 0.15s ease;
}

.action-btn:hover {
    background-color: #444;
    color: #ffcc00;
    border-color: #ffcc00;
}

.action-btn:active {
    background-color: #555;
}

/* === Command Input Bar === */
#command-bar {
    display: flex;
    padding: 5px 8px;
    gap: 6px;
    flex-shrink: 0;
}

#command-input {
    flex: 1;
    background-color: #2b2b2b;
    color: #f1f1f1;
    border: 1px solid #444;
    padding: 7px 10px;
    font-size: 16px;
    font-family: "Cascadia Code", "Fira Code", "Consolas", "Courier New", monospace;
    border-radius: 3px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#command-input:focus {
    border-color: #ffcc00;
    box-shadow: 0 0 0 1px rgba(255, 204, 0, 0.3);
}

/* Prevent mobile zoom on touch */
#command-bar,
#command-input {
    touch-action: manipulation;
}

#command-input::placeholder {
    color: #555;
}

/* Repeat mode toggle */
.repeat-btn {
    background-color: #2b2b2b;
    color: #666;
    border: 1px solid #444;
    padding: 7px 10px;
    cursor: pointer;
    border-radius: 3px;
    font-size: 1rem;
    line-height: 1;
    transition: all 0.15s ease;
}

.repeat-btn:hover {
    background-color: #3a3a3a;
    color: #aaa;
}

.repeat-btn.active {
    background-color: rgba(255, 204, 0, 0.15);
    color: #ffcc00;
    border-color: #ffcc00;
}

#command-send {
    background-color: #ffcc00;
    color: #121212;
    border: none;
    padding: 7px 16px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 3px;
    font-size: 15px;
    font-family: inherit;
    transition: background-color 0.15s;
}

#command-send:hover {
    background-color: #ffe066;
}

#command-send:active {
    background-color: #e6b800;
    transform: scale(0.97);
}

/* === Mobile Direction Bar === */
#mobile-dir-bar {
    display: none; /* shown via media query on mobile */
}

.dir-btn {
    background-color: #2b2b2b;
    color: #ccc;
    border: 1px solid #444;
    padding: 8px 0;
    flex: 1;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: bold;
    text-align: center;
    border-radius: 3px;
    transition: all 0.15s ease;
}

.dir-btn:hover {
    background-color: #3a3a3a;
    color: #ffcc00;
}

.dir-btn:active {
    background-color: #444;
    color: #ffcc00;
    transform: scale(0.95);
}

.drawer-toggle-btn {
    background-color: #ffcc00 !important;
    color: #121212 !important;
    font-weight: bold;
    border-color: #ffcc00 !important;
}

.drawer-toggle-btn:active {
    background-color: #e6b800 !important;
}

/* === Mobile Drawer === */
#mobile-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #1a1a1a;
    border-top: 2px solid #ffcc00;
    z-index: 200;
    max-height: 60vh;
    overflow-y: auto;
    transition: transform 0.3s ease;
}

#mobile-drawer.drawer-hidden {
    transform: translateY(100%);
}

#drawer-tabs {
    display: flex;
    border-bottom: 1px solid #333;
    position: sticky;
    top: 0;
    background-color: #1a1a1a;
    z-index: 1;
}

.drawer-tab {
    flex: 1;
    padding: 10px 4px;
    background: none;
    border: none;
    color: #666;
    font-size: 0.8rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.drawer-tab:hover {
    color: #ccc;
}

.drawer-tab.active {
    color: #ffcc00;
    border-bottom-color: #ffcc00;
}

.drawer-tab.has-unread {
    color: #ffcc00;
}

#btn-drawer.has-unread {
    background-color: #cc2200 !important;
    border-color: #cc2200 !important;
    color: #fff !important;
}

#drawer-content {
    padding: 12px;
    min-height: 80px;
}

#drawer-close {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #222;
    color: #888;
    border: none;
    border-top: 1px solid #333;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background-color 0.15s, color 0.15s;
}

#drawer-close:hover {
    background-color: #2b2b2b;
    color: #ffcc00;
}

/* === Fullscreen Mode === */
body.fullscreen-mode header,
body.fullscreen-mode .sidebar,
body.fullscreen-mode footer {
    display: none !important;
}

body.fullscreen-mode .content {
    height: 100vh;
}

body.fullscreen-mode #client-main {
    height: 100vh;
}

body.fullscreen-mode #site-container {
    height: 100vh;
}

/* === Desktop: keep the whole client within the viewport ===
   Without this, #client-main has no bounded height, so the channel log
   (and terminal) grow the page instead of scrolling inside their panels. */
@media (min-width: 769px) {
    body.client-page #site-container {
        height: 100vh;
        overflow: hidden;
    }
    body.client-page .content {
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }
    body.client-page #client-main {
        height: 100%;
        min-height: 0;
    }
}

/* === Mobile-only elements === */
.mobile-only {
    display: none;
}

/* === Responsive: auto-fullscreen on small screens === */
@media (max-width: 768px) {
    /* Auto-enter fullscreen on mobile */
    header, .sidebar, footer {
        display: none !important;
    }

    /* Drive every full-screen container from the REAL visible height
       (window.innerHeight → --app-height, updated on resize/rotate). vh/dvh are
       unreliable on mobile with a position:fixed body, which left content (and
       modal footers) off-screen on some phones. Fallbacks: 100dvh, then 100vh. */
    html, body {
        height: 100vh;
        height: 100dvh;
        height: var(--app-height, 100dvh);
        overflow: hidden;
        position: fixed;
        width: 100%;
    }

    .content {
        height: 100vh;
        /* dvh last so it wins: --app-height is captured once at load and goes
           stale when the URL bar changes the visible height. */
        height: var(--app-height, 100dvh);
        height: 100dvh;
    }

    #client-main {
        height: 100vh;
        /* dvh last so it wins: --app-height is captured once at load and goes
           stale when the URL bar changes the visible height. */
        height: var(--app-height, 100dvh);
        height: 100dvh;
    }

    #site-container {
        height: 100vh;
        /* dvh last so it wins: --app-height is captured once at load and goes
           stale when the URL bar changes the visible height. */
        height: var(--app-height, 100dvh);
        height: 100dvh;
    }

    /* Stop the terminal column from overflowing the screen.
       Desktop gets this via the @media (min-width: 769px) block above
       (.content and #client-main both get min-height: 0); mobile never did.
       Without it a flex item will not shrink below its content's intrinsic
       size, so #game-area kept the terminal's full height, pushed #action-bar
       past the bottom of #client-main, and overflow:hidden clipped everything
       after the direction buttons - the vitals bar and the command input were
       both rendered off-screen with no way to scroll to them. */
    body.client-page .content,
    body.client-page #client-main {
        min-height: 0;
    }

    #game-area,
    #terminal-container {
        min-height: 0;
    }

    /* Pin the client to the viewport.
       #site-container, .content and #client-main were each given the full
       viewport height independently, so any offset or box-model difference
       between them pushed the innermost one past the bottom of the screen -
       taking the vitals bar and the command input with it, with nothing to
       scroll to because html/body are overflow:hidden here.
       Anchoring #client-main to all four edges makes it exactly the viewport
       no matter what the ancestors compute to.  Nothing is meant to sit above
       it on mobile: header, .sidebar and footer are display:none, and
       index.php's only include (sidebar.html) is empty. */
    body.client-page #client-main {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
        /* Measured on a real device, 2026-09-22:
             viewport = 749   --app-height = 749px   #client-main rendered 806
           --app-height was CORRECT; 806 is 100vh, i.e. the large viewport with
           the URL bar hidden.  So the element was taking 100vh rather than the
           intended height, overhanging the visible area by the 57px URL bar -
           which is why the direction bar (first child of the overflow) showed
           and the vitals bar and command input did not, with html/body
           overflow:hidden leaving nothing to scroll to.
           dvh is the dynamic viewport unit: it tracks the URL bar, and being
           the last height declaration here it wins over the 100vh fallback.
           bottom:auto matters too - with top:0 AND bottom:0 a position:fixed
           element resolves against the layout viewport, which is the oversized
           806 again. */
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        min-height: 0;
    }

    /* Hide desktop sidebar + its resize handle on mobile */
    #game-sidebar,
    #sidebar-resizer {
        display: none !important;
    }

    /* Hide fullscreen button on mobile */
    #btn-fullscreen {
        display: none;
    }

    /* Reduce gap between toolbar buttons on mobile */
    #toolbar-right {
        gap: 4px;
    }

    /* Show mobile direction bar */
    #mobile-dir-bar {
        display: flex;
        gap: 3px;
        padding: 4px 6px;
        background-color: #1e1e1e;
        border-top: 1px solid #333;
    }

    /* Compact vitals bar on mobile */
    #vitals-char-info {
        display: none;
    }

    #vitals-bar {
        padding: 3px 8px;
        gap: 8px;
    }

    .vital-label {
        font-size: 0.65rem;
        min-width: 18px;
    }

    .vital-bar-bg {
        height: 10px;
    }

    .vital-value {
        display: none;
    }

    /* Hide quick actions on mobile (accessible via drawer) */
    #quick-actions {
        display: none;
    }

    /* Mobile toolbar - custom layout */
    #client-toolbar {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 6px 8px;
        gap: 4px;
        flex-wrap: nowrap;
    }

    #toolbar-left {
        display: flex;
        align-items: center;
        gap: 4px;
        order: 0;
    }

    #toolbar-right {
        display: flex;
        gap: 4px;
        flex: 1;
        align-items: center;
        flex-wrap: nowrap;
        order: 1;
    }

    #client-title {
        display: inline-block !important;
        font-size: 0.85rem;
        color: #ffcc00;
        font-weight: bold;
    }

    /* Connection status as LED indicator circle (first) */
    #connection-status {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        padding: 0 !important;
        display: inline-block !important;
        flex-shrink: 0;
        font-size: 0 !important;
        order: 1;
        border: none;
    }

    /* LED status colors - bright and vibrant */
    #connection-status.status-disconnected {
        background-color: #ff3333 !important;
        box-shadow: 0 0 8px rgba(255, 51, 51, 0.6);
    }

    #connection-status.status-connecting {
        background-color: #ffaa00 !important;
        box-shadow: 0 0 8px rgba(255, 170, 0, 0.6);
    }

    #connection-status.status-connected {
        background-color: #33ff33 !important;
        box-shadow: 0 0 8px rgba(51, 255, 51, 0.6);
    }

    .toolbar-btn {
        padding: 4px 8px;
        font-size: 0.8rem;
        min-width: auto;
        white-space: nowrap;
    }

    /* Toolbar button order */
    #btn-reconnect {
        order: 2;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        padding: 0 !important;
        font-size: 0;
    }

    #btn-reconnect::before {
        content: '↻';
        font-size: 0.9rem;
        display: block;
    }

    #btn-home {
        order: 3;
        display: inline-block !important;
    }

    #btn-font-down {
        order: 4;
        display: inline-block !important;
    }

    #font-size-label {
        order: 5;
        font-size: 0.75rem;
        min-width: 20px;
        text-align: center;
        color: #aaa;
        display: inline-block !important;
    }

    #btn-font-up {
        order: 6;
        display: inline-block !important;
    }

    /* Tools button (automations) goes to the right */
    #automations-wrap {
        order: 7;
        margin-left: auto;
        flex-shrink: 0;
    }

    #btn-automations {
        padding: 4px 8px;
        font-size: 0.8rem;
    }

    /* Hide buttons not in mobile toolbar */
    #btn-fullscreen,
    #btn-triggers,
    #btn-aliases,
    #btn-timers,
    #btn-popups,
    #btn-forget-login {
        display: none !important;
    }

    /* Absolutely hide disconnect button on mobile */
    #btn-disconnect {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    /* Hide the text version of connection status (we show the circle indicator) */
    #toolbar-left #connection-status {
        display: inline-block !important;
    }

    #command-input {
        font-size: 16px !important;
    }

    #command-bar {
        padding: 4px 6px;
    }

    .mobile-only {
        display: inline-block !important;
    }

    .desktop-only {
        display: none !important;
    }
}

/* === Search bar overlay (Ctrl+Shift+F) === */
.xterm-search-bar {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 100;
    background-color: #1e1e1e;
    border: 1px solid #444;
    padding: 6px;
    border-radius: 3px;
    display: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.xterm-search-bar.visible {
    display: flex;
    gap: 4px;
}

.xterm-search-bar input {
    background-color: #2b2b2b;
    color: #f1f1f1;
    border: 1px solid #555;
    padding: 4px 8px;
    font-family: monospace;
    font-size: 0.85rem;
    outline: none;
    border-radius: 2px;
}

.xterm-search-bar input:focus {
    border-color: #ffcc00;
}

.xterm-search-bar button {
    background-color: #333;
    color: #f1f1f1;
    border: 1px solid #555;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 0.85rem;
    border-radius: 2px;
    transition: background-color 0.15s;
}

.xterm-search-bar button:hover {
    background-color: #555;
    color: #ffcc00;
}

/* === Save Credentials Overlay === */
#save-creds-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
}

.save-creds-box {
    background-color: #1e1e1e;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 24px;
    max-width: 340px;
    width: 90%;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.save-creds-title {
    color: #FFD700;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 12px;
}

.save-creds-box p {
    color: #ccc;
    font-size: 0.9rem;
    margin-bottom: 20px;
    line-height: 1.4;
}

.save-creds-box strong {
    color: #ffcc00;
}

.save-creds-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.save-creds-btn {
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.15s;
}

.save-creds-yes {
    background-color: #ffcc00;
    color: #121212;
}

.save-creds-yes:hover {
    background-color: #ffe066;
}

.save-creds-no {
    background-color: #333;
    color: #aaa;
    border: 1px solid #555;
}

.save-creds-no:hover {
    background-color: #444;
    color: #f1f1f1;
}

/* === Trigger / Alias / Timer Modals === */
#trigger-modal,
#alias-modal,
#timer-modal,
#hotbar-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fix: apply to all three modals, not just #trigger-modal */
.trigger-modal-hidden {
    display: none !important;
}

#trigger-modal-box,
#alias-modal-box,
#timer-modal-box,
#hotbar-modal-box {
    background: #1e1e1e;
    border: 1px solid #444;
    border-radius: 6px;
    width: 560px;
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,204,0,0.08);
}

#trigger-modal-header,
#alias-modal-header,
#timer-modal-header,
#hotbar-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #2b2b2b;
    border-bottom: 1px solid #444;
    flex-shrink: 0;
}

#trigger-modal-title,
#alias-modal-title,
#timer-modal-title,
#hotbar-modal-title {
    color: #ffcc00;
    font-weight: bold;
    font-size: 1rem;
}

#trigger-modal-close,
#alias-modal-close,
#timer-modal-close,
#hotbar-modal-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

#trigger-modal-close:hover,
#alias-modal-close:hover,
#timer-modal-close:hover,
#hotbar-modal-close:hover {
    color: #fff;
}

#trigger-modal-body,
#alias-modal-body,
#timer-modal-body,
#hotbar-modal-body-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

/* Hotbar editor rows get a little horizontal breathing room */
#hotbar-modal-body {
    padding: 8px 16px;
}

#trigger-modal-footer,
#alias-modal-footer,
#timer-modal-footer {
    padding: 10px 16px;
    border-top: 1px solid #333;
    flex-shrink: 0;
}

/* === Joystick Modal === */
#joystick-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
}

#joystick-modal-box {
    background: #1e1e1e;
    border: 1px solid #444;
    border-radius: 6px;
    width: 560px;
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,204,0,0.08);
}

#joystick-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #2b2b2b;
    border-bottom: 1px solid #444;
    flex-shrink: 0;
}

#joystick-modal-title {
    color: #ffcc00;
    font-weight: bold;
    font-size: 1rem;
}

#joystick-modal-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

#joystick-modal-close:hover {
    color: #fff;
}

#joystick-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    -webkit-user-select: none;
    user-select: none;
}

#joystick-modal-body input[type="range"] {
    width: 100%;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    cursor: pointer;
}

#btn-add-trigger,
#btn-add-alias,
#btn-add-timer {
    background: #2b2b2b;
    border: 1px solid #555;
    color: #ffcc00;
    padding: 7px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background-color 0.15s;
}

#btn-add-trigger:hover,
#btn-add-alias:hover,
#btn-add-timer:hover {
    background: #333;
}

/* Trigger list rows */
.trigger-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-bottom: 1px solid #2b2b2b;
}

.trigger-row:last-child {
    border-bottom: none;
}

.trigger-row:hover {
    background: #222;
}

.trigger-row-info {
    flex: 1;
    min-width: 0;
}

.trigger-row-name {
    color: #f1f1f1;
    font-size: 0.85rem;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trigger-row-pattern {
    color: #888;
    font-size: 0.75rem;
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trigger-toggle {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: #ffcc00;
    transition: all 0.15s;
}

.trigger-btn {
    background: #2b2b2b;
    border: 1px solid #444;
    color: #ccc;
    padding: 4px 9px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: background-color 0.15s;
}

.trigger-btn:hover {
    background: #383838;
    color: #fff;
}

.trigger-btn-delete {
    color: #cc4444;
    border-color: #553333;
}

.trigger-btn-delete:hover {
    color: #ff6666;
    background: #3a2020;
}

.trigger-no-triggers {
    color: #555;
    font-size: 0.85rem;
    padding: 24px 16px;
    text-align: center;
    line-height: 1.6;
}

/* Trigger add/edit form */
.trigger-form-hidden {
    display: none;
}

#trigger-form,
#alias-form,
#timer-form {
    padding: 12px 16px;
    border-top: 1px solid #333;
    background: #161616;
}

#trigger-form label,
#alias-form label,
#timer-form label {
    display: block;
    color: #aaa;
    font-size: 0.78rem;
    margin-bottom: 4px;
    margin-top: 10px;
}

#trigger-form label:first-child,
#alias-form label:first-child,
#timer-form label:first-child {
    margin-top: 0;
}

#trigger-form input[type="text"],
#trigger-form textarea,
#alias-form input[type="text"],
#alias-form textarea,
#timer-form input[type="text"],
#timer-form input[type="number"],
#timer-form textarea {
    width: 100%;
    box-sizing: border-box;
    background: #2b2b2b;
    border: 1px solid #444;
    color: #f1f1f1;
    padding: 7px 9px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
}

#trigger-form input[type="text"]:focus,
#trigger-form textarea:focus,
#alias-form input[type="text"]:focus,
#alias-form textarea:focus,
#timer-form input[type="text"]:focus,
#timer-form input[type="number"]:focus,
#timer-form textarea:focus {
    outline: none;
    border-color: #ffcc00;
}

#trigger-form textarea,
#alias-form textarea,
#timer-form textarea {
    font-family: monospace;
    min-height: 72px;
}

.trigger-case-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.trigger-case-row input {
    accent-color: #ffcc00;
}

.trigger-case-row label {
    color: #aaa;
    font-size: 0.78rem;
    margin: 0;
    cursor: pointer;
}

.trigger-form-hint {
    color: #666;
    font-size: 0.72rem;
    margin-top: 3px;
}

.trigger-form-buttons {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    justify-content: flex-end;
}

.trigger-form-save {
    background: #3a5a1a;
    border: 1px solid #5a8a2a;
    color: #8ae234;
    padding: 7px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}

.trigger-form-save:hover {
    background: #4a6e22;
}

.trigger-form-cancel {
    background: #2b2b2b;
    border: 1px solid #555;
    color: #aaa;
    padding: 7px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}

.trigger-form-cancel:hover {
    background: #333;
    color: #fff;
}

.trigger-form-error {
    color: #ef2929;
    font-size: 0.78rem;
    margin-top: 8px;
    display: none;
}

/* Mobile: full-screen trigger/alias/timer modals */
@media (max-width: 768px) {
    #trigger-modal,
    #alias-modal,
    #timer-modal,
    #hotbar-modal {
        align-items: flex-start;
        justify-content: flex-start;
        /* Pin the overlay to the TOP of the screen and size it to the REAL
           visible height. On mobile, `position:fixed; inset:0` + dvh is
           unreliable (especially under `position:fixed` html/body), so JS
           feeds the true `window.innerHeight` into --app-height. Override the
           inset bottom so `height` takes effect. Fallbacks: 100dvh, then 100vh. */
        bottom: auto;
        height: 100vh;
        height: 100dvh;
        height: var(--app-height, 100dvh);
    }

    #trigger-modal-box,
    #alias-modal-box,
    #timer-modal-box,
    #hotbar-modal-box {
        width: 100%;
        max-width: 100%;
        height: 100%;          /* fill the overlay = the real visible height */
        max-height: 100%;
        border-radius: 0;
        border: none;
    }

    #trigger-modal-header,
    #alias-modal-header,
    #timer-modal-header,
    #hotbar-modal-header {
        padding: 10px 14px;
    }

    #trigger-modal-close,
    #alias-modal-close,
    #timer-modal-close,
    #hotbar-modal-close {
        font-size: 1.6rem;
        padding: 0 6px;
    }

    .trigger-row {
        padding: 10px 14px;
        min-height: 44px;
    }

    .trigger-toggle {
        width: 22px;
        height: 22px;
    }

    .trigger-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
        min-height: 36px;
    }
}

/* === Long-Press Copy Popup === */
#longpress-popup {
    position: fixed;
    z-index: 2000;
    background: #1e1e1e;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 10px;
    width: 300px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
}

#longpress-input {
    width: 100%;
    box-sizing: border-box;
    background: #2b2b2b;
    border: 1px solid #ffcc00;
    color: #f1f1f1;
    padding: 7px 9px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: monospace;
    margin-bottom: 8px;
}

#longpress-input:focus {
    outline: none;
}

.longpress-btn-row {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.longpress-btn {
    padding: 6px 14px;
    border-radius: 4px;
    border: 1px solid #555;
    cursor: pointer;
    font-size: 0.82rem;
    min-height: 36px;
}

.longpress-copy {
    background: #3a5a1a;
    border-color: #5a8a2a;
    color: #8ae234;
}

.longpress-copy:hover {
    background: #4a6e22;
}

.longpress-close {
    background: #2b2b2b;
    color: #aaa;
}

.longpress-close:hover {
    background: #383838;
    color: #fff;
}

/* === Timer status indicator === */
.timer-status {
    font-size: 0.72rem;
    font-weight: bold;
    flex-shrink: 0;
    white-space: nowrap;
}

.timer-status-running {
    color: #8ae234;
}

.timer-status-stopped {
    color: #555;
}

.timer-start-btn {
    background: #3a5a1a;
    border: 1px solid #5a8a2a;
    color: #8ae234;
    padding: 4px 9px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.timer-start-btn:hover {
    background: #4a6e22;
}

.timer-stop-btn {
    background: #5a1a1a;
    border: 1px solid #8a2a2a;
    color: #ef2929;
    padding: 4px 9px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.timer-stop-btn:hover {
    background: #6e2222;
}

.timer-type-row {
    display: flex;
    gap: 16px;
    margin-top: 6px;
}

.timer-type-row label {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #aaa;
    font-size: 0.78rem;
    margin: 0 !important;
    cursor: pointer;
}

.timer-type-row input[type="radio"] {
    accent-color: #ffcc00;
}

/* === Automations submenu (mobile Tools button) === */
#automations-wrap {
    position: relative;
}

.automations-menu-hidden {
    display: none;
}

#automations-menu {
    position: fixed;
    top: 36px;
    right: 8px;
    background: #1e1e1e;
    border: 1px solid #555;
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.7);
    z-index: 900;
    min-width: 160px;
    overflow: hidden;
}

.automations-item {
    display: block;
    width: 100%;
    padding: 13px 18px;
    background: none;
    border: none;
    border-bottom: 1px solid #2b2b2b;
    color: #f1f1f1;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

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

.automations-item:hover,
.automations-item:active {
    background: #2b2b2b;
    color: #ffcc00;
}

/* === Modal help button & panel === */
.modal-header-btns {
    display: flex;
    align-items: center;
    gap: 4px;
}

.modal-help-btn {
    background: none;
    border: 1px solid #555;
    color: #888;
    font-size: 0.8rem;
    font-weight: bold;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.15s, border-color 0.15s;
}

/* "+" add button in the modal header — always visible, so the action is
   reachable even if the footer Add button is off-screen on mobile. */
.modal-add-btn {
    background: #FFA500;
    border: 1px solid #FFA500;
    color: #161616;
    font-size: 1.1rem;
    font-weight: bold;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.modal-add-btn:hover { background: #ffcc00; border-color: #ffcc00; }

.modal-help-btn:hover {
    color: #ffcc00;
    border-color: #ffcc00;
}

.modal-help-btn.active {
    color: #ffcc00;
    border-color: #ffcc00;
    background: rgba(255, 204, 0, 0.1);
}

.modal-help-panel {
    background: #161616;
    border-bottom: 1px solid #2b2b2b;
    padding: 14px 16px;
    font-size: 0.82rem;
    line-height: 1.6;
    color: #bbb;
}

.modal-help-hidden {
    display: none;
}

.modal-help-panel p {
    margin: 0 0 8px;
}

.modal-help-panel p:last-child {
    margin-bottom: 0;
}

.modal-help-panel code {
    background: #2b2b2b;
    color: #ffcc00;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.85em;
}

.modal-help-note {
    color: #888;
    font-size: 0.78rem;
    padding-top: 6px;
    border-top: 1px solid #2b2b2b;
    margin-top: 8px !important;
}

/* === Channel Popup Overlay === */
#popup-container {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    z-index: 10;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ch-popup-card {
    pointer-events: auto;
    padding: 4px 10px;
    border-radius: 3px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 150ms ease;
    max-width: 100%;
    overflow: hidden;
}

.ch-popup-label {
    display: block;
    font-size: 10px;
    color: #aaaaaa;
    margin-bottom: 1px;
    font-family: monospace;
}

.ch-popup-msg {
    display: block;
    font-size: 13px;
    color: #ffffff;
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === Combo History Bar === */
#combo-bar {
    padding: 4px 12px;
    text-align: center;
    font-family: monospace;
    font-weight: bold;
    font-size: 13px;
    background: #1e1e1e;
    color: #FFD700;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    flex-shrink: 0;
    transition: opacity 400ms ease;
}

#combo-bar.combo-break {
    background: #cc0000;
    color: #ffffff;
    border-color: #aa0000;
}

/* === Popup Settings Modal === */
#popup-modal-box {
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 6px;
    width: 360px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

#popup-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #333;
    background: #252525;
    flex-shrink: 0;
}

#popup-modal-title {
    font-weight: bold;
    color: #f1f1f1;
    font-size: 1rem;
}

#popup-modal-body {
    padding: 12px 16px;
    overflow-y: auto;
    flex: 1;
}

.popup-channel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #2b2b2b;
    color: #f1f1f1;
    font-size: 0.9rem;
}

.popup-channel-row:last-child {
    border-bottom: none;
}

.popup-fade-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    color: #aaa;
    font-size: 0.85rem;
}

.popup-fade-row input {
    width: 60px;
    background: #2b2b2b;
    border: 1px solid #444;
    color: #f1f1f1;
    padding: 4px 6px;
    border-radius: 3px;
    font-size: 0.9rem;
}

/* === Joystick (Mobile Only) === */
#joystick-container {
    position: absolute;
    bottom: 170px;
    left: 10px;
    z-index: 1000;
    touch-action: manipulation;
}

#joystick-canvas {
    width: 200px;
    height: 200px;
    opacity: 0.3;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/* Prevent command input from opening keyboard during joystick use */
@media (max-width: 768px) {
    #command-input:focus {
        outline: none;
    }
}

/* ===== Profile / Character Select Screen ===== */
#client-main { position: relative; }
#profile-screen {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #121212;
  padding: 24px;
  overflow-y: auto;
}
#profile-screen.profile-hidden { display: none; }
.ps-panel {
  width: 100%;
  max-width: 380px;
  background: #161616;
  border: 1px solid #2b2b2b;
  border-radius: 14px;
  padding: 22px 20px;
  font-family: inherit;
}
.ps-eyebrow { text-align: center; font-size: 12px; letter-spacing: 2px; color: #FFA500; text-transform: uppercase; }
.ps-title { text-align: center; font-size: 19px; font-weight: 600; color: #FFD700; margin-top: 4px; }
.ps-hint { text-align: center; font-size: 12px; color: #888; margin: 6px 0 18px; }
.ps-card {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; margin-bottom: 10px;
  background: #1e1e1e; border: 1px solid #2b2b2b; border-radius: 10px;
  cursor: pointer;
}
.ps-card.active { border-color: #FFA500; }
.ps-card:hover { border-color: #FFA500; }
.ps-dot { width: 10px; height: 10px; border-radius: 50%; background: #444; flex: none; }
.ps-card.active .ps-dot { background: #33ff33; box-shadow: 0 0 6px #33ff33; }
.ps-info { flex: 1; min-width: 0; }
.ps-name { font-size: 15px; font-weight: 600; color: #f5f5f5; }
.ps-name .ps-label { font-size: 11px; color: #FFA500; font-weight: 400; }
.ps-sub { font-size: 11px; color: #777; margin-top: 2px; }
.ps-iconbtn { background: transparent; border: none; color: #aaa; font-size: 15px; padding: 4px 6px; cursor: pointer; }
.ps-iconbtn:hover { color: #FFD700; }
.ps-add {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; background: transparent; border: 1px dashed #FFA500; border-radius: 10px;
  color: #FFD700; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.ps-foot { text-align: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid #2b2b2b; }
.ps-guest { font-size: 13px; color: #888; background: none; border: none; cursor: pointer; font-family: inherit; }
.ps-guest:hover { color: #FFD700; }
/* Add/edit form overlay */
.ps-form-overlay {
  position: absolute; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.6); padding: 24px;
}
.ps-form { width: 100%; max-width: 340px; max-height: 85vh; overflow-y: auto; background: #1e1e1e; border: 1px solid #2b2b2b; border-radius: 12px; padding: 20px; }
.ps-form h3 { color: #FFD700; margin: 0 0 14px; font-size: 16px; }
.ps-form label { display: block; font-size: 12px; color: #aaa; margin: 10px 0 4px; }
.ps-form input { width: 100%; box-sizing: border-box; padding: 9px 10px; background: #121212; border: 1px solid #333; border-radius: 7px; color: #f5f5f5; font-size: 14px; font-family: inherit; }
.ps-form-btns { display: flex; gap: 10px; margin-top: 18px; }
.ps-form-btns button { flex: 1; padding: 10px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; border: 1px solid #2b2b2b; }
.ps-save { background: #FFA500; color: #161616; border-color: #FFA500; }
.ps-cancel { background: transparent; color: #aaa; }
.ps-err { color: #FF4500; font-size: 12px; margin-top: 10px; min-height: 14px; }