/* One canvas keeps company, page and shop side by side at every window width. */
:root { --cc-store-max-width: 420px; }
html, body { height: 100%; overflow: hidden; scrollbar-gutter: auto; }
.workspace { width: 100%; height: 100dvh; margin: 0; padding: 0; overflow: hidden; }
#main { container: game-shell / inline-size; width: 100%; min-width: 0; max-width: none; height: 100%; margin: 0; padding: 0; overflow: hidden; }
#main .cc-overview {
  position: relative; display: grid; height: 100%; min-height: 0; gap: 0;
  grid-template-columns: minmax(265px, .9fr) minmax(420px, 1.3fr) clamp(325px, 28%, var(--cc-store-max-width));
  grid-template-rows: minmax(0, 1fr); grid-template-areas: 'landmark feed store';
  align-items: stretch; overflow: hidden;
}
#main .cc-overview > :is(.cc-landmark, .cc-feed, .cc-store) {
  position: relative; top: auto; align-self: stretch; height: 100%; min-height: 0; max-height: none;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; scrollbar-width: none;
}
#main .cc-overview > :is(.cc-landmark, .cc-feed, .cc-store)::-webkit-scrollbar { display: none; }
#main .cc-overview > .cc-landmark { padding: 28px 20px var(--cc-dock-clearance); }
#main .cc-overview > .cc-feed { display: flex; padding: 0; gap: 0; border: 0; border-inline: 8px solid var(--cc-wood); }
#main .cc-overview > .cc-store { width: 100%; max-width: var(--cc-store-max-width); padding: 0; border: 0; }
.cc-feed > * { flex-shrink: 0; }
.cc-feed .management-grid, .cc-feed .research-grid, .cc-feed .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cc-management-nav .nav-full { display: inline; }
.cc-lane-world { grid-template-columns: 96px minmax(0, 1fr) 110px; padding-inline: 14px; }
.cc-scrollbars { display: block; }

.icon-single { background-size: contain; background-position: center; }

/* Raised wood rails share a bevel, quiet grain and shaded frame joints. */
:root { --cc-page-divider-width: 8px; --cc-page-divider-color: var(--cc-wood); }
#main .cc-overview > .cc-feed { border-inline: var(--cc-page-divider-width) solid var(--cc-page-divider-color); }
.cc-workspace-menu { padding: 0; gap: 0; }
.cc-workspace-menu .cc-middle-tabs { padding: 0; border-bottom: 0; }
.cc-feed > .content-production { padding: 0; margin: 0; }
.cc-feed .cc-production-board { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.cc-feed .cc-production-lane {
  display: grid; grid-template-rows: 32px minmax(0, 1fr);
  height: 180px; min-height: 180px; max-height: 180px;
  border: 0; border-radius: 0; box-shadow: none;
}
.cc-feed .cc-production-lane:not(:last-child) { margin-bottom: var(--cc-page-divider-width); }
.cc-feed .cc-lane-world { height: 100%; min-height: 0; }
.cc-workspace-menu::after,
.cc-store-heading::after,
.cc-store .cc-upgrade-shelf::after,
.cc-feed .cc-production-lane:not(:last-child)::after,
.cc-feed .cc-production-board::after {
  content: '';
  display: block;
  height: var(--cc-page-divider-width);
  flex: 0 0 var(--cc-page-divider-width);
  margin-inline: 0;
  background:
    linear-gradient(90deg, #46322066, #46322000 28px, #46322000 calc(100% - 28px), #46322066),
    repeating-linear-gradient(2deg, #fff9dc00 0 5px, #fff9dc12 5px 6px, #533c2300 6px 12px, #533c2314 12px 13px),
    linear-gradient(180deg, #e5d0a66b, #b4997126 35%, #8a6d4826 70%, #644c3566),
    var(--cc-page-divider-color);
  box-shadow: inset 0 1px 0 #fff0c999, inset 0 -1px 0 #513b2873, 0 2px 3px #3e302226;
  pointer-events: none;
}
.cc-workspace-menu::after { margin-top: 0; }
.cc-feed .cc-production-lane:not(:last-child)::after { position: absolute; inset: auto 0 calc(-1 * var(--cc-page-divider-width)); }
.cc-store-heading::after { margin: 0; }
.cc-store .cc-upgrade-shelf::after { margin: 0; }
.cc-store-heading { margin: 0; padding: 0; }
.cc-store-heading h2 { margin: 0; padding: 0; color: #304b37; text-align: center; font-size: 20px; letter-spacing: .06em; }
.cc-store .cc-upgrade-shelf { padding: 0; margin: 0; border-bottom: 0; }
.cc-store .cc-upgrade-grid { gap: 0; padding: 0; }
.cc-store .cc-upgrade-tile { border-radius: 0; }
.cc-store .cc-buy-modes { margin: 0; padding: 0; }
.cc-store .production-section { padding: 0; }
.cc-store .production-section .business-grid { gap: 0; margin: 0; padding: 0; border-radius: 0; }
.cc-store .production-section .business-card { border-radius: 0; }
.cc-store .production-section .business-purchase {
  grid-template-columns: 62px minmax(0, 1fr) 62px;
  grid-template-areas: 'art name owned' 'art price owned' 'art quantity owned';
  min-height: 86px;
  row-gap: 0;
  border-radius: 0;
  box-shadow: inset 0 1px 0 #fffdf580, inset 0 -1px 0 #8a80563b;
}
.cc-store .production-section .business-name { align-self: end; font-size: 17px; }
.cc-store .production-section .business-cost { text-align: left; font-size: 13px; }
.cc-store .production-section .business-quantity { font-size: 10px; }
.cc-store .production-section .business-owned strong { font-size: 32px; color: #627653; }
.cc-store .production-section .business-purchase:disabled .business-owned strong { color: #939985; }