/* Shared game controls, panels and woodland menu theme. */

:root {
  font-family: ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color: #f5f1df;
  font-size: 14px;
  color-scheme: dark;
  --cream: #f2ecd8;
  --ink: #283d36;
  --sage: #c8d0aa;
  --glass: rgba(26,44,40,.7);
  --gold: #f5cc70;
  --button-shadow: #846034;
  --panel: #294b3d;
  --panel-edge: #68835a;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow: hidden;
  background: #263e3e;
}

button,input,select {
  font: inherit;
}

button {
  cursor: pointer;
  transition: background .15s,transform .15s,box-shadow .15s;
}

button:focus-visible,input:focus-visible,select:focus-visible {
  outline: 2px solid #f5d99a;
  outline-offset: 4px;
}

button:disabled {
  cursor: default;
  opacity: .4;
}

button:not(:disabled):active {
  transform: translateY(1px);
}

.hidden {
  display: none!important;
}

#world {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
}

#vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center,transparent 40%,rgba(15,29,32,.2));
  z-index: 1;
}

#damage-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 150px 50px #a63f35;
  opacity: 0;
  z-index: 5;
  transition: opacity .15s;
}

#underwater {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 12%, rgba(35,139,187,.08), rgba(3,35,78,.36));
  box-shadow: inset 0 0 18vmin 4vmin rgba(0,15,42,.5);
  overflow: hidden;
  pointer-events: none;
  display: none;
  z-index: 1;
}
#underwater::before, #underwater::after {
  content: '';
  position: absolute;
  inset: -12%;
  opacity: .18;
  background: repeating-linear-gradient(112deg, transparent 0 12%, rgba(100,201,233,.12) 14%, transparent 19% 29%);
  animation: underwater-sway 9s ease-in-out infinite alternate;
}
#underwater::after {
  opacity: .22;
  background: radial-gradient(circle at 22% 75%, #a4d9ed 0 1px, transparent 2px), radial-gradient(circle at 68% 45%, #a4d9ed 0 1px, transparent 2px), radial-gradient(circle at 82% 85%, #a4d9ed 0 1px, transparent 2px);
  background-size: 41% 47%;
  animation: underwater-drift 14s linear infinite;
}
@keyframes underwater-sway { to { transform: translateX(5%) skewX(3deg); opacity: .28; } }
@keyframes underwater-drift { to { transform: translate(2%, -18%); } }
@media (prefers-reduced-motion: reduce) { #underwater::before, #underwater::after { animation: none; } }

.brand {
  position: fixed;
  left: 32px;
  top: 8px;
  z-index: 3;
  width: clamp(260px, 28vw, 420px);
  pointer-events: none;
}
.brand-wordmark { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 8px #0d241a99); }
.brand small { display: block; margin: -8px 0 0 22%; color: #e9ddae; font-size: 9px; font-weight: 750; letter-spacing: 2.8px; text-shadow: 0 2px 5px #10281f; }

.world-label {
  position: fixed;
  right: 36px;
  top: 37px;
  font-size: 10px;
  letter-spacing: 1px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 100%;
  background: #c9df8b;
  box-shadow: 0 0 8px #c5d7a244;
}

.label-divider {
  opacity: .4;
  margin: 0 5px;
}

.eyebrow {
  font-size: 9px;
  letter-spacing: 2.4px;
  font-weight: 600;
  color: #d1d6b6;
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg,#15352b72,transparent 60%),linear-gradient(0deg,#15352b88,transparent 45%);
  display: grid;
  grid-template-columns: minmax(320px,480px) minmax(260px,310px);
  justify-content: space-between;
  align-items: center;
  column-gap: 60px;
  row-gap: 30px;
  padding: 116px 7% 68px;
  overflow: auto;
}

.menu-copy {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  max-width: 480px;
  width: 100%;
  padding: 30px;
  border: 2px solid #94a97699;
  border-radius: 26px;
  background: linear-gradient(145deg,#315643f5,#203d32f5);
  box-shadow: 0 8px 0 #142f27,0 18px 50px #102d2977,inset 0 2px 0 #d5e2b33b;
}

.menu h1 {
  font-family: ui-rounded,"Trebuchet MS",system-ui,sans-serif;
  font-size: clamp(36px,3.8vw,57px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -2px;
  margin: 20px 0 16px;
  color: #f8f2dd;
  text-shadow: 0 3px 0 #152f27;
}

.menu h1 em {
  color: #f3ce79;
  font-weight: 900;
  font-style: normal;
}

.menu-copy>p {
  line-height: 1.6;
  color: #e1e7cb;
  font-size: 14px;
  margin-bottom: 31px;
  margin: 0 0 22px;
}

.primary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
  background: linear-gradient(#ffe395,#eebc5f);
  color: #3e3927;
  border: 2px solid #ffeab1;
  border-radius: 15px;
  padding: 18px 22px;
  font-weight: 900;
  min-width: 0;
  text-align: left;
  box-shadow: 0 6px 0 #90652f,0 9px 17px #102b2644,inset 0 2px 0 #fff4d2;
  width: 100%;
  font-size: 21px;
  text-shadow: 0 1px 0 #fff0bb;
}

.primary:hover {
  background: linear-gradient(#ffeeb8,#ffd278);
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #90652f,0 12px 20px #102b2644;
}

.primary span {
  font-size: 20px;
  line-height: 16px;
}

.menu-actions {
  display: grid;
  align-items: stretch;
  gap: 12px;
  margin-top: 18px;
  color: #d7ddc87f;
  grid-template-columns: 1fr 1fr;
}

.text-button {
  border: 0;
  background: none;
  padding: 0;
  color: #e8e8d4bd;
  font-size: 11px;
}

.text-button:hover {
  color: white;
}

.save-note {
  font-size: 11px;
  color: #d6e2be;
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.field-note {
  position: relative;
  right: auto;
  bottom: auto;
  width: 100%;
  padding: 24px;
  border-top: 1px solid #e2e6d455;
  text-shadow: none;
  max-height: none;
  overflow: visible;
  background: linear-gradient(145deg,#365543f5,#244535f5);
  border: 2px solid #8eaa7499;
  border-radius: 23px;
  backdrop-filter: blur(10px);
  align-self: center;
  box-shadow: 0 6px 0 #142f27,0 16px 35px #102b2955,inset 0 2px 0 #e1ebc033;
}

.field-note h2 {
  font: 800 23px ui-rounded,"Trebuchet MS",system-ui,sans-serif;
  margin: 18px 0 12px;
  color: #fff0c8;
}

.field-note p {
  font-size: 13px;
  color: #e4e8cb;
  line-height: 1.7;
}

.note-line {
  width: 100%;
  height: 2px;
  background: #afc18344;
  margin: 22px 0;
}

.note-foot {
  font-size: 8px;
  letter-spacing: 1.5px;
  opacity: .7;
}

.menu-footer {
  position: absolute;
  bottom: 22px;
  left: 38px;
  right: 38px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: .3px;
  color: #eff2d4;
  font-weight: 600;
}

.menu-footer i {
  font-style: normal;
  padding: 0 12px;
  opacity: .5;
}

kbd {
  font-family: inherit;
  font-size: 10px;
  padding: 3px 5px;
  border: 1px solid #e0e6cd33;
  border-radius: 5px;
  white-space: nowrap;
  background: #182f2766;
  box-shadow: 0 2px 0 #182f2744;
}

.loading {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #263d37;
}

.loading h1 {
  font: italic 36px Georgia,serif;
}

.loading p {
  font-size: 11px;
  color: #acbca7;
}

.loading-track {
  width: 240px;
  height: 3px;
  background: #ffffff15;
  border-radius: 5px;
  overflow: hidden;
}

.loading-track i {
  height: 100%;
  display: block;
  width: 0;
  background: #d3d9a4;
}

.day-card {
  position: absolute;
  top: 94px;
  right: 32px;
  background: var(--glass);
  border: 1px solid #f5f0d51a;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  backdrop-filter: blur(10px);
  min-width: 164px;
}

.day-card>span {
  font-size: 23px;
  color: #e9c980;
}

.day-card strong {
  font-size: 11px;
  display: block;
}

.day-card div>span {
  font-size: 10px;
  opacity: .6;
  margin-top: 3px;
  display: block;
}

.day-arc {
  margin-left: 8px;
  overflow: hidden;
  height: 25px;
  width: 28px;
  border: 1px solid #efdfaf55;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  position: relative;
}

.day-arc i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background: #e6dca4;
  top: 7px;
  left: 10px;
}

.objective-card {
  position: absolute;
  top: 104px;
  left: 38px;
  padding-left: 15px;
  border-left: 2px solid #d3d6ae88;
  max-width: 280px;
  text-shadow: 0 2px 9px #1a302c;
}

.objective-card .eyebrow {
  font-size: 8px;
  letter-spacing: 1.7px;
}

.objective-card div {
  font-size: 14px;
  margin: 9px 0 5px;
}

.objective-card small {
  font-size: 10px;
  opacity: .75;
}

#hud {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

#crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%,-50%);
  filter: drop-shadow(0 1px 2px #172321);
}

#crosshair i {
  position: absolute;
  background: #f7f3de;
  border-radius: 2px;
  opacity: .95;
}

#crosshair i:first-child {
  width: 12px;
  height: 2px;
  top: 7px;
  left: 2px;
}

#crosshair i:last-child {
  width: 2px;
  height: 12px;
  left: 7px;
  top: 2px;
}

#target-label {
  position: absolute;
  top: calc(50% + 28px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  text-shadow: 0 1px 5px #142926;
  background: #213a3833;
  padding: 5px 10px;
  border-radius: 3px;
  white-space: nowrap;
  max-width: calc(100vw - 40px);
  text-align: center;
}

#target-label:empty {
  display: none;
}

#mining-track {
  position: absolute;
  top: calc(50% + 56px);
  left: calc(50% - 40px);
  width: 80px;
  height: 3px;
  background: #172d3455;
  display: none;
}

#mining-progress {
  display: block;
  height: 100%;
  background: #f6e3a6;
  width: 0;
}

.bottom-hud {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
}

.vitals {
  display: flex;
  justify-content: space-between;
  margin: 0 5px 12px;
  gap: 45px;
}

.vitals>div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vital-icon {
  font-size: 17px;
}

.health {
  color: #e99e87;
}

.hunger {
  color: #e3c08a;
}

.vital-track {
  height: 6px;
  width: 119px;
  border-radius: 2px;
  background: #19322c88;
  overflow: hidden;
}

.vital-track i {
  display: block;
  height: 100%;
  width: 100%;
  background: #e99e87;
  transition: width .2s;
}

#hunger-bar {
  background: #e0be88;
}

