/* Z-Index Hierarchy:
 *  10  = HUD elements (health bar, interact prompt, hotbar, crosshair)
 *  15  = Zone banner
 *  20  = Chat, tooltips
 *  28  = Decay overlay
 *  29  = Decay vignette
 *  30  = Damage flash
 *  40  = Panels (inventory, stash, crafting, shop, party, crystal-ball, haven-build)
 *  42  = Item tooltip (above panels)
 *  46  = Edit context menu (above panels & build overlays)
 *  50  = Modal dialogs (pause menu, dialogue, unlock, options)
 *  55  = Death screen
 *  60  = Critical overlays (admin console)
 *  99  = Loading screen
 * 100  = Login screen (child elements use z-index: 1 within)
 * 110  = Intro book overlay (new player / reset)
 */

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

body {
    overflow: hidden;
    background: #111;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #eee;
    -webkit-user-select: none;
    user-select: none;
}

/* Canvas */
#game-canvas {
    display: block;
    width: 100vw;
    height: 100vh;
}

/* ── Shared Panel Base ── */
.os-panel {
    position: fixed;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 16px;
    color: #fff;
    z-index: 40;
    backdrop-filter: blur(4px);
}
.os-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── Login Screen ── */
#login-screen {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    gap: 10px;
    overflow: hidden;
}

#login-screen.hidden {
    display: none;
}

/* Floating pixel particles */
.login-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.login-particles span {
    position: absolute;
    display: block;
    width: 4px;
    height: 4px;
    bottom: -10px;
    animation: float-up 8s linear infinite;
    opacity: 0;
}

.login-particles span:nth-child(1) { left: 10%; background: #d4a017; animation-delay: 0s; animation-duration: 7s; }
.login-particles span:nth-child(2) { left: 30%; background: #66cccc; animation-delay: 1.5s; animation-duration: 9s; }
.login-particles span:nth-child(3) { left: 50%; background: #fff; animation-delay: 3s; animation-duration: 6s; width: 3px; height: 3px; }
.login-particles span:nth-child(4) { left: 70%; background: #d4a017; animation-delay: 4.5s; animation-duration: 10s; }
.login-particles span:nth-child(5) { left: 85%; background: #66cccc; animation-delay: 2s; animation-duration: 8s; width: 3px; height: 3px; }
.login-particles span:nth-child(6) { left: 20%; background: #fff; animation-delay: 5.5s; animation-duration: 7.5s; }

@keyframes float-up {
    0%   { transform: translateY(0); opacity: 0; }
    10%  { opacity: 0.8; }
    90%  { opacity: 0.6; }
    100% { transform: translateY(-100vh); opacity: 0; }
}

.login-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 2.2rem;
    color: #d4a017;
    text-shadow: 0 0 20px rgba(212, 160, 23, 0.4), 0 2px 0 #8a6a10;
    letter-spacing: 4px;
    z-index: 1;
}

.login-subtitle {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    color: #666;
    letter-spacing: 2px;
    z-index: 1;
}

/* Book container */
.login-book {
    display: flex;
    align-items: stretch;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), 0 0 60px rgba(212, 160, 23, 0.08);
    z-index: 1;
    max-width: 90vw;
}

.book-page {
    padding: 32px 28px;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.book-left {
    background: linear-gradient(135deg, #e8d5a3 0%, #f4e4c1 40%, #ecdbb0 100%);
    color: #3a2e1a;
    width: 260px;
    border-radius: 4px 0 0 4px;
    border: 1px solid #c4a66a;
    border-right: none;
    gap: 12px;
}

.book-right {
    background: linear-gradient(225deg, #e8d5a3 0%, #f4e4c1 40%, #ecdbb0 100%);
    color: #3a2e1a;
    width: 280px;
    border-radius: 0 4px 4px 0;
    border: 1px solid #c4a66a;
    border-left: none;
    align-items: center;
    gap: 16px;
}

.book-spine {
    width: 12px;
    background: linear-gradient(90deg, #5a3e1a, #7a5a2a 40%, #5a3e1a);
    box-shadow: inset 2px 0 4px rgba(0,0,0,0.5), inset -2px 0 4px rgba(0,0,0,0.5);
    flex-shrink: 0;
}

.page-ornament {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: #b89a5a;
    text-align: center;
    letter-spacing: 6px;
}

.lore-text {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 0.85rem;
    line-height: 1.7;
    color: #4a3e2a;
    text-align: center;
}

.book-heading {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.75rem;
    color: #5a3e1a;
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
    letter-spacing: 2px;
}

#btn-login {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    color: #fff;
    background: #5865F2;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    box-shadow: 0 4px 0 #3a42a8, 0 6px 12px rgba(0,0,0,0.3);
    line-height: 1.4;
}

#btn-login:hover {
    background: #4752C4;
    transform: translateY(-1px);
    box-shadow: 0 5px 0 #3a42a8, 0 8px 14px rgba(0,0,0,0.3);
}

#btn-login:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #3a42a8, 0 3px 6px rgba(0,0,0,0.3);
}

.book-divider {
    width: 80%;
    border-top: 1px dashed #b89a5a;
}

.book-link {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: #8a6a10;
    text-decoration: none;
    letter-spacing: 1px;
    transition: color 0.2s;
}

.book-link:hover {
    color: #d4a017;
}

/* Responsive: stack book pages vertically on small screens */
@media (max-width: 640px) {
    .login-title { font-size: 1.4rem; letter-spacing: 2px; }
    .login-book { flex-direction: column; max-width: 320px; }
    .book-left, .book-right { width: 100%; min-height: auto; border-radius: 0; border: 1px solid #c4a66a; }
    .book-left { border-radius: 4px 4px 0 0; border-bottom: none; }
    .book-right { border-radius: 0 0 4px 4px; border-top: none; }
    .book-spine { width: 100%; height: 8px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), inset 0 -2px 4px rgba(0,0,0,0.5); }
}

/* ── Loading Screen ── */
#loading-screen {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: #0b0b12;
    z-index: 99;
}

#loading-screen .db-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

#loading-screen .db-loading-text {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.85rem;
    color: var(--os-gold, #c9a84c);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

#loading-screen .db-loading-dots {
    display: flex;
    gap: 10px;
}

#loading-screen .db-loading-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--os-gold, #c9a84c);
    animation: db-dot-bounce 1.2s ease-in-out infinite;
}

#loading-screen .db-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
#loading-screen .db-loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes db-dot-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.3; }
    40%            { transform: translateY(-10px); opacity: 1; }
}

/* ── HUD ── */
#hud {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    display: none;
}

#hud > * {
    pointer-events: auto;
}

/* ── Vitals container (health + mana stacked) ── */
#vitals {
    position: absolute;
    bottom: 86px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    transition: bottom 0.2s ease;
}

.vitals-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bar-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: right;
    width: 30px;
    flex-shrink: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    pointer-events: none;
}

.bar-label--hp      { color: rgba(255, 210, 130, 0.75); }
.bar-label--mana    { color: rgba(120, 175, 255, 0.75); }
.bar-label--stamina { color: rgba(220, 185,  60, 0.80); }
.bar-label--rage    { color: rgba(220, 100,  60, 0.80); }

/* Health bar */
.health-bar {
    position: relative;
    width: clamp(160px, 16vw, 240px);
    height: 28px;
    background: rgba(12, 5, 32, 0.72);
    border: 2px solid rgba(255, 200, 50, 0.4);
    border-radius: 0;
    overflow: hidden;
    z-index: 2;
    box-shadow:
        inset 0 0 14px rgba(80, 28, 140, 0.25),
        0 0 16px rgba(255, 200, 50, 0.12);
}

.health-bar::before {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid rgba(255, 200, 50, 0.55);
    pointer-events: none;
}

#health-fill {
    height: 100%;
    position: relative;
    background: linear-gradient(90deg, #6b1111 0%, #d13b3b 45%, #ff7a7a 100%);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.45);
    transition: width 0.3s, background 0.3s;
}

#health-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.08),
        rgba(255, 255, 255, 0.08) 6px,
        transparent 6px,
        transparent 12px
    );
    opacity: 0.35;
}

#health-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff6d0;
    text-shadow:
        0 0 8px rgba(255, 235, 130, 0.45),
        0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Mana bar — same width as health bar, tucked under it */
.mana-bar {
    position: relative;
    width: clamp(160px, 16vw, 240px);
    height: 22px;
    margin-top: -2px;
    background: rgba(12, 5, 32, 0.72);
    border: 2px solid rgba(80, 140, 255, 0.4);
    border-top: none;
    border-radius: 0;
    overflow: hidden;
    z-index: 1;
    box-shadow:
        inset 0 0 14px rgba(28, 60, 140, 0.25),
        0 0 16px rgba(80, 140, 255, 0.12);
}

.mana-bar::before {
    content: '';
    position: absolute;
    inset: -2px;
    top: 0;
    border: 2px solid rgba(80, 140, 255, 0.55);
    border-top: none;
    pointer-events: none;
}

#mana-fill {
    height: 100%;
    position: relative;
    background: linear-gradient(90deg, #111b6b 0%, #3b5dd1 45%, #7aaeff 100%);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.45);
    transition: width 0.3s;
}

#mana-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.08),
        rgba(255, 255, 255, 0.08) 6px,
        transparent 6px,
        transparent 12px
    );
    opacity: 0.35;
}

#mana-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: #d0e8ff;
    text-shadow:
        0 0 8px rgba(130, 190, 255, 0.45),
        0 1px 3px rgba(0, 0, 0, 0.9);
}

/* XP bar — GW2-style full-width strip at bottom of screen */
.xp-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: rgba(10, 5, 22, 0.88);
    border-top: 1px solid rgba(120, 40, 200, 0.35);
    overflow: visible;
    z-index: 10;
}

.xp-bar::before {
    display: none;
}

#xp-fill {
    height: 100%;
    position: relative;
    background: linear-gradient(90deg, #3d006b 0%, #7722cc 50%, #c066ff 100%);
    box-shadow: 0 0 14px rgba(160, 70, 255, 0.4);
    transition: width 0.4s ease;
}

#xp-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0.12) 4px,
        transparent 4px,
        transparent 8px
    );
    opacity: 0.25;
}

/* Level tooltip — appears above bar on hover */
#xp-text {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    font-weight: 600;
    color: #d8aaff;
    text-shadow: 0 0 8px rgba(180, 90, 255, 0.55), 0 1px 2px rgba(0, 0, 0, 0.9);
    background: rgba(12, 5, 28, 0.88);
    border: 1px solid rgba(140, 60, 220, 0.45);
    padding: 3px 10px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.xp-bar:hover #xp-text {
    opacity: 1;
}

/* Cast bar */
#cast-bar {
    position: absolute;
    bottom: 150px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(160px, 16vw, 240px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    pointer-events: none;
}

#cast-bar-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #cc88ff;
    text-shadow: 0 0 8px rgba(170, 68, 255, 0.9), 0 1px 2px rgba(0,0,0,0.9);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#cast-bar-track {
    width: 100%;
    height: 12px;
    background: rgba(12, 5, 32, 0.85);
    border: 1px solid rgba(170, 68, 255, 0.5);
    overflow: hidden;
    box-shadow: 0 0 10px rgba(170, 68, 255, 0.3), inset 0 0 8px rgba(0,0,0,0.6);
}

#cast-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #5500aa 0%, #aa44ff 60%, #dd88ff 100%);
    box-shadow: inset 0 0 8px rgba(255,255,255,0.15);
    transition: width 0.05s linear;
}

#cast-bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        135deg,
        rgba(255,255,255,0.07),
        rgba(255,255,255,0.07) 5px,
        transparent 5px,
        transparent 10px
    );
}

#cast-bar-timer {
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(220, 180, 255, 0.85);
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}

/* Downed bar */
#downed-bar {
    position: absolute;
    bottom: 150px;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}

.downed-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    color: #ff4444;
    text-shadow: 0 0 8px rgba(255, 68, 68, 0.8);
    letter-spacing: 0.1em;
    animation: downed-pulse 1s ease-in-out infinite;
}

@keyframes downed-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

.downed-track {
    width: 100%;
    height: 10px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,68,68,0.4);
    border-radius: 3px;
    overflow: hidden;
}

#downed-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #cc0000, #ff4444);
    transition: width 0.1s linear;
}

/* Give-up bar (hold E while downed) */
#giveup-bar {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin-top: 4px;
}
.giveup-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.45rem;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.06em;
}
.giveup-track {
    width: 100%;
    height: 5px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    overflow: hidden;
}
#giveup-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #888, #eee);
    transition: width 0.05s linear;
}

