:root {
  --wl-sand: #EDE6D8;
  --wl-sand-deep: #E2D8C5;
  --wl-ink: #1A1714;
  --wl-ink-soft: #5C544A;
  --wl-accent: #C2426B;
  --wl-accent-dark: #A32F55;
  --wl-line: #D6CBB6;
  --wl-paper: #F7F3EA;

  --wl-display: "WLDisplay", Georgia, serif;
  --wl-heading: "WLHeading", Georgia, serif;
  --wl-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Swap these in once the licensed files are in static/fonts/.
@font-face {
  font-family: "WLHeading";
  src: url("/static/fonts/heading.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "WLDisplay";
  src: url("/static/fonts/display.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
*/

body {
  background: var(--wl-sand);
  color: var(--wl-ink);
  font-family: var(--wl-body);
  font-size: 1.0625rem;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--wl-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--wl-ink);
}

h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.15; }
h2 { font-size: clamp(1.4rem, 3vw, 1.75rem); }

.wl-wordmark {
  font-family: var(--wl-display);
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  color: var(--wl-ink);
  text-decoration: none;
}
.wl-wordmark:hover { color: var(--wl-accent); }

/* Cards: paper on sand, thin line, no heavy shadow. */
.card, .list-group-item {
  background: var(--wl-paper);
  border: 1px solid var(--wl-line);
  border-radius: 10px;
}
.card { box-shadow: 0 1px 2px rgba(26,23,20,.04); }
.card-body { padding: 1.5rem; }

/* Navigation */
.navbar {
  background: transparent !important;
  border-bottom: 1px solid var(--wl-line);
  padding-block: 1rem;
}

/* Buttons */
.btn-primary {
  --bs-btn-bg: var(--wl-accent);
  --bs-btn-border-color: var(--wl-accent);
  --bs-btn-hover-bg: var(--wl-accent-dark);
  --bs-btn-hover-border-color: var(--wl-accent-dark);
  --bs-btn-active-bg: var(--wl-accent-dark);
  --bs-btn-active-border-color: var(--wl-accent-dark);
  font-weight: 500;
}
.btn-outline-secondary {
  --bs-btn-color: var(--wl-ink-soft);
  --bs-btn-border-color: var(--wl-line);
  --bs-btn-hover-bg: var(--wl-sand-deep);
  --bs-btn-hover-border-color: var(--wl-line);
  --bs-btn-hover-color: var(--wl-ink);
}
.btn-link { color: var(--wl-ink-soft); text-decoration: none; }
.btn-link:hover { color: var(--wl-accent); }

a { color: var(--wl-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--wl-accent-dark); }

.text-muted { color: var(--wl-ink-soft) !important; }

/* Forms */
.form-control, .form-select {
  background: var(--wl-paper);
  border: 1px solid var(--wl-line);
  border-radius: 8px;
  padding: .55rem .75rem;
}
.form-control:focus, .form-select:focus {
  background: #fff;
  border-color: var(--wl-accent);
  box-shadow: 0 0 0 3px rgba(194,66,107,.12);
}

/* Story text: reading matters more here than anywhere else. */
.wl-story {
  font-family: var(--wl-body);
  font-size: 1.125rem;
  line-height: 1.75;
  max-width: 38rem;
  white-space: pre-wrap;
}

/* Images are allowed to be the loudest thing on the page. */
.wl-collage { border-radius: 8px; object-fit: cover; width: 100%; }
.wl-collage-wide { aspect-ratio: 3/2; }
.wl-collage-poster { aspect-ratio: 2/3; }

footer { border-top: 1px solid var(--wl-line) !important; }

main.container { max-width: 62rem; }


.wl-countdown { color: var(--wl-countdown, var(--wl-ink-soft)); font-variant-numeric: tabular-nums; }
.wl-countdown.text-warning { color: var(--wl-countdown-soon, #B06A1F) !important; }
.wl-countdown.text-danger  { color: var(--wl-countdown-urgent, var(--wl-accent)) !important; }


/* Prompt picker */
.wl-pick-input { position: absolute; opacity: 0; pointer-events: none; }

.wl-pick {
  display: block;
  cursor: pointer;
  border: 2px solid var(--wl-line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--wl-paper);
  transition: border-color .12s ease, transform .12s ease;
  height: 100%;
}
.wl-pick:hover { border-color: var(--wl-ink-soft); transform: translateY(-2px); }

.wl-pick-input:checked + .wl-pick {
  border-color: var(--wl-accent);
  box-shadow: 0 0 0 3px rgba(194,66,107,.15);
}
.wl-pick-input:focus-visible + .wl-pick {
  outline: 2px solid var(--wl-accent);
  outline-offset: 2px;
}

.wl-pick .wl-collage { display: block; border-radius: 0; }
.wl-pick-blank {
  aspect-ratio: 3/2;
  background: var(--wl-sand-deep);
}
.wl-pick-text {
  display: block;
  padding: .6rem .75rem;
  font-weight: 500;
  font-size: .95rem;
  line-height: 1.3;
}
.wl-pick-input:checked + .wl-pick .wl-pick-text { color: var(--wl-accent-dark); }

/* The issued prompt, shown after selection */
.wl-prompt-card { max-width: 18rem; }

.wl-story .wl-center { text-align: center; margin: 1rem 0; }


/* Snag and standout inputs: let people drag them bigger. */
.wl-grow {
  resize: both;
  max-width: 100%;
  min-height: 2.4rem;
  overflow-y: auto;
}


/* 1-10 scale as a row of buttons */
.wl-scale-row ul,
.wl-scale-row > div {
  list-style: none;
  display: flex;
  gap: .25rem;
  padding: 0;
  margin: .25rem 0 0;
  flex-wrap: wrap;
}
.wl-scale-row li,
.wl-scale-row > div > div { margin: 0; }
.wl-scale-row input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.wl-scale-row label {
  display: block;
  min-width: 2.1rem;
  padding: .3rem 0;
  text-align: center;
  border: 1px solid var(--wl-line);
  border-radius: 6px;
  background: var(--wl-paper);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  font-size: .9rem;
  transition: background .1s ease, border-color .1s ease;
}
.wl-scale-row label:hover { border-color: var(--wl-ink-soft); }
.wl-scale-row label:has(> input[type="radio"]:checked),
.wl-scale-row input[type="radio"]:checked + label {
  background: var(--wl-accent);
  border-color: var(--wl-accent);
  color: #fff;
  font-weight: 600;
}
@media (max-width: 480px) {
  .wl-scale-row label { min-width: 1.8rem; font-size: .85rem; }
}


/* Playoff bracket */
.wl-bracket {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  margin-top: 1.5rem;
}
.wl-bracket-col { min-width: 15rem; flex: 0 0 auto; }
.wl-bracket-head {
  font-weight: 600;
  font-size: .85rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--wl-line);
  margin-bottom: .75rem;
}

.wl-duel {
  border: 1px solid var(--wl-line);
  border-radius: 8px;
  background: var(--wl-paper);
  margin-bottom: .6rem;
  overflow: hidden;
  font-size: .85rem;
}
.wl-duel-live { border-color: var(--wl-accent); }

.wl-duel-side {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .55rem;
}
.wl-duel-side + .wl-duel-side { border-top: 1px solid var(--wl-line); }

.wl-seed {
  min-width: 1.4rem;
  text-align: center;
  font-size: .7rem;
  color: var(--wl-ink-soft);
  font-variant-numeric: tabular-nums;
}
.wl-duel-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wl-duel-score {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--wl-ink-soft);
}

.wl-duel-win { background: rgba(194,66,107,.08); font-weight: 600; }
.wl-duel-win .wl-duel-score { color: var(--wl-accent-dark); }
.wl-duel-loss { color: var(--wl-ink-soft); }

.wl-duel-status {
  padding: .25rem .55rem;
  font-size: .7rem;
  color: var(--wl-accent);
  border-top: 1px solid var(--wl-line);
}


/* Comments */
.wl-comment {
  background: var(--wl-paper);
  border: 1px solid var(--wl-line);
  border-radius: 8px;
  padding: .75rem .9rem;
  margin-bottom: .75rem;
}
.wl-reply {
  background: var(--wl-sand);
  margin: .75rem 0 0 1.25rem;
}
.wl-comment p:last-child { margin-bottom: 0; }
.wl-comment-actions { margin-top: .35rem; }


.wl-story-link {
  color: var(--wl-ink);
  text-decoration: underline;
  text-decoration-color: var(--wl-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.wl-story-link:hover {
  color: var(--wl-accent-dark);
  text-decoration-color: var(--wl-accent);
}


/* Menu */
.wl-menu { position: relative; }
.wl-menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 31px;
  padding: 0 .6rem;
}
.wl-menu > summary::-webkit-details-marker { display: none; }

.wl-menu-bars,
.wl-menu-bars::before,
.wl-menu-bars::after {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--wl-ink-soft);
  border-radius: 2px;
  content: "";
}
.wl-menu-bars { position: relative; }
.wl-menu-bars::before { position: absolute; top: -5px; }
.wl-menu-bars::after { position: absolute; top: 5px; }

.wl-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + .4rem);
  min-width: 13rem;
  background: var(--wl-paper);
  border: 1px solid var(--wl-line);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(26,23,20,.10);
  padding: .4rem;
  z-index: 200;
}
.wl-menu-panel a,
.wl-menu-panel button {
  display: block;
  width: 100%;
  text-align: left;
  padding: .45rem .6rem;
  border: 0;
  background: none;
  border-radius: 6px;
  color: var(--wl-ink);
  text-decoration: none;
  font-size: .9rem;
}
.wl-menu-panel a:hover,
.wl-menu-panel button:hover {
  background: var(--wl-sand-deep);
  color: var(--wl-accent-dark);
}
.wl-menu-sep {
  height: 1px;
  background: var(--wl-line);
  margin: .35rem .3rem;
}


