/* ============ 路演抽签 ============ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC", sans-serif;
  color: #fdf6ea;
  background: #150307;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(110% 70% at 50% -8%, rgba(206, 38, 60, .58) 0%, rgba(120, 16, 30, .26) 38%, rgba(21, 3, 7, 0) 70%),
    radial-gradient(80% 55% at 50% 108%, rgba(150, 24, 40, .40) 0%, rgba(21, 3, 7, 0) 65%),
    linear-gradient(180deg, #2b0710 0%, #1a040a 45%, #100206 100%);
}

/* 背景光晕 */
.halo {
  position: fixed;
  left: 50%;
  top: 40%;
  width: min(155vw, 780px);
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
      rgba(243, 193, 90, 0) 0deg,
      rgba(243, 193, 90, .15) 42deg,
      rgba(243, 193, 90, 0) 108deg,
      rgba(243, 193, 90, 0) 196deg,
      rgba(243, 193, 90, .11) 248deg,
      rgba(243, 193, 90, 0) 318deg);
  filter: blur(20px);
  opacity: .85;
  animation: spin 28s linear infinite;
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 66%);
  mask-image: radial-gradient(circle, #000 18%, transparent 66%);
}

@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ============ 布局 ============ */
.page {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: calc(18px + env(safe-area-inset-top)) 22px calc(16px + env(safe-area-inset-bottom));
}

.top { display: flex; justify-content: center; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(243, 193, 90, .32);
  background: rgba(255, 255, 255, .05);
  font-size: 12.5px;
  letter-spacing: .06em;
  color: rgba(253, 246, 234, .86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.pill i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #f3c15a;
  box-shadow: 0 0 8px #f3c15a;
  animation: blink 1.9s ease-in-out infinite;
}

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.title {
  margin: 26px 0 0;
  font-size: 52px;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: .10em;
  text-indent: .10em;
  background: linear-gradient(170deg, #fff7e2 0%, #ffe6ac 34%, #f0be55 62%, #c8932c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 22px rgba(243, 193, 90, .28));
}

.sub {
  margin: 14px 0 0;
  font-size: 13.5px;
  letter-spacing: .04em;
  color: rgba(253, 246, 234, .60);
}

/* ============ 作品名称输入 ============ */
.work-field {
  width: 100%;
  max-width: 302px;
  margin-top: clamp(14px, 2.6vh, 24px);
  padding: 0 4px;
}

.work-label {
  display: block;
  margin-bottom: 9px;
  font-size: 11.5px;
  letter-spacing: .18em;
  text-indent: .18em;
  text-align: center;
  color: rgba(253, 246, 234, .54);
}

.work-input {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(243, 193, 90, .26);
  background: rgba(255, 255, 255, .05);
  color: #fdf6ea;
  font-family: inherit;
  font-size: 16px;          /* 16px：避免 iOS 聚焦时自动放大页面 */
  line-height: 1.2;
  text-align: center;
  letter-spacing: .02em;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.work-input::placeholder {
  font-size: 14.5px;
  color: rgba(253, 246, 234, .30);
}

.work-input:focus {
  border-color: rgba(243, 193, 90, .62);
  background: rgba(255, 255, 255, .075);
  box-shadow: 0 0 0 3px rgba(243, 193, 90, .12);
}

.work-input[readonly] {
  border-color: rgba(243, 193, 90, .16);
  background: rgba(255, 255, 255, .025);
  color: rgba(253, 246, 234, .70);
}

.work-hint {
  margin: 9px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  text-align: center;
  color: rgba(253, 246, 234, .40);
  transition: color .2s ease;
}
.work-hint.ok { color: rgba(243, 193, 90, .80); }
.work-hint.bad { color: #ff9d7d; }

@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-7px); }
  36% { transform: translateX(6px); }
  54% { transform: translateX(-4px); }
  72% { transform: translateX(3px); }
  86% { transform: translateX(-2px); }
}
.work-field.shake { animation: shakeX .42s ease; }

/* ============ 抽签按钮 ============ */
.draw-btn {
  position: relative;
  margin-top: clamp(22px, 4.2vh, 44px);
  width: 204px;
  height: 204px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-family: inherit;
  color: #331202;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: radial-gradient(circle at 32% 24%, #fff4d4 0%, #f8ce6b 34%, #d9a438 62%, #b17c1d 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 240, 200, .65),
    0 18px 46px rgba(0, 0, 0, .45),
    0 0 64px rgba(243, 193, 90, .26);
  transition: transform .18s ease, box-shadow .3s ease, opacity .3s ease;
}

.draw-btn:active { transform: scale(.955); }

.draw-btn::before {
  content: "";
  position: absolute;
  inset: -13px;
  border-radius: 50%;
  border: 1px dashed rgba(243, 193, 90, .34);
  animation: spin2 20s linear infinite;
}

.draw-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(243, 193, 90, .40);
  animation: pulse 2.8s ease-out infinite;
}

