/* ROCKMARIO — page shell: a dark room around a CRT television.
   Single CSS strategy: plain CSS + custom properties. */

:root {
  --room: #07070e;
  --room-glow: #111a3a;
  --bezel-dark: #15151c;
  --bezel-light: #2c2c38;
  --accent: #35d8e8;
  --text-dim: rgba(220, 228, 255, 0.55);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, var(--room-glow) 0%, var(--room) 70%);
  overflow: hidden;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  user-select: none;
}

.room {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

/* CRT bezel: layered border + inner shadow gives the tube depth */
.crt {
  position: relative;
  line-height: 0;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--bezel-light), var(--bezel-dark) 60%);
  box-shadow:
    0 0 0 1px #000,
    0 30px 80px -20px rgba(0, 0, 0, 0.9),
    0 0 90px -10px rgba(53, 216, 232, 0.12);
  animation: crt-on 600ms ease-out both;
}

@keyframes crt-on {
  0%   { transform: scaleY(0.004) scaleX(0.7); filter: brightness(6); }
  55%  { transform: scaleY(1.02)  scaleX(0.99); filter: brightness(1.6); }
  100% { transform: scale(1); filter: brightness(1); }
}

#screen {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #000;
  border-radius: 4px;
}

/* phosphor scanlines + curved-glass sheen, both click-through */
.scanlines {
  position: absolute;
  inset: 14px;
  border-radius: 4px;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.16) 3px
  );
  mix-blend-mode: multiply;
}

.glass {
  position: absolute;
  inset: 14px;
  border-radius: 4px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 90% at 50% -20%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 55%);
}

.hint {
  display: flex;
  gap: 1.6em;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  animation: hint-in 800ms 400ms ease-out both;
}

.hint span::before {
  content: "▸ ";
  color: var(--accent);
}

@keyframes hint-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}