/* ============================================
   晴日音坊 · 视频转 MP3
   移动端优先 · 暖色系 · 晴日金工坊
   ============================================ */

:root {
  /* 暖色系主调 */
  --cream:       #FFF4DC;
  --cream-2:     #FFE7C2;
  --honey:       #FFB23B;
  --honey-2:     #FF8A2B;
  --orange:      #FF6B2C;
  --pink:        #FF6B8A;
  --pink-2:      #FF4D77;
  --mint:        #7BD8A8;
  --sky:         #8FD3F4;
  --ink:         #3A2418;
  --ink-soft:    #6B4A33;
  --ink-faint:   #A48A6F;

  /* 阴影 */
  --shadow-soft: 0 8px 24px rgba(255, 138, 43, .18);
  --shadow-card: 0 18px 40px -10px rgba(176, 78, 24, .22),
                 0 2px 6px rgba(176, 78, 24, .08);
  --shadow-cta:  0 10px 22px -6px rgba(255, 107, 44, .55);

  /* 圆角 */
  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 32px;
  --r-xl: 44px;
}

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

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Onest', system-ui, -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body {
  position: relative;
  background:
    radial-gradient(120% 80% at 50% -10%, #FFE0A6 0%, transparent 60%),
    radial-gradient(80% 60% at 100% 30%, #FFD2C2 0%, transparent 55%),
    radial-gradient(80% 60% at 0% 80%, #C5EBE0 0%, transparent 55%),
    var(--cream);
}

/* ============================================
   背景：日晕 + 光斑 + 颗粒
   ============================================ */
.sky {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.sun {
  position: absolute;
  top: -120px; right: -120px;
  width: 360px; height: 360px;
  background: radial-gradient(circle at 35% 35%, #FFE9A8 0%, #FFB23B 45%, #FF8A2B 75%, transparent 78%);
  border-radius: 50%;
  filter: blur(0.5px);
  animation: sunSpin 60s linear infinite;
}
@keyframes sunSpin {
  to { transform: rotate(360deg); }
}
.halo {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .55;
  mix-blend-mode: screen;
}
.halo-1 { top: 8%; left: -8%; width: 220px; height: 220px; background: #FFB7D5; }
.halo-2 { bottom: 18%; right: -6%; width: 260px; height: 260px; background: #8FD3F4; opacity: .45; }
.halo-3 { top: 55%; left: 40%; width: 180px; height: 180px; background: #FFD27A; opacity: .35; }

.dust {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.6) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 60%, rgba(255,255,255,.5) 0 1px, transparent 2px),
    radial-gradient(circle at 60% 20%, rgba(255,200,140,.5) 0 1.5px, transparent 3px),
    radial-gradient(circle at 30% 80%, rgba(255,180,200,.45) 0 1.5px, transparent 3px),
    radial-gradient(circle at 90% 90%, rgba(180,230,210,.45) 0 1.5px, transparent 3px);
  background-size: 220px 220px, 280px 280px, 320px 320px, 360px 360px, 240px 240px;
  opacity: .7;
  animation: dustFloat 18s ease-in-out infinite alternate;
}
@keyframes dustFloat {
  to { transform: translate(10px, -12px); }
}

/* ============================================
   移动端容器
   ============================================ */
.phone {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  padding: 28px 18px 16px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;       /* 整体垂直居中 */
  gap: 20px;
}

.safe-bottom {
  height: env(safe-area-inset-bottom, 0px);
}

/* ============================================
   顶部品牌
   ============================================ */
.masthead {
  padding: 8px 6px 4px;
  animation: rise .8s cubic-bezier(.2,.7,.2,1) both;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  border: 1px solid rgba(255, 178, 59, .35);
  box-shadow: 0 4px 12px rgba(255, 138, 43, .12);
}
.brand-mark {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFD27A, #FF6B2C);
  color: #fff;
  font-size: 16px;
  box-shadow: 0 0 14px rgba(255,138,43,.55), inset 0 -3px 0 rgba(0,0,0,.08);
}
.brand-name {
  font-family: 'Caprasimo', 'Onest', serif;
  font-size: 18px;
  letter-spacing: .5px;
  color: var(--ink);
}
.tagline {
  margin: 14px 6px 0;
  font-family: 'Caprasimo', 'Onest', serif;
  font-size: clamp(28px, 9vw, 38px);
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: .5px;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
  font-weight: 400;
}
.tagline em {
  font-style: normal;
  position: relative;
  display: inline-block;
  color: #fff;
  background: linear-gradient(135deg, #FF8A2B 0%, #FF4D77 100%);
  padding: 0 12px;
  border-radius: 14px;
  box-shadow:
    0 4px 12px rgba(255, 107, 44, .35),
    inset 0 -3px 0 rgba(0, 0, 0, .1),
    inset 0 1px 0 rgba(255, 255, 255, .35);
  transform: rotate(-3deg);
}
.tagline em::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.4) 50%, transparent 60%);
  pointer-events: none;
}
.tagline br { display: block; content: ''; margin-bottom: 2px; }

/* 副标题横线 */
.meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 6px 0;
}
.meta-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(176, 78, 24, .35), transparent);
}
.meta-text {
  font-family: 'JetBrains Mono', 'Onest', monospace;
  font-size: 10.5px;
  letter-spacing: 2.2px;
  color: var(--ink-soft);
  text-transform: uppercase;
  white-space: nowrap;
}

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

