@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800;900&family=Noto+Sans+KR:wght@400;700;900&display=swap');

:root {
  --neon-blue: #00d2ff;
  --neon-pink: #ff2a85;
  --neon-yellow: #ffe600;
  --neon-gold: #ffaa00;
  --arcade-bg-dark: #0a0c16;
  --arcade-panel: rgba(18, 22, 38, 0.85);
  --arcade-border: rgba(255, 255, 255, 0.15);
  --hp-green: #2ecc71;
  --hp-yellow: #f1c40f;
  --hp-red: #e74c3c;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Outfit', 'Noto Sans KR', sans-serif;
  background: radial-gradient(circle at 50% 20%, #1a1a36 0%, #0c0d1b 60%, #05050a 100%);
  color: #ffffff;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  user-select: none;
}

/* 아케이드 캐비닛 전체 프레임 */
#arcade-machine {
  width: 100%;
  max-width: 560px;
  height: 100vh;
  max-height: 940px;
  background: linear-gradient(180deg, #111424 0%, #090a12 100%);
  border: 4px solid #2e3558;
  border-radius: 28px;
  box-shadow: 0 0 40px rgba(0, 210, 255, 0.25), 0 20px 60px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* 상단 마키 (전광판) */
#arcade-header {
  padding: 12px 16px;
  background: linear-gradient(90deg, #1f1235 0%, #0f1c3f 50%, #1f1235 100%);
  border-bottom: 3px solid #ffcc00;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  z-index: 20;
}

.brand-badge {
  display: flex;
  align-items: center;
  gap: 8px;
}

.star-logo {
  font-size: 1.4rem;
  color: #ffe600;
  text-shadow: 0 0 10px #ffe600;
  animation: pulse-star 1.5s infinite alternate;
}

.title-text {
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #ffe600, #ff0077, #00d2ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 12px rgba(255, 230, 0, 0.4);
}

.header-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  max-width: 100%;
}

.icon-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

.icon-btn.active {
  background: #ffcc00;
  color: #000;
  border-color: #ffcc00;
  box-shadow: 0 0 10px rgba(255, 204, 0, 0.6);
}

/* 메인 배틀 화면 뷰포트 - 태그스타 배경 이미지 */
#screen-viewport {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #0d1020;
  background-image: url('bg_arena.jpg');
  background-size: cover;
  background-position: center 60%;
  transition: background-image 0.6s ease-in-out;
}

#screen-viewport::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(8, 10, 20, 0.35) 0%, rgba(10, 13, 26, 0.3) 45%, rgba(5, 6, 13, 0.7) 100%);
  pointer-events: none;
  z-index: 2;
}

/* 3D 원형 배틀 필드 바닥 라인 */
.battle-ground {
  position: absolute;
  bottom: 60px;
  left: 5%;
  width: 90%;
  height: 200px;
  border: 3px solid rgba(0, 210, 255, 0.3);
  border-radius: 50%;
  transform: perspective(600px) rotateX(65deg);
  background: radial-gradient(ellipse at center, rgba(0, 210, 255, 0.15) 0%, transparent 70%);
  box-shadow: 0 0 35px rgba(0, 210, 255, 0.2), inset 0 0 25px rgba(255, 42, 133, 0.2);
  pointer-events: none;
}

/* 스테이지 헤더 정보 (적 보스 이름 & 스테이지 뱃지) */
#stage-info-bar {
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  z-index: 10;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stage-badge {
  background: linear-gradient(135deg, #ff0077, #9b51e0);
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  font-size: 0.75rem;
  box-shadow: 0 2px 8px rgba(255, 0, 119, 0.4);
}

.stage-area-pill {
  background: rgba(0, 210, 255, 0.2);
  border: 1px solid #00d2ff;
  color: #00d2ff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
}

/* 지역 진입 인트로 배너 */
.area-intro-card {
  position: absolute;
  top: 32%;
  left: 5%;
  width: 90%;
  background: rgba(10, 12, 24, 0.92);
  border: 2px solid #00d2ff;
  border-radius: 18px;
  box-shadow: 0 0 35px rgba(0, 210, 255, 0.7), inset 0 0 15px rgba(255, 255, 255, 0.2);
  padding: 16px;
  text-align: center;
  z-index: 60;
  display: none;
  backdrop-filter: blur(10px);
  animation: area-pop 0.35s ease-out;
}

@keyframes area-pop {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.area-intro-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: #ffe600;
  text-shadow: 0 0 10px #ffe600;
}

.area-intro-sub {
  font-size: 0.8rem;
  color: #ffffff;
  margin-top: 5px;
  font-weight: 700;
}

.combo-badge {
  color: #ffe600;
  text-shadow: 0 0 6px #ffe600;
}

/* 배틀 필드 컨테이너 */
#arena-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 16px;
  position: relative;
  z-index: 5;
}

/* 상대팀 포켓몬 존 (상단) - 태그스타 3마리 */
.enemy-zone {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  width: 100%;
}

/* 아군 포켓몬 존 (하단) - 태그스타 3마리 */
.player-zone {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 6px;
  width: 100%;
}

/* 포켓몬 카드 슬롯 */
.poke-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: pointer;
  flex: 1;
  max-width: 120px;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.poke-slot.active-attacker {
  transform: scale(1.08) translateY(-6px);
}

.poke-slot.active-attacker .poke-avatar-wrapper {
  border-color: #ffe600;
  box-shadow: 0 0 22px #ffe600;
}

.poke-slot.active-target .poke-avatar-wrapper {
  border-color: #ff0055;
  box-shadow: 0 0 22px #ff0055;
}

.poke-avatar-wrapper {
  position: relative;
  width: 82px;
  height: 82px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.65) 80%);
  border: 2px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
  transition: all 0.3s;
}

.enemy-slot .poke-avatar-wrapper {
  width: 86px;
  height: 86px;
}

.poke-sprite {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.8));
  transition: transform 0.2s;
}

.enemy-slot .poke-sprite {
  width: 78px;
  height: 78px;
}

.poke-meta {
  width: 108px;
  max-width: 115px;
  margin-top: 4px;
  text-align: center;
}

.poke-title-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 800;
  text-shadow: 1px 1px 3px #000;
}

.star-rating {
  color: #ffe600;
  font-size: 0.75rem;
}

/* HP 바 */
.hp-gauge-bg {
  width: 100%;
  height: 10px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  overflow: hidden;
  margin-top: 3px;
  position: relative;
}

.hp-gauge-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #2ecc71, #a8ff78);
  border-radius: 6px;
  transition: width 0.35s ease-out, background 0.3s;
}

.hp-gauge-fill.warning {
  background: linear-gradient(90deg, #f39c12, #f1c40f);
}

.hp-gauge-fill.critical {
  background: linear-gradient(90deg, #c0392b, #e74c3c);
}

.hp-text {
  font-size: 0.65rem;
  color: #ccc;
  margin-top: 2px;
}

/* 중앙 연타 게이지 & 상태창 */
#action-center {
  background: var(--arcade-panel);
  border-top: 2px solid rgba(255, 255, 255, 0.15);
  border-bottom: 2px solid rgba(255, 255, 255, 0.15);
  padding: 10px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 15;
}

#banner-announcement {
  font-size: 1.05rem;
  font-weight: 900;
  text-align: center;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 0 10px rgba(255, 230, 0, 0.8);
  color: #ffe600;
  letter-spacing: 0.5px;
}

.mash-meter-container {
  width: 100%;
  max-width: 440px;
  margin: 8px 0 4px 0;
  position: relative;
}

.mash-meter-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 800;
  color: #aaa;
  margin-bottom: 3px;
}

.mash-meter-bar {
  width: 100%;
  height: 22px;
  background: #141724;
  border: 3px solid #ffe600;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8), 0 0 12px rgba(255, 230, 0, 0.3);
}

.mash-meter-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff416c 0%, #ff4b2b 40%, #ffe600 100%);
  border-radius: 8px;
  transition: width 0.08s linear;
  box-shadow: 0 0 15px rgba(255, 75, 43, 0.8);
}

.mash-meter-fill.fever {
  background: linear-gradient(90deg, #ff0077 0%, #00d2ff 50%, #ffe600 100%);
  animation: fever-rainbow 0.6s linear infinite alternate;
}

/* 하단 아케이드 듀얼 버튼 컨트롤러 (원형 LED 게이지 및 회전 무지개 링) */
#arcade-controls {
  padding: 12px 16px 20px 16px;
  background: linear-gradient(180deg, #181d33 0%, #0d0f1c 100%);
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 3px solid #282f4e;
  z-index: 20;
}

.arcade-btn-container {
  position: relative;
  width: 136px;
  height: 136px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 원형 LED 게이지 SVG */
.btn-gauge-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 136px;
  height: 136px;
  pointer-events: none;
  transform: rotate(-90deg);
  z-index: 2;
}

.gauge-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 8;
  stroke-dasharray: 4 4;
}

.gauge-fill {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 390;
  stroke-dashoffset: 390;
  transition: stroke-dashoffset 0.08s ease-out;
}

.gauge-fill.red {
  stroke: #ff0055;
  filter: drop-shadow(0 0 8px #ff0055);
}

.gauge-fill.blue {
  stroke: #00d2ff;
  filter: drop-shadow(0 0 8px #00d2ff);
}

/* 100% MAX 도달 시 뺑뺑 도는 무지개 회전 링 (Rainbow Spinner) */
.btn-rainbow-spinner {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 142px;
  height: 142px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 3;
}

.arcade-btn-container.max-charged .btn-rainbow-spinner {
  opacity: 1;
  background: conic-gradient(from 0deg, #ff0055, #ff9900, #ffff00, #00ff66, #00d2ff, #7f00ff, #ff0055);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #fff calc(100% - 8px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #fff calc(100% - 8px));
  animation: spin-rainbow 0.65s linear infinite;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 20px #ffe600);
}

.arcade-btn-container.max-charged .arcade-push-btn {
  box-shadow: 0 0 25px rgba(255, 230, 0, 0.8), 0 0 45px rgba(255, 0, 119, 0.7);
  animation: pulse-button-glow 0.6s infinite alternate;
}

@keyframes spin-rainbow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulse-button-glow {
  from { filter: brightness(1); }
  to { filter: brightness(1.25); }
}

.arcade-push-btn {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 5px solid #ffffff;
  outline: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-weight: 900;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  position: relative;
  z-index: 4;
  transition: transform 0.08s, box-shadow 0.08s;
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.6), 0 12px 25px rgba(0, 0, 0, 0.6);
}

.arcade-push-btn.btn-red {
  background: radial-gradient(circle at 35% 35%, #ff5e62 0%, #ff1343 60%, #a80024 100%);
  box-shadow: 0 10px 0 #7a0019, 0 15px 30px rgba(255, 19, 67, 0.4);
}

.arcade-push-btn.btn-blue {
  background: radial-gradient(circle at 35% 35%, #36d1dc 0%, #0077ff 60%, #004499 100%);
  box-shadow: 0 10px 0 #002d66, 0 15px 30px rgba(0, 119, 255, 0.4);
}

.arcade-push-btn:active,
.arcade-push-btn.pressed {
  transform: translateY(8px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.4);
}

.btn-main-label {
  font-size: 1.15rem;
  letter-spacing: 0.5px;
}

.btn-key-hint {
  font-size: 0.72rem;
  opacity: 0.9;
  background: rgba(0, 0, 0, 0.35);
  padding: 2px 6px;
  border-radius: 8px;
  margin-top: 4px;
}

/* 룰렛 모달 (공격 보너스) */
.roulette-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(6px);
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 100;
  animation: fadeIn 0.2s ease;
}

.roulette-cabinet {
  background: linear-gradient(135deg, #1c1432 0%, #0d1a3a 100%);
  border: 4px solid #ffcc00;
  box-shadow: 0 0 35px rgba(255, 204, 0, 0.6);
  border-radius: 24px;
  padding: 26px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 380px;
  width: 85%;
}

.roulette-header-txt {
  font-size: 1.15rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
}

.roulette-dial-box {
  background: #000;
  border: 3px solid #ff0077;
  border-radius: 16px;
  margin: 18px 0;
  width: 100%;
  height: 85px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0 0 15px rgba(255, 0, 119, 0.5);
}

.roulette-num {
  font-size: 3.5rem;
  font-weight: 900;
  color: #ffe600;
  text-shadow: 0 0 20px #ffe600;
  font-variant-numeric: tabular-nums;
}

.roulette-sub-tip {
  font-size: 0.85rem;
  color: #00d2ff;
  font-weight: 700;
  animation: blink 0.8s infinite alternate;
}

/* 포획 모드 (GET TIME) 볼 룰렛 */
.ball-roulette-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 20px 0;
}

.ball-card {
  width: 80px;
  height: 95px;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}

.ball-card.highlight {
  border-color: #ffe600;
  background: rgba(255, 230, 0, 0.2);
  transform: scale(1.18);
  box-shadow: 0 0 25px rgba(255, 230, 0, 0.7);
}

.ball-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.ball-label {
  font-size: 0.75rem;
  font-weight: 800;
}

/* Issue #31: 더블 디스크 찬스 배너 & 황금 마스터볼 잭팟 카드 */
.double-catch-banner {
  background: linear-gradient(90deg, #ff007f, #ffe600, #00d2ff, #ff007f);
  background-size: 300% 100%;
  animation: bannerSheen 2s linear infinite, bannerPulse 0.8s ease-in-out infinite alternate;
  color: #fff;
  font-weight: 900;
  font-size: 0.95rem;
  padding: 8px 14px;
  border-radius: 20px;
  margin: 6px auto;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 16px rgba(255, 230, 0, 0.7);
  text-align: center;
  letter-spacing: 0.5px;
}
@keyframes bannerSheen {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
@keyframes bannerPulse {
  0% { transform: scale(0.96); }
  100% { transform: scale(1.04); }
}

.ball-card.card-gold-master {
  border-color: #ffd700;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.28) 0%, rgba(255, 140, 0, 0.12) 100%);
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.55);
  animation: goldMasterGlow 1.2s ease-in-out infinite alternate;
}
.ball-card.card-gold-master.highlight {
  border-color: #fff;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(255, 215, 0, 0.6) 100%);
  box-shadow: 0 0 35px rgba(255, 215, 0, 0.95);
  transform: scale(1.22);
}
@keyframes goldMasterGlow {
  0% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); transform: scale(1); }
  100% { box-shadow: 0 0 22px rgba(255, 215, 0, 0.9); transform: scale(1.05); }
}
.ball-clock-marker.ball-type-gold_master svg,
.ball-clock-marker.ball-type-gold_master {
  filter: drop-shadow(0 0 8px #ffd700);
}
#ball-roulette-modal.has-gold-ball .ball-card {
  width: 18%;
  height: 65px;
  gap: 2px;
}

/* 볼 투척 & 포획 애니메이션 컨테이너 */
#catch-animation-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 7, 15, 0.92);
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 150;
}

.pokeball-throw-graphic {
  width: 90px;
  height: 90px;
  transition: transform 0.4s;
}

.pokeball-throw-graphic.wobble-left {
  transform: rotate(-32deg) scale(1.05);
}

.pokeball-throw-graphic.wobble-right {
  transform: rotate(32deg) scale(1.05);
}

.catch-status-msg {
  margin-top: 25px;
  font-size: 1.4rem;
  font-weight: 900;
  color: #ffe600;
  text-shadow: 0 0 15px rgba(255, 230, 0, 0.6);
}

/* 메자스타 공식 태그 디스크 카드 (배출 & 도감) */
.tagstar-disk {
  width: 220px;
  height: 330px;
  background: linear-gradient(145deg, #181926 0%, #0d0f19 100%);
  border-radius: 20px;
  border: 4px solid #ffe600;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 230, 0, 0.4);
  overflow: hidden;
  perspective: 1000px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 상단 체인 홀 (메자스타 시그니처 구멍) */
.disk-chain-hole {
  position: absolute;
  top: 10px;
  width: 28px;
  height: 10px;
  background: #080911;
  border: 2px solid #555;
  border-radius: 6px;
  box-shadow: inset 0 2px 4px #000;
}

/* 홀로그램 포일 오버레이 (무지개 광택) */
.tagstar-disk::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 30%,
    rgba(0, 210, 255, 0.2) 45%,
    rgba(255, 42, 133, 0.2) 55%,
    transparent 70%
  );
  pointer-events: none;
  transform: rotate(25deg);
  animation: holo-shine 4s infinite linear;
}

.disk-rarity-badge {
  margin-top: 14px;
  font-size: 0.9rem;
  font-weight: 900;
  color: #ffe600;
  background: rgba(0, 0, 0, 0.6);
  padding: 2px 12px;
  border-radius: 12px;
  border: 1px solid #ffe600;
  text-shadow: 0 0 8px #ffe600;
}

.disk-img-container {
  width: 130px;
  height: 130px;
  margin: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.disk-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.7));
}

.disk-name {
  font-size: 1.25rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 5px #000;
}

.disk-move-name {
  font-size: 0.85rem;
  color: #00d2ff;
  font-weight: 800;
  margin-top: 4px;
  background: rgba(0, 210, 255, 0.15);
  padding: 2px 10px;
  border-radius: 8px;
}

.disk-stats-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 800;
}

/* 디스크 배출 연출 모달 */
#dispense-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(3, 4, 10, 0.95);
  backdrop-filter: blur(10px);
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 200;
  padding: 20px;
}

.dispense-headline {
  font-size: 1.6rem;
  font-weight: 900;
  color: #ffe600;
  text-shadow: 0 0 20px #ffe600;
  margin-bottom: 20px;
  text-align: center;
}

.dispenser-chute {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: drop-disk 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  width: 100%;
}

.dispense-confirm-btn {
  margin-top: 14px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #ffe600, #ff8c00);
  color: #000;
  border: none;
  font-size: 1rem;
  font-weight: 900;
  padding: 12px 28px;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(255, 230, 0, 0.6);
  transition: transform 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
  z-index: 100;
  position: relative;
  animation: pulse-confirm-btn 1.4s infinite alternate;
}

@keyframes pulse-confirm-btn {
  0% { transform: scale(1); box-shadow: 0 4px 14px rgba(255, 230, 0, 0.4); }
  100% { transform: scale(1.04); box-shadow: 0 8px 24px rgba(255, 230, 0, 0.85); }
}

.dispense-confirm-btn:hover {
  transform: scale(1.08);
}

/* 도감 모달 (디스크 앨범) */
#collection-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(8, 10, 20, 0.96);
  backdrop-filter: blur(12px);
  display: none;
  flex-direction: column;
  z-index: 250;
  padding: 16px;
}

.collection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.15);
}

.collection-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  padding-bottom: 20px;
}

.mini-disk-card {
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.mini-disk-card:hover {
  border-color: #ffe600;
  background: rgba(255, 230, 0, 0.1);
  transform: translateY(-3px);
}

.mini-disk-card.selected-team {
  border-color: #00d2ff;
  box-shadow: 0 0 15px rgba(0, 210, 255, 0.5);
  background: rgba(0, 210, 255, 0.15);
}

.mini-disk-img {
  width: 65px;
  height: 65px;
  object-fit: contain;
}

.mini-disk-name {
  font-size: 0.8rem;
  font-weight: 800;
  margin-top: 4px;
}

/* 타이틀 화면 오버레이 */
#title-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, #1b1c3d 0%, #080913 80%);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 30px 20px;
  z-index: 300;
}

.title-logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.title-main-h1 {
  font-size: 2.2rem;
  font-weight: 900;
  background: linear-gradient(180deg, #fff700 0%, #ff8c00 50%, #ff0055 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 25px rgba(255, 140, 0, 0.5);
  letter-spacing: 1px;
}

.title-sub-h2 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #00d2ff;
  letter-spacing: 3px;
  margin-top: 4px;
  text-shadow: 0 0 10px #00d2ff;
}

.title-pokemons-showcase {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 15px;
  margin: 15px 0;
}

.title-showcase-img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.7));
  animation: float-poke 2.5s infinite ease-in-out alternate;
}

.start-coin-btn {
  background: linear-gradient(90deg, #ff0077, #ff5e62);
  border: 4px solid #fff;
  border-radius: 40px;
  padding: 16px 48px;
  font-size: 1.35rem;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(255, 0, 119, 0.6);
  animation: btn-glow 1.2s infinite alternate;
  letter-spacing: 1px;
}

/* 데미지 플로팅 텍스트 */
.damage-floater {
  position: absolute;
  font-size: 2rem;
  font-weight: 900;
  color: #ff3366;
  text-shadow: 2px 2px 0 #fff, 0 0 15px #ff3366;
  pointer-events: none;
  animation: damage-rise 0.8s forwards ease-out;
  z-index: 50;
}

.damage-floater.crit {
  font-size: 2.6rem;
  color: #ffe600;
  text-shadow: 2px 2px 0 #ff0055, 0 0 25px #ffe600;
}

/* 스킬 연출 컷인 배너 */
#skill-cutin-banner {
  position: absolute;
  top: 42%;
  left: 0;
  width: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 0, 119, 0.9) 20%, rgba(0, 210, 255, 0.9) 80%, rgba(0, 0, 0, 0) 100%);
  padding: 12px 0;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 10px #000;
  letter-spacing: 2px;
  display: none;
  z-index: 90;
  animation: cutin-slide 0.6s ease;
}

