@charset "UTF-8";
:root{--blue:#034694;--blue-dark:#023a7a;--blue-light:#e6f0ff;--canvas:#f8f9fa;--ink:#1a1a1a;--muted:#666;--coral:#ff6b6b;--line:#e4e8ee;--white:#fff;--spring:cubic-bezier(.22,1.3,.36,1);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible{outline:3px solid var(--coral);outline-offset:5px}[hidden]{display:none!important}.page{max-width:1180px;margin:auto;padding:0 52px}header{height:100px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;font-size:25px;font-weight:800;letter-spacing:-1px}.brand img{border-radius:12px}.brand>span{color:var(--coral);margin-left:-8px}.back{font-size:13px;color:var(--muted)}.back>span{margin-left:12px;color:var(--blue);font-size:18px}
main{display:grid;grid-template-columns:1fr 1.08fr;gap:72px;align-items:center;min-height:calc(100svh - 187px);padding:60px 0}.eyebrow{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:1.7px;font-weight:600;color:var(--blue);margin:0 0 26px}.eyebrow>span{width:6px;height:6px;border-radius:50%;background:var(--coral)}h1{font-size:clamp(40px,4.5vw,59px);line-height:1.36;letter-spacing:-2px;margin:0 0 24px;font-weight:800}h1>span{color:var(--blue);position:relative;z-index:0}h1>span:after{content:"";position:absolute;bottom:3px;left:0;right:0;height:11px;background:#ffd9d6;z-index:-1;border-radius:50%;transform:rotate(-3deg)}.description{font-size:16px;line-height:1.95;color:var(--muted);margin:0 0 26px}.tags{display:flex;gap:8px;flex-wrap:wrap}.tags>span{font-size:11px;color:var(--blue);padding:8px 11px;border:1px solid #d6e0ed;border-radius:99px}.how-to{display:flex;align-items:flex-start;gap:15px;border-top:1px solid var(--line);margin-top:39px;padding-top:27px}.little-die{font-size:36px;line-height:1;color:var(--blue);transform:rotate(-12deg)}.how-to strong{font-size:13px;font-weight:600}.how-to p{font-size:12px;color:var(--muted);line-height:1.9;margin:9px 0 0}.share{border:0;padding:0;margin:26px 0 0 49px;background:transparent;color:var(--blue);font-size:12px;font-weight:600}.share>span{margin-left:20px}
.game{min-width:0}.table{border-radius:28px;background:var(--blue);color:var(--white);padding:26px 27px 23px;overflow:hidden;isolation:isolate}.table-top,.table-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}.table-top>span:first-child{font-size:14px;font-weight:600}.table-top small{display:block;font-size:8px;letter-spacing:2.1px;color:#a9c8ef;margin-top:7px;font-weight:500}.state{font-size:10px;white-space:nowrap;border:1px solid #ffffff30;border-radius:99px;padding:7px 11px;color:#d9e8fc}.tray{height:278px;display:flex;align-items:center;justify-content:center;position:relative;perspective:900px}.table-ring{position:absolute;width:290px;height:132px;border:1px solid #ffffff1c;border-radius:50%;bottom:18px}.table-ring:after{content:"";position:absolute;inset:15px 22px;border:1px dashed #ffffff13;border-radius:50%}.table-bottom{font-size:11px;color:#c2d9f5;padding-top:7px}.round{font-size:8px;letter-spacing:1.2px;color:#94b8e6}.table-spark{position:absolute;color:#a6c9f2;font-size:23px;transition:transform .4s var(--spring)}.spark-one{left:24px;top:74px;transform:rotate(-10deg)}.spark-two{right:27px;bottom:62px;font-size:31px;color:#ffffff4d}
.cup{position:absolute;width:178px;height:194px;top:45px;transition:transform .5s var(--spring),opacity .25s;filter:drop-shadow(0 12px 8px #012d6126)}.cup-body{position:absolute;inset:8px 0 11px;background:linear-gradient(100deg,#286bb8 0%,#4a88ce 27%,#3678c3 48%,#165dab 80%,#12559c 100%);clip-path:polygon(20% 0,80% 0,99% 94%,95% 100%,5% 100%,1% 94%);border-radius:35px 35px 18px 18px;display:flex;align-items:center;flex-direction:column;padding-top:43px}.cup-top{position:absolute;width:108px;height:25px;border-radius:50%;left:35px;top:0;background:linear-gradient(90deg,#3e82ce,#6da0dc 45%,#3379c7);z-index:2;border-top:1px solid #8ab5e5}.cup-base{position:absolute;width:178px;height:26px;border-radius:50%;bottom:0;background:linear-gradient(90deg,#1762af,#558fd1 37%,#2b71bd 68%,#125398);border-bottom:4px solid #125299}.cup-icon{font-size:42px;color:#a5c9f3;line-height:1}.cup-label{font-size:8px;letter-spacing:2.5px;color:#c1d9f6;margin-top:10px}.cup-lines{width:62px;height:2px;background:#ffffff17;box-shadow:0 6px #ffffff13;margin-top:17px}.show-dice .cup{transform:translateY(-190px) rotate(-13deg) scale(.85);opacity:0;pointer-events:none}.show-dice .spark-one{transform:rotate(20deg) scale(1.2)}
.dice-row{display:flex;gap:10px;align-items:center;justify-content:center;position:relative;z-index:1;padding:20px 0;max-width:100%;flex-wrap:wrap}.die{width:55px;height:55px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:10px;gap:3px;background:#fffdf9;border-radius:12px;border:1px solid #fff;box-shadow:0 4px 0 #d5dfed,0 9px 13px #01264d30;transform:rotate(var(--tilt));color:var(--blue)}.die[data-face="1"]{color:var(--coral)}.die:nth-child(2){margin-top:-18px}.die:nth-child(4){margin-top:14px}.pip{background:currentColor;border-radius:50%;visibility:hidden}.pip.on{visibility:visible}.controls{padding:20px 0 0}.roll{width:100%;display:flex;align-items:center;justify-content:center;gap:11px;min-height:57px;border:0;border-radius:99px;background:var(--blue);color:var(--white);font-size:15px;font-weight:600;transition:transform .22s var(--spring),background .2s}.roll:hover{background:var(--blue-dark)}.roll:active{transform:scale(.98)}.roll svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.5}.roll svg circle{fill:currentColor;stroke:none}.roll>span:last-child{margin-left:auto;font-size:26px;font-weight:400;line-height:1}.roll>svg{margin-right:auto}.roll{padding:0 23px}.secondary-controls{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:12px}.peek,.reveal{min-height:47px;display:flex;align-items:center;justify-content:center;gap:9px;border-radius:99px;font-size:12px;font-weight:600}.peek{background:var(--blue-light);border:1px solid transparent;color:var(--blue);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}.peek svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}.peek:active{background:#d9e8ff}.reveal{background:transparent;border:1px solid #d2dbe8;color:var(--blue)}.reveal>span{margin-left:8px}.status{font-size:11px;line-height:1.7;color:var(--muted);text-align:center;min-height:19px;margin:16px 0 0}.rolling .cup{animation:shake .72s var(--spring)}footer{display:flex;justify-content:space-between;align-items:center;min-height:87px;border-top:1px solid var(--line);font-size:11px;color:#848b96}footer>span:last-child{font-size:10px;letter-spacing:.4px}footer>span:last-child>span{color:var(--coral);margin-left:8px}
@keyframes shake{0%{transform:translate(0,0) rotate(0)}16%{transform:translate(-23px,-9px) rotate(-15deg)}33%{transform:translate(23px,-22px) rotate(14deg)}50%{transform:translate(-22px,-9px) rotate(-12deg)}66%{transform:translate(19px,-18px) rotate(11deg)}83%{transform:translate(-9px,-5px) rotate(-5deg)}100%{transform:translate(0,0) rotate(0)}}
.roll-audit{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 22px;margin-bottom:13px;background:var(--white);border:1px solid var(--line);border-radius:19px}.roll-audit>div{display:flex;align-items:baseline;gap:10px;white-space:nowrap}.roll-audit>div>span{font-size:12px;color:var(--blue);font-weight:600}.roll-audit strong{font-size:32px;line-height:1;letter-spacing:-1px;color:var(--blue);font-variant-numeric:tabular-nums}.roll-audit strong small{font-size:12px;letter-spacing:0;font-weight:500;margin-left:6px}.roll-audit p{margin:0;text-align:right;font-size:10px;color:var(--muted);line-height:1.9;font-variant-numeric:tabular-nums}.roll-audit p small{display:block;font-size:9px;color:#8892a1}@media(max-width:700px){.roll-audit{padding:14px 19px;margin-bottom:11px}.roll-audit strong{font-size:29px}.roll-audit>div{gap:8px}.roll-audit>div>span{font-size:11px}}
@media(max-width:1000px){.page{padding:0 32px}main{gap:36px}.table{padding:24px 21px}.dice-row{gap:8px}.die{width:47px;height:47px;padding:8px;gap:3px;border-radius:10px}.table-bottom{font-size:10px}.spark-one{left:8px}.spark-two{right:8px}}
@media(max-width:700px){.page{padding:0 23px}header{height:77px}.brand{font-size:23px}.brand img{width:32px;height:32px;border-radius:10px}.back{font-size:11px}main{display:flex;flex-direction:column;align-items:stretch;gap:27px;min-height:0;padding:31px 0 29px}.eyebrow{font-size:9px;letter-spacing:1.1px;margin-bottom:15px}h1{font-size:32px;line-height:1.3;letter-spacing:-1.2px;margin-bottom:12px}h1 br{display:none}.description{font-size:12px;line-height:1.9;margin-bottom:16px}.description br{display:none}.tags{gap:6px}.tags>span{font-size:9px;padding:6px 9px}.how-to{display:none}.share{position:static;margin:16px 0 0;font-size:11px}.share>span{margin-left:10px}.table{border-radius:23px;padding:22px 22px 21px}.tray{height:232px}.cup{top:23px;width:161px;height:177px}.cup-top{width:98px;left:31px;height:23px}.cup-body{padding-top:36px}.cup-base{width:161px;height:24px}.cup-icon{font-size:38px}.table-ring{bottom:5px;width:257px;height:114px}.spark-one{top:58px;left:10px;font-size:19px}.spark-two{right:7px;bottom:43px;font-size:27px}.dice-row{gap:9px}.die{width:48px;height:48px;padding:8px;gap:3px}.table-bottom{font-size:10px}.round{font-size:7px}.controls{padding-top:16px}.roll{min-height:54px;font-size:14px}.secondary-controls{margin-top:10px;gap:10px}.peek,.reveal{min-height:45px}.status{font-size:10px;margin-top:12px}footer{min-height:69px;font-size:10px}footer>span:last-child{font-size:9px}}
@media(max-width:360px){.page{padding:0 18px}h1{font-size:28px}.table{padding:19px 16px}.die{width:43px;height:43px;padding:7px}.dice-row{gap:8px}.table-top>span:first-child{font-size:13px}.table-bottom{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}