:root {
    --bg-dark: #0a0a0c;
    --bg-panel: #111318;
    --text-main: #c5b899;
    --accent: #c89b3c;
    --gold: #c89b3c;
    --border: rgba(200, 155, 60, 0.2);
    --parchment: #f0e6d2;
    --ok: #1ea66d;
    --bad: #e84057;
    --muted: #7a7a85;
    --ui-font: "Beaufort for LOL", Georgia, "Trebuchet MS", serif;

    --notes-title-icon-closed: url("../images/notes-title-icon-closed.png");
    --notes-title-icon-open: url("../images/notes-title-icon-open.png");
    --dice-title-icon: url("../images/dice-title-icon.png");
    /* BATCH1 ICONS START */
    --ic-search: url("../images/ic-search.png");
    --ic-fog-toggle: url("../images/ic-fog-toggle.png");
    --ic-fog-reset: url("../images/ic-fog-reset.png");
    --ic-center-reset: url("../images/ic-center-reset.png");
    --ic-pin-mode: url("../images/ic-pin-mode.png");
    --ic-pin-list: url("../images/ic-pin-list.png");
    --ic-new-encounter: url("../images/ic-new-encounter.png");
    --ic-clear: url("../images/ic-clear.png");
    --ic-autosort: url("../images/ic-autosort.png");
    --ic-turn-next: url("../images/ic-turn-next.png");
    --widget-toggle-icon: url('data:image/png;base64,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');
    /* BATCH2 ICONS START */
    --ic-turn-reset: url("../images/ic-turn-reset.png");
    --ic-damage: url("../images/ic-damage.png");
    --ic-heal: url("../images/ic-heal.png");
    --ic-add: url("../images/ic-add.png");
    --ic-add-custom: url("../images/ic-add-custom.png");
    --ic-faction-manage: url("../images/ic-faction-manage.png");
    --ic-add-npc: url("../images/ic-add-npc.png");
    --ic-add-to-encounter: url("../images/ic-add-to-encounter.png");
    --ic-delete: url("../images/ic-delete.png");
    --ic-add-session: url("../images/ic-add-session.png");
    /* BATCH2 ICONS END */

    /* BATCH3 ICONS START */
    --ic-add-event: url("../images/ic-add-event.png");
    --ic-add-loot: url("../images/ic-add-loot.png");
    --ic-add-pin: url("../images/ic-add-pin.png");
    --ic-add-quest: url("../images/ic-add-quest.png");
    --ic-economy: url("../images/ic-economy.png");
    --ic-encounter-start: url("../images/ic-encounter-start.png");
    --ic-find-on-map: url("../images/ic-find-on-map.png");
    --ic-give-player: url("../images/ic-give-player.png");
    --ic-sample: url("../images/ic-sample.png");
    --ic-saved-notes: url("../images/ic-saved-notes.png");
    /* BATCH3 ICONS END */

    /* BATCH4 ICONS START */
    --ic-save: url("../images/ic-save.png");
    --ic-export-json: url("../images/ic-export-json.png");
    --ic-import-json: url("../images/ic-import-json.png");
    --ic-hard-reset: url("../images/ic-hard-reset.png");
    --ic-close: url("../images/ic-close.png");
    --ic-map-upload: url("../images/ic-map-upload.png");
    --ic-rename: url("../images/ic-rename.png");
    --ic-inventory: url("../images/ic-inventory.png");
    --ic-gold: url("../images/ic-gold.png");
    --ic-stat-str: url("../images/ic-stat-str.png");
    /* BATCH4 ICONS END */
    /* BATCH5 ICONS START */
    --ic-stat-dex: url("../images/ic-stat-dex.png");
    --ic-stat-int: url("../images/ic-stat-int.png");
    --ic-stat-wis: url("../images/ic-stat-wis.png");
    --ic-stat-cha: url("../images/ic-stat-cha.png");
    --ic-stat-mana: url("../images/ic-stat-mana.png");
    --ic-stat-endurance: url("../images/ic-stat-endurance.png");
    --ic-edit: url("../images/ic-edit.png");
    --ic-dead: url("../images/ic-dead.png");
    --ic-note-action: url("../images/ic-note-action.png");
    --ic-quest-toggle-open: url("../images/ic-quest-toggle-open.png");
    /* BATCH5 ICONS END */
    /* BATCH6 ICONS START */
    --ic-quest-toggle-done: url("../images/ic-quest-toggle-done.png");
    --ic-image-select: url("../images/ic-image-select.png");
    --ic-hidden-badge: url("../images/ic-hidden-badge.png");
    --ic-show: url("../images/ic-show.png");
    --ic-hide: url("../images/ic-hide.png");
    --ic-add-to-library: url("../images/ic-add-to-library.png");
    --ic-token-mode: url("../images/ic-token-mode.png");
    --ic-token-library: url("../images/ic-token-library.png");
    --ic-hidden-icons: url("../images/ic-hidden-icons.png");
    --ic-token-quick-access: url("../images/ic-token-quick-access.png");
    /* BATCH6 ICONS END */
    /* BATCH1 ICONS END */

}

body {
    font-family: var(--ui-font);
    background-color: var(--bg-dark);
    color: var(--text-main);
    margin: 0;
    display: flex;
    height: 100vh;
    overflow: hidden;
}

body.is-home-tab #global-dice-widget,
body.is-home-tab #global-notes-widget,
body.is-home-tab #tq-drawer {
    display: none !important;
}

/* Tüccarlar sekmesinde Notlar widget'ını gizle (trade bar ile çakışıyor) */
body.is-merchants-tab #global-notes-widget {
    display: none !important;
}
/* Tüccarlar sekmesinde Zar Kulesi'ni dükkan görselinin sağ altına konumlandır */
body.is-merchants-tab #global-dice-widget {
    bottom: 225px;
    right: 20px;
}

.floating-widget {
    position: fixed;
    background: rgba(15, 20, 25, 0.95);
    border: 2px solid var(--gold);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    padding: 15px;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease-out, width 0.22s ease, padding 0.22s ease, min-height 0.22s ease;
}

#global-dice-widget {
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    width: 260px;
}

#global-notes-widget {
    bottom: 20px;
    left: 96px;
    z-index: 1500;
    width: 320px;
}

.floating-widget.is-minimized {
    padding: 5px 10px !important;
    min-height: 48px;
    justify-content: center;
}

#global-dice-widget.is-minimized {
    width: 270px !important;
}

#global-notes-widget.is-minimized {
    width: 270px !important;
}

.widget-head {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 8px;
    margin-bottom: 10px;
}

.floating-widget.is-minimized .widget-head {
    margin-bottom: 0;
}

.widget-toggle-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    width: 76px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform-origin: center;
    transition: transform 0.3s ease;
    flex: 0 0 auto;
}

.widget-toggle-btn .toggle-icon {
    width: 70px;
    height: 38px;
    display: inline-block;
    background-image: var(--widget-toggle-icon, var(--dice-title-icon));
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.65));
    pointer-events: none;
}

.widget-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--gold);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-self: end;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.01em;
    min-height: 38px;
}

.notes-title-icon {
    width: 52px;
    height: 34px;
    flex: 0 0 52px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: var(--notes-title-icon-closed);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

.notes-title.is-open .notes-title-icon {
    background-image: var(--notes-title-icon-open);
}

.dice-title-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: var(--dice-title-icon);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

/* SOL MENÜ */
.sidebar {
    width: 240px;
    min-width: 240px;
    flex-shrink: 0;
    background:
        radial-gradient(380px 220px at 20% 0%, rgba(197, 160, 89, 0.18), rgba(0, 0, 0, 0) 70%),
        linear-gradient(180deg, #0b0b0b 0%, #090909 100%);
    border-right: 1px solid rgba(197, 160, 89, 0.38);
    display: flex;
    flex-direction: column;
    padding: 18px;
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.55);
    z-index: 100;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    transition: width 0.22s ease, min-width 0.22s ease, padding 0.22s ease;
}

/* Sidebar Scrollbar */
.sidebar::-webkit-scrollbar {
    width: 4px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(197, 160, 89, 0.3);
    border-radius: 4px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(197, 160, 89, 0.6);
}

.logo {
    text-align: center;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(197, 160, 89, 0.24);
    padding-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80px;
}

.logo img {
    width: 100%;
    height: auto;
    max-height: 140px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}

.menu-btn {
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(197, 160, 89, 0.24);
    color: #efe2c7;
    padding: 11px 12px;
    margin-bottom: 8px;
    text-align: left;
    cursor: pointer;
    transition: 0.2s;
    font-size: 14px;
    border-radius: 12px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    display: flex;
    align-items: center;
    gap: 10px;
}

.menu-btn .menu-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    object-fit: contain;
    border-radius: 6px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

.menu-btn .menu-label {
    min-width: 0;
    line-height: 1.2;
}

.menu-btn:hover,
.menu-btn.active {
    background: rgba(139, 58, 58, 0.32);
    border-color: rgba(197, 160, 89, 0.62);
    color: #fff2d6;
    transform: translateY(-1px);
}

.main-area {
    flex-grow: 1;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    background-color: #000;
    position: relative;
}

.tab {
    display: none;
    height: 100%;
    width: 100%;
}

/* GLOBAL SEARCH (sol menü) */
.sidebar-search {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
}

/* ===== ANASAYFA MÜZİK BUTONU ===== */
.home-music-toggle {
    position: fixed;
    top: 90px;
    /* Hemen Oyna tuşunun altına denk gelmesi için */
    right: 30px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--gold);
    color: var(--gold);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    box-shadow: 0 0 15px rgba(200, 155, 60, 0.2);
}

.home-music-toggle:hover {
    background: rgba(200, 155, 60, 0.2);
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(200, 155, 60, 0.4);
}

