/* Pixel UI: hard edges, hard offset shadows, no blur, no anti-aliased effects. */
:root {
  --bg: #e9e6d6;
  --panel: #d8d9c4;
  --panel-2: #c5cbb0;
  --panel-3: #b3bb9a;
  --edge: #2b3a31;
  --ink: #1c2620;
  --dim: #4d5f52;
  --accent: #e0a93b;
  --accent-ink: #1b1408;
  font-family: "Press Start 2P", ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141a17; --panel: #1f2a24; --panel-2: #2a3a31; --panel-3: #37493d;
    --edge: #0b100d; --ink: #e9e2c8; --dim: #9fb0a2;
  }
}
:root[data-theme="dark"] {
  --bg: #141a17; --panel: #1f2a24; --panel-2: #2a3a31; --panel-3: #37493d;
  --edge: #0b100d; --ink: #e9e2c8; --dim: #9fb0a2;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--ink); font-size: 8px; line-height: 1.6; }
body { -webkit-font-smoothing: none; overflow: hidden; }

/*
 * Layout: the game screen fills the whole window. Everything else (care bar,
 * tab bar, drawers, the edit drawer) floats over it, and "Hide UI" clears it all
 * away so you can look at your tanks. Phones held upright: tab bar along the
 * bottom with drawers sliding up over the tank. Wide screens: tab bar down the
 * left with drawers opening beside it.
 */
#app { position: fixed; inset: 0; --tabbar-h: 56px; --edit-h: 0px; --topbar-h: 0px; --side-w: 64px; --drawer-w: min(260px, 62vw); }
#stage {
  position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#game { display: block; image-rendering: pixelated; touch-action: none; background: #000; }
#game:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

#chrome { position: absolute; inset: 0; pointer-events: none; }
#chrome > * { pointer-events: auto; }
#chrome > header { pointer-events: none; }
#chrome > header > * { pointer-events: auto; }

#topbar {
  position: absolute; top: env(safe-area-inset-top); left: 0; right: 0; padding: 6px;
  display: flex; align-items: flex-start; gap: 6px;
}
#actionbar { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; gap: 4px; padding: 6px; background: var(--panel); border: 2px solid var(--edge); box-shadow: 2px 2px 0 var(--edge); }
#topright { flex: none; display: flex; flex-direction: column; gap: 4px; }
.top-btn {
  font: inherit; color: var(--ink); background: var(--panel); padding: 8px 6px; white-space: nowrap;
  border: 2px solid var(--edge); box-shadow: 2px 2px 0 var(--edge); cursor: pointer;
}
#siteLink { text-decoration: none; text-align: center; }
.top-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* Data view legend: a color gradient with its values. */
#legend {
  position: absolute; left: 6px; top: calc(var(--topbar-h, 0px) + 6px); width: 168px; padding: 6px 8px;
  background: var(--panel); border: 2px solid var(--edge); box-shadow: 2px 2px 0 var(--edge);
}
#legend[hidden] { display: none; }
#legend { max-height: calc(100dvh - var(--topbar-h, 0px) - 72px); overflow-y: auto; }
.legend-notes { margin-top: 6px; }
.legend-notes[hidden] { display: none; }
.legend-notes summary { cursor: pointer; color: var(--dim); line-height: 1.5; }
.legend-note { margin: 6px 0 0; line-height: 1.5; }
.legend-note b { font-weight: normal; color: var(--accent-ink); background: var(--accent); padding: 0 3px; }
.legend-title { margin: 0 0 6px; line-height: 1.4; }
.legend-body { position: relative; display: flex; gap: 6px; height: 120px; margin-bottom: 6px; }
.legend-bar { flex: none; width: 16px; border: 2px solid var(--edge); }
.legend-ticks { position: relative; flex: 1; margin: 0; padding: 0; list-style: none; }
.legend-ticks li { position: absolute; left: 0; transform: translateY(50%); white-space: nowrap; line-height: 1; }
.legend-info p { margin: 0; line-height: 1.5; }

#tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: row;
  overflow-x: auto; overflow-y: hidden; background: var(--panel); border-top: 4px solid var(--edge);
  padding-bottom: env(safe-area-inset-bottom);
}
/*
 * Drawers open from the left, over the tank, on phones and tablets held upright
 * (the tab bar is along the bottom there). They stop above the tab bar and the edit
 * drawer and below the care bar, so the tank stays in view on the right.
 */
#drawer {
  position: absolute; left: 0; width: var(--drawer-w); top: calc(var(--topbar-h) + 4px);
  bottom: calc(var(--tabbar-h) + var(--edit-h)); overflow-y: auto; padding: 12px;
  background: var(--panel); border-right: 4px solid var(--edge); box-shadow: 4px 0 0 var(--edge);
  animation: drawer-in 140ms steps(5) both;
}
#drawer[hidden] { display: none; }
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { #drawer { animation: none; } }
#editbar {
  position: absolute; left: 0; right: 0; bottom: var(--tabbar-h); z-index: 5; padding: 6px 8px;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--panel); border-top: 4px solid var(--edge);
}
#editbar[hidden] { display: none; }

/* Wide screens: tab bar on the left, drawer beside it, both over the game screen. */
@media (min-aspect-ratio: 1/1) {
  #tabbar {
    top: 0; right: auto; width: var(--side-w); flex-direction: column; overflow-x: hidden; overflow-y: auto;
    border-top: 0; border-right: 4px solid var(--edge); padding-bottom: 0;
  }
  #app { --drawer-w: min(300px, 46vw); }
  #drawer {
    top: 0; bottom: 0; left: var(--side-w); box-shadow: none;
  }
  #topbar { left: var(--side-w); }
  #app:not(.drawer-closed) #topbar { left: calc(var(--side-w) + var(--drawer-w)); }
  #legend { left: calc(var(--side-w) + 6px); }
  #app:not(.drawer-closed) #legend { left: calc(var(--side-w) + var(--drawer-w) + 6px); }
  #editbar {
    left: calc(var(--side-w) + 8px); right: auto; bottom: 8px; width: min(440px, calc(100vw - var(--side-w) - 16px));
    border: 4px solid var(--edge); box-shadow: 4px 4px 0 var(--edge);
  }
  #app:not(.drawer-closed) #editbar { left: calc(var(--side-w) + var(--drawer-w) + 8px); width: min(440px, calc(100vw - var(--side-w) - var(--drawer-w) - 16px)); }
}

/* Hide UI: clear everything but the toggle. */
#app.ui-hidden #actionbar, #app.ui-hidden #drawer, #app.ui-hidden #editbar, #app.ui-hidden #tabbar, #app.ui-hidden #thermostat { display: none; }
#app.ui-hidden #topbar { left: auto; }

