.game-shell:has(.fq-game){grid-template-columns:minmax(0,1fr);gap:12px}
.game-shell:has(.fq-game) .game-status{flex-direction:row;align-items:center;justify-content:space-between;gap:18px;padding:10px 14px}
.game-shell:has(.fq-game) .game-status strong{max-width:68%}
.game-shell:has(.fq-game) .game-tools{flex-direction:row;padding:0}
.game-shell:has(.fq-game) .game-tools button{flex:1;padding:12px 8px;text-align:center}
.fq-game{width:min(100%,1140px);display:grid;gap:7px;color:#f3e6c8}
.fq-title{position:relative;margin:0;color:#f3e6c8;font:900 clamp(2rem,4.6vw,3.8rem)/.86 Georgia,serif;letter-spacing:.07em;text-align:center;text-shadow:2px 3px 0 #180f0a,0 0 24px #c6753e4d;text-transform:uppercase}
.fq-title span{display:block;margin-bottom:5px;color:#d6a23c;font:800 .36em "Barlow Condensed",system-ui,sans-serif;letter-spacing:.26em}
.fq-title::before,.fq-title::after{content:"";position:absolute;top:20%;width:min(13vw,145px);height:1px;background:linear-gradient(90deg,transparent,#b9673f)}
.fq-title::before{right:calc(50% + min(24vw,270px))}.fq-title::after{left:calc(50% + min(24vw,270px));background:linear-gradient(90deg,#b9673f,transparent)}
.fq-box{--time-ratio:1;position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-areas:"summary" "question" "choices" "menu" "actions" "prompt";gap:10px;padding:15px 26px 12px;border:2px solid #9a5a3b;border-radius:7px;background-color:#1d2422;background-image:linear-gradient(90deg,#121716f2,#1d2422bf 23%,#1d2422a8 77%,#121716f2),linear-gradient(0deg,#24140ed4,#1d242259),url("/assets/covers/food-quiz.webp");background-position:center 58%;background-size:cover;box-shadow:inset 0 0 0 5px #0b0e0d,inset 0 0 0 6px #70432e,0 6px 0 #090b0a,0 15px 34px #000d}
.fq-box::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 26%,#e6a84920 0 22%,transparent 58%),linear-gradient(90deg,#34150f72,transparent 25% 75%,#2635256b)}
.fq-box::after{content:"";position:absolute;inset:8px;z-index:1;pointer-events:none;border:1px solid #d08b5a52;clip-path:polygon(0 0,38% 0,40% 2px,60% 2px,62% 0,100% 0,100% 100%,62% 100%,60% calc(100% - 2px),40% calc(100% - 2px),38% 100%,0 100%)}
.fq-summary{grid-area:summary;position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,1fr);margin-inline:55px;border:2px solid #a85f3d;border-radius:7px;background:#eadbbe;box-shadow:inset 0 0 0 2px #fff4d7,0 4px 0 #3e2217,0 8px 16px #0009;color:#202824}
.fq-summary span{position:relative;display:grid;gap:2px;padding:8px 5px;text-align:center}.fq-summary span+span{border-left:1px solid #b5966f}
.fq-summary small{display:flex;align-items:center;justify-content:center;gap:4px;color:#6f785a;font:900 .49rem "Barlow Condensed",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.fq-summary small svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.fq-summary strong{color:#202824;font:900 1rem Georgia,serif}.fq-summary span:nth-child(3) strong{color:#9a472f}.fq-summary span:nth-child(4) strong{color:#607957}
.fq-summary span:last-child::before{content:"";position:absolute;left:8px;right:8px;bottom:4px;height:3px;background:#c4ae8c}.fq-summary span:last-child::after{content:"";position:absolute;left:8px;bottom:4px;width:calc((100% - 16px)*var(--time-ratio));height:3px;background:#b9673f;box-shadow:0 0 6px #b9673f;transition:width .2s linear}
.fq-question-panel{grid-area:question;position:relative;z-index:2;width:min(100%,930px);min-height:164px;margin:auto;display:grid;place-content:center;gap:10px;padding:31px 78px 24px;border:2px solid #aa6b45;border-radius:5px;background-color:#f3e6c8;color:#1d2422;background-image:radial-gradient(circle at 10% 25%,#8e7050 0 1px,transparent 1.6px),radial-gradient(circle at 90% 75%,#8e7050 0 1px,transparent 1.6px),repeating-linear-gradient(0deg,transparent 0 28px,#806d5014 29px);background-size:93px 87px,119px 103px,100% 29px;box-shadow:inset 0 0 0 4px #fff6dd,inset 0 0 0 5px #9c7954,0 7px 18px #000b;text-align:center}
.fq-question-panel::before{content:"RECIPE CARD";position:absolute;top:0;left:50%;padding:5px 22px;border:1px solid #a86642;border-top:0;background:#c97a4d;color:#fff1d4;font:900 .48rem "Barlow Condensed",system-ui,sans-serif;letter-spacing:.22em;transform:translateX(-50%)}
.fq-station{color:#5f744f;font:900 .7rem "Barlow Condensed",system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase}.fq-station::before,.fq-station::after{content:"";display:inline-block;width:52px;height:1px;margin:0 14px 3px;background:#738261}
.fq-question{max-width:800px;margin:0;font:700 clamp(1.26rem,2.5vw,2rem)/1.17 Georgia,serif;letter-spacing:-.012em;text-wrap:balance}
.fq-mitts{position:absolute;right:16px;top:13px;display:flex;align-items:center;gap:7px}.fq-mitts small{color:#5f4a36;font:900 .4rem "Barlow Condensed",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.fq-mitts span{position:relative;width:17px;height:20px;border:1px solid #78553f;border-radius:8px 8px 6px 6px;background:#997c60;opacity:.25;transform:rotate(8deg)}.fq-mitts span::before{content:"";position:absolute;left:-5px;top:7px;width:7px;height:9px;border:1px solid inherit;border-right:0;border-radius:5px 0 0 5px;background:inherit}.fq-mitts span.active{border-color:#8d3e32;background:#b9673f;box-shadow:inset 0 0 0 2px #d99367,0 0 5px #c9774f;opacity:1}
.fq-choices{grid-area:choices;position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;width:min(100%,950px);margin:auto}
.fq-choice{position:relative;overflow:hidden;min-height:68px;display:grid;grid-template-columns:52px 1fr 70px;align-items:center;gap:10px;padding:9px 14px;border:2px solid #a35f3d;border-radius:6px;background:#efe0c2;color:#1d2422;box-shadow:inset 0 0 0 3px #fff3d6,0 4px 0 #3d251a,0 8px 15px #0009;cursor:pointer;transition:transform .14s,border-color .14s,background .14s,box-shadow .14s,opacity .14s}
.fq-choice::before{content:"";position:absolute;inset:5px;z-index:0;pointer-events:none;border:1px solid #957e5f69;background:repeating-linear-gradient(90deg,transparent 0 18px,#6a53310a 19px 20px)}
.fq-choice:hover:not(:disabled),.fq-choice:focus-visible{z-index:3;transform:translateY(-2px);border-color:#d6a23c;outline:3px solid #d6a23c;outline-offset:2px;background:#fff0ce;box-shadow:inset 0 0 0 3px #fff8e6,0 4px 0 #5e3a23,0 9px 18px #000b}
.fq-choice>span{position:relative;z-index:1;width:44px;height:44px;display:grid;place-items:center;border:1px solid #46553f;border-radius:4px;background:#728b66;color:#fff3d5;font:900 1.4rem Georgia,serif;box-shadow:inset 0 0 0 3px #8fa083}
.fq-choice strong{position:relative;z-index:1;min-width:0;font:800 clamp(.84rem,1.65vw,1.08rem)/1.16 "Barlow Condensed",system-ui,sans-serif;letter-spacing:.035em;text-align:center;text-transform:uppercase;text-wrap:balance}.fq-choice i{position:relative;z-index:1;color:#887052;font:900 .38rem "Barlow Condensed",system-ui,sans-serif;letter-spacing:.08em;text-align:right;text-transform:uppercase}
.fq-choice.hinted{border-color:#d6a23c;box-shadow:inset 0 0 0 3px #fff1c5,0 0 0 4px #d6a23c,0 8px 18px #d6a23c55;animation:fq-pulse .68s ease-in-out infinite alternate}.fq-choice.correct{border-color:#728b66;background:#d9e1c9;color:#213023;box-shadow:inset 0 0 0 3px #edf3df,0 4px 0 #40583e}.fq-choice.wrong{border-color:#8d3e32;background:#d79a7f;color:#3b1711;animation:fq-shake .24s linear}.fq-choice.rejected{border-color:#746b5e;background:#aaa394;color:#3e3b35;box-shadow:none;opacity:.68}.fq-choice:disabled{cursor:default}
.fq-menu{grid-area:menu;position:relative;z-index:2;display:flex;justify-content:center;gap:62px;padding:18px 34px 25px;margin:3px auto 0;border:2px solid #96724d;border-radius:4px;background:#efe0c5;box-shadow:inset 0 0 0 3px #fff1d5,0 4px 0 #3e281b;color:#34422f}.fq-menu::before{content:"TASTING MENU";position:absolute;bottom:calc(100% + 4px);left:50%;color:#d9a94d;font:900 .45rem "Barlow Condensed",system-ui,sans-serif;letter-spacing:.22em;transform:translateX(-50%)}
.fq-menu span{position:relative;width:32px;aspect-ratio:1;display:grid;place-items:center;border:2px solid #718063;border-radius:50%;background:#ece2ca;color:#506048;font:900 .72rem Georgia,serif;box-shadow:0 0 0 3px #fff1d4}.fq-menu span::after{content:attr(data-label);position:absolute;top:calc(100% + 4px);left:50%;font:900 .38rem "Barlow Condensed",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;transform:translateX(-50%);white-space:nowrap}.fq-menu span+span::before{content:"";position:absolute;right:100%;top:50%;width:65px;height:5px;background:linear-gradient(#8d9b7b,#8d9b7b) center/100% 2px no-repeat;transform:translateY(-50%)}.fq-menu span.active{border-color:#d29a32;background:#fff2c8;color:#8d3e32;box-shadow:0 0 0 3px #f9e3aa,0 0 12px #d6a23c}.fq-menu span.done{border-color:#58704f;background:#728b66;color:transparent}.fq-menu span.done::before{z-index:2}.fq-menu span.done::after{color:#34422f}.fq-menu span.done+span::before{background:linear-gradient(#728b66,#728b66) center/100% 3px no-repeat}
.fq-menu span.done{font-size:.72rem;color:#fff2d4}.fq-menu span.done::before{content:"";position:absolute;inset:auto;right:100%;top:50%;width:65px;height:5px;display:block;background:linear-gradient(#728b66,#728b66) center/100% 3px no-repeat;transform:translateY(-50%)}.fq-menu span.done:first-child::before{content:none}
.fq-actions{grid-area:actions;position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,250px));justify-content:center;gap:14px}.fq-actions button{min-height:46px;display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid #879677;border-radius:5px;background:#5d7353;color:#fff0d0;font:900 .74rem "Barlow Condensed",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;box-shadow:inset 0 0 0 2px #788a6f,0 3px 0 #243020;cursor:pointer}.fq-actions button:last-child{border-color:#a95940;background:#8d3e32;box-shadow:inset 0 0 0 2px #a95545,0 3px 0 #401611}.fq-actions button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.fq-actions button:hover:not(:disabled),.fq-actions button:focus-visible{outline:3px solid #d6a23c;outline-offset:2px;transform:translateY(-1px)}.fq-actions button:disabled{opacity:.38;cursor:default;transform:none}
.fq-prompt{grid-area:prompt;position:relative;z-index:2;margin:0;padding-top:5px;border-top:1px solid #8e6745;color:#d5c3a2;font-size:.59rem;line-height:1.35;text-align:center}.fq-game.paused .fq-question-panel,.fq-game.paused .fq-choices,.fq-game.paused .fq-menu{opacity:.42}.fq-game.complete .fq-title{color:#d8e8c8;text-shadow:2px 3px 0 #253b27,0 0 24px #78976c66}
@keyframes fq-shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}@keyframes fq-pulse{to{box-shadow:inset 0 0 0 3px #fff1c5,0 0 0 5px #d6a23c,0 9px 19px #d6a23c77}}
@media(prefers-reduced-motion:reduce){.fq-choice,.fq-summary span:last-child::after{transition:none}.fq-choice.wrong,.fq-choice.hinted{animation:none}}
@media(max-width:720px){.game-shell:has(.fq-game) .game-status{align-items:flex-start;flex-direction:column;gap:7px}.game-shell:has(.fq-game) .game-status strong{max-width:none}.fq-title{font-size:1.95rem;letter-spacing:.06em}.fq-title::before,.fq-title::after{display:none}.fq-box{gap:8px;padding:10px 9px;background-position:center}.fq-summary{margin-inline:3px}.fq-summary span{padding:7px 2px}.fq-summary small{font-size:.36rem}.fq-summary strong{font-size:.72rem}.fq-question-panel{min-height:132px;padding:23px 38px 18px}.fq-question-panel::before{font-size:.38rem;padding:4px 12px}.fq-station{font-size:.55rem}.fq-station::before,.fq-station::after{width:28px;margin-inline:8px}.fq-question{font-size:clamp(1.05rem,4.4vw,1.44rem)}.fq-mitts{right:10px;top:9px}.fq-choices{gap:8px}.fq-choice{min-height:59px;grid-template-columns:36px 1fr;padding:7px 9px}.fq-choice>span{width:32px;height:38px;font-size:1.13rem}.fq-choice strong{font-size:.78rem}.fq-choice i{display:none}.fq-menu{gap:35px;padding-inline:20px}.fq-menu span+span::before{width:38px}.fq-actions button{min-height:46px}.fq-prompt{font-size:.52rem}}
@media(max-width:430px){.fq-title{font-size:1.57rem}.fq-title span{font-size:.39em}.fq-summary small{font-size:.29rem;letter-spacing:.06em}.fq-summary strong{font-size:.59rem}.fq-question-panel{min-height:118px;padding:21px 15px 15px}.fq-station{font-size:.46rem}.fq-station::before,.fq-station::after{width:14px;margin-inline:5px}.fq-question{font-size:.98rem}.fq-mitts{position:static;justify-content:center}.fq-choices{grid-template-columns:1fr}.fq-choice{min-height:54px}.fq-choice strong{font-size:.77rem}.fq-menu{gap:21px;padding:15px 11px 22px}.fq-menu span{width:27px}.fq-menu span+span::before{width:24px}.fq-menu span::after{font-size:.3rem}.fq-prompt{display:none}}