.home-music-toggle .ui-ico {
    margin: 0 !important;
    padding: 0 !important;
    width: 24px;
    height: 24px;
    font-size: 24px;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--gold);
    font-family: Arial, sans-serif;
    transform: translateX(-2px) translateY(-2px);
}

.home-music-toggle.playing {
    border-color: var(--ok);
    color: var(--ok);
    box-shadow: 0 0 15px rgba(30, 166, 109, 0.3);
}

.home-music-toggle.playing .ui-ico {
    color: var(--ok);
}

.home-music-toggle.playing::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    border: 1px solid var(--ok);
    opacity: 0;
    animation: ripple 1.5s infinite ease-out;
}

@keyframes ripple {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

.sidebar-search input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.34);
    border: 1px solid rgba(197, 160, 89, 0.30);
    color: #eee;
    padding: 10px 12px 10px 38px;
    border-radius: 12px;
    outline: none;
    font-weight: 800;
    font-size: 13px;
    background-image: var(--ic-search);
    background-repeat: no-repeat;
    background-size: 18px 18px;
    background-position: 12px center;
}

/* Hover ile acilan/daralan sidebar (masaustu) */
@media (hover: hover) and (pointer: fine) {
    body {
        padding-left: 78px;
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        z-index: 2000;
        width: 78px;
        min-width: 78px;
        padding: 18px 10px;
    }

    .sidebar:hover,
    .sidebar:focus-within {
        width: 240px;
        min-width: 240px;
        padding: 18px;
    }

    .sidebar .logo {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
        transition: margin 0.22s ease, padding 0.22s ease;
    }

    .sidebar .logo .logo-large {
        display: none !important;
    }

    .sidebar .logo .logo-small {
        display: block !important;
        max-height: 70px;
        width: 100%;
        object-fit: contain;
        transition: max-height 0.2s ease;
        filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
        transform: scale(2.6);
    }

    .sidebar .sidebar-search {
        opacity: 0;
        max-height: 0;
        margin-bottom: 0;
        transform: translateX(-8px);
        pointer-events: none;
        overflow: hidden;
        transition: opacity 0.16s ease, max-height 0.22s ease, transform 0.22s ease, margin 0.22s ease;
    }

    .sidebar:hover .logo,
    .sidebar:focus-within .logo {
        margin-bottom: 12px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(197, 160, 89, 0.24);
    }

    .sidebar:hover .logo .logo-large,
    .sidebar:focus-within .logo .logo-large {
        display: block !important;
    }

    .sidebar:hover .logo .logo-small,
    .sidebar:focus-within .logo .logo-small {
        display: none !important;
    }

    .sidebar:hover .sidebar-search,
    .sidebar:focus-within .sidebar-search {
        opacity: 1;
        max-height: 200px;
        margin-bottom: 12px;
        transform: translateX(0);
        pointer-events: auto;
    }

    .sidebar:not(:hover):not(:focus-within) .menu-btn {
        background: transparent;
        border: none;
        box-shadow: none;
        padding-left: 10px;
        padding-right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0;
        line-height: 0;
        gap: 0;
    }

    .sidebar:not(:hover):not(:focus-within) .menu-btn::before {
        content: none;
        display: none;
    }

    .sidebar:not(:hover):not(:focus-within) .menu-btn .menu-label {
        display: none;
    }

    .sidebar:not(:hover):not(:focus-within) .menu-btn .menu-icon {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
    }

    .sidebar.force-close {
        width: 78px !important;
        min-width: 78px !important;
        padding: 18px 10px !important;
        pointer-events: none !important;
    }

    .sidebar.force-close .logo,
    .sidebar.force-close .sidebar-search {
        opacity: 0 !important;
        max-height: 0 !important;
        margin-bottom: 0 !important;
        transform: translateX(-8px) !important;
        pointer-events: none !important;
    }

    .sidebar.force-close .menu-btn {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important;
        line-height: 0 !important;
        gap: 0 !important;
    }

    .sidebar.force-close .menu-btn::before {
        content: none !important;
        display: none !important;
    }

    .sidebar.force-close .menu-btn .menu-label {
        display: none !important;
    }

    .sidebar.force-close .menu-btn .menu-icon {
        width: 52px !important;
        height: 52px !important;
        flex-basis: 52px !important;
    }
}

.logo-small {
    display: none !important;
}

.gs-results {
    position: relative;
}

.gs-pop {
    position: absolute;
    top: 4px;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.96);
    border: 1px solid rgba(197, 160, 89, 0.65);
    border-radius: 14px;
    overflow: hidden;
    z-index: 9999;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65);
    max-height: 320px;
    overflow-y: auto;
    display: none;
}

.gs-item {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gs-item:hover {
    background: rgba(139, 58, 58, 0.25);
}

.gs-item .t {
    color: var(--gold);
    font-weight: 900;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.gs-item .s {
    color: #cfcfcf;
    font-size: 12px;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gs-badge {
    font-size: 11px;
    font-weight: 900;
    color: #ddd;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.25);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

/* GENEL BUTON */
.btn {
    background: #333;
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 10px;
    font-weight: 900;
    letter-spacing: 0.3px;
    font-size: 13px;
    user-select: none;
}

.btn.secondary {
    border-color: var(--border);
    color: #ddd;
    font-weight: 800;
}

.btn.ok {
    border-color: var(--ok);
    color: var(--ok);
}

.btn.danger {
    border-color: var(--bad);
    color: var(--bad);
}

.ui-ico {
    display: inline-block;
    width: 36px;
    height: 36px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: text-bottom;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
    pointer-events: none;
}

.btn .ui-ico {
    margin-right: 12px;
}

.nav-btn .ui-ico {
    width: 36px;
    height: 36px;
    margin-right: 12px;
    vertical-align: text-bottom;
}

.map-btn .ui-ico {
    width: 40px;
    height: 40px;
    margin-right: 12px;
}

.ui-ico-search {
    background-image: var(--ic-search);
}

.ui-ico-fog-toggle {
    background-image: var(--ic-fog-toggle);
}

.ui-ico-fog-reset {
    background-image: var(--ic-fog-reset);
}

.ui-ico-center-reset {
    background-image: var(--ic-center-reset);
}

.ui-ico-pin-mode {
    background-image: var(--ic-pin-mode);
}

.ui-ico-pin-list {
    background-image: var(--ic-pin-list);
}

.ui-ico-new-encounter {
    background-image: var(--ic-new-encounter);
}

.ui-ico-clear {
    background-image: var(--ic-clear);
}

.ui-ico-autosort {
    background-image: var(--ic-autosort);
}

.ui-ico-turn-next {
    background-image: var(--ic-turn-next);
}

.ui-ico-turn-reset {
    background-image: var(--ic-turn-reset);
}

.ui-ico-damage {
    background-image: var(--ic-damage);
}

.ui-ico-heal {
    background-image: var(--ic-heal);
}

.ui-ico-add {
    background-image: var(--ic-add);
}

.ui-ico-add-custom {
    background-image: var(--ic-add-custom);
}

.ui-ico-faction-manage {
    background-image: var(--ic-faction-manage);
}

.ui-ico-add-npc {
    background-image: var(--ic-add-npc);
}

.ui-ico-add-to-encounter {
    background-image: var(--ic-add-to-encounter);
}

.ui-ico-delete {
    background-image: var(--ic-delete);
}

.ui-ico-add-session {
    background-image: var(--ic-add-session);
}

.ui-ico-add-event {
    background-image: var(--ic-add-event);
}

.ui-ico-add-loot {
    background-image: var(--ic-add-loot);
}

.ui-ico-add-pin {
    background-image: var(--ic-add-pin);
}

.ui-ico-add-quest {
    background-image: var(--ic-add-quest);
}

.ui-ico-economy {
    background-image: var(--ic-economy);
}

.ui-ico-encounter-start {
    background-image: var(--ic-encounter-start);
}

.ui-ico-find-on-map {
    background-image: var(--ic-find-on-map);
}

.ui-ico-give-player {
    background-image: var(--ic-give-player);
}

.ui-ico-sample {
    background-image: var(--ic-sample);
}

.ui-ico-saved-notes {
    background-image: var(--ic-saved-notes);
}

.ui-ico-save {
    background-image: var(--ic-save);
}

.ui-ico-export-json {
    background-image: var(--ic-export-json);
}

.ui-ico-import-json {
    background-image: var(--ic-import-json);
}

.ui-ico-hard-reset {
    background-image: var(--ic-hard-reset);
}

.ui-ico-close {
    background-image: var(--ic-close);
}

.ui-ico-map-upload {
    background-image: var(--ic-map-upload);
}

.ui-ico-rename {
    background-image: var(--ic-rename);
}

/* ---------- Toast Notifications ---------- */
.eld-toast-container {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.eld-toast {
    background: rgba(15, 20, 25, 0.95);
    border: 1px solid var(--gold);
    color: var(--text-main);
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    pointer-events: auto;
    animation: eld-toast-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 250px;
    max-width: 500px;
}

.eld-toast.success {
    border-color: var(--ok);
    color: var(--ok);
}

.eld-toast.warning {
    border-color: #f1c40f;
    color: #f1c40f;
}

.eld-toast.info {
    border-color: #3498db;
    color: #3498db;
}

@keyframes eld-toast-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.eld-toast.hiding {
    animation: eld-toast-out 0.3s ease-in forwards;
}

@keyframes eld-toast-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.ui-ico-inventory {
    background-image: var(--ic-inventory);
}

.ui-ico-gold {
    background-image: var(--ic-gold);
}

.ui-ico-stat-str {
    background-image: var(--ic-stat-str);
}

.ui-ico-stat-dex {
    background-image: var(--ic-stat-dex);
}

.ui-ico-stat-int {
    background-image: var(--ic-stat-int);
}

.ui-ico-stat-wis {
    background-image: var(--ic-stat-wis);
}

.ui-ico-stat-cha {
    background-image: var(--ic-stat-cha);
}

.ui-ico-stat-mana {
    background-image: var(--ic-stat-mana);
}

.ui-ico-stat-endurance {
    background-image: var(--ic-stat-endurance);
}

.ui-ico-edit {
    background-image: var(--ic-edit);
}

.ui-ico-dead {
    background-image: var(--ic-dead);
}

.ui-ico-note-action {
    background-image: var(--ic-note-action);
}

.ui-ico-quest-toggle-open {
    background-image: var(--ic-quest-toggle-open);
}



.ui-ico-quest-toggle-done {
    background-image: var(--ic-quest-toggle-done);
}

.ui-ico-image-select {
    background-image: var(--ic-image-select);
}

.ui-ico-hidden-badge {
    background-image: var(--ic-hidden-badge);
}

.ui-ico-show {
    background-image: var(--ic-show);
}

.ui-ico-hide {
    background-image: var(--ic-hide);
}

.ui-ico-add-to-library {
    background-image: var(--ic-add-to-library);
}

.ui-ico-token-mode {
    background-image: var(--ic-token-mode);
}

.ui-ico-token-library {
    background-image: var(--ic-token-library);
}

.ui-ico-hidden-icons {
    background-image: var(--ic-hidden-icons);
}

.ui-ico-token-quick-access {
    background-image: var(--ic-token-quick-access);
}

/* === BATCH8 LORE ICONS START === */
.lore-h2 {
    display: flex;
    align-items: center;
    gap: 20px;
    line-height: 1.15;
    flex-wrap: wrap;
}

.lore-ico {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    vertical-align: middle;
    flex: 0 0 auto;
}

.lore-ico-cover {
    width: 208px;
    height: 208px;
    margin-top: 80px;
}

.lore-h2 .lore-ico {
    width: 60px;
    height: 60px;
}

.lore-ico-sm {
    width: 40px;
    height: 40px;
    margin-right: 12px;
    vertical-align: -8px;
}

.lore-list {
    line-height: 2.9;
}

.lore-ico-gods {
    background-image: url("../images/img_33ee9dae.png");
}

.lore-ico-races {
    background-image: url("../images/img_5cf7fe2f.png");
}

.lore-ico-timeline {
    background-image: url("../images/img_518c0ee4.png");
}

.lore-ico-phase {
    background-image: url("../images/img_77eccff4.png");
}

.lore-ico-unknown {
    background-image: url("../images/img_a12787c9.png");
}

.lore-ico-zarkhal {
    background-image: url("../images/img_b44ef97c.png");
}

/* === BATCH8 LORE ICONS END === */


/* --- HARİTA SİSTEMİ --- */
.map-viewport {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: #111;
    cursor: grab;
}

.map-viewport:active {
    cursor: grabbing;
}

#map-content {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
}

#map-content img {
    display: block;
    pointer-events: none;
    user-select: none;
}

#fogCanvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.fog-hidden {
    opacity: 0 !important;
}

.map-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.8);
    padding: 10px;
    border: 1px solid var(--gold);
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    z-index: 200;
}

