@font-face{font-family:"Shrikhand";src:url(shrikhand-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Familjen Grotesk";src:url(familjen-grotesk-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Familjen Grotesk";src:url(familjen-grotesk-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --crimson:#c4122f;--crimson-hi:#e22a45;--crimson-lo:#7a0a1f;
  --gold:#ffc62e;--gold-hi:#ffe08a;--gold-lo:#c98a00;
  --teal:#0a5a5f;--teal-lo:#053539;--teal-ink:#032528;
  --cream:#fff6e0;--ink:#20201d;
  --show:"Shrikhand","Cooper Black",Georgia,serif;
  --body:"Familjen Grotesk","Trebuchet MS",sans-serif;
  --gut:clamp(16px,4vw,56px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:400 18px/1.6 var(--body);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--show);font-weight:400;line-height:1.08;margin:0}
ul,ol{padding:0;margin:0;list-style:none}
:focus-visible{outline:3px solid var(--gold-hi);outline-offset:2px}

/* header */
.top{position:relative;z-index:20;display:flex;align-items:center;gap:24px;padding:10px var(--gut);background:var(--teal-ink);color:#fff}
.mark{font-family:var(--show);font-size:24px;text-decoration:none;color:#fff;margin:0;line-height:1}
.mark em{font-style:normal;color:var(--gold)}
.nav{display:flex;gap:22px;margin-left:auto}
.nav a{text-decoration:none;font-weight:700;font-size:16px}
.nav a:hover{color:var(--gold)}
.menu{display:none;margin-left:auto;position:relative}
.menu summary{cursor:pointer;list-style:none;font-weight:700;font-size:15px;padding:8px 4px}
.menu summary::-webkit-details-marker{display:none}
.menu div{position:absolute;right:0;top:100%;background:var(--teal-ink);padding:8px 16px;width:170px;box-shadow:0 12px 24px #0007}
.menu div a{display:block;padding:9px 0;text-decoration:none;font-weight:700}
.hbtn{flex:none;background:var(--gold);color:var(--crimson-lo);font-weight:700;font-size:16px;text-decoration:none;padding:10px 18px;border-radius:999px}
.hbtn:hover{background:var(--gold-hi)}

/* stage hero */
.stage{position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(60% 70% at 72% 40%,#ff5a6e66,transparent 70%),
    repeating-linear-gradient(90deg,#00000038 0 10px,#ffffff12 34px,#00000038 62px),
    linear-gradient(180deg,var(--crimson-lo),var(--crimson) 42%,var(--crimson-hi))}
.stage-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:24px;align-items:center;max-width:1360px;margin:auto;padding:22px var(--gut) 66px;min-height:min(calc(100vh - 58px),780px)}
.floor{position:absolute;z-index:1;left:-10%;right:-10%;bottom:-120px;height:220px;border-radius:50%;background:radial-gradient(60% 90% at 50% 20%,#17a0a0,var(--teal) 60%,var(--teal-lo))}
.beam{position:absolute;z-index:1;top:-20px;width:520px;height:120%;background:linear-gradient(180deg,#fff3c499,#fff3c400 88%);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);pointer-events:none}
.b1{left:-90px;transform:rotate(-14deg)}
.b2{right:6%;transform:rotate(12deg);opacity:.8}
.kicker{display:flex;align-items:center;gap:14px;margin:0 0 12px;font-weight:700;font-size:16px}
.kicker img{width:118px}
h1{font-size:clamp(35px,4.6vw,66px);text-shadow:0 3px 0 var(--crimson-lo)}
.big{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:end;column-gap:18px;margin:14px 0 14px;text-decoration:none;color:var(--gold)}
.big .n{font-family:var(--show);font-size:clamp(46px,5.4vw,80px);line-height:.98;white-space:nowrap;text-shadow:0 4px 0 var(--crimson-lo)}
.big .n:nth-of-type(3){grid-column:2;grid-row:1}
.big .plus{grid-row:2;font-weight:700;font-size:16px;color:#fff}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:560px}
.tiles a{background:var(--teal-ink);color:#fff;text-decoration:none;padding:10px 14px;border-radius:12px;display:flex;flex-direction:column;line-height:1.2}
.tiles a:hover{background:var(--teal)}
.tiles b{font-family:var(--show);font-weight:400;color:var(--gold);font-size:clamp(20px,2.1vw,28px)}
.tiles span{font-size:15px;margin-top:3px}
.act{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:16px}
.cta{display:inline-block;background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,#f6a800);color:var(--crimson-lo);font-weight:700;font-size:clamp(20px,1.9vw,25px);line-height:1.15;text-decoration:none;padding:17px 34px;border-radius:999px;box-shadow:0 6px 0 var(--gold-lo),0 16px 26px #0005;transition:transform .12s}
.cta:hover{transform:translateY(-2px)}
.cta:active{transform:translateY(3px);box-shadow:0 3px 0 var(--gold-lo)}
.cta.small{font-size:19px;padding:13px 26px}
.t18{margin:0;font-size:14px;font-weight:700}

.fan{position:relative;display:block;height:clamp(420px,62vh,560px)}
.fan img{position:absolute}
.bulbs{display:block;padding:15px;background:radial-gradient(circle,#fff1a8 3.6px,#ffc62e 4.6px,transparent 5.4px) 0 0/20px 20px,var(--crimson-lo);box-shadow:0 24px 44px #0007}
.bulbs img{position:static;width:100%}
.fan .bulbs{position:absolute;z-index:3;left:50%;top:50%;width:min(68%,350px);transform:translate(-50%,-50%)}
.f1,.f2{width:42%;top:18%;box-shadow:0 14px 28px #0006}
.f1{left:0;transform:rotate(-9deg)}
.f2{right:0;transform:rotate(9deg)}

/* bands and game rows */
.band{padding:52px 0}
.head{padding:0 var(--gut);max-width:1360px;margin:0 auto 22px}
.head h2{font-size:clamp(32px,4vw,52px)}
.head p{margin:6px 0 0;font-size:18px}
.teal{background:linear-gradient(180deg,var(--teal-lo),var(--teal));color:#fff}
.teal h2{color:var(--gold)}
.ink{background:var(--teal-ink);color:#fff}
.ink h2{color:var(--gold)}
.crimson{background:var(--crimson);color:#fff}
.gold{background:var(--gold);color:var(--crimson-lo);position:relative;overflow:hidden}
.row{display:flex;gap:16px;overflow-x:auto;padding:4px var(--gut) 14px;scroll-snap-type:x proximity;scroll-padding-left:var(--gut);scrollbar-color:var(--gold) transparent}
.row li{flex:0 0 clamp(150px,17vw,220px);scroll-snap-align:start}
.ep{display:block;text-decoration:none;color:inherit}
.ep img{width:100%;border-radius:12px;transition:transform .15s}
.ep:hover img{transform:translateY(-5px)}
.ep-t{display:block;font-family:var(--show);font-size:20px;line-height:1.1;margin-top:9px}
.ep-d{display:block;font-size:15px;line-height:1.3;margin-top:3px;opacity:.88}

.acts{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:14px;padding:0 var(--gut);max-width:1360px;margin:auto}
.acts a{display:flex;flex-direction:column;text-decoration:none;background:var(--crimson-lo);color:#fff;padding:24px;border-radius:16px;transition:transform .15s}
.acts a:hover{transform:translateY(-4px)}
.acts li:nth-child(2) a{padding-top:48px}
.acts .top3 a{padding-top:76px;background:var(--gold);color:var(--crimson-lo)}
.acts .a{font-weight:700;font-size:17px}
.acts b{font-family:var(--show);font-weight:400;font-size:clamp(50px,7vw,96px);line-height:1}
.acts .fs{font-family:var(--show);font-size:clamp(22px,2.4vw,32px)}
.under{padding:0 var(--gut);max-width:1360px;margin:16px auto 0;font-size:16px}

.cashback{background:var(--cream);padding:56px var(--gut)}
.cash-in{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;max-width:1240px;margin:auto}
.cash-art img{border-radius:16px}
.cashback h2{font-size:clamp(32px,4vw,50px);color:var(--crimson)}
.meter{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:16px 0 22px}
.meter li{background:var(--teal);color:#fff;border-radius:12px;padding:12px 6px;text-align:center;line-height:1.2}
.meter li:last-child{background:var(--crimson)}
.meter b{display:block;font-family:var(--show);font-weight:400;font-size:clamp(20px,2.1vw,27px);color:var(--gold)}
.meter span{font-size:13px}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0 var(--gut);max-width:1360px;margin:auto;position:relative;z-index:2}
.cards a{background:var(--crimson-lo);color:#fff;text-decoration:none;padding:22px;border-radius:16px;min-height:178px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .15s}
.cards a:hover{transform:translateY(-4px)}
.cards span{color:var(--gold);font-weight:700;font-size:15px}
.cards h3{font-size:25px;margin-top:6px}
.char{margin:18px auto -52px;width:min(92%,620px)}

.wrap{max-width:860px;margin:auto;padding:0 var(--gut)}
.faq{padding:48px 0 12px}
.faq h2{font-size:clamp(30px,3.6vw,44px);color:var(--crimson);margin-bottom:14px}
.faq details{border-bottom:1px solid #20201d33;padding:14px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:19px}
.faq details p{margin:9px 0 0}
.notice{font-size:16px;margin-bottom:44px}
.notice{padding-top:16px;padding-bottom:16px;background:#fbe6b3;border-radius:12px}

/* guide header */
.ghead{position:relative;overflow:hidden;color:#fff;background:repeating-linear-gradient(90deg,#00000033 0 10px,#ffffff10 30px,#00000033 56px),linear-gradient(180deg,var(--crimson-lo),var(--crimson))}
.ghead-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:40px;align-items:center;max-width:1200px;margin:auto;padding:30px var(--gut) 36px}
.ghead h1{font-size:clamp(35px,4.4vw,60px)}
.lede{font-size:20px;margin:9px 0 0}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;max-width:640px;margin-top:16px}
.strip a{background:var(--teal-ink);text-decoration:none;color:#fff;padding:9px 12px;border-radius:12px;line-height:1.2}
.strip b{display:block;font-family:var(--show);font-weight:400;color:var(--gold);font-size:clamp(24px,2.7vw,36px)}
.strip span{font-size:14px}
.gart{display:block}
.shead{background:linear-gradient(180deg,var(--teal-lo),var(--teal));color:var(--gold);padding:44px var(--gut)}
.shead h1{max-width:740px;margin:auto;font-size:clamp(38px,5vw,62px)}

/* article */
.prose{max-width:740px;margin:auto;padding:36px var(--gut) 44px}
.prose>p:first-child{font-size:20px}
.prose h2{font-size:clamp(27px,3vw,36px);color:var(--crimson);margin:34px 0 10px}
.prose p{margin:0 0 15px}
.prose a:not(.cta):not(.ep){color:var(--crimson);text-underline-offset:2px;font-weight:700}
.prose ul:not(.row){list-style:disc;padding-left:22px;margin-bottom:15px}
.prose li{margin-bottom:6px}
.prose .row{margin:20px calc(var(--gut)*-1) 8px}
.prose .row li{flex-basis:150px;margin:0}
.t{width:100%;border-collapse:collapse;margin:14px 0 20px;background:#fff;border-radius:12px;overflow:hidden;font-size:17px}
.t th,.t td{padding:11px 14px;text-align:left;border-bottom:1px solid #20201d1f;vertical-align:top}
.t thead th{background:var(--teal);color:#fff}
.t tbody th{width:42%;color:var(--teal)}
.interval{background:var(--teal);color:#fff;padding:22px;border-radius:16px;margin:26px 0;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.interval p{margin:0;font-family:var(--show);font-size:24px;line-height:1.15;color:var(--gold-hi);flex:1 1 260px}

/* footer */
.foot{background:var(--teal-ink);color:#d9ecea;padding:38px var(--gut) 28px;font-size:16px}
.foot-in{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:28px;max-width:1200px;margin:auto}
.foot h2{font-family:var(--body);font-weight:700;font-size:15px;color:var(--gold);margin-bottom:6px}
.foot li{margin:5px 0}
.foot p{margin:10px 0 0}
.foot a{text-decoration:none}
.foot a:hover{color:var(--gold)}
.law{max-width:1200px;margin:24px auto 0!important;padding-top:16px;border-top:1px solid #ffffff2b;font-size:15px}

.sticky{display:none}

@media (max-width:980px){
  .nav{display:none}.menu{display:block}
  .cards{grid-template-columns:1fr 1fr}
  .cash-in{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr 1fr}
  .foot-in>div:first-child{grid-column:1/-1}
}
@media (max-width:760px){
  body{padding-bottom:66px}
  .top{gap:10px;padding:9px 16px}
  .mark{font-size:20px}
  .hbtn{font-size:15px;padding:9px 13px}
  .stage-in{grid-template-columns:minmax(0,1fr) min(31vw,190px);grid-template-areas:"k k" "h h" "b f" "t t" "a a";column-gap:12px;row-gap:0;padding:12px 16px 46px;min-height:0;align-items:start}
  .copy{display:contents}
  .kicker{grid-area:k;margin-bottom:8px;font-size:13px;gap:10px;line-height:1.2}
  .kicker img{width:84px}
  h1{grid-area:h;font-size:clamp(31px,9vw,38px)}
  .big{grid-area:b;grid-template-columns:1fr;margin:12px 0 0;align-self:center}
  .big .n{font-size:min(calc((69vw - 44px)/4.7),84px)}
  .big .n:nth-of-type(3){grid-column:1;grid-row:3}
  .big .plus:nth-of-type(2){grid-row:2;margin-bottom:8px}
  .big .plus:last-child{grid-row:4}
  .big .plus{font-size:14px}
  .fan{grid-area:f;height:auto;margin-top:12px}
  .fan .bulbs{position:relative;left:auto;top:auto;transform:none;width:100%;padding:9px;background-size:13px 13px,auto;background-image:radial-gradient(circle,#fff1a8 2.2px,#ffc62e 3px,transparent 3.6px)}
  .f1,.f2{display:none}
  .tiles{grid-area:t;margin-top:12px;max-width:none}
  .tiles a{padding:9px 11px}
  .tiles b{font-size:clamp(16px,4.9vw,24px);white-space:nowrap}
  .tiles span{font-size:14px}
  .act{grid-area:a;margin-top:13px}
  .act .cta{width:100%;text-align:center;font-size:21px;padding:15px 18px}
  .act .t18{width:100%;text-align:center}
  .floor{height:150px;bottom:-104px}
  .beam{width:300px}.b2{display:none}
  .band{padding:38px 0}
  .acts{grid-template-columns:1fr;align-items:stretch}
  .acts a,.acts li:nth-child(2) a,.acts .top3 a{padding:16px 18px}
  .meter{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:1fr}
  .cards a{min-height:0}
  .ghead-in{grid-template-columns:minmax(0,1fr);padding:18px 16px 22px;gap:0}
  .gart{display:none}
  .act .cta{display:block}
  .strip b{font-size:23px}
  .strip span{font-size:13px}
  .strip a{padding:8px 9px}
  .sticky{position:fixed;z-index:30;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--teal-ink);color:#fff;text-decoration:none;font-size:14px;font-weight:700;box-shadow:0 -6px 18px #0006}
  .sticky b{background:var(--gold);color:var(--crimson-lo);padding:9px 15px;border-radius:999px;font-size:16px;white-space:nowrap}
}
@media (max-width:340px){
  .sticky span{display:none}.sticky b{flex:1;text-align:center}
  .hbtn{font-size:14px;padding:8px 10px}
  .strip{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
