#ws-status { font-weight: bold; display: flex; align-items: center; gap: 0.5rem; }
  .status-online { color: green; }
  .status-offline { color: red; }

  #user-rank { font-size: 0.9rem; color: gray; }

  .currency-box { display: flex; align-items: center; gap: 0.3rem; font-weight: bold; font-size: 0.95rem; }
  .currency-box i { font-size: 1.2rem; }
  .currency-box { color: #11ff11; }
  .currency-box.diamonds { color: #0dcaf0; }

  .energy-box { display: flex; align-items: center; gap: 0.25rem; font-size: 0.85rem; font-weight: 600; color: #ffc107; }
  .energy-box i { font-size: 1.1rem; }
  .energy-max { color: #aaa; }
  #user-energy-text { color: #000; text-shadow: 0 0 2px rgba(255,255,255,.8); }
  .nav-icon {
  font-size: 40px;
}

.main-action {
  font-size: 56px;
  color: #ff4d4f;
}

.game-nav {
  background: #111;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid rgba(255,255,255,.1);
}

.nav-item {
  cursor: pointer;
  user-select: none;
  transition: transform .15s ease, color .15s ease;
}

.nav-item:active {
  transform: scale(.92);
}

.nav-icon {
  font-size: 40px;
  opacity: .85;
}

.main-icon {
  font-size: 56px;
  color: #ff4d4f;
  text-shadow: 0 0 12px rgba(255,77,79,.6);
}

.nav-label {
  font-size: 11px;
  opacity: .75;
}

.main-action .nav-label {
  font-size: 12px;
}

.nav-item.active .nav-icon,
.nav-item.active .nav-label {
  color: #0d6efd;
  opacity: 1;
}

.main-action.active .main-icon {
  color: #ffc107;
  text-shadow: 0 0 16px rgba(255,193,7,.8);
}

.main-action.main-action--idle .main-icon,
.main-action.main-action--idle .nav-label {
  color: #ff4d4f;
}

.main-action.main-action--idle .main-icon {
  text-shadow: 0 0 12px rgba(255,77,79,.6);
}

.main-action.main-action--in-battle .main-icon,
.main-action.main-action--in-battle .nav-label {
  color: #ffc107;
}

.main-action.main-action--in-battle .main-icon {
  text-shadow: 0 0 16px rgba(255,193,7,.8);
}

.main-action.main-action--battle-open .main-icon,
.main-action.main-action--battle-open .nav-label {
  color: #2ecc71;
}

.main-action.main-action--battle-open .main-icon {
  text-shadow: 0 0 16px rgba(46,204,113,.8);
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.main-action {
  animation: pulse 2.2s infinite;
}

.menu-overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--app-header-height);
  bottom: 90px; /* нижнее меню */
  background: #fff;
  z-index: 1000;
}

#user_quests {
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #0b1020;
  color: #f8f4e8;
  z-index: 2000;
}

#user_quests .overlay-header { flex: 0 0 auto; border-color: rgba(255,255,255,.12); }
.quests-content {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.quest-screen { min-height: 100%; padding: 18px; background-color: #10182a; background-size: cover; background-position: center; }
.quest-screen-top { display: flex; justify-content: space-between; gap: 24px; align-items: start; margin-bottom: 18px; }
.quest-screen-eyebrow { color: #8ba4cc; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.quest-screen h2 { margin: 4px 0 0; font-size: clamp(20px, 3vw, 32px); font-weight: 800; }
.quest-total-progress { min-width: 126px; padding: 10px 14px; text-align: right; border-radius: 12px; background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.12); }
.quest-total-progress span { display: block; color: #b9c5d9; font-size: 11px; }.quest-total-progress strong { color: #ffd76b; font-size: 19px; }
.quest-screen-body { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(190px, .7fr); gap: 18px; }
.quest-stages { border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(5,9,18,.72); }
.quest-stage-head, .quest-stage { padding: 10px 14px; }
.quest-stage-head { color: #92a0b7; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.quest-stage { border-top: 1px solid rgba(255,255,255,.08); min-height: 74px; }.quest-stage-main { min-width: 0; }.quest-stage.is-locked { opacity: .45; }.quest-stage.is-complete { background: rgba(58,166,100,.12); }
.quest-stage-name { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 700; }.quest-stage-name b { display: grid; flex: 0 0 28px; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: #182033; background: #ffd76b; }.quest-stage-name span { min-width: 0; overflow-wrap: anywhere; }
.quest-stage-progress strong { display: block; font-size: 12px; }.quest-stage-progress div { height: 5px; margin-top: 5px; overflow: hidden; border-radius: 10px; background: rgba(255,255,255,.13); }.quest-stage-progress i { display: block; height: 100%; background: #5ed488; }
.quest-stage-progress { width: 136px; }.quest-stage-energy { min-width: 64px; color: #ffd44d; font-weight: 800; }.quest-stage-rewards { flex-wrap: wrap; max-width: 180px; gap: 5px; font-size: 11px; color: #dce6f7; }.quest-stage-rewards span { white-space: nowrap; }.quest-stage-reward-inline { margin-top: 8px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }.quest-stage-reward-label, .quest-location-reward-label { color: #8ba4cc; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.quest-stage-reward-values, .quest-location-reward-values { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; color: #f2e7b6; }.quest-stage-reward-values span, .quest-location-reward-values span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }.quest-stage-reward-values span[title], .quest-location-reward-values span[title] { cursor: help; border-bottom: 1px dotted rgba(255,255,255,.45); }.quest-stage-action { min-width: 132px; }.quest-stage-action, .quest-complete-bar button { border: 0; border-radius: 9px; padding: 9px 10px; background: linear-gradient(180deg,#ffe17e,#f3a928); color: #2a1b00; font-size: 12px; font-weight: 800; }.quest-stage-action:disabled { color: #ccd2dd; background: rgba(255,255,255,.1); }
.quest-location { min-height: 230px; padding: 18px; display: flex; flex-direction: column; justify-content: end; border-radius: 14px; background: linear-gradient(180deg, rgba(14,21,38,.16), rgba(6,10,20,.93)); border: 1px solid rgba(255,255,255,.12); }.quest-location-label { color: #aebbd0; font-size: 12px; }.quest-location-enemy { margin-top: 6px; font-size: 20px; font-weight: 800; }.quest-location-reward { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.quest-complete-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: rgba(44,158,86,.22); border: 1px solid rgba(94,212,136,.4); }.quest-complete-bar span { font-weight: 700; color: #baf7ce; }.quest-complete-bar button { background: #62d58b; }
.quests-empty { display: grid; min-height: 100%; place-content: center; gap: 10px; text-align: center; color: #aebbd0; }.quests-empty i { font-size: 44px; }
@media (max-width: 700px) { .quest-screen { padding: 12px; }.quest-screen-body { grid-template-columns: 1fr; }.quest-location { min-height: 100px; }.quest-stage-head { display: none; }.quest-stage-progress { width: 112px; }.quest-stage-energy { min-width: 48px; }.quest-stage-action { width: 100%; } }


.overlay-header {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-weight: 600;
  border-bottom: 1px solid #eee;
}

.close-overlay {
  font-size: 26px;
  cursor: pointer;
}

.overlay-content {
  padding: 12px;
  overflow-y: auto;
  height: calc(100vh - 300px);
}

#app-header {
  height: 96px; /* подбери */
}

:root {
  --app-header-height: 96px;
}

#user_room {
  background: none;
  min-height: calc(100vh - 96px - 90px); /* можно оставить для высоты контента */
  position: relative;
  padding: 16px;
}

.room-panel {
  margin-bottom: 130px;
  z-index: 3 !important;
}


body {
  background-image: url('/img/bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  position: relative;
}

body::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 0;
}

body.browser-fallback-mode {
  background: linear-gradient(135deg, #f3efe6 0%, #e5edf4 100%);
  animation: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

body.browser-fallback-mode::before {
  display: none;
}

body.browser-fallback-mode .game-nav {
  display: none !important;
}

.browser-fallback-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.browser-fallback {
  width: min(100%, 420px);
  padding: 32px 24px;
  text-align: center;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
}

.browser-fallback h1 {
  margin: 0 0 12px;
  font-size: 2rem;
  color: #222;
}

.browser-fallback p {
  margin: 0;
  color: #5c6470;
  line-height: 1.5;
}


#user_room > * {
  position: relative;
  z-index: 1;
}

@keyframes bgMove {
  from { background-position: center top; }
  to   { background-position: center bottom; }
}

body {
  animation: bgMove 60s linear infinite;
}

#user-name{
  color:greenyellow;
  mix-blend-mode: difference;
  text-shadow:
    0 0 2px black,
    0 0 6px black;
}

#user-id{
  color:aqua;
  mix-blend-mode: difference;
  text-shadow:
    0 0 2px black,
    0 0 6px black;
}

#user-rank{
  color:rgb(0, 255, 38);
  mix-blend-mode: difference;
  text-shadow:
    0 0 2px black,
    0 0 6px black;
}

.profile-layout {
  display: block;
  color: #CCC;
}

.inventory-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.inventory-panel-header h6 {
  margin: 0;
}

.inventory-sort-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.16);
}

.inventory-sort-button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #fff;
  font-size: 1rem;
  transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.inventory-sort-button:hover {
  background: rgba(255,255,255,.08);
}

.inventory-sort-button.active {
  background: linear-gradient(180deg, rgba(255,193,7,.96), rgba(255,152,0,.96));
  color: #2f1a00;
  box-shadow: 0 6px 14px rgba(0,0,0,.24);
}

.inventory-sort-button:focus {
  outline: none;
  box-shadow: 0 0 0 0.18rem rgba(255,193,7,.18);
}

.inventory-sort-button.active:focus {
  box-shadow:
    0 6px 14px rgba(0,0,0,.24),
    0 0 0 0.18rem rgba(255,193,7,.18);
}

.equipment-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.equip-slot {
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: 92px;
  color: #fff;
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
}

.equip-slot i {
  font-size: 24px;
}

.equip-slot .slot-item-name {
  width: 100%;
  min-width: 0;
  text-align: center;
  font-size: 0.58rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  max-height: 2.2em;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.equip-slot .slot-item-damage {
  font-size: 0.52rem;
  color: #ff7043;
  font-weight: 700;
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

/* Battle screen: character appears full-bleed over the main menu background,
   top and bottom app menus are hidden while this is up (see body.in-battle) */
body.in-battle #location-battle-view.location-battle-card {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

.battle-screen {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
}

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

.battle-hud-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 190px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.08);
}

.battle-hud-name {
  font-weight: 800;
  font-size: .92rem;
  color: #fff;
  text-shadow: 0 0 6px rgba(0,0,0,.6);
}

.battle-hud-hp {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 700;
  color: #baf7ce;
}

.battle-hud-hp i { color: #3adf6e; }

.battle-hud-hp-bar {
  width: 120px;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.08);
}

.battle-hud-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #3adf6e, #1fb954);
  transition: width .25s ease;
}

.battle-hud-timer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 700;
  color: #ffe08a;
}

.battle-hud-close {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  font-size: 1.15rem;
}

.battle-scene {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.battle-enemy-portrait {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.55));
}

.battle-enemy-portrait img {
  max-width: 62vmin;
  max-height: 50vh;
  object-fit: contain;
}

.battle-enemy-portrait .battle-portrait-fallback {
  font-size: 5rem;
}

.battle-scene-message {
  max-width: 90%;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.1);
  color: #ffe08a;
  font-size: .82rem;
  text-align: center;
}

.battle-dock {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.battle-dock-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.battle-dock-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.1);
  color: #e6eef8;
  font-size: .74rem;
  font-weight: 700;
}

