/* game.css */

:root {
    touch-action: pan-x pan-y;
    height: 100%
}

*:not(input), *:focus:not(input) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline-style: none;
    /*IE*/
}

body {
    margin: 0;
    padding: 0;
    display: block;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    /* otherwise strange scroll */
    user-select: none;
    font-family: Oswald;
    letter-spacing: .07rem;
}

#view {
    background-color: lightgrey;
    display: block;
    user-select: none;
}

#ui {
    visibility: hidden;
    user-select: none;
}

#ui.mode_inventory #inventory .item {
    cursor: var(--cur-inspect, crosshair) !important;
}

#ui.mode_inventory #inventory .scroll {
    cursor: var(--cur-inspect, crosshair) !important;
}

#death_menu {
    position: fixed;
    transform: translate(calc(50vw - 50%), calc(50vh - 50%));
    z-index: 50;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: hsla(0, 0%, 16%, 0.90);
    color: white;
    text-align: right;
    padding: 24px;
}

#death_title {
    font-size: 16pt;
    margin-bottom: 16px;
}

#death_button {
    text-align: center;
    font-size: 14pt;
    padding: 12px 24px;
    background-color: hsla(0, 0%, 100%, 0.2);
}

#death_button:hover {
    cursor: var(--cur-point, pointer);
    background-color: hsla(0, 0%, 100%, 0.5);
}

/**/

.fenetre {
    z-index: 20;
    position: fixed;
    padding: 12px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: hsla(0, 0%, 26%, 0.9);
    overflow: visible;
    color: white;
    user-select: none;
}



@media only screen and (orientation: portrait) {
    .fenetre {
        padding: 16px !important;
    }

    #inventory_conteneur {
        left: 0 !important;
        transform: translateY(-50%) !important;
    }
}

#equipment_and_inventory {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#trade_window {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
}

/* #character {
    display: block;
    font-size: 14pt;
    overflow-y: auto;
    height: 94vh;
    margin-left: 24px;

    max-width: 400px;
    background: linear-gradient(145deg, #2a2a2a, #1e1e1e);
    border: 2px solid #444;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    position: relative;
} */

#character::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #4a9eff, #00d4ff, #4a9eff);
    border-radius: 12px 12px 0 0;
}

/* Character Header */
.character-header {
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #404040;
}

.character-name {
    font-size: 24px;
    font-weight: bold;
    color: #ff6b35;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 4px;
}

.character-level {
    font-size: 16px;
    color: #4a9eff;
    margin-bottom: 8px;
}

.character-experience {
    font-size: 14px;
    color: #a0a0a0;
    background: rgba(74, 158, 255, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-block;
}

/* Section Styling */
.character-section {
    margin-bottom: 20px;
}

.section-title {
    font-size: 14px;
    font-weight: bold;
    color: #4a9eff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    padding-bottom: 4px;
    border-bottom: 1px solid #333;
    display: flex;
    align-items: center;
}

.section-title::before {
    content: '';
    width: 4px;
    height: 16px;
    background: #4a9eff;
    margin-right: 8px;
    border-radius: 2px;
}

/* Stat Rows */
.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(64, 64, 64, 0.3);
    transition: background-color 0.2s ease;
}

.stat-row:hover {
    background-color: rgba(74, 158, 255, 0.05);
}

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

.stat-label {
    font-size: 13px;
    color: #c0c0c0;
    flex: 1;
}

.stat-value {
    font-weight: bold;
    color: #ffffff;
    text-align: right;
    min-width: 60px;
}

/* Special Value Colors */
.stat-value.positive {
    color: #4ecdc4;
}

.stat-value.negative {
    color: #ff6b6b;
}

.stat-value.warning {
    color: #ffd93d;
}

.stat-value.critical {
    color: #ff4757;
}

.stat-value.excellent {
    color: #7bed9f;
}

.stat-value.capped {
    color: #ffd700;
}

/* Vitals Section Special Styling */
.vitals-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.vital-item {
    background: rgba(74, 158, 255, 0.1);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(74, 158, 255, 0.2);
}

.vital-label {
    font-size: 12px;
    color: #a0a0a0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.vital-value {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
}

.vital-bar {
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}

.vital-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.vital-bar-fill.life {
    background: linear-gradient(90deg, #ff4757, #ff6b6b);
}

.vital-bar-fill.mana {
    background: linear-gradient(90deg, #4a9eff, #00d4ff);
}

/* Resistance Grid */
.resistance-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.resistance-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    border: 1px solid rgba(64, 64, 64, 0.5);
}

.resistance-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 8px;
}

.resistance-icon.fire {
    background: #ff4757;
}

.resistance-icon.cold {
    background: #4a9eff;
}

.resistance-icon.light {
    background: #ffd93d;
}

.resistance-icon.poison {
    background: #7bed9f;
}

.resistance-icon.physical {
    background: #8e8e93;
}

.resistance-icon.magic {
    background: violet;
}

.resistance-icon.acid {
    background: #32cd32;
}

/* Skill bonus colors */
.skill-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: rgba(255, 107, 53, 0.05);
    border-radius: 6px;
    border: 1px solid rgba(255, 107, 53, 0.15);
    margin-bottom: 4px;
}

.skill-item:last-child {
    margin-bottom: 0;
}

/* Attributes Special Styling */
.attribute-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: rgba(74, 158, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(74, 158, 255, 0.15);
    margin-bottom: 8px;
    cursor: var(--cur-point, pointer);
    transition: all 0.2s ease;
}

.attribute-item:hover {
    background: rgba(74, 158, 255, 0.1);
    border-color: rgba(74, 158, 255, 0.3);
    transform: translateX(2px);
}

.attribute-item:last-child {
    margin-bottom: 0;
}

.attribute-points {
    font-size: 11px;
    color: #a0a0a0;
    margin-left: 8px;
}

/* Point Indicators */
.points-available {
    background: rgba(125, 237, 159, 0.1);
    border: 1px solid rgba(125, 237, 159, 0.3);
    color: #7bed9f;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 12px;
    text-align: center;
}

/* Attack Info */
.attack-section {
    background: rgba(255, 107, 53, 0.1);
    border: 1px solid rgba(255, 107, 53, 0.2);
    border-radius: 8px;
    padding: 16px;
}

.attack-skill {
    font-size: 16px;
    font-weight: bold;
    color: #ff6b35;
    margin-bottom: 12px;
    text-align: center;
}

/* Responsive Design */
@media (max-width: 480px) {
    #character {
        margin: 10px;
        padding: 16px;
    }

    .resistance-grid {
        grid-template-columns: 1fr;
    }

    .vitals-grid {
        grid-template-columns: 1fr;
    }
}

#stats {
    display: flex;
    flex-direction: column;
    padding: 24px;
    justify-content: center;
    align-items: stretch;
    z-index: 35;
    position: fixed;
    top: 50%;
    /* D2-style: dock to the left half; camera slides the hero right. */
    left: 0;
    max-height: 100vh;
    max-width: 100vw;
    transform: translate(0, -50%);
    background-color: hsla(0, 0%, 16%, 0.98);
    color: white;
}

#skills {
    display: flex;
    flex-direction: column;
    padding: 24px;
    justify-content: center;
    align-items: stretch;
    z-index: 20;
    position: fixed;
    top: 50%;
    left: 50%;
    max-height: 100vh;
    max-width: 100vw;
    transform: translate(-50%, -50%);
    background-color: hsla(0, 0%, 16%, 0.98);
    color: white;
}

.skill_separator {
    width: 100%;
    min-height: 48px;
}

#skills_title {
    position: sticky;
    top: 0;
    width: 100%;
    padding: 12px;
    text-align: center;
    font-size: 16pt;
    background-color: hsla(0, 0%, 16%, 0.98);
    margin-bottom: 12px;
}

.skills_title_no_point_left {
    color: hsla(0, 0%, 50%, 1) !important;
}

.passive_row_level {
    font-size: 16pt !important;
}

#scrolls {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#scrolls>div {
    padding: 12px 16px;
}

.scroll {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.scroll:hover {
    cursor: var(--cur-point, pointer);
    background-color: hsla(0, 0%, 100%, 0.2);
}

.redtext {
    color: hsla(0, 80%, 60%, 1)
}

#scrolls {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.scroll {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.scroll:hover {
    cursor: var(--cur-point, pointer);
    background-color: hsla(0, 0%, 100%, 0.2);
}

canvas {
    position: absolute;
    margin: 0;
    padding: 0;
    display: none;
    /* image-rendering: pixelated;
    image-rendering: crisp-edges; */
}

#divs {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    user-select: none;
}

.drop {
    position: absolute;
    padding: 4px 8px;
    border: 1px solid white;
    transform: translate(-50%, -50%);
    font-size: 14pt;
    pointer-events: all;
    font-weight: 600;
    background-color: hsla(0, 0%, 30%, 0.6);
    white-space: nowrap;
}

.drop:hover {
    cursor: var(--cur-point, pointer);
    background-color: hsla(0, 0%, 100%, 0.2);
}

.character {
    position: absolute;
    /* border: 1px solid white; */
    transform: translate(-50%, -50%);
    pointer-events: all;
    /* background-color: hsla(0, 0%, 30%, 0.2); */
    border-radius: 50%;
    z-index: 10;
    user-select: none;
}

.character:hover {
    cursor: var(--cur-point, pointer);
    /* background-color: hsla(0, 0%, 100%, 0.2); */
}

.corpse {
    position: absolute;
    /* border: 1px solid white; */
    transform: translate(-50%, -50%);
    pointer-events: all;
    /* background-color: hsla(120, 100%, 30%, 0.3); */
    border-radius: 50%;
    z-index: 10;
    user-select: none;
}

.corpse:hover {
    cursor: var(--cur-point, pointer);
}

/* Fixed Transparent Connection Button for Map Overlay */
.connexion {
    position: absolute;
    padding: 8px 16px;
    transform: translate(-50%, -50%);
    pointer-events: all;
    user-select: none;
    z-index: 20;

    /* Fixed width and transparent styling */
    width: auto;
    max-width: 200px;
    box-sizing: border-box;

    /* Transparent map overlay styling */
    background: rgba(74, 158, 255, 0.25);
    border: 2px solid rgba(74, 158, 255, 0.6);
    border-radius: 8px;

    /* Typography */
    font-size: 14px;
    font-weight: 600;
    color: white;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);

    /* Subtle effects for map overlay */
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);

    /* Smooth animations */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: var(--cur-point, pointer);

    /* Ensure no overflow */
    overflow: hidden;
    text-overflow: ellipsis;
}