.map-btn {
    background: #333;
    color: var(--gold);
    border: 1px solid var(--border);
    padding: 7px 12px;
    cursor: pointer;
    font-weight: 900;
    border-radius: 10px;
    user-select: none;
    display: inline-flex;
    align-items: center;
}

/* Pin Layer */
#pinLayer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.map-pin {
    position: absolute;
    transform: translate(-50%, -100%);
    pointer-events: auto;
    cursor: pointer;
    border: 1px solid rgba(197, 160, 89, 0.6);
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-weight: 900;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 12px;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
    user-select: none;
}

.map-pin .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gold);
    border: 1px solid rgba(0, 0, 0, 0.5);
}

.map-pin.dm-only .dot {
    background: #8b3a3a;
}

.map-pin.player .dot {
    background: #2ecc71;
}

.add-player-form {
    background: rgba(10, 12, 16, 0.9);
    padding: 14px 20px;
    border-bottom: 1px solid rgba(200, 155, 60, 0.2);
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.player-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    padding: 16px 16px 90px 16px;
    height: calc(100% - 110px);
    overflow-y: auto;
}

.player-card {
    background: linear-gradient(180deg, rgba(17, 19, 24, 0.95) 0%, rgba(10, 10, 14, 0.98) 100%);
    border: 1px solid rgba(200, 155, 60, 0.2);
    border-radius: 4px;
    padding: 14px;
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transition: border-color 0.3s;
}

.player-card:hover {
    border-color: rgba(200, 155, 60, 0.4);
}

.player-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid rgba(200, 155, 60, 0.15);
    background: #080a0e;
}

.player-name-input {
    background: none;
    border: none;
    color: #c89b3c;
    font-family: "Beaufort for LOL", Georgia, serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    width: 100%;
    margin: 8px 0 4px;
    outline: none;
    border-bottom: 1px solid rgba(200, 155, 60, 0.15);
    padding-bottom: 6px;
}

.stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: 4px;
}

.stat-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 12px !important;
    padding: 4px 4px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.stat-label {
    color: #7a7a85 !important;
    font-family: "Beaufort for LOL", Georgia, serif !important;
    font-weight: 600 !important;
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.stat-val {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    color: #f0e6d2 !important;
    box-shadow: none !important;
}

.stat-input {
    width: 32px !important;
    background: transparent !important;
    border: none !important;
    color: #f0e6d2 !important;
    text-align: center !important;
    font-family: "Beaufort for LOL", Georgia, serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.remove-player {
    position: absolute;
    top: -6px;
    right: -6px;
    background: rgba(232, 64, 87, 0.9);
    color: white;
    border: 1px solid rgba(232, 64, 87, 0.5) !important;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    cursor: pointer;
    font-weight: 700;
    font-size: 10px;
    z-index: 10;
    padding: 0 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* --- LORE / KİTAP --- */
.book-container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9)), url('https://www.transparenttextures.com/patterns/dark-wood.png');
}

.book-cover {
    width: 500px;
    height: 750px;
    background: #3d2314;
    border: 12px solid #2b180d;
    border-radius: 5px 20px 20px 5px;
    box-shadow: 30px 30px 60px rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.4s;
    color: var(--gold);
    text-align: center;
    user-select: none;
}

.book-page {
    width: 1000px;
    height: 92vh;
    background-color: var(--parchment);
    background-image: url('https://www.transparenttextures.com/patterns/aged-paper.png');
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
    border-radius: 8px;
    padding: 60px 80px;
    color: #1a0f0d;
    display: none;
    position: relative;
    box-sizing: border-box;
    overflow-y: auto;
}

.book-page.active {
    display: block;
    animation: pageFlip 0.5s ease;
}

@keyframes pageFlip {
    from {
        transform: translateY(10px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.book-page h2 {
    border-bottom: 2px solid #8d6e63;
    padding-bottom: 10px;
    font-family: 'Georgia', serif;
    font-size: 32px;
    color: #5d4037;
    margin-top: 0;
}

.book-page p {
    line-height: 1.8;
    font-size: 18px;
    text-align: justify;
    font-family: 'Georgia', serif;
    margin-bottom: 15px;
    white-space: pre-line;
}

.page-illustration {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border: 6px solid #8d6e63;
    margin: 20px 0;
    border-radius: 6px;
}

.page-flag {
    float: right;
    width: 180px;
    margin: 0 0 20px 20px;
    border: 4px solid #8d6e63;
    border-radius: 6px;
}

.page-nav {
    position: sticky;
    bottom: -20px;
    background: rgba(226, 209, 176, 0.98);
    padding: 20px 0;
    display: flex;
    justify-content: space-around;
    border-top: 2px solid rgba(0, 0, 0, 0.1);
}

.nav-btn {
    background: #5d4037;
    color: white;
    border: none;
    padding: 12px 35px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 900;
    font-size: 18px;
    user-select: none;
}

/* --- DM ARAÇLARI --- */
.dice-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px 22px;
    perspective: 1100px;
}

.die-visual {
    --die-accent: #6ea8ff;
    --die-accent-soft: rgba(110, 168, 255, 0.45);
    width: 196px;
    aspect-ratio: 1 / 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px auto 18px;
    transform-style: preserve-3d;
    user-select: none;
    pointer-events: none;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.52));
}

.die-glow {
    position: absolute;
    inset: 22px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--die-accent-soft) 0%, rgba(0, 0, 0, 0) 70%);
    filter: blur(12px);
    opacity: 0.65;
    pointer-events: none;
    transition: opacity .2s ease;
}

.die-svg-wrap {
    position: absolute;
    inset: 0;
    transform-origin: 50% 50%;
    transition: transform .25s ease, filter .25s ease;
    filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.50));
}

.die-svg {
    width: 100%;
    height: 100%;
    display: block;
}

#dieNumber {
    position: relative;
    z-index: 2;
    font-size: 62px;
    line-height: 1;
    font-weight: 1000;
    letter-spacing: 0.5px;
    color: #102238;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.78),
        0 4px 14px rgba(255, 255, 255, 0.28),
        0 14px 20px rgba(0, 0, 0, 0.30);
    font-family: "Segoe UI", "Tahoma", sans-serif;
    transform: translateY(-2px);
}

.crit-text {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    min-width: 96px;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-weight: 1000;
    color: #ffffff;
    text-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.die-visual.rolling .die-svg-wrap {
    animation: dieTumble 0.72s linear infinite;
    filter: blur(0.45px) drop-shadow(0 20px 32px rgba(0, 0, 0, 0.58));
}

.die-visual.rolling #dieNumber {
    opacity: 0.95;
    animation: dieDigitsPulse .16s linear infinite alternate;
}

.die-visual.rolling .die-glow {
    opacity: 0.9;
}

