:root {
  --table: #13232a;
  --felt: #1a2f38;
  --raise: #23404b;
  --line: #33566a;
  --ink: #f0f4f1;
  --dim: #a4b8bc;
  --keep: #f4c152;
  --burn: #ff7a4d;
  --go: #86d99a;
  --display: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  --body: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bg: var(--table) radial-gradient(120% 70% at 50% 0%, #1d3a45 0%, var(--table) 70%) no-repeat;
  --well: #0f1c22;
  --rule: #284552;
  --on-keep: #2a1f00;
  --keep-hi: #ffd273;
  --on-burn: #2b0d00;
  --bar-bg: #0f1c22f2;
  --backdrop: #060d10d9;
  --toast-bg: #f0f4f1;
  --toast-ink: #10201f;
  --me-row: #1f3944;
  --tool-bg: #0c171ccc;
  --card-bg: #0c171c;
  --card-edge: #0a1418;
  --dw: 800;
  --r: 10px;
  --r-sm: 8px;
  --r-lg: 14px;
  --pill: 999px;
  --card-radius: 4.6% / 3.4%;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font: 16px/1.5 var(--body);
  touch-action: manipulation;
}
h1, h2, h3, p, dl, dd, ol, ul, fieldset { margin: 0; padding: 0; }
ol, ul { list-style: none; }
h1 { font: var(--dw) clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem)/1.15 var(--display); letter-spacing: -0.01em; }
h2 { font: var(--dw) 1.15rem/1.25 var(--display); }
h3 { font: 700 0.95rem/1.3 var(--body); display: flex; align-items: center; gap: 0.45rem; margin: 1rem 0 0.3rem; }
a { color: var(--keep); }
small { font-size: 0.78em; color: var(--dim); font-weight: 400; }
.dim { color: var(--dim); font-weight: 400; }
.small { font-size: 0.85rem; color: var(--dim); }
.hint { font-size: 0.88rem; color: var(--dim); max-width: 60ch; }
.lede { color: var(--dim); max-width: 62ch; margin-top: 0.35rem; }
.warn { color: var(--burn); }
.ready { color: var(--go); font-weight: 700; }
:focus-visible { outline: 3px solid var(--keep); outline-offset: 2px; }

/* Controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 44px; padding: 0.55rem 1.05rem;
  border: 1.5px solid var(--line); border-radius: var(--r);
  background: var(--raise); color: var(--ink);
  font: 700 1rem/1.2 var(--body); text-decoration: none; cursor: pointer;
}
.btn:hover:not(:disabled) { border-color: var(--dim); }
.btn.primary { background: var(--keep); border-color: var(--keep); color: var(--on-keep); }
.btn.primary:hover:not(:disabled) { background: var(--keep-hi); border-color: var(--keep-hi); }
.btn.slim { min-height: 34px; padding: 0.25rem 0.7rem; font-size: 0.88rem; }
.btn.xl { width: 100%; min-height: 56px; font-size: 1.15rem; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
input:not([type=radio]):not([type=checkbox]), textarea {
  display: block; width: 100%; margin-top: 0.3rem; padding: 0.65rem 0.8rem;
  border: 1.5px solid var(--line); border-radius: var(--r);
  background: var(--well); color: var(--ink); font: inherit;
}
textarea { resize: vertical; font-size: 0.95rem; line-height: 1.4; }
label { display: block; font-weight: 700; }
input[type=radio], input[type=checkbox] { width: 1.15rem; height: 1.15rem; accent-color: var(--keep); flex: none; margin: 0.15rem 0 0; }
.opt { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; padding: 0.3rem 0; cursor: pointer; }
fieldset { border: 0; }
legend { font-weight: 700; padding: 0; margin-bottom: 0.15rem; }
.row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: 0.85rem; }
.panel { background: var(--felt); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem 1.2rem; }

/* Top bar */
.top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem;
  padding: 0.7rem max(16px, env(safe-area-inset-left)); min-height: 54px;
}
.brand { font: var(--dw) 1.15rem/1 var(--display); color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.mid { flex: 1; min-width: 0; }
.chipline { display: flex; gap: 0.9rem; align-items: baseline; justify-content: center; white-space: nowrap; }
.offline { color: var(--burn); font-weight: 700; font-size: 0.9rem; }

/* Start, name and seat pages */
.narrow { max-width: 30rem; margin: 0 auto; padding: 4vh 16px 3rem; display: grid; gap: 1.1rem; }
.hero { font-size: clamp(2.8rem, 2rem + 6vw, 4.6rem); font-weight: 800; letter-spacing: -0.035em; line-height: 0.95; }
.codein { text-transform: uppercase; letter-spacing: 0.3em; font: var(--dw) 1.3rem var(--display); }
.wholist { display: grid; gap: 0.5rem; }

/* Lobby */
.lobby { display: grid; gap: 1.1rem; grid-template-columns: minmax(0, 22rem) minmax(0, 40rem); justify-content: center; padding: 1rem 16px 4rem; align-items: start; }
.col { display: grid; gap: 1.1rem; min-width: 0; }
.placard { text-align: left; padding: 0.4rem 0.2rem 0.2rem; }
.code { font: var(--dw) clamp(2.6rem, 2rem + 4vw, 4rem)/1 var(--display); letter-spacing: 0.04em; color: var(--keep); margin-bottom: 0.8rem; }
.players { margin: 0.8rem 0; display: grid; gap: 0.15rem; counter-reset: seat; }
.players li { display: flex; align-items: center; gap: 0.6rem; min-height: 40px; counter-increment: seat; }
.players li::before { content: counter(seat); width: 1.4rem; color: var(--dim); font: var(--dw) 0.9rem var(--display); text-align: right; }
.pname { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--go); flex: none; }
.away .dot { background: transparent; border: 2px solid var(--dim); }
.away .pname { color: var(--dim); }
.tabs { display: flex; gap: 0.3rem; border-bottom: 1.5px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs button { background: none; border: 0; border-bottom: 3px solid transparent; color: var(--dim); font: 700 1rem var(--body); padding: 0.6rem 0.9rem; margin-bottom: -1.5px; cursor: pointer; white-space: nowrap; }
.tabs button[aria-selected=true] { color: var(--ink); border-bottom-color: var(--keep); }
.setlist { max-height: 15rem; overflow-y: auto; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--well); }
.setrow { display: flex; justify-content: space-between; gap: 1rem; width: 100%; padding: 0.55rem 0.8rem; background: none; border: 0; border-bottom: 1px solid var(--rule); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.setrow:hover { background: var(--felt); }
.setrow.on { background: var(--raise); box-shadow: inset 4px 0 0 var(--keep); }
.setrow .dim { white-space: nowrap; font-size: 0.85rem; }
.setlist .hint { padding: 0.7rem 0.8rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.3rem; }
.chip { background: var(--raise); color: var(--ink); border: 1.5px solid var(--line); border-radius: var(--pill); padding: 0.3rem 0.75rem; font: inherit; font-size: 0.9rem; cursor: pointer; }
.chip b { color: var(--keep); margin-right: 0.2rem; }
.settings > div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.55rem 0; border-top: 1px solid var(--rule); }
.settings > div:first-child { border-top: 0; }
.settings > .sub { border-top: 0; padding-top: 0; padding-left: 1.75rem; }
.settings dt { flex: 1; min-width: 0; }
.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--well); }
.stepper button { width: 44px; height: 42px; background: var(--raise); color: var(--ink); border: 0; font: var(--dw) 1.3rem/1 var(--display); cursor: pointer; }
.stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
.stepper output, .val { min-width: 3rem; text-align: center; font: var(--dw) 1.15rem var(--display); font-variant-numeric: tabular-nums; }
#lob-summary .big { font: 500 1.25rem/1.3 var(--display); }
#lob-summary .big b { color: var(--keep); font-weight: 800; }
#lob-summary p + p { margin-top: 0.4rem; }
#lob-start .hint, .waiting { margin-top: 0.6rem; text-align: center; max-width: none; }
.waiting { color: var(--dim); }
details.warn summary { cursor: pointer; font-weight: 700; }
details.warn p { color: var(--ink); font-size: 0.9rem; margin-top: 0.3rem; }
.busy { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; }
.spin { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--keep); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* The table rail: who is holding packs */
.rail { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 16px 0.8rem; overflow-x: auto; scrollbar-width: thin; }
.seat { display: grid; grid-template-columns: auto auto; column-gap: 0.55rem; align-items: center; padding: 0.4rem 0.75rem 0.4rem 0.5rem; border-radius: var(--r-lg); border: 1.5px solid transparent; background: var(--felt); flex: none; }
.seat.you { border-color: var(--line); background: var(--raise); }
.stackbox { grid-row: span 2; position: relative; width: 30px; height: 38px; display: grid; place-items: center; }
.stackbox b { position: relative; z-index: 4; font: var(--dw) 0.95rem var(--display); color: var(--on-keep); }
.stackbox i { position: absolute; left: 3px; top: 3px; width: 22px; height: 31px; border-radius: 3px; background: var(--keep); border: 1.5px solid var(--on-keep); }
.stackbox i:nth-child(1) { z-index: 3; }
.stackbox i:nth-child(2) { z-index: 2; transform: translate(3px, -3px); }
.stackbox i:nth-child(3) { z-index: 1; transform: translate(6px, -6px); }
.stackbox i:nth-child(4) { z-index: 0; transform: translate(9px, -9px); }
.seat:not(.holding) .stackbox { border: 1.5px dashed var(--line); border-radius: 4px; width: 24px; height: 33px; margin: 2px 3px; }
.sname { font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
.scount { grid-column: 2; font-size: 0.78rem; color: var(--dim); white-space: nowrap; }
.seat.away .sname { color: var(--dim); }
.rail.over .stackbox { display: none; }
.rail.over .seat { padding-left: 0.75rem; }
.pass { color: var(--dim); font-size: 1.1rem; flex: none; }
.wrap { color: var(--dim); font-size: 0.8rem; white-space: nowrap; flex: none; padding-right: 16px; }

/* Draft */
.draft { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.25rem; padding: 0.4rem 16px 7rem; align-items: start; }
.draft aside { position: sticky; top: 0.75rem; max-height: calc(100vh - 6.5rem); overflow-y: auto; background: var(--felt); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 176px), 1fr)); gap: 0.85rem; margin-top: 1rem; }
.card { position: relative; aspect-ratio: 488 / 680; border-radius: var(--card-radius); background: var(--card-bg); cursor: pointer; box-shadow: 0 2px 0 var(--card-edge), 0 8px 18px -8px #000; transition: transform 0.12s ease; }
.card { overflow: hidden; }
.card img { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; color: var(--dim); font-size: 0.85rem; padding: 0; }
/* MPC Autofill art is 822 x 1122 with a 36px print border (bleed) on every side. Stretching
   the picture to the card and scaling it up by 822/750 and 1122/1050 trims exactly that border. */
img.mpc, #peek img.mpc, .zimg img.mpc { object-fit: fill; transform: scale(1.096, 1.069); }
.card:hover { transform: translateY(-3px); }
.card.keep { outline: 4px solid var(--keep); outline-offset: 2px; transform: translateY(-6px); }
.card.burn { outline: 4px solid var(--burn); outline-offset: 2px; }
.card.burn img { filter: grayscale(0.85) brightness(0.55); }
.tag { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); padding: 0.15rem 0.8rem; border-radius: var(--pill); font: var(--dw) 0.95rem var(--display); background: var(--keep); color: var(--on-keep); box-shadow: 0 2px 8px #0008; }
.burn .tag { background: var(--burn); color: var(--on-burn); }
.tools { position: absolute; top: 12%; right: 5%; display: grid; gap: 0.3rem; }
.tools button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--tool-bg); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.tools button:hover { background: var(--card-bg); }
.tools svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .card:not(:hover):not(:focus-within) .tools { opacity: 0; } }