.vitals>div>span:last-child {
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  width: 12px;
  color: #f9f0cf;
  filter: drop-shadow(0 1px 1px #000);
}

#held-label {
  text-align: center;
  font-size: 11px;
  margin: 10px 0 11px;
  text-shadow: 0 2px 6px #1e3329;
}

.hotbar {
  display: flex;
  gap: 5px;
  padding: 8px;
  background: #203b2fe8;
  border: 2px solid #9cb27588;
  border-radius: 15px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 0 #112b23,0 8px 20px #132b2944;
}

.slot {
  width: 54px;
  height: 54px;
  position: relative;
  border: 1px solid #91a66c66;
  border-radius: 9px;
  background: linear-gradient(#68815133,#122f2533);
  display: flex;
  align-items: center;
  justify-content: center;
}

.slot.active {
  background: #d7c47755;
  border: 2px solid #ffe49b;
  box-shadow: 0 0 0 1px #d4c17b,0 0 16px #eadb8733;
  transform: translateY(-3px);
}

.slot .slot-key {
  position: absolute;
  left: 5px;
  top: 3px;
  font-size: 10px;
  opacity: .85;
  color: #eff0ce;
  font-weight: 750;
}

.slot .slot-count {
  position: absolute;
  right: 5px;
  bottom: 4px;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  text-shadow: 0 2px 0 #193026;
}

.slot.empty .item-icon {
  opacity: .23;
  filter: saturate(.4);
}

.slot .item-icon {
  width: 31px;
  height: 31px;
  object-fit: contain;
  image-rendering: pixelated;
}

.control-strip {
  display: flex;
  justify-content: center;
  gap: 22px;
  font-size: 9px;
  color: #edf1d2b0;
  margin-top: 13px;
  text-shadow: 0 1px 5px #263730;
}

.control-strip kbd {
  font-size: 8px;
  margin-right: 3px;
  background: #1c302a77;
}

.coordinates {
  position: absolute;
  bottom: 31px;
  left: 34px;
  font-size: 9px;
  letter-spacing: .7px;
  color: #f0f0d59a;
  text-shadow: 0 1px 4px #152d2a;
}

.autosave {
  position: absolute;
  bottom: 31px;
  right: 34px;
  font-size: 9px;
  color: #e8ebd5a0;
}

.toast {
  position: fixed;
  bottom: 219px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 9;
  background: #273d35e8;
  border: 1px solid #d5ddaf44;
  box-shadow: 0 8px 24px #12282330;
  padding: 11px 19px;
  border-radius: 5px;
  color: #eeefd7;
  font-size: 12px;
  opacity: 0;
  transition: opacity .18s,transform .18s;
  pointer-events: none;
}

.toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.modal {
  position: fixed;
  z-index: 10;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: min(850px,calc(100vw - 48px));
  max-height: calc(100vh - 80px);
  overflow: auto;
  background: linear-gradient(145deg,#335641fa,#213f32fc);
  border: 2px solid #91ac70;
  border-radius: 23px;
  box-shadow: 0 8px 0 #142d25,0 25px 80px #10282299,inset 0 2px 0 #d8e4ad33;
  backdrop-filter: blur(22px);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  border-bottom: 2px solid #92ad7044;
  background: #163d2933;
}

.modal h2 {
  font: 32px Georgia,serif;
  letter-spacing: -.7px;
  margin: 8px 0 0;
  font-family: ui-rounded,"Trebuchet MS",system-ui,sans-serif;
  font-size: 30px;
  font-weight: 850;
  color: #fff0c8;
}

.close {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid #bdcd9399;
  background: #53724b;
  color: #fff2cb;
  font-size: 24px;
  line-height: 1;
  min-width: 38px;
  box-shadow: 0 3px 0 #183529;
  font-weight: 750;
}

.close:hover {
  background: #6a885b;
}

.inventory-layout {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: 28px;
  padding: 22px 30px;
}

.section-caption {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .7px;
  color: #f1dc9a;
  margin: 0 0 18px;
}

.section-caption span {
  display: block;
  font-size: 12px;
  letter-spacing: 0;
  font-weight: 400;
  color: #d0dcbb;
  margin-top: 7px;
  line-height: 1.5;
}

.inventory-items {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  align-content: start;
}

.inventory-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 98px;
  border: 2px solid #8da86a66;
  border-radius: 12px;
  background: linear-gradient(#56744a55,#213d2d55);
  color: #e9e7cd;
  padding: 10px 5px;
  box-shadow: 0 3px 0 #152f2599;
}

.inventory-item:hover {
  background: #70905266;
  border-color: #e4d289;
}

.inventory-item img {
  width: 38px;
  height: 38px;
  image-rendering: pixelated;
  margin: 0 0 7px;
}

.inventory-item span {
  font-size: 11px;
  font-weight: 650;
}

.inventory-item b {
  position: absolute;
  right: 6px;
  top: 5px;
  font-size: 13px;
  font-weight: 800;
  color: #ffdfa0;
}

.inventory-empty {
  font: italic 15px Georgia,serif;
  line-height: 1.8;
  color: #d9dfb899;
  grid-column: 1/-1;
}

.inventory-tip {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ced5b3;
  font-size: 10px;
  line-height: 1.8;
  margin-top: 20px;
}

.inventory-tip>span {
  font-size: 22px;
}

.crafting {
  border-left: 1px solid #e7efd018;
  padding-left: 26px;
}

.recipe {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid #acc78b33;
}

.recipe>img {
  width: 35px;
  height: 35px;
  image-rendering: pixelated;
}

.recipe-info {
  flex: 1;
  min-width: 0;
}

.recipe-info strong {
  display: block;
  font-size: 13px;
  font-weight: 750;
  color: #f4eacb;
}

.recipe-info small {
  display: block;
  font-size: 11px;
  line-height: 1.7;
  margin-top: 3px;
  color: #cbd8b9;
}

.recipe-info .missing {
  color: #d6a995;
}

.recipe-info .enough {
  color: #c6d99e;
}

.recipe button {
  border: 1px solid #d3df9d;
  background: linear-gradient(#a3bd74,#819d57);
  color: #182d1f;
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 12px;
  flex-shrink: 0;
  box-shadow: 0 3px 0 #213c27;
  font-weight: 850;
}

.recipe button:not(:disabled):hover {
  background: #b7cf85;
}

.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 17px 30px;
  border-top: 1px solid #eff5d015;
  font-size: 10px;
  color: #d7dfba99;
}

.small-primary {
  background: linear-gradient(#eed693,#d6b974);
  color: #35402b;
  border: 1px solid #fff0bb;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  box-shadow: 0 3px 0 #6b643d;
  font-weight: 800;
}

.settings {
  width: min(590px,calc(100vw - 40px));
}

.settings-content {
  padding: 8px 30px 25px;
}

.setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid #e9f0d316;
  font-size: 14px;
  color: #f1e8cb;
}

.setting select {
  background: #213e2e;
  color: #e2e7ce;
  border: 1px solid #9fb67b;
  border-radius: 9px;
  padding: 9px;
  font-size: 12px;
  max-width: 250px;
}

.setting input[type=range] {
  width: 145px;
  accent-color: #f0ca75;
  height: 26px;
}

.setting input[type=checkbox] {
  accent-color: #d6ca79;
  width: 20px;
  height: 20px;
}

.sky-preview {
  margin-top: 24px;
}

#sky-buttons {
  display: flex;
  gap: 7px;
}

#sky-buttons button {
  background: #1d382b;
  border: 1px solid #e9ebc533;
  border-radius: 9px;
  padding: 9px 14px;
  color: #dce3c3;
  font-size: 12px;
  border-color: #9caf7466;
}

#sky-buttons button.active {
  background: #748a51;
  border-color: #eddb93;
  color: #fff0c6;
}

.keys-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 19px 16px;
  margin: 28px 0;
  color: #e1e7c8;
  font-size: 11px;
  line-height: 1.5;
}

.keys-grid kbd {
  font-size: 8px;
  margin-right: 8px;
}

.compatibility {
  font-size: 10px;
  line-height: 1.8;
  color: #d5ddbd80;
  border-top: 1px solid #e9f0d316;
  padding-top: 16px;
}

.death {
  width: 410px;
  padding: 38px;
  text-align: center;
}

.death h2 {
  font-size: 42px;
  margin-top: 18px;
}

.death p {
  font-size: 12px;
  line-height: 1.9;
  color: #d1dbc0b3;
  margin: 22px 0;
}

.death .primary {
  width: 100%;
  font-size: 12px;
}

#error {
  padding: 30px;
  line-height: 1.8;
}

body.playing .brand {
  opacity: .85;
  transform: scale(.85);
  transform-origin: top left;
}

body.playing .world-label {
  opacity: .7;
}

body.modal-open #hud {
  opacity: .2;
}

body.modal-open .menu-copy,body.modal-open .field-note {
  visibility: hidden;
}

.world-picker {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 20px;
  max-width: none;
}

.world-picker>span {
  font-size: 12px;
  letter-spacing: .3px;
  color: #e9ddba;
  font-weight: 700;
}

.world-picker select,#equip-slot {
  font: 11px inherit;
  background: #263d37bc;
  color: #ecebd4;
  border: 1px solid #dce1b838;
  border-radius: 4px;
  padding: 9px 10px;
  width: 100%;
}

.world-picker select {
  font-size: 11px;
  font: 700 15px ui-sans-serif,system-ui,sans-serif;
  padding: 13px 14px;
  background: #182f27;
  color: #fff0ce;
  border: 2px solid #76966a;
  border-radius: 12px;
  box-shadow: inset 0 2px 4px #10241d88;
}

#equip-slot {
  font-size: 12px;
  margin-bottom: 12px;
  padding: 11px;
  border: 1px solid #8ca36a;
  border-radius: 9px;
  background: #203b2d;
  color: #f4e8c2;
}

#craft-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

#craft-filters button {
  padding: 9px 12px;
  border: 1px solid #dae0bc25;
  border-radius: 9px;
  background: #203e2f;
  color: #e7eaca;
  font-size: 12px;
}

#craft-filters button.active {
  background: #8fa969;
  border-color: #cad993;
  color: #192d20;
  font-weight: 800;
}

#bench-status {
  font-size: 9px;
  line-height: 1.6;
  color: #c9d8ae9c;
  margin: 12px 0;
}

#recipes {
  max-height: 370px;
  overflow-y: auto;
  padding-right: 7px;
  scrollbar-width: thin;
  scrollbar-color: #91a083 #2a4038;
}

.recipe-info p {
  font-size: 11px;
  line-height: 1.6;
  color: #d5dfbd;
  margin: 5px 0;
}

.recipe-info .bench-needed {
  display: block;
  color: #d2ba86;
  font-size: 8px;
}

.style-explorer {
  margin-top: 24px;
}

#style-buttons {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 9px;
}

#style-buttons button {
  background: #1d3a2b77;
  border: 2px solid #8fa67366;
  border-radius: 12px;
  text-align: left;
  padding: 12px;
  color: #e7ecd0;
}

#style-buttons button.active {
  border-color: #f3d183;
  background: #6b825744;
  box-shadow: 0 3px 0 #193324;
}

#style-buttons strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  margin: 10px 0 5px;
}

#style-buttons small {
  display: block;
  font-size: 10px;
  line-height: 1.6;
  color: #d9e1c3;
}

.swatch {
  display: block;
  width: 100%;
  height: 34px;
  border-radius: 7px;
}

.swatch.boreal {
  background: linear-gradient(115deg,#527969 33%,#b4bc78 33%,#b4bc78 66%,#dedbc8 66%);
}

.swatch.amber {
  background: linear-gradient(115deg,#7b8260 33%,#d5a15e 33%,#d5a15e 66%,#e9d5b5 66%);
}

.swatch.moonstone {
  background: linear-gradient(115deg,#4f777b 33%,#8e9fac 33%,#8e9fac 66%,#d8dce0 66%);
}

.account-open {
  position: fixed;
  right: 36px;
  top: 64px;
  z-index: 4;
  font-size: 12px;
  padding: 9px 14px;
  border-radius: 10px;
  background: #274737e8;
  border: 1px solid #b9ce9c66;
  color: #fff1cd;
  font-weight: 700;
  box-shadow: 0 3px 0 #142d26;
}

.playing .account-open {
  display: none;
}

.account {
  max-width: 470px;
  z-index: 20;
  padding-bottom: 24px;
}

.account>p,.account>form,.account>#account-logout {
  margin-left: 28px;
  margin-right: 28px;
}

.account p {
  line-height: 1.6;
  color: #c7d1c1;
}

.account form {
  display: grid;
  gap: 18px;
}

.account label {
  display: grid;
  gap: 8px;
  font-size: 12px;
}

.account input,.account textarea,.account select {
  width: 100%;
  border: 1px solid #83917a66;
  border-radius: 7px;
  padding: 12px;
  background: #182f2a;
  color: var(--cream);
}

.account .primary {
  width: 100%;
  margin-top: 0;
}

.account #account-status {
  min-height: 20px;
  color: #f2d6a2;
}

.account textarea {
  resize: vertical;
  min-height: 120px;
  font: inherit;
}

.account .modal-head {
  padding-bottom: 12px;
}

.release-notes h3 {
  font-family: Georgia,serif;
  font-weight: 400;
  font-size: 22px;
  margin: 12px 0;
  font: 800 20px ui-rounded,"Trebuchet MS",system-ui,sans-serif;
  color: #f9df9c;
}

.release-notes ul {
  padding-left: 17px;
  line-height: 1.6;
  font-size: 12px;
  color: #e3e9cc;
}

.release-notes li {
  margin: 7px 0;
}

.release-notes details {
  font-size: 12px;
  margin: 15px 0;
}

.release-notes summary {
  cursor: pointer;
  color: var(--sage);
}

.release-notes details strong {
  display: block;
  margin-top: 16px;
}

.release-notes .text-button {
  font-size: 12px;
  border: 1px solid #9dbb8066;
  border-radius: 9px;
  padding: 10px 13px;
  color: #f4e9be;
  background: #52714c55;
  font-weight: 700;
}

.audio-preview {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 18px 0 24px;
}

.audio-preview span {
  font-size: 11px;
  color: #d1d8c7;
  line-height: 1.5;
}

button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline: 3px solid #ffdf8c;
  outline-offset: 4px;
}