@keyframes dieTumble {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
    }

    25% {
        transform: rotateX(115deg) rotateY(135deg) rotateZ(95deg) scale(1.05);
    }

    50% {
        transform: rotateX(235deg) rotateY(260deg) rotateZ(190deg) scale(0.98);
    }

    75% {
        transform: rotateX(350deg) rotateY(395deg) rotateZ(285deg) scale(1.03);
    }

    100% {
        transform: rotateX(470deg) rotateY(520deg) rotateZ(380deg) scale(1);
    }
}

@keyframes dieDigitsPulse {
    from {
        transform: translateY(-2px) scale(1);
    }

    to {
        transform: translateY(-2px) scale(1.05);
    }
}

.dice-btn {
    background: #333;
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 12px 20px;
    font-weight: 900;
    cursor: pointer;
    border-radius: 10px;
    margin: 5px;
    user-select: none;
}

.simple-card {
    background: rgba(43, 43, 43, 0.9);
    border: 1px solid var(--border);
    padding: 20px;
    border-radius: 14px;
}

textarea {
    width: 100%;
    height: 250px;
    background: #222;
    color: #ddd;
    border: 1px solid var(--border);
    padding: 10px;
    resize: vertical;
    border-radius: 12px;
    box-sizing: border-box;
}

/* --- MANAGER TAB ORTAK --- */
.mgr {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
}

.mgr-top {
    background: #121212;
    border-bottom: 2px solid var(--gold);
    padding: 14px 16px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.mgr-top input,
.mgr-top select {
    background: #1b1b1b;
    border: 1px solid var(--border);
    color: #eee;
    padding: 10px 12px;
    border-radius: 12px;
    outline: none;
    font-weight: 900;
    font-size: 13px;
}

.mgr-top .spacer {
    flex: 1;
}

.mgr-body {
    min-height: 0;
    padding: 16px;
    overflow: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    box-sizing: border-box;
}

@media (max-width: 1100px) {
    .mgr-body {
        grid-template-columns: 1fr;
    }
}

.card {
    background: rgba(43, 43, 43, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    min-height: 0;
}

.card .head {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.card .head h3 {
    margin: 0;
    font-size: 13px;
    color: #ddd;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.card .body {
    padding: 12px 14px;
    overflow: auto;
    min-height: 0;
}

.list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.li {
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.20);
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.li .title {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    font-weight: 900;
    color: var(--gold);
    font-size: 13px;
}

.li .sub {
    color: #cfcfcf;
    font-size: 12px;
    opacity: 0.9;
}

.pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.pill2 {
    font-size: 11px;
    font-weight: 900;
    color: #ddd;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.25);
    padding: 2px 8px;
    border-radius: 999px;
}

/* Modal (tek modal) */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
    box-sizing: border-box;
}

.modal {
    width: min(960px, 96vw);
    max-height: 92vh;
    background: rgba(18, 18, 18, 0.98);
    border: 1px solid rgba(197, 160, 89, 0.6);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.modal-head {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.modal-head .mt {
    font-weight: 900;
    color: var(--gold);
    letter-spacing: 0.5px;
}

.modal-body {
    padding: 14px;
    overflow: auto;
}

.modal-foot {
    padding: 12px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 900px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

.form-grid input,
.form-grid select,
.form-grid textarea {
    width: 100%;
    box-sizing: border-box;
    background: #1b1b1b;
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #eee;
    padding: 10px 12px;
    border-radius: 12px;
    outline: none;
    font-weight: 900;
    font-size: 13px;
}

.form-grid textarea {
    min-height: 120px;
    resize: vertical;
    font-weight: 800;
}


/* Özel Kaydırma Çubuğu Tasarımı */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}

/* Loot Listesi Scroll Ayarı */
#lootList {
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 8px;
}

/* PATCH CSS AREA */
/* ===== TOKENS / MINI ICONS ===== */
#tokenLayer,
#tokenLayer2 {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* tokenlar kendi üstünde pointer-events açacak */
    z-index: 240;
}

#pinLayer {
    z-index: 260;
}

#fogCanvas,
#fogCanvas2 {
    z-index: 200;
}

.map-token {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.map-token.dragging {
    cursor: grabbing;
    filter: brightness(1.05);
}

.map-token.selected .token-sprite {
    outline: 2px solid rgba(46, 204, 113, 0.9);
    outline-offset: 2px;
}

.map-token,
.map-token * {
    -webkit-user-drag: none;
}

.token-sprite {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(197, 160, 89, 0.35);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.token-sprite img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    display: block;
}

.token-label {
    font-size: 12px;
    font-weight: 900;
    color: #f1f1f1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(197, 160, 89, 0.25);
    padding: 2px 8px;
    border-radius: 999px;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.token-overlay {
    position: absolute;
    inset: 0;
    z-index: 230;
    /* tokenLayer'dan düşük, haritadan yüksek */
    display: none;
    cursor: crosshair;
    background: transparent;
}

.token-delete-btn {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ff4d4d;
    color: white;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.4);
    z-index: 255;
    transition: transform 0.2s;
    pointer-events: auto;
    /* Tıklanabilir olmasını garantile */
}

.token-delete-btn:hover {
    transform: scale(1.15);
    background: #ff1a1a;
}

/* Token Quick Access Panel */
#tq-drawer {
    position: fixed;
    top: 0;
    right: -280px;
    width: 280px;
    height: 100vh;
    background: rgba(18, 18, 18, 0.96);
    border-left: 2px solid var(--gold);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.8);
    z-index: 10000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

#tq-drawer.open {
    right: 0;
}

#tq-toggle {
    position: absolute;
    top: 50%;
    left: -42px;
    transform: translateY(-50%);
    background: #1a1a1d;
    border: 2px solid var(--gold);
    border-right: none;
    color: var(--gold);
    padding: 15px 8px;
    border-radius: 12px 0 0 12px;
    cursor: pointer;
    font-weight: 900;
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.6);
    transition: background 0.2s;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 2px;
}

#tq-toggle:hover {
    background: var(--accent);
    color: white;
}

.tq-header {
    padding: 15px;
    border-bottom: 1px solid rgba(197, 160, 89, 0.4);
    font-weight: 900;
    color: var(--gold);
    font-size: 16px;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
}

.tq-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tq-item {
    display: flex;
    gap: 10px;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
}

.tq-item:hover {
    border-color: rgba(197, 160, 89, 0.6);
    background: rgba(197, 160, 89, 0.1);
}

.tq-item.selected {
    border-color: var(--ok);
    background: rgba(46, 204, 113, 0.15);
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.3);
}

.tq-item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 8px;
    background: #111;
    border: 1px solid rgba(197, 160, 89, 0.3);
}

.tq-item-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.tq-item-info .tq-name {
    font-size: 13px;
    font-weight: 900;
    color: #eee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Library list */
.token-lib-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.20);
    border-radius: 14px;
}

.token-lib-item img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid rgba(197, 160, 89, 0.35);
    background: #0f0f0f;
}

.token-lib-item .meta {
    flex: 1;
    min-width: 0;
}

.token-lib-item .meta .name {
    font-weight: 900;
    color: var(--gold);
}

.token-lib-item .meta .sub {
    font-size: 12px;
    color: #cfcfcf;
    opacity: .9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 2px 8px;
    border-radius: 999px;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.token-overlay {
    position: absolute;
    inset: 0;
    z-index: 230;
    /* tokenLayer'dan düşük, haritadan yüksek */
    display: none;
    cursor: crosshair;
    background: transparent;
}

.token-delete-btn {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ff4d4d;
    color: white;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.4);
    z-index: 255;
    transition: transform 0.2s;
    pointer-events: auto;
    /* Tıklanabilir olmasını garantile */
}

.token-delete-btn:hover {
    transform: scale(1.15);
    background: #ff1a1a;
}

/* Token Quick Access Panel */
#tq-drawer {
    position: fixed;
    top: 0;
    right: -280px;
    width: 280px;
    height: 100vh;
    background: rgba(18, 18, 18, 0.96);
    border-left: 2px solid var(--gold);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.8);
    z-index: 10000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

#tq-drawer.open {
    right: 0;
}

#tq-toggle {
    position: absolute;
    top: 50%;
    left: -42px;
    transform: translateY(-50%);
    background: #1a1a1d;
    border: 2px solid var(--gold);
    border-right: none;
    color: var(--gold);
    padding: 15px 8px;
    border-radius: 12px 0 0 12px;
    cursor: pointer;
    font-weight: 900;
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.6);
    transition: background 0.2s;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 2px;
}

#tq-toggle:hover {
    background: var(--accent);
    color: white;
}

.tq-header {
    padding: 15px;
    border-bottom: 1px solid rgba(197, 160, 89, 0.4);
    font-weight: 900;
    color: var(--gold);
    font-size: 16px;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
}

.tq-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tq-item {
    display: flex;
    gap: 10px;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
}

.tq-item:hover {
    border-color: rgba(197, 160, 89, 0.6);
    background: rgba(197, 160, 89, 0.1);
}

.tq-item.selected {
    border-color: var(--ok);
    background: rgba(46, 204, 113, 0.15);
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.3);
}

.tq-item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 8px;
    background: #111;
    border: 1px solid rgba(197, 160, 89, 0.3);
}

.tq-item-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.tq-item-info .tq-name {
    font-size: 13px;
    font-weight: 900;
    color: #eee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Library list */
.token-lib-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.20);
    border-radius: 14px;
}

.token-lib-item img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid rgba(197, 160, 89, 0.35);
    background: #0f0f0f;
}

.token-lib-item .meta {
    flex: 1;
    min-width: 0;
}

.token-lib-item .meta .name {
    font-weight: 900;
    color: var(--gold);
}

