/* Ctrl Alt Create dice roller — turquoise, yellow-orange, coral */
:root {
  --teal: #43c0b9;
  --teal-light: #60c9c3;
  --teal-dark: #1a5c58;
  --teal-deep: #0e3331;
  --yellow: #ffc21a;
  --orange: #ff7a00;
  --coral: #e0453a;
  /* Darker coral so white label text meets ~4.5:1 contrast */
  --coral-btn: #c2332a;
  --coral-btn-hover: #a82b24;
  --ink: #102226;
  --paper: #f4fffd;
  --radius: 16px;
  font-family: "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
}

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

html, body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
}

body {
  min-height: 100vh;
  background-color: #1e8f8a;
  background-image:
    repeating-conic-gradient(
      from 0deg at 50% 42%,
      #43c0b9 0deg 12deg,
      #60c9c3 12deg 24deg
    );
  background-size: 100% 100%;
}

/* Faint sticker watermarks: over the sunburst, behind the dice card. */
.sticker-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.sticker-bg img {
  position: absolute;
  height: auto;
  opacity: 0.15;
  filter: grayscale(0.32) saturate(0.7) contrast(0.95);
  user-select: none;
  -webkit-user-drag: none;
}
.sticker-bg .s-rex {
  top: 3%;
  left: 1.5%;
  width: min(240px, 20vw);
  transform: rotate(-16deg);
}
.sticker-bg .s-kash {
  top: 4%;
  right: 2%;
  width: min(230px, 19vw);
  transform: rotate(12deg);
}
.sticker-bg .s-chairman {
  bottom: 6%;
  left: 2%;
  width: min(190px, 15vw);
  transform: rotate(9deg);
}
.sticker-bg .s-nova {
  bottom: 3%;
  right: 1.5%;
  width: min(200px, 16vw);
  transform: rotate(-13deg);
}
.sticker-bg .s-create {
  top: 46%;
  left: 2%;
  width: min(220px, 18vw);
  transform: rotate(18deg);
}
.sticker-bg .s-keystone {
  top: 36%;
  right: 3%;
  width: min(165px, 13.5vw);
  transform: rotate(-8deg);
}
@media (max-width: 800px) {
  .sticker-bg .s-create,
  .sticker-bg .s-keystone {
    display: none;
  }
  .sticker-bg .s-rex {
    top: -2%;
    left: -8%;
    width: 138px;
    transform: rotate(-18deg);
  }
  .sticker-bg .s-kash {
    top: -1%;
    right: -8%;
    width: 128px;
    transform: rotate(14deg);
  }
  .sticker-bg .s-chairman {
    bottom: -2%;
    left: -6%;
    width: 118px;
  }
  .sticker-bg .s-nova {
    bottom: -2%;
    right: -7%;
    width: 124px;
  }
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 18px 48px;
}

header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

h1 {
  margin: 0 0 6px;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 2px 0 #0e3331, 0 6px 16px rgba(14, 51, 49, 0.35);
}

.lede {
  margin: 0;
  max-width: 40rem;
  color: #f4fffd;
  font-size: 1rem;
  text-shadow: 0 1px 2px rgba(14, 51, 49, 0.55);
}

.icon-btn {
  appearance: none;
  border: 2px solid #fff;
  background: var(--teal-deep);
  color: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
}
.icon-btn:hover, .icon-btn:focus-visible {
  background: #164744;
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

.draft-banner,
header,
.panel {
  position: relative;
  z-index: 1;
}

.panel {
  background: rgba(244, 255, 253, 0.96);
  border-radius: 24px;
  padding: 20px 18px 24px;
  box-shadow: 0 18px 40px rgba(14, 51, 49, 0.28);
}

.field-label {
  display: block;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--teal-dark);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.pills button {
  appearance: none;
  min-width: 48px;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 2px solid var(--teal-dark);
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
}
.pills button[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--yellow), var(--orange));
  color: var(--ink);
  border-color: #b35a00;
  box-shadow: 0 3px 0 #b35a00;
}
.pills button:hover, .pills button:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

.tray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  min-height: 140px;
  margin: 10px 0 8px;
  perspective: 600px;
}

