:root {
    --bg: #0f0e17;
    --surface: #1a1826;
    --surface2: #231f35;
    --border: #2e2a44;
    --accent: #ff6b9d;
    --accent2: #c77dff;
    --accent3: #7ec8e3;
    --gold: #ffd166;
    --green: #06d6a0;
    --red: #ef476f;
    --text: #eaeaea;
    --muted: #9b95b8;
    --mono: 'JetBrains Mono', monospace;
    --sans: 'Nunito', sans-serif;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html, body {
    height: 100%;
    overflow: hidden;
  }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    height: 100%;
    height: 100dvh; /* mobile browsers: avoids toolbar overlap */
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* BG Stars */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
      radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.15) 0%, transparent 100%),
      radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.1) 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 80% 20%, rgba(255,255,255,0.12) 0%, transparent 100%),
      radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.08) 0%, transparent 100%),
      radial-gradient(2px 2px at 10% 60%, rgba(199,125,255,0.1) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
  }

  /* HEADER */
  header {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: rgba(26,24,38,0.9);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(8px);
    gap: 12px;
    flex-wrap: wrap;
  }

  .logo {
    font-size: 1.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.5px;
  }

  /* ── Mailbox button ─────────────────────────────────────────────── */
  .mailbox-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, border-color .15s, transform .1s;
    -webkit-text-fill-color: initial;
  }
  .mailbox-btn:hover { background: rgba(199,125,255,0.15); border-color: rgba(199,125,255,0.4); }
  .mailbox-btn:active { transform: scale(.93); }
  .mailbox-badge {
    position: absolute; top: -5px; right: -5px;
    min-width: 16px; height: 16px;
    background: #ef476f; color: #fff;
    font-size: 0.6rem; font-weight: 900; font-family: 'Nunito', sans-serif;
    border-radius: 8px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #0d0d1a;
    animation: mailbox_pop .25s ease;
  }
  @keyframes mailbox_pop { from { transform: scale(0) } to { transform: scale(1) } }

  .stats-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
  }

  .stat-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
  }

  .stat-chip .icon { font-size: 1rem; }
  .stat-chip .val { color: var(--gold); }
  .stat-chip .val.green { color: var(--green); }
  .stat-chip .val.pink { color: var(--accent); }

  /* MAIN LAYOUT */
  .app {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: var(--sidebar-w, 200px) 6px 1fr 6px var(--panel-w, 220px);
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
  }

  .resize-handle {
    position: relative;
    z-index: 10;
    cursor: col-resize;
    background: transparent;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .resize-handle::after {
    content: '';
    width: 2px;
    height: 40px;
    border-radius: 2px;
    background: transparent;
    transition: background 0.2s, height 0.2s;
  }
  .resize-handle:hover::after,
  .resize-handle.dragging::after {
    background: var(--accent, #c77dff);
    height: 60px;
  }
  .resize-handle.dragging {
    background: rgba(199,125,255,0.06);
  }

  /* SIDEBAR */
  .sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: 12px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    min-height: 0;
    height: 100%;
  }

  .sidebar-section {
    padding: 6px 12px 2px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
  }

  .sb-group { border-bottom: 1px solid var(--border); }

  .sb-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 14px;
    background: none;
    border: none;
    color: var(--text);
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
  }
  .sb-group-header:hover { background: var(--surface2); }

  .sb-arrow {
    font-size: 0.7rem;
    color: var(--muted);
    transition: transform 0.2s;
  }
  .sb-group:not(.open) .sb-arrow { transform: rotate(-90deg); }

  .sb-group-body {
    overflow: hidden;
    max-height: 500px;
    transition: max-height 0.25s ease, opacity 0.2s ease;
    opacity: 1;
  }
  .sb-group:not(.open) .sb-group-body {
    max-height: 0;
    opacity: 0;
  }

  .cmd-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 16px;
    background: none;
    border: none;
    color: var(--text);
    font-family: var(--sans);
    font-size: 0.87rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    border-radius: 0;
    transition: background 0.15s;
  }

  .cmd-btn:hover { background: var(--surface2); }
  .cmd-btn.active { background: rgba(255,107,157,0.15); color: var(--accent); }
  .cmd-btn .em { font-size: 1rem; flex-shrink: 0; }

  /* CHAT AREA */
  .chat-area {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    height: 100%;
  }

  .messages {
    flex: 1 1 0;
    overflow-y: scroll;
    padding: 16px;
    padding-bottom: 48px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    min-height: 0;
  }

  /* MSG BUBBLES */
  .msg {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    animation: fadeUp 0.25s ease;
  }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .msg-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    background: var(--surface2);
    border: 2px solid var(--border);
  }

  .msg-avatar.bot { background: linear-gradient(135deg, #2d1b5e, #1a0f40); border-color: var(--accent2); }
  .msg-avatar.user { background: linear-gradient(135deg, #1a2e4a, #0f1e35); border-color: var(--accent3); }

  .msg-body { flex: 1; min-width: 0; }
  .msg-name {
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 3px;
  }
  .msg-name.bot { color: var(--accent2); }
  .msg-name.user { color: var(--accent3); }

  .msg-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px 12px 12px 12px;
    padding: 10px 14px;
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: min(680px, calc(100% - 20px));
    word-break: break-word;
    box-sizing: border-box;
    overflow: hidden;
  }
  /* When msg-content contains inv-wrap, go transparent and fill available width */
  .msg-content:has(.inv-wrap),
  .msg-content:has(.ys-gchat-slot) {
    background: transparent;
    border: none;
    padding: 0;
    overflow: visible;
    max-width: none;
  }

  .msg.user .msg-content {
    border-radius: 12px 4px 12px 12px;
    background: var(--surface2);
  }

  /* Rich content bubbles (inv, zoo, weapons, battle) */
  .msg-content-rich {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    overflow: visible !important;
    max-width: none !important;
  }
  /* Ensure all direct embeds and inv-wraps inside msg-content don't overflow */
  .msg-content > .embed,
  .msg-content > .inv-wrap,
  .msg-body > .msg-content > .embed {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* EMBED CARDS */
  .embed {
    border-left: 4px solid var(--accent2);
    background: var(--card-surface);
    border-radius: 0 var(--card-radius) var(--card-radius) 0;
    padding: 12px 14px;
    margin-top: 0;
    width: fit-content;
    max-width: min(660px, 100%);
    box-sizing: border-box;
  }
  /* Battle embed: fixed width so cards never expand it; positioned so canvas effects stay inside */
  .embed.battle-embed {
    width: min(660px, 100%);
    position: relative;
    overflow: hidden;
  }

  .embed.success { border-color: var(--green); }
  .embed.danger { border-color: var(--red); }
  .embed.gold { border-color: var(--gold); }

  .embed-title {
    font-weight: 800;
    font-size: 0.92rem;
    margin-bottom: 6px;
    color: var(--accent2);
  }

  .embed.success .embed-title { color: var(--green); }
  .embed.danger .embed-title { color: var(--red); }
  .embed.gold .embed-title { color: var(--gold); }

  .embed-desc { font-size: 0.85rem; color: var(--text); line-height: 1.6; }
  .embed-fields { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
  .embed-field { flex: 1; min-width: 80px; }
  .ef-label { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 2px; }
  .ef-val { font-size: 0.88rem; font-weight: 700; color: var(--text); }

  /* RARITY BADGES */
  .badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.3px;
  }
  .badge.common { background: #2a2a2a; color: #aaa; }
  .badge.uncommon { background: #1a3a1a; color: #4caf50; }
  .badge.rare { background: #1a2a4a; color: #64b5f6; }
  .badge.epic { background: #2a1a4a; color: #ce93d8; }
  .badge.mythical { background: #3a1a1a; color: #ff8a65; }
  .badge.legendary { background: #3a2a00; color: var(--gold); }
  .badge.fabled { background: #4a001a; color: var(--accent); }

  /* ANIMAL GRID */
  .animal-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .animal-card {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 0.82rem;
    font-weight: 600;
  }

  /* WEAPON FILTER PILLS */
  .weap-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 20px; border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04); color: var(--muted);
    font-size: .65rem; font-weight: 700; cursor: pointer;
    transition: all .15s ease; white-space: nowrap; letter-spacing: .3px;
  }
  .weap-pill:hover { background: rgba(255,255,255,.09); color: #fff; border-color: rgba(255,255,255,.25); }
  .weap-pill--active {
    background: rgba(126,200,227,.18); color: #7ec8e3;
    border-color: rgba(126,200,227,.5); box-shadow: 0 0 8px rgba(126,200,227,.15);
  }

  /* BATTLE UI */
  .battle-arena {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
  }
  .battler {
    flex: 1;
    min-width: 120px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    transition: border-color 0.3s, background 0.3s;
  }
  .battler.active-attacker { border-color: var(--accent); background: rgba(255,107,157,0.07); }
  .battler.fainted { opacity: 0.38; filter: grayscale(1); }
  .battler-name { font-size: 0.8rem; font-weight: 800; margin-bottom: 4px; }
  .battler-emoji { font-size: 2rem; display: block; margin: 4px 0; transition: transform 0.15s; }
  .battler-emoji.attack-anim { animation: battlePunch 0.3s ease; }
  @keyframes battlePunch {
    0%   { transform: scale(1) translateX(0); }
    40%  { transform: scale(1.35) translateX(6px); }
    100% { transform: scale(1) translateX(0); }
  }
  .battler-emoji.hit-anim { animation: battleHit 0.3s ease; }
  @keyframes battleHit {
    0%   { transform: scale(1) translateX(0); }
    30%  { transform: scale(0.82) translateX(-5px); }
    100% { transform: scale(1) translateX(0); }
  }
  .hp-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-top: 4px; }
  .hp-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
  .hp-fill.high { background: var(--green); }
  .hp-fill.mid { background: var(--gold); }
  .hp-fill.low { background: var(--red); }
  .hp-text { font-size: 0.68rem; color: var(--muted); margin-top: 2px; font-family: var(--mono); }
  .vs-text { font-size: 1.2rem; font-weight: 900; color: var(--accent); flex-shrink: 0; }

  /* 3v3 team rows */
  .battle-teams {
    display: grid;
    grid-template-columns: minmax(0,1fr) 36px minmax(0,1fr);
    gap: 0;
    margin-top: 10px;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
  }
  .battle-vs-col {
    display: flex; align-items: center; justify-content: center;
    padding-top: 0; align-self: center;
  }
  .battle-vs-label {
    font-size: 1.1rem; font-weight: 900; color: var(--accent);
    writing-mode: horizontal-tb; letter-spacing: 2px;
    opacity: .85; text-align: center;
  }
  .battle-team-side {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
  }
  .battle-team-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--muted);
    margin-bottom: 2px;
  }
  /* ── BATTLE PET CARD ── */
  .battle-pet-row {
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px 10px;
    transition: border-color 0.25s, background 0.25s, opacity 0.4s, box-shadow 0.25s;
    font-size: 0.8rem;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
  }
  .battle-pet-row::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--bpr-color, var(--border)), transparent);
    border-radius: 12px 12px 0 0; z-index: 1;
  }
  /* Animated texture overlay */
  .battle-pet-row::after {
    content: '';
    position: absolute; inset: 0; border-radius: 12px; z-index: 0; pointer-events: none;
    opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    animation: textureDrift 12s linear infinite;
  }
  @keyframes textureDrift {
    0%   { background-position: 0% 0%; }
    25%  { background-position: 100% 0%; }
    50%  { background-position: 100% 100%; }
    75%  { background-position: 0% 100%; }
    100% { background-position: 0% 0%; }
  }
  /* Ensure card content sits above texture */
  .bpr-top, .bpr-status-row { position: relative; z-index: 1; }
  .battle-pet-row.active-row {
    border-color: rgba(255,255,255,0.5) !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01));
    animation: activeTurnPulse 1.1s ease-in-out infinite;
  }
  @keyframes activeTurnPulse {
    0%,100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.10); }
    50%      { box-shadow: 0 0 0 2px rgba(255,255,255,0.30), 0 0 14px rgba(255,255,255,0.07); }
  }
  .battle-pet-row.fainted-row { opacity: 0.28; filter: grayscale(1); }

  /* Top row: avatar + info */
  .bpr-top { display: flex; align-items: flex-start; gap: 8px; }
  .bpr-avatar-col {
    display: flex; flex-direction: column; align-items: center;
    gap: 4px; flex-shrink: 0; width: 44px;
  }
  .bpr-avatar {
    width: 40px; height: 40px; flex-shrink: 0;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    position: relative;
  }
  .bpr-lv {
    position: absolute; bottom: -5px; right: -5px;
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: 5px; font-size: 0.5rem; font-weight: 900;
    color: #06d6a0; padding: 1px 4px; font-family: var(--mono);
    white-space: nowrap;
  }
  .bpr-info { flex: 1; min-width: 0; max-width: 100%; overflow: hidden; }
  .bpr-name { font-weight: 800; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* HP/WP bars */
  .bpr-bars { margin-top: 5px; display: flex; flex-direction: column; gap: 3px; }
  .bpr-bar-row { display: flex; align-items: center; gap: 4px; }
  .bpr-bar-label { font-size: 0.55rem; font-weight: 800; letter-spacing: 0.5px; width: 16px; flex-shrink: 0; font-family: var(--mono); }
  .bpr-bar-label.hp  { color: #ef476f; }
  .bpr-bar-label.wp  { color: #7ec8e3; }
  .bpr-bar-track { flex: 1; min-width: 0; height: 5px; background: rgba(255,255,255,0.07); border-radius: 3px; overflow: visible; position: relative; }
  .bpr-fill { height: 100%; border-radius: 3px; transition: width 0.4s cubic-bezier(.4,0,.2,1); max-width: 100%; }
  .bpr-fill.high { background: linear-gradient(90deg, #06d6a0, #4dffc3); }
  .bpr-fill.mid  { background: linear-gradient(90deg, #ffd166, #ffec99); }
  .bpr-fill.low  { background: linear-gradient(90deg, #ef476f, #ff8fab); }
  .bpr-fill.wp   { background: linear-gradient(90deg, #7ec8e3, #b8e4f4); }
  /* Overheal: bar stays at 100% with golden shimmer + pulse */
  .bpr-fill.overheal {
    background: linear-gradient(90deg, #06d6a0, #ffd166, #06d6a0);
    background-size: 200% 100%;
    animation: overhealShimmer 1.4s linear infinite;
    box-shadow: 0 0 6px #ffd16688;
    max-width: 100%; width: 100% !important;
  }
  @keyframes overhealShimmer {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
  }
  .bpr-bar-num { font-size: 0.5rem; color: var(--muted); font-family: var(--mono); width: 58px; min-width: 58px; max-width: 58px; text-align: right; flex-shrink: 0; overflow: hidden; }
  /* Overheal text: gold color */
  .bpr-bar-num.overheal-txt { color: #ffd166; font-weight: 800; }

  /* Stat pills — no wrap, fixed layout */
  .bpr-stats { display: flex; flex-wrap: nowrap; gap: 3px; margin-top: 5px; overflow: hidden; }
  .bpr-stat-pill {
    display: flex; align-items: center; gap: 2px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 5px; padding: 1px 5px;
    font-size: 0.52rem; font-family: var(--mono); font-weight: 700;
  }
  .bpr-stat-pill .spl { color: var(--muted); }
  .bpr-stat-pill .spv { color: var(--text); }

  /* Weapon row — strict single line, never wraps */
  .bpr-weapon {
    margin-top: 5px; display: flex; align-items: center; gap: 4px;
    background: rgba(126,200,227,0.07); border: 1px solid rgba(126,200,227,0.18);
    border-radius: 6px; padding: 3px 7px; font-size: 0.6rem;
    overflow: hidden; white-space: nowrap; height: 24px; flex-shrink: 0;
  }
  /* Weapon role colors */
  .bpr-weapon.role-phys    { background:rgba(255,138,101,.08); border-color:rgba(255,138,101,.25); }
  .bpr-weapon.role-magic   { background:rgba(199,125,255,.08); border-color:rgba(199,125,255,.25); }
  .bpr-weapon.role-heal    { background:rgba(6,214,160,.08);   border-color:rgba(6,214,160,.25); }
  .bpr-weapon.role-tank    { background:rgba(100,181,246,.08); border-color:rgba(100,181,246,.25); }
  .bpr-weapon.role-support { background:rgba(255,209,102,.08); border-color:rgba(255,209,102,.25); }
  .bpr-weapon.role-passive { background:rgba(150,150,150,.08); border-color:rgba(150,150,150,.25); }
  .bpr-weapon-name {
    font-weight: 800; color: var(--accent3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex-shrink: 1; min-width: 0; max-width: 80px;
  }
  .bpr-weapon.role-phys    .bpr-weapon-name { color: #ff8a65; }
  .bpr-weapon.role-magic   .bpr-weapon-name { color: #c77dff; }
  .bpr-weapon.role-heal    .bpr-weapon-name { color: #06d6a0; }
  .bpr-weapon.role-tank    .bpr-weapon-name { color: #64b5f6; }
  .bpr-weapon.role-support .bpr-weapon-name { color: #ffd166; }
  /* Passive tags by type */
  .bpr-passive-tag {
    display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
    background: rgba(255,209,102,0.1); border: 1px solid rgba(255,209,102,0.2);
    border-radius: 4px; padding: 1px 5px; font-size: 0.52rem; font-weight: 700; color: var(--gold);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 68px;
  }
  /* Passive tag colors by effect type */
  .bpr-passive-tag.pass-atk    { background:rgba(255,138,101,.12); border-color:rgba(255,138,101,.3); color:#ff8a65; }
  .bpr-passive-tag.pass-magic  { background:rgba(199,125,255,.12); border-color:rgba(199,125,255,.3); color:#c77dff; }
  .bpr-passive-tag.pass-heal   { background:rgba(6,214,160,.12);   border-color:rgba(6,214,160,.3);   color:#06d6a0; }
  .bpr-passive-tag.pass-tank   { background:rgba(100,181,246,.12); border-color:rgba(100,181,246,.3); color:#64b5f6; }
  .bpr-passive-tag.pass-debuff { background:rgba(239,71,111,.12);  border-color:rgba(239,71,111,.3);  color:#ef476f; }
  .bpr-passive-tag.pass-util   { background:rgba(255,209,102,.12); border-color:rgba(255,209,102,.3); color:#ffd166; }
  .bpr-buff  { background: rgba(6,214,160,0.12); border-color: rgba(6,214,160,0.25); color: #06d6a0; }
  .bpr-debuff{ background: rgba(239,71,111,0.12); border-color: rgba(239,71,111,0.25); color: #ef476f; }

  /* Battle log */
  .battle-log-wrap { position: relative; margin-top: 10px; }
  .battle-log-controls { display:flex; align-items:center; gap:4px; justify-content:flex-end; margin-bottom:5px; }

  .battle-log-copy {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px; color: var(--muted); font-size: .58rem; font-weight: 700;
    padding: 3px 9px; cursor: pointer; letter-spacing: .3px; transition: all .15s; margin-left: 2px;
  }
  .battle-log-copy:hover { background: rgba(255,255,255,.13); color: #fff; }
  .battle-log-copy.copied { color: #06d6a0; border-color: rgba(6,214,160,.4); }
  .battle-log {
    font-size: 0.78rem;
    line-height: 1.8;
    color: var(--muted);
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 10px;
    background: rgba(0,0,0,.2);
    border: 1px solid var(--border);
    border-radius: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.12) transparent;
  }
  .battle-log::-webkit-scrollbar { width: 4px; }
  .battle-log::-webkit-scrollbar-track { background: transparent; }
  .battle-log::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }
  .battle-log .log-line { animation: fadeUp 0.18s ease; padding: 1px 0; }
  /* Turn dividers */
  .battle-log .log-round  { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: 1.5px; margin: 6px 0 2px; opacity: .7; }
  .battle-log .log-turn-p { color: var(--accent2); font-size: .7rem; font-weight: 800; letter-spacing: 1px; padding: 2px 0; }
  .battle-log .log-turn-e { color: #ef476f; font-size: .7rem; font-weight: 800; letter-spacing: 1px; padding: 2px 0; }
  /* Attack types */
  .battle-log .log-hit    { color: var(--text); }
  .battle-log .log-crit   { color: var(--gold); font-weight: 700; }
  .battle-log .log-miss   { color: var(--muted); font-style: italic; opacity: .7; }
  .battle-log .log-weapon { color: #7ec8e3; font-weight: 700; }
  /* Status */
  .battle-log .log-buff   { color: #06d6a0; }
  .battle-log .log-debuff { color: #ff8a65; }
  .battle-log .log-dot    { color: #c77dff; }
  .battle-log .log-passive{ color: #ffd166; font-style: italic; font-size: .73rem; }
  .battle-log .log-faint  { color: var(--red); font-weight: 800; }
  .battle-log .log-win    { color: var(--green); font-weight: 800; }
  .battle-log .log-lose   { color: var(--red); font-weight: 800; }
  .battle-log .log-hp     { color: var(--muted); font-size: .68rem; opacity: .75; }

  /* WEAPON PROJECTILE EFFECTS */
  .wpfx-projectile {
    position: fixed; pointer-events: none; z-index: 99999;
    font-size: 1.4rem; line-height: 1;
    transform-origin: center;
    will-change: transform, opacity;
  }
  .wpfx-burst {
    position: fixed; pointer-events: none; z-index: 99999;
    font-size: 1.8rem; line-height: 1;
    animation: wpfxBurst .5s ease forwards;
  }
  .wpfx-aoe-ring {
    position: fixed; pointer-events: none; z-index: 99999;
    border-radius: 50%; border: 2px solid;
    animation: wpfxRing .5s ease forwards;
  }
  @keyframes wpfxBurst {
    0%   { transform: scale(0.3); opacity: 1; }
    60%  { transform: scale(1.6); opacity: 1; }
    100% { transform: scale(2.2); opacity: 0; }
  }
  @keyframes wpfxRing {
    0%   { width: 0; height: 0; opacity: 0.9; margin: 0; }
    100% { width: 80px; height: 80px; margin: -40px; opacity: 0; }
  }

  /* BATTLE STATUS ICONS */
  .bpr-status-row {
    display: flex; flex-direction: column; gap: 2px; align-items: center;
    width: 100%; overflow: hidden;
  }
  .bpr-fx {
    display: inline-flex; align-items: center; justify-content: center; gap: 2px;
    padding: 1px 4px; border-radius: 6px; width: 100%; box-sizing: border-box;
    font-size: .48rem; font-weight: 800; letter-spacing: .2px;
    border: 1px solid; white-space: nowrap;
    animation: bprFxIn .2s ease;
  }
  @keyframes bprFxIn { from { opacity:0; transform:scale(.7); } to { opacity:1; transform:scale(1); } }
  .bpr-fx-poison  { background:rgba(199,125,255,.18); color:#c77dff; border-color:#c77dff44; }
  .bpr-fx-flame   { background:rgba(255,138,101,.18); color:#ff8a65; border-color:#ff8a6544; }
  .bpr-fx-freeze  { background:rgba(100,181,246,.18); color:#64b5f6; border-color:#64b5f644; }
  .bpr-fx-taunt   { background:rgba(255,209,102,.18); color:#ffd166; border-color:#ffd16644; }
  .bpr-fx-defup   { background:rgba(6,214,160,.18);   color:#06d6a0; border-color:#06d6a044; }
  .bpr-fx-leech   { background:rgba(100,100,220,.18); color:#8888ff; border-color:#8888ff44; }
  .bpr-fx-mort    { background:rgba(239,71,111,.18);  color:#ef476f; border-color:#ef476f44; }
  .bpr-fx-stinky  { background:rgba(180,180,60,.18);  color:#c8c830; border-color:#c8c83044; }
  .bpr-fx-atkup   { background:rgba(255,107,157,.18); color:#ff6b9d; border-color:#ff6b9d44; }
  .bpr-fx-celeb   { background:rgba(255,209,102,.18); color:#ffd166; border-color:#ffd16644; }
  .bpr-fx-tether  { background:rgba(6,214,160,.18);   color:#06d6a0; border-color:#06d6a044; }

  /* BATTLE CARD EFFECT STATES */

  /* ── Debuffs: border color change ONLY, no glow ── */
  .bpr-has-poison  .bpr-avatar { border-color: #c77dff !important; box-shadow: 0 0 10px #c77dff55, inset 0 0 10px #c77dff18; }
  .bpr-has-flame   .bpr-avatar { border-color: #ff8a65 !important; box-shadow: 0 0 10px #ff8a6555, inset 0 0 10px #ff8a6518; animation: fxPulse-flame 1.2s ease-in-out infinite; }
  .bpr-has-freeze  .bpr-avatar { border-color: #64b5f6 !important; box-shadow: 0 0 10px #64b5f655, inset 0 0 10px #64b5f618; }
  .bpr-has-mort    .bpr-avatar { border-color: #ef476f !important; box-shadow: 0 0 10px #ef476f55, inset 0 0 10px #ef476f18; }
  .bpr-has-leech   .bpr-avatar { border-color: #8888ff !important; box-shadow: 0 0 10px #8888ff55, inset 0 0 10px #8888ff18; }
  .bpr-has-stinky  .bpr-avatar { border-color: #c8c830 !important; box-shadow: 0 0 8px #c8c83044; }
  @keyframes fxPulse-flame { 0%,100%{box-shadow:0 0 8px #ff8a6555,inset 0 0 8px #ff8a6514;} 50%{box-shadow:0 0 18px #ff8a65aa,inset 0 0 14px #ff8a6530;} }

  /* ── Buffs: border + soft inward glow ── */
  .bpr-has-taunt  .bpr-avatar { border-color: #ffd166 !important; box-shadow: 0 0 14px #ffd16677, inset 0 0 14px #ffd1661a; animation: fxPulse-taunt 1.4s ease-in-out infinite; }
  .bpr-has-defup  .bpr-avatar { border-color: #06d6a0 !important; box-shadow: 0 0 12px #06d6a066, inset 0 0 12px #06d6a018; }
  .bpr-has-atkup  .bpr-avatar { border-color: #ff6b9d !important; box-shadow: 0 0 12px #ff6b9d66, inset 0 0 12px #ff6b9d18; animation: fxPulse-atkup 1s ease-in-out infinite; }
  .bpr-has-celeb  .bpr-avatar { border-color: #ffd166 !important; box-shadow: 0 0 16px #ffd16688, inset 0 0 14px #ffd1661f; animation: fxPulse-celeb 1.8s ease-in-out infinite; }
  .bpr-has-tether .bpr-avatar { border-color: #06d6a0 !important; box-shadow: 0 0 10px #06d6a044, inset 0 0 10px #06d6a012; }
  @keyframes fxPulse-taunt  { 0%,100%{box-shadow:0 0 10px #ffd16655,inset 0 0 10px #ffd16614;} 50%{box-shadow:0 0 22px #ffd166cc,inset 0 0 18px #ffd16630;} }
  @keyframes fxPulse-atkup  { 0%,100%{box-shadow:0 0 8px #ff6b9d44,inset 0 0 8px #ff6b9d12;} 50%{box-shadow:0 0 18px #ff6b9d99,inset 0 0 14px #ff6b9d28;} }
  @keyframes fxPulse-celeb  { 0%,100%{box-shadow:0 0 12px #ffd16666,inset 0 0 10px #ffd16618;} 50%{box-shadow:0 0 24px #ffd166bb,inset 0 0 18px #ffd16635;} }

  /* ── Top accent bar color per dominant effect ── */
  .bpr-has-poison::before { background: linear-gradient(90deg,#c77dff,transparent) !important; }
  .bpr-has-flame::before  { background: linear-gradient(90deg,#ff8a65,transparent) !important; }
  .bpr-has-freeze::before { background: linear-gradient(90deg,#64b5f6,transparent) !important; }
  .bpr-has-taunt::before  { background: linear-gradient(90deg,#ffd166,transparent) !important; }
  .bpr-has-defup::before  { background: linear-gradient(90deg,#06d6a0,transparent) !important; }
  .bpr-has-atkup::before  { background: linear-gradient(90deg,#ff6b9d,transparent) !important; }
  .bpr-has-celeb::before  { background: linear-gradient(90deg,#ffd166,#ff6b9d,transparent) !important; }
  .bpr-has-mort::before   { background: linear-gradient(90deg,#ef476f,transparent) !important; }
  .bpr-has-leech::before  { background: linear-gradient(90deg,#8888ff,transparent) !important; }
  .bpr-has-stinky::before { background: linear-gradient(90deg,#c8c830,transparent) !important; }
  .bpr-has-tether::before { background: linear-gradient(90deg,#06d6a0,transparent) !important; }

  /* ZOO DISPLAY */
  .zoo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:8px; width:100%; }
  /* zoo-entry now uses inv-card styles — see zoo_styles injection */

  /* SLOTS */
  .slots-display {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin: 8px 0;
  }
  .slot-reel {
    width: 56px;
    height: 56px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    transition: transform 0.1s;
  }
  .slot-reel.spin { animation: spinReel 0.5s ease; }
  @keyframes spinReel {
    0% { transform: translateY(-4px); }
    50% { transform: translateY(4px); }
    100% { transform: translateY(0); }
  }
  .slot-reel.win { border-color: var(--gold); box-shadow: 0 0 12px rgba(255,209,102,0.3); }

  /* INPUT WRAP + AUTOCOMPLETE */
  .input-wrap { position: relative; }

  .cmd-autocomplete {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0; right: 0;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    z-index: 300;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.35);
  }
  .cmd-autocomplete.open { display: block; }

  .cmd-ac-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.1s;
    font-family: var(--mono);
    font-size: 0.82rem;
  }
  .cmd-ac-item:last-child { border-bottom: none; }
  .cmd-ac-item:hover,
  .cmd-ac-item.ac-active { background: rgba(255,255,255,0.07); }
  .cmd-ac-cmd { color: var(--text); font-weight: 700; flex-shrink: 0; }
  .cmd-ac-cmd mark { background: none; color: var(--accent2); font-style: normal; }
  .cmd-ac-args { color: var(--muted); font-size: 0.75rem; flex-shrink: 0; }
  .cmd-ac-hint {
    color: var(--muted);
    font-size: 0.7rem;
    margin-left: auto;
    font-family: var(--sans);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cmd-ac-usage {
    font-size: 0.6rem;
    background: rgba(199,125,255,0.12);
    border: 1px solid rgba(199,125,255,0.2);
    color: var(--accent);
    border-radius: 4px;
    padding: 1px 5px;
    flex-shrink: 0;
    font-family: var(--sans);
    font-weight: 700;
  }

  /* ── Mention autocomplete ── */
  .chat-mention-ac {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0; right: 0;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    z-index: 300;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.35);
    max-height: 260px;
    overflow-y: auto;
  }
  .chat-mention-ac.open { display: block; }
  .cm-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.1s;
  }
  .cm-item:last-child { border-bottom: none; }
  .cm-item:hover, .cm-item.cm-active { background: rgba(255,255,255,0.07); }
  .cm-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; font-weight: 800;
    flex-shrink: 0;
    overflow: hidden;
  }
  .cm-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .cm-display { font-size: 0.83rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cm-user { font-size: 0.7rem; color: var(--muted); font-family: var(--mono); }
  .cm-user mark { background: none; color: var(--accent2); font-style: normal; font-weight: 700; }

  /* @mention highlight in chat messages */
  .chat-at-mention { color: var(--accent2); font-weight: 700; background: rgba(139,92,246,0.12); border-radius: 3px; padding: 0 3px; }
  .chat-at-mention--me { color: #fff; background: rgba(139,92,246,0.45); }

  /* INPUT BAR */
  .input-bar {
    padding: 12px 16px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .prefix-badge {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--accent2);
    font-weight: 700;
    flex-shrink: 0;
  }

  #cmd-input {
    flex: 1;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.88rem;
    padding: 8px 14px;
    outline: none;
    transition: border-color 0.2s;
  }

  #cmd-input:focus { border-color: var(--accent2); }
  #cmd-input::placeholder { color: var(--muted); }

  .send-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    border: none;
    border-radius: 8px;
    color: #fff;
    padding: 8px 18px;
    font-family: var(--sans);
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    flex-shrink: 0;
  }
  .send-btn:hover { opacity: 0.9; transform: scale(1.03); }
  .send-btn:active { transform: scale(0.97); }

  /* RIGHT PANEL */
  .right-panel {
    background: var(--surface);
    border-left: 1px solid var(--border);
    overflow-y: auto;
    padding: 14px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    height: 100%;
  }

  .panel-section { }
  .panel-title {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
  }

  .team-slot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 5px;
    font-size: 0.82rem;
    font-weight: 600;
  }
  .team-slot .slot-em { font-size: 1.2rem; }
  .team-slot .slot-info { flex: 1; }
  .team-slot .slot-hp { font-size: 0.7rem; color: var(--muted); }

  .quest-item {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.8rem;
    margin-bottom: 6px;
  }
  .quest-item .qname { font-weight: 700; margin-bottom: 3px; }
  .qprog { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-top: 4px; }
  .qprog-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 2px; transition: width 0.4s; }

  .leaderboard-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--border);
  }
  .lb-rank { width: 20px; font-weight: 800; color: var(--muted); font-family: var(--mono); }
  .lb-rank.top { color: var(--gold); }
  .lb-name { flex: 1; font-weight: 600; }
  .lb-score { font-family: var(--mono); font-size: 0.78rem; color: var(--gold); }

  /* QUICK SUGGESTIONS — floats above input bar */
  .input-float {
    position: absolute;
    bottom: 100%;
    left: 0; right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 200;
    padding-bottom: 8px;
  }
  #yr-new-msg { pointer-events: auto; padding: 0 0 6px; }
  .suggestions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0 16px 4px;
    pointer-events: none;
  }
  .sug-btn {
    background: rgba(199, 125, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(199, 125, 255, 0.28);
    color: rgba(234, 234, 234, 0.8);
    border-radius: 12px;
    padding: 3px 10px;
    font-size: 0.75rem;
    font-family: var(--mono);
    cursor: pointer;
    transition: all 0.15s;
    pointer-events: auto;
  }
  .sug-btn:hover { border-color: var(--accent2); color: var(--accent2); background: rgba(199,125,255,0.25); }

  /* TYPING INDICATOR */
  .typing-indicator {
    display: none;
    gap: 4px;
    align-items: center;
    padding: 6px 14px;
    font-size: 0.78rem;
    color: var(--muted);
  }
  .typing-indicator.show { display: flex; }
  .dot { width: 5px; height: 5px; background: var(--muted); border-radius: 50%; animation: bounce 1.2s infinite; }
  .dot:nth-child(2) { animation-delay: 0.2s; }
  .dot:nth-child(3) { animation-delay: 0.4s; }
  @keyframes bounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-5px)} }

  /* SCROLLBAR */
  ::-webkit-scrollbar { width: 5px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

  @media (max-width: 700px) {
    .app { grid-template-columns: 1fr; }
    .sidebar, .right-panel, .resize-handle { display: none; }
  }

  /* ── INV / ZOO SHARED CARD STYLES (always loaded) ── */
  .inv-wrap{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:16px;width:100%;max-width:680px;box-sizing:border-box;overflow:visible;}
  .weap-pill-track{display:flex;gap:5px;flex-wrap:wrap;padding:2px 0;flex:1;}
  .weap-pill-row{display:flex;align-items:flex-start;gap:6px;}
  .inv-header{font-size:.72rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;gap:12px;}
  .inv-badge-pill{background:rgba(199,125,255,.15);color:#c77dff;border-radius:10px;padding:2px 10px;font-size:.7rem;font-weight:900;}
  .inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;width:100%;}
  .inv-card-wrap{position:relative;width:100%;max-width:130px;flex-shrink:0;}
  .inv-card{width:100%;height:180px;background:var(--surface);border:2px solid var(--border);border-radius:14px;padding:10px 8px 8px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;transition:border-color .2s,box-shadow .2s;overflow:visible;box-sizing:border-box;position:relative;}
  .inv-card.is-lootbox{cursor:pointer;}
  .inv-card.is-lootbox:hover{border-color:#c77dff;box-shadow:0 0 14px rgba(199,125,255,.25);}
  .inv-icon{font-size:2.1rem;line-height:1;display:block;flex-shrink:0;margin-bottom:1px;}
  .inv-name{font-size:.68rem;font-weight:900;color:var(--text);text-align:center;line-height:1.25;width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;}
  .inv-desc{font-size:.58rem;color:var(--muted);text-align:center;line-height:1.2;width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
  .inv-count{position:absolute;top:-6px;right:-6px;background:#c77dff;color:#fff;border-radius:10px;font-size:.65rem;font-weight:900;padding:2px 7px;border:2px solid var(--surface2);z-index:10;pointer-events:none;}
  .inv-card.is-gem,.inv-card.is-lootbox{cursor:pointer;}
  .inv-card.is-gem:hover{transform:translateY(-3px);box-shadow:0 8px 24px var(--gem-color,#c77dff44);}
  .inv-card.is-gem{transition:transform .2s ease,box-shadow .2s ease,border-color .2s;}
  .inv-open-btn,.inv-activate-btn{display:block;width:100%;margin-top:auto;padding:5px 0;border:none;border-radius:8px;color:#fff;font-family:'Nunito',sans-serif;font-size:.63rem;font-weight:900;letter-spacing:.5px;cursor:pointer;opacity:0;transform:translateY(6px);transition:opacity .18s,transform .18s;flex-shrink:0;position:static;}
  .inv-open-btn{background:linear-gradient(135deg,#7b2ff7,#c77dff);}
  .inv-card.is-lootbox:hover .inv-open-btn,.inv-card.is-gem:hover .inv-activate-btn{opacity:1;transform:translateY(0);}
  .inv-open-btn:hover,.inv-activate-btn:hover{filter:brightness(1.12);}

  /* ╔══════════════════════════════════════════════════════════╗
     ║          YUKIO REALM — GLOBAL DESIGN SYSTEM             ║
     ║   Three primitives: .yk-card  .yk-row  .yk-dialog      ║
     ╚══════════════════════════════════════════════════════════╝ */

  /* ── Design tokens (extended) ── */
  :root {
    --card-bg:       #1a1826;
    --card-surface:  #231f35;
    --card-border:   #2e2a44;
    --card-radius:   14px;
    --card-padding:  10px 8px 8px;

    --row-bg:        rgba(255,255,255,.03);
    --row-bg-active: rgba(126,200,227,.06);
    --row-border:    #2e2a44;
    --row-radius:    10px;
    --row-padding:   7px 10px;

    --dialog-bg:     linear-gradient(160deg,#1a1030,#0f0d1f);
    --dialog-border: #3d3660;
    --dialog-radius: 22px;
    --dialog-pad:    28px 24px 22px;
    --dialog-width:  320px;
    --dialog-shine:  linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);

    --btn-radius:    10px;
    --btn-font:      'Nunito', sans-serif;
    --tag-radius:    6px;
    --passive-green: rgba(6,214,160,.12);
    --passive-border:rgba(6,214,160,.25);
  }

  /* ══════════════════════════════
     1. ITEM CARD  (.yk-card)
     Grid: repeat(5, 1fr) cells
     Used: inventory, zoo, weapons
     ══════════════════════════════ */
  .yk-card {
    width: 100%;
    height: 180px;
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s, transform .15s;
    box-sizing: border-box;
  }
  .yk-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
  }
  /* All cards unified at 180px — .yk-card--tall kept as no-op for compat */
  .yk-card--tall { height: 180px; }

  /* Card inner elements */
  .yk-card__icon    { font-size: 2.1rem; margin-bottom: 3px; margin-top: 6px; flex-shrink: 0; }
  .yk-card__name    { font-size: .68rem; font-weight: 900; text-align: center; line-height: 1.25; color: var(--text); }
  .yk-card__sub     { font-size: .58rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
  .yk-card__lv      { font-size: .6rem;  font-weight: 800; color: var(--green); }
  .yk-card__desc    { font-size: .58rem; color: var(--muted); text-align: center; line-height: 1.4; }
  .yk-card__stats   { display: flex; gap: 3px; margin-top: 3px; font-size: .52rem; font-family: var(--mono); color: var(--muted); }
  .yk-card__stat-atk{ color: var(--red); }
  .yk-card__stat-wp { color: var(--accent3); }

  /* Top-left badge (TEAM / slot / equipped) */
  .yk-card__badge {
    position: absolute; top: 5px; left: 5px;
    display: flex; align-items: center; gap: 2px;
    background: rgba(126,200,227,.18); border: 1px solid rgba(126,200,227,.3);
    border-radius: var(--tag-radius); padding: 1px 5px;
    font-size: .48rem; font-weight: 900; color: var(--accent3);
    letter-spacing: .5px; text-transform: uppercase;
  }
  .yk-card__badge--team {
    background: rgba(6,214,160,.2); border-color: rgba(6,214,160,.35); color: var(--green);
  }

  /* Top-right quality label */
  .yk-card__quality {
    position: absolute; top: 5px; right: 5px;
    font-size: .46rem; font-weight: 900; color: var(--muted);
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
    border-radius: 5px; padding: 1px 5px;
  }

  /* Passive / rank tags inside card */
  .yk-tag {
    display: inline-flex; align-items: center; gap: 3px;
    background: var(--passive-green); border: 1px solid var(--passive-border);
    border-radius: 4px; padding: 1px 5px;
    font-size: .5rem; font-weight: 800; color: var(--green); white-space: nowrap;
  }

  /* Hover-reveal action button (replaces inv-activate-btn / inv-open-btn) */
  .yk-card__btn {
    display: block; width: 100%; margin-top: auto; padding: 5px 0;
    border: none; border-radius: 8px;
    color: #fff; font-family: var(--btn-font); font-size: .63rem;
    font-weight: 900; letter-spacing: .5px; cursor: pointer;
    opacity: 0; transform: translateY(6px);
    transition: opacity .18s, transform .18s;
    flex-shrink: 0;
    background: linear-gradient(135deg, #7b2ff7, #c77dff);
  }
  .yk-card__btn--cyan  { background: linear-gradient(135deg, #4a8fa8, var(--accent3)); }
  .yk-card__btn--open  { background: linear-gradient(135deg, #7b2ff7, #c77dff); }
  .yk-card:hover .yk-card__btn { opacity: 1; transform: translateY(0); }
  .yk-card__btn:hover { filter: brightness(1.12); }

  /* Count badge (×N) — reuse .inv-count */

  /* ══════════════════════════════
     2. LIST ROW  (.yk-row)
     Used: slots panel, team list,
           equipped weapon rows
     ══════════════════════════════ */
  .yk-row {
    display: flex; align-items: center; gap: 8px;
    padding: var(--row-padding);
    background: var(--row-bg);
    border: 1px solid var(--row-border);
    border-radius: var(--row-radius);
    font-size: .78rem;
    box-sizing: border-box;
    transition: border-color .15s, background .15s;
  }
  .yk-row--empty  { opacity: .45; border-style: dashed; }
  .yk-row--active { background: var(--row-bg-active); border-color: rgba(126,200,227,.22); }

  .yk-row__icon   { font-size: 1.1rem; flex-shrink: 0; }
  .yk-row__body   { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .yk-row__title  { font-size: .75rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .yk-row__sub    { font-size: .62rem; color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
  .yk-row__right  { font-size: .6rem; font-weight: 700; color: var(--muted); flex-shrink: 0; }
  .yk-row--active .yk-row__right { color: var(--accent3); }

  /* Section label above a list of rows */
  .yk-section-label {
    font-size: .62rem; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase;
    color: var(--muted); margin-bottom: 6px;
  }

  /* ══════════════════════════════
     3. DIALOG  (.yk-dialog)
     Used: weapon popup, gem popup,
           lootbox popup, zoo popup
     ══════════════════════════════ */
  .yk-dialog {
    background: var(--dialog-bg);
    border: 2px solid var(--dialog-border);
    border-radius: var(--dialog-radius);
    padding: var(--dialog-pad);
    width: var(--dialog-width);
    text-align: center;
    position: relative;
    overflow: hidden;
    animation: inv_popup_in .3s cubic-bezier(.2,1.3,.4,1);
    box-sizing: border-box;
  }
  /* Rainbow top bar */
  .yk-dialog::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    border-radius: var(--dialog-radius) var(--dialog-radius) 0 0;
    background: linear-gradient(90deg,var(--accent2),var(--gold),var(--green),var(--accent2));
    background-size: 200%; animation: inv_rb 2s linear infinite;
  }
  /* Colored top bar override (single color, e.g. weapon rank) */
  .yk-dialog--colored::before { background: var(--dialog-accent, var(--accent2)); animation: none; }

  /* Shine sweep overlay */
  .yk-dialog__shine {
    position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
    background: var(--dialog-shine);
    transform: skewX(-18deg); pointer-events: none;
  }
  .yk-dialog__shine.run { animation: inv_shine .7s .3s ease forwards; }

  /* Header label */
  .yk-dialog__eyebrow {
    font-size: .6rem; font-weight: 800; letter-spacing: 3px;
    text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
  }
  /* Big emoji / icon */
  .yk-dialog__icon { font-size: 3rem; margin-bottom: 6px; display: block; }
  /* Title */
  .yk-dialog__title { font-size: 1.05rem; font-weight: 900; margin-bottom: 4px; color: var(--text); }
  /* Subtitle row (badges, wear, quality) */
  .yk-dialog__meta {
    display: flex; gap: 6px; justify-content: center;
    align-items: center; flex-wrap: wrap; margin-bottom: 10px;
  }
  /* Description */
  .yk-dialog__desc {
    font-size: .78rem; color: var(--muted);
    text-align: center; margin-bottom: 12px; line-height: 1.55;
  }

  /* 3-column stat grid */
  .yk-dialog__stats {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 6px; margin-bottom: 10px;
  }
  .yk-stat {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px; padding: 7px 8px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  }
  .yk-stat__label { font-size: .6rem; color: var(--muted); font-weight: 700; }
  .yk-stat__val   { font-size: .88rem; font-weight: 900; color: var(--text); }

  /* WP cost note */
  .yk-dialog__wpcost {
    font-size: .72rem; color: var(--accent3); margin-bottom: 10px; font-weight: 700;
  }

  /* Passive tag list */
  .yk-passives { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
  .yk-passive {
    display: flex; align-items: center; gap: 6px;
    background: var(--passive-green); border: 1px solid var(--passive-border);
    border-radius: 10px; padding: 7px 10px; font-size: .75rem; text-align: left;
  }
  .yk-passive__name  { font-weight: 800; color: var(--green); }
  .yk-passive__desc  { color: var(--muted); }

  /* Equipped note */
  .yk-dialog__equipped {
    font-size: .75rem; color: var(--green); font-weight: 700;
    margin-bottom: 10px; text-align: center;
  }

  /* Equip row: select + button */
  .yk-equip-row { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
  .yk-select {
    flex: 1; background: #1a1826; border: 1.5px solid #3d3660;
    border-radius: 8px; color: var(--text); font-family: var(--btn-font);
    font-size: .78rem; padding: 7px 28px 7px 10px; outline: none; cursor: pointer;
    appearance: none; -webkit-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%239b95b8" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"><path d="M0 0l5 6 5-6z"/></svg>');
    background-repeat: no-repeat; background-position: right 10px center; background-size: 8px;
    transition: border-color .15s;
  }
  .yk-select:focus { border-color: var(--accent2); }

  /* Dialog action buttons */
  .yk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    border: none; border-radius: var(--btn-radius);
    color: #fff; font-family: var(--btn-font); font-size: .8rem;
    font-weight: 900; padding: 9px 18px; cursor: pointer;
    transition: opacity .15s, transform .1s, filter .15s;
    white-space: nowrap;
  }
  .yk-btn:hover   { filter: brightness(1.1); }
  .yk-btn:active  { transform: scale(.96); }
  .yk-btn:disabled{ opacity: .55; cursor: default; filter: none; }

  .yk-btn--primary { background: linear-gradient(135deg, #4a8fa8, var(--accent3)); }
  .yk-btn--success { background: linear-gradient(135deg, #04a87bcc, var(--green)); }
  .yk-btn--danger  { background: linear-gradient(135deg, #c0364fcc, var(--red)); }
  .yk-btn--muted   { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.13); color: var(--muted); }
  .yk-btn--purple  { background: linear-gradient(135deg, #7b2ff7, var(--accent2)); }
  .yk-btn--full    { width: 100%; }
  .yk-btn--sm      { font-size: .72rem; padding: 6px 14px; border-radius: 8px; }

  /* Feedback line below equip row */
  .yk-feedback {
    min-height: 20px; text-align: center;
    font-size: .75rem; font-weight: 700; margin-bottom: 8px;
  }

  /* Dialog sell/dismantle pair */
  .yk-action-pair { display: flex; gap: 7px; margin-bottom: 10px; }
  .yk-action-pair .yk-btn { flex: 1; flex-direction: column; line-height: 1.3; padding: 8px 6px; }
  .yk-action-pair .yk-btn span { font-size: .65rem; opacity: .85; font-weight: 600; }


  .inv-card.is-gem.gem-active{border-style:solid!important;border-width:2px!important;}
  .gem-active-badge{position:absolute;top:5px;left:5px;font-size:.5rem;font-weight:900;letter-spacing:.5px;text-transform:uppercase;background:rgba(6,214,160,.2);color:#06d6a0;border:1px solid #06d6a044;border-radius:6px;padding:1px 5px;}
  /* Zoo card hover */
  .zoo-entry{cursor:pointer;} .zoo-entry:hover{border-color:var(--accent2)!important;transform:translateY(-2px);}
  /* Shared popup overlay */
  .inv-overlay,.zoo-overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:9999;display:flex;align-items:center;justify-content:center;animation:inv_fadein .2s ease;}
  @keyframes inv_fadein{from{opacity:0}to{opacity:1}}
  .inv-popup{background:var(--dialog-bg);border:2px solid var(--dialog-border);border-radius:var(--dialog-radius);padding:var(--dialog-pad);width:var(--dialog-width);text-align:center;position:relative;overflow:hidden;animation:inv_popup_in .3s cubic-bezier(.2,1.3,.4,1);}
  @keyframes inv_popup_in{from{transform:scale(.6) translateY(30px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
  .inv-popup::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#c77dff,#ffd166,#06d6a0,#c77dff);background-size:200%;animation:inv_rb 2s linear infinite;}
  @keyframes inv_rb{0%{background-position:0%}100%{background-position:200%}}
  .inv-popup-box{font-size:5rem;display:block;cursor:pointer;margin:10px auto;animation:inv_idle_bounce 1.2s ease-in-out infinite;user-select:none;}
  @keyframes inv_idle_bounce{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-10px) rotate(-4deg)}60%{transform:translateY(-5px) rotate(3deg)}}
  .inv-popup-hint{font-size:.7rem;color:#c77dff;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;animation:inv_pulse_hint 1.2s ease-in-out infinite;}
  @keyframes inv_pulse_hint{0%,100%{opacity:.6}50%{opacity:1}}
  @keyframes inv_sh1{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
  @keyframes inv_sh2{0%,100%{transform:rotate(0)}20%{transform:rotate(-11deg)}60%{transform:rotate(11deg)}}
  @keyframes inv_sh3{0%,100%{transform:rotate(0) scale(1)}15%{transform:rotate(-18deg) scale(1.07)}50%{transform:rotate(18deg) scale(1.1)}85%{transform:rotate(-14deg) scale(1.07)}}
  @keyframes inv_sh4{0%,100%{transform:rotate(0) scale(1)}10%{transform:rotate(-26deg) scale(1.14)}40%{transform:rotate(26deg) scale(1.16)}70%{transform:rotate(-22deg) scale(1.14)}}
  @keyframes inv_explode{0%{transform:scale(1);opacity:1}50%{transform:scale(2);opacity:.4}100%{transform:scale(.1);opacity:0}}
  .inv-gem-reveal{display:none;flex-direction:column;align-items:center;gap:6px;}
  .inv-gem-reveal.show{display:flex;animation:inv_popup_in .35s cubic-bezier(.2,1.4,.4,1);}
  .inv-gem-emoji{font-size:5rem;animation:inv_gem_pop .5s cubic-bezier(.2,1.5,.4,1);}
  @keyframes inv_gem_pop{from{transform:scale(0) rotate(-30deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
  .inv-gem-rarity{display:inline-block;font-size:.7rem;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;border-radius:10px;padding:3px 12px;}
  .inv-gem-name{font-size:1.35rem;font-weight:900;}
  .inv-gem-boost{font-size:.88rem;color:#06d6a0;font-weight:700;margin:2px 0 14px;}
  .inv-popup-shine{position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);transform:skewX(-18deg);pointer-events:none;}
  .inv-popup-shine.run{animation:inv_shine .7s .3s ease forwards;}
  @keyframes inv_shine{to{left:140%;}}
  .inv-close-btn{background:linear-gradient(135deg,#7b2ff7,var(--accent2));border:none;border-radius:var(--btn-radius);color:#fff;font-family:var(--btn-font);font-size:.88rem;font-weight:900;padding:10px 30px;cursor:pointer;transition:opacity .15s,transform .1s;}
  .inv-close-btn:hover{opacity:.88;} .inv-close-btn:active{transform:scale(.96);}
  @keyframes inv_fadeout{to{opacity:0;transform:scale(.75)}}
  #inv_qty_val::-webkit-inner-spin-button,#inv_qty_val::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
  #inv_qty_val{-moz-appearance:textfield!important;appearance:textfield!important;}
  #wc_qty_val::-webkit-inner-spin-button,#wc_qty_val::-webkit-outer-spin-button{-webkit-appearance:none !important;margin:0;}
  #wc_qty_val{-moz-appearance:textfield!important;appearance:textfield!important;}
  /* Global: hide spinners on any number input inside popups */
  .inv-popup input[type=number]::-webkit-inner-spin-button,
  .inv-popup input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0; }
  .inv-popup input[type=number] { -moz-appearance: textfield !important; appearance: textfield !important; }
  .gem-popup-wrap{background:var(--dialog-bg);border-radius:var(--dialog-radius);padding:var(--dialog-pad);width:var(--dialog-width);text-align:center;position:relative;overflow:hidden;animation:inv_popup_in .3s cubic-bezier(.2,1.3,.4,1);}
  .gem-popup-wrap::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:22px 22px 0 0;}
  .gem-popup-shine{position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);transform:skewX(-18deg);pointer-events:none;}
  .gem-popup-shine.run{animation:inv_shine .7s .3s ease forwards;}
  .gem-popup-icon{font-size:4.2rem;display:block;margin:4px auto 8px;animation:inv_idle_bounce 1.4s ease-in-out infinite;filter:drop-shadow(0 0 14px var(--gc,#c77dff));}
  .gem-stat-row,.zoo-stat-row,.yk-stat-legacy{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:7px 12px;margin-bottom:6px;font-size:.78rem;}
  .gem-stat-label,.zoo-stat-label{color:#9b95b8;font-weight:700;}
  .gem-stat-val,.zoo-stat-val{font-weight:900;font-size:.85rem;}
  .gem-conflict-box{background:rgba(239,71,111,.1);border:1px solid rgba(239,71,111,.3);border-radius:10px;padding:9px 12px;margin-bottom:10px;font-size:.74rem;color:#ef476f;text-align:left;line-height:1.5;}
  .gem-btn-row{display:flex;gap:8px;justify-content:center;margin-top:14px;}
  .gem-cancel-btn{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:11px;color:#9b95b8;font-family:'Nunito',sans-serif;font-size:.84rem;font-weight:900;padding:10px 22px;cursor:pointer;transition:background .15s;}
  .gem-cancel-btn:hover{background:rgba(255,255,255,.12);}
  .gem-act-btn{border:none;border-radius:11px;color:#fff;font-family:'Nunito',sans-serif;font-size:.84rem;font-weight:900;padding:10px 28px;cursor:pointer;letter-spacing:.5px;transition:opacity .15s,transform .1s;box-shadow:0 4px 16px rgba(0,0,0,.3);}
  .gem-act-btn:hover{opacity:.88;transform:scale(1.03);} .gem-act-btn:active{transform:scale(.96);}
  .gem-success-wrap{display:none;flex-direction:column;align-items:center;gap:8px;}
  .gem-success-wrap.show{display:flex;animation:inv_popup_in .3s ease;}
  .zoo-popup{background:var(--dialog-bg);border:2px solid var(--dialog-border);border-radius:var(--dialog-radius);padding:var(--dialog-pad);width:var(--dialog-width);text-align:center;position:relative;overflow:hidden;animation:inv_popup_in .3s cubic-bezier(.2,1.3,.4,1);}
  .zoo-popup::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#c77dff,#ffd166,#06d6a0,#c77dff);background-size:200%;animation:inv_rb 2s linear infinite;}
  .zoo-popup-shine{position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);transform:skewX(-18deg);pointer-events:none;}
  .zoo-action-row{display:flex;gap:7px;margin-top:14px;}
  .zoo-action-btn{flex:1;border:none;border-radius:11px;color:#fff;font-family:'Nunito',sans-serif;font-size:.78rem;font-weight:900;padding:10px 6px;cursor:pointer;transition:opacity .15s,transform .1s;letter-spacing:.3px;}
  .zoo-action-btn:hover{opacity:.85;transform:scale(1.04);} .zoo-action-btn:active{transform:scale(.96);}
  .zoo-action-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;}
  .zoo-feedback{margin-top:10px;min-height:24px;font-size:.78rem;font-weight:700;text-align:center;}
  /* ── Chat Bar ─────────────────────────────────────────────────────── */
  #chat-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: rgba(6,214,160,0.1);
    border: 1px solid rgba(6,214,160,0.25);
    border-radius: 10px;
    margin-bottom: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    animation: toast_in .2s ease;
  }
  .chat-bar-label { color: #06d6a0; }
  .chat-bar-leave {
    background: none;
    border: 1px solid rgba(239,71,111,0.4);
    color: #ef476f;
    border-radius: 6px;
    padding: 2px 8px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
  }
  .chat-bar-leave:hover { background: rgba(239,71,111,0.12); }
  /* ── Discord-style chat messages ─────────────────────────────────── */
  .msg.chat-discord {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 0;
    margin: 1px 0;
  }
  .chat-d-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    color: #fff;
    flex-shrink: 0;
    user-select: none;
  }
  .chat-d-body { flex: 1; min-width: 0; }
  .chat-d-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
  .chat-d-name { font-weight: 800; font-size: 0.88rem; }
  .chat-d-time { font-size: 0.68rem; color: var(--muted); }
  .chat-d-text { font-size: 0.88rem; line-height: 1.45; word-break: break-word; }
  /* ── Chat system messages ─────────────────────────────────────────── */
  .msg.chat-sys { padding: 2px 0; }
  /* ── Friend three-dot menu ───────────────────────────────────────── */
  .friend-dots-btn {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 2px 6px;
    border-radius: 6px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
  }
  .friend-dots-btn:hover { color: var(--text); background: rgba(255,255,255,0.07); }
  .friend-dots-popup {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.45);
    z-index: 500;
    min-width: 150px;
    overflow: hidden;
    animation: toast_in .15s ease;
  }
  .friend-dots-popup.open { display: block; }
  .friend-dots-popup button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 14px;
    border: none;
    background: none;
    color: var(--text);
    font-family: 'Nunito', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s;
  }
  .friend-dots-popup button:hover { background: rgba(255,255,255,0.07); }
  .friend-dots-popup button.danger { color: #ef476f; }
  .friend-dots-popup button.danger:hover { background: rgba(239,71,111,0.1); }

  /* ══════════════════════════════
     MODAL DIALOGS
     ══════════════════════════════ */
  .yk-dialog-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    padding: 12px;
    animation: ykFadeIn 0.15s ease;
  }
  @keyframes ykFadeIn { from { opacity:0 } to { opacity:1 } }

  .yk-dialog {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: min(440px, 100%);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    box-shadow: 0 12px 48px rgba(0,0,0,0.55);
    animation: ykSlideUp 0.18s cubic-bezier(.4,0,.2,1);
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
  @keyframes ykSlideUp { from { transform:translateY(14px);opacity:0 } to { transform:translateY(0);opacity:1 } }

  .yk-dialog-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; background: var(--surface2); z-index: 1;
  }
  .yk-dialog-title { font-size: 0.95rem; font-weight: 800; }
  .yk-dialog-close {
    background: none; border: none; color: var(--muted);
    font-size: 1rem; cursor: pointer; padding: 3px 8px;
    border-radius: 6px; transition: background 0.15s, color 0.15s; line-height: 1;
  }
  .yk-dialog-close:hover { background: rgba(255,255,255,0.08); color: var(--text); }

  .yk-dialog-body { padding: 18px; display: flex; flex-direction: column; gap: 20px; }
  .yk-dialog-footer {
    padding: 12px 18px 16px;
    display: flex; justify-content: flex-end; gap: 8px;
    border-top: 1px solid var(--border);
  }

  .yk-dialog-section { display: flex; flex-direction: column; gap: 10px; }
  .yk-dialog-section-title {
    font-size: 0.65rem; font-weight: 800; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--muted);
    padding-bottom: 8px; border-bottom: 1px solid var(--border);
  }

  /* Speed picker */
  .yk-speed-group { display: flex; gap: 6px; }
  .yk-speed-btn {
    flex: 1; padding: 9px 4px; border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
    color: var(--muted); font-family: var(--sans);
    font-size: 0.78rem; font-weight: 700; cursor: pointer;
    transition: all 0.15s; text-align: center; line-height: 1.5;
  }
  .yk-speed-btn:hover { background: rgba(255,255,255,0.07); color: var(--text); }
  .yk-speed-btn.active {
    background: rgba(199,125,255,0.15);
    border-color: rgba(199,125,255,0.5);
    color: var(--accent2);
    box-shadow: 0 0 10px rgba(199,125,255,0.12);
  }

  /* Toggle row */
  .yk-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 0;
  }
  .yk-toggle-label { font-size: 0.85rem; font-weight: 700; }
  .yk-toggle-sub { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
  .yk-toggle {
    position: relative; width: 42px; height: 24px;
    background: var(--border); border-radius: 12px;
    cursor: pointer; transition: background 0.2s; flex-shrink: 0;
  }
  .yk-toggle.on { background: var(--accent2); }
  .yk-toggle::after {
    content: ''; position: absolute; left: 4px; top: 4px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; transition: transform 0.2s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  }
  .yk-toggle.on::after { transform: translateX(18px); }

  /* Coming soon */
  .yk-coming-soon {
    font-size: 0.75rem; color: var(--muted);
    padding: 10px 14px; background: rgba(255,255,255,0.02);
    border: 1px dashed rgba(255,255,255,0.1); border-radius: 8px;
    text-align: center;
  }

  /* Buttons */
  .yk-btn {
    padding: 8px 20px; border-radius: 8px; border: none;
    font-family: var(--sans); font-weight: 800; font-size: 0.82rem;
    cursor: pointer; transition: opacity 0.15s, transform 0.1s;
  }
  .yk-btn:active { transform: scale(0.97); }
  .yk-btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; }
  .yk-btn-primary:hover { opacity: 0.88; }
  .yk-btn-ghost { background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: var(--text); }
  .yk-btn-ghost:hover { background: rgba(255,255,255,0.1); }

  /* Field inputs */
  .yk-field-label {
    font-size: 0.65rem; font-weight: 800; letter-spacing: 0.8px;
    color: var(--muted); text-transform: uppercase; margin-bottom: 6px; display: block;
  }
  .yk-field-input {
    width: 100%; padding: 8px 12px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text); font-family: var(--sans); font-size: 0.85rem;
    outline: none; transition: border-color 0.2s; box-sizing: border-box;
  }
  .yk-field-input:focus { border-color: var(--accent2); }
  .yk-field-textarea {
    width: 100%; padding: 8px 12px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text); font-family: var(--sans); font-size: 0.85rem;
    outline: none; resize: vertical; min-height: 72px;
    transition: border-color 0.2s; box-sizing: border-box;
  }
  .yk-field-textarea:focus { border-color: var(--accent2); }

  /* ── PROFILE DIALOG ── */
  .yk-profile-banner {
    height: 110px; border-radius: 15px 15px 0 0;
    position: relative; cursor: pointer; overflow: hidden; flex-shrink: 0;
  }
  .yk-profile-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .yk-profile-banner-overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,0);
    transition: background 0.2s;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; color: transparent; font-weight: 700;
  }
  .yk-profile-banner:hover .yk-profile-banner-overlay { background: rgba(0,0,0,0.45); color: #fff; }

  .yk-profile-avatar-wrap {
    position: relative; margin-top: -30px; margin-left: 18px;
    width: 64px; height: 64px; flex-shrink: 0;
  }
  .yk-profile-avatar {
    width: 64px; height: 64px; border-radius: 50%;
    border: 4px solid var(--surface2);
    background: var(--surface); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; overflow: hidden; position: relative;
  }
  .yk-profile-avatar img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
  .yk-profile-avatar-overlay {
    position: absolute; inset: 0; border-radius: 50%;
    background: rgba(0,0,0,0); transition: background 0.2s;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.6rem; color: transparent; font-weight: 800; text-align: center; z-index: 1;
  }
  .yk-profile-avatar:hover .yk-profile-avatar-overlay { background: rgba(0,0,0,0.55); color: #fff; }
  .yk-profile-top { display: flex; align-items: flex-end; padding: 0 18px; }
  .yk-profile-username { font-size: 0.72rem; color: var(--muted); font-family: var(--mono); }
  .yk-view-bio { font-size: 0.82rem; color: var(--muted); line-height: 1.55; margin-top: 4px; white-space: pre-wrap; }
  .yk-view-stats { display: flex; gap: 8px; margin-top: 10px; }
  .yk-view-stat { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 10px; padding: 10px 8px; text-align: center; display: flex; flex-direction: column; gap: 3px; }
  .yk-view-stat span { font-size: 1.1rem; font-weight: 900; color: var(--text); }
  .yk-view-stat label { font-size: 0.65rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; cursor: default; }

  /* ── Mobile hamburger button (hidden on desktop) ── */
  .mobile-menu-btn {
    display: none;
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 1.2rem;
    line-height: 1;
    padding: 5px 9px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s;
  }
  .mobile-menu-btn:hover { background: var(--surface2); }

  /* ── Mobile drawer overlay ── */
  .mobile-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 900;
    backdrop-filter: blur(3px);
  }
  .mobile-drawer-overlay.open { display: block; }

  /* ── Mobile drawer panel ── */
  .mobile-drawer {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 272px;
    max-width: 82vw;
    background: var(--surface);
    border-right: 1px solid var(--border);
    z-index: 901;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
  }
  .mobile-drawer.open { transform: translateX(0); }

  .mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    font-size: .95rem;
    font-weight: 900;
    background: linear-gradient(135deg,var(--accent),var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    flex-shrink: 0;
  }
  .mobile-drawer-close {
    background: none;
    border: none;
    color: var(--muted);
    -webkit-text-fill-color: var(--muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    line-height: 1;
    flex-shrink: 0;
  }
  .mobile-drawer-close:hover { background: rgba(255,255,255,.08); }

  .mobile-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }

  /* ── Mobile drawer nav items ── */
  .mobile-drawer .sb-group {
    border-bottom: 1px solid rgba(255,255,255,.05);
  }
  .mobile-drawer .sb-group-header {
    padding: 15px 18px;
    font-size: .9rem;
    font-weight: 800;
    color: var(--text);
    width: 100%;
    letter-spacing: .2px;
  }
  .mobile-drawer .sb-group-header:hover {
    background: rgba(255,255,255,.05);
  }
  /* Arrow: › points right when closed, rotates down when open */
  .mobile-drawer .sb-arrow {
    font-size: 1rem;
    font-weight: 400;
    color: var(--muted);
    transition: transform .2s;
  }
  .mobile-drawer .sb-group:not(.open) .sb-arrow { transform: rotate(0deg); }
  .mobile-drawer .sb-group.open .sb-arrow { transform: rotate(90deg); }

  /* Sub-commands inside drawer */
  .mobile-drawer .sb-group-body {
    padding: 0 0 4px;
    background: rgba(0,0,0,.15);
  }
  .mobile-drawer .cmd-btn {
    padding: 10px 28px;
    font-size: .82rem;
    border-radius: 0;
    border-bottom: 1px solid rgba(255,255,255,.03);
  }
  .mobile-drawer .cmd-btn:last-child { border-bottom: none; }

  /* Section block at bottom of drawer */
  .mobile-section-block {
    margin: 12px 12px 0;
    padding: 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 12px;
  }

  /* ══════════════════════════════
     MOBILE RESPONSIVE  (≤ 480px)
     Cards, grids, popups, pills
     ══════════════════════════════ */
  @media (max-width: 480px) {

    /* ── Popups: add side padding so dialogs don't touch screen edges ── */
    .inv-popup, .gem-popup-wrap, .zoo-popup { width: min(320px, calc(100vw - 32px)); }
    .inv-overlay, .zoo-overlay { padding: 0 16px; box-sizing: border-box; }

    /* ── Header: hamburger · logo · coin ── */
    header { padding: 8px 12px; gap: 8px; flex-wrap: nowrap; align-items: center; }
    .mobile-menu-btn { display: flex; align-items: center; }
    .logo { font-size: 1rem; white-space: nowrap; flex-shrink: 0; }
    #mailbox-btn { display: none; }
    .stats-bar { gap: 0; flex-wrap: nowrap; justify-content: flex-end; margin-left: auto; }
    .stat-chip { display: none; }
    .stat-chip--primary { display: flex; padding: 3px 9px; font-size: .72rem; gap: 4px; }
    .stat-chip--primary .icon { font-size: .85rem; }

    /* ── Chat messages: tighter padding ── */
    .messages { padding: 10px 10px 6px; }

    /* ── Suggestions bar ── */
    .suggestions { padding: 0 10px 5px; gap: 4px; }
    .sug-btn { font-size: .66rem; padding: 3px 9px; }

    /* ── Input bar ── */
    .input-bar { padding: 8px 10px; gap: 6px; }
    .cmd-ac-hint { display: none; }
    .cmd-ac-item { padding: 7px 12px; }
    .prefix-badge { padding: 5px 8px; font-size: .72rem; }
    #cmd-input { padding: 6px 10px; font-size: .8rem; }
    .send-btn { padding: 6px 14px; font-size: .8rem; }

    /* ── Card grid: tighter, smaller min-width ── */
    .inv-grid {
      grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
      gap: 6px;
    }

    /* ── Card wrapper ── */
    .inv-card-wrap { max-width: 115px; }

    /* ── Cards: reduced height & padding ── */
    .yk-card, .inv-card {
      height: 155px;
      padding: 8px 5px 6px;
      gap: 2px;
      border-radius: 11px;
    }

    /* ── Card icon ── */
    .yk-card__icon, .inv-icon { font-size: 1.75rem; }

    /* ── Card name ── */
    .yk-card__name, .inv-name { font-size: .6rem; }

    /* ── Card description ── */
    .yk-card__desc, .inv-desc { font-size: .5rem; }

    /* ── Rank / passive tag ── */
    .yk-tag { font-size: .46rem; padding: 1px 4px; }

    /* ── Action button always visible on touch (no hover) ── */
    .yk-card__btn { font-size: .55rem; padding: 4px 0; opacity: 1; transform: translateY(0); }

    /* ── Count badge (×N) ── */
    .inv-count { font-size: .58rem; padding: 1px 5px; top: -5px; right: -5px; }

    /* ── Team / equipped badge ── */
    .yk-card__badge { font-size: .44rem; padding: 1px 4px; }

    /* ── Quality label ── */
    .yk-card__quality { font-size: .42rem; padding: 1px 4px; }

    /* ── Inventory / zoo wrapper ── */
    .inv-wrap { padding: 10px; }
    .inv-header { font-size: .62rem; margin-bottom: 10px; }
    .inv-badge-pill { font-size: .62rem; padding: 2px 8px; }

    /* ── Filter pill bar ── */
    .weap-pill { font-size: .58rem; padding: 2px 7px; }
    .weap-pill-row > span { font-size: .5rem !important; min-width: 38px !important; }

    /* ── Zoo / inventory popup ── */
    .zoo-popup {
      width: calc(100vw - 24px);
      max-width: 340px;
      padding: 20px 14px 16px;
    }
    .zoo-action-row { gap: 5px; }
    .zoo-action-btn { font-size: .72rem; padding: 9px 4px; }

    /* ── Row list items (.yk-row) ── */
    .yk-row { font-size: .72rem; padding: 6px 8px; }
    .yk-row__title { font-size: .7rem; }
    .yk-row__sub { font-size: .58rem; }
    .yk-row__right { font-size: .56rem; }
    .yk-row__icon { font-size: 1rem; }

    /* ── Grid pager buttons ── */
    .grid-pager button { font-size: .62rem; padding: 3px 10px; }

    /* ── Battle: stack teams vertically ── */
    .embed.battle-embed { padding: 10px 8px; }
    .battle-teams {
      grid-template-columns: 1fr;
      gap: 8px;
    }
    .battle-vs-col {
      padding: 2px 0;
      border-top: 1px solid rgba(255,255,255,.08);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .battle-vs-label { letter-spacing: 6px; }
    .bpr-avatar { width: 34px; height: 34px; font-size: 1.2rem; }
    .bpr-avatar-col { width: 38px; }
    .bpr-weapon-name { max-width: 120px; }
    .battle-log { max-height: 160px; font-size: .73rem; }
  }

  /* ══════════════════════════════
     VERY SMALL PHONES  (≤ 360px)
     ══════════════════════════════ */
  @media (max-width: 360px) {
    .inv-grid {
      grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
      gap: 5px;
    }
    .inv-card-wrap { max-width: 100px; }
    .yk-card, .inv-card { height: 145px; padding: 7px 4px 5px; }
    .yk-card__icon, .inv-icon { font-size: 1.55rem; }
    .zoo-popup { padding: 16px 10px 14px; }
    .zoo-action-btn { font-size: .66rem; padding: 8px 3px; }
    .inv-wrap { padding: 8px; }
    .bpr-avatar { width: 30px; height: 30px; font-size: 1rem; }
    .bpr-avatar-col { width: 34px; }
    .bpr-bar-num { width: 46px; min-width: 46px; max-width: 46px; font-size: .44rem; }
  }