/* Long-form pages: policies, rules, about */
.wl-prose { max-width: 42rem; }
.wl-prose h1, .wl-prose h2, .wl-prose h3, .wl-prose h4 { margin-top: 2rem; margin-bottom: .6rem; }
.wl-prose h2 { font-size: 1.35rem; }
.wl-prose h3 { font-size: 1.1rem; }
.wl-prose p, .wl-prose li { line-height: 1.7; }
.wl-prose ul, .wl-prose ol { padding-left: 1.4rem; margin-bottom: 1rem; }
.wl-prose li { margin-bottom: .35rem; }
.wl-prose table { width: 100%; margin: 1rem 0; border-collapse: collapse; }
.wl-prose th, .wl-prose td {
  border: 1px solid var(--wl-line);
  padding: .5rem .6rem;
  text-align: left;
  vertical-align: top;
}
.wl-prose [style] { color: inherit !important; background: none !important; font-family: inherit !important; }


/* Story editor */
#wl-editor-wrap { background: var(--wl-paper); border-radius: 8px; }
#wl-toolbar.ql-toolbar.ql-snow {
  border: 1px solid var(--wl-line);
  border-radius: 8px 8px 0 0;
  background: var(--wl-sand-deep);
}
#wl-editor.ql-container.ql-snow {
  border: 1px solid var(--wl-line);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  font-family: var(--wl-body);
  font-size: 1.05rem;
  min-height: 24rem;
}
#wl-editor .ql-editor { line-height: 1.7; padding: 1rem 1.1rem; }
#wl-editor .ql-editor p { margin-bottom: .6rem; }
.ql-snow .ql-stroke { stroke: var(--wl-ink-soft); }
.ql-snow .ql-fill { fill: var(--wl-ink-soft); }
.ql-snow .ql-active .ql-stroke { stroke: var(--wl-accent) !important; }
.ql-snow .ql-active .ql-fill { fill: var(--wl-accent) !important; }

/* Stories as rendered */
.wl-story p { margin-bottom: .6rem; }
.wl-story blockquote {
  border-left: 3px solid var(--wl-line);
  margin: 1rem 0;
  padding-left: 1rem;
}
.wl-story .ql-align-center { text-align: center; }
.wl-story .ql-align-right { text-align: right; }
.wl-story .ql-align-justify { text-align: justify; }
.wl-story .ql-indent-1 { padding-left: 3em; }
.wl-story .ql-indent-2 { padding-left: 6em; }
.wl-story .ql-indent-3 { padding-left: 9em; }
.wl-story .ql-indent-4 { padding-left: 12em; }
.wl-story .ql-indent-5 { padding-left: 15em; }
.wl-story .ql-indent-6 { padding-left: 18em; }
.wl-story .ql-indent-7 { padding-left: 21em; }
.wl-story .ql-indent-8 { padding-left: 24em; }
.wl-story ul, .wl-story ol { padding-left: 1.6rem; margin-bottom: .6rem; }


/* Page headers */
.wl-header {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: .5rem;
  background: var(--wl-sand-deep);
}
.wl-header img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 1;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 640px) {
  .wl-header img { aspect-ratio: auto; height: 140px; }
}