/* 화면 쉐이크 */
.screen-shake {
  animation: shake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* 애니메이션 키프레임 */
@keyframes shake {
  10%, 90% { transform: translate3d(-3px, 2px, 0); }
  20%, 80% { transform: translate3d(4px, -3px, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 4px, 0); }
  40%, 60% { transform: translate3d(6px, -4px, 0); }
}

@keyframes drop-disk {
  0% { transform: translateY(-180px) rotate(-15deg); opacity: 0; }
  60% { transform: translateY(15px) rotate(4deg); opacity: 1; }
  80% { transform: translateY(-8px) rotate(-2deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

@keyframes pulse-star {
  from { transform: scale(0.9); opacity: 0.8; }
  to { transform: scale(1.15); opacity: 1; }
}

@keyframes btn-glow {
  0% { box-shadow: 0 0 15px rgba(255, 0, 119, 0.5); transform: scale(0.98); }
  100% { box-shadow: 0 0 35px rgba(255, 230, 0, 0.9); transform: scale(1.03); }
}

@keyframes float-poke {
  0% { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}

@keyframes fever-rainbow {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

@keyframes holo-shine {
  0% { transform: translateX(-100%) rotate(25deg); }
  100% { transform: translateX(100%) rotate(25deg); }
}

@keyframes damage-rise {
  0% { opacity: 1; transform: translateY(0) scale(0.8); }
  50% { opacity: 1; transform: translateY(-30px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-55px) scale(1); }
}

@keyframes cutin-slide {
  0% { transform: scaleY(0); opacity: 0; }
  40% { transform: scaleY(1.2); opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}

@keyframes blink {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

/* 슈퍼스타 출현 긴급 경보 */
.warning-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(231, 76, 60, 0.4) 0%, rgba(10, 12, 22, 0.95) 75%);
  z-index: 80;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  backdrop-filter: blur(4px);
  animation: warning-pulse 0.4s infinite alternate;
}

@keyframes warning-pulse {
  from { background-color: rgba(231, 76, 60, 0.35); }
  to { background-color: rgba(0, 0, 0, 0.92); }
}

.warning-tape {
  background: #ffcc00;
  color: #111;
  font-weight: 900;
  font-size: 0.9rem;
  letter-spacing: 2px;
  padding: 8px 24px;
  transform: rotate(-3deg);
  box-shadow: 0 0 20px rgba(255, 204, 0, 0.8);
  margin-bottom: 16px;
}

.warning-boss-title {
  font-size: 1.8rem;
  font-weight: 900;
  color: #ff0055;
  text-shadow: 0 0 20px #ff0055, 0 0 40px #ffe600;
  animation: blink 0.3s infinite alternate;
  letter-spacing: 1px;
}

.warning-sub {
  margin-top: 10px;
  font-size: 0.8rem;
  color: #00d2ff;
  letter-spacing: 1px;
}

/* 태그 러시 듀얼 컷인 연출 */
.dual-cutin-container {
  position: absolute;
  top: 14%;
  left: 5%;
  width: 90%;
  background: linear-gradient(135deg, rgba(255, 0, 119, 0.92) 0%, rgba(26, 26, 54, 0.96) 50%, rgba(0, 210, 255, 0.92) 100%);
  border: 3px solid #ffe600;
  border-radius: 20px;
  box-shadow: 0 0 35px rgba(255, 230, 0, 0.8), inset 0 0 20px rgba(255, 255, 255, 0.4);
  z-index: 75;
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px;
  animation: dual-slide-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes dual-slide-in {
  0% { transform: scale(0.6) rotate(-5deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.dual-cutin-header {
  font-size: 1.05rem;
  font-weight: 900;
  color: #ffe600;
  letter-spacing: 2px;
  text-shadow: 0 0 10px #ffe600;
  margin-bottom: 10px;
}

.dual-cutin-fighters {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
}

.dual-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.left-card {
  animation: slide-from-left 0.4s ease-out;
}

.right-card {
  animation: slide-from-right 0.4s ease-out;
}

@keyframes slide-from-left {
  from { transform: translateX(-60px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slide-from-right {
  from { transform: translateX(60px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.dual-card img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.8));
}

.dual-card span {
  font-size: 0.95rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 4px #000;
}

.dual-vs {
  font-size: 2rem;
  color: #ffe600;
  text-shadow: 0 0 20px #ffe600;
  animation: pulse-star 0.5s infinite alternate;
}

.dual-sub-text {
  margin-top: 8px;
  font-size: 0.75rem;
  color: #fff;
  font-weight: 700;
}

/* Issue #29: 태그 릴레이 교대 컷인 및 슬롯 스타일 */
.tag-relay-cutin-overlay {
  position: absolute;
  top: 14%;
  left: 5%;
  width: 90%;
  background: linear-gradient(135deg, rgba(20, 20, 45, 0.95) 0%, rgba(10, 30, 60, 0.98) 50%, rgba(20, 50, 40, 0.95) 100%);
  border: 3px solid #00d2ff;
  border-radius: 20px;
  box-shadow: 0 0 35px rgba(0, 210, 255, 0.8), inset 0 0 20px rgba(255, 255, 255, 0.3);
  z-index: 80;
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px;
  animation: relay-cutin-pop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes relay-cutin-pop {
  0% { transform: scale(0.65); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.relay-badge {
  font-size: 1.05rem;
  font-weight: 900;
  color: #00d2ff;
  letter-spacing: 2px;
  text-shadow: 0 0 10px #00d2ff, 0 0 20px #0077ff;
  margin-bottom: 10px;
}

.relay-fighters {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
}

.relay-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: relative;
}

.relay-card-out {
  animation: slide-relay-out 0.4s ease-out;
  opacity: 0.85;
}

.relay-card-in {
  animation: slide-relay-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slide-relay-out {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-20px); opacity: 0.85; }
}

@keyframes slide-relay-in {
  from { transform: translateX(50px) scale(0.8); opacity: 0; }
  to { transform: translateX(0) scale(1.05); opacity: 1; }
}

.relay-card-tag {
  font-size: 0.65rem;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 1px;
}

.relay-card-tag.out {
  background: #555;
  color: #ddd;
}

.relay-card-tag.in {
  background: linear-gradient(90deg, #ff0077, #ffe600);
  color: #000;
  box-shadow: 0 0 12px #ffe600;
  animation: pulse-star 1s infinite alternate;
}

.relay-sprite-wrapper {
  width: 82px;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.7) 80%);
  border: 2px solid rgba(255, 255, 255, 0.4);
}

.relay-card-in .relay-sprite-wrapper {
  border-color: #ffe600;
  box-shadow: 0 0 18px rgba(255, 230, 0, 0.8);
}

.relay-sprite {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.relay-name {
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
}

.relay-vs {
  font-size: 1.8rem;
  font-weight: 900;
  color: #ffe600;
  text-shadow: 0 0 15px #ffe600;
  animation: pulse-star 1s infinite alternate;
}

.relay-desc-text {
  margin-top: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #a0eaff;
  text-shadow: 0 0 6px #00d2ff;
  text-align: center;
}

.poke-slot.relay-switchable {
  cursor: pointer;
}

.poke-slot.relay-switchable .poke-avatar-wrapper {
  border-color: #00d2ff;
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.7);
  animation: relay-slot-pulse 1.8s infinite ease-in-out;
}

.poke-slot.relay-switchable:hover {
  transform: scale(1.06) translateY(-4px);
}

.poke-slot.relay-boosted .poke-avatar-wrapper {
  border-color: #ffe600;
  box-shadow: 0 0 25px rgba(255, 230, 0, 0.9);
}

.relay-tag-pill {
  position: absolute;
  bottom: -6px;
  background: linear-gradient(90deg, #00d2ff, #0077ff);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  letter-spacing: 0.5px;
  animation: relay-badge-bounce 1.5s infinite;
  z-index: 5;
}

.relay-boost-pill {
  position: absolute;
  top: -8px;
  background: linear-gradient(90deg, #ff0077, #ff5500);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(255, 0, 119, 0.7);
  white-space: nowrap;
  animation: pulse-star 1.2s infinite alternate;
  z-index: 5;
}

@keyframes relay-slot-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(0, 210, 255, 0.5); }
  50% { box-shadow: 0 0 20px rgba(0, 210, 255, 0.95); }
}

@keyframes relay-badge-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* 듀얼 연타 번갈아치기 콤보 바 */
.alternate-combo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  padding: 0 4px;
}

.combo-pill {
  background: linear-gradient(90deg, #ff0077, #ff5500);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 2px 10px;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(255, 0, 119, 0.5);
  letter-spacing: 1px;
  transition: transform 0.1s;
}

.combo-pill.bump {
  transform: scale(1.25);
}

.combo-hint-pill {
  font-size: 0.68rem;
  color: #00d2ff;
  font-weight: 700;
}

/* 아케이드 디스크 배출구 트레이 */
.arcade-dispenser-slot {
  background: #090a12;
  border-top: 2px solid #2e3558;
  padding: 6px 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.tray-bezel {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tray-led-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2ecc71;
  box-shadow: 0 0 8px #2ecc71;
  animation: blink 1s infinite alternate;
}

.tray-label-txt {
  font-size: 0.65rem;
  font-weight: 800;
  color: #8892b0;
  letter-spacing: 1.5px;
}

.tray-opening-pocket {
  width: 140px;
  height: 18px;
  background: #020305;
  border-radius: 6px;
  border: 2px solid #1a1e30;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.9);
  position: relative;
  overflow: hidden;
}

.tray-chute-inner {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, #090a12, #090a12 6px, #121422 6px, #121422 12px);
  opacity: 0.6;
}

/* 도감 서브바 */
.collection-sub-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 10px;
}

/* 포켓몬 타입 상성 뱃지 */
.poke-type-badge-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 2px;
}

.type-mini-pill {
  font-size: 0.6rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 6px;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
}

.type-matchup-badge {
  font-size: 0.62rem;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 8px;
  letter-spacing: 0.5px;
  display: inline-block;
}

.type-matchup-badge.super {
  background: linear-gradient(90deg, #ff0077, #ffe600);
  color: #000;
  box-shadow: 0 0 10px rgba(255, 230, 0, 0.8);
  animation: pulse-star 0.7s infinite alternate;
}

.type-matchup-badge.normal {
  background: rgba(0, 210, 255, 0.35);
  color: #00d2ff;
  border: 1px solid rgba(0, 210, 255, 0.6);
}

.type-matchup-badge.weak {
  background: rgba(100, 100, 110, 0.75);
  color: #bbb;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* 지쳐있음 (Fatigue / Exhaustion) 시스템 */
.poke-slot.fatigued .poke-avatar-wrapper {
  filter: grayscale(40%) opacity(0.85);
  border-color: #3498db;
}

.fatigue-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: linear-gradient(135deg, #2980b9, #3498db);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(52, 152, 219, 0.8);
  animation: fatigue-bounce 1s infinite alternate;
  z-index: 5;
}

@keyframes fatigue-bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-3px); }
}

/* 스피드 라인 & 선공 찬스 오버레이 (Speed Clash) */
.speed-clash-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 7, 18, 0.92);
  backdrop-filter: blur(8px);
  z-index: 70;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
  box-sizing: border-box;
  animation: clash-fadein 0.25s ease-out;
}

@keyframes clash-fadein {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.clash-header {
  text-align: center;
  margin-bottom: 12px;
}

.clash-badge {
  font-size: 0.75rem;
  font-weight: 900;
  padding: 3px 12px;
  border-radius: 12px;
  letter-spacing: 0.5px;
  display: inline-block;
  margin-bottom: 6px;
}

.clash-badge.red {
  background: #e74c3c;
  color: #fff;
  box-shadow: 0 0 12px rgba(231, 76, 60, 0.8);
  animation: pulse-star 0.5s infinite alternate;
}

.clash-badge.blue {
  background: #00d2ff;
  color: #000;
  box-shadow: 0 0 16px #00d2ff;
}

.clash-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: #ffe600;
  text-shadow: 0 0 12px rgba(255, 230, 0, 0.8);
}

.clash-sub {
  font-size: 0.75rem;
  color: #fff;
  margin-top: 4px;
}

.clash-versus-stage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 460px;
  margin: 10px 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 14px 12px;
}

.clash-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90px;
}

.clash-box img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.7));
}

.clash-box span {
  font-size: 0.8rem;
  font-weight: 800;
  margin-top: 4px;
  text-align: center;
}

.clash-spd-pill {
  font-size: 0.65rem;
  font-weight: 900;
  background: #00d2ff;
  color: #000;
  padding: 2px 7px;
  border-radius: 8px;
  margin-top: 3px;
}

.clash-spd-pill.enemy {
  background: #ff4757;
  color: #fff;
}

.clash-meter-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 10px;
}

.clash-bar-rail {
  width: 100%;
  height: 18px;
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid #555;
  border-radius: 10px;
  position: relative;
  overflow: visible;
}

.clash-fill-line {
  height: 100%;
  width: 35%;
  background: linear-gradient(90deg, #ff4757, #ffa502);
  border-radius: 8px;
  transition: width 0.1s ease-out, background 0.2s;
}

.clash-fill-line.won {
  background: linear-gradient(90deg, #00d2ff, #2ed573);
  box-shadow: 0 0 15px #00d2ff;
}

.clash-marker-pin {
  position: absolute;
  top: -6px;
  left: 35%;
  transform: translateX(-50%);
  font-size: 1.1rem;
  transition: left 0.1s ease-out;
  filter: drop-shadow(0 0 6px #ffe600);
}

.clash-timer {
  font-size: 0.95rem;
  font-weight: 900;
  color: #ffe600;
  margin-top: 6px;
}

/* 특수 기믹 (다이맥스/메가진화/Z기술) 컷신 */
.gimmick-cutin-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(142, 68, 173, 0.85) 0%, rgba(5, 5, 12, 0.95) 90%);
  z-index: 80;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  animation: gimmick-zoom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes gimmick-zoom {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.gimmick-halo-ring {
  position: absolute;
  width: 220px;
  height: 220px;
  border: 4px dashed rgba(255, 230, 0, 0.7);
  border-radius: 50%;
  animation: rotate-halo 4s linear infinite;
  box-shadow: 0 0 40px rgba(255, 0, 119, 0.6);
}

@keyframes rotate-halo {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.gimmick-badge {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 2px;
  padding: 4px 18px;
  border-radius: 20px;
  background: linear-gradient(90deg, #ff0077, #ffe600);
  color: #000;
  box-shadow: 0 0 20px #ffe600;
  margin-bottom: 12px;
  z-index: 2;
}

.gimmick-center-display {
  position: relative;
  z-index: 2;
  margin: 10px 0;
}

.gimmick-pokemon-sprite {
  width: 130px;
  height: 130px;
  object-fit: contain;
  filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.9));
  animation: pulse-star 0.6s infinite alternate;
}

.gimmick-title-txt {
  font-size: 1.4rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 15px #ffe600, 0 0 30px #ff0077;
  z-index: 2;
}

.gimmick-move-sub {
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffe600;
  margin-top: 6px;
  z-index: 2;
}

/* 타입 상성표 모달 */
.typechart-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(6, 8, 18, 0.92);
  backdrop-filter: blur(8px);
  z-index: 90;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 12px;
  box-sizing: border-box;
}

.typechart-cabinet {
  background: #12162a;
  border: 2px solid #00d2ff;
  border-radius: 16px;
  box-shadow: 0 0 35px rgba(0, 210, 255, 0.5);
  width: 100%;
  max-width: 500px;
  max-height: 90%;
  display: flex;
  flex-direction: column;
  padding: 14px;
  box-sizing: border-box;
}

.typechart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.typechart-summary-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.type-rule-box {
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.72rem;
}

.type-rule-box.super {
  background: rgba(255, 230, 0, 0.12);
  border: 1px solid rgba(255, 230, 0, 0.4);
}

.type-rule-box.super .rule-tit {
  color: #ffe600;
  font-weight: 900;
}

.type-rule-box.normal {
  background: rgba(0, 210, 255, 0.1);
  border: 1px solid rgba(0, 210, 255, 0.3);
}

.type-rule-box.normal .rule-tit {
  color: #00d2ff;
  font-weight: 800;
}

.type-rule-box.weak {
  background: rgba(149, 165, 166, 0.12);
  border: 1px solid rgba(149, 165, 166, 0.3);
}

.type-rule-box.weak .rule-tit {
  color: #bdc3c7;
  font-weight: 800;
}

.type-rule-box p {
  margin-top: 2px;
  color: #ddd;
}

.typechart-table-scroll {
  flex: 1;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
}

.typechart-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
  text-align: left;
}

.typechart-table th, .typechart-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.typechart-table th {
  background: rgba(0, 0, 0, 0.5);
  font-weight: 800;
  position: sticky;
  top: 0;
}

/* 게이지 무지개빛 (Rainbow MAX) 애니메이션 */
.mash-meter-fill.rainbow-max {
  background: linear-gradient(90deg, #ff0055, #ffa500, #ffff00, #00ff88, #00d2ff, #9900ff) !important;
  background-size: 200% 200% !important;
  animation: rainbow-flow 0.6s linear infinite !important;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.9), 0 0 40px #ff0077 !important;
}

@keyframes rainbow-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===================================================
   아이 친화적 시각 연출: 공격자 클로즈업 & 피격자 분할 화면
   =================================================== */

.cinematic-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 85;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

/* 1. 공격자 중앙 화면 꽉 차는 클로즈업 스테이지 (Full-Screen Attacker Close-Up) */
.cinematic-attack {
  background: radial-gradient(circle at center, rgba(14, 22, 54, 0.98) 0%, rgba(4, 6, 16, 0.99) 100%);
  animation: cinema-zoom-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
  padding: 10px;
}

@keyframes cinema-zoom-in {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}

.cinema-speedlines {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 230, 0, 0.16) 0deg 6deg, transparent 6deg 14deg);
  animation: rotate-halo 4s linear infinite;
  pointer-events: none;
}

.cinema-burst-ring {
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  border: 5px solid rgba(0, 210, 255, 0.7);
  box-shadow: 0 0 60px #00d2ff, inset 0 0 45px #ff0077;
  animation: pulse-ring 0.6s infinite alternate;
  pointer-events: none;
}

@keyframes pulse-ring {
  from { transform: scale(0.85); opacity: 0.5; }
  to { transform: scale(1.25); opacity: 1; }
}

.cinema-attack-card {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  width: 100%;
  height: 94%;
  max-width: 580px;
}

.cinema-top-badge {
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #ff0077, #ffe600);
  color: #000;
  padding: 5px 24px;
  border-radius: 22px;
  box-shadow: 0 0 25px #ffe600;
  margin-top: 6px;
  animation: pop-scale 0.3s ease-out;
}

/* 화면에 꽉 차는 대형 공격자 스프라이트 컨테이너 */
.cinema-sprite-wrap {
  position: relative;
  width: 100%;
  height: 52vh;
  min-height: 270px;
  max-height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cinema-big-sprite {
  width: auto;
  height: 100%;
  max-height: 380px;
  max-width: 92%;
  object-fit: contain;
  filter: drop-shadow(0 0 40px rgba(255, 230, 0, 0.95)) drop-shadow(0 0 80px rgba(0, 210, 255, 0.75)) drop-shadow(0 15px 30px rgba(0,0,0,0.9));
  animation: attacker-power-surge 0.65s infinite alternate ease-in-out;
}

@keyframes attacker-power-surge {
  0% { 
    transform: scale(1.05) translateY(0); 
    filter: drop-shadow(0 0 30px rgba(255, 230, 0, 0.8)) drop-shadow(0 0 60px rgba(0, 210, 255, 0.6)); 
  }
  100% { 
    transform: scale(1.22) translateY(-12px); 
    filter: drop-shadow(0 0 55px #ff0077) drop-shadow(0 0 95px #ffe600); 
  }
}

.cinema-name-txt {
  font-size: 1.55rem;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 0 15px rgba(0, 210, 255, 0.9), 0 2px 5px #000;
}

.cinema-move-txt {
  font-size: 2.1rem;
  font-weight: 900;
  color: #ffe600;
  text-shadow: 0 0 20px #ffe600, 0 0 45px #ff0077, 0 3px 6px #000;
  letter-spacing: 1.5px;
  margin: 4px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.cinema-sub-tip {
  font-size: 0.85rem;
  font-weight: 800;
  color: #00d2ff;
  background: rgba(0, 0, 0, 0.55);
  padding: 3px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0, 210, 255, 0.4);
}

/* 2. 피격/수비 포켓몬 화면 꽉 차는 클로즈업 & 화면 분할 스테이지 (Full-Screen Defender Close-Up) */
.cinematic-hit {
  background: radial-gradient(circle at center, rgba(20, 8, 20, 0.98) 0%, rgba(5, 5, 14, 0.99) 100%);
  backdrop-filter: blur(8px);
  padding: 10px;
  box-sizing: border-box;
}

.cinema-hit-header {
  font-size: 1.35rem;
  font-weight: 900;
  color: #ff3344;
  text-shadow: 0 0 20px #ff3344, 0 0 35px #ffe600;
  letter-spacing: 2px;
  margin-bottom: 6px;
  animation: pulse-star 0.35s infinite alternate;
}

.cinema-hit-grid {
  display: flex;
  width: 98%;
  max-width: 620px;
  height: 80vh;
  max-height: 560px;
  gap: 8px;
  align-items: stretch;
}

/* 1마리 단독 피격 (화면 전체 꽉 차는 초대형 클로즈업) */
.cinema-hit-grid.split-1 .hit-panel {
  flex: 1;
  height: 100%;
}

.cinema-hit-grid.split-1 .hit-panel-sprite-wrap {
  width: 100%;
  height: 48vh;
  min-height: 270px;
  max-height: 380px;
}

.cinema-hit-grid.split-1 .hit-panel-sprite {
  width: auto;
  height: 100%;
  max-height: 360px;
  max-width: 90%;
}

/* 2마리 동시 피격 (50% | 50% 분할) */
.cinema-hit-grid.split-2 .hit-panel {
  flex: 1;
  height: 100%;
}

.cinema-hit-grid.split-2 .hit-panel-sprite-wrap {
  width: 100%;
  height: 42vh;
  max-height: 280px;
}

.cinema-hit-grid.split-2 .hit-panel-sprite {
  max-height: 260px;
}

/* 3마리 전원 동시 피격 (33% | 33% | 33% 분할) */
.cinema-hit-grid.split-3 .hit-panel {
  flex: 1;
  height: 100%;
}

.cinema-hit-grid.split-3 .hit-panel-sprite-wrap {
  width: 100%;
  height: 38vh;
  max-height: 240px;
}

.cinema-hit-grid.split-3 .hit-panel-sprite {
  max-height: 220px;
}

.hit-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(30, 8, 20, 0.85) 100%);
  border: 3px solid rgba(255, 51, 68, 0.7);
  border-radius: 18px;
  padding: 10px 8px;
  box-shadow: 0 0 35px rgba(255, 51, 68, 0.5), inset 0 0 25px rgba(255, 0, 85, 0.4);
  overflow: hidden;
  animation: panel-slam 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes panel-slam {
  from { transform: scale(0.75); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.hit-panel-title {
  font-size: 1rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 10px #000, 0 0 15px rgba(255, 255, 255, 0.5);
  text-align: center;
}

.hit-panel-sprite-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4px 0;
}

.hit-panel-sprite {
  object-fit: contain;
  filter: drop-shadow(0 0 25px rgba(255, 50, 50, 0.85)) drop-shadow(0 10px 20px rgba(0,0,0,0.9));
  animation: hit-violent-shake 0.4s infinite alternate;
}

@keyframes hit-violent-shake {
  0% { transform: translate(0, 0) scale(1.05); filter: brightness(1); }
  25% { transform: translate(-8px, 6px) scale(0.96); filter: brightness(2.2) contrast(1.6); }
  50% { transform: translate(9px, -7px) scale(1.1); filter: brightness(1.7); }
  75% { transform: translate(-7px, -4px) scale(0.98); }
  100% { transform: translate(0, 0) scale(1.05); }
}

/* 번쩍이는 타격 섬광 오버레이 */
.hit-spark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0%, rgba(255, 0, 50, 0.4) 60%, transparent 80%);
  animation: spark-flash 0.5s ease-out forwards;
  pointer-events: none;
}

@keyframes spark-flash {
  0% { opacity: 1; transform: scale(0.4); }
  50% { opacity: 0.9; transform: scale(1.4); }
  100% { opacity: 0; transform: scale(2.2); }
}

/* 화면 흔들림 및 크리티컬 섬광 */
.screen-shake {
  animation: viewport-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes viewport-shake {
  10%, 90% { transform: translate3d(-3px, 2px, 0); }
  20%, 80% { transform: translate3d(4px, -3px, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 4px, 0); }
  40%, 60% { transform: translate3d(6px, -4px, 0); }
}

.screen-shake-violent {
  animation: viewport-shake-violent 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes viewport-shake-violent {
  0% { transform: scale(1.02); }
  10%, 90% { transform: translate3d(-8px, 6px, 0) scale(1.03); }
  20%, 80% { transform: translate3d(9px, -7px, 0) scale(1.02); }
  30%, 50%, 70% { transform: translate3d(-12px, 8px, 0) scale(1.04); }
  40%, 60% { transform: translate3d(12px, -8px, 0) scale(1.03); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

.crit-flash::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 230, 0, 0.6) 50%, transparent 80%);
  z-index: 100;
  pointer-events: none;
  animation: crit-flash-fade 0.35s ease-out forwards;
}
@keyframes crit-flash-fade {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* 공격자 속성별 오라 펄스 */
.cinema-aura-pulse {
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  opacity: 0.85;
  filter: blur(12px);
  animation: aura-expand 0.8s infinite alternate ease-in-out;
}
@keyframes aura-expand {
  0% { transform: scale(0.92); opacity: 0.6; }
  100% { transform: scale(1.15); opacity: 0.95; }
}

.aura-fire { background: radial-gradient(circle, rgba(255, 75, 43, 0.9) 0%, rgba(255, 140, 0, 0.5) 50%, transparent 75%); box-shadow: 0 0 45px #ff4500; }
.aura-water { background: radial-gradient(circle, rgba(0, 180, 255, 0.9) 0%, rgba(0, 100, 255, 0.5) 50%, transparent 75%); box-shadow: 0 0 45px #00a8ff; }
.aura-electric { background: radial-gradient(circle, rgba(255, 230, 0, 0.95) 0%, rgba(255, 255, 100, 0.6) 50%, transparent 75%); box-shadow: 0 0 50px #ffe600; }
.aura-grass { background: radial-gradient(circle, rgba(46, 204, 113, 0.9) 0%, rgba(0, 255, 128, 0.5) 50%, transparent 75%); box-shadow: 0 0 45px #2ecc71; }
.aura-ice { background: radial-gradient(circle, rgba(127, 212, 237, 0.95) 0%, rgba(220, 245, 255, 0.7) 50%, transparent 75%); box-shadow: 0 0 45px #7fd4ed; }
.aura-fighting { background: radial-gradient(circle, rgba(231, 76, 60, 0.95) 0%, rgba(200, 40, 40, 0.6) 50%, transparent 75%); box-shadow: 0 0 45px #e74c3c; }
.aura-dragon { background: radial-gradient(circle, rgba(142, 68, 173, 0.95) 0%, rgba(100, 50, 255, 0.6) 50%, transparent 75%); box-shadow: 0 0 50px #9b59b6; }
.aura-psychic { background: radial-gradient(circle, rgba(253, 121, 168, 0.95) 0%, rgba(255, 0, 128, 0.6) 50%, transparent 75%); box-shadow: 0 0 45px #fd79a8; }
.aura-ghost, .aura-dark { background: radial-gradient(circle, rgba(75, 40, 130, 0.95) 0%, rgba(30, 15, 60, 0.7) 50%, transparent 75%); box-shadow: 0 0 45px #4834d4; }
.aura-ground, .aura-rock { background: radial-gradient(circle, rgba(211, 84, 0, 0.9) 0%, rgba(160, 82, 45, 0.6) 50%, transparent 75%); box-shadow: 0 0 45px #d35400; }
.aura-steel { background: radial-gradient(circle, rgba(178, 190, 195, 0.95) 0%, rgba(223, 230, 233, 0.7) 50%, transparent 75%); box-shadow: 0 0 45px #b2bec3; }
.aura-fairy { background: radial-gradient(circle, rgba(255, 159, 243, 0.95) 0%, rgba(254, 202, 87, 0.5) 50%, transparent 75%); box-shadow: 0 0 45px #ff9ff3; }
.aura-normal { background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(200, 200, 210, 0.5) 50%, transparent 75%); box-shadow: 0 0 40px #fff; }

/* 공격자 스프라이트 돌진 모션 */
.cinema-big-sprite.attacking-lunge {
  animation: attack-lunge-burst 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards !important;
}
@keyframes attack-lunge-burst {
  0% { transform: scale(1.05) translateY(0); filter: drop-shadow(0 0 30px #ffe600); }
  25% { transform: scale(0.95) translateY(12px); }
  55% { transform: scale(1.35) translateY(-26px); filter: brightness(1.5) drop-shadow(0 0 65px #fff); }
  100% { transform: scale(1.22) translateY(-10px); }
}

/* 피격 시 속성별 화면 오버레이 */
.hit-element-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  animation: hit-element-blast 0.65s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}
@keyframes hit-element-blast {
  0% { opacity: 0; transform: scale(0.5); }
  20% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.3); }
}
.hit-element-fire {
  background: radial-gradient(circle, rgba(255, 69, 0, 0.85) 0%, rgba(255, 140, 0, 0.5) 45%, transparent 75%);
  box-shadow: inset 0 0 50px #ff4500;
}
.hit-element-water {
  background: radial-gradient(circle, rgba(0, 180, 255, 0.85) 0%, rgba(30, 144, 255, 0.45) 50%, transparent 75%);
  box-shadow: inset 0 0 50px #00b4ff;
}
.hit-element-electric {
  background: radial-gradient(circle, rgba(255, 230, 0, 0.9) 0%, rgba(0, 210, 255, 0.4) 45%, transparent 75%);
  box-shadow: inset 0 0 60px #ffe600;
}
.hit-element-grass {
  background: radial-gradient(circle, rgba(46, 204, 113, 0.85) 0%, rgba(39, 174, 96, 0.45) 50%, transparent 75%);
  box-shadow: inset 0 0 50px #2ecc71;
}
.hit-element-ice {
  background: radial-gradient(circle, rgba(170, 235, 255, 0.9) 0%, rgba(0, 210, 255, 0.4) 50%, transparent 75%);
  box-shadow: inset 0 0 50px #a0e6ff;
}
.hit-element-fighting {
  background: radial-gradient(circle, rgba(231, 76, 60, 0.9) 0%, rgba(255, 230, 0, 0.4) 50%, transparent 75%);
  box-shadow: inset 0 0 55px #e74c3c;
}
.hit-element-dragon {
  background: radial-gradient(circle, rgba(142, 68, 173, 0.9) 0%, rgba(255, 0, 128, 0.45) 50%, transparent 75%);
  box-shadow: inset 0 0 60px #9b59b6;
}
.hit-element-psychic, .hit-element-fairy {
  background: radial-gradient(circle, rgba(253, 121, 168, 0.88) 0%, rgba(155, 89, 182, 0.45) 50%, transparent 75%);
  box-shadow: inset 0 0 50px #fd79a8;
}
.hit-element-ghost, .hit-element-dark {
  background: radial-gradient(circle, rgba(44, 18, 80, 0.92) 0%, rgba(0, 0, 0, 0.6) 50%, transparent 75%);
  box-shadow: inset 0 0 60px #4834d4;
}
.hit-element-ground, .hit-element-rock {
  background: radial-gradient(circle, rgba(211, 84, 0, 0.85) 0%, rgba(160, 82, 45, 0.5) 50%, transparent 75%);
  box-shadow: inset 0 0 50px #d35400;
}
.hit-element-steel {
  background: radial-gradient(circle, rgba(220, 225, 235, 0.9) 0%, rgba(120, 140, 160, 0.5) 50%, transparent 75%);
  box-shadow: inset 0 0 50px #dcdde1;
}
.hit-element-normal {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0%, rgba(255, 230, 0, 0.35) 50%, transparent 75%);
  box-shadow: inset 0 0 45px #fff;
}

.hit-stat-clash {
  font-size: 0.72rem;
  font-weight: 800;
  color: #ffe600;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 230, 0, 0.5);
  padding: 3px 8px;
  border-radius: 10px;
  margin-top: 2px;
}

.hit-crit-badge {
  font-size: 0.72rem;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(90deg, #ff0055, #ff5e00);
  border: 1px solid #ffe600;
  border-radius: 8px;
  padding: 2px 8px;
  margin-top: 2px;
  box-shadow: 0 0 12px #ff0055;
  animation: pop-scale 0.25s ease-out;
}

.hit-evade-badge {
  font-size: 0.72rem;
  font-weight: 900;
  color: #00d2ff;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid #00d2ff;
  border-radius: 8px;
  padding: 2px 8px;
  margin-top: 2px;
  animation: pop-scale 0.25s ease-out;
}

.hit-damage-pill {
  font-size: 1.4rem;
  font-weight: 900;
  color: #ffea00;
  text-shadow: 0 0 15px #ff0055, 0 3px 6px #000;
  background: rgba(0, 0, 0, 0.75);
  padding: 3px 16px;
  border-radius: 16px;
  border: 2px solid #ffea00;
  margin-top: 3px;
  box-shadow: 0 0 18px rgba(255, 234, 0, 0.7);
  animation: pop-scale 0.3s ease-out;
}

.hit-matchup-text {
  font-size: 0.85rem;
  font-weight: 900;
  text-shadow: 0 2px 4px #000;
  margin: 2px 0;
}

.hit-hp-container {
  width: 90%;
  height: 8px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  overflow: hidden;
  margin-top: 4px;
}

.hit-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff4757, #ffa502);
  transition: width 0.6s ease-out;
}

/* ===================================================
   슈퍼스타 전용 홀로그램 무지개 별 (Superstar Stars)
   =================================================== */

.superstar-stars {
  background: linear-gradient(90deg, #ff0077, #ffa500, #ffe600, #00ff88, #00d2ff, #9b51e0, #ff0077);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 1px;
  filter: drop-shadow(0 0 6px #ffe600) drop-shadow(0 0 10px #ff0077);
  animation: star-shimmer 2s linear infinite;
  display: inline-block;
}

@keyframes star-shimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.superstar-pill-tag {
  background: linear-gradient(90deg, #ff0077, #9b51e0);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(255, 0, 119, 0.8);
  margin-right: 4px;
}

/* ===================================================
   3마리 각각 볼 투척 & 개별 포획 스테이지 (Triple Catch)
   =================================================== */

.catch-stage-triple {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 7, 18, 0.94);
  backdrop-filter: blur(8px);
  z-index: 85;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px;
  box-sizing: border-box;
}

.catch-triple-row {
  display: flex;
  width: 100%;
  max-width: 520px;
  justify-content: space-around;
  gap: 8px;
  margin-top: 14px;
}

.catch-slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 12px 6px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.catch-slot.caught {
  border-color: #ffe600;
  box-shadow: 0 0 25px rgba(255, 230, 0, 0.8);
  background: rgba(255, 230, 0, 0.12);
  transform: scale(1.04);
}

.catch-slot.escaped {
  opacity: 0.55;
  border-color: #555;
}

.catch-ball-graphic {
  width: 68px;
  height: 68px;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.7));
  transition: transform 0.25s;
}

.catch-ball-graphic.wobble-left {
  transform: rotate(-30deg) scale(1.08);
}

.catch-ball-graphic.wobble-right {
  transform: rotate(30deg) scale(1.08);
}

.catch-ball-graphic.ball-locked {
  filter: drop-shadow(0 0 16px #ffe600) drop-shadow(0 0 25px #ff0077);
  animation: lock-bounce 0.5s ease-out;
}

@keyframes lock-bounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.catch-verdict-badge {
  font-size: 0.8rem;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 12px;
  margin-top: 8px;
  text-align: center;
}

.catch-verdict-badge.get {
  background: linear-gradient(90deg, #ff0077, #ffe600);
  color: #000;
  box-shadow: 0 0 15px #ffe600;
  animation: pop-scale 0.35s ease-out;
}

.catch-verdict-badge.escaped {
  background: rgba(80, 80, 90, 0.8);
  color: #ccc;
}

/* ===================================================
   공식 실제 태그 3D 플립 카드 (Front / Back Flip Tag)
   =================================================== */

.dispense-modal-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 7, 18, 0.96);
  backdrop-filter: blur(10px);
  z-index: 90;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 10px 20px 10px;
  box-sizing: border-box;
}

.dispense-headline {
  font-size: 1.15rem;
  font-weight: 900;
  color: #ffe600;
  text-shadow: 0 2px 6px #000;
  text-align: center;
  margin-top: 4px;
  flex-shrink: 0;
}

.dispense-sub-tip {
  font-size: 0.72rem;
  color: #00d2ff;
  font-weight: 800;
  margin: 3px 0 8px 0;
  text-align: center;
  flex-shrink: 0;
}

.dispense-cards-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 520px;
  padding: 4px;
  box-sizing: border-box;
}

/* 배출 모달 내 카드 최적화 크기 (3마리 동시 배출 시에도 가로 1줄에 쏙 들어감) */
.dispense-modal-screen .tag-flip-card {
  width: 136px;
  height: 220px;
  margin: 2px 4px;
  flex-shrink: 0;
}

.dispense-modal-screen .tag-sprite-area {
  min-height: 74px;
  max-height: 84px;
}

.dispense-modal-screen .tag-sprite-img {
  max-height: 70px;
}

.dispense-modal-screen .tag-poke-name {
  font-size: 0.88rem;
}

.dispense-modal-screen .tag-move-name-txt {
  max-width: 56px;
  font-size: 0.64rem;
}

.dispense-modal-screen .tag-6stat-grid {
  gap: 2px 4px;
  padding: 3px;
}

.dispense-modal-screen .tag-move-spec-box {
  padding: 2px 4px;
  font-size: 0.6rem;
}

/* 3D 플립 태그 카드 공통 컨테이너 */
.tag-flip-card {
  perspective: 1000px;
  cursor: pointer;
  width: 154px;
  height: 248px;
  position: relative;
  margin: 6px;
  flex-shrink: 0;
}

.tag-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
  border-radius: 18px;
}

.tag-flip-card.flipped .tag-flip-inner {
  transform: rotateY(180deg);
}

.tag-flip-front,
.tag-flip-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

/* 태그 디스크 앞면 (캐릭터 태그) */
.tag-flip-front {
  background: radial-gradient(circle at 50% 25%, #1c274c 0%, #0c1020 90%);
  border: 3px solid rgba(255, 230, 0, 0.6);
  padding: 8px 6px 6px 6px;
}

/* 태그 디스크 뒷면 (공식 6대 능력치 스펙 시트) */
.tag-flip-back {
  transform: rotateY(180deg);
  background: linear-gradient(145deg, #101428 0%, #181d38 100%);
  border: 3px solid rgba(0, 210, 255, 0.6);
  padding: 8px 6px 6px 6px;
}

/* 태그 상단 고리 홀 */
.tag-lanyard-hole {
  width: 22px;
  height: 5px;
  background: #000;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 2px;
  flex-shrink: 0;
}

/* 카드 헤더 가로 행 (번호 + 등급) */
.tag-header-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
  min-height: 18px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.tag-header-no {
  font-size: 0.65rem;
  color: #ffe600;
  font-weight: 800;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
}

.superstar-tag-pill {
  font-size: 0.52rem;
  font-weight: 900;
  background: linear-gradient(90deg, #ff0077, #9b59b6);
  color: #fff;
  padding: 1px 5px;
  border-radius: 6px;
  border: 1px solid #ffe600;
  box-shadow: 0 0 8px rgba(255, 0, 119, 0.7);
  white-space: nowrap;
  letter-spacing: 0.5px;
}

/* 카드 중앙 스프라이트 영역 (고정 높이로 완벽한 대칭) */
.tag-sprite-area {
  flex: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 90px;
  max-height: 102px;
  padding: 2px 0;
}

.tag-sprite-img {
  max-height: 88px;
  max-width: 88%;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.85));
}

/* 카드 하단 정보 영역 */
.tag-bottom-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.tag-poke-name {
  font-size: 0.95rem;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 2px 4px #000;
  white-space: nowrap;
}

.tag-meta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.tag-move-name-txt {
  font-size: 0.68rem;
  color: #ffe600;
  font-weight: 800;
  white-space: nowrap;
  max-width: 65px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 터치 뒤집기 안내 바 (더 이상 텍스트를 가리지 않음) */
.tag-flip-hint-btn {
  width: 96%;
  font-size: 0.6rem;
  font-weight: 800;
  color: #00d2ff;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(0, 210, 255, 0.4);
  border-radius: 6px;
  padding: 2px 4px;
  margin-top: 3px;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.tag-flip-hint-btn:hover {
  background: rgba(0, 210, 255, 0.2);
  border-color: #00d2ff;
}

/* 6대 능력치 그리드 레이아웃 */
.tag-6stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 6px;
  width: 100%;
  padding: 4px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.tag-stat-cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  padding: 2px 5px;
  border-radius: 6px;
}

.tag-stat-lbl {
  font-size: 0.62rem;
  color: #8fa0c9;
  font-weight: 700;
}

.tag-stat-val {
  font-size: 0.72rem;
  color: #fff;
  font-weight: 900;
}

.tag-stat-val.highlight-hp { color: #2ecc71; }
.tag-stat-val.highlight-atk { color: #ff5e57; }
.tag-stat-val.highlight-def { color: #f39c12; }
.tag-stat-val.highlight-spatk { color: #00d2ff; }
.tag-stat-val.highlight-spdef { color: #9b59b6; }
.tag-stat-val.highlight-spd { color: #ffe600; }

.tag-move-spec-box {
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  padding: 4px 6px;
  box-sizing: border-box;
  text-align: left;
  font-size: 0.65rem;
  line-height: 1.4;
  color: #ddd;
  border-left: 3px solid #ffe600;
}

.tag-barcode-line {
  font-size: 0.55rem;
  color: #667799;
  letter-spacing: 2px;
  font-family: monospace;
}

.tag-flip-card:hover .tag-flip-inner {
  box-shadow: 0 0 20px rgba(0, 210, 255, 0.8);
}

/* 도감 내 태그 그리드 레이아웃 */
.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 12px;
  padding: 10px 4px;
  max-height: 60vh;
  overflow-y: auto;
}

.mini-tag-card-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btn-team-assign {
  margin-top: 6px;
  background: rgba(0, 210, 255, 0.2);
  border: 1px solid #00d2ff;
  color: #00d2ff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  transition: all 0.2s;
}

.btn-team-assign.active {
  background: linear-gradient(90deg, #ff0077, #ffe600);
  border-color: #ffe600;
  color: #000;
  box-shadow: 0 0 10px rgba(255, 230, 0, 0.8);
}

/* 기술 분류 (물리 / 특수) 배지 */
.move-cat-pill {
  font-size: 0.6rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 6px;
  color: #fff;
  letter-spacing: -0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.move-cat-pill.cat-phys {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  border: 1px solid #ff7979;
  box-shadow: 0 0 6px rgba(231, 76, 60, 0.6);
}

.move-cat-pill.cat-spec {
  background: linear-gradient(135deg, #3498db, #2980b9);
  border: 1px solid #70a1ff;
  box-shadow: 0 0 6px rgba(52, 152, 219, 0.6);
}

/* 배틀 필드 포켓몬 슬롯 6대 능력치 미니 바 */
.poke-stats-mini-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  font-size: 0.58rem;
  font-weight: 700;
  color: #c0d3ed;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 2px 4px;
  margin-top: 3px;
  width: 100%;
  box-sizing: border-box;
}

.poke-stats-mini-bar span {
  white-space: nowrap;
}

/* 턴 상태 인디케이터 배너 (공격 턴 vs 방어 턴) */
.battle-turn-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 94%;
  max-width: 480px;
  padding: 6px 14px;
  border-radius: 14px;
  margin: 3px auto 5px auto;
  font-family: inherit;
  box-sizing: border-box;
  z-index: 10;
  transition: all 0.35s ease;
  position: relative;
}

.battle-turn-banner.turn-attack {
  background: linear-gradient(90deg, rgba(0, 50, 160, 0.92) 0%, rgba(0, 160, 220, 0.92) 100%);
  border: 2px solid #00d2ff;
  box-shadow: 0 0 20px rgba(0, 210, 255, 0.75), inset 0 0 10px rgba(255, 255, 255, 0.25);
  animation: attack-banner-pulse 1.2s infinite alternate ease-in-out;
}

@keyframes attack-banner-pulse {
  from { box-shadow: 0 0 15px rgba(0, 210, 255, 0.6); }
  to { box-shadow: 0 0 28px rgba(0, 210, 255, 0.95), 0 0 15px #ffe600; }
}

.battle-turn-banner.turn-defense {
  background: linear-gradient(90deg, rgba(180, 20, 20, 0.94) 0%, rgba(220, 70, 20, 0.94) 100%);
  border: 2px solid #ff3344;
  box-shadow: 0 0 25px rgba(255, 51, 68, 0.85), inset 0 0 10px rgba(255, 230, 0, 0.35);
  animation: defense-banner-pulse 0.5s infinite alternate ease-in-out;
}

@keyframes defense-banner-pulse {
  from { transform: scale(0.98); box-shadow: 0 0 15px #ff3344; }
  to { transform: scale(1.02); box-shadow: 0 0 35px #ff0055, 0 0 20px #ffe600; }
}

.turn-badge-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.turn-text-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.turn-main-text {
  font-size: 0.92rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px #000;
}

.turn-sub-hint {
  font-size: 0.68rem;
  font-weight: 800;
  color: #ffe600;
  text-shadow: 0 1px 3px #000;
}

/* 방어 가드 실드 연출 */
.guard-shield-fx {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid #00d2ff;
  box-shadow: 0 0 25px #00d2ff, inset 0 0 20px #00d2ff;
  animation: shield-pulse 0.4s infinite alternate;
  pointer-events: none;
}

@keyframes shield-pulse {
  from { transform: scale(0.95); opacity: 0.6; }
  to { transform: scale(1.2); opacity: 1; }
}

/* 다이맥스 6개 문양 룰렛 모달 */
.dynamax-modal-overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(30, 5, 40, 0.96) 0%, rgba(8, 2, 16, 0.98) 100%);
  z-index: 120;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease-out;
}

.dynamax-cabinet {
  position: relative;
  width: 90%;
  max-width: 420px;
  background: linear-gradient(180deg, #1f0b2e 0%, #11051b 100%);
  border: 3px solid #ff0077;
  box-shadow: 0 0 40px rgba(255, 0, 119, 0.6), inset 0 0 30px rgba(155, 89, 182, 0.4);
  border-radius: 24px;
  padding: 16px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.dynamax-aura-clouds {
  position: absolute;
  top: -40%;
  left: -40%;
  width: 180%;
  height: 180%;
  background: radial-gradient(circle, rgba(255, 0, 119, 0.15) 0%, transparent 60%);
  animation: rotate-halo 10s linear infinite;
  pointer-events: none;
}

.dynamax-top-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: #ffe600;
  text-shadow: 0 0 15px #ff0077, 0 2px 4px #000;
  letter-spacing: 1.5px;
}

.dynamax-sub-guide {
  font-size: 0.78rem;
  font-weight: 800;
  color: #ff99cc;
  margin-top: 4px;
}

/* 6개 문양 원형 다이얼 */
.dynamax-dial-container {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 14px 0 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dynamax-dial-circle {
  position: relative;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, #240938 0%, #120320 85%);
  border: 4px solid #ff0077;
  box-shadow: 0 0 30px rgba(255, 0, 119, 0.6), inset 0 0 20px rgba(0, 0, 0, 0.8);
}

/* 6개 다이맥스 슬롯 위치 (반지름 약 88px) */
.dynamax-slot {
  position: absolute;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #1b1328;
  border: 2px solid #554466;
  color: #665577;
  transition: all 0.25s ease-out;
  box-sizing: border-box;
}

/* 0: 12시 (상단) */
.dynamax-slot.slot-0 { top: 10px; left: 97px; }
/* 1: 2시 */
.dynamax-slot.slot-1 { top: 44px; right: 20px; }
/* 2: 4시 */
.dynamax-slot.slot-2 { bottom: 44px; right: 20px; }
/* 3: 6시 (하단) */
.dynamax-slot.slot-3 { bottom: 10px; left: 97px; }
/* 4: 8시 */
.dynamax-slot.slot-4 { bottom: 44px; left: 20px; }
/* 5: 10시 */
.dynamax-slot.slot-5 { top: 44px; left: 20px; }

.dmax-slot-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.dmax-slot-num {
  font-size: 0.6rem;
  font-weight: 900;
  margin-top: 1px;
}

/* 활성화된 밝게 빛나는 다이맥스 문양 */
.dynamax-slot.active-lit {
  background: radial-gradient(circle, #ff0077 0%, #a00050 80%);
  border-color: #ffe600;
  color: #ffffff;
  box-shadow: 0 0 20px #ff0077, 0 0 35px #ffe600;
  transform: scale(1.12);
  animation: dmax-slot-pulse 0.5s infinite alternate ease-in-out;
}

@keyframes dmax-slot-pulse {
  from { box-shadow: 0 0 15px #ff0077; }
  to { box-shadow: 0 0 30px #ff0077, 0 0 45px #ffe600; }
}

/* 룰렛 시계바늘 */
.dynamax-needle-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-origin: center center;
  transition: transform 0.08s linear;
}

.dynamax-needle-pointer {
  position: absolute;
  top: -85px;
  left: -8px;
  width: 16px;
  height: 90px;
  background: linear-gradient(180deg, #ffe600 0%, #ff0055 70%, transparent 100%);
  clip-path: polygon(50% 0%, 100% 85%, 65% 100%, 35% 100%, 0% 85%);
  filter: drop-shadow(0 0 12px #ffe600);
}

.dynamax-needle-hub {
  position: absolute;
  top: -18px;
  left: -18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe600 0%, #ff0077 85%);
  border: 3px solid #fff;
  box-shadow: 0 0 15px #ffe600;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  color: #000;
  font-weight: 900;
}

/* 하단 상태 박스 */
.dynamax-status-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.dynamax-prob-bar {
  display: flex;
  justify-content: space-between;
  width: 90%;
  font-size: 0.78rem;
  font-weight: 900;
}

.dmax-active-label { color: #ffe600; }
.dmax-prob-label { color: #00d2ff; }

.dynamax-meter-track {
  width: 90%;
  height: 12px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.dynamax-meter-fill {
  height: 100%;
  width: 16%;
  background: linear-gradient(90deg, #ff0077, #ffe600);
  border-radius: 8px;
  transition: width 0.15s ease-out;
  box-shadow: 0 0 10px #ffe600;
}

.dynamax-timer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.dmax-timer-num {
  font-size: 1.25rem;
  font-weight: 900;
  color: #ffe600;
}

.dmax-hint-txt {
  font-size: 0.75rem;
  font-weight: 800;
  color: #ff99cc;
}



/* Mobile-first fixes: keep controls, overlays and primary actions reachable */
html { height: 100%; }
body { min-height: 100dvh; }
#arcade-machine { height: 100dvh; max-height: 940px; }
#screen-viewport { min-height: 0; }
#arcade-header { flex-shrink: 0; }
#title-screen {
  overflow-y: auto;
  overscroll-behavior: contain;
  justify-content: center;
  gap: clamp(8px, 2.8vh, 22px);
  padding: 12px 12px;
}
#title-screen .start-coin-btn { width: min(100%, 420px); flex-shrink: 0; }
#title-screen .title-pokemons-showcase { flex-shrink: 1; margin: 0; }
#title-screen .title-logo-container { flex-shrink: 0; }
#title-screen > p { flex-shrink: 0; }

/* Boss selection must require a real tap on one of three randomly drawn choices. */
.boss-selection-modal {
  position: absolute; inset: 0; z-index: 305;
  display: none; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; padding: 16px;
  background: radial-gradient(circle at center, #24345a, #070b1b 85%);
  overflow-y: auto; text-align: center;
}
.boss-selection-modal h2 { color: #ffe600; font-size: clamp(1.2rem, 4vw, 1.7rem); }
.boss-selection-modal > p { color: #dde9ff; font-size: 0.83rem; max-width: 440px; line-height: 1.5; }
.boss-choice-grid {
  width: 100%; max-width: 490px; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.boss-choice-card {
  min-width: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; gap: 8px; border: 2px solid #ffe600;
  border-radius: 15px; padding: 12px 6px; color: white;
  background: linear-gradient(#28244f, #12192f); cursor: pointer;
  box-shadow: 0 2px 12px rgba(255, 230, 0, .2);
  font-family: inherit;
}
.boss-choice-card:active, .boss-choice-card:focus-visible { outline: 3px solid #00d2ff; }
.boss-card-stars { color: #ffe600; letter-spacing: -1px; font-size: .86rem; white-space: nowrap; }
.boss-choice-card img { width: 100%; max-width: 95px; height: 88px; object-fit: contain; }
.boss-choice-card strong { font-size: .95rem; overflow-wrap: anywhere; }
.boss-card-type { font-size: .7rem; color: #addbff; overflow-wrap: anywhere; }
.boss-card-select {
  width: 100%; background: #ffe600; color: #111; border-radius: 12px;
  padding: 7px 3px; font-size: .73rem; font-weight: 900;
}

/* The get-result modal scrolls only the cards, never the "next battle" button. */
#dispense-modal {
  padding: 12px 10px;
  justify-content: flex-start;
  gap: 6px;
}
#dispense-modal .dispense-headline {
  flex: 0 0 auto; font-size: clamp(1.05rem, 4vw, 1.5rem);
  line-height: 1.25; margin: 0;
}
#dispense-modal .dispense-sub-tip {
  flex: 0 0 auto; margin: 0; text-align: center;
}
#dispense-modal .dispenser-chute {
  flex: 1 1 auto; min-height: 0; width: 100%; overflow-y: auto;
  overscroll-behavior: contain; justify-content: flex-start;
}
#dispense-modal .dispense-cards-row {
  flex: 0 0 auto; max-height: none; overflow: visible;
}
#dispense-modal .dispense-confirm-btn {
  flex: 0 0 auto; margin: 4px 0 0; width: min(100%, 400px);
  padding: 12px 8px; font-size: clamp(.88rem, 3.4vw, 1.1rem);
  position: relative; z-index: 2;
}
#catch-animation-stage .catch-status-msg {
  margin: 5px 0; text-align: center; font-size: clamp(.95rem, 4vw, 1.35rem);
}
@media (max-width: 560px) {
  #arcade-machine { border-width: 2px; border-radius: 12px; }
  #arcade-header {
    padding: 6px 10px;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }
  .brand-badge { gap: 4px; flex-shrink: 0; }
  .title-text { font-size: .88rem; }
  .star-logo { font-size: .95rem; }
  .header-score-group {
    margin-left: auto;
    gap: 4px;
    flex-shrink: 0;
  }
  .header-score-pill, .header-hiscore-pill {
    padding: 2px 6px;
    font-size: 0.68rem;
  }
  .header-actions {
    width: 100%;
    gap: 5px;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    padding: 2px 2px 4px 2px;
  }
  .header-actions::-webkit-scrollbar {
    display: none;
  }
  .header-actions .icon-btn {
    font-size: .68rem;
    padding: 4px 8px;
    border-radius: 8px;
    min-height: 28px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  body.title-mode #arcade-header {
    padding: 6px 10px;
  }
  body.title-mode .header-actions .icon-btn {
    font-size: .68rem;
    padding: 4px 8px;
    border-radius: 8px;
    min-height: 28px;
  }
  #title-screen { padding: 10px; gap: 9px; }
  .title-main-h1 { font-size: clamp(1.45rem, 6.4vw, 2.1rem); }
  .title-sub-h2 { font-size: .8rem; letter-spacing: 1.6px; }
  .title-pokemons-showcase { gap: 5px; }
  .title-showcase-img, .title-showcase-img[style] {
    width: clamp(54px, 20vw, 74px) !important;
    height: clamp(54px, 20vw, 74px) !important;
  }
  #title-screen .start-coin-btn {
    font-size: clamp(.93rem, 4vw, 1.18rem); padding: 12px 8px;
    border-width: 3px; border-radius: 25px;
  }
  #title-screen > p { font-size: .7rem !important; }
  .boss-choice-card { padding: 8px 4px; gap: 6px; }
  .boss-choice-card img { height: 70px; }
  .boss-choice-card strong { font-size: .82rem; }
  .boss-card-stars { font-size: .72rem; }
  #dispense-modal .tag-flip-card { width: min(125px, 38vw); height: 208px; margin: 2px; }
  #dispense-modal .dispense-cards-row { gap: 5px; }
  #dispense-modal .tag-poke-name { font-size: .85rem; }
}
@media (max-height: 700px) {
  #title-screen { gap: 5px; }
  #title-screen .title-pokemons-showcase { margin: 0; }
  .boss-selection-modal { gap: 7px; padding: 10px 8px; }
  .boss-choice-card img { height: 55px; }
  #dispense-modal { padding: 6px 8px; }
  #dispense-modal .dispense-confirm-btn { padding: 10px 6px; }
}
/* Very short screens: prioritize the start button and keep tapping controls usable. */
@media (max-height: 650px) {
  #title-screen .title-pokemons-showcase, #title-screen > p { display: none; }
  #title-screen { gap: 6px; padding: 5px; }
  #title-screen .title-main-h1 { font-size: clamp(1.2rem, 5vw, 1.55rem); }
  #title-screen .title-sub-h2 { font-size: .63rem; letter-spacing: 1px; }
  #title-screen .start-coin-btn { padding: 8px 4px; font-size: .86rem; }
  #arcade-controls { padding: 5px 8px 9px; }
  .arcade-btn-container, .btn-gauge-svg { width: 96px; height: 96px; }
  .btn-rainbow-spinner { width: 102px; height: 102px; }
  .arcade-push-btn { width: 80px; height: 80px; border-width: 3px; }
  .btn-main-label { font-size: .9rem; }
  .btn-key-hint { font-size: .6rem; }
  #action-center { padding: 5px 7px; }
  #banner-announcement { height: 24px; font-size: .85rem; }
  .mash-meter-container { margin: 3px 0; }
  .mash-meter-bar { height: 14px; }
  .arcade-dispenser-slot { padding: 3px 8px; }
  .tray-opening-pocket { height: 11px; }
}
@media (max-height: 650px) {
  .boss-selection-modal > p, .boss-card-type { display: none; }
  .boss-selection-modal { gap: 5px; padding: 6px; }
  .boss-selection-modal h2 { font-size: 1rem; }
  .boss-choice-card { gap: 3px; padding: 5px 2px; }
  .boss-choice-card img { height: 43px; }
  .boss-choice-card strong { font-size: .74rem; }
  .boss-card-select { font-size: .64rem; padding: 5px 1px; }
}

/* Three captured tags may wrap while the next-battle button stays pinned. */
#dispense-modal .dispense-cards-row { flex-wrap: wrap; }


/* Pending PWA release: update silently at the next safe moment. */
#pwa-update-status[hidden] { display: none !important; }
#pwa-update-status {
  position: fixed;
  left: 50%;
  top: max(12px, env(safe-area-inset-top));
  transform: translateX(-50%);
  z-index: 1000;
  width: min(calc(100vw - 24px), 500px);
  text-align: center;
  pointer-events: none;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid #ffe600;
  color: #fff;
  background: #182343;
  font: 800 0.8rem/1.4 'Noto Sans KR', sans-serif;
  box-shadow: 0 6px 22px #0008;
}


/* iOS Chrome and Safari installed PWAs: avoid Dynamic Island/status bar.
   Some iOS standalone WebKit versions report safe-area-inset-top as zero. */
html.ios-pwa #arcade-machine {
  padding-top: max(54px, env(safe-area-inset-top, 0px));
  padding-bottom: max(5px, env(safe-area-inset-bottom, 0px));
}
html.ios-pwa #pwa-update-status { top: max(56px, env(safe-area-inset-top, 0px)); }

/* Make the 3-vs-3 battle a real two-row flex area. The old content-sized
   slots overflowed the clipped viewport and hid the entire player team. */
@media (max-width: 560px) {
  #stage-info-bar {
    flex: 0 0 auto;
    padding: 4px 6px; gap: 5px;
    font-size: .7rem;
    min-height: 28px;
  }
  #stage-info-bar .stage-badge { font-size: .61rem; white-space: nowrap; padding: 5px 7px; }
  #stage-info-bar .stage-area-pill {
    font-size: .62rem; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 30vw; padding: 3px 5px;
  }
  #stage-info-bar #stage-name-txt { display: none; }
  #stage-info-bar .combo-badge { white-space: nowrap; font-size: .7rem; }

  #battle-turn-indicator {
    flex: 0 0 auto;
    width: calc(100% - 16px); max-width: none;
    padding: 4px 8px; margin: 3px 8px;
    gap: 6px;
    border-radius: 10px;
  }
  #battle-turn-indicator .turn-badge-icon { font-size: 1.1rem; }
  #battle-turn-indicator .turn-main-text { font-size: .77rem; line-height: 1.16; letter-spacing: 0; }
  #battle-turn-indicator .turn-sub-hint { font-size: .6rem; line-height: 1.15; }

  #arena-container {
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    flex: 1 1 auto;
    min-height: 0; overflow: hidden;
    padding: 1px 6px 4px;
    gap: 3px;
  }
  #arena-container .enemy-zone,
  #arena-container .player-zone {
    min-height: 0; min-width: 0; width: 100%;
    margin: 0; padding: 0;
    align-items: center;
    justify-content: space-around; gap: 3px;
  }
  #arena-container .poke-slot {
    min-width: 0; min-height: 0;
    max-width: calc((100% - 12px)/3);
    align-self: center;
    overflow: visible;
  }
  #arena-container .poke-avatar-wrapper,
  #arena-container .enemy-slot .poke-avatar-wrapper {
    width: clamp(38px, min(8dvh, 15vw), 66px);
    height: clamp(38px, min(8dvh, 15vw), 66px);
    flex-shrink: 0;
  }
  #arena-container .poke-sprite,
  #arena-container .enemy-slot .poke-sprite {
    width: calc(clamp(38px, min(8dvh, 15vw), 66px) - 8px);
    height: calc(clamp(38px, min(8dvh, 15vw), 66px) - 8px);
  }
  #arena-container .poke-meta { width: 100%; max-width: 100%; margin-top: 2px; }
  #arena-container .poke-title-row {
    font-size: .68rem; gap: 2px; line-height: 1.08;
    min-height: 15px; flex-wrap: wrap; overflow-wrap: anywhere;
  }
  #arena-container .star-rating { font-size: .57rem; letter-spacing: -1px; }
  #arena-container .poke-type-badge-row {
    gap: 2px; margin-top: 2px; min-height: 0;
    flex-wrap: wrap;
  }
  #arena-container .poke-type-badge-row > span { line-height: 1.08; }
  #arena-container .type-mini-pill,
  #arena-container .move-cat-pill,
  #arena-container .type-matchup-badge {
    font-size: .53rem; padding: 2px 3px; letter-spacing: -0.4px;
  }
  #arena-container .poke-type-badge-row > span[style] { font-size: .54rem !important; }
  #arena-container .poke-stats-mini-bar {
    margin-top: 2px; padding: 1px 2px; gap: 2px;
    font-size: .48rem;
    overflow: hidden;
  }
  #arena-container .poke-stats-mini-bar span { font-size: inherit; }
  #arena-container .hp-gauge-bg { height: 6px; margin-top: 2px; }
  #arena-container .hp-text { font-size: .59rem; margin-top: 1px; line-height: 1.1; }
  #arena-container .fatigue-badge { font-size: .52rem; padding: 2px 3px; }
  #arcade-controls { flex: 0 0 auto; padding: 8px 10px 10px; }
  #arcade-controls .arcade-btn-container,
  #arcade-controls .btn-gauge-svg { width: 112px; height: 112px; }
  #arcade-controls .btn-rainbow-spinner { width: 118px; height: 118px; }
  #arcade-controls .arcade-push-btn { width: 94px; height: 94px; }
  #arcade-controls .btn-main-label { font-size: 1rem; }
  #action-center { flex: 0 0 auto; padding: 5px 9px; }
  #action-center #banner-announcement { min-height: 22px; height: auto; font-size: .88rem; line-height: 1.2; }
  #action-center .mash-meter-container { margin: 4px 0 1px; }
  #action-center .mash-meter-bar { height: 15px; }
  #arcade-dispenser-tray { flex: 0 0 auto; padding: 3px 8px; gap: 2px; }
  #arcade-dispenser-tray .tray-opening-pocket { height: 12px; }
}
@media (max-width: 560px) and (max-height: 700px) {
  #arena-container .poke-stats-mini-bar { display: none; }
  #arena-container .poke-type-badge-row .type-matchup-badge { display: none; }
  #arcade-controls { padding: 4px 8px 6px; }
  #arcade-controls .arcade-btn-container,
  #arcade-controls .btn-gauge-svg { width: 88px; height: 88px; }
  #arcade-controls .btn-rainbow-spinner { width: 94px; height: 94px; }
  #arcade-controls .arcade-push-btn { width: 76px; height: 76px; }
  #arcade-controls .btn-main-label { font-size: .85rem; }
}
/* Compact portrait: prioritize all six Pokémon and HP instead of auxiliary stats. */
@media (max-width: 560px) and (max-height: 810px) {
  #arena-container .poke-stats-mini-bar,
  #arena-container .poke-type-badge-row .type-matchup-badge,
  #arena-container .player-zone .poke-type-badge-row > span[style] {
    display: none !important;
  }
  #arena-container .poke-type-badge-row { margin-top: 1px; }
  #arcade-controls { padding: 5px 8px; }
  #arcade-controls .arcade-btn-container,
  #arcade-controls .btn-gauge-svg { width: 98px; height: 98px; }
  #arcade-controls .btn-rainbow-spinner { width: 104px; height: 104px; }
  #arcade-controls .arcade-push-btn { width: 84px; height: 84px; }
}
@media (max-width: 560px) and (max-height: 650px) {
  #arcade-dispenser-tray { display: none; }
  #battle-turn-indicator .turn-sub-hint { display: none; }
  #arena-container .poke-avatar-wrapper,
  #arena-container .enemy-slot .poke-avatar-wrapper { width: 36px; height: 36px; }
  #arena-container .poke-sprite,
  #arena-container .enemy-slot .poke-sprite { width: 30px; height: 30px; }
  #arena-container .poke-title-row { font-size: .61rem; }
  #arena-container .star-rating { font-size: .52rem; }
  #arcade-controls .arcade-btn-container,
  #arcade-controls .btn-gauge-svg { width: 76px; height: 76px; }
  #arcade-controls .btn-rainbow-spinner { width: 82px; height: 82px; }
  #arcade-controls .arcade-push-btn { width: 64px; height: 64px; }
  #arcade-controls .btn-main-label { font-size: .78rem; }
  #action-center .alternate-combo-row { display: none; }
  #action-center #banner-announcement { font-size: .73rem; }
}
@media (max-width: 560px) and (max-height: 650px) {
  #arena-container .poke-type-badge-row { display: none; }
  #arcade-controls { padding: 2px 6px; }
}

/* Three-column cinematic boss selector, independent of battle HUD. */
body.boss-selection-mode #stage-info-bar,
body.boss-selection-mode #battle-turn-indicator,
body.boss-selection-mode #arena-container,
body.boss-selection-mode #action-center,
body.boss-selection-mode #arcade-controls,
body.boss-selection-mode #arcade-dispenser-tray { display:none !important; }
body.boss-selection-mode #screen-viewport { flex:1 1 auto; min-height:0; }
body.boss-selection-mode #screen-viewport::before { display:none; }
.boss-selection-modal {
  position:absolute; inset:0; z-index:305;
  display:none; flex-direction:column; justify-content:stretch;
  gap:8px; padding:10px 8px 12px;
  background:#080f24; text-align:center; overflow:hidden;
}
.boss-selection-modal h2 {
  flex:0 0 auto; font-size:clamp(1rem,4.5vw,1.35rem); line-height:1.1;
  color:#ffe600; text-shadow:0 0 12px #ffcc0059;
}
.boss-selection-modal > p.boss-selection-hint {
  flex:0 0 auto; display:block; font-size:clamp(.63rem,2.4vw,.8rem);
  color:#bdeaff; line-height:1.2; max-width:none; margin:0;
}
.boss-choice-grid {
  width:100%; max-width:none; flex:1 1 auto; min-height:0; display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px;
}
.boss-triptych-panel,.boss-choice-card.boss-triptych-panel {
  isolation:isolate; position:relative; display:flex; flex-direction:column;
  justify-content:space-between; align-items:stretch; gap:0; min-height:0;
  min-width:0; width:100%; height:100%; padding:0;
  border:2px solid #c1d6ed; border-radius:12px;
  background:#10152b; overflow:hidden; box-shadow:0 5px 16px #0009;
  color:#fff; cursor:pointer; font-family:inherit;
}
.boss-triptych-panel.boss-six-star {
  border-color:#ffe600; box-shadow:0 0 16px #ffe60082,0 0 4px #ffe600;
}
.boss-triptych-panel:focus-visible,.boss-triptych-panel:active {
  outline:3px solid #ffe600; outline-offset:-4px;
}
.boss-triptych-background {
  position:absolute; inset:0; z-index:-2; background-image:var(--boss-stage-bg);
  background-position:center; background-size:cover;
  filter:brightness(.72) saturate(1.3);
}
.boss-triptych-dim {
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom,#060c28ae 0%,#060c2814 34%,#060c2840 56%,#060a22ea 100%);
}
.boss-triptych-top {
  position:relative; z-index:2; padding:10px 4px 0;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.boss-triptych-panel .boss-card-stars {
  color:#ffe600; text-shadow:0 0 12px #000,0 2px 4px #000;
  font-size:clamp(.7rem,2.5vw,1.15rem); font-weight:900;
  letter-spacing:-1px; white-space:nowrap;
}
.boss-triptych-panel .boss-card-stage-badge {
  display:block; width:calc(100% - 4px); padding:4px 2px; border-radius:9px;
  color:white; background:#08172cca; border:1px solid #72bceab0;
  font-size:clamp(.56rem,2vw,.8rem); line-height:1.2; font-weight:900;
  overflow-wrap:anywhere;
}
.boss-triptych-panel .boss-face-crop {
  position:relative; z-index:1; flex:1 1 auto; min-height:0; width:100%;
  overflow:hidden; display:flex; align-items:flex-start; justify-content:center;
}
.boss-triptych-panel .boss-face-crop img {
  display:block; position:absolute; top:-10%; left:-37.5%; width:175%;
  max-width:none; height:140%; object-fit:contain; object-position:center 20%;
  filter:drop-shadow(0 6px 8px #000d); transform:scale(1.28);
  transform-origin:50% 23%;
}
.boss-triptych-bottom {
  position:relative; z-index:2; display:flex; flex:0 0 auto;
  flex-direction:column; align-items:stretch; gap:7px;
  width:100%; padding:10px 5px 8px; text-shadow:0 1px 6px #000;
}
.boss-triptych-panel .boss-card-name {
  font-size:clamp(.85rem,3.2vw,1.2rem); line-height:1.1;
  font-weight:900; overflow-wrap:anywhere;
}
.boss-triptych-panel .boss-card-stage-name {
  color:#eaf5ff; font-size:clamp(.57rem,2.2vw,.85rem);
  line-height:1.25; min-height:2.5em; overflow-wrap:anywhere;
}
.boss-triptych-panel .boss-card-select {
  display:block; width:100%; padding:9px 3px; border-radius:12px;
  background:#ffe600; color:#12121a; text-shadow:none;
  font-size:clamp(.65rem,2.35vw,.88rem); font-weight:900; box-shadow:0 3px 8px #0008;
}
.boss-six-star .boss-card-select { background:linear-gradient(115deg,#ffe600,#ff8a00); }
@media(max-width:560px) {
  .boss-selection-modal { padding:10px 6px 8px; gap:7px; }
  .boss-choice-grid { gap:4px; }
  .boss-triptych-panel,.boss-choice-card.boss-triptych-panel { padding:0; gap:0; }
  .boss-triptych-panel .boss-face-crop img { width:195%; left:-47.5%; height:145%; top:-8%; }
  .boss-triptych-panel .boss-triptych-bottom { padding:6px 3px 7px; gap:5px; }
}
@media(max-height:700px) {
  .boss-selection-modal { padding:4px 5px; gap:4px; }
  .boss-selection-modal > p.boss-selection-hint { font-size:.6rem; }
  .boss-triptych-top { padding-top:4px; gap:4px; }
  .boss-triptych-panel .boss-triptych-bottom { padding:4px 3px; gap:3px; }
  .boss-triptych-panel .boss-card-stage-name { min-height:0; }
  .boss-triptych-panel .boss-card-select { padding:6px 1px; }
}


/* Mercedes-style 120° circular tri-sector. No cropped oversized full-body art. */
.boss-choice-grid.boss-radial-wheel {
  position:relative;
  display:block;
  flex:0 0 auto;
  aspect-ratio:1 / 1;
  width:min(100%, 520px);
  height:auto;
  max-width: min(100%, 520px);
  min-height:0;
  margin:auto;
  border:5px solid #eff6ff;
  border-radius:50%;
  overflow:hidden;
  background:#10152c;
  box-shadow:0 0 0 3px #202947,0 0 28px #000b;
}
.boss-choice-grid.boss-radial-wheel::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:20;
  background: center/100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 50L50 0M50 50L6.7 75M50 50L93.3 75' fill='none' stroke='%23f5fbff' stroke-width='1.2'/%3E%3Ccircle cx='50' cy='50' r='4' fill='%23ffdf31' stroke='%23f7f8ff' stroke-width='1.1'/%3E%3C/svg%3E");
}
.boss-choice-grid.boss-radial-wheel .boss-triptych-panel {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  padding:0;
  margin:0;
  flex:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
  isolation:isolate;
  overflow:hidden;
  cursor:pointer;
}
.boss-choice-grid.boss-radial-wheel .boss-sector-left {
  clip-path:polygon(50% 50%, 50% 0%, 0% 0%, 0% 78.87%);
}
.boss-choice-grid.boss-radial-wheel .boss-sector-right {
  clip-path:polygon(50% 50%, 50% 0%, 100% 0%, 100% 78.87%);
}
.boss-choice-grid.boss-radial-wheel .boss-sector-bottom {
  clip-path:polygon(50% 50%, 0% 78.87%, 0% 100%, 100% 100%, 100% 78.87%);
}
.boss-choice-grid.boss-radial-wheel .boss-triptych-background {
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:var(--boss-stage-bg);
  background-size:cover;
  background-position:center;
  filter:brightness(.78) saturate(1.25);
}
.boss-choice-grid.boss-radial-wheel .boss-triptych-dim {
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(circle at 50% 50%,#0002 20%,#020718c9 100%);
}
.boss-choice-grid.boss-radial-wheel .boss-triptych-top,
.boss-choice-grid.boss-radial-wheel .boss-triptych-bottom,
.boss-choice-grid.boss-radial-wheel .boss-face-crop {
  position:absolute;
  z-index:2;
  padding:0;
  margin:0;
  width:37%;
  transform:none;
}
.boss-choice-grid.boss-radial-wheel .boss-triptych-top {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.boss-choice-grid.boss-radial-wheel .boss-sector-left .boss-triptych-top {
  left:6%;top:11%;
}
.boss-choice-grid.boss-radial-wheel .boss-sector-right .boss-triptych-top {
  right:6%;top:11%;
}
.boss-choice-grid.boss-radial-wheel .boss-sector-bottom .boss-triptych-top {
  left:31.5%;top:65%;
}
.boss-choice-grid.boss-radial-wheel .boss-card-stars {
  font-size:clamp(.66rem,3vw,1rem);
  white-space:nowrap;
  line-height:1;
}
.boss-choice-grid.boss-radial-wheel .boss-card-stage-badge {
  display:none;
}
.boss-choice-grid.boss-radial-wheel .boss-face-crop {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  height:31%;
  overflow:visible;
}
.boss-choice-grid.boss-radial-wheel .boss-sector-left .boss-face-crop {
  left:6%; top:24%;
}
.boss-choice-grid.boss-radial-wheel .boss-sector-right .boss-face-crop {
  right:6%; top:24%;
}
.boss-choice-grid.boss-radial-wheel .boss-sector-bottom .boss-face-crop {
  left:31.5%; top:55%;
  height:28%;
}
.boss-choice-grid.boss-radial-wheel .boss-face-crop img {
  position:static;
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center center;
  transform:none;
  filter:drop-shadow(0 3px 5px #000d);
}
.boss-choice-grid.boss-radial-wheel .boss-triptych-bottom {
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:3px;
  width:38%;
}
.boss-choice-grid.boss-radial-wheel .boss-sector-left .boss-triptych-bottom {
  left:5.5%; top:53%;
}
.boss-choice-grid.boss-radial-wheel .boss-sector-right .boss-triptych-bottom {
  right:5.5%; top:53%;
}
.boss-choice-grid.boss-radial-wheel .boss-sector-bottom .boss-triptych-bottom {
  left:30%; top:82%;
  width:40%;
}
.boss-choice-grid.boss-radial-wheel .boss-card-name {
  font-size:clamp(.73rem,3.25vw,1.13rem);
  line-height:1.1;
  overflow-wrap:anywhere;
}
.boss-choice-grid.boss-radial-wheel .boss-card-stage-name {
  min-height:0;
  font-size:clamp(.58rem,2.15vw,.8rem);
  line-height:1.1;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:1;
  overflow:hidden;
  width:100%;
}
.boss-choice-grid.boss-radial-wheel .boss-card-select {
  display:none;
}
.boss-choice-grid.boss-radial-wheel .boss-six-star .boss-card-stars {
  color:#ffed3b;
  text-shadow:0 0 8px #ffb700,0 0 4px black;
}
.boss-selection-modal .boss-radial-note {
  font-size:.77rem;
  font-weight:800;
  color:#c5dcf0;
  margin:0;
  flex:0 0 auto;
}
@media(max-height:700px) {
  .boss-choice-grid.boss-radial-wheel {
    width:min(100%, 47dvh);
  }
}
@media(max-width:560px) {
  .boss-selection-modal { justify-content:flex-start; gap:11px; padding:12px 9px; }
  .boss-choice-grid.boss-radial-wheel { width:min(100%, 520px); }
  .boss-choice-grid.boss-radial-wheel .boss-triptych-top { gap:2px; }
}

/* First-turn team selection (stat display is exclusive to this phase). */
body.player-select-mode #battle-turn-indicator,
body.player-select-mode #arena-container,
body.player-select-mode #action-center,
body.player-select-mode #arcade-controls,
body.player-select-mode #arcade-dispenser-tray {
  display:none !important;
}
.player-select-modal {
  position:absolute;
  inset:0;
  z-index:306;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  overflow-y:auto;
  padding:14px 10px;
  background:radial-gradient(ellipse at center,#1c3060 0%,#070e25 92%);
  text-align:center;
}
.player-select-modal h2 { color:#ffe600; font-size:clamp(1.1rem,5vw,1.6rem); margin:0; }
.player-select-modal > p { font-size:clamp(.67rem,2.6vw,.9rem); color:#bbd7fb; margin:0; }
.player-choice-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  width:100%;
  max-width:550px;
  align-items:stretch;
}
.player-choice-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  padding:9px 4px;
  border:2px solid #70bdf4;
  border-radius:15px;
  background:linear-gradient(180deg,#273d72,#111c3c);
  color:#fff;
  min-width:0;
  font-family:inherit;
  cursor:pointer;
}
.player-choice-card:active,.player-choice-card:focus-visible { border-color:#ffe600; outline:2px solid #ffe600; }
.player-choice-sprite { width:min(100%,100px); height:clamp(60px,18vw,103px); object-fit:contain; }
.player-choice-card strong { font-size:clamp(.83rem,3.4vw,1.12rem); overflow-wrap:anywhere; }
.player-choice-stars { color:#ffe600; font-size:clamp(.55rem,2.1vw,.78rem); }
.player-choice-type { color:#98e2ff; font-size:clamp(.66rem,2.6vw,.85rem); font-weight:800; }
.player-choice-move { color:#ffc85b; font-size:clamp(.6rem,2.3vw,.8rem); overflow-wrap:anywhere; }
.player-choice-stat { color:#edf7ff; font-size:clamp(.55rem,2.18vw,.76rem); white-space:nowrap; }
.player-choice-cta {
  width:100%;
  margin-top:auto;
  padding:9px 2px;
  border-radius:10px;
  background:#ffe600;
  color:#141729;
  font-size:clamp(.65rem,2.7vw,.84rem);
  font-weight:900;
}
@media(max-height:700px) {
  .player-select-modal { gap:6px; padding:5px 8px; }
  .player-choice-card { gap:4px; padding:5px 3px; }
  .player-choice-sprite { height:55px; }
  .player-choice-cta { padding:6px 2px; }
}
/* Fight view: HP and names are enough after first-turn choice. */
#arena-container .poke-type-badge-row,
#arena-container .poke-stats-mini-bar {
  display:none !important;
}

/* Kids' rapid tapping must never pan, zoom, select or scroll the cabinet.
   Only explicit scrollable dialogs retain vertical panning. */
html, body {
  width:100%;
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
#arcade-machine, #screen-viewport, #arcade-controls,
.arcade-push-btn, .arcade-btn-container, .btn-gauge-svg,
.boss-choice-grid, .player-choice-grid, .player-choice-card {
  touch-action:none;
  overscroll-behavior:none;
}
#collection-modal, #typechart-modal, .collection-grid,
.typechart-cabinet, .player-select-modal {
  overscroll-behavior:contain;
}
.collection-grid, .typechart-cabinet, .player-select-modal {
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
}
.collection-disk-simple {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:170px;
  padding:12px 5px;
  border:2px solid #b1a247;
  border-radius:16px;
  background:linear-gradient(145deg,#1b2b52,#090f23);
  text-align:center;
}
.collection-disk-simple img { width:100%; height:92px; object-fit:contain; }
.collection-disk-simple strong { font-size:1rem; color:white; }
.collection-disk-stars { color:#ffe600; font-size:.85rem; }
.collection-disk-owned { font-size:.68rem; color:#90ddf4; }

/* Mobile full-bleed 120-degree boss stage selector; keep the sector geometry,
   remove circular framing and use the entire scene. */
.boss-choice-grid.boss-radial-wheel.boss-full-split {
  width: 100%;
  max-width: none;
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
.boss-choice-grid.boss-full-split::after {
  background: none;
  border: 0;
}
.boss-choice-grid.boss-full-split .boss-sector-left {
  clip-path: polygon(50% 50%, 50% 0%, 0% 0%, 0% calc(50% + 28.8675vw));
}
.boss-choice-grid.boss-full-split .boss-sector-right {
  clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% calc(50% + 28.8675vw));
}
.boss-choice-grid.boss-full-split .boss-sector-bottom {
  clip-path: polygon(50% 50%, 0% calc(50% + 28.8675vw), 0% 100%, 100% 100%, 100% calc(50% + 28.8675vw));
}
.boss-selection-modal { padding: 7px 3px; gap: 5px; }
.boss-choice-grid.boss-full-split .boss-sector-left .boss-triptych-top { top: 8%; left: 3%; width: 43%; }
.boss-choice-grid.boss-full-split .boss-sector-right .boss-triptych-top { top: 8%; right: 3%; width: 43%; }
.boss-choice-grid.boss-full-split .boss-sector-left .boss-face-crop { left: 3%; top: 21%; width: 44%; height: 35%; }
.boss-choice-grid.boss-full-split .boss-sector-right .boss-face-crop { right: 3%; top: 21%; width: 44%; height: 35%; }
.boss-choice-grid.boss-full-split .boss-sector-bottom .boss-face-crop { left: 29%; top: 63%; width: 42%; height: 23%; }
.boss-choice-grid.boss-full-split .boss-face-crop img {
  width: 100%; height: 100%; transform: scale(1.28);
  object-position: center; left: auto; top: auto; position: static;
}
.boss-choice-grid.boss-full-split .boss-sector-left .boss-triptych-bottom { top: 53%; left: 3%; width: 44%; }
.boss-choice-grid.boss-full-split .boss-sector-right .boss-triptych-bottom { top: 53%; right: 3%; width: 44%; }
.boss-choice-grid.boss-full-split .boss-sector-bottom .boss-triptych-top { left: 31%; top: 61%; }
.boss-choice-grid.boss-full-split .boss-sector-bottom .boss-triptych-bottom { left: 29%; top: 87%; width: 42%; }
.boss-choice-grid.boss-full-split .boss-card-stage-name {
  display: block; -webkit-line-clamp: unset; white-space: normal; overflow-wrap: anywhere;
  font-size: clamp(.62rem, 2.1vw, .85rem); line-height: 1.2;
}
.boss-choice-grid.boss-full-split .boss-card-name {
  font-size: clamp(.92rem, 3.4vw, 1.25rem);
}
.boss-choice-grid.boss-full-split .boss-six-star { filter: drop-shadow(0 0 6px #ffdc00); }

/* Catch/GET is not a rapid-tap phase. Keep visible modal instructions only. */
body.catch-result-mode #action-center,
body.catch-result-mode #arcade-controls,
body.catch-result-mode #arcade-dispenser-tray {
  display: none !important;
}
#dispense-modal { min-height: 0; overflow: hidden; padding: 10px 8px; gap: 7px; }
#dispense-modal .dispense-headline {
  overflow-wrap: anywhere; line-height: 1.3;
  font-size: clamp(1rem, 4vw, 1.4rem); padding: 4px 0;
}
#dispense-modal .dispenser-chute {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; touch-action: pan-y;
}
#dispense-modal .dispense-confirm-btn {
  width: min(100%, 440px); min-height: 44px; flex: 0 0 auto;
  margin: 0; animation: none;
}
#btn-dispense-home { background: #1b2e50; color: #fff; border: 1px solid #91badc; }

/* The dial must fit inside the screen instead of cutting off its title. */
#dynamax-roulette-modal { padding: 6px; overflow: hidden; box-sizing: border-box; }
#dynamax-roulette-modal .dynamax-cabinet {
  width: 100%; max-width: 440px; min-height: 0; max-height: 100%;
  overflow-y: auto; overflow-x: hidden; box-sizing: border-box;
  padding: 10px 8px; justify-content: flex-start;
  touch-action: pan-y; overscroll-behavior: contain;
}
#dynamax-roulette-modal .dynamax-top-title {
  font-size: clamp(1rem, 4.5vw, 1.35rem); letter-spacing: 0;
  line-height: 1.2; overflow-wrap: anywhere; flex-shrink: 0;
}
#dynamax-roulette-modal .dynamax-sub-guide {
  font-size: clamp(.68rem, 2.6vw, .82rem); line-height: 1.35;
  flex: 0 0 auto; overflow-wrap: anywhere;
}
#dynamax-roulette-modal .dynamax-dial-container { flex: 0 0 auto; margin: 7px 0; }
@media (max-height: 700px) {
  #dynamax-roulette-modal .dynamax-dial-container {
    transform: scale(.82); margin: -14px 0;
  }
}

/* Owned disks remain scrollable, battle stays exactly three members. */
.player-select-modal {
  justify-content: flex-start;
  overflow: hidden;
  padding: 10px 7px;
}
.player-select-modal h2, .player-select-modal > p { flex: 0 0 auto; }
.player-choice-grid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  align-content: start; align-items: start; touch-action: pan-y;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
.player-choice-card { height: 100%; }
.player-choice-matchup {
  font-size: clamp(.57rem, 2.13vw, .8rem); font-weight: 900;
  color: #ffe600; line-height: 1.35; min-height: 2.7em;
  overflow-wrap: anywhere;
}

/* The three 120-degree divider spokes stay visible on a rectangular viewport. */
.boss-choice-grid.boss-radial-wheel.boss-full-split::after {
  content: ""; display:block; position:absolute; inset:0; z-index:20;
  pointer-events:none;
  background:center/100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 160' preserveAspectRatio='none'%3E%3Cpath d='M50 80V0M50 80L0 106M50 80L100 106' stroke='%23ffffff' stroke-width='1.3' fill='none'/%3E%3C/svg%3E");
}

/* iPhone: the team picker owns the scrolling surface. */
#player-select-modal { overflow:hidden; justify-content:flex-start; gap:6px; min-height:0; }
#player-choice-grid { overflow-y:auto !important; touch-action:pan-y !important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; min-height:0; flex:1 1 auto; align-content:start; align-items:start; padding-bottom:12px; }
#player-choice-grid .player-choice-card { touch-action:pan-y; height:auto; min-height:260px; }
#player-choice-grid .player-choice-sprite { height:clamp(80px,24vw,125px); width:100%; object-fit:contain; image-rendering:auto; }
#player-choice-grid .player-choice-matchup.advantage { color:#46ed81; }
#player-choice-grid .player-choice-matchup.disadvantage { color:#ff646b; }
#player-choice-grid .player-choice-matchup.neutral { color:#fff; }
.player-choice-stars.rainbow-stars,.boss-choice-grid .boss-six-star .boss-card-stars { background:linear-gradient(90deg,#ff4444,#ffa500,#ffe600,#39e56c,#23d6f8,#7564ff,#ee65e7); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:star-rainbow 2s linear infinite; }
@keyframes star-rainbow { to {background-position:200% 0;} }
#player-choice-grid .player-choice-card.picked { border-color:#ffe600; box-shadow:inset 0 0 0 2px #ffe600; }
.player-team-order { width:100%; color:#ffe600; font-weight:900; font-size:clamp(.65rem,2.7vw,.88rem); flex:0 0 auto; text-align:center; }
.team-start-btn { flex:0 0 auto; width:min(100%,550px); min-height:48px; background:#ffe600; border:0; border-radius:12px; font-size:1rem; font-weight:900; color:#121629; }
.team-start-btn:disabled { background:#49546e; color:#e3e7f1; }
/* Large boss art with no stage descriptions. */
.boss-choice-grid.boss-full-split .boss-card-stage-name { display:none !important; }
.boss-choice-grid.boss-full-split .boss-sector-left .boss-face-crop { left:0%;top:19%;width:50%;height:42%; }
.boss-choice-grid.boss-full-split .boss-sector-right .boss-face-crop { right:0%;top:19%;width:50%;height:42%; }
.boss-choice-grid.boss-full-split .boss-sector-bottom .boss-face-crop { left:24%;top:60%;width:52%;height:29%; }
.boss-choice-grid.boss-full-split .boss-face-crop img { transform:scale(1.45); }
/* Roulette uses a visibly spinning wheel, tapped to stop. */
#roulette-modal { cursor:pointer; touch-action:manipulation; }
#roulette-modal .roulette-dial-box { display:flex; align-items:center; justify-content:center; }
.bonus-wheel-face { width:min(64vw,230px); aspect-ratio:1; border-radius:50%; position:relative; border:7px solid #ffe600; box-shadow:0 0 24px #ffb800, inset 0 0 30px #000; display:grid; place-items:center; background:radial-gradient(circle,#18214b 40%,#2b144c 65%,#100a22); }
.bonus-wheel-ticks { position:absolute;inset:4px;border-radius:50%;background:repeating-conic-gradient(#ffdf29 0deg 7deg,transparent 7deg 36deg);mask:radial-gradient(transparent 0 72%,black 74%);-webkit-mask:radial-gradient(transparent 0 72%,black 74%); }
#roulette-modal.spinning .bonus-wheel-ticks { animation:bonus-wheel-spin .5s linear infinite; }
@keyframes bonus-wheel-spin { to {transform:rotate(360deg);} }
#roulette-modal .roulette-num { position:relative;z-index:2; font-size:clamp(2.3rem,11vw,4.4rem); }

/* Boss artwork is the selection target; do not overlay species names. */
.boss-choice-grid.boss-full-split .boss-card-name { display:none !important; }
.boss-choice-grid.boss-full-split .boss-sector-left .boss-face-crop,
.boss-choice-grid.boss-full-split .boss-sector-right .boss-face-crop {
  top:15%; height:52%; width:54%;
}
.boss-choice-grid.boss-full-split .boss-sector-left .boss-face-crop {left:-2%;}
.boss-choice-grid.boss-full-split .boss-sector-right .boss-face-crop {right:-2%;}
.boss-choice-grid.boss-full-split .boss-sector-bottom .boss-face-crop {
  left:17%; top:55%; width:66%; height:37%;
}
.boss-choice-grid.boss-full-split .boss-face-crop img {
  transform:scale(1.48);
  object-fit:contain;
}
.boss-choice-grid.boss-full-split .boss-triptych-bottom .boss-card-select {
  opacity:.0; pointer-events:none;
}

/* Scroll fix: a touch-action:none ancestor disables iOS descendant scrolling. */
#arcade-machine, #screen-viewport { touch-action:manipulation !important; }
#player-select-modal { box-sizing:border-box; touch-action:pan-y !important; overflow:hidden !important; }
#player-choice-grid {
  box-sizing:border-box; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:max-content; align-items:start !important; align-content:start !important;
  overflow-y:scroll !important; overflow-x:hidden !important;
  touch-action:pan-y !important; -webkit-overflow-scrolling:touch;
  scroll-behavior:auto; scroll-padding-top:8px; scrollbar-width:thin;
  max-height:100%; padding-top:5px; padding-bottom:28px;
}
#player-choice-grid .player-choice-card { align-self:start; height:auto !important; min-height:0 !important; touch-action:pan-y !important; }
#player-choice-grid .player-choice-sprite { display:block; flex-shrink:0; }
#player-choice-grid .player-choice-cta { flex-shrink:0; }
#player-select-modal .team-start-btn { position:relative; z-index:2; }
/* Center sprites in their battle slots and suppress redundant names. */
#arena-container .poke-slot { display:flex; flex-direction:column; align-items:center; justify-content:center; }
#arena-container .poke-avatar-wrapper { display:flex; align-items:center; justify-content:center; margin-inline:auto; }
#arena-container .poke-sprite { position:static !important; transform:none !important; margin:0 auto !important; object-position:center center; }
#arena-container .poke-title-row > span:not(.star-rating) { display:none !important; }
#speed-clash-overlay .clash-box > span:not(.clash-spd-pill) { display:none !important; }
#speed-clash-overlay .clash-sub { display:none !important; }
#speed-clash-overlay .clash-header { margin-bottom:6px; }

/* Guard turn: three 120-degree sectors, same stage backdrop as the chosen boss.
   Visual only; the existing L/R controls remain accessible below the screen. */
#defense-triptych {
  display:none; position:absolute; inset:0; z-index:18;
  pointer-events:none; overflow:hidden; background:#071026;
}
#defense-triptych .defense-triptych-grid { position:absolute; inset:0; }
#defense-triptych .defense-sector {
  position:absolute; inset:0; overflow:hidden;
  background-image:linear-gradient(#040c1b44,#040c1b44),var(--defense-bg);
  background-position:center; background-size:cover;
}
#defense-triptych .defense-sector-left {
  clip-path:polygon(50% 50%,50% 0,0 0,0 calc(50% + 28.8675vw));
}
#defense-triptych .defense-sector-right {
  clip-path:polygon(50% 50%,50% 0,100% 0,100% calc(50% + 28.8675vw));
}
#defense-triptych .defense-sector-bottom {
  clip-path:polygon(50% 50%,0 calc(50% + 28.8675vw),0 100%,100% 100%,100% calc(50% + 28.8675vw));
}
#defense-triptych .defense-triptych-grid::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:center/100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 160' preserveAspectRatio='none'%3E%3Cpath d='M50 80V0M50 80L0 106M50 80L100 106' stroke='%23ffffff' stroke-width='1.3' fill='none'/%3E%3C/svg%3E");
}
#defense-triptych .defense-sector img {
  position:absolute; display:block; object-fit:contain;
  width:56%; height:54%; top:15%; left:0;
  filter:drop-shadow(0 8px 12px #000a);
}
#defense-triptych .defense-sector-right img { left:auto; right:0; }
#defense-triptych .defense-sector-bottom img {
  width:66%; height:40%; top:56%; left:17%;
}
#defense-triptych .defense-sector.defeated img { opacity:.2; filter:grayscale(1); }
#defense-triptych .defense-sector-stars {
  position:absolute; top:9%; left:10%; font-size:clamp(14px,4vw,22px);
  color:#ffe600; text-shadow:0 2px 5px #000;
}
#defense-triptych .defense-sector-right .defense-sector-stars {left:auto;right:10%;}
#defense-triptych .defense-sector-bottom .defense-sector-stars {top:59%;left:40%;}
#defense-triptych .defense-sector-hp {
  position:absolute; top:52%; left:6%; font-size:clamp(10px,2.6vw,15px);
  color:white; font-weight:900; text-shadow:0 2px 6px #000;
}
#defense-triptych .defense-sector-right .defense-sector-hp {left:auto;right:6%;}
#defense-triptych .defense-sector-bottom .defense-sector-hp {top:92%;left:40%;}

/* Clock-style roulette: fixed result labels on the dial and a rotating hand. */
#roulette-modal .roulette-cabinet,
#ball-roulette-modal .roulette-cabinet { padding:18px 14px; width:min(94%,430px); box-sizing:border-box; }
#roulette-modal .roulette-dial-box {
  width:100%; height:auto; min-height:0; margin:12px 0; padding:8px;
  background:transparent; border:0; box-shadow:none; box-sizing:border-box;
}
#roulette-modal .bonus-wheel-face,
#ball-roulette-modal .ball-clock-face {
  width:min(66vw,290px); height:min(66vw,290px); flex:none; box-sizing:border-box;
  position:relative; border:6px solid #ffe600; border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#15214a 0 15%,#2c184f 16% 65%,#11152f 100%);
  box-shadow:0 0 22px #ffcb0080,inset 0 0 20px #0009;
  display:block; margin:0 auto;
}
.clock-wheel-markers { position:absolute;inset:0;border-radius:50%; }
.clock-marker {
  position:absolute; top:50%;left:50%; font-size:clamp(12px,3.1vw,16px);
  font-weight:900;color:#fff;text-shadow:0 1px 5px #000;
  transform:translate(-50%,-50%) rotate(var(--angle)) translateY(calc(-1 * min(24vw,105px))) rotate(calc(-1 * var(--angle)));
  white-space:nowrap;
}
.clock-wheel-hand {
  position:absolute; z-index:4; top:50%;left:50%;width:5px;height:36%;
  transform-origin:50% 100%; transform:rotate(0deg);
  background:linear-gradient(to top,#ff0077,#fff3a4);
  border-radius:90% 90% 3px 3px;
  box-shadow:0 0 12px #ffcc00;
  margin-top:-36%; margin-left:-2.5px;
  transition:transform 70ms linear;
}
.clock-wheel-hand::before {
  content:"";position:absolute;top:-8px;left:-6px;
  border-left:8px solid transparent;border-right:8px solid transparent;
  border-bottom:15px solid #ffe600;
}
.clock-wheel-hub {
  position:absolute;z-index:5;top:50%;left:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;display:grid;place-items:center;
  border-radius:50%;border:3px solid #fff;background:#ffbc00;color:#17214a;
  font-size:17px;box-shadow:0 0 8px #000;
}
#roulette-modal .roulette-num {
  position:absolute;top:72%;left:50%;transform:translate(-50%,-50%);
  font-size:clamp(17px,5vw,27px);background:#090e25cc;
  padding:2px 12px;border-radius:12px;white-space:nowrap;
}
#ball-roulette-modal .ball-roulette-box {display:flex;flex-direction:column;gap:10px;margin:10px 0;}
#ball-roulette-modal .ball-card-list {display:flex;justify-content:center;gap:6px;width:100%;}
#ball-roulette-modal .ball-card {width:23%;height:65px;gap:2px;border-radius:8px;}
#ball-roulette-modal .ball-icon {width:32px;height:32px;}
#ball-roulette-modal .ball-label {font-size:clamp(9px,2.5vw,12px);}
#ball-roulette-modal .ball-clock-face {width:min(58vw,245px);height:min(58vw,245px);}
#ball-roulette-modal .ball-clock-marker {
  transform:translate(-50%,-50%) rotate(var(--angle)) translateY(calc(-1 * min(21vw,86px))) rotate(calc(-1 * var(--angle)));
  font-size:clamp(10px,2.5vw,13px);
}

/* Battle damage uses the same three-way Y split as boss selection.
   All three stay visible; only actual targets receive impact UI. */
.cinematic-hit { padding:0 !important; background:#070c1c; }
.cinematic-hit .cinema-hit-header {display:none !important;}
.cinematic-hit .cinema-hit-grid.triptych-hit {
  position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  display:block;gap:0;overflow:hidden;
  background:linear-gradient(#06102033,#06102033),var(--hit-stage-bg) center/cover;
}
.cinema-hit-grid.triptych-hit::after {
  content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  background:center/100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 160' preserveAspectRatio='none'%3E%3Cpath d='M50 80V0M50 80L0 106M50 80L100 106' stroke='%23fff' stroke-width='1.3' fill='none'/%3E%3C/svg%3E");
}
.cinema-hit-grid.triptych-hit .hit-sector {
  position:absolute;inset:0;width:100%;height:100%;max-height:none;
  border:0;border-radius:0;margin:0;padding:0;box-shadow:none;
  background:transparent;display:block;animation:none;
}
.cinema-hit-grid.triptych-hit .hit-sector-left {clip-path:polygon(0 0,50% 0,50% 50%,0 66.25%);}
.cinema-hit-grid.triptych-hit .hit-sector-right {clip-path:polygon(50% 0,100% 0,100% 66.25%,50% 50%);}
.cinema-hit-grid.triptych-hit .hit-sector-bottom {clip-path:polygon(50% 50%,100% 66.25%,100% 100%,0 100%,0 66.25%);}
.cinema-hit-grid.triptych-hit .hit-sector .hit-panel-sprite-wrap,
.cinema-hit-grid.triptych-hit .hit-sector .hit-sector-art {
  position:absolute;top:15%;left:2%;width:47%;height:42%;
  display:flex;align-items:center;justify-content:center;
  margin:0;max-width:none;max-height:none;
}
.cinema-hit-grid.triptych-hit .hit-sector .hit-panel-sprite,
.cinema-hit-grid.triptych-hit .hit-sector .hit-sector-art {
  width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;
  filter:drop-shadow(0 7px 8px #000b);
}
.cinema-hit-grid.triptych-hit .hit-sector-right .hit-panel-sprite-wrap,
.cinema-hit-grid.triptych-hit .hit-sector-right .hit-sector-art {left:51%;}
.cinema-hit-grid.triptych-hit .hit-sector-bottom .hit-panel-sprite-wrap,
.cinema-hit-grid.triptych-hit .hit-sector-bottom .hit-sector-art {top:59%;left:20%;width:60%;height:31%;}
.cinema-hit-grid.triptych-hit .hit-panel-title {
  position:absolute;top:8%;left:7%;font-size:1.1rem;color:#ffe600;
}
.cinema-hit-grid.triptych-hit .hit-sector-right .hit-panel-title {left:57%;}
.cinema-hit-grid.triptych-hit .hit-sector-bottom .hit-panel-title {top:57%;left:43%;}
.cinema-hit-grid.triptych-hit .hit-damage-pill {
  position:absolute;top:47%;left:6%;font-size:clamp(15px,4.5vw,26px);
  z-index:3;box-shadow:0 0 16px #ff3b42;
}
.cinema-hit-grid.triptych-hit .hit-sector-right .hit-damage-pill {left:55%;}
.cinema-hit-grid.triptych-hit .hit-sector-bottom .hit-damage-pill {top:84%;left:35%;}
.cinema-hit-grid.triptych-hit .hit-hp-container {
  position:absolute;top:55%;left:6%;width:38%;height:9px;z-index:3;
}
.cinema-hit-grid.triptych-hit .hit-sector-right .hit-hp-container {left:56%;}
.cinema-hit-grid.triptych-hit .hit-sector-bottom .hit-hp-container {top:93%;left:30%;width:40%;}
.cinema-hit-grid.triptych-hit .hit-sector-hp {
  position:absolute;top:54%;left:6%;font-size:12px;color:#fff;
  font-weight:800;text-shadow:0 2px 5px #000;
}
.cinema-hit-grid.triptych-hit .hit-sector-right .hit-sector-hp {left:56%;}
.cinema-hit-grid.triptych-hit .hit-sector-bottom .hit-sector-hp {top:92%;left:40%;}
.cinema-hit-grid.triptych-hit .hit-matchup-text,
.cinema-hit-grid.triptych-hit .hit-crit-badge,
.cinema-hit-grid.triptych-hit .hit-evade-badge,
.cinema-hit-grid.triptych-hit .hit-guard-badge,
.cinema-hit-grid.triptych-hit .hit-sector .hit-hp-container ~ div {display:none !important;}
.cinema-hit-grid.triptych-hit .hit-bystander .hit-spark-overlay {display:none;}
.cinema-hit-grid.triptych-hit .hit-affected .hit-spark-overlay {position:absolute;inset:0;z-index:2;pointer-events:none;}

/* Dynamax-inspired roulette: neon dial, six-point feel, accelerating hand. */
#roulette-modal .bonus-wheel-face,
#ball-roulette-modal .ball-clock-face {
  border:8px solid #ffe500;
  background:radial-gradient(circle,#10142b 0 18%,#251047 19% 49%,#4b0750 74%,#150a24 100%);
  box-shadow:0 0 18px #ffea00,0 0 42px #f7009a88,inset 0 0 25px #ff00ae55;
}
#roulette-modal .bonus-wheel-face::before,
#ball-roulette-modal .ball-clock-face::before {
  content:"";position:absolute;inset:5px;border-radius:50%;
  border:3px dashed #ffcf28a0;pointer-events:none;
}
#roulette-modal .dmax-style-marker {
  display:grid;place-items:center;width:43px;height:43px;border-radius:50%;
  background:linear-gradient(145deg,#f5008e,#8a035f);border:2px solid #ffdc00;
  box-shadow:0 0 12px #ff0090;color:#fff;
}
#ball-roulette-modal .ball-clock-marker {
  font-size:clamp(13px,3.6vw,19px);font-weight:900;
  display:grid;place-items:center;width:23px;height:23px;border-radius:50%;
  background:#222;border:1px solid #fff9;
}
#ball-roulette-modal .ball-type-poke {background:#d83136;}
#ball-roulette-modal .ball-type-great {background:#087bff;}
#ball-roulette-modal .ball-type-ultra {background:#242424;color:#ffdf00;}
#ball-roulette-modal .ball-type-master {background:#9b37bf;color:#fff;border:2px solid #ff61c7;box-shadow:0 0 14px #ff37f2;}
#roulette-modal .clock-wheel-hand,
#ball-roulette-modal .clock-wheel-hand {background:linear-gradient(to top,#ff006a,#ffe400);box-shadow:0 0 13px #ffdf00;}
.roulette-idle-spin {animation:roulette-hand-idle .8s linear infinite;}
@keyframes roulette-hand-idle {from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
#arena-container .poke-slot.poke-defeated .poke-sprite,
#arena-container .poke-slot.poke-defeated .poke-avatar-wrapper,
.cinema-hit-grid.triptych-hit .hit-sector.poke-defeated .hit-panel-sprite,
.cinema-hit-grid.triptych-hit .hit-sector.poke-defeated .hit-sector-art {
  filter:grayscale(1) brightness(.55) !important;
  animation:none !important;
}
#arena-container .poke-slot.poke-defeated {opacity:.75;}

/* Dense roulette dials: show each numbered bonus and every ball position. */
#roulette-modal .dmax-style-marker {
  width:29px;height:29px;font-size:12px;border-width:1px;
  transform:translate(-50%,-50%) rotate(var(--angle)) translateY(calc(-1 * min(27vw,118px))) rotate(calc(-1 * var(--angle)));
}
#ball-roulette-modal .ball-clock-marker {
  width:17px;height:17px;font-size:12px;line-height:1;border:0;
  background:transparent !important;text-shadow:0 0 3px #000,0 0 8px #000;
  transform:translate(-50%,-50%) rotate(var(--angle)) translateY(calc(-1 * min(25vw,102px))) rotate(calc(-1 * var(--angle)));
}
#ball-roulette-modal .ball-type-master {box-shadow:0 0 10px #ff37f2;background:#6d168e !important;}

#ball-roulette-modal .ball-clock-marker svg {width:100% !important;height:100% !important;display:block;}

/* 16 weighted bonuses: clear color progression for children who cannot read numbers yet. */
#roulette-modal .dmax-style-marker {width:30px;height:30px;border-width:2px;box-shadow:0 0 9px #0008;}
#roulette-modal .dmax-style-marker.bonus-lowest {
  background:linear-gradient(145deg,#546077,#273149);
  border:3px dashed #d8e1eb;color:#fff;box-shadow:0 0 6px #8a98aa;
}
#roulette-modal .dmax-style-marker.bonus-tier-10 {
  background:linear-gradient(145deg,#00c9ed,#006cbb);
  border-color:#91efff;color:#fff;box-shadow:0 0 9px #00cfff;
}
#roulette-modal .dmax-style-marker.bonus-tier-20 {
  background:linear-gradient(145deg,#41e985,#067d4c);
  border-color:#b0ff99;color:#fff;box-shadow:0 0 9px #00df7c;
}
#roulette-modal .dmax-style-marker.bonus-tier-35 {
  background:linear-gradient(145deg,#ffac20,#ed5700);
  border-color:#ffe38a;color:#fff;box-shadow:0 0 10px #ff9d00;
}
#roulette-modal .dmax-style-marker.bonus-best {
  background:conic-gradient(#ff3434,#ffe400,#38e979,#17cfff,#a23aff,#ff3434);
  border:3px double #fff;color:#fff;
  text-shadow:0 1px 3px #000,0 -1px 3px #000;
  box-shadow:0 0 14px #ffdf00,0 0 5px #fff;
}

.collection-disk-edition {font-weight:900;font-size:12px;padding:3px 9px;border-radius:999px;color:#fff;background:#3476ed;border:1px solid #9ed2ff;}
.collection-disk-edition.edition-1 {background:#7a39b9;border-color:#f0b6ff;}
.collection-disk-edition.edition-2 {background:#137c91;border-color:#8dfffa;}
.collection-disk-number {color:#becde9;font-size:11px;font-weight:800;}

/* Guard phase focuses only on the actual attacking enemy. */
#defense-triptych .defense-solo {
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(#08102a70,#08102a88),var(--defense-bg) center/cover;
}
#defense-triptych .defense-solo-title {
  color:#ffe600;font-weight:950;font-size:clamp(18px,5vw,26px);
  text-shadow:0 3px 12px #000;z-index:2;
}
#defense-triptych .defense-solo img {
  display:block;width:min(70%,310px);height:58%;object-fit:contain;
  filter:drop-shadow(0 10px 18px #000b);
}
#defense-triptych .defense-solo-stars {font-size:clamp(20px,5vw,28px);color:#ffe600;}
#defense-triptych .defense-solo-hp {
  font-size:clamp(14px,3.7vw,20px);font-weight:900;color:#fff;
  text-shadow:0 2px 7px #000;
}
/* Smooth slowdown: pressing roulette does not speed up the pointer. */
.roulette-idle-spin {animation-duration:1s;}
/* Phone battle: symmetrical spacing, larger legible Pokémon, unobstructed HP. */
@media (max-width:560px) {
  #arena-container {
    grid-template-rows:1fr 1fr;
    gap:clamp(12px,3dvh,24px);
    padding:10px 9px 12px;
  }
  #arena-container .enemy-zone,
  #arena-container .player-zone {
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    justify-items:center;align-items:center;gap:8px;
  }
  #arena-container .poke-slot {
    width:100%;max-width:100%;align-self:center;
    gap:3px;
  }
  #arena-container .poke-avatar-wrapper,
  #arena-container .enemy-slot .poke-avatar-wrapper {
    width:clamp(62px,17vw,84px);height:clamp(62px,17vw,84px);
  }
  #arena-container .poke-sprite,
  #arena-container .enemy-slot .poke-sprite {
    width:90%;height:90%;
  }
  #arena-container .poke-title-row {min-height:18px;}
  #arena-container .poke-meta {width:100%;margin-top:2px;}
  #arena-container .hp-gauge-bg {height:7px;margin-top:4px;}
  #arena-container .hp-text {font-size:clamp(10px,2.7vw,13px);font-weight:800;}
}
@media (max-width:560px) and (max-height:700px) {
  #arena-container .poke-avatar-wrapper,
  #arena-container .enemy-slot .poke-avatar-wrapper {width:clamp(44px,14vw,64px);height:clamp(44px,14vw,64px);}
  #arena-container .poke-sprite,#arena-container .enemy-slot .poke-sprite {width:90%;height:90%;}
}

/* Single-enemy guard scene must never inherit the old Y-shaped dividers. */
#defense-triptych .defense-triptych-grid::after {content:none !important;display:none !important;}
/* Player attack cut-in uses the same full-stage large-Pokémon presentation. */
#cinematic-attack-stage {
  background-image:linear-gradient(#08102770,#08102782),var(--attack-stage-bg);
  background-position:center;background-size:cover;
}
#cinematic-attack-stage .cinema-speedlines {opacity:.18;}
#cinematic-attack-stage .cinema-burst-ring {opacity:.28;}
#cinematic-attack-stage .cinema-attack-card {
  justify-content:space-evenly;height:100%;gap:5px;
}
#cinematic-attack-stage .cinema-sprite-wrap {
  height:min(57%,420px);min-height:0;max-height:none;flex:1 1 auto;
}
#cinematic-attack-stage .cinema-big-sprite {
  max-width:95%;max-height:100%;width:auto;height:100%;
  animation:attacker-power-surge 1.1s infinite alternate ease-in-out;
}
@media(max-width:560px) {
  #cinematic-attack-stage .cinema-top-badge {font-size:clamp(13px,3.8vw,19px);}
  #cinematic-attack-stage .cinema-move-txt {font-size:clamp(18px,5vw,26px);}
  #cinematic-attack-stage .cinema-sub-tip {font-size:clamp(11px,2.8vw,14px);}
}

/* Capture: three stadium sectors, Pokémon dissolve into their own balls. */
#catch-animation-stage {
  background:radial-gradient(ellipse at center,#10204a 0%,#040711 78%);
  padding:10px 4px;overflow:hidden;
}
#catch-animation-stage .catch-status-msg {
  position:relative;z-index:2;margin:0 0 12px;padding:0 10px;
  text-align:center;font-size:clamp(14px,3.5vw,21px);
}
#catch-triple-container.catch-arena-grid {
  position:relative;isolation:isolate;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;
  gap:0;width:100%;max-width:760px;height:min(68%,560px);margin:0;
  background:linear-gradient(#03091b77,#04081999),var(--catch-stage-bg) center/cover;
  border:2px solid #ffe600;border-radius:16px;overflow:hidden;
}
#catch-triple-container .catch-sector {
  min-width:0;padding:10px 3px;gap:8px;border:0;border-radius:0;
  background:linear-gradient(90deg,#02071777,transparent,#02071777);
  box-shadow:none;transform:none;justify-content:space-between;
}
#catch-triple-container .catch-sector + .catch-sector {border-left:2px solid #ffe600aa;}
#catch-triple-container .catch-sector.caught {background:linear-gradient(#ffe60015,#ffe60038);box-shadow:inset 0 0 22px #ffe60088;}
#catch-triple-container .catch-sector.escaped {opacity:1;background:linear-gradient(#0005,#30303a99);}
.catch-sector-heading {font-size:clamp(11px,2.6vw,17px);font-weight:900;color:#fff;text-align:center;text-shadow:0 2px 6px #000;}
.catch-sector-heading strong {display:block;overflow-wrap:anywhere;}
.catch-transform-stage {
  width:100%;height:65%;min-height:125px;position:relative;
  display:flex;align-items:center;justify-content:center;
}
#catch-triple-container .catch-target-sprite {
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 8px 12px #000b);
  opacity:1;transform:scale(1);transition:transform .7s cubic-bezier(.3,.05,.7,1),opacity .65s,filter .65s;
}
#catch-triple-container .catch-ball-graphic {
  position:absolute;width:clamp(55px,16vw,110px);height:clamp(55px,16vw,110px);
  opacity:0;transform:translateY(-55%) scale(.3);
  transition:opacity .4s,transform .65s cubic-bezier(.2,.8,.3,1);
}
#catch-triple-container .catch-absorb-flash {
  position:absolute;width:80%;aspect-ratio:1;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#fff 0%,#ffe60099 25%,#00d2ff55 45%,transparent 72%);
  transform:scale(.3);transition:transform .6s,opacity .5s;pointer-events:none;
}
#catch-triple-container .absorbing .catch-target-sprite {
  transform:scale(.08);opacity:0;filter:brightness(5) drop-shadow(0 0 20px #ffe600);
}
#catch-triple-container .absorbing .catch-absorb-flash {transform:scale(1.3);opacity:1;}
#catch-triple-container .absorbing .catch-ball-graphic,
#catch-triple-container .absorbed .catch-ball-graphic {opacity:1;transform:translateY(0) scale(1);}
#catch-triple-container .absorbed .catch-absorb-flash {opacity:0;}
#catch-triple-container .released .catch-target-sprite {
  opacity:1;transform:scale(1);filter:drop-shadow(0 8px 12px #000b);
}
#catch-triple-container .released .catch-ball-graphic {opacity:0;transform:scale(.1);}
#catch-triple-container .captured .catch-target-sprite {opacity:0;transform:scale(.08);}
#catch-triple-container .catch-verdict-badge {
  font-size:clamp(10px,2.6vw,15px);padding:5px 4px;min-height:22px;
  text-align:center;max-width:100%;overflow-wrap:anywhere;
}
@media(max-width:560px) {
  #catch-triple-container.catch-arena-grid {height:min(67%,460px);}
  #catch-triple-container .catch-sector {padding:8px 2px;}
  .catch-transform-stage {min-height:100px;}
}
#catch-triple-container .absorbed .catch-ball-graphic.wobble-left {transform:rotate(-24deg) scale(1.08);}
#catch-triple-container .absorbed .catch-ball-graphic.wobble-right {transform:rotate(24deg) scale(1.08);}
#catch-triple-container .captured .catch-ball-graphic.ball-locked {animation:lock-bounce .5s ease-out;}

/* Capture must use the EXACT same full-viewport Y-shaped three sectors as damage. */
#catch-animation-stage {padding:0 !important;justify-content:center;align-items:stretch;}
#catch-animation-stage .catch-status-msg {
  position:absolute;top:2%;left:4%;right:4%;z-index:12;
  margin:0;padding:5px 8px;border-radius:10px;
  background:#071029aa;text-shadow:0 2px 5px #000;
}
#catch-triple-container.catch-arena-grid {
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  border:0;border-radius:0;display:block;overflow:hidden;
  background:linear-gradient(#06102033,#06102033),var(--catch-stage-bg) center/cover;
}
#catch-triple-container.catch-arena-grid::after {
  content:"";position:absolute;inset:0;pointer-events:none;z-index:8;
  background:center/100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 160' preserveAspectRatio='none'%3E%3Cpath d='M50 80V0M50 80L0 106M50 80L100 106' stroke='%23fff' stroke-width='1.3' fill='none'/%3E%3C/svg%3E");
}
#catch-triple-container.catch-arena-grid .catch-sector {
  position:absolute;inset:0;width:100%;height:100%;min-width:0;
  padding:0;margin:0;border:0;border-radius:0;display:block;
  background:transparent;box-shadow:none;transform:none;
}
#catch-triple-container.catch-arena-grid .catch-sector-left {
  clip-path:polygon(0 0,50% 0,50% 50%,0 66.25%);
}
#catch-triple-container.catch-arena-grid .catch-sector-right {
  clip-path:polygon(50% 0,100% 0,100% 66.25%,50% 50%);
}
#catch-triple-container.catch-arena-grid .catch-sector-bottom {
  clip-path:polygon(50% 50%,100% 66.25%,100% 100%,0 100%,0 66.25%);
}
#catch-triple-container.catch-arena-grid .catch-sector-heading {
  position:absolute;top:10%;left:5%;width:40%;
  font-size:clamp(12px,3vw,18px);text-align:center;
}
#catch-triple-container.catch-arena-grid .catch-sector-right .catch-sector-heading {left:55%;}
#catch-triple-container.catch-arena-grid .catch-sector-bottom .catch-sector-heading {top:60%;left:30%;}
#catch-triple-container.catch-arena-grid .catch-transform-stage {
  position:absolute;top:17%;left:2%;width:47%;height:39%;min-height:0;
}
#catch-triple-container.catch-arena-grid .catch-sector-right .catch-transform-stage {left:51%;}
#catch-triple-container.catch-arena-grid .catch-sector-bottom .catch-transform-stage {
  top:62%;left:21%;width:58%;height:28%;
}
#catch-triple-container.catch-arena-grid .catch-target-sprite {width:100%;height:100%;}
#catch-triple-container.catch-arena-grid .catch-verdict-badge {
  position:absolute;top:55%;left:4%;width:41%;margin:0;
  font-size:clamp(10px,2.6vw,15px);z-index:4;
}
#catch-triple-container.catch-arena-grid .catch-sector-right .catch-verdict-badge {left:55%;}
#catch-triple-container.catch-arena-grid .catch-sector-bottom .catch-verdict-badge {
  top:91%;left:27%;width:46%;
}
@media(max-width:560px) {
  #catch-triple-container.catch-arena-grid {height:100%;}
}

