/* zhelta.tech — one screen, no scroll. Background taken from zhelta.pl:
   hsl(240 10% 4%) + 75px grid of #6b7280 lines at 5 %, radial mask, slow drift. */
:root { --bg: hsl(240 10% 4%); --line: #6b7280; --fg: hsl(0 0% 98%); }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--fg); }
body { height: 100dvh; touch-action: none; cursor: crosshair; -webkit-tap-highlight-color: transparent; user-select: none; }

.grid {
  position: fixed; inset: -75px; pointer-events: none; opacity: .05;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 2px),
                    linear-gradient(to bottom, var(--line) 1px, transparent 2px);
  background-size: 75px 75px; background-position: center;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 50%, transparent 100%);
          mask-image: radial-gradient(ellipse at center, #000 50%, transparent 100%);
  animation: drift 24s linear infinite;
  transition: opacity .6s ease;
}
.grid.flash { opacity: .16; transition: opacity .08s ease; }
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(75px, 75px, 0); } }

.ripple {
  position: fixed; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  pointer-events: none; border: 1px solid rgba(255,255,255,.35); opacity: 0; transform: scale(0);
}
.ripple.go { animation: ripple 1.2s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes ripple { 0% { opacity: .6; transform: scale(0); } 100% { opacity: 0; transform: scale(260); } }

#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.fallback { position: fixed; left: 50%; top: 50%; width: min(70vw, 720px); transform: translate(-50%, -50%); filter: invert(1); }

.hint { position: fixed; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
        font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .4em; opacity: .25; pointer-events: none;
        animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .08; } }

@media (prefers-reduced-motion: reduce) { .grid, .hint { animation: none; } }

/* overload: scanlines + message */
.scan { position: fixed; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: overlay;
        background: repeating-linear-gradient(to bottom, rgba(255,255,255,.18) 0 1px, transparent 1px 3px); }
.msg { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0;
       font: 600 14px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .6em; color: #fff;
       text-shadow: 2px 0 rgba(255,0,70,.9), -2px 0 rgba(0,240,255,.9); }
.msg.on { animation: flick .12s steps(2) infinite; }
@keyframes flick { 0% { opacity: .9; } 50% { opacity: .2; } 100% { opacity: .7; } }
#stage { will-change: filter, transform; }