/* ============================================================
   Global styles — minimal, no framework dependency
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root {
    --bg:        #0f0f1a;
    --surface:   #1a1a2e;
    --border:    #2a2a4a;
    --accent:    #7c6af7;
    --accent-h:  #9d8fff;
    --text:      #e0e0f0;
    --muted:     #888aaa;
    --danger:    #e05555;
    --fw-opacity: 1;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-h); text-decoration: underline; }

h1, h2, h3 { margin: 0 0 .5rem; font-weight: 600; }

/* ---- Layout ---- */
.layout { display: flex; flex-direction: column; min-height: 100vh; }

.navbar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: .75rem 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.navbar .brand { font-weight: 700; font-size: 1.15rem; color: var(--accent); white-space: nowrap; }

.navbar nav { display: flex; align-items: center; gap: 1rem; flex: 1; }
.navbar nav a, .navbar nav .btn-nav { white-space: nowrap; }

.navbar .user-area { margin-left: auto; display: flex; align-items: center; gap: .75rem; white-space: nowrap; }

.main-content { flex: 1; padding: 2rem 1.5rem; max-width: 900px; margin: 0 auto; width: 100%; }

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1.1rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
    transition: opacity .15s;
}
.btn:hover { opacity: .85; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn-danger { background: var(--danger); color: #fff; }

/* ---- Cards ---- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
}

/* ---- Avatar ---- */
.avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.avatar-lg { width: 80px; height: 80px; }

/* ---- Utility ---- */
.muted { color: var(--muted); font-size: .88rem; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.flex-center { display: flex; align-items: center; gap: .75rem; }

/* ---- Error UI ---- */
#blazor-error-ui {
    position: fixed; bottom: 0; left: 0; right: 0;
    padding: .75rem 1.5rem;
    background: var(--danger);
    color: #fff;
    text-align: center;
    z-index: 1000;
}

/* ================================================================
   Zone view
   ================================================================ */

.zone-view { display: flex; flex-direction: column; gap: 1.25rem; }

.zone-view-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.zone-view-header h1 { margin: 0; font-size: 1.4rem; }

.tier-badge {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: .1rem .45rem;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: .25rem;
}
.rec-level-badge {
    display: inline-block;
    background: #3a6;
    color: #fff;
    font-size: .66rem;
    font-weight: 600;
    padding: .1rem .4rem;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: .35rem;
}
.falloff-badge {
    display: inline-block;
    background: #c53;
    color: #fff;
    font-size: .66rem;
    font-weight: 600;
    padding: .1rem .4rem;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: .35rem;
}

/* Two-column layout */
.zone-columns {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.25rem;
    align-items: start;
}

/* ---- Monster panel ---- */
.monsters-panel h2 { font-size: 1rem; margin-bottom: .75rem; }

.monster-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .75rem 1rem;
    margin-bottom: .6rem;
    /* Min-height locks to the tallest natural state (alive + one avatar row) so
       dead/no-avatar cards never shrink and cause layout shift. Cards can still
       grow past this floor when many players are targeting the same monster. */
    min-height: 114px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    user-select: none;
}
.monster-card:hover { border-color: var(--accent); }
.monster-card.dead  { opacity: .55; }

/* Highlighted priority target */
.monster-card.my-target {
    border-color: #f5a623;
    box-shadow: 0 0 0 2px rgba(245,166,35,.25);
}
.monster-card.my-target.dead {
    border-color: #c4841e;
    box-shadow: 0 0 0 2px rgba(196,132,30,.15);
}

.monster-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .4rem;
}

.monster-name { font-weight: 600; font-size: .95rem; }
.target-icon  { font-size: 1rem; line-height: 1; }

.respawn-timer { margin-top: .3rem; }
.target-waiting { font-style: italic; }

/* HP bar */
.hp-bar-bg {
    width: 100%;
    height: 7px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: .25rem;
}
.hp-bar-fill {
    height: 100%;
    background: #5ddb7a;
    border-radius: 4px;
    transition: width .4s ease;
}

.hp-label { font-size: .8rem; }

/* Player avatar bubbles on monster card — always rendered to hold space */
.targeting-indicators {
    display: flex;
    flex-wrap: nowrap;      /* no wrap: extra bubbles are clipped, not reflowed */
    gap: .3rem;
    margin-top: .5rem;
    height: 22px;           /* fixed: one bubble row, always reserved */
    overflow: hidden;
}
.player-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: .7rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    cursor: default;
}

/* ---- Sidebar ---- */
.zone-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.combat-log {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .85rem 1rem;
}

.combat-log h2 {
    font-size: .9rem;
    margin-bottom: .6rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.player-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0 .75rem;
}
.player-column-header {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: .2rem;
    text-align: center;
    white-space: nowrap;
}
.player-row {
    font-size: .9rem;
    padding: .35rem 0;
}
.player-row + .player-row { border-top: 1px solid var(--border); }

