/* ═══════════════════════════════════════════════════════════════════════
   Blood & Nectar — QUEST TILES.
   ---------------------------------------------------------------------
   The quest board's tiles, the way Discord's &dq grid lays them out:
   three or four squares to a row, a section per category, the five-
   segment bar the ANSI cell draws (teal in progress, gold ready, green
   claimed), reward lines as the same glyph chips the notifications wear.

   Drawn by /assets/questBoard.js. Worn by /tourney/ (the board itself)
   and by the Vault's right-hand column. Uses the shell's tokens
   (--panel, --border, --gold, --fd …), so the host must load shell.css.
   Bump the ?v= on every host when this changes.
   ═══════════════════════════════════════════════════════════════════════ */

.q-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;}
.q-sec{margin-bottom:22px;}
.q-sec:last-child{margin-bottom:0;}
.q-sec-h{display:flex;align-items:center;gap:10px;margin:0 0 10px;
  font-family:var(--fd);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold-dim);}
.q-sec-h img{width:20px;height:20px;object-fit:contain;filter:grayscale(.35) opacity(.8);}
.q-sec-h::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(200,170,110,.35),transparent);}
.q-sec-h .qc-ready{
  min-width:16px;height:16px;padding:0 4px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:var(--gold);color:#20180a;font-size:9px;font-weight:900;font-family:var(--fu);
}

.q-card{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:6px;
  padding:14px 14px 12px;display:flex;flex-direction:column;gap:8px;min-height:180px;transition:border-color .15s;}
.q-card:hover{border-color:rgba(200,170,110,.45);}
.q-card.flash{animation:bnRowFlash 1.6s ease-out;}
.q-card.ready{border-color:rgba(200,170,110,.6);background:linear-gradient(160deg,rgba(200,170,110,.09),var(--panel));}
.q-card.done{border-color:rgba(122,214,160,.4);background:linear-gradient(160deg,rgba(122,214,160,.05),var(--panel));}
.q-top{display:flex;align-items:center;gap:9px;padding-right:56px;}
.q-ico{font-size:22px;line-height:1;flex:0 0 auto;}
.q-title{font-family:var(--fd);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold-lt);line-height:1.3;}
.q-tag{position:absolute;top:12px;right:12px;font-family:var(--fd);font-size:9px;letter-spacing:1.5px;white-space:nowrap;
  padding:2px 7px;border-radius:3px;border:1px solid var(--border);color:var(--text-d);}
.q-tag.ready{color:var(--gold);border-color:var(--gold);}
.q-tag.done{color:var(--green);border-color:rgba(122,214,160,.4);}
.q-desc{font-size:12px;color:var(--text-m);line-height:1.55;}
/* The five-segment bar the Discord cell draws (▰▰▱▱▱), in three colours:
   teal while in progress, gold when ready to claim, green once claimed. */
.q-prog{display:flex;align-items:center;gap:10px;margin-top:auto;}
.q-seg{display:flex;gap:3px;flex:1;}
.q-seg i{flex:1;height:6px;border-radius:2px;background:rgba(200,170,110,.14);}
.q-seg i.on{background:var(--teal);}
.q-card.ready .q-seg i.on{background:var(--gold);}
.q-card.done .q-seg i.on{background:var(--green);}
.q-count{font-family:var(--fd);font-size:10px;letter-spacing:.5px;color:var(--text-d);white-space:nowrap;}
.q-card.ready .q-count{color:var(--gold);}
.q-card.done .q-count{color:var(--green);}
.q-reward{font-size:11px;color:var(--gold-dim);letter-spacing:.3px;border-top:1px solid var(--border);padding-top:9px;
  display:flex;flex-direction:column;gap:4px;}
.q-missing{display:flex;flex-wrap:wrap;gap:5px;}
.q-card .writ-chip{font-size:11px;letter-spacing:.4px;padding:3px 9px;border-radius:3px;
  background:rgba(138,111,192,.14);border:1px solid rgba(138,111,192,.4);color:#d6c9f0;}
.q-card .writ-chip.more{background:transparent;border-style:dashed;color:var(--text-d);}
.q-vote{display:flex;flex-wrap:wrap;gap:8px;}
.q-vote a{font-size:11px;letter-spacing:.4px;padding:4px 10px;border-radius:3px;text-decoration:none;
  background:rgba(200,170,110,.1);border:1px solid rgba(200,170,110,.35);color:var(--gold-lt);}
.q-vote a:hover{border-color:var(--gold);}

/* A narrow host (the Vault's column) stacks one tile per row and lets them
   be as short as their contents. */
.q-board.narrow .q-grid{grid-template-columns:1fr;gap:8px;}
.q-board.narrow .q-card{min-height:0;padding:11px 12px 10px;}
.q-board.narrow .q-sec{margin-bottom:16px;}

@media(max-width:560px){
  .q-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  .q-card{min-height:0;padding:12px 10px 10px;}
  .q-top{padding-right:0;flex-wrap:wrap;}
  .q-tag{display:none;}
  .q-desc{font-size:11px;}
}