/* =========================================
   MOBILE / ALL BROWSER RESET
========================================= */

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

html {
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* Mobil böngészők */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

    /* Ne lehessen scrollozni */
    overscroll-behavior: none;
}

body {
    width: 100%;
    height: 100%;

    min-width: 100%;
    min-height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    /* Ne lehessen oldalirányban húzni */
    position: fixed;
    inset: 0;

    /* Mobil touch kezelés */
    touch-action: none;

    /* Ne lehessen kijelölni */
    user-select: none;
    -webkit-user-select: none;

    /* iOS */
    -webkit-touch-callout: none;

    /* Szöveg ne nagyítódjon automatikusan */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

    background: #000;
    color: #fff;
}

/* =========================================
   FULLSCREEN SCREEN
========================================= */

#screen {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    width: 100vw;
    height: 100dvh;

    min-width: 100%;
    min-height: 100%;

    overflow: hidden;

    isolation: isolate;
}

/* Régebbi mobil böngészők fallback */
@supports not (height: 100dvh) {
    #screen {
        height: 100vh;
    }
}

/* =========================================
   SAFE AREA - IPHONE NOTCH / DYNAMIC ISLAND
========================================= */

.top-left {
    top: max(20px, env(safe-area-inset-top));
    left: max(16px, env(safe-area-inset-left));
}

.top-right {
    top: max(20px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
}

.bottom-left {
    bottom: max(20px, env(safe-area-inset-bottom));
    left: max(16px, env(safe-area-inset-left));
}

.bottom-right {
    bottom: max(20px, env(safe-area-inset-bottom));
    right: max(16px, env(safe-area-inset-right));
}

/* =========================================
   MOBILE
========================================= */

@media screen and (max-width: 600px) {

    .core {
        position: fixed;

        width: 90vw;
        max-width: 90vw;

        left: 50%;
        top: 50%;

        transform: translate(-50%, -50%);

        overflow: visible;
    }

    .identity {
        max-width: 90vw;

        font-size: clamp(18px, 6vw, 32px);

        letter-spacing: 0.08em;
        text-indent: 0.08em;

        white-space: nowrap;
    }

    .subline {
        max-width: 90vw;

        font-size: 7px;

        letter-spacing: 0.15em;
        text-indent: 0.15em;

        white-space: nowrap;
    }

    .warning {
        font-size: 7px;

        letter-spacing: 0.25em;
        text-indent: 0.25em;

        white-space: nowrap;
    }

    .status {
        font-size: 7px;

        max-width: 40vw;

        overflow: hidden;
        text-overflow: ellipsis;

        white-space: nowrap;
    }

    .top-left {
        left: 16px;
    }

    .top-right {
        right: 16px;
    }

    .bottom-left {
        left: 16px;
    }

    .bottom-right {
        right: 16px;
    }
}

/* =========================================
   EXTRA SMALL PHONES
========================================= */

@media screen and (max-width: 380px) {

    .identity {
        font-size: 18px;
        letter-spacing: 0.05em;
    }

    .subline {
        font-size: 6px;
    }

    .status {
        font-size: 6px;
    }
}

/* =========================================
   LANDSCAPE MOBILE
========================================= */

@media screen and (max-height: 500px) {

    .core {
        transform: translate(-50%, -50%) scale(0.8);
    }

    .status {
        font-size: 6px;
    }
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

body {
  color: #8d8d8d;
  font-family: "Courier New", Courier, monospace;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

#screen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(ellipse at center, rgba(25, 25, 25, 0.12) 0%, rgba(0, 0, 0, 0.98) 70%),
    #000;
}

.noise,
.scanlines,
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.noise {
  opacity: 0.065;
  background-image:
    repeating-radial-gradient(circle at 17% 32%, rgba(255,255,255,.18) 0 1px, transparent 1px 3px),
    repeating-radial-gradient(circle at 71% 68%, rgba(255,255,255,.12) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
  animation: noiseMove .18s steps(2) infinite;
}

.scanlines {
  opacity: .08;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(255,255,255,.09) 3px,
    transparent 4px
  );
  animation: scanMove 8s linear infinite;
}

.vignette {
  background: radial-gradient(ellipse at center, transparent 20%, rgba(0, 0, 0, 0.493) 62%, rgba(0, 0, 0, 0.856) 100%);
}

.core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 900px);
  text-align: center;
  z-index: 3;
}

.warning {
  min-height: 18px;
  margin-bottom: 28px;
  color: rgba(145, 145, 145, .25);
  font-size: 9px;
  letter-spacing: .42em;
  text-indent: .42em;
  opacity: 0;
  transition: opacity .3s;
}

