/* Fine, stationary tube texture. DOM text stays at native resolution. */
:root {
  --crt-inset: 12px;
  --crt-radius: 24px;
}
/* The device supplies the casing. Only the convex optical edge is simulated. */
#crt-glass-edge {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}
#crt-viewport {
  position: fixed;
  inset: var(--crt-inset);
  z-index: 1;
  /* Establish a shared containing block for the scene, fixed HUD and dialogs. */
  contain: layout;
  isolation: isolate;
  border-radius: var(--crt-radius);
  background: #030207;
}
canvas#scene { border-radius: var(--crt-radius); }
#crt-screen {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  pointer-events: none;
  border-radius: var(--crt-radius);
}
#crt-screen * { pointer-events: none; }
.crt-texture, .crt-glass, .crt-power { position: absolute; inset: 0; }
.crt-texture {
  background:
    repeating-linear-gradient(180deg, transparent 0 2px, rgba(0, 0, 0, .025) 2px 3px),
    repeating-linear-gradient(90deg, rgba(255, 80, 100, .014) 0 1px, rgba(90, 255, 175, .01) 1px 2px, rgba(95, 130, 255, .014) 2px 3px);
}
.crt-glass {
  border-radius: inherit;
  background:
    radial-gradient(ellipse 80% 15% at 37% -3%, rgba(221, 245, 255, .055), transparent 75%),
    radial-gradient(ellipse 12px 65% at 0% 44%, rgba(182, 226, 232, .12), transparent 82%),
    radial-gradient(ellipse 10px 53% at 100% 62%, rgba(206, 204, 238, .09), transparent 85%),
    radial-gradient(ellipse at 50% 48%, transparent 57%, rgba(2, 0, 8, .17) 100%);
  box-shadow:
    inset 0 3px 9px #000b,
    inset 0 -1px 6px #0008,
    inset 0 0 16px rgba(0, 0, 0, .42);
}
/* The screen surface remains present on the details, with less interference. */
#card.open ~ #crt-screen .crt-texture { opacity: .36; }
#card.open ~ #crt-screen .crt-glass { opacity: .65; }

.crt-power { visibility: hidden; }
.crt-power::before, .crt-power::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  background: #030207;
}
.crt-power::before { top: 0; }
.crt-power::after { bottom: 0; }
.crt-beam {
  position: absolute;
  z-index: 1;
  top: calc(50% - 1px);
  left: 7%;
  right: 7%;
  height: 2px;
  opacity: 0;
  background: #dffff8;
  box-shadow: 0 0 5px #b4fff4, 0 0 15px #3df2ff, 0 0 35px #ff2e8860;
}
.is-powering .crt-power { visibility: visible; }
.is-powering .crt-power::before { animation: crt-open-top 1150ms cubic-bezier(.16,.75,.22,1) both; }
.is-powering .crt-power::after { animation: crt-open-bottom 1150ms cubic-bezier(.16,.75,.22,1) both; }
.is-powering .crt-beam { animation: crt-beam-on 1150ms ease-out both; }
@keyframes crt-open-top {
  0%, 30% { transform: translateY(0); }
  88%, 100% { transform: translateY(-100%); }
}
@keyframes crt-open-bottom {
  0%, 30% { transform: translateY(0); }
  88%, 100% { transform: translateY(100%); }
}
@keyframes crt-beam-on {
  0% { opacity: 0; transform: scaleX(.015); }
  8% { opacity: .8; transform: scaleX(.04); }
  30%, 36% { opacity: .9; transform: scaleX(1); }
  62% { opacity: .18; transform: scaleX(1.08) scaleY(2); }
  100% { opacity: 0; transform: scaleX(1.1) scaleY(3); }
}
@media (max-width: 600px) {
  :root { --crt-inset: 8px; --crt-radius: 22px; }
  .crt-texture { opacity: .65; }
  .crt-glass { opacity: .75; }
  #card.open ~ #crt-screen .crt-texture { opacity: .25; }
  #card.open ~ #crt-screen .crt-glass { opacity: .5; }
}
@media (max-height: 500px) {
  :root { --crt-inset: 6px; --crt-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #crt-screen .crt-power { display: none; }
  #crt-screen .crt-power::before, #crt-screen .crt-power::after, #crt-screen .crt-beam { animation: none; }
}