: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;
}

.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-bottom: 12px;
}

.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);
}

.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;
  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: 200px;
  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: -116px;
  margin-left: -22px;
  margin-right: -22px;
  width: calc(100% + 44px);
}

.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: 108px;
  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;
}