.battle-dock-chip i { font-size: 1rem; }
.battle-dock-chip.battle-dock-damage { color: #ffd76b; }
.battle-dock-chip.battle-dock-action-surrender { color: #ff8b8b; }
.battle-dock-chip.active { background: rgba(255,193,7,.22); border-color: rgba(255,193,7,.4); color: #ffe08a; }

.battle-rating-panel {
  max-height: 30vh;
  overflow-y: auto;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.1);
}

.ability-strip {
  display: flex;
  gap: 8px;
  padding: 2px;
  overflow-x: auto;
  overflow-y: hidden;
}

.ability-slot {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg,#2a2f3a,#121417);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  color: #fff;
  position: relative;
}

.ability-slot.disabled { opacity: .4; pointer-events: none; }
.ability-icon { font-size: 26px; }

.ability-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: #ffc107;
  color: #241800;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}

.ability-cost {
  position: absolute;
  bottom: -6px;
  right: -6px;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(0,0,0,.7);
  border: 1px solid rgba(255,255,255,.12);
  color: #a8d1ff;
  font-size: 10px;
  font-weight: 800;
}

@media (max-width: 700px) {
  .battle-hud-info { min-width: 150px; padding: 8px 10px; }
  .battle-hud-hp-bar { width: 90px; }
  .battle-enemy-portrait img { max-width: 78vmin; }
}

.inventory-item {
  background: rgba(0,0,0,.6);
  border-radius: 8px;
  padding: 6px;
  position: relative;
  text-align: center;
  font-size: 0.65rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.inventory-item i {
  font-size: 26px;
}

.inventory-item .inventory-item-count {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 24px;
  padding: 2px 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,193,7,.95), rgba(255,152,0,.95));
  color: #2f1a00;
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1.1;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
}

.inventory-item .item-name {
  width: 100%;
  min-width: 0;
  line-height: 1.1;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.inventory-item .item-damage {
  font-size: 0.7rem;
  color: #ff7043;
  font-weight: 700;
  margin-top: 2px;
}

.locations-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#locations-list{
  color: #CCC;
}
.location-card {
  background: rgba(0,0,0,.6);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 120px;
  position: relative;
}

.location-card.available {
  border: 2px solid #28a745;
}

.location-card.unavailable {
  border: 2px solid #dc3545;
  opacity: 0.7;
}

.location-card .location-icon {
  font-size: 48px;
}

.location-card.available .location-icon {
  color: #6c757d;
}

.location-card.unavailable .location-icon {
  color: #dc3545;
}

.location-card .location-name {
  font-weight: bold;
  font-size: 1rem;
}

.location-card.unavailable .location-name {
  color: #dc3545;
}

.location-card .lock-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 24px;
  color: #dc3545;
}

