/* ============================================================
   Lolly Jars — Art Deco theme
   Mobile-first. Dark-only by design, to match the invitation.
   ============================================================ */

:root {
  --bg:          #07070e;
  --gold:        #d4af37;
  --gold-bright: #ffd700;
  --gold-soft:   #f7e08a;
  --hair:        rgba(212, 175, 55, .30);
  --hair-soft:   rgba(212, 175, 55, .14);
  --text:        #f4f0e6;
  --muted:       #a49c8a;
  --danger:      #e88a7d;

  --serif: "Playfair Display", Didot, "Bodoni MT", Georgia, serif;
  --sans:  "Jost", "Century Gothic", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;

  --frame-inset: 9px;
  --tap: 3.1rem;          /* minimum comfortable tap height */
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);   /* stops white flashes during overscroll */
}

body {
  margin: 0;
  padding:
    2.25rem
    calc(1.35rem + env(safe-area-inset-right))
    calc(2.5rem + env(safe-area-inset-bottom))
    calc(1.35rem + env(safe-area-inset-left));
  min-height: 100vh;
  min-height: 100dvh;     /* survives the collapsing mobile toolbar */
  color: var(--text);
  font: 400 16px/1.6 var(--sans);
  -webkit-tap-highlight-color: transparent;
}

/* The whole backdrop lives in one fixed layer. Deliberately NOT
   background-attachment: fixed on body — that repaints on every scroll
   frame in iOS Safari and is the classic source of scroll jank. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--bg);
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(212,175,55,.5), transparent),
    radial-gradient(1.5px 1.5px at 84% 26%, rgba(212,175,55,.4), transparent),
    radial-gradient(1.5px 1.5px at 24% 72%, rgba(212,175,55,.35), transparent),
    radial-gradient(1.5px 1.5px at 71% 84%, rgba(212,175,55,.45), transparent),
    radial-gradient(1.5px 1.5px at 46% 42%, rgba(212,175,55,.3), transparent),
    repeating-linear-gradient(45deg,  transparent 0 44px, rgba(212,175,55,.035) 44px 45px),
    repeating-linear-gradient(-45deg, transparent 0 44px, rgba(212,175,55,.035) 44px 45px),
    radial-gradient(115% 75% at 50% -10%, #22223f 0%, #12121f 42%, #07070e 100%);
}

/* ---------- The gold frame ---------- */

.frame {
  position: fixed;
  inset: var(--frame-inset);
  border: 1px solid rgba(212, 175, 55, .5);
  pointer-events: none;
  z-index: 40;
}
.frame::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(212, 175, 55, .18);
}
.frame i {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #0b0b16;
  border: 1px solid rgba(212, 175, 55, .8);
  transform: rotate(45deg);
}
.frame i:nth-child(1) { top: -5.5px;    left: -5.5px; }
.frame i:nth-child(2) { top: -5.5px;    right: -5.5px; }
.frame i:nth-child(3) { bottom: -5.5px; left: -5.5px; }
.frame i:nth-child(4) { bottom: -5.5px; right: -5.5px; }

/* ---------- Layout ---------- */

.wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 33rem;
  margin: 0 auto;
}
.wrap.wide { max-width: 64rem; }

/* ---------- Deco ornaments ---------- */

/* Half sunburst — a fan of gold rays.
   Rays need ~1deg of angular width or they alias into a smudge, and the
   spacing must not divide 90 or a ray lands flat along the bottom edge. */
.fan {
  width: 124px;
  height: 21px;
  margin: 0 auto;
  background: repeating-conic-gradient(from 0deg at 50% 100%,
    var(--gold-soft) 0 1deg, transparent 1deg 13deg);
  -webkit-mask-image: radial-gradient(62px 21px at 50% 100%,
    #000 6%, rgba(0,0,0,.7) 42%, transparent 80%);
          mask-image: radial-gradient(62px 21px at 50% 100%,
    #000 6%, rgba(0,0,0,.7) 42%, transparent 80%);
  opacity: .9;
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, .45));
}

/* Full sunburst, sits behind a heading */
.burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26rem;
  height: 26rem;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(212,175,55,.7) 0 .55deg, transparent .55deg 4.5deg);
  -webkit-mask-image: radial-gradient(closest-side,
    rgba(0,0,0,.8) 0%, rgba(0,0,0,.3) 26%, transparent 50%);
          mask-image: radial-gradient(closest-side,
    rgba(0,0,0,.8) 0%, rgba(0,0,0,.3) 26%, transparent 50%);
  opacity: .42;
}