.player-info {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.player-name-score {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .25rem;
    min-width: 0;
}
.player-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 0;
}
.player-score {
    font-size: .75rem;
    white-space: nowrap;
    opacity: .55;
    flex: 0 1 auto;
}
.player-hp-row {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.player-hp-row .hp-bar-bg { flex: 1; }
.player-hp-text {
    font-size: .7rem;
    white-space: nowrap;
    min-width: 5.5em;
    text-align: right;
}
.player-skill-icon {
    font-size: .78rem;
    cursor: default;
}
.player-target-label {
    font-size: .78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.1em;
}

/* Combat log */
.log-entries {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    flex: 1;
    overflow-y: auto;
}
.log-entry       { font-size: .8rem; line-height: 1.4; }
.log-entry.hit   { color: var(--text); }
.log-entry.crit  { color: #f5c842; }
.log-entry.kill  { color: #e05587; font-weight: 600; }

/* Fade older log entries — newest is first child */
.log-entry:nth-child(n+4)  { opacity: .7; }
.log-entry:nth-child(n+8)  { opacity: .45; }
.log-entry:nth-child(n+12) { opacity: .25; }

/* Combat log filter toggles */
.combat-log-filters {
    display: flex;
    gap: .25rem;
    padding: 0 0 .5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: .5rem;
    flex-shrink: 0;
}
.filter-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: .15rem .35rem;
    font-size: .8rem;
    cursor: pointer;
    opacity: .4;
    transition: opacity .15s, border-color .15s;
}
.filter-btn.active {
    opacity: 1;
    border-color: var(--accent);
}

/* Responsive: stack on narrow screens */
@media (max-width: 680px) {
    .zone-columns { grid-template-columns: 1fr; }
}

/* ================================================================
   Zones list page
   ================================================================ */

.zones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.zone-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.zone-card-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: 1rem;
}

.zone-card p { margin: 0; font-size: .88rem; color: var(--muted); }

/* ================================================================
   Inventory / Skills tables
   ================================================================ */

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}
.data-table th {
    text-align: left;
    color: var(--muted);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    padding: .4rem .75rem;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.data-table td {
    padding: .4rem .75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }

/* Skills table */
.skill-group-header {
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin: .6rem 0 .2rem;
    padding-bottom: .15rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
}
.skill-group-header:hover { color: var(--text); }
.skill-group-header:first-child { margin-top: 0; }
.skill-group-chevron {
    display: inline-block;
    transition: transform .2s ease;
    font-size: .7em;
    margin-right: .3em;
}
.skill-group-chevron.collapsed { transform: rotate(-90deg); }
.skills-table { table-layout: fixed; width: 100%; }
.skills-table th:first-child,
.skills-table .skill-level { width: 3.2rem; white-space: nowrap; text-align: center; }
.skills-table .skill-progress-cell { width: 40%; min-width: 0; overflow: hidden; }
.skills-table tr { cursor: default; }
.skills-table tr.skill-highlight td {
    background: rgba(218,165,32,.15);
}
.skills-table tr.skill-inactive td {
    opacity: .45;
}

/* Cross-highlight: action button glows when its skill is hovered in Skills panel */
.action-cell.skill-highlight {
    box-shadow: 0 0 0 2px #daa520;
    background: rgba(218,165,32,.15);
}

.skill-xp-bar {
    height: 10px;
    background: var(--border);
    border-radius: 5px;
    overflow: hidden;
    min-width: 0;
}
.skill-xp-fill {
    height: 100%;
    background: var(--accent, #7c6af7);
    border-radius: 5px;
    transition: width .3s ease;
}

/* Tier section headings on the inventory page */
.tier-section h3 {
    font-size: .8rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 1.25rem 0 .4rem;
}

/* Combat log — XP and loot event colours */
.log-entry.xp   { color: #7ec8e3; }
.log-entry.loot { color: #b4e87b; }

/* Gold display */
.gold-label { color: #f5c842; font-weight: 600; }

/* ================================================================
   Nav toggle buttons (World / Inventory)
   ================================================================ */

.btn-nav {
    background: none;
    border: none;
    color: var(--accent);
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    padding: .2rem .4rem;
    border-radius: 4px;
    transition: color .15s, background .15s;
}
.btn-nav:hover { color: var(--accent-h); background: rgba(124,106,247,.12); }

/* ================================================================
   Global overlay (World / Inventory drawer)
   ================================================================ */

.overlay-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 200;
}

.overlay-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    width: min(480px, 95vw);
    background: var(--bg);
    border-left: 1px solid var(--border);
    z-index: 201;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.overlay-drawer-right { right: 0; }

.overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1.25rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.overlay-header h2 { margin: 0; font-size: 1.1rem; }

.overlay-close {
    padding: .2rem .6rem;
    font-size: .85rem;
    line-height: 1;
}

/* ================================================================
   Inventory panel (inside overlay)
   ================================================================ */

.inventory-panel-content {
    padding: 1rem;
    overflow-y: auto;
    flex: 1;
}

.gold-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    font-size: 1rem;
}

/* ================================================================
   Item tags
   ================================================================ */

.item-tag {
    display: inline-block;
    background: rgba(124,106,247,.18);
    color: var(--accent-h);
    font-size: .72rem;
    padding: .1rem .35rem;
    border-radius: 3px;
    margin-right: .2rem;
    white-space: nowrap;
}

/* ================================================================
   World / Region panel
   ================================================================ */

.world-panel-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    overflow-y: auto;
    flex: 1;
}

.region-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

.region-card-header {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .35rem;
}
.region-card-header h3 { margin: 0; font-size: 1rem; }

.region-desc { margin: 0 0 .6rem; }

.area-icon { font-size: .9rem; }

.area-list { display: flex; flex-direction: column; gap: .3rem; }

.area-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    padding: .2rem 0;
}
.area-link {
    color: var(--accent);
    text-decoration: none;
    cursor: pointer;
}
.area-link:hover {
    color: var(--accent-h);
    text-decoration: underline;
}

/* ================================================================
   Vendor panel (inside PeacefulAreaView)
   ================================================================ */

.vendor-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: .75rem;
}

.vendor-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
}
.vendor-card h3 { margin: 0 0 .3rem; font-size: .95rem; }
.vendor-desc { margin: 0; }

.vendor-panel { display: flex; flex-direction: column; gap: .75rem; }

.vendor-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.vendor-buytags { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; font-size: .85rem; }

.vendor-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: .5rem;
}

