/* The homepage's own layout on the tabletop. The tabletop itself (felt, paper, the
   photograph, the one danger red) is site.css, shared with every page but the board.
   The tabletop-*.webp slices are cut from Assets.xcassets/TabletopBackdrop.imageset/tabletop.png
   by tools/tabletop_web_assets.py. */
[hidden] { display: none !important; }
body {
  /* The real board's light colours (play.css, fixtures/board_colors.json), so the demo
     board and the one you play are the same object. */
  --grid-empty: #fffcf4; --grid-glyph: #133c38; --grid-num: #3c4d47;
  --grid-block: #3d443d; --grid-line: #bcc3b8; --grid-frame: #bcc3b8; --grid-tint: .22;
}
.wrap, .returning-player .wrap { max-width: 1240px; padding: 0 36px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 0 24px; border-color: #faf2de40; color: var(--paper); }
header .brand { font: 700 2.4rem/1.15 var(--serif); letter-spacing: -.025em; text-transform: none; gap: 13px; }
header .brand-logo { width: 42px; height: 42px; }
.site-tagline { margin: 0; font: 1.15rem/1.5 var(--serif); color: #faf2dee6; }
.returning-only { display: none; }
.returning-player .first-visit-only { display: none; }
.returning-player .returning-only { display: flex; }
.returning-player .hero:not(.is-open) { display: none; }
/* The head script sets the class before lobby.js has run and unhidden the section, and a
   returning player's first paint should be their table, not an empty page. */
.returning-player .returning-home[hidden] { display: block; }
.paper-panel, .entry-panel, .hero, section.first-visit-only {
  background: var(--paper-fill); border: 1px solid #ffffff73; border-radius: 22px;
  box-shadow: var(--paper-shadow);
}
.hero { padding: 36px; gap: 48px; margin: 40px 0 30px; scroll-margin-top: 24px; }
.hero h1 { font-size: clamp(2.3rem, 4vw, 3.2rem); }
.hero .boardcard { padding: 8px; }
.hero .board { box-shadow: 0 5px 12px #133c3824; }
.hero .go { border-radius: 28px; background: var(--felt); color: var(--paper); border-color: var(--felt); }
.hero .go:hover { background: var(--ink); color: var(--paper); }
.hero .size[aria-checked="true"] { background: #ffffff66; box-shadow: inset 0 3px 0 var(--felt); }
.hero .starter input { border-radius: 9px; }
.hero .alone .go { background: #cce3f0; color: var(--ink); border-color: #133c3830; }
.hero .alone .go:hover { background: #bbd9e7; }
section.first-visit-only { padding: 32px 36px; margin: 24px 0; }
.returning-home { border: 0; padding: 32px 0 26px; }
.home-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 30px; color: var(--paper); }
.your-puzzles .eyebrow { margin: 0 0 10px; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; }
.home-heading h1 { font-size: clamp(2.5rem, 4.8vw, 3.3rem); margin-bottom: 8px; }
.your-puzzles .home-heading p { color: #faf2dedb; }
.your-puzzles .home-intro { margin: 0; font: 1.05rem/1.6 var(--serif); }
/* 42 high on one line; a thumb gets 44, as with the footer links in brand.css. */
.home-top { display: grid; grid-template-columns: 1.45fr 1fr; align-items: stretch; gap: 36px; margin: 0 6px 38px; }
/* Held at about a continue card's height while lobby.js asks for it, so the card landing
   after the round trip does not push the buttons and the library down under a thumb. */
.home-resume { display: flex; min-width: 0; padding: 5px 0; min-height: 340px; }
.continue-card, .home-empty, .home-loading {
  width: 100%; border-radius: 20px; padding: 30px; background: var(--paper-fill);
  color: var(--ink); border: 1px solid #ffffff73; box-shadow: var(--paper-shadow);
}
/* .home-resume stretches this to the height of the Start/Join/Random column beside it
   (.home-top's grid align-items: stretch), so its one line of text needs centring or it
   sits at the top of a tall blank box. On failure and briefly on every normal load, this
   is the only thing shown here. */
.home-loading { display: flex; align-items: center; justify-content: center; text-align: center; }
.home-loading p { margin: 0; }
.continue-card { display: flex; flex-direction: column; text-decoration: none; position: relative; isolation: isolate; }
.continue-card::before, .continue-card::after { content: ""; position: absolute; inset: 4px; z-index: -1; background: var(--paper-shade); border-radius: 17px; transform: rotate(1.8deg); box-shadow: 0 3px 9px #082d2820; }
.continue-card::after { inset: 0; background: var(--paper-fill); transform: none; border: 1px solid #ffffff73; }
.continue-card:hover::after { background: linear-gradient(125deg, #fff8e7, #ede0c5); }
.your-puzzles .continue-card .eyebrow, .your-puzzles .continue-card p { color: var(--muted); }
.your-puzzles .continue-card h2 { font-size: clamp(2rem, 4vw, 2.65rem); margin: 5px 0 10px; overflow-wrap: anywhere; }
.your-puzzles .continue-card p { margin: 0; font-size: .92rem; }
.featured-progress { display: flex; gap: 9px; align-items: baseline; margin-top: 24px; font-size: .85rem; color: var(--muted); }
#featured-percent { font: 700 2.1rem/1 var(--serif); color: var(--ink); }
.progress-track { height: 6px; background: #133c381c; border-radius: 5px; overflow: hidden; margin: 12px 0 24px; }
.progress-track > span { display: block; height: 100%; background: var(--felt); border-radius: inherit; }
.continue-cta { display: flex; align-items: center; justify-content: space-between; font-weight: 650; margin-top: auto; }
.round-arrow { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--felt); color: var(--paper); font: 1.6rem/1 ui-sans-serif, sans-serif; flex: none; }
.home-actions { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.home-button { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 48px; padding: 12px 18px; border-radius: 28px; text-decoration: none; background: var(--felt); color: var(--paper); font-size: .95rem; font-weight: 650; }
.home-button:hover { background: var(--ink); }
.start-puzzle-button { padding: 17px 24px; border-radius: 48px; background: var(--paper-fill); color: var(--ink); border: 1px solid #ffffff73; box-shadow: var(--paper-shadow); }
.start-puzzle-button:hover { background: #fff4dc; }
.your-puzzles .start-puzzle-button strong { font: 700 1.85rem/1.15 var(--serif); }
.start-puzzle-button small { display: block; font-weight: 400; font-size: .88rem; color: var(--muted); margin-top: 3px; }
.entry-panel { padding: 12px 20px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.home-action-link { display: flex; align-items: center; gap: 14px; min-height: 86px; padding: 12px 0; text-decoration: none; }
.home-action-link + .home-action-link { border-top: 1px solid var(--rule); }
.your-puzzles .home-action-link strong { font: 700 1.2rem/1.3 var(--serif); }
.home-action-link small { display: block; color: var(--muted); font-size: .76rem; margin-top: 4px; }
.home-action-link:hover strong { text-decoration: underline; }
.action-icon { width: 46px; height: 46px; border: 1px solid #ffffff9c; border-radius: 50%; display: grid; place-items: center; flex: none; box-shadow: 0 2px 4px #133c3820; }
.action-icon svg { width: 27px; height: 27px; }
.mint { background: #d1e8d4; }
.sky { background: #cce3f0; }
.entry-chevron { margin-left: auto; font-size: 1.7rem; color: var(--muted); }
.home-empty .home-button { margin-top: 28px; }
.puzzle-library { padding: 28px; }
.library-heading { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
/* Flex-basis 0 so the wrap point turns on the toggle's own width, the same in both
   cards, rather than on "Your puzzles" against "Puzzle groups" happening to set width
   a few pixels apart and wrapping the two cards' toggles at different widths. */
.library-heading > :first-child { flex: 1 1 0; min-width: 0; }
.your-puzzles .library-heading h2 { margin: 0; font-size: 1.7rem; }
/* A label is inline by default, so min-height alone does nothing; inline-flex makes it
   count toward the row's own height and lets align-items centre the checkbox in it. */
.your-puzzles .archive-toggle { display: inline-flex; flex: none; align-items: center; font-size: .8rem; min-height: 44px; }
.your-puzzles .archive-toggle input { width: 17px; height: 17px; accent-color: var(--felt); }
.puzzle-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.your-puzzles .puzzle-filters button { border: 1px solid var(--line); background: #ffffff30; border-radius: 24px; padding: 9px 16px; font-size: .84rem; }
.your-puzzles .puzzle-filters button[aria-pressed="true"] { background: var(--felt); border-color: var(--felt); color: var(--paper); }
.puzzle-filters button span { margin-left: 9px; font-variant-numeric: tabular-nums; opacity: .8; }
.your-puzzles ul { max-height: none; overflow: visible; gap: 14px; }
/* Tracks sized to the card, not the panel: auto-fit collapses a track with nothing in
   it instead of reserving it empty, so one puzzle does not leave two dead columns
   beside it. The 1fr keeps the count based on the minimum rather than the maximum,
   which a definite upper bound here would do instead; the card's own max-width below
   is what actually stops a lone one from stretching to fill the row. */
.your-puzzles .puzzle-cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.your-puzzles .puzzle-cards li { max-width: 380px; }
/* Same fix for the groups list: minmax(420px, 1fr) is set in index.html, this caps the
   card itself so a lone group does not stretch to fill the row. */
#your-groups-list li { max-width: 560px; }
.your-puzzles li { border: 1px solid #133c381a; border-radius: 13px; background: #ffffff47; }
.your-puzzles li a { padding: 20px; height: 100%; border-radius: inherit; }
.your-puzzles li a:hover { background: #ffffff35; }
.your-puzzles li strong { font-size: 1.2rem; }
.your-puzzles li span { font-size: .8rem; }
.your-puzzles li .puzzle-action { margin-top: 18px; color: var(--ink); font-size: .82rem; font-weight: 650; }
/* Beside the card's own link rather than inside it, so it is a second target and not a
   press on the puzzle. */
.your-puzzles .puzzle-cards li { position: relative; }
.your-puzzles .puzzle-cards li a { padding-bottom: 26px; }
.your-puzzles li .puzzle-archive { position: absolute; right: 12px; bottom: 12px; border-radius: 22px; border-color: var(--line); font-size: .78rem; }
.your-puzzles li .puzzle-archive:hover { background: #ffffff60; }
.your-puzzles li .puzzle-archive:disabled { opacity: .5; cursor: default; }
.your-puzzles .show-more { display: block; border-radius: 24px; margin: 22px auto 0; padding: 9px 24px; font-size: .84rem; border-color: var(--line); }
.home-groups { padding: 28px; margin-bottom: 32px; }
.your-puzzles .groups-intro { margin: -3px 0 18px; }
.home-groups .group-create-details { margin-top: 20px; }
.group-create-details summary { cursor: pointer; width: fit-content; font-size: .87rem; font-weight: 600; min-height: 44px; padding: 10px 0; }
.group-create-details summary span { margin-left: 12px; }
.your-puzzles .group-create { display: block; max-width: 520px; margin-top: 8px; }
.group-create > div { display: flex; align-items: stretch; gap: 8px; }
.your-puzzles .group-create label { display: block; margin-bottom: 7px; font-size: .82rem; }
.your-puzzles .group-create input { width: 100%; height: 46px; border-radius: 6px; }
.your-puzzles .group-create button { flex: none; border-radius: 6px; }
.new-puzzle-heading { align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.new-puzzle-heading h2 { font-size: 1.75rem; }
.new-puzzle-heading button { border: 1px solid var(--line); border-radius: 20px; background: transparent; color: var(--ink); min-height: 44px; padding: 8px 16px; cursor: pointer; font: inherit; font-size: .8rem; }
footer { border-color: #faf2de40; color: #faf2dedb; }
footer .caps { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #3382ed; outline-offset: 4px; }
@media (max-width: 1000px) {
  .home-top { gap: 24px; grid-template-columns: 1.2fr 1fr; }
  .entry-panel { padding: 12px 16px; }
  .home-action-link { gap: 10px; }
}
@media (max-width: 800px) {
  .wrap, .returning-player .wrap { padding: 0 24px; }
  header { flex-wrap: wrap; gap: 10px; }
  .site-tagline { font-size: 1.05rem; }
  .home-top { grid-template-columns: 1fr; gap: 20px; }
  .home-heading { align-items: flex-start; }
  .hero { padding: 28px; gap: 32px; }
  .hero .boardcard { padding: 0; }
}
@media (max-width: 500px) {
  .wrap, .returning-player .wrap { padding: 0 20px; }
  header { justify-content: center; padding-top: 24px; }
  header .brand { font-size: 2.15rem; }
  header .brand-logo { width: 38px; height: 38px; }
  .site-tagline { width: 100%; text-align: center; }
  .returning-home { padding-top: 24px; }
  .home-heading { margin-bottom: 20px; gap: 12px; }
  .home-heading h1 { font-size: 2.25rem; }
  .your-puzzles .home-intro { font-size: .95rem; }
  .continue-card, .home-empty, .home-loading { padding: 24px; }
  .home-top { margin: 0 3px 28px; }
  .puzzle-library, .home-groups { padding: 20px; }
  .your-puzzles .puzzle-filters button { padding: 9px 12px; }
  .group-create > div { flex-direction: column; }
  .hero, section.first-visit-only { padding: 24px 20px; }
  .hero { margin-top: 28px; }
  .library-heading { gap: 4px; }
}

/* Who is about, in the masthead beside the gear: a capsule on the felt whose dot glows
   and breathes while somebody is playing. The words are the app's ActivePlayersView's,
   "3 playing now" or "Quiet right now", and the chip is absent rather than wrong when
   the count cannot be read. */
.home-activity {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 7px 14px 7px 12px;
  border-radius: 999px; border: 1px solid #faf2de40; background: #faf2de1f; color: var(--paper);
  font-size: .84rem; font-weight: 600; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.activity-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #faf2de73; }
.activity-dot.has-players { background: #9fdeba; box-shadow: 0 0 0 3px #9fdeba33; animation: activity-breathe 2.4s ease-in-out infinite; }
@keyframes activity-breathe { 50% { box-shadow: 0 0 0 5px #9fdeba1a; opacity: .72; } }
@media (prefers-reduced-motion: reduce) { .activity-dot.has-players { animation: none; } }
header .home-activity[hidden] + .settings-link { margin-left: auto; }
@media (max-width: 800px) {
  header .site-tagline { order: 3; width: 100%; text-align: center; }
}
@media (max-width: 500px) {
  header { justify-content: space-between; }
  header .brand { font-size: clamp(1.5rem, 7vw, 2.15rem); gap: 8px; }
  header .settings-link { margin-left: auto; }
  /* Its own centred row under the tagline, where the brand and the gear leave no room. */
  header .home-activity { order: 4; margin: 2px auto 0; }
}