/* Rule with a diamond in the middle */
.rule {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 1.15rem 0;
  color: var(--hair);
}
.rule::before,
.rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hair), transparent);
}
.rule b {
  width: 6px;
  height: 6px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
  flex: none;
}

/* Stacked double rule, as under the time on the invite */
.rule-double {
  height: 5px;
  width: 60%;
  margin: 1.25rem auto;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}

/* ---------- Type ---------- */

.overline {
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: #cfc7b2;
  margin: 0 0 .85rem;
  text-indent: .38em;
}

h1 {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(1.85rem, 10vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: .01em;
  color: var(--gold-bright);
  margin: 0;
  text-shadow: 0 0 26px rgba(255, 215, 0, .3), 0 0 64px rgba(255, 215, 0, .12);
}

.script {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold-soft);
}

.lede {
  color: var(--muted);
  margin: .9rem 0 0;
  font-size: .92rem;
  letter-spacing: .02em;
}

.legend {
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #cfc7b2;
  text-indent: .32em;
  text-align: center;
  margin: 0 0 1.25rem;
}

header { text-align: center; margin-bottom: 1.35rem; position: relative; }

/* ---------- Panels ---------- */

.panel {
  position: relative;
  padding: 1.6rem 1.1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.008));
  border: 1px solid var(--hair);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
}
.panel.double::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--hair-soft);
  pointer-events: none;
}

/* ---------- Form ---------- */

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

label { display: block; }

.field-label {
  display: block;
  font-size: .66rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
  text-indent: .24em;
  margin-bottom: .5rem;
  text-align: center;
}

input {
  width: 100%;
  min-height: var(--tap);
  padding: .7rem .75rem;
  font-family: var(--serif);
  font-size: 1.2rem;          /* >=16px, or iOS Safari zooms in on focus */
  letter-spacing: .04em;
  text-align: center;
  color: var(--gold-soft);
  background: rgba(0,0,0,.28);
  border: 1px solid var(--hair);
  border-radius: 0;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: rgba(164,156,138,.45); font-style: italic; }
input:focus {
  outline: 0;
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 1px rgba(255,215,0,.25), 0 0 22px rgba(255,215,0,.15);
}
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- The three jars ----------
   Phones get a stacked list: jar on the left, full-width field on the
   right. Wider screens get the poster layout, three across. */

.jars { display: grid; gap: .7rem; }

/* One row per jar: icon, name, field — keeps all three on one screen */
.jar {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  align-items: center;
  gap: .5rem;
  padding: .5rem .6rem .5rem .35rem;
  border: 1px solid var(--hair-soft);
  background: rgba(0,0,0,.16);
}
.jar-slot {
  display: flex;
  align-items: center;
  justify-content: center;
}
.jar-body {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 7.5rem;
  align-items: center;
  gap: .6rem;
}

.jar-icon {
  display: block;
  color: var(--gold);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(212,175,55,.28));
}
/* Stroke weight scales with the icon, so nudge it up on the smaller jars
   to keep the line looking the same weight across all three. */
.jar-icon.lg { width: 3.1rem; stroke-width: 1.3; }
.jar-icon.md { width: 2.5rem; stroke-width: 1.55; }
.jar-icon.sm { width: 1.95rem; stroke-width: 1.9; }

.jar-name {
  display: block;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--text);
  letter-spacing: .13em;
  text-transform: uppercase;
  text-align: left;
}

/* ---------- Buttons ---------- */

.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.35rem;
  padding: .9rem 1.25rem;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-indent: .28em;
  text-transform: uppercase;
  color: #14101f;
  background: linear-gradient(180deg, #f8e493 0%, #d9b545 52%, #b8912c 100%);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  touch-action: manipulation;   /* no 300ms double-tap-zoom delay */
  transition: filter .12s, box-shadow .15s, transform .06s;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(20, 16, 31, .3);
  pointer-events: none;
}
.btn:active { transform: translateY(1px); filter: brightness(.95); }
.btn:focus-visible { outline: 1px solid var(--gold-bright); outline-offset: 3px; }
.btn:disabled { filter: saturate(.35) brightness(.8); cursor: default; box-shadow: none; transform: none; }

