:root {
  /* Ülke bayrakları (bölgesel gösterge çiftleri) monospace / letter-spacing altında kırılabilir */
  --font-emoji-stack: "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", "Noto Color Emoji", emoji;
  --bg: #070910;
  --bg2: #12182a;
  --panel: rgba(18, 22, 32, 0.94);
  --border: rgba(110, 160, 230, 0.32);
  --text: #e8ecf4;
  --muted: rgba(232, 236, 244, 0.65);
  --hp: #e85555;
  --mp: #5599ff;
  --xp: #66cc88;
  --accent: #c9a227;
  --titlebar-bg: linear-gradient(180deg, rgba(14, 17, 28, 0.98) 0%, rgba(8, 10, 16, 0.94) 100%);
  --titlebar-edge: rgba(90, 140, 220, 0.18);
  --radius-panel: 14px;
  font-family: "Segoe UI", system-ui, sans-serif;
}

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

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(ellipse 80% 55% at 50% -8%, rgba(80, 120, 200, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse 120% 80% at 50% 0%, #1a2840 0%, var(--bg) 48%, #030408 100%);
  background-attachment: fixed;
  color: var(--text);
}

/**
 * Oyun sayfası (game.html): pencere kaydırılmaz; aksi halde canvas yukarı kayar ve oyuncu “kaybolur”.
 * Giriş (index) sayfası etkilenmez.
 */
html.game-body,
body.game-body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}

body.game-body #app.app-root {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-height: 100%;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

#app.app-root,
.app-root {
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 12px 18px;
  flex-wrap: wrap;
  padding: 10px max(18px, env(safe-area-inset-right)) 10px max(18px, env(safe-area-inset-left));
  padding-top: max(10px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--titlebar-edge);
  background: var(--titlebar-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 36px rgba(0, 0, 0, 0.42);
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

@supports (backdrop-filter: blur(8px)) {
  .titlebar {
    backdrop-filter: blur(14px) saturate(1.25);
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
  }
}

@media (max-width: 900px) {
  .titlebar {
    padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
    padding-top: max(8px, env(safe-area-inset-top));
    gap: 10px 12px;
  }
  .titlebar .logo {
    font-size: 1.08rem;
  }
}

@media (max-width: 520px) {
  .titlebar__version {
    display: none;
  }
  .save-hint {
    display: none;
  }
  .lang-toggle__btn {
    padding: 4px 7px;
    font-size: 0.62rem;
  }
}

.titlebar--sub-bronze {
  border-bottom-color: rgba(205, 127, 50, 0.45);
  box-shadow: 0 4px 22px rgba(205, 127, 50, 0.12);
}

.titlebar--sub-silver {
  border-bottom-color: rgba(180, 200, 220, 0.4);
  box-shadow: 0 4px 22px rgba(160, 190, 230, 0.14);
}

.titlebar--sub-gold {
  border-bottom-color: rgba(255, 213, 106, 0.5);
  box-shadow: 0 4px 26px rgba(255, 200, 80, 0.18);
}

.titlebar__brand {
  display: flex;
  align-items: center;
  gap: 12px 18px;
  flex-wrap: wrap;
  min-width: 0;
}

.titlebar .logo {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.15;
  color: #f0f4fc;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.45),
    0 0 28px rgba(120, 170, 255, 0.35);
}

.titlebar-server-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid rgba(110, 150, 210, 0.38);
  background: linear-gradient(165deg, rgba(22, 28, 44, 0.95), rgba(12, 16, 26, 0.92));
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(220, 230, 250, 0.94);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.titlebar-server-meta__time {
  color: rgba(200, 220, 255, 0.95);
}

.titlebar-server-meta__sep {
  opacity: 0.45;
  user-select: none;
}

.titlebar-server-meta__ping {
  color: rgba(160, 210, 180, 0.95);
}

/* Sağ üst: yama notları + dış bağlantılar — tek sıra */
.titlebar-side-links {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 0.72rem;
  color: rgba(190, 205, 235, 0.88);
  max-width: min(100%, 24rem);
  justify-content: flex-end;
}

.titlebar-side-links__sep {
  opacity: 0.35;
  user-select: none;
}

.titlebar-mini-btn {
  font: inherit;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(110, 165, 240, 0.4);
  background: linear-gradient(180deg, rgba(36, 48, 78, 0.95), rgba(18, 24, 40, 0.96));
  color: #e8f0ff;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.titlebar-mini-btn:hover {
  background: linear-gradient(180deg, rgba(48, 64, 100, 0.98), rgba(24, 32, 52, 0.98));
  border-color: rgba(170, 210, 255, 0.55);
  box-shadow: 0 4px 14px rgba(40, 90, 180, 0.22);
}

.titlebar-mini-btn:focus-visible {
  outline: 2px solid rgba(120, 200, 255, 0.9);
  outline-offset: 2px;
}

.titlebar-text-link {
  color: rgba(200, 215, 245, 0.9);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 600;
}

.titlebar-text-link:hover {
  text-decoration: underline;
  color: #fff;
}

.titlebar__trail {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-left: auto;
  flex: 1;
  flex-shrink: 1;
  min-width: 0;
}

@media (max-width: 720px) {
  .titlebar__trail {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
}

.titlebar__cluster {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  min-width: 0;
}

.titlebar__cluster--live {
  gap: 6px;
}

.titlebar__cluster--live:has(.titlebar__meta[hidden]):has(.titlebar-buffs[hidden]) {
  display: none;
}

.titlebar__cluster--links:has(.titlebar-side-links[hidden]) {
  display: none;
}

.titlebar__cluster--toolbar {
  padding: 5px 8px 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(100, 145, 215, 0.22);
  background: linear-gradient(180deg, rgba(16, 20, 32, 0.92), rgba(8, 10, 18, 0.88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  gap: 8px 10px;
}

.titlebar__meta {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(200, 215, 245, 0.88);
  font-variant-numeric: tabular-nums;
  max-width: min(100%, 28rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.titlebar__version {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(220, 170, 90, 0.38);
  background: linear-gradient(155deg, rgba(52, 38, 26, 0.92), rgba(18, 14, 10, 0.94));
  line-height: 1.2;
  user-select: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.titlebar__version-proto {
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 215, 160, 0.96);
}

.titlebar__version-num {
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(210, 225, 255, 0.92);
}

.titlebar__actions {
  display: flex;
  gap: 5px;
  align-items: center;
}

.titlebar-buffs {
  display: flex;
  align-items: center;
  gap: 6px;
}

.buff-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid rgba(120, 165, 220, 0.4);
  background: linear-gradient(180deg, rgba(28, 36, 52, 0.95), rgba(14, 18, 28, 0.94));
  color: #e8f0ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.buff-chip--xp {
  border-color: rgba(90, 170, 255, 0.45);
  color: #bde5ff;
}

.buff-chip--gold {
  border-color: rgba(255, 210, 120, 0.45);
  color: #ffe3a4;
}

.titlebar-btn {
  min-width: 36px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(110, 155, 220, 0.38);
  background: linear-gradient(180deg, rgba(42, 56, 92, 0.88), rgba(22, 30, 52, 0.92));
  color: var(--text);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.titlebar-btn:hover {
  background: linear-gradient(180deg, rgba(58, 78, 120, 0.92), rgba(30, 42, 72, 0.95));
  border-color: rgba(170, 205, 255, 0.48);
  box-shadow: 0 4px 12px rgba(30, 70, 160, 0.2);
}

.titlebar-btn--icon {
  min-width: 34px;
  padding: 6px 9px;
  font-size: 1.02rem;
  line-height: 1;
}

.lang-toggle--titlebar {
  border-radius: 999px;
  border-color: rgba(100, 150, 210, 0.32);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.lang-toggle--titlebar .lang-toggle__btn {
  padding: 5px 9px;
  font-size: 0.64rem;
}

.titlebar__cluster--toolbar .save-hint {
  padding-right: 4px;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(40, 60, 100, 0.2);
  border: 1px solid rgba(120, 160, 255, 0.18);
}

.stat-summary {
  font-size: 0.78rem;
  flex: 1;
  min-width: 0;
}

.stat-open-btn {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(50, 75, 130, 0.65);
  color: var(--text);
  cursor: pointer;
}

.stat-open-btn:hover:not(:disabled) {
  background: rgba(80, 120, 200, 0.4);
}

.stat-open-btn.is-disabled,
.stat-open-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.game-menu-card .game-menu-section {
  margin: 14px 0 18px;
  text-align: left;
}

.game-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}

.game-menu-section--card {
  margin: 0 !important;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(120, 150, 210, 0.22);
  background: rgba(10, 16, 28, 0.55);
}

.game-menu-section--span2 {
  grid-column: 1 / -1;
}

.game-menu-section h3 {
  margin: 0 0 10px;
  font-size: 0.95rem;
  color: var(--accent);
}

.game-settings-subhead {
  margin: 14px 0 8px;
  font-size: 0.92rem;
  color: var(--accent);
}

.game-settings-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}

.game-settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.game-settings-row__label {
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(210, 220, 240, 0.9);
  min-width: 6.5rem;
}

.game-settings-row input[type="range"] {
  flex: 1 1 120px;
  max-width: 260px;
  min-width: 100px;
  accent-color: #7ab0ff;
}

.game-settings-row__value {
  flex: 0 0 auto;
  min-width: 2.75rem;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.game-settings-select-label {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.game-settings-select-label span:first-child {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(210, 220, 240, 0.9);
}

.game-settings-select {
  width: 100%;
  max-width: 320px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(120, 160, 220, 0.45);
  background: rgba(6, 10, 20, 0.92);
  color: var(--text);
  font-size: 0.88rem;
}

.game-settings-hint {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.4;
}

.card--quest-board .quest-board-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(52vh, 420px);
  overflow-y: auto;
  margin: 10px 0 14px;
  padding-right: 4px;
}

.quest-board-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  text-align: left;
  align-items: start;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(100, 140, 200, 0.35);
  background: rgba(8, 12, 22, 0.65);
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.quest-board-row:hover {
  border-color: rgba(140, 180, 255, 0.55);
  background: rgba(14, 20, 36, 0.75);
}

.quest-board-row__title {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--accent);
}

.quest-board-row__desc {
  font-size: 0.82rem;
  line-height: 1.35;
}

.quest-board-row__meta {
  font-size: 0.78rem;
}

.card--quest-board .quest-board-status {
  margin-top: 0;
}

.game-menu-lead {
  margin: 0 0 8px;
  font-size: 0.88rem;
}

@media (max-width: 720px) {
  .game-menu-grid {
    grid-template-columns: 1fr;
  }
}

.premium-section {
  text-align: left;
  padding: 16px 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(140, 120, 90, 0.35);
  background: linear-gradient(165deg, rgba(40, 32, 56, 0.45), rgba(12, 14, 22, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.06), 0 12px 40px rgba(0, 0, 0, 0.35);
}

.premium-section__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.premium-section__title {
  margin: 0 0 4px;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, #ffe6b0, #c9a050, #ffe6b0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.game-menu-section.premium-section .premium-section__title {
  font-size: 1.05rem;
  margin: 0 0 4px;
}

.premium-section__sub {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
  max-width: 42ch;
}

.premium-section__badge {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 200, 120, 0.35);
  background: rgba(0, 0, 0, 0.35);
}

.premium-section__badge--bronze {
  color: #e8b06a;
  border-color: rgba(205, 127, 50, 0.55);
  box-shadow: 0 0 16px rgba(205, 127, 50, 0.2);
}

.premium-section__badge--silver {
  color: #dce0ea;
  border-color: rgba(180, 200, 220, 0.45);
  box-shadow: 0 0 16px rgba(160, 190, 230, 0.15);
}

.premium-section__badge--gold {
  color: #ffe8a0;
  border-color: rgba(255, 220, 140, 0.55);
  box-shadow: 0 0 20px rgba(255, 200, 80, 0.25);
}

.premium-section--pulse {
  animation: premiumSectionPulse 1.1s ease-out 1;
}

@keyframes premiumSectionPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 200, 100, 0.55);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 200, 100, 0);
  }
}

.card--premium-teleport {
  max-width: min(920px, 96vw);
  max-height: min(88vh, 900px);
  overflow: auto;
}

.premium-teleport__lead {
  margin: 0 0 8px;
  font-size: 0.82rem;
  line-height: 1.45;
  max-width: 62ch;
}

.premium-teleport-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.premium-teleport-card {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 200, 120, 0.22);
  background: rgba(0, 0, 0, 0.28);
}

.premium-teleport-card__title {
  margin: 0 0 6px;
  font-size: 0.95rem;
}

.premium-teleport-card__desc {
  margin: 0 0 10px;
  font-size: 0.78rem;
  line-height: 1.4;
}

.premium-teleport-card__go {
  width: 100%;
}

.premium-status {
  font-size: 0.86rem;
  line-height: 1.45;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(80, 90, 110, 0.45);
  background: rgba(0, 0, 0, 0.25);
}

.premium-status--active {
  border-color: rgba(160, 200, 255, 0.25);
  background: linear-gradient(135deg, rgba(40, 60, 100, 0.25), rgba(0, 0, 0, 0.2));
}

.btn-daily {
  width: 100%;
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(200, 160, 80, 0.45);
  background: linear-gradient(180deg, rgba(80, 60, 30, 0.5), rgba(40, 32, 20, 0.75));
  color: #f0d898;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.88rem;
}

.btn-daily--claim {
  border-color: rgba(120, 200, 140, 0.45);
  background: linear-gradient(180deg, rgba(40, 80, 55, 0.55), rgba(30, 40, 35, 0.85));
  color: #c8f0d0;
}

.btn-daily:hover:not(:disabled) {
  filter: brightness(1.12);
}

.btn-daily:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.premium-packs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.premium-packs--grid {
  margin-top: 4px;
}

@media (min-width: 520px) {
  .premium-packs {
    grid-template-columns: repeat(3, 1fr);
  }
}

.premium-pack {
  --tier-color: #c9a050;
  padding: 12px 12px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--tier-color) 55%, rgba(40, 40, 50, 0.8));
  background: linear-gradient(160deg, rgba(0, 0, 0, 0.35), rgba(20, 20, 30, 0.5));
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}

.premium-pack:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

.premium-pack--bronze {
  border-color: rgba(205, 127, 50, 0.45);
  box-shadow: inset 0 0 24px rgba(205, 127, 50, 0.08);
}

.premium-pack--silver {
  border-color: rgba(160, 180, 210, 0.4);
  box-shadow: inset 0 0 24px rgba(160, 190, 230, 0.08);
}

.premium-pack--gold {
  border-color: rgba(255, 200, 80, 0.45);
  box-shadow: inset 0 0 28px rgba(255, 200, 80, 0.1);
}

.premium-pack--current {
  outline: 2px solid color-mix(in srgb, var(--tier-color) 55%, transparent);
  outline-offset: 0;
}

.premium-pack__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}

.premium-pack__name {
  font-size: 1rem;
  color: var(--tier-color);
  text-shadow: 0 0 10px color-mix(in srgb, var(--tier-color) 55%, transparent);
}

.premium-pack__cost {
  font-size: 0.78rem;
  color: var(--muted);
}

.premium-pack__effects {
  font-size: 0.78rem;
  margin: 0 0 8px;
  line-height: 1.35;
  color: #c8d0e0;
}

.premium-pack__desc {
  font-size: 0.75rem;
  margin: 0 0 8px;
  line-height: 1.35;
}

.premium-pack .premium-sub-btn {
  width: 100%;
}

.premium-pack .premium-sub-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.game-menu-card .auto-hp-label {
  display: flex;
  margin-bottom: 8px;
}

.card--help .help-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  text-align: left;
}

.card--help .help-list li {
  margin-bottom: 8px;
  font-size: 0.88rem;
  line-height: 1.45;
}

.stat-allocate--popup {
  margin-top: 8px;
}

.save-hint {
  font-size: 0.75rem;
  color: var(--muted);
}

.game-viewport {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

.game-viewport::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 0;
}

.game-viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 70% 45% at 50% 0%, rgba(60, 100, 180, 0.07) 0%, transparent 62%);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.lang-toggle {
  display: inline-flex;
  border-radius: 8px;
  border: 1px solid rgba(120, 160, 220, 0.35);
  overflow: hidden;
  flex-shrink: 0;
}

.lang-toggle__btn {
  padding: 5px 10px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  border: none;
  background: rgba(20, 26, 40, 0.88);
  color: rgba(200, 210, 230, 0.88);
  cursor: pointer;
  line-height: 1.2;
}

.lang-toggle__btn--active {
  background: rgba(70, 110, 180, 0.58);
  color: #f0f4ff;
}

.lang-toggle__btn:hover {
  filter: brightness(1.08);
}

.login-header .lang-toggle {
  margin-top: 10px;
}

.logo {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  text-shadow: 0 0 20px rgba(100, 160, 255, 0.35);
}

.topbar__meta {
  font-size: 0.85rem;
  color: var(--muted);
}

.layout {
  display: grid;
  grid-template-columns: 220px 1fr 200px;
  gap: 12px;
  align-items: start;
}

@media (max-width: 1100px) {
  .layout {
    grid-template-columns: 1fr;
  }
  .sidebar--help {
    order: 3;
  }
}

.glass {
  background: linear-gradient(165deg, rgba(24, 28, 40, 0.96), rgba(14, 17, 26, 0.94));
  border: 1px solid rgba(100, 150, 220, 0.28);
  border-radius: var(--radius-panel);
  padding: 12px 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 36px rgba(0, 0, 0, 0.48);
}

@supports (backdrop-filter: blur(6px)) {
  .glass {
    backdrop-filter: blur(10px) saturate(1.15);
    -webkit-backdrop-filter: blur(10px) saturate(1.15);
  }
}

.sidebar h2 {
  margin: 0 0 8px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.bars label {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  margin-top: 8px;
  color: var(--muted);
}

.bar {
  height: 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
  margin-top: 4px;
}

.bar__fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.2s ease;
}

