/* ============================================================
   2D Simultaneous Shooter - Cheerful Toy Pop Stylesheet
   ============================================================ */

:root {
  --bg-color: #0284c7;
  --panel-bg: #0369a1;
  --cyan-glow: #0284c7;
  --cyan-bright: #38bdf8;
  --cyan-dark: #0369a1;
  --red-glow: #f43f5e;
  --gold-glow: #f59e0b;
  --orange-glow: #f97316;
  --purple-glow: #8b5cf6;
  --green-glow: #10b981;
  --text-main: #ffffff;
  --text-dim: #e0f2fe;
  --border-glow: rgba(255, 255, 255, 0.25);
  --font-title: 'M PLUS Rounded 1c', sans-serif;
  --font-main: 'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-desc: 'Zen Kaku Gothic New', sans-serif;
}

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

.hidden {
  display: none !important;
}

html, body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background-color: #0284c7;
  font-family: var(--font-main);
  color: var(--text-main);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.15s ease-out;
}

/* Outer layout wrapper */
#game-wrapper {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 50%, #818cf8 100%);
  overflow: hidden;
}

/* 9:16 Aspect Ratio Container */
#game-container {
  position: relative;
  width: min(100vw, calc(100dvh * 9 / 16));
  height: min(100dvh, calc(100vw * 16 / 9));
  aspect-ratio: 9 / 16;
  container-type: inline-size;
  background: #0284c7;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(7, 89, 133, 0.5), 0 0 0 3px rgba(255, 255, 255, 0.4);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

/* Canvas Element */
#gameCanvas,
#game-canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* Overlay Layers */
.overlay-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.overlay-layer.hidden {
  pointer-events: none;
}

/* ============================================================
   Start Screen (Ultra-Bright, Colorful & Cheerful Pop Style)
   ============================================================ */
#start-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('assets/title_bg.webp?v=556.0') center center / cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: min(7.5cqw, 30px) min(4.5cqw, 18px) min(5cqw, 20px);
  pointer-events: auto;
  overflow-y: auto;
  z-index: 10;
  box-sizing: border-box;
}

#start-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(2, 132, 199, 0.15) 0%, rgba(2, 132, 199, 0) 35%, rgba(14, 165, 233, 0.25) 70%, rgba(2, 132, 199, 0.70) 100%);
  pointer-events: none;
  z-index: 0;
}

.logo-container,
.menu-actions {
  position: relative;
  z-index: 1;
}

.logo-container {
  text-align: center;
  margin-top: min(14.0cqw, 58px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.game-badge {
  display: inline-block;
  white-space: nowrap !important;
  font-size: min(2.7cqw, 0.64rem);
  font-weight: 900;
  letter-spacing: min(0.4cqw, 1.2px);
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  border: min(0.5cqw, 1.8px) solid #ffffff;
  padding: min(0.6cqw, 2.5px) min(2.8cqw, 12px);
  border-radius: 999px;
  margin-top: min(1.0cqw, 4px);
  margin-bottom: 2px;
  box-shadow: 0 min(0.5cqw, 2px) 0 #0369a1, 0 min(1.0cqw, 4px) min(2.5cqw, 10px) rgba(2, 132, 199, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  z-index: 2;
  flex-shrink: 0;
}

.game-logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: min(92cqw, 380px);
  margin: 0 auto;
  filter: drop-shadow(0 min(2cqw, 8px) min(5cqw, 20px) rgba(15, 23, 42, 0.35)) drop-shadow(0 min(0.5cqw, 2px) min(1cqw, 4px) rgba(0, 0, 0, 0.2));
  animation: logoFloat 2.6s ease-in-out infinite alternate;
}

.game-logo-img {
  width: 98%;
  max-width: min(90cqw, 370px);
  height: auto;
  object-fit: contain;
  display: block;
}

@keyframes logoFloat {
  0% { transform: translateY(0px); }
  100% { transform: translateY(min(-2cqw, -8px)); }
}

/* Touch to Start Overlay (Clean Minimal White Neon Pulsing Text in Center) */
.touch-to-start-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  user-select: none;
  background: transparent;
}

.touch-to-start-text {
  font-family: var(--font-title);
  white-space: nowrap !important;
  font-size: min(5.4cqw, 1.45rem);
  font-weight: 900;
  letter-spacing: min(0.6cqw, 2.2px);
  color: #ffffff;
  text-align: center;
  max-width: 90cqw;
  animation: touchBreathe 2.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes touchBreathe {
  0% {
    opacity: 0.62;
    transform: scale(0.97);
    text-shadow: 0 0 min(2cqw, 8px) rgba(255, 255, 255, 0.6), 0 0 min(4cqw, 16px) rgba(56, 189, 248, 0.4);
  }
  50% {
    opacity: 1;
    transform: scale(1.03);
    text-shadow: 0 0 min(3cqw, 14px) rgba(255, 255, 255, 1), 0 0 min(6cqw, 26px) rgba(56, 189, 248, 0.9), 0 0 min(9cqw, 38px) rgba(56, 189, 248, 0.6);
  }
  100% {
    opacity: 0.62;
    transform: scale(0.97);
    text-shadow: 0 0 min(2cqw, 8px) rgba(255, 255, 255, 0.6), 0 0 min(4cqw, 16px) rgba(56, 189, 248, 0.4);
  }
}

.menu-actions {
  width: min(84cqw, 300px);
  display: flex;
  flex-direction: column;
  gap: min(2.0cqw, 8px);
  margin-bottom: min(2.0cqw, 8px);
  animation: menuPopIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  box-sizing: border-box;
}

@keyframes menuPopIn {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(12px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Colorful 3D Candy Buttons */
.glow-button {
  position: relative;
  width: 100%;
  padding: min(2.8cqw, 11px) min(4.5cqw, 18px);
  font-family: var(--font-title);
  font-size: min(4.8cqw, 1.20rem);
  letter-spacing: min(0.3cqw, 0.8px);
  font-weight: 900;
  border: none;
  border-radius: min(4.0cqw, 16px);
  cursor: pointer;
  outline: none;
  transition: all 0.10s ease;
  transform: translateY(0);
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.glow-button span {
  white-space: nowrap !important;
  display: block !important;
  width: 100% !important;
  max-width: 100%;
  text-align: center !important;
  margin: 0 auto !important;
}

.main-play-btn {
  background: linear-gradient(180deg, #34d399 0%, #10b981 50%, #059669 100%);
  color: #ffffff;
  box-shadow: 0 min(1.2cqw, 5px) 0 #047857, 0 min(2cqw, 8px) min(5cqw, 20px) rgba(16, 185, 129, 0.4);
  border-top: min(0.5cqw, 2px) solid rgba(255, 255, 255, 0.5);
}

.main-play-btn:active {
  transform: translateY(min(1.0cqw, 4px));
  box-shadow: 0 min(0.3cqw, 1px) 0 #047857, 0 min(0.8cqw, 3px) min(2cqw, 8px) rgba(16, 185, 129, 0.3);
}

.menu-main-btn-row {
  display: flex !important;
  gap: min(2.5cqw, 10px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.menu-main-btn-row .glow-button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: min(2.6cqw, 10px) min(2.0cqw, 8px) !important;
  font-size: min(3.8cqw, 1.02rem) !important;
}

.menu-main-btn-row .glow-button span {
  font-size: inherit;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

.arcade-btn {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 50%, #075985 100%);
  color: #ffffff;
  box-shadow: 0 min(1.2cqw, 5px) 0 #0c4a6e, 0 min(2cqw, 8px) min(5cqw, 20px) rgba(2, 132, 199, 0.45);
  border-top: min(0.5cqw, 2px) solid rgba(255, 255, 255, 0.5);
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow: hidden;
}

.arcade-btn:active {
  transform: translateY(min(1.0cqw, 4px));
  box-shadow: 0 min(0.3cqw, 1px) 0 #0c4a6e, 0 min(0.8cqw, 3px) min(2cqw, 8px) rgba(2, 132, 199, 0.3);
}

.endless-btn {
  background: linear-gradient(180deg, #a855f7 0%, #8b5cf6 50%, #7c3aed 100%);
  color: #ffffff;
  box-shadow: 0 min(1.2cqw, 5px) 0 #5b21b6, 0 min(2cqw, 8px) min(5cqw, 20px) rgba(139, 92, 246, 0.45);
  border-top: min(0.5cqw, 2px) solid rgba(255, 255, 255, 0.5);
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow: hidden;
}

.endless-btn:active {
  transform: translateY(min(1.0cqw, 4px));
  box-shadow: 0 min(0.3cqw, 1px) 0 #4c1d95, 0 min(0.8cqw, 3px) min(2cqw, 8px) rgba(124, 58, 237, 0.3);
}

.arcade-start-btn {
  background: linear-gradient(180deg, #a855f7 0%, #8b5cf6 50%, #7c3aed 100%);
  color: #ffffff;
  box-shadow: 0 min(1.2cqw, 5px) 0 #5b21b6, 0 min(2cqw, 8px) min(5cqw, 20px) rgba(139, 92, 246, 0.4);
  border-top: min(0.5cqw, 2px) solid rgba(255, 255, 255, 0.5);
  font-size: min(4.2cqw, 1.1rem);
  padding: min(3.0cqw, 12px) min(4cqw, 16px);
}

.arcade-continue-btn {
  background: linear-gradient(180deg, #38bdf8 0%, #0ea5e9 50%, #0284c7 100%);
  color: #ffffff;
  box-shadow: 0 min(1.2cqw, 5px) 0 #0369a1, 0 min(2cqw, 8px) min(5cqw, 20px) rgba(14, 165, 233, 0.4);
  border-top: min(0.5cqw, 2px) solid rgba(255, 255, 255, 0.5);
  font-size: min(4.2cqw, 1.1rem);
  padding: min(3.0cqw, 12px) min(4cqw, 16px);
}

.online-btn {
  background: linear-gradient(180deg, #f472b6 0%, #ec4899 50%, #db2777 100%);
  color: #ffffff;
  box-shadow: 0 min(1.2cqw, 5px) 0 #9d174d, 0 min(2cqw, 8px) min(5cqw, 20px) rgba(236, 72, 153, 0.4);
  border-top: min(0.5cqw, 2px) solid rgba(255, 255, 255, 0.5);
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow: hidden;
}

.online-btn:active {
  transform: translateY(min(1.0cqw, 4px));
  box-shadow: 0 min(0.3cqw, 1px) 0 #9d174d, 0 min(0.8cqw, 3px) min(2cqw, 8px) rgba(236, 72, 153, 0.3);
}

.online-btn.is-searching {
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 50%, #d97706 100%);
  box-shadow: 0 min(1.2cqw, 5px) 0 #b45309, 0 min(2cqw, 8px) min(5cqw, 20px) rgba(217, 119, 6, 0.4);
  animation: pulseMatching 1.2s infinite alternate ease-in-out;
  font-size: min(4.2cqw, 1.05rem);
}

@keyframes pulseMatching {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-2px) scale(1.02); }
}

.main-sub-btn {
  padding: min(2.2cqw, 9px) min(4cqw, 16px);
  font-size: min(3.4cqw, 0.88rem);
  font-weight: 900;
  background: rgba(15, 23, 42, 0.5);
  border: min(0.4cqw, 1.5px) solid rgba(255, 255, 255, 0.3);
  border-radius: min(3.5cqw, 14px);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 min(0.8cqw, 3px) 0 rgba(0, 0, 0, 0.25), 0 min(1cqw, 4px) min(2.5cqw, 10px) rgba(0, 0, 0, 0.2);
  transition: all 0.10s ease;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box;
}

.main-sub-btn span {
  white-space: nowrap !important;
  display: block !important;
  width: 100% !important;
  max-width: 100%;
  text-align: center !important;
  margin: 0 auto !important;
}

.main-sub-btn:active {
  transform: translateY(min(0.5cqw, 2px));
  box-shadow: 0 min(0.3cqw, 1px) 0 rgba(0, 0, 0, 0.25);
}

/* Separated Private Match Section */
.private-match-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: min(1cqw, 4px);
  margin-top: min(1cqw, 4px);
  background: rgba(15, 23, 42, 0.55);
  border: min(0.4cqw, 1.5px) solid rgba(255, 255, 255, 0.25);
  border-radius: min(3cqw, 12px);
  padding: min(1.8cqw, 8px) min(2.5cqw, 10px);
  box-shadow: 0 min(1cqw, 4px) min(2.5cqw, 12px) rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
}

.private-hint-text {
  font-size: min(2.2cqw, 0.62rem);
  color: #6ee7b7;
  letter-spacing: 0.4px;
  text-align: center;
  user-select: none;
  font-weight: bold;
}

.private-action-btn {
  width: 100%;
  height: min(7.5cqw, 32px);
  padding: 0 min(1.8cqw, 8px);
  font-size: min(2.6cqw, 0.76rem);
  font-weight: 800;
  border-radius: min(1.8cqw, 7px);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
}

.private-action-btn span {
  white-space: nowrap !important;
  display: inline-block;
  max-width: 100%;
}

.private-action-btn.create-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
}

.private-action-btn.create-btn.is-waiting {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid #10b981;
  color: #34d399;
  animation: pulseCode 1.5s infinite alternate ease-in-out;
}

.private-action-btn.create-btn:active {
  transform: scale(0.98);
}

.private-join-row {
  width: 100%;
  display: flex;
  gap: min(1.5cqw, 6px);
  align-items: center;
  box-sizing: border-box;
}

.private-input {
  flex: 1;
  min-width: 0;
  height: min(7.5cqw, 32px);
  background: #090e17;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: min(1.8cqw, 7px);
  padding: 0 min(1.5cqw, 6px);
  color: #ffffff;
  font-size: min(2.6cqw, 0.76rem);
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-family: var(--font-title);
  letter-spacing: 0.8px;
  outline: none;
  box-sizing: border-box;
}

.private-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
}

.private-action-btn.join-btn {
  width: auto;
  min-width: 0;
  padding: 0 min(2.5cqw, 10px);
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  border: 1px solid rgba(99, 102, 241, 0.4);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.25);
  flex-shrink: 0;
}

.private-action-btn.join-btn:active {
  transform: scale(0.98);
}

@keyframes pulseCode {
  0% { box-shadow: 0 0 6px rgba(16, 185, 129, 0.2); }
  100% { box-shadow: 0 0 14px rgba(16, 185, 129, 0.5); }
}

/* Matchmaking State */
.radar-core {
  font-size: 2rem;
  z-index: 2;
  animation: pulse 1.5s infinite alternate;
}

.radar-pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--cyan-glow);
  opacity: 0;
  animation: radar-wave 2s infinite cubic-bezier(0.1, 0.8, 0.3, 1);
}

.radar-pulse.delay-1 {
  animation-delay: 1s;
}

@keyframes radar-wave {
  0% { transform: scale(0.5); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

@keyframes pulse {
  0% { transform: scale(0.9); }
  100% { transform: scale(1.1); }
}

.matching-status {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cyan-glow);
  animation: blink 1.5s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.cancel-link {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
}

/* ============================================================
   In-Game HUD Overlay
   ============================================================ */
#game-ui {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Top HUD (Opponent Info Area: Y: 0 ~ 70) */
#top-hud {
  position: absolute;
  top: min(2cqw, 8px);
  left: min(3.5cqw, 14px);
  right: min(3.5cqw, 14px);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  pointer-events: auto;
  box-sizing: border-box;
}

.player-hud-card {
  display: flex;
  align-items: center;
  gap: min(2cqw, 8px);
  background: rgba(15, 23, 42, 0.90);
  padding: min(1.2cqw, 5px) min(3cqw, 12px);
  border-radius: min(4cqw, 16px);
  border: min(0.5cqw, 2px) solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 min(1cqw, 4px) min(3.5cqw, 14px) rgba(0, 0, 0, 0.5), 0 min(0.5cqw, 2px) 0 rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  position: relative;
  box-sizing: border-box;
}

.opponent-card {
  border-color: #fb7185;
}

.self-card {
  border-color: #38bdf8;
  flex: 1;
}

.hud-avatar {
  width: min(8cqw, 32px);
  height: min(8cqw, 32px);
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.self-avatar {
  background-image: url('assets/sk001.webp?v=23.8');
  border: min(0.5cqw, 2px) solid #38bdf8;
  box-shadow: 0 0 min(2cqw, 8px) rgba(56, 189, 248, 0.5);
}

.opp-avatar {
  background-image: url('assets/bot.webp?v=23.8');
  border: min(0.5cqw, 2px) solid #fb7185;
  box-shadow: 0 0 min(2cqw, 8px) rgba(251, 113, 133, 0.5);
}

.avatar-icon {
  display: none;
}

.hud-name {
  font-size: min(3cqw, 0.78rem);
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap !important;
}

.opponent-card .hud-name {
  color: #fb7185;
}

.self-card .hud-name {
  color: #38bdf8;
}

.hp-gauge {
  display: flex;
  gap: min(1cqw, 4px);
  margin-top: min(0.8cqw, 3px);
}

.hp-heart {
  width: min(3.5cqw, 14px);
  height: min(3.5cqw, 14px);
  border-radius: min(1cqw, 4px);
  background: rgba(255, 255, 255, 0.15);
  border: min(0.3cqw, 1px) solid rgba(255, 255, 255, 0.2);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.self-card .hp-heart.active {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
  box-shadow: 0 0 min(2cqw, 8px) rgba(56, 189, 248, 0.6);
  border-color: #7dd3fc;
}

.opponent-card .hp-heart.active {
  background: linear-gradient(180deg, #fb7185 0%, #e11d48 100%);
  box-shadow: 0 0 min(2cqw, 8px) rgba(251, 113, 133, 0.6);
  border-color: #fda4af;
}

.ready-badge {
  display: none;
  font-size: min(2.5cqw, 0.65rem);
  font-weight: 900;
  color: #ffffff;
  background: #10b981;
  border: min(0.4cqw, 1.5px) solid #ffffff;
  padding: min(0.5cqw, 2px) min(2cqw, 8px);
  border-radius: 999px;
  box-shadow: 0 min(0.5cqw, 2px) min(1.5cqw, 6px) rgba(16, 185, 129, 0.4);
  margin-left: min(1.5cqw, 6px);
  white-space: nowrap !important;
}

.ready-badge.visible {
  display: block;
}

/* Bottom HUD Panel */
#bottom-hud {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 28%;
  background: linear-gradient(180deg, rgba(2, 132, 199, 0.95) 0%, rgba(3, 105, 161, 0.98) 100%);
  border-top: min(0.8cqw, 3px) solid #fde047;
  border-radius: min(5.5cqw, 22px) min(5.5cqw, 22px) 0 0;
  padding: min(2cqw, 8px) min(3cqw, 12px) max(min(2cqw, 8px), env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: min(1.5cqw, 6px);
  box-shadow: 0 min(-2cqw, -8px) min(6cqw, 25px) rgba(2, 132, 199, 0.35);
  backdrop-filter: blur(8px);
  pointer-events: auto;
  z-index: 20;
  box-sizing: border-box;
}

/* Horizontal Time Bar */
#time-bar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: min(0.8cqw, 3px);
  margin-bottom: min(0.5cqw, 2px);
}

.time-phase-label,
#time-phase-label {
  width: 100%;
  text-align: center;
  font-family: var(--font-title);
  font-size: min(4.5cqw, 1.12rem);
  font-weight: 900;
  letter-spacing: 1px;
  color: #38bdf8;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  white-space: nowrap !important;
}

#time-phase-label.aim {
  color: #fde047;
  text-shadow: 0 0 8px rgba(253, 224, 71, 0.5);
}

#time-seconds,
#time-seconds-label {
  display: none;
}

.time-bar-bg,
.time-bar-track {
  width: 100%;
  height: min(2cqw, 8px);
  background: rgba(15, 23, 42, 0.65);
  border: min(0.4cqw, 1.5px) solid rgba(255, 255, 255, 0.40);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.time-bar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #34d399 0%, #10b981 100%);
  border-radius: 999px;
  box-shadow: 0 1px 6px rgba(16, 185, 129, 0.7);
  transition: width 1s linear, background 0.3s ease;
}

.time-bar-fill.aim {
  background: linear-gradient(90deg, #fde047 0%, #f59e0b 100%);
  box-shadow: 0 1px 6px rgba(245, 158, 11, 0.7);
}

.time-bar-fill.urgent {
  background: linear-gradient(90deg, #fb7185 0%, #e11d48 100%);
  box-shadow: 0 1px 6px rgba(225, 29, 72, 0.8);
}

/* Weapon Selector Row (4 Weapons) */
#weapon-selector,
#weapon-selector-row {
  display: flex;
  gap: min(1.2cqw, 5px);
  width: 100%;
  box-sizing: border-box;
}

.weapon-btn {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(1cqw, 4px);
  background: rgba(15, 23, 42, 0.55);
  border: min(0.4cqw, 1.5px) solid rgba(255, 255, 255, 0.35);
  border-radius: min(3cqw, 12px);
  padding: min(1.5cqw, 6px) min(1cqw, 4px);
  cursor: pointer;
  box-shadow: 0 min(0.75cqw, 3px) 0 rgba(0, 0, 0, 0.3);
  transition: all 0.10s ease;
  min-width: 0;
  box-sizing: border-box;
}

.weapon-btn:active {
  transform: translateY(min(0.5cqw, 2px));
  box-shadow: 0 min(0.3cqw, 1px) 0 rgba(0, 0, 0, 0.3);
}

.weapon-btn.active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(224, 242, 254, 0.88) 100%);
  border-color: #0284c7;
  box-shadow: 0 0 min(3.5cqw, 14px) rgba(56, 189, 248, 0.6), 0 min(0.75cqw, 3px) 0 #0284c7;
}

.weapon-btn.active .weapon-name {
  color: #0369a1;
  font-weight: 900;
}

.weapon-btn.active .weapon-desc {
  display: none !important;
}

.weapon-btn[data-weapon="SHOTGUN"].active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(254, 237, 213, 0.88) 100%);
  border-color: #ea580c;
  box-shadow: 0 0 min(3.5cqw, 14px) rgba(251, 146, 60, 0.6), 0 min(0.75cqw, 3px) 0 #c2410c;
}
.weapon-btn[data-weapon="SHOTGUN"].active .weapon-name {
  color: #c2410c;
  font-weight: 900;
}
.weapon-btn[data-weapon="SHOTGUN"].active .weapon-desc {
  display: none !important;
}

.weapon-btn[data-weapon="LASER"].active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(243, 232, 255, 0.88) 100%);
  border-color: #7c3aed;
  box-shadow: 0 0 min(3.5cqw, 14px) rgba(167, 139, 250, 0.6), 0 min(0.75cqw, 3px) 0 #6d28d9;
}
.weapon-btn[data-weapon="LASER"].active .weapon-name {
  color: #6d28d9;
  font-weight: 900;
}
.weapon-btn[data-weapon="LASER"].active .weapon-desc {
  display: none !important;
}

.weapon-btn[data-weapon="BOMB"].active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 228, 230, 0.88) 100%);
  border-color: #e11d48;
  box-shadow: 0 0 min(3.5cqw, 14px) rgba(251, 113, 133, 0.6), 0 min(0.75cqw, 3px) 0 #be123c;
}
.weapon-btn[data-weapon="BOMB"].active .weapon-name {
  color: #be123c;
  font-weight: 900;
}
.weapon-btn[data-weapon="BOMB"].active .weapon-desc {
  display: none !important;
}

.weapon-icon {
  font-size: min(3.5cqw, 0.90rem);
  line-height: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.weapon-icon-img {
  width: min(5cqw, 20px);
  height: min(5cqw, 20px);
  object-fit: cover;
  border-radius: min(1.2cqw, 5px);
  border: min(0.3cqw, 1px) solid rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

.slot-icon-img {
  width: min(7.5cqw, 30px);
  height: min(7.5cqw, 30px);
  object-fit: cover;
  border-radius: min(2cqw, 8px);
  border: min(0.4cqw, 1.5px) solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 min(0.5cqw, 2px) min(1.5cqw, 6px) rgba(0, 0, 0, 0.3);
}

.pal-icon-img {
  width: min(8.5cqw, 34px);
  height: min(8.5cqw, 34px);
  object-fit: cover;
  border-radius: min(2cqw, 8px);
  border: min(0.4cqw, 1.5px) solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 min(0.5cqw, 2px) min(1.5cqw, 6px) rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.weapon-info {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  flex: 1;
  text-align: center;
}

.weapon-name {
  font-family: var(--font-main);
  font-size: min(2.4cqw, 0.68rem);
  font-weight: 900;
  color: #ffffff;
  line-height: 1.1;
  white-space: nowrap;
  letter-spacing: -0.2px;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  display: block;
}

.weapon-desc {
  display: none !important;
}

.weapon-btn[data-weapon="SHOCK_BOMB"].active .weapon-name {
  color: #0369a1;
  font-weight: 900;
}

.weapon-btn[data-weapon="TURRET"].active .weapon-name,
.weapon-btn[data-weapon="TURRET_2"].active .weapon-name {
  color: #15803d;
  font-weight: 900;
}

.weapon-btn[data-weapon="ANTI_TURRET"].active .weapon-name {
  color: #be123c;
  font-weight: 900;
}

.weapon-btn[data-weapon="HP_BOOST"].active .weapon-name {
  color: #9d174d;
  font-weight: 900;
}

.weapon-btn[data-weapon="SPEED_BOOST"].active .weapon-name {
  color: #c2410c;
  font-weight: 900;
}

.weapon-btn[data-weapon="BOUNCE_BOOST"].active .weapon-name {
  color: #6d28d9;
  font-weight: 900;
}

.weapon-btn[data-weapon="BOUNCE_CHARGE"].active .weapon-name,
.weapon-btn[data-weapon="SNIPER_STANCE"].active .weapon-name {
  color: #0369a1;
  font-weight: 900;
}

.weapon-btn.disabled {
  opacity: 0.35;
  filter: grayscale(0.8);
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.05);
}

.weapon-btn.disabled::after {
  content: '設置中';
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: min(1.8cqw, 0.5rem);
  color: #ef4444;
  font-weight: 900;
}

.weapon-btn.disabled.cooldown::after {
  content: attr(data-badge);
  color: #38bdf8;
}

.weapon-btn.passive-btn {
  opacity: 1;
  filter: none;
  cursor: default;
  background: rgba(15, 23, 42, 0.5);
  border-color: rgba(255, 255, 255, 0.08);
}

.weapon-btn.passive-btn .weapon-icon,
.weapon-btn.passive-btn .weapon-name {
  opacity: 0.7;
}

.weapon-btn.passive-btn::after {
  display: none !important;
}

/* Weapon Selector Locked State (AIMフェーズ終了後・アクション実行中のグレーアウト) */
#weapon-selector-row.is-locked {
  pointer-events: none !important;
}

#weapon-selector-row.is-locked .weapon-btn {
  opacity: 0.38 !important;
  filter: grayscale(0.9) brightness(0.75) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
  transform: none !important;
}

#weapon-selector-row.is-locked .weapon-btn.active {
  opacity: 0.55 !important;
  filter: grayscale(0.85) brightness(0.85) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
}

#weapon-selector-row.is-locked .weapon-btn.active .weapon-name {
  color: #cbd5e1 !important;
}

.bottom-control-row {
  display: flex;
  gap: min(1.5cqw, 6px);
  align-items: center;
  box-sizing: border-box;
}

/* READY / OK Button */
.ready-btn {
  flex: 0 0 min(22cqw, 86px);
  height: min(9.5cqw, 38px);
  padding: 0 min(1.5cqw, 6px);
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(180deg, #34d399 0%, #10b981 50%, #059669 100%);
  color: #ffffff;
  font-family: var(--font-title);
  font-size: min(4.2cqw, 1.05rem);
  font-weight: 900;
  letter-spacing: 0.5px;
  border: none;
  border-radius: min(3.5cqw, 14px);
  cursor: pointer;
  box-shadow: 0 min(1cqw, 4px) 0 #047857, 0 min(1cqw, 4px) min(2.5cqw, 10px) rgba(16, 185, 129, 0.35);
  transition: all 0.10s ease;
  white-space: nowrap !important;
  box-sizing: border-box;
}

.ready-btn:active {
  transform: translateY(min(0.75cqw, 3px));
  box-shadow: 0 min(0.3cqw, 1px) 0 #047857;
}

.ready-btn.is-ready {
  background: rgba(30, 41, 59, 0.85);
  color: #94a3b8;
  box-shadow: 0 min(0.5cqw, 2px) 0 #0f172a;
  font-size: min(3.2cqw, 0.82rem);
  letter-spacing: 0.3px;
  border: min(0.4cqw, 1.5px) solid rgba(255, 255, 255, 0.15);
}

/* Guide text below */
#action-guide {
  text-align: center;
  font-size: min(2.6cqw, 0.70rem);
  font-weight: 700;
  color: #cbd5e1;
  white-space: nowrap !important;
}

/* Center Phase Overlay Announcement (Positioned exactly at Field Center Y: 485px / 37.9%) */
#phase-banner {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  z-index: 30;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none;
  transition: opacity 0.5s ease-out;
}

#phase-banner.hidden {
  opacity: 0;
  pointer-events: none;
}

#banner-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  animation: bannerTextPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

#phase-banner.hidden #banner-text {
  transform: scale(1.10);
  transition: transform 0.5s ease-out;
}

@keyframes bannerTextPop {
  0% {
    opacity: 0;
    transform: scale(0.60);
  }
  65% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.banner-turn {
  font-family: var(--font-title);
  font-size: min(4.5cqw, 1.35rem);
  font-weight: 900;
  letter-spacing: 2px;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.80);
  border: min(0.5cqw, 2px) solid #38bdf8;
  padding: min(0.8cqw, 3px) min(4cqw, 16px);
  border-radius: 999px;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap !important;
  box-shadow: 0 min(1cqw, 4px) min(3.5cqw, 14px) rgba(0, 0, 0, 0.5), 0 0 min(2.5cqw, 10px) rgba(56, 189, 248, 0.4);
}

.banner-phase {
  font-family: var(--font-title);
  font-size: min(9cqw, 2.7rem);
  font-weight: 900;
  letter-spacing: 1.5px;
  line-height: 1.05;
  color: #00f0ff;
  -webkit-text-stroke: min(0.8cqw, 3px) #ffffff;
  paint-order: stroke fill;
  text-align: center !important;
  text-shadow: 0 min(1cqw, 4px) 0 #0284c7, 0 min(2cqw, 8px) min(5cqw, 20px) rgba(0, 0, 0, 0.7), 0 0 min(6cqw, 25px) rgba(0, 240, 255, 0.6);
  filter: drop-shadow(0 min(0.8cqw, 3px) min(1.5cqw, 6px) rgba(0, 0, 0, 0.5));
}

.banner-phase.aim-color {
  color: #fde047;
  -webkit-text-stroke: min(0.8cqw, 3px) #ffffff;
  paint-order: stroke fill;
  text-shadow: 0 min(1cqw, 4px) 0 #d97706, 0 min(2cqw, 8px) min(5cqw, 20px) rgba(0, 0, 0, 0.7), 0 0 min(6cqw, 25px) rgba(253, 224, 71, 0.6);
}

.banner-phase.ready-text {
  color: #fb923c;
  -webkit-text-stroke: min(0.9cqw, 3.5px) #ffffff;
  paint-order: stroke fill;
  font-size: min(11cqw, 3.4rem);
  text-shadow: 0 min(1.2cqw, 5px) 0 #c2410c, 0 min(2cqw, 8px) min(5cqw, 20px) rgba(0, 0, 0, 0.7), 0 0 min(6cqw, 25px) rgba(251, 146, 60, 0.7);
}