/* ============================================
   主卡片
   ============================================ */
.card {
  position: relative;
  background: linear-gradient(180deg, #FFFDF7 0%, #FFF6E5 100%);
  border-radius: var(--r-lg);
  padding: 28px 22px 24px;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(255, 178, 59, .25);
  overflow: hidden;
  isolation: isolate;
  animation: rise .8s cubic-bezier(.2,.7,.2,1) .1s both;
}
.card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(255, 200, 100, .35), transparent 70%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.card::after {
  content: '';
  position: absolute;
  bottom: -30px; left: -20px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(255, 107, 138, .18), transparent 70%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
/* 卡纸右上角的阳光放射纹理：极淡，提升卡片的"晒过太阳"质感 */
.card-pattern {
  position: absolute;
  top: -70px; right: -70px;
  width: 240px; height: 240px;
  background:
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg, rgba(255, 178, 59, .16) 8deg, transparent 16deg,
      transparent 28deg, rgba(255, 178, 59, .14) 36deg, transparent 44deg,
      transparent 56deg, rgba(255, 178, 59, .16) 64deg, transparent 72deg,
      transparent 84deg, rgba(255, 178, 59, .14) 92deg, transparent 100deg,
      transparent 112deg, rgba(255, 178, 59, .16) 120deg, transparent 128deg,
      transparent 140deg, rgba(255, 178, 59, .14) 148deg, transparent 156deg,
      transparent 168deg, rgba(255, 178, 59, .16) 176deg, transparent 184deg,
      transparent 196deg, rgba(255, 178, 59, .14) 204deg, transparent 212deg,
      transparent 224deg, rgba(255, 178, 59, .16) 232deg, transparent 240deg,
      transparent 252deg, rgba(255, 178, 59, .14) 260deg, transparent 268deg,
      transparent 280deg, rgba(255, 178, 59, .16) 288deg, transparent 296deg,
      transparent 308deg, rgba(255, 178, 59, .14) 316deg, transparent 324deg,
      transparent 336deg, rgba(255, 178, 59, .16) 344deg, transparent 352deg);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  animation: sunSpin 60s linear infinite;
}

.dropzone { transition: transform .2s ease, box-shadow .2s ease; }
.dropzone.is-drag {
  transform: translateY(-2px);
  box-shadow: 0 22px 50px -10px rgba(255, 107, 44, .35),
              0 2px 6px rgba(255, 107, 44, .12);
}

.state {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.state[hidden] { display: none; }

.drop-title {
  margin: 4px 0 0;
  font-family: 'Caprasimo', 'Onest', serif;
  font-size: 24px;
  color: var(--ink);
  letter-spacing: .3px;
}
.drop-sub {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
/* 等待动效：三个脉动的小点 */
.wait-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 2px;
  vertical-align: baseline;
}
.wait-dots i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--honey-2);
  display: inline-block;
  animation: dotPulse 1.2s ease-in-out infinite;
}
.wait-dots i:nth-child(2) { animation-delay: .2s; }
.wait-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dotPulse {
  0%, 100% { transform: scale(.6); opacity: .4; }
  40%      { transform: scale(1.2); opacity: 1;  }
  70%      { transform: scale(.8); opacity: .6; }
}
.hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  padding: 6px 12px;
  background: rgba(123, 216, 168, .18);
  color: #2F7A5A;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
}
.hint .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #2F7A5A;
  box-shadow: 0 0 0 4px rgba(123, 216, 168, .35);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(1.4); opacity: .6; }
}

