/* HOTLINE PERÚ — synthwave chicha CRT */
:root {
  --rosa: #ff2e88;
  --cian: #19e3ff;
  --naranja: #ff8c1a;
  --amarillo: #ffe14d;
  --violeta: #7b2ff7;
  --sangre: #c40a1e;
  --negro: #07020d;
  --crema: #ffe9d6;
}

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

html, body {
  width: 100%; height: 100%;
  background: var(--negro);
  overflow: hidden;
  font-family: 'VT323', monospace;
  color: var(--crema);
  cursor: crosshair;
  user-select: none;
}

#stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 50% 120%, #2a0b3d 0%, var(--negro) 60%);
}

#game {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  filter: saturate(1.06) contrast(1.02);
}

/* ---------- CRT overlays ---------- */
#scanlines {
  position: absolute; inset: 0; pointer-events: none; z-index: 20;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0)   0px,
    rgba(0,0,0,0)   2px,
    rgba(0,0,0,.09) 3px
  );
  mix-blend-mode: multiply;
}

#vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 21;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0) 60%, rgba(5,0,15,.35) 100%);
}

#grain {
  position: absolute; inset: -50%; pointer-events: none; z-index: 22;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-jump .35s steps(3) infinite;
}
@keyframes grain-jump {
  0% { transform: translate(0,0); }
  33% { transform: translate(-6%,4%); }
  66% { transform: translate(5%,-7%); }
  100% { transform: translate(0,0); }
}

/* ---------- overlays genéricos ---------- */
.overlay {
  position: absolute; inset: 0; z-index: 30;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2.2vh;
  text-align: center;
  background: rgba(7, 2, 13, .9);
  padding: 4vh 4vw;
}
.hidden { display: none !important; }

.press-key {
  font-size: clamp(18px, 2.6vh, 28px);
  letter-spacing: .35em;
  color: var(--amarillo);
  text-shadow: 0 0 12px rgba(255,225,77,.7);
}
.blink { animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .15; } }

/* ---------- title ---------- */
#title-screen {
  background:
    linear-gradient(to bottom, #12022b 0%, #3d0a4f 45%, #120318 100%);
  overflow: hidden;
}

