/* ==========================================================================
   Mobil / dar ekran düzeni: aynı öğeler dikey akışta yeniden yerleşir.
   Sahne, kule ve dört meleği içeren kesit olarak gösterilir.
   ========================================================================== */
#app.layout-mobile { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.layout-mobile #ambient { position: fixed; }

.layout-mobile #stage {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) 10px max(28px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.layout-mobile .panel {
  position: relative;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(26, 18, 43, 0.94), rgba(11, 8, 19, 0.95));
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.45);
}
.layout-mobile .panel-title { font-size: 19px; font-weight: 500; color: #fff; text-shadow: var(--shadow-text); }

/* ---- Üst çubuk ---- */
.layout-mobile .hud-top {
  order: 1;
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: 'profile profile profile' 'wallet gear chart';
  gap: 8px;
}
@media (min-width: 560px) {
  .layout-mobile .hud-top { grid-template-columns: 1fr auto auto auto; grid-template-areas: 'profile wallet gear chart'; }
}
.layout-mobile .hud-profile {
  grid-area: profile;
  display: grid;
  grid-template-columns: 58px 1fr auto;
  grid-template-rows: auto auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 7px 12px 8px 7px;
}
.layout-mobile .avatar { grid-row: 1 / span 3; width: 58px; height: 58px; border-radius: 50%; }
.layout-mobile .avatar img { width: 58px; height: 61px; object-fit: cover; }
.layout-mobile .p-name { font-size: 18px; font-weight: 500; line-height: 1.15; }
.layout-mobile .p-level { font-size: 14px; color: var(--text-2); line-height: 1.2; }
.layout-mobile .p-bar { grid-column: 2 / span 2; height: 11px; margin-top: 4px; }
.layout-mobile .p-bar > i > span { font-size: 9px; }
.layout-mobile .p-pct { grid-column: 3; grid-row: 1 / span 2; font-size: 14px; color: var(--text-2); }

.layout-mobile .hud-wallet {
  grid-area: wallet;
  display: grid;
  grid-template-columns: 34px 1fr 36px;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  padding: 6px 8px 6px 8px;
}
.layout-mobile .w-flame { grid-row: 1 / span 2; width: 30px; filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.7)); }
.layout-mobile .w-label { font-size: 13px; color: var(--text-2); line-height: 1.1; }
.layout-mobile .w-amount { font-size: 20px; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.layout-mobile .btn-plus { grid-column: 3; grid-row: 1 / span 2; }
.layout-mobile .w-delta { left: auto; right: 54px; top: -6px; font-size: 15px; }

.layout-mobile .btn-plus {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #7a4bd2, #4f2b98);
  box-shadow: inset 0 0 0 1px rgba(230, 205, 255, 0.55), 0 0 10px rgba(140, 70, 240, 0.45);
}
.layout-mobile .btn-plus svg { width: 18px; height: 18px; }
.layout-mobile .btn-icon {
  width: 52px;
  height: 100%;
  min-height: 50px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #b9a0ef;
  background: linear-gradient(180deg, rgba(42, 30, 66, 0.95), rgba(18, 12, 32, 0.95));
  box-shadow: inset 0 0 0 1px rgba(190, 170, 230, 0.35), 0 6px 16px rgba(0, 0, 0, 0.45);
}
.layout-mobile .btn-icon svg { width: 26px; height: 26px; }
.layout-mobile .btn-gear { grid-area: gear; }
.layout-mobile .btn-chart { grid-area: chart; }
.layout-mobile .btn-plus:active, .layout-mobile .btn-icon:active { filter: brightness(1.3); }

/* ---- Sahne kesiti ---- */
.layout-mobile .scene-window {
  order: 2;
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 940 / 650;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(0, 0, 0, 0.6);
}
.layout-mobile .damage-plate {
  transform: scale(var(--label-scale));
  transform-origin: 50% 40%;
  flex-direction: column;
  height: auto;
  top: 18px;
  left: 670px;
  width: 210px;
  padding: 4px 10px 6px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(30, 18, 52, 0.92), rgba(16, 10, 28, 0.94));
  box-shadow: inset 0 0 0 1px rgba(200, 170, 255, 0.45), 0 0 16px rgba(140, 70, 240, 0.5);
}
.layout-mobile .dp-title { font-size: 15px; color: #f2ecff; line-height: 1.2; }
.layout-mobile .dp-value { font-size: 26px; }

/* ---- Kartlar ---- */
.layout-mobile .hud-cards {
  order: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 7px;
}
.layout-mobile .card { position: relative; width: 100%; aspect-ratio: 140 / 191; }
.layout-mobile .card-cd-text { font-size: 24px; }

/* ---- Meleklerim ---- */
.layout-mobile .hud-angels { order: 4; padding: 12px 10px 14px; }
.layout-mobile .hud-angels .panel-title { text-align: center; margin-bottom: 6px; }
.layout-mobile .angel-row {
  position: relative;
  display: grid;
  grid-template-columns: 60px 1fr 42px;
  grid-template-rows: auto auto auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.layout-mobile .ar-hit { position: absolute; inset: 2px; border-radius: 8px; }
.layout-mobile .angel-row.is-selected .ar-hit { background: linear-gradient(90deg, rgba(150, 90, 255, 0.24), rgba(150, 90, 255, 0.04)); box-shadow: inset 2px 0 0 rgba(205, 160, 255, 0.85); }
.layout-mobile .ar-icon { position: relative; grid-row: 1 / span 4; width: 60px; height: 60px; pointer-events: none; }
.layout-mobile .ar-icon img { width: 60px; height: 60px; filter: drop-shadow(0 0 8px rgba(150, 80, 240, 0.6)); }
.layout-mobile .ar-name, .layout-mobile .ar-lv, .layout-mobile .ar-dmg, .layout-mobile .ar-build { grid-column: 2; position: relative; pointer-events: none; }
.layout-mobile .ar-name { font-size: 16px; color: #fff; }
.layout-mobile .ar-lv { font-size: 14px; color: #cbc3dd; }
.layout-mobile .ar-dmg { font-size: 14px; color: #958bae; font-variant-numeric: tabular-nums; }
.layout-mobile .ar-build { height: 4px; margin-top: 4px; }
.layout-mobile .btn-up {
  grid-column: 3;
  grid-row: 1 / span 4;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #7a4bd6, #5530a8);
  box-shadow: inset 0 0 0 1px rgba(230, 205, 255, 0.55), 0 0 10px rgba(140, 70, 240, 0.45);
}
.layout-mobile .angel-row.is-building .btn-up, .layout-mobile .angel-row.is-max .btn-up { background: linear-gradient(180deg, #3b2370, #26154a); }

.layout-mobile .upgrade-box { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 14px; text-align: center; }
.layout-mobile .ub-title { font-size: 18px; font-weight: 500; color: #fff; }
.layout-mobile .ub-desc { font-size: 14px; color: #b7a9d8; max-width: 320px; }
.layout-mobile .ub-cost { margin: 6px 0 4px; }
.layout-mobile #upgradeBtn { width: min(260px, 100%); }
.layout-mobile [data-ub='poor'] #upgradeBtn,
.layout-mobile [data-ub='limit'] #upgradeBtn,
.layout-mobile [data-ub='max'] #upgradeBtn { filter: grayscale(0.7) brightness(0.65); }

/* ---- Sezon Sıralaması ---- */
.layout-mobile .hud-ranking { order: 5; padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.layout-mobile .r-head { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.layout-mobile .r-trophy { width: 32px; }
.layout-mobile .r-time { padding: 2px 4px; color: #cbc2de; }
.layout-mobile .r-rows { display: flex; flex-direction: column; isolation: isolate; text-align: left; margin-top: 4px; }
.layout-mobile .rk-row { position: relative; height: 40px; padding: 0 10px; gap: 10px; font-size: 16px; }
.layout-mobile .rk-row.is-me::before { left: 0; right: 0; }
.layout-mobile .rk-n { width: 22px; text-align: center; }
.layout-mobile .rk-crown { width: 24px; height: 24px; }
.layout-mobile .rk-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Bildirimler ---- */
.layout-mobile #toasts {
  position: fixed;
  left: 50%;
  top: max(10px, env(safe-area-inset-top));
  width: min(92vw, 420px);
  transform: translateX(-50%);
  z-index: 60;
}

/* Yeni özellikler – mobil */
.layout-mobile .hud-top { grid-template-columns: 1fr auto auto auto; grid-template-areas: 'profile profile profile profile' 'wallet quests gear chart'; }
@media (min-width: 560px) {
  .layout-mobile .hud-top { grid-template-columns: 1fr auto auto auto auto; grid-template-areas: 'profile wallet quests gear chart'; }
}
.layout-mobile .btn-quests { grid-area: quests; position: relative; width: 52px; min-height: 50px; }
.layout-mobile .banner { position: fixed; left: 50%; top: 26%; width: min(92vw, 520px); margin-left: 0; transform: translate(-50%, -12px) scale(.94); }
.layout-mobile .banner.show { transform: translate(-50%, 0); }
.layout-mobile .banner .bn-title { font-size: clamp(28px, 8vw, 42px); }
.layout-mobile .banner .bn-sub { font-size: 14px; }
.layout-mobile .avatar.has-av img { width: 58px; height: 58px; border-radius: 50%; object-fit: contain; }