.vendor-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 600;
    padding: .4rem 1rem;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    margin-bottom: -1px;
}
.vendor-tab:hover  { color: var(--text); }
.vendor-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.price-reduced { color: var(--muted); }

.vendor-panel-wrapper { margin-top: .75rem; }

/* Small button variant */
.btn-sm { padding: .2rem .65rem; font-size: .8rem; }

/* Action bar */
.action-bar {
    display: flex;
    gap: .5rem;
    padding: .5rem 0;
    flex-wrap: wrap;
}
.action-bar .cooldown { opacity: .5; }
.cooldown-timer { margin-left: .25rem; font-size: .7rem; }

/* Player health in battlefield */
.player-row.incapacitated { opacity: .5; }
.incap-badge {
    display: inline-block;
    font-size: .7rem;
    padding: .1rem .4rem;
    background: var(--danger);
    color: #fff;
    border-radius: 3px;
    margin-left: .25rem;
}
.hp-bar-fill.hp-warn { background: #e0a040; }
.hp-bar-fill.hp-danger { background: var(--danger); }

/* Status effect badges */
.status-effects-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: .15rem;
    overflow: hidden;
    max-width: 100%;
}
.status-badge {
    display: inline-block;
    font-size: .75rem;
    flex-shrink: 0;
}

/* Monster attacking indicator */
.monster-attacking { margin-top: .25rem; }

/* Danger button */
.btn-danger {
    background: var(--danger);
    color: #fff;
    border: 1px solid var(--danger);
}

/* ================================================================
   Crafting page
   ================================================================ */

.crafting-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.25rem;
    align-items: start;
    flex: 1;
    min-height: 0;
}

.crafting-recipes {
    overflow-y: auto;
    max-height: 100%;
    align-self: stretch;
    scrollbar-gutter: stable;
}

.crafting-recipes h2 { font-size: 1rem; margin-bottom: .75rem; }

.crafting-skill-tabs {
    display: flex;
    gap: .2rem;
    margin-bottom: .5rem;
    flex-wrap: wrap;
}
.crafting-skill-tab {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--muted);
    font-size: .78rem;
    padding: .2rem .5rem;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.crafting-skill-tab:hover { color: var(--text); border-color: var(--text); }
.crafting-skill-tab.active {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(124,106,247,.1);
}

.recipe-category { margin-bottom: .75rem; }

.recipe-category-header {
    font-size: .78rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0 0 .35rem;
}

.recipe-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: .35rem .6rem;
    cursor: pointer;
    color: var(--text);
    font-size: .88rem;
    text-align: left;
    transition: background .15s, border-color .15s;
}
.recipe-item:hover { background: rgba(124,106,247,.08); }
.recipe-item.active {
    background: rgba(124,106,247,.15);
    border-color: var(--accent);
}
.recipe-item-name { font-weight: 500; white-space: nowrap; }
.recipe-item.dimmed { color: var(--muted); opacity: .5; }
.craft-buttons .btn.dimmed { opacity: .45; }
.recipe-item-skill { font-size: .75rem; }

.crafting-detail h2 { font-size: 1.15rem; }

.section-label {
    font-size: .78rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 1rem 0 .5rem;
}

.input-slot { margin-bottom: .6rem; }

.input-slot-header {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .9rem;
    margin-bottom: .25rem;
}
.input-slot-material { font-weight: 500; color: var(--text); }

.input-slot-selectors {
    display: flex;
    gap: .5rem;
}
.input-slot-selectors .crafting-select { flex: 1; }
.crafting-select-ql { max-width: 12rem; }

.crafting-select {
    width: 100%;
    padding: .4rem .6rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: .88rem;
    font-family: inherit;
}
.crafting-select:focus { outline: none; border-color: var(--accent); }

.output-preview {
    background: rgba(124,106,247,.06);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .75rem 1rem;
}

.output-item { font-size: .95rem; margin-bottom: .35rem; }

.output-stats {
    display: flex;
    gap: 1.25rem;
    font-size: .85rem;
    color: var(--muted);
}
.output-stats strong { color: var(--text); }

