@font-face{font-family:"Bricolage";font-weight:200 800;font-stretch:75% 100%;src:url(/fonts/bricolage.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-weight:100 900;src:url(/fonts/geistmono.woff2) format("woff2")}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%}
body{min-height:100dvh;display:flex;flex-direction:column;background:linear-gradient(180deg,#58a6ff,#a9d6ff 55%,#ffe1ee) fixed;font-family:"Bricolage",system-ui,sans-serif;color:#17225a;padding:max(14px,env(safe-area-inset-top)) 20px max(18px,env(safe-area-inset-bottom));user-select:none;-webkit-user-select:none}
small,.code{font:500 13px/1 "Geist Mono";letter-spacing:.14em;text-transform:uppercase;color:#17367f}small{display:block;color:#3a2fb0}
header{display:flex;justify-content:space-between;align-items:center;min-height:42px}.code b{letter-spacing:.18em}
.me{display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:99px;background:rgba(255,255,255,.8);font-weight:700;font-size:16px}.me img{width:34px;height:34px;border-radius:12px;background:var(--c);object-fit:cover;object-position:50% 16%}.me i{font:600 14px/1 "Geist Mono";font-style:normal;opacity:.7}
main{flex:1;display:flex;flex-direction:column;padding-top:18px}[hidden]{display:none!important}
h1{margin:6px 0 0;font-weight:800;font-stretch:80%;font-size:clamp(40px,12.5vw,56px);line-height:1;letter-spacing:-.02em}
.head{text-align:center;margin-top:8px}.hint{text-align:center;font-weight:600;font-size:16px;color:#2a3f8f;margin:14px 0 0}
.center{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;text-align:center}
.card{background:rgba(255,255,255,.78);border:1.5px solid #fff;border-radius:26px;padding:16px;box-shadow:0 14px 30px rgba(40,70,170,.18)}
button{font:inherit;border:0;cursor:pointer;color:inherit}
.go{display:block;width:100%;border-radius:22px;padding:18px;font-weight:800;font-stretch:85%;font-size:24px;color:#fff;background:linear-gradient(135deg,#2f8cff,#8259f5 55%,#ff5a9e);box-shadow:0 12px 26px rgba(90,70,220,.35)}
.go:disabled{background:#b9c6e6;box-shadow:none}.link{background:none;font-weight:700;font-size:15px;color:#2a3f8f;text-decoration:underline;padding:12px}
/* name picker */
.names{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 6px;margin-top:16px;padding-bottom:10px}
.names button{background:none;padding:0;font-weight:700;font-size:13.5px;text-align:center}.names img{display:block;width:100%;aspect-ratio:1;border-radius:26%;background:var(--c);object-fit:cover;object-position:50% 16%;margin-bottom:3px;box-shadow:0 6px 14px rgba(40,70,170,.2)}
.names button:disabled{opacity:.28}.names button:active img{transform:scale(.93)}
/* big face */
.big{width:min(46vw,190px);aspect-ratio:1;border-radius:28%;background:var(--c);overflow:hidden;box-shadow:0 18px 36px rgba(40,70,170,.28)}.big img{width:100%;height:100%;object-fit:cover;object-position:50% 16%}
/* roll */
.roll{position:relative;width:min(66vw,260px);aspect-ratio:1;margin:26px auto 0;border-radius:50%;display:grid;place-items:center;background:conic-gradient(from 210deg,#18c2b4,#2f8cff,#8259f5,#ff5a9e,#ffae1a,#18c2b4);box-shadow:0 26px 50px rgba(40,70,170,.35);transition:transform .12s}
.roll::before{content:"";position:absolute;inset:16px;border-radius:50%;background:rgba(255,255,255,.93)}.roll::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:3px solid #fff;animation:ring 1.6s ease-out infinite}
@keyframes ring{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.18);opacity:0}}
.roll:active{transform:scale(.94)}.roll b{position:absolute;bottom:11%;font:600 20px/1 "Geist Mono";letter-spacing:.14em}
.die{position:relative;width:118px;height:118px;border-radius:28px;background:#17225a;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:19px;gap:4px;box-shadow:0 14px 24px rgba(20,30,90,.35);animation:tilt 1.6s ease-in-out infinite}
@keyframes tilt{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(7deg) translateY(-8px)}}
.die span{place-self:center;width:20px;height:20px;border-radius:50%;background:#fff;opacity:0}
.die[data-n="1"] span:nth-child(5),.die[data-n="2"] span:nth-child(1),.die[data-n="2"] span:nth-child(9),.die[data-n="3"] span:nth-child(1),.die[data-n="3"] span:nth-child(5),.die[data-n="3"] span:nth-child(9),.die[data-n="4"] span:nth-child(1),.die[data-n="4"] span:nth-child(3),.die[data-n="4"] span:nth-child(7),.die[data-n="4"] span:nth-child(9),.die[data-n="5"] span:nth-child(1),.die[data-n="5"] span:nth-child(3),.die[data-n="5"] span:nth-child(5),.die[data-n="5"] span:nth-child(7),.die[data-n="5"] span:nth-child(9),.die[data-n="6"] span:nth-child(1),.die[data-n="6"] span:nth-child(3),.die[data-n="6"] span:nth-child(4),.die[data-n="6"] span:nth-child(6),.die[data-n="6"] span:nth-child(7),.die[data-n="6"] span:nth-child(9){opacity:1}
.die.small{width:96px;height:96px;padding:15px;border-radius:24px;animation:none;margin:8px auto}.die.small span{width:17px;height:17px}
.next{display:flex;gap:10px;margin-top:22px}.next span{flex:1;display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:18px;background:rgba(255,255,255,.7);border:1.5px solid #fff;font-weight:600;font-size:14.5px;line-height:1.15}
.next u{text-decoration:none;flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font:600 18px/1 "Geist Mono";color:#fff;background:#8259f5}.next .bad u{background:#ff2e63}.next .good u{background:#18a8c2}.next .gold u{background:#ffae1a}
/* standings */
.rank{margin-top:auto;display:grid;gap:6px;padding-top:18px}.rank div{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:18px;background:rgba(255,255,255,.7);font-weight:700;font-size:17px}
.rank div.on{background:#17225a;color:#fff}.rank img{width:38px;height:38px;border-radius:13px;background:var(--c);object-fit:cover;object-position:50% 16%}.rank em{font:600 18px/1 "Geist Mono";font-style:normal}
.stack{display:grid;gap:10px;margin-top:auto;padding-top:18px}
#toast{position:fixed;left:20px;right:20px;bottom:max(20px,env(safe-area-inset-bottom));padding:14px 18px;border-radius:18px;background:#17225a;color:#fff;font-weight:700;text-align:center;box-shadow:0 14px 30px rgba(20,30,90,.4)}