/* The character select before the game, on top of /style.css (the shrine, the stat card, the roster) and
   /app.css. Then the game itself, which fills the window. */

.pick { padding: 48px 0 40px; }
.pick .lead { margin-bottom: 8px; }
.side .card { margin-top: calc(2 * var(--k)); }

/* from 1100 px the card, the roster and Start stand beside the altar */
@media (min-width: 1100px) {
  .pick { padding-top: 24px; }
  .pick-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 32px; max-width: 1120px; margin: 0 auto; }
  .pick-grid .stage { margin-top: 0; }
  .side .card { flex-wrap: wrap; margin-top: 0; }
  .side .card-main { flex: 1 1 300px; }
  .side .card-weapon { flex: 1 1 100%; }
  .play-page .side .roster { margin-top: 40px; }
  .side .gate { margin-top: 20px; }
}

/* five characters: three a row on phones, one row from 560 px */
.play-page .roster { grid-template-columns: repeat(3, 72px); }
@media (max-width: 379px) { .play-page .roster { grid-template-columns: repeat(3, 64px); } }
@media (max-width: 339px) { .play-page .roster { grid-template-columns: repeat(3, 60px); } }
@media (min-width: 560px) { .play-page .roster { grid-template-columns: repeat(5, 72px); } }
@media (min-width: 700px) { .play-page .roster { grid-template-columns: repeat(5, 84px); } }
/* the landing page fades its last slots into the dark; here every slot is a character */
.play-page .slot:nth-child(n) { opacity: 1; }
.play-page .slot.held { opacity: 0.55; }
.play-page .slot.held[aria-checked="true"], .play-page .slot.held:hover, .play-page .slot.held:focus-visible { opacity: 1; }

/* a weapon without its icon yet shows the "?" */
.card-weapon.no-icon .wslot img { display: none; }
.card-weapon.no-icon .wq { display: block; }

.gate { max-width: 44ch; min-height: 3em; margin: 28px auto 0; color: var(--muted); text-align: center; }
.gate .linkish { font-size: 16px; }
.gate.open { color: var(--g2); }
.start-row { margin: 12px 0 0; text-align: center; }
.start { padding-left: 56px; padding-right: 56px; font-size: calc(3 * var(--j)); }

/* ---------- the game ---------- */
.game { position: fixed; inset: 0; z-index: 60; background: #090815; }
.game canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
.game-load { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; text-align: center; }
.game-title { margin: 0; font: 400 calc(2 * var(--j)) / 1 var(--display); color: var(--bone); }
.game-bar { width: 200px; height: 8px; background: var(--deep); box-shadow: 0 0 0 2px var(--s3); }
.game-bar div { width: 0; height: 100%; background: var(--g2); }
.game-note { max-width: 40ch; margin: 0; color: var(--muted); }
.game-note:empty { display: none; }