:root {
  color-scheme: dark;
  --ink: #2a1812;
  --brown: #4a2a1b;
  --wood: #7a4528;
  --cream: #f2d7a7;
  --paper: #fff0cb;
  --gold: #d79a32;
  --red: #c93627;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% -10%, #7a4528 0, transparent 42rem),
    repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 1px, transparent 1px 4px),
    var(--ink);
  color: var(--paper);
  font-family: Georgia, "Times New Roman", serif;
}

button, kbd { font: inherit; }
button { cursor: pointer; }

.game-shell {
  width: min(100% - 24px, 1060px);
  margin: 0 auto;
  padding: 22px 0 32px;
}

.titlebar, .help, .top-controls { display: flex; align-items: center; }
.titlebar { justify-content: space-between; margin-bottom: 12px; }
.eyebrow { margin: 0 0 2px; color: var(--gold); font: 700 12px/1.2 Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(23px, 4vw, 36px); font-weight: 500; }

.quiet-button, .sound-button, .dialogue button, .complete-panel button {
  border: 3px solid var(--ink);
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px #bd7136, 0 3px 0 rgba(0,0,0,.35);
  background: var(--cream);
  color: var(--ink);
  font-weight: 700;
  padding: 9px 14px;
}
.quiet-button:hover, .sound-button:hover, .dialogue button:hover, .complete-panel button:hover { background: var(--paper); }

.game-frame {
  position: relative;
  overflow: visible;
  border: 6px solid var(--ink);
  border-radius: 8px;
  box-shadow: 0 0 0 3px var(--wood), 0 16px 40px rgba(0,0,0,.45);
  background: #789451;
}

canvas {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  outline: 0;
}

.npc-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: auto;
  pointer-events: none;
}

#game { border-radius: 2px; }

.dialogue, .complete-panel { z-index: 20; }

