/* ============================================================
 * arena-shared.css
 * ============================================================
 * CSS dùng chung giữa arena.html và dungeon.html (và explore.html
 * sau khi optimization). Trước đây file này được duplicate trong 2
 * file → chuyển ra file riêng để browser cache 1 lần + giảm bundle.
 *
 * Chứa: HUD top-left/right, panels (inventory/shop/character),
 * confirm dialog, item inspector, mobile responsive, dungeon loading
 * screen, exit-dungeon button, keyframes (mistRise, emblemPulseDark).
 * ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
  body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; background: #000; }
  canvas { display: block; }

  #hud {
    position: absolute; top: 0; left: 0; width: 100%;
    pointer-events: none; color: white;
    text-shadow: 1px 1px 2px black; z-index: 10;
  }

  /* ============================================================
   * HUD CHUYÊN NGHIỆP — top-left: avatar + name + HP/EXP
   *                    top-right: score + gold + settings
   * ============================================================ */
  #topLeft {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(20,25,45,0.92), rgba(35,40,65,0.85));
    padding: 10px 16px 10px 10px;
    border-radius: 14px;
    border: 1px solid rgba(255,215,0,0.3);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
    pointer-events: auto;
  }
  .hud-avatar {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.15s;
  }
  .hud-avatar:hover { transform: scale(1.05); }
  .hud-avatar-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #ffd700, #ff8800, #ffd700, #ff8800, #ffd700);
    padding: 2px;
    box-shadow: 0 0 14px rgba(255,168,0,0.55);
  }
  .hud-avatar-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1530, #2a2050);
  }
  .hud-avatar-inner canvas,
  .hud-avatar-inner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }
  .hud-avatar-inner img { display: none; }
  .hud-avatar-camera {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
  }
  .hud-avatar:hover .hud-avatar-camera { opacity: 1; }
  .hud-level-badge {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ffd700, #ff9500);
    color: #2a1a00;
    font-size: 11px;
    font-weight: 900;
    padding: 2px 9px;
    border-radius: 10px;
    border: 1.5px solid #5a3a00;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    letter-spacing: 0.3px;
    z-index: 2;
  }
  .hud-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 220px;
  }
  .hud-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
  }
  .hud-name {
    font-size: 14px;
    font-weight: 700;
    color: #ffe8a8;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
    letter-spacing: 0.5px;
  }
  .hud-class-tag {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: #ddd;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
  .hud-bar-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .hud-bar-icon {
    font-size: 11px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
  }
  .hud-bar {
    position: relative;
    flex: 1;
    height: 14px;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
  }
  .hud-bar-fill {
    height: 100%;
    border-radius: 7px;
    transition: width 0.3s ease;
    position: relative;
  }
  .hud-bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.35), transparent 50%);
    border-radius: 7px;
  }
  .hud-bar-fill.hp {
    background: linear-gradient(90deg, #d6234a, #ff5577);
    box-shadow: 0 0 8px rgba(255,68,80,0.55);
  }
  .hud-bar-fill.exp {
    background: linear-gradient(90deg, #2980d6, #66c4ff);
    box-shadow: 0 0 8px rgba(80,160,255,0.55);
  }
  .hud-bar-text {
    position: absolute;
    inset: 0;
    text-align: center;
    font-size: 10px;
    line-height: 14px;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
    letter-spacing: 0.3px;
  }

  #topRight {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: auto;
    z-index: 100;  /* trên #quick-actions (z-index 51) để dropdown settingsMenu không bị che */
  }
  .hud-stat-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(20,25,45,0.8), rgba(35,40,65,0.8));
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
    min-width: 90px;
  }
  .hud-stat-card .icon {
    font-size: 22px;
    filter: drop-shadow(0 0 6px currentColor);
  }
  .hud-stat-card .stat-info {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
  }
  .hud-stat-card .stat-label {
    font-size: 9px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    font-weight: 600;
  }
  .hud-stat-card .stat-value {
    font-size: 18px;
    font-weight: 800;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    letter-spacing: 0.5px;
  }
  .hud-stat-card.score .stat-value { color: #88ddff; }
  .hud-stat-card.gold  .stat-value { color: #ffd700; }
  .hud-stat-card .stat-sub {
    font-size: 9px;
    color: rgba(255,255,255,0.6);
    margin-top: 1px;
  }
  /* ===== Thẻ tiền: hai dòng VÀNG và TCC =====
     Bỏ nhãn "GOLD" (cái túi tiền đã nói rồi, chữ chỉ ăn chỗ trên HUD điện thoại).
     Cột biểu tượng rộng CỐ ĐỊNH để hai con số thẳng hàng trái — lệch vài pixel là
     nhìn ra ngay, vì hai dòng nằm sát nhau. */
  .hud-stat-card.gold { padding: 6px 12px; gap: 0; }
  .hud-vi { display: flex; flex-direction: column; gap: 3px; }
  .hud-dong { display: flex; align-items: center; gap: 7px; line-height: 1.1; white-space: nowrap; }
  .hud-dong .bieu { flex: 0 0 18px; width: 18px; text-align: center; font-size: 15px; }
  .hud-dong img.bieu { height: 15px; object-fit: contain; display: block; }
  .hud-dong .so {
    font-weight: 800;
    font-variant-numeric: tabular-nums;   /* chữ số cùng bề ngang -> số đổi không nhảy */
    letter-spacing: 0.3px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  }
  .hud-dong.vang .so { color: #ffd700; font-size: 17px; }
  .hud-dong.tcc  .so { color: #7dd3fc; font-size: 13px; }
  /* Phần lẻ sau dấu chấm nhỏ và mờ hơn — mắt đọc phần nguyên trước. */
  .hud-dong.tcc .so .le,
  .tcc-display .le { font-size: 0.76em; opacity: 0.7; font-weight: 700; }
  .hud-dong.tcc  { opacity: 0.95; }
  .hud-settings-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(20,25,45,0.8), rgba(35,40,65,0.8));
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #ddd;
    cursor: pointer;
    transition: all 0.2s;
    pointer-events: auto;
  }
  .hud-settings-btn:hover {
    transform: rotate(60deg);
    color: #ffd700;
    border-color: rgba(255,215,0,0.5);
  }
  #settingsMenu {
    position: absolute;
    top: 64px;
    right: 0;
    min-width: 220px;
    background: linear-gradient(135deg, rgba(20,25,45,0.97), rgba(35,40,65,0.95));
    border: 1px solid rgba(255,215,0,0.3);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.08);
    padding: 8px;
    display: none;
    flex-direction: column;
    gap: 2px;
    z-index: 9999;  /* trên mọi UI floating khác */
  }
  #settingsMenu.show { display: flex; }
  .settings-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid transparent;
    border-radius: 8px;
    color: #eee;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    font-weight: 500;
  }
  .settings-item:hover {
    background: rgba(255,215,0,0.1);
    border-color: rgba(255,215,0,0.3);
    color: #ffd700;
  }
  .settings-item.danger:hover {
    background: rgba(255,80,80,0.15);
    border-color: rgba(255,80,80,0.4);
    color: #ff8080;
  }
  .settings-item .item-icon { font-size: 18px; flex-shrink: 0; width: 24px; text-align: center; }
  .settings-item .item-label { flex: 1; }

  .bar { display: none; }   /* legacy unused */

  #controls {
    position: absolute; bottom: 15px; left: 15px;
    background: rgba(0,0,0,0.55);
    padding: 10px 14px; border-radius: 10px;
    border: 2px solid rgba(255,255,255,0.2);
    font-size: 12px; line-height: 1.7;
  }
  #controls .key {
    display: inline-block; background: rgba(255,255,255,0.2);
    padding: 1px 7px; border-radius: 4px; font-weight: bold;
    margin-right: 5px; min-width: 18px; text-align: center;
  }

  /* ============================================================
   * DUNGEON LOADING SCREEN AAA — tối, lạnh, đe dọa
   * ============================================================ */
  #loading {
    position: fixed; inset: 0;
    background: #000;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: white; z-index: 100;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
  }
  #loading::before {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 70% 50% at 50% 100%, rgba(140,30,30,0.3), transparent 60%),
      radial-gradient(ellipse 60% 40% at 50% 0%, rgba(20,40,80,0.4), transparent 60%),
      linear-gradient(180deg, #050208 0%, #0a0512 35%, #1a0808 70%, #2a0a0a 100%);
    z-index: 0;
  }
  /* Particles mist - sương mờ */
  #loading::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
      radial-gradient(2px 2px at 20% 90%, rgba(180,80,80,0.4), transparent),
      radial-gradient(1px 1px at 60% 80%, rgba(120,40,40,0.3), transparent),
      radial-gradient(1.5px 1.5px at 30% 70%, rgba(150,60,60,0.4), transparent),
      radial-gradient(1px 1px at 80% 85%, rgba(100,40,40,0.3), transparent),
      radial-gradient(2px 2px at 50% 95%, rgba(160,60,60,0.4), transparent);
    background-size: 100% 100%;
    animation: mistRise 10s linear infinite;
    z-index: 1;
    pointer-events: none;
  }
  @keyframes mistRise {
    0%   { transform: translateY(0)      scale(1);   opacity: 0.5; }
    50%  { opacity: 0.8; }
    100% { transform: translateY(-100vh) scale(1.5); opacity: 0; }
  }
  #loading > .vignette {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, transparent 25%, rgba(0,0,0,0.85) 100%);
    pointer-events: none;
    z-index: 2;
  }

  #loading .hero-emblem {
    position: relative;
    z-index: 3;
    width: 100px; height: 100px;
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: emblemPulseDark 3s ease-in-out infinite;
  }
  #loading .hero-emblem::before {
    content: '';
    position: absolute;
    width: 130px; height: 130px;
    border: 2px solid rgba(180,40,40,0.5);
    border-radius: 50%;
    animation: ringRotate 12s linear infinite;
  }
  #loading .hero-emblem::after {
    content: '';
    position: absolute;
    width: 110px; height: 110px;
    border: 1px dashed rgba(120,40,40,0.4);
    border-radius: 50%;
    animation: ringRotate 8s linear infinite reverse;
  }
  #loading .hero-emblem .emblem-icon {
    font-size: 64px;
    filter: drop-shadow(0 0 20px rgba(255,80,80,0.9))
            drop-shadow(0 0 40px rgba(180,40,40,0.5));
  }
  @keyframes emblemPulseDark {
    0%, 100% { transform: scale(1); filter: brightness(1) hue-rotate(0deg); }
    50%      { transform: scale(1.08); filter: brightness(1.3) hue-rotate(-10deg); }
  }
  @keyframes ringRotate {
    to { transform: rotate(360deg); }
  }

  #loading h1 {
    position: relative;
    z-index: 3;
    font-size: 56px;
    font-weight: 900;
    letter-spacing: 8px;
    margin: 0 0 12px 0;
    background: linear-gradient(180deg, #ffaaaa 0%, #d04040 40%, #802020 70%, #401010 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 4px 30px rgba(180,40,40,0.5);
    filter: drop-shadow(0 2px 0 rgba(40,0,0,0.8));
    text-transform: uppercase;
    animation: titleEmerge 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes titleEmerge {
    0%   { opacity: 0; transform: scale(1.3) translateY(20px); letter-spacing: 30px; filter: blur(20px); }
    60%  { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); letter-spacing: 8px; }
  }
  #loading .subtitle {
    position: relative;
    z-index: 3;
    font-size: 13px;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: rgba(255,180,180,0.7);
    margin-bottom: 60px;
    font-weight: 400;
    animation: fadeInDelayed 1.5s ease-out 0.6s backwards;
  }
  @keyframes fadeInDelayed {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  #loading .progress-frame {
    position: relative;
    z-index: 3;
    width: 380px;
    max-width: 80vw;
    margin-bottom: 16px;
    animation: fadeInDelayed 1.5s ease-out 0.9s backwards;
  }
  #loading .progress-bar {
    position: relative;
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(180,40,40,0.3);
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0,0,0,0.6) inset;
  }
  #loading .progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #802020 0%, #d04040 50%, #ff7070 100%);
    box-shadow: 0 0 15px rgba(255,80,80,0.9), 0 0 30px rgba(180,40,40,0.6);
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
  }
  #loading .progress-fill::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 30px;
    background: linear-gradient(90deg, transparent, white);
    opacity: 0.5;
    filter: blur(3px);
  }
  #loading .progress-frame::before,
  #loading .progress-frame::after {
    content: '◆';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(180,40,40,0.7);
    font-size: 10px;
  }
  #loading .progress-frame::before { left: -16px; }
  #loading .progress-frame::after  { right: -16px; }

  #loading .status {
    position: relative;
    z-index: 3;
    font-size: 12px;
    letter-spacing: 3px;
    color: rgba(255,180,180,0.6);
    text-transform: uppercase;
    font-weight: 400;
    animation: fadeInDelayed 1.5s ease-out 1.2s backwards;
    min-height: 16px;
  }
  #loading .tip {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    font-size: 11px;
    color: rgba(255,180,180,0.5);
    letter-spacing: 2px;
    text-align: center;
    max-width: 80vw;
    font-style: italic;
    animation: fadeInDelayed 1.5s ease-out 1.8s backwards;
  }
  #loading .tip::before { content: '✦  '; opacity: 0.7; }
  #loading .tip::after  { content: '  ✦'; opacity: 0.7; }
  #loading .brand-corner {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 3;
    font-size: 9px;
    letter-spacing: 4px;
    color: rgba(255,180,180,0.4);
    text-transform: uppercase;
    animation: fadeInDelayed 1.5s ease-out 0.3s backwards;
  }
  #loading .version-corner {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 3;
    font-size: 9px;
    letter-spacing: 4px;
    color: rgba(255,180,180,0.4);
    text-transform: uppercase;
    animation: fadeInDelayed 1.5s ease-out 0.3s backwards;
  }

  @media (max-width: 768px) {
    #loading h1 { font-size: 36px; letter-spacing: 5px; }
    #loading .subtitle { font-size: 10px; letter-spacing: 4px; margin-bottom: 40px; }
    #loading .hero-emblem { width: 80px; height: 80px; margin-bottom: 24px; }
    #loading .hero-emblem .emblem-icon { font-size: 48px; }
    #loading .hero-emblem::before { width: 100px; height: 100px; }
    #loading .hero-emblem::after  { width: 88px; height: 88px; }
    #loading .progress-frame { width: 280px; }
    #loading .tip { font-size: 10px; bottom: 24px; padding: 0 30px; }
  }

  #gameOver {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    display: none; flex-direction: column;
    align-items: center; justify-content: center;
    color: white; z-index: 50;
  }
  #gameOver h1 {
    font-size: 60px; color: #ff4444;
    margin-bottom: 20px; text-shadow: 0 0 20px #ff4444;
  }
  #gameOver p { font-size: 20px; margin-bottom: 30px; }
  #gameOver button {
    padding: 12px 30px; font-size: 18px;
    background: #ffd700; color: black;
    border: none; border-radius: 8px;
    cursor: pointer; font-weight: bold;
  }
  #gameOver button:hover { background: #ffaa00; }

  /* Một ô #popup phục vụ đủ thứ: số sát thương ("-1234"), tên vật phẩm vừa nhặt,
     dòng thưởng "+450 EXP +120 💰", LEVEL UP. Cỡ cũ 48px (keyframe còn scale 1.2
     nữa ≈ 58px) nên chuỗi dài tràn gần hết bề ngang điện thoại. Giờ cỡ theo ĐỘ DÀI
     chuỗi — showPopup() gắn .p-vua/.p-nho. */
  #popup {
    position: absolute; top: 30%; left: 50%;
    transform: translateX(-50%);
    font-size: 34px; font-weight: bold; color: #ffd700;
    text-shadow: 0 0 15px #ffd700, 2px 2px 4px black;
    pointer-events: none; opacity: 0; z-index: 20;
    max-width: 88vw; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  #popup.p-vua { font-size: 24px; }
  #popup.p-nho { font-size: 20px; }
  .popup-show { animation: popup 1.5s ease-out forwards; }
  @keyframes popup {
    0%   { opacity: 0; transform: translateX(-50%) translateY(0) scale(0.5); }
    20%  { opacity: 1; transform: translateX(-50%) translateY(-20px) scale(1.2); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-80px) scale(1); }
  }

  #crosshair {
    display: none;   /* ẩn — game third-person không cần crosshair */
    position: absolute; top: 50%; left: 50%;
    width: 14px; height: 14px;
    margin-left: -7px; margin-top: -7px;
    border: 2px solid rgba(255,255,255,0.6);
    border-radius: 50%; pointer-events: none; z-index: 5;
  }

  /* Chỉ báo vùng an toàn (thôn) */
  #zoneIndicator {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.55);
    padding: 6px 16px;
    border-radius: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    color: white;
    font-size: 13px;
    font-weight: bold;
    z-index: 10;
    text-shadow: 1px 1px 2px black;
    transition: all 0.3s;
  }
  #zoneIndicator.safe { border-color: #66ff88; color: #aaffaa; }
  #zoneIndicator.danger { border-color: #ff6666; color: #ffaaaa; }

  /* Nút Reset save */
  #resetBtn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(80,30,30,0.7);
    border: 1px solid rgba(255,100,100,0.5);
    color: #ffaaaa;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    z-index: 10;
  }
  #resetBtn:hover {
    background: rgba(120,40,40,0.9);
    color: white;
  }

  /* ===== PANEL CHUNG (Inventory / Shop / Character) ===== */
  .panel {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, rgba(20,25,45,0.97), rgba(35,40,65,0.97));
    border: 2px solid #ffd700;
    border-radius: 12px;
    color: white;
    /* Phải TRÊN cụm nút HUD. #topRight (z:100), #tooltip và #exitDungeonBtn (z:200) từng
       nằm trên bảng; trên điện thoại bảng rộng 96vw nên trùm vào góc phải trên, và cú chạm
       ở vùng giao rơi vào NÚT chứ không vào bảng — hàng đầu của danh sách bấm không ăn.
       Đo 01/10/2026 bằng elementFromPoint ngay tại vùng giao. */
    z-index: 300;
    display: none;
    box-shadow: 0 0 40px rgba(255,215,0,0.3);
    font-size: 14px;
  }
  .panel.show { display: block; }
  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(255,215,0,0.3);
    background: rgba(0,0,0,0.3);
    border-radius: 10px 10px 0 0;
  }
  .panel-title {
    font-size: 20px;
    font-weight: bold;
    color: #ffd700;
  }
  .panel-close {
    background: rgba(255,80,80,0.7);
    border: none; color: white;
    width: 28px; height: 28px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
  }
  .panel-close:hover { background: rgba(255,80,80,1); }

  .gold-display {
    color: #ffd700;
    font-weight: bold;
    margin-right: 12px;
  }
  /* Số dư TCC ở header bảng — cùng dáng ô vàng, khác màu để không lẫn với vàng. */
  .tcc-display {
    color: #7dd3fc;
    font-weight: bold;
    margin-right: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* ===== Tabs ===== */
  .tabs {
    display: flex;
    gap: 4px;
    padding: 8px 12px 0 12px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
  }
  .tab {
    padding: 7px 14px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.15);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    font-size: 12px;
    color: #ccc;
  }
  .tab:hover { background: rgba(255,255,255,0.1); }
  .tab.active {
    background: rgba(255,215,0,0.2);
    color: #ffd700;
    font-weight: bold;
    border-color: #ffd700;
  }

  /* ===== Item grid ===== */
  .item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 6px;
    padding: 14px;
  }
  .item-grid .item-slot {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    min-width: 0;
  }
  .item-slot {
    width: 64px; height: 64px;
    background: rgba(0,0,0,0.4);
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    transition: all 0.15s;
  }
  .item-slot:hover {
    border-color: #ffd700;
    background: rgba(255,215,0,0.1);
    transform: scale(1.05);
  }
  .item-slot.empty {
    cursor: default;
    opacity: 0.4;
  }
  .item-slot.empty:hover {
    border-color: rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.4);
    transform: none;
  }
  /* Icon ảnh render từ mesh - scale fit container */
  .item-slot .ic {
    width: 80%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .item-slot .ic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
  }
  /* Shop row icon */
  .shop-row .icon img,
  .equip-list-row .slot-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .shop-row .icon, .equip-list-row .slot-icon {
    overflow: hidden;
  }
  /* Số lượng khi đồ XẾP CHỒNG — trước đây là chữ trắng trơn nên chìm vào biểu tượng,
     giờ là thẻ nền tối bo tròn ở góc dưới phải cho dễ thấy. */
  .item-qty {
    position: absolute;
    bottom: 2px; right: 3px;
    font-size: 11px;
    font-weight: 800;
    line-height: 15px;
    min-width: 16px;
    padding: 0 5px;
    border-radius: 9px;
    text-align: center;
    background: rgba(0, 0, 0, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffd166;
    text-shadow: 0 1px 2px black;
    pointer-events: none;
  }
  /* ===== Item slot badges + states (DRY: dùng chung explore/dungeon/arena/guild) ===== */
  .item-slot .shop-price-tag {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    color: #ffd700;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
    padding: 6px 0 2px;
    pointer-events: none;
    text-shadow: 0 1px 2px black;
  }
  .item-slot .shop-price-tag.poor { color: #ff6666; }
  .item-slot.shop-cant-afford { opacity: 0.55; cursor: not-allowed; }
  .item-slot .sell-price-tag {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    color: #88ff88;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
    padding: 6px 0 2px;
    pointer-events: none;
    text-shadow: 0 1px 2px black;
  }
  .item-slot .sell-price-tag.locked { color: #666; }
  .item-slot .qty-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(0,0,0,0.8);
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 8px;
    pointer-events: none;
  }
  .item-slot .class-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    pointer-events: none;
    z-index: 5;
    border: 1.5px solid;
    background: rgba(0,0,0,0.85);
    box-shadow: 0 1px 4px rgba(0,0,0,0.8);
  }
  .item-slot .class-badge.warrior {
    border-color: #ff8844;
    color: #ffaa66;
    background: rgba(80,30,10,0.92);
  }
  .item-slot .class-badge.archer {
    border-color: #44dd88;
    color: #88ffaa;
    background: rgba(10,60,30,0.92);
  }
  .item-slot .class-badge.both {
    border-color: #ffd700;
    color: #ffe88a;
    background: rgba(80,50,0,0.92);
    box-shadow: 0 0 8px rgba(255,215,0,0.5);
  }
  .item-slot.wrong-class {
    opacity: 0.65;
  }
  .item-slot.wrong-class::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 5px,
      rgba(255,80,80,0.12) 5px,
      rgba(255,80,80,0.12) 10px
    );
    pointer-events: none;
    border-radius: inherit;
  }
  .item-slot .cell-lock-btn {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: rgba(0,0,0,0.8);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    padding: 0;
    line-height: 18px;
    transition: all 0.15s;
    z-index: 2;
  }
  .item-slot .cell-lock-btn:hover { background: rgba(255,215,0,0.6); }
  .item-slot .cell-lock-btn.locked { background: rgba(255,180,40,0.85); box-shadow: 0 0 6px rgba(255,180,40,0.6); }
  .item-slot.locked-cell { opacity: 0.55; cursor: default; }

  .item-rarity-common    { border-color: #aaaaaa; }
  .item-rarity-uncommon  { border-color: #44dd44; box-shadow: 0 0 6px rgba(68,221,68,0.4); }
  .item-rarity-rare      { border-color: #44aaff; box-shadow: 0 0 6px rgba(68,170,255,0.4); }
  .item-rarity-epic      { border-color: #cc66ff; box-shadow: 0 0 8px rgba(204,102,255,0.5); }
  .item-rarity-legendary { border-color: #ff8800; box-shadow: 0 0 10px rgba(255,136,0,0.6); }
  .item-rarity-mythic    { border-color: #ff3399; box-shadow: 0 0 12px rgba(255,51,153,0.7), 0 0 20px rgba(255,51,153,0.3); }
  .item-rarity-default   { border-color: #888888; opacity: 0.85; }

  .equip-list-row { position: relative; }

  /* ===== Pagination ===== */
  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .pagination button {
    background: rgba(255,215,0,0.2);
    border: 1px solid #ffd700;
    color: #ffd700;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
  }
  .pagination button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
  .pagination .pageinfo { font-size: 12px; opacity: 0.85; }

  /* ===== Tooltip ===== */
  #tooltip {
    position: fixed;
    background: rgba(0,0,0,0.95);
    border: 2px solid #ffd700;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.5;
    color: white;
    pointer-events: none;
    z-index: 350;  /* vẫn phải trên .panel sau khi .panel lên 300 */
    display: none;
    max-width: 240px;
  }
  #tooltip .t-name { font-size: 14px; font-weight: bold; margin-bottom: 4px; }
  #tooltip .t-type { color: #aaa; font-size: 11px; margin-bottom: 6px; }
  #tooltip .t-stat { color: #88ff88; }
  #tooltip .t-desc { color: #ddd; font-style: italic; margin-top: 4px; }
  #tooltip .t-price { color: #ffd700; margin-top: 4px; font-weight: bold; }
  #tooltip .t-action { color: #88ddff; margin-top: 6px; font-size: 11px; }

  /* ===== Shop specific ===== */
  #shopPanel { width: 480px; }
  #npcPanel  { width: 420px; }
  #dungeonPanel { width: 440px; }

  .npc-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .npc-panel-icon { font-size: 36px; }
  .npc-panel-name { font-size: 16px; font-weight: bold; color: #ffd700; }
  .npc-panel-sub  { font-size: 12px; color: #aaa; margin-top: 2px; }
  .npc-dialog {
    padding: 12px 16px;
    font-size: 13px;
    color: #ccddaa;
    font-style: italic;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .npc-actions {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .npc-action-btn {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    color: #e0e0e0;
    padding: 11px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    text-align: left;
    transition: all 0.15s;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .npc-action-btn:hover { background: rgba(255,215,0,0.15); border-color: #ffd700; color: #ffd700; }
  .npc-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
  .npc-action-btn .cost { font-size: 12px; color: #ffd700; }
  .npc-action-btn .desc { font-size: 11px; color: #888; margin-top: 2px; }

  /* Dungeon panel */
  .dungeon-header {
    background: linear-gradient(135deg, #1a0a0a, #2d1010);
    padding: 16px;
    text-align: center;
    border-bottom: 1px solid #5a2020;
  }
  .dungeon-title { font-size: 20px; font-weight: bold; color: #ff6644; margin-bottom: 4px; }
  .dungeon-sub   { font-size: 12px; color: #aa7766; }
  .dungeon-boss-info {
    padding: 14px 16px;
    display: flex;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid rgba(255,100,50,0.2);
  }
  .dungeon-boss-icon { font-size: 48px; }
  .dungeon-boss-name { font-size: 16px; font-weight: bold; color: #ff8866; }
  .dungeon-boss-stat { font-size: 12px; color: #aaa; margin-top: 4px; }
  .dungeon-reward {
    padding: 12px 16px;
    background: rgba(255,100,0,0.08);
    border-bottom: 1px solid rgba(255,100,50,0.15);
  }
  .dungeon-reward-title { font-size: 12px; color: #ffaa44; margin-bottom: 6px; font-weight: bold; }
  .dungeon-reward-items { display: flex; gap: 8px; flex-wrap: wrap; }
  .dungeon-reward-item {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    color: #ddd;
  }
  .dungeon-daily-status {
    padding: 10px 16px;
    font-size: 12px;
    text-align: center;
  }
  .dungeon-enter-btn {
    margin: 12px 16px 16px;
    width: calc(100% - 32px);
    padding: 14px;
    background: linear-gradient(135deg, #882200, #cc4422);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s;
  }
  .dungeon-enter-btn:hover { background: linear-gradient(135deg, #aa3300, #ee5533); }
  .dungeon-enter-btn:disabled { background: #333; color: #666; cursor: not-allowed; }

  /* Proximity hint */
  #proximityHint {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.75);
    color: #ffd700;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 13px;
    border: 1px solid rgba(255,215,0,0.4);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    white-space: nowrap;
  }
  #proximityHint.visible { opacity: 1; }

  /* Mode tabs (Mua / Bán) */
  .shop-mode-tabs {
    display: flex;
    gap: 6px;
    padding: 10px 12px 4px 12px;
  }
  .mode-btn {
    flex: 1;
    padding: 10px;
    background: rgba(0,0,0,0.8);
    border: 2px solid rgba(255,255,255,0.15);
    color: #ccc;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.15s;
  }
  .mode-btn:hover {
    background: rgba(255,255,255,0.1);
    color: white;
  }
  .mode-btn.active {
    background: rgba(255,215,0,0.2);
    border-color: #ffd700;
    color: #ffd700;
  }
  .mode-btn[data-mode="sell"].active {
    background: rgba(136,221,68,0.2);
    border-color: #88dd44;
    color: #aaff66;
  }
  #shopList {
    max-height: 380px;
    overflow-y: auto;
    padding: 8px;
  }
  .shop-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
  }
  .shop-row.selected {
    background: rgba(136,221,68,0.15);
    border-color: #88dd44;
  }
  .shop-row .sell-check {
    width: 18px; height: 18px;
    border: 2px solid #555;
    border-radius: 4px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    transition: all 0.1s;
  }
  .shop-row.selected .sell-check {
    background: #88dd44;
    border-color: #88dd44;
    color: #000;
  }
  .sell-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .sell-toolbar .sel-count { flex: 1; font-size: 12px; color: #aaa; }
  .sell-toolbar .sel-total { font-size: 12px; color: #ffd700; font-weight: bold; }
  .sell-toolbar button {
    padding: 5px 12px;
    border: none; border-radius: 5px;
    font-size: 12px; font-weight: bold; cursor: pointer;
  }
  .btn-sel-all  { background: rgba(255,255,255,0.12); color: #ddd; }
  .btn-sel-all:hover { background: rgba(255,255,255,0.2); }
  .btn-sell-sel { background: #88dd44; color: #000; }
  .btn-sell-sel:hover { background: #aaee55; }
  .btn-sell-sel:disabled { background: #444; color: #666; cursor: not-allowed; }
  .shop-row .icon {
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    background: rgba(0,0,0,0.4);
    border-radius: 4px;
  }
  .shop-row .info { flex: 1; }
  .shop-row .name { font-weight: bold; font-size: 13px; }
  .shop-row .stat { font-size: 11px; color: #88ff88; }
  .shop-row .price { color: #ffd700; font-weight: bold; }
  .shop-row button {
    background: #ffd700;
    color: black;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 12px;
  }
  .shop-row button:hover { background: #ffaa00; }
  .shop-row button:disabled { background: #666; color: #aaa; cursor: not-allowed; }

  /* ===== Inventory panel ===== */
  #invPanel { width: 460px; }

  /* ============================================================
   * CONFIRM DIALOG — đẹp, dùng thay alert/confirm
   * ============================================================ */
  #confirmDialog {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: cdFadeIn 0.2s ease-out;
  }
  #confirmDialog.show { display: flex; }
  @keyframes cdFadeIn { from { opacity: 0; } to { opacity: 1; } }
  #confirmDialog .cd-card {
    width: 90%;
    max-width: 380px;
    background: linear-gradient(135deg, rgba(28,32,52,0.98), rgba(45,40,70,0.96));
    border: 1.5px solid rgba(255,215,100,0.4);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.08);
    color: white;
    overflow: hidden;
    animation: cdScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes cdScaleIn {
    from { opacity: 0; transform: scale(0.92) translateY(-10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
  }
  #confirmDialog .cd-header {
    padding: 18px 22px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  #confirmDialog .cd-icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #ffd700, #ff8800);
    box-shadow: 0 0 20px rgba(255,180,40,0.5);
  }
  #confirmDialog .cd-icon.warn {
    background: linear-gradient(135deg, #ff8844, #cc3300);
    box-shadow: 0 0 20px rgba(255,80,40,0.5);
  }
  #confirmDialog .cd-title {
    font-size: 16px;
    font-weight: 800;
    color: #ffe8a8;
    letter-spacing: 0.5px;
    flex: 1;
  }
  #confirmDialog .cd-body {
    padding: 16px 22px 8px;
    font-size: 13px;
    line-height: 1.5;
    color: #ddd;
    white-space: pre-line;   /* lời nhắn nhiều dòng dùng \n — trước đây bị nuốt thành 1 dòng */
  }
  #confirmDialog .cd-body strong { color: #ffd700; font-weight: 700; }
  #confirmDialog .cd-body .gold-amount { color: #ffd700; font-size: 16px; font-weight: 700; }
  #confirmDialog .cd-actions {
    padding: 12px 22px 18px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
  }
  #confirmDialog .cd-btn {
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 90px;
    letter-spacing: 0.5px;
    user-select: none;
    -webkit-user-select: none;
  }
  #confirmDialog .cd-btn.cancel {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.18);
    color: #bbb;
  }
  #confirmDialog .cd-btn.cancel:hover { background: rgba(255,255,255,0.12); color: #fff; }
  #confirmDialog .cd-btn.confirm {
    background: linear-gradient(135deg, #ffb840, #ff7020);
    color: #2a1500;
    box-shadow: 0 4px 14px rgba(255,140,40,0.4);
  }
  #confirmDialog .cd-btn.confirm:hover {
    background: linear-gradient(135deg, #ffc858, #ff8030);
    box-shadow: 0 6px 18px rgba(255,140,40,0.6);
    transform: translateY(-1px);
  }
  #confirmDialog .cd-btn.confirm.danger {
    background: linear-gradient(135deg, #ff6644, #cc2200);
    color: white;
    box-shadow: 0 4px 14px rgba(255,80,40,0.4);
  }
  #confirmDialog .cd-btn.confirm.danger:hover {
    background: linear-gradient(135deg, #ff7755, #dd3311);
    box-shadow: 0 6px 18px rgba(255,80,40,0.6);
  }
  #confirmDialog .cd-btn:active { transform: scale(0.97); }
  @media (max-width: 768px) {
    #confirmDialog .cd-card { max-width: 92vw; }
    #confirmDialog .cd-btn { min-width: 80px; padding: 11px 16px; font-size: 12px; }
  }

  /* ===== Character panel ===== */
  #charPanel { width: 720px; }
  .char-body {
    display: grid;
    grid-template-columns: 200px 1fr 240px;
    gap: 12px;
    padding: 14px;
    align-items: start;
  }

  /* Cột trái: stats chi tiết */
  .char-stats-col {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 12px;
    font-size: 12px;
    max-height: 380px;
    overflow-y: auto;
    align-self: start;
  }
  .char-stats-col h3 {
    color: #ffd700;
    font-size: 13px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,215,0,0.3);
    padding-bottom: 4px;
  }
  .char-stats-col .stat-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px dotted rgba(255,255,255,0.08);
  }
  .char-stats-col .stat-row:last-child { border-bottom: none; }
  .char-stats-col .stat-row .label { color: #ccc; }
  .char-stats-col .stat-row .v { font-weight: bold; color: #fff; }
  .char-stats-col .stat-row .bonus {
    color: #88ff88;
    font-size: 11px;
    margin-left: 4px;
  }
  .char-stats-col .stat-row .preview-up   { color: #88ff88; font-size: 11px; margin-left: 4px; }
  .char-stats-col .stat-row .preview-down { color: #ff7777; font-size: 11px; margin-left: 4px; }

  /* Cột giữa: Khung render 3D nhân vật */
  .char-doll-col {
    position: relative;
    background: linear-gradient(180deg, rgba(60,80,120,0.4), rgba(20,30,50,0.6));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    height: 380px;
    overflow: hidden;
  }
  /* Canvas nơi render model 3D */
  #charCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: grab;
  }
  #charCanvas:active { cursor: grabbing; }
  /* Hint xoay model */
  .char-doll-hint {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.5);
    font-size: 10px;
    pointer-events: none;
    text-shadow: 1px 1px 2px black;
  }

  /* Thanh điều khiển animation - hiện ở đỉnh khung preview */
  .anim-controls {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    background: rgba(0,0,0,0.55);
    padding: 4px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.15);
    z-index: 3;
  }
  .anim-btn {
    padding: 4px 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    color: #ddd;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    transition: all 0.15s;
  }
  .anim-btn:hover {
    background: rgba(255,215,0,0.2);
    color: #ffd700;
    border-color: #ffd700;
  }
  .anim-btn.active {
    background: rgba(255,215,0,0.3);
    color: #ffd700;
    border-color: #ffd700;
  }
  .anim-btn.attack { color: #ff8866; }
  .anim-btn.attack:hover { background: rgba(255,136,102,0.2); border-color: #ff8866; }
  .anim-btn.attack.active { background: rgba(255,136,102,0.3); border-color: #ff8866; }

  /* ===== Preview overlay khi click item ===== */
  #previewOverlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 5;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }
  #previewOverlay.show { display: flex; }
  #previewOverlay .preview-card {
    background: linear-gradient(135deg, rgba(30,40,70,0.98), rgba(50,60,90,0.98));
    border: 2px solid #ffd700;
    border-radius: 10px;
    padding: 14px 18px;
    max-width: 320px;
    box-shadow: 0 0 30px rgba(255,215,0,0.4);
  }
  #previewOverlay .preview-title {
    font-size: 16px;
    font-weight: bold;
    color: #ffd700;
    margin-bottom: 8px;
    text-align: center;
  }
  #previewOverlay .preview-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0,0,0,0.4);
    padding: 8px;
    border-radius: 6px;
    margin-bottom: 10px;
  }
  #previewOverlay .preview-icon {
    width: 48px; height: 48px;
    border: 2px solid;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    background: rgba(0,0,0,0.4);
  }
  #previewOverlay .preview-name { font-weight: bold; font-size: 14px; }
  #previewOverlay .preview-desc { font-size: 11px; color: #ccc; font-style: italic; margin-top: 2px; }

  #previewOverlay .preview-stats {
    background: rgba(0,0,0,0.3);
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 12px;
  }
  #previewOverlay .preview-stat-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
  }
  #previewOverlay .preview-stat-row .label { color: #aaa; }
  #previewOverlay .preview-stat-row .change-up   { color: #88ff88; font-weight: bold; }
  #previewOverlay .preview-stat-row .change-down { color: #ff7777; font-weight: bold; }
  #previewOverlay .preview-stat-row .change-same { color: #888; }

  #previewOverlay .preview-replacing {
    font-size: 11px;
    color: #ffaa66;
    text-align: center;
    margin-bottom: 10px;
  }
  #previewOverlay .preview-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
  }
  #previewOverlay button {
    padding: 8px 18px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
  }
  #previewOverlay .btn-confirm {
    background: #ffd700;
    color: black;
  }
  #previewOverlay .btn-confirm:hover { background: #ffaa00; }
  #previewOverlay .btn-cancel {
    background: rgba(255,80,80,0.6);
    color: white;
  }
  #previewOverlay .btn-cancel:hover { background: rgba(255,80,80,0.9); }

  /* ===== Item 3D Inspector (popup xoay 3D + log góc) ===== */
  #itemInspector {
    display: none;
    position: fixed;
    inset: 0;
    /* Xem chú thích ở #ducDlg: `inset: 0` bám viewport BỐ CỤC, trên Android Chrome nó thò
       xuống dưới thanh công cụ nên hàng nút ở đáy thẻ bị che. `100dvh` bám phần ĐANG THẤY. */
    height: 100dvh;
    background: rgba(0,0,0,0.75);
    z-index: 1100;
    align-items: center;
    justify-content: center;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
  }
  #itemInspector.show { display: flex; }
  #itemInspector .inspector-card {
    background: linear-gradient(180deg, #1f2030, #14151c);
    border: 2px solid #ffd700;
    border-radius: 12px;
    width: 380px;
    max-width: 100%;
    max-height: 95vh;
    overflow: hidden;
    display: flex;             /* flex col → header sticky, body scroll */
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  }
  #itemInspector .inspector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(255,215,0,0.1);
    border-bottom: 1px solid rgba(255,215,0,0.3);
    flex-shrink: 0;            /* header luôn hiện trên đầu */
  }
  /* Vùng dưới header → scroll khi nội dung tràn (canvas + info + actions) */
  #itemInspector .inspector-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #itemInspector .inspector-scroll::-webkit-scrollbar { width: 6px; }
  #itemInspector .inspector-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
  #itemInspector .inspector-scroll::-webkit-scrollbar-thumb { background: rgba(255,215,0,0.4); border-radius: 3px; }
  #itemInspector .inspector-close {
    /* Đảm bảo nút × đủ to để tap trên mobile (44×44 Apple guideline) */
    min-width: 36px;
    min-height: 36px;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #itemInspector .inspector-title {
    color: #ffd700;
    font-weight: bold;
    font-size: 14px;
  }
  #itemInspector .inspector-close {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 18px;
    padding: 0 6px;
  }
  #itemInspector .inspector-close:hover { color: #ffd700; }
  #inspectorCanvas {
    display: block;
    /* !important để override inline style mà THREE.js renderer.setSize set lên canvas */
    width: 210px !important;
    height: 210px !important;
    max-width: 100%;
    /* Canvas là một ô VUÔNG NHỎ nằm giữa một hàng rộng. Trước đây nền của nó
       (radial tối) khác hẳn nền hàng chứa nó, nên nhìn như một miếng vá lạc lõng.
       Nay bo góc + viền mảnh để nó đọc ra là KHUNG XEM có chủ đích, và hàng chứa
       (.inspector-sankhau) lấy cùng tông nền. */
    margin: 12px auto;
    border-radius: 12px;
    border: 1px solid rgba(255,215,0,0.18);
    box-shadow: inset 0 0 28px rgba(0,0,0,0.55);
    cursor: grab;
    background: radial-gradient(circle at 50% 42%, #2f3242 0%, #11131c 72%);
  }
  /* Nền hàng chứa canvas — nối liền với khung xem thay vì chọi nhau */
  #itemInspector .inspector-scroll > canvas { background-clip: padding-box; }
  #itemInspector .inspector-sankhau {
    background: linear-gradient(180deg, rgba(255,215,0,0.05), rgba(0,0,0,0));
    border-bottom: 1px solid rgba(255,215,0,0.12);
  }
  #inspectorCanvas:active { cursor: grabbing; }
  /* Mobile: canvas nhỏ hơn để dành chỗ cho info + actions trong viewport */
  @media (max-width: 600px) {
    #inspectorCanvas {
      /* 144 quá nhỏ — món chỉ còn bằng cái tem, nhìn không ra hình gì. */
      width: 176px !important;
      height: 176px !important;
    }
    #itemInspector .inspector-info { padding: 10px 12px; }
    #itemInspector .insp-name { font-size: 14px; }
  }
  #itemInspector .inspector-info {
    padding: 12px 14px;
    background: rgba(0,0,0,0.4);
  }
  #itemInspector .insp-name {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 4px;
    text-align: center;
  }
  #itemInspector .insp-rarity {
    font-size: 11px;
    color: #aaa;
    text-align: center;
    margin-bottom: 8px;
  }
  #itemInspector .insp-stats {
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 8px;
  }
  #itemInspector .insp-stat-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #ddd;
    padding: 2px 0;
  }
  #itemInspector .insp-stat-row .v {
    color: #88ff88;
    font-weight: bold;
  }
  #itemInspector .insp-desc {
    font-size: 11px;
    color: #aaa;
    font-style: italic;
    text-align: center;
    margin-bottom: 8px;
  }
  #itemInspector .insp-set {
    margin-bottom: 8px;
    padding: 6px 8px;
    background: rgba(0,0,0,0.4);
    border-radius: 4px;
    border-left: 3px solid #ffd700;
  }
  #itemInspector .insp-set-name {
    font-size: 11px;
    font-weight: bold;
    margin-bottom: 2px;
  }
  #itemInspector .insp-set-tier {
    font-size: 10px;
    margin-top: 1px;
  }
  #itemInspector .inspector-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
  }
  #itemInspector .inspector-actions button {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
    transition: all 0.15s;
  }
  #itemInspector .btn-equip {
    background: #ffd700;
    color: black;
  }
  #itemInspector .btn-equip:hover { background: #ffaa00; }
  #itemInspector .btn-equip:disabled {
    background: #555;
    color: #aaa;
    cursor: not-allowed;
  }
  #itemInspector .btn-unequip {
    background: rgba(255,80,80,0.7);
    color: white;
  }
  #itemInspector .btn-unequip:hover { background: rgba(255,80,80,1); }
  #itemInspector .btn-sell {
    background: #88dd44;
    color: white;
  }
  #itemInspector .btn-sell:hover { background: #66bb22; }
  #itemInspector .btn-sell:disabled {
    background: #555;
    color: #aaa;
    cursor: not-allowed;
  }

  /* Cột phải: danh sách trang bị đang đeo */
  .char-equip-list {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 12px;
    font-size: 12px;
    max-height: 380px;
    overflow-y: auto;
    align-self: start;
  }
  .char-equip-list h3 {
    color: #ffd700;
    font-size: 13px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,215,0,0.3);
    padding-bottom: 4px;
  }
  /* Grid icon đeo - icon to, không text */
  .equip-icons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 8px;
    margin-top: 4px;
  }
  .equip-icon-cell {
    aspect-ratio: 1 / 1;
    width: 100%;
    background: rgba(0,0,0,0.4);
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    overflow: hidden;
  }
  .equip-icon-cell:hover {
    border-color: #ffd700;
    background: rgba(255,215,0,0.12);
    transform: scale(1.06);
    box-shadow: 0 0 12px rgba(255,215,0,0.4);
  }
  .equip-icon-cell.empty {
    opacity: 0.35;
    cursor: default;
    font-size: 22px;
  }
  .equip-icon-cell.empty:hover {
    border-color: rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.4);
    transform: none;
    box-shadow: none;
  }
  .equip-icon-cell img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .equip-icon-cell .slot-tag {
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 8px;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 1px black;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.7));
    padding: 4px 0 1px;
  }

  .equip-list-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    border-radius: 4px;
    margin-bottom: 4px;
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    transition: background 0.15s;
  }
  .equip-list-row:hover { background: rgba(255,215,0,0.15); }
  .equip-list-row.empty { opacity: 0.4; cursor: default; }
  .equip-list-row.empty:hover { background: rgba(255,255,255,0.04); }
  .equip-list-row .slot-icon {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    flex-shrink: 0;
  }
  .equip-list-row .slot-info { flex: 1; min-width: 0; }
  .equip-list-row .slot-label {
    font-size: 10px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .equip-list-row .slot-name {
    font-size: 12px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .equip-list-row .slot-stats {
    font-size: 10px;
    color: #88ff88;
  }
  .equip-list-row .remove-btn {
    background: rgba(255,80,80,0.5);
    border: none;
    color: white;
    width: 22px; height: 22px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    flex-shrink: 0;
  }
  .equip-list-row .remove-btn:hover { background: rgba(255,80,80,0.9); }

  /* Khu inventory mini bên dưới character */
  .char-inv-section {
    border-top: 1px solid rgba(255,255,255,0.15);
    padding: 12px;
  }
  .char-inv-section h3 {
    color: #ffd700;
    font-size: 13px;
    margin-bottom: 8px;
  }
  .char-inv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 6px;
    justify-content: start;
  }
  .char-inv-grid .item-slot {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    font-size: 22px;
    min-width: 0;
  }
  /* Highlight item cùng loại với slot đang hover */
  .item-slot.compat {
    box-shadow: 0 0 0 2px #88ff88, 0 0 12px rgba(136,255,136,0.6);
  }

  /* Preview indicator trong stats */
  .stat-row.preview-changed {
    background: rgba(255,215,0,0.08);
    border-radius: 3px;
    padding: 4px 6px !important;
    margin: 2px -6px;
  }

  /* ===== Toast ===== */
  #toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.85);
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    border: 1px solid #ffd700;
    font-size: 13px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 1500;  /* trên .panel (300) và #itemInspector (1100) — toast báo kết quả của chính thao tác vừa bấm trong đó */
  }
  #toast.show { opacity: 1; }

  /* ===== MOBILE CONTROLS ===== */
  #mobileControls { display:none; position:fixed; inset:0; pointer-events:none; z-index:50; }
  #joystickZone { position:absolute; bottom:30px; left:30px; width:120px; height:120px; pointer-events:auto; }
  #joystickBase { position:absolute; inset:0; background:rgba(255,255,255,0.12); border:2px solid rgba(255,255,255,0.3); border-radius:50%; }
  #joystickThumb { position:absolute; width:48px; height:48px; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(255,255,255,0.5); border-radius:50%; border:2px solid rgba(255,255,255,0.8); }
  #skillButtons { position:absolute; bottom:30px; right:20px; display:flex; flex-direction:column; gap:12px; pointer-events:auto; }
  .skill-btn { width:64px; height:64px; border-radius:50%; border:2px solid rgba(255,255,255,0.4); display:flex; align-items:center; justify-content:center; font-size:22px; cursor:pointer; user-select:none; -webkit-user-select:none; }
  .skill-btn:active { transform:scale(0.9); }
  #btnAttack { background:rgba(80,180,80,0.75); border-color:#88ff88; }
  #btnSkill  { background:rgba(80,120,220,0.75); border-color:#88aaff; }
  #mobilePanelBtns { position:absolute; top:14px; right:14px; display:flex; gap:8px; pointer-events:auto; }
  .mpanel-btn { background:rgba(0,0,0,0.8); border:1px solid rgba(255,255,255,0.2); color:white; border-radius:8px; padding:8px 12px; font-size:18px; cursor:pointer; }

  /* ============================================================
   * EXIT DUNGEON BUTTON — top-right, vị trí giống nút túi đồ ở làng
   * ============================================================ */
  #exitDungeonBtn {
    position: fixed;
    top: 90px;
    right: 14px;
    z-index: 200;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px 9px 14px;
    background: linear-gradient(135deg, rgba(80,15,15,0.92), rgba(50,10,10,0.92));
    color: #ffe0c8;
    border: 1px solid rgba(255,140,80,0.4);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    pointer-events: auto;
    box-shadow:
      0 6px 20px rgba(0,0,0,0.6),
      inset 0 1px 0 rgba(255,200,160,0.15),
      0 0 18px rgba(180,40,30,0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    -webkit-user-select: none;
  }
  #exitDungeonBtn:hover {
    background: linear-gradient(135deg, rgba(120,30,30,0.96), rgba(80,20,20,0.96));
    border-color: rgba(255,180,120,0.7);
    box-shadow:
      0 8px 28px rgba(0,0,0,0.7),
      inset 0 1px 0 rgba(255,220,180,0.2),
      0 0 28px rgba(220,60,40,0.5);
    transform: translateY(-1px);
    color: #fff5e8;
  }
  #exitDungeonBtn:active {
    transform: translateY(1px) scale(0.98);
  }
  #exitDungeonBtn .exit-icon {
    font-size: 16px;
    font-weight: 900;
    color: #ffaa66;
    line-height: 1;
    transition: transform 0.2s;
  }
  #exitDungeonBtn:hover .exit-icon {
    transform: translateX(-3px);
    color: #ffcc88;
  }
  #exitDungeonBtn .exit-label {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 11px;
  }
  @media (max-width:768px) {
    #mobileControls { display: block; }

    /* ===== TOP LEFT mobile: avatar + bars gọn ===== */
    #topLeft {
      top: max(40px, env(safe-area-inset-top, 0px)) !important; left: 6px !important;
      padding: 6px 10px 6px 6px !important;
      gap: 8px !important;
    }
    .hud-avatar { width: 50px !important; height: 50px !important; }
    .hud-level-badge {
      font-size: 9px !important;
      padding: 1px 6px !important;
      bottom: -3px !important;
    }
    .hud-info { min-width: 160px !important; gap: 3px !important; }
    .hud-name { font-size: 12px !important; }
    .hud-class-tag { font-size: 9px !important; padding: 1px 5px !important; }
    .hud-bar { height: 11px !important; }
    .hud-bar-text { font-size: 9px !important; line-height: 11px !important; }
    .hud-bar-icon { font-size: 10px !important; width: 14px !important; }

    /* ===== TOP RIGHT mobile ===== */
    #topRight {
      top: max(40px, env(safe-area-inset-top, 0px)) !important; right: 6px !important;
      gap: 6px !important;
    }
    .hud-stat-card {
      padding: 5px 9px !important;
      gap: 5px !important;
      min-width: 0 !important;
    }
    .hud-stat-card .icon { font-size: 16px !important; }
    .hud-stat-card .stat-label { font-size: 8px !important; letter-spacing: 0.8px !important; }
    .hud-stat-card .stat-value { font-size: 14px !important; }
    .hud-stat-card .stat-sub { font-size: 8px !important; }
    .hud-stat-card.score .stat-sub { display: none !important; }
    .hud-stat-card.gold { padding: 5px 9px !important; }
    .hud-dong { gap: 6px !important; }
    .hud-dong .bieu { flex: 0 0 15px !important; width: 15px !important; font-size: 13px !important; }
    .hud-dong img.bieu { height: 13px !important; }
    .hud-dong.vang .so { font-size: 15px !important; }
    .hud-dong.tcc  .so { font-size: 11.5px !important; }
    #popup { font-size: 26px; }
    #popup.p-vua { font-size: 19px; }
    #popup.p-nho { font-size: 16px; }

    .hud-settings-btn {
      width: 36px !important; height: 36px !important;
      font-size: 18px !important;
    }
    #settingsMenu {
      top: 44px !important;
      min-width: 200px !important;
    }
    .settings-item {
      padding: 9px 12px !important;
      font-size: 12px !important;
    }

    /* ===== SKILL CD BAR: xuống đáy giống PC ===== */
    #skillCdBar {
      top: auto !important;
      bottom: 35px !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      gap: 10px !important;
    }
    #skill1Cd, #skill2Cd {
      width: 38px !important; height: 38px !important;
      font-size: 16px !important;
    }
    #skillCdBar > div > div:last-child {
      font-size: 8px !important;
      margin-top: 1px !important;
    }

    /* ===== MOBILE PANEL BUTTONS: hàng ngang dưới topLeft ===== */
    #mobilePanelBtns {
      top: 129px !important;
      left: 8px !important;
      right: auto !important;
      bottom: auto !important;
      flex-direction: row !important;
      gap: 6px !important;
    }
    .mpanel-btn {
      width: 38px !important; height: 38px !important;
      padding: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 18px !important;
    }

    /* ===== JOYSTICK ===== */
    #joystickZone {
      bottom: 35px !important; left: 14px !important;
      width: 130px !important; height: 130px !important;
    }
    #joystickThumb { width: 52px !important; height: 52px !important; }

    /* ===== SKILL BUTTONS ===== */
    .skill-btn {
      width: 64px !important; height: 64px !important;
      font-size: 26px !important;
    }
    #skillButtons {
      bottom: 35px !important; right: 14px !important;
      gap: 12px !important;
    }

    /* Daily reward HUD - dưới panel buttons phải */
    #dailyRewardHud {
      top: 159px !important;
      bottom: auto !important;
      right: 6px !important;
      left: auto !important;
      font-size: 9px !important;
      padding: 4px 6px !important;
      min-width: 120px !important;
      max-width: 140px !important;
    }

    /* Exit dungeon button — top-right giống mobilePanelBtns ở làng */
    #exitDungeonBtn {
      top: 119px !important;
      right: 8px !important;
      padding: 6px 14px 6px 11px !important;
      font-size: 11px !important;
    }
    #exitDungeonBtn .exit-label {
      font-size: 9px !important;
      letter-spacing: 1.2px !important;
    }
    #exitDungeonBtn .exit-icon {
      font-size: 14px !important;
    }

    /* Phóng to font panel */
    .panel { font-size:14px; max-height:85vh; width:96vw !important; }
    .shop-row button, .npc-action-btn { min-height: 44px; }

    /* ===== CHARACTER PANEL: 1 scroll mượt cho cả panel ===== */
    #charPanel {
      width: 96vw !important;
      max-height: 90vh !important;
      flex-direction: column !important;
    }
    #charPanel.show {
      display: flex !important;
    }
    #charPanel .panel-header { flex-shrink: 0 !important; }
    .char-body {
      grid-template-columns: 1fr !important;
      gap: 10px !important;
      padding: 10px !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      flex: 1 1 auto !important;
      overscroll-behavior: contain !important;
    }
    .char-stats-col {
      max-height: none !important;
      overflow: visible !important;
      font-size: 11px !important;
      padding: 10px !important;
    }
    .char-stats-col h3 { font-size: 12px !important; margin-bottom: 6px !important; }
    .char-doll-col {
      height: 320px !important;
      flex-shrink: 0 !important;
      touch-action: pan-y !important;
    }
    #charCanvas {
      touch-action: pan-y !important;
    }
    .anim-controls {
      top: 4px !important;
      gap: 2px !important;
      padding: 3px !important;
    }
    .anim-btn {
      padding: 4px 10px !important;
      font-size: 10px !important;
      min-height: 28px !important;
    }
    .char-doll-hint {
      font-size: 9px !important;
      bottom: 4px !important;
    }
    .char-equip-list {
      max-height: none !important;
      overflow: visible !important;
    }
    .char-inv-section {
      max-height: none !important;
      overflow: visible !important;
    }
    .char-inv-section h3 { font-size: 12px !important; }

    #previewOverlay .preview-card {
      max-width: 90vw !important;
      font-size: 11px !important;
    }
    #previewOverlay .preview-name { font-size: 13px !important; }
    #previewOverlay .preview-desc { font-size: 10px !important; }
  }