.bar__fill--hp {
  background: linear-gradient(90deg, #a33, var(--hp));
}

.bar__fill--mp {
  background: linear-gradient(90deg, #336, var(--mp));
}

.bar__fill--xp {
  background: linear-gradient(90deg, #363, var(--xp));
}

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.82rem;
}

.stat-grid--detailed {
  display: flex;
  flex-direction: column;
  gap: 8px;
  grid-template-columns: unset;
}

.stat-grid--detailed .stat-row--alloc {
  grid-template-columns: minmax(72px, 92px) minmax(0, 1fr) auto;
}

.stat-grid:not(.stat-grid--detailed) span {
  color: var(--muted);
}

.stat-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(100, 140, 200, 0.14);
  font-size: 0.82rem;
}

.stat-row--derived {
  grid-template-columns: 40px minmax(0, 1fr);
  opacity: 0.95;
}

.stat-row__abbr {
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(180, 200, 230, 0.85);
}

.stat-row__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-row__main--fill {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.stat-row__num {
  font-weight: 800;
  font-size: 1rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.stat-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.stat-tag {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1.2;
}

.stat-tag--equip {
  background: rgba(60, 120, 80, 0.35);
  border: 1px solid rgba(120, 200, 140, 0.35);
  color: #a8e8b8;
}

.stat-tag--manual {
  background: rgba(120, 90, 40, 0.4);
  border: 1px solid rgba(220, 180, 90, 0.35);
  color: #ffd89a;
}

.stat-priority-legend {
  margin: 0 0 10px;
  font-size: 0.72rem;
  line-height: 1.4;
  max-width: 52ch;
}

.stat-row__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.stat-priority-badge {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.15;
  white-space: nowrap;
}

.stat-priority-badge--pri {
  border: 1px solid rgba(120, 220, 160, 0.45);
  background: rgba(40, 120, 80, 0.35);
  color: #b8f0d0;
}

.stat-priority-badge--sec {
  border: 1px solid rgba(220, 170, 90, 0.4);
  background: rgba(120, 80, 30, 0.35);
  color: #ffd8a0;
}

.stat-priority-badge--low {
  border: 1px solid rgba(100, 140, 200, 0.3);
  background: rgba(30, 50, 90, 0.35);
  color: rgba(180, 200, 240, 0.75);
}

/* Sınıf + öncelik: sol kenar ve zemin (stat dağıtımı) */
.stat-grid--class-warrior .stat-row--alloc.stat-row--stat-pri {
  border-color: rgba(220, 120, 110, 0.55);
  background: linear-gradient(105deg, rgba(200, 90, 80, 0.26), rgba(8, 10, 18, 0.42));
  box-shadow: inset 3px 0 0 rgba(235, 140, 120, 0.85);
}
.stat-grid--class-warrior .stat-row--alloc.stat-row--stat-sec {
  border-color: rgba(200, 160, 100, 0.4);
  background: linear-gradient(105deg, rgba(180, 130, 60, 0.16), rgba(8, 10, 18, 0.42));
  box-shadow: inset 3px 0 0 rgba(210, 160, 90, 0.55);
}
.stat-grid--class-warrior .stat-row--alloc.stat-row--stat-low {
  border-color: rgba(90, 110, 150, 0.28);
  background: rgba(6, 10, 18, 0.45);
  box-shadow: inset 3px 0 0 rgba(80, 100, 140, 0.35);
  opacity: 0.9;
}

.stat-grid--class-healer .stat-row--alloc.stat-row--stat-pri {
  border-color: rgba(90, 210, 160, 0.5);
  background: linear-gradient(105deg, rgba(50, 160, 120, 0.24), rgba(8, 10, 18, 0.42));
  box-shadow: inset 3px 0 0 rgba(100, 230, 180, 0.75);
}
.stat-grid--class-healer .stat-row--alloc.stat-row--stat-sec {
  border-color: rgba(140, 190, 130, 0.4);
  background: linear-gradient(105deg, rgba(80, 140, 90, 0.14), rgba(8, 10, 18, 0.42));
  box-shadow: inset 3px 0 0 rgba(130, 190, 120, 0.5);
}
.stat-grid--class-healer .stat-row--alloc.stat-row--stat-low {
  border-color: rgba(90, 110, 150, 0.28);
  background: rgba(6, 10, 18, 0.45);
  box-shadow: inset 3px 0 0 rgba(80, 100, 140, 0.35);
  opacity: 0.9;
}

.stat-grid--class-mage .stat-row--alloc.stat-row--stat-pri {
  border-color: rgba(160, 120, 240, 0.55);
  background: linear-gradient(105deg, rgba(120, 80, 200, 0.26), rgba(8, 10, 18, 0.42));
  box-shadow: inset 3px 0 0 rgba(180, 140, 255, 0.8);
}
.stat-grid--class-mage .stat-row--alloc.stat-row--stat-sec {
  border-color: rgba(120, 180, 220, 0.4);
  background: linear-gradient(105deg, rgba(70, 120, 180, 0.16), rgba(8, 10, 18, 0.42));
  box-shadow: inset 3px 0 0 rgba(100, 170, 220, 0.5);
}
.stat-grid--class-mage .stat-row--alloc.stat-row--stat-low {
  border-color: rgba(90, 110, 150, 0.28);
  background: rgba(6, 10, 18, 0.45);
  box-shadow: inset 3px 0 0 rgba(80, 100, 140, 0.35);
  opacity: 0.9;
}

.stat-grid--class-archer .stat-row--alloc.stat-row--stat-pri {
  border-color: rgba(100, 200, 130, 0.55);
  background: linear-gradient(105deg, rgba(60, 150, 100, 0.24), rgba(8, 10, 18, 0.42));
  box-shadow: inset 3px 0 0 rgba(120, 220, 150, 0.75);
}
.stat-grid--class-archer .stat-row--alloc.stat-row--stat-sec {
  border-color: rgba(160, 190, 120, 0.4);
  background: linear-gradient(105deg, rgba(120, 150, 70, 0.14), rgba(8, 10, 18, 0.42));
  box-shadow: inset 3px 0 0 rgba(170, 200, 100, 0.45);
}
.stat-grid--class-archer .stat-row--alloc.stat-row--stat-low {
  border-color: rgba(90, 110, 150, 0.28);
  background: rgba(6, 10, 18, 0.45);
  box-shadow: inset 3px 0 0 rgba(80, 100, 140, 0.35);
  opacity: 0.9;
}

.stat-grid--class-assassin .stat-row--alloc.stat-row--stat-pri {
  border-color: rgba(180, 100, 220, 0.55);
  background: linear-gradient(105deg, rgba(140, 70, 180, 0.24), rgba(8, 10, 18, 0.42));
  box-shadow: inset 3px 0 0 rgba(200, 120, 240, 0.75);
}
.stat-grid--class-assassin .stat-row--alloc.stat-row--stat-sec {
  border-color: rgba(200, 130, 180, 0.4);
  background: linear-gradient(105deg, rgba(150, 70, 130, 0.14), rgba(8, 10, 18, 0.42));
  box-shadow: inset 3px 0 0 rgba(210, 140, 180, 0.45);
}
.stat-grid--class-assassin .stat-row--alloc.stat-row--stat-low {
  border-color: rgba(90, 110, 150, 0.28);
  background: rgba(6, 10, 18, 0.45);
  box-shadow: inset 3px 0 0 rgba(80, 100, 140, 0.35);
  opacity: 0.9;
}

/* Rozetleri sınıf paletine yaklaştır */
.stat-grid--class-warrior .stat-priority-badge--pri {
  border-color: rgba(235, 150, 130, 0.5);
  background: rgba(160, 60, 50, 0.45);
  color: #ffd0c8;
}
.stat-grid--class-healer .stat-priority-badge--pri {
  border-color: rgba(120, 230, 190, 0.45);
  background: rgba(30, 120, 90, 0.45);
  color: #c8fff0;
}
.stat-grid--class-mage .stat-priority-badge--pri {
  border-color: rgba(190, 150, 255, 0.5);
  background: rgba(90, 50, 160, 0.45);
  color: #e8d8ff;
}
.stat-grid--class-archer .stat-priority-badge--pri {
  border-color: rgba(130, 220, 160, 0.5);
  background: rgba(40, 120, 70, 0.45);
  color: #d0ffd8;
}
.stat-grid--class-assassin .stat-priority-badge--pri {
  border-color: rgba(210, 120, 250, 0.5);
  background: rgba(120, 40, 160, 0.45);
  color: #f5d0ff;
}

.stat-row--derived.stat-row--derived-em {
  border-color: rgba(255, 200, 120, 0.45);
  background: linear-gradient(105deg, rgba(200, 140, 60, 0.18), rgba(6, 8, 14, 0.5));
  box-shadow: inset 3px 0 0 rgba(255, 190, 100, 0.55);
}
.stat-row--derived.stat-row--derived-sec-hl {
  border-color: rgba(140, 200, 160, 0.35);
  background: linear-gradient(105deg, rgba(60, 120, 90, 0.12), rgba(6, 8, 14, 0.45));
  box-shadow: inset 3px 0 0 rgba(120, 200, 150, 0.4);
}

.stat-row__hint {
  font-size: 0.68rem;
  font-weight: 600;
}

.stat-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}

.btn-stat-mini {
  min-width: 36px;
  padding: 5px 7px;
  font-size: 0.68rem;
  font-weight: 800;
  border-radius: 8px;
  border: 1px solid rgba(140, 180, 240, 0.35);
  background: linear-gradient(180deg, rgba(45, 58, 88, 0.95), rgba(28, 34, 52, 0.98));
  color: #e8f0ff;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.btn-stat-mini:hover:not(:disabled) {
  border-color: rgba(180, 210, 255, 0.55);
  background: linear-gradient(180deg, rgba(55, 72, 110, 0.98), rgba(32, 40, 62, 0.99));
}

.btn-stat-mini:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.btn-stat-mini--max {
  min-width: 48px;
  border-color: rgba(200, 160, 80, 0.45);
  color: #ffe8c0;
}

.stat-allocate__pool {
  font-size: 0.88rem;
  margin-bottom: 6px;
}

.stat-allocate__pool strong {
  color: var(--accent);
  font-size: 1.05em;
}

.stat-allocate__manual {
  font-size: 0.78rem;
  color: rgba(200, 210, 230, 0.88);
  margin-bottom: 8px;
  line-height: 1.4;
}

.stat-bulk-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(20, 30, 50, 0.45);
  border: 1px solid rgba(100, 140, 200, 0.2);
}

.stat-bulk-row__lbl {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.stat-bulk-select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(120, 160, 220, 0.35);
  background: rgba(12, 16, 28, 0.9);
  color: var(--text);
  font-size: 0.82rem;
}

.stat-bulk-input {
  width: 72px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(120, 160, 220, 0.35);
  background: rgba(12, 16, 28, 0.9);
  color: var(--text);
  font-size: 0.82rem;
}

.btn-stat {
  padding: 7px 14px;
  font-size: 0.78rem;
  font-weight: 800;
  border-radius: 8px;
  border: 1px solid rgba(140, 190, 255, 0.4);
  background: linear-gradient(180deg, rgba(50, 70, 120, 0.95), rgba(30, 40, 72, 0.98));
  color: #f0f6ff;
  cursor: pointer;
}

.btn-stat:hover {
  filter: brightness(1.08);
}

.stat-allocate__reset {
  width: 100%;
  margin-top: 4px;
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid rgba(200, 120, 120, 0.45);
  background: rgba(60, 30, 30, 0.35);
  color: #ffb0a8;
  cursor: pointer;
  transition: background 0.15s ease;
}

.stat-allocate__reset:hover {
  background: rgba(90, 40, 40, 0.5);
}

@media (max-width: 520px) {
  .stat-row {
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .stat-row__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .stat-row--derived {
    grid-template-columns: 36px minmax(0, 1fr);
  }
}

.hud-sub {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 6px 0 2px;
  line-height: 1.35;
}

#hud-guild {
  font-family: "Segoe UI", var(--font-emoji-stack), system-ui, sans-serif;
}

.auto-hp-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 8px;
  cursor: pointer;
}

.auto-hp-label input {
  cursor: pointer;
}

.card--auto {
  max-width: min(460px, 96vw);
}

.hud-auto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  row-gap: 6px;
}

.hud-auto-loot-filter {
  margin: 10px 0 4px;
  display: grid;
  gap: 6px;
}

.hud-auto-loot-filter__label {
  font-size: 0.78rem;
  color: var(--muted);
}

.hud-auto-loot-filter__select {
  width: 100%;
  max-width: 100%;
  font-size: 0.85rem;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(12, 16, 28, 0.92);
  color: var(--text);
}

.hud-auto-loot-filter__hint {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
}

.hud-auto-thresholds {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@media (max-width: 560px) {
  .hud-auto-grid {
    grid-template-columns: 1fr;
  }
}

.hud-auto-threshold {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--muted);
}

.hud-auto-threshold input[type="range"] {
  width: 100%;
}

.hud-auto-skills {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(120, 140, 170, 0.25);
}

.hud-auto-skills h3 {
  margin: 0 0 4px;
  font-size: 0.92rem;
}

.hud-auto-skills__list {
  display: grid;
  grid-template-columns: 1fr;
}

.gold {
  margin-top: 10px;
  font-weight: 600;
  color: var(--accent);
}

.stage {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
  min-width: 0;
  margin: 10px;
  margin-bottom: max(10px, env(safe-area-inset-bottom));
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(90, 130, 200, 0.26);
  background:
    radial-gradient(ellipse 90% 55% at 50% -5%, rgba(50, 80, 140, 0.22) 0%, transparent 55%),
    linear-gradient(168deg, #0b101c 0%, #05070c 48%, #0a1020 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 16px 48px rgba(0, 0, 0, 0.52);
  z-index: 1;
}

.game-canvas-shell {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

@media (max-width: 900px) {
  .stage {
    margin: 6px;
    margin-bottom: max(6px, env(safe-area-inset-bottom));
    border-radius: 12px;
  }
}

/* Mini harita + Eventler sütunu — patron / görevler haritanın solunda */
.minimap-events-cluster {
  position: absolute;
  left: auto;
  right: 12px;
  top: 12px;
  z-index: 20;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 10px;
  max-width: min(calc(200px + 240px + 20px), 90vw);
  pointer-events: none;
}

/* Dar genişlik: harita + eventler yan yana çok yer kaplıyor → dikey yığılı, merkezdeki hedef/grup ile çakışma azalır */
@media (max-width: 1040px) {
  .minimap-events-cluster {
    flex-direction: column;
    align-items: flex-end;
    row-gap: 8px;
    max-width: min(270px, 92vw);
  }
}

.events-dock {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(240px, 46vw);
  padding: 8px 10px 10px;
  border-radius: 10px;
  pointer-events: auto;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  align-self: flex-start;
}

.events-dock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(120, 160, 220, 0.22);
  cursor: grab;
  user-select: none;
}

.events-dock__head:active {
  cursor: grabbing;
}

.events-dock__title {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(180, 200, 255, 0.9);
}

.events-dock__collapse {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(120, 160, 220, 0.35);
  background: rgba(22, 30, 48, 0.75);
  color: #c8d8f0;
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
}

.events-dock__collapse:hover {
  background: rgba(50, 70, 110, 0.65);
  border-color: rgba(160, 200, 255, 0.45);
}

.events-dock--collapsed .events-dock__body {
  display: none !important;
}

.events-dock--collapsed .events-dock__head {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.events-dock__timed {
  margin: 0 0 8px;
  font-size: 0.68rem;
  line-height: 1.35;
  color: rgba(200, 210, 230, 0.88);
}

.minimap-events-cluster .minimap-stack {
  flex: 0 0 auto;
}

.minimap-stack {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  z-index: 1;
  padding: 8px 10px 10px;
  border-radius: 10px;
  max-width: min(200px, 42vw);
  pointer-events: auto;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.minimap-stack.minimap-stack--pvp-arena {
  max-width: min(280px, 58vw);
  border: 1px solid rgba(210, 140, 90, 0.4);
  background: linear-gradient(165deg, rgba(26, 18, 14, 0.94) 0%, rgba(10, 12, 22, 0.96) 100%);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 170, 90, 0.12);
}

.minimap-stack.minimap-stack--pvp-arena .minimap-stack__head {
  border-bottom-color: rgba(200, 130, 90, 0.38);
}

.minimap-stack.minimap-stack--pvp-arena .minimap-stack__collapse {
  border-color: rgba(200, 130, 90, 0.4);
  background: rgba(36, 22, 18, 0.82);
  color: #f0d8c8;
}

.minimap-events-cluster .world-boss-hud {
  position: relative;
  right: auto;
  top: auto;
  transform: none;
  max-width: none;
  width: 100%;
  margin: 0 0 8px;
  text-align: left;
}

.minimap-events-cluster .quest-tracker {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 8px 0 0;
}

.minimap-events-cluster .daily-quest-strip {
  max-width: none;
  margin-bottom: 0;
}

.minimap-stack__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(120, 160, 220, 0.22);
  user-select: none;
}

.minimap-stack__collapse {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(120, 160, 220, 0.35);
  background: rgba(22, 30, 48, 0.75);
  color: #c8d8f0;
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
}

.minimap-stack__collapse:hover {
  background: rgba(50, 70, 110, 0.65);
  border-color: rgba(160, 200, 255, 0.45);
}

.minimap-stack--collapsed .minimap-stack__body {
  display: none !important;
}

.minimap-stack--collapsed .minimap-stack__head {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.minimap-stack__title {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(200, 210, 230, 0.75);
}

#minimap-canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid rgba(100, 140, 200, 0.22);
  background: #000;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.minimap-stack__foot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  font-size: 0.72rem;
  line-height: 1.35;
}

.minimap-stack__map {
  font-weight: 600;
  color: var(--accent);
}

.minimap-stack__reg {
  color: var(--muted);
}

.minimap-stack__legend {
  margin: 8px 0 0;
  font-size: 0.62rem;
  color: rgba(180, 190, 210, 0.55);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.minimap-legend__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 3px;
  vertical-align: middle;
}

.minimap-legend__dot--you {
  background: #ffdd66;
  box-shadow: 0 0 6px #ffdd66;
}

.minimap-legend__dot--portal {
  background: #ffdc88;
}

.minimap-legend__dot--view {
  border: 1px solid rgba(120, 200, 255, 0.9);
  background: transparent;
  width: 8px;
  height: 8px;
  border-radius: 1px;
}

.minimap-legend__dot--mob {
  background: #ff9850;
  box-shadow: 0 0 3px rgba(255, 150, 80, 0.6);
}

.minimap-legend__dot--boss {
  background: #ff5050;
  box-shadow: 0 0 4px rgba(255, 80, 80, 0.8);
  border: 1px solid rgba(255, 210, 120, 0.85);
}

.minimap-stack__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.68rem;
  color: rgba(180, 195, 220, 0.85);
  cursor: pointer;
  user-select: none;
  pointer-events: auto;
}

