:root {
  color-scheme: dark;
  --ui-bg: rgba(6, 22, 20, 0.62);
  --ui-border: rgba(190, 235, 220, 0.22);
  --ui-text: #e6f3ee;
  --ui-focus: #ffd278;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #04120f; overflow: hidden; }
body { font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ui-text); }
#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; }
body.hide-cursor { cursor: none; }

.controls {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; gap: 6px; padding: 6px; border-radius: 12px;
  background: var(--ui-bg); border: 1px solid var(--ui-border);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(8px); pointer-events: none;
}
.controls[data-visible="true"], .controls:focus-within { opacity: 1; transform: none; pointer-events: auto; }
.controls button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px;
  border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--ui-text);
  font: inherit; font-size: 13px; cursor: pointer;
}
.controls button:hover { background: rgba(255, 255, 255, 0.08); }
.controls button:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.controls button[aria-pressed="true"] { background: rgba(160, 230, 210, 0.16); border-color: var(--ui-border); }
.controls svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
#btn-pause .i-play { display: none; }
#btn-pause[aria-pressed="true"] .i-play { display: inline; }
#btn-pause[aria-pressed="true"] .i-pause { display: none; }
@media (max-width: 640px) {
  .controls .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .controls button { padding: 0 10px; min-width: 44px; min-height: 44px; justify-content: center; }
  .controls { left: 16px; right: 16px; justify-content: center; }
}

.help {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 32px)); padding: 20px 22px; border-radius: 14px;
  background: rgba(6, 22, 20, 0.86); border: 1px solid var(--ui-border);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.help h2 { margin: 0 0 10px; font-size: 17px; }