/* Equipment craft preview: two-card before → after layout */
.craft-preview-cards { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: .5rem 0; }
.craft-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    padding: .5rem; display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: .25rem; min-height: 90px; min-width: 100px;
}
.craft-card.not-owned { color: var(--muted); opacity: .55; }
.craft-card .codex-card-ql.ql-higher { color: #5ddb7a; }
.craft-card .codex-card-ql.ql-lower  { color: var(--danger); }
.craft-arrow { color: var(--muted); flex-shrink: 0; }

.byproducts { margin-top: .5rem; }
.byproduct-row { font-size: .85rem; padding: .15rem 0; }
.byproduct-row.locked { color: var(--muted); opacity: .6; }

.craft-buttons {
    display: flex;
    gap: .5rem;
}

.craft-result {
    background: rgba(93,219,122,.1);
    border: 1px solid rgba(93,219,122,.3);
    border-radius: 8px;
    padding: .75rem 1rem;
}
.craft-result-main { font-size: .95rem; }
.craft-result-bonus { color: #b4e87b; font-size: .88rem; margin-top: .2rem; }
.batch-ql-breakdown { display: flex; gap: .5rem; flex-wrap: wrap; margin: .25rem 0; font-size: .85rem; }
.batch-ql-entry { background: rgba(255,255,255,.08); padding: .15rem .5rem; border-radius: 4px; }

/* ---- Inventory grouping ---- */
.inventory-group-header { cursor: pointer; }
.inventory-group-header:hover td { background: rgba(255,255,255,.04); }
.expand-toggle { display: inline-block; width: 1rem; font-size: .75rem; color: var(--muted); margin-right: .25rem; }
.inventory-sub-row td { padding-top: .15rem; padding-bottom: .15rem; font-size: .85rem; }
.inventory-sub-row td:first-child { padding-left: 1.5rem; }

/* ---- Equipment layout (side-by-side) ---- */
.equipment-layout {
    display: flex;
    gap: 28px;
    justify-content: center;
    align-items: end;
    margin: .75rem 0;
}
.equipment-left {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.equipment-right {
    display: grid;
    grid-template-columns: repeat(5, 48px);
    grid-template-rows: repeat(3, 48px);
    gap: 4px;
}

/* ---- Equipment grid ---- */
.equipment-grid {
    display: grid;
    grid-template-columns: repeat(3, 64px);
    grid-template-rows: repeat(5, 64px);
    gap: 6px;
    justify-content: center;
}
.equipment-slot {
    width: 64px;
    height: 64px;
    background: var(--surface);
    user-select: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    color: var(--muted);
}
.equipment-slot:hover { border-color: var(--accent); }
.equipment-slot.filled { border-color: var(--accent); background: rgba(124,106,247,.08); color: var(--text); }
.equipment-slot.warning { border-color: #e74c3c; background: rgba(231,76,60,.10); }
.equipment-slot.locked { border-color: var(--muted); opacity: .5; pointer-events: none; }
.equipment-slot-label { font-size: .6rem; text-transform: uppercase; letter-spacing: .04em; }
.equipment-slot-missing-quiver { width: 28px; height: 28px; opacity: .6; }
.equipment-bonuses { display: flex; gap: 1rem; justify-content: center; margin-top: .25rem; font-size: .85rem; }
.equip-stat { color: var(--accent); }
.equip-stat-inline { color: var(--accent); margin-right: .4rem; }
.equipment-set-bonus { text-align: center; margin-top: .25rem; font-size: .8rem; color: var(--accent); opacity: .9; }

/* ---- Expendable slots ---- */
.equipment-slot.expendable {
    width: 48px;
    height: 48px;
    position: relative;
    border-style: dashed;
}
.equipment-slot.expendable.filled {
    border-style: solid;
    border-color: #2ecc71;
    background: rgba(46,204,113,.08);
}
.expendable-qty {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: .65rem;
    font-weight: 700;
    color: var(--text);
    text-shadow: 0 0 3px var(--bg);
}

/* ---- Action Slots ---- */
.equipment-slot.action-slot {
    width: 48px;
    height: 48px;
}
.equipment-slot.action-slot.filled {
    border-style: solid;
    border-color: #7c6af7;
    background: rgba(124,106,247,.08);
}
.equipment-slot.action-slot.targeted,
.equipment-slot.expendable.targeted {
    border-color: var(--accent);
    border-style: dashed;
    background: rgba(124,106,247,.12);
    box-shadow: 0 0 4px rgba(124,106,247,.3);
}
.equipment-slot.drag-over {
    border-color: var(--accent) !important;
    background: rgba(124,106,247,.18) !important;
    box-shadow: 0 0 6px rgba(124,106,247,.4);
}
[draggable="true"] { cursor: grab; }
[draggable="true"]:active { cursor: grabbing; }

/* ---- Equipment Codex ---- */
.codex-equipped-summary { margin-bottom: 1rem; }

.codex-tabs {
    display: flex;
    gap: .25rem;
    margin-bottom: .75rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: .25rem;
}
.codex-tab {
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: .9rem;
    padding: .35rem .75rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.codex-tab:hover { color: var(--text); }
.codex-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.codex-tab-clear { color: var(--muted); font-size: .75rem; border-bottom: none; }
.codex-tab-clear:hover { color: var(--text); }

.codex-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: .5rem;
    margin-bottom: 1rem;
}

.codex-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .25rem;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    user-select: none;
    position: relative;
    min-height: 90px;
}
.codex-card:hover { border-color: var(--accent); }
.codex-card.selected { border-color: var(--accent); background: rgba(124,106,247,.12); }
.codex-card.owned { color: var(--text); }
.codex-card.locked { color: var(--muted); opacity: .55; }
.codex-card.equipped { border-color: #5ddb7a; }

.codex-card-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.codex-card-locked { font-size: 1.5rem; color: var(--muted); }
.codex-card-name { font-size: .75rem; line-height: 1.15; }
.codex-card-ql { font-size: .65rem; color: var(--accent); }
.codex-card-badge {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: .55rem;
    color: #5ddb7a;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.codex-detail { margin-top: .5rem; min-height: 215px; }
.codex-detail-stats { display: flex; gap: .75rem; margin: .5rem 0; font-size: .9rem; }

.material-location-link {
    display: block;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    font-size: .82rem;
    padding: .2rem .4rem;
    border-radius: 4px;
    color: var(--accent);
    cursor: pointer;
    transition: background .15s;
}
.material-location-link:hover {
    background: rgba(124,106,247,.12);
}

/* Item icon */
.item-icon { display: inline-flex; align-items: center; justify-content: center; }
.item-icon svg { width: 100%; height: 100%; }

/* Equip button in inventory rows */
.btn-equip {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: .15rem .5rem;
    border-radius: 4px;
    font-size: .75rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.btn-equip:hover { background: var(--accent); color: #fff; }

/* Slot picker overlay for shoulder items */
.slot-picker-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.slot-picker {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 200px;
}

@media (max-width: 680px) {
    .crafting-layout { grid-template-columns: 1fr; }
}

/* ================================================================
   Floating Window System
   ================================================================ */

.floating-window {
    position: fixed;
    display: flex;
    flex-direction: column;
    background: rgba(26, 26, 46, var(--fw-opacity));
    border: 1px solid rgba(42, 42, 74, var(--fw-opacity));
    border-radius: 6px;
    box-shadow: 0 4px 24px rgba(0,0,0, calc(.5 * var(--fw-opacity)));
    overflow: hidden;
    user-select: none;
    transition: border-color .15s;
}
.floating-window:hover {
    border-color: rgba(124, 106, 247, .35);
}

.fw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .35rem .6rem;
    background: rgba(255,255,255, calc(.04 * var(--fw-opacity)));
    border-bottom: 1px solid rgba(42, 42, 74, var(--fw-opacity));
    cursor: grab;
    flex-shrink: 0;
}
.fw-header:active { cursor: grabbing; }

.fw-title {
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fw-controls {
    display: flex;
    gap: .2rem;
    flex-shrink: 0;
}

.fw-btn {
    background: none;
    border: none;
    color: var(--muted);
    font-size: .75rem;
    cursor: pointer;
    padding: .15rem .35rem;
    border-radius: 3px;
    line-height: 1;
}
.fw-btn:hover { color: var(--text); background: rgba(255,255,255,.08); }
.fw-close:hover { color: var(--danger); background: rgba(224,85,85,.15); }

.fw-body {
    flex: 1;
    overflow: auto;
    scrollbar-gutter: stable;
    padding: .5rem;
    user-select: text;
    display: flex;
    flex-direction: column;
    background: rgba(26, 26, 46, var(--fw-opacity));
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.fw-body::-webkit-scrollbar { width: 6px; }
.fw-body::-webkit-scrollbar-track { background: transparent; }
.fw-body::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}
.fw-body::-webkit-scrollbar-thumb:hover { background: var(--muted); }

.fw-resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 50%, var(--muted) 50%);
    opacity: .4;
    border-radius: 0 0 6px 0;
}
.fw-resize-handle:hover { opacity: .7; }

.fw-collapsed .fw-header { border-bottom: none; }

/* ================================================================
   Sidebar Toolbar
   ================================================================ */

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 48px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: .5rem 0;
    z-index: 500;
    transition: width .15s ease;
    overflow: hidden;
}
.sidebar-expanded { width: 140px; }

.sidebar-hamburger { margin-bottom: .15rem; }

.sidebar-sep {
    height: 1px;
    background: var(--border);
    margin: .35rem 6px;
}

.sidebar-icon {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    border: none;
    background: none;
    color: var(--muted);
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s, color .15s;
    position: relative;
    padding: 0;
    margin: 0 6px;
    gap: .45rem;
    white-space: nowrap;
}
.sidebar-expanded .sidebar-icon { justify-content: flex-start; padding: 0 .5rem; }

.sidebar-emoji { flex-shrink: 0; width: 24px; text-align: center; }
.sidebar-label { font-size: .78rem; overflow: hidden; }

.sidebar-icon:hover { background: rgba(124,106,247,.12); color: var(--text); text-decoration: none; }
a.sidebar-icon { text-decoration: none; }
.sidebar-icon.active { color: var(--accent); background: rgba(124,106,247,.18); }

.sidebar-opacity {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 6px;
    gap: .25rem;
    min-height: 36px;
}
.sidebar-expanded .sidebar-opacity { justify-content: flex-start; padding: 0 .5rem; }

.sidebar-slider {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.sidebar-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
}
.sidebar-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    border: none;
    cursor: pointer;
}

.sidebar-spacer { flex: 1; }

/* Account section at bottom of sidebar */
.sidebar-account {
    position: relative;
    margin-top: .5rem;
}

.sidebar-account-btn { overflow: hidden; }
.sidebar-build { display: block; text-align: center; font-size: .55rem; color: var(--muted); opacity: .5; margin-top: .25rem; }

.sidebar-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.account-dropdown {
    position: fixed;
    left: 52px;
    bottom: .5rem;
    min-width: 160px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.5);
    z-index: 400;
    padding: .35rem 0;
}

.account-dropdown a,
.account-dropdown button {
    display: block;
    width: 100%;
    padding: .45rem .75rem;
    background: none;
    border: none;
    color: var(--text);
    font-size: .85rem;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
}
.account-dropdown a:hover,
.account-dropdown button:hover {
    background: rgba(124,106,247,.12);
    color: var(--accent);
    text-decoration: none;
}

.account-dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 399;
}

/* Adjust main content to account for sidebar */
.layout-with-sidebar .main-content {
    margin-left: 48px;
    width: calc(100% - 48px);
}

/* Account dropdown offset tracks sidebar width */
.sidebar-expanded .account-dropdown { left: 140px; }

/* ================================================================
   Action Bar Grid (floating window)
   ================================================================ */

.action-bar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 48px);
    grid-auto-rows: 48px;
    gap: 4px;
    justify-content: center;
}