.minimap-stack .minimap-quick-wrap {
  pointer-events: auto;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.minimap-quick-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.minimap-quick-wrap__label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(220, 190, 130, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  user-select: none;
}

.hud-quick-menu-btn {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(200, 160, 80, 0.55);
  background: linear-gradient(165deg, rgba(32, 24, 14, 0.95), rgba(14, 12, 10, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  color: #e8c87a;
  font-size: 1.25rem;
  line-height: 1;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.hud-quick-menu-btn:hover {
  border-color: rgba(255, 210, 140, 0.75);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 6px 18px rgba(0, 0, 0, 0.5);
}

.hud-quick-menu-btn:active {
  transform: translateY(0);
}

.hud-quick-menu-btn--alert {
  border-color: rgba(255, 120, 90, 0.75);
  box-shadow:
    0 0 0 1px rgba(255, 100, 80, 0.35),
    0 4px 18px rgba(255, 80, 40, 0.2);
}

.hud-quick-menu-btn__badge[hidden] {
  display: none !important;
}

.hud-quick-menu-btn--settings .hud-quick-menu-btn__glyph {
  font-size: 1.12rem;
  opacity: 0.95;
}

.hud-quick-menu-btn__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(145deg, #ff5540, #c41e12);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.card--quick-menu {
  max-width: min(560px, 96vw);
  width: 100%;
  text-align: left;
  background:
    radial-gradient(ellipse 95% 55% at 50% -15%, rgba(120, 160, 240, 0.18), transparent 50%),
    linear-gradient(168deg, rgba(16, 20, 34, 0.98), rgba(8, 10, 18, 0.99));
  border: 1px solid rgba(130, 170, 230, 0.38);
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  border-radius: 14px;
}

.quick-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(100, 140, 200, 0.22);
}

.quick-menu-head h2 {
  margin: 0;
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #eef4ff;
}

.quick-menu-lead {
  margin: 0 0 16px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(210, 220, 240, 0.88);
}

.quick-menu-lead .kbd-hint {
  margin: 0 2px;
}

.quick-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
  gap: 12px;
}

.quick-menu-foot {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(120, 160, 220, 0.22);
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(150, 180, 220, 0.75);
}

.quick-menu-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 12px 10px;
  border-radius: 12px;
  border: 1px solid rgba(100, 140, 200, 0.28);
  background: linear-gradient(155deg, rgba(26, 32, 48, 0.92), rgba(12, 16, 26, 0.9));
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.12s ease;
}

.quick-menu-tile:hover {
  border-color: rgba(180, 210, 255, 0.45);
  background: linear-gradient(155deg, rgba(34, 42, 62, 0.95), rgba(16, 20, 34, 0.92));
  transform: translateY(-2px);
}

.quick-menu-tile:active {
  transform: translateY(0);
}

.quick-menu-tile__icon {
  font-size: 1.35rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

.quick-menu-tile__label {
  font-size: 0.88rem;
  font-weight: 700;
  color: #e8eef8;
  line-height: 1.25;
}

.quick-menu-tile__sub {
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(180, 195, 220, 0.82);
}

.quick-menu-tile__keys {
  margin-top: 2px;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(140, 160, 200, 0.75);
}

.quick-menu-tile--alert {
  border-color: rgba(255, 130, 90, 0.65) !important;
  box-shadow:
    0 0 0 1px rgba(255, 100, 70, 0.35),
    0 6px 20px rgba(255, 60, 40, 0.12);
}

.quick-menu-tile__alert[hidden] {
  display: none !important;
}

.quick-menu-tile__alert {
  position: absolute;
  top: 6px;
  right: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(145deg, #ff5540, #c41e12);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 480px) {
  .quick-menu-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.minimap-stack__toggle input {
  cursor: pointer;
  accent-color: #c9a227;
}

.minimap-legend__sq {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 3px;
  vertical-align: middle;
  border-radius: 1px;
}

.minimap-legend__sq--chest {
  background: #c8963c;
}

.minimap-legend__dia {
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 5px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 7px solid rgba(70, 210, 255, 0.95);
}

#game-canvas {
  display: block;
  flex-shrink: 0;
  /* Boyutlar main.js layoutGameCanvas ile piksel olarak verilir (iç buffer = sabit çözünürlük) */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.card--ranks {
  max-width: min(720px, 96vw);
  max-height: min(86vh, 640px);
  display: flex;
  flex-direction: column;
}

.ranks-panel__sub {
  margin: 6px 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
}

.ranks-panel__me {
  margin: 10px 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(200, 230, 255, 0.95);
}

.ranks-panel__body {
  margin-top: 12px;
  overflow: auto;
  flex: 1;
  min-height: 120px;
}

.ranks-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.ranks-table th,
.ranks-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(100, 140, 200, 0.2);
}

.ranks-table th {
  position: sticky;
  top: 0;
  background: rgba(14, 18, 28, 0.98);
  color: rgba(200, 210, 230, 0.85);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  z-index: 1;
}

.ranks-table td code {
  font-size: 0.76rem;
  color: rgba(180, 200, 230, 0.9);
}

.ranks-row--me {
  background: rgba(80, 120, 200, 0.18);
}

.ranks-row--me td {
  font-weight: 600;
}

.ranks-panel__note {
  margin: 12px 0 0;
  font-size: 0.72rem;
}

.ranks-panel__loading,
.ranks-panel__empty {
  margin: 0;
  padding: 16px 8px;
}

.card--milestones {
  max-width: min(520px, 96vw);
  max-height: min(86vh, 620px);
  display: flex;
  flex-direction: column;
}

.milestones-panel__sub {
  margin: 6px 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
}

.milestones-session {
  margin: 10px 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(200, 230, 255, 0.95);
}

.milestones-panel__body {
  margin-top: 12px;
  overflow: auto;
  flex: 1;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 4px;
}

.milestones-row {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(22, 28, 42, 0.85);
  border: 1px solid rgba(100, 140, 200, 0.18);
}

.milestones-row--ready {
  border-color: rgba(120, 200, 140, 0.45);
  box-shadow: 0 0 0 1px rgba(120, 200, 140, 0.12);
}

.milestones-row--done {
  opacity: 0.72;
}

.milestones-row__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.milestones-row__title {
  font-size: 0.95rem;
}

.milestones-row__desc {
  margin: 6px 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
}

.milestones-row__prog-label {
  margin: 8px 0 4px;
  font-size: 0.72rem;
  color: rgba(180, 195, 220, 0.88);
}

.milestones-row__bar {
  height: 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.milestones-row__bar-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(90, 140, 220, 0.9), rgba(140, 100, 220, 0.85));
  transition: width 0.2s ease;
}

.milestones-row__claim {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 0.75rem;
}

.milestones-row__state {
  font-size: 0.78rem;
  white-space: nowrap;
  align-self: center;
}

.quest-tracker {
  position: absolute;
  z-index: 14;
  left: 50%;
  bottom: 72px;
  transform: translateX(-50%);
  min-width: 240px;
  max-width: min(360px, 94vw);
  padding: 10px 12px;
  border-radius: 10px;
  pointer-events: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}

.quest-tracker--collapsed {
  padding-bottom: 8px;
}

.quest-tracker--hidden {
  display: none !important;
}

.quest-tracker__head-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 6px;
}

.quest-tracker--collapsed .quest-tracker__head-row {
  margin-bottom: 0;
}

.quest-tracker__head {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin: 0;
  flex: 1;
  min-width: 0;
  user-select: none;
}

.quest-tracker__collapse {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(120, 160, 220, 0.35);
  background: rgba(22, 30, 48, 0.75);
  color: #c8d8f0;
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.quest-tracker__collapse:hover {
  background: rgba(50, 70, 110, 0.65);
  border-color: rgba(160, 200, 255, 0.45);
}

.quest-tracker__collapse:focus-visible {
  outline: 2px solid rgba(120, 180, 255, 0.65);
  outline-offset: 2px;
}

.quest-tracker--collapsed .quest-tracker__body {
  display: none !important;
}

.quest-tracker__head:hover {
  filter: brightness(1.08);
}

.quest-tracker__badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: rgba(80, 140, 220, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
}

.quest-tracker__title {
  font-weight: 600;
  font-size: 0.92rem;
  flex: 1;
}

.quest-tracker__body {
  min-width: 0;
}

.quest-tracker__prog {
  margin: 0 0 4px;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.35;
}

.quest-tracker__timer {
  margin: 0 0 10px;
  font-size: 0.78rem;
  color: #9ec8ff;
}

.quest-tracker__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.qt-btn {
  flex: 1;
  min-width: 72px;
  padding: 6px 8px;
  font-size: 0.72rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(40, 60, 100, 0.55);
  color: var(--text);
  cursor: pointer;
}

.qt-btn:hover {
  background: rgba(70, 110, 180, 0.55);
  border-color: rgba(160, 200, 255, 0.45);
}

.hud {
  position: absolute;
  z-index: 15;
  top: 8px;
  bottom: 96px;
  width: min(300px, 92vw);
  max-height: calc(100% - 16px);
  overflow-y: auto;
  font-size: 0.82rem;
  pointer-events: auto;
}

@media (max-width: 900px) {
  .hud {
    bottom: 10px;
    width: min(280px, 88vw);
    max-height: min(38vh, 320px);
    font-size: 0.76rem;
  }
  .minimap-events-cluster {
    right: 6px;
    top: 6px;
    gap: 6px;
    max-width: min(96vw, 520px);
  }
  .events-dock {
    max-width: min(200px, 52vw);
    padding: 6px 8px 8px;
  }
  .minimap-stack {
    max-width: min(160px, 48vw);
    padding: 6px 8px 8px;
  }
  /* Sürüklenmemiş savaş günlüğü: skillbar (ortada, z-index 12) üstüne binmesin */
  .combat-log:not(.panel--draggable-positioned) {
    bottom: max(104px, 22vh);
    max-height: min(200px, 26vh);
    width: min(340px, calc(100vw - 96px));
  }
  .party-panel:not(.panel--draggable-positioned):not(.party-panel--docked) {
    top: min(196px, 30vh);
    width: min(188px, 44vw);
  }
  .hud-target {
    top: 8px;
    max-width: min(300px, calc(100vw - 180px));
  }
}

.hud-unitframe {
  --hud-unitframe-scale: 1;
  width: min(300px, 92vw);
  max-width: 300px;
  padding: 6px 8px 7px;
  overflow: visible;
  font-size: 0.72rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

@supports (zoom: 1) {
  .hud.hud-unitframe {
    zoom: var(--hud-unitframe-scale);
  }
}

@supports not (zoom: 1) {
  .hud.hud-unitframe {
    transform: scale(var(--hud-unitframe-scale));
    transform-origin: top left;
  }
}

.hud-unitframe__scale-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin: 2px 0 6px;
  padding: 0 2px;
}

.hud-unitframe__scale-label {
  flex: 1;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(160, 190, 230, 0.75);
}

.hud-unitframe__scale-btn {
  flex-shrink: 0;
  min-width: 28px;
  height: 26px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid rgba(100, 150, 220, 0.45);
  background: rgba(12, 18, 32, 0.88);
  color: rgba(220, 235, 255, 0.95);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.hud-unitframe__scale-btn:hover {
  border-color: rgba(140, 190, 255, 0.65);
  filter: brightness(1.08);
}

.hud-unitframe__scale-btn:active {
  transform: scale(0.96);
}

.player-hud {
  margin-bottom: 8px;
  padding: 10px 12px 11px;
  border-radius: 14px;
  background:
    linear-gradient(155deg, rgba(24, 30, 52, 0.97), rgba(12, 16, 28, 0.99)),
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(100, 140, 220, 0.18), transparent 55%);
  border: 1px solid rgba(120, 160, 220, 0.38);
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.player-hud__top {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.player-hud__avatar-wrap {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(130, 175, 255, 0.42);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

#hud-player-avatar {
  display: block;
  width: 72px;
  height: 72px;
  vertical-align: top;
}

.player-hud__identity {
  flex: 1;
  min-width: 0;
  padding-top: 1px;
}

.player-hud__admin-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  padding: 5px 9px;
  border-radius: 11px;
  border: 1px solid rgba(255, 140, 90, 0.5);
  background: linear-gradient(
    125deg,
    rgba(255, 80, 120, 0.2) 0%,
    rgba(200, 90, 255, 0.16) 38%,
    rgba(50, 190, 255, 0.14) 100%
  );
  box-shadow:
    0 0 22px rgba(255, 120, 160, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* display:flex yazar yazmaz [hidden] bazı tarayıcılarda görünür kalıyordu */
.player-hud__admin-strip[hidden] {
  display: none !important;
}

.player-hud__admin-badge {
  flex-shrink: 0;
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 7px;
  background: linear-gradient(100deg, #ff2d6a 0%, #ff9f1c 35%, #2ee6a8 72%, #5c9dff 100%);
  color: #07060a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  line-height: 1.2;
}

.player-hud__admin-panel-open {
  flex-shrink: 0;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 200, 120, 0.45);
  background: rgba(20, 24, 36, 0.92);
  color: #ffe8b8;
  cursor: pointer;
  line-height: 1.2;
}

.player-hud__admin-panel-open:hover {
  filter: brightness(1.12);
  border-color: rgba(255, 220, 150, 0.65);
}

.player-hud__admin-marquee-wrap {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.player-hud__admin-marquee {
  display: flex;
  width: max-content;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255, 245, 230, 0.92);
  text-shadow: 0 0 10px rgba(120, 200, 255, 0.35);
  animation: player-hud-admin-marquee 16s linear infinite;
}

.player-hud__admin-marquee__seg {
  flex-shrink: 0;
  padding-right: 3rem;
  white-space: nowrap;
}

@keyframes player-hud-admin-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .player-hud__admin-marquee {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    white-space: normal;
  }

  .player-hud__admin-marquee__seg:last-child {
    display: none;
  }
}

.player-hud__guild {
  margin: 0 0 5px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: normal;
  font-family: "Segoe UI", var(--font-emoji-stack), system-ui, sans-serif;
  text-transform: uppercase;
  color: #c9a0e8;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-hud__name-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 4px;
}

.player-hud__name {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 6px;
  flex: 1;
  min-width: 0;
  max-width: 11em;
  line-height: 1.25;
}

.player-hud__tag {
  font-weight: 800;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  background: linear-gradient(95deg, #ffe8a8, #e8b050 45%, #c87830);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.65));
  white-space: nowrap;
  flex-shrink: 0;
}

.player-hud__race-glyph {
  display: inline-block;
  margin-right: 0.2em;
  font-weight: 800;
  font-size: 1.02em;
  line-height: 1;
  vertical-align: -0.06em;
  flex-shrink: 0;
}

.player-hud__nick {
  font-weight: 700;
  font-size: 0.82rem;
  color: #b8e0ff;
  text-shadow: 0 0 12px rgba(100, 180, 255, 0.25);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.player-hud__nick.player-hud__nick--good {
  color: #8bdcff;
  text-shadow: 0 0 12px rgba(100, 200, 255, 0.35);
}

.player-hud__nick.player-hud__nick--evil {
  color: #e8b0ff;
  text-shadow: 0 0 12px rgba(200, 120, 255, 0.32);
}

.player-hud__lvl {
  font-size: 0.65rem;
  color: var(--muted);
  flex-shrink: 0;
}

.player-hud__res {
  margin: 0;
  font-size: 0.6rem;
  color: rgba(200, 205, 220, 0.78);
  line-height: 1.3;
}

.player-hud__streak {
  margin: 3px 0 0;
  font-size: 0.58rem;
  font-weight: 600;
  color: rgba(255, 184, 232, 0.95);
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-shadow: 0 0 10px rgba(255, 120, 200, 0.35);
}

.player-hud__power {
  margin: 2px 0 0;
  font-size: 0.58rem;
  font-weight: 600;
  color: rgba(255, 200, 140, 0.92);
  line-height: 1.25;
  letter-spacing: 0.02em;
}

.player-hud__bars {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(100, 140, 200, 0.14);
}

.player-hud__stat label {
  margin-top: 5px;
}

.player-hud__stat:first-child label {
  margin-top: 0;
}

.hud-unitframe .player-hud__bars .bar {
  height: 6px;
  margin-top: 2px;
  border-radius: 3px;
}

.hud-unitframe .player-hud__bars label {
  margin-top: 0;
  font-size: 0.6rem;
  line-height: 1.15;
}

.potion-cd-row {
  font-size: 0.58rem;
  line-height: 1.25;
  margin-bottom: 4px;
  padding: 3px 5px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(120, 160, 220, 0.28);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.potion-cd-row__hp {
  color: #ff8f8f;
}
.potion-cd-row__mp {
  color: #8ad4ff;
}

/* [hidden] ile çakışmasın: .survival-hud { display: flex } hidden’ı ezip panel hep görünür kalıyordu */
.survival-hud[hidden] {
  display: none !important;
}

.survival-hud {
  position: absolute;
  left: 50%;
  top: max(8px, 2.5vh);
  transform: translateX(-50%);
  z-index: 26;
  pointer-events: none;
  min-width: min(280px, 88vw);
  padding: 8px 14px 10px;
  border-radius: 10px;
  background: linear-gradient(165deg, rgba(120, 28, 18, 0.72), rgba(200, 70, 28, 0.45));
  border: 1px solid rgba(255, 170, 100, 0.55);
  box-shadow:
    0 4px 22px rgba(0, 0, 0, 0.45),
    0 0 20px rgba(255, 90, 40, 0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.survival-hud__time {
  font-size: clamp(1rem, 2.6vw, 1.35rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  font-variant-numeric: tabular-nums;
}

.survival-hud__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.62rem;
  font-weight: 600;
}

.survival-hud__kills {
  color: #ffe8c8;
  white-space: nowrap;
}

.survival-hud__sep {
  color: rgba(255, 255, 255, 0.35);
}

.survival-hud__next {
  color: #ffd76a;
  white-space: nowrap;
  max-width: 100%;
}

.world-boss-hud {
  position: absolute;
  right: max(10px, 1.2vw);
  top: clamp(76px, 12vh, 148px);
  transform: none;
  z-index: 25;
  pointer-events: auto;
  max-width: min(220px, 42vw);
  padding: 10px 12px 12px;
  border-radius: 12px;
  background: linear-gradient(155deg, rgba(40, 22, 58, 0.88), rgba(18, 12, 28, 0.92));
  border: 1px solid rgba(255, 200, 120, 0.4);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.5),
    0 0 18px rgba(255, 180, 60, 0.15);
  text-align: center;
}

.world-boss-hud--collapsed {
  padding: 8px 10px;
  max-width: min(200px, 48vw);
}

.world-boss-hud__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.world-boss-hud__tag {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 220, 160, 0.85);
  margin-bottom: 0;
  text-align: left;
  flex: 1;
  min-width: 0;
}

.world-boss-hud__toggle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 200, 120, 0.45);
  border-radius: 8px;
  background: rgba(20, 12, 32, 0.75);
  color: #ffd28a;
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}

.world-boss-hud__toggle:hover {
  background: rgba(60, 36, 80, 0.9);
  border-color: rgba(255, 220, 160, 0.65);
}

/* display:flex, [hidden]’ı ezip şerit + geniş panelde çift geri sayım görünüyordu */
.world-boss-hud__collapsed-bar[hidden] {
  display: none !important;
}

.world-boss-hud__collapsed-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.world-boss-hud__collapsed-ico {
  font-size: 1rem;
  opacity: 0.9;
}

.world-boss-hud__collapsed-count {
  flex: 1;
  min-width: 0;
  font-size: clamp(0.88rem, 2.2vw, 1.05rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #ffd28a;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.world-boss-hud__state {
  font-size: clamp(0.85rem, 2vw, 1rem);
  font-weight: 800;
  color: #ffecc8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.world-boss-hud__timer {
  font-size: clamp(0.95rem, 2.4vw, 1.15rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #ffd28a;
  margin-top: 2px;
}

.world-boss-hud__hint {
  margin: 8px 0 0;
  font-size: 0.55rem;
  line-height: 1.35;
  color: rgba(220, 210, 240, 0.72);
}

.dungeon-boss-countdown {
  position: absolute;
  left: 50%;
  /* Orta-alt yerine üst bölge — “Patron geliyor” ekranı karakterin üstünü kapatmasın */
  top: clamp(72px, 11vh, 132px);
  transform: translateX(-50%);
  z-index: 27;
  pointer-events: none;
  text-align: center;
}

.dungeon-boss-countdown__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 24px 12px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse 120% 100% at 50% 0%, rgba(90, 24, 28, 0.85), rgba(8, 6, 14, 0.94)),
    linear-gradient(180deg, rgba(40, 18, 22, 0.9), rgba(6, 4, 10, 0.95));
  border: 1px solid rgba(220, 100, 70, 0.45);
  box-shadow:
    0 0 32px rgba(160, 30, 20, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  min-width: 132px;
}

.dungeon-boss-countdown__floor {
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(190, 220, 255, 0.95);
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.dungeon-boss-countdown__label {
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 210, 190, 0.92);
  font-weight: 700;
}

.dungeon-boss-countdown__num {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  color: #ff5c3a;
  text-shadow: 0 0 24px rgba(255, 70, 40, 0.55);
  font-variant-numeric: tabular-nums;
  transition: transform 0.15s ease;
}

.dungeon-boss-countdown--urgent .dungeon-boss-countdown__inner {
  border-color: rgba(255, 140, 90, 0.75);
  animation: dungeonBossCountdownPulse 0.9s ease-in-out infinite;
}

.dungeon-boss-countdown--urgent .dungeon-boss-countdown__num {
  color: #ff3018;
  transform: scale(1.06);
}

@keyframes dungeonBossCountdownPulse {
  0%,
  100% {
    box-shadow:
      0 0 32px rgba(160, 30, 20, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  50% {
    box-shadow:
      0 0 48px rgba(255, 80, 40, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
}

.char-title-row {
  margin: 8px 0 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.char-title-row label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(180, 190, 210, 0.85);
}

.char-title-select {
  font-size: 0.85rem;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(120, 160, 220, 0.35);
  background: rgba(12, 16, 28, 0.9);
  color: var(--text);
  max-width: 100%;
}

.char-title-detail {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: rgba(170, 185, 210, 0.92);
}

.inv-cell.inv-cell--plus8 {
  animation: invPlus8Pulse 1.6s ease-in-out infinite;
  box-shadow:
    0 0 10px rgba(255, 220, 120, 0.5),
    inset 0 0 8px rgba(255, 200, 80, 0.12);
}

@keyframes invPlus8Pulse {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.14);
  }
}

.equip-drop.equip-drop--plus8 {
  animation: invPlus8Pulse 1.6s ease-in-out infinite;
  box-shadow:
    0 0 12px rgba(255, 210, 100, 0.55),
    inset 0 0 8px rgba(255, 180, 60, 0.14);
  border-radius: 8px;
}

.hud-unitframe.glass {
  padding: 6px 8px 7px;
  border-radius: 8px;
}

.unitframe__head {
  margin-bottom: 4px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(100, 140, 200, 0.1);
}

.unitframe__guild {
  margin: 0 0 5px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: normal;
  font-family: "Segoe UI", var(--font-emoji-stack), system-ui, sans-serif;
  text-transform: uppercase;
  color: #c9a0e8;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12em;
}

.unitframe__title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 3px;
}

.unitframe__name {
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--accent);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 9em;
}

.unitframe__lvl {
  font-size: 0.68rem;
  color: var(--muted);
  flex-shrink: 0;
}

.unitframe__res {
  margin: 0;
  font-size: 0.62rem;
  color: rgba(200, 205, 220, 0.75);
  line-height: 1.25;
}

.unitframe__honor {
  margin: 0 0 4px;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(200, 170, 110, 0.95);
  line-height: 1.2;
}

.daily-quest-strip {
  font-size: 0.58rem;
  margin-bottom: 6px;
  padding: 5px 6px;
  border-radius: 8px;
  background: rgba(12, 20, 40, 0.75);
  border: 1px solid rgba(100, 160, 220, 0.22);
  max-width: 200px;
}

.daily-quest-strip__head {
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(160, 200, 255, 0.85);
  margin-bottom: 4px;
  font-size: 0.55rem;
}

.daily-quest-strip__row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: 2px;
  color: rgba(210, 215, 230, 0.9);
}

.daily-quest-strip__row--done {
  color: rgba(120, 220, 160, 0.95);
}

.overlay-action-celebration {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 55;
}

.overlay-action-celebration--hidden {
  visibility: hidden;
  opacity: 0;
}

.action-celebration__card {
  text-align: center;
  padding: 18px 28px 22px;
  border-radius: 16px;
  max-width: min(360px, 88vw);
  background:
    radial-gradient(ellipse 100% 80% at 50% 0%, rgba(100, 140, 220, 0.35), transparent 55%),
    linear-gradient(165deg, rgba(18, 22, 38, 0.96), rgba(8, 10, 18, 0.98));
  border: 1px solid rgba(140, 180, 255, 0.35);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  transform: scale(0.88);
  opacity: 0;
  transition:
    transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1),
    opacity 0.28s ease;
}

.overlay-action-celebration:not(.overlay-action-celebration--hidden) .action-celebration__card {
  transform: scale(1);
  opacity: 1;
}

.action-celebration__icon {
  display: block;
  font-size: 1.6rem;
  margin-bottom: 6px;
  filter: drop-shadow(0 0 8px rgba(255, 220, 120, 0.45));
}

.action-celebration__title {
  margin: 0;
  font-size: 1.05rem;
  color: #f0e8d8;
}

.action-celebration__sub {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: rgba(200, 210, 230, 0.88);
  line-height: 1.35;
}

.menu-characters-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.char-select__main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 12px 0 0;
}

@media (min-width: 720px) {
  .char-select__main {
    grid-template-columns: minmax(240px, 1fr) minmax(300px, 1.15fr);
    gap: 22px 28px;
    align-items: start;
  }
}

.char-select__section-title {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(170, 185, 220, 0.82);
}

.char-select__preview-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 0 12px;
  padding: 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(100, 140, 200, 0.24);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(8, 12, 22, 0.45));
}

#menu-class-preview {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  aspect-ratio: 1;
  border-radius: 12px;
}

.char-select__preview-hint {
  margin: 10px 0 0;
  font-size: 0.74rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.35;
}