.help ul { margin: 0 0 12px; padding: 0; list-style: none; }
.help li { margin: 6px 0; }
.help p { margin: 0 0 8px; color: #c4d8d1; }
kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--ui-border); background: rgba(255,255,255,.06); font: 12px/1.5 ui-monospace, monospace; text-align: center; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.fallback { position: fixed; inset: 0; display: grid; place-items: center; background: #06231d; padding: 16px; }
.fallback[hidden] { display: none; }
.fallback-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fallback-card { position: relative; max-width: 560px; padding: 22px 24px; border-radius: 14px; background: rgba(4, 16, 14, 0.82); border: 1px solid var(--ui-border); }
.fallback-card h1 { margin: 0 0 10px; font-size: 20px; }
.fallback-card p { margin: 0 0 10px; color: #d2e4de; font-size: 15px; line-height: 1.5; }

@media (prefers-reduced-motion: no-preference) {
  .controls { transition: opacity .35s ease, transform .35s ease; }
  .hud { transition: opacity .35s ease; }
  .gamebar { transition: opacity .35s ease; }
}

/* ---- game interface ------------------------------------------------------------------------- */
.hud, .gamebar, .toast, .profile {
  background: var(--ui-bg); border: 1px solid var(--ui-border);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hud {
  position: fixed; left: max(16px, env(safe-area-inset-left)); top: max(16px, env(safe-area-inset-top));
  display: flex; gap: 12px; align-items: center; padding: 7px 12px; border-radius: 10px; font-size: 13px;
}
.hud .hunger { color: #b9d3cb; }
.hud.alert .hunger { color: #ffd278; }
.gamebar {
  position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; gap: 6px; padding: 6px; border-radius: 12px;
}
body[data-ui="off"]:not(.feeding) .gamebar, body[data-ui="off"] .hud { opacity: 0; pointer-events: none; }
.gamebar button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px;
  border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--ui-text);
  font: inherit; font-size: 13px; cursor: pointer;
}
.gamebar button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
.gamebar button:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.gamebar button[aria-pressed="true"] { background: rgba(160, 230, 210, 0.16); border-color: var(--ui-border); }
.gamebar button:disabled { opacity: .45; cursor: not-allowed; }
.gamebar svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.gamebar .count { color: #b9d3cb; font-variant-numeric: tabular-nums; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.dot.flakes { background: #f2a04a; border-radius: 2px; transform: rotate(20deg); }
.dot.granules { background: #8c5228; }
.dot.larvae { background: #c01810; width: 14px; height: 6px; border-radius: 3px; }
body.feeding #scene { cursor: crosshair; }

.toast {
  position: fixed; left: 50%; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 60px); transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 32px)); padding: 9px 14px; border-radius: 10px; font-size: 14px; text-align: center;
}
.toast[hidden] { display: none; }

.halo {
  position: fixed; left: 0; top: 0; pointer-events: none; border-radius: 50%;
  border: 2px solid rgba(255, 228, 160, 0.75); box-shadow: 0 0 14px rgba(255, 220, 140, 0.35);
}
.halo[hidden] { display: none; }

.profile {
  position: fixed; right: max(16px, env(safe-area-inset-right)); top: max(16px, env(safe-area-inset-top));
  width: min(340px, calc(100vw - 32px)); max-height: calc(100dvh - 110px); overflow-y: auto;
  padding: 14px 16px; border-radius: 14px; background: rgba(6, 22, 20, 0.84);
}
.profile[hidden] { display: none; }
.profile header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.profile .p-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.profile h2 { margin: 0; font-size: 19px; overflow-wrap: anywhere; }
.profile h3 { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #9fbdb3; }
.profile .p-sub { margin: 4px 0 2px; font-size: 14px; }
.profile .p-latin { margin: 0; font-size: 12px; color: #9fbdb3; }
.profile button { font: inherit; color: var(--ui-text); background: transparent; border: 1px solid var(--ui-border); border-radius: 7px; padding: 3px 9px; cursor: pointer; font-size: 12px; }
.profile button:hover { background: rgba(255, 255, 255, 0.08); }
.profile button:focus-visible, .profile input:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.profile .close { border-color: transparent; font-size: 15px; }
.profile .rename { display: flex; gap: 6px; }
.profile input { font: inherit; width: 140px; padding: 3px 8px; border-radius: 7px; border: 1px solid var(--ui-border); background: rgba(0, 0, 0, .25); color: var(--ui-text); }
.profile ul { list-style: none; margin: 0; padding: 0; }
.traits li, .need { display: grid; grid-template-columns: 104px 1fr 92px; gap: 8px; align-items: center; margin: 5px 0; font-size: 13px; }
.t-word { color: #b9d3cb; font-size: 12px; }
.bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #5fbfa5, #a8e6cf); border-radius: 3px; }
.need-bar i { background: linear-gradient(90deg, #e0a040, #f3d27a); }
.profile dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 8px 0 0; font-size: 13px; }
.profile dt { color: #9fbdb3; }
.profile dd { margin: 0; }
.quirks li { margin: 6px 0; font-size: 13px; display: grid; gap: 1px; }
.quirks span, .muted { color: #b9d3cb; }

@media (max-width: 640px) {
  .gamebar .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gamebar { left: 16px; right: 16px; bottom: 78px; justify-content: center; }
  .profile { top: auto; bottom: 136px; max-height: 50dvh; }
  .hud { flex-direction: column; align-items: flex-start; gap: 2px; }
  .toast { bottom: 196px; }
}
@media (min-width: 641px) and (max-width: 1240px) {
  /* both toolbars share the bottom edge: the view controls switch to icons only */
  .controls .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .controls button { padding: 0 10px; }
}
body.hand-feeding #scene { cursor: grabbing; }
.trust-bar i { background: linear-gradient(90deg, #6aa8e0, #b6dcff); }
.diary li { display: grid; gap: 1px; margin: 6px 0; font-size: 13px; }
.diary time { color: #9fbdb3; font-size: 11px; }
.hud .water { color: #b9d3cb; }
.hud.water-alert .water { color: #ffb070; }
.glass {
  position: fixed; inset: 0; pointer-events: none; opacity: 0;
  background:
    radial-gradient(ellipse at 15% 85%, rgba(70, 120, 40, 0.55), transparent 45%),
    radial-gradient(ellipse at 85% 80%, rgba(80, 125, 45, 0.5), transparent 40%),
    radial-gradient(ellipse at 50% 100%, rgba(60, 105, 35, 0.6), transparent 55%),
    rgba(70, 110, 50, 0.25);
  mix-blend-mode: multiply;
}
.tank { right: auto; left: max(16px, env(safe-area-inset-left)); top: auto; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 62px); width: min(330px, calc(100vw - 32px)); }
.tank h2 { margin: 0; font-size: 18px; }
.water-bar.ok i { background: linear-gradient(90deg, #5fbfa5, #a8e6cf); }
.water-bar.warn i { background: linear-gradient(90deg, #d8a040, #f3d27a); }
.water-bar.bad i { background: linear-gradient(90deg, #d0603a, #f39a6a); }
.care { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.care button { padding: 7px 8px; font-size: 12px; }
.care button:disabled { opacity: .5; cursor: not-allowed; }
.health-bar i { background: linear-gradient(90deg, #d0603a, #9ad08a); }
.sick { color: #ffb070; }
@media (max-width: 640px) {
  .tank { bottom: 136px; max-height: 50dvh; }
}
.hints { margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; }
.hints li { color: #ffd278; margin: 3px 0; }
.hints li::before { content: "• "; }
.hud .money { font-variant-numeric: tabular-nums; color: #f3d27a; }
.shop-list, .requests { list-style: none; margin: 0; padding: 0; }
.shop-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 7px 0; font-size: 13px; }
.shop-list li > span { display: grid; gap: 1px; min-width: 0; }
.shop-list small, .request small { color: #b9d3cb; font-size: 12px; }
.shop-list button { white-space: nowrap; }
.shop-list button:disabled, .pick button:disabled { opacity: .5; cursor: not-allowed; }
.small { font-size: 12px; }
.request { margin: 8px 0; border: 1px solid var(--ui-border); border-radius: 9px; padding: 2px; }
.request .req-head { display: grid; gap: 2px; width: 100%; text-align: left; border: 0; padding: 7px 8px; font-size: 13px; }
.stars { color: #f3d27a; letter-spacing: 1px; font-size: 12px; }
.pick { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 8px; font-size: 13px; }
.worth { margin-top: 8px; font-size: 13px; }
.worth summary { cursor: pointer; }
.worth ul { list-style: none; margin: 6px 0 0; padding: 0; }
.worth li { display: flex; justify-content: space-between; color: #b9d3cb; font-size: 12px; margin: 2px 0; }
.farewell { left: 50%; top: 50%; right: auto; transform: translate(-50%, -50%); width: min(380px, calc(100vw - 32px)); z-index: 5; }
.farewell h2 { margin: 0 0 8px; font-size: 18px; }
.farewell p { margin: 6px 0; font-size: 14px; }
@media (min-width: 641px) and (max-width: 1240px) {
  .gamebar .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.clutch { display: grid; gap: 4px; padding: 7px 8px; font-size: 13px; }
.clutch small { color: #b9d3cb; }
.clutch .care { margin-top: 4px; }
.variant { color: #f3d27a; }
@media (max-width: 640px) {
  .gamebar { flex-wrap: wrap; gap: 2px; }
  .gamebar button { min-width: 40px; padding: 0 8px; }
  .toast { bottom: 232px; }
  .tank, .profile { bottom: 172px; }
}
.segmented { display: flex; gap: 6px; }
.segmented button[aria-pressed="true"] { background: rgba(160, 230, 210, 0.18); border-color: var(--ui-focus); }
.tag { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; padding: 1px 5px; border-radius: 4px; background: rgba(243, 210, 122, 0.2); color: #f3d27a; vertical-align: 1px; }
.collection { list-style: none; margin: 0; padding: 0; columns: 2; font-size: 13px; }
.collection li { margin: 3px 0; }
.locked { opacity: .5; }
.ledger { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.ledger li { display: flex; justify-content: space-between; gap: 8px; margin: 3px 0; }
.ledger .minus { color: #f39a6a; }
.ledger .plus { color: #9ad08a; }
.hints-line { color: #ffd278; font-size: 12px; margin: 4px 0; }
.segmented select { font: inherit; font-size: 12px; color: var(--ui-text); background: rgba(0,0,0,.25); border: 1px solid var(--ui-border); border-radius: 7px; padding: 3px 6px; }
.dot.artemia { background: #f07a62; width: 12px; height: 5px; border-radius: 3px; }
.dot.spirulina { background: #4a8a30; width: 11px; height: 11px; }

/* ---- update of the installed app (AP2-65) ---------------------------------------------------- */
/* The status line stays in the accessibility tree while it is empty, so its first sentence is announced;
   only an offered or applying update gets the visible box. Above the fallback card, which may cover the scene. */
.app-update {
  position: fixed; left: 50%; top: max(16px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 30;
  display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 32px));
  pointer-events: none;
}
.app-update[data-aquarium-update-state="available"], .app-update[data-aquarium-update-state="applying"] {
  padding: 6px 6px 6px 14px; border-radius: 12px; pointer-events: auto;
  background: rgba(6, 22, 20, 0.88); border: 1px solid var(--ui-border);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.app-update-text { margin: 0; font-size: 14px; }
.app-update button {
  min-height: 40px; min-width: 44px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--ui-border); background: rgba(160, 230, 210, 0.16); color: var(--ui-text);
  font: inherit; font-size: 13px; cursor: pointer;
}
.app-update button:hover { background: rgba(160, 230, 210, 0.26); }
.app-update button:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.app-update button[hidden] { display: none; }

/* ---- background sound (AP2-67) --------------------------------------------------------------- */
/* Speaker button and volume slider as the first group of the view toolbar. The slider gets its own track and
   thumb, so its contrast against the toolbar holds in the game's one dark look (track about 5:1, thumb and focus
   ring well above 3:1). */
.controls .sound { display: flex; align-items: center; gap: 6px; }
.controls .sound[hidden] { display: none; }
.controls .sound label { font-size: 13px; padding-left: 2px; }
.controls .sound input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 120px; height: 28px; margin: 0 6px 0 0; padding: 0 2px;
  background: transparent; cursor: pointer;
}
.controls .sound input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: rgba(230, 243, 238, 0.55); }
.controls .sound input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(230, 243, 238, 0.55); }
.controls .sound input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -6px;
  border-radius: 50%; border: 2px solid #04120f; background: var(--ui-text);
}
.controls .sound input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #04120f; background: var(--ui-text); }
.controls .sound input[type="range"]:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; border-radius: 4px; }
#btn-sound .i-sound-off { display: none; }
#btn-sound[aria-pressed="true"] .i-sound-off { display: inline; }
#btn-sound[aria-pressed="true"] .i-sound-on { display: none; }
@media (min-width: 641px) and (max-width: 1240px) {
  .controls .sound input[type="range"] { width: 72px; }
}
@media (min-width: 641px) {
  /* Side by side the feeding bar and the view toolbar overlap below about 1040 px (icons only) and between
     1241 px and about 2150 px (with labels; the feeding bar alone is about 1245 px wide there), so the view
     toolbar keeps the bottom edge and the feeding bar, the tank panel and the toast move up by its height
     (54 px plus 8 px); the fish profile on the right ends above the raised feeding bar. */
  .gamebar { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 62px); }
  .toast { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 122px); }
  .profile { max-height: calc(100dvh - 164px); }
  .tank { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 124px); max-height: calc(100dvh - 172px); }
}
@media (max-width: 640px) {
  /* two rows: the sound group across the full width on top, the view buttons below */
  .controls { flex-wrap: wrap; }
  .controls .sound { flex: 1 0 100%; justify-content: center; }
  .controls .sound input[type="range"] { flex: 0 1 200px; width: auto; min-width: 96px; height: 44px; }
  .gamebar { bottom: 128px; }
  .toast { bottom: 282px; }
  .tank, .profile { bottom: 222px; }
}