/* =============================================================
   ZEYD ONLINE - Giris akisi ekranlari
   -------------------------------------------------------------
   login / notice / race-select / character-select / town
   Ortak "frame" tasarim dili style.css'teki degiskenleri kullanir.
   Yuklenme sirasi: style.css -> screens.css -> responsive.css
   =============================================================
   Icindekiler:
     1. Ortak: frame paneli
     2. Ortak: form alanlari, rozetler, stat listesi, etiketler
     3. Login
     4. Notice
     5. Race Selection
     6. Character Selection
     7. Class renk aksanlari
   ============================================================= */

/* -------------------------------------------------------------
   1. ORTAK: FRAME PANELI
   ------------------------------------------------------------- */
.screen--login,
.screen--notice,
.screen--characters {
  display: grid;
  place-items: center;
  padding: clamp(0.6rem, 2vh, 1.6rem) clamp(0.6rem, 2vw, 1.6rem);
}

/* =============================================================
   DUNGEON PROGRESSION V2 — 9 KAPI / 45 YARATIK
   ============================================================= */

.dungeon-panel.is-view-doors,
.dungeon-panel.is-view-enemies {
  width: min(98vw, 76rem);
}

.dg-door-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.38rem, 1.2vh, 0.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dg-door-carousel {
  position: relative;
}

.dg-door-next {
  position: absolute;
  top: 50%;
  right: clamp(-0.75rem, -1vw, -0.35rem);
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(2rem, 5vh, 2.8rem);
  height: clamp(3.2rem, 9vh, 4.8rem);
  padding: 0;
  border: 1px solid rgba(255, 218, 132, 0.72);
  border-radius: 4px 0 0 4px;
  background: linear-gradient(180deg, rgba(139, 31, 28, 0.96), rgba(66, 10, 18, 0.98));
  box-shadow: 0 0 18px rgba(255, 126, 53, 0.28), 0 8px 20px rgba(0, 0, 0, 0.55);
  color: #ffe7a5;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vh, 2.7rem);
  line-height: 1;
  transform: translateY(-50%);
  transition: border-color var(--t-fast), filter var(--t-fast), transform var(--t-fast);
}

.dg-door-next:hover,
.dg-door-next:focus-visible {
  border-color: #fff0b7;
  filter: brightness(1.22);
  transform: translateY(-50%) translateX(2px);
}

.dg-door-pages {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-top: clamp(0.35rem, 1vh, 0.6rem);
}

.dg-door-page {
  width: 1.35rem;
  height: 0.18rem;
  border-radius: 999px;
  background: rgba(232, 192, 100, 0.22);
}

.dg-door-page.is-active {
  background: var(--c-gold-bright);
  box-shadow: 0 0 8px rgba(255, 211, 112, 0.55);
}

.dg-door {
  position: relative;
  display: grid;
  grid-template-columns: minmax(4.2rem, 38%) minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-height: clamp(7.2rem, 20vh, 10.5rem);
  padding: clamp(0.3rem, 0.8vh, 0.55rem);
  overflow: hidden;
  border: 1px solid rgba(232, 192, 100, 0.34);
  border-radius: 5px;
  background:
    radial-gradient(circle at 24% 54%, rgba(106, 56, 164, 0.2), transparent 44%),
    linear-gradient(145deg, rgba(32, 14, 22, 0.97), rgba(6, 4, 9, 0.98));
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
  transition: transform var(--t-fast), border-color var(--t-fast), filter var(--t-fast);
}

.dg-door:hover { transform: translateY(-2px); border-color: var(--c-gold-bright); }
.dg-door.is-locked { filter: saturate(0.35) brightness(0.58); }
.dg-door.is-locked:hover { filter: saturate(0.55) brightness(0.72); }

.dg-door__art {
  position: relative;
  display: grid;
  place-items: center;
  align-self: stretch;
  min-height: 0;
}

.dg-door__art img {
  width: 100%;
  height: 100%;
  max-height: clamp(6.4rem, 18vh, 9.5rem);
  object-fit: contain;
  object-position: center;
}

.dg-door__lock {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid rgba(255, 220, 144, 0.58);
  border-radius: 50%;
  background: rgba(7, 4, 7, 0.88);
  transform: translate(-50%, -50%);
}

.dg-door__info { display: grid; align-content: center; gap: 0.16rem; min-width: 0; padding: 0.25rem; }
.dg-door__number,
.dg-door__requirement,
.dg-door__state {
  color: var(--c-text-dim);
  font-size: clamp(0.5rem, 1.15vh, 0.66rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dg-door__name {
  color: var(--c-gold-bright);
  font-family: var(--font-display);
  font-size: clamp(0.68rem, 1.65vh, 0.94rem);
  letter-spacing: 0.08em;
}
.dg-door__requirement { color: #f0c982; font-family: var(--font-mono); }
.dg-door__state { color: #ff8d82; font-weight: 700; }
.dg-door__state.is-open { color: #a8e892; }

.dungeon-panel.is-view-enemies .dg-enemy-list {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.dungeon-panel.is-view-enemies .dg-enemy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  padding: clamp(0.32rem, 0.8vh, 0.5rem);
}
.dungeon-panel.is-view-enemies .dg-enemy__art {
  width: 100%;
  height: clamp(6rem, 19vh, 9.5rem);
  flex: 0 0 auto;
}
.dungeon-panel.is-view-enemies .dg-enemy__info { display: flex; flex: 1; flex-direction: column; }
.dungeon-panel.is-view-enemies .dg-enemy__stats { gap: 0.1rem 0.45rem; }
.dungeon-panel.is-view-enemies .dg-enemy__fight { width: 100%; margin-top: 0.35rem; }
.dg-enemy__boss {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 2;
  padding: 0.18rem 0.38rem;
  border: 1px solid rgba(255, 105, 74, 0.7);
  border-radius: 2px;
  background: rgba(104, 13, 20, 0.9);
  color: #ffd2aa;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dg-enemy__tiers {
  margin: auto 0 0;
  padding-top: 0.24rem;
  color: var(--c-text-dim);
  font-size: clamp(0.48rem, 1vh, 0.6rem);
  line-height: 1.35;
}
.dg-enemy__tiers strong { color: #d7bbff; font-family: var(--font-mono); }

@media (orientation: landscape) and (max-height: 620px) {
  .dg-door { min-height: 5.2rem; grid-template-columns: 4.5rem minmax(0, 1fr); }
  .dg-door__art img { max-height: 4.8rem; }
  .dungeon-panel.is-view-enemies .dg-enemy-list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: clamp(9.4rem, 23vw, 11.5rem);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
  }
  .dungeon-panel.is-view-enemies .dg-enemy-list > li { scroll-snap-align: start; }
  .dungeon-panel.is-view-enemies .dg-enemy__art { height: clamp(3.15rem, 14vh, 4.55rem); }
  .dungeon-panel.is-view-enemies .dg-enemy__meta,
  .dungeon-panel.is-view-enemies .dg-enemy__reward,
  .dungeon-panel.is-view-enemies .dg-enemy__tiers { font-size: clamp(.42rem, 1.35vh, .51rem); }
  .dungeon-panel.is-view-enemies .dg-enemy__stats { font-size: clamp(.42rem, 1.35vh, .51rem); }
  .dungeon-panel.is-view-enemies .dg-enemy__fight { min-height: 1.45rem; margin-top: .18rem; padding: .12rem .4rem; }
}

@media (orientation: landscape) and (max-width: 820px) {
  .dg-door-list { gap: 0.25rem; }
  .dg-door { min-height: 4.7rem; grid-template-columns: 3.7rem minmax(0, 1fr); padding: 0.2rem; }
  .dg-door__art img { max-height: 4.2rem; }
  .dg-door__info { gap: 0.05rem; padding: 0.12rem; }
  .dg-door__name { font-size: 0.58rem; }
  .dg-door__number, .dg-door__requirement, .dg-door__state { font-size: 0.45rem; }
  .dg-door-next { right: -0.35rem; width: 1.7rem; height: 2.8rem; font-size: 1.55rem; }
  .dg-door-pages { margin-top: 0.2rem; }
}

.rk-self-separator { display:flex; align-items:center; gap:.55rem; min-height:1.35rem; color:var(--c-gold); font:.55rem var(--font-display); letter-spacing:.12em; text-transform:uppercase; }
.rk-self-separator::before,.rk-self-separator::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(220,171,74,.58),transparent); }
.cp-slot.is-drop-invalid { outline:2px solid #9b2532; outline-offset:-2px; filter:brightness(.62); }
.slot-drag-ghost { position:fixed; z-index:10020; top:0; left:0; pointer-events:none; will-change:transform; }
.forge-drag-ghost {
  display: grid;
  place-items: center;
  width: clamp(2.6rem, 7vh, 3.4rem);
  height: clamp(2.6rem, 7vh, 3.4rem);
  overflow: hidden;
  border: 1px solid #d2b878;
  background: var(--ui-grain), #0b120e;
  box-shadow: inset 0 0 0 2px #0008, 0 .35rem 1rem #000b;
}
.forge-drag-ghost .forge-grid__icon {
  display: block;
  width: 82%;
  height: 82%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.screen--race {
  display: grid;
  place-items: center;
  padding: clamp(0.6rem, 2vh, 1.6rem) clamp(0.6rem, 2vw, 1.6rem);
}

.frame {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: min(94vw, 30rem);
  max-height: 94%;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 6px;
  /* Altin metalik cerceve (padding-box + border-box gradyani) */
  background: linear-gradient(
        180deg,
        rgba(26, 10, 18, 0.97) 0%,
        rgba(14, 6, 12, 0.98) 46%,
        rgba(8, 4, 10, 0.99) 100%
      )
      padding-box,
    linear-gradient(180deg, #ffe9a8 0%, #e8c064 24%, #8a6a2c 62%, #4a3410 100%)
      border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 28px 70px rgba(0, 0, 0, 0.75),
    inset 0 0 80px rgba(107, 18, 32, 0.28);
  animation: frame-enter var(--t-slow) cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

@keyframes frame-enter {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.frame--wide {
  width: min(96vw, 88rem);
}

.frame--notice {
  width: min(94vw, 40rem);
}

.frame--race {
  width: min(96vw, 68rem);
  max-height: 95%;
}

.frame__header {
  flex: none;
  padding: clamp(0.8rem, 2.4vh, 1.3rem) clamp(1rem, 2.6vw, 1.8rem);
  border-bottom: 1px solid rgba(138, 106, 44, 0.32);
  background: linear-gradient(
    180deg,
    rgba(107, 18, 32, 0.32) 0%,
    rgba(107, 18, 32, 0) 100%
  );
  text-align: center;
}

.frame__header--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
}

.char-select__badges {
  display: flex;
  justify-content: flex-end;
  gap: 0.42rem;
  flex-wrap: wrap;
}

.frame__brand {
  display: block;
  margin-bottom: 0.3em;
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 2.4vh, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.24em;
  background: linear-gradient(180deg, #ffe9a8 0%, #e8c064 48%, #a97d2a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.frame__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 1.9vh, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.frame--notice .frame__title,
.frame--wide .frame__title {
  font-size: clamp(0.85rem, 2.3vh, 1.15rem);
  color: var(--c-gold);
}

.frame__badge {
  padding: 0.3em 0.9em;
  border: 1px solid rgba(138, 106, 44, 0.6);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.4);
  font-family: var(--font-display);
  font-size: clamp(0.6rem, 1.6vh, 0.78rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-gold);
  white-space: nowrap;
}

.frame__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: clamp(0.9rem, 2.6vh, 1.5rem) clamp(1rem, 2.6vw, 1.8rem);
}

.frame__footer {
  flex: none;
  padding: clamp(0.7rem, 2vh, 1.2rem) clamp(1rem, 2.6vw, 1.8rem);
  border-top: 1px solid rgba(138, 106, 44, 0.32);
  background: rgba(0, 0, 0, 0.35);
  text-align: center;
}

.frame__footer--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.frame__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

/* Islem sirasinda ekrani kilitle (gorsel geri bildirim) */
.is-busy .frame__body,
.is-busy .frame__footer {
  opacity: 0.65;
  pointer-events: none;
}

/* -------------------------------------------------------------
   2. ORTAK BILESENLER
   ------------------------------------------------------------- */

/* --- Form alani --- */
.field {
  margin-bottom: clamp(0.7rem, 2vh, 1.05rem);
}

.field__label {
  display: block;
  margin-bottom: 0.4em;
  font-family: var(--font-display);
  font-size: clamp(0.6rem, 1.6vh, 0.75rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold-dim);
}

.field__input {
  width: 100%;
  padding: 0.62em 0.85em;
  border: 1px solid rgba(138, 106, 44, 0.55);
  border-radius: 3px;
  background: linear-gradient(180deg, #100710 0%, #0a040c 100%);
  color: var(--c-text);
  font-family: var(--font-ui);
  font-size: clamp(0.85rem, 2vh, 0.98rem);
  letter-spacing: 0.04em;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8);
  transition: border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}

.field__input::placeholder {
  color: rgba(185, 173, 147, 0.45);
}

.field__input:focus {
  outline: none;
  border-color: var(--c-gold);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8), 0 0 14px rgba(255, 190, 90, 0.35);
}

.field--inline {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.6rem;
}

.field--inline .field__label {
  margin-bottom: 0;
  white-space: nowrap;
}

.field--inline .field__input {
  flex: 1 1 auto;
  min-width: 0;
}

.field__rule {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--c-text-dim);
  opacity: 0.7;
}

/* --- Onay kutusu --- */
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  cursor: pointer;
  user-select: none;
}

.checkbox__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.checkbox__box {
  position: relative;
  width: 1.05em;
  height: 1.05em;
  flex: none;
  border: 1px solid rgba(138, 106, 44, 0.7);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.5);
  transition: border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}

.checkbox__box::after {
  content: "";
  position: absolute;
  inset: 0.22em;
  border-radius: 1px;
  background: linear-gradient(180deg, #ffe9a8 0%, #e8c064 60%, #a97d2a 100%);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--t-fast) ease-out, transform var(--t-fast) ease-out;
}

.checkbox__input:checked + .checkbox__box::after {
  opacity: 1;
  transform: scale(1);
}

.checkbox__input:focus-visible + .checkbox__box {
  border-color: var(--c-gold);
  box-shadow: 0 0 10px rgba(255, 190, 90, 0.5);
}

.checkbox__label {
  font-family: var(--font-display);
  font-size: clamp(0.6rem, 1.6vh, 0.76rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

/* --- Mesaj satiri --- */
.form-message {
  min-height: 1.35em;
  margin: 0.7em 0 0.9em;
  font-size: clamp(0.72rem, 1.8vh, 0.85rem);
  letter-spacing: 0.06em;
  color: transparent;
}

.form-message.is-error {
  color: #ff8a8a;
}

.form-message.is-info {
  color: var(--c-gold);
}

/* --- Metin butonu (link gibi) --- */
.link-button {
  padding: 0.2em 0.1em;
  border: 0;
  background: none;
  color: var(--c-text-dim);
  font-family: var(--font-ui);
  font-size: clamp(0.68rem, 1.7vh, 0.8rem);
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(138, 106, 44, 0.6);
  transition: color var(--t-fast) ease-out;
}

.link-button:hover,
.link-button:focus-visible {
  color: var(--c-gold-bright);
  outline: none;
}

/* --- Buton varyantlari --- */
.ui-button--primary {
  border-color: var(--c-gold);
  color: var(--c-gold-bright);
  background: linear-gradient(180deg, #23306b 0%, #131a45 52%, #0a0d25 100%);
}

.ui-button--ghost {
  border-color: rgba(138, 106, 44, 0.55);
  background: rgba(0, 0, 0, 0.4);
  color: var(--c-text-dim);
}

.ui-button--ghost:hover,
.ui-button--ghost:focus-visible {
  color: var(--c-gold);
}

.ui-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.5);
  transform: none;
  animation: none;
}

.ui-button:disabled:hover {
  transform: none;
  filter: grayscale(0.5);
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.18), 0 4px 14px rgba(0, 0, 0, 0.55);
}

/* --- Rozet --- */
.badge {
  display: inline-block;
  padding: 0.16em 0.55em;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-family: var(--font-display);
  font-size: clamp(0.52rem, 1.35vh, 0.64rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* --- Stat listesi --- */
.stat-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.34em;
}

.stat-list__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  padding-bottom: 0.28em;
  border-bottom: 1px dashed rgba(138, 106, 44, 0.22);
}

.stat-list__label {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.58rem, 1.55vh, 0.72rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold-dim);
}

.stat-list__value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 1.8vh, 0.86rem);
  color: var(--c-text);
  text-align: right;
}

.stat-list--boxed {
  padding: 0.7em 0.85em;
  border: 1px solid rgba(138, 106, 44, 0.3);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.32);
}

/* --- Etiket (rol chip'i) --- */
.tag {
  display: inline-block;
  padding: 0.22em 0.6em;
  border: 1px solid rgba(138, 106, 44, 0.5);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  font-size: clamp(0.6rem, 1.5vh, 0.72rem);
  letter-spacing: 0.06em;
  color: var(--c-text-dim);
}

/* -------------------------------------------------------------
   3. LOGIN
   ------------------------------------------------------------- */
.login__form {
  padding-top: clamp(1rem, 2.8vh, 1.6rem);
}

/* Login metinleri ve kontrolleri tema katmanlarindan bagimsiz olarak her
   durumda okunur kalir. Form yerlesimi dar/yatay ekranlarda da bozulmaz. */
.frame--login .field__label,
.frame--login .checkbox__label,
.frame--login .ui-button span,
.frame--login .link-button,
.frame--login .login__social-divider,
.frame--login .login__hint { visibility: visible; opacity: 1; }
.frame--login .frame__actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.frame--login .frame__actions .ui-button { width:100%; min-width:0; }
.frame--login .field__input { min-height:2.55rem; }

.login__remember-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 1rem;
  flex-wrap: wrap;
}

.login__remember-options .checkbox { min-width:0; flex:1 1 10rem; }
.login__remember-options .checkbox__label { overflow-wrap:anywhere; }

.login__social {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 0.7rem;
}

.login__social-divider {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--c-text-dim);
  font-family: var(--font-display);
  font-size: clamp(0.52rem, 1.3vh, 0.64rem);
  letter-spacing: 0.13em;
  text-align: center;
  text-transform: uppercase;
}
.login__social-divider::before,
.login__social-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(138, 106, 44, 0.46), transparent);
}
.login__social-button { min-width: 0; padding-inline: 0.45rem; font-size: 0.62rem; }
.login__social-mark {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  margin-right: 0.3rem;
  border: 1px solid rgba(232, 192, 100, 0.45);
  border-radius: 50%;
  color: var(--c-gold-bright);
}

.login__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.6rem, 2vw, 1.2rem);
  flex-wrap: wrap;
  margin-top: clamp(0.8rem, 2.4vh, 1.3rem);
  padding-top: clamp(0.7rem, 2vh, 1.1rem);
  border-top: 1px solid rgba(138, 106, 44, 0.28);
}

.login__guest {
  width: 100%;
  margin-top: 0.65rem;
  border-color: rgba(232, 192, 100, 0.62);
  background: linear-gradient(180deg, rgba(74, 45, 16, 0.72), rgba(25, 12, 15, 0.9));
  color: var(--c-gold-bright);
}

.login__hint {
  margin: 0.8em 0 0;
  font-size: clamp(0.62rem, 1.5vh, 0.72rem);
  line-height: 1.5;
  text-align: center;
  color: var(--c-text-dim);
  opacity: 0.6;
}

/* -------------------------------------------------------------
   4. NOTICE
   ------------------------------------------------------------- */
.notice__welcome {
  margin: 0 0 0.9em;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.6vh, 1.2rem);
  letter-spacing: 0.06em;
  color: var(--c-gold);
}

.notice__paragraph {
  margin: 0 0 0.75em;
  font-size: clamp(0.78rem, 1.9vh, 0.92rem);
  line-height: 1.65;
  color: var(--c-text);
  opacity: 0.9;
}

.notice__links {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1rem);
  flex-wrap: wrap;
  margin: 1.2em 0;
  padding: 0.7em 0.9em;
  border: 1px solid rgba(138, 106, 44, 0.28);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.3);
}

.notice__links-title {
  font-family: var(--font-display);
  font-size: clamp(0.58rem, 1.5vh, 0.7rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-gold-dim);
}

.notice__warning {
  margin: 0;
  padding: 0.65em 0.9em;
  border: 1px solid rgba(156, 28, 44, 0.6);
  border-left-width: 3px;
  border-radius: 3px;
  background: rgba(107, 18, 32, 0.22);
  font-size: clamp(0.74rem, 1.85vh, 0.86rem);
  line-height: 1.55;
  color: #ffc9c9;
}

.notice__actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
.notice__actions .ui-button { width:100%; min-width:0; }

.notice__status {
  margin: 0 0 0.55rem;
  text-align: center;
}

.notice__status:empty { display: none; }

.notice__actions { flex-wrap: nowrap; }
.notice__actions .ui-button { min-width: 0; }
.notice__switch-account { flex: .78 1 0; padding-inline: .75rem; font-size: clamp(.66rem, 1.55vh, .8rem); }
.notice__continue { flex: 1.22 1 0; min-height: clamp(2.8rem, 6.2vh, 3.35rem); font-size: clamp(.9rem, 2.2vh, 1.08rem); }

.notice__switch-account {
  border-color: rgba(232, 192, 100, 0.68);
  background: linear-gradient(180deg, rgba(86, 20, 39, 0.9), rgba(27, 10, 28, 0.96));
  color: var(--c-gold-bright);
}

/* -------------------------------------------------------------
   5. HUMAN / ORC RACE SELECTION
   ------------------------------------------------------------- */
.race__subtitle {
  max-width: 48rem;
  margin: 0.55rem auto 0;
  color: var(--c-text-dim);
  font-size: clamp(0.72rem, 1.8vh, 0.88rem);
  line-height: 1.45;
}

.race__body {
  padding-block: clamp(0.75rem, 2vh, 1.35rem);
}

.race__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.8rem, 2vw, 1.4rem);
}

.race-card {
  --race-card-height: clamp(235px, 46vh, 405px);
  --race-main: #e7c26c;
  --race-glow: rgba(91, 157, 255, 0.45);
  position: relative;
  display: block;
  min-height: var(--race-card-height);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--race-main) 48%, #101016);
  border-radius: 5px;
  background: #090b13;
  color: var(--c-text);
  cursor: pointer;
  isolation: isolate;
  text-align: left;
  touch-action: manipulation;
  transition: border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out,
    transform var(--t-fast) ease-out, filter var(--t-fast) ease-out;
}

.race-card::before,
.race-card::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.race-card::before {
  inset: 0;
  background: linear-gradient(180deg, transparent 32%, rgba(5, 5, 10, 0.18) 58%, rgba(5, 5, 10, 0.95) 100%);
}

.race-card::after {
  inset: auto -20% -30% 18%;
  height: 70%;
  background: radial-gradient(ellipse, var(--race-glow), transparent 68%);
  filter: blur(8px);
}

.race-card:hover,
.race-card:focus-visible {
  outline: none;
  border-color: var(--race-main);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--race-main) 52%, transparent),
    0 0 26px var(--race-glow), inset 0 0 36px color-mix(in srgb, var(--race-main) 13%, transparent);
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.race-card.is-selected {
  border: 2px solid var(--race-main);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--race-main) 32%, transparent),
    0 0 34px var(--race-glow), inset 0 0 45px color-mix(in srgb, var(--race-main) 18%, transparent);
}

.race-card.is-selected .race-card__select::after {
  content: " ✓";
}

.race-card__sky,
.race-card__crest,
.race-card__aura,
.race-card__emblem,
.race-card__content {
  position: absolute;
}

.race-card__sky { inset: 0; }

.is-race-human {
  --race-main: #f0ce73;
  --race-glow: rgba(138, 167, 91, 0.24);
}

.is-race-human .race-card__sky {
  background:
    radial-gradient(ellipse at 50% 24%, #74845833, transparent 58%),
    repeating-linear-gradient(0deg, #b9ac7805 0 1px, transparent 1px 4px),
    linear-gradient(155deg, #18251b, #0b1510 58%, #050b08);
}

.is-race-orc {
  --race-main: #d8be76;
  --race-glow: rgba(138, 167, 91, 0.24);
}

.is-race-orc .race-card__sky {
  background:
    radial-gradient(ellipse at 50% 24%, #887c4433, transparent 58%),
    repeating-linear-gradient(0deg, #b9ac7805 0 1px, transparent 1px 4px),
    linear-gradient(205deg, #1b281b, #0b1510 58%, #050b08);
}

.race-card__crest {
  z-index: 1;
  top: 2%;
  left: 50%;
  width: min(62%, 19rem, calc(var(--race-card-height) * 0.56));
  aspect-ratio: 1;
  transform: translateX(-50%);
  pointer-events: none;
}

.race-card__aura {
  z-index: 1;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--race-main) 28%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle, #b4aa6520, transparent 65%);
  box-shadow: 0 0 3.5rem var(--race-glow), inset 0 0 2rem rgba(0, 0, 0, 0.65);
  opacity: 0.72;
}

.race-card__emblem {
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  object-fit: contain;
  filter: drop-shadow(0 0 1.1rem var(--race-glow)) drop-shadow(0 0 0.35rem rgba(0, 0, 0, 0.95));
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: filter var(--t-fast) ease-out, transform var(--t-fast) ease-out;
  user-select: none;
  -webkit-user-drag: none;
}

.race-card:hover .race-card__emblem,
.race-card:focus-visible .race-card__emblem,
.race-card.is-selected .race-card__emblem {
  filter: drop-shadow(0 0 1.65rem var(--race-glow)) drop-shadow(0 0 0.45rem rgba(0, 0, 0, 0.96));
  transform: translate(-50%, -50%) scale(1.035);
}

.race-card__content {
  z-index: 3;
  right: 8%;
  bottom: 8%;
  left: 8%;
}

.race-card__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3.6vh, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--race-main);
  text-shadow: 0 2px 12px #000;
}

.race-card__description {
  display: block;
  max-width: 33rem;
  margin-top: 0.45rem;
  color: #f0e6d5;
  font-size: clamp(0.68rem, 1.7vh, 0.84rem);
  line-height: 1.5;
  text-shadow: 0 1px 4px #000;
}

.race-card__select {
  display: inline-block;
  margin-top: 0.9rem;
  padding: 0.36em 0.7em;
  border: 1px solid color-mix(in srgb, var(--race-main) 65%, transparent);
  background: rgba(3, 5, 10, 0.62);
  font-family: var(--font-display);
  font-size: clamp(0.58rem, 1.45vh, 0.72rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--race-main);
}

.race__prompt {
  min-height: 1.4em;
  margin: 0.85rem 0 0;
  text-align: center;
  color: var(--c-text-dim);
  font-size: clamp(0.7rem, 1.7vh, 0.84rem);
}

.race__prompt.is-ready { color: var(--c-gold); }
.race__prompt.is-error,
.screen-load-state__message.is-error { color: #ff8a8a; }

.screen-load-state__message {
  margin: auto;
  color: var(--c-text-dim);
  line-height: 1.5;
  text-align: center;
}

/* -------------------------------------------------------------
   6. CHARACTER SELECTION
   ------------------------------------------------------------- */
.screen--character-select-v2 {
  overflow: hidden;
}

.char-select-frame {
  position: relative;
  width: min(97vw, 92rem);
  height: min(calc(var(--app-h) * .94), 58rem);
  max-height: calc(var(--app-h) * .94);
  overflow: hidden;
}

.char-select-header,
.char-select-footer {
  position: relative;
  z-index: 5;
}
.char-select__back-actions { display: flex; align-items: center; gap: .5rem; }

.frame__body.characters {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  overflow: hidden;
  overflow: clip;
  padding: 0;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(3, 5, 12, 0.2), rgba(4, 2, 7, 0.88)),
    radial-gradient(ellipse at 43% 38%, rgba(105, 42, 51, 0.38), transparent 38%),
    linear-gradient(115deg, #080915 0%, #170b16 46%, #05050a 100%);
}

.characters::before,
.characters::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.characters::before {
  inset: 7% 7% 8%;
  border: 1px solid rgba(218, 171, 79, 0.09);
  border-radius: 50% 50% 8% 8% / 38% 38% 5% 5%;
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(222, 176, 88, 0.07) 50%, transparent 50.2%),
    radial-gradient(ellipse at 43% 86%, rgba(195, 82, 38, 0.24), transparent 25%);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.72);
}

.characters::after {
  right: 0;
  bottom: 0;
  left: 0;
  height: 34%;
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.8), transparent),
    repeating-linear-gradient(90deg, transparent 0 7.8%, rgba(232, 192, 100, 0.025) 8% 8.2%);
}

.char-select__mist {
  position: absolute;
  z-index: 0;
  right: -8%;
  bottom: -12%;
  left: -8%;
  height: 42%;
  background: radial-gradient(ellipse, rgba(122, 41, 55, 0.24), transparent 66%);
  filter: blur(20px);
  pointer-events: none;
}

.char-select-carousel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: clamp(3.4rem, 6vw, 5.2rem) minmax(0, 1fr) clamp(3.4rem, 6vw, 5.2rem);
  flex: 1 1 auto;
  min-height: 0;
  padding: clamp(0.45rem, 1.5vh, 0.9rem) clamp(0.3rem, 1vw, 0.8rem) 0;
}

.char-carousel__arrow {
  position: relative;
  z-index: 6;
  align-self: center;
  justify-self: center;
  display: grid;
  place-items: center;
  width: clamp(3rem, 6vh, 4.5rem);
  min-width: var(--tap-min, 44px);
  height: clamp(4.8rem, 14vh, 8rem);
  min-height: var(--tap-min, 44px);
  padding: 0;
  border: 1px solid rgba(220, 173, 79, 0.62);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(81, 20, 35, 0.9), rgba(14, 7, 14, 0.96));
  box-shadow: inset 0 0 1.2rem rgba(255, 183, 79, 0.07), 0 0.5rem 1.4rem rgba(0, 0, 0, 0.55);
  color: #f7d98d;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--t-fast), color var(--t-fast), filter var(--t-fast), transform var(--t-fast);
}

.char-carousel__arrow:hover,
.char-carousel__arrow:focus-visible {
  outline: none;
  border-color: #ffe39a;
  color: #fff0bc;
  filter: brightness(1.16);
  transform: scale(1.035);
}

.char-carousel__arrow:disabled {
  cursor: default;
  filter: grayscale(0.7);
  opacity: 0.35;
}

.char-carousel__arrow-glyph {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 5vh, 2.8rem);
  line-height: 1;
  text-shadow: 0 0 0.8rem rgba(255, 179, 73, 0.45);
}

