/* 手机端样式 - 思领未来，倍战共赢 */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: calc(100vw / 25.75); } /* 375 宽下 1rem ≈ 14.56px */
@media (min-width: 560px) { html { font-size: 21px; } }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  color: #fff; min-height: 100vh;
}
.page-bg {
  background-image: linear-gradient(152deg, #1436c8 0%, #0e51c4 26%, #0a86a0 52%, #0aa45e 74%, #16c24d 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  overflow-x: hidden;
}
.page-bg::before { /* 左上光点阵 */
  content: ""; position: fixed; left: 0; top: 0; width: 9em; height: 9em; pointer-events: none;
  background-image: radial-gradient(rgba(160,220,255,.55) 1.2px, transparent 1.8px);
  background-size: .85em .85em;
  -webkit-mask-image: radial-gradient(circle at 0 0, #000 0%, transparent 72%);
  mask-image: radial-gradient(circle at 0 0, #000 0%, transparent 72%);
}
.page-bg::after { /* 底部弧光 */
  content: ""; position: fixed; left: -20%; bottom: -4em; width: 140%; height: 12em; pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(180,255,190,.28) 0%, transparent 62%);
}
.wrap { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: 1.1em 1.15em 0; min-height: 100vh; display: flex; flex-direction: column; }

/* 玻璃卡片 */
.glass {
  background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 1.1em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 .5em 1.6em rgba(0, 30, 60, .22), inset 0 1px 0 rgba(255,255,255,.25);
}
.glass-inner {
  background: rgba(0, 40, 60, .16);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: .8em;
}

/* 评委手机端：底板框偏绿，与背景图拉开层次 */
body.page-judge .glass {
  background: linear-gradient(160deg, rgba(18, 95, 72, .58), rgba(8, 58, 48, .5));
  border: 1px solid rgba(120, 210, 165, .4);
  box-shadow: 0 .5em 1.6em rgba(0, 40, 30, .32), inset 0 1px 0 rgba(180, 255, 210, .16);
}
body.page-judge .glass-inner,
body.page-judge .ji-item,
body.page-judge .ji-total {
  background: rgba(6, 55, 42, .4);
  border: 1px solid rgba(130, 215, 170, .3);
}
body.page-judge .form-input {
  background: rgba(6, 50, 40, .35);
  border-color: rgba(140, 220, 180, .35);
}
body.page-judge .ji-chip {
  background: rgba(8, 60, 48, .35);
  border-color: rgba(140, 220, 180, .35);
}

.card-main { padding: 1.3em 1.2em 1.5em; }
.card-head {
  text-align: center; font-size: 1.25em; font-weight: 800; letter-spacing: .1em; margin-bottom: 1em;
  text-shadow: 0 .08em .3em rgba(0,60,40,.4);
}

/* 表单 */
.form-item { margin-bottom: 1.1em; }
.form-label { display: flex; align-items: center; gap: .4em; font-size: 1.05em; font-weight: 600; margin-bottom: .55em; }
.form-label em { color: #ff7b7b; font-style: normal; }
.form-label .ico { font-size: .95em; }
.form-input {
  width: 100%; padding: .95em 1em; font-size: 1.05em; color: #fff;
  background: rgba(0, 40, 60, .22); border: 1px solid rgba(255,255,255,.32); border-radius: .7em;
  appearance: none; -webkit-appearance: none;
}
.form-input:focus { outline: none; border-color: rgba(140,240,180,.85); box-shadow: 0 0 0 .2em rgba(60,220,140,.18); }
.form-input::placeholder { color: rgba(255,255,255,.55); }
.select-box { position: relative; }
.select-box::after {
  content: ""; position: absolute; right: 1em; top: 50%; transform: translateY(-30%);
  border: .38em solid transparent; border-top-color: rgba(255,255,255,.85); pointer-events: none;
}
select.form-input option { color: #123; background: #fff; }

/* 规则 */
.rules { padding: .9em 1em; margin: 1.2em 0 1.3em; }
.rules-head { text-align: center; font-weight: 700; font-size: .98em; letter-spacing: .1em; margin-bottom: .6em; }
.rule-line { display: flex; align-items: center; gap: .55em; font-size: .95em; padding: .3em 0; opacity: .96; }
.rule-line .check {
  flex: none; width: 1.25em; height: 1.25em; border-radius: 50%; font-size: .72em;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #29d06a, #0fa356); color: #fff;
}
.rules-long .rules-body {
  max-height: 14em; overflow: auto; font-size: .9em; line-height: 1.75; opacity: .96;
  white-space: pre-wrap; word-break: break-word; padding-right: .2em;
}

/* 按钮 */
.btn-primary {
  display: block; width: 100%; padding: 1em; border: 1px solid rgba(255,255,255,.5); border-radius: 3em;
  font-size: 1.3em; font-weight: 800; letter-spacing: .12em; color: #fff; cursor: pointer;
  background: linear-gradient(90deg, #1f8fff 0%, #10c9a0 55%, #12d35f 100%);
  box-shadow: 0 .35em 1.1em rgba(10, 120, 80, .45), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-primary:active { transform: scale(.985); }
.btn-primary:disabled { opacity: .6; }
.btn-ghost {
  padding: .8em 1.6em; border: 1px solid rgba(255,255,255,.45); border-radius: 3em;
  background: rgba(255,255,255,.08); color: #fff; font-size: 1em; cursor: pointer;
}
.err-msg { color: #ffd2d2; text-align: center; font-size: .95em; margin-top: .8em; min-height: 1.2em; }

/* 等待页 */
.wait-body { text-align: center; padding: 1em 0 .6em; }
.wait-anim { display: flex; justify-content: center; gap: .5em; margin-bottom: 1.2em; }
.wait-anim span { width: .75em; height: .75em; border-radius: 50%; background: #9df0b8; animation: bounce 1.2s infinite ease-in-out; }
.wait-anim span:nth-child(2) { animation-delay: .18s; background: #7ad9ff; }
.wait-anim span:nth-child(3) { animation-delay: .36s; }
@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .6; } 40% { transform: translateY(-.7em); opacity: 1; } }
.wait-name { font-size: 1.25em; font-weight: 700; margin-bottom: .6em; }
.wait-tip { font-size: .98em; line-height: 1.9; opacity: .92; }

/* 答题页 */
.quiz-top { display: flex; justify-content: space-between; align-items: center; padding: .7em 1em; font-size: 1.02em; font-weight: 600; }
.quiz-timer { font-variant-numeric: tabular-nums; }
.progress-box { margin: 1em 0 .9em; }
.progress-text { font-size: .95em; margin-bottom: .45em; opacity: .95; }
.progress-text b { font-size: 1.25em; color: #aef7c3; }
.progress-bar { height: .5em; border-radius: 1em; background: rgba(255,255,255,.18); overflow: hidden; }
.progress-bar i { display: block; height: 100%; width: 4%; border-radius: 1em; transition: width .3s;
  background: linear-gradient(90deg, #3db6ff, #22e07a); }
.quiz-card { min-height: 21em; }
.q-loading { text-align: center; padding: 3em 0; opacity: .85; }
.q-title { font-size: 1.15em; font-weight: 700; line-height: 1.65; margin-bottom: 1.1em; }
.q-no { color: #aef7c3; }
.q-opts .opt {
  display: flex; align-items: center; gap: .8em; padding: .9em 1em; margin-bottom: .75em;
  background: rgba(0, 40, 60, .18); border: 1px solid rgba(255,255,255,.28); border-radius: .8em;
  font-size: 1.02em; line-height: 1.5; cursor: pointer; transition: all .15s;
}
.q-opts .opt-key {
  flex: none; width: 1.7em; height: 1.7em; border-radius: 50%; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4);
}
.q-opts .opt.sel {
  background: linear-gradient(90deg, rgba(31,143,255,.45), rgba(18,211,95,.45));
  border-color: #9df0b8; box-shadow: 0 0 .7em rgba(60,230,140,.35);
}
.q-opts .opt.sel .opt-key { background: #12d35f; border-color: #fff; }
.q-nav { display: flex; gap: .8em; margin-top: 1.3em; align-items: center; }
.q-nav .btn-next { flex: 1; font-size: 1.1em; padding: .85em; }

/* 成绩页 */
.result-card { text-align: center; }
.result-name { font-size: 1.15em; font-weight: 600; margin-bottom: 1em; }
.score-circle {
  width: 9em; height: 9em; margin: 0 auto 1.2em; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.22), rgba(255,255,255,.05) 60%);
  border: .28em solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 0 .28em rgba(255,255,255,.25), 0 0 1.6em rgba(80,240,160,.4), inset 0 0 1.2em rgba(120,230,255,.18);
}
.score-num { font-size: 3.4em; font-weight: 900; line-height: 1;
  background: linear-gradient(180deg, #fff, #b8f5c5);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.score-unit { font-size: 1em; opacity: .85; margin-top: .3em; }
.result-stats { display: flex; justify-content: space-around; margin: 1.2em 0 1.1em; }
.result-stats .stat b { display: block; font-size: 1.2em; color: #aef7c3; margin-bottom: .3em; }
.result-stats .stat span { font-size: .82em; opacity: .8; }
.result-tip { font-size: .95em; opacity: .9; line-height: 1.8; padding-top: .8em; border-top: 1px dashed rgba(255,255,255,.3); }

/* 页面顶部留白：给背景图中的标题区域让位 */
.page-headroom { padding-top: 30vh; }

/* 背景音乐按钮（旋转唱片） */
.bgm-btn {
  position: fixed; right: .9em; top: .9em; z-index: 99;
  width: 2.6em; height: 2.6em; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1em; color: #fff; cursor: pointer;
  background: radial-gradient(circle at 50% 50%, rgba(0,60,40,.55) 30%, rgba(255,255,255,.25) 32%, rgba(0,60,40,.55) 40%);
  border: 2px solid rgba(255,255,255,.65);
  box-shadow: 0 .2em .8em rgba(0,40,20,.4);
  animation: bgmspin 3s linear infinite;
}
.bgm-btn.off { animation-play-state: paused; opacity: .6; }
.bgm-btn.off::after { content: ""; position: absolute; left: 50%; top: -15%; width: 2px; height: 130%;
  background: #fff; transform: rotate(45deg); border-radius: 2px; }
@keyframes bgmspin { to { transform: rotate(360deg); } }

/* 评委打分页 */
.judge-switch { color: #cfeee0; font-size: .9em; text-decoration: none; border: 1px solid rgba(255,255,255,.4);
  border-radius: 2em; padding: .25em .9em; }
.judge-card { min-height: 20em; }
.j-program { padding: 1em 1.1em; margin-bottom: 1.2em; text-align: center; }
.j-project { font-size: 1.3em; font-weight: 800; }
.j-show { font-size: 1em; opacity: .9; margin-top: .4em; }
.j-presenter { font-size: .9em; opacity: .75; margin-top: .3em; }
.j-show:empty, .j-presenter:empty { display: none; }
.score-display { text-align: center; margin-bottom: .6em; }
.score-display b { font-size: 3.6em; font-weight: 900; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff8dc, #ffe27a 55%, #f7b733);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.score-display span { font-size: 1em; opacity: .85; padding-left: .3em; }
.score-display.done b { font-size: 2.8em; }
.score-range { width: 100%; height: 2.2em; -webkit-appearance: none; appearance: none; background: transparent; }
.score-range::-webkit-slider-runnable-track { height: .6em; border-radius: 1em;
  background: linear-gradient(90deg, #3db6ff, #22e07a); }
.score-range::-webkit-slider-thumb { -webkit-appearance: none; width: 1.9em; height: 1.9em; border-radius: 50%;
  background: #fff; border: .22em solid #12d35f; margin-top: -.65em;
  box-shadow: 0 .15em .5em rgba(0,40,20,.4); }
.score-quick { display: flex; justify-content: center; gap: 1em; margin: .6em 0 .4em; }
.score-quick .btn-ghost { min-width: 4.2em; }
.score-hint { text-align: center; font-size: .85em; opacity: .75; margin: .5em 0 1em; }
.j-done-presenter { font-size: 1.35em; font-weight: 800; margin-bottom: .35em; }
.j-done-presenter:empty { display: none; }
.j-done-program { font-size: 1.05em; font-weight: 600; opacity: .9; margin-bottom: .5em; }