@font-face {
    font-family: 'OryxSimplex';
    src: url('/game-data/oryx-simplex.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

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

html, body {
    background: #21181e;
    color: #e0d8c8;
    font-family: 'OryxSimplex', 'Segoe UI', Tahoma, sans-serif;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0; left: 0;
    touch-action: none;
    -webkit-overflow-scrolling: none;
    overscroll-behavior: none;
}

.screen { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
/* Top-anchor the login / char-select screens with a small breathing-room
   pad. Vertical centering left ~30% of empty space above the login box
   on tall desktop monitors and also clipped tall char-select content
   above the viewport — flex-start fixes both. The min-height + auto
   margin combo still vertically centers when the content is shorter
   than the viewport on small phones. */
.screen.active { display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 40px 16px; }
/* body has touch-action: none for the game canvas. The login + character
   select screens need to scroll on mobile, so re-enable vertical pan and
   momentum scrolling for them specifically. */
#login-screen.active, #charselect-screen.active {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

/* Login */
.login-box, .charselect-box {
    background: #2a2030;
    border: 2px solid #4a3a50;
    border-radius: 8px;
    padding: 40px;
    width: 380px;
    text-align: center;
}
.login-box h1 { font-size: 36px; color: #c8a86e; margin-bottom: 4px; letter-spacing: 2px; }
.subtitle { color: #887868; margin-bottom: 24px; font-size: 14px; }
/* Brand logo — pixel-art icon used in place of the wordmark text on the
   login screen, char-select header, and realm transition overlay. The
   pixelated render mode keeps the chunky pixels crisp at any size. The
   subtle drop-shadow gives the same warm glow the old letter-spaced
   #transition-title had, so the brand reads as the same "OpenRealm"
   regardless of which surface it lands on. */
.brand-logo {
    display: block;
    width: 240px;
    max-width: 80%;
    height: auto;
    margin: 0 auto 12px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 0 12px rgba(200, 168, 110, 0.35));
}
.brand-logo-compact {
    width: 180px;
    margin: 0 auto 16px;
}
.form-group { margin-bottom: 16px; text-align: left; }
.form-group label { display: block; margin-bottom: 4px; font-size: 13px; color: #a89888; }
.form-group input, .form-group select {
    width: 100%;
    padding: 10px 12px;
    background: #1a1218;
    border: 1px solid #3a2a38;
    border-radius: 4px;
    color: #e0d8c8;
    font-size: 14px;
    outline: none;
}
.form-group input:focus, .form-group select:focus { border-color: #c8a86e; }
button {
    width: 100%;
    padding: 12px;
    background: #c8a86e;
    color: #1a1218;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
}
button:hover { background: #dab87e; }
button:disabled { background: #5a4a3a; color: #887868; cursor: default; }
button.secondary { background: #3a2a38; color: #a89888; margin-top: 8px; }
button.secondary:hover { background: #4a3a48; }
.error { color: #e85050; font-size: 13px; margin-top: 12px; min-height: 18px; }
.register-link { font-size: 13px; color: #887868; margin-top: 12px; }
.register-link a { color: #c8a86e; text-decoration: none; }
.register-link a:hover { text-decoration: underline; }
/* Desktop-client download nudge above the discord row. Same border styling
   so the two links sit visually together as a "external links" footer. */
.desktop-link {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #3a2a38;
    text-align: center;
    font-size: 13px;
    color: #887868;
}
.desktop-link a {
    color: #c8a86e;
    text-decoration: none;
    margin-left: 6px;
    transition: color 0.2s;
}
.desktop-link a:hover { color: #e0c898; }
/* Discord row directly under desktop-link — drop its top border since
   .desktop-link now owns the divider. */
.desktop-link + .discord-link { margin-top: 8px; padding-top: 0; border-top: none; }
.discord-link { margin-top: 20px; padding-top: 16px; border-top: 1px solid #3a2a38; }
.discord-link a { display: inline-flex; align-items: center; gap: 8px; color: #7289da; text-decoration: none; font-size: 13px; transition: color 0.2s; }
.discord-link a:hover { color: #99aab5; }
.discord-link svg { flex-shrink: 0; }

/* Character Select */
.charselect-box { width: 640px; max-height: 92vh; overflow-y: auto; padding: 32px; }
.charselect-box h2 { color: #c8a86e; margin-bottom: 20px; }
.charselect-box h3 { color: #a89888; font-size: 15px; margin: 16px 0 10px; }
.charselect-tabs {
    display: flex; gap: 0; margin-bottom: 18px; border-bottom: 2px solid #3a2a38;
}
.tab-btn {
    flex: 1; padding: 14px 16px; background: transparent; border: none;
    color: #887868; font-size: 15px; font-weight: 600; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}
.tab-btn:hover { color: #c8a86e; }
.tab-btn.active { color: #c8a86e; border-bottom-color: #c8a86e; }
/* Inner scroll regions: capped on desktop (so the box doesn't get unwieldy),
   but on mobile the parent .charselect-box is the single scroll container —
   nested scroll caps make it nearly impossible to drag-scroll. */
#graveyard-list { max-height: 360px; overflow-y: auto; margin-bottom: 14px; }
#graveyard-list .char-card { cursor: default; border-color: #3a2030; }
#graveyard-list .char-card:hover { border-color: #5a3040; }
#graveyard-list .char-card .char-name { color: #a04040; }
.grave-date { font-size: 11px; color: #804040; margin-top: 4px; }
.grave-equip { display: flex; gap: 4px; margin-top: 4px; }
.grave-equip-slot {
    width: 24px; height: 24px; background: #2a2030; border: 1px solid #3a2a38;
    border-radius: 3px; image-rendering: pixelated; display: flex;
    align-items: center; justify-content: center; overflow: hidden;
}
.grave-equip-slot img { width: 100%; height: 100%; image-rendering: pixelated; }
#char-list { max-height: 320px; overflow-y: auto; margin-bottom: 14px; }
.char-actions { display: flex; gap: 10px; margin-bottom: 10px; }
.char-actions button { flex: 1; padding: 14px; font-size: 15px; }
button.danger { background: #a04040; color: #fff; }
button.danger:hover { background: #b05050; }
button.danger:disabled { background: #5a3a3a; color: #887868; }
button.small { padding: 8px 14px; font-size: 13px; width: auto; margin: 0; }
.char-create { border-top: 1px solid #3a2a38; padding-top: 12px; }
#class-picker {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 6px; margin-bottom: 12px;
}
.class-option {
    padding: 10px 6px; text-align: center;
    background: #1a1218; border: 2px solid #3a2a38;
    border-radius: 4px; cursor: pointer;
    font-size: 12px; color: #a89888;
    transition: border-color 0.15s;
    min-height: 44px;
    display: flex; align-items: center; justify-content: center;
}
.class-option:hover { border-color: #6a5a68; }
.class-option.selected { border-color: #c8a86e; color: #e0d8c8; background: #2a2030; }
.password-section {
    border-top: 1px solid #3a2a38; padding-top: 12px; margin-top: 12px;
}
.password-section summary {
    color: #887868; font-size: 14px; cursor: pointer; margin-bottom: 10px;
    padding: 6px 0;
}
.password-section summary:hover { color: #c8a86e; }
.password-section .form-group { margin-bottom: 8px; }
.password-section input { padding: 9px 12px; font-size: 14px; }
#pw-status { font-size: 12px; min-height: 14px; }
#pw-status.success { color: #40a040; }
.chest-section {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid #3a2a38; padding-top: 14px; margin-top: 14px;
    font-size: 14px; color: #887868;
}
.char-card {
    background: #1a1218;
    border: 2px solid #3a2a38;
    border-radius: 6px;
    padding: 16px 18px;
    margin-bottom: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: border-color 0.15s, background 0.15s;
}
.char-card:hover { border-color: #6a5a68; }
.char-card.selected { border-color: #c8a86e; background: #2a2030; }
.char-card .char-icon {
    width: 52px; height: 52px;
    background: #2a2030;
    border-radius: 4px;
    image-rendering: pixelated;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    font-size: 24px;
    flex-shrink: 0;
}
.char-card .char-info { text-align: left; flex: 1; min-width: 0; }
.char-card .char-name { font-weight: 600; font-size: 16px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.char-card .char-level { font-size: 12px; color: #aa8844; font-weight: normal; letter-spacing: 0.5px; }
.char-card .char-details { font-size: 13px; color: #887868; margin-top: 4px; }
.char-card .char-uuid { font-size: 10px; color: #665848; margin-top: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Game */
#game-screen { flex-direction: column; }
#game-canvas-container {
    width: 100%; height: 100%;
    position: absolute;
    top: 0; left: 0;
    z-index: 0;
}
#game-canvas-container canvas {
    width: 100% !important;
    height: 100% !important;
    image-rendering: pixelated;
}

/* HUD */
#hud {
    position: absolute;
    top: 10px; right: 10px; bottom: 10px;
    width: 300px;
    pointer-events: auto;
    z-index: 10;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}
#minimap-container {
    width: 100%;
    aspect-ratio: 1;
    margin-bottom: 4px;
    background: #0a080c;
    border: 1px solid #3a2a38;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    cursor: crosshair;
}
#minimap-canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }

/* Difficulty + account-fame badges row. Lives INSIDE the HUD column above
   the minimap — they share HUD width so the minimap gets the full HUD
   horizontal space and there's no crowding. Mobile overrides below lift
   them back out as compact pills next to the relocated minimap. */
#hud-badges {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 6px;
}
/* Difficulty icon — compact pill, only shown when difficulty > 0 */
#difficulty-icon {
    flex: 0 0 auto;
    height: 32px;
    min-width: 56px;
    padding: 0 8px;
    border: 1px solid #a04040;
    border-radius: 4px;
    background: rgba(180, 60, 60, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    font-family: monospace;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    line-height: 1;
}
#difficulty-skull { font-size: 16px; line-height: 1; }
#difficulty-value { font-size: 11px; font-weight: bold; }

/* Account fame badge — lifetime fame banked from dead characters. Flex-1
   so it takes the remaining HUD-row width next to the difficulty pill. */
#account-fame-display {
    flex: 1 1 auto;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #c8a86e;
    border-radius: 4px;
    background: rgba(50, 38, 24, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    font-family: 'OryxSimplex', monospace;
    color: #ffd86b;
    text-shadow: 1px 1px 2px #000;
    line-height: 1;
}
#account-fame-display .afd-icon {
    font-size: 14px;
    color: #ffd86b;
}
#account-fame-display .afd-value {
    font-size: 13px;
    font-weight: 700;
    color: #ffefb0;
    letter-spacing: 0.3px;
}
#account-fame-display .afd-label {
    font-size: 9px;
    color: #c8a86e;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
#hud-bars { margin-bottom: 8px; }
.bar-container {
    background: #1a1218;
    border: 1px solid #3a2a38;
    border-radius: 3px;
    height: 26px;
    margin-bottom: 4px;
    position: relative;
    overflow: hidden;
}
.bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bar span {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 1px 1px 1px #000;
    position: absolute;
    width: 100%;
    text-align: center;
}
.bar.hp { background: #c04040; width: 100%; }
.bar.mp { background: #4060c0; width: 100%; }
.bar.xp { background: #40a040; width: 0%; }

#stats-panel {
    background: #1a1218cc;
    border: 1px solid #3a2a38;
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 10px;
    margin-bottom: 8px;
    /* 3 cols × 2 rows — matches the panel.hud.equipment_with_stats.stats
     * rect's 114×32 wide aspect (228×64 at 2x display scale). */
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 2px 4px;
}
.stat-row {
    display: flex; align-items: baseline; gap: 2px;
    white-space: nowrap; cursor: help;
    font-size: 10px;
    overflow: hidden;
}
.stat-label { color: #887868; font-size: 9px; flex: 0 0 auto; }
.stat-value { color: #e0d8c8; font-weight: 600; flex: 0 0 auto; }
.stat-bonus { font-weight: 600; font-size: 9px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: clip; }

#inventory-panel {
    background: #1a1218cc;
    border: 1px solid #3a2a38;
    border-radius: 4px;
    padding: 8px;
    position: relative;
    z-index: 10;
}
#equip-label, #inv-label {
    font-size: 10px;
    color: #887868;
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
#equip-slots {
    border-bottom: 2px solid #4a3a50;
    padding-bottom: 6px;
    margin-bottom: 6px;
}
#equip-slots .inv-slot {
    background: #2a2838;
    border-color: #4a3a58;
}
.slot-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-bottom: 4px;
}
.inv-slot {
    width: 56px; height: 56px;
    background: #2a2030;
    border: 2px solid #3a2a38;
    border-radius: 3px;
    image-rendering: pixelated;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    cursor: pointer;
    transition: border-color 0.1s;
}
.inv-slot:hover { border-color: #6a5a68; }
.inv-slot.selected { border-color: #c8a86e; background: #3a2a40; }
.inv-slot.trade-selected { border-color: #40c040; background: #1a3018; box-shadow: 0 0 6px rgba(64,192,64,0.4); }
.inv-slot.loot-slot { background: #1a2018; pointer-events: auto !important; }
.inv-slot img, .inv-slot canvas { width: 40px; height: 40px; image-rendering: pixelated; pointer-events: none; }
.inv-slot .slot-label {
    position: absolute; bottom: 1px; right: 2px;
    font-size: 8px; color: #887868;
}
/* Hide slot label when the slot contains an item (has an img or canvas child) */
.inv-slot:has(img) .slot-label,
.inv-slot:has(canvas) .slot-label { display: none; }
.inv-slot .item-tier {
    position: absolute; top: 1px; left: 2px;
    font-size: 8px; font-weight: bold;
    pointer-events: none;
}
.inv-slot .slot-label { pointer-events: none; }

/* Inventory page tabs (Main / Backpack) drawn in the atlas inv_only panel's
   top header strip. Built by ui-widgets._buildInvPageTabs; tapping switches
   the visible 20-slot page, and the drag system relocates an item dropped on
   a tab to that page. */
.inv-page-tabbar { display: flex; gap: 2px; }
.inv-page-tab {
    flex: 1; min-width: 0; padding: 0;
    font-family: inherit; font-size: 10px; font-weight: 700;
    letter-spacing: 0.5px; text-transform: uppercase; line-height: 1;
    color: #8a7a68;
    background: rgba(26, 18, 24, 0.85);
    border: 1px solid #4a3a50; border-radius: 3px;
    cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.inv-page-tab:hover { color: #c8a86e; border-color: #6a5a68; }
.inv-page-tab.active { color: #1a1218; background: #c8a86e; border-color: #e8c888; }
.inv-page-tab.drag-hover { color: #6ef; border-color: #6ef; background: rgba(102, 238, 255, 0.18); }

/* Mobile "armed" ability slot — pulsing gold outline so the player can
   see which hotbar slot is queued for a target tap. Cleared the moment
   they tap on the canvas (cast resolved) or tap the same slot again
   (disarm). Animation is GPU-cheap (just box-shadow). */
[data-ability-slot].ability-armed {
    outline: 2px solid #ffd060 !important;
    outline-offset: -2px;
    box-shadow: 0 0 12px 2px rgba(255, 208, 96, 0.6);
    animation: ability-armed-pulse 0.8s ease-in-out infinite;
}
@keyframes ability-armed-pulse {
    0%, 100% { box-shadow: 0 0 12px 2px rgba(255, 208, 96, 0.6); }
    50%      { box-shadow: 0 0 18px 4px rgba(255, 208, 96, 0.9); }
}
.tier-0 { color: #aaa; } .tier-1 { color: #40c040; } .tier-2 { color: #4080e0; }
.tier-3 { color: #c040c0; } .tier-4 { color: #c8a86e; } .tier-5 { color: #ff4040; }

/* ---- Item tooltip (custom hover popup, replaces the unstyled native title) ---- */
#item-tooltip {
    position: fixed;
    /* Above the sprite-HUD panels (z-index 9999). Was 100 → tooltip was
       rendering BEHIND the new HUD chrome when hovering an inventory slot. */
    z-index: 10001;
    pointer-events: none;
    background: #1a1218ee;
    border: 1px solid #4a3a58;
    border-radius: 6px;
    padding: 10px 12px;
    min-width: 180px;
    max-width: 280px;
    font-family: 'OryxSimplex', 'Segoe UI', Tahoma, sans-serif;
    color: #b8b0a0;
    font-size: 12px;
    line-height: 1.45;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55);
}
/* Class-overview tooltip on the character-select class picker. Reuses the
   item-tooltip chrome/palette with its own content classes. */
#class-tooltip {
    position: fixed;
    z-index: 10001;
    pointer-events: none;
    background: #1a1218ee;
    border: 1px solid #4a3a58;
    border-radius: 6px;
    padding: 10px 12px;
    min-width: 220px;
    max-width: 340px;
    font-family: 'OryxSimplex', 'Segoe UI', Tahoma, sans-serif;
    color: #b8b0a0;
    font-size: 12px;
    line-height: 1.45;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55);
}
#class-tooltip .ct-name { font-weight: bold; font-size: 14px; color: #c8a86e; margin-bottom: 2px; }
#class-tooltip .ct-subtitle { color: #9a8f7a; margin-bottom: 6px; }
#class-tooltip .ct-scaling-stat { color: #e0a060; font-weight: bold; }
#class-tooltip .ct-section {
    color: #c8a86e;
    font-weight: bold;
    margin: 8px 0 3px;
    border-top: 1px solid #3a2e44;
    padding-top: 5px;
}
#class-tooltip .ct-ability { margin: 3px 0; }
#class-tooltip .ct-ability-name { color: #d8c8b0; font-weight: bold; }
#class-tooltip .ct-ability-meta { color: #ffd24a; margin-left: 6px; font-size: 0.92em; }
#class-tooltip .ct-ability-desc { color: #8f8678; font-size: 0.92em; margin: 1px 0 2px; }
#class-tooltip .ct-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 2px 10px;
    margin-top: 2px;
}
#class-tooltip .ct-stat { display: flex; justify-content: space-between; gap: 4px; }
#class-tooltip .ct-stat-label { color: #8f8678; }
#class-tooltip .ct-stat-val { color: #d8c8b0; font-weight: bold; }
#item-tooltip .it-name {
    font-weight: bold;
    font-size: 14px;
    color: #c8a86e;
    margin-bottom: 2px;
}
/* Tier-tinted name color, matches inventory tier badges */
#item-tooltip .it-name-tier-0 { color: #aaaaaa; }
#item-tooltip .it-name-tier-1 { color: #40c040; }
#item-tooltip .it-name-tier-2 { color: #4080e0; }
#item-tooltip .it-name-tier-3 { color: #c040c0; }
#item-tooltip .it-name-tier-4 { color: #c8a86e; }
#item-tooltip .it-name-tier-5 { color: #ff4040; }
#item-tooltip .it-subtitle {
    color: #887868;
    font-size: 11px;
    margin-bottom: 6px;
}
#item-tooltip .it-desc {
    color: #b8a898;
    font-style: italic;
    font-size: 11px;
    margin: 4px 0 8px 0;
    border-left: 2px solid #3a2a38;
    padding-left: 6px;
}
/* Class compatibility row. Green ✓ when the local player can equip,
   red ✗ when they can't. -4 ALL items get a neutral "any class" badge. */
#item-tooltip .it-compat {
    font-size: 11px;
    font-weight: 600;
    margin: 4px 0;
    padding: 2px 6px;
    border-radius: 3px;
    display: inline-block;
}
#item-tooltip .it-compat-ok  { color: #40c040; background: rgba(64,192,64,0.10); }
#item-tooltip .it-compat-ok::before  { content: "\2713 "; }   /* check */
#item-tooltip .it-compat-no  { color: #e06060; background: rgba(224,96,96,0.10); }
#item-tooltip .it-compat-no::before  { content: "\2717 "; }   /* cross */
#item-tooltip .it-compat-any { color: #c8a86e; background: rgba(200,168,110,0.08); }
#item-tooltip .it-damage {
    color: #d8c8b0;
    margin: 4px 0;
}
#item-tooltip .it-damage-val { color: #e0a060; font-weight: bold; }
#item-tooltip .it-dps {
    color: #d8c8b0;
    margin: 2px 0 4px;
}
#item-tooltip .it-dps-val { color: #ffd24a; font-weight: bold; }
#item-tooltip .it-dps-sub { color: #9a8f7a; font-size: 0.9em; }
#item-tooltip .it-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 14px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #3a2a38;
}
#item-tooltip .it-stat {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
}
#item-tooltip .it-stat-label { color: #887868; }
#item-tooltip .it-stat-pos { color: #40c040; font-weight: 600; }
#item-tooltip .it-stat-neg { color: #e06060; font-weight: 600; }
#item-tooltip .it-ench {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #3a2a38;
}
#item-tooltip .it-ench-header { color: #c8a86e; font-size: 11px; margin-bottom: 4px; }
#item-tooltip .it-ench-list { display: flex; flex-wrap: wrap; gap: 4px; }
#item-tooltip .it-ench-pip {
    background: #2a2030;
    border: 1px solid #4a3a58;
    color: #c8a86e;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: bold;
}
#item-tooltip .it-stack {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #3a2a38;
    color: #6080e0;
    font-weight: bold;
}
#item-tooltip .it-stack-max { color: #887868; font-weight: normal; }

/* Rarity color classes — applied to item name + subtitle leading "Mundane"/etc.
   Mirror Java Rarity enum: 0=MUNDANE .. 5=LEGENDARY. */
#item-tooltip .it-rarity-0 { color: #8a8a8a; }
#item-tooltip .it-rarity-1 { color: #b8b8b8; }
#item-tooltip .it-rarity-2 { color: #4fc85a; }
#item-tooltip .it-rarity-3 { color: #3f8cff; }
#item-tooltip .it-rarity-4 { color: #b04fe0; }
#item-tooltip .it-rarity-5 { color: #ff9418; }

/* Attribute-modifier (random affix) line. */
#item-tooltip .it-modifiers {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #3a2a38;
    font-size: 11px;
    color: #c0a0e0;
}
#item-tooltip .it-mod-header { color: #c8a86e; font-weight: bold; margin-right: 4px; }
#item-tooltip .it-mod-pos { color: #4fd06a; font-weight: 600; }
#item-tooltip .it-mod-neg { color: #e06060; font-weight: 600; }

/* Gem template effect line (gem items in inventory). */
#item-tooltip .it-gem-effect {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #3a2a38;
    font-size: 11px;
    color: #f0c060;
}

/* Gem socket line — distinct, high-impact slot on EPIC/LEGENDARY items.
   Brighter gold than the crystal block so the player's eye lands on it. */
#item-tooltip .it-gem-socket {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #3a2a38;
    font-size: 11px;
    color: #ffd070;
    font-weight: 600;
}
#item-tooltip .it-gem-empty {
    color: #807040;
    font-style: italic;
    font-weight: normal;
}

/* Inventory-slot rarity ring — outline so the player can scan inventory for
   high-rarity gear without hovering. Mundane (rarity 0) gets no ring. */
.inv-slot.slot-rarity-1 { box-shadow: inset 0 0 0 2px #b8b8b8; }
.inv-slot.slot-rarity-2 { box-shadow: inset 0 0 0 2px #4fc85a; }
.inv-slot.slot-rarity-3 { box-shadow: inset 0 0 0 2px #3f8cff; }
.inv-slot.slot-rarity-4 { box-shadow: inset 0 0 0 2px #b04fe0; }
.inv-slot.slot-rarity-5 { box-shadow: inset 0 0 0 2px #ff9418; animation: rarity-legendary-pulse 1.6s ease-in-out infinite; }
@keyframes rarity-legendary-pulse {
    0%, 100% { box-shadow: inset 0 0 0 2px #ff9418, 0 0 4px #ff9418; }
    50%      { box-shadow: inset 0 0 0 2px #ffb850, 0 0 8px #ffc880; }
}

/* Forge status rarity color (matches inventory ring colors). */
.forge-rarity-0 { color: #8a8a8a; }
.forge-rarity-1 { color: #b8b8b8; }
.forge-rarity-2 { color: #4fc85a; }
.forge-rarity-3 { color: #3f8cff; }
.forge-rarity-4 { color: #b04fe0; }
.forge-rarity-5 { color: #ff9418; }

/* Per-line enchantment rendering (replaces the older pip layout). Each gem on
   its own row with a colored dot + readable description. */
#item-tooltip .it-ench-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    padding: 1px 0;
    color: #d8c0a0;
}
#item-tooltip .it-ench-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    border: 1px solid #1a1018;
    flex-shrink: 0;
}
#item-tooltip .it-ench-empty {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #3a2a38;
    color: #887868;
    font-size: 10px;
    font-style: italic;
}

.inv-slot .item-stack {
    position: absolute; bottom: 1px; right: 2px;
    font-size: 9px; font-weight: bold;
    color: #ffd86b;
    text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
    pointer-events: none;
}

#ground-loot-panel {
    background: #1a1218cc;
    border: 1px solid #3a2a38;
    border-radius: 4px;
    flex-shrink: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px;
    margin-top: 4px;
    z-index: 10;
}
#ground-loot-panel h4 {
    font-size: 11px; color: #887868;
    margin-bottom: 4px;
}
#ground-loot-slots {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}
#trade-buttons {
    display: flex; gap: 6px; margin-top: 6px;
}
.trade-btn {
    flex: 1; padding: 8px; font-size: 12px; font-weight: 600;
    border: none; border-radius: 3px; cursor: pointer;
}
.trade-btn.confirm { background: #40a040; color: #fff; }
.trade-btn.confirm:hover { background: #50b050; }
.trade-btn.cancel { background: #a04040; color: #fff; }
.trade-btn.cancel:hover { background: #b05050; }

/* Consumable potion storage */
#potion-storage {
    display: flex;
    gap: 6px;
    margin: 6px 0;
    justify-content: center;
}

.potion-slot {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #1a1218cc;
    border: 2px solid #3a2a38;
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
    position: relative;
    min-width: 0;
    box-sizing: border-box;
    justify-content: flex-start;
}

/* Icon + keybind stacked: icon on top, (Z)/(X) directly underneath. */
.potion-iconcol {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
}

.potion-slot:hover {
    border-color: #c8a86e;
    background: #2a2030;
}

#hp-potion-slot { border-left: 3px solid #c04040; }
#mp-potion-slot { border-left: 3px solid #4060c0; }

.potion-icon {
    width: 24px;
    height: 24px;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.potion-icon img {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

.potion-count {
    font-size: 16px;
    font-weight: bold;
    color: #e8d8c8;
    min-width: 14px;
    text-align: center;
}

.potion-label {
    font-size: 9px;
    color: #887868;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.potion-key {
    font-size: 8px;
    line-height: 1;
    color: #8a7a5a;
    font-weight: bold;
}

/* Two left-rail panels stacked vertically — party (when in a party)
   ABOVE nearby. Both wrappers carry the SAME chrome (background,
   border, padding) so they read as two copies of the same container.
   Labels and lists live INSIDE the chrome. Party wrapper is toggled
   display:none/'' by trade.js depending on game.partyId. */
#party-section,
#nearby-section {
    background: #1a1218cc;
    border: 1px solid #3a2a38;
    border-radius: 4px;
    padding: 6px;
    font-size: 11px;
    margin-top: 10px;     /* 10px gap between stacked panels */
    z-index: 10;
    position: relative;
    flex-shrink: 0;
    box-sizing: border-box;
    /* Explicit width + min-height — the user reported the party panel
       rendering at 0x0 inside the flex-column #hud (display:block but
       getBoundingClientRect returned 0,0 0x0). Force the dimensions so
       no flex sizing quirk can collapse it. */
    width: 100%;
    min-height: 32px;
}
/* Nearby absorbs remaining HUD column height when present. */
#nearby-section {
    flex-shrink: 1;
    min-height: 0;
    overflow-y: auto;
}
#party-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}
/* Shared left-rail title — same tan small-caps treatment in both
   panels so the headers read identical. */
.left-panel-title {
    font-size: 10px;
    color: #c8a86e;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 3px;
    display: block;
}
/* Inner list containers — NO chrome here; chrome lives on the outer
   wrapper. They differ only in layout (grid vs. flex column). */
#nearby-players {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    /* No inner scroll: the outer #nearby-section is the single scroll container,
       so the list grows naturally and only one scrollbar shows (was double). */
    overflow-y: visible;
}
#party-players {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 140px;
    overflow-y: auto;
}
.nearby-player {
    display: flex; align-items: center; gap: 6px;
    padding: 2px 4px; border-radius: 2px; cursor: pointer;
    white-space: nowrap; overflow: hidden;
    pointer-events: auto;
}
.nearby-player:hover { background: #2a2030; }
.nearby-player canvas.np-icon {
    width: 24px; height: 24px;
    background: #1a1218;
    border: 1px solid #3a2a38;
    border-radius: 2px;
    image-rendering: pixelated;
    flex: 0 0 auto;
}
.nearby-player .np-name {
    overflow: hidden; text-overflow: ellipsis;
    font-size: 11px; line-height: 1.1;
}

/* Trade Request Popup — sits inside HUD sidebar below inventory/player list */
#trade-request-popup {
    position: fixed;
    top: 60px; left: 50%; transform: translateX(-50%);
    z-index: 10002; pointer-events: auto;
}
.trade-popup-content {
    background: #2a2030; border: 2px solid #c8a86e;
    border-radius: 6px; padding: 12px 14px; text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.trade-popup-content p { margin-bottom: 10px; font-size: 13px; }
.trade-popup-buttons { display: flex; gap: 10px; }
.trade-popup-btn {
    flex: 1; padding: 8px 16px; border: none; border-radius: 4px;
    font-size: 13px; font-weight: 600; cursor: pointer;
}
.trade-popup-btn.accept { background: #40a040; color: #fff; }
.trade-popup-btn.accept:hover { background: #50b050; }
.trade-popup-btn.decline { background: #a04040; color: #fff; }
.trade-popup-btn.decline:hover { background: #b05050; }

/* Player Tooltip */
#player-tooltip {
    position: fixed;
    background: #1a1218ee; border: 1px solid #4a3a58;
    border-radius: 6px; padding: 10px 12px;
    min-width: 180px; z-index: 10001;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.55);
}
.tooltip-header {
    display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px;
}
.tooltip-name { font-weight: bold; font-size: 14px; }
.tooltip-role { font-size: 10px; opacity: 0.9; }
.tooltip-class { color: #887868; font-size: 11px; margin-bottom: 6px; }
.tooltip-stat { font-size: 12px; line-height: 1.3; }
.tooltip-hp { color: #e06060; }
.tooltip-mp { color: #6080e0; }
/* Equipment strip — mirrors the panel.hud.equipment 4-slot bar layout
 * from the bottom-center hotbar: a thin recessed bar with 4 inset
 * cells. Real atlas chrome would need a JS-computed background-size
 * (sheet scaled to displayScale * naturalSize); the styled version here
 * matches the visual silhouette and keeps the same 4-slot semantics. */
.tooltip-equip-strip {
    margin-top: 8px;
    background: linear-gradient(#241820, #1a1218);
    border: 1px solid #3a2a38;
    border-radius: 4px;
    padding: 4px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}
.tooltip-equip-cell {
    width: 36px; height: 36px;
    background-color: #0e0a0c;
    border: 1px solid #3a2a38;
    border-radius: 2px;
    image-rendering: pixelated;
    position: relative;
    overflow: hidden;
}
.tooltip-equip-empty { opacity: 0.4; }
.tooltip-equip-tier {
    position: absolute; bottom: 1px; right: 2px;
    font-size: 8px; color: #c8a86e;
    text-shadow: 0 0 2px #000;
    z-index: 2; pointer-events: none;
}
/* Equipment row — 4 slots in a tidy strip under the HP/MP rows. Empty
 * slots render as bordered placeholders so the layout doesn't shift if
 * a player isn't fully geared. */
.tooltip-equip-row {
    margin-top: 6px; padding-top: 6px;
    border-top: 1px solid #3a2a38;
    display: flex; gap: 4px;
}
.tooltip-equip-slot {
    width: 24px; height: 24px;
    background: #0e0a0c; border: 1px solid #3a2a38;
    border-radius: 3px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.tooltip-equip-empty { background: transparent; border-style: dashed; }
.tooltip-equip-icon {
    width: 24px; height: 24px;
    image-rendering: pixelated;
    transform: scale(1.5); transform-origin: top left;
    background-repeat: no-repeat;
}
.tooltip-equip-id { color: #887868; font-size: 9px; }

/* ====================================================================
 * Trade Overlay — single panel.hud.trade chrome (v3 atlas). trade.js
 * blits the sprite as #trade-panel's background and overlays the status
 * title, both player name boxes, two 20-slot grids and the Confirm/Cancel
 * buttons as atlas-positioned children. Centered over the HUD (z 9500).
 * ==================================================================== */
#trade-overlay {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 9500;
    background: rgba(8, 5, 10, 0.6);
}
#trade-panel {
    position: relative;
    image-rendering: pixelated;
}
.trade-atlas-label {
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; white-space: nowrap;
    font-size: 12px; font-weight: 700;
    color: #d8c8a8;
    text-shadow: 0 1px 2px #000;
    pointer-events: none;
}
.trade-atlas-title { font-size: 11px; letter-spacing: 0.5px; color: #e0d2b0; }
.trade-atlas-name0 { color: #c8a86e; }
.trade-atlas-name1 { color: #66c8e0; }
.trade-atlas-btn {
    cursor: pointer; pointer-events: auto;
    color: #f4ecd8; font-size: 11px;
}
.trade-atlas-gridwrap { pointer-events: none; }
.trade-atlas-slot {
    position: absolute; box-sizing: border-box;
    cursor: pointer; pointer-events: auto;
}
.trade-atlas-slot.read-only { cursor: default; }
.trade-atlas-slot img {
    position: absolute; inset: 12%;
    width: 76%; height: 76%;
    image-rendering: pixelated;
    pointer-events: none;
}
.trade-atlas-slot.selected {
    box-shadow: inset 0 0 0 2px rgba(200, 168, 110, 0.95);
    background: rgba(200, 168, 110, 0.18);
    border-radius: 2px;
}
.trade-atlas-slot .trade-tier {
    position: absolute; bottom: 0; right: 1px;
    font-size: 8px; color: #c8a86e;
    text-shadow: 0 0 2px #000;
    pointer-events: none;
}

/* Player Context Menu */
#player-context-menu {
    position: fixed; z-index: 10002;
    background: #2a2030; border: 1px solid #4a3a58;
    border-radius: 6px; overflow: hidden; min-width: 180px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.ctx-header {
    padding: 6px 12px; font-size: 12px; font-weight: bold;
    color: #c8a86e; border-bottom: 1px solid #3a2a38;
    background: #1a1218;
}
.ctx-option {
    padding: 8px 12px; font-size: 13px; cursor: pointer;
    color: #e0d8c8; transition: background 0.1s;
}
.ctx-option:hover { background: #3a2a48; }

/* Chat */
#chat-panel {
    position: absolute;
    bottom: 10px; left: 10px;
    width: 480px;
    pointer-events: auto;
    z-index: 10;
}
#chat-messages {
    background: #1a1218aa;
    border: 1px solid #3a2a38;
    border-radius: 4px 4px 0 0;
    height: 140px;
    overflow-y: auto;
    padding: 6px 8px;
    font-size: 12px;
    line-height: 1.5;
}
/* Hanging indent: wrapped continuation rows are inset so each message's
   first line stays flush left and is easy to scan apart from its body. */
#chat-messages > div {
    padding-left: 1.5em;
    text-indent: -1.5em;
}
#chat-messages .msg-system { color: #c8a86e; }
#chat-messages .msg-player { color: #e0d8c8; }
#chat-messages .msg-name { color: #80b0e0; font-weight: 600; }
#chat-toggle {
    position: absolute;
    top: -20px;
    right: 0;
    width: 22px;
    height: 18px;
    background: #1a1218;
    border: 1px solid #3a2a38;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    color: #887868;
    font-size: 10px;
    padding: 0;
    cursor: pointer;
    line-height: 18px;
    text-align: center;
    z-index: 1;
}
#chat-toggle:hover { color: #c8a86e; }
#chat-panel.collapsed #chat-messages { display: none; }
#chat-panel.collapsed #chat-toggle { transform: rotate(180deg); }
#chat-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    background: #1a1218;
    border: 1px solid #3a2a38;
    border-top: none;
    border-radius: 0 0 4px 4px;
    color: #e0d8c8;
    font-size: 13px;
    outline: none;
}
#chat-input:focus { border-color: #c8a86e; }

#connection-status {
    position: absolute;
    top: 10px; left: 10px;
    background: #1a1218cc;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 12px;
    color: #c8a86e;
    z-index: 10;
}
#connection-status.connected { color: #40a040; }
#connection-status.error { color: #e85050; }

/* Mobile Touch Controls */
#touch-joystick {
    position: absolute; bottom: 160px; left: 20px;
    z-index: 15; pointer-events: auto;
    touch-action: none;
}
#joystick-base {
    width: 120px; height: 120px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.25);
    position: relative;
}
#joystick-thumb {
    width: 50px; height: 50px;
    border-radius: 50%;
    background: rgba(200,168,110,0.5);
    border: 2px solid rgba(200,168,110,0.7);
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    transition: none;
}

#mobile-buttons {
    position: absolute; top: 10px; right: 320px;
    z-index: 15; pointer-events: auto;
    display: flex; flex-direction: row; gap: 6px;
}
#mobile-buttons button {
    width: 70px; height: 44px;
    background: rgba(200,168,110,0.3); border: 2px solid rgba(200,168,110,0.6);
    border-radius: 8px; color: #e0d8c8; font-size: 11px; font-weight: bold;
    cursor: pointer; touch-action: manipulation;
}
#mobile-buttons button:active { background: rgba(200,168,110,0.6); }

#portal-prompt {
    /* Sits ABOVE the atlas hotbar (bottom:16, height ~72 px at desktop
     * displayScale 2, z-index:9999). Was bottom:24,z-index:15 — the
     * hotbar covered it entirely so the player never saw the "Enter
     * Portal" pill. bottom:104 = 16 (hotbar anchor) + 72 (hotbar height)
     * + 16 gap; z-index:10000 keeps it above any sprite-HUD chrome. */
    position: absolute; bottom: 104px; left: 50%; transform: translateX(-50%);
    z-index: 10000; pointer-events: auto;
    background: #2a2030ee; border: 2px solid #8040c0;
    border-radius: 6px; padding: 5px 12px;
    display: flex; align-items: center; gap: 8px;
    box-shadow: 0 2px 8px rgba(128,64,192,0.4);
}
#portal-name {
    color: #c080ff; font-size: 12px; font-weight: bold;
}
#portal-enter-btn {
    padding: 4px 10px; background: #8040c0; color: #fff;
    border: none; border-radius: 4px; font-size: 11px; font-weight: 600;
    cursor: pointer; width: auto;
}
#portal-enter-btn:hover { background: #9050d0; }

#interact-prompt {
    /* Stacks 40 px above #portal-prompt (which sits at bottom:104 to
     * clear the atlas hotbar). z-index matches portal-prompt. */
    position: absolute; bottom: 144px; left: 50%; transform: translateX(-50%);
    z-index: 10000; pointer-events: auto;
    background: #2a1f18ee; border: 2px solid #c8a86e;
    border-radius: 6px; padding: 5px 12px;
    display: flex; align-items: center; gap: 8px;
    box-shadow: 0 2px 8px rgba(200,168,110,0.4);
}
#interact-label {
    color: #ffd86b; font-size: 12px; font-weight: bold;
}
#interact-btn {
    padding: 4px 10px; background: #c8a86e; color: #1a1218;
    border: none; border-radius: 4px; font-size: 11px; font-weight: 700;
    cursor: pointer; width: auto;
}
#interact-btn:hover { background: #d8b87e; }

/* ============================================================
 * Forge modal
 * ============================================================ */
.modal-overlay {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    pointer-events: auto;
}
.modal-overlay[hidden] { display: none; }
#forge-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
}
#forge-panel {
    position: relative; z-index: 101;
    width: 760px; max-width: 95vw; max-height: 92vh;
    background: #1a1218; border: 2px solid #c8a86e; border-radius: 8px;
    color: #e8d8b8; font-family: monospace;
    display: flex; flex-direction: column;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
}
.forge-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px; border-bottom: 1px solid #3a2a38;
}
.forge-header h2 { margin: 0; font-size: 18px; letter-spacing: 4px; color: #ffd86b; }
#forge-close-btn {
    background: none; border: none; color: #c8a86e; font-size: 22px;
    cursor: pointer; padding: 0 6px; line-height: 1;
}
#forge-close-btn:hover { color: #ffd86b; }
.forge-body {
    display: grid; grid-template-columns: 1fr auto 1fr;
    gap: 14px; padding: 18px; align-items: start;
}
.forge-inputs, .forge-output { display: flex; flex-direction: column; gap: 10px; }
.forge-output { align-items: center; }
.forge-section-header {
    font-size: 10px; letter-spacing: 3px; color: #8a7058;
    border-bottom: 1px solid #3a2a38; padding-bottom: 4px;
    text-align: center;
}
.forge-arrow {
    font-size: 28px; color: #c8a86e; padding-top: 60px;
    text-align: center; user-select: none;
}
.forge-output-frame {
    position: relative;
    border: 2px solid #c8a86e; border-radius: 4px;
    background: #0f0a14; padding: 4px;
}
.forge-output-hint {
    position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%);
    font-size: 9px; color: #6a5a68; white-space: nowrap;
    letter-spacing: 1px;
}
.forge-row { display: flex; flex-direction: column; gap: 4px; }
.forge-row-label { font-size: 11px; color: #c8a86e; letter-spacing: 1px; }
.forge-dropzone {
    width: 100%; min-height: 84px;
    background: #0f0a14; border: 2px dashed #4a3a48;
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    transition: border-color 0.1s ease;
}
.forge-dropzone.drag-hover { border-color: #ffd86b; background: #1a1018; }
.forge-dropzone.filled { border-style: solid; border-color: #c8a86e; }
.forge-zone-hint {
    color: #6a5a68; font-size: 11px; text-align: center; padding: 0 8px;
}
.forge-dropzone img {
    width: 64px; height: 64px;
    image-rendering: pixelated; image-rendering: crisp-edges;
}
.forge-dropzone .forge-zone-detail {
    position: absolute; top: 4px; right: 6px;
    font-size: 10px; color: #ffd86b;
}
.forge-right {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.forge-status {
    font-size: 11px; color: #b8a89a; min-height: 14px;
    text-align: center;
}
#forge-pixel-canvas {
    width: 256px; height: 256px;
    background: #0f0a14;
    image-rendering: pixelated; image-rendering: crisp-edges;
    cursor: crosshair;
    display: block;
}
.forge-cost {
    font-size: 11px; color: #b8a89a; text-align: center; min-height: 14px;
}

/* Fame Store modal — reuses .modal-overlay + .forge-header conventions for
   visual consistency with the Forge. List of purchasable dyes (and later
   patterned cloths) with a balance readout and an inline status line. */
#fame-store-panel {
    position: relative;
    width: 480px;
    max-width: 92vw;
    max-height: 85vh;
    background: #1a1218;
    border: 2px solid #c8a86e;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #e0d8c8;
    font-family: 'OryxSimplex', monospace;
}
#fame-store-backdrop {
    position: absolute; inset: 0; background: rgba(0, 0, 0, 0.65); cursor: pointer;
}
.fame-store-balance {
    padding: 12px 18px; text-align: center; font-size: 16px;
    color: #ffd86b; border-bottom: 1px solid #3a2a38;
    letter-spacing: 1px;
}
.fame-store-list {
    padding: 14px; display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px; overflow-y: auto;
}
.fame-store-row {
    display: flex; align-items: center; gap: 10px;
    background: #2a2030; border: 1px solid #3a2a38; border-radius: 6px;
    padding: 8px 10px;
}
.fame-store-row .fame-store-icon {
    width: 32px; height: 32px; image-rendering: pixelated; flex-shrink: 0;
    background: #1a1218; border-radius: 3px;
}
.fame-store-row .fame-store-info {
    flex: 1; min-width: 0;
}
.fame-store-row .fame-store-name {
    font-size: 13px; color: #c8a86e; font-weight: 600;
}
.fame-store-row .fame-store-cost {
    font-size: 11px; color: #aa8844;
}
.fame-store-row button {
    width: auto; padding: 6px 12px; font-size: 12px;
    background: #c8a86e; color: #1a1218; border: none; border-radius: 4px;
    cursor: pointer; margin: 0;
}
.fame-store-row button:hover:not(:disabled) { background: #ffd86b; }
.fame-store-row button:disabled { background: #5a4a3a; color: #887868; cursor: default; }
.fame-store-status {
    padding: 0 14px 12px; min-height: 14px; font-size: 12px;
    color: #aa8844; text-align: center;
}
.fame-store-status.error { color: #e85050; }
.fame-store-status.success { color: #8af08a; }
@media (max-width: 720px) {
    .fame-store-list { grid-template-columns: 1fr; }
}
.forge-cost .ok { color: #5fd06f; }
.forge-cost .bad { color: #ff6060; }
.forge-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 12px 18px; border-top: 1px solid #3a2a38;
}
.forge-btn {
    padding: 7px 16px; background: #2a2030; color: #c8a86e;
    border: 1px solid #4a3a48; border-radius: 4px;
    font-family: inherit; font-size: 12px; cursor: pointer;
}
.forge-btn:hover:not(:disabled) { background: #3a2a40; color: #ffd86b; }
.forge-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.forge-btn-primary { background: #c8a86e; color: #1a1218; border-color: #ffd86b; font-weight: 700; }
.forge-btn-primary:hover:not(:disabled) { background: #ffd86b; color: #1a1218; }
.forge-btn-danger { color: #ff6060; border-color: #6a3030; }
.forge-btn-danger:hover { background: #3a1818; color: #ff8080; }

/* ----- Forge layout v2 (atlas-driven from panel.forge.*) -----
   Panel positions + sizes come straight from openrealm-data's
   Open_Realm_User_Interface_V1.png + ui-components.json. We render each
   `data-panel-id` element with the corresponding sheet region as its
   CSS background-image, and absolutely-position children at the source
   offsets relative to panel.forge.container. displayScale=2 in the
   atlas, so every coordinate here is doubled.

   Sheet: 1492x528 source -> 2984x1056 displayed (2x).
   Container: src (697,121) 165x129 -> rendered 330x258.
   Each child is positioned at (childSrc - containerSrc) * 2 with size
   childSrcW*2 by childSrcH*2 and background-position -childSrcX*2 -childSrcY*2.

   When the modal sits at SCALE=2 the dialog is small (330x258); the
   --forge-scale custom property below boosts the whole modal to a usable
   size while keeping every child's position math identical.
   --------------------------------------------------------------------- */

:root { --forge-scale: 2; }

#forge-panel.forge-container {
    position: relative;
    width: 330px; height: 258px;
    transform: scale(var(--forge-scale));
    transform-origin: center center;
    max-width: none; max-height: none;
    background-image: url('/game-data/Open_Realm_User_Interface_V1.png');
    background-position: -1394px -242px;
    background-size: 2984px 1056px;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    image-rendering: pixelated;
    color: #e8d8b8;
    font-family: monospace;
    box-shadow: 0 6px 24px rgba(0,0,0,0.6);
    display: block;
}

.forge-container [data-panel-id] {
    position: absolute;
    background-image: url('/game-data/Open_Realm_User_Interface_V1.png');
    background-size: 2984px 1056px;
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

.forge-container [data-panel-id="panel.forge.status"] {
    left: 4px; top: 2px; width: 322px; height: 30px;
    background-position: -1398px -244px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px; padding: 0 6px; box-sizing: border-box;
}

.forge-container [data-panel-id="panel.forge.label.item"] {
    left: 22px; top: 60px; width: 36px; height: 32px;
    background-position: -1416px -302px;
}
.forge-container [data-panel-id="panel.forge.label.cyrstal"] {
    left: 22px; top: 116px; width: 36px; height: 32px;
    background-position: -1416px -358px;
}
.forge-container [data-panel-id="panel.forge.label.essence"] {
    left: 22px; top: 172px; width: 36px; height: 32px;
    background-position: -1416px -414px;
}
.forge-container [data-panel-id^="panel.forge.label."] {
    display: flex; align-items: center; justify-content: center;
    /* ~33% smaller than the original 9px so the text doesn't crowd the
       atlas chrome. Letter-spacing also tightened to keep the word
       inside the 36px-wide label panel. */
    font-size: 6px; letter-spacing: 0.5px; color: #ffd86b;
    text-transform: uppercase;
}

.forge-container [data-panel-id="panel.forge.input.item"] {
    left: 54px; top: 48px; width: 72px; height: 54px;
    background-position: -1448px -290px;
}
.forge-container [data-panel-id="panel.forge.input.crystal"] {
    left: 56px; top: 104px; width: 70px; height: 54px;
    background-position: -1450px -346px;
}
.forge-container [data-panel-id="panel.forge.input.essence"] {
    left: 56px; top: 160px; width: 70px; height: 54px;
    background-position: -1450px -402px;
}

.forge-container [data-panel-id="panel.forge.output"] {
    left: 164px; top: 84px; width: 130px; height: 92px;
    background-position: -1558px -326px;
    display: flex; align-items: center; justify-content: center;
}

/* Disable v1 flex/grid wrappers — layout is absolute now. The wrapper
   elements still exist for forge.js's existing query-by-class paths, so
   we collapse them to display: contents. */
.forge-container .forge-body,
.forge-container .forge-inputs,
.forge-container .forge-input-block { display: contents; }

.forge-container .forge-status-left {
    display: flex; align-items: center; gap: 6px;
    flex: 1; min-width: 0; overflow: hidden;
}
.forge-container .forge-status-left h2 {
    margin: 0; font-size: 11px; letter-spacing: 2px; color: #ffd86b;
}
.forge-container .forge-status-text {
    font-size: 10px; color: #d6cab4; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.forge-container .forge-status-actions {
    display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.forge-container .forge-status-actions .forge-btn {
    padding: 2px 6px; font-size: 9px; line-height: 1;
    letter-spacing: 0; border-radius: 2px;
}
.forge-container .forge-btn-x {
    background: none; border: none; color: #c8a86e;
    font-size: 14px; cursor: pointer; padding: 0 4px; line-height: 1;
}
.forge-container .forge-btn-x:hover { color: #ffd86b; }

/* Drop-zones rendered on TOP of the input panels — atlas chrome
   shows through; we just paint the icon + stack badge in the center. */
.forge-container .forge-dropzone {
    border: none; background: transparent; min-height: 0;
}
.forge-container .forge-dropzone .forge-zone-hint {
    color: #8a7058; font-size: 8px; text-align: center; padding: 2px;
}
.forge-container .forge-dropzone img {
    width: 32px; height: 32px;
    image-rendering: pixelated;
}
.forge-container .forge-dropzone .forge-zone-detail {
    position: absolute; right: 2px; bottom: 2px;
    font-size: 9px; color: #ffd86b;
    text-shadow: 1px 1px 0 #000;
}
.forge-container .forge-dropzone.drag-hover {
    outline: 2px solid #ffd86b; outline-offset: -1px;
}

/* Pixel canvas inscribed inside panel.forge.output. */
.forge-container [data-panel-id="panel.forge.output"] .forge-output-frame {
    position: relative; padding: 0; border: none; background: transparent;
}
.forge-container #forge-pixel-canvas {
    width: 88px; height: 88px;
    image-rendering: pixelated;
    cursor: crosshair;
    background: rgba(0,0,0,0.35);
}
.forge-container .forge-output-hint { display: none; }

/* Cost line floats below the inputs column inside the container. */
.forge-container #forge-cost {
    position: absolute; left: 8px; bottom: 6px;
    width: 150px; font-size: 8px; color: #b8a89a;
}

/* When the forge modal is open, lift the inventory HUD above the modal
 * backdrop so the user can drag from inventory slots into the forge zones.
 * Without this, the backdrop intercepts mousedown on the HUD. */
body.forge-open #hud { z-index: 200; }
body.forge-open #ground-loot-panel { z-index: 200; }

/* Same treatment for the potion-storage modal — the inventory needs to
 * stay clickable so the user can drag stackables/gems into the storage
 * panels. Without this lift the HUD shows through the dimmed backdrop
 * dimly (looking like a stray "third panel" beneath the modal) AND
 * doesn't accept drag events. */
body.potion-storage-open #hud { z-index: 200; }
body.potion-storage-open #ground-loot-panel { z-index: 200; }

/* Hide the "PRESS F TO …" interact prompt + the legacy portal prompt
 * while any interactive modal is open. Once the player is inside the
 * UI, the hint to enter it is just visual noise. Uses :has() so it
 * catches fame-store-modal too (which only toggles the `hidden` attr
 * and never sets a body class). */
body:has(#forge-modal:not([hidden])) #interact-prompt,
body:has(#forge-modal:not([hidden])) #portal-prompt,
body:has(#fame-store-modal:not([hidden])) #interact-prompt,
body:has(#fame-store-modal:not([hidden])) #portal-prompt,
body:has(#potion-storage-modal:not([hidden])) #interact-prompt,
body:has(#potion-storage-modal:not([hidden])) #portal-prompt { display: none !important; }


#touch-aim {
    position: absolute; bottom: 30px; right: 320px;
    z-index: 15; pointer-events: auto;
    touch-action: none;
}
#aim-base {
    width: 140px; height: 140px;
    border-radius: 50%;
    background: rgba(255,80,80,0.1);
    border: 2px solid rgba(255,80,80,0.25);
    position: relative;
}
#aim-thumb {
    width: 50px; height: 50px;
    border-radius: 50%;
    background: rgba(255,80,80,0.4);
    border: 2px solid rgba(255,80,80,0.6);
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

/* Force landscape prompt */
#rotate-prompt {
    display: none; position: fixed; top: 0; left: 0;
    width: 100%; height: 100%; z-index: 9999;
    background: #1a1218; color: #c8a86e;
    flex-direction: column; align-items: center; justify-content: center;
    font-size: 18px; text-align: center; padding: 20px;
}
#rotate-prompt span { font-size: 48px; margin-bottom: 16px; }

/* Mobile responsive — compact sidebar.
   Use clamp() so the HUD scales smoothly across phone sizes (320px–900px)
   instead of snapping to a single hardcoded width. */
@media (max-width: 900px), (max-height: 500px) {
    #hud {
        width: clamp(100px, 16vw, 140px);
        top: 2px; right: 2px; bottom: 2px; gap: 1px;
    }
    #hud #player-identity { padding: 2px 4px !important; font-size: 8px !important; margin-bottom: 1px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* The atlas-mounted minimap (panel.container.small at right:16,top:16)
     * is the active minimap on mobile too — its inner #minimap-canvas has
     * been reparented INSIDE that atlas panel by ui-widgets._reparentLegacyChildren.
     * We previously yanked #minimap-container with position:fixed,top:3px,left:3px
     * here, which dragged the canvas out of the right-column atlas panel and
     * pinned it to the top-left corner — visually splitting the HUD across
     * both edges. The atlas minimap matches desktop's top-right position,
     * so the override is removed. The legacy #difficulty-icon and
     * #account-fame-display fixed-position blocks were companions to that
     * mis-pin and are now dead code (their parent #hud is display:none after
     * atlas mount), so they're removed too. */
    #perf-overlay { display: none !important; }
    #hud-bars { margin-bottom: 2px; }
    .bar-container { height: 14px; margin-bottom: 1px; }
    .bar span { font-size: 7px; }
    /* Stats: 3-column grid stays, just scale down font */
    #stats-panel { font-size: 7px; padding: 2px 3px; gap: 0px 3px; margin-bottom: 2px; }
    .stat-row { font-size: 7px; }
    .stat-bonus { font-size: 6px; }
    .stat-label { font-size: 7px; }
    #inventory-panel { padding: 2px; }
    /* Slots: size to fill the HUD width responsively (4 slots + gaps) */
    .slot-row { gap: 2px; margin-bottom: 2px; }
    .inv-slot {
        /* Each slot = (HUD width - padding*2 - gap*3) / 4.
           With clamp(100,16vw,140) and 2px padding, that's ~22-32px. */
        width: calc((clamp(100px, 16vw, 140px) - 10px) / 4);
        height: calc((clamp(100px, 16vw, 140px) - 10px) / 4);
        border-width: 1px; border-radius: 2px;
    }
    .inv-slot img, .inv-slot canvas {
        width: calc((clamp(100px, 16vw, 140px) - 10px) / 4 - 4px);
        height: calc((clamp(100px, 16vw, 140px) - 10px) / 4 - 4px);
    }
    .slot-label { font-size: 5px; }
    .item-tier { font-size: 5px; }
    #equip-label, #inv-label { font-size: 6px; margin-bottom: 1px; letter-spacing: 0px; }
    #equip-slots { padding-bottom: 2px; margin-bottom: 2px; border-bottom-width: 1px; }
    #nearby-players { max-height: 40px; overflow-y: auto; font-size: 7px; padding: 2px; grid-template-columns: 1fr; }
    #nearby-label { font-size: 6px !important; margin-bottom: 1px !important; }
    #nearby-section { margin-top: 1px; }
    .nearby-player { padding: 1px 2px; gap: 2px; }
    .np-icon { width: 12px; height: 12px; font-size: 7px; line-height: 12px; }
    /* Loot bag: floated top-center, tight grid with no extra stretch */
    #ground-loot-panel {
        position: fixed !important;
        top: 3px !important;
        left: 130px !important;
        right: auto !important;
        width: auto !important;
        max-width: 200px !important;
        margin-top: 0 !important;
        padding: 3px 4px !important;
        z-index: 22 !important;
        background: rgba(26, 18, 24, 0.94) !important;
        border: 1px solid #c8a86e !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
    }
    #ground-loot-panel h4 { font-size: 8px; margin-bottom: 2px; color: #c8a86e; text-transform: uppercase; letter-spacing: 1px; }
    #ground-loot-slots { gap: 2px; grid-template-columns: repeat(4, 28px); }
    #ground-loot-slots .inv-slot { width: 28px; height: 28px; }
    #ground-loot-slots .inv-slot img, #ground-loot-slots .inv-slot canvas { width: 22px; height: 22px; }
    #trade-buttons { gap: 2px; margin-top: 2px; }
    .trade-btn { padding: 3px; font-size: 7px; }
    .trade-popup-content { padding: 6px 8px; }
    .trade-popup-content p { font-size: 9px; margin-bottom: 6px; }
    .trade-popup-btn { padding: 4px 8px; font-size: 9px; }
    #chat-panel { width: 250px; bottom: 5px; left: 5px; }
    #chat-messages { height: 80px; font-size: 10px; }
    #chat-input { font-size: 11px; padding: 5px; }
    #connection-status { font-size: 10px; padding: 2px 6px; }
    /* Portal prompt: smaller on mobile */
    /* Hotbar (atlas, scale 0.5) occupies bottom 16..~34 px center strip,
     * with potion ovals flanking. Lift prompts above that band so the
     * "Enter Portal" pill doesn't sit on top of the equipment slots. */
    #portal-prompt   { bottom: 52px; padding: 4px 8px; gap: 6px; }
    #interact-prompt { bottom: 92px; padding: 4px 8px; gap: 6px; }
    #portal-name { font-size: 10px; }
    #portal-enter-btn { padding: 3px 8px; font-size: 10px; }
    .login-box, .charselect-box { width: 94vw; max-width: 480px; padding: 20px; }
    /* On mobile the box itself is the single scroll container — drop nested
       scroll caps so dragging anywhere in the box (including on cards) pans
       the box. Previously #char-list was capped at 120px which made the
       scroll target tiny and fought with the outer scroll. */
    .charselect-box { max-height: 92vh; overflow-y: auto; }
    .charselect-box h2 { font-size: 20px; margin-bottom: 12px; }
    #char-list { max-height: none; overflow-y: visible; }
    #graveyard-list { max-height: none; overflow-y: visible; }
    .leaderboard-section { max-height: none; overflow-y: visible; }
    .tab-btn { font-size: 14px; padding: 14px 12px; min-height: 44px; }
    .char-card { padding: 14px 14px; gap: 12px; margin-bottom: 10px; min-height: 64px; }
    .char-card .char-icon { width: 44px; height: 44px; font-size: 20px; }
    .char-card .char-name { font-size: 15px; }
    .char-card .char-level { font-size: 11px; }
    .char-card .char-details { font-size: 12px; }
    .char-card .char-uuid { font-size: 9px; }
    .char-create { padding-top: 10px; }
    .char-create h3 { font-size: 14px; margin: 10px 0 8px; }
    #class-picker { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .class-option { padding: 10px 4px; font-size: 11px; min-height: 44px; }
    .char-actions { gap: 8px; }
    .char-actions button { padding: 14px; font-size: 14px; min-height: 48px; }
    .chest-section { font-size: 13px; padding-top: 12px; margin-top: 12px; }
    .password-section summary { font-size: 13px; padding: 8px 0; }
    .password-section input { padding: 9px 10px; font-size: 13px; }
    button.small { padding: 8px 12px; font-size: 12px; min-height: 36px; }
    #logout-btn { padding: 10px; font-size: 13px; min-height: 36px; }
    /* Leaderboard: roomier rows for finger taps + better readability */
    .leaderboard-row { padding: 12px 10px; font-size: 13px; gap: 8px; }
    .lb-rank { min-width: 28px; font-size: 13px; }
    .lb-fame { font-size: 12px; }
}

@media (orientation: portrait) and (max-width: 768px) {
    #rotate-prompt { display: flex; }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* In-game Options Menu — fullscreen overlay with centered panel           */
/* ═══════════════════════════════════════════════════════════════════════ */
.options-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}
.options-overlay[hidden] { display: none; }
#options-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    cursor: pointer;
}
#options-panel {
    position: relative;
    width: 520px;
    max-width: 90vw;
    max-height: 85vh;
    background: #1a1218;
    border: 2px solid #c8a86e;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #e0d8c8;
    font-family: monospace;
}
#options-header {
    padding: 12px 20px 6px;
    border-bottom: 1px solid #3a2a38;
}
#options-header h2 {
    margin: 0;
    font-size: 18px;
    color: #c8a86e;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}
#options-tabs {
    display: flex;
    background: #0f0a10;
    border-bottom: 1px solid #3a2a38;
}
.options-tab {
    flex: 1;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #887868;
    font-family: monospace;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.options-tab:hover { color: #c8a86e; }
.options-tab.active {
    color: #c8a86e;
    border-bottom-color: #c8a86e;
}
#options-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}
.options-tab-panel { display: none; }
.options-tab-panel.active { display: block; }
/* Desktop hides mobile-only sections and vice versa */
.options-tab-panel.mobile-only { display: none; }
.options-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 12px;
    color: #c8b8a8;
    border-bottom: 1px solid #2a1f28;
}
.options-row:last-child { border-bottom: none; }
.options-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #c8a86e;
    cursor: pointer;
}
.options-row input[type="range"] {
    flex: 1;
    accent-color: #c8a86e;
}
.options-row select {
    background: #2a2030;
    border: 1px solid #4a3a50;
    color: #e0d8c8;
    font-family: monospace;
    font-size: 11px;
    padding: 4px 6px;
    border-radius: 3px;
    cursor: pointer;
    margin-left: auto;
}
.options-row > span:first-child,
.options-row > input[type="checkbox"] + span {
    flex: 1;
}
.options-hint {
    font-style: italic;
    color: #665848;
    font-size: 10px;
    margin-left: 4px;
}
.options-note {
    padding: 6px 10px;
    margin: 0 0 10px;
    background: #2a1f28;
    border-left: 3px solid #c8a86e;
    font-size: 11px;
    color: #a89888;
    font-style: italic;
}
#opt-keybind-table {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.keybind-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    background: #2a1f28;
    border-radius: 3px;
    font-size: 11px;
}
.keybind-row .keybind-label { flex: 1; color: #c8b8a8; }
.keybind-row .keybind-value {
    min-width: 80px;
    padding: 3px 8px;
    background: #0f0a10;
    border: 1px solid #4a3a50;
    border-radius: 3px;
    color: #c8a86e;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    font-size: 10px;
}
.keybind-row.rebinding .keybind-value {
    background: #c8a86e;
    color: #1a1218;
    animation: keybind-pulse 1s ease-in-out infinite;
}
@keyframes keybind-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.keybind-row button {
    background: #3a2a40;
    border: 1px solid #5a4a58;
    color: #c8a86e;
    padding: 3px 10px;
    font-family: monospace;
    font-size: 10px;
    cursor: pointer;
    border-radius: 3px;
}
.keybind-row button:hover { background: #4a3a50; }
.keybind-row.locked .keybind-value { opacity: 0.5; }
.keybind-row.locked button { display: none; }
.keybind-row.locked::after {
    content: '(coming soon)';
    color: #665848;
    font-size: 9px;
    font-style: italic;
}
#options-footer {
    display: flex;
    gap: 10px;
    padding: 12px 20px;
    background: #0f0a10;
    border-top: 1px solid #3a2a38;
}
#options-footer button {
    flex: 1;
    padding: 10px 16px;
    font-family: monospace;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
#options-footer button.primary {
    background: #40a040;
    color: #fff;
}
#options-footer button.primary:hover { background: #50b050; }
#options-footer button.danger {
    background: #a04040;
    color: #fff;
}
#options-footer button.danger:hover { background: #b05050; }

/* Mobile overrides: roomier modal, bigger touch targets, readable text.
   Previously the panel ballooned to 90vw/90vh and the inside text shrunk
   to 10px — illegible. New: tighter modal width (so it doesn't fill the
   screen edge-to-edge), 14-16px text, taller rows for thumb taps. */
@media (max-width: 900px), (max-height: 500px) {
    #options-panel {
        width: min(92vw, 440px);
        max-height: 86vh;
    }
    .options-tab-panel.desktop-only { display: none !important; }
    .options-tab-panel.mobile-only.active { display: block !important; }
    #options-header { padding: 14px 18px 8px; }
    #options-header h2 { font-size: 16px; }
    #options-body { padding: 14px 18px; }
    .options-tab { font-size: 12px; padding: 12px 6px; letter-spacing: 0.5px; }
    .options-row {
        font-size: 14px; padding: 10px 0; gap: 8px;
        min-height: 32px;
    }
    .options-row select { font-size: 13px; padding: 6px 8px; }
    .options-row input[type="checkbox"] { width: 20px; height: 20px; }
    .options-row input[type="range"] { height: 22px; }
    .options-hint { font-size: 11px; }
    .options-note { font-size: 12px; padding: 8px 10px; }
    .keybind-row { font-size: 12px; padding: 8px 10px; }
    .keybind-row .keybind-value { font-size: 11px; min-width: 64px; padding: 4px 8px; }
    .keybind-row button { font-size: 11px; padding: 5px 12px; }
    #options-footer { padding: 12px 16px; gap: 8px; }
    #options-footer button { font-size: 13px; padding: 12px 10px; }
}

/* Mobile options gear button inside #mobile-buttons — styled to match the
   existing Vault button but with a smaller square aspect for the icon */
#mobile-options-btn {
    font-size: 20px;
    line-height: 1;
    padding: 0;
    width: 44px !important;
}

/* View mode toggle — fixed top-left of game screen, always visible */
#viewmode-toggle {
    position: absolute; bottom: 200px; left: 10px;
    z-index: 50; padding: 3px 8px; width: auto;
    background: rgba(30,25,40,0.85); border: 1px solid rgba(200,168,110,0.5);
    border-radius: 4px; color: #c8a86e; font-size: 11px;
    font-family: monospace; cursor: pointer; pointer-events: auto;
}
#viewmode-toggle:hover { background: rgba(60,50,75,0.95); }

/* Death Screen */
#death-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex; align-items: center; justify-content: center;
    z-index: 100;
}
.death-content { text-align: center; }
.death-title {
    font-size: 64px;
    color: #c04040;
    text-shadow: 0 0 30px #800000, 0 0 60px #400000;
    margin-bottom: 16px;
    letter-spacing: 8px;
}
.death-subtitle {
    font-size: 20px; color: #e0d8c8;
    margin-bottom: 8px;
}
.death-info {
    font-size: 14px; color: #887868;
    margin-bottom: 32px;
}
.death-content button {
    width: 220px; margin: 6px;
    padding: 14px; font-size: 16px;
}

/* Minimap */
#minimap {
    position: absolute;
    top: 10px; left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

/* Leaderboard */
.leaderboard-section { margin-top: 20px; max-height: 360px; overflow-y: auto; }
.leaderboard-section h3 { color: #c8a86e; margin-bottom: 10px; }
.leaderboard-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-bottom: 1px solid #2a2530;
    font-size: 14px; cursor: default;
}
.leaderboard-row:hover { background: #2a2530; }
.lb-rank { color: #c8a86e; font-weight: bold; min-width: 32px; }
.lb-info { flex: 1; color: #e0d8c8; }
.lb-fame { color: #aa8844; font-size: 13px; white-space: nowrap; }

#lb-tooltip {
    display: none; position: absolute; z-index: 9999;
    background: #1a1620; border: 1px solid #554840;
    border-radius: 6px; padding: 10px 14px; pointer-events: none;
    font-size: 12px; color: #e0d8c8; min-width: 240px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.lb-tooltip-title { color: #c8a86e; font-weight: bold; margin-bottom: 4px; font-size: 13px; }
.lb-tooltip-sub { color: #aa8844; font-size: 11px; margin-bottom: 8px; letter-spacing: 0.5px; }
.lb-tooltip-equip { display: flex; flex-direction: column; gap: 4px; }
.lb-tooltip-item { display: flex; align-items: center; gap: 6px; color: #b8b0a0; padding: 2px 0; }
.lb-tooltip-sprite { width: 24px; height: 24px; image-rendering: pixelated; flex-shrink: 0; }
.lb-tooltip-sprite-empty { display: inline-block; width: 24px; height: 24px; flex-shrink: 0; background: #2a2030; border: 1px solid #3a2a38; border-radius: 2px; }
.lb-tooltip-slot { color: #887868; font-size: 11px; min-width: 52px; }
.lb-tooltip-tier { color: #c8a86e; font-size: 10px; margin-left: 4px; }
.lb-tooltip-stats { margin-top: 6px; padding-top: 6px; border-top: 1px solid #3a2a38; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; }
.lb-stat { display: flex; justify-content: space-between; gap: 8px; }
.lb-stat-label { color: #887868; font-size: 11px; }
.lb-stat-val { color: #b8b0a0; font-size: 11px; font-weight: bold; }
.lb-stat-hp { color: #e06060; }
.lb-stat-mp { color: #6090e0; }

/* Realm transition overlay */
#realm-transition {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #000;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.4s ease-out;
}

#realm-transition.fade-out {
    opacity: 0;
}

#transition-content {
    text-align: center;
    color: #e8d8c8;
    font-family: monospace;
}

#transition-title {
    font-size: 28px;
    font-weight: bold;
    color: #c8a86e;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 30px;
    text-shadow: 0 0 20px rgba(200, 168, 110, 0.5);
}
/* Loading screen logo — sized so the wordmark sits where the text title
   used to. Same pixelated rendering + glow as the .brand-logo elsewhere
   so the logo reads consistent across login / char-select / loading. */
#transition-logo {
    display: block;
    width: 360px;
    max-width: 70vw;
    height: auto;
    margin: 0 auto 30px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 0 18px rgba(200, 168, 110, 0.5));
}
/* Mobile: the 70vw cap on portrait phones still renders the logo at
   ~280px wide, which dominates the loading screen. Clamp the absolute
   width and tighten the viewport cap so the logo reads as a header,
   not a wall. Also shrink the .brand-logo wordmarks used on login /
   char-select for the same reason. */
@media (max-width: 720px), (orientation: portrait) and (max-width: 900px) {
    #transition-logo {
        width: 180px;
        max-width: 45vw;
        margin: 0 auto 16px;
    }
    .brand-logo {
        width: 160px;
        max-width: 55vw;
    }
    .brand-logo-compact {
        width: 120px;
    }
}

#transition-zone {
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 20px;
    min-height: 30px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

#transition-player-sprite {
    image-rendering: pixelated;
    width: 64px;
    height: 64px;
    margin: 10px auto;
    display: block;
}

#transition-difficulty {
    margin-top: 20px;
}

#transition-skulls {
    font-size: 20px;
    letter-spacing: 4px;
    min-height: 28px;
}

#transition-skulls .skull-filled {
    color: #c04040;
    text-shadow: 0 0 6px rgba(192, 64, 64, 0.6);
}

#transition-skulls .skull-empty {
    color: #333;
}

#transition-diff-label {
    font-size: 11px;
    color: #887868;
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* ------------------------------------------------------------------
 * Mobile: scale down sprite-atlas HUD panels + lift joysticks on top.
 *
 * The atlas-driven panels (`.ui-atlas-panel`, mounted by ui-widgets.js)
 * use a hardcoded displayScale of 2 baked into their pixel dimensions.
 * On a phone in landscape that consumes ~60% of the viewport — the
 * central name banner, central equipment bar, and right-side equip+
 * stats column all overlap the play area and the touch joystick.
 *
 * We can't just `display:none` them because #hud's #stats-panel and
 * #hud-bars children get REPARENTED into the atlas panels at boot —
 * hiding the panels would also hide the stats readout. Scaling via
 * CSS transform is the lowest-risk fix; getBoundingClientRect (which
 * _resolveDependentPositions uses for stacking) honours transforms so
 * vertical stacking of the right-column panels stays consistent.
 *
 * Each panel gets a transform-origin matching its anchor so the
 * scaled box collapses TOWARD the screen edge instead of drifting
 * away from it. The hotbar's existing translateX(-50%) for centering
 * is preserved alongside the scale.
 *
 * Joysticks (z:15) and mobile-only buttons get bumped above the
 * atlas panels' z:9999 so they're always tappable.
 * ------------------------------------------------------------------ */
@media (max-width: 900px), (max-height: 500px) {
    .ui-atlas-panel {
        transform: scale(0.5) !important;
        transform-origin: top left;
    }
    /* Right column collapses toward the right edge so it stays anchored
     * at right:16 instead of drifting inward by half the panel width. */
    .ui-atlas-panel[data-ref="minimap"],
    .ui-atlas-panel[data-ref="equipStats"],
    .ui-atlas-panel[data-ref="invOnly"],
    .ui-atlas-panel[data-ref="invExt"] {
        transform-origin: top right !important;
    }
    /* Minimap ~25% smaller than the other 0.5-scaled panels — it was tall
     * enough to push the inventory's bottom rows off-screen. Shrinking it
     * reflows equipStats/invOnly upward, since _resolveDependentPositions
     * stacks the right column using each panel's scaled (rendered) height. */
    .ui-atlas-panel[data-ref="minimap"] {
        transform: scale(0.375) !important;
    }
    /* invExt (loot bag) — float as a centered bar at the TOP of the
     * viewport when visible so it's obviously accessible on mobile.
     * Keeps full scale (not 0.5) so the 8 cells are tap-target sized.
     * !important beats _resolveDependentPositions' inline style.top. */
    .ui-atlas-panel[data-ref="invExt"] {
        top: 8px !important;
        bottom: auto !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        transform-origin: top center !important;
        z-index: 10000 !important;
    }
    /* Chat shares the bottom-left corner with the movement joystick on
     * mobile. Rather than stack them, chat-toggle drives joystick
     * visibility (see ui-widgets.js _wireChatToggle): chat expanded →
     * joystick hidden; chat collapsed → joystick visible. */
    .ui-atlas-panel[data-ref="chat"] {
        transform-origin: bottom left !important;
    }
    .ui-atlas-panel[data-ref="hotbar"] {
        transform: translateX(-50%) scale(0.5) !important;
        transform-origin: bottom center !important;
    }
    /* Potion ovals: transform-origin top-left so the post-scale visual
     * rect equals the CSS box. The JS in _resolveDependentPositions
     * positions them via `style.left = hr.left - hpW - 8` using
     * getBoundingClientRect().width (which is already the SCALED width).
     * With the previous bottom-center origin, scale(0.5) pulled each
     * potion inward by ~8.5 px from its CSS box — HP ended up nearly
     * flush against the hotbar, MP ended up ~16 px away. Top-left
     * origin makes both gaps symmetric (8 px each). */
    .ui-atlas-panel[data-ref="hpPot"],
    .ui-atlas-panel[data-ref="mpPot"] {
        transform-origin: top left !important;
    }

    /* Joysticks: bottom corners, well clear of (scaled) atlas panels.
     * Movement joystick fits in the bottom-left below the lifted chat
     * panel; aim joystick fits below the right inventory column (which
     * stacks to ~315px tall without invExt, ~390 with — bottom-right
     * corner stays open at common landscape phone heights). z-index
     * already lifted to 10001 above so they sit on top of any panel
     * that bleeds into the corner. */
    #touch-joystick {
        bottom: 16px !important;
        left: 16px !important;
        z-index: 10001 !important;
    }
    /* Aim joystick parks to the LEFT of the right inventory column.
     * Right column = right:16 anchor + ~148 px visible width at scale 0.5
     * (panel.hud.inv_only is 148 native → 148 visible), so its left edge is
     * at right:164. Park the joystick's right edge at right:172 (164 + 8 gap)
     * so the wider 5-column inventory grid never sits under the aim ring,
     * while staying within comfortable right-thumb reach. */
    #touch-aim {
        bottom: 16px !important;
        right: 172px !important;
        z-index: 10001 !important;
    }
    /* Mobile buttons row was anchored at right:320px (desktop HUD width)
     * — on mobile the atlas right column is ~140px wide so 320px puts
     * the buttons in the middle of nothing. Pin them to top-center,
     * away from both atlas columns. */
    #mobile-buttons {
        top: 8px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        z-index: 10001 !important;
    }
    #mobile-options-btn {
        z-index: 10001 !important;
    }
}