:root {
  color-scheme: dark;
  --ink: #182323;
  --paper: #f4e8c8;
  --paper-dark: #d9c59c;
  --forest: #24483c;
  --forest-deep: #142f2b;
  --leaf: #5d9e55;
  --gold: #e8b755;
  --rust: #b45d3e;
  --cream: #fff4d6;
}
.coop-overlay { position:fixed;inset:0;z-index:3000;display:grid;place-items:center;background:#030b09ed;padding:20px;color:#eddfb8;font:14px/1.5 "Courier New",monospace; }
.coop-card { width:min(480px,100%);max-height:94vh;overflow:auto;padding:24px;border:3px solid #9b8455;background:#10251f;box-shadow:inset 0 0 0 3px #314435; }
.coop-card h2 { font-size:24px;color:#f2d18f; }.coop-card p { color:#c3cfbc; }.coop-card label { display:block;margin:12px 0; }
.coop-card input { display:block;width:100%;padding:10px;margin:5px 0;border:2px solid #7d8969;background:#071611;color:#f8edca;font:inherit; }
.coop-card button { width:100%;padding:10px;margin:7px 0;border:2px solid #8f9d71;background:#2c513b;color:#f8edca;cursor:pointer; }
.coop-host-tools { padding:10px;border:1px solid #607857;margin-top:12px; }.coop-host-tools small { display:block;color:#bbbaa4; }
.coop-status { position:fixed;right:12px;bottom:10px;z-index:30;padding:7px 10px;border:1px solid #7b9472;background:#10291ee8;color:#deedc8;font:11px monospace;cursor:pointer;max-width:260px; }
.coop-solo-link { display:block;text-align:center;text-decoration:none;color:inherit;padding:10px;border:1px solid #7e9168; }

* { box-sizing: border-box; -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
.opening-name-prompt > input { display: block; width: min(360px,80vw); margin: 22px auto; padding: 12px; color: #fff0cb; background: #13231f; border: 1px solid #ac976a; text-align: center; font: 18px monospace; }

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  display: grid;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(151, 196, 98, .18), transparent 25%),
    radial-gradient(circle at 90% 82%, rgba(36, 94, 76, .35), transparent 30%),
    #102624;
  color: var(--cream);
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, #fff 4px);
  mix-blend-mode: overlay;
}

button { font: inherit; }

.game-shell {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

.titlebar, .controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border: 3px solid #0b1c1a;
  background: var(--forest-deep);
  box-shadow: inset 0 0 0 2px #3d6855;
}

.titlebar { min-height: 70px; }
.titlebar h1 { margin: -2px 0 0; font: 900 30px/1 Georgia, serif; letter-spacing: 2px; color: #f4d17c; }
.eyebrow { margin: 0; color: #8fbda0; font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.world-status { display: flex; gap: 10px; align-items: center; color: #b7d1b6; font-size: 12px; font-weight: bold; }
.online-pill { padding: 6px 8px; border: 1px solid #477861; border-radius: 3px; color: #7bc792; background: #193a31; text-decoration: none; }

.play-area {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  border-inline: 3px solid #0b1c1a;
  background: #0b1c1a;
}

.canvas-frame {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #172f2a;
}
.sidebar.inventory-open { position: absolute; z-index: 12; right: 8px; top: 8px; bottom: 8px; width: 220px; border: 2px solid #48694d; box-shadow: 0 5px 20px #0007; }
.health-hud { position: absolute; bottom: 12px; left: 12px; z-index: 5; display: flex; align-items: center; gap: 8px; width: 220px; padding: 10px; border: 2px solid #48694d; border-radius: 3px; background: #132d24e8; color: #fff2c7; font-size: 12px; font-weight: bold; pointer-events: none; }
.health-hud .meter { flex: 1; height: 12px; }
.health-hud b { font-size: 11px; white-space: nowrap; }
.item-drag-ghost { position: fixed; z-index: 120; display: grid; justify-items: center; width: 80px; padding: 7px; border: 2px solid #eac46c; border-radius: 4px; background: #fae9bdee; color: #263b31; box-shadow: 0 4px 12px #0008; pointer-events: none; }
.item-drag-ghost .item-icon { width: 42px; height: 42px; }
.item-drag-ghost small { font-size: 9px; text-align: center; }
.available-stat-points { padding: 15px 10px; margin-bottom: 12px; border: 2px solid #a59776; background: #dfd4b8; color: #5c5746; font-size: 17px; font-weight: 900; text-align: center; }
.available-stat-points.has-points { color: #204926; background: #cce5a6; border-color: #598549; box-shadow: 0 0 0 2px #8dbe6740; }

canvas {
  flex: none;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.sidebar {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #1c3933;
}

.sidebar:not(.inventory-open) .panel:not(.survivor-panel) {
  display: none;
}

.panel {
  padding: 10px;
  border: 2px solid #102822;
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--paper-dark);
}

.panel-heading {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 2px dotted #a98f63;
  color: #3d4c3f;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.level { color: var(--rust); }
.stat-row { display: grid; grid-template-columns: 52px 1fr 28px; align-items: center; gap: 6px; margin: 5px 0; font-size: 11px; }
.stat-row b { text-align: right; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 7px; }
.stat-chip { display: flex; justify-content: space-between; gap: 5px; padding: 4px 5px; border: 1px solid #b99b66; background: #ead9af; font-size: 9px; font-weight: 900; }
.stat-chip { flex-wrap: wrap; }
.stat-chip .stat-meter { flex: 1 0 100%; height: 4px; background: #b7a985; overflow: hidden; }
.stat-meter i { display: block; height: 100%; background: #56845d; }
.stat-chip.danger .stat-meter i { background: #ffdaa1; }
.story-journal-entry { padding: 8px 5px; border-bottom: 1px solid #c9b68d; color: #796b52; }
.story-journal-entry b, .story-journal-entry small { display: block; line-height: 1.5; }
.story-journal-entry small { margin-top: 3px; font-size: 10px; }
.story-journal-entry.done { color: #406445; }
.story-journal-entry.current { color: #384c3a; background: #efe4c3; }
.discoveries:has(.story-journal-entry) { display: flex; flex-direction: column; }
.story-journal-entry b { font-size: 11px; }
.scene-description { font-style: italic; color: #c6bda8; }
.item-blackSeed { color: #18131c; font-size: 30px; }
.craft-catalog-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; flex-shrink: 0; }
.craft-catalog-tabs .craft-source-badges { margin: 0; gap: 3px; font-size: 9px; }
.craft-catalog-tabs .craft-source-badges span { padding: 3px; }
.craft-catalog-tabs button { padding: 4px; background: #daccaa; border: 1px solid #a88d5f; font-size: 9px; color: #3d4c39; cursor: pointer; }
.craft-catalog-tabs button[aria-selected="true"] { background: #3e6550; color: #fff0c5; }
.craft-catalog { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.stat-chip.danger { color: #fff0d6; border-color: #8c2e27; background: #a94035; animation: dangerPulse .55s steps(2, end) infinite; }
.stat-upgrades { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 5px; border: 1px solid #b99b66; background: #ead9af; }
.stat-upgrades b { grid-column: 1 / -1; font-size: 9px; text-transform: uppercase; color: #5e4d35; }
.stat-upgrades button { padding: 4px; border: 1px solid #8b7652; color: #293a30; background: #dbc98e; cursor: pointer; font-size: 9px; font-weight: 900; }
.stat-upgrades button:hover { background: #f0dc9c; }
.stat-upgrades button { min-height: 38px; font-size: 11px; }
.meter.danger { outline: 2px solid #e95345; box-shadow: 0 0 10px #e95345; }
@keyframes dangerPulse { 50% { filter: brightness(1.35); } }
.meter { height: 8px; overflow: hidden; border: 1px solid #604c38; background: #8d7c64; }
.meter i { display: block; width: 100%; height: 100%; transition: width .2s; }
.health { background: #62a95c; }
.hunger { background: #df9c3f; }
.warmth { background: #d96243; }

.inventory { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.slot {
  position: relative;
  min-height: 49px;
  display: grid;
  place-items: center;
  border: 2px solid #9d865f;
  border-radius: 3px;
  background: #e8d8b3;
  font-size: 24px;
}
.slot:not(.empty) { cursor: grab; }
.slot:not(.empty):active { cursor: grabbing; }
body.dragging-item, body.dragging-item * { cursor: grabbing !important; user-select: none; }
.slot.empty { opacity: .45; }
.slot small { position: absolute; right: 3px; bottom: 1px; font-size: 11px; font-weight: 900; }
.slot .name { position: absolute; left: 3px; top: 2px; font-size: 7px; font-weight: 900; text-transform: uppercase; }

.recipe {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px;
  border: 2px solid #9e7850;
  border-radius: 3px;
  color: #2d382f;
  background: #efd89d;
  cursor: pointer;
  text-align: left;
}
.recipe-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: 181px; overflow-y: auto; }
.recipe { min-width: 0; }
.recipe-icon { flex: 0 0 36px; }
.recipe:hover:not(:disabled) { transform: translateY(-1px); background: #ffe5a1; }
.recipe:disabled { cursor: not-allowed; filter: grayscale(.75); opacity: .55; }
.recipe-icon { width: 36px; height: 36px; display: grid; place-items: center; background: #c16b43; color: white; font-size: 22px; }
.recipe b, .recipe small, .companion-info b, .companion-info small { display: block; }
.recipe small, .companion-info small { margin-top: 2px; color: #6c624f; font-size: 10px; }

.inventory-workspace { min-width: 0; }
.sidebar.inventory-open { overflow: hidden; }
.sidebar.inventory-open .survivor-panel { flex: 0 0 auto; }
.sidebar.inventory-open #survivorStats { max-height: none; }
.sidebar.inventory-open .inventory-workspace { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.inventory-workspace > [role="tabpanel"] { flex: 1; min-height: 0; overflow-y: auto; }
.inventory-workspace [role="tabpanel"] > .crafting-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; margin-bottom: 0; }
.crafting-panel .panel-heading, .craft-toolbar, .craft-source-badges, .recipe-details { flex-shrink: 0; }
.crafting-panel .recipe-list { flex: 1 1 0; min-height: 86px; max-height: none; align-content: start; overflow-y: auto; }
.crafting-panel #townCategory { flex-shrink: 0; }
.inventory-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; position: sticky; top: -10px; z-index: 3; padding: 8px 0; background: #1c3933; }
.inventory-tabs button { min-width: 0; padding: 9px 2px; border: 1px solid #668578; border-radius: 3px; background: #24473c; color: #c5d8c4; font-size: 11px; font-weight: 900; cursor: pointer; }
.inventory-tabs button[aria-selected="true"] { background: #f1dfb0; color: #283e32; border-color: #edc776; box-shadow: inset 0 -3px #c59647; }
.inventory-tabs button:focus-visible, .recipe-card:focus-visible, .recipe-action:focus-visible { outline: 3px solid #72b9d1; outline-offset: 2px; }
.inventory-workspace .panel { margin-bottom: 8px; }
.equipment-hint { display: block; margin: 8px 0; color: #6f664d; font-size: 11px; line-height: 1.5; }
.equipment-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin: 12px 0; }
.equipment-slot { display: grid; grid-template-columns: minmax(0,1fr); justify-items: center; align-items: center; gap: 3px; min-height: 76px; padding: 6px; text-align: center; border: 1px solid #b4a078; background: #f5e7bf; color: #433c2c; cursor: pointer; }
.equipment-slot > .item-icon,.equipment-empty-icon { grid-row: 2; width: 26px; height: 26px; font-size: 23px; }
.equipment-slot b { grid-row: 1; max-width: 100%; color: #6e6347; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.equipment-slot small { grid-row: 3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.equipment-slot[aria-pressed="true"] { border-color: #497464; box-shadow: inset 0 0 0 2px #497464; background: #e5e9c6; }
.equipment-slot[data-equipment-slot="utility"] { grid-column: 1 / -1; }
.equipment-empty-icon { display: grid; place-items: center; font-size: 27px; color: #a89b79; }
.equipment-choices { border-top: 1px solid #b7a478; padding-top: 10px; }
.equipment-choices h3 { font-size: 13px; margin: 0 0 8px; }
.equipment-choice { display: flex; align-items: center; gap: 8px; width: 100%; margin: 5px 0; padding: 7px; border: 1px solid #ad9b72; background: #efe1b8; color: #403c2b; text-align: left; cursor: pointer; }
.equipment-choice span:last-child { display: grid; gap: 3px; }
.equipment-choice small { font-size: 10px; color: #75694b; }
.equipment-choice:disabled { opacity: .55; cursor: not-allowed; }
.equipment-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.equipment-actions button { padding: 6px 9px; border: 1px solid #a28e65; background: #ead6a4; color: #403b29; cursor: pointer; }
.equipment-slot:focus-visible,.equipment-choice:focus-visible { outline: 3px solid #72b9d1; outline-offset: 1px; }
.alchemy-dialogue-body { max-width: 560px; }
.alchemy-dialogue-body p { line-height: 1.7; }
.equipment-panel .panel-heading { position: sticky; top: 0; z-index: 1; background: #f5e7bf; padding: 7px 0; }
.slot.equipped-slot { box-shadow: inset 0 0 0 2px #648970; }
.gear-ribbon { position: absolute; right: 3px; bottom: 3px; font: bold 9px monospace; color: #365944; }
.inventory { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.slot { min-width: 0; min-height: 62px; padding: 13px 2px 8px; }
.slot .name { max-width: calc(100% - 6px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.item-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; font-size: 27px; line-height: 1; color: #5c533c; pointer-events: none; }
.item-icon img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.inventory .slot { aspect-ratio: 1; min-height: 0; padding: 4px 2px; overflow: hidden; }
.inventory .slot > .item-icon { width: 48px; height: 48px; max-width: 85%; min-width: 0; min-height: 0; margin: 2px 0; }
.item-icon:not(.string-lights-icon) img { display: block; object-fit: contain; aspect-ratio: auto; }
.equipment-armor { display: block; text-align: right; font-size: 11px; color: #6e6347; }
.item-wood { color: #875527; } .item-stone { color: #6c7b82; } .item-metal { color: #497eac; }
.item-berry, .item-cookedBerry { color: #b23c64; } .item-fiber, .item-seed, .item-treeSeed, .item-fertilizer { color: #4c7a3d; }
.item-crystal, .item-relic, .item-cannonBlueprint, .item-saddleBlueprint { color: #457da9; }
.blueprint-slot { background: #d2e3e5; border-color: #6a8d9c; }
.blueprint-ribbon { position: absolute; left: 3px; bottom: 3px; color: #365f80; font-size: 9px; font-weight: bold; }
.pack-hint { display: block; margin-top: 9px; color: #6e6148; font-size: 10px; line-height: 1.5; }
.ceiling-setting { display: flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 11px; cursor: pointer; }
.settings-button { width: 100%; margin-bottom: 8px; padding: 8px; border: 2px solid #769478; background: #274a3b; color: #efdfac; font-weight: bold; cursor: pointer; }
.settings-panel .controls { display: grid; gap: 9px; padding: 8px 0; border: 0; background: transparent; box-shadow: none; color: #304737; font-size: 11px; }
.settings-panel .controls button { margin: 0; width: 100%; }
.hotbar-assign { padding: 8px; border: 1px solid #8b7652; color: #293a30; background: #e9d8ae; font-size: 11px; }
.hotbar-assign div { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 8px; }
.hotbar-assign button { padding: 7px 0; border: 1px solid #668578; background: #2f5c49; color: #fff0c7; cursor: pointer; font-weight: bold; }
.nightfall-reward-content { max-width: 440px; text-align: center; }
.nightfall-reward-content.has-three { width: 100%; max-width: 1120px; }
.nightfall-reward-posters { display: grid; grid-template-columns: 1fr; gap: 18px; }
.has-three .nightfall-reward-posters { grid-template-columns: repeat(3,minmax(0,1fr)); }
#nightfallReward .nightfall-reward-posters h2 { color: #594251; font-size: 26px; }
.nightfall-reward-posters p { line-height: 1.5; }
#nightfallRewardFooter { display: block; margin-top: 16px; }
@media(max-width:700px) { .has-three .nightfall-reward-posters { grid-template-columns: 1fr; } }
#nightfallRewardTitle { color: #594251; font-size: 28px; }
.axolotl-reward-art { display: block; margin: 10px auto; width: min(200px,100%); height: 140px; object-fit: contain; image-rendering: pixelated; }
#nightfallRewardOk { margin-top: 18px; padding: 12px 40px; border: 2px solid #9bd3a1; background: #305c48; color: #fff4d6; font: bold 16px monospace; cursor: pointer; }
#nightfallRewardOk:focus-visible { outline: 3px solid #ffe39a; outline-offset: 4px; }
.developer-settings { margin-top: 12px; border-top: 1px solid #9c8b64; padding-top: 10px; }
.developer-settings summary { padding: 8px; background: #274a3b; color: #efdfac; font-weight: bold; cursor: pointer; }
.developer-settings p { font-size: 11px; line-height: 1.6; color: #304737; }
.developer-settings button { display: block; width: 100%; margin: 8px 0; padding: 9px; border: 1px solid #5e806f; border-radius: 3px; background: #2f5c49; color: #dff2df; cursor: pointer; font-size: 11px; }
.developer-settings button:disabled { opacity: .45; cursor: default; }
.craft-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 120px); gap: 5px; margin-bottom: 9px; }
.crafting-panel .panel-heading { flex-wrap: wrap; gap: 4px; }
.crafting-panel .panel-heading > span:first-child { flex: 1 0 calc(100% - 40px); }
.crafting-panel .panel-heading #craftSources { order: 2; flex-basis: 100%; }
.craft-toolbar input, .craft-toolbar select { min-width: 0; width: 100%; padding: 7px 5px; border: 1px solid #a68c63; background: #fff2cd; color: #2e4034; font: inherit; font-size: 11px; border-radius: 3px; }
.craft-source-badges { display: flex; gap: 6px; margin-bottom: 10px; font-size: 10px; font-weight: bold; }
.craft-source-badges span { border: 1px solid #b59b71; padding: 4px 7px; border-radius: 3px; background: #e2d2af; }
.craft-source-badges .connected { border-color: #76a164; background: #d6e6bc; color: #345527; }
.craft-source-badges .disconnected { opacity: .65; }
.panel-heading .craft-source-badges { margin: 0; gap: 3px; font-size: 9px; letter-spacing: 0; text-transform: none; }
.panel-heading .craft-source-badges span { padding: 2px 4px; }
.recipe-list { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 235px; gap: 6px; padding: 3px 3px 6px; }
.recipe-card { position: relative; min-width: 0; min-height: 132px; padding: 18px 6px 8px; border: 2px solid #b19a70; border-radius: 3px; background: #e5d6b1; color: #2c3e31; display: grid; grid-template-rows: 48px auto auto; justify-items: center; align-content: start; gap: 8px; cursor: pointer; }
.recipe-card .item-icon { width: 48px; height: 48px; min-width: 48px; min-height: 48px; flex: 0 0 48px; font-size: 32px; overflow: hidden; }
.recipe-card b { display: block; width: 100%; min-width: 0; font-size: 11px; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
.recipe-card small { font-size: 9px; margin-top: 4px; color: #6f654f; }
.recipe-card.locked { background: #ded8c4; }
.recipe-card.learned small { color: #3a6635; }
.recipe-card.selected { border-color: #b77a2e; background: #ffedbc; box-shadow: 0 0 0 2px #e6bc6c; }
.catalog-badge { position: absolute; top: 3px; right: 4px; font-size: 8px; color: #6c5940; font-weight: bold; }
.recipe-card.blueprint-card { background: #d9e7e6; border-color: #829fa9; }
.recipe-card.blueprint-card.selected { background: #e1f3f3; border-color: #49859c; box-shadow: 0 0 0 2px #a4d1dc; }
.recipe-card.blueprint-card.locked .item-icon { opacity: .45; }
.blueprint-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.recipe-details { margin-top: 8px; padding: 6px; border: 1px solid #ad936a; background: #efe2c2; }
.ingredient-grid:has(.ingredient:nth-child(3)) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ingredient-grid:has(.ingredient:nth-child(3)) .ingredient { min-width: 0; }
.recipe-output { display: flex; align-items: center; gap: 12px; padding: 4px 2px 10px; }
.recipe-output > .item-icon { width: 48px; height: 48px; flex: 0 0 48px; overflow: hidden; }
.recipe-output > span:not(.item-icon) { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.recipe-card .item-icon img,.recipe-output .item-icon img,.ingredient .item-icon img { display: block; max-width: 100%; max-height: 100%; }
.recipe-output b { font-size: 14px; }
.recipe-output small { display: block; margin-top: 4px; font-size: 11px; color: #6e6148; }
.level-badge { display: inline-block; margin-left: 8px; border-radius: 3px; background: #d8c8a4; padding: 2px 5px; }
.ingredient-grid { display: flex; gap: 6px; flex-wrap: wrap; }
.ingredient { flex: 1; min-width: 60px; display: grid; justify-items: center; gap: 2px; padding: 4px 3px; border: 1px solid #77935e; background: #d9e5bd; color: #37542c; }
.ingredient > .item-icon { width: 40px; height: 40px; font-size: 30px; overflow: hidden; }
.ingredient.missing { border-color: #bd7861; background: #eed0bd; color: #8a3c2d; }
.ingredient b { font-size: 12px; } .ingredient small { font-size: 9px; }
.recipe-action { width: 100%; margin-top: 10px; padding: 7px; border: 2px solid #477340; background: #597f46; color: #fff8dc; font-weight: bold; cursor: pointer; border-radius: 3px; }
.recipe-action:disabled { background: #d0c4ab; border-color: #a99575; color: #77664a; cursor: not-allowed; }
.recipe-lock { margin-top: 9px; color: #466c84; font-size: 11px; }

.empty-state { color: #776b55; font: italic 11px Georgia, serif; }
.companion-info { display: flex; align-items: center; gap: 9px; }
.creature-portrait { width: 42px; height: 42px; display: grid; place-items: center; border: 2px solid #567b54; border-radius: 50%; color: #24452e; background: #9ccc76; font-weight: 900; }
.companion-command { width: 100%; margin-top: 8px; padding: 6px; border: 2px solid #75865c; color: #304331; background: #c9d38c; font-size: 9px; font-weight: 900; text-align: center; text-transform: uppercase; }
.discoveries { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.discovery { padding: 5px; border: 1px solid #a88e61; color: #40513e; background: #ead9af; font-size: 9px; font-weight: 900; }
.discovery.lore { grid-column: 1 / -1; color: #46535e; background: #d8dfbd; font: italic 10px Georgia, serif; }
.goals { display: grid; gap: 5px; }
.goal { display: grid; grid-template-columns: 15px 1fr; gap: 6px; align-items: center; padding: 5px; border: 1px solid #b99b66; background: #ead9af; font-size: 9px; font-weight: 900; }
.goal.done { color: #3c6540; background: #d4dda4; }

.interaction-prompt, .toast {
  position: absolute;
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  padding: 7px 12px;
  border: 2px solid #342a1d;
  border-radius: 4px;
  color: #2c2b23;
  background: #fff0bd;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .25);
  font-size: 12px;
  font-weight: 900;
  pointer-events: none;
}
.interaction-prompt { bottom: 62px; }
.toast { top: 16px; transition: opacity .2s, transform .2s; }
.hidden { display: none !important; }
.class-status { padding: 10px; color: #e8d497; font-size: 12px; line-height: 1.5; background: #24392d; }
.combat-reward { position: fixed; inset: 0; z-index: 105; display: grid; place-items: center; padding: 20px; background: #09130fe0; color: #f5df9d; font-family: monospace; }
.combat-reward article { width: min(480px,100%); padding: 28px; border: 3px double #b69a58; background: #182c26; text-align: center; box-shadow: 0 10px 40px #0009; }
.combat-reward small { display: block; letter-spacing: 4px; color: #c2ad79; }
.combat-reward img { display: block; margin: 18px auto; image-rendering: pixelated; object-fit: contain; }
.combat-reward h2 { font-size: 24px; }
.combat-reward p { line-height: 1.8; font-size: 13px; }
.combat-reward button { margin-top: 12px; padding: 12px 26px; border: 2px solid #b79a57; background: #e3c986; color: #23392d; font-weight: bold; cursor: pointer; }
.class-choice { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: #10221ce8; overflow: auto; }
.class-choice-body { width: min(960px, 100%); text-align: center; color: #f8e6b5; }
.class-choice-body h2 { font-size: 32px; margin: 10px 0; }
.class-cards { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 420px; margin: 24px auto 0; }
.class-cards button { display: flex; flex-direction: column; padding: 22px; border: 3px solid #a58c51; background: #243c30; color: #f8e6b5; text-align: left; line-height: 1.6; cursor: pointer; }
.class-cards button b { margin-top: auto; padding-top: 12px; }
.class-cards button:hover, .class-cards button:focus-visible { background: #38573c; border-color: #f4d788; }
.class-cards h3 { font-size: 21px; margin: 12px 0; }
.class-symbol { display: block; min-height: 64px; font-size: 42px; color: #d6cb87; }
@media (max-width: 700px) { .class-cards { grid-template-columns: 1fr; } .class-choice { align-items: start; } }
.craft-storage-status { display: block; padding: 8px 4px; color: #d9e9b5; line-height: 1.4; }

.tame-menu {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  width: min(390px, 86%);
  padding: 10px;
  transform: translate(-50%, -50%);
  border: 3px solid #142b26;
  color: #29382f;
  background: #f4e8c8;
  box-shadow: inset 0 0 0 2px #cbb789, 0 12px 30px rgba(0,0,0,.45);
}
.tame-menu-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 7px; border-bottom: 2px dotted #a98f63; font-weight: 900; text-transform: uppercase; }
.tame-menu-heading button { width: 26px; height: 26px; border: 0; color: #f2dfb6; background: #77483a; cursor: pointer; font-weight: 900; }
.tame-menu-status { margin: 8px 0; color: #6d624f; font-size: 11px; }
.tame-menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tame-menu-actions button, .tame-inventory button { padding: 8px; border: 2px solid #8b7652; color: #293a30; background: #dbc98e; cursor: pointer; font-weight: 900; }
.tame-inventory { margin-top: 8px; padding: 8px; border: 2px solid #9d865f; background: #e8d8b3; font-size: 11px; }
.tame-inventory-row { display: flex; justify-content: space-between; gap: 6px; align-items: center; margin-bottom: 5px; }
.chest-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chest-item-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; min-height: 180px; }
.chest-item-grid .slot { min-width: 0; min-height: 100px; padding: 10px 4px 18px; position: relative; cursor: grab; }
.chest-item-grid .slot .item-icon { width: 64px; height: 64px; max-width: 90%; }
.chest-item-grid .slot small { position: absolute; right: 3px; bottom: 2px; font-weight: bold; }
.structure-menu.storage-open { left: auto; transform: translateY(-50%); width: min(520px,calc(100vw - 350px)); max-height: 85vh; overflow: auto; font-size: 13px; }
.storage-open .tame-inventory { font-size: 13px; }
.storage-open .tame-menu-status { font-size: 13px; }
.storage-open .slot .name { font-size: 12px; }
.storage-open .slot small { font-size: 13px; }
.storage-open .chest-column h4 { font-size: 12px; }
.inventory .slot .name { font-size: 11px; }
.equipment-slot > .item-icon { width: 40px; height: 40px; }
.artifact-card { display: flex; align-items: center; gap: 8px; padding: 8px; }
.artifact-card .item-icon { width: 64px; height: 64px; flex: 0 0 64px; }
.artifact-card small { display: block; color: #66745b; margin-top: 5px; }
@media(max-width:650px) { .structure-menu.storage-open { left: 12px; right: auto !important; top: 10px; transform: none; width: min(290px,48vw); } }
.chest-column h4 { margin: 0 0 5px; font-size: 10px; text-transform: uppercase; color: #5d4d37; }
.mini-actions { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.mini-actions button { padding: 3px 5px; font-size: 9px; }

.hotbar {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 4;
  display: flex;
  gap: 4px;
  transform: translateX(-50%);
  pointer-events: auto;
}
.hotbar-slot {
  position: relative;
  width: 46px;
  height: 43px;
  display: grid;
  place-items: center;
  border: 2px solid #263b31;
  border-radius: 3px;
  color: #29372f;
  background: rgba(245, 228, 184, .9);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
  font-size: 20px;
  cursor: pointer;
}
.hotbar-slot:hover { transform: translateY(-2px); filter: brightness(1.08); }
.hotbar-slot.drop-hover { border-color: #8df08a; box-shadow: 0 0 0 3px rgba(141, 240, 138, .45), 0 4px 0 rgba(0,0,0,.35); transform: translateY(-5px); }
.hotbar-slot.selected { border-color: #f4d36f; transform: translateY(-3px); box-shadow: 0 0 0 2px #624c28, 0 4px 0 rgba(0,0,0,.35); }
.hotbar-slot .key { position: absolute; top: 1px; left: 3px; color: #6b5a40; font-size: 8px; font-weight: 900; }
.hotbar-slot .amount { position: absolute; right: 3px; bottom: 1px; font-size: 10px; font-weight: 900; }
.hotbar-slot .bow-volley { position: absolute; top: -16px; left: -2px; right: -2px; border-radius: 2px; padding: 2px; color: #f6df9a; background: #203c32; font: bold 8px monospace; text-align: center; pointer-events: none; }

.controls {
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
  min-height: 58px;
  color: #9ab9a4;
  font-size: 11px;
}
.controls kbd { padding: 3px 5px; border: 1px solid #567367; border-bottom-width: 2px; border-radius: 3px; color: #e9dcae; background: #233d37; }
.controls button { padding: 6px 9px; border: 1px solid #5e806f; border-radius: 3px; color: #dff2df; background: #2f5c49; cursor: pointer; font-size: 11px; font-weight: bold; }
.controls #fullscreenButton { margin-left: auto; }
.controls .danger { margin-left: 0; color: #f6d3c9; background: #713f35; border-color: #9a6154; }

.cave-rewards { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(6, 18, 25, .9); overflow-y: auto; }
.cave-rewards.hidden { display: none; }
.cave-rewards-content { width: min(800px, 100%); text-align: center; }
.cave-rewards h2 { margin: 0 0 22px; color: #d9f6ff; font-size: clamp(20px, 3vw, 30px); letter-spacing: 1px; }
.reward-posters { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.reward-poster { padding: 25px 22px; border: 5px double #7c6038; background: linear-gradient(140deg, #fff0c7, #d8bd83); color: #3d352b; box-shadow: 0 8px 30px #0008, inset 0 0 30px #9c783333; }
.berry-poster { border-color: #51713f; background: linear-gradient(140deg, #eff1c4, #bed39f); }
.reward-eyebrow { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 900; }
.reward-art { height: 100px; margin: 16px auto 0; display: grid; place-items: center; font-size: 62px; }
.cannon-art img { width: 130px; max-height: 100%; object-fit: contain; image-rendering: pixelated; }
.reward-poster h3 { margin: 10px 0; font-size: 27px; }
.reward-poster p { font-size: 14px; line-height: 1.65; }
.reward-stamp { margin-top: 20px; padding: 9px 5px; border-top: 2px solid #7c603855; border-bottom: 2px solid #7c603855; font-size: 12px; font-weight: 900; }
.reward-xp { display: block; margin-top: 12px; font-size: 23px; color: #775119; }
.reward-poster small { display: block; margin-top: 12px; line-height: 1.6; font-size: 11px; }
#caveRewardsClose, #platformRewardsClose { margin-top: 24px; padding: 12px 28px; border: 2px solid #9bd3a1; border-radius: 3px; background: #305c48; color: #fff4d6; font-family: inherit; font-size: 14px; font-weight: bold; cursor: pointer; }
#caveRewardsClose:focus-visible, #platformRewardsClose:focus-visible { outline: 3px solid #ffe39a; outline-offset: 4px; }
.reward-dismiss-hint { display: block; margin-top: 10px; color: #b4ccd0; }
@media (max-width: 600px) { .reward-posters { grid-template-columns: 1fr; } .cave-rewards { padding: 16px; place-items: start center; } .reward-art { height: 75px; } }

@media (max-width: 900px) {
  body { overflow: auto; height: auto; min-height: 100vh; }
  .game-shell { display: flex; flex-direction: column; height: auto; min-height: 100vh; }
  .play-area { display: flex; flex-direction: column; }
  .canvas-frame { height: 65vh; flex: none; }
  .sidebar.inventory-open { display: flex; flex-direction: column; overflow: hidden; }
}

@media (max-width: 600px) {
  .game-shell { width: 100vw; margin: 0; }
  .titlebar { border-radius: 0; }
  .world-status { display: none; }
  .sidebar { grid-template-columns: 1fr; }
  .controls { border-radius: 0; }
  .health-hud { bottom: 64px; width: 190px; }
}
.telescope-controls { position: absolute; z-index: 15; top: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px; color: #283d32; background: #f8ecc8; border: 2px solid #52674e; box-shadow: 0 3px 8px #0005; font-size: 12px; }
.telescope-controls button { padding: 5px 8px; white-space: nowrap; }
.workshop-recipe { grid-column: 1 / -1; padding: 7px; border: 1px solid #9d8960; background: #e9ddb8; }
.structure-menu.shop-posters { width: min(780px,92%); max-height: 88vh; overflow: auto; }
.shop-posters .tame-menu-actions { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.shop-poster { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 14px 10px; border: 2px solid #a68a56; background: #e9dab4; text-align: center; min-width: 0; box-shadow: inset 0 0 0 3px #f9eccc; }
.shop-item-art { display: grid; place-items: center; height: 112px; width: 100%; }
.shop-item-art .item-icon { width: 108px; height: 108px; }
.shop-item-art img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.shop-poster > b { font-size: 14px; }
.shop-poster p { font-size: 11px; line-height: 1.6; margin: 0; min-height: 54px; }
.shop-poster .workshop-costs { margin-top: auto; justify-content: center; }
.shop-poster .workshop-cost { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.shop-poster .workshop-cost .item-icon { width: 25px; height: 25px; }
.shop-poster button { width: 100%; margin-top: 4px; }
.shop-poster.sold-out .shop-item-art { filter: grayscale(.8); opacity: .65; }
@media(max-width:750px) { .shop-posters .tame-menu-actions { grid-template-columns: repeat(2,minmax(0,1fr)); } .shop-item-art { height: 92px; } .shop-item-art .item-icon { width: 88px; height: 88px; } }
.workshop-costs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 6px; }
.workshop-cost { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 3px; font-size: 11px; border: 1px solid #9b9b70; background: #cad3a7; }
.workshop-cost.missing { border-color: #ba8062; background: #ecd2b7; }
.workshop-recipe + button { grid-column: 1 / -1; }

.opening-scene { position: fixed; inset: 0; z-index: 2000; display: flex; justify-content: center; align-items: end; padding: clamp(18px,4vw,48px); color: #eee4cd; }
.opening-scene.opening-story-mode { align-items: center; background: #000; overflow-y: auto; }
.opening-rain { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.opening-story-mode .opening-prologue { position: relative; z-index: 1; }
.opening-scene.opening-name-mode { align-items: center; background: radial-gradient(ellipse at center,#14201be6,#030806fa); }
.opening-name-prompt { width: min(550px,100%); text-align: center; padding: 30px 10px; }
.opening-name-prompt h2 { font: bold clamp(24px,4vw,36px)/1.3 "Courier New",monospace; margin: 22px 0; color: #eddbb3; }
.opening-map-mode::before,.opening-map-mode::after { content: ""; position: absolute; left: 0; right: 0; background: #000; pointer-events: none; }
.opening-map-mode { animation: opening-map-reveal .55s ease-out; }
@keyframes opening-map-reveal { from { background-color: #000; } to { background-color: transparent; } }
.opening-map-mode::before { top: 0; height: 70px; }
.opening-map-mode::after { bottom: 0; height: 22px; }
.opening-arrival { position: absolute; top: 48%; left: 0; width: 100%; text-align: center; text-shadow: 0 3px 10px #000; animation: opening-arrival-in 1.4s ease both; }
.opening-arrival h2 { font: clamp(23px,4vw,40px) Georgia,serif; margin: 10px; color: #eddbb3; letter-spacing: .12em; }
.opening-word { opacity: 0; animation: opening-word-in .45s ease-out forwards; }
.opening-next-pending { visibility: hidden; pointer-events: none; }
.opening-story-copy .opening-word { animation-duration: 1.1s; }
.opening-dialogue-paragraph { display: block; }
.opening-dialogue-paragraph + .opening-dialogue-paragraph { margin-top: 1em; }
@keyframes opening-word-in { to { opacity: 1; } }
@keyframes opening-arrival-in { 0% { opacity: 0; } 30%,80% { opacity: 1; } 100% { opacity: 0; } }
.opening-prologue { width: min(760px,100%); text-align: center; margin: auto; padding: 36px 0; }
.opening-eyebrow { display: block; font: 11px/1.6 monospace; text-transform: uppercase; letter-spacing: .22em; color: #bea97a; }
.opening-story-copy { margin: 28px auto; font: clamp(16px,1.8vw,21px)/1.7 "Courier New",monospace; text-shadow: 2px 2px #000; }
.opening-story-copy p { margin: 0 0 22px; }
.opening-name-label { display: block; margin: 28px auto 18px; font: 12px/1.6 monospace; color: #aa9b80; }
.opening-name-label input { display: block; width: 220px; max-width: 100%; margin: 8px auto 0; padding: 8px; border: 0; border-bottom: 2px solid #756446; border-radius: 0; background: #0b0b0b; color: #eee4cd; text-align: center; font: 18px "Courier New",monospace; }
.opening-scene button { padding: 10px 24px; border: 2px solid #87714b; border-radius: 0; box-shadow: inset 2px 2px #414833,inset -2px -2px #0c120e; background: #1c211c; color: #f5e7c7; font: bold 14px "Courier New",monospace; cursor: pointer; }
.opening-scene button:focus-visible,.opening-scene input:focus-visible { outline: 2px solid #e2c785; outline-offset: 4px; }
.opening-conversation { width: min(800px,100%); max-height: 51vh; overflow-y: auto; padding: clamp(18px,3vw,30px); border: 3px solid #9c8150; background: rgba(9,17,19,.96); box-shadow: 0 0 0 3px #1b2019,inset 0 0 0 2px #3e4938; animation: opening-dialogue-in .4s ease-out; }
@keyframes opening-dialogue-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.opening-conversation h2 { margin: 0 0 15px; font: bold 23px "Courier New",monospace; color: #f2dca6; text-shadow: 2px 2px #000; }
.opening-conversation p { margin: 0; white-space: pre-line; font: clamp(15px,1.5vw,18px)/1.65 "Courier New",monospace; }
.opening-conversation p.narration { font-style: italic; color: #c4bcac; }
.opening-dialogue-footer { display: flex; justify-content: flex-end; align-items: center; gap: 20px; margin-top: 22px; }
.opening-dialogue-content { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; }
.opening-dialogue-content.with-portrait { grid-template-columns: 88px minmax(0,1fr); }
.opening-portrait { width: 88px; height: 88px; padding: 4px; border: 2px solid #9c8150; box-shadow: inset 0 0 0 2px #3e4938; background: #10171a; }
.opening-portrait img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.combat-skill-card { padding: 10px; font-size: 12px; line-height: 1.6; }
.combat-skill-card small { display: block; color: #5b7065; }
.combat-skill-card progress { width: 100%; height: 8px; accent-color: #714187; }
@media(max-width:600px) { .opening-dialogue-content { gap: 12px; } .opening-dialogue-content.with-portrait { grid-template-columns: 60px minmax(0,1fr); } .opening-portrait { width: 60px; height: 60px; } }
.alchemy-reward { width: min(470px,100%); text-align: center; align-self: center; margin: auto; border: 2px solid #b89a58; }
.alchemy-reward img { image-rendering: pixelated; display: block; margin: 6px auto; }
.alchemy-reward button { margin-top: 22px; }
#devilReward { width: min(740px,100%); }
.devil-light-preview { position: relative; width: min(400px,100%); height: 140px; overflow: hidden; margin: 20px auto; background: #e8dfca; }
.alchemy-reward .devil-light-preview img { position: absolute; width: 384px; height: 384px; max-width: none; left: calc(50% - 193.5px); top: calc(50% - 180px); margin: 0; image-rendering: pixelated; }
.devil-light-preview.painting-preview { width: 160px; height: 170px; background: none; }
.alchemy-reward .devil-light-preview.painting-preview img { position: static; width: 160px; height: 160px; object-fit: contain; image-rendering: pixelated; }
.string-lights-icon { position: relative; overflow: hidden; }
.item-icon.string-lights-icon { width: 68px; height: 34px; }
.item-icon.string-lights-icon img { position: absolute; width: 119.626%; height: auto; max-width: none; max-height: none; left: -10.28%; top: 50%; transform: translateY(-46.875%); object-fit: contain; }
.recipe-card:has(.string-lights-icon),.inventory .slot:has(.string-lights-icon),.chest-item-grid .slot:has(.string-lights-icon) { grid-column: span 2; }
.recipe-card .string-lights-icon { width: 128px; max-width: calc(100% - 8px); height: 32px; flex-shrink: 0; }
.recipe-output .string-lights-icon { width: 136px; max-width: 55%; height: 32px; flex: 0 1 136px; }
/* A small parchment-colored arrow; keep text-entry and item-drag feedback. */
html,body,body canvas { cursor: url("assets/ui/pixel-pointer.svg") 4 3, auto; }
.workshop-recipe > small { display: block; margin: 7px 0; }
.alchemy-progress { display: flex; align-items: center; gap: 9px; margin: 12px 0; }
.alchemy-craft-icon { display: grid; place-items: center; width: 36px; height: 38px; flex-shrink: 0; border: 1px solid #725779; background: #fff3d5; color: #765078; font-size: 22px; }
.alchemy-progress > div { flex: 1; min-width: 0; }
.alchemy-progress > progress { flex: 1; min-width: 0; width: 0; }
.alchemy-progress > .item-icon { flex: 0 0 32px; width: 32px; height: 32px; }
.alchemy-progress small { display: block; margin-bottom: 4px; }
.alchemy-progress progress { display: block; width: 100%; height: 14px; border: 2px solid #b385c3; background: #21172b; accent-color: #ef72ff; opacity: 1; }
.alchemy-progress progress::-webkit-progress-bar { background: #21172b; }
.alchemy-progress progress::-webkit-progress-value { background: #ef72ff; }
.alchemy-progress progress::-moz-progress-bar { background: #ef72ff; }
#incubatorProgressBar { accent-color: #72ff9a; }
#incubatorProgressBar::-webkit-progress-value { background: #72ff9a; }
#incubatorProgressBar::-moz-progress-bar { background: #72ff9a; }
.alchemy-craft-icon .item-icon { width: 28px; height: 32px; opacity: 1; }
.workshop-recipe > b .item-icon { width: 22px; height: 24px; vertical-align: middle; margin-right: 3px; }
.hotbar-slot .item-icon { width: 36px; height: 36px; }
.hotbar-slot .item-icon.string-lights-icon { width: 48px; }
@media(max-width:600px) { .opening-scene { padding: 25px 15px; } .opening-conversation { max-height: 51vh; } .opening-story-copy { line-height: 1.5; } }
@media(prefers-reduced-motion:reduce) { .opening-word,.opening-story-copy .opening-word { animation-duration: .05s; } .opening-conversation { animation: none; } }