.connexion:hover {
    background: rgba(74, 158, 255, 0.4);
    border-color: rgba(74, 158, 255, 0.8);
    color: white;
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(74, 158, 255, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.connexion:active {
    transform: translate(-50%, -50%) scale(0.98);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Alternative styling for different connection types */
.connexion.boss-area {
    background: rgba(255, 107, 107, 0.25);
    border-color: rgba(255, 107, 107, 0.6);
}

.connexion.boss-area:hover {
    background: rgba(255, 107, 107, 0.4);
    border-color: rgba(255, 107, 107, 0.8);
}

.connexion.town {
    background: rgba(125, 237, 159, 0.25);
    border-color: rgba(125, 237, 159, 0.6);
}

.connexion.town:hover {
    background: rgba(125, 237, 159, 0.4);
    border-color: rgba(125, 237, 159, 0.8);
}

.connexion.secret {
    background: rgba(138, 43, 226, 0.25);
    border-color: rgba(138, 43, 226, 0.6);
}

.connexion.secret:hover {
    background: rgba(138, 43, 226, 0.4);
    border-color: rgba(138, 43, 226, 0.8);
}

/* Mobile responsive */
@media only screen and (max-width: 480px) {
    .connexion {
        padding: 6px 12px;
        font-size: 12px;
        max-width: 150px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    .connexion:hover,
    .connexion:active {
        transform: translate(-50%, -50%);
    }
}

/* Focus states for accessibility */
.connexion:focus-visible {
    outline: 2px solid rgba(74, 158, 255, 0.8);
    outline-offset: 2px;
}

.chest {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: all;
    border-radius: 50%;
    white-space: nowrap;
    z-index: 20;
    user-select: none;
}

.chest:hover {
    background-color: hsla(0, 0%, 100%, 0);
    cursor: var(--cur-point, pointer);
}

.portal {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: all;
    border-radius: 50%;
    white-space: nowrap;
    z-index: 20;
    user-select: none;
}

.portal:hover {
    cursor: var(--cur-point, pointer);
}

.portal:hover .portal_text {
    display: block;
}

.portal_text {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14pt;
    padding: 4px 8px;
    border: 1px solid white;
    font-weight: 600;
    color: white;
    border: 1px solid hsla(0, 0%, 100%, 0.5);
    box-shadow: 0px 0px 3px hsla(0, 0%, 100%, 0.5);
    background-color: hsla(0, 0%, 30%, 0.2);
}

.portal_text:hover {
    cursor: var(--cur-point, pointer);
    background-color: hsla(0, 0%, 100%, 0.2);
}

.socket_container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.socket {
    position: relative;
    width: calc(var(--inv-cell, 7vh) * 0.4);
    height: calc(var(--inv-cell, 7vh) * 0.4);
    margin: calc(var(--inv-cell, 7vh) * 0.02);
    border-radius: 50%;
    background-color: hsla(0, 0%, 6%, 0.3);
    border: 2px solid hsla(0, 0%, 80%, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.socket_with_item {
    background-color: hsla(0, 0%, 6%, 0) !important;
    border: 2px solid hsla(0, 0%, 80%, 0) !important;
}

/* A filled socket hides its ring so the gem reads clean — but on hover bring a
   faint ring back, so you can still see WHERE the sockets are on a full item. */
.item:hover > .socket_container > .socket_with_item {
    background-color: hsla(0, 0%, 6%, 0.3) !important;
    border: 2px solid hsla(0, 0%, 80%, 0.5) !important;
}

.socket_item {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.socket_item img {
    opacity: 0.9;
}

/* The tetris/paper-doll grids force `width/height: auto` on every descendant
   .item so grid children size to their cell — but a socketed gem is a nested
   .item, and `auto` collapses it to 0×0 (its .icon_box is inset:0), hiding the
   art. Re-pin the socket item at higher specificity, sized off the cell so it
   tracks the grid, and kill the grids' margin (it offsets the centring). */
.inv_grid .item.socket_item,
.equip_grid .item.socket_item,
.item.socket_item {
    width: calc(var(--inv-cell, 7vh) * 0.58) !important;
    height: calc(var(--inv-cell, 7vh) * 0.58) !important;
    margin: 0 !important;
}

/* The per-category taste shrink (--catscale) and the tall-footprint fill boost
   (--iboost) are both tuned for a full inventory cell. Inside a socket the box
   IS the gem, so neither applies — reset them or the gem reads tiny. */
.socket_item .icon {
    --catscale: 1 !important;
    --iboost: 1 !important;
}

@media only screen and (orientation: portrait) {
    .item {
        height: 5vh !important;
        width: 5vh !important;
    }
}

.item {
    position: relative;
    font-size: 14pt;
    user-select: none;
    height: 7.4vh;
    width: 7.4vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 1px solid hsla(0, 0%, 100%, 0.5);
    box-shadow: 0px 0px 3px hsla(0, 0%, 100%, 0.5);
    background-color: hsla(0, 0%, 20%, 0.98);
}

.item_formula {
    border: 1px solid hsla(130, 90%, 50%, 1);
    box-shadow: 0px 0px 10px hsla(130, 90%, 50%, 1);
}

.item_unidentified {
    border: 1px solid hsla(0, 90%, 50%, 1);
}

.item_exists:not(.socket_item) {
    background: radial-gradient(circle at center,
            hsla(0, 0%, 6%, 0.98) 0%,
            hsla(0, 0%, 8%, 0.98) 60%,
            hsla(0, 0%, 8%, 0.98) 85%,
            hsla(0, 0%, 16%, 0.98) 100%);
}

.item_quality_rare:not(.socket_item) {
    box-shadow: inset 0px 0px 0.5vh hsla(60, 100%, 50%, 0.8);
    background: radial-gradient(circle at center,
            hsla(0, 0%, 6%, 0.98) 0%,
            hsla(0, 0%, 8%, 0.98) 60%,
            hsla(60, 100%, 8%, 0.98) 85%,
            hsla(60, 100%, 16%, 0.98) 100%) !important;
}

.item_quality_magic:not(.socket_item) {
    box-shadow: inset 0px 0px 0.5vh hsla(240, 100%, 50%, 0.8);
    background: radial-gradient(circle at center,
            hsla(0, 0%, 6%, 0.98) 0%,
            hsla(0, 0%, 8%, 0.98) 60%,
            hsla(240, 100%, 8%, 0.98) 85%,
            hsla(240, 100%, 16%, 0.98) 100%) !important;
}

.item_quality_enchanted:not(.socket_item) {
    box-shadow: inset 0px 0px 0.5vh hsla(270, 100%, 50%, 0.8);
    background: radial-gradient(circle at center,
            hsla(0, 0%, 6%, 0.98) 0%,
            hsla(0, 0%, 8%, 0.98) 60%,
            hsla(270, 100%, 8%, 0.98) 85%,
            hsla(270, 100%, 16%, 0.98) 100%) !important;
}

.item_quality_corrupted:not(.socket_item) {
    box-shadow: inset 0px 0px 0.5vh hsla(0, 100%, 50%, 0.8);
    background: radial-gradient(circle at center,
            hsla(0, 0%, 6%, 0.98) 0%,
            hsla(0, 0%, 8%, 0.98) 60%,
            hsla(0, 100%, 8%, 0.98) 85%,
            hsla(0, 100%, 16%, 0.98) 100%) !important;
}

.item_quality_crafted:not(.socket_item) {
    box-shadow: inset 0px 0px 0.5vh hsla(120, 100%, 50%, 0.8);
    background: radial-gradient(circle at center,
            hsla(0, 0%, 6%, 0.98) 0%,
            hsla(0, 0%, 8%, 0.98) 60%,
            hsla(120, 100%, 8%, 0.98) 85%,
            hsla(120, 100%, 16%, 0.98) 100%) !important;
}

.item_quality_runeword:not(.socket_item) {
    box-shadow: inset 0px 0px 0.5vh hsla(30, 100%, 50%, 0.8);
    background: radial-gradient(circle at center,
            hsla(0, 0%, 6%, 0.98) 0%,
            hsla(0, 0%, 8%, 0.98) 60%,
            hsla(30, 100%, 8%, 0.98) 85%,
            hsla(30, 100%, 16%, 0.98) 100%) !important;
}

.item_quality_unique:not(.socket_item) {
    box-shadow: inset 0px 0px 0.5vh hsla(35, 100%, 50%, 0.8);
    background: radial-gradient(circle at center,
            hsla(0, 0%, 6%, 0.98) 0%,
            hsla(0, 0%, 8%, 0.98) 60%,
            hsla(35, 100%, 8%, 0.98) 85%,
            hsla(35, 100%, 16%, 0.98) 100%) !important;
}

.item_quality_normal:not(.socket_item) {
    box-shadow: inset 0px 0px 0.6vh hsl(0, 0%, 40%);
    background: radial-gradient(circle at center,
            hsla(0, 0%, 6%, 0.98) 0%,
            hsla(0, 0%, 8%, 0.98) 60%,
            hsla(0, 0%, 12%, 0.98) 85%,
            hsla(0, 0%, 16%, 0.98) 100%) !important;
}

.item img {
    /* display: none !important; */
}

.range_text {
    color: hsl(120, 50%, 40%);
}

.affix_corrupted {
    text-decoration: underline;
    text-decoration-color: hsla(0, 80%, 70%, 1);
}

.affix_augmented {
    text-decoration: underline;
    text-decoration-color: hsla(270, 80%, 70%, 1); /* enchanted purple, matches the Augmented tag */
}

.target_item {
    border: 1px solid hsla(0, 0%, 100%, 1);
    box-shadow: 0px 0px 10px hsla(0, 0%, 100%, 1);
}

.item:hover {
    cursor: var(--cur-point, pointer);
    background-color: hsla(0, 0%, 100%, 0.08);
}

.item_title {
    font-weight: 600;
    margin: 4px;
    text-align: center;
}

.item_type {
    font-weight: 600;
    /* padding-bottom: 8px; */
}

.item:hover .item_description {
    display: flex;
}

.item_description {
    display: none;
    position: absolute;
    padding: 12px;
    z-index: 2000;
    white-space: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: hsla(0, 0%, 26%, 0.96);
    color: hsla(0, 0%, 90%, 1);
    pointer-events: none;
}

#stash .item_description {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

#inventory .item_description {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

#equipment .item_description {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.hand .item_description {
    display: flex;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.item_stats {
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.empty_slot {
    color: hsla(0, 0%, 80%, 1);
}

.hand {
    z-index: 50;
    transition: none !important;
    position: fixed !important;
    transform: translate(-50%, -50%);
    background-color: hsla(0, 0%, 100%, 0.2);
    cursor: var(--cur-point, pointer);
    pointer-events: none;
}

#formula {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    padding: 16px;
    z-index: 30;
    position: fixed;
    transform: translate(-50%, 0%);
    background-color: hsla(0, 0%, 26%, 0.9);
    cursor: var(--cur-point, pointer);
    pointer-events: none;
}


#movement {
    position: fixed;
    z-index: 30;
    top: 0;
    transform: translate(calc(50vw - 50%));
}

@media only screen and (orientation: portrait) {
    #minimap_container:not(.large_minimap) {
        width: 20vw !important;
        height: 20vw !important;
    }

    .large_minimap {
        top: 50vh !important;
        transform: translate(-50%, -50%) !important;
    }

    #minimap_container {
        pointer-events: all !important;
    }

    #minimap_container:not(.large_minimap) #minimap {
        width: 20vw !important;
        height: 20vw !important;
    }

    #minimap_container:not(.large_minimap) canvas {
        width: 20vw !important;
        height: 20vw !important;
    }

    #active_skills {
        margin: 0;
    }

    .active_skill {
        font-size: 18pt;
        padding: 20px;
        text-align: center;
    }

    #character {
        margin-top: 16vh;
        height: 84vh !important;
    }
}

/* Clips the (possibly boosted) icon to the item's box without clipping the
   tooltip — .item_description stays a direct child of .item. */
.icon_box {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.icon {
    width: 100%;
    height: 100%;
    object-fit: contain; /* non-square slots must letterbox, never stretch */
    pointer-events: none;
    /* --catscale: per-category taste shrink (rules below).
       --iboost: fill boost for tall footprints — square diagonal art contained
       in a 2×3/2×4 box only spans the 2-wide side; boosting zooms it and the
       .icon_box crop eats the (mostly transparent) overflow. Set inline on the
       img by the item component from the item's real footprint (itemBoost). */
    transform: scale(calc(var(--catscale, 1) * var(--iboost, 1)));
    /* Icons bake a touch dark against the parchment cells — lift them. */
    filter: brightness(1.35);
}

/* Stack count (flasks, and anything else with max_stack) — bottom-right of the
   cell, D2-style. Sits inside .icon_box so it clips with the art, above it. */
.item_qty {
    position: absolute;
    right: 2px;
    bottom: 1px;
    font-size: 15px;
    line-height: 1;
    font-weight: bold;
    color: #f0e6cf;
    text-shadow: 0 0 3px #000, 0 1px 2px #000, 0 0 6px #000;
    pointer-events: none;
}

/* Per-category icon scale — small jewelry reads too big at full cell size.
   transform keeps the layout box (grid alignment) and just shrinks the art. */
.icon_cat_ring { --catscale: 0.9; }
.icon_cat_component { --catscale: 0.72; }
.icon_cat_gemstone { --catscale: 0.72; }
.icon_cat_flask { --catscale: 0.82; }
/* Bulky items fill the cell after the tight crop and read oversized next to the
   thin weapon silhouettes — trim them down to taste. */
.icon_cat_scroll { --catscale: 0.9; }
.icon_cat_tome { --catscale: 0.9; }
.icon_cat_helmet { --catscale: 0.85; }
.icon_cat_belt { --catscale: 0.85; }
.icon_cat_gloves { --catscale: 0.85; }
/* Off-hands live in the shield category — scale them by id, not category, so
   real shields stay full size. */
.icon_id_orb, .icon_id_grimoire, .icon_id_quiver, .icon_id_powder_bag { --catscale: 0.78; }
/* Dagger is a short blade — reads oversized at full weapon scale. */
.icon_id_dagger { --catscale: 0.6; }

#icon_drawer {
    visibility: hidden;
    width: 64px;
    height: 64px;
    /* display: block;
    top: 10vh;
    left: 50%;
    position: fixed;
    z-index: 100; */
}

#shortcut_config {}

.stats_separator {
    height: 12px;
}

.attribute {
    text-align: center;
    padding: 6px;
    /* border: 1px solid hsl(0,0%,90%,0.5); */
}

.attribute:hover {
    cursor: var(--cur-point, pointer);
    background-color: hsl(0, 0%, 100%, 0.1);
}

.highlight_button {
    background-color: gold !important;
}

.highlight_button_points {
    padding: 3px;
    border: 1px solid gold !important;
}


.gold {
    height: 16px;
    width: 16px;
    margin-right: 6px;
}

/* SKILLS CLAUDE VERSION*/

#active_skills {
    position: fixed;
    bottom: 0;
    right: 0;
    max-height: calc(100vh - min(260px, 12vw) - 100px);
    margin: 24px;
    z-index: 10;
    user-select: none;
    background: linear-gradient(145deg, rgba(40, 40, 45, 0.95), rgba(25, 25, 30, 0.98));
    color: white;
    box-sizing: border-box;
    opacity: 0.92;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    /* overflow: hidden; */
    min-width: 280px;
}

#active_skills::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(74, 158, 255, 0.8),
            rgba(0, 212, 255, 0.8),
            rgba(74, 158, 255, 0.8));
    border-radius: 12px 12px 0 0;
}

.active_skill {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 6px 16px;
    border: 2px solid transparent;
    border-radius: 8px;
    margin: 4px;
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(4px);
    /* overflow: hidden; */
    font-weight: 500;
    min-height: 48px;
}

.active_skill::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg,
            rgba(74, 158, 255, 0.6),
            rgba(0, 212, 255, 0.6));
    opacity: 0;
    transition: opacity 0.2s ease;
}

.active_skill:hover {
    cursor: var(--cur-point, pointer);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(74, 158, 255, 0.3);
    transform: translateX(-2px);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.active_skill:hover::before {
    opacity: 1;
}

.selected_skill {
    background: rgba(74, 158, 255, 0.15) !important;
    border: 2px solid rgba(74, 158, 255, 0.6) !important;
    box-shadow:
        0 0 20px rgba(74, 158, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateX(-4px);
}

.selected_skill::before {
    opacity: 1 !important;
    background: linear-gradient(180deg,
            rgba(74, 158, 255, 1),
            rgba(0, 212, 255, 1));
    width: 4px;
}

.cooldown_skill {
    color: rgba(160, 160, 160, 0.7) !important;
    background: rgba(80, 80, 80, 0.3) !important;
}

.cooldown_skill:hover {
    background: rgba(100, 100, 100, 0.4) !important;
}

.hidden_skill {
    text-decoration: line-through;
    opacity: 0.5;
    font-style: italic;
}

.cooldown {
    position: absolute;
    left: 0;
    height: 100%;
    top: 0;
    background: linear-gradient(90deg,
            rgba(255, 75, 75, 0.7),
            rgba(255, 100, 100, 0.8));
    z-index: 1;
    border-radius: 8px 0 0 8px;
    transition: width 0.1s linear;
}

.buffduration {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg,
            rgba(125, 237, 159, 0.3),
            rgba(125, 237, 159, 0.4));
    z-index: 2;
    border-radius: 8px 0 0 8px;
    transition: width 0.1s linear;
    border-right: 1px solid rgba(125, 237, 159, 0.6);
}

.mini_shortcut {
    padding: 8px 10px;
    margin-left: 16px;
    min-width: 24px;
    min-height: 24px;
    z-index: 10;
    position: relative;

    /* Enhanced button appearance */
    background: linear-gradient(145deg,
            rgba(60, 60, 70, 0.9),
            rgba(40, 40, 50, 0.9));
    border: 1px solid rgba(100, 100, 120, 0.6);
    border-radius: 8px;

    /* Typography */
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    color: rgba(240, 240, 245, 0.95);
    text-transform: uppercase;
    letter-spacing: 0.5px;

    /* Enhanced effects */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.2);

    /* Smooth transitions */
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);

    /* Flexbox for centering */
    display: flex;
    align-items: center;
    justify-content: center;
}

