/* Artwork geometry comes directly from การ์ด_ชง2.ai. */
.brand-header,.back-mode .brand-header { height:21%; max-height:170px; padding-top:2%; }
.logo { width:15%; height:96%; }
.strapline,.back-mode .strapline { display:block; top:22%; font-size:clamp(9px,1.05vw,17px); }
.menu-screen,.back-mode .menu-screen { inset:26% 4% 8%; }
.menu-cards { inset:0; }
.menu-cards:after { display:none; }
.menu-board { display:block; width:100%; height:100%; }
.menu-hit { width:100%; height:100%; padding:0; border:0; background:transparent; }
.menu-hit:focus-visible { outline:1px solid var(--navy); outline-offset:-3px; }
#menu-hints { fill:#7b899f; font:4.2px "Times New Roman",serif; letter-spacing:.4px; pointer-events:none; }
.svg-quantity { color:var(--navy); text-align:center; font-family:"Times New Roman",serif; }
.svg-quantity p { margin:3px 0 5px; font-size:3.8px; letter-spacing:.6px; }
.dual-stepper { display:flex; align-items:center; justify-content:center; gap:8px; height:31px; }
.dual-stepper button { border: .5px solid #c5cfe0; border-radius:50%; width:17px; height:17px; padding:0; font-size:13px; line-height:14px; }
.dual-stepper button:active { background:#eaf0f8; }
.dual-stepper output { min-width:27px; font-size:31px; line-height:1; font-variant-numeric:tabular-nums; }
.svg-quantity>span { display:block; font-size:3.8px; letter-spacing:.4px; margin-top:6px; }
.dual-confirm { width:100%; height:100%; background:var(--navy); color:white; padding:0; font-size:6.2px; }
.dual-confirm:disabled { opacity:.35; }
.back-order { display:grid; inset:26% 4% 9%; grid-template-columns:27% 46% 27%; grid-template-rows:100%; }
.back-cocktail { padding:0; margin:0; width:100%; min-width:0; justify-content:space-between; grid-row:1; animation:none; }
.back-skinny { grid-column:1; }
.back-jacket { grid-column:3; }
.back-glass { height:77%; width:100%; object-fit:contain; }
.back-cocktail figcaption { display:flex; align-items:center; justify-content:center; gap:clamp(6px,1vw,18px); width:100%; height:20%; margin:0; }
.back-title { width:33%; height:85%; object-fit:contain; }
.back-multiplier { gap:clamp(3px,.5vw,9px); }
.back-multiplier [id^="back-quantity-"] { font-size:clamp(32px,6.3vw,96px); line-height:1; font-variant-numeric:tabular-nums; }
.back-multiplier .multiply { font-size:clamp(15px,2.7vw,40px); }
.prep-copy p { font-size:clamp(5px,.65vw,11px); line-height:1.65; letter-spacing:.04em; margin:0; text-align:left; }
.prep-copy>span { display:block; font-size:clamp(6px,.72vw,12px); font-style:italic; color:#6c7d99; text-align:left; margin-top:4px; }
.back-mode .back-order .back-timer { grid-column:2; grid-row:1; align-self:start; height:65%; padding:0; border-bottom:1px solid #e1e6ef; }
.back-mode .back-order #back-number { font-size:min(17vw,27vh); font-style:italic; line-height:1; }
.back-mode .back-order .timer-label { margin-top:7%; font-size:clamp(6px,.72vw,12px); letter-spacing:.1em; }
.back-mode .back-order .back-timer.timeup #back-number { font-size:min(12.8vw,20vh); font-style:normal; }
.final-mode .brand-line,.final-mode .strapline { visibility:hidden; }
.final-screen { inset:20% 9% 6%; }
.say-geese { width:min(85%,750px); height:100%; overflow:visible; }
.write-stroke { opacity:0; stroke-dasharray:1; stroke-dashoffset:1; animation:write-ink .75s ease-in-out both; }
.write-0 { animation-delay:.1s; }.write-1 { animation-delay:.8s; animation-duration:.35s; }.write-2 { animation-delay:1.1s; animation-duration:.55s; }
.write-3 { animation-delay:1.65s; animation-duration:.85s; }.write-4 { animation-delay:2.45s; animation-duration:.3s; }.write-5 { animation-delay:2.7s; animation-duration:.3s; }.write-6 { animation-delay:2.95s; animation-duration:.35s; }.write-7 { animation-delay:3.25s; animation-duration:.3s; }.write-8 { animation-delay:3.5s; animation-duration:.4s; }
@keyframes write-ink { 1% { opacity:1; } to { opacity:1; stroke-dashoffset:0; } }
#max-per-menu { width:112px; padding:4px 0; font:36px "Times New Roman",serif; color:var(--navy); border:1px solid #b9c8df; border-radius:0; text-align:center; }
@media(max-width:700px) and (orientation:portrait) {
 .brand-header,.back-mode .brand-header { height:18%; padding-top:5%; }.logo { width:25%; }.strapline,.back-mode .strapline { top:20%; font-size:8px; }
 .menu-screen,.back-mode .menu-screen { inset:25% 1% 12%; }
 .back-order { inset:25% 3% 12%; grid-template-columns:29% 42% 29%; }
 .back-cocktail figcaption { flex-wrap:wrap; gap:2px; height:22%; }.back-glass { height:72%; }.back-title { width:42%; height:50%; }.prep-copy { width:100%; }.prep-copy p,.prep-copy>span { text-align:center; }
 .back-mode .back-order #back-number { font-size:24vw; }.back-mode .back-order .back-timer.timeup #back-number { font-size:14vw; }
 .say-geese { width:100%; }
}
@media(prefers-reduced-motion:reduce) { .write-stroke { animation:none; stroke-dashoffset:0; }.say-geese>path { animation:none; mask:none; } }