@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--gold:#edc878;--muted:#8aa89a;--line:#ffffff14;--green:#153f35}*{box-sizing:border-box}body{margin:0;background:#0c2823;color:#eaf0df;font-family:'DM Sans',sans-serif;min-height:100vh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}.ambient{position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 30% 45%,#23684955,transparent 60%),linear-gradient(90deg,#0c282333,#0c2823ed),url('assets/garden.webp') center/cover;opacity:.65}header{max-width:1440px;margin:auto;padding:30px 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;color:#f5e6bd;text-decoration:none;font:800 19px 'Manrope',sans-serif;letter-spacing:2px}.brand-icon{font-size:40px;color:var(--gold)}.brand small{display:block;color:var(--muted);font:9px 'DM Sans';letter-spacing:3px;margin-top:5px}.header-right{display:flex;gap:12px;align-items:center}.header-right button{border:1px solid #d9e6ce29;border-radius:50%;width:34px;height:34px;background:#183d32}.practice{font-size:10px;letter-spacing:1.4px;color:#b7caba;margin-right:18px}main{max-width:1320px;margin:0 auto;padding:36px 4% 26px;display:grid;grid-template-columns:1.35fr 1fr;gap:7%}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2.4px;color:var(--gold)}h1{font-family:Georgia,serif;font-size:clamp(38px,4.2vw,62px);font-weight:400;line-height:1.06;margin:17px 0;color:#f5edd7}p{color:#a9bfb0;font-size:13px;line-height:1.7}.table-heading p{margin:0}.scene{height:310px;position:relative;perspective:900px}.halo{position:absolute;inset:50px 0 0;background:radial-gradient(ellipse,#d0a95d12,transparent 60%)}.tray{position:absolute;width:96%;height:260px;left:2%;top:26px;border-radius:50%;transform:rotateX(57deg);background:linear-gradient(130deg,#bc9560,#f0cf87 15%,#4a3522 40%,#ae824d 70%,#dfbe75);box-shadow:0 20px 0 #3c3021,0 24px 0 #9b784b,0 40px 40px #0008;padding:12px}.tray-inner{width:100%;height:100%;border-radius:50%;border:2px solid #b7a76b;background:repeating-radial-gradient(ellipse,#214c3a 0px,#214c3a 2px,#234e3c 3px,#234e3c 4px);box-shadow:inset 0 8px 20px #071d17}.dice-stage{position:absolute;inset:0;transform-style:preserve-3d}.die{--size:80px;width:var(--size);height:var(--size);position:absolute;top:104px;left:calc(50% - 40px);transform-style:preserve-3d;transition:transform 1.8s cubic-bezier(.15,.65,.18,1);filter:drop-shadow(0 18px 8px #0004)}.face{position:absolute;width:100%;height:100%;background:linear-gradient(145deg,#fff7dc,#d7c8a2);border:2px solid #d5bc86;border-radius:12px;backface-visibility:hidden;box-shadow:inset 0 0 9px #fff8}.face img{width:88%;height:88%;margin:6%;pointer-events:none}.face:nth-child(1){transform:translateZ(40px)}.face:nth-child(2){transform:rotateY(90deg) translateZ(40px)}.face:nth-child(3){transform:rotateY(180deg) translateZ(40px)}.face:nth-child(4){transform:rotateY(-90deg) translateZ(40px)}.face:nth-child(5){transform:rotateX(90deg) translateZ(40px)}.face:nth-child(6){transform:rotateX(-90deg) translateZ(40px)}.table-inscription{position:absolute;top:245px;width:100%;text-align:center;font-size:10px;color:#c6b77e77}.floating-tag{position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:8px;letter-spacing:2px;color:#90ac98}.live-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#b4d295;margin-right:8px}.result{display:flex;align-items:center;gap:16px;padding:18px 20px;background:#b9d7a808;border:1px solid var(--line);border-radius:14px;margin-top:14px;min-height:83px}.result-star{font-size:32px;color:var(--gold)}.result strong{font-size:14px;font-weight:500}.result p{margin:5px 0 0;font-size:11px}.history-wrap{margin:26px 0}.history-wrap .eyebrow{color:#8da797;font-size:9px}#history{display:flex;gap:8px;margin-top:12px;overflow:auto}.empty{font-size:11px;color:#688577}.history-item{display:flex;background:#102f26;border:1px solid var(--line);border-radius:8px;padding:6px}.history-item img{width:23px;height:23px}.balance-row{display:flex;justify-content:space-between;align-items:center;margin:0 2px 22px}.balance-row>span{color:#a0b6a8;font-size:10px;font-weight:600;letter-spacing:1.6px}.balance-row small{display:block;letter-spacing:0;font-size:10px;color:#6e907f;margin-top:6px}.balance-row strong{font-size:28px;font-family:'Manrope';letter-spacing:-1px}.balance-row i{color:var(--gold);font-style:normal;font-size:25px}.bet-panel{border:1px solid #b5ceaa21;background:linear-gradient(145deg,#234738ee,#15382ff5);border-radius:22px;padding:24px;box-shadow:0 20px 60px #00150c33}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:10px}h2{font:500 23px Georgia,serif;margin:0}.panel-title>span{font-size:8px;letter-spacing:1.6px;color:#95ac9b}.tabs{margin:23px 0 0;display:flex;padding:4px;background:#0b2c23;border-radius:10px;gap:4px}.tabs button{width:50%;padding:11px 0;border:0;background:none;border-radius:7px;font-size:11px;color:#91ac9a}.tabs button.active{background:#365a45;color:#f0e8ce;box-shadow:0 2px 5px #0002}.tabs b{font-size:9px;color:#d9ba78;margin-left:4px}.bet-panel>p{font-size:10px;margin:13px 0 17px}.symbols{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.symbol{position:relative;padding:10px 4px 9px;background:#15382c;border:1px solid #8aa27a35;border-radius:12px;transition:.2s;min-width:0}.symbol:hover{transform:translateY(-3px);border-color:#d5ba77}.symbol.selected{background:#4f6441;border-color:var(--gold);box-shadow:0 0 20px #d7bd6310}.symbol.winner{animation:win 1s 2}.symbol img{display:block;width:60px;height:60px;margin:auto;filter:drop-shadow(0 4px 2px #0002)}.symbol>span{font-size:10px;display:block;color:#b7cbb8;margin-top:3px}.symbol .badge{position:absolute;top:5px;right:5px;background:var(--gold);color:#25412f;border-radius:10px;padding:3px 5px;font-size:9px;min-width:18px}.stake-label{display:flex;justify-content:space-between;margin:22px 0 12px;font-size:8px;letter-spacing:1.4px;color:#a4bcaa}.stake-label span+span{letter-spacing:0;color:#7e9c89}.chips{display:flex;justify-content:space-between;gap:8px}.chip{border:3px dashed #799d8c;background:#244c3c;border-radius:50%;width:47px;height:47px;box-shadow:inset 0 0 0 3px #15382c,0 4px 0 #0f2c22;font-size:11px;font-weight:700;transition:.15s}.chip.active{color:#263c2d;border-color:#ffe4a3;background:#e8c67e;box-shadow:inset 0 0 0 3px #a98a52,0 4px 0 #927344;transform:translateY(-3px)}.total{border-top:1px solid var(--line);margin-top:20px;padding-top:18px;display:flex;justify-content:space-between;align-items:center}.total>span{font-size:11px;color:#a6baaa}.total button{font-size:9px;color:#91a792;border:0;background:none;text-decoration:underline;margin-left:6px}.total strong{font-size:20px}.total small{font-size:10px;color:#8ca792;font-weight:400}.roll{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(110deg,#f0d290,#dbb76c);color:#293b2c;border:1px solid #f2dca7;border-radius:10px;width:100%;padding:17px 21px;font-size:13px;font-weight:700;margin-top:17px;box-shadow:0 4px 0 #96753f,0 10px 20px #0002}.roll:hover:enabled{filter:brightness(1.08)}.roll span+span{font-size:20px}.repeat{display:block;border:0;background:none;font-size:10px;color:#b6c8b6;margin:16px auto 0;padding:5px}.footnote{text-align:center;font-size:9px;letter-spacing:.5px;color:#718e7b;margin-top:17px}#bet-list{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}.bet-tag{font-size:9px;background:#122f25;border-radius:6px;padding:5px;color:#e6cf99;border:0}footer{max-width:1320px;margin:auto;padding:15px 4% 26px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:8px;letter-spacing:1.5px;color:#6e8c7b}footer button{font-size:9px;color:#9aaf99;background:none;border:0;text-decoration:underline}dialog{max-width:470px;width:90%;background:#173b30;color:#f0e8d3;border:1px solid #7c9b72;border-radius:20px;padding:32px;box-shadow:0 20px 100px #0008}dialog::backdrop{background:#021c17cc;backdrop-filter:blur(5px)}dialog h2{margin-top:20px;font-size:28px}dialog h3{font-size:14px;color:#e3c98c}.close{position:absolute;right:14px;top:10px;background:none;border:0;font-size:25px}.close-rules{justify-content:center}@keyframes win{50%{box-shadow:0 0 30px #e4cc7e55;border-color:#e4cc7e}}@media(min-width:1400px){main{padding-top:50px}.scene{height:345px}.tray{top:45px}.die{top:124px}.table-inscription{top:265px}}@media(max-width:850px){main{gap:4%;padding-left:4%;padding-right:4%}.bet-panel{padding:18px}h1{font-size:42px}.die{--size:64px;left:calc(50% - 32px)}.face:nth-child(1){transform:translateZ(32px)}.face:nth-child(2){transform:rotateY(90deg) translateZ(32px)}.face:nth-child(3){transform:rotateY(180deg) translateZ(32px)}.face:nth-child(4){transform:rotateY(-90deg) translateZ(32px)}.face:nth-child(5){transform:rotateX(90deg) translateZ(32px)}.face:nth-child(6){transform:rotateX(-90deg) translateZ(32px)}.chip{width:41px;height:41px}}@media(max-width:650px){header{padding:18px 5%}.brand{font-size:15px}.brand-icon{font-size:30px}.brand small{font-size:7px}.practice{display:none}main{display:flex;flex-direction:column;padding-top:22px;gap:0}.table-heading{text-align:center}.table-heading .eyebrow{font-size:8px}h1{font-size:35px;margin:10px 0}h1 br{display:none}.table-heading p{font-size:11px}.scene{height:250px;max-width:440px;margin:0 auto}.tray{height:230px;top:5px}.die{top:74px}.table-inscription{top:195px}.result{margin-top:10px;padding:12px 16px;min-height:65px}.history-wrap{margin:17px 0 22px}.history-wrap .eyebrow{font-size:8px}.balance-row{margin-bottom:15px}.balance-row strong{font-size:25px}.bet-panel{padding:20px}.symbols{grid-template-columns:repeat(3,1fr)}.symbol{padding:7px}.symbol img{width:58px;height:58px}.chip{width:48px;height:48px}.stake-label{margin-top:19px}.panel-title h2{font-size:22px}.tabs{margin-top:18px}footer{flex-wrap:wrap;justify-content:center;font-size:7px;padding-top:28px}footer span:first-child{display:none}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.dice-stage{transform:rotateX(-18deg) rotateY(-12deg)}
/* Picture dice, seated on a tray. The tray and cover share one moving assembly. */
.scene{height:380px;position:relative;isolation:isolate;perspective:none;overflow:hidden;--die-size:72px;--die-half:36px;--die-gap:103px}
.shake-assembly{position:absolute;inset:0;transform:translateY(0);transition:transform .55s cubic-bezier(.35,0,.2,1)}
.ground-shadow{position:absolute;left:9%;right:9%;top:281px;height:43px;border-radius:50%;background:#00120990;filter:blur(14px);transition:transform .5s,opacity .5s}
.tray{position:absolute;top:190px;left:3%;width:94%;height:131px;border-radius:50%;transform:none;padding:9px;z-index:1;background:linear-gradient(135deg,#f3d698,#a47d46 35%,#ead09a 60%,#866035);box-shadow:0 8px 0 #725430,0 11px 0 #c2a167,0 19px 18px #00160b55}
.tray-inner{border:1px solid #c8b782;background:radial-gradient(ellipse at 50% 35%,#3c6348,#254833 65%,#193c2b);box-shadow:inset 0 4px 13px #062718aa}
.dice-stage{position:absolute;inset:0;transform:none;z-index:2;perspective:1100px;transform-style:preserve-3d}
.die-position{--size:var(--die-size);--half:var(--die-half);position:absolute;top:202px;left:calc(50% - var(--half));width:var(--size);height:var(--size);transform-style:preserve-3d}
.die-position[data-die="0"]{margin-left:calc(-1 * var(--die-gap));top:206px}
.die-position[data-die="1"]{top:184px}
.die-position[data-die="2"]{margin-left:var(--die-gap);top:208px}
.die-position::before{content:"";position:absolute;width:92px;height:29px;left:-10px;top:65px;border-radius:50%;background:#041b1177;filter:blur(7px);transform:translateZ(-65px)}
.die-view{width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(-32deg) rotateY(-28deg)}
.die{position:relative;inset:auto;width:100%;height:100%;filter:none;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.face{border-radius:5px;border:1px solid #bea274;background:linear-gradient(145deg,#fff6db,#dfcfa7);box-shadow:inset 0 0 0 3px #fff8e340,inset 0 0 8px #917c4e30;backface-visibility:hidden}
.face img{width:84%;height:84%;margin:8%}
.face:nth-child(1){transform:translateZ(var(--half))}
.face:nth-child(2){transform:rotateY(90deg) translateZ(var(--half));background:linear-gradient(135deg,#dacda8,#c6b48b)}
.face:nth-child(3){transform:rotateY(180deg) translateZ(var(--half))}
.face:nth-child(4){transform:rotateY(-90deg) translateZ(var(--half))}
.face:nth-child(5){transform:rotateX(90deg) translateZ(var(--half))}
.face:nth-child(6){transform:rotateX(-90deg) translateZ(var(--half))}
.shaker{position:absolute;z-index:5;top:104px;left:8%;width:84%;height:208px;transform:translateY(-345px);opacity:0;transition:transform .7s cubic-bezier(.4,0,.2,1),opacity .25s;pointer-events:none;will-change:transform}
.shaker-asset{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.table-inscription{top:310px;z-index:3;font-size:8px;opacity:.65}.floating-tag{bottom:1px;font-size:7px;letter-spacing:1.7px}
.phase-label{position:absolute;bottom:25px;left:0;right:0;text-align:center;color:#dfc895;font-size:8px;letter-spacing:1.6px;z-index:6;min-height:14px}
.scene:is([data-phase="covering"],[data-phase="covered"],[data-phase="lifting"],[data-phase="shaking"],[data-phase="lowering"],[data-phase="settling"]) .shaker{transform:translateY(0);opacity:1}
.scene:is([data-phase="covered"],[data-phase="lifting"],[data-phase="shaking"],[data-phase="lowering"],[data-phase="settling"]) .dice-stage{visibility:hidden}
.scene[data-phase="lifting"] .shake-assembly{transform:translateY(-50px)}
.scene[data-phase="shaking"] .shake-assembly{animation:vertical-shake .6s cubic-bezier(.45,0,.55,1) 3;transform:translateY(-50px)}
.scene:is([data-phase="lifting"],[data-phase="shaking"]) .ground-shadow{transform:scale(.8);opacity:.45}
.scene[data-phase="revealing"] .shaker{transform:translateY(-345px);opacity:0;transition:transform .8s cubic-bezier(.35,0,.2,1),opacity .25s .45s}
@keyframes vertical-shake{0%,100%{transform:translateY(-50px)}25%{transform:translateY(-105px)}75%{transform:translateY(-15px)}}
@media(min-width:1400px){.scene{height:390px}.tray{top:190px}.table-inscription{top:310px}}
@media(max-width:1000px) and (min-width:651px){.scene{--die-size:59px;--die-half:29.5px;--die-gap:78px}.die-position[data-die="0"]{top:213px}.die-position[data-die="1"]{top:195px}.die-position[data-die="2"]{top:215px}}
@media(max-width:650px){.scene{height:355px;width:100%;max-width:440px;margin:0 auto;--die-size:63px;--die-half:31.5px;--die-gap:84px}.tray{top:190px;height:110px;left:1%;width:98%;padding:7px}.die-position[data-die="0"]{top:199px}.die-position[data-die="1"]{top:181px}.die-position[data-die="2"]{top:201px}.die-position::before{top:55px;width:80px}.shaker{left:4%;width:92%;top:90px}.ground-shadow{top:271px}.table-inscription{top:292px}.phase-label{bottom:24px;font-size:7px;letter-spacing:1px}.floating-tag{font-size:6px;letter-spacing:1.5px}}
@media(prefers-reduced-motion:reduce){.scene[data-phase="shaking"] .shake-assembly{animation:none;transform:translateY(-50px)}}