:root {
  --felt: #126b69; --felt-edge: #083d3e; --plate: rgba(0, 0, 0, .3);
  --cream: #fcf7eb; --mat: #f6efe1; --edge: #c7b89e; --ink: #30261f;
  --gold: #ffc233; --gold-ink: #573808; --danger: #c8442f;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
[tabindex="-1"]:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body {
  margin: 0; min-height: 100vh; color: #fff;
  font: 16px/1.45 ui-rounded, -apple-system, "SF Pro Rounded", system-ui, sans-serif;
  background: radial-gradient(ellipse at 50% 20%, var(--felt), var(--felt-edge) 90%) fixed;
  padding: 16px max(16px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
body.in-app .intro { display: none; }
.intro h1 { margin: 8px 0 4px; font-size: 26px; }
.intro p, .quiet { color: rgba(255, 255, 255, .85); margin: 0 0 12px; }
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin: 8px 0 14px; }
.sort { display: flex; background: var(--plate); border-radius: 999px; padding: 3px; }
.bar-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; margin-left: auto; }
.rules-link { border: 0; background: none; color: rgba(255, 255, 255, .85); font: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; padding: 8px 2px; min-height: 40px; cursor: pointer; }
.sort button { border: 0; background: none; color: #fff; padding: 6px 14px; border-radius: 999px; font: inherit; font-weight: 700; }
.sort button.on { background: var(--gold); color: var(--gold-ink); }
.btn { display: inline-block; border: 0; border-radius: 12px; padding: 9px 14px; font: inherit; font-weight: 800; text-align: center; text-decoration: none; cursor: pointer; }
.btn.gold { background: var(--gold); color: var(--gold-ink); }
.btn.cream { background: var(--cream); color: var(--ink); box-shadow: 0 2px 0 var(--edge); }
.btn.btn-quiet { background: none; color: inherit; font-weight: 700; padding: 6px 8px; }
.card {
  background: var(--cream); color: var(--ink); border-radius: 16px; padding: 14px 16px; margin: 0 0 12px;
  box-shadow: 0 2px 0 var(--edge), 0 6px 14px rgba(0, 0, 0, .18); border: 2px solid #fff;
}
.card.pinned { border-color: var(--gold); }
.card.hidden { opacity: .75; border-style: dashed; }
.card h2 { font-size: 18px; margin: 0 0 4px; overflow-wrap: anywhere; }
.card a.title { color: inherit; text-decoration: none; }
.meta { font-size: 13px; color: rgba(48, 38, 31, .7); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; overflow-wrap: anywhere; }
.badge { margin-left: 6px; background: var(--gold); color: var(--gold-ink); border-radius: 999px; padding: 1px 8px; font-weight: 800; font-size: 12px; }
.body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0; }
.actions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 6px; }
.vote { border: 0; background: var(--mat); border-radius: 10px; padding: 4px 10px; font: inherit; font-weight: 800; color: var(--ink); }
.actions .vote, .actions .btn { min-height: 40px; }   /* a thumb, not a cursor */
.vote.on { background: var(--gold); color: var(--gold-ink); }
.comments { margin: 8px 0 0 10px; }
.comment { background: var(--mat); border: 2px solid transparent; border-radius: 12px; padding: 10px 12px; margin: 8px 0; color: var(--ink); }
.comment.hidden { opacity: .75; border: 2px dashed var(--edge); }
.compose textarea, .compose input {
  width: 100%; border: 2px solid var(--edge); border-radius: 10px; padding: 8px 10px; font: inherit; color: var(--ink); background: #fff;
}
.compose textarea { min-height: 96px; resize: vertical; }
.compose .row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 8px; }
.count { font-size: 12px; color: rgba(48, 38, 31, .6); }
.error { color: var(--danger); font-weight: 700; font-size: 14px; }
.toast { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); background: rgba(0, 0, 0, .78); color: #fff; padding: 10px 14px; border-radius: 12px; text-align: center; }
.foot { margin-top: 28px; font-size: 14px; color: rgba(255, 255, 255, .85); }
.foot a { color: var(--gold); }
.more { display: block; margin: 4px auto 0; }
.back { color: #fff; text-decoration: none; font-weight: 700; display: inline-block; margin: 0 0 10px; }
.btn:disabled, .vote:disabled { opacity: .55; cursor: default; }
.compose input { margin-bottom: 8px; }
.foot details { margin-top: 4px; }
.foot summary { cursor: pointer; font-weight: 700; }
.foot details p { margin: 6px 0 0 4px; }
dialog.ask { border: 2px solid #fff; border-radius: 16px; padding: 0; max-width: min(360px, calc(100vw - 32px)); background: var(--cream); color: var(--ink); box-shadow: 0 2px 0 var(--edge), 0 10px 28px rgba(0, 0, 0, .35); }
dialog.ask::backdrop { background: rgba(0, 0, 0, .55); }
.ask-panel { padding: 16px; }
dialog.ask p { margin: 0 0 12px; font-weight: 700; }
.ask-options { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.ask-options .btn-quiet { color: var(--ink); }
/* a choice reads as a button on the cream panel: a darker fill and an edge */
.ask-options .btn.cream { background: var(--mat); border: 2px solid var(--edge); box-shadow: none; }
.ask-options .btn:disabled { opacity: .55; }
[aria-busy="true"] { cursor: progress; }
.btn:focus-visible, .vote:focus-visible, .rules-link:focus-visible, .foot summary:focus-visible, textarea:focus-visible, input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }