:root {
  color-scheme: dark;
  --ink: #d7dec5;
  --muted: #96a88b;
  --accent: #e6c37c;
  --line: #354b35;
  --panel: #182a1e;
  --sidebar: 264px;
  font-family: 'Trebuchet MS', sans-serif;
  color: var(--ink);
  background: #101e16;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  height: 100dvh;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
}
body[data-debug-open="true"] { grid-template-columns: minmax(0, 1fr) var(--sidebar); gap: 12px; }
main { grid-column: 1; grid-row: 1; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
canvas { display: block; image-rendering: pixelated; background: #4f713b; box-shadow: 0 0 0 1px #435736; max-width: 100%; max-height: 100%; aspect-ratio: 1; }
button, summary { -webkit-tap-highlight-color: transparent; }
button {
  font: 12px/1.35 'Trebuchet MS', sans-serif;
  color: var(--ink);
  background: #203524;
  border: 1px solid #40553b;
  border-radius: 3px;
  min-height: 36px;
  padding: 8px 10px;
  cursor: pointer;
  touch-action: manipulation;
}
button:hover { color: #f2d799; background: #2c432a; border-color: #65794b; }
button:active { background: #354d2f; }
button[aria-pressed="true"] { color: #f2d799; background: #31462b; border-color: #87925c; box-shadow: inset 3px 0 #c1aa66; }
button:disabled { opacity: .48; cursor: default; }
button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button kbd { float: right; }
kbd { font: 10px/1.5 monospace; color: #c8bd93; }
#debug-panel {
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
}
.debug-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 12px 14px 16px; }
.identity { min-width: 0; }
.identity strong { display: block; color: var(--accent); font: bold 12px/1.5 monospace; letter-spacing: 1.8px; }
.identity span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.icon-button { width: 32px; min-height: 32px; padding: 2px; font-size: 20px; background: transparent; border-color: transparent; color: var(--muted); }
.debug-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 10px; gap: 2px; border-bottom: 1px solid var(--line); }
.debug-tabs button { min-width: 0; min-height: 40px; padding: 8px 3px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); font-size: 12px; }
.debug-tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: #f1d698; }
.debug-tabs button:focus-visible { outline-offset: -4px; }
.debug-scroll { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #40573b transparent; }
.debug-tab-panel { padding: 0 14px 14px; }
.control-group { display: grid; gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.control-group:last-child { border-bottom: 0; }
.control-group h2 { margin: 0 0 3px; color: #9aaa85; font: bold 10px/1.4 monospace; text-transform: uppercase; letter-spacing: 1.3px; }
.control-stack { display: grid; gap: 6px; }
.control-stack button, .control-group > button { width: 100%; text-align: left; }
.button-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.button-grid button { padding: 8px 5px; min-width: 0; }
.quiet-button { background: transparent; color: var(--muted); border-color: var(--line); }
.primary-button { color: #f0d8a3; background: #3b4930; border-color: #8a8b55; }
.control-note, .keyboard-hint { margin: 0; color: #91a184; font-size: 11px; line-height: 1.65; }
.keyboard-hint { padding-top: 12px; }
.field-recipes { margin-top: 9px; }
.field-recipes summary { padding: 5px 0 10px; color: #c6cba9; font-size: 11px; cursor: pointer; }
#field-status { margin: 4px 0 0; color: #a9b798; font: 11px/1.55 monospace; }
.rescue-steps { display: grid; gap: 6px; }
.rescue-step { color: #758a6b; font: 11px/1.45 monospace; }
.rescue-step.done { color: #acbd92; }
.rescue-step.current { color: #f2d799; font-weight: bold; }
.rescue-help { color: #aebe9f; font: 11px/1.5 monospace; }
.debug-status { display: grid; gap: 6px; padding: 13px 14px; background: #14251a; border-top: 1px solid var(--line); font: 10px/1.45 monospace; overflow-wrap: anywhere; }
#location { color: #d1cfaa; font-size: 11px; }
#water-status { color: #a7bb99; }
#water-status:empty { display: none; }
#seed { color: #788e70; }
.canvas-status { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: #879d7d; font-size: 9px; }
.status-dot { width: 4px; height: 4px; background: #a0b16e; }
#debug-quick-slots:empty { display: none; }
#debug-panel #pack-quick { position: static; inset: auto; width: 100%; transform: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
#debug-panel #pack-quick button { min-width: 0; width: 100%; padding: 7px; gap: 6px; box-shadow: none; font-size: 10px; text-align: left; }
#debug-panel #pack-quick img { width: 24px; height: 24px; }
#debug-panel #pack-quick button span:last-child { overflow: hidden; text-overflow: ellipsis; }
.debug-toggle { position: fixed; z-index: 25; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 7px; padding: 8px 12px; background: #1b3022; box-shadow: 0 2px 0 #0b1711; border-color: #586a45; }
.debug-toggle span { font-size: 18px; line-height: 1; }
.debug-backdrop { display: none; }
.touch-controls { display: none; }

@media (max-width: 1099px) {
  body, body[data-debug-open="true"] { padding: 8px; grid-template-columns: minmax(0, 1fr); gap: 0; }
  #debug-panel { position: fixed; z-index: 52; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); width: min(284px, calc(100vw - 24px)); box-shadow: -8px 0 28px #07130dd9; }
  .debug-backdrop { display: block; position: fixed; z-index: 51; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: #07130d70; cursor: default; }
  .debug-backdrop:hover { background: #07130d70; }
  .debug-heading { padding-top: 14px; padding-bottom: 12px; }
  .debug-toggle { min-height: 40px; }
}
@media (prefers-reduced-motion: no-preference) {
  button { transition: background-color 100ms, border-color 100ms, color 100ms; }
}

/* This recovery prompt belongs to the playfield, regardless of the debug drawer. */
#map-stage { position: relative; }
.encounter-defeat {
  position: absolute;
  z-index: 26;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(260px, calc(var(--map-display-size, 320px) - 24px));
  padding: 16px;
  background: #182a1e;
  border: 2px solid #bca369;
  box-shadow: 0 4px 0 #101e16;
  text-align: center;
}
.encounter-defeat strong { color: #f2d799; font: bold 15px/1.4 monospace; }
.encounter-defeat p { margin: 9px 0 14px; font-size: 12px; line-height: 1.5; }
.encounter-defeat button { width: 100%; min-height: 44px; color: #f2d799; border-color: #87925c; }
.encounter-defeat kbd { display: block; float: none; margin-top: 3px; }

#expedition-objective{position:absolute;z-index:15;top:12px;left:50%;transform:translateX(-50%);max-width:calc(100% - 156px);padding:7px 12px;border:1px solid #647151;border-radius:16px;background:#172a22eb;color:#eee2bd;font-size:12px;line-height:1.3;text-align:center;box-shadow:0 2px 8px #10211755}
#expedition-objective[hidden]{display:none}
.encounter-defeat button+button{margin-top:8px}

/* Thumb controls live in the side/bottom gutters, outside the playfield menus. */
#expedition-objective{position:fixed}
#expedition-menu{position:fixed;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));z-index:25;width:44px;height:44px;border-radius:50%;font-size:18px}
#expedition-pause{position:fixed;z-index:50;background:#1c3025;border:1px solid #697650;border-radius:12px;color:#eee2bd;padding:clamp(12px,3vw,32px);box-shadow:0 12px 36px #09160e88}
#expedition-pause section{height:100%;display:flex;flex-direction:column;justify-content:center;gap:14px}
#expedition-pause header{display:flex;align-items:center;justify-content:space-between;gap:10px}#expedition-pause h2{font:28px Georgia,serif;margin:0}#expedition-pause header button{width:44px;height:44px}
.pause-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pause-actions button{min-height:44px;font-size:14px}
#expedition-pause.pause-compact{padding:12px}
#expedition-pause.pause-compact section{gap:8px;justify-content:center;min-height:0;overflow:auto}
#expedition-pause.pause-compact h2{font-size:24px}
#expedition-pause.pause-compact .pause-actions{gap:8px}
#expedition-pause.pause-compact .pause-actions button{font-size:12px;line-height:1.3;padding:4px 8px;min-height:44px}
#expedition-pause.pause-compact .pause-status{font-size:12px;line-height:1.3}
#expedition-pause p{font-size:14px;line-height:1.5;margin:0}.pause-status{color:#c0c9ae}
/* Capability detection includes touch tablets with a mouse/trackpad attached. */
body[data-touch-controls="true"] .touch-controls{display:flex}
.touch-controls{position:fixed;z-index:24;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));justify-content:space-between;align-items:end;pointer-events:none}
.touch-controls button{pointer-events:auto;min-width:48px;min-height:48px;padding:5px 8px;font-size:19px;background:#192e23f2;touch-action:none;user-select:none;-webkit-user-select:none}
.touch-move{display:grid;grid-template-columns:repeat(3,48px);gap:4px}.touch-move [data-key="ArrowUp"]{grid-column:2}.touch-move [data-key="ArrowLeft"]{grid-column:1;grid-row:2}.touch-move [data-key="ArrowDown"]{grid-column:2;grid-row:2}.touch-move [data-key="ArrowRight"]{grid-column:3;grid-row:2}
.touch-actions{display:grid;gap:4px;justify-items:center}.touch-actions>div{display:flex;gap:4px}
#debug-touch-action{width:100%;min-width:64px;min-height:48px;font-size:14px;color:#f0d8a3}
@media(max-width:1099px){body[data-debug-open="true"] .touch-controls{visibility:hidden}}
#expedition-pause .pause-help{gap:8px}
#expedition-pause .pause-help p{font-size:12px;line-height:1.4}
#expedition-pause .pause-help .pause-actions{gap:6px}
@media(max-height:420px){#expedition-pause{padding:10px}#expedition-pause section{gap:8px}#expedition-pause h2{font-size:21px}#expedition-pause p{font-size:12px}.pause-actions{gap:6px}}
/* A 320px screen fits exactly two native 160px map scales. Removing the outer
   gutter avoids falling back to a 160px playfield and unreadable menus. */
@media(max-width:335px),(max-height:335px){body,body[data-debug-open="true"]{padding:0}}