:root {
  --bg: #0d0f14;
  --bg2: #151924;
  --bg3: #1d2230;
  --border: #2a3042;
  --text: #e8eaf0;
  --text-muted: #a6acc2;
  --accent: #e8a030;
  --accent-ink: #1a1206;
  --yes: #3cb371;
  --no: #e05555;
  --maybe: #5a9be8;
  --radius: 12px;
}
* { box-sizing: border-box; }
/* The hidden attribute must win over any display rule (e.g. .game-grid { display: grid }). */
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font-family: Inter, system-ui, sans-serif; font-size: 16px; line-height: 1.45; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--accent); }
h1, h2, h3, .brand { font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: .04em; font-weight: 400; }
h1 { font-size: 2.2rem; margin: .2rem 0 .6rem; }
h2 { font-size: 1.6rem; margin: 0 0 .6rem; }
h3 { font-size: 1.25rem; margin: 0 0 .4rem; }

.topbar { display: flex; align-items: center; gap: .6rem; padding: .7rem 16px; border-bottom: 1px solid var(--border); background: var(--bg2); flex-wrap: wrap; }
.brand { color: var(--accent); font-size: 1.8rem; text-decoration: none; line-height: 1; }
.brand-sub { color: var(--text-muted); font-size: .82rem; }
.signout { margin-left: auto; display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--text-muted); min-width: 0; }
.signout .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
.link-btn { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; padding: .4rem 0; min-height: 44px; }

.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 1rem 16px 2rem; flex: 1; }