.token-lib-item .meta .sub {
    font-size: 12px;
    color: #cfcfcf;
    opacity: .9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== EXTRA MAPS TAB ===== */
.maps-layout {
    height: 100%;
    position: relative;
    background: #000;
    overflow: hidden;
}

.maps-left {
    position: absolute;
    top: 0;
    left: -360px;
    width: 360px;
    height: 100%;
    background: rgba(18, 18, 18, 0.96);
    border-right: 2px solid var(--gold);
    z-index: 500;
    transition: left 0.3s ease;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
}

.maps-left-inner {
    padding: 15px 15px 15px 25px;
    /* Added left padding to prevent main sidebar shadow from obscuring content */
    box-sizing: border-box;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.maps-left.open {
    left: 0;
}

#maps-toggle {
    position: absolute;
    top: 50%;
    right: -38px;
    transform: translateY(-50%);
    background: #1a1a1d;
    border: 2px solid var(--gold);
    border-left: none;
    color: var(--gold);
    padding: 15px 8px;
    border-radius: 0 12px 12px 0;
    cursor: pointer;
    font-weight: 900;
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.6);
    transition: background 0.2s;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 2px;
    z-index: 501;
}

#maps-toggle:hover {
    background: var(--accent);
    color: white;
}

.maps-right {
    position: absolute;
    inset: 0;
    background: #000;
}

.maps-head {
    border-bottom: 1px solid rgba(197, 160, 89, 0.35);
    padding-bottom: 12px;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.maps-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.maps-input {
    flex: 1;
    min-width: 180px;
    background: #222;
    border: 1px solid var(--border);
    color: white;
    padding: 10px;
    border-radius: 6px;
}

.maps-btn {
    background: #333;
    color: var(--gold);
    border: 1px solid var(--border);
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.maps-btn .ui-ico {
    width: 36px;
    height: 36px;
    margin-right: 0;
}

.maps-btn:hover {
    border-color: var(--gold);
}

.maps-btn.danger {
    color: #ffb3b3;
    border-color: #7a2a2a;
}

.maps-btn.danger:hover {
    border-color: #ff4d4d;
}

.maps-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.maps-item {
    background: rgba(43, 43, 43, 0.9);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    transition: .2s;
}

.maps-item:hover {
    border-color: var(--gold);
    transform: translateY(-1px);
}

.maps-item.active {
    border-color: var(--gold);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55);
}

.maps-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.maps-thumb {
    width: 70px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #444;
    background: #111;
}

.maps-name {
    font-weight: 900;
    color: var(--gold);
}

.maps-sub {
    font-size: 12px;
    color: #bbb;
    margin-top: 4px;
}

#map-content2 {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
}

#map-content2 img {
    display: block;
    pointer-events: none;
}

#fogCanvas2 {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 1;
    transition: opacity .35s ease;
}

.maps-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cfc3aa;
    font-size: 18px;
    opacity: .85;
    pointer-events: none;
}

/* ===== Integrated Home (Universe Prototype) ===== */
#tab-home {
    height: 100%;
    overflow: auto;
    background:
        radial-gradient(1100px 600px at -10% -10%, rgba(210, 165, 91, 0.25), rgba(0, 0, 0, 0) 55%),
        radial-gradient(980px 560px at 110% -5%, rgba(132, 60, 53, 0.22), rgba(0, 0, 0, 0) 56%),
        linear-gradient(180deg, #090a0d 0%, #0f1013 42%, #09090b 100%);
}

.home-wrap {
    min-height: 100%;
    box-sizing: border-box;
    max-width: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.home-content-shell {
    padding-left: 22px;
    padding-right: 22px;
}

.home-reveal {
    animation: homeFadeRise 0.55s ease both;
}

@keyframes homeFadeRise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.home-hero-shell {
    width: 100%;
}

.home-cinematic-hero {
    position: relative;
    min-height: clamp(420px, 78dvh, 760px);
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    border-radius: 0;
    overflow: hidden;
    border: 0;
    background: #0b0c10;
    box-shadow: none;
    isolation: isolate;
}

.home-cinematic-fallback,
.home-cinematic-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.home-cinematic-fallback {
    z-index: 0;
    filter: saturate(0.9) brightness(0.72) contrast(1.05);
}

.home-cinematic-video {
    z-index: 1;
    filter: saturate(0.95) brightness(0.78) contrast(1.04);
}

.home-cinematic-overlay-2,
.home-cinematic-overlay-1 {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.home-cinematic-overlay-2 {
    z-index: 2;
    background: #0a1428;
    opacity: 0.24;
}

.home-cinematic-overlay-1 {
    z-index: 3;
    background:
        linear-gradient(to top, rgba(10, 20, 40, 0.9) 0%, rgba(10, 20, 40, 0) 54%),
        linear-gradient(90deg, rgba(8, 10, 14, 0.88) 0%, rgba(8, 10, 14, 0.45) 48%, rgba(8, 10, 14, 0.82) 100%);
}

.home-cinematic-content {
    position: absolute;
    z-index: 4;
    left: clamp(18px, 3vw, 44px);
    right: clamp(18px, 3vw, 44px);
    bottom: clamp(18px, 4.2vh, 40px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: min(1100px, 86%);
}

.home-cinematic-brand {
    display: block;
    width: clamp(160px, 26vw, 490px);
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.58));
}

.home-cinematic-motto {
    color: #e5d8be;
    font-size: clamp(15px, 1.25vw, 23px);
    line-height: 1.55;
    font-weight: 600;
    max-width: min(78ch, 92%);
    text-shadow: 0 10px 24px rgba(0, 0, 0, 0.7);
}

@font-face {
    font-family: "Beaufort for LOL";
    src:
        url("https://universe.leagueoflegends.com/e2263194ec33cc76db4d74b36ae9db85.woff2") format("woff2"),
        url("https://universe.leagueoflegends.com/628500539be9e29c30fbcf9957241368.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Beaufort for LOL";
    src:
        url("https://universe.leagueoflegends.com/5b8e55ee0ce2f81de23d967ccb6e4805.woff2") format("woff2"),
        url("https://universe.leagueoflegends.com/09d2ee7f591ed9f2960665c618881526.woff") format("woff");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Beaufort for LOL";
    src:
        url("https://universe.leagueoflegends.com/23d6b0340d74cbd584a52fe77ce5a166.woff2") format("woff2"),
        url("https://universe.leagueoflegends.com/d15e6ad5b80db3bfe20fe8ea6f20e83b.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}

.home-champion-carousel {
    position: relative;
    width: 100%;
    padding: 0 0 18px;
    overflow: visible;
    background-color: #0a0a0c;
}

.home-slider-wrap {
    position: relative;
    top: -8px;
    height: 52vh;
    min-height: 225px;
    max-height: 580px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    z-index: 5;
}

.home-slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.home-slider .swiper-wrapper {
    height: 100%;
    align-items: stretch;
}

@keyframes homeActivateSlideImage {
    0% {
        transform: scale(0.965);
        filter: grayscale(65%) brightness(0.5);
    }

    50% {
        transform: scale(0.985);
        filter: grayscale(35%) brightness(0.75);
    }

    75% {
        transform: scale(0.995);
        filter: grayscale(0) brightness(0.8);
    }

    100% {
        transform: scale(1);
        filter: grayscale(0) brightness(1);
    }
}

.home-slide {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: relative;
    width: 95%;
    max-width: 900px;
    height: 100%;
    transform: scale(1);
    overflow: hidden;
    z-index: 5;
    pointer-events: auto;
}

@media (min-width: 768px) {
    .home-slide {
        width: 80%;
    }
}

@media (min-width: 1px) and (max-width: 767px) {
    .home-slide {
        max-width: 350px;
    }
}

.home-slide.swiper-slide-active {
    z-index: 10;
}

.home-slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
    background-color: #0a0a0c;
    box-shadow: 0 0 16px 2px rgba(0, 0, 0, 0.2);
    filter: brightness(0.35);
    transform-origin: 50% 100%;
    transition: filter 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease, opacity 0.5s ease;
}

@media (min-width: 768px) {
    .home-slide-img {
        filter: grayscale(100%) brightness(0.3);
    }
}

.home-slide.swiper-slide-active .home-slide-img {
    filter: brightness(1);
    box-shadow: 0 0 16px 14px rgba(0, 0, 0, 0.4);
}

@media (min-width: 768px) {
    .home-slide.swiper-slide-active .home-slide-img {
        animation: homeActivateSlideImage 0.6s ease-in-out 1;
        filter: grayscale(0) brightness(1);
        transform: scale(1);
    }
}

.home-slide.swiper-slide-next,
.home-slide.swiper-slide-prev {
    transition: transform-origin 0s 0s, transform 1s 0s, z-index 0.5s 0.5s;
    z-index: 5;
}

@media (min-width: 768px) {

    .home-slide.swiper-slide-next .home-slide-img,
    .home-slide.swiper-slide-prev .home-slide-img {
        transform: scale(0.88);
        filter: grayscale(100%) brightness(0.28);
        opacity: 0.9;
    }
}

.home-carousel-arrow {
    appearance: none;
    border: 0;
    background: transparent;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    width: 66px;
    height: 66px;
    padding: 0;
    cursor: pointer;
    overflow: visible;
}

.home-direction-button {
    display: block;
    width: 66px;
    height: 66px;
    overflow: visible;
}

.home-direction-button .home-outer-ring,
.home-direction-button .home-outer-ring-bg {
    transform-origin: 48px 50px;
    transition: 0.2s;
}

.home-direction-button .home-outer-ring-bg {
    fill: #191c20;
}

.home-direction-button .home-inner-ring,
.home-direction-button .home-inner-ring-bg {
    transition: 0.2s;
}

.home-direction-button .home-inner-ring-bg {
    fill: #191c20;
}

.home-direction-button .home-next-arrow {
    transform: translateY(2px);
}

.home-direction-button .home-prev-arrow {
    transform: translate(2px, 1.5px);
}

.home-carousel-arrow:hover .home-outer-ring,
.home-carousel-arrow:hover .home-outer-ring-bg {
    transform: scale(1.1);
}

.home-carousel-arrow:active .home-inner-ring {
    opacity: 0.7;
}

.home-carousel-arrow:active .home-inner-ring-bg {
    fill: #000;
}

.home-carousel-arrow:active .home-arrow-shape {
    opacity: 0.8;
}

.home-carousel-arrow.left {
    left: calc(55% - 646px);
}

.home-carousel-arrow.right {
    right: calc(55% - 646px);
}

@media (max-width: 1280px) {
    .home-carousel-arrow.left {
        left: calc(5% - 60px);
    }

    .home-carousel-arrow.right {
        right: calc(5% - 62px);
    }
}

.home-info-wrap {
    height: 380px;
    margin-bottom: -105px;
    overflow-x: hidden;
    position: relative;
    top: -108px;
}

.home-info-slider {
    background-color: #0f0f0f;
    border-bottom: 2px solid #0f0f0f;
    border-top: 2px solid #1d1d1d;
    box-shadow: 0 0 16px 14px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    height: 180px;
    top: 100px;
    z-index: 6;
    overflow: visible;
    position: relative;
    width: 100%;
}

.home-info-slider .swiper-wrapper {
    height: 100%;
    align-items: stretch;
}

.home-info-slide {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    width: 33.33vw;
    height: 180px;
    text-align: center;
    text-transform: uppercase;
    background-color: #0f0f0f;
    border-top: 2px solid #0f0f0f;
    border-bottom: 2px solid #0f0f0f;
    transform: scale(1);
    transition: 0.6s ease;
    opacity: 1;
    overflow: visible;
    z-index: 4;
    cursor: pointer;
    flex-shrink: 0;
}

.home-info-upper-triangle {
    position: absolute;
    right: 0;
    bottom: calc(100% + 1px);
    left: 0;
}

.home-info-lower-triangle {
    position: absolute;
    top: calc(100% + 1px);
    right: 0;
    left: 0;
    transform: rotate(180deg);
}

.home-info-triangle-bg {
    width: 0;
    height: 0;
    margin: 0 auto;
    border-style: solid;
    border-width: 0 16.665vw;
    border-color: transparent transparent #0f0f0f;
    transition-duration: 0.6s;
    transition-property: border-width, border-color, height;
}

.home-info-kicker,
.home-info-name,
.home-info-motto {
    opacity: 0.15;
    transition: opacity 0.55s ease;
}

.home-info-kicker {
    color: #c4b998;
    font-size: 12px;
    letter-spacing: 4px;
    padding: 0 50px;
    font-family: Spiegel, Helvetica, sans-serif;
}

.home-info-name {
    color: #937341;
    font-size: 30px;
    font-weight: 500;
    letter-spacing: 3px;
    line-height: 1;
    padding: 7px 50px 14px;
    font-family: "Beaufort for LOL", Arial, sans-serif;
}

.home-info-motto {
    position: relative;
    color: #c4b998;
    font-size: 12px;
    line-height: 1.4;
    padding: 0 50px 20px;
    letter-spacing: normal;
    text-transform: none;
    font-family: Spiegel, Helvetica, sans-serif;
}

@media (min-width: 1280px) {
    .home-info-motto::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: calc(50% - 30px);
        width: 60px;
        height: 2px;
        opacity: 0;
        background: #937341;
        transition: opacity 1.5s ease;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .home-info-name {
        font-size: 18px;
        padding: 7px 15px 14px;
    }

    .home-info-motto {
        font-size: 12px;
        padding: 0 10px 20px;
    }
}

.home-info-slide.swiper-slide-active {
    transform: scale(1.1);
    background-color: #16171b;
    border-top: 2px solid #16171b;
    border-bottom: 2px solid #16171b;
    z-index: 5;
}

.home-info-slide.swiper-slide-active:hover {
    background-color: #0e1114;
    border-top: 2px solid #0e1114;
    border-bottom: 2px solid #0e1114;
}

.home-info-slide.swiper-slide-active .home-info-triangle-bg {
    border-width: 0 16.665vw 30px;
    border-color: transparent transparent #16171b;
}

.home-info-slide.swiper-slide-active:hover .home-info-triangle-bg {
    border-color: transparent transparent #0e1114;
}

.home-info-slide.swiper-slide-active .home-info-kicker,
.home-info-slide.swiper-slide-active .home-info-name,
.home-info-slide.swiper-slide-active .home-info-motto,
.home-info-slide.swiper-slide-active .home-info-motto::after {
    opacity: 1;
}

.home-actions {
    margin-top: auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 14px;
}

.home-kpi-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(8, minmax(120px, 1fr));
}

.home-kpi {
    position: relative;
    border-radius: 12px;
    border: 1px solid rgba(197, 160, 89, 0.24);
    background: linear-gradient(180deg, rgba(16, 18, 24, 0.78) 0%, rgba(8, 9, 12, 0.78) 100%);
    padding: 10px 12px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.38);
    overflow: hidden;
}

.home-kpi::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(221, 187, 119, 0.9), rgba(255, 255, 255, 0));
}

