/* The drawing page. Only what styles.css does not already cover. */

.dr-wrap { max-width: 40rem; margin: 0 auto; display: grid; gap: 1rem; }

.dr-state { text-align: center; }
.dr-prize {
  margin: 0 0 .5rem; font-size: .74rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--pink-3);
}
.dr-prize b {
  display: block; margin-top: .1rem;
  font-family: var(--font-display); font-size: clamp(1.6rem, 6vw, 2.4rem);
  letter-spacing: .02em; color: var(--cream);
  -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill;
}
.dr-status {
  display: block; font-family: var(--font-display);
  font-size: clamp(1.3rem, 5vw, 1.9rem); color: var(--cream);
  -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill;
}
.dr-sub { margin: .4rem 0 0; font-size: .9rem; font-weight: 700; color: var(--pink-3); }
.dr-window { margin: .8rem 0 0; font-size: .84rem; font-weight: 600; color: var(--pink-3); line-height: 1.7; }
.dr-window b { color: var(--cream); }
.dr-local { margin: .35rem 0 0; font-size: .78rem; font-weight: 600; color: var(--pink-3); opacity: .8; }

/* Closed reads differently from open, so nobody fills the box for nothing. */
.dr-state[data-phase="after"] .dr-status { opacity: .75; }

.dr-field span {
  display: block; font-size: .72rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--pink-3); margin-bottom: .3rem;
}
.dr-field input {
  width: 100%; padding: .75rem .8rem;
  font: inherit; font-weight: 700; font-size: .95rem;
  /* An address is long and unspaced; a mono face makes a typo findable. */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--cream); background: rgba(36, 4, 15, .72);
  border: 2px solid var(--ink); border-radius: 12px;
}
.dr-field input:focus-visible { outline: 3px solid var(--pink); outline-offset: 1px; }
.dr-field input:disabled { opacity: .55; cursor: not-allowed; }

.dr-msg { min-height: 1.2em; margin: .5rem 0 0; font-size: .85rem; font-weight: 700; }
.dr-msg.is-bad { color: #ffb0b0; }
.dr-msg.is-good { color: #b6f5c8; }

.dr-go { width: 100%; margin-top: .7rem; }
.dr-go:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.dr-warn {
  margin: .9rem 0 0; font-size: .8rem; font-weight: 600;
  line-height: 1.55; color: var(--pink-3);
}
.dr-warn b { color: var(--cream); }

.dr-bonus p { margin: 0; font-size: .9rem; font-weight: 700; line-height: 1.5; color: var(--cream); }
.dr-bonus.is-checking { opacity: .8; }
.dr-bonus.is-yes { border-color: #6ee7a0; }
.dr-bonus.is-no, .dr-bonus.is-unknown { border-color: var(--ink); }

.dr-out-title, .dr-rules-title {
  margin: 0 0 .5rem; font-family: var(--font-display);
  font-size: 1.25rem; color: var(--cream);
  -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill;
}
.dr-out p, .dr-rules li { font-size: .9rem; font-weight: 600; color: var(--pink-3); line-height: 1.6; }
.dr-out p { margin: 0 0 .6rem; }
.dr-rules ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; }
.dr-rules b, .dr-out b { color: var(--cream); }

/* The address, shown back so it can be read character by character. */
.dr-addr {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem; font-weight: 700; color: var(--cream);
  word-break: break-all; background: rgba(36, 4, 15, .72);
  border: 2px solid var(--ink); border-radius: 10px; padding: .55rem .7rem;
}
.dr-row { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: .8rem 0 0 !important; }
.dr-registry-note { margin: .8rem 0 0; font-size: .8rem; font-weight: 600; color: var(--pink-3); }

.dr-check { margin: .6rem 0 0; font-size: .78rem; font-weight: 600; color: var(--pink-3); line-height: 1.5; }

/* Both steps or nothing — the single most important sentence on the page. */
.dr-both {
  margin: 0 0 .8rem; padding: .6rem .75rem;
  font-size: .86rem; font-weight: 700; line-height: 1.5;
  color: var(--cream); background: rgba(255, 46, 136, .16);
  border: 2px solid var(--pink); border-radius: 12px;
}
.dr-registry-note {
  padding: .6rem .75rem; color: var(--cream);
  background: rgba(255, 176, 80, .14);
  border: 2px solid #ffb050; border-radius: 12px;
}

.dr-msg.is-wait { color: var(--pink-3); }