/* Inventory grayed out while downed — blocks all slot interaction */
#hotbar-row.inv--downed .hotbar-slot,
#hotbar-row.inv--downed .inv-slot,
#hotbar-row.inv--downed .equip-slot {
    filter: grayscale(1) brightness(0.35);
    pointer-events: none;
}

/* Connection status — hidden by default, shown via CSS when inventory/chat open, or via inline style for admin/edit */
.connection-status {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px 6px 0 0;
    font-size: 0.75rem;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    align-self: flex-end;
    cursor: default;
    pointer-events: auto;
}

/* Show when inventory is open or chat is active */
#hud.hud--inv-open ~ #chat-container .connection-status,
#chat-container.active .connection-status {
    display: flex;
}

/* Ping tooltip — shown on hover via CSS, hidden in edit mode */
.ping-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(12, 5, 32, 0.92);
    border: 1px solid rgba(255, 200, 50, 0.35);
    padding: 4px 10px;
    font-size: 0.7rem;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    pointer-events: none;
    z-index: 100;
}
.connection-status:not(.edit-mode):hover .ping-tooltip {
    display: block;
}

.connection-status .status-dot {
    font-size: 0.65rem;
    line-height: 1;
}

.connection-status.offline .status-dot {
    color: #888;
}

.connection-status.online .status-dot {
    color: #44cc44;
    animation: pulse 2s ease-in-out infinite;
}

.connection-status.admin {
    border-color: rgba(114, 137, 218, 0.4);
}

.connection-status.admin .status-dot {
    color: #7289DA;
    animation: pulse 2s ease-in-out infinite;
}

.connection-status.edit-mode {
    border-color: rgba(68, 136, 255, 0.6);
    background: rgba(15, 30, 60, 0.9);
    cursor: context-menu;
    pointer-events: auto;
}

.connection-status.edit-mode .status-dot {
    color: #4488ff;
}

.connection-status.edit-mode-unsaved {
    border-color: rgba(255, 170, 34, 0.7);
    background: rgba(50, 32, 8, 0.9);
}

.connection-status.edit-mode-unsaved .status-dot {
    color: #ffaa22;
    animation: pulse 1s ease-in-out infinite;
}

#edit-context-menu {
    display: none;
    position: fixed;
    z-index: 46;
    background: rgba(10, 15, 25, 0.97);
    border: 1px solid rgba(68, 136, 255, 0.5);
    border-radius: 6px;
    padding: 4px 0;
    min-width: 200px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}

#edit-context-menu button {
    display: block;
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: none;
    color: #ccd8f0;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

#edit-context-menu button:hover {
    background: rgba(68, 136, 255, 0.2);
    color: #ffffff;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* World clock */
.world-clock {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 6px 18px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    pointer-events: none;
    min-width: 80px;
}

.world-clock-period {
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(220, 220, 220, 0.65);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.world-clock-value {
    font-size: 1.3rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    color: #f0f0f0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

/* ── Zone Timer ── */
#zone-timer {
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 20px;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 180, 50, 0.35);
    border-radius: 8px;
    pointer-events: none;
    min-width: 120px;
    transition: border-color 0.4s;
}

#zone-timer.zt-urgent {
    border-color: rgba(255, 60, 60, 0.7);
    animation: zt-pulse 1s ease-in-out infinite;
}

@keyframes zt-pulse {
    0%, 100% { background: rgba(0, 0, 0, 0.65); }
    50%       { background: rgba(80, 0, 0, 0.75); }
}

.zt-label {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 180, 50, 0.8);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

#zone-timer.zt-urgent .zt-label {
    color: rgba(255, 100, 100, 0.9);
}

.zt-value {
    font-size: 1.4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
    color: #f5d080;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

#zone-timer.zt-urgent .zt-value {
    color: #ff7070;
}

.zt-track {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    overflow: hidden;
}

.zt-fill {
    height: 100%;
    background: linear-gradient(90deg, #f5a030, #f5d080);
    border-radius: 2px;
    transition: width 0.5s linear, background 0.4s;
    width: 100%;
}

#zone-timer.zt-urgent .zt-fill {
    background: linear-gradient(90deg, #cc2020, #ff6060);
}

/* ── Decay Indicator ── */
#top-right-hud {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
}

#decay-indicator {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(180, 0, 0, 0.4);
    border-radius: 8px;
    min-width: 130px;
}

#quest-tracker {
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 210, 100, 0.25);
    border-radius: 8px;
    padding: 7px 11px;
    min-width: 150px;
    max-width: 200px;
}

.qt-header {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 210, 100, 0.7);
    margin-bottom: 5px;
}

.qt-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.8);
    padding: 2px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.qt-entry:last-child { border-bottom: none; }

.qt-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qt-progress {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}

.qt-progress.done { color: rgba(100, 220, 100, 0.9); }

.qt-entry.qt-done .qt-name { color: rgba(100, 220, 100, 0.8); }

.qt-turnin {
    font-size: 0.55rem;
    color: rgba(255, 210, 100, 0.85);
    white-space: nowrap;
}


.decay-ind-label {
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 160, 100, 0.9);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
}

.decay-ind-track {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    overflow: hidden;
}

.decay-ind-fill {
    height: 100%;
    width: 0%;
    background: hsl(120, 90%, 45%);
    border-radius: 2px;
    transition: width 2s ease, background 2s ease;
}


/* Interact prompt */
#interact-prompt {
    position: absolute;
    bottom: 210px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    padding: 8px 20px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Dialogue box */
#dialogue-box {
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    width: 500px;
    max-width: 90vw;
    background: rgba(12, 5, 32, 0.95);
    border: 1px solid rgba(200, 126, 18, 0.55);
    border-radius: 0;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255, 200, 50, 0.25),
        inset 0 0 16px rgba(80, 28, 140, 0.28),
        0 10px 24px rgba(0, 0, 0, 0.7);
}

#dialogue-box::before {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid rgba(255, 200, 50, 0.6);
    pointer-events: none;
}

#dialogue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px 6px;
}

#dialogue-name {
    font-weight: 700;
    color: var(--os-gold);
    font-size: 0.95rem;
    font-family: 'Press Start 2P', monospace;
    text-shadow: 0 0 6px rgba(255, 200, 50, 0.35);
}


#dialogue-body {
    padding: 4px 16px 10px;
}

#dialogue-text {
    line-height: 1.5;
    color: var(--os-text);
    white-space: pre-line;
    font-size: 0.88rem;
}

#dialogue-footer {
    padding: 0 16px 12px;
}

/* Continue prompt */
#dialogue-continue {
    text-align: center;
    color: var(--os-cyan);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 0 2px;
    animation: dialogue-pulse 1.5s ease-in-out infinite;
}

#dialogue-continue:hover {
    color: #fff;
}

@keyframes dialogue-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Choice buttons */
#dialogue-choices {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 6px;
}

.dialogue-choice-btn {
    width: 100%;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--os-text);
    background: rgba(80, 28, 140, 0.25);
    border: 1px solid rgba(255, 200, 50, 0.35);
    border-radius: 0;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, border-color 0.15s;
}

.dialogue-choice-btn:hover {
    background: rgba(80, 28, 140, 0.45);
    border-color: rgba(255, 200, 50, 0.6);
    color: #fff;
}

/* Quest info panel */
.quest-title {
    font-weight: 700;
    color: var(--os-gold);
    font-size: 0.95rem;
    margin-bottom: 6px;
}

.quest-objectives {
    color: var(--os-text);
    font-size: 0.82rem;
    line-height: 1.5;
    padding: 6px 0 6px 10px;
    border-left: 2px solid rgba(255, 200, 50, 0.35);
    margin-bottom: 8px;
}

.quest-rewards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(6, 3, 18, 0.6);
    border-radius: 0;
    border: 1px solid rgba(255, 200, 50, 0.2);
    font-size: 0.8rem;
}

.quest-reward-item {
    color: #6ddb6d;
    font-weight: 600;
}

.quest-reward-label {
    color: #888;
    font-size: 0.72rem;
    margin-bottom: 2px;
}

/* Action buttons (Accept/Decline/Complete) */
#dialogue-actions {
    display: flex;
    gap: 8px;
    padding-top: 8px;
}

.dialogue-action-btn {
    flex: 1;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    border: 1px solid rgba(255, 200, 50, 0.35);
    border-radius: 0;
    cursor: pointer;
    transition: background 0.15s;
}

.dialogue-action-btn.accept {
    background: rgba(68, 204, 68, 0.6);
}

.dialogue-action-btn.accept:hover {
    background: rgba(68, 204, 68, 1);
}

.dialogue-action-btn.decline {
    background: rgba(100, 100, 100, 0.6);
}

.dialogue-action-btn.decline:hover {
    background: rgba(100, 100, 100, 0.9);
}

.dialogue-action-btn.complete {
    background: rgba(80, 28, 140, 0.7);
}

.dialogue-action-btn.complete:hover {
    background: rgba(88, 101, 242, 1);
}

/* ── Pause Menu ── */
#menu-overlay {
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    background: transparent;
    z-index: 50;
}
#menu-overlay > .menu-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 24px 32px;
    position: relative;
}

.menu-btn {
    padding: 12px 40px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: rgba(88, 101, 242, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    cursor: pointer;
    min-width: 200px;
    transition: background 0.2s;
    text-align: center;
    box-sizing: border-box;
}

.menu-btn:hover {
    background: rgba(88, 101, 242, 1);
}

.menu-btn.danger {
    background: rgba(200, 50, 50, 0.7);
}

.menu-btn.danger:hover {
    background: rgba(200, 50, 50, 1);
}

/* Options panel */
#options-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent;
    z-index: 50;
}

#options-panel {
    position: relative;
    background: rgba(20, 20, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 24px 32px;
    min-width: 280px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
}

.options-section {
    width: 100%;
    margin-bottom: 8px;
}

.options-section-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.options-coming-soon {
    font-size: 0.65rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(255, 200, 50, 0.7);
    background: rgba(255, 200, 50, 0.1);
    border: 1px solid rgba(255, 200, 50, 0.2);
    border-radius: 4px;
    padding: 1px 6px;
}

.options-disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* Volume controls */
#volume-controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 200px;
    padding: 10px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.volume-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.volume-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    width: 48px;
    flex-shrink: 0;
}

.volume-slider {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(114, 137, 218, 0.9);
    cursor: pointer;
}

.volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(114, 137, 218, 0.9);
    border: none;
    cursor: pointer;
}

.mute-btn {
    font-size: 0.7rem;
    padding: 2px 8px;
    color: #aaa;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.mute-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.mute-btn.muted {
    background: rgba(200, 50, 50, 0.5);
    color: #fff;
}

/* Armor color swatches (options panel) */
.options-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.color-swatch {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.1s, border-color 0.1s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.color-swatch:hover {
    transform: scale(1.2);
}

.color-swatch.active {
    border-color: #fff;
    transform: scale(1.15);
}

/* Toggle row (options panel) */
.toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 2px 0;
    user-select: none;
}

.toggle-label {
    flex: 1;
    font-size: 0.8rem;
    color: #ccc;
}

.toggle-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-track {
    position: relative;
    width: 36px;
    height: 20px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    transition: background 0.2s;
    flex-shrink: 0;
}

.toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    background: #888;
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}

.toggle-checkbox:checked + .toggle-track {
    background: rgba(100, 200, 120, 0.5);
}

.toggle-checkbox:checked + .toggle-track .toggle-thumb {
    transform: translateX(16px);
    background: #6ec87e;
}

/* ── Party Panel ── */
#party-panel {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 200px;
    background: rgba(12, 5, 32, 0.85);
    border: 1px solid rgba(255, 200, 50, 0.25);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--os-text, #f0f0f0);
    font-size: 0.78rem;
    box-shadow: 0 0 10px rgba(80, 200, 240, 0.15);
    user-select: none;
    z-index: 40;
}

/* Pixel corner gems — shared across game panels */
.panel-corner-tl,
.panel-corner-tr,
.panel-corner-bl,
.panel-corner-br {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--os-gold, #ffc832);
    box-shadow: 0 0 6px rgba(255, 200, 50, 0.8);
    pointer-events: none;
    z-index: 1;
}
.panel-corner-tl { top: -2px;    left: -2px;  }
.panel-corner-tr { top: -2px;    right: -2px; }
.panel-corner-bl { bottom: -2px; left: -2px;  }
.panel-corner-br { bottom: -2px; right: -2px; }