/* ============================================
   可选保存名称
   ============================================ */
.save-name-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  text-align: left;
}

.save-name-label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 4px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
}

.optional-tag {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(123, 216, 168, .2);
  color: #2F7A5A;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}

.save-name-control {
  display: flex;
  align-items: center;
  min-height: 48px;
  overflow: hidden;
  border: 1.5px solid rgba(176, 78, 24, .18);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px 2px rgba(176, 78, 24, .06);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.save-name-control:focus-within {
  border-color: var(--honey-2);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 178, 59, .16);
}

.save-name-input {
  appearance: none;
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  padding: 12px 4px 12px 14px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  letter-spacing: 0;
}

.save-name-input::placeholder {
  color: var(--ink-faint);
  opacity: .75;
}

.save-name-suffix {
  flex: 0 0 auto;
  margin-right: 12px;
  color: var(--ink-faint);
  font-family: 'JetBrains Mono', 'Onest', monospace;
  font-size: 13px;
  letter-spacing: 0;
}

/* ============================================
   按钮
   ============================================ */
.cta {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 17px 22px;
  border-radius: var(--r-xl);
  font-family: 'Onest', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: #fff;
  background: linear-gradient(180deg, #FFB23B 0%, #FF8A2B 50%, #FF6B2C 100%);
  box-shadow: var(--shadow-cta),
              inset 0 -3px 0 rgba(122, 41, 8, .25),
              inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* 持续轻微的暖光呼吸 */
.cta::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 200, 100, .55), transparent 60%);
  opacity: 0;
  z-index: -1;
  transition: opacity .25s ease;
  filter: blur(8px);
}
/* 高光扫过 */
.cta::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .7s ease;
  z-index: 0;
}
.cta > * { position: relative; z-index: 1; }
.cta:active { transform: translateY(1px) scale(.99); filter: brightness(.96); }
.cta:hover::after { transform: translateX(100%); }
.cta:hover::before { opacity: 1; }

/* 上传图标：轻微弹跳 */
.cta-icon { transition: transform .25s ease; }
.cta:hover .cta-icon:first-child { transform: translateY(-2px); }
.cta:active .cta-icon:first-child { transform: translateY(0); }
.cta:hover .cta-icon:last-child { transform: translateX(3px); }

