:root {
  --ink: #1b1b1b;
  --paper: #fdf6e3;
  --pitch: #3fae5c;
  --pitch-dark: #2f8a46;
  --sky: #d1f400;
  --accent: #ffb703;
  --accent-dark: #e08e00;
  --btn: #ff084f;
  --btn-dark: #c2003a;
  --panel: #ffffff;
  --danger: #e63946;
  --success: #2a9d8f;
  --console-body: #d9d4c7;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #232323;
  font-family: 'Press Start 2P', monospace;
  color: var(--ink);
  image-rendering: pixelated;
  padding: 16px;
}

#console {
  width: 100%;
  max-width: 420px;
  background: var(--console-body);
  border: 4px solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.35);
  padding: 14px;
}

#console-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 10px;
}

.console-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-dark);
  border: 2px solid var(--ink);
}

.console-title {
  font-size: 9px;
  letter-spacing: 1px;
}

#screen {
  background: var(--sky);
  border: 4px solid var(--ink);
  border-radius: 8px;
  min-height: 560px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* La pantalla seria de cierre es oscura, pero solo colorea su propio
   contenido -- sin esto, el lima de #screen se cuela por las esquinas
   redondeadas y detrás del crédito, como una fina barra de color. */
#screen:has(.screen-serious) {
  background: #14161a;
}

#screen-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#credit {
  flex-shrink: 0;
  text-align: center;
  padding: 8px 0;
  font-size: 7px;
  letter-spacing: 0.5px;
  color: var(--ink);
}

/* En la pantalla seria de cierre el fondo es oscuro, así que el
   crédito pasa a claro para seguir siendo legible. */
#screen:has(.screen-serious) #credit {
  color: #e8e6e1;
}

/* ---------- Layout helpers ---------- */

.screen-pad {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.center-col {
  align-items: center;
  justify-content: center;
  text-align: center;
}

h1, h2 {
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
}

p {
  font-size: 9px;
  line-height: 1.8;
  margin: 0;
}

/* ---------- Buttons & inputs ---------- */

button, input[type="text"], input[type="number"] {
  font-family: 'Press Start 2P', monospace;
}

.btn {
  font-size: 10px;
  padding: 12px 14px;
  background: var(--btn);
  border: 3px solid var(--ink);
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--btn-dark);
  color: #fff;
}

.btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--btn-dark);
}

.btn.secondary {
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 4px 0 #999;
}
.btn.secondary:active {
  box-shadow: 0 1px 0 #999;
}

.text-input {
  font-size: 11px;
  padding: 10px;
  border: 3px solid var(--ink);
  border-radius: 4px;
  background: var(--panel);
  width: 100%;
  text-align: center;
}

.logo {
  display: flex;
  justify-content: center;
}

.logo-img {
  width: 100%;
  max-width: 240px;
  height: auto;
  image-rendering: pixelated;
}

/* ---------- Pantalla seria de cierre ---------- */

.screen-serious {
  background: #14161a;
  color: #e8e6e1;
  flex: 1;
  margin: -20px -16px;
  padding: 20px 16px;
  gap: 28px;
}

.serious-message {
  font-size: 11px;
  line-height: 2;
  max-width: 260px;
}

.btn-serious {
  font-size: 10px;
  padding: 12px 20px;
  background: var(--btn);
  color: #fff;
  border: 3px solid var(--ink);
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--btn-dark);
}

.btn-serious:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--btn-dark);
}

.btn-serious.secondary {
  background: transparent;
  color: #e8e6e1;
  border: 3px solid #e8e6e1;
  box-shadow: none;
}

.btn-serious.secondary:active {
  transform: scale(0.96);
  background: rgba(232, 230, 225, 0.12);
}

.serious-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 220px;
}

.barrio-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 220px;
}

/* ---------- Pitch / shooting screen ---------- */

.pitch {
  position: relative;
  flex: 1;
  background: repeating-linear-gradient(
    0deg,
    var(--pitch),
    var(--pitch) 40px,
    var(--pitch-dark) 40px,
    var(--pitch-dark) 80px
  );
  overflow: hidden;
}

.goal {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  height: 90px;
  border: 5px solid var(--paper);
  border-bottom: none;
  background: rgba(255, 255, 255, 0.08);
}

.goal-zone {
  position: absolute;
  top: 0;
  width: calc(240px / 5);
  height: 100%;
}
.goal-zone[data-zone="far-left"] { left: calc(240px / 5 * 0); }
.goal-zone[data-zone="left"] { left: calc(240px / 5 * 1); }
.goal-zone[data-zone="center"] { left: calc(240px / 5 * 2); }
.goal-zone[data-zone="right"] { left: calc(240px / 5 * 3); }
.goal-zone[data-zone="far-right"] { left: calc(240px / 5 * 4); }

