:root{--ground:#14061C;--panel:#1D0A29;--line:#3A1648;--neon:#FF3DBA;--cta:#C8107F;--text:#F6E9F5;--soft:#E7CFE6;--muted:#C99BCB}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--text);font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.5}
#app{min-height:100vh;display:flex;flex-direction:column}
.view{flex:1;display:flex;flex-direction:column}
.display{font-family:Kanit,sans-serif;font-style:italic;font-weight:800}
.hidden{display:none !important}
header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:14px 24px;background:#10041A;border-bottom:1px solid var(--line)}
.logo{font-size:28px;color:var(--neon)}.logo span{color:#fff}
.tag{font-size:12px;font-weight:700;letter-spacing:1.5px;color:#FFB8E6;border:1px solid #8B4C93;border-radius:999px;padding:4px 12px}
.wallet{display:flex;align-items:center;gap:10px;background:var(--panel);border:1.5px solid var(--neon);border-radius:999px;padding:8px 18px;font-weight:700}
.wallet small{color:var(--muted);font-weight:600;letter-spacing:1px}
#balance{font-size:20px;font-variant-numeric:tabular-nums}
.tablewrap{flex:1;width:100%;max-width:980px;margin:0 auto;padding:24px 16px 40px;display:flex;flex-direction:column;gap:20px}
.table{background:radial-gradient(700px 420px at 50% 22%,#4A0F52 0%,rgba(74,15,82,0) 75%),var(--panel);border:1.5px solid var(--line);border-radius:28px;padding:24px 20px 28px;display:flex;flex-direction:column;gap:20px}

/* dealer */
.host{display:flex;align-items:flex-end;justify-content:center;gap:16px;flex-wrap:wrap}
.portrait{width:210px;height:245px;flex:none;border-radius:24px 24px 0 0;overflow:hidden;border-bottom:3px solid var(--neon)}
/* Roxy: idle motion and moods */
.rx-hairback,.rx-head,.rx-body,.rx-lock,.rx-eye,.rx-hand,.rx-sparkles path{transform-box:fill-box}
.rx-hairback{transform-origin:50% 0;animation:rxSway 5s ease-in-out infinite alternate}
.rx-head{transform-origin:50% 100%;animation:rxTilt 6s ease-in-out infinite alternate}
.rx-body{transform-origin:50% 100%;animation:rxBreathe 3.600s ease-in-out infinite alternate}
.rx-lock{transform-origin:50% 0;animation:rxSway 3.800s ease-in-out infinite alternate}
.rx-lock-r{animation-direction:alternate-reverse}
.rx-eye{transform-origin:50% 60%;animation:rxBlink 4.600s infinite}
.rx-hand{transform-origin:20% 100%;animation:rxHand 4.200s ease-in-out infinite alternate}
.rx-sparkles path{transform-origin:center;opacity:0}
.rx-wink,.rx-m-open,.rx-m-pout{display:none}
.mood-win .rx-eye-r{display:none}.mood-win .rx-wink{display:block}
.mood-win .rx-m-smile{display:none}.mood-win .rx-m-open{display:block}
.mood-win .rx-head{animation:rxCheer .5s ease-in-out 3 alternate}
.mood-win .rx-sparkles path{animation:rxTwinkle .9s ease-in-out infinite alternate}
.mood-win .rx-sparkles path:nth-child(2n){animation-delay:.35s}
.mood-lose .rx-m-smile{display:none}.mood-lose .rx-m-pout{display:block}
.roxy.dealing .rx-hand{animation:rxFlick .5s ease-out}
@keyframes rxSway{from{transform:rotate(-1.600deg)}to{transform:rotate(1.600deg)}}
@keyframes rxTilt{from{transform:rotate(-2.200deg)}to{transform:rotate(2.200deg)}}
@keyframes rxBreathe{from{transform:scaleY(1)}to{transform:scaleY(1.022)}}
@keyframes rxBlink{0%,91%,100%{transform:scaleY(1)}94%,96%{transform:scaleY(.08)}}
@keyframes rxHand{from{transform:rotate(-3deg)}to{transform:rotate(4deg)}}
@keyframes rxFlick{0%{transform:rotate(0)}40%{transform:rotate(-16deg) translateY(-8px)}100%{transform:rotate(0)}}
@keyframes rxCheer{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-5px) rotate(3deg)}}
@keyframes rxTwinkle{from{opacity:.15;transform:scale(.6)}to{opacity:1;transform:scale(1.150)}}
@media (prefers-reduced-motion:reduce){.roxy *{animation:none !important}.mood-win .rx-sparkles path{opacity:1}}
.portrait svg,.portrait img{width:100%;height:100%;display:block;object-fit:cover;object-position:top}
.bubble{position:relative;max-width:280px;background:#fff;color:#1D0A29;font-weight:600;border-radius:16px 16px 16px 4px;padding:10px 16px;margin-bottom:38px}
.bubble b{display:block;font-size:12px;letter-spacing:1.5px;color:#A00C66}

.seat{display:flex;flex-direction:column;align-items:center;gap:10px}
.label{margin:0;font-size:14px;font-weight:700;letter-spacing:2px;color:var(--soft);display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
.score{background:#10041A;border:1px solid #8B4C93;border-radius:999px;padding:2px 12px;color:#fff;font-variant-numeric:tabular-nums;min-width:38px;text-align:center}
.cards{display:flex;justify-content:center;min-height:132px;padding-left:34px}
.card{width:90px;height:130px;flex:none;margin-left:-34px;border-radius:10px;background:#fff;color:#1D0A29;border:1px solid #D9C4DA;box-shadow:0 6px 18px rgba(0,0,0,.45);display:flex;flex-direction:column;justify-content:space-between;padding:8px 10px;font-weight:700;font-size:24px;line-height:1}
.card.in{animation:deal .25s ease-out}
.card.red{color:#C8105F}
.card .big{font-size:44px;align-self:center}
.card .bot{align-self:flex-end;transform:rotate(180deg)}
.card.back{background:repeating-linear-gradient(45deg,#C8107F 0 8px,#8E0B5C 8px 16px);border:4px solid #fff}
@keyframes deal{from{transform:translateY(-24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.card.in{animation:none}}

#playerHands{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 28px;min-height:176px}
.hand{display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 14px;border-radius:18px;border:2px solid transparent}
.hand.active{border-color:var(--neon);background:rgba(255,61,186,.08)}
.badge{border-radius:999px;padding:2px 10px;font-size:12px;letter-spacing:1px;background:#10041A;border:1px solid #8B4C93;color:#fff}
.badge.good{background:var(--cta);border-color:var(--cta)}

#status{min-height:44px;text-align:center;font-size:26px;color:#fff;margin:0}
#status.win{color:var(--neon);text-shadow:0 0 22px rgba(255,61,186,.6)}
.betline{text-align:center;color:var(--soft);font-weight:600}
.betline b{color:#fff;font-size:20px;font-variant-numeric:tabular-nums}
.controls{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
button,.btn{font:700 16px Inter,sans-serif;min-height:48px;padding:0 24px;border-radius:999px;border:1.5px solid var(--soft);background:transparent;color:#fff;cursor:pointer}
button:hover:not(:disabled){border-color:#fff;background:#2A0D38}
button:focus-visible{outline:3px solid #fff;outline-offset:2px}
button:disabled{opacity:.4;cursor:not-allowed}
button.primary{background:var(--cta);border-color:var(--cta);font-family:Kanit,sans-serif;font-style:italic;font-weight:800;font-size:20px;padding:0 34px}
button.primary:hover:not(:disabled){background:#DD1790;border-color:#DD1790}
button.chip{width:64px;height:64px;padding:0;border:4px dashed #fff;background:#3B0F4A;font-variant-numeric:tabular-nums}
button.chip:hover:not(:disabled){background:var(--cta)}
.rules{font-size:14px;color:var(--muted);text-align:center;margin:0}
footer{padding:18px 24px;border-top:1px solid var(--line);background:#10041A;font-size:13px;color:var(--muted);text-align:center}

/* 18+ gate */
#gate{position:fixed;inset:0;z-index:10;background:var(--ground);display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto}
.gatebox{max-width:520px;width:100%;background:var(--panel);border:1.5px solid var(--neon);border-radius:28px;padding:40px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;box-shadow:0 0 60px rgba(255,61,186,.25)}
.gatebox .logo{font-size:44px}
.ring{width:84px;height:84px;border-radius:50%;border:3px solid #fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:26px}
.gatebox h1{margin:0;font-size:30px;color:#fff}
.gatebox p{margin:0;color:var(--soft)}
.gatebox small{color:var(--muted)}

/* ---- site shell ---- */
header{position:sticky;top:0;z-index:5}
a.logo{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
nav{display:flex;flex-wrap:wrap;gap:4px 6px}
nav a{padding:11px 14px;text-decoration:none;color:var(--soft);font-weight:600;border-bottom:2px solid transparent}
nav a:hover{color:#fff}
nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--neon)}
a:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:6px}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding-left:24px;padding-right:24px}
section[id]{scroll-margin-top:90px}
h2.display{margin:0 0 24px;font-size:40px;color:#fff;line-height:1.1}

/* ---- home ---- */
.hero{background:radial-gradient(900px 520px at 72% 40%,#4A0F52 0%,rgba(74,15,82,0) 70%),var(--ground)}
.hero .wrap{padding-top:48px;padding-bottom:64px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;align-items:center}
.heroart{justify-self:center;width:100%;max-width:400px;aspect-ratio:240/280;border-radius:28px;overflow:hidden;border:1.5px solid var(--neon);box-shadow:0 0 60px rgba(255,61,186,.3)}
.heroart svg,.heroart img{width:100%;height:100%;display:block;object-fit:cover;object-position:top}
.herotext{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.herotext h1{margin:0;font-size:clamp(56px,9vw,104px);line-height:.95;color:var(--neon);text-shadow:0 0 28px rgba(255,61,186,.55)}
.herotext h1 span{color:#fff}
.claim{margin:0;font-size:24px;letter-spacing:5px;color:#FFB8E6;font-weight:700}
.lead{margin:0;max-width:480px;font-size:18px;color:var(--soft)}
.cta{display:inline-flex;align-items:center;gap:12px;min-height:60px;padding:0 38px;border-radius:999px;background:var(--cta);color:#fff;text-decoration:none;font-size:24px;box-shadow:0 0 32px rgba(255,61,186,.5)}
.cta:hover{background:#DD1790}
.ghost{display:inline-flex;align-items:center;min-height:60px;padding:0 28px;border-radius:999px;border:1.5px solid var(--soft);color:#fff;text-decoration:none;font-weight:600}
.ghost:hover{border-color:#fff;background:#2A0D38}
.row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.games{padding-top:24px;padding-bottom:72px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.tile{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 16px;border-radius:18px;border:1.5px solid var(--line);background:var(--panel);color:var(--soft);text-align:center}
.tile svg{width:56px;height:56px;stroke:#8B4C93}
.tile .name{font-size:24px;line-height:1.1}
.tile small{font-size:12px;font-weight:700;letter-spacing:1.5px;color:var(--muted)}
a.tile{border-color:var(--neon);background:#2A0D38;color:#fff;text-decoration:none;box-shadow:0 0 28px rgba(255,61,186,.25)}
a.tile:hover{background:#3B0F4A}
a.tile svg{stroke:var(--neon)}
a.tile small{color:#FFB8E6}
.band{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band .wrap{padding-top:72px;padding-bottom:72px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:48px;align-items:center}
.band p{margin:0 0 18px;font-size:18px;color:var(--soft);max-width:520px}
.band ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.band li{display:flex;gap:12px;align-items:baseline}
.band li b{color:var(--neon)}
.chipart{justify-self:center;width:100%;max-width:260px;height:auto}
.how{padding-top:72px;padding-bottom:72px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.step{padding:28px;border-radius:18px;background:var(--panel);border:1px solid var(--line)}
.step .n{font-size:44px;line-height:1;color:var(--neon)}
.step h3{margin:10px 0 6px;font-size:20px;color:#fff}
.step p{margin:0;color:var(--soft)}


/* ---- roulette ---- */
.status{min-height:44px;text-align:center;font-size:24px;color:#fff;margin:0}
.status.win{color:var(--neon);text-shadow:0 0 22px rgba(255,61,186,.6)}
.rtop{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px 40px}
.rwheelbox{width:260px;max-width:100%;flex:none}
.rwheelbox svg{width:100%;height:auto;display:block}
#rWheel{transition:transform 4s cubic-bezier(.12,.7,.1,1)}
@media (prefers-reduced-motion:reduce){#rWheel{transition:none}}
.rinfo{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:240px}
.rresult{width:84px;height:84px;border-radius:50%;border:3px solid #fff;display:flex;align-items:center;justify-content:center;font-size:36px;color:#fff;background:#10041A}
.rresult:empty{visibility:hidden}
.rscroll{overflow-x:auto;padding-bottom:6px}
.rscroll{padding-top:4px}
.rboard{display:grid;grid-template-columns:52px repeat(12,minmax(48px,1fr)) 56px;grid-auto-rows:52px;gap:6px;min-width:740px}
.rnum{position:relative}
.rnum>.rcell{width:100%;height:100%}
/* spots sit on the lines between numbers */
button.rspot{position:absolute;z-index:2;min-height:0;width:24px;height:24px;padding:0;border-radius:999px;border:0;background:transparent;color:#1D0A29;font:700 11px Inter,sans-serif;line-height:24px;transform:translate(-50%,-50%);left:50%;top:50%}
button.rspot.p-r{left:calc(100% + 3px)}
button.rspot.p-l{left:-3px}
button.rspot.p-t{top:-3px}
button.rspot.p-b{top:calc(100% + 3px)}
button.rspot:hover:not(:disabled),button.rspot:focus-visible{background:rgba(255,255,255,.85);border:0}
button.rspot.on{width:auto;min-width:26px;height:22px;padding:0 6px;background:#fff;border:2px solid var(--cta);line-height:18px;z-index:3}
button.rspot:disabled:not(.on){opacity:0}
button.rcell{position:relative;min-height:0;padding:0;border-radius:8px;border:1.5px solid #8B4C93;color:#fff;font:700 16px Inter,sans-serif}
button.rcell.c-red{background:#B80E4F}button.rcell.c-black{background:#10041A}button.rcell.c-green{background:#0E7A5F}button.rcell.c-out{background:#2A0D38;font-size:14px;letter-spacing:.5px}
button.rcell:hover:not(:disabled){border-color:#fff;background-image:linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14))}
button.rcell:disabled{opacity:.75}
.rchip{position:absolute;right:-4px;top:-6px;min-width:24px;padding:1px 6px;border-radius:999px;background:#fff;color:#1D0A29;font-size:12px;font-weight:700;border:2px solid var(--cta);z-index:1}
button.chip[aria-pressed="true"]{background:var(--cta);border-style:solid;box-shadow:0 0 18px rgba(255,61,186,.6)}

/* ---- slots ---- */
.smachine{display:flex;flex-direction:column;align-items:center;gap:20px}
.sreels{display:flex;gap:clamp(6px,1.5vw,14px);padding:clamp(10px,2vw,18px);border-radius:24px;background:#10041A;border:2px solid var(--neon);box-shadow:0 0 40px rgba(255,61,186,.3)}
.sreel{width:clamp(60px,19vw,140px);height:clamp(84px,24vw,170px);border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;border-top:8px solid #D9C4DA;border-bottom:8px solid #D9C4DA}
.sreel.rolling .sym{filter:blur(1.5px);opacity:.8}
.sym{font-family:Kanit,sans-serif;font-weight:700;line-height:1;color:#1D0A29}
.sreel .sym{font-size:clamp(34px,10vw,80px)}
.sym.s-red{color:#C8105F}.sym.s-dark{color:#1D0A29}
.sym.s-seven{color:#C8105F;font-style:italic}
.sym.s-lut{color:#0E7A5F}
.sym.s-xxx{color:#A00C66;font-style:italic;letter-spacing:-2px}
.sreel .sym.s-xxx{font-size:clamp(22px,6.5vw,52px)}
.spays{align-self:center;width:100%;max-width:420px;font-size:14px;color:var(--soft)}
.spays summary{cursor:pointer;text-align:center;padding:10px;min-height:44px;font-weight:600;letter-spacing:1px;color:var(--muted);list-style-position:inside}
.spays summary:hover{color:#fff}
.spays summary:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:8px}
.spays ul{margin:0;padding:6px 16px;list-style:none;border:1px solid var(--line);border-radius:14px;background:#10041A}
.spays li{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:5px 0;border-bottom:1px solid var(--line)}
.spays li:last-child{border-bottom:0}
.spays .sym{font-size:18px;color:#fff}
.spays .sym.s-red,.spays .sym.s-seven,.spays .sym.s-xxx{color:#FF8FD8}
.spays .sym.s-lut{color:#6FE0C0}
.spays b{font-variant-numeric:tabular-nums;text-align:right}
.spays li:first-child{font-size:12px;letter-spacing:.5px;color:var(--muted)}

/* ---- hero with photo: wide picture behind the left two thirds, text on the right ---- */
.hero{position:relative;overflow:hidden;background:var(--ground)}
.heroart{position:absolute;z-index:0;top:0;bottom:0;left:-24%;width:110%;max-width:none;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;display:block;
  -webkit-mask-image:linear-gradient(to right,#000 60%,transparent 97%),linear-gradient(to bottom,#000 86%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,#000 60%,transparent 97%),linear-gradient(to bottom,#000 86%,transparent 100%);mask-composite:intersect}
.heroart img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 15%}
.hero .wrap{position:relative;z-index:1;display:flex;justify-content:flex-end;align-items:center;min-height:clamp(560px,52vw,820px);padding-top:48px;padding-bottom:56px}
.herotext{width:min(40%,500px);flex:none}
.herotext h1{font-size:clamp(52px,6.6vw,96px)}
.herotext .claim{font-size:clamp(17px,1.7vw,24px);letter-spacing:4px}
@media (max-width:860px){
  .heroart{left:0;width:100%;bottom:auto;height:min(118vw,660px);
    -webkit-mask-image:linear-gradient(to bottom,#000 84%,transparent 100%);mask-image:linear-gradient(to bottom,#000 84%,transparent 100%)}
  .heroart img{object-position:center top}
  .hero .wrap{display:block;min-height:0;padding-top:min(112vw,630px);padding-bottom:48px}
  .herotext{width:100%}
  .herotext h1{font-size:clamp(52px,15vw,88px)}
  .herotext .claim{font-size:20px}
}

/* ---- dealer photo at the table: slow breathing zoom, glow when the player wins ---- */
.portrait{position:relative;transition:box-shadow .4s}
.portrait img{object-position:center top;animation:rxPhoto 7s ease-in-out infinite alternate;transform-origin:50% 30%}
.portrait.mood-win{box-shadow:0 0 34px rgba(255,61,186,.75)}
@keyframes rxPhoto{from{transform:scale(1)}to{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){.portrait img{animation:none}}

/* ---- header: logo left, balance always top right, navigation in the middle or on its own row ---- */
header{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px 20px;padding:12px 24px}
header>div:first-child{order:1}
header nav{order:2;flex:1;justify-content:center}
header .wallet{order:3;margin-left:auto;white-space:nowrap}
@media (max-width:1180px){
  header nav{order:4;flex:0 0 100%;justify-content:flex-start;margin:0 -14px}
}
@media (max-width:560px){
  header{padding:10px 16px;gap:6px 12px}
  header .tag{display:none}
  header .wallet{padding:6px 14px;gap:8px}
  header .wallet small{display:none}
  #balance{font-size:18px}
  header nav a{padding:9px 12px}
}

/* ---- smaller balance pill ---- */
header .wallet{padding:5px 14px;gap:7px;font-size:14px;border-width:1px}
header .wallet small{font-size:11px}
#balance{font-size:16px}
@media (max-width:560px){header .wallet{padding:4px 12px}#balance{font-size:15px}}
@media (max-width:560px){header nav{flex-wrap:nowrap;margin:0 -8px}header nav a{padding:9px 8px;font-size:15px}}

/* ---- Roxy behind the blackjack table: large picture blending into the table, cards land on her felt ---- */
.host{position:relative;display:block;height:clamp(300px,44vh,460px);margin:-8px 0 -64px}
.portrait{position:absolute;left:50%;top:0;height:100%;width:auto;aspect-ratio:1720/1790;transform:translateX(-50%);border:0;border-radius:0;overflow:hidden;box-shadow:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(to bottom,#000 74%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(to bottom,#000 74%,transparent 100%);mask-composite:intersect}
.portrait.mood-win{box-shadow:none}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:center top;transform-origin:50% 35%;transition:filter .4s}
.portrait.mood-win img{filter:brightness(1.12) saturate(1.2)}
.bubble{position:absolute;z-index:2;top:28px;left:calc(50% + min(19vh,190px));max-width:240px;margin:0}
.table .seat,.table #status,.table #playerHands{position:relative;z-index:1}
@media (max-width:820px){
  .bubble{left:auto;right:-6px;top:4px;max-width:min(44%,190px);font-size:13px;line-height:1.35;padding:7px 10px;border-radius:14px 14px 14px 4px}
  .bubble b{font-size:10px;letter-spacing:1px}
}
.card .big{margin:auto auto 14px}

/* ---- Roxy at roulette and slots ---- */
.rtop{align-items:stretch;gap:16px 28px}
.rhost{flex:none;width:226px;height:356px;margin:-8px 0 -20px;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(to bottom,#000 86%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(to bottom,#000 86%,transparent 100%);mask-composite:intersect}
.rhost img{width:100%;height:100%;display:block;object-fit:cover;object-position:center top;transition:filter .4s}
.rhost.mood-win img{filter:brightness(1.12) saturate(1.2)}
.rwheelbox{align-self:center}
.rinfo{justify-content:center}
.bubble.rbubble{position:static;max-width:260px;margin:0 0 4px;border-radius:16px 16px 16px 4px}
@media (max-width:820px){
  .rhost{width:min(100%,250px);height:400px;margin:-8px auto -40px}
  .bubble.rbubble{font-size:14px}
}
.smachine{position:relative;z-index:1}
.sreels.win{animation:sWin .7s ease-in-out 4 alternate}
@keyframes sWin{from{box-shadow:0 0 40px rgba(255,61,186,.3)}to{box-shadow:0 0 70px rgba(255,61,186,.95),0 0 0 3px #fff inset}}
@media (prefers-reduced-motion:reduce){.sreels.win{animation:none;box-shadow:0 0 70px rgba(255,61,186,.95)}}
.sym svg{display:block;height:.82em;width:auto}
.spays .sym svg{height:20px}
.spays li{min-height:32px}