@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

:root {
  --crt: rgb(0,255,0);
  --bg: #000;

  /* terminal sizing */
  --term-font-size: clamp(14px, 2.4vw + 8px, 20px);
  --term-gap: 8px;
  --hint-row-h: 1.2em;

  /* avatar sprite sheet */
  --avatar-frames: 4;
  --avatar-src-w: 1536px;
  --avatar-src-h: 1024px;
  --avatar-frame-w: calc(var(--avatar-src-w) / var(--avatar-frames));
  --avatar-frame-h: var(--avatar-src-h);

  --avatar-scale: 0.22;
  --avatar-w: calc(var(--avatar-frame-w) * var(--avatar-scale));
  --avatar-h-full: calc(var(--avatar-frame-h) * var(--avatar-scale));

  --avatar-top-crop: 190px;
  --avatar-bottom-crop: 24px;

  --avatar-cropY: calc(-1 * var(--avatar-top-crop) * var(--avatar-scale));
  --avatar-visible-h: calc(var(--avatar-frame-h) - var(--avatar-top-crop) - var(--avatar-bottom-crop));
  --avatar-h: calc(var(--avatar-visible-h) * var(--avatar-scale));

  /* stride + stop position */
  --avatar-step-speed: 0.5s;
  --walk-duration: 1.2s;
  --walk-end: clamp(220px, 38vw, 380px);
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--crt);
  font-family: 'DotGothic16', system-ui, monospace;
}

/* Utility */
.hidden { display: none !important; }

/* Generic offscreen utility for elements that must still function */
.offscreen {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* honeypot */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Keep the background iframe offscreen but NOT display:none */
#ml_iframe {
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}

/* Fixed back link in top-right */
.back-fixed {
  position: fixed;
  top: clamp(8px, 2vh, 16px);
  right: clamp(8px, 2vw, 20px);
  font-size: 16px;
  color: var(--crt);
  text-decoration: none;
  z-index: 99;
  opacity: .9;
}
.back-fixed .back-label { text-decoration: none; }
.back-fixed:hover .back-label,
.back-fixed:focus-visible .back-label { text-decoration: underline; }

/* layout */
.wrap {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3.5vw, 24px);
}
.stage, .terminal { width: 100%; }

@media (min-width: 880px) {
  .wrap {
    grid-template-columns: 340px minmax(520px, 1fr);
    gap: 12px;
    align-items: center;
  }
  .stage { justify-self: start; }
  .terminal { justify-self: start; }
}

.stage {
  position: relative;
  height: clamp(180px, 36vh, 280px);
  max-width: min(360px, 92vw);
  background: var(--bg);
  overflow: hidden;
}

/* terminal */
.terminal {
  padding: clamp(12px, 3.5vw, 24px);
  background: var(--bg);
  display: grid;
  grid-template-rows: auto auto var(--hint-row-h);
  row-gap: var(--term-gap);
}

/* system line + prompt line */
.line {
  font-size: var(--term-font-size);
  letter-spacing: 0.08em;
  line-height: 1;
  margin: 0;
  user-select: none;
}

.prompt {
  display: flex;
  align-items: center;
  visibility: hidden;
  pointer-events: none;
}
.prompt.show { visibility: visible; pointer-events: auto; }

.caret { font-size: var(--term-font-size); }
.caret::after { content: "\00a0"; }

.typed {
  font-size: var(--term-font-size);
  letter-spacing: 0.08em;
  white-space: pre-wrap;
  color: var(--crt);
  user-select: none;
}

/* selection treatment */
::selection {
  background: var(--crt) !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}
