* { box-sizing: border-box; }

html, body {
  margin: 0;
  touch-action: none; /* no scrolling or zooming the page while playing */
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  height: 100%;
  overflow: hidden;
  background: #8fb3d1;
  font: 14px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #f4efe6;
  user-select: none;
}

/* Always the whole screen, even before the game has noticed a new size (Safari 15 is late after turning or unlocking). */
#game {
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

#hurt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 120px 40px rgba(200, 30, 30, 0.7);
  opacity: 0;
}
#hurt.show { animation: hurt 0.5s ease-out; }
@keyframes hurt { from { opacity: 1; } to { opacity: 0; } }

#crosshair {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)) center / 2px 100% no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)) center / 100% 2px no-repeat;
}

#clock {
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: 600;
  padding: 6px 14px;
}
#clock.night { color: #c9d4f2; }

#overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(20, 18, 16, 0.35);
  cursor: pointer;
  pointer-events: none;
}
#overlay.hidden { display: none; }
#overlay .panel { position: static; text-align: center; padding: 20px 32px; }
#overlay h1 { margin: 0 0 8px; color: #f2d27a; }
#overlay .start { font-size: 20px; font-weight: 700; color: #f2d27a; }
#overlay .hint { opacity: 0.75; font-size: 12px; }

.panel {
  position: fixed;
  background: rgba(38, 33, 30, 0.72);
  border: 2px solid rgba(244, 239, 230, 0.15);
  border-radius: 6px;
  padding: 10px 12px;
}

#herd {
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0.6;
}
.card.active { opacity: 1; background: rgba(242, 210, 122, 0.18); outline: 1px solid #f2d27a; }
.card small { display: block; font-size: 11px; opacity: 0.8; }
.dot { width: 18px; height: 18px; border: 4px solid; border-radius: 3px; }

#minimap {
  position: fixed;
  top: 12px;
  right: 12px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(38, 33, 30, 0.72);
}

#help {
  top: 204px;
  right: 12px;
  max-width: 340px;
}
#help h2 { margin: 0 0 6px; font-size: 16px; color: #f2d27a; }
#help dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; }
#help dt { font-weight: 600; white-space: nowrap; }
#help dd { margin: 0; opacity: 0.85; }

#vitals {
  position: fixed;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 18px;
  align-items: center;
  font-size: 15px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}
#vitals .empty { filter: grayscale(1); opacity: 0.35; }
#vitals .apples small { opacity: 0.75; font-size: 11px; }

#powers {
  position: fixed;
  bottom: 14px;
  left: 14px;
  display: flex;
  gap: 6px;
}
.power {
  position: relative;
  width: 56px;
  height: 56px;
  background: rgba(38, 33, 30, 0.75);
  border: 2px solid rgba(242, 210, 122, 0.6);
  border-radius: 8px;
  display: grid;
  place-items: center;
}
.power .icon { font-size: 24px; }
.power .key { position: absolute; top: 1px; left: 5px; font-size: 11px; font-weight: 700; color: #f2d27a; }
.power small { position: absolute; bottom: 1px; right: 4px; font-size: 10px; }
.power.off { opacity: 0.4; border-color: rgba(244, 239, 230, 0.2); }
.power.on { border-color: #b8e3e0; box-shadow: 0 0 12px rgba(184, 227, 224, 0.8); }
.power .running { position: absolute; top: -18px; font-size: 11px; font-weight: 700; }

#hotbar {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.slot {
  position: relative;
  width: 52px;
  height: 52px;
  background: rgba(38, 33, 30, 0.75);
  border: 2px solid rgba(244, 239, 230, 0.2);
  border-radius: 4px;
  display: grid;
  place-items: center;
}
.slot.selected { border-color: #f2d27a; }
.swatch { width: 26px; height: 26px; border-radius: 2px; box-shadow: inset -3px -3px rgba(0, 0, 0, 0.25); }
.key { position: absolute; top: 1px; left: 4px; font-size: 10px; opacity: 0.7; }
.count { position: absolute; bottom: 1px; right: 4px; font-size: 12px; font-weight: 700; }

#toast {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -10px);
  padding: 8px 16px;
  background: rgba(38, 33, 30, 0.8);
  border-radius: 6px;
  font-size: 18px;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

.hidden { display: none; }

#version {
  position: fixed;
  right: 10px;
  bottom: 6px;
  font-size: 11px;
  opacity: 0.6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* ---------- Touch / iPad ---------- */
.touch-only, #touch-ui, #rotate-hint { display: none; }
body.touch .touch-only { display: block; }
body.touch .desktop-only { display: none; }
body.touch #touch-ui { display: block; }
body.touch #help { display: none; }
body.touch #vitals { top: 60px; bottom: auto; }
body.touch #powers { bottom: calc(210px + env(safe-area-inset-bottom)); left: calc(18px + env(safe-area-inset-left)); }
body.touch #version { bottom: auto; top: 200px; }

#stick {
  position: fixed;
  left: calc(30px + env(safe-area-inset-left));
  bottom: calc(30px + env(safe-area-inset-bottom));
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(38, 33, 30, 0.35);
  border: 3px solid rgba(244, 239, 230, 0.45);
  touch-action: none;
}
#stick .knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: rgba(242, 210, 122, 0.85);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

#touch-ui button {
  font: inherit;
  color: #f4efe6;
  background: rgba(38, 33, 30, 0.6);
  border: 2px solid rgba(244, 239, 230, 0.35);
  border-radius: 50%;
  touch-action: none;
}
#touch-ui button.pressed { background: rgba(242, 210, 122, 0.55); }
#touch-ui button small { display: block; font-size: 10px; opacity: 0.85; }

