:root{
  --bg:#0a0806; --surface:#131009; --card:#1a1510; --border:#2e2418;
  --gold:#c9a84c; --gold-dim:#7a6230; --cream:#f0e8d8; --muted:#8a7a62;
  --red:#c94c4c; --green:#4cad7a; --fade-ms:340;
  /* muted framing tints for the two lists — present, not shouting */
  --keep-line:rgba(76,173,122,.34); --keep-wash:rgba(76,173,122,.05); --keep-ink:#7cc39c;
  --cut-line:rgba(201,76,76,.30);  --cut-wash:rgba(201,76,76,.045); --cut-ink:#c58b8b;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg); color:var(--cream); min-height:100vh;
  font-family:'Cormorant Garamond',Georgia,serif; font-size:17px;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(201,168,76,.05), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(201,168,76,.035), transparent 55%);
  background-attachment:fixed; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;font-weight:400}
a{color:var(--gold);text-decoration:none}
kbd{font-family:inherit;font-size:.8em;border:1px solid var(--border);background:var(--card);
  border-radius:2px;padding:1px 6px;color:var(--gold)}
button,input{font-family:inherit;font-size:1rem}

.top{display:flex;justify-content:space-between;align-items:center;
  padding:16px 28px;border-bottom:1px solid var(--border);position:sticky;top:0;
  background:rgba(10,8,6,.94);backdrop-filter:blur(8px);z-index:20}
.brand{font-family:'Playfair Display',serif;font-size:1.15rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cream)}
.who{font-size:.86rem;color:var(--muted);display:flex;align-items:center;gap:12px}
.who img{width:26px;height:26px;border-radius:50%;border:1px solid var(--border)}

.screen{display:none}
.screen.active{display:block}
.wrap{max-width:960px;margin:0 auto;padding:52px 28px 90px}
.wrap.wide{max-width:1180px}
.eyebrow{font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:12px}
h1{font-size:2.6rem;letter-spacing:.05em;margin-bottom:10px;line-height:1.15}
h1 .sub{color:var(--gold);font-style:italic;font-family:'Cormorant Garamond',serif;font-size:.72em}
.lede{color:var(--muted);font-size:1.1rem;max-width:62ch;line-height:1.6;margin-bottom:32px}

.panel{background:var(--surface);border:1px solid var(--border);border-radius:2px;
  padding:22px 24px;margin-bottom:20px}
.panel h3{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-dim);margin-bottom:14px}
.note{font-size:.9rem;color:var(--muted);line-height:1.6;margin-top:12px}
.note b{color:var(--cream);font-weight:600}
.note.err{color:var(--red)}
.note.ok{color:var(--green)}

.input{background:var(--card);border:1px solid var(--border);color:var(--cream);
  border-radius:2px;padding:11px 14px;min-width:280px;flex:1}
.input:focus{outline:none;border-color:var(--gold)}
.field-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.btn{background:var(--card);color:var(--cream);border:1px solid var(--border);border-radius:2px;
  padding:12px 26px;letter-spacing:.14em;text-transform:uppercase;font-size:.68rem;
  cursor:pointer;transition:all .18s ease}
