/* Question pages (Would You Rather and This or That lists): hubs.css layout, the game's plum-and-cream table for the random card,
   and long numbered lists that stay easy to scan. */
.hb[data-hub=questions]{--hb-tint:#f8eef3;--hb-tint2:#eef6f1;--hb-accent:#8a2b56;--hb-deep:#3a1632;--hb-soft:#ecd3df;--qp-cream:#fff8ef;--qp-peach:#fcebd8;--qp-mint:#dcefe5}
.qp .hb-hero{grid-template-columns:minmax(0,1fr) minmax(0,.95fr)}
.qp .hb-hero h1{font-size:clamp(40px,4.6vw,64px)}
.qp .hb-crumbs{flex-wrap:wrap;row-gap:6px}.qp .hb-crumbs>*{white-space:nowrap}
.qp-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-bottom:16px}
.qp-acts .button{min-height:54px;padding:14px 26px;font-size:16px}
.qp-link{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:15px;border-bottom:1px solid currentColor;line-height:1.3}
.qp-plain{font-size:14.5px;color:#4a4560;max-width:520px}.qp-plain a{border-bottom:1px solid currentColor;font-weight:700}
/* The random card: a little game table */
.qp-draw{position:relative;border-radius:28px;padding:26px 26px 22px;background:#2b1530 url('/assets/social/conversation-table-v1.webp') center/cover;color:#fff6fa;box-shadow:0 30px 60px -28px rgba(32,27,56,.55);isolation:isolate;min-width:0}
.qp-draw::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(43,21,48,.35),rgba(43,21,48,.7));z-index:-1}
.qp-draw-card{background:var(--qp-cream);color:#2c1d35;border-radius:20px;padding:22px 20px 18px;box-shadow:3px 6px 0 #b49bbc,7px 13px 24px rgba(16,3,21,.35)}
.qp-draw-ask{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.2vw,28px);letter-spacing:-.03em;text-align:center;margin-bottom:16px}
.qp-draw-opts{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch}
.qp-opt{display:flex;flex-direction:column;gap:10px;padding:16px 14px;border-radius:16px;background:linear-gradient(160deg,#fffaf2,var(--qp-peach));box-shadow:0 5px 0 #d8c1ac;min-height:116px;transform:rotate(-.6deg)}
.qp-opt--b{background:linear-gradient(160deg,#f3fbf7,var(--qp-mint));box-shadow:0 5px 0 #a9cbbd;transform:rotate(.6deg)}
.qp-opt span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid #2c1d35;font-size:13px;font-weight:800}
.qp-opt b{font-family:var(--display);font-size:clamp(17px,1.5vw,20px);line-height:1.25;letter-spacing:-.01em;text-wrap:balance;overflow-wrap:anywhere}
.qp-or{align-self:center;font-weight:800;font-size:14px;color:#6c5a72}
.qp-draw-after{margin-top:16px;font-size:14.5px;color:#4a3f55;text-align:center}.qp-draw-after span:first-child{font-weight:800}
.qp-draw-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;margin-top:20px}
.qp-next{min-height:48px;padding:12px 22px;border-radius:99px;background:#f3c560;color:#2c1d35;font-weight:800;font-size:15px;box-shadow:0 4px 0 #b88b2e;transition:transform .15s}
.qp-next:hover{transform:translateY(-2px)}.qp-next:active{transform:translateY(2px);box-shadow:0 2px 0 #b88b2e}
.qp-next:focus-visible,.qp-draw-room:focus-visible{outline:3px solid #fff;outline-offset:4px}
.qp-draw-room{display:inline-flex;align-items:center;min-height:44px;font-weight:800;font-size:15px;color:#fff;border-bottom:1.5px solid currentColor;line-height:1.3}
.qp-draw-card.is-new{animation:qp-deal .42s cubic-bezier(.2,.8,.2,1)}
@keyframes qp-deal{from{opacity:.2;transform:translateY(10px) rotate(-1.2deg)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.qp-draw-card.is-new{animation:none}.qp-opt,.qp-opt--b{transform:none}}
/* The lists */
.qp-lists{padding-top:40px!important}
.qp-part{padding:44px 0 36px;border-top:1px solid var(--line)}.qp-part:first-child{border-top:0}
.qp-part-head{max-width:760px;margin-bottom:22px}
.qp-part-head h2{font-size:clamp(28px,2.8vw,40px);line-height:1.08;margin-bottom:10px}
.qp-part-head p{font-size:16.5px;color:#4a4560;line-height:1.6}.qp-part-head p a{border-bottom:1px solid currentColor;font-weight:700}
.qp h2 small,.qp h3 small{font-family:var(--body);font-size:15px;font-weight:700;letter-spacing:0;color:var(--hb-accent);background:var(--hb-tint);border-radius:99px;padding:3px 10px;vertical-align:.35em;margin-left:4px}
.qp-part-head--thumb{max-width:none;display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:22px 32px;align-items:center}
.qp-part-head--thumb>div{max-width:680px}
.qp-thumb{display:block;border-radius:18px;overflow:hidden;aspect-ratio:3/2;background:var(--hb-soft);box-shadow:0 18px 30px -22px rgba(32,27,56,.6)}
.qp-thumb img{width:100%;height:100%;object-fit:cover}
.qp-more{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-weight:800;font-size:15px;color:var(--hb-accent);border-bottom:1.5px solid currentColor;line-height:1.3}
.qp-part h3{font-size:22px;margin:30px 0 12px;letter-spacing:-.02em}.qp-part-head+h3{margin-top:8px}
.qp-list{margin:0;padding:0 0 0 2.6em;columns:2;column-gap:56px;font-size:17px;line-height:1.5}
.qp-list li{break-inside:avoid;padding:10px 0 12px 6px;border-bottom:1px solid #efeaf0}
.qp-list li::marker{color:var(--hb-accent);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.qp-list b{font-weight:700;color:#201b38}
/* How to play, with the real game picture */
.qp-how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 64px;align-items:center}
.qp-how-art{margin:0;border-radius:24px;overflow:hidden;aspect-ratio:3/2;background:var(--hb-soft);box-shadow:0 30px 60px -30px rgba(32,27,56,.5)}
.qp-how-art img{width:100%;height:100%;object-fit:cover}
.qp-how h2{font-size:clamp(28px,2.8vw,40px);margin-bottom:20px}
.qp-steps{list-style:none;margin:0 0 18px;padding:0;counter-reset:s;display:grid;gap:14px}
.qp-steps li{counter-increment:s;position:relative;padding-left:48px;font-size:16px;line-height:1.55;color:#3b3650}
.qp-steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:50%;background:var(--hb-accent);color:#fff;font-weight:800;font-size:14px;display:grid;place-items:center}
.qp-steps b{color:var(--ink)}
.qp-no-phones{font-size:15px;color:#4a4560;margin-bottom:22px}
/* Printable cards */
.qp-print{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px 64px;align-items:center;background:var(--hb-tint2);border-radius:32px;width:min(calc(100% - 12%),1320px);max-width:none;padding:56px 64px!important;margin:24px auto}
.qp-print h2{font-size:clamp(28px,2.8vw,40px);margin-bottom:14px}
.qp-print p{font-size:16.5px;color:#3b3650;max-width:560px}
.qp-dl{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 12px}
.qp .qp-secondary{background:#fff;color:var(--ink);border-color:var(--ink)}
.qp-small{font-size:14px!important;color:#5c5770!important}
.qp-print-art{margin:0;display:grid;place-items:center;padding:12px}
.qp-print-art img{width:min(100%,340px);border-radius:4px;background:#fff;box-shadow:0 22px 40px -18px rgba(32,27,56,.5);transform:rotate(-2deg)}
/* More lists */
.qp-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.qp-tile{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff;transition:transform .2s,box-shadow .2s}
.qp-tile:hover{transform:translateY(-3px);box-shadow:0 22px 40px -26px rgba(32,27,56,.5)}
.qp-tile>a{display:block;aspect-ratio:3/2;background:var(--hb-soft)}.qp-tile>a img{width:100%;height:100%;object-fit:cover}
.qp-tile>div{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.qp-tile h3{font-size:19px;margin-bottom:8px}.qp-tile h3 a:hover{color:var(--hb-accent)}
.qp-tile p{font-size:14.5px;color:#3b3650;line-height:1.5;margin-bottom:14px}
.qp-tile-price{margin-top:auto;font-size:13.5px;font-weight:800;color:#17633f}
.qp-next-lists .hb-head p a{border-bottom:1px solid currentColor;font-weight:700}
.qp-plus h2{max-width:720px}
@media (max-width:1100px){.qp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
 .qp .hb-hero{grid-template-columns:minmax(0,1fr);gap:28px}
 .qp-how,.qp-print{grid-template-columns:minmax(0,1fr)}
 .qp-print{padding:36px 24px!important;width:calc(100% - 32px);border-radius:24px}
 .qp-print-art{order:-1}.qp-print-art img{width:min(70%,260px)}
 .qp-list{columns:1}
 .qp-part-head--thumb{grid-template-columns:minmax(0,1fr)}
 .qp-part-head--thumb .qp-thumb{max-width:420px}
}
@media (max-width:600px){
 .qp .hb-hero h1{font-size:40px}
 .qp-draw{padding:18px 14px 16px;border-radius:22px}
 .qp-draw-card{padding:18px 12px 14px}
 .qp-draw-opts{grid-template-columns:minmax(0,1fr);gap:8px}
 .qp-opt{min-height:0;flex-direction:row;align-items:center;padding:14px 12px}
 .qp-opt span{flex:0 0 auto}
 .qp-or{justify-self:center}
 .qp-acts .button{width:100%}
 .qp-list{padding-left:2.2em;font-size:16.5px}
 .qp-tiles{grid-template-columns:minmax(0,1fr);gap:14px}
 .qp-tile{flex-direction:row;align-items:stretch;border-radius:18px}.qp-tile>a{flex:0 0 112px;aspect-ratio:auto}.qp-tile>div{padding:14px 14px 14px}
 .qp-tile h3{font-size:17px;margin-bottom:4px}.qp-tile p{font-size:14px;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
 .qp-part{padding:34px 0 28px}
 .qp-thumb{display:none}
}