/* Café simulator: charcoal control surfaces, copper actions and quiet status cues.
   Responsive anchors and the simulation stay in style.css and their own modules. */
:root {
  --hud-ink:#f2eee6;
  --hud-muted:#bfb8ab;
  --hud-edge:#686056;
  --hud-surface:#252522f5;
  --hud-raised:#353530;
  --hud-accent:#deb47b;
  --hud-line:#5b584f;
  --hud-shadow:0 3px 12px #15130f45,inset 0 1px #ffffff0d;
}
#ui {font-family:Nunito,Arial,sans-serif;color:var(--hud-ink)}
#ui button {font-weight:750;text-shadow:none}
#ui .hud-business,#ui .shop-customers,#ui .shop-shift,#ui .shop-objective {
  background:var(--hud-surface);color:var(--hud-ink);
  border:1px solid var(--hud-edge);border-radius:6px;box-shadow:var(--hud-shadow);
}
#ui .shop-brand {color:var(--hud-ink);filter:none;transform:none;text-shadow:0 1px 4px #000}
#ui .shop-brand strong {font-weight:800;-webkit-text-stroke:0;letter-spacing:0}
#ui .shop-brand small {color:#e5d1b5;letter-spacing:1.2px;font-weight:700}
#ui .shop-brand-seal {width:40px;height:44px;flex-basis:40px;background:var(--hud-surface);border:1px solid var(--hud-edge);border-radius:5px;box-shadow:var(--hud-shadow);color:var(--hud-accent)}
#ui .shop-wallet {background:var(--hud-surface);color:var(--hud-ink);border:1px solid var(--hud-edge);border-radius:5px;box-shadow:var(--hud-shadow);min-height:44px}
#ui .shop-wallet strong {display:inline-block;font-weight:800;color:var(--hud-accent);font-variant-numeric:tabular-nums}
#ui .shop-wallet #reputation {color:var(--hud-ink)}
#ui .shop-wallet small {color:var(--hud-muted)}
#ui .shop-wallet i {width:1px;background:var(--hud-line)}
#ui .shop-wallet .hud-icon {width:22px;height:22px;filter:none}
#ui .shop-shift b,#ui .shop-shift #shift-time {color:var(--hud-ink);font-weight:750}
#ui .shop-shift #shift-weather {color:var(--hud-muted)}
#ui .shop-shift.ending #shift-time {color:#ffb19a}
#ui .objective-medal {background:none;border:0;border-radius:0;box-shadow:none;width:26px;flex-basis:26px}
#ui .shop-objective small,#ui #objective-progress {color:var(--hud-muted);font-weight:600}
#ui .shop-objective b {color:var(--hud-ink);font-weight:750}

/* Utility controls share one quiet rail; only the active task is accented. */
#ui .shop-top-actions {background:var(--hud-surface);border:1px solid var(--hud-edge);border-radius:6px;box-shadow:var(--hud-shadow);gap:4px;padding:5px}
#ui .shop-top-actions button,#ui .mobile-pause,#ui .shop-shift button,#ui .owner-actions button,
#ui .shop-dock button,#ui .shop-btn,#ui .order-serve {
  background:var(--hud-raised);color:var(--hud-ink);border:1px solid #70695d;
  border-radius:4px;box-shadow:inset 0 1px #ffffff0c,0 1px 2px #0003;
  transition:transform 110ms ease-out,scale 110ms ease-out,filter 110ms ease-out;
}
#ui .shop-top-actions button {background:transparent;border-color:transparent;box-shadow:none}
#ui .shop-top-actions .hud-icon {width:23px;height:23px;filter:none}
#ui .shop-btn.primary,#ui .shop-dock [data-panel="supplies"],#ui .storm-notice button {
  background:#d6ad76;color:#2b251e;border-color:#e9c38e;box-shadow:inset 0 1px #ffe7c23d,0 1px 2px #0003;
}
#ui .shop-top-actions [aria-expanded="true"],#ui .owner-actions [aria-pressed="true"],#ui .owner-control[aria-pressed="true"] {
  outline:none;background:#514632;color:#ffe0b2;border-color:#bc965f;box-shadow:inset 0 -2px #deb47b;
}
#ui .mobile-hud-toggle em {background:#d6ad76;color:#27231d;border:1px solid #252522;border-radius:3px;min-width:16px;font-size:10px;box-shadow:none;top:-2px;right:-1px}
#ui .control-divider {background:var(--hud-line);height:24px}
#ui .mobile-pause {font-size:23px}