.btn:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.btn.primary{background:var(--gold);color:#0a0806;border-color:var(--gold);font-weight:600}
.btn.primary:hover{background:var(--cream);border-color:var(--cream);color:#0a0806}
.btn.danger:hover{border-color:var(--red);color:var(--red)}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:8px 0 22px}

label.check,label.radio{display:flex;gap:11px;align-items:flex-start;padding:9px 0;
  cursor:pointer;line-height:1.5;font-size:.98rem}
label.check input,label.radio input{margin-top:5px;accent-color:var(--gold)}
label.check span b,label.radio span b{color:var(--cream)}
label.check span,label.radio span{color:var(--muted)}
.sub-field{margin:4px 0 10px 26px;display:flex;gap:8px;align-items:center;font-size:.9rem;color:var(--muted)}
.sub-field input{width:88px;min-width:0;padding:6px 9px}

/* ── the page-by-page wizard ──────────────────────────────────────────
   One question per page, answered in big type. The headline is the question;
   the two numbers under it are the whole point of the screen. */
.btn.ghost{background:none;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{border-color:transparent;color:var(--gold)}

#s-wizard h1,#s-families h1{font-size:3.4rem;line-height:1.1;margin-bottom:16px;max-width:20ch}
/* Key numbers — the count, the comparisons, the time. In prose they carry the
   whole message, so they get the accent colour and weight rather than sinking
   into the muted grey around them. */
#s-wizard .num,#s-families .num{color:var(--gold);font-weight:600}
#s-wizard h1 .num,#s-families h1 .num{font-family:'Playfair Display',serif;font-weight:500}
.tally .sub .num{color:var(--cream);font-weight:600}
#s-wizard .lede,#s-families .lede{font-size:1.18rem;max-width:60ch;margin-bottom:34px}

.tally{display:flex;align-items:flex-start;gap:26px;flex-wrap:wrap;
  border:1px solid var(--border);border-left:2px solid var(--gold-dim);
  background:var(--surface);border-radius:2px;padding:26px 30px;margin-bottom:26px}
.tally .cell{display:flex;flex-direction:column;gap:3px;min-width:150px}
.tally .n{font-family:'Playfair Display',serif;font-size:3.4rem;line-height:1;
  color:var(--muted);transition:color .18s ease}
.tally .l{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dim)}
.tally .sub{font-size:.88rem;color:var(--muted);line-height:1.5;margin-top:8px}
.tally .cell.after .n{color:var(--gold)}
.tally .arrow{color:var(--gold-dim);font-size:2rem;line-height:1;align-self:center}
.tally .delta{margin-left:auto;align-self:center;font-size:.8rem;letter-spacing:.1em;
  color:var(--red);border:1px solid rgba(201,76,76,.4);border-radius:2px;padding:4px 11px;
  white-space:nowrap}
.tally .delta.none{color:var(--muted);border-color:var(--border)}
.tally.final{border-left-color:var(--gold)}
.tally.final .n{color:var(--gold);font-size:4rem}

/* The rating floor is a slider, and it sits inside the panel it moves — right
   beside the projected count, so dragging it and watching the number is one
   glance rather than two. The cell becomes a grid to put it there. */
.stat.after.has-extra .cell{display:grid;column-gap:20px;align-items:center;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"n extra" "l extra" "sub sub"}
.stat.after.has-extra .n{grid-area:n}
.stat.after.has-extra .l{grid-area:l;align-self:start}
.stat.after.has-extra .sub{grid-area:sub}
#wiz-extra{grid-area:extra}
#wiz-extra:empty{display:none}

/* The projected count moves with the thumb, so dragging it is the fastest way
   to see what any bar costs. */
.sub-field.slider{margin:0;gap:12px;font-size:.95rem;flex-wrap:nowrap;
  align-items:center;white-space:nowrap;justify-content:flex-end}
.sub-field.slider .unit{color:var(--gold-dim);font-size:.85rem}
.sub-field.slider input[type=range]{flex:1 1 60px;width:auto;min-width:60px;
  accent-color:var(--gold);background:none;border:none;padding:0;cursor:pointer}
.sub-field.slider .out{font-family:'Playfair Display',serif;font-size:1.7rem;
  line-height:1;color:var(--gold);min-width:1.6ch;text-align:right}

/* ── the answer: two columns, each a number over the button that makes it ──
   Left is the exclude-nothing side and never shrinks. Right is the cut, and
   carries Next so the key you press to move on sits under the outcome. */
.panel.bare{background:none;border:none;padding:0}
.wiz-choice{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;
  grid-template-areas:"keep cut" "keepbtn cutbtn" ". next"}
.a-keep{grid-area:keep} .a-cut{grid-area:cut}
.a-keepbtn{grid-area:keepbtn} .a-cutbtn{grid-area:cutbtn}
#wiz-extra{grid-area:extra}
#wiz-extra:empty{display:none}
#wiz-next-slot{grid-area:next}

.stat{border:1px solid var(--border);border-left:2px solid var(--gold-dim);
  background:var(--surface);border-radius:2px;padding:22px 24px;
  display:flex;flex-direction:column;gap:3px}
.stat.after{border-left-color:var(--gold)}
.stat.after.same{border-left-color:var(--border);opacity:.72}
.stat .cell{display:flex;flex-direction:column;gap:3px}
.stat .n{font-family:'Playfair Display',serif;font-size:3.4rem;line-height:1;
  color:var(--muted);transition:color .18s ease}
.stat.after .n{color:var(--gold)}
.stat.after.same .n{color:var(--muted)}
.stat .l{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dim)}
.stat .sub{font-size:.88rem;color:var(--muted);line-height:1.5;margin-top:8px}
.stat .sub .num{color:var(--cream);font-weight:600}
.stat .delta{align-self:flex-start;margin-top:14px;font-size:.8rem;letter-spacing:.1em;
  color:var(--red);border:1px solid rgba(201,76,76,.4);border-radius:2px;padding:4px 11px;
  white-space:nowrap}