.menu-char-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(120, 160, 220, 0.22);
}

.menu-char-row__avatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  border: 1px solid rgba(100, 140, 200, 0.35);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.35);
}

.menu-char-row__meta {
  min-width: 0;
  font-size: 0.82rem;
}

.menu-char-row__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-bottom: 2px;
}

.menu-char-row__title-wrap {
  display: inline;
  margin-right: 4px;
  color: rgba(220, 200, 160, 0.95);
  font-weight: 700;
  font-size: 0.78em;
}

.menu-char-row__title {
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(95deg, #ffe8a8, #c89838);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.menu-char-row__race-glyph {
  display: inline-block;
  margin-right: 0.2em;
  font-weight: 800;
  font-size: 1.05em;
  vertical-align: -0.05em;
}

.menu-char-row__meta .menu-char-row__name {
  display: inline;
  color: #c8e4ff;
  text-shadow: 0 0 10px rgba(100, 170, 255, 0.2);
}

.menu-char-row__meta .menu-char-row__name.menu-char-row__name--good {
  color: #8bdcff;
  text-shadow: 0 0 10px rgba(100, 200, 255, 0.28);
}

.menu-char-row__meta .menu-char-row__name.menu-char-row__name--evil {
  color: #e8b0ff;
  text-shadow: 0 0 12px rgba(200, 120, 255, 0.25);
}

.menu-char-row__meta small {
  color: var(--muted);
  font-size: 0.72rem;
}

.menu-char-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.menu-char-row__actions button {
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid rgba(140, 180, 240, 0.35);
  background: rgba(40, 55, 90, 0.65);
  color: var(--text);
}

.menu-char-row__actions button.menu-char-row__del {
  border-color: rgba(200, 80, 80, 0.45);
  color: #ffaaaa;
  background: rgba(60, 20, 20, 0.5);
}

.unitframe__tag {
  display: inline-block;
  width: 1.35em;
  font-weight: 700;
  font-size: 0.62rem;
  color: rgba(180, 190, 210, 0.55);
  letter-spacing: 0.02em;
}

.hud--left {
  left: 8px;
}

.hud--left.hud--master-open {
  top: 112px;
}

.hud-master {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 16;
  width: min(204px, 26vw);
  padding: 6px 8px 8px;
  border-radius: 10px;
  pointer-events: auto;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

.hud-master__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.hud-master__title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e8c878;
}

.hud-master__open {
  border: 1px solid rgba(160, 140, 90, 0.45);
  background: rgba(60, 50, 40, 0.55);
  color: var(--text);
  border-radius: 6px;
  padding: 2px 8px;
  cursor: pointer;
  font-size: 0.72rem;
  line-height: 1.2;
}

.hud-master__open:hover {
  filter: brightness(1.1);
}

.hud-master__slots {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.skill-pill--master {
  min-width: 56px;
  width: 56px;
  min-height: 58px;
  padding: 6px 4px 12px;
  border-radius: 8px;
  justify-content: center;
  border: 1px solid rgba(200, 160, 90, 0.45);
  background: linear-gradient(165deg, rgba(40, 32, 24, 0.95), rgba(12, 14, 22, 0.92));
}

.skill-pill--master kbd {
  font-size: 0.58rem;
  color: #c9d0e0;
}

.skill-pill--master span:last-of-type {
  font-size: 0.6rem;
  text-align: center;
  line-height: 1.15;
  max-width: 52px;
  max-height: 2.4em;
  overflow: hidden;
}

.skill-cd--master::after {
  background: linear-gradient(90deg, #a07030, #ffd88a);
}

.card--master {
  text-align: left;
}

.master-panel-lead {
  margin: 0 0 10px;
  line-height: 1.45;
}

.master-points-line {
  font-weight: 700;
  color: #e8c878;
  margin: 0 0 14px;
  font-size: 0.9rem;
}

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

.paragon-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(140, 120, 90, 0.35);
}

.paragon-section__title {
  margin: 0 0 6px;
  font-size: 0.95rem;
  color: #c8a8ff;
}

.paragon-section__lead {
  margin: 0 0 12px;
  font-size: 0.82rem;
}

.master-node {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(120, 100, 70, 0.4);
  background: rgba(0, 0, 0, 0.35);
}

.master-node__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.master-node__name {
  font-size: 0.88rem;
  color: var(--accent);
}

.master-node__rank {
  font-size: 0.75rem;
  color: #ffd56a;
  font-weight: 700;
  flex-shrink: 0;
}

.master-node__desc {
  margin: 0 0 8px;
  font-size: 0.78rem;
}

.master-node__btn {
  font-size: 0.78rem;
}

.master-actives-hint {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(100, 120, 160, 0.25);
}

.master-actives-hint__h {
  margin: 0 0 6px;
  font-size: 0.88rem;
  color: var(--accent);
}

.master-actives-hint__p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
}

.hud--right {
  right: 8px;
}

/* Sol kenar: sekme + açılır kısayol paneli */
.hud-action-dock {
  position: absolute;
  left: 0;
  top: clamp(124px, 20vh, 220px);
  z-index: 21;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  pointer-events: none;
}

.hud-action-dock__tab {
  pointer-events: auto;
  width: 40px;
  min-height: 108px;
  padding: 0 2px;
  border: 1px solid rgba(120, 160, 220, 0.35);
  border-left: none;
  border-radius: 0 12px 12px 0;
  background: linear-gradient(165deg, rgba(28, 32, 48, 0.98), rgba(14, 16, 24, 0.99));
  color: #c8d8f0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 4px 6px 20px rgba(0, 0, 0, 0.35);
  transition:
    background 0.2s ease,
    box-shadow 0.25s ease;
}

.hud-action-dock__tab:hover {
  background: linear-gradient(165deg, rgba(40, 50, 78, 0.98), rgba(20, 24, 36, 0.99));
  box-shadow: 4px 8px 28px rgba(60, 100, 180, 0.2);
}

.hud-action-dock__chev {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  display: block;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.hud-action-dock:not(.hud-action-dock--open) .hud-action-dock__chev {
  transform: rotate(180deg);
}

.hud-action-dock__panel {
  pointer-events: none;
  overflow: hidden;
  width: 0;
  min-width: 0;
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  padding: 0;
  border: 1px solid rgba(120, 160, 220, 0.22);
  border-left: none;
  border-radius: 0 12px 12px 0;
  background: rgba(18, 22, 32, 0.96);
  box-shadow: 6px 10px 32px rgba(0, 0, 0, 0.45);
  transform: translateX(-6px) scaleX(0.92);
  transform-origin: left center;
  transition:
    width 0.34s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.26s ease,
    padding 0.34s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.34s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s ease;
}

.hud-action-dock--open .hud-action-dock__panel {
  pointer-events: auto;
  width: 58px;
  min-width: 58px;
  opacity: 1;
  padding: 8px 6px 8px 4px;
  transform: translateX(0) scaleX(1);
  animation: hudDockPanelIn 0.45s ease-out;
}

.hud-action-dock--open .hud-action-dock__tab {
  box-shadow: 4px 6px 24px rgba(80, 140, 220, 0.18);
}

@keyframes hudDockPanelIn {
  0% {
    filter: brightness(1.15);
    box-shadow:
      0 0 0 0 rgba(120, 180, 255, 0.45),
      6px 10px 32px rgba(0, 0, 0, 0.45);
  }
  55% {
    filter: brightness(1.05);
    box-shadow:
      0 0 22px 2px rgba(100, 160, 255, 0.2),
      6px 10px 32px rgba(0, 0, 0, 0.45);
  }
  100% {
    filter: brightness(1);
    box-shadow: 6px 10px 32px rgba(0, 0, 0, 0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hud-action-dock__panel,
  .hud-action-dock__chev {
    transition-duration: 0.05s;
  }
  .hud-action-dock--open .hud-action-dock__panel {
    animation: none;
  }
}

.hud-action-dock .microbar {
  gap: 8px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}

.microbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.microbar-btn {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: 2px solid #5c4830;
  background: linear-gradient(165deg, #2c2620 0%, #1c1814 42%, #12100e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 210, 140, 0.14),
    0 4px 12px rgba(0, 0, 0, 0.55);
  color: #d8b870;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  font-family: Georgia, "Times New Roman", serif;
  text-shadow: 0 1px 2px #000;
}

.microbar-btn:hover {
  border-color: #c9a050;
  color: #fff0c8;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, 0.2),
    0 0 12px rgba(200, 160, 80, 0.25);
}

.microbar-btn:active {
  transform: translateY(1px);
}

.microbar-btn--letter {
  font-size: 0.95rem;
  font-weight: 800;
  font-family: system-ui, "Segoe UI", sans-serif;
}

.zone-name--panel {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 12px;
}

.quest--panel {
  margin: 0 0 12px;
  line-height: 1.45;
}

.hud h2 {
  margin: 0 0 8px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.hud-char__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(100, 140, 200, 0.12);
}

.hud-char__title {
  margin: 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.hud-char__class {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent);
}

.stat-grid--card {
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(100, 140, 200, 0.1);
}

.gold--card {
  padding: 8px 10px;
  border-radius: 8px;
  margin-top: 8px;
  background: rgba(50, 40, 20, 0.35);
  border: 1px solid rgba(200, 160, 80, 0.18);
}

.hud-pet {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(35, 28, 55, 0.45);
  border: 1px solid rgba(150, 120, 220, 0.25);
}

.hud-pet__premium-hint {
  margin: 0 0 8px;
  font-size: 0.72rem;
  line-height: 1.38;
  color: #d4b87a;
}

.hud-pet--locked .bar--pet {
  opacity: 0.5;
}

.hud-pet--locked .hud-pet__xp {
  opacity: 0.8;
}

.hud-pet--locked .hud-mini-check {
  opacity: 0.55;
  cursor: not-allowed;
}

.hud-pet__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.hud-pet__title {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c4b8ff;
}

.hud-pet__lv {
  font-size: 0.75rem;
  color: var(--muted);
}

.hud-pet__lv strong {
  color: #ddb8ff;
}

.bar--pet {
  height: 5px;
  margin-top: 2px;
}

.bar__fill--pet {
  background: linear-gradient(90deg, #5533aa, #aa77ff);
}

.hud-pet__xp {
  margin: 4px 0 0;
  font-size: 0.7rem;
  color: var(--muted);
}

.hud-pet__toggles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.hud-pet-loot-tier {
  margin-top: 8px;
  display: grid;
  gap: 4px;
}

.hud-pet-loot-tier__label {
  font-size: 0.68rem;
  color: var(--muted);
}

.hud-pet-loot-tier__select {
  width: 100%;
  font-size: 0.72rem;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(10, 14, 24, 0.95);
  color: var(--text);
}

.hud-mini-check {
  font-size: 0.72rem;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hud-auto-quest {
  display: block;
  margin-top: 10px;
  font-size: 0.72rem;
  color: var(--muted);
  cursor: pointer;
}

.combat-log {
  position: absolute;
  left: auto;
  right: 12px;
  bottom: 12px;
  z-index: 22;
  width: min(400px, 46vw);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  border-radius: 10px;
  background: rgba(10, 14, 24, 0.94);
  border: 1px solid rgba(100, 140, 200, 0.28);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  max-height: min(260px, 36vh);
}

.combat-log__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(100, 140, 200, 0.18);
  flex-shrink: 0;
}

.combat-log__title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(200, 210, 230, 0.9);
}

.combat-log__toggle {
  border: none;
  background: rgba(40, 55, 90, 0.55);
  color: var(--text);
  border-radius: 6px;
  padding: 2px 8px;
  cursor: pointer;
  font-size: 0.85rem;
}

.combat-log__body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 10px 10px;
  font-size: 0.72rem;
  line-height: 1.45;
  font-family: ui-monospace, "Cascadia Mono", monospace;
}

.combat-log--collapsed {
  max-height: none;
}

.combat-log--collapsed .combat-log__body {
  display: none;
}

.combat-log__line--hit {
  color: #ffcc88;
}
.combat-log__line--hurt {
  color: #ff8888;
}
.combat-log__line--heal {
  color: #66ffaa;
}
.combat-log__line--loot {
  color: #ffd56a;
}
.combat-log__line--quest {
  color: #88ccff;
}
.combat-log__line--pet {
  color: #c9a8ff;
}
.combat-log__line--portal {
  color: #a8d4ff;
}
.combat-log__line--warn {
  color: #ffaa66;
}
.combat-log__line--info {
  color: rgba(200, 210, 230, 0.85);
}

.res-pick {
  margin: 12px 0;
}

.muted-label {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 6px;
}

.res-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.res-btn {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(40, 50, 70, 0.9);
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
}

.res-btn:hover {
  background: rgba(80, 120, 200, 0.25);
}

.res-btn--active {
  border-color: var(--accent);
  box-shadow: 0 0 14px rgba(200, 160, 80, 0.35);
}

.btn-continue {
  width: 100%;
  margin: 8px 0 16px;
  padding: 14px 16px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid rgba(120, 220, 160, 0.45);
  background: rgba(25, 55, 65, 0.95);
  color: #b8ffd8;
  cursor: pointer;
}

.btn-continue:hover {
  filter: brightness(1.08);
}

.card--menu {
  max-width: 480px;
}

.skillbar {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 12;
  align-items: flex-end;
  pointer-events: none;
}

.skillbar--wide {
  flex-wrap: wrap;
  max-width: min(980px, 98vw);
  justify-content: center;
}

.skillbar__recenter {
  pointer-events: auto;
  flex-shrink: 0;
  width: 40px;
  min-height: 56px;
  margin: 0 2px 0 0;
  align-self: flex-end;
  border-radius: 10px;
  border: 1px solid rgba(140, 200, 255, 0.4);
  background: linear-gradient(168deg, rgba(22, 32, 52, 0.95), rgba(10, 14, 24, 0.92));
  color: #c8e8ff;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  transition:
    border-color 0.15s ease,
    transform 0.1s ease,
    filter 0.15s ease;
}

.skillbar__recenter:hover {
  border-color: rgba(180, 230, 255, 0.65);
  filter: brightness(1.08);
}

.skillbar__recenter:active {
  transform: scale(0.96);
}

.skillbar .skill-pill {
  pointer-events: auto;
  cursor: pointer;
}

.skillbar__col--stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

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

.skill-pill--pot {
  min-width: 56px;
  padding: 5px 8px 12px;
  font-size: 0.65rem;
}

.skill-pill--pot kbd {
  font-size: 0.62rem;
}

.skill-pill--pot .hotbar-slot__label {
  font-size: 0.72rem;
  color: rgba(230, 240, 255, 0.95);
}

.skill-pill--pot-empty {
  opacity: 0.42;
}

.skill-pill--pot-empty .hotbar-slot__label {
  font-size: 0.68rem;
  color: rgba(160, 170, 190, 0.65);
}

.skill-pill--pot-empty kbd {
  opacity: 0.55;
}

.skill-pill--dragging {
  opacity: 0.55;
  outline: 2px dashed rgba(120, 180, 255, 0.75);
}

.skill-pill--no-drag {
  cursor: pointer;
}

.skill-pill--attack.skill-pill--no-drag {
  cursor: pointer;
}

.menu-world-hint {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0 0 14px;
  line-height: 1.5;
}

.menu-world-hint kbd {
  font-size: 0.8em;
}

.skill-pill {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 72px;
  padding: 8px 10px 14px;
  border-radius: 10px;
  background: rgba(12, 16, 28, 0.88);
  border: 1px solid rgba(100, 140, 200, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  font-size: 0.72rem;
  color: var(--muted);
}

.stat-delta-float {
  position: absolute;
  left: 50%;
  top: 2px;
  margin-left: 0;
  transform: translateX(-50%);
  font-size: 0.82rem;
  font-weight: 800;
  pointer-events: none;
  z-index: 6;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  opacity: 0;
}

.stat-delta-float--up {
  color: #6ee7a0;
}

.stat-delta-float--down {
  color: #ff8a8a;
}

.stat-delta-float--animate {
  animation: statDeltaFloatPill 1.05s ease-out forwards;
}

@keyframes statDeltaFloatPill {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-26px);
  }
}

.skill-pill kbd {
  font-size: 0.68rem;
  opacity: 0.9;
}

.skill-pill span:last-of-type {
  color: var(--text);
  font-weight: 600;
  font-size: 0.78rem;
}

.skill-pill--locked {
  opacity: 0.68;
  border-color: rgba(120, 120, 150, 0.32);
  background: rgba(18, 18, 26, 0.86);
}

.skill-pill--locked span:last-of-type {
  color: #b9bfd0;
}

.skill-cd {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 0 0 8px 8px;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.skill-cd::after {
  content: "";
  display: block;
  height: 100%;
  width: var(--cd-pct, 0%);
  background: linear-gradient(90deg, #4488ff, #66ccff);
  transition: width 0.05s linear;
}

.overlay--inv::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 72% 58% at 50% 42%, transparent 32%, rgba(0, 0, 0, 0.72) 100%);
}

.overlay--inv::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.card.card--wide.card--inv {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  width: min(98%, 1080px);
  padding: 18px 20px 22px;
  background:
    linear-gradient(175deg, rgba(22, 26, 38, 0.98) 0%, rgba(10, 12, 20, 0.99) 100%),
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(90, 75, 45, 0.18), transparent 55%);
  border: 1px solid rgba(140, 115, 65, 0.42);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 28px 64px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}

.inv-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(100, 140, 200, 0.12);
  background: linear-gradient(90deg, rgba(180, 150, 80, 0.08), transparent 55%);
  margin-left: -6px;
  margin-right: -6px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 10px 10px 0 0;
}

.inv-header .btn-close {
  float: none;
  flex-shrink: 0;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(120, 160, 220, 0.25);
  background: rgba(0, 0, 0, 0.25);
}

.inv-header .btn-close:hover {
  background: rgba(80, 120, 200, 0.2);
  color: var(--text);
}

.inv-header__title {
  margin: 0;
  font-size: 1.28rem;
  letter-spacing: 0.04em;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  color: #f0ebe0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.inv-header__sub {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

.inv-col__title {
  margin: 0 0 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(200, 190, 160, 0.88);
  font-family: Georgia, "Times New Roman", serif;
}

.inv-top-controls {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 8px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(100, 130, 180, 0.2);
  background: rgba(6, 10, 18, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.inv-top-controls .inv-toolbar {
  margin-bottom: 0;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(80, 110, 160, 0.18);
  background: rgba(12, 16, 28, 0.45);
}

.inv-top-controls .inv-filters {
  margin-bottom: 0;
  border-radius: 0;
  border: none;
  background: rgba(8, 12, 22, 0.4);
}

.inv-equip-strip {
  margin: 0 0 18px;
  padding: 14px 16px 16px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(26, 30, 42, 0.95), rgba(12, 14, 24, 0.97)),
    radial-gradient(ellipse 100% 80% at 50% 0%, rgba(120, 95, 55, 0.14), transparent 55%);
  border: 1px solid rgba(130, 105, 60, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 28px rgba(0, 0, 0, 0.35);
}

.inv-equip-strip__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.inv-equip-strip__title {
  margin: 0;
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(220, 200, 155, 0.95);
  font-family: Georgia, "Times New Roman", serif;
}

.inv-equip-strip__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(180, 150, 90, 0.45), transparent 92%);
  min-width: 40px;
}

.inv-equip-strip .equip-paper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}

.inv-equip-strip .equip-line {
  flex: 1 1 calc(50% - 6px);
  min-width: min(100%, 240px);
  margin-bottom: 0 !important;
}

.inv-equip-strip .equip-subtitle {
  flex: 1 1 100%;
  margin: 4px 0 0;
  padding-top: 6px;
}

.inv-equip-strip .equip-pair {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 520px) {
  .inv-equip-strip .equip-line {
    flex: 1 1 100%;
    min-width: 0;
  }
}

.inv-col--sidebar {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(100, 140, 200, 0.14);
  max-height: min(70vh, 620px);
  overflow: auto;
  scrollbar-width: thin;
}

.inv-col--bag {
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(100, 140, 200, 0.1);
}

.inv-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(120, 160, 220, 0.14);
}

.inv-toolbar__actions,
.inv-toolbar__group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.inv-bulk-sell__label {
  font-size: 0.72rem;
  color: var(--muted);
}

.inv-bulk-sell__select {
  border: 1px solid rgba(140, 180, 240, 0.35);
  border-radius: 8px;
  background: rgba(24, 34, 56, 0.85);
  color: #d8ecff;
  font-size: 0.75rem;
  padding: 5px 8px;
}

.inv-bulk-sell--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 5px 10px;
  border-radius: 9px;
  border: 1px solid rgba(120, 160, 220, 0.28);
  background: rgba(12, 20, 38, 0.65);
  flex: 1 1 200px;
  min-width: min(100%, 240px);
}

.inv-bulk-sell__tag {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(210, 230, 255, 0.92);
  white-space: nowrap;
}

