/* Counter ticket UI. Kenney: coherent control states; PaperCSS: quiet paper hierarchy.
   Lucide SVGs are bundled locally with their license in assets/ui. */
#game{--hud-ink:#344a40;--hud-muted:#798477;--hud-paper:#fffef9;--hud-ground:#f5f5ed;--hud-line:#dedfd3;--hud-accent:#37735b}
#game>.topbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto 44px;gap:9px;align-items:center;padding:3px 14px;background:var(--hud-ground);border:0;isolation:isolate}
.ui-icon{display:block;flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#game #store-open{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:8px;min-width:0;height:44px;min-height:44px;max-height:44px;padding:0;background:transparent;border:0;box-shadow:none;text-align:left;border-radius:8px;color:var(--hud-accent);touch-action:manipulation}
.hud-shop{width:25px;height:25px}
.level-copy{display:flex;flex-direction:column;gap:1px;min-width:0}
#game #store-open .level-number{display:block;font-size:13px;line-height:17px;font-weight:750;letter-spacing:0;color:var(--hud-ink);white-space:nowrap}
#game #store-name{display:block;font-size:9px;line-height:12px;font-weight:400;color:var(--hud-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#game #day{display:block;padding:4px 0;min-width:0;min-height:0;border:0;background:none;border-radius:0;font-size:12px;line-height:20px;font-weight:650;letter-spacing:.025em;font-variant-numeric:tabular-nums;color:var(--hud-muted);box-shadow:none;white-space:nowrap;transform:none}
#game #day:before,#game #day:after{display:none}
#game .wallet{display:flex;align-items:center;gap:5px;min-width:0;min-height:28px;padding:0 0 0 10px;background:none;border:0;border-left:1px solid var(--hud-line);border-radius:0;color:var(--hud-ink);font-size:14px;font-variant-numeric:tabular-nums;box-shadow:none}
#game .wallet b{max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.hud-cookie{width:24px;height:24px;flex:none;fill:#8c623b}
#game #settings-open{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:10px;background:transparent;border:0;border-radius:9px;box-shadow:none;color:var(--hud-ink);touch-action:manipulation}
#settings-open svg{width:21px;height:21px}
#game #store-open,#game #settings-open{transition:background .16s ease,transform .14s ease}
#game #store-open:active,#game #settings-open:active{background:#e7ecdf;transform:scale(.96)}
#game #store-open:focus-visible,#game #settings-open:focus-visible{outline:2px solid var(--hud-accent);outline-offset:1px}
#game[data-mode=business],#game[data-mode=business].has-recipe-guide,#game[data-mode=business].two-material-rows,#game[data-mode=business].has-recipe-guide.two-material-rows,#game[data-mode=business][data-order-kind=double].has-cup-tools,#game[data-mode=business][data-order-kind=double].has-recipe-guide,#game[data-mode=business][data-order-kind=double].has-recipe-guide.two-material-rows{grid-template-rows:50px auto minmax(0,1fr) 68px}
#game[data-mode=business]>.topbar{height:50px}
#game[data-mode=home]>.topbar{padding:3px 14px;border:0}
#game[data-mode=business] .order-zone,#game[data-mode=business] .order-zone.compact,#game[data-mode=business].has-recipe-guide .order-zone{position:relative;height:auto;min-height:0;padding:2px 14px 11px;background:var(--hud-ground);z-index:4}
#game[data-mode=business] #order,#game[data-mode=business] #order.compact,#game[data-mode=business].has-recipe-guide #order{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:10px;row-gap:3px;align-items:center;justify-content:normal;max-width:374px;height:auto;min-height:100px;margin:0 auto;padding:7px 12px 20px;background:var(--hud-paper);border:1px solid var(--hud-line);border-radius:9px;box-shadow:0 2px 0 #e6e6da;overflow:visible}
#game[data-mode=business] #order[hidden]{display:none}
#game[data-mode=business] #order:after{display:none}
.order-meta{grid-area:1/1/2/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:20px;margin:0 0 2px;padding:0 0 5px;border-bottom:1px dashed #dedfd2}
#game[data-mode=business] .customer-name{display:flex;align-items:center;gap:5px;min-width:0;margin:0;color:var(--hud-muted);font-size:10px;line-height:14px;font-weight:500}
.customer-name .ui-icon{width:12px;height:12px}
#game #customer-index{font-size:10px;line-height:14px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--hud-muted);white-space:nowrap}
#customer-name{padding:0;background:none;border-radius:0}
.single-order{display:contents}
#game[data-mode=business] .order-drink{grid-area:2/1/4/2;position:static;display:block;align-self:center;width:42px;height:54px;flex:none;margin:0;border-radius:0;background:none;font-size:0;overflow:hidden;pointer-events:none}
.order-cup-preview{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-style:normal}
.order-cup-preview svg{display:block;width:37px;height:54px;filter:none;transform:none}
#game .order-drink small{display:none}
#game[data-mode=business] .order-text{grid-area:2/2/3/3;display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;align-self:center;max-width:none;min-width:0;padding:0}
#game[data-mode=business] #order-line{display:block;flex:0 1 auto;margin:0;min-width:0;font-size:16px;line-height:23px;font-weight:750;letter-spacing:0;color:var(--hud-ink);white-space:normal;overflow:visible;overflow-wrap:anywhere}
#game[data-mode=business].has-recipe-guide #order-details,#game[data-mode=business] #order-details{display:flex;align-items:center;gap:7px;flex:none;white-space:nowrap;margin:0;color:#788274;font-size:11px;line-height:18px}
#order-details>span{display:inline-flex;align-items:center;gap:3px}
#order-details .ui-icon{width:11px;height:11px}
#game[data-mode=business] #order-recipe,#game[data-mode=business][data-order-kind=double] #order-recipe{grid-area:3/2/4/3;display:flex;align-items:center;flex-wrap:wrap;gap:3px 9px;min-width:0;margin:0;padding:0;border:0;text-align:left;font-size:11px;line-height:17px;color:var(--hud-muted);cursor:default}
#game #order-recipe[hidden]{display:none}
#game #order-recipe .recipe-caption{display:none}
#game #order-recipe [data-part]{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;border-radius:0;background:none;color:#677263;white-space:nowrap;transition:color .18s ease}
#order-recipe [data-part]:before{content:'';box-sizing:border-box;flex:none;width:10px;height:10px;border:1px solid #b8c1ae;border-radius:3px;background:none}
#game #order-recipe .pending{background:none;color:#a08045}
#order-recipe .pending:before{background:#c7ad76;border-color:#c7ad76;box-shadow:inset 0 0 0 2px var(--hud-paper)}
#game #order-recipe .done{background:none;color:var(--hud-accent)}
#order-recipe .done:before{background:#4d8566 url('./assets/ui/check-white.svg') center/9px no-repeat;border-color:#4d8566;animation:ingredient-check .2s ease-out}
#game[data-mode=business] #order .patience{position:absolute;left:12px;right:157px;bottom:8px;width:auto;height:3px;border-radius:3px;background:#e9edde;overflow:hidden}
#game[data-mode=business] #patience-label,#game[data-mode=business][data-order-kind=double] #patience-label{position:absolute;left:auto;right:12px;bottom:4px;font-size:9px;line-height:12px;color:#87907f;text-align:right;white-space:nowrap}
#game[data-mode=business] #patience-label.urgent{color:#a97744}
#game[data-mode=business] #business-strip{inset:auto 24px 2px;height:2px;min-height:2px;opacity:.45;background:transparent}
#game[data-mode=business][data-order-kind=double] .single-order{display:none}
#game[data-mode=business] #double-orders{grid-area:2/1/3/-1;max-width:none;width:100%;margin:1px 0 0}
#game #double-orders>small{display:none}
#game[data-mode=business] #double-cards{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#game[data-mode=business] #double-cards button{position:relative;display:flex;align-items:center;gap:6px;min-width:0;min-height:58px;padding:5px 6px;border:1px solid transparent;border-radius:6px;box-shadow:none;background:#f3f4ec;color:var(--hud-ink);text-align:left;transition:background .18s ease,border-color .18s ease,transform .14s ease;touch-action:manipulation}
#game[data-mode=business] #double-cards button.current{background:#edf3e5;border-color:#b4c5a6;box-shadow:none}
#game[data-mode=business] #double-cards button.stored{background:#f5f5ee;border-color:transparent}
#game #double-cards button>div{min-width:0;flex:1}
#game #double-cards .double-cup-preview{display:flex;width:25px;height:39px;flex:none;align-items:center;justify-content:center;font-style:normal}
#game #double-cards .double-cup-preview svg{width:25px;height:39px}
#game[data-mode=business] #double-cards b{display:block;font-size:12px;line-height:17px;font-weight:700;letter-spacing:0;white-space:normal;overflow-wrap:anywhere}
#game[data-mode=business] #double-cards span{display:block;font-size:10px;line-height:15px;margin:1px 0 0;color:#798473}
#game[data-order-kind=double] #double-cards small{display:block;font-size:10px;line-height:14px;margin-top:1px;color:#548265}
#game[data-mode=business][data-order-kind=double] #order-recipe{grid-area:3/1/4/-1;margin:4px 0 0;font-size:10.5px;gap:2px 8px}
#game[data-mode=business][data-order-kind=double] #order-recipe .recipe-caption{display:block;flex:none;margin:0 2px 0 0;padding:0;color:var(--hud-muted);font-size:10px}
#game #double-cards button:active{transform:scale(.98)}
#game #double-cards button:focus-visible{outline:2px solid var(--hud-accent);outline-offset:1px}
#game[data-mode=business] #streak-badge{position:absolute;top:7px;right:54px;left:auto;max-width:104px;padding:0;font-size:9px;line-height:14px;font-weight:500;background:none;color:#a48a54;border-radius:0;box-shadow:none}
#game[data-mode=business] #idle-order{display:flex;align-items:center;gap:10px;height:70px;min-height:70px;margin:0 auto;max-width:374px;padding:10px 12px;background:var(--hud-paper);border:1px solid var(--hud-line);border-radius:9px;box-shadow:0 2px 0 #e6e6da}
#game[data-mode=business] #idle-order[hidden]{display:none}
#game #idle-order .small-leaf{display:grid;place-items:center;width:29px;height:29px;flex:none;border-radius:0;background:none;color:#789166}
#game #idle-order b{font-size:14px;line-height:20px;color:var(--hud-ink)}
#game #idle-order p{font-size:11px;line-height:17px;margin:3px 0 0;color:var(--hud-muted)}
#game #idle-order .open-tag{margin-left:auto;font-size:10px;padding:4px 0;border:0;border-radius:0;transform:none;white-space:nowrap;color:#8b947e;background:none}
/* Short control travel with a stable touch target and no gameplay delay. */
#game[data-mode=business] .action-zone #main-action{border-radius:14px;box-shadow:0 2px 0 #20533d;transition:transform .14s ease,background .18s ease,box-shadow .14s ease,opacity .16s ease}
#game[data-mode=business] .action-zone #main-action:active:not(:disabled){transform:translateY(2px);box-shadow:0 0 0 #20533d}
#game[data-mode=business] .action-zone #main-action:disabled{box-shadow:none}
#game[data-mode=business] #cup-cost-open{white-space:pre-line;text-align:center;line-height:16px;font-variant-numeric:tabular-nums}
#game[data-mode=business] #craft-desktop .category-tabs>button{transition:transform .14s ease,background .18s ease,color .18s ease,box-shadow .14s ease}
#game[data-mode=business] #craft-desktop .category-tabs>button:active:not(:disabled){transform:translateY(2px);box-shadow:none}
#game #order.ticket-arrive{animation:ticket-arrive .19s ease-out both}
@keyframes ticket-arrive{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes ingredient-check{0%{transform:scale(.75)}65%{transform:scale(1.1)}100%{transform:scale(1)}}
@supports(transition-behavior:allow-discrete){
 #game #order,#game #idle-order{opacity:1;transition:opacity .14s ease,display .14s allow-discrete}
 #game #order[hidden],#game #idle-order[hidden]{opacity:0;position:absolute;left:14px;right:14px;top:2px;pointer-events:none}
 @starting-style{#game #order,#game #idle-order{opacity:0}}
}
@media(hover:hover){#game #store-open:hover,#game #settings-open:hover{background:#e9eddf}#game #double-cards button:hover{border-color:#afc19f}}
@media(max-width:350px){
 #game>.topbar{padding-inline:10px;gap:6px}#game #store-open{gap:5px}#game .hud-shop{width:22px;height:22px}#game #store-open .level-number{font-size:12px}#game #store-name{font-size:8px}#game #day{font-size:11px}#game .wallet{font-size:12px;padding-left:7px;gap:4px}#game .wallet b{max-width:69px}.hud-cookie{width:21px;height:21px}
 #game[data-mode=business] .order-zone,#game[data-mode=business].has-recipe-guide .order-zone{padding-inline:10px}
 #game[data-mode=business] #order{grid-template-columns:34px minmax(0,1fr);padding-inline:10px;column-gap:8px}#game[data-mode=business] .order-drink{width:34px}#game[data-mode=business] #order-line{font-size:14px;line-height:21px}#game[data-mode=business] #order-details{font-size:10px;gap:5px}#game[data-mode=business] #order-recipe{gap:3px 7px;font-size:10px}
 #game[data-mode=business] #double-cards button{gap:4px;padding:4px}#game[data-mode=business] #double-cards b{font-size:11px}#game #double-cards .double-cup-preview,#game #double-cards .double-cup-preview svg{width:21px}
}
@media(prefers-reduced-motion:reduce){#game #order,#game #idle-order,#game #store-open,#game #settings-open,#game #double-cards button,#game #order-recipe [data-part],#game .action-zone #main-action,#game #craft-desktop .category-tabs>button{transition:none!important;animation:none!important}#game #order-recipe .done:before{animation:none}}
@media(max-height:700px){#game[data-mode=home]>.topbar{padding-block:2px}}

/* Recipe names lead to their existing shelf, without spending or auto-adding. */
#game #order-recipe button[data-part]{font:inherit;line-height:inherit;min-height:26px;min-width:24px;cursor:pointer;box-shadow:none;opacity:1;transform:none}
#game #order-recipe button[data-part]:disabled{cursor:default;opacity:1}
#game #order-recipe button[data-part]:not(:disabled){text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;text-decoration-color:#a3b19b}
#game #order-recipe button[data-part]:focus-visible{outline:2px solid var(--hud-accent);outline-offset:3px;border-radius:3px}
#game #order-recipe button[data-part]:active:not(:disabled){color:var(--hud-accent);background:#e7ecdf}