.mini_shortcut:hover {
    cursor: var(--cur-point, pointer);
    background: linear-gradient(145deg,
            rgba(74, 158, 255, 0.8),
            rgba(50, 130, 220, 0.9));
    border-color: rgba(74, 158, 255, 0.9);
    color: white;
    transform: translateY(-2px) scale(1.05);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 6px 20px rgba(74, 158, 255, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.3);
}

.mini_shortcut:active {
    transform: translateY(-1px) scale(1.02);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2);
}

.active_skill:hover .mini_shortcut:not(:hover) {
    background: linear-gradient(145deg,
            rgba(70, 70, 80, 0.9),
            rgba(50, 50, 60, 0.9));
    border-color: rgba(120, 120, 140, 0.7);
    transform: scale(1.02);
}

.selected_skill .mini_shortcut {
    background: linear-gradient(145deg,
            rgba(80, 80, 95, 1),
            rgba(60, 60, 75, 1));
    border-color: rgba(140, 140, 160, 1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.4);
}

.mini_shortcut:empty::before,
.mini_shortcut.no-shortcut::before {
    content: "–";
    color: rgba(160, 160, 170, 0.6);
    font-weight: 400;
    font-size: 14px;
}

.mini_shortcut.no-shortcut {
    background: linear-gradient(145deg,
            rgba(40, 40, 50, 0.6),
            rgba(30, 30, 40, 0.6));
    border-color: rgba(60, 60, 70, 0.4);
    color: rgba(140, 140, 150, 0.6);
}

.mini_shortcut.no-shortcut::before {
    content: "?";
    font-style: italic;
}

/* Skill name styling improvements */
.active_skill>div:not(.mini_shortcut):not(.cooldown):not(.buffduration):not(.shortcut-config-menu) {
    z-index: 5;
    position: relative;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    flex: 1;
}

/* Enhanced skill category colors */
.active_skill[style*="color"] {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* Enhanced Config Menu */
.shortcut-config-menu {
    position: absolute;
    right: calc(100% + 8px);
    bottom: 0;
    background: linear-gradient(145deg,
            rgba(35, 35, 40, 0.97),
            rgba(25, 25, 30, 0.98));
    border: 1px solid rgba(100, 100, 120, 0.6);
    border-radius: 12px;
    padding: 8px 0;
    min-width: 220px;
    z-index: 2000;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    opacity: 0;
    overflow: hidden;
    transform: translateX(8px) scale(0.95);
    animation: menuFadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes menuFadeIn {
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.shortcut-config-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(74, 158, 255, 0.8),
            rgba(0, 212, 255, 0.8));
    border-radius: 12px 12px 0 0;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    color: rgba(220, 220, 225, 0.9);
    font-size: 13px;
    font-weight: 500;
    cursor: var(--cur-point, pointer);
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    margin: 1px 0;
    position: relative;
    overflow: hidden;
}

.menu-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
    transition: background 0.18s ease;
}

.menu-item:hover {
    background: rgba(74, 158, 255, 0.15);
    color: white;
    transform: translateX(2px);
}

.menu-item:hover::before {
    background: linear-gradient(180deg,
            rgba(74, 158, 255, 0.8),
            rgba(0, 212, 255, 0.8));
}

.menu-item:active {
    transform: translateX(1px) scale(0.98);
}

.menu-item.current-shortcut {
    color: rgba(74, 158, 255, 1);
    cursor: var(--cur-walk, default);
    font-weight: 600;
    background: rgba(74, 158, 255, 0.08);
    border-left: 3px solid rgba(74, 158, 255, 0.6);
    padding-left: 15px;
}

.menu-item.current-shortcut:hover {
    background: rgba(74, 158, 255, 0.08);
    transform: none;
}

.menu-item.current-shortcut::before {
    background: rgba(74, 158, 255, 0.6);
}

.menu-item.configure {
    color: rgba(125, 237, 159, 0.9);
}

.menu-item.configure:hover {
    background: rgba(125, 237, 159, 0.15);
    color: rgba(125, 237, 159, 1);
}

.menu-item.configure:hover::before {
    background: linear-gradient(180deg,
            rgba(125, 237, 159, 0.8),
            rgba(100, 220, 140, 0.8));
}

.menu-item.remove {
    color: rgba(255, 107, 107, 0.9);
}

.menu-item.remove:hover {
    background: rgba(255, 107, 107, 0.15);
    color: rgba(255, 107, 107, 1);
}

.menu-item.remove:hover::before {
    background: linear-gradient(180deg,
            rgba(255, 107, 107, 0.8),
            rgba(255, 85, 85, 0.8));
}

.menu-item.hide {
    color: rgba(255, 211, 61, 0.9);
}

.menu-item.hide:hover {
    background: rgba(255, 211, 61, 0.15);
    color: rgba(255, 211, 61, 1);
}

.menu-item.hide:hover::before {
    background: linear-gradient(180deg,
            rgba(255, 211, 61, 0.8),
            rgba(255, 195, 30, 0.8));
}

.menu-separator {
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            rgba(100, 100, 120, 0.4),
            transparent);
    margin: 6px 12px;
    position: relative;
}

.menu-separator::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
}

/* Close button enhancement */
.menu-item:last-child {
    margin-top: 4px;
    color: rgba(180, 180, 185, 0.8);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.menu-item:last-child:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(220, 220, 225, 1);
}

/* Responsive design */
@media (max-width: 768px) {
    #active_skills {
        margin: 16px;
        min-width: 240px;
    }

    .active_skill {
        padding: 12px 14px;
        min-height: 44px;
    }

    .mini_shortcut {
        padding: 6px 8px;
        min-width: 20px;
        min-height: 20px;
        font-size: 11px;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {

    .active_skill,
    .mini_shortcut,
    .cooldown,
    .buffduration {
        transition: none;
    }
}

/* Focus states for accessibility */
.active_skill:focus-visible {
    outline: 2px solid rgba(74, 158, 255, 0.8);
    outline-offset: 2px;
}

.mini_shortcut:focus-visible {
    outline: 2px solid rgba(74, 158, 255, 0.8);
    outline-offset: 2px;
}

/* LIFE AND MANA BARS */
#bars {
    position: fixed;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    bottom: 2vh;
    left: 50vw;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 10;
    user-select: none;
}

#life_and_mana {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.bar {
    position: relative;
    height: max(2.2vw, 2.2vh, 28px);
    width: max(16vh, 16vw, 200px);
    border-radius: 12px;
    opacity: 0.92;
    overflow: hidden;

    /* Enhanced visual styling */
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);

    /* Subtle inner glow effect */
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.05) 50%,
            rgba(0, 0, 0, 0.1) 100%);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.6),
            rgba(255, 255, 255, 0.3),
            rgba(255, 255, 255, 0.6));
    border-radius: 12px 12px 0 0;
    z-index: 3;
}

.bar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0 0 12px 12px;
    z-index: 3;
}

/* Life bar specific styling */
.bar.life-bar {
    background: linear-gradient(135deg,
            rgba(255, 71, 87, 0.15) 0%,
            rgba(255, 107, 107, 0.15) 50%,
            rgba(220, 20, 60, 0.15) 100%);
    border-color: rgba(255, 107, 107, 0.8);
    box-shadow:
        0 4px 16px rgba(255, 71, 87, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 20px rgba(255, 71, 87, 0.2);
}

/* Mana bar specific styling */
.bar.mana-bar {
    background: linear-gradient(135deg,
            rgba(74, 158, 255, 0.15) 0%,
            rgba(0, 212, 255, 0.15) 50%,
            rgba(30, 144, 255, 0.15) 100%);
    border-color: rgba(74, 158, 255, 0.8);
    box-shadow:
        0 4px 16px rgba(74, 158, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 20px rgba(74, 158, 255, 0.2);
}

.bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 10px;
    z-index: 1;
    /* Server pushes life_percent every tick (~10-16 Hz). Any width transition
       re-triggers on each update so the bar perpetually chases the target and
       reads fuller than actual right after a hit — snap to the live value. */
    transition: none;

    /* Gradient overlay for depth */
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
}

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

    50% {
        background-position: 200% 0;
    }
}

/* Life fill gradient */
.bar-fill.life-fill {
    background: linear-gradient(135deg,
            #ff4757 0%,
            #ff6b6b 25%,
            #ff7675 50%,
            #fd79a8 75%,
            #ff4757 100%);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}

/* Mana fill gradient */
.bar-fill.mana-fill {
    background: linear-gradient(135deg,
            #4a9eff 0%,
            #00d4ff 25%,
            #0984e3 50%,
            #6c5ce7 75%,
            #4a9eff 100%);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}

.bar-empty {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background: rgba(40, 40, 45, 0.9);
    border-radius: 0 10px 10px 0;
    z-index: 2;
    transition: none;
}

.experience-empty {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    background: rgba(40, 40, 45, 0.9);
    border-radius: 0 6px 6px 0;
    z-index: 2;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Bar text/values */
.bar-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: 600;
    font-size: clamp(11px, 1.2vw, 14px);
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.8),
        0 0 4px rgba(0, 0, 0, 0.5);
    z-index: 4;
    pointer-events: none;
    letter-spacing: 0.5px;
}

/* Experience bar */
#experience {
    position: relative;
    height: max(0.6vh, 0.6vw, 8px);
    margin-top: 12px;
    width: max(16vh, 16vw, 200px);
    border-radius: 8px;
    opacity: 0.85;
    overflow: hidden;

    /* Enhanced styling to match bars */
    border: 1px solid rgba(255, 211, 61, 0.6);
    box-shadow:
        0 2px 8px rgba(255, 211, 61, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);

    background: linear-gradient(135deg,
            rgba(255, 211, 61, 0.2) 0%,
            rgba(255, 195, 30, 0.2) 50%,
            rgba(245, 166, 35, 0.2) 100%);
}

#experience::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            #ffd93d 0%,
            #ffbe0b 25%,
            #f5a623 50%,
            #ff8f00 75%,
            #ffd93d 100%);
    border-radius: 6px;
    z-index: 1;
    background-size: 200% 100%;
    animation: shimmer 4s ease-in-out infinite;
}

/* Responsive design */
@media (max-width: 768px) {
    .bar {
        height: max(3vh, 32px);
        width: max(60vw, 250px);
    }

    #experience {
        height: max(1vh, 10px);
        width: max(60vw, 250px);
    }

    .bar-text {
        font-size: 12px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    .bar-fill,
    .bar-empty,
    .experience-empty {
        transition: none;
    }

    .bar-fill {
        animation: none;
    }

    #experience::before {
        animation: none;
    }
}


/* Main game buttons */
/* Enhanced Menu Buttons */
#menu {
    position: fixed;
    z-index: 30;
    top: 12px;
    left: 12px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.game_button {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px 16px;

    /* Enhanced styling */
    background: linear-gradient(145deg,
            rgba(45, 45, 50, 0.95),
            rgba(30, 30, 35, 0.98));
    color: rgba(240, 240, 245, 0.95);

    /* Modern borders and shadows */
    border: 1px solid rgba(100, 100, 120, 0.4);
    border-radius: 8px;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);

    /* Typography */
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.3px;
    text-transform: uppercase;

    /* Smooth transitions */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Prevent text selection */
    user-select: none;
    cursor: var(--cur-point, pointer);
}

.game_button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(74, 158, 255, 0.6),
            rgba(0, 212, 255, 0.6));
    border-radius: 8px 8px 0 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.game_button:hover {
    background: linear-gradient(145deg,
            rgba(74, 158, 255, 0.8),
            rgba(50, 130, 220, 0.9));
    border-color: rgba(74, 158, 255, 0.7);
    color: white;
    transform: translateY(-2px);
    box-shadow:
        0 6px 20px rgba(74, 158, 255, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.game_button:hover::before {
    opacity: 1;
}

.game_button:active {
    transform: translateY(-1px);
    box-shadow:
        0 4px 12px rgba(74, 158, 255, 0.4),
        inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Special styling for exit button */
#game_button_exit:hover {
    background: linear-gradient(145deg,
            rgba(255, 107, 107, 0.8),
            rgba(255, 75, 75, 0.9));
    border-color: rgba(255, 107, 107, 0.7);
    box-shadow:
        0 6px 20px rgba(255, 107, 107, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

#game_button_exit::before {
    background: linear-gradient(90deg,
            rgba(255, 107, 107, 0.6),
            rgba(255, 75, 75, 0.6));
}

/* Mobile responsive design */
@media only screen and (orientation: portrait) {
    #menu {
        width: calc(100vw - 24px);
        left: 12px;
        top: 12px;
        justify-content: center;
        gap: 6px;
    }

    .game_button {
        padding: 12px 16px;
        font-size: 14px;
        flex: 1;
        min-width: 0;
    }

    .game_button div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media only screen and (max-width: 480px) {
    .game_button {
        padding: 10px 12px;
        font-size: 12px;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .game_button {
        transition: none;
    }

    .game_button:hover {
        transform: none;
    }

    .game_button:active {
        transform: none;
    }
}

/* Focus states for accessibility */
.game_button:focus-visible {
    outline: 2px solid rgba(74, 158, 255, 0.8);
    outline-offset: 2px;
}

/* MINIMAP */

/* Enhanced Minimap Container */
#minimap_container {
    position: fixed;
    top: 60px;
    right: 12px;
    width: max(12vh, 12vw, 140px);
    height: max(12vh, 12vw, 140px);
    z-index: 32;
    pointer-events: none;

    /* Modern styling */
    background: linear-gradient(145deg,
            rgba(30, 30, 35, 0.95),
            rgba(20, 20, 25, 0.98));
    border: 2px solid rgba(100, 100, 120, 0.6);
    border-radius: 12px;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    /* overflow: hidden; */

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#minimap_container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(74, 158, 255, 0.8),
            rgba(0, 212, 255, 0.8));
    border-radius: 12px 12px 0 0;
    z-index: 5;
}

#minimap_container:hover {
    border-color: rgba(74, 158, 255, 0.8);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(74, 158, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: scale(1.02);
}

.large_minimap {
    top: 50vh !important;
    left: 50vw !important;
    width: min(90vh, 90vw) !important;
    height: min(90vh, 90vw) !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10000;
    pointer-events: all !important;

    /* Enhanced large view styling */
    border: 3px solid rgba(74, 158, 255, 0.8);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.8),
        0 0 40px rgba(74, 158, 255, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.2);
}

.large_minimap::before {
    height: 3px;
}

.large_minimap canvas {
    width: 100% !important;
    height: 100% !important;
    opacity: 0.98 !important;
    border-radius: 9px;
}

#minimap_container canvas {
    transform-origin: top left;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 15, 0.9);
    display: block;
    opacity: 0.8;
    border-radius: 10px;
    transition: opacity 0.3s ease;
}