.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem max(16px, env(safe-area-inset-left)) calc(0.7rem + env(safe-area-inset-bottom)); background: var(--bar-bg); border-top: 1.5px solid var(--line); backdrop-filter: blur(6px); }
.bar:empty { display: none; }
.tally { display: flex; align-items: center; gap: 0.5rem 0.9rem; flex-wrap: wrap; min-width: 0; }
.t { font-weight: 700; padding: 0.2rem 0.7rem; border-radius: var(--pill); border: 1.5px solid currentColor; white-space: nowrap; }
.t.keep { color: var(--keep); }
.t.burn { color: var(--burn); }
.t.full.keep { background: var(--keep); color: var(--on-keep); border-color: var(--keep); }
.t.full.burn { background: var(--burn); color: var(--on-burn); border-color: var(--burn); }
.hintline { color: var(--dim); font-size: 0.92rem; }
.bar .btn { flex: none; }

/* Picks */
.counts { display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; margin: 0.7rem 0 0.2rem; font: var(--dw) 0.95rem var(--display); }
.count { display: inline-flex; align-items: center; gap: 0.3rem; }
.pip { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; font: 800 0.68rem var(--body); font-style: normal; color: #14181a; flex: none; }
.pip.W { background: #f5eecb; } .pip.U { background: #77b5ea; } .pip.B { background: #a79bb0; }
.pip.R { background: #ee7458; } .pip.G { background: #6dbb7b; } .pip.M { background: #dcb955; }
.pip.C { background: #c3cccd; } .pip.L { background: #b89a78; }
.picklist button { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; width: 100%; padding: 0.28rem 0.4rem; background: none; border: 0; border-radius: 6px; color: var(--ink); font: inherit; font-size: 0.93rem; text-align: left; cursor: pointer; }
.picklist button:hover { background: var(--raise); }
.nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cost { display: inline-flex; gap: 1px; flex: none; color: var(--dim); font-size: 0.8rem; align-items: center; }
.ms { width: 0.95rem; height: 0.95rem; display: block; }
.minigrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin-top: 0.8rem; }
.minigrid .tools { display: none; }
.seg { display: inline-flex; border: 1.5px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.seg button { background: none; border: 0; color: var(--dim); font: 700 0.85rem var(--body); padding: 0.3rem 0.65rem; cursor: pointer; }
.seg button[aria-pressed=true] { background: var(--raise); color: var(--ink); }
#peek { position: fixed; z-index: 20; width: 300px; aspect-ratio: 488 / 680; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 16px 40px #000a; pointer-events: none; }
#peek img { display: block; width: 100%; height: 100%; object-fit: cover; }


/* Close-up and messages */
dialog { border: 0; padding: 0; background: none; color: var(--ink); max-width: min(94vw, 460px); max-height: 96vh; }
dialog::backdrop { background: var(--backdrop); }
dialog img { display: block; width: 100%; border-radius: 4.6% / 3.4%; }
.zimg { overflow: hidden; border-radius: 4.6% / 3.4%; aspect-ratio: 488 / 680; }
.zimg img { height: 100%; object-fit: cover; }
.zrow { display: flex; gap: 0.6rem; justify-content: center; padding: 0.8rem 0 0.2rem; }
.copybox { background: var(--felt); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem; width: min(90vw, 26rem); }
#toasts { position: fixed; left: 50%; bottom: 5.2rem; transform: translateX(-50%); z-index: 30; display: grid; gap: 0.5rem; width: max-content; max-width: calc(100vw - 32px); }
.toast { background: var(--toast-bg); color: var(--toast-ink); font-weight: 700; padding: 0.7rem 1rem; border-radius: var(--r); box-shadow: 0 10px 30px #0009; }

@media (max-width: 860px) {
  .lobby { grid-template-columns: minmax(0, 1fr); }
  .lobby .col { display: contents; }
  .lobby .placard { order: 0; }
  .lobby.is-host .lob-pool { order: 1; }
  .lobby.is-host .lob-rules { order: 2; }
  .lobby.is-host .lob-go { order: 3; }
  .lobby.is-host #lob-players { order: 4; }
  .lobby.is-guest .lob-go { order: 1; }
  .lobby.is-guest #lob-players { order: 2; }
  .lobby.is-guest .lob-pool { order: 3; }
  .lobby.is-guest .lob-rules { order: 4; }
  .draft { grid-template-columns: minmax(0, 1fr); }
  html .draft > aside { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 12; max-height: 78vh; overflow-y: auto; margin: 0; border-radius: var(--r-lg) var(--r-lg) 0 0;
    transform: translateY(105%); transition: transform 0.2s ease; box-shadow: 0 -12px 40px #000c; visibility: hidden; }
  body.drawer-open .draft > aside { transform: none; visibility: visible; }
  html .drawerclose { display: inline-flex; float: right; margin: 0 0 0.4rem 0.6rem; position: relative; z-index: 1; }
  html .picksfab { display: inline-flex; align-items: center; gap: 0.4rem; position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 11; min-height: 44px; padding: 0.4rem 1rem; border-radius: var(--pill); border: 1.5px solid var(--line); background: var(--raise); color: var(--ink); font: 700 0.95rem var(--body); box-shadow: 0 6px 18px #0009; cursor: pointer; }
  .picksfab b { color: var(--keep); }
  .bar:not(:empty) ~ .picksfab { bottom: calc(5.4rem + env(safe-area-inset-bottom)); }
  html body.drawer-open .picksfab { display: none; }
  .chipline .dim { display: none; }
  .hintline { display: none; }
  .grid { gap: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .spin { animation-duration: 3s; }
}

/* Chunk 2: profiles, history, deck builder */
.top .right { display: flex; align-items: center; gap: 0.8rem; }
.whoami { font-weight: 700; font-size: 0.95rem; color: var(--dim); white-space: nowrap; }
.link { background: none; border: 0; padding: 0; color: var(--keep); font: inherit; text-decoration: underline; cursor: pointer; margin-left: 0.4rem; }
select { display: block; margin-top: 0.3rem; min-height: 44px; padding: 0.4rem 0.7rem; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--well); color: var(--ink); font: inherit; }
.history { margin-top: 0.6rem; }
.history li + li { border-top: 1px solid var(--rule); }
.history .hrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.6rem; }
.history a { flex: 1; min-width: 0; display: grid; gap: 0.1rem; padding: 0.7rem 0.2rem; color: var(--ink); text-decoration: none; }
.hremove { flex: none; }
.hconfirm { flex-basis: 100%; padding: 0 0.2rem 0.8rem; }
.hconfirm p { font-size: 0.92rem; margin-bottom: 0.5rem; }
.history a:hover .hmain b { text-decoration: underline; }
.hmain { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.hmain .dim { font-size: 0.85rem; white-space: nowrap; }
.hsub { font-size: 0.9rem; color: var(--dim); }
.hsub.live { color: var(--go); }

.after { padding: 0.4rem 16px 7rem; max-width: 100rem; margin: 0 auto; }
.after .tabs { margin: 0.6rem 0 1rem; }
.zone { margin-top: 1.6rem; }
.zone > .row { margin-top: 0.7rem; }
.zone h2 .dim { font: 400 0.95rem var(--body); margin-left: 0.3rem; }
.controls { display: flex; flex-wrap: wrap; gap: 0.9rem 1.8rem; align-items: flex-end; margin-top: 1rem; }
.ctl { display: grid; gap: 0.25rem; }
label.ctl { display: flex; align-items: center; min-height: 36px; padding: 0; }
.seg button { min-height: 34px; }
.cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 148px); gap: 0.6rem; overflow-x: auto; padding: 0.4rem 2px 0.8rem; align-items: start; scrollbar-width: thin; }
.colhead { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.35rem; white-space: nowrap; }
.colhead .n { min-width: 1.5rem; padding: 0 0.4rem; border-radius: var(--pill); background: var(--raise); color: var(--dim); font-size: 0.8rem; text-align: center; }
.row.bottom { align-items: flex-end; }
.stackcol .card + .card { margin-top: -119%; }
.stackcol .card { box-shadow: 0 -2px 6px -2px #000c; transition: none; }
.stackcol .card:hover { transform: none; filter: brightness(1.12); }
.card.off { outline: 3px solid var(--burn); outline-offset: -2px; }
.empty { padding: 1.2rem; border: 1.5px dashed var(--line); border-radius: var(--r-lg); margin-top: 0.6rem; max-width: none; }
.cmdrow { display: flex; gap: 0.8rem; margin-top: 0.6rem; }
.cmdrow .card { width: min(44%, 190px); }
.lands { display: flex; flex-wrap: wrap; gap: 0.6rem 1.8rem; margin-top: 0.6rem; }
.land { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; min-width: 14.5rem; flex: 0 1 auto; }
.lname { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; }
.t.over { background: var(--burn); color: var(--on-burn); border-color: var(--burn); }
figure { margin: 0; }
figcaption { text-align: center; font-size: 0.85rem; color: var(--dim); padding-top: 0.35rem; }
.chip.on { background: var(--keep); border-color: var(--keep); color: var(--on-keep); font-weight: 700; }
pre.list { margin: 0.6rem 0 0; padding: 1rem; background: var(--well); border: 1.5px solid var(--line); border-radius: var(--r); font: 0.92rem/1.5 var(--body); columns: 16rem; white-space: pre-wrap; max-width: 60rem; }
.danger { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.warnbtn { background: var(--burn); border-color: var(--burn); color: var(--on-burn); }
@media (max-width: 860px) {
  .cols { grid-auto-columns: 104px; }
  .land { width: 100%; }
  .whoami { display: none; }
}

/* Chunk 3: brackets, ratings, stats */
.navlink { color: var(--ink); font-weight: 700; font-size: 0.95rem; text-decoration: none; padding: 0.3rem 0.6rem; border-radius: var(--r-sm); border: 1.5px solid var(--line); }
.navlink:hover { border-color: var(--dim); }
.gap { margin-top: 0.8rem; }
.setup .opt { padding: 0.5rem 0; }
.rate { border-color: var(--keep); max-width: 44rem; }
.seg.wide { display: flex; flex-wrap: wrap; }
.seg.wide button { flex: 1 1 auto; min-height: 44px; padding: 0.4rem 0.8rem; font-size: 0.95rem; border-right: 1px solid var(--line); }
.seg.wide button:last-child { border-right: 0; }
.seg.wide button[aria-pressed=true] { background: var(--keep); color: var(--on-keep); }
.presets { display: grid; gap: 0.7rem; margin-top: 0.7rem; }
.presets .row { margin-top: 0.25rem; }
.presets .btn { min-width: 4.2rem; font-family: var(--display); }
.matches { display: grid; gap: 0.45rem; margin-top: 0.5rem; }
.matchrow { display: flex; gap: 0.5rem; align-items: center; }
.match { flex: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.6rem; min-height: 46px; padding: 0.45rem 0.8rem; background: var(--felt); border: 1.5px solid var(--line); border-radius: var(--r); color: var(--ink); font: inherit; text-align: left; }
button.match { cursor: pointer; }
button.match:hover:not(:disabled) { border-color: var(--dim); }
button.match:disabled { opacity: 0.55; cursor: default; }
.match .side { color: var(--dim); min-width: 0; overflow-wrap: anywhere; }
.match .side.right { text-align: right; }
.match .side.win { color: var(--ink); font-weight: 700; }
.match:not(.played) .side { color: var(--ink); }
.match .sc { font: var(--dw) 1.05rem var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.match:not(.played) .sc { color: var(--dim); font: 400 0.9rem var(--body); }
.match.bye { grid-template-columns: auto 1fr; border-style: dashed; background: none; }
.match.bye .sc { font: 400 0.95rem var(--body); color: var(--dim); }
.rounds { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.4rem 1.4rem; }
.bracket { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 19rem); gap: 1.4rem; overflow-x: auto; padding-bottom: 0.6rem; align-items: center; }
.bracket .round { align-self: stretch; display: flex; flex-direction: column; }
.bracket .matches { flex: 1; align-content: space-around; }
.champ { display: grid; gap: 0.1rem; padding: 1rem 1.2rem; margin: 0.9rem 0 0.6rem; border: 2px solid var(--keep); border-radius: var(--r-lg); max-width: 44rem; }
.champ b { font: var(--dw) clamp(1.8rem, 1.3rem + 2vw, 2.6rem)/1.1 var(--display); color: var(--keep); }
.scroll { overflow-x: auto; margin-top: 0.5rem; }
.tbl { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { text-align: left; padding: 0.5rem 0.9rem 0.5rem 0; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.tbl thead th { font-size: 0.82rem; font-weight: 400; color: var(--dim); }
.tbl tbody th { font-weight: 700; }
.tbl .num { color: var(--dim); width: 1.5rem; }
.tbl tr.me th, .tbl tr.me td { background: var(--me-row); }
.tbl tr.me th:first-child, .tbl tr.me td:first-child { box-shadow: inset 3px 0 0 var(--keep); padding-left: 0.6rem; }
.tbl .pip { margin-right: 2px; vertical-align: middle; }
.statspage { max-width: 78rem; margin: 0 auto; padding: 0.6rem 16px 4rem; }
.statgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1rem; margin-top: 1rem; align-items: start; }
.statbox { background: var(--felt); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem 1.1rem; min-width: 0; }
.statbox h3 { margin: 0 0 0.2rem; font: var(--dw) 1.02rem var(--display); }
.ranked { counter-reset: rank; margin-top: 0.5rem; }
.ranked li { counter-increment: rank; display: flex; gap: 0.6rem; justify-content: space-between; align-items: baseline; padding: 0.3rem 0; border-bottom: 1px solid var(--rule); }
.ranked li::before { content: counter(rank); color: var(--dim); font: var(--dw) 0.85rem var(--display); width: 1.2rem; flex: none; }
.ranked li:last-child { border-bottom: 0; }
.cardname { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.ranked .dim { font-size: 0.85rem; text-align: right; }
@media (max-width: 860px) {
  .seg.wide button { flex-basis: 30%; }
  .tabs button { padding: 0.6rem 0.65rem; font-size: 0.95rem; }
}

/* Chunk 4: Winston and grid drafts */
.styleline { display: grid; gap: 0.35rem; justify-items: start; padding-bottom: 0.8rem; margin-bottom: 0.2rem; border-bottom: 1px solid var(--rule); }
.styleline .seg button { min-height: 40px; padding: 0.4rem 1rem; font-size: 0.95rem; }
.piles { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1rem; }
.pile { display: grid; justify-items: center; gap: 0.1rem; min-width: 6.2rem; padding: 0.7rem 0.8rem; border: 1.5px solid var(--line); border-radius: var(--r-lg); background: var(--felt); }
.pile.on { border-color: var(--keep); background: var(--raise); }
.pile.gone { opacity: 0.5; border-style: dashed; }
.pile.main { border-style: dashed; background: none; align-content: end; }
.pile .dim { font-size: 0.85rem; }
.pilecards { position: relative; width: 34px; height: 50px; margin-bottom: 0.3rem; }
.pilecards i { position: absolute; left: 0; top: 4px; width: 30px; height: 42px; border-radius: 4px; background: var(--keep); border: 1.5px solid var(--on-keep); }
.pilecards i:nth-child(2) { transform: translate(2px, -2px); }
.pilecards i:nth-child(3) { transform: translate(4px, -4px); }
.pilecards i:nth-child(4) { transform: translate(6px, -6px); }
.pilecards i:nth-child(5) { transform: translate(8px, -8px); }
.pilecards i:nth-child(6) { transform: translate(10px, -10px); }
/* Sized from the window height so all nine cards stay on screen at once. */
.board { display: grid; grid-template-columns: 44px repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin-top: 1rem; max-width: max(24rem, min(43rem, calc((100vh - 330px) * 0.717 + 80px))); align-items: center; }
.linebtn { width: 44px; height: 44px; justify-self: center; border-radius: 50%; border: 1.5px solid var(--line); background: var(--raise); color: var(--ink); font: var(--dw) 1.2rem/1 var(--display); cursor: pointer; }
.linebtn:hover:not(:disabled) { border-color: var(--keep); }
.linebtn.on { background: var(--keep); border-color: var(--keep); color: var(--on-keep); }
.linebtn:disabled { opacity: 0.3; cursor: default; }
.slot { aspect-ratio: 488 / 680; border: 1.5px dashed var(--line); border-radius: var(--card-radius); }
.board .card.keep { transform: none; }
.theirs { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); }
.theirs .picklist { margin-top: 0.5rem; }
@media (max-width: 860px) {
  .board { grid-template-columns: 38px repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
  .linebtn { width: 38px; height: 38px; }
  .pile { min-width: 0; flex: 1 1 4.6rem; padding: 0.55rem 0.4rem; }
}

/* Saved lists */
#saved .row { margin-top: 0.5rem; }
#saved select { width: 100%; max-width: 32rem; }

/* Menu and settings */
.menubtn { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 38px; }
.menubtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
.menubtn .whoami { color: inherit; font: inherit; }
:where(button).navlink { background: none; font: 700 0.95rem var(--body); cursor: pointer; color: var(--ink); }
dialog:has(.menubox) { max-width: min(96vw, 46rem); }
.menubox > * + * { margin-top: 0.85rem; }
.menubox { width: min(92vw, 44rem); background: var(--felt); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem 1.2rem; max-height: 92vh; overflow-y: auto; }
.menuhead h2 { overflow-wrap: anywhere; }
.menunav { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.menusec { border-top: 1px solid var(--rule); padding-top: 0.7rem; }
.menusec summary { cursor: pointer; font: var(--dw) 1.05rem var(--display); padding: 0.2rem 0; list-style-position: inside; }
.menusec .opts { display: grid; gap: 0.35rem; margin-top: 0.5rem; }
.menusec .ctl { margin-bottom: 0.3rem; }
.styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.6rem; margin-top: 0.7rem; }
.styletile { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.75rem; align-items: center; text-align: left; padding: 0.65rem 0.75rem; border-radius: 10px; border: 2px solid transparent; background: var(--tb); color: var(--ti); cursor: pointer; font: 400 0.82rem/1.3 system-ui, sans-serif; box-shadow: inset 0 0 0 1px #ffffff22; }
.styletile:hover { border-color: color-mix(in srgb, var(--th) 60%, transparent); }
.styletile[aria-pressed=true] { border-color: var(--th); box-shadow: 0 0 0 2px var(--tb), 0 0 0 4px var(--th); }
.styletile b { font-size: 1.12rem; font-weight: 400; line-height: 1.15; grid-column: 2; }
.styletile .note { grid-column: 2; opacity: 0.75; }
.styletile .sw { grid-row: span 2; display: grid; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr; width: 2.4rem; height: 2.4rem; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px #0006; }
.styletile .sw i:nth-child(1) { grid-row: span 2; background: var(--tm); }
.styletile .sw i:nth-child(2) { background: var(--th); }
.styletile .sw i:nth-child(3) { background: var(--ti); }

/* Card size while drafting (a setting) */
html[data-cards=s] .grid { grid-template-columns: repeat(auto-fill, minmax(min(30%, 132px), 1fr)); gap: 0.6rem; }
html[data-cards=l] .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }

/* Lobby: folding sections with a one-line summary */
details.fold > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.8rem; cursor: pointer; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: "Show"; margin-left: auto; font: 700 0.85rem var(--body); color: var(--keep); }
details.fold[open] > summary::after { content: "Hide"; }
details.fold .brief { color: var(--dim); font-size: 0.92rem; min-width: 0; }
details.fold[open] .brief { display: none; }
.foldbody { margin-top: 0.9rem; }
.readymark { font-size: 0.78rem; color: var(--dim); border: 1px solid var(--line); border-radius: var(--pill); padding: 0.05rem 0.55rem; white-space: nowrap; }
.readymark.on { color: var(--go); border-color: var(--go); font-weight: 700; }
.readyline { font-weight: 700; color: var(--dim); margin-bottom: 0.5rem; }
.readyline.all { color: var(--go); }
.lob-go #lob-start { margin-top: 1rem; }
.btn.isready { border-color: var(--go); color: var(--go); }

/* Picks drawer button (phones) and the seat strip wrap */
.picksfab, .drawerclose { display: none; }
.wrap { font-weight: 700; }

/* Play tab */
.mwrap { display: grid; gap: 0.1rem; }
.by { font-size: 0.78rem; color: var(--dim); padding-left: 0.8rem; }
.presets { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); max-width: 46rem; }

@media (max-width: 600px) {
  .top .mid { order: 3; flex-basis: 100%; }
  .top .mid:empty { display: none; }
  .top .right { margin-left: auto; }
  .chipline { justify-content: flex-start; }
}

/* Pick timer */
.headrow { align-items: center; }
.clock { font: var(--dw) 1.15rem var(--display); font-variant-numeric: tabular-nums; min-width: 3.4rem; text-align: center; padding: 0.15rem 0.6rem; border-radius: var(--pill); border: 1.5px solid var(--line); color: var(--ink); }
.clock:empty { display: none; }
.clock.low { color: var(--burn); border-color: var(--burn); animation: pulse 1s ease-in-out infinite; }
.clock.paused { color: var(--dim); font-size: 0.95rem; }
@keyframes pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .clock.low { animation: none; } }

/* Recap */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.7rem; }
.tile { display: grid; gap: 0.2rem; padding: 0.8rem 1rem; background: var(--felt); border: 1px solid var(--line); border-radius: var(--r-lg); }
.tile b { font: var(--dw) 1.6rem/1.1 var(--display); display: flex; gap: 0.25rem; align-items: center; }
.tile .pip { width: 1.6rem; height: 1.6rem; font-size: 0.85rem; }
.recapcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(30%, 150px), 1fr)); gap: 0.8rem; margin-top: 0.6rem; max-width: 60rem; }
.fights { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.fights li { display: flex; gap: 0.6rem; align-items: center; }
.fights .pip, .tbl td .pip { margin-right: 2px; }
.tbl td .link { margin: 0; text-decoration: none; color: var(--ink); }
.tbl td .link:hover { text-decoration: underline; }

/* Rotisserie */
.rototools { display: grid; gap: 0.6rem; margin-top: 0.9rem; }
.rototools .chips .chip { display: inline-flex; align-items: center; gap: 0.3rem; }
.rototools select { margin-top: 0; }
.rototools .opt { padding: 0; align-items: center; }
.card.taken img { filter: grayscale(0.7) brightness(0.45); }
.card.taken .tag { background: var(--raise); color: var(--ink); }
.recent { display: grid; gap: 0.25rem; margin-top: 0.4rem; font-size: 0.92rem; }
.recent .link { margin: 0; text-decoration: none; color: var(--ink); }
.recent .link:hover { text-decoration: underline; }
.rotofilters > summary { cursor: pointer; font-weight: 700; width: max-content; }
.rotofilters[open] > summary { margin-bottom: 0.6rem; }
.rotofilters .row { margin-top: 0.6rem; }
@media (max-width: 600px) { .rototools .chip .lbl { display: none; } }

/* Deck tools */
.deckstats { display: grid; grid-template-columns: minmax(16rem, 26rem) minmax(12rem, 18rem) minmax(16rem, 1fr); gap: 1rem 2rem; align-items: start; margin-top: 1rem; padding: 1rem 1.1rem; background: var(--felt); border: 1px solid var(--line); border-radius: var(--r-lg); }
.deckstats > .row { grid-column: 1 / -1; }
.cbars { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; height: 8.5rem; align-items: end; margin-top: 0.4rem; border-bottom: 1px solid var(--line); }
.cbar { display: grid; grid-template-rows: auto 1fr; height: 100%; position: relative; }
.cbar .cfill { align-self: end; background: var(--keep); border-radius: 4px 4px 0 0; min-height: 0; }
.cbar .cval { text-align: center; font: var(--dw) 0.85rem var(--display); color: var(--ink); align-self: end; }
.cbar .clabel { position: absolute; bottom: -1.4rem; left: 0; right: 0; text-align: center; font-size: 0.78rem; color: var(--dim); }
.curve { padding-bottom: 1.4rem; }
.cbar:hover .cfill { filter: brightness(1.15); }
.typecounts { display: grid; gap: 0.3rem; }
.typecounts div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--rule); padding: 0.2rem 0; }
.typecounts dd { margin: 0; font: var(--dw) 1rem var(--display); }
.sources th, .sources td { padding-right: 0.8rem; }
.sources .pip { margin-right: 0.3rem; vertical-align: middle; }
dialog:has(.handbox) { max-width: min(96vw, 64rem); }
.handbox { width: min(92vw, 62rem); background: var(--felt); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem 1.2rem; display: grid; gap: 0.8rem; max-height: 94vh; overflow-y: auto; }
.handcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(30%, 120px), 1fr)); gap: 0.6rem; }
.handcards .tools { display: none; }
.basictile { display: grid; place-items: center; border: 2px solid var(--line); background: var(--raise); cursor: default; }
.basictile span { display: grid; justify-items: center; gap: 0.4rem; font-weight: 700; }
.basictile .pip { width: 2rem; height: 2rem; font-size: 1rem; }
@media (max-width: 860px) { .deckstats { grid-template-columns: minmax(0, 1fr); } }