/* Hide inventory panel corners until open */
#inventory-panel .panel-corner-tl,
#inventory-panel .panel-corner-tr,
#inventory-panel .panel-corner-bl,
#inventory-panel .panel-corner-br {
    display: none;
}
#inventory-panel.open .panel-corner-tl,
#inventory-panel.open .panel-corner-tr,
#inventory-panel.open .panel-corner-bl,
#inventory-panel.open .panel-corner-br {
    display: block;
}

/* Shared close button for all panels */
.panel-close-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    font-size: 1rem;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    transition: color 0.15s;
    margin-left: auto;
}
.panel-close-btn:hover {
    color: var(--os-gold, #f0c040);
}

/* Close [×] button — used across all game panels */
.panel-close-x {
    background: none;
    border: none;
    color: rgba(220, 60, 60, 0.8);
    font-size: calc(1.5rem + 5px);
    font-family: 'Press Start 2P', monospace;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    flex-shrink: 0;
    transition: color 0.15s;
}
.panel-close-x:hover {
    color: #ff4444;
}

.party-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 200, 50, 0.2);
    padding-bottom: 5px;
}

.party-title {
    font-weight: 700;
    font-size: 0.85rem;
    color: rgba(255, 200, 50, 0.9);
    letter-spacing: 0.05em;
}

.party-hint {
    font-size: 0.62rem;
    color: rgba(200, 200, 200, 0.5);
}

.party-btn {
    background: rgba(80, 28, 140, 0.4);
    border: 1px solid rgba(255, 200, 50, 0.3);
    border-radius: 4px;
    color: var(--os-text, #f0f0f0);
    font-size: 0.75rem;
    padding: 4px 10px;
    cursor: pointer;
    transition: background 0.15s;
    width: 100%;
    margin-top: 5px;
}

.party-btn:hover {
    background: rgba(80, 28, 140, 0.7);
}

.party-btn-sm {
    width: auto;
    padding: 3px 7px;
    margin-top: 0;
    font-size: 0.7rem;
}

.party-btn-danger {
    border-color: rgba(200, 60, 60, 0.4);
    background: rgba(120, 20, 20, 0.4);
}

.party-btn-danger:hover {
    background: rgba(160, 30, 30, 0.7);
}

.party-join-row {
    display: flex;
    gap: 5px;
    margin-top: 5px;
}

.party-join-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 200, 50, 0.2);
    border-radius: 4px;
    color: #f0f0f0;
    font-size: 0.75rem;
    padding: 3px 6px;
    outline: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    min-width: 0;
}

.party-join-input:focus {
    border-color: rgba(255, 200, 50, 0.5);
}

.party-join-row .party-btn {
    width: auto;
    margin-top: 0;
    white-space: nowrap;
}

.party-code-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    border: 1px solid rgba(255, 200, 50, 0.15);
}

.party-code-label {
    color: rgba(200, 200, 200, 0.6);
    font-size: 0.7rem;
}

.party-code-value {
    font-family: monospace;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: rgba(255, 200, 50, 0.95);
    flex: 1;
}

.party-members-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 6px;
    max-height: 120px;
    overflow-y: auto;
}

.party-member {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 5px;
    border-radius: 3px;
    background: rgba(80, 28, 140, 0.2);
    border: 1px solid rgba(255, 200, 50, 0.1);
    font-size: 0.72rem;
    gap: 4px;
}

.party-member.party-leader {
    border-color: rgba(255, 200, 50, 0.3);
    background: rgba(80, 28, 140, 0.35);
}

.party-member-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #e8e8e8;
}

.party-member.party-leader .party-member-name {
    color: rgba(255, 200, 50, 0.9);
}

.party-member-level {
    color: rgba(180, 180, 240, 0.8);
    font-size: 0.68rem;
    flex-shrink: 0;
}

.party-member-zone {
    color: rgba(160, 160, 160, 0.6);
    font-size: 0.62rem;
    flex-shrink: 0;
    max-width: 55px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Chat ── */
#chat-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 320px;
    z-index: 20;
    pointer-events: none;
    display: flex;
    flex-direction: column;
}

#chat-container.active {
    pointer-events: auto;
}

#chat-tabs {
    display: none;
    gap: 1px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px 6px 0 0;
    padding: 4px 4px 0;
    pointer-events: auto;
}

#chat-container.active #chat-tabs,
#chat-container.inv-open #chat-tabs {
    display: flex;
}

/* Show read-only messages + tabs when inventory is open (no input) */
#chat-container.inv-open #chat-messages {
    display: block;
    border-radius: 0 0 6px 6px;
    pointer-events: auto;
}
#chat-container.inv-open #chat-tabs {
    pointer-events: auto;
}

.chat-tab {
    flex: 1;
    padding: 4px 8px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.72rem;
    font-family: inherit;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: color 0.15s, border-color 0.15s;
}

.chat-tab:hover {
    color: rgba(255, 255, 255, 0.75);
}

.chat-tab.active {
    color: #fff;
    border-bottom-color: #7289DA;
}

.chat-tab .tab-badge {
    display: inline-block;
    background: #cc3333;
    color: #fff;
    font-size: 0.6rem;
    border-radius: 8px;
    padding: 0 4px;
    margin-left: 3px;
    line-height: 1.5;
    vertical-align: middle;
}

#chat-messages {
    max-height: 180px;
    overflow-y: auto;
    padding: 8px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 6px;
    font-size: 0.85rem;
    scrollbar-width: thin;
    pointer-events: auto;
}

#chat-container.active #chat-messages {
    border-radius: 0 0 6px 6px;
}

.chat-msg {
    margin-bottom: 4px;
    line-height: 1.4;
}

.chat-sender {
    font-weight: 600;
}

.chat-system  .chat-sender { color: #FFD700; }
.chat-player  .chat-sender { color: #7289DA; }
.chat-whisper .chat-sender { color: #da7bd2; }
.chat-party   .chat-sender { color: #44cc88; }
.chat-loot    .chat-sender { color: #e4a83c; }

#chat-input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0 0 6px 6px;
    color: #eee;
    font-size: 0.85rem;
    outline: none;
    display: none;
    -webkit-user-select: text;
    user-select: text;
}

#chat-container.active #chat-input {
    display: block;
}

/* ── Hotbar ── */
#hotbar-row {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

#inv-bottom-row {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 4px;
}

/* Left column: relic slot above ability panel (M1/M2) */
#ability-column {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

/* Right column: overflow grid above hotbar */
#inv-right-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

/* Relic slot — same size as hotbar/grid slots.
   Uses .equip-slot.relic-slot (specificity 0,2,0) to beat .equip-slot (0,1,0) which sets 50px. */
.equip-slot.relic-slot {
    width: clamp(44px, 4.5vw, 60px);
    height: clamp(44px, 4.5vw, 60px);
    border-color: rgba(170, 68, 255, 0.35);
}
.equip-slot.relic-slot:hover {
    border-color: rgba(170, 68, 255, 0.65);
}
.equip-slot.relic-slot.filled {
    border-color: rgba(170, 68, 255, 0.7);
}

/* Haven build button — separated after hotbar */
#inv-bottom-row #haven-build-btn {
    margin-left: 4px;
    align-self: flex-end;
}

#ability-panel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.ability-slot {
    position: relative;
    width: clamp(44px, 4.5vw, 60px);
    height: 28px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 6px;
    overflow: hidden;
    cursor: default;
}

.ability-slot:hover {
    border-color: rgba(255, 255, 255, 0.35);
}

/* Combined M1/M2 attack slot — side-by-side sub-slots */
.ability-slot--attack {
    display: flex;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.ability-sub {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    height: 100%;
    cursor: default;
    overflow: hidden;
}

/* Divider between M1 and M2 when both visible */
.ability-sub:first-child {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.ability-sub:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Ability icon sits behind, faded */
.ability-sub .ability-icon,
.ability-sub .ability-icon-m2 {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    opacity: 0.5;
    pointer-events: none;
    z-index: 2;
}

/* Mouse icon sits in front, prominent */
.mouse-btn-icon {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 0 3px rgba(255, 200, 50, 0.4));
}

/* When M1/M2 share the same ability, hide M2 sub-slot */
.ability-slot--attack.ability-same #ability-m2 {
    display: none;
}

.ability-slot--attack.ability-same #ability-m1 {
    border-right: none;
}

.ability-slot--attack.ability-same #ability-m1 .ability-icon {
    font-size: 1.1rem;
    opacity: 0.5;
}

.ability-btn-label {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
    font-weight: 600;
}

.ability-icon {
    flex: 1;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1;
}

/* standalone .ability-icon-m2 sizing handled by .ability-sub rules */

.ability-cd-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    border-radius: 6px;
    z-index: 2;
}

.ability-sub .ability-cd-overlay {
    font-size: 0.6rem;
    border-radius: 4px;
}

/* Grayed-out ability slots during realm cast */
.ability-slot--locked {
    opacity: 0.4;
    filter: grayscale(1);
    pointer-events: none;
}

/* Relic slot cooldown sweep overlay (conic-gradient set by JS) */
.relic-cooldown-sweep {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    pointer-events: none;
}

#hotbar {
    display: flex;
    gap: 4px;
}