#minimap_container:hover canvas {
    opacity: 0.95;
}

#minimap_window {
    background-color: transparent !important;
    border-radius: 10px;
}

/* Enhanced Map Name */
#map_name {
    position: absolute;
    bottom: 100%;
    width: 100%;
    left: 0;
    z-index: 30;
    text-align: center;
    color: white;
    padding: 8px 12px;
    box-sizing: border-box;
    margin-bottom: 4px;

    /* Modern styling */
    background: linear-gradient(145deg,
            rgba(40, 40, 45, 0.95),
            rgba(25, 25, 30, 0.98));
    border: 1px solid rgba(100, 100, 120, 0.4);
    border-radius: 8px;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);

    /* Typography */
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

#map_name::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            rgba(74, 158, 255, 0.6),
            transparent);
    border-radius: 8px 8px 0 0;
}

/* Enhanced Game Name */
#game_name {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: 30;
    text-align: right;
    color: rgba(200, 200, 210, 0.8);
    padding: 6px 12px;
    box-sizing: border-box;
    pointer-events: none;
    margin-top: 4px;

    /* Modern styling */
    background: linear-gradient(145deg,
            rgba(30, 30, 35, 0.85),
            rgba(20, 20, 25, 0.9));
    border: 1px solid rgba(80, 80, 90, 0.3);
    border-radius: 6px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(6px);

    /* Typography */
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Mobile responsive design */
@media only screen and (orientation: portrait) {
    #minimap_container:not(.large_minimap) {
        width: 22vw !important;
        height: 22vw !important;
        top: 70px;
    }

    .large_minimap {
        top: 50vh !important;
        left: 50vw !important;
        width: min(85vh, 85vw) !important;
        height: min(85vh, 85vw) !important;
        transform: translate(-50%, -50%) !important;
    }

    #minimap_container {
        pointer-events: all !important;
    }

    #map_name {
        font-size: 11px;
        padding: 6px 8px;
    }

    #game_name {
        font-size: 10px;
        padding: 4px 8px;
    }
}

@media only screen and (max-width: 480px) {
    #minimap_container:not(.large_minimap) {
        width: 25vw !important;
        height: 25vw !important;
    }

    #map_name {
        font-size: 10px;
        padding: 4px 6px;
    }

    #game_name {
        font-size: 9px;
        padding: 3px 6px;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    #minimap_container {
        transition: none;
    }

    #minimap_container:hover {
        transform: none;
    }

    #minimap_container canvas {
        transition: none;
    }
}

/* Focus states for accessibility */
#minimap_container:focus-visible {
    outline: 2px solid rgba(74, 158, 255, 0.8);
    outline-offset: 2px;
}

/* MONSTER INFO */

/* Enhanced Monster Info Panel */
#monster_info {
    position: fixed;
    top: 16px;
    left: 50vw;
    transform: translateX(-50%);
    z-index: 1600;
    border-radius: 12px;
    padding: 12px 16px;
    opacity: 0.95;
    pointer-events: none;
    min-width: 200px;
    max-width: 400px;
    overflow: hidden;

    /* Modern styling */
    background: linear-gradient(145deg,
            rgba(25, 25, 30, 0.95),
            rgba(15, 15, 20, 0.98));
    border: 2px solid rgba(200, 200, 220, 0.8);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);

    /* Smooth appearance */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#monster_info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(200, 200, 220, 0.8),
            rgba(255, 255, 255, 0.9),
            rgba(200, 200, 220, 0.8));
    border-radius: 12px 12px 0 0;
    z-index: 3;
}

/* Life Bar for Monsters */
#monster_info_life {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 10px;
    z-index: 1;

    /* Enhanced life bar styling */
    background: linear-gradient(135deg,
            rgba(220, 20, 60, 0.9) 0%,
            rgba(255, 69, 58, 0.8) 50%,
            rgba(255, 107, 107, 0.7) 100%);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);

}

/* NPC Info Background */
#pnj_info_life {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    border-radius: 10px;
    z-index: 1;

    /* Neutral background for NPCs */
    background: linear-gradient(135deg,
            rgba(100, 100, 120, 0.4) 0%,
            rgba(80, 80, 100, 0.5) 50%,
            rgba(60, 60, 80, 0.6) 100%);
}

/* Monster Name and Info */
#monster_info_name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 4;
    gap: 2px;

    /* Enhanced typography */
    color: white;
    text-align: center;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 1px 2px rgba(0, 0, 0, 0.9);
    filter: brightness(1.1);
}

#monster_info_name>div:first-child {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

#monster_info_name>div:not(:first-child) {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.9;
    letter-spacing: 0.2px;
}

/* Category-specific styling for better visual hierarchy */
#monster_info_name>div:nth-child(2) {
    font-style: italic;
    opacity: 0.8;
}

/* Special styling for champion/minion indicators */
#monster_info_name>div:contains("Champion"),
#monster_info_name>div:contains("Minion") {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    margin-top: 2px;
}

/* Mobile responsive */
@media only screen and (orientation: portrait) {
    #monster_info {
        top: 20px;
        padding: 10px 14px;
        min-width: 180px;
        max-width: 90vw;
    }

    #monster_info_name>div:first-child {
        font-size: 13px;
    }

    #monster_info_name>div:not(:first-child) {
        font-size: 11px;
    }
}

@media only screen and (max-width: 480px) {
    #monster_info {
        padding: 8px 12px;
        min-width: 160px;
    }

    #monster_info_name>div:first-child {
        font-size: 12px;
    }

    #monster_info_name>div:not(:first-child) {
        font-size: 10px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    #monster_info {
        transition: none;
    }

    #monster_info_life {
        transition: none;
    }
}

/* SUMMONS SECTION */

/* Enhanced Summons Display */
#summons {
    position: fixed;
    left: 16px;
    top: 80px;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    z-index: 10;
    gap: 6px;
}

.summon_row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.summon {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;

    /* Modern styling */
    background: linear-gradient(145deg,
            rgba(40, 40, 45, 0.95),
            rgba(25, 25, 30, 0.98));
    border: 2px solid rgba(100, 100, 120, 0.6);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.summon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(125, 237, 159, 0.8),
            rgba(100, 220, 140, 0.8));
    border-radius: 8px 8px 0 0;
    z-index: 3;
}

.summon:hover {
    border-color: rgba(125, 237, 159, 0.8);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(125, 237, 159, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.summon_canvas {
    position: relative;
    display: block;
    width: 100%;
    height: calc(100% - 6px);
    border-radius: 6px 6px 0 0;
    background: rgba(10, 10, 15, 0.5);
}

/* Enhanced Life Bars with Smooth Animation */
.summon_life_red {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg,
            rgba(220, 20, 60, 1),
            rgba(255, 71, 87, 1));
    border-radius: 0 0 6px 6px;
    overflow: hidden;
    z-index: 1;
}

.summon_life_green {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    /* Solid green base with subtle overlay */
    background: #52c41a;
    border-radius: 0 0 6px 6px;
    /* Server pushes life every tick — a width transition perpetually chases
       the target and reads stale after a hit. Snap to the live value. */
    transition: none;
    max-width: 100%;
    min-width: 0%;
    z-index: 2;

    /* Subtle glow effect */
    box-shadow:
        0 0 6px rgba(82, 196, 26, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);

    /* Smooth breathing animation instead of shimmer */
    animation: healthGlow 4s ease-in-out infinite;
}

/* Smooth breathing glow animation */
@keyframes healthGlow {
    0%, 100% {
        box-shadow:
            0 0 6px rgba(82, 196, 26, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
        filter: brightness(1);
    }

    50% {
        box-shadow:
            0 0 10px rgba(82, 196, 26, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
        filter: brightness(1.1);
    }
}

/* Full health indicator - brighter green with enhanced glow */
.summon_life_green[style*="100%"] {
    background: #389e0d;
    animation: healthGlowFull 3s ease-in-out infinite;
}

@keyframes healthGlowFull {
    0%, 100% {
        box-shadow:
            0 0 8px rgba(82, 196, 26, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
        filter: brightness(1.05);
    }

    50% {
        box-shadow:
            0 0 12px rgba(82, 196, 26, 0.6),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
        filter: brightness(1.15);
    }
}

/* Low health warning - smooth pulsing red */
.summon_life_green[style*="width: 1%"],
.summon_life_green[style*="width: 2%"],
.summon_life_green[style*="width: 3%"],
.summon_life_green[style*="width: 4%"],
.summon_life_green[style*="width: 5%"],
.summon_life_green[style*="width: 6%"],
.summon_life_green[style*="width: 7%"],
.summon_life_green[style*="width: 8%"],
.summon_life_green[style*="width: 9%"],
.summon_life_green[style^="width: 1%"],
.summon_life_green[style^="width: 2%"],
.summon_life_green[style^="width: 3%"],
.summon_life_green[style^="width: 4%"],
.summon_life_green[style^="width: 5%"],
.summon_life_green[style^="width: 6%"],
.summon_life_green[style^="width: 7%"],
.summon_life_green[style^="width: 8%"],
.summon_life_green[style^="width: 9%"] {
    background: #ff4757;
    animation: healthWarningSmooth 2s ease-in-out infinite;
}

@keyframes healthWarningSmooth {
    0%, 100% {
        filter: brightness(1);
        box-shadow:
            0 0 6px rgba(255, 71, 87, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    50% {
        filter: brightness(1.2);
        box-shadow:
            0 0 12px rgba(255, 71, 87, 0.7),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }
}

/* Summon count badge (if needed) */
.summon_row::before {
    content: attr(data-count);
    position: absolute;
    top: -8px;
    right: -8px;
    background: rgba(74, 158, 255, 0.9);
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 5;
    display: none;
    /* Show only when needed */
}

/* Mobile responsive design */
@media only screen and (orientation: portrait) {
    #summons {
        left: 12px;
        top: 100px;
        gap: 4px;
    }

    .summon {
        width: 56px;
        height: 56px;
    }

    .summon_life_red,
    .summon_life_green {
        height: 5px;
    }
}

@media only screen and (max-width: 480px) {
    .summon {
        width: 48px;
        height: 48px;
    }

    .summon_life_red,
    .summon_life_green {
        height: 4px;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .summon {
        transition: none;
    }

    .summon:hover {
        transform: none;
    }

    .summon_life_green {
        animation: none;
        transition: none;
    }
}

/* WAYPOINTS */

/* SCENE DIV FOR CLICK*/

#waypoint {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: all;
    z-index: 8;
    user-select: none;
}

#waypoint {
    cursor: var(--cur-point, pointer);
}


/* Enhanced Waypoints Modal */
#waypoints {
    display: flex;
    flex-direction: column;
    padding: 0;
    justify-content: flex-start;
    align-items: stretch;
    z-index: 20;
    position: fixed;
    top: 50%;
    left: 50%;
    max-height: 85vh;
    max-width: min(600px, 90vw);
    min-width: 400px;
    transform: translate(-50%, -50%);

    /* Modern modal styling */
    background: linear-gradient(145deg, rgba(30, 30, 35, 0.98), rgba(20, 20, 25, 0.99));
    border: 2px solid rgba(100, 100, 120, 0.6);
    border-radius: 16px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.8),
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    overflow: hidden;
}

#waypoints::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
            rgba(74, 158, 255, 0.8),
            rgba(0, 212, 255, 0.8),
            rgba(74, 158, 255, 0.8));
    border-radius: 16px 16px 0 0;
}

/* Enhanced Tab System */
.waypoint_tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(40, 40, 45, 0.6);
    border-bottom: 1px solid rgba(100, 100, 120, 0.3);
    padding: 8px 0;
    gap: 4px;
}

.waypoint_tab {
    padding: 12px 20px;
    color: rgba(180, 180, 190, 0.8);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: var(--cur-point, pointer);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    user-select: none;
    position: relative;
}

.waypoint_tab:hover {
    color: rgba(220, 220, 230, 1);
    background: rgba(74, 158, 255, 0.1);
    border-color: rgba(74, 158, 255, 0.3);
    transform: translateY(-1px);
}