.location-card .level-req {
  font-size: 0.8rem;
  color: #ffc107;
  margin-top: auto;
}

.location-card .location-meta {
  font-size: 0.8rem;
  color: rgba(255,255,255,.75);
}

.location-map-card {
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 16px;
  color: #fff;
}

.location-map-title {
  font-size: 1.05rem;
  font-weight: 700;
}

.location-map-subtitle {
  font-size: 0.82rem;
  color: rgba(255,255,255,.72);
}

.location-map-scroll {
  overflow-x: auto;
  padding-bottom: 8px;
}

.location-levels-track {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 112px;
  padding: 20px 24px 0;
  gap: 0;
}

.location-levels-track.single {
  justify-content: center;
}

.location-levels-track.single::before {
  display: none;
}

.location-levels-track::before {
  content: '';
  position: absolute;
  left: 24px;
  right: 24px;
  top: 36px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.24));
}

.location-level-item {
  position: relative;
  z-index: 1;
  flex: 0 0 72px;
  width: 72px;
  text-align: center;
}

.location-level-item.is-clickable {
  cursor: pointer;
}

.location-level-item.is-selected .location-level-node {
  outline: 3px solid rgba(255,255,255,.3);
  outline-offset: 4px;
}

.location-level-node {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin: 0 auto 12px;
  border: 3px solid rgba(255,255,255,.88);
  background: radial-gradient(circle at 30% 30%, #fff2b3, #ffc107 58%, #cc8a00 100%);
  box-shadow: 0 0 18px rgba(255,193,7,.45);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.location-level-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
}

.location-level-caption {
  font-size: 0.7rem;
  color: rgba(255,255,255,.68);
}

.location-level-item.level-completed .location-level-node {
  border-color: rgba(190,255,214,.92);
  background: radial-gradient(circle at 30% 30%, #dfffe9, #28a745 58%, #177332 100%);
  box-shadow: 0 0 18px rgba(40,167,69,.45);
}

.location-level-item.level-completed .location-level-label,
.location-level-item.level-completed .location-level-caption {
  color: #aef0c1;
}

.location-level-item.level-available .location-level-node {
  transform: scale(1.08);
}

.location-level-item.level-available .location-level-label,
.location-level-item.level-available .location-level-caption {
  color: #ffe08a;
}

.location-level-item.level-locked .location-level-node {
  border-color: rgba(255,205,205,.92);
  background: radial-gradient(circle at 30% 30%, #ffd6d6, #dc3545 58%, #8f1724 100%);
  box-shadow: 0 0 18px rgba(220,53,69,.35);
}

.location-level-item.level-locked .location-level-label,
.location-level-item.level-locked .location-level-caption {
  color: #ff9da5;
}

.location-battle-card {
  background: linear-gradient(180deg, rgba(7,13,24,.88), rgba(16,24,38,.82));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 14px;
  color: #fff;
  box-shadow: 0 18px 36px rgba(0,0,0,.28);
}

.location-battle-placeholder {
  text-align: center;
  color: rgba(255,255,255,.76);
  padding: 20px 12px;
}

.battle-portrait-fallback {
  font-size: 1.9rem;
  color: rgba(255,255,255,.82);
}

.location-battle-message {
  font-size: .84rem;
  color: rgba(255,255,255,.84);
}

.location-battle-hint {
  font-size: .78rem;
  color: rgba(255,255,255,.62);
}

.battle-rewards-popup {
  position: fixed;
  inset: 0;
  z-index: 1002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background:
    radial-gradient(circle at top, rgba(255,208,88,.18), transparent 34%),
    rgba(3, 8, 18, .72);
  backdrop-filter: blur(8px);
}

.battle-rewards-popup-content {
  width: min(100%, 380px);
}

.battle-reward-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 22px 18px 18px;
  color: #fff6de;
  background:
    radial-gradient(circle at top, rgba(255,220,120,.28), transparent 36%),
    linear-gradient(180deg, rgba(35,24,7,.98), rgba(17,15,10,.96));
  border: 1px solid rgba(255,225,150,.26);
  box-shadow:
    0 28px 60px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.08);
  animation: battleRewardPopupEnter .24s ease-out;
}

.battle-reward-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 45%),
    linear-gradient(320deg, rgba(255,180,60,.08), transparent 40%);
  pointer-events: none;
}