.home-kpi .k {
    font-size: 10px;
    color: #d2c2a2;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    font-weight: 800;
}

.home-kpi .v {
    margin-top: 6px;
    color: #f5e8cf;
    font-size: 24px;
    font-weight: 1000;
    line-height: 1.1;
    text-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.home-kpi .v small {
    font-size: 13px;
    color: #dcbf86;
}

.home-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 14px;
}

.home-column {
    display: grid;
    gap: 14px;
    min-height: 0;
}

.home-card {
    border-radius: 14px;
    border: 1px solid rgba(197, 160, 89, 0.26);
    background:
        radial-gradient(600px 300px at 25% -20%, rgba(197, 160, 89, 0.08), rgba(0, 0, 0, 0) 62%),
        rgba(11, 12, 16, 0.82);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.52);
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.home-card-head {
    padding: 11px 13px;
    border-bottom: 1px solid rgba(197, 160, 89, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(10, 11, 15, 0.86);
}

.home-card-head .t {
    color: #dfc38f;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.home-card-head .s {
    color: #cdbf9f;
    font-size: 11px;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 52%;
    text-align: right;
}

.home-card-body {
    padding: 13px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.home-big {
    color: #f5e9d3;
    font-size: 27px;
    font-weight: 1000;
    line-height: 1.12;
}

.home-muted {
    color: #d4c5aa;
    font-size: 13px;
    line-height: 1.55;
}

.home-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 8px;
}

.home-note {
    width: 100%;
    min-height: 170px;
    max-height: 320px;
    box-sizing: border-box;
    resize: vertical;
    border-radius: 12px;
    background: rgba(6, 7, 10, 0.8);
    border: 1px solid rgba(197, 160, 89, 0.3);
    color: #f0eadf;
    padding: 11px 12px;
    font-weight: 700;
    line-height: 1.45;
}

@media (max-width: 1500px) {
    .home-slider-wrap {
        max-height: 540px;
    }
}

@media (max-width: 1260px) {
    .home-slider-wrap {
        max-height: 500px;
    }

    .home-info-wrap {
        top: -120px;
    }

    .home-info-slider {
        top: 112px;
    }

    .home-kpi-grid {
        grid-template-columns: repeat(4, minmax(120px, 1fr));
    }

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

@media (max-width: 860px) {
    .home-content-shell {
        padding-left: 14px;
        padding-right: 14px;
    }

    .home-cinematic-hero {
        min-height: 420px;
    }

    .home-cinematic-content {
        max-width: 100%;
    }

    .home-cinematic-brand {
        width: min(100%, 360px);
    }

    .home-cinematic-motto {
        font-size: 14px;
    }

    .home-slider-wrap {
        top: -20px;
        height: 42vw;
        min-height: 260px;
        max-height: 420px;
    }

    .home-carousel-arrow {
        width: 56px;
        height: 56px;
    }

    .home-direction-button {
        width: 56px;
        height: 56px;
    }

    .home-info-wrap {
        top: -126px;
        height: 340px;
        margin-bottom: -112px;
    }

    .home-info-slider {
        top: 118px;
        height: 170px;
    }

    .home-info-slide {
        height: 170px;
    }

    .home-kpi-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }
}

@media (max-width: 640px) {
    .home-cinematic-hero {
        min-height: 360px;
    }

    .home-slider-wrap {
        height: 95vw;
        min-height: 225px;
        top: -38px;
    }

    .home-slide.swiper-slide-active .home-slide-img {
        animation: none;
        transform: scale(1);
    }

    .home-carousel-arrow {
        width: 48px;
        height: 48px;
    }

    .home-carousel-arrow.left {
        left: 10px;
    }

    .home-carousel-arrow.right {
        right: 10px;
    }

    .home-direction-button {
        width: 48px;
        height: 48px;
    }

    .home-info-wrap {
        top: -142px;
        height: 320px;
        margin-bottom: -120px;
    }

    .home-info-slider {
        top: 142px;
        height: 150px;
    }

    .home-info-slide {
        width: 100%;
        height: 150px;
    }

    .home-info-slide.swiper-slide-active {
        transform: scale(1);
    }

    .home-info-name {
        font-size: 20px;
    }

    .home-info-kicker {
        font-size: 14px;
    }

    .home-info-motto {
        display: none;
    }

    .home-info-triangle-bg {
        border-width: 0 50vw 30px !important;
    }

    .home-links {
        grid-template-columns: 1fr;
    }

    .home-card-head .s {
        max-width: 46%;
    }
}


/* ===== Shared Eldravan Theme ===== */
.eld-themed {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1200px 600px at 18% 0%, rgba(197, 160, 89, 0.12), rgba(0, 0, 0, 0) 55%),
        radial-gradient(1100px 580px at 88% 8%, rgba(139, 58, 58, 0.14), rgba(0, 0, 0, 0) 58%),
        linear-gradient(145deg, #090909 0%, #131112 50%, #0d0d0e 100%);
}

.eld-themed .mgr-top,
.eld-themed .add-player-form,
.eld-themed .maps-head {
    background: rgba(8, 8, 8, 0.62);
    border-bottom: 1px solid rgba(197, 160, 89, 0.42);
    box-shadow: inset 0 -1px 0 rgba(197, 160, 89, 0.12);
    backdrop-filter: blur(6px);
}

.eld-themed .card,
.eld-themed .player-card,
.eld-themed .simple-card,
.eld-themed .maps-item {
    background: rgba(10, 10, 10, 0.56);
    border: 1px solid rgba(197, 160, 89, 0.28);
    box-shadow: 0 16px 46px rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(8px);
}

.eld-themed .card .head {
    border-bottom: 1px solid rgba(197, 160, 89, 0.22);
}

.eld-themed .card .head h3 {
    color: var(--gold);
}

.eld-themed .li {
    border: 1px solid rgba(197, 160, 89, 0.24);
    background: rgba(0, 0, 0, 0.28);
}

.eld-themed .title {
    color: #f0d8a6;
}

.eld-themed input:not([type="file"]),
.eld-themed select,
.eld-themed textarea {
    background: rgba(0, 0, 0, 0.34) !important;
    border: 1px solid rgba(197, 160, 89, 0.32) !important;
    color: #f1f1f1;
}

.eld-themed .btn {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.eld-themed .btn.secondary {
    border-color: rgba(197, 160, 89, 0.34);
    color: #e4d0a7;
    background: rgba(0, 0, 0, 0.20);
}

.eld-themed .smallmuted {
    color: #d8ccb7;
}

.eld-themed .map-controls {
    background: rgba(0, 0, 0, 0.66);
    border: 1px solid rgba(197, 160, 89, 0.36);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.46);
    backdrop-filter: blur(6px);
}

.eld-themed .map-btn {
    border-color: rgba(197, 160, 89, 0.36);
    color: #efd8ac;
    background: rgba(0, 0, 0, 0.28);
    border-radius: 10px;
    font-weight: 800;
}

.eld-themed .map-btn:hover {
    border-color: rgba(197, 160, 89, 0.72);
    background: rgba(139, 58, 58, 0.22);
}

.modal {
    background: rgba(10, 10, 10, 0.96);
    border: 1px solid rgba(197, 160, 89, 0.55);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.72);
}