/* During the four-second mash, replace the 3v3 arena with a solo attacker. */
#cinematic-attack-stage.mash-attacker-visible {display:flex;pointer-events:none;animation:cinema-zoom-in .25s ease-out;}
#cinematic-attack-stage.mash-attacker-visible .cinema-attack-card {justify-content:space-evenly;}
#cinematic-attack-stage.mash-attacker-visible .cinema-sprite-wrap {flex:1 1 auto;min-height:0;height:55%;max-height:68%;}
#cinematic-attack-stage.mash-attacker-visible .cinema-big-sprite {width:100%;height:100%;max-width:95%;max-height:100%;object-fit:contain;}

/* Title UX: one clear action. Battle controls and status belong to battles. */
body.title-mode #action-center,
body.title-mode #arcade-controls,
body.title-mode #arcade-dispenser-tray {display:none !important;}
body.title-mode #screen-viewport {flex:1 1 auto;min-height:0;}
body.title-mode #screen-viewport::before {display:none;}
body.title-mode #arcade-header {padding:12px 14px;}
body.title-mode #title-screen {
  justify-content:center;gap:clamp(18px,4dvh,42px);
  padding:clamp(18px,5vw,32px);
  background:radial-gradient(ellipse at 50% 43%,#25365c 0%,#0b1329 54%,#070a18 100%);
}
body.title-mode .title-logo-container {gap:8px;}
body.title-mode .title-main-h1 {font-size:clamp(2rem,8vw,3.2rem);letter-spacing:-.03em;}
body.title-mode .title-sub-h2 {font-size:clamp(.85rem,3.4vw,1.1rem);letter-spacing:.12em;color:#9beaff;}
body.title-mode .title-pokemons-showcase {gap:clamp(4px,3vw,18px);margin:0;width:100%;}
body.title-mode .title-showcase-img,
body.title-mode .title-showcase-img[style] {
  width:clamp(78px,24vw,120px) !important;
  height:clamp(90px,27vw,140px) !important;
}
body.title-mode #btn-insert-coin {
  width:min(100%,390px);min-height:68px;padding:14px 12px;
  font-size:clamp(1.25rem,5vw,1.65rem);border-radius:22px;
  border:3px solid #fff;box-shadow:0 8px 28px #ff00776b;
}
body.title-mode .title-start-hint {
  font-size:clamp(.8rem,3.1vw,1rem);color:#c4d5ed;
  text-align:center;line-height:1.5;
}
@media(max-height:650px) {
  body.title-mode .title-pokemons-showcase {display:flex;}
  body.title-mode .title-start-hint {display:block;}
  body.title-mode #title-screen {gap:10px;padding:8px 12px;}
  body.title-mode .title-showcase-img,body.title-mode .title-showcase-img[style] {width:65px !important;height:72px !important;}
  body.title-mode #btn-insert-coin {min-height:52px;padding:8px;font-size:1.1rem;}
}
/* Only relevant secondary actions on the title; battle settings return after start. */
body.title-mode #btn-toggle-bgm,
body.title-mode #btn-open-typechart {display:none !important;}
body.title-mode .header-actions .icon-btn {padding:9px 11px;font-size:.77rem;}