#menu-eyebrow {
  display: inline-flex;
  align-items: center;
  border-radius: 20px;
  padding: 8px 12px;
  background: #172f2580;
  color: #ecd38b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.1px;
}

.primary:not(:disabled):active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #90652f;
}

.menu-actions .text-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  min-height: 48px;
  border: 1px solid #a5bd8466;
  border-radius: 11px;
  background: linear-gradient(#4c704d,#39573e);
  box-shadow: 0 3px 0 #172f25,inset 0 1px 0 #dce7bc33;
  font-size: 13px;
  font-weight: 750;
  color: #f5ebce;
}

.menu-actions .text-button:hover {
  background: #648358;
  transform: translateY(-1px);
}

.menu-actions .text-button span {
  font-size: 19px;
}

.field-note>.eyebrow {
  color: #f4d886;
  font-weight: 850;
  letter-spacing: 1px;
  font-size: 11px;
}

.quest-emblem { float: right; width: 48px; height: 48px; object-fit: contain; margin: -4px -2px 0 10px; }

.release-notes .eyebrow {
  color: #d4dfb5;
  font-size: 10px;
  letter-spacing: .7px;
}

.modal .eyebrow {
  font-size: 10px;
  color: #d6e0b2;
  letter-spacing: 1px;
}

.settings-content>[data-feedback] {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px solid #9eb87888;
  border-radius: 10px;
  color: #f1dba1;
  font-size: 13px;
  font-weight: 700;
  background: #506e4144;
}

@media(max-width:850px) {

  .field-note { display: none; }

  .menu-copy { left: 7%; }

  .brand { top: 23px; left: 24px; }

  .world-label { right: 24px; top: 30px; font-size: 8px; }

  .inventory-layout { gap: 16px; padding: 18px; }

  .crafting { padding-left: 16px; }

  .modal-head { padding: 20px; }

  .slot { width: 48px; height: 48px; }

  .objective-card { left: 24px; }

  .coordinates { bottom: 10px; left: 20px; }

  .autosave { bottom: 10px; right: 20px; }

  .menu-footer { left: 24px; right: 24px; }

  .menu-footer>span:last-child { display: none; }

}

@media(max-height:670px) {

  .menu h1 { font-size: 52px; margin: 16px 0; }

  .menu-copy>p { margin-bottom: 20px; }

  .save-note { margin-top: 17px; }

  .modal { max-height: calc(100vh - 30px); }

  .recipe { padding: 7px 0; }

  .modal-head { padding: 18px 25px; }

  .bottom-hud { bottom: 18px; }

  .brand { top: 20px; }

  .objective-card { top: 85px; }

  .day-card { top: 80px; }

  .vitals { margin-bottom: 6px; }

  #held-label { margin: 7px 0; }

}

@media(max-width:950px) {

  .menu { column-gap: 28px; padding-left: 4%; padding-right: 4%; grid-template-columns: minmax(320px,440px) minmax(240px,280px); }

  .menu-copy { padding: 24px; }

  .field-note { padding: 20px; }

  .menu h1 { font-size: 42px; }

}

@media(max-width:850px) {

  .menu { grid-template-columns: minmax(0,480px); justify-content: center; align-content: start; padding: 112px 20px 36px; gap: 26px; }

  .field-note { display: block; }

  .menu-copy { left: auto; top: auto; transform: none; }

  .menu-footer { position: static; display: block; text-align: center; }

  .world-label { display: none; }

  .account-open { right: 20px; top: 69px; }

  .slot { width: clamp(26px,7vw,48px); height: clamp(34px,7vw,48px); }

  .slot .item-icon { width: clamp(20px,4.8vw,31px); height: clamp(20px,4.8vw,31px); }

  .hotbar { gap: 3px; padding: 5px; }

  .bottom-hud { max-width: calc(100vw - 16px); }

  .slot .slot-key { left: 3px; top: 2px; font-size: 8px; }

  .control-strip { gap: 10px; font-size: 8px; }

}

@media(max-width:580px) {

  .inventory-layout { grid-template-columns: 1fr; }

  .crafting { border-left: 0; padding-left: 0; }

  .inventory-items { grid-template-columns: repeat(4,1fr); }

  .inventory-item { min-height: 80px; }

  .settings-content { padding: 8px 18px 22px; }

  .setting { gap: 10px; font-size: 12px; }

  .setting select { max-width: 58%; }

  .menu h1 { font-size: 38px; }

  .menu-copy { padding: 22px; }

  .brand { font-size: 21px; }

  .modal h2 { font-size: 26px; }

  #style-buttons { gap: 6px; }

  #style-buttons button { padding: 8px; }

  #sky-buttons { flex-wrap: wrap; }

}

