/* ==================================================
   🌌 秘密海域・拼圖系統 (全螢幕獨立雙背景旗艦版)
   ================================================== */
:root {
  --neon-blue: #00f2fe;
  --deep-blue: #4facfe;
  --cyber-gold: #ffd200;
  --panel-bg: rgba(4, 20, 42, 0.78);
  --panel-border: rgba(79, 172, 254, 0.38);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family:
    "PingFang TC",
    -apple-system,
    sans-serif;
  user-select: none;
}

body,
html {
  width: 100%;
  min-height: 100%;
  background-color: #010a17 !important;
  color: #fff;
  overflow-x: hidden;
}

/* ==================================================
   🍾 主頁：漂流瓶與星夜洋流背景
   ================================================== */
.ocean-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  background: radial-gradient(
    circle at 50% 12%,
    #083769 0%,
    #031c3c 45%,
    #010b1a 80%,
    #00050d 100%
  ) !important;
  pointer-events: none !important;
}

.sky-glow {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 450px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 242, 254, 0.28) 0%,
    transparent 75%
  );
  filter: blur(50px);
}

.caustic-waves {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(
    135deg,
    rgba(0, 242, 254, 0.08) 0%,
    transparent 35%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 65%
  );
  background-size: 200% 200%;
  animation: waveShimmer 10s ease-in-out infinite alternate;
}

@keyframes waveShimmer {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

.drifting-bottles-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.bottle-item {
  position: absolute;
  filter: drop-shadow(0 0 16px rgba(0, 242, 254, 0.7))
    drop-shadow(0 0 25px rgba(255, 210, 0, 0.35));
}

.bottle-svg {
  width: 100%;
  height: 100%;
  display: block;
  animation: bottleRock 3.5s ease-in-out infinite alternate;
}

@keyframes bottleRock {
  0% {
    transform: rotate(-14deg) translateY(-8px);
  }
  50% {
    transform: rotate(4deg) translateY(6px);
  }
  100% {
    transform: rotate(16deg) translateY(-6px);
  }
}

.letter-glow {
  animation: letterPulse 2.2s infinite alternate ease-in-out;
}

@keyframes letterPulse {
  0% {
    opacity: 0.6;
    filter: drop-shadow(0 0 4px #ffd200);
  }
  100% {
    opacity: 1;
    filter: drop-shadow(0 0 14px #ffeaa7);
  }
}

.bottle-1 {
  top: 22%;
  left: -120px;
  width: 95px;
  height: 95px;
  animation: driftL2R 22s linear infinite;
}

.bottle-2 {
  top: 48%;
  right: -120px;
  width: 80px;
  height: 80px;
  transform: scaleX(-1);
  filter: drop-shadow(0 0 16px rgba(255, 210, 0, 0.8));
  animation: driftR2L 18s linear infinite 3s;
}

.bottle-3 {
  top: 72%;
  left: -90px;
  width: 55px;
  height: 55px;
  opacity: 0.55;
  filter: blur(1.5px) drop-shadow(0 0 10px #00f2fe);
  animation: driftL2R 28s linear infinite 8s;
}

@keyframes driftL2R {
  0% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(50vw) translateY(-30px);
  }
  100% {
    transform: translateX(calc(100vw + 200px)) translateY(0);
  }
}

@keyframes driftR2L {
  0% {
    transform: scaleX(-1) translateX(0) translateY(0);
  }
  50% {
    transform: scaleX(-1) translateX(50vw) translateY(30px);
  }
  100% {
    transform: scaleX(-1) translateX(calc(100vw + 200px)) translateY(0);
  }
}

.bubbles-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ocean-bubble {
  position: absolute;
  bottom: -30px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.8),
    rgba(0, 242, 254, 0.2)
  );
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 8px rgba(0, 242, 254, 0.5);
  animation: floatBubble 14s linear infinite;
}
.bubble-1 {
  left: 15%;
  width: 14px;
  height: 14px;
  animation-duration: 12s;
  animation-delay: 0s;
}
.bubble-2 {
  left: 40%;
  width: 22px;
  height: 22px;
  animation-duration: 16s;
  animation-delay: 3s;
}
.bubble-3 {
  left: 70%;
  width: 10px;
  height: 10px;
  animation-duration: 10s;
  animation-delay: 1s;
}
.bubble-4 {
  left: 88%;
  width: 18px;
  height: 18px;
  animation-duration: 14s;
  animation-delay: 5s;
}

@keyframes floatBubble {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  15% {
    opacity: 0.8;
  }
  85% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-115vh);
    opacity: 0;
  }
}

.sparkles-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.sparkle-star {
  position: absolute;
  color: #fff;
  text-shadow:
    0 0 8px #ffffff,
    0 0 16px var(--neon-blue);
  animation: sparkleTwinkle var(--dur) ease-in-out infinite alternate;
  animation-delay: var(--delay);
}

@keyframes sparkleTwinkle {
  0% {
    transform: scale(0.3);
    opacity: 0.2;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
    filter: drop-shadow(0 0 10px var(--cyber-gold));
  }
  100% {
    transform: scale(0.6);
    opacity: 0.3;
  }
}

/* ==================================================
   🔘 主頁導航按鈕與內容容器
   ================================================== */
.nav-btn {
  position: fixed;
  top: 18px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(
    135deg,
    rgba(13, 49, 90, 0.88),
    rgba(4, 21, 44, 0.92)
  );
  border: 1px solid var(--panel-border);
  border-top: 1.5px solid rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: #e2f1ff;
  padding: 8px 14px; /* 緊湊內距，避免英文按鈕被推擠出螢幕 */
  border-radius: 30px;
  font-size: 0.85rem; /* 微調字級 */
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.5),
    inset 0 0 12px rgba(0, 242, 254, 0.25);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  white-space: nowrap;
}

.back-btn {
  left: 16px;
}
.nav-right-group {
  position: fixed;
  top: 18px;
  right: 16px;
  display: flex;
  gap: 8px;
  z-index: 50;
}
.nav-right-group .nav-btn {
  position: static;
}

