/* dice-kingdom hd: a felt tray + studio-lit dice painted on a canvas under the real die buttons,
   and a living kingdom diorama. Real buttons stay on top, transparent, and keep all input,
   focus rings and aria. html.pip-hd-dice / html.pip-hd-scene appear after each layer's first
   painted frame; ?hd=0 or a perf fallback removes them and the classic UI is back untouched. */
.dk-dice { position: relative; }
.dk-dice .hd-layer { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; display: block; border-radius: 14px; }
html.pip-hd-dice .dk-dice { padding: 12px 10px; gap: 14px; min-height: 108px; align-items: center; }
html.pip-hd-dice .dk-die {
  position: relative; z-index: 1; width: 86px; height: 86px;
  background: transparent; border-color: transparent; box-shadow: none; transform: none; color: transparent;
}
html.pip-hd-dice .dk-die .fc, html.pip-hd-dice .dk-die small { color: transparent; text-shadow: none; }
html.pip-hd-dice .dk-die[aria-pressed="true"], html.pip-hd-dice .dk-die.combo { background: transparent; border-color: transparent; box-shadow: none; transform: none; }
html.pip-hd-dice .dk-die:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; border-radius: 18px; }
html.pip-hd-dice .dk-die.tumble { animation: dk-hd-roll .45s linear; }
@keyframes dk-hd-roll { from { opacity: 1; } to { opacity: 1; } }
html.pip-hd-dice .dk-act .btn:not([hidden]), html.pip-hd-dice .hud .btn {
  background: linear-gradient(180deg, #f6c453, #c7861b); color: #3b2306; border: 0; font-weight: 800;
  box-shadow: 0 3px 0 #7a4c0a, 0 8px 14px rgba(90, 55, 8, .25);
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), box-shadow .18s;
}
html.pip-hd-dice .dk-act .btn.dk-alt { background: linear-gradient(180deg, #fff8e6, #f1dcae); color: #5b3a10; box-shadow: 0 3px 0 #b48a3c, 0 8px 14px rgba(90, 55, 8, .18); }
html.pip-hd-dice .dk-act .btn:active, html.pip-hd-dice .hud .btn:active { transform: translateY(3px) scale(.98); box-shadow: 0 0 0 #7a4c0a; }
html.pip-hd-dice .res-chip { background: linear-gradient(180deg, #fffaf0, #f5e6c4); border-color: #c9a45a; box-shadow: 0 2px 0 #c9a45a; }
html.pip-hd-dice .dk-build .btn { background: linear-gradient(180deg, #fffaf0, #f3e2bb); border: 1px solid #c9a45a; box-shadow: 0 2px 0 #c9a45a; }
html.pip-hd-dice .dk-build .btn.ok { background: linear-gradient(180deg, #fff3c4, #f6d77a); }
html.pip-hd-dice .dk-tr { background: #fffaf0; border-color: #c9a45a; }
html.pip-hd-dice #dk-overlay { background: radial-gradient(circle at 50% 40%, rgba(40, 28, 12, .8), rgba(10, 8, 4, .94)); backdrop-filter: blur(3px); }
html.pip-hd-dice .dk-card { background: linear-gradient(180deg, #fffaf0, #f6e8c8); border: 2px solid #c9a45a; }

/* diorama: parked off-screen until HD is on, so a classic or ?hd=0 page never shows it */
#dk-hd-scene { position: absolute; left: -9999px; top: 0; width: 640px; height: 220px; pointer-events: none; }
#dk-hd-scene .hd-layer { position: absolute; left: 0; top: 0; display: block; }
html.pip-hd-scene #dk-hd-scene {
  position: relative; left: auto; width: auto; height: clamp(150px, 46vw, 220px); margin: .7rem 0 0;
  border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 2px #c9a45a, 0 8px 18px rgba(60, 40, 10, .22);
}
html.pip-hd-scene #dk-kingdom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
html.pip-hd-dice .dk-die.empty { opacity: 1; }

.hd-about { margin: 1.25rem 0 .5rem; }
.hd-about h2 { margin: 0 0 .5rem; }
.hd-about p { margin: 0 0 .6rem; line-height: 1.55; }
@media (prefers-reduced-motion: reduce) {
  html.pip-hd-dice .dk-act .btn, html.pip-hd-dice .hud .btn { transition: none; }
}