.modal-head {
    border-bottom: 1px solid rgba(197, 160, 89, 0.24);
    background: rgba(0, 0, 0, 0.34);
}

.modal-head .mt {
    color: #f0d8a6;
}

.modal-foot {
    border-top: 1px solid rgba(197, 160, 89, 0.20);
    background: rgba(0, 0, 0, 0.22);
}


.smallmuted {
    color: #cfcfcf;
    opacity: .9;
    font-size: 12px;
}

/* --- WORLD EDITOR ASSET LIBRARY --- */
.world-editor-library {
    position: absolute;
    top: 80px;
    right: 20px;
    width: 250px;
    background: var(--bg-sec);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 15px;
    z-index: 300;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.we-lib-header h3 {
    font-family: var(--font-m);
    color: var(--gold);
    font-size: 16px;
    margin: 0 0 4px 0;
}

.we-lib-header p {
    color: #aaa;
    font-size: 12px;
    margin: 0;
}

/* Category Tabs */
.we-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.we-tab-btn {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ccc;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.we-tab-btn:hover {
    background: rgba(200, 155, 60, 0.2);
    color: #fff;
}

.we-tab-btn.active {
    background: rgba(200, 155, 60, 0.3);
    border-color: #c89b3c;
    color: #c89b3c;
    font-weight: bold;
}

.we-tab-content {
    display: none;
}

.we-tab-content.active {
    display: block;
}

.we-lib-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-height: 350px;
    overflow-y: auto;
    padding-right: 5px;
}

.we-lib-item {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: grab;
    transition: all 0.2s ease;
}

.we-lib-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    border-color: rgba(197, 160, 89, 0.4);
}

.we-lib-item:active {
    cursor: grabbing;
}

.we-lib-item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}

/* --- MAP REGION CRESTS (FIXED MARKERS) --- */
.map-region-crest {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    z-index: 210;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --poi-scale: 1;
}

.map-region-crest img {
    width: calc(60px * var(--poi-scale));
    height: calc(60px * var(--poi-scale));
    object-fit: contain;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.8));
    transition: filter 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), width 0.15s ease, height 0.15s ease;
}

.map-region-label {
    font-family: var(--font-m);
    font-size: 14px;
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 1);
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(197, 160, 89, 0.4);
    padding: 4px 12px;
    border-radius: 6px;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

/* Hover Effects (Flat 3D Lift) */
.map-region-crest:hover {
    transform: translate(-50%, -50%) scale(1.2) translateY(-10px);
    z-index: 260 !important;
}

.map-region-crest:hover img {
    filter: drop-shadow(0 25px 20px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 20px rgba(200, 155, 60, 0.6));
}

.map-region-crest:hover .map-region-label {
    opacity: 1;
    transform: translateY(0);
}

/* For the DM Editor Mode */
.map-region-crest.editing {
    cursor: grab;
}

.map-region-crest.dragging {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.1) translateY(-5px);
    opacity: 0.8;
}

.we-lib-item span {
    font-size: 11px;
    color: #ddd;
    text-align: center;
    pointer-events: none;
}

/* =========================================
   ENCOUNTER ARENA (MODERN RADIAL COMBAT)
   ========================================= */

.enc-board {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 500px;
    overflow: hidden;
    flex: 1;
}

.enc-board-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.6;
    z-index: 1;
    pointer-events: none;
}

.enc-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    display: none;
    /* hidden by default */
}

.enc-grid-overlay.active {
    display: block;
}

#encBoardTokens {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* Tokens on the Board */
.enc-board-token {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 3px solid #555;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.8), inset 0 0 10px rgba(0, 0, 0, 0.5);
    cursor: grab;
    transform: translate(-50%, -50%) perspective(500px) rotateX(15deg) rotateZ(0deg);
    /* Center on X, Y with slight 3D board tilt */
    transition: box-shadow 0.2s, filter 0.2s, transform 0.2s;
    z-index: 10;
}

.enc-board-token:hover {
    transform: translate(-50%, -50%) perspective(500px) rotateX(0deg) scale(1.1);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.9);
    z-index: 20 !important;
}

.enc-board-token:active {
    cursor: grabbing;
    transform: translate(-50%, -50%) perspective(500px) rotateX(10deg) scale(0.95);
}

.enc-board-token.enc-player {
    border-color: #1ea66d;
}

.enc-board-token.enc-npc {
    border-color: #e84057;
}

.enc-board-token.enc-active-turn {
    box-shadow: 0 0 25px 5px var(--gold);
    border-color: var(--gold);
    transform: translate(-50%, -50%) perspective(500px) rotateX(0deg) scale(1.15);
    z-index: 15;
}

.enc-board-token.enc-dead {
    filter: grayscale(100%) opacity(0.5);
    transform: translate(-50%, -50%) perspective(500px) rotateX(45deg);
    /* Lie flat when dead */
}

.enc-token-hp {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.enc-token-hp.hp-low {
    background: rgba(200, 0, 0, 0.8);
    color: #fff;
    border-color: red;
}

/* Measurement Ruler */
.enc-ruler-line {
    position: absolute;
    height: 4px;
    background: rgba(200, 155, 60, 0.8);
    transform-origin: 0 50%;
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

.enc-ruler-distance {
    position: absolute;
    transform: translate(-50%, -100%);
    background: rgba(0, 0, 0, 0.8);
    color: var(--gold);
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    pointer-events: none;
    z-index: 101;
    border: 1px solid var(--gold);
    white-space: nowrap;
}

/* Floating Combat Text */
.enc-floating-text {
    position: absolute;
    font-size: 20px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 4px #000, 0 0 8px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    z-index: 200;
    /* transition via JS (gsap) */
}

.enc-floating-text.dmg {
    color: #ff4444;
}

.enc-floating-text.heal {
    color: #44ff44;
}

.enc-floating-text.xp {
    color: #ffd700;
}

@keyframes floatTextAnim {
    0% {
        transform: translate(-50%, 0) scale(0.5);
        opacity: 0;
    }

    20% {
        transform: translate(-50%, -15px) scale(1.2);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -40px) scale(1);
        opacity: 0;
    }
}

/* Radial Menu */
.enc-radial-menu {
    position: absolute;
    width: 0;
    height: 0;
    z-index: 20;
}

.enc-radial-btn {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--gold);
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    cursor: pointer;
    box-shadow: none;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 26px;
    /* Bigger for emojis */
    font-weight: 900;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.9);
    transform-origin: center;
    z-index: 25;
}

/* Tooltip implementation */
.enc-radial-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: normal;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    border: 1px solid var(--gold);
    text-shadow: none;
    z-index: 100;
}

.enc-radial-btn:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.enc-radial-btn:hover {
    transform: scale(1.25);
    text-shadow: 0 4px 15px var(--gold);
}

.enc-radial-btn .ui-ico {
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.8));
}

.enc-radial-btn:hover .ui-ico {
    filter: drop-shadow(0 2px 2px rgba(255, 255, 255, 0.4));
}

.enc-radial-btn .ui-ico-damage {
    background-image: var(--ic-damage);
}

.enc-radial-btn .ui-ico-heal {
    background-image: var(--ic-heal);
}

.enc-radial-btn .ui-ico-delete {
    background-image: var(--ic-delete);
}

.enc-radial-btn.btn-dmg {
    border-color: var(--bad);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.9), inset 0 0 8px rgba(232, 64, 87, 0.2);
}

.enc-radial-btn.btn-dmg:hover {
    background: var(--bad);
    color: #fff;
    box-shadow: 0 0 15px var(--bad);
}

.enc-radial-btn.btn-heal {
    border-color: var(--ok);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.9), inset 0 0 8px rgba(30, 166, 109, 0.2);
}

.enc-radial-btn.btn-heal:hover {
    background: var(--ok);
    color: #fff;
    box-shadow: 0 0 15px var(--ok);
}

