/* 仁爱月子中心 · 世界杯竞猜 H5 样式 */
:root{
  --red:#c8161d;
  --red-d:#a01016;
  --gold:#e9b949;
  --bg:#fff5f5;
  --text:#2b2b2b;
  --muted:#8a8a8a;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--text);
  max-width:480px;margin:0 auto;min-height:100vh;
  position:relative;overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

/* 顶部品牌条 */
.topbar{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;background:#fff;position:sticky;top:0;z-index:20;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.topbar img{height:34px;}
.topbar .name{font-weight:700;font-size:16px;color:var(--red);}

/* 主视觉 */
.hero{
  background:linear-gradient(135deg,var(--red),var(--red-d));
  color:#fff;padding:30px 20px 26px;text-align:center;position:relative;
}
.hero h1{font-size:26px;margin:0 0 8px;letter-spacing:1px;text-shadow:0 2px 8px rgba(0,0,0,.2);}
.hero p{font-size:14px;margin:0;opacity:.95;}
.hero .cup{font-size:46px;margin-bottom:6px;}

/* 轮播门店照 */
.gallery{display:flex;overflow-x:auto;gap:10px;padding:14px 16px;scroll-snap-type:x mandatory;}
.gallery::-webkit-scrollbar{display:none;}
.gallery img{
  width:78%;flex:0 0 auto;border-radius:14px;scroll-snap-align:center;
  height:200px;object-fit:cover;box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.gallery .placeholder{
  width:78%;flex:0 0 auto;height:200px;border-radius:14px;
  background:linear-gradient(135deg,#ffd6d6,#ffeaea);
  display:flex;align-items:center;justify-content:center;color:var(--red);font-size:14px;
}

/* 竖向宣传海报 */
.posters{display:flex;flex-direction:column;gap:12px;padding:4px 16px 8px;}
.posters img{width:100%;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.1);}

/* 通用区块 */
.section{padding:18px 16px;}
.section-title{
  font-size:18px;font-weight:700;margin:0 0 12px;display:flex;align-items:center;gap:8px;
}
.section-title::before{content:"";width:5px;height:18px;background:var(--red);border-radius:3px;}
.card{background:#fff;border-radius:14px;padding:16px;box-shadow:0 4px 16px rgba(0,0,0,.06);}
.intro-text{font-size:14px;line-height:1.8;color:#555;white-space:pre-line;}

/* 奖项 */
.prize{margin-bottom:12px;border-radius:14px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.06);}
.prize .head{padding:10px 14px;color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px;}
.prize.p1 .head{background:linear-gradient(90deg,#e9b949,#d99a1e);}
.prize.p2 .head{background:linear-gradient(90deg,#b0b7c3,#8d94a3);}
.prize.p3 .head{background:linear-gradient(90deg,#d39064,#b9744a);}
.prize .body{background:#fff;padding:12px 14px;font-size:13.5px;line-height:1.7;color:#555;}

/* 竞猜表单 */
.guess-box{background:#fff;border-radius:14px;box-shadow:0 4px 16px rgba(0,0,0,.06);padding:16px;}
.pick-row{margin-bottom:14px;}
.pick-row label{display:block;font-size:14px;font-weight:600;margin-bottom:8px;color:#333;}
.pick-row .tag{display:inline-block;background:var(--red);color:#fff;border-radius:6px;padding:1px 8px;font-size:12px;margin-right:6px;}
select,input[type=text],input[type=tel]{
  width:100%;padding:12px;border:1px solid #e3e3e3;border-radius:10px;font-size:15px;
  background:#fafafa;color:#222;appearance:none;
}
select:focus,input:focus{outline:none;border-color:var(--red);background:#fff;}
.hint{font-size:12px;color:var(--muted);margin-top:4px;}

/* 每日赛程 */
.match{
  display:flex;align-items:center;justify-content:space-between;
  background:#fff;border-radius:12px;padding:12px 14px;margin-bottom:10px;
  box-shadow:0 3px 12px rgba(0,0,0,.05);
}
.match .stage{font-size:11px;color:var(--muted);}
.match .time{font-size:11px;color:var(--muted);}
.match .teams{display:flex;align-items:center;gap:6px;flex:1;justify-content:center;}
.team-pick{
  flex:1;text-align:center;border:1.5px solid #eee;border-radius:10px;padding:8px 4px;
  font-size:13px;cursor:pointer;transition:.15s;background:#fff;
}
.team-pick .flag{font-size:22px;}
.team-pick.active{border-color:var(--red);background:#fff0f0;color:var(--red);font-weight:700;}
.vs{font-size:12px;color:#bbb;padding:0 4px;}
.match-result{font-size:12px;font-weight:700;}
.match-result.win{color:#389e0d;}
.match-result.lose{color:#cf1322;}

/* 按钮 */
.btn{
  display:block;width:100%;text-align:center;padding:15px;border:0;border-radius:12px;
  background:linear-gradient(90deg,var(--red),var(--red-d));color:#fff;font-size:17px;font-weight:700;
  box-shadow:0 6px 18px rgba(200,22,29,.3);cursor:pointer;
}
.btn:active{transform:scale(.98);}
.btn-gold{background:linear-gradient(90deg,#e9b949,#d99a1e);box-shadow:0 6px 18px rgba(217,154,30,.35);}

/* 领奖说明 */
.claim{background:#fff8e6;border:1px dashed var(--gold);border-radius:14px;padding:14px 16px;}
.claim h3{margin:0 0 8px;color:#b8860b;font-size:15px;}
.claim p{margin:0;font-size:13px;line-height:1.9;color:#7a6320;white-space:pre-line;}

/* 底部联系 */
.footer{padding:24px 16px 40px;text-align:center;color:var(--muted);font-size:12px;line-height:1.8;}
.footer .phone{font-size:18px;color:var(--red);font-weight:700;margin:6px 0;}

/* 浮动报名按钮 */
.sticky-cta{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);
  box-shadow:0 -4px 18px rgba(0,0,0,.08);z-index:30;}

/* 海报页 */
.poster-wrap{padding:16px;text-align:center;}
.poster-canvas-box{display:inline-block;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.18);}
#posterImg{width:100%;border-radius:14px;}
.poster-tip{font-size:13px;color:var(--muted);margin:14px 0;}
.result-banner{border-radius:14px;padding:20px;color:#fff;margin-bottom:16px;text-align:center;}
.result-banner.win{background:linear-gradient(135deg,#e9b949,#d99a1e);}
.result-banner.pending{background:linear-gradient(135deg,var(--red),var(--red-d));}
.result-banner h2{margin:0 0 6px;font-size:22px;}
.result-banner p{margin:0;font-size:14px;opacity:.95;}

/* 弹窗 */
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:100;display:none;align-items:center;justify-content:center;padding:24px;}
.modal-mask.show{display:flex;}
.modal{background:#fff;border-radius:14px;padding:22px;max-width:340px;text-align:center;}
.modal h3{margin:0 0 10px;color:var(--red);}
.modal p{font-size:14px;color:#555;line-height:1.7;}
.modal .btn{margin-top:16px;}
.divider{height:8px;background:#fbe9e9;}