#three-secret[hidden],#three-picks[hidden],#threes-note[hidden]{display:none}
#three-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-self:center;width:min(100%,420px);gap:8px;margin-top:12px;flex-shrink:0}
#three-picks button{min-height:44px;min-width:0;padding:8px 12px;white-space:normal;line-height:1.4}
#three-picks button[aria-pressed="true"]{background:var(--accent-soft,#f0eaf9);border-color:var(--purple);color:var(--purple);box-shadow:inset 0 0 0 1px var(--purple)}
#three-picks button[aria-pressed="true"]:before{content:'✓ ';font-weight:800}
#three-picks button:disabled{opacity:.8;cursor:default}
.threes-units{transform:scale3d(var(--unit-fit,.8),var(--unit-fit,.8),var(--unit-fit,.8));transition:none}
.threes-apart .unit-cube{transform:translate3d(calc(var(--three-x)*var(--unit)),calc(var(--three-y)*var(--unit)),0)}
.three-label{position:absolute;left:calc(var(--three-label-x)*var(--unit));top:calc(var(--three-label-y)*var(--unit));transform:translate3d(-50%,-50%,calc(var(--unit)/2 + 2px));padding:3px 7px;border:1px solid var(--line);border-radius:12px;background:var(--surface,#fffcf9);color:var(--ink);font-size:calc(14px / var(--unit-fit,.8));font-weight:750;line-height:1.2;opacity:0;transition:opacity .2s}
.threes-apart .three-label{opacity:1}
.three-label.three-lit{border-color:var(--purple);background:var(--accent-soft,#f0eaf9);color:var(--purple)}
.three-lit .unit-front{box-shadow:inset 0 0 0 3px #ffedac,inset 0 0 10px #fff8bb}
.three-face{position:absolute;left:calc(var(--three-label-x)*var(--unit));top:calc(var(--three-label-y)*var(--unit));width:calc(.5*var(--unit));height:calc(.18*var(--unit));border-bottom:calc(.045*var(--unit)) solid #302532;border-radius:0 0 50% 50%;transform:translateZ(calc(var(--unit)/2 + 2px));opacity:0;transition:opacity .2s}
.three-face:before,.three-face:after{content:'';position:absolute;top:calc(-.42*var(--unit));width:calc(.27*var(--unit));height:calc(.32*var(--unit));border:1px solid #302532;border-radius:50%;background:radial-gradient(ellipse at 55% 55%,#302532 30%,white 33%)}
.three-face:before{left:calc(-.16*var(--unit))}.three-face:after{right:calc(-.16*var(--unit))}
.threes-apart .three-face{opacity:1}
.threes-performing .unit-cube,.threes-performing .three-face{animation:three-hop .55s ease calc(var(--three-order)*.36s)}
@keyframes three-hop{0%,100%{translate:0 0}45%{translate:0 calc(-.6*var(--unit))}}
:root[data-life="off"] .threes-units *{animation:none;transition:none}
@media(prefers-reduced-motion:reduce){.threes-units *{animation:none;transition:none}}
@media(max-width:420px){#three-picks{gap:5px}#three-picks button{padding:8px;font-size:12px}}