.title-sun {
  position: absolute; top: 6vh; left: 50%;
  width: 34vh; height: 34vh;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(to bottom, var(--amarillo), var(--naranja) 45%, var(--rosa) 80%);
  box-shadow: 0 0 80px rgba(255,46,136,.65);
  -webkit-mask: repeating-linear-gradient(to bottom, #000 0 14px, transparent 14px 20px);
          mask: repeating-linear-gradient(to bottom, #000 0 14px, transparent 14px 20px);
  opacity: .9;
}

.title-skyline {
  position: absolute; bottom: 0; left: 0; right: 0; height: 30vh;
  background:
    linear-gradient(to top, rgba(25,227,255,.12), transparent 70%),
    repeating-linear-gradient(90deg,
      transparent 0 40px, rgba(123,47,247,.35) 40px 41px),
    repeating-linear-gradient(0deg,
      transparent 0 40px, rgba(123,47,247,.35) 40px 41px);
  transform: perspective(300px) rotateX(58deg);
  transform-origin: bottom;
}

.neon {
  font-family: 'Monoton', cursive;
  font-weight: 400;
  font-size: clamp(46px, 11vh, 110px);
  line-height: .95;
  color: var(--cian);
  z-index: 2;
  text-shadow:
    0 0 8px rgba(25,227,255,.9),
    0 0 30px rgba(25,227,255,.6),
    4px 4px 0 var(--rosa),
    4px 4px 22px rgba(255,46,136,.8);
  animation: neon-flicker 4s linear infinite;
}
@keyframes neon-flicker {
  0%, 92%, 96%, 100% { opacity: 1; }
  93%, 95% { opacity: .55; }
}

.title-sub {
  z-index: 2;
  font-size: clamp(20px, 3.4vh, 34px);
  letter-spacing: .55em;
  color: var(--crema);
  text-shadow: 0 0 10px rgba(255,233,214,.5);
}

.title-footer {
  z-index: 2;
  font-size: clamp(13px, 1.9vh, 18px);
  color: rgba(255,233,214,.55);
  letter-spacing: .12em;
}

/* ---------- mask select ---------- */
.mask-select { z-index: 2; display: flex; flex-direction: column; gap: 1.2vh; }
.mask-label { letter-spacing: .4em; color: var(--rosa); font-size: clamp(15px,2.2vh,22px); }
.mask-row { display: flex; gap: 1.4vw; }

.mask-card {
  font-family: 'VT323', monospace;
  display: flex; flex-direction: column; align-items: center; gap: .5vh;
  background: rgba(255,255,255,.04);
  border: 2px solid rgba(255,233,214,.25);
  padding: 1.4vh 1.6vw;
  cursor: pointer;
  color: var(--crema);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.mask-card:hover { transform: translateY(-4px); }
.mask-card.selected {
  border-color: var(--amarillo);
  box-shadow: 0 0 18px rgba(255,225,77,.35), inset 0 0 12px rgba(255,225,77,.12);
}

.mask-icon { width: 52px; height: 52px; border-radius: 6px; image-rendering: pixelated; }
.mask-icon.tunki    { background: radial-gradient(circle at 35% 35%, #ff5a36 55%, #b41e0a 100%); box-shadow: inset -8px -8px 0 #7a1404, 0 0 14px rgba(255,90,54,.6); }
.mask-icon.otorongo { background: radial-gradient(circle at 35% 35%, #ffc34d 55%, #b97a12 100%); box-shadow: inset -8px -8px 0 #7a4d08, 0 0 14px rgba(255,195,77,.6); }
.mask-icon.vicunia  { background: radial-gradient(circle at 35% 35%, #d9a066 55%, #9c6430 100%); box-shadow: inset -8px -8px 0 #5e3a18, 0 0 14px rgba(217,160,102,.6); }

.mask-name { font-size: clamp(17px,2.4vh,24px); letter-spacing: .25em; color: var(--amarillo); }
.mask-desc { font-size: clamp(12px,1.8vh,17px); color: rgba(255,233,214,.6); }

/* ---------- intro ---------- */
#intro-screen { background: #050208; justify-content: center; }
.intro-block { max-width: 760px; width: 90%; }

.phone-header {
  font-size: clamp(15px,2.2vh,21px);
  letter-spacing: .25em; line-height: 1.7;
  color: var(--cian);
  text-shadow: 0 0 8px rgba(25,227,255,.6);
  margin-bottom: 3vh;
}
.phone-machine {
  font-size: clamp(16px,2.4vh,23px);
  color: var(--rosa);
  letter-spacing: .2em;
  margin-bottom: 2vh;
  animation: blink 1.6s steps(2) infinite;
}
.phone-text {
  font-size: clamp(20px,3.2vh,32px);
  line-height: 1.55;
  color: var(--crema);
  min-height: 8em;
  text-align: left;
  text-shadow: 0 0 6px rgba(255,233,214,.35);
}
.phone-text .cursor { color: var(--amarillo); animation: blink .7s steps(2) infinite; }

.clipping {
  font-size: clamp(17px,2.6vh,26px);
  background: var(--crema);
  color: #1b1020;
  padding: 1.2vh 1.4vw;
  margin: 1.6vh auto;
  max-width: 640px;
  letter-spacing: .04em;
  box-shadow: 5px 5px 0 rgba(255,46,136,.7);
}
.clipping.c1 { transform: rotate(-2deg); }
.clipping.c2 { transform: rotate(1.4deg); background: #f3f0e4; }
.clipping.c3 { transform: rotate(-1deg); }
.clipping.c4 { transform: rotate(2.2deg); background: #f3f0e4; }

/* ---------- death ---------- */
#dead-screen { background: rgba(60, 2, 8, .88); }
.dead-title {
  font-family: 'Monoton', cursive; font-weight: 400;
  font-size: clamp(40px,9vh,92px);
  color: var(--sangre);
  text-shadow: 0 0 10px rgba(196,10,30,.9), 0 0 40px rgba(196,10,30,.7), 3px 3px 0 #000;
}
.dead-sub { font-size: clamp(18px,2.8vh,28px); color: rgba(255,233,214,.7); letter-spacing: .15em; }

/* ---------- clear ---------- */
.clear-title {
  font-family: 'Monoton', cursive; font-weight: 400;
  font-size: clamp(36px,8vh,84px);
  color: var(--amarillo);
  text-shadow: 0 0 12px rgba(255,225,77,.8), 4px 4px 0 var(--violeta);
}
.clear-stats {
  font-size: clamp(20px,3.2vh,32px);
  letter-spacing: .2em; line-height: 1.9;
}
.clear-stats span { color: var(--cian); text-shadow: 0 0 8px rgba(25,227,255,.7); }
.clear-stats .grade span {
  color: var(--rosa); font-size: 1.6em;
  text-shadow: 0 0 14px rgba(255,46,136,.9);
}
#stat-roast {
  font-size: clamp(16px,2.4vh,24px);
  color: rgba(255,233,214,.6);
  letter-spacing: .12em;
  font-style: italic;
}

/* ---------- outro ---------- */
#outro-screen { background: #030107; }
.outro-text {
  max-width: 720px;
  font-size: clamp(20px,3.2vh,32px);
  line-height: 1.6; text-align: left;
  color: var(--crema);
  text-shadow: 0 0 6px rgba(255,233,214,.3);
  white-space: pre-wrap;
}

/* ---------- co-op lobby ---------- */
.coop-title {
  font-family: 'Monoton', cursive; font-weight: 400;
  font-size: clamp(32px,7vh,72px);
  color: var(--cian);
  text-shadow: 0 0 12px rgba(25,227,255,.8), 4px 4px 0 var(--rosa);
}
.coop-sub { font-size: clamp(16px,2.4vh,24px); color: rgba(255,233,214,.7); letter-spacing: .15em; }
.coop-box { display: flex; gap: 1.2vw; align-items: center; }
.coop-btn {
  font-family: 'VT323', monospace;
  font-size: clamp(18px,2.8vh,28px);
  letter-spacing: .25em;
  background: rgba(255,46,136,.12);
  border: 2px solid var(--rosa);
  color: var(--crema);
  padding: 1vh 2vw;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease;
}
.coop-btn:hover { transform: translateY(-2px); box-shadow: 0 0 16px rgba(255,46,136,.5); }
.coop-ghost { border-color: rgba(255,233,214,.3); background: transparent; font-size: clamp(14px,2vh,20px); }
.coop-code {
  font-size: clamp(34px,6vh,64px);
  letter-spacing: .4em;
  color: var(--amarillo);
  text-shadow: 0 0 16px rgba(255,225,77,.8);
  min-width: 4ch;
}
.coop-input {
  font-family: 'VT323', monospace;
  font-size: clamp(24px,4vh,40px);
  letter-spacing: .4em;
  width: 7ch; text-align: center;
  background: rgba(255,255,255,.06);
  border: 2px solid var(--cian);
  color: var(--cian);
  text-transform: uppercase;
  padding: .6vh .4vw;
}
.coop-status {
  font-size: clamp(16px,2.4vh,24px);
  color: var(--cian);
  letter-spacing: .12em;
  min-height: 1.4em;
}

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; z-index: 25; pointer-events: none; }

#hud-left {
  position: absolute; top: 2.2vh; left: 2.4vw;
  text-align: left;
}
#hud-chapter {
  font-size: clamp(15px,2.2vh,22px);
  letter-spacing: .3em; color: var(--rosa);
  text-shadow: 0 0 8px rgba(255,46,136,.7);
}
#hud-weapon {
  font-size: clamp(17px,2.6vh,26px);
  color: var(--crema); letter-spacing: .2em;
  text-shadow: 2px 2px 0 #000;
}

#hud-right { position: absolute; top: 2.2vh; right: 2.4vw; text-align: right; }
#hud-score {
  font-size: clamp(26px,4.4vh,46px);
  color: var(--amarillo);
  text-shadow: 0 0 10px rgba(255,225,77,.7), 2px 2px 0 #000;
}
#hud-combo {
  font-size: clamp(17px,2.8vh,28px);
  color: var(--cian);
  text-shadow: 0 0 10px rgba(25,227,255,.8);
}
#hud-combo.hot { color: var(--rosa); text-shadow: 0 0 14px rgba(255,46,136,1); }

#hud-enemies {
  font-size: clamp(15px,2.2vh,22px);
  color: var(--cian); letter-spacing: .2em;
  text-shadow: 2px 2px 0 #000;
}

/* anuncio central de fase */
#announce {
  position: absolute; top: 30%; left: 50%;
  transform: translateX(-50%);
  font-size: clamp(24px,4.2vh,44px);
  letter-spacing: .25em; text-align: center;
  color: var(--amarillo);
  text-shadow: 0 0 14px rgba(255,225,77,.8), 3px 3px 0 var(--rosa);
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
}
#announce.show { animation: announce-pop 3s ease-out forwards; }
@keyframes announce-pop {
  0%   { opacity: 0; transform: translateX(-50%) scale(.7); }
  8%   { opacity: 1; transform: translateX(-50%) scale(1.06); }
  14%  { transform: translateX(-50%) scale(1); }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(1); }
}

/* contexto del encargo en la intro */
.intro-context {
  max-width: 640px; margin: 0 auto 2.4vh;
  text-align: left;
  font-size: clamp(17px,2.6vh,26px);
  line-height: 1.5;
  color: rgba(255,233,214,.85);
  border-left: 3px solid var(--rosa);
  padding: 1vh 1.4vw;
  background: rgba(255,46,136,.06);
}
.ctx-label {
  display: block;
  color: var(--rosa); letter-spacing: .4em;
  font-size: .75em; margin-bottom: .6vh;
}
.ctx-strong { color: var(--amarillo); text-shadow: 0 0 8px rgba(255,225,77,.4); }

#hud-objective {
  position: absolute; bottom: 2.6vh; left: 50%; transform: translateX(-50%);
  font-size: clamp(17px,2.6vh,26px);
  letter-spacing: .3em;
  color: var(--crema);
  background: rgba(7,2,13,.65);
  padding: .4vh 1.4vw;
  border-left: 3px solid var(--rosa);
  border-right: 3px solid var(--cian);
  text-shadow: 2px 2px 0 #000;
}