.btn-ghost {
  min-height: 2.75rem;
  padding: .6rem 1.1rem;
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  color: var(--gold-soft);
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  transition: border-color .15s, color .15s, background .15s;
}
.btn-ghost:active { background: rgba(212,175,55,.14); }
.btn-ghost:focus-visible { outline: 1px solid var(--gold-bright); outline-offset: 2px; }
.btn-ghost:disabled { opacity: .45; cursor: default; }

/* ---------- Messages ---------- */

.msg {
  display: none;
  margin-top: 1.1rem;
  padding: .8rem 1rem;
  font-size: .88rem;
  letter-spacing: .02em;
  text-align: center;
  color: var(--danger);
  border: 1px solid rgba(232,138,125,.35);
  background: rgba(232,138,125,.06);
}
.msg.show { display: block; }

.note {
  min-height: 1.3em;
  margin-top: .8rem;
  font-size: .82rem;
  letter-spacing: .02em;
  text-align: center;
  color: var(--danger);
}
.note.ok { color: var(--gold-soft); }

footer {
  margin-top: 1.6rem;
  text-align: center;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(164,156,138,.65);
  text-indent: .14em;
  text-wrap: balance;      /* keeps the two clauses on tidy lines */
}

.hidden { display: none !important; }

/* ============================================================
   Admin
   ============================================================ */

.gate { max-width: 25rem; }

.admin-head { text-align: center; margin-bottom: 1.75rem; position: relative; }
.admin-head h1 { font-size: clamp(1.6rem, 8vw, 2.5rem); }

/* Phones: count on its own line, then three even buttons */
.toolbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin: 1.5rem 0 1.25rem;
}
.toolbar .spacer { display: none; }
.tally {
  grid-column: 1 / -1;
  text-align: center;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  text-indent: .2em;
}
.toolbar .btn-ghost { padding: .6rem .5rem; }

/* Actual-count setter — three narrow fields, then a full-width button */
.actuals-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.actuals-row .btn { grid-column: 1 / -1; margin-top: .5rem; }
.actuals-row input { padding-left: .3rem; padding-right: .3rem; }

/* Podiums */
.podiums { display: grid; gap: 1.1rem; }
.podium { padding: 1.4rem 1.1rem; }
.podium h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: .03em;
  color: var(--gold-soft);
  margin: 0;
  text-align: center;
}
.podium .actual {
  margin: .5rem 0 0;
  text-align: center;
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  text-indent: .22em;
}
.podium .actual strong {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--gold-bright);
  display: block;
  margin-top: .25rem;
  text-shadow: 0 0 22px rgba(255,215,0,.3);
}