.enc-radial-btn.btn-del {
    border-color: #888;
}

.enc-radial-btn.btn-del:hover {
    background: #555;
    color: #fff;
}


/* Initiative Track (Bottom) */
.enc-init-track {
    display: flex;
    gap: 15px;
    padding: 10px 300px 10px 424px;
    background: rgba(0, 0, 0, 0.85);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    overflow: visible;
    min-height: 100px;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 200;
}

.enc-init-track::-webkit-scrollbar {
    height: 6px;
}

.enc-init-track::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.enc-init-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px 10px;
    border-radius: 8px;
    min-width: 140px;
    cursor: grab;
    transition: transform 0.2s, border-color 0.2s;
    user-select: none;
}

.enc-init-card:active {
    cursor: grabbing;
}

.enc-init-ghost {
    opacity: 0.4;
    background: #222;
    border: 1px dashed var(--gold);
}

.enc-init-card:hover {
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.enc-init-card.enc-active-turn {
    border-color: var(--gold);
    box-shadow: 0 0 10px rgba(200, 155, 60, 0.4);
}

.enc-init-card.enc-dead {
    opacity: 0.5;
    filter: grayscale(1);
}

.enc-init-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #444;
}

.enc-init-card.enc-player .enc-init-avatar {
    border-color: #1ea66d;
}

.enc-init-card.enc-npc .enc-init-avatar {
    border-color: #e84057;
}

.enc-init-name {
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
}

/* ========================================= */
/* ====== RADIAL & INITIATIVE HOTFIX ====== */
/* ========================================= */

#encBoardTokens {
    z-index: 100 !important;
    pointer-events: none !important;
}

/* Removed overriding positional CSS */
/* Sadece Avatar Gorunsun */
/* Sadece Avatar ve Isim Gorunsun - Premium Card Style */
#encInitiativeTrack {
    display: flex;
    padding: 10px 300px 10px 424px;
    align-items: center;
    justify-content: center;
    /* Negative margin to overlap cards slightly */
    gap: 0;
}

#encInitiativeTrack .enc-init-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    padding: 0 !important;
    /* Create fan overlap */
    margin: 0 -15px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Base rotation to tilt the card slightly outwards */
    transform-origin: bottom center;
    position: relative;
}

#encInitiativeTrack .enc-init-card-inner {
    position: relative;
    width: 110px;
    /* Increased from 90 */
    height: 160px;
    /* Increased from 130 */
    background: linear-gradient(135deg, rgba(15, 15, 15, 0.9) 0%, rgba(35, 35, 35, 0.95) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(218, 165, 32, 0.3);
    /* Subtle Gold */
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: grab;
    user-select: none;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(0, 0, 0, 0.5);
}

/* Fan positioning - Left side of active */
#encInitiativeTrack .enc-init-card:not(.enc-active-turn) {
    transform: rotate(-3deg) translateY(8px);
    z-index: 1;
}

#encInitiativeTrack .enc-init-card:active .enc-init-card-inner {
    cursor: grabbing;
    transform: scale(0.95);
}

#encInitiativeTrack .enc-init-card:hover {
    z-index: 20 !important;
    transform: rotate(0deg) translateY(-25px);
}

#encInitiativeTrack .enc-init-card:hover .enc-init-card-inner {
    box-shadow: 0 20px 40px rgba(218, 165, 32, 0.3), inset 0 0 15px rgba(218, 165, 32, 0.2);
    border-color: rgba(218, 165, 32, 0.8);
    transform: scale(1.1);
}

#encInitiativeTrack .enc-active-turn {
    transform: rotate(0deg) translateY(-15px) !important;
    z-index: 10 !important;
}

#encInitiativeTrack .enc-active-turn .enc-init-card-inner {
    border: 2px solid var(--gold);
    box-shadow: 0 0 30px rgba(218, 165, 32, 0.5), inset 0 0 10px rgba(218, 165, 32, 0.3);
    transform: scale(1.08);
    animation: enc-card-pulse 2s infinite ease-in-out;
}

@keyframes enc-card-pulse {
    0% {
        box-shadow: 0 0 20px rgba(218, 165, 32, 0.4);
    }

    50% {
        box-shadow: 0 0 40px rgba(218, 165, 32, 0.7);
    }

    100% {
        box-shadow: 0 0 20px rgba(218, 165, 32, 0.4);
    }
}

/* Card Header (Name) */
#encInitiativeTrack .enc-init-card-header {
    background: rgba(0, 0, 0, 0.4);
    color: var(--gold);
    font-size: 13px;
    font-weight: 900;
    text-align: center;
    padding: 8px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    font-family: var(--ui-font), sans-serif;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(218, 165, 32, 0.3);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* Card Sub-Header (HP Bar) */
#encInitiativeTrack .enc-init-card-sub {
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    height: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.enc-init-card-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #167d52, #1ea66d) !important;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
    transition: width 0.3s ease;
}

.enc-init-card-hp-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 4px #000;
}

.enc-init-avatar {
    flex: 1;
    width: 100%;
    object-fit: cover;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

/* Avatar Image handled by .enc-init-avatar above */

#encInitiativeTrack .enc-active-turn .enc-init-avatar {
    filter: brightness(1.2) contrast(1.1);
}

/* =========================================
   ACTION SLIDEBAR (Above Active Card)
   ========================================= */
.enc-action-slidebar {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    background: rgba(0, 0, 0, 0.92);
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    padding: 8px 10px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 50;
    min-width: 120px;
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    animation: slidebarAppear 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Small arrow pointing down from slidebar to card */
.enc-action-slidebar::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(255, 255, 255, 0.6);
}

@keyframes slidebarAppear {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(10px) scale(0.8);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

.enc-action-label {
    color: #ffd700;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
    white-space: nowrap;
}

.enc-action-wrap {
    display: flex;
    gap: 6px;
    align-items: center;
}

.enc-action-btn {
    width: 40px;
    height: 40px;
    background: rgba(30, 30, 30, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.enc-action-btn:hover {
    background: rgba(200, 155, 60, 0.3);
    border-color: #ffd700;
    transform: translateY(-4px) scale(1.15);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
}

.enc-action-btn:active {
    transform: translateY(-2px) scale(0.95);
}

.enc-action-icon {
    font-size: 22px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

/* Tooltip for action buttons */
.enc-action-btn::after {
    content: attr(title);
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: rgba(0, 0, 0, 0.95);
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 215, 0, 0.5);
    z-index: 100;
}

.enc-action-btn:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* =========================================
   VFX PROJECTILE STYLING
   ========================================= */
.vfx-projectile {
    position: absolute;
    pointer-events: none;
    z-index: 9999;
    font-size: 36px;
    filter: drop-shadow(0 0 12px rgba(255, 200, 0, 0.8));
    transition: none;
}

/* =========================================
   CUSTOM ATTACK MODAL
   ========================================= */
.enc-atk-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.enc-atk-modal {
    background: #0d0d0e;
    border: 2px solid rgba(200, 155, 60, 0.6);
    border-radius: 12px;
    padding: 20px 24px;
    min-width: 340px;
    max-width: 520px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 40px rgba(200, 155, 60, 0.15);
    animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modalPop {
    from {
        transform: scale(0.85) translateY(20px);
        opacity: 0;
    }

    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.enc-atk-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(200, 155, 60, 0.3);
}

.enc-atk-modal-title {
    font-size: 18px;
    font-weight: 900;
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.enc-atk-modal-close {
    font-size: 20px;
    color: #888;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
}

.enc-atk-modal-close:hover {
    color: #ff4444;
}

.enc-atk-modal-label {
    color: #aaa;
    font-size: 13px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Target Cards Grid */
.enc-atk-targets-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 16px;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
}

.enc-atk-target {
    width: 80px;
    background: #1a1a1d;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.enc-atk-target:hover {
    border-color: rgba(255, 215, 0, 0.5);
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}

.enc-atk-target.selected {
    border-color: #ffd700;
    border-width: 3px;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    transform: translateY(-4px) scale(1.08);
}

.enc-atk-target img {
    width: 100%;
    height: 60px;
    object-fit: cover;
    object-position: top center;
    background: #111;
    display: block;
}

.enc-atk-target-name {
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    padding: 3px 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-transform: uppercase;
    background: #000;
}

.enc-atk-target-hp {
    color: #ff6666;
    font-size: 10px;
    font-weight: bold;
    padding: 2px;
    background: rgba(200, 0, 0, 0.2);
    width: 100%;
}

/* Damage Row */
.enc-atk-dmg-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.enc-atk-dmg-row label {
    color: #ccc;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
}

.enc-atk-dmg-input {
    flex: 1;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid rgba(200, 155, 60, 0.4);
    background: #111;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    outline: none;
    transition: border-color 0.2s;
}

.enc-atk-dmg-input:focus {
    border-color: #ffd700;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

/* Action Buttons */
.enc-atk-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.enc-atk-btn-cancel {
    padding: 8px 18px;
    border-radius: 6px;
    border: 1px solid #555;
    background: transparent;
    color: #aaa;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.enc-atk-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.enc-atk-btn-confirm {
    padding: 8px 22px;
    border-radius: 6px;
    border: none;
    background: #d32f2f;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.enc-atk-btn-confirm:hover:not(:disabled) {
    background: #e53935;
    box-shadow: 0 4px 15px rgba(211, 47, 47, 0.5);
    transform: translateY(-1px);
}

.enc-atk-btn-confirm:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* NPC Detay Overflow Fix */
#npcDetail {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 8px;
}

#npcDetail::-webkit-scrollbar {
    width: 6px;
}
#npcDetail::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}
#npcDetail::-webkit-scrollbar-thumb {
    background: var(--gold, #c8b456);
    border-radius: 4px;
}
#npcDetail::-webkit-scrollbar-thumb:hover {
    background: #fff;
}