/* Care bar: four actions and six small meters for the selected tank. */
.care-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.care-btn { padding: 6px 2px; text-align: center; }
.meters { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.meter { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.meter-label { white-space: nowrap; overflow: hidden; font-size: 8px; }
.meter-bar { display: block; height: 5px; background: var(--panel-3); border: 1px solid var(--edge); }
.meter-fill { display: block; height: 100%; background: #5f8266; }
.meter[data-state="low"] .meter-fill { background: #6b9ac4; }
.meter[data-state="high"] .meter-fill { background: #d06a35; }
.care-message {
  position: absolute; left: 0; top: calc(100% + 6px); margin: 0; padding: 4px 6px; max-width: 100%;
  background: var(--panel); border: 2px solid var(--edge); color: var(--ink); line-height: 1.4;
}
.care-message:empty { display: none; }

/* Tabs */
.tab {
  flex: none; min-width: 60px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 2px; font: inherit; color: var(--ink); background: transparent;
  border: 0; border-right: 2px solid var(--edge); cursor: pointer;
}
@media (min-aspect-ratio: 1/1) {
  .tab { min-width: 0; border-right: 0; border-bottom: 2px solid var(--edge); }
}
.tab:hover { background: var(--panel-2); }
.tab[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.tab-icon-wrap { display: block; width: 24px; height: 24px; }
.tab-icon { display: block; width: 24px; height: 24px; image-rendering: pixelated; }
.tab:focus-visible, .card:focus-visible, .opt:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }

/* Drawer */
#drawer h2 { margin: 0; font-size: 8px; font-weight: normal; }
#drawer h3 { margin: 0 0 8px; font-size: 8px; font-weight: normal; color: var(--dim); }
#drawer section { margin-bottom: 16px; }
.ctx { margin: 4px 0 16px; color: var(--dim); }
.empty { margin: 0; color: var(--dim); }
.note { margin: 0 0 8px; color: var(--dim); line-height: 1.5; }
.save-panel { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.save-panel h3 { margin: 8px 0 0; }
.save-panel .note { margin: 0; }
.save-status { margin: 0 0 4px; color: var(--dim); line-height: 1.5; }
.save-message { min-height: 24px; margin: 8px 0 0; line-height: 1.5; }
.save-text {
  width: 100%; font: inherit; color: var(--ink); background: var(--panel-2);
  border: 2px solid var(--edge); padding: 6px; resize: vertical;
}
.animals-panel { display: flex; flex-direction: column; gap: 8px; }
.animals-panel h3 { margin: 8px 0 0; }
.residents { display: flex; flex-direction: column; gap: 10px; }
.resident { padding: 8px; background: var(--panel-2); border: 2px solid var(--edge); box-shadow: 2px 2px 0 var(--edge); }
.resident-name { margin: 0 0 4px; line-height: 1.5; }
.resident-tip { margin: 0 0 8px; color: var(--dim); line-height: 1.5; }
.resident-buttons { display: flex; gap: 6px; }
.card:disabled { opacity: 0.5; cursor: default; }
.readout { display: flex; flex-direction: column; gap: 4px; }
.readout-row { display: flex; gap: 8px; margin: 0; line-height: 1.4; }
.readout-label { flex: none; width: 88px; color: var(--dim); }
.guide-row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.guide-chip { flex: none; width: 16px; height: 16px; margin-top: 1px; border: 2px solid var(--edge); }
.guide-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.guide-purpose { color: var(--dim); line-height: 1.4; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.card {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px;
  font: inherit; text-align: center; color: var(--ink); background: var(--panel-2);
  border: 2px solid var(--edge); box-shadow: 2px 2px 0 var(--edge); cursor: pointer;
}
.card:hover { background: var(--panel-3); }
.card[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.card-icon { width: 72px; height: 72px; image-rendering: pixelated; }
.card-desc { color: var(--dim); line-height: 1.4; }
.card[aria-pressed="true"] .card-desc { color: var(--accent-ink); }

.opt {
  font: inherit; color: var(--ink); background: var(--panel-2); padding: 8px 10px;
  border: 2px solid var(--edge); box-shadow: 2px 2px 0 var(--edge); cursor: pointer;
}
.opt:hover:not(:disabled) { background: var(--panel-3); }
.opt:disabled { opacity: 0.5; cursor: default; }

/* Edit drawer: one compact row of everyday controls; "More" opens a second row. */
.edit-name { margin: 0; color: var(--ink); line-height: 1.4; }
.edit-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.edit-row[hidden] { display: none; }
.edit-btn { padding: 8px 0; text-align: center; min-width: 0; }
.edit-btn[aria-pressed="true"] { background: var(--panel-3); }
.edit-done { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.edit-done:hover:not(:disabled) { background: var(--accent); }

/* Drawer header with a close button. */
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.drawer-close {
  font: inherit; color: var(--ink); background: var(--panel-2); padding: 6px 8px;
  border: 2px solid var(--edge); box-shadow: 2px 2px 0 var(--edge); cursor: pointer;
}

/* Thermostat panel: opens over the middle of the screen. */
#thermostat {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6;
  width: min(260px, calc(100vw - 24px)); padding: 12px; display: flex; flex-direction: column; gap: 8px;
  background: var(--panel); border: 4px solid var(--edge); box-shadow: 4px 4px 0 var(--edge);
}
#thermostat[hidden] { display: none; }
#thermostat h2 { margin: 0; font-size: 8px; font-weight: normal; }
#thermostat .note { margin: 0; }
.thermo-temp { margin: 4px 0 0; font-size: 24px; text-align: center; line-height: 1.2; }
.thermo-sub { margin: 0; text-align: center; color: var(--dim); line-height: 1.5; }
.thermo-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.thermo-btn { padding: 10px 0; text-align: center; }