.stat .delta.none{color:var(--muted);border-color:var(--border)}

/* Buttons that read as buttons: warm fill, not a bordered panel. */
.wiz-opt{display:flex;flex-direction:column;gap:9px;align-items:flex-start;
  background:linear-gradient(180deg,rgba(201,168,76,.22),rgba(201,168,76,.10));
  border:1px solid var(--gold-dim);border-radius:2px;color:var(--gold);
  cursor:pointer;padding:18px 22px;text-align:left;
  font-family:'Cormorant Garamond',Georgia,serif;font-size:1.28rem;font-weight:600;
  line-height:1.25;transition:all .16s ease}
.wiz-opt:hover{background:linear-gradient(180deg,rgba(201,168,76,.34),rgba(201,168,76,.18));
  border-color:var(--gold);color:var(--cream);transform:translateY(-2px)}
.wiz-opt.on{background:var(--gold);border-color:var(--gold);color:#0a0806;
  box-shadow:0 0 30px rgba(201,168,76,.22)}
.wiz-opt .rec{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-dim);border:1px solid var(--gold-dim);border-radius:2px;padding:3px 8px;
  font-weight:400}
.wiz-opt.on .rec{color:rgba(10,8,6,.62);border-color:rgba(10,8,6,.3)}

/* Next is cool and inert until the page has an answer. */
#wiz-next-slot .btn{width:100%}
.btn.cool{background:none;border-color:var(--border);color:var(--muted);
  opacity:1;cursor:not-allowed}
.btn.cool:hover{border-color:var(--border);color:var(--muted);transform:none}

.tally .cell{display:flex;flex-direction:column;gap:3px;min-width:150px}
.tally.moot{border-left-color:var(--border);opacity:.72}
.note.moot-note{margin:-14px 0 26px;color:var(--gold-dim)}

@media (max-width:720px){
  .wiz-choice{grid-template-columns:1fr;
    grid-template-areas:"keep" "keepbtn" "cut" "cutbtn" "next"}
}

.wiz-dots{display:flex;gap:8px;align-items:center}
.wiz-dot{width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  background:none;border:1px solid var(--gold-dim);transition:all .18s ease}
.wiz-dot:hover{border-color:var(--gold)}
.wiz-dot.on{background:var(--gold);border-color:var(--gold)}

.wiz-sum{display:flex;align-items:center;gap:14px;padding:10px 0;
  border-bottom:1px solid rgba(46,36,24,.6)}
.wiz-sum:last-child{border-bottom:none}
.wiz-sum .t{color:var(--cream)}
.wiz-sum .v{margin-left:auto;font-size:.85rem;color:var(--gold)}
.wiz-sum.off .v{color:var(--muted)}

@media (max-width:720px){
  #s-wizard h1{font-size:2.4rem}
  .tally .n{font-size:2.6rem}
  .tally .arrow{transform:rotate(90deg)}
  .tally .delta{margin-left:0}
}

/* The running cost of the list, one line, updated as games move across. */
.stat-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px;
  border:1px solid var(--border);border-left:2px solid var(--gold-dim);
  background:var(--surface);border-radius:2px;padding:14px 20px;margin:0 0 22px;
  font-size:1.05rem;color:var(--muted)}
.stat-line .num{color:var(--gold);font-weight:600}
.stat-line .sep{color:var(--gold-dim);margin:0 12px}

/* ── whose taste do you share? ──────────────────────────────────────── */
.panel.taste{border-left:2px solid var(--gold-dim)}
/* The two numbers travel together in .tr-nums, so this stays a three-column
   grid whatever the panel's width — in a narrow sidebar the pair drops under
   the name instead of each number wrapping on its own. */
.taste-row{display:grid;grid-template-columns:2.2rem 1fr auto;gap:18px;
  align-items:center;padding:14px 0;border-bottom:1px solid rgba(46,36,24,.6)}