#actions {
  position: fixed;
  right: calc(24px + env(safe-area-inset-right));
  bottom: calc(24px + env(safe-area-inset-bottom));
  width: 230px;
  height: 200px;
}
#actions button { position: absolute; width: 74px; height: 74px; font-size: 26px; }
#actions button.big { width: 104px; height: 104px; font-size: 36px; right: 0; bottom: 0; }
#actions [data-tap="push"] { right: 116px; bottom: 6px; }
#actions [data-hold="mine"] { right: 104px; bottom: 96px; }
#actions [data-hold="place"] { right: 14px; bottom: 116px; }

#quick {
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
#quick button { width: 48px; height: 48px; font-size: 22px; border-radius: 12px; }

body.big-buttons #stick { width: 190px; height: 190px; }
body.big-buttons #actions { transform: scale(1.25); transform-origin: bottom right; }
body.big-buttons #quick { transform: translateX(-50%) scale(1.2); transform-origin: top center; }

/* Left-handed: joystick right, buttons left. */
body.left-handed #stick { left: auto; right: calc(30px + env(safe-area-inset-right)); }
body.left-handed #actions { right: auto; left: calc(24px + env(safe-area-inset-left)); }
body.left-handed.big-buttons #actions { transform-origin: bottom left; }
body.left-handed #actions button.big { right: auto; left: 0; }
body.left-handed #actions [data-tap="push"] { right: auto; left: 116px; }
body.left-handed #actions [data-hold="mine"] { right: auto; left: 104px; }
body.left-handed #actions [data-hold="place"] { right: auto; left: 14px; }
body.left-handed #powers { left: auto; right: calc(18px + env(safe-area-inset-right)); }

#options {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 320px;
  z-index: 10;
}
#options h2 { margin: 0 0 10px; color: #f2d27a; font-size: 18px; }
#options label { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 10px 0; font-size: 16px; }
#options label.check { justify-content: flex-start; }
#options select, #options input { font-size: 16px; }
#options input[type="checkbox"] { width: 22px; height: 22px; }
#options .row { display: flex; gap: 10px; margin-top: 14px; }
#options .row button { flex: 1; padding: 10px; font-size: 16px; border-radius: 8px; border: 2px solid rgba(244, 239, 230, 0.35); background: rgba(242, 210, 122, 0.25); color: #f4efe6; }
#options .hint { font-size: 12px; opacity: 0.75; max-width: 320px; }

#rotate-hint {
  position: fixed;
  inset: 0;
  z-index: 20;
  place-items: center;
  text-align: center;
  padding: 24px;
  font-size: 28px;
  background: rgba(20, 18, 16, 0.92);
}
@media (orientation: portrait) {
  body.touch #rotate-hint { display: grid; }
}
body.touch .card small { display: none; }
body.touch #vitals .apples small { display: none; }
body.touch.big-buttons #powers { bottom: calc(250px + env(safe-area-inset-bottom)); }

.card .happy { font-size: 11px; opacity: 0.9; white-space: nowrap; }

/* ---------- iPhone: landscape only, rarely used things folded away ---------- */
#phone-toggles { display: none; }
body.phone #phone-toggles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: fixed;
  right: calc(12px + env(safe-area-inset-right));
  bottom: calc(164px + env(safe-area-inset-bottom));
}
body.phone #phone-toggles button { width: 42px; height: 42px; font-size: 20px; border-radius: 12px; }