.places { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .6rem; }
.places li {
  display: grid;
  grid-template-columns: 1.9rem 1fr auto;
  gap: .75rem;
  align-items: center;
  padding: .65rem .75rem;
  border: 1px solid var(--hair-soft);
  background: rgba(0,0,0,.22);
}
.places li.first {
  border-color: rgba(212,175,55,.55);
  background: linear-gradient(90deg, rgba(212,175,55,.1), rgba(212,175,55,.02));
  box-shadow: 0 0 22px rgba(212,175,55,.12);
}
.rank {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
  text-align: center;
  letter-spacing: .02em;
}
.places li.first .rank { color: var(--gold-bright); text-shadow: 0 0 16px rgba(255,215,0,.45); }
.who {
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.who small {
  display: block;
  font-family: var(--sans);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .15rem;
}
.diff {
  font-family: var(--serif);
  font-size: .9rem;
  text-align: right;
  color: var(--gold-soft);
  font-variant-numeric: tabular-nums;
}
.diff.exact {
  font-size: .64rem;
  font-family: var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.empty {
  color: var(--muted);
  font-size: .82rem;
  letter-spacing: .1em;
  text-align: center;
  padding: 1.2rem .5rem .4rem;
  font-style: italic;
}

/* Entries table — scrolls sideways on a phone rather than squashing */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .65rem .6rem; white-space: nowrap; }
th {
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  text-indent: .2em;
  border-bottom: 1px solid var(--hair);
}
td { border-bottom: 1px solid rgba(212,175,55,.08); font-size: .9rem; }
td.name { font-family: var(--serif); font-size: 1rem; color: var(--text); }
td.num, th.num {
  text-align: right;
  font-family: var(--serif);
  color: var(--gold-soft);
  font-variant-numeric: tabular-nums;
}
td.when { font-size: .76rem; letter-spacing: .04em; color: var(--muted); }

/* Delete button — first column so it stays reachable when the table
   scrolls sideways on a phone */
td.del, th:first-child { width: 2.4rem; padding-left: .2rem; padding-right: .2rem; }
.x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  font-family: var(--sans);
  font-size: 1.2rem;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--hair-soft);
  border-radius: 0;
  cursor: pointer;
  touch-action: manipulation;
  transition: color .15s, border-color .15s, background .15s;
}
.x:active { background: rgba(232,138,125,.2); color: var(--danger); }
.x:focus-visible { outline: 1px solid var(--danger); outline-offset: 2px; }
.x:disabled { opacity: .35; cursor: default; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.scroll-hint {
  margin: .7rem 0 0;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(164,156,138,.6);
}

/* ============================================================
   Wider screens — the poster layout
   ============================================================ */

@media (min-width: 30rem) {
  :root { --frame-inset: 12px; }

  body { padding: 3.5rem 2rem 4rem; }

  header { margin-bottom: 2.5rem; }
  .overline { font-size: .68rem; letter-spacing: .44em; text-indent: .44em; margin-bottom: 1.1rem; }
  .lede { margin-top: 1.15rem; font-size: .95rem; }
  .legend { font-size: .7rem; letter-spacing: .36em; text-indent: .36em; margin-bottom: 1.4rem; }

  .burst { width: 34rem; height: 34rem; }
  .rule, .rule-double { margin-top: 2rem; margin-bottom: 2rem; }
  .panel { padding: 2.25rem 1.9rem; }
  .panel.double::before { inset: 6px; }
  footer { margin-top: 2rem; font-size: .72rem; }

  /* Three jars across, icon above the field */
  .jars {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
    align-items: end;
  }
  .jar {
    display: block;
    text-align: center;
    padding: 0;
    border: 0;
    background: none;
  }
  .jar-slot { align-items: flex-end; margin-bottom: .8rem; }
  .jar-body { display: block; }
  .jar-name { margin-bottom: .5rem; }
  .jar-icon.lg { width: 3.4rem; }
  .jar-icon.md { width: 2.7rem; }
  .jar-icon.sm { width: 2.05rem; }
  .jar-name { text-align: center; letter-spacing: .05em; text-transform: none; font-size: 1rem; }

  /* Admin */
  .admin-head { margin-bottom: 2.75rem; }
  .toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 2rem 0 1.5rem;
  }
  .toolbar .spacer { display: block; flex: 1; }
  .tally { grid-column: auto; text-align: left; }
  .toolbar .btn-ghost { padding: .6rem 1.1rem; }
  .actuals-row {
    grid-template-columns: repeat(3, 1fr) auto;
    gap: 1.1rem;
    align-items: end;
  }
  .actuals-row .btn {
    grid-column: auto;
    margin-top: 0;
    width: auto;
    height: calc(1.2rem * 1.6 + 1.4rem + 2px);
    min-height: 0;
    padding: 0 1.25rem;
  }
  .actuals-row input { padding-left: .75rem; padding-right: .75rem; }
  .podiums { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.35rem; }
  .podium { padding: 1.6rem 1.35rem; }
  .places li { grid-template-columns: 2.1rem 1fr auto; gap: .9rem; padding: .7rem .85rem; }
  .scroll-hint { display: none; }
}

/* ============================================================
   Hover states — mouse/trackpad only.
   On a touchscreen :hover sticks after a tap, which looks broken.
   ============================================================ */

@media (hover: hover) and (pointer: fine) {
  input:hover { border-color: rgba(212,175,55,.5); }
  .btn:hover { filter: brightness(1.08); box-shadow: 0 0 28px rgba(255,215,0,.28); }
  .btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright); background: rgba(212,175,55,.07); }
  tbody tr:hover td { background: rgba(212,175,55,.045); }
  .x:hover {
    color: var(--danger);
    border-color: rgba(232,138,125,.55);
    background: rgba(232,138,125,.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}