@keyframes spin2 { to { transform: rotate(360deg); } }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(243, 193, 90, .38); }
  72% { box-shadow: 0 0 0 26px rgba(243, 193, 90, 0); }
  100% { box-shadow: 0 0 0 0 rgba(243, 193, 90, 0); }
}

.btn-text {
  font-size: 29px;
  font-weight: 900;
  letter-spacing: .14em;
  text-indent: .14em;
}
.btn-sub {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .34em;
  text-indent: .34em;
  opacity: .5;
}

.draw-btn[disabled] { opacity: .42; pointer-events: none; }

.draw-btn[data-mode="result"] .btn-text,
.draw-btn[data-mode="empty"] .btn-text {
  font-size: 21px;
  letter-spacing: .08em;
  text-indent: .08em;
}

.meta {
  margin: 28px 0 0;
  font-size: 12.5px;
  letter-spacing: .03em;
  color: rgba(253, 246, 234, .50);
}

.foot {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 10.5px;
  letter-spacing: .02em;
  color: rgba(253, 246, 234, .30);
}
.foot .sep { opacity: .5; }

/* ============ 抽签浮层 ============ */
.veil {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 26px 22px;
  overflow-y: auto;
  background: rgba(10, 2, 5, .74);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility .3s ease;
}
.veil.on { opacity: 1; visibility: visible; pointer-events: auto; }

.veil-card {
  width: 100%;
  max-width: 330px;
  margin: auto;              /* 内容超高时可正常滚动，顶部不被裁切 */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateY(8px) scale(.985);
  transition: transform .35s cubic-bezier(.2, .9, .3, 1);
}
.veil.on .veil-card { transform: none; }

.kicker {
  margin: 0 0 22px;
  font-size: 12px;
  letter-spacing: .26em;
  text-indent: .26em;
  color: rgba(243, 193, 90, .82);
}

.ball {
  flex: none;
  width: 172px;
  height: 172px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .14), rgba(255, 255, 255, .02) 58%),
    rgba(28, 5, 11, .62);
  border: 1px solid rgba(243, 193, 90, .40);
  box-shadow: inset 0 0 42px rgba(243, 193, 90, .13), 0 0 52px rgba(243, 193, 90, .13);
  transition: width .38s cubic-bezier(.2, .9, .3, 1), height .38s cubic-bezier(.2, .9, .3, 1);
}

.ball-num {
  font-size: 88px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff8e3 0%, #f3c15a 56%, #c48d25 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: font-size .38s cubic-bezier(.2, .9, .3, 1);
}

.ball.rolling { animation: jitter .13s linear infinite; }
.ball.rolling .ball-num { filter: blur(.8px); opacity: .92; }
@keyframes jitter {
  0% { transform: translateY(-2px); }
  50% { transform: translateY(2px); }
  100% { transform: translateY(-2px); }
}

