:root {
  --bg: #f4efe6;
  --surface: #fffaf2;
  --ink: #2a2420;
  --muted: #7a6f66;
  --line: #d9cfc2;
  --accent: #c2502e;
  --accent-ink: #fff;
  --cell: 4rem;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1816;
    --surface: #26221f;
    --ink: #f1e9df;
    --muted: #a39789;
    --line: #3d3631;
    --accent: #e0714d;
    --accent-ink: #1b1816;
  }
}

* { box-sizing: border-box; }

/* Component display rules must not override the hidden attribute. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.4 system-ui, sans-serif;
}

main {
  max-width: 64rem;
  margin: 0 auto;
  padding: 3rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

header { text-align: center; }
h1 { margin: 0; font: 600 2.5rem/1 Georgia, serif; letter-spacing: .02em; }
.tagline, .hint { margin: .25rem 0 0; color: var(--muted); }
.hint { font-size: .85rem; margin-top: -1rem; }
.hint.error { margin-top: -.75rem; color: var(--accent); }

.machine {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 1rem;
}

.reels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.reel {
  width: 11rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.reel-head { display: flex; gap: .4rem; }

.reel-head select {
  flex: 1;
  min-width: 0;
  padding: .4rem .5rem;
  border: 1px solid var(--line);
  border-radius: .4rem;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.reel-window {
  height: var(--cell);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: .6rem;
  background: var(--surface);
  /* Fade top and bottom edges like a drum. */
  mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent);
  cursor: grab;
  touch-action: none;
}

.machine[aria-busy] .reel-window { cursor: default; }
.drag-ghost { opacity: .4; }

.cell {
  height: var(--cell);
  display: grid;
  place-items: center;
  padding: 0 .5rem;
  font: 1.3rem/1.1 Georgia, serif;
  text-align: center;
}

.icon {
  width: 2.2rem;
  height: 2.2rem;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.icon:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.icon:disabled { opacity: .35; cursor: not-allowed; }
.icon.add { width: 3rem; height: var(--cell); border-radius: .6rem; border-style: dashed; }

.icon.lock { display: grid; place-items: center; color: var(--muted); }
.icon.lock .shackle { transition: transform .15s ease; transform-origin: 16px 11px; }
.icon.lock[aria-pressed="false"] .shackle { transform: translateX(4px) rotate(20deg); }
.icon.lock[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }

.reel.locked .reel-window { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.spin {
  padding: .8rem 3rem;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 1.1rem system-ui, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}

.spin:disabled { opacity: .6; cursor: progress; }
.machine[aria-busy] select, .machine[aria-busy] .icon { pointer-events: none; opacity: .5; }

button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Top bar */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--line);
}

.topbar .brand { font: 600 1.15rem Georgia, serif; color: var(--ink); text-decoration: none; }
.topbar-right { display: flex; align-items: center; gap: 1rem; font-size: .9rem; }
.topbar-right form { margin: 0; }
.topbar a { color: var(--ink); }
.who { color: var(--muted); }

button.link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
}

.pill, .secondary {
  padding: .45rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  font: 600 .9rem system-ui, sans-serif;
  cursor: pointer;
}

.pill:hover, .secondary:hover { background: var(--accent); color: var(--accent-ink); }
.secondary { padding: .6rem 1.6rem; font-size: 1rem; }

/* Prompt chips: a board's spin result */
.prompt { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }

.prompt li {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  padding: .2rem .6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font: 1rem Georgia, serif;
}

.prompt li span { color: var(--muted); font: .7rem system-ui, sans-serif; text-transform: uppercase; letter-spacing: .05em; }

/* Boards list */
.boards-page { align-items: stretch; }
.boards-page h1 { text-align: left; }
.boards-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; }
.storage { margin: 0; color: var(--muted); font-size: .85rem; }

.board-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.board-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: var(--surface);
}

.board-card > a {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1rem 1.2rem;
  color: inherit;
  text-decoration: none;
}

.board-card:hover { border-color: var(--accent); }
.board-card h2 { margin: 0; padding-right: 2rem; font: 600 1.25rem Georgia, serif; }
.board-card time { color: var(--muted); font-size: .8rem; }
.board-card .remove { position: absolute; top: .6rem; right: .6rem; }
.board-empty-list { grid-column: 1 / -1; color: var(--muted); }

/* Login */
.login-page { max-width: 24rem; align-items: stretch; }
.login-page h1 { text-align: left; }
.login-note { margin: 0; color: var(--muted); }
.login-note strong { color: var(--ink); }
.login-error { margin: 0; padding: .6rem .8rem; border: 1px solid var(--accent); border-radius: .5rem; color: var(--accent); }
.login-form { display: flex; flex-direction: column; gap: .5rem; }
.login-form label { font-size: .85rem; color: var(--muted); }
.login-form input {
  padding: .6rem .8rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.login-form input#code { font: 600 1.5rem/1 ui-monospace, monospace; letter-spacing: .3em; }
.login-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.login-form .secondary { align-self: flex-start; margin-top: .5rem; }
.login-again { display: flex; gap: .5rem; align-items: baseline; font-size: .9rem; color: var(--muted); }
.login-again form { margin: 0; }

/* Plans */
.pricing-page { align-items: stretch; }
.pricing-page h1 { text-align: left; }
.plan-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.plan-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: var(--surface);
}
.plan-card.current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.plan-card h2 { margin: 0; font: 600 1.4rem Georgia, serif; }
.plan-price { margin: 0; font-weight: 600; }
.plan-limits { margin: 0; padding-left: 1.1rem; color: var(--muted); }
.plan-badge, .plan-soon { margin: auto 0 0; color: var(--muted); font-size: .9rem; }
.plan-badge { color: var(--accent); font-weight: 600; }
.plan-card .secondary { margin-top: auto; text-decoration: none; }
.plan-manage { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; color: var(--muted); }
.plan-manage .secondary { text-decoration: none; }
.login-terms { margin: 0; color: var(--muted); font-size: .85rem; }

/* Legal pages */
.legal-page { max-width: 44rem; align-items: stretch; gap: 0; line-height: 1.6; }
.legal-page h1 { text-align: left; margin-bottom: .5rem; }
.legal-page h2 { margin: 2rem 0 .5rem; font: 600 1.25rem Georgia, serif; }
.legal-page p, .legal-page ul, .legal-page address { margin: 0 0 .75rem; }
.legal-page address { font-style: normal; }
.legal-page a { color: var(--accent); }
.legal-date { color: var(--muted); font-size: .9rem; }

/* Footer */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.5rem;
  padding: 1.5rem 1rem 2rem;
  font-size: .85rem;
}
.site-footer a { color: var(--muted); }