:root{
  --bg:#EDF1EB; --surface:#FFFFFF; --surface-2:#E2E9E1; --ink:#15221C; --muted:#56665D; --line:#C9D5CA;
  --accent:#1C6E4A; --accent-ink:#FFFFFF; --accent-soft:#D3E7D9; --gain:#1C6E4A; --loss:#B23B3B; --warn:#9A620A;
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --bg:#0E1512; --surface:#151F1A; --surface-2:#1C2922; --ink:#E3ECE6; --muted:#98AA9F; --line:#2A3A31;
    --accent:#5CC392; --accent-ink:#0B1410; --accent-soft:#1D3A2B; --gain:#5CC392; --loss:#E57B7B; --warn:#E2AA4A;
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font:15px/1.55 var(--body); padding-top:env(safe-area-inset-top,0px)}
.wrap{max-width:1120px; margin:0 auto; padding-inline:20px}
main.wrap{padding-block:24px 64px}
h1,h2,h3{font-family:var(--display); line-height:1.12; text-wrap:balance; margin:0}
h1{font-size:clamp(32px,5.5vw,52px); font-weight:800; letter-spacing:-.02em}
h2{font-size:clamp(22px,3vw,30px); font-weight:800; letter-spacing:-.01em}
h3{font-size:18px; font-weight:600}
p{margin:0; max-width:65ch}
a{color:var(--accent)}
.muted{color:var(--muted)}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}
.eyebrow{font:500 12px/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.stack{display:flex; flex-direction:column; gap:14px}
.row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.spread{justify-content:space-between}
.gain{color:var(--gain)} .loss{color:var(--loss)} .warn{color:var(--warn)}

.top{position:sticky; top:0; z-index:5; background:var(--bg); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; gap:16px; padding-block:12px; flex-wrap:wrap}
.brand{font:800 20px/1 var(--display); color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:8px}
.brand i{width:22px; height:22px; border-radius:5px; background:var(--accent); display:inline-block; position:relative}
.brand i::after{content:""; position:absolute; left:5px; right:5px; bottom:5px; height:2px; background:var(--accent-ink); box-shadow:0 -4px 0 var(--accent-ink),0 -8px 0 var(--accent-ink)}
nav{display:flex; gap:6px; margin-left:auto; align-items:center; flex-wrap:wrap}
nav a, nav button{color:var(--muted); text-decoration:none; font:500 14px var(--body); padding:6px 10px; border-radius:6px; background:none; border:0; cursor:pointer}
nav a:hover, nav button:hover{color:var(--ink)}

.btn{font:600 15px/1 var(--body); border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); padding:11px 18px; border-radius:8px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px}
.btn.ghost{background:transparent; color:var(--accent)}
.btn.danger{background:transparent; color:var(--loss); border-color:var(--loss)}
.btn.small{padding:7px 12px; font-size:14px}
.btn:disabled{opacity:.45; cursor:not-allowed}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
label.field{display:flex; flex-direction:column; gap:6px; font-weight:500}
label.field small{font-weight:400; color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=number],select{font:500 16px var(--body); padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); width:100%}
input[type=number]{font-family:var(--mono)}
input.code{font:600 22px var(--mono); letter-spacing:.25em; text-transform:uppercase}
.check{display:flex; gap:10px; align-items:flex-start; font-weight:500}
.check input{margin-top:4px; accent-color:var(--accent); width:18px; height:18px}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; flex-wrap:wrap}
.seg button{font:500 14px var(--body); padding:9px 14px; background:var(--surface); color:var(--ink); border:0; cursor:pointer}
.seg button.on{background:var(--accent); color:var(--accent-ink)}
.err{color:var(--loss); font-size:14px}
.err ul{margin:4px 0 0; padding-left:18px}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:20px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start}
.cols{display:grid; grid-template-columns:360px 1fr; gap:18px; align-items:start}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 14px; min-width:0}
.kpi b{display:block; font:600 20px var(--mono); margin-top:4px; overflow-wrap:anywhere}
.pill{font:500 12px/1 var(--mono); padding:5px 9px; border-radius:999px; background:var(--accent-soft); color:var(--ink); white-space:nowrap}
.pill.warn{background:transparent; border:1px solid var(--warn); color:var(--warn)}
.pill.off{background:var(--surface-2); color:var(--muted)}

