:root{
  /* Base cutout geometry (desktop) */
  --sx: 25.4%;
  --sy: 7.3%;
  --sw: 39.9%;
  --sh: 46.6%;

  /* Responsive nudges (CSS-only; JS doesn't override) */
  --sx-off: 0%;
  --sy-off: 0%;
  --sw-add: 0%;
  --sh-add: 0%;

  /* Background motion */
  --bg-scale: 1;
  --bg-x: 0px;
  --bg-y: 0px;

  /* Transitions */
  --scene-ms: 1800ms;
  --scene-ease: ease-in-out;
}

html, body { height:100%; }

body{
  margin:0;
  background:#0b0b0b;
  display:grid;
  place-items:center;
  overflow:hidden;
  font-family: Arial, Helvetica, sans-serif;
  cursor: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'>\
<path d='M8 6 L8 52 L20 42 L28 60 L38 56 L30 38 L46 38 Z' fill='white' stroke='black' stroke-width='5' stroke-linejoin='miter'/>\
</svg>") 8 6, auto;
}

.viewport{
  position: fixed;
  inset: 0;
  display:grid;
  place-items:center;
  background:#000;
  overflow:hidden;
}

.stage{
  position:relative;
  aspect-ratio:16/9;
  width:100%;
  max-width:1600px;
  transform-origin: top center;
}

.frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  pointer-events:none;
  user-select:none;

  transform-origin: top center;
  transform: translate(var(--bg-x), var(--bg-y)) scale(var(--bg-scale));
  transition: transform var(--scene-ms) var(--scene-ease);
  will-change: transform;
}

.screen{
  position:absolute;

  left:   calc(var(--sx) + var(--sx-off));
  top:    calc(var(--sy) + var(--sy-off));
  width:  calc(var(--sw) + var(--sw-add));
  height: calc(var(--sh) + var(--sh-add));

  border-radius: 25px;
  overflow:hidden;

  transition:
    left   var(--scene-ms) var(--scene-ease),
    top    var(--scene-ms) var(--scene-ease),
    width  var(--scene-ms) var(--scene-ease),
    height var(--scene-ms) var(--scene-ease);
  will-change: left, top, width, height;
}

.screen iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:transparent;
  transform:translateZ(0);
}

.scanlines{
  position:absolute;
  inset:0;
  pointer-events:none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.18) 0px,
    rgba(0,0,0,.18) 1px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0) 4px
  );
  mix-blend-mode:multiply;
  opacity:.55;
  background-size:100% 4px;
  transition: opacity 180ms ease;
}

.clickCatcher{
  position:absolute;
  inset:0;
  background:transparent;
  pointer-events:none;
  z-index:5;
}
body.scene-login .clickCatcher{ pointer-events:auto; }

body.debug .screen{
  outline:3px solid black;
  outline-offset:2px;
}

/* Scan-bar overlay */
.screen::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.08) 35%,
    rgba(255,255,255,.18) 45%,
    rgba(0,0,0,.28) 55%,
    rgba(0,0,0,.18) 65%,
    rgba(0,0,0,0) 100%
  );
  mix-blend-mode: overlay;
  transform: translateY(-70%);
}

@keyframes vgaJitter {
  0%{transform:translate(0,0);}
  10%{transform:translate(-2px,0);}
  20%{transform:translate(2px,1px);}
  30%{transform:translate(0,-2px);}
  40%{transform:translate(2px,0);}
  50%{transform:translate(-2px,2px);}
  60%{transform:translate(0,0);}
  70%{transform:translate(2px,-2px);}
  80%{transform:translate(-2px,0);}
  90%{transform:translate(0,2px);}
  100%{transform:translate(0,0);}
}
@keyframes scanDrift { 0%{background-position:0 0;} 100%{background-position:0 40px;} }
@keyframes vgaIntensity {
  0%{opacity:.95;filter:none;}
  12%{opacity:.40;filter:grayscale(1) contrast(2.2) brightness(.78) blur(1.2px);}
  25%{opacity:.55;filter:grayscale(1) contrast(1.7) brightness(.90) blur(.7px);}
  70%{opacity:.55;filter:grayscale(1) contrast(1.7) brightness(.90) blur(.7px);}
  90%{opacity:.85;filter:grayscale(.35) contrast(1.15) brightness(.98) blur(.2px);}
  100%{opacity:1;filter:none;}
}
@keyframes rollBar { 0%{transform:translateY(-70%);} 100%{transform:translateY(70%);} }

body.zooming .screen{ animation:vgaJitter 85ms linear infinite; }
body.zooming .screen iframe{ animation:vgaIntensity var(--scene-ms) linear both; }
body.zooming .scanlines{ opacity:.92; animation:scanDrift 160ms linear infinite; }
body.zooming .screen::after{ opacity:.45; animation:rollBar 900ms linear infinite; }

body.scan-event .screen::after{
  opacity:.35;
  animation: rollBar 1200ms linear infinite;
}

/* Snap between compact/desktop on resize */
body.no-scene-anim .screen,
body.no-scene-anim .frame{
  transition:none !important;
}

/* Big screens: enlarge cutout */
@media (min-width: 1600px){
  :root{
    --sx-off: -4%;
    --sy-off: -2%;
    --sw-add:  7%;
    --sh-add:  7%;
  }
}

/* Compact: iframe only */
@media (max-width: 1599px){
    .clickCatcher{ display:none !important; }
  .scanlines{ pointer-events:none !important; } /* already, but keep */
  .screen::after{ pointer-events:none !important; } /* already, but keep */
  .viewport{
    place-items:start;
    align-items:start;
    justify-items:start;
  }

  .frame{ display:none !important; }

  :root{
    --sx-off:0%;
    --sy-off:0%;
    --sw-add:0%;
    --sh-add:0%;
  }

  .stage{
    width:100vw;
    height:100vh;
    max-width:none;
  }

  .screen{
    left:0 !important;
    top:0 !important;
    width:100vw !important;
    height:100vh !important;
    border-radius:0 !important;
    transition:none !important;
  }
}

/* Compact mode: keep scanlines, disable zoom interference visuals */
body.compact.zooming .screen,
body.compact.zooming .screen iframe,
body.compact.zooming .scanlines,
body.compact.zooming .screen::after{
  animation:none !important;
}
body.compact .scanlines{
  opacity:.55;
  animation:none;
}

@media (prefers-reduced-motion: reduce){
  .frame, .screen{ transition:none !important; }
  body.zooming .screen,
  body.zooming .screen iframe,
  body.zooming .scanlines,
  body.zooming .screen::after{ animation:none !important; }
}