.hotbar-slot {
    position: relative;
    width: clamp(44px, 4.5vw, 60px);
    height: clamp(44px, 4.5vw, 60px);
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hotbar-slot.active {
    border-color: rgba(114, 137, 218, 0.8);
    box-shadow: 0 0 8px rgba(114, 137, 218, 0.4);
}

.slot-key {
    position: absolute;
    top: 2px;
    left: 5px;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
}

.item-icon {
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.item-label {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin-top: 2px;
    max-width: 56px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-qty {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.ammo-count {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    color: #f0c040;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    pointer-events: none;
}

/* Realm anchor charge counter — purple */
.ammo-count.realm-charges {
    color: #cc44ff;
    text-shadow: 0 0 6px rgba(170, 68, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* Mana cost badge — blue */
.ammo-count--mana {
    color: #7aaeff;
    text-shadow: 0 0 6px rgba(80, 140, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* ── Resource bar colour modifiers ── */
/* Stamina — yellow/gold */
.mana-bar.mana-bar--stamina {
    border-color: rgba(210, 170, 40, 0.45);
    box-shadow: inset 0 0 14px rgba(120, 80, 10, 0.25), 0 0 16px rgba(210, 170, 40, 0.14);
}
.mana-bar.mana-bar--stamina::before {
    border-color: rgba(220, 185, 50, 0.55);
}
.mana-bar.mana-bar--stamina #mana-fill {
    background: linear-gradient(90deg, #4a2e00 0%, #b87800 45%, #f0c830 100%);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.45);
}
.mana-bar.mana-bar--stamina #mana-text {
    color: #fff0b0;
    text-shadow: 0 0 8px rgba(240, 200, 80, 0.5), 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Rage — orange/red, starts empty */
.mana-bar.mana-bar--rage {
    border-color: rgba(210, 70, 30, 0.45);
    box-shadow: inset 0 0 14px rgba(120, 30, 10, 0.25), 0 0 16px rgba(210, 70, 30, 0.14);
}
.mana-bar.mana-bar--rage::before {
    border-color: rgba(220, 80, 40, 0.55);
}
.mana-bar.mana-bar--rage #mana-fill {
    background: linear-gradient(90deg, #4a0800 0%, #c02800 45%, #ff6020 100%);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.45), 0 0 14px rgba(255, 60, 0, 0.25);
}
.mana-bar.mana-bar--rage #mana-text {
    color: #ffd0b0;
    text-shadow: 0 0 8px rgba(255, 120, 50, 0.5), 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* ── Item Tooltip ── */
#item-tooltip {
    position: fixed;
    z-index: 42;
    background: rgba(8, 6, 18, 0.96);
    border: 1px solid rgba(110, 80, 220, 0.45);
    border-radius: 7px;
    padding: 10px 13px;
    color: #ddd4f0;
    font-size: 0.78rem;
    max-width: 260px;
    min-width: 170px;
    pointer-events: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7);
    line-height: 1.4;
}
.tt-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}
.tt-type {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    flex-shrink: 0;
}
.tt-type.weapon     { background: rgba(180, 50, 50, 0.4); color: #ff9999; }
.tt-type.armor      { background: rgba(50, 110, 200, 0.4); color: #99ccff; }
.tt-type.consumable { background: rgba(50, 180, 50, 0.4); color: #99ff99; }
.tt-type.material   { background: rgba(190, 120, 40, 0.4); color: #ffcc88; }
.tt-type.quest      { background: rgba(130, 50, 200, 0.4); color: #cc99ff; }
.tt-type.recipe     { background: rgba(200, 180, 50, 0.4); color: #ffe088; }
.tt-type.utility    { background: rgba(50, 160, 190, 0.4); color: #88ddee; }
.tt-type.relic      { background: rgba(160, 60, 240, 0.4); color: #cc99ff; }
.tt-type.ammunition { background: rgba(180, 160, 80, 0.4); color: #ddd488; }
.tt-grade-row { font-size: 0.72rem; margin-top: 1px; }
.tt-grade-row b { font-weight: 700; }
.tt-grade-f { color: #aaa; }
.tt-grade-d { color: #7ddd7d; }
.tt-grade-c { color: #88bbff; }
.tt-grade-b { color: #c088ff; }
.tt-grade-a { color: #ffaa55; }
.tt-grade-s { color: #ffd94a; }
.tt-desc {
    color: #9a90b8;
    font-size: 0.72rem;
    font-style: italic;
    margin-bottom: 2px;
}
.tt-divider {
    border-top: 1px solid rgba(110, 80, 220, 0.2);
    margin: 6px 0;
}
.tt-ability { margin: 0; }
.tt-ab-header {
    font-size: 0.76rem;
    color: #c8b4ff;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 4px;
}
.tt-ab-slot {
    display: inline-block;
    background: rgba(70, 50, 140, 0.55);
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 0.6rem;
    color: #9990cc;
    margin-right: 4px;
    vertical-align: middle;
}
.tt-ab-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 10px;
    font-size: 0.7rem;
    color: #7a7090;
}
.tt-ab-stats b  { color: #ccc0e8; font-weight: 600; }
.tt-ab-stats em { font-style: normal; color: #6db87a; font-size: 0.65rem; }
.tt-stat  { font-size: 0.72rem; color: #9a90b8; margin-top: 3px; }
.tt-stat b { color: #ccc0e8; }
.tt-sell  { font-size: 0.72rem; color: #c8a83a; }
.tt-realmbound {
    font-size: 0.65rem;
    font-weight: 600;
    color: #c084fc;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
}

/* ── Realmbound Item Glow ── */
.realmbound {
    border-color: rgba(168, 85, 247, 0.7) !important;
    box-shadow: 0 0 6px rgba(168, 85, 247, 0.35), inset 0 0 4px rgba(168, 85, 247, 0.1);
}

/* ── Equipment Panel ── */
#equipment-panel {
    display: none;
    flex-direction: column;
    position: absolute;
    right: calc(100% + 10px);
    bottom: 0;
    background: rgba(15, 20, 35, 0.92);
    border: 1px solid rgba(114, 137, 218, 0.35);
    border-radius: 10px;
    padding: 10px 12px 12px;
    min-width: 140px;
}

#inventory-panel.open #equipment-panel {
    display: flex;
}

.equip-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.equip-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.equip-tab-btn {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 5px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 3px 0;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.equip-tab-btn:hover {
    border-color: rgba(114, 137, 218, 0.5);
    color: rgba(255, 255, 255, 0.8);
}

.equip-tab-btn.active {
    background: rgba(50, 60, 100, 0.5);
    border-color: rgba(114, 137, 218, 0.65);
    color: rgba(255, 255, 255, 0.92);
}

#stats-panel {
    display: none;
    flex-direction: column;
    gap: 2px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.75);
    min-width: 130px;
}

#stats-panel.visible {
    display: flex;
}

.unspent-badge {
    text-align: center;
    padding: 3px 4px;
    background: rgba(100, 80, 200, 0.25);
    border: 1px solid rgba(170, 120, 255, 0.45);
    border-radius: 5px;
    color: #ccaaff;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.stat-alloc-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.stat-alloc-name {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.6rem;
    font-weight: 600;
    width: 56px;
    flex-shrink: 0;
    white-space: nowrap;
}

.stat-alloc-val {
    font-weight: 600;
    color: #8cb8ff;
    flex: 1;
    text-align: right;
    padding-right: 4px;
}

.stat-alloc-btn {
    background: rgba(100, 80, 200, 0.4);
    border: 1px solid rgba(114, 137, 218, 0.55);
    border-radius: 4px;
    color: #fff;
    font-size: 0.8rem;
    line-height: 1;
    padding: 1px 6px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.1s;
}

.stat-alloc-btn:hover {
    background: rgba(114, 137, 218, 0.5);
}

.stat-alloc-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.stats-computed-section {
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.6;
}

.stats-computed-section .stat-line {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.stats-computed-section .stat-value {
    color: #8cb8ff;
    font-weight: 600;
}

.stats-computed-section .stat-value.damage { color: #ff9999; }
.stats-computed-section .stat-value.armor  { color: #99ccff; }
.stats-computed-section .stat-value.speed  { color: #99ff99; }
.stats-computed-section .stat-value.health { color: #ffcc88; }

.equip-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, auto);
    gap: 4px;
    justify-items: center;
}

/* Body-shaped layout — centered items span both columns */
.equip-slot[data-slot="head"]  { grid-column: 1 / -1; }
.equip-slot[data-slot="chest"] { grid-column: 1 / -1; }
.equip-slot[data-slot="legs"]  { grid-column: 1 / -1; }

.equip-slot {
    position: relative;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: default;
    transition: border-color 0.15s;
}

.equip-slot:hover {
    border-color: rgba(114, 137, 218, 0.5);
}

.equip-slot.filled {
    border-color: rgba(114, 137, 218, 0.6);
    background: rgba(50, 60, 100, 0.3);
}

.equip-slot.filled:hover {
    border-color: rgba(200, 120, 80, 0.7);
    cursor: pointer;
}

.equip-slot.drag-over {
    border-color: rgba(114, 218, 137, 0.9);
    box-shadow: 0 0 10px rgba(114, 218, 137, 0.6);
}

.equip-slot.can-receive {
    border-color: rgba(114, 218, 137, 0.55);
    box-shadow: 0 0 6px rgba(114, 218, 137, 0.25);
}

.equip-slot.filled[draggable="true"] {
    cursor: grab;
}

.equip-slot.dragging {
    opacity: 0.3;
    border-style: dashed;
}

.equip-label {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    pointer-events: none;
}

.equip-slot.filled .equip-label {
    display: none;
}

#equip-stats {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.6;
}

#equip-stats .stat-line {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

#equip-stats .stat-value {
    color: #8cb8ff;
    font-weight: 600;
}

#equip-stats .stat-value.damage { color: #ff9999; }
#equip-stats .stat-value.armor  { color: #99ccff; }
#equip-stats .stat-value.speed  { color: #99ff99; }
#equip-stats .stat-value.health { color: #ffcc88; }

/* ── Inventory Panel ── */
/* Always-visible panel: ability+hotbar always shown.
   .open adds border/bg, reveals overflow grid inside inv-right-col and × button. */
#inventory-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 6px 8px;
    border-radius: 0;
    border: 1px solid transparent;
    position: relative;
    transition: border-color 0.12s, background 0.12s;
    background: transparent;
    box-shadow: none;
}

#inventory-panel.open {
    background: rgba(12, 5, 32, 0.92);
    border-color: rgba(200, 126, 18, 0.55);
}

/* Overflow grid (slots 6-10): hidden; appears above hotbar inside inv-right-col when open */
#inventory-grid {
    display: none;
    gap: 4px;
    flex-direction: row;
}

#inventory-panel.open #inventory-grid {
    display: flex;
}

/* Inventory close — shown as a [TAB] hint, not an × button */
#inventory-close {
    display: none;
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    padding: 0;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.38rem;
    color: rgba(255, 200, 50, 0.4);
    letter-spacing: 0.5px;
    cursor: pointer;
    pointer-events: auto;
    transition: color 0.15s;
}

#inventory-close:hover {
    color: rgba(255, 200, 50, 0.75);
    background: none;
    box-shadow: none;
}

#inventory-panel.open #inventory-close {
    display: block;
}

.grid-slot {
    position: relative;
    width: clamp(44px, 4.5vw, 60px);
    height: clamp(44px, 4.5vw, 60px);
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.grid-slot:hover {
    border-color: rgba(114, 137, 218, 0.5);
}

/* ── Drag-and-drop ── */
.hotbar-slot[draggable="true"],
.grid-slot[draggable="true"] {
    cursor: grab;
}

.hotbar-slot.dragging,
.grid-slot.dragging {
    opacity: 0.3;
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.3);
}

.hotbar-slot.drag-over,
.grid-slot.drag-over {
    border-color: rgba(114, 137, 218, 0.9);
    box-shadow: 0 0 10px rgba(114, 137, 218, 0.6);
}

/* ── Shop Panel ── */
#shop-panel {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    z-index: 40;
}

.shop-window {
    background: rgba(12, 5, 32, 0.95);
    border: 1px solid rgba(200, 126, 18, 0.55);
    border-radius: 0;
    padding: 20px;
    min-width: 360px;
    max-width: 90vw;
    box-shadow:
        0 0 0 1px rgba(255, 200, 50, 0.25),
        inset 0 0 16px rgba(80, 28, 140, 0.25),
        0 10px 24px rgba(0, 0, 0, 0.7);
    position: relative;
}

.shop-window::before {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid rgba(255, 200, 50, 0.6);
    pointer-events: none;
}

.shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.shop-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.shop-tab {
    flex: 1;
    padding: 6px 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--os-muted);
    background: rgba(80, 28, 140, 0.15);
    border: 1px solid rgba(255, 200, 50, 0.25);
    border-radius: 0;
    cursor: pointer;
    transition: all 0.2s;
}

.shop-tab:hover {
    color: var(--os-text);
    background: rgba(80, 28, 140, 0.35);
}

.shop-tab.active {
    color: var(--os-gold);
    background: rgba(80, 28, 140, 0.55);
    border-color: rgba(255, 200, 50, 0.6);
}

.shop-tab:disabled,
.shop-tab.disabled {
    color: rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
    cursor: not-allowed;
    pointer-events: none;
}

.shop-empty {
    text-align: center;
    color: var(--os-muted);
    font-size: 0.85rem;
    padding: 20px 0;
}

.shop-header h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--os-gold);
    font-family: 'Press Start 2P', monospace;
}


.shop-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: rgba(6, 3, 18, 0.6);
    border: 1px solid rgba(255, 200, 50, 0.2);
    border-radius: 0;
    gap: 12px;
}

.shop-item-info {
    flex: 1;
}

.shop-item-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--os-text);
}

.shop-item-desc {
    font-size: 0.75rem;
    color: var(--os-muted);
    margin-top: 2px;
}

.shop-item-price {
    font-size: 0.8rem;
    color: #cc8844;
    margin-top: 3px;
}

.shop-item-price.affordable {
    color: #44cc44;
}

.shop-qty-stepper {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
}

.shop-qty-btn {
    width: 26px;
    height: 26px;
    font-size: 1rem;
    line-height: 1;
    color: #fff;
    background: rgba(80, 28, 140, 0.25);
    border: 1px solid rgba(255, 200, 50, 0.35);
    border-radius: 0;
    cursor: pointer;
    padding: 0;
}

.shop-qty-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
}

.shop-qty-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.shop-qty-input {
    width: 42px;
    text-align: center;
    font-size: 0.85rem;
    color: #fff;
    background: rgba(6, 3, 18, 0.6);
    border: 1px solid rgba(255, 200, 50, 0.35);
    border-radius: 0;
    padding: 3px 4px;
    /* hide number input spinners */
    -moz-appearance: textfield;
}
.shop-qty-input::-webkit-outer-spin-button,
.shop-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.shop-buy-btn {
    padding: 6px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background: rgba(80, 28, 140, 0.7);
    border: 1px solid rgba(255, 200, 50, 0.45);
    border-radius: 0;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.shop-buy-btn:hover {
    background: rgba(80, 28, 140, 0.9);
}

.shop-buy-btn:disabled {
    background: rgba(80, 80, 80, 0.6);
    color: #666;
    cursor: not-allowed;
}

.shop-sell-btn {
    padding: 6px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background: rgba(204, 136, 68, 0.8);
    border: 1px solid rgba(255, 200, 50, 0.35);
    border-radius: 0;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.shop-sell-btn:hover {
    background: rgba(204, 136, 68, 1);
}

/* ── Shop Sell Zone ── */

#shop-sell-zone {
    margin-top: 12px;
    padding: 12px;
    border: 2px dashed rgba(255, 200, 50, 0.3);
    text-align: center;
    color: var(--os-muted);
    font-size: 0.75rem;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#shop-sell-zone.drag-over {
    border-color: rgba(255, 200, 50, 0.85);
    background: rgba(255, 200, 50, 0.08);
    color: var(--os-gold);
}

.shop-sell-zone-label {
    pointer-events: none;
}

/* ── Unlock Panel ── */

#unlock-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    pointer-events: auto;
}

.unlock-window {
    background: rgba(12, 5, 32, 0.95);
    border: 1px solid rgba(200, 126, 18, 0.55);
    border-radius: 0;
    box-shadow:
        0 0 0 1px rgba(255, 200, 50, 0.25),
        inset 0 0 16px rgba(80, 28, 140, 0.25),
        0 10px 24px rgba(0, 0, 0, 0.7);
    padding: 16px;
    min-width: 340px;
    max-width: 400px;
    overflow: hidden;
    position: relative;
}

.unlock-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.unlock-window::before {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid rgba(255, 200, 50, 0.6);
    pointer-events: none;
}

.unlock-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 200, 50, 0.2);
    padding-bottom: 8px;
}

.unlock-header h2 {
    margin: 0;
    color: var(--os-gold);
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Press Start 2P', monospace;
}

.unlock-charges-display {
    font-size: 0.78rem;
    color: var(--os-muted);
    margin-bottom: 12px;
    text-align: center;
}

#unlock-charges-count {
    color: var(--os-gold-lite);
    font-weight: bold;
}

.unlock-category-header {
    font-size: 0.68rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--os-muted);
    padding: 8px 0 4px;
    border-bottom: 1px solid rgba(255, 200, 50, 0.15);
    margin-bottom: 6px;
}

.unlock-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    border: 1px solid rgba(255, 200, 50, 0.2);
    border-radius: 0;
    background: rgba(6, 3, 18, 0.6);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.unlock-item.owned {
    opacity: 0.55;
    cursor: default;
    border-color: rgba(80, 180, 80, 0.25);
    background: rgba(30, 60, 30, 0.2);
}

.unlock-item.locked-prereq {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: rgba(100, 100, 100, 0.15);
    background: rgba(40, 40, 40, 0.1);
}

.unlock-item:not(.owned):not(.locked-prereq):hover {
    background: rgba(80, 28, 140, 0.3);
    border-color: rgba(255, 200, 50, 0.5);
}

.unlock-item-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}

.unlock-item-info {
    flex: 1;
    min-width: 0;
}

.unlock-item-name {
    font-size: 0.82rem;
    color: var(--os-text);
    font-weight: bold;
}

.unlock-item-desc {
    font-size: 0.70rem;
    color: var(--os-muted);
    margin-top: 2px;
}

.unlock-item-cost {
    font-size: 0.78rem;
    color: var(--os-gold-lite);
    white-space: nowrap;
    flex-shrink: 0;
}

.unlock-item-cost.owned-badge {
    color: #66cc88;
}

.unlock-progress-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
}

