:root{color:#5b294b;font-synthesis:none;text-rendering:optimizelegibility;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;background:#ffd6ec;font-family:Inter,ui-rounded,SF Pro Rounded,Nunito,system-ui,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;min-height:100%;overflow:hidden}body{overscroll-behavior:none;background:radial-gradient(circle at 15% 10%,#ffffffe0,#0000 13rem),radial-gradient(circle at 92% 8%,#cab4ff8c,#0000 13rem),radial-gradient(circle at 50% 100%,#ffffffb8,#0000 18rem),linear-gradient(135deg,#ffd6ec 0%,#ffeef8 48%,#d7c4ff 100%);min-width:320px;height:100dvh;min-height:100dvh;margin:0;position:fixed;inset:0;overflow:hidden}.shell{width:100vw;height:100dvh;padding:max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));place-items:center;display:grid;overflow:hidden}.hero{text-align:center;width:min(680px,100%);height:100%;max-height:calc(100dvh - 16px);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;border:0;border-radius:0;grid-template-rows:auto minmax(0,1fr) auto;place-items:center;gap:clamp(6px,1.4dvh,14px);padding:clamp(10px,2.2dvh,24px) clamp(10px,3.5vw,26px);display:grid;position:relative;overflow:hidden}.copy{z-index:5;overflow-wrap:anywhere;pointer-events:none;width:100%;max-width:100%;position:absolute;top:clamp(14px,3dvh,28px);left:50%;transform:translate(-50%)}h1{color:#ff5fb7;letter-spacing:-.07em;text-shadow:0 6px #ffffffbf,0 15px 34px #ff5fb747;margin:0;font-size:clamp(2.1rem,10vw,4.8rem);line-height:.88}.stage-card{aspect-ratio:1;width:min(94vw,560px,56dvh);box-shadow:none;cursor:pointer;touch-action:manipulation;background:0 0;border:0;border-radius:0;place-items:center;padding:0;transition:transform .16s,filter .16s;display:grid;position:absolute;top:45%;left:50%;overflow:visible;transform:translate(-50%,-50%)}.stage-card:before,.stage-card:after{content:none;filter:blur(6px);background:#ff89ca2e;border-radius:999px;width:36%;height:36%;position:absolute}.stage-card:before{top:14%;left:8%}.stage-card:after{background:#a991ff2e;bottom:10%;right:5%}.stage-card.pressed{transform:translate(-50%,-50%)scale(.985)}.stage-card.rolling{filter:saturate(1.12)}#dice-canvas{z-index:1;width:100%;height:100%;position:relative}.big-result{z-index:4;color:#fff;text-shadow:0 4px #551c4838;opacity:.82;background:linear-gradient(135deg,#ff4fb0,#9c79ff);border-radius:32px;place-items:center;width:clamp(78px,23vw,116px);height:clamp(78px,23vw,116px);font-size:clamp(3rem,16vw,5.4rem);font-weight:1000;line-height:1;transition:transform .25s,opacity .25s;display:grid;position:absolute;bottom:clamp(18px,5vw,32px);right:clamp(4px,2vw,18px);transform:scale(.88);box-shadow:0 15px 34px #ff4fb054,inset 0 2px #ffffff73}.big-result.shown{opacity:1;animation:.55s both result-pop;transform:scale(1)}.mascot{z-index:3;color:#6c3a5a;background:#ffffffbd;border-radius:999px;padding:7px 11px;font-size:clamp(1rem,4.5vw,1.6rem);position:absolute;bottom:16px;left:16px;box-shadow:0 10px 28px #76386c29}.controls{z-index:5;width:min(100% - 20px,440px);display:block;position:absolute;bottom:clamp(12px,3dvh,28px);left:50%;transform:translate(-50%)}button{font:inherit}#roll{color:#fff;cursor:pointer;touch-action:manipulation;background:linear-gradient(135deg,#ff58b3,#b390ff);border:0;border-radius:999px;width:100%;padding:17px 24px;font-size:clamp(1.05rem,4.8vw,1.28rem);font-weight:1000;transition:transform .18s,filter .18s;box-shadow:0 16px 30px #ff58b357,inset 0 2px #ffffff73}#roll:hover{transform:translateY(-1px)scale(1.01)}#roll:active{transform:translateY(1px)scale(.99)}#roll:disabled{cursor:wait;filter:saturate(.85)}.stage-card.rolling+.controls #roll,#roll:disabled{animation:.55s ease-in-out infinite alternate pulse}.result{color:#7b2b60}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sparkles span{color:#ff5eb78c;pointer-events:none;font-size:clamp(1rem,5vw,2rem);animation:4.2s ease-in-out infinite floaty;position:absolute}.sparkles span:first-child{top:11%;left:8%}.sparkles span:nth-child(2){animation-delay:-.8s;top:13%;right:8%}.sparkles span:nth-child(3){animation-delay:-1.4s;bottom:18%;left:10%}.sparkles span:nth-child(4){animation-delay:-2s;bottom:20%;right:11%}.sparkles span:nth-child(5){animation-delay:-2.6s;top:4%;left:50%}.heart-pop{left:var(--start-x);top:var(--start-y);z-index:4;pointer-events:none;color:#ff58b3;text-shadow:0 3px #fff;font-size:1.7rem;animation:1.25s ease-out forwards pop;position:fixed}@keyframes floaty{0%,to{opacity:.62;transform:translateY(0)rotate(0)scale(1)}50%{opacity:1;transform:translateY(-13px)rotate(10deg)scale(1.14)}}@keyframes pulse{0%{box-shadow:0 16px 30px #ff58b357,0 0 #fff0}to{box-shadow:0 18px 38px #b390ff7a,0 0 0 8px #ffffff42}}@keyframes result-pop{0%{transform:scale(.72)rotate(-8deg)}58%{transform:scale(1.13)rotate(4deg)}to{transform:scale(1)rotate(0)}}@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%)scale(.15)rotate(0)}22%{opacity:1}to{transform:translate(calc(-50% + var(--burst-x)), -230px) scale(1.25) rotate(var(--burst-rotate));opacity:0}}@media (width<=420px){.shell{padding-left:8px;padding-right:8px}.hero{max-height:calc(100dvh - 16px);padding:10px}.stage-card{width:min(94vw,56dvh)}.mascot{display:none}}@media (height<=720px) and (width<=560px){.hero{grid-template-rows:auto minmax(0,1fr) auto;gap:6px}h1{font-size:clamp(2.1rem,10vw,3.2rem)}.stage-card{width:min(92vw,54dvh)}}