/* ============================================================================
   webOS monitor emulator (QHD) — in-place mount styling.

   The design stage IS the 16:9 monitor screen (960x540). It is positioned +
   scaled over the photographed QHD monitor in the room's front.png via
   placement CSS vars (--emu-mon-x / --emu-mon-y / --emu-mon-scale, set by
   applyEmulatorMonitorPlacement in main.js). NO bezel — the photo provides
   the frame, same as the OLED (v2) / TV (v3) engines.

   The remote artwork (magic-remote-front.png) hangs off to the RIGHT of the
   screen (overflow visible) and scales with it. On-screen hotspots (screenBtns)
   are percent-positioned by inline style from the JSON; remote hotspots
   (remoteBtns + 6 globals) are positioned HERE by name — lifted 1:1 from the
   monitor repo's _emulator.scss (% of the remote box).

   Kept separate from css/emulator.css (v3) and css/emulator-v2.css (v2).
   ============================================================================ */

.webos-emulator-mon {
   position: absolute;
   inset: 0;
   overflow: visible; /* the remote hangs off the right of the screen stage */
}

/* Disclaimer note-layer — a root-level 1920x1080 box scaled by --emu-mon-fit so
   the footnote lands in the same place/size as the v3 emulator's (whose note
   lives in its 1920x1080 stage). Below: the note styles are copied verbatim
   from emulator.css so all hub emulators show an identical disclaimer. */
.webos-emulator-mon__note-layer {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 1920px;
   height: 1080px;
   transform: translate(-50%, -50%) scale(var(--emu-mon-fit, 1));
   transform-origin: center;
   pointer-events: none; /* footnote only — never blocks the screen/remote */
}
.webos-emulator__note {
   position: absolute;
   z-index: 16;
   left: 40px;
   bottom: 40px;
   width: fit-content;
   padding: 16px;
   border-radius: 10px;
   background: rgba(235, 235, 235, 0.9);
   color: #1a1a1a;
}
.webos-emulator__note ul {
   margin: 0;
   padding-left: 18px;
   display: flex;
   flex-direction: column;
   gap: 3px;
}
.webos-emulator__note li {
   font-size: 18px;
   font-weight: 400;
   line-height: 1.4;
}

/* The stage IS the screen box. Its aspect is 1.7536 (W/H), NOT 16:9 — the
   monitor sim authored the screenBtns %s against a 1.7536 frame (measured from
   its square app icons: every one has height% / width% = 1.7536). A 16:9 box
   makes the hotspots drift vertically (align the top row, the bottom drifts).
   960 / 1.7536 = 547.4. */
.webos-emulator-mon__stage {
   position: absolute;
   left: var(--emu-mon-x, 50%);
   top: var(--emu-mon-y, 44%);
   width: 960px;
   height: 547.4px;
   /* --emu-mon-scale = per-category design scale (tuned at the 1920px frame);
      --emu-mon-fit = mountW/1920, set by the engine on resize so the emulator
      scales 1:1 with the room photo instead of staying a fixed pixel size
      (mirrors the v2/v3 engines). Position stays locked via x/y %. */
   transform: translate(-50%, -50%) scale(calc(var(--emu-mon-scale, 0.94) * var(--emu-mon-fit, 1)));
   transform-origin: center center;
   overflow: visible;
   cursor: var(--emu-mon-cursor, auto);
}

/* Monitor screen — same 1.7536 box as the hotspot frame. The 16:9 screenshot
   is inset ~5.5px (padding) so it sits inside the frame like the sim (whose
   screen image is inset within its hotspot container by container 3px + img
   2px padding). Aspect (1.7536 frame) + inset (5.5px) together align the
   screenBtns. The padding area is black — a thin screen edge. */
.webos-emulator-mon__screen {
   position: absolute;
   left: 0;
   top: 0;
   width: 960px;
   height: 547.4px;
   padding: 5.5px;
   background: #000;
   z-index: 8;
   pointer-events: none;
}
.webos-emulator-mon__screen--fade {
   animation: emu-mon-fade 0.3s ease;
}
@keyframes emu-mon-fade {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}

/* On-screen hotspot frame — overlays the screen exactly; the screenBtns %
   coords are measured against this box. */
.webos-emulator-mon__screen-btns {
   position: absolute;
   left: 0;
   top: 0;
   width: 960px;
   height: 547.4px;
   z-index: 12;
}

/* Remote artwork, off to the right of the screen (aspect 566/2146 ~= 0.264).
   The image content is inset ~14px top/bottom (padding) so the artwork sits
   centered inside a taller hotspot frame — mirroring the sim, where the remote
   image (height 100%) sits inside a wrapper with 12px top/bottom padding while
   the hotspot frame covers the full padded box. Without this the remoteBtns
   are off vertically by that inset. width:auto derives the box width from the
   inset height, so the frame width below must match (~182px). */