/* ============================================================
 * PvP Battle Panel — dùng chung cho explore.html (PvP modal Battle tab)
 * và arena.html (lobby overlay). HTML build qua renderPvpBattlePanel()
 * trong shared.js. Trước đây CSS chỉ inline trong explore.html → arena
 * mất style. Move ra file shared này để đồng bộ.
 * ============================================================ */
.pvp-stats { margin-bottom: 20px; }
.pvp-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.pvp-stat-item {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(201, 53, 53, 0.25);
  border-radius: 3px;
  padding: 12px 8px;
  text-align: center;
}
.pvp-stat-label {
  color: #aa6060;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.pvp-stat-value {
  color: #ffd700;
  font-size: 22px;
  font-weight: 900;
  font-family: ui-monospace, monospace;
}
.pvp-find-area {
  text-align: center;
}
.pvp-find-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #c93535, #6a1818);
  border: 1px solid #ff5555;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 3px;
  margin-bottom: 12px;
  transition: all 0.2s;
}
.pvp-find-btn:hover {
  box-shadow: 0 0 20px rgba(255, 85, 85, 0.6);
}
.pvp-find-btn:disabled {
  background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
  border-color: #555;
  color: #888;
  cursor: not-allowed;
}
.pvp-find-btn:disabled:hover { box-shadow: none; }
.pvp-hint {
  color: #aa6060;
  font-size: 11px;
  line-height: 1.5;
  font-style: italic;
}
@media (max-width: 600px) {
  .pvp-stat-row { grid-template-columns: repeat(2, 1fr); }
}