.inv-toolbar__check {
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.inv-toolbar__check--compact {
  font-size: 0.72rem;
}

.inv-toolbar__btn {
  font-size: 0.78rem;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(160, 200, 255, 0.35);
  background: linear-gradient(180deg, rgba(50, 70, 110, 0.55), rgba(30, 40, 70, 0.75));
  color: var(--accent);
  cursor: pointer;
}

.inv-toolbar__btn:hover {
  background: rgba(80, 120, 200, 0.35);
}

.inv-toolbar__btn--warn {
  border-color: rgba(255, 190, 120, 0.45);
  color: #ffd9a2;
  background: linear-gradient(180deg, rgba(120, 78, 34, 0.58), rgba(56, 36, 18, 0.78));
}

.inv-toolbar__btn--warn:hover {
  background: rgba(142, 86, 32, 0.58);
}

.inv-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px 14px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(100, 140, 200, 0.12);
}

.inv-filters__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 220px;
}

.inv-filters__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  flex: 2 1 320px;
  min-width: 0;
  justify-content: flex-end;
}

.inv-filters__autos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  padding-right: 4px;
  border-right: 1px solid rgba(100, 140, 200, 0.18);
  margin-right: 2px;
}

@media (max-width: 720px) {
  .inv-filters__autos {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
  }

  .inv-filters__tools {
    justify-content: flex-start;
    width: 100%;
  }
}

.inv-filter-btn {
  font-size: 0.76rem;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(120, 160, 220, 0.28);
  background: rgba(30, 40, 65, 0.55);
  color: var(--muted);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.inv-filter-btn:hover {
  color: var(--text);
  border-color: rgba(160, 200, 255, 0.45);
  background: rgba(50, 70, 110, 0.45);
}

.inv-filter-btn--active {
  color: var(--text);
  font-weight: 600;
  border-color: rgba(200, 160, 90, 0.55);
  background: linear-gradient(180deg, rgba(90, 70, 40, 0.45), rgba(40, 35, 28, 0.75));
  box-shadow: 0 0 0 1px rgba(255, 200, 120, 0.12);
}

.equip-paper {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.equip-subtitle {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #8ab4ff;
  text-transform: uppercase;
  margin: 10px 0 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(100, 140, 200, 0.2);
}

.equip-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.equip-line--compact {
  grid-template-columns: 28px minmax(0, 1fr) auto !important;
  padding: 6px 8px !important;
  margin-bottom: 0 !important;
}

.equip-line__label {
  font-size: 0.74rem;
  color: var(--muted);
}

.equip-line__actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
}

.equip-mini-btn {
  font-size: 0.65rem !important;
  padding: 3px 6px !important;
}

.equip-drop--sm {
  min-height: 42px !important;
  min-width: 0;
}

.inv-hint {
  font-size: 0.74rem;
  color: rgba(160, 175, 200, 0.75);
  margin: 0 0 14px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(100, 130, 180, 0.12);
}

.inv-detail {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(12, 16, 28, 0.75), rgba(6, 8, 14, 0.85));
  border: 1px solid rgba(120, 160, 220, 0.25);
  font-size: 0.85rem;
  color: rgba(200, 210, 230, 0.88);
  min-height: 52px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.stat-allocate {
  margin-top: 10px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(40, 60, 100, 0.25);
  border: 1px solid rgba(120, 160, 255, 0.2);
  font-size: 0.8rem;
}

.stat-allocate strong {
  color: var(--accent);
}

.skill-upgrades {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.8rem;
}

.skill-upgrades button {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(100, 140, 200, 0.28);
  background: linear-gradient(180deg, rgba(32, 40, 58, 0.9), rgba(18, 22, 34, 0.95));
  color: var(--text);
  cursor: pointer;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.skill-upgrades button:hover:not(:disabled) {
  border-color: rgba(160, 190, 230, 0.45);
  background: rgba(45, 55, 80, 0.95);
}

.skill-upgrades button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.equip-line {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(120, 160, 220, 0.15);
}

.inv-equip-strip .equip-line {
  background: rgba(0, 0, 0, 0.38);
  border-color: rgba(100, 130, 170, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.equip-drop {
  min-height: 48px;
  border-radius: 8px;
  border: 2px dashed rgba(120, 160, 220, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px;
  transition: background 0.15s, border-color 0.15s;
}

.equip-drop.equip-drop--hover {
  background: rgba(80, 120, 200, 0.15);
  border-color: rgba(160, 200, 255, 0.55);
}

.equip-drop .item-icon {
  flex-shrink: 0;
}

.equip-meta {
  font-size: 0.75rem;
  color: var(--muted);
  text-align: left;
}

.inv-cell.rarity--common {
  border-color: rgba(139, 149, 168, 0.55);
}
.inv-cell.rarity--uncommon {
  border-color: rgba(76, 201, 101, 0.75);
  box-shadow: 0 0 8px rgba(76, 201, 101, 0.15);
}
.inv-cell.rarity--rare {
  border-color: rgba(77, 159, 255, 0.85);
  box-shadow: 0 0 10px rgba(77, 159, 255, 0.2);
}
.inv-cell.rarity--epic {
  border-color: rgba(197, 107, 255, 0.9);
  box-shadow: 0 0 12px rgba(197, 107, 255, 0.25);
}
.inv-cell.rarity--legendary {
  border-color: rgba(255, 179, 71, 0.95);
  box-shadow: 0 0 14px rgba(255, 179, 71, 0.3);
}

.bar__fill--energy {
  background: linear-gradient(90deg, #2a6a9a, #5ec8e8);
}

#overlay-item-detail:not(.overlay--modal-fixed) {
  z-index: 55;
}

.card--item-detail {
  max-width: 440px;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(130, 170, 255, 0.18), transparent 56%),
    linear-gradient(160deg, rgba(16, 20, 34, 0.98), rgba(10, 12, 24, 0.99));
  border: 1px solid rgba(130, 160, 220, 0.38);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.62);
  position: relative;
  z-index: 1;
  pointer-events: auto;
  text-align: left;
}

.card--patch-notes {
  max-width: 480px;
  max-height: min(92vh, 720px);
  text-align: left;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.patch-notes-version {
  margin: 0 0 12px;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.patch-notes-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(62vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 0 12px;
  padding-right: 8px;
  -webkit-overflow-scrolling: touch;
}

.patch-notes-scroll::-webkit-scrollbar {
  width: 8px;
}

.patch-notes-scroll::-webkit-scrollbar-thumb {
  background: rgba(120, 160, 220, 0.45);
  border-radius: 4px;
}

.patch-notes-list {
  margin: 0;
  padding-left: 1.15rem;
  line-height: 1.55;
  font-size: 0.88rem;
  color: rgba(232, 236, 244, 0.92);
}

.patch-notes-list li {
  margin-bottom: 8px;
}

.patch-notes-actions {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

.card--admin-panel {
  max-width: 520px;
  text-align: left;
}

.admin-panel__block {
  margin: 14px 0;
  padding-top: 12px;
  border-top: 1px solid rgba(120, 160, 220, 0.22);
}

.admin-panel__block h3 {
  margin: 0 0 8px;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin-panel__textarea {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(120, 160, 220, 0.35);
  background: rgba(10, 14, 24, 0.95);
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  resize: vertical;
  min-height: 72px;
}

.admin-panel__row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.admin-panel__row label {
  min-width: 88px;
  font-size: 0.82rem;
  color: var(--muted);
}

.admin-panel__row select,
.admin-panel__row input[type="number"] {
  flex: 1;
  min-width: 160px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(120, 160, 220, 0.35);
  background: rgba(10, 14, 24, 0.95);
  color: var(--text);
  font-family: inherit;
}

.admin-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.item-detail-rarity-line {
  font-weight: 600;
  margin: 2px 0 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.item-detail-desc {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0 0 12px;
}

.item-detail-stats {
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.item-detail-stats-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.item-detail-stats-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(130, 160, 220, 0.22);
}

.item-detail-stats-list li span {
  color: var(--muted);
}

.item-detail-stats-list li strong {
  color: #d8eeff;
}

.item-detail-pill {
  display: inline-block;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(120, 200, 255, 0.35);
  background: rgba(50, 90, 140, 0.25);
}

.item-detail-sell-line {
  font-size: 0.84rem;
  margin: 10px 0 14px;
}

#overlay-upgrade {
  z-index: 72;
}

.card--upgrade {
  max-width: 460px;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255, 190, 90, 0.22), transparent 52%),
    linear-gradient(165deg, rgba(28, 20, 12, 0.98), rgba(16, 12, 8, 0.99));
  border: 1px solid rgba(210, 160, 90, 0.4);
}

.upgrade-odds {
  color: #ffdca0;
  font-size: 0.86rem;
  margin: 10px 0;
}

.upgrade-actions {
  display: flex;
  gap: 8px;
}

.upgrade-actions .btn-primary {
  flex: 1;
}

.upgrade-result {
  min-height: 28px;
  margin-top: 12px;
  font-weight: 700;
}

.upgrade-result--success {
  color: #8effa8;
  text-shadow: 0 0 10px rgba(110, 255, 150, 0.35);
}

.upgrade-result--downgrade {
  color: #ffd480;
}

.upgrade-result--burn {
  color: #ff8d72;
  text-shadow: 0 0 12px rgba(255, 80, 40, 0.35);
}

.inv-cell .item-icon {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.inv-cell--drag {
  opacity: 0.55;
}

.inv-cell .qty-badge {
  position: absolute;
  right: 2px;
  bottom: 2px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 4px #000;
}

.inv-cell .plus-badge {
  position: absolute;
  left: 2px;
  top: 2px;
  font-size: 0.6rem;
  color: #ffd56a;
  font-weight: 700;
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 8, 14, 0.82);
  backdrop-filter: blur(6px);
  z-index: 5;
}

/* Kahraman seçimi: sınıf düğmeleri (özellikle büyücü) kesilmesin — kaydırılabilir + kart geniş */
/* z-index: genel .overlay (5) HUD’dan (15–22) düşük kaldığı için mini harita / savaş günlüğü üstte kalıyordu */
#overlay-menu.overlay {
  z-index: 60;
  align-items: flex-start;
  justify-content: center;
  padding: max(8px, env(safe-area-inset-top, 0px)) 10px max(32px, env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 520px) {
  #overlay-menu.overlay {
    padding: max(6px, env(safe-area-inset-top, 0px)) 8px max(20px, env(safe-area-inset-bottom, 0px));
  }
  .char-select-card {
    width: min(100%, 100vw - 16px);
    margin: 4px 0 16px;
    padding: 16px 14px 18px;
  }
  .char-select-card h2 {
    font-size: 1.2rem;
  }
  .class-pick--grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/** Tam ekran modal — sahne sarsıntısı / layout’tan bağımsız sabit popup */
#overlay-loot.overlay--modal-fixed,
#overlay-hud-quick-menu.overlay--modal-fixed {
  position: fixed;
  inset: 0;
  display: flex;
  z-index: 74;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(24px, env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  align-items: center;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
}

/** Envanter (60 !important) ve upgrade (72) üstünde olmalı; yoksa Kapat tıkları alta gider */
#overlay-item-detail.overlay--modal-fixed {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 85 !important;
  padding: max(20px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
    max(20px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  pointer-events: auto;
  /* Tam ekran hafif karartma — popup hissi */
  background: rgba(4, 6, 12, 0.78);
  backdrop-filter: blur(10px) saturate(1.06);
}

#overlay-item-detail.overlay--modal-fixed .card.card--item-detail {
  width: min(92vw, 440px);
  max-width: 440px;
  min-width: min(92vw, 280px);
  max-height: min(86vh, 680px);
  flex: 0 1 auto;
  margin: auto;
  box-sizing: border-box;
  border-radius: 18px;
  padding: 22px 24px 20px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid rgba(150, 185, 255, 0.42);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.07),
    0 8px 32px rgba(0, 0, 0, 0.45),
    0 28px 72px rgba(0, 0, 0, 0.55),
    0 0 48px rgba(90, 130, 220, 0.14);
  animation: itemDetailPopupIn 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes itemDetailPopupIn {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(14px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #overlay-item-detail.overlay--modal-fixed .card.card--item-detail {
    animation: none;
  }
}

/**
 * ID + .overlay--modal-fixed içindeki display:flex, .overlay--hidden'dan daha güçlü olduğu için
 * gizli paneller açılışta yine de görünüyordu. Kapalıyken kesin gizle.
 */
#overlay-loot.overlay--modal-fixed.overlay--hidden,
#overlay-hud-quick-menu.overlay--modal-fixed.overlay--hidden,
#overlay-item-detail.overlay--modal-fixed.overlay--hidden,
#overlay-whisper.overlay--modal-fixed.overlay--hidden,
#overlay-social.overlay--modal-fixed.overlay--hidden,
#overlay-party-invite.overlay--modal-fixed.overlay--hidden {
  display: none !important;
}

#overlay-whisper.overlay--modal-fixed,
#overlay-social.overlay--modal-fixed,
#overlay-party-invite.overlay--modal-fixed {
  position: fixed;
  inset: 0;
  display: flex;
  z-index: 76;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(24px, env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  align-items: center;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
}

/* Envanter: .overlay sonradan align-items:center verdiği için üst kesiliyordu; üstten hizala + boşluk */
.overlay.overlay--inv {
  align-items: flex-start;
  justify-content: center;
  padding: max(20px, 8vh, env(safe-area-inset-top, 0px)) 16px 48px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 60 !important;
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(55, 48, 32, 0.45), transparent 58%),
    radial-gradient(ellipse 100% 80% at 80% 20%, rgba(30, 45, 75, 0.35), transparent 45%),
    radial-gradient(ellipse 90% 60% at 15% 80%, rgba(20, 35, 55, 0.4), transparent 50%),
    linear-gradient(168deg, #070a0f 0%, #0e121c 38%, #080b12 100%);
  backdrop-filter: blur(10px) saturate(1.08);
}

.overlay--dock-right {
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
  background: rgba(6, 8, 14, 0.5);
}

.overlay--dock-right .card--hud-side {
  align-self: stretch;
  max-height: none;
  height: 100%;
  max-width: min(400px, 94vw);
  width: 100%;
  margin: 0;
  border-radius: 14px 0 0 14px;
  overflow-y: auto;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.55);
}

.hud-side-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.hud-side-panel__title {
  margin: 0;
  font-size: 1.1rem;
}

.hud-side-panel__close {
  border: none;
  background: rgba(60, 80, 120, 0.45);
  color: var(--text);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.hud-side-panel__close:hover {
  background: rgba(100, 140, 200, 0.35);
}

/* Sürüklenerek konumlanan paneller (panel-drag.js) */
.panel--draggable-positioned.card--hud-side {
  height: auto !important;
  max-height: min(92vh, 900px) !important;
  align-self: flex-start !important;
}

.panel--draggable-positioned {
  box-sizing: border-box;
}

.char-panel-class {
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.char-panel-class__title-wrap {
  display: inline;
  margin-right: 6px;
  color: rgba(220, 200, 160, 0.95);
  font-weight: 700;
  font-size: 0.85em;
}

.char-panel-class__title {
  font-weight: 800;
  font-size: 0.78em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(95deg, #ffe8a8, #d4a040);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.char-panel-class .char-panel-class__name {
  color: #d4ecff;
  text-shadow: 0 0 14px rgba(120, 190, 255, 0.2);
}

.char-panel-lead {
  margin: 0 0 10px;
}

#overlay-npc-shop {
  z-index: 50;
}

#overlay-game-menu,
#overlay-help,
#overlay-hud-auto,
.overlay--hud-panel {
  z-index: 50;
}

/* Karakter paneli — tam ekran ortada modal (oyun sahnesi tamamen gizlenir) */
#overlay-hud-character.overlay--character-modal {
  position: fixed;
  inset: 0;
  z-index: 72 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(28px, env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #070a10;
  background-image:
    radial-gradient(ellipse 88% 58% at 50% 16%, rgb(32, 42, 62), rgb(7, 10, 16)),
    radial-gradient(ellipse 65% 45% at 85% 75%, rgb(28, 22, 18), rgb(7, 10, 16)),
    radial-gradient(ellipse 55% 40% at 10% 80%, rgb(18, 28, 42), rgb(7, 10, 16));
  /* Yarı saydam + backdrop-filter oyun canvas’ını gösteriyordu */
  backdrop-filter: none;
  -webkit-font-smoothing: antialiased;
}

#overlay-hud-character.overlay--character-modal.overlay--hidden {
  display: none !important;
}

@keyframes characterModalIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

#overlay-hud-character .card--character-modal {
  width: min(96vw, 500px);
  max-width: 500px;
  max-height: min(92vh, 880px);
  overflow-x: hidden;
  overflow-y: auto;
  margin: auto;
  align-self: center;
  border-radius: 18px;
  padding: 20px 22px 22px;
  background: linear-gradient(168deg, rgba(26, 32, 48, 0.98) 0%, rgba(10, 12, 20, 0.99) 55%, rgba(14, 16, 26, 1) 100%);
  border: 1px solid rgba(130, 150, 190, 0.22);
  box-shadow:
    0 0 0 1px rgba(255, 215, 140, 0.07),
    0 28px 72px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  scrollbar-gutter: stable;
}

#overlay-hud-character:not(.overlay--hidden) .card--character-modal {
  animation: characterModalIn 0.24s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  #overlay-hud-character:not(.overlay--hidden) .card--character-modal {
    animation: none;
  }
}

#overlay-hud-character .character-modal__head {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(100, 130, 180, 0.18);
}

#overlay-hud-character .hud-side-panel__title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(180, 195, 220, 0.88);
}

#overlay-hud-character .character-modal__close {
  border-radius: 10px;
  border: 1px solid rgba(120, 150, 200, 0.25);
  background: rgba(28, 36, 52, 0.9);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

#overlay-hud-character .character-modal__close:hover {
  background: rgba(50, 65, 95, 0.85);
  border-color: rgba(200, 180, 120, 0.35);
  color: #fff8e8;
}

#overlay-hud-character .stat-grid--card {
  background: rgba(0, 0, 0, 0.18);
  border-color: rgba(100, 140, 200, 0.14);
}

#overlay-hud-character .stat-row--alloc:not(.stat-row--stat-pri):not(.stat-row--stat-sec):not(.stat-row--stat-low) {
  background: rgba(8, 10, 18, 0.55);
  border-color: rgba(110, 140, 190, 0.16);
}

#overlay-hud-character .stat-row--derived:not(.stat-row--derived-em):not(.stat-row--derived-sec-hl) {
  background: rgba(6, 8, 14, 0.4);
  border-color: rgba(90, 120, 160, 0.12);
}

#overlay-hud-character .char-stat-summary {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(100, 130, 170, 0.12);
  line-height: 1.45;
}

#overlay-hud-character .stat-allocate {
  background: rgba(18, 24, 38, 0.65);
  border: 1px solid rgba(120, 160, 220, 0.18);
  border-radius: 12px;
  padding: 12px 14px;
}

#overlay-hud-character .hud-pet {
  border-radius: 12px;
  border-color: rgba(140, 120, 200, 0.22);
}

#overlay-hud-character .gold--card {
  border-radius: 10px;
}

#overlay-combat {
  align-items: flex-end;
  padding: 16px;
  background: linear-gradient(to bottom, transparent 0%, transparent 42%, rgba(8, 10, 18, 0.88) 58%);
  pointer-events: none;
}

#overlay-combat .card {
  pointer-events: auto;
}

.shop-btns {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.shop-btns button {
  font-size: 0.75rem;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(40, 50, 70, 0.85);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.shop-btns button:hover {
  background: rgba(80, 120, 200, 0.2);
}

.overlay--hidden {
  display: none;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 24px;
  max-width: 420px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}

.card--wide {
  max-width: 640px;
  width: min(94%, 640px);
}

.card h2 {
  margin: 0 0 10px;
  font-size: 1.2rem;
}

.lead {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.char-select-card {
  max-width: 960px;
  width: min(98vw, 960px);
  margin: 8px 0 24px;
  box-sizing: border-box;
  background:
    linear-gradient(165deg, rgba(16, 20, 34, 0.98), rgba(10, 14, 24, 0.99)),
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(100, 140, 220, 0.22), transparent 52%);
  border: 1px solid rgba(120, 160, 220, 0.38);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
}

.char-select__kicker {
  margin: 0 0 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #d4a84b;
}

.char-select-card h2 {
  margin: 0 0 10px;
  font-size: 1.45rem;
  letter-spacing: 0.02em;
}

.char-select__lead {
  margin: 0 0 14px;
}

.res-pick--menu {
  margin-bottom: 12px;
}

.char-select__name-block {
  margin: 6px 0 18px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(100, 140, 200, 0.22);
}

.char-select__label {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  color: rgba(200, 210, 230, 0.85);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}

.char-select__input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid rgba(120, 160, 220, 0.45);
  background: rgba(6, 10, 20, 0.92);
  color: var(--text);
  font-size: 1.02rem;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.char-select__input:focus {
  border-color: rgba(160, 200, 255, 0.65);
  box-shadow: 0 0 0 3px rgba(100, 140, 220, 0.2);
}

.char-select__name-hint {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

.char-select__race-block {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(100, 140, 200, 0.2);
}

.race-pick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.race-pick__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 2px solid rgba(120, 140, 180, 0.35);
  background: linear-gradient(180deg, rgba(32, 38, 52, 0.95), rgba(18, 22, 32, 0.98));
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.18s,
    box-shadow 0.2s,
    background 0.18s;
}

.race-pick__btn:hover {
  border-color: rgba(160, 200, 255, 0.45);
  box-shadow: 0 0 20px rgba(100, 160, 255, 0.18);
}

.race-pick__btn strong {
  font-size: 0.95rem;
}

.race-pick__btn small {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.35;
}

.race-pick__btn--active {
  border-color: rgba(180, 210, 255, 0.75);
  background: rgba(55, 75, 120, 0.42);
  box-shadow: 0 0 22px rgba(120, 170, 255, 0.25);
}

.char-panel-class__sub {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
}

.class-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}

.class-pick--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin: 14px 0 20px;
  padding-bottom: 12px;
}