.banner-phase.stage-start-text {
  font-size: min(7.2cqw, 2.3rem);
  letter-spacing: 1.5px;
  white-space: nowrap;
  color: #fde047;
  -webkit-text-stroke: min(0.75cqw, 2.8px) #ffffff;
  paint-order: stroke fill;
  text-shadow: 0 min(1.2cqw, 5px) 0 #d97706, 0 min(2cqw, 8px) min(5cqw, 20px) rgba(0, 0, 0, 0.7), 0 0 min(6cqw, 25px) rgba(253, 224, 71, 0.75);
}

.banner-phase.countdown-num {
  font-size: min(15cqw, 4.8rem);
  color: #fde047;
  -webkit-text-stroke: min(1cqw, 4px) #ffffff;
  paint-order: stroke fill;
  text-shadow: 0 min(1.5cqw, 6px) 0 #d97706, 0 min(2.5cqw, 10px) min(6cqw, 25px) rgba(0, 0, 0, 0.8), 0 0 min(7.5cqw, 30px) rgba(253, 224, 71, 0.8);
}

/* Floating Sound & Coin HUD (Top-Right candy neon rounded button & badge) */
#floating-sound-wrapper {
  position: absolute;
  top: min(2cqw, 8px);
  right: min(3.5cqw, 14px);
  z-index: 50;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: min(2cqw, 8px);
  transition: opacity 0.2s ease, transform 0.15s ease;
  box-sizing: border-box;
}

.coin-badge {
  display: flex;
  align-items: center;
  gap: min(1.2cqw, 5px);
  background: rgba(15, 23, 42, 0.78);
  border: min(0.4cqw, 1.5px) solid #fbbf24;
  border-radius: min(4.5cqw, 18px);
  padding: min(0.8cqw, 3px) min(2.5cqw, 10px) min(0.8cqw, 3px) min(1.5cqw, 6px);
  box-shadow: 0 min(0.5cqw, 2px) min(2cqw, 8px) rgba(0, 0, 0, 0.3), 0 0 min(2.5cqw, 10px) rgba(251, 191, 36, 0.3);
  backdrop-filter: blur(4px);
  user-select: none;
  box-sizing: border-box;
}
.coin-badge .coin-icon {
  font-size: min(3.8cqw, 1.1rem);
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.coin-badge .coin-val {
  font-family: var(--font-title);
  font-size: min(3.6cqw, 1.05rem);
  font-weight: 900;
  color: #fef08a;
  letter-spacing: 0.5px;
  white-space: nowrap !important;
}

/* Floating HUD Language Selector Button (Next to Sound Button) */
.lang-btn {
  height: min(8.5cqw, 36px);
  padding: 0 min(2.5cqw, 10px);
  border-radius: min(4.5cqw, 18px);
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: min(0.5cqw, 2px) solid rgba(56, 189, 248, 0.7);
  box-shadow: 0 min(1cqw, 4px) min(3cqw, 12px) rgba(0, 0, 0, 0.4), 0 0 min(2.5cqw, 10px) rgba(56, 189, 248, 0.35);
  color: #ffffff;
  display: none !important;
  justify-content: center;
  align-items: center;
  gap: min(1.2cqw, 5px);
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.15s ease;
  user-select: none;
  box-sizing: border-box;
}

/* Show language button ONLY on top screen (#start-screen:not(.hidden)) */
#game-container:has(#start-screen:not(.hidden)) .lang-btn {
  display: flex !important;
}

.lang-btn:hover {
  transform: scale(1.06);
  border-color: #38bdf8;
  box-shadow: 0 min(1cqw, 4px) min(4cqw, 16px) rgba(0, 0, 0, 0.5), 0 0 min(3cqw, 12px) rgba(56, 189, 248, 0.6);
}

.lang-btn:active {
  transform: scale(0.94);
}

.lang-btn .lang-globe-icon {
  font-size: min(3.5cqw, 1rem);
  line-height: 1;
}

.lang-btn .current-lang-label {
  font-family: var(--font-title);
  font-size: min(2.8cqw, 0.82rem);
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.5px;
}

/* Auto-hide floating sound & language buttons when full-screen modal overlays are open to prevent overlap with close [X] buttons */
#game-container:has(#online-mode-screen:not(.hidden)) #floating-sound-wrapper,
#game-container:has(#online-mode-screen:not(.hidden)) .title-lang-btn,
#game-container:has(#online-mode-screen:not(.hidden)) .lang-btn,
#game-container:has(#manual-screen:not(.hidden)) #floating-sound-wrapper,
#game-container:has(#manual-screen:not(.hidden)) .title-lang-btn,
#game-container:has(#manual-screen:not(.hidden)) .lang-btn,
#game-container:has(#arcade-modal-screen:not(.hidden)) #floating-sound-wrapper,
#game-container:has(#arcade-modal-screen:not(.hidden)) .title-lang-btn,
#game-container:has(#arcade-modal-screen:not(.hidden)) .lang-btn,
#game-container:has(#skin-modal:not(.hidden)) #floating-sound-wrapper,
#game-container:has(#skin-modal:not(.hidden)) .title-lang-btn,
#game-container:has(#skin-modal:not(.hidden)) .lang-btn,
#game-container:has(#gacha-modal:not(.hidden)) #floating-sound-wrapper,
#game-container:has(#gacha-modal:not(.hidden)) .title-lang-btn,
#game-container:has(#gacha-modal:not(.hidden)) .lang-btn,
#game-container:has(#guide-modal:not(.hidden)) #floating-sound-wrapper,
#game-container:has(#guide-modal:not(.hidden)) .title-lang-btn,
#game-container:has(#guide-modal:not(.hidden)) .lang-btn,
#game-container:has(#ranking-modal:not(.hidden)) #floating-sound-wrapper,
#game-container:has(#ranking-modal:not(.hidden)) .title-lang-btn,
#game-container:has(#ranking-modal:not(.hidden)) .lang-btn,
#game-container:has(#online-waiting-modal:not(.hidden)) #floating-sound-wrapper,
#game-container:has(#online-waiting-modal:not(.hidden)) .title-lang-btn,
#game-container:has(#online-waiting-modal:not(.hidden)) .lang-btn,
#game-container:has(#online-setup-modal:not(.hidden)) #floating-sound-wrapper,
#game-container:has(#online-setup-modal:not(.hidden)) .title-lang-btn,
#game-container:has(#online-setup-modal:not(.hidden)) .lang-btn,
#game-container:has(#level-bonus-modal:not(.hidden)) #floating-sound-wrapper,
#game-container:has(#level-bonus-modal:not(.hidden)) .title-lang-btn,
#game-container:has(#level-bonus-modal:not(.hidden)) .lang-btn {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#btn-sound {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: min(8.5cqw, 36px);
  height: min(8.5cqw, 36px);
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: min(0.5cqw, 2px) solid rgba(56, 189, 248, 0.7);
  box-shadow: 0 min(1cqw, 4px) min(3cqw, 12px) rgba(0, 0, 0, 0.4), 0 0 min(2.5cqw, 10px) rgba(56, 189, 248, 0.35);
  color: #ffffff;
  font-size: min(3.8cqw, 1.05rem);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.15s ease;
  user-select: none;
  box-sizing: border-box;
}

#btn-sound:hover {
  transform: scale(1.08);
  border-color: #38bdf8;
  box-shadow: 0 min(1cqw, 4px) min(4cqw, 16px) rgba(0, 0, 0, 0.5), 0 0 min(4cqw, 16px) rgba(56, 189, 248, 0.6);
}

#btn-sound:active {
  transform: scale(0.92);
}

.test-reset-btn {
  width: min(8.5cqw, 36px);
  height: min(8.5cqw, 36px);
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: min(0.5cqw, 2px) solid rgba(251, 191, 36, 0.7);
  box-shadow: 0 min(1cqw, 4px) min(3cqw, 12px) rgba(0, 0, 0, 0.4), 0 0 min(2.5cqw, 10px) rgba(251, 191, 36, 0.35);
  color: #ffffff;
  font-size: min(3.8cqw, 1.05rem);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.15s ease;
  user-select: none;
  box-sizing: border-box;
}

.test-reset-btn:hover {
  transform: scale(1.08);
  border-color: #fde047;
  box-shadow: 0 min(1cqw, 4px) min(4cqw, 16px) rgba(0, 0, 0, 0.5), 0 0 min(4cqw, 16px) rgba(251, 191, 36, 0.6);
}

.test-reset-btn:active {
  transform: scale(0.92);
}

/* ============================================================
   Result Overlay
   ============================================================ */
#result-screen {
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: min(4cqw, 16px);
  z-index: 100;
  pointer-events: auto;
  box-sizing: border-box;
}

.result-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: min(88cqw, 340px);
  text-align: center;
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
  border: min(0.8cqw, 3.5px) solid #38bdf8;
  border-radius: min(4.5cqw, 20px);
  padding: min(3.5cqw, 15px) min(3cqw, 14px) min(3.5cqw, 16px);
  box-shadow: 0 min(3cqw, 16px) min(8cqw, 40px) rgba(0, 0, 0, 0.5), 0 0 min(5cqw, 25px) rgba(56, 189, 248, 0.4);
  animation: bannerPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-sizing: border-box;
  color: #ffffff;
  max-height: 96vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.7) rgba(15, 23, 42, 0.5);
}

.result-content::-webkit-scrollbar {
  width: 4px;
}
.result-content::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.4);
  border-radius: 4px;
}
.result-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #38bdf8, #818cf8);
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.8);
}

.result-icon {
  font-size: min(12cqw, 3.8rem);
  margin-bottom: min(0.5cqw, 2px);
  animation: bounce 1s infinite alternate;
  line-height: 1;
}

@keyframes bounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(min(-1.5cqw, -6px)); }
}

.result-title {
  font-family: var(--font-title);
  font-size: min(9cqw, 2.8rem);
  font-weight: 900;
  letter-spacing: 1.5px;
  line-height: 1;
  margin-bottom: min(1.2cqw, 5px);
  display: inline-block;
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 10px rgba(245, 158, 11, 0.5));
  white-space: nowrap !important;
}

.result-title.victory {
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 50%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 10px rgba(245, 158, 11, 0.5));
}

.result-title.arcade-all-clear {
  font-size: min(5.2cqw, 1.6rem) !important;
  letter-spacing: 0.5px !important;
  line-height: 1.1 !important;
  max-width: 100% !important;
}

.result-title.defeat {
  background: linear-gradient(180deg, #f87171 0%, #ef4444 50%, #b91c1c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 10px rgba(239, 68, 68, 0.5));
}

.result-title.draw {
  background: linear-gradient(180deg, #7dd3fc 0%, #38bdf8 50%, #0284c7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 10px rgba(56, 189, 248, 0.5));
}

.result-desc {
  font-size: min(2.8cqw, 0.82rem);
  font-weight: 700;
  color: #e0f2fe;
  margin-bottom: min(2.5cqw, 10px);
  white-space: nowrap !important;
}

#result-standard-body {
  width: 100% !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box !important;
}

#result-standard-body.hidden {
  display: none !important;
}

.result-scores {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background: rgba(15, 23, 42, 0.5) !important;
  border: min(0.4cqw, 1.5px) solid rgba(56, 189, 248, 0.5) !important;
  border-radius: min(3.5cqw, 14px) !important;
  padding: min(2.2cqw, 9px) min(4cqw, 16px) !important;
  margin-bottom: min(2.5cqw, 10px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  box-sizing: border-box !important;
}

.score-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  min-width: 0 !important;
  flex: 1 1 0 !important;
  white-space: nowrap !important;
}

.score-label {
  font-size: min(2.5cqw, 0.74rem) !important;
  font-weight: 900 !important;
  color: #94a3b8 !important;
  letter-spacing: 0.8px !important;
  white-space: nowrap !important;
}

.score-val {
  font-family: var(--font-title) !important;
  font-size: min(6cqw, 1.7rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
}

#final-self-hp {
  color: #38bdf8;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}

#final-opp-hp {
  color: #f87171;
  text-shadow: 0 0 8px rgba(248, 113, 113, 0.6);
}

.score-vs {
  font-family: var(--font-title) !important;
  font-size: min(4cqw, 1.15rem) !important;
  font-weight: 900 !important;
  color: #64748b !important;
  line-height: 1 !important;
  padding: 0 min(3cqw, 12px) !important;
  flex-shrink: 0 !important;
}

.result-rule-badge {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(56, 189, 248, 0.6);
  color: #38bdf8;
  font-family: var(--font-title);
  font-size: min(2.8cqw, 0.80rem);
  font-weight: 800;
  padding: 3px 14px;
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
  margin-bottom: min(2cqw, 8px) !important;
}

/* Arcade Mode All Clear Special Rewards Display */
.result-arcade-clear-rewards {
  width: 100% !important;
  background: linear-gradient(180deg, rgba(30, 27, 75, 0.75) 0%, rgba(15, 23, 42, 0.85) 100%) !important;
  border: min(0.4cqw, 1.5px) solid #f59e0b !important;
  border-radius: min(3.5cqw, 14px) !important;
  padding: min(2cqw, 8px) min(3cqw, 12px) !important;
  margin-bottom: min(2.5cqw, 10px) !important;
  box-shadow: 0 0 min(3cqw, 14px) rgba(245, 158, 11, 0.35) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  animation: bannerPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.result-arcade-clear-rewards.hidden {
  display: none !important;
}

.arcade-clear-reward-title {
  font-family: var(--font-title);
  font-size: min(3cqw, 0.85rem);
  font-weight: 900;
  color: #fbbf24;
  letter-spacing: 1px;
  margin-bottom: min(1.5cqw, 6px);
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
  white-space: nowrap !important;
}

.arcade-clear-reward-grid {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: min(2cqw, 8px);
  width: 100%;
  box-sizing: border-box;
}

.arcade-clear-reward-item {
  display: flex !important;
  align-items: center !important;
  gap: min(1.8cqw, 7px);
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: min(2.5cqw, 10px);
  padding: min(1.2cqw, 5px) min(2cqw, 8px);
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
}

.clear-reward-thumb {
  width: min(7.5cqw, 30px);
  height: min(7.5cqw, 30px);
  border-radius: 50%;
  border: 1.5px solid #f59e0b;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
  object-fit: cover;
}

.clear-reward-icon {
  font-size: min(6cqw, 1.6rem);
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.6));
}

.clear-reward-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.clear-reward-type {
  font-size: min(1.6cqw, 0.48rem);
  font-weight: 800;
  color: #fde047;
  letter-spacing: 0.2px;
  line-height: 1.1;
  white-space: nowrap !important;
}

.clear-reward-name {
  font-family: var(--font-title);
  font-size: min(3cqw, 0.85rem);
  font-weight: 900;
  color: #ffffff;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 2-Column Reward Row (Earned Coins + Double Ad) */
.result-reward-row {
  display: flex;
  align-items: stretch;
  gap: min(1.8cqw, 8px);
  width: 100%;
  margin-bottom: min(1.5cqw, 6px);
  box-sizing: border-box;
}

.result-reward-row .result-coin-box,
.result-reward-row .result-level-box {
  flex: 1;
  margin: 0 !important;
  min-height: min(15cqw, 58px);
  padding: min(1.5cqw, 6px) min(1.2cqw, 5px);
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: min(0.8cqw, 3px) !important;
  min-width: 0;
  box-sizing: border-box;
}

.result-reward-row .reward-ad-btn.result-double-btn {
  flex: 1.15;
  margin: 0 !important;
  height: auto !important;
  min-height: min(15cqw, 58px) !important;
  padding: min(1cqw, 4px) min(1.2cqw, 5px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0;
  box-sizing: border-box;
}

.result-reward-row .reward-ad-content-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: min(0.8cqw, 3px) !important;
  width: 100%;
  max-width: 100%;
  margin: auto !important;
  padding: 0 !important;
  box-sizing: border-box;
}

.result-reward-row .reward-ad-top-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.result-reward-row .reward-ad-top-row .reward-ad-badge {
  font-size: min(2.5cqw, 0.70rem);
  padding: min(0.3cqw, 1px) min(1.8cqw, 7px);
  line-height: 1.1;
  letter-spacing: 0.6px;
  border-radius: min(1.5cqw, 6px);
  margin: 0 !important;
}

.result-reward-row .result-double-btn .reward-ad-text {
  font-size: min(2.7cqw, 0.74rem);
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
  letter-spacing: -0.2px;
  margin: 0 !important;
  padding: 0 !important;
}

/* Action Buttons Area with Balanced Spacing */
.result-action-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: min(2cqw, 8px);
  padding-top: min(3cqw, 12px);
  border-top: 1.5px solid rgba(255, 255, 255, 0.25);
  box-sizing: border-box;
  gap: min(3.2cqw, 12px) !important;
}

.result-action-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: min(2cqw, 8px);
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0 !important;
}

.result-rematch-btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: min(11.5cqw, 46px);
  height: auto !important;
  font-size: min(3.1cqw, 0.84rem) !important;
  font-weight: 900 !important;
  padding: min(1.2cqw, 5px) min(1.5cqw, 6px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.25;
  box-sizing: border-box !important;
  border-radius: min(3cqw, 12px) !important;
}

.result-rematch-btn span {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: break-word !important;
  margin: auto !important;
}

.result-loadout-btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: min(11.5cqw, 46px);
  height: auto !important;
  font-size: min(3.0cqw, 0.82rem) !important;
  font-weight: 900 !important;
  padding: min(1.2cqw, 5px) min(1.5cqw, 6px) !important;
  margin-top: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.25;
  box-sizing: border-box !important;
  border-radius: min(3cqw, 12px) !important;
}

.result-loadout-btn span {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: break-word !important;
  margin: auto !important;
}

.result-return-btn {
  width: min(60cqw, 210px) !important;
  align-self: center !important;
  margin-top: 0 !important;
  height: min(8cqw, 32px) !important;
  padding: 0 min(3cqw, 12px) !important;
  font-size: min(2.8cqw, 0.76rem) !important;
  font-weight: 800 !important;
  border-radius: min(2.5cqw, 10px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

@keyframes bannerPop {
  0%   { transform: scale(0.72); opacity: 0; }
  70%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

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

/* ============================================================
   Endless Mode Custom Result Screen
   ============================================================ */
.result-content.is-endless {
  max-width: min(96cqw, 500px) !important;
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
  border: min(0.8cqw, 3.5px) solid #38bdf8 !important;
  border-radius: min(4.5cqw, 20px) !important;
  box-shadow: 0 min(3cqw, 16px) min(8cqw, 40px) rgba(0, 0, 0, 0.5), 0 0 min(5cqw, 25px) rgba(56, 189, 248, 0.4) !important;
  max-height: 96vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: min(2.5cqw, 12px) min(3cqw, 14px) min(3cqw, 14px) !important;
  gap: min(1.8cqw, 8px) !important;
  color: #ffffff !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.7) rgba(15, 23, 42, 0.5);
}

.result-content.is-endless::-webkit-scrollbar {
  width: 4px;
}
.result-content.is-endless::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.4);
  border-radius: 4px;
}
.result-content.is-endless::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #38bdf8, #818cf8);
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.8);
}

/* でっかいどくろ絵文字・GAME OVERタイトル・通常リザルトボディ(タクティカル/HP表)は不要（最終ステージバッジが主役） */
.result-content.is-endless .result-icon,
.result-content.is-endless .result-title,
.result-content.is-endless #result-standard-body {
  display: none !important;
}

/* エンドレス専用コンテンツ */
.result-endless-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: min(1.5cqw, 7px);
  box-sizing: border-box;
}

/* 最終クリアステージ バッジ & BEST バッジ (最上部ヘッダーとして1行で横並び配置) */
.result-endless-stage-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(2cqw, 10px);
  margin-top: 2px;
  margin-bottom: min(1cqw, 4px);
  flex-wrap: nowrap !important;
  width: 100%;
}

.result-endless-stage-tag {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.35), rgba(14, 165, 233, 0.45));
  border: 2px solid #38bdf8;
  border-radius: 999px;
  color: #ffffff;
  font-family: var(--font-title);
  font-size: min(3.8cqw, 1.15rem);
  font-weight: 900;
  padding: 3px min(2.5cqw, 14px);
  letter-spacing: 1.1px;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.8);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.4);
  white-space: nowrap !important;
  flex-shrink: 0;
}

.result-endless-best-tag {
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  color: #ffffff;
  font-family: var(--font-title);
  font-size: min(2.4cqw, 0.72rem);
  font-weight: 800;
  padding: 3px min(2cqw, 10px);
  letter-spacing: 0.6px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  white-space: nowrap !important;
  flex-shrink: 0;
}

/* セクション共通枠 (「バトルの流れ」枠準拠: 濃い青背景＋シアン枠線＋ゴールドタイトル) */
.result-endless-section-box {
  width: 100%;
  background: rgba(15, 23, 42, 0.45);
  border: min(0.4cqw, 1.5px) solid rgba(56, 189, 248, 0.45);
  border-radius: min(2.5cqw, 12px);
  padding: min(1.6cqw, 8px) min(2.2cqw, 10px);
  display: flex;
  flex-direction: column;
  gap: min(1.2cqw, 5px);
  box-sizing: border-box;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.result-endless-section-title {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-title);
  font-size: min(2.8cqw, 0.82rem);
  font-weight: 900;
  color: #fde047;
  letter-spacing: 0.8px;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 装備グリッド */
.result-endless-loadout-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: min(1.2cqw, 5px);
  width: 100%;
  box-sizing: border-box;
}

.res-loadout-card {
  background: rgba(15, 23, 42, 0.78);
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  border-radius: 8px;
  padding: 6px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.res-loadout-icon-wrap {
  width: min(8.5cqw, 32px);
  height: min(8.5cqw, 32px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(14, 165, 233, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.res-loadout-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.res-loadout-name {
  font-family: var(--font-main);
  font-size: min(2.1cqw, 0.60rem);
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
  line-height: 1.15;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* リザルト用チップ構成上段 (左: スロット円環 + 右: シナジー表、余白たっぷり) */
.result-chip-main-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: min(5.5cqw, 24px);
  flex-shrink: 0;
  box-sizing: border-box;
}

.result-chip-ring-wrapper {
  position: relative;
  flex: 0 0 auto;
  width: min(42cqw, 176px);
  height: min(42cqw, 176px);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.result-chip-ring-container {
  position: relative;
  width: min(42cqw, 176px);
  height: min(42cqw, 176px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.result-chip-center-ship {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(14cqw, 56px);
  height: min(14cqw, 56px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.25) 0%, rgba(2, 6, 23, 0.85) 80%);
  border: 2px solid #38bdf8;
  box-shadow: 0 0 min(3.5cqw, 14px) rgba(56, 189, 248, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
}

.result-chip-center-ship canvas {
  width: min(11cqw, 44px);
  height: min(11cqw, 44px);
}

.result-chip-slot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(8.6cqw, 35px);
  height: min(8.6cqw, 35px);
  margin-top: calc(-1 * min(8.6cqw, 35px) / 2);
  margin-left: calc(-1 * min(8.6cqw, 35px) / 2);
  border-radius: 50%;
  transform: rotate(var(--angle)) translate(min(16.5cqw, 70px)) rotate(calc(-1 * var(--angle)));
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  z-index: 15;
  box-sizing: border-box;
}

.result-chip-slot.is-empty {
  background: rgba(15, 23, 42, 0.60);
  border: 1.5px dashed rgba(56, 189, 248, 0.45);
}

.result-chip-slot.is-filled {
  background: rgba(15, 23, 42, 0.85);
  border: 2px solid var(--chip-color, #38bdf8);
  box-shadow: 0 0 8px var(--chip-color, #38bdf8);
}

.result-chip-slot .chip-slot-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.result-chip-slot .chip-slot-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.result-chip-slot .chip-slot-placeholder {
  font-family: var(--font-title);
  font-size: min(2cqw, 0.60rem);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.7);
}

.result-chip-slot .chip-slot-lvl {
  font-size: min(1.8cqw, 0.50rem) !important;
  padding: 0 3px !important;
  top: -3px !important;
  right: -3px !important;
}

.result-chip-slot .chip-slot-connectors .chip-pin {
  transform-origin: center;
}

/* リザルト用シナジー表 (濃い青背景調和: ダークネイビーカード＋属性ネオン枠線＋発光アクティブ段) */
.result-chip-synergy-tables {
  width: min(29cqw, 122px);
  flex: 0 0 min(29cqw, 122px);
  height: min(42cqw, 176px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: min(1.2cqw, 5px);
  box-sizing: border-box;
  flex-shrink: 0;
  margin: 0;
}

.result-chip-synergy-tables .synergy-table-card {
  background: rgba(15, 23, 42, 0.78);
  border-radius: min(1.8cqw, 7px);
  padding: min(0.6cqw, 2px) min(1cqw, 3.5px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.result-chip-synergy-tables .synergy-table-card.is-red {
  border: 1.5px solid rgba(239, 68, 68, 0.7);
}
.result-chip-synergy-tables .synergy-table-card.is-red.is-active {
  border: 2px solid #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.result-chip-synergy-tables .synergy-table-card.is-blue {
  border: 1.5px solid rgba(0, 240, 255, 0.7);
}
.result-chip-synergy-tables .synergy-table-card.is-blue.is-active {
  border: 2px solid #00f0ff;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
}

.result-chip-synergy-tables .synergy-table-card.is-yellow {
  border: 1.5px solid rgba(250, 204, 21, 0.7);
}
.result-chip-synergy-tables .synergy-table-card.is-yellow.is-active {
  border: 2px solid #facc15;
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.6);
}

.result-chip-synergy-tables .syn-table-rows {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 100%;
  gap: 0px;
}

.result-chip-synergy-tables .syn-table-row {
  font-size: min(2.05cqw, 0.61rem);
  line-height: 1.1;
  padding: 0px 1.5px;
  color: #94a3b8;
  border-radius: 3px;
}

.result-chip-synergy-tables .syn-step-num {
  font-family: var(--font-title);
  font-weight: 900;
  min-width: 10px;
  font-size: min(2.25cqw, 0.67rem);
  color: #cbd5e1;
}

.result-chip-synergy-tables .syn-step-eff {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: min(1.95cqw, 0.58rem);
  color: #94a3b8;
  white-space: nowrap;
}

/* 達成段の発光表示 (濃い青背景用: 属性別の鮮やかな発光バックライト＋白文字) */
.result-chip-synergy-tables .is-red .syn-table-row.is-active-step {
  background: rgba(239, 68, 68, 0.32) !important;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.6) !important;
}
.result-chip-synergy-tables .is-red .syn-table-row.is-active-step .syn-step-num {
  color: #fca5a5 !important;
  text-shadow: 0 0 5px rgba(239, 68, 68, 0.9) !important;
}
.result-chip-synergy-tables .is-red .syn-table-row.is-active-step .syn-step-eff {
  color: #ffffff !important;
  font-weight: 900 !important;
  text-shadow: 0 0 4px rgba(239, 68, 68, 0.7) !important;
}

.result-chip-synergy-tables .is-blue .syn-table-row.is-active-step {
  background: rgba(14, 165, 233, 0.32) !important;
  box-shadow: 0 0 6px rgba(14, 165, 233, 0.6) !important;
}
.result-chip-synergy-tables .is-blue .syn-table-row.is-active-step .syn-step-num {
  color: #7dd3fc !important;
  text-shadow: 0 0 5px rgba(56, 189, 248, 0.9) !important;
}
.result-chip-synergy-tables .is-blue .syn-table-row.is-active-step .syn-step-eff {
  color: #ffffff !important;
  font-weight: 900 !important;
  text-shadow: 0 0 4px rgba(56, 189, 248, 0.7) !important;
}

.result-chip-synergy-tables .is-yellow .syn-table-row.is-active-step {
  background: rgba(234, 179, 8, 0.32) !important;
  box-shadow: 0 0 6px rgba(234, 179, 8, 0.6) !important;
}
.result-chip-synergy-tables .is-yellow .syn-table-row.is-active-step .syn-step-num {
  color: #fef08a !important;
  text-shadow: 0 0 5px rgba(250, 204, 21, 0.9) !important;
}
.result-chip-synergy-tables .is-yellow .syn-table-row.is-active-step .syn-step-eff {
  color: #ffffff !important;
  font-weight: 900 !important;
  text-shadow: 0 0 4px rgba(250, 204, 21, 0.7) !important;
}

/* リザルト用チップ効果一覧 (濃い青背景用) */
.result-chip-status-bar {
  width: 100%;
  background: rgba(15, 23, 42, 0.70);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: min(1.8cqw, 6px);
  padding: min(0.8cqw, 3px) min(1.2cqw, 5px);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  gap: min(0.8cqw, 3px);
  height: min(10.5cqw, 40px);
  min-height: min(10.5cqw, 40px);
  max-height: min(10.5cqw, 40px);
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  flex-shrink: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.5) rgba(15, 23, 42, 0.8);
  -webkit-overflow-scrolling: touch;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.35);
}

.result-chip-status-bar::-webkit-scrollbar {
  width: 4px;
}
.result-chip-status-bar::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.8);
  border-radius: 4px;
}
.result-chip-status-bar::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.5);
  border-radius: 4px;
}

.result-chip-status-bar .chip-status-tag {
  font-size: min(2.1cqw, 0.62rem);
  padding: 1px min(1cqw, 4px);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--chip-color, rgba(56, 189, 248, 0.5));
  color: #ffffff;
  font-weight: 800;
  border-radius: 4px;
}

.result-chip-status-bar .chip-status-empty {
  font-size: min(2cqw, 0.58rem);
  color: #94a3b8;
  font-weight: 700;
}

/* リザルト画面共通報酬行 (遊び方ウィンドウ準拠: 明るいホワイト＆ゴールド/シアン) */
.result-content .result-reward-row .result-coin-box {
  background: rgba(254, 243, 199, 0.95) !important;
  border: min(0.4cqw, 1.5px) solid #f59e0b !important;
  border-radius: min(2.5cqw, 12px) !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.15) !important;
}

.result-content .result-reward-row .result-level-box {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(224, 242, 254, 0.92) 100%) !important;
  border: min(0.4cqw, 1.5px) solid #7dd3fc !important;
  border-radius: min(2.5cqw, 12px) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

.result-content .result-coin-earned {
  color: #b45309 !important;
  font-weight: 900 !important;
}

.result-content .result-coin-total-val {
  color: #78350f !important;
  font-weight: 900 !important;
}

.result-content .result-xp-earned {
  color: #0284c7 !important;
  font-weight: 900 !important;
}

.result-content .result-level-current {
  color: #0f172a !important;
  font-weight: 900 !important;
}

.result-content .result-xp-bar-track {
  background: #e2e8f0 !important;
  border: 1px solid #cbd5e1 !important;
}

.result-content.is-endless .result-action-section {
  border-top: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  margin-top: min(2cqw, 8px) !important;
  padding-top: min(3.8cqw, 16px) !important;
  gap: min(1cqw, 4px) !important;
}

.result-content.is-endless .result-endless-actions-box {
  margin-bottom: min(1cqw, 4px) !important;
  gap: 0 !important;
}

.result-content.is-endless .result-return-btn {
  margin-top: 0 !important;
}

/* ============================================================
   Loadout / Weapon Setup Screen (Strictly fits 9:16 container)
   ============================================================ */
#loadout-screen {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 60%, #1e40af 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: min(5cqw, 20px) min(3.5cqw, 14px) min(4cqw, 16px);
  pointer-events: auto;
  overflow-x: hidden !important;
  overflow-y: hidden;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.loadout-panel {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: min(2cqw, 8px);
  overflow-x: hidden !important;
  box-sizing: border-box;
}

.loadout-header {
  position: relative;
  text-align: center;
  flex-shrink: 0;
  margin-top: min(1cqw, 4px);
  width: 100%;
}

