.console-display:has(.habitat) > :not(.habitat) { display: none; }
.habitat { position: relative; z-index: 12; background: #73918a; color: #23281f; padding: 12px; font: 12px 'Courier New',monospace; }
.habitat-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }.habitat-header strong { font: bold italic 22px Georgia,serif; }
.world-location { font-size: 11px; margin: 8px 0; }.world-directions { display: flex; gap: 8px; justify-content: center; }.world-directions button { min-width: 36px; }.habitat-scene canvas { cursor: crosshair; }
.habitat button { cursor: pointer; border: 1px solid #23281f; padding: 7px; background: #eedca4; color: #23281f; box-shadow: 2px 2px 0 #23281f; font: bold 11px 'Courier New',monospace; }
.habitat button:disabled { opacity: .5; cursor: default; }.habitat button:active { box-shadow: none; transform: translate(1px,1px); }
.habitat-weather { margin: 10px 0; font-size: 10px; }
.habitat-scene { position: relative; aspect-ratio: 16/9; background: url('../assets/island.svg') center/100% 100%; border: 2px solid #344a40; }
.habitat-scene canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.habitat-home { position: absolute; bottom: 15%; right: 8%; font: bold 60px Georgia,serif; color: #684d35; }
.habitat-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; margin-top: 10px; }.habitat-stats label { font-size: 10px; }.habitat-stats span { float: right; }.habitat-stats meter { display: block; width: 100%; height: 12px; accent-color: #b83e24; }
.habitat-stock { font-size: 10px; line-height: 1.5; }.habitat-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.habitat-help { font: italic 11px/1.4 Georgia,serif; }.habitat-log { white-space: pre-line; padding: 8px; background: #eedca477; font-size: 10px; line-height: 1.5; }
.habitat-stats { gap: 8px; padding: 10px 0; border-bottom: 1px solid #344a4066; }
.habitat-stats .need { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 3px 7px; padding: 8px; border: 1px solid #344a40; background: #eedca4; box-shadow: 2px 2px 0 #344a40; }
.need-icon { grid-row: 1/3; width: 27px; height: 27px; fill: #344a40; }
.need--thirst .need-icon { fill: #477d88; }.need--energy .need-icon { fill: #a78031; }.need--health .need-icon { fill: #b83e24; }
.habitat-stats .need span { float: none; font-size: 10px; }.need-value { font-weight: bold; }
.habitat-stats .need meter { grid-column: 2/4; height: 9px; }
.habitat-stats .need--low { background: #e6be8b; border-color: #b83e24; }.need--low .need-value { color: #a63221; }

/* A single world viewport with a lightweight in-world HUD. */
body:has(.habitat--immersive) .start-screen { padding: 0; }
body:has(.habitat--immersive) .game-card { width: 100%; max-width: none; }
body:has(.habitat--immersive) .page-brand,body:has(.habitat--immersive) .game-card__footer { display: none; }
.habitat--immersive { padding: 0; }
.habitat--immersive .habitat-scene { background: #32a9c5; }
body:has(.habitat--immersive)::after { display: none; }
.habitat--immersive > :not(.habitat-scene) { display: none; }
.habitat--immersive .habitat-scene { height: 100dvh; min-height: 500px; aspect-ratio: auto; border: 0; background: #a5a77a; overflow: hidden; }
.habitat--immersive .habitat-scene canvas { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
/* Камера острова теперь смотрит сверху под мягким изометрическим углом. */
.habitat--immersive .habitat-header { position: absolute; inset: 16px 18px auto; pointer-events: none; }
.habitat--immersive .habitat-header strong { background: #eedca4e8; padding: 8px 12px; font-size: 21px; }
.habitat--immersive .habitat-header button { pointer-events: auto; }
.habitat--immersive .habitat-weather { position: absolute; left: 20px; top: 59px; background: #eedca4dd; padding: 5px 8px; }
.habitat--immersive .habitat-stats { position: absolute; top: 100px; left: 18px; width: 150px; margin: 0; padding: 0; border: 0; grid-template-columns: 1fr; }
.habitat--immersive .habitat-stats .need { padding: 7px; background: #eedca4e8; }
.habitat--immersive .habitat-stock { position: absolute; left: 18px; bottom: 55px; background: #eedca4df; padding: 6px 10px; }
.habitat--immersive .habitat-log { position: absolute; right: 18px; bottom: 55px; max-width: min(330px,45%); background: #eedca4df; }
.world-hint { position: absolute; left: 18px; bottom: 10px; right: 18px; text-align: center; font-size: 11px; color: #23281f; background: #eedca4cc; padding: 6px; }
.habitat-stock { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.water-bottle { display: inline-flex; align-items: center; gap: 6px; }
.water-bottle svg { width: 16px; height: 24px; image-rendering: pixelated; }
.water-bottle strong { font-size: 15px; color: #286b7c; }.water-bottle > span { font-size: 9px; }

/* Tamagotchi-style status rows along the upper and lower screen edges. */
.habitat--immersive .habitat-stats {
  position: absolute; inset: 0; width: auto; display: block;
  padding: 0; pointer-events: none;
}
.habitat--immersive .habitat-stats .need {
  position: absolute; width: 105px; display: grid;
  grid-template-columns: 27px 1fr; gap: 4px;
  padding: 8px; pointer-events: auto;
}
.habitat--immersive .need--hunger { top: 100px; left: calc(50% - 115px); }
.habitat--immersive .need--thirst { top: 100px; left: calc(50% + 10px); }
.habitat--immersive .need--energy { bottom: 18px; left: calc(50% - 115px); }
.habitat--immersive .need--health { bottom: 18px; left: calc(50% + 10px); }
.habitat--immersive .habitat-stats .need-icon { grid-column: 1; grid-row: 1/3; width: 27px; height: 27px; }
.habitat--immersive .habitat-stats .need-name { display: none; }
.habitat--immersive .habitat-stats .need-value { grid-column: 2; }
.habitat--immersive .habitat-stats meter { grid-column: 2; width: 100%; }
.habitat--immersive .habitat-stock { bottom: 80px; }
.habitat--immersive .habitat-log { bottom: 125px; }

/* Compact, frameless need icons at the side edges. */
.habitat--immersive .habitat-stats .need {
  width: 35px; min-height: 35px; padding: 3px;
  display: flex; flex-direction: column; gap: 2px;
  border: 0; background: transparent; box-shadow: none;
}
.habitat--immersive .habitat-stats .need-icon { width: 14px; height: 14px; }
.habitat--immersive .habitat-stats .need-value { font-size: 8px; line-height: 1; }
.habitat--immersive .habitat-stats .need meter { width: 25px; height: 4px; }
.habitat--immersive .need--hunger { top: calc(50% - 45px); left: 8px; bottom: auto; }
.habitat--immersive .need--thirst { top: calc(50% + 10px); left: 8px; bottom: auto; }
.habitat--immersive .need--energy { top: calc(50% - 45px); left: auto; right: 8px; bottom: auto; }
.habitat--immersive .need--health { top: calc(50% + 10px); left: auto; right: 8px; bottom: auto; }
.habitat--immersive .habitat-stats .need--low { background: transparent; }
.habitat--immersive .habitat-stats .need--low .need-icon { fill: #b83e24; }

.habitat--immersive .habitat-stats {
  inset: auto 0 14px; display: flex; justify-content: center; gap: 20px;
}
.habitat--immersive .habitat-stats .need {
  position: static; width: 44px; min-height: 46px; padding: 3px;
  color: #182d27; text-shadow: 0 1px 0 #fff3c8;
}
.habitat--immersive .habitat-stats .need-icon {
  width: 22px; height: 22px; fill: #182d27;
  filter: drop-shadow(1px 0 #fff0bc) drop-shadow(-1px 0 #fff0bc) drop-shadow(0 1px #fff0bc) drop-shadow(0 -1px #fff0bc);
}
.habitat--immersive .habitat-stats .need-value { font-size: 10px; font-weight: 900; }
.habitat--immersive .habitat-stats .need meter { width: 33px; height: 5px; }
.habitat--immersive .need--thirst .need-icon { fill: #145c78; }
.habitat--immersive .need--energy .need-icon { fill: #80500c; }
.habitat--immersive .need--health .need-icon { fill: #a52420; }

.habitat--immersive .habitat-scene .habitat-stats {
  position: absolute; top: auto; left: 0; right: 0; bottom: 12px;
  width: 100%; height: 65px; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center; gap: 24px;
  z-index: 5; background: transparent;
}
.habitat--immersive .habitat-scene .habitat-stats .need {
  position: static; width: 52px; min-height: 60px; margin: 0;
}
.habitat--immersive .habitat-scene .habitat-stats .need-icon { width: 30px; height: 30px; }
.habitat--immersive .habitat-scene .habitat-stats .need-value { font-size: 12px; }
.habitat--immersive .habitat-scene .habitat-stats .need meter { width: 40px; height: 6px; }
.habitat--immersive .habitat-stock { bottom: 90px; }
.habitat--immersive .habitat-log { bottom: 140px; }
.habitat--immersive .habitat-scene .habitat-stats .need {
  background: radial-gradient(ellipse at center, #183b4960 0, #183b4930 48%, transparent 74%);
}
.habitat--immersive .habitat-scene .habitat-stats .need-value {
  color: #fff3cf;
  text-shadow: 0 1px 2px #102d36, 1px 0 1px #102d36, -1px 0 1px #102d36;
}
.resource-icon { display: inline-flex; align-items: center; gap: 5px; }
.resource-icon svg { width: 22px; height: 30px; image-rendering: pixelated; }
.resource-icon strong { font-size: 13px; color: #263e3a; }

/* One coordinated bottom HUD; each row has its own reserved space. */
.habitat--immersive .habitat-scene .habitat-stats {
  bottom: max(12px, env(safe-area-inset-bottom));
  left: 12px; right: 12px; width: auto; height: 70px;
  gap: clamp(20px, 8vw, 52px); padding: 5px 12px;
  border-radius: 12px; background: #183b4926;
}
.habitat--immersive .habitat-scene .habitat-stats .need { flex: 0 0 52px; }
.habitat--immersive .habitat-scene .habitat-stock {
  position: absolute; bottom: calc(94px + env(safe-area-inset-bottom));
  left: 12px; right: 12px; margin: 0;
  display: flex; justify-content: center; align-items: center;
  flex-wrap: nowrap; gap: clamp(14px, 5vw, 32px);
  height: 48px; padding: 7px 12px;
  border: 1px solid #344a4055; border-radius: 8px;
  background: #eedca4ed; box-sizing: border-box;
}
.habitat--immersive .resource-icon { min-width: 42px; gap: 6px; white-space: nowrap; }
.habitat--immersive .resource-icon svg { flex: 0 0 20px; width: 20px; height: 28px; }
.habitat--immersive .resource-icon strong { font-size: 13px; line-height: 1; }
.habitat--immersive .habitat-scene .habitat-log {
  position: absolute; bottom: calc(154px + env(safe-area-inset-bottom));
  left: 12px; right: 12px; max-width: none; margin: 0;
  padding: 9px 12px; border-radius: 8px;
  background: #eedca4df; color: #263e3a;
  font-size: 10px; line-height: 1.5; max-height: 68px;
  overflow: hidden; box-sizing: border-box; pointer-events: none;
}

/* Небольшой сигнал усталости: молния дрожит, когда сил совсем нет. */
@keyframes energy-empty-shake {
  0%,18%,100% { transform:translate(0,0) rotate(0); }
  4% { transform:translate(-2px,0) rotate(-5deg); }
  8% { transform:translate(2px,-1px) rotate(5deg); }
  12% { transform:translate(-1px,1px) rotate(-3deg); }
  16% { transform:translate(1px,0) rotate(3deg); }
}
.habitat--immersive .need--energy.need--empty .need-icon {
  animation:energy-empty-shake 1.45s steps(2,end) infinite;
  transform-origin:50% 55%;
}
@media (prefers-reduced-motion:reduce) {
  .habitat--immersive .need--energy.need--empty .need-icon { animation:none; }
}
.habitat--immersive .habitat-scene .habitat-stats .need--hunger .need-icon { fill: #258c3f; }
.habitat--immersive .habitat-scene .habitat-stats .need--thirst .need-icon { fill: #247bdd; }
.habitat--immersive .habitat-scene .habitat-stats .need--energy .need-icon { fill: #ffda32; }
.habitat--immersive .habitat-scene .habitat-stats .need--experience .need-icon { fill: #ffd45a; }
.habitat--immersive .habitat-scene .habitat-stats .need--experience meter { --level-color: #ffd45a; accent-color: #ffd45a; }
.habitat .need--experience { cursor: default; }
.habitat--immersive .habitat-scene .habitat-stats .need { background: transparent; }
.habitat--immersive .habitat-scene .habitat-stats .need-icon {
  filter: none;
  stroke: #111;
  stroke-width: 1;
  stroke-linejoin: miter;
  paint-order: stroke fill;
}
.habitat-stats meter { --level-color: #36a34b; }
.habitat-stats meter[value="0"] { --level-color: #d83c32; }
.habitat-stats meter::-webkit-meter-bar { background: #eadfbf; border: 1px solid #344a40; border-radius: 2px; }
.habitat-stats meter::-webkit-meter-optimum-value,
.habitat-stats meter::-webkit-meter-suboptimum-value,
.habitat-stats meter::-webkit-meter-even-less-good-value { background: var(--level-color); }
.habitat-stats meter::-moz-meter-bar { background: var(--level-color); }
.habitat-stats meter[value="0"]::-webkit-meter-bar { background: #d83c32; }
.habitat--immersive .habitat-scene .habitat-stats .need meter {
  display: block; width: 40px; min-width: 40px; max-width: 40px;
  height: 6px; min-height: 6px; max-height: 6px;
  flex: 0 0 6px; margin: 2px 0 0; padding: 0; box-sizing: border-box;
}
.habitat--immersive .habitat-header { inset: 8px 12px auto 8px; }
.habitat--immersive .habitat-header strong { font-size: 15px; padding: 5px 7px; }
.habitat--immersive .habitat-scene canvas { cursor: url('../assets/cursor-arrow.svg') 4 3, crosshair; }
.habitat--immersive button { cursor: url('../assets/cursor-hand.svg') 12 3, pointer; }
.habitat--immersive .habitat-weather {
  top: 37px; left: 10px; margin: 0; padding: 0;
  border: 0; background: transparent;
  color: #fff2cb; font-size: 12px; font-weight: 900;
  text-shadow: -1px -1px 0 #172e2b,1px -1px 0 #172e2b,-1px 1px 0 #172e2b,1px 1px 0 #172e2b;
}
.habitat--immersive .habitat-weather { display: flex; align-items: center; gap: 8px; }
.sundial-icon { width: 25px; height: 25px; image-rendering: pixelated; }
.weather-icon { width: 25px; height: 25px; image-rendering: pixelated; }
.habitat--immersive .habitat-scene .habitat-stats { left: 12px; right: 12px; width: auto; transform: none; gap: clamp(12px,5vw,30px); }
.habitat .backpack-button { pointer-events: auto; border: 0; background: transparent; box-shadow: none; padding: 5px; width: 44px; flex: 0 0 44px; }
.backpack-button svg { width: 32px; height: 38px; image-rendering: pixelated; }
.backpack-button[aria-expanded="true"] svg { filter: brightness(1.2); }
.habitat--immersive .habitat-scene .habitat-stock {
  left: 12px; right: auto; bottom: 94px; width: 76px; height: auto;
  transform: translateY(18px); display: flex; flex-direction: column;
  align-items: stretch; gap: 12px; padding: 12px 10px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .2s steps(6,end),opacity .16s,visibility .2s;
  background: #e7c995f2; border: 2px solid #795432; border-radius: 6px;
  box-shadow: 3px 3px 0 #352b2033; z-index: 7;
}
.habitat--immersive.backpack-open .habitat-scene .habitat-stock { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.habitat--immersive .habitat-stock .resource-icon { justify-content: space-between; gap: 8px; min-width: 0; }
.habitat--immersive .habitat-stock .resource-icon svg { width: 22px; height: 30px; }
.habitat--immersive .habitat-scene .habitat-log { bottom: 100px; left: 100px; right: 12px; width: auto; transform: none; }
@media(prefers-reduced-motion:reduce) { .habitat--immersive .habitat-scene .habitat-stock { transition: none; } }
.habitat--immersive .habitat-weather > span { font-family: Arial, sans-serif; letter-spacing: -.3px; word-spacing: -1px; white-space: nowrap; }
@media(min-width:900px) {
  .habitat--immersive .habitat-scene .habitat-stock,
  .habitat--immersive .habitat-scene .habitat-stats,
  .habitat--immersive .habitat-scene .habitat-log { left: 50%; right: auto; width: 440px; transform: translateX(-50%); }
}
@media(max-width:600px) {
  .habitat--immersive .habitat-stats { top: 95px; right: 12px; left: 12px; width: auto; grid-template-columns: repeat(4,1fr); gap: 5px; }
  .habitat--immersive .habitat-stats .need { display: flex; flex-direction: column; gap: 3px; padding: 5px 2px; }
  .habitat--immersive .need-name { display: none; }.habitat--immersive .need-icon { width: 23px; height: 23px; }
  .habitat--immersive .habitat-log { left: 12px; right: 12px; bottom: 90px; max-width: none; font-size: 9px; }
  .habitat--immersive .habitat-stock { left: 12px; bottom: 50px; font-size: 9px; }
  .world-hint { font-size: 9px; bottom: 5px; }
}
.habitat--immersive.backpack-open .habitat-scene .habitat-stock,
.habitat--immersive:not(.backpack-open) .habitat-scene .habitat-stock { left: 12px; right: auto; width: 76px; bottom: 94px; }
.habitat--immersive .habitat-scene .habitat-stats { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; transform: none; }
.habitat--immersive .habitat-scene .habitat-header { gap: 12px; align-items: start; }
.habitat--immersive .habitat-scene .habitat-header .habitat-log {
  margin: 2px 0; padding: 5px 8px; max-height: 32px;
  white-space: normal; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.35; border-radius: 4px;
}
.habitat--immersive .habitat-scene .habitat-weather { top: 58px; }
@media(max-width:500px) {
  .habitat--immersive .habitat-scene .habitat-header { gap: 8px; }
  .habitat--immersive .habitat-scene .habitat-header .habitat-log { margin: 1px 0; padding: 4px 5px; font-size: 8px; max-height: 31px; }
}
.habitat--immersive .habitat-header { display: grid; grid-template-columns: auto auto minmax(0,1fr) auto auto; gap: 8px; align-items: start; }
.habitat--immersive .habitat-header strong { white-space: nowrap; }
.save-button { display: inline-flex; align-items: center; gap: 5px; }
.save-button .save-icon { width: 13px; height: 13px; flex-shrink: 0; fill: currentColor; }
.save-button.is-saved { background: #3f8b62 !important; color: #fff9e6 !important; border-color: #1e4a32 !important; box-shadow: 2px 2px 0 #1e4a32 !important; }
.save-button.is-saved .save-icon { fill: #fff9e6; }
.habitat--immersive .habitat-scene .habitat-header .habitat-log {
  position: static; width: auto; max-width: none; max-height: 42px;
  margin: 0; padding: 4px 7px; font-size: 9px; line-height: 1.3;
  border: 0; background: #eedca4bd; border-radius: 3px; transform: none;
}
@media(max-width:500px) {
  .habitat--immersive .habitat-header { gap: 4px; }
  .habitat--immersive .habitat-header strong { font-size: 12px; padding: 5px; }
  .habitat--immersive .habitat-header button { font-size: 9px; padding: 6px; }
  .habitat--immersive .habitat-scene .habitat-header .habitat-log { font-size: 8px; padding: 3px; }
}
.habitat .habitat-stock button.resource-icon { padding: 0; background: transparent; border: 0; box-shadow: none; }
.habitat-stock button.resource-icon:hover { filter: brightness(1.15); }
.habitat-stock :is(.tool-icon,.basket-icon,.knife-icon).is-equipped svg { filter:drop-shadow(0 0 3px #ffd45a); }
.habitat-stock :is(.tool-icon,.basket-icon,.knife-icon).is-equipped strong { color:#ffd45a; text-shadow:1px 1px 0 #182b29; }
.habitat .need--hunger,.habitat .need--thirst { cursor: default; }
.habitat--immersive .habitat-scene .habitat-log {
  top: 78px; bottom: auto; left: 10px; right: auto;
  width: min(330px, calc(100% - 80px)); max-width: none;
  max-height: 48px; padding: 6px 9px; margin: 0;
  font-size: 9px; line-height: 1.4;
  border-radius: 4px; border-left: 2px solid #866a3c;
  background: #eedca4c9; box-shadow: none; transform: none;
  overflow: hidden; pointer-events: none;
}
.multiplayer-button[data-state="online"] { background:#3f8b62; color:#fff4c8; }
.habitat--immersive > .multiplayer-dialog[open] { display:block; }
.multiplayer-dialog { width:min(430px,calc(100% - 28px)); padding:18px; border:4px solid #49331f; border-radius:6px; background:#f1dda8; color:#342a21; box-shadow:7px 7px 0 #172e2b80; font:12px/1.45 'Courier New',monospace; }
.multiplayer-dialog::backdrop { background:#172e2baa; }
.multiplayer-dialog header { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.multiplayer-dialog h2 { margin:0; font:bold italic 22px Georgia,serif; }
.multiplayer-dialog header button { width:30px; height:30px; padding:0; border:2px solid #49331f; background:#b95b3b; color:#fff1bd; }
.multiplayer-status { padding:9px; border:2px dashed #9d7546; background:#ead09a; }
.multiplayer-link { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; }
.multiplayer-link[hidden] { display:none; }
.multiplayer-link input { min-width:0; padding:8px; border:2px solid #49331f; background:#fff1c4; color:#342a21; font:10px monospace; }
.multiplayer-link button { padding:7px; border:2px solid #49331f; background:#c34b31; color:#fff1bd; font:bold 10px monospace; }
.multiplayer-note { margin:12px 0 0; font-size:10px; color:#745a38; }
.connection-gate { position:absolute; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:24px; background:#e8d7a9; color:#342a21; text-align:center; }
.connection-gate[hidden] { display:none; }
.connection-gate strong { font:700 22px Georgia,serif; }
.connection-gate p { max-width:420px; font:14px/1.6 monospace; }
.connection-gate button { padding:10px 18px; border:2px solid #49331f; background:#bc563a; color:#fff1bd; cursor:pointer; font:bold 13px monospace; }
@media(max-width:500px){.habitat--immersive .habitat-header{grid-template-columns:auto auto minmax(0,1fr) auto auto;gap:4px}.multiplayer-button,.save-button{padding:5px!important;font-size:8px!important}.save-button .save-icon{width:11px;height:11px}.multiplayer-link{grid-template-columns:1fr}.multiplayer-link button{width:100%}}