/* RexCon — shared styles */

:root {
  --ink: #12294a;
  --ink-soft: #3c567d;
  --navy: #16305a;
  --orange: #ee6a21;
  --orange-dark: #c9530f;
  --gold: #c7972f;
  --parchment: #f6f1e6;
  --paper: #fffdf8;
  --meeple: #7b4fa6;
  --dice: #9cc0dc;
  --line: rgba(18, 41, 74, 0.16);

  --shell: min(1080px, 92vw);
  --radius: 14px;

  --display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --body: "Atkinson Hyperlegible", system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 0.4em;
}

h1 { font-size: clamp(2.6rem, 12vw, 5rem); }
h2 { font-size: clamp(1.7rem, 6vw, 2.6rem); }
h3 { font-size: 1.15rem; letter-spacing: -0.01em; }

p { margin: 0 0 1em; max-width: 62ch; }

a { color: var(--orange-dark); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--meeple);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell { width: var(--shell); margin-inline: auto; }

section { padding: clamp(2.5rem, 8vw, 4.5rem) 0; }
section + section { border-top: 2px solid var(--line); }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--navy);
  color: var(--paper);
  border-bottom: 3px solid var(--gold);
}
.topbar .shell {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 56px;
}
.topbar img { width: 34px; height: 34px; border-radius: 50%; background: var(--paper); }
.topbar b { font-family: var(--display); font-size: 1.15rem; letter-spacing: -0.02em; }
.topbar nav { margin-left: auto; display: flex; gap: clamp(0.7rem, 3vw, 1.4rem); font-size: 0.92rem; }
.topbar nav a { color: var(--paper); text-decoration: none; border-bottom: 2px solid transparent; padding-block: 2px; }
.topbar nav a:hover, .topbar nav a:focus-visible { border-bottom-color: var(--orange); color: var(--paper); }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(circle at 22% 18%, rgba(238, 106, 33, 0.22), transparent 45%),
    linear-gradient(var(--navy), #0e2244);
  color: var(--paper);
  padding-block: clamp(2rem, 7vw, 3.5rem);
  border-bottom: 3px solid var(--gold);
}
.hero::after {
  content: "";
  display: block;
  height: 10px;
  margin-top: clamp(1.5rem, 5vw, 2.5rem);
  background: repeating-linear-gradient(90deg, var(--orange) 0 22px, var(--gold) 22px 44px);
  border-radius: 99px;
  opacity: 0.85;
}
.hero-grid { display: grid; gap: clamp(1.2rem, 5vw, 2.5rem); align-items: center; }
@media (min-width: 780px) { .hero-grid { grid-template-columns: 0.85fr 1.15fr; } }
.hero img.logo { width: min(300px, 70%); display: block; margin-inline: auto; }
.hero h1 { color: var(--paper); }
.hero h1 span { color: var(--gold); }
.hero p.lede { font-size: clamp(1.05rem, 3.4vw, 1.3rem); color: #dfe7f3; }

.facts { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.facts li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.6rem; align-items: baseline; color: #e9eef7; }
.facts b { font-family: var(--display); }

.btn {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  padding: 0.8rem 1.5rem;
  border: 3px solid #0e2244;
  border-radius: 99px;
  box-shadow: 4px 4px 0 #0e2244;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover, .btn:focus-visible { background: var(--orange-dark); color: #fff; transform: translate(1px, 1px); box-shadow: 3px 3px 0 #0e2244; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }

/* ---------- Capacity meter ---------- */
.meter { margin-top: 1.6rem; }
.meter-track {
  height: 26px;
  border: 3px solid var(--paper);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  width: 0%;
  background: repeating-linear-gradient(135deg, var(--orange) 0 12px, var(--gold) 12px 24px);
  transition: width 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.meter-label { font-family: var(--display); font-size: 1rem; margin-top: 0.5rem; color: #e9eef7; }

/* ---------- Cards / panels ---------- */
.panel {
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 rgba(18, 41, 74, 0.14);
  padding: clamp(1.1rem, 4vw, 1.8rem);
}

.two-col { display: grid; gap: clamp(1.4rem, 5vw, 2.5rem); }
@media (min-width: 820px) { .two-col { grid-template-columns: 1fr 1fr; align-items: start; } }

/* ---------- Forms ---------- */
label { display: block; font-family: var(--display); font-weight: 700; font-size: 0.98rem; margin-bottom: 0.3rem; }
.hint { font-size: 0.86rem; color: var(--ink-soft); margin: 0.25rem 0 0; }
input[type="text"], input[type="email"], input[type="number"], select, textarea, input[type="file"] {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 0.65rem 0.75rem;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}
textarea { min-height: 84px; resize: vertical; }
.field { margin-bottom: 1rem; }
.field-row { display: grid; gap: 1rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

.notice { border-radius: 10px; padding: 0.75rem 0.9rem; margin-bottom: 1rem; border: 2px solid; font-size: 0.95rem; }
.notice.ok { background: #eaf6ec; border-color: #2f7a44; color: #1d5730; }
.notice.error { background: #fdeee8; border-color: var(--orange-dark); color: #8f3a08; }
.notice[hidden] { display: none; }

/* ---------- Busy chart ---------- */
.chart {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
  gap: clamp(2px, 1vw, 8px);
  height: 220px;
  padding: 0.5rem 0 0;
  border-bottom: 3px solid var(--ink);
}
.bar { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.bar span.fill {
  display: block;
  min-height: 4px;
  border: 2px solid var(--ink);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: var(--dice);
  background-image: repeating-linear-gradient(to top, rgba(18, 41, 74, 0.22) 0 1px, transparent 1px 14px);
  transition: height 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bar.peak span.fill { background: var(--orange); }
.bar.mine span.fill { background: var(--meeple); }
.bar.mine::after {
  content: "";
  position: absolute;
  inset: 0 -2px 0 -2px;
  border: 2px dashed var(--meeple);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  pointer-events: none;
}
.bar b {
  position: absolute;
  top: -1.35rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--display);
  font-size: 0.75rem;
  color: var(--ink-soft);
}
.chart-hours {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: clamp(2px, 1vw, 8px);
  margin-top: 0.5rem;
  font-size: 0.72rem;
  text-align: center;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.chart-key { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1rem; font-size: 0.85rem; color: var(--ink-soft); }
.chart-key i { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--ink); border-radius: 4px; vertical-align: -2px; margin-right: 0.35rem; }

/* ---------- Who's coming ---------- */
.roster { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.roster li {
  background: var(--parchment);
  border: 2px solid var(--line);
  border-radius: 99px;
  padding: 0.25rem 0.7rem;
  font-size: 0.88rem;
}
.roster li em { font-style: normal; color: var(--ink-soft); }

/* ---------- Photos ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; }
.gallery figure { margin: 0; }
.gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: var(--parchment);
  display: block;
}
.gallery figcaption { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.3rem; }

.qr-card { text-align: center; }
.qr-card img { width: min(220px, 60%); border: 3px solid var(--ink); border-radius: 12px; background: #fff; padding: 8px; }

.empty { border: 3px dashed var(--line); border-radius: var(--radius); padding: 1.5rem; text-align: center; color: var(--ink-soft); }

/* ---------- Carousel ---------- */
.carousel { position: relative; }
.carousel-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.6rem;
  scrollbar-width: thin;
}
.carousel-track figure {
  margin: 0;
  flex: 0 0 min(520px, 84%);
  scroll-snap-align: center;
}
.carousel-track img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 3px solid var(--ink);
  border-radius: 12px;
  display: block;
}
.carousel-controls { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 0.6rem; }
.carousel-controls button {
  font: inherit;
  font-family: var(--display);
  font-weight: 700;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 99px;
  width: 44px;
  height: 44px;
  cursor: pointer;
}
.carousel-controls button:hover { background: var(--gold); }

/* ---------- Footer ---------- */
footer {
  background: var(--navy);
  color: #dfe7f3;
  padding: 2.5rem 0;
  border-top: 3px solid var(--gold);
  font-size: 0.92rem;
}
footer a { color: var(--gold); }
footer h3 { color: var(--paper); }
.footer-grid { display: grid; gap: 1.6rem; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Hero logo card ---------- */
.logo-card {
  background: #fff;
  border: 3px solid var(--gold);
  border-radius: 18px;
  padding: 0.9rem;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.28);
  transform: rotate(-2deg);
  width: fit-content;
  margin-inline: auto;
}
.hero .logo-card img.logo { width: min(280px, 62vw); margin: 0; }

/* Keep the busy chart readable on a phone */
@media (max-width: 620px) {
  .chart { height: 180px; }
  .bar b { display: none; }
  .bar.peak b { display: block; }
}

/* ---------- Your own booking ---------- */
#bookedBar {
  border-bottom: 2px solid var(--line);
  padding-bottom: 1rem;
  margin-bottom: 1.2rem;
}
.booked-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; margin: 0; }
.linky {
  font: inherit;
  background: none;
  border: none;
  padding: 0;
  color: var(--orange-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.linky:hover { color: var(--ink); }

/* ---------- RexCon XX teaser ---------- */
.teaser { background: var(--navy); color: var(--paper); border-top: 3px solid var(--gold) !important; border-bottom: 3px solid var(--gold); }
.teaser h2 { color: var(--paper); }
.teaser p { color: #dfe7f3; }
.logo-card.xx { transform: rotate(2deg); border-color: var(--orange); }
.logo-card.xx img { width: min(260px, 60vw); display: block; }
@media (max-width: 819px) { .teaser .two-col { grid-template-columns: 1fr; } .logo-card.xx { margin-top: 0.5rem; } }

/* ---------- Merch ---------- */
.merch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.merch-list li { display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.8rem; align-items: start; }
.merch-list span { font-size: 1.7rem; line-height: 1; }
.merch-list b { font-family: var(--display); }

/* ---------- Bring and buy ---------- */
.bb-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.bb-card { display: grid; grid-template-columns: minmax(0, 190px) 1fr; gap: 1.2rem; align-items: start; }
.bb-body { min-width: 0; }
.bb-card.is-sold { opacity: 0.72; }
.bb-card img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border: 2px solid var(--ink); border-radius: 10px; background: #fff; display: block;
}
.bb-card > .bb-shot, .bb-card > .bb-noimg { grid-column: 1; }
.bb-noimg {
  width: 100%; aspect-ratio: 4 / 3; display: grid; place-items: center; font-size: 2.6rem;
  border: 2px dashed var(--line); border-radius: 10px; background: var(--parchment);
}
.bb-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.bb-title { font-family: var(--display); font-weight: 800; line-height: 1.15; }
.bb-price { font-family: var(--display); font-weight: 800; color: var(--orange-dark); white-space: nowrap; }
.bb-card.is-sold .bb-price { color: var(--ink-soft); }
.bb-seller { font-size: 0.86rem; color: var(--ink-soft); margin: 0.15rem 0 0; }
.bb-notes { font-size: 0.9rem; margin: 0.5rem 0 0; }
.bb-nobody { margin-top: 0.6rem; }
.bb-queue { list-style: none; margin: 0.7rem 0 0; padding: 0; font-size: 0.9rem; display: grid; gap: 0.2rem; }
.bb-queue li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.4rem; align-items: baseline; }
.bb-queue b { font-family: var(--display); color: var(--ink-soft); }
.bb-queue li.me { font-weight: 700; }
.bb-queue li.me b { color: var(--meeple); }
.bb-actions { padding-top: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.btn.small { font-size: 0.92rem; padding: 0.45rem 1rem; border-width: 2px; box-shadow: 3px 3px 0 #0e2244; }
.btn.ghost.small { box-shadow: 2px 2px 0 var(--ink); }
.bb-preview { margin-top: 0.6rem; max-height: 170px; border-radius: 10px; border: 2px solid var(--ink); display: block; }

/* Narrow phones: the top bar carries enough links now that it no longer fits on
   one line, so drop the nav onto its own row rather than letting it push the
   page wider than the screen. */
@media (max-width: 620px) {
  .topbar .shell { flex-wrap: wrap; min-height: 0; padding-block: 0.45rem; row-gap: 0.35rem; }
  .topbar nav { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 0.4rem 0.9rem; font-size: 0.85rem; }
}

/* Camera / file chooser pair. The real inputs are hidden and driven by these
   labels, so each one can carry its own `capture` setting. */
.pick { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.4rem; }
.pick-btn { margin-bottom: 0; cursor: pointer; }
.pick-btn:focus-within { outline: 3px solid var(--meeple); outline-offset: 3px; }
/* The generic input[type="file"] rule above sets width:100%, and it out-specifies
   .visually-hidden — which left these "hidden" inputs a full column wide and
   scrolling the page sideways. Scope it tighter so they really do disappear. */
.pick-btn input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; border: 0;
  opacity: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* Scroll reveal. The hidden state is added by script, never by this file, so a
   page with no JS shows everything rather than a column of blank space. The
   reduced-motion block near the top of this file already disables the
   transition, and the script skips staging entirely in that case. */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal, .reveal.in {
  transition: opacity 500ms ease, transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.in { opacity: 1; transform: none; }
.bb-wanted { font-family: var(--display); font-weight: 700; font-size: 0.92rem; color: var(--ink-soft); margin: 0.7rem 0 0.2rem; }

/* Your own entry in the "who is coming" list, with its edit affordance. */
.roster li.mine { border-color: var(--meeple); box-shadow: 0 0 0 2px rgba(123, 79, 166, 0.18); }
.roster-edit {
  font: inherit; font-family: var(--display); font-weight: 700; font-size: 0.78rem;
  margin-left: 0.5rem; padding: 0.05rem 0.6rem; cursor: pointer;
  color: var(--meeple); background: #fff;
  border: 2px solid var(--meeple); border-radius: 99px;
}
.roster-edit:hover { background: var(--meeple); color: #fff; }

/* ---------- Forum ---------- */
.threads { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.threads li {
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 rgba(18, 41, 74, 0.12);
  padding: 0.9rem 1.1rem;
}
.threads a {
  font-family: var(--display); font-weight: 800; font-size: 1.15rem;
  text-decoration: none; display: block;
}
.threads a:hover { text-decoration: underline; }
.thread-meta { display: block; font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.25rem; }

.post { margin-bottom: 1rem; }
.post p { max-width: 70ch; }
.post p:last-child { margin-bottom: 0; }
.post-by { font-family: var(--display); font-weight: 700; margin-bottom: 0.5rem; }
.post-by em { font-style: normal; font-weight: 400; font-size: 0.85rem; color: var(--ink-soft); margin-left: 0.4rem; }

/* ---------- Bring and buy: browsing first ---------- */
.bb-jump { font-family: var(--display); font-weight: 700; margin-bottom: 1.2rem; }
#sell { margin-top: 2.6rem; padding-top: 2rem; border-top: 2px solid var(--line); }

/* The photo is a button now, so strip the button chrome back to the image. */
.bb-shot { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.bb-shot img { transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.bb-shot:hover img { transform: scale(1.02); }

/* Same arrangement on a phone, just a smaller picture so the words keep room. */
@media (max-width: 620px) {
  .bb-card { grid-template-columns: minmax(0, 108px) 1fr; gap: 0.85rem; padding: 0.8rem; }
  .bb-title { font-size: 1rem; }
  .bb-price { font-size: 1rem; }
  .bb-notes, .bb-queue { font-size: 0.85rem; }
  .bb-noimg { font-size: 1.8rem; }
  .bb-actions { gap: 0.4rem; padding-top: 0.7rem; }
  .btn.small { font-size: 0.85rem; padding: 0.4rem 0.85rem; }
}

/* ---------- Photo viewer ---------- */
.lightbox {
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 0.8rem;
  max-width: min(92vw, 900px);
  max-height: 92vh;
  overflow: auto;
}
.lightbox::backdrop { background: rgba(14, 34, 68, 0.78); }
.lightbox img { display: block; width: 100%; height: auto; border-radius: 8px; }
.lightbox p { font-family: var(--display); font-weight: 700; margin: 0.7rem 0 0.2rem; text-align: center; }
.lightbox form { margin: 0; display: flex; justify-content: flex-end; }
.lightbox-close {
  font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer;
  background: none; border: 0; color: var(--ink); padding: 0 0.2rem 0.4rem;
}