.loadout-back-btn-top {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: min(1cqw, 4px) min(2.5cqw, 10px);
  font-size: min(2.8cqw, 0.75rem);
  font-weight: 800;
  color: #94a3b8;
  background: rgba(15, 23, 42, 0.7);
  border: min(0.3cqw, 1px) solid rgba(148, 163, 184, 0.35);
  border-radius: min(2cqw, 8px);
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all 0.18s ease;
  z-index: 5;
  white-space: nowrap !important;
}

.loadout-back-btn-top:hover {
  color: #ffffff;
  border-color: #00f0ff;
  background: rgba(0, 240, 255, 0.15);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.35);
  transform: translateY(-1px);
}

.loadout-back-btn-top:active {
  transform: scale(0.95);
}

.loadout-title {
  font-family: var(--font-title);
  font-size: min(8.0cqw, 2.5rem);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: 1px;
  color: #fde047;
  text-shadow: 0 4px 0 #d97706, 0 8px 16px rgba(0, 0, 0, 0.4);
  margin-bottom: min(2cqw, 8px);
  white-space: nowrap !important;
}

.loadout-sub {
  font-size: min(3.4cqw, 0.85rem);
  color: #ffffff;
  font-weight: 800;
  margin-top: min(1.5cqw, 6px);
  margin-bottom: min(1cqw, 4px);
  white-space: nowrap !important;
}

/* Loadout 30s Timer Row */
.loadout-timer-row {
  display: flex;
  align-items: center;
  gap: min(2cqw, 8px);
  width: 100%;
  margin: 2px 0;
  background: rgba(15, 23, 42, 0.85);
  padding: min(1cqw, 4px) min(3cqw, 12px);
  border-radius: 999px;
  border: min(0.4cqw, 1.5px) solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 min(0.8cqw, 3px) 0 #0f172a;
  flex-shrink: 0;
}

.loadout-timer-label {
  font-size: min(2.6cqw, 0.65rem);
  font-weight: 900;
  color: #38bdf8;
  letter-spacing: 0.5px;
  white-space: nowrap !important;
}

.loadout-timer-track {
  flex: 1;
  height: min(1.5cqw, 6px);
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.loadout-timer-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #38bdf8, #0284c7);
  border-radius: 999px;
  transition: width 1s linear, background 0.3s ease;
}

.loadout-timer-fill.urgent {
  background: linear-gradient(90deg, #fb7185, #e11d48);
}

.loadout-timer-text {
  font-family: var(--font-title);
  font-size: min(4.5cqw, 1.20rem);
  font-weight: 900;
  color: #ffffff;
  min-width: 24px;
  text-align: right;
  line-height: 1;
  white-space: nowrap !important;
}

.loadout-timer-text.urgent {
  color: #f43f5e;
  animation: pulse-urgent 0.5s infinite alternate;
}

.secondary-glow-btn {
  background: linear-gradient(180deg, #f472b6 0%, #ec4899 50%, #db2777 100%) !important;
  box-shadow: 0 min(1cqw, 4px) 0 #9d174d !important;
  color: #ffffff !important;
}

.secondary-glow-btn:active {
  transform: translateY(min(0.8cqw, 3px)) !important;
  box-shadow: 0 min(0.3cqw, 1px) 0 #9d174d !important;
}

/* 4 Slots Grid (Fixed Slot Dimensions) */
.loadout-slots-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: min(1.5cqw, 6px);
  width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
}

.loadout-slot-card {
  background: rgba(30, 41, 59, 0.85);
  border: min(0.4cqw, 1.5px) solid rgba(255, 255, 255, 0.15);
  border-radius: min(3.5cqw, 14px);
  padding: min(1.2cqw, 5px) min(0.5cqw, 2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: min(0.5cqw, 2px);
  cursor: pointer;
  box-shadow: 0 min(0.8cqw, 3px) 0 #0f172a;
  transition: all 0.10s ease;
  min-width: 0;
  width: 100%;
  height: min(18cqw, 74px);
  box-sizing: border-box;
  overflow: hidden;
}

.loadout-slot-card:active {
  transform: translateY(min(0.5cqw, 2px));
  box-shadow: 0 min(0.3cqw, 1px) 0 #0f172a;
}

.loadout-slot-card.active {
  border-color: #0284c7;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(224, 242, 254, 0.88) 100%);
  box-shadow: 0 0 min(3.5cqw, 14px) rgba(56, 189, 248, 0.6), 0 min(0.8cqw, 3px) 0 #0284c7;
}

.slot-num {
  font-size: min(2.5cqw, 0.62rem);
  font-weight: 900;
  color: #94a3b8;
  letter-spacing: 0.5px;
  white-space: nowrap !important;
  flex-shrink: 0;
}

.loadout-slot-card.active .slot-num {
  color: #0369a1;
  font-weight: 900;
}

.slot-icon {
  width: min(7cqw, 28px);
  height: min(7cqw, 28px);
  min-width: min(7cqw, 28px);
  min-height: min(7cqw, 28px);
  max-width: min(7cqw, 28px);
  max-height: min(7cqw, 28px);
  font-size: min(4cqw, 1.25rem);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.slot-icon img,
.slot-icon-img {
  width: min(7cqw, 28px) !important;
  height: min(7cqw, 28px) !important;
  min-width: min(7cqw, 28px) !important;
  min-height: min(7cqw, 28px) !important;
  max-width: min(7cqw, 28px) !important;
  max-height: min(7cqw, 28px) !important;
  object-fit: contain;
  flex-shrink: 0 !important;
}

.slot-name {
  font-family: var(--font-main);
  font-size: min(3.2cqw, 0.78rem);
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap !important;
  line-height: 1.15;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 1px;
}

.slot-name.is-long {
  font-size: min(2.7cqw, 0.66rem);
  letter-spacing: -0.4px;
}

.slot-name.is-xlong {
  font-size: min(2.4cqw, 0.58rem);
  letter-spacing: -0.5px;
}

.loadout-slot-card.active .slot-name {
  color: #0f172a;
  font-weight: 900;
}

.loadout-tab-row {
  display: flex;
  gap: min(1.5cqw, 6px);
  width: 100%;
  flex-shrink: 0;
}

.loadout-tab-btn {
  flex: 1;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid transparent;
  border-radius: min(2.5cqw, 10px);
  padding: min(1.5cqw, 6px) min(1cqw, 4px);
  font-size: min(3.4cqw, 0.86rem);
  font-weight: 900;
  color: #94a3b8;
  cursor: pointer;
  box-shadow: 0 min(0.5cqw, 2px) 0 #0f172a;
  transition: all 0.10s ease;
  white-space: nowrap !important;
}

.loadout-tab-btn:active {
  transform: translateY(min(0.5cqw, 2px));
  box-shadow: 0 0 0 #0f172a;
}

.loadout-tab-btn.active {
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 50%, #d97706 100%);
  border-color: #fde047;
  color: #78350f;
  box-shadow: 0 min(0.8cqw, 3px) 0 #b45309;
}

.palette-item-card.hidden-by-filter {
  display: none !important;
}

/* Palette 2x2 Scrollable Grid (Fits available vertical space) */
.weapon-palette-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: min-content;
  align-content: flex-start;
  gap: min(1.5cqw, 6px);
  width: 100%;
  max-width: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden !important;
  padding-right: 2px;
  box-sizing: border-box;
}

.weapon-palette-grid::-webkit-scrollbar {
  width: 4px;
}

.weapon-palette-grid::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.4);
  border-radius: 4px;
}

.palette-item-card {
  position: relative;
  background: rgba(30, 41, 59, 0.85);
  border: min(0.4cqw, 1.5px) solid rgba(255, 255, 255, 0.15);
  border-radius: min(3.5cqw, 14px);
  padding: min(1.5cqw, 6px) min(2.5cqw, 10px) min(1.5cqw, 6px) min(2cqw, 7px);
  display: flex;
  align-items: center;
  gap: min(1.5cqw, 6px);
  cursor: pointer;
  box-shadow: 0 min(0.8cqw, 3px) 0 #0f172a;
  transition: all 0.10s ease;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.palette-item-card:hover {
  border-color: rgba(56, 189, 248, 0.5);
  background: rgba(51, 65, 85, 0.95);
}

.palette-item-card:active {
  transform: translateY(min(0.5cqw, 2px));
  box-shadow: 0 min(0.3cqw, 1px) 0 #0f172a;
}

.palette-item-card.equipped-in-active {
  border-color: #0284c7 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(224, 242, 254, 0.88) 100%) !important;
  box-shadow: 0 0 min(3.5cqw, 14px) rgba(56, 189, 248, 0.6), 0 min(0.8cqw, 3px) 0 #0284c7 !important;
}

.palette-item-card.equipped-in-active .pal-name {
  color: #0369a1 !important;
  font-weight: 900;
}

.palette-item-card.equipped-in-active .pal-desc {
  color: #0f172a !important;
  font-weight: 800;
}

.palette-item-card.equipped-in-other::after {
  content: '他スロット装着中';
  position: absolute;
  top: 3px;
  right: 6px;
  font-size: min(2.0cqw, 0.55rem);
  font-weight: 900;
  color: #fbbf24;
  background: rgba(15, 23, 42, 0.85);
  padding: 1px 4px;
  border-radius: 4px;
  border: 1px solid rgba(251, 191, 36, 0.4);
  white-space: nowrap !important;
}

.pal-icon {
  font-size: min(4.5cqw, 1.3rem);
}

.pal-icon-img {
  width: min(7.5cqw, 30px);
  height: min(7.5cqw, 30px);
  object-fit: contain;
  flex-shrink: 0;
}

.pal-info {
  display: flex;
  flex-direction: column;
  text-align: left;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.pal-name {
  font-family: var(--font-main);
  font-size: min(3.2cqw, 0.80rem);
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.pal-desc {
  font-family: var(--font-main);
  font-size: min(2.2cqw, 0.56rem);
  color: #cbd5e1;
  line-height: 1.15;
  margin-top: 1px;
  font-weight: 700;
  letter-spacing: -0.2px;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.loadout-actions {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  margin-top: min(2cqw, 8px);
  margin-bottom: min(3cqw, 14px);
  gap: min(1.8cqw, 8px);
}

.loadout-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: min(1cqw, 4px);
  padding: min(1.8cqw, 7px) min(5cqw, 20px);
  font-size: min(3.4cqw, 0.84rem);
  font-weight: 800;
  color: #94a3b8;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 20px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: all 0.18s ease;
  white-space: nowrap !important;
}

.loadout-back-btn:hover {
  color: #ffffff;
  border-color: #00f0ff;
  background: rgba(0, 240, 255, 0.15);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
  transform: translateY(-1px);
}

.loadout-back-btn:active {
  transform: scale(0.96);
}

/* Menu Divider Line */
.menu-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.30);
  margin: min(1.5cqw, 6px) 0;
  border-radius: 999px;
  flex-shrink: 0;
}

/* Skin & Coin Menu Block */
.menu-skin-coin-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: min(1.5cqw, 6px);
  background: rgba(15, 23, 42, 0.40);
  border: min(0.4cqw, 1.5px) solid rgba(255, 255, 255, 0.20);
  border-radius: min(4cqw, 16px);
  padding: min(2cqw, 8px) min(2.5cqw, 10px);
  box-sizing: border-box;
}

.menu-coin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}
.menu-coin-label {
  font-family: var(--font-main);
  font-size: min(2.8cqw, 0.76rem);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap !important;
}
.menu-coin-badge {
  display: flex;
  align-items: center;
  gap: min(1cqw, 4px);
  background: rgba(15, 23, 42, 0.6);
  border: min(0.4cqw, 1.5px) solid #fbbf24;
  border-radius: min(3cqw, 12px);
  padding: min(0.6cqw, 2px) min(2cqw, 8px);
  box-shadow: 0 0 min(2cqw, 8px) rgba(251, 191, 36, 0.3);
}
.menu-coin-badge .coin-icon {
  font-size: min(3.5cqw, 0.95rem);
}
.menu-coin-badge .coin-val {
  font-family: var(--font-title);
  font-size: min(3.5cqw, 0.95rem);
  font-weight: 900;
  color: #fef08a;
  white-space: nowrap !important;
}

.menu-skin-btn-row {
  display: flex;
  gap: min(1.5cqw, 6px);
  width: 100%;
  box-sizing: border-box;
}

.menu-gacha-btn {
  flex: 1.1;
  min-width: 0;
  height: min(9.5cqw, 38px);
  padding: 0 min(2.5cqw, 8px) !important;
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 50%, #d97706 100%);
  border: min(0.5cqw, 2px) solid #fef08a;
  border-radius: min(3cqw, 12px);
  color: #78350f;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  cursor: pointer;
  box-shadow: 0 min(0.8cqw, 3px) 0 #b45309, 0 min(1.2cqw, 4px) min(2.5cqw, 10px) rgba(245, 158, 11, 0.4);
  transition: all 0.10s ease;
  overflow: hidden;
  box-sizing: border-box !important;
}

.gacha-btn-text {
  font-size: min(2.9cqw, 0.84rem);
  font-weight: 900;
  letter-spacing: -0.2px;
  white-space: nowrap !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  margin: 0 auto !important;
  line-height: 1.1;
}

.menu-gacha-btn:active {
  transform: translateY(min(0.6cqw, 2px));
  box-shadow: 0 min(0.3cqw, 1px) 0 #b45309;
}

.menu-skin-btn {
  flex: 1;
  min-width: 0;
  height: min(9.5cqw, 38px);
  padding: 0 min(2.5cqw, 8px) !important;
  background: rgba(15, 23, 42, 0.55);
  border: min(0.5cqw, 2px) solid rgba(255, 255, 255, 0.35);
  border-radius: min(3cqw, 12px);
  color: #ffffff;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  cursor: pointer;
  box-shadow: 0 min(0.8cqw, 3px) 0 rgba(0, 0, 0, 0.25);
  transition: all 0.10s ease;
  overflow: hidden;
  box-sizing: border-box !important;
}

.skin-btn-text {
  font-size: min(2.9cqw, 0.82rem);
  font-weight: 900;
  letter-spacing: -0.2px;
  white-space: nowrap !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  margin: 0 auto !important;
  line-height: 1.1;
}

.menu-skin-btn:active {
  transform: translateY(min(0.6cqw, 2px));
  box-shadow: 0 min(0.3cqw, 1px) 0 rgba(0, 0, 0, 0.25);
}

/* Rule Mode Selector */
.mode-selector-container.compact {
  margin: 0;
}

.mode-selector-container.compact .mode-selector-btn {
  flex: 1;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 8px;
  background: rgba(15, 23, 42, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 14px;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
  transition: all 0.10s ease;
  text-align: center;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  font-size: clamp(0.65rem, 2.0vw, 0.80rem);
  font-weight: 900;
}

.mode-selector-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.mode-selector-btn:hover {
  border-color: #fde047;
  color: #ffffff;
}

.mode-selector-btn.active {
  border-color: #fde047;
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 50%, #d97706 100%);
  color: #78350f;
  box-shadow: 0 4px 0 #b45309, 0 4px 12px rgba(217, 119, 6, 0.4);
}

/* Room Rule Badge */
.room-rule-badge {
  display: inline-block;
  font-size: min(2.7cqw, 0.72rem);
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #ffffff;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  border: min(0.4cqw, 1.5px) solid rgba(255, 255, 255, 0.4);
  padding: min(0.6cqw, 2.5px) min(2.8cqw, 12px);
  border-radius: 999px;
  box-shadow: 0 min(0.5cqw, 2px) min(1.5cqw, 6px) rgba(2, 132, 199, 0.4);
  white-space: nowrap !important;
}

/* ========================================================
   MANUAL SCREEN & DEMO STYLES
   ======================================================== */
.manual-entry-row {
  margin-top: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: min(1.5cqw, 6px);
  box-sizing: border-box;
}

.manual-open-btn {
  flex: 1 1 0;
  min-width: 0;
  height: min(8.2cqw, 33px);
  padding: 0 min(2.0cqw, 6px) !important;
  background: rgba(15, 23, 42, 0.45);
  border: min(0.45cqw, 1.8px) solid rgba(255, 255, 255, 0.4);
  border-radius: min(2.8cqw, 11px);
  color: #ffffff;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  cursor: pointer;
  box-shadow: 0 min(0.6cqw, 2px) 0 rgba(0, 0, 0, 0.25), 0 min(0.8cqw, 3px) min(2cqw, 8px) rgba(0, 0, 0, 0.2);
  transition: all 0.10s ease;
  overflow: hidden;
  box-sizing: border-box !important;
}

.manual-btn-text,
.guide-btn-text,
.ranking-btn-text {
  font-size: min(3.0cqw, 12px);
  font-weight: 900;
  letter-spacing: -0.2px;
  white-space: nowrap !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  margin: 0 auto !important;
  line-height: 1.1;
}

.manual-open-btn:active {
  transform: translateY(min(0.6cqw, 2px));
  box-shadow: 0 min(0.3cqw, 1px) 0 rgba(0, 0, 0, 0.25);
}

.manual-open-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #38bdf8;
  color: #ffffff;
}

/* Manual Screen Modal */
#manual-screen {
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: min(2.5cqw, 10px);
  pointer-events: auto;
  box-sizing: border-box;
}

#manual-screen.hidden {
  display: none !important;
  pointer-events: none !important;
}

.manual-panel {
  width: 100%;
  max-width: min(94cqw, 680px);
  height: 94%;
  max-height: 820px;
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
  border: min(0.8cqw, 3.5px) solid #38bdf8;
  border-radius: min(4.5cqw, 22px);
  box-shadow: 0 min(3cqw, 16px) min(8cqw, 40px) rgba(0, 0, 0, 0.5), 0 0 min(5cqw, 25px) rgba(56, 189, 248, 0.4);
  display: flex;
  flex-direction: column;
  padding: min(2.5cqw, 14px);
  gap: min(2cqw, 10px);
  overflow: hidden;
  color: #ffffff;
  box-sizing: border-box;
}

/* Header */
.manual-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: min(1.5cqw, 8px);
  border-bottom: min(0.5cqw, 2px) solid rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

.manual-header-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.manual-badge {
  font-size: min(2.2cqw, 0.68rem);
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #fde047;
  white-space: nowrap !important;
}

.manual-title {
  font-size: min(4.8cqw, 1.30rem);
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.5px;
  white-space: nowrap !important;
}

.manual-close-btn {
  width: min(7.5cqw, 34px);
  height: min(7.5cqw, 34px);
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.2);
  border: min(0.5cqw, 2px) solid #ef4444;
  color: #f87171;
  font-size: min(2.8cqw, 1rem);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 0 #991b1b;
  transition: all 0.10s ease;
}

.manual-close-btn:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 #991b1b;
}

/* Manual Body Layout */
.manual-body {
  flex: 1;
  display: flex;
  gap: min(2cqw, 8px);
  min-height: 0; /* Important for inner scroll */
  width: 100%;
  box-sizing: border-box;
}

/* Left Area (Demo + Detail) 2/3 (~67%) */
.manual-left-area {
  flex: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: min(1.5cqw, 6px);
  min-height: 0;
}

/* Top Demo Container (Height ~65% of left area) */
.manual-demo-container {
  background: rgba(15, 23, 42, 0.5);
  border: min(0.5cqw, 2px) solid #38bdf8;
  border-radius: min(3cqw, 14px);
  padding: min(1.2cqw, 5px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 min(1cqw, 4px) min(2.5cqw, 12px) rgba(0, 0, 0, 0.3);
}

.manual-canvas-wrapper {
  width: auto;
  max-width: 100%;
  background: #040812;
  border-radius: min(2.2cqw, 10px);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border: min(0.4cqw, 1.5px) solid #0284c7;
}

#manual-canvas {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(160px, 30vh, 260px);
  aspect-ratio: 9 / 16;
  display: block;
}

/* Bottom Detail Info */
.manual-detail-container {
  flex: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(224, 242, 254, 0.90) 100%);
  border: min(0.5cqw, 2px) solid #7dd3fc;
  border-radius: min(3cqw, 14px);
  padding: min(1.8cqw, 8px) min(2.5cqw, 12px);
  display: flex;
  flex-direction: column;
  gap: min(0.8cqw, 4px);
  overflow-y: auto;
  color: #0f172a;
  box-shadow: 0 min(1cqw, 4px) min(2.5cqw, 12px) rgba(0, 0, 0, 0.15);
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.6) transparent;
  box-sizing: border-box;
}

.manual-detail-top {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.manual-detail-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.manual-detail-icon {
  width: 34px;
  height: 34px;
  background: #ffffff;
  border: 1.5px solid #7dd3fc;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.manual-detail-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.manual-detail-text-group {
  display: flex;
  flex-direction: column;
}

.manual-detail-name {
  font-family: var(--font-main);
  font-size: min(4.2cqw, 1.15rem);
  font-weight: 900;
  color: #0f172a;
  margin: 0;
  white-space: nowrap !important;
  line-height: 1.15;
}

.manual-detail-type {
  font-family: var(--font-main);
  font-size: min(2.8cqw, 0.70rem);
  font-weight: 700;
  color: #0284c7;
  white-space: nowrap !important;
}

.manual-detail-specs {
  display: flex;
  flex-wrap: wrap;
  gap: min(1cqw, 3px);
}

.manual-spec-pill {
  font-family: var(--font-main);
  font-size: min(2.6cqw, 0.66rem);
  font-weight: 800;
  padding: min(0.5cqw, 2px) min(1.2cqw, 5px);
  border-radius: min(1.2cqw, 5px);
  background: #ffffff;
  border: 1px solid #bae6fd;
  color: #0369a1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  white-space: nowrap !important;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.manual-spec-pill.highlight-dmg {
  color: #be123c;
  border-color: #fecdd3;
  background: #fff1f2;
}

.manual-spec-pill.highlight-bounce {
  color: #6d28d9;
  border-color: #e9d5ff;
  background: #faf5ff;
}

.manual-spec-pill.highlight-ct {
  color: #0369a1;
  border-color: #bae6fd;
  background: #f0f9ff;
}

.manual-detail-desc {
  font-family: var(--font-main);
  font-size: min(3.0cqw, 0.78rem);
  line-height: 1.45;
  color: #0f172a;
  font-weight: 500;
  letter-spacing: 0.1px;
  margin: 0;
}

/* Right Area (List) 1/3 (~38%) */
.manual-right-area {
  flex: 1 1 35%;
  min-width: 0;
  max-width: 38%;
  display: flex;
  flex-direction: column;
  gap: min(1cqw, 4px);
  min-height: 0;
}

.manual-tabs {
  display: flex;
  gap: min(0.6cqw, 2px);
  background: rgba(15, 23, 42, 0.45);
  padding: min(0.6cqw, 2px);
  border-radius: min(2.2cqw, 8px);
  border: min(0.3cqw, 1px) solid rgba(255, 255, 255, 0.25);
  width: 100%;
  box-sizing: border-box;
}

.manual-tab-btn {
  flex: 1;
  padding: min(1cqw, 4px) min(0.4cqw, 2px);
  font-size: min(2.7cqw, 0.72rem);
  font-weight: 900;
  border: 1px solid transparent;
  background: transparent;
  color: #e0f2fe;
  border-radius: min(1.5cqw, 6px);
  cursor: pointer;
  white-space: nowrap !important;
  letter-spacing: -0.2px;
  transition: all 0.10s ease;
}

.manual-tab-btn:active {
  transform: translateY(min(0.5cqw, 2px));
}

.manual-tab-btn.active {
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 50%, #d97706 100%);
  color: #78350f;
  border-color: #fde047;
  box-shadow: 0 min(0.5cqw, 2px) 0 #b45309;
}

.manual-items-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: min(0.8cqw, 3px);
  padding-right: 2px;
}

.manual-items-list::-webkit-scrollbar,
.manual-detail-container::-webkit-scrollbar,
.manual-detail-desc::-webkit-scrollbar {
  width: 4px;
}

.manual-items-list::-webkit-scrollbar-track,
.manual-detail-container::-webkit-scrollbar-track,
.manual-detail-desc::-webkit-scrollbar-track {
  background: transparent;
}

.manual-items-list::-webkit-scrollbar-thumb,
.manual-detail-container::-webkit-scrollbar-thumb,
.manual-detail-desc::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.6);
  border-radius: 4px;
}

.manual-items-list::-webkit-scrollbar-thumb:hover,
.manual-detail-container::-webkit-scrollbar-thumb:hover,
.manual-detail-desc::-webkit-scrollbar-thumb:hover {
  background: rgba(56, 189, 248, 0.9);
}

.manual-item-card {
  background: rgba(30, 41, 59, 0.85);
  border: min(0.3cqw, 1px) solid rgba(255, 255, 255, 0.15);
  border-radius: min(2.2cqw, 8px);
  padding: min(0.8cqw, 3px) min(1.2cqw, 5px);
  display: flex;
  align-items: center;
  gap: min(1cqw, 4px);
  cursor: pointer;
  box-shadow: 0 min(0.5cqw, 2px) 0 rgba(0, 0, 0, 0.2);
  transition: all 0.10s ease;
  flex-shrink: 0;
  box-sizing: border-box;
}

.manual-item-card:hover {
  border-color: rgba(56, 189, 248, 0.5);
  background: rgba(51, 65, 85, 0.95);
}

.manual-item-card:active {
  transform: translateY(min(0.5cqw, 2px));
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
}

.manual-item-card.active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(224, 242, 254, 0.88) 100%);
  border-color: #0284c7;
  box-shadow: 0 0 min(3.5cqw, 14px) rgba(56, 189, 248, 0.6), 0 min(0.5cqw, 2px) 0 #0284c7;
}

.manual-card-icon {
  width: min(5cqw, 20px);
  height: min(5cqw, 20px);
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: min(1.2cqw, 5px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(2.5cqw, 0.80rem);
  overflow: hidden;
  flex-shrink: 0;
}

.manual-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.manual-card-info {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.manual-card-name {
  font-family: var(--font-main);
  font-size: min(2.7cqw, 0.72rem);
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap !important;
  line-height: 1.15;
  letter-spacing: -0.2px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.manual-card-name.is-long {
  font-size: min(2.7cqw, 0.70rem);
  letter-spacing: -0.4px;
}

.manual-card-name.is-xlong {
  font-size: min(2.4cqw, 0.60rem);
  letter-spacing: -0.5px;
}

.manual-card-name.is-xxlong {
  font-size: min(2.1cqw, 0.52rem);
  letter-spacing: -0.6px;
}

.manual-item-card.active .manual-card-name {
  color: #0f172a;
  font-weight: 900;
}

/* ============================================================
   VS Player Mode Selection Modal & Rating Styles
   ============================================================ */

#online-mode-screen {
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  pointer-events: auto;
}

#online-mode-screen.hidden {
  display: none !important;
  pointer-events: none !important;
}

.online-mode-modal-wrapper {
  width: 100%;
  max-width: min(92cqw, 390px);
  max-height: 88vh;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(1.8cqw, 8px);
  animation: modalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  min-height: 0;
}

.online-mode-panel {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
  border: min(0.8cqw, 3.5px) solid #38bdf8;
  box-shadow: 0 min(3cqw, 16px) min(8cqw, 40px) rgba(0, 0, 0, 0.5), 0 0 min(5cqw, 25px) rgba(56, 189, 248, 0.4);
  border-radius: min(4.5cqw, 22px);
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  flex: 1;
  min-height: 0;
  height: auto;
  padding: min(2.5cqw, 12px) min(3cqw, 14px) min(2.2cqw, 10px);
  display: flex;
  flex-direction: column;
  gap: min(1.8cqw, 8px);
  overflow: hidden;
  color: #ffffff;
  box-sizing: border-box;
}

.online-mode-scroll {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: min(1.8cqw, 8px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 4px;
  padding-right: 4px;
  padding-bottom: 4px;
}

.online-mode-scroll::-webkit-scrollbar {
  width: 4px;
}

.online-mode-scroll::-webkit-scrollbar-track {
  background: transparent;
  margin: 6px 0;
}

.online-mode-scroll::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.4);
  border-radius: 4px;
}

.online-mode-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: min(0.5cqw, 2px) solid rgba(255, 255, 255, 0.25);
  padding-bottom: min(1.2cqw, 6px);
  flex-shrink: 0;
}

.online-mode-title-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.online-mode-title {
  font-family: var(--font-title);
  font-size: min(6.5cqw, 1.70rem);
  font-weight: 900;
  letter-spacing: 1px;
  color: #ffffff;
  line-height: 1;
  white-space: nowrap !important;
}

.online-mode-close-btn {
  background: rgba(239, 68, 68, 0.2);
  border: min(0.5cqw, 2px) solid #ef4444;
  border-radius: 50%;
  width: min(7.5cqw, 32px);
  height: min(7.5cqw, 32px);
  color: #f87171;
  font-size: min(3.2cqw, 0.95rem);
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 min(0.5cqw, 2px) 0 #991b1b;
  transition: all 0.10s ease;
}

.online-mode-close-btn:active {
  transform: translateY(min(0.5cqw, 2px));
  box-shadow: 0 0 0 #991b1b;
}

/* Rule Tabs (Plain / Tactical) - Large & Rich */
.online-rule-tabs-container {
  display: flex;
  justify-content: center;
  width: 100%;
  flex-shrink: 0;
  margin-bottom: 2px;
}

.online-rule-tabs {
  display: flex;
  background: rgba(15, 23, 42, 0.50);
  border: min(0.5cqw, 2px) solid rgba(255, 255, 255, 0.25);
  border-radius: min(2.8cqw, 12px);
  padding: min(0.8cqw, 3px) min(1.0cqw, 4px);
  width: 100%;
  gap: min(1.2cqw, 5px);
  box-sizing: border-box;
}

.online-rule-tab-btn {
  flex: 1;
  min-height: min(7.5cqw, 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: min(0.8cqw, 3px) min(1.5cqw, 6px);
  background: transparent;
  border: min(0.3cqw, 1px) solid transparent;
  border-radius: min(2.0cqw, 8px);
  color: #e0f2fe;
  cursor: pointer;
  transition: all 0.12s ease;
  gap: min(0.6cqw, 2px);
  box-sizing: border-box;
}

.online-rule-tab-btn .rule-tab-title {
  font-family: var(--font-main);
  font-weight: 900;
  font-size: min(2.8cqw, 0.82rem);
  letter-spacing: 0.5px;
  line-height: 1.1;
  white-space: nowrap !important;
}

.online-rule-tab-btn:active {
  transform: translateY(min(0.5cqw, 2px));
}

.online-rule-tab-btn.active {
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 50%, #d97706 100%);
  border-color: #fde047;
  color: #78350f;
  box-shadow: 0 min(0.6cqw, 2.5px) 0 #b45309;
}

/* Horizontal RATE 1500 badge with stylish Teko typography and optical vertical centering */
.rule-tab-rate-group {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: min(1cqw, 4px);
  background: rgba(0, 0, 0, 0.55);
  border-radius: min(1.5cqw, 6px);
  padding: 0 min(1.8cqw, 7px);
  height: min(4.8cqw, 21px);
  box-sizing: border-box;
  overflow: hidden;
}

.rule-tab-rate-sub {
  font-family: 'Teko', sans-serif;
  font-size: min(2.6cqw, 0.76rem);
  font-weight: 700;
  color: #e0f2fe !important;
  letter-spacing: 0.8px;
  line-height: 1;
  opacity: 0.95;
  display: inline-block;
  transform: translateY(0.5px);
  white-space: nowrap !important;
}

.online-rule-tab-btn.active .rule-tab-rate-sub {
  color: #ffffff !important;
}

.rule-tab-rate {
  font-family: 'Teko', sans-serif;
  font-size: min(3.6cqw, 1.15rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.8px;
  color: #fde047 !important;
  display: inline-block;
  transform: translateY(0.5px);
  white-space: nowrap !important;
}

.online-rule-tab-btn.active .rule-tab-rate {
  color: #ffffff !important;
}

/* 3 Modes Grid */
.online-modes-grid {
  display: flex;
  flex-direction: column;
  gap: min(1.8cqw, 8px);
  width: 100%;
  flex-shrink: 0;
  padding-top: 2px;
}

.online-mode-card {
  position: relative;
  border-radius: min(3.2cqw, 14px);
  padding: min(2cqw, 9px) min(2.8cqw, 12px);
  display: flex;
  flex-direction: column;
  gap: min(0.8cqw, 4px);
  box-shadow: 0 min(1cqw, 4px) min(2.5cqw, 12px) rgba(0, 0, 0, 0.15);
  cursor: default;
}

/* Card 1: Rating (Amber/Gold Theme) */
.card-rating {
  border: min(0.5cqw, 2px) solid #f59e0b;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(254, 243, 199, 0.92) 100%);
}

/* Card 2: Deathmatch (Crimson/Rose Theme) */
.card-deathmatch {
  border: min(0.5cqw, 2px) solid #fb7185;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 228, 230, 0.92) 100%);
}

/* Card 3: Free (Cyan/Teal Theme) */
.card-free {
  border: min(0.5cqw, 2px) solid #38bdf8;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(224, 242, 254, 0.92) 100%);
}

.mode-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1px;
}

.mode-card-name {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 900;
  font-size: min(3.6cqw, 0.95rem);
  color: #0f172a;
  letter-spacing: 0.5px;
  white-space: nowrap !important;
}

.mode-card-header-right {
  display: flex;
  align-items: center;
  gap: min(1cqw, 4px);
}

/* Tag Badges for DM & Free in Header */
.mode-card-tag-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: min(5cqw, 22px);
  font-size: min(2.5cqw, 0.65rem);
  font-weight: 900;
  padding: 0 min(1.5cqw, 7px);
  border-radius: min(1.5cqw, 6px);
  letter-spacing: 0.3px;
  line-height: 1;
  white-space: nowrap !important;
}

