:root {
  color-scheme: dark;
  --bg: #06110c;
  --bg-2: #0a1d14;
  --panel: rgba(7, 29, 20, 0.92);
  --panel-soft: rgba(13, 40, 28, 0.82);
  --text: #f4f2e9;
  --muted: #a8b7ad;
  --line: rgba(180, 207, 190, 0.22);
  --green: #1f7a4b;
  --green-bright: #45b879;
  --gold: #d7ad57;
  --gold-light: #f0cf87;
  --danger: #ff8585;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at 85% 8%, rgba(38, 125, 77, 0.18), transparent 34rem),
    radial-gradient(circle at 10% 22%, rgba(215, 173, 87, 0.09), transparent 28rem),
    linear-gradient(180deg, #06110c 0%, #07140e 55%, #050d09 100%);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.page-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 24px 24px;
}

.site-shell {
  width: min(100%, 1100px);
  margin: 0 auto;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
}

.topbar {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.brand-cgm { color: var(--gold); font: 800 1.25rem/1 Georgia, serif; letter-spacing: .03em; }
.brand-rest { font: 500 .94rem/1 Georgia, serif; }
.domain { display: none; color: #83c89e; font-size: .8rem; }

.hero {
  position: relative;
  overflow: hidden;
  margin-top: 16px;
  padding: 22px 18px 20px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(11, 34, 24, .92), rgba(5, 20, 13, .97)),
    linear-gradient(135deg, rgba(215,173,87,.08), transparent 45%);
  box-shadow: var(--shadow);
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 32%;
  opacity: .22;
  background:
    linear-gradient(45deg, rgba(255,255,255,.055) 25%, transparent 25% 75%, rgba(255,255,255,.055) 75%),
    linear-gradient(45deg, rgba(255,255,255,.055) 25%, transparent 25% 75%, rgba(255,255,255,.055) 75%);
  background-position: 0 0, 18px 18px;
  background-size: 36px 36px;
  pointer-events: none;
}

.hero-art {
  min-height: 150px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  margin: -4px -2px 8px;
}

.chess-stage, .golf-stage { position: relative; height: 145px; }
.chess-stage { display: flex; align-items: flex-end; padding-left: 8px; }
.chess-king, .chess-knight {
  position: absolute;
  line-height: 1;
  text-shadow: 0 12px 28px rgba(0,0,0,.48);
  filter: drop-shadow(0 0 10px rgba(215,173,87,.08));
}
.chess-king { left: 0; bottom: 5px; color: #151a16; -webkit-text-stroke: 1px #a6813d; font-size: 7.2rem; }
.chess-knight { left: 66px; bottom: 6px; color: #211e18; -webkit-text-stroke: 1px #b58c45; font-size: 5.1rem; }

.golf-stage { display: flex; justify-content: center; align-items: flex-start; }
.golf-ball {
  position: absolute;
  top: 2px;
  width: 108px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-content: center;
  gap: 0;
  color: #10150f;
  font: 900 .89rem/1.06 Georgia, serif;
  text-align: center;
  transform: rotate(-5deg);
  box-shadow: inset -14px -14px 28px rgba(71, 84, 70, .18), 0 16px 30px rgba(0,0,0,.36);
  background-color: #f7f5e9;
  background-image:
    radial-gradient(circle at 18% 18%, rgba(65,74,64,.16) 0 3px, transparent 3.5px),
    radial-gradient(circle at 62% 22%, rgba(65,74,64,.12) 0 3px, transparent 3.5px),
    radial-gradient(circle at 38% 55%, rgba(65,74,64,.14) 0 3px, transparent 3.5px),
    radial-gradient(circle at 76% 68%, rgba(65,74,64,.13) 0 3px, transparent 3.5px);
  background-size: 22px 22px, 24px 24px, 25px 25px, 26px 26px;
}
.golf-ball span { display: block; }
.tee {
  position: absolute;
  top: 105px;
  width: 16px;
  height: 40px;
  background: linear-gradient(90deg, #9a672f, #e3b66c 42%, #8a5627);
  clip-path: polygon(28% 0, 72% 0, 60% 80%, 100% 100%, 0 100%, 40% 80%);
}

.eyebrow, .mini-label {
  margin: 0;
  color: var(--gold-light);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
}

.hero-copy { position: relative; z-index: 1; text-align: center; }
.hero-copy h1 {
  margin: 8px 0 10px;
  font: 700 clamp(2.3rem, 11vw, 4.9rem)/.96 Georgia, "Times New Roman", serif;
  letter-spacing: -.035em;
}
.hero-copy h1 span { color: var(--gold-light); }
.lead {
  margin: 0 auto;
  max-width: 39rem;
  color: #c3cec7;
  font-size: .98rem;
  line-height: 1.55;
}

.login-card, .player-card {
  position: relative;
  z-index: 2;
  margin: 22px auto 0;
  max-width: 500px;
  padding: 18px;
  border: 1px solid rgba(91, 171, 121, .36);
  border-radius: 20px;
  background: rgba(5, 24, 16, .92);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 34px rgba(0,0,0,.24);
}
.card-heading, .section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}
.card-heading h2, .section-heading h2 {
  margin: 2px 0 0;
  font: 700 1.32rem/1.15 Georgia, serif;
}
.step-pill {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(215,173,87,.65);
  border-radius: 50%;
  color: var(--gold-light);
  font-weight: 900;
}

.persona-field { display: grid; gap: 8px; }
.persona-field > span { color: #d9e2dc; font-size: .88rem; font-weight: 700; }
.persona-field input {
  width: 100%;
  min-height: 54px;
  padding: 0 15px;
  border: 1px solid rgba(178, 206, 188, .25);
  border-radius: 13px;
  outline: 0;
  color: #132117;
  background: #f5f4ec;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .025em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.persona-field input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(215,173,87,.16); }
.persona-field input::placeholder { color: #7c877f; font-weight: 600; text-transform: none; }

.primary-button {
  width: 100%;
  min-height: 54px;
  margin-top: 12px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-radius: 13px;
  color: #15170f;
  background: linear-gradient(180deg, #f0cf87, #c99942);
  font-weight: 950;
  letter-spacing: .035em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 9px 22px rgba(154,100,27,.18);
}
.primary-button:disabled { cursor: wait; opacity: .67; }
.primary-button:focus-visible, .text-button:focus-visible { outline: 3px solid rgba(69,184,121,.45); outline-offset: 3px; }

.helper, .form-message {
  margin: 11px 2px 0;
  font-size: .8rem;
  line-height: 1.45;
}
.helper { color: #8fa398; }
.form-message { min-height: 1.2em; color: #c9d9cf; }
.form-message.error { color: var(--danger); }
.form-message.success { color: #75d19b; }

.player-card { text-align: center; }
.verified-mark {
  width: 52px;
  height: 52px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #06110c;
  background: #70d198;
  font-size: 1.6rem;
  font-weight: 950;
}
.player-card h2 { margin: 7px 0 3px; font: 700 1.65rem/1.12 Georgia, serif; }
.nickname { margin: 0 0 15px; color: var(--gold-light); font-weight: 700; }
.player-id-row {
  padding: 11px 13px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  text-align: left;
}
.player-id-row span { color: var(--muted); }
.player-id-row strong { overflow-wrap: anywhere; }
.text-button {
  min-height: 44px;
  margin-top: 7px;
  border: 0;
  color: #a9b9af;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.next-stage, .how-it-works, .privacy-note {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(8, 25, 17, .72);
}
.next-stage { padding: 18px; }
.next-stage > p { margin: -3px 0 15px; color: var(--muted); line-height: 1.55; }
.number-teaser { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.number-teaser span {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(143, 199, 164, .3);
  border-radius: 50%;
  color: #e7eee9;
  background: rgba(31,122,75,.11);
  font-size: .84rem;
  font-weight: 850;
}
.number-teaser span:nth-child(2), .number-teaser span:nth-child(4) {
  color: #14140d;
  background: var(--gold-light);
  border-color: transparent;
}

.how-it-works { padding: 7px 16px; }
.how-it-works article {
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 11px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.how-it-works article:last-child { border-bottom: 0; }
.how-it-works article > span {
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--gold-light);
  background: rgba(215,173,87,.1);
  font-weight: 900;
}
.how-it-works h3 { margin: 0; font-size: .98rem; }
.how-it-works p { margin: 4px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }

.privacy-note { padding: 15px 16px; display: grid; gap: 5px; }
.privacy-note strong { color: var(--gold-light); font-size: .73rem; letter-spacing: .15em; }
.privacy-note p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.55; }

footer {
  padding: 22px 3px 30px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #71847a;
  font-size: .72rem;
  text-align: center;
}

[hidden] { display: none !important; }

@media (min-width: 700px) {
  .site-shell { padding-left: 24px; padding-right: 24px; }
  .domain { display: inline; }
  .hero { padding: 34px 36px 32px; }
  .hero-art { min-height: 210px; }
  .chess-stage, .golf-stage { height: 200px; }
  .chess-king { font-size: 10.5rem; left: 18%; }
  .chess-knight { font-size: 7.2rem; left: 43%; }
  .golf-ball { width: 145px; font-size: 1.1rem; }
  .tee { top: 141px; height: 54px; }
  .hero-copy { margin-top: -8px; }
  .lead { font-size: 1.04rem; }
  .how-it-works { display: grid; grid-template-columns: repeat(3, 1fr); padding: 12px 18px; }
  .how-it-works article { border-bottom: 0; border-right: 1px solid var(--line); padding: 10px 16px; }
  .how-it-works article:last-child { border-right: 0; }
  footer { flex-direction: row; justify-content: space-between; text-align: left; }
}

@media (min-width: 960px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(380px, .88fr);
    grid-template-areas:
      "art card"
      "copy card";
    column-gap: 44px;
    align-items: center;
    padding: 42px 48px;
  }
  .hero-art { grid-area: art; margin-bottom: -24px; }
  .hero-copy { grid-area: copy; text-align: left; }
  .hero-copy .lead { margin-left: 0; }
  .login-card, .player-card { grid-area: card; width: 100%; margin: 0; }
  .chess-king { left: 8%; }
  .chess-knight { left: 31%; }
  .golf-ball { right: 17%; }
  .tee { right: calc(17% + 64px); }
}


/* =========================================================
   PHASE 2 — MOBILE CONTACT SCREEN
   ========================================================= */

.screen {
  animation: screen-enter .24s ease-out;
}

@keyframes screen-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.entry-screen {
  width: min(100%, 620px);
  margin: 18px auto 0;
}

.progress-row {
  display: grid;
  grid-template-columns: 34px 1fr 34px 1fr 34px;
  align-items: center;
  margin: 4px 4px 18px;
  color: #7f9187;
  font-size: .78rem;
  font-weight: 900;
}

.progress-row > span:not(.progress-line) {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255,255,255,.025);
}

.progress-row .progress-current {
  color: #17170f;
  border-color: transparent;
  background: var(--gold-light);
}

.progress-row .progress-done {
  color: #06110c;
  border-color: transparent;
  background: #70d198;
}

.progress-line {
  height: 1px;
  background: var(--line);
}

.progress-line.done {
  background: rgba(112, 209, 152, .72);
}

.back-button {
  min-height: 44px;
  margin: 0 0 8px;
  padding: 0 4px;
  border: 0;
  color: #bac8c0;
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

.entry-card {
  padding: 19px 17px 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(10, 34, 23, .97), rgba(5, 20, 13, .98));
  box-shadow: var(--shadow);
}

.verified-summary {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px 12px;
  margin: 4px 0 17px;
  padding: 13px;
  border: 1px solid rgba(112,209,152,.24);
  border-radius: 15px;
  background: rgba(112,209,152,.055);
}

.verified-summary-mark {
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #06110c;
  background: #70d198;
  font-weight: 950;
}

.verified-summary-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.verified-summary-copy span,
.verified-summary-persona span {
  color: var(--muted);
  font-size: .72rem;
}

.verified-summary-copy strong {
  overflow-wrap: anywhere;
}

.verified-summary-copy small {
  color: var(--gold-light);
  font-weight: 750;
}

.verified-summary-persona {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: .8rem;
}

.verified-summary-persona strong {
  overflow-wrap: anywhere;
}

.contact-intro {
  margin: 0 0 17px;
  color: #b8c7be;
  font-size: .88rem;
  line-height: 1.55;
}

.entry-field {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.entry-field > span {
  color: #d9e2dc;
  font-size: .88rem;
  font-weight: 750;
}

.entry-field input {
  width: 100%;
  min-height: 55px;
  padding: 0 15px;
  border: 1px solid rgba(178,206,188,.25);
  border-radius: 13px;
  outline: 0;
  color: #132117;
  background: #f5f4ec;
  font-size: 16px;
  font-weight: 720;
}

.entry-field input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(215,173,87,.16);
}

.entry-field input::placeholder {
  color: #8b958e;
  font-weight: 500;
}

.consent-box {
  margin-top: 18px;
  padding: 13px;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 11px;
  border: 1px solid rgba(215,173,87,.22);
  border-radius: 14px;
  color: #b5c3ba;
  background: rgba(215,173,87,.045);
  font-size: .79rem;
  line-height: 1.5;
  cursor: pointer;
}

.consent-box input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: #d7ad57;
}

.consent-box span {
  display: block;
}

.consent-box strong {
  display: block;
  margin-bottom: 3px;
  color: #eee7d7;
  font-size: .82rem;
}

.centered-text-button {
  width: 100%;
  text-align: center;
}

.secondary-button {
  width: 100%;
  min-height: 50px;
  margin-top: 14px;
  border: 1px solid rgba(215,173,87,.44);
  border-radius: 13px;
  color: var(--gold-light);
  background: rgba(215,173,87,.055);
  font-weight: 900;
  letter-spacing: .035em;
  cursor: pointer;
}

.ready-card {
  text-align: center;
}

.ready-card > h2 {
  margin: 7px 0 7px;
  font: 700 1.8rem/1.1 Georgia, serif;
}

.ready-card > p {
  margin: 0 auto 16px;
  max-width: 32rem;
  color: var(--muted);
  line-height: 1.55;
}

.ready-summary {
  display: grid;
  gap: 0;
  margin: 17px 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  text-align: left;
}

.ready-summary > div {
  padding: 11px 13px;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  border-bottom: 1px solid var(--line);
}

.ready-summary > div:last-child {
  border-bottom: 0;
}

.ready-summary span {
  color: var(--muted);
  font-size: .78rem;
}

.ready-summary strong {
  overflow-wrap: anywhere;
  font-size: .86rem;
}

.number-teaser-large {
  margin-top: 18px;
}

.centered-helper {
  text-align: center;
}

@media (min-width: 700px) {
  .entry-screen {
    margin-top: 28px;
  }

  .entry-card {
    padding: 25px 26px 27px;
  }

  .verified-summary {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
  }

  .verified-summary-mark {
    grid-row: 1;
  }

  .verified-summary-persona {
    grid-column: 3;
    padding: 0 0 0 16px;
    border-top: 0;
    border-left: 1px solid var(--line);
    display: grid;
    gap: 3px;
  }
}


/* =========================================================
   PHASE 3 — LIVE 1–69 NUMBER BOARD
   ========================================================= */

.board-screen {
  width: min(100%, 720px);
}

.board-card {
  padding-bottom: 14px;
}

.board-heading {
  margin-bottom: 14px;
}

.board-player-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 12px 13px;
  border: 1px solid rgba(112,209,152,.22);
  border-radius: 14px;
  background: rgba(112,209,152,.05);
}

.board-player-strip > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.board-player-strip > div:last-child {
  text-align: right;
}

.board-player-strip span {
  color: var(--muted);
  font-size: .7rem;
}

.board-player-strip strong {
  overflow-wrap: anywhere;
  font-size: .84rem;
}

.board-intro {
  margin: 14px 1px;
  color: #bbc9c1;
  font-size: .86rem;
  line-height: 1.52;
}

.board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0;
}

.board-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 11px;
  color: #9eb0a5;
  font-size: .69rem;
}

.board-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.legend-dot {
  width: 9px;
  height: 9px;
  display: inline-block;
  border-radius: 50%;
}

.legend-dot.available {
  border: 1px solid rgba(235,241,236,.55);
  background: rgba(255,255,255,.07);
}

.legend-dot.selected {
  background: var(--gold-light);
}

.legend-dot.taken {
  background: #43534a;
}

.refresh-button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #cbd6cf;
  background: rgba(255,255,255,.035);
  font-size: .74rem;
  font-weight: 800;
  cursor: pointer;
}

.refresh-button:disabled {
  opacity: .55;
}

.selection-counter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 10px 0 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--line);
}

.selection-counter > div {
  padding: 9px 11px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  background: rgba(7,25,17,.98);
}

.selection-counter span {
  color: var(--muted);
  font-size: .72rem;
}

.selection-counter strong {
  color: #f2ead6;
  font-size: .8rem;
}

.selection-counter b {
  font-weight: 900;
}

.number-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.number-button {
  aspect-ratio: 1 / 1;
  min-width: 0;
  min-height: 48px;
  padding: 0;
  border-radius: 12px;
  font-size: .96rem;
  font-weight: 950;
  transition:
    transform .12s ease,
    border-color .12s ease,
    background .12s ease,
    color .12s ease;
}

.number-button.available {
  border: 1px solid rgba(229,237,232,.24);
  color: #e8eee9;
  background:
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
  cursor: pointer;
}

.number-button.available:active {
  transform: scale(.94);
}

.number-button.selected {
  border: 1px solid #f2ce81;
  color: #15130d;
  background:
    linear-gradient(180deg, #f4d88f, #d7ad57);
  box-shadow:
    0 0 0 2px rgba(215,173,87,.12),
    0 7px 18px rgba(0,0,0,.18);
  cursor: pointer;
}

.number-button.taken {
  border: 1px solid rgba(117,137,125,.15);
  color: #697a70;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,.02),
      rgba(255,255,255,.02) 5px,
      rgba(255,255,255,.005) 5px,
      rgba(255,255,255,.005) 10px
    );
  cursor: not-allowed;
}

.selected-panel {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(215,173,87,.19);
  border-radius: 14px;
  background: rgba(215,173,87,.035);
}

.selected-panel-label {
  display: block;
  margin-bottom: 8px;
  color: var(--gold-light);
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .1em;
}

.selected-number-list {
  min-height: 35px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.empty-selection {
  color: #7f9187;
  font-size: .78rem;
}

.selected-chip {
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid #e4bf70;
  border-radius: 50%;
  color: #17140d;
  background: var(--gold-light);
  font-weight: 950;
  cursor: pointer;
}

.board-message.success {
  color: #87d7a7;
}

.board-submit-bar {
  position: sticky;
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 3;
  margin: 13px -7px -7px;
  padding: 10px 7px 7px;
  border-radius: 15px;
  background:
    linear-gradient(
      180deg,
      rgba(6,22,15,0),
      rgba(6,22,15,.97) 24%,
      rgba(6,22,15,.995)
    );
  backdrop-filter: blur(5px);
}

.board-submit-bar .primary-button {
  margin-top: 0;
}

.board-submit-bar p {
  margin: 7px 2px 0;
  color: #82938a;
  font-size: .66rem;
  line-height: 1.35;
  text-align: center;
}

.confirmation-card {
  text-align: center;
}

.confirmation-check {
  width: 66px;
  height: 66px;
  margin: 2px auto 10px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #07150d;
  background:
    linear-gradient(180deg, #8ce1ad, #60be87);
  box-shadow:
    0 0 0 6px rgba(112,209,152,.08),
    0 14px 30px rgba(0,0,0,.2);
  font-size: 2rem;
  font-weight: 950;
}

.confirmation-card > h2 {
  margin: 5px 0 7px;
  font: 700 1.9rem/1.08 Georgia, serif;
}

.confirmation-lead {
  max-width: 34rem;
  margin: 0 auto 17px;
  color: #aebdb4;
  font-size: .88rem;
  line-height: 1.55;
}

.confirmation-id-box {
  margin: 16px 0 20px;
  padding: 14px;
  border: 1px solid rgba(215,173,87,.25);
  border-radius: 14px;
  background: rgba(215,173,87,.055);
}

.confirmation-id-box span {
  display: block;
  margin-bottom: 4px;
  color: #a99b79;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.confirmation-id-box strong {
  overflow-wrap: anywhere;
  color: var(--gold-light);
  font-size: 1rem;
  letter-spacing: .035em;
}

.confirmation-label {
  display: block;
  margin-bottom: 9px;
  color: #9eab9f;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.confirmation-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 19px;
}

.confirmation-numbers > span {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  border: 1px solid #e7c676;
  border-radius: 50%;
  color: #17140e;
  background:
    linear-gradient(180deg, #f1d487, #d7ad57);
  font-weight: 950;
}

.confirmation-summary {
  margin-bottom: 15px;
  text-align: left;
}

.confirmation-note {
  margin-top: 15px;
  padding: 12px;
  border: 1px solid rgba(112,209,152,.2);
  border-radius: 13px;
  color: #aebdb4;
  background: rgba(112,209,152,.045);
  text-align: left;
  font-size: .76rem;
  line-height: 1.45;
}

.confirmation-note strong {
  display: block;
  margin-bottom: 3px;
  color: #86d7a6;
  font-size: .72rem;
  letter-spacing: .08em;
}

.confirmation-note p {
  margin: 0;
}

@media (min-width: 390px) {
  .number-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 560px) {
  .number-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .number-button {
    min-height: 54px;
  }
}

@media (min-width: 760px) {
  .number-grid {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .board-submit-bar {
    position: static;
    margin: 15px 0 0;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
  }
}


/* =========================================================
   PHASE 4 — ADMIN + CUMULATIVE NUMBER CLAIMING
   ========================================================= */

.admin-button {
  width: 100%;
  min-height: 48px;
  margin-top: 11px;
  border: 1px solid rgba(240, 190, 79, .55);
  border-radius: 12px;
  color: #18150d;
  background: linear-gradient(180deg, #f1cf7b, #c89b3b);
  font-weight: 950;
  letter-spacing: .045em;
  cursor: pointer;
}

.number-button.owned {
  border: 1px solid rgba(112,209,152,.72);
  color: #07140e;
  background: linear-gradient(180deg, #92e2b1, #61bd88);
  box-shadow: 0 0 0 2px rgba(112,209,152,.10);
  cursor: default;
}

.owned-chip {
  border-color: rgba(112,209,152,.72);
  color: #07140e;
  background: #78ce9a;
  cursor: default;
}

.admin-screen {
  width: min(100%, 900px);
}

.admin-title-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-end;
  margin: 8px 0 12px;
}

.admin-title-row h1 {
  margin: 3px 0 0;
  font: 700 2rem/1.05 Georgia, serif;
}

.compact-button {
  width: auto;
  min-width: 90px;
  margin-top: 0;
  padding-inline: 14px;
}

.admin-identity {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding: 10px 13px;
  border: 1px solid rgba(215,173,87,.2);
  border-radius: 12px;
  background: rgba(215,173,87,.04);
}

.admin-identity span {
  color: var(--muted);
  font-size: .76rem;
}

.admin-identity strong {
  color: var(--gold-light);
  font-size: .82rem;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin-bottom: 14px;
}

.admin-stats article {
  min-height: 84px;
  padding: 12px;
  display: grid;
  align-content: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}

.admin-stats span {
  color: var(--muted);
  font-size: .72rem;
}

.admin-stats strong {
  color: #f3ead8;
  font-size: 1.55rem;
}

.admin-card {
  margin-bottom: 14px;
}

.admin-copy {
  margin: 0 0 14px;
  color: #afbeb5;
  font-size: .84rem;
  line-height: 1.5;
}

.admin-reset-grid {
  display: grid;
  gap: 10px;
}

.admin-action-button {
  min-height: 72px;
  padding: 12px 13px;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(112,209,152,.24);
  border-radius: 13px;
  color: #e7eee9;
  background: rgba(112,209,152,.045);
  text-align: left;
  cursor: pointer;
}

.admin-action-button strong {
  color: #91dfaf;
  font-size: .79rem;
  letter-spacing: .035em;
}

.admin-action-button span {
  color: #9fb0a6;
  font-size: .73rem;
  line-height: 1.4;
}

.admin-action-button.warning-action {
  border-color: rgba(229,182,82,.30);
  background: rgba(229,182,82,.045);
}

.admin-action-button.warning-action strong {
  color: #eccb7d;
}

.admin-action-button.danger-action {
  border-color: rgba(221,100,91,.34);
  background: rgba(221,100,91,.05);
}

.admin-action-button.danger-action strong {
  color: #ee9a93;
}

.admin-action-button:disabled {
  opacity: .5;
  cursor: wait;
}

.admin-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.admin-entry-list {
  display: grid;
  gap: 10px;
}

.admin-empty {
  margin: 10px 0 3px;
  color: var(--muted);
  text-align: center;
}

.admin-entry {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.018);
}

.admin-entry-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.admin-entry-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-entry-head strong {
  overflow-wrap: anywhere;
}

.admin-entry-head span {
  color: var(--muted);
  font-size: .72rem;
}

.admin-entry-head b {
  color: var(--gold-light);
  font-size: .8rem;
}

.admin-entry-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 10px 0;
}

.admin-entry-numbers span {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #10140f;
  background: #78ce9a;
  font-size: .72rem;
  font-weight: 900;
}

.admin-entry-meta {
  overflow-wrap: anywhere;
  color: #87988e;
  font-size: .68rem;
  line-height: 1.45;
}

.admin-mini-button {
  width: 100%;
  min-height: 40px;
  margin-top: 10px;
  border: 1px solid rgba(221,100,91,.27);
  border-radius: 10px;
  color: #edaaa4;
  background: rgba(221,100,91,.04);
  font-size: .69rem;
  font-weight: 900;
  cursor: pointer;
}

@media (min-width: 640px) {
  .admin-stats {
    grid-template-columns: repeat(4, 1fr);
  }

  .admin-reset-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* =========================================================
   PHASE 5 — VISIBLE ADMIN ACTIONS + PRIZE MANAGER
   ========================================================= */

.admin-action-button,
.admin-mini-button,
.prize-hero-button {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

.admin-action-button:active,
.admin-mini-button:active,
.prize-hero-button:active {
  transform: scale(.975);
}

.admin-action-button.is-armed,
.admin-mini-button.is-armed {
  border-color: #f1c96e !important;
  background: rgba(241, 201, 110, .14) !important;
  animation: admin-arm-pulse .72s ease-in-out infinite alternate;
}

.admin-action-button.is-armed strong,
.admin-mini-button.is-armed {
  color: #ffe6a7 !important;
}

.admin-action-button.is-loading,
.admin-mini-button.is-loading {
  pointer-events: none;
  opacity: .75;
  animation: admin-working .8s ease-in-out infinite alternate;
}

.admin-action-button.is-loading::after,
.admin-mini-button.is-loading::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: admin-spin .7s linear infinite;
}

@keyframes admin-arm-pulse {
  from {
    box-shadow: 0 0 0 0 rgba(241,201,110,.08);
  }
  to {
    box-shadow: 0 0 0 4px rgba(241,201,110,.16);
  }
}

@keyframes admin-working {
  from { filter: brightness(.92); }
  to { filter: brightness(1.15); }
}

@keyframes admin-spin {
  to { transform: rotate(360deg); }
}

.prize-hero-button {
  width: 100%;
  min-height: 50px;
  margin: 0 0 12px;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(215,173,87,.35);
  border-radius: 14px;
  color: var(--gold-light);
  background:
    linear-gradient(135deg, rgba(215,173,87,.10), rgba(112,209,152,.05));
  font-weight: 950;
  letter-spacing: .055em;
  cursor: pointer;
}

.prize-hero-button span:last-child {
  font-size: 1.25rem;
}

.prize-public-card {
  padding: 20px 17px 22px;
}

.prize-public-kicker {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 13px;
}

.prize-public-kicker > div {
  display: grid;
  gap: 2px;
}

.prize-public-kicker > div > span {
  color: #a8b8ae;
  font-size: .76rem;
}

.prize-public-card h1 {
  margin: 5px 0 11px;
  font: 700 2rem/1.08 Georgia, serif;
  color: #f2ead9;
}

.prize-description {
  white-space: pre-wrap;
  color: #bac8bf;
  font-size: .9rem;
  line-height: 1.65;
}

.prize-gallery {
  display: grid;
  gap: 10px;
  margin: 18px 0 4px;
}

.prize-photo {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #07150e;
}

.prize-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  background: #07150e;
}

.prize-form textarea {
  width: 100%;
  min-height: 150px;
  padding: 13px 15px;
  resize: vertical;
  border: 1px solid rgba(178,206,188,.25);
  border-radius: 13px;
  outline: 0;
  color: #132117;
  background: #f5f4ec;
  font: 650 16px/1.5 system-ui, sans-serif;
}

.prize-form textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(215,173,87,.16);
}

.prize-upload-box {
  min-height: 130px;
  margin-top: 16px;
  padding: 17px;
  display: grid;
  place-items: center;
  gap: 4px;
  border: 1px dashed rgba(215,173,87,.42);
  border-radius: 15px;
  color: #dac997;
  background: rgba(215,173,87,.04);
  text-align: center;
  cursor: pointer;
}

.prize-upload-box input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.prize-upload-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(215,173,87,.35);
  border-radius: 50%;
  font-size: 1.35rem;
}

.prize-upload-box strong {
  font-size: .8rem;
  letter-spacing: .045em;
}

.prize-upload-box small {
  color: #89998f;
  font-size: .7rem;
}

.prize-upload-preview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.prize-upload-item {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255,255,255,.02);
}

.prize-upload-item img {
  width: 100%;
  aspect-ratio: 4/3;
  display: block;
  object-fit: cover;
}

.prize-upload-item span {
  display: block;
  padding: 7px;
  overflow: hidden;
  color: #9eafa5;
  font-size: .65rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prize-admin-actions {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.admin-prize-current {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.admin-prize-preview {
  display: grid;
  gap: 8px;
}

.admin-prize-preview > strong {
  color: #eee5d1;
  font-size: .95rem;
}

.admin-prize-preview > p {
  margin: 0;
  max-height: 150px;
  overflow: auto;
  white-space: pre-wrap;
  color: #9eafa5;
  font-size: .75rem;
  line-height: 1.5;
}

.admin-prize-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.admin-prize-thumbs img {
  width: 100%;
  aspect-ratio: 1/1;
  display: block;
  object-fit: cover;
  border-radius: 9px;
  border: 1px solid var(--line);
}

@media (min-width: 620px) {
  .prize-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .prize-upload-preview {
    grid-template-columns: repeat(3, 1fr);
  }

  .prize-admin-actions {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .prize-admin-actions .primary-button {
    margin-top: 0;
  }
}


.prize-form input:disabled,
.prize-form textarea:disabled {
  opacity: .68;
}

#savePrizeButton:disabled {
  cursor: wait;
}


/* =========================================================
   PHASE 6 — IDENTITY CONFIRMATION / RULES / ADMIN CHOICE
   ========================================================= */

.rules-hero-button {
  width: 100%;
  min-height: 48px;
  margin: 0 0 12px;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(112,209,152,.30);
  border-radius: 14px;
  color: #a9dfbf;
  background:
    linear-gradient(135deg, rgba(112,209,152,.07), rgba(255,255,255,.02));
  font-weight: 950;
  letter-spacing: .055em;
  cursor: pointer;
}

.rules-hero-button:active {
  transform: scale(.975);
}

.identity-card {
  animation: screen-enter .24s ease-out;
}

.identity-instructions {
  margin: 0 0 14px;
  color: #b7c5bc;
  font-size: .86rem;
  line-height: 1.55;
}

.identity-card .persona-field input {
  text-transform: uppercase;
  letter-spacing: .22em;
  text-align: center;
  font-size: 1.18rem;
}

.admin-choice-screen {
  width: min(100%, 650px);
}

.admin-choice-card {
  text-align: center;
}

.admin-choice-card h1 {
  margin: 6px 0 8px;
  font: 700 2rem/1.08 Georgia, serif;
  color: #f0e8d6;
}

.admin-choice-card > p {
  margin: 0 auto 18px;
  color: #aebeb4;
  line-height: 1.55;
}

.admin-choice-grid {
  display: grid;
  gap: 11px;
  margin-top: 16px;
}

.choice-card-button {
  min-height: 128px;
  padding: 17px;
  display: grid;
  justify-items: start;
  align-content: center;
  gap: 5px;
  border-radius: 16px;
  text-align: left;
  cursor: pointer;
  transition:
    transform .12s ease,
    border-color .12s ease,
    background .12s ease;
}

.choice-card-button:active {
  transform: scale(.98);
}

.choice-card-button.player-choice {
  border: 1px solid rgba(112,209,152,.28);
  color: #e7eee9;
  background: rgba(112,209,152,.05);
}

.choice-card-button.admin-choice {
  border: 1px solid rgba(215,173,87,.38);
  color: #f0e5cc;
  background: rgba(215,173,87,.06);
}

.choice-card-button .choice-icon {
  font-size: 1.55rem;
}

.choice-card-button strong {
  font-size: .86rem;
  letter-spacing: .04em;
}

.choice-card-button small {
  color: #94a59b;
  font-size: .75rem;
  line-height: 1.4;
}

.rules-card h1 {
  margin: 5px 0 16px;
  font: 700 2rem/1.08 Georgia, serif;
  color: #f2ead9;
}

.rules-list {
  display: grid;
  gap: 10px;
}

.rules-list article {
  padding: 13px;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.018);
}

.rules-list article > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(215,173,87,.30);
  border-radius: 50%;
  color: var(--gold-light);
  font-size: .69rem;
  font-weight: 950;
}

.rules-list h2 {
  margin: 0 0 4px;
  color: #e9e4d8;
  font-size: .91rem;
}

.rules-list p {
  margin: 0;
  color: #9eafa5;
  font-size: .78rem;
  line-height: 1.55;
}

.rules-note {
  margin-top: 14px;
  padding: 12px 13px;
  border: 1px solid rgba(215,173,87,.22);
  border-radius: 13px;
  color: #aebdb4;
  background: rgba(215,173,87,.04);
  text-align: left;
  font-size: .74rem;
  line-height: 1.5;
}

.rules-note strong {
  display: block;
  margin-bottom: 3px;
  color: var(--gold-light);
  font-size: .7rem;
  letter-spacing: .07em;
}

.rules-note p {
  margin: 0;
}

@media (min-width: 620px) {
  .admin-choice-grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* =========================================================
   PHASE 7 — CONTACT OWNERSHIP + REVIEW & RULES CONFIRMATION
   ========================================================= */

.progress-row.progress-four {
  grid-template-columns: 34px 1fr 34px 1fr 34px 1fr 34px;
}

.how-it-works-four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-owner-notice {
  margin: 0 0 17px;
  padding: 13px 14px;
  border: 1px solid rgba(215,173,87,.28);
  border-radius: 14px;
  background: rgba(215,173,87,.055);
}

.contact-owner-notice strong {
  display: block;
  margin-bottom: 5px;
  color: var(--gold-light);
  font-size: .76rem;
  letter-spacing: .055em;
}

.contact-owner-notice p {
  margin: 0;
  color: #c1cec6;
  font-size: .84rem;
  line-height: 1.55;
}

.review-card {
  padding-bottom: 22px;
}

.review-intro {
  margin: 0 0 15px;
  color: #b5c3ba;
  font-size: .87rem;
  line-height: 1.55;
}

.review-summary {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255,255,255,.018);
}

.review-row {
  min-height: 50px;
  padding: 11px 13px;
  display: grid;
  grid-template-columns: minmax(100px, .8fr) minmax(0, 1.2fr);
  gap: 12px;
  align-items: center;
}

.review-row span {
  color: var(--muted);
  font-size: .75rem;
}

.review-row strong {
  overflow-wrap: anywhere;
  color: #edf1ed;
  font-size: .86rem;
  text-align: right;
}

.review-divider {
  height: 1px;
  background: var(--line);
}

.review-owner-note {
  margin-top: 13px;
  padding: 12px 13px;
  border: 1px solid rgba(112,209,152,.22);
  border-radius: 13px;
  background: rgba(112,209,152,.045);
}

.review-owner-note strong {
  display: block;
  margin-bottom: 3px;
  color: #89d8a8;
  font-size: .7rem;
  letter-spacing: .07em;
}

.review-owner-note p {
  margin: 0;
  color: #aebdb4;
  font-size: .76rem;
  line-height: 1.48;
}

.review-rules-box {
  margin-top: 15px;
  padding: 13px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(215,173,87,.20);
  border-radius: 14px;
  background: rgba(215,173,87,.035);
}

.review-rules-box strong {
  display: block;
  margin-bottom: 3px;
  color: #eee5d2;
  font-size: .85rem;
}

.review-rules-box p {
  margin: 0;
  color: #9dacA3;
  font-size: .73rem;
  line-height: 1.45;
}

.review-rules-box .compact-button {
  min-height: 42px;
  margin: 0;
}

.review-rules-consent {
  margin-top: 12px;
}

@media (min-width: 760px) {
  .how-it-works-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .progress-row.progress-four {
    grid-template-columns: 30px 1fr 30px 1fr 30px 1fr 30px;
  }

  .progress-row.progress-four > span:not(.progress-line) {
    width: 30px;
    height: 30px;
  }

  .review-rules-box {
    grid-template-columns: 1fr;
  }

  .review-rules-box .compact-button {
    width: 100%;
  }
}


/* =========================================================
   PHASE 8 — AVAILABLE / PENDING / LOCKED
   ========================================================= */

.legend-dot.pending {
  background: #e6a640;
  box-shadow: 0 0 0 2px rgba(230,166,64,.12);
}

.legend-dot.locked {
  background: #6fcf97;
  box-shadow: 0 0 0 2px rgba(111,207,151,.10);
}

.number-button.pending {
  position: relative;
  border: 1px solid rgba(239,178,70,.74);
  color: #271c09;
  background:
    repeating-linear-gradient(
      -45deg,
      #e9ae45,
      #e9ae45 7px,
      #d99a2f 7px,
      #d99a2f 14px
    );
  box-shadow:
    inset 0 0 0 1px rgba(255,245,211,.20),
    0 5px 13px rgba(0,0,0,.18);
  cursor: not-allowed;
}

.number-button.locked {
  position: relative;
  border: 1px solid rgba(111,207,151,.55);
  color: #d7eadf;
  background:
    linear-gradient(
      180deg,
      rgba(42,79,58,.98),
      rgba(23,52,37,.98)
    );
  box-shadow:
    inset 0 0 0 1px rgba(111,207,151,.07);
  cursor: not-allowed;
}

.number-button.pending::after,
.number-button.locked::after {
  position: absolute;
  right: 4px;
  bottom: 3px;
  font-size: .48rem;
  font-weight: 950;
}

.number-button.pending::after {
  content: "P";
  color: rgba(46,29,4,.70);
}

.number-button.locked::after {
  content: "L";
  color: rgba(194,238,211,.72);
}

.number-button.owned-state {
  outline: 2px solid rgba(255,255,255,.12);
  outline-offset: 1px;
}

.pending-chip {
  border-color: #e6a640;
  color: #2d2008;
  background:
    repeating-linear-gradient(
      -45deg,
      #edb554,
      #edb554 5px,
      #dda039 5px,
      #dda039 10px
    );
  cursor: default;
}

.locked-chip {
  border-color: rgba(111,207,151,.68);
  color: #d9eee2;
  background: #28503a;
  cursor: default;
}

.confirmation-status-legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: -2px 0 11px;
  color: #9eafa5;
  font-size: .7rem;
}

.confirmation-status-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.confirmation-numbers > span.pending {
  border-color: #e1a33d;
  color: #2e2109;
  background:
    repeating-linear-gradient(
      -45deg,
      #edb554,
      #edb554 6px,
      #dca039 6px,
      #dca039 12px
    );
}

.confirmation-numbers > span.locked {
  border-color: rgba(111,207,151,.66);
  color: #dcefe4;
  background: #28503a;
}

.admin-stats-six {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-stat-pending {
  border-color: rgba(230,166,64,.24) !important;
  background: rgba(230,166,64,.04) !important;
}

.admin-stat-pending strong {
  color: #efbd61 !important;
}

.admin-stat-locked {
  border-color: rgba(111,207,151,.24) !important;
  background: rgba(111,207,151,.04) !important;
}

.admin-stat-locked strong {
  color: #8bdcab !important;
}

.admin-email-status {
  font-size: .8rem !important;
}

.admin-email-status.ready {
  color: #8bdcab !important;
}

.admin-email-status.not-ready {
  color: #ef9b8f !important;
}

.admin-entry-status-groups {
  display: grid;
  gap: 9px;
  margin: 11px 0;
}

.admin-number-group {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
}

.admin-number-group.pending {
  border-color: rgba(230,166,64,.24);
  background: rgba(230,166,64,.035);
}

.admin-number-group.locked {
  border-color: rgba(111,207,151,.22);
  background: rgba(111,207,151,.03);
}

.admin-number-group-title {
  display: block;
  margin-bottom: 7px;
  color: #93a69a;
  font-size: .65rem;
  font-weight: 950;
  letter-spacing: .075em;
}

.admin-entry-numbers span.pending {
  color: #2d2008;
  background: #e3a441;
}

.admin-entry-numbers span.locked {
  color: #d9eee2;
  background: #28503a;
  border: 1px solid rgba(111,207,151,.34);
}

.admin-number-empty {
  color: #71837a;
  font-size: .7rem;
}

.admin-lock-open-button {
  width: 100%;
  min-height: 58px;
  margin: 11px 0 3px;
  padding: 10px 12px;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(230,166,64,.40);
  border-radius: 11px;
  color: #f5d487;
  background: rgba(230,166,64,.055);
  text-align: left;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}

.admin-lock-open-button:active,
.admin-lock-open-button.is-pressed {
  transform: scale(.975);
  filter: brightness(1.18);
}

.admin-lock-open-button strong {
  font-size: .75rem;
  letter-spacing: .04em;
}

.admin-lock-open-button span {
  color: #ad9c73;
  font-size: .68rem;
}

.admin-approval-panel {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(230,166,64,.30);
  border-radius: 13px;
  background: rgba(230,166,64,.045);
  animation: screen-enter .18s ease-out;
}

.admin-approval-head {
  display: grid;
  gap: 3px;
  margin-bottom: 9px;
}

.admin-approval-head strong {
  color: #efbd61;
  font-size: .76rem;
  letter-spacing: .04em;
}

.admin-approval-head span {
  color: #9eafa5;
  font-size: .7rem;
  line-height: 1.4;
}

.admin-lock-comment {
  width: 100%;
  min-height: 78px;
  padding: 10px 11px;
  resize: vertical;
  border: 1px solid rgba(230,166,64,.28);
  border-radius: 10px;
  outline: 0;
  color: #132117;
  background: #f5f4ec;
  font: 650 14px/1.45 system-ui, sans-serif;
}

.admin-lock-comment:focus {
  border-color: #e6a640;
  box-shadow: 0 0 0 3px rgba(230,166,64,.13);
}

.admin-lock-comment.field-error {
  border-color: #d75e54;
  box-shadow: 0 0 0 3px rgba(215,94,84,.12);
}

.admin-approval-buttons {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  margin-top: 9px;
}

.admin-lock-button {
  min-height: 50px;
  padding: 8px 12px;
  display: grid;
  gap: 2px;
  border: 1px solid rgba(111,207,151,.48);
  border-radius: 11px;
  color: #e9f6ee;
  background: linear-gradient(180deg, #356848, #244d36);
  text-align: left;
  cursor: pointer;
}

.admin-lock-button strong {
  font-size: .72rem;
  letter-spacing: .04em;
}

.admin-lock-button span {
  color: #b9d6c4;
  font-size: .66rem;
}

.admin-lock-button:active {
  transform: scale(.985);
}

.admin-lock-button.is-loading {
  opacity: .7;
  cursor: wait;
  animation: admin-working .8s ease-in-out infinite alternate;
}

.admin-lock-history {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

.admin-history-title {
  color: #86988d;
  font-size: .65rem;
  letter-spacing: .08em;
}

.admin-lock-notice {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
}

.admin-lock-notice-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.admin-lock-notice-top strong {
  color: #dde8e1;
  font-size: .72rem;
}

.admin-lock-notice p {
  margin: 7px 0 5px;
  color: #a7b7ad;
  font-size: .72rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.admin-lock-notice small {
  display: block;
  color: #71837a;
  font-size: .65rem;
}

.email-status {
  flex: 0 0 auto;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: .56rem;
  font-weight: 950;
  letter-spacing: .045em;
}

.email-status.sent {
  color: #0f2d1b;
  background: #82d9a4;
}

.email-status.failed,
.email-status.not_configured {
  color: #fff0ee;
  background: #a64640;
}

.email-status.pending {
  color: #2d2008;
  background: #e3a441;
}

.email-error-text {
  margin-top: 5px;
  color: #e99a93 !important;
}

.retry-email-button {
  margin-top: 8px;
  border-color: rgba(215,173,87,.28);
  color: #e8ca87;
  background: rgba(215,173,87,.035);
}

@media (min-width: 700px) {
  .admin-stats-six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .admin-approval-buttons {
    grid-template-columns: 1fr;
  }

  .admin-approval-buttons .compact-button {
    width: 100%;
  }
}


/* =========================================================
   PHASE 9 — FIRST PENDING CONFIRMATION EMAIL
   ========================================================= */

.confirmation-email-status {
  margin: 10px 0 0 !important;
  padding-top: 9px;
  border-top: 1px solid rgba(255,255,255,.07);
  color: #a9b8af;
  font-size: .72rem !important;
  line-height: 1.45;
}

.confirmation-email-status.sent {
  color: #8bdcab;
}

.confirmation-email-status.failed {
  color: #efad73;
}

.admin-initial-email {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid rgba(230,166,64,.20);
  border-radius: 10px;
  background: rgba(230,166,64,.025);
}

.admin-initial-email p {
  margin: 7px 0 4px;
  color: #a7b7ad;
  font-size: .72rem;
  line-height: 1.4;
}

.admin-initial-email small {
  display: block;
  color: #71837a;
  font-size: .65rem;
}


/* =========================================================
   PHASE 10 — REVIEW EMAIL NOTICE
   ========================================================= */

.review-email-notice {
  margin-top: 12px;
  padding: 12px 13px;
  border: 1px solid rgba(230,166,64,.24);
  border-radius: 13px;
  background: rgba(230,166,64,.04);
}

.review-email-notice strong {
  display: block;
  margin-bottom: 4px;
  color: #efbd61;
  font-size: .72rem;
  letter-spacing: .065em;
}

.review-email-notice p {
  margin: 0;
  color: #aebdb4;
  font-size: .76rem;
  line-height: 1.5;
}


/* =========================================================
   PHASE 10B — HIGH-VISIBILITY EMAIL/JUNK WARNING
   ========================================================= */

.email-junk-warning {
  margin: 0 0 16px;
  padding: 13px 14px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  border: 1px solid rgba(239,178,70,.58);
  border-radius: 14px;
  background:
    linear-gradient(
      180deg,
      rgba(230,166,64,.12),
      rgba(230,166,64,.055)
    );
  box-shadow:
    inset 0 0 0 1px rgba(255,226,157,.04),
    0 6px 18px rgba(0,0,0,.12);
}

.email-junk-warning-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(239,178,70,.72);
  border-radius: 50%;
  color: #241907;
  background: #efb246;
  font-size: 1rem;
  font-weight: 950;
}

.email-junk-warning strong {
  display: block;
  margin: 1px 0 4px;
  color: #f4c76f;
  font-size: .76rem;
  letter-spacing: .045em;
}

.email-junk-warning p {
  margin: 0;
  color: #d0d8d2;
  font-size: .79rem;
  line-height: 1.5;
}

.email-junk-warning b {
  color: #f1e2bd;
  overflow-wrap: anywhere;
}

.confirmation-junk-warning {
  margin: 0 0 15px;
  text-align: left;
}


/* =========================================================
   PHASE 11 — QUEEN GOLFER / CORRECT TEE / GOLF-BALL NUMBERS
   ========================================================= */

/* Replace the old chess glyph pair with generated line-art. */
.queen-golfer-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 4px 0 0;
  overflow: visible;
}

.queen-golfer-art {
  width: min(100%, 176px);
  height: auto;
  max-height: 142px;
  object-fit: contain;
  object-position: center bottom;
  filter:
    drop-shadow(0 10px 24px rgba(0,0,0,.44))
    drop-shadow(0 0 8px rgba(215,173,87,.10));
}

.chess-king,
.chess-knight {
  display: none !important;
}

/* The original tee widened at the bottom, which visually read upside-down.
   This version has the cup under the ball and tapers to a point below. */
.tee {
  top: 104px;
  width: 18px;
  height: 43px;
  background:
    linear-gradient(
      90deg,
      #8b592a 0%,
      #e2b46a 44%,
      #b47b39 62%,
      #794a23 100%
    );
  clip-path: polygon(
    0 0,
    100% 0,
    72% 15%,
    58% 72%,
    50% 100%,
    42% 72%,
    28% 15%
  );
}

/* Make every number a simple dimpled golf ball. */
.number-button {
  position: relative;
  overflow: hidden;
  border-radius: 50% !important;
  isolation: isolate;
  box-shadow:
    inset -7px -9px 14px rgba(22,34,26,.17),
    0 5px 12px rgba(0,0,0,.20);
}

.number-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: .42;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(48,58,49,.18) 0 2px, transparent 2.5px),
    radial-gradient(circle at 66% 23%, rgba(48,58,49,.13) 0 2px, transparent 2.5px),
    radial-gradient(circle at 37% 58%, rgba(48,58,49,.15) 0 2px, transparent 2.5px),
    radial-gradient(circle at 79% 72%, rgba(48,58,49,.14) 0 2px, transparent 2.5px);
  background-size:
    15px 15px,
    17px 17px,
    18px 18px,
    19px 19px;
}

/* Available = classic off-white golf ball. */
.number-button.available {
  border: 1px solid rgba(235,239,230,.74) !important;
  color: #142019 !important;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.95), transparent 25%),
    linear-gradient(145deg, #fbfaf1 0%, #ececdf 62%, #d4d8ca 100%) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}

.number-button.available:hover {
  border-color: rgba(215,173,87,.80) !important;
  box-shadow:
    inset -7px -9px 14px rgba(22,34,26,.14),
    0 0 0 2px rgba(215,173,87,.16),
    0 7px 15px rgba(0,0,0,.22);
}

/* Selected now = gold golf ball. */
.number-button.selected {
  border: 1px solid #f4d58b !important;
  color: #19130a !important;
  background:
    radial-gradient(circle at 34% 25%, rgba(255,238,180,.82), transparent 26%),
    linear-gradient(145deg, #f6d984 0%, #d8a943 65%, #b77b22 100%) !important;
}

/* Pending = caution gold golf ball, still striped. */
.number-button.pending {
  border: 1px solid rgba(239,178,70,.82) !important;
  color: #261a07 !important;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,229,159,.42), transparent 23%),
    repeating-linear-gradient(
      -45deg,
      #efb54a 0 7px,
      #da9729 7px 14px
    ) !important;
}

/* Locked = green golf ball. */
.number-button.locked {
  border: 1px solid rgba(125,221,161,.62) !important;
  color: #eef9f1 !important;
  background:
    radial-gradient(circle at 34% 25%, rgba(188,244,208,.22), transparent 27%),
    linear-gradient(145deg, #4f9c69 0%, #2d6b47 60%, #1b4b31 100%) !important;
}

/* Preserve P/L state marks above the golf-ball texture. */
.number-button.pending::after,
.number-button.locked::after {
  z-index: 2;
}

/* Golf-ball legend markers too. */
.legend-dot.available,
.legend-dot.selected,
.legend-dot.pending,
.legend-dot.locked {
  position: relative;
  border-radius: 50%;
  box-shadow: inset -2px -3px 4px rgba(0,0,0,.17);
}

.legend-dot.available {
  background:
    radial-gradient(circle at 35% 28%, #fff 0 18%, transparent 20%),
    #eeeee4 !important;
}

.legend-dot.selected {
  background:
    radial-gradient(circle at 35% 28%, #ffe6a0 0 18%, transparent 20%),
    #d7ad57 !important;
}

.legend-dot.pending {
  background:
    repeating-linear-gradient(
      -45deg,
      #efb54a 0 3px,
      #d9962c 3px 6px
    ) !important;
}

.legend-dot.locked {
  background:
    radial-gradient(circle at 35% 28%, #9ce3b5 0 18%, transparent 20%),
    #4d9a67 !important;
}

/* Real exit path from number selection. */
.board-submit-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}

.board-cancel-button {
  min-width: 142px;
  padding: 8px 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(215,173,87,.30);
  border-radius: 12px;
  color: #e8d7ad;
  background: rgba(255,255,255,.025);
  cursor: pointer;
  text-align: left;
}

.board-cancel-button > span:first-child {
  font-size: 1.65rem;
  line-height: 1;
  font-weight: 350;
}

.board-cancel-button > span:last-child {
  display: grid;
  gap: 1px;
}

.board-cancel-button strong {
  font-size: .70rem;
  letter-spacing: .055em;
}

.board-cancel-button small {
  color: #91a397;
  font-size: .62rem;
}

.board-cancel-button:hover,
.board-cancel-button:focus-visible {
  border-color: rgba(239,190,92,.62);
  color: #f2dfaf;
  background: rgba(215,173,87,.055);
}

.board-cancel-button:active {
  transform: scale(.98);
}

@media (min-width: 560px) {
  .queen-golfer-art {
    width: min(100%, 205px);
    max-height: 190px;
  }
}

@media (min-width: 760px) {
  .queen-golfer-art {
    width: min(100%, 235px);
    max-height: 198px;
  }
}

@media (max-width: 520px) {
  .board-submit-actions {
    grid-template-columns: 1fr;
  }

  .board-cancel-button {
    width: 100%;
    min-width: 0;
  }
}


/* =========================================================
   PHASE 11B — NUMBER PAGE QUIT BUTTON
   ========================================================= */

.board-submit-actions {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.board-quit-button {
  min-width: 132px;
}

@media (max-width: 520px) {
  .board-submit-actions {
    grid-template-columns: 1fr;
  }

  .board-quit-button {
    width: 100%;
    min-width: 0;
  }
}


/* =========================================================
   PHASE 12 — ADMIN STATUS REVERSAL / RELEASE
   ========================================================= */

.admin-status-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 11px 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.admin-unlock-pending-button {
  border-color: rgba(230,166,64,.32);
  color: #efc471;
  background: rgba(230,166,64,.035);
}

.admin-release-numbers-button {
  border-color: rgba(219,93,78,.32);
  color: #efaaa1;
  background: rgba(219,93,78,.035);
}

.admin-unlock-pending-button.is-armed {
  border-color: rgba(239,178,70,.78);
  background: rgba(230,166,64,.12);
}

.admin-release-numbers-button.is-armed {
  border-color: rgba(232,92,76,.78);
  background: rgba(219,93,78,.12);
}

@media (max-width: 520px) {
  .admin-status-actions {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   PHASE 13 — PER-NUMBER ADMIN CONTROLS
   ========================================================= */

.admin-per-number-actions {
  display: grid;
  gap: 7px;
  margin: 8px 0 12px;
}

.admin-number-action-row {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
}

.admin-number-action-row.locked {
  border-color: rgba(111,207,151,.20);
  background: rgba(111,207,151,.025);
}

.admin-number-action-row.pending {
  border-color: rgba(230,166,64,.20);
  background: rgba(230,166,64,.025);
}

.admin-number-action-identity {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-action-number {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: .72rem;
  font-weight: 950;
}

.admin-action-number.locked {
  color: #e6f5eb;
  background: #28503a;
  border: 1px solid rgba(111,207,151,.42);
}

.admin-action-number.pending {
  color: #2b1d06;
  background:
    repeating-linear-gradient(
      -45deg,
      #efb54a 0 4px,
      #d9982d 4px 8px
    );
  border: 1px solid rgba(239,178,70,.52);
}

.admin-action-state {
  color: #8fa198;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .055em;
}

.admin-number-action-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

@media (max-width: 520px) {
  .admin-number-action-row {
    grid-template-columns: 1fr;
  }

  .admin-number-action-buttons {
    justify-content: stretch;
  }

  .admin-number-action-buttons .admin-mini-button {
    flex: 1 1 auto;
  }
}


/* =========================================================
   PHASE 14 — SUBMIT BAR AT TRUE PAGE BOTTOM
   ========================================================= */

.board-submit-bar {
  position: static !important;
  bottom: auto !important;
  z-index: auto !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

/* =========================================================
   PHASE 14 — TAP THE NUMBER INSIDE THE PLAYER ENTRY
   ========================================================= */

.admin-entry-numbers-editable {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-status-number {
  min-width: 34px;
  min-height: 34px;
  padding: 0 9px;
  border-radius: 999px;
  font-weight: 950;
  cursor: pointer;
  transition:
    transform .12s ease,
    filter .12s ease,
    box-shadow .12s ease;
}

.admin-status-number:hover,
.admin-status-number:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.10);
}

.admin-status-number:active {
  transform: scale(.95);
}

.admin-entry-numbers button.pending {
  border: 1px solid rgba(239,178,70,.58);
}

.admin-entry-numbers button.locked {
  border: 1px solid rgba(111,207,151,.45);
}

.admin-number-editor {
  margin-top: 10px;
  padding: 11px;
  border: 1px solid rgba(215,173,87,.24);
  border-radius: 11px;
  background: rgba(0,0,0,.12);
}

.admin-number-editor[hidden] {
  display: none !important;
}

.admin-number-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.admin-number-editor-head strong {
  color: #e9d69e;
  font-size: .68rem;
  letter-spacing: .055em;
}

.admin-number-editor-close {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: #a9bbb0;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.admin-single-lock-comment {
  margin-bottom: 8px;
}

.admin-single-lock-button {
  width: 100%;
  margin-bottom: 8px;
}

.admin-number-editor > .admin-mini-button {
  width: 100%;
  margin-top: 7px;
}


/* =========================================================
   PHASE 15 — BULK APPROVAL + PER-NUMBER CORRECTIONS
   ========================================================= */

.admin-number-editor-note {
  margin: 0 0 9px;
  color: #96a89d;
  font-size: .68rem;
  line-height: 1.45;
}

.admin-manual-lock-button {
  width: 100%;
  margin-top: 7px;
  border-color: rgba(111,207,151,.30);
  color: #9fe0b7;
  background: rgba(111,207,151,.035);
}

.admin-manual-lock-button.is-armed {
  border-color: rgba(111,207,151,.72);
  background: rgba(111,207,151,.11);
}


/* =========================================================
   PHASE 16 — FINAL DRAWING DETAILS
   ========================================================= */

.drawing-summary-card {
  margin: 16px auto 0;
  max-width: 540px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding: 12px 13px;
  border: 1px solid rgba(215,173,87,.30);
  border-radius: 14px;
  background:
    linear-gradient(
      135deg,
      rgba(215,173,87,.075),
      rgba(112,209,152,.035)
    );
  text-align: left;
}

.drawing-summary-date {
  min-width: 105px;
  padding-right: 12px;
  display: grid;
  gap: 1px;
  border-right: 1px solid rgba(215,173,87,.20);
}

.drawing-summary-date span {
  color: #8fa197;
  font-size: .59rem;
  font-weight: 950;
  letter-spacing: .12em;
}

.drawing-summary-date strong {
  color: var(--gold-light);
  font-size: .78rem;
  letter-spacing: .04em;
}

.drawing-summary-date small {
  color: #d5ddd8;
  font-size: .67rem;
  font-weight: 800;
}

.drawing-summary-copy strong {
  display: block;
  margin-bottom: 3px;
  color: #e9ddbb;
  font-size: .69rem;
  letter-spacing: .055em;
}

.drawing-summary-copy p {
  margin: 0;
  color: #9fb0a6;
  font-size: .70rem;
  line-height: 1.42;
}

.rules-list strong {
  color: #d9c28c;
}

.rules-link {
  color: #efc56f;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rules-link:hover,
.rules-link:focus-visible {
  color: #ffe2a2;
}

.finalized-rules-note {
  border-color: rgba(239,178,70,.40);
  background: rgba(239,178,70,.07);
}

.drawing-cutoff-warning {
  margin: 0 0 12px;
  padding: 12px 13px;
  border: 1px solid rgba(239,178,70,.40);
  border-radius: 13px;
  background:
    linear-gradient(
      135deg,
      rgba(239,178,70,.085),
      rgba(239,178,70,.035)
    );
}

.drawing-cutoff-warning strong {
  display: block;
  margin-bottom: 4px;
  color: #f0c873;
  font-size: .70rem;
  letter-spacing: .055em;
}

.drawing-cutoff-warning p {
  margin: 0;
  color: #b9c5be;
  font-size: .75rem;
  line-height: 1.5;
}

.drawing-cutoff-warning b {
  color: #eee1be;
}

.confirmation-drawing-info {
  margin: 11px 0 0;
  padding: 11px 12px;
  border: 1px solid rgba(215,173,87,.27);
  border-radius: 12px;
  background: rgba(215,173,87,.045);
  text-align: left;
}

.confirmation-drawing-info strong {
  display: block;
  margin-bottom: 4px;
  color: var(--gold-light);
  font-size: .68rem;
  letter-spacing: .045em;
}

.confirmation-drawing-info p {
  margin: 0;
  color: #9eafa5;
  font-size: .72rem;
  line-height: 1.46;
}

.confirmation-drawing-info b {
  color: #ddd2b2;
}

@media (min-width: 960px) {
  .drawing-summary-card {
    margin-left: 0;
  }
}

@media (max-width: 430px) {
  .drawing-summary-card {
    grid-template-columns: 1fr;
  }

  .drawing-summary-date {
    padding: 0 0 8px;
    border-right: 0;
    border-bottom: 1px solid rgba(215,173,87,.20);
  }
}


/* =========================================================
   PHASE 17 — HARD CUTOFF / TECHNICAL-CORRECTION POLICY
   ========================================================= */

.admin-cutoff-banner {
  margin: 12px 0;
  padding: 11px 13px;
  border: 1px solid rgba(239,178,70,.34);
  border-radius: 12px;
  background: rgba(239,178,70,.05);
}

.admin-cutoff-banner strong {
  display: block;
  margin-bottom: 4px;
  color: #efc36b;
  font-size: .69rem;
  letter-spacing: .055em;
}

.admin-cutoff-banner p {
  margin: 0;
  color: #a9b8af;
  font-size: .72rem;
  line-height: 1.48;
}

.admin-cutoff-banner.closed {
  border-color: rgba(218,86,72,.52);
  background: rgba(218,86,72,.07);
}

.admin-cutoff-banner.closed strong {
  color: #f0a39a;
}

.admin-status-number:disabled,
.admin-lock-open-button:disabled {
  cursor: not-allowed;
  opacity: .52;
  filter: grayscale(.25);
}

.admin-action-button:disabled {
  cursor: not-allowed;
  opacity: .48;
}


/* =========================================================
   PHASE 18 — ADMIN NEW-ENTRY ALERTS
   ========================================================= */

.admin-new-entry-alert {
  margin: 10px 0;
  padding: 10px 11px;
  border: 1px solid rgba(111,207,151,.24);
  border-radius: 11px;
  background: rgba(111,207,151,.035);
}

.admin-new-entry-alert p {
  margin: 6px 0 0;
  color: #9db0a4;
  font-size: .70rem;
  line-height: 1.42;
}

.admin-new-entry-alert small {
  display: block;
  margin-top: 5px;
  color: #82948a;
}

.admin-browser-alerts-status {
  align-self: center;
  color: #83958b;
  font-size: .61rem;
  font-weight: 850;
  letter-spacing: .045em;
}

@media (max-width: 580px) {
  .admin-browser-alerts-status {
    flex-basis: 100%;
  }
}


/* =========================================================
   PHASE 19 — SECURITY HARDENING
   ========================================================= */

.security-events-card {
  border-color: rgba(217, 174, 86, .18);
}

.security-event-list {
  display: grid;
  gap: 8px;
}

.security-event-row {
  padding: 10px 11px;
  border: 1px solid rgba(218, 86, 72, .20);
  border-radius: 10px;
  background: rgba(218, 86, 72, .025);
}

.security-event-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.security-event-top strong {
  color: #efb0a7;
  font-size: .68rem;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.security-event-top time {
  color: #819188;
  font-size: .62rem;
}

.security-event-meta {
  margin-top: 5px;
  color: #9eaea4;
  font-size: .65rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.security-event-row p {
  margin: 6px 0 0;
  color: #b5c0b9;
  font-size: .68rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}