.class-btn {
  flex: 1 1 120px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 2px solid rgba(120, 140, 180, 0.35);
  background: linear-gradient(180deg, rgba(36, 42, 58, 0.95), rgba(22, 26, 38, 0.98));
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition:
    background 0.18s,
    box-shadow 0.2s,
    transform 0.15s,
    border-color 0.2s;
}

.class-btn:hover {
  background: rgba(50, 70, 110, 0.45);
  box-shadow: 0 0 28px rgba(100, 160, 255, 0.22);
  transform: translateY(-2px);
  border-color: rgba(160, 200, 255, 0.45);
}

.class-btn:active {
  transform: translateY(0);
}

.class-btn--disabled,
.class-btn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.char-select__input--invalid {
  border-color: rgba(200, 90, 90, 0.65) !important;
  box-shadow: 0 0 0 2px rgba(200, 80, 80, 0.15) !important;
}

.class-btn--warrior {
  border-color: rgba(200, 100, 100, 0.55);
}

.class-btn--mage {
  border-color: rgba(140, 110, 220, 0.55);
}

.class-btn--healer {
  border-color: rgba(90, 200, 150, 0.55);
}

.class-btn--archer {
  border-color: rgba(100, 180, 120, 0.55);
}

.class-btn--assassin {
  border-color: rgba(140, 100, 200, 0.55);
}

.class-btn strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1.02rem;
}

.class-btn small {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.hint {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
}

#overlay-combat-log {
  min-height: 72px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--muted);
  margin-bottom: 12px;
  white-space: pre-wrap;
}

.combat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.combat-actions button {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(50, 60, 90, 0.85);
  color: var(--text);
  cursor: pointer;
  font-size: 0.88rem;
}

.combat-actions button:hover {
  background: rgba(90, 120, 200, 0.35);
}

.btn-close {
  float: right;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
}

.inv-layout {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

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

  .inv-col--sidebar {
    max-height: none;
  }
}

.equip-slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.equip-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px dashed var(--border);
  min-height: 44px;
  font-size: 0.85rem;
  color: var(--muted);
}

.inv-col--bag .inv-grid {
  gap: 7px;
}

.inv-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  counter-reset: invslot;
}

.craft-panel {
  margin-top: 6px;
  border: 1px solid rgba(120, 160, 220, 0.24);
  border-radius: 10px;
  padding: 8px;
  background: rgba(8, 14, 26, 0.55);
}

.craft-prof-line {
  margin: 0 0 8px;
  font-size: 0.74rem;
  color: #c8d7ee;
}

.craft-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 230px;
  overflow: auto;
}

.craft-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(120, 160, 220, 0.16);
}

.craft-row__meta {
  min-width: 0;
  font-size: 0.72rem;
}

.craft-row__sub {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.66rem;
  white-space: normal;
}

.craft-row__btn {
  flex-shrink: 0;
  padding: 4px 8px;
  font-size: 0.72rem;
}

.inv-cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  border: 2px solid rgba(80, 100, 140, 0.35);
  background: linear-gradient(180deg, rgba(35, 42, 58, 0.65), rgba(0, 0, 0, 0.45));
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-size: 0.7rem;
  text-align: center;
  padding: 4px;
  color: var(--text);
}

.inv-cell::before {
  counter-increment: invslot;
  content: counter(invslot);
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 0.58rem;
  color: rgba(160, 170, 200, 0.4);
  font-weight: 700;
  z-index: 1;
}

.inv-cell:hover {
  background: rgba(80, 120, 200, 0.2);
  border-color: rgba(120, 160, 220, 0.45);
}

.inv-cell--selected {
  border-color: rgba(200, 160, 80, 0.85);
  box-shadow:
    0 0 0 1px rgba(255, 200, 100, 0.25),
    inset 0 0 20px rgba(200, 160, 80, 0.08);
}

.inv-cell--dimmed {
  opacity: 0.32;
  filter: grayscale(0.35);
}

.inv-cell--empty {
  opacity: 0.4;
  cursor: default;
}

.zone-name {
  font-weight: 600;
  color: var(--accent);
}

.zone-teleport-help {
  margin: 14px 0 8px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(120, 160, 220, 0.25);
  text-align: left;
}

.zone-teleport-help__h {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.zone-teleport-help__p {
  margin: 0 0 8px;
  font-size: 0.85rem;
  line-height: 1.5;
}

.zone-teleport-help__p:last-child {
  margin-bottom: 0;
}

.teleport-gate-hud {
  position: absolute;
  left: 50%;
  bottom: 108px;
  transform: translateX(-50%);
  z-index: 25;
  max-width: min(520px, 94vw);
  pointer-events: none;
}

.teleport-gate-hud--hidden {
  opacity: 0;
  visibility: hidden;
}

.teleport-gate-hud__inner {
  padding: 12px 18px 14px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(18, 22, 38, 0.96), rgba(28, 20, 48, 0.92));
  border: 1px solid rgba(160, 120, 255, 0.45);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 8px 32px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(140, 100, 255, 0.15);
}

.teleport-gate-hud__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.teleport-gate-hud__tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c8b8ff;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(120, 80, 200, 0.35);
  border: 1px solid rgba(180, 140, 255, 0.35);
}

.teleport-gate-hud__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #f0ecff;
}

.teleport-gate-hud__cost {
  margin: 8px 0 6px;
  font-size: 0.92rem;
  color: #ffd56a;
}

.teleport-gate-hud__hint {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(200, 210, 230, 0.75);
}

.keys {
  margin: 0;
  padding-left: 1.1em;
  font-size: 0.85rem;
  color: var(--muted);
}

kbd {
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-size: 0.78rem;
}

#overlay-premium {
  z-index: 6;
}

#overlay-hud-shop {
  z-index: 50;
}