.nav-btn:hover {
  transform: translateY(-2px) scale(1.04);
  background: linear-gradient(
    135deg,
    rgba(20, 75, 138, 0.95),
    rgba(6, 32, 65, 0.95)
  );
  border-color: var(--neon-blue);
  box-shadow:
    0 12px 30px rgba(0, 242, 254, 0.4),
    inset 0 0 15px rgba(255, 255, 255, 0.6);
  color: #fff;
}

.main-container {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 92%;
  max-width: 960px;
  margin: 0 auto;
  padding-top: 85px;
  padding-bottom: 90px;
  gap: 28px;
}

.glass-panel {
  width: 100%;
  background: var(--panel-bg);
  -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
  border: 1px solid var(--panel-border);
  border-top: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 32px;
  padding: 35px 40px;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.75),
    inset 0 0 40px rgba(0, 242, 254, 0.08);
  position: relative;
  overflow: hidden;
}

.glass-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--neon-blue),
    transparent
  );
}

.panel-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 25px;
}

.panel-title {
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  font-weight: 900;
  letter-spacing: 1.5px;
  background: linear-gradient(180deg, #ffffff 30%, #a4e5ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0, 242, 254, 0.6));
  white-space: nowrap;
  text-align: center;
}
.deco-star {
  color: var(--neon-blue);
  font-size: 1.2rem;
  animation: pulseGlowStar 2s infinite alternate ease-in-out;
}

@keyframes pulseGlowStar {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
    filter: drop-shadow(0 0 2px var(--neon-blue));
  }
  100% {
    transform: scale(1.3);
    opacity: 1;
    filter: drop-shadow(0 0 8px var(--neon-blue));
  }
}

/* ==================================================
   🔮 水晶球法陣與抽卡動態
   ================================================== */
.gacha-stage {
  width: 100%;
  height: 330px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.magic-runes-outer {
  position: absolute;
  width: 310px;
  height: 310px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 210, 0, 0.35);
  box-shadow: 0 0 35px rgba(255, 210, 0, 0.2);
  animation: runeSpinClockwise 30s linear infinite;
  pointer-events: none;
}

.magic-runes-inner {
  position: absolute;
  width: 255px;
  height: 255px;
  border-radius: 50%;
  border: 1.5px dotted rgba(0, 242, 254, 0.45);
  box-shadow: 0 0 25px rgba(0, 242, 254, 0.25);
  animation: runeSpinCounter 18s linear infinite;
  pointer-events: none;
}

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

.pedestal-glow {
  position: absolute;
  bottom: 25px;
  width: 220px;
  height: 35px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 242, 254, 0.5) 0%,
    rgba(0, 110, 255, 0.15) 50%,
    transparent 75%
  );
  filter: blur(8px);
}

.crystal-ball {
  width: 200px;
  height: 200px;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: radial-gradient(
    circle at 35% 25%,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(135, 215, 255, 0.65) 25%,
    rgba(10, 80, 160, 0.88) 60%,
    rgba(2, 25, 55, 0.98) 100%
  );
  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.85),
    inset 0 0 35px rgba(255, 255, 255, 0.85),
    0 0 55px rgba(0, 242, 254, 0.55);
  border: 2.5px solid rgba(255, 255, 255, 0.75);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 5;
  cursor: pointer;
  animation: floatBall 3.6s ease-in-out infinite;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes floatBall {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
    box-shadow:
      0 30px 60px rgba(0, 0, 0, 0.9),
      0 0 75px rgba(0, 242, 254, 0.75);
  }
}

.crystal-core {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(0, 242, 254, 0.5) 60%,
    transparent 100%
  );
  filter: blur(8px);
  animation: corePulse 2s infinite alternate;
  pointer-events: none;
}

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

.idle-text {
  font-size: clamp(
    0.82rem,
    1.8vw,
    0.98rem
  ); /* 縮小字級，完整容納 Ready to Summon */
  font-weight: 900;
  color: #032042;
  letter-spacing: 0.5px; /* 緊縮字距 */
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.95);
  position: relative;
  z-index: 2;
  white-space: nowrap;
  text-align: center;
  max-width: 85%;
}

.idle-sub {
  font-size: 0.58rem;
  font-weight: 800;
  color: rgba(3, 32, 66, 0.75);
  letter-spacing: 1px;
  margin-top: 4px;
  position: relative;
  z-index: 2;
  white-space: nowrap;
}

.idle-sub {
  font-size: 0.65rem;
  font-weight: 800;
  color: rgba(3, 32, 66, 0.75);
  letter-spacing: 1.5px;
  margin-top: 4px;
  position: relative;
  z-index: 2;
  white-space: nowrap;
}
.crystal-ball.drawing {
  animation:
    chargingShake 0.15s ease-in-out infinite,
    chargingGlow 0.4s alternate infinite;
}

@keyframes chargingShake {
  0% {
    transform: translate(3px, 2px) scale(1.02);
  }
  50% {
    transform: translate(-3px, -2px) scale(0.98);
  }
  100% {
    transform: translate(2px, -3px) scale(1.04);
  }
}

@keyframes chargingGlow {
  0% {
    filter: brightness(1.1) drop-shadow(0 0 25px var(--neon-blue));
  }
  100% {
    filter: brightness(2.2) drop-shadow(0 0 60px #ffffff);
  }
}

.crack-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50% !important;
  overflow: hidden !important;
  filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 18px var(--neon-blue));
  z-index: 10;
  pointer-events: none;
}

.crack-line {
  fill: none;
  stroke: #ffffff;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: drawCrack forwards ease-in;
}

@keyframes drawCrack {
  to {
    stroke-dashoffset: 0;
  }
}

.crystal-ball.explode {
  animation: shatterBurst 0.4s ease-out forwards;
}