.trajectory-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.2s;
}
.trajectory-svg.hide {
  opacity: 0;
}
.trajectory-svg line {
  stroke: var(--accent);
  stroke-width: 3;
  stroke-dasharray: 7 6;
  stroke-linecap: round;
  filter: drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink)) drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink));
}
.trajectory-svg circle {
  fill: var(--accent);
  stroke: var(--ink);
  stroke-width: 2;
}

.keeper {
  position: absolute;
  top: 20px;
  width: 34px;
  height: 66px;
  left: calc(50% - 17px);
  z-index: 2;
  transition: transform 0.5s ease-out, left 0.5s ease-out;
}

.ball {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--ink);
  bottom: 10px;
  left: calc(50% - 9px);
  z-index: 3;
  transition: left 0.6s ease-in, bottom 0.6s ease-in, top 0.6s ease-in, transform 0.6s ease-in;
}

.ball.bounce-impact {
  animation: ball-impact 0.35s ease-out;
}

@keyframes ball-impact {
  0% { filter: brightness(2.2); }
  100% { filter: brightness(1); }
}

.player-wrap {
  position: absolute;
  bottom: 20px;
  left: calc(50% - 35px);
  width: 70px;
  height: 84px;
  z-index: 1;
}

.key-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 8px;
  line-height: 1;
}

/* Triángulos dibujados en CSS en vez de los caracteres ← → -- esa
   fuente no incluye esos glifos, así que el navegador los sustituía en
   silencio por una fuente de sistema, con métricas distintas que nunca
   quedaban alineadas con el resto del texto pixel art. */
.key-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.key-arrow.left {
  border-right: 8px solid var(--ink);
}
.key-arrow.right {
  border-left: 8px solid var(--ink);
}

/* ---------- Controles táctiles (móvil) ---------- */

.touch-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 0 2px;
}

.ctrl-btn {
  position: relative;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  width: 64px;
  touch-action: manipulation;
}

.ctrl-btn img {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated;
}

.ctrl-btn:active img {
  transform: translateY(2px);
}

.ctrl-shoot {
  width: 84px;
}

.ctrl-shoot span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  font-size: 8px;
  color: var(--ink);
  pointer-events: none;
}

.goal-banner {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.4) rotate(-6deg);
  font-size: 26px;
  color: var(--accent);
  text-shadow:
    -3px -3px 0 var(--ink), 3px -3px 0 var(--ink),
    -3px 3px 0 var(--ink), 3px 3px 0 var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(.2,1.4,.4,1), opacity 0.2s;
  z-index: 5;
}
.goal-banner.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(-6deg);
}

/* ---------- Dialog box (Pokemon style) ---------- */

.dialog-box {
  margin: 0 12px 14px;
  background: var(--panel);
  border: 4px solid var(--ink);
  border-radius: 6px;
  padding: 12px;
  font-size: 10px;
  line-height: 1.8;
  min-height: 70px;
  position: relative;
}

.dialog-image {
  display: block;
  max-width: 110px;
  max-height: 90px;
  margin: 0 auto 8px;
  image-rendering: pixelated;
}

.dialog-box .cursor {
  display: inline-block;
  width: 0;
  animation: blink 0.8s steps(1) infinite;
}

.dialog-arrow {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 12px;
  animation: bob 0.6s infinite alternate;
}

@keyframes blink {
  50% { opacity: 0; }
}

@keyframes bob {
  from { transform: translateY(0); }
  to { transform: translateY(4px); }
}

/* ---------- Result screen ---------- */

.scoreboard {
  text-align: center;
  background: var(--ink);
  color: var(--paper);
  padding: 10px;
  border-radius: 6px;
  letter-spacing: 1px;
}

.continue-hint {
  opacity: 0.7;
}

.card {
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: 6px;
  padding: 10px;
  text-align: left;
}

.card .label {
  font-size: 8px;
  color: #555;
  margin-bottom: 6px;
}

.card p {
  margin-bottom: 6px;
}

.card a {
  font-size: 8px;
  color: #1d5fa8;
  word-break: break-all;
}

.aha {
  background: #fff4d6;
  border: 3px dashed var(--accent-dark);
  border-radius: 6px;
  padding: 10px;
  font-size: 9px;
  line-height: 1.7;
}

/* ---------- Character (sprite real, canvas recoloreado) ---------- */

.sprite-canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
}

.celebration-figure {
  width: 160px;
  height: 192px;
}

@media (max-width: 460px) {
  #console { max-width: 100%; }
  /* iOS/Android hacen zoom automático al enfocar un input con
     font-size menor de 16px -- lo subimos solo en móvil para evitarlo. */
  .text-input {
    font-size: 16px;
  }
}