/* Poke-Kara — UI
   Clean, compact, SPA-friendly.

   Z-index scale (bottom to top):
   0-10: base content, cards
   50-100: buff banner/panel, sticky elements
   999: trade modal, overlays
   1000: chat panel, detail popups
   9999: main modal (#modal-root), confirm, inv-picker
   10000: PvP challenge popup (must be above modal)
   10100+: tooltips, dropdowns in modal
*/

:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --soft:#fbfcff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;
  --shadow:0 10px 30px rgba(2, 6, 23, .08);
  --radius:16px;
  --inv-icon-bg:#f1f5f9;

  --primary:#2563eb;
  --primary-weak:rgba(37,99,235,.10);

  --ok:#16a34a;
  --ok-weak:rgba(22,163,74,.12);

  --danger:#dc2626;
  --danger-weak:rgba(220,38,38,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.45;
}

a{color:inherit}
a:hover{text-decoration:underline}

#topbar{
  height:4px;
  background:linear-gradient(90deg, rgba(37,99,235,.9), rgba(124,58,237,.85), rgba(16,185,129,.85));
  opacity:.9;
}

.container{
  max-width:1040px;
  margin:0 auto;
  padding:18px 14px 40px;
}

.nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:12px 14px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.brand{font-weight:900; letter-spacing:.2px}
.brand-link{text-decoration:none}
.brand-link:hover{text-decoration:none; opacity:.9}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(2,6,23,.04);
  border:1px solid rgba(2,6,23,.06);
  text-decoration:none;
  font-size:13px;
}
.badge.active{
  background:var(--primary-weak);
  border-color:rgba(37,99,235,.25);
  color:var(--primary);
}

.muted{color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace; font-size:.95em}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(2,6,23,.12);
  background:rgba(2,6,23,.02);
  cursor:pointer;
  text-decoration:none;
  font-weight:700;
  font-size:13px;
}
.btn:hover{filter:brightness(.98)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5; cursor:not-allowed}

.btn.primary{
  background:var(--primary);
  border-color:rgba(37,99,235,.6);
  color:#fff;
}
.btn.danger{
  background:var(--danger);
  border-color:rgba(220,38,38,.6);
  color:#fff;
}

/* Toast notifications: единый стиль мира, без разноцветия */
.toast-container{
  position:fixed;
  top:20px;
  right:20px;
  width:min(380px, calc(100vw - 40px));
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:12px;
  pointer-events:none;
}
.toast{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-rows:auto auto;
  gap:0 14px;
  align-items:start;
  padding:16px 18px 0;
  border-radius:var(--radius);
  font-size:14px;
  line-height:1.45;
  font-weight:500;
  color:var(--text);
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:var(--shadow), 0 4px 16px rgba(2,6,23,.06);
  animation:toast-in .35s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events:auto;
  overflow:hidden;
}
.toast__icon-wrap{
  grid-row:1 / 3;
  width:38px;
  height:38px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:600;
  flex-shrink:0;
  background:var(--soft);
  color:var(--muted);
  border:1px solid var(--border);
}
.toast__body{ padding:2px 0 14px; word-break:break-word; }
.toast__close{
  grid-column:3;
  grid-row:1;
  margin:-8px -8px 0 0;
  padding:8px;
  border:none;
  background:transparent;
  color:var(--muted);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  border-radius:8px;
}
.toast__close:hover{ color:var(--text); background:var(--border); }
.toast__progress{
  grid-column:1 / -1;
  height:2px;
  background:var(--border);
  border-radius:0 0 var(--radius) var(--radius);
  margin:0 -18px 0 -18px;
  transform-origin:left;
  animation:toast-progress 4s linear forwards;
}
.toast--out{
  animation:toast-out .3s ease forwards;
}
.toast--out .toast__progress{ animation:none; }
@keyframes toast-in{
  from{ opacity:0; transform:translateX(32px) scale(0.96); }
  to{ opacity:1; transform:translateX(0) scale(1); }
}
@keyframes toast-out{
  from{ opacity:1; transform:translateX(0) scale(1); }
  to{ opacity:0; transform:translateX(32px) scale(0.96); }
}
@keyframes toast-progress{
  from{ transform:scaleX(1); }
  to{ transform:scaleX(0); }
}
/* Единый нейтральный стиль — без цветов по типу */
.toast--ok .toast__icon-wrap,
.toast--err .toast__icon-wrap,
.toast--info .toast__icon-wrap,
.toast--warn .toast__icon-wrap{ background:var(--soft); color:var(--muted); border:1px solid var(--border); }
.toast--reward .toast__icon-wrap{ background:var(--soft); color:var(--text); border:1px solid var(--border); }
.toast--reward .toast__title{ font-weight:700; font-size:15px; margin-bottom:8px; }
.toast--reward .toast__reward-row{ display:flex; align-items:center; gap:8px; margin-top:6px; font-size:13px; color:var(--text); }
.toast--reward .toast__reward-row .toast__reward-icon{ font-size:16px; }
.toast--reward .toast__reward-row .toast__reward-icon-img{
  width:20px; height:20px; vertical-align:middle; object-fit:contain; border-radius:2px; flex-shrink:0;
}

/* ── Дом тренера (home modal) ───────────────────────────────────────── */
.page-home{
  max-width:1040px;
  margin:0 auto;
  padding:16px 8px 20px;
}
.page-home .page-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.page-home .page-header__title h1{
  margin:0;
  font-size:20px;
}
.page-home .page-header__subtitle{
  margin-top:4px;
  font-size:13px;
  color:var(--muted);
}
.page-home .page-header__actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.home-header-link{
  font-size:12px;
  color:var(--primary);
  text-decoration:none;
  padding:4px 8px;
  border-radius:999px;
  background:var(--primary-weak);
}
.home-header-link:hover{
  text-decoration:none;
  filter:brightness(.97);
}
.page-home .page-header__badge .chip-cat--admin{
  font-size:11px;
}
@media (max-width: 640px){
  .page-home .page-header{
    flex-direction:column;
    align-items:flex-start;
  }
  .page-home .page-header__actions{
    width:100%;
    justify-content:space-between;
  }
}
.home-layout{
  display:grid;
  grid-template-columns:minmax(0, 260px) minmax(0, 1fr);
  gap:16px;
}
@media (max-width: 800px){
  .home-layout{
    grid-template-columns:minmax(0, 1fr);
  }
}
.home-sidebar{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.home-main{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.home-card{
  padding:12px 14px;
  border-radius:12px;
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:0 4px 12px rgba(15,23,42,.04);
}
.home-card__title{
  margin:0 0 8px;
  font-size:15px;
}
.home-card__hint{
  margin:0 0 10px;
  font-size:12px;
  color:var(--muted);
}
.home-card--admin{
  border-style:dashed;
  border-color:rgba(248,113,113,.7);
  background:linear-gradient(135deg, rgba(248,250,252,0.96), rgba(254,242,242,0.96));
}
.home-admin-sep{
  margin:10px 0;
  border:none;
  border-top:1px dashed var(--border);
}
.home-stats{
  margin:0;
}
.home-stats__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:4px 0;
  font-size:13px;
}
.home-stats__row dt{
  margin:0;
  color:var(--muted);
}
.home-stats__row dd{
  margin:0;
  font-weight:600;
}
.home-empty{
  margin:4px 0 0;
  font-size:13px;
  color:var(--muted);
}
.home-section{
  padding:12px 14px;
  border-radius:12px;
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:0 4px 12px rgba(15,23,42,.04);
}
.home-section__header{
  margin-bottom:10px;
}
.home-section__header h2{
  margin:0 0 4px;
  font-size:16px;
}
.home-section__hint{
  margin:0;
  font-size:12px;
  color:var(--muted);
}
.home-room{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);
  gap:14px;
}
@media (max-width: 900px){
  .home-room{
    grid-template-columns:minmax(0, 1fr);
  }
}
.home-room__pokemons h3,
.home-room__trophies h3,
.home-yard__berries h3,
.home-yard__decor h3{
  margin:0 0 8px;
  font-size:14px;
}
.home-display-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:10px;
}
.home-display-slot{
  padding:8px;
  border-radius:10px;
  background:var(--soft);
  border:1px solid var(--border);
}
.home-display-slot__label{
  font-size:11px;
  color:var(--muted);
  margin-bottom:4px;
}
.home-display-slot__content{
  display:flex;
  gap:8px;
  align-items:center;
}
.home-display-slot__sprite{
  position:relative;
  flex-shrink:0;
}
.home-display-slot__img{
  width:56px;
  height:56px;
  object-fit:contain;
  image-rendering:pixelated;
}
.home-display-slot__badge{
  position:absolute;
  right:-4px;
  bottom:-4px;
  font-size:11px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(250,250,255,0.95);
  border:1px solid rgba(250,204,21,.7);
}
.home-display-slot__name{
  font-size:13px;
  font-weight:600;
}
.home-display-slot__sub{
  font-size:12px;
  color:var(--muted);
}

.home-room-playable{
  margin-bottom:16px;
  padding:12px;
  border-radius:12px;
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:0 4px 16px rgba(15,23,42,.18);
}
.home-room-grid{
  position:relative;
  width:100%;
  max-width:520px;
  aspect-ratio:8/5;
  margin:0 auto;
  background:radial-gradient(circle at 20% 0, rgba(255,255,255,0.18), transparent 55%), radial-gradient(circle at 80% 100%, rgba(148, 163, 184, 0.22), transparent 55%), linear-gradient(135deg, #0f172a, #1e293b);
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
}
.home-room-grid::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:linear-gradient(to right, rgba(148,163,184,0.25) 1px, transparent 1px), linear-gradient(to bottom, rgba(148,163,184,0.25) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.45;
  pointer-events:none;
}
.home-room-avatar{
  position:absolute;
  width:52px;
  height:52px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 20%, #facc15, #f97316);
  box-shadow:0 0 0 3px rgba(15,23,42,0.7), 0 18px 28px rgba(15,23,42,0.65);
  transform:translate(0,0);
  transition:transform 220ms cubic-bezier(.22, .61, .36, 1);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#0f172a;
  font-weight:800;
}
.home-room-avatar::before{
  content:'PK';
  font-size:15px;
  letter-spacing:.04em;
}
.home-room-decor-node{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  padding:4px;
  background:rgba(15,23,42,0.26);
  border-radius:12px;
  border:1px solid rgba(148,163,184,0.45);
  box-shadow:0 10px 18px rgba(15,23,42,0.65);
  cursor:pointer;
  transition:transform 160ms ease-out, box-shadow 160ms ease-out, border-color 160ms ease-out, background-color 160ms ease-out;
}
.home-room-decor-node img{
  max-width:100%;
  max-height:100%;
  display:block;
}
.home-room-decor-node__fallback{
  font-size:26px;
}
.home-room-decor-node:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 18px 32px rgba(15,23,42,0.8);
  border-color:rgba(248,250,252,0.8);
  background:rgba(30,64,175,0.5);
}
.home-room-status{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
  padding:6px 8px;
  border-radius:8px;
  background:rgba(15,23,42,0.03);
}
.home-trophies-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:10px;
}
.home-trophy{
  padding:8px;
  border-radius:10px;
  background:var(--soft);
  border:1px solid var(--border);
}
.home-trophy__slot{
  font-size:11px;
  color:var(--muted);
  margin-bottom:4px;
}
.home-trophy__body{
  display:flex;
  gap:8px;
}
.home-trophy__icon img{
  width:40px;
  height:40px;
  object-fit:contain;
}
.home-trophy__icon-fallback{
  font-size:24px;
}
.home-trophy__name{
  font-size:13px;
  font-weight:600;
}
.home-trophy__tags{
  margin-top:4px;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.home-yard{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);
  gap:14px;
}
@media (max-width: 900px){
  .home-yard{
    grid-template-columns:minmax(0, 1fr);
  }
}
.home-berry-plots{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:8px;
}
.home-berry-plot{
  padding:8px;
  border-radius:10px;
  background:var(--soft);
  border:1px solid var(--border);
  font-size:12px;
}
.home-berry-plot__header{
  font-weight:600;
  margin-bottom:4px;
}
.home-berry-plot__berry{
  font-weight:600;
  margin-bottom:2px;
}
.home-berry-plot__state{
  color:var(--muted);
}
.home-decor-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.home-decor-item{
  display:flex;
  gap:8px;
  padding:6px 8px;
  border-radius:10px;
  background:var(--soft);
  border:1px solid var(--border);
  font-size:12px;
}
.home-decor-item__slot{
  min-width:90px;
  color:var(--muted);
}
.home-decor-item__icon img{
  width:36px;
  height:36px;
  object-fit:contain;
}
.home-decor-item__icon-fallback{
  font-size:20px;
}
.home-decor-item__name{
  font-size:13px;
  font-weight:600;
}
.home-decor-item__tags{
  margin-top:2px;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.home-incubators{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:10px;
}
.home-incubator{
  padding:8px;
  border-radius:10px;
  background:var(--soft);
  border:1px solid var(--border);
  font-size:12px;
}
.home-incubator__header{
  font-weight:600;
  margin-bottom:4px;
}
.home-incubator__body div{
  margin:1px 0;
}

.home-like-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--soft);
  font-size:12px;
  cursor:pointer;
}
.home-like-btn[disabled]{
  opacity:.6;
  cursor:default;
}
.home-like-btn__icon{
  font-size:13px;
}
.home-like-btn__label{
  font-weight:600;
}
.home-like-btn__count{
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
}
/* Small item icons (craft, quest, rewards) — сплошной фон, чтобы прозрачные PNG не показывали артефакты */
.item-icon-wrap{ display:inline-flex; align-items:center; justify-content:center; background:var(--inv-icon-bg,#f1f5f9); border-radius:4px; }
.item-icon-wrap--sm .item-icon,
.item-icon-wrap--sm .item-icon--custom{ width:20px; height:20px; vertical-align:middle; object-fit:contain; border-radius:2px; }
.item-icon-wrap--sm .item-icon-fb{ font-size:14px; }
.rp-item__icon{ display:inline-flex; align-items:center; margin-right:6px; }
.rp-item__icon-img{ width:20px; height:20px; object-fit:contain; border-radius:2px; vertical-align:middle; }

#flash-area{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:stretch;
  z-index:100;
}
.flash{
  padding:14px 18px;
  border-radius:16px;
  border:none;
  background:var(--card);
  box-shadow:0 8px 24px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
  font-weight:700;
  font-size:14px;
  line-height:1.4;
  animation:flash-in .25s ease;
}
@keyframes flash-in{
  from{ opacity:0; transform:translateY(8px) scale(0.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.flash.ok{
  background:linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  color:#065f46;
  box-shadow:0 8px 24px rgba(34,197,94,.2), 0 2px 8px rgba(0,0,0,.06);
}
.flash.err{
  background:linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  color:#991b1b;
  box-shadow:0 8px 24px rgba(239,68,68,.2), 0 2px 8px rgba(0,0,0,.06);
}
.flash.info{
  background:linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color:#1e40af;
  box-shadow:0 8px 24px rgba(59,130,246,.2), 0 2px 8px rgba(0,0,0,.06);
}
.flash.warn{
  background:linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  color:#b45309;
  box-shadow:0 8px 24px rgba(245,158,11,.2), 0 2px 8px rgba(0,0,0,.06);
}

/* Confirm dialog (used for surrender in battle modal) */
.confirm-root{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(2,6,23,.28);
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease;
  z-index:9999;
}
.confirm-root.open{opacity:1; pointer-events:auto}
.confirm-dialog{
  width:min(440px, 100%);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:16px;
}
.confirm-title{font-weight:900; letter-spacing:-.2px; font-size:16px; margin-bottom:6px}
.confirm-text{color:var(--muted); margin-bottom:12px}
.confirm-actions{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}
.confirm-actions .btn{min-width:90px}

.grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:14px;
  margin-top:14px;
}
.col-12{grid-column:span 12}
.col-6{grid-column:span 6}
@media (max-width:860px){
  .col-6{grid-column:span 12}
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.card.soft{
  background:var(--soft);
  border-color:rgba(226,232,240,.85);
  box-shadow:none;
}

h1{margin:0 0 6px 0; font-size:24px; letter-spacing:-.2px}
h2{margin:0 0 8px 0; font-size:16px; letter-spacing:-.1px}
p{margin:8px 0}

.section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.section-actions{display:flex; gap:10px; flex-wrap:wrap}

.hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:16px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(37,99,235,.10), rgba(124,58,237,.05));
  border:1px solid rgba(37,99,235,.15);
}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
@media (max-width:860px){
  .hero{flex-direction:column}
  .hero-actions{width:100%}
  .hero-actions .btn{flex:1}
}

.row{display:flex; align-items:center}
.row.between{justify-content:space-between}

.kicker{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
}
.title{font-size:18px; font-weight:900; letter-spacing:-.2px}

.form-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}

.table{
  width:100%;
  border-collapse:collapse;
  margin-top:8px;
}
.table th, .table td{
  padding:10px 10px;
  border-bottom:1px solid var(--border);
  text-align:left;
  vertical-align:top;
}
.table th{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.table-compact th, .table-compact td{padding:8px 8px}

.list{margin:10px 0 0; padding-left:18px}
.list li{margin:6px 0}

.footer{
  margin-top:16px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(2,6,23,.10);
  background:rgba(2,6,23,.02);
  font-size:12px;
  font-weight:800;
}
.chip.ok{background:var(--ok-weak); border-color:rgba(22,163,74,.25); color:var(--ok)}

.chip-cat{font-weight:900}
.chip-cat--physical{background:rgba(234,88,12,.10); border-color:rgba(234,88,12,.25); color:#9a3412}
.chip-cat--special{background:rgba(59,130,246,.10); border-color:rgba(59,130,246,.25); color:#1d4ed8}
.chip-cat--status{background:rgba(100,116,139,.10); border-color:rgba(100,116,139,.25); color:var(--text)}

.type{
  display:inline-flex;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;
  border:1px solid rgba(2,6,23,.08);
  background:rgba(2,6,23,.03);
}

/* Type colors (subtle) */
.type--normal{background:rgba(100,116,139,.12); border-color:rgba(100,116,139,.25); color:var(--text)}
.type--fire{background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.25); color:#b91c1c}
.type--water{background:rgba(59,130,246,.12); border-color:rgba(59,130,246,.25); color:#1d4ed8}
.type--grass{background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.25); color:#15803d}
.type--electric{background:rgba(234,179,8,.14); border-color:rgba(234,179,8,.30); color:#854d0e}
.type--ice{background:rgba(14,165,233,.12); border-color:rgba(14,165,233,.25); color:#0369a1}
.type--fighting{background:rgba(168,85,247,.10); border-color:rgba(168,85,247,.25); color:#6d28d9}
.type--poison{background:rgba(147,51,234,.10); border-color:rgba(147,51,234,.25); color:#6b21a8}
.type--ground{background:rgba(161,98,7,.10); border-color:rgba(161,98,7,.22); color:#78350f}
.type--flying{background:rgba(125,211,252,.18); border-color:rgba(125,211,252,.35); color:#075985}
.type--psychic{background:rgba(236,72,153,.12); border-color:rgba(236,72,153,.25); color:#9d174d}
.type--bug{background:rgba(101,163,13,.12); border-color:rgba(101,163,13,.25); color:#3f6212}
.type--rock{background:rgba(120,113,108,.12); border-color:rgba(120,113,108,.25); color:#44403c}
.type--ghost{background:rgba(99,102,241,.12); border-color:rgba(99,102,241,.25); color:#4338ca}
.type--dragon{background:rgba(79,70,229,.12); border-color:rgba(79,70,229,.25); color:#312e81}
.type--dark{background:rgba(15,23,42,.10); border-color:rgba(15,23,42,.25); color:#0f172a}
.type--steel{background:rgba(148,163,184,.14); border-color:rgba(148,163,184,.30); color:var(--text)}
.type--fairy{background:rgba(244,114,182,.14); border-color:rgba(244,114,182,.30); color:#9d174d}

/* ═══════════════════════ HP Bar (shared) ═══════════════════════ */
.hp{display:flex; align-items:center; gap:10px}
.hp-bar{
  flex:1;
  height:10px;
  background:rgba(2,6,23,.08);
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(2,6,23,.10);
}
.hp-bar span{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg, rgba(34,197,94,.9), rgba(16,185,129,.9));
}
.hp-bar--enemy span{
  background:linear-gradient(90deg, rgba(239,68,68,.9), rgba(234,88,12,.9));
}
.hp-text{font-size:12px; font-weight:900; color:var(--muted); min-width:96px; text-align:right}

/* ═══════════════════════ BATTLE UI (Modern Showdown-style) ═══════════════════════ */

/* ---------- Container ---------- */
.btl{
  width:100%;
  max-width:1000px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:0;
  font-family:inherit;
  background:var(--bg);
  padding:0 12px;
}

@media (max-width: 640px){
  .btl{
    padding:0 8px;
  }
}

/* ---------- Result Banner (legacy: spectate) ---------- */
.btl-result{
  text-align:center;
  padding:10px 16px;
  font-size:15px;
  font-weight:900;
  letter-spacing:.02em;
  border-radius:12px 12px 0 0;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  margin-bottom:0;
}
.btl-result--win{
  background:linear-gradient(135deg,#86efac 0%,#4ade80 50%,#22c55e 100%);
  color:#14532d;
  text-shadow:0 1px 2px rgba(255,255,255,.3);
}
.btl-result--lose{
  background:linear-gradient(135deg,#fca5a5 0%,#f87171 50%,#ef4444 100%);
  color:#7f1d1d;
  text-shadow:0 1px 2px rgba(255,255,255,.3);
}
.btl-result--draw{
  background:linear-gradient(135deg,var(--border) 0%,#cbd5e1 50%,var(--muted) 100%);
  color:var(--text);
  text-shadow:0 1px 2px rgba(255,255,255,.3);
}
.btl-result__icon{font-size:16px; vertical-align:middle; margin-right:4px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}
.btl-result__coins{
  display:inline-block;
  margin-left:6px;
  padding:2px 8px;
  border-radius:6px;
  background:rgba(255,255,255,.9);
  font-size:11px;
  font-weight:800;
  color:#92400e;
  vertical-align:middle;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}

/* ---------- Result Card (Победа / Поражение / Награды) — красивое уведомление ---------- */
.btl-result-card {
  max-width: 420px;
  margin: 0 auto 16px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
  text-align: center;
}
.btl-result-card__header {
  padding: 20px 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.btl-result-card__icon {
  font-size: 48px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
.btl-result-card__title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .02em;
  text-shadow: 0 1px 2px rgba(255,255,255,.25);
}
.btl-result-card--win .btl-result-card__header {
  background: linear-gradient(160deg, #4ade80 0%, #22c55e 40%, #16a34a 100%);
  color: #052e16;
}
.btl-result-card--win .btl-result-card__rewards {
  background: linear-gradient(180deg, rgba(34,197,94,.08) 0%, rgba(255,255,255,.95) 18%);
  border-top: 1px solid rgba(34,197,94,.25);
}
.btl-result-card--lose .btl-result-card__header {
  background: linear-gradient(160deg, #f87171 0%, #ef4444 40%, #dc2626 100%);
  color: #450a0a;
}
.btl-result-card--lose .btl-result-card__rewards {
  background: #fef2f2;
  border-top: 1px solid rgba(248,113,113,.3);
}
.btl-result-card--draw .btl-result-card__header {
  background: linear-gradient(160deg, #94a3b8 0%, #64748b 50%, #475569 100%);
  color: var(--text);
}
.btl-result-card--run .btl-result-card__header {
  background: linear-gradient(160deg, #93c5fd 0%, #60a5fa 50%, #3b82f6 100%);
  color: #172554;
}
.btl-result-card__rewards {
  padding: 16px 20px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
.btl-result-card__reward {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  flex-wrap: wrap;
  justify-content: center;
}
.btl-result-card__reward-icon {
  font-size: 16px;
  line-height: 1;
}
.btl-result-card__reward--coins {
  background: rgba(245,158,11,.15);
  color: #b45309;
  border: 1px solid rgba(245,158,11,.35);
}
.btl-result-card__reward--trainer-xp {
  background: rgba(251,191,36,.15);
  color: #b45309;
  border: 1px solid rgba(251,191,36,.3);
}
.btl-result-card__reward--exp {
  background: rgba(34,197,94,.12);
  color: #15803d;
  border: 1px solid rgba(34,197,94,.3);
  flex-direction: column;
  align-items: center;
}
.btl-result-card__reward--ev {
  background: rgba(249,115,22,.12);
  color: #c2410c;
  border: 1px solid rgba(249,115,22,.3);
}
.btl-result-card__reward--drop {
  background: rgba(168,85,247,.12);
  color: #6b21a8;
  border: 1px solid rgba(168,85,247,.3);
}
.btl-result-card__reward-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.6);
}
.btl-result-card__newmoves {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 6px;
  width: 100%;
}
.btl-result-card__newmove {
  font-size: 11px;
  padding: 4px 10px;
  background: rgba(59,130,246,.15);
  color: #1d4ed8;
  border-radius: 8px;
  font-weight: 500;
}
.btl-result-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 4px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border: none;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(34,197,94,.35);
  transition: transform .12s ease, box-shadow .2s ease;
}
.btl-result-card__action:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34,197,94,.4);
}

/* ---------- Arena (Showdown-style: clean, compact) ---------- */
.btl-arena{
  position:relative;
  background:
    radial-gradient(ellipse at top, rgba(147,197,253,.25) 0%, transparent 50%),
    radial-gradient(ellipse at bottom, rgba(134,239,172,.2) 0%, transparent 60%),
    linear-gradient(180deg,
      #e0f2fe 0%,
      #dbeafe 12%,
      #c7f9cc 35%,
      #bbf7d0 55%,
      #a7f3d0 75%,
      #86efac 100%);
  border:none;
  border-radius:0;
  min-height:260px;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
}
.btl-result + .btl-layout .btl-arena,
.btl-result-card + .btl-sides-wrap .btl-arena{border-radius:12px 12px 0 0}

/* Modern ground shadows */
.btl-arena::before,
.btl-arena::after{
  content:'';
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(8px);
}
.btl-arena::before{
  width:180px; height:40px;
  background:radial-gradient(ellipse, rgba(34,197,94,.2) 0%, rgba(34,197,94,.05) 70%, transparent 100%);
  bottom:50px; left:16px;
  box-shadow:0 0 24px 12px rgba(34,197,94,.08);
}
.btl-arena::after{
  width:160px; height:36px;
  background:radial-gradient(ellipse, rgba(34,197,94,.15) 0%, rgba(34,197,94,.05) 70%, transparent 100%);
  top:85px; right:16px;
  box-shadow:0 0 20px 10px rgba(34,197,94,.06);
}

.btl-arena--sun{
  background:
    radial-gradient(ellipse at top, rgba(253,224,71,.4) 0%, transparent 55%),
    radial-gradient(ellipse at bottom, rgba(252,211,77,.25) 0%, transparent 65%),
    linear-gradient(180deg,#fee2e2 0%,#fef3c7 35%,#fef9c3 65%,#fde68a 100%);
}
.btl-arena--rain{
  background:
    radial-gradient(ellipse at top, rgba(56,189,248,.35) 0%, transparent 55%),
    radial-gradient(ellipse at bottom, rgba(59,130,246,.25) 0%, transparent 65%),
    linear-gradient(180deg,#e0f2fe 0%,#bfdbfe 40%,#93c5fd 75%,#60a5fa 100%);
}
.btl-arena--sand{
  background:
    radial-gradient(ellipse at top, rgba(253,224,171,.4) 0%, transparent 55%),
    radial-gradient(ellipse at bottom, rgba(234,179,8,.25) 0%, transparent 65%),
    linear-gradient(180deg,#fef3c7 0%,#fde68a 40%,#facc15 80%,#f59e0b 100%);
}
.btl-arena--snow{
  background:
    radial-gradient(ellipse at top, rgba(191,219,254,.5) 0%, transparent 55%),
    radial-gradient(ellipse at bottom, rgba(209,250,229,.25) 0%, transparent 65%),
    linear-gradient(180deg,#e5e7eb 0%,#e0f2fe 40%,#e0f2fe 70%,#f9fafb 100%);
}

.btl-weather-wrap{
  position:absolute;
  top:8px;
  left:8px;
  transform:none;
  z-index:10;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
.btl-weather-pill{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.5);
  background:rgba(255,255,255,.9);
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  padding:4px 10px 4px 12px;
  max-width:260px;
  gap:6px;
}
.btl-weather-pill__label{
  font-size:11px;
  color:#1f2933;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.btl-weather-pill__icon{
  font-size:18px;
  line-height:1;
}
.btl-weather-desc{
  margin-top:2px;
  padding:6px 10px;
  background:rgba(255,255,255,.96);
  color:#374151;
  font-size:11px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.5);
  max-width:260px;
  text-align:center;
  line-height:1.35;
  box-shadow:0 4px 12px rgba(15,23,42,.25);
}
.btl-weather-desc--hidden{
  display:none;
}

@media (max-width:640px){
  .btl-arena{
    min-height:200px;
    padding:10px 8px 14px;
  }
  .btl-weather-wrap{
    top:4px;
    left:4px;
  }
  .btl-weather-desc{
    max-width:220px;
  }
}

/* ---------- Field Conditions ---------- */
.btl-field{
  position:absolute;
  top:8px; left:50%;
  transform:translateX(-50%);
  display:flex; gap:6px;
  z-index:2;
}

/* ---------- Slots ---------- */
.btl-slot{
  display:flex;
  align-items:flex-end;
  gap:12px;
  z-index:1;
  position:relative;
}
.btl-slot--foe{
  flex-direction:row-reverse;
  align-self:flex-end;
  justify-content:flex-start;
}
.btl-slot--ally{
  align-self:flex-start;
}

/* ---------- Sprite (Showdown-style: clean, compact) ---------- */
.btl-sprite{
  flex-shrink:0;
  width:100px;
  height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  text-decoration:none;
  color:inherit;
  position:relative;
  z-index:2;
}
a.btl-sprite:hover{opacity:.9; transform:scale(1.02)}
a.btl-sprite:active{transform:scale(.98)}
.btl-sprite img{
  max-width:90px;
  max-height:90px;
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges;
  image-rendering:pixelated;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.2)) drop-shadow(0 1px 2px rgba(0,0,0,.15));
  transition:all .2s cubic-bezier(.4,0,.2,1);
}
.btl-sprite--shiny img{
  filter:drop-shadow(0 0 12px rgba(255,215,0,.8)) drop-shadow(0 0 6px rgba(255,215,0,.4)) drop-shadow(0 4px 8px rgba(0,0,0,.2));
  animation:shiny-glow 2s ease-in-out infinite;
}
@keyframes shiny-glow{
  0%,100%{filter:drop-shadow(0 0 12px rgba(255,215,0,.8)) drop-shadow(0 0 6px rgba(255,215,0,.4)) drop-shadow(0 4px 8px rgba(0,0,0,.2))}
  50%{filter:drop-shadow(0 0 16px rgba(255,215,0,1)) drop-shadow(0 0 8px rgba(255,215,0,.6)) drop-shadow(0 4px 8px rgba(0,0,0,.2))}
}
.btl-sprite--ally{order:-1}

/* ---------- HUD Panel (Showdown-style: clean, compact) ---------- */
.btl-hud{
  flex:1;
  min-width:0;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px 12px;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  position:relative;
  z-index:2;
}
.btl-hud__row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.btl-hud__name{
  font-weight:800;
  font-size:13px;
  line-height:1.2;
}
.btl-hud__nick{
  font-weight:400;
  color:var(--muted);
  font-size:12px;
  margin-left:2px;
}
.btl-hud__level{
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  background:rgba(2,6,23,.04);
  padding:1px 5px;
  border-radius:5px;
}
.btl-hud__types{
  display:flex;
  gap:4px;
  margin-top:4px;
  flex-wrap:wrap;
  align-items:center;
}

/* ---------- HP Bar (Compact Showdown-style) ---------- */
.btl-hp{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
}
.btl-hp__bar{
  flex:1;
  height:8px;
  background:rgba(15,23,42,.1);
  border-radius:999px;
  overflow:hidden;
  position:relative;
  border:1px solid rgba(0,0,0,.05);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.08);
}
.btl-hp__bar span{
  display:block;
  height:100%;
  border-radius:999px;
  transition:width .8s cubic-bezier(.4,0,.2,1);
  position:relative;
  box-shadow:0 1px 3px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.3);
}
.btl-hp__bar.hp--green span{
  background:linear-gradient(90deg,#22c55e 0%,#4ade80 50%,#86efac 100%);
}
.btl-hp__bar.hp--yellow span{
  background:linear-gradient(90deg,#eab308 0%,#facc15 50%,#fde047 100%);
}
.btl-hp__bar.hp--red span{
  background:linear-gradient(90deg,#ef4444 0%,#f87171 50%,#fca5a5 100%);
  animation:hp-low-pulse 1.5s ease-in-out infinite;
}
@keyframes hp-low-pulse{
  0%,100%{opacity:1; box-shadow:0 1px 3px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.3), 0 0 8px rgba(239,68,68,.4)}
  50%{opacity:.85; box-shadow:0 1px 3px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.3), 0 0 12px rgba(239,68,68,.6)}
}
.btl-hp__text{
  font-size:11px;
  font-weight:900;
  color:var(--text);
  min-width:55px;
  text-align:right;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.btl-exp{
  margin-top:4px;
  display:flex;
  align-items:center;
  gap:6px;
}
.btl-exp__bar{
  flex:1;
  height:5px;
  background:rgba(2,6,23,.08);
  border-radius:99px;
  overflow:hidden;
}
.btl-exp__bar span{
  display:block;
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg,#3b82f6,#60a5fa);
  transition:width .4s ease;
}
.btl-exp__label{
  font-size:9px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
}

/* ---------- Badges row ---------- */
.btl-badges{
  display:flex;
  gap:3px;
  flex-wrap:wrap;
  margin-top:4px;
  min-height:0;
}

/* ---------- Universal badge ---------- */
.b-badge{
  display:inline-flex;
  align-items:center;
  padding:1px 5px;
  border-radius:4px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.03em;
  line-height:1.5;
  white-space:nowrap;
}

/* Status badges */
.b-badge--status{color:#fff}
.b-badge--par{background:#f8d030; color:#78600a}
.b-badge--psn{background:#a040a0}
.b-badge--tox{background:#6a0dad}
.b-badge--brn{background:#f08030}
.b-badge--slp{background:#98a8b8}
.b-badge--frz{background:#98d8d8; color:#1e6e6e}

/* Boost badges */
.b-badge--boost-up{background:rgba(34,197,94,.14); color:#15803d}
.b-badge--boost-down{background:rgba(239,68,68,.12); color:#dc2626}

/* Volatile badges */
.b-badge--volatile{background:rgba(168,85,247,.12); color:#7c3aed}
.b-badge--v-confusion{background:rgba(234,179,8,.14); color:#a16207}
.b-badge--v-flinch{background:rgba(107,114,128,.14); color:#4b5563}
.b-badge--v-leechseed{background:rgba(34,197,94,.12); color:#16a34a}
.b-badge--v-taunt{background:rgba(239,68,68,.12); color:#dc2626}
.b-badge--v-protect{background:rgba(59,130,246,.12); color:#2563eb}

/* Special badges */
.b-badge--shiny{color:#d97706; font-size:13px; padding:0 2px}
.b-badge--wild{background:rgba(34,197,94,.12); color:#15803d; font-size:9px; text-transform:uppercase; letter-spacing:.06em}
.b-badge--trainer{background:rgba(59,130,246,.14); color:#2563eb; font-size:9px; text-transform:none}
.b-badge--field{
  background:rgba(59,130,246,.10);
  color:var(--primary);
  padding:3px 8px;
  border-radius:8px;
  font-size:11px;
  backdrop-filter:blur(4px);
}

/* ---------- Action Panel (Showdown-style: clean, same width as arena) ---------- */
.btl-panel{
  background:var(--card);
  border:none;
  border-top:1px solid var(--border);
  border-radius:0;
  padding:12px 16px;
  width:100%;
}

.btl-panel:last-child{
  border-radius:0 0 12px 12px;
}

/* ---------- Move Grid (Showdown-style: clean, compact) ---------- */
.btl-moves--readonly{ pointer-events: none; }
.btl-moves__readonly-title{ font-size: 11px; font-weight: 700; color: var(--muted,#64748b); margin-bottom: 6px; }
.btl-moves__readonly-empty{ font-size: 12px; color: var(--muted); }
.btl-move--readonly{ cursor: default; opacity: .95; }

.btl-moves{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.btl-move-form{margin:0}
.btl-move{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:4px;
  text-align:left;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px 10px;
  cursor:pointer;
  transition:all .15s ease;
  font-family:inherit;
  color:var(--text);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  position:relative;
  overflow:hidden;
}
.btl-move::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  background:linear-gradient(135deg, rgba(255,255,255,.6) 0%, transparent 100%);
  opacity:0;
  transition:opacity .2s;
  pointer-events:none;
}
.btl-move:hover:not([disabled]){
  border-color:var(--primary);
  background:var(--soft);
  transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(37,99,235,.12), 0 1px 3px rgba(0,0,0,.06);
}
.btl-move:active:not([disabled]){
  transform:translateY(0);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.btl-move[disabled]{
  opacity:.4;
  cursor:not-allowed;
  filter:grayscale(.3);
}
.btl-move__name{
  font-weight:900;
  font-size:13px;
  line-height:1.3;
  color:var(--text);
  letter-spacing:-.01em;
}
.btl-move__meta{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}
.btl-move__pri{
  font-size:10px;
  font-weight:900;
  color:var(--muted);
  background:rgba(15,23,42,.08);
  padding:2px 6px;
  border-radius:6px;
  border:1px solid rgba(15,23,42,.1);
}
.btl-move__desc{
  display:block;
  font-size:11px;
  color:var(--muted);
  line-height:1.4;
  margin-top:2px;
  white-space:normal;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.btl-move__stats{
  display:flex;
  gap:10px;
  font-size:11px;
  font-weight:800;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  margin-top:2px;
}
.btl-move__pp--empty{color:#dc2626; font-weight:900}

.btl-move__verified{
  display:block;
  margin-top:4px;
  font-size:9px;
  color:var(--muted);
  opacity:.9;
}

/* Ability tooltip (global, light gray theme, mobile-friendly) */
.ability-tooltip{
  z-index:2000;
  max-width:360px;
}
.ability-tooltip__inner{
  background:var(--soft);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 16px 40px rgba(15,23,42,.25);
  padding:14px 16px 12px;
  color:var(--text);
}
.ability-tooltip__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.ability-tooltip__title{
  font-size:16px;
  font-weight:800;
  color:var(--text);
}
.ability-tooltip__close{
  border:none;
  background:transparent;
  color:var(--muted);
  font-size:16px;
  line-height:1;
  cursor:pointer;
  padding:2px 4px;
}
.ability-tooltip__close:hover{
  color:var(--text);
}
.ability-tooltip__body{
  font-size:12px;
}
.ability-tooltip__meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:8px;
}
.ability-tooltip__pill{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  background:var(--border);
  color:var(--muted);
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.ability-tooltip__desc-text{
  padding:8px 10px;
  background:var(--primary-weak);
  border-radius:8px;
  margin-bottom:8px;
  line-height:1.5;
  color:var(--text);
}
.ability-tooltip__section{
  margin-top:6px;
}
.ability-tooltip__section-title{
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  margin-bottom:4px;
}
.ability-tooltip__chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  max-height:200px;
  overflow-y:auto;
}
.ability-tooltip__chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 8px;
  border-radius:999px;
  background:var(--border);
  color:var(--text);
  font-size:11px;
  font-weight:600;
  text-decoration:none;
}
.ability-tooltip__chip:hover{
  background:var(--soft);
}
.ability-tooltip__chip-num{
  font-weight:700;
}
.ability-tooltip__chip-name{
  white-space:nowrap;
}
.ability-tooltip__empty{
  font-size:11px;
  color:var(--muted);
}

@media (max-width:768px){
  .ability-tooltip{
    left:12px !important;
    right:12px;
    max-width:none;
  }
}


/* Type-tinted move backgrounds and borders */
.btl-move--normal{border-color:rgba(168,167,122,.25); background:linear-gradient(135deg,rgba(168,167,122,.06),transparent)}
.btl-move--fire{border-color:rgba(238,129,48,.25); background:linear-gradient(135deg,rgba(238,129,48,.07),transparent)}
.btl-move--water{border-color:rgba(99,144,240,.25); background:linear-gradient(135deg,rgba(99,144,240,.07),transparent)}
.btl-move--grass{border-color:rgba(122,199,76,.25); background:linear-gradient(135deg,rgba(122,199,76,.07),transparent)}
.btl-move--electric{border-color:rgba(247,208,44,.25); background:linear-gradient(135deg,rgba(247,208,44,.07),transparent)}
.btl-move--ice{border-color:rgba(150,217,214,.3); background:linear-gradient(135deg,rgba(150,217,214,.08),transparent)}
.btl-move--fighting{border-color:rgba(194,46,40,.2); background:linear-gradient(135deg,rgba(194,46,40,.06),transparent)}
.btl-move--poison{border-color:rgba(163,62,161,.2); background:linear-gradient(135deg,rgba(163,62,161,.06),transparent)}
.btl-move--ground{border-color:rgba(226,191,101,.25); background:linear-gradient(135deg,rgba(226,191,101,.07),transparent)}
.btl-move--flying{border-color:rgba(169,143,243,.25); background:linear-gradient(135deg,rgba(169,143,243,.07),transparent)}
.btl-move--psychic{border-color:rgba(249,85,135,.2); background:linear-gradient(135deg,rgba(249,85,135,.06),transparent)}
.btl-move--bug{border-color:rgba(166,185,26,.25); background:linear-gradient(135deg,rgba(166,185,26,.07),transparent)}
.btl-move--rock{border-color:rgba(182,161,54,.25); background:linear-gradient(135deg,rgba(182,161,54,.06),transparent)}
.btl-move--ghost{border-color:rgba(115,87,151,.25); background:linear-gradient(135deg,rgba(115,87,151,.07),transparent)}
.btl-move--dragon{border-color:rgba(111,53,252,.2); background:linear-gradient(135deg,rgba(111,53,252,.06),transparent)}
.btl-move--dark{border-color:rgba(112,87,70,.25); background:linear-gradient(135deg,rgba(112,87,70,.06),transparent)}
.btl-move--steel{border-color:rgba(183,183,206,.3); background:linear-gradient(135deg,rgba(183,183,206,.08),transparent)}
.btl-move--fairy{border-color:rgba(214,133,173,.25); background:linear-gradient(135deg,rgba(214,133,173,.07),transparent)}
.btl-move--fire:hover:not([disabled]){border-color:#f97316; background:linear-gradient(135deg,rgba(238,129,48,.14),transparent)}
.btl-move--water:hover:not([disabled]){border-color:#3b82f6; background:linear-gradient(135deg,rgba(99,144,240,.14),transparent)}
.btl-move--grass:hover:not([disabled]){border-color:#22c55e; background:linear-gradient(135deg,rgba(122,199,76,.14),transparent)}
.btl-move--electric:hover:not([disabled]){border-color:#eab308; background:linear-gradient(135deg,rgba(247,208,44,.14),transparent)}
.btl-move--ice:hover:not([disabled]){border-color:#0ea5e9; background:linear-gradient(135deg,rgba(150,217,214,.16),transparent)}
.btl-move--fighting:hover:not([disabled]){border-color:#c22e28; background:linear-gradient(135deg,rgba(194,46,40,.12),transparent)}
.btl-move--poison:hover:not([disabled]){border-color:#9333ea; background:linear-gradient(135deg,rgba(163,62,161,.12),transparent)}
.btl-move--ground:hover:not([disabled]){border-color:#a16207; background:linear-gradient(135deg,rgba(226,191,101,.14),transparent)}
.btl-move--flying:hover:not([disabled]){border-color:#a98ff3; background:linear-gradient(135deg,rgba(169,143,243,.14),transparent)}
.btl-move--psychic:hover:not([disabled]){border-color:#ec4899; background:linear-gradient(135deg,rgba(249,85,135,.12),transparent)}
.btl-move--bug:hover:not([disabled]){border-color:#65a30d; background:linear-gradient(135deg,rgba(166,185,26,.14),transparent)}
.btl-move--rock:hover:not([disabled]){border-color:#78716c; background:linear-gradient(135deg,rgba(182,161,54,.12),transparent)}
.btl-move--ghost:hover:not([disabled]){border-color:#6366f1; background:linear-gradient(135deg,rgba(115,87,151,.14),transparent)}
.btl-move--dragon:hover:not([disabled]){border-color:#4f46e5; background:linear-gradient(135deg,rgba(111,53,252,.12),transparent)}
.btl-move--dark:hover:not([disabled]){border-color:var(--text); background:linear-gradient(135deg,rgba(112,87,70,.12),transparent)}
.btl-move--steel:hover:not([disabled]){border-color:var(--muted); background:linear-gradient(135deg,rgba(183,183,206,.16),transparent)}
.btl-move--fairy:hover:not([disabled]){border-color:#f472b6; background:linear-gradient(135deg,rgba(214,133,173,.14),transparent)}

/* ---------- Secondary Actions (Showdown-style: clean, compact) ---------- */
.btl-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:10px;
  align-items:center;
  justify-content:flex-start;
}
.btl-actions--end{margin-top:0; justify-content:center}
.btl-act{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:7px 14px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--card);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:all .12s ease;
  font-family:inherit;
  color:var(--text);
  text-decoration:none;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  min-height:36px;
}
.btl-act:hover{
  background:var(--soft);
  border-color:var(--border);
  transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(0,0,0,.06);
  text-decoration:none;
}
.btl-act:active{
  transform:translateY(0);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.btl-act--run{
  border-color:#86efac;
  color:#15803d;
  background:#dcfce7;
}
.btl-act--run:hover{
  background:#bbf7d0;
  border-color:#4ade80;
}
.btl-act--forfeit{
  border-color:#fca5a5;
  color:#991b1b;
  background:#fee2e2;
}
.btl-act--forfeit:hover{
  background:#fecaca;
  border-color:#f87171;
}
.btl-act--primary{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
  box-shadow:0 2px 4px rgba(37,99,235,.2);
}
.btl-act--primary:hover{
  background:#1d4ed8;
  box-shadow:0 3px 6px rgba(37,99,235,.3);
}
/* Tera / Mega buttons: компактные табы */
.btl-act--tera,
.btl-act--mega{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 14px;
  border-radius:999px;
  border:1px solid rgba(168,85,247,.3);
  background:rgba(168,85,247,.06);
  color:#4c1d95;
  cursor:pointer;
  transition:all .15s;
  font-weight:700;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.btl-act--mega{
  border-color:rgba(251,191,36,.4);
  background:rgba(251,191,36,.08);
  color:#92400e;
}
.btl-act--tera:hover:not([disabled]){
  background:rgba(168,85,247,.16);
  border-color:rgba(168,85,247,.6);
}
.btl-act--mega:hover:not([disabled]){
  background:rgba(251,191,36,.2);
  border-color:rgba(251,191,36,.7);
}
.btl-act--tera[disabled],
.btl-act--mega[disabled]{
  opacity:.5;
  cursor:not-allowed;
}
.btl-act--tera-available{
  border-color:rgba(168,85,247,.4);
  background:rgba(168,85,247,.1);
}
.btl-act--tera[aria-pressed="true"]{
  background:rgba(168,85,247,.25);
  border-color:rgba(168,85,247,.7);
  box-shadow:0 0 0 2px rgba(168,85,247,.3);
}
.btl-act--tera-used{
  opacity:.6;
  filter:grayscale(0.5);
}
.btl-act__tera-icon--img{
  padding:0;
  margin:0;
  display:inline-flex;
  align-items:center;
  height:20px;
}
.btl-act__tera-icon--img img{
  display:block;
  width:60px;
  height:20px;
  object-fit:contain;
}
.btl-act__tera-indicator{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#a855f7;
  display:inline-block;
}
.btl-act__tera-indicator--used{
  background:var(--muted);
  opacity:.6;
}
.btl-act--active{background:rgba(59,130,246,.08) !important; border-color:rgba(59,130,246,.4) !important}
.btl-act__tera-type{font-size:9px; font-weight:800; color:#fff; padding:1px 5px; border-radius:4px; margin-left:3px}

/* Tera badge on HUD */
.b-badge--tera{font-size:9px; font-weight:800; color:#fff; padding:2px 7px; border-radius:4px; margin-left:3px; animation:tera-pulse 2s infinite; box-shadow:0 0 6px rgba(168,85,247,.3)}
/* Showdown-style image variant */
.b-badge--tera-img{
  padding:0;
  margin-left:4px;
  border-radius:0;
  box-shadow:none;
}
.b-badge--tera-img img{
  display:block;
  width:72px;
  height:24px;
  object-fit:contain;
}
@keyframes tera-pulse{
  0%,100%{opacity:1; filter:brightness(1); box-shadow:0 0 6px rgba(168,85,247,.3)}
  50%{opacity:.85; filter:brightness(1.15); box-shadow:0 0 12px rgba(168,85,247,.5)}
}
/* Tera crystalline HUD effect */
.btl-hud--tera{
  border:1.5px solid rgba(168,85,247,.35) !important;
  background:linear-gradient(135deg, rgba(168,85,247,.06), rgba(236,72,153,.03), rgba(255,255,255,.88)) !important;
  box-shadow:0 2px 12px rgba(168,85,247,.12), inset 0 0 20px rgba(168,85,247,.03) !important;
}
.btl-sprite--tera img{
  filter:drop-shadow(0 0 8px rgba(168,85,247,.4)) drop-shadow(0 0 16px rgba(168,85,247,.15)) drop-shadow(1px 2px 3px rgba(0,0,0,.15));
}

/* Tera panel */
.btl-tera-panel{padding:10px; border:1px solid rgba(168,85,247,.25); border-radius:10px; background:linear-gradient(135deg, rgba(168,85,247,.04), rgba(236,72,153,.02)); margin-top:8px}
.btl-tera-moves{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:8px}
.btl-move--tera{border:2px solid rgba(168,85,247,.3) !important; background:linear-gradient(135deg, rgba(168,85,247,.08), transparent) !important}
.btl-move--tera:hover{border-color:rgba(168,85,247,.6) !important}

/* Tera log line styling */
.btl-log__line--tera{background:rgba(168,85,247,.08); font-weight:700; color:#7c3aed}

/* ── Battle Bag panel ───────────────────────────────── */
.btl-act--bag{border-color:rgba(59,130,246,.3); color:#1d4ed8; background:rgba(59,130,246,.04)}
.btl-act--bag:hover{background:rgba(59,130,246,.1); border-color:rgba(59,130,246,.5)}
.btl-bag{padding:10px; border:1px solid rgba(59,130,246,.2); border-radius:12px; background:linear-gradient(135deg, rgba(59,130,246,.03), rgba(16,185,129,.02)); margin-top:8px}
.btl-bag__header{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.btl-bag__title{font-weight:800; font-size:14px; color:var(--text)}
.btl-act--sm{padding:2px 8px; font-size:12px; min-width:auto; border-radius:6px}
.btl-act[disabled]{opacity:.4; cursor:not-allowed; pointer-events:none}
.btl-bag__tabs{display:flex; gap:4px; margin-bottom:8px; overflow-x:auto; -webkit-overflow-scrolling:touch}
.btl-bag__tab{padding:4px 10px; font-size:11px; font-weight:700; border-radius:8px; border:1px solid var(--border); background:var(--soft); color:var(--muted); cursor:pointer; white-space:nowrap; transition:all .15s}
.btl-bag__tab--active{background:var(--primary); color:#fff; border-color:var(--primary)}
.btl-bag__tab:hover{border-color:var(--primary)}
.btl-bag__content{min-height:40px}
.btl-bag__loading{text-align:center; padding:16px; color:var(--muted); font-size:13px}
.btl-bag__empty{text-align:center; padding:16px; color:var(--muted); font-size:13px}
.btl-bag__items{display:flex; flex-direction:column; gap:4px}
.btl-bag__item-form{width:100%}
.btl-bag__item{display:flex; align-items:center; gap:8px; width:100%; padding:8px 10px; min-height:44px; border:1px solid var(--border); border-radius:8px; background:var(--card); cursor:pointer; transition:all .15s; text-align:left; font-size:13px}
.btl-bag__item:hover:not([disabled]){border-color:var(--primary); background:rgba(59,130,246,.04); transform:translateY(-1px); box-shadow:0 2px 6px rgba(0,0,0,.06)}
.btl-bag__item[disabled]{opacity:.45; cursor:not-allowed}
.btl-bag__item-icon{font-size:20px; flex-shrink:0; width:28px; min-height:28px; display:flex; align-items:center; justify-content:center; text-align:center; background:var(--inv-icon-bg,var(--soft)); border-radius:6px}
.btl-bag__item-icon img{width:24px; height:24px; object-fit:contain}
.btl-bag__item-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.btl-bag__item-name{font-weight:700; font-size:13px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.btl-bag__item-desc{font-size:10px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.btl-bag__item-count{font-weight:800; font-size:14px; color:var(--primary); flex-shrink:0; min-width:28px; text-align:right}
.btl-bag__note{font-size:9px; color:#ef4444; font-weight:700; margin-left:4px}

/* ── Catch log lines ────────────────────────────────── */
.btl-log__line--catch{background:rgba(34,197,94,.12); font-weight:800; color:#15803d; font-size:14px}
.btl-log__line--catch-attempt{background:rgba(59,130,246,.08); color:#1d4ed8; font-weight:600}
.btl-log__line--catch-fail{background:rgba(239,68,68,.08); color:#dc2626; font-weight:600}
.btl-log__line--shake{color:var(--muted); font-style:italic; padding-left:16px}
.btl-log__line--item{background:rgba(59,130,246,.06); color:#1d4ed8; font-weight:600}
.btl-log__line--heal{background:rgba(34,197,94,.06); color:#15803d; font-weight:600}

/* ── Catch result link ──────────────────────────────── */
.btl-result__link{display:inline-block; margin-left:8px; padding:3px 12px; font-size:12px; font-weight:700; background:rgba(255,255,255,.2); border-radius:8px; color:inherit; text-decoration:none; border:1px solid rgba(255,255,255,.3); transition:all .15s}
.btl-result__link:hover{background:rgba(255,255,255,.35)}

/* Timer */
.btl-timer{
  margin-left:auto;
  font-size:14px;
  font-weight:900;
  color:var(--muted);
  padding:6px 12px;
  background:rgba(2,6,23,.03);
  border-radius:8px;
}

/* ---------- Battle Log (Showdown-style: same width as arena) ---------- */
.btl-log-wrapper, .btl-details{
  border:none;
  border-top:1px solid var(--border);
  border-radius:0;
  margin-top:0;
  background:var(--card);
  overflow:hidden;
  width:100%;
}

.btl-details:last-child{
  border-radius:0 0 12px 12px;
}
.btl-log-toggle{
  padding:10px 16px;
  font-size:13px;
  font-weight:800;
  color:var(--muted);
  cursor:pointer;
  list-style:none;
  user-select:none;
  display:flex;
  align-items:center;
  gap:6px;
}
.btl-log-toggle::-webkit-details-marker{display:none}
.btl-log-toggle::before{
  content:'';
  display:inline-block;
  width:0; height:0;
  border-left:5px solid var(--muted);
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  transition:transform .15s;
}
details[open] > .btl-log-toggle::before{transform:rotate(90deg)}

.btl-log{
  max-height:320px;
  overflow-y:auto;
  border-top:1px solid var(--border);
  scroll-behavior:smooth;
}
.btl-log__empty{
  padding:20px 16px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}
.btl-log__turn{
  padding:8px 16px;
  background:rgba(2,6,23,.04);
  font-size:12px;
  font-weight:700;
  border-bottom:1px solid rgba(0,0,0,.08);
  margin-top:4px;
  font-weight:900;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  position:sticky;
  top:0;
  z-index:1;
  border-bottom:1px solid rgba(226,232,240,.6);
}
.btl-log__line{
  padding:6px 16px;
  font-size:13px;
  line-height:1.55;
  border-bottom:1px solid rgba(226,232,240,.4);
  color:var(--text);
}
.btl-log__line:last-child{border-bottom:none}

/* Log colors */
.btl-log__line--damage{color:var(--text); font-weight:600}
.btl-log__line--super{color:#15803d; font-weight:700; background:rgba(34,197,94,.06)}
.btl-log__line--resist{color:#d97706; background:rgba(245,158,11,.05)}
.btl-log__line--immune{color:#9ca3af; font-style:italic}
.btl-log__line--crit{color:#dc2626; font-weight:700; background:rgba(239,68,68,.05)}
.btl-log__line--faint{color:#b91c1c; font-weight:800; background:rgba(185,28,28,.06)}
.btl-log__line--status{color:#7c3aed; font-weight:600}
.btl-log__line--boost{color:#2563eb; font-weight:600}

/* ---------- Details Panel ---------- */
.btl-info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding:12px 16px;
  border-top:1px solid var(--border);
}
.btl-info-card{
  background:rgba(2,6,23,.015);
  border-radius:10px;
  padding:10px 12px;
  border:1px solid rgba(226,232,240,.5);
}
.btl-info-card__title{
  font-size:12px;
  font-weight:800;
  color:var(--muted);
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.btl-stats-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px 8px;
}
.btl-stat{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:2px 0;
}
.btl-stat__label{
  font-size:10px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
}
.btl-stat__value{
  font-size:13px;
  font-weight:800;
}
.btl-stat__boost{font-size:10px; margin-left:2px}
.btl-stat__boost--up{color:#16a34a}
.btl-stat__boost--down{color:#dc2626}

.btl-info-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:4px 0;
  font-size:12px;
  border-top:1px solid rgba(226,232,240,.4);
  margin-top:4px;
}
.btl-info-label{
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:.04em;
}

/* ---------- Meta (Showdown-style: same width as arena) ---------- */
.btl-meta{
  text-align:center;
  font-size:11px;
  color:var(--muted);
  padding:8px 16px;
  width:100%;
  margin-top:0;
  border-top:1px solid var(--border);
  background:var(--soft);
}

/* ---------- MOBILE RESPONSIVE (Modern Showdown-style) ---------- */
@media (max-width:600px){
  .btl{
    padding:0 8px;
  }
  
  /* Arena mobile */
  .btl-arena{
    min-height:220px;
    padding:12px 10px;
  }
  .btl-arena::before{
    width:120px; height:28px;
    bottom:45px; left:10px;
  }
  .btl-arena::after{
    width:110px; height:24px;
    top:70px; right:10px;
  }
  
  /* Sprites mobile */
  .btl-sprite{
    width:85px;
    height:85px;
  }
  .btl-sprite img{
    max-width:75px;
    max-height:75px;
  }
  
  /* HUD mobile */
  .btl-hud{
    padding:7px 10px;
    border-radius:8px;
  }
  .btl-hud__name{
    font-size:12px;
  }
  .btl-hud__level{
    font-size:10px;
  }
  .btl-hp__text{
    font-size:10px;
    min-width:45px;
  }
  .btl-hp__bar{
    height:8px;
  }
  
  /* Moves mobile */
  .btl-moves{
    grid-template-columns:1fr 1fr;
    gap:6px;
  }
  .btl-move{
    padding:7px 9px;
    border-radius:8px;
  }
  .btl-move__name{
    font-size:12px;
  }
  .btl-move__stats{
    font-size:9px;
    gap:6px;
  }
  
  /* Panel mobile */
  .btl-panel{
    padding:10px 12px;
  }
  .btl-actions{
    gap:6px;
  }
  .btl-act{
    padding:7px 11px;
    font-size:11px;
    min-height:36px;
    border-radius:8px;
  }
  
  /* Result mobile */
  .btl-result{
    padding:14px 16px;
    font-size:16px;
    border-radius:14px 14px 0 0;
  }
  .btl-result__icon{
    font-size:20px;
  }
  .btl-result-card {
    margin-left: 8px;
    margin-right: 8px;
    margin-bottom: 12px;
    border-radius: 14px;
  }
  .btl-result-card__header {
    padding: 18px 20px 14px;
  }
  .btl-result-card__icon {
    font-size: 42px;
  }
  .btl-result-card__title {
    font-size: 20px;
  }
  .btl-result-card__rewards {
    padding: 14px 16px 18px;
    gap: 8px;
  }
  .btl-result-card__reward {
    padding: 6px 12px;
    font-size: 12px;
  }
  
  /* Log mobile */
  .btl-log-wrapper{
    margin:8px 0;
    border-radius:12px;
  }
  .btl-log-toggle{
    padding:10px 14px;
    font-size:12px;
  }
  .btl-log__turn{
    padding:6px 12px;
    font-size:10px;
  }
  .btl-log__line{
    padding:6px 12px;
    font-size:11px;
  }
  .btl-log__icon{
    font-size:12px;
    width:16px;
  }
  .btl-log__text{
    font-size:11px;
  }
  .btl-log{
    max-height:280px;
  }
  
  /* Info grid mobile */
  .btl-info-grid{
    grid-template-columns:1fr;
    gap:10px;
    padding:12px 16px;
  }
  .btl-stats-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media (max-width:380px){
  .btl-moves{
    grid-template-columns:1fr;
    gap:6px;
  }
  .btl-sprite{
    width:70px;
    height:70px;
  }
  .btl-sprite img{
    max-width:60px;
    max-height:60px;
  }
  .btl-arena{
    min-height:200px;
    padding:10px 8px;
  }
  .btl-slot{
    gap:6px;
  }
  .btl-hud{
    padding:6px 8px;
  }
  .btl-move{
    padding:6px 8px;
  }
  .btl-act{
    padding:6px 10px;
    font-size:10px;
    min-height:32px;
  }
  .btl-side{
    padding:8px 6px;
  }
  .btl-side__team{
    grid-template-columns:repeat(2, 1fr);
  }
}

/* Battle: responsive container and touch targets */
@media (max-width:640px){
  .btl{
    max-width:100%;
    overflow-x:hidden;
  }
  .btl-actions{
    gap:8px;
    row-gap:8px;
  }
  .btl-actions .btl-act{
    min-height:42px;
    flex:1 1 auto;
    min-width:min(calc(33.33% - 6px), 110px);
    max-width:none;
  }
  .btl-actions .btl-act--tera{
    min-width:min(calc(33.33% - 6px), 100px);
  }
  .btl-actions .btl-act--tera .btl-act__tera-icon--img img{
    width:36px;
    height:auto;
  }
  .btl-replay-controls{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .btl-replay-controls input[type="range"]{
    width:100%;
  }
}

/* ═══════════════════════ KPI Grid (shared) ═══════════════════════ */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}
@media (max-width:860px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
}
.kpi{
  padding:12px;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--card);
}
.kpi-label{
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.10em;
  font-weight:800;
}
.kpi-value{
  font-size:18px;
  font-weight:950;
  margin-top:4px;
}
.move-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
  margin-top:10px;
}
@media (max-width:860px){
  .move-grid{grid-template-columns:1fr}
}
.move-card{width:100%}
.move-btn{
  width:100%;
  text-align:left;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
  box-shadow:none;
  cursor:pointer;
}
.move-btn:hover{border-color:rgba(37,99,235,.35); background:rgba(37,99,235,.03)}
.move-btn[disabled]{opacity:.55; cursor:not-allowed}
.move-name{font-weight:950; font-size:14px}
.move-meta{
  text-align:right;
  font-size:12px;
  font-weight:900;
  color:var(--text);
  opacity:.92;
  min-width:92px;
}
.move-static{
  padding:12px;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--card);
  box-shadow:none;
}

.stack{display:flex; flex-direction:column; gap:10px; margin-top:10px}
.stack-item{
  padding:12px;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--card);
}

.notice{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--card);
}
.notice.ok{border-color:rgba(22,163,74,.25); background:var(--ok-weak)}
.notice.err{border-color:rgba(220,38,38,.25); background:var(--danger-weak)}

code{background:rgba(2,6,23,.04); padding:2px 6px; border-radius:8px; border:1px solid rgba(2,6,23,.06)}


/* Forms */
.form-row{display:flex; flex-direction:column; gap:6px; margin-top:10px}
label{font-size:12px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(2,6,23,.14);
  background:#fff;
  outline:none;
}
.input:focus{
  border-color:rgba(37,99,235,.50);
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

pre{margin:10px 0 0; padding:12px; border-radius:14px; border:1px solid var(--border); background:rgba(2,6,23,.02); overflow:auto}


/* =============================================
   Game Shell — 3-column layout (dock | stage | chat)
   ============================================= */

.game-shell{
  display:grid;
  grid-template-columns: 160px minmax(0, 1fr) 380px;
  grid-template-rows: 100vh;
  min-height:100vh;
}
@media (max-width: 980px){
  .game-shell{
    grid-template-columns: 56px 1fr;
    grid-template-rows: 1fr;
  }
  /* Chat hidden by default on tablet/phone — only visible when FAB clicked */
  .game-shell > .chat{
    position:fixed;
    bottom:0;left:0;right:0;
    height:min(78vh,520px);
    z-index:1000;
    transform:translateY(100%);
    transition:transform .28s cubic-bezier(0.32,0.72,0,1);
    box-shadow:0 -12px 40px rgba(0,0,0,.18);
    border-radius:20px 20px 0 0;
    background:var(--card);
    border:1px solid var(--border);
  }
  .game-shell > .chat.chat--mobile-open{
    transform:translateY(0);
  }
  .mobile-chat-toggle{
    display:flex !important;
    position:fixed;
    bottom:20px;
    right:20px;
    width:52px;
    height:52px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--primary) 0%, #3b82f6 100%);
    color:#fff;
    border:none;
    box-shadow:0 4px 16px rgba(37,99,235,.4);
    font-size:20px;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:999;
  }
  .dock-label{font-size:8px}
  .dock-btn{width:46px; padding:4px 1px 2px}
}
@media (max-width: 560px){
  .game-shell{
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* ── Mobile Dock: compact bottom-style navigation ── */
  .game-shell > .dock{
    order: 3; /* Move dock to bottom */
    flex-direction:row;
    height:auto;
    padding:0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    border-right:none;
    border-top:1px solid var(--border);
    border-bottom:none;
    overflow-x:hidden;
    overflow-y:visible;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 -4px 20px rgba(0,0,0,.08);
    z-index: 100;
    min-width:auto;
  }
  .game-shell > .dock::-webkit-scrollbar{display:none}
  .dock-spacer{display:none}
  .dock-brand{display:none}
  .dock-profile{display:none}
  .dock-invites{display:none}
  .dock-group{
    flex-direction:row;
    flex-wrap:wrap;              /* Иконки в несколько строк */
    flex-shrink:0;
    gap:6px 8px;
    width:100%;
    justify-content:center;
    padding:6px 10px 10px;
  }
  .dock-btn{
    flex-shrink:0;
    width:auto;
    min-width:56px;
    height:auto;
    padding:8px 6px 6px;
    border-radius:14px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    transition: background .15s;
  }
  .dock-btn:hover,.dock-btn:focus-visible{background:rgba(0,0,0,.04)}
  .dock-btn:active{background:rgba(0,0,0,.08)}
.dock-ic{
  font-size:32px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center
}
.dock-ic .panel-icon{
  width:36px;
  height:36px;
  object-fit:contain;
  display:block
}
.dock-ic .panel-icon-fb{
  font-size:32px;
  line-height:1
}
.dock-profile-menu__icon{display:inline-flex; align-items:center; justify-content:center}
.dock-profile-menu__icon .panel-icon{width:20px; height:20px; object-fit:contain}
.dock-profile-menu__icon .panel-icon-fb{font-size:18px}
.panel-icon{vertical-align:middle}
.panel-icon-fb{vertical-align:middle}
  .dock-label{
    font-size:0; /* подпись скрыта, текст остаётся только для скринридеров/подсказок */
    opacity:0;
    font-weight:600;
  }

/* Унифицированные подсказки для иконок */
[data-tooltip]{
  position:relative;
}
[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  left:100%;
  top:50%;
  transform:translate(10px,-50%);
  background:rgba(15,23,42,.96);
  color:#fff;
  font-size:11px;
  font-weight:600;
  padding:4px 8px;
  border-radius:8px;
  white-space:nowrap;
  box-shadow:0 6px 18px rgba(15,23,42,.35);
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease-out,transform .12s ease-out;
  z-index:250;
}
[data-tooltip]::before{
  content:"";
  position:absolute;
  left:100%;
  top:50%;
  transform:translate(2px,-50%) rotate(45deg);
  width:8px;
  height:8px;
  background:rgba(15,23,42,.96);
  opacity:0;
  transition:opacity .12s ease-out,transform .12s ease-out;
  z-index:249;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before{
  opacity:1;
  transform:translate(6px,-50%);
}
  .dock-logout{margin-top:0; margin-left:0}

  .game-shell > .stage{
    order: 1;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-top: env(safe-area-inset-top, 0);
  }

  /* ── Mobile Chat: slide-up panel, hidden until FAB clicked ── */
  .game-shell > .chat{
    order: 2;
    max-height: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: min(85vh, 520px);
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(0.32,0.72,0,1);
    z-index: 1000;
    box-shadow: 0 -12px 40px rgba(0,0,0,.2);
    border-radius: 20px 20px 0 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-bottom: none;
  }
  .game-shell > .chat.chat--mobile-open{
    transform: translateY(0);
  }

  /* Mobile chat toggle button */
  .mobile-chat-toggle{
    display: flex !important;
    position: fixed;
    bottom: calc(68px + env(safe-area-inset-bottom, 0));
    right: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, #3b82f6 100%);
    color: #fff;
    border: none;
    box-shadow: 0 6px 20px rgba(37,99,235,.4);
    font-size: 22px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1001; /* Above chat panel */
    transition: transform .15s, box-shadow .15s;
  }
  .mobile-chat-toggle:hover{box-shadow: 0 8px 24px rgba(37,99,235,.45)}
  .mobile-chat-toggle:active{transform:scale(.92)}
  .mobile-chat-toggle .chat-unread-badge{
    position:absolute;top:-2px;right:-2px;
    min-width:18px;height:18px;border-radius:9px;
    background:#ef4444;color:#fff;font-size:10px;font-weight:800;
    display:flex;align-items:center;justify-content:center;
    padding:0 4px;
  }

  /* Improve chat form on mobile */
  .chat-form{
    padding:8px 10px;
    gap:8px;
    border-top: 1px solid var(--border);
    background: var(--card);
  }
  .chat-form .input{
    font-size:14px;
    padding:10px 12px;
    border-radius:20px;
    flex: 1;
  }
  .chat-form .btn{
    padding:10px 16px;
    border-radius:20px;
    font-size:13px;
    min-width: 80px;
  }

  /* Chat body on mobile */
  .chat-body{
    padding:8px 12px;
    font-size:14px;
    max-height:none;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  
  /* Chat tabs on mobile */
  .chat-tabs{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .chat-tabs::-webkit-scrollbar{
    display: none;
  }
  .chat-tab{
    min-width: 70px;
    white-space: nowrap;
  }
  
  /* Chat peers on mobile */
  .chat-peers{
    max-height: 120px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Chat meta on mobile */
  .chat-meta{
    max-height: 200px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
.msg-body{
  font-size:13px;
  margin-left:0;
  margin-top:4px;
}
.msg-head{flex-wrap:wrap; position:relative}
.msg--system{
  background:rgba(100,116,139,.05);
  border-left:3px solid var(--muted);
  padding-left:8px;
  margin-left:4px;
}
.msg-system-icon{
  font-size:12px;
  margin-right:4px;
  opacity:.7;
}
.msg-quote-btn{
  background:transparent;
  border:none;
  padding:2px 6px;
  font-size:11px;
  cursor:pointer;
  opacity:.5;
  transition:opacity .15s;
  margin-left:auto;
  margin-right:4px;
}
.msg-quote-btn:hover{
  opacity:1;
  background:rgba(37,99,235,.1);
  border-radius:4px;
}
  .chat-tab{font-size:11px; padding:6px 4px}
  .chat-footnote{display:none}
  .chat-title{font-size:13px; margin-bottom:6px}
}

/* ── Dock (left sidebar) ── */
.dock{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
  padding:8px 6px;
  background:var(--card);
  border-right:1px solid var(--border);
  overflow-y:auto;
  min-width:160px;
  max-width:160px;
}
.dock-brand{
  font-weight:950;
  font-size:14px;
  letter-spacing:.1px;
  text-decoration:none;
  padding:6px 4px;
  color:var(--primary);
  text-align:center;
  align-self:center;
}
.dock-brand:hover{text-decoration:none; opacity:.85}

/* Dock profile section */
.dock-profile{
  padding:6px;
  background:rgba(0,0,0,.02);
  border-radius:10px;
  border:1px solid rgba(0,0,0,.06);
  margin-bottom:4px;
}
.dock-profile__link{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-decoration:none;
  color:inherit;
}
.dock-profile__avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:700;
  color:var(--muted);
  overflow:hidden;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  /* по умолчанию — простой круг без рамки */
}
.dock-profile__avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.dock-profile__name{
  font-size:11px;
  font-weight:700;
  color:var(--text);
  text-align:center;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.dock-profile{
  position:relative;
}
.dock-profile-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:4px;
  right:4px;
  min-width:0;
  border-radius:14px;
  background:rgba(248,250,252,.96);
  color:#111827;
  box-shadow:0 18px 40px rgba(15,23,42,.12);
  padding:8px 0;
  opacity:0;
  transform:translateY(4px);
  pointer-events:none;
  transition:opacity .16s ease-out, transform .16s ease-out, visibility .16s;
  z-index:120;
  border:1px solid rgba(148,163,184,.35);
  backdrop-filter:blur(12px);
}
.dock-profile-menu--open{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.dock-profile-menu__header{
  padding:0 16px 4px;
}
.dock-profile-menu__title{
  font-size:13px;
  font-weight:700;
  color:#0f172a;
}
.dock-profile-menu__list{
  display:flex;
  flex-direction:column;
  padding:4px 0 0;
}
.dock-profile-menu__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 16px;
  font-size:12px;
  color:#0f172a;
  text-decoration:none;
  cursor:pointer;
}
.dock-profile-menu__item button{
  all:unset;
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  cursor:pointer;
}
.dock-profile-menu__item:hover,
.dock-profile-menu__item:focus-visible{
  background:rgba(148,163,184,.12);
}
.dock-profile-menu__item--danger{
  color:#b91c1c;
}
.dock-profile-menu__item--danger:hover,
.dock-profile-menu__item--danger:focus-visible{
  background:rgba(254,202,202,.6);
}
.dock-profile-menu__icon{
  width:20px;
  text-align:center;
  font-size:16px;
}
.dock-profile-menu__label{
  flex:1;
}
.dock-profile-menu__divider{
  height:1px;
  margin:6px 12px;
  background:rgba(148,163,184,.45);
  border-radius:999px;
}

@media (max-width:600px){
  .dock-profile-menu{
    left:8px;
    right:8px;
    border-radius:16px;
    padding:6px 0 8px;
  }
  .dock-profile-menu__item{
    padding:8px 16px;
    font-size:13px;
  }
  .dock-profile-menu__icon{
    font-size:17px;
  }
}

/* Dock battle invitations */
.dock-invites{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:8px;
  max-height:200px;
  overflow-y:auto;
  scrollbar-width:thin;
}
.dock-invites::-webkit-scrollbar{
  width:4px;
}
.dock-invites::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.2);
  border-radius:2px;
}
.dock-invite{
  padding:8px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px;
  font-size:11px;
  line-height:1.4;
}
.dock-invite__text{
  margin-bottom:6px;
  color:var(--text);
  font-weight:600;
}
.dock-invite__username{
  font-weight:700;
  color:var(--primary);
}
.dock-invite__actions{
  display:flex;
  gap:4px;
}
.dock-invite__btn{
  flex:1;
  padding:4px 8px;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--card);
  font-size:10px;
  font-weight:700;
  cursor:pointer;
  transition:all .12s;
  text-align:center;
}
.dock-invite__btn--accept{
  background:#22c55e;
  color:#fff;
  border-color:#16a34a;
}
.dock-invite__btn--accept:hover{
  background:#16a34a;
}
.dock-invite__btn--decline{
  background:#ef4444;
  color:#fff;
  border-color:#dc2626;
}
.dock-invite__btn--decline:hover{
  background:#dc2626;
}

.dock-group{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.dock-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  width:52px; height:auto;
  padding:5px 2px 3px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  text-decoration:none;
  cursor:pointer;
  font:inherit;
  color:var(--text);
  transition:background .12s, border-color .12s;
}
.dock-btn:hover{
  background:rgba(2,6,23,.04);
  border-color:rgba(2,6,23,.08);
  text-decoration:none;
}
.dock-btn.danger{color:var(--danger)}
.dock-btn.danger:hover{background:var(--danger-weak); border-color:rgba(220,38,38,.2)}

.dock-ic{font-size:42px; line-height:1; display:inline-flex; align-items:center; justify-content:center}
.dock-ic .panel-icon{width:42px; height:42px; object-fit:contain; display:block}
.dock-ic .panel-icon-fb{font-size:42px; line-height:1}
.dock-profile-menu__icon{display:inline-flex; align-items:center; justify-content:center}
.dock-profile-menu__icon .panel-icon{width:20px; height:20px; object-fit:contain}
.dock-profile-menu__icon .panel-icon-fb{font-size:18px}
.panel-icon{vertical-align:middle}
.panel-icon-fb{vertical-align:middle}
.gw-quick-ic{display:inline-flex;align-items:center;justify-content:center}
.gw-quick-ic .panel-icon{width:28px;height:28px;object-fit:contain}
.gw-quick-ic .panel-icon-fb{font-size:26px}
.gw-topbar__btn-ic,.gw-topbar__time-ic{display:inline-flex;align-items:center;justify-content:center}
.gw-topbar__btn-ic .panel-icon,.gw-topbar__time-ic .panel-icon{width:18px;height:18px;object-fit:contain}
.gw-topbar__time-ic .panel-icon-fb,.gw-topbar__btn-ic .panel-icon-fb{font-size:14px}
.gw-wild__icon-paw .panel-icon{width:100%;height:100%;object-fit:contain}
.gw-wild__icon-paw .panel-icon-fb{font-size:22px}
  .dock-label{
    font-size:0;
    line-height:1.1;
    white-space:nowrap;
    opacity:0;
    letter-spacing:-.02em;
  }
.dock-spacer{flex:1}
.dock-logout{margin-top:auto}

/* ── Hide dock on world page (desktop) — gw provides its own nav ── */
@media (min-width:769px){
  .game-shell:has(.gw) > .dock{
    min-width:200px;
    width:200px;
  }
  .game-shell:has(.gw) > .dock .dock-label{ display:block; }
  .game-shell:has(.gw) > .dock .dock-btn{ width:auto; padding:6px 8px; }
  .game-shell:has(.gw) > .dock .dock-profile,
  .game-shell:has(.gw) > .dock .dock-invites{ display:block; }
}

/* ── Stage (main content) ── */
.stage{
  overflow-y:auto;
  overflow-x:hidden;
  min-width:0;
  background:var(--bg);
  position:relative;
}
.stage .flash-area{
  position:sticky;
  top:0;
  z-index:50;
  padding:0 14px;
}

/* ── Chat (right sidebar) ── */
.chat{
  display:flex;
  flex-direction:column;
  background:var(--card);
  border-left:1px solid var(--border);
  overflow:visible;
}
.chat-card{
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:visible;
}
.chat-head{
  padding:10px 12px 0;
  border-bottom:1px solid var(--border);
}
.chat-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  font-size:14px;
  margin-bottom:8px;
}
.chat-title .dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--ok);
  flex-shrink:0;
}
.chat-auto-scroll-wrap{
  margin-bottom:6px;
}
.chat-auto-scroll-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  cursor:pointer;
  user-select:none;
}
.chat-auto-scroll-cb{
  width:14px;
  height:14px;
  accent-color:var(--primary);
}

.chat-tabs{
  display:flex;
  gap:0;
}
.chat-tab{
  flex:1;
  padding:10px 8px;
  border:none;
  border-bottom:2px solid transparent;
  background:none;
  cursor:pointer;
  font:inherit;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  text-align:center;
  transition:color .12s, border-color .12s;
}
.chat-tab:hover{color:var(--text)}
.chat-tab.active{color:var(--primary); border-bottom-color:var(--primary)}
.chat-tab[disabled]{opacity:.4; cursor:not-allowed}

.chat-meta{
  padding:10px 14px;
  border-bottom:1px solid var(--border);
  background:rgba(2,6,23,.02);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.chat-row{display:flex; flex-direction:column; gap:4px}
.chat-label{font-size:11px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
.chat-hint{font-size:11px}

.chat-peers{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.chat-peer{
  padding:4px 8px;
  border-radius:8px;
  border:1px solid rgba(2,6,23,.10);
  background:rgba(2,6,23,.02);
  cursor:pointer;
  font:inherit;
  font-size:12px;
  font-weight:700;
}
.chat-peer:hover{background:rgba(2,6,23,.06)}
.chat-peer.active{background:var(--primary-weak); border-color:rgba(37,99,235,.25); color:var(--primary)}
.chat-peer.bot{font-style:italic; color:var(--muted)}

.chat-search-wrap{
  padding:0 14px 10px;
  display:none;
}
.chat-search{
  width:100%;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  font-size:13px;
  background:var(--soft);
}

.chat-form-actions{
  display:flex;
  align-items:center;
  gap:4px;
  flex-shrink:0;
}
.chat-form-action-btn{
  width:32px;
  height:32px;
  border:none;
  background:transparent;
  border-radius:10px;
  font-size:16px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  position:relative;
}
.chat-form-action-btn:hover{background:rgba(0,0,0,.06); color:var(--text)}
.chat-send-btn{border-radius:12px; font-weight:700}

.chat-input-long{
  max-width:none;
}

.chat-more-btn{
  font-size:18px;
}

.chat-more-menu{
  position:relative;
}

.chat-more-menu{
  position:absolute;
  right:0;
  bottom:110%;
  min-width:200px;
  padding:6px 0;
  border-radius:10px;
  background:var(--card,#fff);
  border:1px solid var(--border,#e2e8f0);
  box-shadow:0 10px 30px rgba(15,23,42,.25);
  display:none;
  z-index:1200;
}

.chat-more-menu--open{
  display:block;
}

.chat-more-menu__item{
  width:100%;
  padding:6px 10px;
  border:none;
  background:none;
  text-align:left;
  font-size:13px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
}

.chat-more-menu__item:hover{
  background:rgba(15,23,42,.04);
}

.chat-body{
  flex:1;
  overflow-y:auto;
  padding:10px 14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:13px;
  min-height:120px;
}

.msg{
  padding:10px 12px;
  border-radius:10px;
  transition:background .15s;
  margin-bottom:4px;
  background:var(--card);
  border:1px solid transparent;
}
.msg:hover{
  background:rgba(2,6,23,.03);
  border-color:var(--border);
}
.msg:last-child{margin-bottom:0}
.msg--system{
  background:rgba(100,116,139,.08);
  border-left:3px solid rgba(100,116,139,.4);
  padding-left:12px;
}
/* Свои сообщения — выравнивание справа */
.msg--own{
  margin-left:auto;
  max-width:85%;
}
.msg--own .msg-head{
  justify-content:flex-end;
  flex-direction:row-reverse;
}
.msg--own .msg-head .msg-time{ margin-left:0; margin-right:auto; }
.msg--own .msg-body{ text-align:right; }
.msg.bot{opacity:.75; font-style:italic}
.msg-head{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:4px;
}
.msg-who{font-weight:800; font-size:13px; cursor:pointer; flex-shrink:0}
.msg-who:hover{color:var(--primary); text-decoration:underline}
.msg-gender{font-size:11px; margin-left:2px; flex-shrink:0}
.msg-gender--m{color:#3b82f6}
.msg-gender--f{color:#ec4899}
.msg-staff-badge{
  font-size:11px;
  margin-right:4px;
  padding:2px 8px;
  border-radius:6px;
  font-weight:800;
  flex-shrink:0;
}
.msg-staff-badge.msg-staff--admin{background:rgba(220,38,38,.15); color:#dc2626}
.msg-staff-badge.msg-staff--police{background:rgba(37,99,235,.15); color:#2563eb}
.msg-staff-badge.msg-staff--moderator{background:rgba(124,58,237,.15); color:#7c3aed}
.msg-staff-badge.msg-staff--curator{background:rgba(5,150,105,.15); color:#059669}
.msg-vip-badge{
  font-size:14px;
  margin-right:4px;
  padding:0 2px;
  color:#d97706;
  filter:drop-shadow(0 0 2px rgba(217,119,6,.5));
  flex-shrink:0;
}
.msg-clan-badge{
  font-size:11px;
  margin-right:6px;
  padding:2px 6px;
  border-radius:6px;
  background:rgba(124,58,237,.14);
  color:#6d28d9;
  font-weight:800;
  white-space:nowrap;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.msg-clan-badge .msg-clan-icon{
  width:16px;
  height:16px;
  object-fit:contain;
  border-radius:2px;
  vertical-align:middle;
}
.msg-time{
  font-size:11px;
  margin-left:auto;
  color:var(--muted);
  flex-shrink:0;
  padding:2px 6px;
  border-radius:4px;
  transition:all .15s;
  user-select:none;
}
.msg-time:hover{
  background:rgba(37,99,235,.1);
  color:var(--primary);
}
.msg-mod-wrap{
  margin-left:4px;
  flex-shrink:0;
}
.msg-mod-btn{
  padding:2px 6px;
  border:none;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-size:14px;
  line-height:1;
  border-radius:4px;
}
.msg-mod-btn:hover{
  background:rgba(220,38,38,.12);
  color:var(--danger, #dc2626);
}
.chat-mod-popover .chat-mod-action:hover{
  background:var(--bg);
}
.chat-msg-actions-popover .chat-mod-action:first-child{
  border-bottom:1px solid var(--border);
  margin-bottom:2px;
  padding-bottom:6px;
}
.chat-msg-actions-popover .chat-mod-action:only-child{
  border-bottom:none;
  margin-bottom:0;
  padding-bottom:8px;
}

/* Блок превью цитаты над полем ввода */
.chat-quote-preview-wrap{
  display:block;
  margin-bottom:8px;
  padding:8px 10px;
  background:rgba(37,99,235,.06);
  border:1px solid var(--border);
  border-radius:8px;
  border-left:3px solid var(--primary);
}
.chat-quote-preview-wrap[hidden]{ display:none !important; }
.chat-quote-preview{
  position:relative;
  padding-right:28px;
}
.chat-quote-preview-label{
  font-size:12px;
  color:var(--muted);
  display:block;
  margin-bottom:4px;
}
.chat-quote-preview-label strong{ color:var(--text); }
.chat-quote-preview-body{
  margin:0;
  font-size:13px;
  line-height:1.4;
  color:var(--text);
  white-space:pre-wrap;
  word-break:break-word;
  max-height:3em;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chat-quote-preview-remove{
  position:absolute;
  top:0;
  right:0;
  width:24px;
  height:24px;
  padding:0;
  border:none;
  background:rgba(0,0,0,.06);
  border-radius:6px;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
}
.chat-quote-preview-remove:hover{
  background:rgba(220,38,38,.15);
  color:var(--danger, #dc2626);
}

.msg-body{
  margin-top:6px;
  word-break:break-word;
  margin-left:32px;
  line-height:1.5;
  color:var(--text);
}
.msg-body a{color:var(--primary); text-decoration:underline}
.msg-body a:hover{opacity:.8}

/* Inline mini sprite in chat ([p:ident:0] / [p:ident:1]) */
.msg-body .chat-msg-sprite{
  display:inline-block;
  width:28px;
  height:28px;
  vertical-align:middle;
  image-rendering:pixelated;
  image-rendering:-moz-crisp-edges;
  object-fit:contain;
}

/* Stickers in chat ([s:ident]) */
.msg-body .chat-sticker{
  display:inline-block;
  max-width:56px;
  max-height:56px;
  vertical-align:middle;
  border-radius:8px;
  margin:4px 2px;
}

.msg-body--sticker-only{
  text-align:center;
}

.msg-body--sticker-only .chat-sticker{
  max-width:96px;
  max-height:96px;
  display:block;
  margin:2px auto;
}

/* Подсветка @упоминаний */
.msg-body .chat-mention{
  font-weight:600;
  color:var(--primary);
}

/* Заголовок для текущего диалога ЛС */
.chat-dm-header{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  font-size:12px;
  border-bottom:1px solid var(--border);
  background:rgba(15,23,42,.03);
}
.chat-dm-header[hidden]{
  display:none;
}
.chat-dm-header-avatar{
  width:24px;
  height:24px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,rgba(37,99,235,.16),rgba(124,58,237,.12));
  color:#0f172a;
  font-weight:700;
  font-size:12px;
  overflow:hidden;
}
.chat-dm-header-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
}
.chat-dm-header-text{
  display:flex;
  flex-direction:column;
}
.chat-dm-header-title{
  font-weight:600;
  font-size:12px;
}
.chat-dm-header-sub{
  font-size:11px;
  color:var(--muted);
}
.chat-dm-header-title .chat-dm-header-badge{
  display:inline-flex;
  align-items:center;
  margin-left:4px;
  vertical-align:middle;
}
.chat-dm-header-badge--clan{
  padding:1px 4px;
  border-radius:4px;
  background:rgba(124,58,237,.14);
  color:#6d28d9;
  font-size:12px;
}
.chat-dm-header-badge--vip{
  margin-left:2px;
  font-size:12px;
}
.chat-dm-header-clan-icon{
  width:16px;
  height:16px;
  object-fit:contain;
  border-radius:2px;
}

/* Chat creature embed — компактная карточка */
.msg-creature-embed{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:4px 6px;
  margin-top:4px;
  border-radius:8px;
  border:1px solid var(--border);
  background:rgba(37,99,235,.06);
  cursor:pointer;
  max-width:72px;
  transition:background .15s,border-color .15s;
}
.msg-creature-embed:hover{
  background:rgba(37,99,235,.12);
  border-color:rgba(37,99,235,.3);
}
.msg-creature-embed img{
  image-rendering:pixelated;
  width:32px;
  height:32px;
  object-fit:contain;
  display:block;
}
.msg-creature-name{
  font-weight:700;
  font-size:10px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.msg-creature-lvl{
  font-size:9px;
  color:var(--muted);
}

/* Модальное превью покемона из чата */
.chat-creature-preview-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10010;
}
.chat-creature-preview-modal{
  background:var(--card);
  border-radius:16px;
  padding:16px 18px 14px;
  box-shadow:0 18px 40px rgba(15,23,42,.6);
  border:1px solid var(--border);
  max-width:320px;
  width:100%;
}
.chat-creature-preview-modal-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}
.chat-creature-preview-modal-head img{
  width:72px;
  height:72px;
  image-rendering:pixelated;
  object-fit:contain;
}
.chat-creature-preview-title{
  font-weight:700;
  font-size:15px;
}
.chat-creature-preview-sub{
  font-size:12px;
  color:var(--muted);
}
.chat-creature-preview-footer{
  margin-top:10px;
  font-size:11px;
  color:var(--muted);
  text-align:right;
}
.chat-creature-preview-close{
  margin-top:10px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  border:none;
  border-radius:999px;
  padding:4px 10px;
  font-size:11px;
  cursor:pointer;
  background:rgba(15,23,42,.06);
}

/* Chat pokemon picker: attach card vs insert sprite */
.chat-pokemon-pick-item{
  display:flex;
  align-items:center;
  gap:4px;
}
.chat-pokemon-pick-attach{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:6px 4px;
  border-radius:8px;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  font-size:11px;
  color:var(--text);
}
.chat-pokemon-pick-attach:hover{
  background:rgba(37,99,235,.1);
  border-color:var(--border);
}
.chat-pokemon-pick-sprite{
  flex-shrink:0;
  width:28px;
  height:28px;
  padding:0;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--card);
  cursor:pointer;
  font-size:14px;
  line-height:1;
}
.chat-pokemon-pick-sprite:hover{
  background:rgba(37,99,235,.15);
}

/* Battle log improvements */
.btl-log__turn{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight:800;
  font-size:12px;
  color:var(--primary);
  margin-top:12px;
  margin-bottom:4px;
  padding:6px 10px;
  background:rgba(37,99,235,.08);
  border-radius:6px;
  border-left:3px solid var(--primary);
}
.btl-log__turn:first-child{margin-top:0}
.btl-log__turn-num{
  font-weight: 800;
  color: #1e40af;
  font-size: 13px;
}
.btl-log__turn-count{
  font-size: 11px;
  opacity: 0.7;
  font-weight: 600;
  color: var(--muted);
}
.btl-log__line{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding:6px 10px;
  margin:2px 0;
  border-radius:4px;
  transition:background .15s;
}
.btl-log__line:hover{background:rgba(0,0,0,.02)}
.btl-log__icon{
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1.2;
  width: 18px;
  text-align: center;
}
.btl-log__text{
  flex: 1;
  min-width: 0;
}

/* Pokemon sprite in log messages */
.btl-log__dmg-icon{
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  vertical-align: middle;
  filter: hue-rotate(-20deg) saturate(1.2) brightness(0.9);
}
.btl-log__line--damage .btl-log__dmg-icon{ filter: none; }

.btl-log__pokemon-sprite{
  display: inline-block;
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-right: 6px;
  margin-left: -2px;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.15));
  flex-shrink: 0;
  object-fit: contain;
}

@media (max-width: 640px){
  .btl-log__pokemon-sprite{
    width: 24px;
    height: 24px;
    margin-right: 4px;
  }
}

.btl-log-toggle{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
}
.btl-log-toggle__icon{
  transition: transform .2s;
  font-size: 12px;
  flex-shrink: 0;
}
details[open] > .btl-log-toggle .btl-log-toggle__icon{
  transform: rotate(90deg);
}
.btl-log-toggle__text{
  flex: 1;
  font-weight: 700;
  font-size: 13px;
}
.btl-log-toggle__count{
  font-size: 11px;
  padding: 2px 6px;
  background: rgba(37,99,235,.1);
  color: var(--primary);
  border-radius: 10px;
  font-weight: 700;
}
.btl-log__line--catch{color:#16a34a;font-weight:700;background:rgba(34,197,94,.08)}
.btl-log__line--super{color:#f59e0b;font-weight:600;background:rgba(245,158,11,.06)}
.btl-log__line--crit{color:#ef4444;font-weight:700;background:rgba(239,68,68,.08)}
.btl-log__line--faint{color:#dc2626;font-weight:800;background:rgba(220,38,38,.1)}
.btl-log__line--heal{color:#10b981;font-weight:600;background:rgba(16,185,129,.06)}
.btl-log__line--damage{color:var(--muted);font-weight:500}

/* Аватарки в сообщениях чата */
.msg-avatar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px; height:24px;
  border-radius:999px;
  overflow:hidden;
  flex-shrink:0;
  cursor:pointer;
  position:relative;
  border:1px solid var(--border);
  /* базовый вид без рамки */
}

/* Когда есть косметическая рамка в чате */
.msg-avatar.tc-avatar-frame{
  border-color:transparent;
  --tc-frame-inset:-4px;
  --tc-frame-size:135%;
}
.msg-avatar.tc-avatar-frame img{
  transform:scale(.88);
}

.msg-avatar img{width:100%;height:100%;object-fit:cover}
.msg-avatar--default{
  background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(124,58,237,.08));
  color:var(--primary);
  font-weight:900;
  font-size:11px;
}
.msg-online-dot{
  position:absolute;
  bottom:-1px;
  right:-1px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#16a34a;
  border:1.5px solid var(--card);
}

/* Непрочитанные бейджи на вкладках чата */
.chat-unread{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:999px;
  background:var(--danger);
  color:#fff;
  font-size:9px;
  font-weight:900;
  margin-left:4px;
  line-height:1;
}

/* Онлайн-индикатор в peer-кнопках */
.chat-peer{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.chat-peer-pic{
  width:18px;
  height:18px;
  border-radius:4px;
  object-fit:cover;
  flex-shrink:0;
}
.chat-peer-letter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:4px;
  background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(124,58,237,.08));
  color:var(--primary);
  font-weight:900;
  font-size:11px;
  flex-shrink:0;
}
.chat-peer-online{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#16a34a;
  flex-shrink:0;
  margin-left:2px;
}

/* Автокомплит для ЛС */
.chat-autocomplete{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  margin-top:4px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  z-index:1000;
  max-height:200px;
  overflow-y:auto;
}
.chat-ac-opt{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  cursor:pointer;
  transition:background .15s;
  font-size:13px;
}
.chat-ac-opt:hover{
  background:rgba(37,99,235,.08);
}
.chat-ac-opt:first-child{
  border-radius:8px 8px 0 0;
}
.chat-ac-opt:last-child{
  border-radius:0 0 8px 8px;
}
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:4px;
  background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(124,58,237,.08));
  color:var(--primary);
  font-weight:900;
  font-size:9px;
  flex-shrink:0;
}
.chat-peer-online{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#16a34a;
  flex-shrink:0;
}

/* Автокомплит для ника */
.chat-autocomplete{
  position:absolute;
  left:0; right:0;
  top:100%;
  z-index:100;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 8px 24px rgba(2,6,23,.12);
  overflow:hidden;
  margin-top:2px;
}
.chat-ac-opt{
  display:flex;
  align-items:center;
  padding:8px 10px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:background .1s;
}
.chat-ac-opt:hover{
  background:rgba(37,99,235,.06);
}

.chat-form{
  display:flex;
  gap:6px;
  padding:8px 12px;
  border-top:1px solid var(--border);
}
.chat-form .input{flex:1; padding:8px 10px; font-size:13px}
.chat-form .btn{padding:8px 12px; font-size:12px; flex-shrink:0}

.chat-footnote{
  padding:6px 12px;
  font-size:11px;
  border-top:1px solid var(--border);
}


/* =============================================
   Modal overlay
   ============================================= */

.modal-root{
  position:fixed;
  inset:0;
  z-index:900;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.modal-root.open{
  opacity:1;
  pointer-events:auto;
}

.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.32);
  cursor:pointer;
}

.modal{
  position:relative;
  width:min(900px, 100%);
  max-height:calc(100vh - 40px);
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 20px 60px rgba(2,6,23,.18);
  overflow:hidden;
}
.modal-root.kind-battle .modal{
  width:min(1100px, 100%);
}

.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.modal-title{font-weight:900; font-size:15px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.modal-close{
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px;
  border:1px solid rgba(2,6,23,.10);
  background:rgba(2,6,23,.03);
  cursor:pointer;
  font:inherit;
  font-size:16px;
  color:var(--text);
  flex-shrink:0;
}
.modal-close:hover{background:rgba(2,6,23,.08)}

.modal-content{
  flex:1;
  overflow-y:auto;
  padding:16px;
}
.modal-loading{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:120px;
  color:var(--text-muted);
  font-size:14px;
}

/* Mobile modal */
@media (max-width:600px){
  .modal-root{ padding:0; }
  .modal{
    width:100%;
    max-height:100dvh;
    border-radius:0;
    padding-bottom:env(safe-area-inset-bottom, 0);
  }
  .modal-head{ padding:10px 12px; }
  .modal-content{ padding:12px; }
  .modal-title{ font-size:14px; }
}

/* ═══════════════════════ Party / Nursery (PM) ═══════════════════════ */

.pm{
  max-width:900px;
  margin:0 auto;
  padding:8px 0 40px;
}

/* Tabs */
.pm-tabs{
  display:flex;
  gap:0;
  border-bottom:2px solid var(--border);
  margin-bottom:12px;
}
.pm-tab{
  flex:1;
  padding:12px 16px;
  background:none;
  border:none;
  border-bottom:3px solid transparent;
  margin-bottom:-2px;
  font:inherit;
  font-size:14px;
  font-weight:800;
  color:var(--muted);
  cursor:pointer;
  transition:color .15s, border-color .15s;
  text-align:center;
}
.pm-tab:hover{color:var(--text)}
.pm-tab--active{
  color:var(--primary);
  border-bottom-color:var(--primary);
}
.pm-tab__count{
  font-size:12px;
  font-weight:600;
  opacity:.7;
  margin-left:4px;
}

/* Panels */
.pm-panel{display:none}
.pm-panel--active{display:block}

/* Party grid — 2 columns on desktop, 1 on mobile */
.pm-party-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

/* Box grid — 3 columns on desktop, 2 on mobile */
.pm-box-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

/* Card */
.pm-card{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  transition:box-shadow .15s, border-color .15s;
  position:relative;
}
.pm-card:hover{
  border-color:rgba(37,99,235,.25);
  box-shadow:0 2px 10px rgba(37,99,235,.06);
}
.pm-card--fainted{opacity:.55}
.pm-card--box{padding:8px 10px}

/* Slot label */
.pm-card__slot{
  position:absolute;
  top:6px; left:10px;
  font-size:9px;
  font-weight:800;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* Sprite */
.pm-card__sprite{
  flex-shrink:0;
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.pm-card__sprite img{
  max-width:60px;
  max-height:60px;
  image-rendering:pixelated;
}
.pm-card__sprite--sm{
  width:48px;
  height:48px;
}
.pm-card__sprite--sm img{
  max-width:44px;
  max-height:44px;
}
.pm-card__shiny{
  position:absolute;
  top:-2px; right:-2px;
  font-size:14px;
  color:#d97706;
  text-shadow:0 0 4px rgba(255,215,0,.5);
}

/* Info */
.pm-card__info{
  flex:1;
  min-width:0;
}
.pm-card__name{
  font-weight:800;
  font-size:13px;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pm-card__name a{text-decoration:none; color:inherit}
.pm-card__name a:hover{text-decoration:underline}
.pm-card__nick{
  font-weight:400;
  color:var(--muted);
  font-size:11px;
  margin-left:4px;
}
.pm-card__level{
  font-size:11px;
  font-weight:700;
  color:var(--muted);
}
.pm-card__types{
  display:flex;
  gap:3px;
  flex-wrap:wrap;
  margin-top:2px;
  align-items:center;
}
.pm-card__hp{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:4px;
}
.pm-card__hp .btl-hp__bar{
  flex:1;
  height:6px;
}
.pm-card__hp-text{
  font-size:10px;
  font-weight:700;
  color:var(--muted);
  white-space:nowrap;
}

/* Action buttons */
.pm-card__actions{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex-shrink:0;
}
.pm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px; height:30px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--card);
  font-size:14px;
  cursor:pointer;
  transition:background .12s, border-color .12s;
  text-decoration:none;
  color:var(--text);
  font-family:inherit;
}
.pm-btn:hover{background:rgba(2,6,23,.04); text-decoration:none}
.pm-btn[disabled]{opacity:.35; cursor:not-allowed}
.pm-btn--add{color:#16a34a; border-color:rgba(34,197,94,.3)}
.pm-btn--add:hover:not([disabled]){background:rgba(34,197,94,.08)}
.pm-btn--remove{color:#dc2626; border-color:rgba(220,38,38,.25)}
.pm-btn--remove:hover:not([disabled]){background:rgba(220,38,38,.06)}

/* Empty state */
.pm-empty{
  text-align:center;
  padding:40px 20px;
  color:var(--muted);
  font-size:14px;
}

/* Hint */
.pm-hint{
  text-align:center;
  margin-top:10px;
  font-size:12px;
}

/* Mobile */
@media (max-width:600px){
  .pm-party-grid{
    grid-template-columns:1fr;
    gap: 12px;
  }
  .pm-box-grid{
    grid-template-columns:1fr 1fr;
    gap: 8px;
  }
  .pm-card{
    padding:12px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
  }
  .pm-card__sprite{
    width:80px;
    height:80px;
    margin-bottom: 8px;
  }
  .pm-card__sprite img{
    max-width:70px;
    max-height:70px;
  }
  .pm-card__info{
    width: 100%;
  }
  .pm-card__name{
    font-size:14px;
    justify-content: center;
  }
  .pm-card__level{
    font-size:12px;
  }
  .pm-card__hp{
    margin-top: 6px;
  }
  .pm-card__hp .btl-hp__bar{
    height:6px;
  }
  .pm-card__hp-text{
    font-size:11px;
  }
  .pm-pokeball{
    width: 36px;
    height: 36px;
    position: absolute;
    top: 8px;
    right: 8px;
  }
  .pm-pokeball img{
    width: 28px;
    height: 28px;
  }
  .pm-pokeball-menu{
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    min-width: 0 !important;
    max-height: min(65vh, 360px) !important;
  }
}
@media (max-width:380px){
  .pm-box-grid{grid-template-columns:1fr}
  .pm-card__sprite{
    width: 70px;
    height: 70px;
  }
  .pm-card__sprite img{
    max-width: 60px;
    max-height: 60px;
  }
}

/* ═══════════════════════ NPC Modal — единый современный вид ═══════════════════════ */

/* Скрыть шапку оболочки модалки, когда контент уже имеет свою шапку (НПС, магазин, уведомления) */
.modal:has(.modal-content .npc-modal) .modal-head,
.modal:has(.modal-content .shop-panel) .modal-head,
.modal:has(.modal-content .auc-panel) .modal-head,
.modal:has(.modal-content .notif-panel) .modal-head{
  display:none;
}
/* Панель уведомлений в модалке — на всю область контента, без эффекта второго окна */
.modal:has(.modal-content .notif-panel) .modal-content{
  padding:0;
}
.modal:has(.modal-content .notif-panel) .modal-content .notif-panel{
  max-width:none;
  margin:0;
  border-radius:0;
}

/* NPC modal — единый вид как на референсе: белый фон, скругления, тень */
.npc-modal{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  max-height:90vh;
  overflow:hidden;
  background:#fff;
  border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.08);
}

.npc-header{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 20px;
  border-bottom:1px solid rgba(0,0,0,.06);
  flex-shrink:0;
  background:#fff;
}
.npc-header__avatar{
  width:56px;
  height:56px;
  border-radius:50%;
  overflow:hidden;
  background:var(--soft);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border:2px solid rgba(0,0,0,.08);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.npc-header__avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.npc-header__avatar svg,
.npc-header__avatar-fallback{
  width:28px;
  height:28px;
  flex-shrink:0;
}
.npc-header__avatar--healer .npc-header__avatar-fallback{
  width:40px;
  height:40px;
}
.npc-header__avatar-emoji{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  line-height:1;
}
.npc-header__role--quest{
  font-size:11px;
  color:var(--muted);
  font-weight:500;
  margin-top:2px;
}
.npc-header__info{flex:1; min-width:0}
.npc-header__name{
  font-size:18px;
  font-weight:800;
  line-height:1.25;
  color:#1f2937;
  letter-spacing:-0.02em;
}
.npc-header__title{
  font-size:12px;
  color:#64748b;
  font-weight:600;
  margin-top:2px;
}
.npc-header__actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
/* Кнопка чата — тёплый жёлто-оранжевый как на референсе */
.npc-header__bubble{
  width:40px;
  height:40px;
  border-radius:10px;
  border:none;
  background:linear-gradient(135deg, #fcd34d, #f59e0b);
  color:#fff;
  font-size:16px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .15s, box-shadow .15s;
  box-shadow:0 2px 8px rgba(245,158,11,.35);
}
.npc-header__bubble:hover{
  transform:scale(1.05);
  box-shadow:0 4px 12px rgba(245,158,11,.4);
  color:#fff;
}
.npc-close,
.npc-header__close{
  width:38px;
  height:38px;
  border-radius:50%;
  border:none;
  background:rgba(0,0,0,.06);
  font-size:18px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:#64748b;
  transition:background .15s, color .15s;
}
.npc-close:hover,
.npc-header__close:hover{
  background:rgba(0,0,0,.1);
  color:#1f2937;
}

/* Блок «Доступные задания» — заголовок с иконкой свитка */
.npc-quests-section-title,
.npc-modal-section-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:16px;
  font-weight:800;
  color:#1f2937;
  margin:20px 0 12px;
  padding-bottom:10px;
  border-bottom:2px solid rgba(0,0,0,.06);
}
.npc-quests-section-title::before,
.npc-modal-section-title::before,
.npc-quests-list__title::before,
.npc-modal-v2__quests-title::before{
  content:"";
  width:22px;
  height:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b45309' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3Cpath d='M10 9H8'/%3E%3C/svg%3E") center/contain no-repeat;
  flex-shrink:0;
}
.npc-quests-list__title,
.npc-modal-v2__quests-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:16px;
  font-weight:800;
  color:#1f2937;
  margin:20px 0 12px;
  padding-bottom:10px;
  border-bottom:2px solid rgba(0,0,0,.06);
}
/* Карточка задания в списке: иконка, название, теги, кнопка чата */
.npc-quest-card-unified,
.npc-modal-v2__quest-card,
.npc-quest-card-v2{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px 14px;
  align-items:center;
  padding:14px 16px;
  background:#fff;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  margin-bottom:10px;
  transition:box-shadow .2s, border-color .2s;
}
.npc-quest-card-unified:hover,
.npc-modal-v2__quest-card:hover,
.npc-quest-card-v2:hover{
  border-color:rgba(0,0,0,.12);
  box-shadow:0 4px 16px rgba(0,0,0,.08);
}
.npc-quest-card-unified__icon,
.npc-modal-v2__quest-card-icon{
  width:40px;
  height:40px;
  border-radius:10px;
  background:linear-gradient(135deg, #fef3c7, #fde68a);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  flex-shrink:0;
  grid-row:1 / -1;
}
.npc-quest-card-unified__body,
.npc-modal-v2__quest-card-title-wrap{
  flex:1;
  min-width:0;
}
.npc-quest-card-unified__title,
.npc-modal-v2__quest-card-title,
.npc-quest-card-v2__title{
  font-size:15px;
  font-weight:700;
  color:#1f2937;
  margin-bottom:6px;
  line-height:1.3;
  grid-column:1;
}
.npc-quest-card-v2 .npc-bubble-btn--small,
.npc-modal-v2__quest-card .npc-modal-v2__bubble-btn--small{
  grid-column:2;
  grid-row:1 / -1;
}
.npc-quest-card-unified__tags,
.npc-modal-v2__quest-card-tags,
.npc-quest-card-v2__tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  grid-column:1;
}
.npc-quest-card-unified__tag,
.npc-modal-v2__tag,
.npc-tag{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:3px 8px;
  border-radius:6px;
  background:rgba(0,0,0,.06);
  color:#64748b;
}
.npc-tag--side,
.npc-modal-v2__tag--side{ background:#e0e7ff; color:#4338ca; }
.npc-tag--one-time,
.npc-modal-v2__tag--one-time{ background:#f3e8ff; color:#7c3aed; }
.npc-quest-card-unified__bubble,
.npc-modal-v2__bubble-btn--small,
.npc-bubble-btn--small{
  width:36px;
  height:36px;
  border-radius:8px;
  border:none;
  background:linear-gradient(135deg, #fcd34d, #f59e0b);
  color:#fff;
  font-size:14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:transform .12s, box-shadow .12s;
}
.npc-quest-card-unified__bubble:hover,
.npc-modal-v2__bubble-btn--small:hover,
.npc-bubble-btn--small:hover{
  transform:scale(1.05);
  color:#fff;
}

.npc-tabs{
  display:flex;
  gap:4px;
  padding:8px 12px;
  flex-shrink:0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-bottom:1px solid var(--border);
  background:var(--card);
}
.npc-tab{
  flex:0 0 auto;
  padding:6px 12px;
  border-radius:8px;
  border:none;
  font:inherit;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  background:transparent;
  cursor:pointer;
  transition:background .12s, color .12s;
  text-align:center;
  white-space:nowrap;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.npc-tab:hover{
  color:var(--text);
  background:var(--soft);
}
.npc-tab--active{
  color:var(--text);
  background:var(--soft);
  border:1px solid var(--border);
}
.npc-tab--active:hover{
  color:var(--text);
  background:var(--soft);
}
.npc-modal[data-npc-role="healer"] .npc-tab--active{
  color:var(--ok,#16a34a);
  border-color:rgba(34,197,94,.3);
  background:rgba(34,197,94,.08);
}
.npc-tab__icon{font-size:14px}

.npc-pane{
  display:none;
  flex:1;
  overflow-y:auto;
  padding:12px 14px 16px;
  background:var(--soft);
  min-height:0;
  -webkit-overflow-scrolling:touch;
}
.npc-pane--active{display:flex; flex-direction:column}

/* Мобильная адаптация NPC modal */
@media (max-width: 600px){
  .npc-modal{
    max-height:92vh;
    border-radius:20px 20px 0 0;
    border-bottom:none;
  }
  .npc-header{
    padding:12px 16px;
    gap:12px;
  }
  .npc-header__avatar{
    width:48px;
    height:48px;
  }
  .npc-header__avatar--healer .npc-header__avatar-fallback{
    width:36px;
    height:36px;
  }
  .npc-header__name{ font-size:16px; }
  .npc-header__title{ font-size:11px; }
  .npc-header__bubble{
    width:36px;
    height:36px;
    font-size:14px;
  }
  .npc-header__close{
    width:34px;
    height:34px;
    font-size:16px;
  }
  .npc-tabs{
    padding:8px 12px;
    gap:4px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .npc-tabs::-webkit-scrollbar{ display:none; }
  .npc-tab{
    padding:10px 14px;
    font-size:13px;
    flex-shrink:0;
  }
  .npc-pane{ padding:12px 16px 20px; }
  .npc-heal__text{ padding:12px 14px; font-size:13px; }
  .npc-poke-row{ padding:10px 12px; gap:10px; }
  .npc-poke-row__sprite{ width:40px; height:40px; }
  .npc-action-btn{ min-width:100%; padding:12px 16px; font-size:14px; }
  .npc-box{ padding:12px 0; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:10px; }
  .npc-box-card{ padding:10px 12px; }
  .npc-box-card__sprite{ width:44px; height:44px; }
  .npc-filters__row{
    flex-direction:column;
    align-items:stretch;
  }
  .npc-input,
  .npc-input--sm,
  .npc-select{
    min-width:0;
    width:100%;
    max-width:none;
  }
  .npc-filters__row .npc-input--sm{
    max-width:none;
  }
  .npc-quests-section-title,
  .npc-modal-section-title{
    font-size:15px;
    margin:16px 0 10px;
  }
  .npc-quest-card-unified,
  .npc-modal-v2__quest-card,
  .npc-quest-card-v2{
    padding:12px 14px;
    gap:8px 12px;
  }
  .npc-quest-card-unified__title,
  .npc-modal-v2__quest-card-title,
  .npc-quest-card-v2__title{
    font-size:14px;
  }
  .npc-party-bar__slots{
    flex-wrap:wrap;
    justify-content:flex-start;
  }
  .npc-party-slot{
    width:48px;
    height:48px;
  }
}

/* ─── Heal tab ─── */
.npc-heal{display:flex; flex-direction:column; gap:14px}
.npc-heal__text{
  font-size:14px;
  color:var(--text);
  padding:14px 16px;
  background:var(--card);
  border-radius:12px;
  border:1px solid var(--border);
  line-height:1.5;
}
.npc-heal__party{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.npc-poke-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  transition:border-color .12s;
}
.npc-poke-row:hover{border-color:rgba(37,99,235,.15)}
.npc-poke-row--fainted{opacity:.5}
.npc-poke-row__sprite{
  width:40px; height:40px;
  image-rendering:pixelated;
  flex-shrink:0;
}
.npc-poke-row__info{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.npc-poke-row__name{font-weight:700; font-size:13px}
.npc-poke-row__lvl{font-size:11px; color:var(--muted); font-weight:600}
.npc-poke-row__hp{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:100px;
}
.npc-poke-row__hp .btl-hp__bar{flex:1; height:6px; border-radius:3px}
.npc-poke-row__hp-text{
  font-size:10px;
  font-weight:700;
  color:var(--muted);
  white-space:nowrap;
  min-width:40px;
  text-align:right;
}

/* Action buttons */
.npc-heal__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.npc-action-btn{
  flex:1;
  min-width:140px;
  padding:12px 18px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  font:inherit;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s, border-color .15s, transform .08s;
  text-align:center;
  color:var(--text);
}
.npc-action-btn:hover{background:rgba(2,6,23,.03); transform:translateY(-1px)}
.npc-action-btn:active{transform:translateY(0)}
.npc-action-btn--primary{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  border-color:rgba(34,197,94,.4);
  color:#fff;
}
.npc-action-btn--primary:hover{
  background:linear-gradient(135deg,#16a34a,#15803d);
  color:#fff;
}

/* ─── Nursery (box) tab ─── */

/* Filters — минималистичные поля */
.npc-filters{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:14px;
  padding:14px;
  background:#fff;
  border-radius:12px;
  border:1px solid var(--border);
}
.npc-filters__toggle{
  display:none;
}
.npc-filters__rows{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.npc-filters__row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.npc-input{
  flex:1;
  min-width:120px;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--soft);
  font:inherit;
  font-size:13px;
  color:var(--text);
  outline:none;
  transition:border-color .15s;
}
.npc-input::placeholder{color:var(--muted)}
.npc-input:focus{
  border-color:var(--primary);
  background:var(--card);
}
.npc-input--sm{max-width:90px; min-width:70px}
.npc-select{
  padding:10px 32px 10px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--soft);
  font:inherit;
  font-size:13px;
  color:var(--text);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  cursor:pointer;
  outline:none;
  min-width:120px;
}
.npc-select:focus{
  border-color:var(--primary);
  background-color:var(--card);
}
.npc-check{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color:var(--text);
  cursor:pointer;
  white-space:nowrap;
}
.npc-check input{
  width:16px; height:16px;
  accent-color:var(--primary);
  cursor:pointer;
}
.npc-filters__count{
  font-size:13px;
  color:var(--muted);
  font-weight:600;
}
.npc-filters__advanced{
  font-size:13px;
  color:var(--primary);
  text-decoration:underline;
  cursor:pointer;
  background:none;
  border:none;
  padding:0;
  font:inherit;
}
.npc-filters__advanced:hover{text-decoration:none; opacity:.9}

/* Box grid — 3 cards per row on desktop */
.npc-box{
  flex:1;
  overflow-y:auto;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:10px;
  align-content:start;
}
.npc-box-card{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  transition:border-color .15s, box-shadow .15s;
}
.npc-box-card:not(.npc-box-card--breeding){
  cursor:pointer;
}
.npc-box-card:hover{
  border-color:rgba(37,99,235,.2);
  box-shadow:0 2px 8px rgba(37,99,235,.06);
}
.npc-box-card__sprite{
  width:48px; height:48px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.npc-box-card__sprite img{
  max-width:44px; max-height:44px;
  image-rendering:pixelated;
}
.npc-box-card__shiny{
  position:absolute;
  top:-4px; right:-4px;
  font-size:12px;
  color:#d97706;
}
.npc-box-card__body{
  flex:1; min-width:0;
}
.npc-box-card__name{
  font-weight:700;
  font-size:13px;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.npc-box-card__meta{
  font-size:11px;
  font-weight:600;
  color:var(--muted);
}
.npc-box-card__types{
  display:flex;
  gap:3px;
  flex-wrap:wrap;
  margin-top:3px;
}
.npc-box-card__types .type{font-size:9px; padding:0 4px}
.npc-box-card__genes,
.pm-card__genes{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-top:4px;
  font-size:11px;
  color:var(--muted, #64748b);
}
.npc-box-card__genes-label,
.pm-card__genes-label{
  font-weight:600;
  color:#4338ca;
}
.npc-genes-line{
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  color:#374151;
}
.npc-box-card__badges{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  margin-top:4px;
}
.npc-badge{
  display:inline-block;
  font-size:9px;
  font-weight:700;
  padding:2px 5px;
  border-radius:6px;
  line-height:1.2;
}
.npc-badge--genes{
  background:linear-gradient(135deg, #e0e7ff, #c7d2fe);
  color:#3730a3;
}
.npc-badge--tera.type{font-size:8px; padding:1px 4px}
.npc-box-card__hp{margin-top:4px}
.npc-box-card__hp .btl-hp__bar{height:5px; border-radius:3px}
.npc-box-card__actions{
  flex-shrink:0;
}
.npc-box-card__actions .pm-btn{
  min-width:36px;
  min-height:36px;
  border-radius:10px;
}

/* Party bar (bottom of nursery) */
.npc-party-bar{
  flex-shrink:0;
  margin-top:12px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(2,6,23,.015);
}
.npc-party-bar__title{
  font-size:11px;
  font-weight:800;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:8px;
}
.npc-party-bar__slots{
  display:flex;
  gap:8px;
  justify-content:center;
}
.npc-party-slot{
  width:52px; height:52px;
  border-radius:10px;
  border:2px solid var(--border);
  background:var(--card);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.npc-party-slot img{
  max-width:44px; max-height:44px;
  image-rendering:pixelated;
}
.npc-party-slot--empty{
  border-style:dashed;
  background:rgba(2,6,23,.02);
}
.npc-party-slot__num{
  font-size:14px;
  font-weight:700;
  color:rgba(2,6,23,.12);
}
.npc-party-slot__remove{
  position:absolute;
  top:0; right:0;
  width:18px; height:18px;
  border-radius:0 0 0 6px;
  border:none;
  background:rgba(220,38,38,.8);
  color:#fff;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .15s;
  padding:0;
}
.npc-party-slot:hover .npc-party-slot__remove{opacity:1}
.npc-party-slot__remove[disabled]{display:none}

/* Empty */
.npc-empty{
  text-align:center;
  padding:20px 16px;
  color:var(--muted);
  font-size:14px;
}

/* NPC Modal — адаптив */
@media (max-width: 600px){
  .npc-modal{max-height:95vh; border-radius:14px}
  .npc-header{padding:12px 14px; gap:10px}
  .npc-header__avatar{width:46px; height:46px}
  .npc-header__avatar img{width:40px; height:40px}
  .npc-header__name{font-size:16px}
  .npc-header__close{width:36px; height:36px; font-size:16px}
  .npc-tabs{padding:10px 14px; gap:6px}
  .npc-tab{font-size:12px; padding:8px 12px}
  .npc-pane{padding:12px 14px 16px}
  .npc-box{grid-template-columns:repeat(2, 1fr); gap:10px; padding-bottom:20px}
  .npc-box-card{padding:12px 10px; gap:10px}
  .npc-box-card__sprite{width:52px; height:52px}
  .npc-box-card__sprite img{max-width:48px; max-height:48px}
  .npc-box-card__name{font-size:13px}
  .npc-box-card__types .type{font-size:8px; padding:0 3px}
  .npc-box-card__badges .npc-badge{font-size:8px; padding:2px 4px}
  .npc-box-card__actions .pm-btn{min-width:44px; min-height:44px}
  .npc-party-slot{width:44px; height:44px}
  .npc-party-slot img{max-width:36px; max-height:36px}
  .npc-filters{padding:12px}
  .npc-filters__row{flex-direction:column; align-items:stretch}
  .npc-filters__count{margin-top:6px; font-size:13px}
  .npc-input--sm{max-width:none}
  .npc-action-btn{min-width:0; font-size:13px; padding:10px 14px}
  .npc-heal__text{padding:12px 14px; font-size:13px}
  .npc-poke-row{padding:8px 10px}
}
@media (max-width: 400px){
  .npc-header__name{font-size:15px}
  .npc-tab{padding:6px 10px; font-size:11px}
}
@media (max-width:600px){
  .npc-filters__toggle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    border:none;
    background:transparent;
    padding:4px 0 2px;
    font-size:13px;
    font-weight:600;
    color:var(--muted);
    cursor:pointer;
  }
  .npc-filters__toggle-icon{
    font-size:11px;
  }
  .npc-filters--collapsed .npc-filters__rows{
    display:none;
  }
}
/* Extra compact nursery cards on small phones */
@media (max-width:520px){
  .npc-box-card__types{margin-top:2px}
  .npc-box-card__hp{margin-top:2px}
}
@media (max-width:420px){
  .npc-box{grid-template-columns:1fr; gap:12px}
  .npc-box-card{padding:14px 12px}
  .npc-box-card__sprite{width:56px; height:56px}
  .npc-box-card__sprite img{max-width:52px; max-height:52px}
  .npc-box-card__name{font-size:14px}
  .npc-box-card__body{min-width:0}
}
@media (max-width:380px){
  .npc-party-bar__slots{gap:4px}
  .npc-party-slot{width:38px; height:38px}
}

/* ═══════════════════════ Creature Groups — единый тултип (карточка и команда) ═══════════════════════ */
.creature-groups-popover{
  position:fixed;
  z-index:10060;
  width:480px;
  max-width:calc(100vw - 16px);
  max-height:min(90vh, 560px);
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
@media (max-width: 768px){
  .creature-groups-popover{
    left:8px !important;
    right:8px !important;
    width:auto !important;
    max-width:none;
  }
}

.creature-groups-modal{
  width:100%;
  height:100%;
  max-height:100%;
  margin:0;
  background:var(--card);
  border-radius:inherit;
  box-shadow:none;
  border:none;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.creature-groups-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  background:var(--soft);
}
.creature-groups-modal__title{
  margin:0;
  font-size:17px;
  font-weight:700;
  color:var(--text);
}
.creature-groups-modal__close{
  width:36px;
  height:36px;
  border:none;
  background:transparent;
  border-radius:10px;
  cursor:pointer;
  font-size:18px;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:color .15s, background .15s;
}
.creature-groups-modal__close:hover{
  color:var(--text);
  background:rgba(2,6,23,.06);
}
.creature-groups-modal__body{
  padding:16px 18px;
  overflow-y:auto;
  flex:1;
  min-height:0;
}
.creature-groups-modal__foot{
  padding:12px 18px;
  border-top:1px solid var(--border);
  display:flex;
  justify-content:flex-end;
}
.creature-groups-modal__close-btn{
  min-width:100px;
}

.creature-groups-create{
  margin-bottom:20px;
}
.creature-groups-create__label{
  margin:0 0 10px;
  font-size:13px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.creature-groups-create__row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.creature-groups-create__name{
  flex:1;
  min-width:140px;
}
.creature-groups-create__color-wrap{
  display:flex;
  align-items:center;
  gap:6px;
}
.creature-groups-create__color-picker{
  width:36px;
  height:36px;
  padding:2px;
  border:1px solid var(--border);
  border-radius:10px;
  cursor:pointer;
  background:var(--soft);
}
.creature-groups-create__color-hex{
  width:88px;
  font-family:ui-monospace, monospace;
  font-size:13px;
}
.creature-groups-create__btn{
  flex-shrink:0;
}

.creature-groups-list__head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  margin-bottom:12px;
}
.creature-groups-list__label{
  margin:0;
  font-size:13px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.creature-groups-list__count{
  font-size:12px;
  color:var(--muted);
  margin-left:auto;
}
.creature-groups-list__controls{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.creature-groups-list__search{
  flex:1;
  min-width:120px;
  max-width:200px;
}
.creature-groups-list__filter{
  white-space:nowrap;
}
.creature-groups-list__items{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.creature-groups-list__empty{
  margin:0;
  padding:20px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
}

.creature-groups-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--soft);
  transition:border-color .15s, box-shadow .15s;
}
.creature-groups-item:hover{
  border-color:rgba(37,99,235,.2);
  box-shadow:0 2px 8px rgba(37,99,235,.06);
}
.creature-groups-item__dot{
  width:14px;
  height:14px;
  border-radius:50%;
  flex-shrink:0;
  border:1px solid rgba(0,0,0,.1);
}
.creature-groups-item__info{
  flex:1;
  min-width:0;
}
.creature-groups-item__name{
  font-weight:700;
  font-size:14px;
  display:block;
}
.creature-groups-item__meta{
  font-size:12px;
  color:var(--muted);
}
.creature-groups-item__actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}
.creature-groups-item__btn{
  padding:6px 12px;
  border-radius:10px;
  font-size:12px;
  font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  transition:opacity .15s, transform .05s;
}
.creature-groups-item__btn:disabled{
  opacity:.7;
  cursor:wait;
}
.creature-groups-item__btn--add{
  background:var(--primary);
  color:#fff;
  border-color:rgba(37,99,235,.5);
}
.creature-groups-item__btn--add:hover:not(:disabled){
  filter:brightness(1.05);
}
.creature-groups-item__btn--in{
  background:var(--ok);
  color:#fff;
  border-color:rgba(22,163,74,.5);
}
.creature-groups-item__icon{
  width:34px;
  height:34px;
  border:none;
  border-radius:10px;
  background:rgba(2,6,23,.06);
  cursor:pointer;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  transition:color .15s, background .15s;
}
.creature-groups-item__icon:hover{
  background:rgba(2,6,23,.1);
  color:var(--text);
}
.creature-groups-item__icon--del{
  color:var(--danger);
}
.creature-groups-item__icon--del:hover{
  background:var(--danger-weak);
}

.npc-filters__groups-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.npc-filters__groups-wrap .npc-select--groups{
  min-width:140px;
}

@media (max-width:600px){
  .creature-groups-modal__head{padding:12px 14px}
  .creature-groups-modal__body{padding:12px 14px}
  .creature-groups-create__row{flex-direction:column; align-items:stretch}
  .creature-groups-create__name{min-width:0}
  .creature-groups-create__color-wrap{width:100%}
  .creature-groups-create__color-hex{flex:1}
  .creature-groups-item{flex-wrap:wrap; padding:10px 12px}
  .creature-groups-item__actions{width:100%; justify-content:flex-end; margin-top:4px}
}

/* ═══════════════════════ NPC Enhancements ═══════════════════════ */

/* Avatar role variants */
.npc-header__avatar--healer{
  background:linear-gradient(135deg,#fce7f3,#fbcfe8);
  border-color:#f472b6;
}
.npc-header__avatar--shop{
  background:linear-gradient(135deg,#dbeafe,#bfdbfe);
  border-color:#60a5fa;
}
.npc-header__role{
  font-size:11px;
  font-weight:700;
  margin-top:2px;
}

/* Coins badge (in header) */
.npc-coins{
  display:flex;
  align-items:center;
  gap:4px;
  padding:6px 12px;
  border-radius:20px;
  background:linear-gradient(135deg,#fef3c7,#fde68a);
  border:1px solid rgba(251,191,36,.3);
  font-size:14px;
  font-weight:800;
  color:#92400e;
  flex-shrink:0;
  white-space:nowrap;
}
.npc-coins__icon{font-size:16px}

/* NPC Dialog (generic modal) */
.npc-dialog{
  display:flex;
  flex-direction:column;
  gap:16px;
  width:100%;
}
.npc-dialog__text{
  font-size:14px;
  line-height:1.6;
  padding:16px 18px;
  background:#fff;
  border-radius:12px;
  border:1px solid var(--border);
  color:var(--text);
}
.npc-dialog__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.npc-action-btn--danger{
  background:linear-gradient(135deg,#fecaca,#fca5a5);
  border-color:rgba(239,68,68,.3);
  color:#991b1b;
}
.npc-action-btn--danger:hover{
  background:linear-gradient(135deg,#fca5a5,#f87171);
}

/* ═══════════════════════ NPC Shop ═══════════════════════ */

.shop-search{margin-bottom:12px}
.shop-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
  overflow-y:auto;
}
.shop-category__head{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 0 6px;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted);
  border-bottom:1px solid var(--border);
  margin-bottom:6px;
}
.shop-category__icon{font-size:14px}
.shop-category__count{
  margin-left:auto;
  background:var(--border);
  padding:1px 6px;
  border-radius:8px;
  font-size:10px;
  font-weight:700;
}
.shop-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--card);
  transition:border-color .15s, box-shadow .15s;
}
.shop-item:hover{
  border-color:rgba(37,99,235,.15);
  box-shadow:0 2px 8px rgba(37,99,235,.05);
}
.shop-item__info{flex:1; min-width:0}
.shop-item__name{
  font-size:13px;
  font-weight:700;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.shop-item__desc{
  font-size:11px;
  color:var(--muted);
  line-height:1.3;
  margin-top:2px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.shop-item__price{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  flex-shrink:0;
  min-width:60px;
}
.shop-item__coins{
  font-size:13px;
  font-weight:800;
  color:#92400e;
  white-space:nowrap;
}
.shop-item__stock{
  font-size:10px;
  color:var(--muted);
  font-weight:600;
}
.shop-item__buy{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}
.shop-qty{
  display:flex;
  align-items:center;
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
}
.shop-qty__btn{
  width:28px; height:28px;
  border:none;
  background:var(--card);
  font:inherit;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .1s;
}
.shop-qty__btn:hover{background:rgba(2,6,23,.04)}
.shop-qty__val{
  width:36px;
  text-align:center;
  border:none;
  border-left:1px solid var(--border);
  border-right:1px solid var(--border);
  font:inherit;
  font-size:12px;
  font-weight:700;
  color:var(--text);
  padding:0;
  outline:none;
  -moz-appearance:textfield;
}
.shop-qty__val::-webkit-inner-spin-button,
.shop-qty__val::-webkit-outer-spin-button{-webkit-appearance:none; margin:0}
.shop-buy-btn{
  min-width:auto !important;
  padding:6px 12px !important;
  font-size:12px !important;
  border-radius:8px !important;
}

/* Sell tab */
.shop-sell-hint{
  font-size:13px;
  color:var(--muted);
  padding:10px 14px;
  background:rgba(251,191,36,.08);
  border-radius:10px;
  border:1px solid rgba(251,191,36,.15);
  margin-bottom:12px;
}
.shop-sell-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
  overflow-y:auto;
}
.shop-sell-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--card);
}
.shop-sell-item__info{flex:1; min-width:0}
.shop-sell-item__name{font-weight:700; font-size:12px}
.shop-sell-item__count{font-size:11px; color:var(--muted)}
.shop-sell-item__price{
  font-size:12px; font-weight:700; color:#92400e; white-space:nowrap;
}
.shop-sell-item__actions{display:flex; gap:4px; flex-shrink:0}
.sell-btn{
  padding:4px 10px;
  border-radius:8px;
  border:1px solid rgba(251,191,36,.3);
  background:linear-gradient(135deg,#fef3c7,#fde68a);
  font:inherit;
  font-size:11px;
  font-weight:700;
  color:#92400e;
  cursor:pointer;
  transition:transform .1s, background .15s;
}
.sell-btn:hover{transform:translateY(-1px)}
.sell-btn:active{transform:translateY(0)}

/* ═══════════════════════ Panel Shop ═══════════════════════ */

.shop-panel{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  background:var(--card);
  border-radius:14px;
  border:1px solid var(--border);
  overflow:hidden;
}
.shop-panel__header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
  background:var(--bg);
}
.shop-panel__title{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  font-size:18px;
  font-weight:800;
  color:var(--text);
}
.shop-panel__title-ic{font-size:20px}
.shop-panel__coins{
  display:flex;
  align-items:center;
  gap:4px;
  margin-left:auto;
  padding:6px 12px;
  border-radius:20px;
  background:linear-gradient(135deg,#fef3c7,#fde68a);
  border:1px solid rgba(251,191,36,.3);
  font-size:14px;
  font-weight:800;
  color:#92400e;
}
.shop-panel__coins-ic{font-size:16px}
/* Кнопка закрытия панелей, где шапка модалки скрыта (Магазин, Аукцион, Уведомления) — тот же стиль, что .modal-close */
.panel-close{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;
  border:1px solid rgba(2,6,23,.10);
  border-radius:10px;
  background:rgba(2,6,23,.03);
  color:var(--text);
  font:inherit;font-size:16px;line-height:1;cursor:pointer;
  flex-shrink:0;transition:background .15s,color .15s;
}
.panel-close:hover{background:rgba(2,6,23,.08)}

/* Заголовки панелей с кнопкой закрытия (Настройки, Активности и т.д.) */
.pane-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.act-page__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.act-page__title{margin:0;font-size:20px;font-weight:800;color:var(--text)}
.helper-page__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.helper-page__title{margin:0;font-size:20px;font-weight:800;color:var(--text)}

.shop-panel__search{
  padding:10px 16px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.shop-panel__search-input{
  width:100%;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:10px;
  font:inherit;
  font-size:14px;
  color:var(--text);
  background:var(--card);
}
.shop-panel__search-input::placeholder{color:var(--muted)}
.shop-panel__search-input:focus{
  outline:none;
  border-color:var(--primary);
}

.shop-panel__tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:10px 16px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.shop-panel__tab{
  padding:8px 14px;
  border:none;
  border-radius:10px;
  background:var(--card);
  color:var(--muted);
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s, color .15s;
}
.shop-panel__tab:hover{color:var(--text); background:rgba(2,6,23,.04)}
.shop-panel__tab--active{
  background:var(--primary);
  color:#fff;
}
.shop-panel__tab--active:hover{background:var(--primary); color:#fff; opacity:.95}

.shop-panel__list{
  flex:1;
  overflow-y:auto;
  padding:12px 16px;
  min-height:0;
}
.shop-panel__pane{
  display:none;
}
.shop-panel__pane--active{
  display:block;
}
.shop-panel__empty{
  padding:24px 16px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
}
.shop-panel__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:14px;
}

.shop-panel__card{
  display:flex;
  gap:12px;
  padding:14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--bg);
  transition:border-color .15s, box-shadow .15s;
}
.shop-panel__card:hover{
  border-color:rgba(37,99,235,.2);
  box-shadow:0 2px 10px rgba(37,99,235,.06);
}
.shop-panel__card-icon{
  width:52px;
  height:52px;
  border-radius:12px;
  background:var(--card);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  overflow:hidden;
}
.shop-panel__card-icon img{
  width:48px;
  height:48px;
  object-fit:contain;
}
.shop-panel__card-icon-fb{font-size:24px}
.shop-panel__card-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.shop-panel__card-name{
  font-size:14px;
  font-weight:800;
  color:var(--text);
  line-height:1.3;
}
.shop-panel__card-row{
  font-size:12px;
  color:var(--muted);
}
.shop-panel__card-label{font-weight:600}
.shop-panel__card-price,
.shop-panel__card-sell{font-weight:700; color:var(--text)}
.shop-panel__card-qty{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
}
.shop-panel__card-qty .shop-qty{margin-left:0}
.shop-panel__card-actions{
  display:flex;
  gap:8px;
  margin-top:8px;
  flex-wrap:wrap;
}
.shop-panel__btn{
  padding:8px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s, transform .1s;
}
.shop-panel__btn:hover{background:rgba(2,6,23,.05); transform:translateY(-1px)}
.shop-panel__btn:active{transform:translateY(0)}
.shop-panel__btn--buy{
  background:linear-gradient(135deg,#dbeafe,#bfdbfe);
  border-color:rgba(59,130,246,.3);
  color:#1e40af;
}
.shop-panel__btn--buy:hover{background:linear-gradient(135deg,#bfdbfe,#93c5fd)}
.shop-panel__btn--sell{
  background:linear-gradient(135deg,#fef3c7,#fde68a);
  border-color:rgba(251,191,36,.3);
  color:#92400e;
}
.shop-panel__btn--sell:hover{background:linear-gradient(135deg,#fde68a,#fcd34d)}

@media (max-width: 560px){
  .shop-panel__header{padding:12px 14px}
  .shop-panel__title{font-size:16px}
  .shop-panel__tabs{padding:8px 14px; gap:6px}
  .shop-panel__tab{font-size:12px; padding:6px 12px}
  .shop-panel__list{padding:10px 14px}
  .shop-panel__grid{
    grid-template-columns:1fr;
    gap:12px;
  }
  .shop-panel__card{padding:12px}
  .shop-panel__card-icon{width:48px; height:48px}
  .shop-panel__card-icon img{width:44px; height:44px}
  .shop-panel__card-actions .shop-panel__btn{flex:1; min-width:0}
}

/* ═══════════════════════ Inventory Page ═══════════════════════ */

/* Когда инвентарь в модалке — скролл только у сетки, панель справа липкая */
.modal-content:has(.inv-page){
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}
.modal-content:has(.inv-page) .inv-page{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.modal-content:has(.inv-page) .inv-header,
.modal-content:has(.inv-page) .inv-tabs,
.modal-content:has(.inv-page) .inv-search{
  flex-shrink:0;
}
.modal-content:has(.inv-page) .inv-main{
  flex:1;
  min-height:0;
  display:flex;
  gap:12px;
  align-items:flex-start;
  overflow:hidden;
}
.modal-content:has(.inv-page) .inv-grid{
  flex:2;
  min-height:0;
  /* явная высота, чтобы overflow-y:auto дал скролл */
  height:min(400px, calc(100vh - 220px));
  max-height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.inv-page{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.inv-page .inv-main{
  flex:1;
  min-height:0;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.inv-page .inv-grid{
  flex:2;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.inv-page .inv-detail{
  position:sticky;
  top:12px;
  align-self:flex-start;
}
.inv-eggs{
  padding:12px 0;
  border-bottom:1px solid var(--border);
}
.inv-eggs__title{
  font-size:14px;
  font-weight:700;
  margin:0 0 10px 0;
  color:var(--text);
}
.inv-eggs__list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.inv-egg-card{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:10px;
  background:var(--card);
  border:1px solid var(--border);
  font-size:13px;
}
.inv-egg-card--ready{ border-color:var(--primary); background:rgba(37,99,235,.06); }
.inv-egg-card__icon{ font-size:18px; }
.inv-egg-card__name{ font-weight:600; }
.inv-egg-card__countdown{ color:var(--muted); font-size:12px; }
.inv-egg-card__status{ color:var(--primary); font-weight:600; }
.inv-egg-card__collect{ margin-left:4px; }
.inv-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.inv-header__left{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.inv-header__close{margin-left:auto; flex-shrink:0}
.inv-header__right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.inv-header__title{
  font-size:20px;
  font-weight:900;
  margin:0;
  line-height:1.2;
}
.inv-header__count{
  font-size:12px;
  color:var(--muted);
  font-weight:600;
}
/* Единый стиль пилюль: монеты, кристаллы, ссылки */
.inv-header__pills{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.inv-header-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(15,23,42,.7);
  color:#e5e7eb;
  font-size:13px;
  font-weight:700;
  box-shadow:0 4px 12px rgba(15,23,42,.25);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:background .15s, transform .08s, box-shadow .15s, border-color .15s;
}
.inv-header-pill__icon{font-size:14px; line-height:1}
.inv-header-pill__icon .icon--coins{width:18px;height:18px;vertical-align:middle;object-fit:contain}
.inv-header-pill--coins{
  background:linear-gradient(135deg,#fef3c7,#fde68a);
  border-color:rgba(251,191,36,.35);
  color:#92400e;
}
.inv-header-pill--gems{
  background:linear-gradient(135deg,#e0e7ff,#c7d2fe);
  border-color:rgba(99,102,241,.35);
  color:#3730a3;
}
.inv-header-pill--link{
  text-decoration:none;
  font-size:12px;
}
.inv-header-pill--link:hover,
.inv-header-pill--link:focus-visible{
  background:rgba(37,99,235,.9);
  border-color:rgba(37,99,235,.4);
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(37,99,235,.35);
  color:#f9fafb;
}
.inv-header-pill--link:active{
  transform:translateY(0);
}

@media (max-width: 560px){
  .inv-header{
    align-items:flex-start;
  }
  .inv-header__pills{
    width:100%;
    gap:6px;
    row-gap:6px;
  }
  .inv-header-pill{
    font-size:12px;
    padding:5px 10px;
    box-shadow:0 2px 6px rgba(15,23,42,.18);
  }
  .inv-header-pill--link{
    font-size:11px;
  }
}
/* Иконка монет (coins.png) — используется везде, где отображаются монеты */
.icon--coins{display:inline-block;width:20px;height:20px;vertical-align:middle;object-fit:contain}
.inv-empty{
  text-align:center;
  padding:40px 20px;
}
.inv-empty__icon{font-size:48px; margin-bottom:10px}
.inv-empty__text{font-size:16px; font-weight:700; margin-bottom:4px}
.inv-empty__hint{font-size:13px; color:var(--muted)}
.inv-search{margin-bottom:4px}
.inv-search__input{
  width:100%;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  font:inherit;
  font-size:14px;
  color:var(--text);
  outline:none;
  transition:border-color .15s;
  box-sizing:border-box;
}
.inv-search__input:focus{border-color:var(--primary)}

.inv-sort{
  margin:4px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.inv-sort__btn{
  flex:1 1 0;
  min-width:0;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--soft);
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  cursor:pointer;
  text-align:center;
  transition:background .15s,border-color .15s,color .15s,transform .08s;
}
.inv-sort__btn--active{
  background:var(--text);
  border-color:var(--text);
  color:#fff;
  box-shadow:0 4px 12px rgba(15,23,42,.35);
}
.inv-sort__btn:disabled{
  opacity:.5;
  cursor:not-allowed;
}
@media (max-width: 560px){
  .inv-sort{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:2px;
  }
  .inv-sort__btn{
    flex:0 0 auto;
    white-space:nowrap;
  }
}

/* Main layout: grid + detail panel */
.inv-main{
  display:flex;
  gap:12px;
  align-items:stretch;
}
.inv-grid{
  flex:2;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(72px,1fr));
  gap:8px;
  padding:8px;
  border-radius:12px;
  background:var(--card);
  border:1px solid var(--border);
}
.inv-card{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.6);
  background:linear-gradient(135deg,var(--soft),var(--card));
  cursor:pointer;
  transition:border-color .15s, box-shadow .15s, transform .08s, background .15s;
}
.inv-card:hover{
  border-color:#60a5fa;
  box-shadow:0 2px 6px rgba(37,99,235,.18);
  transform:translateY(-1px);
}
.inv-card--active{
  border-color:#2563eb;
  box-shadow:0 0 0 2px rgba(37,99,235,.35);
}
.inv-card__icon{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--inv-icon-bg,#f1f5f9);
  border-radius:10px;
  overflow:hidden;
}
.inv-card__icon .item-icon,
.inv-card__icon img.item-icon{
  width:48px;
  height:48px;
  object-fit:contain;
}
.inv-card__count{
  position:absolute;
  right:4px;
  bottom:4px;
  padding:2px 6px;
  border-radius:10px;
  background:rgba(15,23,42,.85);
  color:#f9fafb;
  font-size:10px;
  font-weight:700;
}
.inv-card--egg .inv-card__count.inv-card__egg-time{font-variant-numeric:tabular-nums}
.inv-card--egg[data-inv-egg-ready="1"] .inv-card__egg-time{background:rgba(22,163,74,.9);color:#fff}

.inv-detail{
  flex:1;
  min-width:220px;
  max-width:280px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.inv-detail__back{
  display:none;
  margin:-4px 0 4px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid transparent;
  background:transparent;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  align-self:flex-start;
  cursor:pointer;
}
.inv-detail__back:hover{
  border-color:var(--border);
  background:var(--soft);
  color:var(--text);
}
.inv-detail__empty{
  text-align:center;
  padding:24px 8px;
  color:var(--muted);
}
.inv-detail__empty-icon{
  font-size:36px;
  margin-bottom:6px;
}
.inv-detail__empty-title{
  font-size:14px;
  font-weight:700;
  margin-bottom:4px;
}
.inv-detail__empty-text{
  font-size:12px;
}
.inv-detail__icon{
  width:72px;
  height:72px;
  border-radius:16px;
  background:var(--inv-icon-bg,#f8fafc);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 8px;
  overflow:hidden;
}
.inv-detail__icon .item-icon,
.inv-detail__icon img.item-icon{
  width:56px;
  height:56px;
  object-fit:contain;
}
.inv-detail__name{
  font-size:16px;
  font-weight:800;
  text-align:center;
}
.inv-detail__count{
  font-size:12px;
  text-align:center;
  color:var(--muted);
}
.inv-detail__desc{
  font-size:13px;
  color:var(--text);
  line-height:1.4;
  margin-top:4px;
}
.inv-detail__actions{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.inv-detail__btn{
  width:100%;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--soft);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s,border-color .15s,transform .08s;
}
.inv-detail__btn:hover:not(:disabled){
  background:#e5f0ff;
  border-color:#60a5fa;
  transform:translateY(-1px);
}
.inv-detail__btn:disabled{
  opacity:.5;
  cursor:not-allowed;
}
.inv-detail__btn--primary{
  background:linear-gradient(135deg,#3b82f6,#6366f1);
  color:#fff;
  border-color:transparent;
}
.inv-detail__btn--primary:hover:not(:disabled){
  background:linear-gradient(135deg,#2563eb,#4f46e5);
}
.inv-detail__btn--danger{
  background:linear-gradient(135deg,#ef4444,#f97316);
  color:#fff;
  border-color:transparent;
}
.inv-detail__btn--danger:hover:not(:disabled){
  background:linear-gradient(135deg,#dc2626,#ea580c);
}

/* Мобильная адаптация инвентаря: без перекрытий, удобные карточки */
@media (max-width: 860px){
  .inv-main{
    flex-direction:column;
    align-items:stretch;
    gap:16px;
    overflow:visible;
    min-height:0;
  }
  .inv-detail{
    max-width:none;
    order:2;
    position:static;
    flex-shrink:0;
    flex:none;
  }
  .inv-page .inv-detail{
    position:static;
  }
  .inv-grid{
    flex:1;
    min-height:0;
    overflow:visible;
    height:auto;
    max-height:none;
    margin-top:4px;
  }
  .inv-detail__actions{
    gap:8px;
  }
  .inv-detail__btn{
    min-height:44px;
    padding:10px 12px;
  }
  .inv-card{
    -webkit-tap-highlight-color:rgba(37,99,235,.15);
    touch-action:manipulation;
  }
  .modal-content:has(.inv-page){
    overflow-y:auto;
    overflow-x:hidden;
  }
  .modal-content:has(.inv-page) .inv-page{
    overflow:visible;
  }
  .modal-content:has(.inv-page) .inv-main{
    overflow:visible;
  }
  .modal-content:has(.inv-page) .inv-grid{
    height:auto;
    max-height:none;
    overflow:visible;
  }
}
@media (max-width: 560px){
  .inv-main{
    position:relative;
  }
  .inv-detail{
    display:none;
  }
  .inv-main--detail-open .inv-grid{
    display:none;
  }
  .inv-main--detail-open .inv-detail{
    display:flex;
  }
  .inv-detail__back{
    display:inline-flex;
    align-items:center;
    gap:4px;
  }
}
@media (max-width: 480px){
  .inv-grid{
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:10px;
    padding:10px;
  }
  .inv-detail{
    padding:12px 14px;
  }
  .inv-card{
    min-height:48px;
    min-width:0;
    padding:8px;
    border-radius:12px;
  }
  .inv-card__icon{
    width:44px;
    height:44px;
    border-radius:10px;
  }
  .inv-card__icon .item-icon,
  .inv-card__icon img.item-icon{
    width:40px;
    height:40px;
  }
  .inv-card__count{
    font-size:11px;
    padding:2px 5px;
    right:2px;
    bottom:2px;
  }
}
.inv-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.inv-category__head{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 0 4px;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted);
  border-bottom:1px solid var(--border);
  margin-bottom:4px;
}
.inv-category__icon{font-size:14px}
.inv-category__badge{
  margin-left:auto;
  background:var(--border);
  padding:1px 6px;
  border-radius:8px;
  font-size:10px;
  font-weight:700;
}
.inv-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--card);
  transition:border-color .15s;
}
.inv-item:hover{border-color:rgba(37,99,235,.12)}
.inv-item__icon{
  font-size:20px;
  flex-shrink:0;
  width:32px;
  min-height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.inv-item__icon .item-icon,
.inv-item__icon img.item-icon{
  width:28px;
  height:28px;
  object-fit:contain;
}
.inv-item__info{flex:1; min-width:0}
.inv-item__name{
  font-size:13px;
  font-weight:700;
}
.inv-item__desc{
  font-size:11px;
  color:var(--muted);
  line-height:1.3;
  margin-top:1px;
}
.inv-item__count{
  font-size:14px;
  font-weight:800;
  color:var(--primary);
  flex-shrink:0;
  min-width:40px;
  text-align:right;
}

/* ─── Inventory category tabs ─── */
.inv-tabs{
  display:flex;
  gap:4px;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding-bottom:2px;
}
.inv-tabs::-webkit-scrollbar{display:none}
.inv-tab{
  display:flex;
  align-items:center;
  gap:4px;
  padding:6px 12px;
  border-radius:10px;
  border:1px solid var(--border, #e2e8f0);
  background:var(--card, #fff);
  font:inherit;
  font-size:12px;
  font-weight:700;
  color:var(--muted, #64748b);
  cursor:pointer;
  white-space:nowrap;
  transition:background .12s, border-color .12s, color .12s;
  flex-shrink:0;
}
.inv-tab:hover{ background:rgba(37,99,235,.04); border-color:rgba(37,99,235,.15); }
.inv-tab--active{
  background:var(--primary, #2563eb);
  border-color:var(--primary, #2563eb);
  color:#fff;
}
.inv-tab--active:hover{ background:var(--primary, #2563eb); }
.inv-tab__icon{ font-size:14px; }
.inv-tab__badge{
  padding:0 5px;
  border-radius:6px;
  background:rgba(0,0,0,.08);
  font-size:10px;
  font-weight:800;
}
.inv-tab--active .inv-tab__badge{ background:rgba(255,255,255,.25); }

@media (max-width:600px){
  .inv-tab{ padding:5px 8px; font-size:11px; }
  .inv-tab__icon{ font-size:12px; }
}

/* ═══════════════════════ World coins badge ═══════════════════════ */

.w07-qn-coins{
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  border-radius:16px;
  background:rgba(254,243,199,.85);
  border:1px solid rgba(251,191,36,.3);
  font-size:12px;
  font-weight:800;
  color:#92400e;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

/* NPC buttons in world */
.w07-npc-btn--shop{
  background:linear-gradient(135deg,#dbeafe,#bfdbfe);
  border-color:#60a5fa;
  color:#1e40af;
}
.w07-npc-btn--battle{
  background:linear-gradient(135deg,#fecaca,#fca5a5);
  border-color:#f87171;
  color:#991b1b;
}

/* ═══════════════════════ Mobile: Shop ═══════════════════════ */

@media (max-width:600px){
  .shop-item{flex-wrap:wrap; gap:8px}
  .shop-item__info{flex-basis:calc(100% - 80px)}
  .shop-item__buy{
    flex-basis:100%;
    justify-content:flex-end;
  }
  .shop-item__price{flex-direction:row; gap:6px; align-items:center}
  .npc-coins{padding:4px 8px; font-size:12px}
  .npc-coins__icon{font-size:14px}

  .inv-header__title{font-size:17px}
  .inv-item{gap:8px; padding:8px 10px}
}
@media (max-width:380px){
  .shop-qty__btn{width:24px; height:24px; font-size:12px}
  .shop-qty__val{width:28px; font-size:11px}
  .shop-buy-btn{padding:5px 8px !important; font-size:11px !important}
}


/* ═══════════════════════════════════════════════════════════════
   ВИТРИНА / LANDING PAGE — Modern Redesign
   ═══════════════════════════════════════════════════════════════ */

/* ── Page wrapper ── */
.v-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
}
.v-page > main,
.v-page .v-body > main{
  flex:1;
}
/* Grid-based views (login, register) inside vitrine get containment */
.v-page > main > .grid,
.v-page .v-body > main > .grid{
  max-width:1120px;
  margin:0 auto;
  padding:24px 20px;
}
/* Login — centered card */
.v-login{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:50vh;
  padding:32px 20px;
}
.v-login-card{
  width:100%;
  max-width:420px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:20px;
  padding:32px 28px;
}
.v-login-card h2{
  margin:0 0 24px;
  font-size:24px;
  font-weight:900;
}

.v-body main > .v-register{
  max-width:1120px;
  margin:0 auto;
  padding:32px 20px;
}

/* ── Register page ── */
.v-register{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:40px;
  align-items:start;
}
.v-register-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:20px;
  padding:36px 40px;
  box-shadow:0 4px 24px rgba(2,6,23,.06);
}
.v-register-card__header{
  margin-bottom:28px;
}
.v-register-card__title{
  font-size:26px;
  font-weight:900;
  letter-spacing:-.02em;
  margin:0 0 6px;
  color:var(--text);
}
.v-register-card__sub{
  font-size:14px;
  color:var(--muted);
  margin:0;
}
.v-register-form__row{
  margin-bottom:20px;
}
.v-register-form__label{
  display:block;
  font-size:13px;
  font-weight:700;
  color:var(--text);
  margin-bottom:8px;
}
.v-register-form__input{
  width:100%;
  padding:12px 16px;
  font-size:15px;
  border:1.5px solid var(--border);
  border-radius:12px;
  background:var(--bg);
  transition:border-color .15s, box-shadow .15s;
}
.v-register-form__input:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
.v-register-form__input::placeholder{color:var(--muted);opacity:.8}
.v-register-form__row--checkbox{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.v-register-form__row--checkbox input[type="checkbox"]{
  margin-top:4px;
  flex-shrink:0;
}
.v-register-form__row--checkbox a{color:var(--primary);text-decoration:underline}
.v-register-form__row--checkbox a:hover{text-decoration:none}
.v-register-gender{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.v-register-gender__opt{
  flex:1;
  min-width:120px;
  cursor:pointer;
  margin:0;
}
.v-register-gender__opt input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.v-register-gender__inner{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  border:2px solid var(--border);
  border-radius:14px;
  background:var(--bg);
  transition:all .2s;
}
.v-register-gender__opt input:checked + .v-register-gender__inner,
.v-register-gender__opt:hover .v-register-gender__inner{
  border-color:var(--primary);
  background:rgba(37,99,235,.06);
  box-shadow:0 0 0 1px rgba(37,99,235,.2);
}
.v-register-gender__icon{font-size:24px;line-height:1}
.v-register-gender__label{font-weight:700;font-size:14px;color:var(--text)}
.v-register-form__actions{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:28px;
}
.v-register-form__actions .v-btn{width:100%;justify-content:center}
.v-register-aside{
  position:sticky;
  top:90px;
  background:linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
  border-radius:20px;
  padding:28px;
  color:#fff;
}
.v-register-aside__title{
  font-size:18px;
  font-weight:800;
  margin:0 0 20px;
  color:#fff;
}
.v-register-aside__list{
  list-style:none;
  padding:0;
  margin:0;
}
.v-register-aside__item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 0;
  font-size:14px;
  color:rgba(255,255,255,.9);
  line-height:1.4;
}
.v-register-aside__icon{font-size:18px;flex-shrink:0}

@media (max-width:900px){
  .v-register{grid-template-columns:1fr}
  .v-register-aside{position:static}
}
@media (max-width:600px){
  .v-register-card{padding:24px 20px}
  .v-register-gender{flex-direction:column}
}

/* ── Terms page ── */
.v-terms{
  max-width:720px;
  margin:0 auto;
  padding:40px 24px 60px;
}
.v-terms-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:20px;
  padding:40px 36px;
}
.v-terms-card h1{
  font-size:28px;
  font-weight:900;
  margin:0 0 8px;
}
.v-terms__updated{
  font-size:13px;
  color:var(--muted);
  margin:0 0 32px;
}
.v-terms__section{
  margin-bottom:28px;
}
.v-terms__section h2{
  font-size:18px;
  font-weight:800;
  margin:0 0 12px;
}
.v-terms__section p,.v-terms__section ul{
  margin:0 0 12px;
  line-height:1.6;
}
.v-terms__section ul{padding-left:20px}
.v-terms__footer{margin:32px 0 0}

/* ── Cookie consent ── */
.cookie-consent{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:9999;
  background:var(--card);
  border-top:1px solid var(--border);
  padding:16px 24px;
  box-shadow:0 -4px 24px rgba(0,0,0,.1);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.cookie-consent__text{
  flex:1;
  min-width:200px;
  font-size:14px;
  line-height:1.5;
  color:var(--text);
}
.cookie-consent__text a{color:var(--primary);text-decoration:underline}
.cookie-consent__text a:hover{text-decoration:none}
.cookie-consent__actions{
  display:flex;
  gap:12px;
  flex-shrink:0;
}

/* ── Header ── */
.v-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.v-header__inner{
  max-width:1120px;
  margin:0 auto;
  padding:0 20px;
  height:64px;
  display:flex;
  align-items:center;
  gap:16px;
}

/* Logo */
.v-logo{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  flex-shrink:0;
}
.v-logo:hover{text-decoration:none; opacity:.85}
.v-logo__icon{font-size:22px}
.v-logo__text{
  font-weight:950;
  font-size:15px;
  letter-spacing:.08em;
  color:var(--text);
  white-space:nowrap;
}

/* Nav */
.v-nav{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:24px;
}
.v-nav__link{
  padding:8px 14px;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  color:var(--muted);
  text-decoration:none;
  transition:background .15s, color .15s;
  white-space:nowrap;
}
.v-nav__link:hover{
  color:var(--text);
  background:rgba(2,6,23,.04);
  text-decoration:none;
}
.v-nav__mobile-logout{display:none}

/* Header actions */
.v-header__actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.v-header__telegram{
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  color:inherit;
}
.v-header__telegram:hover{
  color:#0088cc;
}
.v-header__telegram-icon{
  flex-shrink:0;
}

/* Burger */
.v-burger{
  display:none;
  flex-direction:column;
  gap:5px;
  padding:8px;
  border:none;
  background:none;
  cursor:pointer;
}
.v-burger span{
  display:block;
  width:22px;
  height:2px;
  background:var(--text);
  border-radius:2px;
  transition:transform .2s, opacity .2s;
}

/* ── Buttons (vitrine) ── */
.v-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 20px;
  border-radius:12px;
  border:1px solid transparent;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  cursor:pointer;
  transition:all .18s ease;
  font-family:inherit;
  line-height:1.3;
}
.v-btn:hover{text-decoration:none; transform:translateY(-1px)}
.v-btn:active{transform:translateY(0)}

.v-btn--primary{
  background:var(--primary);
  color:#fff;
  border-color:rgba(37,99,235,.6);
  box-shadow:0 4px 14px rgba(37,99,235,.25);
}
.v-btn--primary:hover{
  background:#1d4ed8;
  box-shadow:0 6px 20px rgba(37,99,235,.35);
}

.v-btn--outline{
  background:transparent;
  color:var(--text);
  border:1.5px solid var(--border);
}
.v-btn--outline:hover{
  border-color:var(--primary);
  color:var(--primary);
  background:rgba(37,99,235,.04);
}

.v-btn--ghost{
  background:transparent;
  color:var(--muted);
  border:1px solid rgba(2,6,23,.10);
}
.v-btn--ghost:hover{
  color:var(--text);
  background:rgba(2,6,23,.04);
}

.v-btn--sm{padding:7px 14px; font-size:13px; border-radius:10px}
.v-btn--lg{padding:14px 32px; font-size:16px; border-radius:14px}

/* ── Flash area ── */
.v-flash-area{
  max-width:1120px;
  margin:0 auto;
  padding:0 20px;
}

/* ── Hero ── */
/* ── Hero — animated gradient background ── */
.v-hero{
  position:relative;
  overflow:hidden;
  padding:80px 20px 60px;
  text-align:center;
  background:linear-gradient(135deg, #0f172a 0%, #1e1b4b 35%, #312e81 60%, #1e3a5f 100%);
  color:#fff;
}
.v-hero::before{
  content:'';
  position:absolute;
  top:-50%;
  left:-30%;
  width:160%;
  height:200%;
  background:
    radial-gradient(ellipse 600px 400px at 20% 50%, rgba(99,102,241,.3), transparent),
    radial-gradient(ellipse 500px 350px at 80% 30%, rgba(168,85,247,.25), transparent),
    radial-gradient(ellipse 400px 400px at 50% 80%, rgba(59,130,246,.2), transparent);
  animation:v-aurora 12s ease-in-out infinite alternate;
  pointer-events:none;
  z-index:0;
}
@keyframes v-aurora{
  0%{transform:translate(0,0) rotate(0deg)}
  50%{transform:translate(2%,-3%) rotate(1deg)}
  100%{transform:translate(-1%,2%) rotate(-1deg)}
}
.v-hero__banner{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.v-hero__banner-img{
  width:100%;
  height:100%;
  min-height:100%;
  object-fit:cover;
  object-position:center 42%;
  opacity:.22;
  filter:saturate(.9) contrast(.9) brightness(.9) blur(1.2px);
  mix-blend-mode:soft-light;
}
.v-hero__bg-decor{
  position:absolute;
  inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
  pointer-events:none;
  z-index:0;
}
.v-hero__inner{
  position:relative;
  z-index:1;
  max-width:760px;
  margin:0 auto;
  padding:0 8px;
  box-sizing:border-box;
}
.v-hero__title{
  font-size:48px;
  font-weight:950;
  letter-spacing:-.03em;
  line-height:1.1;
  color:#fff;
  margin:0 0 20px;
  text-shadow:0 2px 30px rgba(0,0,0,.3);
}
.v-hero__accent{
  background:linear-gradient(135deg, #60a5fa, #a78bfa, #f472b6);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.v-hero__badge{
  display:inline-block;
  padding:6px 16px;
  margin:0 0 16px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  border-radius:30px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.9);
}
.v-hero__subtitle{
  font-size:17px;
  line-height:1.7;
  color:rgba(255,255,255,.7);
  max-width:580px;
  margin:0 auto 32px;
}
.v-hero__level{color:#60a5fa; font-weight:800}
.v-hero .v-btn--outline{
  border-color:rgba(255,255,255,.4); color:#fff;
}
.v-hero .v-btn--outline:hover{
  background:rgba(255,255,255,.1); border-color:#fff; color:#fff;
}
.v-btn--glow{
  box-shadow:0 4px 24px rgba(99,102,241,.5), 0 0 60px rgba(99,102,241,.2), inset 0 1px 0 rgba(255,255,255,.2);
}
.v-hero .v-btn--glow:hover{
  box-shadow:0 8px 36px rgba(99,102,241,.6), 0 0 90px rgba(99,102,241,.25);
}
.v-hero__particles{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.v-hero__particle{
  position:absolute;font-size:18px;opacity:.15;animation:v-particle-float 8s ease-in-out infinite;
}
.v-hero__particle--1{top:15%;left:10%;animation-delay:0s}
.v-hero__particle--2{top:25%;right:15%;animation-delay:1.5s}
.v-hero__particle--3{bottom:30%;left:20%;animation-delay:3s}
.v-hero__particle--4{bottom:20%;right:25%;animation-delay:4.5s}
.v-hero__particle--5{top:50%;left:5%;animation-delay:6s}
.v-hero__lang-switch{
  position:absolute;top:16px;right:16px;z-index:2;
  display:flex;gap:6px;flex-wrap:wrap;
}
.lang-btn{
  padding:6px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.5);
  background:rgba(0,0,0,.15);color:#fff;font-size:13px;font-weight:600;cursor:pointer;
}
.lang-btn:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.7)}
.lang-btn--active{background:rgba(255,255,255,.35);border-color:#fff}
@keyframes v-particle-float{
  0%,100%{transform:translate(0,0) scale(1);opacity:.1}
  50%{transform:translate(10px,-15px) scale(1.2);opacity:.2}
}
.v-hero__actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
}
.v-hero .v-btn--primary{
  background:linear-gradient(135deg, #6366f1, #8b5cf6);
  border:none;
  box-shadow:0 4px 24px rgba(99,102,241,.4), 0 0 60px rgba(99,102,241,.15);
  padding:16px 40px;
  font-size:17px;
  font-weight:800;
  border-radius:14px;
  transition:transform .2s, box-shadow .2s;
}
.v-hero .v-btn--primary:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 8px 36px rgba(99,102,241,.5), 0 0 80px rgba(99,102,241,.2);
}
.v-hero__mascot{
  font-size:36px;
  animation:v-float 3s ease-in-out infinite;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));
}
.v-hero__mascot--right{
  animation-delay:1.5s;
}
@keyframes v-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

/* ── Stats — glassmorphism cards ── */
.v-stats{
  display:flex;
  justify-content:center;
  gap:20px;
  margin-top:48px;
  position:relative;
  z-index:1;
}
.v-stat-card{
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.15);
  border-radius:20px;
  padding:24px 40px;
  text-align:center;
  min-width:180px;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.v-stat-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(0,0,0,.2);
  border-color:rgba(255,255,255,.25);
}
.v-stat__value{
  font-size:40px;
  font-weight:950;
  letter-spacing:-.02em;
  color:#fff;
  line-height:1.1;
}
.v-stat__value--online{
  color:#4ade80;
  text-shadow:0 0 20px rgba(74,222,128,.3);
}
.v-stat__label{
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,.6);
  margin-top:6px;
}

/* ── Section ── */
.v-section{
  max-width:1120px;
  margin:0 auto;
  padding:56px 20px;
}
.v-section__title{
  font-size:28px;
  font-weight:900;
  letter-spacing:-.02em;
  text-align:center;
  margin:0 0 36px;
  color:var(--text);
}
.v-section__subtitle{
  text-align:center;
  font-size:15px;
  color:var(--muted);
  margin:-20px 0 32px;
}
.v-section__title::after{
  content:'';
  display:block;
  width:48px;
  height:3px;
  background:linear-gradient(90deg, #6366f1, #a78bfa);
  border-radius:2px;
  margin:12px auto 0;
}
.v-section__cta{
  text-align:center;
  margin-top:28px;
}

/* ── News — cards with left accent ── */
.v-news-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
  gap:18px;
  max-width:900px;
  margin:0 auto;
}
.v-news-card{
  background:var(--card);
  border:1px solid var(--border);
  border-left:4px solid #6366f1;
  border-radius:16px;
  padding:22px 24px;
  box-shadow:0 2px 16px rgba(2,6,23,.05);
  transition:transform .25s, box-shadow .25s;
}
.v-news-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 32px rgba(2,6,23,.10);
}
.v-news-card--hover{
  transition:transform .25s, box-shadow .25s, border-color .2s;
}
.v-news-card--hover:hover{
  border-left-color:#8b5cf6;
  box-shadow:0 12px 40px rgba(99,102,241,.12);
}
.v-news-card__header{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
}
.v-news-card__badge{
  font-size:22px;
  flex-shrink:0;
  line-height:1.3;
}
.v-news-card__tag{
  font-weight:800;
  font-size:15px;
  color:var(--text);
  line-height:1.4;
}
.v-news-card__body{
  font-size:14px;
  color:var(--muted);
  line-height:1.65;
  margin:0 0 14px;
  white-space:pre-wrap;
  word-wrap:break-word;
}
.v-news-card--collapsed .v-news-card__body--full{ display:none }
.v-news-card--collapsed .v-news-card__read-more{ display:inline-block; margin-top:8px; font-size:13px; font-weight:700; color:var(--primary); background:none; border:none; cursor:pointer; padding:0; text-decoration:underline }
.v-news-card--expanded .v-news-card__body--short{ display:none }
.v-news-card--expanded .v-news-card__body--full{ display:block }
.v-news-card__read-more:hover{ opacity:.9 }
.v-news-card__meta{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  color:var(--muted);
  font-weight:600;
}
.v-news-card__author{opacity:.7}

/* ── Empty State ── */
.v-empty-state{
  text-align:center;
  padding:44px 20px;
  background:linear-gradient(135deg, rgba(99,102,241,.04), rgba(168,85,247,.03));
  border:1px dashed rgba(99,102,241,.2);
  border-radius:20px;
  max-width:480px;
  margin:0 auto;
}
.v-empty-state__text{
  color:var(--muted);
  font-size:15px;
  margin:0;
}

/* ── Features — hover-glow cards ── */
.v-features{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  max-width:1000px;
  margin:0 auto;
}
.v-feature-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:20px;
  padding:32px 24px;
  text-align:center;
  box-shadow:0 2px 16px rgba(2,6,23,.04);
  transition:transform .3s, box-shadow .3s, border-color .3s;
  position:relative;
  overflow:hidden;
}
.v-feature-card::before{
  content:'';
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(circle at center, rgba(99,102,241,.06), transparent 70%);
  opacity:0;
  transition:opacity .4s;
  pointer-events:none;
}
.v-feature-card:hover::before{opacity:1}
.v-feature-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(2,6,23,.10);
  border-color:rgba(99,102,241,.25);
}
.v-feature-card__icon{
  font-size:44px;
  margin-bottom:16px;
  line-height:1;
  display:inline-block;
  animation:v-icon-pulse 4s ease-in-out infinite;
}
@keyframes v-icon-pulse{
  0%,100%{transform:scale(1)} 50%{transform:scale(1.08)}
}
.v-feature-card__title{
  font-size:17px;
  font-weight:800;
  margin:0 0 10px;
  color:var(--text);
}
.v-feature-card__desc{
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
  margin:0;
}

/* ── About page (SEO) ── */
.v-section--about{padding:32px 20px 48px}
.v-about-hero{
  text-align:center;
  max-width:640px;
  margin:0 auto 40px;
}
.v-about-hero__title{
  font-size:clamp(24px, 4vw, 32px);
  font-weight:800;
  margin:0 0 16px;
  color:var(--text);
}
.v-about-hero__lead{
  font-size:16px;
  line-height:1.6;
  color:var(--muted);
  margin:0 0 24px;
}
.v-about-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}
.v-features--about{
  margin-bottom:32px;
}
.v-about-footer{
  text-align:center;
  padding-top:24px;
  border-top:1px solid var(--border);
}
.v-about-footer p{margin:8px 0; font-size:14px; color:var(--muted)}
.v-about-footer .v-link{color:var(--primary)}

/* ── Footer ── */
.v-footer{
  margin-top:auto;
  padding:28px 20px;
  text-align:center;
  border-top:1px solid var(--border);
  background:var(--card);
}
.v-footer p{
  margin:0;
  font-size:13px;
  color:var(--muted);
}

/* ═══════════════════════════════════════════════════════════════
   ВИТРИНА — Mobile Responsive
   ═══════════════════════════════════════════════════════════════ */

@media (max-width:900px){
  .v-features{
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
  }
  .v-news-list{
    grid-template-columns:1fr;
  }
}

@media (max-width:768px){
  .v-nav{
    display:none;
    position:fixed;
    top:64px;
    left:0;
    right:0;
    background:var(--card);
    border-bottom:1px solid var(--border);
    flex-direction:column;
    padding:12px 20px;
    gap:4px;
    box-shadow:0 8px 24px rgba(2,6,23,.10);
    z-index:99;
  }
  .v-nav.open{display:flex}
  .v-nav__link{
    padding:12px 16px;
    border-radius:12px;
    font-size:15px;
  }
  .v-nav__link:hover{
    background:rgba(2,6,23,.04);
  }

  .v-burger{display:flex}

  .v-header__actions .v-btn:not(.v-btn--logout){
    display:none;
  }
  .v-btn--logout{display:inline-flex !important}
  .v-nav__mobile-logout{display:block !important; border-top:1px solid var(--border); margin-top:8px}
  .v-nav__mobile-logout .v-nav__logout-btn:hover{background:rgba(220,38,38,.08)}
  .v-header__actions{gap:4px}

  .v-hero{
    padding:48px 12px 40px;
    min-height:auto;
  }
  .v-hero__inner{
    padding:0 4px;
  }
  .v-hero__title{
    font-size:clamp(26px, 7vw, 32px);
    line-height:1.2;
    margin-bottom:14px;
    word-break:break-word;
    hyphens:auto;
  }
  .v-hero__badge{
    font-size:11px;
    padding:5px 12px;
    margin-bottom:12px;
    max-width:100%;
    word-break:break-word;
  }
  .v-hero__subtitle{
    font-size:14px;
    line-height:1.55;
    margin-bottom:24px;
    padding:0 4px;
  }
  .v-hero__actions{
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
  }
  .v-hero__actions .v-btn{
    min-width:140px;
  }
  .v-hero__mascot{font-size:28px}

  .v-stats{flex-direction:column; align-items:center; gap:12px}
  .v-stat-card{min-width:240px; padding:18px 32px}
  .v-stat__value{font-size:32px}

  .v-section{padding:36px 16px}
  .v-section__title{font-size:22px; margin-bottom:26px}

  .v-news-card{padding:18px 18px}
  .v-news-card__tag{font-size:14px}

  .v-features{
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .v-feature-card{padding:22px 16px; border-radius:16px}
  .v-feature-card__icon{font-size:34px; margin-bottom:10px}
  .v-feature-card__title{font-size:14px}
  .v-feature-card__desc{font-size:12px}
}

@media (max-width:480px){
  .v-header__inner{
    padding:0 12px;
    height:56px;
  }
  .v-logo__text{font-size:13px}

  .v-hero{
    padding:36px 10px 32px;
    min-height:auto;
  }
  .v-hero__banner{
    min-height:200px;
  }
  .v-hero__banner-img{
    min-height:200px;
  }
  .v-hero__inner{
    padding:0 2px;
  }
  .v-hero__title{
    font-size:clamp(20px, 6.5vw, 26px);
    margin-bottom:12px;
    line-height:1.25;
    word-break:break-word;
  }
  .v-hero__badge{
    font-size:10px;
    padding:4px 10px;
    margin-bottom:10px;
  }
  .v-hero__subtitle{
    font-size:13px;
    line-height:1.5;
    margin-bottom:20px;
  }
  .v-hero__actions{
    flex-direction:column;
    width:100%;
    max-width:280px;
    margin:0 auto;
    gap:10px;
  }
  .v-hero__actions .v-btn{
    width:100%;
    justify-content:center;
    min-width:0;
  }
  .v-hero .v-btn--primary{
    padding:12px 24px;
    font-size:15px;
  }
  .v-btn--lg{
    padding:12px 24px;
    font-size:14px;
  }

  .v-features{
    grid-template-columns:1fr;
    gap:12px;
  }

  .v-stat-card{min-width:auto; width:100%; max-width:300px; padding:16px 20px}
  .v-stats{gap:10px; margin-top:32px}

  .v-nav{top:56px}
}

@media (max-width:360px){
  .v-hero{padding:28px 8px 28px}
  .v-hero__title{font-size:18px}
  .v-hero__subtitle{font-size:12px; margin-bottom:16px}
  .v-hero__actions{max-width:100%}
}

/* ═══════════════════════ Creature Card (CK) ═══════════════════════ */

.ck{
  max-width:860px;
  margin:0 auto;
  background:var(--card, #fff);
  border-radius:18px;
  border:1px solid var(--border, #e2e8f0);
  overflow:hidden;
}
.ck-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px;
  background:linear-gradient(135deg, #fef3c7, #fde68a);
  border-bottom:1px solid rgba(251,191,36,.3);
  font-size:13px;
  font-weight:700;
  color:#92400e;
}
.ck-head__shiny{
  background:rgba(255,255,255,.6);
  padding:2px 8px;
  border-radius:8px;
}
.ck-body{
  display:flex;
  gap:16px;
  padding:16px;
}
.ck-left{
  width:200px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
}
.ck-sprite{
  width:160px;
  height:160px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle, rgba(0,0,0,.03) 0%, transparent 70%);
  border-radius:12px;
}
.ck-held-icon{
  position:absolute;
  top:6px;
  right:6px;
  width:22px;
  height:22px;
  padding:0;
  border:none;
  border-radius:999px;
  background:rgba(15,23,42,0.9);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 1px 3px rgba(15,23,42,0.5);
}
.ck-held-icon img{
  max-width:16px;
  max-height:16px;
}
.ck-held-icon:hover{
  background:rgba(37,99,235,0.95);
}
.ck-sprite img{
  max-width:140px;
  max-height:140px;
  image-rendering:pixelated;
  object-fit:contain;
}
.ck-sprite__ph{font-size:48px; opacity:.3}
.ck-hp{width:100%}
.ck-hp__bar{
  height:8px;
  border-radius:4px;
  background:rgba(0,0,0,.08);
  overflow:hidden;
}
.ck-hp__fill{height:100%; border-radius:4px; transition:width .3s}
.ck-hp__text{font-size:11px; font-weight:700; text-align:center; margin-top:2px; color:var(--muted)}
.ck-quick{width:100%}
.ck-quick__row{
  display:flex;
  justify-content:space-between;
  font-size:11px;
  padding:2px 0;
  border-bottom:1px solid rgba(0,0,0,.04);
}
.ck-quick__label{color:var(--muted); font-weight:600}
.ck-quick__val{font-weight:700}
.ck-exp-block{margin-top:6px; width:100%}
.ck-exp-block__header{display:flex; justify-content:space-between; font-size:11px; margin-bottom:4px}
.ck-exp-block__nums{font-weight:700; color:#3b82f6}
.ck-exp-bar{height:8px; background:#e5e7eb; border-radius:4px; overflow:hidden}
.ck-exp-bar__fill{height:100%; border-radius:4px; transition:width .3s}
.ck-exp-block__hint{font-size:10px; color:var(--muted); margin-top:2px}
.ck-btn{
  width:100%;
  padding:8px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--card);
  font:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:background .1s;
  text-align:center;
}
.ck-btn:hover{background:rgba(0,0,0,.03)}
.ck-types{display:flex; gap:4px; justify-content:center; flex-wrap:wrap}
.ck-type{
  padding:2px 10px;
  border-radius:6px;
  font-size:10px;
  font-weight:800;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.ck-status{
  padding:3px 10px;
  border-radius:6px;
  font-size:10px;
  font-weight:800;
  text-align:center;
}
.ck-status--par{background:#f7d02c; color:#713f12}
.ck-status--brn{background:#ef4444; color:#fff}
.ck-status--psn,.ck-status--tox{background:#a855f7; color:#fff}
.ck-status--slp{background:var(--muted); color:#fff}
.ck-status--frz{background:#06b6d4; color:#fff}

.ck-right{flex:1; min-width:0}
.ck-info{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:12px;
}
.ck-info__row{font-size:13px; display:flex; gap:4px; flex-wrap:wrap}
.ck-info__label{color:var(--muted); font-weight:700}
.ck-info__nick{color:var(--muted)}

.ck-stats{display:flex; flex-direction:column; gap:4px}
/* Одна строка на стат: название | IV | полоска | значение | EV (ввод/252/полоска/+) */
.ck-stat{
  display:grid;
  grid-template-columns: 52px 22px 1fr 28px minmax(0, 1fr);
  gap:4px 6px;
  align-items:center;
  font-size:11px;
}
.ck-stat__label{font-weight:800; text-transform:uppercase; font-size:10px; color:var(--text,#1e293b)}
.ck-stat__iv{color:var(--muted); font-size:10px; text-align:center}
.ck-stat__bar{height:6px; border-radius:3px; background:rgba(0,0,0,.08); overflow:hidden}
.ck-stat__fill{height:100%; border-radius:3px; background:linear-gradient(90deg,#3b82f6,#60a5fa); transition:width .3s}
.ck-stat--up .ck-stat__label{color:#16a34a}
.ck-stat--down .ck-stat__label{color:#dc2626}
.ck-stat__val{font-weight:700; text-align:right; font-size:12px}
.ck-stat__ev{
  display:flex; align-items:center; gap:4px; min-width:0;
}
.ck-stat__ev--total{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:11px; justify-content:flex-end}
.ck-stat__pool{font-weight:700; color:var(--primary,#2563eb)}
.ck-stat__stats-btn{margin-left:6px; padding:2px 8px; font-size:11px; border-radius:6px; border:1px solid var(--border); background:var(--card,#fff); color:var(--muted); cursor:pointer}
.ck-stat__stats-btn:hover{color:var(--text,#1e293b); border-color:var(--primary)}
.ck-stat-total-wrap{position:relative}
.ck-stats-tooltip{position:absolute; z-index:100; top:100%; right:0; margin-top:4px; padding:10px 12px; max-width:320px; border-radius:10px; background:var(--card,#fff); border:1px solid var(--border); box-shadow:0 8px 24px rgba(0,0,0,.15); font-size:12px; line-height:1.45; display:none}
.ck-stats-tooltip.ck-stats-tooltip--open{display:block}
.ck-stats-tooltip__inner{position:relative}
.ck-stats-tooltip__row{margin-bottom:6px}
.ck-stats-tooltip__row:last-child{margin-bottom:0}
.ck-stats-tooltip__note{margin-top:8px; font-size:10px}
.ck-ev-input{
  width:36px; min-width:36px; padding:3px 2px; font-size:11px; font-weight:700;
  border:1px solid var(--border); border-radius:4px; background:var(--card,#fff);
  color:var(--text,#1e293b); text-align:center;
}
.ck-ev-input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 2px rgba(37,99,235,.2)}
.ck-stat__ev-value{font-weight:700; min-width:18px; text-align:center; font-size:11px}
.ck-stat__ev-bar{flex:1; min-width:32px; height:5px; border-radius:2px; background:rgba(0,0,0,.1); overflow:hidden}
.ck-stat__ev-fill{height:100%; border-radius:2px; background:linear-gradient(90deg,#f97316,#fb923c); transition:width .3s}
.ck-ev-btn{
  width:22px; height:22px; border-radius:6px; border:1px solid var(--border);
  background:var(--card,#1e293b); color:var(--text,#e2e8f0); font-size:13px; font-weight:700;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:all .15s; line-height:1; padding:0; flex-shrink:0;
}
.ck-ev-btn--plus:hover:not(:disabled){background:#22c55e; color:#fff; border-color:#22c55e}
.ck-ev-btn--minus{display:none}
.ck-ev-btn:disabled{opacity:.45; cursor:not-allowed}

.ck-stat--total{grid-template-columns: auto 0fr 1fr auto 1fr; border-top:1px solid var(--border); padding-top:6px; margin-top:2px}
.ck-stat--total .ck-stat__label{grid-column:1}
.ck-stat--total .ck-stat__iv{display:none}
.ck-stat--total .ck-stat__bar{grid-column:3}
.ck-stat--total .ck-stat__val{grid-column:4}
.ck-stat--total .ck-stat__ev{grid-column:1 / -1; justify-content:flex-end}
.ck-stat__fill--ev{background:linear-gradient(90deg,#f97316,#fb923c)}

/* Candy grid */
.ck-candy-options{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-bottom:10px}
.ck-candy-options__label{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted)}
.ck-candy-qty{width:52px; padding:4px 6px; font-size:13px; border:1px solid var(--border); border-radius:6px; background:var(--input-bg,var(--card))}
.ck-candy-target{padding:4px 8px; font-size:13px; border:1px solid var(--border); border-radius:6px; background:var(--input-bg,var(--card)); min-width:64px}
.ck-candy-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; padding:0 0 8px}
@media(max-width:480px){.ck-candy-grid{grid-template-columns:repeat(2, 1fr)}}
.ck-candy{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:10px 6px; border-radius:10px;
  border:1.5px solid var(--border); background:var(--card,#1e293b);
  cursor:pointer; transition:all .15s; position:relative;
}
.ck-candy:hover:not([disabled]){transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.2)}
.ck-candy[disabled]{opacity:.4; cursor:not-allowed}
.ck-candy__icon{font-size:24px}
.ck-candy__name{font-size:11px; font-weight:700; text-align:center}
.ck-candy__exp{font-size:10px; font-weight:800}
.ck-candy__count{
  position:absolute; top:4px; right:6px;
  font-size:10px; font-weight:800; color:var(--muted);
}
.ck-candy-hint{font-size:11px; padding:4px 0}

.ck-section{padding:0 16px 12px}
.ck-section__title{font-size:12px; font-weight:800; color:var(--muted); text-transform:uppercase; margin-bottom:6px}
.ck-moves{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.ck-move{
  padding:8px 12px;
  border-radius:8px;
  background:rgba(0,0,0,.02);
  cursor:pointer;
  border:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:4px;
  transition: background .12s, border-color .12s;
}
.ck-move:hover{background:rgba(59,130,246,.05); border-color:rgba(59,130,246,.25)}
.ck-move--empty{opacity:.4}
.ck-move__top{display:flex; justify-content:space-between; align-items:center}
.ck-move__name{font-size:13px; font-weight:800}
.ck-move__pp{font-size:11px; color:var(--muted); font-weight:700}
.ck-move__bottom{display:flex; gap:5px; align-items:center; flex-wrap:wrap}
.ck-move__badge{font-size:9px; font-weight:800; color:#fff; padding:1px 6px; border-radius:4px; letter-spacing:.02em}
.ck-move__cat{font-size:10px; color:var(--muted); font-weight:600}
.ck-move__detail{font-size:10px; color:var(--muted)}
.ck-move__desc{font-size:10px; color:var(--muted); margin-top:3px; line-height:1.3; white-space:normal}
.ck-avail-move__desc{display:block; font-size:10px; color:var(--muted); line-height:1.3; margin:2px 0 4px; white-space:normal}

/* Tera type display */
.ck-tera{display:flex; align-items:center; gap:5px; margin-top:6px}
.ck-tera__icon{font-size:18px}
.ck-tera__icon--img{
  padding:0;
  margin:0;
  display:inline-flex;
  align-items:center;
  height:24px;
}
.ck-tera__icon--img img{
  display:block;
  width:72px;
  height:24px;
  object-fit:contain;
}
.ck-tera__type{font-size:10px; font-weight:800; color:#fff; padding:2px 8px; border-radius:6px; letter-spacing:.03em}
.ck-tera__type--none{background:var(--muted); font-weight:600; font-style:italic}
.ck-tera--none{opacity:.5}

/* Available moves panel */
.ck-avail-moves{border-top:1px solid var(--border); padding-top:12px}
.ck-avail-list{display:flex; flex-direction:column; gap:3px; max-height:300px; overflow-y:auto; margin-bottom:10px}
.ck-avail-move{
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 10px; border-radius:6px; border:1px solid var(--border);
  background:#fff; cursor:pointer; text-align:left;
  transition:background .1s, border-color .1s;
  font-size:13px; font-family:inherit;
}
.ck-avail-move:hover:not(:disabled){background:rgba(59,130,246,.06); border-color:rgba(59,130,246,.3)}
.ck-avail-move:disabled{opacity:.5; cursor:default}
.ck-avail-move--equipped{background:#f0fdf4; border-color:#bbf7d0}
.ck-avail-move__name{font-weight:700; min-width:100px}
.ck-avail-move__meta{display:flex; gap:5px; align-items:center; flex-wrap:wrap; font-size:11px; color:var(--muted)}
.ck-avail-move__lv{font-weight:700; color:var(--primary)}
.ck-avail-move__tag{font-size:10px; color:#16a34a; font-weight:700; margin-left:auto}

.ck-footer{padding:10px 16px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.ck-btn--lead{width:auto; flex:0 0 auto; background:linear-gradient(135deg,#fbbf24,#f59e0b); color:#1c1917; border-color:#d97706}
.ck-btn--lead:hover{background:linear-gradient(135deg,#fcd34d,#fbbf24); border-color:#f59e0b}
.ck-lead-badge{font-size:12px; color:var(--muted); font-weight:600}
.ck-link{font-size:13px; font-weight:700; color:var(--primary); text-decoration:none}
.ck-link:hover{text-decoration:underline}

@media (max-width:600px){
  .ck-body{flex-direction:column}
  .ck-left{width:100%; flex-direction:row; flex-wrap:wrap; justify-content:center}
  .ck-sprite{width:120px; height:120px}
  .ck-sprite img{max-width:100px; max-height:100px}
  .ck-stat{grid-template-columns:46px 20px 1fr 26px minmax(0, 1fr); gap:3px 4px; font-size:10px}
  .ck-stat__label{font-size:9px}
  .ck-stat__bar{height:5px}
  .ck-ev-input{width:32px; min-width:32px; padding:2px 1px; font-size:10px}
  .ck-stat__ev-bar{min-width:24px; height:4px}
  .ck-ev-btn{width:20px; height:20px; font-size:12px}
  .ck-moves{grid-template-columns:1fr}
}

/* ═══════════════════════ Pokedex v2 Index (DX2) ═══════════════════════ */

/* Общие вкладки декса (Покедекс / Атакдекс / Итемдекс / Способности / Характеры) — единый стиль */
.dx2-tabs-main{display:flex;gap:4px;margin-bottom:12px;flex-wrap:wrap}
.dx2-tabs-main__tab{padding:6px 10px;border-radius:999px;font-size:13px;text-decoration:none;color:var(--muted);border:1px solid transparent;background:rgba(148,163,184,.08);transition:color .15s,background .15s,border-color .15s}
.dx2-tabs-main__tab:hover{color:var(--text)}
.dx2-tabs-main__tab--active{color:var(--text);border-color:var(--primary);background:var(--primary-weak);font-weight:600}

.dx2{max-width:1100px;margin:0 auto;padding:0 8px}

/* Header & Progress */
.dx2-header{padding:16px 0 8px}
.dx2-header__title{margin:0;font-size:24px;font-weight:900;letter-spacing:-.02em}
.dx2-header__progress{margin-top:8px}
.dx2-progress{height:8px;border-radius:4px;background:var(--border,#e2e8f0);overflow:hidden}
.dx2-progress__bar{height:100%;border-radius:4px;background:linear-gradient(90deg,#22c55e,#16a34a);transition:width .4s ease}
.dx2-progress__text{display:flex;justify-content:space-between;font-size:11px;font-weight:700;color:var(--muted);margin-top:4px}

/* Filters */
.dx2-filters{margin-bottom:16px}
.dx2-filters__top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.dx2-search{
  position:relative;flex:1;min-width:200px;max-width:400px;
}
.dx2-search__input{
  width:100%;box-sizing:border-box;
  padding:10px 36px 10px 38px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--card);
  font:inherit;font-size:14px;
  outline:none;transition:border-color .15s,box-shadow .15s;
}
.dx2-search__input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-weak)}
.dx2-search__icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px;pointer-events:none;opacity:.7}
.dx2-search__clear{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;padding:0;border:none;border-radius:50%;
  background:var(--border);color:var(--muted);font-size:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s,color .12s;
}
.dx2-search__clear:hover{background:var(--muted);color:var(--card)}
.dx2-filters__meta{font-size:12px;font-weight:700;color:var(--muted)}
.dx2-filters__count{white-space:nowrap}
.dx2-filter-bar{
  padding:12px 14px;border-radius:var(--radius);
  background:var(--card);border:1px solid var(--border);
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.dx2-filter-form{}
.dx2-filter-row{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.dx2-filter-label{display:inline-flex;flex-direction:column;gap:4px}
.dx2-filter-label__text{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.dx2-select{
  padding:8px 10px;border-radius:10px;border:1px solid var(--border);
  background:var(--soft);font:inherit;font-size:13px;outline:none;
  min-width:100px;transition:border-color .12s;
}
.dx2-select:focus{border-color:var(--primary)}
.dx2-filter-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.dx2-btn{
  padding:8px 16px;border-radius:10px;border:1px solid transparent;
  font:inherit;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;text-align:center;
  transition:background .12s,border-color .12s,color .12s;
}
.dx2-btn--primary{background:var(--ok);color:#fff;border-color:#16a34a}
.dx2-btn--primary:hover{background:#16a34a}
.dx2-btn--ghost{background:transparent;color:var(--muted);border-color:var(--border)}
.dx2-btn--ghost:hover{color:var(--text);border-color:var(--text)}
.dx2-btn--sm{padding:6px 10px;font-size:12px}
.dx2-header{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px}
.dx2-header__progress{flex:1;min-width:0}
.dx2-header__sync{margin-left:auto;flex-shrink:0}
.dx2-sync-btn{font-size:12px}
.dx2-filter-badges{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.dx2-badge{
  display:inline-flex;align-items:center;
  padding:4px 10px;border-radius:8px;
  background:var(--primary-weak);color:var(--primary);
  font-size:12px;font-weight:700;
  border:none;cursor:pointer;font:inherit;
  transition:opacity .12s;
}
.dx2-badge--rem:hover{opacity:.85}
.dx2-empty{padding:32px 16px;text-align:center;background:var(--card);border-radius:var(--radius);border:1px solid var(--border);margin:12px 0}
.dx2-empty__text{margin:0;font-size:16px;font-weight:700;color:var(--text)}
.dx2-empty__hint{margin:8px 0 0;font-size:13px;color:var(--muted)}
.dx2-empty__hint a{color:var(--primary);text-decoration:none}
.dx2-empty__hint a:hover{text-decoration:underline}

/* Generation groups */
.dx2-gen{margin-bottom:8px;border:none}
.dx2-gen__head{
  display:flex;align-items:center;gap:8px;
  padding:10px 0;cursor:pointer;user-select:none;
  font-size:14px;font-weight:800;color:#22c55e;
  border-bottom:1px solid var(--border);list-style:none;
}
.dx2-gen__head::-webkit-details-marker{display:none}
.dx2-gen__head::before{content:'▸';font-size:12px;transition:transform .2s}
.dx2-gen[open]>.dx2-gen__head::before{transform:rotate(90deg)}
.dx2-gen__title{flex:1}
.dx2-gen__count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:28px;height:20px;border-radius:10px;
  background:rgba(34,197,94,.1);color:#16a34a;
  font-size:11px;font-weight:800;padding:0 6px;
}

/* Grid */
.dx2-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
  gap:6px;padding:10px 0;
}

/* Cards */
.dx2-card{
  --dx-card-accent:transparent;
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  padding:0;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--card);
  text-decoration:none;color:var(--text);text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition:transform .15s,box-shadow .15s,border-color .15s;
  overflow:hidden;
}
.dx2-card::before{
  content:'';
  position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--dx-card-accent);
  opacity:0;
}
.dx2-card--caught::before{opacity:1}
.dx2-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  border-color:var(--dx-card-accent, var(--primary));
  text-decoration:none;
}
.dx2-card--caught{--dx-card-accent:var(--ok);background:linear-gradient(90deg, rgba(34,197,94,.04) 0%, var(--card) 12px)}
.dx2-card--unknown{opacity:.5}
.dx2-card--unknown:hover{opacity:.7}

.dx2-card__inner{
  display:flex;flex-direction:column;align-items:center;
  padding:10px 6px 8px;width:100%;
}
.dx2-card__sprite{
  width:68px;height:68px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:4px;
}
.dx2-card__sprite img{
  max-width:60px;max-height:60px;
  image-rendering:pixelated;object-fit:contain;
  transition:transform .15s;
}
.dx2-card:hover .dx2-card__sprite img{transform:scale(1.08)}
.dx2-card__img--gray{filter:grayscale(1) brightness(1.5);opacity:.6}
.dx2-card__img--hidden{filter:brightness(0);opacity:.25}
.dx2-card__ph{font-size:28px;opacity:.2}

.dx2-card__bottom{min-width:0}
.dx2-card__num{font-size:9px;font-weight:700;color:var(--muted)}
.dx2-card__name{
  font-size:11px;font-weight:800;line-height:1.2;
  max-width:86px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dx2-card__types{display:flex;gap:3px;justify-content:center;margin-top:3px}
.dx2-type-dot{
  width:8px;height:8px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
}
.dx2-card__check{
  position:absolute;top:6px;right:6px;z-index:1;
  width:18px;height:18px;border-radius:50%;
  background:var(--ok);color:#fff;
  font-size:10px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  line-height:1;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}

/* Pager */
.dx2-pager{
  display:flex;align-items:center;justify-content:center;
  gap:12px;padding:16px 0;
}
.dx2-pager__btn{
  padding:8px 16px;border-radius:10px;border:1px solid var(--border);
  font-size:13px;font-weight:700;text-decoration:none;color:var(--text);
  transition:background .12s;
}
.dx2-pager__btn:hover{background:rgba(0,0,0,.03)}
.dx2-pager__btn[aria-disabled="true"]{opacity:.35;pointer-events:none}
.dx2-pager__info{font-size:12px;color:var(--muted);font-weight:700}

/* Responsive */
@media (max-width:600px){
  .dx2-header__title{font-size:20px}
  .dx2-grid{grid-template-columns:repeat(auto-fill, minmax(80px, 1fr));gap:4px}
  .dx2-card__inner{padding:8px 4px 6px}
  .dx2-card__sprite{width:52px;height:52px}
  .dx2-card__sprite img{max-width:48px;max-height:48px}
  .dx2-card__name{font-size:10px;max-width:70px}
  .dx2-filter-row{flex-direction:column}
  .dx2-select{min-width:unset}
}
@media (max-width:380px){
  .dx2-grid{grid-template-columns:repeat(auto-fill, minmax(68px, 1fr))}
  .dx2-card__sprite{width:44px;height:44px}
  .dx2-card__sprite img{max-width:40px;max-height:40px}
  .dx2-card__name{font-size:9px;max-width:60px}
}

/* ═══════════════════════ Dex Show v2 (DS2) ═══════════════════════ */

.ds2{max-width:580px;margin:0 auto;padding:0 8px}

/* Navigation */
.ds2-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;gap:8px;
}
.ds2-nav__btn{
  padding:6px 12px;border-radius:8px;border:1px solid var(--border);
  font-size:12px;font-weight:700;text-decoration:none;color:var(--text);
  transition:background .12s;
}
.ds2-nav__btn:hover{background:rgba(0,0,0,.04);text-decoration:none}
.ds2-nav__btn--disabled{opacity:.3;pointer-events:none}
.ds2-nav__back{font-size:13px;font-weight:800;color:var(--muted);text-decoration:none}
.ds2-nav__back:hover{color:var(--text);text-decoration:none}

/* Hero */
.ds2-hero{
  display:flex;gap:20px;align-items:center;
  padding:20px 18px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  margin-bottom:16px;
}
.ds2-hero__sprites{text-align:center;flex-shrink:0}
.ds2-hero__img{
  width:120px;height:120px;
  image-rendering:pixelated;object-fit:contain;
  transition:transform .2s;
}
.ds2-hero__img:hover{transform:scale(1.08)}
.ds2-hero__sprite-btns{display:flex;gap:6px;justify-content:center;margin-top:8px}
.ds2-sbtn{
  width:32px;height:32px;border-radius:10px;border:1px solid var(--border);
  background:var(--card);cursor:pointer;font-size:12px;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .12s,background .12s,box-shadow .12s;padding:0;
}
.ds2-sbtn:hover{border-color:var(--primary);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.ds2-sbtn--active{border-color:var(--ok);background:rgba(34,197,94,.12)}

.ds2-hero__info{flex:1;min-width:0}
.ds2-hero__num{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.02em}
.ds2-hero__name{margin:0;font-size:26px;font-weight:900;line-height:1.1;letter-spacing:-.01em}
.ds2-hero__types{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.ds2-type{
  padding:4px 12px;border-radius:8px;
  font-size:11px;font-weight:800;color:#fff;
  text-transform:uppercase;letter-spacing:.03em;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.ds2-type--sm{padding:2px 8px;font-size:10px;border-radius:6px}
.ds2-hero__status{margin-top:10px}
.ds2-badge{
  display:inline-block;padding:4px 12px;border-radius:8px;
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
}
.ds2-badge--caught{background:rgba(34,197,94,.14);color:#16a34a}
.ds2-badge--seen{background:rgba(59,130,246,.14);color:#2563eb}
.ds2-badge--unknown{background:rgba(107,114,128,.12);color:var(--muted)}

/* Quick stats row */
.ds2-quick{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
  gap:8px;margin-bottom:16px;
}
.ds2-quick--pills{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin-bottom:14px;
}
.ds2-pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 10px;border-radius:999px;
  font-size:12px;font-weight:700;white-space:nowrap;
  background:var(--card);border:1px solid var(--border);
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.ds2-pill__label{font-size:10px;font-weight:800;text-transform:uppercase;color:var(--muted);letter-spacing:.03em}
.ds2-pill--egg{background:rgba(234,179,8,.08);border-color:rgba(234,179,8,.35);color:#92400e}
.ds2-pill--m{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.3);color:#2563eb}
.ds2-pill--f{background:rgba(236,72,153,.08);border-color:rgba(236,72,153,.3);color:#be185d}
.ds2-pill--gender{background:rgba(107,114,128,.08);border-color:rgba(107,114,128,.25);color:var(--muted)}
.ds2-quick__item{
  padding:12px 10px;border-radius:var(--radius);
  background:var(--card);border:1px solid var(--border);
  text-align:center;
  box-shadow:0 1px 4px rgba(0,0,0,.03);
}
.ds2-quick__label{font-size:9px;font-weight:800;text-transform:uppercase;color:var(--muted);letter-spacing:.04em}
.ds2-quick__val{font-size:13px;font-weight:800;margin-top:2px}
.ds2-quick__val small{font-size:10px;font-weight:600;color:var(--muted)}

/* Section */
.ds2-section{margin-bottom:16px}
.ds2-section__head{
  font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text);margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.ds2-section__badge{
  font-size:11px;font-weight:700;
  padding:3px 10px;border-radius:8px;
  background:var(--ok);color:#fff;
}
.ds2-section__content{
  padding:14px 16px;border-radius:var(--radius);
  background:var(--card);border:1px solid var(--border);
  box-shadow:0 1px 4px rgba(0,0,0,.03);
}

/* Stats */
.ds2-stats{display:flex;flex-direction:column;gap:6px}
.ds2-stat{
  display:grid;grid-template-columns:40px 1fr 36px;gap:8px;align-items:center;
}
.ds2-stat__label{font-weight:800;font-size:11px;text-transform:uppercase;color:var(--muted)}
.ds2-stat__bar{
  height:12px;border-radius:6px;overflow:hidden;
  background:rgba(0,0,0,.06);
  background-image:linear-gradient(to right,rgba(255,255,255,.6) 0,rgba(255,255,255,.6) 1px,transparent 1px);
  background-size:33.33% 100%;
}
.ds2-stat__fill{height:100%;border-radius:6px;width:0;transition:width .6s cubic-bezier(.4,0,.2,1)}
.ds2-stat__val{font-weight:900;font-size:13px;text-align:right}
.ds2-stat--high .ds2-stat__val{color:#22c55e}
.ds2-stat--low .ds2-stat__val{color:#ef4444}

/* EV yield pills */
.ds2-ev-yield{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0}
.ds2-ev-pill{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:800;white-space:nowrap}

/* Tabs: перенос на новую строку, чтобы все кнопки (в т.ч. «Мои») были видны */
.ds2-tabs{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-top:14px;padding:4px 0;
  position:sticky;top:0;z-index:5;background:var(--soft);
}
.ds2-tab{
  padding:8px 12px;font:inherit;font-size:12px;font-weight:700;
  color:var(--muted);background:var(--soft);
  border:1px solid transparent;border-radius:var(--radius);
  cursor:pointer;white-space:nowrap;
  transition:color .12s,background .12s,border-color .12s;
}
.ds2-tab:hover{color:var(--text);background:var(--card);border-color:var(--border)}
.ds2-tab--active{color:var(--ok);background:rgba(34,197,94,.1);border-color:var(--ok)}

/* Panes */
.ds2-pane{display:none;padding:16px 0}
.ds2-pane--active{display:block}
.ds2-pane .ds2-section__content{margin-top:0}
.ds2-empty{font-size:13px;color:var(--muted);padding:12px 0;text-align:center}

/* Type Effectiveness */
.ds2-eff{
  display:flex;align-items:center;gap:10px;
  padding:8px 0;border-bottom:1px solid rgba(0,0,0,.04);
}
.ds2-eff:last-child{border-bottom:none}
.ds2-eff__label{
  font-size:14px;font-weight:900;min-width:32px;text-align:center;
  padding:4px 0;border-radius:6px;
}
.ds2-eff__label--x4{color:#dc2626;background:rgba(220,38,38,.08)}
.ds2-eff__label--x2{color:#f97316;background:rgba(249,115,22,.08)}
.ds2-eff__label--x05{color:#22c55e;background:rgba(34,197,94,.08)}
.ds2-eff__label--x025{color:#059669;background:rgba(5,150,105,.08)}
.ds2-eff__label--x0{color:#6b7280;background:rgba(107,114,128,.08)}
.ds2-eff__types{display:flex;flex-wrap:wrap;gap:4px}

/* Abilities */
.ds2-ability{
  padding:10px 12px;border-radius:10px;
  background:var(--card);border:1px solid var(--border);
  margin-bottom:6px;
}
.ds2-ability__head{display:flex;align-items:center;gap:6px}
.ds2-ability__name{font-size:14px;font-weight:800}
.ds2-ability__tag{
  padding:2px 6px;border-radius:4px;
  font-size:9px;font-weight:800;
  background:rgba(168,85,247,.1);color:#7c3aed;text-transform:uppercase;
}
.ds2-ability__desc{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.4}

/* Moves (Attacks) */
.ds2-moves-tabs{display:flex;gap:4px;margin-bottom:10px;flex-wrap:wrap}
.ds2-moves-tab{padding:6px 12px;font-size:12px;font-weight:600;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--muted);cursor:pointer;transition:all .15s}
.ds2-moves-tab:hover{color:var(--text);border-color:var(--primary)}
.ds2-moves-tab--active{color:#22c55e;border-color:#22c55e;background:rgba(34,197,94,.08)}
.ds2-moves-pane{display:none}
.ds2-moves-pane--active{display:block}
.ds2-moves-list{display:flex;flex-direction:column;gap:6px}
.ds2-move{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  padding:8px 12px;border-radius:8px;background:var(--card);border:1px solid var(--border);
  font-size:13px;
}
.ds2-move--tmtr{background:rgba(59,130,246,.03);border-color:rgba(59,130,246,.25)}
.ds2-move__name{font-weight:700;min-width:120px}
.ds2-move__tag{
  display:inline-flex;align-items:center;justify-content:center;
  margin-left:6px;padding:1px 6px;border-radius:999px;
  font-size:9px;font-weight:800;text-transform:uppercase;
  background:rgba(59,130,246,.12);color:#2563eb;
}
.ds2-move__tag--tr{background:rgba(234,179,8,.14);color:#92400e}
.ds2-move__name{font-weight:700;min-width:120px}
.ds2-move__meta{font-size:12px;color:var(--muted)}

/* Dex accordions (population / locations) */
.ds2-acc{margin-top:8px;border-radius:12px;border:1px solid var(--border);background:var(--card);padding:0}
.ds2-acc[open]{box-shadow:0 4px 14px rgba(15,23,42,.08)}
.ds2-acc__summary{
  list-style:none;cursor:pointer;padding:8px 12px;
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  border-bottom:1px solid rgba(148,163,184,.35);
}
.ds2-acc__summary::-webkit-details-marker{display:none}
.ds2-acc > .ds2-pop-grid,
.ds2-acc > .ds2-locations{padding:8px 10px 10px}

@media (max-width: 768px){
  .ds2{padding:10px 8px 16px}
  .ds2-hero{flex-direction:column;align-items:flex-start}
  .ds2-tabs{top:4px}
}

/* Evolution */
.ds2-evo-section{margin-bottom:12px}
.ds2-evo-title{font-size:11px;font-weight:800;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ds2-evo-card{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:10px;border:1px solid var(--border);
  background:var(--card);text-decoration:none;color:var(--text);
  font-size:13px;font-weight:700;transition:border-color .12s,transform .1s;
  margin:0 4px 4px 0;
}
.ds2-evo-card:hover{border-color:#22c55e;transform:translateY(-2px);text-decoration:none}
.ds2-evo-card--current{border-color:#22c55e;background:rgba(34,197,94,.05)}
.ds2-evo-card__num{font-size:11px;color:var(--muted);font-weight:700}
.ds2-evo-card__name{font-weight:800}
.ds2-evo-card__method{font-size:10px;color:var(--muted);font-weight:600}

/* Population grid */
.ds2-pop-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.ds2-pop-card{
  padding:12px 8px;border-radius:12px;
  background:var(--card);border:1px solid var(--border);
  text-align:center;transition:transform .1s;
}
.ds2-pop-card:hover{transform:translateY(-2px)}
.ds2-pop-card__icon{font-size:20px;margin-bottom:2px}
.ds2-pop-card__val{font-size:22px;font-weight:900}
.ds2-pop-card__label{font-size:9px;font-weight:700;text-transform:uppercase;color:var(--muted);letter-spacing:.04em;margin-top:2px}

/* Dex population tab (table) */
.dx2-pop-wrap{margin-bottom:16px}
.dx2-pop-table-scroll{max-height:calc(100vh - 220px);overflow:auto;border-radius:var(--radius);border:1px solid var(--border);background:var(--card)}
.dx2-pop-table{width:100%;border-collapse:collapse;font-size:13px}
.dx2-pop-head{position:sticky;top:0;background:var(--soft);z-index:1;padding:8px 10px;text-align:left;font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom:1px solid var(--border)}
.dx2-pop-head--num{width:64px}
.dx2-pop-head--sprite{width:70px;text-align:center}
.dx2-pop-head--total,.dx2-pop-head--eggs,.dx2-pop-head--shiny{text-align:right;width:72px}
.dx2-pop-row:nth-child(even){background:rgba(148,163,184,.04)}
.dx2-pop-cell{padding:8px 10px;border-bottom:1px solid rgba(148,163,184,.18);vertical-align:middle}
.dx2-pop-cell--num{font-weight:700;font-size:11px;color:var(--muted)}
.dx2-pop-cell--sprite{text-align:center}
.dx2-pop-sprite-link{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:var(--soft);border:1px solid var(--border);overflow:hidden}
.dx2-pop-sprite-link img{max-width:36px;max-height:36px;image-rendering:pixelated;transition:transform .15s}
.dx2-pop-sprite-link:hover img{transform:scale(1.08)}
.dx2-pop-sprite-ph{font-size:18px;opacity:.4}
.dx2-pop-cell--name{min-width:0}
.dx2-pop-name-link{font-weight:700;color:var(--text);text-decoration:none}
.dx2-pop-name-link:hover{text-decoration:underline}
.dx2-pop-types{margin-top:2px;display:flex;gap:3px}
.dx2-pop-cell--total,.dx2-pop-cell--eggs,.dx2-pop-cell--shiny{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.dx2-pop-cell--shiny{color:#facc15}
.dx2-pop-footer{padding:8px 4px;font-size:12px;color:var(--muted);text-align:center}
.dx2-pop-loading{animation:dx2-pop-pulse 1s infinite alternate}
@keyframes dx2-pop-pulse{from{opacity:.4}to{opacity:1}}

/* Locations */
.ds2-locations{display:flex;flex-direction:column;gap:4px}
.ds2-loc{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;border-radius:8px;
  background:rgba(34,197,94,.04);border:1px solid rgba(34,197,94,.1);
}
.ds2-loc__name{font-size:12px;font-weight:700}
.ds2-loc__level{font-size:11px;font-weight:600;color:var(--muted)}

/* My creatures */
.ds2-my-list{display:flex;flex-direction:column;gap:6px}
.ds2-my-card{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:10px;
  background:var(--card);border:1px solid var(--border);
}
.ds2-my-card__level{
  font-size:13px;font-weight:900;color:#22c55e;
  min-width:52px;
}
.ds2-my-card__name{font-size:14px;font-weight:800;flex:1}
.ds2-my-card__meta{font-size:11px;color:var(--muted);font-weight:600}

/* Responsive */
@media (max-width:480px){
  .ds2-hero{flex-direction:column;text-align:center;gap:10px;padding:16px 12px}
  .ds2-hero__info{text-align:center}
  .ds2-hero__types{justify-content:center}
  .ds2-hero__name{font-size:22px}
  .ds2-hero__img{width:100px;height:100px}
  .ds2-quick{grid-template-columns:repeat(2,1fr)}
  .ds2-pop-grid{grid-template-columns:repeat(2,1fr)}
  .ds2-pop-card__val{font-size:18px}
  .ds2-tab{padding:8px 10px;font-size:11px}
  .ds2-stat{grid-template-columns:36px 1fr 30px}
  .ds2-stat__label{font-size:10px}
  .ds2-stat__bar{height:10px}
  .ds2-stat__val{font-size:12px}
  .ds2-nav__btn{padding:4px 8px;font-size:11px}
}
@media (max-width:360px){
  .ds2-quick{grid-template-columns:1fr 1fr}
  .ds2-pop-grid{grid-template-columns:1fr 1fr}
  .ds2-hero__name{font-size:18px}
  .ds2-hero__img{width:80px;height:80px}
}

/* ═══════════════════════ Battle Switch Panel ═══════════════════════ */

.btl-switch{
  padding:16px 18px;
  border-top:1px solid var(--border);
  background:linear-gradient(180deg,#f3f4ff,#e5edff);
  border-radius:0;
}
.btl-switch__title{
  font-size:14px;
  font-weight:700;
  color:#111827;
  text-transform:none;
  letter-spacing:0;
  margin-bottom:10px;
}
.btl-switch__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:12px;
}
.btl-switch__form{min-width:0}
.btl-bench{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #d1d5db;
  background:#ffffff;
  cursor:pointer;
  transition:all .15s ease;
  width:100%;
  text-align:left;
  font:inherit;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  position:relative;
}
.btl-bench:hover:not(:disabled){
  border-color:var(--primary);
  box-shadow:0 2px 8px rgba(59,130,246,.15);
  transform:translateY(-1px);
}
.btl-bench:active:not(:disabled){transform:translateY(0)}
.btl-bench:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}
.btl-bench--fainted{
  opacity:.5;
  cursor:not-allowed;
  filter:grayscale(.5);
  background:var(--soft);
}
.btl-bench--fainted:hover:not(:disabled){
  border-color:var(--border);
  transform:none;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.btl-bench__sprite-wrap{
  position:relative;
  flex-shrink:0;
  align-self:center;
}
.btl-bench__top{
  display:flex;
  align-items:center;
  gap:6px;
  justify-content:flex-start;
}
.btl-bench__held-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:999px;
  background:rgba(15,23,42,0.9);
  box-shadow:0 1px 3px rgba(15,23,42,0.6);
  flex-shrink:0;
}
.btl-bench__held-icon img{
  max-width:14px;
  max-height:14px;
}
.btl-bench__dex-link{
  position:absolute;
  top:-2px;
  right:-2px;
  width:20px;
  height:20px;
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.5);
  border-radius:50%;
  color:#fff;
  text-decoration:none;
  z-index:2;
  opacity:.8;
  transition:all .15s;
}
.btl-bench__dex-link:hover{
  opacity:1;
  background:#3b82f6;
  transform:scale(1.1);
}
.btl-bench__sprite{
  width:48px;
  height:48px;
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges;
  image-rendering:pixelated;
  object-fit:contain;
  flex-shrink:0;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.1));
}
.btl-bench__info{
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
  gap:4px;
}
.btl-bench__name{
  font-size:14px;
  font-weight:800;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.3;
  display:flex;
  align-items:center;
  gap:4px;
}
.btl-bench__level{
  font-size:11px;
  color:var(--muted);
  font-weight:700;
  line-height:1.2;
}
.btl-bench__types{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:2px;
}
.btl-bench__types .b-badge{
  font-size:9px !important;
  padding:2px 6px !important;
  line-height:1.4;
  font-weight:700;
}
.btl-bench__hp{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-top:4px;
}
.btl-bench__bar{
  height:8px;
  width:100%;
  border-radius:4px;
  background:#e5e7eb;
  overflow:hidden;
  position:relative;
}
.btl-bench__bar span{
  display:block;
  height:100%;
  border-radius:4px;
  transition:width .3s ease;
  position:relative;
}
.btl-bench__bar span::after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(to bottom, rgba(255,255,255,.2) 0%, transparent 100%);
  border-radius:4px;
}
.btl-bench__hp-text{
  font-size:11px;
  color:#111827;
  font-weight:600;
  text-align:left;
  font-variant-numeric:tabular-nums;
}
.btl-bench__status{
  position:absolute;
  top:8px;
  right:8px;
  font-size:14px;
  font-weight:800;
  color:#ef4444;
  z-index:1;
}
.btl-bench__status--faint{color:#ef4444}
.btl-switch--forced{
  border-color:rgba(239,68,68,.4) !important;
  background:var(--card) !important;
  animation:forcedPulse 1.5s ease-in-out infinite;
}
.btl-switch--forced .btl-switch__title{
  color:#dc2626;
  font-weight:800;
  font-size:14px;
}
@keyframes forcedPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.2)}
  50%{box-shadow:0 0 0 6px rgba(239,68,68,.05)}
}

@media (max-width:640px){
  .btl-switch{
    padding:12px;
  }
  .btl-switch__title{
    font-size:12px;
    margin-bottom:10px;
  }
  .btl-switch__grid{
    grid-template-columns:1fr;
    gap:8px;
  }
  .btl-bench__sprite{
    width:40px;
    height:40px;
  }
  .btl-bench__info{
    flex:1;
    min-width:0;
  }
  .btl-bench__name{
    font-size:13px;
  }
  .btl-bench__hp{
    width:80px;
    flex-shrink:0;
  }
  .btl-bench__bar{
    height:7px;
  }
}

@media (max-width:480px){
  .btl-switch__grid{
    grid-template-columns:1fr;
  }
  .btl-bench{
    padding:8px;
    gap:8px;
  }
  .btl-bench__sprite{
    width:36px;
    height:36px;
  }
  .btl-bench__name{
    font-size:12px;
  }
  .btl-bench__hp{
    width:70px;
  }
}

/* ═══════════════════════ Vitrine Chat Sidebar ═══════════════════════ */

/* Body wrapper for side-by-side layout (main + chat) */
.v-body {
  display: flex;
  flex: 1;
  min-height: 0;
}
.v-body > main {
  flex: 1;
  min-width: 0;
}

/* Chat sidebar in vitrine */
.v-chat {
  width: 380px;
  flex-shrink: 0;
  min-width: 0;
  position: sticky;
  top: 62px;
  height: calc(100vh - 62px);
  border-left: 1px solid var(--border, #e2e8f0);
  background: var(--card, #fff);
  display: flex;
  flex-direction: column;
  z-index: 50;
}
.v-chat .chat-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.v-chat .chat-body {
  flex: 1;
  overflow-y: auto;
}

/* FAB for mobile chat toggle */
.v-chat-fab {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff;
  border: none;
  box-shadow: 0 4px 20px rgba(37, 99, 235, .4);
  font-size: 24px;
  cursor: pointer;
  z-index: 1000;
  transition: transform .15s, box-shadow .15s;
  align-items: center;
  justify-content: center;
}
.v-chat-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(37, 99, 235, .5);
}
.v-chat-fab:active { transform: scale(0.95); }

/* Leaderboard table on vitrine */
.v-lb-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.v-lb-tab { padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); font-size: 13px; cursor: pointer; font-weight: 600; }
.v-lb-tab:hover { border-color: rgba(37,99,235,.3); color: var(--primary); }
.v-lb-tab.active { background: rgba(37,99,235,.1); border-color: rgba(37,99,235,.4); color: var(--primary); }
.v-leaderboard {
  max-width: 600px;
  margin: 0 auto;
  background: var(--card, #fff);
  border-radius: 16px;
  border: 1px solid var(--border, #e2e8f0);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.v-lb-header {
  display: flex;
  padding: 10px 16px;
  background: rgba(0,0,0,.02);
  border-bottom: 1px solid var(--border, #e2e8f0);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--muted, #64748b);
  letter-spacing: .04em;
}
.v-lb-row {
  display: flex;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(0,0,0,.04);
  font-size: 14px;
  font-weight: 600;
  align-items: center;
  transition: background .1s;
}
.v-lb-row:last-child { border-bottom: none; }
.v-lb-row:hover { background: rgba(37,99,235,.03); }
.v-lb-row--top { background: rgba(251,191,36,.04); }
.v-lb-row--top:hover { background: rgba(251,191,36,.08); }
.v-lb-col--rank { width: 40px; text-align: center; font-weight: 900; }
.v-lb-col--name { flex: 1; }
.v-lb-col--level { width: 80px; text-align: center; color: var(--muted, #64748b); font-size: 13px; }
.v-lb-col--rating { width: 80px; text-align: right; font-weight: 800; color: var(--primary, #2563eb); }
.v-link { color: var(--primary, #2563eb); font-weight: 600; font-size: 13px; }
.v-link:hover { text-decoration: underline; }

/* ── Mobile: hide chat sidebar, show FAB ── */
@media (max-width: 1024px) {
  .v-chat {
    position: fixed;
    top: 0;
    right: -360px;
    width: 340px;
    height: 100vh;
    z-index: 2000;
    transition: right .3s cubic-bezier(.4,0,.2,1);
    box-shadow: -4px 0 24px rgba(0,0,0,.15);
  }
  .v-chat.v-chat--open {
    right: 0;
  }
  .v-chat-fab {
    display: flex;
  }
  /* Overlay when chat is open */
  .v-chat-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.3);
    z-index: 1999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
  }
  .v-chat-overlay--show {
    opacity: 1;
    pointer-events: auto;
  }
}
@media (max-width: 480px) {
  .v-chat { width: 100vw; right: -100vw; }
  .v-chat.v-chat--open { right: 0; }
  .v-chat-fab { bottom: 16px; right: 16px; width: 50px; height: 50px; font-size: 20px; }
  .v-leaderboard { border-radius: 12px; }
  .v-lb-row { padding: 8px 12px; font-size: 13px; }
  .v-lb-col--level { width: 60px; font-size: 11px; }
  .v-lb-col--rating { width: 60px; font-size: 12px; }
}

/* ════════════════════════════════════════════
   TRAINERS PAGE
   ════════════════════════════════════════════ */
.trainers-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
}

.trainers-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}
.trainers-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
}
.trainers-counters {
  display: flex;
  gap: 14px;
  font-size: 13px;
  color: var(--muted);
}
.trainers-counter { display: flex; align-items: center; gap: 5px; }
.trainers-counter__dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.trainers-counter__dot--total { background: var(--border); }
.trainers-counter__dot--online { background: #22c55e; }

/* Друзья на странице тренеров */
.trainers-friends {
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--soft);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.trainers-friends__title { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--text); }
.trainers-friends__requests { margin: 0 0 8px; font-size: 13px; }
.trainers-friends__link { color: var(--primary); text-decoration: none; }
.trainers-friends__link:hover { text-decoration: underline; }
.trainers-friends__empty { margin: 0; font-size: 13px; color: var(--muted); }
.trainers-friends__empty a { color: var(--primary); text-decoration: none; }
.trainers-friends-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.trainers-friends-list__item { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--card); border-radius: 8px; border: 1px solid var(--border); }
.trainers-friends-list__link { font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; }
.trainers-friends-list__link:hover { color: var(--primary); }
.trainers-friends-list__status { font-size: 11px; color: var(--muted); }
.trainers-friends-list__status--on { color: #22c55e; }
.trainers-friends-list__location { font-size: 11px; color: var(--muted); margin-left: 2px; }
/* Filters */
.trainers-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--soft);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.trainers-search-form {
  display: flex;
  gap: 6px;
}
.trainers-search-input {
  flex: 1;
  padding: 7px 12px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  outline: none;
  transition: border-color .15s;
}
.trainers-search-input:focus { border-color: var(--primary); }
.trainers-search-btn {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  cursor: pointer;
  font-size: 14px;
  transition: background .15s;
}
.trainers-search-btn:hover { background: var(--soft); }

.trainers-filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.trainers-filter-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  min-width: 80px;
}
.trainers-chip {
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: all .15s;
  font-weight: 500;
}
.trainers-chip:hover { border-color: var(--primary); color: var(--primary); }
.trainers-chip--active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* List */
.trainers-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.trainer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  color: var(--text);
  transition: background .12s, box-shadow .12s;
  border: 1px solid transparent;
}
.trainer-row:hover {
  background: var(--soft);
  border-color: var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.trainer-row--online {
  border-left: 3px solid #22c55e;
}
.trainer-row__rank {
  font-size: 12px;
  color: var(--muted);
  min-width: 32px;
  text-align: center;
  font-weight: 600;
}
.trainer-row__avatar {
  flex-shrink: 0;
}
.trainer-row__pic {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--border);
  font-weight: 700;
  font-size: 16px;
}
.trainer-row__pic--default {
  display: flex;
  align-items: center;
  justify-content: center;
}
.trainer-row__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.trainer-row__name {
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trainer-row__role {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 10px;
  display: inline-block;
  width: fit-content;
  letter-spacing: .02em;
}
.trainer-row__role--player {
  background: var(--soft);
  color: var(--muted);
  border: 1px solid var(--border);
}
.trainer-row__stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.trainer-row__stat {
  font-size: 12px;
  color: var(--muted);
}
.trainer-row__stat--rating {
  font-weight: 800;
  font-size: 15px;
}
.trainer-row__location {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.trainer-row__status {
  flex-shrink: 0;
  margin-left: 4px;
}
.trainer-row__dot {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
.trainer-row__dot--on { background: #22c55e; box-shadow: 0 0 4px #22c55e66; }
.trainer-row__dot--off { background: #cbd5e1; }

.trainers-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 15px;
}

/* Pagination */
.trainers-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 12px;
}
.trainers-page-btn {
  padding: 6px 16px;
  font-size: 13px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: opacity .15s;
}
.trainers-page-btn:hover { opacity: .85; }
.trainers-page-info {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

@media (max-width: 600px) {
  .trainers-page { padding: 10px; }
  .trainers-header { flex-direction: column; align-items: flex-start; }
  .trainer-row { padding: 8px 10px; gap: 8px; }
  .trainer-row__rank { min-width: 24px; font-size: 11px; }
  .trainer-row__pic { width: 30px; height: 30px; }
  .trainer-row__name { font-size: 13px; }
  .trainer-row__stat--rating { font-size: 13px; }
  .trainers-filter-label { min-width: auto; }
}

/* ═══════════ BATTLE: Ability & Item display ═══════════ */
.btl-hud__ability,
.btl-hud__meta {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  font-size:11px;
  color:var(--muted);
  margin-top:2px;
  line-height:1.3;
}
.btl-ability-tag,
.btl-item-tag {
  font-weight: 600;
  color: #94a3b8;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.btl-ability-val { color:#a78bfa; font-weight:500; }
.btl-item-val { color:#f59e0b; font-weight:500; margin-left:4px; }
.btl-item-icon{
  width:22px;
  height:22px;
  object-fit:contain;
  margin-left:4px;
  margin-right:2px;
  vertical-align:middle;
}

/* ═══════════ BATTLE: Hazard indicators ═══════════ */
.btl-hazards {
  display: flex;
  gap: 6px;
  position: absolute;
  z-index: 5;
  padding: 4px 8px;
  background: rgba(0,0,0,.35);
  border-radius: 12px;
  backdrop-filter: blur(4px);
}
.btl-hazards--foe {
  top: 6px;
  right: 6px;
}
.btl-hazards--ally {
  bottom: 6px;
  left: 6px;
}
.btl-hazard {
  font-size: 14px;
  cursor: help;
  display: flex;
  align-items: center;
  gap: 2px;
  font-weight: 700;
  color: #fbbf24;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.btl-hazard--rock { color: #b6a136; }
.btl-hazard--spikes { color: #a8a77a; }
.btl-hazard--toxic { color: #a33ea1; }
.btl-hazard--web { color: #c4b5fd; }

/* ═══════════ BATTLE: EXP & Level Up result ═══════════ */
.btl-result__exp {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(251, 191, 36, 0.1);
  border-radius: 10px;
  border: 1px solid rgba(251, 191, 36, 0.2);
  text-align: center;
}
.btl-result__exp-gain {
  font-size: 14px;
  color: #f59e0b;
  font-weight: 600;
}
.btl-result__levelup {
  font-size: 16px;
  font-weight: 700;
  color: #22c55e;
  animation: levelUpPulse 1s ease-in-out infinite;
}
@keyframes levelUpPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.btl-result__newmoves {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 4px;
}
.btl-result__newmove {
  font-size: 12px;
  padding: 3px 10px;
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border-radius: 8px;
  font-weight: 500;
}

/* ═══════════ BATTLE LOG: ability & hazard classes ═══════════ */
.btl-log__line--ability {
  border-left-color: #a78bfa;
  background: rgba(167, 139, 250, .06);
}
.btl-log__line--hazard {
  border-left-color: #b6a136;
  background: rgba(182, 161, 54, .06);
}
.btl-log__line--hazard-clear {
  border-left-color: #22c55e;
  background: rgba(34, 197, 94, .06);
}

/* ═══ PvP Waiting Indicator ═══ */
.btl-pvp-waiting {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 10px;
  margin-bottom: 10px;
}
.btl-pvp-waiting__spinner {
  width: 20px; height: 20px;
  border: 3px solid rgba(59, 130, 246, .2);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btl-pvp-waiting__text {
  color: #3b82f6;
  font-weight: 600;
  font-size: 14px;
}

/* ═══ PvP Wait Indicator (JS overlay) ═══ */
.pvp-wait-indicator {
  position: absolute; bottom: 80px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  background: rgba(30, 41, 59, 0.9);
  color: #93c5fd;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px; font-weight: 500;
  z-index: 20;
  white-space: nowrap;
}
.pvp-wait-indicator__spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(147, 197, 253, .3);
  border-top-color: #93c5fd;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.pvp-waiting { opacity: .5; pointer-events: none; }

/* ═══ U-turn Switch Prompt ═══ */
.btl-uturn-switch {
  background: rgba(251, 191, 36, .1);
  border: 1px solid rgba(251, 191, 36, .4);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.btl-uturn-switch__label {
  color: #b45309; font-weight: 600; font-size: 13px;
}

/* ═══ Volatile: Substitute, Binding, Semi-invulnerable ═══ */
.b-badge--v-substitute {
  background: rgba(168, 162, 158, .22);
  color: #78716c;
  border: 1px solid rgba(168, 162, 158, .4);
}
.b-badge--v-binding {
  background: rgba(239, 68, 68, .12);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, .3);
}
.b-badge--v-charging {
  background: rgba(59, 130, 246, .12);
  color: #2563eb;
  border: 1px solid rgba(59, 130, 246, .3);
}
.b-badge--v-semi {
  background: rgba(99, 102, 241, .12);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, .3);
  animation: pulse-badge 1.5s ease-in-out infinite;
}
@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

/* ═══ Battle log: binding, selfSwitch, substitute ═══ */
.btl-log__line--binding {
  border-left-color: #dc2626;
  background: rgba(239, 68, 68, .05);
}
.btl-log__line--selfswitch {
  border-left-color: #8b5cf6;
  background: rgba(139, 92, 246, .06);
}
.btl-log__line--substitute {
  border-left-color: #78716c;
  background: rgba(168, 162, 158, .06);
}
.btl-log__line--charge {
  border-left-color: #2563eb;
  background: rgba(59, 130, 246, .06);
}
.btl-log__line--protect {
  border-left-color: #22c55e;
  background: rgba(34, 197, 94, .05);
}
.btl-log__line--field {
  border-left-color: #8b5cf6;
  background: rgba(139, 92, 246, .05);
}

/* ═══ Field badges: Trick Room, Tailwind ═══ */
.b-badge--field-trickroom {
  background: rgba(139, 92, 246, .15) !important;
  color: #7c3aed !important;
  border: 1px solid rgba(139, 92, 246, .3);
}
.b-badge--field-tailwind {
  background: rgba(14, 165, 233, .12) !important;
  color: #0284c7 !important;
  border: 1px solid rgba(14, 165, 233, .3);
}

/* ═══ Party: Pokeball Button & Action Menu ═══ */
.pm-card__sprite {
  position: relative;
}
.pm-pokeball {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 32px; height: 32px;
  background: rgba(255,255,255,.9);
  border: 2px solid var(--border, #e2e8f0);
  border-radius: 50%;
  padding: 2px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  transition: transform .15s, box-shadow .15s;
  z-index: 5;
}
.pm-held-icon{
  position:absolute;
  top:4px;
  right:4px;
  width:20px;
  height:20px;
  padding:0;
  border:none;
  border-radius:6px;
  background:rgba(15,23,42,0.8);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(15,23,42,0.4);
  z-index:6;
}
.pm-held-icon img{
  max-width:16px;
  max-height:16px;
}
.pm-held-icon:hover{
  background:rgba(37,99,235,0.9);
}
.pm-pokeball:hover {
  transform: scale(1.15);
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
  border-color: #ef4444;
}
.pm-pokeball img {
  width: 24px; height: 24px;
  image-rendering: pixelated;
}
.pm-card {
  position: relative;
}
/* Меню действий с покемоном: поверх модалки (fixed), не растягивает контент */
.pm-pokeball-menu {
  position: fixed;
  z-index: 10050;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 190px;
  max-height: min(70vh, 400px);
  overflow-y: auto;
  padding: 6px 0 8px;
  -webkit-overflow-scrolling: touch;
}
.pm-pokeball-menu__title{
  padding: 8px 14px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.pm-pokeball-menu__item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.pm-pokeball-menu__item:hover {
  background: var(--soft);
}
.pm-pokeball-menu__item--lead {
  color: var(--ok, #16a34a);
}
.pm-pokeball-menu__item--lead:hover {
  background: rgba(34, 197, 94, .1);
}
.pm-pokeball-menu__item--nursery {
  color: var(--primary);
}
.pm-pokeball-menu__item--nursery:hover {
  background: var(--primary-weak);
}
.pm-pokeball-menu__item--release {
  color: var(--danger, #dc2626);
}
.pm-pokeball-menu__item--release:hover {
  background: rgba(239, 68, 68, .1);
}

/* ═══ Battle: Run button ═══ */
.btl-act--run {
  background: rgba(34, 197, 94, .12);
  color: #22c55e;
  border-color: rgba(34, 197, 94, .3);
}
.btl-act--run:hover:not(:disabled) {
  background: rgba(34, 197, 94, .25);
}

/* ═══ Battle result: drops ═══ */
.btl-result__drops {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px;
  justify-content: center;
}
.btl-result__drop {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px; font-weight: 500;
  background: rgba(168, 85, 247, .15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, .3);
}

/* ═══════════════════════════════════════════════════════════════════════
   Quest Reward Popup (in-game overlay)
   ═══════════════════════════════════════════════════════════════════════ */

.rp-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.65);
  animation: rp-fadeIn 0.3s ease;
}
.rp-box {
  background: linear-gradient(135deg, #1e1b4b, #312e81);
  border: 2px solid #818cf8;
  border-radius: 20px;
  padding: 32px 40px;
  text-align: center;
  max-width: 380px;
  width: 90%;
  box-shadow: 0 0 60px rgba(129,140,248,0.3), 0 0 120px rgba(129,140,248,0.1);
  animation: rp-popIn 0.4s ease;
}
.rp-icon {
  font-size: 56px;
  margin-bottom: 8px;
  animation: rp-bounce 0.6s ease;
}
.rp-title {
  font-size: 22px;
  font-weight: 800;
  color: #fbbf24;
  margin-bottom: 4px;
  text-shadow: 0 2px 8px rgba(251,191,36,0.3);
}
.rp-subtitle {
  font-size: 14px;
  color: #a5b4fc;
  margin-bottom: 16px;
}
.rp-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.rp-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  color: #e0e7ff;
  padding: 10px 16px;
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
}
.rp-item strong {
  color: #fbbf24;
}
.rp-btn {
  display: inline-block;
  padding: 12px 36px;
  font-size: 16px;
  font-weight: 700;
  color: #1e1b4b;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(251,191,36,0.4);
  transition: transform 0.15s;
}
.rp-btn:hover {
  transform: scale(1.05);
}

@keyframes rp-fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes rp-popIn   { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes rp-bounce  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ═══════════════════════ Breeding System ═══════════════════════ */

/* Gender badges (shared) */
.breed-gender{font-weight:900;font-size:13px;margin-left:2px}
.breed-gender--m{color:#3b82f6}
.breed-gender--f{color:#ec4899}
.breed-gender--busy{opacity:.6;color:#94a3b8 !important}

/* Eggs in inventory (Nursery) */
.npc-eggs{margin-bottom:14px;padding:10px 12px;border-radius:12px;background:var(--card);border:1px solid var(--border)}
.npc-eggs__title{font-size:13px;font-weight:800;margin:0 0 10px;color:var(--text)}
.npc-eggs__list{display:flex;flex-wrap:wrap;gap:10px}
.npc-egg-card{
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  border-radius:10px;border:1px solid var(--border);background:var(--bg)
}
.npc-egg-card__icon{font-size:24px}
.npc-egg-card__info{display:flex;flex-direction:column;gap:2px;flex:1}
.npc-egg-card__name{font-weight:700;font-size:13px}
.npc-egg-card__countdown,.npc-egg-card__status{font-size:12px;color:var(--muted)}
.npc-egg-card__status--ready{color:var(--success);font-weight:700}
.npc-egg-card__collect{
  padding:6px 12px;border-radius:8px;border:none;
  background:var(--primary);color:#fff;font-weight:700;cursor:pointer;font-size:12px
}
.npc-egg-card__collect:hover{opacity:.9}

/* Breeding tag */
.breed-tag{font-size:11px;margin-left:4px}
.breed-tag--active{animation:breed-pulse 1.5s ease infinite}
@keyframes breed-pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* Row states */
.npc-poke-row--breeding{opacity:.6;border-left:3px solid #ec4899}
.npc-box-card--breeding{opacity:.55;pointer-events:none}
.npc-box-card__breed-badge{
  position:absolute;top:2px;right:2px;font-size:12px;
  animation:breed-pulse 1.5s ease infinite;
}

/* Party card breeding status */
.pm-card__breed-status{
  font-size:11px;font-weight:700;color:#ec4899;
  padding:2px 8px;border-radius:6px;
  background:rgba(236,72,153,.08);
  display:inline-block;margin-bottom:2px;
  animation:breed-pulse 2s ease infinite;
}

/* Breed tab section */
.breed-section{padding:4px 0}
.breed-section__title{
  font-size:13px;font-weight:800;text-transform:uppercase;
  color:var(--muted);letter-spacing:.04em;margin-bottom:8px;padding:8px 0 4px;
  border-bottom:1px solid var(--border);
}

/* Info box */
.breed-info{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px;border-radius:12px;
  background:rgba(236,72,153,.05);border:1px solid rgba(236,72,153,.15);
  margin-bottom:12px;
}
.breed-info__icon{font-size:28px;flex-shrink:0}
.breed-info__text{font-size:12px;line-height:1.5;color:var(--text)}
.breed-info__text strong{color:#ec4899}

/* Species picker */
.breed-species-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
  gap:6px;margin-bottom:12px;
}
.breed-species-btn{
  display:flex;flex-direction:column;align-items:center;
  padding:8px 4px;border-radius:10px;border:2px solid var(--border);
  background:var(--card);cursor:pointer;text-align:center;
  transition:border-color .15s,transform .1s;font:inherit;
}
.breed-species-btn:hover{border-color:rgba(236,72,153,.3);transform:translateY(-2px)}
.breed-species-btn--active{border-color:#ec4899;background:rgba(236,72,153,.05)}
.breed-species-btn__sprite{
  width:48px;height:48px;image-rendering:pixelated;object-fit:contain;
}
.breed-species-btn__name{font-size:10px;font-weight:800;margin-top:2px;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.breed-species-btn__count{font-size:9px;color:var(--muted);font-weight:700}

/* Pair preview */
.breed-pair{
  display:flex;align-items:flex-start;gap:8px;justify-content:center;
  padding:12px 0;
}
.breed-pair__slot{
  flex:1;max-width:200px;text-align:center;
  padding:8px;border-radius:10px;border:1px solid var(--border);background:var(--card);
}
.breed-pair__label{font-size:11px;font-weight:800;color:var(--muted);margin-bottom:6px}
.breed-pair__empty{font-size:12px;color:var(--muted);padding:8px 0}
.breed-pair__heart{font-size:24px;padding-top:20px;flex-shrink:0}
.breed-pair__options{display:flex;flex-direction:column;gap:4px}

/* Sort bar above pair slots */
.breed-sort{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.breed-sort__label{font-size:11px;font-weight:700;color:var(--muted)}
.breed-sort__btn{padding:4px 10px;border-radius:6px;border:1px solid var(--border);background:var(--bg);font-size:11px;cursor:pointer;font:inherit}
.breed-sort__btn:hover{border-color:rgba(236,72,153,.4);background:rgba(236,72,153,.06)}
.breed-sort__btn--active{border-color:#ec4899;background:rgba(236,72,153,.12);font-weight:700}

/* Individual creature option */
.breed-opt{
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 10px;border-radius:8px;border:1px solid var(--border);
  background:transparent;cursor:pointer;font:inherit;
  transition:border-color .12s,background .12s;text-align:left;
}
.breed-opt:hover{border-color:rgba(236,72,153,.3);background:rgba(236,72,153,.03)}
.breed-opt--selected{border-color:#ec4899;background:rgba(236,72,153,.08)}
.breed-opt__name{font-size:12px;font-weight:700}
.breed-opt__right{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.breed-opt__meta{font-size:10px;color:var(--muted);font-weight:600}
.breed-opt__iv{font-size:9px;color:var(--muted);font-family:monospace}

/* Egg preview */
.breed-egg-preview{
  text-align:center;padding:8px 0;
  font-size:13px;font-weight:700;color:#ec4899;
}
.breed-egg-preview__icon{font-size:20px;margin-right:4px}

/* Start button */
.breed-start-btn{margin-top:8px;width:100%}

/* Active breeding cards */
/* Active breeding section */
.breed-active-section{
  margin-bottom:16px;
}
.breed-active-section__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.breed-active-section__title{
  font-size:16px;
  font-weight:800;
  color:var(--text);
  margin:0;
}
.breed-active-section__count{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  background:rgba(0,0,0,.04);
  padding:2px 8px;
  border-radius:10px;
}
.breed-active-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:10px;
  max-height:400px;
  overflow-y:auto;
  padding:4px;
  scrollbar-width:thin;
}
.breed-active-grid::-webkit-scrollbar{
  width:6px;
}
.breed-active-grid::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.2);
  border-radius:3px;
}
.breed-active-card{
  padding:10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  transition:all .15s;
}
.breed-active-card:hover{
  border-color:rgba(37,99,235,.3);
  box-shadow:0 2px 8px rgba(37,99,235,.1);
}
.breed-active-card--ready{
  border-color:rgba(34,197,94,.3);
  background:rgba(34,197,94,.02);
}
.breed-active-card__egg-icon{
  font-size:32px;
  line-height:1;
}
.breed-active-card__parents{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  font-size:11px;
  font-weight:700;
  color:var(--text);
  text-align:center;
  width:100%;
}
.breed-active-card__parent{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.breed-active-card__heart{font-size:16px}
.breed-active-card__egg{
  text-align:center;
  font-size:12px;
  font-weight:700;
  color:#ec4899;
  margin-top:6px;
}
.breed-active-card__time{
  text-align:center;
  font-size:13px;
  font-weight:800;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  font-family:'Courier New',monospace;
}
.breed-active-card__time--ready{
  color:#22c55e;
  animation:breed-pulse 1s ease infinite;
}
@keyframes breed-pulse{
  0%,100%{opacity:1}
  50%{opacity:.7}
}
.breed-active-card__actions{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:4px;
  width:100%;
}
.npc-action-btn--sm{
  padding:6px 12px;
  font-size:12px;
}

/* Danger button variant */
.npc-action-btn--danger{
  background:rgba(239,68,68,.08);color:#ef4444;border:1px solid rgba(239,68,68,.2);
}
.npc-action-btn--danger:hover{background:rgba(239,68,68,.15)}

/* Responsive */
@media (max-width:480px){
  .breed-species-list{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
  .breed-species-btn__sprite{width:36px;height:36px}
  .breed-species-btn__name{font-size:9px}
  .breed-pair{flex-direction:column;align-items:center}
  .breed-pair__slot{max-width:none;width:100%}
  .breed-pair__heart{padding-top:0;font-size:20px}
  .breed-active-grid{
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
    gap:8px;
  }
  .breed-active-card{padding:8px}
  .breed-active-card__egg-icon{font-size:28px}
  .breed-active-card__parents{font-size:10px}
  .breed-active-card__time{font-size:12px}
  .breed-info{flex-direction:column;text-align:center}
}

/* ═══════════════════════════════════════════════════════════════════
   TRADE SYSTEM (TRD)
   ═══════════════════════════════════════════════════════════════════ */
.trd{max-width:700px;margin:0 auto;padding:12px 0}
.trd-title{font-size:22px;font-weight:700;margin:0 0 16px;color:var(--text)}

/* Tabs */
.trd-tabs{display:flex;gap:4px;border-bottom:2px solid var(--border);margin-bottom:16px;padding-bottom:0}
.trd-tab{background:none;border:none;padding:8px 16px;font-size:14px;font-weight:600;color:var(--text-dim);cursor:pointer;border-bottom:3px solid transparent;transition:all .2s}
.trd-tab:hover{color:var(--text)}
.trd-tab--active{color:var(--accent,#e53935);border-bottom-color:var(--accent,#e53935)}
.trd-tab__count{display:inline-block;background:var(--accent,#e53935);color:#fff;font-size:11px;border-radius:9px;padding:1px 6px;margin-left:4px;min-width:18px;text-align:center}

/* Panes */
.trd-pane{display:none}
.trd-pane--active{display:block}

/* Empty state */
.trd-empty{text-align:center;padding:32px 16px;color:var(--text-dim);font-size:14px}

/* Trade card */
.trd-card{background:var(--card-bg,#1e1e2e);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:12px}
.trd-card__header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.trd-card__status{font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;text-transform:uppercase}
.trd-card__status--pending{background:#ff980033;color:#ff9800}
.trd-card__status--countered{background:#4caf5033;color:#4caf50}
.trd-card__with{font-size:13px;color:var(--text-dim)}
.trd-card__body{display:flex;align-items:center;gap:12px}
.trd-card__side{flex:1;min-width:0}
.trd-card__label{font-size:11px;color:var(--text-dim);margin-bottom:4px;font-weight:600;text-transform:uppercase}
.trd-card__poke{display:flex;align-items:center;gap:8px}
.trd-card__sprite{width:48px;height:48px;image-rendering:pixelated}
.trd-card__name{font-weight:600;font-size:14px}
.trd-card__meta{font-size:12px;color:var(--text-dim)}
.trd-card__coins{font-size:12px;color:#ffc107;margin-top:4px}
.trd-card__arrow{font-size:24px;color:var(--accent,#e53935);font-weight:700;flex-shrink:0}
.trd-card__waiting{font-size:13px;color:var(--text-dim);font-style:italic;padding:12px 0}
.trd-card__message{font-size:12px;color:var(--text-dim);margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.trd-card__actions{display:flex;gap:6px;margin-top:10px;justify-content:flex-end}

/* Buttons */
.trd-btn{padding:7px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .15s}
.trd-btn--primary{background:var(--accent,#e53935);color:#fff}
.trd-btn--primary:hover{filter:brightness(1.15)}
.trd-btn--primary:disabled{opacity:.5;cursor:not-allowed}
.trd-btn--ghost{background:transparent;color:var(--text-dim);border:1px solid var(--border)}
.trd-btn--ghost:hover{background:var(--border)}
.trd-btn--full{width:100%}
.trd-btn--danger{background:#f4433633;color:#f44336}
.trd-btn--danger:hover{background:#f4433655}

/* Form */
.trd-form{max-width:480px}
.trd-form__group{margin-bottom:14px;position:relative}
.trd-form__label{display:block;font-size:12px;font-weight:600;color:var(--text-dim);margin-bottom:4px;text-transform:uppercase}
.trd-form__input{width:100%;padding:9px 12px;border-radius:8px;border:1px solid var(--border);background:var(--card-bg,#1e1e2e);color:var(--text);font-size:14px;box-sizing:border-box}
.trd-form__input:focus{outline:none;border-color:var(--accent,#e53935)}
.trd-form__suggestions{position:absolute;top:100%;left:0;right:0;background:var(--card-bg,#1e1e2e);border:1px solid var(--border);border-radius:0 0 8px 8px;z-index:10;max-height:180px;overflow-y:auto}
.trd-suggestion{padding:8px 12px;cursor:pointer;font-size:13px}
.trd-suggestion:hover{background:var(--border)}
.trd-suggestion small{color:var(--text-dim)}

/* Creature selector */
.trd-form__creature-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;max-height:260px;overflow-y:auto;border:1px solid var(--border);border-radius:8px;padding:6px}
.trd-creature-opt{display:flex;flex-direction:column;align-items:center;padding:6px;border-radius:8px;border:2px solid transparent;background:none;cursor:pointer;transition:all .15s;text-align:center;color:var(--text)}
.trd-creature-opt:hover{background:var(--border)}
.trd-creature-opt--selected{border-color:var(--accent,#e53935);background:#e5393510}
.trd-creature-opt__sprite{width:40px;height:40px;image-rendering:pixelated}
.trd-creature-opt__name{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.trd-creature-opt__meta{font-size:10px;color:var(--text-dim)}

/* History */
.trd-history-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--border);font-size:13px}
.trd-history-row__status{font-size:12px;min-width:90px}
.trd-history-row__poke{color:var(--text-dim);font-size:12px;flex:1;text-align:right}
.trd-history-row__date{font-size:11px;color:var(--text-dim);min-width:80px;text-align:right}

/* Counter modal */
.trd-modal{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center}
.trd-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.trd-modal__content{position:relative;z-index:1;background:var(--card-bg,#1e1e2e);border-radius:14px;padding:18px;width:90%;max-width:440px;max-height:80vh;overflow-y:auto}
.trd-modal__title{font-size:16px;font-weight:700;margin-bottom:12px}
.trd-modal__creatures{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:6px;max-height:200px;overflow-y:auto}
.trd-modal__actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}

/* Room invites + open room button */
.trd-room-invites{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 14px;margin-bottom:14px;background:var(--primary-weak);border:1px solid rgba(37,99,235,.2);border-radius:var(--radius);}
.trd-room-invites__label{font-size:13px;font-weight:600;color:var(--text);}
.trd-room-invites__btn{flex-shrink:0;}
.trd-form__actions-row{display:flex;flex-direction:column;gap:10px;margin-top:14px;}
.trd-btn--room{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border:none;}
.trd-btn--room:hover{filter:brightness(1.08)}
.trd-btn--room:disabled{opacity:.5;cursor:not-allowed}

/* ═══════════════════════════════════════════════════════════════════
   SYNC TRADE ROOM (комната обмена в реальном времени)
   ═══════════════════════════════════════════════════════════════════ */
.trade-room-wrap{max-width:100%;padding:0;margin:0}
.trade-room{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.trade-room__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border);background:var(--soft)}
.trade-room__title{font-size:18px;font-weight:800;margin:0;color:var(--text)}
.trade-room__back{font-size:13px;font-weight:600;color:var(--primary)}
.trade-room__grid{display:grid;grid-template-columns:1fr 240px 1fr;gap:16px;align-items:stretch;min-height:320px;padding:16px}
.trade-room__side{display:flex;flex-direction:column;background:var(--soft);border:1px solid var(--border);border-radius:12px;overflow:hidden;min-height:0}
.trade-room__side--me{border-color:rgba(37,99,235,.25);background:rgba(37,99,235,.04)}
.trade-room__side--peer{border-color:rgba(16,185,129,.2);background:rgba(16,185,129,.04)}
.trade-room__header{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.trade-room__avatar{width:40px;height:40px;border-radius:10px;background:var(--border);background-size:cover;background-position:center;flex-shrink:0}
.trade-room__who{min-width:0}
.trade-room__name{font-weight:800;font-size:14px;color:var(--text);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trade-room__meta{font-size:12px;color:var(--muted)}
.trade-room__content{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px;min-height:0}
.trade-room__empty{text-align:center;color:var(--muted);font-size:13px;padding:20px 8px}
.trade-room__item{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--card);border:1px solid var(--border);border-radius:10px;transition:background .15s,border-color .15s}
.trade-room__item:hover{background:var(--soft)}
.trade-room__item-sprite{width:36px;height:36px;object-fit:contain;image-rendering:pixelated;border-radius:8px;background:var(--soft);flex-shrink:0}
.trade-room__item-meta{display:flex;flex-direction:column;min-width:0;flex:1}
.trade-room__item-name{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trade-room__item-lvl{font-size:11px;color:var(--muted)}
.trade-room__item-coin{font-size:20px}
.trade-room__item-qty{font-weight:800;color:var(--primary)}
.trade-room__item-remove{width:28px;height:28px;flex-shrink:0;border:none;background:var(--danger-weak);color:var(--danger);border-radius:8px;cursor:pointer;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.trade-room__item-remove:hover{background:var(--danger);color:#fff}
.trade-room__mid{display:flex;flex-direction:column;gap:10px;padding:10px;background:linear-gradient(180deg,rgba(255,244,250,.6),rgba(250,232,255,.4));border:1px solid rgba(236,72,153,.2);border-radius:12px;align-items:stretch;justify-content:flex-start}
.trade-room__info{font-size:12px;font-weight:600;color:var(--text);text-align:center;padding:6px 8px;background:rgba(236,72,153,.08);border-radius:8px;border:1px dashed rgba(236,72,153,.3)}
.trade-room__actions{display:flex;flex-direction:column;gap:8px}
.trade-room__btn{width:100%;justify-content:center;font-weight:700}
.trade-room__btn--confirm.trade-room__btn--confirmed{background:var(--ok);border-color:rgba(22,163,74,.5);color:#fff}
.trade-room__status{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.trade-room__pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--soft);color:var(--text);border:1px solid var(--border)}
.trade-room__pill.ok{background:var(--ok-weak);color:var(--ok);border-color:rgba(22,163,74,.3)}
.trade-room__pill.no{background:var(--danger-weak);color:var(--danger);border-color:rgba(220,38,38,.2)}
.trade-room__pill b{color:var(--primary);margin-left:4px}
.trade-room__done{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.92);z-index:10;border-radius:var(--radius)}
.trade-room__done-inner{text-align:center;padding:24px}
.trade-room__done-text{font-size:18px;font-weight:800;color:var(--ok);margin:0 0 16px}
.trade-room-picker{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px}
.trade-room-picker__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.trade-room-picker__box{position:relative;z-index:1;background:var(--card);border-radius:var(--radius);padding:18px;width:100%;max-width:360px;max-height:85vh;overflow-y:auto;border:1px solid var(--border);box-shadow:var(--shadow)}
.trade-room-picker__title{font-size:16px;font-weight:800;margin-bottom:12px}
.trade-room-picker__label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:4px}
.trade-room-picker__input{margin-bottom:12px}
.trade-room-picker__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;max-height:240px;overflow-y:auto;margin-bottom:12px}
.trade-room-picker__opt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px;border-radius:10px;border:1px solid var(--border);background:var(--soft);cursor:pointer;font-size:12px;font-weight:600;color:var(--text);transition:all .15s}
.trade-room-picker__opt:hover{background:var(--primary-weak);border-color:var(--primary)}
.trade-room-picker__opt img{width:40px;height:40px;object-fit:contain;image-rendering:pixelated}
.trade-room-picker__cancel,.trade-room-picker__submit{margin-top:4px;width:100%}
.trade-room-picker__submit{margin-bottom:8px}
@media (max-width:768px){
  .trade-room__grid{grid-template-columns:1fr;grid-template-rows:auto auto auto;min-height:0}
  .trade-room__side{min-height:200px}
  .trade-room__content{max-height:180px}
}

/* ═══════════════════════════════════════════════════════════════════
   BUFF / VIP / EVENT SYSTEM
   ═══════════════════════════════════════════════════════════════════ */

/* Server ticker (scrolling marquee) */
.server-ticker-wrap{
  background:linear-gradient(90deg,#ff6f0015,#ffc10715,#4caf5015);
  border-bottom:1px solid var(--border);
  padding:6px 12px;
  overflow:hidden;
  position:relative;
  z-index:100;
  line-height:1.4;
  font-size:13px;
  color:var(--text);
}
.server-ticker{
  display:inline-block;
  white-space:nowrap;
  padding-right:100%;
  animation:server-ticker-scroll 40s linear infinite;
}
@keyframes server-ticker-scroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.server-ticker-wrap:hover .server-ticker{
  animation-play-state:paused;
}

/* Event banner (legacy, kept for compatibility) */
.buff-banner{background:linear-gradient(90deg,#ff6f0025,#ffc10725,#4caf5025);border-bottom:1px solid var(--border);padding:8px 16px;overflow-x:auto;white-space:nowrap;position:relative;z-index:100;-webkit-overflow-scrolling:touch}
.buff-banner__inner{display:flex;align-items:center;gap:14px;max-width:1200px;margin:0 auto}
.buff-banner__icon{font-size:26px;flex-shrink:0}
.buff-banner__content{flex:1;display:flex;flex-direction:column;gap:2px}
.buff-banner__title{font-size:14px;font-weight:800;color:var(--text)}
.buff-banner__desc{font-size:12px;color:var(--muted)}
.buff-banner__close{background:none;border:none;font-size:18px;cursor:pointer;color:var(--muted);padding:4px 8px;flex-shrink:0;line-height:1}
.buff-banner__close:hover{color:var(--text)}

/* VIP badge — always visible when VIP active */
.vip-badge-float{
  position:fixed;
  top:12px;
  right:60px;
  z-index:97;
  padding:6px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background:linear-gradient(135deg,#fde68a,#f97316);
  border:1px solid rgba(248,181,0,.5);
  color:#78350f;
  box-shadow:0 2px 12px rgba(245,158,11,.3);
}
@media (max-width:768px){
  .vip-badge-float{top:8px;right:52px;padding:4px 10px;font-size:11px}
}

/* Buff toggle button — compact, visible only when buffs exist */
.buff-toggle-btn{
  display:flex;
  position:fixed;
  top:12px;
  right:12px;
  width:40px;
  height:40px;
  border-radius:50%;
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
  color:#78350f;
  border:1px solid rgba(251,191,36,.5);
  font-size:18px;
  cursor:pointer;
  z-index:98;
  box-shadow:0 2px 12px rgba(245,158,11,.35);
  transition:transform .15s, box-shadow .15s;
}
.buff-toggle-btn:hover{transform:scale(1.05); box-shadow:0 4px 16px rgba(245,158,11,.45)}
.buff-toggle-btn.buff-toggle-btn--active{background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff}
.buff-toggle-btn--visible{display:flex !important; align-items:center; justify-content:center}
@media (max-width:768px){
  .buff-toggle-btn{top:62px;right:8px;width:36px;height:36px;font-size:16px}
}

/* Compact buffs panel — hidden by default, toggled via button */
.buff-panel{
  background:var(--card);
  border:1px solid var(--border);
  padding:0;
  position:fixed;
  z-index:220;
  display:none;
  top:56px;
  right:12px;
  max-width:min(360px,calc(100% - 24px));
  max-height:min(85vh, 520px);
  border-radius:14px;
  box-shadow:0 10px 30px rgba(15,23,42,.35);
  overflow:hidden;
}
.buff-panel.buff-panel--open{display:flex;flex-direction:column}
.buff-panel__inner{
  max-width:100%;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0;
  overflow-y:auto;
  flex:1;
  min-height:0;
}
.buff-panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.buff-panel__title{
  font-size:16px;
  font-weight:800;
  color:var(--text);
  margin:0;
  letter-spacing:.02em;
}
.buff-panel__close{
  width:32px;
  height:32px;
  border:none;
  background:transparent;
  border-radius:8px;
  font-size:18px;
  color:var(--muted);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s, color .15s;
}
.buff-panel__close:hover{background:var(--border); color:var(--text)}
.buff-panel__section{
  display:block;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
}
.buff-panel__section:last-child{border-bottom:none}
.buff-panel__section-title{
  display:block;
  font-size:13px;
  font-weight:700;
  color:var(--text);
  margin:0 0 8px 0;
}
.buff-panel__section-body{
  font-size:13px;
  color:var(--text);
}
.buff-panel__section-body.buff-panel__events{display:flex;flex-direction:column;gap:8px}
.buff-panel__muted{
  margin:0;
  font-size:13px;
  color:var(--muted);
}
.buff-panel__rows{display:flex;flex-direction:column;gap:6px}
.buff-panel__row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  font-size:13px;
}
.buff-panel__row.buff-panel__item{padding:8px 10px;background:var(--soft);border-radius:8px;border:1px solid var(--border)}
.buff-panel__row.buff-panel__vip{padding:8px 10px;border-radius:8px;background:linear-gradient(135deg,#fde68a,#f97316);border:1px solid rgba(248,181,0,.5);font-weight:700;color:#78350f}
.buff-panel__icon{font-size:16px;flex-shrink:0;line-height:1}
.buff-panel__vip-text{white-space:nowrap}
.buff-panel__name{flex:1;min-width:0;font-weight:600;color:var(--text)}
.buff-panel__val{font-size:12px;color:var(--muted);font-weight:600}
.buff-panel__exp{font-size:12px;color:var(--muted)}
.buff-panel__event-card{
  padding:10px 12px;
  background:var(--soft);
  border:1px solid var(--border);
  border-radius:10px;
}
.buff-panel__event-name{font-weight:600;color:var(--text);margin-bottom:4px}
.buff-panel__event-effect{font-size:13px;color:var(--text)}
.buff-panel__event-remaining{font-size:13px;color:var(--primary);margin-top:2px}
.buff-panel__pill{
  width:26px;
  height:26px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  background:var(--soft);
  border:1px solid var(--border);
  cursor:default;
}

@media (max-width:768px){
  .buff-toggle-btn{display:none !important}
  .buff-panel.buff-panel--mobile.buff-panel--open{
    top:0;
    left:0;
    right:0;
    bottom:0;
    max-width:100%;
    max-height:100%;
    border-radius:0;
    border: none;
  }
  .buff-panel.buff-panel--mobile .buff-panel__inner{
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}

/* ═══ Mobile responsiveness for trade ═══ */
@media(max-width:600px){
  .trd-card__body{flex-direction:column;gap:6px}
  .trd-card__arrow{transform:rotate(90deg);font-size:18px}
  .trd-form__creature-list{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}
  .trd-modal__creatures{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
  .trd-tabs{overflow-x:auto;flex-wrap:nowrap}
  .trd-tab{padding:6px 12px;font-size:13px;white-space:nowrap}
  .trd-history-row{flex-wrap:wrap;gap:4px;font-size:12px}
  .buff-banner{
    padding:8px 12px;
    padding-top:calc(8px + env(safe-area-inset-top, 0))
  }
  .buff-banner__inner{gap:10px}
  .buff-banner__icon{font-size:22px}
  .buff-banner__title{font-size:13px}
  .buff-banner__desc{font-size:11px}
  .buff-event__desc{display:none}
}

/* ═══════════════════════════════════════════════════════════════════
   DONATION / PREMIUM SHOP (DN) — единый стиль через переменные
   ═══════════════════════════════════════════════════════════════════ */
.dn{max-width:820px;margin:0 auto;padding:0 0 28px;background:var(--soft);border-radius:var(--radius);border:1px solid var(--border);box-shadow:0 2px 12px rgba(0,0,0,.04)}

/* Header */
.dn-header{padding:20px 20px 16px;background:var(--card);border-radius:var(--radius) var(--radius) 0 0;border-bottom:1px solid var(--border)}
.dn-header__top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.dn-header__title{font-size:22px;font-weight:800;margin:0;color:var(--text);display:flex;align-items:center;gap:8px}
.dn-header__title-icon{font-size:26px;line-height:1}
.dn-vip-badge{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:4px}
.dn-vip-badge--1{background:var(--soft);color:var(--muted);border:1px solid var(--border)}
.dn-vip-badge--2{background:#fef9c3;color:#a16207;border:1px solid #fde047}
.dn-vip-badge--3{background:#f3e8ff;color:#7c3aed;border:1px solid #e9d5ff}
.dn-vip-badge small{font-weight:400;opacity:.8;margin-left:4px}
.dn-header__balance-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:10px}
.dn-balance{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dn-balance__label{font-size:13px;color:var(--muted);font-weight:600}
.dn-balance__item{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;background:var(--soft);border:1px solid var(--border);border-radius:10px;font-size:14px;font-weight:700;color:var(--text)}
.dn-balance__item--coins{background:var(--card);border-color:var(--border)}
.dn-balance__icon{font-size:16px}
.dn-balance__val{min-width:28px;text-align:right}
.dn-header__rate{font-size:12px;color:var(--muted)}
.dn-topup-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:12px;border:none;background:var(--ok);color:#fff;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 2px 8px rgba(22,163,74,.35);transition:transform .15s,box-shadow .15s}
.dn-topup-btn:hover{background:#16a34a;transform:translateY(-1px);box-shadow:0 4px 12px rgba(22,163,74,.4)}
.dn-topup-btn__icon{font-size:18px}
.dn-quicklinks{display:flex;gap:12px;flex-wrap:wrap}
.dn-quicklink{font-size:12px;color:var(--muted);text-decoration:underline;transition:color .15s}
.dn-quicklink:hover{color:var(--text)}

/* Search */
.dn-search-wrap{padding:12px 20px 0}
.dn-search{width:100%;max-width:100%;padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:var(--card);font-size:14px;color:var(--text);outline:none;transition:border-color .15s}
.dn-search::placeholder{color:var(--muted)}
.dn-search:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-weak)}

/* FreeKassa topup (modal) */
.dn-topup-modal{position:fixed;inset:0;z-index:130;display:none}
.dn-topup-modal--open{display:block}
.dn-topup-modal__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.4);backdrop-filter:blur(4px)}
.dn-topup-modal__box{position:relative;max-width:520px;margin:32px auto;padding:0 16px}
.dn-topup-modal__close{position:absolute;top:10px;right:20px;z-index:2;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--soft);border:none;border-radius:50%;color:var(--muted);font-size:20px;cursor:pointer;transition:background .15s,color .15s}
.dn-topup-modal__close:hover{background:var(--border);color:var(--text)}
.dn-topup{padding:24px 22px 22px;border-radius:var(--radius);background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow)}
.dn-topup__title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:4px}
.dn-topup__rate{font-size:13px;color:var(--muted);margin-bottom:14px}
.dn-topup__form{margin-bottom:18px}
.dn-topup__label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}
.dn-topup__field{display:flex;align-items:center;border:1px solid var(--border);border-radius:10px;background:var(--soft);overflow:hidden}
.dn-topup__field input{flex:1;padding:10px 12px;border:none;background:transparent;font-size:15px;outline:none}
.dn-topup__field-suffix{padding:0 12px;font-size:14px;color:var(--muted)}
.dn-topup__summary{font-size:12px;color:var(--muted);margin-top:8px}
.dn-topup__actions{margin-top:14px}
.dn-topup__submit{padding:12px 20px;border-radius:12px;border:none;background:var(--ok);color:#fff;font-size:14px;font-weight:700;cursor:pointer;width:100%;transition:opacity .15s}
.dn-topup__submit:hover{opacity:.95}
.dn-topup__subheading{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:10px}
.dn-topup__packs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.dn-topup-pack{flex:1 1 140px;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--soft);color:var(--text);font-size:12px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:2px;transition:background .15s,border-color .15s}
.dn-topup-pack:hover{background:var(--card);border-color:var(--border)}
.dn-topup-pack__label{font-weight:700}
.dn-topup-pack__amount{font-size:12px;color:var(--muted)}
.dn-topup-pack__desc{font-size:11px;color:var(--muted)}
.dn-topup__hint{font-size:11px;color:var(--muted);line-height:1.5}
.dn-topup__hint a{color:var(--primary);text-decoration:underline}
.dn-topup--highlight{box-shadow:0 0 0 2px rgba(22,163,74,.4)}

/* Tabs */
.dn-tabs{display:flex;gap:4px;overflow-x:auto;padding:0 20px 0;margin-bottom:12px;border-bottom:1px solid var(--border);-webkit-overflow-scrolling:touch}
.dn-tabs::-webkit-scrollbar{height:4px}
.dn-tab{background:none;border:none;padding:10px 14px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;white-space:nowrap;display:flex;align-items:center;gap:5px}
.dn-tab:hover{color:var(--text)}
.dn-tab--active{color:var(--text);border-bottom-color:var(--primary)}
.dn-tab__icon{font-size:15px}
.dn-tab__count{font-size:10px;background:var(--border);color:var(--muted);padding:2px 6px;border-radius:999px}

/* Panes */
.dn-pane{display:none;padding:0 20px 24px}
.dn-pane--active{display:block}
.dn-pane__desc{font-size:13px;color:var(--muted);margin-bottom:14px}

/* VIP comparison table */
.dn-vip-compare{display:grid;grid-template-columns:120px 1fr;gap:1px;background:var(--border);border-radius:12px;overflow:hidden;margin-bottom:16px;font-size:12px}
.dn-vip-compare__row{display:contents}
.dn-vip-compare__row > span{padding:8px 10px;background:var(--card);color:var(--text)}
.dn-vip-compare__header > span{font-weight:700;background:var(--soft);color:var(--text)}
.dn-vip-compare__label{text-align:left!important;font-weight:600;color:var(--muted)}
.dn-vip-tier--1{color:var(--muted)}
.dn-vip-tier--2{color:#a16207}
.dn-vip-tier--3{color:#7c3aed}

/* VIP duration pills */
.dn-vip-durations{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.dn-dur-btn{padding:6px 14px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.dn-dur-btn:hover{background:var(--soft);border-color:var(--border)}
.dn-dur-btn--active{background:var(--soft);border-color:var(--primary);color:var(--text)}

/* Card grid */
.dn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.dn-grid--vip{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}

/* Card */
.dn-card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;display:flex;flex-direction:column;align-items:center;text-align:center;transition:all .2s;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.dn-card:hover{border-color:var(--border);box-shadow:0 6px 16px rgba(0,0,0,.08)}
.dn-card--tier-1{border-color:var(--border)}
.dn-card--tier-2{border-color:#fde04760}
.dn-card--tier-3{border-color:#e9d5ff80}

/* Badges */
.dn-card__badge{position:absolute;top:8px;left:8px;font-size:9px;font-weight:700;padding:2px 6px;border-radius:6px;color:#fff;text-transform:uppercase;letter-spacing:.03em}
.dn-card__sale{position:absolute;top:8px;right:8px;font-size:11px;font-weight:800;color:var(--danger);background:#fef2f2;padding:2px 6px;border-radius:6px}
.dn-card__limited{position:absolute;top:30px;left:8px;font-size:9px;font-weight:600;color:#b45309;background:#fffbeb;padding:2px 6px;border-radius:6px}

/* Card content */
.dn-card__icon{font-size:36px;margin:10px 0 6px;min-height:48px;display:flex;align-items:center;justify-content:center;background:var(--soft);border-radius:12px;padding:8px;overflow:hidden}
.dn-card__icon img{width:40px;height:40px;object-fit:contain}
.dn-card__name{font-size:14px;font-weight:700;margin-bottom:4px;line-height:1.3;color:var(--text)}
.dn-card__tags{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-bottom:4px}
.dn-card__tag{font-size:10px;font-weight:600;padding:2px 8px;border-radius:999px}
.dn-card__tag--cat{background:#f3e8ff;color:#7c3aed}
.dn-card__desc{font-size:11px;color:var(--muted);line-height:1.35;margin-bottom:8px;flex:1;min-height:32px}
.dn-card__stock{font-size:11px;color:var(--muted);margin-bottom:8px}
.dn-card__stock--inf{color:var(--muted)}
.dn-card__footer{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin-top:auto;padding-top:8px;border-top:1px solid var(--border);flex-wrap:wrap}
.dn-card__qty-wrap{display:flex;align-items:center;gap:6px}
.dn-card__qty-label{font-size:11px;color:var(--muted);white-space:nowrap}
.dn-card__qty{width:52px;padding:4px 6px;font-size:12px;border:1px solid var(--border);border-radius:6px;background:var(--card)}
.dn-detail-popup__qty-wrap{margin:10px 0}
.dn-detail-popup__qty-label{margin-right:6px;font-size:12px;color:var(--muted)}
.dn-detail-popup__qty{width:60px;padding:6px 8px;font-size:13px;border:1px solid var(--border);border-radius:8px}
.inv-detail__qty-wrap{margin:8px 0;display:flex;align-items:center;gap:8px}
.inv-detail__qty-label{font-size:12px;color:var(--muted)}
.inv-detail__qty{width:64px;padding:6px 8px;font-size:13px;border:1px solid var(--border);border-radius:8px;background:var(--input-bg,var(--card))}
.inv-detail__target-level-wrap{margin:8px 0;display:flex;align-items:center;gap:8px}
.inv-detail__target-level{padding:6px 8px;font-size:13px;border:1px solid var(--border);border-radius:8px;background:var(--input-bg,var(--card));min-width:72px}
.dn-card__price{font-size:14px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:4px}
.dn-card__price-icon{font-size:14px}
.dn-card__price-old{font-size:12px;color:var(--muted);font-weight:500;margin-right:2px}
.dn-buy-btn{padding:8px 14px;border-radius:10px;border:none;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;background:var(--border);color:var(--text)}
.dn-buy-btn:hover{background:var(--muted);color:var(--card)}
.dn-buy-btn:disabled{opacity:.5;cursor:not-allowed}
.dn-buy-btn--gems{background:var(--muted);color:var(--card)}
.dn-buy-btn--gems:hover{opacity:.95}
.dn-buy-btn s{opacity:.7;margin-right:2px;font-weight:400}
.dn-buy-btn--coins{background:#fef3c7;color:#92400e}
.dn-buy-btn--coins:hover{background:#fde68a}

/* Premium sidebar button */
[data-dex-species-id]{cursor:pointer}
[data-dex-species-id]:hover{opacity:.92}
.dock-btn--notif,.v-notif-wrap{position:relative}
.dock-notif-badge,.v-notif-badge{
  position:absolute;
  top:-4px;
  right:-4px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:8px;
  background:var(--danger);
  color:#fff;
  font-size:10px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.dock-btn--premium{position:relative}
.dock-btn--premium .dock-ic{position:relative}
.dock-btn--premium::after{content:'';position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(135deg,#ffc10720,#ff980020);pointer-events:none;z-index:0}

/* Inventory use button */
.inv-item__right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.inv-item__actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.inv-use-btn{padding:4px 10px;border-radius:6px;border:none;background:#4caf5020;color:#4caf50;font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap}
.inv-use-btn:hover{background:#4caf5040}
.inv-use-btn:disabled{opacity:.5;cursor:not-allowed}
.inv-use-btn--pokemon{background:#3b82f620;color:#3b82f6}
.inv-use-btn--pokemon:hover{background:#3b82f640}
.inv-discard-btn{padding:4px 8px;border:none;border-radius:6px;background:transparent;cursor:pointer;opacity:.5;font-size:14px;transition:opacity .15s}
.inv-discard-btn:hover{opacity:1;background:rgba(239,68,68,.1)}
.inv-picker{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.inv-picker__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.inv-picker__box{position:relative;background:var(--card);border-radius:var(--radius);padding:20px;max-width:360px;width:100%;max-height:80vh;overflow:auto;box-shadow:var(--shadow)}
.inv-picker__title{font-weight:800;font-size:16px;margin-bottom:12px}
.inv-picker__list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;max-height:300px;overflow-y:auto}
.inv-picker__item{display:flex;flex-direction:column;align-items:flex-start;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--soft);cursor:pointer;text-align:left;transition:all .15s}
.inv-picker__item:hover{border-color:var(--primary);background:rgba(59,130,246,.05)}
.inv-picker__name{font-weight:700;font-size:13px}
.inv-picker__hp{font-size:11px;color:var(--muted)}
.inv-picker__cancel{padding:8px 16px;border:1px solid var(--border);border-radius:8px;background:var(--card);cursor:pointer;font-size:13px}
.inv-picker__loading,.inv-picker__empty{text-align:center;padding:20px;color:var(--muted)}

/* Equip item picker (from creature card — above modal) */
.equip-picker{
  position:fixed;
  inset:0;
  z-index:10000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  pointer-events:none;
}
.equip-picker[style*="display: flex"],
.equip-picker.equip-picker--open{
  display:flex;
  pointer-events:auto;
}
.equip-picker__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(2px);
}
.equip-picker__box{
  position:relative;
  background:var(--card-bg,#fff);
  border-radius:16px;
  padding:20px;
  max-width:380px;
  width:100%;
  max-height:85vh;
  overflow:auto;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  border:1px solid var(--border,#e5e7eb);
}
.equip-picker__title{
  font-weight:800;
  font-size:16px;
  margin-bottom:14px;
}
.equip-picker__list{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:14px;
  max-height:320px;
  overflow-y:auto;
}
.equip-picker__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--soft);
  cursor:pointer;
  text-align:left;
  transition:all .15s;
}
.equip-picker__item:hover{
  border-color:var(--primary,#3b82f6);
  background:rgba(59,130,246,.06);
}
.equip-picker__item-name{ font-weight:600; font-size:14px; }
.equip-picker__item-count{ font-size:12px; color:var(--muted); }
.equip-picker__cancel{
  padding:10px 18px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card);
  cursor:pointer;
  font-size:14px;
  width:100%;
}
.equip-picker__loading,.equip-picker__empty{
  text-align:center;
  padding:24px;
  color:var(--muted);
}

/* ═══ Unified task cards (missions, research, battle pass) ═══ */

.task-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
  margin-bottom: 10px;
}

.task-card__main {
  flex: 1;
  min-width: 0;
}

.task-card__title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #0f172a);
}

.task-card__subtitle {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--muted, #64748b);
}

.task-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  font-size: 12px;
  color: var(--muted, #64748b);
}

.task-card__xp {
  font-weight: 700;
  color: var(--primary, #2563eb);
}

.task-card__status {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted, #94a3b8);
}

.task-card__progress {
  margin-top: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--border, #e2e8f0);
  overflow: hidden;
}

.task-card__bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary, #2563eb), #22c55e);
  transition: width .3s ease;
}

.task-card__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.task-card__icon img {
  max-width: 56px;
  max-height: 56px;
}

.task-card--done {
  opacity: .8;
  border-color: var(--ok, #16a34a);
  background: var(--ok-weak, rgba(22,163,74,.06));
}

.task-card--claimed {
  opacity: .75;
  border-style: dashed;
}

@media (max-width: 520px) {
  .task-card {
    align-items: flex-start;
  }
  .task-card__icon {
    width: 48px;
    height: 48px;
  }
}

/* ═══ Donate Mobile ═══ */
@media(max-width:600px){
  .dn{padding:0;border-radius:12px}
  .dn-header{padding:14px 14px 12px}
  .dn-header__balance-row{flex-direction:column;align-items:flex-start;gap:10px}
  .dn-search-wrap{padding:10px 14px 0}
  .dn-tabs{padding:0 14px}
  .dn-tab{padding:8px 12px;font-size:12px}
  .dn-tab__label{display:none}
  .dn-pane{padding:0 14px 20px}
  .dn-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .dn-grid--vip{grid-template-columns:repeat(2,1fr)}
  .dn-card{padding:10px}
  .dn-card__icon{font-size:28px;margin:6px 0 4px}
  .dn-card__name{font-size:12px}
  .dn-card__desc{font-size:10px}
  .dn-card__footer{flex-wrap:wrap;gap:6px}
  .dn-buy-btn{font-size:11px;padding:6px 10px}
  .dn-vip-compare{font-size:10px;grid-template-columns:90px 1fr}
  .dn-vip-compare__row > span{padding:6px 8px}
  .dn-vip-durations{gap:4px}
  .dn-dur-btn{padding:5px 10px;font-size:11px}
}
@media(max-width:400px){
  .dn-grid{grid-template-columns:1fr}
  .dn-grid--vip{grid-template-columns:repeat(2,1fr)}
  .dn-card__footer{flex-direction:column;align-items:stretch}
  .dn-buy-btn{width:100%}
}

/* Extra-compact premium shop layout for small phones */
@media(max-width:480px){
  .dn{
    border-radius:0;
    border-left:none;
    border-right:none;
  }
  .dn-header{
    padding:16px 14px 10px;
  }
  .dn-search-wrap{
    padding:8px 14px 0;
  }
  .dn-tabs{
    padding:0 14px;
  }
  .dn-pane{
    padding:0 14px 18px;
  }
  .dn-card{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto auto;
    column-gap:10px;
    align-items:center;
  }
  .dn-card__icon{
    margin:0;
    min-height:auto;
    width:56px;
    height:56px;
    padding:6px;
    border-radius:16px;
    grid-row:1 / 4;
    grid-column:1;
  }
  .dn-card__icon img{
    width:48px;
    height:48px;
  }
  .dn-card__name,
  .dn-card__tags,
  .dn-card__desc,
  .dn-card__stock{
    grid-column:2;
    text-align:left;
  }
  .dn-card__name{
    font-size:13px;
    margin-bottom:2px;
  }
  .dn-card__tags{
    justify-content:flex-start;
    margin-bottom:2px;
  }
  .dn-card__desc{
    font-size:11px;
    margin-bottom:4px;
  }
  .dn-card__stock{
    margin-bottom:4px;
  }
  .dn-card__footer{
    grid-column:2;
    grid-row:3;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    gap:6px;
    margin-top:4px;
    padding-top:4px;
    border-top:none;
  }
  .dn-card__qty-wrap{
    order:2;
  }
  .dn-buy-btn{
    min-width:110px;
  }
  .dn-card__badge,
  .dn-card__sale,
  .dn-card__limited{
    font-size:10px;
  }
}

/* ═══ Mobile: Команда (Party) ═══ */
@media(max-width:600px){
  .pm-party-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .pm-card{
    padding: 12px;
  }
  .pm-card__sprite{
    width: 80px;
    height: 80px;
  }
  .pm-card__sprite img{
    max-width: 70px;
    max-height: 70px;
  }
  .pm-pokeball{
    width: 32px;
    height: 32px;
  }
  .pm-pokeball img{
    width: 24px;
    height: 24px;
  }
  .pm-card__name{
    font-size: 14px;
  }
  .pm-card__level{
    font-size: 12px;
  }
}

/* ═══ Mobile: Декс ═══ */
@media(max-width:600px){
  .dx2-grid{
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .dx2-card{
    padding: 8px !important;
  }
  .dx2-card__sprite{
    width: 64px !important;
    height: 64px !important;
  }
  .dx2-card__name{
    font-size: 11px !important;
  }
  .dx2-header__title{
    font-size: 20px !important;
  }
  .dx2-filter-row{
    flex-direction: column;
  }
  .dx2-select{
    width: 100%;
  }
  .dex-grid{
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .dex-card{
    padding: 8px !important;
  }
  .dex-card__sprite{
    width: 64px !important;
    height: 64px !important;
  }
  .dex-card__name{
    font-size: 11px !important;
  }
}

/* ═══ Mobile: Инвентарь ═══ */
@media(max-width:600px){
  .inv-list{
    gap: 8px;
  }
  .inv-item{
    padding: 10px 12px;
  }
  .inv-item__name{
    font-size: 13px;
  }
  .inv-item__count{
    font-size: 14px;
  }
  .inv-tabs{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .inv-tabs::-webkit-scrollbar{
    display: none;
  }
  .inv-tab{
    min-width: 80px;
    white-space: nowrap;
  }
}

/* ═══ Крафт: хедер материалов ═══ */
.craft-materials__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}
.craft-materials__toggle{
  padding:4px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#f9fafb;
  font-size:12px;
  cursor:pointer;
}

/* ═══ Mobile: Крафт (совместимость с craft.css) ═══ */
@media(max-width:600px){
  .craft-materials__toggle{
    padding:4px 10px;
    font-size:11px;
  }
  .craft-materials__grid{ gap: 6px; }
  .craft-mat{ font-size: 11px; padding: 4px 8px; }
  .craft-card__result{ min-width: 0; }
  .craft-card__cost{ gap: 6px; }
  .craft-req{ padding: 3px 6px; font-size: 0.75rem; }
  .craft-card__actions{ flex-wrap: wrap; }
  .craft-quantity{ width: 44px; padding: 5px; font-size: 0.85rem; }
  .craft-btn{ min-height: 44px; }
}

/* ═══ Encounter Drops Tooltip ═══ */
.enc-drop-tooltip{
  position:fixed;
  z-index:2000;
  max-width:380px;
  width:calc(100vw - 32px);
  padding:12px 14px 10px;
  border-radius:16px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--soft) 0%,var(--card) 100%);
  box-shadow:0 18px 40px rgba(15,23,42,.35);
  font-size:13px;
  color:var(--text);
  box-sizing:border-box;
}
.enc-drop-tooltip--styled .enc-drop-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
  margin-bottom:6px;
}
.enc-drop-tooltip--styled .enc-drop-species-label{
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:2px;
}
.enc-drop-tooltip--styled .enc-drop-species-name{
  font-weight:700;
  font-size:14px;
  color:var(--text);
}
.enc-drop-tooltip--styled .enc-drop-meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:4px;
}
.enc-drop-tooltip--styled .enc-drop-meta-pill{
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(15,23,42,.03);
  padding:3px 8px;
  font-size:11px;
  line-height:1.3;
  white-space:nowrap;
}
.enc-drop-tooltip--styled .enc-drop-meta-pill--chance{
  border-color:rgba(34,197,94,.55);
  color:#16a34a;
  background:rgba(22,163,74,.08);
}
.enc-drop-tooltip--styled .enc-drop-section-title{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:4px;
}
.enc-drop-tooltip--styled .enc-drop-section-title::before{
  content:"📦";
  font-size:14px;
}
.enc-drop-tooltip--styled .enc-drop-body{
  border-top:1px solid rgba(148,163,184,.5);
  padding-top:8px;
  margin-top:4px;
  max-height:60vh;
  overflow:auto;
}
.enc-drop-tooltip--styled .enc-drop-loading{
  font-size:12px;
  color:var(--muted);
}
.enc-drop-tooltip--styled .enc-drop-group{
  margin-top:6px;
}
.enc-drop-tooltip--styled .enc-drop-group-title{
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.7;
  margin:4px 0 4px;
}
.enc-drop-tooltip--styled .enc-drop-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.enc-drop-tooltip--styled .enc-drop-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  background:var(--card);
  border-radius:12px;
  border-left:3px solid var(--rarity-color,var(--muted));
  transition:background .15s,transform .15s,box-shadow .15s;
}
.enc-drop-tooltip--styled .enc-drop-item:hover{
  background:var(--soft);
  box-shadow:0 8px 18px rgba(15,23,42,.18);
  transform:translateY(-1px);
}
.enc-drop-tooltip--styled .enc-drop-icon{
  font-size:20px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.enc-drop-tooltip--styled .enc-drop-icon img{
  width:24px;
  height:24px;
  object-fit:contain;
}
.enc-drop-tooltip--styled .enc-drop-name{
  flex:1;
  font-weight:600;
  font-size:13px;
  color:var(--text);
}
.enc-drop-tooltip--styled .enc-drop-chance{
  font-size:12px;
  font-weight:700;
  color:var(--rarity-color,var(--muted));
}
@media (max-width:600px){
  .enc-drop-tooltip{
    left:16px !important;
    right:16px !important;
    max-width:none;
  }
  .enc-drop-tooltip--styled .enc-drop-head{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }
  .enc-drop-tooltip--styled .enc-drop-meta{
    justify-content:flex-start;
  }
}

/* ═══ Donate Item Detail Popup ═══ */
.dn-detail-popup{display:none;position:fixed;inset:0;z-index:1100;align-items:center;justify-content:center}
.dn-detail-popup--open{display:flex}
.dn-detail-popup__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.35);backdrop-filter:blur(4px)}
.dn-detail-popup__box{position:relative;background:var(--card);border-radius:var(--radius);padding:28px 24px;max-width:380px;width:90%;text-align:center;box-shadow:var(--shadow);border:1px solid var(--border);animation:dnPopIn .2s ease}
@keyframes dnPopIn{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
.dn-detail-popup__close{position:absolute;top:10px;right:10px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--soft);border:none;border-radius:50%;font-size:20px;cursor:pointer;color:var(--muted);line-height:1}
.dn-detail-popup__close:hover{background:var(--border);color:var(--text)}
.dn-detail-popup__icon{font-size:48px;margin-bottom:8px;min-height:64px;display:flex;align-items:center;justify-content:center;background:var(--soft);border-radius:12px;padding:8px;overflow:hidden}
.dn-detail-popup__icon img{width:56px;height:56px;object-fit:contain}
.dn-detail-popup__name{font-size:18px;font-weight:800;color:var(--text);margin-bottom:4px}
.dn-detail-popup__rarity{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}
.dn-detail-popup__desc{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:14px}
.dn-detail-popup__meta{font-size:11px;color:var(--muted);margin-bottom:16px}
.dn-detail-popup__actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.dn-detail-popup__actions .dn-buy-btn{min-width:120px;padding:10px 16px;font-size:14px;border-radius:12px}

/* ═══════════════════════ Атакдекс (AX2) — светлый адаптивный стиль ═══════════════════════ */
.ax2{max-width:900px;margin:0 auto;padding:0 0 24px;background:var(--soft);border-radius:var(--radius);border:1px solid var(--border)}
.ax2-header{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;padding:16px 20px 12px;background:var(--card);border-radius:var(--radius) var(--radius) 0 0;border-bottom:1px solid var(--border)}
.ax2-header__title{font-size:22px;font-weight:800;margin:0 0 4px;color:var(--text)}
.ax2-header__caption{font-size:13px;color:var(--muted);margin:0;flex:1;min-width:0}
/* Способности (abx2) и Итемдекс (ix2) — заголовок панели (закрытие только в .modal-close) */
.abx2-header,.ix2-header{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;position:relative}
.abx2-header__title,.ix2-header__title{margin:0;flex:1;min-width:0;font-size:22px;font-weight:800;color:var(--text)}
.abx2-header__caption,.ix2-header__caption{flex:1 1 100%;margin:0;min-width:0;font-size:13px;color:var(--muted)}
.ax2-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px 20px;background:var(--card);border-bottom:1px solid var(--border)}
.ax2-search-wrap{flex:1 1 200px;min-width:0}
.ax2-search{width:100%;padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:var(--card);font-size:14px;color:var(--text);outline:none}
.ax2-search::placeholder{color:var(--muted)}
.ax2-search:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-weak)}
.ax2-select{padding:8px 32px 8px 12px;border-radius:12px;border:1px solid var(--border);background:var(--card);font-size:13px;color:var(--text);cursor:pointer}
.ax2-section-head{font-size:13px;font-weight:700;color:var(--muted);margin:8px 20px 12px}
.ax2-empty{padding:24px 20px;text-align:center}
.ax2-empty__text{font-size:14px;color:var(--muted)}
.ax2-empty__hint{font-size:12px;margin-top:6px}
.ax2-empty__hint a{color:var(--primary);text-decoration:underline}
.ax2-list{display:flex;flex-direction:column;gap:0;padding:0 20px 20px}
.ax2-card{background:var(--card);border:1px solid var(--border);border-radius:14px;margin-bottom:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.ax2-card:last-child{margin-bottom:0}
.ax2-card__top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 16px}
.ax2-card__main{flex:1 1 280px;min-width:0}
.ax2-card__name-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin-bottom:6px}
.ax2-card__name{font-size:16px;font-weight:700;color:var(--text)}
.ax2-card__name-ru{font-size:14px;color:var(--muted)}
.ax2-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.ax2-tag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:8px;text-transform:uppercase;letter-spacing:.03em}
.ax2-tag--type{color:var(--text)}
.ax2-tag--cat{background:var(--text);color:var(--card)}
.ax2-tag--contact{background:var(--danger);color:#fff}
.ax2-card__stats{font-size:12px;color:var(--muted);margin:0 0 6px;line-height:1.4}
.ax2-card__desc{font-size:13px;color:var(--muted);margin:0;line-height:1.45}
.ax2-card__action{flex-shrink:0}
.ax2-learners-btn{padding:8px 14px;border-radius:10px;border:1px solid var(--border);background:var(--soft);color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
.ax2-learners-btn:hover{background:var(--card);border-color:var(--border);color:var(--text)}
.ax2-card__learners{border-top:1px solid var(--border);background:var(--soft);padding:0}
.ax2-card__learners--hidden{display:none}
.ax2-card__learners--open{display:block}
.ax2-learners-loading{padding:16px;text-align:center;font-size:13px;color:var(--muted)}
.ax2-learners-content{padding:14px 16px 16px;position:relative}
.ax2-hide-btn{position:absolute;top:10px;right:14px;padding:4px 10px;border-radius:8px;border:1px solid var(--border);background:var(--card);font-size:12px;color:var(--muted);cursor:pointer}
.ax2-hide-btn:hover{background:var(--soft);color:var(--text)}
.ax2-learners-methods{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.ax2-method{}
.ax2-method__title{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.05em;margin-bottom:8px;display:block}
.ax2-learners-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.ax2-learner{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--card);border-radius:10px;border:1px solid var(--border);cursor:pointer;transition:all .15s}
.ax2-learner:hover{border-color:var(--border);background:var(--soft)}
.ax2-learner__sprite{width:40px;height:40px;object-fit:contain;flex-shrink:0}
.ax2-learner__name{font-size:12px;font-weight:600;color:var(--text);flex:1;min-width:0}
.ax2-learner__types{display:flex;flex-wrap:wrap;gap:4px}
.ax2-poke-tag{font-size:9px;font-weight:700;padding:1px 5px;border-radius:4px}
.ax2-learners-empty{font-size:13px;color:var(--muted);margin:0}
.ax2-pager{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:16px;padding-bottom:20px;font-size:13px}
.ax2-pager__btn{padding:6px 14px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text);text-decoration:none}
.ax2-pager__btn:hover{background:var(--soft);border-color:var(--border)}
.ax2-pager__btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.ax2-pager__info{color:var(--muted)}

/* Компактная карточка приёма + кнопка i */
.ax2-card--compact .ax2-card__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px}
.ax2-card--compact .ax2-card__left{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ax2-card--compact .ax2-card__name{font-size:15px;font-weight:700;color:var(--text);margin:0}
.ax2-card__stats-inline{font-size:12px;color:var(--muted)}
.ax2-info-btn{flex-shrink:0;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--card);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.06);transition:background .15s,border-color .15s}
.ax2-info-btn:hover{background:var(--soft);border-color:var(--border)}
.ax2-info-btn__icon{font-size:14px;font-weight:700;font-style:italic;color:var(--muted);font-family:Georgia,serif}

/* Модалка деталей приёма (по клику на i) */
.ax2-move-modal{display:none;position:fixed;inset:0;z-index:1200;align-items:center;justify-content:center;padding:16px}
.ax2-move-modal--open{display:flex}
.ax2-move-modal__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.35);backdrop-filter:blur(4px)}
.ax2-move-modal__box{position:relative;background:var(--card);border-radius:var(--radius);padding:24px 22px;max-width:420px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow);border:1px solid var(--border);animation:ax2ModalIn .2s ease}
@keyframes ax2ModalIn{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.ax2-move-modal__close{position:absolute;top:10px;right:10px;width:34px;height:34px;border:none;border-radius:50%;background:var(--soft);color:var(--muted);font-size:20px;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center}
.ax2-move-modal__close:hover{background:var(--border);color:var(--text)}
.ax2-move-modal__label{font-size:12px;color:var(--muted);margin:0 0 2px}
.ax2-move-modal__title{font-size:20px;font-weight:800;color:var(--text);margin:0 0 16px}
.ax2-move-modal__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin-bottom:16px}
.ax2-move-modal__row{margin:0 0 8px;font-size:13px}
.ax2-move-modal__row:last-child{margin-bottom:0}
.ax2-move-modal__lbl{color:var(--muted);margin-right:4px}
.ax2-move-modal__type-badge{display:inline-block;padding:2px 10px;border-radius:8px;font-size:11px;font-weight:700;text-transform:uppercase}
.ax2-move-modal__section{margin-bottom:14px}
.ax2-move-modal__section-title{font-size:12px;font-weight:700;color:var(--muted);margin:0 0 6px}
.ax2-move-modal__desc{font-size:13px;color:var(--muted);line-height:1.45;margin:0}
.ax2-move-modal__effects-text{font-size:13px;color:var(--muted);margin:0}
.ax2-move-modal__learners-wrap{margin-bottom:16px}
.ax2-move-modal__learners-btn{padding:8px 14px;border-radius:10px;border:1px solid var(--border);background:var(--soft);color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;width:100%;transition:all .15s}
.ax2-move-modal__learners-btn:hover{background:var(--card);border-color:var(--border);color:var(--text)}
.ax2-move-modal__learners-panel{margin-top:10px;padding:12px;background:var(--soft);border-radius:12px;border:1px solid var(--border)}
.ax2-move-modal__learners-loading{font-size:12px;color:var(--muted)}
.ax2-move-modal__learners-list .ax2-learners-grid{margin-top:8px}
.ax2-move-modal__learners-list .ax2-learner__sprite{width:36px;height:36px}
.ax2-move-modal__learners-list .ax2-learner__name{font-size:11px}
.ax2-move-modal__actions{display:flex;justify-content:flex-end}
.ax2-move-modal__ok{padding:10px 24px;border-radius:12px;border:none;background:var(--primary);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .15s}
.ax2-move-modal__ok:hover{opacity:.95}

@media(max-width:600px){
  .ax2{padding:0;border-radius:12px}
  .ax2-header{padding:12px 14px}
  .ax2-header__title{font-size:20px}
  .ax2-filters{flex-direction:column;align-items:stretch;padding:12px 14px}
  .ax2-search-wrap{flex:1 1 100%}
  .ax2-list{padding:0 14px 14px}
  .ax2-card--compact .ax2-card__row{padding:10px 12px;flex-wrap:wrap}
  .ax2-card--compact .ax2-card__name{font-size:14px}
  .ax2-card__stats-inline{font-size:11px}
  .ax2-info-btn{width:28px;height:28px}
  .ax2-info-btn__icon{font-size:12px}
  .ax2-move-modal__box{padding:18px 16px;max-height:85vh}
  .ax2-move-modal__grid{grid-template-columns:1fr;gap:8px}
  .ax2-learners-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px}
  .ax2-learner__sprite{width:32px;height:32px}
  .ax2-learner__name{font-size:11px}
}

/* ═══ Location Travel Buttons (Disabled State) ═══ */
.gw-travel__btn--disabled{
  opacity:0.6;
  cursor:not-allowed;
  filter:grayscale(0.3);
  pointer-events:none;
}
.gw-travel__btn--disabled:hover{
  filter:grayscale(0.3);
  transform:none;
}
.gw-travel__req{
  font-size:0.75em;
  opacity:0.7;
  display:block;
  margin-top:2px;
  color:var(--danger);
  font-weight:600;
}

/* ═══════════════════════ Hub pages (Bag, Feed, Community) ═══════════════════════ */
.hub-page{max-width:840px;margin:0 auto;padding:0 12px}
.hub-header{margin-bottom:14px}
.hub-title{margin:0;font-size:1.3em;font-weight:800}
.hub-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:2px solid var(--border);margin-bottom:14px;padding-bottom:0}
.hub-tab{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;font-size:14px;font-weight:600;border:none;background:transparent;color:var(--muted);border-bottom:3px solid transparent;cursor:pointer;transition:all .15s;border-radius:6px 6px 0 0;text-decoration:none}
.hub-tab:hover{color:var(--text);background:var(--soft)}
.hub-tab.active{color:var(--primary);border-bottom-color:var(--primary);background:var(--primary-weak)}
.hub-tab__icon{font-size:1.1em}
.hub-tab--premium{color:var(--primary)}
.hub-content{min-height:120px}
.hub-loading{color:var(--muted);padding:24px;text-align:center;font-size:14px}
.hub-news-list .v-news-list{margin:0}

/* ═══════════════════════ Battle Side Panels (Showdown-style: outside main content) ═══════════════════════ */
/* Wrapper: 3 columns — left panel | btl-layout (center: arena + actions + log + stats) | right panel */
.btl-sides-wrap{
  display:grid;
  grid-template-columns:110px 1fr 110px;
  align-items:start;
  width:100%;
  gap:12px;
}

@media (max-width: 960px){
  .btl-sides-wrap{
    grid-template-columns:100px 1fr 100px;
    gap:10px;
  }
}

@media (max-width: 860px){
  .btl-sides-wrap{
    grid-template-columns:90px 1fr 90px;
    gap:8px;
  }
}

@media (max-width: 640px){
  .btl-sides-wrap{
    grid-template-columns:75px 1fr 75px;
    gap:6px;
  }
}

/* Side panels (Showdown-style: compact, bordered box, team list + HP bars) */
.btl-side{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:8px;
  width:100%;
  padding:12px 10px;
  background:var(--soft);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 2px 8px rgba(0,0,0,.08);
  overflow:visible;
  flex-shrink:0;
}

.btl-side--ally{
  align-items:flex-start;
}

.btl-side--foe{
  align-items:flex-end;
}

@media (max-width: 960px){
  .btl-side{
    padding:12px 8px;
    gap:8px;
  }
}

@media (max-width: 860px){
  .btl-side{
    padding:10px 6px;
    gap:6px;
  }
}

@media (max-width: 640px){
  .btl-side{
    padding:10px 5px;
    gap:6px;
  }
}

/* Battle layout — center column: arena + actions + log + stats (all same width, compact) */
.btl-layout{
  display:flex;
  flex-direction:column;
  gap:0;
  min-width:0;
  width:100%;
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}

/* All elements in .btl-layout should have same width */
.btl-layout > .btl-arena,
.btl-layout > .btl-panel,
.btl-layout > .btl-log-wrapper,
.btl-layout > .btl-details,
.btl-layout > .btl-meta{
  width:100%;
  max-width:100%;
}


.btl-side__trainer{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:0;
  width:100%;
  margin-bottom:8px;
}

.btl-side--ally .btl-side__trainer{
  order:2;
  margin-top:auto;
  margin-bottom:0;
}

.btl-side--foe .btl-side__trainer{
  order:1;
  margin-bottom:8px;
  margin-top:0;
}

.btl-side__trainer-sprite{
  width:56px;
  height:56px;
  background:var(--border);
  border-radius:6px;
  flex-shrink:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:0 1px 3px rgba(0,0,0,.1);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
}
.btl-side__trainer-sprite-fallback{
  font-size:1.5rem;
  line-height:1;
  opacity:.8;
}

@media (max-width: 960px){
  .btl-side__trainer-sprite{
    width:48px;
    height:48px;
  }
}

@media (max-width: 860px){
  .btl-side__trainer-sprite{
    width:44px;
    height:44px;
  }
}

@media (max-width: 640px){
  .btl-side__trainer-sprite{
    width:40px;
    height:40px;
  }
}

.btl-side__trainer-name{
  font-size:12px;
  font-weight:700;
  color:var(--text);
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  line-height:1.2;
  margin-top:4px;
}

.btl-side__trainer-name a{
  color:var(--text);
  text-decoration:none;
}

.btl-side__trainer-name a:hover{
  color:var(--primary);
  text-decoration:underline;
}

@media (max-width: 960px){
  .btl-side__trainer-name{
    font-size:11px;
  }
}

@media (max-width: 640px){
  .btl-side__trainer-name{
    font-size:10px;
  }
}

.btl-side__trainer-name a{
  color:inherit;
  text-decoration:none;
  transition:color .15s;
}

.btl-side__trainer-name a:hover{
  color:#2563eb;
  text-decoration:underline;
}

.btl-side__team-link{
  display:inline-block;
  margin-top:6px;
  font-size:11px;
  font-weight:600;
  color:#2563eb;
  text-decoration:none;
  padding:4px 8px;
  border-radius:6px;
  background:rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.2);
  transition:background .15s, border-color .15s;
}
.btl-side__team-link:hover{
  background:rgba(37,99,235,.14);
  border-color:rgba(37,99,235,.35);
  color:#1d4ed8;
}

/* Showdown-style: team block (label + list), collapsible on mobile */
.btl-side__team-details{
  width:100%;
  flex:1 1 auto;
  min-height:0;
}
.btl-side--ally .btl-side__team-details{ order:1; }
.btl-side--foe .btl-side__team-details{ order:2; }

.btl-side__team-label{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#64748b;
  margin-bottom:4px;
  padding:0 2px;
  width:100%;
  list-style:none;
  cursor:default;
}
.btl-side__team-label::-webkit-details-marker{ display:none; }
.btl-side__team-label::marker{ content:''; display:none; }
.btl-side__team-label--foe{
  text-align:right;
}

.btl-side__team{
  display:flex;
  flex-direction:column;
  gap:4px;
  width:100%;
  flex:1 1 auto;
}

.btl-side--ally .btl-side__team{
  order:1;
}

.btl-side--foe .btl-side__team{
  order:3;
}

@media (max-width: 640px){
  .btl-side__team{
    gap:3px;
  }
}

.btl-team-slot{
  position:relative;
  width:100%;
  min-height:38px;
  height:auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  align-content:flex-start;
  gap:6px 8px;
  padding:5px 8px;
  background:#fff;
  border:1.5px solid #e2e8f0;
  border-radius:8px;
  transition:all .15s ease;
  cursor:default;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.btl-team-slot:has(.btl-team-slot__hp){
  padding-bottom:6px;
}

.btl-team-slot:hover{
  background:#f8fafc;
  border-color:#cbd5e1;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  transform:translateY(-1px);
}

@media (max-width: 960px){
  .btl-team-slot{
    min-height:34px;
    padding:4px 6px;
    gap:4px 6px;
  }
}

@media (max-width: 860px){
  .btl-team-slot{
    min-height:32px;
    padding:3px 5px;
    gap:3px 5px;
  }
}

@media (max-width: 640px){
  .btl-team-slot{
    min-height:30px;
    padding:3px 4px;
    gap:3px 4px;
  }
}

.btl-team-slot--active{
  background:#dbeafe;
  border-color:#3b82f6;
  box-shadow:0 0 0 3px rgba(59,130,246,.15), 0 2px 6px rgba(59,130,246,.2);
}
.btl-team-slot--active::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:#2563eb;
  border-radius:8px 0 0 8px;
}

.btl-team-slot--active:hover{
  background:#bfdbfe;
  border-color:#2563eb;
}

.btl-team-slot--fainted{
  opacity:.5;
  filter:grayscale(1);
  background:#e5e7eb;
  border-color:#9ca3af;
}

.btl-team-slot--fainted:hover{
  opacity:.6;
  transform:none;
}

/* Enhanced fainted styling for opponent Pokemon */
[data-btl-team-slot="foe"].btl-team-slot--fainted{
  opacity:.4;
  filter:grayscale(1) brightness(.85);
  background:#d1d5db;
  border-color:#9ca3af;
}

[data-btl-team-slot="foe"].btl-team-slot--fainted .btl-team-slot__icon{
  opacity:.3;
  filter:grayscale(1) brightness(.7);
}

/* ─── Unrevealed: Poké Ball (не использован в бою) ─── */
.btl-team-slot--revealed .btl-team-slot__ball{
  display:none;
}

.btl-team-slot__ball{
  width:28px;
  height:28px;
  flex-shrink:0;
  position:relative;
  border-radius:50%;
  overflow:hidden;
  background:#f1f5f9;
  border:1.5px solid #cbd5e1;
  box-shadow:0 2px 6px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .15s ease, box-shadow .15s ease;
}

.btl-team-slot__ball img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  padding:3px;
  box-sizing:border-box;
}

.btl-team-slot:not(.btl-team-slot--revealed):hover .btl-team-slot__ball{
  transform:scale(1.08);
  box-shadow:0 3px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.5);
}

@media (max-width: 960px){
  .btl-team-slot__ball{
    width:24px;
    height:24px;
    border-width:1.5px;
  }
}

@media (max-width: 860px){
  .btl-team-slot__ball{
    width:22px;
    height:22px;
  }
}

@media (max-width: 640px){
  .btl-team-slot__ball{
    width:20px;
    height:20px;
    border-width:1.5px;
  }
}

/* ─── Revealed: sprite (использован в бою) ─── */
.btl-team-slot__icon{
  flex:1;
  min-width:0;
  height:0;
  min-height:28px;
  width:28px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  image-rendering:auto;
  image-rendering:crisp-edges;
  opacity:0;
  transition:opacity .2s ease, filter .2s ease, box-shadow .2s ease;
  border-radius:8px;
  background-color:transparent;
}

.btl-team-slot--revealed .btl-team-slot__icon{
  opacity:1;
  height:28px;
  min-height:28px;
  background-color:rgba(255,255,255,.5);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}

.btl-team-slot--active .btl-team-slot__icon{
  opacity:1;
  box-shadow:0 0 0 2px #3b82f6, 0 2px 8px rgba(59,130,246,.35);
  background-color:rgba(59,130,246,.12);
}

.btl-team-slot--fainted .btl-team-slot__icon{
  opacity:.55;
  filter:grayscale(1) brightness(.75);
  background-color:rgba(148,163,184,.2);
  box-shadow:none;
}

[data-btl-team-slot="foe"].btl-team-slot--fainted .btl-team-slot__icon{
  opacity:.4;
  filter:grayscale(1) brightness(.65);
}

@media (max-width: 960px){
  .btl-team-slot__icon{ min-height:26px; width:26px; }
  .btl-team-slot--revealed .btl-team-slot__icon{
    height:26px;
    min-height:26px;
  }
}

@media (max-width: 860px){
  .btl-team-slot__icon{ min-height:24px; width:24px; }
  .btl-team-slot--revealed .btl-team-slot__icon{
    height:24px;
    min-height:24px;
  }
}

@media (max-width: 640px){
  .btl-team-slot__icon{ min-height:22px; width:22px; }
  .btl-team-slot--revealed .btl-team-slot__icon{
    height:22px;
    min-height:22px;
  }
}

/* Showdown-style: thin HP bar under each revealed Pokémon in side panel */
.btl-team-slot__hp{
  order:10;
  flex-basis:100%;
  width:100%;
  flex:0 0 auto;
  margin-top:2px;
  min-height:4px;
}
.btl-team-slot__hp-bar{
  width:100%;
  height:4px;
  border-radius:2px;
  background:rgba(0,0,0,.12);
  overflow:hidden;
}
.btl-team-slot__hp-bar span{
  display:block;
  height:100%;
  border-radius:2px;
  transition:width .25s ease;
}
.btl-team-slot__hp-bar--high span{ background:#22c55e; }
.btl-team-slot__hp-bar--mid span{ background:#eab308; }
.btl-team-slot__hp-bar--low span{ background:#ef4444; }
.btl-team-slot--fainted .btl-team-slot__hp-bar span{ background:var(--muted); }

/* Для нераскрытых покемонов показываем только покебол; спрайт — только после появления в бою */
.btl-team-slot[data-btl-slot-revealed="0"] .btl-team-slot__icon{
  display:none;
}
.btl-team-slot[data-btl-slot-revealed="1"] .btl-team-slot__ball{
  display:none;
}

/* Процент HP в боковых слотах (по умолчанию скрыт, используется на мобиле) */
.btl-team-slot__hp-text{
  display:none;
  font-size:10px;
  font-weight:600;
  color:#4b5563;
  margin-top:2px;
}

@media (max-width: 960px){
  .btl-team-slot__hp{ margin-top:1px; min-height:3px; }
  .btl-team-slot__hp-bar{ height:3px; }
}
@media (max-width: 640px){
  .btl-team-slot__hp{ margin-top:1px; min-height:3px; }
  .btl-team-slot__hp-bar{ height:3px; }
}

.btl-team-slot__tera{
  width:16px;
  height:16px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  flex-shrink:0;
  border:1px solid rgba(0,0,0,.2);
  box-shadow:0 1px 2px rgba(0,0,0,.1);
}
.btl-team-slot__tera--img{
  width:auto;
  height:16px;
  border-radius:0;
  border:none;
  box-shadow:none;
  padding:0;
  margin:0;
}
.btl-team-slot__tera--img img{
  display:block;
  width:48px;
  height:16px;
  object-fit:contain;
}

.btl-team-slot__status{
  font-size:9px;
  font-weight:700;
  color:#ef4444;
  text-transform:uppercase;
  flex-shrink:0;
}

/* Tera mini-flag (sides of battle, same modal — no separate panel) */
.btl-tera-flag-wrap{
  display:flex;
  justify-content:center;
  padding:4px 0;
}
.btl-tera-flag-wrap--right{
  justify-content:center;
}
.btl-tera-flag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 6px;
  border:2px solid rgba(0,0,0,.15);
  border-radius:8px;
  background:rgba(255,255,255,.9);
  cursor:pointer;
  transition:all .15s;
}
.btl-tera-flag--available:hover{
  border-color:#2563eb;
  background:rgba(37,99,235,.1);
  transform:scale(1.05);
}
.btl-tera-flag--available[aria-pressed="true"]{
  border-color:#2563eb;
  background:rgba(37,99,235,.2);
  box-shadow:0 0 0 2px rgba(37,99,235,.3);
}
.btl-tera-flag--used{
  opacity:.6;
  cursor:default;
}
.btl-tera-flag img{
  display:block;
  height:16px;
  width:auto;
  object-fit:contain;
}

/* Tooltip for revealed Pokemon info */
.btl-team-slot-tooltip{
  position:absolute;
  left:100%;
  top:50%;
  transform:translateY(-50%);
  margin-left:8px;
  min-width:280px;
  max-width:320px;
  background:rgba(15,23,42,.95);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  padding:12px;
  z-index:1000;
  box-shadow:0 4px 20px rgba(0,0,0,.3);
  pointer-events:none;
  opacity:0;
  transition:opacity .15s;
}

.btl-team-slot:hover .btl-team-slot-tooltip{
  opacity:1;
}
.btl-side--foe .btl-team-slot-tooltip{
  left:auto;
  right:100%;
  margin-left:0;
  margin-right:8px;
  transform:translateY(-50%);
}

.btl-team-slot-tooltip__name{
  font-size:16px;
  font-weight:800;
  color:#fff;
  margin-bottom:8px;
}

.btl-team-slot-tooltip__level{
  font-size:12px;
  color:rgba(255,255,255,.7);
  margin-left:8px;
}

.btl-team-slot-tooltip__status{
  font-size:11px;
  color:#fca5a5;
  margin-top:4px;
  font-weight:700;
}

.btl-team-slot-tooltip__terastallized{
  font-size:11px;
  color:rgba(255,255,255,.85);
  margin-top:2px;
  font-style:italic;
}

.btl-team-slot-tooltip__hp,
.btl-team-slot-tooltip__item,
.btl-team-slot-tooltip__stat{
  font-size:12px;
  color:rgba(255,255,255,.9);
  margin-top:4px;
}

.btl-team-slot-tooltip__types{
  display:flex;
  gap:6px;
  margin-top:8px;
  flex-wrap:wrap;
}

.btl-team-slot-tooltip__types .type{
  padding:2px 8px;
  border-radius:6px;
  font-size:10px;
  font-weight:700;
}

.btl-team-slot-tooltip__tera{
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:6px;
}

.btl-team-slot-tooltip__tera-label{
  font-size:11px;
  color:rgba(255,255,255,.7);
}

.btl-team-slot-tooltip__tera-img{
  width:72px;
  height:24px;
  object-fit:contain;
}

.btl-team-slot-tooltip__ability{
  margin-top:8px;
  font-size:12px;
  color:rgba(255,255,255,.9);
}

.btl-team-slot-tooltip__ability-label{
  color:rgba(255,255,255,.7);
  font-weight:600;
}

.btl-team-slot-tooltip__moves{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.btl-team-slot-tooltip__move{
  font-size:11px;
  color:rgba(255,255,255,.9);
  display:flex;
  justify-content:space-between;
}

.btl-team-slot-tooltip__move-name{
  font-weight:600;
}

.btl-team-slot-tooltip__move-pp{
  color:rgba(255,255,255,.6);
}

/* Location players and battles buttons - positioned to not overlap chat */
.gw-location-players, .gw-active-battles{
  position:fixed;
  bottom:20px;
  right:20px;
  z-index:999;
}
.gw-active-battles{
  bottom:80px;
}
@media (min-width: 900px){
  .gw-location-players, .gw-active-battles{
    right:calc(50% + 200px);
  }
}
.gw-location-players__btn, .gw-active-battles__btn{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  background:#fff;
  border:1px solid #e6eafe;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(23,35,74,.1);
  cursor:pointer;
  font-family:Nunito,Inter,Arial,sans-serif;
  font-weight:800;
  font-size:13px;
  color:#1b2b4f;
  transition:all .15s ease;
}
.gw-location-players__btn:hover, .gw-active-battles__btn:hover{
  background:#f6f8ff;
  box-shadow:0 6px 16px rgba(23,35,74,.15);
  transform:translateY(-1px);
}
.gw-location-players__icon, .gw-active-battles__icon{
  font-size:16px;
}
.location-players-list, .active-battles-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.location-player-item{
  padding:10px 12px;
  border:1px solid #e6eafe;
  border-radius:10px;
  background:#fafcff;
}
.location-player-link{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:inherit;
}
.location-player-name{
  font-weight:900;
  font-size:14px;
}
.location-player-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:6px;
  font-size:12px;
  background:#eef3ff;
}
.location-player-badge--vip{
  background:#fff8e8;
  color:#a05a00;
}
.location-player-badge--clan{
  background:#f0f4ff;
}
.location-player-badge--faction{
  color:#fff;
}
.location-player-level{
  margin-left:auto;
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}
.active-battle-item{
  padding:12px;
  border:1px solid #e6eafe;
  border-radius:10px;
  background:#fafcff;
}
.active-battle-teams{
  font-weight:900;
  font-size:14px;
  margin-bottom:8px;
}
.active-battle-teams .vs{
  color:var(--muted);
  margin:0 8px;
}
.active-battle-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* Tooltips for players and battles */
.location-players-tooltip, .active-battles-tooltip{
  position:fixed;
  z-index:10001;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(23,35,74,.15);
  max-width:320px;
  max-height:400px;
  overflow:auto;
  font-family:Nunito,Inter,Arial,sans-serif;
  min-width:200px;
}
.location-players-tooltip-empty, .active-battles-tooltip-empty{
  padding:16px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}
.location-players-tooltip-list, .active-battles-tooltip-list{
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.location-players-tooltip-item, .active-battles-tooltip-item{
  padding:8px 10px;
  border-radius:8px;
  transition:background .15s;
}
.location-players-tooltip-item{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:inherit;
}
.location-players-tooltip-item:hover{
  background:#f6f8ff;
}
.location-players-tooltip-name{
  font-weight:900;
  font-size:13px;
  flex:1;
}
.location-players-tooltip-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:5px;
  font-size:11px;
  background:#eef3ff;
}
.location-players-tooltip-badge--vip{
  background:#fff8e8;
  color:#a05a00;
}
.location-players-tooltip-badge--bot{
  background:#f0f0f0;
  color:#64748b;
  font-size:10px;
}
.location-players-tooltip-online{
  color:#16a34a;
  font-size:8px;
  margin-left:2px;
  vertical-align:middle;
}
.active-battles-tooltip-item{
  border:1px solid #e6eafe;
  background:#fafcff;
}
.active-battles-tooltip-teams{
  font-weight:900;
  font-size:12px;
  margin-bottom:6px;
}
.active-battles-tooltip-teams .vs{
  color:var(--muted);
  margin:0 6px;
}
.active-battles-tooltip-actions{
  display:flex;
  gap:6px;
}
.active-battles-tooltip-actions .btn{
  padding:4px 8px;
  font-size:11px;
}

/* Responsive: Compact mobile-first design */
@media (max-width:768px){
  .btl{
    max-width:100%;
    padding:0 6px;
  }
  .btl-sides-wrap{
    grid-template-columns:auto 1fr auto;
    gap:6px;
  }
  .btl-side{
    width:100px;
    padding:6px 4px;
  }
  .btl-side__trainer-sprite{
    width:28px;
    height:28px;
  }
  .btl-side__trainer-name{
    font-size:9px;
  }
  .btl-team-slot{
    height:22px;
    padding:2px 3px;
    gap:3px;
  }
  .btl-team-slot__ball{
    width:14px;
    height:14px;
  }
  .btl-team-slot--revealed .btl-team-slot__icon{
    height:18px;
  }
  .btl-team-slot-tooltip{
    display:none;
  }
  .btl-team-slot--tooltip-open .btl-team-slot-tooltip{
    display:block;
    opacity:1;
    position:fixed;
    left:12px;
    right:12px;
    bottom:16px;
    margin-left:0;
    margin-right:0;
    min-width:0;
    max-width:none;
    max-height:50vh;
    overflow-y:auto;
    transform:none;
    z-index:10100;
    pointer-events:auto;
    box-shadow:0 8px 32px rgba(0,0,0,.35);
    -webkit-overflow-scrolling:touch;
  }
}

@media (max-width:640px){
  .btl-side{
    width:85px;
    padding:5px 3px;
  }
}

@media (max-width:480px){
  /* Mobile: Stacked layout — панели сверху/снизу, сворачиваемые (Showdown-style) */
  .btl-sides-wrap{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .btl-layout{
    order:2;
    border-radius:12px;
  }
  .btl-side{
    width:100%;
    padding:10px 8px;
    background:#f1f5f9;
    border-radius:12px;
    border:1px solid #cbd5e1;
  }
  .btl-side--foe{
    order:1;
  }
  .btl-side--ally{
    order:3;
  }
  /* Боковые панели на мобиле: горизонтальные полосы как в примере */
  .btl-side{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:6px 10px;
    gap:8px;
    background:transparent;
    border:none;
    box-shadow:none;
  }
  .btl-side__trainer{
    display:flex;
    align-items:center;
    gap:6px;
  }
  .btl-side__trainer-sprite{
    width:32px;
    height:32px;
    border-radius:999px;
    border:2px solid #e5e7eb;
    overflow:hidden;
  }
  .btl-side__trainer-name{
    font-size:12px;
    font-weight:700;
  }
  .btl-side__team-link{
    display:none;
  }
  .btl-side__team-details{
    all:unset;
    display:block;
    flex:1 1 auto;
  }
  .btl-side__team-label{
    display:none;
  }
  .btl-side__team{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    gap:6px;
    overflow-x:auto;
  }
  .btl-team-slot{
    width:auto;
    min-width:40px;
    min-height:0;
    padding:0;
    border:none;
    box-shadow:none;
    background:transparent;
    flex-direction:column;
    align-items:center;
    gap:2px;
  }
  .btl-team-slot__ball{
    display:none;
  }
  .btl-team-slot__icon{
    width:32px;
    height:32px;
    border-radius:999px;
    background-color:#e5e7eb;
    background-size:cover;
    background-position:center;
    border:1px solid rgba(148,163,184,.7);
  }
  .btl-team-slot--active .btl-team-slot__icon{
    border-color:#22c55e;
    box-shadow:0 0 0 2px rgba(34,197,94,.35);
  }
  .btl-team-slot--fainted .btl-team-slot__icon{
    filter:grayscale(1);
    opacity:.6;
  }
  /* В мобильных фишках показываем только % HP, без полоски */
  .btl-team-slot__hp{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .btl-team-slot__hp-bar{
    display:none;
  }
  .btl-team-slot__hp-text{
    display:block;
  }
  .btl-team-slot__status,
  .btl-team-slot__tera{
    display:none;
  }
}

/* Sync Trade Modal */
.trade-sync{padding:0;min-width:min(96vw,720px);max-width:96vw}
.trade-sync__grid{display:grid;grid-template-columns:1fr 200px 1fr;gap:16px;align-items:stretch;min-height:320px}
.trade-sync__side{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;min-height:0}
.trade-sync__header{padding:10px 14px;border-bottom:1px solid var(--border);background:var(--soft);flex-shrink:0}
.trade-sync__label{font-weight:700;font-size:13px;color:var(--text)}
.trade-sync__list{padding:8px 6px;overflow-y:auto;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:6px}
.trade-sync__empty{text-align:center;color:var(--muted);font-size:13px;padding:20px 8px}
.trade-sync__item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:var(--soft);border:1px solid var(--border);font-size:13px;transition:background .15s,border-color .15s;position:relative}
.trade-sync__item:hover{background:rgba(37,99,235,.06);border-color:rgba(37,99,235,.25)}
.trade-sync__sprite{width:32px;height:32px;object-fit:contain;image-rendering:pixelated;flex-shrink:0;border-radius:6px;background:var(--bg)}
.trade-sync__item-meta{display:flex;flex-direction:column;min-width:0;flex:1}
.trade-sync__item-title{font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trade-sync__item-sub{font-size:11px;color:var(--muted);margin-top:1px}
.trade-sync__item-remove{flex-shrink:0;width:26px;height:26px;padding:0;border:none;border-radius:6px;background:var(--danger-weak);color:var(--danger);cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center}
.trade-sync__item-remove:hover{background:var(--danger);color:#fff}
.trade-sync__badge{margin-left:auto;font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--border);background:rgba(59,130,246,.06);color:var(--primary);white-space:nowrap}
.trade-sync__badge--rental{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.6);color:var(--primary)}
.trade-sync__actions{padding:8px 10px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:6px;flex-shrink:0}
.trade-sync__btn-add{padding:6px 10px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:12px;font-weight:600;cursor:pointer}
.trade-sync__btn-add:hover{background:var(--primary-weak);border-color:var(--primary);color:var(--primary)}
.trade-sync__mid{background:linear-gradient(180deg,rgba(255,244,250,.6),rgba(250,232,255,.5));border:1px solid rgba(251,113,133,.25);border-radius:var(--radius);padding:12px 10px;display:flex;flex-direction:column;align-items:stretch;gap:10px;min-height:0}
.trade-sync__info{text-align:center;font-size:13px;color:var(--text)}
.trade-sync__info strong{color:var(--primary)}
.trade-sync__status{display:flex;flex-direction:column;gap:6px}
.trade-sync__pill{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--soft);color:var(--muted);border:1px solid var(--border)}
.trade-sync__pill--ok{background:rgba(22,163,74,.12);color:var(--ok);border-color:rgba(22,163,74,.3)}
.trade-sync__pill--no{background:rgba(248,250,252,.9);color:var(--muted)}
.trade-sync__btn{display:block;width:100%;padding:10px 12px;border-radius:10px;border:none;font-weight:700;font-size:14px;cursor:pointer;transition:filter .12s}
.trade-sync__btn--ready{background:linear-gradient(90deg,#a78bfa,#7c3aed);color:#fff;box-shadow:0 2px 8px rgba(124,58,237,.25)}
.trade-sync__btn--execute{background:linear-gradient(90deg,#22c55e,#16a34a);color:#fff;box-shadow:0 2px 8px rgba(22,163,74,.3)}
.trade-sync__btn--cancel{background:var(--card);color:var(--danger);border:1px solid var(--border);margin-top:4px}
.trade-sync__btn--cancel:hover{background:var(--danger-weak);border-color:var(--danger)}
@media (max-width:700px){.trade-sync__grid{grid-template-columns:1fr;grid-template-rows:auto auto auto}.trade-sync__side{max-height:200px}.trade-sync__list{max-height:140px}}

.trade-sync-proposal-toast{display:flex;flex-direction:column;gap:8px}
.trade-sync-proposal-toast .toast__progress--proposal{animation:toast-progress linear forwards}
.trade-sync-proposal-actions{display:flex;gap:8px;margin-top:4px}
.trade-sync-proposal-actions button{padding:6px 12px;border-radius:8px;border:none;font-weight:700;cursor:pointer;font-size:13px}
.trade-sync-proposal-actions button[data-trade-accept]{background:var(--primary);color:#fff}
.trade-sync-proposal-actions button[data-trade-decline]{background:var(--card);color:var(--muted);border:1px solid var(--border)}
.trade-sync__item[data-creature-id]{cursor:pointer}
.trade-sync__item[data-creature-id]:hover{background:rgba(37,99,235,.1);border-color:rgba(37,99,235,.4)}
.trade-sync{position:relative;}
.trade-sync-picker{position:absolute;inset:0;z-index:20;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center}
.trade-sync-picker-box{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;max-width:360px;width:min(360px,100% - 32px);max-height:70vh;overflow:auto;box-shadow:0 10px 40px rgba(0,0,0,.2)}
.trade-sync-picker-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.trade-sync-picker-item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;border:1px solid var(--border);background:var(--soft);cursor:pointer;transition:background .15s}
.trade-sync-picker-item:hover{background:rgba(37,99,235,.08);border-color:var(--primary)}
.trade-sync-picker-item img{width:40px;height:40px;object-fit:contain;image-rendering:pixelated;border-radius:8px}
.trade-sync-picker-close{width:100%;padding:8px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--text);font-weight:600;cursor:pointer;margin-top:8px}
.trade-sync-picker-close:hover{background:var(--primary-weak);border-color:var(--primary);color:var(--primary)}
@media (max-width:700px){
  .trade-sync-picker{align-items:flex-end;justify-content:center}
  .trade-sync-picker-box{width:100%;max-width:none;border-radius:16px 16px 0 0;max-height:70vh;margin:0}
}

/* ═══ Dex: Natures table (Характеры) ═══ */
.dex-natures-page{max-width:min(900px,100%);margin:0 auto;padding:16px 12px}
.dex-natures__head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.dex-natures__title{margin:0;font-size:22px;font-weight:800;color:var(--text);letter-spacing:-.02em;flex:1;min-width:0}
.dex-natures__close{flex-shrink:0}
.dex-natures__hint{margin:0 0 20px;font-size:14px;color:var(--muted);line-height:1.45}
.dex-natures-grid-wrap{overflow-x:auto;margin-bottom:24px;-webkit-overflow-scrolling:touch}
.dex-natures-table{width:100%;border-collapse:collapse;font-size:13px;min-width:480px}
.dex-natures-table__corner,.dex-natures-table__col-head,.dex-natures-table__row-head{padding:8px 6px;text-align:center;font-weight:700;color:var(--muted);background:var(--soft);border:1px solid var(--border);font-size:11px}
.dex-natures-table__col-head{min-width:72px}
.dex-natures-table__row-head{min-width:64px;text-align:right}
.dex-natures-table__cell{padding:6px;border:1px solid var(--border);vertical-align:top;background:var(--card)}
.dex-natures-cell{padding:10px 8px;border-radius:10px;background:linear-gradient(135deg,var(--soft),var(--card));border:1px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,.04)}
.dex-natures-cell--neutral{background:linear-gradient(135deg,var(--soft),var(--border));opacity:.95}
.dex-natures-cell__name{font-weight:800;font-size:14px;color:var(--text);margin-bottom:2px}
.dex-natures-cell__en{font-size:11px;color:var(--muted);margin-bottom:6px}
.dex-natures-cell__neutral-label{font-size:12px;color:var(--muted);font-style:italic}
.dex-natures-cell__mods{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.dex-natures-cell__mod{display:inline-block;padding:4px 8px;border-radius:8px;font-size:11px;font-weight:700;color:#fff}
.dex-natures-cell__mod--plus{background:var(--ok);box-shadow:0 1px 2px rgba(22,163,74,.3)}
.dex-natures-cell__mod--minus{background:var(--danger);box-shadow:0 1px 2px rgba(220,38,38,.3)}

/* Mobile: table hidden, list of cards shown */
.dex-natures-list{display:none}
@media (max-width:640px){
  .dex-natures-grid-wrap{display:none}
  .dex-natures-list{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:24px}
  .dex-natures-list[aria-hidden="true"]{display:grid}
  .dex-natures-card{padding:14px 12px;border-radius:12px;background:var(--card);border:1px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,.06)}
  .dex-natures-card--neutral{background:var(--soft)}
  .dex-natures-card__name{font-weight:800;font-size:15px;color:var(--text)}
  .dex-natures-card__en{font-size:12px;color:var(--muted);margin-top:2px}
  .dex-natures-card__neutral-label{font-size:13px;color:var(--muted);margin-top:6px;font-style:italic}
  .dex-natures-card__mods{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
  .dex-natures__title{font-size:20px}
  .dex-natures__hint{font-size:13px}
}