:root {
  --bg: #050814;
  --bg-elevated: #0f1628;
  --accent: #3da9fc;
  --accent-strong: #4f46e5;
  --text: #e5ecff;
  --text-muted: #7f8baa;
  --danger: #f97373;
  --radius-lg: 16px;
  --radius-sm: 10px;
  --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.55);
  --border-subtle: 1px solid rgba(255, 255, 255, 0.04);
  --transition-fast: 150ms ease-out;
  --transition-medium: 220ms ease-out;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
    Roboto, sans-serif;
  background: radial-gradient(circle at top, #1b2a4e 0, #050814 55%);
  color: var(--text);
}

body {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

/* App layout */

.app {
  max-width: 1100px;
  width: 100%;
  margin: 24px;
  padding: 20px 22px 22px;
  border-radius: 24px;
  background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.04),
        rgba(255, 255, 255, 0.01)
      )
      border-box,
    radial-gradient(circle at top left, #3da9fc33, transparent 60%),
    radial-gradient(circle at bottom right, #4f46e533, transparent 50%),
    #050814;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Header */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.app-header h1 {
  margin: 0 0 2px;
  font-weight: 650;
  letter-spacing: 0.03em;
}

.app-header p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.kbd {
  display: inline-flex;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 2px 7px;
  font-size: 0.8rem;
  background: rgba(15, 22, 40, 0.9);
}

.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Buttons */

button {
  font: inherit;
  border: none;
  cursor: pointer;
  transition: transform var(--transition-fast),
    box-shadow var(--transition-fast), background var(--transition-fast),
    border-color var(--transition-fast), color var(--transition-fast),
    opacity var(--transition-fast);
}

.primary-btn {
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #f9fbff;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.55);
}

.primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.7);
}

.primary-btn:active {
  transform: translateY(0);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.7);
}

.secondary-btn {
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(10, 16, 32, 0.96);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.9rem;
}

.secondary-btn:hover {
  background: rgba(18, 26, 52, 0.98);
}

.text-btn {
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
  padding: 4px 8px;
  border-radius: 999px;
}

.text-btn:hover {
  color: var(--danger);
  background: rgba(249, 115, 115, 0.08);
}

/* Controls section */

.controls {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr);
  gap: 14px;
}

@media (max-width: 800px) {
  .controls {
    grid-template-columns: minmax(0, 1fr);
  }
}

.control-block {
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    135deg,
    rgba(18, 27, 54, 0.96),
    rgba(7, 10, 24, 0.98)
  );
  border: var(--border-subtle);
}

.control-block h2 {
  margin: 0 0 8px;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.presets-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Add dice buttons -> tiny dice */

.add-dice-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.add-die-btn {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fdfdff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.45);
  text-transform: lowercase;
  position: relative;
  overflow: hidden;
}

