/* The cafe artwork and its four order columns follow the ingredient board. */
#coffeeRushScreen .coffee-rush-room { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
#coffeeRushScreen .coffee-rush-ingredients { grid-column: 1; grid-row: auto; width: min(100%, 540px); justify-self: center; }
#coffeeRushScreen .coffee-rush-room > .holdem-error { grid-column: 1 / -1; }
#coffeeRushScreen .coffee-rush-dock { position: static; transform: none; width: min(100%, 540px); box-sizing: border-box; justify-self: center; grid-column: 1 / -1; grid-row: auto; padding: 10px; border: 1px solid #bca37f; border-radius: 16px; background: #efe0c7; box-shadow: 0 4px 16px #241a191a; }
#coffeeRushScreen .coffee-rush-dock-summary { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 7px; }
#coffeeRushScreen .coffee-rush-dock .coffee-rush-order, #coffeeRushScreen .coffee-rush-dock .coffee-rush-inventory { margin: 0; padding: 0 4px; gap: 3px; background: none; font-size: 11px; color: #614c34; }
#coffeeRushScreen .coffee-rush-dock .coffee-rush-order strong { color: #3c2e20; font-size: 12px; }
#coffeeRushScreen .coffee-rush-dock .coffee-rush-inventory > div { gap: 3px 8px; font-size: 11px; }
#coffeeRushScreen .coffee-rush-board-host { position: relative; }
#coffeeRushScreen .coffee-rush-board-host .defs { position: absolute; width: 0; height: 0; overflow: hidden; }
#coffeeRushScreen .coffee-rush-board { position: relative; width: 100%; height: clamp(126px, 25vw, 190px); container-type: inline-size; overflow: hidden; border-radius: 7px; background: #cba67d; box-shadow: inset 0 0 0 1px #755b3f; color: #614f39; }
#coffeeRushScreen .coffee-rush-board .floor { position: absolute; inset: 0 0 18%; background-color: #d4af86; background-image: repeating-linear-gradient(45deg, transparent 0 18px, #9b704c25 19px 20px, transparent 21px 40px), repeating-linear-gradient(-45deg, transparent 0 18px, #f4d4aa40 19px 21px, transparent 22px 40px); box-shadow: inset 0 0 30px #72472433; }
#coffeeRushScreen .coffee-rush-board .counter { position: absolute; left: 0; top: 56%; width: 100%; height: 26%; background: linear-gradient(#ead6b0, #f0dfbd 70%, #d5bc90); box-shadow: 0 -2px 5px #6d4c2520; }
#coffeeRushScreen .coffee-rush-board .review { position: absolute; top: 0; width: 11%; height: 82%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; background: linear-gradient(100deg, #e8d4ac, #f3e3c5); color: #6d634c; }
#coffeeRushScreen .coffee-rush-board .review.top { left: 0; }
#coffeeRushScreen .coffee-rush-board .review.bottom { right: 0; }
#coffeeRushScreen .coffee-rush-board .portrait { width: 70%; height: 38%; }
#coffeeRushScreen .coffee-rush-board .review-arrow { display: none; }
#coffeeRushScreen .coffee-rush-board .bubble { border: 1px solid #9c8f72; border-radius: 4px; padding: 2px 3px; background: #eee6cf; font: 700 clamp(10px, 1.7cqw, 16px) Georgia, serif; white-space: nowrap; }
#coffeeRushScreen .coffee-rush-board .review.bottom .bubble { color: #785543; }
#coffeeRushScreen .coffee-rush-board .upgrade { position: absolute; top: 5%; width: 15%; height: 48%; border: 1px solid #86664a; border-radius: 15%; padding: 1cqw; background: linear-gradient(140deg, #a78560, #bc9870 45%, #86664b); box-shadow: 0 2px 1px #4e392b, 0 3px 6px #54352335; }
#coffeeRushScreen .coffee-rush-board .tile-one { left: 13%; }
#coffeeRushScreen .coffee-rush-board .tile-two { left: 32.5%; }
#coffeeRushScreen .coffee-rush-board .tile-three { left: 52%; }
#coffeeRushScreen .coffee-rush-board .tile-four { left: 71.5%; }
#coffeeRushScreen .coffee-rush-board .tile-face { height: 100%; border-radius: 11%; background: linear-gradient(125deg, #594131, #70513b 55%, #503b2c); color: #eee8d2; box-shadow: inset 0 0 5px #34251c55; }
#coffeeRushScreen .coffee-rush-board .tile-one .tile-face { background: linear-gradient(125deg, #4c5a37, #606d43 65%, #435538); }
#coffeeRushScreen .coffee-rush-board .tile-icon { width: 100%; height: 100%; color: #f2ecd9; }
#coffeeRushScreen .coffee-rush-board .upgrade.is-complete { box-shadow: 0 2px 1px #4e392b, inset 0 0 0 2px #8baf69; }
#coffeeRushScreen .coffee-rush-board .upgrade.is-current { outline: 2px solid #fff0a9; outline-offset: 2px; }
#coffeeRushScreen .coffee-rush-board .station { position: absolute; top: 51%; width: 17%; height: 31%; color: #79644a; }
#coffeeRushScreen .coffee-rush-board .station.one { left: 12%; }
#coffeeRushScreen .coffee-rush-board .station.two { left: 31.5%; }
#coffeeRushScreen .coffee-rush-board .station.three { left: 51%; }
#coffeeRushScreen .coffee-rush-board .station.four { left: 70.5%; }
#coffeeRushScreen .coffee-rush-board .station svg { width: 100%; height: 100%; overflow: visible; }
#coffeeRushScreen .coffee-rush-board .counter-top, #coffeeRushScreen .coffee-rush-board .counter-bottom { display: none; }
#coffeeRushScreen .coffee-rush-board .rail { position: absolute; left: 0; bottom: 0; width: 100%; height: 18%; display: grid; grid-template-columns: repeat(4, 1fr); background: linear-gradient(#82975b, #58764c); border-top: 1px solid #b6bd82; box-shadow: inset 0 -5px 8px #2c4a3820; }
#coffeeRushScreen .coffee-rush-board .rail-label { position: relative; display: grid; place-items: center; border-right: 1px solid #bdc79c55; color: #efe7ce; font: 700 clamp(14px, 2.5cqw, 23px) Georgia, serif; text-shadow: 1px 1px #506840; }
#coffeeRushScreen .coffee-rush-board .rail-label:last-child { border-right: 0; }
#coffeeRushScreen .coffee-rush-board .rail-label:last-child:after { content: "!"; position: absolute; right: 12%; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 50%; background: #e3e1ce; color: #6b855e; font: 700 13px/16px Georgia, serif; text-align: center; text-shadow: none; }
#coffeeRushScreen .coffee-rush-board .rail-label.is-current { background: #fff2bd30; color: #fff8e2; }
html[data-theme="dark"] #coffeeRushScreen .coffee-rush-dock { border-color: #816e52; background: #302a23; }
html[data-theme="dark"] #coffeeRushScreen .coffee-rush-dock .coffee-rush-order, html[data-theme="dark"] #coffeeRushScreen .coffee-rush-dock .coffee-rush-inventory, html[data-theme="dark"] #coffeeRushScreen .coffee-rush-dock .coffee-rush-order strong { color: #eee0c9; background: none; }
@media (max-height: 560px) and (orientation: landscape) { #coffeeRushScreen .coffee-rush-board { height: 100px; } #coffeeRushScreen .coffee-rush-dock-summary { margin-bottom: 4px; } }