.ball.settled { animation: pop .55s cubic-bezier(.18, 1.5, .4, 1); }
@keyframes pop {
  0% { transform: scale(.84); opacity: .5; }
  62% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.veil-card.show-res .ball { width: 130px; height: 130px; }
.veil-card.show-res .ball-num { font-size: 62px; }

/* 结果区 */
.res {
  width: 100%;
  margin-top: 26px;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .42s ease .04s, transform .42s ease .04s;
}
.res.on { opacity: 1; transform: none; pointer-events: auto; }

.res-line {
  margin: 0;
  font-size: 16.5px;
  letter-spacing: .03em;
  color: rgba(253, 246, 234, .90);
}
.res-line b {
  margin: 0 3px;
  font-size: 22px;
  font-weight: 900;
  color: #ffd98a;
}

.slot {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(243, 193, 90, .24);
  background: linear-gradient(180deg, rgba(243, 193, 90, .10), rgba(243, 193, 90, .028));
}

/* 结果页作品名称 */
.res-work {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px dashed rgba(243, 193, 90, .30);
  background: rgba(243, 193, 90, .055);
  text-align: left;
}
.res-work-k {
  display: block;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-indent: .18em;
  color: rgba(253, 246, 234, .46);
}
.res-work-v {
  display: block;
  margin-top: 6px;
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.5;
  color: #ffd98a;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.slot-k {
  display: block;
  font-size: 11px;
  letter-spacing: .18em;
  text-indent: .18em;
  color: rgba(253, 246, 234, .54);
}
.slot-v {
  display: block;
  margin-top: 7px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff6dc, #f3c15a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tip {
  margin-top: 16px;
  padding: 12px 14px;
  border-left: 2px solid rgba(243, 193, 90, .38);
  border-radius: 0 10px 10px 0;
  background: rgba(255, 255, 255, .032);
  font-size: 12px;
  line-height: 1.78;
  text-align: left;
  color: rgba(253, 246, 234, .56);
}

.warn {
  margin: 11px 0 0;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: #ffd98a;
}
.warn b { font-weight: 900; }

/* 结果页：截图交组委会提示 */
.shot {
  margin: 14px 0 0;
  padding: 10px 14px;
  border: 1px dashed rgba(243, 193, 90, .44);
  border-radius: 10px;
  background: rgba(243, 193, 90, .075);
  font-size: 12.5px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: #ffe3a8;
}

.ghost {
  margin-top: 22px;
  padding: 11px 30px;
  border: 1px solid rgba(253, 246, 234, .20);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  color: rgba(253, 246, 234, .9);
  font-family: inherit;
  font-size: 13.5px;
  letter-spacing: .1em;
  text-indent: .1em;
  cursor: pointer;
  transition: transform .16s ease, background .2s ease;
}
.ghost:active { transform: scale(.97); background: rgba(255, 255, 255, .09); }

.err { display: none; margin-top: 24px; }
.err.on { display: block; }
.err p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: rgba(253, 246, 234, .72);
}

/* 彩带 */
.confetti {
  position: fixed;
  top: 10%;
  z-index: 60;
  width: 7px;
  height: 12px;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  animation: fall 1.45s cubic-bezier(.3, .7, .5, 1) forwards;
}
@keyframes fall {
  0% { opacity: 0; transform: translate3d(0, -24px, 0) rotate(0deg); }
  14% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--dx, 0px), 74vh, 0) rotate(var(--rot, 180deg)); }
}

/* ============ 入口页 ============ */
.idx .title.sm {
  margin-top: 20px;
  font-size: 33px;
  letter-spacing: .08em;
  text-indent: .08em;
}
.idx .hero { justify-content: flex-start; padding-top: 6px; }

.cards {
  width: 100%;
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px;
  border-radius: 18px;
  border: 1px solid rgba(243, 193, 90, .16);
  background: rgba(255, 255, 255, .045);
}

.card-qr {
  flex: none;
  width: 104px;
  height: 104px;
  padding: 4px;
  border-radius: 10px;
  background: #fff;
  display: grid;
  place-items: center;
}
.card-qr svg { width: 100%; height: 100%; display: block; }
.card-qr.empty { background: rgba(255, 255, 255, .10); }

.card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.card-name {
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .02em;
  color: #fdf6ea;
  text-decoration: none;
}
.card-meta {
  font-size: 11px;
  line-height: 1.6;
  color: rgba(253, 246, 234, .48);
}

.copy {
  margin-top: 2px;
  padding: 6px 12px;
  border: 1px solid rgba(243, 193, 90, .28);
  border-radius: 8px;
  background: transparent;
  color: #ffd98a;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}
.copy:active { background: rgba(243, 193, 90, .14); }
.copy.done { color: rgba(253, 246, 234, .55); border-color: rgba(253, 246, 234, .2); }

.center { text-align: center; align-self: center; }

@media (max-width: 360px) {
  .title { font-size: 44px; }
  .draw-btn { width: 174px; height: 174px; }
  .btn-text { font-size: 25px; }
  .ball { width: 152px; height: 152px; }
  .ball-num { font-size: 76px; }
}

/* 矮屏（iPhone SE 等）：压缩纵向间距，保证「输入框 + 抽签按钮」一屏可见 */
@media (max-height: 700px) {
  .title { margin-top: 12px; font-size: 44px; }
  .sub { margin-top: 8px; }
  .work-field { margin-top: 12px; }
  .work-label { margin-bottom: 6px; }
  .work-input { height: 46px; }
  .work-hint { margin-top: 7px; }
  .draw-btn { width: 176px; height: 176px; margin-top: 18px; }
  .btn-text { font-size: 25px; }
  .meta { margin-top: 18px; }
  .note { margin-top: 7px; font-size: 11px; }
  .foot { margin-top: 12px; }
}