.battle-reward-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.84);
}

.battle-reward-badge {
  width: 62px;
  height: 62px;
  margin: 0 auto 12px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ffd86d, #ffb100);
  color: #402500;
  font-size: 1.85rem;
  box-shadow: 0 14px 34px rgba(255,177,0,.28);
}

.battle-reward-title {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.battle-reward-main {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}

.battle-reward-main-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  flex-shrink: 0;
}

.battle-reward-main-icon.xp {
  background: linear-gradient(180deg, #ffe285, #ffba08);
  color: #402500;
  box-shadow: 0 12px 26px rgba(255,186,8,.22);
}

.battle-reward-main-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,232,183,.72);
}

.battle-reward-main-value {
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
}

.battle-reward-list-title {
  margin-top: 16px;
  margin-bottom: 10px;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,232,183,.72);
}

.battle-reward-list {
  display: grid;
  gap: 10px;
}

.level-up-reward-header {
  text-align: center;
  font-weight: 800;
  color: #11ff11;
  text-shadow: 0 0 10px rgba(17, 255, 17, 0.4);
  margin-bottom: 12px;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
}

.battle-reward-list-title.small {
  font-size: 0.7rem;
  margin-top: 10px;
}

.battle-reward-item {

  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}

.battle-reward-item-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.15rem;
  color: #fff4cf;
  background: linear-gradient(180deg, rgba(255,214,112,.24), rgba(255,164,32,.14));
}