.webos-emulator-mon__remote {
   position: absolute;
   left: 1000px;
   top: -90px;
   height: 720px;
   width: auto;
   padding: 14px 0;
   z-index: 10;
   pointer-events: none;
}

/* Remote hotspot frame — the remoteBtns %/name coords are measured against
   this box (width matches the inset remote artwork box; taller than the
   artwork by the 14px top/bottom inset). */
.webos-emulator-mon__remote-btns {
   position: absolute;
   left: 1000px;
   top: -95px;
   /* Width = the inset remote artwork box width at height 720 (aspect
      397/1490 = 0.2664 of emulator-remote-2.png): 692 * 0.2664 ~= 184.4. */
   width: 184.4px;
   height: 720px;
   z-index: 22;
}

/* -- on-screen hotspots (percent-positioned inline) ------------------------- */
.webos-emulator-mon .emu-mon-btn {
   position: absolute;
   margin: 0;
   padding: 0;
   border: var(--emu-mon-debug, 2px solid #ff0099);
   border-radius: 3px;
   background: transparent;
   cursor: pointer;
   transition: background-color 250ms ease;
}
.webos-emulator-mon .emu-mon-btn:hover {
   background: rgba(255, 0, 153, 0.3);
}
.webos-emulator-mon .emu-mon-btn.round-corners {
   border-radius: 13px;
}
.webos-emulator-mon .emu-mon-btn.app {
   border-radius: 20px;
}
.webos-emulator-mon .emu-mon-btn.game-optimizer-menu {
   border-top-left-radius: 13px;
   border-bottom-right-radius: 13px;
}
.webos-emulator-mon .emu-mon-btn.bottom-arrow {
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   border-bottom-left-radius: 18px;
   border-bottom-right-radius: 18px;
}
.webos-emulator-mon .emu-mon-btn.top-arrow {
   border-top-left-radius: 18px;
   border-top-right-radius: 18px;
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
}

/* -- remote hotspots (positioned by name; lifted from _emulator.scss) ------- */
.webos-emulator-mon .emu-mon-rbtn {
   position: absolute;
   margin: 0;
   padding: 0;
   border: var(--emu-mon-debug, 2px solid #ff0099);
   background: transparent;
   cursor: pointer;
   transition: background-color 250ms ease;
}
.webos-emulator-mon .emu-mon-rbtn:hover {
   background: rgba(255, 0, 153, 0.4);
}
.webos-emulator-mon .emu-mon-rbtn--home {
   width: 25%;
   height: 4.5%;
   top: 45%;
   left: 8%;
   border-radius: 13px;
}
.webos-emulator-mon .emu-mon-rbtn--quick-settings {
   width: 25%;
   height: 4.5%;
   top: 45%;
   right: 8%;
   border-radius: 13px;
}
.webos-emulator-mon .emu-mon-rbtn--back {
   width: 24.5%;
   height: 4.5%;
   top: 64.3%;
   left: 8.5%;
   border-radius: 13px;
}
.webos-emulator-mon .emu-mon-rbtn--guide {
   width: 24.5%;
   height: 4.5%;
   top: 64.3%;
   right: 8.5%;
   border-radius: 13px;
}
.webos-emulator-mon .emu-mon-rbtn--left {
   width: 16.5%;
   height: 6.5%;
   top: 54%;
   left: 16.5%;
   border-radius: 99px 50px 50px 99px;
}
.webos-emulator-mon .emu-mon-rbtn--right {
   width: 16.5%;
   height: 6.5%;
   top: 54%;
   left: 67.5%;
   border-radius: 50px 99px 99px 50px;
}
.webos-emulator-mon .emu-mon-rbtn--bottom {
   width: 25.74%;
   height: 4.1%;
   bottom: 34.4%;
   left: 37%;
   border-radius: 50px 50px 99px 99px;
}
.webos-emulator-mon .emu-mon-rbtn--top {
   width: 25.74%;
   height: 4.1%;
   top: 48.7%;
   left: 37%;
   border-radius: 99px 99px 50px 50px;
}
.webos-emulator-mon .emu-mon-rbtn--select {
   width: 32%;
   height: auto;
   aspect-ratio: 1 / 1;
   bottom: 38.7%;
   left: 34%;
   border-radius: 99px;
}
.webos-emulator-mon .emu-mon-rbtn--netflix {
   width: 23%;
   height: auto;
   aspect-ratio: 1 / 1;
   bottom: 25.6%;
   left: 10.5%;
   border-radius: 99px;
}
.webos-emulator-mon .emu-mon-rbtn--prime {
   width: 23%;
   height: auto;
   aspect-ratio: 1 / 1;
   bottom: 25.6%;
   right: 11%;
   border-radius: 99px;
}
.webos-emulator-mon .emu-mon-rbtn--power {
   width: 23%;
   height: auto;
   aspect-ratio: 1 / 1;
   top: 8.3%;
   left: 19%;
   border-radius: 99px;
}