.battles-header {
      background: linear-gradient(135deg, rgba(239,68,68,.08), rgba(75,124,255,.1));
      border: 1px solid rgba(239,68,68,.15);
      border-radius: var(--r-xl);
      padding: 40px 48px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 24px;
      margin-bottom: 32px;
      position: relative; overflow: hidden;
    }
    .battles-header::before {
      content: '⚔️';
      position: absolute; right: 48px; top: 50%;
      transform: translateY(-50%);
      font-size: 120px; opacity: .06;
      pointer-events: none;
    }
    .battles-layout {
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 24px;
      align-items: start;
    }
    .battles-table-wrap { overflow-x: auto; border-radius: var(--r-lg); }
    .battles-table {
      width: 100%;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      overflow: hidden;
    }
    .bt-head {
      display: grid;
      grid-template-columns: 48px 1fr 80px 100px 100px 80px 120px;
      gap: 0;
      padding: 12px 16px;
      background: var(--surface2);
      border-bottom: 1px solid var(--border);
      font-size: 11px; font-weight: 700;
      letter-spacing: .06em; text-transform: uppercase;
      color: var(--text3);
    }
    .bt-row {
      display: grid;
      grid-template-columns: 48px 1fr 80px 100px 100px 80px 120px;
      gap: 0;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      align-items: center;
      transition: background .15s;
      cursor: pointer;
    }
    .bt-row:last-child { border-bottom: none; }
    .bt-row:hover { background: rgba(255,255,255,.025); }
    .bt-row__id { font-size: 13px; color: var(--text3); font-weight: 600; }
    .bt-row__cases { display: flex; gap: -6px; align-items: center; }
    .bt-case-img { width: 32px; height: 32px; border-radius: 4px; object-fit: contain; border: 1px solid var(--border); margin-left: -6px; background: var(--surface2); }
    .bt-case-img:first-child { margin-left: 0; }
    .bt-row__mode { font-size: 13px; font-weight: 600; }
    .bt-row__players { display: flex; align-items: center; gap: -4px; }
    .bt-player-avatar {
      width: 28px; height: 28px; border-radius: 50%;
      border: 2px solid var(--surface);
      background: linear-gradient(135deg, var(--primary), var(--accent));
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 700; margin-left: -6px; flex-shrink: 0;
    }
    .bt-player-avatar:first-child { margin-left: 0; }
    .bt-row__cost { font-size: 14px; font-weight: 700; color: var(--warning); }
    .bt-row__status {}

    .status-pill {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 4px 10px; border-radius: 20px;
      font-size: 11px; font-weight: 700;
    }
    .status-pill--open    { background: rgba(34,197,94,.12); color: var(--success); border: 1px solid rgba(34,197,94,.2); }
    .status-pill--live    { background: rgba(239,68,68,.12); color: var(--danger); border: 1px solid rgba(239,68,68,.2); }
    .status-pill--waiting { background: rgba(245,158,11,.12); color: var(--warning); border: 1px solid rgba(245,158,11,.2); }

    .bt-row__join .btn { white-space: nowrap; }

    .battles-sidebar { display: flex; flex-direction: column; gap: 16px; }
    .side-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 20px;
    }
    .side-panel__title { font-size: 13px; font-weight: 700; margin-bottom: 16px; letter-spacing: -.01em; }

    .winner-item {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 0; border-bottom: 1px solid var(--border);
    }
    .winner-item:last-child { border-bottom: none; }
    .winner-avatar {
      width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
      background: linear-gradient(135deg, var(--primary), var(--accent));
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; font-weight: 700;
    }
    .winner-info { flex: 1; min-width: 0; }
    .winner-name { font-size: 13px; font-weight: 600; truncate: true; }
    .winner-prize { font-size: 12px; color: var(--success); font-weight: 700; }
    .winner-cases { font-size: 11px; color: var(--text3); }

    /* Create battle modal */
    .mode-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
      margin-bottom: 20px;
    }
    .mode-btn {
      padding: 16px 10px; border-radius: var(--r-md);
      border: 1px solid var(--border2);
      background: var(--surface2);
      text-align: center; cursor: pointer;
      transition: all .2s;
    }
    .mode-btn:hover, .mode-btn.active {
      border-color: var(--primary); background: var(--primary-dim);
    }
    .mode-btn__icon { font-size: 24px; margin-bottom: 6px; }
    .mode-btn__label { font-size: 13px; font-weight: 700; }
    .mode-btn__sub { font-size: 11px; color: var(--text3); margin-top: 2px; }

    .battle-case-selector {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
      max-height: 300px; overflow-y: auto; margin-bottom: 16px;
    }
    .battle-case-item {
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: var(--r-sm); padding: 8px; text-align: center;
      cursor: pointer; transition: all .15s; position: relative;
    }
    .battle-case-item:hover { border-color: var(--primary); }
    .battle-case-item.selected { border-color: var(--primary); background: var(--primary-dim); }
    .battle-case-item img { width: 60px; height: 60px; object-fit: contain; }
    .battle-case-item__name { font-size: 10px; font-weight: 600; }
    .battle-case-item__price { font-size: 10px; color: var(--warning); font-weight: 700; }
    .battle-case-item__qty {
      position: absolute; top: 4px; right: 4px;
      background: var(--primary); color: #fff;
      width: 18px; height: 18px; border-radius: 50%;
      font-size: 10px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
    }

    @media (max-width: 1100px) { .bt-head, .bt-row { grid-template-columns: 40px 1fr 70px 90px 90px 70px 100px; } }
    @media (max-width: 900px) { .battles-layout { grid-template-columns: 1fr; } }
    @media (max-width: 700px) {
      .bt-head { display: none; }
      .bt-row { grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; }
    }