.battle-reward-item-text {
  font-size: .95rem;
  font-weight: 600;
  color: #fff;
}

.battle-reward-empty {
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(255,255,255,.12);
  text-align: center;
  color: rgba(255,255,255,.68);
}

.battle-dialog-card {
  text-align: center;
}

.battle-dialog-subtitle {
  margin: 0 auto 18px;
  max-width: 28ch;
  color: rgba(255, 241, 210, 0.82);
  font-size: 0.95rem;
  line-height: 1.45;
}

.battle-dialog-actions {
  display: grid;
  gap: 10px;
}

.battle-dialog-actions.single {
  grid-template-columns: 1fr;
}

.battle-dialog-btn {
  width: 100%;
  min-height: 52px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
}

@keyframes battleRewardPopupEnter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.96);
  }

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

@media (max-width: 576px) {
  .location-battle-stage {
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
    gap: 8px;
  }

  .battle-vs {
    width: 34px;
    height: 34px;
    font-size: .62rem;
  }

  .location-battle-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .location-battle-header {
    flex-wrap: wrap;
  }

  .location-battle-footer {
    align-items: stretch;
  }

  .location-battle-footer .btn {
    width: 100%;
  }

  .battle-reward-card {
    padding: 20px 14px 14px;
  }

  .battle-reward-main {
    gap: 12px;
    padding: 12px;
  }

  .battle-reward-main-value {
    font-size: 1.08rem;
  }
}

.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loading-content {
  text-align: center;
  color: #fff;
}

.loading-content .spinner-border {
  width: 3rem;
  height: 3rem;
}

.loading-content p {
  color: #ccc !important;
}