.unlock-progress-bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 200, 50, 0.12);
    border-radius: 0;
    overflow: hidden;
}

.unlock-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(200, 126, 18, 0.8), #ffc832);
    border-radius: 0;
    transition: width 0.3s ease;
}

.unlock-progress-text {
    font-size: 0.65rem;
    color: rgba(255, 200, 50, 0.65);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Stash Panel ── */

#stash-panel {
    position: fixed;
    bottom: 200px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    z-index: 40;
    pointer-events: auto;
}

#stash-panel.open {
    display: block;
}

.stash-window {
    background: rgba(12, 5, 32, 0.95);
    border: 1px solid rgba(200, 126, 18, 0.55);
    border-radius: 0;
    padding: 20px;
    min-width: 360px;
    max-width: 90vw;
    box-shadow:
        0 0 0 1px rgba(255, 200, 50, 0.25),
        inset 0 0 16px rgba(80, 28, 140, 0.25),
        0 10px 24px rgba(0, 0, 0, 0.7);
    position: relative;
}

.stash-window::before {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid rgba(255, 200, 50, 0.6);
    pointer-events: none;
}

.stash-window .shop-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--os-gold);
    font-family: 'Press Start 2P', monospace;
}


.stash-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

#stash-grid {
    display: grid;
    grid-template-columns: repeat(5, clamp(44px, 4.5vw, 60px));
    gap: 4px;
}

/* ── Crafting Panel ── */
#crafting-panel {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent;
    z-index: 40;
}

.craft-window {
    background: rgba(12, 5, 32, 0.95);
    border: 1px solid rgba(200, 126, 18, 0.55);
    border-radius: 0;
    padding: 20px;
    min-width: 380px;
    max-width: 90vw;
    max-height: 70vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 0 0 1px rgba(255, 200, 50, 0.25),
        inset 0 0 16px rgba(80, 28, 140, 0.25),
        0 10px 24px rgba(0, 0, 0, 0.7);
    position: relative;
}

.craft-window::before {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid rgba(255, 200, 50, 0.6);
    pointer-events: none;
}

.craft-loading {
    text-align: center;
    color: var(--os-muted);
    font-size: 0.85rem;
    padding: 20px 0;
}

.craft-recipe-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: rgba(6, 3, 18, 0.6);
    border: 1px solid rgba(255, 200, 50, 0.2);
    gap: 12px;
}

.craft-recipe-info {
    flex: 1;
}

.craft-recipe-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--os-text);
    margin-bottom: 4px;
}

.craft-ingredients {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.craft-ingredient {
    font-size: 0.75rem;
    padding: 2px 7px;
    border-radius: 2px;
}

.craft-ingredient.met {
    color: #44cc44;
    background: rgba(68, 204, 68, 0.1);
    border: 1px solid rgba(68, 204, 68, 0.3);
}

.craft-ingredient.unmet {
    color: #cc4444;
    background: rgba(204, 68, 68, 0.1);
    border: 1px solid rgba(204, 68, 68, 0.3);
}

.craft-btn {
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background: rgba(68, 136, 80, 0.7);
    border: 1px solid rgba(100, 220, 120, 0.45);
    border-radius: 0;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
    min-width: 60px;
}

.craft-btn:hover:not(:disabled) {
    background: rgba(68, 136, 80, 0.9);
}

.craft-btn:disabled {
    background: rgba(80, 80, 80, 0.6);
    color: #666;
    cursor: not-allowed;
}

/* ── Crafting Tabs ── */
#crafting-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid rgba(255, 200, 50, 0.3);
    margin: 0 -16px;
    padding: 0 16px;
}

.craft-tab {
    padding: 8px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--os-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    text-transform: capitalize;
    margin-bottom: -2px;
    white-space: nowrap;
}

.craft-tab:hover {
    color: var(--os-text);
}

.craft-tab.active {
    color: var(--os-gold);
    border-bottom-color: var(--os-gold);
}

.craft-tab-level {
    font-size: 0.65rem;
    color: var(--os-muted);
    margin-left: 4px;
    opacity: 0.7;
}

.craft-tab.active .craft-tab-level {
    color: var(--os-gold);
    opacity: 1;
}

/* ── Recipe List (scrollable) ── */
#crafting-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

/* ── Profession Header ── */
#crafting-prof-header {
    padding: 10px 0 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
}

.craft-prof-label {
    color: var(--os-text);
    font-weight: 600;
    text-transform: capitalize;
}

.craft-xp-bar-outer {
    flex: 1;
    height: 10px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 200, 50, 0.2);
    border-radius: 2px;
    overflow: hidden;
}

.craft-xp-bar-inner {
    height: 100%;
    background: linear-gradient(90deg, rgba(100, 180, 255, 0.7), rgba(140, 200, 255, 0.9));
    transition: width 0.3s ease;
}

.craft-xp-text {
    color: var(--os-muted);
    font-size: 0.7rem;
    white-space: nowrap;
}

/* ── Locked Recipe Row ── */
.craft-recipe-row.locked {
    opacity: 0.5;
    border-color: rgba(100, 100, 100, 0.3);
}

.craft-recipe-row.locked .craft-recipe-name {
    color: var(--os-muted);
}

.craft-level-req {
    font-size: 0.7rem;
    color: #cc8844;
    margin-left: 8px;
    font-weight: 400;
}

/* ── Level Up Flash ── */
.craft-levelup-flash {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--os-gold);
    text-shadow: 0 0 20px rgba(255, 200, 50, 0.8);
    animation: craft-levelup 1.5s ease-out forwards;
    pointer-events: none;
    z-index: 10;
}

@keyframes craft-levelup {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    40%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
    100% { opacity: 0; transform: translate(-50%, -70%) scale(1.0); }
}

/* ── Damage Flash ── */
#damage-flash {
    position: fixed;
    inset: 0;
    background: rgba(200, 0, 0, 0.3);
    pointer-events: none;
    z-index: 30;
    opacity: 0;
    transition: opacity 0.3s;
}

#damage-flash.active {
    opacity: 1;
    transition: none;
}

/* ── Decay Bounds ── */
#decay-overlay {
    position: fixed;
    inset: 0;
    /* Crimson fog that creeps in from the edges */
    background: radial-gradient(ellipse at center,
        transparent 30%,
        rgba(120, 0, 0, 0.6) 70%,
        rgba(60, 0, 0, 0.9) 100%
    );
    z-index: 28;
    transition: opacity 2s ease;
    pointer-events: none;
}

#decay-vignette {
    position: fixed;
    inset: 0;
    /* Sharp red pulse vignette — used for proximity warning */
    background: radial-gradient(ellipse at center,
        transparent 40%,
        rgba(180, 10, 10, 0.85) 100%
    );
    z-index: 29;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

#void-vignette {
    position: fixed;
    inset: 0;
    /* Purple/blue void tint at screen edges — warns player near island edge */
    background: radial-gradient(ellipse at center,
        transparent 35%,
        rgba(60, 10, 160, 0.9) 100%
    );
    z-index: 29;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

/* ── Death Screen ── */
#death-screen {
    position: fixed;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: rgba(0, 0, 0, 0);
    z-index: 55;
    animation: death-fade-in 1.4s ease-out forwards;
    transition: opacity 0.4s ease-in;
}

@keyframes death-fade-in {
    0%   { background: rgba(0, 0, 0, 0); }
    25%  { background: rgba(80, 0, 0, 0.6); }
    60%  { background: rgba(20, 0, 0, 0.95); }
    100% { background: rgba(0, 0, 0, 1); }
}

#death-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 3.8rem;
    color: #cc1111;
    text-shadow: 0 0 40px rgba(200, 20, 20, 0.9), 0 0 80px rgba(200, 20, 20, 0.4);
    letter-spacing: 0.1em;
    animation: death-title-in 1.6s ease-out forwards;
    opacity: 0;
}

@keyframes death-title-in {
    0%   { opacity: 0; transform: scale(1.4); filter: blur(12px); }
    50%  { opacity: 1; transform: scale(1.0); filter: blur(0); }
    100% { opacity: 1; transform: scale(1.0); filter: blur(0); }
}

#death-killer {
    font-size: 1.1rem;
    color: #cccccc;
    letter-spacing: 0.05em;
    opacity: 0;
    animation: death-info-in 0.6s ease-out 1.2s forwards;
}

#death-damage {
    font-size: 0.85rem;
    color: #aa4444;
    letter-spacing: 0.05em;
    opacity: 0;
    animation: death-info-in 0.6s ease-out 1.4s forwards;
}

@keyframes death-info-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

#death-release-btn {
    opacity: 0;
    animation: death-info-in 0.6s ease-out 2.2s forwards;
    margin-top: 8px;
}

/* ── Zone Name Banner ── */
#zone-banner {
    position: fixed;
    top: 32%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
    z-index: 15;
    animation: zone-banner-anim 3.5s ease forwards;
}

.zb-sub {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(255, 200, 50, 0.6);
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    margin-bottom: 4px;
}

.zb-name {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(1rem, 2.5vw, 1.6rem);
    color: #ffd060;
    text-shadow:
        0 0 20px rgba(255, 200, 50, 0.5),
        0 2px 0 rgba(0,0,0,0.8),
        0 4px 12px rgba(0,0,0,0.6);
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.zb-tier {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #b088ff;
    text-shadow:
        0 0 12px rgba(140, 80, 255, 0.6),
        0 1px 3px rgba(0,0,0,0.8);
    margin-top: 6px;
}

@keyframes zone-banner-anim {
    0%   { opacity: 0; transform: translateX(-50%) translateY(8px); }
    15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    70%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}

/* ── Player Frame ── */
/* ── Bottom-left frame stack (party members + local player) ── */
#bottom-left-frames {
    position: absolute;
    bottom: 20px;
    right: 360px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    pointer-events: none;
    user-select: none;
}

#party-frames {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
}