/* Stage-first flow and two boss picks, one known minion. */
.stage-selection-grid {display:grid;grid-template-columns:1fr 1fr;gap:9px;overflow-y:auto;min-height:0;flex:1 1 auto;align-content:start;padding:8px;}
.stage-select-card {min-height:145px;background-size:cover;background-position:center;border:2px solid #ffe600;border-radius:14px;color:white;display:flex;flex-direction:column;justify-content:end;align-items:start;gap:7px;padding:12px;text-align:left;font:inherit;cursor:pointer;}
.stage-select-card strong {font-size:1.1rem;text-shadow:0 2px 5px #000;}
.stage-select-card span {font-size:.75rem;}
.stage-select-card b {color:#ffe600;font-size:.8rem;}
.boss-choice-grid .boss-picked {filter:drop-shadow(0 0 15px #00ffb3) brightness(1.18);}
.boss-selection-hint .boss-minion-preview {display:flex;align-items:center;justify-content:center;gap:7px;margin-top:4px;font-size:.75rem;color:#fff;}
.boss-minion-preview img {width:36px;height:36px;object-fit:contain;}
.boss-minion-preview strong {color:#ffe600;}
.boss-choice-grid.boss-full-split .boss-sector-bottom .boss-triptych-top {top:auto !important;bottom:7% !important;left:29% !important;width:42% !important;z-index:30;}
.boss-choice-grid.boss-full-split .boss-sector-bottom .boss-face-crop {top:52%;height:33%;}

/* Informational dialogs are portaled to body, above team selection and header. */
#collection-modal, #typechart-modal {
  position:fixed !important;inset:0 !important;width:100vw !important;
  height:100dvh !important;max-height:none !important;z-index:10020 !important;
  padding:max(14px,env(safe-area-inset-top)) 12px max(14px,env(safe-area-inset-bottom));
  overflow:hidden;overscroll-behavior:contain;
}
#collection-modal .collection-grid {min-height:0;overflow-y:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch;}
#typechart-modal .typechart-cabinet {min-height:0;max-height:100%;}
#typechart-modal .typechart-table-scroll {min-height:0;overflow:auto;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;}

/* All six battle stars must fit inside narrow phone slots. */
#arena-container .poke-title-row {flex-wrap:nowrap;overflow:visible;}
#arena-container .poke-title-row .star-rating {display:inline-block;flex:0 0 auto;white-space:nowrap;font-size:clamp(9px,2.3vw,14px);letter-spacing:-1px;line-height:1.2;}
#arena-container .poke-title-row .battle-six-stars {background:linear-gradient(90deg,#ff5d64,#ffba35,#ffe600,#5bea8e,#43d9ff,#a789ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 2px #000);font-weight:900;}

/* Stage selection: scroll the cards, not the whole arcade cabinet. */
.boss-selection-modal.stage-selection-active {justify-content:flex-start;overflow:hidden;gap:6px;padding:9px 10px 10px;}
.boss-selection-modal.stage-selection-active .boss-radial-note {display:none !important;}
.boss-selection-modal.stage-selection-active .stage-selection-grid {
  display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:minmax(132px,auto);align-content:start !important;
  flex:1 1 0;min-height:0;max-height:100%;width:100%;
  overflow-y:auto !important;overflow-x:hidden !important;
  overscroll-behavior:contain;touch-action:pan-y !important;
  -webkit-overflow-scrolling:touch;padding:4px 4px 24px;gap:9px;
}
.boss-selection-modal.stage-selection-active .stage-select-card {min-height:132px;height:auto;}

/* UX simplification: large Pokémon first; detailed data lives in My Disks. */
#player-choice-grid .player-choice-card {min-height:0 !important;padding:10px 5px;gap:7px;}
#player-choice-grid .player-choice-sprite {height:clamp(100px,31vw,155px);max-height:155px;}
#player-choice-grid .player-choice-card strong {font-size:clamp(13px,3.4vw,18px);line-height:1.25;overflow-wrap:anywhere;}
#player-choice-grid .player-choice-matchup {min-height:0;font-size:clamp(11px,2.6vw,14px);white-space:nowrap;}
#player-choice-grid .player-choice-cta {padding:10px 2px;font-size:clamp(11px,2.6vw,14px);}
#player-select-modal #player-team-order {font-size:clamp(11px,2.8vw,14px);line-height:1.4;overflow-wrap:anywhere;}
.boss-selection-modal.stage-selection-active .stage-select-card {min-height:118px !important;gap:6px;overflow:hidden;}
.boss-selection-modal.stage-selection-active .stage-select-card strong {font-size:clamp(14px,3.8vw,19px);line-height:1.25;overflow-wrap:anywhere;word-break:keep-all;}
.boss-selection-modal.stage-selection-active .stage-select-card b {font-size:clamp(12px,2.8vw,15px);}
.collection-disk-details {display:block;width:100%;font-size:11px;line-height:1.5;color:#eaf5ff;text-align:left;}
.collection-disk-details summary {cursor:pointer;color:#ffe600;font-weight:800;white-space:normal;}
.collection-disk-details[open] {background:#0a1734;border-radius:8px;padding:5px;}
.collection-disk-details span {display:block;overflow-wrap:anywhere;}

/* Compact battle HUD for narrow iPhones */
#action-center {gap:2px;padding:6px 10px;}
#action-center #banner-announcement {height:auto;min-height:20px;font-size:clamp(12px,3.3vw,17px);line-height:1.3;overflow-wrap:anywhere;word-break:keep-all;}
#action-center .combo-hint-pill {display:none !important;}
#action-center .alternate-combo-row {margin:0;justify-content:center;}
#action-center .mash-meter-container {margin:3px 0 2px;}
#action-center .mash-meter-bar {height:15px;}
@media(max-width:360px) {#player-choice-grid {gap:4px;}#player-choice-grid .player-choice-card {padding:7px 2px;}#player-choice-grid .player-choice-matchup,#player-choice-grid .player-choice-cta {font-size:10px;}}
@media(max-height:680px) {#action-center .alternate-combo-row {display:none !important;}#action-center .mash-meter-container {margin:1px 0;}#action-center .mash-meter-bar {height:12px;}}

/* Hit sectors: damage is text only, positioned away from the Y divider. */
.cinema-hit-grid.triptych-hit .hit-damage-pill {
  left:12%;top:44%;width:auto;max-width:30%;padding:0 !important;
  border:0 !important;border-radius:0 !important;background:none !important;
  box-shadow:none !important;color:#fff !important;text-shadow:0 2px 5px #000,0 0 9px #ff4444;
  font-size:clamp(19px,5vw,30px);font-weight:1000;white-space:nowrap;line-height:1;
}
.cinema-hit-grid.triptych-hit .hit-sector-right .hit-damage-pill {left:65%;top:44%;}
.cinema-hit-grid.triptych-hit .hit-sector-bottom .hit-damage-pill {left:43%;top:85%;}
.cinema-hit-grid.triptych-hit .hit-panel-title {white-space:nowrap;font-size:clamp(12px,3vw,18px);}
.cinema-hit-grid.triptych-hit .hit-panel-title .battle-six-stars {font-size:clamp(11px,2.7vw,17px);letter-spacing:-2px;}

/* Get Time: keep the ball dial as the only visual focus. The hidden cards
   remain in the DOM because the roulette result logic highlights them. */
#ball-roulette-modal .ball-card-list {display:none !important;}
#ball-roulette-modal .roulette-cabinet {
  width:min(100%,460px);max-width:100%;padding:18px 12px;
  border:0;border-radius:0;background:transparent;box-shadow:none;
}
#ball-roulette-modal .ball-roulette-box {margin:16px 0 12px;gap:0;}
#ball-roulette-modal .roulette-header-txt {font-size:clamp(18px,5vw,24px);line-height:1.3;}
#ball-roulette-modal .roulette-sub-tip {font-size:clamp(13px,3.6vw,16px);}

/* ===================================================
   Phase 2: 아케이드 배틀 룰 & 기믹 심화 스타일
   =================================================== */

/* Header Score & High Score Pills */
.header-score-group {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 4px;
}
.header-score-pill, .header-hiscore-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 210, 255, 0.4);
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 900;
}
.header-hiscore-pill {
  border-color: rgba(255, 230, 0, 0.5);
}
.score-label {
  font-size: 0.6rem;
  color: #8fa0c9;
  letter-spacing: 0.5px;
}
.header-hiscore-pill .score-label {
  color: #ffe600;
}
.score-num {
  color: #00d2ff;
  letter-spacing: 0.5px;
}
.header-hiscore-pill .score-num {
  color: #fff;
}

/* 서포트 포켓몬 난입 컷인 */
.support-cutin-overlay {
  position: absolute;
  inset: 0;
  z-index: 82;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle, rgba(20, 30, 60, 0.95) 0%, rgba(5, 7, 16, 0.98) 90%);
  animation: area-pop 0.35s ease-out;
  padding: 16px;
  box-sizing: border-box;
  text-align: center;
}
.support-badge {
  font-size: 0.95rem;
  font-weight: 900;
  color: #000;
  background: linear-gradient(90deg, #ffe600, #ff8c00);
  padding: 5px 18px;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(255, 230, 0, 0.7);
  letter-spacing: 1px;
}
.support-avatar-wrap {
  width: 130px;
  height: 130px;
  margin: 12px 0 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.support-sprite {
  width: 120px;
  height: 120px;
  object-fit: contain;
  filter: drop-shadow(0 0 25px rgba(255, 230, 0, 0.8));
  animation: pulse-star 0.7s infinite alternate;
}
.support-name {
  font-size: 1.45rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 15px #ffe600;
}
.support-desc {
  font-size: 0.92rem;
  font-weight: 800;
  color: #00d2ff;
  margin-top: 6px;
  text-shadow: 0 0 10px rgba(0, 210, 255, 0.8);
}

/* 메가진화 타이밍 바 모달 */
.mega-modal-overlay {
  position: absolute;
  inset: 0;
  z-index: 84;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(6, 8, 20, 0.95);
  backdrop-filter: blur(8px);
  padding: 14px;
  box-sizing: border-box;
}
.mega-cabinet {
  width: 100%;
  max-width: 440px;
  background: #11152a;
  border: 3px solid #ff0077;
  box-shadow: 0 0 35px rgba(255, 0, 119, 0.7);
  border-radius: 20px;
  padding: 18px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.mega-top-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: #ff0077;
  text-shadow: 0 0 15px #ff0077;
}
.mega-sub-guide {
  font-size: 0.8rem;
  color: #eee;
  margin: 0;
}
.mega-track-wrap {
  width: 100%;
  margin: 10px 0;
}
.mega-rail-track {
  width: 100%;
  height: 28px;
  background: #090c1a;
  border: 2px solid #555;
  border-radius: 14px;
  position: relative;
  overflow: visible;
}
.mega-sweet-spot {
  position: absolute;
  left: 40%;
  width: 20%;
  height: 100%;
  background: linear-gradient(90deg, rgba(46, 204, 113, 0.4), rgba(46, 204, 113, 0.9), rgba(46, 204, 113, 0.4));
  border: 2px solid #2ecc71;
  box-sizing: border-box;
  box-shadow: 0 0 15px #2ecc71;
}
.mega-indicator-pin {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.4rem;
  transition: left 0.05s linear;
  filter: drop-shadow(0 0 8px #ffe600);
}
.mega-verdict-txt {
  font-size: 1.15rem;
  font-weight: 900;
  color: #ffe600;
}

/* Z기술 파워 충전 모달 */
.zmove-modal-overlay {
  position: absolute;
  inset: 0;
  z-index: 84;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(6, 8, 20, 0.95);
  backdrop-filter: blur(8px);
  padding: 14px;
  box-sizing: border-box;
}
.zmove-cabinet {
  width: 100%;
  max-width: 440px;
  background: #15102a;
  border: 3px solid #9b59b6;
  box-shadow: 0 0 35px rgba(155, 89, 182, 0.7);
  border-radius: 20px;
  padding: 18px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.zmove-top-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: #f1c40f;
  text-shadow: 0 0 15px #f1c40f, 0 0 25px #9b59b6;
}
.zmove-sub-guide {
  font-size: 0.8rem;
  color: #eee;
  margin: 0;
}
.zmove-gauge-wrap {
  width: 100%;
  margin: 10px 0;
}
.zmove-meter-rail {
  width: 100%;
  height: 24px;
  background: #090c1a;
  border: 2px solid #9b59b6;
  border-radius: 12px;
  overflow: hidden;
}
.zmove-meter-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #9b59b6, #e056fd, #f1c40f);
  box-shadow: 0 0 15px #e056fd;
  transition: width 0.08s ease-out;
}
.zmove-status-row {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.85rem;
  font-weight: 900;
  color: #ffe600;
}

/* 배틀 결과 스코어 & 랭크 모달 */
.battle-score-overlay {
  position: absolute;
  inset: 0;
  z-index: 88;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(5, 7, 18, 0.96);
  backdrop-filter: blur(10px);
  padding: 14px;
  box-sizing: border-box;
}
.battle-score-cabinet {
  width: 100%;
  max-width: 440px;
  background: linear-gradient(180deg, #131934 0%, #0a0d1e 100%);
  border: 3px solid #00d2ff;
  box-shadow: 0 0 40px rgba(0, 210, 255, 0.6);
  border-radius: 22px;
  padding: 20px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.score-modal-header {
  font-size: 1.15rem;
  font-weight: 900;
  color: #00d2ff;
  letter-spacing: 2px;
  text-shadow: 0 0 12px #00d2ff;
}
.score-rank-trophy {
  font-size: 3.5rem;
  font-weight: 1000;
  margin: 6px 0 2px;
  line-height: 1;
  text-shadow: 0 0 30px currentColor;
  animation: pop-scale 0.4s ease-out;
}
.score-rank-trophy.rank-s {
  color: #ffe600;
  text-shadow: 0 0 30px #ffe600, 0 0 60px #ff0077;
}
.score-rank-trophy.rank-a {
  color: #00d2ff;
  text-shadow: 0 0 25px #00d2ff;
}
.score-rank-trophy.rank-b {
  color: #e67e22;
  text-shadow: 0 0 20px #e67e22;
}
.score-rank-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 12px;
}
.score-summary-board {
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 12px;
  box-sizing: border-box;
  margin-bottom: 16px;
}
.score-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #b0c4de;
  margin: 4px 0;
}
.score-item-val {
  font-weight: 800;
  color: #fff;
}
.score-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  margin: 8px 0;
}
.score-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.score-total-lbl {
  font-size: 0.95rem;
  font-weight: 900;
  color: #ffe600;
}
.score-total-val {
  font-size: 1.45rem;
  font-weight: 1000;
  color: #ffe600;
  text-shadow: 0 0 15px rgba(255, 230, 0, 0.8);
}
.score-record-badge {
  background: linear-gradient(90deg, #ff0077, #ffe600);
  color: #000;
  font-size: 0.75rem;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 10px;
  margin-top: 8px;
  display: inline-block;
  animation: pulse-star 0.6s infinite alternate;
}
.score-proceed-btn {
  width: 100%;
  padding: 12px;
  border-radius: 16px;
  border: 2px solid #ffe600;
  background: linear-gradient(90deg, #ff0077, #ff5500);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(255, 0, 119, 0.6);
  transition: transform 0.15s;
}
.score-proceed-btn:active {
  transform: scale(0.97);
}

/* ============================================================
   Phase 3: 도감 컬렉션, 실루엣, 필터 및 3D 디스크 상세 뷰어 스타일
   ============================================================ */
.collection-progress-wrap {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(0, 210, 255, 0.25);
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 8px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}
.collection-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.collection-milestone-pill {
  font-size: 0.72rem;
  font-weight: 800;
  color: #ffe600;
  background: rgba(255, 230, 0, 0.15);
  border: 1px solid rgba(255, 230, 0, 0.4);
  border-radius: 12px;
  padding: 2px 10px;
  letter-spacing: 0.3px;
  transition: all 0.3s;
}
.collection-milestone-pill.unlocked {
  background: linear-gradient(90deg, #00d2ff, #00ff88);
  color: #020b1e;
  font-weight: 900;
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.6);
  border-color: #00ff88;
}
.collection-progress-track {
  width: 100%;
  height: 7px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  overflow: hidden;
}
.collection-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00d2ff, #ffe600, #ff0077);
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(0, 210, 255, 0.6);
  transition: width 0.4s ease;
}

/* 필터 바 & 필터 칩 */
.collection-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.filter-chip-row {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.filter-chip-row::-webkit-scrollbar {
  display: none;
}
.filter-row-lbl {
  font-size: 0.72rem;
  color: #8fa0c9;
  font-weight: 900;
  min-width: 32px;
}
.filter-chip {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #c4d3ea;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.filter-chip:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #00d2ff;
  color: #fff;
}
.filter-chip.active {
  background: linear-gradient(135deg, #00d2ff, #0077ff);
  color: #ffffff;
  border-color: #00d2ff;
  font-weight: 900;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.6);
}

/* 미보유 디스크 실루엣 카드 */
.collection-disk-simple.unowned {
  background: linear-gradient(145deg, #0d1220, #05070d);
  border: 1.5px dashed rgba(255, 255, 255, 0.2);
  opacity: 0.85;
}
.collection-disk-simple.unowned img {
  filter: brightness(0) drop-shadow(0 0 3px rgba(0, 210, 255, 0.35));
  opacity: 0.45;
}
.collection-disk-simple.unowned strong {
  color: #8fa0c9;
  font-style: italic;
}
.collection-disk-unowned-badge {
  font-size: 0.68rem;
  color: #8fa0c9;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 800;
}
.btn-team-assign.unowned-btn {
  background: rgba(255, 255, 255, 0.05);
  color: #556277;
  border-color: rgba(255, 255, 255, 0.1);
  cursor: not-allowed;
}

/* 디스크 상세 뷰어 모달 (3D 카드) */
.disk-detail-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  background: rgba(4, 7, 16, 0.92);
  backdrop-filter: blur(12px);
  z-index: 10030 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.disk-detail-cabinet {
  background: linear-gradient(180deg, #10162a, #070a14);
  border: 2px solid #00d2ff;
  border-radius: 20px;
  box-shadow: 0 0 35px rgba(0, 210, 255, 0.5), inset 0 0 20px rgba(0, 210, 255, 0.15);
  max-width: 360px;
  width: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: modal-pop 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.disk-detail-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 8px;
}
.disk-detail-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 10px 0;
}
.disk-detail-hint {
  font-size: 0.76rem;
  color: #ffe600;
  text-align: center;
  margin: 0;
  font-weight: 700;
}
.collection-disk-simple.clickable {
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.collection-disk-simple.clickable:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 210, 255, 0.35);
  border-color: #00d2ff;
}

/* ============================================================
   Phase 4: 배속 모드, 플레이 가이드 튜토리얼 및 아케이드 UX 고도화
   ============================================================ */
#btn-speed-toggle {
  font-weight: 900;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
  min-width: 50px;
  justify-content: center;
}
#btn-speed-toggle.speed-boost {
  background: linear-gradient(135deg, #00d2ff, #0066ff);
  color: #fff;
  border-color: #00d2ff;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.7);
}
#btn-speed-toggle.speed-turbo {
  background: linear-gradient(135deg, #ff0077, #ffe600);
  color: #000;
  border-color: #ffe600;
  box-shadow: 0 0 14px rgba(255, 0, 119, 0.8);
}

/* 배속 활성화 시 배틀 연출 애니메이션 가속 */
body.speed-boost .cinema-clash-card,
body.speed-boost .hit-panel,
body.speed-boost .attacking-lunge,
body.speed-boost .hit-element-overlay {
  animation-duration: 0.7s !important;
}
body.speed-turbo .cinema-clash-card,
body.speed-turbo .hit-panel,
body.speed-turbo .attacking-lunge,
body.speed-turbo .hit-element-overlay {
  animation-duration: 0.45s !important;
}

/* 아케이드 플레이 가이드 모달 */
.guide-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  background: rgba(4, 7, 16, 0.92);
  backdrop-filter: blur(12px);
  z-index: 10030 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.guide-cabinet {
  background: linear-gradient(180deg, #10162a, #070a14);
  border: 2px solid #00d2ff;
  border-radius: 20px;
  box-shadow: 0 0 35px rgba(0, 210, 255, 0.5), inset 0 0 20px rgba(0, 210, 255, 0.15);
  max-width: 520px;
  width: 100%;
  max-height: 85vh;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: modal-pop 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.guide-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 8px;
}
.guide-title {
  color: #ffe600;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: -0.2px;
}
.guide-body-scroll {
  overflow-y: auto;
  max-height: 68vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #00d2ff rgba(0, 0, 0, 0.3);
}
.guide-section {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 14px;
}
.guide-sec-title {
  margin: 0 0 8px 0;
  font-size: 0.88rem;
  font-weight: 900;
  color: #00d2ff;
}
.guide-section p {
  margin: 0 0 6px 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: #d8e2f0;
}
.guide-section p:last-child {
  margin-bottom: 0;
}
.guide-gimmick-card {
  background: rgba(0, 0, 0, 0.35);
  border-left: 3px solid #ffe600;
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 6px;
}
.guide-gimmick-card strong {
  display: block;
  font-size: 0.8rem;
  color: #ffe600;
  margin-bottom: 2px;
}
.guide-gimmick-card p {
  margin: 0;
  font-size: 0.74rem;
  color: #b7c7de;
}

/* ============================================================
   Phase 5-1: 태그 어택 (TAG ATTACK) 듀얼 합체 필살기 연출 스타일
   ============================================================ */
.cinema-solo-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cinema-tag-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: pop-scale 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.cinema-tag-duo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 520px;
}

.cinema-tag-member {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(10, 20, 45, 0.75);
  border: 2px solid rgba(0, 210, 255, 0.6);
  border-radius: 16px;
  padding: 8px 6px;
  box-shadow: 0 0 20px rgba(0, 210, 255, 0.3);
  position: relative;
  backdrop-filter: blur(6px);
}

.cinema-tag-member.member-left {
  border-color: #00d2ff;
  box-shadow: 0 0 25px rgba(0, 210, 255, 0.45);
  animation: tag-member-slide-left 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.cinema-tag-member.member-right {
  border-color: #ff0077;
  box-shadow: 0 0 25px rgba(255, 0, 119, 0.45);
  animation: tag-member-slide-right 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.cinema-tag-role-pill {
  font-size: 0.65rem;
  font-weight: 900;
  color: #020b1e;
  background: #00d2ff;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 1px;
}

.cinema-tag-role-pill.partner {
  background: #ff0077;
  color: #fff;
}

.cinema-tag-member .cinema-sprite-wrap {
  height: 30vh;
  min-height: 150px;
  max-height: 230px;
}

.cinema-tag-sprite {
  height: 90%;
  max-height: 210px;
  max-width: 90%;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(255, 230, 0, 0.85));
  animation: attacker-power-surge 0.65s infinite alternate ease-in-out;
}

.cinema-tag-burst-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffe600, #ff0077);
  color: #000;
  font-weight: 900;
  font-size: 0.78rem;
  padding: 6px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 20px #ffe600;
  z-index: 10;
  min-width: 42px;
  min-height: 42px;
}

.cinema-tag-name {
  font-size: 0.95rem;
  font-weight: 900;
  color: #ffe600;
  margin-top: 4px;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

.cinema-tag-move {
  font-size: 0.75rem;
  color: #fff;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.55);
  padding: 2px 8px;
  border-radius: 8px;
  margin-top: 2px;
}

.cinema-tag-combo-txt {
  font-size: 0.85rem;
  font-weight: 900;
  color: #ffe600;
  text-shadow: 0 0 15px rgba(255, 230, 0, 0.85);
  background: rgba(0, 0, 0, 0.65);
  padding: 4px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 230, 0, 0.5);
  animation: pulse-ring 0.6s infinite alternate;
}

@keyframes tag-member-slide-left {
  from { transform: translateX(-40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes tag-member-slide-right {
  from { transform: translateX(40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ============================================================
   Phase 6: 공식 메모리 태그 (Memory Tag) & 디스크 강화 스타일
   ============================================================ */

/* 메모리 태그 모달 캐비닛 */
.memory-tag-cabinet {
  background: radial-gradient(circle at 50% 20%, #161b38 0%, #0a0d1f 100%);
  border: 2px solid #00d2ff;
  border-radius: 20px;
  box-shadow: 0 0 35px rgba(0, 210, 255, 0.4), inset 0 0 20px rgba(0, 210, 255, 0.15);
  max-width: 820px;
  width: 95%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #fff;
  animation: modal-pop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.memory-tag-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: linear-gradient(90deg, rgba(0, 210, 255, 0.25), rgba(255, 42, 133, 0.25));
  border-bottom: 2px solid rgba(0, 210, 255, 0.3);
}

.memory-tag-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.memory-tag-ic {
  font-size: 1.5rem;
  filter: drop-shadow(0 0 8px #00d2ff);
}

.memory-tag-title-wrap h2 {
  font-size: 1.25rem;
  font-weight: 900;
  margin: 0;
  background: linear-gradient(90deg, #00d2ff, #fff, #ffe600);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
}

.memory-tag-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 18px;
  overflow-y: auto;
}

@media (max-width: 720px) {
  .memory-tag-body {
    grid-template-columns: 1fr;
  }
}

/* 트레이너 라이선스 홀로그램 카드 */
.memory-trainer-card {
  position: relative;
  background: linear-gradient(135deg, #1b244d 0%, #0d122b 100%);
  border: 2px solid #ffcc00;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 0 20px rgba(255, 204, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.trainer-card-hologram {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.08) 45%, rgba(0, 210, 255, 0.12) 50%, rgba(255, 42, 133, 0.08) 55%, transparent 60%);
  pointer-events: none;
  animation: holo-shine 4s infinite linear;
}

@keyframes holo-shine {
  0% { transform: translateY(-30%) rotate(25deg); }
  100% { transform: translateY(30%) rotate(25deg); }
}

.trainer-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 900;
  color: #ffcc00;
  border-bottom: 1px solid rgba(255, 204, 0, 0.3);
  padding-bottom: 6px;
}

.trainer-card-no {
  color: #00d2ff;
  font-family: monospace;
}

.trainer-avatar-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.trainer-avatar-display {
  font-size: 2.5rem;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid #00d2ff;
  border-radius: 50%;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.4);
}

.trainer-info-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trainer-name-edit-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

#trainer-name-input {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid #00d2ff;
  border-radius: 8px;
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  padding: 4px 8px;
  width: 100%;
  box-sizing: border-box;
}

#trainer-name-input:focus {
  outline: none;
  border-color: #ffcc00;
  box-shadow: 0 0 10px #ffcc00;
}

.trainer-name-edit-hint {
  position: absolute;
  right: 8px;
  font-size: 0.65rem;
  color: #aaa;
  pointer-events: none;
}

.trainer-rank-pill {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 12px;
  background: #ffcc00;
  color: #000;
  box-shadow: 0 0 8px rgba(255, 204, 0, 0.5);
}

.trainer-rank-pill.rank-rookie { background: #3498db; color: #fff; }
.trainer-rank-pill.rank-veteran { background: #2ecc71; color: #000; }
.trainer-rank-pill.rank-elite { background: #9b59b6; color: #fff; }
.trainer-rank-pill.rank-master { background: #f39c12; color: #000; }
.trainer-rank-pill.rank-champion { background: linear-gradient(90deg, #ff0055, #ffe600); color: #000; box-shadow: 0 0 15px #ffe600; }

.trainer-avatar-selector {
  display: flex;
  gap: 8px;
  background: rgba(0, 0, 0, 0.3);
  padding: 6px;
  border-radius: 10px;
  justify-content: center;
}

.avatar-opt-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-size: 1.25rem;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.avatar-opt-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.15);
}

.avatar-opt-btn.active {
  background: rgba(0, 210, 255, 0.3);
  border-color: #00d2ff;
  box-shadow: 0 0 10px #00d2ff;
}

.trainer-exp-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trainer-exp-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 800;
}

.trainer-exp-val {
  color: #00ff88;
}

.trainer-exp-bar {
  height: 8px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.trainer-exp-fill {
  height: 100%;
  background: linear-gradient(90deg, #00d2ff, #00ff88);
  box-shadow: 0 0 8px #00ff88;
  transition: width 0.4s ease;
}

.trainer-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 4px;
}

.trainer-stat-card {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 6px 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.t-stat-num {
  font-size: 1rem;
  font-weight: 900;
  color: #ffcc00;
}

.t-stat-lbl {
  font-size: 0.62rem;
  color: #bbb;
  margin-top: 2px;
}

/* 우측 업적 리스트 */
.memory-achievements-panel {
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 12px;
  max-height: 430px;
}

.achieve-panel-title {
  font-size: 0.95rem;
  font-weight: 900;
  margin: 0 0 10px 0;
  color: #ffcc00;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 6px;
}

.achieve-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 4px;
}

.achieve-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 8px 10px;
  transition: all 0.2s;
}

.achieve-item.completed {
  background: rgba(0, 210, 255, 0.12);
  border-color: #00d2ff;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.25);
}

.achieve-icon {
  font-size: 1.4rem;
  min-width: 32px;
  text-align: center;
}

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

.achieve-name {
  font-size: 0.82rem;
  font-weight: 900;
  color: #fff;
}

.achieve-desc {
  font-size: 0.68rem;
  color: #aaa;
}

.achieve-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.achieve-bar-track {
  flex: 1;
  height: 5px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  overflow: hidden;
}

.achieve-bar-fill {
  height: 100%;
  background: #00d2ff;
  transition: width 0.3s;
}

.achieve-count-txt {
  font-size: 0.65rem;
  font-weight: 700;
  color: #00d2ff;
}

.achieve-badge-pill {
  font-size: 0.68rem;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #888;
}

.achieve-item.completed .achieve-badge-pill {
  background: #00ff88;
  color: #000;
  box-shadow: 0 0 8px #00ff88;
}

/* ============================================================
   디스크 레벨 리본 & 파워업 프로그레스 스타일
   ============================================================ */

/* 도감 및 배틀 슬롯의 레벨 배지 */
.disk-level-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.68rem;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 8px;
  background: linear-gradient(90deg, #ffcc00, #ff8800);
  color: #000;
  box-shadow: 0 0 6px rgba(255, 204, 0, 0.6);
}

.disk-level-badge.max-level {
  background: linear-gradient(90deg, #ff0055, #ffe600);
  color: #000;
  box-shadow: 0 0 12px #ffe600;
  animation: pulse-ring 0.8s infinite alternate;
}

/* 3D 플립 카드 상단 골드 리본 */
.disk-level-ribbon {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 15;
  font-size: 0.75rem;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 12px;
  background: linear-gradient(90deg, #ffe600, #ff9900);
  color: #000;
  box-shadow: 0 0 10px #ffe600;
}

.disk-level-ribbon.max-ribbon {
  background: linear-gradient(90deg, #ff0055, #ffe600);
  box-shadow: 0 0 16px #ffe600;
  animation: pulse-ring 0.7s infinite alternate;
}

/* 디스크 배출 모달 시 강화 파편/레벨업 배지 */
.dispense-power-badge {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  font-size: 0.78rem;
  font-weight: 900;
  padding: 4px 12px;
  border-radius: 14px;
  white-space: nowrap;
  animation: levelup-pop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dispense-power-badge.badge-shard {
  background: linear-gradient(90deg, #00d2ff, #00ff88);
  color: #000;
  box-shadow: 0 0 15px #00d2ff;
}

.dispense-power-badge.badge-levelup {
  background: linear-gradient(90deg, #ffe600, #ff5500);
  color: #000;
  box-shadow: 0 0 20px #ffe600;
}

.dispense-power-badge.badge-max {
  background: linear-gradient(90deg, #ff0055, #ffe600);
  color: #000;
  box-shadow: 0 0 25px #ffe600;
}

@keyframes levelup-pop {
  0% { transform: translateX(-50%) scale(0.3); opacity: 0; }
  70% { transform: translateX(-50%) scale(1.15); opacity: 1; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* Phase 7: 스페셜 레이드 보스 모드 */
.title-btn-group {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  flex-wrap: wrap;
}

.raid-gold-btn {
  background: linear-gradient(135deg, #d35400, #c0392b) !important;
  border: 3px solid #ffe600 !important;
  box-shadow: 0 0 20px rgba(255, 230, 0, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.4) !important;
  animation: raid-btn-glow 1.5s infinite alternate !important;
}

@keyframes raid-btn-glow {
  0% { transform: scale(1); box-shadow: 0 0 14px rgba(255, 230, 0, 0.5); }
  100% { transform: scale(1.04); box-shadow: 0 0 26px rgba(255, 230, 0, 0.9), 0 0 40px rgba(231, 76, 60, 0.7); }
}

.raid-selection-modal {
  background: radial-gradient(circle at center, rgba(30, 10, 40, 0.96) 0%, rgba(5, 5, 15, 0.98) 100%) !important;
  border: 3px solid #ffe600 !important;
  box-shadow: 0 0 35px rgba(255, 230, 0, 0.4) !important;
}

.raid-modal-header {
  text-align: center;
  margin-bottom: 12px;
}

.raid-badge-tag {
  display: inline-block;
  padding: 3px 12px;
  background: linear-gradient(90deg, #ff0055, #ffe600);
  color: #000;
  font-weight: 900;
  font-size: 0.75rem;
  border-radius: 12px;
  margin-bottom: 6px;
  box-shadow: 0 0 10px #ffe600;
}

.raid-card {
  background: linear-gradient(180deg, rgba(20, 25, 45, 0.95), rgba(10, 15, 30, 0.98));
  border: 2px solid #ffe600;
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

.raid-card:hover, .raid-card:active {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 0 25px rgba(255, 230, 0, 0.7);
  border-color: #fff;
}

.raid-boss-img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(255, 230, 0, 0.7));
}

.raid-phase-badge {
  display: inline-block;
  padding: 2px 8px;
  background: #ff0055;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
  border-radius: 8px;
  margin-left: 6px;
  animation: blink-soft 0.9s infinite;
}

.raid-berserk-aura {
  animation: raid-berserk-pulse 0.7s infinite alternate !important;
}

@keyframes raid-berserk-pulse {
  0% { filter: drop-shadow(0 0 15px #ff0055); transform: scale(1); }
  100% { filter: drop-shadow(0 0 35px #ffe600) drop-shadow(0 0 50px #ff0055); transform: scale(1.08); }
}

/* Phase 7: 골드 / 이로치 포켓몬 이펙트 */
.shiny-sparkle-stars {
  position: absolute;
  inset: -10px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 230, 0, 0.35) 10%, transparent 65%);
  animation: shiny-sparkle-spin 2s linear infinite;
  z-index: 5;
}

@keyframes shiny-sparkle-spin {
  0% { transform: rotate(0deg) scale(0.95); opacity: 0.7; }
  50% { transform: rotate(180deg) scale(1.15); opacity: 1; filter: drop-shadow(0 0 10px #ffe600); }
  100% { transform: rotate(360deg) scale(0.95); opacity: 0.7; }
}

.shiny-gold-frame {
  border: 3px solid #ffe600 !important;
  box-shadow: 0 0 20px #ffe600, 0 0 35px rgba(255, 165, 0, 0.6) !important;
  animation: shiny-frame-sheen 2.5s infinite linear;
}

@keyframes shiny-frame-sheen {
  0% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(30deg) brightness(1.2); }
  100% { filter: hue-rotate(0deg); }
}

.shiny-gold-badge {
  display: inline-block;
  padding: 2px 7px;
  background: linear-gradient(90deg, #ffe600, #ff8800);
  color: #000;
  font-size: 0.68rem;
  font-weight: 900;
  border-radius: 6px;
  box-shadow: 0 0 8px #ffe600;
}

/* Phase 7: 카드 다운로드/저장 버튼 */
.export-card-btn {
  width: 100%;
  margin-top: 10px;
  padding: 10px 14px;
  background: linear-gradient(90deg, #0984e3, #00cec9);
  border: 2px solid #00cec9;
  border-radius: 10px;
  color: #fff;
  font-weight: 900;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0, 206, 201, 0.35);
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
}

.export-card-btn:hover, .export-card-btn:active {
  transform: translateY(-2px);
  background: linear-gradient(90deg, #00cec9, #0984e3);
  box-shadow: 0 6px 18px rgba(0, 206, 201, 0.6);
}

/* Phase 8 (#30): 슈퍼스타 피니시 연타 모달 (Finishing Rush) */
.finishing-rush-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(15, 5, 25, 0.88), rgba(0, 0, 5, 0.96));
  z-index: 1000;
  backdrop-filter: blur(5px);
  animation: finishing-overlay-fade 0.25s ease-out;
}

@keyframes finishing-overlay-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.finishing-rush-cabinet {
  max-width: 440px;
  width: 90%;
  background: radial-gradient(circle at center, #230b3b 0%, #0c0414 100%);
  border: 3px solid #ffe600;
  border-radius: 24px;
  padding: 22px 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(255, 230, 0, 0.55), inset 0 0 20px rgba(255, 0, 85, 0.3);
}

.finishing-halo-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  margin-top: -250px;
  margin-left: -250px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 230, 0, 0.2) 0%, transparent 65%);
  animation: finishing-halo-spin 6s linear infinite;
  z-index: 1;
}

@keyframes finishing-halo-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.finishing-tag-title {
  position: relative;
  z-index: 2;
  display: inline-block;
  padding: 3px 14px;
  background: linear-gradient(90deg, #ff0055, #ffe600);
  color: #000;
  font-size: 0.78rem;
  font-weight: 900;
  border-radius: 12px;
  box-shadow: 0 0 12px #ffe600;
  margin-bottom: 6px;
}

.finishing-main-heading {
  position: relative;
  z-index: 2;
  font-size: 1.55rem;
  font-weight: 900;
  color: #ffe600;
  text-shadow: 0 0 15px rgba(255, 230, 0, 0.8), 0 0 30px #ff0055;
  margin: 4px 0 2px;
}

.finishing-sub-hint {
  position: relative;
  z-index: 2;
  font-size: 0.82rem;
  color: #ccc;
  margin-bottom: 12px;
}

.finishing-rush-zone {
  position: relative;
  z-index: 2;
  width: 150px;
  height: 150px;
  margin: 10px auto;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff4757 0%, #b33939 65%, #6a1a1a 100%);
  border: 4px solid #ffe600;
  box-shadow: 0 0 25px rgba(255, 71, 87, 0.8), inset 0 0 15px rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: transform 0.05s ease;
  animation: finishing-zone-pulse 1.2s infinite alternate;
}

@keyframes finishing-zone-pulse {
  0% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 71, 87, 0.7); }
  100% { transform: scale(1.05); box-shadow: 0 0 35px #ffe600, 0 0 50px rgba(255, 0, 85, 0.8); }
}

.finishing-rush-zone:active {
  transform: scale(0.92) !important;
  box-shadow: 0 0 40px #ffe600 !important;
}

.finishing-tap-icon {
  font-size: 2.2rem;
  filter: drop-shadow(0 0 8px #ffe600);
}

.finishing-tap-txt {
  font-weight: 900;
  font-size: 0.95rem;
  color: #ffe600;
  text-shadow: 0 0 8px #000;
  letter-spacing: 1px;
}

.finishing-hit-counter {
  font-weight: 900;
  font-size: 1.15rem;
  color: #fff;
  text-shadow: 0 0 10px #ffe600, 0 0 15px #ff0055;
  margin-top: 2px;
}

.finishing-gauge-wrap {
  position: relative;
  z-index: 2;
  margin-top: 14px;
}

.finishing-meter-rail {
  height: 18px;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 12px;
  border: 2px solid rgba(255, 230, 0, 0.5);
  overflow: hidden;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);
}

.finishing-meter-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #f1c40f, #ff0077, #00f2fe);
  border-radius: 10px;
  box-shadow: 0 0 15px #ffe600;
  transition: width 0.06s ease-out;
}

.finishing-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-size: 0.88rem;
  font-weight: 900;
}

.finishing-bonus-txt {
  color: #00ff88;
  text-shadow: 0 0 8px #00ff88;
}

.finishing-timer-txt {
  color: #ff0055;
  text-shadow: 0 0 8px #ff0055;
}

/* KO 폭발 배너 */
.finishing-ko-banner {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(30, 8, 45, 0.98), rgba(8, 2, 16, 0.99));
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  animation: finishing-ko-appear 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes finishing-ko-appear {
  0% { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.ko-burst-star {
  font-size: 3.6rem;
  filter: drop-shadow(0 0 25px #ffe600);
  animation: finishing-star-spin 0.6s infinite alternate;
}

@keyframes finishing-star-spin {
  0% { transform: scale(1) rotate(-8deg); }
  100% { transform: scale(1.15) rotate(8deg); }
}

.ko-title {
  font-size: 1.65rem;
  font-weight: 900;
  color: #ffe600;
  text-shadow: 0 0 20px #ffe600, 0 0 35px #ff0055;
  margin: 8px 0 4px;
}

.ko-bonus-score {
  font-size: 1.45rem;
  font-weight: 900;
  color: #00ff88;
  text-shadow: 0 0 15px #00ff88;
}

/* Phase 8 (#34): 아케이드 풀스크린 캐비닛 스킨 모드 */
body.arcade-cabinet-mode #arcade-machine {
  border: 4px solid #ffe600;
  box-shadow: 0 0 50px rgba(255, 230, 0, 0.45), 0 0 80px rgba(0, 206, 201, 0.3), inset 0 0 25px rgba(255, 0, 85, 0.25);
  border-radius: 18px;
  position: relative;
}

body.arcade-cabinet-mode #arcade-header {
  border-bottom: 3px solid #ffe600;
  box-shadow: 0 4px 20px rgba(255, 230, 0, 0.4);
  background: linear-gradient(180deg, #1f0b35 0%, #0c0414 100%);
}

body.arcade-cabinet-mode #arcade-controls {
  border-top: 3px solid #00cec9;
  box-shadow: 0 -4px 20px rgba(0, 206, 201, 0.35);
  background: linear-gradient(0deg, #100520 0%, #06020c 100%);
}

/* Phase 8 (#34): 환경설정 (세부 볼륨 & 캐비닛) 모달 */
.settings-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
  animation: settings-fade-in 0.2s ease-out;
}

@keyframes settings-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.settings-cabinet {
  max-width: 480px;
  width: 92%;
  background: radial-gradient(circle at center, #1e1338 0%, #0b0716 100%);
  border: 3px solid #00cec9;
  border-radius: 20px;
  box-shadow: 0 0 35px rgba(0, 206, 201, 0.5), inset 0 0 20px rgba(255, 230, 0, 0.2);
  padding: 22px;
  color: #fff;
}

.settings-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 12px;
  margin-bottom: 16px;
  position: relative;
}

.settings-badge-tag {
  position: absolute;
  top: -14px;
  left: 0;
  padding: 2px 10px;
  background: linear-gradient(90deg, #00cec9, #0984e3);
  color: #000;
  font-size: 0.7rem;
  font-weight: 900;
  border-radius: 10px;
}

.settings-modal-header h2 {
  font-size: 1.3rem;
  font-weight: 900;
  color: #ffe600;
  text-shadow: 0 0 10px rgba(255, 230, 0, 0.5);
  margin: 6px 0 0;
}

.settings-section {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
}

.settings-section-title {
  font-size: 0.95rem;
  font-weight: 900;
  color: #00cec9;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.settings-slider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.settings-slider-row:last-child {
  margin-bottom: 0;
}

.settings-slider-label {
  font-size: 0.85rem;
  font-weight: 800;
  color: #e2e8f0;
  min-width: 125px;
}

.arcade-slider {
  flex: 1;
  height: 8px;
  border-radius: 6px;
  background: #2d3748;
  outline: none;
  cursor: pointer;
  accent-color: #00cec9;
  transition: opacity 0.2s;
}

.settings-slider-val {
  font-size: 0.85rem;
  font-weight: 900;
  color: #ffe600;
  min-width: 45px;
  text-align: right;
  font-family: monospace;
}

.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.settings-footer-hint {
  font-size: 0.72rem;
  color: #94a3b8;
  text-align: center;
  margin-top: 8px;
}

/* ========================================================
   Release Notes Modal (최상위 레이어 팝업)
   ======================================================== */
.release-notes-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999; /* 화면 최상위 레이어 보장 */
  backdrop-filter: blur(8px);
  animation: release-notes-fade-in 0.2s ease-out;
}

@keyframes release-notes-fade-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.release-notes-cabinet {
  max-width: 540px;
  width: 94%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at top center, #1e1338 0%, #0b0716 100%);
  border: 3px solid #ffe600;
  border-radius: 20px;
  box-shadow: 0 0 40px rgba(255, 230, 0, 0.5), inset 0 0 20px rgba(0, 206, 201, 0.25);
  padding: 20px;
  color: #fff;
  box-sizing: border-box;
}

.release-notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.release-badge-tag {
  font-size: 0.72rem;
  font-weight: 900;
  color: #00cec9;
  letter-spacing: 1px;
}

.release-notes-title {
  margin: 2px 0 0 0;
  font-size: 1.25rem;
  color: #ffe600;
  text-shadow: 0 0 10px rgba(255, 230, 0, 0.6);
}

.release-status-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 206, 201, 0.12);
  border: 1px solid rgba(0, 206, 201, 0.35);
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 0.82rem;
}

.release-status-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.status-live-dot {
  width: 10px;
  height: 10px;
  background: #00ff88;
  border-radius: 50%;
  box-shadow: 0 0 8px #00ff88;
  display: inline-block;
  animation: liveDotPulse 1.4s infinite alternate;
}

@keyframes liveDotPulse {
  0% { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.2); opacity: 1; }
}

.status-live-txt {
  color: #e2e8f0;
  font-weight: 700;
}

.status-version-pill {
  background: #ffe600;
  color: #111;
  font-weight: 900;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 12px;
  box-shadow: 0 0 8px rgba(255, 230, 0, 0.6);
}

.release-refresh-btn {
  font-size: 0.75rem !important;
  padding: 4px 10px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}
.release-refresh-btn:hover {
  background: rgba(0, 206, 201, 0.3) !important;
  border-color: #00cec9 !important;
}

.release-notes-scroll {
  overflow-y: auto;
  max-height: 52vh;
  padding-right: 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: #ffe600 rgba(255, 255, 255, 0.08);
}

.version-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 12px 14px;
  transition: all 0.2s;
}

.version-card-latest {
  background: radial-gradient(circle at top left, rgba(255, 230, 0, 0.12) 0%, rgba(0, 206, 201, 0.06) 100%);
  border: 2px solid #ffe600;
  box-shadow: 0 0 16px rgba(255, 230, 0, 0.3);
}

.version-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
  padding-bottom: 6px;
}

.version-tag {
  font-weight: 900;
  font-size: 1.05rem;
  color: #fff;
}

.version-badge-latest {
  background: linear-gradient(90deg, #ff007f, #ffe600);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(255, 0, 127, 0.6);
}

.version-badge-past {
  background: rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 10px;
}

.version-date {
  margin-left: auto;
  font-size: 0.75rem;
  color: #94a3b8;
}

.version-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.version-feature-item {
  font-size: 0.84rem;
  line-height: 1.45;
  color: #e2e8f0;
}

.feature-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 6px;
  margin-right: 4px;
  vertical-align: middle;
}

.feature-tag.tag-new {
  background: linear-gradient(90deg, #ff007f, #ffe600);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 0 10px rgba(255, 0, 127, 0.75);
  animation: new-badge-glow 1.5s infinite alternate;
}
.feature-tag.tag-new-item { background: #00d2ff; color: #000; font-weight: 800; }
.feature-tag.tag-jackpot { background: #ffd700; color: #000; font-weight: 900; }
.feature-tag.tag-audio { background: #a29bfe; color: #111; }
.feature-tag.tag-raid { background: #ff7675; color: #fff; }
.feature-tag.tag-shiny { background: #ffeaa7; color: #000; }
.feature-tag.tag-improve { background: #55efc4; color: #000; }
.feature-tag.tag-system { background: #74b9ff; color: #000; }

.update-title {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.update-issue-tag {
  background: rgba(255, 230, 0, 0.18);
  border: 1px solid rgba(255, 230, 0, 0.5);
  color: #ffe600;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 6px;
  margin-left: 2px;
}

.version-card.is-new-deployed {
  background: radial-gradient(circle at top left, rgba(255, 230, 0, 0.15) 0%, rgba(255, 0, 127, 0.08) 100%);
  border: 2px solid #ffe600;
  box-shadow: 0 0 18px rgba(255, 230, 0, 0.35);
}

.status-live-pill {
  background: linear-gradient(90deg, #00ff88, #00d2ff) !important;
  color: #000 !important;
  font-weight: 900 !important;
  box-shadow: 0 0 10px #00ff88 !important;
}

@keyframes new-badge-glow {
  0% { transform: scale(0.95); box-shadow: 0 0 4px rgba(255, 0, 127, 0.5); }
  100% { transform: scale(1.05); box-shadow: 0 0 12px rgba(255, 230, 0, 0.9); }
}

.release-notes-footer {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

/* ==========================================================================
   Issue #32: 배틀 시작 전 행운의 룰렛 랜덤 버프 시스템
   ========================================================================== */
.lucky-buff-overlay {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 22, 0.88);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 120;
}

.lucky-buff-cabinet {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.96));
  border: 3px solid #ffcc00;
  border-radius: 20px;
  box-shadow: 0 0 35px rgba(255, 204, 0, 0.5), inset 0 0 20px rgba(255, 204, 0, 0.15);
  padding: 18px 22px;
  max-width: 440px;
  width: 92%;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.lucky-buff-glow-ring {
  position: absolute;
  top: -40%;
  left: -40%;
  width: 180%;
  height: 180%;
  background: radial-gradient(circle, rgba(255, 204, 0, 0.12) 0%, transparent 60%);
  pointer-events: none;
  animation: lucky-glow-spin 12s linear infinite;
}

@keyframes lucky-glow-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.lucky-buff-header {
  position: relative;
  z-index: 2;
  margin-bottom: 12px;
}

.lucky-badge-tag {
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #ffe600;
  text-shadow: 0 0 8px rgba(255, 230, 0, 0.8);
  margin-bottom: 4px;
}

.lucky-buff-title {
  font-size: 1.45rem;
  font-weight: 900;
  margin: 4px 0;
  background: linear-gradient(90deg, #ffe600, #ff8800, #00d2ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 15px rgba(255, 200, 0, 0.4);
}

.lucky-buff-sub {
  font-size: 0.8rem;
  color: #cbd5e1;
  margin-top: 4px;
}

.lucky-buff-frame {
  position: relative;
  z-index: 2;
  margin: 10px 0;
}

.lucky-buff-pointer {
  font-size: 1.25rem;
  color: #ffe600;
  filter: drop-shadow(0 0 6px #ffe600);
  margin-bottom: 4px;
  animation: pointer-bounce 0.6s ease-in-out infinite alternate;
}

@keyframes pointer-bounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(5px); }
}

.lucky-buff-slots-track {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.lucky-buff-card {
  padding: 10px 8px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: rgba(15, 23, 42, 0.75);
  transition: all 0.15s ease;
  user-select: none;
}

.lucky-card-icon {
  font-size: 1.5rem;
  margin-bottom: 4px;
}

.lucky-card-name {
  font-size: 0.88rem;
  font-weight: 900;
  margin-bottom: 2px;
}

.lucky-card-desc {
  font-size: 0.7rem;
  color: #94a3b8;
  line-height: 1.25;
}

.lucky-buff-card.active {
  border-color: #ffe600;
  background: linear-gradient(135deg, rgba(255, 230, 0, 0.25), rgba(255, 136, 0, 0.2));
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(255, 230, 0, 0.6);
}

.lucky-buff-card.selected-winner {
  border-color: #00ff88;
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.35), rgba(0, 210, 255, 0.25));
  transform: scale(1.08);
  box-shadow: 0 0 25px rgba(0, 255, 136, 0.85);
  animation: winner-glow 0.8s infinite alternate;
}

@keyframes winner-glow {
  0% { box-shadow: 0 0 15px rgba(0, 255, 136, 0.6); }
  100% { box-shadow: 0 0 30px rgba(0, 255, 136, 1); }
}

.lucky-buff-result-card {
  position: relative;
  z-index: 2;
  margin: 12px 0 6px;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(0, 255, 136, 0.18), rgba(0, 210, 255, 0.18));
  border: 1.5px solid #00ff88;
  border-radius: 12px;
  animation: result-fade-in 0.3s ease-out;
}

@keyframes result-fade-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.lucky-result-pill {
  display: inline-block;
  background: #00ff88;
  color: #051329;
  font-weight: 900;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 4px;
}

.lucky-result-title {
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
}

.lucky-result-desc {
  font-size: 0.78rem;
  color: #cbd5e1;
  margin-top: 2px;
}

.lucky-buff-controls {
  position: relative;
  z-index: 2;
  margin-top: 12px;
}

.lucky-roulette-stop-btn {
  background: linear-gradient(180deg, #ff4757, #c0392b);
  border: 2px solid #ff6b81;
  border-radius: 30px;
  font-weight: 900;
  font-size: 1.05rem;
  padding: 11px 28px;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(255, 71, 87, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.3);
  transition: transform 0.1s, box-shadow 0.1s;
}

.lucky-roulette-stop-btn:active {
  transform: scale(0.96);
  box-shadow: 0 0 10px rgba(255, 71, 87, 0.4);
}

.lucky-roulette-stop-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

/* 상단 HUD 버프 상태 배지 */
.lucky-buff-hud-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 900;
  background: linear-gradient(90deg, rgba(255, 204, 0, 0.35), rgba(255, 136, 0, 0.35));
  border: 1.5px solid #ffcc00;
  box-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
  color: #fff;
  white-space: nowrap;
  animation: hud-buff-pulse 2s infinite ease-in-out;
}

.lucky-buff-hud-pill.buff-consumed {
  opacity: 0.5;
  filter: grayscale(0.5);
  animation: none;
  border-color: #64748b;
  box-shadow: none;
  background: rgba(100, 116, 139, 0.3);
}

@keyframes hud-buff-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(255, 204, 0, 0.4); }
  50% { transform: scale(1.05); box-shadow: 0 0 16px rgba(255, 204, 0, 0.7); }
}

/* Issue #33: 무한 배틀 타워 서바이벌 모드 스타일 */
.tower-crimson-btn {
  background: linear-gradient(135deg, #800020, #c0392b, #8e44ad) !important;
  border: 3px solid #ff0055 !important;
  box-shadow: 0 0 20px rgba(255, 0, 85, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.4) !important;
  animation: tower-btn-glow 1.6s infinite alternate !important;
}

@keyframes tower-btn-glow {
  0% { transform: scale(1); box-shadow: 0 0 14px rgba(255, 0, 85, 0.5); }
  100% { transform: scale(1.04); box-shadow: 0 0 28px rgba(255, 0, 85, 0.9), 0 0 42px rgba(142, 68, 173, 0.7); }
}

.header-tower-btn {
  border-color: #ff007f !important;
  color: #ffb3d9 !important;
}

.header-tower-btn:hover {
  background: rgba(255, 0, 127, 0.25) !important;
  box-shadow: 0 0 12px rgba(255, 0, 127, 0.6) !important;
}

.tower-modal {
  background: radial-gradient(circle at center, rgba(35, 10, 25, 0.96) 0%, rgba(10, 5, 15, 0.98) 100%) !important;
  border: 3px solid #ff0055 !important;
  box-shadow: 0 0 35px rgba(255, 0, 85, 0.45) !important;
}

.tower-modal-header {
  text-align: center;
  margin-bottom: 12px;
}

.tower-badge-tag {
  display: inline-block;
  padding: 3px 14px;
  background: linear-gradient(90deg, #ff0055, #9b59b6);
  color: #fff;
  font-weight: 900;
  font-size: 0.78rem;
  border-radius: 12px;
  margin-bottom: 6px;
  box-shadow: 0 0 10px #ff0055;
  letter-spacing: 0.5px;
}

.tower-subtitle {
  font-size: 0.8rem;
  color: #f472b6;
  margin: 4px 0 0 0;
}

.tower-stats-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 480px;
  margin: 10px auto;
}

.tower-stat-card {
  background: rgba(20, 10, 30, 0.85);
  border: 1.5px solid rgba(255, 0, 85, 0.4);
  border-radius: 10px;
  padding: 8px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tower-stat-label {
  font-size: 0.68rem;
  color: #94a3b8;
  font-weight: 700;
}

.tower-stat-value {
  font-size: 1.05rem;
  font-weight: 900;
  color: #ffe600;
}

.tower-rules-card {
  background: rgba(15, 10, 25, 0.75);
  border: 1px solid rgba(255, 0, 85, 0.3);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 8px auto 14px auto;
  max-width: 480px;
  width: 100%;
  text-align: left;
}

.tower-rules-title {
  font-size: 0.85rem;
  color: #ffe600;
  font-weight: 900;
  margin: 0 0 6px 0;
}

.tower-rules-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.75rem;
  color: #cbd5e1;
  line-height: 1.4;
}

.tower-rules-list strong {
  color: #ff79c6;
}

.tower-btn-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}