/* Bistro visual finish: warm paper, garden enamel and quiet brass.
   Loaded after component sheets. Geometry, visibility and scrolling remain
   owned by those components; this file only finishes their existing surfaces. */
:root {
  --bistro-paper: #fffaf0;
  --bistro-paper-raised: #fffdf7;
  --bistro-paper-soft: #f3ecdc;
  --bistro-line: #d5c7ae;
  --bistro-line-soft: #e5dac6;
  --bistro-ink: #344e43;
  --bistro-muted: #665f4e;
  --bistro-green: #2f6b53;
  --bistro-green-dark: #25573f;
  --bistro-sage: #e7eddd;
  --bistro-honey: #ecd097;
  --bistro-terracotta: #9c513d;
  --bistro-card-shadow: 0 1px 2px #4c39290b, 0 4px 12px #4c39290b;
  --bistro-sheet-shadow: 0 2px 5px #263c2920, 0 18px 52px #263c2926;
  --bistro-enamel: linear-gradient(180deg, #fffdf7, #f8f0e1);
  --panel-bg: var(--bistro-enamel);
  --panel-border: 1px solid #cabda2;
  --panel-shadow: 0 2px 5px #4c392913, 0 8px 20px #4c392912, inset 0 1px #ffffffb3;
  --panel-shadow-raised: var(--bistro-sheet-shadow), inset 0 1px #ffffffb3;
  --panel-shadow-pressed: inset 0 2px 4px #4c39291c;
}

/* Float above the world only. The shop's own inline guidance stays in place. */
#ui-root:has(.sheet-panel, #shop-panel, .modal) > #tutorial-banner {
  visibility: hidden;
  pointer-events: none;
}