/* Shared layout for both the local player frame and party member frames */
.party-member-frame,
#player-frame {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(12, 5, 32, 0.82);
    border: 1px solid rgba(255, 200, 50, 0.25);
    border-radius: 8px;
    padding: 6px 10px 6px 8px;
    min-width: 160px;
    max-width: 200px;
    box-shadow: 0 0 10px rgba(80, 28, 140, 0.3);
    pointer-events: auto;
}

/* Local player frame: hidden until player loads */
#player-frame {
    display: none;
}

/* Party member frames: dim when dead or in another zone */
.party-member-frame.pf--dead {
    opacity: 0.5;
    border-color: rgba(180, 60, 60, 0.4);
}
.party-member-frame.pf--away {
    opacity: 0.6;
    border-color: rgba(150, 150, 180, 0.3);
}

/* Portrait container (holds avatar img + level badge + status overlay) */
.pf-portrait {
    position: relative;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
}

.pf-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(255, 200, 50, 0.3);
}

/* Level badge overlaid on party member avatar (bottom-right corner) */
.pf-portrait-badge {
    position: absolute;
    bottom: -3px;
    right: -4px;
    background: rgba(12, 5, 32, 0.92);
    border: 1px solid rgba(255, 200, 50, 0.5);
    border-radius: 3px;
    padding: 1px 3px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.38rem;
    color: var(--os-gold, #ffc832);
    line-height: 1.4;
    white-space: nowrap;
}

/* Status overlay (dead ☠ / away ↗) over portrait */
.pf-status-overlay {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
}

.pf-level-badge {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: rgba(80, 28, 140, 0.55);
    border: 1px solid rgba(255, 200, 50, 0.4);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.5rem;
    color: var(--os-gold, #ffc832);
    text-shadow: 0 0 6px rgba(255, 200, 50, 0.4);
    line-height: 1.3;
    text-align: center;
}

.pf-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pf-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: #e8e0f8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.pf-crown {
    color: #FFD700;
    font-size: 0.7rem;
}

.pf-hp-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.pf-hp-track {
    flex: 1;
    height: 8px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

#pf-hp-fill,
.pf-hp-fill {
    height: 100%;
    width: 100%;
    background: #44cc44;
    transition: width 0.3s, background 0.3s;
}

.pf-hp-text {
    font-size: 0.6rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Responsive Scaling ── */

/* Medium screens — clamp() handles slot sizes; override remaining fixed sizes */
@media (max-width: 1200px) {
    .equip-slot { width: 44px; height: 44px; }
    #chat-container { width: 280px; }
}

/* Small screens */
@media (max-width: 768px) {
    .health-bar { height: 22px; }
    #health-text { font-size: 0.65rem; }
    .slot-key { font-size: 0.55rem; }
    .item-icon { width: 26px; height: 26px; }
    .item-label { font-size: 0.45rem; max-width: 40px; }
    .ability-slot { height: 24px; }
    .ability-btn-label { font-size: 0.5rem; }
    .ability-icon { font-size: 0.75rem; }
    .equip-slot { width: 40px; height: 40px; }
    #equipment-panel { min-width: 100px; padding: 8px; }
    .equip-title { font-size: 0.65rem; }
    #chat-container { width: 240px; bottom: 12px; right: 12px; }
    #chat-messages { max-height: 120px; font-size: 0.75rem; }
    #chat-input { font-size: 0.75rem; padding: 6px 10px; }
    #dialogue-box { width: 400px; }
    #interact-prompt { font-size: 0.8rem; padding: 6px 14px; }
    .shop-window { min-width: 300px; padding: 14px; }
    #death-title { font-size: 2.4rem; }
    #death-killer { font-size: 0.95rem; }
    /* Stack health/xp closer above hotbar on small screens */
    #vitals { bottom: 78px; }
    .xp-bar { height: 6px; }
    #cast-bar { bottom: 120px; }
    #interact-prompt { bottom: 174px; }
    #player-frame { max-width: 150px; }
}

/* Very small screens */
@media (max-width: 480px) {
    .health-bar { height: 18px; }
    #vitals { bottom: 72px; }
    .xp-bar { height: 5px; }
    #cast-bar { bottom: 120px; }
    #interact-prompt { bottom: 174px; font-size: 0.7rem; }
    .equip-slot { width: 36px; height: 36px; }
    #chat-container { width: 200px; bottom: 8px; right: 8px; }
    #chat-messages { max-height: 80px; }
    .shop-window { min-width: 260px; padding: 10px; }
    #dialogue-box { width: 90vw; }
    #player-frame { display: none !important; } /* too cramped on tiny screens */
}

/* ── Admin Console ── */
#console-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40vh;
    background: rgba(10, 10, 18, 0.92);
    border-top: 1px solid rgba(114, 137, 218, 0.35);
    z-index: 60;
    display: none;
    flex-direction: column;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.82rem;
    backdrop-filter: blur(4px);
}

#console-container.open {
    display: flex;
}

#console-output {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(114, 137, 218, 0.3) transparent;
}

.console-line {
    margin-bottom: 3px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.console-line.info { color: #b0b8cc; }
.console-line.success { color: #6ddb6d; }
.console-line.error { color: #e06060; }
.console-line.command { color: #7289DA; }
.console-line.help { color: #c8b4ff; }

#console-input-row {
    display: flex;
    align-items: center;
    padding: 6px 14px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    gap: 8px;
}

.console-prompt {
    color: #7289DA;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

#console-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #eee;
    font-family: inherit;
    font-size: inherit;
    caret-color: #7289DA;
    -webkit-user-select: text;
    user-select: text;
}

/* ── OriginStory In-Game UI Theme ───────────────────────────────────────── */
:root {
    --os-bg: #08041a;
    --os-panel: #0c0520;
    --os-border: #c87e12;
    --os-border-strong: #ffc832;
    --os-gold: #ffc832;
    --os-gold-lite: #ffeb82;
    --os-purple: #501c8c;
    --os-cyan: #50dcff;
    --os-text: #e0d4f0;
    --os-muted: #6e5f87;
}

#menu-overlay > .menu-inner,
#options-panel,
#dialogue-box,
#inventory-panel.open,
#equipment-panel,
#admin-console {
    background: rgba(12, 5, 32, 0.92);
    border: 1px solid rgba(200, 126, 18, 0.55);
    box-shadow:
        0 0 0 1px rgba(255, 200, 50, 0.25),
        inset 0 0 16px rgba(80, 28, 140, 0.28),
        0 10px 24px rgba(0, 0, 0, 0.7);
    color: var(--os-text);
    border-radius: 0;
}

#menu-overlay > .menu-inner::before,
#options-panel::before,
#dialogue-box::before,
#inventory-panel.open::before,
#equipment-panel::before,
#admin-console::before {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid rgba(255, 200, 50, 0.65);
    pointer-events: none;
    box-shadow: 0 0 8px rgba(255, 200, 50, 0.35);
}

#menu-overlay h2,
#options-panel h2,
.options-section-title,
#dialogue-name,
.equip-title {
    font-family: 'Press Start 2P', monospace;
    color: var(--os-gold);
    text-shadow: 0 0 8px rgba(255, 200, 50, 0.3);
    letter-spacing: 0.5px;
}

.menu-btn,
#btn-resume,
#btn-options,
#btn-database,
#btn-logout {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    background: rgba(80, 28, 140, 0.35);
    border: 1px solid rgba(255, 200, 50, 0.55);
    color: var(--os-gold-lite);
    box-shadow: 0 0 10px rgba(255, 200, 50, 0.2);
}

.menu-btn:hover {
    background: rgba(80, 28, 140, 0.55);
    box-shadow: 0 0 16px rgba(255, 200, 50, 0.35);
}

#btn-logout.danger,
.menu-btn.danger {
    background: rgba(140, 30, 30, 0.5);
    border-color: rgba(255, 120, 120, 0.6);
    color: #ffd0d0;
}

.grid-slot,
.equip-slot,
.hotbar-slot,
.ability-slot {
    background: rgba(12, 5, 32, 0.75);
    border: 1px solid rgba(255, 200, 50, 0.25);
    box-shadow: inset 0 0 10px rgba(80, 28, 140, 0.2);
}

#hotbar {
    background: transparent;
    border: none;
    box-shadow: none;
}

#ability-panel {
    background: transparent;
    border: none;
    box-shadow: none;
}

.hotbar-slot.active,
.ability-slot.active {
    border-color: rgba(255, 200, 50, 0.75);
    box-shadow: 0 0 12px rgba(255, 200, 50, 0.35);
}

.item-label,
.item-qty,
.ability-btn-label,
.ability-icon {
    color: var(--os-text);
}

#connection-status,
#world-clock,
#interact-prompt {
    background: rgba(12, 5, 32, 0.7);
    border: 1px solid rgba(255, 200, 50, 0.25);
    color: var(--os-gold-lite);
    box-shadow: 0 0 10px rgba(80, 200, 240, 0.2);
}
#interact-prompt.locked {
    color: rgba(180, 180, 180, 0.55);
    border-color: rgba(120, 120, 120, 0.2);
    box-shadow: none;
}

#decay-indicator {
    background: rgba(12, 5, 32, 0.7);
    border: 1px solid rgba(200, 50, 50, 0.4);
    box-shadow: 0 0 10px rgba(180, 40, 40, 0.3);
}

#quest-tracker {
    background: rgba(8, 4, 24, 0.75);
    border: 1px solid rgba(180, 140, 60, 0.3);
    box-shadow: 0 0 8px rgba(150, 110, 30, 0.15);
}

.decay-ind-label {
    color: rgba(255, 140, 80, 0.95);
}

#health-fill {
    background: linear-gradient(90deg, #c83d3d, #ff7a7a);
}

#xp-fill {
    background: linear-gradient(90deg, #3d006b, #7722cc, #c066ff);
}

.options-section-title {
    font-size: 0.7rem;
}

.toggle-track {
    background: rgba(255, 200, 50, 0.15);
    border: 1px solid rgba(255, 200, 50, 0.4);
}

.toggle-thumb {
    background: var(--os-gold);
    box-shadow: 0 0 8px rgba(255, 200, 50, 0.35);
}

.console-line.command,
.console-prompt {
    color: var(--os-cyan);
}

.console-line.help {
    color: var(--os-gold-lite);
}

/* ── Haven Build Panel ── */
#haven-build-btn {
    position: relative;
    width: clamp(44px, 4.5vw, 60px);
    height: clamp(44px, 4.5vw, 60px);
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
    color: rgba(255, 255, 255, 0.75);
    padding: 0;
}

#haven-build-btn .slot-key {
    color: rgba(255, 200, 50, 0.6);
}

#haven-build-btn:hover {
    border-color: rgba(255, 200, 50, 0.5);
    background: rgba(80, 28, 140, 0.35);
    color: #fff;
}

#haven-build-btn.active {
    border-color: rgba(255, 200, 50, 0.85);
    background: rgba(255, 200, 50, 0.15);
    box-shadow: 0 0 8px rgba(255, 200, 50, 0.35);
    color: var(--os-gold);
}

#haven-build-panel {
    display: none;
    position: fixed;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 160px;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px 12px;
    z-index: 40;
    background: rgba(12, 5, 32, 0.92);
    border: 1px solid rgba(200, 126, 18, 0.55);
    box-shadow:
        0 0 0 1px rgba(255, 200, 50, 0.25),
        inset 0 0 16px rgba(80, 28, 140, 0.28),
        0 10px 24px rgba(0, 0, 0, 0.7);
    color: var(--os-text);
}

#haven-build-panel::before {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid rgba(255, 200, 50, 0.65);
    pointer-events: none;
    box-shadow: 0 0 8px rgba(255, 200, 50, 0.35);
}

#haven-build-panel.open {
    display: flex;
}

.haven-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.haven-panel-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.52rem;
    color: var(--os-gold);
    text-shadow: 0 0 8px rgba(255, 200, 50, 0.3);
    letter-spacing: 0.5px;
}


.haven-spin-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 200, 50, 0.18);
    border-radius: 4px;
    height: 96px;
    overflow: hidden;
}

#haven-spin-canvas {
    display: block;
    width: 96px;
    height: 96px;
}

.haven-selected-name {
    text-align: center;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--os-gold-lite);
    letter-spacing: 0.5px;
}

.haven-station-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.haven-station-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 7px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    background: rgba(0, 0, 0, 0.2);
    transition: background 0.12s, border-color 0.12s;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.7);
    user-select: none;
}

.haven-station-item:hover:not(.placed) {
    background: rgba(80, 28, 140, 0.3);
    border-color: rgba(255, 200, 50, 0.35);
    color: rgba(255, 255, 255, 0.95);
}