@keyframes shatterBurst {
  0% {
    transform: scale(1);
    filter: brightness(3);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    filter: brightness(5);
    opacity: 0.9;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
    visibility: hidden;
  }
}

/* 抽獎結果卡牌展示 */
.prize-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10;
  animation: popPrizeCard 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes popPrizeCard {
  0% {
    transform: scale(0.2) translateY(50px);
    opacity: 0;
  }
  70% {
    transform: scale(1.08) translateY(-8px);
    opacity: 1;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.prize-rays {
  position: absolute;
  width: 420px;
  height: 420px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 255, 255, 0.18) 20deg,
    transparent 40deg,
    rgba(255, 255, 255, 0.18) 60deg,
    transparent 80deg,
    rgba(255, 255, 255, 0.18) 100deg,
    transparent 120deg,
    rgba(255, 255, 255, 0.18) 140deg,
    transparent 160deg,
    rgba(255, 255, 255, 0.18) 180deg,
    transparent 200deg,
    rgba(255, 255, 255, 0.18) 220deg,
    transparent 240deg,
    rgba(255, 255, 255, 0.18) 260deg,
    transparent 280deg,
    rgba(255, 255, 255, 0.18) 300deg,
    transparent 320deg,
    rgba(255, 255, 255, 0.18) 340deg,
    transparent 360deg
  );
  border-radius: 50%;
  animation: raysRotate 15s linear infinite;
  z-index: -1;
  pointer-events: none;
}

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

.prize-puzzle-box {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 12px;
}
.prize-card {
  width: 130px;
  height: 130px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

.mini-grid-9 {
  width: 90px;
  height: 90px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  background: rgba(0, 15, 30, 0.8);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(77, 166, 255, 0.4);
}

.grid-cell {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.65rem;
  color: #7abfff;
  font-weight: 800;
}

.grid-cell.unlocked {
  background: linear-gradient(135deg, #00f2fe, #4facfe);
  color: #001222;
  box-shadow: 0 0 6px #00f2fe;
}

.grid-cell.highlight {
  animation: cellBlink 0.6s infinite alternate;
}

@keyframes cellBlink {
  0% {
    transform: scale(0.9);
    filter: brightness(1);
  }
  100% {
    transform: scale(1.1);
    filter: brightness(1.8);
    box-shadow: 0 0 10px #ffd200;
  }
}

.rarity-pill {
  padding: 5px 20px;
  border-radius: 30px;
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
}

.prize-title {
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.prize-desc {
  font-size: 1rem;
  color: #cde8ff;
  font-weight: 700;
}

.gacha-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.token-badge-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.token-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 15, 35, 0.75);
  border: 1px solid rgba(0, 242, 254, 0.35);
  padding: 8px 22px;
  border-radius: 40px;
  box-shadow: inset 0 0 12px rgba(0, 242, 254, 0.2);
}
.token-label {
  font-size: 0.9rem;
  color: #a4cded;
  font-weight: 600;
}
.token-value {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--cyber-gold);
  text-shadow: 0 0 14px rgba(255, 210, 0, 0.85);
  margin-left: 2px;
}

.gacha-btn {
  width: 100%;
  max-width: 420px; /* 稍微加寬以容納英文長句 */
  padding: 16px 24px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: linear-gradient(135deg, #00f2fe 0%, #4facfe 50%, #0066cc 100%);
  color: #ffffff;
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 900;
  letter-spacing: 1px; /* 縮小字距，使英文維持在同一行 */
  white-space: nowrap; /* 鎖定單行置中 */
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 110, 255, 0.55);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.gacha-btn .btn-shine {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.65),
    transparent
  );
  transform: rotate(45deg) translateX(-100%);
  animation: btnSweep 3.5s infinite;
}

@keyframes btnSweep {
  0%,
  30% {
    transform: rotate(45deg) translateX(-100%);
  }
  50%,
  100% {
    transform: rotate(45deg) translateX(100%);
  }
}

.gacha-btn:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 16px 45px rgba(0, 242, 254, 0.85);
  border-color: #fff;
}

.gacha-btn:disabled {
  background: linear-gradient(135deg, #243345 0%, #151e28 100%);
  border-color: #3b4d61;
  color: #63778d;
  box-shadow: none;
  cursor: not-allowed;
}
.gacha-btn:disabled .btn-shine {
  display: none;
}

/* ==================================================
   📋 任務卡片區
   ================================================== */
.task-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.task-card {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}
.task-card:hover {
  transform: translateY(-6px);
  border-color: var(--neon-blue);
  box-shadow: 0 15px 35px rgba(0, 242, 254, 0.35);
  background: linear-gradient(
    180deg,
    rgba(0, 242, 254, 0.15) 0%,
    rgba(6, 32, 65, 0.6) 100%
  );
}
.task-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.task-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(0, 242, 254, 0.15);
  border: 1px solid rgba(0, 242, 254, 0.35);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.35rem;
}
.task-info h4 {
  font-size: 0.95rem;
  color: #fff;
  font-weight: 800;
  margin-bottom: 2px;
}
.task-info p {
  font-size: 0.75rem;
  color: #8bbce0;
}
.task-progress-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.progress-bar-bg {
  flex: 1;
  height: 7px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #00f2fe, #4facfe);
  border-radius: 10px;
  box-shadow: 0 0 8px #00f2fe;
}
.progress-num {
  font-size: 0.75rem;
  color: #cce9ff;
  font-weight: 700;
}
.claim-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #7b9bb9;
  font-weight: 800;
  padding: 10px;
  border-radius: 20px;
  cursor: not-allowed;
  font-size: 0.85rem;
  transition: all 0.25s ease;
}
.claim-btn.active {
  background: linear-gradient(135deg, #00f2fe 0%, #0066cc 100%);
  border-color: #fff;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 242, 254, 0.6);
}
.claim-btn.active:hover {
  transform: scale(1.04);
  filter: brightness(1.2);
  box-shadow: 0 6px 22px rgba(0, 242, 254, 0.9);
}

/* ==================================================
   🪟 100% 實心全螢幕遮罩 (徹底遮蔽主頁內容)
   ================================================== */
.glass-modal {
  display: none;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important; height: 100dvh !important;
  z-index: 99999 !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
}

/* 🌟 全域背景動態動畫圖層容器 */
.modal-bg-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* ==================================================
   📦 碎片工坊：全螢幕黃金熔煉動畫
   ================================================== */
#workshop-modal {
  background-color: #0b0601 !important;
  background-image:
    radial-gradient(
      circle at 50% 10%,
      rgba(255, 180, 0, 0.45) 0%,
      rgba(255, 100, 0, 0.25) 40%,
      transparent 75%
    ),
    linear-gradient(180deg, #1f1103 0%, #0d0701 50%, #030200 100%) !important;
}

/* 頂部熔爐強光光波 */
.forge-light-beam {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 350px;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 210, 0, 0.55) 0%,
    rgba(255, 120, 0, 0.2) 50%,
    transparent 75%
  );
  filter: blur(45px);
  animation: forgeBeamPulse 4s ease-in-out infinite alternate;
}