/* Same gradients as big dice */
.add-die-btn[data-sides="4"] {
  background-image: linear-gradient(135deg, #f97316, #fb7185);
}

.add-die-btn[data-sides="6"] {
  background-image: linear-gradient(135deg, #3b82f6, #22d3ee);
}

.add-die-btn[data-sides="8"] {
  background-image: linear-gradient(135deg, #a855f7, #ec4899);
}

.add-die-btn[data-sides="10"] {
  background-image: linear-gradient(135deg, #22c55e, #14b8a6);
}

.add-die-btn[data-sides="12"] {
  background-image: linear-gradient(135deg, #facc15, #f97316);
}

.add-die-btn[data-sides="20"] {
  background-image: linear-gradient(135deg, #ef4444, #fb7185);
}

.add-die-btn[data-sides="100"] {
  background-image: linear-gradient(135deg, #6366f1, #0ea5e9);
}

/* Little highlight overlay, like the main dice */
.add-die-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, #ffffff44, transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.add-die-btn:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.65);
}

.add-die-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
}

.hint-text {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Preset cross-table */

.preset-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 160px;
  overflow-y: auto;
  padding-right: 4px;
}

.preset-row-line {
  display: grid;
  grid-template-columns: 40px repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.preset-row-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.preset-row-header {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.preset-header-cell {
  font-size: 0.78rem;
  text-align: center;
  opacity: 0.8;
}

.preset-btn {
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(8, 13, 30, 0.9);
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.78rem;
  white-space: nowrap;
  width: 100%;
  text-align: center;
}

.preset-btn:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(15, 22, 40, 0.9);
}

/* Dice area */

.dice-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 200px;
}

/* Summary (total bar + metrics) BEFORE dice grid */

.summary {
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    135deg,
    rgba(7, 11, 28, 0.97),
    rgba(13, 20, 41, 0.97)
  );
  border: var(--border-subtle);
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
  font-size: 0.9rem;
}

@media (max-width: 700px) {
  .summary {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }
}

.summary-main {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.summary-label {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
}

.summary-value {
  font-weight: 700;
  font-size: 1.3rem;
}

/* Stats row (highest / lowest / average) */

.summary-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.metric-pill {
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(9, 15, 32, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.metric-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.metric-value {
  font-size: 0.9rem;
  font-weight: 600;
}

.summary-detail {
  color: var(--text-muted);
  font-size: 0.84rem;
  max-width: 100%;
  word-break: break-word;
}

.dice-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
  align-content: flex-start;
  justify-items: center; /* Center dice within grid cells */
}

/* Dice card: square, big centered number, gradients per die type
   + max visual size so a single die can't be enormous */

.die-card {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
  width: min(100%, 180px); /* max dice width */
}

/* Type-specific gradients */
.die-card--d4 {
  background-image: linear-gradient(135deg, #f97316, #fb7185);
}

.die-card--d6 {
  background-image: linear-gradient(135deg, #3b82f6, #22d3ee);
}

.die-card--d8 {
  background-image: linear-gradient(135deg, #a855f7, #ec4899);
}

.die-card--d10 {
  background-image: linear-gradient(135deg, #22c55e, #14b8a6);
}

.die-card--d12 {
  background-image: linear-gradient(135deg, #facc15, #f97316);
}

.die-card--d20 {
  background-image: linear-gradient(135deg, #ef4444, #fb7185);
}

.die-card--d100 {
  background-image: linear-gradient(135deg, #6366f1, #0ea5e9);
}

/* Subtle overlay for readability */
.die-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, #ffffff33, transparent 65%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.die-value {
  position: relative;
  z-index: 1;
  font-size: clamp(1.8rem, 6vw, 2.8rem); /* responsive, capped */
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fdfdff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Small die label bottom-left */

.die-label {
  position: absolute;
  left: 10px;
  bottom: 8px;
  z-index: 1;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
}

/* Rolling animation (generic, one-shot) */

.die-card.rolling {
  animation: shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes shake {
  10%,
  90% {
    transform: translateX(-1px) rotate(-0.5deg);
  }
  20%,
  80% {
    transform: translateX(2px) rotate(0.5deg);
  }
  30%,
  50%,
  70% {
    transform: translateX(-3px) rotate(-0.5deg);
  }
  40%,
  60% {
    transform: translateX(3px) rotate(0.5deg);
  }
}

/* --- Persistent critical animations for ALL dice --- */

/* Critical success: smooth breathing scale + soft green aura, infinite */
.die-card.crit-success {
  animation: critSuccessBreath 1.2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.0),
    0 0 22px rgba(34, 197, 94, 0.85);
}

@keyframes critSuccessBreath {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.0),
      0 0 16px rgba(34, 197, 94, 0.4);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.32),
      0 0 26px rgba(34, 197, 94, 0.95);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.0),
      0 0 16px rgba(34, 197, 94, 0.4);
  }
}

/* Critical failure: nervous jitter + red flicker overlay, infinite */
.die-card.crit-fail {
  animation:
    critFailShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite,
    critFailGlow 1s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.0),
    0 0 18px rgba(248, 113, 113, 0.9);
}

.die-card.crit-fail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(248, 113, 113, 0.28), transparent);
  mix-blend-mode: screen;
  pointer-events: none;
}

@keyframes critFailShake {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  20% {
    transform: translate(-2px, 1px) rotate(-1deg);
  }
  40% {
    transform: translate(2px, -1px) rotate(1deg);
  }
  60% {
    transform: translate(-2px, -1px) rotate(-1deg);
  }
  80% {
    transform: translate(2px, 1px) rotate(1deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes critFailGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.1),
      0 0 16px rgba(248, 113, 113, 0.7);
    opacity: 0.9;
  }
  50% {
    box-shadow: 0 0 0 5px rgba(248, 113, 113, 0.35),
      0 0 26px rgba(248, 113, 113, 1);
    opacity: 1;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.1),
      0 0 16px rgba(248, 113, 113, 0.7);
    opacity: 0.9;
  }
}

/* Scroll for many dice (small screens / windows) */

@media (max-height: 500px) {
  .dice-grid {
    max-height: 260px;
    overflow: auto;
    padding-right: 4px;
  }
}

/* --------- Mobile layout: controls on left & right, dice center --------- */

@media (max-width: 700px) {
  .app {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) 80px;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
  }

  .app-header {
    grid-column: 1 / -1;
  }

  .controls {
    grid-column: 1 / -1;
    grid-row: 2;
    display: contents; /* allow children to become grid items directly */
  }

  .dice-area {
    grid-column: 2;
    grid-row: 2;
  }

  .control-block {
    padding: 8px 4px;
    border-radius: 18px;
  }

  .control-block h2,
  .hint-text {
    display: none; /* keep only functional bits */
  }

  .control-block-add {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .control-block-presets {
    grid-column: 3;
    grid-row: 2;
    display: flex;
    flex-direction: column;
  }

  .add-dice-buttons {
    flex-direction: column;
    align-items: center;
  }

  .presets-header {
    justify-content: center;
  }

  .presets-header h2 {
    display: none;
  }

  .preset-row {
    max-height: calc(100vh - 140px);
  }

  .preset-row-line {
    grid-template-columns: 1fr;
  }

  .preset-row-label,
  .preset-header-cell {
    display: none;
  }

  .preset-btn {
    font-size: 0.75rem;
  }
}