/* ===== 苏超竞猜赢福利 · 移动端 H5 V2 ===== */
:root{
  --green-deep:#2c4e06;
  --green:#3a6a0a;
  --green-bright:#8be000;
  --blue:#1f6dff;
  --night:#0a0e2f;
  --gold:#ffd24a;
  --card-bg:#ffffff;
  --text:#333;
  --text-sub:#888;
  --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--green-deep);
  color:var(--text);
}
.page{
  max-width:480px;margin:0 auto;min-height:100vh;
  background:
    url(../assets/bg_full.jpg) no-repeat top center / 100% auto,
    linear-gradient(180deg, #1e3804 0%, #2c4e06 15%, #2c4e06 85%, #1a2f03 100%);
  padding-bottom:30px;
}

/* ===== 头图 ===== */
.hero{position:relative;height:118vw;max-height:566px;overflow:hidden;background:url(../assets/hero.jpg) no-repeat center/cover}
.rule-btn{
  position:absolute;top:12px;right:0;z-index:5;
  background:rgba(0,0,0,.45);color:#fff;border:1px solid rgba(255,255,255,.5);border-right:none;
  border-radius:16px 0 0 16px;padding:5px 12px;font-size:.78rem;
}
.hero-title{position:absolute;left:0;right:0;top:7%;text-align:center;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.hero-title h1{
  font-size:1.9rem;letter-spacing:2px;font-weight:900;
  background:linear-gradient(180deg,#fff,#ffe98a);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));
}
.hero-title p{margin-top:8px;font-size:.85rem;line-height:1.5;opacity:.95}
.hero-title .hero-sub2{margin-top:4px;font-size:.72rem;opacity:.8;line-height:1.4}
.hero-title .hi-gold{color:#ffd24a;font-size:1.1rem;font-weight:900}
.see-detail{
  margin-top:10px;border:1px solid rgba(255,255,255,.7);background:rgba(0,0,0,.28);
  color:#fff;border-radius:16px;padding:5px 16px;font-size:.78rem;
}

/* ===== 通用卡片 ===== */
.card{
  background:var(--card-bg);border-radius:var(--radius);
  margin:0 12px 14px;padding:14px;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}

/* ===== 用户信息 ===== */
.user-card{display:flex;align-items:center;gap:10px;margin-top:-30px;position:relative;z-index:2}
.avatar{width:48px;height:48px;border-radius:50%;border:2px solid var(--green-bright);background:#eee;object-fit:cover}
.user-meta{flex:1;min-width:0}
.nickname{font-weight:700;font-size:1rem}
.streak{font-size:.78rem;color:var(--text-sub);margin-top:3px}
.streak b{color:#f60;font-size:.95rem}
.btn-mini{
  border:none;border-radius:16px;padding:7px 14px;font-size:.8rem;font-weight:700;color:#7a4b00;
}
.btn-mini.gold{background:linear-gradient(135deg,#ffe98a,#ffc53d);box-shadow:0 2px 6px rgba(255,180,0,.4)}

/* ===== 页签 ===== */
.seg-tabs{display:flex;background:#f2f4f0;border-radius:20px;padding:3px;margin-bottom:12px}
.seg-tabs button{
  flex:1;border:none;background:transparent;padding:8px 0;border-radius:17px;
  font-size:.88rem;color:var(--text-sub);
}
.seg-tabs button.active{background:var(--green);color:#fff;font-weight:700}

/* ===== 比赛卡片 ===== */
.match-item{
  border:1px solid #e8ede3;border-radius:12px;padding:10px 12px;margin-bottom:10px;
  background:linear-gradient(180deg,#fbfff5,#fff);
}
.match-top{display:flex;justify-content:space-between;font-size:.72rem;color:var(--text-sub);margin-bottom:8px}
.match-status{color:var(--green);font-weight:700}
.match-status.closed{color:#c00}
.match-status.done{color:#999}
.match-main{display:flex;align-items:flex-end;justify-content:space-between;padding:4px 0}
.team{flex:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.team-logo{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;font-weight:900;color:#fff;
  overflow:hidden;object-fit:cover;
}
.team-logo img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.team-name{font-size:1.25rem;font-weight:700;line-height:1}
.vs-box{width:80px;text-align:center;padding-bottom:2px}
.vs{font-size:1.05rem;font-weight:900;color:#bbb;font-style:italic}
.score{font-size:1.25rem;font-weight:900;color:var(--text);line-height:1}
.match-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:8px}
.my-pick{font-size:.76rem;color:var(--text-sub);flex:1}
.my-pick b{color:var(--blue)}
.pick-result{font-size:.76rem;font-weight:800;padding:2px 8px;border-radius:8px}
.pick-result.hit{color:#e33;background:#ffefef}
.pick-result.miss{color:#888;background:#f2f2f2}
.guess-btn{
  border:none;border-radius:16px;padding:7px 18px;font-size:.82rem;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#4d8f10,#7ac91e);box-shadow:0 2px 6px rgba(80,150,20,.35);
}
.guess-btn.modify{background:linear-gradient(135deg,#1f6dff,#5a9bff);box-shadow:0 2px 6px rgba(31,109,255,.3)}
.guess-btn:disabled{background:#ccc;box-shadow:none}
.empty-tip{text-align:center;color:var(--text-sub);font-size:.85rem;padding:26px 0}

/* ===== 邀请按钮 ===== */
.invite-btn{
  display:block;width:calc(100% - 24px);margin:0 12px 14px;border:none;
  padding:14px 0;border-radius:26px;font-size:1.05rem;font-weight:900;letter-spacing:2px;color:#5b3a00;
  background:linear-gradient(135deg,#ffe98a,#ffb62e);
  box-shadow:0 4px 14px rgba(255,170,0,.45), inset 0 -3px 0 rgba(180,110,0,.25);
}

/* ===== 中奖轮播 ===== */
.win-marquee{
  display:flex;align-items:center;gap:8px;margin:0 12px 14px;padding:8px 14px;
  background:rgba(0,0,0,.35);border-radius:20px;color:#ffe98a;font-size:.78rem;
}
.marquee-box{flex:1;height:20px;overflow:hidden}
.marquee-box ul{animation:scrollUp 45s linear infinite}
.marquee-box li{height:20px;line-height:20px;list-style:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes scrollUp{from{transform:translateY(0)}to{transform:translateY(-100%)}}

/* ===== 九宫格抽奖 ===== */
.lottery-card{background:linear-gradient(160deg,#ff5b4d,#e6252f 60%,#c40f2e);padding:16px}
.lottery-head{display:flex;flex-direction:column;align-items:center;margin-bottom:12px;color:#fff}
.lot-title{font-size:1.25rem;font-weight:900;letter-spacing:4px;text-shadow:0 2px 4px rgba(120,0,0,.5)}
.lot-tip{font-size:.72rem;opacity:.9;margin-top:4px}
.grid9{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.g-cell{
  background:#fff7ec;border-radius:10px;aspect-ratio:1;padding:6px 2px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transition:all .1s;
}
.g-cell .g-emoji{font-size:1.5rem}
.g-cell .g-name{font-size:.68rem;color:#a04a00;font-weight:700;text-align:center;line-height:1.2}
.g-cell.lit{background:#ffd24a;box-shadow:0 0 12px #ffe98a, inset 0 0 8px #fff;transform:scale(1.04)}
.g-center{
  background:linear-gradient(160deg,#ffd24a,#ff9d00);border:none;border-radius:10px;aspect-ratio:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  box-shadow:inset 0 -4px 0 rgba(160,80,0,.35), 0 3px 8px rgba(120,0,0,.35);
}
.g-center .go{font-size:1.3rem;font-weight:900;color:#8a2b00;letter-spacing:2px}
.g-center .chance{font-size:.68rem;color:#8a2b00}
.g-center:disabled{filter:grayscale(.5);opacity:.8}

/* ===== 页面中部悬浮Tab ===== */
.sticky-nav-wrap{
  position:sticky;top:0;z-index:30;margin:0 12px;
}
.func-tabs{
  display:flex;background:#fff;border-radius:14px 14px 0 0;
  box-shadow:0 -2px 10px rgba(0,0,0,.08);
  overflow:hidden;
}
.func-tabs button{
  flex:1;border:none;background:none;padding:13px 0;
  font-size:.88rem;font-weight:700;color:var(--text-sub);
  position:relative;
}
.func-tabs button.active{
  color:var(--green);
}
.func-tabs button.active::after{
  content:"";position:absolute;bottom:0;left:20%;right:20%;height:3px;
  background:var(--green);border-radius:3px;
}
.tab-ico{width:20px;height:20px;margin-right:4px;vertical-align:middle;object-fit:contain}
.func-tabs button.active .tab-ico{filter:none;opacity:1}
.func-tabs button:not(.active) .tab-ico{opacity:.45}

/* ===== 功能内容区（紧贴tab下方） ===== */
.nav-card{border-radius:0 0 var(--radius) var(--radius);margin-top:0}
.func-body{min-height:200px}

/* ===== 排行榜 ===== */
.rank-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px dashed #f0f0f0}
.rank-no{width:28px;text-align:center;font-weight:900;font-style:italic;color:#aaa;font-size:.95rem}
.rank-no.top1{color:#ff9d00}.rank-no.top2{color:#9aa7bd}.rank-no.top3{color:#c77c48}
.rank-ava{width:32px;height:32px;border-radius:50%;background:#e9efe2;display:flex;align-items:center;justify-content:center;font-size:1rem;overflow:hidden}
.rank-ava img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.rank-name{flex:1;font-size:.85rem}
.rank-score{font-weight:800;color:#f60;font-size:.9rem}
.rank-mine{
  position:sticky;bottom:0;display:flex;align-items:center;gap:10px;margin-top:8px;
  background:linear-gradient(135deg,#eef7e2,#e2f1cf);border-radius:10px;padding:10px;
}
.rank-note{text-align:center;font-size:.7rem;color:#bbb;padding:8px 0 2px}

/* ===== 总榜奖励说明卡片 ===== */
.rank-prize-banner{
  display:flex;flex-direction:column;gap:8px;margin-bottom:12px;
}
.rank-prize-banner .prize-card{
  display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;
  background:linear-gradient(135deg,#fff8e1,#fff3cd);
  border:1px solid #ffe082;
}
.rank-prize-banner .prize-card.silver-card{
  background:linear-gradient(135deg,#f5f6f8,#e8eaed);
  border-color:#c5cad2;
}
.rank-prize-banner .prize-card.bronze-card{
  background:linear-gradient(135deg,#fff3e6,#ffe4cc);
  border-color:#ffbc7a;
}
.rank-prize-banner .pc-ico{font-size:2rem;width:44px;text-align:center}
.rank-prize-banner .pc-info{flex:1;min-width:0}
.rank-prize-banner .pc-title{font-size:.88rem;font-weight:800;color:#5a3e00}
.rank-prize-banner .pc-sub{font-size:.72rem;color:#8a6d3b;margin-top:2px}
.rank-prize-banner .pc-count{font-size:.76rem;font-weight:700;color:var(--text-sub);white-space:nowrap}
.rank-prize-banner .silver-card .pc-title{color:#444}
.rank-prize-banner .silver-card .pc-sub{color:#777}
.rank-prize-banner .bronze-card .pc-title{color:#7a3e00}
.rank-prize-banner .bronze-card .pc-sub{color:#9a6830}

/* ===== 我的竞猜 ===== */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
.stat-cell{background:#f6faf0;border-radius:10px;padding:10px 4px;text-align:center}
.stat-cell b{display:block;font-size:1.15rem;color:var(--green);margin-bottom:2px}
.stat-cell span{font-size:.68rem;color:var(--text-sub)}
.guess-row{padding:9px 4px;border-bottom:1px dashed #f0f0f0;font-size:.8rem}
.guess-row .gr-top{display:flex;justify-content:space-between;color:var(--text-sub);font-size:.72rem;margin-bottom:4px}
.guess-row .gr-main{display:flex;justify-content:space-between;align-items:center}
.tag{font-size:.68rem;padding:2px 8px;border-radius:8px}
.tag.hit{background:#ffefef;color:#e33}
.tag.miss{background:#f2f2f2;color:#888}
.tag.wait{background:#eef4ff;color:#3576f0}

/* ===== 我的奖品 ===== */
.prize-row{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px dashed #f0f0f0}
.prize-ico{width:40px;height:40px;border-radius:10px;background:#fff3e6;display:flex;align-items:center;justify-content:center;font-size:1.3rem;overflow:hidden}
.prize-ico img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.prize-info{flex:1;min-width:0}
.prize-name{font-size:.86rem;font-weight:700}
.prize-sub{font-size:.7rem;color:var(--text-sub);margin-top:2px}
.use-btn{border:none;background:linear-gradient(135deg,#ff7a3c,#ff4d2e);color:#fff;border-radius:14px;padding:6px 14px;font-size:.76rem;font-weight:700}
.use-btn.logi{background:linear-gradient(135deg,#1f6dff,#5a9bff)}
.use-btn.used{background:#ccc}
.use-btn.kefu{background:linear-gradient(135deg,#07c160,#06ad56)}

/* ===== 一等奖实物大奖展示 ===== */
.grand-prize{
  display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:10px 12px;
  background:linear-gradient(135deg,#fff8e1,#ffefc2);border:1px solid #ffe9a8;border-radius:12px;
}
.grand-prize .gp-ico{font-size:1.8rem}
.grand-prize .gp-info{flex:1;min-width:0}
.grand-prize .gp-name{font-size:.82rem;font-weight:800;color:#7a4b00}
.grand-prize .gp-sub{font-size:.7rem;color:#a07c2a;margin-top:2px}
.grand-prize .gp-btn{border:none;border-radius:14px;padding:6px 12px;font-size:.74rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#ff9d00,#ff6a00)}

/* ===== 页脚 ===== */
.footer{text-align:center;font-size:.7rem;color:rgba(255,255,255,.75);padding:20px}

/* ===== 弹层 ===== */
.mask{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:50;
  display:flex;align-items:flex-end;justify-content:center;
}
.mask.center{align-items:center;padding:0 30px}
.mask[hidden]{display:none}
.sheet{
  width:100%;max-width:480px;background:#fff;border-radius:18px 18px 0 0;
  padding:20px 18px calc(20px + env(safe-area-inset-bottom));position:relative;
  animation:slideUp .22s ease-out;
}
@keyframes slideUp{from{transform:translateY(60%)}to{transform:translateY(0)}}
.sheet-close{position:absolute;right:14px;top:10px;border:none;background:none;font-size:1.5rem;color:#bbb;line-height:1}
.sheet-title{text-align:center;font-size:1.05rem;margin-bottom:14px}
.sheet-match{text-align:center;font-size:1rem;font-weight:800;margin-bottom:4px}
.sheet-deadline{text-align:center;font-size:.72rem;color:var(--text-sub);margin-bottom:16px}
.pick-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.pick-opt{
  border:2px solid #e5e9e0;background:#fafcf7;border-radius:12px;padding:14px 4px;
  text-align:center;font-size:.9rem;font-weight:700;color:var(--text);
}
.pick-opt small{display:block;font-size:.68rem;color:var(--text-sub);font-weight:400;margin-top:3px}
.pick-opt.sel{border-color:var(--green);background:#eef7e2;color:var(--green)}
.submit-btn{
  display:block;width:100%;border:none;border-radius:24px;padding:13px 0;
  font-size:1rem;font-weight:800;color:#fff;letter-spacing:2px;
  background:linear-gradient(135deg,#4d8f10,#7ac91e);
}
.submit-btn:disabled{background:#ccc}
.pop{
  width:100%;background:#fff;border-radius:18px;padding:22px 18px;text-align:center;
  animation:popIn .2s ease-out;
}
@keyframes popIn{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
.pop-emoji{font-size:3rem}
.prize-pop h3{margin:8px 0 6px;font-size:1.15rem}
.prize-pop p{font-size:.85rem;color:var(--text-sub);margin-bottom:16px}
.rule-pop h3{margin-bottom:12px}
.rule-body{max-height:56vh;overflow-y:auto;text-align:left;font-size:.8rem;line-height:1.7;color:#555;margin-bottom:14px}
.rule-body p{margin-bottom:8px}

/* toast */
.toast{
  position:fixed;left:50%;top:45%;transform:translate(-50%,-50%);z-index:99;
  background:rgba(0,0,0,.75);color:#fff;font-size:.85rem;padding:10px 18px;border-radius:10px;
  max-width:80vw;text-align:center;
}

/* 授权弹窗 */
.auth-btns{display:flex;gap:12px}
.auth-btns button{flex:1;border:none;border-radius:22px;padding:11px 0;font-size:.95rem;font-weight:700}
.auth-deny{background:#f2f2f2;color:#888}
.auth-allow{background:linear-gradient(135deg,#07c160,#06ad56);color:#fff}

/* 物流弹窗 */
.logi-body{text-align:left;font-size:.85rem;line-height:2;color:#555;background:#f8faf5;border-radius:10px;padding:12px 14px;margin-bottom:16px}
.logi-body b{color:#333}

/* 倒计时提示 */
.cd-tip{color:#e67e22;font-weight:600;font-size:.72rem}

/* 立帖为证海报 */
.poster-pop{padding:14px 14px 16px;position:relative;max-width:360px;margin:0 auto}
.poster-img{width:100%;max-width:320px;border-radius:12px;display:block;margin:0 auto 12px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.poster-btns{display:flex;gap:10px}
.submit-btn.half{flex:1;padding:11px 0;font-size:.9rem}
.submit-btn.blue{background:linear-gradient(135deg,#1f6dff,#5a9bff)}

/* 分享引导层 */
.share-guide-mask{background:rgba(0,0,0,.78);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:60px;text-align:center;z-index:120}
.share-guide-arrow{font-size:20px;margin-bottom:40px;animation:arrowBounce 1.2s infinite;text-shadow:0 2px 6px rgba(0,0,0,.5)}
@keyframes arrowBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.share-guide-card{background:#fff;border-radius:12px;padding:12px;display:flex;align-items:center;gap:12px;max-width:300px;width:86%;color:#333;margin-bottom:16px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.share-guide-card img{width:64px;height:64px;object-fit:cover;border-radius:8px;background:#f0f0f0}
.share-guide-card-title{font-weight:700;font-size:15px;margin-bottom:6px;color:#111;line-height:1.3}
.share-guide-card-desc{font-size:13px;color:#666}
.share-guide-tip{font-size:14px;opacity:.9;padding:0 30px}

/* 中奖弹窗动效 */
.prize-pop .pop-emoji{animation:prizeBounce .6s ease}
@keyframes prizeBounce{0%{transform:scale(.3);opacity:0}55%{transform:scale(1.25)}80%{transform:scale(.95)}100%{transform:scale(1);opacity:1}}