@keyframes forgeBeamPulse {
  0% {
    transform: translateX(-50%) scale(0.9);
    opacity: 0.7;
  }
  100% {
    transform: translateX(-50%) scale(1.15);
    opacity: 1;
  }
}

/* 金燦火花粒子向上升騰動畫 */
.forge-ember-particles .ember {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #ffd200 60%, #ff8800 100%);
  box-shadow:
    0 0 10px #ffd200,
    0 0 20px #ff7700;
  animation: emberFloatUp var(--dur, 5s) ease-in-out infinite;
  animation-delay: var(--del, 0s);
  opacity: 0;
}

.e1 {
  left: 8%;
  bottom: -20px;
  width: 6px;
  height: 6px;
  --dur: 5s;
  --del: 0s;
}
.e2 {
  left: 22%;
  bottom: -20px;
  width: 10px;
  height: 10px;
  --dur: 6.5s;
  --del: 1.5s;
}
.e3 {
  left: 38%;
  bottom: -20px;
  width: 5px;
  height: 5px;
  --dur: 4.5s;
  --del: 3s;
}
.e4 {
  left: 55%;
  bottom: -20px;
  width: 8px;
  height: 8px;
  --dur: 7s;
  --del: 0.8s;
}
.e5 {
  left: 70%;
  bottom: -20px;
  width: 6px;
  height: 6px;
  --dur: 5.5s;
  --del: 2.2s;
}
.e6 {
  left: 84%;
  bottom: -20px;
  width: 9px;
  height: 9px;
  --dur: 6s;
  --del: 0.3s;
}
.e7 {
  left: 92%;
  bottom: -20px;
  width: 4px;
  height: 4px;
  --dur: 4.8s;
  --del: 2.8s;
}
.e8 {
  left: 16%;
  bottom: -20px;
  width: 7px;
  height: 7px;
  --dur: 5.8s;
  --del: 3.5s;
}

@keyframes emberFloatUp {
  0% {
    transform: translateY(0) translateX(0) scale(0.6);
    opacity: 0;
  }
  20% {
    opacity: 0.9;
  }
  50% {
    transform: translateY(-50vh) translateX(15px) scale(1.1);
    opacity: 0.8;
  }
  80% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-110vh) translateX(-20px) scale(0.5);
    opacity: 0;
  }
}

/* 工坊內部卡片 */
#workshop-modal .workshop-content {
  max-width: 920px !important;
  width: 92vw !important;
  border-radius: 30px !important;
  padding: 35px 45px !important;
  position: relative !important;
  z-index: 10 !important;
  overflow-y: auto !important;
  background:
    radial-gradient(
      ellipse at 50% -20%,
      rgba(255, 210, 0, 0.5) 0%,
      rgba(255, 140, 0, 0.2) 40%,
      transparent 70%
    ),
    linear-gradient(180deg, #241403 0%, #140b02 55%, #080401 100%) !important;
  border: 2.5px solid rgba(255, 210, 0, 0.85) !important;
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.95),
    inset 0 0 50px rgba(255, 210, 0, 0.25),
    inset 0 2px 15px rgba(255, 255, 255, 0.8),
    0 0 45px rgba(255, 210, 0, 0.4) !important;
  animation: forgeBorderGlow 3s ease-in-out infinite alternate;
}

@keyframes forgeBorderGlow {
  0% {
    border-color: rgba(255, 210, 0, 0.7);
    box-shadow: 0 0 25px rgba(255, 210, 0, 0.3);
  }
  100% {
    border-color: rgba(255, 230, 100, 1);
    box-shadow: 0 0 45px rgba(255, 210, 0, 0.55);
  }
}

#workshop-modal .workshop-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(
    90deg,
    transparent,
    #ffd200,
    #ff9900,
    #ffd200,
    transparent
  );
  box-shadow: 0 0 15px #ffd200;
}

#workshop-modal .modal-title {
  background: linear-gradient(
    180deg,
    #ffffff 20%,
    #ffe066 60%,
    #ffd200 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 12px rgba(255, 210, 0, 0.9)) !important;
}

.inventory-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: linear-gradient(
    135deg,
    rgba(50, 30, 6, 0.95) 0%,
    rgba(24, 14, 3, 0.98) 100%
  ) !important;
  padding: 16px;
  border-radius: 20px;
  border: 1.5px solid rgba(255, 210, 0, 0.65) !important;
  box-shadow:
    inset 0 0 20px rgba(255, 210, 0, 0.2),
    0 8px 25px rgba(0, 0, 0, 0.6) !important;
  margin-bottom: 25px;
}
.inv-item {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
}
.inv-item b {
  color: var(--cyber-gold);
  font-size: 1.25rem;
  text-shadow: 0 0 10px rgba(255, 210, 0, 0.9);
}

