@font-face {
  font-family: "Galmuri11";
  src: url("./assets/fonts/Galmuri11.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Galmuri11";
  src: url("./assets/fonts/Galmuri11-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 합성 가능 안내 배지 */
.upgrade-badge {
  position: absolute;
  top: -6px;
  right: -4px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #000;
  font-size: 8px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.7);
  letter-spacing: -0.5px;
  z-index: 2;
}

@keyframes pulse-upgrade {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.upgrade-badge {
  animation: pulse-upgrade 1.5s infinite ease-in-out;
}
:root {
      --bg: #070913;
      --card-bg: rgba(15, 23, 42, 0.9);
      --card-hover: rgba(30, 41, 59, 0.95);
      --border: rgba(255, 255, 255, 0.1);
      --border-accent: rgba(56, 189, 248, 0.35);
      --accent: #38bdf8;
      --accent-glow: rgba(56, 189, 248, 0.4);
      --pink: #f43f5e;
      --pink-glow: rgba(244, 63, 94, 0.4);
      --amber: #f59e0b;
      --amber-glow: rgba(245, 158, 11, 0.4);
      --emerald: #10b981;
      --emerald-glow: rgba(16, 185, 129, 0.4);
      --purple: #a855f7;
      --purple-glow: rgba(168, 85, 247, 0.4);
      --text: #f8fafc;
      --subtext: #94a3b8;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }

    body {
      background-color: var(--bg);
      background-image:
        radial-gradient(circle at 15% 10%, rgba(56, 189, 248, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 85% 90%, rgba(168, 85, 247, 0.08) 0%, transparent 40%);
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 8px 24px;
      touch-action: manipulation;
    }

    .app-container {
      max-width: 920px;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* 상단 네비게이션 & 게임 헤더 */
    .top-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--card-bg);
      backdrop-filter: blur(12px);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 8px 14px;
    }

    .nav-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .back-btn {
      color: var(--subtext);
      text-decoration: none;
      font-size: 13px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--border);
      transition: all 0.2s ease;
    }

    .back-btn:hover {
      color: #fff;
      border-color: var(--accent);
      background: rgba(56, 189, 248, 0.15);
      transform: translateY(-1px);
    }

    .game-title {
      font-size: 15px;
      font-weight: 900;
      letter-spacing: -0.5px;
      background: linear-gradient(135deg, #fff 40%, #94a3b8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .btn-action {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid var(--border);
      color: var(--subtext);
      font-size: 12px;
      font-weight: 700;
      padding: 6px 10px;
      border-radius: 8px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: all 0.2s ease;
    }

    .btn-action:hover {
      color: #fff;
      border-color: var(--accent);
      background: rgba(56, 189, 248, 0.15);
    }

    /* 상단 아레나 배너 */
    .arena-banner {
      position: relative;
      height: 96px;
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid var(--border-accent);
      background: #0d111e url('./assets/banner.jpg') center/cover no-repeat;
      display: flex;
      align-items: center;
      padding: 0 18px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    }

    .arena-banner-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(7, 9, 19, 0.95) 0%, rgba(7, 9, 19, 0.75) 50%, rgba(7, 9, 19, 0.35) 100%);
    }

    .arena-banner-content {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .arena-badge {
      font-size: 10px;
      font-weight: 800;
      color: var(--accent);
      letter-spacing: 1px;
    }

    .arena-banner h2 {
      font-size: 16px;
      font-weight: 900;
      color: #fff;
      letter-spacing: -0.3px;
    }

    .arena-banner p {
      font-size: 11px;
      color: var(--subtext);
    }

    /* 유닛 썸네일 이미지 공통 스타일 */
    .inspector-avatar-thumb {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 8px;
    }

    .bench-avatar-thumb {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      object-fit: cover;
      border: 1.5px solid var(--border-accent);
      box-shadow: 0 0 6px var(--accent-glow);
    }

    .shop-card-thumb {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      object-fit: cover;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* 상태 바 (체력, 라운드, 골드, 이자, 레벨) */
    .status-bar {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 8px;
    }

    .status-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    }

    .status-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .status-label {
      font-size: 10px;
      font-weight: 700;
      color: var(--subtext);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .status-val {
      font-size: 16px;
      font-weight: 900;
      color: #fff;
      font-family: monospace;
      display: flex;
      align-items: baseline;
      gap: 4px;
    }

    .status-val.hp { color: var(--pink); text-shadow: 0 0 10px var(--pink-glow); }
    .status-val.gold { color: var(--amber); text-shadow: 0 0 10px var(--amber-glow); }
    .status-val.round { color: var(--accent); text-shadow: 0 0 10px var(--accent-glow); }
    .status-val.level { color: var(--purple); text-shadow: 0 0 10px var(--purple-glow); }

    .status-sub {
      font-size: 10px;
      color: #64748b;
      font-weight: 600;
    }

    /* 메인 경기장 레이아웃 (좌측 시너지 패널 + 중앙 전장 + 우측 아이템) */
    .battlefield-wrapper {
      display: grid;
      grid-template-columns: 240px 1fr;
      gap: 10px;
    }

    @media (max-width: 800px) {
      .battlefield-wrapper {
        grid-template-columns: 1fr;
      }
    }

    /* 시너지 목록 패널 */
    .synergy-panel {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 580px;
      overflow-y: auto;
    }

    .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 6px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .panel-title {
      font-size: 12px;
      font-weight: 800;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .syn-filter-toggles {
      display: flex;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 2px;
      gap: 2px;
    }

    .syn-toggle-btn {
      background: transparent;
      border: none;
      color: var(--subtext);
      font-size: 10px;
      font-weight: 700;
      padding: 3px 6px;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .syn-toggle-btn.active {
      background: rgba(56, 189, 248, 0.2);
      color: var(--accent);
      border: 1px solid rgba(56, 189, 248, 0.3);
    }

    .synergy-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    /* 시너지 카드 */
    .synergy-card {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-radius: 10px;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      transition: all 0.2s ease;
    }

    .synergy-card.active-bronze {
      background: rgba(245, 158, 11, 0.08);
      border-color: rgba(245, 158, 11, 0.35);
    }

    .synergy-card.active-gold {
      background: rgba(56, 189, 248, 0.1);
      border-color: rgba(56, 189, 248, 0.45);
      box-shadow: 0 0 10px rgba(56, 189, 248, 0.15);
    }

    .syn-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .syn-header-left {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .syn-icon {
      font-size: 15px;
    }

    .syn-name {
      font-size: 12px;
      font-weight: 800;
      color: #fff;
    }

    .syn-type-tag {
      font-size: 9px;
      font-weight: 700;
      padding: 1px 4px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.08);
      color: var(--subtext);
    }

    .syn-type-tag.origin { color: #c084fc; background: rgba(168, 85, 247, 0.15); }
    .syn-type-tag.class { color: #38bdf8; background: rgba(56, 189, 248, 0.15); }

    .syn-count-pill {
      font-family: monospace;
      font-size: 11px;
      font-weight: 800;
      background: rgba(0, 0, 0, 0.4);
      padding: 2px 6px;
      border-radius: 6px;
      color: #94a3b8;
    }

    .synergy-card.active-bronze .syn-count-pill { color: #fbbf24; }
    .synergy-card.active-gold .syn-count-pill { color: #38bdf8; }

    .syn-effects {
      display: flex;
      flex-direction: column;
      gap: 3px;
      font-size: 10px;
      line-height: 1.35;
    }

    .syn-tier {
      color: #64748b;
      display: flex;
      align-items: baseline;
      gap: 4px;
    }

    .syn-tier.active {
      color: #e2e8f0;
      font-weight: 700;
    }

    .synergy-card.active-bronze .syn-tier.active { color: #fde047; }
    .synergy-card.active-gold .syn-tier.active { color: #7dd3fc; }

    .tier-badge {
      font-weight: 800;
      font-family: monospace;
      padding: 0 3px;
      border-radius: 3px;
      background: rgba(255, 255, 255, 0.08);
      color: var(--subtext);
    }

    .syn-tier.active .tier-badge {
      background: rgba(56, 189, 248, 0.2);
      color: #fff;
    }

    .syn-members {
      display: flex;
      flex-wrap: wrap;
      gap: 3px;
      padding-top: 2px;
      border-top: 1px dashed rgba(255, 255, 255, 0.06);
    }

    .member-chip {
      font-size: 9px;
      color: #64748b;
      background: rgba(255, 255, 255, 0.03);
      padding: 1px 5px;
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .member-chip.owned {
      color: #38bdf8;
      border-color: rgba(56, 189, 248, 0.35);
      background: rgba(56, 189, 248, 0.08);
      font-weight: 700;
    }

    /* 전장 중앙 영역 */
    .battle-center {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .canvas-container {
      position: relative;
      width: 100%;
      background: #050813;
      border: 2px solid rgba(255, 255, 255, 0.12);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(0, 0, 0, 0.8);
      touch-action: none;
    }

    canvas {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 560 / 440;
    }

    /* 전투 페이즈 배너 / 카운트다운 */
    .phase-banner {
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(9, 13, 24, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(8px);
      padding: 4px 14px;
      border-radius: 99px;
      font-size: 11px;
      font-weight: 800;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 8px;
      pointer-events: none;
      z-index: 5;
    }

    .phase-badge {
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .phase-badge.prep { background: rgba(56, 189, 248, 0.2); color: var(--accent); }
    .phase-badge.combat { background: rgba(244, 63, 94, 0.2); color: var(--pink); }

    /* 유닛 상세 인스펙터 HUD */
    .unit-inspector {
      background: var(--card-bg);
      border: 1px solid var(--border-accent);
      border-radius: 14px;
      padding: 10px 14px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
      min-height: 48px;
      display: flex;
      align-items: center;
    }

    .inspector-empty {
      font-size: 11px;
      color: var(--subtext);
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
      justify-content: center;
    }

    .inspector-card {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .inspector-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .inspector-avatar-box {
      width: 44px;
      height: 44px;
      background: #111827;
      border: 2px solid var(--accent);
      box-shadow: 0 0 10px var(--accent-glow);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      position: relative;
    }

    .inspector-stars {
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 10px;
      color: #fbbf24;
      text-shadow: 0 0 6px #fbbf24;
      letter-spacing: -2px;
    }

    .inspector-info-group {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .inspector-name-row {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .inspector-name {
      font-size: 13px;
      font-weight: 900;
      color: #fff;
    }

    .inspector-badges {
      display: flex;
      gap: 4px;
    }

    .badge-pill {
      font-size: 10px;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }

    .badge-pill.origin { background: rgba(168, 85, 247, 0.2); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.4); }
    .badge-pill.class { background: rgba(56, 189, 248, 0.2); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.4); }

    .inspector-stats-row {
      display: flex;
      gap: 6px;
      font-size: 10px;
      color: var(--subtext);
    }

    .stat-chip {
      background: rgba(0, 0, 0, 0.3);
      padding: 1px 5px;
      border-radius: 4px;
    }

    .inspector-skill-box {
      flex: 1;
      min-width: 200px;
      background: rgba(0, 0, 0, 0.25);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 11px;
      line-height: 1.35;
    }

    .inspector-skill-title {
      font-weight: 800;
      color: #a855f7;
    }

    .inspector-skill-desc {
      color: #94a3b8;
    }

    .inspector-actions {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .btn-sell {
      background: rgba(245, 158, 11, 0.15);
      border: 1px solid rgba(245, 158, 11, 0.4);
      color: #fbbf24;
      font-size: 11px;
      font-weight: 800;
      padding: 6px 12px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn-sell:hover {
      background: rgba(245, 158, 11, 0.25);
      border-color: #fbbf24;
      box-shadow: 0 0 10px var(--amber-glow);
    }

    .btn-close-inspector {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--border);
      color: var(--subtext);
      font-size: 12px;
      padding: 6px 8px;
      border-radius: 8px;
      cursor: pointer;
    }

    /* 대기석 (벤치) */
    .bench-deck {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 8px 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .bench-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11px;
      font-weight: 700;
      color: var(--subtext);
    }

    .bench-slots {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 6px;
    }

    @media (max-width: 640px) {
      .bench-slots {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    .bench-slot {
      min-height: 84px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px dashed rgba(255, 255, 255, 0.12);
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      position: relative;
      cursor: pointer;
      padding: 4px;
      transition: all 0.2s ease;
    }

    .bench-slot:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.25);
    }

    .bench-slot.selected {
      border: 2px solid var(--accent);
      background: rgba(56, 189, 248, 0.15);
      box-shadow: 0 0 12px var(--accent-glow);
    }

    .bench-unit {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }

    .bench-top {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .unit-stars {
      font-size: 9px;
      color: #fbbf24;
      text-shadow: 0 0 4px #fbbf24;
      letter-spacing: -2px;
    }

    .unit-cost-badge {
      font-size: 9px;
      font-weight: 900;
      background: rgba(0, 0, 0, 0.7);
      padding: 1px 4px;
      border-radius: 4px;
      color: #fff;
    }

    .unit-avatar {
      font-size: 20px;
      margin: 1px 0;
    }

    .unit-name {
      font-size: 10px;
      font-weight: 800;
      color: #fff;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    .bench-syn-pills {
      display: flex;
      gap: 2px;
      width: 100%;
      justify-content: center;
    }

    .mini-pill {
      font-size: 8px;
      font-weight: 700;
      padding: 1px 3px;
      border-radius: 3px;
      background: rgba(255, 255, 255, 0.08);
      color: var(--subtext);
      white-space: nowrap;
    }

    .empty-slot-num {
      font-size: 12px;
      font-weight: 800;
      color: rgba(255, 255, 255, 0.08);
      margin: auto;
    }

    /* 아이템 보관 트레이 */
    .item-tray {
      display: flex;
      gap: 6px;
      align-items: center;
      overflow-x: auto;
      padding-top: 4px;
    }

    .item-token {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 8px;
      padding: 4px 8px;
      font-size: 11px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.2s ease;
      position: relative;
    }

    .item-token:hover, .item-token.selected {
      border-color: var(--amber);
      background: rgba(245, 158, 11, 0.15);
      box-shadow: 0 0 10px var(--amber-glow);
    }

    .item-stat-pill {
      font-size: 9px;
      font-weight: 800;
      color: #fbbf24;
      background: rgba(245, 158, 11, 0.18);
      border: 1px solid rgba(245, 158, 11, 0.35);
      padding: 1px 5px;
      border-radius: 4px;
      white-space: nowrap;
    }

    /* 유닛 인스펙터 내 장착 아이템 */
    .inspector-items-row {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-wrap: wrap;
    }

    .equipped-chip {
      background: rgba(245, 158, 11, 0.12);
      border: 1px solid rgba(245, 158, 11, 0.4);
      color: #fbbf24;
      font-size: 10px;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      cursor: help;
      transition: all 0.2s ease;
    }

    .equipped-chip:hover {
      background: rgba(245, 158, 11, 0.25);
      border-color: #fbbf24;
      box-shadow: 0 0 8px var(--amber-glow);
    }

    /* 벤치 내 장착 아이템 미니 배지 */
    .bench-item-pills {
      display: flex;
      gap: 2px;
      align-items: center;
      justify-content: center;
      margin-top: 1px;
    }

    .bench-mini-item {
      font-size: 10px;
      background: rgba(245, 158, 11, 0.2);
      border: 1px solid rgba(245, 158, 11, 0.4);
      border-radius: 4px;
      padding: 0 2px;
    }

    /* 플로팅 인터랙티브 툴팁 */
    #itemTooltip {
      position: fixed;
      z-index: 99999;
      pointer-events: none;
      background: rgba(15, 23, 42, 0.96);
      border: 1px solid rgba(245, 158, 11, 0.6);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8), 0 0 16px rgba(245, 158, 11, 0.25);
      border-radius: 10px;
      padding: 8px 12px;
      font-size: 11px;
      color: #fff;
      display: none;
      max-width: 250px;
      line-height: 1.4;
      transform: translate(-50%, -100%);
      margin-top: -12px;
      backdrop-filter: blur(8px);
    }

    /* 하단 상점 덱 */
    .shop-deck {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    }

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

    .shop-actions {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .btn-shop {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid var(--border);
      color: #fff;
      font-size: 12px;
      font-weight: 800;
      padding: 7px 14px;
      border-radius: 10px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    .btn-shop:hover:not(:disabled) {
      background: rgba(56, 189, 248, 0.2);
      border-color: var(--accent);
      box-shadow: 0 0 12px var(--accent-glow);
      transform: translateY(-1px);
    }

    .btn-shop:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .btn-shop.reroll { border-color: rgba(245, 158, 11, 0.3); }
    .btn-shop.reroll:hover:not(:disabled) { background: rgba(245, 158, 11, 0.2); border-color: var(--amber); box-shadow: 0 0 12px var(--amber-glow); }

    .btn-shop.battle-start {
      background: linear-gradient(135deg, #f43f5e, #be123c);
      border: none;
      box-shadow: 0 0 14px var(--pink-glow);
    }

    .btn-shop.battle-start:hover {
      background: linear-gradient(135deg, #fb7185, #e11d48);
      box-shadow: 0 0 20px var(--pink-glow);
      transform: translateY(-1px);
    }

    /* 상점 카드 슬롯 5개 */
    .shop-cards {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
    }

    @media (max-width: 600px) {
      .shop-cards {
        grid-template-columns: repeat(2, 1fr);
      }
      .shop-cards .shop-card:last-child {
        grid-column: span 2;
      }
    }

    .shop-card {
      background: rgba(17, 24, 39, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 12px;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      cursor: pointer;
      position: relative;
      transition: all 0.2s ease;
    }

    .shop-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    }

    .shop-card.cost-1 { border-left: 4px solid #94a3b8; }
    .shop-card.cost-2 { border-left: 4px solid #10b981; }
    .shop-card.cost-3 { border-left: 4px solid #38bdf8; }
    .shop-card.cost-4 { border-left: 4px solid #a855f7; }
    .shop-card.cost-5 { border-left: 4px solid #f59e0b; }

    .shop-card-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .shop-card-name {
      font-size: 12px;
      font-weight: 800;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .shop-card-cost {
      font-size: 11px;
      font-weight: 900;
      font-family: monospace;
      color: var(--amber);
    }

    .shop-card-tags {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
    }

    .tag-badge {
      font-size: 9px;
      font-weight: 700;
      padding: 2px 5px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.08);
      color: var(--subtext);
    }

    .tag-badge.origin { color: #c084fc; background: rgba(168, 85, 247, 0.15); }
    .tag-badge.class { color: #38bdf8; background: rgba(56, 189, 248, 0.15); }

    .shop-card-skill {
      font-size: 10px;
      color: #94a3b8;
      line-height: 1.3;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* 게임 오버 / 승리 모달 */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(6, 9, 19, 0.88);
      backdrop-filter: blur(10px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      z-index: 100;
    }

    .modal-overlay.show {
      opacity: 1;
      pointer-events: auto;
    }

    .modal-box {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 28px 24px;
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 16px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
    }

    .modal-title {
      font-size: 26px;
      font-weight: 900;
    }

    .modal-desc {
      font-size: 13px;
      color: var(--subtext);
      line-height: 1.6;
    }

    .modal-btn {
      background: linear-gradient(135deg, #0284c7, #38bdf8);
      border: none;
      color: #fff;
      font-size: 14px;
      font-weight: 800;
      padding: 12px 28px;
      border-radius: 12px;
      cursor: pointer;
      box-shadow: 0 0 16px var(--accent-glow);
      transition: all 0.2s ease;
      width: 100%;
    }

    .modal-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 24px var(--accent-glow);
    }

    /* 도감 모달 */
    .codex-content {
      max-height: 400px;
      overflow-y: auto;
      text-align: left;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .codex-section-title {
      font-size: 12px;
      font-weight: 800;
      color: var(--accent);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding-bottom: 4px;
    }

    .codex-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 6px;
    }

    .codex-card {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      padding: 6px 8px;
      font-size: 10px;
      line-height: 1.4;
    }