/* Three type sizes, one locally hosted family. Artwork carries the hand-drawn
   character; instructions and quantities keep a steady, readable rhythm. */
:root{
 --font-notes:Nunito,ui-rounded,"Trebuchet MS",sans-serif;
 --hand:var(--font-notes);
 --ink:#80635f;--muted:#816b64;--rose-ink:#865a68;
 --type-note:12px;--type-body:14px;--type-display:24px;
}
@media(min-width:761px){:root{--type-note:13px;--type-body:16px;--type-display:28px}}
@media(min-width:1201px){:root{--type-note:14px;--type-body:17px;--type-display:30px}}
@media(max-width:370px){:root{--type-note:11px;--type-body:12px;--type-display:22px}}
@media(max-height:480px) and (orientation:landscape){:root{--type-note:11px;--type-body:12px;--type-display:22px}}

html[data-game-layout]{--hand:var(--font-notes)}
body{font-family:var(--font-notes);font-size:var(--type-body);font-weight:700;line-height:1.45}
/* Reset the accumulated one-off sizes before assigning the three roles below.
   The shared logo is an SVG and keeps its original receipt lettering. */
#gameShell *,#receiptDialog *{
 font-family:var(--font-notes)!important;font-size:inherit!important;
 letter-spacing:.015em!important;text-transform:none;
}
#gameShell,#receiptDialog{font-size:var(--type-body)!important}
#gameShell :is(button,summary,input,select,textarea),#receiptDialog :is(button,summary,input,select,textarea){font-size:var(--type-body)!important}

/* Body: primary actions, ingredient names and order headings. */
#gameShell :is(.customer-heading h2,.ingredient-name,.section-title h2,.ingredient-tabs button,#hudpack,#ingredientAmount,.shelf h2),
#receiptDialog :is(.slip-drink>strong,.slip-footer p,#receiptNext){
 font-size:var(--type-body)!important;font-weight:800;line-height:1.35;
}
#gameShell .customer-heading h2{letter-spacing:.01em!important;line-height:1.3}
#gameShell .ingredient-name{line-height:1.3;font-weight:700!important;overflow-wrap:normal;word-break:normal}

/* Note: secondary guidance, names in tight five-item rows, and small actions. */
#gameShell :is(small,.eyebrow,.fill-kicker,.fill-signal,#sceneOverflow,#stepHint,#orderSummary,#customerNote,.recipe-copy h3,
 .section-title p,.container-options button,.small-actions button,.modes button,.difficulty button,.world-tools>button,
 .stats span,.icon-button,.mix-note p,.help,.help p,.help summary,.mini,.sub,.bubble,.order-score,.order-score strong,
 #orderSteps li,#orderSteps li>b,#orderSteps li>span,#orderSteps li>strong,#orderSteps small,.step-amount,.diagram-wrap,
 #orderDiagram span,#speed,#ingredientName,#ingredientAdvice,.note-tool,.note-tool *,#motionControl,#motionHint),
#receiptDialog :is(.slip-meta,.slip-line,.slip-items,.slip-items *,caption,.slip-drink>span,.slip-total>span,
 .slip-total small,.slip-rank,.slip-stamp,.slip-footer p span,.slip-footer>small){
 font-size:var(--type-note)!important;line-height:1.45;
}
#gameShell #mixes .ingredient-name{font-size:var(--type-note)!important}
#gameShell .ingredient-name small{font-size:var(--type-note)!important;line-height:1.3;margin-top:4px}
#gameShell #orderSteps li{line-height:1.25}
#gameShell #orderSteps .step-amount{font-variant-numeric:tabular-nums}
#gameShell :is(.menu-paper,.help p,.mix-note p){line-height:1.45}

/* Display: the current fill, final score and menu heading. */
#gameShell :is(#sceneFill,#score,.stats strong,.menu-heading),#receiptDialog .slip-total>strong{
 font-size:var(--type-display)!important;font-weight:800;line-height:1.2;
}
#gameShell :is(#sceneFill,#ingredientAmount,#hudvalue,.order-score strong),#receiptDialog :is(.slip-line strong,.slip-items,.slip-total>strong){font-variant-numeric:tabular-nums}
#gameShell #sceneFill{letter-spacing:-.5px!important}
#gameShell .menu-heading{line-height:1.15}
#gameShell .ingredient-tabs button{white-space:nowrap}

/* These controls use painted icons, so their accessible text stays visually
   hidden. Open recipe folds use a normal body-size minus sign. */
#gameShell #sceneWrap :is(.game-menu>summary,#orderFold[aria-expanded=false]){font-size:0!important}
#gameShell #sceneWrap #orderFold[aria-expanded=true],#receiptDialog #receiptClose{font-size:var(--type-body)!important}
#gameShell #sceneWrap #playDock:after,
#gameShell #sceneWrap #playDock .hud-actions:before{font-size:var(--type-note)!important;font-family:var(--font-notes)!important}

/* The collage is a proportionally scaled image. Compensate live type for that
   scale so a 12px note stays 12px on screen, instead of shrinking with the art. */