/* Smaller panels at the top. */
body.phone .panel { padding: 4px 8px; }
body.phone #herd { top: 6px; left: calc(8px + env(safe-area-inset-left)); gap: 2px; padding: 4px; }
body.phone #herd .card { padding: 2px 6px; font-size: 12px; gap: 6px; }
body.phone #herd .dot { width: 14px; height: 14px; border-width: 3px; }
body.phone #herd .card:not(.active) { display: none; }
body.phone.herd-open #herd .card:not(.active) { display: flex; }
body.phone #clock { top: 6px; font-size: 12px; padding: 3px 10px; }
body.phone #vitals { top: 34px; font-size: 13px; gap: 0; background: rgba(38, 33, 30, 0.55); padding: 2px 10px; border-radius: 10px; }
body.phone #minimap { top: 6px; right: calc(8px + env(safe-area-inset-right)); width: 104px; height: 104px; }
body.phone #version { display: none; }
body.phone #toast { top: 22%; font-size: 14px; padding: 6px 12px; }

/* Controls a bit smaller. */
body.phone #stick { width: 116px; height: 116px; left: calc(16px + env(safe-area-inset-left)); bottom: calc(12px + env(safe-area-inset-bottom)); }
body.phone #stick .knob { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
body.phone #actions { transform: scale(0.72); transform-origin: bottom right; right: calc(10px + env(safe-area-inset-right)); bottom: calc(8px + env(safe-area-inset-bottom)); }
body.phone.big-buttons #actions { transform: scale(0.85); }
body.phone.big-buttons #stick { width: 140px; height: 140px; }

/* Hotbar: only the chosen block, all blocks after a tap. */
body.phone #hotbar { bottom: calc(8px + env(safe-area-inset-bottom)); gap: 4px; }
body.phone .slot { width: 44px; height: 44px; }
body.phone .slot:not(.selected) { display: none; }
body.phone.hotbar-open .slot:not(.selected) { display: grid; }

/* Powers / care and the extra buttons: folded away until ✨ or ☰ is tapped. */
body.phone #powers { display: none; }
body.phone.powers-open #powers { display: flex; left: 50%; right: auto; transform: translateX(-50%); bottom: calc(60px + env(safe-area-inset-bottom)); }
body.phone #quick { display: none; }
body.phone.menu-open #quick { display: flex; top: auto; bottom: calc(60px + env(safe-area-inset-bottom)); }
body.phone.powers-open [data-tap="powers"], body.phone.menu-open [data-tap="menu"] { background: rgba(242, 210, 122, 0.55); }

/* Options and start screen must fit the low screen. */
body.phone #options { max-height: 92vh; overflow-y: auto; min-width: 300px; }
body.phone #options label { margin: 6px 0; font-size: 14px; }
body.phone #overlay .panel { padding: 10px 18px; }
body.phone #overlay h1 { font-size: 22px; margin-bottom: 2px; }
body.phone #overlay p { margin: 6px 0; font-size: 13px; }
body.phone #overlay .start { font-size: 17px; }

/* Left-handed on the phone: toggles follow the buttons to the left. */
body.phone.left-handed #phone-toggles { right: auto; left: calc(12px + env(safe-area-inset-left)); }
body.phone.left-handed #actions { transform-origin: bottom left; left: calc(10px + env(safe-area-inset-left)); }

/* Labelled status rows; rows that run low blink. */
#vitals .row { display: flex; align-items: center; gap: 1px; }
#vitals .row b { font-size: 11px; font-weight: 700; margin-right: 5px; opacity: 0.9; }
#vitals .low, #vitals.low { animation: low-blink 0.9s ease-in-out infinite; }
#vitals .low b { color: #ffb4a8; }
@keyframes low-blink { 50% { opacity: 0.35; } }
body.touch:not(.phone) #vitals { max-width: 620px; flex-wrap: wrap; justify-content: center; row-gap: 2px; column-gap: 14px; }
body.touch:not(.phone) #quick { top: 118px; }

/* Save buttons on the pause screen (the rest of the overlay lets clicks through to the game). */
#overlay .save-buttons { display: flex; gap: 10px; justify-content: center; }
#overlay .save-buttons button {
  pointer-events: auto;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  color: #f4efe6;
  background: rgba(242, 210, 122, 0.25);
  border: 2px solid rgba(244, 239, 230, 0.35);
  border-radius: 8px;
  padding: 6px 12px;
}