.taste-row:last-of-type{border-bottom:none}
.tr-rank{font-family:'Playfair Display',serif;font-size:1.5rem;color:var(--gold-dim);
  text-align:right}
.tr-name{font-family:'Playfair Display',serif;font-size:1.35rem;color:var(--cream)}
.tr-name a{color:var(--cream);border-bottom:1px solid var(--gold-dim)}
.tr-name a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.tr-outlet{font-size:.82rem;letter-spacing:.06em;color:var(--gold-dim);margin-top:2px}
.tr-ev{font-size:.9rem;color:var(--muted);margin-top:6px;line-height:1.5}
.tr-ev b{color:var(--cream);font-weight:600}
/* A game name with a video behind it is a link; one without still reads the
   same, so a missing URL is a missing underline rather than a missing name. */
.tr-ev a.g-link{border-bottom:1px solid rgba(201,168,76,.35)}
.tr-ev a.g-link:hover b{color:var(--gold)}
.tr-ev a.g-link:hover{border-bottom-color:var(--gold)}
.tr-outlet a.quiet{color:var(--gold-dim);border-bottom:1px solid rgba(122,98,48,.5)}
.tr-outlet a.quiet:hover{color:var(--gold)}
.tr-nums{display:flex;gap:16px}
.tr-num{display:flex;flex-direction:column;align-items:center;min-width:56px}
.tr-num .n{font-family:'Playfair Display',serif;font-size:1.7rem;line-height:1;color:var(--gold)}
.tr-num .l{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-dim);margin-top:4px}
.tr-num.neg .n{color:var(--cut-ink)}
/* A thin match is still a match — it is shown, but labelled, so a reviewer who
   only shares four games can't be mistaken for one who shares forty. */
.thin-tag{display:inline-block;font-size:.68rem;letter-spacing:.06em;
  color:var(--muted);border:1px solid var(--border);border-radius:2px;
  padding:1px 6px;margin-left:2px;white-space:nowrap}
/* An audience poll is the middle of a crowd — worth matching, but not someone
   you can go and follow, so it is marked rather than dressed as a reviewer. */
.thin-tag.poll{color:var(--gold-dim);border-color:var(--gold-dim)}
@media (max-width:720px){
  .taste-row{grid-template-columns:1.8rem 1fr;gap:10px}
  .tr-nums{grid-column:2;margin-top:6px}
  .tr-num{flex-direction:row;gap:8px;align-items:baseline;min-width:0}
}

/* ── same game, different hat ───────────────────────────────────────── */
/* The members are shown as a radio list rather than a row of cards: the
   question is "which of these speaks for the rest", and a list makes the
   comparison — your rating, your plays — read down a column. */
.fam-list{display:flex;flex-direction:column;gap:2px;margin-bottom:22px}
.fam-row{display:grid;grid-template-columns:18px 46px 1fr auto;gap:14px;
  align-items:center;padding:9px 12px;border:1px solid transparent;
  border-radius:2px;cursor:pointer}
