:root{
  --bg:#FFFDF7;
  --card:#FFFFFF;
  --edge:#ECE3CC;
  --gold:#C9A227;
  --gold2:#E3C24E;
  --red:#A4133C;
  --green:#1B8A4B;
  --text:#2A2420;
  --muted:#8A7F6F;
  --shadow:0 2px 10px rgba(120,95,30,.07);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{background:#ece5d4;color:var(--text);font-family:inherit}
body{min-height:100vh}
.hidden{display:none!important}
.muted{color:var(--muted)}
button,input,textarea{font-family:inherit;font-size:1rem}
img{display:block}
a{color:inherit;text-decoration:none}

/* shell */
.app,.auth{max-width:430px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative}
@media(min-width:472px){.app,.auth{box-shadow:0 0 42px rgba(80,60,10,.16)}}
.appbar{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--edge);
  display:flex;justify-content:center;align-items:center;padding:9px 12px}
.appbar-logo{height:46px;width:auto;object-fit:contain}
#main{padding:14px 14px calc(86px + env(safe-area-inset-bottom));min-height:60vh}

.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;z-index:30;
  display:flex;background:rgba(255,253,247,.96);backdrop-filter:blur(8px);border-top:1px solid var(--edge);
  padding-bottom:env(safe-area-inset-bottom)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 9px;
  color:var(--muted);font-size:.66rem;font-weight:600;letter-spacing:.02em}
.tab .ti{font-size:1.25rem;filter:grayscale(.5);opacity:.7}
.tab.active{color:var(--red)}
.tab.active .ti{filter:none;opacity:1}

/* auth */
.auth{display:flex;flex-direction:column;justify-content:center;padding:24px 22px}
.auth-card{display:flex;flex-direction:column;align-items:center;gap:14px}
.auth-logo{width:80%;max-width:280px;height:auto}
.auth-tag{color:var(--gold);font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:.78rem;margin-top:-6px}
.auth-form{display:flex;flex-direction:column;gap:11px;width:100%;margin-top:6px}
.auth-error{color:var(--red);font-weight:600;font-size:.9rem;text-align:center;min-height:1.1em}
.avatar-pick{border:1px dashed var(--edge);border-radius:12px;padding:13px;text-align:center;color:var(--muted);font-size:.9rem}