/* Workbench and order docket: compact numbers, inventory slots and progress. */
#ui .hud-business {gap:9px;padding:12px;border-top:2px solid #af8b5f}
#ui .mobile-drawer-title {border-color:var(--hud-line);color:var(--hud-accent)}
#ui .mobile-drawer-title>b {font-weight:800;font-size:12px;letter-spacing:.7px}
#ui .mobile-drawer-title button,#ui .shop-customers-title>button,#ui .shop-objective button {color:var(--hud-muted);border-radius:4px}
#ui .shop-workbench-title b,#ui .shop-customers-title>b {color:var(--hud-ink);font-weight:750;letter-spacing:.5px}
#ui .shop-workbench-title>span,#ui .shop-brew-line>span,#ui .shop-customers-title>span,
#ui .shop-empty,#ui .shop-select-hint {color:var(--hud-muted);font-weight:600}
#ui .shop-brew-line strong {color:var(--hud-accent);font-size:20px;text-shadow:none;font-weight:800}
#ui .shop-meter {height:5px;background:#151714;border:0;border-radius:1px;box-shadow:inset 0 1px 2px #0005;overflow:hidden}
#ui .shop-meter i {background:#b7c39b;border:0;border-radius:0;transition:width 180ms ease-out}
#ui .hud-business .shop-supplies {border-color:var(--hud-line)}
#ui .shop-supply-heading {color:var(--hud-muted);letter-spacing:.8px;font-weight:700}
#ui #stock-strip .stock-unit {color:var(--hud-ink);background:#1c1e1b;border:1px solid #58584f;border-radius:3px;box-shadow:none;min-height:32px}
#ui #stock-strip .stock-unit b {font-weight:750}
#ui .dish-count {color:#cbd6d7;background:none;border:0;border-bottom:1px solid #4e5048;border-radius:0;padding-inline:0}
#ui .dish-count>span {color:var(--hud-muted)}
#ui .cleaning-count {color:#f0c28b;border-color:var(--hud-line)}
#ui .shop-customers {border-top:2px solid #af8b5f}
#ui .shop-customers-title {background:none;border-bottom:1px solid var(--hud-line);margin:0 8px;padding:0;min-height:44px}
#ui .shop-customers-title>span {font-variant-numeric:tabular-nums}
#ui .order-slip {color:var(--hud-ink);border-color:#54554c;border-radius:3px;padding:7px 4px}
#ui .order-slip.selected {background:#3b3c33;box-shadow:inset 2px 0 #deb47b}
#ui .order-serve {background:#e4d4b9;border-color:#bfb197;color:#292720;box-shadow:none}
#ui .order-select {color:var(--hud-ink)}
#ui .order-select b {font-weight:750}
#ui .order-slip small {color:var(--hud-muted);font-weight:600}
#ui .shop-patience {background:#1c211b;height:3px;border-radius:0}
#ui .shop-patience em {background:#b7c39b}
#ui .shop-patience em.urgent {background:#f3a58a}
#ui .order-slip.unpaid {border-left-color:#e5b772;background:#4a3d2a}
#ui .order-slip.unpaid small {color:#f3d2a2}
#ui .shop-select-hint {font-size:10px}