.workshop-sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.workshop-box {
  background: linear-gradient(
    180deg,
    rgba(255, 210, 0, 0.08) 0%,
    rgba(255, 140, 0, 0.03) 100%
  ) !important;
  border: 1.5px solid rgba(255, 210, 0, 0.45) !important;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.5) !important;
  padding: 20px;
  border-radius: 20px;
}
.workshop-box h3 {
  margin-bottom: 15px;
  font-size: 1.15rem;
  color: #ffd200;
  text-shadow: 0 0 10px rgba(255, 210, 0, 0.7);
}
.chest-action-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.chest-card {
  background: rgba(36, 22, 5, 0.9);
  border: 1.5px solid rgba(255, 210, 0, 0.55);
  border-radius: 16px;
  padding: 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}
.chest-card.premium {
  border-color: rgba(255, 210, 0, 0.95);
  box-shadow: 0 0 24px rgba(255, 210, 0, 0.35);
}
.chest-icon {
  font-size: 2.5rem;
}
.gacha-mini-btn {
  background: linear-gradient(135deg, #00f2fe, #0066cc);
  border: 1px solid #fff;
  color: #fff;
  padding: 8px 24px;
  border-radius: 20px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 6px;
  transition: 0.25s;
}
.gacha-mini-btn.gold {
  background: linear-gradient(135deg, #ffd200, #ff7700);
  color: #001222;
}
.gacha-mini-btn:hover {
  transform: scale(1.06);
  filter: brightness(1.2);
}
.exchange-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.exchange-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(30, 18, 4, 0.85);
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 210, 0, 0.35);
  font-size: 0.9rem;
}
.exchange-btn {
  background: rgba(255, 210, 0, 0.3);
  border: 1.5px solid var(--cyber-gold);
  color: #fff;
  padding: 6px 14px;
  border-radius: 15px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.2s;
}
.exchange-btn:hover {
  background: var(--cyber-gold);
  color: #001222;
}

/* ==================================================
   🖼️ 我的收藏：全螢幕亞特蘭提斯水下光波動畫
   ================================================== */
#gallery-modal {
  background-color: #000a17 !important;
  background-image:
    radial-gradient(
      circle at 50% 10%,
      rgba(0, 242, 254, 0.5) 0%,
      rgba(0, 102, 255, 0.25) 45%,
      transparent 75%
    ),
    linear-gradient(180deg, #0b386b 0%, #041d3d 50%, #010c1c 100%) !important;
}

/* 穿透水面的青藍光束 (God Rays) */
.gallery-god-rays {
  position: absolute;
  top: -30%;
  left: -20%;
  width: 140%;
  height: 140%;
  background: radial-gradient(
    ellipse at top center,
    rgba(0, 242, 254, 0.35) 0%,
    rgba(79, 172, 254, 0.12) 45%,
    transparent 70%
  );
  transform: rotate(-6deg);
  filter: blur(35px);
  animation: godRaysDrift 9s ease-in-out infinite alternate;
}

@keyframes godRaysDrift {
  0% {
    transform: rotate(-6deg) scale(0.95);
    opacity: 0.65;
  }
  100% {
    transform: rotate(4deg) scale(1.1);
    opacity: 0.95;
  }
}

/* 水面焦散粼粼光影 (Caustics) */
.gallery-water-waves {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(0, 242, 254, 0.08) 0%,
    transparent 35%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 65%
  );
  background-size: 200% 200%;
  animation: causticsPan 12s ease-in-out infinite alternate;
}

@keyframes causticsPan {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

/* 水下晶瑩藍泡泡升騰動畫 */
.gallery-bubble-particles .aqua-bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 30%,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(0, 242, 254, 0.4) 50%,
    transparent 90%
  );
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.5);
  animation: aquaBubbleRise var(--dur, 6s) linear infinite;
  animation-delay: var(--del, 0s);
  opacity: 0;
}

.ab1 {
  left: 10%;
  bottom: -30px;
  width: 14px;
  height: 14px;
  --dur: 7s;
  --del: 0s;
}
.ab2 {
  left: 25%;
  bottom: -30px;
  width: 22px;
  height: 22px;
  --dur: 8.5s;
  --del: 2s;
}
.ab3 {
  left: 42%;
  bottom: -30px;
  width: 10px;
  height: 10px;
  --dur: 6s;
  --del: 1s;
}
.ab4 {
  left: 60%;
  bottom: -30px;
  width: 18px;
  height: 18px;
  --dur: 7.5s;
  --del: 3.5s;
}
.ab5 {
  left: 74%;
  bottom: -30px;
  width: 12px;
  height: 12px;
  --dur: 5.5s;
  --del: 0.5s;
}
.ab6 {
  left: 88%;
  bottom: -30px;
  width: 26px;
  height: 26px;
  --dur: 9s;
  --del: 1.8s;
}
.ab7 {
  left: 5%;
  bottom: -30px;
  width: 16px;
  height: 16px;
  --dur: 6.8s;
  --del: 4s;
}
.ab8 {
  left: 95%;
  bottom: -30px;
  width: 14px;
  height: 14px;
  --dur: 7.2s;
  --del: 2.5s;
}

@keyframes aquaBubbleRise {
  0% {
    transform: translateY(0) scale(0.7);
    opacity: 0;
  }
  15% {
    opacity: 0.85;
  }
  85% {
    opacity: 0.85;
  }
  100% {
    transform: translateY(-115vh) scale(1.15);
    opacity: 0;
  }
}