.rating-tag {
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid #f59e0b;
  color: #b45309;
}

.dm-tag {
  background: rgba(244, 63, 94, 0.15);
  border: 1px solid #fb7185;
  color: #be123c;
}

.free-tag {
  background: rgba(14, 165, 233, 0.15);
  border: 1px solid #38bdf8;
  color: #0369a1;
}

.mode-card-desc {
  font-size: min(2.6cqw, 0.68rem);
  color: #475569;
  line-height: 1.25;
  margin: 0;
  font-weight: 700;
}

.mode-card-play-btn {
  width: 100%;
  min-width: 0;
  height: min(8.5cqw, 36px);
  padding: 0 min(1.5cqw, 6px);
  border-radius: min(2.5cqw, 10px);
  border: none;
  font-family: var(--font-main);
  font-weight: 900;
  font-size: min(3.4cqw, 0.88rem);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 min(0.8cqw, 3px) 0 rgba(0, 0, 0, 0.3);
  transition: all 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: min(1cqw, 4px);
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap !important;
}

.mode-card-play-btn span {
  white-space: nowrap !important;
  display: inline-block;
  max-width: 100%;
}

.mode-card-play-btn:active {
  transform: translateY(min(0.5cqw, 2px));
  box-shadow: 0 min(0.3cqw, 1px) 0 rgba(0, 0, 0, 0.3);
}

.btn-start-rating {
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
  box-shadow: 0 min(0.8cqw, 3px) 0 #b45309;
}

.btn-start-deathmatch {
  background: linear-gradient(180deg, #fb7185 0%, #e11d48 100%);
  box-shadow: 0 min(0.8cqw, 3px) 0 #9f1239;
}

.btn-start-free {
  background: linear-gradient(180deg, #34d399 0%, #059669 100%);
  box-shadow: 0 min(0.8cqw, 3px) 0 #047857;
}

.btn-free-bot {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
  box-shadow: 0 min(0.8cqw, 3px) 0 #0369a1;
}

.mode-card-btn-row {
  display: flex;
  gap: min(1.5cqw, 6px);
  width: 100%;
  margin-top: min(1cqw, 4px);
  box-sizing: border-box;
}

.mode-card-btn-row .mode-card-play-btn {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  padding: 0 min(1cqw, 4px);
  font-size: min(3.2cqw, 0.82rem);
  white-space: nowrap !important;
  box-sizing: border-box;
}

/* Modal Private Match Section */
.modal-private-section {
  background: rgba(15, 23, 42, 0.6);
  border: min(0.3cqw, 1px) solid rgba(255, 255, 255, 0.15);
  border-radius: min(2.5cqw, 10px);
  padding: min(1.8cqw, 8px);
  margin-top: min(0.5cqw, 2px);
  flex-shrink: 0;
  box-sizing: border-box;
}

.private-section-title {
  font-size: min(2.5cqw, 0.70rem);
  font-weight: 800;
  color: var(--text-dim);
  margin-bottom: min(0.8cqw, 3px);
  white-space: nowrap !important;
}

/* Result Rating Box */
.result-rating-box {
  background: rgba(15, 23, 42, 0.45);
  border: min(0.4cqw, 1.5px) solid rgba(56, 189, 248, 0.45);
  border-radius: min(3.5cqw, 14px);
  padding: min(2cqw, 8px) min(3.5cqw, 14px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: min(2.5cqw, 10px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
}

.result-rating-label {
  font-family: var(--font-title);
  font-size: min(3.2cqw, 0.95rem);
  font-weight: 900;
  color: #fde047;
  letter-spacing: 0.8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  white-space: nowrap !important;
}

.result-rating-val-group {
  display: flex;
  align-items: baseline;
  gap: min(2cqw, 8px);
}

.result-rating-new {
  font-family: var(--font-title);
  font-size: min(5.5cqw, 1.6rem);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.5px;
  line-height: 1;
}

.result-rating-delta {
  font-family: var(--font-title);
  font-size: min(4.5cqw, 1.3rem);
  font-weight: 900;
  letter-spacing: 0.5px;
  line-height: 1;
}

.result-rating-delta.rating-up {
  color: #4ade80;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
}

.result-rating-delta.rating-down {
  color: #f87171;
  text-shadow: 0 0 8px rgba(248, 113, 113, 0.6);
}

.result-rating-delta.rating-even {
  color: #94a3b8;
}

/* Result Coin Box */
.result-coin-box {
  background: rgba(254, 243, 199, 0.92);
  border: min(0.4cqw, 1.5px) solid #f59e0b;
  border-radius: min(3cqw, 12px);
  padding: min(1.5cqw, 6px) min(2.5cqw, 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: min(0.8cqw, 3px);
  width: 100%;
  margin-bottom: min(2cqw, 8px);
  box-shadow: 0 min(0.5cqw, 2px) min(2cqw, 8px) rgba(245, 158, 11, 0.15);
  box-sizing: border-box;
}

.result-coin-val-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(1.2cqw, 5px);
  line-height: 1;
}

.result-coin-val-group .coin-icon {
  font-size: min(3.8cqw, 1.05rem);
  line-height: 1;
}

.result-coin-earned {
  font-family: var(--font-title);
  font-size: min(4.8cqw, 1.30rem);
  font-weight: 900;
  color: #b45309;
  letter-spacing: 0.5px;
  line-height: 1;
  white-space: nowrap !important;
}

.result-coin-bonus-tag {
  font-family: var(--font-main);
  font-size: min(2.4cqw, 0.65rem);
  font-weight: 900;
  background: #ef4444;
  color: #ffffff;
  border-radius: min(1.5cqw, 6px);
  padding: 1px min(1.2cqw, 5px);
  box-shadow: 0 1px 3px rgba(239, 68, 68, 0.3);
  display: inline-block;
  white-space: nowrap !important;
}

.result-coin-current-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(0.8cqw, 3px);
  line-height: 1;
}

.result-coin-current-icon {
  font-size: min(2.6cqw, 0.72rem);
  line-height: 1;
  opacity: 0.85;
}

.result-coin-total-val {
  font-family: var(--font-title);
  font-size: min(3.4cqw, 0.92rem);
  font-weight: 900;
  color: #78350f;
  letter-spacing: 0.5px;
  line-height: 1;
  white-space: nowrap !important;
  transition: transform 0.05s ease, color 0.15s ease;
}

.result-coin-total-val.counting {
  color: #d97706;
  transform: scale(1.10);
}

/* Rule Tabs Disabled State during Matching */
.online-rule-tabs-container.is-disabled {
  opacity: 0.35;
  pointer-events: none;
  filter: grayscale(0.8);
  transition: all 0.25s ease;
}

/* Matching Searching View (Cyber Radar & Status) */
.online-matching-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: min(3.5cqw, 14px) min(2.5cqw, 10px);
  gap: min(2cqw, 8px);
  animation: fadeIn 0.22s ease;
  box-sizing: border-box;
}

.matching-badge-row {
  display: flex;
  justify-content: center;
}

.matching-mode-badge {
  background: rgba(0, 240, 255, 0.15);
  border: min(0.4cqw, 1.5px) solid rgba(0, 240, 255, 0.45);
  color: #00f0ff;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 800;
  font-size: min(3.2cqw, 0.82rem);
  padding: min(0.8cqw, 3px) min(3.5cqw, 14px);
  border-radius: min(3cqw, 12px);
  letter-spacing: 0.5px;
  box-shadow: 0 0 min(2.5cqw, 10px) rgba(0, 240, 255, 0.2);
  white-space: nowrap !important;
}

/* Cyber Radar Pulse Animation */
.matching-radar-container {
  position: relative;
  width: min(22cqw, 90px);
  height: min(22cqw, 90px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: min(1cqw, 4px) 0;
}

.matching-radar-pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: min(0.4cqw, 1.5px) solid rgba(0, 240, 255, 0.6);
  opacity: 0;
  animation: radarWave 2.2s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
}

.pulse-delay-1 {
  animation-delay: 0.7s;
}

.pulse-delay-2 {
  animation-delay: 1.4s;
}

.matching-radar-core {
  width: min(11cqw, 45px);
  height: min(11cqw, 45px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.25) 0%, rgba(10, 16, 30, 0.85) 100%);
  border: min(0.4cqw, 1.5px) solid #00f0ff;
  box-shadow: 0 0 min(4cqw, 16px) rgba(0, 240, 255, 0.4);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.matching-radar-scanner {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0, 240, 255, 0.5) 0deg, transparent 90deg, transparent 360deg);
  animation: radarSpin 1.8s linear infinite;
}

@keyframes radarWave {
  0% {
    transform: scale(0.35);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

@keyframes radarSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.matching-status-title {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: min(3.8cqw, 0.95rem);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.5px;
  text-shadow: 0 0 min(2.5cqw, 10px) rgba(0, 240, 255, 0.4);
  white-space: nowrap !important;
}

.matching-timer-text {
  font-family: 'Teko', sans-serif;
  font-size: min(7.5cqw, 2.0rem);
  font-weight: 700;
  color: #38bdf8;
  letter-spacing: 2px;
  line-height: 1;
}

.matching-status-sub {
  font-size: min(2.6cqw, 0.68rem);
  color: var(--text-dim);
  margin: 0;
  text-align: center;
  white-space: nowrap !important;
}

.btn-cancel-matching {
  background: rgba(239, 68, 68, 0.15);
  border: min(0.4cqw, 1.5px) solid rgba(239, 68, 68, 0.5);
  color: #f87171;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 800;
  font-size: min(3.2cqw, 0.82rem);
  padding: min(1.5cqw, 6px) min(5cqw, 20px);
  border-radius: min(2cqw, 8px);
  cursor: pointer;
  margin-top: min(1cqw, 4px);
  transition: all 0.18s ease;
  box-shadow: 0 0 min(2.5cqw, 10px) rgba(239, 68, 68, 0.2);
  white-space: nowrap !important;
}

.btn-cancel-matching:hover, .btn-cancel-matching:active {
  background: rgba(239, 68, 68, 0.3);
  border-color: #ef4444;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.4);
  transform: translateY(-1px);
}

/* Private Room Code Box inside Matching View */
.matching-private-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(1cqw, 4px);
  background: rgba(15, 23, 42, 0.75);
  border: min(0.4cqw, 1.5px) solid rgba(16, 185, 129, 0.4);
  border-radius: min(2.5cqw, 10px);
  padding: min(1.8cqw, 7px) min(3.5cqw, 14px);
  width: 90%;
  max-width: min(60cqw, 240px);
  box-shadow: 0 0 min(4cqw, 16px) rgba(16, 185, 129, 0.2);
  animation: fadeIn 0.2s ease;
  box-sizing: border-box;
}

.matching-private-box.hidden {
  display: none !important;
}

.private-code-label {
  font-size: min(2.4cqw, 0.65rem);
  font-weight: 800;
  color: #6ee7b7;
  letter-spacing: 1px;
}

.private-code-val {
  font-family: var(--font-title);
  font-size: min(5cqw, 1.4rem);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 2px;
  line-height: 1;
}

.btn-copy-matching-code {
  background: rgba(16, 185, 129, 0.2);
  border: min(0.3cqw, 1px) solid #10b981;
  color: #34d399;
  font-family: var(--font-main);
  font-weight: 800;
  font-size: min(2.6cqw, 0.72rem);
  padding: min(1cqw, 4px) min(3cqw, 12px);
  border-radius: min(1.5cqw, 6px);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap !important;
}

.btn-copy-matching-code:hover, .btn-copy-matching-code:active {
  background: rgba(16, 185, 129, 0.35);
  border-color: #34d399;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.5);
  transform: translateY(-1px);
}

/* ============================================================
   Skin Selection Modal Styles
   ============================================================ */
#skin-modal {
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  pointer-events: auto;
}

#skin-modal.hidden {
  display: none !important;
  pointer-events: none !important;
}

.skin-modal-panel {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
  border: min(0.8cqw, 3.5px) solid #38bdf8;
  box-shadow: 0 min(4cqw, 16px) min(10cqw, 40px) rgba(0, 0, 0, 0.5), 0 0 min(6cqw, 25px) rgba(56, 189, 248, 0.4);
  border-radius: min(5.5cqw, 22px);
  width: 100%;
  max-width: min(94cqw, 400px);
  height: min(88vh, 600px);
  max-height: 88vh;
  padding: min(3.5cqw, 14px) min(4cqw, 16px) min(4cqw, 16px);
  display: flex;
  flex-direction: column;
  gap: min(2.5cqw, 10px);
  overflow: hidden;
  animation: modalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  color: #ffffff;
  box-sizing: border-box;
}

.skin-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: min(1.5cqw, 6px);
  border-bottom: min(0.5cqw, 2px) solid rgba(255, 255, 255, 0.25);
  padding-bottom: min(2cqw, 8px);
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}

.skin-modal-title-group {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.skin-modal-title {
  font-family: var(--font-main);
  font-size: clamp(0.70rem, 3.8cqw, 1.25rem);
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #ffffff;
  line-height: 1.1;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Combined Selected Skin + Accessory Preview */
.skin-accessory-preview-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(224, 242, 254, 0.90) 100%);
  border: min(0.5cqw, 2px) solid #7dd3fc;
  border-radius: min(4.5cqw, 18px);
  padding: min(2cqw, 8px) min(3cqw, 12px);
  display: flex;
  align-items: center;
  gap: min(3cqw, 12px);
  box-shadow: 0 min(1cqw, 4px) min(3cqw, 12px) rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  min-height: min(26cqw, 105px);
  box-sizing: border-box;
}

.skin-accessory-preview-box {
  width: min(24cqw, 96px);
  height: min(24cqw, 96px);
  border-radius: min(4cqw, 16px);
  background: radial-gradient(circle, rgba(15, 23, 42, 0.9) 0%, rgba(3, 105, 161, 0.85) 100%);
  border: min(0.6cqw, 2.5px) solid #38bdf8;
  box-shadow: 0 0 min(3cqw, 12px) rgba(56, 189, 248, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  position: relative;
  flex-shrink: 0;
}

#skin-accessory-preview-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.skin-preview-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: min(1.2cqw, 5px);
  overflow: hidden;
  flex: 1;
}

.skin-preview-tag-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.skin-preview-tag {
  font-size: min(2.5cqw, 0.65rem);
  font-weight: 900;
  color: #0284c7;
  letter-spacing: 0.8px;
  line-height: 1;
  white-space: nowrap !important;
}

.skin-preview-name {
  font-family: var(--font-main);
  font-size: min(5.2cqw, 1.30rem);
  font-weight: 900;
  color: #0369a1;
  letter-spacing: 0.5px;
  line-height: 1.15;
  white-space: nowrap !important;
  text-overflow: ellipsis;
  overflow: hidden;
}

.accessory-preview-name {
  font-family: var(--font-main);
  font-size: min(3.8cqw, 0.95rem);
  font-weight: 800;
  color: #0284c7;
  line-height: 1.2;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: clip;
  width: 100%;
  text-align: left !important;
}

/* Custom Tab Bar (Skin / Accessory Switcher) */
.custom-tab-bar {
  display: flex;
  gap: min(2cqw, 8px);
  width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
}

.custom-tab-btn {
  flex: 1;
  background: rgba(15, 23, 42, 0.55);
  border: min(0.5cqw, 2px) solid rgba(255, 255, 255, 0.25);
  border-radius: min(3.5cqw, 14px);
  padding: min(2cqw, 8px) min(2cqw, 8px);
  color: rgba(255, 255, 255, 0.80);
  font-family: var(--font-main);
  font-size: clamp(0.75rem, 3.8cqw, 1.05rem);
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-tab-btn:hover {
  background: rgba(15, 23, 42, 0.75);
  border-color: #38bdf8;
  color: #ffffff;
}

.custom-tab-btn.active {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: 0 0 min(2.5cqw, 10px) rgba(56, 189, 248, 0.6);
}

/* Accessory Grid Item Card */
.accessory-card {
  background: rgba(15, 23, 42, 0.45);
  border: min(0.5cqw, 2px) solid rgba(255, 255, 255, 0.20);
  border-radius: min(3cqw, 12px);
  padding: min(2cqw, 8px) min(1cqw, 4px) min(1.5cqw, 6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(1cqw, 4px);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  user-select: none;
}

.accessory-card:hover {
  background: rgba(15, 23, 42, 0.70);
  border-color: #38bdf8;
  transform: translateY(-2px);
}

.accessory-card.active {
  background: rgba(2, 132, 199, 0.45);
  border-color: #fde047;
  box-shadow: 0 0 min(2.5cqw, 10px) rgba(250, 204, 21, 0.55);
}

.accessory-card-thumb-wrap,
.accessory-card-icon-wrap {
  width: min(12cqw, 48px);
  height: min(12cqw, 48px);
  border-radius: min(2.5cqw, 10px);
  background: rgba(15, 23, 42, 0.7);
  border: min(0.4cqw, 1.5px) solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(6cqw, 24px);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.accessory-card.active .accessory-card-icon-wrap,
.accessory-card.active .accessory-card-thumb-wrap {
  border-color: #fde047;
  box-shadow: 0 0 min(2cqw, 8px) rgba(250, 204, 21, 0.4);
}

.accessory-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: min(2cqw, 8px);
  display: block;
}

.accessory-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.accessory-card-name {
  font-family: var(--font-main);
  font-size: min(3.0cqw, 0.80rem);
  font-weight: 800;
  color: #ffffff;
  text-align: center;
  line-height: 1.15;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: clip;
  width: 100%;
  padding: 0 1px;
  box-sizing: border-box;
}

/* Custom Scrollable Grid Wrapper for Skins */
.skin-grid-scroll-wrap {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: #38bdf8 rgba(15, 23, 42, 0.35);
}

.skin-grid-scroll-wrap::-webkit-scrollbar {
  width: 6px;
}

.skin-grid-scroll-wrap::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.35);
  border-radius: 999px;
  margin: 3px 0;
}

.skin-grid-scroll-wrap::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.skin-grid-scroll-wrap::-webkit-scrollbar-thumb:hover {
  background: #7dd3fc;
}

/* 4-Columns Skin Grid */
.skin-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: min(1.5cqw, 6px);
  padding-bottom: 4px;
}

.skin-card {
  background: rgba(15, 23, 42, 0.45);
  border: min(0.5cqw, 2px) solid rgba(255, 255, 255, 0.20);
  border-radius: min(3cqw, 12px);
  padding: min(2cqw, 8px) min(1cqw, 4px) min(1.5cqw, 6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(1cqw, 4px);
  cursor: pointer;
  box-shadow: 0 min(0.75cqw, 3px) 0 rgba(0, 0, 0, 0.2);
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  position: relative;
  box-sizing: border-box;
}

.skin-card:hover {
  border-color: #38bdf8;
  background: rgba(255, 255, 255, 0.2);
}

/* Active Highlight Window (ボーダー幅2px統一で完全固定) */
.skin-card.active {
  border: min(0.5cqw, 2px) solid #f59e0b;
  background: linear-gradient(180deg, #fef08a 0%, #fef9c3 35%, #ffffff 100%);
  box-shadow: 0 min(0.75cqw, 3px) 0 #d97706, 0 0 min(3.5cqw, 14px) rgba(245, 158, 11, 0.45);
}

.skin-card-thumb-wrap {
  width: min(11cqw, 44px);
  height: min(11cqw, 44px);
  border-radius: min(2.5cqw, 10px);
  background: rgba(255, 255, 255, 0.95);
  border: min(0.5cqw, 2px) solid rgba(255, 255, 255, 0.35);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  box-sizing: border-box;
}

.skin-card.active .skin-card-thumb-wrap {
  border: min(0.5cqw, 2px) solid #f59e0b;
  box-shadow: 0 0 min(2cqw, 8px) rgba(245, 158, 11, 0.4);
}

.skin-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.skin-card-name {
  font-family: var(--font-main);
  font-size: min(3.0cqw, 0.76rem);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.3px;
  line-height: 1;
  white-space: nowrap !important;
}

.skin-card.active .skin-card-name {
  color: #78350f;
  font-weight: 900;
}

/* Locked Skin State */
.skin-card.locked {
  opacity: 0.60;
  background: rgba(15, 23, 42, 0.60);
  border: 2px dashed rgba(255, 255, 255, 0.25);
  box-shadow: none;
  cursor: default !important;
}
.skin-card.locked:hover {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(15, 23, 42, 0.75);
}
.skin-card.locked .skin-card-thumb-wrap {
  filter: grayscale(90%) brightness(55%);
  position: relative;
}
.skin-card-lock-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  font-size: min(4.5cqw, 1.15rem);
  line-height: 1;
}
.skin-card.locked .skin-card-name {
  color: #94a3b8;
}

/* Locked Accessory State */
.accessory-card.locked {
  opacity: 0.55;
  background: rgba(15, 23, 42, 0.60);
  border: 2px dashed rgba(255, 255, 255, 0.22);
  box-shadow: none;
  cursor: default !important;
}
.accessory-card.locked:hover {
  border-color: rgba(255, 255, 255, 0.40);
  background: rgba(15, 23, 42, 0.75);
}
.accessory-card.locked .accessory-card-icon-wrap {
  filter: grayscale(90%) brightness(55%);
  position: relative;
}
.accessory-card-lock-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  font-size: min(4.5cqw, 1.15rem);
  line-height: 1;
}
.accessory-card.locked .accessory-card-name {
  color: #94a3b8;
}

/* Floating Toast Notification */
#floating-toast-container {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  align-items: center;
}
.custom-floating-toast {
  background: rgba(15, 23, 42, 0.95);
  border: 2px solid #38bdf8;
  border-radius: 14px;
  padding: 10px 22px;
  color: #ffffff;
  font-family: var(--font-main, sans-serif);
  font-weight: 900;
  font-size: 0.95rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 16px rgba(56,189,248,0.5);
  opacity: 0;
  transform: translateY(-12px);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  pointer-events: none;
}

/* Skin Modal Stats (Coins & Unlocked count in header) */
.skin-modal-stats {
  display: flex;
  align-items: center;
  gap: min(1.2cqw, 5px);
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 0;
}
.skin-stat-pill {
  display: flex;
  align-items: center;
  gap: min(0.8cqw, 3px);
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: min(3cqw, 12px);
  padding: min(0.6cqw, 2px) min(1.6cqw, 6px);
  font-family: var(--font-title);
  font-size: min(2.8cqw, 0.78rem);
  font-weight: 800;
  color: #f8fafc;
  user-select: none;
  white-space: nowrap !important;
  flex-shrink: 0;
  transition: all 0.18s ease;
}
.skin-stat-pill.active {
  border-color: #38bdf8;
  background: rgba(2, 132, 199, 0.45);
  box-shadow: 0 0 min(2cqw, 8px) rgba(56, 189, 248, 0.45);
}
.skin-stat-pill .stat-icon {
  font-size: min(3.2cqw, 0.85rem);
}
.skin-stat-pill .stat-val {
  color: #fef08a;
  font-size: min(2.8cqw, 0.78rem);
  font-weight: 800;
}

.skin-open-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.skin-open-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #a855f7;
  color: #ffffff;
}

/* ========================================================
   HOW TO PLAY (GUIDE MODAL) STYLES
   ======================================================== */
.guide-open-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #a16207;
}

.guide-open-btn:hover {
  background: linear-gradient(180deg, #fef9c3 0%, #fde047 50%, #ca8a04 100%);
}

/* Guide Modal Overlay Screen */
#guide-modal {
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  pointer-events: auto;
}

#guide-modal.hidden {
  display: none !important;
  pointer-events: none !important;
}

/* Modal Panel */
.guide-modal-panel {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
  border: min(0.8cqw, 3.5px) solid #38bdf8;
  border-radius: min(4.5cqw, 22px);
  width: 100%;
  max-width: min(94cqw, 520px);
  height: min(600px, 86vh);
  max-height: 86vh;
  box-shadow: 0 min(3cqw, 16px) min(8cqw, 40px) rgba(0, 0, 0, 0.5), 0 0 min(5cqw, 25px) rgba(56, 189, 248, 0.4);
  display: flex;
  flex-direction: column;
  padding: min(2.5cqw, 14px) min(3cqw, 16px);
  gap: min(2cqw, 10px);
  position: relative;
  z-index: 121;
  pointer-events: auto;
  color: #ffffff;
  overflow: hidden;
}

.guide-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: min(1.2cqw, 6px);
  border-bottom: min(0.5cqw, 2px) solid rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

.guide-modal-title-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.guide-modal-title {
  font-family: var(--font-main);
  font-size: min(4.8cqw, 1.25rem);
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #ffffff;
  line-height: 1.1;
  margin: 0;
  white-space: nowrap !important;
}

/* 3 Main Category Tabs (No Emojis) */
.guide-tabs-container {
  display: flex;
  gap: min(1cqw, 4px);
  background: rgba(15, 23, 42, 0.45);
  padding: min(0.6cqw, 3px);
  border-radius: min(2.2cqw, 10px);
  border: min(0.3cqw, 1px) solid rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

.guide-tab-btn {
  flex: 1;
  height: min(7.5cqw, 32px);
  padding: 0 min(0.5cqw, 2px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: min(1.6cqw, 7px);
  color: #e0f2fe;
  font-size: min(2.7cqw, 0.76rem);
  font-weight: 900;
  cursor: pointer;
  transition: all 0.10s ease;
  white-space: nowrap !important;
  letter-spacing: -0.2px;
}

.guide-tab-btn:active {
  transform: translateY(min(0.5cqw, 2px));
}

.guide-tab-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.guide-tab-btn.active {
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 50%, #d97706 100%);
  border-color: #fde047;
  color: #78350f;
  box-shadow: 0 min(0.5cqw, 2px) 0 #b45309;
}

/* Guide Body Layout (Scrollable Cards) */
.guide-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
  display: flex;
  flex-direction: column;
  gap: min(1.8cqw, 8px);
}

.guide-modal-body::-webkit-scrollbar {
  width: 5px;
}

.guide-modal-body::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.4);
  border-radius: 4px;
}

.guide-content-area {
  display: flex;
  flex-direction: column;
  gap: min(1.8cqw, 8px);
}

/* Intro banner card */
.guide-intro-card {
  background: rgba(15, 23, 42, 0.4);
  border: min(0.4cqw, 1.5px) solid rgba(56, 189, 248, 0.4);
  border-radius: min(2.5cqw, 12px);
  padding: min(1.5cqw, 7px) min(2.5cqw, 12px);
  display: flex;
  flex-direction: column;
  gap: min(0.5cqw, 2px);
}

.guide-intro-title {
  font-family: var(--font-main);
  font-size: min(3.2cqw, 0.88rem);
  font-weight: 900;
  color: #fde047;
}

.guide-intro-desc {
  font-family: var(--font-main);
  font-size: min(2.5cqw, 0.70rem);
  color: #e2e8f0;
  line-height: 1.45;
  margin: 0;
  font-weight: 600;
}

/* Step Cards */
.guide-step-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(224, 242, 254, 0.90) 100%);
  border: min(0.4cqw, 1.5px) solid #7dd3fc;
  border-radius: min(2.5cqw, 12px);
  padding: min(1.8cqw, 8px) min(2.5cqw, 12px);
  display: flex;
  flex-direction: column;
  gap: min(0.8cqw, 3px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.guide-step-header {
  display: flex;
  align-items: center;
  gap: min(1.5cqw, 6px);
}

.guide-step-num {
  width: min(5cqw, 20px);
  height: min(5cqw, 20px);
  border-radius: min(1.2cqw, 5px);
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
  color: #ffffff;
  font-family: var(--font-title);
  font-size: min(2.8cqw, 0.78rem);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 0 #0369a1;
}

.guide-step-title {
  font-family: var(--font-main);
  font-size: min(3.0cqw, 0.82rem);
  font-weight: 800;
  color: #0369a1;
  line-height: 1.15;
}

.guide-step-desc {
  font-family: var(--font-main);
  font-size: min(2.5cqw, 0.70rem);
  color: #0f172a;
  line-height: 1.45;
  letter-spacing: 0.1px;
  margin: 0;
  font-weight: 500;
}

/* Callout point */
.guide-callout {
  font-family: var(--font-main);
  background: linear-gradient(180deg, rgba(254, 243, 199, 0.96) 0%, rgba(253, 230, 138, 0.90) 100%);
  border: min(0.4cqw, 1.5px) solid #f59e0b;
  border-radius: min(2.2cqw, 10px);
  padding: min(1.5cqw, 7px) min(2.5cqw, 12px);
  font-size: min(2.5cqw, 0.70rem);
  color: #78350f;
  line-height: 1.45;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.15);
}

.guide-callout strong {
  color: #b45309;
}

/* ========================================================
   SKIN GACHA MODAL STYLES (Matched with Guide Modal)
   ======================================================== */
#gacha-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  pointer-events: auto;
  box-sizing: border-box;
}

#gacha-modal.hidden {
  display: none !important;
  pointer-events: none !important;
}

.gacha-modal-panel {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
  border: min(0.8cqw, 3.5px) solid #38bdf8;
  border-radius: min(4.5cqw, 22px);
  width: 100%;
  max-width: min(94cqw, 440px);
  max-height: 90vh;
  box-shadow: 0 min(3cqw, 16px) min(8cqw, 40px) rgba(0, 0, 0, 0.5), 0 0 min(5cqw, 25px) rgba(56, 189, 248, 0.4);
  display: flex;
  flex-direction: column;
  padding: min(2cqw, 12px) min(3cqw, 16px) min(2.5cqw, 14px);
  position: relative;
  z-index: 121;
  pointer-events: auto;
  color: #ffffff;
  box-sizing: border-box;
  animation: modalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
}

.gacha-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: min(1.2cqw, 6px);
  border-bottom: min(0.5cqw, 2px) solid rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
  margin-bottom: min(1.5cqw, 8px);
}

.gacha-modal-title-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.gacha-modal-title {
  font-family: var(--font-main);
  font-size: min(4.8cqw, 1.25rem);
  font-weight: 900;
  letter-spacing: 0.8px;
  color: #ffffff;
  line-height: 1.1;
  margin: 0;
  white-space: nowrap !important;
}

