/*
 * KIRO ARCADE: página inicial. Direção "Loud and flat" (design-taste-frontend, seed 1702942851):
 * campos chapados nas cores do kiro.dev, tipografia pixel gigante, inimigos recortados.
 * Exceção de marca: o roxo #9046FF é a cor do Kiro (a regra da casa veta violeta).
 */
:root {
  --ground: #000;
  --field: #9046ff;
  --field-deep: #2a0f57;
  --ink: #fafafa;
  --ink-dark: #0b0612;
  --soft: #b9b4c4;
  --accent-ink: #d8b4fe;
  --margin: clamp(16px, 2.2vw, 32px);
  --font-text: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --step-xl: clamp(64px, 12.6vw, 210px);
  --step-l: clamp(56px, 11vw, 176px);
  --step-m: 24px;
  --step-body: 18px;
  --step-s: 14px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--step-body)/1.5 var(--font-text);
  margin: 0;
  overflow-x: hidden;
}

a { color: inherit; }

/* ------------------------------------------------------------ barra */
.bar {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  left: 0;
  padding: 18px var(--margin);
  position: absolute;
  right: 0;
  top: 0;
  z-index: 5;
}

.wordmark {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  font-size: 26px;
  gap: 12px;
  text-decoration: none;
}

.wordmark-ghost { height: 34px; width: auto; }

/* "by" + logo da Select (branco, fundo transparente), do lado do nome do arcade. */
.wordmark-by {
  align-items: center;
  display: inline-flex;
  font: 600 15px/1 var(--font-text);
  gap: 8px;
  white-space: nowrap;
}

.wordmark-by img { height: 22px; width: auto; }

.close-by {
  align-items: center;
  align-self: end;
  display: flex;
  font: 600 15px/1 var(--font-text);
  gap: 10px;
  grid-column: 1 / -1;
  margin: 0;
  white-space: nowrap;
}

.close-by img { height: 18px; width: auto; }

.bar-links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  justify-content: flex-end;
}

.bar-links a,
.bar-full {
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  font: 600 var(--step-body)/1 var(--font-text);
  padding: 10px 0;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.bar-links a:hover,
.bar-full:hover { opacity: 0.7; }

/* ------------------------------------------------------------ botões */
.btn {
  align-items: center;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  font: 700 18px/1 var(--font-text);
  justify-content: center;
  min-height: 58px;
  padding: 0 30px;
  text-decoration: none;
  transition: transform 0.12s ease, background-color 0.15s ease, color 0.15s ease;
}

.btn:active { transform: translateY(2px); }
.btn--ink { background: var(--ink-dark); color: var(--ink); }
.btn--ink:hover { background: var(--ink); color: var(--ink-dark); }
.btn--accent { background: var(--field); color: var(--ink); }
.btn--accent:hover { background: var(--ink); color: var(--ink-dark); }

:focus-visible {
  outline: 3px solid var(--accent-ink);
  outline-offset: 3px;
}

/* ------------------------------------------------------------ abertura */
.hero {
  background: var(--field);
  display: grid;
  grid-template-columns: 56% 44%;
  height: max(100svh, 720px);
  overflow: hidden;
  position: relative;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: max(120px, 15svh) var(--margin) 0;
  position: relative;
}

.hero-title {
  display: grid;
  font-size: min(7.8vw, 19svh);
  gap: 0.06em;
  line-height: 1;
  margin: 0;
}

.hero-title .mask { display: block; overflow: hidden; }
.hero-title pixel-text { color: var(--ink); display: block; }

.hero-talk {
  display: grid;
  gap: 28px;
  justify-items: start;
}

.hero-lead {
  font-size: var(--step-m);
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
  max-width: 30ch;
}

.hero-cast {
  flex: 1;
  min-height: 160px;
  pointer-events: none;
  position: relative;
}

.hero-ghost {
  animation: ghost-float 3.2s ease-in-out infinite;
  bottom: -12%;
  height: 120%;
  left: 0;
  position: absolute;
  transform: rotate(-5deg);
  width: auto;
}

.hero-cast .sprite { bottom: 16%; position: absolute; }
.hero-cast .sprite--glutton { left: 38%; transform: rotate(4deg) scale(1.2); }
.hero-cast .sprite--hallucination { bottom: 44%; left: 56%; transform: rotate(-3deg); }

@keyframes ghost-float {
  50% { transform: rotate(-3deg) translateY(-14px); }
}

.hero-shot {
  background: var(--ground);
  margin: 0;
  position: relative;
}

.hero-shot img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  width: 100%;
}

.hero-figure {
  background: var(--ink-dark);
  bottom: 0;
  color: var(--ink);
  display: grid;
  gap: 4px;
  left: 0;
  padding: 22px 24px;
  position: absolute;
  width: 280px;
}