/* 收藏內部卡片 */
#gallery-modal .glass-modal-content {
  width: 92vw !important;
  max-width: 1200px !important;
  height: 90vh !important; height: 90dvh !important;
  max-height: 880px !important;
  border-radius: 30px !important;
  padding: 40px 50px !important;
  position: relative !important;
  z-index: 10 !important;
  overflow-y: auto !important;
  background:
    radial-gradient(
      ellipse at 50% -15%,
      rgba(0, 242, 254, 0.55) 0%,
      rgba(79, 172, 254, 0.3) 45%,
      transparent 75%
    ),
    linear-gradient(180deg, #0e3b6d 0%, #062042 50%, #020f21 100%) !important;
  border: 2.5px solid rgba(0, 242, 254, 0.85) !important;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.95),
    inset 0 0 60px rgba(0, 242, 254, 0.25),
    inset 0 2px 20px rgba(255, 255, 255, 0.9),
    0 0 50px rgba(0, 242, 254, 0.5) !important;
  animation: galleryBorderGlow 3s ease-in-out infinite alternate;
}

@keyframes galleryBorderGlow {
  0% {
    border-color: rgba(0, 242, 254, 0.7);
    box-shadow: 0 0 30px rgba(0, 242, 254, 0.35);
  }
  100% {
    border-color: rgba(200, 250, 255, 1);
    box-shadow: 0 0 55px rgba(0, 242, 254, 0.65);
  }
}

#gallery-modal .glass-modal-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(
    90deg,
    transparent,
    #00f2fe,
    #ffffff,
    #00f2fe,
    transparent
  );
  box-shadow: 0 0 16px #00f2fe;
}

#gallery-modal .modal-title {
  background: linear-gradient(
    180deg,
    #ffffff 30%,
    #a4e5ff 70%,
    #00f2fe 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 14px rgba(0, 242, 254, 0.85)) !important;
}

.close-gallery {
  position: absolute;
  top: 20px;
  right: 28px;
  font-size: 2.4rem;
  color: #7abfff;
  cursor: pointer;
  transition: 0.25s;
  line-height: 1;
}
.close-gallery:hover {
  color: #ff5252;
  transform: rotate(90deg) scale(1.15);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 55px 35px;
  padding: 20px 0 40px 0;
}

.gallery-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  transition: transform 0.35s ease;
  z-index: 1;
}
.gallery-item:hover {
  transform: translateY(-8px);
}

#gallery-modal .gallery-item::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 5%;
  width: 90%;
  height: 14px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 242, 254, 0.6) 0%,
    rgba(0, 102, 204, 0.2) 60%,
    transparent 85%
  );
  border-radius: 50%;
  filter: blur(5px);
  z-index: -1;
}

.img-frame {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7);
  background: #020d1c;
  display: flex;
  margin-bottom: 16px;
}
.gallery-item:hover .img-frame {
  box-shadow: 0 20px 40px rgba(0, 242, 254, 0.6);
  border-color: var(--neon-blue);
}

.puzzle-board-frame {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
}

/* 0/9 未解鎖暗化圖 */
.locked-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) blur(25px) brightness(0.08) contrast(150%);
  transform: scale(1.2);
  opacity: 0.5;
}

.gallery-item.locked .img-frame {
  background: radial-gradient(circle at 50% 50%, #031326 0%, #010814 100%);
  border-color: rgba(79, 172, 254, 0.25);
  box-shadow:
    inset 0 0 35px rgba(0, 0, 0, 0.95),
    0 8px 20px rgba(0, 0, 0, 0.8);
}

.lock-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.8rem;
  filter: drop-shadow(0 0 15px rgba(0, 242, 254, 0.7));
  z-index: 5;
  pointer-events: none;
  animation: lockGlowPulse 3s infinite ease-in-out;
}

@keyframes lockGlowPulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.08);
    filter: drop-shadow(0 0 22px rgba(0, 242, 254, 0.95));
  }
}

/* 9/9 完成全圖與流光 */
.completed-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.4) 0%,
    transparent 40%,
    rgba(0, 242, 254, 0.3) 100%
  );
  pointer-events: none;
}

/* 1~8 進行中九宮格 */
.in-progress-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  background: rgba(0, 0, 0, 0.9);
  padding: 2px;
  width: 100%;
  height: 100%;
}

.puzzle-piece-cell.unlocked {
  position: relative;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 6px rgba(0, 242, 254, 0.4);
}

.piece-num-tag {
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 0.55rem;
  font-weight: 900;
  color: #fff;
  background: rgba(0, 0, 0, 0.65);
  padding: 1px 4px;
  border-radius: 3px;
}

