/* ===== V38 Roulette redesign (layout after the new reference screenshot; Moonclutch palette, symbols and a bundled OFL font) ===== */
@font-face{font-family:'MoonInter';font-weight:500;font-style:normal;font-display:swap;src:url(/static/fonts/Inter-Medium.woff) format('woff')}
@font-face{font-family:'MoonInter';font-weight:600;font-style:normal;font-display:swap;src:url(/static/fonts/Inter-SemiBold.woff) format('woff')}
@font-face{font-family:'MoonInter';font-weight:700;font-style:normal;font-display:swap;src:url(/static/fonts/Inter-Bold.woff) format('woff')}
@font-face{font-family:'MoonInter';font-weight:800;font-style:normal;font-display:swap;src:url(/static/fonts/Inter-ExtraBold.woff) format('woff')}
.rl3-wrap{width:100%;max-width:1760px;margin:0 auto}
#moon-roulette{container-type:inline-size;width:100%}
.rl2{--bg:#0D0F13;--pn:#1B1F27;--pn2:#20242D;--btn:#272B35;--ln:#2A2F38;--tx:#F2F3F5;--mu:#949BA6;--mu2:#8d94a0;--gold:#E8B04B;
  --red:#FF5B5B;--redD:#7E1E27;--redT:#40262B;--redS:#7C3339;
  --grn:#1FBF5E;--grnD:#0A4A27;--grnT:#0F3B2C;--grnS:#2A7058;--grnB:#1d7a55;
  --blk:#20242D;--blkT:#171B23;--blkS:#3A414D;
  --blu:#7BA6D6;--bluD:#1C3B60;--bluS:#33506F;
  --tile:clamp(58px,7.5cqw,132px);--gap:clamp(6px,.7cqw,12px);--r1:6px;--r2:9px;--r3:10px;
  font-family:'MoonInter','Inter',system-ui,Arial,sans-serif;color:var(--tx);display:grid;gap:clamp(10px,1.1cqw,20px);font-size:14px;line-height:1.3;font-weight:600;font-feature-settings:'tnum' 1}
