/* game cards (home page section and /games/) */
.ghub { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.gcard { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 0 18px 18px; border-radius: 18px; background: #fffaf0; color: #2b1810; text-decoration: none; overflow: hidden; box-shadow: 0 10px 24px rgba(60,20,0,.18); transition: transform .2s, box-shadow .2s; }
.gcard::before { content: ""; display: block; margin: 0 -18px; height: 112px; background: var(--scene) center/cover; border-bottom: 5px solid #f2b53a; }
.gcard img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 5px solid #fffaf0; box-shadow: 0 6px 14px rgba(60,20,0,.3); margin: -46px 0 2px; position: relative; }
.gcard .gn { font: 400 23px/1.1 Shrikhand, Georgia, serif; color: #a02039; }
.gcard .gb { font-size: 14.5px; line-height: 1.45; color: #5b4335; flex: 1; }
.gcard .gp { align-self: flex-start; margin-top: 6px; background: #c22f4b; color: #fff8ea; font-weight: 700; font-size: 14px; padding: 7px 16px; border-radius: 999px; white-space: nowrap; }
.gcard:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: 0 16px 30px rgba(60,20,0,.26); }
.gcard:hover .gp { background: #a02039; }
.ghub.small .gcard::before { height: 80px; }
.ghub.small .gcard .gn { font-size: 20px; }
@media (prefers-color-scheme: dark) { .gcard { background: #2a1b13; color: #fbeedd; } .gcard img { border-color: #2a1b13; } .gcard .gb { color: #d8c0a8; } .gcard .gn { color: #f0627c; } }
/* shared game page styles */
body.games .top { min-height: 260px; }
.gm { position: relative; background: var(--surface); border-radius: 18px; box-shadow: 0 10px 26px rgba(60,20,0,.16); border-top: 8px solid #c22f4b; padding: 18px; min-height: 420px; }
.gm button { font: inherit; cursor: pointer; }
.g-btn { border: 0; border-radius: 999px; background: #c22f4b; color: #fff8ea; font-weight: 700; font-size: 16px; padding: 11px 24px; min-height: 46px; white-space: nowrap; box-shadow: 0 4px 0 #8a1d33; transition: transform .1s, box-shadow .1s; }
.g-btn:hover { background: #a02039; }
.g-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a1d33; }
.g-btn.alt { background: #fff1d6; color: #5a1422; box-shadow: 0 4px 0 #ecd6b4; }
.g-btn:focus-visible, .gm [tabindex]:focus-visible { outline: 3px solid #f2b53a; outline-offset: 3px; }
.g-start, .g-end { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 22px 8px; }
.g-start img.face, .g-end img.face { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 6px solid #f2b53a; box-shadow: 0 10px 22px rgba(60,20,0,.3); }
.g-start h2, .g-end h2 { font: 400 clamp(28px, 4.5vw, 40px)/1.05 Shrikhand, Georgia, serif; color: #a02039; margin: 0; }
.g-start p, .g-end p { margin: 0; max-width: 52ch; color: var(--muted); }
.g-best { font: 500 13px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.g-big { font: 400 clamp(54px, 9vw, 84px)/1 Shrikhand, Georgia, serif; color: #c22f4b; }
.g-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.g-hud { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; font-weight: 700; margin-bottom: 12px; }
.g-hud .chip { display: inline-flex; align-items: center; gap: 6px; background: #fff1d6; color: #5a1422; border-radius: 999px; padding: 5px 13px; font-size: 15px; white-space: nowrap; }
.g-hud .chip b { font: 400 18px Shrikhand, Georgia, serif; color: #c22f4b; }
.g-copied { font-size: 14px; color: var(--muted); min-height: 1em; }
.how ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.more .ghub { margin-top: 6px; }
@media (prefers-color-scheme: dark) { .g-hud .chip, .g-btn.alt { background: #35231a; color: #fbeedd; box-shadow: 0 4px 0 #4a3326; } .g-start h2, .g-end h2 { color: #f0627c; } }

/* ---------- Luke's Diner Rush: behind the counter with Luke ---------- */
.gm:has(.dz) { padding: 0; overflow: hidden; border-top: 0; background: #3b2213; min-height: 0; }
.dz { position: relative; color: #fff8ea; }
.dz-hud { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 10px 12px; background: linear-gradient(#2a1a10, #3b2213); }
.dz-hud > div { display: flex; align-items: center; gap: 8px; background: #1d2a3f; border: 3px solid #c9a46a; border-radius: 12px; padding: 5px 12px; font-weight: 700; white-space: nowrap; box-shadow: inset 0 2px 0 rgba(255,255,255,.15); }
.dz-hud b { font: 400 20px Shrikhand, Georgia, serif; }
.dz-hud small { color: #c9b89a; font-weight: 700; }
.dz-stars { color: #f2b53a; font-size: 18px; letter-spacing: 1px; }
.dz-goal { width: 90px; height: 10px; border-radius: 5px; background: #0f1826; overflow: hidden; }
.dz-goal i { display: block; height: 100%; background: linear-gradient(#7be07b, #2f9a4a); transform-origin: left; transform: scaleX(0); transition: transform .3s; }
.dz-combo:empty { visibility: hidden; }
.dz-combo { background: none !important; border: 0 !important; box-shadow: none !important; font: 400 20px Shrikhand, Georgia, serif !important; color: #f2b53a; text-shadow: 0 2px 0 #7a3e1d; }
.dz-combo b { font-size: 24px; }
.dz-stage { position: relative; aspect-ratio: 1672 / 718; container-type: inline-size; user-select: none; -webkit-user-select: none; overflow: hidden; }
.dz-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.dz-row { position: absolute; top: 0; overflow: hidden; }
/* food stations sit right on the artwork */
.dz-st { position: absolute; border: 0; padding: 0; background: transparent; border-radius: 12px; cursor: pointer; transition: box-shadow .15s, background .15s; }
.dz-st:hover, .dz-st:focus-visible { box-shadow: 0 0 0 3px #f2b53a, 0 0 22px rgba(242,181,58,.6); background: rgba(255,240,200,.12); outline: none; }
.dz-st.hit { animation: dz-hit .25s ease-out; }
@keyframes dz-hit { 50% { background: rgba(255,240,200,.35); box-shadow: 0 0 0 4px #fff8ea; } }
.dz-st .lock { display: none; }
.dz-st.locked { background: rgba(20,10,5,.62); cursor: not-allowed; }
.dz-st.locked:hover { box-shadow: none; }
.dz-st.locked .lock { white-space: nowrap; display: grid; place-items: center; height: 100%; font: 700 max(11px, 1.4cqw)/1 Karla, sans-serif; color: #fff8ea; }
/* Luke's speech bubble */
.dz-luke { position: absolute; z-index: 3; translate: -50% -100%; background: #fff8ea; color: #2b1810; font: 700 max(11px, 1.3cqw)/1.2 Karla, sans-serif; padding: .5em .8em; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,.35); opacity: 0; pointer-events: none; white-space: nowrap; }
.dz-luke::after { content: ""; position: absolute; left: 50%; bottom: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: #fff8ea; }
.dz-luke.say { animation: dz-say 1.8s ease-out; }
@keyframes dz-say { 0% { opacity: 0; transform: translateY(6px); } 12%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* customers sit behind the counter; their bodies are cut off by it */
.dz-c { position: absolute; bottom: 0; width: 15cqw; translate: -50% 0; border: 0; padding: 0; background: none; color: inherit; display: flex; flex-direction: column; align-items: center; transition: opacity .5s, transform .6s; }
.dz-c.walking { opacity: 0; transform: translateX(8cqw); }
.dz-c.seated { opacity: 1; transform: none; cursor: pointer; }
.dz-c.leaving { opacity: 0; transform: translateX(8cqw); }
.dz-c.leaving.mad { transform: translateX(8cqw) rotate(4deg); }
.dz-c .bod { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; margin-bottom: -3.5cqw; }
.dz-c .hd { width: 62%; aspect-ratio: 1; height: auto; border-radius: 50%; object-fit: cover; border: .35cqw solid #fff8ea; box-shadow: 0 6px 12px rgba(0,0,0,.4); background: #fff1d6; position: relative; z-index: 1; }
.dz-c .tor { width: 92%; height: 5.5cqw; margin-top: -1cqw; border-radius: 4cqw 4cqw 0 0; background: var(--shirt, #2d4a8a); box-shadow: inset 0 -1cqw 0 rgba(0,0,0,.15); }
.dz-c .who { font: 700 max(10px, 1.15cqw)/1 Karla, sans-serif; background: rgba(43,24,16,.8); padding: .25em .6em; border-radius: 999px; margin: .4cqw 0 .3cqw; white-space: nowrap; }
.dz-c.ready .hd { border-color: #f2b53a; box-shadow: 0 0 0 .5cqw rgba(242,181,58,.7), 0 6px 12px rgba(0,0,0,.4); }
.dz-c .bub { position: relative; display: flex; align-items: stretch; gap: .5cqw; background: #fff; border-radius: 1.4cqw; padding: .7cqw .8cqw; box-shadow: 0 6px 14px rgba(0,0,0,.35); max-width: 15cqw; }
.dz-c .bub::after { content: ""; position: absolute; left: 22%; bottom: -1cqw; border: 1cqw solid transparent; border-bottom: 0; border-top-color: #fff; }
.dz-c .its { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3cqw; font-size: 3cqw; max-width: 12cqw; }
.dz-c .its .fi { width: max(18px, 3.4cqw); height: max(18px, 3.4cqw); object-fit: contain; }
.dz-c .pat { width: .7cqw; min-width: 5px; border-radius: 1cqw; background: #ddd; overflow: hidden; display: flex; align-items: flex-end; }
.dz-c .pat i { display: block; width: 100%; height: 100%; background: #2f9a4a; transform-origin: bottom; }
.dz-c .pat i.mid { background: #f2b53a; } .dz-c .pat i.low { background: #e0393e; }
/* the tray, the bin and the serve button */
.dz-bar { display: flex; align-items: center; gap: 12px; padding: 12px; background: linear-gradient(#6c4020, #4a2a14); border-top: 4px solid #96602f; }
.dz-trash { flex: none; width: 62px; height: 104px; margin: -16px 4px -8px; border: 0; padding: 0; background: none; cursor: pointer; transition: transform .15s; }
.dz-trash svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 4px rgba(0,0,0,.35)); }
.dz-trash:hover { transform: rotate(-6deg) translateY(-2px); }
.dz-trash:active { transform: scale(.94); }
.dz-tray { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 8px; border-radius: 16px; background: linear-gradient(#d9a066, #b47a43); box-shadow: inset 0 3px 8px rgba(0,0,0,.35); min-width: 0; }
.dz-tray .slot { height: 62px; border-radius: 12px; background: rgba(90,50,20,.35); box-shadow: inset 0 2px 5px rgba(0,0,0,.3); display: grid; place-items: center; border: 0; padding: 0; }
.dz-tray .slot.full { cursor: pointer; }
.dz-tray .slot.full:hover { background: rgba(90,50,20,.5); }
.dz-tray .slot .fi { width: 82%; max-width: 96px; height: 54px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)); }
.dz .dz-serve { flex: none; min-width: 120px; height: 62px; border: 3px solid #e8f7d0; border-radius: 16px; background: linear-gradient(#5ccf5c, #2b9a3c); color: #fff; font: 400 26px Shrikhand, Georgia, serif; letter-spacing: .02em; text-shadow: 0 2px 0 #1d6a2a; box-shadow: 0 5px 0 #1d6a2a; }
.dz-serve:active { transform: translateY(3px); box-shadow: 0 2px 0 #1d6a2a; }
.dz-trash:focus-visible, .dz-serve:focus-visible, .dz-tray .slot:focus-visible { outline: 3px solid #f2b53a; outline-offset: 2px; }
.dz-next { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 14px 12px; font-size: 13px; color: #d8c0a8; background: #4a2a14; }
.dz-next span { display: inline-flex; align-items: center; gap: 4px; background: rgba(0,0,0,.25); padding: 3px 9px 3px 3px; border-radius: 999px; }
.dz-next .fi { width: 24px; height: 24px; object-fit: contain; border-radius: 6px; background: #fff8ea; }

.dz-strikes { gap: 4px !important; }
.dz-strikes i { font-style: normal; font: 400 18px Shrikhand, Georgia, serif; color: #50607a; }
.dz-strikes i.x { color: #ff5a4f; text-shadow: 0 0 6px rgba(255,90,79,.6); }
.dz-left small { color: #c9b89a; }
.fi.bg { display: block; }
.dz-c .its .it.b .fi { width: max(34px, 6.4cqw); height: auto; }
.dz-c .its .yum { font-size: max(22px, 3.4cqw); line-height: 1; }
.dz-news { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.dz-new { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 88px; font-size: 12px; color: #5b4335; }
.dz-new .fi { width: 56px; height: 46px; object-fit: contain; }
.dz-tip { background: #fff1d6; border-radius: 10px; padding: 8px 10px; font-size: 14px !important; }
.dz-nx { display: inline-flex; gap: 6px; align-items: center; }
.dz-nx .fi { width: 34px; height: 28px; object-fit: contain; }
.dz-fly .fi { width: 58px; height: 50px; object-fit: contain; }
.dz-dot { display: block; width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(0,0,0,.25); }
.dz-dot.cheese { background: #ffc928; } .dz-dot.onion { background: radial-gradient(circle, #f4e4ee 0 30%, #c0609c 31% 38%, #f4e4ee 39% 60%, #9b2a72 61%); } .dz-dot.tomato { background: #e23b2e; } .dz-dot.lettuce { background: #5cbf3a; }
/* overlays */
.dz-over { position: absolute; inset: 0; z-index: 6; display: none; place-items: center; background: rgba(30,14,8,.55); padding: 10px; }
.dz-over.on { display: grid; }
.dz-card { max-width: 460px; width: 100%; max-height: 100%; overflow: auto; background: #fffaf0; color: #2b1810; border-radius: 18px; padding: 18px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.dz-card h2 { font: 400 clamp(22px, 3.4vw, 32px)/1.05 Shrikhand, Georgia, serif; color: #a02039; margin: 0; }
.dz-card p { margin: 0; font-size: 15px; color: #5b4335; }
.dz-card .face { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 4px solid #f2b53a; }
.dz-card .fi.big { width: 32px; height: 32px; object-fit: contain; vertical-align: middle; }
.dz-big { font-size: 34px; color: #f2b53a; letter-spacing: 3px; text-shadow: 0 2px 0 #7a3e1d; }
.dz-fly { position: absolute; z-index: 8; pointer-events: none; filter: drop-shadow(0 6px 6px rgba(0,0,0,.4)); }
.dn-float { position: absolute; z-index: 9; font: 400 20px Shrikhand, Georgia, serif; color: #fff8ea; text-shadow: 0 2px 0 rgba(0,0,0,.6); pointer-events: none; white-space: nowrap; animation: dn-float 1.3s ease-out forwards; }
.dn-float.bad { color: #ffc2c2; }
@keyframes dn-float { to { transform: translateY(-46px); opacity: 0; } }
@media (max-width: 640px) {
  .dz-hud { padding: 8px; gap: 6px; }
  .dz-hud > div { padding: 4px 8px; gap: 5px; font-size: 12px; border-width: 2px; }
  .dz-hud b { font-size: 15px; }
  .dz-goal { width: 44px; } .dz-left small { display: none; }
  .dz-stars { font-size: 13px; }
  .dz-combo { order: 9; width: 100%; justify-content: center; font-size: 16px !important; }
  .dz-c { width: 20cqw; } .dz-c .hd { width: 50%; } .dz-c .tor { height: 6cqw; } .dz-c .bod { margin-bottom: -6.5cqw; }
  .dz-c .bub { max-width: 27cqw; padding: 3px 4px; border-radius: 8px; gap: 3px; }
  .dz-c .its { max-width: 23cqw; gap: 1px; }
  .dz-c .its .fi { width: 5.4cqw; height: 5.4cqw; }
  .dz-combo:empty { display: none !important; }
  .dz-c .who { display: none; }
  .dz-bar { gap: 8px; padding: 8px; }
  .dz-trash { width: 40px; height: 68px; margin: -8px 2px -4px; }
  .dz-tray { gap: 5px; padding: 5px; }
  .dz-tray .slot { height: 50px; }
  .dz-tray .slot .fi { width: 40px; height: 40px; }
  .dz .dz-serve { min-width: 84px; height: 50px; font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .dz-c { transition: none; } .dz-st.hit, .dz-luke.say { animation: none; } .dz-luke.say { opacity: 1; } }

/* ---------- Who Said It? and Town Meeting ---------- */
.qg-card { max-width: 760px; margin: 0 auto; }
.qg-quote { margin: 0; position: relative; font: 400 clamp(22px, 3.4vw, 32px)/1.3 Shrikhand, Georgia, serif; color: #2b1810; background: #fffaf0; border-radius: 18px; padding: 26px 26px 22px 54px; box-shadow: 0 8px 20px rgba(60,20,0,.14); }
.qg-quote::before { content: "“"; position: absolute; left: 14px; top: 2px; font-size: 76px; color: #f2b53a; line-height: 1; }
.qg-meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font: 500 12.5px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 4px 8px; }
.qg-timer { height: 8px; border-radius: 4px; background: #ecd6b4; overflow: hidden; margin: 12px 0 14px; }
.qg-timer i { display: block; height: 100%; width: 100%; background: #c22f4b; transform-origin: left; }
.qg-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.qg-opts button { display: flex; align-items: center; gap: 10px; border: 0; border-radius: 16px; background: #fff1d6; color: #2b1810; padding: 8px 14px 8px 8px; min-height: 64px; font-weight: 700; font-size: 16px; text-align: left; box-shadow: 0 4px 0 #ecd6b4; transition: transform .08s, background .2s; }
.qg-opts button img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 3px solid #fffaf0; flex: none; }
.qg-opts button:hover:not(:disabled) { background: #ffe6b5; }
.qg-opts button.right { background: #2f8a55; color: #fff8ea; box-shadow: 0 4px 0 #1d5d38; }
.qg-opts button.wrong { background: #e0393e; color: #fff8ea; box-shadow: 0 4px 0 #a52126; }
.qg-opts button:disabled { cursor: default; }
.qg-opts.text button { padding: 12px 16px; font-size: 15.5px; line-height: 1.3; }
.qg-why { margin-top: 14px; background: #fffaf0; border-left: 6px solid #2f8a55; border-radius: 12px; padding: 12px 16px; }
.qg-why.no { border-left-color: #e0393e; }
.qg-why p { margin: 0 0 6px; }
.qg-why a { font-weight: 700; color: #a02039; }
.qg-next { display: flex; justify-content: flex-end; margin-top: 12px; }
.qg-dots { display: flex; gap: 5px; }
.qg-dots i { width: 11px; height: 11px; border-radius: 50%; background: #ecd6b4; }
.qg-dots i.ok { background: #2f8a55; } .qg-dots i.no { background: #e0393e; } .qg-dots i.now { background: #f2b53a; }
.tm-gavel { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.tm-gavel img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 4px solid #f2b53a; }
.tm-gavel .bub { position: relative; background: #fffaf0; border-radius: 14px; padding: 9px 14px; font-size: 15px; box-shadow: 0 4px 10px rgba(60,20,0,.12); }
.tm-motion { font: 400 clamp(19px, 2.6vw, 25px)/1.35 Shrikhand, Georgia, serif; color: #2b1810; background: #fffaf0; border-radius: 18px; padding: 20px 22px; box-shadow: 0 8px 20px rgba(60,20,0,.14); border-top: 6px solid #2d4a8a; }
.tm-motion small { display: block; font: 500 12.5px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: #6e5546; margin-bottom: 8px; }
.qg-opts.text { grid-template-columns: minmax(0, 1fr); }
.g-review { list-style: none; padding: 0; margin: 6px 0 0; width: 100%; max-width: 680px; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.g-review li { background: #fffaf0; border-radius: 12px; padding: 10px 14px; border-left: 5px solid #2f8a55; font-size: 14.5px; }
.g-review li.no { border-left-color: #e0393e; }
.g-review a { font-weight: 700; color: #a02039; }
@media (max-width: 560px) { .qg-opts:not(.text) { grid-template-columns: minmax(0, 1fr); } .qg-quote { padding: 22px 18px 18px 42px; } .qg-quote::before { font-size: 60px; left: 8px; } }
@media (prefers-color-scheme: dark) {
  .qg-quote, .tm-motion, .qg-why, .tm-gavel .bub, .g-review li { background: #2a1b13; color: #fbeedd; }
  .qg-opts button { background: #35231a; color: #fbeedd; box-shadow: 0 4px 0 #4a3326; } .qg-opts button:hover:not(:disabled) { background: #4a3326; }
  .tm-motion small { color: #c9ae97; }
}