.characters__details {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(138, 106, 44, 0.23);
  border-radius: 5px 5px 2px 2px;
  background:
    radial-gradient(ellipse at 42% 43%, color-mix(in srgb, var(--class-accent, #b85a3b) 18%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(18, 12, 24, 0.34), rgba(3, 2, 6, 0.72));
  box-shadow: inset 0 -4rem 5rem rgba(0, 0, 0, 0.48);
}

.characters__details::before {
  position: absolute;
  inset: 5% auto 7% 43%;
  width: min(42%, 28rem);
  border: 1px solid color-mix(in srgb, var(--class-accent, #d0a251) 16%, transparent);
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 10deg, color-mix(in srgb, var(--class-accent, #d0a251) 10%, transparent) 0 1deg, transparent 1deg 15deg),
    radial-gradient(circle, color-mix(in srgb, var(--class-accent, #d0a251) 10%, transparent), transparent 66%);
  content: "";
  opacity: 0.7;
  pointer-events: none;
  transform: translateX(-50%);
}

.char-select-figure,
.char-select-empty-figure {
  position: absolute;
  z-index: 2;
  top: 1%;
  bottom: 0;
  left: 43%;
  width: min(48%, 32rem);
  min-width: 0;
  transform: translateX(-50%);
  animation: char-select-figure-enter 260ms ease-out both;
}

@keyframes char-select-figure-enter {
  from { opacity: 0; transform: translateX(-50%) translateY(0.8rem) scale(0.985); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.char-select-figure__layers,
.char-select-figure .char-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.char-select-figure .char-layer {
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  user-select: none;
}

.char-select-figure__base {
  filter: saturate(0.96) contrast(1.06) drop-shadow(0 0.8rem 1rem rgba(0, 0, 0, 0.75));
}

.char-select-model3d {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease-out;
}

.char-select-model3d__canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
}

/* Tam boy seçim/oluşturma önizlemesinde modelin tabanı platforma oturur. */
.char-select-figure .char-select-model3d__canvas {
  transform: translateY(2.25%);
}

.char-select-model3d__fallback {
  z-index: 1;
  opacity: 0;
}
.char-select-figure[data-model-state="fallback"] .char-select-model3d__fallback { opacity: 1; }
.char-select-figure.has-model3d:not([data-model-state="fallback"]) .char-select-figure__layers > .char-layer { opacity: 0; }
.char-select-figure.has-model3d:not(.is-3d-ready):not([data-model-state="fallback"])::after {
  content: ""; position: absolute; left: calc(50% - 12px); top: calc(50% - 12px);
  width: 24px; height: 24px; border: 2px solid #bca47644; border-top-color: #d5c9a9;
  border-radius: 50%; animation: character-model-loading 1s linear infinite;
}
@keyframes character-model-loading { to { transform: rotate(360deg); } }

.char-select-figure.is-3d-ready .char-select-model3d { opacity: 1; }
.char-select-figure.is-3d-ready .char-select-model3d__fallback { opacity: 0; }
.char-select-figure.has-model3d.is-3d-ready .char-select-figure__layers > .char-layer { opacity: 0; }

.char-select-figure__aura {
  position: absolute;
  inset: 5% 7% 7%;
  border-radius: 48%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--class-accent, #d0a251) 23%, transparent), transparent 65%);
  filter: blur(0.45rem);
}

.char-select-figure__platform {
  position: absolute;
  right: 5%;
  bottom: 1%;
  left: 5%;
  height: 8%;
  border: 1px solid rgba(226, 177, 79, 0.3);
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--class-accent, #dc7a35) 36%, transparent), rgba(0, 0, 0, 0.48) 66%);
  box-shadow: 0 0 1.8rem color-mix(in srgb, var(--class-accent, #dc7a35) 20%, transparent);
}

.char-select-info {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: clamp(0.8rem, 3vw, 3.2rem);
  width: min(31%, 24rem);
  padding: clamp(0.75rem, 2vh, 1.25rem);
  border: 1px solid rgba(201, 152, 61, 0.35);
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(28, 8, 20, 0.88), rgba(4, 4, 9, 0.88));
  box-shadow: inset 0 0 2rem rgba(125, 32, 46, 0.15), 0 0.8rem 2rem rgba(0, 0, 0, 0.5);
  text-align: left;
  transform: translateY(-50%);
  animation: char-select-info-enter 230ms ease-out both;
}

@keyframes char-select-info-enter {
  from { opacity: 0; transform: translateY(-47%) translateX(0.7rem); }
  to { opacity: 1; transform: translateY(-50%) translateX(0); }
}

.char-select-info__slot {
  display: block;
  margin-bottom: 0.42rem;
  color: var(--c-gold-dim);
  font-family: var(--font-mono);
  font-size: clamp(0.55rem, 1.45vh, 0.7rem);
  letter-spacing: 0.24em;
}

.characters__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3.2vh, 1.85rem);
  letter-spacing: 0.07em;
  color: var(--c-gold);
  overflow-wrap: anywhere;
}

.characters__class {
  margin: 0.35rem 0 0.75rem;
  color: var(--c-text-dim);
  font-size: clamp(0.65rem, 1.65vh, 0.82rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.char-select-level {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
  padding: 0.42rem 0.62rem;
  border-block: 1px solid rgba(166, 119, 45, 0.28);
  color: var(--c-gold-dim);
  font-family: var(--font-display);
  font-size: clamp(0.62rem, 1.55vh, 0.76rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.char-select-level strong {
  color: #ffe6a3;
  font-family: var(--font-mono);
  font-size: 1.2em;
}

.char-select-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.32rem 0.72rem;
}

.char-select-stats .stat-list__row {
  min-width: 0;
  padding: 0.24rem 0;
}

.char-select-stats .stat-list__label {
  font-size: clamp(0.5rem, 1.25vh, 0.64rem);
  letter-spacing: 0.1em;
}

.char-select-stats .stat-list__value {
  font-size: clamp(0.62rem, 1.45vh, 0.74rem);
  white-space: nowrap;
}

.characters__prompt {
  margin: 0;
  color: var(--c-text-dim);
  font-size: clamp(0.72rem, 1.8vh, 0.88rem);
  line-height: 1.55;
  opacity: 0.82;
}

.characters__details > .screen-load-state__message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.characters__details > .screen-load-state__message + .ui-button {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
}

.char-select-empty-figure {
  display: grid;
  place-items: center;
}

.char-select-empty-figure__rune {
  display: grid;
  place-items: center;
  width: min(54%, 13rem);
  aspect-ratio: 1;
  border: 1px solid rgba(219, 171, 78, 0.38);
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 10deg, rgba(223, 178, 89, 0.08) 0 1deg, transparent 1deg 20deg),
    radial-gradient(circle, rgba(113, 29, 45, 0.35), rgba(3, 3, 7, 0.55) 68%);
  box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.7), 0 0 2rem rgba(121, 42, 50, 0.22);
  color: rgba(237, 199, 111, 0.65);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 10vh, 5.8rem);
}

.char-select-info--empty .characters__name {
  margin-bottom: 0.65rem;
}

.characters__slots {
  position: relative;
  z-index: 5;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: clamp(0.35rem, 1vw, 0.75rem);
  min-height: clamp(3rem, 7vh, 4.2rem);
  padding: clamp(0.35rem, 0.9vh, 0.55rem) 1rem;
  border-top: 1px solid rgba(138, 106, 44, 0.3);
  background: linear-gradient(180deg, rgba(7, 4, 10, 0.55), rgba(20, 6, 16, 0.94));
}

.char-select-slot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.42rem;
  width: clamp(4.5rem, 10vw, 8rem);
  min-width: 0;
  min-height: var(--tap-min, 44px);
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(139, 102, 39, 0.5);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(50, 14, 28, 0.86), rgba(9, 5, 11, 0.94));
  color: var(--c-text-dim);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--t-fast), color var(--t-fast), filter var(--t-fast), transform var(--t-fast);
}

.char-select-slot:hover,
.char-select-slot:focus-visible,
.char-select-slot.is-selected {
  outline: none;
  border-color: #e4bd61;
  color: #ffe6a5;
  filter: brightness(1.12);
}

.char-select-slot.is-selected {
  box-shadow: 0 0 0 1px rgba(232, 192, 100, 0.32), 0 0 1rem rgba(180, 83, 45, 0.3);
  transform: translateY(-2px);
}

.char-select-slot__number {
  color: var(--c-gold);
  font-family: var(--font-display);
  font-size: clamp(0.68rem, 1.7vh, 0.88rem);
}

.char-select-slot__state {
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: clamp(0.54rem, 1.35vh, 0.68rem);
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.char-select-slot.is-empty .char-select-slot__state {
  text-align: center;
  opacity: 0.6;
}

.char-select__actions .ui-button {
  min-width: clamp(10.5rem, 18vw, 15rem);
}

/* Karakter olusturma artik ayri bir ekran degil; bos slot secildiginde
   ayni MMORPG sahnesinin sag bilgi paneli olusturma konsoluna donusur. */
.characters__details.is-creating::before {
  left: 34%;
}

.characters__details.is-creating .char-select-create-figure {
  left: 34%;
  width: min(43%, 28rem);
}

.char-create-inline {
  position: absolute;
  z-index: 4;
  top: 2.5%;
  right: clamp(0.65rem, 2vw, 2rem);
  bottom: 2.5%;
  display: flex;
  flex-direction: column;
  width: min(42%, 29rem);
  min-width: 0;
  padding: clamp(0.65rem, 1.7vh, 1rem);
  overflow: hidden;
  isolation: isolate;
  border: 2px solid rgba(214, 169, 73, 0.52);
  border-radius: 4px;
  background: linear-gradient(145deg, rgba(30, 8, 21, 0.93), rgba(4, 4, 10, 0.93));
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 150, .08),
    inset 0 0 2.2rem rgba(125, 32, 46, 0.2),
    0 0.8rem 2rem rgba(0, 0, 0, 0.52);
}

.char-create-inline::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: .34rem;
  border: 1px solid rgba(214, 169, 73, .2);
  clip-path: polygon(0 0, 22% 0, 22% 1px, 78% 1px, 78% 0, 100% 0, 100% 100%, 78% 100%, 78% calc(100% - 1px), 22% calc(100% - 1px), 22% 100%, 0 100%);
  pointer-events: none;
}

.char-create-inline::after {
  content: "◆";
  position: absolute;
  z-index: 0;
  top: .16rem;
  left: 50%;
  width: 62%;
  color: rgba(235, 196, 103, .6);
  font-size: .42rem;
  line-height: 1;
  text-align: center;
  text-shadow: -7rem 0 rgba(197, 147, 53, .22), 7rem 0 rgba(197, 147, 53, .22);
  transform: translateX(-50%);
  pointer-events: none;
}

.char-create-inline > * {
  position: relative;
  z-index: 1;
}

.char-create-inline__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: .12rem .2rem .42rem;
  border-bottom: 1px solid rgba(214, 169, 73, .34);
  box-shadow: 0 1px rgba(0, 0, 0, .62);
}

.char-create-inline__heading .char-select-info__slot {
  order: 2;
  margin: 0;
}

.char-create-inline__title,
.char-create-inline__class-name {
  margin: 0;
  color: var(--c-gold);
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.char-create-inline__title {
  font-size: clamp(0.85rem, 2.3vh, 1.2rem);
}

.char-create-inline__name {
  margin-top: clamp(0.35rem, 1vh, 0.6rem);
}

.char-create-inline__name-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
}

.char-create-inline__name .field__label,
.char-create-inline__label {
  margin: 0 0 0.28rem;
  color: var(--c-gold-dim);
  font-family: var(--font-display);
  font-size: clamp(0.48rem, 1.25vh, 0.62rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.char-create-inline__name .field__input {
  min-height: 2rem;
  padding: 0.42rem 0.55rem;
}

.char-create-inline__name .field__rule {
  position: static;
  font-size: 0.55rem;
}

.char-create-inline__message {
  min-height: 1.1em;
  margin: 0.18rem 0;
  font-size: clamp(0.48rem, 1.2vh, 0.62rem);
  text-align: left;
}

.char-create-inline__choice-row,
.char-create-inline__class-wrap,
.char-create-inline__summary {
  margin-top: clamp(0.22rem, 0.7vh, 0.42rem);
}

.char-create-inline__genders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.38rem;
}

.char-create-inline__gender,
.char-create-inline__class {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 2rem;
  border: 1px solid rgba(180, 132, 52, 0.42);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(47, 14, 28, 0.82), rgba(7, 5, 11, 0.94));
  color: var(--c-text-dim);
  font-family: var(--font-display);
  font-size: clamp(0.48rem, 1.25vh, 0.64rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.char-create-inline__gender {
  gap: 0.35rem;
}

.char-create-inline__choice-mark {
  width: 0.42rem;
  aspect-ratio: 1;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.char-create-inline__gender.is-active,
.char-create-inline__class.is-active {
  border-color: var(--class-accent, var(--c-gold));
  color: #ffe7a1;
  box-shadow: inset 0 0 1rem color-mix(in srgb, var(--class-accent, #e8c064) 15%, transparent),
    0 0 0 1px color-mix(in srgb, var(--class-accent, #e8c064) 28%, transparent);
}

.char-create-inline__gender.is-active .char-create-inline__choice-mark {
  background: currentColor;
  box-shadow: 0 0 0.45rem currentColor;
}

.char-create-inline__classes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.38rem;
}

.char-create-inline__class {
  justify-content: flex-start;
  gap: 0.35rem;
  padding: 0.25rem 0.42rem;
  overflow: hidden;
  border-left-width: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 225, 145, .035), inset 0 -9px 18px rgba(0, 0, 0, .25);
}

.char-create-inline__class img {
  flex: none;
  width: clamp(1.35rem, 3.8vh, 2rem);
  height: clamp(1.35rem, 3.8vh, 2rem);
  padding: .08rem;
  object-fit: contain;
  border: 1px solid color-mix(in srgb, var(--class-accent, #e8c064) 52%, #342516);
  background: radial-gradient(circle, rgba(109, 70, 28, .18), rgba(2, 4, 8, .9));
  filter: drop-shadow(0 0 .28rem color-mix(in srgb, var(--class-accent, #e8c064) 38%, transparent));
}

.char-create-inline__class.is-active img {
  border-color: color-mix(in srgb, var(--class-accent, #e8c064) 82%, white);
  filter: brightness(1.12) drop-shadow(0 0 .42rem color-mix(in srgb, var(--class-accent, #e8c064) 62%, transparent));
}

.char-create-inline__class span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.char-create-inline__summary {
  min-height: 0;
  padding-top: 0.38rem;
  border-top: 1px solid rgba(166, 119, 45, 0.26);
}

.char-create-inline__class-name {
  font-size: clamp(0.65rem, 1.7vh, 0.85rem);
}

.char-create-inline__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.1rem 0.45rem;
  margin-top: 0.25rem;
}

.char-create-inline__stats .stat-list__row {
  min-width: 0;
  padding: 0.1rem 0;
}

.char-create-inline__stats .stat-list__label,
.char-create-inline__stats .stat-list__value {
  font-size: clamp(0.42rem, 1.05vh, 0.56rem);
}

.char-create-inline__stats .stat-list__value {
  white-space: nowrap;
}

.race-card.is-locked {
  cursor: not-allowed;
  filter: grayscale(0.72) brightness(0.48);
  opacity: 0.62;
}

@media (max-width: 1100px) {
  .char-select-info { width: min(34%, 21rem); }
  .char-select-figure,
  .char-select-empty-figure { left: 40%; width: 46%; }
  .characters__details::before { left: 40%; }
  .characters__details.is-creating::before { left: 30%; }
  .characters__details.is-creating .char-select-create-figure { left: 30%; width: 36%; }
  .char-create-inline { right: 1.5%; width: 50%; }
}

@media (orientation: landscape) and (max-height: 620px) {
  .screen--character-select-v2 { padding: 0.2rem; }

  .char-select-frame {
    width: 99vw;
    height: calc(var(--app-h) - 0.4rem);
    max-height: calc(var(--app-h) - 0.4rem);
  }

  .char-select-header {
    min-height: 2.2rem;
    padding: 0.34rem 0.72rem;
  }

  .char-select-header .frame__title { font-size: clamp(0.68rem, 2.3vh, 0.9rem); }
  .char-select-header .frame__badge { padding: 0.2em 0.62em; }

  .char-select-carousel {
    grid-template-columns: clamp(2.8rem, 7vw, 3.5rem) minmax(0, 1fr) clamp(2.8rem, 7vw, 3.5rem);
    padding: 0.24rem 0.2rem 0;
  }

  .char-carousel__arrow {
    width: clamp(2.45rem, 8vh, 3rem);
    height: clamp(3.5rem, 17vh, 5.2rem);
  }

  .char-select-figure,
  .char-select-empty-figure {
    top: 0;
    left: 38%;
    width: min(43%, 18rem);
  }

  .characters__details::before { left: 38%; width: 39%; }

  .char-select-info {
    right: 2.5%;
    width: min(39%, 20rem);
    padding: clamp(0.42rem, 1.5vh, 0.7rem);
  }

  .characters__details.is-creating::before { left: 29%; width: 34%; }
  .characters__details.is-creating .char-select-create-figure { left: 29%; width: 35%; }
  .char-create-inline {
    top: 1.5%;
    right: 1%;
    bottom: 1.5%;
    width: 54%;
    padding: 0.42rem 0.5rem;
  }
  .char-create-inline__name { margin-top: 0.2rem; }
  .char-create-inline__message { margin-block: 0.08rem; }
  .char-create-inline__choice-row,
  .char-create-inline__class-wrap,
  .char-create-inline__summary { margin-top: 0.12rem; }
  .char-create-inline__gender,
  .char-create-inline__class { min-height: 1.55rem; }
  .char-create-inline__name .field__input { min-height: 1.65rem; padding-block: 0.25rem; }

  .char-select-info__slot { margin-bottom: 0.2rem; }
  .characters__name { font-size: clamp(0.84rem, 3.7vh, 1.25rem); }
  .characters__class { margin: 0.16rem 0 0.3rem; font-size: clamp(0.5rem, 1.8vh, 0.66rem); }
  .char-select-level { margin-bottom: 0.25rem; padding: 0.22rem 0.38rem; }
  .char-select-stats { gap: 0.08rem 0.45rem; }
  .char-select-stats .stat-list__row { padding: 0.1rem 0; }
  .char-select-stats .stat-list__label { font-size: clamp(0.44rem, 1.55vh, 0.56rem); }
  .char-select-stats .stat-list__value { font-size: clamp(0.5rem, 1.7vh, 0.62rem); }
  .characters__prompt { font-size: clamp(0.56rem, 1.9vh, 0.7rem); line-height: 1.38; }

  .characters__slots {
    min-height: 2.25rem;
    gap: 0.28rem;
    padding: 0.18rem 0.5rem;
  }

  .char-select-slot {
    width: clamp(4rem, 12vw, 6.2rem);
    min-height: 1.85rem;
    padding: 0.18rem 0.34rem;
  }

  .char-select-footer { min-height: 2.65rem; padding: 0.28rem 0.7rem; }
  .char-select-footer .ui-button { min-height: 2rem; padding: 0.35rem 0.8rem; }
}

@media (orientation: landscape) and (max-height: 430px) {
  .char-select__server { display: none; }
  .char-select-header { min-height: 1.9rem; padding-block: 0.22rem; }
  .char-select-figure,
  .char-select-empty-figure { left: 36%; width: 42%; }
  .characters__details::before { left: 36%; }
  .char-select-info { right: 2%; width: 41%; }
  .char-select-empty-figure__rune { width: min(46%, 8rem); }
  .char-select-info__slot { font-size: 0.46rem; }
  .char-select-level { font-size: 0.5rem; }
  .char-select-slot__state { font-size: 0.48rem; }
  .char-select-footer { min-height: 2.35rem; }
  .char-select-footer .ui-button { min-height: 1.8rem; }
  .characters__details.is-creating::before { left: 27%; }
  .characters__details.is-creating .char-select-create-figure { left: 27%; width: 32%; }
  .char-create-inline { width: 58%; padding: 0.3rem 0.4rem; }
  .char-create-inline__title { font-size: 0.68rem; }
  .char-create-inline__name .field__label,
  .char-create-inline__label { margin-bottom: 0.12rem; font-size: 0.42rem; }
  .char-create-inline__name .field__input { min-height: 1.4rem; padding: 0.15rem 0.35rem; }
  .char-create-inline__gender,
  .char-create-inline__class { min-height: 1.25rem; font-size: 0.42rem; }
  .char-create-inline__class img { width: 0.9rem; height: 1rem; }
  .char-create-inline__summary { padding-top: 0.18rem; }
  .char-create-inline__stats { margin-top: 0.08rem; }
}

/* -------------------------------------------------------------
   8. CLASS RENK AKSANLARI
   -------------------------------------------------------------
   Her class'in kendi rengi vardir; secili kart, portre ve sahne
   bu renkten hafif bir parlama alir.
   ------------------------------------------------------------- */
.is-class-warrior { --class-accent: #e05a2b; }
.is-class-rogue   { --class-accent: #8b5cf6; }
.is-class-mage    { --class-accent: #3b82f6; }
.is-class-priest  { --class-accent: #e8c064; }

.char-portrait[class*="is-class-"] {
  box-shadow: inset 0 -30px 60px -30px color-mix(in srgb, var(--class-accent, #e8c064) 45%, transparent);
}

/* -------------------------------------------------------------
   10. TOWN / VILLAGE HUB
   -------------------------------------------------------------
   Acik dunya hareketi degil; gelecekteki oyun sistemlerine giris veren
   illustratif ve veri-tabanli bir merkez haritasi.
   ------------------------------------------------------------- */
.screen--town {
  display: grid;
  place-items: center;
  padding: clamp(0.35rem, 1.3vw, 1.15rem);
}

.town-live-announcement {
  position: fixed;
  z-index: 2000;
  top: 31%;
  left: 50%;
  width: min(48rem, 84%);
  padding: 0;
  color: #ffd84a;
  background: none;
  border: 0;
  box-shadow: none;
  text-align: center;
  text-shadow: 0 3px 3px #000, 0 0 8px #000, 0 0 16px #e59a16;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.92);
  pointer-events: none;
  transition: opacity .32s ease, transform .32s ease;
}
.town-live-announcement.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.town-live-announcement strong {
  display: block; font-family: var(--font-display); font-size: clamp(1.15rem, 3vw, 2.25rem);
  letter-spacing: .12em; text-align: center; text-transform: uppercase;
}
.town-live-announcement p {
  margin: .4rem 0 0;
  color: #ffe978;
  font-size: clamp(.85rem, 1.65vw, 1.2rem);
  font-weight: 900;
  letter-spacing: .04em;
  text-align: center;
}

.town-shell {
  position: relative;
  z-index: 2;
  display: grid;
  /* Sol menu genisligi TEK MERKEZDEN gelir (--sidebar-w);
     kucuk yatay telefonlarda oransal daralir, haritayi yemez. */
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  width: min(98vw, 112rem);
  height: min(94%, 60rem);
  min-height: min(30rem, 94%);
  overflow: hidden;
  isolation: isolate;
  border: 2px solid transparent;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(13, 16, 48, 0.97), rgba(7, 4, 13, 0.99)) padding-box,
    linear-gradient(135deg, #4a3410 0%, #e8c064 18%, #ffe9a8 34%, #8a6a2c 58%, #26160c 100%) border-box;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.84),
    0 30px 85px rgba(0, 0, 0, 0.7),
    inset 0 0 90px rgba(107, 18, 32, 0.24);
  animation: frame-enter var(--t-slow) cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.town-shell::after {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 4;
  pointer-events: none;
  border: 1px solid rgba(255, 233, 168, 0.12);
  border-radius: 4px;
}

/* --- Oyuncu ve navigasyon paneli --- */
.town-sidebar {
  position: relative;
  z-index: 5;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid rgba(232, 192, 100, 0.44);
  background:
    radial-gradient(ellipse at 50% 5%, rgba(107, 18, 32, 0.45), transparent 40%),
    linear-gradient(180deg, rgba(18, 21, 58, 0.99), rgba(9, 6, 17, 0.99));
  scrollbar-color: rgba(232, 192, 100, 0.45) rgba(0, 0, 0, 0.2);
}

.town-sidebar__brand {
  display: grid;
  gap: 0.12rem;
  padding: clamp(0.85rem, 2.1vh, 1.25rem) clamp(0.8rem, 1.6vw, 1.2rem);
  border-bottom: 1px solid rgba(232, 192, 100, 0.25);
  text-align: center;
}

.town-sidebar__brand strong {
  font-family: var(--font-display);
  font-size: clamp(0.78rem, 1.65vh, 0.95rem);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--c-gold);
}

.town-sidebar__kicker,
.town-navigation__section > summary,
.town-player__level,
.town-resource dt {
  font-family: var(--font-display);
  font-size: clamp(0.56rem, 1.25vh, 0.66rem);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--c-gold-dim);
}

.town-player {
  display: grid;
  grid-template-columns: clamp(3.6rem, 5.6vw, 4.8rem) minmax(0, 1fr);
  column-gap: 0.7rem;
  padding: clamp(0.75rem, 1.8vh, 1.05rem) clamp(0.75rem, 1.4vw, 1rem);
  border-bottom: 1px solid rgba(232, 192, 100, 0.22);
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.28), rgba(107, 18, 32, 0.11));
}

.town-player__boot-status {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.6rem;
  color: var(--c-text-dim);
  text-align: center;
}

.town-player__boot-status.is-error { color: #ff8a8a; }
.town-player__retry { grid-column: 1 / -1; justify-self: center; }

.town-player__portrait {
  position: relative;
  grid-row: span 2;
  width: 100%;
  aspect-ratio: 0.78;
  align-self: center;
  overflow: hidden;
  border: 1px solid rgba(232, 192, 100, 0.65);
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--class-accent, #e8c064) 48%, transparent), transparent 49%),
    linear-gradient(180deg, #171940, #090611);
  box-shadow: inset 0 -1.4rem 1.5rem rgba(0, 0, 0, 0.64), 0 0 15px rgba(0, 0, 0, 0.42);
}

.town-player__portrait::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255, 233, 168, 0.2);
  pointer-events: none;
}

.town-player__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.84) contrast(1.06);
}

.town-player__identity {
  min-width: 0;
  align-self: center;
}

/* Portre ve isim artik <button>: tarayici stilini sifirla,
   gorunum birebir ayni kalsin (bkz. townScreen.js). */
.town-player__portrait.is-clickable,
.town-player__identity.is-clickable {
  appearance: none;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: box-shadow var(--t-fast) ease-out, border-color var(--t-fast) ease-out;
}

.town-player__identity.is-clickable {
  display: block;
  width: 100%;
  border: 0;
  background: none;
}

.town-player__portrait.is-clickable:hover,
.town-player__portrait.is-clickable:focus-visible {
  border-color: var(--c-gold-bright);
  box-shadow: inset 0 -1.4rem 1.5rem rgba(0, 0, 0, 0.64),
    0 0 16px rgba(232, 192, 100, 0.45);
}

.town-player__identity.is-clickable:hover .town-player__name,
.town-player__identity.is-clickable:focus-visible .town-player__name {
  color: #fff6dc;
  text-shadow: 0 0 10px rgba(232, 192, 100, 0.55);
}

.town-player__name {
  display: block;
  overflow: hidden;
  margin: 0;
  color: var(--c-gold-bright);
  font-family: var(--font-display);
  font-size: clamp(0.86rem, 1.8vh, 1.08rem);
  letter-spacing: 0.07em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.town-player__class {
  display: block;
  margin: 0.2rem 0 0.32rem;
  overflow: hidden;
  color: var(--c-text-dim);
  font-size: clamp(0.62rem, 1.35vh, 0.73rem);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.town-player__level { display: block; margin: 0; }
.town-player__level strong { color: var(--c-gold-bright); }

.town-player__resources {
  display: grid;
  grid-column: 1 / -1;
  /* Dort deger (Altin / Irk Puani / Can / Mana) esit sigsin. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.28rem;
  margin: 0.6rem 0 0;
}


.town-resource {
  min-width: 0;
  padding: 0.32rem 0.34rem;
  border: 1px solid rgba(232, 192, 100, 0.2);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.28);
}

.town-resource dt,
.town-resource dd { margin: 0; }
.town-resource dt { font-size: clamp(0.47rem, 1.02vh, 0.58rem); }
.town-resource dd {
  margin-top: 0.12rem;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: clamp(0.55rem, 1.15vh, 0.66rem);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-text);
}
.town-resource--gold dd { color: var(--c-gold); }
.town-resource--hp dd { color: #d46c68; }
.town-resource--mp dd { color: #78b3e8; }

.town-navigation {
  padding: 0.38rem 0.5rem 0.8rem;
}

.town-navigation__section {
  border-bottom: 1px solid rgba(232, 192, 100, 0.15);
}

.town-navigation__section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 1.9rem;
  padding: 0.38rem 0.34rem;
  cursor: pointer;
  list-style: none;
  transition: color var(--t-fast) ease;
}

.town-navigation__section > summary::-webkit-details-marker { display: none; }
.town-navigation__section > summary::after {
  content: "+";
  color: var(--c-gold-dim);
  font-family: var(--font-mono);
  font-size: 0.9rem;
}
.town-navigation__section[open] > summary { color: var(--c-gold); }
.town-navigation__section[open] > summary::after { content: "−"; }
.town-navigation__section > summary:focus-visible { outline: 1px solid var(--c-gold); outline-offset: -2px; }

.town-navigation__items {
  display: grid;
  gap: 0.16rem;
  padding: 0.02rem 0 0.45rem;
}

.town-navigation__item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.42rem;
  padding: 0.34rem 0.38rem;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--c-text-dim);
  font-size: clamp(0.62rem, 1.3vh, 0.73rem);
  line-height: 1.25;
  text-align: left;
  transition: color var(--t-fast) ease, background var(--t-fast) ease, border-color var(--t-fast) ease;
}

.town-navigation__item:hover,
.town-navigation__item:focus-visible {
  border-color: rgba(232, 192, 100, 0.42);
  outline: none;
  background: linear-gradient(90deg, rgba(107, 18, 32, 0.38), transparent);
  color: var(--c-gold-bright);
}

.town-navigation__item.is-exit {
  color: #d99382;
}

.town-navigation__mark {
  flex: none;
  color: var(--c-gold-dim);
  font-size: 0.5rem;
}
.town-navigation__item.is-exit .town-navigation__mark { color: #c55a53; }

/* --- KOY SAHNESI: TEK PARCA ARTWORK -------------------------
   Eski CSS ile cizilen gokyuzu / dag / orman / yol / agac / kale /
   arena / carkifelek / demirci katmanlari KALDIRILDI. Yerine tek
   bir koy gorseli gelir; yapilarin KENDISI tiklanabilir hotspot'tur.

   Katman duzeni:
     .town-map          -> mevcut alan (ortalayici)
       .town-map__frame -> ARTWORK ORANINDA cerceve (aspect-ratio)
         img            -> gorsel
         .town-hotspots -> yuzde koordinatli tiklama alanlari + etiketler
         HUD + secim gostergesi

   Hotspotlar cerceveye gore konumlanir. Cerceve gorselle AYNI orana
   sahip oldugu icin letterbox bosluklari hotspot hizasini KAYDIRMAZ.
   -------------------------------------------------------------- */
.town-map {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  /* Cerceve olcusu bu alanin GERCEK genislik/yuksekligine gore
     hesaplanir (container query birimleri: cqw / cqh). */
  container-type: size;
  background: radial-gradient(ellipse at 50% 55%, #1a1226 0%, #0b0710 70%, #05030a 100%);
}

/* Cerceve: gorselin TAMAMI gorunur, orani korunur, bos alan olusmaz. */
.town-map__frame {
  position: relative;
  /* YUKSEKLIGE OTUR, GENISLIGI ORANDAN AL.
     Oyun landscape oldugu icin harita alani her zaman genistir;
     bu kurulum gorseli EZMEDEN tam sigdirir ve yanlarda kalan
     bosluk hotspot hizasini etkilemez (hotspotlar bu cerceveye
     gore konumlanir, dis kapsayiciya gore degil). */
  /* Iki eksende de sigan tek olcu: hangisi baglayiciysa o kazanir.
     Boylece gorsel NE EZILIR ne de kirpilir; cerceve tam olarak
     gorselin kapladigi alandir (hotspot hizasi bu yuzden saglamdir). */
  width: min(100cqw, calc(100cqh * var(--town-ratio, 1.777)));
  height: auto;
  aspect-ratio: var(--town-ratio, 1.777);
  margin: auto;
  overflow: visible;
  border-radius: 4px;
  box-shadow: inset 0 0 90px rgba(3, 2, 9, 0.55);
}

/* Alt HUD haritanin uzerine bindigi icin alcak telefonlarda en alttaki
   Yarık ve Demirci hedefleri gorunmez kalabiliyordu. Harita cercevesini
   HUD'un ustundeki gercek oynanabilir yukseklige sigdir. */
body.has-bottom-hud .screen--town .town-map {
  grid-template-rows: minmax(0, 1fr) var(--bottom-hud-height);
}
body.has-bottom-hud .screen--town .town-map__frame {
  grid-row: 1;
  width: min(100cqw, calc((100cqh - var(--bottom-hud-height)) * var(--town-ratio, 1.777)));
}

/* Container query birimi olmayan eski WebView'lar icin guvenli
   yedek: yukseklige otur, genisligi orandan al. */
@supports not (width: 1cqw) {
  .town-map__frame {
    height: 100%;
    width: auto;
    max-width: 100%;
  }
}

.town-map__image {
  position: absolute;
  top: 0;
  left: -50%;
  display: block;
  width: 200%;
  max-width: none;
  height: 100%;
  /* Cerceve zaten gorselin oranindadir: contain hicbir kirpma
     veya esneme yapmaz, yalnizca guvenlik agidir. */
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

/* The original 2560px play area is the middle half of ONE baked 5120px map.
   The unchanged frame owns hotspot coordinates; the parent clips terrain only. */

/* Hotspot katmani gorselle BIREBIR ayni alani kaplar. */
.town-hotspots {
  position: absolute;
  inset: 0;
  z-index: 5;
}

/* -------------------------------------------------------------
   TIKLANABILIR YAPI + BINA ETIKETI
   -------------------------------------------------------------
   Hotspot geometrisi gorunmez kalir. Etiket ayni button'in cocugudur;
   boylece bina, etiket ve klavye tek data-town-poi eylemini kullanir.
   ------------------------------------------------------------- */
.town-hotspot {
  position: absolute;
  left: var(--hs-x);
  top: var(--hs-y);
  width: var(--hs-w);
  height: var(--hs-h);
  /* Dokunma hedefi gorsel boyuttan bagimsiz olarak yeterli buyuklukte. */
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  overflow: visible;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: filter var(--t-fast) ease;
}

/* Yarık tabelasının sol-altındaki gerçek çukur da aynı düğmenin parçasıdır. */
.town-hotspot--rift::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -45%;
  top: -26%;
  width: 145%;
  height: 145%;
  pointer-events: auto;
}

/* Hotspot dikdortgeni gorunmez; geri bildirim etiket uzerindedir. */
.town-hotspot:hover,
.town-hotspot:focus-visible,
.town-hotspot:active,
.town-hotspot.is-selected {
  border: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  filter: brightness(1.1);
}

.town-hotspot__label {
  position: absolute;
  z-index: 1;
  top: var(--label-offset-y, 0%);
  left: calc(50% + var(--label-offset-x, 0%));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: min(15rem, 240%);
  min-height: clamp(1.1rem, 4cqh, 1.65rem);
  padding: clamp(0.18rem, 0.55cqh, 0.3rem) clamp(0.38rem, 0.72cqw, 0.62rem);
  border: 1px solid rgba(219, 171, 78, 0.66);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(54, 17, 27, 0.91), rgba(8, 5, 11, 0.9));
  box-shadow:
    inset 0 0 0 1px rgba(255, 229, 164, 0.045),
    0 0.28rem 0.7rem rgba(0, 0, 0, 0.58),
    0 0 0.55rem rgba(181, 112, 38, 0.08);
  color: #f4d996;
  font-family: var(--font-display);
  font-size: clamp(0.5rem, calc(0.42rem + 0.32cqw), 0.78rem);
  font-weight: 700;
  letter-spacing: clamp(0.055em, 0.12vw, 0.13em);
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px #000;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
  transition:
    opacity var(--t-fast) ease,
    border-color var(--t-fast) ease,
    box-shadow var(--t-fast) ease,
    transform var(--t-fast) ease;
}

.town-hotspot__label::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border: clamp(0.2rem, 0.45cqh, 0.3rem) solid transparent;
  border-top-color: rgba(219, 171, 78, 0.78);
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.55));
}

.town-hotspot:hover .town-hotspot__label,
.town-hotspot:focus-visible .town-hotspot__label,
.town-hotspot:active .town-hotspot__label,
.town-hotspot.is-selected .town-hotspot__label {
  border-color: rgba(255, 221, 139, 0.96);
  color: #ffecb6;
  opacity: 1;
  box-shadow:
    inset 0 0 0 1px rgba(255, 233, 177, 0.09),
    0 0.3rem 0.75rem rgba(0, 0, 0, 0.62),
    0 0 0.8rem rgba(232, 176, 76, 0.36);
}

@media (hover: hover) and (pointer: fine) {
  .town-hotspot:hover .town-hotspot__label,
  .town-hotspot:focus-visible .town-hotspot__label {
    transform: translate(-50%, calc(-100% - 1px));
  }
}

@media (hover: none), (pointer: coarse) {
  .town-hotspot__label { opacity: 0.98; }
}

.town-map__hud {
  position: absolute;
  z-index: 10;
  top: clamp(0.9rem, 3.4vh, 2rem);
  right: clamp(0.85rem, 2vw, 1.6rem);
  max-width: min(44%, 22rem);
  padding: 0.7rem 0.85rem 0.78rem;
  border: 1px solid rgba(232, 192, 100, 0.45);
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(13, 16, 48, 0.86), rgba(40, 13, 26, 0.75));
  box-shadow: 0 0.7rem 1.5rem rgba(0, 0, 0, 0.3);
  text-align: right;
  /* Yalnizca bilgi kutusu: altindaki ilgi noktalarinin tiklanmasini engellemesin.
     (Uzun cevirilerde kutu buyuyup yakindaki POI'yi bloke ediyordu.) */
  pointer-events: none;
}

.town-map__eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(0.5rem, 1.2vh, 0.64rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold-dim);
}

.town-map__title {
  margin: 0.2rem 0;
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 2.5vw, 1.55rem);
  letter-spacing: 0.1em;
  line-height: 1.1;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--c-gold-bright);
}

.town-map__hint {
  margin: 0;
  color: var(--c-text-dim);
  font-size: clamp(0.52rem, 1.25vh, 0.68rem);
  line-height: 1.35;
}

/* Secim gostergesi: gokyuzunde bos alan olan SOL UST kosede durur;
   boylece alt ortadaki demirci gorseli kapanmaz. */
.town-map__selected {
  position: absolute;
  z-index: 13;
  top: clamp(0.6rem, 2.4vh, 1.3rem);
  left: clamp(0.6rem, 1.6vw, 1.3rem);
  display: grid;
  min-width: min(40%, 14rem);
  padding: 0.4rem 0.7rem 0.44rem;
  border: 1px solid rgba(232, 192, 100, 0.38);
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(8, 5, 13, 0.88), rgba(49, 19, 30, 0.84), rgba(8, 5, 13, 0.88));
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.36);
  text-align: left;
  /* Secim gostergesi de sadece bilgi amacli; tiklamalari gecirmeli. */
  pointer-events: none;
}

.town-map__selected-name {
  color: var(--c-gold);
  font-family: var(--font-display);
  font-size: clamp(0.58rem, 1.35vh, 0.73rem);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.town-map__selected-status {
  margin-top: 0.12rem;
  color: var(--c-text-dim);
  font-size: clamp(0.48rem, 1.08vh, 0.58rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* =============================================================
   10. PAZAR YERI - TUCCAR PANELI
   -------------------------------------------------------------
   Kasaba ekraninin UZERINDE acilir; koy haritasi arkada kalir.
   Bu asamada satin alma yoktur, yalnizca vitrin gosterilir.
   ============================================================= */
.merchant-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: clamp(0.5rem, 2vh, 1.4rem);
  background: rgba(4, 2, 9, 0.72);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--t-base) ease-out;
}

.merchant-overlay.is-visible {
  opacity: 1;
}

.merchant-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(96vw, 46rem);
  max-height: 96%;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 7px;
  background: linear-gradient(
        180deg,
        rgba(30, 12, 16, 0.98) 0%,
        rgba(16, 7, 12, 0.98) 48%,
        rgba(8, 4, 9, 0.99) 100%
      )
      padding-box,
    linear-gradient(180deg, #ffe9a8 0%, #e8c064 22%, #8a6a2c 60%, #4a3410 100%) border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85), 0 30px 74px rgba(0, 0, 0, 0.78),
    inset 0 0 90px rgba(140, 20, 30, 0.32);
  transform: translateY(14px) scale(0.98);
  transition: transform var(--t-base) cubic-bezier(0.2, 0.9, 0.3, 1);
}

.merchant-overlay.is-visible .merchant-panel {
  transform: translateY(0) scale(1);
}

/* --- Ust serit: cuzdan / baslik / kapat --- */
.merchant-panel__header {
  flex: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.6rem, 2vw, 1.2rem);
  padding: clamp(0.55rem, 1.8vh, 0.9rem) clamp(0.7rem, 2vw, 1.2rem);
  border-bottom: 1px solid rgba(138, 106, 44, 0.4);
  background: linear-gradient(180deg, rgba(107, 18, 32, 0.4), rgba(107, 18, 32, 0));
}

.merchant-panel__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.8rem, 2.2vh, 1.1rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-gold);
}

.merchant-wallet {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.merchant-wallet__row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: clamp(74px, 12vw, 116px);
  padding: 0.16rem 0.5rem;
  border: 1px solid rgba(138, 106, 44, 0.5);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.45);
  font-family: var(--font-mono);
  font-size: clamp(0.62rem, 1.5vh, 0.76rem);
}

.merchant-wallet__icon {
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  object-fit: contain;
}

.merchant-wallet__row--gold .merchant-wallet__icon {
  filter: drop-shadow(0 0 3px rgba(232, 192, 100, .25));
}

.merchant-wallet__row--gold .merchant-wallet__value {
  color: var(--c-gold);
}

.merchant-wallet__row--balance .merchant-wallet__icon {
  filter: drop-shadow(0 0 3px rgba(64, 131, 226, .32));
}

.merchant-wallet__row--balance .merchant-wallet__value {
  color: #8fd3ff;
}

.merchant-panel__close {
  width: clamp(28px, 4.6vh, 38px);
  height: clamp(28px, 4.6vh, 38px);
  border: 1px solid rgba(232, 192, 100, 0.55);
  border-radius: 4px;
  background: linear-gradient(180deg, #7a1420, #3a0710);
  color: var(--c-gold-bright);
  font-size: clamp(0.8rem, 2vh, 1rem);
  line-height: 1;
  touch-action: manipulation;
  transition: filter var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}

.merchant-panel__close:hover,
.merchant-panel__close:focus-visible {
  outline: none;
  filter: brightness(1.2);
  box-shadow: 0 0 14px rgba(255, 120, 90, 0.55);
}

.merchant-panel__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: clamp(0.7rem, 2.2vh, 1.15rem) clamp(0.7rem, 2vw, 1.2rem);
}

.merchant-panel__footer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: clamp(0.5rem, 1.6vh, 0.85rem) clamp(0.7rem, 2vw, 1.2rem);
  border-top: 1px solid rgba(138, 106, 44, 0.4);
  background: rgba(0, 0, 0, 0.4);
}

.merchant-panel__hint {
  margin: 0;
  flex: 1 1 auto;
  font-size: clamp(0.6rem, 1.5vh, 0.74rem);
  letter-spacing: 0.06em;
  text-align: right;
  color: var(--c-text-dim);
  opacity: 0.75;
}

/* --- Hub: dort tuccar girisi --- */
.merchant-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(0.4rem, 1.4vh, 0.7rem);
}

.merchant-entry {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 2vw, 1rem);
  width: 100%;
  padding: clamp(0.4rem, 1.3vh, 0.65rem) clamp(0.55rem, 1.6vw, 0.9rem);
  border: 1px solid rgba(138, 106, 44, 0.42);
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(30, 14, 20, 0.92), rgba(12, 6, 12, 0.75));
  text-align: left;
  touch-action: manipulation;
  transition: border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out,
    transform var(--t-fast) ease-out;
}

.merchant-entry:hover,
.merchant-entry:focus-visible {
  outline: none;
  transform: translateX(3px);
  border-color: var(--c-gold);
  box-shadow: 0 0 18px rgba(255, 190, 90, 0.28);
}

.merchant-entry.is-locked {
  opacity: 0.58;
  filter: saturate(0.55);
}

.merchant-entry__frame {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(44px, 8vh, 68px);
  height: clamp(44px, 8vh, 68px);
  border: 1px solid rgba(232, 192, 100, 0.5);
  border-radius: 4px;
  background: radial-gradient(circle at 50% 35%, rgba(255, 190, 90, 0.16), rgba(0, 0, 0, 0.6));
  overflow: hidden;
}

.merchant-entry__icon {
  width: 88%;
  height: 88%;
  object-fit: contain;
}

.merchant-entry__text {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  min-width: 0;
  flex: 1 1 auto;
}

.merchant-entry__name {
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 2vh, 0.98rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-gold-bright);
}

.merchant-entry__desc {
  font-size: clamp(0.62rem, 1.5vh, 0.76rem);
  line-height: 1.4;
  color: var(--c-text-dim);
}

.merchant-entry__chevron {
  flex: none;
  font-size: clamp(1rem, 2.6vh, 1.4rem);
  color: var(--c-gold-dim);
}

.merchant-entry__badge {
  flex: none;
  padding: 0.16em 0.55em;
  border: 1px solid rgba(138, 106, 44, 0.6);
  border-radius: 2px;
  font-family: var(--font-display);
  font-size: clamp(0.5rem, 1.3vh, 0.6rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  white-space: nowrap;
}

/* --- Vitrin: sinif sekmeleri + esya izgarasi --- */
.merchant-tabs {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: clamp(0.6rem, 1.8vh, 1rem);
}

.merchant-tab {
  padding: 0.3em 0.85em;
  border: 1px solid rgba(138, 106, 44, 0.45);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.42);
  font-family: var(--font-display);
  font-size: clamp(0.6rem, 1.5vh, 0.74rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  touch-action: manipulation;
  transition: color var(--t-fast) ease-out, border-color var(--t-fast) ease-out,
    box-shadow var(--t-fast) ease-out;
}

.merchant-tab:hover,
.merchant-tab:focus-visible {
  outline: none;
  color: var(--c-gold);
  border-color: rgba(232, 192, 100, 0.7);
}

.merchant-tab.is-active {
  color: var(--c-gold-bright);
  border-color: var(--c-gold);
  box-shadow: 0 0 12px rgba(255, 190, 90, 0.3), inset 0 0 18px rgba(107, 18, 32, 0.5);
}

.merchant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(94px, 15vw, 132px), 1fr));
  gap: clamp(0.4rem, 1.4vh, 0.75rem);
}

.item-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
  padding: clamp(0.35rem, 1.2vh, 0.6rem);
  border: 1px solid rgba(138, 106, 44, 0.42);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(28, 16, 26, 0.92), rgba(9, 5, 12, 0.9));
  touch-action: manipulation;
  transition: border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out,
    transform var(--t-fast) ease-out;
}

.item-card:hover,
.item-card:focus-visible {
  outline: none;
  transform: translateY(-3px);
  border-color: var(--c-gold);
  box-shadow: 0 0 20px rgba(255, 190, 90, 0.3);
}

.item-card__art {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgba(138, 106, 44, 0.28);
  border-radius: 4px;
  background: radial-gradient(circle at 50% 38%, rgba(255, 190, 90, 0.14), rgba(0, 0, 0, 0.55));
  overflow: hidden;
}

.item-card__art img {
  width: 94%;
  height: 94%;
  object-fit: contain;
}

.item-card__name {
  font-size: clamp(0.58rem, 1.45vh, 0.72rem);
  line-height: 1.3;
  text-align: center;
  color: var(--c-text);
  overflow-wrap: anywhere;
}

.item-card__price {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-family: var(--font-mono);
  font-size: clamp(0.58rem, 1.45vh, 0.72rem);
  color: var(--c-gold);
}

.item-card__coin {
  width: 0.72em;
  height: 0.72em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #e8c064 55%, #8a6a2c);
}

/* --- Esya / kilitli tuccar detayi --- */
.merchant-detail {
  position: absolute;
  left: 50%;
  bottom: clamp(3.2rem, 9vh, 4.6rem);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: min(92%, 26rem);
  padding: 0.55rem 0.7rem;
  transform: translateX(-50%);
  border: 1px solid rgba(232, 192, 100, 0.5);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(24, 10, 16, 0.98), rgba(9, 4, 10, 0.98));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.7);
  animation: frame-enter var(--t-base) ease-out both;
}

