@font-face {
  font-family: "DM Sans";
  src: url("dm-sans.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("instrument-serif.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("instrument-serif-italic.woff2") format("woff2");
  font-style: italic;
  font-display: swap;
}

:root {
  --navy: #182b46;
  --muted: #63534e;
  --ruby: #961f36;
  --gold: #aa7956;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", system-ui, sans-serif;
  font-family: var(--sans);
  color: var(--navy);
  color-scheme: light;
  background: #faeddf;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  min-width: 280px;
  margin: 0;
  min-height: 100svh;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 0% 94%, #8bb6df 0%, #c3d7eb 18%, transparent 49%),
    radial-gradient(ellipse at 100% 0%, #efaeaa 0%, #f4cbc4 17%, transparent 50%),
    radial-gradient(ellipse at 51% 46%, #fffbf3 10%, #faf0e5 63%, #f3ddcf 100%);
}

.floral, .frame, .petals { position: fixed; pointer-events: none; }
.floral { z-index: -1; background-size: cover; background-repeat: no-repeat; }
.floral-left {
  inset: 0 auto auto 0;
  width: min(40vw, 620px);
  aspect-ratio: 946 / 1100;
  background-image: url("flores-esquerda.webp");
  mask-image: radial-gradient(ellipse 95% 95% at 0 0, #000 48%, #000e 57%, transparent 100%);
}
.floral-right {
  inset: auto 0 0 auto;
  width: min(48vw, 770px);
  aspect-ratio: 1220 / 996;
  background-image: url("flores-direita.webp");
  mask-image: radial-gradient(ellipse 95% 96% at 100% 100%, #000 49%, #000e 62%, transparent 100%);
}
.frame {
  z-index: 0;
  inset: clamp(9px, 1.4vw, 23px);
  border: 1px solid #a5755063;
  outline: 1px solid #fff8e99c;
  outline-offset: -5px;
}

.page {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  padding: clamp(34px, 7vh, 86px) 20px 28px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  justify-items: center;
}
.heading { text-align: center; }
.eyebrow {
  display: flex;
  gap: 13px;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  letter-spacing: .35em;
  text-transform: uppercase;
  font-weight: 750;
}
.eyebrow span { width: 26px; height: 1px; background: var(--gold); }
h1 {
  font: 400 clamp(43px, 6.9vw, 108px)/.98 var(--serif);
  letter-spacing: -.055em;
  margin: 14px 0 0;
  text-wrap: balance;
  color: #152d4c;
}
h1 em { color: var(--ruby); font-weight: 400; letter-spacing: -.062em; white-space: nowrap; margin-inline-start: .035em; }

.stage { display: grid; place-items: center; width: 100%; padding: 20px 0; }
.medallion {
  --medallion: clamp(238px, 42vh, 480px);
  width: var(--medallion);
  height: var(--medallion);
  max-width: 100%;
  display: grid;
  grid-template-rows: 1fr auto auto auto 1.13fr;
  align-content: center;
  justify-items: center;
  position: relative;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #a979548e;
  outline: 1px solid #a979543d;
  outline-offset: 7px;
  background: radial-gradient(ellipse at 46% 36%, #fffaf2 16%, #fff5e8 65%, #f7e7da 100%);
  box-shadow: 0 18px 60px #a87b5c24, inset 0 0 28px #fffdf6;
}
.medallion::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid #ac80643b;
  border-radius: inherit;
  pointer-events: none;
}
.ornament {
  align-self: end;
  margin-bottom: clamp(9px, 1.4vh, 18px);
  color: var(--ruby);
  font-size: clamp(16px, 2.8vh, 30px);
  line-height: 1;
}
#stage-label, #stage-caption {
  margin: 0;
  position: relative;
  z-index: 1;
}
#stage-label {
  font-size: clamp(9px, 1.28vh, 14px);
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .25em;
  padding-left: .25em;
}
#stage-caption {
  align-self: start;
  padding-top: 12px;
  font: italic clamp(15px, 2.35vh, 25px)/1.1 var(--serif);
  color: var(--muted);
}
.number {
  white-space: nowrap;
  display: grid;
  place-items: center;
  height: calc(var(--medallion) * .47);
  font: 400 calc(var(--medallion) * .57)/.85 var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.055em;
  padding-right: .055em;
  color: var(--ruby);
}
.number[data-digits="3"] { font-size: calc(var(--medallion) * .42); }
.number[data-digits="4"] { font-size: calc(var(--medallion) * .335); }
.stage[data-phase="ready"] .number { color: #ad5962; font-size: calc(var(--medallion) * .35); }
.stage[data-phase="rolling"] .number { color: var(--navy); animation: suspense 620ms ease-in-out infinite alternate; }
.stage[data-phase="revealed"] .number { animation: reveal 920ms cubic-bezier(.2,.8,.28,1); }
.stage[data-phase="revealed"] .medallion::before { animation: halo 1150ms ease-out; }
@keyframes suspense { to { opacity: .62; transform: translateY(-4px); } }
@keyframes reveal {
  0% { opacity: 0; transform: scale(.57); filter: blur(7px); }
  59% { opacity: 1; transform: scale(1.14); filter: blur(0); }
  100% { transform: scale(1); }
}
@keyframes halo { 30% { box-shadow: 0 0 0 11px #c67b7535; } }

button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
button:focus-visible, input:focus-visible {
  outline: 2px solid #304c7a;
  outline-offset: 4px;
}
.actions { text-align: center; }
.draw {
  min-height: 52px;
  min-width: min(264px, 82vw);
  padding: 13px 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #791d31;
  border-radius: 100px;
  background: linear-gradient(135deg, #a42b3e, #841a31);
  box-shadow: inset 0 0 0 3px #fff5e425, 0 7px 19px #78182a31;
  color: #fff9ef;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .025em;
  transition: transform .18s, filter .18s;
}
.draw:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.11); }
.draw:active:not(:disabled) { transform: translateY(1px); }
.draw:disabled { opacity: .7; }
.draw-spark { font-size: 21px; line-height: 1; }
.progress { margin: 10px 0 0; font-size: 12px; font-weight: 650; color: var(--navy); }

.console {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 17px;
  margin-top: 19px;
  padding: 7px 13px 7px 16px;
  border: 1px solid #ac806455;
  border-radius: 15px;
  background: #fff8eddc;
  backdrop-filter: blur(10px);
  box-shadow: 0 5px 20px #7d574814;
}
.settings, .field, .tools { display: flex; align-items: center; gap: 8px; }
.settings label { font-size: 11px; font-weight: 700; }
.field { gap: 0; }
.field input {
  width: 65px;
  min-height: 36px;
  padding: 5px 6px 5px 9px;
  border-radius: 8px 0 0 8px;
  border: 1px solid #b89880;
  color: var(--navy);
  background: #fffcf7;
  font-size: 13px;
  font-weight: 700;
}
.apply {
  min-height: 36px;
  padding: 3px 10px;
  border: 1px solid #b89880;
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background: #f3e5d8;
  color: var(--navy);
  font-size: 11px;
  font-weight: 750;
}
.tools { padding-left: 9px; gap: 1px; border-left: 1px solid #ac806455; }
.tool {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.tool svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.tool:hover:not(:disabled), .apply:hover:not(:disabled) { background: #eee1d3; }
.tool:disabled, .apply:disabled { opacity: .5; }

.petals { z-index: 2; inset: 0; overflow: hidden; }
.petal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size);
  aspect-ratio: 1.5;
  border-radius: 75% 20% 70% 30%;
  background-color: var(--petal-color);
  animation: scatter 1.85s cubic-bezier(.13,.55,.42,1) var(--delay) both;
}
@keyframes scatter {
  0% { transform: translate(0, 0) scale(.2); opacity: 0; }
  20% { opacity: .95; }
  100% { transform: translate(var(--x), var(--y)) rotate(var(--turn)); opacity: 0; }
}

dialog {
  color: var(--navy);
  width: min(92vw, 465px);
  max-height: 80vh;
  border: 1px solid #b58a70;
  border-radius: 18px;
  padding: 25px;
  background: #fff7eb;
  box-shadow: 0 24px 90px #281b2350;
}
dialog::backdrop { background: #22162869; backdrop-filter: blur(5px); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
dialog h2 { margin: 0; font: 400 33px/1.1 var(--serif); letter-spacing: -.035em; }
dialog p { margin: 15px 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.close, .secondary, .confirm { border: 1px solid #b58a70; border-radius: 8px; color: var(--navy); background: transparent; font-weight: 700; }
.close { width: 38px; height: 38px; font-size: 22px; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.secondary, .confirm { padding: 10px 14px; font-size: 13px; }
.confirm { border-color: var(--ruby); background: var(--ruby); color: #fffaf1; }
.history-list { margin: 0; padding: 2px; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(61px, 1fr)); gap: 8px; overflow: auto; max-height: 48vh; }
.history-list li { display: grid; text-align: center; gap: 2px; border: 1px solid #b58a705c; border-radius: 9px; padding: 7px; background: #fffcf6; }
.history-list small { font-size: 10px; color: var(--muted); }
.history-list strong { font: 400 22px/1 var(--serif); color: var(--ruby); }
.notice { position: fixed; z-index: 5; bottom: 20px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 90vw; background: var(--navy); color: #fff; padding: 12px 15px; border-radius: 9px; font-size: 13px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 640px) {
  .page { padding: clamp(32px, 7vh, 65px) 18px 24px; }
  .floral-left { width: 52vw; }
  .floral-right { width: 65vw; }
  .stage { padding: 22px 0; }
  .medallion { --medallion: clamp(227px, 39vh, 330px); }
}
@media (max-width: 520px) {
  .console { flex-direction: column; gap: 5px; padding: 8px 13px 3px; }
  .tools { padding: 0; border-left: 0; }
}
@media (max-height: 640px) and (min-width: 641px) {
  .page { padding-top: 24px; padding-bottom: 18px; }
  h1 { font-size: clamp(37px, 9vh, 64px); margin-top: 8px; }
  .stage { padding: 17px 0; }
  .medallion { --medallion: clamp(166px, 40vh, 254px); }
  .console { margin-top: 12px; }
  .draw { min-height: 43px; padding-block: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}