/* roleplaying.mom. Phone first, system fonts only. The colours match the character sheet. */
:root {
  --bg: #22164c;
  --ink: #ffffff;
  --muted: #d9d0ff;
  --yellow: #ffd23f;
  --dark: #1b1035;
  --panel: #2f2168;
  --edge: #4b3b9c;
  --mint: #5ee6a8;
  --red: #ff6b6b;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  color-scheme: dark;
}

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

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.45 var(--font);
  overflow-wrap: anywhere;
}

h2 { font-size: clamp(26px, 7vw, 38px); line-height: 1.1; margin: 0 0 8px; letter-spacing: -0.01em; }
p { margin: 0; }

/* The big joke: choose your character, and the die always says MOM. */
.hero {
  min-height: 88vh;
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 22px 16px 34px;
  text-align: center;
  overflow-x: clip; /* the tumble never makes the page scroll sideways */
  background-color: var(--bg);
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1.6px, transparent 1.8px);
  background-size: 22px 22px;
}
.brand { font-weight: 800; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yellow); }
.who { max-width: min(52ch, 100%); font-size: clamp(19px, 5.2vw, 26px); font-weight: 800; line-height: 1.2; color: var(--mint); text-wrap: balance; }
.choose {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(38px, 11vw, 72px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}
.die {
  --s: clamp(150px, 44vw, 220px);
  width: var(--s);
  height: var(--s);
  margin: 10px 0 18px;
  display: grid;
  place-items: center;
  border-radius: 24%;
  /* Two pips in the corners, so it reads as a die and not a button. */
  background:
    radial-gradient(circle at 19% 19%, var(--dark) 0 5.5%, transparent 6%),
    radial-gradient(circle at 81% 81%, var(--dark) 0 5.5%, transparent 6%),
    var(--yellow);
  color: var(--dark);
  font-size: calc(var(--s) * 0.3);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 10px 0 #b8901a, 0 24px 44px rgba(5, 2, 20, 0.6);
  transform: rotate(-7deg);
  user-select: none;
}
.die.tumbling { animation: tumble 0.36s linear infinite; }
.die.thud { animation: thud 0.3s ease-out; }
@keyframes tumble {
  0% { transform: translateY(0) rotate(-7deg); }
  25% { transform: translateY(-16px) rotate(83deg); }
  50% { transform: translateY(0) rotate(173deg); }
  75% { transform: translateY(-10px) rotate(263deg); }
  100% { transform: translateY(0) rotate(353deg); }
}
@keyframes thud {
  0% { transform: rotate(-7deg) scale(1.16); }
  55% { transform: rotate(-7deg) scale(0.95); }
  100% { transform: rotate(-7deg) scale(1); }
}
.roll-line {
  max-width: 22ch;
  min-height: 3.6em; /* three lines kept free, so the buttons below never jump */
  display: flex;
  align-items: center;
  justify-content: center;
  text-wrap: balance;
  font-size: clamp(23px, 6.2vw, 34px);
  font-weight: 800;
  line-height: 1.2;
}
.hero[data-loud="1"] .roll-line { color: var(--yellow); }
/* One row of chips: the newest six rolls. Every roll stays in the list. */
.log {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  min-height: 28px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}
.log li {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 8px;
  border: 2px solid var(--edge);
  background: var(--panel);
  color: var(--yellow);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.log li:nth-last-child(n + 7) { display: none; }
.log li:last-child { animation: pop 0.25s ease-out; }
@keyframes pop {
  0% { transform: scale(0.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.tally { font-size: 16px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.tally .n { font-weight: 800; color: var(--ink); }
.tally .zero { color: var(--red); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; max-width: 100%; }
.roll { background: var(--yellow); border-color: var(--yellow); color: var(--dark); box-shadow: 0 4px 0 #b8901a; }
.cta {
  display: inline-block;
  max-width: 100%;
  padding: 13px 20px;
  border-radius: 28px; /* a pill on one line, a rounded box when a long name wraps it */
  border: 2px solid var(--edge);
  background: var(--panel);
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}
.cta:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }

/* The maker. */
main { padding: 0 16px; }
.maker, .gallery { max-width: 560px; margin: 0 auto; padding: 40px 0; }
.lede { color: var(--muted); margin-bottom: 18px; }
.maker { padding-top: 20px; padding-bottom: 8px; } /* so its heading sits whole above the desktop fold */
.gallery { padding-top: 20px; }
.maker h2, .maker .lede, .gallery h2, .gallery .lede { text-align: center; }
label { display: block; font-weight: 700; margin-bottom: 6px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; }
input {
  flex: 1 1 170px;
  min-width: 0;
  font: inherit;
  font-size: 18px;
  padding: 13px 14px;
  border: 2px solid var(--edge);
  border-radius: 12px;
  background: var(--dark);
  color: var(--ink);
}
/* Smaller than typed text, so the whole hint fits beside the button on a phone. */
input::placeholder { color: #9d92d6; font-size: 16px; }
button {
  font: inherit;
  font-weight: 800;
  padding: 13px 18px;
  border-radius: 12px;
  border: 2px solid var(--edge);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}
#make, button.primary { background: var(--yellow); border-color: var(--yellow); color: var(--dark); box-shadow: 0 4px 0 #b8901a; }
#make { flex: 0 0 auto; }
button:active { transform: translateY(2px); }
button:focus-visible, input:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }

.oops {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #3b1d3f;
  border: 2px solid var(--red);
  color: #ffd9d9;
  font-weight: 700;
}

.result { margin-top: 20px; }
#picture {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(5, 2, 20, 0.55);
  background: var(--dark);
}
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
@media (min-width: 520px) { .actions { grid-template-columns: repeat(4, 1fr); } }
.status { min-height: 1.5em; margin-top: 10px; color: var(--muted); font-weight: 600; }
.status:empty { min-height: 0; margin: 0; } /* no dead gap above the gallery until it says something */

/* The gallery: one card per row on a phone, so its lines can be read; two, then three, wider. */
.grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 520px) { .grid { grid-template-columns: 1fr 1fr; gap: 10px; } }
@media (min-width: 720px) { .gallery { max-width: 900px; } .grid { grid-template-columns: repeat(3, 1fr); } }
figure { margin: 0; }
figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 12px;
  background: var(--panel);
}

/* A share-link visit: her sheet is what the friend came for. The hero gives up its spare
   height (never the title, the die, the roll line or the tally), so the top of her card shows
   in the first screen. */
.from-link .hero { min-height: auto; padding-top: 14px; padding-bottom: 18px; }
.from-link .die { margin: 2px 0 6px; }
.from-link .maker { padding-top: 14px; }

.footer {
  padding: 32px 16px 44px;
  text-align: center;
  border-top: 2px dashed var(--edge);
  display: grid;
  gap: 6px;
}
.footer .small { font-size: 14px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .die, .log li { animation: none !important; }
}