.vtd {
  --bg: #F6F0E3; --fg: #3A2E28; --soft: #5B4E45; --lava: #C2410C; --peach: #E9B98F; --sand: #E4D7B8;
  --face: #3A2E28; --face-fg: #F6F0E3; --face-lab: #E9B98F; --pip: #C2410C; --ground: #C9B99A;
  --font: Poppins, "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) { .vtd:not([data-theme="light"]) {
  --bg: #1E1511; --fg: #F6F0E3; --soft: #D9CDB9; --sand: #4A3A32; --ground: #0f0a08; --face: #F6F0E3; --face-fg: #3A2E28; --face-lab: #C2410C; color-scheme: dark; } }
.vtd[data-theme="dark"] {
  --bg: #1E1511; --fg: #F6F0E3; --soft: #D9CDB9; --sand: #4A3A32; --ground: #0f0a08; --face: #F6F0E3; --face-fg: #3A2E28; --face-lab: #C2410C; color-scheme: dark; }

.vtd { background: var(--bg); color: var(--fg); font-family: var(--font); padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; box-sizing: border-box; border-radius: 16px; min-height: 560px; margin: 0 auto; max-width: 720px; }
.vtd .vtd-header { width: 100%; max-width: 560px; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 12px; }
.vtd .brand { font-size: 11px; font-weight: 700; letter-spacing: .3em; color: var(--lava); }
.vtd .vtd-h1 { margin: 4px 0 0; font-size: clamp(20px, 4.6vw, 30px); letter-spacing: -.01em; line-height: 1.05; text-wrap: balance; }
.vtd .vtd-h1 span { color: var(--lava); }
.vtd .lang { display: inline-flex; border: 2px solid var(--fg); border-radius: 999px; overflow: hidden; }
.vtd .lang button { appearance: none; border: 0; background: transparent; color: var(--fg); font: inherit; font-weight: 700; font-size: 12px; letter-spacing: .1em; padding: 6px 12px; cursor: pointer; }
.vtd .lang button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.vtd .lang button:focus-visible { outline: 3px solid var(--lava); outline-offset: -3px; }

.vtd .stage { min-height: 360px; padding: 40px 0; flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; perspective: 1100px; min-height: 0; position: relative; }
.vtd .die { --s: min(60vw, 240px); width: var(--s); height: var(--s); position: relative; transform-style: preserve-3d;
  transform: rotateX(-24deg) rotateY(34deg); transition: transform 2.2s cubic-bezier(.17,.84,.3,1); }
.vtd .die.rolling { transition: transform 2.6s cubic-bezier(.12,.72,.18,1); }
.vtd .face { position: absolute; inset: 0; background: var(--face); color: var(--face-fg); border-radius: 12%; border: 3px solid var(--lava);
  display: grid; grid-template-rows: auto 1fr auto; padding: 8%; box-sizing: border-box; backface-visibility: hidden; }
.vtd .face .lab { font-size: calc(var(--s) * .055); font-weight: 700; letter-spacing: .22em; color: var(--face-lab); }
.vtd .face .pips { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); align-self: stretch; margin: 6% 0; }
.vtd .face .pips i { display: block; width: 60%; height: 60%; margin: auto; border-radius: 50%; background: var(--pip); box-shadow: 0 0 calc(var(--s) * .04) var(--pip); visibility: hidden; }
.vtd .face .pips i.on { visibility: visible; }
.vtd .face .name { font-size: calc(var(--s) * .08); font-weight: 700; line-height: 1.05; text-wrap: balance; }
.vtd .face .sub { font-size: calc(var(--s) * .048); color: var(--face-lab); font-weight: 500; margin-top: 2%; }
.vtd .f1 { transform: rotateY(0deg) translateZ(calc(var(--s) / 2)); }
.vtd .f2 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.vtd .f3 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.vtd .f4 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.vtd .f5 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.vtd .f6 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.vtd .shadow { position: absolute; left: 50%; bottom: 6%; width: 50%; height: 9%; transform: translateX(-50%); border-radius: 50%; background: var(--ground); opacity: .45; filter: blur(10px); z-index: -1; transition: transform .6s, opacity .6s; }
.vtd .die.rolling ~ .shadow { transform: translateX(-50%) scale(.55); opacity: .2; }

.vtd .result { width: 100%; max-width: 560px; background: var(--lava); color: #fff; border-radius: 14px; padding: 14px 18px; text-align: center; min-height: 96px; box-sizing: border-box; display: grid; align-content: center; gap: 4px; }
.vtd .result .k { font-size: 11px; font-weight: 700; letter-spacing: .3em; color: #F6C8A8; }
.vtd .result .v { font-size: clamp(22px, 5vw, 32px); font-weight: 700; line-height: 1.05; }
.vtd .result .r { font-size: 14px; color: #FBE3D0; }
.vtd .result.idle { background: var(--sand); color: var(--fg); }
.vtd .result.idle .k, .vtd .result.idle .r { color: var(--soft); }
.vtd .result.pop { animation: pop .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes pop { from { transform: scale(.92); } to { transform: scale(1); } }

.vtd .controls { display: flex; gap: 12px; align-items: center; width: 100%; max-width: 560px; justify-content: center; }
.vtd button.play { appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; letter-spacing: .12em; font-size: 17px;
  background: var(--fg); color: var(--bg); border-radius: 999px; padding: 16px 34px 16px 26px; display: inline-flex; align-items: center; gap: 12px;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); transition: transform .15s; }
.vtd button.play:active { transform: scale(.97); }
.vtd button.play:disabled { opacity: .55; cursor: default; }
.vtd button.play:focus-visible { outline: 3px solid var(--lava); outline-offset: 3px; }
.vtd button.play svg { width: 22px; height: 22px; fill: var(--lava); }
.vtd .hist { font-size: 12px; color: var(--soft); text-align: center; min-height: 1.2em; }
.vtd .vtd-foot { font-size: 11px; color: var(--soft); text-align: center; letter-spacing: .06em; line-height: 1.5; max-width: 560px; }
@media (prefers-reduced-motion: reduce) { .die, .die.rolling { transition: transform .4s ease-out; } .result.pop { animation: none; } }

.vtd * { box-sizing: border-box; }
.vtd .lang button, .vtd button.play { text-transform: none; line-height: 1.2; }