html, body { margin: 0; height: 100%; background: #05030f; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; overscroll-behavior: none; }
body { display: grid; place-items: center; min-height: 100dvh; }
canvas { display: block; background: #05030f; }
#touch { display: none; }
#touch.on { display: block; position: fixed; inset: 0; pointer-events: none; }
#touch.on:not(.playing) .pad, #touch.on:not(.playing) .acts, #touch.on:not(.playing) .pause { display: none; }
#touch button {
  pointer-events: auto; width: 72px; height: 72px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4);
  background: rgba(20,10,40,.5); color: #fff; font: 26px system-ui, sans-serif; backdrop-filter: blur(4px); touch-action: none;
  -webkit-tap-highlight-color: transparent; box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
#touch button.down { background: rgba(176,124,255,.7); transform: scale(.94); }
#touch .pad { position: absolute; left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); display: flex; gap: 14px; }
#touch .pad button { width: 84px; height: 84px; font-size: 30px; }
#touch .acts { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(2, 72px); gap: 12px; }
#touch .acts .big { background: rgba(124,246,200,.4); width: 84px; height: 84px; font-size: 30px; justify-self: end; align-self: end; }
#touch .acts .sm { width: 60px; height: 60px; font-size: 22px; justify-self: center; align-self: center; }
#touch .pause { position: absolute; left: calc(50% + 6px); top: max(8px, env(safe-area-inset-top)); width: 42px; height: 42px; font-size: 14px; }
#touch .fs { position: absolute; left: calc(50% - 48px); top: max(8px, env(safe-area-inset-top)); width: 42px; height: 42px; font-size: 20px; }
#touch.on:not(.playing) .fs { left: max(14px, env(safe-area-inset-left)); top: max(10px, env(safe-area-inset-top)); }
#touch .fs.hide { display: none; }
@media (max-height: 420px) {
  #touch button { width: 60px; height: 60px; font-size: 22px; }
  #touch .pad button, #touch .acts .big { width: 70px; height: 70px; font-size: 26px; }
  #touch .acts { grid-template-columns: repeat(2, 60px); gap: 8px; }
  #touch .acts .sm { width: 50px; height: 50px; font-size: 18px; }
}
#rotate { display: none; }
html.touch #rotate.show, #rotate.force { display: grid; }
#rotate { place-content: center; justify-items: center; text-align: center; position: fixed; inset: 0; z-index: 20; color: #fff; font: 800 18px Nunito, system-ui, sans-serif;
  background: radial-gradient(900px 500px at 50% 30%, #3a1d6b 0%, #170f3a 55%, #05030f 100%); }
#rotate .stage { position: relative; width: 220px; height: 220px; margin-bottom: 18px; --cycle: 3.4s; }
#rotate .halo { position: absolute; inset: 20px; border-radius: 50%; background: radial-gradient(circle, rgba(176,124,255,.55), rgba(176,124,255,0) 68%); animation: kq-halo var(--cycle) ease-in-out infinite; }
#rotate .arc { position: absolute; inset: 0; width: 220px; height: 220px; }
#rotate .arc .trail { stroke-dasharray: 124; stroke-dashoffset: 124; animation: kq-trail var(--cycle) cubic-bezier(.4,0,.2,1) infinite; }
#rotate .arc .head { opacity: 0; animation: kq-head var(--cycle) ease-out infinite; }
#rotate .phone { position: absolute; left: 50%; top: 50%; width: 76px; height: 142px; margin: -71px 0 0 -38px; border-radius: 14px; border: 4px solid #fff; background: #0c0720;
  box-shadow: 0 0 0 3px #1b0f2a, 0 18px 40px rgba(0,0,0,.55); animation: kq-rotate var(--cycle) cubic-bezier(.34,1.56,.64,1) infinite; transform-origin: 50% 50%; }
#rotate .phone .notch { position: absolute; left: 50%; top: 6px; width: 28px; height: 5px; margin-left: -14px; border-radius: 3px; background: #fff; opacity: .9; }
#rotate .phone .screen { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, #2a1d55, #0c0720); }
#rotate .phone .screen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(124,246,200,.35), rgba(90,184,255,.25), rgba(255,122,200,.35)); opacity: 0; animation: kq-screen var(--cycle) ease-out infinite; }
/* la pantalla se dibuja ya en apaisado (contrarrota 90°): así el título y Kai salen derechos cuando el teléfono está horizontal */
#rotate .phone .land { position: absolute; left: 50%; top: 50%; width: 134px; height: 68px; transform: translate(-50%, -50%) rotate(90deg); overflow: hidden; border-radius: 8px; }
#rotate .phone .mini-title { position: absolute; left: 14px; top: 50%; transform: translateY(-50%) scale(.4); font: 30px Bangers, Impact, sans-serif; letter-spacing: 2px; opacity: 0;
  background: linear-gradient(90deg,#7CF6C8,#5AB8FF,#B07CFF,#FF7AC8); -webkit-background-clip: text; background-clip: text; color: transparent; animation: kq-title var(--cycle) cubic-bezier(.34,1.56,.64,1) infinite; }
#rotate .phone .land img { position: absolute; right: 8px; bottom: -4px; width: 52px; transform: translateY(70px); animation: kq-peek var(--cycle) cubic-bezier(.34,1.56,.64,1) infinite; }
#rotate .big { margin: 0; font: 42px Bangers, Impact, sans-serif; letter-spacing: 2px; background: linear-gradient(90deg,#7CF6C8,#5AB8FF,#B07CFF,#FF7AC8); -webkit-background-clip: text; background-clip: text; color: transparent; animation: kq-text var(--cycle) ease-in-out infinite; }
#rotate .small { margin: 6px 0 0; color: #c9b9ee; font-size: 15px; }
/* 0–12 %: quieto en vertical · 12–40 %: la flecha se dibuja y el teléfono gira con rebote · 40–55 %: la pantalla se enciende y Kai asoma · 55–85 %: se queda apaisado · 85–100 %: vuelve */
@keyframes kq-rotate { 0%, 12% { transform: rotate(0deg); } 40%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }
@keyframes kq-trail { 0%, 10% { stroke-dashoffset: 124; opacity: 1; } 38%, 70% { stroke-dashoffset: 0; opacity: 1; } 85%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes kq-head { 0%, 30% { opacity: 0; } 38%, 70% { opacity: 1; } 85%, 100% { opacity: 0; } }
@keyframes kq-screen { 0%, 40% { opacity: 0; } 46% { opacity: 1; } 56%, 85% { opacity: .45; } 100% { opacity: 0; } }
@keyframes kq-title { 0%, 42% { opacity: 0; transform: translateY(-50%) scale(.4); } 55%, 85% { opacity: 1; transform: translateY(-50%) scale(1); } 100% { opacity: 0; transform: translateY(-50%) scale(.4); } }
@keyframes kq-peek { 0%, 44% { transform: translateY(70px); } 60%, 85% { transform: translateY(0); } 100% { transform: translateY(70px); } }
@keyframes kq-halo { 0%, 40% { opacity: .2; transform: scale(.8); } 55%, 85% { opacity: 1; transform: scale(1.05); } 100% { opacity: .2; transform: scale(.8); } }
@keyframes kq-text { 0%, 40% { transform: scale(1); } 50% { transform: scale(1.06); } 60%, 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #rotate * { animation: none !important; } #rotate .phone { transform: rotate(-90deg); } #rotate .arc .trail { stroke-dashoffset: 0; } #rotate .arc .head { opacity: 1; } #rotate .phone .land img { transform: translateY(0); } #rotate .phone .mini-title { opacity: 1; transform: translateY(-50%); } }

/* Formulario del héroe: estilos base (el bloque compacto de abajo solo los ajusta en móvil apaisado) */
#enterForm h2 { margin: 0 0 6px; font: 32px Bangers, Impact, sans-serif; letter-spacing: 1px; }
#enterForm .lead { margin: 0 0 12px; font-weight: 700; color: #5a4d78; }
#enterForm label { display: block; margin: 10px 0 0; font-size: 14px; }
#enterForm .check { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 13px; font-weight: 700; color: #3b2f55; cursor: pointer; }
#enterForm .check input { margin: 3px 0 0; width: 18px; height: 18px; flex: 0 0 18px; accent-color: #b07cff; }
#enterForm .fine { margin: 10px 0 0; font-size: 12px; font-weight: 600; color: #7a6f94; line-height: 1.4; }
#enterForm .fine a { color: #7a4fd8; }
#enterForm .err { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #ffe3ea; color: #a11b3c; font-size: 13px; }
#enterForm .sent { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #e8fbf3; color: #155c43; font-size: 13px; }
#enterForm .sent p { margin: 0 0 6px; }
#enterForm .row { display: flex; gap: 10px; margin-top: 18px; }
#enterForm .go, #enterForm .ghost { padding: 13px 16px; font: 24px Bangers, Impact, sans-serif; letter-spacing: 1px; border-radius: 999px; border: 0; cursor: pointer; }
#enterForm .go { flex: 1; background: #1b0f2a; color: #fff; }
#enterForm .go:disabled { opacity: .6; cursor: default; }
#enterForm .ghost { flex: 0 0 120px; background: #f1ecfb; color: #5a4d78; }

#enterForm input[type=text]:focus, #enterForm input[type=email]:focus { outline: none; border-color: #b07cff; box-shadow: 0 0 0 3px rgba(176,124,255,.25); }
#enterForm input::placeholder { color: #b3a9cc; font-weight: 600; }
#enterForm .check input:focus-visible, #enterForm .go:focus-visible, #enterForm .ghost:focus-visible { outline: 3px solid rgba(176,124,255,.6); outline-offset: 2px; }
#enterForm .go:active, #enterForm .ghost:active { transform: scale(.98); }
/* con el teclado abierto en un móvil apaisado queda muy poco alto: el formulario se desplaza dentro de su caja, nunca la página */
#enter { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#enterForm { max-height: 100dvh; overflow-y: auto; }

/* Móvil apaisado: el formulario del héroe cabe sin scroll */
@media (max-height: 560px) {
  #enter { place-items: center; padding: 8px 12px; }
  #enterForm { width: min(620px, 100%); padding: 14px 18px 12px; border-radius: 16px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 4px; }
  #enterForm .kai-head { width: 64px; height: 64px; top: -34px; right: 14px; }
  #enterForm .kai-head img { width: 64px; }
  #enterForm h2 { grid-column: 1 / -1; font-size: 24px; margin: 0; }
  #enterForm .lead { grid-column: 1 / -1; font-size: 12px; margin: 0 0 4px; }
  #enterForm label { margin: 0; font-size: 12px; }
  /* 16px como mínimo: con menos, iOS hace zoom al enfocar y no lo deshace */
  #enterForm input[type=text], #enterForm input[type=email] { padding: 9px 12px; font-size: 16px; border-radius: 10px; }
  #enterForm .check { grid-column: 1 / -1; margin-top: 6px; font-size: 12px; }
  #enterForm .fine { grid-column: 1 / -1; font-size: 10px; margin: 4px 0 0; line-height: 1.3; }
  #enterForm .err, #enterForm .sent { grid-column: 1 / -1; }
  #enterForm .sent { padding: 8px 12px; font-size: 12px; margin-top: 6px; }
  #enterForm .row { grid-column: 1 / -1; margin-top: 8px; }
  #enterForm .row { display: flex; gap: 10px; }
  #enterForm .go, #enterForm .ghost { padding: 10px; font: 20px Bangers, Impact, sans-serif; letter-spacing: 1px; border-radius: 999px; border: 0; }
  #enterForm .go { flex: 1; }
  #enterForm .ghost { flex: 0 0 110px; }
  #enterForm .go { background: #1b0f2a; color: #fff; }
  #enterForm .ghost { background: #f1ecfb; color: #5a4d78; }
}