/* 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)); overflow-anchor: none; }
#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-order-nav { display: grid; grid-template-columns: 40px minmax(0,1fr) 40px; align-items: center; gap: 10px; min-height: 40px; }
#coffeeRushScreen .coffee-rush-order-nav > button { min-width: 40px; min-height: 40px; padding: 0; border: 1px solid #bca37f; border-radius: 10px; background: #fffaf2; color: #624b34; font-size: 23px; line-height: 1; }
#coffeeRushScreen .coffee-rush-order-nav > button:disabled { opacity: .45; }
#coffeeRushScreen .coffee-rush-order-nav-center { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; text-align: center; }
#coffeeRushScreen .coffee-rush-order-nav-center > span, #coffeeRushScreen .coffee-rush-order-nav-center > strong { overflow: hidden; color: #3c2e20; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
#coffeeRushScreen .coffee-rush-order-nav-center > button { flex: 0 0 auto; min-height: 36px; padding: 5px 12px; border: 1px solid #82975b; border-radius: 9px; background: #fffaf2; color: #455b36; font-size: 12px; font-weight: 700; }
#coffeeRushScreen .coffee-rush-room.is-finished > :not(#coffeeRushInvite):not(#coffeeRushGameStatus):not(#coffeeRushResultPanel) { opacity: .34; transition: opacity .2s ease; }
#coffeeRushScreen .coffee-rush-result-panel { display: grid; gap: 6px; margin: 10px 0 0; padding: 14px 16px; border: 1px solid #8b754d; border-radius: 14px; background: linear-gradient(135deg,#f4e5bf,#e4ce99); color: #3b2c19; box-shadow: 0 4px 14px #4c351926; }
#coffeeRushScreen .coffee-rush-result-panel strong { font-size: 15px; line-height: 1.45; }
#coffeeRushScreen .coffee-rush-result-panel span { font-size: 14px; font-weight: 750; line-height: 1.5; }
#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-order-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; margin: 0 0 6px; padding: 7px 9px; border: 1px solid #c4ad83; border-radius: 9px; background: #f4ead5; color: #57432d; font-size: 11px; font-weight: 700; text-align: center; }
#coffeeRushScreen .coffee-rush-order-metrics span { display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
#coffeeRushScreen .coffee-rush-order-metrics b { color: #302317; font-size: 13px; }
#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; opacity: .42; transition: opacity .18s ease; }
#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-icon { width: 100%; height: 100%; color: #f2ecd9; }
#coffeeRushScreen .coffee-rush-board .upgrade.is-complete { opacity: 1; box-shadow: 0 2px 1px #4e392b, inset 0 0 0 2px var(--coffee-player-color, #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, html[data-theme="dark"] #coffeeRushScreen .coffee-rush-order-nav-center > span, html[data-theme="dark"] #coffeeRushScreen .coffee-rush-order-nav-center > strong { color: #eee0c9; background: none; }
html[data-theme="dark"] #coffeeRushScreen .coffee-rush-order-metrics { border-color: #816b47; background: #3b3125; color: #e8d8ba; }
html[data-theme="dark"] #coffeeRushScreen .coffee-rush-order-metrics b { color: #fff0d8; }
html[data-theme="dark"] #coffeeRushScreen .coffee-rush-result-panel { border-color: #a88e60; background: linear-gradient(135deg,#59492f,#423722); color: #fff2d8; }
/* Follow the personal board owner's meeple color, including local seat switches. */
@supports (color: color-mix(in srgb, red, white)) {
  #coffeeRushScreen .coffee-rush-dock {
    --coffee-board-light: color-mix(in srgb, var(--coffee-player-color, #a78560) 15%, #fff9ee);
    --coffee-board-floor: color-mix(in srgb, var(--coffee-player-color, #a78560) 30%, #e5d5b7);
    --coffee-board-frame: color-mix(in srgb, var(--coffee-player-color, #a78560) 65%, #896943);
    --coffee-board-edge: color-mix(in srgb, var(--coffee-player-color, #a78560) 40%, #493b2d);
    --coffee-board-face: color-mix(in srgb, var(--coffee-player-color, #a78560) 35%, #322c26);
    --coffee-board-track: color-mix(in srgb, var(--coffee-player-color, #a78560) 40%, #302c24);
    border-color: var(--coffee-board-frame); background: var(--coffee-board-light);
  }
  #coffeeRushScreen .coffee-rush-board { background: var(--coffee-board-frame); box-shadow: inset 0 0 0 1px var(--coffee-board-edge); }
  #coffeeRushScreen .coffee-rush-board .floor { background-color: var(--coffee-board-floor); }
  #coffeeRushScreen .coffee-rush-board .counter, #coffeeRushScreen .coffee-rush-board .review { background: linear-gradient(var(--coffee-board-light), var(--coffee-board-floor)); }
  #coffeeRushScreen .coffee-rush-board .upgrade { border-color: var(--coffee-board-edge); background: linear-gradient(140deg, var(--coffee-board-frame), var(--coffee-board-floor) 45%, var(--coffee-board-edge)); }
  #coffeeRushScreen .coffee-rush-board .tile-face { background: linear-gradient(125deg, var(--coffee-board-face), var(--coffee-board-edge) 55%, var(--coffee-board-face)); }
  #coffeeRushScreen .coffee-rush-board .upgrade.is-complete { box-shadow: 0 2px 1px #4e392b, inset 0 0 0 2px var(--coffee-player-color, #ffe5a0); }
  #coffeeRushScreen .coffee-rush-board .rail { background: linear-gradient(var(--coffee-board-edge), var(--coffee-board-track)); border-top-color: var(--coffee-board-floor); }
  #coffeeRushScreen .coffee-rush-board .rail-label { border-right-color: var(--coffee-board-frame); text-shadow: 1px 1px var(--coffee-board-track); }
  #coffeeRushScreen .coffee-rush-board .rail-label:last-child:after { color: var(--coffee-board-track); background: var(--coffee-board-light); }
  html[data-theme="dark"] #coffeeRushScreen .coffee-rush-dock { border-color: var(--coffee-board-frame); background: color-mix(in srgb, var(--coffee-player-color, #a78560) 12%, #24201c); }
}
@media (max-height: 560px) and (orientation: landscape) { #coffeeRushScreen .coffee-rush-board { height: 100px; } #coffeeRushScreen .coffee-rush-dock-summary { margin-bottom: 4px; } }