.yt-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:520px}
#yt-dice{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.yd{width:58px;height:58px;border-radius:12px;background:#fff;border:2px solid #d8cfbf;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:7px;gap:2px;cursor:pointer;box-shadow:0 3px 0 #cfc5b3,0 5px 10px rgba(0,0,0,.12);transition:transform .12s}
.yd i{display:block;border-radius:50%;margin:2px}
.yd i.on{background:#2b2a28}
.yd.blank{background:#f3eee4;box-shadow:none;cursor:default}
.yd.held{background:#fff4d6;border-color:#e2a72e;transform:translateY(-6px);box-shadow:0 3px 0 #e2a72e,0 8px 14px rgba(0,0,0,.15)}
.yd.held::after{content:"";}
.yd.spin{animation:ydspin .12s linear}
@keyframes ydspin{0%{transform:rotate(-12deg) scale(.94)}100%{transform:rotate(12deg) scale(1.02)}}
#yt-roll{font-size:16px;padding:10px 22px;min-width:200px}
.yt-hint{font-size:12px;color:var(--muted);margin-top:-6px}
.ys{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:14px}
.ys th,.ys td{padding:7px 10px;border-bottom:1px solid #f0eadf;text-align:center}
.ys tbody th{text-align:left;font-weight:700;white-space:nowrap}
.ys tbody th small{display:block;font-weight:400;color:var(--muted);font-size:11px;white-space:normal}
.ys thead th{background:#f7f2e8;font-size:13px}
.ys thead th.cur{background:var(--accent);color:#fff}
.ys td{width:22%;font-weight:700}
.ys td.pot{color:#b5ab99;font-weight:600}
.ys td.pick{cursor:pointer;color:var(--accent);background:#f1f8f6}
.ys td.pick:hover{background:#d9efe9}
.ys td.done.just{background:#fff1c9}
.ys tr.sub th,.ys tr.sub td{background:#faf7f1;font-size:13px}
.ys tr.tot th,.ys tr.tot td{background:#f3eee4;font-size:16px}
@media(max-width:520px){.yd{width:50px;height:50px;padding:6px}#yt-dice{gap:7px}.ys th,.ys td{padding:6px 6px}.ys{font-size:13px}}