.vd-game-yahtzee { --game-color:#e0a22b; }
.fd-game,.fd-board { --fd-ink:#3a2f1c; color:var(--fd-ink); width:100%; min-width:0; }
.fd-game { max-width:980px; margin:0 auto; }
.fd-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin:1rem 0 1.2rem; color:var(--vd-ink); }
.fd-heading h1 { font-size:clamp(1.65rem,2.8vw,2.6rem); line-height:1.12; font-weight:750; letter-spacing:-.035em; margin:.35rem 0 0; overflow-wrap:anywhere; }
.fd-heading .vd-eyebrow { font-size:.67rem; letter-spacing:.13em; font-weight:800; }
.fd-rolls { display:flex; gap:.35rem; padding-top:.6rem; }
.fd-rolls i { width:.9rem; height:.9rem; border-radius:50%; background:#e0a22b; box-shadow:inset 0 -2px 0 #b9811c; }
.fd-rolls i.is-used { background:#e3dfcf; box-shadow:none; }
.fd-table { padding:1.2rem; margin-bottom:1rem; border-radius:1.6rem; background:radial-gradient(ellipse at 50% 30%,#3d7f5d,#2a5f45); }
.fd-roll-form { display:grid; gap:1rem; margin:0; }
.fd-dice { display:flex; justify-content:center; gap:.7rem; flex-wrap:wrap; }
.fd-die { display:block; width:4rem; height:4rem; padding:.5rem; border:1px solid #d6d3c0; border-radius:1rem; background:linear-gradient(160deg,#fffefa,#f0eddc); box-shadow:0 4px 0 #cfccb8, 0 8px 12px #0000002b, inset 0 1px 0 #fff; font:inherit; }
.fd-dice-empty .fd-die { background:#ffffff26; border-color:#ffffff40; box-shadow:none; }
.fd-pips { display:grid; grid-template:repeat(3,1fr)/repeat(3,1fr); width:100%; height:100%; place-items:center; }
.fd-pip { width:.62rem; height:.62rem; border-radius:50%; background:#2a2418; box-shadow:inset 0 1px 1px #0006; }
.fd-die:nth-child(1) .fd-pip { background:#2a2418; }
button.fd-die { cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .12s ease; }
button.fd-die:active { transform:scale(.94); }
.fd-die.is-held { transform:translateY(-.55rem); background:linear-gradient(160deg,#fff3c9,#f6d98a); border-color:#e0a22b; box-shadow:0 0 0 3px #e0a22b, 0 12px 16px #0000003a; }
.fd-roll { width:100%; min-height:54px; border-radius:999px; justify-content:center; font-size:1.05rem; }
.fd-card { overflow-x:auto; border-radius:1.4rem; background:var(--vd-panel,#fffefa); box-shadow:var(--lc-shadow,0 4px 14px #3a2f1c10); }
.fd-card table { width:100%; border-collapse:collapse; font-size:.85rem; }
.fd-card th,.fd-card td { padding:.45rem .5rem; text-align:center; border-bottom:1px solid #eeeadb; }
.fd-card thead th { position:sticky; top:0; background:var(--vd-panel,#fffefa); }
.fd-card tbody th { text-align:left; font-weight:650; white-space:nowrap; padding-left:.9rem; }
.fd-card .is-current { background:#fbf1d6; }
.fd-name { display:grid; justify-items:center; gap:.15rem; }
.fd-name .pr-character { width:1.9rem; height:1.9rem; display:block; }
.fd-name b { font-size:.72rem; max-width:5rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fd-bonus th,.fd-bonus td { font-size:.72rem; color:#7a6c4a; }
.fd-bonus b { color:#2f8f5b; }
.fd-total td,.fd-total th { font-size:1rem; border-bottom:0; padding-top:.7rem; padding-bottom:.7rem; }
.fd-score-form { margin:0; }
.fd-score { min-width:2.4rem; min-height:2.2rem; padding:0 .6rem; border:0; border-radius:.7rem; background:#e0a22b; color:#2a2418; font:inherit; font-weight:800; cursor:pointer; box-shadow:0 2px 0 #b9811c; animation:fd-nudge 1.6s ease-in-out infinite; }
.fd-score.is-zero { background:#e8e4d6; box-shadow:0 2px 0 #cfc9b4; color:#7a6c4a; animation:none; }
.fd-score:active { transform:translateY(2px); animation:none; }
.fd-potential { color:#9a8a60; }
@keyframes fd-nudge { 50% { transform:translateY(-2px); } }
.fd-again { margin-top:1rem; }
.fd-again .vd-button { width:100%; min-height:52px; border-radius:999px; justify-content:center; }
@media(prefers-reduced-motion:reduce){ .fd-score { animation:none; } }
@media(max-width:560px){ .fd-die { width:3.1rem; height:3.1rem; padding:.4rem; border-radius:.8rem; } .fd-pip { width:.48rem; height:.48rem; } .fd-dice { gap:.45rem; } .fd-card th,.fd-card td { padding:.4rem .3rem; } }
@media(min-width:900px){ .fd-board-tv .fd-die { width:5rem; height:5rem; } .fd-board-tv .fd-card table { font-size:1rem; } }

/* Five of a kind: celebrate. */
.fd-table.is-yahtzee { background:radial-gradient(ellipse at 50% 30%,#e8b23c,#b9731a); animation:fd-glow 1.2s ease-in-out infinite alternate; }
.fd-table.is-yahtzee .fd-die { animation:fd-hop .6s ease-out both; }
.fd-table.is-yahtzee .fd-die:nth-child(2) { animation-delay:.07s; } .fd-table.is-yahtzee .fd-die:nth-child(3) { animation-delay:.14s; } .fd-table.is-yahtzee .fd-die:nth-child(4) { animation-delay:.21s; } .fd-table.is-yahtzee .fd-die:nth-child(5) { animation-delay:.28s; }
.fd-yahtzee-title { color:#c8553a; animation:fd-pop .5s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes fd-glow { to { box-shadow:0 0 0 6px #f6d98a66, 0 0 40px #f2c25c99; } }
@keyframes fd-hop { 0% { transform:translateY(0) rotate(0); } 40% { transform:translateY(-1.2rem) rotate(-8deg); } 100% { transform:none; } }
@keyframes fd-pop { from { transform:scale(.5) rotate(-6deg); opacity:0; } }
@media(prefers-reduced-motion:reduce){ .fd-table.is-yahtzee,.fd-table.is-yahtzee .fd-die,.fd-yahtzee-title { animation:none; } }
