/* ===== 手机端样式 v2（精致红金） ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #f6f2ed; color: #333; }
.wrap { max-width: 560px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }

/* 顶部横幅 */
.banner {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 130% 90% at 50% -30%, rgba(228, 68, 48, .55) 0%, rgba(150, 18, 12, 0) 60%),
    linear-gradient(160deg, #a01212 0%, #7a0a0a 55%, #560505 100%);
}
.banner::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #e8c47c 30%, #e8c47c 70%, transparent);
}
.banner img { width: 100%; display: block; }
.banner-txt { padding: 36px 22px 30px; text-align: center; position: relative; }
.banner-txt .t1 {
  font-size: 19px; font-weight: 700; line-height: 1.55; letter-spacing: 1px;
  background: linear-gradient(180deg, #fdf3d7, #f0cf8a 70%, #d4a95c);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.banner-txt .t2 { color: #ffe9c8; font-size: 12.5px; margin-top: 9px; opacity: .85; letter-spacing: 1px; }

/* 首页菜单 */
.menu { padding: 20px 16px; }
.menu-item {
  display: flex; align-items: center; gap: 15px;
  background: #fff; border-radius: 16px; padding: 20px 18px; margin-bottom: 14px;
  text-decoration: none; color: #333;
  box-shadow: 0 6px 22px rgba(120, 20, 10, .08);
  border: 1px solid #f1e7db;
  transition: transform .15s;
}
.menu-item:active { transform: scale(.98); }
.mi-ic {
  width: 46px; height: 46px; flex: none; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #b52a1c, #8e0e00); color: #f6d9a0;
}
.menu-item.m2 .mi-ic { background: linear-gradient(135deg, #c99334, #a8751a); color: #fff8e5; }
.menu-item.m3 .mi-ic { background: linear-gradient(135deg, #23955a, #17703f); color: #e2f7e9; }
.menu-item.m4 .mi-ic { background: linear-gradient(135deg, #d89622, #a76008); color: #fff8df; }
.menu-item.m5 .mi-ic { background: linear-gradient(135deg, #6c5ce7, #4939b5); color: #f1eeff; }
.mi-ic svg { width: 24px; height: 24px; }
.mi-tt { flex: 1; font-size: 17.5px; font-weight: 700; letter-spacing: .5px; }
.mi-tt span { display: block; font-size: 12px; font-weight: 400; color: #a39584; margin-top: 5px; letter-spacing: 0; }
.mi-ar { font-size: 26px; color: #d8cbbb; }

/* 卡片 */
.card {
  background: #fff; margin: 14px 14px 20px; border-radius: 18px; padding: 20px 18px 24px;
  box-shadow: 0 6px 24px rgba(120, 20, 10, .08);
  border: 1px solid #f1e7db;
}
.card-hd {
  display: flex; align-items: center; gap: 8px;
  font-size: 18.5px; font-weight: 700; color: #8e0e00;
  padding-bottom: 13px; border-bottom: 1px solid #f0e6dc; margin-bottom: 15px;
  letter-spacing: .5px;
}
.hd-ic { display: inline-flex; width: 21px; height: 21px; color: #c0392b; flex: none; }
.hd-ic svg { width: 100%; height: 100%; }
.card-hd .hd-r { margin-left: auto; font-size: 12.5px; font-weight: 400; color: #a39584; }
.tip-txt { font-size: 13px; color: #a39584; line-height: 1.8; margin-bottom: 14px; }

/* 表单 */
label { display: block; font-size: 14px; color: #4a3f33; margin: 15px 0 7px; font-weight: 600; }
label i { color: #c0392b; font-style: normal; }
input[type=text], input[type=number], input:not([type]), input[type=password] {
  width: 100%; padding: 12px 14px; border: 1px solid #e2d7c8; border-radius: 12px;
  font-size: 16px; outline: none; background: #fbf8f4;
}
input:focus { border-color: #c0392b; background: #fff; box-shadow: 0 0 0 3px rgba(192, 57, 43, .1); }
.btn {
  display: block; width: 100%; margin-top: 20px; padding: 14px; border: 0; border-radius: 13px;
  background: linear-gradient(135deg, #c0392b, #8e0e00); color: #fff;
  font-size: 17px; letter-spacing: 3px; cursor: pointer; text-align: center; text-decoration: none;
  box-shadow: 0 8px 20px rgba(142, 14, 0, .28);
  transition: transform .12s;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .6; }
.btn-line { background: #fff; color: #8e0e00; border: 1px solid #dcbfb8; margin-top: 12px; box-shadow: none; }
.msg { color: #c0392b; font-size: 13px; min-height: 18px; margin-top: 10px; }
.warn { background: #fff6e0; color: #a87b0a; font-size: 13px; padding: 10px 12px; border-radius: 10px; margin-bottom: 8px; line-height: 1.6; }

/* 演示模式 */
.demo-bar {
  background: linear-gradient(135deg, #fff6e0, #ffedc4); color: #8a6410;
  border: 1px solid #f0d9a0; font-size: 13px; padding: 10px 12px;
  border-radius: 10px; margin-bottom: 12px; line-height: 1.7;
}
.demo-or { display: flex; align-items: center; gap: 10px; color: #b9a98f; font-size: 12px; margin: 16px 0 0; letter-spacing: 2px; }
.demo-or:before, .demo-or:after { content: ""; flex: 1; height: 1px; background: #e8dcc8; }
.btn-demo { background: linear-gradient(135deg, #c99334, #a8751a); box-shadow: 0 8px 20px rgba(168, 117, 26, .28); margin-top: 14px; }

/* 提交成功浮层 */
.ok-overlay {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(30, 4, 4, .5); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  animation: okFade .25s ease both;
}
@keyframes okFade { from { opacity: 0; } }
.ok-card {
  background: #fff; border-radius: 20px; padding: 30px 46px; text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  animation: okPop .5s cubic-bezier(.2, 1.5, .4, 1) both;
}
@keyframes okPop { from { transform: scale(.5); opacity: 0; } }
.ok-tick {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 12px;
  background: #1e8f4e; color: #fff; font-size: 30px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(30, 143, 78, .35);
}
.ok-card b { display: block; font-size: 18px; color: #333; }
.ok-card span { display: block; font-size: 13px; color: #9b8b78; margin-top: 7px; }
.empty { text-align: center; color: #a39584; font-size: 17px; padding: 48px 0; line-height: 2; }
.empty small { font-size: 12px; }

/* 完成态 */
.done { text-align: center; padding: 14px 0 6px; }
.done .avatar {
  width: 86px; height: 86px; border-radius: 50%; object-fit: cover;
  border: 3px solid #edc87f; margin: 0 auto 4px; display: block;
  box-shadow: 0 6px 18px rgba(120, 20, 10, .18);
}
.done .avatar.gen-avatar { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; font-weight: 700; }
.done-tick { color: #1e8f4e; font-size: 21px; font-weight: 700; margin-top: 14px; letter-spacing: 1px; }
.done-name { font-size: 25px; font-weight: 700; margin-top: 10px; letter-spacing: 1px; }
.done-sub { color: #8a7d6d; font-size: 14px; margin-top: 7px; }
.done-time { color: #c4b8a8; font-size: 12px; margin-top: 8px; }

/* 选手列表 */
.c-list { margin-top: 6px; }
.c-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 10px; border-bottom: 1px solid #f3ece4;
  text-decoration: none; color: #333;
}
.c-item:last-child { border-bottom: 0; }
.c-no {
  flex: none; background: linear-gradient(135deg, #b52a1c, #8e0e00);
  color: #f6d9a0; font-size: 13px; font-weight: 700;
  border-radius: 9px; padding: 6px 9px; min-width: 46px; text-align: center;
  box-shadow: 0 3px 8px rgba(142, 14, 0, .2);
}
.c-item.done .c-no { background: #c3b39d; box-shadow: none; }
.c-nm { flex: 1; font-size: 16px; font-weight: 600; min-width: 0; }
.c-nm em { font-style: normal; font-weight: 400; font-size: 12px; color: #a39584; margin-left: 8px; }
.c-st { font-size: 12px; color: #1e8f4e; }
.c-item:not(.done) .c-st { color: #c4b8a8; }

/* 打分页 */
.player-box {
  display: flex; gap: 13px; align-items: center;
  background: linear-gradient(135deg, #fdf6ec, #f9efe0);
  border: 1px solid #f0e2cc; border-radius: 14px; padding: 14px; margin-bottom: 14px;
}
.p-no {
  flex: none; background: linear-gradient(135deg, #c0392b, #8e0e00); color: #f6d9a0;
  font-weight: 800; font-size: 18px; border-radius: 11px; padding: 10px 13px;
  box-shadow: 0 4px 10px rgba(142, 14, 0, .25);
}
.p-name { font-size: 18px; font-weight: 700; }
.p-name em { font-style: normal; font-weight: 400; font-size: 12px; color: #a39584; margin-left: 8px; }
.p-title { font-size: 13px; color: #8e0e00; margin-top: 4px; }
.dim { border: 1px solid #f0e6d8; border-radius: 14px; padding: 13px 14px; margin-top: 12px; background: #fffdf9; }
.dim-hd { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.dim-max { color: #c0392b; font-size: 12px; }
.dim-desc { font-size: 12px; color: #a39584; margin-top: 5px; line-height: 1.65; }
.dim-in { display: flex; gap: 12px; align-items: center; margin-top: 11px; }
.dim-in .num { flex: 1; width: auto; text-align: center; font-weight: 700; font-size: 20px; color: #8e0e00; padding: 14px; }
.total-bar {
  text-align: center; font-size: 15px; margin-top: 16px;
  background: linear-gradient(135deg, #fdf6ec, #f9efe0);
  border: 1px solid #f0e2cc; border-radius: 12px; padding: 12px;
}
.total-bar b { color: #c0392b; font-size: 27px; margin: 0 5px; }

/* 轮播进度条 */
.prog-bar { height: 6px; background: #f0e6dc; border-radius: 3px; margin-bottom: 8px; overflow: hidden; }
.prog-fill { height: 100%; background: linear-gradient(90deg, #c0392b, #e8c47c); border-radius: 3px; transition: width .4s ease; }
.prog-txt { text-align: center; font-size: 13px; color: #a39584; margin-bottom: 14px; letter-spacing: .5px; }

/* 投票页 */
.vote-rule {
  background: #fdf3e7; border: 1px solid #f4dfc0; color: #a86008;
  font-size: 13px; padding: 11px 14px; border-radius: 12px; margin-bottom: 8px; line-height: 1.65;
}
.vote-item { position: relative; cursor: pointer; border-radius: 12px; transition: background .15s; }
.vote-item:has(input:checked) { background: #fdf6ec; }
.vote-item input { position: absolute; opacity: 0; }
.vote-item .c-ck {
  flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #ddd0bf;
  color: transparent; font-size: 14px; display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.vote-item input:checked ~ .c-ck { background: #c0392b; border-color: #c0392b; color: #fff; }
.vote-fix { position: sticky; bottom: 0; background: linear-gradient(transparent, #fff 30%); padding: 10px 0 14px; }

.foot { text-align: center; color: #bdae9c; font-size: 12px; padding: 12px 0 32px; margin-top: auto; letter-spacing: 1px; }

/* 抽奖 */
.lottery-ticket{background:linear-gradient(135deg,#fff8e7,#f8e3b5);border:1px solid #e8c47c;border-radius:16px;padding:20px;text-align:center;position:relative;overflow:hidden}.lottery-ticket:after{content:"";position:absolute;left:-8px;right:-8px;top:50%;border-top:1px dashed rgba(168,96,8,.25)}.ticket-ok{width:42px;height:42px;border-radius:50%;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;background:#1e8f4e;color:#fff;font-size:22px;position:relative;z-index:1}.lottery-ticket b,.lottery-ticket span{display:block;position:relative;z-index:1}.lottery-ticket b{font-size:21px;color:#8e0e00}.lottery-ticket span{font-size:13px;color:#9b7e55;margin-top:7px}.lottery-mobile-state{text-align:center;padding:18px 10px;color:#9b8b78}.lottery-mobile-state.rolling{color:#c0392b;font-weight:700;animation:mobileBreath 1.2s infinite}.lottery-gift{width:70px;height:70px;margin:0 auto;color:#c99334}.lottery-gift svg{width:100%;height:100%}.my-prize{font-size:24px;font-weight:800;color:#8e0e00;margin:12px 0}.prize-list{margin-top:20px;border-top:1px solid #f0e6dc;padding-top:14px}.prize-list h3{font-size:14px;color:#8e0e00;margin-bottom:8px}.prize-row{display:flex;justify-content:space-between;padding:10px 2px;border-bottom:1px solid #f5ede5;font-size:14px}.prize-row em{font-style:normal;color:#b19f88}@keyframes mobileBreath{50%{opacity:.45}}

/* 答题 */
.quiz-ready{text-align:center;padding:42px 0}.quiz-ready-icon{width:78px;height:78px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 15px;background:linear-gradient(135deg,#c99334,#a8751a);color:#fff;font-size:42px;font-weight:800;box-shadow:0 10px 25px rgba(168,117,26,.25)}.quiz-ready b,.quiz-ready span{display:block}.quiz-ready b{font-size:21px;color:#8e0e00}.quiz-ready span{font-size:13px;color:#a39584;margin-top:8px}.m-question{font-size:20px;line-height:1.55;font-weight:700;color:#4a3326;padding:5px 2px 16px}.m-options{display:grid;gap:10px}.m-option{display:flex;align-items:center;gap:12px;margin:0;padding:13px;border:1px solid #eadfce;border-radius:13px;background:#fffdf9;font-weight:400}.m-option input{position:absolute;opacity:0}.m-option>b{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f0e5d7;color:#8e0e00;flex:none}.m-option>span{font-size:15px;line-height:1.45}.m-option:has(input:checked){border-color:#c0392b;background:#fdf3ef;box-shadow:0 0 0 2px rgba(192,57,43,.08)}.m-option:has(input:checked)>b{background:#c0392b;color:#fff}.my-answer,.correct-answer{margin:14px auto;padding:12px;border-radius:11px;background:#f9f1e7;color:#7b6853;max-width:260px}.my-answer b,.correct-answer b{font-size:22px;color:#c0392b;margin-left:8px}.correct-answer{background:#eaf7ef;color:#36704d}.correct-answer b{color:#1e8f4e}