.hero-figure strong { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.hero-figure > span { font-size: var(--step-s); line-height: 1.35; }

/* ------------------------------------------------------------ jogos */
.game {
  display: grid;
  gap: 40px var(--margin);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  padding: 150px var(--margin);
}

.game--kiroman { background: var(--ground); }
.game--kirotana { background: var(--field-deep); }

.game-title {
  font-size: var(--step-l);
  grid-column: 1 / -1;
  line-height: 1;
  margin: 0;
}

.game--kiroman .game-title { color: var(--accent-ink); }
.game--kirotana .game-title { color: var(--ink); }

.game-pitch {
  font-size: var(--step-m);
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
  max-width: 34ch;
}

.game--kiroman .game-pitch { grid-column: 1 / span 6; }
.game--kiroman .game-live { grid-column: 8 / -1; grid-row: 2 / span 4; margin: 0 calc(var(--margin) * -1) 0 0; }
.game--kiroman .cast { grid-column: 1 / span 6; }
.game--kiroman .facts { grid-column: 1 / span 6; }
.game--kiroman .btn { grid-column: 1 / span 4; justify-self: start; }
.game-live--tall iframe { aspect-ratio: 4 / 5; }

.cast {
  display: grid;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cast li {
  align-items: center;
  column-gap: 22px;
  display: grid;
  grid-template-columns: 96px 1fr;
}

.cast b { color: var(--c); font-size: var(--step-m); font-weight: 800; line-height: 1.1; }
.cast li span:last-child { grid-column: 2; }
.cast .sprite { grid-row: span 2; }

.sprite {
  animation: sprite-walk 0.5s steps(2) infinite;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 192px 96px;
  display: inline-block;
  height: 96px;
  image-rendering: pixelated;
  width: 96px;
}

@keyframes sprite-walk { to { background-position: -192px 0; } }

.sprite--glutton { background-image: url(../games/kiroman/assets/sprites/blinky_right.svg); }
.sprite--hallucination { background-image: url(../games/kiroman/assets/sprites/pinky_left.svg); }
.sprite--retry { background-image: url(../games/kiroman/assets/sprites/inky_right.svg); }
.sprite--amnesia { background-image: url(../games/kiroman/assets/sprites/clyde_right.svg); }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 44px;
  margin: 0;
}

.facts div { display: grid; gap: 2px; }
.facts dt { color: var(--soft); font-size: var(--step-s); }
.facts dd { font-size: var(--step-body); font-weight: 700; margin: 0; }

.game--kirotana .game-live { grid-column: 1 / span 7; grid-row: 2 / span 4; margin: 0 0 0 calc(var(--margin) * -1); }
.game--kirotana .game-pitch { grid-column: 8 / -1; }
.game--kirotana .tokens { grid-column: 8 / -1; }
.game--kirotana .facts { grid-column: 8 / -1; }
.game--kirotana .btn { grid-column: 8 / span 4; justify-self: start; }

.game-live iframe {
  aspect-ratio: 4 / 3;
  background: var(--ground);
  border: 0;
  display: block;
  pointer-events: none;
  width: 100%;
}

.tokens {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tokens li {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: 44px 1fr auto;
}

.tokens i {
  align-items: center;
  border-radius: 50%;
  color: var(--ink-dark);
  display: inline-flex;
  font: 800 var(--step-s)/1 var(--font-text);
  font-style: normal;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.tokens .sprite-canvas { height: 44px; image-rendering: pixelated; width: 44px; }

.tokens b { font-variant-numeric: tabular-nums; }
.tokens .is-bomb i { background: #ff4d6d; color: var(--ink-dark); }
.tokens .is-bomb { color: #ffc2cd; }

/* ------------------------------------------------------------ como ganhar */
.verb {
  align-content: center;
  align-items: center;
  display: grid;
  gap: 24px var(--margin);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-height: 80svh;
  padding: 120px var(--margin);
}

.verb--a { background: var(--ground); }
.verb--b { background: var(--field); }
.verb--c { background: var(--ground); }
.verb--d { background: var(--field-deep); }

.verb-word {
  color: var(--ink);
  font-size: min(10.5vw, 170px);
  grid-column: 1 / span 6;
  grid-row: 1 / span 2;
  line-height: 1;
  margin: 0;
}

.verb-pic { grid-column: 7 / -1; margin: 0; }
.verb-pic--portrait { grid-column: 8 / span 4; }
.verb-pic img { display: block; height: auto; width: 100%; }

.verb--a .verb-word,
.verb--c .verb-word { color: var(--accent-ink); }
.verb--a .verb-word { font-size: min(9.2vw, 150px); }
.verb--c .verb-word { font-size: min(6.6vw, 110px); }

.verb-note {
  font-size: var(--step-body);
  grid-column: 7 / -1;
  margin: 0;
  max-width: 44ch;
}

/* ------------------------------------------------------------ placar */
.board {
  background: var(--ground);
  padding: 150px var(--margin);
}

.board-title {
  font-size: 40px;
  font-weight: 800;
  margin: 0 0 32px;
}

.board-table {
  font-size: var(--step-m);
  font-variant-numeric: tabular-nums;
}

.board-game {
  background: var(--ground);
  color: var(--accent-ink);
  margin: 72px 0 20px;
  position: sticky;
  top: 0;
}

.board-game:first-child { margin-top: 0; }

.board-row {
  display: grid;
  grid-template-columns: 33% 33% 1fr auto;
  line-height: 1.5;
}

.board-row span:last-child { text-align: right; }
.board-row--empty { color: var(--soft); display: block; }

.board-note {
  color: var(--soft);
  font-size: var(--step-s);
  margin: 48px 0 0;
  max-width: 60ch;
}

/* ------------------------------------------------------------ rodapé */
.close {
  background: var(--field);
  display: grid;
  gap: 40px var(--margin);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-height: 100svh;
  overflow: hidden;
  padding: 120px var(--margin) 0;
  position: relative;
}

.close-top {
  display: grid;
  gap: 32px;
  grid-column: 1 / span 7;
  justify-items: start;
}

.close-invite {
  font-size: 72px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
  max-width: 14ch;
}

.close-links {
  display: grid;
  gap: 10px;
  grid-column: 10 / -1;
  list-style: none;
  margin: 0;
  padding: 0;
}

.close-links a,
.close-links button {
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  font: 600 var(--step-body)/1.6 var(--font-text);
  padding: 0;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.close-legal {
  align-self: end;
  font-size: var(--step-s);
  grid-column: 1 / -1;
  margin: 0;
  max-width: 60ch;
}

.close-name {
  color: var(--ink-dark);
  font-size: 34vw;
  grid-column: 1 / -1;
  line-height: 0.8;
  margin: 0 0 0 -0.02em;
  transform: translateY(18%);
  white-space: nowrap;
}

/* ------------------------------------------------------------ entradas (só com JS) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}

.js [data-reveal].is-in { opacity: 1; transform: none; }

.js .hero-title pixel-text {
  animation: line-rise 0.9s var(--ease-out) both;
}

.js .hero-title .mask:nth-child(2) pixel-text { animation-delay: 0.11s; }
.js .hero-talk { animation: fade-up 0.7s var(--ease-out) 0.5s both; }

@keyframes line-rise { from { transform: translateY(105%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } }

/* ------------------------------------------------------------ celular */
@media (max-width: 820px) {
  .bar { padding: 14px 20px; }
  .bar-links a { display: none; }
  .wordmark { flex-wrap: wrap; font-size: 20px; row-gap: 6px; }
  .wordmark-by { flex-basis: 100%; font-size: 13px; } /* "by Select" desce para a segunda linha */
  .wordmark-by img { height: 16px; }

  .hero {
    display: flex;
    flex-direction: column;
    height: auto;
    padding-top: 86px;
  }

  .hero-copy { gap: 26px; padding: 24px 20px 0; }
  .hero-title { font-size: clamp(34px, 13.2vw, 96px); }
  .hero-talk { gap: 22px; }
  .hero-lead { font-size: var(--step-body); }
  .hero-talk .btn { width: 100%; }
  .hero-cast { display: none; }
  .hero-shot { margin-top: 56px; }
  .hero-shot img { aspect-ratio: 4 / 3; margin-top: 0; object-fit: cover; object-position: center 22%; }
  .hero-figure { padding: 14px 18px; width: 60%; }
  .hero-figure strong { font-size: 32px; }

  .game { display: flex; flex-direction: column; gap: 28px; padding: 96px 20px; }
  .game-title { font-size: clamp(48px, 15vw, 96px); }
  .game .game-live { margin: 0 -20px; }
  .game .btn { align-self: stretch; }
  .cast li { grid-template-columns: 72px 1fr; }
  .cast .sprite { background-size: 144px 72px; height: 72px; width: 72px; }
  @keyframes sprite-walk { to { background-position: -144px 0; } }

  .verb { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-height: auto; padding: 96px 20px; }
  .verb-word { font-size: 18vw; }
  .verb--a .verb-word { font-size: 17vw; }
  .verb--c .verb-word { font-size: 12.5vw; }
  .verb-pic, .verb-pic--portrait { width: 100%; }
  .verb-pic--portrait { max-width: 320px; }

  .board { padding: 96px 20px; }
  .board-row { column-gap: 12px; grid-template-columns: 1fr auto; }
  .board-row span:nth-child(2),
  .board-row span:nth-child(3) { display: none; }
  .board-table { font-size: var(--step-m); }

  .close { display: flex; flex-direction: column; min-height: 100svh; padding: 96px 20px 0; }
  .close-invite { font-size: 11vw; }
  .close-top .btn { width: 100%; }
  .close-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
  .close-legal { font-size: var(--step-s); }
  .close-name { font-size: 40vw; margin-top: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-ghost, .sprite { animation: none; }
  .js .hero-title pixel-text, .js .hero-talk { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}