:root{--demo-paper:#f8f8ef;--demo-ink:#252b1c;--demo-lime:#d3e936}
body.item-gameplay-demo{background:#10121c}
.item-demo .masthead{padding-bottom:9px}
.item-demo .race-heading{padding-top:9px}
.item-demo .race-stage:not(.finished){height:clamp(295px,calc(100svh - 365px),500px)}
.item-demo .race-progress{margin:4px auto 9px}
.item-demo .race-progress p{margin:5px -20px 0;min-height:18px}
.item-demo .race-heading h2{font-size:23px}
.item-demo .live-standings{top:12px;left:10px;right:auto;width:150px}
.item-demo .standing-row{font-size:9px;gap:4px;padding:5px 6px;background:#f8f8efbc;backdrop-filter:blur(7px)}
.item-demo .standing-row.is-player{background:#252b1ceb;color:#f8f8ef}
.held-item{flex:0 0 auto;max-width:85px;font-size:9px;font-weight:750;white-space:nowrap}
.item-feed{position:absolute;z-index:8;bottom:12px;left:50%;transform:translateX(-50%);max-width:92%;display:flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid #ffffffd8;border-radius:999px;background:#252b1ced;color:#f8f8ef;box-shadow:0 7px 24px #252b1c32;backdrop-filter:blur(10px);font-size:10px;white-space:nowrap;pointer-events:none}
.item-feed span{font-size:18px}.item-feed strong{overflow:hidden;text-overflow:ellipsis}.item-feed.pop{animation:feed-pop .28s both}
.dice-console{position:relative;z-index:5;margin:0;padding:10px 11px 6px;border:1px solid #ffffffb8;border-radius:18px;background:linear-gradient(125deg,#f8f8efe8,#f8f8efbb);box-shadow:0 8px 25px #52601522;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.dice-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 3px 8px;font-size:11px;color:#687352}
.dice-meta strong{color:#252b1c}.dice-meta .protected{font-weight:800;color:#3e6028}
.dice-button{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:20px;width:100%;min-height:82px;padding:12px 20px;border:1px solid #252b1c;border-radius:14px;background:linear-gradient(120deg,#252b1c,#39452b);color:#f8f8ef;box-shadow:0 4px 0 #151e10;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.dice-button:disabled{opacity:1;cursor:default;background:linear-gradient(120deg,#56614b,#687455);border-color:#56614b;box-shadow:0 4px 0 #3d4833}
.dice-button.ready:active{transform:translateY(3px);box-shadow:0 1px 0 #151e10}
.dice-button.new-turn{animation:ready-pop .3s ease-out}
.dice-button-copy{display:grid;gap:5px;min-width:180px}.dice-button-copy strong{font-size:24px;font-weight:850;letter-spacing:-.5px;line-height:1.2}.dice-button-copy small{font-size:11px;color:#e1e8ce}
.dice-cooldown{position:absolute;left:0;bottom:0;height:4px;width:var(--charge,0%);background:#d3e936;transition:width .09s linear}
.dice-face{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:3px;padding:8px;width:53px;height:53px;flex:0 0 53px;border-radius:11px;transform:rotate(-9deg);background:#f8f8ef;box-shadow:3px 4px 0 #a3af80;color:#252b1c}
.dice-face i{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:0;align-self:center;justify-self:center}
.dice-face[data-value="1"] i:nth-child(5),.dice-face[data-value="2"] i:nth-child(1),.dice-face[data-value="2"] i:nth-child(9),.dice-face[data-value="3"] i:nth-child(1),.dice-face[data-value="3"] i:nth-child(5),.dice-face[data-value="3"] i:nth-child(9),.dice-face[data-value="4"] i:nth-child(1),.dice-face[data-value="4"] i:nth-child(3),.dice-face[data-value="4"] i:nth-child(7),.dice-face[data-value="4"] i:nth-child(9),.dice-face[data-value="5"] i:nth-child(odd),.dice-face[data-value="6"] i:nth-child(3n+1),.dice-face[data-value="6"] i:nth-child(3n){opacity:1}
.dice-face.rolling{animation:dice-tumble .48s cubic-bezier(.2,.7,.3,1)}
.dice-outcome{margin:10px 0 3px;text-align:center;font-size:11px;line-height:1.5;color:#596329;font-weight:650}
.held-card{position:absolute;left:0;right:0;bottom:calc(100% + 8px);padding:11px 12px;border:1px solid #a9b58e;border-radius:15px;background:#f8f8eff5;box-shadow:0 6px 25px #252b1c22;backdrop-filter:blur(12px)}
.held-card>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:7px}.held-card strong{font-size:16px}.held-card small{font-size:10px;color:#687352}.held-card p{font-size:11px;color:#687352;margin:5px 0 8px}
.dice-targets{display:flex;gap:6px}.dice-targets button{flex:1;min-width:0;min-height:40px;padding:6px 3px;border:1px solid #687352;border-radius:9px;background:#252b1c;color:#f8f8ef;font-size:11px;font-weight:750}
.item-demo.showing-results .dice-console{display:none}
.item-result{display:flex;align-items:center;gap:12px;margin:15px 0;padding:12px 14px;border:1px solid #aab492;border-radius:14px;background:#f8f8efb8}
.item-result>span{font-size:27px}.item-result>div{display:grid;gap:6px}.item-result strong{font-size:14px}.item-result small{font-size:11px;line-height:1.7;color:#687352}
@keyframes dice-tumble{0%{transform:rotate(-9deg) scale(1)}25%{transform:rotate(100deg) scale(.65)}65%{transform:rotate(320deg) scale(1.16)}100%{transform:rotate(351deg) scale(1)}}
@keyframes ready-pop{50%{transform:scale(1.025)}}
@keyframes feed-pop{from{opacity:0;transform:translate(-50%,8px) scale(.94)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@media(max-width:600px){body.item-gameplay-demo{padding:0;background:var(--demo-lime)}.item-demo .race-stage:not(.finished){height:clamp(260px,calc(100svh - 355px),520px)}.item-demo .page-footer{font-size:9px;padding-top:10px}.item-demo .race-heading .eyebrow{font-size:9px}}
@media(max-height:700px){.item-demo .race-stage:not(.finished){height:calc(100svh - 330px);min-height:230px}.dice-button{min-height:72px}.dice-button-copy strong{font-size:22px}.item-demo .race-heading{padding-top:3px}.item-demo .race-heading h2{font-size:20px}.dice-meta{padding-bottom:5px}}
@media(prefers-reduced-motion:reduce){.dice-face.rolling,.dice-button.new-turn,.item-feed.pop{animation:none}}