.waypoint_tab_selected {
    color: white !important;
    background: linear-gradient(145deg,
            rgba(74, 158, 255, 0.8),
            rgba(50, 130, 220, 0.9)) !important;
    border-color: rgba(74, 158, 255, 0.8) !important;
    box-shadow:
        0 4px 12px rgba(74, 158, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.waypoint_tab_selected::before {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(74, 158, 255, 0.8);
}

/* Waypoints List Container */
.waypoints-list {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Custom Scrollbar */
.waypoints-list::-webkit-scrollbar {
    width: 8px;
}

.waypoints-list::-webkit-scrollbar-track {
    background: rgba(40, 40, 45, 0.5);
    border-radius: 4px;
}

.waypoints-list::-webkit-scrollbar-thumb {
    background: rgba(74, 158, 255, 0.6);
    border-radius: 4px;
}

.waypoints-list::-webkit-scrollbar-thumb:hover {
    background: rgba(74, 158, 255, 0.8);
}

/* Enhanced Waypoint Items */
.waypoint {
    padding: 14px 18px;
    color: rgba(220, 220, 230, 0.9);
    background: linear-gradient(145deg,
            rgba(45, 45, 50, 0.6),
            rgba(35, 35, 40, 0.8));
    border: 1px solid rgba(80, 80, 90, 0.4);
    border-radius: 10px;
    cursor: var(--cur-point, pointer);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    font-size: 14px;
    position: relative;
    overflow: hidden;
}

.waypoint::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
    transition: background 0.2s ease;
}

.waypoint:hover {
    color: white;
    background: linear-gradient(145deg,
            rgba(74, 158, 255, 0.15),
            rgba(50, 130, 220, 0.2));
    border-color: rgba(74, 158, 255, 0.5);
    transform: translateX(4px);
    box-shadow:
        0 4px 16px rgba(74, 158, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.waypoint:hover::before {
    background: linear-gradient(180deg,
            rgba(74, 158, 255, 0.8),
            rgba(0, 212, 255, 0.8));
}

.waypoint:active {
    transform: translateX(2px) scale(0.98);
    box-shadow:
        0 2px 8px rgba(74, 158, 255, 0.3),
        inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Empty State */
.waypoints-empty {
    text-align: center;
    color: rgba(160, 160, 170, 0.8);
    font-style: italic;
    padding: 40px 20px;
    font-size: 14px;
}

/* Mobile Responsive */
@media only screen and (orientation: portrait) {
    #waypoints {
        min-width: 0;
        max-width: 95vw;
        margin: 10px;
    }

    .waypoint_tab {
        padding: 10px 14px;
        font-size: 13px;
    }

    .waypoint {
        padding: 12px 16px;
        font-size: 13px;
    }

    .waypoints-list {
        padding: 16px;
        max-height: 50vh;
    }
}

@media only screen and (max-width: 480px) {
    #waypoints {
        max-width: 98vw;
    }

    .waypoint_tab {
        padding: 8px 12px;
        font-size: 12px;
    }

    .waypoint_tabs {
        flex-wrap: wrap;
        gap: 2px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    .waypoint_tab,
    .waypoint {
        transition: none;
    }

    .waypoint_tab:hover,
    .waypoint:hover {
        transform: none;
    }

    .waypoint:active {
        transform: none;
    }
}

/* Focus states for accessibility */
.waypoint_tab:focus-visible,
.waypoint:focus-visible {
    outline: 2px solid rgba(74, 158, 255, 0.8);
    outline-offset: 2px;
}

/* QUESTS */

#quests {
    display: flex;
    flex-direction: column;
    padding: 0;
    justify-content: flex-start;
    align-items: stretch;
    z-index: 20;
    position: fixed;
    top: 50%;
    /* D2-style: dock to the left half; camera slides the hero right. */
    left: 0;
    max-height: 85vh;
    max-width: min(900px, 90vw);
    min-width: 700px;
    transform: translate(0, -50%);

    /* Modern modal styling */
    background: linear-gradient(145deg, rgba(30, 30, 35, 0.98), rgba(20, 20, 25, 0.99));
    border: 2px solid rgba(100, 100, 120, 0.6);
    border-radius: 16px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.8),
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    overflow: hidden;
    color: white;
}

#quests::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
            rgba(255, 193, 7, 0.8),
            rgba(255, 235, 59, 0.8),
            rgba(255, 193, 7, 0.8));
    border-radius: 16px 16px 0 0;
}

/* Enhanced Tab System (reusing waypoint styles) */
.waypoint_tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(40, 40, 45, 0.6);
    border-bottom: 1px solid rgba(100, 100, 120, 0.3);
    padding: 8px 0;
    gap: 4px;
}

.waypoint_tab {
    padding: 12px 20px;
    color: rgba(180, 180, 190, 0.8);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: var(--cur-point, pointer);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    user-select: none;
    position: relative;
}

.waypoint_tab:hover {
    color: rgba(220, 220, 230, 1);
    background: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.3);
    transform: translateY(-1px);
}

.waypoint_tab_selected {
    color: white !important;
    background: linear-gradient(145deg,
            rgba(255, 193, 7, 0.8),
            rgba(255, 170, 0, 0.9)) !important;
    border-color: rgba(255, 193, 7, 0.8) !important;
    box-shadow:
        0 4px 12px rgba(255, 193, 7, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* Quests List Container */
.quests-container {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Custom Scrollbar */
.quests-container::-webkit-scrollbar {
    width: 8px;
}

.quests-container::-webkit-scrollbar-track {
    background: rgba(40, 40, 45, 0.5);
    border-radius: 4px;
}

.quests-container::-webkit-scrollbar-thumb {
    background: rgba(255, 193, 7, 0.6);
    border-radius: 4px;
}

.quests-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 193, 7, 0.8);
}

/* Quest Item */
.quest-item {
    background: linear-gradient(145deg,
            rgba(45, 45, 50, 0.6),
            rgba(35, 35, 40, 0.8));
    border: 1px solid rgba(80, 80, 90, 0.4);
    border-radius: 12px;
    padding: 18px 20px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
}

.quest-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: transparent;
    transition: background 0.2s ease;
}

.quest-item:hover {
    background: linear-gradient(145deg,
            rgba(255, 193, 7, 0.08),
            rgba(255, 235, 59, 0.05));
    border-color: rgba(255, 193, 7, 0.4);
    transform: translateY(-2px);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(255, 193, 7, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.quest-item:hover::before {
    background: linear-gradient(180deg,
            rgba(255, 193, 7, 0.8),
            rgba(255, 235, 59, 0.8));
}

/* Quest Number */
.quest-number {
    font-weight: 600;
    color: rgba(255, 193, 7, 0.9);
    min-width: 100px;
    font-size: 14px;
    flex-shrink: 0;
}

/* Quest Description */
.quest-description {
    flex: 1;
    color: rgba(220, 220, 230, 0.9);
    font-weight: 400;
    line-height: 1.4;
    word-wrap: break-word;
}

/* Status Badge */
.quest-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 100px;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

/* Status Badge Variants */
.quest-status.completed {
    background: linear-gradient(135deg, rgba(125, 237, 159, 0.2), rgba(78, 205, 196, 0.15));
    color: rgba(125, 237, 159, 1);
    border: 1px solid rgba(125, 237, 159, 0.4);
    box-shadow: 0 0 12px rgba(125, 237, 159, 0.3);
}

.quest-status.completed::before {
    content: '✓';
    position: absolute;
    left: 8px;
    font-weight: bold;
    font-size: 14px;
}

.quest-status.active {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 235, 59, 0.15));
    color: rgba(255, 193, 7, 1);
    border: 1px solid rgba(255, 193, 7, 0.4);
    box-shadow: 0 0 12px rgba(255, 193, 7, 0.3);
    animation: questActivePulse 2s ease-in-out infinite;
}

.quest-status.active::before {
    content: '●';
    position: absolute;
    left: 8px;
    font-weight: bold;
    font-size: 14px;
    animation: questDotPulse 1.5s ease-in-out infinite;
}

@keyframes questActivePulse {
    0%, 100% {
        box-shadow: 0 0 12px rgba(255, 193, 7, 0.3);
    }

    50% {
        box-shadow: 0 0 20px rgba(255, 193, 7, 0.5);
    }
}

@keyframes questDotPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

.quest-status.failed {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.2), rgba(255, 71, 87, 0.15));
    color: rgba(255, 107, 107, 1);
    border: 1px solid rgba(255, 107, 107, 0.4);
    box-shadow: 0 0 12px rgba(255, 107, 107, 0.3);
}

.quest-status.failed::before {
    content: '✗';
    position: absolute;
    left: 8px;
    font-weight: bold;
    font-size: 14px;
}

.quest-status.available {
    background: linear-gradient(135deg, rgba(74, 158, 255, 0.2), rgba(0, 212, 255, 0.15));
    color: rgba(74, 158, 255, 1);
    border: 1px solid rgba(74, 158, 255, 0.4);
    box-shadow: 0 0 12px rgba(74, 158, 255, 0.3);
}

.quest-status.available::before {
    content: '!';
    position: absolute;
    left: 8px;
    font-weight: bold;
    font-size: 14px;
}

.quest-status.locked {
    background: linear-gradient(135deg, rgba(120, 120, 130, 0.2), rgba(100, 100, 110, 0.15));
    color: rgba(160, 160, 170, 1);
    border: 1px solid rgba(120, 120, 130, 0.4);
    box-shadow: 0 0 8px rgba(120, 120, 130, 0.2);
}

.quest-status.locked::before {
    content: '🔒';
    position: absolute;
    left: 6px;
    font-size: 12px;
}

/* Empty State */
.no-quests {
    text-align: center;
    color: rgba(160, 160, 170, 0.8);
    font-style: italic;
    padding: 40px 20px;
    font-size: 14px;
    background: rgba(40, 40, 45, 0.3);
    border-radius: 12px;
    border: 1px dashed rgba(80, 80, 90, 0.4);
}

/* Mobile Responsive */
@media only screen and (orientation: portrait) {
    #quests {
        min-width: 0;
        max-width: 95vw;
        margin: 10px;
    }

    .quest-item {
        padding: 14px 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .quest-number {
        min-width: auto;
        text-align: center;
    }

    .quest-description {
        text-align: center;
        font-size: 13px;
    }

    .quest-status {
        min-width: auto;
        align-self: center;
    }

    .quests-container {
        padding: 16px;
        max-height: 50vh;
    }
}


/* CLOSE BUTTON */

/* Close Button for Quest Modal */
.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    background: linear-gradient(145deg,
            rgba(60, 60, 70, 0.9),
            rgba(40, 40, 50, 0.95));
    border: 1px solid rgba(100, 100, 120, 0.4);
    border-radius: 8px;
    color: rgba(200, 200, 210, 0.8);
    cursor: var(--cur-point, pointer);
    z-index: 25;

    /* Center the X */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;

    /* Smooth transitions */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Subtle effects */
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);

    user-select: none;
}

.modal-close:hover {
    background: linear-gradient(145deg,
            rgba(255, 107, 107, 0.8),
            rgba(255, 75, 75, 0.9));
    border-color: rgba(255, 107, 107, 0.6);
    color: white;
    transform: scale(1.05);
    box-shadow:
        0 4px 16px rgba(255, 107, 107, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.modal-close:active {
    transform: scale(0.95);
    box-shadow:
        0 2px 8px rgba(255, 107, 107, 0.4),
        inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Alternative: Close button as part of header */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px 8px 20px;
    border-bottom: 1px solid rgba(100, 100, 120, 0.2);
}

.modal-title {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 193, 7, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modal-header .modal-close {
    position: static;
    margin: 0;
}

/* Keyboard shortcut hint */
.modal-close::after {
    content: '';
    position: absolute;
    bottom: -20px;
    right: 0;
    font-size: 10px;
    color: rgba(160, 160, 170, 0.6);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.modal-close:hover::after {
    content: 'ESC';
    opacity: 1;
}

/* OPTIONS */

/* Enhanced Options Modal */
#options {
    position: fixed;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    z-index: 20;

    max-height: 85vh;
    max-width: min(600px, 90vw);
    min-width: 500px;

    /* Modern modal styling */
    background: linear-gradient(145deg, rgba(30, 30, 35, 0.98), rgba(20, 20, 25, 0.99));
    border: 2px solid rgba(100, 100, 120, 0.6);
    border-radius: 16px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.8),
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    overflow: hidden;
    color: white;

    display: flex;
    flex-direction: column;
}

#options::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
            rgba(125, 237, 159, 0.8),
            rgba(74, 158, 255, 0.8),
            rgba(125, 237, 159, 0.8));
    border-radius: 16px 16px 0 0;
}

/* Close Button */
.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    background: linear-gradient(145deg,
            rgba(60, 60, 70, 0.9),
            rgba(40, 40, 50, 0.95));
    border: 1px solid rgba(100, 100, 120, 0.4);
    border-radius: 8px;
    color: rgba(200, 200, 210, 0.8);
    cursor: var(--cur-point, pointer);
    z-index: 25;

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    user-select: none;
}

.modal-close:hover {
    background: linear-gradient(145deg,
            rgba(255, 107, 107, 0.8),
            rgba(255, 75, 75, 0.9));
    border-color: rgba(255, 107, 107, 0.6);
    color: white;
    transform: scale(1.05);
}

/* Modal Header */
.modal-header {
    padding: 20px 24px 16px 24px;
    border-bottom: 1px solid rgba(100, 100, 120, 0.3);
    background: rgba(40, 40, 45, 0.3);
}

.modal-title {
    font-size: 20px;
    font-weight: 600;
    color: rgba(125, 237, 159, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

/* Options Container */
.options-container {
    padding: 20px 24px;
    max-height: 60vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Custom Scrollbar */
.options-container::-webkit-scrollbar {
    width: 8px;
}

.options-container::-webkit-scrollbar-track {
    background: rgba(40, 40, 45, 0.5);
    border-radius: 4px;
}

.options-container::-webkit-scrollbar-thumb {
    background: rgba(125, 237, 159, 0.6);
    border-radius: 4px;
}

/* Section Styling */
.option-section {
    margin-bottom: 20px;
}

.section-header {
    font-size: 16px;
    font-weight: 600;
    color: rgba(125, 237, 159, 0.9);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: linear-gradient(135deg,
            rgba(125, 237, 159, 0.1),
            rgba(74, 158, 255, 0.05));
    border: 1px solid rgba(125, 237, 159, 0.2);
    border-radius: 8px;
    position: relative;
}

.section-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg,
            rgba(125, 237, 159, 0.8),
            rgba(74, 158, 255, 0.8));
    border-radius: 8px 0 0 8px;
}

/* Option Line */
.option-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(145deg,
            rgba(45, 45, 50, 0.4),
            rgba(35, 35, 40, 0.6));
    border: 1px solid rgba(80, 80, 90, 0.3);
    border-radius: 10px;
    margin-bottom: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: var(--cur-point, pointer);
}

.option-line:hover {
    background: linear-gradient(145deg,
            rgba(125, 237, 159, 0.08),
            rgba(74, 158, 255, 0.05));
    border-color: rgba(125, 237, 159, 0.3);
    transform: translateX(2px);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.option-label {
    font-weight: 500;
    color: rgba(220, 220, 230, 0.9);
    flex: 1;
    font-size: 14px;
}

.option-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Enhanced Checkbox */
.custom-checkbox {
    position: relative;
    width: 48px;
    height: 24px;
    background: rgba(60, 60, 70, 0.8);
    border: 2px solid rgba(100, 100, 120, 0.4);
    border-radius: 12px;
    cursor: var(--cur-point, pointer);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-checkbox.checked {
    background: linear-gradient(135deg,
            rgba(125, 237, 159, 0.8),
            rgba(74, 158, 255, 0.8));
    border-color: rgba(125, 237, 159, 0.8);
    box-shadow: 0 0 12px rgba(125, 237, 159, 0.3);
}

.custom-checkbox::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.custom-checkbox.checked::before {
    transform: translateX(24px);
    background: white;
}

/* Hide original checkbox */
.option-line input[type="checkbox"] {
    display: none;
}

/* Enhanced Range Slider */
.range-container {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px;
}

.custom-range {
    flex: 1;
    height: 6px;
    background: rgba(60, 60, 70, 0.8);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    position: relative;
}

.custom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg,
            rgba(125, 237, 159, 1),
            rgba(74, 158, 255, 1));
    border-radius: 50%;
    cursor: var(--cur-point, pointer);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        0 0 12px rgba(125, 237, 159, 0.4);
    transition: all 0.2s ease;
}

