/* Where's This Food From? Its own look: a checked tablecloth, a dinner plate and a passport stamp.
   Everything is scoped to .fq (game) or .fq-page (page bits) so site.css stays as it is. */
.fq-page {
  --fq-paper: #fff8ec; --fq-card: #fffdf8; --fq-ink: #2b1d14; --fq-muted: #6e5a4a; --fq-line: #ead9c2;
  --fq-tomato: #c8401c; --fq-tomato-soft: #ffe2d6; --fq-saffron: #e89a0c; --fq-saffron-soft: #fff0c9;
  --fq-basil: #2c7a47; --fq-basil-soft: #dcf2e2; --fq-bad: #b8321b; --fq-bad-soft: #ffe0d8;
  --fq-check: rgba(200, 64, 28, .10); --fq-plate: #ffffff; --fq-rim: #efe3d1; --fq-on: #ffffff;
  --fq-shadow: 0 14px 34px rgba(80, 40, 10, .14); --fq-head: "Shrikhand", "Fredoka", Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fq-page {
    --fq-paper: #1d1511; --fq-card: #2a1f19; --fq-ink: #f8ecdd; --fq-muted: #c9b29d; --fq-line: #4a372b;
    --fq-tomato: #ff7d57; --fq-tomato-soft: #4a2418; --fq-saffron: #ffc24a; --fq-saffron-soft: #44351a;
    --fq-basil: #73d395; --fq-basil-soft: #1d3a27; --fq-bad: #ff8a72; --fq-bad-soft: #4a2219;
    --fq-check: rgba(255, 125, 87, .08); --fq-plate: #f4ece2; --fq-rim: #d9c7b2; --fq-on: #24130b;
    --fq-shadow: 0 14px 34px rgba(0, 0, 0, .45); } }
:root[data-theme="dark"] .fq-page {
  --fq-paper: #1d1511; --fq-card: #2a1f19; --fq-ink: #f8ecdd; --fq-muted: #c9b29d; --fq-line: #4a372b;
  --fq-tomato: #ff7d57; --fq-tomato-soft: #4a2418; --fq-saffron: #ffc24a; --fq-saffron-soft: #44351a;
  --fq-basil: #73d395; --fq-basil-soft: #1d3a27; --fq-bad: #ff8a72; --fq-bad-soft: #4a2219;
  --fq-check: rgba(255, 125, 87, .08); --fq-plate: #f4ece2; --fq-rim: #d9c7b2; --fq-on: #24130b;
  --fq-shadow: 0 14px 34px rgba(0, 0, 0, .45); }

/* Page band: the whole main area sits on a gingham tablecloth. */
main.fq-page { background-color: var(--fq-paper); color: var(--fq-ink);
  background-image: linear-gradient(90deg, var(--fq-check) 50%, transparent 50%), linear-gradient(var(--fq-check) 50%, transparent 50%);
  background-size: 44px 44px; }
.fq-back { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; color: var(--link); text-decoration: none; }
.fq-back:hover { text-decoration: underline; }

.fq { position: relative; max-width: 980px; margin: 0 auto; }
.fq button { font: inherit; }
.fq :focus-visible { outline: 3px solid var(--fq-saffron); outline-offset: 3px; }
.fq .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Start screen: hero with a centered menu card ---------- */
.fq .hero { position: relative; border-radius: 28px; overflow: hidden; min-height: 520px; display: grid; place-items: center; padding: 28px 16px 44px;
  background: #3b2416; box-shadow: var(--fq-shadow); isolation: isolate; }
.fq .hero > img, .fq .hero > svg.art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.fq .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(0,0,0,.05), rgba(0,0,0,.35)); }
.fq .fq-card { width: min(100%, 440px); background: var(--fq-card); border-radius: 22px; padding: 30px 26px 22px; text-align: center; position: relative;
  box-shadow: 0 20px 50px rgba(0,0,0,.35); border: 2px solid var(--fq-line); }