.merchant-detail__art {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(38px, 7vh, 54px);
  height: clamp(38px, 7vh, 54px);
  border: 1px solid rgba(138, 106, 44, 0.4);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.merchant-detail__art img {
  width: 92%;
  height: 92%;
  object-fit: contain;
}

.merchant-detail__text {
  display: flex;
  flex-direction: column;
  gap: 0.18em;
  min-width: 0;
  flex: 1 1 auto;
  font-size: clamp(0.62rem, 1.5vh, 0.76rem);
  color: var(--c-text-dim);
}

.merchant-detail__text strong {
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  color: var(--c-gold-bright);
}

.merchant-detail__price {
  font-family: var(--font-mono);
  color: var(--c-gold);
}

.merchant-detail__soon {
  font-family: var(--font-display);
  font-size: clamp(0.52rem, 1.3vh, 0.62rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-blood-light);
}

.merchant-detail__close {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid rgba(138, 106, 44, 0.5);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.5);
  color: var(--c-text-dim);
  font-size: 0.7rem;
  line-height: 1;
  touch-action: manipulation;
}

.merchant-detail__close:hover,
.merchant-detail__close:focus-visible {
  outline: none;
  color: var(--c-gold);
  border-color: var(--c-gold);
}

/* -------------------------------------------------------------
   11. KARAKTER / ENVANTER / EKIPMAN PANELI
   -------------------------------------------------------------
   Kasaba ekraninin uzerinde acilan katman. Tum olculer clamp()
   ile verilmistir: 1920x1080'den Android landscape'e kadar ayni
   yerlesim korunur, yalnizca olcek kucululur.
   ------------------------------------------------------------- */

.character-overlay {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: clamp(0.35rem, 1.6vh, 1.1rem);
  background: rgba(4, 2, 9, 0.78);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--t-base) ease-out;
}
.character-overlay.is-visible { opacity: 1; }
.character-overlay.is-visible .character-panel { transform: translateY(0) scale(1); }

.character-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(98vw, 78rem);
  max-height: 100%;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(28, 11, 16, 0.985) 0%, rgba(15, 7, 12, 0.985) 45%,
      rgba(7, 4, 9, 0.99) 100%) padding-box,
    linear-gradient(180deg, #ffe9a8 0%, #e8c064 22%, #8a6a2c 60%, #4a3410 100%) border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85), 0 30px 74px rgba(0, 0, 0, 0.78),
    inset 0 0 110px rgba(140, 20, 30, 0.28);
  transform: translateY(14px) scale(0.985);
  transition: transform var(--t-base) cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* ---- baslik ------------------------------------------------ */

.cp-header {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) auto auto;
  align-items: center;
  gap: clamp(0.5rem, 1.4vw, 1.2rem);
  padding: clamp(0.5rem, 1.4vh, 0.9rem) clamp(0.7rem, 1.6vw, 1.2rem);
  border-bottom: 1px solid rgba(232, 192, 100, 0.26);
  background: linear-gradient(180deg, rgba(107, 18, 32, 0.34), rgba(0, 0, 0, 0.14));
}

.cp-identity { min-width: 0; }
.cp-identity__name {
  overflow: hidden;
  margin: 0;
  color: var(--c-gold-bright);
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.2vh, 1.35rem);
  letter-spacing: 0.09em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cp-identity__line {
  margin: 0.15rem 0 0;
  color: var(--c-text-dim);
  font-size: clamp(0.6rem, 1.35vh, 0.76rem);
  letter-spacing: 0.05em;
}
.cp-identity__server { color: var(--c-gold-dim); }
.cp-dot { padding: 0 0.35em; opacity: 0.6; }

.cp-exp { min-width: 0; }
.cp-exp__top {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: clamp(0.6rem, 1.3vh, 0.74rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cp-exp__level { color: var(--c-text-dim); }
.cp-exp__level strong { color: var(--c-gold-bright); }
.cp-exp__value { color: var(--c-text); font-family: var(--font-mono); }
.cp-exp__bar {
  position: relative;
  height: 0.5rem;
  margin: 0.28rem 0 0.15rem;
  overflow: hidden;
  border: 1px solid rgba(232, 192, 100, 0.4);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.55);
}
.cp-exp__fill {
  display: block;
  height: 100%;
  min-width: 0;
  background: linear-gradient(90deg, #8a6a2c, #e8c064 60%, #ffe9a8);
  box-shadow: 0 0 10px rgba(232, 192, 100, 0.5);
  transition: width var(--t-base) ease-out;
}
.cp-exp__caption {
  color: var(--c-gold-dim);
  font-size: clamp(0.52rem, 1.1vh, 0.62rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cp-meta {
  display: flex;
  gap: clamp(0.3rem, 0.8vw, 0.6rem);
}
.cp-tile {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: clamp(3.4rem, 6vw, 4.8rem);
  padding: 0.3rem 0.5rem;
  border: 1px solid rgba(232, 192, 100, 0.26);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.4);
  text-align: center;
}
.cp-tile__label {
  color: var(--c-text-dim);
  font-size: clamp(0.48rem, 1vh, 0.58rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cp-tile__value {
  color: var(--c-gold-bright);
  font-family: var(--font-mono);
  font-size: clamp(0.78rem, 1.8vh, 1rem);
}
.cp-tile--power .cp-tile__value { color: var(--c-fire); }
.cp-tile--points .cp-tile__value { color: #b8ff9a; }

.cp-close {
  display: grid;
  place-items: center;
  width: clamp(1.7rem, 3.4vh, 2.2rem);
  height: clamp(1.7rem, 3.4vh, 2.2rem);
  border: 1px solid rgba(232, 192, 100, 0.5);
  border-radius: 3px;
  background: rgba(107, 18, 32, 0.5);
  color: var(--c-gold-bright);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.cp-close:hover,
.cp-close:focus-visible {
  border-color: var(--c-gold-bright);
  background: rgba(156, 28, 44, 0.72);
}

/* ---- govde yerlesimi --------------------------------------- */

.cp-body {
  /* Ortadaki paper-doll ile cevresindeki slotlar ayni yukseklik token'ini
     kullanir; boylece kompozisyon masaustu ve landscape'te birlikte olceklenir. */
  --cp-slot: calc(clamp(2.35rem, 6.1vh, 3.3rem) * var(--ui-scale));
  --cp-gap: clamp(0.2rem, 0.65vh, 0.38rem);
  display: grid;
  grid-template-columns: minmax(20rem, 1.35fr) minmax(15rem, 0.9fr);
  grid-template-areas:
    "equip   inventory"
    "derived derived";

  gap: clamp(0.4rem, 1.1vh, 0.85rem);
  padding: clamp(0.45rem, 1.3vh, 0.9rem) clamp(0.6rem, 1.5vw, 1.1rem);
  /* Cok alcak ekranlarda panelin KENDI icinde kayar; sayfa kaymaz. */
  overflow-y: auto;
  overflow-x: hidden;
  /* min-height:0 olmadan flex cocugu kucululemez ve panel
     alcak ekranlarda viewport'u tasardi. */
  min-height: 0;
  overscroll-behavior: contain;
}
.cp-equip { grid-area: equip; }
.cp-inventory { grid-area: inventory; }
.cp-derived { grid-area: derived; }
.cp-alloc { grid-area: alloc; }

.cp-section__title {
  margin: 0 0 0.4rem;
  color: var(--c-gold);
  font-family: var(--font-display);
  font-size: clamp(0.6rem, 1.3vh, 0.75rem);
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

/* ---- merkez paper-doll ------------------------------------- */

.cp-preview__stage {
  position: relative;
  min-width: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(232, 192, 100, 0.42);
  border-radius: 4px;
  background:
    radial-gradient(ellipse at 50% 24%,
      color-mix(in srgb, var(--class-accent, #e8c064) 28%, transparent), transparent 58%),
    linear-gradient(180deg, #120b13 0%, #09060b 58%, #030204 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 225, 155, 0.06),
    inset 0 -2.2rem 2.4rem rgba(0, 0, 0, 0.72),
    0 0 1.4rem rgba(0, 0, 0, 0.45);
}
.cp-preview__glow {
  position: absolute;
  inset: auto 12% 4%;
  height: 18%;
  border-radius: 50%;
  background: radial-gradient(ellipse,
    color-mix(in srgb, var(--class-accent, #e8c064) 42%, transparent), transparent 70%);
  filter: blur(6px);
}
.cp-preview__title {
  position: absolute;
  top: .25rem;
  left: 50%;
  z-index: 18;
  margin: 0;
  padding: .12rem .5rem;
  border-bottom: 1px solid rgba(226,179,83,.38);
  background: linear-gradient(90deg, transparent, rgba(10,6,12,.7), transparent);
  color: var(--c-gold);
  font: 700 clamp(.52rem, 1.15vh, .7rem) var(--font-display);
  letter-spacing: .16em;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
}
.character-paperdoll__layers,
.char-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.char-layer {
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
}
.char-weapon-back { z-index: 0; }
.char-base { z-index: 1; }
.char-leg-armor { z-index: 2; }
.char-boots { z-index: 3; }
.char-chest-armor { z-index: 4; }
.char-armguards { z-index: 5; }
.char-helmet { z-index: 6; }
.char-weapon-main { z-index: 7; }
.char-weapon-offhand { z-index: 8; }
.char-effects { z-index: 9; }
.character-base {
  filter: saturate(0.88) contrast(1.05) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6));
}

/* Yalniz localhost'ta ?paperdollDebug=1 ile gorunen hizalama kilavuzu. */
.character-paperdoll.is-paperdoll-debug::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 49.75%, rgba(255, 80, 80, 0.6) 50%, transparent 50.25%),
    linear-gradient(0deg, transparent 49.75%, rgba(255, 80, 80, 0.6) 50%, transparent 50.25%),
    repeating-linear-gradient(90deg, rgba(232, 192, 100, 0.12) 0 1px, transparent 1px 10%),
    repeating-linear-gradient(0deg, rgba(232, 192, 100, 0.12) 0 1px, transparent 1px 10%);
}

/* ---- slot (hem ekipman hem canta) -------------------------- */

.cp-slot {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(232, 192, 100, 0.28);
  border-radius: 3px;
  background:
    radial-gradient(circle at 50% 38%, rgba(109, 33, 43, 0.2), transparent 68%),
    linear-gradient(180deg, rgba(26, 13, 21, 0.96), rgba(7, 4, 9, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 157, 0.035),
    inset 0 0 0.8rem rgba(0, 0, 0, 0.62),
    0 2px 5px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.cp-slot:hover,
.cp-slot:focus-visible {
  border-color: var(--c-gold);
  box-shadow: 0 0 12px rgba(232, 192, 100, 0.35);
  transform: translateY(-1px);
}
.cp-slot.is-selected {
  border-color: var(--c-gold-bright);
  box-shadow: 0 0 0 1px rgba(255, 233, 168, 0.55), 0 0 16px rgba(232, 192, 100, 0.5);
}
.cp-slot.is-filled {
  background:
    radial-gradient(circle at 50% 40%, rgba(141, 45, 52, 0.36), transparent 70%),
    linear-gradient(180deg, rgba(34, 15, 23, 0.98), rgba(8, 4, 10, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(255, 229, 164, 0.08),
    inset 0 0 1rem rgba(172, 61, 57, 0.1),
    0 2px 7px rgba(0, 0, 0, 0.58);
}
.cp-slot__icon {
  position: absolute;
  inset: 9%;
  width: 82%;
  height: 82%;
  max-width: 82%;
  max-height: 82%;
  object-fit: contain;
  pointer-events: none;
}
/* Fragment PNG'leri daha genis seffaf payla gelir; uc renk de slotu esit doldurur. */
.cp-slot__icon[src*="/fragments/"] {
  inset: 3%;
  width: 94%;
  height: 94%;
  max-width: 94%;
  max-height: 94%;
}
.cp-slot__icon.is-placeholder { opacity: 0.45; }
.cp-slot__dot {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: rgba(232, 192, 100, 0.18);
}
.cp-slot__upgrade,
.cp-slot__amount {
  position: absolute;
  padding: 0 0.2rem;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.72);
  font-family: var(--font-mono);
  font-size: clamp(0.5rem, 1vh, 0.6rem);
  pointer-events: none;
}
.cp-slot__upgrade {
  top: 3px;
  right: 3px;
  z-index: 2;
  color: #ffd477;
  text-shadow: 0 1px 2px #000;
}
.cp-slot__amount { right: 3px; bottom: 2px; color: var(--c-text); }

/* nadirlik: sadece cerceve/parilti; asiri efekt yok */
.cp-slot.is-rarity-common { border-color: rgba(185, 173, 147, 0.45); }
.cp-slot.is-rarity-uncommon { border-color: rgba(126, 196, 120, 0.6); }
.cp-slot.is-rarity-rare { border-color: rgba(110, 160, 235, 0.65); }
.cp-slot.is-rarity-epic { border-color: rgba(178, 122, 232, 0.68); }
.cp-slot.is-rarity-legendary { border-color: rgba(255, 179, 71, 0.75); }

.cp-rarity.is-rarity-common,
.cp-detail__name.is-rarity-common,
.cp-tip__name.is-rarity-common { color: #cbc0a6; }
.cp-rarity.is-rarity-uncommon,
.cp-detail__name.is-rarity-uncommon,
.cp-tip__name.is-rarity-uncommon { color: #8fd489; }
.cp-rarity.is-rarity-rare,
.cp-detail__name.is-rarity-rare,
.cp-tip__name.is-rarity-rare { color: #7fa8ef; }
.cp-rarity.is-rarity-epic,
.cp-detail__name.is-rarity-epic,
.cp-tip__name.is-rarity-epic { color: #c08cf0; }
.cp-rarity.is-rarity-legendary,
.cp-detail__name.is-rarity-legendary,
.cp-tip__name.is-rarity-legendary { color: #ffc46b; }

/* ---- ekipman + paper-doll kompozisyonu (16 slot) ------------
   DOM ve slot ID sirasi degismez. CSS grid-area ile karakter merkezde,
   sol rayin sirasi korunur; sagdaki ana ekipmanlar kupe, gogusluk,
   kalkan, pantolon, yuzuk ve bot olarak tek hizada akar.
   Hicbir slot karakterin anatomisini kapatmaz.
   ------------------------------------------------------------- */

.cp-equip__grid {
  display: grid;
  grid-template-columns:
    var(--cp-slot)
    clamp(0.3rem, 0.9vw, 0.65rem)
    minmax(7.5rem, 2.15fr)
    var(--cp-slot)
    var(--cp-slot);
  /* Kafalik artik sag kupe rayinda; bosalan ust satir kaldirildi. */
  grid-template-rows: repeat(6, var(--cp-slot));
  grid-template-areas:
    "earringLeft . character       earringRight characterHelmet"
    "necklace    . character       chest   talisman"
    "weapon      . character       offhand ."
    "gloves      . character       pants   ."
    "ringLeft    . character       ringRight special1"
    "belt        . character       boots   pet";
  gap: var(--cp-gap);
  justify-content: center;
  width: min(100%, 34rem);
  margin-inline: auto;
}

.character-paperdoll { grid-area: character; }
.cp-slot-cell {
  align-self: center;
  justify-self: center;
  width: var(--cp-slot);
  min-width: 0;
}
.cp-slot-cell--helmet { grid-area: characterHelmet; }
.cp-slot-cell--earringLeft { grid-area: earringLeft; }
.cp-slot-cell--earringRight { grid-area: earringRight; }
.cp-slot-cell--necklace { grid-area: necklace; }
.cp-slot-cell--chest { grid-area: chest; }
.cp-slot-cell--belt { grid-area: belt; }
.cp-slot-cell--weapon { grid-area: weapon; }
.cp-slot-cell--gloves { grid-area: gloves; }
.cp-slot-cell--offhand { grid-area: offhand; }
.cp-slot-cell--ringLeft { grid-area: ringLeft; }
.cp-slot-cell--pants { grid-area: pants; }
.cp-slot-cell--ringRight { grid-area: ringRight; }
.cp-slot-cell--boots { grid-area: boots; }
.cp-slot-cell--talisman { grid-area: talisman; }
.cp-slot-cell--special1 { grid-area: special1; }
.cp-slot-cell--pet { grid-area: pet; }

/* Pet, merkezdeki karakterin sag bas hizasinin biraz ustunde kalir. */
.character-paperdoll > .pet-sprite--character {
  top: 1%;
  right: -1%;
  z-index: 4;
}

/* REZERV OZEL SLOTLAR: gorunur ama henuz item kabul etmez. */
.cp-slot.is-reserved {
  border-style: dashed;
  cursor: default;
  opacity: 0.55;
}
.cp-slot.is-reserved:hover { border-color: rgba(232, 192, 100, 0.28); }

/* Bos slot silueti: item sanilmayacak kadar sonuk. */
.cp-slot.is-empty .cp-slot__icon.is-placeholder { opacity: 0.34; }

/* ---- envanter ---------------------------------------------- */

.cp-inventory__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}
.cp-inventory__capacity {
  color: var(--c-text-dim);
  font-family: var(--font-mono);
  font-size: clamp(0.58rem, 1.2vh, 0.7rem);
}
.cp-bag-tabs {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.4rem;
}
.cp-bag-tab {
  flex: 1;
  padding: 0.28rem 0.3rem;
  border: 1px solid rgba(232, 192, 100, 0.3);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.42);
  color: var(--c-text-dim);
  font-family: var(--font-display);
  font-size: clamp(0.54rem, 1.15vh, 0.68rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.cp-bag-tab:hover { color: var(--c-gold); }
.cp-bag-tab.is-active {
  border-color: var(--c-gold);
  background: rgba(107, 18, 32, 0.5);
  color: var(--c-gold-bright);
}
.cp-bag-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--cp-gap);
  width: min(100%, calc(5 * var(--cp-slot) + 4 * var(--cp-gap)));
}
.cp-bag-tabs { width: min(100%, calc(5 * var(--cp-slot) + 4 * var(--cp-gap))); }

/* Pointer Events ile ayni kod hem mouse hem de dokunmatikte calisir. Yalnizca
   dolu envanter slotlari surukleme hareketini sahiplenir; bos slotlar normal
   dokunma davranisini korur. */
.cp-slot--bag.is-filled {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.character-panel.is-inventory-dragging,
.character-panel.is-inventory-dragging * { cursor: grabbing; }
.cp-slot--bag.is-drag-source {
  opacity: 0.34;
  transform: scale(0.92);
}
.cp-slot--bag.is-drop-target {
  border-color: #85e6a3;
  box-shadow: inset 0 0 0 1px rgba(133, 230, 163, 0.75), 0 0 14px rgba(87, 213, 131, 0.42);
  transform: scale(1.05);
}
.cp-slot--bag.is-drop-target.is-drop-swap {
  border-color: var(--c-gold-bright);
  box-shadow: inset 0 0 0 1px rgba(255, 233, 168, 0.85), 0 0 14px rgba(232, 192, 100, 0.5);
}
.cp-inventory-drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  width: clamp(2.35rem, 5.2vh, 3.15rem);
  aspect-ratio: 1;
  border: 1px solid var(--c-gold-bright);
  border-radius: 4px;
  background: linear-gradient(145deg, rgba(54, 20, 28, 0.97), rgba(8, 6, 13, 0.98));
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.72), 0 0 14px rgba(232, 192, 100, 0.44);
  pointer-events: none;
  will-change: transform;
}
.cp-inventory-drag-ghost .cp-slot__icon { width: 82%; height: 82%; }

/* ---- offense / defense / special --------------------------- */

.cp-derived {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.35rem, 1vw, 0.7rem);
}
.cp-block {
  padding: clamp(0.4rem, 1vh, 0.6rem) clamp(0.45rem, 1vw, 0.7rem);
  border: 1px solid rgba(232, 192, 100, 0.22);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.34);
}
.cp-block__title {
  margin: 0 0 0.35rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(232, 192, 100, 0.18);
  color: var(--c-gold);
  font-family: var(--font-display);
  font-size: clamp(0.56rem, 1.2vh, 0.7rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.cp-block--offense .cp-block__title { color: #f0a878; }
.cp-block--defense .cp-block__title { color: #8fb4e8; }
.cp-block--special .cp-block__title { color: #b8e8a8; }
.cp-block__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.16rem 0.5rem;
  margin: 0;
  font-size: clamp(0.56rem, 1.2vh, 0.72rem);
}
.cp-block__list dt { color: var(--c-text-dim); }
.cp-block__list dd {
  margin: 0;
  color: var(--c-text);
  font-family: var(--font-mono);
  text-align: right;
}

/* ---- stat dagitimi ----------------------------------------- */

.cp-alloc__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}
.cp-alloc__points {
  color: var(--c-text-dim);
  font-size: clamp(0.56rem, 1.2vh, 0.7rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cp-alloc__points strong { color: #b8ff9a; font-family: var(--font-mono); }
.cp-alloc__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.3rem, 0.9vw, 0.6rem);
}
.cp-alloc__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid rgba(232, 192, 100, 0.22);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.34);
}
.cp-alloc__name {
  overflow: hidden;
  color: var(--c-text-dim);
  font-size: clamp(0.5rem, 1.1vh, 0.64rem);
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cp-alloc__value { font-family: var(--font-mono); font-size: clamp(0.62rem, 1.35vh, 0.8rem); }
.cp-alloc__value strong { color: var(--c-gold-bright); }
.cp-alloc__bonus { color: #8fd489; font-size: 0.82em; }
.cp-alloc__add {
  display: grid;
  place-items: center;
  width: clamp(1.3rem, 2.8vh, 1.7rem);
  height: clamp(1.3rem, 2.8vh, 1.7rem);
  border: 1px solid rgba(232, 192, 100, 0.5);
  border-radius: 3px;
  background: rgba(107, 18, 32, 0.42);
  color: var(--c-gold-bright);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.cp-alloc__add:hover:not(:disabled),
.cp-alloc__add:focus-visible:not(:disabled),
.cp-alloc__add.is-pressing:not(:disabled) {
  border-color: var(--c-gold-bright);
  background: rgba(156, 28, 44, 0.7);
  box-shadow: 0 0 .55rem rgba(232, 192, 100, .28);
}
.cp-alloc__add:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

/* ---- alt bar ------------------------------------------------ */

.cp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: clamp(0.4rem, 1.1vh, 0.7rem) clamp(0.7rem, 1.6vw, 1.2rem);
  border-top: 1px solid rgba(232, 192, 100, 0.24);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(107, 18, 32, 0.24));
}
.cp-message {
  margin: 0;
  min-height: 1em;
  color: var(--c-text-dim);
  font-size: clamp(0.58rem, 1.2vh, 0.72rem);
}
.cp-message.is-error { color: #ff9a8a; }

/* ---- item detayi -------------------------------------------- */

/* ITEM AKSIYON PANELI
   -------------------------------------------------------------
   Konum JS tarafindan (ui/anchor.js) hesaplanir: panel tiklanan
   slotun yanina yerlesir. Buradaki right/bottom degerleri yalnizca
   JS calismadan onceki ILK karede gecerli olan guvenli varsayilandir. */
.cp-detail {
  position: absolute;
  right: clamp(0.6rem, 1.6vw, 1.2rem);
  bottom: clamp(3.2rem, 7vh, 4.4rem);
  z-index: 6;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem 0.7rem;
  width: min(92vw, 20rem);
  padding: clamp(0.5rem, 1.2vh, 0.8rem);
  border: 1px solid rgba(232, 192, 100, 0.55);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(30, 12, 18, 0.985), rgba(8, 4, 10, 0.985));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.72);
}
/* Konumlandirildiktan sonra: sabit kose degerleri birakilir. */
.cp-detail.is-anchored {
  right: auto;
  bottom: auto;
  width: min(92vw, 17.5rem);
  /* Eski dar-ekran merkezleme kurali translateX(50%) uyguluyordu. JS ile
     slota baglanan kartta bu donusum konumu ikinci kez kaydirmamali. */
  transform: none;
  animation: cp-detail-in 120ms ease-out;
}

/* Panelin secili iteme "bagli" hissettirmesi icin ok/ucgen. */
.cp-detail.is-anchored::before {
  content: "";
  position: absolute;
  top: calc(50% - 6px);
  width: 0;
  height: 0;
  border-block: 6px solid transparent;
}
.cp-detail.is-anchored.is-side-right::before {
  left: -7px;
  border-right: 7px solid rgba(232, 192, 100, 0.55);
}
.cp-detail.is-anchored.is-side-left::before {
  right: -7px;
  border-left: 7px solid rgba(232, 192, 100, 0.55);
}

/* Panelin bagli oldugu slot vurgulanir. */
.cp-slot.is-anchor {
  border-color: rgba(232, 192, 100, 0.85);
  box-shadow: 0 0 0 1px rgba(232, 192, 100, 0.45), 0 0 12px rgba(232, 192, 100, 0.28);
}

@keyframes cp-detail-in {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.cp-detail__art {
  display: grid;
  place-items: center;
  width: clamp(3rem, 7vh, 4.2rem);
  height: clamp(3rem, 7vh, 4.2rem);
  border: 1px solid rgba(232, 192, 100, 0.35);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.45);
}
.cp-detail__art img { width: 86%; height: 86%; object-fit: contain; }
.cp-detail__info { min-width: 0; }
.cp-detail__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.76rem, 1.7vh, 0.95rem);
  letter-spacing: 0.06em;
}
.cp-detail__tags {
  margin: 0.12rem 0 0.35rem;
  color: var(--c-text-dim);
  font-size: clamp(0.54rem, 1.15vh, 0.66rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cp-detail__stats,
.cp-detail__requirements {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(0.56rem, 1.2vh, 0.7rem);
}
.cp-detail__stats li { color: #b8e8a8; }
.cp-detail__requirements {
  margin-top: 0.3rem;
  padding-top: 0.3rem;
  border-top: 1px solid rgba(232, 192, 100, 0.16);
  color: var(--c-text-dim);
}
.cp-detail__error {
  margin: 0.35rem 0 0;
  color: #ff9a8a;
  font-size: clamp(0.55rem, 1.15vh, 0.68rem);
}
.cp-detail__actions {
  display: flex;
  grid-column: 1 / -1;
  gap: 0.4rem;
}
.cp-detail__actions .ui-button { flex: 1; padding: 0.34rem 0.6rem; font-size: clamp(0.58rem, 1.2vh, 0.72rem); }
.cp-detail__action:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- tooltip ------------------------------------------------ */

.cp-tooltip {
  position: absolute;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  width: max-content;
  max-width: 15rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid rgba(232, 192, 100, 0.5);
  border-radius: 4px;
  background: rgba(8, 4, 10, 0.97);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7);
  font-size: clamp(0.54rem, 1.15vh, 0.68rem);
  pointer-events: none;
}
/* Item detayi acikken tooltip gizlenir (JS de ayni isi yapar). */
.character-panel:has(.cp-detail) .cp-tooltip { display: none; }

.cp-tip__name { font-family: var(--font-display); letter-spacing: 0.06em; }
.cp-tip__rarity,
.cp-tip__type { color: var(--c-text-dim); text-transform: uppercase; letter-spacing: 0.08em; }
.cp-tip__req { color: var(--c-text-dim); }
.cp-tip__stats {
  margin: 0.25rem 0 0;
  padding: 0.25rem 0 0;
  border-top: 1px solid rgba(232, 192, 100, 0.16);
  list-style: none;
  color: #b8e8a8;
}

/* ---- dar / alcak ekranlar ----------------------------------- */

/* Alcak ama GENIS ekranlar (Android landscape, 854x480):
   kolon duzeni korunur, yalnizca baslik sıkışır ve govde kaydirilabilir. */
@media (max-height: 34rem) {
  .cp-header {
    grid-template-columns: minmax(0, 1fr) auto auto;
    row-gap: 0.3rem;
  }
  .cp-exp { grid-column: 1 / -1; order: 3; }
  .cp-meta { order: 2; }
  /* Dort kutu (Altin / Guc / Irk Puani / Stat) alcak ekranda incelir. */
  .cp-meta { gap: 0.24rem; }
  /* Alt satir (Statlari Sifirla + Kapat) da sikilasir. */
  .cp-footer { padding-block: 0.24rem; gap: 0.4rem; }
  .cp-footer .ui-button { padding-block: 0.24rem; font-size: 0.62rem; }
  .cp-tile { min-width: 2.9rem; padding: 0.2rem 0.34rem; }
  .cp-tile__value { font-size: clamp(0.66rem, 1.5vh, 0.86rem); }
}

  /* Tablet ve dar landscape: paper-doll, envanter ve stat bloklari tek satirda. */
@media (max-width: 62rem) {
  .cp-body {
    grid-template-columns:
      minmax(17rem, 1.25fr)
      calc(5 * var(--cp-slot) + 4 * var(--cp-gap))
      minmax(10.5rem, 0.72fr);
    grid-template-areas:
      "equip   inventory derived";
  }
  /* Dar ekranda uc blok alt alta gecer ve KENDI icinde kayar;
     ustteki satirlarin uzerine tasmaz. */
  .cp-derived {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    min-height: 0;
    overflow-y: auto;
  }
  .cp-detail { right: 50%; transform: translateX(50%); }
}

/* Dar / alcak YATAY ekran (telefon landscape).
   ONEMLI: kompozisyon TEK KOLONA DUSMEZ. Oyun her cihazda yatay
   oynandigi icin panel dikey bir web sayfasina donusturulmez;
   yalnizca slot/yazi olcegi duser ve stat satiri sikisir. */
@media (max-width: 44rem), (orientation: landscape) and (max-height: 400px) {
  .cp-body {
    --cp-slot: calc(clamp(1.45rem, 5vh, 2.2rem) * var(--ui-scale));
    --cp-gap: 0.16rem;
    gap: 0.3rem;
    padding: 0.3rem 0.4rem;
  }
  .cp-equip__grid {
    grid-template-columns:
      var(--cp-slot)
      0.25rem
      minmax(6.1rem, 1.8fr)
      var(--cp-slot)
      var(--cp-slot);
  }
  .cp-alloc__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cp-alloc__row { padding: 0.18rem 0.3rem; }
  .cp-block { padding: 0.26rem 0.36rem; }
  .cp-block__title { margin-bottom: 0.18rem; padding-bottom: 0.14rem; }
  .cp-section__title { margin-bottom: 0.2rem; font-size: 0.5rem; letter-spacing: 0.1em; }
}

/* -------------------------------------------------------------
   12. DEMIRCI (BLACKSMITH)
   -------------------------------------------------------------
   Zeyd Online paleti: siyah/bordo zemin, altin islemeler, ocak
   sicakligi icin turuncu-kirmizi glow. Referans ekrandan yalnizca
   YERLESIM mantigi alinmistir.
   ------------------------------------------------------------- */

.blacksmith-overlay {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: clamp(0.35rem, 1.6vh, 1.1rem);
  background: rgba(4, 2, 9, 0.8);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--t-base) ease-out;
}
.blacksmith-overlay.is-visible { opacity: 1; }
.blacksmith-overlay.is-visible .blacksmith-panel { transform: translateY(0) scale(1); }

.blacksmith-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(98vw, 62rem);
  max-height: 100%;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 7px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 120, 40, 0.16), transparent 58%),
    linear-gradient(180deg, rgba(26, 11, 14, 0.985) 0%, rgba(14, 7, 10, 0.985) 46%,
      rgba(7, 4, 8, 0.99) 100%) padding-box,
    linear-gradient(180deg, #ffe9a8 0%, #e8c064 22%, #8a6a2c 60%, #4a3410 100%) border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85), 0 30px 74px rgba(0, 0, 0, 0.8),
    inset 0 0 120px rgba(150, 40, 20, 0.26);
  transform: translateY(14px) scale(0.985);
  transition: transform var(--t-base) cubic-bezier(0.2, 0.9, 0.3, 1);
}
.blacksmith-panel.is-view-menu { width: min(96vw, 40rem); }

/* ---- baslik ------------------------------------------------ */

.bs-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(0.4rem, 1.2vw, 0.9rem);
  padding: clamp(0.45rem, 1.3vh, 0.85rem) clamp(0.6rem, 1.6vw, 1.15rem);
  border-bottom: 1px solid rgba(232, 192, 100, 0.26);
  background: linear-gradient(180deg, rgba(120, 34, 18, 0.38), rgba(0, 0, 0, 0.16));
}
.bs-anvil {
  width: clamp(1.1rem, 2.4vh, 1.5rem);
  height: clamp(1.1rem, 2.4vh, 1.5rem);
  background: linear-gradient(180deg, #ffd68a, #8a6a2c);
  clip-path: polygon(12% 34%, 88% 34%, 74% 52%, 62% 52%, 62% 76%, 78% 88%, 22% 88%, 38% 76%, 38% 52%, 26% 52%);
}
.bs-title {
  margin: 0;
  overflow: hidden;
  color: var(--c-gold-bright);
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 2.1vh, 1.25rem);
  letter-spacing: 0.14em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.bs-gold {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.28rem 0.6rem;
  border: 1px solid rgba(232, 192, 100, 0.3);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.44);
}
.bs-gold__label {
  color: var(--c-text-dim);
  font-size: clamp(0.5rem, 1.05vh, 0.6rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.bs-gold__value { color: var(--c-gold-bright); font-family: var(--font-mono); }

.bs-close {
  display: grid;
  place-items: center;
  width: clamp(1.7rem, 3.4vh, 2.2rem);
  height: clamp(1.7rem, 3.4vh, 2.2rem);
  border: 1px solid rgba(232, 192, 100, 0.5);
  border-radius: 3px;
  background: rgba(107, 18, 32, 0.5);
  color: var(--c-gold-bright);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.bs-close:hover, .bs-close:focus-visible {
  border-color: var(--c-gold-bright);
  background: rgba(156, 28, 44, 0.72);
}

.bs-body {
  min-height: 0;
  padding: clamp(0.5rem, 1.4vh, 0.95rem) clamp(0.6rem, 1.6vw, 1.15rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bs-footer {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: clamp(0.4rem, 1.1vh, 0.7rem) clamp(0.6rem, 1.6vw, 1.15rem);
  border-top: 1px solid rgba(232, 192, 100, 0.24);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(107, 18, 32, 0.24));
}
.bs-back { padding: 0.3rem 1.1rem; font-size: clamp(0.6rem, 1.2vh, 0.72rem); }
.bs-message {
  margin: 0;
  min-height: 1em;
  color: var(--c-text-dim);
  font-size: clamp(0.58rem, 1.2vh, 0.72rem);
}
.bs-message.is-error { color: #ff9a8a; }

/* ---- ana menu ---------------------------------------------- */

.bs-menu {
  display: grid;
  gap: clamp(0.5rem, 1.5vh, 0.9rem);
}
.bs-menu__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.6rem, 1.6vw, 1rem);
  min-height: clamp(4.2rem, 12vh, 6rem);
  padding: clamp(0.7rem, 2vh, 1.15rem) clamp(0.8rem, 2vw, 1.3rem);
  border: 1px solid rgba(232, 192, 100, 0.4);
  border-radius: 5px;
  background:
    radial-gradient(ellipse at 12% 50%, rgba(255, 130, 50, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(38, 15, 18, 0.95), rgba(12, 6, 10, 0.95));
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.bs-menu__card:hover, .bs-menu__card:focus-visible {
  border-color: var(--c-gold-bright);
  box-shadow: 0 0 24px rgba(255, 140, 60, 0.28), inset 0 0 40px rgba(150, 40, 20, 0.3);
  transform: translateY(-2px);
}
.bs-menu__mark {
  display: grid;
  place-items: center;
  width: clamp(2rem, 5vh, 2.9rem);
  height: clamp(2rem, 5vh, 2.9rem);
  padding: .1rem;
  overflow: hidden;
  border: 1px solid rgba(232, 192, 100, 0.45);
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 150, 60, 0.55), transparent 62%),
    linear-gradient(180deg, #2a1114, #0b0509);
}
.bs-menu__mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.62));
}
.bs-menu__card--merchant .bs-menu__mark {
  background:
    radial-gradient(circle at 50% 40%, rgba(232, 192, 100, 0.5), transparent 62%),
    linear-gradient(180deg, #241a10, #0b0509);
}
.bs-menu__text { display: grid; gap: 0.2rem; min-width: 0; }
.bs-menu__name {
  color: var(--c-gold-bright);
  font-family: var(--font-display);
  font-size: clamp(0.78rem, 1.9vh, 1.02rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.bs-menu__desc {
  color: var(--c-text-dim);
  font-size: clamp(0.58rem, 1.25vh, 0.74rem);
  line-height: 1.4;
}
.bs-menu__chevron { color: var(--c-gold); font-size: 1.4rem; }

/* ---- forge yerlesimi ---------------------------------------- */

.forge {
  --forge-slot: calc(clamp(2.1rem, 6vh, 3.2rem) * var(--ui-scale));
  --forge-gap: clamp(0.2rem, 0.65vh, 0.38rem);
  display: grid;
  gap: clamp(0.4rem, 1.1vh, 0.75rem);
}

.forge-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: clamp(0.6rem, 2vw, 1.6rem);
}
.forge-side { display: grid; justify-items: center; gap: 0.3rem; }
.forge-side__title {
  margin: 0;
  color: var(--c-gold);
  font-family: var(--font-display);
  font-size: clamp(0.54rem, 1.2vh, 0.68rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.forge-slot {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--forge-slot) * 1.55);
  height: calc(var(--forge-slot) * 1.55);
  padding: 0;
  border: 1px solid rgba(232, 192, 100, 0.42);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(30, 14, 20, 0.92), rgba(9, 5, 11, 0.96));
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.forge-slot:hover, .forge-slot:focus-visible {
  border-color: var(--c-gold-bright);
  box-shadow: 0 0 14px rgba(232, 192, 100, 0.35);
}
.forge-slot img { width: 84%; height: 84%; object-fit: contain; }
.forge-slot__hint { color: rgba(232, 192, 100, 0.32); font-size: 1.4rem; line-height: 1; }
.forge-slot__level,
.forge-slot__amount {
  position: absolute;
  padding: 0 0.22rem;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.76);
  font-family: var(--font-mono);
  font-size: clamp(0.52rem, 1.05vh, 0.64rem);
}
.forge-slot__level { top: 2px; right: 3px; color: var(--c-fire); }
.forge-slot__amount { right: 3px; bottom: 2px; color: var(--c-text); }

/* ---- 3x3 ocak ----------------------------------------------- */

.forge-chamber {
  position: relative;
  padding: clamp(0.35rem, 1.1vh, 0.6rem);
  border: 1px solid rgba(232, 192, 100, 0.3);
  border-radius: 5px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 120, 40, 0.12), transparent 66%),
    linear-gradient(180deg, rgba(20, 10, 14, 0.9), rgba(6, 3, 7, 0.95));
}
.forge-chamber__glow {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 140, 50, 0.5), transparent 68%);
  opacity: 0;
  filter: blur(12px);
  transition: opacity var(--t-base) ease-out;
  pointer-events: none;
}
.forge-chamber__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, var(--forge-slot));
  gap: var(--forge-gap);
}
.forge-cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid rgba(232, 192, 100, 0.2);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(22, 11, 16, 0.85), rgba(8, 4, 9, 0.9));
}
.forge-cell.is-locked { opacity: 0.55; }
.forge-cell__rune {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: rgba(232, 192, 100, 0.22);
}
.forge-cell--core {
  border-color: rgba(232, 192, 100, 0.55);
  box-shadow: inset 0 0 14px rgba(255, 130, 50, 0.2);
}
.forge-cell--core.is-filled {
  border-color: var(--c-gold-bright);
  box-shadow: inset 0 0 18px rgba(255, 140, 60, 0.4), 0 0 16px rgba(255, 140, 60, 0.28);
}
.forge-cell__art { width: 92%; height: 92%; object-fit: contain; }
.forge-cell__level {
  position: absolute;
  right: 2px;
  bottom: 1px;
  color: var(--c-fire);
  font-family: var(--font-mono);
  font-size: clamp(0.5rem, 1vh, 0.6rem);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
}

/* kivilcimlar - hafif CSS, particle engine yok */
.forge-chamber__embers {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 5px;
  pointer-events: none;
}
.forge-ember {
  position: absolute;
  bottom: -6px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd08a, rgba(255, 120, 40, 0));
  opacity: 0;
}
.forge-ember:nth-child(1) { left: 14%; animation-delay: 0ms; }
.forge-ember:nth-child(2) { left: 30%; animation-delay: 160ms; }
.forge-ember:nth-child(3) { left: 46%; animation-delay: 320ms; }
.forge-ember:nth-child(4) { left: 62%; animation-delay: 90ms; }
.forge-ember:nth-child(5) { left: 78%; animation-delay: 240ms; }
.forge-ember:nth-child(6) { left: 90%; animation-delay: 400ms; }

/* calisirken: ocak isinir, item nabiz atar, kagit parlar */
.forge.phase-running .forge-chamber__glow { opacity: 1; animation: forgeGlow 700ms ease-in-out infinite alternate; }
.forge.phase-running .forge-cell--core.is-filled { animation: forgePulse 620ms ease-in-out infinite alternate; }
.forge.phase-running .forge-slot--scroll.is-filled { animation: forgeScroll 620ms ease-in-out infinite alternate; }
.forge.phase-running .forge-ember { animation: forgeEmber 900ms linear infinite; }

@keyframes forgeGlow { from { opacity: 0.5; } to { opacity: 1; } }
@keyframes forgePulse {
  from { transform: scale(1); box-shadow: inset 0 0 18px rgba(255, 140, 60, 0.4), 0 0 16px rgba(255, 140, 60, 0.28); }
  to { transform: scale(1.07); box-shadow: inset 0 0 26px rgba(255, 170, 90, 0.65), 0 0 30px rgba(255, 150, 70, 0.6); }
}
@keyframes forgeScroll {
  from { box-shadow: 0 0 10px rgba(232, 192, 100, 0.3); }
  to { box-shadow: 0 0 26px rgba(255, 190, 90, 0.75); }
}
@keyframes forgeEmber {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-56px) scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .forge.phase-running .forge-chamber__glow,
  .forge.phase-running .forge-cell--core.is-filled,
  .forge.phase-running .forge-slot--scroll.is-filled,
  .forge.phase-running .forge-ember { animation: none; }
}

/* ---- butonlar ----------------------------------------------- */

.forge-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.35rem, 1vw, 0.7rem);
}
.forge-action {
  padding: 0.4rem 0.5rem;
  font-size: clamp(0.58rem, 1.25vh, 0.74rem);
  letter-spacing: 0.08em;
}
.forge-action--upgrade {
  border-color: rgba(255, 150, 70, 0.6);
  background: linear-gradient(180deg, rgba(150, 34, 26, 0.9), rgba(90, 16, 20, 0.92));
  color: #ffe9c4;
}
.forge-action--upgrade:hover:not(:disabled) {
  box-shadow: 0 0 20px rgba(255, 130, 50, 0.4);
}
.forge-action:disabled { opacity: 0.36; cursor: not-allowed; }

/* ---- durum / onizleme --------------------------------------- */

.forge-live-quote {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.55rem, 1.4vw, 1rem);
  padding: clamp(0.38rem, 0.9vh, 0.55rem) clamp(0.65rem, 1.5vw, 1rem);
  border: 1px solid rgba(255, 190, 72, 0.46);
  border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(76, 15, 19, 0.58), rgba(17, 8, 10, 0.78), rgba(76, 15, 19, 0.58));
  box-shadow: inset 0 0 18px rgba(255, 133, 38, 0.06);
}
.forge-live-quote__fact {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.55rem;
  min-width: 0;
}
.forge-live-quote__label {
  color: var(--c-gold-dim);
  font-family: var(--font-display);
  font-size: clamp(0.5rem, 1.05vh, 0.62rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.forge-live-quote__value {
  color: #baff9d;
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 1.55vh, 0.94rem);
  text-shadow: 0 0 8px rgba(132, 255, 98, 0.22);
}
.forge-live-quote__fact--cost .forge-live-quote__value {
  color: var(--c-gold-bright);
  text-shadow: 0 0 8px rgba(255, 198, 76, 0.2);
}
.forge-live-quote__fact--cost.is-short .forge-live-quote__value { color: #ff9a8a; }
.forge-live-quote__divider {
  align-self: stretch;
  background: linear-gradient(180deg, transparent, rgba(232, 192, 100, 0.46), transparent);
}
@media (max-width: 34rem) {
  .forge-live-quote {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }
  .forge-live-quote__divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232, 192, 100, 0.46), transparent);
  }
}