.custom-range::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(125, 237, 159, 0.6);
}

.custom-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg,
            rgba(125, 237, 159, 1),
            rgba(74, 158, 255, 1));
    border-radius: 50%;
    cursor: var(--cur-point, pointer);
    border: none;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        0 0 12px rgba(125, 237, 159, 0.4);
}

.option-value {
    font-weight: 600;
    color: rgba(125, 237, 159, 0.9);
    min-width: 45px;
    text-align: right;
    font-size: 13px;
}

/* Action Buttons */
.modal-actions {
    padding: 16px 24px;
    border-top: 1px solid rgba(100, 100, 120, 0.3);
    background: rgba(40, 40, 45, 0.3);
    display: flex;
    justify-content: center;
    gap: 12px;
}

.action-button {
    padding: 12px 24px;
    background: linear-gradient(145deg,
            rgba(125, 237, 159, 0.8),
            rgba(74, 158, 255, 0.8));
    color: white;
    border: 1px solid rgba(125, 237, 159, 0.6);
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: var(--cur-point, pointer);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    user-select: none;
}

.action-button:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 20px rgba(125, 237, 159, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.action-button:active {
    transform: translateY(-1px);
}

/* Mobile Responsive */
@media only screen and (orientation: portrait) {
    #options {
        min-width: 0;
        max-width: 95vw;
        margin: 10px;
    }

    .option-line {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px;
    }

    .option-controls {
        justify-content: space-between;
    }

    .range-container {
        min-width: auto;
    }
}

/* INVENTORY */

/* Enhanced Inventory Container System - Original Version with Item Improvements */
#inventory_conteneur {
    position: fixed;
    top: 50%;
    /* D2-style: dock to the right half; camera slides the hero into the left
       half (see menuShiftX in dungeon.js). */
    right: 0;
    left: auto;
    max-height: 100vh;
    max-width: 100vw;
    transform: translate(0, -50%);
    z-index: 35; /* above menu */

    /* Modern modal styling */
    background: linear-gradient(145deg, rgba(25, 25, 30, 0.98), rgba(15, 15, 20, 0.99));
    border: 2px solid rgba(100, 100, 120, 0.6);
    border-radius: 20px;
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.8),
        0 10px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);

    display: flex;
    flex-direction: row;
    gap: 24px;
    padding: 24px;
    box-sizing: border-box;
    color: white;
}

.inventory_conteneur_with_trade_window{
    /* Inventory stays right-docked during trade; the vendor panel docks to its
       left (see #trade_window). No horizontal shift needed anymore. */
}

#inventory_conteneur::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
            rgba(255, 107, 53, 0.8),
            rgba(74, 158, 255, 0.8),
            rgba(125, 237, 159, 0.8),
            rgba(255, 193, 7, 0.8),
            rgba(255, 107, 53, 0.8));
    border-radius: 20px 20px 0 0;
}

/* Close Button */
.inventory-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: linear-gradient(145deg,
            rgba(60, 60, 70, 0.9),
            rgba(40, 40, 50, 0.95));
    border: 1px solid rgba(100, 100, 120, 0.4);
    border-radius: 10px;
    color: rgba(200, 200, 210, 0.8);
    cursor: var(--cur-point, pointer);
    z-index: 25;

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    user-select: none;
}

.inventory-close:hover {
    background: linear-gradient(145deg,
            rgba(255, 107, 107, 0.8),
            rgba(255, 75, 75, 0.9));
    border-color: rgba(255, 107, 107, 0.6);
    color: white;
    transform: scale(1.05);
}

/* Stash Container */
#stash {
    background: linear-gradient(145deg,
            rgba(35, 35, 40, 0.8),
            rgba(25, 25, 30, 0.9));
    border: 1px solid rgba(80, 80, 90, 0.4);
    border-radius: 16px;
    padding: 20px;
    margin-right: 20px;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: visible;
}

#stash::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(255, 193, 7, 0.8),
            rgba(255, 235, 59, 0.8));
    border-radius: 16px 16px 0 0;
}

#stash_title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    padding: 16px 0;
    color: rgba(255, 193, 7, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(80, 80, 90, 0.3);
    margin-bottom: 16px;
}

.stash_page {
    margin: 0 6px;
    padding: 10px 16px;
    background: linear-gradient(145deg,
            rgba(60, 60, 70, 0.6),
            rgba(45, 45, 55, 0.8));
    border: 1px solid rgba(100, 100, 120, 0.3);
    border-radius: 8px;
    color: rgba(200, 200, 210, 0.8);
    cursor: var(--cur-point, pointer);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    user-select: none;
}

.stash_page:hover {
    background: linear-gradient(145deg,
            rgba(255, 193, 7, 0.2),
            rgba(255, 235, 59, 0.1));
    border-color: rgba(255, 193, 7, 0.4);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.2);
}

/* Equipment and Inventory Container */
#equipment_and_inventory {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    min-width: 0;
    flex: 1;
}

/* Character Toggle Buttons */
#self_or_merc {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    background: rgba(40, 40, 45, 0.6);
    border-radius: 12px;
    padding: 6px;
    border: 1px solid rgba(80, 80, 90, 0.3);
}

.self_or_merc_button {
    padding: 10px 18px;
    background: transparent;
    color: rgba(180, 180, 190, 0.8);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: var(--cur-point, pointer);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    user-select: none;
}

.self_or_merc_button:hover {
    background: rgba(74, 158, 255, 0.1);
    border-color: rgba(74, 158, 255, 0.3);
    color: white;
}

.self_or_merc_button_active {
    background: linear-gradient(145deg,
            rgba(74, 158, 255, 0.8),
            rgba(50, 130, 220, 0.9)) !important;
    border-color: rgba(74, 158, 255, 0.8) !important;
    color: white !important;
    box-shadow:
        0 4px 12px rgba(74, 158, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Equipment Section */
#equipment {
    background: linear-gradient(145deg,
            rgba(35, 35, 40, 0.6),
            rgba(25, 25, 30, 0.8));
    border: 1px solid rgba(80, 80, 90, 0.4);
    border-radius: 16px;
    padding: 20px;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: visible;
}

#equipment::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(74, 158, 255, 0.8),
            rgba(0, 212, 255, 0.8));
    border-radius: 16px 16px 0 0;
}

/* Inventory Section */
#inventory {
    background: linear-gradient(145deg,
            rgba(35, 35, 40, 0.6),
            rgba(25, 25, 30, 0.8));
    border: 1px solid rgba(80, 80, 90, 0.4);
    border-radius: 16px;
    padding: 20px;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: visible;
}

#inventory::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(125, 237, 159, 0.8),
            rgba(74, 158, 255, 0.8));
    border-radius: 16px 16px 0 0;
}

/* Inventory Grid */
.inventory_main {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    background: rgba(20, 20, 25, 0.5);
    border-radius: 12px;
    padding: 12px;
    border: 1px solid rgba(60, 60, 70, 0.3);
}

.inventory_row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ---- Tetris grid (inventory 12×5, stash 12×10 per page) -------------------
   Items are grid children spanning w×h cells (inline gridColumn/gridRow from
   gridItemStyle). Cell lines are painted on the container background — no
   per-cell divs, so clicks/hover land on the container. */
#ui {
    --inv-cell: min(7vh, 64px);
}

@media only screen and (orientation: portrait) {
    #ui {
        --inv-cell: 7.4vw;
    }
}

.inv_grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, var(--inv-cell));
    background:
        repeating-linear-gradient(to right, hsla(0, 0%, 100%, 0.10) 0 1px, transparent 1px var(--inv-cell)),
        repeating-linear-gradient(to bottom, hsla(0, 0%, 100%, 0.10) 0 1px, transparent 1px var(--inv-cell)),
        hsla(0, 0%, 9%, 0.95);
    border: 1px solid hsla(0, 0%, 100%, 0.35);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.55);
}

.inv_grid_inventory {
    grid-template-rows: repeat(5, var(--inv-cell));
    width: calc(var(--inv-cell) * 12);
    height: calc(var(--inv-cell) * 5);
}

.inv_grid_stash {
    grid-template-rows: repeat(10, var(--inv-cell));
    width: calc(var(--inv-cell) * 12);
    height: calc(var(--inv-cell) * 10);
}

.inv_grid .item {
    width: auto !important;
    height: auto !important;
    margin: 1px;
    z-index: 2;
}

.inv_grid .item:hover {
    z-index: 30; /* tooltip lives inside the item's stacking context */
}

.inv_grid .item img.icon {
    filter: brightness(1.35) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.7));
}

.inv_preview {
    pointer-events: none;
    z-index: 3;
    border: 2px solid;
    margin: 1px;
}

.inv_preview_ok {
    background: hsla(120, 80%, 50%, 0.22);
    border-color: hsla(120, 80%, 60%, 0.85);
}

.inv_preview_bad {
    background: hsla(0, 80%, 50%, 0.25);
    border-color: hsla(0, 85%, 60%, 0.85);
}

/* ---- Equipment paper-doll: D2 layout on an 8×7 cell grid, each slot sized
   to its item family (weapon/shield 2×4, armor 2×3, helm/gloves/boots 2×2,
   belt 2×1, rings/amulet 1×1). Slots addressed by the [slot] attribute. */
.equip_grid {
    display: grid;
    grid-template-columns: repeat(8, var(--inv-cell));
    grid-template-rows: repeat(7, var(--inv-cell));
    justify-content: center;
}

.equip_grid .item {
    width: auto !important;
    height: auto !important;
    margin: 2px;
}

.equip_grid .item[slot=helmet] { grid-area: 1 / 4 / 3 / 6; }
.equip_grid .item[slot=amulet] { grid-area: 2 / 6 / 3 / 7; }
.equip_grid .item[slot=weapon] { grid-area: 2 / 1 / 6 / 3; }
.equip_grid .item[slot=armor]  { grid-area: 3 / 4 / 6 / 6; }
.equip_grid .item[slot=shield] { grid-area: 2 / 7 / 6 / 9; }
.equip_grid .item[slot=ring1]  { grid-area: 6 / 3 / 7 / 4; }
.equip_grid .item[slot=belt]   { grid-area: 6 / 4 / 8 / 6; } /* 2×2 like its grid footprint — square art */
.equip_grid .item[slot=ring2]  { grid-area: 6 / 6 / 7 / 7; }
.equip_grid .item[slot=gloves] { grid-area: 6 / 1 / 8 / 3; }
.equip_grid .item[slot=boots]  { grid-area: 6 / 7 / 8 / 9; }

/* Slot-name label ("Weapon", "Shield", ...) pinned dead-centre in the slot
   box. It used to ride the parent's flex centering, so anything that cost the
   .item its stretch or added an in-flow child slid the text by half the slot
   height — invisible on the 2-row slots, obvious on the 4-row weapon/shield. */
.equip_grid .empty_slot {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}

/* Held item scales to its footprint (--iw/--ih set inline on the .hand item) */
.item.hand {
    width: calc(var(--inv-cell) * var(--iw, 1)) !important;
    height: calc(var(--inv-cell) * var(--ih, 1)) !important;
}

/* Gold Display */
.gold-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 20px;
    background: linear-gradient(135deg,
            rgba(255, 193, 7, 0.15),
            rgba(255, 235, 59, 0.1));
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 12px;
    font-weight: 600;
    color: rgba(255, 193, 7, 0.9);
    box-shadow: 0 0 12px rgba(255, 193, 7, 0.2);
}

.gold {
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 0 4px rgba(255, 193, 7, 0.5));
}

/* Character Stats Panel */
#character {
    background: linear-gradient(145deg,
            rgba(35, 35, 40, 0.8),
            rgba(25, 25, 30, 0.9));
    border: 1px solid rgba(80, 80, 90, 0.4);
    border-radius: 16px;
    padding: 24px;
    margin-left: 20px;
    max-width: 420px;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: visible;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: visible;
}

#character::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(255, 107, 53, 0.8),
            rgba(255, 193, 7, 0.8));
    border-radius: 16px 16px 0 0;
}

/* Trade Window - Enhanced visibility */
#trade_window {
    position: absolute;
    /* Inventory now docks to the right screen edge, so the vendor panel sits
       to its LEFT (was `left: calc(100% + 20px)`, which fell off-screen). */
    right: calc(100% + 20px);
    left: auto;
    background: linear-gradient(145deg,
            rgba(35, 35, 40, 0.95),
            rgba(25, 25, 30, 0.98));
    border: 2px solid rgba(255, 193, 7, 0.6);
    border-radius: 16px;
    padding: 20px;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(255, 193, 7, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    /* width follows the 8-wide tetris grid. The panel itself never scrolls:
       scrolling lives on .trade_sections (non-positioned), so the title stays
       pinned AND the position:fixed item tooltips escape the overflow clip
       (#trade_window is positioned → its overflow would clip them). */
    width: max-content;
    display: flex;
    flex-direction: column;
    max-height: min(84vh, 100%);
    z-index: 25;
}

.trade_sections {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    min-height: 0;
}

/* hint lines in item tooltips (buy/sell/unknown-affixes) — de-emphasized */
.item .item_hint {
    font-style: italic;
    color: hsla(0, 0%, 55%, 1);
}

.trade_section_label {
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 193, 7, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0 2px 4px;
    margin-bottom: 6px;
}

.inv_grid_trade {
    grid-template-columns: repeat(8, var(--inv-cell));
    width: calc(var(--inv-cell) * 8);
}

#trade_window::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
            rgba(255, 193, 7, 0.8),
            rgba(255, 107, 53, 0.8));
    border-radius: 16px 16px 0 0;
}

/* Enhanced flexligne for equipment layout */
.flexligne {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
}

/* ENHANCED ITEMS - Keep the improvements */
.item {
    position: relative;
    font-size: 12px;
    /* Improved from 14pt */
    user-select: none;
    height: 7.0vh;
    /* Slightly reduced from 7.4vh */
    width: 7.0vh;
    /* Slightly reduced from 7.4vh */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 1px solid hsla(0, 0%, 100%, 0.5);
    box-shadow: 0px 0px 3px hsla(0, 0%, 100%, 0.5);
    background-color: hsla(0, 0%, 20%, 0.98);
    border-radius: 6px;
    /* Added modern border radius */
    transition: all 0.2s ease;
    /* Smooth transitions */
}

.item:hover {
    cursor: var(--cur-point, pointer);
    background-color: hsla(0, 0%, 100%, 0.08);
    /* transform: scale(1.05); */
    /* Subtle hover effect */
}