#gameShell #sceneWrap .recipe-collage{
 --vial-note:calc(var(--type-note) / var(--vial-scale,1));
 --vial-body:calc(var(--type-body) / var(--vial-scale,1));
}
#gameShell #sceneWrap .recipe-collage .layer-label strong,
#gameShell #sceneWrap .recipe-collage #railHint{
 font-size:var(--vial-note)!important;line-height:1.25;
}
#gameShell #sceneWrap .recipe-collage .layer-number{font-size:min(var(--vial-note),22px)!important;line-height:1}
#gameShell #sceneWrap .recipe-collage .rail-title{
 left:12%;width:80%;font-size:var(--vial-body)!important;line-height:1.3;
}
#gameShell #sceneWrap .recipe-collage .layer-label strong{left:calc(100% + 14px);width:calc(var(--vial-art-width,360px) - 198px);top:50%;transform:translateY(-50%);font-weight:700;letter-spacing:.025em!important;white-space:nowrap;font-variant-numeric:tabular-nums;text-shadow:none}
#gameShell #sceneWrap .recipe-collage #railHint:before{display:none}
#gameShell #sceneWrap .recipe-collage #railHint{left:100px;right:24px;top:88.5%;width:auto;line-height:1.12}

/* Let text wrap without adding a smaller emergency font. */
#gameShell :is(.menu-paper,.customer-title,.pour-notes,#ingredientName,#ingredientAdvice){min-width:0}
#receiptDialog .slip-line{gap:9px}
#receiptDialog .slip-total>span{max-width:57%}
#receiptDialog .slip-stamp{letter-spacing:0!important}
@media(max-width:370px){
 #gameShell .ingredient-tabs button{padding-inline:2px}
 #gameShell #sceneWrap .recipe-collage .rail-title{font-size:var(--vial-note)!important}
}

/* Warm pencil ink, with lighter everyday labels and room around the artwork. */
#gameShell #sceneWrap :is(#orderCard h2,.bubble,.recipe-collage #railHint,.recipe-collage .rail-title,.menu-heading){color:var(--ink)}
#gameShell #sceneWrap #playDock :is(.ingredient,.ingredient-name){color:var(--ink)}
#gameShell #sceneWrap :is(#containers button,.modes button,.menu-paper button,.difficulty button,.world-tools>button,.note-tool){color:var(--ink);font-weight:700}
#gameShell #sceneWrap :is(#orderSummary,.section-title p,#customerNote,#sceneOverflow,.fill-signal){color:var(--muted);font-weight:700}
#gameShell #sceneWrap :is(#hudpack,.ingredient-tabs button,.section-title h2){color:var(--rose-ink);font-weight:800}
#gameShell #sceneWrap :is(.bubble,#railHint){font-weight:700;line-height:1.45}
#gameShell #sceneWrap .recipe-collage .rail-title{font-weight:800}
#gameShell #sceneWrap .recipe-collage .recipe-layer{min-height:calc(var(--vial-note) * 1.7)}
#gameShell #sceneWrap #orderSummary{margin-top:7px}
#gameShell #sceneWrap .bubble{padding:14px 20px}
#gameShell #sceneWrap #playDock .ingredient{gap:5px;padding-block:7px}
#receiptDialog{color:var(--ink);font-weight:700}
#receiptDialog :is(.slip-meta,.slip-line,.slip-items,.slip-footer){line-height:1.5}
@media(min-width:1201px){
 #gameShell #sceneWrap #playDock .section-title{margin-bottom:14px}
 #gameShell #sceneWrap #playDock :is(#bases,#mixes){gap:14px}
}
@media(max-width:760px){
 #gameShell #sceneWrap #playDock .ingredient{gap:3px;padding-block:5px}
}

/* Ingredient-coloured amounts, centred on their painted bands. Icons and the
   accessible names identify each ingredient; numbered seals keep status cues. */
#sceneWrap .recipe-collage .pattern-milk-0{--ingredient-ink:#a47768}
#sceneWrap .recipe-collage .pattern-milk-1{--ingredient-ink:#9b8b73}
#sceneWrap .recipe-collage :is(.pattern-milk-2,.pattern-mix-0){--ingredient-ink:#b9788c}
#sceneWrap .recipe-collage .pattern-milk-3{--ingredient-ink:#789367}
#sceneWrap .recipe-collage .pattern-mix-1{--ingredient-ink:#aa8c45}
#sceneWrap .recipe-collage .pattern-mix-2{--ingredient-ink:#8d82ab}
#sceneWrap .recipe-collage .pattern-mix-3{--ingredient-ink:#9a7c74}
#sceneWrap .recipe-collage .pattern-mix-4{--ingredient-ink:#6b96a7}
#gameShell #sceneWrap .recipe-collage .layer-label strong{color:var(--ingredient-ink,var(--ink))!important;text-align:right}

/* Small phone cards cannot accommodate a minimum height per ingredient.
   Keep every band inside the vial, including five-ingredient recipes. */
html[data-game-layout="compact"] #gameShell #sceneWrap .recipe-collage .recipe-layer{
 min-height:0;flex:1 1 0;
}