/* Management menus continue the same material and typography as the HUD. */
#ui .shop-modal-backdrop {background:#12130f94;backdrop-filter:blur(2px)}
#ui .shop-modal-backdrop[data-dialog="event"] {background:transparent;backdrop-filter:none}
#ui .shop-modal {background:#292a25;color:var(--hud-ink);border:1px solid #8c806c;border-top:3px solid #c09b68;border-radius:7px;box-shadow:0 15px 60px #0008;scrollbar-color:#7b7465 #292a25}
#ui .shop-modal h2 {color:var(--hud-ink);text-shadow:none;font-weight:800;font-size:26px}
#ui .shop-eyebrow {color:var(--hud-accent);letter-spacing:1.2px;font-weight:700}
#ui .shop-description,#ui .shop-footnote,#ui .shop-store-row small,#ui .shop-mission small,#ui .shop-day-results dt {color:var(--hud-muted)}
#ui .shop-modal a {color:#e2bd85;text-decoration:underline;text-underline-offset:2px}
#ui .shop-close {background:#3b3b34;color:var(--hud-ink);border:1px solid #716959;border-radius:4px;box-shadow:none;font-weight:600}
#ui .item-choice {background:#383a31;color:var(--hud-ink);border:1px solid #726e5f;border-radius:4px;box-shadow:none}
#ui .item-choice:hover:not(:disabled) {background:#4a493c;border-color:#c09b68}
#ui .item-choice small {color:#d5ccbc}
#ui .shop-btn.danger {background:#70473b;color:#ffebe1;border-color:#b37960;box-shadow:none}
#ui .shop-store-row,#ui .shop-mission,#ui .shop-modal-wallet,#ui .cafe-settings-controls,#ui .washing-manual {border-color:var(--hud-line)}
#ui .shop-store-row b,#ui .shop-mission b,#ui .shop-modal h3,#ui .shop-day-results dd {color:var(--hud-ink)}
#ui .shop-modal-wallet strong,#ui .shop-start-cash strong,#ui .washing-cups b {color:var(--hud-accent)}
#ui .house-benefits caption,#ui .house-levels summary {color:var(--hud-accent)}
#ui .house-benefits thead {background:#3c3d33;color:var(--hud-ink)}
#ui .house-benefits th,#ui .house-benefits td {border-color:var(--hud-line)}
#ui .house-benefits tbody th,#ui .house-benefits tbody td {color:var(--hud-ink)}
#ui .house-benefits tbody tr:nth-child(-n+3) {background:#ffffff05}
#ui .house-levels p,#ui .house-levels small {color:var(--hud-muted)}
#ui .house-levels li {border-color:var(--hud-line)}
#ui .house-levels li[aria-current] {background:#4b4536;border-left-color:var(--hud-accent)}
#ui .house-progress .shop-meter {background:#161914}
#ui .washing-machine p,#ui .washing-manual p,#ui .washing-locked {color:var(--hud-muted)}
#ui .washing-machine .washing-status,#ui .washing-machine .washing-price {color:#e1d2b8}
#ui .cafe-name-field,#ui .cafe-owners legend,#ui .cafe-opening-line,#ui .cafe-opening-line b,#ui .cafe-opening-head p {color:var(--hud-muted)}
#ui .cafe-name-field input,#ui .cafe-opening-line select,#ui .shop-shift-length select {background:#1c201b;color:var(--hud-ink);border-color:#79725f;border-radius:4px}
#ui .cafe-owner-card {border-radius:4px;border:1px solid #686452;background:#444438}
#ui .cafe-owner-card b {color:var(--hud-ink);font-weight:750;background:#252722}
#ui .cafe-owner-card img {min-height:0}
#ui .cafe-owner-card small {display:block;font-size:10px;font-weight:400}
#ui .cafe-owner-option input:checked + span {background:#685940;border:1px solid #e1b879}
#ui .cafe-owner-option input:checked + span b {background:#d6ad76;color:#29251e}
#ui .cafe-owner-option input:checked + span::after {background:#deb47b;color:#252522;border-radius:3px}