.hero{display:grid; grid-template-columns:1.2fr 1fr; gap:36px; align-items:center; padding-block:20px 28px}
.hero .lead{font-size:18px; color:var(--muted); margin-top:14px}
.btn.link{background:transparent; border-color:transparent; color:var(--accent); padding-inline:6px}
.contact{display:inline-flex; gap:14px; align-items:center; padding:12px 16px; background:var(--surface); border:1px solid var(--line); border-radius:10px; max-width:100%}
.contact svg{width:24px; height:24px; flex:none; fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linejoin:round}
.contact div{display:flex; flex-direction:column; gap:2px; font-size:14px; min-width:0}
.contact a{font-weight:600; text-decoration:none; overflow-wrap:anywhere}
.band{padding-block:44px 8px; display:flex; flex-direction:column; gap:10px}
.band > h2{margin-bottom:12px}
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; counter-reset:step}
.steps li{counter-increment:step; padding:18px; border-top:3px solid var(--accent); background:var(--surface); border-radius:0 0 10px 10px; display:flex; flex-direction:column; gap:6px}
.steps li::before{content:counter(step,decimal-leading-zero); font:600 13px var(--mono); color:var(--accent)}
.gamestrip{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin-top:10px}
.gamecard{display:flex; flex-direction:column; gap:4px; padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--sim,var(--accent)); border-radius:10px; text-decoration:none; color:var(--ink); transition:transform .15s, border-color .15s}
.gamecard:hover{transform:translateY(-2px); border-color:var(--sim,var(--accent))}
.gamecard b{font:600 16px var(--display)}
.gamecard span{font-size:13px}
.benefits{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.benefits .panel{display:flex; flex-direction:column; gap:6px}
.cta{margin-top:48px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; background:var(--accent-soft); border-color:transparent; padding:28px}
.cta p{margin-top:6px}
.foot{border-top:1px solid var(--line); margin-top:24px}
.foot .wrap{display:flex; flex-direction:column; align-items:center; gap:4px; padding-block:28px; text-align:center; color:var(--muted); font-size:14px}
.foot b{color:var(--ink); opacity:.8}
.foot a{overflow-wrap:anywhere}
.joincode{font:800 clamp(40px,7vw,64px)/1 var(--mono); letter-spacing:.12em}

.tbl-wrap{overflow-x:auto}
table.rep{width:100%; border-collapse:collapse; font-size:14px}
table.rep th{font:500 12px var(--mono); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); text-align:right; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap}
table.rep td{padding:8px 10px; text-align:right; border-bottom:1px solid var(--line); font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}
table.rep th:first-child, table.rep td:first-child{text-align:left; font-family:var(--body)}
table.rep td.txt{white-space:normal; min-width:16ch; font-family:var(--body)}
table.rep tr.you td{font-weight:600; background:var(--accent-soft)}
table.rep tr.total td{font-weight:600; border-bottom:0; border-top:2px solid var(--ink)}
.rules{max-width:820px; margin-inline:auto}
.rules-list{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:8px; max-width:70ch}
table.rep.rules-tbl td:first-child{width:38%; white-space:normal}
table.rep.rules-tbl td.txt{text-align:left; font-family:var(--body)}
.notes{display:flex; flex-direction:column; gap:8px; margin:0; padding:0; list-style:none}
.notes li{padding-left:18px; position:relative}
.notes li::before{content:""; position:absolute; left:2px; top:.6em; width:7px; height:7px; border-radius:2px; background:var(--accent)}
.notes li.w::before{background:var(--warn)}
.notes li.l::before{background:var(--loss)}
.calc{display:flex; justify-content:space-between; gap:12px; font:500 14px var(--mono); padding:6px 0; border-bottom:1px dashed var(--line)}
.calc:last-child{border-bottom:0}
.chart svg{width:100%; height:auto; display:block}
.chart text{fill:var(--muted); font:11px var(--mono)}
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:14px; flex-wrap:wrap}
.tabs button{font:500 14px var(--body); background:none; border:0; padding:8px 12px; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px}
.tabs button.on{color:var(--ink); border-color:var(--accent)}
.list{display:flex; flex-direction:column}
.list > *{padding:12px 0; border-bottom:1px solid var(--line)}
.list > *:last-child{border-bottom:0}
.gamerow{display:flex; justify-content:space-between; gap:12px; align-items:center; text-decoration:none; color:var(--ink)}
.simpick{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.simpick button{text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:14px; cursor:pointer; color:var(--ink); font:inherit}
.simpick button.on{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.market{border-top:1px solid var(--line); padding-top:12px}
.tick{color:var(--gain); font-weight:600}
.pending{color:var(--muted)}
.countdown{font:600 28px var(--mono)}
.center{max-width:460px; margin:40px auto 0}
.empty{padding:28px; text-align:center; color:var(--muted)}
#toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(20px + env(safe-area-inset-bottom,0px)); background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:8px; font-weight:500; z-index:10; max-width:calc(100% - 32px)}

@media (max-width:860px){
  .hero,.grid2,.cols{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .steps,.benefits{grid-template-columns:1fr 1fr}
  table.rep td.txt{min-width:12ch}
}
@media (max-width:520px){ .steps,.benefits{grid-template-columns:1fr} .band{padding-top:32px} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }