/* KIROTANA: tela inicial e barra superior. O jogo em si é desenhado no canvas. */
* { box-sizing: border-box; }

html,
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  height: 100%;
  margin: 0;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

#stage {
  cursor: crosshair;
  display: block;
  inset: 0;
  position: fixed;
  touch-action: none;
  user-select: none;
}

.topbar {
  display: flex;
  justify-content: space-between;
  left: 0;
  padding: 14px 18px;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 3;
}

.pill {
  align-items: center;
  background: rgb(17 16 20 / 75%);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg);
  cursor: pointer;
  display: inline-flex;
  font: 700 12px/1 var(--font-ui);
  height: 44px;
  letter-spacing: 0.08em;
  padding: 0 16px;
  pointer-events: auto;
  text-decoration: none;
}

.pill:hover { border-color: var(--kiro-purple); color: var(--kiro-purple-300); }
.pill:focus-visible { outline: 3px solid var(--kiro-purple-300); outline-offset: 2px; }

/* Tela inicial: por cima do canvas, deixando as fichas de demonstração passarem por trás. */
.title {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vh, 20px);
  inset: 0;
  justify-content: center;
  overflow-y: auto;
  padding: 80px 16px 24px;
  pointer-events: none;
  position: fixed;
  text-align: center;
  z-index: 2;
}

.title[hidden] { display: none; }

.title > * { max-width: 720px; pointer-events: auto; }

.title-logo {
  color: var(--kiro-purple-300);
  filter: drop-shadow(0 0 20px rgb(144 70 255 / 90%));
  font-size: clamp(46px, 10vw, 104px);
}

.title-tagline {
  color: var(--code-yellow);
  font-size: clamp(16px, 2.4vw, 22px);
  font-weight: 700;
  margin: 0;
}

.title-how {
  color: var(--muted);
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.55;
  margin: 0;
}

.title-how b { color: var(--fg); }

.legend {
  background: rgb(17 16 20 / 82%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 8px 18px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  list-style: none;
  margin: 0;
  padding: 14px 16px;
  width: 100%;
}

.legend li {
  align-items: center;
  display: grid;
  font-size: 13px;
  gap: 10px;
  grid-template-columns: 38px 1fr auto;
  text-align: left;
}

.legend b { color: var(--fg); font-variant-numeric: tabular-nums; }
.legend .is-bomb span:nth-child(2),
.legend .is-bomb b { color: #ff8fa3; }

.chip {
  align-items: center;
  background: radial-gradient(circle at 32% 30%, #fff 0 8%, var(--c) 30%, color-mix(in srgb, var(--c), #000 45%) 100%);
  border-radius: 50%;
  box-shadow: 0 0 14px color-mix(in srgb, var(--c), transparent 40%);
  color: #120a24;
  display: inline-flex;
  font: 800 11px/1 var(--font-ui);
  height: 38px;
  justify-content: center;
  width: 38px;
}

.chip--bomb {
  background: radial-gradient(circle at 32% 30%, #4a2a3a, #0b0410);
  border: 3px solid #ff4d6d;
  box-shadow: 0 0 14px rgb(255 77 109 / 70%);
  color: #ff4d6d;
}

.powers {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 10px 22px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.powers li { align-items: center; display: inline-flex; gap: 8px; }

.gem {
  background: var(--c);
  border-radius: 8px;
  color: #120a24;
  font: 800 10px/1 var(--font-ui);
  padding: 6px 7px;
  transform: rotate(-6deg);
}

.title-goal { font-size: clamp(15px, 2vw, 18px); margin: 0; }
.title-goal strong { color: var(--code-green); }
.title-start { font-size: 20px; min-height: 58px; min-width: 240px; }
.title-hint { color: var(--muted); font-size: 12px; margin: 0; }

@media (max-height: 700px) {
  .title-how, .powers { display: none; }
}

/* Vitrine (?embed=1): só as fichas passando, sem tela inicial nem botões. */
.is-embed .title,
.is-embed .topbar { display: none; }
.is-embed #stage { pointer-events: none; }

/* Legenda: o sprite de cada Tokenívoro (scripts/sprites.js). */
.chip-sprite { display: inline-flex; height: 38px; width: 38px; }
.chip-sprite .sprite-canvas { height: 100%; image-rendering: pixelated; width: 100%; }

/* Botão TERMINAR: só aparece durante a rodada. */
.topbar-right { display: flex; gap: 8px; }
.pill--end { display: none; }
.is-playing .pill--end { display: inline-flex; }