/* Each glyph keeps its horizontal position throughout its vertical animation. */
/* Keep the kiosk frame within device safe areas when Home Screen apps fill the display. */
.frame {
 --frame-gap:clamp(7px,1.25vw,17px);
 --frame-top:max(var(--frame-gap),env(safe-area-inset-top,0px));
 --frame-right:max(var(--frame-gap),env(safe-area-inset-right,0px));
 --frame-bottom:max(var(--frame-gap),env(safe-area-inset-bottom,0px));
 --frame-left:max(var(--frame-gap),env(safe-area-inset-left,0px));
 margin:var(--frame-top) var(--frame-right) var(--frame-bottom) var(--frame-left);
 min-height:calc(100svh - var(--frame-top) - var(--frame-bottom));
 height:calc(100dvh - var(--frame-top) - var(--frame-bottom));
}
.cocktail-art { width:100%; height:90%; pointer-events:none; user-select:none; }
.floor-window { display:grid; place-items:center; }
.odometer {
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 width:min(88%,560px);
 height:100%;
}
.digit-cell { position:relative; height:100%; }
.digit-glyph { position:absolute; inset:0; }
.digit-glyph.centered { left:-50%; right:50%; }
.digit-glyph img { width:100%; height:100%; object-fit:contain; }
.digit-glyph.enter { animation:digit-enter .52s cubic-bezier(.22,.65,.25,1) both; }
.digit-glyph.exit { animation:digit-exit .52s cubic-bezier(.22,.65,.25,1) both; }
@keyframes digit-enter { from { transform:translateY(100%); } to { transform:translateY(0); } }
@keyframes digit-exit { from { transform:translateY(0); } to { transform:translateY(-100%); } }