.identity-wrap {
  position: relative;
  display: inline-block;
  max-width: 95vw;
}

.identity {
  position: relative;
  color: #d1d1d1;
  font-size: clamp(22px, 5vw, 58px);
  font-weight: 400;
  letter-spacing: .22em;
  text-indent: .22em;
  text-shadow: 0 0 8px rgba(255,255,255,.08);
  animation: flicker 5s infinite;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.glitch::before {
  color: #777;
  transform: translate(-2px, 0);
  clip-path: inset(15% 0 62% 0);
}

.glitch::after {
  color: #aaa;
  transform: translate(2px, 0);
  clip-path: inset(66% 0 12% 0);
}

.ghost {
  position: absolute;
  inset: 0;
  color: #777;
  opacity: 0;
  pointer-events: none;
}

.ghost-a {
  animation: ghostA 7s infinite;
}

.ghost-b {
  animation: ghostB 11s infinite;
}

.subline {
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.28);
  font-size: 9px;
  letter-spacing: .35em;
  text-indent: .35em;
}

.cursor-line {
  width: 120px;
  height: 1px;
  margin: 25px auto 0;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}

.cursor-line span {
  display: block;
  width: 25px;
  height: 100%;
  background: rgba(255,255,255,.45);
  animation: cursorMove 3.5s ease-in-out infinite;
}

.status {
  position: absolute;
  z-index: 4;
  color: rgba(130,130,130,.22);
  font-size: 8px;
  letter-spacing: .18em;
  white-space: nowrap;
}

.top-left { top: 28px; left: 30px; }
.top-right { top: 28px; right: 30px; }
.bottom-left { bottom: 28px; left: 30px; }
.bottom-right { bottom: 28px; right: 30px; }

.flash-message {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.5);
  font-size: clamp(10px, 2vw, 14px);
  letter-spacing: .35em;
  text-indent: .35em;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
}

body.glitching #screen {
  animation: screenShake .11s steps(2) 2;
}

body.glitching .identity {
  animation: hardGlitch .11s steps(2) 2;
}

body.glitching .glitch::before,
body.glitching .glitch::after {
  opacity: .8;
}

body.glitching .warning {
  opacity: 1;
}

body.flash .flash-message {
  animation: flashText .65s steps(2);
}

@keyframes noiseMove {
  0% { transform: translate(0,0); }
  25% { transform: translate(2%, -1%); }
  50% { transform: translate(-1%, 2%); }
  75% { transform: translate(1%, 1%); }
  100% { transform: translate(0,0); }
}

@keyframes scanMove {
  from { transform: translateY(0); }
  to { transform: translateY(8px); }
}

@keyframes flicker {
  0%, 18%, 20%, 65%, 67%, 100% { opacity: 1; }
  19%, 66% { opacity: .55; }
}

@keyframes ghostA {
  0%, 85%, 100% { opacity: 0; }
  86% { opacity: .22; transform: translateX(-8px); }
  87% { opacity: 0; }
}

@keyframes ghostB {
  0%, 91%, 100% { opacity: 0; }
  92% { opacity: .18; transform: translateX(7px); }
  93% { opacity: 0; }
}

@keyframes hardGlitch {
  0% { transform: translate(0); filter: none; }
  30% { transform: translate(-5px, 1px) skewX(4deg); filter: contrast(1.8); }
  60% { transform: translate(6px, -1px) skewX(-5deg); }
  100% { transform: translate(0); }
}

@keyframes screenShake {
  0% { transform: translate(0); }
  50% { transform: translate(2px, -1px); }
  100% { transform: translate(-1px, 1px); }
}

@keyframes flashText {
  0%, 100% { opacity: 0; }
  20%, 60% { opacity: .65; }
  30%, 70% { opacity: 0; }
}

@keyframes cursorMove {
  0%, 100% { transform: translateX(-60px); opacity: .2; }
  50% { transform: translateX(60px); opacity: .7; }
}

@media (max-width: 600px) {
  .status {
    font-size: 7px;
    letter-spacing: .12em;
  }

  .top-left { top: 20px; left: 16px; }
  .top-right { top: 20px; right: 16px; }
  .bottom-left { bottom: 20px; left: 16px; }
  .bottom-right { bottom: 20px; right: 16px; }

  .identity {
    letter-spacing: .12em;
    text-indent: .12em;
  }

  .subline {
    font-size: 7px;
    letter-spacing: .2em;
    text-indent: .2em;
  }
}