input,textarea{width:100%;background:#fff;border:1px solid var(--edge);border-radius:12px;padding:13px 14px;color:var(--text)}
input:focus,textarea:focus{outline:none;border-color:var(--gold)}
.btn-primary{background:linear-gradient(120deg,var(--gold),var(--gold2));color:#3a2c00;border:none;border-radius:12px;
  padding:14px;font-weight:800;letter-spacing:.02em;box-shadow:var(--shadow)}
.btn-primary:disabled{opacity:.6}
.btn-danger{background:#fff;color:var(--red);border:1px solid var(--red);border-radius:12px;padding:13px;font-weight:700}

/* segment + titles */
.seg{display:flex;background:#f3ecd9;border-radius:12px;padding:4px;gap:4px;margin-bottom:14px}
.seg-btn{flex:1;background:none;border:none;border-radius:9px;padding:9px;font-weight:700;color:var(--muted)}
.seg-btn.active{background:#fff;color:var(--text);box-shadow:var(--shadow)}
.auth-seg{width:100%}
.view-title{font-size:1.05rem;font-weight:800;margin:18px 2px 10px}
.path-title{font-size:1.25rem;font-weight:900;text-align:center;color:var(--red);margin:4px 0 12px;letter-spacing:-.01em}
.loading,.loading-mini{color:var(--muted);text-align:center;padding:40px 0;font-style:italic}
.loading-mini{padding:14px 0}
.empty{color:var(--muted);text-align:center;padding:46px 16px;font-style:italic;line-height:1.5}
.empty-mini{color:var(--muted);font-size:.9rem;padding:8px 0;font-style:italic}

/* bonus banner */
.bonus-banner{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;border:none;
  background:linear-gradient(120deg,#fbf2d6,#fdf8ea);border:1px solid var(--gold);border-radius:14px;
  padding:14px 16px;margin-bottom:16px;box-shadow:var(--shadow)}
.bb-title{font-weight:800;color:var(--red)}
.bb-sub{font-size:.8rem;color:var(--muted)}

/* special bets */
.special-banner{position:relative;overflow:hidden;text-align:center;border-radius:16px;padding:18px 16px 15px;
  margin-bottom:14px;color:#3a2e08;
  background:linear-gradient(135deg,#fce7a8 0%,#f7d774 38%,#e3c24e 70%,#d9b43a 100%);
  border:1px solid var(--gold);box-shadow:0 4px 16px rgba(180,140,20,.28)}
.sb-spark{font-size:1rem;letter-spacing:.2em;margin-bottom:1px}
.sb-title{font-weight:900;font-size:1.5rem;letter-spacing:.05em;color:var(--red);text-shadow:0 1px 0 rgba(255,255,255,.55)}
.sb-sub{font-size:.84rem;line-height:1.45;margin:6px auto 0;max-width:300px;color:#5a4708}
.sb-sub b{color:var(--red)}
.sb-chip{display:inline-block;margin-top:11px;background:rgba(255,255,255,.7);border:1px solid var(--gold);
  border-radius:99px;padding:3px 13px;font-size:.74rem;font-weight:800;color:#5a4708}
.special-head{text-align:center;color:var(--red);background:linear-gradient(120deg,#fbf2d6,#fdf8ea);
  border:1px solid var(--gold);border-radius:10px;padding:7px 10px;margin:18px 2px 9px;
  font-weight:900;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem}
.prop--special{border:1.5px solid var(--gold);background:linear-gradient(180deg,#fffdf3,#fdf7e3)}
.prop--special .prop-q{color:#4a3a06}
.prop--special .prop-pts{background:var(--gold);color:#fff}

/* day + matches */
.day-head,.match-card{scroll-margin-top:72px}
.day-head{font-weight:800;color:var(--gold);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;margin:16px 2px 8px}
.match-card{display:block;width:100%;text-align:left;background:var(--card);border:1px solid var(--edge);
  border-radius:14px;padding:12px 14px;margin-bottom:9px;box-shadow:var(--shadow)}
.m-meta{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:9px}
.m-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-meta span:last-child{text-align:right}
.m-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.m-team{display:flex;align-items:center;gap:8px;min-width:0}
.m-team.away{flex-direction:row-reverse;text-align:right}
.m-name{font-weight:700;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flag{width:26px;height:26px;object-fit:contain;flex-shrink:0;border-radius:3px}
.flag-ph{background:#eee4cc}
.m-mid{text-align:center;min-width:64px}
.m-time{font-weight:800;font-size:1.05rem;color:var(--gold)}
.m-score{font-weight:900;font-size:1.4rem;letter-spacing:.04em}
.m-score span{color:var(--muted);font-weight:500;margin:0 2px}
.m-score.live{color:var(--red)}
.m-state{font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.live-badge{display:inline-block;background:var(--red);color:#fff;font-size:.58rem;font-weight:800;letter-spacing:.08em;
  padding:2px 7px;border-radius:99px;margin-top:3px;animation:pulse 1.5s infinite}
@keyframes pulse{50%{opacity:.5}}
.m-pred{margin-top:10px;font-size:.85rem;color:var(--muted);border-top:1px solid var(--edge);padding-top:8px}
.m-pred b{color:var(--text)}
.m-pred.tap{color:var(--red);font-weight:700}
.m-props{margin-top:6px;font-size:.78rem;color:var(--gold);font-weight:600}
.pts{display:inline-block;background:#eef6ef;color:var(--green);border-radius:99px;padding:1px 8px;font-weight:700;font-size:.75rem;margin-left:4px}
.pts-0{background:#f6eeee;color:var(--muted)}
.pts-4{background:var(--green);color:#fff}

/* sheet */
#sheet-root{position:fixed;inset:0;z-index:50;display:none}
#sheet-root.open{display:block}
.sheet-back{position:absolute;inset:0;background:rgba(40,30,10,.4)}
.sheet{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;
  max-height:92vh;background:var(--bg);border-radius:18px 18px 0 0;display:flex;flex-direction:column;animation:slideup .22s ease}
@keyframes slideup{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
.sheet-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--edge)}
.sheet-head h2{font-size:1.05rem;font-weight:800}
.sheet-close{background:#f3ecd9;border:none;border-radius:99px;width:32px;height:32px;font-size:1rem;color:var(--muted)}
.sheet-body{padding:16px;overflow-y:auto;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
.sheet-intro{color:var(--muted);font-size:.88rem;margin-bottom:12px;font-style:italic}

/* match detail */
.md-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;text-align:center;margin-bottom:8px}
.md-team{display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:700;font-size:.9rem}
.md-team .flag{width:42px;height:42px}
.md-center{font-weight:900;font-size:1.5rem}
.md-section-title{font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gold);margin:20px 0 8px}

/* stepper */
.stepper{background:var(--card);border:1px solid var(--edge);border-radius:14px;padding:8px 14px}
.step-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--edge)}
.step-row:last-of-type{border-bottom:none}
.step-team{display:flex;align-items:center;gap:9px;font-weight:700;min-width:0}
.step-team span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step-ctrl{display:flex;align-items:center;gap:14px;flex-shrink:0}
.step-btn{width:38px;height:38px;border-radius:99px;border:1px solid var(--edge);background:#fff;font-size:1.4rem;font-weight:700;color:var(--red)}
.step-btn:active{background:#f3ecd9}
.step-val{font-weight:900;font-size:1.5rem;min-width:24px;text-align:center}
.pens-pick{padding:10px 0 2px;border-top:1px dashed var(--edge)}
.pens-q{font-size:.8rem;font-weight:700;margin-bottom:8px}
.pens-q span{color:var(--muted);font-weight:600}
.pens-btns{display:flex;gap:8px}
.pens-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 6px;border-radius:10px;border:1px solid var(--edge);background:#fff;font-weight:700;min-width:0}
.pens-btn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pens-btn.sel{border-color:var(--red);color:var(--red);background:#fdf4ef}
.pens-call,.pr-pens{color:var(--muted);font-size:.78rem;font-weight:600}
.pr-pens{display:block;text-align:center}
.save-state{font-size:.82rem;text-align:center;min-height:1.1em;margin-top:8px;color:var(--muted)}
.save-state.saving{color:var(--gold)}
.save-state.saved{color:var(--green);font-weight:700}
.save-state.err{color:var(--red);font-weight:700}

/* predictions list */
.preds-list{display:flex;flex-direction:column;gap:6px}
.pred-row{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--edge);border-radius:11px;padding:9px 12px}
.pr-user{display:flex;align-items:center;gap:8px;flex:1;min-width:0;font-weight:600}
.pr-user span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-score{font-weight:800}
.pr-pts{min-width:34px;text-align:right;color:var(--green);font-weight:700;font-size:.85rem}
.pr-pts.exact{color:var(--gold)}

/* props */
.prop{background:var(--card);border:1px solid var(--edge);border-radius:14px;padding:13px 14px;margin-bottom:10px;box-shadow:var(--shadow)}
.prop-match{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:5px}
.prop-q{font-weight:700;line-height:1.35;display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.prop-pts{flex-shrink:0;background:#fbf2d6;color:var(--gold);border-radius:99px;padding:2px 9px;font-size:.72rem;font-weight:800;white-space:nowrap}
.prop-ctrl{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.prop-state{margin-top:9px;font-size:.82rem;color:var(--muted);font-style:italic}
.prop-result{margin-top:10px;font-weight:800}
.prop-result.ok{color:var(--green)}
.prop-result.miss{color:var(--red)}
.prop-correct{margin-top:4px;font-size:.88rem}
.prop-mine{margin-top:2px;font-size:.82rem;color:var(--muted)}
.opt-btn{background:#fff;border:1px solid var(--edge);border-radius:11px;padding:10px 14px;font-weight:700;color:var(--text)}
.opt-btn.big{flex:1;padding:15px}
.opt-btn.sel{background:var(--green);border-color:var(--green);color:#fff}
.num-in{max-width:120px}
.search-in{width:100%}
.opt-list{display:flex;flex-direction:column;gap:6px;width:100%;max-height:240px;overflow-y:auto;margin-top:8px}
.opt-list .opt-btn{text-align:left}
.opt-list .opt-btn small{color:var(--muted);font-weight:500}
.prop-group{margin-bottom:14px}
.pg-head{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:.85rem;margin:4px 2px 8px}
.countdown{color:var(--gold);font-weight:700;font-size:.78rem}

/* wall */
.composer{background:var(--card);border:1px solid var(--edge);border-radius:14px;padding:12px;margin-bottom:16px;box-shadow:var(--shadow)}
.comp-row{display:flex;gap:10px;align-items:flex-start}
.comp-photo{flex-shrink:0;width:46px;height:46px;border-radius:12px;background:#f3ecd9;display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.comp-row textarea{resize:none}
.comp-preview{margin-top:10px;position:relative}
.comp-preview img{width:100%;border-radius:12px;max-height:260px;object-fit:cover}
.prev-x{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.55);color:#fff;border:none;border-radius:99px;width:30px;height:30px}
.composer .btn-primary{width:100%;margin-top:10px}
.post{background:var(--card);border:1px solid var(--edge);border-radius:14px;padding:12px 14px;margin-bottom:11px;box-shadow:var(--shadow)}
.post-head{display:flex;align-items:center;gap:10px}
.ph-meta{flex:1;min-width:0;display:flex;flex-direction:column}
.ph-meta b{font-size:.92rem}
.ph-meta span{font-size:.72rem;color:var(--muted)}
.post-del{background:none;border:none;font-size:1rem;opacity:.6}
.post-img{width:100%;border-radius:12px;margin-top:10px}
.post-cap{margin-top:9px;line-height:1.4}
.react-bar{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap}
.react{background:#f6f1e3;border:1px solid transparent;border-radius:99px;padding:5px 10px;font-size:.95rem;display:flex;align-items:center;gap:4px}
.react span{font-size:.78rem;font-weight:700;color:var(--muted)}
.react.mine{background:#fbf2d6;border-color:var(--gold)}
.react.mine span{color:var(--gold)}
.wall-more{width:100%;margin:6px 0 10px}

/* leaderboard */
.me-pin{background:linear-gradient(120deg,var(--gold),var(--gold2));color:#3a2c00;border-radius:14px;padding:12px 16px;
  font-weight:800;text-align:center;margin-bottom:14px;box-shadow:var(--shadow)}
.board{display:flex;flex-direction:column;gap:7px}
.board-row{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--edge);border-radius:12px;padding:9px 12px}
.board-row.mine{border-color:var(--gold);background:#fdf8ea}
.br-rank{font-weight:900;font-size:1.05rem;min-width:24px;text-align:center}
.mv{font-size:.7rem;font-weight:800;min-width:26px}
.mv.up{color:var(--green)}
.mv.down{color:var(--red)}
.mv.flat{color:var(--muted)}
.br-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.br-main b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br-ip{font-weight:900;text-align:right}
.br-ip small{font-size:.62rem;color:var(--muted);font-weight:600;margin-left:2px}

/* tier badge */
.tier-badge{display:inline-block;background:linear-gradient(120deg,var(--gold),var(--gold2));color:#3a2c00;
  border-radius:99px;padding:2px 10px;font-size:.7rem;font-weight:800;letter-spacing:.02em;width:fit-content}

/* avatars */
.avatar{width:38px;height:38px;border-radius:99px;object-fit:cover;flex-shrink:0;background:#f3ecd9}
.avatar.ph{display:flex;align-items:center;justify-content:center;color:var(--gold);font-weight:800}
.avatar.lg{width:64px;height:64px;font-size:1.5rem}

/* me / hero */
.hero{background:linear-gradient(150deg,#fff,#fbf3da);border:1px solid var(--gold);border-radius:18px;
  padding:20px;text-align:center;box-shadow:var(--shadow)}
.hero-tier{margin:0 auto}
.hero-ip{font-weight:900;font-size:2.6rem;line-height:1.05;margin-top:8px}
.hero-ip small{font-size:.9rem;color:var(--muted);margin-left:4px}
.hero-rank{color:var(--muted);font-weight:600;font-size:.88rem}
.hero-name{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;font-weight:800;font-size:1.05rem}

.badges{display:flex;flex-wrap:wrap;gap:8px}
.empty-badges{color:var(--muted);font-style:italic;font-size:.88rem}
.badge{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--edge);border-radius:99px;padding:7px 12px;font-weight:700;font-size:.82rem}
.badge-ico{font-size:1rem}

.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.stat{background:var(--card);border:1px solid var(--edge);border-radius:12px;padding:13px;text-align:center}
.stat b{display:block;font-size:1.45rem;font-weight:900;color:var(--red)}
.stat span{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}

.settings{display:flex;flex-direction:column;gap:12px}
.setting-row{display:flex;justify-content:space-between;align-items:center;background:var(--card);border:1px solid var(--edge);border-radius:12px;padding:12px 14px}
.setting-block{background:var(--card);border:1px solid var(--edge);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:9px}
.setting-lbl{font-weight:700}
.admin-link{display:block;text-align:center;background:var(--red);color:#fff;border-color:var(--red)}

.bonus-picks{background:var(--card);border:1px solid var(--edge);border-radius:12px;padding:6px 14px;margin-bottom:10px}
.bp-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--edge)}
.bp-row:last-child{border-bottom:none}
.bonus-q{margin-bottom:18px}
.bq-head{display:flex;justify-content:space-between;align-items:center;font-weight:800;margin-bottom:9px}
.bq-ctrl.teams-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.team-chip{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--edge);border-radius:11px;padding:8px 10px;font-weight:600;font-size:.85rem;min-width:0}
.team-chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-chip.sel{background:var(--green);border-color:var(--green);color:#fff}
.bq-current{margin-top:8px;font-size:.85rem;color:var(--muted)}

/* stats tables */
.group-tbl{background:var(--card);border:1px solid var(--edge);border-radius:14px;padding:12px 14px;margin-bottom:12px}
.group-tbl h3{color:var(--red);font-size:.95rem;margin-bottom:8px}
.group-tbl table{width:100%;border-collapse:collapse;font-size:.82rem}
.group-tbl th{color:var(--muted);font-weight:600;font-size:.66rem;text-transform:uppercase;padding-bottom:6px;text-align:center}
.group-tbl th:first-child{text-align:left}
.group-tbl td{padding:6px 2px;text-align:center;border-top:1px solid var(--edge)}
.group-tbl td.t{display:flex;align-items:center;gap:7px;text-align:left}
.group-tbl td.t .flag{width:18px;height:18px}
.group-tbl td.pts{font-weight:800;color:var(--gold)}
.scorers-title{margin:18px 2px 10px;color:var(--red)}
.scorers{display:flex;flex-direction:column;gap:6px}
.scorer{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--edge);border-radius:11px;padding:9px 12px}
.sc-rank{font-weight:900;min-width:20px;color:var(--gold)}
.sc-name{flex:1;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-team{font-size:.76rem;color:var(--muted)}
.sc-goals{font-weight:800}

.profile-hero{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.ph-name{font-weight:900;font-size:1.2rem}
.ph-ip{color:var(--muted);font-weight:600;font-size:.88rem;margin-top:3px}

.confetti-canvas{position:fixed;inset:0;pointer-events:none;z-index:90}