.puzzle-piece-cell.locked-slot {
  width: 100%;
  height: 100%;
  background: rgba(6, 25, 48, 0.85);
  border: 1px dashed rgba(77, 166, 255, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 800;
  color: rgba(122, 191, 255, 0.4);
}

.gallery-name {
  margin: 0 0 5px 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  background: rgba(0, 25, 55, 0.85);
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid rgba(0, 242, 254, 0.4);
}

.gallery-item .date {
  font-size: 0.75rem;
  color: #8cb4ff;
  background: rgba(0, 15, 35, 0.75);
  padding: 2px 10px;
  border-radius: 12px;
}

/* ==================================================
   📑 精緻分頁元件 (拼圖收藏展示櫃)
   ================================================== */
.pagination-container {
  position: relative;
  z-index: 10;
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding-top: 20px;
  margin-top: 15px;
  border-top: 1px dashed rgba(0, 242, 254, 0.3);
  font-size: 1rem;
  flex-wrap: wrap;
}

.pagination-container .page-btn,
.pagination-container .page-num {
  width: 36px;
  height: 36px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: rgba(0, 30, 60, 0.85);
  border: 1.5px solid rgba(0, 242, 254, 0.4);
  color: #8cb4ff;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.25s;
  user-select: none;
  padding: 0;
  box-sizing: border-box;
}

.pagination-container .page-btn:hover:not(:disabled),
.pagination-container .page-num:hover:not(.active) {
  background: rgba(0, 242, 254, 0.3);
  color: #fff;
  border-color: #00f2fe;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.5);
  transform: translateY(-2px);
}

.pagination-container .page-btn.active,
.pagination-container .page-num.active {
  background: linear-gradient(135deg, #00f2fe, #0066cc);
  color: #fff;
  border: 1.5px solid #ffffff;
  box-shadow: 0 0 16px rgba(0, 242, 254, 0.85);
  transform: scale(1.1);
  cursor: default;
}

.pagination-container .page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.pagination-container .gallery-jump-btn {
  background: rgba(0, 45, 90, 0.85);
  border: 1.5px solid rgba(0, 242, 254, 0.55);
  font-size: 1.05rem;
}

.pagination-container .gallery-jump-btn:hover {
  background: rgba(0, 242, 254, 0.35);
  border-color: #00f2fe;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.6);
}

.gallery-jump-input {
  width: 44px;
  height: 36px;
  text-align: center;
  border: 2px solid #00f2fe;
  border-radius: 18px;
  font-weight: 800;
  color: #00f2fe;
  background: rgba(0, 20, 45, 0.95);
  outline: none;
  font-size: 0.95rem;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.6);
  box-sizing: border-box;
}

.gallery-jump-input::-webkit-inner-spin-button,
.gallery-jump-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 📱 響應式排版 (RWD) */
@media screen and (max-width: 900px) {
  .task-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 20px;
  }
  .chest-action-row {
    grid-template-columns: 1fr;
  }
  .exchange-grid {
    grid-template-columns: 1fr;
  }
  .inventory-bar {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 550px) {
  .task-grid {
    grid-template-columns: 1fr;
  }
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  .nav-right-group {
    right: 12px;
    gap: 6px;
  }
  .nav-btn {
    padding: 8px 14px;
    font-size: 0.82rem;
  }
  .glass-modal-content {
    padding: 25px 15px;
    width: 95vw;
  }
  .panel-title {
    font-size: 1.5rem;
  }
  .pagination-container {
    gap: 10px;
    font-size: 0.85rem;
  }
  .page-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
  .page-num-input {
    width: 38px;
    font-size: 0.85rem;
  }
}
/* ==================================================
   📱 秘密海域・拼圖系統 手機版 (<= 550px) 完美 RWD 修復
   ================================================== */
@media screen and (max-width: 550px) {
  /* 1. 頂部導覽列：轉為彈性排版，不再固定左右重疊 */
  .nav-btn.back-btn {
    position: fixed !important;
    top: 12px !important;
    left: 10px !important;
    padding: 6px 10px !important;
    font-size: 0.75rem !important;
    gap: 4px !important;
  }

  .nav-right-group {
    position: fixed !important;
    top: 12px !important;
    right: 10px !important;
    gap: 4px !important;
  }

  .nav-right-group .nav-btn {
    padding: 6px 8px !important;
    font-size: 0.75rem !important;
    gap: 3px !important;
  }

  /* 極窄螢幕 (<= 360px) 隱藏文字保留圖示，防爆版 */
  @media screen and (max-width: 360px) {
    .nav-btn.back-btn span.btn-icon ~ text,
    .nav-btn.back-btn {
      font-size: 0.72rem !important;
      padding: 5px 8px !important;
    }
    .workshop-btn span.btn-icon ~ text,
    .gallery-btn span.btn-icon ~ text {
      display: inline-block;
    }
    .nav-right-group .nav-btn {
      padding: 5px 6px !important;
      font-size: 0.72rem !important;
    }
  }

  /* 2. 主容器向上靠攏 */
  .main-container {
    width: 95% !important;
    padding-top: 60px !important;
    padding-bottom: 50px !important;
    gap: 18px !important;
  }

  .glass-panel {
    padding: 20px 14px !important;
    border-radius: 24px !important;
  }

  .panel-header {
    margin-bottom: 15px !important;
    gap: 6px !important;
  }

  .panel-title {
    font-size: 1.2rem !important;
  }

  /* 3. 水晶球與法陣自適應縮小，適配 320px */
  .gacha-stage {
    height: 240px !important;
  }

  .magic-runes-outer {
    width: 230px !important;
    height: 230px !important;
  }

  .magic-runes-inner {
    width: 190px !important;
    height: 190px !important;
  }

  .crystal-ball {
    width: 150px !important;
    height: 150px !important;
  }

  .crystal-core {
    width: 50px !important;
    height: 50px !important;
  }

  .idle-text {
    font-size: 0.85rem !important;
  }

  .idle-sub {
    font-size: 0.55rem !important;
  }

  /* 4. 喚醒石與碎片進度膠囊：在極窄螢幕下自適應縮小 */
  .token-badge-group {
    gap: 8px !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .token-badge {
    padding: 6px 12px !important;
    gap: 4px !important;
  }

  .token-label {
    font-size: 0.75rem !important;
  }

  .token-value {
    font-size: 1.2rem !important;
  }

  /* 5. 抽取按鈕滿版 */
  .gacha-btn {
    width: 100% !important;
    padding: 13px 18px !important;
    font-size: 0.95rem !important;
  }

  /* 6. 任務卡片單直列排版 */
  .task-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* 7. 彈窗容器自適應 */
  #workshop-modal .workshop-content,
  #gallery-modal .glass-modal-content {
    width: 95vw !important;
    padding: 24px 14px !important;
    border-radius: 20px !important;
    max-height: 88vh !important; max-height: 88dvh !important;
  }

  .inventory-bar {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  .inv-item {
    font-size: 0.8rem !important;
  }

  .gallery-grid {
    grid-template-columns: 1fr !important;
    gap: 25px !important;
  }
}
/* ==================================================
   📱 拼圖收藏分頁按鈕：手機端強制同一排無溢出修復
   ================================================== */
@media screen and (max-width: 550px) {
  .pagination-container {
    flex-wrap: nowrap !important; /* 🌟 核心：強制單行不折行 */
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important; /* 縮小按鈕彼此間距 */
    width: 100% !important;
    padding: 15px 0 5px 0 !important;
    overflow-x: auto !important; /* 極端情況支援微幅橫向滑動保護 */
  }

  /* 圓形分頁與箭頭按鈕自適應縮小 */
  .pagination-container .page-btn,
  .pagination-container .page-num {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 0.75rem !important;
    border-width: 1px !important;
    flex-shrink: 0 !important;
  }

  .pagination-container .page-btn.active,
  .pagination-container .page-num.active {
    transform: scale(1.06) !important;
  }

  /* 跳頁按鈕與輸入框縮小 */
  .pagination-container .gallery-jump-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 0.8rem !important;
    flex-shrink: 0 !important;
  }

  .gallery-jump-input {
    width: 32px !important;
    height: 28px !important;
    font-size: 0.75rem !important;
    border-radius: 14px !important;
    flex-shrink: 0 !important;
  }
}
/* ==================================================
   🌟 收藏櫃分頁標籤、篩選列與歷史紀錄樣式 (修復跑版 RWD 版)
   ================================================== */
.modal-tab-header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 18px; /* 🌟 預留頂部空間，避開右上角關閉叉叉 */
  margin-bottom: 18px;
  border-bottom: 1.5px solid rgba(0, 242, 254, 0.25);
  padding-bottom: 14px;
}