.cta-pink {
  background: linear-gradient(180deg, #FF7AA0 0%, #FF5C8A 50%, #FF4D77 100%);
  box-shadow: 0 10px 22px -6px rgba(255, 77, 119, .55),
              inset 0 -3px 0 rgba(140, 14, 50, .22),
              inset 0 1px 0 rgba(255, 255, 255, .4);
}

.ghost {
  appearance: none;
  border: 1.5px solid rgba(58, 36, 24, .18);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  padding: 12px 20px;
  border-radius: var(--r-xl);
  font-family: 'Onest', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .5px;
  transition: background .15s, transform .15s;
}
.ghost:active { transform: scale(.98); background: rgba(58, 36, 24, .06); }

/* ============================================
   插画：太阳 + 阳光放射 + 两朵云
   ============================================ */
.drop-art {
  width: 200px; height: 140px;
  position: relative;
  margin-top: 4px;
}
/* 太阳本体：藏在云朵后面 */
.art-sun {
  position: absolute;
  left: 50%; top: 32px;
  transform: translateX(-50%);
  width: 76px; height: 76px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
              #FFEEB0 0%, #FFC857 40%, #FF8A2B 80%, #FF6B2C 100%);
  box-shadow:
    0 0 40px rgba(255, 138, 43, .65),
    0 0 70px rgba(255, 178, 59, .35);
  animation: sunGlow 2.2s ease-in-out infinite;
}
@keyframes sunGlow {
  0%,100% { transform: translateX(-50%) scale(1);    filter: brightness(1); }
  50%     { transform: translateX(-50%) scale(1.08); filter: brightness(1.1); }
}
/* 阳光放射线 */
.art-rays {
  position: absolute;
  left: 50%; top: 32px;
  transform: translateX(-50%);
  width: 160px; height: 160px;
  animation: sunSpin 30s linear infinite;
  pointer-events: none;
}
.art-rays span {
  position: absolute;
  left: 50%; top: 50%;
  width: 3px; height: 16px;
  margin-left: -1.5px;
  background: linear-gradient(180deg, rgba(255, 178, 59, .9), rgba(255, 178, 59, 0));
  border-radius: 2px;
  transform-origin: 50% 70px;
}
.art-rays span:nth-child(1)  { transform: rotate(0deg);   }
.art-rays span:nth-child(2)  { transform: rotate(40deg);  }
.art-rays span:nth-child(3)  { transform: rotate(80deg);  }
.art-rays span:nth-child(4)  { transform: rotate(120deg); }
.art-rays span:nth-child(5)  { transform: rotate(160deg); }
.art-rays span:nth-child(6)  { transform: rotate(200deg); }
.art-rays span:nth-child(7)  { transform: rotate(240deg); }
.art-rays span:nth-child(8)  { transform: rotate(280deg); }
.art-rays span:nth-child(9)  { transform: rotate(320deg); }

/* 两朵云：错位漂浮 */
.cloud {
  position: absolute;
  width: 100px; height: 52px;
  animation: bob 3.2s ease-in-out infinite;
}
.cloud-l {
  left: 22px; top: 86px;
  animation-delay: 0s;
  animation-duration: 3.4s;
}
.cloud-r {
  right: 22px; left: auto;
  top: 92px;
  animation-delay: .8s;
  animation-duration: 3.8s;
}
.cloud-body {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 100px; height: 50px;
  background: linear-gradient(180deg, #ffffff 0%, #FFF6E5 100%);
  border-radius: 50px;
  box-shadow:
    0 12px 28px rgba(176, 78, 24, .22),
    inset 0 -4px 0 rgba(255, 178, 59, .12);
}
.cloud-body::before, .cloud-body::after {
  content: '';
  position: absolute;
  background: linear-gradient(180deg, #ffffff 0%, #FFF6E5 100%);
  border-radius: 50%;
  box-shadow: inset 0 -3px 0 rgba(255, 178, 59, .1);
}
.cloud-body::before {
  width: 44px; height: 44px;
  left: 8px; top: -18px;
}
.cloud-body::after {
  width: 60px; height: 60px;
  right: 0;  top: -28px;
}
/* 上传小箭头：每朵云各一个 */
.up {
  position: absolute;
  left: 50%; bottom: 6px;
  transform: translateX(-50%);
  width: 8px; height: 14px;
  border-left: 2.5px solid var(--honey-2);
  border-right: 2.5px solid var(--honey-2);
  border-top: 2.5px solid var(--honey-2);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  animation: floatUp 1.8s ease-in-out infinite;
}
.cloud-l .up { animation-delay: 0s; }
.cloud-r .up { animation-delay: .6s; }

@keyframes bob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}
@keyframes floatUp {
  0%   { transform: translateX(-50%) translateY(0);   opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translateX(-50%) translateY(-22px); opacity: 0; }
}
@keyframes sunSpin {
  to { transform: translateX(-50%) rotate(360deg); }
}

/* ============================================
   进度条
   ============================================ */
.meter {
  width: 100%;
  height: 12px;
  background: rgba(58, 36, 24, .08);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  margin-top: 6px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}
.meter-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #FFD27A, #FF8A2B 50%, #FF4D77);
  border-radius: 999px;
  transition: width .35s ease;
  position: relative;
}
.meter-bar::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* ============================================
   加载：太阳旋转
   ============================================ */
.spinner {
  width: 90px; height: 90px;
  position: relative;
  margin-top: 4px;
}
.spinner-sun {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFE9A8 0%, #FFB23B 45%, #FF6B2C 100%);
  box-shadow: 0 0 40px rgba(255, 138, 43, .6);
  position: relative;
  animation: sunPulse 1.6s ease-in-out infinite;
}
.spinner-sun::before, .spinner-sun::after {
  content: '';
  position: absolute; inset: -8px;
  border: 3px dashed rgba(255, 138, 43, .35);
  border-radius: 50%;
  animation: spin 6s linear infinite;
}
.spinner-sun::after {
  inset: -18px;
  border-style: dotted;
  border-color: rgba(255, 107, 138, .4);
  animation-duration: 10s;
  animation-direction: reverse;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sunPulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.06); }
}