/* ── Banner sự kiện (x2 EXP / x2 Vàng) ──────────────────────────────────────
   `net/tcc-events.js` dựng banner với class `.tn-widget`, nhưng class đó CHỈ được
   định nghĩa trong <style> của explore.html. Arena và dungeon trước đây không nạp
   tcc-events.js nên không lộ; nay nạp rồi thì banner sẽ hiện trần trụi nếu thiếu
   luật. Đặt ở đây vì cả ba trang đều nạp arena-shared.css. Explore vẫn dùng bản
   trong <style> của nó (nằm sau thẻ <link> nên thắng) — không đụng nhau. */
.tn-widget {
  position: fixed; left: 12px; top: 230px; z-index: 50;
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(40,15,5,0.6));
  border: 1px solid rgba(255,176,48,0.5); border-radius: 4px;
  color: #ffd28a; user-select: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.tn-widget-icon { font-size: 18px; line-height: 1; }
.tn-widget-info { display: flex; flex-direction: column; gap: 1px; }
.tn-widget-label {
  font-size: 9px; letter-spacing: 0.12em; font-weight: 700;
  opacity: 0.85; text-transform: uppercase; line-height: 1;
}
.tn-widget-countdown {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px; font-weight: 800; line-height: 1.1; letter-spacing: 0.02em;
}
@media (max-width: 600px) {
  .tn-widget { left: 8px; top: 200px; padding: 4px 8px; gap: 6px; }
  .tn-widget-icon { font-size: 16px; }
  .tn-widget-label { font-size: 8px; }
  .tn-widget-countdown { font-size: 11px; }
}