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

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: radial-gradient(circle at top, #393939 0, #171717 55%);
}

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

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

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

.die-frame {
  grid-area: die;
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 2px solid #aaa;
  border-radius: 8px;
  background: #050505;
  box-shadow: inset 0 0 0 2px #333;
}

.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%,#eee 12% 20%,transparent 20% 32%,#eee 32% 40%,transparent 40% 52%,#eee 52% 60%,transparent 60% 72%,#eee 72% 80%,transparent 80% 92%,#eee 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: #aaa; font-size: .82rem; text-transform: uppercase; }
.outcome { grid-area: outcome; font-size: 1.65rem; line-height: 1.05; font-weight: 700; text-transform: uppercase; }

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

button:hover { background: #fff; }
button:disabled{opacity:.7;cursor:wait}.actions{display:grid;grid-template-columns:2fr 1fr;gap:10px}.secondary{background:#383838;color:#f4f1e8}
button:focus-visible { outline: 3px solid #f1c84b; outline-offset: 3px; }
.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; }
}