/* ============================================
   工作：黑胶唱机
   ============================================ */
.turntable {
  width: 170px; height: 170px;
  position: relative;
  margin-top: 4px;
}

/* 唱片（旋转） */
.tt-disc {
  position: absolute;
  left: 16px; top: 16px;
  width: 138px; height: 138px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at center,
              #1c1c1c 0 1.5px, #0a0a0a 1.5px 3px);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, .28),
    inset 0 0 0 2px rgba(255, 255, 255, .05);
  animation: spin 4s linear infinite;
}
/* 唱片纹路：两条发光的环 */
.tt-grooves {
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .07),
    inset 0 0 0 30px transparent,
    inset 0 0 0 31px rgba(255, 255, 255, .04),
    inset 0 0 0 52px transparent,
    inset 0 0 0 53px rgba(255, 255, 255, .04);
}
/* 中央彩标 */
.tt-label {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 50px; height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFB23B 0%, #FF8A2B 45%, #FF4D77 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: 'Caprasimo', serif;
  font-size: 16px;
  letter-spacing: 1px;
  box-shadow:
    inset 0 0 0 3px #fff,
    0 2px 6px rgba(0, 0, 0, .25);
  z-index: 1;
}
/* 中央转轴孔 */
.tt-spindle {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #0a0a0a;
  box-shadow: 0 0 0 2px rgba(255,255,255,.4);
  z-index: 2;
}