.gacha-header-coins {
  display: flex;
  align-items: center;
  gap: min(1cqw, 4px);
  background: rgba(15, 23, 42, 0.5);
  border: min(0.4cqw, 1.5px) solid #fbbf24;
  border-radius: min(2.5cqw, 14px);
  padding: min(1cqw, 4px) min(2.5cqw, 12px);
  margin-left: auto;
  margin-right: min(1.8cqw, 8px);
  box-shadow: 0 0 min(2cqw, 10px) rgba(251, 191, 36, 0.3);
}
.gacha-header-coins .coin-icon {
  font-size: min(3.5cqw, 1rem);
}
.gacha-header-coins .coin-val {
  font-family: var(--font-title);
  font-size: min(3.8cqw, 1.05rem);
  font-weight: 900;
  color: #fef08a;
}

/* Gacha Tab Switcher */
.gacha-tab-row {
  display: flex;
  gap: min(1.5cqw, 8px);
  width: 100%;
  margin-bottom: min(1.5cqw, 8px);
  flex-shrink: 0;
}

/* Hide gacha category tabs during animation and result views */
.gacha-modal-panel:has(#gacha-anim-view:not(.hidden)) .gacha-tab-row,
.gacha-modal-panel:has(#gacha-result-view:not(.hidden)) .gacha-tab-row {
  display: none !important;
}

.gacha-tab-btn {
  flex: 1;
  padding: min(1.5cqw, 7px) min(2cqw, 10px);
  background: rgba(15, 23, 42, 0.55);
  border: min(0.4cqw, 1.5px) solid rgba(255, 255, 255, 0.22);
  border-radius: min(2.5cqw, 12px);
  color: #94a3b8;
  font-family: var(--font-title);
  font-size: min(3.6cqw, 1.0rem);
  font-weight: 900;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  user-select: none;
}
.gacha-tab-btn:hover {
  background: rgba(15, 23, 42, 0.75);
  color: #f1f5f9;
}
.gacha-tab-btn.active {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 min(2.5cqw, 12px) rgba(56, 189, 248, 0.45);
}

/* Gacha Select View */
.gacha-select-view {
  display: flex;
  flex-direction: column;
}

/* Gacha Cards */
.gacha-cards-list {
  display: flex;
  flex-direction: column;
}

.gacha-type-card {
  background: rgba(15, 23, 42, 0.45);
  border: min(0.5cqw, 2px) solid rgba(255, 255, 255, 0.3);
  border-radius: min(3.5cqw, 18px);
  padding: min(2cqw, 11px) min(2.8cqw, 14px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: min(1.5cqw, 8px);
  min-height: min(50vh, 278px);
  box-shadow: 0 min(1cqw, 4px) min(3cqw, 16px) rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

.gacha-card-banner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.gacha-banner-badge {
  align-self: flex-start;
  font-size: min(2.6cqw, 0.68rem);
  font-weight: 900;
  color: #ffffff;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: min(0.5cqw, 2px) min(1.8cqw, 8px);
  border-radius: min(1.5cqw, 6px);
  letter-spacing: 0.5px;
  white-space: nowrap !important;
}

.gacha-card-name {
  font-family: var(--font-title);
  font-size: min(4.2cqw, 1.15rem);
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.5px;
  white-space: nowrap !important;
}

.gacha-card-desc {
  font-size: min(2.7cqw, 0.74rem);
  color: #bae6fd;
  margin: 0;
  line-height: 1.25;
  letter-spacing: 0.2px;
}

.gacha-showcase-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: min-content;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  gap: min(1.2cqw, 6px) min(0.8cqw, 4px);
  background: rgba(0, 0, 0, 0.35);
  border: min(0.4cqw, 1.5px) solid rgba(255, 255, 255, 0.2);
  border-radius: min(2.8cqw, 14px);
  padding: min(1.5cqw, 7px) min(1.2cqw, 6px);
  box-sizing: border-box;
  height: min(32vh, 176px);
  min-height: min(32vh, 176px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #38bdf8 rgba(15, 23, 42, 0.35);
  -webkit-overflow-scrolling: touch;
}

.gacha-showcase-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.gacha-showcase-icon {
  width: min(7.5cqw, 35px);
  height: min(7.5cqw, 35px);
  border-radius: min(1.8cqw, 8px);
  background: rgba(255, 255, 255, 0.95);
  border: min(0.4cqw, 1.5px) solid rgba(255, 255, 255, 0.4);
  object-fit: cover;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.gacha-showcase-name {
  font-family: var(--font-title);
  font-size: min(2.4cqw, 0.60rem);
  font-weight: 900;
  color: #cbd5e1;
  letter-spacing: 0.2px;
  line-height: 1;
  white-space: nowrap !important;
}

.gacha-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: min(0.8cqw, 3px);
  flex-shrink: 0;
}

.gacha-price-info {
  display: flex;
  align-items: center;
  gap: min(1cqw, 5px);
}
.gacha-price-info .price-label {
  font-size: min(3.0cqw, 0.76rem);
  font-weight: 800;
  color: #bae6fd;
  white-space: nowrap !important;
}
.gacha-price-info .price-val {
  font-family: var(--font-title);
  font-size: min(4.5cqw, 1.25rem);
  font-weight: 900;
  color: #fef08a;
  white-space: nowrap !important;
}

.gacha-pull-btn {
  height: min(7.5cqw, 34px);
  padding: min(1.2cqw, 5px) min(3.2cqw, 14px);
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 50%, #d97706 100%);
  border: min(0.4cqw, 1.5px) solid #fef08a;
  border-radius: min(2.2cqw, 10px);
  color: #78350f;
  font-family: var(--font-title);
  font-size: min(3.2cqw, 0.88rem);
  font-weight: 900;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 min(0.6cqw, 3px) 0 #b45309, 0 min(0.6cqw, 3px) min(2.5cqw, 10px) rgba(245, 158, 11, 0.5);
  transition: all 0.10s ease;
  white-space: nowrap !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gacha-pull-btn:active {
  transform: translateY(min(0.5cqw, 2px));
  box-shadow: 0 min(0.2cqw, 1px) 0 #b45309;
}

/* Gacha Result View */
.gacha-result-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: min(2.5cqw, 10px) 0 min(1.5cqw, 6px);
  animation: bannerPop 0.35s ease;
  box-sizing: border-box;
}

.gacha-result-capsule-anim {
  position: relative;
  width: min(24cqw, 96px);
  height: min(24cqw, 96px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: min(2cqw, 8px);
}

.gacha-light-rays {
  position: absolute;
  width: min(32cqw, 130px);
  height: min(32cqw, 130px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.7) 0%, rgba(245, 158, 11, 0.4) 45%, transparent 70%);
  animation: spin 6s linear infinite;
}

.gacha-result-skin-ring {
  position: relative;
  width: min(20cqw, 80px);
  height: min(20cqw, 80px);
  border-radius: min(4.5cqw, 18px);
  background: rgba(255, 255, 255, 0.95);
  border: min(0.6cqw, 2.5px) solid #f59e0b;
  box-shadow: 0 0 min(5cqw, 20px) rgba(245, 158, 11, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: bounce 1.2s infinite alternate ease-in-out;
}

.gacha-result-skin-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gacha-result-status-badge {
  font-family: var(--font-title);
  font-size: min(3.2cqw, 0.88rem);
  font-weight: 900;
  color: #ffffff;
  background: #f59e0b;
  border: min(0.4cqw, 1.5px) solid #fef08a;
  padding: min(0.8cqw, 3px) min(3cqw, 12px);
  border-radius: 999px;
  letter-spacing: 0.8px;
  margin-bottom: min(1cqw, 4px);
  box-shadow: 0 0 min(2.5cqw, 10px) rgba(245, 158, 11, 0.5);
  white-space: nowrap !important;
}
.gacha-result-status-badge.duplicate {
  background: #0284c7;
  border-color: #7dd3fc;
  box-shadow: 0 0 min(2.5cqw, 10px) rgba(2, 132, 199, 0.5);
}

.gacha-result-skin-name {
  font-family: var(--font-title);
  font-size: min(5.5cqw, 1.55rem);
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 min(1cqw, 4px);
  letter-spacing: 1px;
  white-space: nowrap !important;
}

.gacha-result-desc {
  font-size: min(2.8cqw, 0.80rem);
  color: #e0f2fe;
  margin: 0 0 min(2.5cqw, 10px);
  white-space: nowrap !important;
}

.gacha-result-btn-row {
  display: flex;
  flex-direction: column;
  gap: min(1.8cqw, 7px);
  width: 100%;
  box-sizing: border-box;
}

.gacha-result-sub-btn-row {
  display: flex;
  flex-direction: row;
  gap: min(1.8cqw, 7px);
  width: 100%;
  box-sizing: border-box;
}

.gacha-result-sub-btn-row .gacha-action-btn {
  flex: 1;
  min-width: 0;
}

.gacha-action-btn {
  width: 100%;
  padding: min(2.5cqw, 10px) min(1.5cqw, 6px);
  border-radius: min(3cqw, 12px);
  font-family: var(--font-title);
  font-size: min(3.4cqw, 0.90rem);
  font-weight: 900;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.10s ease;
  white-space: nowrap !important;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gacha-action-btn.pull-again-btn {
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 50%, #d97706 100%);
  border: min(0.5cqw, 2px) solid #fef08a;
  color: #78350f;
  box-shadow: 0 min(0.8cqw, 3px) 0 #b45309, 0 min(1cqw, 4px) min(2.5cqw, 10px) rgba(245, 158, 11, 0.4);
  gap: min(1.8cqw, 8px);
  white-space: nowrap !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.gacha-pull-again-cost {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  width: auto !important;
  gap: 3px;
  background: rgba(0, 0, 0, 0.22);
  padding: 1px min(1.8cqw, 7px);
  border-radius: min(1.8cqw, 7px);
  font-family: 'Teko', sans-serif;
  font-size: min(3.8cqw, 1.12rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  transform: translateY(0.5px);
}

.gacha-pull-again-cost .coin-icon {
  font-size: min(2.8cqw, 0.82rem);
  line-height: 1;
  display: inline-block !important;
  flex-shrink: 0 !important;
  width: auto !important;
}

.gacha-pull-again-text {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  width: auto !important;
  text-align: center !important;
}
.gacha-action-btn.equip-btn {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
  border: min(0.5cqw, 2px) solid #bae6fd;
  color: #ffffff;
  box-shadow: 0 min(0.8cqw, 3px) 0 #0369a1, 0 min(1cqw, 4px) min(2.5cqw, 10px) rgba(2, 132, 199, 0.4);
}
.gacha-action-btn.back-btn {
  background: rgba(15, 23, 42, 0.55);
  border: min(0.4cqw, 1.5px) solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  box-shadow: 0 min(0.5cqw, 2px) 0 rgba(0, 0, 0, 0.25);
}
.gacha-action-btn:active {
  transform: translateY(min(0.5cqw, 2px));
}

/* ========================================================
   Gacha Opening Animation View Styles
   ======================================================== */
.gacha-anim-view {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: min(4cqw, 16px) 0 min(2.5cqw, 10px);
  box-sizing: border-box;
  animation: fadeIn 0.25s ease-out;
}

.gacha-skip-btn {
  position: absolute;
  top: -4px;
  right: 0;
  background: rgba(15, 23, 42, 0.65);
  border: min(0.4cqw, 1.5px) solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  color: #ffffff;
  font-family: var(--font-title);
  font-size: min(2.8cqw, 0.76rem);
  font-weight: 900;
  padding: min(0.8cqw, 3px) min(2.5cqw, 10px);
  cursor: pointer;
  box-shadow: 0 min(0.5cqw, 2px) min(1.5cqw, 6px) rgba(0, 0, 0, 0.3);
  transition: all 0.1s ease;
  z-index: 10;
  white-space: nowrap !important;
}
.gacha-skip-btn:active {
  transform: scale(0.95);
}

.gacha-anim-stage {
  position: relative;
  width: min(38cqw, 160px);
  height: min(38cqw, 160px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gacha-anim-glow-ring {
  position: absolute;
  width: min(35cqw, 150px);
  height: min(35cqw, 150px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253, 224, 71, 0.55) 0%, rgba(56, 189, 248, 0.35) 50%, transparent 70%);
  animation: pulseGlow 1.0s infinite alternate ease-in-out;
}

@keyframes pulseGlow {
  0% { transform: scale(0.85); opacity: 0.5; }
  100% { transform: scale(1.25); opacity: 1; filter: drop-shadow(0 0 min(3.5cqw, 15px) #fde047); }
}

.gacha-anim-rays {
  position: absolute;
  width: min(42cqw, 180px);
  height: min(42cqw, 180px);
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(254, 240, 138, 0.45) 0deg 15deg,
    transparent 15deg 30deg,
    rgba(56, 189, 248, 0.45) 30deg 45deg,
    transparent 45deg 60deg
  );
  animation: raySpin 3.5s linear infinite;
}

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

/* Golden Sphere / Capsule Ball */
.gacha-capsule {
  position: relative;
  width: min(20cqw, 82px);
  height: min(20cqw, 82px);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, #ffffff 0%, #fef08a 25%, #f59e0b 65%, #b45309 100%);
  border: min(0.8cqw, 3.5px) solid #ffffff;
  box-shadow: 0 min(2.5cqw, 10px) min(6cqw, 25px) rgba(0, 0, 0, 0.5), 0 0 min(7cqw, 28px) rgba(245, 158, 11, 0.85), inset 0 0 min(3.5cqw, 15px) rgba(255, 255, 255, 0.8);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: capsuleIntenseShake 0.10s infinite alternate ease-in-out;
}

@keyframes capsuleIntenseShake {
  0% { transform: translate(min(-0.8cqw, -3px), min(-0.5cqw, -2px)) rotate(-8deg) scale(1.02); }
  50% { transform: translate(min(0.8cqw, 3px), min(0.5cqw, 2px)) rotate(8deg) scale(1.06); }
  100% { transform: translate(min(-0.5cqw, -2px), min(0.8cqw, 3px)) rotate(-6deg) scale(1.08); }
}

.capsule-seam {
  position: absolute;
  width: 100%;
  height: min(1cqw, 4px);
  background: #ffffff;
  box-shadow: 0 0 min(2.5cqw, 10px) #ffffff;
}

.capsule-glow-core {
  position: absolute;
  width: min(7cqw, 28px);
  height: min(7cqw, 28px);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 min(6cqw, 24px) min(3cqw, 12px) #ffffff;
  animation: corePulse 0.35s infinite alternate;
}

@keyframes corePulse {
  0% { opacity: 0.6; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.4); }
}

.gacha-anim-pedestal {
  position: absolute;
  bottom: min(3cqw, 12px);
  width: min(26cqw, 110px);
  height: min(4.5cqw, 18px);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 min(3.5cqw, 15px) rgba(0, 0, 0, 0.6);
  z-index: 2;
}

.gacha-anim-text {
  font-family: var(--font-title);
  font-size: min(4.5cqw, 1.15rem);
  font-weight: 900;
  letter-spacing: 2px;
  color: #fef08a;
  margin-top: min(3.5cqw, 14px);
  text-shadow: 0 0 min(3cqw, 12px) rgba(254, 240, 138, 0.8), 0 min(0.5cqw, 2px) min(1cqw, 4px) rgba(0, 0, 0, 0.6);
  animation: textBlink 0.5s infinite alternate;
  white-space: nowrap !important;
}

@keyframes textBlink {
  0% { opacity: 0.6; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1.04); }
}

/* White Flash Screen */
.gacha-flash-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 22px;
  z-index: 100;
  pointer-events: none;
  animation: flashOut 0.45s ease-out forwards;
}

@keyframes flashOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* --- Tutorial Mode Styles --- */
/* Title Button */
.tutorial-entry-btn {
  width: 100%;
  padding: 11px 16px;
  background: linear-gradient(180deg, #10e891 0%, #059669 100%);
  border: 2px solid #6ee7b7;
  border-radius: 14px;
  color: #022c22;
  font-family: var(--font-main);
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 232, 145, 0.35), 0 3px 0 #047857;
  transition: all 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tutorial-entry-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.tutorial-entry-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #047857;
}

/* In-Game Guidance Banner (Exactly at Field Center Y: 38%, matching phase-banner) */
.tutorial-guide-banner {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(88cqw, 420px);
  max-width: 420px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(2, 44, 34, 0.94) 100%);
  border: min(0.5cqw, 2px) solid #10e891;
  border-radius: min(3.5cqw, 16px);
  padding: min(2.5cqw, 12px) min(3.5cqw, 16px);
  box-shadow: 0 min(2.5cqw, 12px) min(6cqw, 32px) rgba(0, 0, 0, 0.7), 0 0 min(4cqw, 20px) rgba(16, 232, 145, 0.35);
  z-index: 80;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: min(1.2cqw, 6px);
  animation: popIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.tutorial-guide-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(1.8cqw, 8px);
}

.tutorial-step-badge {
  background: #10e891;
  color: #022c22;
  font-family: var(--font-title);
  font-size: min(2.8cqw, 0.85rem);
  font-weight: 900;
  padding: min(0.5cqw, 2px) min(1.8cqw, 8px);
  border-radius: min(1.5cqw, 6px);
  letter-spacing: 0.5px;
  white-space: nowrap !important;
}

.tutorial-step-title {
  font-family: var(--font-main);
  font-size: min(3.2cqw, 0.96rem);
  font-weight: 900;
  color: #6ee7b7;
  white-space: nowrap !important;
}

.tutorial-step-text {
  font-family: var(--font-main);
  font-size: min(2.8cqw, 0.78rem);
  color: #ffffff;
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.tutorial-step-prompt {
  font-family: var(--font-main);
  font-size: min(2.8cqw, 0.78rem);
  font-weight: 800;
  color: #fde047;
  letter-spacing: 0.5px;
  margin-top: min(0.8cqw, 4px);
  white-space: nowrap !important;
}

/* Tutorial Modals Overlay Layer (Full-screen blur & Centered) */
#tutorial-intro-modal,
#tutorial-clear-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px;
  z-index: 120;
  pointer-events: auto;
}

#tutorial-intro-modal.hidden,
#tutorial-clear-modal.hidden {
  display: none !important;
  pointer-events: none !important;
}

#game-container:has(#tutorial-intro-modal:not(.hidden)) #floating-sound-wrapper,
#game-container:has(#tutorial-clear-modal:not(.hidden)) #floating-sound-wrapper {
  z-index: 135;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Tutorial Clear & Intro Modal Panel */
.tutorial-clear-panel {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
  border: min(0.8cqw, 3.5px) solid #38bdf8;
  border-radius: min(5cqw, 20px);
  width: 90%;
  max-width: min(92cqw, 380px);
  padding: min(4cqw, 18px) min(3.5cqw, 16px);
  box-shadow: 0 min(4cqw, 16px) min(10cqw, 40px) rgba(0, 0, 0, 0.6), 0 0 min(6cqw, 25px) rgba(56, 189, 248, 0.5);
  display: flex;
  flex-direction: column;
  gap: min(3cqw, 14px);
  position: relative;
  z-index: 125;
  pointer-events: auto;
  color: #ffffff;
  text-align: center;
  margin: auto;
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-sizing: border-box;
}

#tutorial-clear-modal .tutorial-clear-panel {
  animation: popBounceIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes popBounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(50px) rotate(-5deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.08) translateY(-10px) rotate(2deg);
  }
  80% {
    transform: scale(0.96) translateY(3px) rotate(-1deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0deg);
  }
}

.tutorial-clear-header {
  border-bottom: min(0.5cqw, 2px) solid rgba(255, 255, 255, 0.2);
  padding-bottom: min(1.8cqw, 8px);
}

.tutorial-clear-title {
  font-family: var(--font-main);
  font-size: min(5.4cqw, 1.40rem);
  font-weight: 900;
  color: #fde047;
  letter-spacing: 0.5px;
  margin: 0;
  text-shadow: 0 min(0.5cqw, 2px) min(2cqw, 8px) rgba(0, 0, 0, 0.4);
  white-space: nowrap !important;
}

#tutorial-clear-modal .tutorial-clear-title {
  animation: titleBounceGlow 1.4s ease-in-out infinite alternate;
}

@keyframes titleBounceGlow {
  0% {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 10px rgba(253, 224, 71, 0.4);
    transform: scale(1);
  }
  100% {
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6), 0 0 22px rgba(253, 224, 71, 0.9);
    transform: scale(1.04);
  }
}

.tutorial-clear-title.nowrap {
  white-space: nowrap !important;
  font-size: min(4.2cqw, 1.05rem);
  letter-spacing: -0.2px;
  padding: 0 4px;
}

.tutorial-clear-body {
  display: flex;
  flex-direction: column;
  gap: min(2.5cqw, 12px);
}

.tutorial-clear-desc {
  font-family: var(--font-main);
  font-size: min(3.4cqw, 0.88rem);
  color: #e0f2fe;
  line-height: 1.5;
  margin: 0;
  font-weight: 600;
}

.tutorial-clear-btn-row {
  display: flex;
  flex-direction: column;
  gap: min(2cqw, 8px);
}

.tutorial-action-btn {
  width: 100%;
  padding: min(2.5cqw, 10px);
  border-radius: min(2.5cqw, 10px);
  font-family: var(--font-main);
  font-size: min(3.5cqw, 0.95rem);
  font-weight: 900;
  cursor: pointer;
  transition: all 0.12s ease;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  white-space: nowrap !important;
}

.tutorial-action-btn.primary-btn {
  background: linear-gradient(180deg, #10e891 0%, #059669 100%);
  color: #022c22;
  border: min(0.5cqw, 2px) solid #6ee7b7;
  box-shadow: 0 min(1cqw, 4px) min(3cqw, 12px) rgba(16, 232, 145, 0.35), 0 min(0.75cqw, 3px) 0 #047857;
}

.tutorial-action-btn.primary-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.tutorial-action-btn.primary-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #047857;
}

.tutorial-action-btn.secondary-btn {
  background: rgba(15, 23, 42, 0.65);
  color: #cbd5e1;
  border: min(0.4cqw, 1.5px) solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 min(0.75cqw, 3px) 0 rgba(0, 0, 0, 0.3);
}

.tutorial-action-btn.secondary-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.tutorial-action-btn.secondary-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

/* Tutorial Skip Button */
.tutorial-skip-btn {
  background: transparent;
  color: rgba(224, 242, 254, 0.75);
  border: min(0.3cqw, 1px) solid rgba(255, 255, 255, 0.25);
  border-radius: min(2cqw, 8px);
  padding: min(1.8cqw, 7px) min(3.5cqw, 14px);
  font-family: var(--font-main);
  font-size: min(2.8cqw, 0.78rem);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap !important;
  box-sizing: border-box;
}

.tutorial-skip-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.45);
}

.tutorial-skip-btn:active {
  transform: scale(0.97);
}

/* ============================================================
   --- ENDLESS MODE INTRO MODAL & LOADOUT HELP BUTTON ---
   ============================================================ */

#endless-intro-modal {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(3, 7, 18, 0.82) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: min(3cqw, 14px) !important;
  z-index: 130 !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
}

#endless-intro-modal.hidden {
  display: none !important;
  pointer-events: none !important;
}

.endless-intro-panel {
  max-width: min(94cqw, 420px);
  width: 100%;
  padding: min(3.8cqw, 18px) min(3.5cqw, 16px);
  gap: min(2.8cqw, 14px);
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 60%, #0f172a 100%);
  border: min(0.8cqw, 3.5px) solid #38bdf8;
  border-radius: min(5cqw, 20px);
  box-shadow: 0 0 min(8cqw, 32px) rgba(56, 189, 248, 0.6), 0 min(6cqw, 20px) min(14cqw, 50px) rgba(0, 0, 0, 0.85);
  margin: auto;
  box-sizing: border-box;
  animation: popIn 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.endless-intro-header {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: min(0.4cqw, 1.5px) solid rgba(255, 255, 255, 0.25);
  padding-bottom: min(1.8cqw, 8px);
  width: 100%;
}

.endless-intro-body {
  display: flex;
  flex-direction: column;
  gap: min(2.8cqw, 13px);
  width: 100%;
}

.endless-intro-main-desc {
  font-family: var(--font-main);
  font-size: min(3.2cqw, 0.88rem);
  line-height: 1.5;
  color: #e0f2fe;
  margin: 0;
  text-align: center;
  background: rgba(15, 23, 42, 0.55);
  padding: min(2.2cqw, 10px) min(2.8cqw, 13px);
  border-radius: min(2.5cqw, 10px);
  border: 1px solid rgba(56, 189, 248, 0.3);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3);
}

.endless-intro-steps-container {
  display: flex;
  flex-direction: column;
  gap: min(1.8cqw, 8px);
}

.endless-intro-step-card {
  display: flex;
  align-items: center;
  gap: min(2.5cqw, 11px);
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: min(2.5cqw, 10px);
  padding: min(2cqw, 9px) min(2.8cqw, 13px);
  text-align: left;
  position: relative;
  transition: all 0.2s ease;
  min-width: 0;
}

.endless-intro-step-badge {
  font-family: var(--font-title);
  font-size: min(3.6cqw, 1.0rem);
  font-weight: 900;
  background: rgba(56, 189, 248, 0.25);
  color: #38bdf8;
  border: 1px solid #38bdf8;
  border-radius: 50%;
  width: min(5.5cqw, 24px);
  height: min(5.5cqw, 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.endless-intro-step-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.endless-intro-step-title {
  font-family: var(--font-main);
  font-size: min(3.3cqw, 0.90rem);
  font-weight: 900;
  color: #ffffff;
}

.endless-intro-step-sub {
  font-family: var(--font-main);
  font-size: min(2.8cqw, 0.76rem);
  color: #94a3b8;
  line-height: 1.35;
}

/* Endless Intro Action Button (いつものメインボタンスタイル) */
.endless-intro-ok-btn {
  width: 100% !important;
  height: min(10.5cqw, 44px) !important;
  padding: 0 min(4cqw, 16px) !important;
  font-size: min(4.6cqw, 1.25rem) !important;
  letter-spacing: 1px !important;
  border-radius: min(3.5cqw, 14px) !important;
  box-shadow: 0 min(1cqw, 4px) 0 #047857, 0 min(2cqw, 8px) min(5cqw, 20px) rgba(16, 185, 129, 0.5) !important;
}

.endless-intro-ok-btn:active {
  transform: translateY(min(0.8cqw, 3px)) !important;
  box-shadow: 0 min(0.2cqw, 1px) 0 #047857, 0 min(1cqw, 4px) min(3cqw, 10px) rgba(16, 185, 129, 0.4) !important;
}

/* Tutorial Battle Button at Bottom of Guide Modal */
.guide-tutorial-bar {
  padding: min(2cqw, 8px) 0 0;
  width: 100%;
  border-top: min(0.4cqw, 1.5px) solid rgba(255, 255, 255, 0.15);
  margin-top: min(1cqw, 4px);
  flex-shrink: 0;
  box-sizing: border-box;
}

.guide-tutorial-btn {
  width: 100%;
  min-width: 0;
  height: min(9.5cqw, 40px);
  padding: 0 min(2.5cqw, 12px);
  background: linear-gradient(135deg, #10e891 0%, #059669 100%);
  border: min(0.5cqw, 2px) solid rgba(255, 255, 255, 0.4);
  border-radius: min(3cqw, 12px);
  color: #ffffff;
  font-family: var(--font-main);
  font-size: min(3.4cqw, 0.90rem);
  font-weight: 900;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 min(1cqw, 4px) min(2.5cqw, 12px) rgba(16, 232, 145, 0.3), 0 min(0.6cqw, 2px) 0 #047857;
  transition: all 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap !important;
}

.guide-tutorial-btn-text {
  white-space: nowrap !important;
  display: inline-block;
  max-width: 100%;
}

.guide-tutorial-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.guide-tutorial-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #047857;
}

/* ========================================================
   CRAZYGAMES REWARD BUTTONS & AD OVERLAY STYLES
   ======================================================== */
.reward-ad-btn {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-top: 0;
  padding: 0 min(2cqw, 8px);
  height: min(9.5cqw, 38px);
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
  border: min(0.5cqw, 2px) solid #fde047;
  border-radius: min(3cqw, 12px);
  color: #ffffff;
  font-family: var(--font-main);
  font-size: min(3.1cqw, 0.86rem);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 min(0.8cqw, 3px) min(2.5cqw, 10px) rgba(245, 158, 11, 0.4), 0 min(0.5cqw, 2px) 0 #78350f;
  transition: all 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(1.5cqw, 6px);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  white-space: nowrap !important;
  letter-spacing: -0.2px;
  overflow: hidden;
}

.reward-ad-btn.result-double-btn {
  margin-bottom: min(3cqw, 12px);
}

.reward-ad-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 min(1cqw, 5px) min(3cqw, 14px) rgba(245, 158, 11, 0.5), 0 min(0.5cqw, 2px) 0 #78350f;
}

.reward-ad-btn:active {
  transform: translateY(min(0.5cqw, 2px));
  box-shadow: 0 1px 0 #78350f;
}

.reward-ad-btn.claimed {
  background: rgba(75, 85, 99, 0.6);
  border-color: rgba(156, 163, 175, 0.4);
  color: #9ca3af;
  box-shadow: none;
  cursor: default;
  transform: none;
  pointer-events: none;
}

.reward-ad-icon {
  font-size: min(3.8cqw, 1.05rem);
  line-height: 1;
}

.reward-ad-text {
  flex: 1;
  text-align: center;
  white-space: nowrap !important;
  display: inline-block;
  max-width: 100%;
}

.reward-ad-badge {
  background: #ffffff;
  color: #b45309;
  font-size: min(2.6cqw, 0.74rem);
  font-weight: 900;
  padding: min(0.5cqw, 2px) min(1.5cqw, 6px);
  border-radius: min(1.5cqw, 6px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  line-height: 1;
  flex-shrink: 0;
  white-space: nowrap !important;
}

.gacha-reward-ad-row {
  margin-top: min(2cqw, 8px);
  width: 100%;
  box-sizing: border-box;
}

.gacha-reward-btn {
  margin-top: 0;
  padding: 0 min(2.5cqw, 10px);
  height: min(9.5cqw, 38px);
  font-size: min(3.1cqw, 0.88rem);
  background: linear-gradient(180deg, #10b981 0%, #059669 100%);
  border-color: #6ee7b7;
  box-shadow: 0 min(0.8cqw, 4px) min(2.5cqw, 12px) rgba(16, 185, 129, 0.35), 0 min(0.5cqw, 2px) 0 #047857;
}

.gacha-reward-btn .reward-ad-badge {
  color: #047857;
}



/* Opponent Watching Ad Notification Banner */
.opponent-ad-banner {
  position: absolute;
  top: min(3cqw, 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  border: min(0.5cqw, 2px) solid #38bdf8;
  border-radius: 999px;
  padding: min(1.2cqw, 5px) min(3.5cqw, 14px);
  color: #ffffff;
  font-family: var(--font-main);
  font-size: min(2.8cqw, 0.78rem);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: min(1.5cqw, 6px);
  box-shadow: 0 min(1cqw, 4px) min(4cqw, 18px) rgba(2, 132, 199, 0.5), 0 0 min(2.5cqw, 10px) rgba(56, 189, 248, 0.4);
  animation: bannerPop 0.3s ease, pulseSlow 2s infinite alternate;
  white-space: nowrap !important;
  pointer-events: none;
  box-sizing: border-box;
}

.loadout-ad-pause-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 132, 199, 0.25);
  border: 1.5px solid #38bdf8;
  border-radius: 8px;
  padding: 4px 10px;
  margin-top: 4px;
  margin-bottom: 2px;
  color: #e0f2fe;
  font-size: 0.74rem;
  font-weight: 800;
  animation: pulseSlow 1.5s infinite alternate;
}

/* ============================================================
   Language Selector & Modal Styles (i18n)
   ============================================================ */
.lang-selector-btn {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid rgba(0, 240, 255, 0.6);
  border-radius: 999px;
  color: #ffffff;
  font-family: var(--font-main);
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 10px rgba(0, 240, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.2s ease;
  z-index: 50;
}

.lang-selector-btn:hover,
.lang-selector-btn:active {
  background: rgba(0, 240, 255, 0.2);
  border-color: #00f0ff;
  transform: translateX(-50%) scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 240, 255, 0.5);
}

.lang-globe-icon {
  font-size: 1.1rem;
}

.menu-lang-row {
  display: flex;
  justify-content: center;
  margin-top: min(1.5cqw, 6px);
}

.lang-selector-btn-menu {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: min(1.5cqw, 6px);
  padding: min(1.5cqw, 6px) min(4.0cqw, 16px);
  background: rgba(30, 41, 59, 0.7);
  border: min(0.3cqw, 1px) solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #94a3b8;
  font-family: var(--font-main);
  font-size: min(2.8cqw, 0.78rem);
  font-weight: 700;
  white-space: nowrap !important;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box !important;
}

.lang-selector-btn-menu:hover,
.lang-selector-btn-menu:active {
  background: rgba(51, 65, 85, 0.9);
  border-color: #38bdf8;
  color: #ffffff;
}

/* Language Selection Modal */
#lang-select-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  pointer-events: auto;
}

#lang-select-modal.hidden {
  display: none !important;
  pointer-events: none !important;
}