.top-controls { position: absolute; top: 12px; right: 12px; z-index: 8; gap: 8px; }
.day-card, .sound-button {
  border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 2px #bd7136, 0 3px 0 rgba(0,0,0,.3);
  background: var(--cream);
  color: var(--ink);
}
.day-card { min-width: 64px; border-radius: 5px; padding: 4px 10px; text-align: center; }
.day-card span { display: block; font: 700 10px Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.day-card strong { font-size: 22px; }
.time-card { min-width: 104px; }
.time-card strong { font-size: 17px; line-height: 27px; }
.weather-card { min-width: 84px; }
.weather-card strong { font-size: 14px; line-height: 27px; }
.sound-button { padding: 8px 10px; font-size: 12px; }

.minimap-toggle {
  position: absolute;
  top: 76px;
  right: 12px;
  z-index: 7;
  width: 186px;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px #bd7136, 0 4px 0 rgba(0,0,0,.3);
  background: #321c13;
  padding: 0;
  color: var(--paper);
}
.minimap-toggle canvas { width: 180px; height: 108px; }
.minimap-toggle span {
  position: absolute;
  right: 6px;
  bottom: 5px;
  border: 1px solid var(--cream);
  border-radius: 3px;
  background: rgba(42,24,18,.86);
  padding: 3px 6px;
  font: 700 10px Arial, sans-serif;
  text-transform: uppercase;
}

.minimap-panel {
  position: absolute;
  inset: 7%;
  z-index: 18;
  display: flex;
  flex-direction: column;
  border: 5px solid var(--ink);
  border-radius: 8px;
  box-shadow: inset 0 0 0 3px #bd7136, 0 14px 48px rgba(0,0,0,.55);
  background: var(--cream);
  padding: 16px;
  color: var(--ink);
}
.minimap-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.minimap-heading h2 { margin: 2px 0 8px; color: #8e1f1b; font-size: 26px; }
.minimap-heading button {
  border: 3px solid var(--ink);
  border-radius: 5px;
  background: var(--paper);
  padding: 7px 12px;
  color: var(--ink);
  font-weight: 700;
}
.minimap-area-tabs { display: flex; gap: 8px; margin: 0 0 8px; }
.minimap-area-tabs button, .minimap-landmarks button {
  border: 2px solid var(--wood);
  border-radius: 4px;
  background: #e7c58f;
  padding: 5px 9px;
  color: var(--ink);
  font: 700 11px Arial, sans-serif;
}
.minimap-area-tabs button[aria-pressed="true"], .minimap-landmarks button.selected { border-color: #8e1f1b; background: var(--paper); }
.minimap-area-tabs button:disabled { cursor: not-allowed; filter: grayscale(1); opacity: .55; }
.minimap-panel canvas {
  min-height: 0;
  flex: 1;
  border: 3px solid var(--ink);
  border-radius: 5px;
  background: #789451;
}
.minimap-note { margin: 8px 0 0; font: 700 11px/1.3 Arial, sans-serif; }
.minimap-landmarks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.workshop-panel {
  position: absolute;
  inset: 9% 15%;
  z-index: 20;
  overflow: auto;
  border: 5px solid var(--ink);
  border-radius: 8px;
  box-shadow: inset 0 0 0 3px #bd7136, 0 14px 48px rgba(0,0,0,.55);
  background: var(--cream);
  padding: 18px;
  color: var(--ink);
}
.workshop-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.workshop-heading h2 { margin: 3px 0 8px; color: #8e1f1b; font-size: 27px; }
.workshop-heading button, .workshop-recipes button {
  border: 3px solid var(--ink);
  border-radius: 5px;
  background: var(--paper);
  padding: 7px 12px;
  color: var(--ink);
  font-weight: 700;
}
.workshop-pouch { margin: 5px 0 12px; border: 2px solid var(--wood); border-radius: 5px; background: rgba(122,69,40,.12); padding: 8px 10px; font: 700 12px/1.4 Arial, sans-serif; }
.workshop-recipes { display: grid; gap: 9px; }
.workshop-recipe { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; border: 2px solid var(--wood); border-radius: 6px; background: #efd5a6; padding: 10px; }
.workshop-recipe strong, .workshop-recipe span { display: block; }
.workshop-recipe span { margin-top: 3px; font: 12px/1.35 Arial, sans-serif; }
.workshop-recipe small { color: #8e1f1b; font: 700 11px Arial, sans-serif; }
.workshop-recipe button { grid-column: 2; grid-row: 1 / span 2; }
.workshop-recipe button:disabled { cursor: not-allowed; filter: grayscale(.7); opacity: .55; }

.dialogue {
  position: absolute;
  left: 4%; right: 4%; bottom: 4%;
  display: flex;
  align-items: flex-end;
  min-height: 150px;
  border: 5px solid var(--ink);
  border-radius: 7px;
  box-shadow: inset 0 0 0 3px #bd7136, 0 8px 24px rgba(0,0,0,.35);
  background: var(--cream);
  color: var(--ink);
  padding: 12px 16px 12px 150px;
}
.dialogue img { position: absolute; left: 12px; bottom: 0; width: 128px; height: 128px; object-fit: none; object-position: 0 0; image-rendering: pixelated; }
.dialogue-copy { width: 100%; }
#speaker { margin: 0 0 7px; color: #8e1f1b; font-weight: 700; }
#dialogueText { min-height: 43px; margin: 0 0 10px; font-size: 17px; line-height: 1.35; }
.dialogue button { padding: 7px 12px; }
.dialogue-actions { display: flex; justify-content: flex-end; gap: 9px; }
.cat-relationship {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px 13px;
  margin: 0 0 12px;
  border: 2px solid #bd7136;
  border-radius: 5px;
  background: rgba(122,69,40,.1);
  padding: 8px 10px;
}
.cat-hearts { color: #c93627; font: 700 22px/1 Arial, sans-serif; letter-spacing: 2px; white-space: nowrap; }
#catPerk { font: 700 12px/1.35 Arial, sans-serif; }
#petCatButton:disabled { cursor: default; filter: grayscale(.65); opacity: .62; }

.dialogue.cat-dialogue {
  height: 46%;
  min-height: 220px;
}

.complete-panel {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(88%, 430px);
  border: 5px solid var(--ink);
  border-radius: 8px;
  box-shadow: inset 0 0 0 3px #bd7136, 0 12px 42px rgba(0,0,0,.5);
  background: var(--cream);
  color: var(--ink);
  padding: 28px;
  text-align: center;
}
.complete-panel h2 { margin: 5px 0 8px; color: #8e1f1b; font-size: 30px; }
.complete-panel p:not(.eyebrow) { margin: 0 0 20px; font-size: 17px; }
.day-summary-panel { width: min(90%, 520px); }
.pause-panel { width: min(86%, 450px); }

.hidden { display: none !important; }

.save-status { margin: 10px 0; color: var(--gold); font: 700 13px/1.4 Arial, sans-serif; }
.save-status:empty { display: none; }
.profile-status { max-height: 220px; overflow: auto; padding: 10px; background: var(--ink); font: 12px/1.4 monospace; }
button:focus-visible, #game:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.touch-controls { display: none; }

.inventory-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(70px, 1fr)) minmax(150px, 2fr);
  gap: 8px;
  margin-top: 12px;
  font-family: Arial, sans-serif;
}
.inventory-strip > div {
  border: 2px solid #7a4528;
  border-radius: 5px;
  background: #321c13;
  padding: 7px 10px;
}
.inventory-strip span { color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.inventory-strip strong { display: block; margin-top: 2px; color: var(--paper); font-size: 17px; }
.inventory-strip .energy { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; }
.inventory-strip .energy strong { grid-column: 2; grid-row: 1; margin: 0; font-size: 13px; }
.inventory-strip i { grid-column: 1 / -1; display: block; height: 8px; margin-top: 5px; border: 1px solid var(--ink); background: #1d100c; }
.inventory-strip b { display: block; width: 100%; height: 100%; background: #789451; transition: width .18s ease; }

.daily-tasks {
  margin-top: 12px;
  border: 2px solid #7a4528;
  border-radius: 7px;
  background: #321c13;
  padding: 10px 12px 12px;
  font-family: Arial, sans-serif;
}
.daily-tasks-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.daily-tasks-heading span { display: block; color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.daily-tasks-heading strong { color: var(--paper); font-family: Georgia, serif; font-size: 19px; }
.daily-tasks-heading small { color: var(--cream); font-weight: 700; }
.daily-tasks ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 9px 0 0; padding: 0; list-style: none; }
.daily-tasks li { border: 1px solid #7a4528; border-radius: 5px; background: #2a1812; padding: 8px 10px; color: var(--cream); font-size: 12px; line-height: 1.35; }
.daily-tasks li.complete { border-color: #789451; background: #26311e; }
.daily-tasks li strong, .daily-tasks li span { display: block; }
.daily-tasks li strong { color: var(--paper); font-size: 13px; }
.daily-tasks li span { margin-top: 3px; }
.daily-tasks li small { display: block; margin-top: 6px; color: var(--gold); font-weight: 700; }

.save-recovery { margin-top: 16px; text-align: left; }
.save-recovery label { font-weight: bold; }
.complete-panel .save-recovery p { font-size: 13px; margin: 6px 0 10px; }
.save-recovery textarea { box-sizing: border-box; width: 100%; resize: vertical; font: 12px monospace; }
.save-recovery > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.save-recovery button { font-size: 12px; padding: 8px; }
.pause-panel { position: fixed; max-height: calc(100dvh - 32px); overflow: auto; }

.help {
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
  color: var(--cream);
  font: 700 13px Arial, sans-serif;
}
.help div { display: flex; align-items: center; gap: 6px; }
kbd { min-width: 28px; border: 1px solid #aa704a; border-bottom-width: 3px; border-radius: 4px; background: var(--brown); padding: 3px 7px; color: var(--paper); text-align: center; }
#statusText { flex: 1 1 280px; margin: 0; color: var(--gold); text-align: right; }

@media (max-width: 650px) {
  .game-shell { width: min(100% - 12px, 1060px); padding-top: 10px; }
  .titlebar { align-items: flex-end; }
  .quiet-button { padding: 6px 9px; font-size: 12px; }
  .top-controls { top: 5px; right: 5px; transform: scale(.8); transform-origin: top right; }
  .minimap-toggle { top: 58px; right: 5px; transform: scale(.72); transform-origin: top right; }
  .minimap-panel { inset: 4%; padding: 10px; }
  .minimap-heading h2 { font-size: 20px; }
  .workshop-panel { inset: 4%; padding: 12px; }
  .workshop-heading h2 { font-size: 21px; }
  .workshop-recipe { grid-template-columns: 1fr; }
  .workshop-recipe button { grid-column: 1; grid-row: auto; }
  .dialogue { left: 2%; right: 2%; bottom: 2%; min-height: 116px; padding: 9px 10px 9px 112px; }
  .dialogue img { left: 8px; width: 128px; height: 128px; object-fit: none; transform: scale(.75); transform-origin: left bottom; }
  #dialogueText { min-height: auto; font-size: 14px; }
  .cat-relationship { grid-template-columns: 1fr; gap: 5px; padding: 6px 8px; }
  .cat-hearts { font-size: 17px; }
  #statusText { flex-basis: 100%; text-align: left; }
  .inventory-strip { grid-template-columns: repeat(2, 1fr); }
  .inventory-strip .energy { grid-column: 1 / -1; }
  .daily-tasks ol { grid-template-columns: 1fr; }
}

@media (pointer: coarse), (max-width: 650px) {
  .help div { display: none; }
  .touch-controls { display: grid; gap: 10px; margin-top: 14px; }
  .touch-tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .touch-tools button, .touch-actions button {
    min-height: 46px;
    border: 2px solid #aa704a;
    border-bottom-width: 4px;
    border-radius: 6px;
    background: var(--brown);
    color: var(--paper);
    font-weight: 700;
    touch-action: none;
  }
  .touch-tools button.selected { border-color: var(--gold); background: var(--wood); }
  .touch-actions { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
  .dpad { display: grid; grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(2, 46px); gap: 5px; }
  .dpad button[data-move="arrowup"] { grid-column: 2; }
  .dpad button[data-move="arrowleft"] { grid-column: 1; grid-row: 2; }
  .dpad button[data-move="arrowdown"] { grid-column: 2; grid-row: 2; }
  .dpad button[data-move="arrowright"] { grid-column: 3; grid-row: 2; }
  .use-button { flex: 1; max-width: 180px; min-height: 74px !important; background: #8e1f1b !important; }
}

@media (max-width: 650px), (pointer: coarse) and (max-height: 500px) {
  .minimap-panel, .workshop-panel, .dialogue, .complete-panel {
    position: fixed;
    inset: 12px;
    width: auto;
    height: auto;
    max-height: calc(100dvh - 24px);
    overflow: auto;
    transform: none;
    z-index: 30;
  }
  .minimap-panel { display: block; }
  .minimap-panel canvas { flex: none; height: auto; min-height: 140px; aspect-ratio: 5 / 3; }
  .minimap-area-tabs { flex-wrap: wrap; }
  .dialogue, .dialogue.cat-dialogue { inset: auto 12px 12px; height: auto; min-height: 0; }
  .complete-panel { inset: 12px; margin: auto; height: fit-content; }
  .dialogue-actions { flex-wrap: wrap; }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  .game-shell { display: grid; grid-template-columns: minmax(0, 1fr) 184px; gap: 8px 12px; padding-top: 6px; }
  .titlebar { grid-column: 1 / -1; margin: 0; }
  .titlebar h1 { font-size: 20px; }
  .titlebar .eyebrow { display: none; }
  .game-frame { grid-column: 1; grid-row: 2; width: min(100%, calc((100dvh - 80px) * 5 / 3)); align-self: start; }
  .touch-controls { grid-column: 2; grid-row: 2; margin: 0; align-content: start; }
  .touch-actions { flex-direction: column; gap: 6px; }
  .touch-tools { gap: 4px; }
  .touch-tools button { font-size: 12px; }
  .use-button { width: 100%; min-height: 46px !important; }
  .help, .save-status, .inventory-strip, .daily-tasks { grid-column: 1 / -1; }
  .top-controls { top: 4px; right: 4px; transform: scale(.65); transform-origin: top right; }
  .minimap-toggle { top: 43px; right: 4px; transform: scale(.5); transform-origin: top right; }
}