@layer components{.yd-stage{--wood:#2b1b11;--felt:#12463a;--paper:#fbf6ea;--pad-ink:#2a1d14;--pencil:#a2907e;--pip-ink:#9a5a2c;padding:10px 12px max(12px, env(safe-area-inset-bottom));color:#fff;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:radial-gradient(120% 70% at 50% 0,#ffd6aa1a,#0000 60%),repeating-linear-gradient(92deg,#ffffff05 0 2px,#0000 2px 9px),radial-gradient(100% 90% at 50% 30%,#4a2f1d 0%,#2d1c12 60%,#1a100a 100%);gap:10px;container-type:size}.yd-bar{flex:none;align-items:center;gap:8px;min-height:40px;display:flex}.yd-turn{color:#ffffff9e;align-items:baseline;gap:4px;margin-right:auto;font-size:13px;display:flex}.yd-turn b{font-family:var(--font-display), var(--font-sans);letter-spacing:-.03em;color:#fff;font-size:22px;font-weight:800}.yd-turn span{font-weight:600}.yd-mode{background:#00000047;border-radius:12px;padding:3px;display:flex;box-shadow:inset 0 0 0 1px #ffffff14}.yd-mode button{color:#ffffffa8;border-radius:9px;height:30px;padding:0 11px;font-size:13px;font-weight:650;transition:background .16s,color .16s}.yd-mode button[aria-pressed=true]{color:#1a100a;background:#f3e6d2;box-shadow:inset 0 -2px #0000002e}.yd-mode button:disabled:not([aria-pressed=true]){opacity:.35}.yd-mode button:focus-visible{outline:2px solid var(--rn);outline-offset:1px}.yd-scores{gap:6px;margin-left:auto;display:flex}.yd-chip{color:#ffffffb3;background:#00000042;border-radius:10px;align-items:center;gap:5px;height:32px;padding:0 10px;font-size:12.5px;font-weight:600;display:inline-flex}.yd-chip b{font-family:var(--font-display), var(--font-sans);color:#fff;font-size:17px;font-weight:800}.yd-chip.is-pip b{color:#f0bf8f}@container (max-width:400px){.yd-turn{font-size:12px}.yd-mode button{padding:0 8px;font-size:12px}.yd-chip{gap:4px;padding:0 8px}}.yd-play{flex-direction:column;flex:1;gap:10px;min-height:0;display:flex}.yd-tray{flex-direction:column;flex:auto;gap:10px;min-height:0;display:flex}.yd-felt{background:radial-gradient(circle at 50% 40%, #ffffff12, transparent 65%), radial-gradient(#00000029 1px, transparent 1.4px) 0 0 / 5px 5px, var(--felt);border-radius:22px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;min-height:124px;padding:18px 10px 12px;display:flex;position:relative;box-shadow:inset 0 0 0 5px #5a3920,inset 0 0 0 7px #00000059,inset 0 10px 26px #00000080,0 10px 26px #00000059}.is-pip-turn .yd-felt{cursor:pointer}.yd-dice{gap:clamp(8px,2.6cqw,16px);display:flex}.yd-tip{text-align:center;color:#ffffffbd;min-height:18px;margin:0;font-size:13.5px;font-weight:600}.yd-die{--size:clamp(52px, 15cqw, 74px);width:var(--size);height:var(--size);transition:translate .2s var(--ease-out);-webkit-tap-highlight-color:transparent;background:0 0;border:0;padding:0;position:relative}.yd-cube{background:radial-gradient(circle at 30% 22%,#fffef9 0%,#f4ecdb 58%,#e2d4b8 100%);border-radius:23%;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);padding:14%;transition:box-shadow .16s,opacity .16s;display:grid;position:absolute;inset:0;box-shadow:inset 0 -3px #78603c40,inset 0 2px #fff,0 4px #b9a585,0 9px 14px #00000073}.yd-cube i{aspect-ratio:1;border-radius:50%;place-self:center;width:62%}.yd-cube i.is-on{background:radial-gradient(circle at 40% 35%,#4a3a2e,#17110c 70%);box-shadow:inset 0 1px 1px #00000080,0 1px #ffffffb3}.yd-die.is-blank .yd-cube{opacity:.5;filter:saturate(.4);animation:yd-wait 2.4s ease-in-out calc(var(--i) * .14s) infinite}@keyframes yd-wait{0%,70%,to{transform:translateY(0)rotate(0)}80%{transform:translateY(-7px)rotate(-6deg)}90%{transform:translateY(0)rotate(2deg)}}.yd-die.is-held{translate:0 -9px}.yd-die.is-held .yd-cube{box-shadow:inset 0 -3px 0 #78603c40, inset 0 2px 0 #fff, 0 4px 0 #b9a585, 0 0 0 3px var(--rn), 0 12px 18px #00000080}.yd-die.is-pip.is-held .yd-cube{box-shadow:inset 0 -3px #78603c40,inset 0 2px #fff,0 4px #b9a585,0 0 0 3px #e9a86a,0 12px 18px #00000080}.yd-held{white-space:nowrap;color:#0d0d0f;background:var(--rn);opacity:0;transition:opacity .14s ease, scale .2s var(--ease-pop);pointer-events:none;border-radius:6px;padding:2px 7px;font-size:11px;font-weight:750;position:absolute;bottom:-24px;left:50%;translate:-50%;scale:.7}.yd-die.is-pip .yd-held{background:#e9a86a}.yd-die.is-held .yd-held{opacity:1;scale:1}.yd-die:enabled{cursor:pointer}.yd-die:disabled{cursor:default}.yd-die:focus-visible{outline:none}.yd-die:focus-visible .yd-cube{outline-offset:3px;outline:3px solid #fff}.yd-die.is-rolling .yd-cube{animation:yd-tumble .46s cubic-bezier(.3, .7, .4, 1) calc(var(--i) * 25ms) both}@keyframes yd-tumble{0%{transform:translate(0)rotate(0)scale(1)}25%{transform:translate(calc((var(--i) - 2) * 4px), -26px) rotate(-120deg) scale(.92)}55%{transform:translate(calc((var(--i) - 2) * -3px), 4px) rotate(-250deg) scale(1.04)}78%{transform:translateY(-6px)rotate(-340deg)scale(1)}to{transform:translate(0)rotate(-360deg)scale(1)}}.yd-burst{pointer-events:none;place-items:start center;padding-top:clamp(8px,4cqh,34px);display:grid;position:absolute;inset:0}.yd-burst .display{letter-spacing:-.05em;color:var(--rn);text-shadow:0 3px #2f3d00,0 8px 30px #0009;animation:yd-burst 1.6s var(--ease-pop) both;font-size:clamp(30px,9cqw,52px);font-weight:800}.yd-burst .confetti{top:45%}@keyframes yd-burst{0%{opacity:0;transform:scale(.4)rotate(-6deg)}18%{opacity:1;transform:scale(1.08)rotate(-3deg)}30%{transform:scale(1)rotate(-3deg)}80%{opacity:1;transform:scale(1)translateY(-6px)rotate(-3deg)}to{opacity:0;transform:scale(.96)translateY(-16px)rotate(-3deg)}}.yd-roll{flex:none;align-self:center;width:min(100%,380px)}.yd-roll:focus-visible{outline-offset:3px;outline:3px solid #fff}.yd-roll:disabled{--key:#ffffff14;--key-ink:#ffffffb8;--edge:#00000040;opacity:1;box-shadow:inset 0 0 0 1.5px #ffffff1f}.yd-roll:disabled .yd-left i{box-shadow:inset 0 0 0 1.5px #fff6}.yd-left{gap:4px;margin-left:4px;display:inline-flex}.yd-left i{border-radius:50%;width:8px;height:8px;box-shadow:inset 0 0 0 1.5px #0d0d0f80}.yd-left i.is-on{box-shadow:none;background:#0d0d0f}.yd-skip{--key:#ffffff1a;--key-ink:#fff;--edge:#0000004d;box-shadow:inset 0 -3px 0 var(--edge), inset 0 0 0 1.5px #ffffff24}.yd-sheet{color:var(--pad-ink);background:linear-gradient(90deg, transparent calc(50% - .75px), #2a1d141f calc(50% - .75px) calc(50% + .75px), transparent calc(50% + .75px)), linear-gradient(180deg, #fffdf6, var(--paper));border-radius:18px;flex:none;grid-template-columns:1fr 1fr;column-gap:10px;padding:8px 10px 4px;display:grid;box-shadow:0 2px #d9cbb0,0 14px 30px #0006}.yd-half{flex-direction:column;min-width:0;display:flex}.yd-head,.yd-row{grid-template-columns:minmax(0,1fr) 38px;align-items:center;column-gap:2px;display:grid}.is-versus .yd-head,.is-versus .yd-row{grid-template-columns:minmax(0,1fr) 34px 34px}.yd-head{letter-spacing:.06em;text-align:center;height:20px;color:var(--pencil);font-size:11px;font-weight:700}.yd-head span:nth-child(3){color:var(--pip-ink)}.yd-row{text-align:left;width:100%;min-height:42px;color:inherit;font:inherit;background:0 0;border:0;border-top:1px solid #2a1d141a;border-radius:0;padding:0 2px 0 4px;position:relative}.yd-half>.yd-head+.yd-row{border-top:0}.yd-label{letter-spacing:-.015em;white-space:nowrap;align-items:center;gap:6px;min-width:0;font-size:13.5px;font-weight:600;display:flex;overflow:hidden}.yd-label small{color:var(--pencil);font-size:11px;font-weight:600}.yd-mini{background:#efe5d1;border-radius:4px;flex:none;grid-template-columns:repeat(3,1fr);width:15px;height:15px;padding:2px;display:grid;box-shadow:inset 0 0 0 1px #2a1d1433}.yd-mini i{border-radius:50%;place-self:center;width:2.6px;height:2.6px}.yd-mini i.is-on{background:var(--pad-ink)}.yd-v{height:30px;font-family:var(--font-display), var(--font-sans);letter-spacing:-.03em;border-radius:8px;place-items:center;font-size:16px;font-weight:800;display:grid}.yd-v.is-zero{color:#2a1d1461}.yd-row.is-done{background:#2a1d140e}.is-versus .yd-row.is-done{background:linear-gradient(90deg,#2a1d140e calc(100% - 36px),#0000 0)}.yd-row.is-done>.yd-v:nth-child(2){font-weight:850}.yd-row.is-done>.yd-v:nth-child(2):not(.is-zero){color:#17100a}.yd-v.is-maybe{color:#a5713f;background:#fff9;border:1.5px dashed #a0703e8c;margin:0 2px;font-weight:600}.yd-v.is-maybe.is-zero{color:#a5713f80;border-color:#a0703e47}.yd-v.is-shut{color:#2a1d1438;font-weight:600}.yd-v.is-pop{animation:yd-pop .48s var(--ease-pop) both}.yd-row>.yd-v:nth-child(3){color:var(--pip-ink)}.yd-row>.yd-v.is-zero:nth-child(3){color:#9a5a2c66}@keyframes yd-pop{0%{background:var(--rn);transform:scale(.3)}60%{background:var(--rn)}to{background:0 0;transform:scale(1)}}.yd-row:disabled{cursor:default}.yd-row.is-live{cursor:pointer}@media (hover:hover){.yd-row.is-live:hover{background:#ccff3d38}}.yd-row.is-live:active{background:#ccff3d66}.yd-row.is-pick .yd-v.is-maybe{color:#0d0d0f;background:var(--rn);border-color:#0000;font-weight:800;box-shadow:inset 0 -2px #465c0059}.yd-row.is-own .yd-label{color:#0d0d0f}.yd-row:focus-visible{outline:2.5px solid var(--pad-ink);outline-offset:-2px;border-radius:8px}.yd-bonus,.yd-extra{cursor:default}.yd-bonus .yd-label{gap:7px}.yd-meter{background:#2a1d141a;border-radius:3px;flex:1;max-width:46px;height:6px;position:relative;overflow:hidden}.yd-meter i{transform-origin:0;transform:scaleX(var(--p));border-radius:inherit;transition:transform .5s var(--ease-out);background:linear-gradient(90deg,#b9814f,#6fb33a);position:absolute;inset:0}.yd-v.is-empty{color:#0000}.yd-total{border-top:2px solid #2a1d1499;grid-column:1/-1;grid-template-columns:minmax(0,1fr) 54px;min-height:46px;margin-top:2px}.is-versus .yd-total{grid-template-columns:minmax(0,1fr) 54px 54px}.yd-total .yd-label{font-size:15px;font-weight:750}.yd-total .yd-v{font-size:22px}@container (min-width:720px){.yd-stage{padding:14px 20px 18px}.yd-play{flex-direction:row;gap:18px}.yd-tray{flex:1}.yd-sheet{flex:none;align-self:center;width:min(500px,46cqw);padding:10px 14px 6px}.yd-row{min-height:46px}.yd-label{font-size:14.5px}.yd-v{font-size:18px}.yd-die{--size:clamp(52px, 6.6cqw, 80px)}}@container (max-height:640px){.yd-row{min-height:36px}.yd-felt{min-height:108px}}.yd-end{z-index:5;pointer-events:none;animation:screen-in .3s var(--ease-out) both;background:#140c078c;place-items:center;display:grid;position:absolute;inset:0}.yd-end .display{letter-spacing:-.055em;color:#fff;text-shadow:0 6px 30px #00000080;animation:pop .42s var(--ease-pop) both;font-size:clamp(48px,15cqw,84px);font-weight:800}.yd-end .confetti{top:42%}.yd-sum{align-items:center;gap:16px;display:flex}.yd-sum-dice{flex:none;display:flex}.yd-sum-dice .yd-die{--size:26px;margin-left:-5px}.yd-sum-dice .yd-cube{padding:12%;box-shadow:inset 0 -2px #78603c40,0 2px #b9a585,0 4px 6px #00000040}.yd-sum p{color:var(--on-dark-dim);margin:0;font-size:14px;line-height:1.35}.yd-sum b{color:var(--on-dark);font-weight:700}@media (prefers-reduced-motion:reduce){.yd-die,.yd-meter i{transition:none}.yd-die.is-rolling .yd-cube,.yd-die.is-blank .yd-cube,.yd-v.is-pop,.yd-burst .display,.yd-end .display{animation:none}}}