/* The catalog and sheets share the forest frame used by the game controls. */
.sidebar {
  color:var(--game-cream);
  background:var(--game-panel);
  border-left:2px solid var(--game-panel-edge);
  scrollbar-color:#789283 var(--game-panel);
}
body > main > .sidebar :is(.places-heading h2,#presence-title,.section-label,.activity li strong) { color:var(--game-cream); }
body > main > .sidebar :is(.recent-places-intro,.recent-places-message,.recent-places-updated,.recent-place-copy span,.recent-place-copy small,.activity li,.activity li small,.activity li.empty-history,.section-label > span:not(.live-dot)) { color:#c4d1be; }
body > main > .sidebar :is(#recent-places-open,.recent-place,.activity .history-location) { color:var(--game-cream); }
body > main > .sidebar :is(.recent-place,#presence-panel,.activity > summary,footer) { border-color:#476555; }
body > main > .sidebar #presence-panel :is(.presence-count,.player,#share-status) { color:#dce4d2; }
body > main > .sidebar #presence-panel .player { border-bottom-color:#365949; }
body > main > .sidebar #presence-panel .player-self { background:#355b45; color:var(--game-cream); }
body > main > .sidebar #presence-panel[data-connected="true"] .live-dot { background:#a0cf7a; }
body > main > .sidebar footer, body > main > .sidebar footer span:first-child { color:#bccdba; }
body > main > .sidebar .activity li::before { background:#8da486; }
body > main > .sidebar .activity li:not(:last-child)::after { background:#476555; }
body > main > .sidebar :is(button,a,summary):focus-visible { outline-color:#f6ad79; }

.inventory-panel {
  border:2px solid var(--game-panel-edge);
  border-radius:12px;
  color:var(--game-ink);
  background:var(--game-cream);
  box-shadow:0 3px 0 #102d2466;
}
.inventory-heading h2 { color:var(--game-ink); }
#inventory-search {
  border:2px solid #59745d;
  background:#fffdf5;
  color:var(--game-ink);
  box-shadow:inset 0 2px 0 #163b2e0a;
}
#inventory-search::placeholder { color:var(--game-muted); }
#inventory-search-clear { color:var(--game-muted); }
.inventory-filters { background:#e8e4cd; border-radius:7px; }
.inventory-filters button { color:#4d6150; }
.inventory-filters button[aria-pressed="true"] {
  color:#763717;
  background:#f8ddc7;
  box-shadow:inset 0 0 0 1px #b25e32;
  font-weight:700;
}
.inventory-types button { color:#4d6150; }
.inventory-types button[aria-pressed="true"] { color:#85421f; border-bottom-color:#b25e32; font-weight:700; }
.inventory-types button:hover { background:#efe4cb; }
.material-grid { scrollbar-color:#90a084 transparent; }
.material-choice, .material-color-choice {
  border:2px solid #81917a;
  background:linear-gradient(#fffdf4,#f1e9d3);
  color:var(--game-ink);
  box-shadow:inset 0 -2px 0 #163b2e14;
}
.material-choice:hover, .material-color-choice:hover { background:#fffdf4; border-color:#476647; }
.material-choice[aria-pressed="true"], .material-color-choice[aria-pressed="true"] {
  border-color:#a65129;
  background:#f8ddc7;
  color:#763717;
  box-shadow:inset 0 0 0 1px #a65129,inset 0 -2px 0 #a651291f;
}
.material-choice[aria-pressed="true"]::after, .material-color-choice[aria-pressed="true"]::after { color:#763717; font-weight:700; }
.material-colors { background:#e9e5ce; border-color:#8d9b82; }
.material-colors-back { background:#e9e5ce; color:var(--game-ink); }
.material-colors-heading { color:var(--game-ink); }
#material-color-selected, #inventory-selected, #inventory-results:not(.sr-only), .inventory-note, .inventory-empty { color:var(--game-muted); }
.inventory-selection { border-top-color:#c8c6af; }
.material-favorite { color:#526a56; }
.material-favorite[aria-pressed="true"] { color:#a4522a; }
.material-favorite[aria-pressed="true"] svg { fill:#e7a16d; }
.material-favorite:hover { background:#eee4ce; }
.material-find { color:#365b40; }
#inventory-search-reset { color:var(--game-ink); background:#e8e4cd; border:1px solid #71856b; }

/* A compact, named inventory. Columns follow the panel's usable width, so
   desktop sidebars and mobile sheets keep the same minimum slot width. */
body > main > .sidebar { padding:14px 8px; gap:16px; scrollbar-width:thin; }
#inventory-panel {
  container:inventory / inline-size;
  --inventory-columns:4;
  padding:10px 8px;
  background:var(--game-panel); color:var(--game-cream);
  border-color:#476d58; border-radius:14px;
}
#inventory-panel .inventory-heading h2 { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
#inventory-panel .inventory-navigation { display:block; margin:0; }
#inventory-panel .inventory-toolbar {
  display:flex; align-items:center; gap:6px; padding:6px; margin:0 0 8px;
  border-radius:10px; background:var(--game-cream); box-shadow:0 3px 0 var(--game-panel-edge);
}
#inventory-panel .inventory-search-row { flex:1; min-width:0; margin:0; }
#inventory-panel #inventory-search { min-height:44px; padding:8px 28px 8px 30px; font-size:14px; border-color:#89967d; }
#inventory-panel #inventory-search-clear { width:28px; }
.inventory-search-icon { --game-icon:url('/icons/phosphor/magnifying-glass-bold.svg'); position:absolute; left:8px; width:17px; height:17px; color:var(--game-ink); }
.inventory-recent-icon { --game-icon:url('/icons/phosphor/clock-counter-clockwise-bold.svg'); }
.inventory-favorites-icon { --game-icon:url('/icons/phosphor/star-bold.svg'); }
#inventory-panel .inventory-filters { flex:none; gap:4px; padding:0; margin:0; background:none; }
#inventory-panel .inventory-filters button {
  display:grid; place-items:center; flex:none; width:44px; min-width:44px; height:44px; padding:0;
  color:var(--game-ink); background:var(--game-cream); border:1px solid #b6b99d;
  border-radius:9px; box-shadow:inset 0 -3px 0 var(--game-cream-shade),0 1px 0 #879277;
}
#inventory-panel .inventory-filters .game-icon { width:24px; height:24px; }
#inventory-panel .inventory-filters button[aria-pressed="true"] {
  background:#f8d9b5; border-color:#a65129; color:#793b20; box-shadow:inset 0 2px 0 #a6512940;
}
#inventory-panel .inventory-types {
  display:flex; gap:2px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin;
  margin:0 0 10px; padding:2px; border:1px solid #476d58; border-radius:9px;
}
#inventory-panel .inventory-types button {
  flex:1 0 auto; min-width:0; min-height:44px; padding:6px 4px;
  border:1px solid transparent; border-radius:7px; background:transparent;
  color:#d9e3ce; box-shadow:none; font-size:12px; white-space:nowrap;
}
#inventory-panel .inventory-types button:hover { background:#315743; }
#inventory-panel .inventory-types button[aria-pressed="true"] { color:#85421f; background:var(--game-cream); border-color:#d8c48c; box-shadow:inset 0 -3px 0 var(--game-cream-shade); }
#inventory-panel .inventory-filters button:active, #inventory-panel .inventory-types button:active { transform:translateY(1px); }
#inventory-panel :is(.inventory-types button,.material-choice,.material-color-choice,.material-favorite,.material-find):focus-visible { outline:3px solid #f6ad79; outline-offset:2px; }
#inventory-panel :is(#inventory-search,.inventory-filters button,#inventory-search-clear):focus-visible { outline:3px solid #875026; outline-offset:2px; }
#inventory-panel #material-grid:not([data-color-view="true"]) {
  grid-template-columns:repeat(var(--inventory-columns),minmax(0,1fr));
  grid-auto-rows:94px; gap:6px; min-height:0;
  max-height:394px; padding:3px; margin:-3px;
}
#inventory-panel .material-choice {
  height:94px; min-height:94px; gap:3px; justify-content:center;
  padding:5px 2px 4px; border:2px solid #c9c8a7; border-radius:9px;
  background:var(--game-cream); color:var(--game-ink);
  box-shadow:inset 0 1px 0 #fffdf5,inset 0 -3px 0 #e7dbb6,0 2px 0 var(--game-panel-edge);
}
#inventory-panel .material-choice .material-preview { width:min(54px,100%); height:auto; aspect-ratio:6/5; }
#inventory-panel .material-choice .material-name {
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  width:100%; height:2.6em; min-height:2.6em; padding:0;
  overflow:hidden; white-space:normal; overflow-wrap:anywhere; word-break:keep-all;
  font-size:12px; line-height:1.3; letter-spacing:0;
}
#inventory-panel .material-choice:hover { border-color:#e1c173; background:#fffef7; }
#inventory-panel .material-color-choice { border:2px solid #c9c8a7; border-radius:8px; background:var(--game-cream); }
#inventory-panel .material-color-choice:hover { border-color:#5a7758; background:#fffef7; }
#inventory-panel .material-color-choice[aria-pressed="true"] { border-color:#a65129; background:#fff4e4; box-shadow:inset 0 0 0 1px #a65129; }
#inventory-panel .material-choice[aria-pressed="true"] {
  border-color:#e58a2c; background:#fff4e4;
  box-shadow:inset 0 0 0 1px #f5bf6c,inset 0 -3px 0 #eeb568,0 2px 0 var(--game-panel-edge);
}
#inventory-panel .material-choice[aria-pressed="true"]::before {
  content:""; position:absolute; top:3px; right:3px; width:15px; height:15px;
  border-radius:50%; background:#a65129;
}
#inventory-panel .material-choice[aria-pressed="true"]::after {
  content:""; display:block; top:5px; right:5px; left:auto; width:11px; height:11px;
  border-radius:0; background:#fffdf4; mask:url('/icons/phosphor/check-bold.svg') center/contain no-repeat;
}
#inventory-panel .material-variants {
  top:3px; right:3px; padding:0 2px; border-radius:3px;
  background:#e9eddc; color:#415b43; font:500 9px/13px var(--font-ui);
}
#inventory-panel .material-choice[aria-pressed="true"] .material-variants { right:auto; left:3px; }
#inventory-panel .inventory-selection {
  display:grid; grid-template-columns:44px minmax(0,1fr) 36px;
  align-items:center; gap:4px 7px; margin:10px 0 0; padding:8px 0 0;
  border-top-color:#476d58;
}
#inventory-selected-preview { display:block; width:44px; height:37px; grid-row:1; }
.inventory-selected-copy { min-width:0; display:flex; flex-direction:column; gap:3px; grid-column:2; grid-row:1; }
#inventory-panel #inventory-selected {
  color:var(--game-cream); font-size:13px; font-weight:700; line-height:1.4;
  overflow-wrap:anywhere; word-break:keep-all;
}
#inventory-selected-category { color:#c4d1be; font-size:11px; line-height:1.3; }
#inventory-panel :is(#inventory-results:not(.sr-only),.inventory-note,.inventory-empty,.material-find,.material-favorite) { color:#d9e3ce; }
#inventory-panel .material-favorite:hover { background:#315743; }
#inventory-panel .material-favorite[aria-pressed="true"] { color:#f6ad79; }
#inventory-panel .material-colors .material-favorite { color:var(--game-ink); }
#inventory-panel #material-favorite { grid-column:3; grid-row:1; width:36px; min-width:36px; height:36px; min-height:36px; }
#inventory-panel #material-find { grid-column:2 / -1; justify-self:start; min-height:32px; padding:4px 0; margin:0; }
#inventory-panel .inventory-note { margin:6px 0 0; font-size:11px; line-height:1.5; }

@container inventory (max-width:255px) {
  #inventory-panel .inventory-search-icon { display:none; }
  #inventory-panel #inventory-search { padding-left:7px; }
}

/* Close sits beside search instead of using a separate title row. Color view
   reserves the same corner for it beside the existing back control. */
#inventory-dialog .inventory-panel {
  display:flex; flex-direction:column; padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  height:min(700px,calc(var(--mobile-viewport-height,100dvh) - 20px));
  max-height:min(700px,calc(var(--mobile-viewport-height,100dvh) - 20px));
}
#inventory-dialog .inventory-heading {
  position:absolute; z-index:3; top:10px; right:10px;
  width:44px; height:44px; min-height:44px; margin:0;
}
#inventory-dialog #inventory-close { display:block; width:44px; height:44px; }
#inventory-dialog #inventory-panel .inventory-toolbar { margin-right:50px; }
#inventory-dialog #inventory-panel #inventory-search { font-size:16px; }
#inventory-dialog #inventory-panel .inventory-filters button,
#inventory-dialog #inventory-panel .inventory-types button { min-height:44px; }
#inventory-dialog #inventory-panel #material-grid:not([data-color-view="true"]) { flex:1 1 auto; max-height:none; }
#inventory-dialog #inventory-panel #material-grid:not([data-color-view="true"]):not(:has(.material-choice:not([hidden]))) { display:none; }
#inventory-dialog #inventory-panel .inventory-empty:not([hidden]) { flex:1 1 auto; display:grid; align-content:center; justify-items:center; }
#inventory-dialog #inventory-panel .inventory-selection { flex-shrink:0; grid-template-columns:48px minmax(0,1fr) 44px; }
#inventory-dialog #inventory-selected-preview { width:48px; height:40px; }
#inventory-dialog #inventory-panel #material-favorite { width:44px; min-width:44px; height:44px; min-height:44px; }
#inventory-dialog #inventory-panel #material-find { min-height:44px; }
#inventory-dialog #inventory-panel .material-colors-back { width:calc(100% - 48px); padding-right:4px; }
#inventory-dialog #inventory-panel .material-colors { padding-top:0; }
#inventory-dialog #inventory-panel[data-color-view="true"] { height:auto; }
#inventory-dialog #inventory-panel .material-grid[data-color-view="true"] { flex:1 1 auto; min-height:0; grid-auto-rows:auto; max-height:none; }
@media (max-width:359px) {
  #inventory-dialog #inventory-panel #material-grid:not([data-color-view="true"]) { --inventory-columns:4; }
}
@media (max-height:450px) and (orientation:landscape) {
  #inventory-dialog .inventory-panel { padding-top:8px; padding-bottom:calc(8px + env(safe-area-inset-bottom)); }
  #inventory-dialog .inventory-heading { top:8px; }
  #inventory-dialog #inventory-panel .inventory-navigation { display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,1fr); gap:4px 8px; padding-right:50px; }
  #inventory-dialog #inventory-panel .inventory-toolbar { margin:0; }
  #inventory-dialog #inventory-panel .inventory-search-row { margin:0; }
  #inventory-dialog #inventory-panel .inventory-filters { margin:0; }
  #inventory-dialog #inventory-panel .inventory-types { grid-column:auto; margin:0; align-self:center; }
  #inventory-dialog #inventory-panel #material-grid:not([data-color-view="true"]) { --inventory-columns:6; }
  #inventory-dialog #inventory-panel .inventory-note { display:none; }
}

/* Bright, legible sheets keep the same dark outline as the main controls. */
dialog {
  color:var(--game-ink);
  background:var(--game-cream);
  border:2px solid var(--game-panel-edge);
  box-shadow:0 4px 0 #102d24b3,0 18px 48px #102d243d;
}
dialog::backdrop, #inventory-dialog::backdrop { background:#102d2473; backdrop-filter:none; }
dialog h2, dialog h3, dialog label, dialog .help-details summary { color:var(--game-ink); }
dialog .eyebrow { color:#7b4828; }
dialog p, dialog .help-note, dialog li span, .settings-section small { color:#52644f; }
dialog .help-note { background:#ece7d1; }
dialog li::before { background:#dfe6cf; color:#36533a; }
dialog :is(.settings-section,.settings-links,.help-details,.region-overview-actions,.marker-entry) { border-color:#c7c9ae; }
dialog :is(.dialog-close,#settings-close,#region-overview-close), #inventory-close, #mobile-menu-close {
  border:2px solid #476647;
  color:var(--game-ink);
  background:var(--game-cream);
  box-shadow:inset 0 -2px 0 #163b2e14;
}
dialog :is(.secondary-button,#profile-settings,#settings-account,#region-preview-retry,.recent-places-retry),
#settings-dialog :is(#profile-settings,#settings-account,#analytics-settings),
#mobile-menu-tools .utility-control, #mobile-menu-tools #header-profile, #mobile-menu-tools #help-open,
#menu-blocks, #presence-panel #share {
  border:2px solid #476647;
  color:var(--game-ink);
  background:linear-gradient(#fffdf4,#f1e9d3);
  box-shadow:inset 0 -2px 0 #163b2e14;
  font-weight:600;
}
#presence-panel #share:hover { background:#fffdf4; }
dialog .primary-button, #account-dialog #account-browse.primary-button, #region-overview-dialog #random-region {
  border:2px solid #763d25;
  color:#fffdf4;
  background:#a84f29;
  box-shadow:inset 0 -2px 0 #572a1c40;
  font-weight:700;
}
dialog .primary-button:hover, #account-dialog #account-browse.primary-button:hover, #region-overview-dialog #random-region:hover { background:#944322; }
dialog :is(.secondary-button,.primary-button,#profile-settings,#settings-account,#analytics-settings):active:not(:disabled) { box-shadow:inset 0 2px 0 #163b2e1f; }
dialog :is(button,a,input,select,textarea,summary):focus-visible, #settings-dialog #analytics-settings:focus-visible { outline:3px solid #a64e28; outline-offset:2px; }
dialog :is(input[type="text"],input[type="search"],textarea,select),
#settings-dialog .language-select, #profile-nickname, #profile-intro, #address-value, #request-text {
  border:2px solid #71856b;
  color:var(--game-ink);
  background:#fffdf5;
  box-shadow:inset 0 2px 0 #163b2e0a;
}
dialog :is(input,textarea)::placeholder { color:var(--game-muted); }
dialog .profile-form-actions { background:var(--game-cream); }
#profile-avatar-options > button, .region-overview-cell {
  border:2px solid #81917a;
  color:var(--game-ink);
  background:linear-gradient(#fffdf4,#f1e9d3);
  box-shadow:inset 0 -2px 0 #163b2e14;
}
.region-overview-cell:hover { background:#fffdf4; border-color:#476647; }
.region-overview-cell[aria-current="location"] { border-color:#315b3e; background:#dde8d1; color:var(--game-ink); }
#profile-avatar-options > button[aria-pressed="true"] {
  background:#f8ddc7;
  color:#763717;
  border-color:#a65129;
  box-shadow:inset 0 0 0 1px #a65129;
}
#account-dialog .account-energy { color:var(--game-ink); background:#f8d775; border:2px solid #896623; }
#account-dialog .account-energy span { color:#605128; }

.mobile-menu-heading, #settings-dialog .settings-heading {
  color:var(--game-cream);
  background:var(--game-panel);
  border-bottom:2px solid var(--game-panel-edge);
}
.mobile-menu-heading h2, #settings-dialog .settings-heading h2 { color:var(--game-cream); }
#settings-dialog .settings-heading { margin:-24px -24px 0; padding:16px 24px; }
#settings-dialog .settings-heading .eyebrow { color:#c7d4ba; }
#mobile-menu-scroll { background:var(--game-cream); }
#mobile-menu-tools { border-bottom-color:#c7c9ae; }
#mobile-menu-tools #connection { color:var(--game-muted); }
#mobile-menu .sidebar { background:transparent; color:var(--game-ink); }
#mobile-menu .sidebar #presence-panel { border-top-color:#c7c9ae; }
#inventory-dialog { border:2px solid var(--game-panel-edge); }
#inventory-dialog .inventory-panel { background:var(--game-panel); box-shadow:none; }

@media (prefers-contrast:more) {
  .material-choice, .material-color-choice, #profile-avatar-options > button, .region-overview-cell { border-color:var(--game-ink); }
  body > main > .sidebar :is(.recent-places-message,.recent-place-copy span,.recent-place-copy small,.activity li,.activity li small) { color:var(--game-cream); }
}
/* Primary tools keep corner keycaps; text actions use an inline key. */
button[data-shortcut-hint], body #selection-panel button[data-shortcut-hint] { position:relative; }
body button[data-shortcut-hint] > .shortcut-key,
body #selection-panel .tool > .shortcut-key {
  position:absolute; inset:3px 3px auto auto; display:grid; place-items:center;
  min-width:15px; height:15px; margin:0; padding:0 3px;
  border:1px solid #b6bea3; border-radius:4px; background:#fffcef;
  color:#52634a; box-shadow:0 1px 0 #c9cbb4;
  font:600 9px/1 ui-monospace,Consolas,monospace; letter-spacing:0;
  pointer-events:none; user-select:none;
}
@media (min-width:761px) and (hover:hover) and (pointer:fine) {
  html:not([data-mobile-shell="true"]) #selection-panel #material-pick { gap:6px; padding:6px 9px; }
  html:not([data-mobile-shell="true"]) #selection-panel #material-pick > .shortcut-key { position:static; flex:none; }
  html:not([data-mobile-shell="true"]) #selection-panel .tool[aria-pressed="true"]::after { top:auto; bottom:5px; right:5px; }
  #selection-panel .tool[aria-pressed="true"] > .shortcut-key {
    background:#fff0d7; border-color:#be8f60; color:#75431f; box-shadow:0 1px 0 #d7a36d;
  }
}
@media (max-width:760px), (hover:none), (pointer:coarse) {
  body button[data-shortcut-hint] > .shortcut-key,
  body #selection-panel .tool > .shortcut-key { display:none; }
}
html[data-mobile-shell="true"] button[data-shortcut-hint] > .shortcut-key,
html[data-mobile-shell="true"] #selection-panel .tool > .shortcut-key { display:none; }
.header-actions .utility-control[data-shortcut-tooltip]:is(:hover,:focus-visible) .utility-label { display:none; }
.shortcut-tooltip {
  position:fixed; z-index:100; width:max-content; max-width:calc(100vw - 16px); box-sizing:border-box;
  margin:0; padding:7px 10px; border:1px solid #69816c; border-radius:7px;
  background:#173b2e; color:#fff9e8; box-shadow:0 3px 8px #102d2433;
  font:500 12px/1.5 var(--font-ui); white-space:normal; overflow-wrap:anywhere; pointer-events:auto;
}
.shortcut-tooltip[hidden] { display:none; }
@media (max-width:760px), (hover:none), (pointer:coarse) { .shortcut-tooltip { display:none; } }
html[data-mobile-shell="true"] .shortcut-tooltip { display:none; }