/* 冬至阳生 · 南北围炉 - 温馨古风高保真样式表 v3.0 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600;700;900&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

:root {
  --bg-deep: #180E0A;
  --bg-sheet: #24150F;
  --gold-light: #FFF3D6;
  --gold-main: #EBBF75;
  --tangyuan-main: #DC4B3A;
  --jiaozi-main: #3B82F6;
}

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

html, body {
  margin: 0;
  padding: 0;
  width: 393px;
  height: 852px;
  overflow: hidden;
  background: #140B08;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Noto Sans SC', sans-serif;
  color: #FFF9F0;
  -webkit-font-smoothing: antialiased;
}

.font-serif-cn {
  font-family: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
}

.font-num {
  font-variant-numeric: tabular-nums;
  font-family: 'SF Pro Display', -apple-system, 'DIN Alternate', sans-serif;
}

.iphone-screen {
  position: relative;
  width: 393px;
  height: 852px;
  overflow: hidden;
  background: #140B08;
  display: flex;
  flex-direction: column;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 温馨古风宣纸暖炉半屏容器（融入古典暗纹、暖阁烛光与瑞雪光晕） */
.sheet-container {
  background:
    radial-gradient(120% 50% at 50% 0%, rgba(245, 168, 85, 0.34) 0%, rgba(42, 23, 16, 0) 68%),
    radial-gradient(80% 45% at 12% 15%, rgba(224, 78, 56, 0.22) 0%, transparent 62%),
    radial-gradient(80% 45% at 88% 15%, rgba(56, 142, 246, 0.18) 0%, transparent 62%),
    repeating-linear-gradient(45deg, rgba(255, 228, 181, 0.018) 0px, rgba(255, 228, 181, 0.018) 2px, transparent 2px, transparent 8px),
    linear-gradient(180deg, #351F16 0%, #24150F 38%, #180E0A 100%);
  border-top: 1.5px solid rgba(253, 230, 182, 0.55);
  box-shadow: 0 -16px 50px rgba(0, 0, 0, 0.85), inset 0 1px 12px rgba(253, 224, 165, 0.18);
}

/* 古风回纹角花卡片装饰 */
.ancient-frame {
  position: relative;
}
.ancient-frame::before,
.ancient-frame::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: rgba(251, 211, 133, 0.55);
  pointer-events: none;
}
.ancient-frame::before {
  top: 5px;
  left: 5px;
  border-top: 1.5px solid;
  border-left: 1.5px solid;
}
.ancient-frame::after {
  bottom: 5px;
  right: 5px;
  border-bottom: 1.5px solid;
  border-right: 1.5px solid;
}

/* 阵营角色卡（掌灯人 / 煮雪客）温馨古风画卷质感 */
.camp-card-ty {
  background:
    radial-gradient(circle at 50% 25%, rgba(251, 146, 60, 0.22) 0%, transparent 65%),
    linear-gradient(180deg, rgba(168, 42, 28, 0.42) 0%, rgba(52, 21, 16, 0.94) 68%, rgba(34, 14, 11, 0.98) 100%);
  border: 1px solid rgba(251, 191, 119, 0.38);
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.camp-card-ty.active {
  border: 1.5px solid #FDE098;
  box-shadow: 0 8px 26px rgba(220, 75, 58, 0.45), inset 0 0 22px rgba(251, 164, 82, 0.22);
  transform: translateY(-2px);
}

.camp-card-jz {
  background:
    radial-gradient(circle at 50% 25%, rgba(125, 211, 252, 0.18) 0%, transparent 65%),
    linear-gradient(180deg, rgba(30, 88, 178, 0.38) 0%, rgba(18, 32, 54, 0.94) 68%, rgba(13, 22, 38, 0.98) 100%);
  border: 1px solid rgba(165, 216, 255, 0.34);
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.camp-card-jz.active {
  border: 1.5px solid #BAE6FD;
  box-shadow: 0 8px 26px rgba(59, 130, 246, 0.42), inset 0 0 22px rgba(125, 211, 252, 0.2);
  transform: translateY(-2px);
}

/* 鎏金书法字 */
.text-gold-gradient {
  background: linear-gradient(180deg, #FFFDF9 0%, #FDE7B2 48%, #DF9F42 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-ty-gradient {
  background: linear-gradient(180deg, #FFF7F0 0%, #FDC194 50%, #F05642 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-jz-gradient {
  background: linear-gradient(180deg, #F5FBFF 0%, #A5D8FF 50%, #4A90F7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 古风朱砂鎏金按钮 */
.btn-imperial-red {
  background: linear-gradient(180deg, #F26644 0%, #CC2E1C 55%, #9B1B0D 100%);
  border: 1px solid #FCE0A6;
  box-shadow: 0 4px 18px rgba(212, 52, 32, 0.48), inset 0 1px 1px rgba(255, 242, 210, 0.65);
}
.btn-imperial-red:active {
  transform: scale(0.98);
}

.btn-imperial-blue {
  background: linear-gradient(180deg, #549BF8 0%, #235FD1 55%, #164096 100%);
  border: 1px solid #C5EBFE;
  box-shadow: 0 4px 18px rgba(37, 99, 235, 0.45), inset 0 1px 1px rgba(228, 245, 255, 0.65);
}
.btn-imperial-blue:active {
  transform: scale(0.98);
}

/* PK 血条 */
.pk-bar-track {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(253, 230, 182, 0.42);
  overflow: hidden;
  position: relative;
}
.pk-bar-ty {
  background: linear-gradient(90deg, #B91C1C 0%, #EF4444 58%, #FDBA74 100%);
}
.pk-bar-jz {
  background: linear-gradient(90deg, #67E8F9 0%, #3B82F6 42%, #1D4ED8 100%);
}

/* 动画：飘雪、灯笼摇曳、火焰呼吸 */
@keyframes snowFall {
  0% { transform: translateY(-10px) translateX(0px); opacity: 0; }
  25% { opacity: 0.85; }
  80% { opacity: 0.75; }
  100% { transform: translateY(140px) translateX(8px); opacity: 0; }
}
.snow-dot {
  animation: snowFall 4.2s linear infinite;
}

@keyframes lanternSway {
  0%, 100% { transform: rotate(-2.5deg); transform-origin: top center; }
  50% { transform: rotate(2.5deg); transform-origin: top center; }
}
.animate-lantern {
  animation: lanternSway 3.6s ease-in-out infinite;
}

@keyframes pulseFlame {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(251, 146, 60, 0.65)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 14px rgba(239, 68, 68, 0.95)); transform: scale(1.02); }
}
.animate-climax {
  animation: pulseFlame 2s ease-in-out infinite;
}

@keyframes boostPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(250, 204, 21, 0.5); }
  50% { transform: scale(1.06); box-shadow: 0 0 22px rgba(250, 204, 21, 0.95); }
}
.animate-boost {
  animation: boostPulse 1.5s ease-in-out infinite;
}

/* 温馨古风内嵌卡片 */
.ornate-card {
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(235, 165, 90, 0.1) 0%, transparent 70%),
    linear-gradient(180deg, rgba(52, 32, 24, 0.86) 0%, rgba(30, 18, 14, 0.94) 100%);
  border: 1px solid rgba(238, 194, 120, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 242, 214, 0.12);
}