/* Enhanced Item descriptions - ensure they're always visible */
.item_description {
    display: none;
    position: absolute;
    padding: 12px;
    z-index: 1000;
    /* Very high z-index */
    white-space: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: hsla(0, 0%, 26%, 0.98);
    color: hsla(0, 0%, 90%, 1);
    pointer-events: none;
    border-radius: 8px;
    /* Modern border radius */
    border: 1px solid rgba(100, 100, 120, 0.4);
    /* Enhanced border */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
    /* Better shadow */
    backdrop-filter: blur(8px);
    /* Modern blur effect */
}

.item:hover .item_description {
    display: flex;
}

/* Responsive Design */
@media only screen and (orientation: portrait) {
    #inventory_conteneur {
        flex-direction: column;
        left: 0 !important;
        right: 0 !important;
        transform: translateY(-50%) !important;
        max-width: 100vw;
        padding: 16px;
        gap: 16px;
    }

    #stash {
        margin-right: 0;
        order: 2;
    }

    #character {
        margin-left: 0;
        order: 3;
        max-width: none;
    }

    #equipment_and_inventory {
        order: 1;
        width: 100%;
    }

    #trade_window {
        position: static;
        left: auto;
        margin-top: 16px;
        min-width: auto;
        width: 100%;
    }

    .item {
        height: 50px;
        width: 50px;
        font-size: 11px;
    }
}

@media only screen and (max-width: 480px) {
    #inventory_conteneur {
        padding: 12px;
        gap: 12px;
        border-radius: 16px;
    }

    .self_or_merc_button {
        padding: 8px 14px;
        font-size: 12px;
    }

    #equipment,
    #inventory,
    #stash,
    #character {
        padding: 16px;
    }

    .item {
        height: 45px;
        width: 45px;
        font-size: 10px;
    }
}

/* Custom Scrollbar for Character Panel */
#character::-webkit-scrollbar {
    width: 8px;
}

#character::-webkit-scrollbar-track {
    background: rgba(40, 40, 45, 0.5);
    border-radius: 4px;
}

#character::-webkit-scrollbar-thumb {
    background: rgba(255, 107, 53, 0.6);
    border-radius: 4px;
}

#character::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 107, 53, 0.8);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    .stash_page,
    .self_or_merc_button,
    .inventory-close,
    .item {
        transition: none;
    }

    .stash_page:hover,
    .self_or_merc_button:hover,
    .item:hover {
        transform: none;
    }
}

/* Focus states */
.stash_page:focus-visible,
.self_or_merc_button:focus-visible,
.inventory-close:focus-visible {
    outline: 2px solid rgba(74, 158, 255, 0.8);
    outline-offset: 2px;
}

/* DIALOG */

/* Enhanced RPG Dialog System */
.dialog {
    position: absolute;
    bottom: calc(100% + 16px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;

    /* Modern RPG styling */
    background: linear-gradient(145deg,
            rgba(20, 20, 25, 0.98),
            rgba(15, 15, 20, 0.99));
    border: 2px solid rgba(200, 180, 120, 0.8);
    border-radius: 16px;

    /* Enhanced shadows and effects */
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.8),
        0 4px 16px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 20px rgba(200, 180, 120, 0.3);
    backdrop-filter: blur(12px);

    /* Sizing and spacing */
    width: min(450px, 90vw);
    max-width: 450px;
    min-width: 300px;
    padding: 20px 24px;

    /* Typography */
    font-size: 14px;
    line-height: 1.5;
    color: rgba(240, 235, 220, 0.95);
    text-align: left;

    /* Layout */
    display: flex;
    flex-direction: column;
    gap: 16px;

    /* Smooth animations */
    opacity: 0;
    transform: translateX(-50%) translateY(8px) scale(0.95);
    animation: dialogAppear 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;

    /* Prevent text selection */
    user-select: none;
    cursor: var(--cur-point, pointer);

    /* Add some personality */
    position: relative;
    overflow: hidden;
}

/* Appear animation */
@keyframes dialogAppear {
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

/* Decorative elements */
.dialog::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
            transparent,
            rgba(200, 180, 120, 0.8),
            rgba(255, 215, 140, 0.9),
            rgba(200, 180, 120, 0.8),
            transparent);
    border-radius: 16px 16px 0 0;
}

/* Speech bubble arrow */
.dialog::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 8px solid rgba(200, 180, 120, 0.8);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Dialog hover state */
.dialog:hover {
    background: linear-gradient(145deg,
            rgba(25, 25, 30, 0.98),
            rgba(20, 20, 25, 0.99));
    border-color: rgba(220, 200, 140, 0.9);
    box-shadow:
        0 16px 50px rgba(0, 0, 0, 0.9),
        0 6px 20px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 30px rgba(220, 200, 140, 0.4);
    transform: translateX(-50%) translateY(-2px) scale(1.02);
}

/* Dialog text content */
.dialog>div:first-child {
    font-style: italic;
    font-family: 'Alegreya', 'EB Garamond', Georgia, serif;
    line-height: 1.6;
    font-size: 16px;
    color: rgba(240, 235, 220, 0.9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);

    /* Add some character flavor */
    position: relative;
    padding: 8px 0;
}

/* Quote marks styling */
.dialog>div:first-child::before {
    content: '"';
    position: absolute;
    left: -16px;
    top: -8px;
    font-size: 32px;
    color: rgba(200, 180, 120, 0.6);
    font-family: serif;
    line-height: 1;
}

.dialog>div:first-child::after {
    content: '"';
    position: absolute;
    right: -16px;
    bottom: -16px;
    font-size: 32px;
    color: rgba(200, 180, 120, 0.6);
    font-family: serif;
    line-height: 1;
}

/* Enhanced Dialog Actions */
.dialog_action {
    background: linear-gradient(145deg,
            rgba(200, 180, 120, 0.15),
            rgba(220, 200, 140, 0.1));
    border: 1px solid rgba(200, 180, 120, 0.4);
    border-radius: 10px;
    padding: 12px 20px;
    margin: 0;

    /* Typography */
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(200, 180, 120, 0.9);

    /* Effects */
    cursor: var(--cur-point, pointer);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;

    /* Subtle glow */
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Action button icons */
.dialog_action::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: rgba(200, 180, 120, 0.6);
    border-radius: 50%;
    transition: all 0.2s ease;
}

/* Specific action button styling */
.dialog_action[id*="trade"]::before {
    content: '⚖';
    background: none;
    font-size: 14px;
    color: rgba(200, 180, 120, 0.8);
    width: auto;
    height: auto;
    border-radius: 0;
}

.dialog_action[id*="talk"]::before {
    content: '💬';
    background: none;
    font-size: 14px;
    color: rgba(200, 180, 120, 0.8);
    width: auto;
    height: auto;
    border-radius: 0;
}

.dialog_action[id*="quest"]::before {
    content: '❗';
    background: none;
    font-size: 14px;
    color: rgba(255, 193, 7, 0.8);
    width: auto;
    height: auto;
    border-radius: 0;
}

.dialog_action[id*="attack"]::before {
    content: '⚔';
    background: none;
    font-size: 14px;
    color: rgba(255, 107, 107, 0.8);
    width: auto;
    height: auto;
    border-radius: 0;
}

/* Action hover effects */
.dialog_action:hover {
    background: linear-gradient(145deg,
            rgba(200, 180, 120, 0.25),
            rgba(220, 200, 140, 0.2));
    border-color: rgba(220, 200, 140, 0.7);
    color: rgba(255, 245, 220, 1);
    transform: translateY(-2px);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(200, 180, 120, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.dialog_action:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.5),
        inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Multiple actions layout */
.dialog:has(.dialog_action + .dialog_action) {
    gap: 12px;
}

.dialog_action+.dialog_action {
    margin-top: 6px;
}

/* Character-specific dialog styling */
.dialog[id*="merchant"] {
    border-color: rgba(255, 193, 7, 0.8);
}

.dialog[id*="merchant"]::before {
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 193, 7, 0.8),
            rgba(255, 215, 140, 0.9),
            rgba(255, 193, 7, 0.8),
            transparent);
}

.dialog[id*="guard"] {
    border-color: rgba(74, 158, 255, 0.8);
}

.dialog[id*="guard"]::before {
    background: linear-gradient(90deg,
            transparent,
            rgba(74, 158, 255, 0.8),
            rgba(100, 180, 255, 0.9),
            rgba(74, 158, 255, 0.8),
            transparent);
}

.dialog[id*="enemy"] {
    border-color: rgba(255, 107, 107, 0.8);
}

.dialog[id*="enemy"]::before {
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 107, 107, 0.8),
            rgba(255, 130, 130, 0.9),
            rgba(255, 107, 107, 0.8),
            transparent);
}

/* Mobile responsive */
@media only screen and (max-width: 480px) {
    .dialog {
        width: min(350px, 95vw);
        padding: 16px 20px;
        font-size: 13px;
        gap: 12px;
    }

    .dialog_action {
        padding: 10px 16px;
        font-size: 12px;
    }

    .dialog>div:first-child::before,
    .dialog>div:first-child::after {
        font-size: 24px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .dialog {
        animation: none;
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }

    .dialog:hover {
        transform: translateX(-50%) translateY(0) scale(1);
    }

    .dialog_action {
        transition: none;
    }

    .dialog_action:hover {
        transform: none;
    }
}

/* Focus states for accessibility */
.dialog:focus-visible,
.dialog_action:focus-visible {
    outline: 2px solid rgba(200, 180, 120, 0.8);
    outline-offset: 2px;
}


/* SKILLS */

/* Enhanced Skills Modal System */
#skills {
    position: fixed;
    top: 50%;
    /* Fullscreen all-skills graph view (no tabs). */
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;

    width: 96vw;
    height: 92vh;
    max-height: 92vh;
    max-width: 96vw;
    min-width: 900px;

    /* Modern modal styling */
    background: linear-gradient(145deg, rgba(25, 25, 30, 0.98), rgba(15, 15, 20, 0.99));
    border: 2px solid rgba(100, 100, 120, 0.6);
    border-radius: 20px;
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.8),
        0 10px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);

    display: flex;
    flex-direction: column;
    color: white;
    overflow: hidden;
}

#skills::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
            rgba(255, 107, 53, 0.8),
            rgba(74, 158, 255, 0.8),
            rgba(125, 237, 159, 0.8),
            rgba(255, 193, 7, 0.8),
            rgba(138, 43, 226, 0.8),
            rgba(255, 107, 53, 0.8));
    border-radius: 20px 20px 0 0;
}

/* Close Button */
.skills-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: linear-gradient(145deg,
            rgba(60, 60, 70, 0.9),
            rgba(40, 40, 50, 0.95));
    border: 1px solid rgba(100, 100, 120, 0.4);
    border-radius: 10px;
    color: rgba(200, 200, 210, 0.8);
    cursor: var(--cur-point, pointer);
    z-index: 25;

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    user-select: none;
}

.skills-close:hover {
    background: linear-gradient(145deg,
            rgba(255, 107, 107, 0.8),
            rgba(255, 75, 75, 0.9));
    border-color: rgba(255, 107, 107, 0.6);
    color: white;
    transform: scale(1.05);
}

/* Header Section */
.skills-header {
    padding: 24px 32px 16px 32px;
    border-bottom: 1px solid rgba(100, 100, 120, 0.3);
    background: rgba(40, 40, 45, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.skills-title {
    font-size: 24px;
    font-weight: 600;
    color: rgba(255, 107, 53, 0.9);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.skill-points {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: linear-gradient(135deg,
            rgba(255, 107, 53, 0.15),
            rgba(255, 130, 70, 0.1));
    border: 1px solid rgba(255, 107, 53, 0.4);
    border-radius: 12px;
    font-weight: 600;
    color: rgba(255, 107, 53, 0.9);
    box-shadow: 0 0 12px rgba(255, 107, 53, 0.2);
}

.skill-points.no-points {
    color: rgba(120, 120, 130, 0.8);
    background: linear-gradient(135deg,
            rgba(80, 80, 90, 0.15),
            rgba(60, 60, 70, 0.1));
    border-color: rgba(80, 80, 90, 0.4);
    box-shadow: 0 0 8px rgba(80, 80, 90, 0.2);
}

.skill-points-icon {
    width: 20px;
    height: 20px;
    background: radial-gradient(circle,
            rgba(255, 107, 53, 0.8),
            rgba(255, 130, 70, 0.6));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: white;
}

/* Content Container — graph on top, utility strip below */
.skills-content {
    padding: 8px;
    overflow: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* Utility / passive skills strip (no arrows, flowed) */
.skills-utility {
    width: 100%;
    max-width: 1200px;
    border-top: 1px solid rgba(120, 120, 140, 0.22);
    padding: 12px 12px 4px;
    flex: 0 0 auto;
}

.skills-utility-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(180, 180, 200, 0.5);
    text-align: center;
    margin-bottom: 10px;
}

.skills-utility-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
}

.skill_node_util {
    position: static;
}

/* ===== Graph-style skill tree (bands × tiers, dependency arrows) ===== */
.skills-graph {
    position: relative;
    flex: 0 0 auto;
    margin: 0 auto;
    transform-origin: top left;
}

/* Reserves the post-scale footprint so the zoomed-out graph doesn't leave a
   phantom scroll region (transforms don't affect layout size).
   `safe center`: once the graph is wider than the panel (scale floored, we fall
   back to scrolling) plain centring would clip the LEFT edge unreachably —
   `safe` degrades to flex-start exactly in that case. */
.skills-graph-fit {
    flex: 0 0 auto;
    margin: 0 auto;
    align-self: safe center;
}

.skill_edges {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: visible;
}

.skill_band_label {
    position: absolute;
    top: 2px;
    transform: translateX(-50%);
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    opacity: 0.9;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.85);
    white-space: nowrap;
    pointer-events: none;
}

.skill_tier_label {
    position: absolute;
    left: 0;
    transform: translateY(-50%);
    width: 28px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: rgba(180, 180, 205, 0.45);
    pointer-events: none;
    line-height: 1.15;
}

/* The unlock level, stacked under the tier's roman numeral. It used to live in
   a title= tooltip, which meant the skill cadence (tiers at 4/8/12/16/20) was
   invisible unless you happened to hover the gutter. */
.skill_tier_level {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: rgba(180, 180, 205, 0.32);
}

.skill_node {
    position: absolute;
}

/* The hovered node paints above every other node — .skill_node is positioned,
   so without this the tooltip loses to any later sibling in DOM order no matter
   how high its own z-index is. */
.skill_node:hover {
    z-index: 500;
}

.skill_node .skill {
    width: var(--cw);
    height: var(--ch);
    min-width: 0;
    min-height: 0;
    padding: 6px 10px;
    box-sizing: border-box;
    border-color: color-mix(in srgb, var(--cat) 38%, rgba(100, 100, 120, 0.5));
}

.skill_node .skill_title {
    font-size: 13px;
    margin-bottom: 0;
    max-width: 100%;
}

/* ── Painterly emblem nodes (cut from the per-element spell sheets) ──
   Icon-only: no box, no border, no label — just the medallion, larger.
   The name shows on hover (the .skill_description tooltip). */
.skill_icon {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.55));
    transition: transform 0.12s ease, filter 0.12s ease;
}
.skill_node .skill.skill_has_icon,
.skill.skill_has_icon {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 2px;
}
/* hide the always-on label; name lives in the hover tooltip */
.skill_has_icon > .skill_title {
    display: none;
}
.skill_has_icon:hover .skill_icon {
    transform: scale(1.08);
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)) brightness(1.12);
}
/* Learnable: crisp full-colour medallion (no colour glow) with a gentle opacity
   blink so new/available skills draw the eye without the old category-glow throb. */