.fq .fq-card::before { content: ""; position: absolute; inset: 8px; border: 1.5px dashed var(--fq-line); border-radius: 16px; pointer-events: none; }
.fq .pill { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); background: var(--fq-saffron); color: #2b1d14; font-weight: 800; font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; white-space: nowrap; box-shadow: 0 4px 10px rgba(0,0,0,.18); }
.fq .mark { display: block; width: 84px; height: 84px; margin: 6px auto 4px; }
.fq .title { font-family: var(--fq-head); font-weight: 400; font-size: clamp(30px, 6vw, 42px); line-height: 1.05; color: var(--fq-tomato); margin: 0; letter-spacing: .01em; }
.fq .tag { color: var(--fq-muted); font-weight: 700; margin: 10px 0 0; font-size: 15px; line-height: 1.4; }
.fq .play { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 20px; min-height: 60px; border: 0; border-radius: 16px;
  background: var(--fq-tomato); color: var(--fq-on); font-family: var(--fq-head); font-size: 26px; cursor: pointer; box-shadow: 0 5px 0 rgba(0,0,0,.25); transition: transform .1s, box-shadow .1s; }
.fq .play:hover { filter: brightness(1.05); }
.fq .play:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.fq .meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; font-weight: 800; font-size: 15px; flex-wrap: wrap; }
.fq .switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; position: relative; }
.fq .switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fq .switch .sw { width: 46px; height: 26px; border-radius: 999px; background: var(--fq-line); position: relative; flex: none; transition: background .15s; }
.fq .switch .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.fq .switch input:checked + .sw { background: var(--fq-basil); }
.fq .switch input:checked + .sw::after { transform: translateX(20px); }
.fq .switch input:focus-visible + .sw { outline: 3px solid var(--fq-saffron); outline-offset: 2px; }
.fq .optbtn { margin-top: 14px; background: none; border: 0; color: var(--fq-muted); font-weight: 800; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 6px; }
.fq .opts { text-align: left; margin-top: 8px; display: grid; gap: 14px; }
.fq .opts[hidden] { display: none; }
.fq .opts .lab { display: block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fq-muted); margin-bottom: 6px; }
.fq .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fq .chip2 { border: 2px solid var(--fq-line); background: var(--fq-paper); color: var(--fq-ink); border-radius: 999px; padding: 6px 12px; font-weight: 800; font-size: 14px; cursor: pointer; min-height: 38px; }
.fq .chip2[aria-pressed="true"] { background: var(--fq-basil); border-color: var(--fq-basil); color: var(--fq-on); }
.fq .best { margin: 12px 0 0; font-size: 14px; font-weight: 700; color: var(--fq-muted); }
.fq .credit { position: absolute; left: 16px; bottom: 10px; right: 16px; font-size: 12px; font-style: italic; color: rgba(255,255,255,.9); text-shadow: 0 1px 2px rgba(0,0,0,.7); margin: 0; }
.fq .credit a { color: inherit; }