/* 唱臂总成（不旋转） */
.tt-arm {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* 转轴基座：右上角的金属圆柱 */
.tt-post {
  position: absolute;
  top: 4px; right: 4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 30%, #ffffff 0%, #d0d0d0 35%, #888 80%, #5a5a5a 100%);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, .4),
    inset 0 -2px 3px rgba(0, 0, 0, .25),
    inset 0 2px 2px rgba(255, 255, 255, .6);
  z-index: 4;
}
/* 唱臂杆：从转轴斜向盘面，带配重和唱头 */
.tt-shaft {
  position: absolute;
  top: 14px;           /* 转轴中心 */
  right: 14px;         /* 转轴中心 */
  width: 108px;
  height: 5px;
  background: linear-gradient(90deg, #5a5a5a 0%, #b0b0b0 18%, #d8d8d8 60%, #c0c0c0 100%);
  border-radius: 3px;
  transform-origin: 100% 50%;
  transform: rotate(-32deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
  z-index: 3;
  animation: tt-track 9s ease-in-out infinite;
}
/* 唱臂尾部的配重 */
.tt-counter {
  position: absolute;
  right: -10px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #b8b8b8, #555);
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
/* 唱头：彩色的小方块，唱针朝下 */
.tt-head {
  position: absolute;
  left: -8px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 14px;
  background: linear-gradient(180deg, #FF8A2B 0%, #FF4D77 100%);
  border-radius: 3px 3px 4px 4px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}
/* 唱针：细针尖接触唱片 */
.tt-head::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -4px;
  transform: translateX(-50%);
  width: 2px; height: 5px;
  background: linear-gradient(180deg, #1a1a1a, #555);
  border-radius: 1px;
}
/* 循迹动画：唱臂缓慢从外圈滑向内圈再回来，模拟播放一张唱片 */
@keyframes tt-track {
  0%   { transform: rotate(-25deg); }
  50%  { transform: rotate(-44deg); }
  100% { transform: rotate(-25deg); }
}

/* ============================================
   完成：奖杯
   ============================================ */
.trophy {
  width: 130px; height: 130px;
  position: relative;
  margin-top: 4px;
}
/* 杯身后散发的金色光晕 */
.trophy-halo {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 100, .55) 0%, transparent 65%);
  animation: haloPulse 1.8s ease-in-out infinite;
}
@keyframes haloPulse {
  0%,100% { transform: scale(1);    opacity: .8; }
  50%     { transform: scale(1.12); opacity: 1;  }
}
.trophy-cup {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 78px; height: 90px;
  background: linear-gradient(180deg, #FFD27A 0%, #FF8A2B 55%, #FF6B2C 100%);
  border-radius: 16px 16px 30px 30px;
  box-shadow:
    0 14px 26px rgba(255, 138, 43, .45),
    inset 0 -10px 0 rgba(122, 41, 8, .18),
    inset 0 2px 0 rgba(255, 255, 255, .45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12px;
  z-index: 1;
}
.trophy-cup::before, .trophy-cup::after {
  content: '';
  position: absolute;
  width: 22px; height: 30px;
  border: 5px solid #FF8A2B;
  border-radius: 16px;
  top: 14px;
}
.trophy-cup::before { left: -22px; border-right: 0; }
.trophy-cup::after  { right: -22px; border-left: 0; }
/* 杯身上的小标签 */
.trophy-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1.5px;
  text-shadow: 0 1px 0 rgba(122, 41, 8, .35);
  background: rgba(255, 255, 255, .2);
  padding: 3px 10px;
  border-radius: 6px;
  border: 1.5px solid rgba(255, 255, 255, .35);
}
.trophy-spark {
  position: absolute;
  width: 8px; height: 8px;
  background: #FFE9A8;
  border-radius: 50%;
  box-shadow: 0 0 12px #FFB23B, 0 0 22px rgba(255, 178, 59, .5);
  z-index: 2;
  animation: spark 1.4s ease-in-out infinite;
}
.trophy-spark.s1 { top: 8px;   left: 14px;  }
.trophy-spark.s2 { top: 4px;   right: 18px; animation-delay: .25s; }
.trophy-spark.s3 { bottom: 18px; right: 8px;  animation-delay: .55s; }
.trophy-spark.s4 { bottom: 12px; left: 12px;  animation-delay: .8s;  }
@keyframes spark {
  0%,100% { transform: scale(.6); opacity: .6; }
  50%     { transform: scale(1.5); opacity: 1; }
}

/* ============================================
   音频试听
   ============================================ */
#preview {
  width: 100%;
  margin-top: 8px;
  border-radius: 999px;
  height: 44px;
  outline: none;
  background: rgba(255, 200, 130, .15);
  filter: hue-rotate(-5deg) saturate(1.1);
}

.actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
}

/* ============================================
   错误
   ============================================ */
.oops {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF6B8A, #FF4D77);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Caprasimo', serif;
  font-size: 44px;
  box-shadow: 0 12px 24px rgba(255, 77, 119, .35);
  margin-top: 4px;
}

/* ============================================
   底部
   ============================================ */
.foot {
  text-align: center;
  font-size: 12px;
  color: var(--ink-faint);
  padding: 8px 0 4px;
  letter-spacing: 1.2px;
  font-family: 'JetBrains Mono', 'Onest', monospace;
}

/* ============================================
   适配：超窄屏 / 横屏 / 桌面降级
   ============================================ */
@media (min-width: 540px) {
  .phone { padding-top: 40px; }
  .tagline { font-size: 40px; }
}
@media (max-height: 640px) and (orientation: landscape) {
  .drop-art, .spinner, .vinyl, .trophy { transform: scale(.8); }
  .tagline { font-size: 26px; }
}

/* 减少动效 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}