.lang-select-panel {
  position: relative;
  width: 90%;
  max-width: min(92cqw, 380px);
  background: linear-gradient(180deg, #0f172a 0%, #03060a 100%);
  border: min(0.5cqw, 2px) solid rgba(0, 240, 255, 0.6);
  border-radius: min(4.5cqw, 18px);
  padding: min(4cqw, 18px) min(3.5cqw, 16px);
  box-shadow: 0 min(3cqw, 12px) min(8cqw, 40px) rgba(0, 0, 0, 0.8), 0 0 min(5cqw, 25px) rgba(0, 240, 255, 0.35);
  display: flex;
  flex-direction: column;
  gap: min(3cqw, 14px);
  animation: modalPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-sizing: border-box;
}

.lang-select-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: min(0.3cqw, 1px) solid rgba(255, 255, 255, 0.12);
  padding-bottom: min(2.5cqw, 10px);
}

.lang-select-title-group {
  display: flex;
  align-items: center;
  gap: min(2cqw, 8px);
}

.lang-modal-icon {
  font-size: min(4.5cqw, 1.25rem);
}

.lang-select-title {
  font-family: var(--font-main);
  font-size: min(4.5cqw, 1.15rem);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.5px;
  margin: 0;
  white-space: nowrap !important;
}

.lang-select-close-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: min(4.5cqw, 1.25rem);
  cursor: pointer;
  padding: min(0.8cqw, 3px) min(1.8cqw, 7px);
  border-radius: min(1.5cqw, 6px);
  transition: all 0.2s ease;
}

.lang-select-close-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.lang-select-body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: min(2cqw, 8px);
  max-height: 380px;
  overflow-y: auto;
  padding: 2px;
}

.lang-option-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: min(2.5cqw, 10px) min(3cqw, 12px);
  background: rgba(30, 41, 59, 0.6);
  border: min(0.4cqw, 1.5px) solid rgba(255, 255, 255, 0.1);
  border-radius: min(2.5cqw, 10px);
  color: #e2e8f0;
  font-family: var(--font-main);
  font-size: min(3.4cqw, 0.90rem);
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap !important;
  box-sizing: border-box;
}

.lang-option-btn:hover {
  background: rgba(51, 65, 85, 0.8);
  border-color: rgba(0, 240, 255, 0.5);
  color: #ffffff;
}

.lang-option-btn.active {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.25) 0%, rgba(2, 132, 199, 0.35) 100%);
  border-color: #00f0ff;
  color: #00f0ff;
  box-shadow: 0 0 min(3cqw, 12px) rgba(0, 240, 255, 0.3);
}

.lang-check-icon {
  font-size: 0.85rem;
  opacity: 0;
}

.lang-option-btn.active .lang-check-icon {
  opacity: 1;
}

/* ========================================================
   RANKING (LEADERBOARD) MODAL STYLES (MATCHED TO MANUAL SCREEN)
   ======================================================== */
#ranking-modal {
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: min(2.5cqw, 10px);
  pointer-events: auto;
  box-sizing: border-box;
}

#ranking-modal.hidden {
  display: none !important;
  pointer-events: none !important;
}

.ranking-modal-panel {
  width: 100%;
  max-width: min(94cqw, 680px);
  height: min(600px, 86vh);
  max-height: 86vh;
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
  border: min(0.8cqw, 3.5px) solid #38bdf8;
  border-radius: min(4.5cqw, 22px);
  box-shadow: 0 min(3cqw, 16px) min(8cqw, 40px) rgba(0, 0, 0, 0.5), 0 0 min(5cqw, 25px) rgba(56, 189, 248, 0.4);
  display: flex;
  flex-direction: column;
  padding: min(2.5cqw, 14px);
  gap: min(2cqw, 10px);
  position: relative;
  z-index: 121;
  pointer-events: auto;
  color: #ffffff;
  overflow: hidden;
  box-sizing: border-box;
}

.ranking-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: min(1.2cqw, 6px);
  border-bottom: min(0.5cqw, 2px) solid rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

.ranking-modal-title {
  font-family: var(--font-main);
  font-size: min(4.8cqw, 1.25rem);
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #ffffff;
  line-height: 1.1;
  margin: 0;
  white-space: nowrap !important;
}

.ranking-tabs-container {
  display: flex;
  gap: min(1.2cqw, 6px);
  background: rgba(15, 23, 42, 0.45);
  padding: min(0.8cqw, 4px);
  border-radius: min(2.5cqw, 12px);
  border: min(0.4cqw, 1.5px) solid rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

.ranking-tab-btn {
  flex: 1;
  padding: min(1.5cqw, 7px) min(0.8cqw, 4px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: min(1.8cqw, 8px);
  color: #e0f2fe;
  font-size: min(2.9cqw, 0.86rem);
  font-weight: 900;
  cursor: pointer;
  transition: all 0.10s ease;
  white-space: nowrap !important;
  letter-spacing: -0.2px;
}

.ranking-tab-btn:active {
  transform: translateY(min(0.5cqw, 2px));
}

.ranking-tab-btn.active {
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
  color: #ffffff;
  font-weight: 900;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.ranking-your-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(15, 23, 42, 0.45);
  border: min(0.5cqw, 2px) solid rgba(255, 255, 255, 0.25);
  border-radius: min(3cqw, 14px);
  padding: min(1.8cqw, 8px) min(3cqw, 14px);
  flex-shrink: 0;
}

.ranking-your-badge {
  font-size: min(3.2cqw, 0.82rem);
  font-weight: 800;
  color: #e0f2fe;
  letter-spacing: 0.2px;
  white-space: nowrap !important;
}

.ranking-your-info {
  display: flex;
  align-items: baseline;
  gap: min(2.5cqw, 12px);
}

.ranking-your-rank-val {
  font-family: var(--font-main);
  font-size: min(4.5cqw, 1.25rem);
  font-weight: 900;
  color: #fde047;
  text-shadow: 0 0 min(1.5cqw, 8px) rgba(253, 224, 71, 0.5);
  white-space: nowrap !important;
}

.ranking-your-rate-val {
  font-family: var(--font-main);
  font-size: min(3.6cqw, 0.92rem);
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap !important;
}

.ranking-your-rate-val span {
  font-weight: 900;
  color: #38bdf8;
}

.ranking-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}

.ranking-list-area {
  display: flex;
  flex-direction: column;
  gap: min(1.2cqw, 6px);
}

.ranking-row-item {
  display: flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.45);
  border: min(0.4cqw, 2px) solid rgba(255, 255, 255, 0.2);
  border-radius: min(3cqw, 14px);
  padding: min(1.8cqw, 8px) min(2.5cqw, 12px);
  gap: min(2cqw, 10px);
  transition: transform 0.1s ease, background 0.15s ease;
}

.ranking-row-item.is-me {
  background: rgba(2, 132, 199, 0.45);
  border-color: #38bdf8;
  box-shadow: 0 0 min(2.5cqw, 12px) rgba(56, 189, 248, 0.4);
}

.ranking-row-rank {
  width: min(7.5cqw, 32px);
  height: min(7.5cqw, 32px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-main);
  font-weight: 900;
  font-size: min(3.6cqw, 0.95rem);
  border-radius: min(1.8cqw, 8px);
  flex-shrink: 0;
  color: #ffffff;
  white-space: nowrap !important;
}

.ranking-row-rank.rank-1 {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  box-shadow: 0 0 min(2cqw, 10px) rgba(245, 158, 11, 0.6);
}

.ranking-row-rank.rank-2 {
  background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
  color: #ffffff;
  box-shadow: 0 0 min(2cqw, 10px) rgba(148, 163, 184, 0.5);
}

.ranking-row-rank.rank-3 {
  background: linear-gradient(135deg, #b45309 0%, #78350f 100%);
  color: #fde68a;
  box-shadow: 0 0 min(2cqw, 10px) rgba(180, 83, 9, 0.5);
}

.ranking-row-rank.rank-other {
  background: rgba(15, 23, 42, 0.6);
  color: #94a3b8;
  font-size: min(3.2cqw, 0.85rem);
}

.ranking-row-avatar {
  width: min(8cqw, 34px);
  height: min(8cqw, 34px);
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.7);
  border: min(0.3cqw, 1.5px) solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.ranking-row-avatar img {
  width: min(6cqw, 26px);
  height: min(6cqw, 26px);
  object-fit: contain;
}

.ranking-row-name-group {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: min(1.2cqw, 6px);
}

.ranking-row-name {
  font-family: var(--font-main);
  font-size: min(3.4cqw, 0.88rem);
  font-weight: 800;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}

.ranking-cg-badge {
  font-size: min(2.4cqw, 0.64rem);
  font-weight: 900;
  padding: 1px min(1.2cqw, 5px);
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #ffffff;
  border-radius: min(1.0cqw, 5px);
  letter-spacing: 0.5px;
  flex-shrink: 0;
  white-space: nowrap !important;
  box-shadow: 0 0 6px rgba(124, 58, 237, 0.5);
}

.ranking-you-badge {
  font-size: min(2.6cqw, 0.68rem);
  font-weight: 900;
  padding: 1px min(1.2cqw, 6px);
  background: #ec4899;
  color: #ffffff;
  border-radius: min(1.2cqw, 6px);
  letter-spacing: 0.5px;
  flex-shrink: 0;
  white-space: nowrap !important;
}

.ranking-row-rate {
  font-family: var(--font-main);
  font-size: min(4.0cqw, 1.05rem);
  font-weight: 900;
  color: #38bdf8;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  white-space: nowrap !important;
}

/* ========================================================
   BOT PLAIN CONFIRM MODAL STYLES (MATCHES MAIN MODALS)
   ======================================================== */
.confirm-modal-layer {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 120 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: min(2.5cqw, 10px) !important;
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
}

.confirm-modal-layer.hidden {
  display: none !important;
  pointer-events: none !important;
}

.confirm-modal-panel {
  width: 100%;
  max-width: min(86cqw, 360px);
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
  border: min(0.8cqw, 3.5px) solid #38bdf8;
  border-radius: min(4.5cqw, 22px);
  box-shadow: 0 min(3cqw, 16px) min(8cqw, 40px) rgba(0, 0, 0, 0.5), 0 0 min(5cqw, 25px) rgba(56, 189, 248, 0.4);
  display: flex;
  flex-direction: column;
  padding: min(3.5cqw, 16px);
  gap: min(2.5cqw, 10px);
  color: #ffffff;
  box-sizing: border-box;
  animation: modalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  margin: auto !important;
}

.confirm-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: min(0.5cqw, 2px) solid rgba(255, 255, 255, 0.25);
  padding-bottom: min(1.8cqw, 7px);
  flex-shrink: 0;
  width: 100%;
}

.confirm-modal-title-group {
  display: flex;
  align-items: center;
}

.confirm-modal-title {
  font-family: var(--font-title);
  font-size: min(4.8cqw, 1.25rem);
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.5px;
}

.confirm-modal-body {
  display: flex;
  flex-direction: column;
  gap: min(1.5cqw, 6px);
  padding: min(1cqw, 4px) 0;
}

.confirm-modal-label {
  font-family: var(--font-main);
  font-size: min(2.8cqw, 0.76rem);
  font-weight: 900;
  color: #fde047;
  letter-spacing: 0.5px;
  text-align: center;
}

.confirm-plain-weapons-preview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: min(1.5cqw, 6px);
  margin: min(1cqw, 4px) 0;
}

.preview-weapon-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(0.8cqw, 3px);
  background: rgba(15, 23, 42, 0.45);
  border: min(0.3cqw, 1px) solid rgba(255, 255, 255, 0.25);
  border-radius: min(2.5cqw, 10px);
  padding: min(1.5cqw, 6px) min(1cqw, 4px);
  box-sizing: border-box;
}

.preview-weapon-badge img {
  width: min(7.5cqw, 30px);
  height: min(7.5cqw, 30px);
  object-fit: contain;
}

.preview-weapon-badge span {
  font-size: min(2.4cqw, 0.70rem);
  font-weight: 800;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.confirm-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: min(2cqw, 8px);
  margin-top: min(1cqw, 4px);
  width: 100%;
  box-sizing: border-box;
}

.confirm-cancel-btn {
  height: min(9.5cqw, 40px) !important;
  font-size: min(3.2cqw, 0.85rem) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.confirm-start-btn {
  height: min(9.5cqw, 40px) !important;
  font-size: min(3.4cqw, 0.90rem) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* ========================================================
   Japanese Typography Refinement for Weapon Names
   (Slightly scaled down for balanced Asian typography)
   ======================================================== */
html[lang="ja"] .weapon-name,
body.lang-ja .weapon-name,
body[data-lang="ja"] .weapon-name {
  font-size: min(1.9cqw, 0.56rem);
  letter-spacing: -0.3px;
}

html[lang="ja"] .slot-name,
body.lang-ja .slot-name,
body[data-lang="ja"] .slot-name {
  font-size: min(2.8cqw, 0.70rem) !important;
  letter-spacing: -0.3px;
}

html[lang="ja"] .slot-name.is-long,
body.lang-ja .slot-name.is-long,
body[data-lang="ja"] .slot-name.is-long {
  font-size: min(2.4cqw, 0.60rem) !important;
  letter-spacing: -0.5px;
}

html[lang="ja"] .slot-name.is-xlong,
body.lang-ja .slot-name.is-xlong,
body[data-lang="ja"] .slot-name.is-xlong {
  font-size: min(2.1cqw, 0.52rem) !important;
  letter-spacing: -0.6px;
}

html[lang="ja"] .pal-name,
body.lang-ja .pal-name,
body[data-lang="ja"] .pal-name {
  font-size: min(2.8cqw, 0.72rem) !important;
  letter-spacing: -0.3px;
}

html[lang="ja"] .manual-card-name,
body.lang-ja .manual-card-name,
body[data-lang="ja"] .manual-card-name {
  font-size: min(2.4cqw, 0.64rem) !important;
  letter-spacing: -0.3px;
}

html[lang="ja"] .manual-detail-name,
body.lang-ja .manual-detail-name,
body[data-lang="ja"] .manual-detail-name {
  font-size: min(3.7cqw, 1.02rem) !important;
  letter-spacing: -0.2px;
}

/* ============================================================
   LEVEL & XP SYSTEM STYLING
   ============================================================ */

/* In-Game HUD Level Badges */
.hud-name-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: min(1.2cqw, 5px);
  width: 100%;
}

.hud-level-badge {
  font-family: var(--font-title);
  font-size: min(2.4cqw, 0.68rem);
  font-weight: 900;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #ffffff;
  border: min(0.3cqw, 1px) solid #a5b4fc;
  border-radius: min(1.5cqw, 6px);
  padding: 0 min(1.2cqw, 4px);
  line-height: 1.35;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  white-space: nowrap !important;
}

/* Separate Level Window (Above GAME PLAY Panel) */
.gameplay-level-window,
.gameplay-level-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: min(1.8cqw, 8px);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: min(0.6cqw, 2.5px) solid #818cf8;
  border-radius: min(3.5cqw, 16px);
  padding: min(1.5cqw, 6px) min(3.5cqw, 14px);
  box-shadow: 0 min(2cqw, 8px) min(4cqw, 20px) rgba(0, 0, 0, 0.45), 0 0 min(3cqw, 12px) rgba(129, 140, 248, 0.3);
  box-sizing: border-box;
  flex-shrink: 0;
}

.menu-actions .gameplay-level-window {
  margin-top: min(9.5cqw, 38px);
  margin-bottom: min(0.6cqw, 2px);
  padding: min(1.2cqw, 5px) min(3.0cqw, 12px);
  border-radius: min(3.0cqw, 14px);
}

.gameplay-level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(99, 102, 241, 0.25);
  border: min(0.3cqw, 1px) solid #818cf8;
  border-radius: min(2.5cqw, 10px);
  padding: min(0.4cqw, 2px) min(2.4cqw, 10px);
  box-shadow: 0 0 min(1.5cqw, 6px) rgba(129, 140, 248, 0.25);
  flex-shrink: 0;
}

.gameplay-level-badge .level-icon {
  display: none !important;
}

.gameplay-level-badge .level-val {
  font-family: var(--font-title);
  font-size: min(3.2cqw, 0.88rem);
  font-weight: 900;
  color: #c7d2fe;
  white-space: nowrap !important;
}

.gameplay-xp-bar-track {
  flex: 1;
  height: min(2.0cqw, 8px);
  background: rgba(15, 23, 42, 0.85);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(129, 140, 248, 0.3);
  min-width: 0;
}

.gameplay-xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #a855f7);
  border-radius: 4px;
  transition: width 0.4s ease;
}

.gameplay-xp-val {
  font-family: var(--font-main);
  font-size: min(2.4cqw, 0.68rem);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap !important;
  flex-shrink: 0;
}

/* Result Modal Level & XP Box */
.result-level-box {
  position: relative;
  background: rgba(238, 242, 255, 0.94);
  border: min(0.4cqw, 1.5px) solid #6366f1;
  border-radius: min(3cqw, 12px);
  padding: min(1.5cqw, 6px) min(3cqw, 12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: min(2cqw, 8px);
  box-shadow: 0 min(0.5cqw, 2px) min(2cqw, 8px) rgba(99, 102, 241, 0.18);
  box-sizing: border-box;
}

.result-level-val-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(1.5cqw, 6px);
  width: 100%;
  margin-bottom: min(0.6cqw, 2px);
}

.result-xp-earned {
  font-family: var(--font-title);
  font-size: min(4.2cqw, 1.15rem);
  font-weight: 900;
  color: #4338ca;
  letter-spacing: 0.5px;
  line-height: 1;
  white-space: nowrap !important;
}

/* Floating LEVEL UP! Pop-up Sticker (Tilted over XP box) */
.result-level-up-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-7deg) scale(0);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: min(1.0cqw, 4px);
  background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
  border: min(0.4cqw, 1.6px) solid #fef08a;
  border-radius: min(2.5cqw, 11px);
  padding: min(0.8cqw, 3.5px) min(2.5cqw, 10px);
  box-shadow: 0 min(0.8cqw, 3px) min(2.5cqw, 12px) rgba(244, 63, 94, 0.75), 0 0 min(2cqw, 8px) rgba(254, 240, 138, 0.5);
  pointer-events: none;
  white-space: nowrap !important;
  opacity: 0;
}

.result-level-up-popup.popup-active {
  animation: levelUpPopAndFade 1.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

@keyframes levelUpPopAndFade {
  0% {
    transform: translate(-50%, -50%) rotate(-13deg) scale(0.2);
    opacity: 0;
  }
  16% {
    transform: translate(-50%, -50%) rotate(-7deg) scale(1.12);
    opacity: 1;
  }
  26% {
    transform: translate(-50%, -50%) rotate(-7deg) scale(1.0);
    opacity: 1;
  }
  70% {
    transform: translate(-50%, -50%) rotate(-7deg) scale(1.0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -82%) rotate(-7deg) scale(0.92);
    opacity: 0;
  }
}

.result-level-up-popup .popup-star {
  font-size: min(3.0cqw, 0.85rem);
  line-height: 1;
  animation: popupStarSpin 1.5s ease-in-out infinite alternate;
}

@keyframes popupStarSpin {
  0% { transform: rotate(-10deg) scale(0.9); }
  100% { transform: rotate(10deg) scale(1.15); }
}

.result-level-up-popup .popup-text {
  font-family: var(--font-title);
  font-size: min(3.5cqw, 0.98rem);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.8px;
  text-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.5);
  line-height: 1;
}

/* Test Button: +100 XP */
.result-test-xp-btn {
  background: rgba(30, 41, 59, 0.85);
  border: min(0.35cqw, 1.5px) dashed #fbbf24;
  border-radius: min(2.5cqw, 10px);
  color: #fbbf24;
  font-family: var(--font-title);
  font-size: min(2.8cqw, 0.8rem);
  font-weight: 800;
  padding: min(1cqw, 4px) min(3cqw, 12px);
  margin-top: min(1.2cqw, 5px);
  cursor: pointer;
  transition: all 0.2s ease;
  width: auto;
  align-self: center;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.result-test-xp-btn:hover {
  background: rgba(251, 191, 36, 0.2);
  transform: scale(1.04);
}

.result-test-xp-btn:active {
  transform: scale(0.96);
}

.result-level-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: min(1cqw, 4px);
  width: 100%;
  margin-top: 2px;
}

.result-level-current {
  font-family: var(--font-title);
  font-size: min(2.6cqw, 0.72rem);
  font-weight: 900;
  color: #312e81;
  white-space: nowrap !important;
}

.result-xp-bar-track {
  flex: 1;
  height: min(1.6cqw, 6px);
  background: rgba(199, 210, 254, 0.7);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(99, 102, 241, 0.25);
  min-width: 0;
}

.result-xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 4px;
  transition: width 0.85s cubic-bezier(0.2, 0.8, 0.25, 1);
}

.result-xp-current-val {
  font-family: var(--font-main);
  font-size: min(2.2cqw, 0.62rem);
  font-weight: 800;
  color: #4338ca;
  white-space: nowrap !important;
}

/* ============================================================
   LEVEL BONUS BUTTON & MODAL STYLES
   ============================================================ */

/* Button in Gameplay Level Window: Enlgarged Gift Icon Button Floating Directly Above Top-Right */
.gameplay-level-bonus-btn {
  position: absolute;
  top: auto;
  bottom: calc(100% + min(1.5cqw, 6px));
  right: min(0.5cqw, 2px);
  width: min(9.5cqw, 38px);
  height: min(9.5cqw, 38px);
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  border: min(0.5cqw, 2px) solid #fef08a;
  color: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 min(0.8cqw, 3px) min(2.0cqw, 8px) rgba(0, 0, 0, 0.45), 0 0 min(3cqw, 12px) rgba(251, 191, 36, 0.6);
  transition: all 0.15s ease;
  white-space: nowrap !important;
  line-height: 1;
  z-index: 10;
}

.gameplay-level-bonus-btn:hover {
  transform: scale(1.14);
  box-shadow: 0 min(1.2cqw, 4px) min(3cqw, 12px) rgba(245, 158, 11, 0.8), 0 0 min(4cqw, 16px) rgba(254, 240, 138, 0.85);
  filter: brightness(1.15);
}

.gameplay-level-bonus-btn:active {
  transform: scale(0.92);
}

.bonus-btn-gift-icon {
  font-size: min(5.0cqw, 1.35rem);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.level-bonus-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: #ffffff;
  font-size: min(2.5cqw, 10px);
  font-weight: 900;
  width: min(3.8cqw, 15px);
  height: min(3.8cqw, 15px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 6px #ef4444;
  border: 1.5px solid #ffffff;
  animation: pulseGlow 1.2s infinite alternate;
}

/* Level Bonus Modal Window */
#level-bonus-modal {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 125;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  pointer-events: auto;
}

#level-bonus-modal.hidden {
  display: none !important;
  pointer-events: none !important;
}

.level-bonus-panel {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
  border: min(0.8cqw, 3.5px) solid #38bdf8;
  border-radius: min(4.5cqw, 22px);
  width: 100%;
  max-width: min(94cqw, 460px);
  max-height: 86vh;
  height: min(84vh, 580px);
  box-shadow: 0 min(3cqw, 16px) min(8cqw, 40px) rgba(0, 0, 0, 0.5), 0 0 min(5cqw, 25px) rgba(56, 189, 248, 0.4);
  display: flex;
  flex-direction: column;
  padding: min(2.5cqw, 12px) min(3cqw, 14px) min(2.5cqw, 12px);
  gap: min(1.8cqw, 8px);
  overflow: hidden;
  animation: modalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  color: #ffffff;
  box-sizing: border-box;
}

.level-bonus-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: min(1cqw, 5px);
  border-bottom: min(0.5cqw, 2px) solid rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

.level-bonus-title-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.level-bonus-title {
  font-family: var(--font-title);
  font-size: min(4.8cqw, 1.25rem);
  font-weight: 900;
  color: #fde047;
  letter-spacing: 0.5px;
  margin: 0;
  line-height: 1.1;
  text-shadow: 0 0 10px rgba(253, 224, 71, 0.4);
  white-space: nowrap !important;
}

.level-bonus-sub {
  font-family: var(--font-main);
  font-size: min(2.4cqw, 0.66rem);
  color: #e0f2fe;
  font-weight: 600;
}

/* Bonus Tab Bar (Level Bonus / Achievements) */
.bonus-tab-bar {
  display: flex;
  gap: min(2cqw, 8px);
  width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
}

.bonus-tab-btn {
  flex: 1;
  background: rgba(15, 23, 42, 0.55);
  border: min(0.4cqw, 1.5px) solid rgba(255, 255, 255, 0.25);
  border-radius: min(2.5cqw, 10px);
  padding: min(1.4cqw, 6px) min(1.5cqw, 6px);
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-main);
  font-size: min(3.0cqw, 0.82rem);
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.bonus-tab-btn:hover {
  background: rgba(15, 23, 42, 0.75);
  border-color: #38bdf8;
  color: #ffffff;
}

.bonus-tab-btn.active {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: 0 0 min(2.5cqw, 10px) rgba(56, 189, 248, 0.55);
}

.bonus-tab-badge {
  background: #ef4444;
  color: #ffffff;
  font-family: var(--font-title);
  font-size: min(2.2cqw, 0.65rem);
  font-weight: 900;
  border-radius: 9999px;
  padding: 1px 6px;
  min-width: 14px;
  text-align: center;
  line-height: 1.1;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.8);
}

/* Status Bar: Current Level & Claim All */
.level-bonus-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: min(1.5cqw, 6px);
  background: rgba(15, 23, 42, 0.45);
  border: min(0.4cqw, 1.5px) solid rgba(56, 189, 248, 0.4);
  border-radius: min(2.5cqw, 10px);
  padding: min(1cqw, 4px) min(2.2cqw, 9px);
  flex-shrink: 0;
}

.level-bonus-current-pill {
  display: flex;
  align-items: center;
  gap: min(1cqw, 5px);
}

.level-bonus-current-pill .pill-label {
  font-family: var(--font-main);
  font-size: min(2.5cqw, 0.68rem);
  color: #94a3b8;
  font-weight: 700;
}

.level-bonus-current-pill .pill-val {
  font-family: var(--font-title);
  font-size: min(3.4cqw, 0.95rem);
  font-weight: 900;
  color: #38bdf8;
}

.level-bonus-claim-all-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: 1px solid #6ee7b7;
  border-radius: min(2cqw, 8px);
  color: #ffffff;
  font-family: var(--font-title);
  font-size: min(2.6cqw, 0.72rem);
  font-weight: 900;
  padding: min(0.6cqw, 3px) min(2.2cqw, 9px);
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 4px rgba(16, 185, 129, 0.3);
  white-space: nowrap !important;
}

.level-bonus-claim-all-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.level-bonus-claim-all-btn:active {
  transform: translateY(1px);
}

/* Scroll List */
.level-bonus-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: min(1.6cqw, 7px);
  padding-right: 2px;
}

.level-bonus-list::-webkit-scrollbar {
  width: 4px;
}

.level-bonus-list::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.45);
  border-radius: 4px;
}

/* Bonus Reward Card */
.level-bonus-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: min(1.6cqw, 7px) min(2.5cqw, 10px);
  border-radius: min(2.8cqw, 12px);
  background: rgba(15, 23, 42, 0.4);
  border: min(0.3cqw, 1.2px) solid rgba(56, 189, 248, 0.3);
  gap: min(2cqw, 8px);
  transition: all 0.2s ease;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}

.bonus-card-left {
  display: flex;
  align-items: center;
  gap: min(1.8cqw, 8px);
  min-width: 0;
  flex: 1 1 0%;
  overflow: hidden;
}

.bonus-target-level {
  font-family: var(--font-title);
  font-size: min(3.4cqw, 0.95rem);
  font-weight: 900;
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid #38bdf8;
  color: #e0f2fe;
  padding: min(0.4cqw, 2px) min(1.8cqw, 7px);
  border-radius: min(2cqw, 8px);
  flex-shrink: 0;
  white-space: nowrap !important;
}

.bonus-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.bonus-name {
  font-family: var(--font-title);
  font-size: min(3.0cqw, 0.82rem);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.3px;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bonus-reward {
  font-family: var(--font-main);
  font-size: min(3.4cqw, 0.92rem);
  font-weight: 900;
  color: #fef08a;
  display: flex;
  align-items: center;
  gap: min(1.2cqw, 5px);
  white-space: nowrap !important;
  min-width: 0;
  flex: 1 1 0%;
  overflow: hidden;
}

.bonus-reward .reward-icon {
  font-size: min(3.8cqw, 1.05rem);
  flex-shrink: 0;
}

.bonus-reward .reward-acc-name {
  color: #38bdf8;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.bonus-reward .reward-skin-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.bonus-reward .reward-coins-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Card States */
.level-bonus-card.claimable {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.5) 0%, rgba(245, 158, 11, 0.3) 100%);
  border-color: #fbbf24;
  box-shadow: 0 0 min(2cqw, 8px) rgba(251, 191, 36, 0.35);
}

.level-bonus-card.claimable .bonus-target-level {
  background: #f59e0b;
  border-color: #fef08a;
  color: #ffffff;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
}

.level-bonus-card.claimed {
  opacity: 0.55;
  background: rgba(15, 23, 42, 0.3);
  border-color: rgba(255, 255, 255, 0.1);
}

.level-bonus-card.locked {
  opacity: 0.65;
  background: rgba(15, 23, 42, 0.25);
}

.level-bonus-card.locked .bonus-target-level {
  background: rgba(71, 85, 105, 0.3);
  border-color: #64748b;
  color: #94a3b8;
}

/* Claim Button: 固定横幅 & シームレス自動文字サイズ */
.bonus-claim-btn {
  font-family: var(--font-title);
  font-size: min(2.8cqw, 0.78rem);
  font-weight: 900;
  width: min(26cqw, 104px) !important;
  min-width: min(26cqw, 104px) !important;
  max-width: min(26cqw, 104px) !important;
  height: min(7.5cqw, 32px);
  padding: 0 min(1.2cqw, 5px) !important;
  border-radius: min(2cqw, 8px);
  cursor: pointer;
  white-space: nowrap !important;
  letter-spacing: 0.3px;
  transition: all 0.15s ease;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.bonus-btn-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  pointer-events: none;
}

