:root{
  --green:#00C853; --green-dark:#003912; --blue:#00B0FF; --bg:#0F0F0F; --card:#1A1A1A;
  --surface:#242424; --text:#FFFFFF; --text2:#B0B0B0; --loss:#FF4081; --warn:#FFB300;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%}
body{background:var(--bg);color:var(--text);font-family:'Inter','SF Pro Display',-apple-system,'Segoe UI',sans-serif;
     max-width:480px;margin:0 auto;min-height:100%;padding:12px 16px 88px;font-size:15px;
     background:radial-gradient(120% 42% at 50% -8%, #14301d 0%, var(--bg) 60%) fixed}
h1{font-size:26px;font-weight:800;line-height:1.2}
h2{font-size:18px;font-weight:800;margin-bottom:8px}
h3{font-size:15px;font-weight:700}
.sub{color:var(--text2);font-size:14px;line-height:1.5}
.green{color:var(--green)} .loss{color:var(--loss)} .blue{color:var(--blue)}
.card{background:linear-gradient(170deg,#1d1d1d,#171717);border:1px solid #262626;border-radius:16px;padding:16px;margin-top:12px}
.flag{height:17px;width:auto;border-radius:3px;vertical-align:-2px;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.teams .flag{height:21px;vertical-align:-3px}
.avatar{width:30px;height:30px;min-width:30px;border-radius:50%;background:#2e2e2e;display:inline-flex;align-items:center;justify-content:center;
        font-size:11px;font-weight:800;color:#cfcfcf;letter-spacing:.5px}
.avatar.av-me{background:#173321;color:var(--green);box-shadow:0 0 0 2px var(--green)}
.surface{background:var(--surface)}
.hidden{display:none!important}
.row{display:flex;gap:8px} .row>*{flex:1}
.center{text-align:center}
button{font-family:inherit;font-weight:700;font-size:17px;border:none;border-radius:14px;
       padding:14px 18px;cursor:pointer;min-height:48px;color:var(--text)}
.btn-primary{background:linear-gradient(180deg,#1ed760 0%,#00C853 100%);color:var(--green-dark);width:100%;
             box-shadow:0 0 22px rgba(0,200,83,.35), inset 0 1px 0 rgba(255,255,255,.25)}
.btn-primary:disabled{background:#3a3a3a;color:#777}
.btn-ghost{background:var(--surface)}
.btn-outline{background:transparent;border:2px solid var(--green);color:var(--green)}
input{font-family:inherit;font-size:17px;background:var(--surface);border:2px solid #333;color:var(--text);
      border-radius:12px;padding:13px 14px;width:100%;outline:none}
input:focus{border-color:var(--green)}
.pulse{animation:pulse 1.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,200,83,.5)}70%{box-shadow:0 0 0 12px rgba(0,200,83,0)}100%{box-shadow:0 0 0 0 rgba(0,200,83,0)}}

/* topbar */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:6px 0 2px}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:19px}
.logo svg{width:30px;height:30px}
.saldo{background:var(--surface);border-radius:12px;padding:7px 14px;font-weight:800;font-size:16px;text-align:right}
.saldo small{color:var(--text2);font-weight:600;font-size:10px;display:block;letter-spacing:.5px}
.saldo span{display:inline-block}
.saldo.pop span{animation:pop .4s}
@keyframes pop{30%{transform:scale(1.3)}100%{transform:scale(1)}}

/* onboarding */
.hero{background:linear-gradient(160deg,#13241a,#0F0F0F);border:1px solid #234231;border-radius:20px;padding:22px 20px;margin-top:14px;text-align:center;
      box-shadow:0 0 40px rgba(0,200,83,.10)}
.hero .logo{justify-content:center;font-size:24px;margin-bottom:14px}
.hero .logo svg{width:40px;height:40px}
.heroimg{width:calc(100% + 40px);margin:0 -20px 16px;display:block;border-radius:0}
.usp{display:flex;gap:12px;align-items:flex-start;text-align:left;margin-top:14px}
.usp .ico{background:#173321;border:1px solid #2c5a3c;border-radius:12px;min-width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.usp .ico svg{width:23px;height:23px;stroke:var(--green);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.usp b{display:block;font-size:15px}
.usp .sub{font-size:13px}

/* streak */
.streakcard{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(120deg,#173321,#1A1A1A);
            border:1px solid #2c5a3c;border-radius:16px;padding:14px 18px;margin-top:12px;box-shadow:0 0 24px rgba(0,200,83,.08)}
.streakcard .big{font-size:27px;font-weight:800}
.streakcard .flameico{font-size:38px;filter:drop-shadow(0 0 10px rgba(0,200,83,.6))}

/* match hero */
.matchhero{border:1px solid #2c5a3c;border-radius:18px;padding:18px;margin-top:12px;
           background:linear-gradient(95deg,#142a1c 48%,rgba(20,42,28,.45) 80%,rgba(20,42,28,.15)),
                      url('/ball.jpg') right center/auto 100% no-repeat, #101a13;
           box-shadow:0 0 30px rgba(0,200,83,.10)}
.matchhero .teams{font-size:21px;font-weight:800;margin:6px 0}
.kickin{font-variant-numeric:tabular-nums;font-weight:800;color:var(--green)}

/* scorebord */
.scorebar{display:flex;justify-content:space-between;align-items:center;gap:8px}
.team{font-weight:700;font-size:14px;width:38%}
.team:last-child{text-align:right}
.clock{background:var(--surface);border-radius:10px;padding:6px 12px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.clock.live{color:var(--green)}
.score{font-size:26px;font-weight:800;text-align:center;margin-top:4px}

/* pulse-ring */
.ringwrap{display:flex;justify-content:center;margin:14px 0 6px;position:relative}
.ringwrap::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:260px;height:230px;
                  background:radial-gradient(circle,rgba(0,200,83,.22),transparent 68%);pointer-events:none}
.ring{width:168px;height:168px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;
      background:conic-gradient(var(--green) var(--deg,360deg), #2a2a2a 0)}
.ring::before{content:'';position:absolute;inset:10px;border-radius:50%;background:var(--card)}
.ring .inner{position:relative;text-align:center}
.ring .inner .big{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums}
.ring .inner .lbl{font-size:11px;color:var(--text2);letter-spacing:1px;font-weight:700}
.ring.warn{background:conic-gradient(var(--warn) var(--deg,360deg), #2a2a2a 0)}
.ring.danger{background:conic-gradient(var(--loss) var(--deg,360deg), #2a2a2a 0)}

/* opties & inzet */
.tag{font-size:12px;font-weight:800;color:var(--green);letter-spacing:.6px}
.opts{display:flex;gap:8px;margin-top:10px}
.opt{flex:1;background:var(--surface);border-radius:14px;padding:13px 6px;text-align:center;cursor:pointer;border:2px solid transparent}
.opt .ico{font-size:24px}
.opt .lbl{font-size:14px;font-weight:800;margin-top:4px}
.opt .odd{color:var(--blue);font-weight:800;font-size:15px;margin-top:2px}
.opt.sel{border-color:var(--green);background:#173321}
.stakes{display:flex;gap:8px;margin-top:10px}
.stake{flex:1;background:var(--surface);border-radius:12px;padding:11px;text-align:center;font-weight:800;cursor:pointer;border:2px solid transparent}
.stake small{display:block;color:var(--text2);font-weight:600;font-size:11px}
.stake.sel{border-color:var(--green);background:#173321;color:var(--green)}
.stake.off,.opt.off{opacity:.35;pointer-events:none}
.locked{display:flex;justify-content:space-between;align-items:center;background:var(--surface);border-radius:12px;padding:12px 14px;margin-top:10px;font-weight:700}
.result{border-radius:12px;padding:12px 14px;margin-top:10px;font-weight:700;font-size:15px}
.result.win{background:#11331e;color:var(--green)}
.result.loss{background:#33121e;color:var(--loss)}
.result.skip{background:var(--surface);color:var(--text2)}

/* feed */
.feed{font-size:14px;color:var(--text2);max-height:140px;overflow-y:auto;line-height:1.8}
.feed b{color:var(--text)}

/* leaderboard */
.lb-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #2a2a2a;font-size:15px}
.lb-row:last-child{border:none}
.lb-row .pos{width:24px;font-weight:800;color:var(--text2)}
.lb-row .pos.p1{color:#FFD700} .lb-row .pos.p2{color:#C0C0C0} .lb-row .pos.p3{color:#CD7F32}
.lb-row .nm{flex:1;font-weight:700}
.lb-row .nm small{color:var(--text2);font-weight:500}
.lb-row .pts{font-weight:800;font-variant-numeric:tabular-nums}
.lb-row.me{background:#15301f;border-radius:10px;padding:9px 10px;margin:0 -10px;border:1px solid #2c5a3c}
.lb-row.me .nm{color:var(--green)}
.flame{font-size:13px;color:var(--warn);font-weight:700}

/* zones */
.zone{display:flex;justify-content:space-between;border-radius:12px;padding:9px 13px;margin-top:8px;font-size:13px;font-weight:800}
.zone.up{border:1px solid #2c5a3c;color:var(--green);background:#13241a}
.zone.down{border:1px solid #5a2c3c;color:var(--loss);background:#241318}

/* toto */
.toto-opts{display:flex;gap:8px;margin-top:10px}
.toto-opt{flex:1;background:var(--surface);border-radius:12px;padding:12px 6px;text-align:center;cursor:pointer;border:2px solid transparent;font-weight:800}
.toto-opt small{display:block;color:var(--blue);font-weight:800;margin-top:3px}
.toto-opt.sel{border-color:var(--green);background:#173321}

/* share */
.sharecard{background:linear-gradient(160deg,#173321,#0F0F0F);border:1px solid #2c4a36;border-radius:16px;padding:22px;text-align:center;margin-top:12px}
.sharecard .big{font-size:36px;font-weight:800;color:var(--green)}

/* tabbar */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;display:flex;
        background:rgba(20,20,20,.97);border-top:1px solid #2a2a2a;padding:8px 0 max(10px, env(safe-area-inset-bottom));backdrop-filter:blur(10px);z-index:50}
.tab{flex:1;text-align:center;color:var(--text2);font-size:11px;font-weight:700;cursor:pointer;background:none;border:none;padding:4px 0;min-height:0}
.tab .tico{display:block;margin:0 auto 3px;width:24px;height:24px}
.tab .tico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tab.active{color:var(--green)}
.tab.active .tico svg{filter:drop-shadow(0 0 6px rgba(0,200,83,.7))}
.tab .dotbadge{position:relative}
.tab .dotbadge::after{content:'';position:absolute;top:-2px;right:-8px;width:8px;height:8px;border-radius:50%;background:var(--loss)}

/* effecten */
body.winflash{animation:winflash .7s}
@keyframes winflash{0%{background:#0c2916}100%{background:var(--bg)}}
.confetti{position:fixed;top:-12px;width:9px;height:14px;border-radius:2px;z-index:99;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:.15}}
.toast{position:fixed;top:14px;left:50%;transform:translateX(-50%);background:#173321;color:var(--green);
       border:1px solid #2c5a3c;border-radius:14px;padding:12px 20px;font-weight:800;z-index:100;max-width:90%;text-align:center;
       animation:toastin .3s}
.toast.bad{background:#33121e;color:var(--loss);border-color:#5a2c3c}
@keyframes toastin{from{opacity:0;transform:translateX(-50%) translateY(-12px)}to{opacity:1;transform:translateX(-50%)}}
.codebox{font-size:26px;font-weight:800;letter-spacing:6px;text-align:center;background:var(--surface);border-radius:12px;padding:14px;margin-top:10px;color:var(--green)}
footer{margin-top:22px;text-align:center;color:#555;font-size:12px;line-height:1.6}