/* One stable phone-sized slot for the lesson, live path, receipt and readiness. */
.game #comboBanner,.game #comboBanner.chain-summary{height:104px;min-height:104px;box-sizing:border-box;margin:0 0 3px;padding:4px 3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;line-height:1.25;white-space:pre-line}
.game .first-combo-guide{height:104px}
.game:has(.first-combo-guide:not([hidden])) #comboBanner.short-live-path,.game:has(.first-combo-guide:not([hidden])) #comboBanner.short-invalid-path,.game:has(.first-combo-guide:not([hidden])) #comboBanner.short-board-busy,.game:has(.first-combo-guide:not([hidden])) #comboBanner.short-board-ready{display:flex;height:104px;min-height:104px}
.game:has(#comboBanner.short-live-path) .first-combo-guide:not([hidden]),.game:has(#comboBanner.short-invalid-path) .first-combo-guide:not([hidden]),.game:has(#comboBanner.short-board-busy) .first-combo-guide:not([hidden]),.game:has(#comboBanner.short-board-ready) .first-combo-guide:not([hidden]){display:none}
.path-finish-cue{padding:3px 7px;font-size:10px;line-height:1.25}
.tile.path-finish-end:after{inset:-2px -1px auto auto;animation:short-endpoint-tap 1.05s ease-in-out infinite;box-shadow:0 2px 0 #7b583b55,0 0 0 3px #fff8da85}
.tile.short-next-step{outline:2px dashed #fff6b9;outline-offset:-1px;animation:short-neighbor-breathe 1s ease-in-out infinite}
.short-path-meter{display:flex;align-items:center;justify-content:center;gap:5px;height:21px;max-width:100%;color:#785330;font:700 10px/1 Arial;white-space:nowrap;text-shadow:none}
.short-meter-count{font-variant-numeric:tabular-nums}.short-meter-pips{display:flex;gap:2px}.short-meter-pips i{display:block;width:7px;height:8px;background:#ddc79e;border-radius:3px;border:1px solid #bb9867;transition:background .12s,transform .12s}.short-meter-pips i.filled{background:#779458;border-color:#617947;transform:translateY(-1px)}.short-meter-arrow{font-size:14px}.short-meter-waffle{display:block;width:22px;height:22px}.short-meter-waffle svg{display:block;width:100%;height:100%;overflow:visible}.short-path-meter b{font-size:10px}
#comboBanner.short-board-busy:after,#comboBanner.short-board-ready:after{content:attr(data-board-status);display:block;padding:3px 9px;border-radius:20px;background:#ead9b7;color:#765c3d;font:700 10px/1.3 Arial;text-shadow:none;white-space:nowrap}
#comboBanner.short-board-busy:after{animation:short-settling-breathe .7s ease-in-out infinite}
#comboBanner.short-board-ready:after{background:#e1ebcf;color:#4e6b3b;animation:short-ready-pop .3s ease-out}
.short-invalid-cue{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px 8px;max-width:100%;padding:7px 10px;background:#f7e3b9;border:1px solid #cda36c;border-radius:12px;color:#76512f;line-height:1.2;text-shadow:none;animation:short-ready-pop .25s ease-out}
.short-invalid-cue>span{display:flex;gap:3px}.short-invalid-cue i{width:11px;height:13px;border-radius:4px;border:1.5px dashed #a47a49;background:#fff3d5}.short-invalid-cue i.filled{border-style:solid;background:#809560;border-color:#657b47}.short-invalid-cue b{font-size:11px}.short-invalid-cue small{font-size:10px;font-weight:400}
@keyframes short-endpoint-tap{0%,100%{transform:scale(1);box-shadow:0 2px 0 #7b583b55,0 0 0 2px #fff8da90}45%{transform:scale(1.13);box-shadow:0 2px 0 #7b583b55,0 0 0 6px #fff8da20}}
@keyframes short-neighbor-breathe{0%,100%{outline-color:#fff6b9;box-shadow:0 0 0 1px #744d2830}50%{outline-color:#fffbea;box-shadow:0 0 0 3px #fff2b653}}
@keyframes short-settling-breathe{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes short-ready-pop{from{transform:scale(.94);opacity:.4}to{transform:scale(1);opacity:1}}
@media(max-width:350px){.game #comboBanner,.game #comboBanner.chain-summary{font-size:9.5px;gap:2px}.short-path-meter{gap:4px}.short-meter-pips i{width:6px}.path-finish-cue{font-size:10px}}
@media(prefers-reduced-motion:reduce){.tile.path-finish-end:after,.tile.short-next-step,#comboBanner.short-board-busy:after,#comboBanner.short-board-ready:after,.short-invalid-cue{animation:none}.short-meter-pips i{transition:none}}

/* The combo lesson and live receipt share one fixed slot: no stacked explanations. */
.game #comboLesson{height:104px;min-height:104px;box-sizing:border-box;margin:0 0 3px;padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.game #comboLesson strong{font-size:15px;line-height:1.2}
.game #comboLesson small{font-size:12px;line-height:1.3;margin:0}
.game #comboLesson button{min-height:40px;min-width:122px;padding:7px 13px;margin:2px 0 0;font-size:12px}
.game:has(#comboLesson:not([hidden])) #comboBanner{display:none}
.game:has(#comboLesson:not([hidden])) #comboBanner.short-live-path,.game:has(#comboLesson:not([hidden])) #comboBanner.short-invalid-path{display:flex}
.game:has(#comboBanner.short-live-path) #comboLesson,.game:has(#comboBanner.short-invalid-path) #comboLesson{display:none}
.game #comboBanner .path-preview-score{font-size:19px;line-height:1.2;font-weight:800;font-variant-numeric:tabular-nums;white-space:normal}
.game #comboBanner .path-preview-reward{font-size:12px;line-height:1.3;white-space:normal;font-weight:600}
@media(max-width:350px){.game #comboBanner .path-preview-score{font-size:17px}.game #comboBanner .path-preview-reward{font-size:11px}}

/* A brief eight-toast demonstration uses the receipt space, not another card. */
.short-chain-trace{position:absolute;inset:0;width:100%;height:100%;z-index:7;pointer-events:none;overflow:visible}
.short-coach-underlay,.short-coach-line{fill:none;stroke-linecap:round;stroke-linejoin:round}
.short-coach-underlay{stroke:#624c386b;stroke-width:2.5}.short-coach-line{stroke:#fff3b3;stroke-width:1.4;stroke-dasharray:1;animation:short-coach-draw 2s cubic-bezier(.22,.6,.3,1) both}
.short-chain-trace circle{fill:#78915b;stroke:#fff4d3;stroke-width:.65}.short-chain-trace text{font:700 2.7px Arial;text-anchor:middle;fill:#fffbee;paint-order:stroke;stroke:#5e7446;stroke-width:.15}
.short-chain-trace g{animation:short-coach-stop .3s ease-out both;animation-delay:calc(var(--coach-step)*.15s)}
.short-chain-cue{display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 10px;border:1px solid #bfce9c;border-radius:14px;background:linear-gradient(130deg,#f9f3dc,#e2eacd);color:#526a3c;box-shadow:0 3px 0 #b4be9266;font:700 11px/1.2 Arial;white-space:nowrap;text-shadow:none;animation:short-ready-pop .3s ease-out}
.short-coach-waffle{display:block;width:28px;height:28px}.short-coach-waffle svg{width:100%;height:100%;overflow:visible}.short-coach-pips{display:grid;grid-template-columns:repeat(4,5px);gap:2px}.short-coach-pips i{display:block;width:5px;height:6px;background:#81985d;border-radius:2px;animation:short-coach-stop .3s ease-out both;animation-delay:calc(var(--coach-step)*.15s)}
@keyframes short-coach-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes short-coach-stop{from{opacity:.15}to{opacity:1}}
@media(max-width:600px){.customer-order-mode .game:has(.breakfast-event-card) #comboBanner,.customer-order-mode .game:has(.breakfast-event-card) #comboBanner.chain-summary{height:64px;min-height:64px;padding:3px;gap:2px}.game:has(.breakfast-event-card) #comboBanner .path-preview-score{font-size:17px;line-height:1.1}.game:has(.breakfast-event-card) #comboBanner .path-preview-reward{font-size:11px;line-height:1.15}.game:has(.breakfast-event-card) .path-finish-cue{padding:2px 6px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.short-coach-line,.short-chain-trace g,.short-chain-cue,.short-coach-pips i{animation:none}}