.bonus-claim-btn.btn-claimable {
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 50%, #d97706 100%);
  border: min(0.35cqw, 1.2px) solid #fef08a;
  color: #78350f;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4);
}

.bonus-claim-btn.btn-claimable:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.6);
}

.bonus-claim-btn.btn-claimable:active {
  transform: translateY(1px);
}

.bonus-claim-btn.btn-claimed {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #94a3b8;
  cursor: default;
}

.bonus-claim-btn.btn-locked {
  background: rgba(15, 23, 42, 0.6);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  color: #64748b;
  cursor: not-allowed;
}



/* ============================================================
   --- ARCADE MODE MODAL & ROADMAP STYLES ---
   ============================================================ */

/* Modal Container (Centered Fullscreen Overlay) */
#arcade-modal-screen {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 120;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: min(2.5cqw, 10px);
  pointer-events: auto;
  box-sizing: border-box;
}

#arcade-modal-screen.hidden {
  display: none !important;
  pointer-events: none !important;
}

/* Modal Panel: Matches .manual-panel (Fresh cyan & deep blue gradient) */
.arcade-modal-panel {
  width: 100%;
  max-width: min(94cqw, 560px);
  max-height: 92vh;
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
  border: min(0.8cqw, 3.5px) solid #38bdf8;
  border-radius: min(4.5cqw, 22px);
  box-shadow: 0 min(3cqw, 16px) min(8cqw, 40px) rgba(0, 0, 0, 0.5), 0 0 min(5cqw, 25px) rgba(56, 189, 248, 0.4);
  padding: min(3.5cqw, 16px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: min(2.8cqw, 12px);
  overflow-y: auto;
  color: #ffffff;
  animation: modalScaleIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.arcade-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: min(0.5cqw, 2px) solid rgba(255, 255, 255, 0.25);
  padding-bottom: min(1.5cqw, 8px);
  flex-shrink: 0;
}

.arcade-modal-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.arcade-modal-title {
  font-family: var(--font-title);
  font-size: min(5.2cqw, 1.45rem);
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.5px;
  text-shadow: 0 min(0.5cqw, 2px) min(1cqw, 4px) rgba(0, 0, 0, 0.5);
  white-space: nowrap !important;
}

.arcade-modal-sub {
  font-size: min(2.6cqw, 0.75rem);
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

.arcade-modal-close-btn {
  width: min(7.5cqw, 34px);
  height: min(7.5cqw, 34px);
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.2);
  border: min(0.5cqw, 2px) solid #ef4444;
  color: #f87171;
  font-size: min(2.8cqw, 1rem);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}

.arcade-modal-close-btn:hover {
  background: rgba(239, 68, 68, 0.35);
  transform: scale(1.06);
}

.arcade-modal-close-btn:active {
  transform: scale(0.92);
}

/* Roadmap 8-Stage Visualizer */
.arcade-roadmap-container {
  width: 100%;
  overflow-x: auto;
  padding: min(1.5cqw, 6px) 0;
  -webkit-overflow-scrolling: touch;
}

.arcade-roadmap-track {
  display: flex;
  align-items: center;
  gap: min(2cqw, 8px);
  min-width: 100%;
  padding: 0 min(1cqw, 4px);
  box-sizing: border-box;
}

.arcade-stage-node {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  padding: min(1.8cqw, 6px);
  border-radius: min(2.5cqw, 10px);
  background: rgba(7, 29, 58, 0.65);
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  transition: all 0.15s ease;
  min-width: min(11cqw, 48px);
  position: relative;
}

.arcade-stage-node.is-cleared {
  border-color: rgba(52, 211, 153, 0.85);
  background: rgba(6, 78, 59, 0.55);
}

.arcade-stage-node.is-current {
  border-color: #38bdf8;
  background: rgba(14, 165, 233, 0.45);
  box-shadow: 0 0 min(2.5cqw, 10px) rgba(56, 189, 248, 0.7);
  transform: scale(1.06);
}

.arcade-stage-node.is-boss {
  border-color: #f59e0b;
  background: rgba(120, 53, 15, 0.6);
}

.arcade-stage-node.is-final-boss {
  border-color: #f43f5e;
  background: radial-gradient(circle, rgba(159, 18, 57, 0.8), rgba(88, 28, 135, 0.8));
  box-shadow: 0 0 min(3cqw, 12px) rgba(244, 63, 94, 0.6);
}

.arcade-stage-node.is-locked {
  opacity: 0.45;
  filter: grayscale(0.8);
}

.arcade-node-num {
  font-family: var(--font-title);
  font-size: min(3.2cqw, 0.88rem);
  font-weight: 900;
  color: #ffffff;
}

.arcade-node-icon {
  font-size: min(4.5cqw, 1.2rem);
}

.arcade-node-badge {
  font-size: min(2.2cqw, 0.6rem);
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: bold;
}

.arcade-node-badge.boss {
  background: #f59e0b;
  color: #000;
}

.arcade-node-badge.final {
  background: #f43f5e;
  color: #fff;
  animation: pulseMatching 0.9s infinite alternate;
}

/* Stage Preview Card */
.arcade-stage-preview-card {
  background: rgba(7, 29, 58, 0.75);
  border: 1.5px solid rgba(56, 189, 248, 0.5);
  border-radius: min(3.5cqw, 14px);
  padding: min(3.5cqw, 14px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(12cqw, 52px);
  position: relative;
  box-shadow: inset 0 0 min(3cqw, 12px) rgba(56, 189, 248, 0.15);
}

.arcade-preview-badge {
  font-family: var(--font-title);
  font-size: min(3.6cqw, 0.92rem);
  color: #38bdf8;
  letter-spacing: 0.5px;
  font-weight: 900;
}

.arcade-preview-boss-tag {
  position: absolute;
  top: min(2.5cqw, 10px);
  right: min(2.5cqw, 10px);
  background: linear-gradient(90deg, #ef4444, #f97316);
  color: #ffffff;
  font-size: min(2.8cqw, 0.72rem);
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
  animation: pulseMatching 0.8s infinite alternate;
}

.arcade-preview-name {
  font-family: var(--font-title);
  font-size: min(5.2cqw, 1.4rem);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.arcade-preview-desc {
  font-size: min(2.8cqw, 0.8rem);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
}

.arcade-preview-reward {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: min(3cqw, 0.82rem);
  font-weight: bold;
  color: #fde047;
  margin-top: 2px;
}

.arcade-modal-actions {
  display: flex;
  flex-direction: column;
  gap: min(2.5cqw, 10px);
  margin-top: min(1cqw, 4px);
}

.arcade-start-btn {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
  color: #ffffff;
  box-shadow: 0 min(1.2cqw, 5px) 0 #78350f, 0 min(2cqw, 8px) min(5cqw, 20px) rgba(245, 158, 11, 0.4);
  border-top: min(0.5cqw, 2px) solid rgba(255, 255, 255, 0.5);
  font-size: min(4.2cqw, 1.1rem);
  padding: min(2.8cqw, 11px) min(4cqw, 16px);
  border-radius: min(3cqw, 12px);
}

.arcade-continue-btn {
  background: linear-gradient(180deg, #10b981 0%, #059669 50%, #047857 100%);
  color: #ffffff;
  box-shadow: 0 min(1.2cqw, 5px) 0 #065f46, 0 min(2cqw, 8px) min(5cqw, 20px) rgba(16, 185, 129, 0.4);
  border-top: min(0.5cqw, 2px) solid rgba(255, 255, 255, 0.5);
  font-size: min(4.2cqw, 1.1rem);
  padding: min(2.8cqw, 11px) min(4cqw, 16px);
  border-radius: min(3cqw, 12px);
}

/* Boss Warning Cinematic Banner */
.boss-warning-banner {
  position: absolute;
  top: 40%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  z-index: 120;
  pointer-events: none;
  animation: bossBannerIn 2.8s ease-in-out forwards;
}

@keyframes bossBannerIn {
  0% {
    opacity: 0;
    transform: translateY(-50%) scale(0.85);
  }
  8% {
    opacity: 1;
    transform: translateY(-50%) scale(1.03);
  }
  15% {
    transform: translateY(-50%) scale(1.0);
  }
  84% {
    opacity: 1;
    transform: translateY(-50%) scale(1.0);
  }
  100% {
    opacity: 0;
    transform: translateY(-50%) scale(1.06);
  }
}

.boss-warning-content {
  width: 100%;
  background: rgba(0, 0, 0, 0.92);
  border-top: min(0.8cqw, 3px) solid #ef4444;
  border-bottom: min(0.8cqw, 3px) solid #ef4444;
  box-shadow: 0 0 min(8cqw, 35px) rgba(239, 68, 68, 0.85), inset 0 0 min(4cqw, 20px) rgba(239, 68, 68, 0.45);
  padding: min(2.5cqw, 10px) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.boss-warning-stripes {
  width: 100%;
  height: min(1.8cqw, 8px);
  background: repeating-linear-gradient(
    45deg,
    #ef4444,
    #ef4444 12px,
    #000000 12px,
    #000000 24px
  );
  opacity: 0.85;
}

.boss-warning-text-box {
  padding: min(1.2cqw, 5px) min(3cqw, 12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.boss-warning-sub {
  font-family: var(--font-title);
  font-size: min(3.2cqw, 0.82rem);
  letter-spacing: min(0.6cqw, 2.5px);
  color: #f87171;
  font-weight: 900;
  white-space: nowrap;
  line-height: 1.2;
}

.boss-warning-main {
  font-family: var(--font-title);
  font-size: min(8.0cqw, 2.1rem);
  font-weight: 900;
  letter-spacing: min(1.0cqw, 4px);
  color: #ffffff;
  text-shadow: 0 0 16px #ef4444, 0 0 30px #ef4444;
  animation: bossTextFlicker 0.25s infinite alternate;
  line-height: 1.1;
  margin: 1px 0;
  white-space: nowrap;
}

@keyframes bossTextFlicker {
  0% { color: #ffffff; text-shadow: 0 0 16px #ef4444; }
  100% { color: #fecaca; text-shadow: 0 0 28px #ef4444, 0 0 45px #dc2626; }
}

.boss-warning-stage {
  font-family: var(--font-title);
  font-size: min(3.0cqw, 0.78rem);
  color: #fca5a5;
  letter-spacing: min(0.3cqw, 1.2px);
  font-weight: 800;
  margin-top: 2px;
  white-space: nowrap;
  line-height: 1.2;
}

.boss-warning-target {
  font-family: var(--font-title);
  font-size: min(5.0cqw, 1.35rem);
  color: #fbbf24;
  letter-spacing: min(0.4cqw, 1.8px);
  font-weight: 900;
  text-shadow: 0 0 min(2cqw, 8px) rgba(251, 191, 36, 0.7);
  white-space: nowrap;
  line-height: 1.25;
  margin-top: 1px;
}

/* Boss Opponent HUD Card Decoration */
.player-hud-card.opponent-card.boss-card {
  border-color: #ef4444 !important;
  box-shadow: 0 0 min(3cqw, 12px) rgba(239, 68, 68, 0.6) !important;
  animation: bossHudGlow 1.2s infinite alternate ease-in-out;
}

@keyframes bossHudGlow {
  0% { box-shadow: 0 0 min(2cqw, 8px) rgba(239, 68, 68, 0.4); }
  100% { box-shadow: 0 0 min(4cqw, 16px) rgba(239, 68, 68, 0.85); }
}

/* Result Screen Arcade Actions */
.result-arcade-actions-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(2.2cqw, 8px);
  width: 100%;
  margin-bottom: 0 !important;
}

.result-arcade-next-btn {
  background: linear-gradient(180deg, #10b981 0%, #059669 50%, #047857 100%);
  color: #ffffff;
  box-shadow: 0 min(1.2cqw, 5px) 0 #065f46, 0 min(2cqw, 8px) min(5cqw, 20px) rgba(16, 185, 129, 0.4);
}

.arcade-retry-btn-grid {
  display: flex;
  flex-direction: column;
  gap: min(2.5cqw, 10px);
  width: 100%;
}

.result-arcade-retry-btn {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
  color: #ffffff;
  box-shadow: 0 min(1.0cqw, 4px) 0 #78350f, 0 min(1.5cqw, 6px) min(4cqw, 15px) rgba(245, 158, 11, 0.4);
  max-width: min(72cqw, 280px) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: min(2.2cqw, 9px) min(3.5cqw, 14px) !important;
  font-size: min(3.8cqw, 0.95rem) !important;
  border-radius: min(3.2cqw, 13px) !important;
  min-height: min(10.5cqw, 42px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.result-arcade-restart-btn {
  background: linear-gradient(180deg, #64748b 0%, #475569 50%, #334155 100%);
  color: #ffffff;
  box-shadow: 0 min(1.2cqw, 5px) 0 #1e293b, 0 min(2cqw, 8px) min(5cqw, 20px) rgba(71, 85, 105, 0.4);
}

/* Result Screen Endless Actions */
.result-endless-actions-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(2.5cqw, 10px);
  width: 100%;
  margin-bottom: min(4cqw, 16px) !important;
}

.result-endless-retry-btn {
  background: linear-gradient(180deg, #a855f7 0%, #8b5cf6 50%, #7c3aed 100%);
  color: #ffffff;
  box-shadow: 0 min(1.0cqw, 4px) 0 #5b21b6, 0 min(1.5cqw, 6px) min(4cqw, 15px) rgba(139, 92, 246, 0.4);
  max-width: min(72cqw, 280px) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: min(2.2cqw, 9px) min(3.5cqw, 14px) !important;
  font-size: min(3.8cqw, 0.95rem) !important;
  border-radius: min(3.2cqw, 13px) !important;
  min-height: min(10.5cqw, 42px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* Arcade Stage Clear Tap to Advance Indicator (Positioned directly below STAGE CLEAR banner) */
.arcade-clear-tap-prompt {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(15, 23, 42, 0.92);
  border: 1.5px solid rgba(56, 189, 248, 0.8);
  box-shadow: 0 0 min(3cqw, 12px) rgba(56, 189, 248, 0.4);
  border-radius: min(4cqw, 16px);
  padding: min(1.6cqw, 6px) min(3.8cqw, 15px);
  z-index: 120;
  pointer-events: none;
  white-space: nowrap !important;
  width: max-content !important;
  max-width: 90% !important;
  box-sizing: border-box !important;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  animation: pulseTapPrompt 1.1s infinite alternate ease-in-out;
}

.arcade-clear-tap-prompt.hidden {
  display: none !important;
}

.arcade-clear-tap-text {
  font-family: var(--font-title);
  font-size: min(2.6cqw, 0.72rem);
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.8px;
  text-shadow: 0 0 min(1.5cqw, 5px) rgba(56, 189, 248, 0.7);
  white-space: nowrap !important;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin: 0 !important;
  padding: 0 !important;
}

@keyframes pulseTapPrompt {
  0% { transform: translate(-50%, -50%) scale(0.96); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(1.03); opacity: 1.0; }
}

/* Arcade Status & Stage Select Card */
.arcade-status-card,
.arcade-stage-select-card {
  background: rgba(7, 29, 58, 0.85);
  border: 1.5px solid rgba(56, 189, 248, 0.5);
  border-radius: min(3.5cqw, 14px);
  padding: min(3cqw, 12px);
  display: flex;
  flex-direction: column;
  gap: min(2cqw, 8px);
  box-shadow: inset 0 0 min(3cqw, 12px) rgba(56, 189, 248, 0.15);
}

.arcade-stage-select-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 min(1cqw, 4px);
}

.arcade-stage-select-label,
.arcade-status-label {
  font-family: var(--font-title);
  font-size: min(3.2cqw, 0.85rem);
  color: #38bdf8;
  letter-spacing: 1.5px;
  font-weight: 900;
}

.arcade-stage-highest-badge {
  font-family: var(--font-title);
  font-size: min(2.8cqw, 0.75rem);
  font-weight: 800;
  color: #94a3b8;
  background: rgba(15, 23, 42, 0.65);
  padding: min(0.6cqw, 2px) min(2.2cqw, 9px);
  border-radius: 9999px;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.arcade-stage-highest-badge span,
.arcade-status-val {
  color: #38bdf8;
  font-weight: 900;
}

/* 4 columns x 2 rows Grid */
.arcade-stage-select-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: min(2cqw, 8px);
  width: 100%;
  box-sizing: border-box;
}

.arcade-stage-btn {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  border-radius: min(2.5cqw, 10px);
  padding: min(2.2cqw, 9px) min(1cqw, 4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  user-select: none;
  touch-action: manipulation;
  min-height: min(12cqw, 48px);
  position: relative;
}

.arcade-stage-btn:hover:not(.is-locked) {
  border-color: #38bdf8;
  transform: translateY(-2px);
  box-shadow: 0 min(1.5cqw, 6px) min(3cqw, 12px) rgba(56, 189, 248, 0.3);
}

.arcade-stage-btn:active:not(.is-locked) {
  transform: translateY(1px) scale(0.97);
}

.arcade-stage-btn.is-selected {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
  border-color: #38bdf8;
  box-shadow: 0 0 min(3cqw, 14px) rgba(56, 189, 248, 0.8), inset 0 0 min(2cqw, 8px) rgba(255, 255, 255, 0.3);
  transform: scale(1.04);
}

.arcade-stage-btn.is-locked {
  opacity: 0.38;
  cursor: not-allowed;
  filter: grayscale(0.85);
  border-color: rgba(148, 163, 184, 0.2);
}

.arcade-stage-btn.is-boss {
  border-color: rgba(245, 158, 11, 0.7);
}

.arcade-stage-btn.is-boss.is-selected {
  background: linear-gradient(180deg, #d97706 0%, #92400e 100%);
  border-color: #fbbf24;
  box-shadow: 0 0 min(3cqw, 14px) rgba(245, 158, 11, 0.85), inset 0 0 min(2cqw, 8px) rgba(255, 255, 255, 0.3);
}

.arcade-stage-btn.is-final-boss {
  border-color: rgba(244, 63, 94, 0.7);
}

.arcade-stage-btn.is-final-boss.is-selected {
  background: linear-gradient(180deg, #e11d48 0%, #881337 100%);
  border-color: #f43f5e;
  box-shadow: 0 0 min(3cqw, 14px) rgba(244, 63, 94, 0.9), inset 0 0 min(2cqw, 8px) rgba(255, 255, 255, 0.3);
}

.arcade-stage-btn-num {
  font-family: var(--font-title);
  font-size: min(3.5cqw, 0.96rem);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.5px;
  line-height: 1.1;
}

.arcade-stage-btn-tag {
  font-family: var(--font-title);
  font-size: min(2cqw, 0.58rem);
  font-weight: 900;
  letter-spacing: 0.5px;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1;
}

.arcade-stage-btn-tag.boss {
  background: #f59e0b;
  color: #000;
}

.arcade-stage-btn-tag.final {
  background: #f43f5e;
  color: #fff;
}

.arcade-stage-btn-tag.cleared {
  color: #34d399;
}

.arcade-stage-btn-tag.locked {
  color: #94a3b8;
}

.arcade-restart-menu-btn {
  background: linear-gradient(180deg, #64748b 0%, #475569 50%, #334155 100%);
  color: #ffffff;
  box-shadow: 0 min(1.2cqw, 5px) 0 #1e293b, 0 min(2cqw, 8px) min(5cqw, 20px) rgba(71, 85, 105, 0.4);
}

/* Ensure hidden always beats .result-action-grid display: grid !important */
#result-versus-actions.hidden,
.result-action-grid.hidden,
#result-arcade-actions.hidden,
#result-endless-actions.hidden {
  display: none !important;
}

/* ========================================================
   ENDLESS MODE CHIP REINFORCE MODAL STYLES (添付画像レイアウト)
   ======================================================== */
#endless-chip-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 35%, rgba(2, 132, 199, 0.65) 0%, rgba(3, 105, 161, 0.85) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: min(2cqw, 10px);
  pointer-events: auto;
  box-sizing: border-box;
}

#endless-chip-modal.hidden {
  display: none !important;
  pointer-events: none !important;
}

/* ============================================================
   Endless Chip Modal Container & External Equipment Window
   ============================================================ */
.endless-chip-modal-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: min(96cqw, 510px);
  gap: min(1.5cqw, 7px);
  box-sizing: border-box;
  max-height: 98vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 上側別ウィンドウ: 現在の装備ウィンドウ */
.endless-chip-equip-window {
  width: 100%;
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
  border: min(0.8cqw, 3.5px) solid #38bdf8;
  border-radius: min(3.5cqw, 16px);
  padding: min(1cqw, 4px) min(2.5cqw, 10px) min(1.5cqw, 7px);
  box-shadow: 0 min(3cqw, 16px) min(8cqw, 40px) rgba(0, 0, 0, 0.65), 0 0 min(5cqw, 25px) rgba(56, 189, 248, 0.4);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(0.6cqw, 3px);
  flex-shrink: 0;
  animation: modalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.endless-chip-equip-header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.endless-chip-equip-title {
  font-family: var(--font-title);
  font-size: min(2.8cqw, 0.80rem);
  font-weight: 900;
  letter-spacing: 1.2px;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.7);
  line-height: 1;
}

.endless-chip-equip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: min(1.2cqw, 5px);
  width: 100%;
  box-sizing: border-box;
}

.endless-chip-equip-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: min(1.8cqw, 7px);
  padding: min(0.6cqw, 3px) min(0.8cqw, 3px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  min-height: min(9cqw, 38px);
}

.endless-chip-equip-icon-wrap {
  width: min(6cqw, 24px);
  height: min(6cqw, 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(14, 165, 233, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.3);
  flex-shrink: 0;
}

.endless-chip-equip-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.endless-chip-equip-name {
  font-family: var(--font-main);
  font-size: min(1.8cqw, 0.54rem);
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
  line-height: 1.1;
}

.endless-chip-panel {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
  border: min(0.8cqw, 3.5px) solid #38bdf8;
  border-radius: min(4.5cqw, 22px);
  width: 100%;
  max-width: min(96cqw, 510px);
  height: auto;
  max-height: min(720px, 94vh);
  box-shadow: 0 min(3cqw, 16px) min(8cqw, 40px) rgba(0, 0, 0, 0.65), 0 0 min(5cqw, 25px) rgba(56, 189, 248, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: min(2cqw, 10px) min(3cqw, 14px);
  position: relative;
  z-index: 131;
  color: #ffffff;
  box-sizing: border-box;
  animation: modalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  overflow-x: hidden;
  gap: min(1.8cqw, 8px);
}

.endless-chip-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
  width: 100%;
}

.endless-chip-stage-tag {
  display: none !important;
}

.endless-chip-title {
  font-family: var(--font-title);
  font-size: min(4.6cqw, 1.25rem);
  font-weight: 900;
  letter-spacing: 1.2px;
  color: #ffffff;
  margin: 0;
  line-height: 1.1;
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
}

.endless-chip-sub {
  font-family: var(--font-main);
  font-size: min(2.3cqw, 0.64rem);
  color: #cbd5e1;
  margin: 0;
  height: auto;
  min-height: min(5cqw, 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.15;
  width: 100%;
}

/* Main Upper Layout: Slot Ring (Left) + Synergy Tables (Right) */
.chip-main-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: min(4cqw, 18px);
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Left: Ring & Core Container */
.chip-ring-wrapper {
  position: relative;
  flex: 0 0 auto;
  width: min(49cqw, 224px);
  height: min(49cqw, 224px);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.chip-ring-container {
  position: relative;
  width: min(49cqw, 224px);
  height: min(49cqw, 224px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chip-circuit-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.chip-circuit-ring-outer {
  fill: none;
  stroke: rgba(56, 189, 248, 0.25);
  stroke-width: 2;
  stroke-dasharray: 6 6;
}

.chip-circuit-ring-inner {
  fill: none;
  stroke: rgba(56, 189, 248, 0.18);
  stroke-width: 1.5;
}

.chip-circuit-radial {
  stroke: rgba(56, 189, 248, 0.20);
  stroke-width: 1.5;
}

/* Center Ship */
.chip-center-ship {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(16cqw, 68px);
  height: min(16cqw, 68px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.25) 0%, rgba(2, 6, 23, 0.85) 80%);
  border: 2px solid #38bdf8;
  box-shadow: 0 0 min(3.5cqw, 14px) rgba(56, 189, 248, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
}

.chip-center-ship canvas {
  width: min(13cqw, 54px);
  height: min(13cqw, 54px);
}

.chip-ship-pulse-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(56, 189, 248, 0.4);
  animation: chipPulse 2.4s infinite ease-in-out;
  pointer-events: none;
}

@keyframes chipPulse {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.15); opacity: 0.8; }
}

/* 8 Circular Chip Slots (44px / 半径89px) */
.chip-slot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(10.2cqw, 44px);
  height: min(10.2cqw, 44px);
  margin-top: calc(-1 * min(10.2cqw, 44px) / 2);
  margin-left: calc(-1 * min(10.2cqw, 44px) / 2);
  border-radius: 50%;
  transform: rotate(var(--angle)) translate(min(20.5cqw, 89px)) rotate(calc(-1 * var(--angle)));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  z-index: 15;
  transition: box-shadow 0.15s ease;
}

.chip-slot:active {
  transform: rotate(var(--angle)) translate(min(20.5cqw, 89px)) rotate(calc(-1 * var(--angle))) scale(0.95);
}

.chip-slot-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Empty slot */
.chip-slot.is-empty .chip-slot-inner {
  background: rgba(15, 23, 42, 0.65);
  border: 1.5px dashed rgba(56, 189, 248, 0.4);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
}

.chip-slot-placeholder {
  font-family: var(--font-title);
  font-size: min(3.2cqw, 0.88rem);
  font-weight: 800;
  color: rgba(148, 163, 184, 0.6);
}

/* Filled slot */
.chip-slot.is-filled .chip-slot-inner {
  background: radial-gradient(circle, rgba(15, 23, 42, 0.9) 0%, rgba(3, 7, 18, 0.98) 100%);
  border: 2px solid var(--chip-color, #38bdf8);
  box-shadow: 0 0 min(2.5cqw, 10px) var(--chip-color, #38bdf8);
}

.chip-slot-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  transform: none;
  z-index: 1;
  pointer-events: none;
  transition: transform 0.2s ease;
}

/* Level UP Dynamic Badge (Lvアップ可能チップ選択時のみ表示) */
.chip-slot-badge {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-title);
  font-size: min(2.2cqw, 0.62rem);
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  padding: 1.5px 5px;
  border-radius: 5px;
  border: 1px solid #fde68a;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.9), 0 2px 4px rgba(0, 0, 0, 0.6);
  z-index: 25;
  pointer-events: none;
  white-space: nowrap !important;
  animation: bounceUpBadge 0.6s infinite alternate ease-in-out;
}

/* Equipped Chip Level Badge (スロット内側右上に常時表示: 外周の端子ピンと干渉しない) */
.chip-slot-lvl {
  position: absolute;
  top: 1px;
  right: 1px;
  font-family: var(--font-title);
  font-size: min(1.8cqw, 0.52rem);
  font-weight: 900;
  line-height: 1;
  padding: 1px 2.5px;
  border-radius: 3px;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(56, 189, 248, 0.85);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
  z-index: 25;
  pointer-events: none;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* 4番スロット (右下): 右上に端子ピンが向くため、Lv表記を右下に配置 */
.chip-slot[data-slot="3"] .chip-slot-lvl {
  top: auto;
  bottom: 1px;
  right: 1px;
}

/* 8番スロット (左上): 右上に端子ピンが向くため、Lv表記を左上に配置 */
.chip-slot[data-slot="7"] .chip-slot-lvl {
  top: 1px;
  right: auto;
  left: 1px;
}

/* 6番スロット (左下): 右上に中心端子ピンが向くため、Lv表記を左下に配置 */
.chip-slot[data-slot="5"] .chip-slot-lvl {
  top: auto;
  bottom: 1px;
  right: auto;
  left: 1px;
}

/* 5番スロット (真下): 上に中心端子ピンが向くため、Lv表記を右下に配置 */
.chip-slot[data-slot="4"] .chip-slot-lvl {
  top: auto;
  bottom: 1px;
  right: 1px;
}

.chip-slot-lvl.is-max {
  color: #fef08a;
  background: linear-gradient(135deg, #92400e 0%, #b45309 50%, #d97706 100%);
  border: 1px solid #fde047;
  box-shadow: 0 0 6px rgba(250, 204, 21, 0.75);
  font-size: min(1.7cqw, 0.50rem);
  letter-spacing: 0.3px;
}

.chip-slot.is-newly-placed .chip-slot-inner {
  border-color: var(--chip-color, #38bdf8) !important;
  box-shadow: 0 0 16px var(--chip-color, #38bdf8), 0 0 6px #ffffff !important;
  animation: newlyPlacedGlow 1.2s infinite alternate ease-in-out;
}

@keyframes newlyPlacedGlow {
  0% { transform: scale(1); box-shadow: 0 0 8px var(--chip-color, #38bdf8); }
  100% { transform: scale(1.05); box-shadow: 0 0 18px var(--chip-color, #38bdf8), 0 0 6px #ffffff; }
}

/* Target highlight when candidate selected (候補チップの色でパルス) */
.chip-slot.is-candidate-target .chip-slot-inner {
  border-color: var(--target-chip-color, #38bdf8) !important;
  animation: slotGlowPulse 1.2s infinite alternate ease-in-out;
}

@keyframes slotGlowPulse {
  0% {
    box-shadow: 0 0 4px var(--target-chip-color, rgba(56, 189, 248, 0.4));
  }
  100% {
    box-shadow: 0 0 16px var(--target-chip-color, rgba(56, 189, 248, 0.9)), inset 0 0 8px var(--target-chip-color, rgba(56, 189, 248, 0.3));
  }
}

.chip-slot.is-active-target .chip-slot-inner {
  border-color: var(--chip-color, #38bdf8) !important;
  box-shadow: 0 0 16px var(--chip-color, #38bdf8), inset 0 0 8px var(--chip-color, #38bdf8) !important;
}

/* Selected Slot for Deletion: チップ本来の枠線色はそのまま残し、外側に赤いパルスリングを表示 */
.chip-slot.is-selected-slot .chip-slot-inner {
  border-color: var(--chip-color, #38bdf8) !important;
  box-shadow: 0 0 0 3px #f43f5e, 0 0 min(4cqw, 16px) #f43f5e, inset 0 0 min(2cqw, 8px) rgba(244, 63, 94, 0.5) !important;
  animation: selectedSlotPulse 1s infinite alternate ease-in-out;
}

@keyframes selectedSlotPulse {
  0% { box-shadow: 0 0 0 2px #f43f5e, 0 0 min(2.5cqw, 10px) #f43f5e; }
  100% { box-shadow: 0 0 0 3.5px #f43f5e, 0 0 min(4.5cqw, 18px) #f43f5e, inset 0 0 6px rgba(244, 63, 94, 0.5); }
}

/* Selected Slot Delete Button (右下・黄色シナジー枠の真上) */
.chip-delete-btn {
  position: absolute;
  bottom: min(1cqw, 4px);
  right: min(1.5cqw, 6px);
  background: rgba(15, 23, 42, 0.88);
  border: 1.5px solid rgba(239, 68, 68, 0.4);
  border-radius: 999px;
  color: #f87171;
  font-family: var(--font-title);
  font-size: min(2.5cqw, 0.72rem);
  font-weight: 800;
  padding: 3px min(3cqw, 11px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  z-index: 50;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.chip-delete-btn:disabled {
  opacity: 0.3;
  border-color: rgba(148, 163, 184, 0.25);
  color: #64748b;
  cursor: not-allowed;
  pointer-events: none;
}

.chip-delete-btn:not(:disabled) {
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.9) 0%, rgba(153, 27, 27, 0.95) 100%);
  border-color: #fca5a5;
  color: #ffffff;
  box-shadow: 0 0 min(3cqw, 12px) rgba(239, 68, 68, 0.85);
  animation: trashPulse 1.4s infinite alternate ease-in-out;
}

@keyframes trashPulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.06); }
}

.chip-delete-btn:not(:disabled):active {
  transform: scale(0.94);
}

/* Synergy Arcs (隣接シナジー発光リンク：ネオンエネルギーパルス) */
.synergy-arc {
  fill: none;
  stroke: transparent;
  stroke-width: 4.5;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 0.3s ease, stroke 0.3s ease;
  pointer-events: none;
}

.synergy-arc.is-active-red {
  opacity: 1;
  stroke: #ff7878;
  animation: arcEnergyPulseRed 1.8s infinite alternate ease-in-out;
}

.synergy-arc.is-active-blue {
  opacity: 1;
  stroke: #80f7ff;
  animation: arcEnergyPulseBlue 1.8s infinite alternate ease-in-out;
}

.synergy-arc.is-active-yellow {
  opacity: 1;
  stroke: #fff176;
  animation: arcEnergyPulseYellow 1.8s infinite alternate ease-in-out;
}

/* Diagonal Synergy Lines (対角線シナジー発光ライン) */
.synergy-diag {
  fill: none;
  stroke: transparent;
  stroke-width: 4.5;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 0.3s ease, stroke 0.3s ease;
  pointer-events: none;
}

.synergy-diag.is-active-red {
  opacity: 1;
  stroke: #ff7878;
  animation: arcEnergyPulseRed 1.8s infinite alternate ease-in-out;
}

.synergy-diag.is-active-blue {
  opacity: 1;
  stroke: #80f7ff;
  animation: arcEnergyPulseBlue 1.8s infinite alternate ease-in-out;
}

.synergy-diag.is-active-yellow {
  opacity: 1;
  stroke: #fff176;
  animation: arcEnergyPulseYellow 1.8s infinite alternate ease-in-out;
}

@keyframes arcEnergyPulseRed {
  0% {
    stroke-width: 4.2px;
    filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 7px #ef4444) drop-shadow(0 0 14px rgba(239, 68, 68, 0.85));
    opacity: 0.88;
  }
  50% {
    stroke-width: 5.8px;
    filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 11px #ff2a5f) drop-shadow(0 0 22px rgba(239, 68, 68, 1));
    opacity: 1;
  }
  100% {
    stroke-width: 4.8px;
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 9px #ef4444) drop-shadow(0 0 16px rgba(239, 68, 68, 0.9));
    opacity: 0.94;
  }
}

@keyframes arcEnergyPulseBlue {
  0% {
    stroke-width: 4.2px;
    filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 7px #00f0ff) drop-shadow(0 0 14px rgba(0, 240, 255, 0.85));
    opacity: 0.88;
  }
  50% {
    stroke-width: 5.8px;
    filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 11px #38bdf8) drop-shadow(0 0 22px rgba(0, 240, 255, 1));
    opacity: 1;
  }
  100% {
    stroke-width: 4.8px;
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 9px #00f0ff) drop-shadow(0 0 16px rgba(0, 240, 255, 0.9));
    opacity: 0.94;
  }
}

@keyframes arcEnergyPulseYellow {
  0% {
    stroke-width: 4.2px;
    filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 7px #facc15) drop-shadow(0 0 14px rgba(250, 204, 21, 0.85));
    opacity: 0.88;
  }
  50% {
    stroke-width: 5.8px;
    filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 11px #fde047) drop-shadow(0 0 22px rgba(250, 204, 21, 1));
    opacity: 1;
  }
  100% {
    stroke-width: 4.8px;
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 9px #facc15) drop-shadow(0 0 16px rgba(250, 204, 21, 0.9));
    opacity: 0.94;
  }
}

/* Stackable Target highlight (同色・同効果でLvアップ可能なスロット) */
.chip-slot.is-stackable-target .chip-slot-inner {
  border-color: #f59e0b !important;
  animation: stackableGlowPulse 1s infinite alternate ease-in-out !important;
}

@keyframes stackableGlowPulse {
  0% {
    box-shadow: 0 0 6px #f59e0b, inset 0 0 4px rgba(245, 158, 11, 0.5);
    transform: scale(1);
  }
  100% {
    box-shadow: 0 0 20px #fde047, inset 0 0 8px rgba(253, 224, 71, 0.7);
    transform: scale(1.08);
  }
}

.chip-slot.is-stackable-target .chip-slot-badge {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  border-color: #fde68a !important;
  color: #ffffff !important;
  font-size: min(2.1cqw, 0.58rem) !important;
  font-weight: 900 !important;
  padding: 1.5px 5px !important;
  border-radius: 6px !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.95), 0 2px 4px rgba(0, 0, 0, 0.6) !important;
  animation: bounceUpBadge 0.6s infinite alternate ease-in-out !important;
  z-index: 10 !important;
  letter-spacing: 0.5px;
  white-space: nowrap !important;
}

@keyframes bounceUpBadge {
  0% { transform: translateX(-50%) translateY(0); }
  100% { transform: translateX(-50%) translateY(-2px); }
}

/* Level Up Burst Animation */
.chip-slot.is-level-up-burst {
  animation: levelUpPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes levelUpPop {
  0% { transform: rotate(var(--angle)) translate(min(19cqw, 80px)) rotate(calc(-1 * var(--angle))) scale(0.85); }
  50% { transform: rotate(var(--angle)) translate(min(19cqw, 80px)) rotate(calc(-1 * var(--angle))) scale(1.22); filter: brightness(1.6); }
  100% { transform: rotate(var(--angle)) translate(min(19cqw, 80px)) rotate(calc(-1 * var(--angle))) scale(1); filter: brightness(1); }
}

/* Synergy Tables (赤・青・黄の3段スタック: 視認性を高めた文字サイズとゆったりとした縦横比) */
.chip-synergy-tables {
  width: min(30cqw, 126px);
  flex: 0 0 min(30cqw, 126px);
  height: min(49cqw, 224px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: min(1.4cqw, 6px);
  box-sizing: border-box;
  flex-shrink: 0;
  margin: 0;
}

.synergy-table-card {
  flex: 1 1 0;
  background: rgba(15, 23, 42, 0.78);
  border-radius: min(1.8cqw, 7px);
  padding: min(0.7cqw, 2.5px) min(1.2cqw, 4.5px);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  box-sizing: border-box;
  transition: all 0.2s ease;
  overflow: hidden;
}

.syn-table-rows {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  flex: 1;
  height: 100%;
  gap: 0;
}

/* 太めの枠線で属性色を直感的に表現 */
.synergy-table-card.is-red {
  border: 2px solid rgba(239, 68, 68, 0.75);
}
.synergy-table-card.is-red.is-active {
  border: 2.5px solid #ef4444;
  box-shadow: 0 0 min(2.5cqw, 10px) rgba(239, 68, 68, 0.7);
}

.synergy-table-card.is-blue {
  border: 2px solid rgba(0, 240, 255, 0.75);
}
.synergy-table-card.is-blue.is-active {
  border: 2.5px solid #00f0ff;
  box-shadow: 0 0 min(2.5cqw, 10px) rgba(0, 240, 255, 0.7);
}

.synergy-table-card.is-yellow {
  border: 2px solid rgba(250, 204, 21, 0.75);
}
.synergy-table-card.is-yellow.is-active {
  border: 2.5px solid #facc15;
  box-shadow: 0 0 min(2.5cqw, 10px) rgba(250, 204, 21, 0.7);
}

.syn-table-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: min(0.35cqw, 1.2px) min(0.5cqw, 2px);
  border-radius: 3px;
  font-size: min(2.2cqw, 0.65rem);
  line-height: 1.2;
  color: #94a3b8;
  transition: all 0.2s ease;
  user-select: none;
  box-sizing: border-box;
}

.syn-step-num {
  font-family: var(--font-title);
  font-weight: 900;
  min-width: 10px;
  font-size: min(2.35cqw, 0.70rem);
  line-height: 1.1;
}

.syn-step-eff {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: min(2.05cqw, 0.62rem);
  white-space: nowrap;
  letter-spacing: -0.1px;
  line-height: 1.15;
}

/* 達成段の発光表示 */
.is-red .syn-table-row.is-active-step {
  background: rgba(239, 68, 68, 0.25);
  color: #ffffff;
  font-weight: 900;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
}
.is-red .syn-table-row.is-active-step .syn-step-num {
  color: #f87171;
}

.is-blue .syn-table-row.is-active-step {
  background: rgba(0, 240, 255, 0.25);
  color: #ffffff;
  font-weight: 900;
  box-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
}
.is-blue .syn-table-row.is-active-step .syn-step-num {
  color: #38bdf8;
}

.is-yellow .syn-table-row.is-active-step {
  background: rgba(250, 204, 21, 0.25);
  color: #ffffff;
  font-weight: 900;
  box-shadow: 0 0 6px rgba(250, 204, 21, 0.4);
}
.is-yellow .syn-table-row.is-active-step .syn-step-num {
  color: #fde047;
}

/* Current Reinforcement Summary Bar (2行表示・縦スクロール) */
.chip-status-bar {
  width: 100%;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: min(2cqw, 8px);
  padding: min(0.8cqw, 3px) min(1.5cqw, 6px);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  gap: min(0.8cqw, 3px);
  height: min(10cqw, 40px);
  min-height: min(10cqw, 40px);
  max-height: min(10cqw, 40px);
  margin-top: min(1.8cqw, 8px);
  margin-bottom: min(1.8cqw, 8px);
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  flex-shrink: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.7) rgba(15, 23, 42, 0.5);
  -webkit-overflow-scrolling: touch;
}

/* 縦スクロール用のかっこいいサイバースクロールバー */
.chip-status-bar::-webkit-scrollbar {
  width: 4px;
}
.chip-status-bar::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.4);
  border-radius: 4px;
}
.chip-status-bar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #38bdf8, #818cf8);
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.8);
}
.chip-status-bar::-webkit-scrollbar-thumb:hover {
  background: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 1);
}

.chip-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid var(--chip-color, #38bdf8);
  border-radius: 4px;
  padding: 1px min(1.2cqw, 5px);
  font-family: var(--font-title);
  font-size: min(2.3cqw, 0.67rem);
  font-weight: 800;
  color: #e0f2fe;
  flex-shrink: 0;
  line-height: 1.2;
}

.chip-status-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-main);
  font-size: min(2.3cqw, 0.65rem);
  color: #64748b;
  white-space: nowrap;
}

/* Bottom Selection Tray (3 Random Chips: 自然で美しい縦幅バランス) */
.chip-bottom-tray {
  width: 100%;
  background: rgba(15, 23, 42, 0.55);
  border: min(0.4cqw, 1.5px) solid rgba(255, 255, 255, 0.18);
  border-radius: min(2.5cqw, 12px);
  padding: min(1.5cqw, 6px) min(2.2cqw, 9px) min(1.6cqw, 7px);
  display: flex;
  flex-direction: column;
  gap: min(1cqw, 4px);
  box-sizing: border-box;
  flex-shrink: 0;
  height: min(40cqw, 172px);
  min-height: min(40cqw, 172px);
  max-height: min(40cqw, 172px);
}

.chip-tray-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
}

.chip-tray-header-left {
  display: flex;
  align-items: baseline;
  gap: min(1.5cqw, 6px);
  min-width: 0;
}

.chip-tray-title {
  font-family: var(--font-title);
  font-size: min(2.7cqw, 0.78rem);
  font-weight: 900;
  color: #38bdf8;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.chip-tray-sub {
  font-family: var(--font-main);
  font-size: min(2.0cqw, 0.56rem);
  color: #cbd5e1;
  white-space: nowrap;
}

.chip-reroll-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(56, 189, 248, 0.5);
  border-radius: min(1.5cqw, 6px);
  padding: 2px min(1.6cqw, 7px);
  color: #38bdf8;
  font-family: var(--font-title);
  font-size: min(2.3cqw, 0.70rem);
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  touch-action: manipulation;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.25);
  white-space: nowrap;
  flex-shrink: 0;
}

.chip-reroll-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.28), rgba(14, 165, 233, 0.4));
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.5);
  transform: translateY(-1px);
}

.chip-reroll-btn:active:not(:disabled) {
  transform: translateY(0);
}

.chip-reroll-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: none;
  color: #94a3b8;
}

.chip-reroll-icon {
  font-size: 1.05em;
  display: inline-block;
  transition: transform 0.3s ease;
}

.chip-reroll-btn:hover:not(:disabled) .chip-reroll-icon {
  transform: rotate(90deg);
}

.chip-reroll-label {
  letter-spacing: 0.5px;
}

.chip-reroll-count {
  color: #facc15;
  font-size: 0.88em;
  font-weight: 900;
}

.chip-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: min(1.2cqw, 6px);
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
}

.chip-choice-card {
  background: rgba(15, 23, 42, 0.88);
  border: min(0.4cqw, 1.5px) solid rgba(255, 255, 255, 0.22);
  border-radius: min(2cqw, 10px);
  padding: min(2.6cqw, 11px) min(1.2cqw, 5px) min(1.4cqw, 5px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: min(1.5cqw, 6px);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.chip-choice-card:hover {
  background: rgba(30, 41, 59, 0.92);
  border-color: #38bdf8;
}

.chip-choice-card:active {
  background: rgba(30, 41, 59, 0.98);
}

.chip-choice-card.is-selected {
  background: linear-gradient(180deg, rgba(2, 132, 199, 0.40) 0%, rgba(15, 23, 42, 0.95) 100%);
  border-color: #fde047;
  box-shadow: 0 0 min(2.5cqw, 12px) rgba(250, 204, 21, 0.65);
}

.chip-choice-icon-wrap {
  width: min(9.5cqw, 38px);
  height: min(9.5cqw, 38px);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  border: 1.5px solid var(--chip-color, #38bdf8);
  box-shadow: 0 0 min(2cqw, 8px) var(--chip-color, #38bdf8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: visible;
  position: relative;
  margin-top: min(1cqw, 4px);
  margin-bottom: min(1.5cqw, 5px);
}

/* --- Chip Connectors & Terminal Pins (接続端子マーク) --- */
.chip-slot-connectors {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: rotate(calc(var(--angle) + 90deg));
  z-index: 28;
}

.chip-pin {
  position: absolute;
  background: var(--chip-color, #38bdf8);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 5px var(--chip-color, #38bdf8);
  transition: all 0.2s ease;
  pointer-events: none;
}

/* Diagonal / Center pin: 下（親の円の中心方向へ向く） */
.chip-pin-diag {
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 6px;
  border-radius: 0 0 3px 3px;
}

/* Clockwise pin: 右（時計回りスロット方向へ向く） */
.chip-pin-right {
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 8px;
  border-radius: 0 3px 3px 0;
}

/* Counter-Clockwise pin: 左（反時計回りスロット方向へ向く） */
.chip-pin-left {
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 8px;
  border-radius: 3px 0 0 3px;
}

/* Connected / Linked Pin (通電発光) */
.chip-pin.is-linked {
  background: #ffffff !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 8px #ffffff, 0 0 14px var(--chip-color, #38bdf8) !important;
  animation: pinConnectedPulse 1.2s infinite alternate ease-in-out;
  z-index: 2;
}

@keyframes pinConnectedPulse {
  0% {
    box-shadow: 0 0 6px #ffffff, 0 0 12px var(--chip-color, #38bdf8);
    filter: brightness(1.2);
  }
  100% {
    box-shadow: 0 0 10px #ffffff, 0 0 20px var(--chip-color, #38bdf8), 0 0 6px #ffffff;
    filter: brightness(1.5);
  }
}

/* Chip Choice Card Terminal Pins */
.chip-choice-pin {
  position: absolute;
  background: var(--chip-color, #38bdf8);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 5px var(--chip-color, #38bdf8);
  pointer-events: none;
}

.chip-choice-pin-diag {
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 6px;
  border-radius: 0 0 3px 3px;
}

.chip-choice-pin-right {
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 8px;
  border-radius: 0 3px 3px 0;
}

.chip-choice-pin-left {
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 8px;
  border-radius: 3px 0 0 3px;
}

/* 端子インジケーター（カード内のグラフィカルな端子表示） */
.chip-connector-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin-top: min(0.6cqw, 2px);
  padding: 1px min(1cqw, 4px);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-title);
  font-size: min(2cqw, 0.58rem);
  color: #64748b;
  letter-spacing: 0.5px;
}

.chip-conn-node {
  padding: 0 1px;
  border-radius: 2px;
  color: #475569;
  font-weight: 700;
}

.chip-conn-node.is-active {
  color: #ffffff;
  font-weight: 900;
  text-shadow: 0 0 4px var(--chip-color, #38bdf8);
}

.chip-choice-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  transform: none;
  pointer-events: none;
}

/* Boss Reward: Color Selection Card Styles (発光体 & RED/BLUE/YELLOW のみ) */
.chip-color-choice-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: min(2.5cqw, 12px);
  padding: min(3cqw, 14px) min(1.5cqw, 8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: min(2cqw, 8px);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.chip-color-choice-card:hover {
  background: rgba(30, 41, 59, 0.9);
  border-color: var(--color-code);
  box-shadow: 0 0 min(2.5cqw, 12px) var(--color-code);
  transform: translateY(-2px);
}

.chip-color-choice-card:active {
  transform: scale(0.96);
}

/* シンプルで洗練されたカラーサークル */
.chip-color-orb {
  width: min(7.5cqw, 28px);
  height: min(7.5cqw, 28px);
  border-radius: 50%;
  background: var(--color-code);
  box-shadow: 0 0 min(2.5cqw, 10px) var(--color-code);
  position: relative;
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chip-color-choice-card:hover .chip-color-orb {
  transform: scale(1.1);
  box-shadow: 0 0 min(3.5cqw, 14px) var(--color-code), 0 0 2px #ffffff;
}

/* 小さくスマートな属性ラベル (RED / BLUE / YELLOW) */
.chip-color-label {
  font-family: var(--font-title);
  font-size: min(2.8cqw, 0.82rem);
  font-weight: 700;
  letter-spacing: 2px;
  color: #e2e8f0;
  line-height: 1;
  text-transform: uppercase;
  transition: color 0.15s ease, text-shadow 0.15s ease;
}

.chip-color-choice-card:hover .chip-color-label {
  color: var(--color-code);
  text-shadow: 0 0 6px var(--color-code);
}

.chip-color-reselect-btn {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid #38bdf8;
  color: #38bdf8;
  border-radius: 4px;
  font-family: var(--font-title);
  font-size: min(2.2cqw, 0.65rem);
  padding: 1px 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.chip-color-reselect-btn:hover {
  background: rgba(56, 189, 248, 0.35);
  color: #ffffff;
}

.chip-choice-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0 2px;
  margin-top: 0;
}

.chip-choice-name {
  font-family: var(--font-title);
  font-size: min(2.8cqw, 0.76rem);
  font-weight: 900;
  color: #ffffff;
  line-height: 1.15;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  letter-spacing: 0.1px;
  flex-shrink: 0;
  margin: 0;
}

/* メイン説明 */
.chip-choice-desc {
  font-family: var(--font-main);
  font-size: min(2.1cqw, 0.61rem);
  font-weight: 800;
  color: #e2e8f0;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
}

/* 補足説明 */
.chip-choice-subdesc {
  font-family: var(--font-main);
  font-size: min(1.8cqw, 0.50rem);
  font-weight: 600;
  color: #94a3b8;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 1px;
}

.chip-choice-card.is-selected .chip-choice-name {
  color: #fde047;
}

.chip-choice-card.is-selected .chip-choice-desc {
  color: #fef08a;
}

.chip-choice-card.is-selected .chip-choice-subdesc {
  color: #fde68a;
}

/* Action Buttons (横並び: 装着せず次へ / 次へ進む) */
.endless-chip-actions {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: min(1.5cqw, 8px);
  margin-top: min(2.5cqw, 10px);
  flex-shrink: 0;
}

.endless-chip-actions .main-play-btn {
  flex: 1.35;
  height: min(8cqw, 36px);
  font-size: min(3.2cqw, 0.90rem);
  width: auto;
}

.chip-skip-btn {
  flex: 1;
  height: min(8cqw, 36px);
  background: linear-gradient(180deg, rgba(217, 119, 6, 0.20) 0%, rgba(180, 83, 9, 0.32) 100%);
  border: 1.5px solid #f59e0b;
  border-radius: min(2cqw, 10px);
  color: #fef3c7;
  font-family: var(--font-title);
  font-size: min(2.7cqw, 0.78rem);
  font-weight: 900;
  letter-spacing: 0.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
  box-shadow: 0 0 min(2cqw, 8px) rgba(245, 158, 11, 0.30);
}

.chip-skip-btn:hover {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.35) 0%, rgba(217, 119, 6, 0.48) 100%);
  border-color: #fde047;
  color: #ffffff;
  box-shadow: 0 0 min(3cqw, 14px) rgba(245, 158, 11, 0.60);
}

.chip-skip-btn:active {
  transform: scale(0.97);
}

/* Compact screens responsive adjustments (極端に縦が狭い端末でのみ縮小) */
@media (max-height: 580px) {
  .endless-chip-panel {
    padding: 3px 6px;
    gap: 2px;
    height: 96vh;
    max-height: 96vh;
  }
  .endless-chip-title {
    font-size: 1.1rem;
  }
  .endless-chip-sub {
    min-height: 18px;
    font-size: 0.62rem;
  }
  .endless-chip-equip-window {
    padding: 2px 6px;
    gap: 2px;
  }
  .endless-chip-equip-title {
    font-size: 0.65rem;
  }
  .endless-chip-equip-card {
    min-height: 32px;
    padding: 2px;
  }
  .endless-chip-equip-icon-wrap {
    width: 20px;
    height: 20px;
  }
  .endless-chip-equip-name {
    font-size: 0.50rem;
  }
  .chip-ring-wrapper {
    width: 168px;
    height: 168px;
  }
  .chip-ring-container {
    width: 168px;
    height: 168px;
  }
  .chip-synergy-tables {
    width: 115px;
    flex: 0 0 115px;
    height: 140px;
  }
  .chip-status-bar {
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .chip-center-ship {
    width: 54px;
    height: 54px;
  }
  .chip-center-ship canvas {
    width: 42px;
    height: 42px;
  }
  .chip-slot {
    width: 32px;
    height: 32px;
    margin-top: -16px;
    margin-left: -16px;
    transform: rotate(var(--angle)) translate(66px) rotate(calc(-1 * var(--angle)));
  }
  .chip-slot:active {
    transform: rotate(var(--angle)) translate(66px) rotate(calc(-1 * var(--angle))) scale(0.95);
  }
  .endless-chip-actions {
    margin-top: 8px;
  }
  .endless-chip-actions .main-play-btn,
  .chip-skip-btn {
    height: 32px;
    font-size: 0.82rem;
  }
}

/* ============================================================
   MODE TRANSITION OVERLAY (Stage Transition Style: Blue + Logo)
   ============================================================ */
.mode-transition-overlay {
  position: absolute;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0284c7;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 0.18s ease-out;
  overflow: hidden;
  user-select: none;
}

.mode-transition-overlay.fade-in {
  opacity: 1;
}

.mode-transition-overlay.fade-out {
  opacity: 0;
  transition: opacity 0.20s ease-in;
}

.mode-transition-overlay.hidden {
  display: none !important;
  pointer-events: none !important;
}

.transition-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.transition-plate-logo {
  width: min(58cqw, 280px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 min(3cqw, 14px) rgba(56, 189, 248, 0.45));
}


/* ============================================================
   Chip Augmentation Guidance Overlay & Spotlight
   ============================================================ */
.chip-guidance-overlay {
  position: absolute;
  inset: 0;
  z-index: 200;
  pointer-events: auto;
  overflow: hidden;
  transition: background 0.3s ease;
}

.chip-guidance-overlay.is-dimmed {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.chip-guidance-overlay.is-spotlight {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.chip-guidance-overlay.hidden {
  display: none !important;
  pointer-events: none !important;
}

.chip-guidance-spotlight {
  position: absolute;
  pointer-events: none;
  border: 2.5px solid #38bdf8;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(3, 7, 18, 0.82), 0 0 20px rgba(56, 189, 248, 0.65);
  transition: top 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              left 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-radius 0.3s ease;
  box-sizing: border-box;
  z-index: 1;
  animation: chipGuideSpotlightPulse 2s ease-in-out infinite;
}

@keyframes chipGuideSpotlightPulse {
  0%, 100% {
    border-color: #38bdf8;
    box-shadow: 0 0 0 9999px rgba(3, 7, 18, 0.82), 0 0 16px rgba(56, 189, 248, 0.6);
  }
  50% {
    border-color: #7dd3fc;
    box-shadow: 0 0 0 9999px rgba(3, 7, 18, 0.82), 0 0 28px rgba(56, 189, 248, 0.95);
  }
}

.chip-guidance-card {
  position: absolute;
  z-index: 2;
  width: min(92%, 360px);
  background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
  border: 2px solid #38bdf8;
  border-radius: 14px;
  padding: min(3.5cqw, 16px) min(4.5cqw, 20px) min(3cqw, 14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 0 25px rgba(56, 189, 248, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  pointer-events: auto;
  transition: top 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              bottom 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              left 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.25s ease;
}

.chip-guidance-badge-row {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 6px;
}

.chip-guidance-step-badge {
  font-size: min(2.8cqw, 0.75rem);
  font-weight: 800;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.45);
  border-radius: 999px;
  padding: 2px 10px;
  letter-spacing: 0.05em;
}

.chip-guidance-title {
  font-size: min(4.2cqw, 1.05rem);
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.7);
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.chip-guidance-desc {
  font-size: min(3.2cqw, 0.85rem);
  line-height: 1.55;
  color: #cbd5e1;
  margin: 0 0 14px 0;
  text-align: center;
}

.chip-guidance-actions {
  display: flex;
  justify-content: center;
  width: 100%;
}

.chip-guidance-actions .glow-button.main-play-btn {
  width: min(50cqw, 180px);
  height: min(8cqw, 38px);
  font-size: min(3.5cqw, 0.95rem);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}


/* ============================================================
   Campaign All-Clear Time Card (クリアタイム表示)
   ============================================================ */
.result-campaign-clear-time {
  width: min(90%, 320px);
  margin: min(2cqw, 10px) auto min(1.5cqw, 8px);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(2, 6, 23, 0.98) 100%);
  border: min(0.5cqw, 2px) solid #38bdf8;
  border-radius: min(3cqw, 14px);
  padding: min(2.5cqw, 10px) min(3.5cqw, 16px);
  box-shadow: 0 min(1.5cqw, 6px) min(5cqw, 20px) rgba(0, 0, 0, 0.7), 0 0 min(4cqw, 16px) rgba(56, 189, 248, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.result-campaign-clear-time.hidden {
  display: none !important;
}

.campaign-clear-time-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(2cqw, 8px);
  width: 100%;
  margin-bottom: min(1cqw, 4px);
}

.campaign-clear-time-label {
  font-size: min(3cqw, 0.82rem);
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.campaign-new-record-badge {
  font-size: min(2.6cqw, 0.72rem);
  font-weight: 900;
  background: linear-gradient(135deg, #ca8a04 0%, #eab308 100%);
  color: #0f172a;
  padding: 1px min(2cqw, 8px);
  border-radius: 999px;
  letter-spacing: 0.05em;
  box-shadow: 0 0 min(2.5cqw, 10px) rgba(234, 179, 8, 0.7);
  animation: campaignRecordPulse 1.5s ease-in-out infinite;
}

.campaign-new-record-badge.hidden {
  display: none !important;
}

@keyframes campaignRecordPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 8px rgba(234, 179, 8, 0.5);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 16px rgba(234, 179, 8, 0.9);
  }
}

.campaign-clear-time-val {
  font-family: 'SF Mono', 'Roboto Mono', Menlo, Consolas, Monaco, monospace;
  font-size: min(7.5cqw, 2.1rem);
  font-weight: 900;
  color: #38bdf8;
  text-shadow: 0 0 min(3cqw, 12px) rgba(56, 189, 248, 0.8), 0 0 min(6cqw, 24px) rgba(56, 189, 248, 0.4);
  letter-spacing: 0.06em;
  line-height: 1.1;
  margin-bottom: min(1cqw, 4px);
}

.campaign-best-time-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(1.5cqw, 6px);
  font-size: min(2.8cqw, 0.78rem);
  color: #64748b;
  font-weight: 600;
}

.campaign-best-time-label {
  letter-spacing: 0.05em;
}

.campaign-best-time-val {
  font-family: 'SF Mono', 'Roboto Mono', Menlo, Consolas, Monaco, monospace;
  font-weight: 700;
  color: #cbd5e1;
}


/* ============================================================
   Campaign All Clear Reward Modal (初クリア専用リワードウィンドウ)
   ============================================================ */
#campaign-reward-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(3, 7, 18, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: min(3cqw, 14px);
  pointer-events: auto;
  box-sizing: border-box;
}

#campaign-reward-modal.hidden {
  display: none !important;
  pointer-events: none !important;
}

.campaign-reward-panel {
  width: 100%;
  max-width: min(92cqw, 420px);
  background: linear-gradient(180deg, #1e1b4b 0%, #0f172a 100%);
  border: min(0.6cqw, 2.5px) solid #f59e0b;
  border-radius: min(4cqw, 18px);
  padding: min(4cqw, 18px) min(4.5cqw, 20px) min(3.5cqw, 16px);
  box-shadow: 0 min(3cqw, 14px) min(8cqw, 40px) rgba(0, 0, 0, 0.8), 0 0 min(6cqw, 25px) rgba(245, 158, 11, 0.4);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(3cqw, 14px);
  animation: bannerPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.campaign-reward-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(1cqw, 4px);
  width: 100%;
}

.campaign-reward-title {
  font-family: var(--font-title);
  font-size: min(4.8cqw, 1.35rem);
  font-weight: 900;
  color: #fbbf24;
  text-shadow: 0 0 min(2.5cqw, 12px) rgba(251, 191, 36, 0.7);
  margin: 0;
  letter-spacing: 0.05em;
}

.campaign-reward-sub {
  font-size: min(3cqw, 0.82rem);
  color: #cbd5e1;
  margin: 0;
  line-height: 1.45;
  text-align: center;
}

.campaign-reward-grid {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: min(3cqw, 14px);
  width: 100%;
}

.campaign-reward-item {
  flex: 1;
  background: rgba(15, 23, 42, 0.75);
  border: min(0.4cqw, 1.5px) solid rgba(245, 158, 11, 0.45);
  border-radius: min(3cqw, 14px);
  padding: min(2.5cqw, 10px) min(2cqw, 8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(1.5cqw, 6px);
  box-shadow: inset 0 0 min(3cqw, 12px) rgba(245, 158, 11, 0.15);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.campaign-reward-item:hover {
  transform: translateY(-2px);
  border-color: #fbbf24;
}

.campaign-reward-thumb-box {
  width: min(16cqw, 64px);
  height: min(16cqw, 64px);
  border-radius: min(2.5cqw, 10px);
  background: radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.25) 0%, rgba(15, 23, 42, 0.8) 100%);
  border: 1px solid rgba(251, 191, 36, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.campaign-reward-thumb {
  width: 82%;
  height: 82%;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.6));
}

.campaign-reward-crown-icon {
  font-size: min(8cqw, 34px);
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.8));
  line-height: 1;
}

.campaign-reward-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.campaign-reward-type {
  font-size: min(2.2cqw, 0.65rem);
  font-weight: 800;
  color: #f59e0b;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.campaign-reward-name {
  font-size: min(3cqw, 0.88rem);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.04em;
}

.campaign-reward-actions {
  width: 100%;
  display: flex;
  justify-content: center;
}

.campaign-reward-actions .main-play-btn {
  width: min(50cqw, 180px);
  height: min(8cqw, 38px);
  font-size: min(3.4cqw, 0.95rem);
  cursor: pointer;
}