@charset "UTF-8";

/* =========================================
   黑洞次元裂縫 (全域變色 - Cyberpunk Rift Mode)
   ========================================= */
body.rift-mode {
  background: #0F0A18 !important;
  animation: none;
}

body.rift-mode::before {
  background-image: 
    linear-gradient(rgba(0,255,255,0.05) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,0,255,0.05) 2px, transparent 2px);
}

body.rift-mode .game-top-bar {
  background: #1C1126;
  border-bottom-color: #FF00FF;
  color: #00FFFF;
}
body.rift-mode .hp-bar-outer { border-color: #00FFFF; background: #0F0A18; }
body.rift-mode .hp-bar-inner { background: #FF00FF; }
body.rift-mode .icon-btn { background: #FF00FF; color: #0F0A18; border-color: #00FFFF; }

body.rift-mode .start-hero, body.rift-mode .hero-banner {
  border-color: #FF00FF;
}

body.rift-mode .main-header {
  background: #1C1126;
  border-color: #FF00FF;
  box-shadow: 8px 8px 0 #00FFFF;
}

body.rift-mode .main-title, body.rift-mode .tab-btn {
  color: #00FFFF;
}

body.rift-mode .tab-btn {
  background: #2D223B;
  border-color: #FF00FF;
}

body.rift-mode .tab-btn.active {
  background: #FF00FF;
  color: #0F0A18;
}

body.rift-mode .cute-box {
  background-color: #1C1126;
  background-image: 
    linear-gradient(rgba(255,0,255,0.1) 2px, transparent 2px),
    linear-gradient(90deg, rgba(0,255,255,0.1) 2px, transparent 2px);
  border-color: #FF00FF;
  box-shadow: 8px 8px 0px #00FFFF !important;
}

body.rift-mode .chapter-banner-img {
  border-bottom-color: #FF00FF;
}

body.rift-mode .chapter-title-new {
  color: #00FFFF !important;
  text-shadow: 2px 2px 0px #FF00FF;
}

body.rift-mode .chapter-title-new .char-icon {
  border: 2px solid #00FFFF;
  border-radius: 50%;
  padding: 2px;
  background-color: #0F0A18;
}

body.rift-mode .emoji-decor {
  filter: drop-shadow(2px 2px 0px #00FFFF);
  text-shadow: none;
}

body.rift-mode .time-badge {
  background: #FF00FF;
  color: #0F0A18;
  border-color: #00FFFF;
}

body.rift-mode .card-subtitle {
  background: #FF00FF;
  color: #0F0A18;
  border-color: #00FFFF;
}

body.rift-mode .card-desc {
  color: #E0E0E0 !important;
}

body.rift-mode .mystery-group {
  background: #2D223B;
  border-color: #FF00FF;
}

body.rift-mode .mystery-title, body.rift-mode .result-title {
  color: #00FFFF !important;
  text-shadow: 2px 2px 0px #FF00FF;
}

body.rift-mode .mystery-btn {
  background: #FF00FF;
  color: #0F0A18;
  border-color: #00FFFF;
  box-shadow: inset 4px 4px 0px rgba(255,255,255,0.4), inset -4px -4px 0px rgba(0,0,0,0.4), 5px 5px 0px #00FFFF;
}

body.rift-mode .mystery-btn.active {
  background: #00FFFF;
  box-shadow: inset 4px 4px 0px rgba(0,0,0,0.4), 0px 0px 0px transparent;
}

body.rift-mode .nav-btn, body.rift-mode .next-btn {
  background: #00FFFF;
  color: #0F0A18;
  border-color: #FF00FF;
  box-shadow: inset 4px 4px 0px rgba(255,255,255,0.8), inset -4px -4px 0px rgba(0,0,0,0.4), 5px 5px 0px #FF00FF;
}

body.rift-mode .nav-btn:active, body.rift-mode .next-btn:active {
  box-shadow: inset 4px 4px 0px rgba(0,0,0,0.4), 0px 0px 0px transparent;
}