/* Compact observation-window tuning: flat system menu, in-habitat species label, handed controls and non-stretched portrait layout. */
.window-system-menu{position:relative;min-height:27px;display:flex;align-items:center;gap:4px;padding:2px 92px 2px 5px;background:#b8bda2;color:#334436;border-top:2px solid #d5d7bd;border-bottom:2px solid #58674e;font-size:10px;line-height:1;white-space:nowrap;overflow:hidden}
.system-menu-left{display:flex;align-items:center;gap:2px;min-width:0}
.language-menu{display:flex;align-items:center;gap:0;padding-right:4px;margin-right:2px;border-right:1px solid #89967b}
.window-system-menu button{appearance:none;-webkit-appearance:none;height:20px;min-height:20px;min-width:20px;margin:0;padding:0 4px;border:0!important;outline:0;background:transparent;color:#40513f;box-shadow:none!important;border-radius:0;line-height:20px;text-align:center}
.window-system-menu button:hover{background:#aeb79a}
.window-system-menu button[aria-pressed="true"]{background:#536d61;color:#e2e2c8}
.window-system-menu button:focus-visible{outline:1px dotted #52644f!important;outline-offset:-2px}
#musicBtn,#soundBtn{display:grid;place-items:center;width:26px;min-width:26px;height:22px!important;min-height:22px!important;margin:0!important;padding:0!important;opacity:1!important;color:#40513f}
#musicBtn{font-size:13px}
.window-system-menu #musicBtn[aria-pressed="false"],.window-system-menu #soundBtn[aria-pressed="false"]{background:transparent;color:#40513f;opacity:1!important}
.window-system-menu #musicBtn[aria-pressed="true"],.window-system-menu #soundBtn[aria-pressed="true"]{background:#536d61;color:#e2e2c8;opacity:1!important}
.window-system-menu #soundBtn .pixel-icon{transform:scale(.78)}
.window-system-menu #soundBtn::after{display:none}
.speed-choice{display:grid!important;place-items:center!important;padding:0!important}
#speedFastBtn{width:34px;min-width:34px;margin-left:2px;border-left:1px solid #89967b!important}
#speedTurboBtn{width:40px;min-width:40px}
.speed-arrows{display:flex;align-items:center;justify-content:center;gap:1px;height:10px;pointer-events:none}
.speed-arrows i{display:block;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:5px solid currentColor}
.system-clock{position:absolute;right:10px;top:50%;transform:translateY(-50%);margin:0;padding:0;min-width:76px;text-align:right;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.isopod-wave-glyph{display:inline-block;width:.5em;transform:scaleX(.5);transform-origin:left center;overflow:visible;vertical-align:baseline}

.status-row{display:flex;align-items:center;justify-content:flex-start!important;gap:6px;flex-wrap:nowrap!important;overflow:hidden;min-height:24px;padding:1px 6px}
.status-row .instruments{display:flex;gap:5px;align-items:center;font-size:11px;padding:0;min-height:0;min-width:0;white-space:nowrap;overflow:hidden}

/* Explicitly establish the habitat as the containing block. Without this, the species label can anchor to the outer window instead of the canvas. */
#boxFrame .habitat-viewport{position:relative!important;isolation:isolate;overflow:hidden}
#boxFrame #habitat{position:relative;z-index:1}
/* Species names should read like a quiet overlay, close to the mood-bubble text rather than a panel. */
.species-status{display:block!important;position:absolute!important;top:8px!important;right:8px!important;left:auto!important;bottom:auto!important;z-index:30!important;max-width:52%;padding:1px 2px;margin:0;border:0!important;background:transparent!important;box-shadow:none!important;color:rgba(222,224,216,.72)!important;font-size:9px;line-height:1.45;white-space:pre-line;text-align:right;cursor:pointer;opacity:1!important;text-shadow:1px 1px rgba(38,49,38,.42);overflow-wrap:anywhere;pointer-events:auto!important}
.species-status[data-empty="true"]{display:none!important}
.species-status:hover{color:rgba(236,238,230,.88)!important}
.species-status:focus-visible{outline:1px dotted rgba(210,214,202,.55);outline-offset:1px}

.habitat-library{left:auto!important;right:8px!important;z-index:20}
#boxFrame .zoom-tools{right:auto!important;left:8px!important;z-index:20}
.habitat-library,.scope-switch-frame,#boxFrame .zoom-tools{padding:2px!important;gap:2px!important;border-width:1px!important}
#boxFrame .zoom-tools button{position:relative;display:grid!important;place-items:center;width:24px!important;min-width:24px!important;height:24px!important;min-height:24px!important;border-width:1px!important;font-size:0!important;color:#30492e}
#zoomOut::before,#zoomIn::before{content:'';position:absolute;left:50%;top:50%;width:8px;height:1px;background:currentColor;transform:translate(-50%,-50%)}
#zoomIn::after{content:'';position:absolute;left:50%;top:50%;width:1px;height:8px;background:currentColor;transform:translate(-50%,-50%)}
#zoomReset::before{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;border:1px solid currentColor;transform:translate(-50%,-50%)}
#zoomReset::after{content:'';position:absolute;left:50%;top:50%;width:1px;height:1px;background:currentColor;transform:translate(-50%,-50%)}
#boxFrame #zoomLevel{min-width:22px!important;font-size:9px!important;font-weight:400!important;letter-spacing:-.2px!important;opacity:.9}
.habitat-library #catalogBtn,.scope-switch-frame :is(#scopeToggle,#scopeCenter){width:26px!important;min-width:26px!important;height:26px!important;min-height:26px!important;border-width:2px!important}
.habitat-library #catalogBtn .pixel-icon,.scope-switch-frame :is(#scopeToggle,#scopeCenter) .pixel-icon{transform:scale(.94)!important;transform-origin:center!important;opacity:1!important}

/* The observation is a fixed application surface; only prose scrolls. */
html,body{height:100%;min-height:0;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0;width:100%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#game{height:100dvh;min-height:0;padding:6px 8px max(6px,env(safe-area-inset-bottom));overflow:hidden}
#game .scope-dial,#game .scope-dial *,#game .scope-reset{touch-action:none}
.play-view .box-frame{overflow:hidden}
.window-content{justify-content:flex-start;gap:4px}
/* Keep the camera surface full-width when vertical space is limited.
   Its height is fitted separately; the camera crops and remains draggable. */
#boxFrame .window-content>.habitat-viewport{width:100%!important;aspect-ratio:auto;align-self:stretch}
.window-story{min-height:0;flex:1}
.window-story .record{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#game .window-story .record,#game .window-story .record *{touch-action:pan-y}
.window-story .actions,.window-story .bottom-bar{flex-shrink:0}
@media(min-width:900px),(orientation:landscape){
 #boxFrame .window-content>.habitat-viewport{width:59%!important;flex-shrink:0;align-self:center}
 .window-story .record{flex:1;max-height:none!important;overflow-y:auto}
}

@media(max-width:430px){
  .window-system-menu{gap:2px;padding:2px 80px 2px 3px;font-size:9px}
  .system-menu-left{gap:1px}
  .language-menu{padding-right:2px;margin-right:1px}
  .window-system-menu button{min-width:18px;padding-inline:3px;font-size:9px}
  #musicBtn,#soundBtn{width:22px;min-width:22px;height:20px!important;min-height:20px!important}
  #speedFastBtn{width:30px;min-width:30px}
  #speedTurboBtn{width:35px;min-width:35px}
  .speed-arrows i{border-top-width:3px;border-bottom-width:3px;border-left-width:4px}
  .system-clock{right:6px;font-size:9px;min-width:66px}
  .status-row{padding-inline:4px}
  .status-row .instruments{font-size:10px;gap:4px}
  .species-status{top:6px!important;right:6px!important;max-width:58%;font-size:8px;padding:1px 2px}
}

/* Four independent scales remain readable at narrow widths, without clipping. */
.status-row:has(.instruments[data-layout="scales"]){overflow:visible;flex-shrink:0}
.status-row .instruments[data-layout="scales"]{flex-wrap:wrap;overflow:visible;white-space:normal;transform:none;row-gap:3px;padding-block:2px}
.status-row .instruments[data-layout="scales"]>span{white-space:nowrap}
.status-row .instruments[data-layout="scales"]>span+span::before{content:'·';margin-right:5px;opacity:.65}
/* Ground markings identify a place to walk to, projected with the scenery camera. */
#boxFrame .shore-nav{position:absolute;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:90px;min-height:52px;padding:4px 2px;transform:translate(-50%,-50%)!important;border:0!important;box-shadow:none!important;background:transparent!important;color:#dae0bf;touch-action:manipulation;text-align:center}
#boxFrame .shore-nav canvas{width:65px;height:60px;image-rendering:pixelated;pointer-events:none;opacity:.9}
#boxFrame .shore-nav .shore-walk-label{opacity:.9;font-size:10px;line-height:1.3;white-space:nowrap;pointer-events:none;text-shadow:1px 1px #29392b,0 2px #29392b,-1px 0 #354735,0 -1px #354735}
#boxFrame .shore-nav:hover canvas,#boxFrame .shore-nav:focus-visible canvas{opacity:1;filter:brightness(1.14)}
#boxFrame .shore-nav:active canvas{transform:translateY(1px)}
#boxFrame .shore-nav[hidden]{display:none!important}
@media(max-width:360px){#boxFrame .shore-nav{width:82px}#boxFrame .shore-nav .shore-walk-label{font-size:9px}}