@font-face{font-family:"OpenAI Sans";src:url("/assets/fonts/openai-sans-hangul.ttf") format("truetype");font-style:normal;font-weight:300 700;font-display:swap}
:root{color-scheme:light;--ivory:#fff7e9;--ink:#4A2A1A}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:var(--ivory);color:var(--ink);font-family:"OpenAI Sans",sans-serif}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:2px solid var(--ink);outline-offset:7px}button[hidden],[hidden]{display:none!important}#game{height:100%;height:100vh;height:100dvh;display:flex;justify-content:center;align-items:center;user-select:none;-webkit-user-select:none;touch-action:manipulation}#stage{position:relative;width:min(100vw,56.25vh);width:min(100vw,56.25dvh);height:min(177.7778vw,100vh);height:min(177.7778vw,100dvh);overflow:hidden;isolation:isolate}canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#live{position:absolute;top:3.6%;left:0;width:100%;text-align:center;font-size:clamp(30px,5.5vh,48px);font-size:clamp(30px,5.5dvh,48px);font-weight:600;letter-spacing:-.06em;font-variant-numeric:tabular-nums;pointer-events:none}#live small{font-size:.47em;font-weight:400;letter-spacing:-.02em;margin-left:6px}#ready h1{position:absolute;top:3.3%;left:0;width:100%;font-size:clamp(22px,3.8vh,33px);font-size:clamp(22px,3.8dvh,33px);text-align:center;letter-spacing:-.08em;font-weight:600;margin:0}.start-area{position:absolute;bottom:3.4%;width:100%;text-align:center}.primary{background:var(--ink);color:var(--ivory);border:0;border-radius:2px;padding:13px 32px;min-width:132px;font-weight:600;font-size:15px;letter-spacing:-.03em}.primary:active{transform:translateY(1px);background:#4A2A1A}.start-area p{font-size:11px;margin:13px 0 0;color:#7A5A48}.start-area .pc{font-size:9px;opacity:.7;margin-top:5px}.mute{position:absolute;top:3.5%;right:5%;border:0;background:none;padding:7px;display:grid;place-items:center;z-index:5;opacity:.72}#result{position:absolute;top:22%;left:0;width:100%;text-align:center}#result .label{font-size:12px;font-weight:500;letter-spacing:.02em;margin:0 0 12px}#score{font-size:clamp(43px,8vh,72px);font-size:clamp(43px,8dvh,72px);font-weight:500;line-height:1.1;letter-spacing:-.065em;font-variant-numeric:tabular-nums;margin:0}#score small{font-size:.34em;letter-spacing:-.02em;margin-left:6px}#result .best{font-size:12px;letter-spacing:-.02em;margin:22px 0 31px;color:#7A5A48}#result .best strong{color:var(--ink);font-weight:500;margin-left:12px}.result-actions{display:flex;flex-direction:column;align-items:center;gap:15px}.text-button{font-size:12px;padding:9px 16px;border:0;background:none;text-decoration:underline;text-underline-offset:5px}.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}#game[data-state=ready] #live,#game[data-state=playing] #ready,#game[data-state=playing] .mute,#game[data-state=bitten] #ready,#game[data-state=bitten] .mute,#game[data-state=result] #ready,#game[data-state=result] #live{display:none}#game[data-state=playing]{cursor:pointer}#game.failed #score{color:#aa5041}#stage.shake{animation:shake .36s ease-out}@keyframes shake{0%,100%{transform:translate(0)}15%{transform:translate(-5px,3px)}30%{transform:translate(5px,-3px)}45%{transform:translate(-4px,-2px)}60%{transform:translate(3px,2px)}80%{transform:translate(-1px,0)}}@media(prefers-reduced-motion:reduce){#stage.shake{animation:none}}@media(max-aspect-ratio:9/16){#stage{width:100vw;height:100vh;height:100dvh}.pc{display:none}}@media(pointer:coarse){.pc{display:none}}

.leaderboard{width:210px;margin:23px auto 27px;text-align:left}.ranking-title{font-size:10px;letter-spacing:.08em;color:#7A5A48;margin:0 0 10px}.leaderboard ol{list-style:none;padding:0;margin:0}.leaderboard li{display:grid;grid-template-columns:32px 1fr 48px;align-items:center;min-height:30px;font-size:12px;color:#7A5A48;font-variant-numeric:tabular-nums}.leaderboard strong{font-weight:500;color:var(--ink)}.rank-note{font-size:9px;text-align:right}.leaderboard li.current{color:#7A5A48;background:#B89A8426}.leaderboard li.current strong{font-weight:700;color:#4A2A1A}#result{top:19%}

.reset-records{font-size:11px;color:#7A5A48;margin-top:-9px;text-decoration:none}

.choose-hint{position:absolute;top:9%;width:100%;text-align:center;font-size:12px;color:#7A5A48;margin:0}.flavor-choices{position:absolute;left:7.333333%;right:7.333333%;top:17%;height:71%;display:grid;grid-template-columns:repeat(4,1fr)}.flavor-choice{position:relative;border:0;background:none;padding:0;cursor:pointer}.flavor-choice span{position:absolute;top:96%;left:0;width:100%;text-align:center;font-size:12px;font-weight:400;color:#7A5A48}.flavor-choice:focus-visible{outline:1px dashed #B89A84;outline-offset:-5px}.flavor-choice:hover span{color:var(--ink)}#game[data-state=selecting] #ready,#game[data-state=selecting] #live,#game[data-state=selecting] .mute{display:none}.change-flavor{margin-top:-8px}#result{top:15.5%}.result-actions{gap:11px}

/* Target challenge and focused result screen. */
#stage{container-type:size}
#targetHint{position:absolute;top:12.5%;left:0;width:100%;margin:0;text-align:center;font-size:clamp(13px,2vh,17px);font-size:clamp(13px,2cqh,17px);line-height:1.3;letter-spacing:.02em;color:var(--ink);pointer-events:none}
#targetHint strong{display:block;font-weight:600}#targetHint small{display:block;margin-top:4px;font-size:clamp(9px,1.4vh,11px);font-size:clamp(9px,1.4cqh,11px);line-height:1.35;font-weight:400;letter-spacing:-.025em;color:#7A5A48}
#game[data-state=playing] #targetHint{top:10.4%}
#game[data-state=selecting] #targetHint,#game[data-state=result] #targetHint,#game[data-state=bitten] #targetHint{display:none}
#ready .reset-records{position:absolute;bottom:2.5%;left:50%;transform:translateX(-50%);white-space:nowrap;margin:0;font-size:10px;padding:10px}
#result{top:12%;padding:0 8%}

#grade{font-family:"OpenAI Sans",sans-serif;font-size:clamp(76px,14vh,118px);font-size:clamp(76px,14cqh,118px);font-weight:700;line-height:.98;letter-spacing:-.065em;margin:0 0 15px}
#grade.special{font-size:clamp(62px,12vh,100px);font-size:clamp(62px,12cqh,100px);color:#4A2A1A}
#game.failed #grade{font-size:clamp(64px,11vh,94px);font-size:clamp(64px,11cqh,94px);color:#aa5041;letter-spacing:-.08em}
#score{font-size:clamp(26px,4.8vh,39px);font-size:clamp(26px,4.8cqh,39px);font-weight:500;letter-spacing:-.05em;margin:0;line-height:1.1}
#score small{font-size:.45em;margin-left:5px}
.record-note{height:15px;font-size:10px;color:#7A5A48;margin:10px 0 0}
.leaderboard{width:min(100%,260px);margin:20px auto 24px}
.leaderboard li{grid-template-columns:29px 1fr 55px 45px;min-height:31px;font-size:12px}
.rank-diff{font-size:10px;white-space:nowrap;color:#7A5A48}
.result-actions{gap:10px}
.action-pair{display:flex;justify-content:center;gap:10px;width:100%}
.action-pair .primary{min-width:0;width:125px;padding:13px 10px;font-size:14px}
.secondary{background:transparent;color:var(--ink);border:1px solid #4A2A1A66}
.secondary:active{background:#4A2A1A10}
.change-flavor{margin:0;font-size:11px;padding:8px 14px}
#shareStatus{height:13px;font-size:10px;margin:-4px 0 0;color:#7A5A48}
.follow-link{display:inline-block;margin-top:15px;border:1px solid #4A2A1A2b;border-radius:2px;padding:9px 16px;font-size:11px;color:#4A2A1A;text-decoration:none}
.follow-link:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media(max-height:650px){#result{top:10%}#grade{margin-bottom:9px}.leaderboard{margin:12px auto 15px}.leaderboard li{min-height:26px}.follow-link{margin-top:5px}.action-pair .primary{padding:10px}.record-note{margin-top:5px}}

/* Ingredient preview and shared challenges. */
input{font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid #4A2A1A50;border-radius:0;padding:7px 3px;outline:none;user-select:text;-webkit-user-select:text}
input:focus{border-bottom-color:var(--ink)}input::placeholder{color:#B89A84;font-size:11px}input[aria-invalid=true]{border-color:#ad6252}
.ingredient-wrap{position:absolute;top:16%;left:8%;width:84%;text-align:center}.ingredient-wrap label{display:flex;justify-content:center;align-items:center;gap:9px;font-size:13px}.ingredient-wrap input{width:154px;text-align:center;font-size:15px;min-width:0}.ingredient-wrap p{font-size:10px;color:#ad6252;height:14px;margin:6px 0 0}
.flavor-choices{top:25%;height:66%}.flavor-choice span{top:96%}.custom-preview{position:absolute;top:25%;bottom:9%;left:34%;width:32%;border:0;background:transparent;touch-action:manipulation}.custom-preview:disabled{cursor:default}.custom-preview:focus-visible{outline:1px dashed #B89A84}
#challengeHeading{position:absolute;top:4%;left:12%;width:76%;margin:0;text-align:center;font-size:16px;font-weight:600;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}.challenge h1,.challenge .choose-hint{display:none}
#result{top:8.5%}.result-snack{font-size:11px;color:#7A5A48;margin:0 0 8px}#grade{font-size:clamp(70px,12vh,102px);font-size:clamp(70px,12cqh,102px);margin-bottom:10px}#grade.special{font-size:clamp(60px,10.5vh,88px);font-size:clamp(60px,10.5cqh,88px)}#score{font-size:clamp(25px,4.4vh,36px);font-size:clamp(25px,4.4cqh,36px)}.record-note{margin-top:6px}
.leaderboard{margin:14px auto 14px}.leaderboard li{min-height:28px}#comparison{font-size:11px;line-height:1.5;margin:0 auto 10px;color:#7A5A48;max-width:270px;word-break:keep-all}
.sender-wrap{width:260px;max-width:100%;text-align:right}.sender-wrap input{width:125px;text-align:center;font-size:12px}.sender-wrap p{font-size:10px;color:#ad6252;margin:3px 0 0;min-height:0}.sender-wrap p:empty{display:none}.result-actions{gap:8px}.follow-link{margin-top:9px}.primary:disabled{opacity:.45;cursor:default}
@media(max-height:650px){#result{top:6%}.result-snack{margin-bottom:5px}#grade{font-size:12vh;font-size:12cqh}.leaderboard{margin:8px auto}.leaderboard li{min-height:24px}.record-note{height:12px;margin-top:4px}.action-pair .primary{padding:9px}.follow-link{margin-top:3px;padding:7px 12px}.change-flavor{padding:5px 10px}#shareStatus{height:10px}.sender-wrap input{padding:5px 3px}}

#game[data-state=ready] #targetHint{display:none}#ready h1{font-size:clamp(22px,3.5vh,31px);font-size:clamp(22px,3.5dvh,31px);letter-spacing:-.055em}.ingredient-wrap{top:14.5%}
#shareDialog{width:min(420px,94vw);max-height:94vh;max-height:94dvh;padding:20px 22px 12px;border:1px solid #B89A84;background:var(--ivory);color:var(--ink);box-shadow:0 12px 65px #4A2A1A33;overflow-y:auto;overscroll-behavior:contain}
#shareDialog::backdrop{background:#4A2A1A77}.share-content{display:flex;flex-direction:column;align-items:center;gap:12px}#cardPreview{display:block;max-width:100%;width:auto;height:min(44vh,420px);height:min(44dvh,420px);object-fit:contain;user-select:auto;-webkit-user-select:auto;-webkit-touch-callout:default;box-shadow:0 2px 9px #4A2A1A15}
.share-content .sender-wrap{width:100%;text-align:center}.share-content .sender-wrap input{width:180px;font-size:14px}#shareCopy{width:100%;white-space:pre-wrap;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text;font-size:12px;line-height:1.7;margin:0;text-align:left}#shareDialog #shareStatus{margin:0;min-height:13px;height:auto;text-align:center}#closeShare{margin-top:-5px}#shareDialog .action-pair .primary{width:50%;max-width:160px}#result .leaderboard{margin:20px auto}.result-actions{gap:9px}#comparison{margin-top:-5px}
@media(max-height:650px){#cardPreview{height:38vh;height:38dvh}#shareDialog{padding:14px 18px 8px}.share-content{gap:9px}#result .leaderboard{margin:12px auto}}

#saveImage{text-align:center;text-decoration:none;cursor:pointer}#saveImage:disabled{opacity:.45;pointer-events:none}

@media(pointer:coarse){.ingredient-wrap input,.share-content .sender-wrap input{font-size:16px}}

#assetStatus{position:absolute;top:49%;left:0;width:100%;text-align:center;font-size:12px;color:#7A5A48;pointer-events:none}

/* Chocolate canopy: its longest drops end before the content safety line. */
#chocolateSky{position:fixed;inset:0 0 auto;width:100%;height:14vh;pointer-events:none;z-index:4}
#ready h1{top:15.5%;font-size:clamp(22px,3.5cqh,31px)}
.choose-hint{top:20.5%}.ingredient-wrap{top:23.5%}
#challengeHeading{top:15%;font-size:clamp(13px,2cqh,17px);line-height:1.4}
.flavor-choices{top:30%;height:60%}.flavor-choice span{top:100%;font-size:clamp(18px,3cqh,24px);font-weight:500}
.custom-preview{top:30%;bottom:10%}
.mute{top:15%;right:3%}
#game[data-state=playing] #live,#game[data-state=bitten] #live{top:17%;left:2%;width:39%;font-size:clamp(24px,4.2cqh,34px)}
#game[data-state=playing] #targetHint{top:24%;left:3%;width:36%;font-size:clamp(11px,1.8cqh,14px)}
#game[data-state=playing] #targetHint small{font-size:clamp(8px,1.3cqh,10px);padding:0 4px;word-break:keep-all}
#result{top:16%;padding:0 8%;height:81%}
#result .result-snack{font-size:clamp(10px,1.6cqh,13px);margin:0 0 5px}
#result #grade,#game.failed #grade{font-size:clamp(46px,8cqh,68px);margin:0 0 5px}
#result #grade.special{font-size:clamp(44px,7.5cqh,64px)}
#result #score{font-size:clamp(22px,3.6cqh,30px);height:4cqh}
#result .result-art{position:absolute;top:17.5cqh;height:22.5cqh;width:100%;left:0}
#result .leaderboard{position:absolute;top:41cqh;left:50%;transform:translateX(-50%);margin:0;width:70%}
#result .leaderboard li{min-height:3.5cqh;font-size:clamp(10px,1.6cqh,12px)}
#result .ranking-title{margin-bottom:1cqh}
#result #comparison{position:absolute;top:55cqh;left:10%;width:80%;margin:0;font-size:clamp(9px,1.4cqh,11px)}
#result .result-actions{position:absolute;top:60cqh;left:8%;width:84%;gap:1cqh}
#result .follow-link{position:absolute;top:73.5cqh;left:50%;transform:translateX(-50%);white-space:nowrap;margin:0;padding:1cqh 12px;font-size:clamp(9px,1.4cqh,11px)}
#result .primary{padding:1.5cqh 10px;font-size:clamp(12px,1.8cqh,14px)}
#result .change-flavor{padding:.8cqh 10px}

/* The game stays within a phone-width column; only the chocolate spans the viewport. */
:root{--choco-height:clamp(70px,12vh,120px);--choco-height:clamp(70px,12dvh,120px)}
#stage{width:min(100vw,450px,56.25vh);width:min(100vw,450px,56.25dvh);height:min(177.7777778vw,800px,100vh);height:min(177.7777778vw,800px,100dvh);aspect-ratio:9/16;--stage-height:min(177.7777778vw,800px,100dvh);--stage-top:calc((100dvh - var(--stage-height))/2);--canopy-local-bottom:max(0px,calc(var(--choco-height) - var(--stage-top)))}
#chocolateSky{height:calc(var(--choco-height) + 6px)}
#ready h1{top:max(15.5%,calc(var(--canopy-local-bottom) + 16px));font-size:clamp(22px,3.5cqh,31px)}
.choose-hint{top:max(20.5%,calc(var(--canopy-local-bottom) + 54px))}
.ingredient-wrap{top:max(24%,calc(var(--canopy-local-bottom) + 79px))}
.ingredient-wrap label,.flavor-choice span{font-size:13px;font-weight:400}
.flavor-choices{top:31.875%;height:56%}.flavor-choice span{top:100%}
.custom-preview{top:31.875%;bottom:12%}
#game[data-state=playing] #live,#game[data-state=bitten] #live{top:calc(var(--canopy-local-bottom) + 48px);line-height:1.15}
#game[data-state=playing] #targetHint{top:calc(var(--canopy-local-bottom) + 102px)}

/* Brown interface palette, including the result and native sharing dialog. */
:root{--ink:#4A2A1A;--secondary:#7A5A48;--line:#B89A84;--ivory:#FFF7E9}
input{border-bottom-color:var(--line)}input:focus{border-bottom-color:var(--ink)}input::placeholder{color:var(--line)}
.choose-hint,#targetHint,#targetHint small,.flavor-choice span,.result-snack,.leaderboard li,.leaderboard strong,.rank-diff,.ranking-title,#comparison,#shareStatus{color:var(--secondary)}
.primary,#saveImage{background:var(--ink);color:var(--ivory);border:1px solid var(--ink)}
.secondary,#sendShare,#closeShare,.follow-link{background:var(--ivory);border:1px solid var(--line);color:var(--ink);border-radius:2px}
.secondary:active,#sendShare:active,#closeShare:active,.follow-link:active{background:#F1E4D5}
#closeShare{text-decoration:none;padding:8px 22px;margin-top:0}
#shareDialog{border-color:var(--line)}
#game.failed #grade{color:#aa5041}

/* Fixed two-line hint shares the live counter left edge; never reflow individual lines. */
#game[data-state=playing] #live,#game[data-state=bitten] #live,#game[data-state=playing] #targetHint{left:3%;width:44%;text-align:left}
#game[data-state=playing] #targetHint small{padding:0;white-space:nowrap;word-break:normal}
#targetHint small span{display:block;white-space:nowrap}

/* Readable type scale: preserve hierarchy while lifting the smallest labels. */
#ready h1{font-size:clamp(26px,3.9cqh,34px)}
.choose-hint{font-size:15px}
.ingredient-wrap label,.flavor-choice span{font-size:15px}
.ingredient-wrap input,.share-content .sender-wrap input{font-size:16px}
input::placeholder{font-size:14px}
.ingredient-wrap p,.sender-wrap p{font-size:12px;height:auto;min-height:14px}
#ready .reset-records{font-size:12px}
#challengeHeading{font-size:clamp(15px,2.2cqh,19px)}
#game[data-state=playing] #live,#game[data-state=bitten] #live{font-size:clamp(28px,4.6cqh,38px)}
#game[data-state=playing] #targetHint{font-size:clamp(14px,2cqh,16px)}
#game[data-state=playing] #targetHint small{font-size:12px;line-height:1.5}
#result .result-snack{font-size:14px}
#result #grade,#game.failed #grade{font-size:clamp(50px,8.5cqh,72px)}
#result #grade.special{font-size:clamp(48px,8cqh,68px)}
#result #score{font-size:clamp(25px,4cqh,33px)}
.ranking-title,.rank-diff,.rank-note,.record-note{font-size:12px}
#result .leaderboard{width:76%}
#result .leaderboard li{font-size:14px;grid-template-columns:28px 1fr 68px 52px;min-height:max(28px,3.5cqh)}
#result #comparison{font-size:12px;line-height:1.4}
#result .primary,.action-pair .primary{font-size:16px}
#result .change-flavor,#closeShare{font-size:14px}
#result .follow-link{font-size:13px}
#shareCopy{font-size:14px;line-height:1.65}
#shareDialog #shareStatus,#shareStatus{font-size:12px;min-height:16px}
#assetStatus{font-size:14px}
.choose-hint{top:max(21.5%,calc(var(--canopy-local-bottom) + 54px))}
.ingredient-wrap{top:max(25.5%,calc(var(--canopy-local-bottom) + 79px))}
#result .leaderboard{top:40cqh}
#result .leaderboard li{min-height:max(26px,3.5cqh)}
#result #comparison{top:55.3cqh;line-height:1.3}

/* More space between the input, sticks and result sections. */
.flavor-choices{top:35%;height:54%}
.custom-preview{top:35%;bottom:11%}
#result{top:15%;height:83%}
#result .result-snack{font-size:13px;margin-bottom:8px}
#result #grade,#game.failed #grade{font-size:clamp(46px,7.6cqh,62px);margin-bottom:9px}
#result #grade.special{font-size:clamp(44px,7.2cqh,60px)}
#result #score{font-size:clamp(24px,3.6cqh,30px)}
#result .leaderboard{top:40.5cqh}
#result .leaderboard li{font-size:13px;min-height:clamp(26px,3.6cqh,29px)}
#result #comparison{top:56cqh}
#result .result-actions{top:62cqh;gap:1.5cqh}
#result .primary{font-size:15px;padding:1.35cqh 10px}
#result .change-flavor{font-size:13px}
#result .follow-link{top:76cqh;font-size:12px}

#result .result-art{top:18.625cqh;height:19.5cqh}

/* Flavor names and the editable blank share one baseline just above the sticks. */
#ready h1{font-size:clamp(24px,3.8cqh,33px);left:2%;width:96%}
.choose-hint{font-size:clamp(12px,1.9cqh,15px);white-space:nowrap;letter-spacing:-.025em}
.flavor-choices{top:35%;height:51%}
.flavor-choice span{top:auto;bottom:calc(100% + 10px);font-size:min(15px,4cqw);line-height:1.4;white-space:nowrap;padding:0 2px}
#ready .ingredient-wrap{top:calc(35% - 35px);left:82%;width:auto;max-width:29%;transform:translateX(-50%);text-align:center;z-index:2}
#ready .ingredient-wrap .inline-flavor{display:flex;align-items:baseline;justify-content:center;gap:3px;font-size:min(15px,4cqw);color:var(--secondary);white-space:nowrap}
#ready .ingredient-wrap input{width:57px;max-width:calc(21cqw + 9px);font-size:16px;line-height:1.4;text-align:center;padding:1px 1px 3px;border-bottom:1px solid var(--line);transition:width .12s ease}
#ready .ingredient-wrap input:focus{border-bottom-color:var(--ink)}
#ready .ingredient-wrap input::placeholder{font-size:11px;color:var(--line)}
#ingredientError{position:absolute;right:0;bottom:calc(100% + 7px);width:270px;margin:0;font-size:12px;text-align:right;white-space:nowrap;pointer-events:none}
#ready .reset-records{bottom:.5%}
/* End all copy before x=189; the thickest coating begins beyond x=194. */
#game[data-state=playing] #live,#game[data-state=bitten] #live,#game[data-state=playing] #targetHint{left:3%;width:39%;text-align:left}
#game[data-state=playing] #live,#game[data-state=bitten] #live{font-size:min(38px,8cqw);white-space:nowrap}
#game[data-state=playing] #targetHint{font-size:min(16px,4.2cqw);letter-spacing:-.035em}
#game[data-state=playing] #targetHint strong{font-weight:600;white-space:nowrap}
#game[data-state=playing] #targetHint small{font-size:min(13px,3.4cqw);letter-spacing:-.035em;line-height:1.5;padding:0}
#targetHint small span{display:block;white-space:nowrap}
#firstPlayHint{position:absolute;left:0;bottom:8.8%;width:100%;margin:0;text-align:center;font-size:15px;font-weight:600;color:var(--ink);pointer-events:none;animation:tap-hint .6s ease-in-out 3}
@keyframes tap-hint{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){#firstPlayHint{animation:none}#ready .ingredient-wrap input{transition:none}}

/* All game screens share a single uniformly scaled logical canvas. Scale lives
   on the wrapper, so the existing shake animation cannot distort the game. */
#game{position:relative;display:block}
#gameViewport{position:absolute;width:450px;height:800px;transform-origin:top left}
#stage{width:450px;height:800px;--stage-height:800px;--stage-top:0px;--canopy-local-bottom:0px}
/* Keep every result element on the stick's centerline. The list and both
   buttons use one width; long flavor labels cannot push the difference out. */
#result{--result-width:324px}
#result .leaderboard,#result .result-actions{left:50%;width:var(--result-width);transform:translateX(-50%)}
#result .leaderboard li{grid-template-columns:28px 86px minmax(0,1fr) 78px;column-gap:6px}
#result .leaderboard strong{white-space:nowrap}
#result .rank-flavor{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#result .rank-diff{text-align:right;font-size:12px;white-space:nowrap}
#result .action-pair .primary{flex:1;width:auto}

/* Start screen: compact hierarchy below the drips, with larger proportional sticks. */
#ready h1{top:var(--ready-title-top,28px);font-size:40px;line-height:1.25;letter-spacing:-.06em;left:2%;width:96%}
#ready .choose-hint{top:calc(var(--ready-title-top,28px) + 63px);font-size:18px;line-height:1.4}
#ready .flavor-choices{top:188px;height:511px}
#ready .flavor-choice span{top:-36px;bottom:auto;height:26px;line-height:26px;font-size:18px;font-weight:400;padding:0}
#ready .ingredient-wrap{top:152px;left:82%;width:max-content;max-width:148px;transform:translateX(-50%);height:26px}
#ready .ingredient-wrap .inline-flavor{display:inline-flex;align-items:baseline;justify-content:center;width:auto;height:26px;gap:0;font-size:18px;line-height:26px;margin:0;padding:0}
#ready .ingredient-wrap .inline-flavor>span{position:static;display:inline-block;width:auto;flex:none;font-size:18px;font-weight:400;line-height:26px;padding:0;margin:0}
#ready .ingredient-wrap input{flex:none;box-sizing:border-box;max-width:128px;height:26px;line-height:26px;font:inherit;font-size:18px;padding:0 0 0;margin:0;vertical-align:baseline}
#ready .ingredient-wrap input::placeholder{font-size:12px}
#ready .reset-records{top:738px;bottom:auto;font-size:13px;line-height:20px}
#ready .custom-preview{top:188px;bottom:auto;height:511px}
#ready #challengeHeading{top:var(--ready-title-top,28px);font-size:20px}

/* Global sound control: outside the scaled play area and clear of flavor labels. */
#game>.mute{position:absolute;top:calc(var(--choco-height) + 2px);right:max(16px,env(safe-area-inset-right));width:32px;height:32px;padding:4px;opacity:.85}
/* The one-time tutorial belongs to the left text column, never over the biscuit. */
#firstPlayHint{left:3%;top:184px;bottom:auto;width:39%;text-align:left;font-size:14px;line-height:1.5;white-space:nowrap}