.fam-row:hover{background:var(--card)}
.fam-row.on{border-color:var(--gold-dim);background:var(--keep-wash)}
.fam-row input{accent-color:var(--gold);width:15px;height:15px}
.fam-row img{width:46px;height:46px;object-fit:contain;background:#100d09;border-radius:2px}
.fam-row .noart{width:46px;height:46px;background:#100d09;border-radius:2px;
  border:1px solid var(--border)}
.fam-row .fn{font-family:'Playfair Display',serif;font-size:1.12rem;color:var(--cream)}
.fam-row .fy{color:var(--gold-dim);font-size:.85rem}
.fam-row .fm{font-size:.8rem;color:var(--muted);white-space:nowrap}
.fam-row.on .fm{color:var(--keep-ink)}
/* No numbers above the buttons on this page — the cost is one line at the top,
   because a family collapses by a game or two and a full before/after pair
   would be two big numbers one apart. */
.fam-choice{grid-template-areas:"keepbtn cutbtn" ". next"}
#fam-outcome{margin-top:18px}

@media (max-width:720px){
  .fam-row{grid-template-columns:18px 36px 1fr;gap:10px}
  .fam-row img,.fam-row .noart{width:36px;height:36px}
  .fam-row .fm{grid-column:3;font-size:.75rem}
}

/* ── the welcome question ─────────────────────────────────────────────
   The two outcomes are framed the same way the two lists are on the filter
   screen: the one that keeps less is the red-edged column, the one that keeps
   more is green. Below the buttons rather than above them, because the choice
   is the headline and this is the small print that justifies it. */
#s-welcome .two-lists{margin-top:26px}
.welcome-cols .list-col h3{font-size:1.25rem;margin-bottom:6px}
.welcome-cols .note{margin-top:8px}
#welcome-choice{margin-top:8px}
#welcome-note:empty{display:none}

/* ── saved rankings ─────────────────────────────────────────────────── */
.saved-row{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:11px 0;border-bottom:1px solid rgba(46,36,24,.6)}
.saved-row .t{color:var(--cream)}
.saved-row .m{font-size:.8rem;color:var(--muted)}

/* ── two lists ──────────────────────────────────────────────────────── */
.two-lists{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0}
/* Each list is framed in its own colour so which side you are looking at is
   never a question — green keeps, red drops, both washed well back so they read
   as stationery rather than an alert. */
.list-col{border:1px solid var(--border);border-radius:2px;padding:16px 18px 18px}
.list-col.in{border-color:var(--keep-line);background:var(--keep-wash)}
.list-col.out{border-color:var(--cut-line);background:var(--cut-wash)}
.list-col h3{font-family:'Playfair Display',serif;font-weight:400;font-size:1.55rem;
  letter-spacing:.01em;text-transform:none;color:var(--cream);margin-bottom:14px;
  display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.list-col.in h3{color:var(--keep-ink)}
.list-col.out h3{color:var(--cut-ink)}
.list-col .count{font-family:'Playfair Display',serif;font-size:1.55rem;color:var(--muted)}
.list-col.in .count{color:var(--keep-ink)}
.list-col.out .count{color:var(--cut-ink)}
.game-list{border:1px solid var(--border);border-radius:2px;background:var(--surface);
  max-height:46vh;overflow-y:auto}
/* The excluded rows carry a reason rather than metadata, so tint it to read
   as an annotation instead of as more of the same. */
.list-col.out .gr-m{color:var(--cut-ink);opacity:.78}
.list-col.out .game-row > .gr-m:last-child{color:var(--muted);opacity:1}
.list-col.in .game-list{border-color:rgba(76,173,122,.2)}
.list-col.out .game-list{border-color:rgba(201,76,76,.18)}
.game-row{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;
  padding:6px 10px;cursor:pointer;border-bottom:1px solid rgba(46,36,24,.5);font-size:.9rem}
.game-row:hover{background:var(--card)}
.game-row img{width:34px;height:34px;object-fit:contain;background:#100d09;border-radius:2px}
.game-row .gr-n{color:var(--cream);line-height:1.25}
.game-row .gr-m{font-size:.76rem;color:var(--muted)}
.search-results{margin:6px 0 0}
.search-results .game-row{border:1px solid var(--border);border-bottom:none;background:var(--surface)}
.search-results .game-row:last-child{border-bottom:1px solid var(--border)}

/* ── compare ────────────────────────────────────────────────────────── */
.cmp{display:grid;grid-template-columns:1fr 290px;min-height:calc(100vh - 59px)}
.cmp-main{padding:24px 30px 34px;display:flex;flex-direction:column}
.bar{height:2px;background:var(--card);border-radius:2px;overflow:hidden;margin-bottom:16px}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold));
  width:0%;transition:width .35s ease}