.tabs-group {
  display: inline-flex;
  background: rgba(2, 15, 33, 0.85);
  padding: 4px;
  border-radius: 30px;
  border: 1.5px solid rgba(0, 242, 254, 0.35);
  gap: 6px;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);
}

.tab-pill {
  background: transparent;
  border: none;
  color: #8cb4ff;
  font-size: 0.9rem;
  font-weight: 800;
  padding: 8px 18px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap !important; /* 🌟 強制禁止文字被折成兩行 */
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tab-pill.active {
  background: linear-gradient(135deg, #00f2fe, #0066cc);
  color: #fff;
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.6);
}

/* 篩選工具列：彈性並排 */
.clean-filter-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  width: 100%;
}

.clean-filter-bar input {
  flex: 1;
  max-width: 240px;
  min-width: 120px;
  background: rgba(3, 20, 45, 0.85);
  border: 1.5px solid rgba(0, 242, 254, 0.4);
  color: #fff;
  padding: 8px 14px;
  border-radius: 25px;
  font-size: 0.85rem;
  outline: none;
  box-shadow: inset 0 0 10px rgba(0, 242, 254, 0.15);
}

.clean-filter-bar select {
  background: rgba(3, 20, 45, 0.85);
  border: 1.5px solid rgba(0, 242, 254, 0.4);
  color: #00f2fe;
  padding: 8px 12px;
  border-radius: 25px;
  font-size: 0.82rem;
  font-weight: 700;
  outline: none;
  cursor: pointer;
  box-shadow: inset 0 0 10px rgba(0, 242, 254, 0.15);
}

.clean-filter-bar select option {
  background: #04162e;
  color: #fff;
}

/* 歷史紀錄清單樣式 */
.history-list-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 480px;
  overflow-y: auto;
  padding: 10px 5px;
}

.history-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(3, 20, 45, 0.7);
  border: 1px solid rgba(0, 242, 254, 0.25);
  border-left: 4px solid var(--neon-blue);
  padding: 12px 18px;
  border-radius: 12px;
}

.history-card .title-text {
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
}

.history-card .time-text {
  font-size: 0.75rem;
  color: #7ba2c7;
  margin-top: 3px;
}

.history-card .rarity-tag {
  font-size: 0.8rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 15px;
  background: rgba(0, 242, 254, 0.15);
  color: #00f2fe;
  border: 1px solid rgba(0, 242, 254, 0.4);
  white-space: nowrap;
}

.history-footer {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.btn-clear-history {
  background: rgba(255, 82, 82, 0.1);
  border: 1.5px solid #ff5252;
  color: #ff5252;
  padding: 7px 18px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  transition: 0.2s;
}

.btn-clear-history:hover {
  background: #ff5252;
  color: #fff;
  box-shadow: 0 0 12px rgba(255, 82, 82, 0.6);
}

/* 抽卡紀錄「載入更多」按鈕 (海洋藍，跟清空用的紅色區分) */
.btn-load-more-history {
  background: rgba(0, 242, 254, 0.1);
  border: 1.5px solid #00f2fe;
  color: #00f2fe;
  padding: 7px 18px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  transition: 0.2s;
}

.btn-load-more-history:hover {
  background: #00f2fe;
  color: #021226;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.6);
}

/* 📱 手機窄螢幕 (<= 550px) 專屬防護 */
@media screen and (max-width: 550px) {
  .close-gallery {
    top: 10px !important;
    right: 14px !important;
    font-size: 1.9rem !important;
    z-index: 100 !important;
  }

  .modal-tab-header {
    margin-top: 28px !important; /* 確保徹底閃過右上角的叉叉 */
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
  }

  .tabs-group {
    padding: 3px !important;
    gap: 4px !important;
  }

  .tab-pill {
    padding: 6px 12px !important;
    font-size: 0.82rem !important;
  }

  .clean-filter-bar {
    gap: 6px !important;
    margin-bottom: 15px !important;
  }

  .clean-filter-bar input {
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
  }

  .clean-filter-bar select {
    padding: 6px 8px !important;
    font-size: 0.78rem !important;
  }
}
/* 🌟 無此碎片提示框樣式 */
.no-piece-box {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 35px 20px;
  background: rgba(3, 20, 45, 0.6);
  border: 1.5px dashed rgba(0, 242, 254, 0.4);
  border-radius: 20px;
  margin: 30px auto;
  width: 90%;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 0 25px rgba(0, 242, 254, 0.15);
}

.no-piece-icon {
  font-size: 2.8rem;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 10px rgba(0, 242, 254, 0.7));
}

.no-piece-text {
  font-size: 1.15rem;
  font-weight: 800;
  color: #00f2fe;
  margin-bottom: 6px;
  text-shadow: 0 0 12px rgba(0, 242, 254, 0.6);
}

.no-piece-sub {
  font-size: 0.8rem;
  color: #8cb4ff;
  line-height: 1.4;
}