/* Dice app – minimal, responsive, platform-friendly */
.dice-wrap { padding: 1.2rem; }
.dice-header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  margin-bottom: 1rem;
}
.dice-grid{
  display:grid;
  grid-template-columns: 1.25fr .85fr;
  gap: 1.2rem;
  align-items: start;
}
@media (max-width: 900px){
  .dice-grid{ grid-template-columns: 1fr; }
  .dice-header{ align-items:center; }
}

.dice-stage{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: .9rem;
  padding: 1.2rem;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

.dice{
  --dice-bg: #f4f6fb;
  --dice-fg: #12151c;
  --dice-edge: rgba(0,0,0,.12);
  width: clamp(150px, 24vw, 220px);
  height: clamp(150px, 24vw, 220px);
  border-radius: 22px;
  position: relative;
  transform: translateZ(0);
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.9), rgba(255,255,255,0) 55%),
    linear-gradient(145deg, rgba(255,255,255,.75), rgba(255,255,255,.25)),
    var(--dice-bg);
  box-shadow:
    0 18px 40px rgba(0,0,0,.25),
    inset 0 2px 0 rgba(255,255,255,.5),
    inset 0 -2px 0 rgba(0,0,0,.12);
  border: 1px solid var(--dice-edge);
  display:grid;
  place-items:center;
}
.dice-face{
  width: 88%;
  height: 88%;
  border-radius: 18px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
}
.dice-value{
  font-size: clamp(52px, 9vw, 86px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--dice-fg);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

.dice.rolling{
  animation: dice-roll 1.05s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes dice-roll{
  0%   { transform: rotate(0deg) translateY(0) scale(1); }
  30%  { transform: rotate(260deg) translateY(-10px) scale(1.02); }
  60%  { transform: rotate(580deg) translateY(4px) scale(.99); }
  100% { transform: rotate(720deg) translateY(0) scale(1); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .dice.rolling{ animation: none; }
}

.dice-actions{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; }
.dice-hint{ font-size: .92rem; }
.dice-hint kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  padding: .12rem .38rem;
  border-radius: .45rem;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
}

.dice-panel-card{
  padding: 1.1rem;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.dice-panel-title{ margin:0 0 .85rem; font-size: 1.1rem; }

.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom: 1rem; }
.field-label{ font-weight:700; font-size:.95rem; opacity:.9; }

.select{
  width:100%;
  padding: .65rem .75rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: inherit;
}
.select:focus{ outline: 2px solid rgba(255,255,255,.22); outline-offset: 2px; }

.color-row{ display:flex; gap:.5rem; flex-wrap:wrap; }
.color-dot{
  width: 34px; height:34px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.18);
  background: #fff;
  cursor:pointer;
  position:relative;
}
.color-dot[aria-pressed="true"]{
  border-color: rgba(255,255,255,.6);
  box-shadow: 0 0 0 4px rgba(255,255,255,.12);
}
.color-dot:focus{ outline: 2px solid rgba(255,255,255,.25); outline-offset: 2px; }

.color-dot[data-color="white"]{ background:#f4f6fb; }
.color-dot[data-color="red"]{ background:#ff4d4f; }
.color-dot[data-color="blue"]{ background:#2f76ff; }
.color-dot[data-color="green"]{ background:#2dbf6e; }
.color-dot[data-color="purple"]{ background:#8a4dff; }
.color-dot[data-color="black"]{ background:#101318; }

.history{
  display:flex; gap:.5rem; flex-wrap:wrap;
  min-height: 36px;
}
.chip{
  padding: .3rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  font-weight: 700;
  font-size: .92rem;
}
.chip small{ opacity:.75; font-weight:600; }

.dice[data-color="white"]{ --dice-bg:#f4f6fb; --dice-fg:#101318; --dice-edge: rgba(0,0,0,.12); }
.dice[data-color="red"]{ --dice-bg:#ff4d4f; --dice-fg:#101318; --dice-edge: rgba(0,0,0,.14); }
.dice[data-color="blue"]{ --dice-bg:#2f76ff; --dice-fg:#0b1020; --dice-edge: rgba(0,0,0,.16); }
.dice[data-color="green"]{ --dice-bg:#2dbf6e; --dice-fg:#07150f; --dice-edge: rgba(0,0,0,.16); }
.dice[data-color="purple"]{ --dice-bg:#8a4dff; --dice-fg:#0f0820; --dice-edge: rgba(0,0,0,.16); }
.dice[data-color="black"]{ --dice-bg:#101318; --dice-fg:#f4f6fb; --dice-edge: rgba(255,255,255,.12); }