.action-cell {
    width: 48px;
    height: 48px;
    position: relative;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    color: var(--muted);
    padding: 0;
}

.action-cell.ready {
    border-color: var(--accent);
    color: var(--text);
}
.action-cell.ready:hover {
    background: rgba(124,106,247,.15);
    border-color: var(--accent-h);
}
.action-cell.empty {
    cursor: default;
    opacity: .3;
}
.action-cell:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.action-cell .cooldown-sweep {
    position: absolute;
    inset: 0;
    border-radius: 4px;
    pointer-events: none;
}

/* Expendable action cells */
.action-cell.expendable-action.ready {
    border-color: #2ecc71;
}
.action-cell.expendable-action.ready:hover {
    background: rgba(46,204,113,.15);
    border-color: #27ae60;
}
.action-cell.expendable-action.depleted {
    opacity: .4;
}
.expendable-action-qty {
    position: absolute;
    bottom: 1px;
    right: 3px;
    font-size: .6rem;
    font-weight: 700;
    color: var(--text);
    text-shadow: 0 0 3px var(--bg);
    pointer-events: none;
}

/* Action icon */
.action-icon { display: inline-flex; align-items: center; justify-content: center; }
.action-icon svg { width: 100%; height: 100%; }

/* ---- Buffs Panel ---- */
.buffs-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: .25rem;
}
.buff-entry {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: .85rem;
}
.buff-icon { font-size: 1.1rem; }
.buff-name { flex: 1; color: var(--text); }
.buff-value { color: var(--accent); font-size: .8rem; }
.buff-timer { color: var(--muted); font-size: .75rem; min-width: 2rem; text-align: right; }