/* Compact controls retain their measured viewport and safe-area positions. */
.resource-chip {
  background: #fffbf0f5;
  border-color: #cfc1a6;
  box-shadow: 0 2px 6px #31452b14, inset 0 1px #fff;
  color: #4d4635;
  text-shadow: none;
  font-weight: 800;
}
.level-badge {
  background: linear-gradient(155deg, #f7e2aa, #d6a74a);
  color: #684716;
  text-shadow: 0 1px #fff7df80;
  border-color: #fff9eb;
  box-shadow: 0 2px 6px #59422226, inset 0 1px #fff7d9;
}
.level-badge::after { opacity: .24; }
.xp-bar {
  background: #f4eddb;
  box-shadow: inset 0 1px 3px #57432b25, 0 1px #ffffff90;
}
.xp-fill {
  background: linear-gradient(90deg, #d7b465, #dba66e);
  box-shadow: inset 0 1px #ffffff45;
}
.xp-label { color: #453d2b; text-shadow: none; font-weight: 800; }
.chip-plus {
  background: linear-gradient(180deg, #5a8766, #3d704e);
  border-color: #2e603e;
  box-shadow: 0 1px 3px #26483224, inset 0 1px #ffffff30;
}
.icon-button { box-shadow: 0 3px 10px #30452b1a, inset 0 1px #fff; }
#action-bar {
  background: #fffaf0f5;
  border-color: #c4b392;
  box-shadow: 0 4px 10px #3541291c, 0 12px 30px #35412924, inset 0 1px #fff;
}
#action-bar .action-button {
  color: #4e4d3b;
  text-shadow: none;
  font-family: var(--font-main);
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
#action-bar .action-label { font-weight: 800; line-height: 1.25; }
#action-bar .action-icon { filter: drop-shadow(0 1px 1px #63533b1a); }
#action-bar .action-button:hover:not(:disabled) {
  background: #eef0df;
  border-color: #c8d1b3;
  transform: translateY(-1px);
}
#action-bar .action-edit { background: #eee4cd; border-color: #d8c6a1; box-shadow: inset 0 1px #fff9eb; }
#action-bar .action-edit-active,
#action-bar .action-edit-active:hover:not(:disabled) {
  background: #d9b56d;
  color: #473817;
  border-color: #b58d42;
  box-shadow: inset 0 1px #f9e1ab, 0 2px 5px #72522618;
}
#game-hub-dock .hub-dock-button {
  background: var(--bistro-enamel);
  border-color: #c8c4a9;
  box-shadow: 0 3px 12px #30452b20, inset 0 1px #fff;
  color: #365c49;
}
#game-hub-dock .hub-dock-button:hover { background: #edf1df; border-color: #a6b796; }
.alert-chip { box-shadow: 0 2px 8px #3a43251c; text-shadow: none; }

/* The existing sheets keep their own flex and overflow contracts. */
#shop-panel, .sheet-panel, .modal {
  border: 1px solid var(--bistro-line);
  box-shadow: var(--bistro-sheet-shadow);
  background: var(--bistro-paper);
}
.shop-header {
  background: linear-gradient(110deg, #f0eddc, #f9f5e9 72%);
  border-bottom: 1px solid var(--bistro-line-soft);
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.shop-title {
  font-family: var(--font-title);
  color: var(--bistro-ink);
  line-height: 1.2;
  letter-spacing: -.015em;
  min-width: 0;
  overflow-wrap: anywhere;
}
.shop-header > .shop-title { flex: 1 1 auto; }
.shop-atmosphere { min-width: 0; max-width: 55%; flex: 0 1 auto; flex-wrap: wrap; overflow-wrap: anywhere; }
.shop-atmosphere > .svg-icon { flex: none; }
.shop-close, .staff-detail-dismiss, .recipe-book-icon {
  background: #fffaf0;
  border: 1px solid #d5c8af;
  color: #66553d;
  box-shadow: 0 1px 3px #4c392908;
}
.shop-close:hover, .staff-detail-dismiss:hover, .recipe-book-icon:hover {
  background: #efe6d3;
  border-color: #b8a581;
}
.shop-tabs { padding-top: 8px; }
.shop-tab {
  background: #f2ebdb;
  border-color: #d9cbb2;
  color: #665b44;
  box-shadow: inset 0 1px #fffaf0;
  font-weight: 800;
  text-shadow: none;
}
.shop-tab:hover { background: #ece3cf; transform: none; }
.shop-tab-active,
#shop-panel .shop-tab-active,
#menu-panel .shop-tab-active,
.hub-panel .shop-tab-active {
  background: linear-gradient(180deg, #f0dcae, #e8c783);
  border-color: #bd994f;
  color: #4c3c1e;
  text-shadow: none;
  box-shadow: inset 0 1px #fff3d3, inset 0 -2px #bc965234, 0 2px 5px #7b5a2812;
}

/* Consistent product photographs and live model presentation. */
.shop-card {
  background: var(--bistro-paper-raised);
  border: 1px solid #ded2ba;
  border-radius: 17px;
  box-shadow: var(--bistro-card-shadow);
}
.shop-card:hover {
  border-color: #9bae8c;
  background: #fffef9;
  box-shadow: 0 4px 14px #354b2920;
  transform: translateY(-2px);
}
.shop-card-preview {
  background: radial-gradient(ellipse at 50% 38%, #fcfaf1 20%, #eee6d5 100%);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px #cabb9d28;
  object-fit: contain;
}
.shop-card-name { color: #3d5142; font-weight: 800; }
.shop-card-meta { color: #6a5634; font-variant-numeric: tabular-nums; }
.shop-card-bonus { background: #e9efde; color: #45643d; }
.shop-card-disabled { opacity: .86; }
.shop-card-disabled .shop-card-preview { filter: saturate(.65); }
.catalog-luxury {
  background: #f6ecd2;
  color: #735325;
  border-color: #d3b574;
  box-shadow: inset 0 1px #fffcf1;
  letter-spacing: .015em;
}
.shop-model-stage, .staff-look-stage, .recipe-book-hero,
.recipe-book-thumbnail, .hub-collection, .street-card-preview {
  background: radial-gradient(ellipse at 50% 32%, #fffdf5 12%, #eee6d5 100%);
  border: 1px solid #dfd3bb;
  box-shadow: inset 0 1px #fffdf7;
}
.recipe-book-thumbnail, .recipe-book-hero { overflow: hidden; }
.object-preview, .hub-item-preview {
  border-radius: 15px;
  background: radial-gradient(ellipse at 50% 35%, #fffdf5, #eee7d8);
}
.recipe-book-preview-state { background: #f3eddf; color: #635d4c; }
.recipe-book-row { border-color: #e3d7c0; }
.recipe-book-row-info h4 { color: #3b5a45; }
.recipe-book-footer, .object-edit-actions { background: #f2ebdc; border-color: #d7c9ae; }

/* Secondary actions share paper; primary actions share garden enamel.
   Provider sign-in buttons deliberately retain their native brand treatment. */
.hub-button, .recipe-book-button, .object-button, .shop-model-control,
.staff-appearance-button, .staff-look-control, .catalog-paint,
.warehouse-buy-button, .warehouse-produce-button {
  border-radius: 12px;
  border-color: #cbbda0;
  box-shadow: inset 0 1px #ffffffb0;
  text-shadow: none;
}
.hub-primary, .recipe-book-primary, .object-button-primary,
.shop-detail-place, .main-menu-btn-primary {
  background: linear-gradient(180deg, #39785b, #2d644b);
  border-color: #24553e;
  color: #fffbef;
  text-shadow: none;
  box-shadow: inset 0 1px #ffffff35, 0 3px 8px #2b523b20;
}
.hub-primary:hover:not(:disabled), .recipe-book-primary:hover:not(:disabled),
.object-button-primary:hover:not(:disabled), .shop-detail-place:hover:not(:disabled),
.main-menu-btn-primary:hover:not(:disabled) { background: #2c6048; }
.hub-button:disabled, .recipe-book-button:disabled, .object-button:disabled,
.shop-detail-place:disabled, .warehouse-produce-button:disabled {
  background: #ebe5d7;
  color: #6e644e;
  border-color: #d6cab3;
  box-shadow: none;
  text-shadow: none;
}
.staff-row, .staff-hire-button, .recipe-card, .seed-chip, .quest-card,
.street-card, .market-card, .coin-pack-row, .gem-pack-card {
  background: var(--bistro-paper-raised);
  box-shadow: var(--bistro-card-shadow);
}
.staff-avatar { box-shadow: inset 0 0 0 1px #d1c1a3, 0 2px 5px #3a4d2e18; }
.energy-bar { background: #e9e6d5; box-shadow: inset 0 1px 2px #35482b20; }
.energy-fill { background: linear-gradient(90deg, #6d966c, #93ad77); box-shadow: none; }
.hub-panel .shop-header { background: #e9eddd; border-color: #ccd5bc; }
.hub-career-hero { background: #e8eedc; border: 1px solid #d1dcbf; }
.hub-event-hero { background: #f1e7ce; border: 1px solid #e1cfaa; }
.hub-road-current .hub-road-number { background: #35694f; box-shadow: inset 0 1px #ffffff33; }
.warehouse-upgrade, .warehouse-production-card, .warehouse-order,
.object-recipe, .object-batch { border-color: #ded3bd; box-shadow: none; }
.catalog-tools input[type=search], .catalog-tools select,
.warehouse-search-label input, .warehouse-filter-fields select,
.recipe-book-search input, .recipe-book-filter-fields select,
.friend-search input, .hub-select, .rename-input {
  background: #fffdf7;
  border-color: #c9bda3;
  border-radius: 12px;
  color: #443f30;
  box-shadow: inset 0 1px 2px #51442a08;
}

/* Opening retains the live world; the loading state uses the same materials. */
#boot-screen {
  background: radial-gradient(ellipse at 50% 34%, #fffaf0 0%, #f1ecd9 48%, #dce7cc 100%);
  color: #355b45;
}
#boot-screen img { filter: drop-shadow(0 8px 16px #3f513020); }
#boot-screen p { letter-spacing: .015em; }
.boot-spoon { background: #48775a; }
.main-menu-btn { border-color: #bcc4aa; box-shadow: 0 2px 7px #34482f12, inset 0 1px #ffffff85; }
#main-menu .main-menu-card h1 { color: var(--bistro-ink); }
.main-menu-loading-track { background: #b9c6aa6b; box-shadow: inset 0 1px 2px #38524020; }
.main-menu-loading-bar { background: linear-gradient(90deg, #b88d45, #d8b369); }
.main-menu-loading-done .main-menu-loading-bar { background: #638966; }
.menu-festival { background: #fff8e6; border-color: #d0bc83; box-shadow: 0 5px 18px #3d442023; }

/* Settings and the daily welcome use the same paper and enamel as the shop. */
.settings-modal h2, .daily-login-modal h2 { color: var(--bistro-ink); }
.settings-modal .settings-lang-section {
  background: #f1edde;
  border: 1px solid var(--bistro-line-soft);
}
.settings-modal .settings-section-label { color: #54604b; }
.settings-modal .settings-language {
  background: var(--bistro-paper-raised);
  border-color: #c5baa3;
  color: var(--bistro-ink);
  border-radius: 12px;
}
.settings-modal .lang-chip,
.settings-modal .modal-button:not(.modal-button-danger),
.daily-login-modal .modal-button {
  color: var(--bistro-ink);
  background: var(--bistro-paper-raised);
  border: 1px solid #cfc3ac;
  border-radius: 12px;
  box-shadow: 0 1px 3px #39482c0b;
  text-shadow: none;
}
.settings-modal .lang-chip:hover,
.settings-modal .modal-button:not(.modal-button-danger):hover,
.daily-login-modal .modal-button:hover { background: #eeeeda; }
.settings-modal .lang-chip-active,
.settings-modal .lang-chip-active:hover,
.settings-modal .modal-button.modal-button-primary,
.daily-login-modal .modal-button-primary {
  background: #326e52;
  border-color: #27593f;
  color: #fffbef;
  box-shadow: 0 2px 6px #2c51321c;
}
.settings-modal .modal-button.modal-button-primary:hover,
.daily-login-modal .modal-button-primary:hover { background: #285d45; }
.settings-modal .lang-chip-active { font-weight: 850; }
.daily-login-modal .modal-button { justify-content: center; }
.daily-login-modal .welcome-message, .daily-login-modal .daily-login-status { color: var(--bistro-muted); }
.daily-login-modal .daily-box {
  background: #f4efdf;
  border: 1px solid #e0d5bd;
  box-shadow: none;
  color: var(--bistro-ink);
}
.daily-login-modal .daily-box-today {
  background: #e8edda;
  border: 2px solid #789064;
  box-shadow: none;
}
.daily-login-modal .daily-day { color: #3d5944; line-height: 1.3; }
.daily-login-modal .modal-button:disabled {
  background: #ebe5d7;
  color: #6e644e;
  border-color: #d6cab3;
  box-shadow: none;
}

/* Empty and feedback copy stays real text; decoration never replaces state. */
.catalog-empty, .shop-storage-empty, .warehouse-empty, .recipe-book-empty,
.leaderboard-empty, .market-empty, .social-empty {
  background: #f1ecdf;
  border: 1px dashed #cbbb9b;
  border-radius: 15px;
  padding: 20px 16px;
  color: #665d48;
  line-height: 1.55;
}
.catalog-empty button { margin-top: 12px; }
.warehouse-notice:not(:empty), .recipe-book-notice:not(:empty) {
  color: #365c42;
  background: #e9efdf;
  border-bottom: 1px solid #d1ddc3;
  padding-top: 9px;
}
.object-notice, .object-reason, .recipe-book-shortage, .recipe-portion-missing {
  color: #8b4834;
}
.sheet-panel, #shop-panel, .modal {
  scrollbar-color: #b9b394 #f3ecde;
  scrollbar-width: thin;
}
:is(.sheet-panel, #shop-panel, .modal) :is(button, input, select, summary, [tabindex]):focus-visible {
  outline: 3px solid #2c614a;
  outline-offset: 3px;
}
:is(.sheet-panel, #shop-panel) .shop-tab:focus-visible {
  outline-offset: -3px;
}
:is(.sheet-panel, #shop-panel, .modal) :is(input, textarea)::selection {
  background: #cdddc1;
  color: #273f2f;
}

@media (min-width: 701px) {
  #action-bar .action-button { min-width: 64px; }
  #action-bar .action-label { font-size: 12px; }
}
@media (max-width: 700px) {
  /* Keep the existing horizontal action tray; do not compress long labels. */
  #action-bar .action-button { min-width: 62px; flex-shrink: 0; }
  #action-bar .action-label { font-size: 11px; }
  .shop-card { border-radius: 15px; }
  .shop-card-preview { border-radius: 11px; }
}
@media (max-width: 560px) {
  /* Four unlocked hiring roles must leave space for the existing team. */
  #staff-panel .staff-hire-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #staff-panel .staff-hire-button { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 7px; padding: 8px; }
  #staff-panel .staff-hire-button .staff-avatar { width: 32px; height: 32px; grid-row: 1 / 3; }
  #staff-panel .staff-hire-label { white-space: normal; overflow-wrap: anywhere; text-align: start; line-height: 1.25; }
  #staff-panel .staff-hire-cost { grid-column: 2; font-size: 12px; }
}
@media (max-width: 360px) {
  .social-panel .friend-search { flex-direction: column; }
  .social-panel .friend-search .hub-button { width: 100%; max-width: none; }
}
@media (max-height: 520px) {
  /* Extra chrome must not consume short landscape content space. */
  .shop-tabs { padding-top: 0; }
  .catalog-empty, .shop-storage-empty, .warehouse-empty, .recipe-book-empty,
  .leaderboard-empty, .market-empty, .social-empty { padding-block: 12px; }
  #staff-panel .staff-hire-row { display: flex; flex-wrap: nowrap; flex: none; overflow-x: auto; padding-bottom: 8px; }
  #staff-panel .staff-hire-button { display: flex; flex: 0 0 168px; min-height: 54px; padding: 6px 8px; }
  #staff-panel .staff-hire-button .staff-avatar { width: 32px; height: 32px; }
  #staff-panel .staff-hire-label { white-space: normal; text-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  #action-bar .action-button, .shop-card, .shop-tab, .main-menu-btn,
  .settings-modal .lang-chip, .settings-modal .modal-button, .daily-login-modal .modal-button { transition: none; }
  #action-bar .action-button:hover:not(:disabled), .shop-card:hover { transform: none; }
}
@media (forced-colors: active) {
  .shop-tab-active, #shop-panel .shop-tab-active, #menu-panel .shop-tab-active,
  .hub-panel .shop-tab-active, #action-bar .action-edit-active {
    outline: 2px solid Highlight;
    outline-offset: -3px;
  }
  .shop-card, .shop-model-stage, .staff-look-stage, .recipe-book-hero,
  .recipe-book-thumbnail { border-color: CanvasText; }
}