:root{
  --bg:#041126;
  --bg2:#071f44;
  --line:rgba(255,255,255,.22);
  --line2:rgba(255,212,0,.34);
}
*{box-sizing:border-box}
html,body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#020812;
}
body{
  display:grid;
  place-items:center;
  font-family:Arial,"Segoe UI",sans-serif;
}
.stage{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 40%,rgba(14,86,180,.16),transparent 48%),
    linear-gradient(145deg,var(--bg2),var(--bg));
}
.frame{
  position:relative;
  display:grid;
  place-items:center;
  width:calc(100% - clamp(14px,2.2vw,38px));
  height:calc(100% - clamp(14px,2.2vw,38px));
  padding:clamp(5px,.46vw,10px);
  border:1px solid var(--line);
  border-radius:clamp(8px,1vw,16px);
  background:rgba(255,255,255,.018);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 16px 42px rgba(0,0,0,.28),
    0 0 40px rgba(0,92,210,.055);
}
.frame:before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  border-radius:inherit;
  border-top-color:var(--line2);
}
video{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  border-radius:calc(clamp(8px,1vw,16px) - 4px);
  background:#000;
}
.state{
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  padding:8vw;
  text-align:center;
  color:rgba(255,255,255,.7);
  font-size:clamp(14px,2.2vw,28px);
  line-height:1.4;
  pointer-events:none;
}
.state[hidden]{display:none!important}

/* EURONICS_PROMO_TV_R5_FULLSCREEN_SIGNAGE */
html:fullscreen,
html:fullscreen body,
html:-webkit-full-screen,
html:-webkit-full-screen body{
  width:100vw;
  height:100vh;
  background:#020812;
}
html:fullscreen .stage,
html:-webkit-full-screen .stage{
  width:100vw;
  height:100vh;
  inset:0;
}
html:fullscreen,
html:-webkit-full-screen{
  cursor:none;
}