.cmp-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.cmp-title{font-family:'Playfair Display',serif;font-size:1.24rem;letter-spacing:.04em}
.cmp-title em{color:var(--gold);font-style:italic}
.cmp-meta{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.cards{display:grid;grid-template-columns:1fr 58px 1fr;align-items:center;flex:1;
  max-width:1060px;width:100%;margin:12px auto 0}
.vs{text-align:center;color:var(--gold-dim);font-family:'Playfair Display',serif;
  font-style:italic;font-size:1.1rem}
.card{position:relative;cursor:pointer;border:1px solid var(--border);border-radius:2px;
  overflow:hidden;background:var(--card);aspect-ratio:1/1;max-height:60vh;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 10px 34px rgba(201,168,76,.12)}
.card.chosen{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 44px rgba(201,168,76,.3)}
.card.fading{opacity:0;transition:opacity var(--fade-ms)ms ease}
.art-blur{position:absolute;inset:-24px;background-size:cover;background-position:center;
  filter:blur(26px) saturate(.7);opacity:.42}
.art{position:absolute;inset:0;background-size:contain;background-position:center;
  background-repeat:no-repeat;opacity:0;transition:opacity .3s ease}
.art.loaded{opacity:1}
.card.no-image .art-blur{background-image:repeating-linear-gradient(45deg,
  rgba(201,168,76,.05) 0,rgba(201,168,76,.05) 1px,transparent 1px,transparent 14px)!important;
  filter:none;opacity:1;inset:0}
/* Stubs have no box art and never will, so the card sets the title in the
   space the art would have filled rather than showing an empty frame. */
.art-plate{position:absolute;inset:0;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;padding:10% 11% 34%;
  text-align:center;z-index:1}
.card.stub .art-plate{display:flex}
.art-plate .pn{font-family:'Playfair Display',serif;font-size:clamp(1.3rem,3.4vw,2.2rem);
  line-height:1.16;color:var(--cream);letter-spacing:.02em}
.art-plate .ps{font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:clamp(.85rem,1.2vw,1rem);color:var(--gold-dim)}
.card.stub .art-blur{background-image:
  radial-gradient(ellipse at 50% 38%,rgba(201,168,76,.10),transparent 62%)!important;
  filter:none;opacity:1;inset:0}

.card-scrim{position:absolute;left:0;right:0;bottom:0;height:56%;
  background:linear-gradient(to top,rgba(10,8,6,.96) 12%,rgba(10,8,6,.78) 46%,transparent)}
.card-label{position:absolute;left:0;right:0;bottom:0;padding:16px 18px 18px}
.card-label .gname{font-family:'Playfair Display',serif;font-size:1.2rem;line-height:1.24;
  text-shadow:0 2px 12px rgba(0,0,0,.9)}
.card-label .gmeta{font-size:.8rem;color:var(--muted);margin-top:6px}
.card-label .gmeta span{color:var(--gold-dim)}
.pick{position:absolute;top:13px;left:15px;font-size:.55rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);opacity:0;transition:opacity .18s ease}
.card:hover .pick{opacity:.85}
/* deliberately small, in the corner, and confirmed — hard to hit by accident */
.drop-btn{position:absolute;top:9px;right:9px;width:26px;height:26px;border-radius:2px;
  background:rgba(10,8,6,.6);border:1px solid var(--border);color:var(--muted);
  cursor:pointer;opacity:0;transition:all .18s ease;font-size:.8rem;line-height:1}
.card:hover .drop-btn{opacity:.55}
.drop-btn:hover{opacity:1!important;border-color:var(--red);color:var(--red)}

.why{text-align:center;margin-top:14px;font-size:.86rem;color:var(--muted);
  line-height:1.5;max-width:800px;margin-left:auto;margin-right:auto;min-height:1.4em}
.why.empty{min-height:0;margin-top:0}
.why .why-k{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-dim);margin-right:8px}
.why b{color:var(--gold);font-weight:400}
.why .why-sep{color:var(--gold-dim);margin:0 6px}
.why .why-caveat{display:block;font-size:.74rem;color:var(--gold-dim);
  font-style:italic;margin-top:5px}

.cmp-foot{text-align:center;margin-top:14px}
.kbd-hint{font-size:.76rem;color:var(--muted)}
.kbd-hint b{color:var(--cream);font-weight:400}
.cmp-sub{font-size:.72rem;color:var(--gold-dim);margin-top:8px}
.mini-row{display:flex;gap:9px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.mini{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:2px;
  padding:7px 15px;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;transition:all .16s ease}
.mini:hover{border-color:var(--gold-dim);color:var(--gold)}
.mini:disabled{opacity:.3;cursor:not-allowed}
.saved-flag{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-dim);margin-top:12px;height:1em}

.side{background:var(--surface);border-left:1px solid var(--border);padding:20px 16px;
  overflow-y:auto;max-height:calc(100vh - 59px);position:sticky;top:59px;font-size:.86rem}
.side-head{font-family:'Playfair Display',serif;font-size:1rem;color:var(--gold);
  letter-spacing:.06em;margin-bottom:4px}