/* === GLOBAL UI IMPROVE === */

.app-header {
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  padding: 10px;
  margin: 8px;
}

/* USER TEXT */
#user-name {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 2px 6px rgba(0,0,0,.8);
}

#user-id {
  color: #aaa;
}

#user-rank {
  color: #4caf50;
  font-size: 0.85rem;
}

/* PROGRESS BARS */
.progress {
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,.1);
}

.progress-bar {
  border-radius: 10px;
}

/* ENERGY */
#user-energy-text {
  color: #000;
  font-weight: 700;
}

/* MAIN BUTTON */
#spend-energy-btn {
  margin: 20px auto;
  display: block;
  width: 90%;
  font-size: 18px;
  font-weight: 700;
  border-radius: 14px;
  padding: 14px;
  background: linear-gradient(135deg, #ffcc00, #ff9800);
  border: none;
  box-shadow: 0 6px 20px rgba(255, 152, 0, 0.4);
}

#spend-energy-btn:active {
  transform: scale(0.96);
}

/* SERVER STATUS */
#ws-status {
  background: rgba(0,0,0,.5);
  padding: 8px 12px;
  border-radius: 10px;
  display: inline-flex;
}

/* NAV BAR */
.game-nav {
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.1);
}

/* NAV ITEMS */
.nav-item {
  color: #aaa;
}

.nav-item.active {
  color: #0d6efd;
}

.nav-item-with-badge {
  position: relative;
}

.nav-dot-badge {
  position: absolute;
  top: 6px;
  right: 18px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff3b30;
  border: 2px solid rgba(0,0,0,.8);
  box-shadow: 0 0 10px rgba(255,59,48,.55);
}

/* MAIN ACTION BUTTON */
.main-action {
  position: relative;
  top: -18px;
}

.main-icon {
  font-size: 64px;
  color: #ff4d4f;
  text-shadow: 0 0 20px rgba(255,77,79,.9);
}

/* OVERLAYS */
.menu-overlay {
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(12px);
}

.overlay-header {
  background: rgba(0,0,0,.6);
  color: #fff;
}
#battle-dialog-popup{
  z-index:5000;
}
/* CARDS */
.location-card,
.inventory-item,
.equip-slot {
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(6px);
  border-radius: 12px;
}
#user-exp-text {
  font-size: 0.75rem;
  color: #aaa;
  white-space: nowrap;       /* ❗ запрет переноса */
  overflow: hidden;
  text-overflow: ellipsis;   /* если вдруг очень длинный текст */
}

.avatar-box {
  width: 56px;
  height: 56px;
  min-width: 56px; /* ❗ не сжимается */
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.2);
  box-shadow: 0 4px 10px rgba(0,0,0,.5);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.1),
    0 4px 12px rgba(0,0,0,.6),
    0 0 12px rgba(13,110,253,.4);
  padding:0;
  margin-right: 12px;
}

#user-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  /* ❗ убираем любые bootstrap-эффекты */
  max-width: none;
}