/* ---------- Game card ---------- */
.fq .game { background: var(--fq-card); border-radius: 26px; box-shadow: var(--fq-shadow); border: 2px solid var(--fq-line); overflow: hidden; }
.fq .bar { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 2px dashed var(--fq-line); background: var(--fq-paper); flex-wrap: wrap; }
.fq .bar .name { font-family: var(--fq-head); color: var(--fq-tomato); font-size: 20px; margin-right: auto; line-height: 1.1; }
.fq .ring { position: relative; width: 48px; height: 48px; flex: none; }
.fq .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.fq .ring .trk { stroke: var(--fq-line); }
.fq .ring .arc { stroke: var(--fq-basil); transition: stroke-dashoffset .25s linear, stroke .3s; }
.fq .ring.low .arc { stroke: var(--fq-tomato); }
.fq .ring b { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
.fq .count { font-weight: 800; font-size: 16px; white-space: nowrap; }
.fq .score { position: relative; font-weight: 800; font-size: 16px; background: var(--fq-saffron-soft); padding: 8px 14px; border-radius: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fq .pop { position: absolute; right: 100%; top: 50%; margin-right: 6px; transform: translateY(-50%); background: var(--fq-basil); color: var(--fq-on); font-weight: 800; font-size: 13px;
  padding: 3px 8px; border-radius: 999px; opacity: 0; pointer-events: none; }
.fq .pop.on { animation: fq-pop 1.3s ease-out forwards; }
@keyframes fq-pop { 0% { opacity: 0; transform: translate(6px, -50%) scale(.6); } 15% { opacity: 1; transform: translate(0, -50%) scale(1.1); } 70% { opacity: 1; transform: translate(0, -80%) scale(1); } 100% { opacity: 0; transform: translate(0, -120%); } }
.fq .prog { height: 6px; background: var(--fq-line); }
.fq .prog i { display: block; height: 100%; width: 0; background: var(--fq-saffron); transition: width .3s; }

.fq .stage { padding: 22px clamp(14px, 3vw, 30px) 24px; }
.fq .dish { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; }
.fq .plate { width: 168px; height: 168px; border-radius: 50%; background: var(--fq-plate); display: grid; place-items: center; flex: none; position: relative;
  box-shadow: inset 0 0 0 12px var(--fq-rim), inset 0 0 0 14px rgba(0,0,0,.06), 0 10px 24px rgba(60, 30, 10, .22); overflow: hidden; }
.fq .plate .emo { font-size: 78px; line-height: 1; }
.fq .plate img { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: cover; border-radius: 50%; }
.fq .plate .q { font-family: var(--fq-head); font-size: 72px; color: var(--fq-saffron); line-height: 1; }
.fq .plate.spin { animation: fq-plate .5s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes fq-plate { from { transform: rotate(-90deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.fq .dname { font-family: var(--fq-head); font-weight: 400; font-size: clamp(28px, 4.6vw, 40px); line-height: 1.05; margin: 0; color: var(--fq-ink); overflow-wrap: anywhere; }
.fq .ddesc { margin: 10px 0 0; font-size: 17px; line-height: 1.55; color: var(--fq-ink); }
.fq .lvl { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fq-muted); margin-bottom: 6px; }
.fq .ask { text-align: center; font-weight: 800; font-size: 18px; margin: 22px 0 0; }

.fq .answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.fq .ans { position: relative; min-height: 64px; padding: 12px 14px 12px 46px; border-radius: 16px; border: 2px solid var(--fq-line); background: var(--fq-paper); color: var(--fq-ink);
  font-weight: 800; font-size: 17px; line-height: 1.25; text-align: left; cursor: pointer; overflow-wrap: anywhere; transition: border-color .15s, background-color .15s, opacity .25s, transform .1s; }
.fq .ans .k { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 8px; background: var(--fq-card); border: 1.5px solid var(--fq-line);
  display: grid; place-items: center; font-size: 12px; color: var(--fq-muted); }
@media (hover: hover) { .fq .ans:hover:not(:disabled) { border-color: var(--fq-tomato); background: var(--fq-tomato-soft); } }
.fq .ans:active:not(:disabled) { transform: scale(.98); }
.fq .ans:disabled { cursor: default; }
.fq .ans.right { border-color: var(--fq-basil); background: var(--fq-basil-soft); }
.fq .ans.wrong { border-color: var(--fq-bad); background: var(--fq-bad-soft); }
.fq .ans.fade { opacity: .45; }
.fq .ans .badge { position: absolute; top: -12px; right: -10px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.fq .ans.right .badge { background: #2c7a47; }
.fq .ans.wrong .badge { background: #b8321b; }
.fq .ans .badge svg { width: 16px; height: 16px; }
@media (max-width: 420px) { .fq .answers { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
@media (prefers-reduced-motion: no-preference) {
  .fq .shake { animation: fq-shake .4s ease-in-out; }
  @keyframes fq-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
}

.fq .next { display: flex; justify-content: center; margin-top: 18px; }
.fq .nextbtn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 26px; border: 0; border-radius: 14px; background: var(--fq-ink); color: var(--fq-paper);
  font-weight: 800; font-size: 17px; cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.fq .nextbtn svg { width: 20px; height: 20px; }

/* Reveal: lightbulb box with a passport stamp */
.fq .explain { border-top: 2px dashed var(--fq-line); background: var(--fq-paper); padding: 20px clamp(14px, 3vw, 30px) 22px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.fq .explain[hidden] { display: none; }
.fq .bulb { width: 30px; height: 30px; color: var(--fq-saffron); flex: none; margin-top: 2px; }
.fq .explain h3 { font-family: var(--fq-head); font-weight: 400; font-size: 24px; margin: 0; line-height: 1.15; color: var(--fq-ink); }
.fq .explain p { margin: 8px 0 0; font-size: 16px; line-height: 1.55; }
.fq .explain .src { font-size: 14px; font-weight: 700; }
.fq .explain .src a { color: var(--fq-tomato); }
.fq .explain .pc { font-size: 12px; color: var(--fq-muted); font-style: italic; }
.fq .stamp { float: right; margin: 0 0 8px 14px; transform: rotate(-8deg); border: 3px double var(--fq-tomato); color: var(--fq-tomato); border-radius: 12px; padding: 6px 12px;
  text-align: center; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; line-height: 1.2; max-width: 46%; }
.fq .stamp b { display: block; font-family: var(--fq-head); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 20px; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) { .fq .stamp { animation: fq-stamp .35s cubic-bezier(.3, 1.6, .5, 1); } @keyframes fq-stamp { from { transform: rotate(-20deg) scale(1.8); opacity: 0; } to { transform: rotate(-8deg) scale(1); opacity: 1; } } }

/* ---------- End screen ---------- */
.fq .end { text-align: center; padding: 28px clamp(14px, 3vw, 30px) 26px; }
.fq .end .big { font-family: var(--fq-head); font-size: clamp(54px, 13vw, 84px); line-height: 1; color: var(--fq-tomato); }
.fq .end .msg { font-weight: 800; font-size: 19px; margin: 10px 0 0; }
.fq .end .sub { color: var(--fq-muted); font-weight: 700; margin: 6px 0 0; }
.fq .newbest { display: inline-block; margin-top: 10px; background: var(--fq-saffron); color: #2b1d14; font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.fq .acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.fq .ghost { min-height: 52px; padding: 10px 22px; border-radius: 14px; border: 2px solid var(--fq-ink); background: transparent; color: var(--fq-ink); font-weight: 800; font-size: 16px; cursor: pointer; }
.fq .review { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; text-align: left; }
.fq .review li { display: flex; gap: 10px; align-items: center; background: var(--fq-paper); border: 2px solid var(--fq-line); border-radius: 14px; padding: 8px 12px; font-size: 15px; line-height: 1.3; }
.fq .review li .e { font-size: 26px; }
.fq .review li span { color: var(--fq-muted); font-weight: 600; display: block; font-size: 13px; }
.fq .review li.ok { border-color: var(--fq-basil); }
.fq .review li.no { border-color: var(--fq-bad); }

@media (max-width: 640px) {
  .fq .hero { min-height: 0; border-radius: 22px; padding: 30px 12px 40px; }
  .fq .fq-card { padding: 28px 18px 18px; }
  .fq .dish { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 14px; }
  .fq .plate { width: 140px; height: 140px; }
  .fq .plate .emo { font-size: 64px; }
  .fq .bar { padding: 12px 14px; gap: 10px; }
  .fq .bar .name { font-size: 17px; flex-basis: 100%; }
  .fq .ans { font-size: 16px; min-height: 56px; }
  .fq .stamp { float: none; display: inline-block; margin: 0 0 8px; max-width: 100%; }
}
@media (hover: none) { .fq .keys { display: none; } }
@media (prefers-reduced-motion: reduce) { .fq, .fq * { animation: none !important; transition: none !important; } }

/* Guide restyled to sit on the tablecloth */
.fq-page .guide { background: var(--fq-card); color: var(--fq-ink); border: 2px solid var(--fq-line); margin-left: auto; margin-right: auto; }
.fq-page .guide h2, .fq-page .guide h3 { color: var(--fq-ink); }
.fq-page .guide h2 { font-family: var(--fq-head); font-weight: 400; color: var(--fq-tomato); }
.fq-page .guide a { color: var(--fq-tomato); }
.fq-page .fq-credits { max-width: 72ch; margin: 24px auto 0; font-size: 13px; color: var(--fq-muted); line-height: 1.5; }
.fq-page .fq-credits a { color: inherit; }
.fq-page .fq-credits details { margin-top: 6px; }
.fq-page .fq-credits ol { padding-left: 20px; margin: 6px 0 0; }