/* closest.date — "engraved bronze & candlelight". Ornate dark-fantasy UI
   (Diablo 2 / AoE lineage): gold-trimmed panels, beveled engraved buttons,
   Cinzel display type. No frameworks, no runtime requests off-origin.
   Background art: drop JPGs into /img (bg-home.jpg, bg-game.jpg,
   bg-final.jpg) — the scene layers pick them up, gradients cover absence. */

@font-face {
  font-family: "Cinzel";
  src: url("/fonts/cinzel-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cinzel";
  src: url("/fonts/cinzel-latin-ext.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #0e0d13;
  --panel: #191621;
  --panel-deep: #131017;
  --edge-dark: #050408;
  --edge-gold: #6d5426;
  --edge-gold-lit: #a07c3e;
  --text: #eae4d3;
  --muted: #a89f8c;
  --faint: #6f6858;
  --gold: #d9a95c;
  --gold-bright: #f0c987;
  --gold-soft: #d9a95c33;
  --good: #8ecf8f;
  --bad: #dd7f74;
  --display: "Cinzel", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* corner flourishes for panels (4 rotations of one engraving) */
  --corner-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M25 3 H10 Q3 3 3 10 V25' fill='none' stroke='%23a07c3e' stroke-width='1.6'/%3E%3Cpath d='M25 7 H12 Q7 7 7 12 V25' fill='none' stroke='%23574323' stroke-width='1'/%3E%3Ccircle cx='7' cy='7' r='1.8' fill='%23d9a95c'/%3E%3C/svg%3E");
  --corner-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cg transform='rotate(90 13 13)'%3E%3Cpath d='M25 3 H10 Q3 3 3 10 V25' fill='none' stroke='%23a07c3e' stroke-width='1.6'/%3E%3Cpath d='M25 7 H12 Q7 7 7 12 V25' fill='none' stroke='%23574323' stroke-width='1'/%3E%3Ccircle cx='7' cy='7' r='1.8' fill='%23d9a95c'/%3E%3C/g%3E%3C/svg%3E");
  --corner-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cg transform='rotate(180 13 13)'%3E%3Cpath d='M25 3 H10 Q3 3 3 10 V25' fill='none' stroke='%23a07c3e' stroke-width='1.6'/%3E%3Cpath d='M25 7 H12 Q7 7 7 12 V25' fill='none' stroke='%23574323' stroke-width='1'/%3E%3Ccircle cx='7' cy='7' r='1.8' fill='%23d9a95c'/%3E%3C/g%3E%3C/svg%3E");
  --corner-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cg transform='rotate(270 13 13)'%3E%3Cpath d='M25 3 H10 Q3 3 3 10 V25' fill='none' stroke='%23a07c3e' stroke-width='1.6'/%3E%3Cpath d='M25 7 H12 Q7 7 7 12 V25' fill='none' stroke='%23574323' stroke-width='1'/%3E%3Ccircle cx='7' cy='7' r='1.8' fill='%23d9a95c'/%3E%3C/g%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { font-size: 17px; }
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---- scene backdrops: art drops in, gradients hold the fort ------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  transition: opacity 0.6s;
  background-image:
    radial-gradient(120vmax 90vmax at 50% -25%, rgba(64, 50, 34, 0.55), rgba(14, 13, 19, 0.97) 62%),
    linear-gradient(rgba(14, 13, 19, 0.55), rgba(14, 13, 19, 0.85));
}
body.scene-home::before {
  background-image:
    radial-gradient(120vmax 90vmax at 50% -25%, rgba(64, 50, 34, 0.5), rgba(14, 13, 19, 0.94) 62%),
    linear-gradient(rgba(14, 13, 19, 0.45), rgba(14, 13, 19, 0.82)),
    url("/img/bg-home.jpg");
}
body.scene-game::before {
  background-image:
    radial-gradient(120vmax 90vmax at 50% -25%, rgba(64, 50, 34, 0.45), rgba(14, 13, 19, 0.96) 62%),
    linear-gradient(rgba(14, 13, 19, 0.6), rgba(14, 13, 19, 0.9)),
    url("/img/bg-game.jpg");
}
body.scene-final::before {
  background-image:
    radial-gradient(120vmax 90vmax at 50% -25%, rgba(88, 66, 36, 0.55), rgba(14, 13, 19, 0.94) 62%),
    linear-gradient(rgba(14, 13, 19, 0.45), rgba(14, 13, 19, 0.82)),
    url("/img/bg-final.jpg");
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem clamp(1rem, 4vw, 2rem) 0.8rem;
  border-bottom: 1px solid #2a2418;
  box-shadow: 0 1px 0 rgba(240, 201, 135, 0.06);
}
h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 0 22px rgba(217, 169, 92, 0.35), 0 1px 0 #000;
}
h1 .accent { color: var(--text); }
h2 {
  font-family: var(--display);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0.4rem 0;
  text-shadow: 0 0 18px rgba(217, 169, 92, 0.3);
}
h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.22em;
  margin: 0.3rem 0;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
h3::before, h3::after { content: ""; flex: 1; border-top: 1px solid #3a3222; }

main { max-width: 40rem; margin: 0 auto; padding: clamp(1rem, 4vw, 2rem); }
.screen { display: flex; flex-direction: column; gap: 1rem; }
.hidden { display: none !important; }

.tagline {
  font-family: var(--display);
  font-size: clamp(1.1rem, 3.4vw, 1.4rem);
  color: var(--muted);
  text-align: center;
  margin: clamp(1rem, 6vh, 2.6rem) 0 1rem;
  line-height: 1.65;
  letter-spacing: 0.04em;
}

/* ---- ornate panels ------------------------------------------------------ */
/* painted frame (generated asset) on cards + modals; the drawn-SVG corner
   look below remains the style for the room code plate and the fallback */
.card, .modalbox {
  border: clamp(26px, 6vw, 40px) solid #2a2317;
  border-image: url("/img/ui-frame.jpg") 160 round;
  background: linear-gradient(180deg, #17141e, #100d15 55%, #120f18);
  background-clip: padding-box;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}
.bigcode {
  background:
    var(--corner-tl) top left no-repeat,
    var(--corner-tr) top right no-repeat,
    var(--corner-br) bottom right no-repeat,
    var(--corner-bl) bottom left no-repeat,
    linear-gradient(180deg, #1c1824, #14111a 55%, #16121c);
  border: 1px solid var(--edge-gold);
  border-radius: 4px;
  box-shadow:
    0 0 0 1px var(--edge-dark),
    0 0 0 3px #241d12,
    0 0 0 4px var(--edge-dark),
    0 14px 40px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(240, 201, 135, 0.07);
}
.card {
  padding: clamp(0.6rem, 2vw, 1.1rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.lobbyactions { display: flex; gap: 0.6rem; justify-content: center; }
.field { display: flex; flex-direction: column; gap: 0.3rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.grid2 .field:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 430px) { .grid2 { grid-template-columns: 1fr; } }

label {
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
input, select {
  width: 100%;
  padding: 0.75rem 0.85rem;
  font-size: 1.05rem; /* >=16px: no iOS focus zoom */
  background: linear-gradient(180deg, #0d0b11, #131018);
  color: var(--text);
  border: 1px solid #3b3222;
  border-radius: 3px;
  font-family: inherit;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input::placeholder { color: var(--faint); }
/* native spin buttons clash with the dark UI (#35); typing stays */
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input:focus, select:focus {
  outline: none;
  border-color: var(--edge-gold-lit);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55), 0 0 0 3px var(--gold-soft), 0 0 14px rgba(217, 169, 92, 0.15);
}

/* ---- painted buttons ---------------------------------------------------- */
/* the generated iron/gold faces are drawn by border-image (corners stay
   crisp, edges stretch, center fills); the gradient underneath is the
   fallback if an asset ever 404s */
button {
  min-height: 3rem;
  padding: 0.35rem 1.1rem;
  font-size: 0.95rem;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  background: linear-gradient(180deg, #2c2635, #1c1824 45%, #17131e);
  background-clip: padding-box;
  border: 15px solid transparent;
  border-image: url("/img/ui-button.jpg") 91 fill stretch;
  border-radius: 3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
  cursor: pointer;
  transition: filter 0.15s, transform 0.08s, color 0.15s;
}
button:hover {
  color: var(--gold-bright);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)) brightness(1.15) drop-shadow(0 0 10px rgba(217, 169, 92, 0.35));
}
button:active { transform: translateY(1px); filter: brightness(0.9); }
button.primary {
  background: linear-gradient(180deg, #f2cd8a, #d9a95c 42%, #a87834 88%, #c79a50);
  background-clip: padding-box;
  border-image-source: url("/img/ui-button-gold.jpg");
  color: #2a1d08;
  text-shadow: 0 1px 0 rgba(255, 235, 190, 0.55);
}
button.primary:hover {
  color: #1f1504;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)) brightness(1.08) drop-shadow(0 0 16px rgba(217, 169, 92, 0.55));
}
button.big { min-height: 3.6rem; font-size: 1.05rem; }
button.ghost {
  background: transparent;
  border: 1px solid #3b3527;
  border-image: none;
  filter: none;
  text-shadow: none;
  box-shadow: none;
  min-height: 0;
  padding: 0.35rem 0.7rem;
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: none;
}
button:disabled { opacity: 0.45; cursor: default; transform: none; }

.divider {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--faint);
  font-size: 0.85rem;
}
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid #332c1d; }
.joinrow { display: flex; gap: 0.6rem; }
.joinrow input { text-transform: uppercase; letter-spacing: 3px; text-align: center; font-family: var(--display); }
.joinrow button { flex-shrink: 0; }

/* ---- lobby -------------------------------------------------------------- */
.sharehint { color: var(--muted); text-align: center; margin: 0.2rem 0; }
.bigcode {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.5rem, 11vw, 3.6rem);
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-align: center;
  padding: 1.1rem 0.5rem;
  color: var(--gold);
  text-shadow: 0 0 26px rgba(217, 169, 92, 0.4), 0 2px 2px #000;
  user-select: all;
}
.playerlist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.playerlist li {
  padding: 0.55rem 0.3rem;
  border-bottom: 1px solid #241f14;
  box-shadow: 0 1px 0 rgba(240, 201, 135, 0.04);
  font-size: 1.05rem;
}

/* ---- round -------------------------------------------------------------- */
.roundinfo {
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
}
.target {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.2rem, 9.5vw, 3.6rem);
  line-height: 1.15;
  text-align: center;
  padding: clamp(2.4rem, 10vw, 4rem) clamp(2rem, 9vw, 3.6rem);
  color: var(--gold-bright);
  text-shadow: 0 0 34px rgba(217, 169, 92, 0.45), 0 2px 2px #000;
  /* painted plaque (generated asset); gradient panel as fallback */
  background:
    url("/img/ui-plaque.jpg") center / 100% 100% no-repeat,
    linear-gradient(180deg, #1c1824, #14111a 55%, #16121c);
  border-radius: 4px;
}
.timerbar {
  height: 10px;
  background: linear-gradient(180deg, #0a090d, #16131b);
  border: 1px solid #332c1d;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7);
}
#timerFill {
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, #f0c987, #c08c3e);
  box-shadow: 0 0 12px rgba(217, 169, 92, 0.55);
  transition: width 0.25s linear;
}
#timerFill.low { background: linear-gradient(180deg, #e89184, #b5473a); box-shadow: 0 0 12px rgba(221, 127, 116, 0.6); }

#guessForm { display: flex; gap: 0.6rem; margin-top: 0.4rem; }
#guessForm input { flex: 1; font-size: 1.1rem; }
/* long guesses need the full width on phones (#33) */
@media (max-width: 520px) {
  #guessForm { flex-direction: column; }
  #guessForm button { width: 100%; }
}
.feedback { min-height: 1.6rem; font-size: 1rem; text-align: center; }
.feedback.good { color: var(--good); text-shadow: 0 0 14px rgba(142, 207, 143, 0.35); }
.feedback.bad { color: var(--bad); }
.feedback.pending { color: var(--muted); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.infobtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #3b3527;
  border-radius: 50%;
  width: 1.6rem;
  height: 1.6rem;
  min-height: 0;
  padding: 0;
  line-height: 1;
  font-size: 0.95rem;
  font-family: var(--sans); /* display-font metrics sat the glyph off-center */
  font-weight: 400;
  color: var(--muted);
}
.infobtn:hover { color: var(--gold); border-color: var(--edge-gold-lit); }
.leavebtn { align-self: center; color: var(--muted); font-size: 0.9rem; }
.leavebtn:hover { color: var(--bad); border-color: var(--bad); }

.playerchips { list-style: none; padding: 0; margin: 0.6rem 0 0; display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: center; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  background: linear-gradient(180deg, #1e1a27, #15121b);
  border: 1px solid #3b3527;
  border-radius: 999px;
  font-size: 0.9rem;
  box-shadow: inset 0 1px 0 rgba(240, 201, 135, 0.06);
  cursor: default;
}
button.chip {
  cursor: pointer;
  min-height: 0;
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  border: 1px solid #3b3527;
  border-image: none;
  filter: none;
  text-shadow: none;
}
.playerchips .chip::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--faint); }
.playerchips .haschip::before { background: var(--gold); box-shadow: 0 0 8px rgba(217, 169, 92, 0.6); }
.playerchips .lockedchip { border-color: #3f5a3a; }
.playerchips .lockedchip::before { background: var(--good); box-shadow: 0 0 8px rgba(142, 207, 143, 0.6); }
.playerchips .leftchip { opacity: 0.45; text-decoration: line-through; }

/* ---- reveal ------------------------------------------------------------- */
.datewas { text-align: center; font-size: 1.05rem; color: var(--muted); margin: 0.4rem 0; }
.datewas strong {
  font-family: var(--display);
  color: var(--text);
  font-size: 1.3rem;
  display: block;
  margin-top: 0.2rem;
  letter-spacing: 0.03em;
}
#revealTable { width: 100%; border-collapse: collapse; }
#revealTable td {
  padding: 0.6rem 0.45rem;
  border-bottom: 1px solid #241f14;
  box-shadow: 0 1px 0 rgba(240, 201, 135, 0.04);
  font-size: 0.98rem;
}
#revealTable td:first-child { color: var(--muted); white-space: nowrap; }
#revealTable tr.best td { background: rgba(142, 207, 143, 0.06); }
#revealTable tr.best td:first-child { color: var(--good); font-weight: 600; border-left: 3px solid var(--good); }
#revealTable td.pts { text-align: right; color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.winner {
  color: var(--gold);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  text-align: center;
  margin: 0.6rem 0 0.1rem;
  letter-spacing: 0.06em;
  text-shadow: 0 0 18px rgba(217, 169, 92, 0.35);
}
.scale { color: var(--faint); font-size: 0.85rem; font-style: italic; text-align: center; margin: 0.1rem 0; }

/* ---- final -------------------------------------------------------------- */
#screen-final { position: relative; }
.fx {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 5;
}
.podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.7rem;
  margin: 1rem 0 0.5rem;
  min-height: 11rem;
}
.podium .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  width: min(28vw, 8.5rem);
  animation: rise 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards;
}
.podium .step.second { animation-delay: 0.25s; }
.podium .step.third { animation-delay: 0.45s; }
@keyframes rise {
  from { transform: translateY(2.5rem); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .podium .step { animation: none; } }
.podium .pname {
  font-family: var(--display);
  font-size: 1.05rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.podium .pscore { color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.podium .block {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.4rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.6rem;
  color: #241a08;
  border: 1px solid rgba(0, 0, 0, 0.55);
  border-radius: 4px 4px 0 0;
  box-shadow: inset 0 2px 0 rgba(255, 240, 205, 0.5), inset 0 -10px 18px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.45);
}
/* styled by RANK, not position: a tie puts two golds on the podium (#26) */
.podium .rank1 .block { height: 7rem; background: linear-gradient(180deg, #f2cd8a, #b98432); }
.podium .rank1 .pname { color: var(--gold-bright); font-size: 1.2rem; text-shadow: 0 0 16px rgba(217, 169, 92, 0.5); }
.podium .rank2 .block { height: 5rem; background: linear-gradient(180deg, #d9dde6, #8d93a3); }
.podium .rank3 .block { height: 3.6rem; background: linear-gradient(180deg, #cf9a6b, #96603a); }
.standings { font-size: 1.05rem; line-height: 2; padding-left: 1.6rem; }
.standings li::marker { color: var(--faint); }

/* ---- overlays ----------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(5, 4, 8, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(2px);
  z-index: 10;
}
.modalbox { padding: 1.5rem; max-width: 24rem; display: flex; flex-direction: column; gap: 0.9rem; }
.modalbox h3 { margin: 0; }
.modalbox p { margin: 0; line-height: 1.6; }
.modalrow { display: flex; gap: 0.6rem; }
.modalrow button { flex: 1; }

.toast {
  position: fixed;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #262130, #1a1622);
  border: 1px solid var(--edge-gold);
  padding: 0.7rem 1.3rem;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--edge-dark), 0 8px 24px rgba(0, 0, 0, 0.6);
  max-width: min(92vw, 26rem);
  text-align: center;
  z-index: 20;
}