/* Keyboard shortcut settings */
.keyrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1rem; padding: 0.35rem 0; border-bottom: 1px solid var(--rule); }
.keycaps { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.keycap { min-width: 2.3rem; min-height: 2.1rem; padding: 0.2rem 0.55rem; border: 1.5px solid var(--line); border-bottom-width: 3px; border-radius: 6px; background: var(--raise); color: var(--ink); font: 700 0.9rem var(--body); cursor: pointer; }
.keycap:hover { border-color: var(--dim); }
.keycap.listening { border-color: var(--keep); color: var(--keep); }
.tablefold { border-top: 1px solid var(--rule); padding-top: 0.9rem; }
.tablefold > summary h2 { margin: 0; }
.everyone { margin-top: 1.6rem; }
.seatmove { display: inline-flex; gap: 0.25rem; }
.seatmove .btn { min-width: 2.2rem; padding-inline: 0.4rem; }
.players li { flex-wrap: wrap; row-gap: 0.3rem; }
.players .pname { flex: 1 1 7rem; }
.players li .readymark { margin-left: auto; }
.pctl { display: inline-flex; gap: 0.4rem; margin-left: auto; }

/* Conspiracy draft-matters cards */
.cxstrip { display: grid; gap: 0.4rem; margin: 0.2rem 0 0.8rem; padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--felt); }
.cxrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
.cxrow > .small { min-width: 4.5rem; }
.cxchip { padding: 0.15rem 0.6rem; border-radius: var(--pill); border: 1px solid var(--line); background: var(--raise); font-size: 0.86rem; cursor: default; }
.cxchip.you { border-color: var(--keep); }
.cxprompt { margin: 0.2rem 0 1rem; padding: 0.9rem 1rem; border: 2px solid var(--keep); border-radius: var(--r-lg); background: var(--felt); display: grid; gap: 0.6rem; }
.cxprompt.wait { border-width: 1px; border-color: var(--line); display: flex; align-items: center; gap: 0.6rem; }
.cxprompt.wait .spin { flex: none; }
.cxprompt .pip { margin-right: 0.3rem; }
.cxcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.5rem; }
.cxcard { display: grid; gap: 0.25rem; padding: 0; border: 2px solid transparent; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: 0.8rem; cursor: pointer; text-align: center; }
.cxcard img { width: 100%; border-radius: 4.6% / 3.4%; display: block; }
.cxcard:hover { border-color: var(--keep); }
.cxmine { margin: 0 0 0.6rem; display: grid; gap: 0.4rem; }
.cxuse.on { border-color: var(--keep); color: var(--keep); }
.cxnotes { display: grid; gap: 0.25rem; margin-top: 0.4rem; font-size: 0.9rem; }
.cardback { cursor: default; background: repeating-linear-gradient(45deg, var(--raise) 0 10px, var(--felt) 10px 20px); border: 2px solid var(--line); }
.settings dt .small { display: block; font-weight: 400; }
.brokercard { width: 140px; }
.brokerbox .handcards { max-height: 60vh; overflow-y: auto; }

