:root {
  color-scheme: dark;
  font-family: Rajdhani, "Arial Narrow", Arial, sans-serif;
  background: #19170e;
  color: #f7f1d3;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: radial-gradient(circle at top, #51451b 0, #19170e 58%);
}

.roller {
  width: min(100%, 440px);
  padding: 24px;
  border: 2px solid #c7a930;
  border-radius: 10px;
  background: #292513;
  box-shadow: 0 12px 32px #0009;
  text-align: center;
}

.eyebrow, .mapping, .face-number, .outcome, .effect { margin: 0; }
.eyebrow { color: #d8c981; font-size: .78rem; letter-spacing: .16em; }
h1 { margin: 2px 0 4px; font-size: 2rem; text-transform: uppercase; }
.mapping { color: #ded6b3; }

.result {
  min-height: 0;
  margin: 18px 0 16px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas:
    "die face"
    "die outcome"
    "die effect";
  justify-items: start;
  align-content: center;
  align-items: center;
  column-gap: 14px;
  row-gap: 2px;
  text-align: left;
}

.die-frame {
  grid-area: die;
  align-self: start;
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 2px solid #dfc136;
  border-radius: 8px;
  background: #e3c531;
  color: #1b1809;
  box-shadow: inset 0 0 0 2px #86731e;
}

.die-frame img { display: block; max-width: none; max-height: none; }
.die-frame img[hidden] { display: none; }
.roll-spinner{position:absolute;inset:0;margin:auto;width:20px;height:20px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 12%,#1b1809 12% 20%,transparent 20% 32%,#1b1809 32% 40%,transparent 40% 52%,#1b1809 52% 60%,transparent 60% 72%,#1b1809 72% 80%,transparent 80% 92%,#1b1809 92%);animation:spin .65s linear infinite;z-index:2}.roll-spinner[hidden]{display:none}@keyframes spin{to{transform:rotate(360deg)}}
#die-fallback { font: 700 1.5rem/1 Arial, sans-serif; }
.face-number { grid-area: face; color: #d8c981; font-size: .82rem; text-transform: uppercase; }
.outcome { grid-area: outcome; font-size: 1.65rem; line-height: 1.05; font-weight: 700; text-transform: uppercase; }
.effect {
  grid-area: effect;
  max-width: 350px;
  min-height: 0;
  margin-top: 5px;
  color: #f7f1d3;
  font-size: 1rem;
  line-height: 1.3;
}

button {
  width: 100%;
  min-height: 48px;
  border: 1px solid #f3dc62;
  border-radius: 5px;
  background: #e3c531;
  color: #1b1809;
  font: 700 1.1rem Rajdhani, "Arial Narrow", Arial, sans-serif;
  text-transform: uppercase;
  cursor: pointer;
}

button:hover { background: #f2da58; }
button:disabled{opacity:.7;cursor:wait}.actions{display:grid;grid-template-columns:2fr 1fr;gap:10px}.secondary{background:#423b20;color:#f7f1d3}
button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
details { margin-top: 14px; color: #d8c981; }
details p { margin: 6px 0 0; }
.error { min-height: 1.2em; margin: 10px 0 0; color: #ff9b8f; }

@media (max-width: 420px) {
  .roller { padding: 18px; }
  .result { grid-template-columns: 40px minmax(0, 1fr); }
  .actions { grid-template-columns: 1fr; }
}