.side-sub{font-size:.78rem;color:var(--muted);line-height:1.45;margin-bottom:12px}
.side-sub.empty{font-style:italic;opacity:.7;margin:6px 0 10px}
.side-foot{font-size:.7rem;color:var(--gold-dim);margin-top:14px;padding-top:10px;
  border-top:1px solid var(--border);line-height:1.4}
.band{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dim);
  margin:16px 0 8px;padding-top:12px;border-top:1px solid var(--border)}

/* one tick per open merge this pass; height = how far that merge has got */
.ticks{display:flex;gap:2px;align-items:flex-end;height:26px;margin-bottom:2px;
  flex-wrap:wrap;overflow:hidden}
.tick{position:relative;flex:1 1 3px;min-width:3px;max-width:9px;height:100%;
  background:var(--card);border-radius:1px;overflow:hidden}
.tick i{position:absolute;bottom:0;left:0;right:0;background:var(--gold-dim);display:block}
.tick.on{background:#2a2214;box-shadow:0 0 0 1px var(--gold)}
.tick.on i{background:var(--gold)}

.side-list{list-style:none}
.side-list li{display:grid;grid-template-columns:20px 1fr;gap:7px;padding:3px 0;
  color:var(--muted);line-height:1.3;font-size:.83rem}
.side-list li .n{color:var(--gold-dim);font-size:.66rem;text-align:right;padding-top:2px;
  font-variant-numeric:tabular-nums}
.side-list li.placed{color:var(--cream)}
.side-list li.just{color:var(--gold);animation:flash 1s ease}
.side-list li.live{color:var(--cream);background:rgba(201,168,76,.07)}
.side-list.log li{grid-template-columns:12px 1fr;align-items:start;padding:4px 0;
  border-bottom:1px solid rgba(46,36,24,.45)}
.side-list.log li .n{color:var(--gold);font-size:.8rem;text-align:left;padding-top:0}
.side-list.log li b{color:var(--cream);font-weight:600}
.side-list.log li .over{color:var(--gold-dim);font-style:italic;font-size:.74rem}
.side-list.log li.just b{color:var(--gold)}
.side-list li.ellipsis{grid-template-columns:1fr;font-size:.68rem;font-style:italic;
  color:var(--gold-dim);opacity:.8;padding:4px 0}
@keyframes flash{0%{background:rgba(201,168,76,.25)}100%{background:transparent}}

/* the two ordered queues being merged; the heads are the cards on screen */
.queues{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px;align-items:start}
.q-note{font-size:.7rem;color:var(--gold-dim);line-height:1.4;margin-top:8px;font-style:italic}
.q{border:1px solid var(--border);border-radius:2px;padding:8px 8px 6px;background:var(--card)}
.q-h{font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dim);
  margin-bottom:6px;display:flex;justify-content:space-between;gap:4px}
.q-h .q-n{color:var(--muted);font-variant-numeric:tabular-nums}
.q ul{list-style:none}
.q li{font-size:.74rem;color:var(--muted);line-height:1.25;padding:2px 0;
  overflow-wrap:anywhere}
.q li.head{color:var(--gold);font-weight:600;
  border-bottom:1px solid var(--gold-dim);padding-bottom:5px;margin-bottom:3px}
.q li.ellipsis{font-style:italic;color:var(--gold-dim);opacity:.7;font-size:.68rem}
.q-empty{font-size:.72rem;font-style:italic;color:var(--gold-dim);opacity:.7}

/* ── results ────────────────────────────────────────────────────────── */
/* The ranking is the answer, so it keeps the left and the width; the taste
   match is commentary on it and sits alongside rather than below, where a long
   ranking would bury it. minmax(0,1fr) — not 1fr — or a wide row inside the
   list would stretch the column and squeeze the sidebar out. */
.res-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);
  gap:34px;align-items:start;margin-top:8px}
.res-main{min-width:0}
/* Sticky so the match stays on screen while you scroll a long ranking; the top
   offset clears the sticky site header. */
.res-side{position:sticky;top:86px;min-width:0}
.res-side .panel{margin:0}
/* The rows are tall in a narrow column, so the position number aligns with the
   name it numbers rather than floating beside the middle of the block. */