.forge-status {
  display: grid;
  gap: 0.35rem;
  padding: clamp(0.4rem, 1.1vh, 0.65rem) clamp(0.5rem, 1.2vw, 0.8rem);
  border: 1px solid rgba(232, 192, 100, 0.22);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.36);
  min-height: clamp(3rem, 9vh, 4.6rem);
}
.forge-status.is-empty { place-items: center; }
.forge-status__hint,
.forge-status__notice {
  margin: 0;
  color: var(--c-text-dim);
  font-size: clamp(0.56rem, 1.2vh, 0.7rem);
  text-align: center;
}
.forge-status__notice { color: #ffb98a; }

.forge-transition {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: clamp(0.62rem, 1.4vh, 0.82rem);
  letter-spacing: 0.05em;
}
.forge-transition__from { color: var(--c-text-dim); }
.forge-transition__to strong,
.forge-transition__from strong { color: var(--c-fire); font-family: var(--font-mono); }
.forge-transition__to { color: var(--c-gold-bright); }
.forge-transition__arrow { color: var(--c-gold); }

.forge-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.1rem 0.5rem;
  margin: 0;
  text-align: center;
  font-size: clamp(0.55rem, 1.2vh, 0.7rem);
}
.forge-facts dt {
  grid-row: 1;
  color: var(--c-text-dim);
  font-size: 0.9em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.forge-facts dd { grid-row: 2; margin: 0; color: var(--c-text); font-family: var(--font-mono); }
.forge-facts__chance strong { color: #b8ff9a; font-size: 1.15em; }
.forge-facts__bonus { color: #c08cf0; }
.forge-facts__cost.is-short { color: #ff9a8a; }

.forge-scrolls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem;
}
.forge-scroll-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem 0.2rem 0.25rem;
  border: 1px solid rgba(232, 192, 100, 0.28);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.44);
  color: var(--c-text-dim);
  font-size: clamp(0.52rem, 1.1vh, 0.66rem);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.forge-scroll-chip img { width: 1.3em; height: 1.3em; object-fit: contain; }
.forge-scroll-chip:hover:not(:disabled) { color: var(--c-gold); }
.forge-scroll-chip.is-active {
  border-color: var(--c-gold-bright);
  background: rgba(107, 18, 32, 0.55);
  color: var(--c-gold-bright);
}
.forge-scroll-chip__count { font-family: var(--font-mono); }
.forge-scroll-chip__bonus { color: #c08cf0; font-family: var(--font-mono); }

/* sonuc */
.forge-result { place-items: center; text-align: center; }
.forge-result__title {
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 1.7vh, 0.95rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.forge-result.is-success {
  border-color: rgba(150, 220, 130, 0.5);
  box-shadow: inset 0 0 32px rgba(90, 200, 110, 0.16);
}
.forge-result.is-success .forge-result__title {
  color: #b8ff9a;
  text-shadow: 0 0 14px rgba(140, 255, 150, 0.45);
}
.forge-result.is-failed {
  border-color: rgba(200, 80, 70, 0.5);
  box-shadow: inset 0 0 32px rgba(150, 30, 30, 0.2);
}
.forge-result.is-failed .forge-result__title { color: #ff9a8a; }
.forge-result__note { margin: 0; color: var(--c-text-dim); font-size: clamp(0.56rem, 1.2vh, 0.7rem); }
.forge-result__note strong { color: var(--c-fire); font-family: var(--font-mono); }

/* ---- alt envanter ------------------------------------------- */

.forge-inventory { display: grid; gap: 0.35rem; }
.forge-inventory__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.forge-bag-tabs { display: flex; gap: 0.25rem; }
.forge-bag-tab {
  padding: 0.24rem 0.6rem;
  border: 1px solid rgba(232, 192, 100, 0.3);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.42);
  color: var(--c-text-dim);
  font-family: var(--font-display);
  font-size: clamp(0.5rem, 1.1vh, 0.64rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.forge-bag-tab:hover { color: var(--c-gold); }
.forge-bag-tab.is-active {
  border-color: var(--c-gold);
  background: rgba(107, 18, 32, 0.5);
  color: var(--c-gold-bright);
}

.forge-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--forge-gap);
  width: min(100%, calc(5 * var(--forge-slot) * 1.15 + 4 * var(--forge-gap)));
  margin: 0 auto;
}
.forge-grid--equipped { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.forge-grid__slot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(232, 192, 100, 0.24);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(24, 12, 20, 0.9), rgba(9, 5, 11, 0.95));
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.forge-grid__slot:hover:not(:disabled),
.forge-grid__slot:focus-visible {
  border-color: var(--c-gold);
  box-shadow: 0 0 12px rgba(232, 192, 100, 0.32);
}
.forge-grid__slot.is-selected {
  border-color: var(--c-gold-bright);
  box-shadow: 0 0 0 1px rgba(255, 233, 168, 0.55), 0 0 16px rgba(255, 150, 70, 0.5);
}
.forge-grid__slot.is-inert { opacity: 0.55; }
.forge-grid__slot:disabled { cursor: not-allowed; }
.forge-grid__icon { width: 84%; height: 84%; object-fit: contain; pointer-events: none; }
.forge-grid__icon.is-placeholder { opacity: 0.4; }
.forge-grid__dot { width: 0.28rem; height: 0.28rem; border-radius: 50%; background: rgba(232, 192, 100, 0.18); }
.forge-grid__level,
.forge-grid__amount {
  position: absolute;
  padding: 0 0.2rem;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.76);
  font-family: var(--font-mono);
  font-size: clamp(0.48rem, 1vh, 0.58rem);
  pointer-events: none;
}
.forge-grid__level { top: 1px; right: 2px; color: var(--c-fire); }
.forge-grid__amount { right: 2px; bottom: 1px; color: var(--c-text); }

.forge-grid__slot.is-rarity-common { border-color: rgba(185, 173, 147, 0.4); }
.forge-grid__slot.is-rarity-uncommon { border-color: rgba(126, 196, 120, 0.55); }
.forge-grid__slot.is-rarity-rare { border-color: rgba(110, 160, 235, 0.6); }
.forge-grid__slot.is-rarity-epic { border-color: rgba(178, 122, 232, 0.65); }
.forge-grid__slot.is-rarity-legendary { border-color: rgba(255, 179, 71, 0.7); }

/* ---- kagit saticisi ----------------------------------------- */

.bs-shop {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(9rem, 20vw, 12rem), 1fr));
  gap: clamp(0.4rem, 1.2vw, 0.85rem);
}
.bs-shop__card {
  display: grid;
  align-content: start;
  gap: 0.28rem;
  padding: clamp(0.5rem, 1.4vh, 0.8rem);
  border: 1px solid rgba(232, 192, 100, 0.3);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(30, 14, 18, 0.94), rgba(10, 5, 10, 0.95));
  text-align: center;
}
.bs-shop__card.is-blessing {
  border-color: rgba(200, 140, 240, 0.5);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(190, 120, 240, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(30, 14, 26, 0.95), rgba(10, 5, 12, 0.96));
}
.bs-shop__art {
  position: relative;
  height: clamp(3.4rem, 10vh, 5.4rem);
  overflow: hidden;
  border: 1px solid rgba(232, 192, 100, 0.24);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.42);
}
/* PNG oranı korunur (contain); asla gerilmez ve kutudan tasmaz.
   Yuzdelik max-height grid icinde cozulmedigi icin mutlak konum. */