/* ================================================================
   Player Health Panel (floating window)
   ================================================================ */

.player-health-panel {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.health-bar-row {
    display: flex;
    flex-direction: column;
}
.health-bar-row .hp-bar-bg { height: 18px; position: relative; }

.health-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.7);
    z-index: 2;
    pointer-events: none;
}

.health-stats-row {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: .25rem;
}
.health-stat {
    font-size: .78rem;
    color: var(--muted);
}

.health-breakdown {
    text-align: center;
    font-size: .78rem;
}

/* ================================================================
   Health Bar Preview (action hover)
   ================================================================ */

.hp-bar-preview-container {
    position: relative;
    display: flex;
    overflow: hidden;
}

.hp-bar-preview-heal {
    height: 100%;
    background: rgba(93,219,122,.35);
    animation: preview-pulse 1s ease-in-out infinite alternate;
}

.hp-bar-preview-damage {
    height: 100%;
    background: rgba(180,40,40,.9);
    border-left: 1px solid rgba(255,80,80,.8);
    animation: preview-pulse-damage 1s ease-in-out infinite alternate;
}

.hp-bar-preview-segment {
    margin-left: 1px;
}

.hp-bar-dot-overlay,
.hp-bar-dmg-overlay {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
}

@keyframes preview-pulse {
    from { opacity: 1; }
    to   { opacity: .5; }
}

@keyframes preview-pulse-damage {
    from { opacity: 1; }
    to   { opacity: .75; }
}

/* ================================================================
   Disconnect overlay
   ================================================================ */

.disconnect-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fade-in .3s ease;
}

.disconnect-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 2rem 3rem;
    text-align: center;
}

.disconnect-modal h2 {
    margin: 0 0 .5rem;
    color: var(--danger);
    font-size: 1.3rem;
}

.disconnect-modal p {
    margin: 0 0 1.5rem;
    color: var(--muted);
    font-size: .9rem;
}

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Tile Map ─────────────────────────────────────────────────────── */

.tilemap-page { padding: 0; display: flex; flex-direction: column; height: calc(100vh - 48px); overflow: hidden; }
.main-content:has(.tilemap-page) { padding: 0; max-width: none; }

.tilemap-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem;
    margin-bottom: .5rem;
    background: var(--surface);
    border-radius: 6px;
    flex-wrap: wrap;
}

.tilemap-toolbar .btn-sm.active {
    background: var(--accent);
    color: #fff;
}

.tilemap-viewport {
    position: relative;
    flex: 1;
    overflow: hidden;
    cursor: default;
    user-select: none;
}

.tilemap-camera {
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
}

.tilemap-bg {
    display: block;
    pointer-events: none;
}


.tilemap-tile {
    position: absolute;
    /* clip-path set dynamically per-tile from basis vectors */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .1s;
    cursor: pointer;
    z-index: 1;
}

.tilemap-tile:hover,
.tilemap-tile.hovered {
    background: rgba(255, 255, 255, 0.15);
}

.tilemap-tile.calibrate-preview {
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
    cursor: default;
}

.tilemap-grid-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.tilemap-area-select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    overflow: visible;
}

.tilemap-tile.blocked {
    cursor: not-allowed;
    pointer-events: none;
}

.tilemap-tile.unwalkable-edit {
    background: rgba(255, 40, 40, 0.35);
    pointer-events: auto;
    cursor: pointer;
}

.tilemap-tile.occluder-edit {
    /* Background alpha is set inline per-tile to reflect the painted value */
    pointer-events: auto;
    cursor: pointer;
}

/* .tilemap-tile.my-tile — removed, player marker is now a standalone element */

.tilemap-player {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    z-index: 2;
    pointer-events: none;
    border: 2px solid rgba(255, 255, 255, 0.6);
    transform: translate(-50%, -50%);
    transition: left .15s linear, top .15s linear;
}

.tilemap-player.me {
    background: #4caf50;
    border-color: #fff;
}

/* ── Player sprite ── */
.player-sprite {
    position: absolute;
    width: 40px;
    height: 60px;
    z-index: 2;
    pointer-events: none;
    transform: translate(-50%, -75%) scale(var(--entity-scale, 1));  /* anchor at feet center */
    overflow: visible;
}

.tilemap-other-sprite {
    pointer-events: auto;
    cursor: default;
}

.tilemap-player-name {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    transform: translate(-50%, 0);
    font-size: .6rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 0 3px #000, 0 0 6px #000;
    white-space: nowrap;
    text-align: center;
    opacity: 0;
    transition: opacity .15s ease;
}

/* Show nametag on hover (toggled by JS) or when a party action highlights */
.tilemap-player-name.hovered,
.tilemap-player-name.show-name {
    opacity: 1;
}

/* AoE heal hover — ally nametags in green */
.tilemap-player-name.highlight-heal {
    color: #4f4;
    opacity: 1;
}

/* Limb pivot points — transform-origin relative to SVG viewBox */
.ps-leg-back, .ps-leg-front  { transform-origin: 16px 30px; }
.ps-arm-back                  { transform-origin: 11px 18px; }
.ps-arm-front                 { transform-origin: 21px 18px; }
.ps-head, .ps-torso           { transform-origin: 16px 24px; }