.haven-station-item.selected {
    background: rgba(80, 28, 140, 0.5);
    border-color: rgba(255, 200, 50, 0.65);
    color: var(--os-gold-lite);
}

.haven-station-item.placed {
    opacity: 0.4;
    cursor: not-allowed;
}

.haven-station-item.locked {
    opacity: 0.35;
    cursor: not-allowed;
    filter: grayscale(0.6);
}

.haven-station-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 200, 50, 0.5);
    flex-shrink: 0;
}

.haven-station-item.selected .haven-station-dot {
    background: var(--os-gold);
    box-shadow: 0 0 4px rgba(255, 200, 50, 0.6);
}

.haven-station-item.placed .haven-station-dot {
    background: rgba(255, 255, 255, 0.2);
}

.haven-station-lbl {
    flex: 1;
}

.haven-placed-badge {
    font-size: 0.65rem;
    color: rgba(255, 200, 50, 0.55);
}

.haven-hint {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.3);
    font-family: monospace;
    text-align: center;
    line-height: 1.6;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: 6px;
    margin-top: 2px;
    white-space: pre-wrap;
}

/* ── Edit Mode Object Placement Panel ── */
#edit-place-panel {
    display: none;
    position: fixed;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 160px;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px 12px;
    z-index: 40;
    background: rgba(5, 12, 32, 0.94);
    border: 1px solid rgba(68, 136, 255, 0.55);
    box-shadow:
        0 0 0 1px rgba(80, 160, 255, 0.25),
        inset 0 0 16px rgba(20, 40, 140, 0.28),
        0 10px 24px rgba(0, 0, 0, 0.7);
    color: var(--os-text);
}
#edit-place-panel::before {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid rgba(80, 160, 255, 0.55);
    pointer-events: none;
    box-shadow: 0 0 8px rgba(80, 160, 255, 0.25);
}
#edit-place-panel.open {
    display: flex;
}

/* Edit panel uses blue theme — override corner gem color */
#edit-place-panel .panel-corner-tl,
#edit-place-panel .panel-corner-tr,
#edit-place-panel .panel-corner-bl,
#edit-place-panel .panel-corner-br {
    background: rgba(80, 160, 255, 0.85);
    box-shadow: 0 0 6px rgba(80, 160, 255, 0.7);
}

.edit-place-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.72rem;
    transition: background 0.12s;
    border: 1px solid transparent;
    color: rgba(200, 220, 255, 0.85);
}
.edit-place-item:hover {
    background: rgba(68, 136, 255, 0.12);
    border-color: rgba(68, 136, 255, 0.3);
    color: #fff;
}
.edit-place-item.selected {
    background: rgba(68, 136, 255, 0.22);
    border-color: rgba(68, 136, 255, 0.6);
    color: #88ccff;
}

/* ── Inventory open: shift vitals above the inventory grid ── */
#hud.hud--inv-open #vitals {
    bottom: 170px;
}

/* ── Inventory open: XP text shown inside the bar ── */
#hud.hud--inv-open .xp-bar {
    height: 18px;
    overflow: hidden;
}
#hud.hud--inv-open #xp-text {
    opacity: 1;
    position: absolute;
    inset: 0;
    bottom: auto;
    left: 0;
    transform: none;
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
}

/* ── Loot Chest Panel ── */
#loot-chest-panel {
    position: fixed;
    bottom: 200px;
    right: 20px;
    display: none;
    z-index: 40;
    pointer-events: auto;
}
#loot-chest-panel.open { display: block; }
.loot-chest-window {
    background: rgba(12, 5, 32, 0.95);
    border: 1px solid rgba(200, 126, 18, 0.55);
    border-radius: 0;
    padding: 16px;
    min-width: 240px;
    max-width: 300px;
    box-shadow:
        0 0 0 1px rgba(255, 200, 50, 0.25),
        inset 0 0 16px rgba(80, 28, 140, 0.25),
        0 8px 32px rgba(0, 0, 0, 0.7);
    position: relative;
}

.loot-chest-window::before {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid rgba(255, 200, 50, 0.6);
    pointer-events: none;
}
.loot-chest-window .shop-header h2 {
    font-size: 0.85rem;
    color: #ffcc88;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}
#loot-chest-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 10px 0 8px;
    max-height: 260px;
    overflow-y: auto;
}
.lc-slot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    position: relative;
    transition: background 0.1s;
}
.lc-slot:hover { background: rgba(200,126,18,0.18); border-color: rgba(200,126,18,0.4); }
.lc-icon { font-size: 1rem; flex-shrink: 0; }
.lc-name { font-size: 0.72rem; color: #d4c8f0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-qty {
    position: absolute;
    top: 2px; right: 4px;
    font-size: 0.6rem;
    color: #ffcc88;
    font-weight: 700;
}
#loot-chest-take-all {
    width: 100%;
    padding: 6px 0;
    background: rgba(200,126,18,0.25);
    border: 1px solid rgba(200,126,18,0.5);
    color: #ffcc88;
    font-family: monospace;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.15s;
}
#loot-chest-take-all:hover { background: rgba(200,126,18,0.4); }

/* ── Mount HUD ── */
#mount-hud {
    display: none;
    position: fixed;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.55);
    color: #aaffaa;
    font-size: 0.85rem;
    font-family: monospace;
    padding: 5px 14px;
    border-radius: 6px;
    border: 1px solid rgba(170,255,170,0.3);
    pointer-events: none;
    z-index: 50;
    white-space: nowrap;
}

/* ── Class Selection Panel ── */
#class-select-panel {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
#class-select-panel.open {
    opacity: 1;
    pointer-events: auto;
}
#class-select-panel.closing {
    opacity: 0;
    pointer-events: none;
}
.class-select-heading {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 4px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.class-select-sub {
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 24px;
}
.class-select-grid {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
}
.class-card {
    width: 220px;
    padding: 20px;
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    background: rgba(20, 20, 30, 0.8);
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
}
.class-card:hover {
    border-color: var(--class-color, #fff);
    box-shadow: 0 0 20px var(--class-glow, rgba(255,255,255,0.2));
    transform: translateY(-4px);
}
.class-card.selected {
    border-color: var(--class-color, #fff);
    box-shadow: 0 0 30px var(--class-glow, rgba(255,255,255,0.3));
    transform: translateY(-6px);
    background: rgba(30, 30, 50, 0.9);
}
.class-icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
}
.class-name {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.class-description {
    font-size: 0.78rem;
    color: #aaa;
    line-height: 1.4;
    margin-bottom: 10px;
    min-height: 50px;
}
.class-divider {
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 8px 0;
}
.class-playstyle {
    font-size: 0.75rem;
    color: var(--class-color, #ccc);
    font-weight: 600;
    margin-bottom: 6px;
}
.class-starter {
    font-size: 0.72rem;
    color: #777;
    margin-bottom: 10px;
}
.class-stats {
    text-align: left;
}
.class-stat-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 3px 0;
}
.class-stat-label {
    font-size: 0.7rem;
    color: #888;
    width: 70px;
    text-transform: uppercase;
}
.class-stat-bar {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    overflow: hidden;
}
.class-stat-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}
.class-select-btn {
    padding: 12px 32px;
    font-size: 1rem;
    font-weight: 600;
    border: 2px solid rgba(255, 215, 0, 0.5);
    border-radius: 8px;
    background: rgba(255, 215, 0, 0.1);
    color: #ffd700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.class-select-btn:hover:not(:disabled) {
    background: rgba(255, 215, 0, 0.2);
    border-color: #ffd700;
}
.class-select-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Realm Timer HUD ── */
#realm-timer-hud {
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    backdrop-filter: blur(2px);
}
#realm-timer-bar {
    width: 120px;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}
#realm-timer-fill {
    height: 100%;
    background: linear-gradient(90deg, #44ff44, #ffcc00, #ff4444);
    border-radius: 3px;
    transition: width 1s linear;
}
#realm-timer-text {
    font-size: 0.78rem;
    font-weight: 600;
    color: #ccc;
    font-variant-numeric: tabular-nums;
}

/* ── Intro Book Animation ───────────────────────────────────────────────── */
/* z-index 110 — above everything including login */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

#intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
}
#intro-overlay.intro-visible {
    opacity: 1;
    pointer-events: auto;
}
#intro-overlay.intro-fade-out {
    opacity: 0;
    transition: opacity 0.7s ease;
    pointer-events: none;
}

.intro-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, #0a0818 0%, #000 100%);
}