.friend-msg-success { color: #198754; } /* bootstrap success */
.friend-msg-error   { color: #dc3545; }

.quest-reward-item {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.quest-reward-item:hover,
.quest-reward-item:focus-visible {
  color: #ffe285;
}

.tooltip {
  z-index: 2200;
}

.tooltip-inner {
  background: rgba(10, 14, 24, 0.96);
  color: #fff;
  border: 1px solid rgba(255, 226, 133, 0.25);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.28);
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: rgba(10, 14, 24, 0.96);
}

.friends-overlay-content {
  display: grid;
  gap: 14px;
  color: #f4f1e8;
}

.friends-panel {
  background: linear-gradient(180deg, rgba(16,22,34,.92), rgba(10,14,24,.88));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 16px 32px rgba(0,0,0,.22);
}

.friends-panel-add {
  background:
    radial-gradient(circle at top right, rgba(255,193,7,.12), transparent 35%),
    linear-gradient(180deg, rgba(20,27,40,.95), rgba(11,16,27,.92));
}

.friends-section-title {
  margin: 0 0 12px;
  color: #fff5d6;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.friends-section-counter {
  margin-left: 8px;
  color: rgba(255,255,255,.68);
  font-size: .82rem;
  font-weight: 600;
}

.friends-add-group {
  gap: 10px;
}

.friends-input {
  background: rgba(255,255,255,.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px !important;
  min-height: 48px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  width:100% !important;
}

.friends-input::placeholder {
  color: rgba(255,255,255,.42);
}

.friends-input:focus {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,193,7,.55);
  box-shadow: 0 0 0 0.18rem rgba(255,193,7,.14);
}

.friends-primary-btn {
  border: 0;
  border-radius: 14px;
  min-height: 48px;
  padding: 0 18px;
  font-weight: 700;
  color: #2d1a00;
  background: linear-gradient(180deg, #ffd86b, #ffb11c);
  box-shadow: 0 10px 18px rgba(255,177,28,.22);
}

.friends-add-hint {
  margin-top: 10px;
  color: rgba(255,245,214,.64);
  font-size: .8rem;
}

.friends-inline-message {
  min-height: 1.2rem;
  font-size: .82rem;
}

.friends-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.friend-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
}

.friend-entry.is-online {
  background:
    linear-gradient(90deg, rgba(46,204,113,.12), transparent 55%),
    rgba(255,255,255,.06);
  border-color: rgba(46,204,113,.2);
}

.friend-entry-meta {
  min-width: 0;
}

.friend-entry-name {
  color: #fff;
  font-weight: 700;
  line-height: 1.2;
  word-break: break-word;
}

.friend-entry-subtitle {
  margin-top: 3px;
  color: rgba(255,255,255,.62);
  font-size: .78rem;
}

.friend-entry-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.friend-action-btn {
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
}

.friend-action-btn.success {
  color: #062914;
  background: linear-gradient(180deg, #7ef0ad, #37c870);
}

.friend-action-btn.danger {
  color: #fff3f3;
  background: linear-gradient(180deg, #ff7f7f, #db4343);
}

.friend-action-btn.ghost {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.88);
}

.friend-action-btn:disabled {
  opacity: .55;
}

.friends-empty-state {
  padding: 18px 14px;
  border-radius: 16px;
  text-align: center;
  color: rgba(255,255,255,.58);
  background: rgba(255,255,255,.03);
  border: 1px dashed rgba(255,255,255,.1);
}

@media (max-width: 576px) {
  .friends-add-group {
    flex-direction: column;
  }

  .friends-primary-btn {
    width: 100%;
  }

  .friend-entry {
    flex-direction: column;
    align-items: stretch;
  }

  .friend-entry-actions {
    width: 100%;
    justify-content: stretch;
  }

  .friend-action-btn {
    flex: 1 1 0;
  }
}

.friend-toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 104px;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(24, 32, 48, 0.94);
  color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
  transform: translateY(18px);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}

.friend-toast.show {
  transform: translateY(0);
  opacity: 1;
}

.friend-toast i {
  color: #ff6b6b;
  font-size: 1.2rem;
}

.friend-toast-text {
  font-size: 0.92rem;
  line-height: 1.25;
}

/* Events */
.events-side-container {
  position: absolute;
  top: 10px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.events-side-container.left {
  left: 10px;
}

.events-side-container.right {
  right: 10px;
  top: 10px;
}

.event-icon-wrapper {
  position: relative;
  width: 60px;
  height: 60px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.event-icon-wrapper:active {
  transform: scale(0.9);
}

.event-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
}

.event-timer-badge {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 4px;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

.event-timer-badge.upcoming {
  color: #ffc107;
}

.event-timer-badge.active {
  color: #28a745;
}


/* Всплывающее окно для событий */
.event-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 20px;
  border-radius: 10px;
  z-index: 10000;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

/* Позиционирование событий в локации */
#location-view .events-side-container {
  z-index: 50;
}

.quests-side-container {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quest-icon-wrapper {
  position: relative;
  width: 64px;
  height: 64px;
  border: 0;
  padding: 0;
  background: transparent;
}

.quest-icon-glow {
  position: absolute;
  inset: 6px;
  border-radius: 20px;
  background: radial-gradient(circle at 30% 30%, rgba(255,210,110,.42), rgba(255,145,0,.08) 60%, transparent 100%);
  filter: blur(2px);
}

.quest-icon-main {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(39,27,8,.96), rgba(20,15,9,.94));
  border: 1px solid rgba(255,205,110,.28);
  box-shadow: 0 12px 24px rgba(0,0,0,.28);
  color: #ffcf66;
  font-size: 2rem;
}

.quest-icon-badge {
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,.82);
  border: 1px solid rgba(255,255,255,.12);
  color: #ffd866;
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
}

.quest-popup {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(3, 8, 18, .72);
  backdrop-filter: blur(8px);
}

.quest-popup-card {
  position: relative;
  width: min(100%, 390px);
  border-radius: 22px;
  padding: 22px 18px 18px;
  color: #fff6de;
  background:
    radial-gradient(circle at top, rgba(255,205,110,.2), transparent 36%),
    linear-gradient(180deg, rgba(35,24,7,.98), rgba(17,15,10,.96));
  border: 1px solid rgba(255,225,150,.22);
  box-shadow: 0 28px 60px rgba(0,0,0,.42);
}

.quest-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.84);
}