/* ── Idle animation ── */
.player-sprite.idle .ps-torso,
.player-sprite.idle .ps-head {
    animation: idle-bob 2s ease-in-out infinite;
}
.player-sprite.idle .ps-arm-front {
    animation: idle-arm-sway 2.5s ease-in-out infinite;
}
.player-sprite.idle .ps-arm-back {
    animation: idle-arm-sway 2.5s ease-in-out infinite reverse;
}

@keyframes idle-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-0.8px); }
}
@keyframes idle-arm-sway {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(3deg); }
}

/* ── Walk animation ── */
.player-sprite.walking .ps-leg-front {
    animation: walk-leg 0.4s ease-in-out infinite;
}
.player-sprite.walking .ps-leg-back {
    animation: walk-leg 0.4s ease-in-out infinite reverse;
}
.player-sprite.walking .ps-arm-front {
    animation: walk-arm 0.4s ease-in-out infinite reverse;
}
.player-sprite.walking .ps-arm-back {
    animation: walk-arm 0.4s ease-in-out infinite;
}
.player-sprite.walking .ps-torso,
.player-sprite.walking .ps-head {
    animation: walk-bob 0.2s ease-in-out infinite;
}

@keyframes walk-leg {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(18deg); }
    75%      { transform: rotate(-18deg); }
}
@keyframes walk-arm {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(12deg); }
    75%      { transform: rotate(-12deg); }
}
@keyframes walk-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-0.5px); }
}

/* ── Action animation ── */
.player-sprite.action .ps-arm-front {
    animation: action-swing 0.4s ease-out forwards !important;
}
@keyframes action-swing {
    0%   { transform: rotate(0deg); }
    30%  { transform: rotate(-60deg); }
    100% { transform: rotate(0deg); }
}

/* ── Incapacitated animation ── */
.player-sprite.incap {
    animation: incap-fall 0.5s ease-in forwards !important;
    opacity: 0.55;
}
.player-sprite.incap.facing-w,
.player-sprite.incap.facing-sw,
.player-sprite.incap.facing-nw {
    animation: incap-fall-w 0.5s ease-in forwards !important;
    opacity: 0.55;
}
@keyframes incap-fall {
    from { transform: translate(-50%, -75%) scale(var(--entity-scale, 1)) rotate(0deg); }
    to   { transform: translate(-50%, -75%) scale(var(--entity-scale, 1)) rotate(90deg); }
}
@keyframes incap-fall-w {
    from { transform: translate(-50%, -75%) scale(var(--entity-scale, 1)) scaleX(-1) rotate(0deg); }
    to   { transform: translate(-50%, -75%) scale(var(--entity-scale, 1)) scaleX(-1) rotate(90deg); }
}
.player-sprite.incap .ps-leg-front,
.player-sprite.incap .ps-leg-back,
.player-sprite.incap .ps-arm-front,
.player-sprite.incap .ps-arm-back,
.player-sprite.incap .ps-torso,
.player-sprite.incap .ps-head {
    animation: none !important;
}

/* ── Facing directions ── */
/* Default: facing east (right) */
.player-sprite.facing-e  { }
.player-sprite.facing-se { }
.player-sprite.facing-s  { }
.player-sprite.facing-ne { }
.player-sprite.facing-n  { }

/* Westward: mirror horizontally */
.player-sprite.facing-w  { transform: translate(-50%, -75%) scale(var(--entity-scale, 1)) scaleX(-1); }
.player-sprite.facing-sw { transform: translate(-50%, -75%) scale(var(--entity-scale, 1)) scaleX(-1); }
.player-sprite.facing-nw { transform: translate(-50%, -75%) scale(var(--entity-scale, 1)) scaleX(-1); }

/* ── Front/back head visibility ── */
.ps-back-head { display: none; }

/* When facing away (N, NE, NW) — show back of head, hide face */
.player-sprite.facing-n  .ps-face,
.player-sprite.facing-ne .ps-face,
.player-sprite.facing-nw .ps-face { display: none; }
.player-sprite.facing-n  .ps-back-head,
.player-sprite.facing-ne .ps-back-head,
.player-sprite.facing-nw .ps-back-head { display: initial; }

/* ── Heal burst particles (direct heals: Mend, Group Heal, Revive) ── */
.heal-burst {
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 0;
    pointer-events: none;
    z-index: 15;
}
.heal-particle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #5ddb7a;
    box-shadow: 0 0 4px 1px rgba(93,219,122,0.7);
    animation: heal-burst-fly 0.6s ease-out forwards;
    opacity: 0;
}
@keyframes heal-burst-fly {
    0%   { transform: translate(0, 0) scale(0); opacity: 1; }
    30%  { opacity: 1; transform: translate(calc(var(--dx) * 0.5), calc(var(--dy) * 0.5)) scale(1); }
    100% { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; }
}

/* ── HoT shimmer (persistent regen indicator) ── */
.hot-shimmer {
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 0;
    pointer-events: none;
    z-index: 14;
}
.hot-dot {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #5ddb7a;
    box-shadow: 0 0 3px 1px rgba(93,219,122,0.5);
    opacity: 0.6;
    animation: hot-float var(--dur) ease-in-out infinite alternate;
    animation-delay: var(--delay);
}
@keyframes hot-float {
    0%   { transform: translate(var(--x0), var(--y0)); opacity: 0.35; }
    50%  { opacity: 0.8; }
    100% { transform: translate(var(--x1), var(--y1)); opacity: 0.35; }
}