.rl2 button,.rl2 input{font-family:inherit;font-weight:inherit}.rl2 button{cursor:pointer}.rl2 [hidden]{display:none!important}
#app .rl2 button{text-transform:none;letter-spacing:normal}
/* top row */
.rl2-top{display:flex;align-items:center;gap:10px;min-height:clamp(40px,3.4cqw,60px)}
.rl2-title{display:inline-flex;align-items:center;gap:10px;height:clamp(40px,3.4cqw,60px);padding:0 clamp(14px,1.4cqw,22px) 0 clamp(10px,1cqw,18px);background:#241F17;border-radius:var(--r2);font-weight:700;font-size:clamp(14px,1.1cqw,20px)}
.rl2-title i{display:grid;width:1.25em;height:1.25em}.rl2-title svg{width:100%;height:100%}
.rl2-info{font-size:11px;font-weight:700;letter-spacing:.07em;color:var(--mu2);margin-left:6px;text-transform:uppercase}
.rl2-sound{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
.rl2-ic{width:clamp(36px,2.6cqw,46px);height:clamp(36px,3.4cqw,60px);border:0;border-radius:var(--r2);background:#1d2027;color:var(--tx);font-size:15px}.rl2-ic:hover{background:#262a33}
.rl2-sound input[type=range]{width:78px;height:4px;accent-color:var(--mu);padding:0;border:0;background:transparent}
.rl2-fair{display:inline-flex;align-items:center;gap:10px;height:clamp(40px,3.4cqw,60px);padding:0 clamp(14px,1.4cqw,22px) 0 clamp(10px,1cqw,16px);border:0;border-radius:var(--r2);background:#1d2027;color:#aab0bb;font-weight:700;font-size:clamp(14px,1.1cqw,20px);transition:background .18s,color .18s}
.rl2-fair svg{width:1.3em;height:1.3em}.rl2-fair:hover{background:#262a33;color:var(--tx)}
/* previous rolls / last 100 */
.rl2-prev{display:flex;justify-content:space-between;align-items:flex-start;gap:clamp(12px,2cqw,30px);min-width:0}
.rl2-pl{min-width:0;flex:1}.rl2-st{flex:none;text-align:right}
.rl2-lab{font-size:clamp(13px,1.05cqw,19px);font-weight:700;color:#9aa1ad;margin-bottom:clamp(6px,.6cqw,10px)}
.rl2-hist{display:flex;gap:clamp(5px,.5cqw,8px);overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.rl2-hist::-webkit-scrollbar{display:none}
.rl2-chip{position:relative;flex:none;width:clamp(30px,2.4cqw,44px);height:clamp(30px,2.4cqw,44px);display:grid;place-items:center;border-radius:var(--r1);border:0;padding:0;--ic2:#fff0}
.rl2-chip svg{width:68%;height:68%;display:block}.rl2-tile svg{width:62%;height:62%;display:block}
.rl2-chip.red,.rl2-pick.red{background:var(--red);color:var(--redD);--ic2:var(--red)}
.rl2-chip.green{background:var(--grn);color:var(--grnD);--ic2:var(--grn)}
.rl2-chip.black{background:var(--blk);color:#E9ECF1;--ic2:var(--blk)}
.rl2-chip.bait{background:var(--blu);color:var(--bluD);--ic2:var(--blu)}
.rl2-chip.new{animation:rl2in .4s ease-out}@keyframes rl2in{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
button.rl2-chip:hover{filter:brightness(1.1)}
.pip{position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;border:1px solid #fff8}.pip.red{background:var(--red)}.pip.black{background:#14171c}
.rl2-stats{display:flex;align-items:center;justify-content:flex-end;gap:clamp(6px,.8cqw,14px)}
.rl2-stats span{display:inline-flex;align-items:center;gap:7px}.rl2-stats b{font-size:clamp(14px,1.2cqw,22px);font-weight:800;min-width:1.6ch;text-align:left}
/* spinner: wide dark container, thin border, gold fading lines top and bottom */
.rl2-wheel{position:relative;height:calc(var(--tile) + clamp(22px,1.9cqw,34px));display:flex;align-items:center;overflow:hidden;border-radius:var(--r3);background:#0F1218;border:2px solid #272c36}
.rl2-wheel::before,.rl2-wheel::after{content:"";position:absolute;left:0;right:0;height:2px;z-index:3;background:linear-gradient(90deg,transparent,#a77c2f 25%,#E8B04B 50%,#a77c2f 75%,transparent);opacity:.8}
.rl2-wheel::before{top:-1px}.rl2-wheel::after{bottom:-1px}
.rl2-track{position:absolute;left:0;top:50%;margin-top:calc(var(--tile)/-2);height:var(--tile);display:flex;align-items:center;gap:var(--gap);width:max-content;will-change:transform;backface-visibility:hidden;transition:none!important}
.rl2-tile{position:relative;flex:0 0 var(--tile);width:var(--tile);height:var(--tile);padding:0;display:grid;place-items:center;border-radius:var(--r2);box-sizing:border-box;--ic2:#0000}
.rl2-tile.red{background:var(--redT);color:var(--redS)}.rl2-tile.black{background:var(--blkT);color:var(--blkS)}
.rl2-tile.green{background:var(--grnT);color:var(--grnS);box-shadow:inset 0 0 0 2px var(--grnB)}
.rl2-tile.bait{background:var(--blkT);color:var(--bluS);--ic2:var(--blkT)}
/* the winning tile lights up in its full colour once the spinner has stopped */
.rl2-wheel[data-phase="result"] .rl2-tile{opacity:.55;transition:opacity .25s}
.rl2-tile.win{opacity:1!important;transition:opacity .25s,background-color .25s,color .25s}
.rl2-tile.win.red{background:var(--red);color:var(--redD);--ic2:var(--red)}.rl2-tile.win.green{background:var(--grn);color:var(--grnD);--ic2:var(--grn);box-shadow:none}.rl2-tile.win.black{background:#2c313c;color:#EEF0F4;--ic2:#2c313c}.rl2-tile.win.bait{background:var(--blu);color:var(--bluD);--ic2:var(--blu)}
.rl2-wheel::selection{background:transparent}
.rl2-line{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;z-index:2;background:linear-gradient(180deg,transparent,rgba(255,255,255,.22) 18%,rgba(255,255,255,.22) 82%,transparent);pointer-events:none}
.rl2-wheel:after{pointer-events:none}
.rl2-wheel .edge{display:none}
.rl2-center{position:absolute;inset:0;z-index:5;display:grid;place-items:center;pointer-events:none}
.rl2-center .cd{display:grid;justify-items:center;line-height:1}
.rl2-center small{font-size:clamp(13px,1.3cqw,24px);font-weight:700;color:#aeb4bf;margin-bottom:.15em;text-shadow:0 1px 6px #000,0 0 14px #000}
.rl2-center b{font-size:clamp(30px,3.4cqw,62px);font-weight:800;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.01em;text-shadow:0 2px 8px #000,0 0 18px #000}
.rl2-wheel .side{display:none}
.rl2-wheel{--fade:#0F1218}
.rl2-wheel>.rl2-track{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
.rl2-err{margin:0;font-size:12px;color:#ff8d86}.rl2-err:empty{display:none}
/* amount control: compact, centred */
.rl2-ctrl{display:flex;align-items:center;gap:clamp(6px,.6cqw,10px);justify-self:center;width:min(100%,max(560px,52cqw));min-height:clamp(46px,3.5cqw,64px);padding:clamp(5px,.5cqw,8px);border:2px solid #232831;border-radius:var(--r2);background:#12151B}
.rl2-amt{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding-left:6px}
.rl2-coin{display:inline-grid;width:clamp(22px,1.8cqw,32px);height:clamp(22px,1.8cqw,32px);flex:none}.rl2-coin svg{width:100%;height:100%}.rl2-coin.sm{width:.95em;height:.95em;vertical-align:-.12em;margin-right:.3em;font-style:normal}
#app .rl2-amt input{flex:1;min-width:0;width:100%;height:100%;background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;padding:0!important;color:var(--tx);font-size:clamp(15px,1.25cqw,22px);font-weight:700}
.rl2-quick{display:flex;align-items:center;gap:clamp(3px,.3cqw,5px);flex:none}
.rl2-quick i{width:2px;align-self:stretch;margin:4px clamp(3px,.4cqw,7px);background:#2a2f38;border-radius:1px}
.rl2-quick button{height:clamp(32px,2.35cqw,42px);padding:0 clamp(8px,.9cqw,16px);border:0;border-radius:5px;background:var(--btn);color:#aab0bb;font-weight:700;font-size:clamp(12px,1.05cqw,18px);transition:background .15s,color .15s}
.rl2-quick button:hover:not(:disabled){background:#313642;color:var(--tx)}
.rl2-go{flex:none;height:clamp(32px,2.35cqw,42px);padding:0 clamp(12px,1.2cqw,22px);margin-left:clamp(2px,.4cqw,8px);border:0;border-radius:5px;background:var(--gold);color:#2a1d07;font-weight:800;font-size:clamp(12px,1.05cqw,18px);transition:filter .15s}
.rl2-go:hover:not(:disabled){filter:brightness(1.07)}.rl2-go:disabled{background:#4a4130;color:#a79a7a;cursor:not-allowed}.rl2-go.busy{cursor:progress}
.rl2-ctrl.locked{opacity:.6}.rl2 button:disabled,.rl2 input:disabled{cursor:not-allowed}
.rl2-line2{display:flex;justify-content:center;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:-4px;font-size:clamp(12px,.95cqw,16px);min-height:1.3em}
.rl2-total{font-weight:700;color:var(--gold)}.rl2-pot{color:var(--mu2);font-weight:600}.rl2-res{font-weight:700;color:var(--mu2)}.rl2-res.win{color:var(--grn)}.rl2-res.lose{color:#ff8d86}
/* four big result buttons + their player lists directly underneath */
.rl2-panels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.35cqw,24px);align-items:start}
.rl2-panel{display:grid;gap:clamp(8px,.8cqw,14px);min-width:0;align-content:start}
.rl2-pick{display:flex;align-items:center;gap:clamp(8px,.9cqw,16px);height:clamp(54px,4.75cqw,86px);padding:0 clamp(12px,1.5cqw,26px) 0 clamp(14px,2.8cqw,50px);border:0;border-radius:var(--r2);font-weight:800;font-size:clamp(16px,1.5cqw,27px);transition:filter .16s,background-color .16s;position:relative;text-align:left}
.rl2-pick .ico{width:clamp(26px,2.4cqw,44px);height:clamp(26px,2.4cqw,44px);display:grid;flex:none}.rl2-pick .ico svg{width:100%;height:100%}
.rl2-pick b{font-weight:800;white-space:nowrap}.rl2-pick u{text-decoration:none;font-size:.62em;font-weight:700;opacity:.85;white-space:nowrap}.rl2-pick u:empty{display:none}
.rl2-pick em{font-style:normal;margin-left:auto;font-weight:800}
.rl2-panel.red .rl2-pick{background:var(--red);color:var(--redD);--ic2:var(--red)}
.rl2-panel.green .rl2-pick{background:var(--grn);color:var(--grnD);--ic2:var(--grn)}
.rl2-panel.black .rl2-pick{background:var(--blk);color:#F2F3F5;--ic2:var(--blk)}
.rl2-panel.bait .rl2-pick{background:var(--blu);color:var(--bluD);--ic2:var(--blu)}
.rl2-pick:hover:not(:disabled){filter:brightness(1.08)}
.rl2-panel.black .rl2-pick:hover:not(:disabled){filter:brightness(1.35)}
.rl2-pick:disabled{cursor:not-allowed;opacity:.5}
.rl2-panel.sel .rl2-pick,.rl2-panel.pick .rl2-pick{opacity:1;box-shadow:inset 0 0 0 2px rgba(255,255,255,.88)}
.rl2-panel.pick .rl2-pick:disabled{opacity:1;cursor:default}
.rl2-panel.blocked .rl2-pick{opacity:.35}
.rl2-sum{display:flex;justify-content:space-between;align-items:center;font-size:clamp(13px,1.05cqw,19px);font-weight:700;color:#9aa1ad}.rl2-sum u{text-decoration:none}.rl2-sum b{color:var(--tx);font-weight:800;font-size:.92em;display:inline-flex;align-items:center}
.rl2-list{display:grid;gap:clamp(5px,.5cqw,8px)}
.rl2-person{display:flex;align-items:center;gap:clamp(7px,.7cqw,12px);height:clamp(36px,2.9cqw,52px);padding:0 clamp(8px,.8cqw,14px) 0 clamp(6px,.6cqw,10px);border-radius:var(--r1);background:#242831;font-size:clamp(12px,1.05cqw,18px);font-weight:700;min-width:0}
.rl2-person.me{box-shadow:inset 0 0 0 1px #4b5567}
.rl2-person .av{display:grid;place-items:center;width:clamp(24px,2cqw,36px);height:clamp(24px,2cqw,36px);border-radius:50%;flex:none;font-style:normal;font-size:.8em;font-weight:800;color:#fff}
.rl2-person .lv{flex:none;font-style:italic;font-weight:800;font-size:.82em;padding:0 .5em;line-height:1.55;color:#f1c978;background:#3a2f1a;border:1px solid #8a6a2c;border-radius:4px}
.rl2-person span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rl2-person b{flex:none;font-weight:800;display:inline-flex;align-items:center}
.rl2-empty{font-size:11px;color:var(--mu)}.rl2-loading{padding:40px;text-align:center;color:var(--mu)}
.rl2-note{margin:6px 0 0;font-size:11.5px;line-height:1.5;color:var(--mu);font-weight:500}
/* tablet */
@container (max-width:900px){.rl2-ctrl{width:100%}.rl2-quick button{padding:0 8px}}
/* mobile: 2x2 colour buttons, history scrolls horizontally, controls wrap */
@container (max-width:640px){
 .rl2{--tile:clamp(56px,17cqw,84px);--gap:7px}
 .rl2-prev{flex-direction:column;gap:12px}.rl2-st{text-align:left;width:100%}.rl2-stats{justify-content:flex-start;flex-wrap:wrap}
 .rl2-ctrl{flex-wrap:wrap;width:100%}.rl2-amt{flex:1 1 100%;min-height:42px}.rl2-quick{flex:1 1 100%;flex-wrap:wrap}.rl2-quick button{flex:1 1 20%;height:40px}.rl2-quick i{display:none}.rl2-go{flex:1 1 100%;height:44px;margin:0}
 .rl2-panels{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}
 .rl2-pick{height:56px;padding:0 12px;font-size:16px}.rl2-pick .ico{width:26px;height:26px}
 .rl2-person{height:38px;font-size:12px}.rl2-sound input[type=range]{width:50px}.rl2-info{display:none}
}
@media (prefers-reduced-motion:reduce){.rl2-chip.new{animation:none}.rl2-tile,.rl2-pick{transition:none}}
/* ===== V55 CSGOWIN-style polish: centred history, calm wheel, 4x2 chips on mobile ===== */
.rl2-prev{flex-direction:column;align-items:center;gap:clamp(10px,1cqw,16px)}
.rl2-stats{justify-content:center;gap:clamp(8px,1cqw,16px);flex-wrap:wrap}
.rl2-stats span{padding:4px 12px 4px 4px;border-radius:8px;background:#13151B;border:2px solid #202229}
.rl2-hist{justify-content:center;max-width:100%}
.rl2-wheel{background:#13151B;border:2px solid #202229;border-radius:8px;--fade:#13151B}
.rl2-center .cd.prog small{font-size:clamp(14px,1.3cqw,22px);font-weight:700;color:#9DA3B2;padding:6px 14px;border-radius:8px;background:rgba(19,21,27,.78);text-shadow:none}
.rl2-ctrl{border:2px solid #202229;background:#13151B;border-radius:8px}
.rl2-quick button{background:#1B1E26;color:#9DA3B2;border-radius:5px}
.rl2-quick button:hover:not(:disabled){background:#252932;color:#F2F3F5}
.rl2-sum{padding:0 2px}
.rl2-person{background:#13151B;border:2px solid #202229}
@container (max-width:640px){
 .rl2-stats{width:100%}.rl2-stats span{flex:1 1 20%;justify-content:center}
 .rl2-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;flex:1 1 100%}
 .rl2-quick button{height:40px;padding:0;flex:none}
}
/* ===== V61 – CSGOWIN layout: previous rolls left / Last 100 right, bet by pressing a colour (no Place bets), FAQ card ===== */
.rl2-prev{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:clamp(12px,2cqw,30px)}
.rl2-pl{min-width:0;flex:1;text-align:left}.rl2-st{flex:none;text-align:right}
.rl2-lab{font-size:clamp(14px,1.1cqw,20px);font-weight:700;color:#9aa1ad;margin-bottom:clamp(8px,.7cqw,12px)}
.rl2-hist{justify-content:flex-start}.rl2-stats{justify-content:flex-end;flex-wrap:nowrap}
.rl2-stats span{padding:0;background:none;border:0;gap:8px}.rl2-stats b{font-size:clamp(15px,1.3cqw,24px)}
.rl2-chip{width:clamp(32px,2.6cqw,46px);height:clamp(32px,2.6cqw,46px)}
.rl2-top{justify-content:space-between}.rl2-sound{margin-left:auto;margin-right:8px}
.rl2-line2{margin-top:-8px;min-height:0}.rl2-line2:has(.rl2-res:empty){display:none}
.rl2-ctrl{width:min(100%,max(640px,56cqw))}
.rl2-pick{height:clamp(58px,4.9cqw,88px);font-size:clamp(17px,1.6cqw,28px);gap:clamp(10px,1.1cqw,20px);padding-left:clamp(14px,2.2cqw,40px)}
.rl2-pick b{display:inline-flex;align-items:center;gap:.25em}.rl2-pick b .rl2-coin.sm{width:.8em;height:.8em;margin:0}
.rl2-pick:active:not(:disabled){transform:scale(.985)}
.rl2.placing .rl2-pick{cursor:progress}
.rl2-panel.pick .rl2-pick{box-shadow:none;opacity:1}
.rl2-faq{border:2px solid #202229;border-radius:10px;background:#13151B;margin-top:clamp(8px,1.4cqw,24px)}
.rl2-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:clamp(16px,1.9cqw,34px) clamp(16px,1.9cqw,34px);font-size:clamp(17px,1.7cqw,30px);font-weight:800;color:var(--tx)}
.rl2-faq summary::-webkit-details-marker{display:none}.rl2-faq summary::after{content:"";width:.5em;height:.5em;border-right:3px solid #d5d9e0;border-bottom:3px solid #d5d9e0;transform:rotate(45deg) translateY(-25%);transition:transform .2s}
.rl2-faq[open] summary::after{transform:rotate(-135deg)}
.rl2-faq>div{padding:0 clamp(16px,1.9cqw,34px) clamp(16px,1.9cqw,30px);color:var(--mu);font-size:clamp(13px,1.05cqw,17px);line-height:1.6;font-weight:500}.rl2-faq p{margin:0 0 .8em}
@container (max-width:640px){
 .rl2-prev{flex-direction:column;align-items:center;gap:14px}.rl2-pl,.rl2-st{text-align:center;width:100%;flex:none}.rl2-hist{justify-content:center}.rl2-stats{justify-content:center;flex-wrap:wrap}
 .rl2-st{order:-1}.rl2-lab{display:none}
 .rl2-pick{height:56px;font-size:16px;padding-left:12px}
 .rl2-faq summary{font-size:17px;padding:16px}
}
.rl2-quick .m-only{display:none}.rl2-sum u{display:none}
@container (max-width:640px){.rl2-quick .m-only{display:block}}