.quest-popup-badge {
  width: 62px;
  height: 62px;
  margin: 0 auto 12px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ffd86d, #ffb100);
  color: #402500;
  font-size: 1.85rem;
  box-shadow: 0 14px 34px rgba(255,177,0,.28);
}

.quest-popup-title {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.quest-popup-subtitle {
  margin: 10px auto 16px;
  max-width: 30ch;
  text-align: center;
  color: rgba(255,241,210,.8);
  line-height: 1.45;
}

.quest-popup-meta {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,245,214,.84);
  font-size: .84rem;
}

.quest-primary-btn {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffd86b, #ffb11c);
  color: #2d1a00;
  font-weight: 800;
  box-shadow: 0 10px 18px rgba(255,177,28,.22);
}

.quest-primary-btn:disabled {
  opacity: .6;
}

.quest-reward-card {
  width: min(100%, 390px) !important;
}

.shop-offers-list {
  display: grid;
  gap: 10px;
}

.shop-offer-item {
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}

.shop-offer-diamonds {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #fff4d0;
}

.shop-offer-diamonds i {
  color: #67d0ff;
}

.shop-offer-price {
  margin: 4px 0 10px;
  font-size: .9rem;
  color: rgba(255,245,214,.85);
}

.shop-buy-btn {
  min-height: 42px;
}

.location-levels-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.location-level-card {
  display: grid;
  grid-template-columns: minmax(92px, 120px) minmax(96px, auto) minmax(0, 1fr) minmax(86px, auto);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.1);
  color: #fff;
}

.location-level-card.is-clickable { cursor: pointer; }

.location-level-card.is-selected {
  border-color: rgba(255,224,138,.58);
  box-shadow: 0 0 0 2px rgba(255,193,7,.16), 0 14px 28px rgba(0,0,0,.22);
}

.location-level-card.level-completed { border-color: rgba(40,167,69,.42); }
.location-level-card.level-available { border-color: rgba(255,193,7,.48); }
.location-level-card.level-locked { border-color: rgba(220,53,69,.42); opacity: .72; }

.location-level-boss {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 0;
  text-align: center;
}

.location-level-avatar {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.76);
  font-size: 1.8rem;
}

.location-level-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.location-level-enemy-name {
  max-width: 100%;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.location-level-attack {
  border: 0;
  border-radius: 11px;
  padding: 10px 14px;
  background: linear-gradient(180deg,#ffe17e,#f3a928);
  color: #2a1b00;
  font-size: .82rem;
  font-weight: 900;
}

.location-level-card.level-locked .location-level-attack {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.62);
}

.location-level-reward,
.location-level-stats {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.07);
}

.location-level-reward span,
.location-level-stats small {
  display: block;
  color: rgba(255,255,255,.58);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.location-level-reward strong,
.location-level-stats strong {
  color: #ffe08a;
  font-size: .82rem;
}


.location-level-reward {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.location-level-reward-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.location-level-reward .location-level-reward-label {
  display: block;
  color: rgba(255,255,255,.58);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.location-level-reward-row strong {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  color: #ffe08a;
  font-size: .82rem;
  line-height: 1.35;
}

.location-level-reward-row strong span {
  display: inline-flex;
  color: inherit;
  font-size: inherit;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.location-level-stats {
  font-size: .78rem;
  line-height: 1.35;
}

@media (max-width: 700px) {
  .location-level-card {
    grid-template-columns: 74px 1fr;
    grid-template-areas:
      "boss reward"
      "boss stats"
      "attack attack";
  }

  .location-level-boss { grid-area: boss; }
  .location-level-attack { grid-area: attack; width: 100%; }
  .location-level-reward { grid-area: reward; }
  .location-level-stats { grid-area: stats; }

  .location-level-avatar {
    width: 58px;
    height: 58px;
  }
}