*{box-sizing:border-box}body{margin:0;background:#11151e;color:#eef2fb;font-family:system-ui,sans-serif}.dice-app{max-width:880px;margin:auto;padding:32px 22px}.dice-app header>span{color:#94a5c4;font-size:14px}.dice-app h1{font-size:clamp(28px,5vw,42px);margin:10px 0}.dice-app header p,.note{color:#a9b6cc;line-height:1.7}.dice-app form{display:flex;flex-wrap:wrap;gap:16px;align-items:end;margin:26px 0 16px}.dice-app form label{flex:1;min-width:140px}.dice-app input[type=number]{display:block;width:100%;margin-top:8px;padding:12px;border:1px solid #52617b;border-radius:6px;background:#1b2231;color:white;font:inherit}.dice-app button{border:1px solid #64718a;border-radius:6px;padding:12px 16px;background:#283246;color:white;font:inherit;cursor:pointer}.dice-app #start{background:#dafa51;color:#101700;border-color:#dafa51;font-weight:800}.dice-app button:disabled{opacity:.45;cursor:default}.dice-app :focus-visible{outline:3px solid #91d3ff;outline-offset:3px}.options{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:20px}.options label{font-size:14px}.options input{accent-color:#dafa51}.options button{padding:8px 12px;font-size:14px}.stage{position:relative;isolation:isolate;overflow:hidden;min-height:300px;display:grid;place-items:center;text-align:center;border:1px solid #46516a;border-radius:12px;background:#1b2231;padding:24px 16px}.stage-content{position:relative;z-index:1;width:100%}.stage h2{font-size:clamp(23px,5vw,40px);margin:12px 0 20px;overflow-wrap:anywhere}.stage p{line-height:1.6;margin:10px 0}.stage #eyebrow{font-size:14px;letter-spacing:.18em;color:#b7c5dc}.dice{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.dice span{display:grid;place-items:center;width:54px;height:62px;background:#f6f8ff;color:#192238;border-radius:7px;font-size:47px;line-height:1;font-family:'Segoe UI Symbol',sans-serif}.tease{border:3px solid #ffc857;background:#392b13}.tease h2{color:#ffdc83;animation:anticipation .7s ease-in-out infinite alternate}.win{border:4px solid #ffe360;background:#652395;box-shadow:0 0 28px #bb46e766}.win h2{color:#fff68d;font-size:clamp(32px,7vw,64px);text-shadow:3px 3px #b41b59;animation:triumph .65s ease-in-out infinite alternate}.win .rays{position:absolute;inset:-150%;background:repeating-conic-gradient(#ed369944 0deg 15deg,transparent 15deg 30deg);animation:rotate 12s linear infinite}.win .dice span{background:#fff4a6;box-shadow:0 0 15px #ffed60}.miss h2{color:#a9b6cc}.dice-app progress{display:block;width:100%;height:9px;margin:24px 0 12px;accent-color:#dafa51}.stats{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}.stats p{font-size:14px;color:#a9b6cc;margin:8px 0}.stats strong{display:block;font-size:clamp(18px,3vw,25px);color:#eef2fb;margin-top:5px;font-variant-numeric:tabular-nums}.note{font-size:14px;border-top:1px solid #333e53;padding-top:16px}#status{font-size:14px}.quiet *{animation:none!important}@keyframes anticipation{to{transform:scale(1.06)}}@keyframes triumph{to{transform:scale(1.06) rotate(-2deg)}}@keyframes rotate{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.dice-app *{animation:none!important}}@media(max-width:480px){.dice-app{padding:22px 14px}.stats{grid-template-columns:1fr 1fr}.stats p:first-child{grid-column:1/-1}.dice span{width:42px;height:50px;font-size:38px}.stage{min-height:320px}.options{gap:12px}}
/* The effect takes over the app viewport (the iframe viewport when embedded). */
.probability{color:#dafa51;font-size:15px;line-height:1.7;overflow-wrap:anywhere;margin:0 0 20px}
.hype-wall{display:none}
.stage.win,.stage.tease{position:fixed;inset:0;z-index:1000;border-radius:0;min-height:0;padding:90px 20px 24px;overflow:auto}
.stage.win{background:radial-gradient(ellipse at center,#bc1e72 0%,#542190 55%,#12132e 100%);border:10px solid #ffe360;box-shadow:inset 0 0 100px #ffb300}
.stage.tease{background:radial-gradient(ellipse at center,#713c10,#130b05 75%);border:6px solid #ffc857;box-shadow:inset 0 0 90px #bd6b13}
.effect-active .options{position:fixed;z-index:1001;top:8px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);justify-content:center;padding:10px 14px;background:#11151ef2;border:1px solid #a9b6cc;border-radius:8px;color:white}
.stage.win .stage-content{padding:22px 0;text-shadow:0 3px 8px #1e003f}
.stage.win h2{font-size:clamp(60px,14vw,190px);line-height:1.05;letter-spacing:-.07em;text-shadow:5px 5px #c0114e,10px 10px #501d85,0 0 40px #ffce00;margin:20px -10px 32px;animation:big-triumph .9s ease-in-out infinite alternate}
.stage.win #eyebrow{font-size:clamp(20px,4vw,48px);font-weight:900;color:#fff68d}
.stage.win #caption{display:inline-block;max-width:100%;background:#180b39df;padding:12px 18px;font-size:clamp(18px,2.7vw,32px);font-weight:800}
.stage.win .dice span{width:clamp(48px,8vw,100px);height:clamp(58px,9vw,115px);font-size:clamp(44px,7vw,92px);transform:rotate(-8deg)}
.stage.win .dice span:nth-child(even){transform:rotate(9deg)}
.stage.win .rays{position:fixed;inset:-100vmax;background:repeating-conic-gradient(#ffdb0066 0deg 12deg,transparent 12deg 24deg);animation:rotate 18s linear infinite;pointer-events:none}
.stage.win .hype-wall{display:flex;position:fixed;inset:0;flex-direction:column;justify-content:space-around;overflow:hidden;pointer-events:none;opacity:.38}
.hype-wall span{display:block;white-space:nowrap;font-size:clamp(55px,11vw,150px);font-weight:1000;color:#fff29c;transform:rotate(-12deg);animation:parade 5s ease-in-out infinite alternate}
.hype-wall span:nth-child(even){color:#ffadea;animation-direction:alternate-reverse;transform:rotate(12deg)}
.stage.tease h2{font-size:clamp(55px,12vw,160px);text-shadow:0 0 35px #ff9b00}
.stage.tease #eyebrow{font-size:clamp(22px,5vw,50px);color:#ffdb84;letter-spacing:.3em}
@keyframes big-triumph{from{transform:scale(.92) rotate(-5deg)}to{transform:scale(1.07) rotate(4deg)}}
@keyframes parade{from{translate:-20% 0}to{translate:10% 0}}
@media(max-width:480px){.stage.win,.stage.tease{padding-top:130px}.effect-active .options{gap:8px}.stage.win{border-width:5px}}
.jackpot-burst{display:none}
.stage.win.jackpot{background:radial-gradient(ellipse,#004348,#07142f 65%);border-color:#7ffff2;box-shadow:inset 0 0 120px #00ffe5}
.stage.win.jackpot .rays{background:repeating-conic-gradient(from 10deg,#00ffe580 0deg 5deg,transparent 5deg 20deg,#f7ff7180 20deg 25deg,transparent 25deg 40deg);animation:rotate 7s linear infinite reverse}
.stage.win.jackpot h2{color:#fff;text-shadow:6px 6px #008e8e,-6px -6px #b22396,0 0 45px #00ffdb;font-size:clamp(72px,18vw,240px);animation:jackpot-impact .65s cubic-bezier(.1,.7,.2,1) both}
.stage.win.jackpot .dice span{background:#c4fff6;box-shadow:0 0 32px #00ffe5;animation:jackpot-dice 1s ease-in-out infinite alternate}
.stage.win.jackpot .dice span:nth-child(even){animation-delay:-.5s}
.stage.win.jackpot .jackpot-burst{display:flex;position:fixed;inset:0;flex-direction:column;justify-content:space-between;padding:100px 0 25px;pointer-events:none;overflow:hidden}
.jackpot-burst span{font-size:clamp(48px,9vw,130px);font-weight:1000;white-space:nowrap;color:#c4fff6;opacity:.6;letter-spacing:.1em;animation:jackpot-banner 1s ease-out both;transform:rotate(-8deg)}
.jackpot-burst span:last-child{align-self:end;transform:rotate(8deg);animation-direction:reverse}
.stage.win.jackpot .hype-wall{opacity:.18}
.stage.win.jackpot #eyebrow{color:#adfff0}
@keyframes jackpot-impact{from{transform:scale(3) rotate(-20deg);opacity:0}to{transform:scale(1) rotate(-3deg);opacity:1}}
@keyframes jackpot-dice{to{transform:translateY(-12px) rotate(12deg)}}
@keyframes jackpot-banner{from{translate:-100% 0}to{translate:0 0}}