/* The guest display exposes settings only through the five-tap corner. */
.secret-settings {
 position:absolute; top:0; right:0; width:72px; height:72px;
 z-index:8; padding:0; background:transparent; border:0;
 touch-action:manipulation; user-select:none; -webkit-user-select:none;
}
.front-mode #settings { display:none; }
.connection { cursor:default; }
#settings-form label { display:block; margin-bottom:10px; font:10px Arial,sans-serif; letter-spacing:.15em; }
#settings-pin {
 display:block; width:100%; border:1px solid #b9c8df; border-radius:0;
 color:var(--navy); background:#fbfcff; text-align:center;
 font:32px "Times New Roman",serif; padding:9px; letter-spacing:.2em;
}
#settings-dialog { width:min(520px,92%); max-height:90dvh; overflow-y:auto; padding:28px 36px; }
#settings-dialog h2 { margin:12px 0 22px; }
.timing-settings { padding-bottom:16px; margin-bottom:20px; border-bottom:1px solid #dbe2ed; }
#timing-form label { display:block; font:11px/1.5 Arial,sans-serif; letter-spacing:.08em; margin-bottom:12px; }
.duration-input { display:flex; justify-content:center; align-items:baseline; gap:14px; }
#prepare-seconds { width:112px; padding:4px 0; font:44px "Times New Roman",serif; color:var(--navy); background:#fbfcff; border:1px solid #b9c8df; border-radius:0; text-align:center; }
.duration-input span { font-size:20px; }
.duration-presets { display:flex; justify-content:center; gap:10px; margin:12px 0; }
.duration-presets button { min-width:64px; min-height:36px; border:1px solid #b9c8df; font:14px Arial,sans-serif; padding:6px 12px; }
.duration-presets button:active { background:#edf2fa; }
#settings-dialog #save-timing { margin-top:12px; }
#timing-range,#timing-current { font-size:11px; margin:8px 0; }
.timing-feedback { min-height:20px; margin:8px 0 0; color:#3f795e; font:12px/1.6 Arial,sans-serif; }
.install-entry {
 display:block; margin:12px auto; min-height:36px; padding:6px 16px;
 border:1px solid #b9c8df; font:12px Arial,sans-serif;
}
.install-instructions { font:16px/1.9 Arial,sans-serif; text-align:left; margin:26px 0; }

/* Bartender view: cocktail on the left, a large clock and clear quantity on the right. */
.back-mode .strapline { display:none; }
.back-mode .brand-header { height:20%; max-height:145px; padding-top:1.8%; }
.back-mode .menu-screen { inset:23% 3% 6%; }
.back-order {
 position:absolute; inset:22% 5% 8%;
 display:grid; grid-template-columns:38% minmax(0,62%); grid-template-rows:58% 42%;
}
.back-cocktail {
 grid-column:1; grid-row:1 / 3; margin:0;
 display:flex; flex-direction:column; align-items:center; justify-content:center;
 min-height:0; padding:0 8% 0 0;
 animation:panel-in .65s both;
}
.back-cocktail #back-glass { width:100%; height:87%; min-height:0; }
.back-cocktail figcaption {
 margin-top:5%; font-size:clamp(16px,2vw,28px); letter-spacing:.1em;
 text-align:center; line-height:1.2;
}
.back-mode .back-order .back-timer {
 grid-column:2; grid-row:1; position:static; width:100%; height:100%;
 display:flex; flex-direction:column; justify-content:center; align-items:center;
 padding-top:1%;
}
.back-mode .back-order #back-number {
 font-size:min(29vw,38vh); line-height:.88; letter-spacing:-.035em;
 font-variant-numeric:lining-nums tabular-nums;
}
.back-mode .back-order .timer-label {
 margin-top:4%; font-size:clamp(9px,1vw,14px); letter-spacing:.16em;
}
.back-summary {
 grid-column:2; grid-row:2; align-self:center; justify-self:center;
 display:flex; align-items:center; justify-content:center; gap:clamp(16px,3vw,42px);
 width:82%; padding-top:6%; border-top:1px solid #e1e6ef;
 animation:panel-in .65s both;
}
.back-multiplier { display:flex; align-items:center; gap:clamp(10px,1.5vw,24px); white-space:nowrap; }
.back-multiplier #bar-quantity { font-size:min(12vw,17vh); line-height:1; font-variant-numeric:tabular-nums; }
.back-multiplier .multiply { font-size:min(6vw,8vh); line-height:1; font-weight:400; }
.prep-copy p { font-size:clamp(12px,1.45vw,21px); line-height:1.5; letter-spacing:.09em; margin:0; }
.prep-copy #back-glasses-label { display:block; margin-top:8px; font-size:clamp(15px,1.7vw,23px); font-style:italic; color:#657b9d; }
.back-mode .back-order .back-timer.timeup #back-number { font-size:min(16vw,22vh); letter-spacing:-.035em; }

@media (max-width:700px) and (orientation:portrait) {
 .secret-settings { width:60px; height:60px; }
 .back-mode .brand-header { height:18%; padding-top:6%; }
 .back-mode .menu-screen { inset:23% 2% 8%; }
 .back-order { inset:23% 4% 9%; grid-template-columns:39% minmax(0,61%); grid-template-rows:54% 46%; }
 .back-cocktail { padding:0 7% 0 0; }
 .back-cocktail #back-glass { height:72%; }
 .back-cocktail figcaption { font-size:13px; letter-spacing:.04em; margin-top:12px; }
 .back-mode .back-order #back-number { font-size:36vw; }
 .back-mode .back-order .timer-label { font-size:7px; letter-spacing:.06em; text-align:center; padding:0 8%; line-height:1.7; margin-top:12px; }
 .back-summary { width:95%; gap:12px; padding-top:12%; }
 .back-multiplier { gap:6px; }
 .back-multiplier #bar-quantity { font-size:17vw; }
 .back-multiplier .multiply { font-size:8vw; }
 .prep-copy p { font-size:10px; letter-spacing:.03em; }
 .prep-copy #back-glasses-label { font-size:15px; margin-top:6px; }
 .back-mode .back-order .back-timer.timeup #back-number { font-size:15vw; }
 .tools [data-install] { font-size:8px; max-width:75px; line-height:1.3; }
}
@media (max-height:560px) and (orientation:landscape) {
 .back-mode .brand-header { height:20%; padding-top:1%; }
 .back-order { inset:23% 8% 9%; }
 .back-mode .back-order #back-number { font-size:36vh; }
 .back-mode .back-order .timer-label { font-size:8px; margin-top:3%; }
 .back-multiplier #bar-quantity { font-size:17vh; }
 .back-multiplier .multiply { font-size:8vh; }
 .prep-copy p { font-size:11px; }
 .prep-copy #back-glasses-label { font-size:14px; margin-top:4px; }
 .back-cocktail figcaption { font-size:15px; margin-top:3%; }
 .install-entry { margin:7px auto; min-height:30px; }
 #settings-dialog { max-height:90dvh; overflow-y:auto; padding:25px; }
}
@media (prefers-reduced-motion:reduce) {
 .digit-glyph.enter,.digit-glyph.exit,.back-cocktail,.back-summary { animation-duration:.01ms; }
}