/* Dust/particle effect on backdrop when book opens */
.intro-backdrop::before,
.intro-backdrop::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.5s ease 0.6s;
}
#intro-overlay.intro-visible .intro-backdrop::before,
#intro-overlay.intro-visible .intro-backdrop::after {
    opacity: 1;
}
.intro-backdrop::before {
    background:
        radial-gradient(1px 1px at 15% 25%, rgba(180, 140, 80, 0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 40% 60%, rgba(180, 140, 80, 0.4) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 65% 30%, rgba(200, 160, 100, 0.35) 0%, transparent 100%),
        radial-gradient(1px 1px at 80% 70%, rgba(180, 140, 80, 0.45) 0%, transparent 100%),
        radial-gradient(1px 1px at 25% 80%, rgba(160, 120, 60, 0.3) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 55% 15%, rgba(180, 140, 80, 0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 90% 45%, rgba(200, 160, 100, 0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 10% 55%, rgba(180, 140, 80, 0.35) 0%, transparent 100%);
    animation: introDustDrift 8s ease-in-out infinite alternate;
}
.intro-backdrop::after {
    background:
        radial-gradient(1.5px 1.5px at 30% 40%, rgba(200, 170, 110, 0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 70% 20%, rgba(180, 140, 80, 0.35) 0%, transparent 100%),
        radial-gradient(1px 1px at 50% 75%, rgba(160, 120, 60, 0.4) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 85% 55%, rgba(200, 160, 100, 0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 20% 10%, rgba(180, 140, 80, 0.45) 0%, transparent 100%),
        radial-gradient(1px 1px at 60% 90%, rgba(180, 140, 80, 0.3) 0%, transparent 100%);
    animation: introDustDrift 10s ease-in-out 1s infinite alternate-reverse;
}
@keyframes introDustDrift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(8px, -12px) scale(1.05); }
    100% { transform: translate(-6px, 8px) scale(0.97); }
}

.intro-skip {
    position: absolute;
    top: 24px;
    right: 32px;
    z-index: 5;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.5);
    font-size: 0.8rem;
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
.intro-skip:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.5);
}

/* Book container — shifted right to leave room for turned cover on the left */
.intro-book {
    position: relative;
    width: min(700px, 90vw);
    height: min(520px, 80vh);
    perspective: 1200px;
    z-index: 2;
    margin-left: 60px;
}

/* Cover — initially closed, flips open */
.intro-book-cover {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform-origin: left center;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 3;
}
.intro-book.open .intro-book-cover {
    transform: rotateY(-160deg);
    pointer-events: none;
}

.intro-book-front {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a0e2e 0%, #0d0720 50%, #1a0e2e 100%);
    border: 2px solid rgba(180, 140, 80, 0.5);
    border-radius: 4px 12px 12px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    backface-visibility: hidden;
    box-shadow: 4px 4px 20px rgba(0,0,0,0.6), inset 0 0 40px rgba(100, 60, 180, 0.1);
}
.intro-book-front::after {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(180, 140, 80, 0.25);
    border-radius: 2px 10px 10px 2px;
    pointer-events: none;
}

.intro-book-spine {
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 8px;
    background: linear-gradient(90deg, #3a2a1a, #2a1e14);
    border-radius: 4px 0 0 4px;
    z-index: -1;
}

.intro-cover-emblem {
    font-size: 3rem;
    filter: drop-shadow(0 0 10px rgba(180, 140, 80, 0.4));
}
.intro-cover-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.9rem;
    color: rgba(180, 140, 80, 0.8);
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Turned-over cover visible on the left side of the open book */
.intro-cover-back {
    position: absolute;
    right: 100%;
    top: 4px;
    bottom: 4px;
    width: 50px;
    background: linear-gradient(270deg, #1a0e2e 0%, #120a1e 60%, #0d0720 100%);
    border: 2px solid rgba(180, 140, 80, 0.3);
    border-right: none;
    border-radius: 10px 0 0 10px;
    box-shadow: -4px 2px 12px rgba(0,0,0,0.5), inset 0 0 20px rgba(100, 60, 180, 0.08);
    opacity: 0;
    transform: perspective(600px) rotateY(15deg);
    transform-origin: right center;
    transition: opacity 0.6s ease;
}
.intro-cover-back.visible {
    opacity: 1;
}
.intro-cover-back::after {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(180, 140, 80, 0.15);
    border-right: none;
    border-radius: 8px 0 0 8px;
    pointer-events: none;
}

/* Pages container — visible behind the cover */
.intro-pages-container {
    position: absolute;
    inset: 0;
    background: linear-gradient(170deg, #f5e6c8 0%, #e8d5a8 40%, #dcc898 100%);
    border-radius: 2px 10px 10px 2px;
    border: 1px solid rgba(120, 90, 50, 0.3);
    box-shadow: inset 2px 0 8px rgba(0,0,0,0.15), 4px 4px 16px rgba(0,0,0,0.4);
    overflow: hidden;
}

/* Individual page */
.intro-page {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 48px;
    opacity: 0;
    transition: opacity 0.5s ease;
    /* Paper texture — subtle noise-like pattern from layered gradients */
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(120, 90, 50, 0.015) 2px,
            rgba(120, 90, 50, 0.015) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 3px,
            rgba(100, 70, 35, 0.01) 3px,
            rgba(100, 70, 35, 0.01) 6px
        ),
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 5px,
            rgba(140, 110, 70, 0.012) 5px,
            rgba(140, 110, 70, 0.012) 7px
        ),
        repeating-linear-gradient(
            135deg,
            transparent,
            transparent 4px,
            rgba(110, 80, 40, 0.01) 4px,
            rgba(110, 80, 40, 0.01) 8px
        );
}
.intro-page.active {
    opacity: 1;
}

/* Golden vignette glow around page edges */
.intro-page::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow:
        inset 0 0 60px rgba(180, 140, 60, 0.08),
        inset 0 0 120px rgba(160, 120, 40, 0.05);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

/* Left-edge page shadow — light from right */
.intro-page::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(90deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.04) 40%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Page number indicator */
.intro-page-number {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: rgba(120, 80, 40, 0.35);
    letter-spacing: 2px;
    z-index: 2;
    font-style: italic;
}

/* Page flip animations — 3D perspective page turn from spine edge */
.intro-page {
    transform-origin: left center;
    transform-style: preserve-3d;
}
.intro-page.flip-out-left {
    animation: introFlipOutL 0.5s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
.intro-page.flip-out-right {
    animation: introFlipOutR 0.5s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
.intro-page.flip-in-right {
    animation: introFlipInR 0.6s cubic-bezier(0.2, 0, 0.4, 1) forwards;
}
.intro-page.flip-in-left {
    animation: introFlipInL 0.6s cubic-bezier(0.2, 0, 0.4, 1) forwards;
}

@keyframes introFlipOutL {
    0%   { transform: perspective(1200px) rotateY(0deg); opacity: 1; }
    40%  { opacity: 1; }
    100% { transform: perspective(1200px) rotateY(-90deg); opacity: 0; }
}
@keyframes introFlipOutR {
    0%   { transform: perspective(1200px) rotateY(0deg); opacity: 1; }
    40%  { opacity: 1; }
    100% { transform: perspective(1200px) rotateY(45deg); opacity: 0; }
}
@keyframes introFlipInR {
    0%   { transform: perspective(1200px) rotateY(-60deg); opacity: 0; }
    30%  { opacity: 0.5; }
    100% { transform: perspective(1200px) rotateY(0deg); opacity: 1; }
}
@keyframes introFlipInL {
    0%   { transform: perspective(1200px) rotateY(60deg); opacity: 0; }
    30%  { opacity: 0.5; }
    100% { transform: perspective(1200px) rotateY(0deg); opacity: 1; }
}

/* Page inner content wrapper */
.intro-page-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    max-width: 540px;
    width: 100%;
    height: 100%;
}

/* Page ornaments */
.intro-page-ornament {
    color: rgba(120, 80, 40, 0.4);
    font-size: 1.2rem;
    letter-spacing: 8px;
}

/* ── Page Turn Corner — sits in actual page corners ── */
.intro-page-turn {
    position: absolute;
    width: 56px;
    height: 56px;
    cursor: pointer;
    z-index: 4;
    transition: transform 0.15s ease;
}
/* Next → bottom-right corner */
.intro-page-turn.next {
    bottom: 0;
    right: 0;
}
/* Prev ← bottom-left corner */
.intro-page-turn.prev {
    bottom: 0;
    left: 0;
}

/* Folded corner — next (bottom-right) */
.intro-page-turn.next::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 56px 56px;
    border-color: transparent transparent #c4a86a transparent;
    transition: border-width 0.2s ease;
    filter: drop-shadow(-1px -1px 2px rgba(0,0,0,0.2));
}
/* Lighter triangle underneath to simulate the folded-back page */
.intro-page-turn.next::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 40px 40px;
    border-color: transparent transparent #dcc898 transparent;
    pointer-events: none;
}
.intro-page-turn.next:hover::before {
    border-width: 0 0 68px 68px;
}
.intro-page-turn.next:hover {
    transform: translate(1px, 1px);
}

/* Arrow on the next fold */
.intro-page-turn.next .intro-page-turn-arrow {
    position: absolute;
    bottom: 8px;
    right: 6px;
    font-size: 0.85rem;
    color: rgba(60, 40, 15, 0.7);
    pointer-events: none;
    transition: transform 0.15s;
}
.intro-page-turn.next:hover .intro-page-turn-arrow {
    transform: translateX(2px);
}

/* Folded corner — prev (bottom-left) */
.intro-page-turn.prev::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 64px 0 0 56px;
    border-color: transparent transparent transparent #c4a86a;
    transition: border-width 0.2s ease;
    filter: drop-shadow(1px -1px 2px rgba(0,0,0,0.2));
}
.intro-page-turn.prev::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 48px 0 0 40px;
    border-color: transparent transparent transparent #dcc898;
    pointer-events: none;
}
.intro-page-turn.prev:hover::before {
    border-width: 76px 0 0 68px;
}
.intro-page-turn.prev:hover {
    transform: translate(-1px, 1px);
}

.intro-page-turn.prev .intro-page-turn-arrow {
    position: absolute;
    bottom: 8px;
    left: 6px;
    font-size: 0.85rem;
    color: rgba(60, 40, 15, 0.7);
    pointer-events: none;
    transition: transform 0.15s;
}
.intro-page-turn.prev:hover .intro-page-turn-arrow {
    transform: translateX(-2px);
}

/* ── Title Page ── */
.title-page {
    gap: 20px;
}
.intro-title-ornament {
    color: rgba(120, 80, 40, 0.4);
    font-size: 1rem;
    letter-spacing: 6px;
}
.intro-title-ornament.bottom {
    margin-top: 8px;
}
.intro-title {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(1.6rem, 4.5vw, 2.6rem);
    color: #3a2210;
    letter-spacing: 3px;
    line-height: 1.6;
    text-align: center;
    /* 3D blocky effect */
    text-shadow:
        1px 1px 0 #6a4a28,
        2px 2px 0 #5a3a18,
        3px 3px 0 #4a2a0a,
        4px 4px 0 #3a1a00,
        5px 5px 8px rgba(0,0,0,0.3);
}
.intro-title-word {
    display: block;
}

/* Letter-by-letter reveal for title text */
.intro-title-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px);
    animation: introLetterIn 0.4s ease forwards;
}
@keyframes introLetterIn {
    0%   { opacity: 0; transform: translateY(8px) scale(0.9); }
    60%  { opacity: 1; transform: translateY(-2px) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Space characters need no animation but still need inline-block for layout */
.intro-title-letter.space {
    width: 0.3em;
    opacity: 1;
    transform: none;
    animation: none;
}
.intro-by {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: -4px;
}
.intro-by-text {
    font-size: 1.1rem;
    font-style: italic;
    color: rgba(80, 50, 20, 0.5);
    position: relative;
}
/* "by" scrubbed out — strikethrough animation */
.intro-by-text::after {
    content: '';
    position: absolute;
    left: -2px;
    right: -2px;
    top: 50%;
    height: 2px;
    background: rgba(80, 50, 20, 0.6);
    transform: scaleX(0);
    transform-origin: left;
    animation: introScrub 0.6s ease 2.5s forwards;
}
@keyframes introScrub {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}

.intro-by-line {
    width: 100px;
    height: 1px;
    background: rgba(80, 50, 20, 0.2);
}

/* ── Welcome Page ── */

/* Decorative quill/feather element */
.intro-quill {
    position: relative;
    width: 40px;
    height: 80px;
    margin-bottom: 4px;
    opacity: 0.35;
}
/* Feather shaft */
.intro-quill::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, rgba(100, 70, 30, 0.8), rgba(140, 100, 50, 0.5) 70%, rgba(120, 80, 40, 0.9));
    transform: translateX(-50%) rotate(-5deg);
    border-radius: 1px;
}
/* Feather vane */
.intro-quill::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 4px;
    width: 28px;
    height: 50px;
    background: linear-gradient(135deg, rgba(140, 110, 60, 0.2) 0%, rgba(160, 130, 80, 0.15) 50%, rgba(120, 90, 40, 0.1) 100%);
    border-radius: 50% 50% 50% 0 / 80% 80% 20% 0;
    transform: rotate(-8deg);
    border-right: 1px solid rgba(120, 80, 40, 0.15);
    border-top: 1px solid rgba(120, 80, 40, 0.1);
}

.intro-welcome-heading {
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    color: #2a1a0a;
    font-weight: 700;
}
.intro-username {
    color: #5865f2;
    font-style: italic;
}
.intro-welcome-text {
    font-size: 1.15rem;
    color: #4a3520;
    margin-top: 8px;
}
.intro-welcome-sub {
    font-size: 1rem;
    color: rgba(80, 60, 30, 0.7);
    font-style: italic;
}

/* ── Lore Pages ── */
.intro-lore-title {
    font-size: 1.5rem;
    color: #2a1a0a;
    font-weight: 700;
    margin-bottom: 4px;
}
.intro-lore-body {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #3a2a18;
    text-align: left;
    max-height: 280px;
    overflow-y: auto;
}

/* ── Class Select Page ── */
.class-page {
    gap: 12px;
    padding: 24px 20px;
}
.intro-class-heading {
    font-size: 1.5rem;
    color: #2a1a0a;
    font-weight: 700;
}
.intro-class-sub {
    font-size: 0.9rem;
    color: rgba(80, 60, 30, 0.7);
    margin-bottom: 4px;
}

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

.intro-class-card {
    background: rgba(40, 25, 10, 0.06);
    border: 2px solid rgba(120, 80, 40, 0.2);
    border-radius: 8px;
    padding: 16px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s;
}
.intro-class-card:hover {
    border-color: var(--cls-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px var(--cls-glow);
}
.intro-class-card.selected {
    border-color: var(--cls-color);
    box-shadow: 0 0 20px var(--cls-glow), inset 0 0 20px rgba(0,0,0,0.05);
    background: rgba(40, 25, 10, 0.1);
    overflow: hidden;
}
/* Shimmer sweep on selected class card */
.intro-class-card.selected::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 35%,
        rgba(255, 255, 255, 0.12) 45%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.12) 55%,
        transparent 65%,
        transparent 100%
    );
    animation: introShimmer 2.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes introShimmer {
    0%   { transform: translateX(0); }
    100% { transform: translateX(350%); }
}
/* Ensure card is positioned for the pseudo-element */
.intro-class-card {
    position: relative;
}

.intro-class-icon {
    font-size: 2rem;
}
.intro-class-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cls-color);
}
.intro-class-desc {
    font-size: 0.78rem;
    color: #4a3a28;
    line-height: 1.4;
    text-align: center;
}
.intro-class-play {
    font-size: 0.72rem;
    color: rgba(80, 60, 30, 0.6);
    font-style: italic;
    margin-top: auto;
}

/* ── Buttons ── */
.intro-btn {
    background: linear-gradient(135deg, #2a1a0a 0%, #3a2510 100%);
    color: rgba(220, 190, 140, 0.9);
    border: 1px solid rgba(180, 140, 80, 0.4);
    padding: 10px 28px;
    font-size: 0.95rem;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    margin-top: 8px;
}
.intro-btn:hover {
    background: linear-gradient(135deg, #3a2510 0%, #4a3018 100%);
    border-color: rgba(180, 140, 80, 0.7);
    color: #fff;
}
.intro-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.intro-confirm-btn {
    padding: 12px 36px;
    font-size: 1.05rem;
    font-weight: 600;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .intro-class-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .intro-page {
        padding: 24px 20px;
    }
    .intro-book {
        margin-left: 0;
    }
    .intro-cover-back {
        display: none;
    }
}