/* =========================================================
   保密·密码知识答题 H5 —— 复刻 eqxiu 模板《夏日送清凉 护密润初心》
   设计基准：320px 宽（1rem = 100 设计像素）
   ========================================================= */

/* hidden 属性必须优先于其他 display 规则（如 .modal-mask{display:flex}），
   否则弹窗遮罩即使带 hidden 也会覆盖整屏拦截点击 */
[hidden] { display: none !important; }

/* ---------- 字体（4 套模板子集字体，本地加载） ---------- */
@font-face {
  font-family: 'Master-BKXingjianghu';
  src: url('../fonts/Master-BKXingjianghu.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'AlibabaPuHuiTi-Heavy';
  src: url('../fonts/AlibabaPuHuiTi-2-105-Heavy.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'SourceHanSansCN';
  src: url('../fonts/SourceHanSansCN_Normal.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'NomNaTong';
  src: url('../fonts/NomNaTong-Regular.woff2') format('woff2');
  font-display: swap;
}

/* ---------- 基础 ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: calc(min(100vw, 480px) / 3.2); }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: 'SourceHanSansCN', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: #9F1400;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}
#app {
  position: fixed; top: 0; left: 0; width: 100%; max-width: 480px; margin: 0 auto;
  height: 100%; overflow: hidden; background: #9F1400;
}

/* ---------- 页面骨架 ---------- */
.page { position: absolute; inset: 0; display: none; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.page.active { display: block; }
.page-inner { position: relative; z-index: 3; min-height: 100%; display: flex; flex-direction: column; align-items: center; }

.bg { position: absolute; inset: 0; z-index: 0; background: url('../assets/bg.png') center top / cover no-repeat; }
.bg-result { background-image: url('../assets/bg_result.png'); }

/* ---------- 装饰 ---------- */
.deco { position: absolute; z-index: 2; pointer-events: none; }
.dove { background: url('../assets/deco_circle.png') center / contain no-repeat; opacity: 0.95; }
.dove.tr { width: 0.78rem; height: 0.78rem; top: calc(env(safe-area-inset-top, 0px) + 0.06rem); right: 0.02rem; transform: rotate(8deg); }
.buildings { background: url('../assets/deco_corner.png') center / contain no-repeat; opacity: 0.9; }
.buildings.tl { width: 1.7rem; height: 1.4rem; top: -0.28rem; left: -0.55rem; }
.silk { left: 0; bottom: 0; width: 100%; height: 1.1rem; background: url('../assets/silk.png') center / cover no-repeat; transform: rotateX(180deg); opacity: 0.96; }

.share-hint {
  position: absolute; z-index: 4; top: calc(env(safe-area-inset-top, 0px) + 0.06rem);
  left: 0; right: 0; text-align: center;
  font-size: 0.11rem; color: rgba(253, 220, 148, 0.95); letter-spacing: 0.05em;
}

/* ---------- 艺术字标题（夏日送清凉 / 护密润初心） ---------- */
.title-block { position: relative; text-align: center; }
.title-line { display: flex; align-items: flex-end; justify-content: center; white-space: nowrap; }
.title-line + .title-line { margin-top: 0.03rem; }

.word-heavy {
  font-family: 'AlibabaPuHuiTi-Heavy';
  font-size: 0.4rem; line-height: 1.1; letter-spacing: 0.1em;
  color: transparent;
  background: linear-gradient(180deg, rgba(255, 252, 173, 1), rgba(255, 185, 88, 1));
  -webkit-background-clip: text; background-clip: text;
}
.word-heavy + .wc { margin-left: 0.02rem; }

.wc { position: relative; display: inline-block; width: 0.62rem; height: 0.66rem; text-align: center; flex: none; }
.wc + .wc, .wc + .word-heavy { margin-left: 0.02rem; }
.wc b {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  font-family: 'Master-BKXingjianghu'; font-weight: normal;
  font-size: 0.56rem; line-height: 0.66rem; display: block;
}
.wc-red { color: #a10002; transform: translate(0.03rem, 0.04rem); }
.wc-gold {
  color: transparent;
  background: linear-gradient(180deg, rgba(255, 252, 173, 1), rgba(255, 185, 88, 1));
  -webkit-background-clip: text; background-clip: text;
  text-shadow: 0 0 0.04rem rgba(160, 0, 0, 0.35);
}

/* 抽奖页小号标题 */
.title-small .word-heavy { font-size: 0.3rem; }
.title-small .wc { width: 0.46rem; height: 0.5rem; }
.title-small .wc b { font-size: 0.42rem; line-height: 0.5rem; }
.title-small .title-line + .title-line { margin-top: 0.02rem; }

/* ---------- 封面 ---------- */
.cover-inner { justify-content: center; padding-top: 7%; }
.cover-slogan {
  margin-top: 0.08rem; font-family: 'NomNaTong';
  font-size: 0.12rem; color: rgba(253, 220, 148, 1);
  letter-spacing: 0.22em; text-indent: 0.22em;
}
.cover-contest {
  margin-top: 0.01rem; font-family: 'SourceHanSansCN'; font-weight: bold;
  font-size: 0.14rem; color: rgba(253, 220, 148, 1);
  letter-spacing: 0.13em; text-indent: 0.13em;
}
.seal { margin-top: 0.08rem; width: 1.2rem; height: 1.2rem; }
.seal img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 0.02rem solid rgba(253, 220, 148, 0.9); }

.btn-main {
  position: relative; display: block; width: 1.94rem; height: 0.57rem;
  margin-top: 0.12rem; padding: 0; border: 0; outline: none; cursor: pointer;
  background: url('../assets/btn_join.png') center / 100% 100% no-repeat;
}
.btn-main span {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  font-family: 'NomNaTong'; font-weight: bold; font-size: 0.15rem;
  color: #fff; letter-spacing: 0.12em; text-indent: 0.12em;
  text-align: center; line-height: 1;
  text-shadow: 0 0.01rem 0.03rem rgba(120, 0, 0, 0.9);
}
.btn-main:active { transform: scale(0.96); }

.host {
  margin-top: 0.09rem; font-family: 'SourceHanSansCN'; font-weight: bold;
  font-size: 0.14rem; color: rgba(253, 220, 148, 1); letter-spacing: 0.12em;
}
.cover-rules {
  margin-top: 0.05rem; font-size: 0.12rem; color: rgba(253, 220, 148, 0.95);
  letter-spacing: 0.08em; text-decoration: underline; cursor: pointer;
}

/* ---------- 面板页（活动说明 / 活动规则） ---------- */
.panel-inner { justify-content: center; padding: 0.08rem 0.1rem 0.04rem; }
.panel {
  position: relative; width: 2.76rem; padding: 0.16rem 0.16rem 0.12rem;
  background: rgba(255, 255, 255, 0.97);
  border: 2px solid rgba(255, 247, 206, 1); border-radius: 0.1rem;
  box-shadow: 0 0.02rem 0.08rem rgba(120, 0, 0, 0.3);
}
.panel-title {
  font-family: 'SourceHanSansCN'; font-weight: bold;
  font-size: 0.24rem; color: rgb(201, 23, 13); letter-spacing: 0.04em;
}
.panel-title .arrows { color: rgba(255, 185, 88, 1); font-weight: normal; margin-left: 0.02rem; letter-spacing: 0; }
.panel-body { margin-top: 0.08rem; font-size: 0.13rem; color: rgb(201, 23, 13); line-height: 1.6; }
.panel .btn-main { margin: 0.14rem auto 0; }

.intro-body .i-label { margin: 0.02rem 0 0; font-size: 0.14rem; font-weight: bold; }
.intro-body .i-val { margin: 0 0 0.1rem; }
.rules-body p { margin: 0 0 0.06rem; text-align: justify; }

/* 报名表单 */
.form { margin-top: 0.1rem; }
.form-row { display: flex; align-items: center; margin-bottom: 0.1rem; }
.form-label { flex: none; width: 0.52rem; text-align: right; margin-right: 0.08rem;
  font-size: 0.15rem; color: rgb(201, 23, 13); font-weight: bold; }
.form-row input {
  flex: 1; min-width: 0; height: 0.4rem; padding: 0 0.12rem;
  font-size: 0.16rem; color: #5a0a0a;
  border: 1px solid rgba(255, 185, 88, 0.85); border-radius: 0.06rem;
  background: #fffdf4; outline: none;
}
.form-row input:focus { border-color: rgb(201, 23, 13); }

/* ---------- 答题页 ---------- */
.quiz-inner { justify-content: flex-start; padding: 0.06rem 0.05rem 0; }
.quiz-top {
  width: 3.1rem; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between;
}
.q-number { font-family: 'SourceHanSansCN'; font-weight: bold; font-size: 0.16rem; color: rgba(253, 220, 148, 1); letter-spacing: 0.04em; }
.q-timer { width: 0.5rem; height: 0.5rem; }
.timer-circle {
  width: 100%; height: 100%; border-radius: 50%;
  border: 0.02rem solid rgba(253, 220, 148, 1);
  background: rgba(160, 0, 0, 0.9);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0.04rem rgba(0, 0, 0, 0.35);
}
.timer-circle span { font-family: 'SourceHanSansCN'; font-weight: bold; font-size: 0.18rem; color: #fff; }
.q-timer.warn .timer-circle { border-color: #ffd54f; animation: pulse 0.7s infinite alternate; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.1); } }

.panel-quiz { width: 3.1rem; margin: 0.07rem auto 0; padding: 0.12rem 0.14rem 0.1rem; flex: none; }
.quiz-tag {
  display: inline-block; padding: 0.02rem 0.07rem;
  font-size: 0.12rem; color: #fff; letter-spacing: 0.04em;
  background: linear-gradient(180deg, rgba(255, 185, 88, 1), rgb(201, 23, 13));
  border-radius: 0.03rem;
}
.quiz-question { margin-top: 0.09rem; font-size: 0.15rem; font-weight: bold; color: #5a0a0a; line-height: 1.5; }
.quiz-options { margin-top: 0.1rem; }

.opt {
  display: flex; align-items: center; margin-bottom: 0.09rem; padding: 0.08rem 0.1rem;
  border: 1px solid #f0d9a8; border-radius: 0.06rem; background: #fffdf4;
  cursor: pointer; transition: all 0.15s;
}
.opt-key {
  flex: none; width: 0.32rem; height: 0.32rem; margin-right: 0.09rem;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(255, 220, 150, 1), rgba(255, 180, 80, 1));
  color: #a10002; font-weight: bold; font-size: 0.15rem;
}
.opt.multi .opt-key { border-radius: 0.05rem; }
.opt-text { font-size: 0.14rem; color: #6b1a1a; line-height: 1.4; }
.opt.selected { border-color: rgb(201, 23, 13); background: #fff2de; }
.opt.selected .opt-key { background: linear-gradient(180deg, rgb(201, 23, 13), #a10002); color: #fff; }
.opt.correct { border-color: #1a9c3e; background: #e9f9ec; }
.opt.correct .opt-key { background: #1a9c3e; color: #fff; }
.opt.wrong { border-color: #d32f2f; background: #fdecec; }
.opt.disabled { pointer-events: none; opacity: 0.9; }

.multi-hint { margin-top: 0.06rem; font-size: 0.11rem; color: rgb(201, 23, 13); opacity: 0.85; }

.btn-submit {
  display: block; width: 1.4rem; height: 0.42rem; margin: 0.1rem auto 0;
  border: 0; border-radius: 0.21rem; cursor: pointer;
  background: linear-gradient(180deg, rgb(201, 23, 13), #a10002);
  color: #fff; font-family: 'SourceHanSansCN'; font-weight: bold; font-size: 0.14rem;
  letter-spacing: 0.08em;
}
.btn-submit:active { transform: scale(0.96); }

/* ---------- 结果页 ---------- */
.result-inner { justify-content: center; padding: 0.1rem 0.12rem 0.05rem; }
.result-head { width: 3.0rem; display: flex; align-items: center; }
.avatar {
  flex: none; width: 0.66rem; height: 0.66rem; border-radius: 50%; overflow: hidden;
  border: 0.02rem solid rgba(253, 220, 148, 1); background: #fff;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-line { margin-left: 0.12rem; display: flex; flex-direction: column; }
.user-name { font-size: 0.15rem; color: rgba(253, 220, 148, 1); font-weight: bold; }
.user-note { margin-top: 0.02rem; font-size: 0.12rem; color: rgba(253, 220, 148, 0.95); }

.score-box {
  width: 2.1rem; margin-top: 0.13rem; padding: 0.08rem 0 0.1rem; text-align: center;
  border-radius: 0.08rem; border: 1px solid rgba(253, 220, 148, 0.55);
  background: rgba(255, 255, 255, 0.1);
}
.score-label { font-size: 0.13rem; color: rgba(253, 220, 148, 1); }
.score-value { font-size: 0.42rem; line-height: 1.25; font-family: 'AlibabaPuHuiTi-Heavy'; color: #ffe9b0; }
.score-full { font-size: 0.1rem; color: rgba(253, 220, 148, 0.8); }

.remain-box { margin-top: 0.07rem; display: flex; align-items: baseline; justify-content: center; }
.remain-label { font-size: 0.14rem; color: rgba(253, 220, 148, 1); margin-right: 0.08rem; }
.remain-value { font-size: 0.18rem; color: #ffe9b0; font-weight: bold; }

.result-msg {
  margin-top: 0.1rem; text-align: center; font-size: 0.14rem; line-height: 1.55;
  color: rgba(253, 220, 148, 1); font-weight: bold; letter-spacing: 0.05em;
}
.result-msg b { font-size: 0.17rem; color: #ffe9b0; }
.back-home {
  display: block; margin-top: 0.08rem; font-size: 0.13rem; color: rgba(253, 220, 148, 0.95);
  letter-spacing: 0.06em; text-decoration: underline; cursor: pointer;
}

/* ---------- 抽奖转盘页 ---------- */
.lottery-inner { justify-content: flex-start; padding: 0.03rem 0.1rem 0; }
.lottery-contest {
  margin-top: 0.02rem; font-family: 'SourceHanSansCN'; font-weight: bold;
  font-size: 0.14rem; color: rgba(253, 220, 148, 1); letter-spacing: 0.13em; text-indent: 0.13em;
}
.wheel-wrap { position: relative; width: 2.55rem; height: 2.55rem; margin-top: 0.1rem; }
.wheel {
  width: 100%; height: 100%; border-radius: 50%; position: relative; overflow: hidden;
  border: 0.06rem solid rgba(253, 220, 148, 1);
  box-shadow: 0 0 0.1rem rgba(120, 0, 0, 0.5);
  background: conic-gradient(
    from 0deg,
    #c62828 0deg 60deg, #e8b43c 60deg 120deg,
    #c62828 120deg 180deg, #e8b43c 180deg 240deg,
    #c62828 240deg 300deg, #e8b43c 300deg 360deg
  );
  transition: transform 4.6s cubic-bezier(0.15, 0.55, 0.1, 1);
  will-change: transform;
}
.seg-line {
  position: absolute; left: 50%; top: 50%; width: 0; height: 50%;
  border-left: 1px solid rgba(255, 255, 255, 0.55);
  transform-origin: 0 0;
}
.seg-label {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(var(--deg)) translateY(-0.88rem) rotate(calc(-1 * var(--deg)));
  font-size: 0.105rem; font-weight: bold; color: #fff;
  text-align: center; line-height: 1.25; white-space: nowrap;
  text-shadow: 0 0.01rem 0.02rem rgba(90, 0, 0, 0.8);
}
.wheel-hub {
  position: absolute; left: 50%; top: 50%; width: 0.46rem; height: 0.46rem;
  margin: -0.23rem 0 0 -0.23rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, rgba(255, 185, 88, 1) 60%, #d99a2b);
  border: 0.02rem solid rgba(253, 220, 148, 1);
  box-shadow: 0 0.01rem 0.03rem rgba(90, 0, 0, 0.6);
  display: flex; align-items: center; justify-content: center;
  font-family: 'NomNaTong'; font-size: 0.14rem; color: #a10002; font-weight: bold;
  z-index: 3; pointer-events: none;
}
.wheel-pointer {
  position: absolute; z-index: 4; left: 50%; top: -0.13rem; transform: translateX(-50%);
  width: 0; height: 0; pointer-events: none;
  border-left: 0.1rem solid transparent; border-right: 0.1rem solid transparent;
  border-top: 0.16rem solid #ffe9b0;
  filter: drop-shadow(0 0.02rem 0.02rem rgba(90, 0, 0, 0.6));
}
.wheel-pointer::after {
  content: ''; position: absolute; left: -0.075rem; top: -0.145rem;
  border-left: 0.075rem solid transparent; border-right: 0.075rem solid transparent;
  border-top: 0.115rem solid #a10002;
}
.lottery-inner .btn-main { margin-top: 0.14rem; }
.redeem-note {
  margin-top: 0.08rem; text-align: center; font-size: 0.13rem; font-weight: bold;
  color: rgba(253, 220, 148, 1); letter-spacing: 0.08em;
}

/* ---------- 弹窗 ---------- */
.modal-mask {
  position: fixed; inset: 0; z-index: 100; max-width: 480px; margin: 0 auto;
  background: rgba(70, 0, 0, 0.6);
  display: flex; align-items: center; justify-content: center;
}
.modal {
  width: 2.7rem; padding: 0.2rem 0.15rem 0.15rem; text-align: center;
  background: #fff; border-radius: 0.12rem; border: 2px solid rgba(253, 220, 148, 1);
  box-shadow: 0 0.05rem 0.15rem rgba(60, 0, 0, 0.4);
}
.modal-title { font-family: 'SourceHanSansCN'; font-weight: bold; font-size: 0.2rem; color: rgb(201, 23, 13); }
.modal-prize { margin-top: 0.1rem; font-size: 0.22rem; color: #a10002; font-weight: bold; }
.modal-note { margin-top: 0.06rem; font-size: 0.12rem; color: #8a6a4a; }
.modal .btn-main { margin: 0.14rem auto 0; }