:root {
  --left: #e8402c;
  --right: #2f78e0;
  --ink: #3a2a1e;
  --card: #fff8ec;
  --wood: #edae55;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #2b211b; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
body { display: grid; place-items: center; font-family: "Trebuchet MS", "Arial Rounded MT Bold", Verdana, sans-serif; color: var(--ink); }
button { font: inherit; color: inherit; border: 0; cursor: pointer; touch-action: none; }
[hidden] { display: none !important; }

#stage { position: relative; width: min(100vw, 177.78vh); aspect-ratio: 16 / 9; container-type: size; overflow: hidden; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 46%, transparent 52%, #2a150866 100%); }
#hud { position: absolute; inset: 0; pointer-events: none; }

#stage input { user-select: text; -webkit-user-select: text; }
.tickets { position: absolute; top: 1cqh; width: 26.4cqw; display: flex; gap: .6cqw; }
.tickets.left { left: 1cqw; }
.tickets.right { right: 1cqw; flex-direction: row-reverse; }
.ticket { position: relative; flex: 0 0 8.4cqw; height: 14cqh; background: var(--card); border-radius: .8cqw; box-shadow: 0 .3cqw 0 #0003; overflow: hidden; text-align: center; padding-top: .9cqh; }
.ticket em { position: absolute; left: 0; top: 0; height: .9cqh; background: #5fb84a; }
.ticket em.low { background: #e8402c; }
.ticket img { height: 7cqh; display: block; margin: 0 auto; }
.ticket b { display: block; font-size: .92cqw; line-height: 1.1; white-space: nowrap; }
.dots { display: flex; justify-content: center; gap: .25cqw; margin-top: .4cqh; }
.dots u { width: .62cqw; height: .62cqw; border-radius: 50%; background: #d9c8ad; text-decoration: none; }
.dots u.done { background: #5fb84a; }

#question { position: absolute; top: 1cqh; left: 27.8cqw; width: 44.4cqw; min-height: 18cqh; padding: 1cqh 1.2cqw 1cqh 10cqw; background: var(--card); border-radius: 1cqw; box-shadow: 0 .4cqw 0 #0003; border: .3cqw solid transparent; display: flex; flex-direction: column; justify-content: center; text-align: center; }
#question.left { border-color: var(--left); }
#question.right { border-color: var(--right); }
#clock { position: absolute; left: 1cqw; top: 50%; transform: translateY(-50%); width: 8.2cqw; font-size: 3.5cqw; font-weight: 800; line-height: 1; text-align: center; color: #c9331f; }
.q-track { position: absolute; left: 1.2cqw; right: 1.2cqw; bottom: .7cqh; height: .8cqh; background: #e7d9c2; border-radius: 1cqw; overflow: hidden; }
#q-bar { height: 100%; width: 100%; background: #f2a32b; }
#q-text { margin: 0 0 .8cqh; font-size: 2.3cqw; font-weight: 700; line-height: 1.15; }

.side { position: absolute; bottom: 1cqh; width: 48.4cqw; padding: .6cqh .8cqw .9cqh; border-radius: 1cqw; background: #fff8ecE8; box-shadow: 0 .4cqw 0 #0003; pointer-events: auto; }
.side.left { left: .8cqw; border-top: .5cqh solid var(--left); }
.side.right { right: .8cqw; border-top: .5cqh solid var(--right); }
.side-head { display: flex; align-items: center; gap: .9cqw; font-size: 1.5cqw; margin-bottom: .5cqh; height: 3.4cqh; white-space: nowrap; }
.side-head small { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 1.1cqw; font-weight: 700; }
.penalty { flex: none; padding: .2cqh .8cqw; border-radius: .6cqw; background: #c9331f; box-shadow: 0 .18cqw 0 #8a2114; color: #fff; font-size: 1.15cqw; font-weight: 700; }
.penalty:active { transform: translateY(.15cqw); box-shadow: none; }
.score { position: absolute; top: 16cqh; width: 12cqw; padding: .3cqh .4cqw .5cqh; border-radius: 1cqw; background: var(--card); box-shadow: 0 .35cqw 0 #0003; text-align: center; }
.score.left { left: 1cqw; border-top: .7cqh solid var(--left); }
.score.right { right: 1cqw; border-top: .7cqh solid var(--right); }
.score small { display: block; font-size: 1.1cqw; font-weight: 700; line-height: 1.1; }
.coin { display: block; color: var(--ink); font-size: 3.8cqw; font-weight: 800; line-height: 1; }
.answers { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 10.4cqh; gap: .6cqw; }
.answer { display: flex; align-items: center; gap: .8cqw; height: 10.4cqh; min-width: 0; overflow: hidden; padding: .4cqh .8cqw; border-radius: .7cqw; background: var(--wood); box-shadow: 0 .25cqw 0 #a86a35; text-align: left; font-size: var(--answer-size, 2cqw); font-weight: 700; line-height: 1.1; }
.answer i { flex: none; width: 3cqw; height: 3cqw; display: grid; place-items: center; border-radius: 50%; background: var(--card); font-style: normal; }
.answer:active { transform: translateY(.2cqw); box-shadow: none; }
.answers.locked .answer { opacity: .45; }
.answer.right { background: #6fc75a; box-shadow: 0 .25cqw 0 #3f8f35; opacity: 1 !important; }
.answer.out { opacity: .35; }

#banner { position: absolute; left: 50%; top: 54cqh; z-index: 3; transform: translate(-50%, 0) scale(.7); padding: .7cqh 2cqw; border-radius: 3cqw; background: #fff; font-size: 2.6cqw; font-weight: 700; opacity: 0; transition: .18s; white-space: nowrap; }
#banner.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
#banner.left { background: var(--left); color: #fff; }
#banner.right { background: var(--right); color: #fff; }

#choice, #results { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqh; background: #2b211bB8; }
#choice h1, #results h1 { margin: 0; color: #fff; font-size: 3.6cqw; }
.pick-row { display: flex; gap: 2cqw; }
.pick { width: 44cqw; padding: 1.4cqh 1.2cqw; border-radius: 1.2cqw; background: var(--card); text-align: center; }
.pick.left { border-top: 1cqh solid var(--left); }
.pick.right { border-top: 1cqh solid var(--right); }
.pick h2 { margin: 0; font-size: 2cqw; }
.pick p { margin: .2cqh 0 1cqh; font-size: 1.4cqw; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7cqw; }
.chef-card { position: relative; padding: .5cqh .3cqw; border-radius: .9cqw; background: #f3e4cb; border: .3cqw solid transparent; display: flex; flex-direction: column; align-items: center; font-size: 1.15cqw; }
.chef-card img { width: 100%; pointer-events: none; animation: chef-idle 2.2s ease-in-out infinite; transform-origin: 50% 90%; }
.chef-card:nth-child(2n) img { animation-delay: -.7s; }
.chef-card:nth-child(3n) img { animation-delay: -1.4s; }
.chef-card:hover img { animation-duration: .7s; }
.chef-card.picked img { visibility: hidden; }
.chef-card.picked { animation: card-pop .4s ease-out; }
.star { position: absolute; left: 50%; top: 50%; width: .9cqw; height: .9cqw; border-radius: 50%; background: #ffd23f; pointer-events: none; animation: star .55s ease-out forwards; }
#picker { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@keyframes chef-idle { 0%, 100% { transform: translateY(0) rotate(-1.5deg) scaleY(1); } 50% { transform: translateY(-3%) rotate(1.5deg) scaleY(1.02); } }
@keyframes card-pop { 0% { transform: scale(1); } 40% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes star { 0% { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-7cqw) scale(.2); opacity: 0; } }
.chef-card span { font-size: 1cqw; }
.pick.left .picked { border-color: var(--left); background: #ffd9d2; }
.pick.right .picked { border-color: var(--right); background: #d5e5ff; }
#start, #results button { padding: 1.4cqh 3.5cqw; border-radius: 1cqw; background: #6fc75a; box-shadow: 0 .35cqw 0 #3f8f35; color: #fff; font-size: 2.3cqw; font-weight: 700; }
#start:disabled { background: #998a78; box-shadow: none; cursor: default; }

#result-body { display: flex; gap: 2cqw; }
#result-body div { width: 26cqw; padding: 1.5cqh 1cqw; border-radius: 1cqw; background: var(--card); text-align: center; font-size: 1.7cqw; }
#result-body .left { border-top: 1cqh solid var(--left); }
#result-body .right { border-top: 1cqh solid var(--right); }
#result-body h3, #result-body p { margin: .4cqh 0; }

.teacher-row { display: flex; align-items: center; gap: .8cqw; padding: .6cqh 1cqw; border-radius: 1cqw; background: var(--card); font-size: 1.25cqw; font-weight: 700; }
#chapters { display: flex; gap: .5cqw; }
.chapter { padding: .5cqh .8cqw; border-radius: 2cqw; background: #e7d9c2; color: #8a7a68; font-weight: 700; }
.chapter.on { background: #6fc75a; color: #fff; }
.teacher-row label { margin-left: .6cqw; }
.teacher-row input { width: 3.6cqw; font: inherit; text-align: center; touch-action: auto; }
.turn { padding: .1cqh .7cqw; border-radius: 2cqw; background: #eadcc4; font-size: 1.15cqw; font-weight: 700; }
#pause { position: absolute; left: 28.3cqw; top: 2cqh; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: #e7d9c2; font-size: 1.1cqw; font-weight: 700; pointer-events: auto; }
#paused { position: absolute; inset: 0 0 30cqh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqh; background: #2b211bC8; }
#paused h1 { margin: 0; color: #fff; font-size: 3.6cqw; }
.pause-buttons { display: flex; gap: 1.2cqw; }
.pause-buttons button { padding: 1.6cqh 2.4cqw; border-radius: 1cqw; background: var(--card); font-size: 1.9cqw; font-weight: 700; box-shadow: 0 .3cqw 0 #0005; }

#explain { position: absolute; z-index: 4; left: 50%; top: 44.5cqh; width: 56cqw; padding: 1.8cqh 2.4cqw 2.2cqh; transform: translate(-50%, -50%); border-radius: 1.4cqw; background: var(--card); box-shadow: 0 0 0 200cqw #2a150899, 0 .6cqw 1.8cqw #0007; border-top: 1.2cqh solid #5fb84a; text-align: center; pointer-events: auto; animation: explain-in .28s cubic-bezier(.2, 1.5, .4, 1); }
#explain.left { border-top-color: var(--left); }
#explain.right { border-top-color: var(--right); }
#explain-head { margin: 0; font-size: 1.8cqw; font-weight: 700; }
#explain-answer { margin: .8cqh 0; color: #3f8f35; font-size: 3.4cqw; line-height: 1.1; }
#explain-text { margin: 0 0 1.8cqh; font-size: 2.3cqw; line-height: 1.25; }
#next-question { padding: 1.2cqh 3cqw; border-radius: 1cqw; background: #6fc75a; box-shadow: 0 .35cqw 0 #3f8f35; color: #fff; font-size: 2.3cqw; font-weight: 700; }
@keyframes explain-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.85); } }
.side, .score, #question, #pause, #mute, .tickets, .popup { z-index: 5; }
.popup.bad { background: #c9331f; color: #fff; }
.popup { position: absolute; transform: translate(-50%, 0); padding: .3cqh .9cqw; border-radius: 2cqw; background: #f6c63c; font-size: 2cqw; font-weight: 800; animation: popup 1.2s ease-out forwards; }
@keyframes popup {
  0% { opacity: 0; transform: translate(-50%, 2cqh) scale(.6); }
  18% { opacity: 1; transform: translate(-50%, 0) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -9cqh) scale(1); }
}

#mute { position: absolute; left: 66.2cqw; top: 15.8cqh; padding: .2cqh .8cqw; border-radius: 2cqw; background: #fff8ecD8; font-size: .95cqw; font-weight: 700; pointer-events: auto; }
#clock.low { animation: clock-pulse .8s ease-in-out infinite; }
@keyframes clock-pulse { 50% { transform: translateY(-50%) scale(1.14); } }
#q-bar.low { background: #e8402c; }
.coin.bump { animation: coin-bump .35s ease-out; }
@keyframes coin-bump { 40% { transform: scale(1.4); } }
#results { background: #2b211b73; overflow: hidden; }
#results h1 { text-shadow: 0 .3cqw 0 #0006; animation: title-in .6s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes title-in { from { transform: scale(.4); opacity: 0; } }
#confetti { position: absolute; inset: 0; pointer-events: none; }
#confetti i { position: absolute; top: -3cqh; width: .9cqw; height: 1.5cqh; border-radius: .15cqw; animation: confetti linear infinite; }
@keyframes confetti { to { transform: translateY(108cqh) rotate(720deg); } }

#loading { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2cqh; padding-top: 7cqh; background: radial-gradient(ellipse at 50% 58%, #ffd98f 0, #f2ac55 34%, #c8732c 72%, #80431a 100%); transition: opacity .35s, transform .35s; text-align: center; overflow: hidden; }
.load-scene { position: absolute !important; inset: 0; background: url("textures/loading.jpg") center / cover; opacity: .72; }
#loading > * { position: relative; }
#loading.leaving { opacity: 0; transform: scale(1.06); }
.load-awning { position: absolute !important; left: 0; right: 0; top: 0; height: 9cqh; z-index: 2; background: linear-gradient(#ffffff40, transparent 45%, #3a1a0640), repeating-linear-gradient(90deg, #e2472f 0 5cqw, #fbf4e6 5cqw 10cqw); box-shadow: 0 1.6cqh 2cqh #3a1a0680; animation: load-wave 1.6s ease-in-out infinite alternate; transform-origin: top; }
.load-beams { position: absolute !important; inset: -12% -8%; pointer-events: none; mix-blend-mode: soft-light; background: linear-gradient(112deg, transparent 12%, #fff6 18%, #fff 25%, transparent 33%, transparent 40%, #fffb 46%, transparent 55%, transparent 62%, #fff8 68%, transparent 76%); animation: load-beams 7s ease-in-out infinite alternate; }
.load-title { margin: 0; font-size: 7cqw; line-height: 1; color: #fff8ec; text-shadow: 0 .12cqw 0 #fff, 0 .45cqw 0 #a84a22, 0 1cqw 1.6cqw #3a1a0699, 0 0 3cqw #ffe2a0aa; animation: load-title .7s cubic-bezier(.2, 1.7, .4, 1) both; }
.load-title span { color: #fff1a8; }
.load-glow { position: absolute !important; left: 50%; top: 56%; width: 56cqw; height: 44cqh; transform: translate(-50%, -50%); background: radial-gradient(ellipse, #fff3c0bb 0, #ffd98f55 45%, transparent 70%); pointer-events: none; }
.load-stove { width: 34cqw; filter: drop-shadow(0 .7cqh .7cqh #3a1a0666); }
.load-steam circle { fill: #fff; opacity: 0; animation: load-steam 1.5s ease-out infinite; }
.load-steam circle:nth-child(2) { animation-delay: .4s; }
.load-steam circle:nth-child(3) { animation-delay: .8s; }
.load-hop { animation: load-hop 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.load-hop.two { animation-delay: .25s; }
.load-hop.three { animation-delay: .5s; }
.load-lid { animation: load-lid .6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.load-flames path { fill: url(#fire); animation: load-flame .32s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: bottom; }
.load-flames path:nth-child(2) { animation-delay: .1s; }
.load-fire-glow { animation: load-fire .4s ease-in-out infinite alternate; }
.load-track { width: 40cqw; height: 2.6cqh; padding: .4cqh; border-radius: 2cqw; background: #5a2f12; box-shadow: inset 0 .3cqh .4cqh #0007, 0 .2cqh 0 #fff4; }
#load-bar { width: 3%; height: 100%; border-radius: 2cqw; background: linear-gradient(#b7ef9c, #58c043 55%, #3f9a30); box-shadow: 0 0 1cqw #a8ff8a99; transition: width .3s; }
#load-tip { min-height: 3cqh; margin: 0; padding: .1cqh 1.2cqw; border-radius: 2cqw; background: #fff8ecd0; color: #4a2609; font-size: 1.8cqw; font-weight: 700; text-shadow: 0 .1cqw 0 #ffe9bd; }
#load-start { padding: 1.3cqh 3.5cqw; border-radius: 1cqw; background: linear-gradient(#8fdc78, #58b843); box-shadow: 0 .35cqw 0 #3f8f35, 0 .9cqh 1.4cqh #3a1a0666; color: #fff; font-size: 2.4cqw; font-weight: 800; animation: load-ready .8s ease-in-out infinite alternate; }
@keyframes load-wave { to { transform: scaleY(1.1); } }
@keyframes load-beams { from { transform: translateX(-3%); opacity: .75; } to { transform: translateX(3%); opacity: 1; } }
@keyframes load-title { from { opacity: 0; transform: translateY(-5cqh) scale(.6); } }
@keyframes load-steam { 0% { opacity: 0; transform: translateY(0) scale(.5); } 25% { opacity: .85; } 100% { opacity: 0; transform: translateY(-11%) scale(1.5); } }
@keyframes load-hop { 0%, 100% { transform: translateY(52%) scale(.8); opacity: 0; } 25%, 70% { opacity: 1; } 50% { transform: translateY(-65%) rotate(35deg); opacity: 1; } }
@keyframes load-lid { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-5%) rotate(1.5deg); } }
@keyframes load-flame { to { transform: scaleY(1.25) scaleX(.85); } }
@keyframes load-fire { from { opacity: .65; } to { opacity: 1; } }
@keyframes load-ready { to { transform: scale(1.06); } }