/* Captain's Club · game: Quiz Sri Lanka (club/js/game-quiz.js). Every rule is scoped to .gm--quiz.
   One centred column (header included); a white question card with an ink border and a hard shadow, answers as comic
   buttons (green with a tick when right, maroon with a cross when wrong), the fun fact on yellow with the Captain. */
.scr.gm--quiz{max-width:752px}
.gm--quiz .gq{position:relative}

/* ---------- top: question n/10, the ten pips, the right answers ---------- */
.gm--quiz .gq__hud{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"prog score" "pips pips";align-items:center;gap:10px 12px;margin-bottom:18px}
.gm--quiz .gq__prog{grid-area:prog;display:flex;align-items:baseline;gap:6px;font-weight:800;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.gm--quiz .gq__prog b{font-size:1.65rem;font-weight:900;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.gm--quiz .gq__prog b+span{font-size:1rem;font-weight:900;letter-spacing:0;color:var(--steel)}
.gm--quiz .gq__score{grid-area:score;display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 14px 0 10px;border-radius:999px;background:var(--ink);color:var(--y);font-weight:900;font-size:1.05rem;font-variant-numeric:tabular-nums;box-shadow:3px 3px 0 var(--y)}
.gm--quiz .gq__score .i{width:19px;height:19px;stroke-width:3}
.gm--quiz .gq__pips{grid-area:pips;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;list-style:none}
.gm--quiz .gq__pip{height:12px;border-radius:999px;border:2px solid var(--ink);background:#fff;transition:background .25s}
.gm--quiz .gq__pip.is-on{background:var(--y)}
.gm--quiz .gq__pip.is-ok{background:var(--plus)}
.gm--quiz .gq__pip.is-no{background:repeating-linear-gradient(-45deg,var(--sl-maroon) 0 3px,#fff 3px 5px)}
@media (min-width:600px){
  .gm--quiz .gq__hud{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"prog pips score";gap:16px}
}

/* ---------- the question card ---------- */
.gm--quiz .gq__card{position:relative;padding:16px 16px 18px;border-radius:24px;background:#fff;border:2.5px solid var(--ink);box-shadow:var(--sh-hard)}
.gm--quiz .gq__art{position:absolute;top:-24px;right:-8px;width:70px;height:70px;transform:rotate(9deg);pointer-events:none;-webkit-user-select:none;user-select:none;filter:drop-shadow(2px 4px 0 rgba(11,11,12,.18))}
.gm--quiz .gq__cat{display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 56px);padding:5px 12px 5px 9px;border-radius:999px;background:var(--ink);color:var(--y);font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;line-height:1.2}
.gm--quiz .gq__cat .i{width:16px;height:16px}
.gm--quiz .gq__ph{position:relative;margin:14px 0 0;aspect-ratio:16/11;border-radius:16px;overflow:hidden;background:var(--ink-3);border:2.5px solid var(--ink)}
.gm--quiz .gq__img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
/* where each photo's subject sits, for the wider crops (the lighthouse top, the hotel's dome, Colombo's skyline: the
   clue that it is the city) */
.gm--quiz .gq__img--galle{object-position:center 6%}
.gm--quiz .gq__img--kandy{object-position:center 18%}
.gm--quiz .gq__img--sigiriya{object-position:center 45%}
.gm--quiz .gq__img--colombo{object-position:center 0}
.gm--quiz .gq__q{margin:14px 0 16px;font-weight:800;font-size:clamp(1.12rem,4.6vw,1.38rem);line-height:1.28;letter-spacing:-.012em;text-wrap:balance;outline:none}
.gm--quiz .gq__card>.gq__cat+.gq__q{margin-top:12px}

/* answers */
.gm--quiz .gq__opts{display:grid;gap:12px}
.gm--quiz .gq__opt{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) 24px;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 12px 10px 10px;border-radius:16px;background:#fff;border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);color:var(--ink);text-align:left;font-weight:700;font-size:1rem;line-height:1.25;transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .15s,color .15s}
.gm--quiz .gq__k{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--y);border:2px solid var(--ink);color:var(--ink);font-weight:900;font-size:.88rem;line-height:1}
.gm--quiz .gq__t{min-width:0;overflow-wrap:anywhere}
.gm--quiz .gq__mark{display:grid;place-items:center;width:24px;height:24px}
.gm--quiz .gq__mark .i{width:24px;height:24px;stroke-width:3.2}
.gm--quiz .gq__opt:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:16px}
.gm--quiz .gq__opt:not([aria-disabled="true"]):active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
@media (hover:hover){
  .gm--quiz .gq__opt:not([aria-disabled="true"]):hover{background:var(--y-100);transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
}
.gm--quiz .gq__opt[aria-disabled="true"]{cursor:default}
.gm--quiz .gq__opt.is-right{background:var(--plus);color:#fff}
.gm--quiz .gq__opt.is-wrong{background:var(--sl-maroon);color:#fff}
.gm--quiz .gq__opt.is-right .gq__k,.gm--quiz .gq__opt.is-wrong .gq__k{background:#fff}
.gm--quiz .gq__opt.is-dim{background:var(--paper);color:var(--steel);border-color:rgba(11,11,12,.42);box-shadow:2px 2px 0 rgba(11,11,12,.3)}
.gm--quiz .gq__opt.is-dim .gq__k{background:transparent;border-color:rgba(11,11,12,.42);color:var(--steel)}
.gm--quiz .gq__keys{margin-top:12px;font-size:.8rem;color:var(--steel)}
@media (hover:none),(pointer:coarse){.gm--quiz .gq__keys{display:none}}
/* short phones: a slightly wider crop and tighter answers, so a photo question's four answers fit under the photo */
@media (max-width:599px) and (max-height:780px){
  .gm--quiz .gq__hud{margin-bottom:14px}
  .gm--quiz .gq__ph{aspect-ratio:16/9;margin-top:12px}
  .gm--quiz .gq__q{margin:12px 0 14px}
  .gm--quiz .gq__opts{gap:10px}
  .gm--quiz .gq__opt{min-height:54px;padding-top:8px;padding-bottom:8px}
}

/* the fun fact: the Captain beside the verdict, the fact below (beside both from 600px), then Next */
.gm--quiz .gq__fb{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-areas:"cap head" "fact fact" "next next";gap:8px 12px;align-items:center;margin-top:18px;padding:14px 14px 16px;border-radius:18px;background:var(--y-100);border:2.5px solid var(--ink)}
.gm--quiz .gq__fb[hidden]{display:none}
.gm--quiz .gq__fb.is-no{background:var(--paper);border-style:dashed}
.gm--quiz .gq__fbcap{grid-area:cap;width:52px;height:72px;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(74,51,0,.2))}
.gm--quiz .gq__fbh{grid-area:head;display:grid;gap:2px;min-width:0}
.gm--quiz .gq__verdict{font-weight:900;text-transform:uppercase;letter-spacing:-.01em;font-size:1.25rem;line-height:1.1}
.gm--quiz .gq__fb.is-ok .gq__verdict{color:var(--plus)}
.gm--quiz .gq__fb.is-no .gq__verdict{color:var(--sl-maroon)}
.gm--quiz .gq__ans{font-size:.95rem;line-height:1.35}
.gm--quiz .gq__ans b{font-weight:900}
.gm--quiz .gq__fact{grid-area:fact;display:flex;gap:8px;align-items:flex-start;color:var(--ink-3);font-size:.94rem;line-height:1.45}
.gm--quiz .gq__fact .i{width:18px;height:18px;flex:none;margin-top:2px;color:var(--y-600)}
.gm--quiz .gq__next{grid-area:next;width:100%;margin-top:6px}
.gm--quiz .gq__next .i{width:20px;height:20px}
@media (min-width:600px){
  .gm--quiz .gq__opts{grid-template-columns:1fr 1fr}
  /* a landscape photo as tall as the screen allows, so the answers stay in view */
  .gm--quiz .gq__ph{aspect-ratio:auto;height:clamp(190px,34vh,320px)}
  .gm--quiz .gq__fb{grid-template-columns:72px minmax(0,1fr) auto;grid-template-areas:"cap head next" "cap fact next";gap:4px 16px;padding:14px 16px}
  .gm--quiz .gq__fbcap{width:72px;height:96px;align-self:end}
  .gm--quiz .gq__fbh{align-self:end}
  .gm--quiz .gq__fact{align-self:start}
  .gm--quiz .gq__next{width:auto;margin:0;align-self:center}
}

/* ---------- the end: result card (games.css) + what to look at again ---------- */
.gm--quiz .gq__end .gres{margin-top:4px}
.gm--quiz .gq__rev{margin-top:26px}
.gm--quiz .gq__revh{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:1.15rem;line-height:1.05;margin-bottom:12px}
.gm--quiz .gq__revl{display:grid;gap:10px;list-style:none}
.gm--quiz .gq__revi{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center;padding:10px 12px 10px 10px;border-radius:16px;background:#fff;border:2px solid var(--ink)}
.gm--quiz .gq__revimg{width:56px;height:44px;object-fit:cover;border-radius:10px;border:2px solid var(--ink)}
.gm--quiz .gq__revdot{display:grid;place-items:center;width:44px;height:44px;margin:0 6px;border-radius:50%;background:var(--y-100);border:2px solid var(--ink)}
.gm--quiz .gq__revdot .i{width:20px;height:20px}
.gm--quiz .gq__revi p{display:grid;gap:3px;min-width:0}
.gm--quiz .gq__revq{font-size:.88rem;color:var(--steel);line-height:1.35}
.gm--quiz .gq__reva{display:flex;align-items:flex-start;gap:6px;font-weight:800;line-height:1.3;overflow-wrap:anywhere}
.gm--quiz .gq__reva .i{width:18px;height:18px;flex:none;margin-top:1px;color:var(--plus);stroke-width:3}

/* ---------- motion (none with reduced motion: app.css also stops every animation then) ---------- */
@media (prefers-reduced-motion:no-preference){
  .gm--quiz .gq__card{animation:gqIn .38s var(--ease) both}
  .gm--quiz .gq__art{animation:gqSticker .5s var(--spring) .12s both}
  .gm--quiz .gq__opt.is-right{animation:gqPop .42s var(--spring)}
  .gm--quiz .gq__opt.is-wrong{animation:gqShake .42s}
  .gm--quiz .gq__fb:not([hidden]){animation:gqIn .3s var(--ease) both}
  .gm--quiz .gq__score.is-bump{animation:gqPop .45s var(--spring)}
}
@keyframes gqIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes gqSticker{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@keyframes gqPop{40%{transform:scale(1.05)}100%{transform:none}}
@keyframes gqShake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}