:root {
  /* OpossumWare brand: slate #1f2328, pink #d9577a, fur #f5f5f3. --accent is a deeper pink in light
     mode so text and buttons meet WCAG AA contrast; --brand-pink is for the logo and decoration. */
  --bg: #f1f2f3;
  --surface: #ffffff;
  --ink: #1f2328;
  --muted: #656d76;
  --line: #d8dbe0;
  --accent: #b93d63;
  --accent-ink: #fff;
  --brand-pink: #d9577a;
  --display: "Helvetica Neue", Arial, system-ui, sans-serif;
  --cell: 4rem;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17181c;
    --surface: #22252b;
    --ink: #f5f5f3;
    --muted: #9aa1aa;
    --line: #343840;
    --accent: #e8799a;
    --accent-ink: #17181c;
    --brand-pink: #e8799a;
  }
}

* { 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;
}

a { color: var(--accent); }

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: 800 2.75rem/1 var(--display); letter-spacing: -.04em; }
.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 var(--display);
  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 {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font: 800 1.3rem var(--display);
  letter-spacing: -.035em;
  color: var(--ink);
  text-decoration: none;
}
.topbar .brand img { display: block; width: 2rem; height: 2rem; }
.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;
  text-decoration: none;
  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 var(--display);
}

.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; }
.boards-head h2 { margin: 1rem 0 0; font: 800 1.5rem var(--display); }

.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: 800 1.25rem var(--display); }
.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: 800 1.4rem var(--display); }
.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: 800 1.25rem var(--display); }
.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); }
.site-footer .maker { color: var(--muted); }
.opossumware { font: 800 1em var(--display); letter-spacing: -.03em; color: var(--ink); }
.opossumware b { color: var(--brand-pink); font-weight: inherit; }

/* Not found: the opossum playing dead */
.not-found { text-align: center; }
.not-found img { width: 9rem; height: 9rem; transform: rotate(-12deg); filter: drop-shadow(0 .4rem .8rem rgb(0 0 0 / .25)); }
.not-found h1 { margin-top: 1rem; }
.not-found p { color: var(--muted); }