.die {
  width: 92px;
  height: 92px;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--teal-light) 0%, var(--teal) 55%, #2a9a94 100%);
  box-shadow:
    inset 3px 3px 0 rgba(255, 255, 255, 0.45),
    inset -4px -5px 0 rgba(14, 51, 49, 0.25),
    0 8px 0 rgba(14, 51, 49, 0.35),
    0 14px 18px rgba(14, 51, 49, 0.25);
  position: relative;
  transform-style: preserve-3d;
}
.die.tumbling {
  animation: tumble 0.7s ease-in-out;
}
.die.lucky {
  background: linear-gradient(145deg, #ff7a6e 0%, var(--coral) 60%, #c2332a 100%);
  box-shadow:
    inset 3px 3px 0 rgba(255, 255, 255, 0.4),
    inset -4px -5px 0 rgba(90, 16, 14, 0.3),
    0 0 0 3px #ffc21a,
    0 0 22px rgba(224, 69, 58, 0.7),
    0 8px 0 rgba(90, 16, 14, 0.35);
}

@keyframes tumble {
  0% { transform: rotate(-18deg) translateY(0) scale(1); }
  25% { transform: rotate(22deg) translateY(-18px) scale(1.04); }
  50% { transform: rotate(-28deg) translateY(-8px) scale(0.96); }
  75% { transform: rotate(16deg) translateY(-16px) scale(1.05); }
  100% { transform: rotate(0) translateY(0) scale(1); }
}

.pips {
  position: absolute;
  inset: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 6px;
}
.pip {
  width: 16px;
  height: 16px;
  margin: auto;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 46%, #e8eef0 70%, #c5d0d2 100%);
  box-shadow:
    inset 0 -2px 2px rgba(16, 34, 38, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.7);
  opacity: 0;
}
.die[data-value="1"] .pip:nth-child(5),
.die[data-value="2"] .pip:nth-child(1),
.die[data-value="2"] .pip:nth-child(9),
.die[data-value="3"] .pip:nth-child(1),
.die[data-value="3"] .pip:nth-child(5),
.die[data-value="3"] .pip:nth-child(9),
.die[data-value="4"] .pip:nth-child(1),
.die[data-value="4"] .pip:nth-child(3),
.die[data-value="4"] .pip:nth-child(7),
.die[data-value="4"] .pip:nth-child(9),
.die[data-value="5"] .pip:nth-child(1),
.die[data-value="5"] .pip:nth-child(3),
.die[data-value="5"] .pip:nth-child(5),
.die[data-value="5"] .pip:nth-child(7),
.die[data-value="5"] .pip:nth-child(9),
.die[data-value="6"] .pip:nth-child(1),
.die[data-value="6"] .pip:nth-child(3),
.die[data-value="6"] .pip:nth-child(4),
.die[data-value="6"] .pip:nth-child(6),
.die[data-value="6"] .pip:nth-child(7),
.die[data-value="6"] .pip:nth-child(9) {
  opacity: 1;
}

.total-block {
  text-align: center;
  margin: 8px 0 16px;
}
.total-label {
  display: block;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-dark);
  font-size: 0.8rem;
}
.total {
  display: inline-block;
  font-size: clamp(3.2rem, 12vw, 5rem);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(180deg, var(--yellow), var(--orange));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 #102226) drop-shadow(2px 0 0 #102226) drop-shadow(-2px 0 0 #102226) drop-shadow(0 -1px 0 #102226);
}
/* Fallback if background-clip text isn't used by a browser */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .total { color: #ff7a00; background: none; }
}

.roll-btn {
  appearance: none;
  display: block;
  width: min(100%, 280px);
  margin: 0 auto 20px;
  padding: 14px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--coral-btn);
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 5px 0 #7a1d18;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.roll-btn:hover, .roll-btn:focus-visible {
  background: var(--coral-btn-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 0 #7a1d18;
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}
.roll-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #7a1d18; }
.roll-btn:disabled { opacity: 0.7; cursor: wait; transform: none; }

.history h2 {
  margin: 0 0 10px;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-dark);
}
.history-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.history-list li {
  background: #fff;
  border-radius: 12px;
  border-top: 4px solid var(--teal);
  padding: 8px 12px;
  min-width: 92px;
  font-size: 0.9rem;
  box-shadow: 0 2px 0 rgba(14, 51, 49, 0.12);
}
.history-list li strong { color: #b35a00; }
.history-empty { color: #4a6563; }

.draft-banner {
  margin: 0 0 16px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #102226;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .die.tumbling { animation: none; }
  .roll-btn { transition: none; }
}