.res-side .taste-row{grid-template-columns:1.9rem 1fr;gap:12px;align-items:start}
.res-side .tr-rank{line-height:1.25}
.res-side .tr-nums{grid-column:2;margin-top:8px;gap:22px}
.res-side .tr-num{align-items:flex-start;min-width:0}
.res-side .tr-num .n{font-size:1.45rem}
.res-side .tr-name{font-size:1.2rem}

.rank-list{list-style:none;counter-reset:rank;margin-top:14px}
.rank-row{counter-increment:rank;display:grid;
  grid-template-columns:44px 46px 1fr auto;gap:12px;align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:2px;
  padding:7px 12px;margin-bottom:6px;cursor:grab}
.rank-row.dragging{opacity:.35}
.rank-row.over{border-color:var(--gold)}
.rank-row::before{content:counter(rank);font-family:'Playfair Display',serif;
  color:var(--gold);font-size:1.05rem;text-align:right}
.rank-row img{width:46px;height:46px;object-fit:contain;background:#100d09;border-radius:2px}
.rank-row .rn{color:var(--cream)}

/* ── a collapsed family's favourite ───────────────────────────────────
   Second line, quieter, smaller. It is a footnote about the entry rather than
   part of its name, and at the card's title size the one-line form ran to two
   lines anyway — this at least breaks where the meaning does.
   Sized in `em` so it tracks whatever it is sitting inside: the card title is
   1.2rem, a ranking row is 1rem. */
.fav-of{display:block;font-size:.72em;color:var(--gold-dim);
  letter-spacing:.02em;margin-top:3px;font-style:italic}
.card-label .fav-of{font-size:.66em;margin-top:5px;color:var(--gold)}
.rank-row .rm{font-size:.78rem;color:var(--muted);margin-top:2px}
.row-acts{display:flex;gap:6px;opacity:0;transition:opacity .16s}
.rank-row:hover .row-acts{opacity:1}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--card);border:1px solid var(--gold-dim);color:var(--cream);
  padding:11px 22px;border-radius:2px;font-size:.88rem;opacity:0;pointer-events:none;
  transition:all .25s ease;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:900px){
  .cmp{grid-template-columns:1fr} .side{display:none}
  .cards{grid-template-columns:1fr} .card{max-height:38vh}
  .two-lists{grid-template-columns:1fr} h1{font-size:2rem}
  /* Side by side needs width for both; below that the match follows the
     ranking rather than being squeezed next to it. */
  .res-cols{grid-template-columns:1fr;gap:26px}
  .res-side{position:static}
}

/* ── BoardGameGeek attribution ────────────────────────────────────────
 * Required by the XML API Terms of Use: credit BGG by name as the source of
 * the data, and show the "Powered by BGG" logo linked back to BGG in
 * public-facing use, at a size where the text stays legible.
 *
 * The <img> points at /static/powered-by-bgg.png; if that file is absent it
 * hides itself and the text fallback shows, so attribution is never missing.
 */
.top-right{display:flex;align-items:center;gap:18px}
.bgg-badge{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
/* The logo BGG supplies is a dark navy wordmark with an orange mark, drawn for
   light backgrounds. On this page's near-black ground the wordmark measures
   1.86:1 — invisible — and the terms ask specifically that the text stay
   legible, so simply dropping the file in would satisfy the letter of the
   requirement and fail the point of it.
   So it sits on a cream chip: 8.84:1, the orange keeps its punch, and nothing
   about BGG's artwork is altered. If their folder has a reversed/white variant,
   use that instead and delete the three background lines below. */
.bgg-badge img{height:22px;width:auto;display:block;
  background:var(--cream);border-radius:3px;padding:5px 9px;
  box-sizing:content-box}
.bgg-badge .bgg-fallback{display:none;font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.bgg-badge .bgg-fallback b{color:var(--gold);font-weight:600}
.bgg-badge:hover .bgg-fallback{color:var(--cream)}
.bgg-badge.big img{height:34px;padding:7px 12px}
.bgg-badge.big .bgg-fallback{font-size:.9rem}

.site-foot{border-top:1px solid var(--border);background:var(--surface);
  padding:26px 28px 34px;display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.site-foot p{font-size:.8rem;color:var(--muted);line-height:1.6;max-width:70ch;margin:0}
.site-foot a{color:var(--gold-dim)}
.site-foot a:hover{color:var(--gold)}

@media (max-width:900px){
  .top-right{gap:10px}
  .bgg-badge img{height:18px;padding:4px 7px}
}