.overlay-gold-shop-card {
  max-width: min(720px, 96vw);
  max-height: min(88vh, 820px);
  overflow-y: auto;
  width: 100%;
  text-align: left;
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(80, 200, 255, 0.1), transparent 55%),
    linear-gradient(168deg, rgba(14, 18, 32, 0.98), rgba(8, 10, 18, 0.99));
  border: 1px solid rgba(90, 180, 220, 0.38);
  box-shadow:
    0 0 0 1px rgba(120, 200, 255, 0.07),
    0 24px 80px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.overlay-gold-shop-card .overlay-premium-card__head h2 {
  background: linear-gradient(92deg, #e8f8ff, #7dd3fc 45%, #fff 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gold-mag-strip {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 8px 14px;
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
  background: linear-gradient(135deg, rgba(12, 40, 52, 0.95), rgba(10, 24, 36, 0.92));
  border: 1px solid rgba(80, 200, 255, 0.45);
  box-shadow:
    0 0 24px rgba(60, 180, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.gold-mag-strip__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(160, 210, 240, 0.85);
}

.gold-mag-strip__value {
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #a5f3fc;
  text-shadow: 0 0 18px rgba(100, 200, 255, 0.35);
}

.gold-mag-strip__unit {
  font-size: 1.1rem;
  color: #67e8f9;
}

.gold-shop-lead {
  margin: 0 0 8px;
}

.gold-shop-count-line {
  margin: 0 0 8px;
  font-size: 0.82rem;
  color: rgba(200, 210, 230, 0.88);
  line-height: 1.4;
}

.overlay-premium-card {
  max-width: min(720px, 96vw);
  max-height: min(92vh, 920px);
  overflow-y: auto;
  width: 100%;
  text-align: left;
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(255, 200, 120, 0.12), transparent 55%),
    linear-gradient(168deg, rgba(14, 18, 32, 0.98), rgba(8, 10, 18, 0.99));
  border: 1px solid rgba(200, 160, 90, 0.35);
  box-shadow:
    0 0 0 1px rgba(255, 220, 140, 0.06),
    0 24px 80px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.overlay-premium-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.overlay-premium-card__head-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.overlay-premium-card__head h2 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  background: linear-gradient(92deg, #fff8e8, #ffd56a 45%, #fff 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.premium-mag-strip {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 8px 14px;
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
  background: linear-gradient(135deg, rgba(40, 28, 12, 0.95), rgba(24, 18, 10, 0.92));
  border: 1px solid rgba(255, 200, 100, 0.45);
  box-shadow:
    0 0 24px rgba(255, 180, 60, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.premium-mag-strip__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(220, 200, 160, 0.85);
}

.premium-mag-strip__value {
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #ffe8a8;
  text-shadow: 0 0 18px rgba(255, 200, 80, 0.35);
}

.premium-mag-strip__unit {
  font-size: 1.1rem;
  color: #ffd56a;
}

.premium-earn-hints {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 200, 120, 0.35);
}

.premium-earn-hints__lead {
  margin: 0 0 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffd56a;
}

.premium-earn-hints__list {
  margin: 0;
  padding-left: 1.2em;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
}

.premium-earn-hints__list strong {
  color: var(--text);
}

.card--loot {
  max-width: 420px;
  width: min(96%, 420px);
  text-align: center;
}

.card--loot-popup {
  position: relative;
  border: 1px solid rgba(140, 180, 255, 0.4);
  background:
    radial-gradient(ellipse 100% 80% at 50% -10%, rgba(100, 140, 220, 0.2), transparent 50%),
    linear-gradient(165deg, rgba(18, 22, 38, 0.98), rgba(10, 12, 22, 0.99));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 28px 90px rgba(0, 0, 0, 0.55);
  animation: lootPopupIn 0.22s ease-out;
}

@keyframes lootPopupIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.premium-section__head--market {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.premium-market-filters {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

.premium-filter-btn {
  border: 1px solid rgba(100, 140, 200, 0.4);
  background: rgba(22, 28, 44, 0.85);
  color: var(--muted);
  font-size: 0.78rem;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.premium-filter-btn:hover {
  color: var(--text);
  border-color: rgba(160, 190, 255, 0.55);
}

.premium-filter-btn--active {
  color: #1a1208;
  font-weight: 700;
  border-color: rgba(255, 200, 120, 0.65);
  background: linear-gradient(135deg, #ffd56a, #e8a040);
  box-shadow: 0 4px 16px rgba(255, 180, 60, 0.25);
}

.premium-market-count-line {
  margin: 0 0 8px;
  font-size: 0.82rem;
  color: rgba(200, 210, 230, 0.88);
  line-height: 1.4;
}

.premium-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.premium-shop-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 12px 12px 10px;
  border-radius: 12px;
  border: 1px solid rgba(100, 140, 200, 0.28);
  background: linear-gradient(155deg, rgba(26, 32, 52, 0.95), rgba(12, 16, 28, 0.92));
  overflow: hidden;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.premium-shop-card:hover {
  border-color: rgba(180, 210, 255, 0.45);
  transform: translateY(-2px);
}

.premium-shop-card__shine {
  position: absolute;
  inset: -40% -20% auto;
  height: 56%;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.06) 50%, transparent 60%);
  pointer-events: none;
}

.premium-shop-card--rarity-legendary {
  border-color: rgba(255, 179, 71, 0.45);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 120, 0.08);
}

.premium-shop-card--rarity-epic {
  border-color: rgba(197, 107, 255, 0.4);
}

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

.premium-shop-card__glyph {
  font-size: 1.25rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.premium-shop-card__rarity {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.premium-shop-card__name {
  margin: 0 0 6px;
  font-size: 0.95rem;
  line-height: 1.25;
  color: #eef4ff;
}

.premium-shop-card__detail {
  margin: 0 0 10px;
  flex: 1;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.premium-shop-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}

.premium-shop-card__price {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
}

.premium-shop-card__price--gold {
  color: #ffd56a;
}

.premium-shop-card__price--star {
  color: #ffe8a8;
  text-shadow: 0 0 12px rgba(255, 200, 80, 0.25);
}

.premium-shop-card__buy {
  flex-shrink: 0;
  padding: 6px 10px;
  font-size: 0.75rem;
  border-radius: 8px;
}

.premium-shop-card__buy--cant {
  opacity: 0.55;
}

@media (max-width: 520px) {
  .premium-market-filters {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }

  .premium-shop-grid {
    grid-template-columns: 1fr;
  }
}

.loot-sub {
  font-size: 0.82rem;
  margin: 0 0 8px;
  line-height: 1.4;
}

.loot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 12px auto 14px;
  max-width: 340px;
}

.loot-cell {
  position: relative;
  min-height: 92px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(120, 160, 220, 0.35);
  background: linear-gradient(165deg, rgba(24, 32, 48, 0.95), rgba(12, 16, 28, 0.92));
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text);
  font-size: 0.75rem;
  transition: filter 0.12s ease, border-color 0.12s ease;
}

.loot-cell:hover:not(:disabled) {
  filter: brightness(1.08);
  border-color: rgba(180, 210, 255, 0.55);
}

.loot-cell:disabled,
.loot-cell--claimed {
  cursor: default;
  opacity: 0.55;
  filter: grayscale(0.35);
}

.loot-cell__claimed {
  font-size: 1.6rem;
  color: #6c8;
}

.loot-cell__ico {
  font-size: 1.5rem;
  line-height: 1;
}

.loot-cell__ico--xp {
  font-weight: 800;
  font-size: 1rem;
  color: #7cf0c2;
}

.loot-cell__ico--star {
  font-size: 1.6rem;
  color: #ffd56a;
}

.loot-cell__amt {
  font-weight: 700;
  font-size: 0.8rem;
}

.loot-cell__icon {
  width: 44px !important;
  height: 44px !important;
}

.loot-cell__qty {
  font-weight: 700;
  font-size: 0.78rem;
  color: #b8c8e8;
}

.loot-hover-detail {
  min-height: 3.2em;
  margin: 0 auto 12px;
  padding: 10px 12px;
  max-width: 340px;
  text-align: left;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.35);
  border-radius: 8px;
  border: 1px solid rgba(100, 140, 200, 0.22);
}

.loot-hover-detail strong {
  color: var(--text);
}

.loot-hover-rarity {
  color: #9ad4ff;
  font-size: 0.78rem;
}

.loot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
}

.card--loot .btn-primary {
  margin-top: 0;
}

.loot-items-list {
  margin: 8px 0 0;
  padding-left: 1.2em;
  text-align: left;
  color: var(--text);
}

.loot-premium-line {
  margin: 6px 0 0;
  color: #ffd56a;
  font-size: 0.88rem;
}

.loot-body {
  text-align: left;
  margin: 12px 0 18px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(120, 180, 255, 0.2);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}

.loot-body strong {
  color: var(--text);
}

.btn-primary {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(160, 120, 255, 0.5);
  background: linear-gradient(180deg, rgba(90, 70, 140, 0.9), rgba(50, 40, 90, 0.95));
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  font-size: 0.95rem;
}

.btn-primary:hover {
  filter: brightness(1.08);
}

/* Toast (js/ui.js createUI) — alt orta, yatay kayma yok */
.toast {
  position: fixed;
  bottom: max(24px, env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  max-width: min(420px, 92vw);
  padding: 10px 18px;
  border-radius: 10px;
  background: rgba(14, 18, 30, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #e8ecf4;
  border: 1px solid rgba(120, 170, 255, 0.38);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.5);
  z-index: 200;
  font-size: 0.9rem;
  line-height: 1.35;
}

.map-banner {
  position: absolute;
  left: 50%;
  bottom: max(118px, calc(env(safe-area-inset-bottom, 0px) + 108px));
  top: auto;
  transform: translate3d(-50%, 0, 0);
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(10, 14, 24, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(120, 160, 220, 0.35);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
  z-index: 8;
  pointer-events: none;
  max-width: min(420px, 92vw);
  animation: bannerIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.map-banner.map-banner--stack-ko {
  bottom: max(210px, calc(env(safe-area-inset-bottom, 0px) + 200px));
}

.map-banner.overlay--hidden {
  display: none;
}

@keyframes bannerIn {
  from {
    opacity: 0;
    transform: translate3d(-50%, 8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }
}

/* Knight Online tarzı üst bildirim + hedef çubuğu */
.ko-banner {
  position: absolute;
  left: 50%;
  bottom: max(90px, calc(env(safe-area-inset-bottom, 0px) + 80px));
  top: auto;
  transform: translate3d(-50%, 0, 0);
  z-index: 42;
  min-width: 0;
  max-width: min(400px, 92vw);
  pointer-events: none;
}

.ko-banner.ko-banner--stack-map {
  bottom: max(78px, calc(env(safe-area-inset-bottom, 0px) + 68px));
}

.ko-banner--hidden {
  display: none !important;
}

.ko-banner__inner {
  background: linear-gradient(180deg, rgba(36, 28, 20, 0.96), rgba(14, 10, 8, 0.98));
  border: 1px solid rgba(201, 160, 80, 0.65);
  border-radius: 10px;
  padding: 10px 16px 12px;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 220, 160, 0.08);
  text-align: center;
  transform-origin: 50% 100%;
  animation: koBannerIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ko-banner--level .ko-banner__inner {
  border-color: #ffd56a;
  box-shadow: 0 0 28px rgba(255, 200, 100, 0.25), 0 12px 40px rgba(0, 0, 0, 0.75);
}

.ko-banner--quest .ko-banner__inner {
  border-color: #5ec8e8;
}

.ko-banner--equip .ko-banner__inner {
  border-color: #a8d4a8;
}

.ko-banner--target .ko-banner__inner {
  border-color: #e8c878;
}

.ko-banner--warn .ko-banner__inner {
  border-color: #c06666;
}

.ko-banner--death .ko-banner__inner {
  border-color: #884444;
  box-shadow:
    0 0 32px rgba(180, 60, 60, 0.22),
    0 12px 40px rgba(0, 0, 0, 0.75);
}

.ko-banner__count {
  font-size: clamp(1.45rem, 5vw, 2.1rem);
  font-weight: 900;
  color: #ffb0a0;
  text-shadow: 0 3px 10px #000;
  margin-top: 6px;
  line-height: 1;
  letter-spacing: 0.06em;
}

.ko-banner--death .ko-banner__count:empty {
  display: none;
}

.ko-banner__tag {
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  color: #e8c878;
  margin-bottom: 5px;
  font-weight: 700;
}

.ko-banner__title {
  font-size: clamp(0.88rem, 2.2vw, 1.12rem);
  font-weight: 800;
  color: #fff8ec;
  text-shadow: 0 2px 6px #000;
  line-height: 1.25;
}

.ko-banner__sub {
  font-size: 0.76rem;
  color: #c8b8a0;
  margin-top: 5px;
  line-height: 1.35;
}

@keyframes koBannerIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Notice: üst orta — sadece dikey + opaklık (yatay kayma yok) */
.notice-stack {
  position: absolute;
  left: 50%;
  top: 44px;
  transform: translate3d(-50%, 0, 0);
  z-index: 48;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  gap: 8px 10px;
  width: min(1120px, calc(100vw - 20px));
  max-width: min(1120px, calc(100vw - 20px));
  padding: 0 6px;
  box-sizing: border-box;
  pointer-events: none;
}

.notice-banner {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(340px, calc(50vw - 18px));
  padding: 8px 14px 9px;
  background: rgba(22, 12, 32, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(212, 168, 74, 0.45);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  text-align: center;
  line-height: 1.35;
  opacity: 0;
  transform: translate3d(0, -10px, 0);
  transition:
    opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.notice-banner--in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.notice-banner--out {
  opacity: 0;
  transform: translate3d(0, -8px, 0);
  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
}

.notice-banner__tag {
  font-size: 0.55rem;
  letter-spacing: 0.24em;
  color: #ffd56a;
  font-weight: 800;
  text-shadow: 0 1px 4px #000;
}

.notice-banner__msg {
  font-size: clamp(0.72rem, 1.8vw, 0.88rem);
  font-weight: 700;
  color: #fff8f0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}

.hud-target {
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: auto;
  transform: translateX(-50%);
  z-index: 14;
  min-width: 220px;
  max-width: min(360px, 92vw);
  padding: 8px 14px 10px;
  background: rgba(6, 8, 12, 0.92);
  border: 1px solid rgba(200, 160, 90, 0.5);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.hud-target--hidden {
  display: none !important;
}

.hud-target__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 0.84rem;
}

.hud-target__label {
  color: #c9a050;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

.hud-target__name {
  color: #ffd76a;
  font-weight: 700;
  text-align: right;
  flex: 1;
  min-width: 0;
}

.hud-target__mul {
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #1a0a08;
  background: linear-gradient(165deg, #ffd56a, #c9a227);
  border: 1px solid rgba(255, 240, 200, 0.55);
}

.hud-target__hp-text {
  margin: 6px 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(230, 220, 200, 0.88);
  text-align: center;
  letter-spacing: 0.02em;
}

.hud-target__bar {
  height: 7px;
  margin-top: 8px;
  border-radius: 3px;
  background: #0a0a0c;
  overflow: hidden;
  border: 1px solid rgba(80, 60, 40, 0.6);
}

.hud-target__fill {
  height: 100%;
  background: linear-gradient(90deg, #8a2222, #e85555);
  width: 100%;
  transition: width 0.12s ease-out;
}

/* Soulforge — hesap & sunucu seçimi */
.card--soulforge {
  max-width: 420px;
}

.soulforge-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.soulforge-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.soulforge-offline {
  margin-top: 8px;
  width: 100%;
}

.soulforge-error {
  color: #ff9a8a;
  font-size: 0.86rem;
  margin: 0;
}

.soulforge-session-hint {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
}

.soulforge-form .login-pet-pref {
  margin: 2px 0 0;
  font-size: 0.8rem;
  line-height: 1.35;
}

.server-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0;
  max-height: min(52vh, 420px);
  overflow-y: auto;
}

.server-pick-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(120, 160, 220, 0.35);
  background: rgba(12, 16, 28, 0.85);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color 0.2s, background 0.2s;
}

.server-pick-row:hover:not(:disabled) {
  border-color: rgba(180, 210, 255, 0.55);
  background: rgba(20, 28, 48, 0.95);
}

.server-pick-row--disabled,
.server-pick-row:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.server-pick-row__name {
  font-weight: 700;
  letter-spacing: 0.03em;
}

.server-pick-row__meta {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}

.queue-status-detail {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 12px 0;
}

.soulforge-queue-hint {
  font-size: 0.82rem;
  margin-top: 8px;
}

/* ——— Giriş sayfası (index.html) ——— */
.app-root--login {
  position: relative;
  min-height: 100vh;
}

.login-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.login-backdrop__glow {
  position: absolute;
  inset: -25%;
  background: radial-gradient(ellipse 70% 50% at 50% 15%, rgba(90, 140, 220, 0.22), transparent 55%);
}

.login-main {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px 48px;
}

.login-header {
  text-align: center;
  margin-bottom: 8px;
}

.login-header .logo {
  font-size: clamp(1.28rem, 4vw, 1.52rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #f2f6ff;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.42),
    0 0 26px rgba(120, 170, 255, 0.32);
}

.login-tagline {
  color: var(--muted);
  margin: 10px 0 0;
  font-size: 0.92rem;
  max-width: 36rem;
}

.app-root--login .login-overlay.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
}

/* İlk ziyaret: cihaz + dil — auth gizli, onboarding üstte */
body.login-prefers-onboarding #overlay-auth.login-overlay {
  display: none !important;
}

body.login-prefers-onboarding #overlay-login-onboarding.overlay.overlay--hidden {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(24px, env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  z-index: 11;
}

.login-onboard-card {
  width: min(100%, 520px);
  margin: 0 auto;
}

.login-onboard-device-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 14px 0 18px;
}

@media (min-width: 520px) {
  .login-onboard-device-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}

.login-onboard__btn {
  min-height: 44px;
  font-size: 0.92rem;
}

.login-onboard__btn--active {
  border-color: rgba(160, 200, 255, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(100, 140, 220, 0.35);
  background: rgba(50, 70, 110, 0.45);
}

.login-onboard-next,
#btn-onboard-start {
  width: 100%;
  margin-top: 8px;
}

.login-onboard-lang {
  margin: 12px 0 16px;
  justify-content: center;
}

.login-onboard-skip-wrap {
  margin: 16px 0 0;
  text-align: center;
}

/* ——— Oyun sohbet dock (game.html) ——— */
.chat-dock {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  max-width: min(400px, calc(100vw - 20px));
  pointer-events: none;
}

.chat-dock > * {
  pointer-events: auto;
}

.chat-dock__toggle {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(14, 18, 30, 0.92);
  color: var(--text);
  font-size: 1.25rem;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.chat-dock__toggle:hover {
  border-color: rgba(160, 200, 255, 0.55);
}

/* Açık panel varken sadece 💬 düğmesi; küçültülmüş durumda panel tamamen gizli */
.chat-dock--collapsed .chat-dock__panel {
  display: none !important;
}

.chat-dock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
}

.chat-dock__title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(200, 210, 230, 0.88);
}

.chat-dock__head-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat-dock__icon-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(100, 140, 200, 0.4);
  background: rgba(12, 16, 28, 0.95);
  color: rgba(220, 230, 255, 0.9);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-dock__icon-btn:hover {
  border-color: rgba(160, 200, 255, 0.55);
  background: rgba(20, 26, 42, 0.98);
}

.chat-dock__icon-btn[aria-pressed="true"] {
  border-color: rgba(150, 200, 255, 0.65);
  background: rgba(36, 48, 72, 0.95);
  color: #fff;
}

.chat-dock__icon-btn--close {
  font-size: 1.35rem;
  font-weight: 300;
  line-height: 0.85;
}

.chat-dock__panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(380px, calc(100vw - 20px));
  padding: 12px 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(100, 140, 200, 0.38);
  background: linear-gradient(165deg, rgba(16, 20, 34, 0.98) 0%, rgba(8, 10, 18, 0.99) 100%);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  max-height: min(42vh, 340px);
  min-height: 0;
}

.chat-dock--compact .chat-dock__panel {
  max-height: min(28vh, 220px);
}

.chat-dock--compact .chat-messages {
  min-height: 48px;
  max-height: min(14vh, 120px);
}

.chat-dock__tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.chat-dock__tab {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(100, 140, 200, 0.35);
  background: rgba(20, 26, 40, 0.85);
  color: var(--muted);
  font-size: 0.78rem;
  cursor: pointer;
}

.chat-dock__tab--active {
  color: var(--text);
  border-color: rgba(150, 200, 255, 0.65);
  background: rgba(32, 44, 68, 0.98);
  box-shadow: 0 0 0 1px rgba(120, 170, 255, 0.2);
}

.chat-messages {
  flex: 1;
  min-height: 88px;
  max-height: min(24vh, 220px);
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 0.8rem;
  line-height: 1.35;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(40, 50, 70, 0.9);
  background: #050608;
  color: #e4e9f2;
}

.chat-msg {
  margin-bottom: 4px;
  word-break: break-word;
}

.chat-msg__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}

.chat-msg__nick {
  color: rgba(160, 200, 255, 0.95);
  font-weight: 600;
}

.chat-msg__race-glyph {
  margin-right: 0.2em;
  font-weight: 800;
}

.chat-msg__nick.chat-msg__nick--good {
  color: #8bdcff;
}

.chat-msg__nick.chat-msg__nick--evil {
  color: #e8b0ff;
}

.chat-msg__time {
  font-size: 0.72rem;
  color: rgba(160, 170, 190, 0.75);
}

.chat-msg__text {
  word-break: break-word;
}

.chat-dock__composer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-dock__input {
  width: 100%;
  min-width: 0;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(80, 110, 160, 0.45);
  background: rgba(4, 6, 12, 0.95);
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
}

.chat-dock__input::placeholder {
  color: rgba(200, 210, 230, 0.45);
}

.chat-dock__actions {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
}

.chat-dock__aux {
  flex: 0 0 36px;
  min-height: 44px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(100, 140, 200, 0.4);
  background: rgba(14, 18, 30, 0.95);
  color: rgba(200, 215, 255, 0.85);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-dock__aux:hover {
  border-color: rgba(160, 200, 255, 0.55);
  background: rgba(22, 28, 44, 0.98);
}

.chat-dock__send {
  flex: 1;
  min-height: 44px;
  padding: 0 16px;
  border: none;
  border-radius: 12px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(180deg, #9b4dff 0%, #6b2fd4 45%, #4a1fa8 100%);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.12) inset,
    0 6px 18px rgba(80, 40, 180, 0.45);
}

.chat-dock__send:hover {
  filter: brightness(1.06);
}

.chat-dock__send:active {
  transform: translateY(1px);
  filter: brightness(0.96);
}

/* Oyuncu üzerinde sağ tık menüsü */
.player-context-menu {
  position: fixed;
  z-index: 88;
  min-width: 180px;
  padding: 6px 0;
  border-radius: 10px;
  border: 1px solid rgba(120, 170, 255, 0.45);
  background: rgba(10, 14, 24, 0.97);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
}

.player-context-menu__btn {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
}

.player-context-menu__btn:hover {
  background: rgba(60, 90, 140, 0.35);
}

.friend-context-menu {
  z-index: 92;
}

.social-friends__row--buddy {
  cursor: context-menu;
  user-select: none;
}

.social-friends__row--buddy .social-friends__id {
  display: block;
  padding: 4px 0;
}

/* ——— Sol şerit: özel mesaj (fısıltı) ——— */
.whisper-strip {
  position: absolute;
  left: max(6px, env(safe-area-inset-left, 0px));
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: min(160px, 28vw);
  max-height: min(72vh, 520px);
  padding: 8px 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(140, 100, 220, 0.45);
  background: linear-gradient(165deg, rgba(18, 12, 32, 0.96) 0%, rgba(8, 8, 16, 0.98) 100%);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

.whisper-strip__head {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(200, 170, 255, 0.85);
}

.whisper-strip__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  min-height: 0;
}

.whisper-strip__empty {
  font-size: 0.75rem;
}

.whisper-strip__btn {
  width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(120, 90, 200, 0.4);
  background: rgba(30, 22, 50, 0.9);
  color: #e8e4ff;
  font: inherit;
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whisper-strip__btn:hover {
  border-color: rgba(180, 140, 255, 0.65);
  background: rgba(44, 32, 72, 0.95);
}

@keyframes whisper-blink {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(180, 120, 255, 0.35);
  }
  50% {
    opacity: 0.55;
    box-shadow: 0 0 14px 2px rgba(200, 140, 255, 0.55);
  }
}

.whisper-strip__btn--blink {
  animation: whisper-blink 1.1s ease-in-out infinite;
  border-color: rgba(220, 160, 255, 0.85);
  color: #fff;
}

.whisper-strip--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-12px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.whisper-strip-launcher {
  position: absolute;
  left: max(6px, env(safe-area-inset-left, 0px));
  top: 50%;
  transform: translateY(-50%);
  z-index: 51;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(140, 100, 220, 0.55);
  background: linear-gradient(165deg, rgba(18, 12, 32, 0.96) 0%, rgba(8, 8, 16, 0.98) 100%);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #e8e4ff;
}

.whisper-strip-launcher:hover {
  border-color: rgba(200, 160, 255, 0.8);
}

.whisper-strip-launcher__glyph {
  font-size: 1.2rem;
  line-height: 1;
}

.whisper-strip-launcher__badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e85555, #b03030);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.friend-invite-banner {
  position: fixed;
  top: max(48px, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 160;
  max-width: min(540px, 94vw);
}

.friend-invite-banner--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.friend-invite-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(100, 160, 230, 0.5);
  background: linear-gradient(165deg, rgba(20, 32, 52, 0.98), rgba(8, 12, 22, 0.98));
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55);
}

.friend-invite-banner__icon {
  font-size: 1.45rem;
  line-height: 1;
}

.friend-invite-banner__text {
  margin: 0;
  flex: 1;
  min-width: 180px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text, #e8f0ff);
}

.friend-invite-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.friend-invite-banner__btn {
  font-size: 0.82rem;
  padding: 6px 12px;
}

.guild-invite-banner {
  top: max(118px, calc(env(safe-area-inset-top, 0px) + 72px));
}

.guild-invite-banner .friend-invite-banner__inner {
  border-color: rgba(210, 170, 90, 0.55);
  background: linear-gradient(165deg, rgba(32, 26, 18, 0.98), rgba(8, 10, 16, 0.99));
}

.guild-tab-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.guild-discover-bar {
  margin: 0;
}

.guild-discover-bar--hidden {
  display: none !important;
}

.guild-discover-bar__btn {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(120, 160, 220, 0.45);
  background: linear-gradient(165deg, rgba(20, 32, 52, 0.95), rgba(8, 12, 22, 0.98));
  color: #d4e4ff;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.guild-discover-bar__btn:hover {
  border-color: rgba(160, 200, 255, 0.55);
  background: linear-gradient(165deg, rgba(32, 44, 72, 0.98), rgba(12, 18, 32, 0.99));
}

.guild-directory-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.guild-directory-stack--collapsed {
  display: none;
}

.guild-directory-section {
  min-width: 0;
}

.guild-create-section__title {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(200, 220, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.guild-create-section .guild-create-panel {
  margin-top: 0;
}

.social-form-row--guild-tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.guild-hub {
  margin-bottom: 0;
  padding: 14px 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(90, 130, 200, 0.38);
  background: linear-gradient(165deg, rgba(10, 16, 28, 0.92), rgba(4, 8, 16, 0.96));
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
}

.guild-hub__title {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #d4e4ff;
}

.guild-hub__hint {
  margin: 0 0 10px;
  font-size: 0.78rem;
  line-height: 1.4;
}

.guild-hub__search {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.guild-hub__subtitle {
  margin: 0 0 8px;
  font-size: 0.78rem;
  color: rgba(200, 220, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.guild-hub__pending {
  margin-bottom: 12px;
}

.guild-hub__note {
  margin: 0;
  font-size: 0.8rem;
}

.guild-manual {
  margin-bottom: 12px;
}

.guild-manual__label {
  display: block;
  font-size: 0.72rem;
  color: rgba(200, 220, 255, 0.65);
  margin-bottom: 6px;
}

.guild-manual__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.guild-manual__input {
  flex: 1;
  min-width: 140px;
}

.guild-pending-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 10px;
  border: 1px solid rgba(80, 120, 200, 0.4);
  background: rgba(4, 8, 16, 0.65);
}

.guild-pending-row__info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
}

.guild-pending-row__flag {
  font-size: 1.1rem;
  font-family: var(--font-emoji-stack), sans-serif;
}

.guild-pending-row__from {
  width: 100%;
  font-size: 0.75rem;
}

.guild-pending-row__actions {
  display: flex;
  gap: 6px;
}

.guild-hub-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(38vh, 320px);
  overflow-y: auto;
  padding-right: 4px;
}

.guild-hub-card {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(60, 90, 140, 0.4);
  background: rgba(4, 8, 14, 0.75);
}

.guild-hub-card__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
}

.guild-hub-card__flag {
  font-size: 1.2rem;
  font-family: var(--font-emoji-stack), sans-serif;
}

.guild-hub-card__name {
  font-weight: 800;
  font-size: 0.92rem;
}

.guild-hub-card__tag {
  font-size: 0.78rem;
  color: rgba(200, 220, 255, 0.75);
}

.guild-hub-card__idline {
  margin-top: 4px;
  font-size: 0.72rem;
  color: rgba(180, 200, 230, 0.8);
  word-break: break-all;
}

.guild-hub-card__desc {
  margin: 6px 0 8px;
  font-size: 0.78rem;
  line-height: 1.35;
}

.guild-hub-card__copy {
  font-size: 0.72rem;
  padding: 4px 10px;
}

.game-menu-card--hub {
  max-width: min(96vw, 960px) !important;
  width: min(96vw, 960px);
  max-height: min(92vh, 920px);
  overflow-y: auto;
}

.game-menu-card__hero {
  text-align: center;
  margin-bottom: 6px;
}

.game-menu-card__hero .game-menu-lead {
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

/* ——— Oyun merkezi (M) + K menüsü: geniş, cam/HD yerleşim ——— */
.hub-panel--premium {
  position: relative;
  border-radius: 18px !important;
  border: 1px solid rgba(120, 170, 255, 0.28) !important;
  background:
    radial-gradient(ellipse 85% 50% at 50% -20%, rgba(90, 140, 240, 0.2), transparent 52%),
    linear-gradient(168deg, rgba(14, 20, 36, 0.98) 0%, rgba(6, 10, 20, 0.99) 100%) !important;
  box-shadow:
    0 36px 96px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.hub-panel__hero {
  position: relative;
  margin: -4px -4px 16px;
  padding: 22px 20px 20px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(100, 150, 230, 0.22);
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(70, 110, 200, 0.28), transparent 58%),
    linear-gradient(180deg, rgba(28, 40, 72, 0.55), rgba(8, 12, 24, 0.35));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.hub-panel__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(125deg, transparent 40%, rgba(255, 255, 255, 0.04) 48%, transparent 56%);
}

.hub-panel__hero h2 {
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  font-size: clamp(1.35rem, 2.8vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #f5f8ff 0%, #9ec0ff 55%, #6a9dff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

.hub-panel__hero .game-menu-lead {
  position: relative;
  z-index: 1;
  max-width: 56ch;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(200, 215, 245, 0.9);
}

.hub-panel__head {
  border-bottom-color: rgba(110, 150, 220, 0.28) !important;
}

.hub-panel__head h2 {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #f0f6ff 0%, #8eb6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.quick-menu-grid--hub {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 14px;
}

@media (min-width: 880px) {
  .quick-menu-grid--hub {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .quick-menu-grid--hub {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

.quick-menu-grid--hub .quick-menu-tile {
  min-height: 112px;
  padding: 16px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(110, 150, 220, 0.32);
  background: linear-gradient(152deg, rgba(28, 36, 56, 0.95), rgba(12, 16, 28, 0.92));
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}

.quick-menu-grid--hub .quick-menu-tile:hover {
  border-color: rgba(160, 200, 255, 0.5);
  background: linear-gradient(152deg, rgba(36, 46, 72, 0.98), rgba(16, 22, 40, 0.95));
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.quick-menu-grid--hub .quick-menu-tile__icon {
  font-size: 1.85rem;
  line-height: 1;
  margin-bottom: 2px;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.45));
}

.quick-menu-grid--hub .quick-menu-tile__label {
  font-size: 0.92rem;
  font-weight: 750;
}

.quick-menu-grid--hub .quick-menu-tile__sub {
  font-size: 0.74rem;
  line-height: 1.38;
}

.game-menu-hub__title {
  margin: 18px 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(150, 180, 230, 0.9);
}

.game-menu-hub__title:first-of-type {
  margin-top: 4px;
}

.game-menu-hub__title--sub {
  margin-top: 24px;
  padding-top: 8px;
  border-top: 1px solid rgba(80, 100, 140, 0.35);
}

.card--hub.card--quick-menu {
  max-width: min(96vw, 940px) !important;
  width: min(96vw, 940px);
}

.kbd-hint {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid rgba(120, 150, 200, 0.4);
  font-size: 0.78rem;
  font-family: ui-monospace, monospace;
  background: rgba(0, 0, 0, 0.22);
  vertical-align: middle;
}

.card--social {
  width: min(94vw, 460px);
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card--social-wide {
  width: min(94vw, 520px);
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.whisper-panel-messages {
  flex: 1;
  min-height: 120px;
  max-height: min(40vh, 280px);
  overflow-y: auto;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(80, 60, 120, 0.5);
  background: #06060c;
  font-size: 0.84rem;
  line-height: 1.4;
}

.whisper-msg {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}

.whisper-msg__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}

.whisper-msg__nick {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: none;
}

.whisper-msg__time {
  font-size: 0.68rem;
  font-weight: 500;
  color: rgba(160, 170, 190, 0.8);
}

.whisper-msg--me .whisper-msg__nick {
  color: rgba(140, 200, 255, 0.98);
}

.whisper-msg--them .whisper-msg__nick {
  color: rgba(210, 170, 255, 0.98);
}

.whisper-msg__text {
  word-break: break-word;
  line-height: 1.45;
}

.whisper-msg--me .whisper-msg__text {
  color: rgba(160, 220, 255, 0.95);
}

.whisper-msg--them .whisper-msg__text {
  color: rgba(220, 200, 255, 0.95);
}

.whisper-panel__row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.whisper-panel__input {
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
  max-width: none;
}

.whisper-panel__send {
  flex: 0 0 auto;
  width: auto !important;
  white-space: nowrap;
  padding-left: 18px;
  padding-right: 18px;
}

.social-form-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.social-form-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.social-form-row__input {
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
  max-width: none;
}

.social-form-row__btn {
  flex: 0 0 auto;
  width: auto !important;
  margin-bottom: 0 !important;
  white-space: nowrap;
  align-self: stretch;
}

.social-overlay__title {
  margin: 0 0 4px;
}

.social-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.social-tab {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(100, 140, 200, 0.35);
  background: rgba(20, 26, 40, 0.85);
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.social-tab--active {
  color: var(--text);
  border-color: rgba(150, 200, 255, 0.65);
  background: rgba(32, 44, 68, 0.98);
}

.social-tab-panel {
  min-height: 100px;
}

.social-log {
  margin: 0;
  padding: 10px 12px;
  max-height: min(32vh, 220px);
  overflow: auto;
  border-radius: 10px;
  border: 1px solid rgba(40, 50, 70, 0.9);
  background: #050608;
  font-size: 0.8rem;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}

.social-friends-list {
  font-size: 0.85rem;
}

.social-friends__row {
  padding: 6px 0;
  border-bottom: 1px solid rgba(50, 60, 80, 0.5);
}

.social-friends-section__title {
  margin: 10px 0 6px;
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.9;
}

.social-friends-section__title:first-child {
  margin-top: 0;
}

.social-friends-hint {
  margin: 0 0 10px;
  font-size: 0.78rem;
  line-height: 1.35;
}

.social-friends__row--actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

.social-friends__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.social-friends__id {
  font-family: ui-monospace, monospace;
  font-size: 0.82rem;
  word-break: break-all;
  flex: 1;
  min-width: 120px;
}

.social-blocked-hint {
  margin: 0 0 10px;
  font-size: 0.78rem;
}

.social-blocked-list {
  font-size: 0.85rem;
  max-height: min(28vh, 200px);
  overflow: auto;
}

.social-blocked-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.social-blocked-row__id {
  font-family: ui-monospace, monospace;
  font-size: 0.82rem;
  word-break: break-all;
}

.player-context-menu__btn--danger {
  color: #ff9a8a;
}

.player-context-menu__btn--disabled,
.player-context-menu__btn:disabled {
  opacity: 0.42;
  pointer-events: none;
  cursor: not-allowed;
}

.social-guild-body {
  margin-bottom: 10px;
  font-size: 0.88rem;
}

.guild-create-panel {
  margin-top: 4px;
}

.guild-create-panel.guild-create-panel--hidden {
  display: none;
}

.guild-create-panel__hint {
  margin: 0 0 8px;
  font-size: 0.82rem;
  line-height: 1.35;
}

.guild-create {
  margin-top: 4px;
}

.social-tab-panel--guild {
  max-height: min(72vh, 560px);
  overflow-y: auto;
  padding-right: 4px;
}

.guild-empty {
  padding: 8px 4px 10px;
  border-radius: 12px;
  border: 1px solid rgba(80, 120, 220, 0.25);
  background: linear-gradient(145deg, rgba(14, 22, 40, 0.6) 0%, rgba(8, 12, 22, 0.85) 100%);
  margin-bottom: 10px;
}

.guild-empty__title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  color: #c8e0ff;
}

.guild-empty__sub {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
}

.guild-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.guild-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(120, 180, 255, 0.35);
  background: linear-gradient(145deg, rgba(18, 28, 52, 0.95) 0%, rgba(8, 12, 24, 0.98) 100%);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
}

.guild-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 120% at 0% 0%, rgba(120, 100, 220, 0.22), transparent 55%);
  pointer-events: none;
}

.guild-hero__flag {
  font-size: 2.1rem;
  line-height: 1;
  font-family: var(--font-emoji-stack), sans-serif;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
  z-index: 1;
}

.guild-hero__text {
  z-index: 1;
}

.guild-hero__name {
  margin: 0 0 4px;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.guild-hero__tag {
  font-weight: 700;
  opacity: 0.88;
  font-size: 0.82em;
}

.guild-hero__meta {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(200, 220, 255, 0.72);
}

.guild-desc {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(60, 90, 140, 0.35);
  background: rgba(6, 10, 20, 0.55);
  font-size: 0.82rem;
  line-height: 1.45;
}

.guild-section__title {
  margin: 0 0 8px;
  font-size: 0.78rem;
  color: rgba(200, 220, 255, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.guild-member-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.guild-member-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(60, 90, 140, 0.45);
  background: rgba(8, 12, 22, 0.92);
}

.guild-member-row__name {
  font-family: ui-monospace, monospace;
  font-size: 0.82rem;
  word-break: break-all;
  flex: 1;
  min-width: 0;
}

.guild-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 0.5rem;
  border-radius: 999px;
}

.guild-badge--leader {
  background: rgba(255, 200, 120, 0.2);
  color: #ffd49a;
  border: 1px solid rgba(255, 200, 120, 0.45);
}

.guild-badge--assist {
  background: rgba(120, 200, 255, 0.15);
  color: #9fd0ff;
  border: 1px solid rgba(120, 200, 255, 0.4);
}

.guild-badge--member {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(220, 230, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.guild-btn-kick {
  margin-left: auto;
  font-size: 0.72rem;
  padding: 4px 10px;
}

.guild-settings {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(100, 160, 255, 0.28);
  background: rgba(6, 10, 20, 0.55);
}

.guild-settings__title {
  margin: 12px 0 6px;
  font-size: 0.88rem;
  color: #c8e0ff;
}

.guild-settings__title:first-child {
  margin-top: 0;
}

.guild-settings__hint {
  margin: 0 0 10px;
  font-size: 0.78rem;
  line-height: 1.35;
}

.guild-settings__row {
  margin-bottom: 10px;
}

.guild-settings__label {
  display: block;
  font-size: 0.72rem;
  color: rgba(200, 220, 255, 0.65);
  margin-bottom: 4px;
}

.guild-color-input {
  width: 48px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
}

.guild-flag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.guild-flag-btn {
  font-size: 1.15rem;
  line-height: 1;
  font-family: var(--font-emoji-stack), sans-serif;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(80, 120, 200, 0.35);
  background: rgba(6, 10, 20, 0.55);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.guild-flag-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(120, 180, 255, 0.55);
}

.guild-flag-btn--active {
  border-color: rgba(120, 200, 255, 0.85);
  box-shadow: 0 0 0 1px rgba(120, 200, 255, 0.35);
}

.guild-textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 72px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(60, 90, 140, 0.45);
  background: rgba(4, 8, 16, 0.9);
  color: var(--text);
  font: inherit;
}

.guild-assist-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.guild-assist-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  cursor: pointer;
}

/* ——— Grup paneli (sürüklenebilir) + davet ——— */
.party-panel {
  position: fixed;
  left: 12px;
  top: 120px;
  z-index: 52;
  width: min(200px, 38vw);
  padding: 8px 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(100, 180, 255, 0.4);
  background: linear-gradient(165deg, rgba(12, 18, 32, 0.97) 0%, rgba(6, 8, 16, 0.99) 100%);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

.party-panel.party-panel--docked {
  position: relative;
  left: auto;
  top: auto;
  z-index: auto;
  width: 100%;
  max-width: none;
  margin-top: 2px;
  padding: 7px 8px 9px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.party-panel.party-panel--docked .party-panel__body {
  max-height: min(200px, 30vh);
}

/* Grup panelinin altında: özel mesaj bildirimi (toast yerine, tek satır) */
.whisper-hud-preview {
  margin-top: 6px;
  width: 100%;
  max-width: 100%;
}

.whisper-hud-preview[hidden] {
  display: none !important;
}

.whisper-hud-preview__btn {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  padding: 5px 8px 6px;
  border-radius: 10px;
  border: 1px solid rgba(160, 120, 230, 0.5);
  background: linear-gradient(165deg, rgba(22, 14, 38, 0.94) 0%, rgba(10, 8, 20, 0.97) 100%);
  color: #ece8ff;
  font: inherit;
  font-size: 0.68rem;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: border-color 0.15s ease, filter 0.15s ease;
}

.whisper-hud-preview__btn:hover {
  border-color: rgba(200, 160, 255, 0.75);
  filter: brightness(1.06);
}

.whisper-hud-preview__tag {
  flex: 0 0 auto;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200, 170, 255, 0.9);
  padding-top: 1px;
}

.whisper-hud-preview__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  color: rgba(235, 228, 255, 0.95);
}

.whisper-hud-preview--pulse .whisper-hud-preview__btn {
  animation: whisper-hud-preview-pulse 1.2s ease-in-out 2;
}

@keyframes whisper-hud-preview-pulse {
  0%,
  100% {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  }
  50% {
    box-shadow: 0 4px 18px rgba(160, 100, 220, 0.45);
    border-color: rgba(200, 150, 255, 0.85);
  }
}

.party-panel__drag {
  cursor: grab;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(160, 210, 255, 0.9);
  padding: 2px 0 6px;
  user-select: none;
}

.party-panel__drag--docked {
  cursor: default;
  padding-bottom: 4px;
}

.party-panel__drag:active {
  cursor: grabbing;
}

.party-panel__drag--docked:active {
  cursor: default;
}

.party-panel__head {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: var(--text);
}

.party-panel__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(48vh, 360px);
  overflow-y: auto;
}

.party-member {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(60, 90, 140, 0.45);
  background: rgba(8, 12, 22, 0.92);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.party-member:hover {
  border-color: rgba(120, 170, 255, 0.55);
}

.party-member--selected {
  border-color: rgba(120, 220, 255, 0.85);
  box-shadow: 0 0 0 1px rgba(100, 200, 255, 0.35);
}

.party-member__icon {
  flex: 0 0 auto;
  font-size: 1.15rem;
  line-height: 1.2;
  align-self: center;
}

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

.party-member__name {
  font-size: 0.78rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.party-member__race-glyph {
  margin-right: 0.15em;
  font-weight: 800;
}

.party-member__leader-star {
  margin-right: 0.1em;
  color: #ffd56a;
}

.party-member__name--good .party-member__race-glyph,
.party-member__name--good .party-member__nick {
  color: #8bdcff;
}

.party-member__name--evil .party-member__race-glyph,
.party-member__name--evil .party-member__nick {
  color: #e8b0ff;
}

.party-member__hpbar {
  display: block;
  height: 6px;
  border-radius: 4px;
  background: #111;
  overflow: hidden;
}

.party-member__hpfill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2a8f4a, #5ecf7a);
  border-radius: 4px;
}

.party-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.party-panel__btn {
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  margin-bottom: 0 !important;
  font-size: 0.78rem;
  padding: 8px 10px;
}

.party-invite-hint {
  margin: 0 0 4px;
  font-size: 0.85rem;
}

.party-invite-countdown {
  margin: 0 0 12px;
  font-size: 2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: rgba(255, 200, 120, 0.95);
}

.party-invite-actions {
  display: flex;
  flex-direction: row;
  gap: 10px;
  flex-wrap: wrap;
}

.party-invite-actions .btn-primary,
.party-invite-actions .btn-daily {
  flex: 1 1 120px;
  width: auto !important;
  margin-bottom: 0 !important;
}

/* ——— Ticaret ——— */
.card--trade {
  max-width: min(720px, 96vw);
  max-height: min(92vh, 900px);
  overflow: auto;
}

.trade-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 12px 0;
}

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

.trade-col__title {
  margin: 0 0 8px;
  font-size: 0.9rem;
}

.trade-gold-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.85rem;
}

.trade-gold-inp {
  width: 120px;
}

.trade-draft-items {
  min-height: 36px;
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.trade-chip {
  font-size: 0.72rem;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(120, 160, 200, 0.45);
  background: rgba(20, 28, 44, 0.9);
  color: #e8f0ff;
  cursor: pointer;
}

.trade-chip__inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.trade-item-icon-wrap {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.trade-item-icon-wrap--inv {
  width: 32px;
  height: 32px;
}

.trade-item-icon-wrap .item-icon {
  transform: scale(0.7);
  transform-origin: top left;
}

.trade-item-icon-wrap--inv .item-icon {
  transform: scale(0.75);
}

.trade-inv__slot-inner {
  display: flex;
  align-items: center;
  gap: 6px;
}

.trade-inv__slot-text {
  font-size: 0.65rem;
  line-height: 1.2;
  text-align: left;
}

.trade-partner__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.trade-hint {
  font-size: 0.72rem;
  margin: 0 0 8px;
}

.trade-inv-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: min(200px, 28vh);
  overflow: auto;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid rgba(60, 80, 110, 0.5);
  background: rgba(6, 8, 14, 0.6);
  margin-bottom: 10px;
}

.trade-inv__slot {
  font-size: 0.65rem;
  padding: 4px 6px;
  max-width: 120px;
  border-radius: 6px;
  border: 1px solid rgba(100, 140, 180, 0.4);
  background: rgba(18, 24, 36, 0.95);
  color: #dde8ff;
  cursor: pointer;
  text-align: left;
  line-height: 1.2;
}

.trade-inv__slot--blocked {
  opacity: 0.45;
  cursor: not-allowed;
}

.trade-partner-offer {
  font-size: 0.82rem;
  line-height: 1.45;
}

.trade-partner__gold {
  font-weight: 700;
  margin-bottom: 6px;
}

.trade-ready-line {
  margin: 8px 0 0;
  font-size: 0.72rem;
}

.trade-partner-label {
  margin: 0 0 8px;
  font-size: 0.85rem;
}

#btn-trade-confirm {
  margin-bottom: 10px;
}

/* Harita geçişi: veri + çizim bitene kadar tam ekran */
.map-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 8, 14, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.map-loading-overlay[hidden] {
  display: none !important;
}

.map-loading-overlay__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 28px 36px;
  border-radius: 14px;
  border: 1px solid rgba(120, 180, 255, 0.35);
  background: rgba(14, 18, 28, 0.92);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.map-loading-overlay__spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(120, 180, 255, 0.2);
  border-top-color: rgba(160, 210, 255, 0.95);
  animation: map-loading-spin 0.75s linear infinite;
}

@keyframes map-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.map-loading-overlay__text {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text);
  letter-spacing: 0.02em;
}

/* --- İlk giriş rehberi + genel panel cilası --- */
#overlay-welcome-guide.welcome-guide-overlay.overlay--modal-fixed {
  position: fixed;
  inset: 0;
  display: flex;
  z-index: 210;
  padding: max(20px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
    max(28px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  overflow-y: auto;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 55% at 50% 20%, rgba(100, 140, 220, 0.2), transparent 55%),
    rgba(3, 5, 10, 0.9);
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-font-smoothing: antialiased;
}

#overlay-welcome-guide.overlay--modal-fixed.overlay--hidden {
  display: none !important;
}

.card--welcome-guide {
  width: min(96vw, 520px);
  max-width: 520px;
  padding: 26px 28px 22px;
  margin: auto;
  border-radius: 18px;
  border: 1px solid rgba(130, 175, 255, 0.45);
  background:
    linear-gradient(165deg, rgba(18, 24, 42, 0.98), rgba(8, 11, 20, 0.99)),
    radial-gradient(ellipse 90% 60% at 50% -15%, rgba(120, 160, 240, 0.18), transparent 52%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 12px 48px rgba(0, 0, 0, 0.55),
    0 32px 96px rgba(0, 0, 0, 0.45),
    0 0 72px rgba(80, 120, 200, 0.12);
  animation: welcomeGuideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes welcomeGuideIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card--welcome-guide {
    animation: none;
  }
}

.welcome-guide__kicker {
  margin: 0 0 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8eb6ff;
}

.card--welcome-guide .welcome-guide__title {
  margin: 0 0 14px;
  font-size: clamp(1.25rem, 3.8vw, 1.45rem);
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.welcome-guide__body {
  margin: 0 0 18px;
  font-size: 0.98rem;
  line-height: 1.75;
  color: rgba(232, 236, 244, 0.94);
}

.welcome-guide__body strong {
  color: #ffd56a;
  font-weight: 650;
}

.welcome-guide__dots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}

.welcome-guide__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(120, 160, 220, 0.35);
  border: 1px solid rgba(120, 160, 220, 0.45);
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.welcome-guide__dot--active {
  background: rgba(255, 200, 120, 0.95);
  border-color: rgba(255, 220, 160, 0.85);
  transform: scale(1.15);
  box-shadow: 0 0 12px rgba(255, 200, 120, 0.35);
}

.welcome-guide__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.welcome-guide__actions-main {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.welcome-guide__btn-next {
  min-width: 132px;
}

@media (max-width: 480px) {
  .welcome-guide__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .welcome-guide__actions-main {
    margin-left: 0;
    justify-content: stretch;
  }
  .welcome-guide__actions-main .btn-primary {
    width: 100%;
  }
}

.card--panel-pro {
  border-radius: 16px;
  border-color: rgba(130, 165, 225, 0.38);
  background:
    linear-gradient(168deg, rgba(20, 26, 40, 0.97), rgba(10, 14, 22, 0.98)),
    radial-gradient(ellipse 100% 80% at 50% -10%, rgba(90, 130, 200, 0.12), transparent 45%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 14px 44px rgba(0, 0, 0, 0.5);
}

.help-lead {
  margin: 0 0 14px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted);
}

.help-lead strong {
  color: #c8dcff;
}

.help-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 8px;
}

.help-footer-actions .btn-daily {
  margin-right: auto;
}

@media (max-width: 520px) {
  .help-footer-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .help-footer-actions .btn-daily {
    margin-right: 0;
  }
}

/* —— Dünya pazarı —— */
.card--market {
  max-width: min(920px, 96vw);
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.market-panel__sub {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
}

.market-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 10px 0 12px;
}

.market-filter-input {
  flex: 1 1 160px;
  min-width: 120px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(120, 160, 220, 0.35);
  background: rgba(10, 14, 22, 0.85);
  color: inherit;
}

.market-filter-num {
  width: 96px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(120, 160, 220, 0.35);
  background: rgba(10, 14, 22, 0.85);
  color: inherit;
}

.market-filter-select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(120, 160, 220, 0.35);
  background: rgba(10, 14, 22, 0.85);
  color: inherit;
  font-size: 0.82rem;
}

.market-list-body {
  flex: 1;
  min-height: 160px;
  overflow: auto;
  margin-bottom: 12px;
}

.market-table-wrap {
  overflow-x: auto;
}

.market-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.market-table th,
.market-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(100, 140, 200, 0.2);
  vertical-align: middle;
}

.market-table th {
  position: sticky;
  top: 0;
  background: rgba(14, 18, 28, 0.98);
  color: rgba(200, 210, 230, 0.85);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  z-index: 1;
}

.market-rarity {
  font-size: 0.72rem;
  font-weight: 600;
  margin-right: 4px;
}

.market-rarity--common {
  color: #8b95a8;
}
.market-rarity--uncommon {
  color: #4cc965;
}
.market-rarity--rare {
  color: #4d9fff;
}
.market-rarity--epic {
  color: #c56bff;
}
.market-rarity--legendary {
  color: #ffb347;
}

.market-item-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.market-item-icon-wrap {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.market-item-icon-wrap .item-icon {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.market-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.market-item-name {
  font-weight: 600;
  color: rgba(220, 230, 245, 0.95);
}

.market-tax-note {
  margin: 10px 0 0;
  font-size: 0.72rem;
}

.card--market .card--inner.market-sell {
  margin-top: 4px;
  padding: 12px 14px;
}

.market-sell__title {
  margin: 0 0 6px;
  font-size: 0.95rem;
}

.market-sell__hint {
  margin: 0 0 10px;
  font-size: 0.78rem;
}

.market-sell__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.market-sell__row label {
  min-width: 120px;
  font-size: 0.82rem;
  color: rgba(200, 210, 230, 0.88);
}

.market-sell__row input {
  flex: 1;
  min-width: 100px;
  max-width: 200px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(120, 160, 220, 0.35);
  background: rgba(10, 14, 22, 0.85);
  color: inherit;
}

#btn-market-sell-submit {
  margin-top: 6px;
}

/* Davetli PvP düello (pvp_duel) */
/* [hidden] varsayılan display:none'u ezer; overlay açılışta görünmesin diye zorunlu gizleme */
.pvp-arena-hud[hidden] {
  display: none !important;
}

.pvp-arena-invite-overlay[hidden] {
  display: none !important;
}

.pvp-arena-hud {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 120;
  min-width: min(92vw, 520px);
  padding: 10px 16px 12px;
  border-radius: 12px;
  border: 1px solid rgba(200, 160, 90, 0.35);
  background: linear-gradient(165deg, rgba(18, 14, 10, 0.92) 0%, rgba(8, 10, 18, 0.94) 100%);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  text-align: center;
  pointer-events: none;
}

.pvp-arena-hud__names {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #f0e6d8;
}

.pvp-arena-hud__name--left {
  flex: 1;
  text-align: left;
  color: #9ed4ff;
}

.pvp-arena-hud__name--right {
  flex: 1;
  text-align: right;
  color: #ffb89a;
}

.pvp-arena-hud__vs {
  flex: 0 0 auto;
  opacity: 0.75;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
}

.pvp-arena-hud__score {
  margin-top: 4px;
  font-size: 0.88rem;
  color: rgba(230, 220, 200, 0.92);
}

.pvp-arena-hud__cd {
  margin-top: 6px;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #ffd28a;
  text-shadow: 0 0 12px rgba(255, 200, 120, 0.35);
  min-height: 1.4em;
}

.pvp-arena-invite-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 6, 12, 0.72);
  backdrop-filter: blur(3px);
}

.pvp-arena-invite-card {
  max-width: min(92vw, 400px);
  padding: 18px 20px 16px;
}

.pvp-arena-invite__title {
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #e8f0ff;
}

.pvp-arena-invite__sub {
  margin: 0 0 14px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(200, 210, 230, 0.9);
}

.pvp-arena-invite__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}