/* ============================================================================
   webOS 2 emulator (OLED) — in-place mount styling.

   The design stage IS the TV screen (964x600). It is positioned + scaled over
   the photographed OLED TV in the room's front.png via placement CSS vars
   (--emu2-x / --emu2-y / --emu2-scale, set by applyEmulatorV2Placement in
   main.js). NO bezel — the photo provides the TV frame, same as the v3 engine.

   The remote artwork hangs off to the RIGHT of the screen (overflow visible)
   and scales together with it. All layer offsets are lifted 1:1 from webos2's
   index.css / index2.css, re-anchored to the screen's top-left (0,0).

   Kept separate from css/emulator.css (the v3 engine).
   ============================================================================ */

.webos-emulator-v2 {
   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 --emu2-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-v2__note-layer {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 1920px;
   height: 1080px;
   transform: translate(-50%, -50%) scale(var(--emu2-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; positioned + scaled over the photo TV. */
.webos-emulator-v2__stage {
   position: absolute;
   left: var(--emu2-x, 50%);
   top: var(--emu2-y, 44%);
   /* The box IS the 16:9 screen — matched to the hotspot frame (960x535,
      ~16:9) so the 1920x1080 screenshots fill it without squish and the
      hotspots align. */
   width: 960px;
   height: 535px;
   /* --emu2-scale = per-category design scale (tuned at the 1920px frame);
      --emu2-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 v3 engine's stage fit). Position stays locked via x/y %. */
   transform: translate(-50%, -50%) scale(calc(var(--emu2-scale, 1.3) * var(--emu2-fit, 1)));
   transform-origin: center center;
   overflow: visible;
   cursor: var(--emu2-cursor, auto);
}

/* TV screen — power-off base + current screen fill the same 960x535 (~16:9)
   box, exactly overlaying the hotspot frame below. */
.webos-emulator-v2__screen {
   position: absolute;
   left: 0;
   top: 0;
   width: 960px;
   height: 535px;
   pointer-events: none;
}
.webos-emulator-v2__screen--base {
   z-index: 7;
}
.webos-emulator-v2__screen--current {
   z-index: 8;
}
.webos-emulator-v2__screen--fade {
   animation: emu2-fade 0.3s ease;
}
@keyframes emu2-fade {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}

/* Remote artwork, off to the right of the screen. */
.webos-emulator-v2__remote {
   position: absolute;
   left: 989px;
   top: -3px;
   height: 605px;
   width: auto;
   z-index: 10;
   pointer-events: none;
}

/* Hotspot coordinate frames — the JSON button top/left are measured inside
   these, so their size/position must match webos2 exactly (re-anchored to
   the screen top-left). */
.webos-emulator-v2__screen-btns {
   position: absolute;
   left: 0;
   top: 0;
   width: 960px;
   height: 535px;
   z-index: 12;
}
.webos-emulator-v2__remote-btns {
   position: absolute;
   left: 979px;
   top: -3px;
   width: 141px;
   height: 600px;
   z-index: 22;
}

/* Clickable regions — shown with the webos2 pink outline by default so the
   user sees the hotspots (matches the original emulator). Override the
   --emu2-debug-hotspots var to restyle/hide them (e.g. "0 solid transparent"
   for a clean look). */
.webos-emulator-v2 .emulator-button {
   position: absolute;
   margin: 0;
   padding: 0;
   border: var(--emu2-debug-hotspots, 2px solid #ff0099);
   background: transparent;
   cursor: pointer;
   transition: background-color 120ms ease;
}
.webos-emulator-v2 .emulator-button:hover {
   background: rgba(255, 255, 255, 0.14);
}

/* Back button — fixed spot in the remote frame (webos2 BackButton). */
.webos-emulator-v2__back {
   position: absolute;
   top: 388px;
   left: 23px;
   width: 38px;
   height: 26px;
   border-radius: 15px;
   margin: 0;
   padding: 0;
   /* Same visible outline as the other hotspots so the back box shows. */
   border: var(--emu2-debug-hotspots, 2px solid #ff0099);
   background: transparent;
   cursor: pointer;
}
.webos-emulator-v2__back[hidden] {
   display: none;
}