::-moz-selection {
  background: var(--crt) !important;
  color: #000 !important;
}
.cursor-sel, .cursor-sel * {
  background: var(--crt) !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

.terminal, .terminal * { -webkit-text-fill-color: unset; }

/* char boxes */
.ch { white-space: pre; }

/* blinking block cursor */
.cursor-block {
  display: inline-block;
  width: 1.1ch;
  height: 1.3em;
  animation: cursorFlip 0.8s steps(1,end) infinite;
}
@keyframes cursorFlip {
  0%,49%   { background: var(--crt); color: #000; }
  50%,100% { background: var(--bg);  color: var(--crt); }
}

.go-pill {
  display: inline-block;
  padding: 0 0.15ch;
  background: var(--bg);
  color: var(--crt);
}

/* real input (desktop + iOS default: tiny fixed input so iOS IME opens) */
#cmd.cmd {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1.6rem;
  opacity: 0.01;
  color: transparent;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 16px;    /* prevents iOS zoom-on-focus */
  z-index: 1;
  pointer-events: auto !important;
  caret-color: transparent;
}

/* hint row */
.hint {
  font-style: italic;
  opacity: 0.9;
  font-size: 16px;
  height: var(--hint-row-h);
  line-height: 1;
  margin: 0;
  margin-left: calc(1.3ch + 6px);
}

/* avatar */
.figure {
  position: absolute;
  bottom: calc(40px + 2vh);
  left: -120px;
  width: var(--avatar-w);
  height: var(--avatar-h);
  overflow: hidden;
  background-image: url('avatar/avatar_intro.png');
  background-repeat: no-repeat;
  background-position: 0 var(--avatar-cropY);
  background-size: calc(var(--avatar-src-w) * var(--avatar-scale))
                   calc(var(--avatar-src-h) * var(--avatar-scale));
  image-rendering: pixelated;
  transform-origin: bottom left;
}

.figure.walking {
  animation: walk-in var(--walk-duration) linear forwards,
             avatar-walk var(--avatar-step-speed) steps(2) infinite;
}

.figure.forward {
  background-position: calc(-2 * var(--avatar-w)) var(--avatar-cropY);
  transform: translateX(var(--walk-end));
}

@keyframes walk-in {
  0%   { transform: translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateX(var(--walk-end)); }
}
@keyframes avatar-walk {
  from { background-position: 0 var(--avatar-cropY); }
  to   { background-position: calc(-2 * var(--avatar-w)) var(--avatar-cropY); }
}

/* tiny phones */
@media (max-width: 480px) {
  :root {
    --avatar-scale: 0.18;
    --term-gap: 6px;
  }
  .hint { font-size: 14px; }
}

/* mobile layout */
@media (max-width: 600px) {
  .stage {
    width: min(420px, 92vw);
    height: clamp(180px, 36vh, 280px);
  }
  .wrap {
    place-items: start center;
    align-content: start;
    padding-top: clamp(8px, 4vh, 24px);
  }
  .terminal {
    margin-top: 0;
    row-gap: clamp(4px, 1.5vh, 8px);
    padding-top: clamp(8px, 2.5vh, 16px);
    padding-bottom: clamp(8px, 3vh, 20px);
  }
  .line { margin-top: 0; }
  .figure {
    left: 50%;
    transform: translateX(calc(-50% - 120px));
  }
  .figure.forward {
    background-position: calc(-2 * var(--avatar-w)) var(--avatar-cropY);
    transform: translateX(-50%);
  }
  @keyframes walk-in {
    0%   { transform: translateX(calc(-50% - 120px)); opacity: 0; }
    10%  { opacity: 1; }
    100% { transform: translateX(-50%); }
  }
}

/* === ANDROID-ONLY OVERRIDES (JS adds html.android-stable) === */
html.android-stable .typed { display: none !important; }
html.android-stable #cmd.cmd {
  position: static !important;
  width: 100% !important;
  height: 1.9rem !important;
  line-height: 1.9rem !important;
  margin-left: 1.3ch !important;   /* after ">" caret */
  opacity: 1 !important;
  color: var(--crt) !important;
  caret-color: var(--crt) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: var(--term-font-size) !important;
  letter-spacing: 0.08em !important;
  z-index: 1 !important;
  pointer-events: auto !important;
}