/* Livelier palette: a sun-yellow base, distinct coloured blocks with intent, bright accents for buttons and
   active states. Structure stays neobrutalist: thick black outlines and hard offset shadows.
   Fonts: Bricolage Grotesque for headings, Inter for body. Loaded after theme.css, so it re-skins the
   same class names without changing layout or behaviour. */
:root {
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --bg: #ffd23f;
  --card: #ffffff;
  --card-2: #ffffff;
  --line: #121212;
  --line-strong: #121212;
  --rule: rgba(18, 18, 18, 0.2);
  --ink: #121212;
  --ink-soft: #1f1f1f;
  --muted: #3a3a3a;
  --accent: #ff5fa2;
  --accent-deep: #ff7bb5;
  --accent-ink: #121212;
  --accent-soft: #ffe69a;
  --accent-glow: transparent;
  --ok: #0f5c2e;
  --ok-bg: #5ee38a;
  --bad: #6b0f08;
  --bad-bg: #ff8a7a;
  --shadow: 4px 4px 0 #121212;
  --shadow-sm: 3px 3px 0 #121212;
}
html, body { background: var(--bg); }
.top { background: var(--bg); border-bottom: 3px solid #121212; }
.meta { color: #121212; }
.meta .count { background: #ffffff; color: #121212; }

/* Blocks: each section has its own colour. The clue card stays white so the puzzle is the focus. */
.card.clue-card { background: #ffffff; }
.card.hooks { background: #a8dcff; }
.card.solution { background: #c9f7d4; }
.card.forum { background: #d7c5ff; }
.card.propose { background: #ffe69a; }
.card.how { background: #ffffff; }
.modal-card { background: #ffc9a8; }
.post { background: #ffffff; }
.post.mine { background: #fff4cc; }
.row-card { background: #ffffff; }
.proposal { background: #ffffff; }

/* Buttons: bright pink primary with black text; white secondary with black outline. */
.btn.primary { background: #ff5fa2; color: #121212; border-color: #121212; }
.btn.primary:hover:not(:disabled) { background: #ff7bb5; border-color: #121212; }
.btn.ghost { background: #ffffff; color: #121212; border-color: #121212; }
.btn.ghost:hover:not(:disabled) { background: #ffe69a; }

/* Active states: pink mode segment, yellow focused tile, green correct, coral wrong. */
.mode { background: #ffffff; }
.mode-btn[aria-pressed="true"] { background: #ff5fa2; color: #121212; }
.box:focus { background: #ffd23f; }
.box.ok { background: var(--ok-bg); color: #0f5c2e; border-color: #121212; }
.box.bad { background: var(--bad-bg); color: #6b0f08; border-color: #121212; }
.chip.revealed { background: #ffd23f; }
.tray { background: #ffe69a; border-color: #121212; }
.tile:hover:not(:disabled) { background: #ffe69a; }
.tile.used { opacity: 0.35; }
.kind-chip { background: #ffffff; }
.kind-chip.full { background: #ff5fa2; color: #121212; }
.eyebrow::before { background: #ff5fa2; border-color: #121212; }
.modal-backdrop { background: rgba(18, 18, 18, 0.4); }
.field input, .field select, .field textarea { background: #ffffff; }
.reply-box { background: #ffe69a; }
.edit-area { background: #ffffff; }

/* Typography: Bricolage Grotesque headings, Inter body text. */
.clue, .wordmark, .modal-title, .admin-wrap h1, .parts .answer-word {
  font-family: var(--serif);
}
.clue { font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; }
.wordmark { font-weight: 700; letter-spacing: -0.02em; }
.modal-title { font-weight: 700; letter-spacing: -0.02em; }
.admin-wrap h1 { font-weight: 700; letter-spacing: -0.02em; }
.parts .answer-word { font-weight: 700; }

/* Share block: shown only after a solve. */
.share-block { margin-top: 16px; display: grid; gap: 12px; }
.share-block[hidden] { display: none; }
.share-preview {
  margin: 0;
  padding: 14px 16px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: #121212;
  background: #ffffff;
  border: 3px solid #121212;
  border-radius: 14px;
  box-shadow: 4px 4px 0 #121212;
}
.share-preview[hidden] { display: none; }
.share-block .btn.wide { width: 100%; }
#shareMsg { margin: 0; font-weight: 700; }

/* Scribble Space: clue words to try as the fodder. */
.words { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 14px; }
.words[hidden] { display: none; }
.word-chip {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  color: #121212;
  background: #ffffff;
  border: 2.5px solid #121212;
  border-radius: 999px;
  padding: 8px 14px;
  min-height: 40px;
  box-shadow: 3px 3px 0 #121212;
  cursor: pointer;
}
.word-chip:hover:not(:disabled) { background: #ffe69a; }
.word-chip:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #121212; }
.word-chip:disabled { opacity: 0.45; box-shadow: none; }
.word-chip:focus-visible { outline: 3px solid #121212; outline-offset: 2px; }

/* Scribble Space: a tile used in a box hides its letter, so the strip never shows ghost letters. */
.tile.used { visibility: hidden; opacity: 1; }

/* Word-length warning, shown directly under the clue word buttons. */
.word-warn { margin: -4px 0 12px; text-align: center; font-size: 14px; font-weight: 700; color: var(--bad); min-height: 1.2em; }
.word-warn[hidden] { display: none; }

/* Scratch pad: loose tiles on a free area, with a row band at the top for five-letter words. */
.tray { position: relative; display: block; padding: 0; min-height: 240px; overflow: hidden; touch-action: none; }
.tray .tile { position: absolute; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; transition: box-shadow 0.12s ease; }
.tray .tile.dragging { cursor: grabbing; box-shadow: 6px 6px 0 #121212; z-index: 5; }
.tray .tile.in-row { background: #ffe69a; }
.tray .tile.used { visibility: visible; opacity: 1; }
.row-band { position: absolute; left: 8px; right: 8px; top: 8px; height: 64px; border: 2.5px dashed #121212; border-radius: 14px; background: rgba(255, 255, 255, 0.7); pointer-events: none; }
.word-chip { cursor: default; }

/* Header brand: a sticker-style wordmark, no link underline, no link blue, visible focus. */
a.brand, a.brand:visited, a.brand:hover { color: #121212; text-decoration: none; }
.brand { gap: 12px; }
.brand .mark { width: 40px; height: 40px; border: 3px solid #121212; border-radius: 12px; box-shadow: 3px 3px 0 #121212; background: #ffd23f; }
.wordmark {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #121212;
  background: #ff5fa2;
  border: 3px solid #121212;
  border-radius: 12px;
  padding: 4px 12px 6px;
  box-shadow: 4px 4px 0 #121212;
  transform: rotate(-2deg);
}
a.brand:hover .wordmark { transform: rotate(0deg); }
a.brand:focus-visible { outline: 3px solid #121212; outline-offset: 4px; border-radius: 12px; }
a.brand:focus:not(:focus-visible) { outline: none; }
@media (max-width: 360px) { .wordmark { font-size: 26px; } }