/* World interactions remain clear of character silhouettes; receipts stay white. */
#labels .station-mark {background:#292c26ed;border:1px solid #bbb39f;color:#f2eee6;box-shadow:0 2px 5px #0006;text-shadow:none}
#labels .station-mark.has-dishes {background:#35494a;border-color:#c3dde0}
#labels .customer-bubble {background:#e7dcc5;border:1px solid #5d5647;border-radius:5px;color:#302a21;box-shadow:0 2px 5px #0005}
#labels .customer-bubble::after {border-top-color:#5d5647}
#labels .customer-bubble.urgent {background:#efb797;border-color:#8e503a}
#labels .drama-clean-badge {background:#35403a;color:#f2eee6;border-color:#b8c3aa;border-radius:5px;box-shadow:0 2px 4px #0005}
#ui .owner-actions {background:var(--hud-surface);border:1px solid var(--hud-edge);border-radius:6px;box-shadow:var(--hud-shadow)}
.owner-joystick {background:#282c28ad;border:1px solid #c9c4b1;box-shadow:inset 0 0 0 8px #1113;color:#e1d8c3}
.owner-stick-knob {background:#9b8c73;border:1px solid #e0cda7;box-shadow:0 2px 6px #0005}
#ui .shop-toast {background:var(--hud-surface);color:var(--hud-ink);border:1px solid var(--hud-edge);border-left:3px solid var(--hud-accent);border-radius:4px;box-shadow:var(--hud-shadow)}
#ui .rain-alert {background:#2f4245;color:#e1ecea;border:1px solid #95b4b9;border-left:3px solid #afd5dc;border-radius:5px;box-shadow:var(--hud-shadow)}
#ui .storm-notice {background:#4b3d27;color:#ffe3b3;border:1px solid #bc965f;border-radius:4px;box-shadow:none}
#ui .storm-notice[data-phase="panic"] {background:#5c352b;color:#ffe6d6;border-color:#d18b6c}
#ui .storm-notice button {border-radius:3px;box-shadow:none}
#ui .neglect-notice {margin:0 6px 6px;padding:6px 8px;background:#49332b;color:#ffdfc4;border-left:2px solid #da956d;font-size:11px;line-height:1.4}
@media(max-width:900px),(max-height:520px){
  #ui.has-neglect:not(.mobile-orders-open):not(.mobile-business-open):not(.has-storm) .shop-customers {display:block;left:8px;right:8px;bottom:calc(75px + var(--safe-bottom));width:auto;padding:5px;max-height:none;pointer-events:none}
  #ui.has-neglect:not(.mobile-orders-open):not(.has-storm) .shop-customers-title,
  #ui.has-neglect:not(.mobile-orders-open):not(.has-storm) .shop-customers-content,
  #ui.has-storm:not(.mobile-orders-open) #neglect-status {display:none}
  #ui .neglect-notice {margin:0}
}

/* Immediate, modest pressure feedback, no elastic bounce or input delay. */
#ui button:active:not(:disabled) {transform:none}
#ui button.hud-pressed:not(:disabled),#ui button:active:focus-visible:not(:disabled) {scale:.98;transform:translateY(1px)}
#ui button:focus-visible,#labels button:focus-visible,#ui input:focus-visible,#ui select:focus-visible,#ui .cafe-owner-option input:focus-visible + span {outline:2px solid #f3ce95;outline-offset:3px}
#ui button:disabled {opacity:.55;filter:saturate(.2);box-shadow:none}
@media(hover:hover) {#ui button:hover:not(:disabled) {filter:brightness(1.15)}}
@keyframes cafe-panel-in {from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
#ui .shop-modal-backdrop:not([hidden]) .shop-modal {animation:cafe-panel-in 140ms ease-out}
@media(max-width:900px),(max-height:520px) {
  #ui .shop-brand-seal {width:27px;height:34px;flex-basis:27px}
  #ui .shop-brand strong {font-weight:800;text-shadow:0 1px 3px #000}
  #ui .shop-wallet {border-radius:4px}
  #ui .shop-wallet .hud-icon {width:16px;height:18px}
  #ui .shop-top-actions {gap:4px;padding:5px;border-radius:6px}
  #ui .shop-top-actions button {border-radius:3px}
  #ui .shop-top-actions small {font-size:9px;font-weight:700}
  #ui .hud-business,#ui .shop-customers {border-radius:6px;padding:10px}
  #ui .hud-business .shop-workbench-title {flex-direction:row;text-align:left}
  #ui .shop-modal h2 {font-size:22px}
  #ui .shop-customers-title {margin:0}
  #ui.mobile-business-open .hud-business,#ui.mobile-orders-open .shop-customers {animation:cafe-panel-in 140ms ease-out}
}
@media(prefers-reduced-motion:reduce) {
  #ui button,#ui .shop-meter i {transition:none}
  #ui .shop-modal-backdrop:not([hidden]) .shop-modal,
  #ui.mobile-business-open .hud-business,#ui.mobile-orders-open .shop-customers {animation:none}
  #ui button:active:focus-visible:not(:disabled),#ui button.hud-pressed:not(:disabled) {scale:1;transform:none}
}

#ui .inspection-checklist {
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,3fr);
  gap:8px 14px;
  margin:12px 0;
  padding:10px 12px;
  border:1px solid var(--hud-line);
  background:#ffffff05;
  text-align:left;
  font-size:13px;
  line-height:1.4;
}
#ui .inspection-checklist dt {color:var(--hud-muted)}
#ui .inspection-checklist dd {margin:0;color:var(--hud-ink);font-weight:600}


/* Pet trouble shares the urgent-order strip, keeping the response above the dock. */
#ui .pet-notice {display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:7px;margin:0 8px 7px;padding:8px;background:#493c29;color:#ffe4bc;border:1px solid #b68c53;border-left:3px solid #e6b878;border-radius:4px;pointer-events:auto}
#ui .pet-notice[hidden] {display:none}
#ui .pet-notice>span {font-size:22px}
#ui .pet-notice>div {min-width:0;display:grid;gap:4px}
#ui .pet-notice b {font-size:12px;line-height:1.3}
#ui .pet-notice small {font-size:11px;line-height:1.4;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#ui .pet-notice button {min-width:64px;min-height:44px;padding:6px 8px;background:#d6ad76;color:#29251e;border:1px solid #f3ce95;border-radius:3px;font-size:11px;font-weight:750;touch-action:manipulation}
#ui .pet-notice button[hidden] {display:none}
#ui .pet-notice[data-phase="warning"],#ui .pet-notice[data-outcome="hit"] {background:#54382e;border-color:#cf9477}
#ui .pet-notice[data-outcome="prevented"] {background:#344332;border-color:#adc199}
#ui .pet-active #customer-details {display:none}
#ui .pet-active #customer-list {max-height:88px}
@media(max-width:900px),(max-height:520px) {
  #ui.has-pet:not(.mobile-orders-open) .shop-customers {display:block;max-width:380px;left:50%;right:auto;transform:translateX(-50%);width:calc(100% - 16px);bottom:calc(75px + var(--safe-bottom));padding:4px;max-height:36dvh;overflow:auto;pointer-events:auto;border-width:1px}
  #ui.has-pet:not(.mobile-orders-open) .shop-customers-title,
  #ui.has-pet:not(.mobile-orders-open) .shop-customers-content,
  #ui.has-pet:not(.mobile-orders-open) #neglect-status {display:none}
  #ui .pet-notice {margin:0;padding:7px;grid-template-columns:20px minmax(0,1fr) auto;gap:6px}
  #ui .pet-notice b {font-size:12px}
  #ui .pet-notice small {font-size:11px}
  #ui .pet-notice button {min-width:66px}
  #ui.has-pet.mobile-business-open .hud-business {bottom:calc(195px + var(--safe-bottom));max-height:38dvh}
  #ui.has-pet.controlling-owner .owner-actions {bottom:calc(195px + var(--safe-bottom))}
  #ui.has-pet.controlling-owner .owner-joystick {bottom:calc(195px + var(--safe-bottom))}
}
@media(max-height:520px) {
  #ui.has-pet:not(.mobile-orders-open) .shop-customers {left:auto;right:8px;transform:none;width:300px;max-height:calc(100dvh - 150px)}
}