/* ---- Accounts, groups and the plain pages */
.widepage { max-width: 60rem; margin: 0 auto; padding: 4vh 16px 3rem; display: grid; gap: 1.1rem; }
.homegrid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); align-items: start; }
.narrow .homegrid { grid-template-columns: 1fr; }
.grow { flex: 1 1 12rem; }
.headrow h1 { margin: 0; }
.foot { max-width: 60rem; margin: 0 auto; padding: 1.5rem 16px 2.5rem; color: var(--dim); font-size: 0.8rem; line-height: 1.5; display: grid; gap: 0.5rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.9rem; }
.foot a { color: var(--dim); }
.foot nav a { color: var(--ink); }
.signpanel { gap: 0.8rem; }
.signbtn { display: flex; align-items: center; justify-content: center; gap: 0.6rem; text-decoration: none; }
.btn.full { width: 100%; }
.brandicon { width: 1.25rem; height: 1.25rem; flex: none; }
.signbtn.discord { background: #5865f2; border-color: #5865f2; color: #fff; }
.signbtn.discord:hover:not(:disabled) { background: #4752c4; border-color: #4752c4; }
.signbtn.google { background: #fff; border-color: #dadce0; color: #1f1f1f; }
.signbtn.google:hover:not(:disabled) { background: #f2f2f2; border-color: #c6c6c6; }
.or { display: flex; align-items: center; gap: 0.7rem; color: var(--dim); font-size: 0.85rem; margin: 0.2rem 0; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.keeplink { margin-right: 0.5rem; font-size: 0.85rem; white-space: nowrap; }
.grouplist li + li, .members li + li { border-top: 1px solid var(--rule); }
.grouplist a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2rem 1rem; padding: 0.7rem 0.2rem; color: var(--ink); text-decoration: none; }
.grouplist a:hover b { text-decoration: underline; }
.mrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.55rem 0.1rem; }
.mrow .who { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.mrow select { max-width: 11rem; }
.avatar { width: 2rem; height: 2rem; border-radius: 50%; flex: none; display: inline-grid; place-items: center; object-fit: cover; background: var(--raise); color: var(--ink); font-weight: 700; font-size: 0.9rem; }
.badge { font-size: 0.72rem; padding: 0.1rem 0.45rem; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); }
input.invite { width: 100%; font-size: 0.9rem; }
.prose { line-height: 1.6; }
.prose ul { padding-left: 1.2rem; display: grid; gap: 0.4rem; list-style: disc; }
.prose h2 { margin-top: 0.6rem; }
.facts { display: grid; gap: 0.3rem; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; user-select: all; }
.keeplink .short { display: none; }
@media (max-width: 860px) {
  .keeplink .long { display: none; }
  .keeplink .short { display: inline; }
}

/* ---- The Ko-fi button: warm and easy to spot, without shouting */
.btn.tipbtn { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; background: #9a6a17; border-color: #9a6a17; color: #fff; }
.btn.tipbtn:hover:not(:disabled) { background: #b07c1f; border-color: #b07c1f; }
.tipbtn .cup { width: 1.2rem; height: 1.2rem; flex: none; }
.foot .btn.tipbtn { color: #fff; padding: 0.3rem 0.8rem; font-size: 0.85rem; }
.tippanel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1.2rem; }
.tippanel > div { flex: 1 1 16rem; }
.tippanel h2 { margin-bottom: 0.2rem; }
.thanks { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; margin: 0.4rem 0 0.8rem; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--felt); font-size: 0.95rem; }
.thanks > span:first-child { flex: 1 1 18rem; }
.stack0 { display: grid; gap: 0.15rem; }

/* ---- Plain pages on a wide screen. Each is one column on a phone and opens up from 900px. */
.page-home, .page-sign, .page-two, .page-prose { margin: 0 auto; padding: 4vh 16px 3rem; display: grid; gap: 1.1rem; align-content: start; }
.page-home { max-width: 72rem; }
.page-two { max-width: 66rem; }
.page-two .col { display: grid; gap: 1.1rem; align-content: start; }
.page-prose { max-width: 46rem; }
.page-sign { max-width: 68rem; }

/* Start page: the command bar on top, drafts beside groups below. */
.cmdbar { display: grid; gap: 0.9rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(135deg, var(--raise), var(--felt)); }
.cmdbar h1 { margin: 0; font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.4rem); }
.cmdbar .hi { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.cmd { display: grid; gap: 0.8rem; }
.cmdpart { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; }
.cmdpart label { flex: 1 1 10rem; }
.cmdpart .codebox { flex: 1 1 8rem; }
.cmd .sep { display: none; }
.cmdnote { margin: 0; }
.home-cols { display: grid; gap: 1.1rem; align-items: start; }
.home-cols aside { display: grid; gap: 1.1rem; }

/* Sign-in: welcome and features, with the sign-in box beside them. */
.page-sign { grid-template-areas: "hero" "sign" "more"; }
.s-hero { grid-area: hero; }
.s-sign { grid-area: sign; }
.s-more { grid-area: more; }
.feat { display: grid; gap: 0.8rem; }
.feat div { display: grid; gap: 0.1rem; border-left: 3px solid var(--keep); padding-left: 0.8rem; }
.joinmini { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; }
.joinmini label { flex: 1 1 12rem; }

@media (min-width: 900px) {
  .page-two { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
  .page-two > h1, .page-two > .lede { grid-column: 1 / -1; }
  .home-cols { grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.4rem; }
  .page-sign { grid-template-columns: minmax(0, 1.1fr) 26rem; grid-template-areas: "hero sign" "more sign"; column-gap: 3rem; padding-top: 8vh; align-items: start; }
  .s-hero { align-self: end; }
  .feat { grid-template-columns: 1fr 1fr; gap: 1rem 1.4rem; }
  .s-more .joinmini { max-width: 26rem; }
}

/* Medium windows: start and join side by side under the greeting. */
@media (min-width: 700px) {
  .cmd { grid-template-columns: 1fr 1fr; align-items: end; }
  .cmdpart .btn { white-space: nowrap; }
}
/* Wide windows: everything in one line. */
@media (min-width: 1150px) {
  .cmdbar { grid-template-columns: auto 1fr; align-items: center; padding: 1.3rem 1.5rem; column-gap: 2rem; }
  .cmd { display: flex; justify-content: flex-end; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
  .cmd .sep { display: block; width: 1px; align-self: stretch; background: var(--line); }
  .cmdpart { flex-wrap: nowrap; }
  .cmdpart label { flex: 0 1 15rem; min-width: 11rem; }
  .cmdpart .codebox { flex: 0 1 9rem; min-width: 8rem; }
  .cmdnote { grid-column: 1 / -1; }
  .cmdpart .btn { white-space: nowrap; }
}
.cmdpart select, .cmdpart input { width: 100%; }