/* ============================================================================
   Game Night personality quiz — /quiz
   One cream playing card on the dark page (styled like the Games picker's cream cards). Its content (intro → questions →
   result) is swapped with a short fade + sideways slide inside a stationary card; the final result is the only full
   card flip. Every state shares one card size at the current width (quiz.js measures the tallest state and the space
   under the header). Type: Newsreader headings, DM Sans body.
   ============================================================================ */
.quiz-page main{padding-bottom:0;min-height:0}                      /* the card is sized to the screen; the footer follows below the fold */
@media(max-width:479px){body.quiz-page main{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}}   /* phones: 16px side gutters so the card (and its answers) get the width */
.quiz-page main > .quiz-wrap,body.quiz-page main > section.quiz-wrap{padding-top:var(--quiz-top,8px);padding-bottom:var(--quiz-bottom,12px)}   /* beats the site-wide first-content gap (36–64px top / 48px bottom) */
@media(max-width:479px){.q-br{display:none}}   /* intro heading: "What’s your Game Night / personality?" where it fits; phones wrap naturally */
@media(min-width:480px) and (min-height:640px){body.quiz-page{--quiz-top:32px}}   /* wider screens: ~24px more room under the header (phones keep 8px); skipped on short windows so the card still fits */
.quiz-wrap{max-width:680px;margin-inline:auto}
.quiz-wrap{--qc-ink:#2a1a14;--qc-muted:#6b5a4e;--qc-gold:#8a6a2e;--qc-frame:rgba(150,110,45,.6);--qc-frame-soft:rgba(150,110,45,.28);
  --qc-crimson:#88142e;--qc-crimson-deep:#5e0f20;--qc-panel-line:rgba(150,110,45,.45)}

/* ---------- the card ---------- */
.deck{position:relative;perspective:1400px}
.card{position:relative;display:flex;flex-direction:column;box-sizing:border-box;border-radius:18px;color:var(--qc-ink);
  background:linear-gradient(180deg,#f6efe2,#efe5d4);border:1px solid var(--qc-frame);          /* warm cream, fine gold frame */
  box-shadow:0 18px 50px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.35);
  padding:22px clamp(18px,4vw,30px) 20px;overflow-wrap:break-word;
  transform-style:preserve-3d;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.card::before{content:"";position:absolute;inset:7px;border-radius:12px;border:1px solid var(--qc-frame-soft);pointer-events:none}   /* subtle inner border */
.card__face{position:relative;flex:1;display:flex;flex-direction:column;min-height:0}
.card__face > .face{flex:1;display:flex;flex-direction:column}
.face--intro{justify-content:center;text-align:center}
.face--q,.face--r{justify-content:flex-start}

/* content transition: the card stays put; its contents fade and slide (180 ms total, direction reversed for Back) */
.card__face.is-out{animation:q-out .09s ease-in both}
.card__face.is-in{animation:q-in .09s ease-out both}
@keyframes q-out{to{opacity:0;transform:translateX(calc(-14px * var(--dir,1)))}}
@keyframes q-in{from{opacity:0;transform:translateX(calc(14px * var(--dir,1)))}to{opacity:1;transform:none}}
/* the one card flip: revealing the result (out to the edge, swap, in from the other edge — the back is never shown) */
.card.is-flip-out{animation:q-flip-out .175s ease-in both}
.card.is-flip-in{animation:q-flip-in .175s ease-out both}
@keyframes q-flip-out{to{transform:rotateY(90deg)}}
@keyframes q-flip-in{from{transform:rotateY(-90deg)}to{transform:none}}

/* measuring copy (never visible) */
.card.q-sizer{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;z-index:-1;min-height:0 !important;height:auto !important;animation:none !important}

/* ---------- type + controls ---------- */
.card h1,.card h2{font-family:var(--font-head);font-weight:500;line-height:1.12;color:var(--qc-ink)}
.card h1{font-size:clamp(1.95rem,5.4vw,2.6rem);margin:0 0 10px}
.card h2{font-size:clamp(1.3rem,3.4vw,1.7rem);margin:0 0 10px}
.card p{color:var(--qc-muted)}
.card :focus-visible{outline:2px solid var(--qc-crimson);outline-offset:3px;border-radius:6px}
.card [data-focus][tabindex="-1"]:focus{outline:none}                /* headings get focus after each step: announce, don't ring */
.q-cats{position:relative;width:clamp(212px,40vw,264px);aspect-ratio:2/1;margin:0 auto 14px;flex:none}   /* intro: Strategist centre, Icebreaker left, Wild Card right — whole artwork, never cropped */
.q-cats img{--p:14px;position:absolute;bottom:calc(-1 * var(--p));height:auto;aspect-ratio:1;box-sizing:border-box;padding:var(--p)}   /* 14px transparent padding on every edge: the drop shadow has room to fade inside the image's own box (some browsers — notably Safari inside the 3D card — clip filters to that box). The artwork itself stays exactly the same size and position. */
.q-cats .qc-l{left:calc(-1 * var(--p));width:calc(38% + 2 * var(--p));z-index:1;filter:brightness(.88) drop-shadow(0 3px 5px rgba(42,26,20,.16))}
.q-cats .qc-r{right:calc(-1 * var(--p));width:calc(38% + 2 * var(--p));z-index:1;filter:brightness(.88) drop-shadow(0 3px 5px rgba(42,26,20,.16))}
.q-cats .qc-c{left:calc(25% - var(--p));width:calc(50% + 2 * var(--p));z-index:2;filter:drop-shadow(0 0 6px rgba(42,26,20,.18)) drop-shadow(0 3px 5px rgba(42,26,20,.16))}   /* lighter on cream */
.q-cats.is-pending{opacity:0}                                         /* space is reserved (fixed 2:1 box); cats appear once loaded */
.q-cats.is-enter{animation:q-cats-in .35s ease-out both}
@keyframes q-cats-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:479px){.q-cats{width:256px}}                          /* phones: 10% larger again (233px → 256px) */
@media(max-width:479px) and (max-height:600px){.q-cats{width:242px}}   /* short iPhones: smaller step up so "Deal me in" stays on screen */
.face--intro h1{margin:0}
.card .face--intro .q-sub{font-family:var(--font-head);font-style:italic;font-size:1.18rem;line-height:1.3;color:var(--qc-ink);margin:14px 0 26px}   /* tagline sits with the heading: 14px above, 26px below (same in every language) */
.card .face--intro .q-meta{font-size:.8rem;font-weight:700;letter-spacing:.08em;color:var(--qc-gold);margin:0 0 6px}
.card .face--intro .q-instr{font-size:.98rem;color:var(--qc-ink);margin:0 0 18px}
/* buttons: shared .cc-btn styles (css/ccx.css); .cc-on-cream on the card gives outlined buttons dark-brown text + border */
.q-btn[hidden]{display:none}
.face--intro .q-btn{align-self:center}

/* question */
.face--q{padding-inline:calc(31px - clamp(18px,4vw,30px))}   /* questions: 32px from the outer card edge (1px frame + card padding + this) */
.q-progress{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-size:.86rem;font-weight:700;letter-spacing:.02em;color:var(--qc-gold)}   /* "1 of 8" starts at the question's left edge */
.q-count{flex:none}
.q-back{flex:none;display:inline-flex;align-items:center;gap:.35em;font:inherit;font-size:.86rem;font-weight:400;letter-spacing:.02em;color:var(--qc-crimson);background:none;border:0;padding:8px 0 8px 8px;margin:-8px 0;min-height:44px;cursor:pointer;border-radius:6px}
.q-back:hover{color:var(--qc-crimson-deep)}
.q-back[hidden]{visibility:hidden}                                   /* question 1: keeps its space (right end of the row) so nothing shifts when it appears */
.q-bar{flex:1;height:3px;border-radius:3px;background:rgba(42,26,20,.14);overflow:hidden}
.q-bar i{display:block;height:100%;border-radius:3px;background:var(--qc-crimson)}
.q-opts{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:0;padding:0;min-width:0}   /* minmax(0,…): long words at enlarged text wrap instead of widening the card */
.q-opt{position:relative;display:block;width:100%;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:14px;-webkit-tap-highlight-color:transparent}
.q-opt__box{display:flex;align-items:center;gap:12px;width:100%;min-height:max(48px,var(--opt-h,0px));padding:9px 14px 9px 11px;border-radius:12px;box-sizing:border-box;
  border:1px solid rgba(150,110,45,.26);background:linear-gradient(180deg,#faf4e8,#f3eadb);color:var(--qc-ink);font-size:1rem;line-height:1.4;   /* lighter cream answer panel */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}
.q-opt__box > span:last-child{min-width:0;overflow-wrap:anywhere}
@media (hover:hover) and (pointer:fine){.q-opt:not([aria-pressed="true"]):hover .q-opt__box{border-color:rgba(136,20,46,.5);background:linear-gradient(180deg,#fcf7ee,#f6eee0)}}   /* hover only with a real mouse: touch screens keep a 'sticky hover' on whatever lands under the finger on the next question */
.q-opt__k{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:800;letter-spacing:.02em;
  border:1px solid rgba(136,20,46,.45);color:var(--qc-crimson);background:rgba(255,255,255,.5);transition:all .2s ease}
.q-opt__k svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .2s ease}
.q-opt[aria-pressed="true"] .q-opt__box{border-color:var(--qc-crimson);outline:2px solid var(--qc-crimson);outline-offset:-2px;box-shadow:none;background:linear-gradient(180deg,#fcf5ef,#f8ece6)}   /* selected: one even 2px crimson ring on all sides and corners (drawn inside, so the size never changes) */   /* crimson border = selected */
.q-opt[aria-pressed="true"] .q-opt__k{background:var(--qc-crimson);border-color:var(--qc-crimson);color:#fff}
.q-opt[aria-pressed="true"] .q-opt__k span{opacity:0;position:absolute}
.q-opt[aria-pressed="true"] .q-opt__k svg{stroke-dashoffset:0}
.q-opt[aria-pressed="false"] .q-opt__k svg{position:absolute;opacity:0}
.q-opt:focus{outline:none}
.q-opt:focus-visible{outline:2px dashed var(--qc-gold);outline-offset:3px}   /* keyboard focus: dashed gold ring outside the panel — clearly different from the solid crimson selection */

/* result */
.r-main{display:flex;align-items:center;gap:clamp(14px,3vw,24px);margin-bottom:12px}
.r-art{flex:none;width:auto;height:clamp(88px,18vh,150px);max-width:38%;object-fit:contain}
.r-main__txt{min-width:0;flex:1}
.r-tag{display:block;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--qc-gold)}
.card .r-head{font-family:var(--font-head);font-weight:500;font-size:clamp(1.6rem,4.3vw,2.1rem);line-height:1.1;color:var(--qc-ink);margin:2px 0 4px}
.r-line{font-family:var(--font-head);font-style:italic;font-size:1.08rem;line-height:1.35;color:var(--qc-crimson);margin:0}
.card .r-desc{color:#1f130e;font-size:.98rem;line-height:1.5;margin:0 0 14px}
.r-share{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-top:14px;border-top:1px solid var(--qc-frame-soft)}
.card .r-invite__h{margin:0;font-size:.95rem;font-weight:600;line-height:1.3;color:var(--qc-ink)}   /* sharing invitation above the Square/Story selector */
.card .r-invite__p{margin:2px 0 0;font-size:.9rem;line-height:1.35;color:var(--qc-muted)}
.r-fmt{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;gap:4px;padding:3px;border-radius:999px;border:1px solid var(--qc-panel-line);background:rgba(255,255,255,.35)}   /* two equal options, so the pill travels exactly one option */
.r-fmt::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 10px) / 2);border-radius:999px;background:var(--qc-crimson);transform:translateX(0);transition:transform .2s ease-out;pointer-events:none}   /* the crimson selection pill */
.r-fmt[data-sel="story"]::before{transform:translateX(calc(100% + 4px))}
.r-fmt button{position:relative;z-index:1;font:inherit;font-size:.82rem;font-weight:700;padding:6px 14px;min-height:34px;border-radius:999px;border:0;background:transparent;color:var(--qc-muted);cursor:pointer;transition:color .2s ease-out}   /* labels never move; only their colour changes */
.r-fmt button[aria-pressed="true"]{color:#fff}
.r-acts{display:flex;flex-wrap:wrap;gap:10px}
.r-acts .q-btn{min-width:120px}
.r-fmt-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}   /* Square/Story + Preview card on one line when it fits */
.r-more-links{display:contents}   /* its links join the Square/Story row, so "Preview card" stays beside the selector and "About your type" wraps on its own */
.r-textlink{font:inherit;font-size:.92rem;font-weight:700;color:var(--qc-crimson);background:none;border:0;padding:6px 0;min-height:36px;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.r-textlink:hover{color:var(--qc-crimson-deep);text-decoration-thickness:2px}
.r-textlink--strong{color:var(--qc-ink)}
.r-textlink--quiet{font-weight:400}   /* Preview card / About your type / Take again: regular weight, same underline + focus ring */
.r-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px;margin-top:14px}
.card .r-foot{margin-top:6px;font-size:.84rem;line-height:1.4;color:var(--qc-muted)}
.r-link{display:block;width:100%;max-width:420px;margin:4px 0 0;min-height:40px;padding:8px 12px;border:1px solid var(--qc-panel-line);border-radius:8px;background:rgba(255,255,255,.5);color:var(--qc-ink);font:inherit;font-size:.9rem}
.r-link[hidden]{display:none}
.sparkle{position:absolute;inset:-8px;pointer-events:none;overflow:visible}
.sparkle i{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--gold);opacity:0;transform:scale(.2)}
.sparkle.is-on i{animation:spark .9s ease-out .2s 1 both}
@keyframes spark{0%{opacity:0;transform:scale(.2) translate(0,0)}25%{opacity:1}100%{opacity:0;transform:scale(1) translate(var(--dx),var(--dy))}}

/* dialogs (native <dialog> opened with showModal: top layer above everything — unaffected by the card's transforms —
   page behind is inert; × / backdrop / Esc close). ccx.css resets every margin to 0, which is what pushed the dialog
   into the top-left corner; margin:auto + inset:0 re-centres it in the visible viewport, inside the safe areas. */
.r-dialog{--dlg-gap:16px;--dlg-top:max(var(--dlg-gap),env(safe-area-inset-top,0px));--dlg-bottom:max(var(--dlg-gap),env(safe-area-inset-bottom,0px));
  --dlg-side:max(var(--dlg-gap),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  position:fixed;inset:0;margin:auto;padding:0;border:0;background:transparent;width:fit-content;height:fit-content;
  max-width:calc(100vw - 2 * var(--dlg-side));max-height:calc(100vh - var(--dlg-top) - var(--dlg-bottom));max-height:calc(100dvh - var(--dlg-top) - var(--dlg-bottom));
  overflow:visible;color:#2a1a14;overscroll-behavior:contain}
.r-dialog::backdrop{background:rgba(8,6,7,.84)}
.r-dialog__in{box-sizing:border-box;max-height:inherit;display:flex;flex-direction:column;padding:12px;border-radius:16px;
  background:linear-gradient(180deg,#f6efe2,#efe5d4);border:1px solid rgba(150,110,45,.6);box-shadow:0 20px 60px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.35)}
.r-dialog__top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 8px 4px}
.r-dialog__title{font-family:var(--font-body);font-size:.84rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8a6a2e;margin:0}
.r-dialog__close{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(42,26,20,.45);background:transparent;color:#2a1a14;font-size:1.6rem;line-height:1;cursor:pointer}
.r-dialog__close:hover{background:rgba(42,26,20,.06)}
.r-dialog__close:focus-visible,.r-textlink:focus-visible,.r-fmt button:focus-visible{outline:2px solid #88142e;outline-offset:3px}
/* the share image, unchanged, scaled to fit the space left for it (viewport − margins − header − frame), never cropped */
.r-dialog{--dlg-img-h:calc(100dvh - var(--dlg-top) - var(--dlg-bottom) - 78px);--dlg-img-w:calc(100vw - 2 * var(--dlg-side) - 26px)}
.r-dialog__img{display:block;flex:none;height:auto;object-fit:contain;border-radius:8px;align-self:center;background:#0D0A0B}
.r-dialog--square .r-dialog__img{aspect-ratio:1/1;width:min(520px,var(--dlg-img-w),var(--dlg-img-h))}
.r-dialog--story .r-dialog__img{aspect-ratio:9/16;width:min(380px,var(--dlg-img-w),calc(var(--dlg-img-h) * .5625))}
.r-dialog--text{max-width:min(460px,calc(100vw - 2 * var(--dlg-side)))}
.r-dialog__text{margin:4px 6px 8px;font-size:1.02rem;line-height:1.55;color:#2a1a14}
html.dlg-lock,html.dlg-lock body{overflow:hidden}                     /* no background scrolling while a dialog is open */
.q-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- phones (portrait iPhone is the primary target) ---------- */
@media(max-width:479px){
  .card{padding:18px 16px 16px;border-radius:16px}
  .card::before{inset:6px;border-radius:11px}
        .card h1{font-size:1.9rem;line-height:1.1}
  .face--q{padding-inline:7px}                                         /* questions: 24px from the outer card edge (1 + 16 + 7) */
  .q-progress{margin-bottom:10px}
  .card h2{font-size:1.2rem;line-height:1.18;margin:0 0 8px}
  .q-opts{gap:6px}
  .q-opt__box{min-height:max(44px,var(--opt-h,0px));padding:7px 12px 7px 9px;gap:10px;font-size:.97rem;line-height:1.32}
  .q-opt__k{width:24px;height:24px;font-size:.75rem}
  .r-main{gap:12px;margin-bottom:6px}
  .r-art{height:clamp(80px,15vh,120px);max-width:34%}
  .card .r-head{font-size:1.52rem}
  .r-line{font-size:1rem}
  .card .r-desc{font-size:.95rem;line-height:1.45;margin-bottom:10px}
  .r-share{gap:6px;padding-top:8px;align-items:stretch}
  .r-fmt-row{align-self:stretch}
  .r-acts .q-btn{flex:1 0 auto;min-width:0;padding:0 12px;min-height:46px;white-space:nowrap}   /* labels stay on one line; "Share my result" takes the wider share of the row */
  .r-links{margin-top:8px;gap:0 16px}                                  /* 16px: the two links stay on one line at 375px with a few px to spare */
  .card .r-foot{margin-top:2px;font-size:.8rem}
}
@media(max-height:600px) and (min-width:480px){.r-art{height:88px}}   /* short landscape phones / small laptops */

/* ---------- reduced motion: a simple fade, no slides or flips ---------- */
@media(prefers-reduced-motion:reduce){
  .q-cats.is-pending{opacity:1}.q-cats.is-enter{animation:none}
  .card__face.is-out{animation:q-fade-out .09s ease both}
  .card__face.is-in{animation:q-fade-in .09s ease both}
  .card.is-flip-out{animation:q-fade-out .12s ease both}
  .card.is-flip-in{animation:q-fade-in .12s ease both}
  @keyframes q-fade-out{to{opacity:0}}
  @keyframes q-fade-in{from{opacity:0}to{opacity:1}}
  .q-opt__box,.q-opt__k,.q-opt__k svg,.r-fmt button,.r-fmt::before{transition:none}
  .sparkle.is-on i{animation:none}
}

/* ---------- language switch: inside the card's top-right corner (EN / ไทย) ----------
   Sits ~16px inside the fine inner border, level with the progress row. Every state reserves room for it, so it never
   covers content: questions keep the progress row clear on the right, intro and result start below it. */
.card{--lang-top:22px;--lang-right:23px;--lang-h:28px;--lang-w:88px}
.q-lang{position:absolute;top:var(--lang-top);right:var(--lang-right);z-index:5;box-sizing:border-box;width:var(--lang-w);height:var(--lang-h);
  display:grid;grid-template-columns:1fr 1fr;padding:2px;border-radius:999px;background:#fbf6ec;border:1px solid var(--qc-panel-line)}
.q-lang::before{content:"";position:absolute;top:2px;bottom:2px;left:2px;width:calc((100% - 4px) / 2);border-radius:999px;background:var(--qc-crimson);
  transition:transform .19s ease-out;pointer-events:none}                                        /* the selected indicator */
.q-lang[data-sel="th"]::before{transform:translateX(100%)}
.q-lang button,.q-lang a{display:grid;place-items:center;text-decoration:none;position:relative;z-index:1;font:inherit;font-family:'DM Sans',var(--font-body);font-size:.74rem;font-weight:700;line-height:1;padding:0;border:0;border-radius:999px;
  background:transparent;color:var(--qc-muted);cursor:pointer;transition:color .19s ease-out}   /* labels never move */
.q-lang button::after,.q-lang a::after{content:"";position:absolute;inset:-9px -2px}                             /* ≥44px tall tap area per option */
.q-lang button[aria-pressed="true"],.q-lang a[aria-current]{color:#fff}
.q-lang button:focus-visible,.q-lang a:focus-visible{outline:2px solid var(--qc-crimson);outline-offset:2px}
.q-lang button[lang="th"],.q-lang a[lang="th"]{font-family:'Noto Sans Thai',var(--font-body);font-weight:600;letter-spacing:0}
.card.has-lang .face--q .q-progress{padding-right:calc(var(--lang-w) + 10px)}                            /* progress row ends before the switch */
.card.has-lang .face--intro{justify-content:flex-start}
.card.has-lang .face--intro > .q-cats{margin-top:var(--intro-shift,0px)}   /* same start in EN and TH (set by quiz.js) */
.card.has-lang .face--intro,.card.has-lang .face--r{padding-top:calc(var(--lang-top) + var(--lang-h) + 6px - var(--card-pt,22px))}   /* intro / result start below it */
@media(max-width:479px){.card.has-lang{--card-pt:22px;--lang-top:22px;--lang-right:22px;padding-top:22px}}   /* 16px inside the inner border (6px inset) */
@media(prefers-reduced-motion:reduce){.q-lang::before,.q-lang button,.q-lang a{transition:none}}

/* ---------- Thai: Thai-capable fonts and roomier lines for vowels and tone marks; no letter-spacing / capitals / fake italics.
   Scoped with :lang(th) so the hidden measuring copy can take Thai typography too. Box sizes (card, answer rows, gaps)
   are shared with English — quiz.js sizes them for the longer of the two languages. ---------- */
.card:lang(th){--font-head:'Newsreader','Noto Sans Thai','Sukhumvit Set','Thonburi',serif;font-family:'DM Sans','Noto Sans Thai','Sukhumvit Set','Thonburi',sans-serif}
.r-dialog:lang(th){font-family:'DM Sans','Noto Sans Thai','Sukhumvit Set','Thonburi',sans-serif}
.card:lang(th) h1,.card:lang(th) h2,.card:lang(th) .r-head{line-height:1.35}
.card:lang(th) h1{font-size:clamp(1.7rem,4.6vw,2.2rem)}
.card:lang(th) p,.r-dialog:lang(th) .r-dialog__text{line-height:1.55}
.card:lang(th) .q-opt__box{line-height:1.5}
.card:lang(th) .face--intro .q-sub,.card:lang(th) .r-line{font-style:normal;line-height:1.5}
.card:lang(th) .q-progress,.card:lang(th) .q-back,.card:lang(th) .r-tag,.card:lang(th) .face--intro .q-meta,
.r-dialog:lang(th) .r-dialog__title,.card:lang(th) .r-fmt button,.card:lang(th) .cc-btn{letter-spacing:0;text-transform:none}
.card:lang(th) .face--intro .q-meta{font-size:.86rem}
.card:lang(th) .r-tag{font-size:.8rem}
.q-keep{display:inline-block}                                                  /* Thai intro title: breaks only between "คุณเป็นสายไหน" and "ในวงเกม?" when it can't fit on one line */
@media(max-width:479px){.card:lang(th) h1{font-size:1.65rem}}

/* ---------- one layout for EN and TH on the result screen (widths/heights measured by quiz.js) ---------- */
.card [data-fit="fmt"]{min-width:var(--fit-fmt,0px)}
.card [data-fit="preview"]{min-width:var(--fit-preview,0px);text-align:left}
.card [data-fit="about"]{min-width:var(--fit-about,0px);text-align:left}
.card [data-fit="share"]{min-width:var(--fit-share,0px)}
.card [data-fit="download"]{min-width:var(--fit-download,0px)}
.card [data-fit="copy"]{min-width:var(--fit-copy,0px)}
.card [data-fit="again"]{min-width:var(--fit-again,0px);text-align:left}
.card [data-fit="events"]{min-width:var(--fit-events,0px)}
.card .r-acts .q-btn[data-fit]{box-sizing:border-box}
/* "About your type": the same width in both languages; quiz.js reserves the taller description's height */
.r-dialog--text{width:min(460px,calc(100vw - 2 * var(--dlg-side)))}
.r-dialog:lang(th) .r-dialog__title{font-size:1.1rem;font-weight:700;color:#7a5c26;line-height:1.35}   /* Thai title as prominent as the small-caps English one: larger, upright, no tracking */
.q-sizer.is-fitting [data-fit]{flex-grow:0 !important;flex-basis:auto !important}
@media(max-width:479px){   /* phones: the two action buttons share the row from the same starting widths in both languages */
  .card .r-acts [data-fit="share"]{flex-basis:var(--fit-share,auto)}
  .card .r-acts [data-fit="download"]{flex-basis:var(--fit-download,auto)}
  .card .r-acts [data-fit="copy"]{flex-basis:var(--fit-copy,auto)}
}
.card [data-fit="start"]{min-width:var(--fit-start,0px)}
.card [data-fit="back"]{min-width:var(--fit-back,0px);justify-content:flex-end}
.card [data-fit="count"]{min-width:var(--fit-count,0px);display:inline-block}
.card .r-invite{align-self:stretch}
/* "About your type": tighter heading → paragraph (~16–20px visible). The × keeps its 44px tap circle but no longer sets the
   heading row's height — it is centred on the heading and may overhang into the padding/gap above and below. */
.r-dialog--text .r-dialog__top{position:relative;height:1.5rem;margin:6px 0 10px 4px;padding-right:52px}   /* one fixed heading-row height in EN and TH */
.r-dialog--text .r-dialog__close{position:absolute;right:-4px;top:50%;transform:translateY(-50%)}
.r-dialog--text .r-dialog__text{margin-top:0}
.card .face--intro h1{display:flex;flex-direction:column;justify-content:flex-end}   /* heading bottom-aligned in the shared heading area */
.card .face--intro .q-h1{display:block}
.q-lang button[lang="th"],.q-lang a[lang="th"]{padding-top:2px}   /* Thai label sat ~1px high (tone-mark space above): nudged down 1px; segment, highlight and tap area unchanged */
@media(max-width:479px){body.quiz-page{--quiz-top:4px;--quiz-bottom:6px}}   /* phones: minimal outer gaps (the card is then placed in the free space by quiz.js); short screens avoid needless scrolling */

/* shared-result pages: invitation to take your own quiz */
.card .r-yours{align-self:stretch;align-items:stretch;gap:0;border-top:0;text-align:center;background:color-mix(in srgb,var(--qc-gold) 14%,transparent);border-radius:14px;padding:16px 14px}
.card .r-yours__h{margin:0 0 12px;font-size:1.2rem;font-weight:700;line-height:1.3;color:var(--qc-ink)}
.card:lang(th) .r-yours__h{font-size:1.15rem;line-height:1.45}
.card .r-yours .r-acts{justify-content:center}
.card .r-yours .q-btn{min-width:60%}

/* ---------- "Share to my story": the card dialog (heading, helper, Square/Story, preview, Share image / Download) ---------- */
.r-dialog--card{--qc-ink:#2a1a14;--qc-muted:#6b5a4e;--qc-crimson:#88142e;--qc-panel-line:rgba(150,110,45,.45);width:min(440px,calc(100vw - 2 * var(--dlg-side)));--dlg-img-h:calc(100dvh - var(--dlg-top) - var(--dlg-bottom) - var(--dlg-chrome,236px));--dlg-img-w:calc(min(440px,100vw - 2 * var(--dlg-side)) - 26px)}
.r-dialog--card .r-dialog__in{padding:12px 8px 8px}
.r-dialog--card .r-dialog__top{position:relative;min-height:1.5rem;margin:6px 0 12px 4px;padding-right:52px}
.r-dialog--card .r-dialog__close{position:absolute;right:-6px;top:50%;transform:translateY(-50%)}
.r-dialog__help{margin:0 4px 10px;font-size:.92rem;line-height:1.4;color:#5a4a3e}
.r-dialog:lang(th) .r-dialog__help{line-height:1.55}
.r-dialog__fmt{align-self:center;margin:0 0 10px}
.r-dialog--card .r-dialog__img{flex:none}
.r-dialog--card.r-dialog--square .r-dialog__img{width:min(400px,var(--dlg-img-w),var(--dlg-img-h))}
.r-dialog--card.r-dialog--story .r-dialog__img{width:min(300px,var(--dlg-img-w),calc(var(--dlg-img-h) * .5625))}
.r-dialog__acts{display:flex;gap:10px;margin-top:12px}
.r-dialog__acts .q-btn{flex:1 1 0;min-width:0;min-height:46px;padding:0 12px;white-space:nowrap;justify-content:center}
.r-dialog:lang(th) .cc-btn,.r-dialog:lang(th) .r-fmt button{letter-spacing:0;text-transform:none}
.r-dialog .r-fmt button:focus-visible{outline:2px solid #88142e;outline-offset:3px}
@media(max-height:620px){.r-dialog--card{--dlg-chrome:220px}.r-dialog__help{font-size:.86rem;margin-bottom:8px}.r-dialog__fmt{margin-bottom:8px}.r-dialog__acts{margin-top:10px}}
/* result screen: About link on its own row; the two sharing buttons share the row */
.r-about-row{display:flex}
.card [data-fit="story"]{min-width:var(--fit-story,0px)}
@media(max-width:479px){.card .r-acts [data-fit="story"]{flex-basis:var(--fit-story,auto)}}
.r-link{resize:none;line-height:1.4}

/* card dialog: caption to copy by hand (for apps that drop the text when an image is shared) */
.r-cap__msg{margin:10px 4px 0;min-height:1.3em;font-size:.84rem;line-height:1.4;color:#88142e;font-weight:600}
.r-cap__msg:empty{min-height:0}

/* ---------- shared result landing pages (/quiz/game-night-personality[/th]/result/<slug>) ----------
   No announcement bar or footer. The card fills the space under the header without leaving dead areas: centred on
   larger screens, near the top on phones so "Take the quiz" is visible without scrolling. Content never shrinks;
   the page scrolls when it needs to. */
body.quiz-shared main{box-sizing:border-box;min-height:calc(100vh - var(--header-height,55px));min-height:calc(100dvh - var(--header-height,55px));display:flex;flex-direction:column;justify-content:center;padding-bottom:0}
body.quiz-shared main > section.quiz-wrap{width:100%;padding-top:24px;padding-bottom:28px}
body.quiz-shared .card .face--r{gap:0}
body.quiz-shared .card .r-desc{margin-bottom:16px}
body.quiz-shared .card .r-yours{padding:18px 16px 16px}
body.quiz-shared .card .r-yours__h{margin-bottom:14px}
body.quiz-shared .card .r-yours .q-btn{min-width:min(100%,260px);min-height:48px}
body.quiz-shared .card .r-links{justify-content:center;margin-top:12px}
body.quiz-shared .card .r-foot{text-align:center;margin-top:4px}
@media(max-width:479px){
  body.quiz-shared main{justify-content:flex-start}
  body.quiz-shared main::before{content:"";flex:1 1 0}   /* phones: card a little above the middle of the free space (1 : 1.25), never pushed below the fold */
  body.quiz-shared main::after{content:"";flex:1.25 1 0}
  body.quiz-shared main > section.quiz-wrap{padding-top:12px;padding-bottom:20px}
  body.quiz-shared .card .r-desc{margin-bottom:14px}
  body.quiz-shared .card .r-yours{padding:16px 14px 14px}
  body.quiz-shared .card .r-yours .q-btn{width:100%}
}

/* ---------- dialogs: the heading row stays put; only the body scrolls, inside the rounded cream shell ----------
   The shell never scrolls (no nested scrollbars). The body keeps 6px of room on every side for focus rings, and
   reserves the scrollbar's space on both sides (desktop mice) so nothing shifts or sits off-centre when scrolling
   becomes necessary. Touch screens use their own overlay scrollbars and reserve nothing. */
.r-dialog__in{min-height:0}
.r-dialog__body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;scrollbar-gutter:stable both-edges;scroll-padding-block:12px;padding:0 6px 6px;margin:0 -6px;--sb-inset:4px}   /* scroll-padding: a focused control lands with its focus ring in view */
.r-dialog--card .r-dialog__body{margin:0;padding:0 6px 14px}   /* buttons → modal bottom ≈ 22px (14 + shell 8) */
.r-dialog--card .r-dialog__top{margin-left:10px;margin-right:6px}
.r-dialog--card{--dlg-img-w:calc(min(440px,100vw - 2 * var(--dlg-side)) - 52px)}
.r-dialog--text .r-dialog__in{padding-bottom:8px}

/* caption: label left, compact Copy right, then the caption full width */
.r-cap__msg.is-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;min-height:0}
.r-cap{position:relative}


/* ---------- card dialog: preview, then Caption & link · Story link (Story only) · Share image / Download ----------
   Wide screens: preview left, fields and actions right. Narrow: stacked. The preview is kept deliberately modest so the
   caption and actions are visible when the dialog opens (whole image, never cropped; shared/downloaded files are full size).
   Short screens / enlarged text: the body scrolls under the fixed heading. */
.r-cardx{display:flex;flex-direction:column}
.r-cardx__pv{display:flex;flex-direction:column;align-items:center}
.r-cardx .r-dialog__fmt{margin:0 0 12px}
.r-dialog--card{--dlg-chrome:19rem;--dlg-img-h:max(170px,calc(100dvh - var(--dlg-top) - var(--dlg-bottom) - var(--dlg-chrome)))}
.r-dialog--card.r-dialog--story{--dlg-chrome:28.8rem}                        /* Story also shows the Story link field */
.r-dialog--card.r-dialog--square .r-dialog__img{width:min(300px,var(--dlg-img-w),var(--dlg-img-h))}
.r-dialog--card.r-dialog--story .r-dialog__img{width:min(240px,var(--dlg-img-w),calc(var(--dlg-img-h) * .5625))}
.r-cardx__side.r-cap{margin-top:20px;padding-top:0;border-top:0;gap:0}   /* preview → caption label 20px */
.r-cardx__side #rCapStory{margin-top:16px}   /* caption group → Story link group */
.r-cardx__side .r-dialog__acts{margin-top:16px}   /* last field → buttons */
.r-field{display:flex;flex-direction:column;gap:8px;min-width:0}   /* label → field 8px */
.r-field[hidden]{display:none}
.r-field__label{margin-left:2px;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6b5a4e}
.r-dialog:lang(th) .r-field__label{font-size:.88rem;letter-spacing:0;text-transform:none}
.r-field__box{position:relative;border:1px solid rgba(150,110,45,.45);border-radius:10px;background:rgba(255,255,255,.55)}
.r-field__text{margin:0;padding:10px 52px 10px 12px;min-height:44px;box-sizing:border-box;font-size:.88rem;line-height:1.45;color:#2a1a14;-webkit-user-select:text;user-select:text;overflow-wrap:break-word}
.r-dialog:lang(th) .r-field__text{line-height:1.6}
#rCapUrl{color:#5a4a3e}
#rCapUrl,#rStoryUrl{font-size:.94em}   /* the domain fits on one line in the narrowest fields */
.r-field__box--line .r-field__text{display:flex;align-items:center;padding-top:8px;padding-bottom:8px;color:#5a4a3e}
.r-icopy{position:absolute;top:0;right:0;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:9px;background:transparent;color:#5a4a3e;cursor:pointer}
.r-field__box--line .r-icopy{top:50%;transform:translateY(-50%)}
.r-icopy__i{grid-area:1/1;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.r-icopy__i--done{visibility:hidden;stroke-width:2.2;color:#2f7a46}
.r-icopy.is-done .r-icopy__i--copy{visibility:hidden}
.r-icopy.is-done .r-icopy__i--done{visibility:visible}
@media (hover:hover) and (pointer:fine){.r-icopy:hover{background:rgba(42,26,20,.07);color:#2a1a14}}
.r-icopy:focus-visible{outline:2px solid #88142e;outline-offset:-2px}
@media (min-width:720px) and (min-height:500px){
  .r-dialog--card{width:min(780px,calc(100vw - 2 * var(--dlg-side)));--dlg-img-h:calc(100dvh - var(--dlg-top) - var(--dlg-bottom) - 7.6rem)}
  .r-cardx{flex-direction:row;align-items:flex-start;gap:24px}
  .r-cardx__pv{flex:none}
  .r-dialog--card.r-dialog--square .r-dialog__img{width:min(330px,var(--dlg-img-h))}
  .r-dialog--card.r-dialog--story .r-dialog__img{width:min(260px,calc(var(--dlg-img-h) * .5625))}
  .r-cardx__side.r-cap{flex:1 1 0;min-width:0;margin-top:0;padding-top:2px}
}
.r-cap__msg:empty{min-height:0;margin:0}   /* no status: no extra space under the buttons */

/* question cards: more room between the progress/language row and the question, and correspondingly less between the
   question and the first answer. The space is added INSIDE the question's reserved area (border-box), so the answers
   only move if the tallest question needs it. */
.card .face--q h2{box-sizing:border-box;padding-top:14px;margin-bottom:4px}
@media(max-width:479px){.card .face--q h2{padding-top:12px;margin-bottom:2px}}

/* ---------- result card, bottom section: sharing buttons, link row, disclaimer ---------- */
html body .card .cc-btn--gold.cc-btn{background:#D9B36A;color:#2a1a14;border-color:rgba(122,92,38,.5)}   /* "Share a post or story": the share cards' warm gold, dark text */
@media (hover:hover){html body .card .cc-btn--gold.cc-btn:hover{background:#CDA65C;color:#1f130e;border-color:#7a5c26}}
html body .card .cc-btn--gold.cc-btn:active{background:#C09852;border-color:#7a5c26}
html body .card .cc-btn--gold.cc-btn:focus-visible{background:#CDA65C;color:#1f130e;outline:2px solid var(--qc-crimson);outline-offset:3px}
.card .face--r .r-links{margin-top:18px}                               /* buttons → link row */
.card .face--r .r-textlink--strong{font-weight:500}                    /* "Find your next Game Night": lighter, so the buttons lead */
.card .face--r .r-foot{margin-top:16px}                                /* +10px above the disclaimer */
@media(max-width:479px){.card .face--r .r-links{margin-top:16px}.card .face--r .r-foot{margin-top:12px}}
.q-foot{margin:18px auto 0;max-width:34rem;padding:0 16px;text-align:center;font-size:.8rem;line-height:1.45;color:rgba(243,235,225,.62)}   /* outside the card, on the dark page */
.q-foot[hidden]{display:none}
.q-foot:lang(th){line-height:1.6}

/* shared-result pages: CTA box = question · small "8 questions · About 2 minutes" · Take the quiz; the Game Night link
   centred with ~22px above and below; the disclaimer outside the card (.q-foot) */
body.quiz-shared .card .r-yours__h{margin-bottom:4px}
body.quiz-shared .card .r-yours__meta{margin:0 0 14px;font-size:.84rem;line-height:1.4;color:var(--qc-muted)}
body.quiz-shared .card .r-yours__meta:lang(th){line-height:1.55}
body.quiz-shared .card .r-links{justify-content:center;margin:22px 0 0}
body.quiz-shared .card .face--r{padding-bottom:0}
body.quiz-shared .card .r-links .r-textlink{padding:0;min-height:0;line-height:1.35}
body.quiz-shared .card{padding-bottom:22px}   /* link → card edge ≈ 22px */

/* ---------- card dialog v3: one fixed preview area per layout (switching Square/Story never resizes the dialog) ----------
   Narrow: stacked; the preview area is a comfortable height (Story never becomes a thumbnail) and the body scrolls
   under the fixed heading when needed. Wide: ~860px dialog, 32px padding, preview column | caption/actions column
   with a 32px gap; previews capped at ~400px high; the caption/actions group is centred beside the preview. */
.r-dialog--card{--pv:clamp(280px,52dvh,420px)}
@media not ((min-width:720px) and (min-height:500px)){   /* narrow: full available height, so switching Square/Story never resizes the dialog */
  .r-dialog--card{height:calc(100vh - var(--dlg-top) - var(--dlg-bottom));height:calc(100dvh - var(--dlg-top) - var(--dlg-bottom))}
  .r-dialog--card .r-dialog__in{height:100%}
}
.r-pv{width:100%;height:var(--pv);display:flex;align-items:center;justify-content:center}
html .r-dialog--card .r-pv .r-dialog__img{max-width:100%;height:auto}
html .r-dialog--card.r-dialog--square .r-pv .r-dialog__img{width:min(100%,var(--pv));aspect-ratio:1/1}
html .r-dialog--card.r-dialog--story .r-pv .r-dialog__img{height:var(--pv);width:auto;aspect-ratio:9/16}
@media (min-width:720px) and (min-height:500px){
  .r-dialog--card{width:min(860px,calc(100vw - 2 * var(--dlg-side)));--pv:max(240px,min(400px,calc(100dvh - var(--dlg-top) - var(--dlg-bottom) - 190px)))}
  .r-dialog--card .r-dialog__in{padding:22px 26px 26px}                 /* + the body's 6px focus room = 32px */
  .r-dialog--card .r-dialog__top{margin:4px 6px 14px 10px}
  .r-dialog--card .r-dialog__body{scrollbar-gutter:auto}
  .r-cardx{display:grid;grid-template-columns:var(--pv) minmax(0,1fr);column-gap:32px;align-items:center}
  .r-cardx__pv{display:contents}
  .r-cardx .r-dialog__fmt{grid-area:1/1;justify-self:center}
  .r-cardx .r-pv{grid-area:2/1;width:var(--pv)}
  .r-cardx__side.r-cap{grid-area:2/2;align-self:center;margin:0;padding:0}
}