.skill_node_ready .skill.skill_has_icon {
    animation: none;
}
.skill_node_ready .skill_has_icon .skill_icon {
    filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.55));
    animation: skill_ready_blink 2.8s ease-in-out infinite;
}
@keyframes skill_ready_blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}
@keyframes skill_icon_pulse {
    0%, 100% { opacity: 0.92; }
    50%      { opacity: 1; }
}
/* Locked: dim, desaturated embers */
.skill_node_locked .skill_has_icon .skill_icon {
    opacity: 0.5;
    filter: grayscale(0.75) brightness(0.62) drop-shadow(0 3px 7px rgba(0, 0, 0, 0.55));
}
.skill_node_locked .skill.skill_has_icon {
    opacity: 1;
    filter: none;
}

/* States */
/* Dim locked nodes WITHOUT opacity/filter on .skill itself: either property makes
   the card a stacking context, which (a) traps the hover tooltip's z-index inside
   it — so later sibling nodes paint over the tooltip — and (b) multiplies the
   tooltip's own alpha by 0.5. Dim the card's visible children instead. */
.skill_node_locked .skill {
    opacity: 1;
    filter: none;
    border-color: rgba(90, 90, 105, 0.3);
    background: linear-gradient(145deg,
            rgba(30, 30, 35, 0.55),
            rgba(25, 25, 30, 0.7));
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.skill_node_locked .skill:not(.skill_has_icon) > .skill_icon {
    opacity: 0.5;
    filter: grayscale(0.45);
}

/* direct child only — never the title inside .skill_description */
.skill_node_locked .skill > .skill_title {
    color: rgba(150, 150, 160, 0.75);
    opacity: 0.75;
}

.skill_node_ready .skill {
    border-color: var(--cat);
    box-shadow: 0 0 14px color-mix(in srgb, var(--cat) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: skill_pulse 1.9s ease-in-out infinite;
}

.skill_node_learned .skill,
.skill_node_learned .skill:not(.skill_unknown) {
    border-color: var(--cat);
    background: linear-gradient(145deg, color-mix(in srgb, var(--cat) 15%, rgba(35, 35, 40, 0.9)), rgba(30, 30, 35, 0.92));
    box-shadow: 0 0 16px color-mix(in srgb, var(--cat) 42%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Point-count badge — a painterly gold gem sunk into the medallion's
   bottom-right, matching the parchment-gold HUD register. */
.skill_node .skill_level {
    position: absolute;
    bottom: 4px;
    right: 4px;
    top: auto;
    left: auto;
    margin: 0;
    padding: 0;
    min-width: 26px;
    height: 26px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: "Cinzel", "EB Garamond", Georgia, serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    color: #f1d9a4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(214, 184, 120, 0.7);
    background:
        radial-gradient(circle at 50% 40%, rgba(28, 22, 14, 0.96), rgba(10, 8, 5, 0.98));
    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.65),
        inset 0 1px 1px rgba(255, 240, 200, 0.12);
}
.skill_node_locked .skill_level {
    opacity: 0.55;
    filter: saturate(0.5);
}

@keyframes skill_pulse {
    0%, 100% { box-shadow: 0 0 8px color-mix(in srgb, var(--cat) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
    50% { box-shadow: 0 0 19px color-mix(in srgb, var(--cat) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
}

/* Custom Scrollbar */
.skills-content::-webkit-scrollbar {
    width: 8px;
}

.skills-content::-webkit-scrollbar-track {
    background: rgba(40, 40, 45, 0.5);
    border-radius: 4px;
}

.skills-content::-webkit-scrollbar-thumb {
    background: rgba(255, 107, 53, 0.6);
    border-radius: 4px;
}

.skills-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 107, 53, 0.8);
}

/* Fixed Skill Tier Rows - Centered level indicator */
.skill_row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 20px 10px 10px 10px;
    /* Extra top padding for level indicator */
    min-height: 120px;
    background: linear-gradient(135deg,
            rgba(40, 40, 45, 0.3),
            rgba(30, 30, 35, 0.5));
    border: 1px solid rgba(80, 80, 90, 0.2);
    border-radius: 12px;
    /* More subtle rounded corners */
    margin-bottom: 16px;
    transition: all 0.2s ease;
}

.skill_row:hover {
    background: linear-gradient(135deg,
            rgba(45, 45, 50, 0.4),
            rgba(35, 35, 40, 0.6));
    border-color: rgba(100, 100, 120, 0.3);
}

/* Centered Skill Level Indicator */
.skill_row_level {
    position: absolute;
    top: -12px;
    /* Half outside the row */
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    justify-content: center;
    align-items: center;

    width: 32px;
    height: 24px;

    background: linear-gradient(135deg,
            rgba(255, 107, 53, 0.9),
            rgba(255, 130, 70, 0.8));
    border: 2px solid rgba(255, 107, 53, 0.8);
    border-radius: 6px;
    /* Rectangular with subtle corners */

    font-size: 12px;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 2px 6px rgba(255, 107, 53, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);

    z-index: 10;
}

/* Enhanced Skill Cards */
.skill {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 10px 16px;
    min-width: 120px;
    min-height: 60px;

    background: linear-gradient(145deg,
            rgba(45, 45, 50, 0.8),
            rgba(35, 35, 40, 0.9));
    border: 2px solid rgba(100, 100, 120, 0.4);
    border-radius: 12px;

    cursor: var(--cur-point, pointer);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.skill:hover {
    background: linear-gradient(145deg,
            rgba(255, 107, 53, 0.1),
            rgba(255, 130, 70, 0.05));
    border-color: rgba(255, 107, 53, 0.6);
    /* transform: translateY(-4px); */
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 4px 12px rgba(255, 107, 53, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Skill States */
.skill_unknown {
    /* opacity: 0.4; */
    border-color: rgba(80, 80, 90, 0.2);
    background: linear-gradient(145deg,
            rgba(30, 30, 35, 0.5),
            rgba(25, 25, 30, 0.7));
}

.skill_unknown:hover {
    background: linear-gradient(145deg,
            rgba(35, 35, 40, 0.6),
            rgba(30, 30, 35, 0.8));
    border-color: rgba(100, 100, 120, 0.3);
    /* transform: translateY(-2px); */
}

/* Learned skills get category colors */
.skill:not(.skill_unknown) {
    border-color: rgba(255, 107, 53, 0.6);
    background: linear-gradient(145deg,
            rgba(255, 107, 53, 0.05),
            rgba(255, 130, 70, 0.02));
    box-shadow:
        0 0 15px rgba(255, 107, 53, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Skill Title */
.skill_title {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: rgba(220, 220, 230, 0.95);
    margin-bottom: 6px;
    line-height: 1.3;
    max-width: 120px;
    word-wrap: break-word;
    white-space: normal;
}

.skill_title_unknown {
    color: rgba(120, 120, 130, 0.7);
}

/* Skill Level Badge */
.skill_level {
    background: linear-gradient(135deg,
            rgba(255, 107, 53, 0.8),
            rgba(255, 130, 70, 0.9));
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    margin-top: 6px;
}

/* Enhanced Skill Description Tooltip */
.skill_description {
    opacity: 1;
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);

    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    background: linear-gradient(145deg,
            rgba(15, 15, 20, 0.98),
            rgba(10, 10, 15, 0.99));
    border: 2px solid rgba(255, 107, 53, 0.6);
    border-radius: 16px;
    padding: 20px 24px 24px;

    min-width: 300px;
    max-width: 450px;
    z-index: 2000;

    pointer-events: none;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;

    box-shadow:
        0 16px 50px rgba(0, 0, 0, 0.8),
        0 6px 20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 30px rgba(255, 107, 53, 0.3);
    backdrop-filter: blur(16px);
}

.skill:hover .skill_description {
    display: flex;
}

.skill_description::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-bottom-color: rgba(255, 107, 53, 0.6);
}

/* Skill Description Content */
.skill_description .skill_title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
    color: rgba(255, 107, 53, 0.9);
    max-width: none;
    white-space: normal;
}

.skill_explanation {
    font-style: italic;
    font-family: 'Alegreya', 'EB Garamond', Georgia, serif;
    font-size: 14px;
    color: rgba(200, 200, 210, 0.8);
    margin-bottom: 16px;
    line-height: 1.4;
}

.skill_category {
    background: rgba(255, 107, 53, 0.15);
    border: 1px solid rgba(255, 107, 53, 0.3);
    border-radius: 8px;
    padding: 4px 10px;
    margin: 4px 8px 4px 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: inline-block;
}

.skill_description_separator {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            rgba(100, 100, 120, 0.4),
            transparent);
    margin: 12px 0;
}

/* Skill-tree tooltip: current vs next-level section headers */
.skill_level_header {
    /* tooltip is a flex column with align-items:flex-start — stretch or the
       centering has no width to act on */
    align-self: stretch;
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(200, 200, 215, 0.75);
    margin-bottom: 5px;
}

.skill_level_header_next {
    color: rgba(140, 200, 255, 0.9);
}

.damage_effect_prefix {
    font-weight: 600;
    color: rgba(255, 107, 53, 0.9);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 12px;
    margin-bottom: 6px;
}

/* Separator */
.skill_separator {
    width: 100%;
    height: 24px;
}

/* Responsive Design */
@media only screen and (orientation: portrait) {
    #skills {
        min-width: 0;
        max-width: 98vw;
        max-height: 95vh;
        margin: 1vh;
    }

    .skills-header {
        padding: 16px 20px 12px 20px;
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .skills-content {
        padding: 16px 20px;
    }

    .skill_row {
        flex-wrap: wrap;
        padding: 16px;
        padding-left: 16px;
        justify-content: center;
        gap: 12px;
    }

    .skill_row_level {
        position: static;
        transform: none;
        order: -1;
        margin-bottom: 12px;
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .skill {
        min-width: 120px;
        min-height: 70px;
        padding: 12px 16px;
    }

    .skill_title {
        font-size: 12px;
        max-width: 100px;
    }

    .skill_description {
        top: auto;
        bottom: calc(100% + 12px);
        min-width: 280px;
        max-width: 320px;
    }
}

@media only screen and (max-width: 480px) {
    .skills-title {
        font-size: 18px;
    }

    .skill {
        min-width: 100px;
        min-height: 60px;
        padding: 10px 12px;
    }

    .skill_title {
        font-size: 11px;
        max-width: 80px;
    }

    .skill_description {
        min-width: 250px;
        max-width: 280px;
        padding: 16px 20px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .skill {
        transition: none;
    }

    .skill:hover {
        transform: none;
    }
}

/* Focus states */
.skill:focus-visible {
    outline: 2px solid rgba(255, 107, 53, 0.8);
    outline-offset: 2px;
}

/* ===================================================================
   D2-style left dock — Character / Skills / Talents / Quests share one
   left-half column under a single tab bar (#left_tabs). The .left-dock
   class overrides the legacy per-id positioning (centered modals, the
   900px skill-tree min-width) so all four sit at the same geometry; the
   camera shift (dungeon.js) slides the hero into the free right half.
   !important is intentional — it beats the higher-specificity #id rules
   without editing each one.
   =================================================================== */
.left-dock {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    width: min(40vw, 560px) !important;
    min-width: 0 !important;
    max-width: 40vw !important;
    height: 100vh !important;
    box-sizing: border-box;
    padding-top: 56px !important;   /* clear the tab bar */
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 0 !important;    /* full-height column, square inner edge */
}

/* The Skills tab breaks out of the left dock into a fullscreen graph view
   (all elements + dependency arrows at once). id+class beats .left-dock. */
#skills.left-dock {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    left: 0 !important;
    top: 0 !important;
    padding: 44px 10px 6px !important;   /* top clears the 48px tab bar; rest tight */
    border-radius: 0 !important;
    background: linear-gradient(145deg, rgba(20, 20, 26, 0.985), rgba(12, 12, 16, 0.992)) !important;
    z-index: 34 !important;         /* above other dock panels, below #left_tabs (36) */
}

/* Compact header inside the fullscreen skills view (the tab bar already labels it). */
#skills.left-dock .skills-header {
    padding: 6px 18px !important;
    background: transparent !important;
    border-bottom: none !important;
}

#left_tabs {
    position: fixed;
    top: 0;
    left: 0;
    width: min(40vw, 560px);
    height: 48px;
    z-index: 36;                    /* above the .left-dock panels (z 20–35) */
    display: flex;
    align-items: stretch;
    background: linear-gradient(145deg, rgba(25, 25, 30, 0.98), rgba(15, 15, 20, 0.99));
    border-bottom: 2px solid rgba(100, 100, 120, 0.6);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}
.left_tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: var(--cur-point, pointer);
    color: rgba(200, 200, 210, 0.65);
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    border-right: 1px solid rgba(100, 100, 120, 0.25);
    transition: color 0.12s, background 0.12s;
    user-select: none;
}
.left_tab:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.left_tab.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
    box-shadow: inset 0 -2px 0 #c8a25a;   /* gold underline = active tab */
}
.left_tab_close {
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: var(--cur-point, pointer);
    color: rgba(200, 200, 210, 0.8);
    font-size: 22px;
    line-height: 1;
}
.left_tab_close:hover { color: #fff; }