.bs-shop__art img {
  position: absolute;
  inset: 6%;
  width: 88%;
  height: 88%;
  object-fit: contain;
}
.bs-shop__name {
  margin: 0.1rem 0 0;
  color: var(--c-gold-bright);
  font-family: var(--font-display);
  font-size: clamp(0.6rem, 1.35vh, 0.78rem);
  letter-spacing: 0.05em;
}
.bs-shop__range {
  margin: 0;
  color: var(--c-fire);
  font-family: var(--font-mono);
  font-size: clamp(0.58rem, 1.25vh, 0.74rem);
}
.bs-shop__desc {
  margin: 0;
  color: var(--c-text-dim);
  font-size: clamp(0.5rem, 1.1vh, 0.64rem);
  line-height: 1.4;
}
.bs-shop__bonus {
  margin: 0;
  color: #c08cf0;
  font-size: clamp(0.52rem, 1.15vh, 0.66rem);
}
.bs-shop__bonus strong { font-family: var(--font-mono); }
.bs-shop__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.05rem;
  margin: 0.2rem 0 0.1rem;
  font-size: clamp(0.5rem, 1.1vh, 0.64rem);
}
.bs-shop__facts dt {
  color: var(--c-text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.bs-shop__facts dd { grid-row: 2; margin: 0; color: var(--c-gold-bright); font-family: var(--font-mono); }
.bs-shop__facts dd.is-short { color: #ff9a8a; }
.bs-shop__buy { padding: 0.3rem 0.6rem; font-size: clamp(0.56rem, 1.2vh, 0.7rem); }
.bs-shop__buy:disabled { opacity: 0.38; cursor: not-allowed; }

/* ---- tooltip ------------------------------------------------ */

.bs-tooltip {
  position: absolute;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  width: max-content;
  max-width: 16rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid rgba(232, 192, 100, 0.5);
  border-radius: 4px;
  background: rgba(8, 4, 10, 0.97);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7);
  font-size: clamp(0.52rem, 1.15vh, 0.66rem);
  pointer-events: none;
}
.bs-tip__name { font-family: var(--font-display); letter-spacing: 0.05em; }
.bs-tip__name.is-rarity-common { color: #cbc0a6; }
.bs-tip__name.is-rarity-uncommon { color: #8fd489; }
.bs-tip__name.is-rarity-rare { color: #7fa8ef; }
.bs-tip__name.is-rarity-epic { color: #c08cf0; }
.bs-tip__name.is-rarity-legendary { color: #ffc46b; }
.bs-tip__rarity,
.bs-tip__type { color: var(--c-text-dim); letter-spacing: 0.08em; text-transform: uppercase; }
.bs-tip__desc { color: var(--c-text); line-height: 1.4; }
.bs-tip__bonus { color: #c08cf0; }
.bs-tip__owned,
.bs-tip__req { color: var(--c-text-dim); }
.bs-tip__stats {
  margin: 0.25rem 0 0;
  padding: 0.25rem 0 0;
  border-top: 1px solid rgba(232, 192, 100, 0.16);
  list-style: none;
  color: #b8e8a8;
}

/* ---- responsive --------------------------------------------- */

@media (max-height: 34rem) {
  .forge { --forge-slot: clamp(1.8rem, 5.6vh, 2.5rem); }
  .bs-menu__card { min-height: 3.4rem; }
}

@media (max-width: 46rem) {
  .forge-stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
  }
  .forge-chamber { grid-column: 1 / -1; order: -1; }
  .forge-actions { grid-template-columns: minmax(0, 1fr); }
  .bs-shop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------
   13. ZINDAN (DUNGEON) VE SAVAS
   -------------------------------------------------------------
   Kasabadan farkli bir yere girildigi hissi: daha karanlik zemin,
   tas duvar dokusu, iki yanda mesale isigi, kizil-turuncu atmosfer.
   Ayni altin cerceve ve tipografi ailesi korunur.
   ------------------------------------------------------------- */

.dungeon-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: clamp(0.35rem, 1.6vh, 1.1rem);
  background: rgba(2, 1, 4, 0.86);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--t-base) ease-out;
}
.dungeon-overlay.is-visible { opacity: 1; }
.dungeon-overlay.is-visible .dungeon-panel { transform: translateY(0) scale(1); }

.dungeon-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(98vw, 68rem);
  max-height: 100%;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 7px;
  background:
    /* mesale halesi */
    radial-gradient(ellipse at 8% 12%, rgba(255, 120, 40, 0.2), transparent 42%),
    radial-gradient(ellipse at 92% 12%, rgba(255, 120, 40, 0.2), transparent 42%),
    /* tas duvar dokusu */
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.014) 0 4.6rem, transparent 4.6rem 4.7rem),
    repeating-linear-gradient(0deg,
      rgba(255, 255, 255, 0.014) 0 2.3rem, transparent 2.3rem 2.4rem),
    linear-gradient(180deg, rgba(16, 9, 12, 0.99) 0%, rgba(9, 5, 8, 0.99) 52%,
      rgba(4, 2, 5, 0.995) 100%) padding-box,
    linear-gradient(180deg, #ffe9a8 0%, #e8c064 20%, #8a6a2c 58%, #3a2810 100%) border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.9), 0 34px 80px rgba(0, 0, 0, 0.85),
    inset 0 0 140px rgba(120, 24, 14, 0.3);
  transform: translateY(14px) scale(0.985);
  transition: transform var(--t-base) cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* ---- mesaleler --------------------------------------------- */

.dg-torches { position: absolute; inset: 0; pointer-events: none; }
.dg-torch {
  position: absolute;
  top: clamp(2.6rem, 7vh, 4rem);
  width: clamp(3rem, 8vw, 5rem);
  height: clamp(3rem, 8vw, 5rem);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 150, 60, 0.4), transparent 68%);
  filter: blur(8px);
  animation: dgTorch 2.4s ease-in-out infinite alternate;
}
.dg-torch--left { left: clamp(0.5rem, 3vw, 2.2rem); }
.dg-torch--right { right: clamp(0.5rem, 3vw, 2.2rem); animation-delay: 700ms; }
@keyframes dgTorch { from { opacity: 0.45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dg-torch { animation: none; } }

/* ---- baslik ------------------------------------------------ */

.dg-header {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: clamp(0.4rem, 1.2vw, 0.9rem);
  padding: clamp(0.45rem, 1.3vh, 0.85rem) clamp(0.6rem, 1.6vw, 1.15rem);
  border-bottom: 1px solid rgba(232, 192, 100, 0.26);
  background: linear-gradient(180deg, rgba(96, 20, 14, 0.42), rgba(0, 0, 0, 0.2));
}
.dg-title {
  margin: 0;
  overflow: hidden;
  color: var(--c-gold-bright);
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 2.1vh, 1.25rem);
  letter-spacing: 0.16em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.dg-hero, .dg-gold {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.28rem 0.6rem;
  border: 1px solid rgba(232, 192, 100, 0.3);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.5);
  font-size: clamp(0.55rem, 1.2vh, 0.68rem);
}
.dg-hero__name { color: var(--c-gold-bright); font-family: var(--font-display); }
.dg-hero__meta, .dg-gold__label {
  color: var(--c-text-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dg-hero__level, .dg-gold__value { color: var(--c-gold-bright); font-family: var(--font-mono); }

.dg-close {
  display: grid;
  place-items: center;
  width: clamp(1.7rem, 3.4vh, 2.2rem);
  height: clamp(1.7rem, 3.4vh, 2.2rem);
  border: 1px solid rgba(232, 192, 100, 0.5);
  border-radius: 3px;
  background: rgba(107, 18, 32, 0.5);
  color: var(--c-gold-bright);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.dg-close:hover:not(:disabled) { border-color: var(--c-gold-bright); background: rgba(156, 28, 44, 0.72); }
.dg-close:disabled { opacity: 0.35; cursor: not-allowed; }

.dg-body {
  position: relative;
  z-index: 2;
  min-height: 0;
  padding: clamp(0.5rem, 1.4vh, 0.95rem) clamp(0.6rem, 1.6vw, 1.15rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dg-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: clamp(0.4rem, 1.1vh, 0.7rem) clamp(0.6rem, 1.6vw, 1.15rem);
  border-top: 1px solid rgba(232, 192, 100, 0.24);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(96, 20, 14, 0.26));
}
.dg-back { padding: 0.3rem 1.1rem; font-size: clamp(0.6rem, 1.2vh, 0.72rem); }
.dg-back:disabled { opacity: 0.35; cursor: not-allowed; }
.dg-message { margin: 0; min-height: 1em; color: var(--c-text-dim); font-size: clamp(0.58rem, 1.2vh, 0.72rem); }
.dg-message.is-error { color: #ff9a8a; }
.dg-dot { padding: 0 0.35em; opacity: 0.55; }

/* ---- dusman secimi ----------------------------------------- */

.dg-select__hint {
  margin: 0 0 0.5rem;
  color: var(--c-text-dim);
  font-size: clamp(0.58rem, 1.25vh, 0.72rem);
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}
.dg-enemy-list {
  display: grid;
  gap: clamp(0.4rem, 1.2vh, 0.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.dg-enemy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1.1rem);
  padding: clamp(0.4rem, 1.2vh, 0.7rem) clamp(0.5rem, 1.4vw, 0.95rem);
  border: 1px solid rgba(232, 192, 100, 0.3);
  border-radius: 5px;
  background:
    radial-gradient(ellipse at 10% 50%, rgba(255, 110, 40, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(28, 13, 14, 0.94), rgba(9, 5, 8, 0.95));
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.dg-enemy:hover { border-color: rgba(255, 170, 90, 0.6); transform: translateY(-1px); }
.dg-enemy.is-selected {
  border-color: var(--c-gold-bright);
  box-shadow: 0 0 0 1px rgba(255, 233, 168, 0.4), 0 0 22px rgba(255, 130, 50, 0.34);
}
.dg-enemy__art {
  position: relative;
  width: clamp(3.6rem, 9vh, 5.6rem);
  height: clamp(3.6rem, 9vh, 5.6rem);
  overflow: hidden;
  border: 1px solid rgba(232, 192, 100, 0.28);
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 70%, rgba(255, 120, 40, 0.22), transparent 62%),
    linear-gradient(180deg, #150a10, #050308);
}
/* PNG orani korunur; asla gerilmez. */
.dg-enemy__art img {
  position: absolute;
  inset: 4%;
  width: 92%;
  height: 92%;
  object-fit: contain;
}
.dg-enemy__info { min-width: 0; }
.dg-enemy__name {
  margin: 0;
  color: var(--c-gold-bright);
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 1.7vh, 0.95rem);
  letter-spacing: 0.08em;
}
.dg-enemy__meta {
  margin: 0.1rem 0 0.3rem;
  color: var(--c-text-dim);
  font-size: clamp(0.54rem, 1.2vh, 0.68rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dg-enemy__meta strong { color: var(--c-gold-bright); font-family: var(--font-mono); }
.dg-enemy__power { color: var(--c-fire) !important; }
.dg-enemy__stats,
.dg-fighter__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.9rem;
  margin: 0;
  font-size: clamp(0.52rem, 1.15vh, 0.66rem);
}
.dg-stat { display: flex; gap: 0.3rem; }
.dg-stat dt { color: var(--c-text-dim); }
.dg-stat dd { margin: 0; color: var(--c-text); font-family: var(--font-mono); }
.dg-enemy__reward {
  margin: 0.3rem 0 0;
  color: var(--c-text-dim);
  font-size: clamp(0.5rem, 1.1vh, 0.63rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dg-enemy__reward strong { color: #b8ff9a; font-family: var(--font-mono); }
.dg-enemy__fight {
  padding: 0.42rem 1.2rem;
  border-color: rgba(255, 150, 70, 0.6);
  background: linear-gradient(180deg, rgba(150, 34, 26, 0.9), rgba(90, 16, 20, 0.92));
  color: #ffe9c4;
  font-size: clamp(0.58rem, 1.25vh, 0.74rem);
  /* Dokunmatik hedefi rahat olsun. */
  min-height: 2.2rem;
}
.dg-enemy__fight:hover { box-shadow: 0 0 20px rgba(255, 130, 50, 0.42); }

/* ---- savas alani ------------------------------------------- */

.dg-battle { position: relative; display: grid; gap: clamp(0.4rem, 1.1vh, 0.75rem); }

.dg-arena {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(0.4rem, 1.6vw, 1.2rem);
}
.dg-vs {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  padding-top: clamp(1rem, 4vh, 2.4rem);
}
.dg-vs__mark {
  color: var(--c-fire);
  font-family: var(--font-display);
  font-size: clamp(1rem, 3vh, 1.7rem);
  letter-spacing: 0.1em;
  text-shadow: 0 0 16px rgba(255, 120, 40, 0.6);
}
.dg-vs__turn {
  color: var(--c-gold);
  font-size: clamp(0.5rem, 1.15vh, 0.64rem);
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}
.dg-battle.state-enemy-turn .dg-vs__turn { color: #ff9a8a; }
.dg-battle.state-victory .dg-vs__turn { color: #b8ff9a; }

.dg-fighter { display: grid; gap: 0.3rem; min-width: 0; }
.dg-fighter__head { text-align: center; }
.dg-fighter__name {
  margin: 0;
  overflow: hidden;
  color: var(--c-gold-bright);
  font-family: var(--font-display);
  font-size: clamp(0.68rem, 1.6vh, 0.92rem);
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dg-fighter__meta {
  margin: 0.05rem 0 0;
  color: var(--c-text-dim);
  font-size: clamp(0.5rem, 1.1vh, 0.63rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dg-fighter__meta strong { color: var(--c-gold-bright); font-family: var(--font-mono); }

.dg-fighter__stage {
  position: relative;
  aspect-ratio: 1;
  max-height: clamp(7rem, 26vh, 15rem);
  margin: 0 auto;
  overflow: visible;
  border: 1px solid rgba(232, 192, 100, 0.3);
  border-radius: 5px;
  background:
    radial-gradient(ellipse at 50% 78%, rgba(255, 110, 40, 0.2), transparent 60%),
    linear-gradient(180deg, #140a12 0%, #0a0510 55%, #040206 100%);
  box-shadow: inset 0 -1.6rem 1.8rem rgba(0, 0, 0, 0.72);
  width: min(100%, clamp(7rem, 26vh, 15rem));
}
.dg-fighter__glow {
  position: absolute;
  inset: auto 14% 4%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 130, 50, 0.4), transparent 70%);
  filter: blur(6px);
}
.dg-fighter__art {
  position: absolute;
  /* Kutu: kenarlardan %3 iceride, %94 x %94. Replaced element oldugu
     icin olculer ACIK yazilir (width:auto intrinsic boyutu alirdi).
     contain + center => gorsel kutunun ICINDE, ezilmeden, TAM ORTALI. */
  inset: 3%;
  width: 94%;
  height: 94%;
  object-fit: contain;
  object-position: center center;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.7));
  transition: transform var(--t-fast) ease-out, filter var(--t-fast) ease-out;
}
.dg-fighter--enemy .dg-fighter__art { transform: none; }

/* vurus animasyonu - hafif CSS, particle engine yok */
.dg-fighter.is-striking .dg-fighter__art { animation: dgStrike 420ms ease-out; }
.dg-fighter--enemy.is-striking .dg-fighter__art { animation: dgStrikeMirror 420ms ease-out; }
.dg-fighter.is-hurt .dg-fighter__stage { animation: dgShake 420ms ease-out; }
.dg-fighter.is-hurt .dg-fighter__art { filter: drop-shadow(0 0 12px rgba(255, 60, 40, 0.9)) brightness(1.5) saturate(0.6); }

@keyframes dgStrike {
  0% { transform: translateX(0) scale(1); }
  40% { transform: translateX(10%) scale(1.06); }
  100% { transform: translateX(0) scale(1); }
}
@keyframes dgStrikeMirror {
  0% { transform: translateX(0) scale(1); }
  40% { transform: translateX(-10%) scale(1.06); }
  100% { transform: translateX(0) scale(1); }
}
@keyframes dgShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  45% { transform: translateX(5px); }
  70% { transform: translateX(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .dg-fighter.is-striking .dg-fighter__art,
  .dg-fighter--enemy.is-striking .dg-fighter__art,
  .dg-fighter.is-hurt .dg-fighter__stage { animation: none; }
}

/* ucan hasar sayilari */
.dg-floaters { position: absolute; inset: 0; overflow: visible; }
.dg-floater {
  position: absolute;
  top: 26%;
  left: 50%;
  color: #ffd9a0;
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 2.4vh, 1.4rem);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
  transform: translateX(-50%);
  animation: dgFloat 900ms ease-out forwards;
  white-space: nowrap;
}
.dg-floater.is-critical { color: #ff8a4a; font-size: clamp(1rem, 2.8vh, 1.7rem); }
.dg-floater.is-dodge { color: #8fd4ff; font-size: clamp(0.8rem, 2vh, 1.15rem); }
@keyframes dgFloat {
  0% { opacity: 0; transform: translate(-50%, 12px) scale(0.85); }
  25% { opacity: 1; transform: translate(-50%, -4px) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -48px) scale(1); }
}

/* ---- HP bari ------------------------------------------------ */

.dg-hp { display: grid; gap: 0.15rem; }
.dg-hp__bar {
  position: relative;
  height: clamp(0.6rem, 1.5vh, 0.85rem);
  overflow: hidden;
  border: 1px solid rgba(232, 192, 100, 0.42);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.66);
}
.dg-hp__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #6b1220, #c62b2b 55%, #ff7a4a);
  box-shadow: 0 0 12px rgba(220, 60, 40, 0.55);
  /* Hasar aldikca yumusak azalir. */
  transition: width 420ms cubic-bezier(0.3, 0.8, 0.4, 1);
}
.dg-fighter--player .dg-hp__fill {
  background: linear-gradient(90deg, #2f6b28, #4fae3c 55%, #9ae86a);
  box-shadow: 0 0 12px rgba(110, 210, 90, 0.5);
}
.dg-hp__value {
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: clamp(0.52rem, 1.15vh, 0.68rem);
  text-align: center;
}

/* ---- kontroller ve log -------------------------------------- */

/* Savas kontrol satiri: SKILL + ortada durum rozeti + ATLA (ORTAK). */
.dg-controls,
.ar-controls {
  display: grid;
  grid-template-columns: minmax(9rem, auto) minmax(12rem, auto) minmax(5rem, auto);
  gap: 0.5rem 0.9rem;
  align-items: center;
  justify-content: center;
}

.dg-controls > .dg-auto,
.ar-controls > .ar-auto { justify-self: center; }
.dg-attack {
  min-width: min(100%, 16rem);
  /* Mobil dokunmatik hedefi */
  min-height: 2.6rem;
  padding: 0.5rem 1.6rem;
  border-color: rgba(255, 150, 70, 0.6);
  background: linear-gradient(180deg, rgba(160, 38, 28, 0.94), rgba(96, 16, 20, 0.94));
  color: #ffe9c4;
  font-size: clamp(0.62rem, 1.4vh, 0.8rem);
  letter-spacing: 0.1em;
}
.dg-attack:hover:not(:disabled) { box-shadow: 0 0 24px rgba(255, 130, 50, 0.45); }
.dg-attack:disabled { opacity: 0.35; cursor: not-allowed; }

.battle-skill {
  position: relative;
  flex: 0 0 auto;
  width: clamp(2.55rem, 6vh, 3.25rem);
  height: clamp(2.55rem, 6vh, 3.25rem);
  min-height: 0;
  padding: 0.12rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-color: rgba(106, 151, 243, 0.72);
  background: linear-gradient(180deg, rgba(43, 43, 106, 0.95), rgba(18, 15, 47, 0.98));
}
.battle-skill--warrior { border-color: rgba(239, 139, 70, 0.72); }
.battle-skill--rogue { border-color: rgba(166, 104, 236, 0.72); }
.battle-skill--priest { border-color: rgba(234, 213, 119, 0.72); }
.battle-skill__icon-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0.28rem;
  pointer-events: none;
  user-select: none;
}
.battle-skill__cooldown {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid rgba(255, 224, 145, 0.64);
  border-radius: 50%;
  background: rgba(2, 3, 9, 0.84);
  color: #ffe49b;
  font: 700 0.72rem var(--font-mono);
  transform: translate(-50%, -50%);
}
.battle-skill__cooldown[hidden] { display: none; }
.battle-skill:disabled { opacity: 0.53; cursor: not-allowed; }
.battle-skill.is-cooling .battle-skill__icon-image { filter: grayscale(0.85) brightness(0.46); }

/* Savas kaydi ARTIK ORTAK bilesendir - bkz. bolum 21 (.combat-log). */

/* ---- zafer / yenilgi ---------------------------------------- */

.dg-result {
  position: absolute;
  inset: auto 0 0;
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  padding: clamp(0.7rem, 2vh, 1.2rem);
  border-top: 2px solid transparent;
  background: linear-gradient(180deg, rgba(6, 3, 8, 0.9), rgba(6, 3, 8, 0.99));
  text-align: center;
  animation: dgResultIn var(--t-base) ease-out;
}
.dg-result.is-victory {
  border-top-color: rgba(150, 220, 130, 0.6);
  box-shadow: inset 0 26px 48px rgba(70, 180, 90, 0.14);
}
.dg-result.is-defeat {
  border-top-color: rgba(200, 70, 60, 0.6);
  box-shadow: inset 0 26px 48px rgba(160, 30, 30, 0.18);
}
@keyframes dgResultIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.dg-result__title {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.6vh, 1.5rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.dg-result.is-victory .dg-result__title {
  color: #b8ff9a;
  text-shadow: 0 0 20px rgba(140, 255, 150, 0.5);
}
.dg-result.is-defeat .dg-result__title { color: #ff8a7a; }
.dg-result__note { margin: 0; color: var(--c-text-dim); font-size: clamp(0.58rem, 1.25vh, 0.72rem); }
.dg-result__action { margin-top: 0.4rem; min-height: 2.4rem; padding: 0.45rem 1.8rem; }

.dg-reward {
  margin: 0;
  color: var(--c-text-dim);
  font-size: clamp(0.6rem, 1.35vh, 0.78rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dg-reward__value { color: #b8ff9a; font-family: var(--font-mono); font-size: 1.15em; }
.dg-reward__value.is-gold { color: var(--c-gold-bright); }

/* JOB (SINIF) ETIKETI - butun panellerde AYNI gorunum.
   Kucuk, belirgin ve temaya uygun; sinifa gore renk tonu degisir. */
.item-job {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(0.46rem, 1.05vh, 0.6rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-gold-dim);
}
.item-job.is-warrior { color: #e8a271; }
.item-job.is-rogue { color: #9fd7a0; }
.item-job.is-mage { color: #9fb6ff; }
.item-job.is-priest { color: #ffe6a8; }
.item-job.is-all { color: var(--c-text-dim); }

.cp-detail__job { margin: 0.05rem 0 0.1rem; }
.dg-loot__job { margin-top: 0.04rem; }

/* ZINDAN GANIMETI - zafer ekranindaki dusen ekipman satiri. */
.dg-loot {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  width: min(100%, 17rem);
  margin: 0.2rem auto 0;
  padding: 0.3rem 0.5rem;
  border: 1px solid rgba(232, 192, 100, 0.4);
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(30, 12, 18, 0.9), rgba(10, 6, 12, 0.9));
  text-align: left;
}
.dg-loot__icon {
  width: clamp(1.7rem, 4.6vh, 2.4rem);
  height: clamp(1.7rem, 4.6vh, 2.4rem);
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));
}
.dg-loot__body { display: grid; gap: 0.05rem; min-width: 0; }
.dg-loot__label {
  color: var(--c-gold-dim);
  font-family: var(--font-display);
  font-size: clamp(0.44rem, 1vh, 0.55rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.dg-loot__name { font-size: clamp(0.6rem, 1.35vh, 0.76rem); }
.dg-loot__tags {
  color: var(--c-text-dim);
  font-size: clamp(0.42rem, 0.98vh, 0.52rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dg-loot.is-rarity-uncommon { border-color: rgba(120, 200, 140, 0.5); }
.dg-loot.is-rarity-rare { border-color: rgba(110, 165, 235, 0.55); }
.dg-loot.is-rarity-epic { border-color: rgba(180, 130, 235, 0.55); }
.dg-loot-full {
  margin: 0.24rem 0 0;
  color: #e8a07a;
  font-size: clamp(0.46rem, 1.05vh, 0.58rem);
  letter-spacing: 0.08em;
}

.dg-levelup {
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  margin-top: 0.35rem;
  padding: 0.4rem 1.2rem;
  border: 1px solid rgba(232, 192, 100, 0.45);
  border-radius: 4px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 190, 90, 0.2), transparent 70%);
}
.dg-levelup__title {
  color: var(--c-gold-bright);
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 1.7vh, 0.95rem);
  letter-spacing: 0.18em;
  text-shadow: 0 0 16px rgba(255, 200, 100, 0.6);
  text-transform: uppercase;
}
.dg-levelup__level, .dg-levelup__points {
  margin: 0;
  color: var(--c-text-dim);
  font-size: clamp(0.55rem, 1.2vh, 0.7rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dg-levelup__level strong { color: var(--c-gold-bright); font-family: var(--font-mono); }
.dg-levelup__points strong { color: #b8ff9a; font-family: var(--font-mono); }

/* ---- responsive --------------------------------------------- */

@media (max-height: 34rem) {
  .dg-fighter__stage { max-height: clamp(5rem, 20vh, 8rem); width: min(100%, clamp(5rem, 20vh, 8rem)); }
  .dg-vs { padding-top: clamp(0.5rem, 2vh, 1.2rem); }
  /* Savas kaydi yuksekligi ortak .combat-log kuralindan gelir. */
}

@media (max-width: 52rem) {
  .dg-enemy {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 0.45rem;
  }
  .dg-enemy__fight { grid-column: 1 / -1; width: 100%; }
  .dg-arena { gap: 0.3rem; }
  .dg-vs__mark { font-size: clamp(0.8rem, 2.4vh, 1.2rem); }
}

@media (max-width: 34rem) {
  .dg-header { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.35rem; }
  .dg-hero, .dg-gold { justify-self: start; }
}

/* -------------------------------------------------------------
   14. ORTAK TUCCAR ENVANTER PANELI
   -------------------------------------------------------------
   ui/shopInventoryPanel.js — satin alma yapilan HER ekranda ayni
   gorunum. Yeni bir tuccar ekrani bu bloga otomatik uyar.
   ------------------------------------------------------------- */

.shop-inv {
  position: relative;
  display: grid;
  gap: 0.35rem;
  margin-top: clamp(0.4rem, 1.2vh, 0.8rem);
  padding-top: clamp(0.4rem, 1.2vh, 0.7rem);
  border-top: 1px solid rgba(232, 192, 100, 0.24);
}
.shop-inv__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}
.shop-inv__title {
  margin: 0;
  color: var(--c-gold);
  font-family: var(--font-display);
  font-size: clamp(0.56rem, 1.2vh, 0.7rem);
  letter-spacing: 0.19em;
  text-transform: uppercase;
}
.shop-inv__capacity {
  color: var(--c-text-dim);
  font-family: var(--font-mono);
  font-size: clamp(0.54rem, 1.15vh, 0.68rem);
}
.shop-inv__tabs { display: flex; gap: 0.25rem; }
.shop-inv__tab {
  flex: 1;
  padding: 0.24rem 0.4rem;
  border: 1px solid rgba(232, 192, 100, 0.3);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.42);
  color: var(--c-text-dim);
  font-family: var(--font-display);
  font-size: clamp(0.5rem, 1.1vh, 0.64rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.shop-inv__tab:hover { color: var(--c-gold); }
.shop-inv__tab.is-active {
  border-color: var(--c-gold);
  background: rgba(107, 18, 32, 0.5);
  color: var(--c-gold-bright);
}

.shop-inv__grid {
  --shop-slot: clamp(1.9rem, 5.4vh, 2.9rem);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.18rem, 0.6vh, 0.34rem);
  width: min(100%, calc(5 * var(--shop-slot) + 4 * 0.34rem));
  margin: 0 auto;
}
.shop-inv__slot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(232, 192, 100, 0.24);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(24, 12, 20, 0.9), rgba(9, 5, 11, 0.95));
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.shop-inv__slot:hover, .shop-inv__slot:focus-visible {
  border-color: var(--c-gold);
  box-shadow: 0 0 12px rgba(232, 192, 100, 0.32);
}
.shop-inv__slot.is-rarity-common { border-color: rgba(185, 173, 147, 0.4); }
.shop-inv__slot.is-rarity-uncommon { border-color: rgba(126, 196, 120, 0.55); }
.shop-inv__slot.is-rarity-rare { border-color: rgba(110, 160, 235, 0.6); }
.shop-inv__slot.is-rarity-epic { border-color: rgba(178, 122, 232, 0.65); }
.shop-inv__slot.is-rarity-legendary { border-color: rgba(255, 179, 71, 0.7); }

/* Yeni satin alinan esya: kisa sureli altin parilti + YENI etiketi.
   Kalici rozet birakmaz (bkz. shopInventoryPanel.HIGHLIGHT_MS). */
.shop-inv__slot.is-new {
  border-color: var(--c-gold-bright);
  animation: shopNewGlow 1.2s ease-out;
}
@keyframes shopNewGlow {
  0%, 60% { box-shadow: 0 0 0 1px rgba(255, 233, 168, 0.65), 0 0 22px rgba(255, 190, 90, 0.75); }
  100% { box-shadow: none; }
}
.shop-inv__new {
  position: absolute;
  top: -0.42rem;
  left: 50%;
  padding: 0 0.26rem;
  border-radius: 2px;
  background: linear-gradient(180deg, #ffe9a8, #c99a3a);
  color: #1b0e08;
  font-family: var(--font-display);
  font-size: clamp(0.42rem, 0.9vh, 0.52rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateX(-50%);
  pointer-events: none;
}
.shop-inv__icon { width: 84%; height: 84%; object-fit: contain; pointer-events: none; }
.shop-inv__dot { width: 0.26rem; height: 0.26rem; border-radius: 50%; background: rgba(232, 192, 100, 0.18); }
.shop-inv__level, .shop-inv__amount {
  position: absolute;
  padding: 0 0.2rem;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.78);
  font-family: var(--font-mono);
  font-size: clamp(0.46rem, 0.95vh, 0.56rem);
  pointer-events: none;
}
.shop-inv__level { top: 1px; right: 2px; color: var(--c-fire); }
.shop-inv__amount { right: 2px; bottom: 1px; color: var(--c-text); }

.shop-inv__tooltip {
  position: absolute;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  width: max-content;
  max-width: 15rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid rgba(232, 192, 100, 0.5);
  border-radius: 4px;
  background: rgba(8, 4, 10, 0.97);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7);
  font-size: clamp(0.52rem, 1.1vh, 0.64rem);
  pointer-events: none;
}
.shop-tip__name { font-family: var(--font-display); letter-spacing: 0.05em; }
.shop-tip__name.is-rarity-common { color: #cbc0a6; }
.shop-tip__name.is-rarity-uncommon { color: #8fd489; }
.shop-tip__name.is-rarity-rare { color: #7fa8ef; }
.shop-tip__name.is-rarity-epic { color: #c08cf0; }
.shop-tip__name.is-rarity-legendary { color: #ffc46b; }
.shop-tip__rarity, .shop-tip__type {
  color: var(--c-text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.shop-tip__desc { color: var(--c-text); line-height: 1.4; }
.shop-tip__req { color: var(--c-text-dim); }
.shop-tip__stats {
  margin: 0.25rem 0 0;
  padding: 0.25rem 0 0;
  border-top: 1px solid rgba(232, 192, 100, 0.16);
  list-style: none;
  color: #b8e8a8;
}

/* Tuccar karti: SATIN AL + sahip olunan */
.item-card__owned {
  color: var(--c-text-dim);
  font-size: clamp(0.48rem, 1vh, 0.6rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.item-card__owned strong { color: var(--c-gold-bright); font-family: var(--font-mono); }
.item-card__buy {
  width: 100%;
  min-height: 2rem;
  margin-top: 0.25rem;
  padding: 0.28rem 0.5rem;
  font-size: clamp(0.54rem, 1.15vh, 0.68rem);
}
.item-card__buy:disabled { opacity: 0.38; cursor: not-allowed; }
.merchant-panel__hint.is-error { color: #ff9a8a; }

/* -------------------------------------------------------------
   15. OTOMATIK SAVAS DURUMU (Zindan + Arena)
   ------------------------------------------------------------- */

.dg-auto, .ar-auto {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 1.4rem;
  border: 1px solid rgba(232, 192, 100, 0.34);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  color: var(--c-text-dim);
  font-family: var(--font-display);
  font-size: clamp(0.56rem, 1.25vh, 0.72rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dg-auto.is-running, .ar-auto.is-running {
  border-color: rgba(255, 150, 70, 0.6);
  color: #ffd9a0;
  box-shadow: 0 0 20px rgba(255, 120, 40, 0.28);
}
.dg-auto__mark, .ar-auto__mark {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: rgba(232, 192, 100, 0.35);
}
.dg-auto.is-running .dg-auto__mark,
.ar-auto.is-running .ar-auto__mark {
  background: var(--c-fire);
  animation: autoPulse 900ms ease-in-out infinite alternate;
}
@keyframes autoPulse {
  from { opacity: 0.35; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .dg-auto.is-running .dg-auto__mark,
  .ar-auto.is-running .ar-auto__mark { animation: none; }
}

/* -------------------------------------------------------------
   16. ARENA
   ------------------------------------------------------------- */

.arena-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: clamp(0.35rem, 1.6vh, 1.1rem);
  background: rgba(3, 1, 5, 0.84);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--t-base) ease-out;
}
.arena-overlay.is-visible { opacity: 1; }
.arena-overlay.is-visible .arena-panel { transform: translateY(0) scale(1); }

.arena-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(98vw, 70rem);
  max-height: 100%;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 7px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 170, 70, 0.14), transparent 55%),
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.012) 0 5.2rem, transparent 5.2rem 5.4rem),
    linear-gradient(180deg, rgba(22, 12, 12, 0.99) 0%, rgba(12, 7, 8, 0.99) 50%,
      rgba(5, 3, 4, 0.995) 100%) padding-box,
    linear-gradient(180deg, #ffe9a8 0%, #e8c064 20%, #8a6a2c 58%, #3a2810 100%) border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.9), 0 34px 80px rgba(0, 0, 0, 0.85),
    inset 0 0 140px rgba(140, 60, 14, 0.24);
  transform: translateY(14px) scale(0.985);
  transition: transform var(--t-base) cubic-bezier(0.2, 0.9, 0.3, 1);
}

.ar-banners { position: absolute; inset: 0; pointer-events: none; }
.ar-banner {
  position: absolute;
  top: 0;
  width: clamp(1.2rem, 3vw, 2.2rem);
  height: clamp(5rem, 22vh, 9rem);
  background: linear-gradient(180deg, rgba(150, 30, 26, 0.5), rgba(80, 14, 14, 0.1));
  clip-path: polygon(0 0, 100% 0, 100% 84%, 50% 100%, 0 84%);
}
.ar-banner--left { left: clamp(0.6rem, 3vw, 2.4rem); }
.ar-banner--right { right: clamp(0.6rem, 3vw, 2.4rem); }

.ar-header {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: clamp(0.4rem, 1.2vw, 0.9rem);
  padding: clamp(0.45rem, 1.3vh, 0.85rem) clamp(0.6rem, 1.6vw, 1.15rem);
  border-bottom: 1px solid rgba(232, 192, 100, 0.26);
  background: linear-gradient(180deg, rgba(120, 28, 18, 0.4), rgba(0, 0, 0, 0.2));
}
.ar-title {
  margin: 0;
  color: var(--c-gold-bright);
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 2.1vh, 1.25rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ar-record, .ar-gold {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.28rem 0.6rem;
  border: 1px solid rgba(232, 192, 100, 0.3);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.5);
  font-size: clamp(0.52rem, 1.15vh, 0.66rem);
}
.ar-record__label, .ar-gold__label {
  color: var(--c-text-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ar-record__value, .ar-gold__value { color: var(--c-gold-bright); font-family: var(--font-mono); }
.ar-record__sep { opacity: 0.5; }

.ar-close {
  display: grid;
  place-items: center;
  width: clamp(1.7rem, 3.4vh, 2.2rem);
  height: clamp(1.7rem, 3.4vh, 2.2rem);
  border: 1px solid rgba(232, 192, 100, 0.5);
  border-radius: 3px;
  background: rgba(107, 18, 32, 0.5);
  color: var(--c-gold-bright);
  cursor: pointer;
}
.ar-close:hover:not(:disabled) { border-color: var(--c-gold-bright); background: rgba(156, 28, 44, 0.72); }
.ar-close:disabled { opacity: 0.35; cursor: not-allowed; }

.ar-body {
  position: relative;
  z-index: 2;
  min-height: 0;
  padding: clamp(0.5rem, 1.4vh, 0.95rem) clamp(0.6rem, 1.6vw, 1.15rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ar-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: clamp(0.4rem, 1.1vh, 0.7rem) clamp(0.6rem, 1.6vw, 1.15rem);
  border-top: 1px solid rgba(232, 192, 100, 0.24);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(120, 28, 18, 0.24));
}
.ar-back { padding: 0.3rem 1.1rem; font-size: clamp(0.6rem, 1.2vh, 0.72rem); }
.ar-back:disabled { opacity: 0.35; cursor: not-allowed; }
.ar-message { margin: 0; min-height: 1em; color: var(--c-text-dim); font-size: clamp(0.58rem, 1.2vh, 0.72rem); }
.ar-message.is-error { color: #ff9a8a; }
.ar-fight-quota {
  width: fit-content;
  margin: 0 auto clamp(.25rem, .8vh, .55rem);
  padding: .38em .85em;
  border: 1px solid rgba(98, 208, 157, .48);
  background: rgba(17, 62, 46, .32);
  color: #9bf0c3;
  font-size: clamp(.58rem, 1.1vh, .72rem);
  letter-spacing: .035em;
}
.ar-fight-quota.is-empty { border-color: rgba(255, 112, 93, .55); background: rgba(92, 25, 26, .34); color: #ffb0a1; }
.ar-fight-quota__countdown { margin-left:.15rem; color:#ffe39a; font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:.06em; }
.ar-dot { padding: 0 0.35em; opacity: 0.55; }

/* ---- rakip kartlari (uc kart yan yana) ---------------------- */

.ar-select__hint {
  margin: 0 0 0.5rem;
  color: var(--c-text-dim);
  font-size: clamp(0.58rem, 1.25vh, 0.72rem);
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}
.ar-select__loading {
  margin: clamp(1rem, 8vh, 4rem) auto;
  color: var(--c-gold-soft);
  font: 700 clamp(0.65rem, 1.5vh, 0.82rem) var(--font-display);
  letter-spacing: 0.08em;
  text-align: center;
  animation: ar-opponent-loading 0.85s ease-in-out infinite alternate;
}
@keyframes ar-opponent-loading {
  from { opacity: 0.45; }
  to { opacity: 1; text-shadow: 0 0 0.75rem rgba(232, 192, 100, 0.45); }
}

.ar-opponent-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.4rem, 1.2vw, 0.9rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ar-opponent {
  display: grid;
  justify-items: center;
  gap: 0.22rem;
  height: 100%;
  padding: clamp(0.5rem, 1.4vh, 0.85rem) clamp(0.4rem, 1vw, 0.7rem);
  border: 1px solid rgba(232, 192, 100, 0.3);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(28, 14, 14, 0.94), rgba(9, 5, 7, 0.95));
  text-align: center;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.ar-opponent:hover { border-color: rgba(255, 170, 90, 0.6); transform: translateY(-2px); }
.ar-opponent--tier2 { border-color: rgba(200, 200, 210, 0.35); }
.ar-opponent--tier3 {
  border-color: rgba(255, 190, 90, 0.5);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 180, 70, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(32, 18, 12, 0.95), rgba(10, 6, 7, 0.96));
}
.ar-opponent__art {
  position: relative;
  width: clamp(4rem, 12vh, 6.5rem);
  height: clamp(4rem, 12vh, 6.5rem);
  overflow: hidden;
  border: 1px solid rgba(232, 192, 100, 0.3);
  border-radius: 4px;
  background: linear-gradient(180deg, #171227, #060309);
}
.ar-opponent__glow {
  position: absolute;
  inset: auto 12% 6%;
  height: 26%;
  border-radius: 50%;
  filter: blur(7px);
  background: radial-gradient(ellipse, rgba(190, 140, 80, 0.55), transparent 70%);
}
.ar-opponent--tier2 .ar-opponent__glow { background: radial-gradient(ellipse, rgba(200, 210, 225, 0.5), transparent 70%); }
.ar-opponent--tier3 .ar-opponent__glow { background: radial-gradient(ellipse, rgba(255, 190, 90, 0.6), transparent 70%); }
.ar-opponent__art img {
  position: absolute;
  inset: 4%;
  width: 92%;
  height: 92%;
  object-fit: contain;
}
.ar-opponent__name {
  margin: 0.15rem 0 0;
  color: var(--c-gold-bright);
  font-family: var(--font-display);
  font-size: clamp(0.66rem, 1.5vh, 0.86rem);
  letter-spacing: 0.07em;
}
.ar-opponent__title {
  margin: 0;
  color: var(--c-text-dim);
  font-size: clamp(0.48rem, 1.05vh, 0.6rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ar-opponent__meta {
  margin: 0.15rem 0 0.1rem;
  color: var(--c-text-dim);
  font-size: clamp(0.5rem, 1.1vh, 0.64rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ar-opponent__meta strong { color: var(--c-gold-bright); font-family: var(--font-mono); }
.ar-opponent__power { color: var(--c-fire) !important; }
.ar-opponent__stats, .ar-fighter__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.1rem 0.7rem;
  margin: 0;
  font-size: clamp(0.5rem, 1.1vh, 0.63rem);
}
.ar-stat { display: flex; gap: 0.3rem; }
.ar-stat dt { color: var(--c-text-dim); }
.ar-stat dd { margin: 0; color: var(--c-text); font-family: var(--font-mono); }
.ar-opponent__reward {
  margin: 0.25rem 0 0.1rem;
  color: var(--c-text-dim);
  font-size: clamp(0.48rem, 1.05vh, 0.6rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ar-opponent__reward strong { color: var(--c-gold-bright); font-family: var(--font-mono); }
.ar-opponent__fight {
  width: 100%;
  min-height: 2.3rem;
  margin-top: auto;
  padding: 0.4rem 0.8rem;
  border-color: rgba(255, 150, 70, 0.6);
  background: linear-gradient(180deg, rgba(150, 34, 26, 0.9), rgba(90, 16, 20, 0.92));
  color: #ffe9c4;
  font-size: clamp(0.56rem, 1.2vh, 0.72rem);
}
.ar-opponent__fight:hover:not(:disabled) { box-shadow: 0 0 20px rgba(255, 130, 50, 0.42); }
.ar-opponent__fight:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- arena savas alani -------------------------------------- */

.ar-battle { position: relative; display: grid; gap: clamp(0.4rem, 1.1vh, 0.75rem); }
.ar-arena {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(0.4rem, 1.6vw, 1.2rem);
}
.ar-vs { display: grid; justify-items: center; gap: 0.4rem; padding-top: clamp(1rem, 4vh, 2.4rem); }
.ar-vs__mark {
  color: var(--c-fire);
  font-family: var(--font-display);
  font-size: clamp(1rem, 3vh, 1.7rem);
  letter-spacing: 0.1em;
  text-shadow: 0 0 16px rgba(255, 120, 40, 0.6);
}
.ar-vs__turn {
  color: var(--c-gold);
  font-size: clamp(0.5rem, 1.15vh, 0.64rem);
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}
.ar-battle.state-enemy-turn .ar-vs__turn { color: #ff9a8a; }
.ar-battle.state-victory .ar-vs__turn { color: #b8ff9a; }

.ar-fighter { display: grid; gap: 0.3rem; min-width: 0; }
.ar-fighter__head { text-align: center; }
.ar-fighter__name {
  margin: 0;
  overflow: hidden;
  color: var(--c-gold-bright);
  font-family: var(--font-display);
  font-size: clamp(0.68rem, 1.6vh, 0.92rem);
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ar-fighter__meta {
  margin: 0.05rem 0 0;
  color: var(--c-text-dim);
  font-size: clamp(0.5rem, 1.1vh, 0.63rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ar-fighter__meta strong { color: var(--c-gold-bright); font-family: var(--font-mono); }
.ar-fighter__stage {
  position: relative;
  aspect-ratio: 1;
  width: min(100%, clamp(7rem, 26vh, 15rem));
  max-height: clamp(7rem, 26vh, 15rem);
  margin: 0 auto;
  border: 1px solid rgba(232, 192, 100, 0.3);
  border-radius: 5px;
  background:
    radial-gradient(ellipse at 50% 78%, rgba(255, 140, 60, 0.18), transparent 60%),
    linear-gradient(180deg, #16101f 0%, #0a0610 55%, #040206 100%);
  box-shadow: inset 0 -1.6rem 1.8rem rgba(0, 0, 0, 0.72);
}
.ar-fighter__glow {
  position: absolute;
  inset: auto 14% 4%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 140, 60, 0.4), transparent 70%);
  filter: blur(6px);
}
.ar-fighter__art {
  position: absolute;
  /* Kutu: kenarlardan %3 iceride, %94 x %94. Replaced element oldugu
     icin olculer ACIK yazilir (width:auto intrinsic boyutu alirdi).
     contain + center => gorsel kutunun ICINDE, ezilmeden, TAM ORTALI. */
  inset: 3%;
  width: 94%;
  height: 94%;
  object-fit: contain;
  object-position: center center;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.7));
  transition: transform var(--t-fast) ease-out, filter var(--t-fast) ease-out;
}
.ar-fighter--enemy .ar-fighter__art { transform: scaleX(-1); }
/* Arena portreleri saldiri sirasinda yon degistirmez. Hasar sarsintisi
   sahne katmaninda kalir; boylece rakip gorseli sabit yone bakar. */
.ar-fighter.is-striking .ar-fighter__art,
.ar-fighter--enemy.is-striking .ar-fighter__art { animation: none; }
.ar-fighter.is-hurt .ar-fighter__stage { animation: dgShake 420ms ease-out; }
.ar-fighter.is-hurt .ar-fighter__art { filter: drop-shadow(0 0 12px rgba(255, 60, 40, 0.9)) brightness(1.5) saturate(0.6); }

.ar-floaters { position: absolute; inset: 0; }
.ar-floater {
  position: absolute;
  top: 26%;
  left: 50%;
  color: #ffd9a0;
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 2.4vh, 1.4rem);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
  transform: translateX(-50%);
  animation: dgFloat 900ms ease-out forwards;
  white-space: nowrap;
}
.ar-floater.is-critical { color: #ff8a4a; font-size: clamp(1rem, 2.8vh, 1.7rem); }
.ar-floater.is-dodge { color: #8fd4ff; font-size: clamp(0.8rem, 2vh, 1.15rem); }

.ar-hp { display: grid; gap: 0.15rem; }
.ar-hp__bar {
  position: relative;
  height: clamp(0.6rem, 1.5vh, 0.85rem);
  overflow: hidden;
  border: 1px solid rgba(232, 192, 100, 0.42);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.66);
}
.ar-hp__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #6b1220, #c62b2b 55%, #ff7a4a);
  box-shadow: 0 0 12px rgba(220, 60, 40, 0.55);
  transition: width 420ms cubic-bezier(0.3, 0.8, 0.4, 1);
}
.ar-fighter--player .ar-hp__fill {
  background: linear-gradient(90deg, #2f6b28, #4fae3c 55%, #9ae86a);
  box-shadow: 0 0 12px rgba(110, 210, 90, 0.5);
}
.ar-hp__value {
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: clamp(0.52rem, 1.15vh, 0.68rem);
  text-align: center;
}

/* .ar-controls duzeni .dg-controls ile ORTAKTIR (bkz. yukarisi). */

/* Savas kaydi ARTIK ORTAK bilesendir - bkz. bolum 21 (.combat-log). */

.ar-result {
  position: absolute;
  inset: auto 0 0;
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  padding: clamp(0.7rem, 2vh, 1.2rem);
  border-top: 2px solid transparent;
  background: linear-gradient(180deg, rgba(6, 3, 6, 0.9), rgba(6, 3, 6, 0.99));
  text-align: center;
  animation: dgResultIn var(--t-base) ease-out;
}
.ar-result.is-victory {
  border-top-color: rgba(255, 200, 100, 0.6);
  box-shadow: inset 0 26px 48px rgba(200, 140, 40, 0.16);
}
.ar-result.is-defeat {
  border-top-color: rgba(200, 70, 60, 0.6);
  box-shadow: inset 0 26px 48px rgba(160, 30, 30, 0.18);
}
.ar-result__title {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.6vh, 1.5rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.ar-result.is-victory .ar-result__title {
  color: #ffd88a;
  text-shadow: 0 0 20px rgba(255, 200, 100, 0.55);
}
.ar-result.is-defeat .ar-result__title { color: #ff8a7a; }
.ar-result__note { margin: 0; color: var(--c-text-dim); font-size: clamp(0.58rem, 1.25vh, 0.72rem); }
.ar-result__action { margin-top: 0.4rem; min-height: 2.4rem; padding: 0.45rem 1.8rem; }
.ar-reward { margin: 0; color: var(--c-text-dim); font-size: clamp(0.6rem, 1.35vh, 0.78rem); letter-spacing: 0.1em; text-transform: uppercase; }
.ar-reward__value { color: var(--c-gold-bright); font-family: var(--font-mono); font-size: 1.15em; }

/* ---- arena responsive --------------------------------------- */

@media (max-height: 34rem) {
  .ar-fighter__stage { max-height: clamp(5rem, 20vh, 8rem); width: min(100%, clamp(5rem, 20vh, 8rem)); }
  .ar-vs { padding-top: clamp(0.5rem, 2vh, 1.2rem); }
  .ar-log { min-height: 2.4rem; }
  .ar-opponent__art { width: clamp(3rem, 9vh, 4.4rem); height: clamp(3rem, 9vh, 4.4rem); }
}

@media (max-width: 52rem) {
  .ar-arena { gap: 0.3rem; }
  .ar-vs__mark { font-size: clamp(0.8rem, 2.4vh, 1.2rem); }
}

@media (max-width: 40rem) {
  .ar-opponent-list { grid-template-columns: minmax(0, 1fr); }
  .ar-header { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.35rem; }
}

/* -------------------------------------------------------------
   17. TUCCAR PANELI YERLESIMI
   -------------------------------------------------------------
   Tuccar ekrani ARTIK ortak bilesendir (ui/merchantShop.js):
   ust vitrin, orta islem sepeti, alt gercek envanter. Panel govdesi
   tek kolondur ve ic bolumler kendi icinde kayar.
   ------------------------------------------------------------- */

.merchant-panel.is-shop,
.blacksmith-panel.is-view-merchant { width: min(96vw, 46rem); }

.merchant-panel.is-shop .merchant-panel__body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(0.3rem, 1vh, 0.6rem);
  min-height: 0;
  overflow: hidden;
}

.merchant-panel.is-shop .merchant-tabs { flex: none; }

/* =============================================================
   18. GENEL SIRALAMA (IRK PUANI)
   -------------------------------------------------------------
   Kasaba uzerinde acilan katman. Siralama kriteri IRK PUANI'dir;
   oyuncunun kendi satiri altin cerceve + parlama + "SEN" rozeti
   ile isaretlenir.
   ============================================================= */

.ranking-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: clamp(0.35rem, 1.6vh, 1.1rem);
  background: rgba(3, 1, 5, 0.84);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--t-base) ease-out;
}
.ranking-overlay.is-visible { opacity: 1; }
.ranking-overlay.is-visible .ranking-panel { transform: translateY(0) scale(1); }

.ranking-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(96vw, 62rem);
  max-height: 100%;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 7px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 190, 90, 0.14), transparent 58%),
    linear-gradient(180deg, rgba(16, 12, 22, 0.99), rgba(6, 4, 9, 0.995)) padding-box,
    linear-gradient(180deg, #ffe9a8 0%, #e8c064 22%, #8a6a2c 60%, #3a2810 100%) border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.9), 0 34px 80px rgba(0, 0, 0, 0.85);
  transform: translateY(14px) scale(0.985);
  transition: transform var(--t-base) cubic-bezier(0.2, 0.9, 0.3, 1);
}

.rk-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.45rem, 1.2vw, .9rem);
  padding: clamp(0.5rem, 1.4vh, 0.9rem) clamp(0.7rem, 1.8vw, 1.3rem);
  border-bottom: 1px solid rgba(232, 192, 100, 0.26);
  background: linear-gradient(180deg, rgba(90, 60, 18, 0.36), rgba(0, 0, 0, 0.2));
}
.ranking-panel.has-hourly-rewards .rk-header {
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 1.15fr) auto;
}
.rk-header__copy { min-width: 0; }
.rk-header__rewards { min-width: 0; }
.rk-title {
  margin: 0;
  color: var(--c-gold-bright);
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 2.1vh, 1.25rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.rk-subtitle {
  margin: 0.18rem 0 0;
  color: var(--c-text-dim);
  font-size: clamp(0.5rem, 1.15vh, 0.64rem);
  letter-spacing: 0.06em;
}
.rk-close {
  position: absolute;
  top: clamp(0.4rem, 1.2vh, 0.8rem);
  right: clamp(0.5rem, 1.4vw, 1rem);
  display: grid;
  place-items: center;
  width: clamp(1.7rem, 3.4vh, 2.2rem);
  height: clamp(1.7rem, 3.4vh, 2.2rem);
  border: 1px solid rgba(232, 192, 100, 0.4);
  border-radius: 3px;
  background: rgba(90, 16, 26, 0.6);
  color: var(--c-gold-bright);
  cursor: pointer;
}
.rk-close:hover { border-color: var(--c-gold-bright); background: rgba(156, 28, 44, 0.72); }
.rk-header > .rk-close { position: static; }

.rk-body {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
.rk-loading { grid-column: 1 / -1; align-self: center; color: var(--c-text-dim); font-size: 0.7rem; text-align: center; }

.rk-section {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: clamp(0.55rem, 1.5vh, 0.9rem) clamp(0.5rem, 1.2vw, 0.9rem);
}
.rk-section--clans {
  border-left: 1px solid rgba(232, 192, 100, 0.3);
}
.rk-section-title {
  margin: 0 0 0.35rem;
  color: var(--c-gold-bright);
  font-family: var(--font-display);
  font-size: clamp(0.58rem, 1.3vh, 0.72rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.rk-section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .45rem;
  margin-bottom: .35rem;
}
.rk-section-heading .rk-section-title { margin-bottom: 0; }
.rk-player-heading { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; min-width: 0; }
.rk-countdown {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  padding: .15rem .35rem;
  border: 1px solid rgba(232, 192, 100, .45);
  background: rgba(232, 192, 100, .07);
  color: var(--c-gold-bright);
  font-size: .6rem;
  white-space: nowrap;
}
.rk-countdown__value { font-variant-numeric: tabular-nums; font-weight: 700; }
.rk-tabs {
  display: inline-flex;
  flex: none;
  gap: .12rem;
  padding: .12rem;
  border: 1px solid rgba(232, 192, 100, .25);
  border-radius: 3px;
  background: rgba(4, 8, 6, .58);
}
.rk-tab {
  min-height: 1.45rem;
  padding: .18rem .42rem;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--c-text-dim);
  font-family: var(--font-display);
  font-size: .48rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rk-tab:hover { color: var(--c-gold-bright); }
.rk-tab.is-active {
  background: linear-gradient(#5c4b25, #2c2413);
  color: #ffe8a2;
  box-shadow: inset 0 0 0 1px rgba(255, 221, 132, .32);
}
.rk-player-content { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.rk-hourly-info {
  display: grid;
  grid-template-columns: minmax(6.2rem, .72fr) repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  align-items: center;
  gap: .12rem .4rem;
  margin: 0;
  padding: .38rem .48rem;
  border: 1px solid rgba(232, 192, 100, .2);
  background: rgba(9, 15, 11, .72);
  color: var(--c-text-dim);
  font-size: .47rem;
}
.rk-hourly-info__title { color: var(--c-gold-bright); letter-spacing: .08em; text-transform: uppercase; }
.rk-hourly-info__time { grid-column: 1; grid-row: 2; text-align: left; }
.rk-hourly-reward { grid-row: 1 / 3; align-self: stretch; display: flex; align-items: center; min-width: 0; line-height: 1.28; }
.rk-hourly-reward.is-rank1 { color: #75b9ff; }
.rk-hourly-reward.is-rank2 { color: #83df8c; }
.rk-hourly-reward.is-rank3 { color: #ed817b; }
.rk-empty {
  margin: 0;
  padding: 0.65rem;
  color: var(--c-text-dim);
  font-size: 0.62rem;
  text-align: center;
}

.rk-table { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; }
.rk-list { min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(232, 192, 100, .45) rgba(0, 0, 0, .2); }

.rk-row {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 2.25fr) minmax(0, .86fr) minmax(0, 1fr) 3.6rem 5.4rem;
  align-items: center;
  gap: clamp(0.2rem, 0.8vw, 0.6rem);
  padding: 0.3rem 0.45rem;
  border-bottom: 1px solid rgba(232, 192, 100, 0.12);
  font-size: clamp(0.52rem, 1.2vh, 0.68rem);
}
.rk-row--head {
  border-bottom: 1px solid rgba(232, 192, 100, 0.35);
  color: var(--c-gold-dim);
  font-family: var(--font-display);
  font-size: clamp(0.46rem, 1.05vh, 0.58rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rk-row--clan {
  grid-template-columns: 1.9rem minmax(0, 2.9fr) minmax(0, .9fr) 3.8rem 4.2rem 6.2rem;
  column-gap: clamp(.12rem, .35vw, .28rem);
}
.rk-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-cell--rank { color: var(--c-gold); font-family: var(--font-mono); }
.rk-cell--points { color: var(--c-gold-bright); font-family: var(--font-mono); text-align: right; }
.rk-cell--level { font-family: var(--font-mono); text-align: right; }
.rk-cell--members { font-family: var(--font-mono); text-align: right; }
.rk-cell--name { display: flex; align-items: center; gap: 0.25rem; overflow: visible; }
.rk-name { overflow: visible; }
.rk-name-button { min-width: 0; max-width: 100%; }
.rk-name-button .faction-name { position: relative; }

/* İlk 6 oyuncunun derecesi, ad satırında ırk armasının solundadır. */
.rank-badge {
  --rank-badge-size: 20px;
  display: inline-block;
  flex: 0 0 auto;
  width: var(--rank-badge-size);
  height: var(--rank-badge-size);
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .9)) drop-shadow(0 0 4px rgba(255, 196, 69, .28));
  vertical-align: middle;
  pointer-events: none;
  user-select: none;
}
.rk-name-button .rank-badge-slot {
  position: absolute;
  top: 50%;
  left: -1.45rem;
  display: inline-grid;
  width: 1.1rem;
  place-items: center;
  transform: translateY(-50%);
}
.rank-badge--ranking.rank-badge--rank1 { --rank-badge-size: 22.4px; }
.rank-badge--ranking.rank-badge--rank2 { --rank-badge-size: 20.8px; }
.rank-badge--ranking.rank-badge--rank3 { --rank-badge-size: 19.2px; }
.rank-badge--ranking.rank-badge--rank4 { --rank-badge-size: 17.6px; }
.rank-badge--ranking.rank-badge--rank5 { --rank-badge-size: 16px; }
.rank-badge--ranking.rank-badge--rank6 { --rank-badge-size: 14.4px; }
.rank-badge + .faction-badge { margin-left: -.08em; }

.rk-row.is-top1 .rk-cell--rank { color: #ffe08a; }
.rk-row.is-top2 .rk-cell--rank { color: #dfe3ea; }
.rk-row.is-top3 .rk-cell--rank { color: #e2a86a; }

/* Oyuncunun kendi satiri */
.rk-row.is-you {
  border: 1px solid var(--c-gold);
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(232, 192, 100, 0.16), rgba(232, 192, 100, 0.04));
  box-shadow: 0 0 0.9rem rgba(255, 190, 90, 0.35);
}
.rk-you {
  flex: none;
  padding: 0.06rem 0.3rem;
  border: 1px solid var(--c-gold);
  border-radius: 2px;
  background: rgba(232, 192, 100, 0.16);
  color: var(--c-gold-bright);
  font-family: var(--font-display);
  font-size: 0.46rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rk-yourrank {
  margin: 0.5rem 0 0;
  color: var(--c-text-dim);
  font-size: clamp(0.5rem, 1.15vh, 0.64rem);
  letter-spacing: 0.08em;
  text-align: right;
  text-transform: uppercase;
}
.rk-yourrank strong { color: var(--c-gold-bright); font-family: var(--font-mono); }

.rk-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: clamp(0.4rem, 1.2vh, 0.75rem) clamp(0.55rem, 1.6vw, 1.15rem);
  border-top: 1px solid rgba(232, 192, 100, 0.22);
}
.rk-note { margin: 0; color: var(--c-text-dim); font-size: 0.52rem; text-align: right; }

@media (max-width: 48rem) {
  .rk-row { grid-template-columns: 2rem minmax(0, 1.9fr) minmax(0, .85fr) 2.6rem 4.4rem; }
  .rk-cell--job { display: none; }
  .rk-row--clan { grid-template-columns: 1.7rem minmax(0, 2.35fr) minmax(0, .8fr) 2.8rem 4.4rem; }
  .rk-row--clan .rk-cell--members { display: none; }
  .rk-section-heading { align-items: flex-start; flex-direction: column; }
  .ranking-panel.has-hourly-rewards .rk-header { grid-template-columns: minmax(0, 1fr) auto; }
  .rk-header__rewards { grid-column: 1 / -1; }
}

/* =============================================================
   19. CARKIFELEK
   ============================================================= */

.wheel-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: clamp(0.35rem, 1.6vh, 1.1rem);
  background: rgba(3, 1, 5, 0.86);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--t-base) ease-out;
}
.wheel-overlay.is-visible { opacity: 1; }
.wheel-overlay.is-visible .wheel-panel { transform: translateY(0) scale(1); }

.wheel-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(96vw, 58rem);
  max-height: 100%;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 7px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(170, 90, 240, 0.18), transparent 58%),
    linear-gradient(180deg, rgba(19, 11, 26, 0.99), rgba(6, 4, 10, 0.995)) padding-box,
    linear-gradient(180deg, #ffe9a8 0%, #e8c064 20%, #6c3b8a 62%, #2a1236 100%) border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.9), 0 34px 80px rgba(0, 0, 0, 0.85);
  transform: translateY(14px) scale(0.985);
  transition: transform var(--t-base) cubic-bezier(0.2, 0.9, 0.3, 1);
}

.wh-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.6rem;
  padding: clamp(0.45rem, 1.3vh, 0.85rem) clamp(0.6rem, 1.6vw, 1.15rem);
  border-bottom: 1px solid rgba(232, 192, 100, 0.26);
  background: linear-gradient(180deg, rgba(88, 34, 120, 0.42), rgba(0, 0, 0, 0.2));
}
.wh-title {
  margin: 0;
  color: var(--c-gold-bright);
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 2.1vh, 1.25rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.wh-gold {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.28rem 0.6rem;
  border: 1px solid rgba(232, 192, 100, 0.3);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.5);
  font-size: clamp(0.52rem, 1.15vh, 0.66rem);
}
.wh-gold__label { color: var(--c-text-dim); letter-spacing: 0.12em; text-transform: uppercase; }
.wh-gold__value { color: var(--c-gold-bright); font-family: var(--font-mono); }
.wh-close {
  display: grid;
  place-items: center;
  width: clamp(1.7rem, 3.4vh, 2.2rem);
  height: clamp(1.7rem, 3.4vh, 2.2rem);
  border: 1px solid rgba(232, 192, 100, 0.4);
  border-radius: 3px;
  background: rgba(90, 16, 26, 0.6);
  color: var(--c-gold-bright);
  cursor: pointer;
}
.wh-close:disabled { opacity: 0.35; cursor: not-allowed; }

.wh-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(10.5rem, 32%, 17rem);
  gap: clamp(0.5rem, 1.6vw, 1.1rem);
  align-items: start;
  min-height: 0;
  overflow: auto;
  padding: clamp(0.45rem, 1.3vh, 0.85rem) clamp(0.6rem, 1.6vw, 1.15rem);
}

.wh-stage { display: grid; justify-items: center; gap: clamp(0.3rem, 1vh, 0.65rem); min-width: 0; }
.wh-hint { margin: 0; color: var(--c-text-dim); font-size: clamp(0.5rem, 1.15vh, 0.64rem); text-align: center; }

.wh-wheel {
  position: relative;
  width: min(100%, clamp(9rem, 34vh, 17rem));
  aspect-ratio: 1;
}
.wh-wheel__pointer {
  position: absolute;
  top: -0.55rem;
  left: 50%;
  z-index: 3;
  width: 1.1rem;
  height: 1.2rem;
  transform: translateX(-50%);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  background: linear-gradient(180deg, #ffe9a8, #c9902c);
  filter: drop-shadow(0 0.2rem 0.3rem rgba(0, 0, 0, 0.6));
}
.wh-wheel__ring {
  position: absolute;
  inset: -3%;
  z-index: 2;
  border: 0.3rem solid transparent;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe9a8, #8a6a2c) border-box;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.wh-wheel__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    rgba(232, 192, 100, 0.92) 0deg 45deg,
    rgba(122, 58, 158, 0.92) 45deg 90deg);
  box-shadow: inset 0 0 1.4rem rgba(0, 0, 0, 0.6), 0 0 1.6rem rgba(150, 74, 210, 0.35);
  transform: rotate(0deg);
}
.wh-wheel__hub {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 18%;
  height: 18%;
  transform: translate(-50%, -50%);
  border: 2px solid #8a6a2c;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fff3cf, #a97b25);
}

/* Segment etiketleri: merkezden disari dogru yerlestirilir. */
.wh-seg {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.24rem;
  width: 46%;
  height: 1.5em;
  margin-top: -0.75em;
  padding-right: 0.55rem;
  /* Dilim yonu: 0deg = saat 12. Serit disari dogru uzanir. */
  transform: rotate(calc(var(--wh-angle) - 90deg));
  transform-origin: 0 50%;
  color: #241228;
  font-family: var(--font-display);
  font-size: clamp(0.4rem, 1.15vh, 0.6rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wh-seg--random_item { color: #f7e6bd; }
.wh-seg__icon {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff0b6, #b07a20);
}
.wh-seg--random_item .wh-seg__icon {
  border-radius: 2px;
  background: linear-gradient(180deg, #d9c7f2, #6f3f96);
}

.wh-spin { min-width: clamp(7rem, 22vw, 11rem); }
.wh-spin:disabled { opacity: 0.5; cursor: not-allowed; }
.wh-message { margin: 0; min-height: 1em; color: #ff9f9f; font-size: clamp(0.5rem, 1.15vh, 0.64rem); text-align: center; }

/* Odul kutusu panelin ortasinda, hafif karartma uzerinde acilir. */
.wh-result-host {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(4, 2, 8, 0.62);
  pointer-events: auto;
}
.wh-result-host:empty { display: none; }

.wh-result {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  min-width: min(80vw, 18rem);
  padding: clamp(0.6rem, 1.8vh, 1rem) clamp(0.8rem, 2.2vw, 1.4rem);
  border: 1px solid var(--c-gold);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(28, 16, 36, 0.98), rgba(8, 5, 12, 0.98));
  box-shadow: 0 0 2rem rgba(190, 130, 255, 0.4), 0 1rem 2.4rem rgba(0, 0, 0, 0.7);
  pointer-events: auto;
  text-align: center;
}
.wh-result__title {
  color: var(--c-gold-bright);
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 1.9vh, 1rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.wh-result__line { margin: 0; font-size: clamp(0.6rem, 1.4vh, 0.8rem); }
.wh-result__value { color: var(--c-gold-bright); font-family: var(--font-mono); }
.wh-result__item { display: grid; justify-items: center; gap: 0.25rem; }
.wh-result__icon { width: clamp(2rem, 6vh, 3.2rem); height: auto; image-rendering: auto; }
.wh-result__name { color: var(--c-gold-bright); font-size: clamp(0.58rem, 1.4vh, 0.78rem); }

@media (max-width: 62rem) and (min-height: 34rem) {
  .wh-body { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================
   20. IRK PUANI GOSTERGELERI
   ============================================================= */

.town-resource--race dd,
.cp-tile--race .cp-tile__value { color: var(--c-gold-bright); }

.cp-tile--race { box-shadow: inset 0 0 0.8rem rgba(255, 190, 90, 0.14); }

.ar-race .ar-gold__value { color: var(--c-gold-bright); }
.ar-opponent__rp { color: var(--c-gold-bright); font-family: var(--font-mono); }
.ar-reward.is-gain .ar-reward__value { color: #9ff0b0; }
.ar-reward.is-loss .ar-reward__value { color: #ff9f9f; }
.ar-reward__total {
  margin: 0.1rem 0 0;
  color: var(--c-text-dim);
  font-size: clamp(0.52rem, 1.2vh, 0.66rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ar-reward__points { color: var(--c-gold-bright); font-family: var(--font-mono); }

/* =============================================================
   21. ORTAK SAVAS KAYDI (COMBAT LOG)
   -------------------------------------------------------------
   Zindan ve Arena AYNI kutuyu kullanir. Yukseklik SABITTIR:
   savas basinda tam boyuttadir, yeni satirlar geldikce buyumez,
   paneli asagi itmez; icerik kutunun icinde kayar.
   ============================================================= */

.combat-log {
  display: block;
  /* SABIT yukseklik - masaustunde ~130-160px. */
  height: clamp(5.4rem, 17vh, 9.4rem);
  min-height: clamp(5.4rem, 17vh, 9.4rem);
  max-height: clamp(5.4rem, 17vh, 9.4rem);
  margin: 0;
  padding: clamp(0.35rem, 1vh, 0.55rem) clamp(0.5rem, 1.2vw, 0.8rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(232, 192, 100, 0.2);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.42);
  list-style: none;
  font-size: clamp(0.52rem, 1.15vh, 0.68rem);
  scrollbar-width: thin;
}

.combat-log__line {
  margin-bottom: 0.08rem;
  color: var(--c-text-dim);
  line-height: 1.34;
}
.combat-log__line.is-player { color: var(--c-text); }
.combat-log__damage { color: #ffb98a; font-family: var(--font-mono); }
.combat-log__healing { color: #91f59b; font-family: var(--font-mono); }
.combat-log__line.is-critical .combat-log__damage { color: #ff8a4a; }
.combat-log__line.is-dodge { color: #8fd4ff; }

/* Alcak ekranlarda (Android yatay) kutu kucuk ama YINE SABIT kalir. */
@media (max-height: 34rem) {
  .combat-log {
    height: 4.2rem;
    min-height: 4.2rem;
    max-height: 4.2rem;
  }
}

/* --- Carkifelek cevirme ucreti ------------------------------- */
.wh-cost {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin: 0;
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(232, 192, 100, 0.32);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.42);
  color: var(--c-text-dim);
  font-size: clamp(0.5rem, 1.15vh, 0.64rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.wh-cost__value { color: var(--c-gold-bright); font-family: var(--font-mono); }
.wh-cost.is-blocked {
  border-color: rgba(214, 92, 92, 0.6);
  color: #ff9f9f;
}
.wh-cost.is-blocked .wh-cost__value { color: #ff9f9f; }

/* --- Stat sifirlama butonu (Character Panel alt) -------------- */
.cp-footer { align-items: center; }
.cp-reset {
  display: inline-flex;
  align-items: baseline;
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  gap: 0.35rem;
  padding-inline: clamp(0.8rem, 2vw, 1.45rem);
  font-size: clamp(0.68rem, 1.15vw, 0.86rem);
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.cp-reset__cost {
  color: var(--c-gold-bright);
  font-family: var(--font-mono);
  font-size: 0.9em;
}
.cp-reset:disabled { opacity: 0.4; cursor: not-allowed; }
.cp-reset.is-blocked { border-color: rgba(214, 92, 92, 0.6); }
.cp-reset.is-blocked .cp-reset__cost { color: #ff9f9f; }

/* =============================================================
   22. DEMIRCI - YENI FORGE YERLESIMI (+10 SISTEMI)
   -------------------------------------------------------------
   SOL: ekipman slotu | ORTA: 3x3 materyal | SAG: sonuc slotu
   ============================================================= */

/* Materyal hucreleri artik tiklanabilir butondur. */
.forge-cell {
  padding: 0;
  cursor: pointer;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.forge-cell:hover:not(:disabled),
.forge-cell:focus-visible {
  border-color: rgba(232, 192, 100, 0.6);
  outline: none;
}
.forge-cell.is-filled {
  border-color: var(--c-gold);
  box-shadow: inset 0 0 12px rgba(255, 150, 70, 0.28);
}
/* Oyuncunun sectigi hedef hucre */
.forge-cell.is-target {
  border-color: var(--c-gold-bright);
  box-shadow: 0 0 0 2px rgba(232, 192, 100, 0.35), inset 0 0 14px rgba(255, 170, 80, 0.3);
}
.forge-cell:disabled { cursor: not-allowed; }

.forge-chamber { position: relative; display: grid; justify-items: center; gap: 0.3rem; }
.forge-chamber .forge-side__title { margin: 0; }

/* Sonuc slotu bos iken sonuk, doluyken altin cerceveli. */
.forge-slot--result.is-empty { opacity: 0.6; }
.forge-slot--result.is-filled {
  border-color: var(--c-gold-bright);
  box-shadow: 0 0 18px rgba(255, 190, 90, 0.5);
}

/* Basari / basarisizlik flash'i (hafif, kisa) */
.forge-stage.is-flash-success { animation: forgeFlashSuccess 0.9s ease-out; }
.forge-stage.is-flash-failed { animation: forgeFlashFailed 0.9s ease-out; }

@keyframes forgeFlashSuccess {
  0% { filter: brightness(1); }
  25% { filter: brightness(1.5) saturate(1.3); }
  100% { filter: brightness(1); }
}
@keyframes forgeFlashFailed {
  0% { filter: brightness(1); }
  18% { filter: brightness(1.35) sepia(0.5) hue-rotate(-30deg); }
  60% { filter: brightness(0.8) sepia(0.35) hue-rotate(-30deg); }
  100% { filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  .forge-stage.is-flash-success,
  .forge-stage.is-flash-failed { animation: none; }
}

.forge-facts__final { color: var(--c-gold-bright); }

.forge-preview-stats {
  margin-top: 0.3rem;
  padding-top: 0.3rem;
  border-top: 1px solid rgba(232, 192, 100, 0.18);
}
.forge-preview-stats__title {
  margin: 0 0 0.2rem;
  color: var(--c-gold-dim);
  font-family: var(--font-display);
  font-size: clamp(0.46rem, 1.05vh, 0.58rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.forge-preview-stats ul {
  display: grid;
  gap: 0.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(0.5rem, 1.15vh, 0.64rem);
}
.forge-preview-stats strong { color: #9ff0b0; font-family: var(--font-mono); }

.forge-result.is-failed .forge-result__title { color: #ff8a8a; }
.forge-result.is-success .forge-result__title { color: var(--c-gold-bright); }

/* =============================================================
   23. ORTAK TUCCAR EKRANI (UST VITRIN / ORTA SEPET / ALT ENVANTER)
   ============================================================= */

.mc-shop {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: clamp(0.24rem, 0.65vh, 0.46rem);
  min-height: 0;
}

.mc-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.24rem;
}
.mc-section__title {
  margin: 0;
  color: var(--c-gold-dim);
  font-family: var(--font-display);
  font-size: clamp(0.5rem, 1.15vh, 0.64rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mc-section__hint {
  color: var(--c-text-dim);
  font-size: clamp(0.44rem, 1vh, 0.56rem);
}

/* --- hucreler (vitrin + envanter ortak) --- */
.mc-grid,
.mc-vendor__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.12rem, 0.38vw, 0.22rem);
}

.mc-vendor__groups { display: grid; gap: clamp(.28rem, .7vh, .46rem); }
.mc-vendor__group { min-width: 0; }
.mc-vendor__group-title {
  margin: 0 0 .18rem;
  color: #d6bb79;
  font: 700 clamp(.46rem, 1vh, .58rem) var(--font-display);
  letter-spacing: .12em;
}
.mc-vendor__group.is-tier-1 .mc-vendor__group-title { color: #9fc6df; }
.mc-vendor__group.is-tier-2 .mc-vendor__group-title { color: #c59ee8; }

.mc-vendor__grid {
  padding: clamp(0.16rem, 0.42vh, 0.26rem);
  border: 1px solid rgba(232, 192, 100, 0.15);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.32);
}

.mc-cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(232, 192, 100, 0.22);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(22, 11, 16, 0.85), rgba(8, 4, 9, 0.9));
  cursor: pointer;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.mc-cell:hover:not(:disabled),
.mc-cell:focus-visible { border-color: var(--c-gold); outline: none; }
.mc-cell:disabled { cursor: default; }
.mc-cell.is-in-cart {
  border-color: var(--c-gold-bright);
  box-shadow: 0 0 0 1px rgba(232, 192, 100, 0.4), inset 0 0 10px rgba(255, 170, 80, 0.25);
}
.mc-cell--vendor-empty,
.mc-cell--trade-empty {
  border-color: rgba(111, 88, 56, 0.3);
  background: linear-gradient(155deg, rgba(13, 9, 10, 0.94), rgba(5, 4, 6, 0.96));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75);
  cursor: default;
}
.mc-cell--inventory.is-in-cart .mc-cell__icon {
  opacity: 0.52;
}
.mc-cell__icon { width: 86%; height: 86%; object-fit: contain; }
.mc-cell__icon.is-placeholder { opacity: 0.3; }
.mc-cell__dot { width: 0.26rem; height: 0.26rem; border-radius: 50%; background: rgba(232, 192, 100, 0.2); }
.mc-cell__price {
  position: absolute;
  right: 2px;
  bottom: 0;
  color: var(--c-gold);
  font-family: var(--font-mono);
  font-size: clamp(0.4rem, 0.9vh, 0.5rem);
  text-shadow: 0 0 3px #000;
}
.mc-cell__owned,
.mc-cell__level,
.mc-cell__badge {
  position: absolute;
  font-family: var(--font-mono);
  font-size: clamp(0.4rem, 0.9vh, 0.5rem);
  text-shadow: 0 0 3px #000;
}
.mc-cell__owned { top: 1px; right: 3px; color: var(--c-text); }
.mc-cell__level { top: 1px; left: 3px; color: var(--c-fire); }
.mc-cell__badge { top: 1px; left: 3px; color: #9ff0b0; }

/* --- orta: islem sepeti --- */
.mc-transaction {
  padding: clamp(0.25rem, 0.68vh, 0.42rem) clamp(0.28rem, 0.8vw, 0.5rem);
  border: 1px solid rgba(173, 132, 68, 0.58);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(112, 70, 28, 0.12), transparent 26%),
    rgba(4, 4, 7, 0.78);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.78);
}

.mc-modes { display: flex; align-items: stretch; gap: 0.2rem; }
.mc-mode {
  min-width: clamp(3.4rem, 9vw, 5.8rem);
  padding: 0.22rem 0.64rem;
  border: 1px solid rgba(166, 124, 65, 0.46);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, rgba(51, 37, 23, 0.85), rgba(10, 8, 8, 0.9));
  color: var(--c-text-dim);
  font-family: var(--font-display);
  font-size: clamp(0.44rem, 1vh, 0.56rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.mc-mode.is-active {
  border-color: rgba(105, 197, 196, 0.9);
  background: linear-gradient(180deg, rgba(26, 115, 120, 0.58), rgba(8, 29, 32, 0.9));
  color: var(--c-gold-bright);
  box-shadow: inset 0 1px 0 rgba(168, 240, 228, 0.25);
}

.mc-transaction.is-sell .mc-mode.is-active {
  border-color: rgba(231, 159, 76, 0.88);
  background: linear-gradient(180deg, rgba(122, 74, 29, 0.75), rgba(40, 19, 10, 0.95));
}

.mc-cart {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: clamp(0.11rem, 0.32vw, 0.2rem);
  margin: 0;
  padding: clamp(0.15rem, 0.4vh, 0.24rem);
  border: 1px solid rgba(130, 104, 72, 0.5);
  background: rgba(0, 0, 0, 0.72);
}
.mc-cart__empty {
  margin: 0.26rem 0 0;
  color: var(--c-text-dim);
  font-size: clamp(0.48rem, 1.1vh, 0.6rem);
  text-align: center;
}
.mc-cart__row {
  overflow: hidden;
  border-color: rgba(231, 188, 103, 0.82);
  background:
    radial-gradient(circle at 50% 44%, rgba(108, 73, 37, 0.32), transparent 62%),
    linear-gradient(160deg, rgba(23, 16, 12, 0.94), rgba(6, 5, 6, 0.98));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75);
}
.mc-cart__row.is-equipped { border-color: rgba(214, 92, 92, 0.82); }
.mc-cart__row:hover,
.mc-cart__row:focus-visible {
  border-color: var(--c-gold-bright);
  outline: none;
  box-shadow: 0 0 9px rgba(232, 192, 100, 0.28), inset 0 0 0 1px rgba(0, 0, 0, 0.72);
}
.mc-cart__icon { width: 82%; height: 82%; object-fit: contain; }
.mc-cart__name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.mc-cart__equipped {
  margin-left: 0.3rem;
  padding: 0 0.24rem;
  border: 1px solid rgba(214, 92, 92, 0.7);
  border-radius: 2px;
  color: #ff9f9f;
  font-size: 0.86em;
  text-transform: uppercase;
}
.mc-cart__price {
  position: absolute;
  right: 2px;
  bottom: 1px;
  left: 2px;
  overflow: hidden;
  color: var(--c-gold-bright);
  font-family: var(--font-mono);
  font-size: clamp(0.38rem, 0.86vh, 0.48rem);
  text-align: right;
  text-overflow: ellipsis;
  text-shadow: 0 0 4px #000;
  white-space: nowrap;
}

.mc-cart__quantity {
  position: absolute;
  top: 2px;
  right: 3px;
  color: #c9efcb;
  font-family: var(--font-mono);
  font-size: clamp(0.4rem, 0.9vh, 0.52rem);
  text-shadow: 0 0 4px #000;
}

.mc-qty {
  position: absolute;
  z-index: 2;
  right: 2px;
  bottom: 2px;
  left: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.08rem;
  padding: 1px;
  background: rgba(5, 4, 6, 0.88);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) ease;
}
.mc-cart__row:hover .mc-qty,
.mc-cart__row:focus-within .mc-qty {
  opacity: 1;
  pointer-events: auto;
}
.mc-qty__button {
  display: grid;
  place-items: center;
  width: clamp(0.82rem, 1.85vh, 1.1rem);
  height: clamp(0.82rem, 1.85vh, 1.1rem);
  border: 1px solid rgba(232, 192, 100, 0.35);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.5);
  color: var(--c-gold-bright);
  cursor: pointer;
  line-height: 1;
}
.mc-qty__button:hover:not(:disabled) { border-color: var(--c-gold-bright); }
.mc-qty__value {
  min-width: 0.75rem;
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: clamp(0.4rem, 0.9vh, 0.52rem);
  text-align: center;
}

.mc-warning {
  margin: 0.2rem 0 0;
  color: #ff9f9f;
  font-size: clamp(0.46rem, 1.05vh, 0.58rem);
}

.mc-total {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.32rem;
  padding-top: 0.3rem;
  border-top: 1px solid rgba(232, 192, 100, 0.18);
}
.mc-total__label {
  color: var(--c-text-dim);
  font-family: var(--font-display);
  font-size: clamp(0.44rem, 1vh, 0.56rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mc-total__value {
  flex: 1;
  color: var(--c-gold-bright);
  font-family: var(--font-mono);
  font-size: clamp(0.62rem, 1.5vh, 0.86rem);
}
.mc-confirm { padding-inline: clamp(0.6rem, 2vw, 1.2rem); }

.mc-message { margin: 0.2rem 0 0; font-size: clamp(0.46rem, 1.05vh, 0.58rem); }
.mc-message.is-error { color: #ff9f9f; }

/* --- alt: envanter sekmeleri --- */
.mc-tabs { display: flex; flex-wrap: wrap; gap: 0.2rem; }
.mc-tab {
  padding: 0.16rem 0.44rem;
  border: 1px solid rgba(232, 192, 100, 0.26);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.4);
  color: var(--c-text-dim);
  font-size: clamp(0.42rem, 0.95vh, 0.54rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.mc-tab.is-active { border-color: var(--c-gold); color: var(--c-gold-bright); }

.mc-inventory { min-height: 0; overflow-y: auto; }

/* --- ortak tooltip --- */
.it-tooltip {
  position: absolute;
  z-index: 1000;
  display: grid;
  gap: 0.12rem;
  max-width: 15rem;
  padding: 0.42rem 0.55rem;
  border: 1px solid rgba(232, 192, 100, 0.5);
  border-radius: 3px;
  background: rgba(6, 3, 9, 0.97);
  box-shadow: 0 0.6rem 1.4rem rgba(0, 0, 0, 0.6);
  font-size: clamp(0.46rem, 1.05vh, 0.6rem);
  pointer-events: none;
}
.it-tooltip[hidden] { display: none; }
.it-tip__name { font-family: var(--font-display); letter-spacing: 0.06em; }
.it-tip__rarity, .it-tip__type { color: var(--c-text-dim); text-transform: uppercase; font-size: 0.86em; }
.it-tip__desc { color: var(--c-text-dim); }
.it-tip__stats { display: grid; gap: 0.06rem; margin: 0.16rem 0 0; padding: 0; list-style: none; }
.it-tip__stats strong { color: #9ff0b0; font-family: var(--font-mono); }
.it-tip__req { color: var(--c-text-dim); font-size: 0.9em; }
.it-tip__price strong { color: var(--c-gold-bright); font-family: var(--font-mono); }
.it-tip__bonus strong { color: var(--c-gold-bright); }
.it-tip__level strong { color: var(--c-fire); font-family: var(--font-mono); }

/* Dar / alcak ekranlarda sepet ve envanter kendi icinde kayar. */
@media (max-height: 40rem) {
  .mc-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .mc-shop { gap: 0.28rem; }
  .mc-transaction { padding-block: 0.24rem; }
  .mc-cart__empty { margin-top: 0.14rem; }
}
@media (max-width: 52rem) {
  .mc-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .mc-cart { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .mc-section__hint { max-width: 48%; text-align: right; }
}
@media (max-width: 34rem) {
  .mc-cart,
  .mc-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mc-mode { min-width: 0; padding-inline: 0.38rem; }
}

/* Alcak yatay ekranlarda uc bolum de ayni anda kullanilabilir kalsin.
   Slotlar tek siraya iner ve kendi alaninda yatay kayar; sayfa tasmaz. */
@media (max-height: 46rem) {
  .mc-shop {
    grid-template-rows: auto auto auto;
    gap: 0.25rem;
  }
  .mc-vendor__grid {
    grid-template-columns: repeat(5, minmax(2rem, 2.6rem));
    overflow-x: auto;
  }
  .mc-cart,
  .mc-grid {
    grid-template-columns: repeat(20, minmax(2rem, 2.6rem));
    overflow-x: auto;
    overflow-y: hidden;
  }
  .mc-shop .mc-cell {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
  .mc-section__head { margin-bottom: 0.14rem; }
  .mc-transaction { padding-block: 0.2rem; }
  .mc-total { margin-top: 0.16rem; padding-top: 0.18rem; }
  .mc-inventory { overflow: visible; }
}

/* =============================================================
   24. ITEM CLASS / ITEM ADI / ONIZLEME
   ============================================================= */

/* Ad yanindaki +seviye - her ekranda ayni gorunum. */
.item-name__level { color: var(--c-fire); font-family: var(--font-mono); }

/* ITEM CLASS etiketleri (tooltip, detay karti, vitrin rozeti). */
.it-tip__class,
.cp-tip__class,
.shop-tip__class,
.cp-item-class,
.forge-transition__class {
  color: var(--c-gold-dim);
  font-family: var(--font-display);
  font-size: 0.86em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.it-tip__class.is-middle,
.cp-tip__class.is-middle,
.shop-tip__class.is-middle,
.cp-item-class.is-middle { color: #8fd4ff; }
.it-tip__class.is-high,
.cp-tip__class.is-high,
.shop-tip__class.is-high,
.cp-item-class.is-high { color: #c9a2ff; }

/* Vitrin hucresindeki kucuk class rozeti. */
.mc-cell__class {
  position: absolute;
  bottom: 1px;
  left: 3px;
  max-width: 52%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-gold-dim);
  font-family: var(--font-display);
  font-size: clamp(0.34rem, 0.8vh, 0.42rem);
  letter-spacing: 0.06em;
  text-shadow: 0 0 3px #000;
  text-transform: uppercase;
}
.mc-cell__class.is-middle { color: #8fd4ff; }
.mc-cell__class.is-high { color: #c9a2ff; }

/* Forge slot altindaki item adi. */
.forge-slot__name {
  display: block;
  max-width: calc(var(--forge-slot) * 2.2);
  overflow: hidden;
  color: var(--c-text);
  font-size: clamp(0.44rem, 1vh, 0.56rem);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- ON GOSTERIM SONUC SLOTU --------------------------------
   Gercek sonuctan ayirt edilebilsin diye mavi/altin parlama ve
   "ONIZLEME" etiketi tasir; icerik yari saydamdir.
   ------------------------------------------------------------ */
.forge-slot--result.is-preview {
  border-color: #7fc4ff;
  box-shadow: 0 0 14px rgba(120, 190, 255, 0.5), inset 0 0 12px rgba(120, 190, 255, 0.2);
  opacity: 1;
}
.forge-slot--result.is-preview img {
  opacity: 0.72;
  filter: drop-shadow(0 0 5px rgba(140, 200, 255, 0.75));
}
.forge-slot--result.is-real {
  border-color: var(--c-gold-bright);
  box-shadow: 0 0 18px rgba(255, 190, 90, 0.55);
}
.forge-slot__preview-tag {
  position: absolute;
  bottom: -0.1rem;
  left: 50%;
  padding: 0 0.24rem;
  transform: translate(-50%, 50%);
  border: 1px solid rgba(127, 196, 255, 0.8);
  border-radius: 2px;
  background: rgba(6, 12, 22, 0.95);
  color: #9fd6ff;
  font-family: var(--font-display);
  font-size: clamp(0.34rem, 0.8vh, 0.44rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.forge-side--result.is-preview .forge-side__title { color: #9fd6ff; }

/* MEVCUT -> BASARILI OLURSA satiri */
.forge-transition__label {
  display: block;
  color: var(--c-text-dim);
  font-family: var(--font-display);
  font-size: clamp(0.4rem, 0.95vh, 0.5rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.forge-transition__class { color: var(--c-gold-dim); }

/* --- Gercek karakter portreleri ------------------------------
   Oran KORUNUR: object-fit: contain + saydam PNG arka plani.
   ------------------------------------------------------------ */
/* PORTRE HIZALAMA (ORTAK KURAL)
   -------------------------------------------------------------
   Portreler kendi kutularinin ICINDE, en-boy orani bozulmadan
   ve TAM ORTALI durur. Kutu buyuyup kucululmez; yalnizca icerik
   hizalanir. Yalnizca buyuk "vitrin" sahnelerinde (karakter
   olusturma / karakter paneli onizlemesi) ust hizalama tercih
   edilir - o kural asagida ayrica tanimlidir. */
img.is-portrait {
  object-fit: contain;
  object-position: center;
  background: transparent;
}

/* Arena ve zindandaki GERCEK karakter portreleri cerceveyi tamamen
   doldurur. Dusman/yaratik tam-boy gorselleri mevcut contain kuralinda
   kalir; boylece onlar gereksiz yere kirpilmaz. */
img.is-battle-portrait {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 4px;
}
.cp-preview__stage.is-portrait .cp-preview__art {
  width: 100%;
  height: 100%;
  object-position: center top;
}
.char-portrait.is-portrait .char-portrait__art,
.char-slot__art.is-portrait { object-fit: contain; }

/* =============================================================
   ONLINE TOPLULUK: PAZAR / KLAN / GUNLUK
   ============================================================= */
.community-overlay {
  position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center;
  padding: 3vh 3vw; background: rgba(2, 2, 10, .86); backdrop-filter: blur(8px);
}
.community-panel {
  position: relative; width: min(1100px, 94vw); max-height: 90vh; overflow: hidden; color: #ead9b2;
  border: 1px solid #b8832f; border-radius: 8px;
  background: linear-gradient(150deg, rgba(45, 12, 18, .98), rgba(8, 6, 14, .99));
  box-shadow: 0 28px 90px #000, inset 0 0 35px rgba(169, 56, 35, .12);
}
.community-header, .community-footer, .community-tabs, .community-inline,
.community-clan-stats { display: flex; align-items: center; gap: 12px; }
.community-header { padding: 14px 18px; border-bottom: 1px solid #6d391e; background: rgba(112, 22, 27, .35); }
.community-header h2 { flex: 1; margin: 0; color: #f5cb70; letter-spacing: .16em; font-size: 1.25rem; }
.community-wallet { padding: 6px 12px; color: #ffd66b; border: 1px solid #68441c; background: #13090a; }
.community-close { width: 38px; height: 38px; color: #ffd982; font-size: 1.5rem; border: 1px solid #b45d30; background: #50131b; cursor: pointer; }
.community-tabs { padding: 10px 18px; border-bottom: 1px solid #402418; }
.community-tabs button, .community-action {
  color: #ceb98e; border: 1px solid #755127; background: linear-gradient(#241510, #0b0809);
  padding: 7px 13px; font: 700 .74rem Georgia, serif; letter-spacing: .08em; cursor: pointer;
}
.community-tabs button.is-active, .community-action:hover { color: #fff0b5; border-color: #d4a349; background: linear-gradient(#6e2b19, #2c100e); }
.community-body { overflow: auto; max-height: calc(90vh - 108px); min-height: 430px; padding: 15px; }
.community-grid { display: grid; gap: 14px; }
.community-section { padding: 12px; border: 1px solid #51301e; background: rgba(4, 3, 8, .58); }
.community-section h3 { margin: 0 0 10px; color: #d5aa57; font-size: .86rem; letter-spacing: .14em; text-transform: uppercase; }
.community-row { display: grid; grid-template-columns: 44px minmax(140px, 1fr) minmax(90px, auto) auto auto; align-items: center; gap: 10px; min-height: 48px; padding: 6px; border-top: 1px solid #302018; }
.community-row img { width: 40px; height: 40px; object-fit: contain; }
.community-clan-ranking-row { grid-template-columns: 2.6rem minmax(9rem, 1fr) 4.5rem auto; }
.community-clan-rank { color: #f1d58c; text-align: center; }
.community-clan-name { min-width: 0; color: #f3d88f; font-weight: 700; }
.community-clan-name .faction-badge { width: 2rem; height: 2rem; }
.community-clan-level { color: #d8c59e; white-space: nowrap; }
.community-item-anchor { grid-column: span 2; display: inline-flex; align-items: center; gap: 10px; width: max-content; max-width: 100%; cursor: default; }
.community-item-anchor:focus-visible { outline: 1px solid #e5bd69; outline-offset: 2px; }
.community-member-row { grid-template-columns: minmax(180px, 1fr) minmax(90px, .35fr) minmax(90px, auto) repeat(3, auto); }
.community-member-inspect {
  display: flex; justify-content: flex-start; align-items: center;
  width: 100%; min-width: 0; text-align: left;
}
.community-member-inspect .faction-name { justify-content: flex-start; width: 100%; min-width: 0; }
.community-member-name, .community-member-role { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.community-member-name .faction-name__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.community-member-role { color: #c8ad7d; text-transform: capitalize; }
.community-member-contribution { color: #efd590; font-family: var(--font-mono); text-align: right; }
.community-row small, .community-history, .community-empty { color: #9b8c77; }
.community-price, .community-input { box-sizing: border-box; min-width: 100px; padding: 8px; color: #f2dfbd; border: 1px solid #67451f; background: #09070b; }
.community-input { width: min(360px, 100%); margin-right: 8px; }
.community-footer { justify-content: space-between; padding: 10px 18px; border-top: 1px solid #542b1d; }
.community-message { color: #d9b66b; }
.community-panel.is-market { width: min(1380px, 96vw); }
.community-panel.is-market .community-body { min-height: min(660px, calc(90vh - 108px)); }
.market-shell { display: grid; gap: 12px; }
.market-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.market-tab {
  min-height: 42px; padding: 7px 9px; color: #bda77d; border: 1px solid #5f4022;
  background: linear-gradient(#211317, #09070b); font: 700 .7rem Georgia, serif;
  letter-spacing: .07em; text-transform: uppercase; cursor: pointer;
}
.market-tab.is-active { color: #ffe59b; border-color: #d39a3c; background: linear-gradient(#76271f, #2b0d12); box-shadow: inset 0 -2px #e1b65c; }
.market-view { display: grid; gap: 10px; }
.market-toolbar { display: grid; grid-template-columns: minmax(190px, 1.3fr) minmax(130px, .65fr) minmax(150px, .7fr) auto; gap: 8px; align-items: center; }
.market-search, .market-select {
  box-sizing: border-box; min-width: 0; height: 38px; padding: 7px 10px; color: #ead9b2;
  border: 1px solid #67451f; background: #09070b;
}
.market-result-count { color: #a9936d; font-size: .72rem; white-space: nowrap; }
.market-card-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; gap: 9px; }
.market-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(1.7em, 1fr) auto auto auto;
  gap: 6px 9px; align-content: stretch;
  min-width: 0; padding: 10px; border: 1px solid #4e3020;
  background: linear-gradient(145deg, rgba(31, 13, 18, .96), rgba(5, 5, 10, .94));
}
.market-card .community-item-anchor { grid-column: 1 / -1; width: 100%; color: #f0cf80; font-weight: 700; }
.market-card .community-item-anchor > img { flex: 0 0 auto; width: 42px; height: 42px; object-fit: contain; }
.market-card__meta, .market-card__stats { grid-column: 1 / -1; color: #aa9877; font-size: .64rem; line-height: 1.35; overflow-wrap: anywhere; }
.market-card__stats { color: #b9c9a0; min-height: 1.7em; }
.market-card__seller { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; min-width: 0; }
.market-card__seller .faction-name { min-width: 0; }
.market-card__facts { display: flex; flex-wrap: wrap; gap: 5px 9px; color: #8e806b; font-size: .62rem; }
.market-card__price { justify-self: end; color: #ffd46c; font-family: var(--font-mono); }
.market-card > .community-action { grid-column: 1 / -1; align-self: end; width: 100%; min-height: 32px; }
.market-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; color: #ddc386; }
.market-help { margin: 0; color: #a9997e; font-size: .75rem; }
.market-inventory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.market-create-card { grid-template-columns: minmax(150px, 1fr) minmax(120px, .7fr) minmax(125px, auto) minmax(90px, auto) auto; }
.market-create-card .community-item-anchor { grid-column: auto; width: 100%; }
.market-create-card .market-card__meta { grid-column: auto; }
.market-price-label { display: grid; grid-template-columns: auto minmax(90px, 1fr); align-items: center; gap: 6px; color: #bdaa80; font-size: .66rem; }
.market-price-label .community-price { width: 100%; }
.market-quantity-label { display: grid; grid-template-columns: auto 56px; align-items: center; gap: 6px; color: #bdaa80; font-size: .66rem; }
.market-quantity-label .community-price { min-width: 0; width: 56px; }
.market-mine { display: grid; gap: 12px; }
.market-mine__section { display: grid; gap: 8px; }
.market-mine__section > h3 { margin: 0; color: #d7ad5d; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.market-status { padding: 2px 5px; border: 1px solid #3e7b4d; color: #9edeac; background: #0a1a0f; text-transform: uppercase; }
.market-status.is-sold { border-color: #85672e; color: #e8c777; background: #1c1308; }
.market-history-list { display: grid; gap: 7px; }
.market-history-row {
  display: grid; grid-template-columns: minmax(180px, 1.35fr) repeat(5, minmax(82px, .65fr)) auto;
  align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid #41291c; background: rgba(5, 4, 9, .65);
  color: #bca985; font-size: .68rem;
}
.market-history-row .community-item-anchor { width: 100%; }
.market-history-row .community-item-anchor > img {
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  max-width: 2rem;
  max-height: 2rem;
  object-fit: contain;
}

/* Kamuya acik karakter ekipman inceleme penceresi. */
.inspect-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 1rem;
  opacity: 0;
  background: rgba(1, 1, 8, .82);
  backdrop-filter: blur(4px);
  transition: opacity .16s ease;
}
.inspect-overlay.is-visible { opacity: 1; }
.inspect-panel {
  position: relative;
  width: min(92vw, 42rem);
  max-height: min(88dvh, 38rem);
  overflow: hidden;
  border: 1px solid #c8963d;
  border-radius: 5px;
  background: linear-gradient(155deg, #1b0d18, #07060d 68%);
  box-shadow: 0 22px 60px rgba(0,0,0,.75), inset 0 0 40px rgba(97,20,35,.2);
}
.inspect-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem .8rem;
  border-bottom: 1px solid rgba(226,179,83,.3);
  background: linear-gradient(90deg, rgba(102,21,30,.76), rgba(19,17,40,.88));
}
.inspect-header h2 { margin: 0; color: #f1d07b; font: 700 .86rem var(--font-display); letter-spacing: .14em; }
.inspect-close { width: 2rem; height: 2rem; border: 1px solid #9b6430; background: #54151d; color: #ffe7a4; cursor: pointer; }
.inspect-body { min-height: 12rem; max-height: calc(88dvh - 3.5rem); overflow: auto; padding: .8rem; }
.inspect-identity { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: .7rem; color: #d7c6a0; }
.inspect-name { color: #ffe5a0; font: 700 .9rem var(--font-display); }
.inspect-equipment-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(3rem, 5.4rem));
  justify-content: center;
  gap: .4rem;
}
.inspect-item {
  position: relative;
  display: grid;
  place-items: center;
  gap: .15rem;
  min-width: 0;
  aspect-ratio: .95;
  overflow: visible;
  border: 1px solid rgba(202,151,64,.48);
  border-radius: 4px;
  background: radial-gradient(circle, rgba(83,23,39,.42), #07060c 72%);
  color: #d9c79e;
}
.inspect-item > img { width: 72%; height: 72%; object-fit: contain; }
.inspect-item > strong { position: absolute; top: .15rem; right: .2rem; color: #fff19a; font-size: .65rem; }
.inspect-item > span { max-width: 100%; overflow: hidden; font-size: .48rem; text-overflow: ellipsis; white-space: nowrap; }
.inspect-loading, .inspect-empty { margin: 4rem 0; color: #cdbb99; text-align: center; }
.inspect-member-list { display: grid; gap: .35rem; }
.inspect-member {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) auto auto;
  align-items: center;
  gap: .7rem;
  padding: .55rem .7rem;
  border: 1px solid rgba(202,151,64,.32);
  background: linear-gradient(90deg, rgba(73,18,34,.42), rgba(9,8,17,.88));
  color: #d8c6a1;
  text-align: left;
}
.inspect-member:hover { border-color: #d6a84d; background-color: rgba(114,28,44,.28); }
.inspect-member__name { color: #f1d180; }
.game-chat__sender, .rk-name-button, .rk-clan-button, .community-member-inspect { cursor: pointer; }
.game-chat__sender, .rk-name-button, .rk-clan-button, .community-member-inspect {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
}
.game-chat__sender:hover, .rk-name-button:hover, .rk-clan-button:hover, .community-member-inspect:hover { color: #fff1af; text-shadow: 0 0 8px rgba(239,197,90,.5); }
@media (max-width: 44rem), (orientation: landscape) and (max-height: 420px) {
  .inspect-panel { width: min(96vw, 42rem); max-height: calc(100% - .4rem); }
  .inspect-body { max-height: calc(100% - 3rem); padding: .45rem; }
  .inspect-equipment-grid { grid-template-columns: repeat(5, minmax(2.5rem, 1fr)); gap: .25rem; }
  .inspect-item { aspect-ratio: 1.1; }
}
.market-history-row time { color: #877a68; white-space: nowrap; }
.community-clan-stats { flex-wrap: wrap; margin-bottom: 12px; font-size: 1rem; }
.daily-track { display: grid; grid-template-columns: repeat(7, minmax(88px, 1fr)); gap: 6px; margin-bottom: 9px; }
.daily-card { display: grid; grid-template-rows: auto 1fr; gap: 5px; min-height: 104px; padding: 7px; border: 1px solid #5b3b20; background: #100a0d; }
.daily-card.is-claimed { border-color: #39754d; background: #0c1b14; }
.daily-card strong { color: #efc76d; }
.daily-card__day { font-size: .72rem; }
.daily-card__rewards { display: grid; grid-template-columns: repeat(auto-fit, minmax(42px, 1fr)); align-items: start; gap: 5px; }
.daily-reward { display: grid; justify-items: center; align-content: start; gap: 3px; min-width: 0; text-align: center; }
.daily-reward__gold, .daily-reward__item { display: grid; place-items: center; width: 38px; height: 38px; object-fit: contain; }
.daily-reward__gold {
  border: 2px solid #8e5c13; border-radius: 50%; color: #704109;
  background: radial-gradient(circle at 34% 28%, #fff1a5 0 12%, #f3c548 28%, #b87513 67%, #663508 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 230, 120, .34), 0 2px 5px rgba(0, 0, 0, .65);
  font: 900 1rem Georgia, serif;
}
.daily-reward__gold > span { text-shadow: 0 1px 0 rgba(255, 231, 131, .65); transform: rotate(-8deg); }
.daily-reward__label { max-width: 100%; color: #e7d5ad; font-size: .58rem; line-height: 1.15; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .community-overlay { padding: 2px; }
  .community-panel { width: 99vw; max-height: 98vh; }
  .community-body { max-height: calc(98vh - 100px); min-height: 250px; }
  .community-row { grid-template-columns: 38px minmax(110px, 1fr) auto; }
  .community-clan-ranking-row { grid-template-columns: 2.2rem minmax(7rem, 1fr) 3.5rem auto; }
  .community-member-row { grid-template-columns: minmax(95px, 1fr) minmax(55px, auto) minmax(58px, auto) repeat(3, auto); }
  .community-row small { display: none; }
  .daily-track { grid-template-columns: repeat(4, 1fr); }
  .market-tabs { grid-template-columns: repeat(5, minmax(72px, 1fr)); overflow-x: auto; }
  .market-toolbar { grid-template-columns: 1fr 1fr; }
  .market-result-count { text-align: right; }
  .market-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-inventory-grid { grid-template-columns: 1fr; }
  .market-create-card { grid-template-columns: minmax(120px, 1fr) minmax(90px, .8fr) minmax(110px, auto) minmax(80px, auto) auto; }
  .market-history-row { grid-template-columns: minmax(140px, 1.3fr) repeat(2, minmax(90px, .8fr)) auto; }
}

/* Masaustu koy panelleri: ayni kompozisyonu koruyarak daha kompakt boyut. */
@media (hover: hover) and (pointer: fine) and (min-width: 64rem) {
  .merchant-panel { width: min(92vw, 42rem); max-height: 92vh; }
  .merchant-panel.is-shop,
  .blacksmith-panel.is-view-merchant { width: min(92vw, 42rem); }
  .character-panel { width: min(92vw, 72rem); max-height: 92vh; }
  .blacksmith-panel { width: min(92vw, 56rem); max-height: 92vh; }
  .blacksmith-panel.is-view-menu { width: min(92vw, 36rem); }
  .dungeon-panel { width: min(92vw, 62rem); max-height: 92vh; }
  .arena-panel { width: min(92vw, 64rem); max-height: 92vh; }
  .ranking-panel { width: min(92vw, 80rem); max-height: 92vh; }
  .wheel-panel { width: min(92vw, 53rem); max-height: 92vh; }
  .community-panel { width: min(1000px, 90vw); max-height: 86vh; }
  .community-body { max-height: calc(86vh - 104px); min-height: 360px; }
}

/* 768-800px yukseklikte masaustu panelini tek sahneye sigdir.
   Ekipman kompozisyonundaki bos satir kaldirildigi icin govde artik
   kaymadan; ekipman, turetilmis statlar ve stat dagitimi birlikte gorunur. */
@media (hover: hover) and (pointer: fine) and (min-width: 64rem) and (min-height: 39rem) and (max-height: 50rem) {
  .character-panel { max-height: 98vh; }
  .cp-header { padding-block: 0.38rem; }
  .cp-body {
    gap: 0.32rem 0.55rem;
    padding-block: 0.32rem;
    overflow-y: hidden;
  }
  .cp-section__title { margin-bottom: 0.22rem; }
  .cp-block { padding-block: 0.3rem; }
  .cp-block__title { margin-bottom: 0.2rem; padding-bottom: 0.16rem; }
  .cp-alloc__head { margin-bottom: 0.12rem; }
  .cp-alloc__row { padding-block: 0.2rem; }
  .cp-footer { padding-block: 0.3rem; }
}

/* =============================================================
   MOBIL YATAY OYUN DUZENI
   -------------------------------------------------------------
   Telefonlar yuksek DPR nedeniyle genislikte masaustu gibi gorunebilir.
   Bu nedenle asil kisit olan viewport YUKSEKLIGI esas alinir. Paneller
   ekranin tamamini isgal etmez; baslik, govde ve alt bar olculeri ayni
   yogunluk sistemine girer. Dikey telefon zaten orientation katmani ile
   engellendiginden bu kurallar yalnizca oynanabilir yatay gorunume aittir.
   ============================================================= */
@media (orientation: landscape) and (max-height: 620px) {
  .merchant-overlay,
  .character-overlay,
  .blacksmith-overlay,
  .dungeon-overlay,
  .arena-overlay,
  .ranking-overlay,
  .wheel-overlay,
  .community-overlay {
    padding: clamp(0.18rem, 1vh, 0.4rem);
  }

  .merchant-panel,
  .character-panel,
  .blacksmith-panel,
  .dungeon-panel,
  .arena-panel,
  .ranking-panel,
  .wheel-panel,
  .community-panel {
    height: calc(100% - clamp(0.36rem, 2vh, 0.8rem));
    max-height: calc(100% - clamp(0.36rem, 2vh, 0.8rem));
    border-width: 1px;
    border-radius: 5px;
  }

  .community-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .merchant-panel__body,
  .cp-body,
  .bs-body,
  .dg-body,
  .ar-body,
  .wh-body,
  .community-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .community-body { flex: 1 1 auto; }

  .merchant-panel { width: min(90vw, 42rem); }
  .merchant-panel.is-shop,
  .blacksmith-panel.is-view-merchant { width: min(92vw, 46rem); }
  .character-panel { width: min(94vw, 66rem); }
  .blacksmith-panel { width: min(92vw, 54rem); }
  .blacksmith-panel.is-view-menu {
    width: min(86vw, 34rem);
    height: auto;
  }
  .dungeon-panel { width: min(92vw, 60rem); }
  .arena-panel { width: min(94vw, 64rem); }
  .ranking-panel { width: min(94vw, 70rem); }
  .wheel-panel { width: min(90vw, 50rem); }
  .community-panel { width: min(90vw, 58rem); }
  .community-panel.is-market { width: 98vw; }
  .community-panel.is-market .community-body { min-height: 0; max-height: calc(96dvh - 82px); padding: .35rem; }
  .market-shell { gap: .3rem; }
  .market-tabs { gap: .2rem; }
  .market-tab { min-height: 1.7rem; padding: .2rem .3rem; font-size: .48rem; }
  .market-toolbar { grid-template-columns: minmax(8rem, 1fr) minmax(6rem, .55fr) minmax(7rem, .6fr) auto; gap: .25rem; }
  .market-search, .market-select { height: 1.7rem; padding: .18rem .35rem; font-size: .52rem; }
  .market-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; }
  .market-card { gap: .16rem .3rem; padding: .28rem; }
  .market-card .community-item-anchor > img { width: 1.8rem; height: 1.8rem; }
  .market-card .community-item-anchor { gap: .3rem; font-size: .56rem; }
  .market-card__meta, .market-card__stats, .market-card__facts { font-size: .44rem; }
  .market-card__seller { font-size: .5rem; }
  .market-card > .community-action { min-height: 1.4rem; padding: .15rem .35rem; font-size: .46rem; }
  .market-inventory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .22rem; }
  .market-create-card { grid-template-columns: minmax(7rem, 1fr) minmax(6rem, .7fr) minmax(6rem, auto) minmax(4.5rem, auto) auto; min-height: 2.5rem; gap: .25rem; padding: .2rem; }
  .market-history-row { grid-template-columns: minmax(8rem, 1.2fr) repeat(5, minmax(4.3rem, .65fr)) auto; gap: .3rem; padding: .25rem; font-size: .48rem; }

  /* Ortak baslik/alt bar yogunlugu. */
  .merchant-panel__header,
  .cp-header,
  .bs-header,
  .dg-header,
  .ar-header,
  .wh-header {
    gap: 0.35rem;
    padding: 0.3rem 0.5rem;
  }
  .rk-header,
  .community-header { padding: 0.35rem 0.6rem; }

  .merchant-panel__title,
  .cp-identity__name,
  .bs-title,
  .dg-title,
  .ar-title,
  .rk-title,
  .wh-title,
  .community-header h2 {
    font-size: clamp(0.68rem, 2.5vh, 0.9rem);
    letter-spacing: 0.12em;
  }

  .merchant-panel__close,
  .cp-close,
  .bs-close,
  .dg-close,
  .ar-close,
  .rk-close,
  .wh-close,
  .community-close {
    width: clamp(1.45rem, 6.2vh, 1.8rem);
    height: clamp(1.45rem, 6.2vh, 1.8rem);
    min-width: 0;
    min-height: 0;
  }

  .merchant-panel__body,
  .bs-body,
  .dg-body,
  .ar-body,
  .wh-body { padding: 0.32rem 0.48rem; }

  .merchant-panel__footer,
  .cp-footer,
  .bs-footer,
  .dg-footer,
  .ar-footer,
  .rk-footer,
  .community-footer {
    gap: 0.35rem;
    padding: 0.24rem 0.5rem;
  }

  .merchant-panel__footer .ui-button,
  .cp-footer .ui-button,
  .bs-footer .ui-button,
  .dg-footer .ui-button,
  .ar-footer .ui-button,
  .rk-footer .ui-button,
  .community-footer .ui-button {
    min-height: 1.65rem;
    padding: 0.22rem 0.7rem;
    font-size: 0.58rem;
  }

  /* KARAKTER: ana alan ekipman/envantere, dar alan turetilmis statlara. */
  .cp-header {
    grid-template-columns: minmax(7rem, 0.75fr) minmax(10rem, 1.1fr) auto auto;
    row-gap: 0;
  }
  .cp-exp {
    grid-column: auto;
    order: initial;
  }
  .cp-meta { order: initial; gap: 0.18rem; }
  .cp-tile {
    min-width: 2.65rem;
    padding: 0.15rem 0.28rem;
  }
  .cp-tile__label { font-size: clamp(0.4rem, 1.6vh, 0.5rem); }
  .cp-tile__value { font-size: clamp(0.6rem, 2.2vh, 0.75rem); }
  .cp-exp__bar { height: 0.32rem; margin-block: 0.16rem 0.08rem; }
  .cp-exp__caption { display: none; }

  .cp-body {
    --cp-slot: clamp(2rem, 9vh, 2.6rem);
    --cp-gap: 0.16rem;
    grid-template-columns:
      minmax(17rem, 1.25fr)
      calc(5 * var(--cp-slot) + 4 * var(--cp-gap))
      minmax(11.5rem, 0.72fr);
    grid-template-areas:
      "equip inventory derived";
    align-items: start;
    gap: 0.32rem 0.45rem;
    padding: 0.3rem 0.45rem;
  }
  .cp-equip__grid { width: min(100%, 27rem); }
  .cp-section__title { margin-bottom: 0.18rem; font-size: 0.5rem; letter-spacing: 0.11em; }
  .cp-bag-tabs { gap: 0.16rem; margin-bottom: 0.18rem; }
  .cp-bag-tab { padding: 0.16rem 0.2rem; font-size: 0.48rem; }
  .cp-derived {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 0.2rem;
    min-height: 0;
    overflow: visible;
  }
  .cp-block { padding: 0.2rem 0.3rem; }
  .cp-block__title { margin-bottom: 0.12rem; padding-bottom: 0.1rem; font-size: 0.48rem; }
  .cp-block__list { gap: 0.06rem 0.35rem; font-size: clamp(0.46rem, 1.75vh, 0.58rem); }
  .cp-alloc__head { margin-bottom: 0.12rem; }
  .cp-alloc__grid { gap: 0.2rem; }
  .cp-alloc__row { gap: 0.2rem; padding: 0.14rem 0.24rem; }
  .cp-alloc__name { font-size: 0.46rem; }
  .cp-alloc__value { font-size: 0.56rem; }
  .cp-alloc__add { width: 1.2rem; height: 1.2rem; font-size: 0.7rem; }
  .cp-footer { min-height: 0; }
  .cp-message { font-size: 0.5rem; }

  /* DEMIRCI: sahne ve envanter ayni ekranda kalir. */
  .forge {
    --forge-slot: clamp(1.55rem, 6.5vh, 2rem);
    --forge-gap: 0.14rem;
    gap: 0.25rem;
  }
  .forge-stage { gap: clamp(0.4rem, 1.5vw, 0.8rem); }
  .forge-chamber { padding: 0.2rem; }
  .forge-slot { width: calc(var(--forge-slot) * 1.35); height: calc(var(--forge-slot) * 1.35); }
  .forge-actions { gap: 0.25rem; }
  .forge-action { min-height: 1.55rem; padding: 0.2rem 0.35rem; font-size: 0.54rem; }
  .forge-status { min-height: 2.2rem; gap: 0.18rem; padding: 0.24rem 0.4rem; }
  .forge-live-quote { padding: 0.22rem 0.45rem; }
  .forge-inventory { gap: 0.18rem; }
  .forge-grid {
    width: min(100%, calc(5 * var(--forge-slot) + 4 * var(--forge-gap)));
  }
  .forge-grid--equipped {
    width: min(100%, calc(6 * var(--forge-slot) + 5 * var(--forge-gap)));
  }
  .forge-bag-tab { padding: 0.14rem 0.4rem; font-size: 0.48rem; }
  .bs-menu { gap: 0.3rem; }
  .bs-menu__card { min-height: 2.7rem; padding: 0.35rem 0.5rem; }

  /* ZINDAN: uc dusman satiri butonlariyla birlikte tek bakista. */
  .dungeon-panel.is-view-doors,
  .dungeon-panel.is-view-enemies {
    height: auto;
    max-height: calc(100% - 1rem);
  }
  .dungeon-panel.is-view-doors .dg-body,
  .dungeon-panel.is-view-enemies .dg-body {
    flex: 0 1 auto;
    overflow-y: auto;
  }
  .dg-select__hint { margin-bottom: 0.25rem; }
  .dg-enemy-list { gap: 0.25rem; }
  .dg-enemy { gap: 0.5rem; padding: 0.26rem 0.4rem; }
  .dg-enemy__art { width: clamp(2.7rem, 11vh, 3.4rem); height: clamp(2.7rem, 11vh, 3.4rem); }
  .dg-enemy__meta { margin: 0.04rem 0 0.12rem; }
  .dg-enemy__reward { margin-top: 0.12rem; }
  .dg-enemy__fight { min-height: 1.75rem; padding: 0.22rem 0.75rem; }

  /* ARENA: telefon ekraninda rakipler tek kompakt satira sigar. */
  .ar-header { gap: .22rem; padding-block: .22rem; }
  .ar-record, .ar-gold { gap: .18rem; padding: .16rem .3rem; font-size: clamp(.43rem, 1.45vh, .54rem); }
  .ar-body { padding-block: .22rem; }
  .ar-mode-tabs { margin-bottom: .18rem; }
  .ar-mode-tab { min-height: 1.65rem; padding: .16rem .45rem; font-size: clamp(.48rem, 1.55vh, .58rem); }
  .ar-fight-quota { margin-bottom: .16rem; padding: .22em .55em; font-size: clamp(.45rem, 1.45vh, .54rem); }
  .ar-select__hint { margin-bottom: 0.25rem; }
  .ar-opponent-list {
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.28rem;
  }
  .ar-opponent { gap: 0.04rem; padding: 0.18rem 0.24rem; }
  .ar-opponent__art { width: clamp(2.3rem, 8.5vh, 2.85rem); height: clamp(2.3rem, 8.5vh, 2.85rem); }
  .ar-opponent__name { margin-top: 0.05rem; }
  .ar-opponent__title { font-size: clamp(.4rem, 1.35vh, .48rem); }
  .ar-opponent__meta { margin: 0.02rem 0; font-size: clamp(.42rem, 1.4vh, .5rem); }
  .ar-opponent__stats { gap: 0.02rem 0.28rem; font-size: clamp(0.4rem, 1.35vh, 0.48rem); }
  .ar-opponent__reward { margin: 0.03rem 0; font-size: clamp(.4rem, 1.3vh, .47rem); }
  .ar-opponent__fight { min-height: 1.38rem; padding: 0.12rem 0.35rem; font-size: clamp(.43rem, 1.4vh, .51rem); }

  /* SIRALAMA: iki tablo korunur, bosluk ve footer kisalir. */
  .ranking-panel.has-hourly-rewards .rk-header {
    grid-template-columns: minmax(9rem, .58fr) minmax(18rem, 1.42fr) auto;
    min-height: 0;
    gap: .3rem;
  }
  .rk-header__rewards { grid-column: auto; }
  .rk-subtitle { margin-top: 0.08rem; }
  .rk-hourly-info { padding: .22rem .3rem; gap: .08rem .25rem; font-size: clamp(.38rem, 1.3vh, .46rem); }
  .rk-close { top: 0.3rem; right: 0.45rem; }
  .rk-section { padding: 0.35rem 0.4rem; }
  .rk-section-title { margin-bottom: 0.18rem; }
  .rk-row { gap: 0.2rem; padding: 0.18rem 0.28rem; }
  .rk-yourrank { margin-top: 0.22rem; }
  .rk-footer { min-height: 0; }

  /* CARKIFELEK: cark ve envanter dengeli ama daha az bosluklu. */
  .wh-body {
    grid-template-columns: minmax(0, 1fr) clamp(9rem, 37%, 14rem);
    gap: 0.45rem;
  }
  .wh-stage { gap: 0.2rem; }
  .wh-wheel { width: min(100%, clamp(7.5rem, 30vh, 11rem)); }
  .wh-spin { min-width: 7rem; min-height: 1.8rem; padding-block: 0.24rem; }
  .wh-cost { padding: 0.18rem 0.45rem; }

  /* TOPLULUK / KLAN / GUNLUK: gereksiz sabit yukseklik kaldirilir. */
  .community-header { gap: 0.45rem; }
  .community-wallet { padding: 0.2rem 0.5rem; }
  .community-tabs { gap: 0.35rem; padding: 0.3rem 0.6rem; }
  .community-tabs button,
  .community-action { padding: 0.24rem 0.55rem; font-size: 0.6rem; }
  .community-body {
    max-height: none;
    min-height: 0;
    padding: 0.45rem;
  }
  .community-grid { gap: 0.45rem; }
  .community-section { padding: 0.42rem; }
  .community-section h3 { margin-bottom: 0.35rem; font-size: 0.66rem; }
  .community-section > .ui-button {
    min-height: 1.65rem;
    padding: 0.22rem 0.75rem;
    font-size: 0.58rem;
  }
  .community-section > p { margin: 0.3rem 0 0; font-size: 0.6rem; }
  .community-clan-stats { gap: 0.45rem; margin-bottom: 0.4rem; font-size: 0.7rem; }
  .community-row { min-height: 2rem; gap: 0.4rem; padding: 0.25rem; }
  .community-row img { width: 1.8rem; height: 1.8rem; }
  .community-price,
  .community-input { padding: 0.3rem 0.4rem; }
  .daily-track { gap: 0.28rem; margin-bottom: 0.35rem; }
  .daily-card { gap: 0.2rem; min-height: 4.9rem; padding: 0.32rem; }
  .daily-card__rewards { gap: 0.18rem; }
  .daily-reward__gold,
  .daily-reward__item { width: 1.85rem; height: 1.85rem; }
  .daily-reward__label { font-size: 0.48rem; }

  /* Magaza slotlari ve islem alani da telefon yuksekligine uyar. */
  .mc-shop { gap: 0.18rem; }
  .mc-transaction { padding-block: 0.16rem; }
  .mc-tabs { gap: 0.12rem; }
  .mc-tab { padding: 0.12rem 0.3rem; }
  .mc-total { padding-block: 0.18rem; }
}

/* Cok alcak telefonlarda bir kademe daha yogunluk; dokunma hedefleri
   1.45rem altina inmez ve panel govdeleri kendi icinde kayar. */
@media (orientation: landscape) and (max-height: 430px) {
  .character-panel { width: min(96vw, 64rem); }
  .cp-body {
    --cp-slot: clamp(1.85rem, 8.7vh, 2.35rem);
    grid-template-columns:
      minmax(15.5rem, 1.2fr)
      calc(5 * var(--cp-slot) + 4 * var(--cp-gap))
      minmax(11rem, 0.72fr);
  }
  .cp-identity__line,
  .cp-exp__level,
  .cp-exp__value { font-size: 0.5rem; }
  .cp-derived { gap: 0.12rem; }
  .cp-block { padding-block: 0.14rem; }
  .cp-block__list { font-size: 0.45rem; }
  .cp-footer { padding-block: 0.14rem; }

  .ar-opponent-list { grid-template-columns: repeat(auto-fit, minmax(8.4rem, 1fr)); }
  .ar-opponent__art { width: 2.55rem; height: 2.55rem; }
  .ar-opponent__stats { font-size: 0.43rem; }

  .dg-enemy__art { width: 2.55rem; height: 2.55rem; }
  .forge-status { min-height: 1.8rem; }
  .community-body { max-height: none; }
  .daily-card { min-height: 4.35rem; }
}
/* =============================================================
   KARUS / HUMAN ORTAK IRK ARMASI
   ============================================================= */
.faction-name {
  display: inline-flex;
  align-items: center;
  gap: .42em;
  min-width: 0;
  max-width: 100%;
  vertical-align: middle;
}

.faction-name__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.faction-badge {
  display: inline-block;
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8));
  vertical-align: -.18em;
  pointer-events: none;
  user-select: none;
}

.faction-badge--compact { width: 16px; height: 16px; }
.faction-badge--inline { width: 20px; height: 20px; }
.faction-badge--hero { width: 30px; height: 30px; }

/* AFK farm donus ozeti */
.afk-overlay {
  position: fixed;
  inset: 0;
  z-index: 1320;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 2, 10, .84);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .16s ease;
}
.afk-overlay.is-visible { opacity: 1; }
.afk-panel {
  width: min(620px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 32px));
  overflow: auto;
  padding: 18px;
  border: 1px solid #c99635;
  border-radius: 5px;
  color: #f4e5bd;
  background:
    radial-gradient(circle at 50% 0, rgba(157, 52, 24, .28), transparent 40%),
    linear-gradient(145deg, #20090d, #0a070d 72%);
  box-shadow: 0 24px 70px #000, inset 0 0 30px rgba(188, 71, 27, .1);
}
.afk-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid #6d3d21; padding-bottom: 12px; }
.afk-kicker { display: block; color: #d99a49; font: 700 10px/1.2 Georgia, serif; letter-spacing: .22em; margin-bottom: 7px; }
.afk-title { color: #ffe2a0; font: 700 23px/1 Georgia, serif; letter-spacing: .08em; }
.afk-close { width: 38px; height: 38px; border: 1px solid #a75c2b; color: #ffd893; background: #3b0d12; font-size: 25px; }
.afk-intro { margin: 15px 0; color: #d7c7ad; font-size: 14px; }
.afk-rewards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.afk-reward { display: grid; grid-template-columns: 38px 1fr; align-items: center; padding: 10px; border: 1px solid #62411f; background: rgba(5, 4, 8, .72); }
.afk-reward__icon { grid-row: 1 / 3; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #2d1701; background: linear-gradient(#ffe184, #a85b12); font-weight: 900; }
.afk-reward__label { color: #aa8a5d; font-size: 9px; letter-spacing: .14em; }
.afk-reward strong { color: #ffe6a5; font-size: 18px; }
.afk-loot { margin-top: 12px; padding: 12px; border: 1px solid #4a2d1d; background: rgba(0, 0, 0, .25); }
.afk-loot h3 { margin: 0 0 10px; color: #d9a85d; font-size: 11px; letter-spacing: .15em; }
.afk-loot__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.afk-loot__item { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 7px; min-width: 0; padding: 7px; border: 1px solid #5c4027; background: #0b070a; font-size: 11px; }
.afk-loot__item img { width: 30px; height: 30px; object-fit: contain; }
.afk-loot__item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.afk-empty, .afk-note, .afk-warning, .afk-level { margin: 9px 0 0; font-size: 12px; }
.afk-level { color: #8fe075; }
.afk-warning { color: #ff9d74; }
.afk-note { color: #a79988; }
.afk-claim { width: 100%; margin-top: 14px; min-height: 44px; }

@media (max-width: 900px), (max-height: 560px) {
  .faction-badge--compact { width: 14px; height: 14px; }
  .faction-badge--inline { width: 17px; height: 17px; }
  .faction-badge--hero { width: 24px; height: 24px; }
  .afk-overlay { padding: 8px; }
  .afk-panel { width: min(32rem, 64vw); max-height: min(80vh, 25rem); padding: 8px; }
  .afk-header { padding-bottom: 8px; }
  .afk-kicker { margin-bottom: 4px; font-size: 8px; }
  .afk-title { font-size: 15px; }
  .afk-close { width: 30px; height: 30px; font-size: 19px; }
  .afk-intro { margin: 7px 0; font-size: 10px; }
  .afk-rewards { gap: 6px; }
  .afk-reward { grid-template-columns: 28px 1fr; padding: 5px; }
  .afk-reward__icon { width: 24px; height: 24px; }
  .afk-reward strong { font-size: 12px; }
  .afk-loot { margin-top: 6px; padding: 6px; }
  .afk-loot__grid { gap: 5px; }
  .afk-loot__item { grid-template-columns: 26px 1fr auto; padding: 4px; }
  .afk-loot__item img { width: 23px; height: 23px; }
  .afk-empty, .afk-note, .afk-warning, .afk-level { margin-top: 6px; font-size: 10px; }
  .afk-claim { min-height: 30px; margin-top: 6px; }
}

@media (orientation: portrait) and (max-width: 560px) {
  .afk-panel { width: min(90vw, 25rem); max-height: 78vh; }
  .afk-rewards { grid-template-columns: 1fr; }
  .afk-loot__grid { grid-template-columns: 1fr; }
}

/* =============================================================
   SAVAS SAHNESI V2 — REFERANS ODAKLI ARENA + ZINDAN
   Yuvarlak rakip sahneleri, daha sakin cerceve ve belirgin hit sayilari.
   ============================================================= */
.arena-panel.is-view-battle,
.dungeon-panel.is-view-battle {
  width: min(96vw, 64rem);
}

.ar-battle,
.dg-battle {
  padding: clamp(.55rem, 1.5vh, 1rem);
  border: 1px solid rgba(210, 174, 103, .38);
  border-radius: .7rem;
  background:
    radial-gradient(circle at 18% 32%, rgba(63, 113, 151, .13), transparent 28%),
    radial-gradient(circle at 82% 32%, rgba(134, 41, 39, .16), transparent 28%),
    linear-gradient(180deg, rgba(22, 23, 28, .98), rgba(9, 9, 13, .99));
  box-shadow: inset 0 0 4rem rgba(0, 0, 0, .5), 0 1.2rem 3rem rgba(0, 0, 0, .42);
}

.ar-arena,
.dg-arena {
  align-items: center;
  padding-inline: clamp(.3rem, 2vw, 1.5rem);
}

.ar-fighter__stage,
.dg-fighter__stage {
  width: min(100%, clamp(8rem, 29vh, 16.5rem));
  max-height: clamp(8rem, 29vh, 16.5rem);
  border: 2px solid rgba(216, 193, 139, .66);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(79, 98, 113, .32), rgba(14, 15, 20, .95) 68%);
  box-shadow:
    0 0 0 4px rgba(12, 13, 17, .92),
    0 0 0 5px rgba(216, 193, 139, .32),
    inset 0 -2rem 2.8rem rgba(0, 0, 0, .62),
    0 .8rem 1.8rem rgba(0, 0, 0, .5);
}

.ar-fighter__art,
.dg-fighter__art {
  inset: 5%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
}

.ar-fighter--enemy .ar-fighter__stage,
.dg-fighter--enemy .dg-fighter__stage {
  background: radial-gradient(circle at 50% 42%, rgba(125, 54, 48, .3), rgba(16, 12, 15, .96) 68%);
}

.ar-vs,
.dg-vs { align-self: center; padding-top: 0; }
.ar-vs__mark,
.dg-vs__mark { color: #d8c49b; font-size: clamp(1.25rem, 3.6vh, 2rem); }

.ar-hp__bar,
.dg-hp__bar { height: clamp(.68rem, 1.7vh, .95rem); border-radius: 999px; }
.ar-hp__value,
.dg-hp__value { font-weight: 800; font-size: clamp(.6rem, 1.35vh, .76rem); }

.ar-floater,
.dg-floater {
  z-index: 30;
  top: 28%;
  color: #fff0b6;
  font-size: clamp(1.35rem, 4.4vh, 2.5rem);
  font-weight: 900;
  letter-spacing: .02em;
  -webkit-text-stroke: 1px rgba(34, 6, 5, .9);
  text-shadow: 0 2px 2px #000, 0 0 8px #000, 0 0 18px rgba(255, 95, 38, .75);
}
.ar-fighter--player .ar-floater,
.dg-fighter--player .dg-floater { color: #ff796f; }
.ar-fighter--enemy .ar-floater,
.dg-fighter--enemy .dg-floater { color: #ffd45f; }
.ar-floater.is-critical,
.dg-floater.is-critical { color: #ff4b30; font-size: clamp(1.2rem, 3.5vh, 2rem); }
.ar-floater.is-dodge,
.dg-floater.is-dodge { color: #86d9ff; font-size: clamp(.82rem, 2.25vh, 1.25rem); }
.ar-floater.is-pet-heal,
.dg-floater.is-pet-heal { color: #8dff9b; text-shadow: 0 1px 2px #021807, 0 0 12px rgba(73, 255, 110, .7); }

.dg-controls,
.ar-controls {
  grid-template-columns: minmax(3rem, auto) minmax(12rem, auto) minmax(3.4rem, auto);
}
.battle-speed {
  min-width: clamp(3.1rem, 7vh, 4rem);
  min-height: clamp(2.35rem, 5.5vh, 3rem);
  padding: .25rem .65rem;
  border-color: rgba(208, 178, 105, .54);
  background: linear-gradient(180deg, rgba(45, 48, 56, .98), rgba(15, 16, 22, .98));
  color: #d8c59d;
  font: 900 clamp(.72rem, 1.8vh, 1rem) var(--font-display);
  letter-spacing: .06em;
}
.battle-speed:hover:not(:disabled), .battle-speed.is-active {
  border-color: #f0cb72;
  color: #fff0ac;
  box-shadow: inset 0 0 1rem rgba(202, 152, 49, .17), 0 0 .9rem rgba(223, 173, 66, .25);
}
.battle-speed.is-active::after { content: ""; width: .38rem; height: .38rem; margin-left: .35rem; border-radius: 50%; background: #73e59a; box-shadow: 0 0 .45rem #73e59a; }
.battle-speed:disabled { opacity: .4; cursor: not-allowed; }

.combat-log {
  overflow: hidden;
  scrollbar-width: none;
  border-color: rgba(203, 184, 142, .2);
  background: rgba(3, 4, 7, .52);
  box-shadow: inset 0 0 1.2rem rgba(0, 0, 0, .34);
}
.combat-log::-webkit-scrollbar { display: none; }
.combat-log__damage { font-size: 1.12em; font-weight: 900; }

.arena-panel.is-speed-2x .ar-floater,
.dungeon-panel.is-speed-2x .dg-floater { animation-duration: 450ms; }
.arena-panel.is-speed-2x .ar-fighter.is-hurt .ar-fighter__stage,
.dungeon-panel.is-speed-2x .dg-fighter.is-hurt .dg-fighter__stage,
.dungeon-panel.is-speed-2x .dg-fighter.is-striking .dg-fighter__art { animation-duration: 210ms; }
.arena-panel.is-speed-2x .ar-hp__fill,
.dungeon-panel.is-speed-2x .dg-hp__fill { transition-duration: 210ms; }

/* Kapidaki yaratıklar daima 1→2→3→4→5 sirasi ile acilir. */
.dg-enemy.is-sequence-locked { filter: grayscale(.78) brightness(.52); }
.dg-enemy.is-sequence-locked .dg-enemy__art { position: relative; }
.dg-enemy__sequence-lock {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(232, 192, 100, .55);
  border-radius: 50%;
  background: rgba(3, 3, 7, .88);
  transform: translate(-50%, -50%);
}

/* Ekipman basligi karakter kafasina binmez; katmanlar baslik altindan baslar. */
.cp-preview__title {
  top: .18rem;
  width: calc(100% - 1rem);
  padding-block: .18rem;
  text-align: center;
  background: linear-gradient(90deg, transparent, rgba(5, 4, 8, .94) 18% 82%, transparent);
}
.cp-preview__stage .character-paperdoll__layers {
  top: 1.25rem;
  height: calc(100% - 1.25rem);
}

@media (orientation: landscape) and (max-height: 500px) {
  .ar-battle, .dg-battle { padding: .3rem .45rem; }
  .ar-fighter__stage, .dg-fighter__stage {
    width: min(100%, clamp(5.4rem, 24vh, 7rem));
    max-height: clamp(5.4rem, 24vh, 7rem);
  }
  .ar-floater, .dg-floater { font-size: clamp(1rem, 4.7vh, 1.45rem); }
  .ar-floater.is-critical, .dg-floater.is-critical { font-size: clamp(.9rem, 4vh, 1.25rem); }
  .ar-floater.is-dodge, .dg-floater.is-dodge { font-size: clamp(.72rem, 3.2vh, 1rem); }
}

/* Coklu yetenek seridi: temel vurus + dort skill + manuel/otomatik mod. */
.dg-controls.battle-controls,
.ar-controls.battle-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .55rem 1rem;
}
.battle-actions,
.battle-control-modes { display: flex; align-items: center; justify-content: center; gap: .38rem; }
.battle-mode { cursor: pointer; min-height: 2.45rem; }
.battle-skill--basic { border-color: rgba(224, 191, 106, .76); background: #10111a; }
.battle-skill__lock {
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  padding: .08rem;
  background: rgba(0, 0, 0, .92);
  color: #e8c873;
  font: 800 .54rem var(--font-mono);
  letter-spacing: .02em;
}
.battle-skill.is-locked { opacity: .8; }
.battle-skill.is-locked::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, .66);
  pointer-events: none;
}
.battle-skill.is-locked .battle-skill__lock { z-index: 4; }

.community-clan-bonuses {
  display: grid;
  grid-template-columns: repeat(4, minmax(8rem, 1fr));
  gap: .55rem;
  width: 100%;
}
.community-clan-bonus {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: .45rem;
  padding: .55rem .65rem;
  border: 1px solid rgba(203, 160, 73, .28);
  background: rgba(12, 7, 18, .72);
}
.community-clan-bonus strong { color: #9de77e; }
.community-clan-bonus .community-action { min-width: 2rem; padding-inline: .45rem; }
@media (max-width: 760px) { .community-clan-bonuses { grid-template-columns: repeat(2, minmax(7rem, 1fr)); } }

@media (orientation: landscape) and (max-height: 500px) {
  .battle-skill { width: clamp(2rem, 8.2vh, 2.55rem); height: clamp(2rem, 8.2vh, 2.55rem); }
  .dg-controls.battle-controls, .ar-controls.battle-controls { gap: .25rem .6rem; }
  .battle-mode, .battle-speed { min-height: 2.1rem; }
}

/* V6 battle HUD: kontroller ilgili savascinin portresine baglidir. */
.ar-arena,
.dg-arena { grid-template-columns: minmax(0, 1fr) minmax(8.8rem, auto) minmax(0, 1fr); }
.battle-side { display: grid; min-width: 0; align-content: start; gap: .38rem; }
.battle-side > .battle-actions {
  width: min(100%, 19rem);
  margin-inline: auto;
  flex-wrap: nowrap;
}
.battle-side--player > .battle-actions { justify-content: center; }
.battle-center-controls {
  display: grid;
  justify-items: center;
  gap: .32rem;
  margin-top: .12rem;
}
.battle-center-controls .battle-mode {
  min-width: clamp(7.9rem, 12vw, 10.6rem);
  min-height: 2.25rem;
  padding-inline: .55rem;
  font-size: clamp(.52rem, 1.12vh, .66rem);
  transform: translateX(-.2rem);
}
.battle-center-controls .battle-speed { min-height: 2.25rem; }
.dg-repeat-battle {
  min-width: clamp(7.3rem, 11vw, 9.5rem);
  min-height: 2rem;
  border-color: rgba(91, 161, 231, .7);
  background: linear-gradient(180deg, rgba(23, 62, 126, .96), rgba(8, 19, 49, .98));
  color: #cbe9ff;
  font: 700 clamp(.48rem, 1vh, .6rem) var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dg-repeat-battle.is-active { border-color: #85d4ff; box-shadow: 0 0 .8rem rgba(56, 156, 235, .36); }
.dg-repeat-battle.is-stop-pending { border-color: #d39a54; color: #f0c68b; filter: saturate(.72); }
.battle-enemy-action {
  display: grid;
  place-items: center;
  width: clamp(2.55rem, 6vh, 3.25rem);
  height: clamp(2.55rem, 6vh, 3.25rem);
  margin-inline: auto;
  padding: .12rem;
  border: 1px solid rgba(224, 191, 106, .7);
  border-radius: 3px;
  background: #10111a;
  box-shadow: inset 0 0 .7rem rgba(218, 171, 69, .1);
}
.battle-enemy-action img { width: 100%; height: 100%; object-fit: contain; }

/* HP'nin hemen altinda, hem oyuncu hem yaratik icin mana. */
.battle-mp { display: grid; gap: .12rem; }
.battle-mp__bar {
  height: clamp(.42rem, 1vh, .62rem);
  overflow: hidden;
  border: 1px solid rgba(106, 151, 243, .52);
  border-radius: 999px;
  background: rgba(0, 0, 0, .7);
}
.battle-mp__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #173789, #2869d1 58%, #6abfff);
  box-shadow: 0 0 10px rgba(58, 133, 255, .5);
  transition: width 420ms cubic-bezier(.3,.8,.4,1);
}
.battle-mp__value {
  color: #a8d5ff;
  font: 700 clamp(.48rem, 1.05vh, .62rem) var(--font-mono);
  text-align: center;
}

/* 4x, bekleme ve gecis animasyonlarini dorde boler. */
.arena-panel.is-speed-4x .ar-floater,
.dungeon-panel.is-speed-4x .dg-floater { animation-duration: 225ms; }
.arena-panel.is-speed-4x .ar-fighter.is-hurt .ar-fighter__stage,
.dungeon-panel.is-speed-4x .dg-fighter.is-hurt .dg-fighter__stage,
.dungeon-panel.is-speed-4x .dg-fighter.is-striking .dg-fighter__art { animation-duration: 105ms; }
.arena-panel.is-speed-4x .ar-hp__fill,
.dungeon-panel.is-speed-4x .dg-hp__fill,
.arena-panel.is-speed-4x .battle-mp__fill,
.dungeon-panel.is-speed-4x .battle-mp__fill { transition-duration: 105ms; }

@media (orientation: landscape) and (max-height: 500px) {
  .ar-arena, .dg-arena { grid-template-columns: minmax(0, 1fr) minmax(6.7rem, auto) minmax(0, 1fr); }
  .battle-side > .battle-actions { gap: .14rem; }
  .battle-center-controls { gap: .16rem; margin-top: .08rem; }
  .battle-center-controls .battle-mode { min-width: 6.6rem; min-height: 1.8rem; font-size: .46rem; }
  .battle-center-controls .battle-speed { min-height: 1.8rem; }
  .battle-enemy-action { width: clamp(2rem, 8.2vh, 2.55rem); height: clamp(2rem, 8.2vh, 2.55rem); }
}

/* V7: acik sinif skilleri uzun basip suruklenerek karakter bazinda siralanir. */
.battle-side > .battle-actions--enemy { justify-content: center; }
.battle-skill:not(.is-locked):not(.battle-skill--enemy):not(.battle-skill--basic) {
  touch-action: none;
  cursor: grab;
}
.battle-skill.is-unavailable:not(.is-locked):not(.battle-skill--enemy) {
  opacity: .58;
  filter: saturate(.78);
}
.battle-actions.is-reordering .battle-skill:not(.is-locked):not(.battle-skill--basic) {
  transition: transform 110ms ease, box-shadow 110ms ease, opacity 110ms ease;
}
.battle-skill.is-reordering {
  z-index: 8;
  opacity: 1 !important;
  cursor: grabbing !important;
  transform: scale(1.12) translateY(-.12rem);
  box-shadow: 0 0 0 2px rgba(255, 222, 127, .9), 0 0 1.1rem rgba(255, 178, 45, .65);
}
.battle-skill.is-drop-target:not(.is-reordering) {
  transform: translateY(-.12rem);
  box-shadow: 0 0 0 2px rgba(106, 188, 255, .8);
}
.battle-skill--enemy {
  cursor: default;
  pointer-events: auto;
}

/* =============================================================
   YARIK HARİTASI — sağ platformdaki boss etkileşimlidir
   ============================================================= */
.rift-map-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: visible;
  background: transparent;
  opacity: 0;
  transition: opacity 180ms ease;
}

.rift-map-overlay.is-visible { opacity: 1; }

.rift-map-panel {
  position: relative;
  container-type: size;
  width: 100%;
  height: 100%;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.rift-map-overlay.is-visible .rift-map-panel { transform: scale(1); }

/* Artwork ile boss ayni cover-stage icinde tutulur. Boylece ekran orani
   degisse bile platform koordinati kaynak resimden kopmaz. */
.rift-map__stage {
  position: absolute;
  z-index: 0;
  isolation: isolate;
  top: 50%;
  left: 50%;
  width: 100%;
  aspect-ratio: 2560 / 1429;
  transform: translate(-50%, -50%);
}

.rift-map__art {
  position: absolute;
  top: 0;
  left: -50%;
  display: block;
  width: 200%;
  max-width: none;
  height: 100%;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
}

/* The town frame already excludes the bottom HUD. Do not subtract it again. */
body.has-bottom-hud .town-map__frame > .rift-map-overlay { bottom: 0; }
body.has-bottom-hud .town-map__frame > .rift-map-overlay > .rift-map-panel { max-height: none; }

.rift-map__title {
  position: absolute;
  top: clamp(.7rem, 2.4vh, 1.8rem);
  left: 50%;
  margin: 0;
  padding: .38em 1.35em;
  border: 1px solid rgba(229, 191, 98, .72);
  background: linear-gradient(180deg, rgba(36, 15, 24, .92), rgba(8, 8, 16, .9));
  box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .55);
  color: #ffe8a7;
  font: 700 clamp(.75rem, 1.45vw, 1.35rem) var(--font-display);
  letter-spacing: .16em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.rift-map__back {
  position: absolute;
  left: 50%;
  bottom: calc(var(--bottom-hud-height, 3rem) + clamp(.65rem, 1.8vh, 1.2rem));
  min-width: clamp(9.5rem, 16vw, 14rem);
  min-height: clamp(2.35rem, 5vh, 3.25rem);
  border-color: #d5a82f;
  background: linear-gradient(180deg, rgba(26, 48, 124, .97), rgba(5, 16, 59, .98));
  box-shadow: 0 .45rem 1.2rem rgba(0, 0, 0, .65), inset 0 0 .9rem rgba(74, 111, 234, .25);
  color: #fff0b2;
  font-family: var(--font-display);
  font-size: clamp(.58rem, 1vw, .82rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.rift-map__back:hover,
.rift-map__back:focus-visible {
  border-color: #fff0a5;
  filter: brightness(1.18);
  transform: translateX(-50%);
}

@media (orientation: portrait) {
  .rift-map-overlay { background: transparent; }
  .rift-map__back { left: 50%; transform: translateX(-50%); }
}

/* Mobilde Yarık artwork'unun tamami gorunur; ust boss etiketleri ve alt
   boss platformlari cover kirpmasiyla ekran disina cikmaz. */
@media (orientation: landscape) and (max-height: 620px) {
  .rift-map__stage {
    top: 50%;
    width: 110%;
  }
}

/* =============================================================
   MERKEZI SEVIYE ATLAMA KUTLAMASI
   ============================================================= */
.level-up-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100dvh;
  margin: 0;
  padding: 1rem;
  pointer-events: auto;
  overflow: hidden;
  background: radial-gradient(circle at 50% 46%, rgba(222, 165, 55, .24), rgba(2, 4, 9, .9) 62%);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 180ms ease;
}
.level-up-overlay.is-visible { opacity: 1; }
.level-up-panel {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(5.5rem, 8rem) minmax(8rem, 12rem);
  grid-template-areas:
    "title title"
    "portrait label"
    "portrait number"
    "button button";
  align-items: center;
  gap: .18rem 1.2rem;
  width: min(92vw, 28rem);
  padding: clamp(1rem, 4vh, 1.8rem) clamp(1.1rem, 4vw, 2rem);
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(26, 34, 45, .98), rgba(5, 9, 15, .99)) padding-box,
    linear-gradient(180deg, #fff0ad, #c99539 52%, #57401b) border-box;
  box-shadow: 0 0 0 1px #000, 0 1.5rem 5rem #000d, inset 0 0 4rem rgba(222, 162, 48, .12);
  color: var(--c-text);
  transform: translateY(.7rem) scale(.96);
  transition: transform 220ms cubic-bezier(.2, .9, .3, 1);
}
.level-up-overlay.is-visible .level-up-panel { transform: none; }
.level-up__rays {
  position: absolute;
  z-index: -1;
  top: 47%;
  left: 36%;
  width: 22rem;
  aspect-ratio: 1;
  background: repeating-conic-gradient(from 8deg, rgba(255, 210, 92, .17) 0 7deg, transparent 7deg 18deg);
  filter: blur(.4px);
  transform: translate(-50%, -50%);
  animation: levelUpRays 18s linear infinite;
}
.level-up__title {
  grid-area: title;
  margin: 0 0 .55rem;
  color: #ffe59a;
  font: 700 clamp(1rem, 3.5vh, 1.55rem) var(--font-display);
  letter-spacing: .18em;
  text-align: center;
  text-shadow: 0 0 1.2rem rgba(255, 194, 64, .65);
  text-transform: uppercase;
}
.level-up__portrait {
  grid-area: portrait;
  align-self: stretch;
  min-height: 7rem;
  padding: .35rem;
  border: 1px solid rgba(244, 198, 90, .72);
  background: radial-gradient(circle at 50% 65%, rgba(205, 151, 45, .28), rgba(4, 8, 14, .88) 68%);
  box-shadow: inset 0 0 1.5rem rgba(255, 195, 64, .14), 0 0 1rem rgba(230, 172, 49, .18);
}
.level-up__portrait img { display: block; width: 100%; height: 100%; max-height: 9rem; object-fit: contain; }
.level-up__label {
  grid-area: label;
  align-self: end;
  color: var(--c-text-dim);
  font: 700 .62rem var(--font-display);
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
}
.level-up__number {
  grid-area: number;
  align-self: start;
  color: #fff0ac;
  font: 700 clamp(3rem, 13vh, 5.4rem)/.95 var(--font-display);
  text-align: center;
  text-shadow: 0 0 1.8rem rgba(255, 187, 43, .72), 0 .15rem #59320f;
}
.level-up__continue { grid-area: button; justify-self: center; min-width: 10rem; margin-top: .8rem; }
.level-up__star {
  position: absolute;
  color: #ffe991;
  font-size: 1.4rem;
  text-shadow: 0 0 .8rem #ffc32f;
  animation: levelUpStar 1.15s ease-in-out infinite alternate;
}
.level-up__star--one { top: 20%; left: 7%; }
.level-up__star--two { top: 12%; right: 9%; animation-delay: -.4s; }
.level-up__star--three { right: 6%; bottom: 28%; animation-delay: -.75s; }
@keyframes levelUpRays { to { transform: translate(-50%, -50%) rotate(1turn); } }
@keyframes levelUpStar { to { opacity: .42; transform: scale(.68) rotate(20deg); } }

@media (orientation: landscape) and (max-height: 620px) {
  .level-up-overlay { padding: .3rem; }
  .level-up-panel {
    grid-template-columns: minmax(4.3rem, 6.2rem) minmax(7rem, 10rem);
    width: min(82vw, 23rem);
    padding: .55rem 1rem;
    gap: .08rem .8rem;
  }
  .level-up__title { margin-bottom: .2rem; font-size: clamp(.75rem, 3.8vh, 1rem); }
  .level-up__portrait { min-height: 4.8rem; }
  .level-up__portrait img { max-height: 6.3rem; }
  .level-up__number { font-size: clamp(2.5rem, 17vh, 4rem); }
  .level-up__continue { min-width: 8rem; min-height: 1.65rem; margin-top: .3rem; padding: .2rem .8rem; font-size: .58rem; }
}

@media (prefers-reduced-motion: reduce) {
  .level-up-overlay,
  .level-up-panel { transition: none; }
  .level-up__rays,
  .level-up__star { animation: none; }
}

/* Savas kaynak degerleri barin icinde, dolum katmaninin ustunde okunur. */
.ar-hp__bar,
.dg-hp__bar,
.battle-mp__bar { position: relative; }
.ar-hp__bar,
.dg-hp__bar { height: clamp(.78rem, 1.85vh, 1rem); }
.battle-mp__bar { height: clamp(.62rem, 1.35vh, .8rem); }
.ar-hp__value,
.dg-hp__value,
.battle-mp__value {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff7dc;
  font: 800 clamp(.52rem, 1.12vh, .68rem) var(--font-mono);
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
  pointer-events: none;
}

body.is-rift-open .screen--town .town-map__selected { display: none; }

/* Klan paneli: kimlik, ekonomi ve bonuslar birbirinden ayrılmış okunur bloklardır. */
.community-clan-overview { display: grid; grid-template-columns: minmax(11rem, .65fr) minmax(0, 1.8fr); align-items: stretch; gap: .75rem; }
.community-clan-identity { justify-content: flex-start; min-width: 0; padding: .6rem .75rem; border: 1px solid rgba(205,164,81,.32); background: linear-gradient(135deg, rgba(64,20,28,.6), rgba(8,7,14,.82)); color: #f5d47d; font-size: .9rem; }
.community-clan-stats { display: grid; grid-template-columns: repeat(4, minmax(7rem, 1fr)); gap: .45rem; margin: 0; }
.community-clan-metric { display: grid; gap: .18rem; min-width: 0; padding: .45rem .55rem; border: 1px solid rgba(205,164,81,.24); background: rgba(7,6,13,.72); }
.community-clan-metric small { overflow: hidden; color: #9e8967; font-size: .58rem; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.community-clan-metric strong { overflow: hidden; color: #f1d17d; font: 800 .76rem var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.community-clan-rule { margin: .6rem 0; padding: .48rem .65rem; border-left: 3px solid #a77635; background: rgba(112,72,25,.12); color: #c9b58e; font-size: .64rem; line-height: 1.4; }
.community-clan-actions { justify-content: flex-start; margin-top: .65rem; padding-top: .6rem; border-top: 1px solid rgba(205,164,81,.2); }
@media (max-width: 760px) {
  .community-clan-overview { grid-template-columns: 1fr; }
  .community-clan-stats { grid-template-columns: repeat(2, minmax(6.5rem, 1fr)); }
}
.cp-rename{display:grid;gap:.65rem;min-width:min(24rem,76vw)}.cp-rename__input{width:100%}.cp-rename__hint{margin:0;color:#b9aa8a;font-size:.78rem}.cp-rename__error{min-height:1.1rem;margin:0;color:#ef8b82;font-size:.78rem}
.char-select__delete{border-color:#8e3131!important;color:#ffc0b8!important}.char-select__delete:hover{border-color:#d24d43!important;background:linear-gradient(#6e211f,#260b0d)!important}