/* ── AoE shockwave (expanding ring for AoE actions) ── */
.aoe-shockwave {
    position: absolute;
    pointer-events: none;
    z-index: 13;
    width: 0; height: 0;
}
.aoe-ring {
    position: absolute;
    border-radius: 50%;
    border: 2.5px solid var(--ring-color);
    box-shadow: 0 0 6px 1px var(--ring-glow);
    width: 10px; height: 10px;
    transform: translate(-50%, -50%);
    animation: aoe-expand var(--duration) ease-out forwards;
}
@keyframes aoe-expand {
    0%   { width: 10px; height: 10px; opacity: 0.9; border-width: 2.5px; }
    40%  { opacity: 0.7; border-width: 2px; }
    100% { width: var(--max-size); height: var(--max-size); opacity: 0; border-width: 0.5px; }
}

.tilemap-anchor {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 200, 0, 0.9);
    color: #000;
    font-weight: 700;
    font-size: .7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
    border: 2px solid #fff;
}

.tilemap-anchor.preview {
    opacity: 0.5;
}

/* ---- Calibration axis lines ---- */
.tilemap-axis-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9;
    overflow: visible;
}

/* ---- Portal tiles ---- */
.tilemap-tile.portal-ingress {
    background: rgba(40, 120, 255, 0.35);
}

.tilemap-tile.portal-egress {
    animation: portal-pulse 2s ease-in-out infinite;
}

@keyframes portal-pulse {
    0%, 100% { background: rgba(255, 160, 40, 0.25); }
    50% { background: rgba(255, 160, 40, 0.50); }
}

/* ---- Spawn zone tiles ---- */
.tilemap-tile.spawn-zone {
    background: rgba(255, 60, 180, 0.25);
    pointer-events: auto;
}

.tilemap-tile.spawn-zone-selected {
    background: rgba(255, 60, 180, 0.45);
    outline: 2px solid rgba(255, 60, 180, 0.8);
    outline-offset: -2px;
    pointer-events: auto;
}

/* ---- Particle emitter markers (editor) ---- */
.particle-emitter-marker {
    position: absolute;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid rgba(255, 160, 0, 0.8);
    background: rgba(255, 100, 0, 0.3);
    z-index: 10;
    pointer-events: auto;
    cursor: grab;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-shadow: 0 0 2px #000;
    user-select: none;
}
.particle-emitter-marker.selected {
    border-color: #fff;
    background: rgba(255, 200, 0, 0.4);
    box-shadow: 0 0 8px rgba(255, 200, 0, 0.6);
}
.particle-emitter-marker:active {
    cursor: grabbing;
}

/* ---- Fade overlay for portal transitions ---- */
.tilemap-fade-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tilemap-fade-overlay.active {
    opacity: 1;
}

.tilemap-fade-overlay.active.semi {
    opacity: 0.5;
}

.server-offline-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    opacity: 1;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.server-offline-overlay.semi {
    opacity: 0.5;
}

/* ---- Loading indicator inside fade overlay ---- */
.fade-loading-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.fade-loading-text {
    font-size: 1.1rem;
    color: rgba(255,255,255,.55);
    letter-spacing: .08em;
    font-weight: 500;
}

.fade-ellipsis {
    display: inline-block;
    width: 1.5em;
    text-align: left;
}

.fade-ellipsis::after {
    content: '';
    animation: ellipsis 1.4s steps(4, end) infinite;
}

@keyframes ellipsis {
    0%  { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}

/* Floating particles — pure CSS, no JS dependency */
.fade-particles {
    position: relative;
    width: 120px;
    height: 80px;
}

.fade-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,.35);
    /* Distribute across the width */
    left: calc(10% + var(--i) * 7%);
    bottom: 0;
    animation: fadeParticleRise 2.5s ease-in infinite;
    animation-delay: calc(var(--i) * -0.2s);
}

.fade-particle:nth-child(odd) {
    width: 3px;
    height: 3px;
    background: rgba(255,255,255,.2);
    animation-duration: 3s;
}

.fade-particle:nth-child(3n) {
    width: 5px;
    height: 5px;
    background: rgba(255,255,255,.15);
    animation-duration: 3.5s;
}

@keyframes fadeParticleRise {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: 1; }
    70%  { opacity: .6; }
    100% { transform: translateY(-70px) translateX(8px); opacity: 0; }
}

/* ---- Portal editor panel ---- */
.tilemap-portal-editor {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: .5rem;
    flex-wrap: wrap;
}

.tilemap-portal-editor label {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.tilemap-portal-editor select,
.tilemap-portal-editor input[type="text"] {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: .2rem .4rem;
}

/* ── Monster picker dropdown ── */
.monster-picker-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: .35rem;
}
.monster-picker-toggle {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: .2rem .6rem;
    cursor: pointer;
    min-width: 140px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
}
.monster-picker-toggle .caret {
    font-size: .65rem;
    opacity: .6;
}
.monster-picker-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
    width: 380px;
    max-height: 400px;
    display: flex;
    flex-direction: column;
}
.monster-picker-search {
    background: var(--bg);
    color: var(--text);
    border: none;
    border-bottom: 1px solid var(--border);
    padding: .4rem .6rem;
    outline: none;
    border-radius: 6px 6px 0 0;
}
.monster-picker-header {
    display: flex;
    padding: .2rem .6rem;
    border-bottom: 1px solid var(--border);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .6;
}
.monster-picker-list {
    overflow-y: auto;
    flex: 1;
}
.mp-group-label {
    padding: .25rem .6rem;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--accent, #7ba4d4);
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 1;
}
.mp-row {
    display: flex;
    padding: .25rem .6rem;
    cursor: pointer;
    font-size: .8rem;
}
.mp-row:hover {
    background: rgba(255,255,255,.06);
}
.mp-row.selected {
    background: rgba(100,160,255,.15);
}
.mp-col.mp-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mp-col.mp-stat {
    width: 48px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    opacity: .75;
}
.monster-picker-header .mp-col.mp-stat {
    opacity: .6;
}