@media(max-height:720px) and (min-width:851px) {

  .menu { align-items: start; padding-top: 104px; padding-bottom: 60px; }

  .menu-copy { padding: 22px 26px; }

  .menu h1 { font-size: 40px; margin: 15px 0 12px; }

  .menu-copy>p { margin-bottom: 14px; font-size: 13px; }

  .world-picker { margin-bottom: 14px; }

  .primary { padding: 14px 20px; }

  .menu-footer { position: static; grid-column: 1/-1; }

}

@media(prefers-reduced-motion:reduce) {

  button { transition: none; }

  .primary:hover,.primary:not(:disabled):active { transform: none; }

}

/* Field journal: the same woodland cards, with quiet progress and clear rewards. */
.journal { width: min(780px, calc(100vw - 40px)); }
#journal-summary { padding: 0 28px; color: #dae1bd; font-size: 13px; }
#mission-list { padding: 0 28px 24px; }
#mission-list h3 { color: #f0d59d; font-size: 14px; letter-spacing: .8px; margin: 26px 0 12px; }
.mission-card { border: 1px solid #8aab6f77; background: #192f244d; padding: 17px; border-radius: 14px; margin: 10px 0; }
.mission-card.complete { opacity: .65; }
.mission-heading, .mission-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mission-heading strong { color: #fff0cc; font-size: 17px; }
.mission-heading span { color: #dbe8af; font-size: 12px; white-space: nowrap; }
.mission-card p { color: #d2dcbb; font-size: 13px; line-height: 1.6; }
.mission-card progress { width: 100%; height: 7px; accent-color: #c8d78a; margin: 2px 0 14px; }
.mission-actions { flex-wrap: wrap; }
.mission-actions small { color: #dcc38f; flex: 1 1 180px; }
.mission-actions button { font-size: 12px; padding: 9px 12px; }
.trail-hint { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); border-radius: 14px; background: #19382dc9; border: 1px solid #a2b88766; padding: 9px 17px; color: #f2e8c2; font-size: 12px; text-align: center; }
#open-journal { margin-top: 15px; }
.objective-card { max-width: 330px; }
.objective-card small { display: block; line-height: 1.5; }
@media (max-width: 850px) { .trail-hint { top: 180px; } }
@media (max-width: 580px) { #mission-list { padding: 0 15px 18px; } .mission-heading strong { font-size: 15px; } }

.stance-label { position: absolute; left: 50%; bottom: 188px; transform: translateX(-50%); color: #f4dfb2; font-size: 12px; text-shadow: 0 2px 3px #17251e; }

.audio-preview { flex-wrap: wrap; }
.audio-preview #audio-status { flex-basis: 100%; }

/* Backpack: compact movable slots and a spatial crafting bench. */
#inventory { width: min(1120px, calc(100vw - 36px)); }
#inventory .inventory-layout { grid-template-columns: 1.1fr 1fr; gap: 22px; padding: 22px; }
#inventory .section-caption { margin-bottom: 12px; }
#inventory .inventory-items, #pack-hotbar { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
#inventory .inventory-items { max-height: 320px; overflow-y: auto; padding: 3px; }
.pack-slot { position: relative; display: grid; place-items: center; min-width: 0; height: 48px; padding: 4px; color: #d9e0bb; background: #193d30; border: 1px solid #73916688; border-radius: 8px; box-shadow: inset 0 2px 4px #102a2466; }
.pack-slot img { width: 28px; height: 28px; image-rendering: pixelated; pointer-events: none; }
.pack-slot b { position: absolute; bottom: 3px; right: 4px; font-size: 11px; color: #fff0c8; text-shadow: 1px 1px 2px #102b20; }
.pack-slot small { position: absolute; left: 4px; top: 2px; font-size: 9px; color: #b7c897; }
.pack-slot:hover, .pack-slot:focus-visible { background: #365b40; outline: 2px solid #d4c784; }
.pack-slot.picked { outline: 2px solid #f4d486; background: #5a7047; }
.pack-slot.ghost img { opacity: .2; }
.pack-slot.ghost { border-style: dashed; }
.pack-quick-title { margin-top: 24px; }
#inventory .inventory-tip { margin-top: 22px; padding: 14px; }
#inventory .crafting { padding-left: 22px; }
#inventory #bench-status { font-size: 12px; color: #d9dfb5; margin: 0 0 12px; }
.craft-workspace { display: flex; align-items: center; gap: 16px; }
#craft-grid { display: grid; gap: 5px; }
#craft-grid .pack-slot { height: 52px; }
.craft-arrow { color: #d6c180; font-size: 26px; }
#craft-result { width: 135px; min-height: 92px; border: 2px solid #cdbd76; border-radius: 12px; padding: 12px; background: #6a8450; color: #fff2cf; box-shadow: 0 4px 0 #173d2d; font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.4; }
#craft-result img { display: block; width: 36px; height: 36px; image-rendering: pixelated; margin: 0 auto 6px; }
#craft-result:disabled { background: #294636; border-color: #74846066; color: #afb99d; box-shadow: none; }
.craft-grid-footer { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 55px; margin: 10px 0; }
#recipe-hint { font-size: 11px; line-height: 1.5; color: #d1d9b9; }
#recipe-hint:focus { outline: 2px solid #d4c784; outline-offset: 3px; border-radius: 2px; }
#recipe-components:empty { display: none; }
#recipe-components { margin: 0 0 14px; }
#recipe-components > button { margin-bottom: 8px; font-size: 12px; }
.component-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-items: start; }
.component-card { border: 1px solid #78936466; border-radius: 8px; background: #1e3d30; font-size: 12px; overflow: hidden; }
.component-card summary, .component-card.raw-material { padding: 9px; }
.component-card summary { cursor: pointer; }
.component-card b { float: right; margin-left: 5px; font-size: 11px; }
.component-card .enough { color: #d2e3a2; }
.component-card .missing { color: #edbd98; }
.component-card small { display: block; margin-top: 5px; color: #d2c787; font-size: 10px; }
.component-card > div { display: flex; flex-direction: column; border-top: 1px solid #78936444; }
.component-card button { display: flex; align-items: center; gap: 7px; padding: 8px; border: 0; background: transparent; color: #f0e5c5; text-align: left; font: inherit; cursor: pointer; }
.component-card button:hover, .component-card button:focus-visible { background: #456442; }
.component-card button img { width: 22px; height: 22px; image-rendering: pixelated; }
#clear-craft { flex-shrink: 0; font-size: 11px; }
#recipe-search { box-sizing: border-box; width: 100%; border: 1px solid #7f986a; border-radius: 8px; background: #18392d; color: #f2e5bd; padding: 10px 12px; font: inherit; font-size: 12px; }
#recipe-search::placeholder { color: #b6c2a0; }
#inventory #craft-filters { margin: 10px 0; gap: 5px; }
#inventory #craft-filters button { padding: 6px 9px; font-size: 11px; }
#inventory #recipes { max-height: 245px; display: flex; flex-direction: column; gap: 5px; }
.recipe-choice { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px; background: #244533; border: 1px solid #70906555; border-radius: 8px; color: #ece3c3; text-align: left; }
.recipe-choice > img { width: 28px; height: 28px; image-rendering: pixelated; }
.recipe-choice > span { flex: 1; }
.recipe-choice strong { display: block; font-size: 12px; }
.recipe-choice small { display: block; margin-top: 4px; font-size: 10px; line-height: 1.5; }
.recipe-choice .enough { color: #c8d894; }
.recipe-choice .missing { color: #deb392; }
.recipe-choice:hover:not(:disabled), .recipe-choice.chosen { background: #42643e; border-color: #c5bd7e; }
.recipe-choice:disabled { opacity: .5; }
@media (max-width: 900px) { #inventory .inventory-layout { grid-template-columns: 1fr; } #inventory .crafting { padding-left: 0; border-left: none; } #inventory .inventory-items { max-height: 200px; } }
@media (max-width: 520px) { #inventory .inventory-items, #pack-hotbar { grid-template-columns: repeat(5, minmax(0, 1fr)); } .craft-workspace { gap: 10px; } #craft-result { width: 110px; } #inventory .inventory-layout { padding: 14px; } }
#inventory .modal-head { position: sticky; top: 0; z-index: 2; background: #2d4d3c; }
#inventory .modal-footer { position: sticky; bottom: 0; z-index: 2; background: #294635; }

/* Storage shares the backpack's compact, tactile item presentation. */
.storage { width: min(1040px, calc(100vw - 48px)); }
.storage-tip { padding: 0 28px; color: #d9ddbb; }
.storage-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 0 28px 28px; }
.storage-columns h3 { min-height: 40px; font-size: 20px; margin: 8px 0 14px; }
.storage-columns h3 small { display: block; color: #c0cba2; font-size: 12px; margin-top: 5px; }
.storage-slots { display: grid; grid-template-columns: repeat(3, 1fr); align-content: start; gap: 8px; }
.storage-item { display: grid; justify-items: center; padding: 10px 5px; min-height: 100px; background: #203d30; border: 2px solid #698662; border-radius: 12px; color: #efe7c8; }
.storage-item:hover { background: #426244; border-color: #e5cc82; }
.storage-item img { width: 28px; height: 28px; image-rendering: pixelated; }
.storage-item span { font-size: 12px; }
.storage-item b { font-size: 15px; color: #efcf7e; }
.storage-slots .inventory-empty { grid-column: 1 / -1; }
@media (max-width: 700px) { .storage-columns { grid-template-columns: 1fr; } }

.journal-trails { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 28px 8px; }

/* Compact account guidance, with a password reveal that works with password managers. */
.account .account-help { color: #bfccb6; font-size: 11px; line-height: 1.5; }
.account form > .account-help { margin-top: -12px; }
.password-field { display: grid; gap: 8px; }
.password-entry { display: flex; align-items: stretch; border: 1px solid #83917a66; border-radius: 9px; background: #182f2a; }
.account .password-entry input { min-width: 0; border: 0; background: transparent; }
.password-entry .text-button { padding: 0 13px; font-size: 12px; color: #eed391; }
.password-entry:focus-within { outline: 2px solid #bdca8d; outline-offset: 2px; }

.journal-focus, .journal-filters { margin: 14px 28px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.journal-focus { color: #e6d7ae; font-size: 13px; justify-content: space-between; }
.journal-filters button { padding: 9px 14px; border: 1px solid #8aa57777; border-radius: 12px; background: #233f32; color: #e8e2bd; font: inherit; font-size: 13px; cursor: pointer; }
.journal-filters button[aria-pressed="true"] { background: #e3c67e; color: #283c2d; border-color: #f0dba0; }
.mission-card.following { border-color: #e6c779; box-shadow: inset 3px 0 #e6c779; }
.mission-card .mission-prerequisite { color: #e5c992; font-size: 12px; }
.journal-empty { color: #d5ddbc; line-height: 1.6; padding: 18px 0; }
.journal .text-button { padding: 8px 11px; border: 1px solid #91ad7880; border-radius: 10px; background: #304e3c; color: #f0e6c1; }
.journal .text-button:disabled { opacity: .4; cursor: default; }
.journal .text-button[aria-pressed="true"] { border-color: #ebd08b; color: #ffe7a3; }
.journal-trails { padding-top: 14px; }

.rested-badge { color: #f0d993; font-size: 12px; letter-spacing: .04em; margin-bottom: 5px; text-shadow: 0 2px 3px #203b2b; }

/* Quiet utilities below the main play controls. Help opens above its row. */
.surface-help { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid #a9bd8138; }
.surface-action { display: flex; align-items: center; gap: 4px; }
.surface-action .help-hint { align-self: stretch; align-items: center; }
.surface-help .help-tooltip { bottom: calc(100% - 17px); }
.utility-button { min-height: 40px; padding: 8px 10px; border: 1px solid #a9bd8138; border-radius: 9px; background: #162f263b; color: #e7d5a5; font-size: 12px; font-weight: 750; text-align: left; }
.utility-button:not(:disabled):hover { color: #fff1c5; text-decoration: underline; text-underline-offset: 4px; }
.surface-status { color: #bbd1ae; font-size: 11px; line-height: 1.5; }
.save-note { position: relative; min-height: 32px; margin-top: 12px; line-height: 1.5; }
.save-note > .status-dot { flex-shrink: 0; }
.save-note > #save-status { flex: 1; }
.help-hint { display: inline-flex; flex-shrink: 0; }
.info-button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid #b7cbaa40; border-radius: 50%; background: transparent; color: #cbd9bc; font: italic 700 15px Georgia,serif; }
.info-button:hover,.info-button[aria-expanded="true"] { color: #fff0c3; border-color: #c9d1a46b; background: #b9ce9720; }
.help-tooltip { position: absolute; z-index: 8; bottom: 100%; left: 0; right: 0; padding: 15px 17px; border: 1px solid #c7b47799; border-radius: 12px; background: #142e25; box-shadow: 0 8px 24px #071e18aa; color: #f1e8ce; font-size: 12px; line-height: 1.65; font-weight: 400; text-align: left; }
.help-tooltip[hidden] { display: none; }
.settings .surface-help { margin-bottom: 18px; }
@media (max-width: 420px) {
  .menu-actions { gap: 8px; }
  .menu-actions .text-button { font-size: 12px; gap: 5px; }
  .menu-actions .text-button span { font-size: 16px; }
  .surface-status { flex-basis: 100%; }
}

#totem-status { position: fixed; top: 115px; left: 50%; transform: translateX(-50%); padding: 10px 18px; border: 1px solid #b2f3c9; border-radius: 12px; background: #193a32ed; color: #d4ffe1; pointer-events: none; font-weight: 700; z-index: 12; }
.surface-help button:disabled { opacity: .65; cursor: default; }

.neighbour { width: min(860px, calc(100vw - 36px)); }
.neighbour-content { padding: 0 28px 24px; }
#village-greeting { color: #e0d9b6; line-height: 1.6; }
#village-status { color: #f5d989; min-height: 1.4em; }
#village-trades { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.neighbour-card { padding: 18px; border: 1px solid #718661; border-radius: 15px; background: #203e30; }
.neighbour-card p { line-height: 1.5; color: #d1d4b2; font-size: 14px; }
.neighbour-card h3 { margin: 12px 0; font-size: 24px; }
.trade-supplies { display: flex; align-items: center; gap: 15px; justify-content: space-between; }
.trade-supplies div { display: grid; gap: 6px; }
.trade-supplies small { color: #bbc59f; }
.trade-supplies span { display: grid; grid-template-columns: 25px 1fr; gap: 4px 7px; align-items: center; font-size: 14px; }
.trade-supplies span small { grid-column: 2; font-size: 11px; }
.trade-supplies img { width: 25px; height: 25px; image-rendering: pixelated; }
.village-project { margin-top: 18px; }
.neighbour-card button:disabled { opacity: .5; cursor: default; }
.neighbour .modal-footer span { max-width: 310px; font-size: 12px; }
@media (max-width: 650px) { #village-trades { grid-template-columns: 1fr; } .neighbour-content { padding: 0 18px 18px; } }

#bag-search { width: 100%; margin: 0 0 10px; padding: 9px 12px; background: #203b2d; color: #f4e8c2; border: 1px solid #b6c08a66; border-radius: 9px; }

/* Carved woodland identity and illustrated field notes. Artwork never covers controls. */
.loading-emblem { display: block; width: 88px; height: 88px; margin: 0 auto 20px; object-fit: contain; }
.field-art { margin: -12px -12px 24px; padding: 5px; border: 1px solid #b69c675c; border-radius: 15px; background: #122b24; box-shadow: 0 5px 14px #0b211a55; }
.field-art img { display: block; width: 100%; height: auto; aspect-ratio: 1.85; object-fit: cover; border-radius: 10px; }
.field-art figcaption { padding: 10px 8px 6px; color: #e4d4b2; font: italic 14px Georgia,serif; }
.account-emblem { width: 52px; height: 60px; object-fit: contain; margin-right: 12px; flex: 0 0 auto; }
#account .modal-head { align-items: center; }
#account .modal-head > div { flex: 1; }
#account .eyebrow { font-size: 9px; letter-spacing: 1px; }
#journal .modal-head { background: linear-gradient(90deg,#294337 45%,#29433780),url('./assets/menu/forest-lake-small-v1.jpg') right 46% / cover; }
#journal .modal-head h2 { text-shadow: 0 2px 5px #10291f; }
@media (min-width: 851px) { .menu { padding-top: 155px; grid-template-columns: minmax(320px,480px) minmax(280px,350px); } }
@media (max-width: 850px) {
  .brand { left: 18px; top: 4px; width: 270px; }
  .brand small { margin-top: -7px; font-size: 8px; }
  .account-open { top: 98px; }
  .menu { top: 145px; padding-top: 9px; }
}
@media (max-height: 720px) and (min-width: 851px) {
  .brand { top: 0; width: 300px; }
  .brand small { margin-top: -7px; }
  .menu { padding-top: 122px; }
  .field-art img { aspect-ratio: 2.6; }
}
body.playing .brand { width: 180px; top: 8px; left: 22px; transform: none; opacity: .8; }
body.playing .brand small { display: none; }

#landing-progress:not([hidden]) { display: flex; align-items: center; gap: 12px; margin: -4px 0 12px; }
#landing-progress progress { flex: 1; width: 100%; height: 8px; accent-color: #d0c67f; }
#landing-progress small { color: #d7dfb9; white-space: nowrap; font-size: 11px; }

.input-notice { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--gold); border-radius: 12px; background: rgba(245,204,112,.14); color: var(--cream); font-size: 15px; line-height: 1.4; font-weight: 600; }
.input-notice[hidden] { display: none; }