.panel { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; }
.hint { color: var(--text-muted); font-size: .88rem; }
.muted { color: var(--text-muted); }
.error { color: #ff8a8a; }
.ok { color: var(--yes); }

label.field { display: block; font-weight: 600; margin-bottom: .35rem; }
input[type=text], input[type=email], input[type=tel], input[type=number] {
  width: 100%; padding: .7rem .8rem; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font: inherit; min-height: 44px;
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.row { display: flex; gap: .6rem; align-items: stretch; }
.row > .grow { flex: 1; min-width: 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .55rem 1.1rem;
  border-radius: 8px; border: 1px solid var(--border); background: var(--bg3); color: var(--text); font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-ghost { background: transparent; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: .6rem; flex-wrap: wrap; }

/* Filters */
.filter { margin: 1.1rem 0 0; }
.filter-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .45rem; }
.filter-title { font-weight: 700; }
.pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.pill { min-height: 40px; padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font: inherit; font-size: .9rem; cursor: pointer; user-select: none; }
.pill.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.pill.inc { background: rgba(60,179,113,.18); border-color: var(--yes); color: #9be6bd; font-weight: 600; }
.pill.exc { background: rgba(224,85,85,.16); border-color: var(--no); color: #ffb0b0; font-weight: 600; text-decoration: line-through; }
.pill .count { opacity: .7; font-size: .8em; margin-left: .25rem; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.seg button { background: transparent; border: 0; color: var(--text-muted); padding: .35rem .8rem; font: inherit; font-size: .85rem; cursor: pointer; min-height: 36px; }
.seg button.on { background: var(--bg3); color: var(--text); font-weight: 600; }
.mech-more { margin-top: .5rem; }
.mech-toggle { font-weight: 600; }
.matchline { margin: 1.2rem 0 .8rem; font-size: 1.05rem; }
.matchline b { color: var(--accent); }

/* Progress */
.progress { height: 8px; background: var(--bg); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); margin-top: .5rem; }
.progress > div { height: 100%; width: 0; background: var(--accent); transition: width .3s; }

/* Game tiles */
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.game-tile { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.game-tile img { width: 100%; height: 100px; object-fit: cover; display: block; background: var(--bg3); }
.game-tile .gt-body { padding: .45rem .55rem; font-size: .85rem; }
.game-tile .gt-name { font-weight: 600; line-height: 1.25; }
.game-tile .gt-meta { color: var(--text-muted); font-size: .82rem; }

/* History tiles */
.history { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem; }
/* Phone: last searches collapse behind a toggle so the page opens on Find games. */
.history-toggle { display: none; }
@media (max-width: 899px) {
  .history-head { display: none; }
  .history-toggle { display: flex; align-items: center; gap: .4rem; width: 100%; min-height: 44px; background: none; border: 0; padding: 0;
    color: var(--text); font: inherit; font-size: 1.15rem; font-weight: 700; text-align: left; cursor: pointer; }
  .history-toggle .chev { margin-left: auto; width: .55rem; height: .55rem; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
    transform: rotate(45deg); transition: transform .15s; }
  .home-side.is-open .history-toggle .chev { transform: rotate(-135deg); }
  .home-side:not(.is-open) .history { display: none; }
  .home-side.is-open .history { margin-top: .6rem; }
  .home-side .panel { padding-top: .5rem; padding-bottom: .5rem; }
}
.htile { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: .75rem; display: flex; flex-direction: column; gap: .3rem; }
.htile a.open { color: var(--text); text-decoration: none; display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.htile .h-user { font-weight: 700; }
.htile .h-sum, .htile .h-date { color: var(--text-muted); font-size: .82rem; }
.htile .h-top { font-size: .88rem; }
.htile .h-top b { color: var(--accent); font-weight: 600; }
.badge { display: inline-block; font-size: .78rem; padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--border); }
.badge.open { color: var(--yes); border-color: var(--yes); }
.badge.closed { color: var(--text-muted); }

/* Links box */
.linkbox { display: flex; gap: .5rem; align-items: center; margin: .4rem 0 .9rem; }
.linkbox input { flex: 1; min-width: 0; font-size: .85rem; }

/* Voting */
body.voting .wrap { max-width: 640px; }
.stage { position: relative; display: grid; grid-template-columns: 1fr; justify-items: center; margin-top: .5rem; }
/* Phones: small enough that the counter, the instructions above it and the
   whole card fit on screen without scrolling (a scroll on the card is a swipe). */
.deck { position: relative; width: min(100%, 320px); height: min(54vh, 440px); }
@supports (height: 1svh) { .deck { height: min(54svh, 440px); } }
.card { position: absolute; inset: 0; background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column; touch-action: none; user-select: none; cursor: grab; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.card.dragging { cursor: grabbing; transition: none; }
.card.fly { transition: transform .3s ease-in, opacity .3s ease-in; }
.card.settle { transition: transform .2s ease-out; }
/* The card underneath growing into place while the top card flies off (swipe.js advance()). */
.card.promote { transition: transform .28s ease-out; }
/* A new card underneath fades in rather than appearing. */
.card { transition: opacity .25s ease-out; }
.card.arrive { opacity: 0; }
.card .c-img { position: relative; flex: 1; min-height: 0; display: flex; background: #0a0c10; }
.card img { width: 100%; height: 100%; min-height: 0; object-fit: contain; background: #0a0c10; pointer-events: none; }
/* Colour wash over the image while swiping; opacity is driven by swipe.js. */
.card .c-tint { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.card .c-body { padding: .8rem 1rem 1rem; }
.card .c-name { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 1.7rem; line-height: 1.05; letter-spacing: .03em; }
.card .c-meta { color: var(--text-muted); font-size: .9rem; margin-top: .2rem; }
.card .c-tap { color: var(--text-muted); font-size: .82rem; margin-top: .3rem; }
/* Mechanic icons (swipe.js MECH_SVG, chosen by includes/mech-icons.php). */
.mech-ic { display: inline-flex; width: 24px; height: 24px; color: #d6d9e4; flex-shrink: 0; }
.mech-ic svg { width: 100%; height: 100%; display: block; }
.card .c-icons { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.sheet-icons { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: -.3rem 0 .9rem; }
.sheet-ic { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; color: var(--text); }
.sheet-ic .mech-ic { width: 20px; height: 20px; }
.card .stamp { position: absolute; top: 1rem; z-index: 1; padding: .15rem .8rem; border: 4px solid; border-radius: 10px; font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 2.6rem; line-height: 1.1; letter-spacing: .06em; opacity: 0; pointer-events: none; background: rgba(13,15,20,.75);
  text-shadow: 0 0 10px currentColor; box-shadow: 0 0 14px currentColor; }
/* Brighter than the --yes/--no/--maybe used elsewhere, so the stamp reads over the wash. */
.stamp.s-yes { left: 1rem; color: #5cf09a; border-color: #5cf09a; transform: rotate(-12deg); }
.stamp.s-no { right: 1rem; color: #ff6e6e; border-color: #ff6e6e; transform: rotate(12deg); }
/* Top centre, not near the bottom: a swipe down puts the thumb over the lower
   card and pushes that edge off a phone screen, so a low stamp was never seen. */
.stamp.s-maybe { left: 50%; transform: translateX(-50%); color: #7cbcff; border-color: #7cbcff; }
.counter { text-align: center; color: var(--text-muted); font-size: .9rem; margin: .3rem 0; }
/* Bigger and brighter than other hints: voters miss it otherwise. The directions use the stamp colours. */
.swipe-hint { text-align: center; color: var(--text); font-size: 1.05rem; line-height: 1.4; margin: 0 0 .6rem; }
.swipe-hint b { font-weight: 700; }
.swipe-hint b.y { color: #5cf09a; } .swipe-hint b.n { color: #ff6e6e; } .swipe-hint b.m { color: #7cbcff; }
.swipe-hint .sub { display: block; color: var(--text-muted); font-size: .9rem; }

/* Desktop vote buttons: NO left, YES right, MAYBE below */
.vbtn { display: none; font-family: 'Bebas Neue', Impact, sans-serif; font-size: 1.5rem; letter-spacing: .06em; border-radius: 12px;
  border: 2px solid; background: var(--bg2); cursor: pointer; min-width: 110px; min-height: 56px; }
.vbtn.no { color: var(--no); border-color: var(--no); }
.vbtn.yes { color: var(--yes); border-color: var(--yes); }
.vbtn.maybe { color: var(--maybe); border-color: var(--maybe); }
.vbtn:hover { background: var(--bg3); }
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
  /* The middle column is a fixed width: with "auto" the absolutely-positioned
     cards give the deck no intrinsic width and it collapses to a sliver. */
  .stage { grid-template-columns: 1fr 360px 1fr; grid-template-areas: "no deck yes" ". maybe ."; align-items: center; gap: 1rem 1.2rem; }
  .stage .deck { grid-area: deck; width: 360px; height: min(64vh, 520px); }
  .vbtn { display: inline-block; }
  .vbtn.no { grid-area: no; justify-self: end; }
  .vbtn.yes { grid-area: yes; justify-self: start; }
  .vbtn.maybe { grid-area: maybe; justify-self: center; }
  .swipe-hint.touch { display: none; }
}
@media not ((hover: hover) and (pointer: fine) and (min-width: 769px)) {
  .swipe-hint.desk { display: none; }
}

/* Description sheet */
.sheet-back { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; z-index: 20; }
.sheet-back.show { display: block; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 80vh; overflow-y: auto; background: var(--bg2); border-top: 1px solid var(--border);
  border-radius: 16px 16px 0 0; padding: 1rem 16px 1.5rem; z-index: 21; transform: translateY(100%); transition: transform .25s; }
.sheet.show { transform: none; }
@media (min-width: 769px) { .sheet { left: 50%; right: auto; width: 640px; margin-left: -320px; } }
.sheet .s-desc { white-space: pre-line; font-size: .95rem; color: #d3d6e2; }

/* Results */
.result { display: flex; gap: .8rem; align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: .6rem; margin-bottom: .6rem; }
.result img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; background: var(--bg3); flex-shrink: 0; }
.result .r-rank { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 2rem; color: var(--accent); width: 2.2rem; text-align: center; flex-shrink: 0; }
.result .r-name { font-weight: 700; }
.result .r-meta { color: var(--text-muted); font-size: .85rem; }
.result .r-votes { font-size: .85rem; margin-top: .2rem; }
.result .r-votes .y { color: var(--yes); } .result .r-votes .m { color: var(--maybe); } .result .r-votes .n { color: var(--no); }
.result.top { border-color: var(--accent); }
.voter-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.voter-chip { padding: .25rem .7rem; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); font-size: .88rem; }
.voter-chip.done { border-color: var(--yes); }
.voter-chip.partial { color: var(--text-muted); }

.toast { position: fixed; bottom: 1.5rem; right: 1rem; left: 1rem; margin: 0 auto; max-width: 360px; background: var(--bg3); border: 1px solid var(--border);
  padding: .7rem 1rem; border-radius: 10px; text-align: center; z-index: 30; display: none; }
.toast.show { display: block; }
.cf-turnstile { display: flex; justify-content: center; margin: .8rem 0; }

/* BGG attribution sits above the site footer. The official logo has dark text, so it sits on a light badge. */
.bgg-attrib { text-align: center; padding: 1rem 16px .9rem; }

/* Copied from friendliestgames.com so every Friendliest Games page ends the same way. */
.fg-footer { text-align: center; padding: 28px 20px; font-size: 0.82rem; color: #374151; border-top: 1px solid rgba(255,255,255,0.05); }
.fg-footer p { margin: 0; }
.fg-footer a { color: #374151; text-decoration: none; }
.fg-footer a:hover { color: #6b7280; }
.bgg-badge { display: inline-flex; background: #fff; border-radius: 8px; padding: 4px 8px; }
.bgg-badge img { display: block; width: 150px; height: auto; }

/* Address book */
.contact-list { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .7rem; }
.contact-row { display: flex; align-items: center; gap: .8rem; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: .45rem .8rem; }
.contact-info { flex: 1; min-width: 0; }
.contact-name { font-weight: 600; }
.contact-sub { color: var(--text-muted); font-size: .85rem; overflow-wrap: anywhere; }
.link-btn.danger { color: #ff8a8a; }
.contact-form { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: .8rem; margin: .4rem 0 .7rem; }
.cf-field { margin-bottom: .6rem; }
/* Email and phone stacked, each full width (the form often sits in a narrow column). */
.cf-row { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.contact-form .cf-row .cf-field { margin-bottom: 0; }
.pick-list { display: flex; flex-direction: column; gap: .3rem; max-height: 260px; overflow-y: auto; }
.pick-row { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); cursor: pointer; min-height: 44px; }
.pick-row input { width: 20px; height: 20px; accent-color: var(--accent); flex-shrink: 0; }
.pick-name { flex: 1; min-width: 0; font-weight: 600; }
.pick-how { color: var(--text-muted); font-size: .82rem; }
.share-sub { font-weight: 700; margin: 1rem 0 .4rem; }

/* Organizer page: owner votes on the left, live results on the right. */
body.owner .wrap { max-width: 1200px; }
.owner-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 1100px) {
  .owner-grid { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; }
  .owner-side { position: sticky; top: 1rem; }
}
.owner-vote .panel-title { margin-bottom: .2rem; }

/* Home page, worked left to right (top to bottom on a phone):
   last searches | find games | send it to. */
body.home .wrap { max-width: 1400px; }
.home-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.home-main, .home-book { min-width: 0; }
@media (min-width: 900px) {
  .home-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  body.home.has-history .home-grid { grid-template-columns: 240px minmax(0, 1fr); }
  body.home.has-history .home-book { grid-column: 2; }
  .home-side .history { grid-template-columns: 1fr; }
}
@media (min-width: 1240px) {
  body.home.has-history .home-grid { grid-template-columns: 240px minmax(0, 1fr) 340px; }
  body.home.has-history .home-book { grid-column: 3; grid-row: 1; }
  .home-side, .home-book { position: sticky; top: 1rem; }
}
.ready { margin-top: 1rem; padding: .8rem; border: 1px solid var(--accent); border-radius: 10px; background: rgba(232,160,48,.07); }
.ready .game-grid { margin-top: .7rem; }
.pick-list.tall { max-height: 420px; }
.pick-row { display: flex; align-items: center; gap: .6rem; padding: .35rem .6rem; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); min-height: 44px; }
.pick-main { display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 0; cursor: pointer; }
.pick-text { display: flex; flex-direction: column; min-width: 0; }
.pick-text .pick-name { font-weight: 600; }
.pick-text .pick-how { color: var(--text-muted); font-size: .82rem; overflow-wrap: anywhere; }
.pick-row .link-btn { min-height: 36px; font-size: .85rem; }
/* Filled, so they read as buttons rather than outlined words. New search is the main action. */
.topnav { display: inline-flex; align-items: center; min-height: 38px; color: var(--text); text-decoration: none; font-weight: 600; font-size: .9rem;
  padding: .4rem .8rem; background: var(--bg3); border: 1px solid #3a4258; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.35); }
.topnav:hover { background: #262c3d; border-color: var(--accent); }
.topnav.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.topnav.primary:hover { background: #f0b04a; }
.topnav-group { display: flex; gap: .6rem; }
.pending-text { border-color: var(--accent); }

/* Contact details: hidden in the rows, shown on hover/focus on desktop (contacts.js). */
.contact-tip { position: fixed; z-index: 40; display: none; background: var(--bg3); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: .35rem .6rem; font-size: .85rem; box-shadow: 0 6px 18px rgba(0,0,0,.4); pointer-events: none; overflow-wrap: anywhere; }
.contact-tip.show { display: block; }
.pick-row:hover { border-color: var(--text-muted); }

/* Organizer page header: title on the left, Copy Link right there at the top. */
.owner-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.owner-title { min-width: 0; }
.owner-share { display: flex; gap: .5rem; flex-wrap: wrap; }
.owner-share .btn { min-width: 140px; }
.sent-line { margin-top: .35rem; font-size: .92rem; }
.sent-line b { color: var(--yes); font-weight: 600; }
.sent-skipped { color: #ffb0b0; font-size: .88rem; margin-top: .2rem; }
.pick-row.no-email .pick-name { color: var(--text-muted); }
.pick-missing { color: var(--text-muted); font-size: .8rem; }
.pick-row input:disabled { opacity: .35; cursor: not-allowed; }
@media (max-width: 560px) { .owner-share, .owner-share .btn { width: 100%; } .owner-share .btn { flex: 1; } }
.result .r-tie { font-size: .82rem; color: var(--text-muted); font-style: italic; margin-top: .15rem; }

/* Collection picker: "New collection" (type a username) or a previous one
   (read-only, x to forget it), with a dropdown of the user's collections. */
.combo { position: relative; }
.combo input { padding-right: .8rem; }
.combo.has-arrow input { padding-right: 3rem; }
.combo.is-selected input { padding-right: 5.6rem; cursor: pointer; font-weight: 600; text-overflow: ellipsis; }
.combo-arrow, .combo-clear { position: absolute; top: 0; bottom: 0; width: 44px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--text-muted); cursor: pointer; font: inherit; padding: 0; }
.combo-arrow { right: 0; border-left: 1px solid var(--border); }
.combo-arrow .chev { width: .55rem; height: .55rem; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.combo-arrow[aria-expanded="true"] .chev { transform: translateY(2px) rotate(-135deg); }
.combo-clear { right: 44px; font-size: 1.35rem; line-height: 1; }
.combo-clear:hover { color: #ff8a8a; }
.combo-arrow:hover .chev { border-color: var(--text); }
.combo-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: .25rem; list-style: none;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.45);
  max-height: 320px; overflow-y: auto; }
.combo-opt { min-height: 44px; display: flex; align-items: center; padding: .4rem .7rem; border-radius: 6px; cursor: pointer; overflow-wrap: anywhere; }
.combo-opt.new { color: var(--accent); font-weight: 600; border-bottom: 1px solid var(--border); border-radius: 6px 6px 0 0; margin-bottom: .2rem; }
.combo-opt.current { font-weight: 600; }
.combo-opt.current::after { content: ''; margin-left: auto; width: .35rem; height: .7rem; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); flex-shrink: 0; }
.combo-opt.active, .combo-opt:hover { background: var(--bg2); }
.shelf-updated { margin: .4rem 0 0; }
.shelf-updated .link-btn { min-height: 0; padding: .3rem .2rem; font-size: inherit; white-space: nowrap; }

/* How To tour (includes/howto.php, assets/howto.js). The track is a native
   scroll-snap strip, which is what makes it swipeable on a phone. */
.howto-lock, .howto-lock body { overflow: hidden; }
.howto-back { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; }
.howto { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; min-width: 0; }
.howto.is-overlay { width: 100%; height: 100%; border: 0; border-radius: 0; }
@supports (height: 1dvh) { .howto.is-overlay { height: 100dvh; } }
@media (min-width: 769px) {
  .howto.is-overlay { width: 640px; height: auto; max-height: min(90vh, 640px); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,.5); }
}
.howto-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .3rem 16px; border-bottom: 1px solid var(--border); }
.howto-label { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 1.3rem; letter-spacing: .06em; color: var(--accent); }
.howto-skip { font-weight: 600; }
a.howto-skip { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.howto-track { display: flex; flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; outline: none; }
.howto-track::-webkit-scrollbar { display: none; }
.howto-tile { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; overflow-y: auto; padding: 1.1rem 16px 1rem; }
@media (min-width: 769px) { .howto-tile { padding: 1.3rem 1.6rem 1rem; } }
.howto-tile h2 { display: flex; align-items: baseline; gap: .55rem; margin: 1rem 0 .5rem; line-height: 1.05; }
.howto-tile p { margin: 0 0 .6rem; }
.howto-tile b.y { color: var(--yes); } .howto-tile b.n { color: var(--no); } .howto-tile b.m { color: var(--maybe); }
.howto-num { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-size: 1.05rem; }
.howto-end { margin-top: 1rem; }
.howto-end .btn { min-width: 160px; }
@media (hover: hover) and (pointer: fine) { .howto-swipe-hint { display: none; } }

/* Decorative mock-ups of the real controls */
.howto-art { pointer-events: none; user-select: none; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: .8rem; }
.howto-art .ha-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.howto-art .ha-input { flex: 1; min-width: 140px; min-height: 44px; display: flex; align-items: center; padding: 0 .8rem; border: 1px solid var(--border);
  border-radius: 8px; color: var(--text-muted); background: var(--bg2); }
.howto-art .ha-link { color: var(--accent); font-size: .92rem; }
.howto-art .ha-input { position: relative; color: var(--text); font-weight: 600; padding-right: 5.4rem; }
.howto-art .ha-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.howto-art .ha-clear { position: absolute; right: 38px; top: 0; bottom: 0; width: 38px; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 1.35rem; font-weight: 400; line-height: 1; }
.howto-art .ha-arrow { position: absolute; right: 0; top: 0; bottom: 0; width: 38px; border-left: 1px solid var(--border); }
.howto-art .ha-arrow::after { content: ''; position: absolute; left: 50%; top: 50%; width: .5rem; height: .5rem; margin: -.4rem 0 0 -.25rem;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); }
.howto-art .ha-sub { color: var(--text-muted); font-size: .85rem; margin-top: .5rem; }
.howto-art .ha-label { font-weight: 700; font-size: .85rem; margin: .5rem 0 .3rem; }
.howto-art .ha-label:first-child { margin-top: 0; }
.howto-art .ha-split { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.howto-art .seg span { padding: .2rem .7rem; font-size: .8rem; color: var(--text-muted); font-weight: 400; }
.howto-art .seg span.on { background: var(--bg3); color: var(--text); font-weight: 600; }
.howto-art .pill { min-height: 32px; padding: .25rem .7rem; font-size: .82rem; }
.howto-art .ha-num { min-width: 52px; min-height: 36px; display: inline-flex; align-items: center; padding: 0 .7rem; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg2); }
.howto-art .ha-next { margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--border); justify-content: space-between; }
.howto-art .ha-card-tap { color: var(--text-muted); font-size: .65rem; padding: 0 .5rem .35rem; }
.howto-art .pill { cursor: default; }
.howto-art .ha-pick { display: flex; align-items: center; gap: .6rem; padding: .2rem .6rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg2); margin-bottom: .3rem; font-weight: 600; }
.howto-art .ha-check { width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--border); flex-shrink: 0; position: relative; }
.howto-art .ha-check.on { background: var(--accent); border-color: var(--accent); }
.howto-art .ha-check.on::after { content: ''; position: absolute; left: 4px; top: 0; width: 5px; height: 10px; border-right: 2px solid var(--accent-ink);
  border-bottom: 2px solid var(--accent-ink); transform: rotate(45deg); }
.howto-art .ha-vote { display: flex; align-items: center; justify-content: center; gap: .8rem; }
.howto-art .ha-dir { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 1.2rem; letter-spacing: .06em; }
.howto-art .ha-dir.y { color: var(--yes); } .howto-art .ha-dir.n { color: var(--no); } .howto-art .ha-dir.m { color: var(--maybe); margin-top: .3rem; }
.howto-art .ha-card { position: relative; width: 120px; height: 130px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg2);
  overflow: hidden; display: flex; flex-direction: column; transform: rotate(6deg) translateX(8px); }
.howto-art .ha-card-img { flex: 1; background: linear-gradient(135deg, #2b3550, #1a2030); }
.howto-art .ha-card-name { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 1.15rem; padding: .25rem .5rem; }
.howto-art .ha-stamp { position: absolute; top: .5rem; left: .5rem; z-index: 1; padding: 0 .4rem; border: 2px solid #5cf09a; border-radius: 6px; color: #5cf09a;
  font-family: 'Bebas Neue', Impact, sans-serif; font-size: 1.35rem; letter-spacing: .06em; background: rgba(13,15,20,.75); transform: rotate(-12deg);
  text-shadow: 0 0 6px currentColor; box-shadow: 0 0 8px currentColor; }
/* The same colour wash the real card gets mid-swipe. */
.howto-art .ha-card.tinted .ha-card-img { background: linear-gradient(rgba(60,179,113,.45), rgba(60,179,113,.45)), linear-gradient(135deg, #2b3550, #1a2030); }
.howto-art .ha-mech-toggle { font-weight: 600; margin-top: .5rem; }
.howto-art .ha-seg { display: inline-flex; align-items: center; padding: .3rem .8rem; font-size: .85rem; color: var(--text-muted); }
.howto-art .seg .ha-seg.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.howto-art .ha-stat { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: .5rem; align-items: center; padding: .3rem 0; border-top: 1px solid var(--border); font-size: .9rem; }
.howto-art .ha-stat:first-of-type { border-top: 0; }
.howto-art .ha-stat b { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 1.3rem; font-weight: 400; }
.howto-art .result { margin-bottom: .3rem; padding: .25rem .6rem; gap: .6rem; border-radius: 8px; }
.howto-art .result .r-name { font-size: .9rem; line-height: 1.2; }
.howto-art .result .r-votes { font-size: .78rem; margin-top: 0; }
.howto-art .r-rank { font-size: 1.4rem; width: 1.4rem; }
.howto-art .btn { min-height: 36px; padding: .35rem .9rem; font-size: .9rem; }

.howto-nav { display: flex; align-items: center; justify-content: center; gap: .8rem; padding: .5rem 16px calc(.6rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
.howto-dots { display: flex; gap: .15rem; }
/* 32px hit area around a 10px dot */
.howto-dot { width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.howto-dot::before { content: ''; width: 10px; height: 10px; border-radius: 999px; background: var(--border); transition: background .15s, transform .15s; }
.howto-dot[aria-current="step"]::before { background: var(--accent); transform: scale(1.25); }
.howto-arrow { display: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg3); cursor: pointer;
  align-items: center; justify-content: center; padding: 0; }
.howto-arrow .chev { width: .6rem; height: .6rem; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }
.howto-arrow.prev .chev { transform: translateX(2px) rotate(135deg); }
.howto-arrow.next .chev { transform: translateX(-2px) rotate(-45deg); }
.howto-arrow:hover:not(:disabled) { border-color: var(--accent); }
.howto-arrow:disabled { opacity: .3; cursor: default; }
@media (hover: hover) and (pointer: fine) { .howto-arrow { display: inline-flex; } }
.howto-help { display: block; margin: -.3rem auto .4rem; min-height: 36px; font-size: .88rem; }
body.howto-page .wrap { max-width: 720px; }
/* Phone, signed in: two fixed rows. Row 1 is the brand, New search and the
   name / Sign out; row 2 is How To and Stats. Letting the bar wrap on its own
   split the buttons unevenly. */
@media (max-width: 480px) { .brand-sub { display: none; } }
@media (max-width: 640px) {
  .topbar.has-user .signout { order: 2; }
  .topbar.has-user .topnav-group { order: 3; flex-basis: 100%; }
  .topbar.has-user .topnav-group .topnav { flex: 1; justify-content: center; }
  .topbar.has-user .signout .who { max-width: 28vw; }
}

/* Stats page (stats.php, public; "Just me" when signed in) */
body.stats-page .wrap { max-width: 1200px; }
.stats-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: .4rem; }
.stats-head h1 { margin: 0; }
.stats-range { display: flex; flex-wrap: wrap; gap: .4rem; }
.stats-range .pill { text-decoration: none; color: var(--text); }
.stats-who a { display: inline-flex; align-items: center; min-height: 40px; padding: .35rem .9rem; color: var(--text-muted); text-decoration: none; font-size: .9rem; }
.stats-who a.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.stats-sum { color: var(--text-muted); margin: .4rem 0 1rem; }
.stats-sum b { color: var(--text); }
.stats-sum .sy, .t-yes { color: var(--yes); } .stats-sum .sm, .t-maybe { color: var(--maybe); } .stats-sum .sn, .t-no { color: var(--no); }
.vchart { display: flex; align-items: flex-end; gap: 2px; height: 160px; padding-top: .3rem; border-bottom: 1px solid var(--border); }
.vbar { flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
.vbar:hover { background: rgba(255,255,255,.04); }
.vstack { width: 100%; display: flex; flex-direction: column-reverse; border-radius: 3px 3px 0 0; overflow: hidden; }
.vstack span { display: block; min-height: 1px; }
.vstack .sy, .vchart-key i.sy { background: var(--yes); }
.vstack .sm, .vchart-key i.sm { background: var(--maybe); }
.vstack .sn, .vchart-key i.sn { background: var(--no); }
.vchart-axis { display: flex; justify-content: space-between; align-items: center; gap: .5rem; color: var(--text-muted); font-size: .82rem; margin-top: .35rem; }
.vchart-key i { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin: 0 .25rem 0 .6rem; vertical-align: -1px; }
/* minmax(0,...) lets a column shrink below a long game name; plain 1fr would not. */
.stats-lists { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1rem; }
@media (min-width: 900px) { .stats-lists { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.srow { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.srow:first-of-type { border-top: 0; }
.srow img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; background: var(--bg3); flex-shrink: 0; }
.srow .s-rank { width: 1.4rem; text-align: center; color: var(--text-muted); font-size: .9rem; flex-shrink: 0; }
.srow .s-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.srow .s-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow .s-meta { color: var(--text-muted); font-size: .82rem; }
.srow .s-count { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 1.6rem; flex-shrink: 0; }