/* How to play with its practice arena (#72 later item 26; Shell/ShellScreens.HowTo, js/practice.ts):
   the rules and a small live arena side by side on wide screens (the arena stays in view while the
   rules scroll), and on any screen held sideways; the arena first and short on upright ones
   that are not wide. */

.how-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(18em, 1fr);
  gap: 1.1em;
  align-items: start;
  width: 100%;
  max-width: 96em;
  margin: 0 auto;
}

.how-wrap .help-panel {
  max-width: none;
  margin: 0;
}

.practice-panel {
  position: sticky;
  top: 1em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  min-width: 0;
}

.screen .practice-panel > h3 {
  margin: 0;
  font-size: 1.2em;
  font-weight: 900;
}

.practice-arena {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0.8em;
  border: 1px solid var(--ui-line);
  background: rgba(0, 0, 0, 0.3);
  /* The mouse and fingers play here: no scrolling or zooming from the arena. */
  touch-action: none;
  cursor: crosshair;
}

.theme-paper .practice-arena {
  background: rgba(43, 40, 54, 0.05);
}

.practice-panel p {
  margin: 0;
  color: var(--ui-dim);
  line-height: 1.4;
}

.practice-panel .practice-who {
  color: var(--ui-text);
  font-weight: 800;
}

.no-gamepad .practice-panel .pad-only {
  display: none;
}

/* Back on How to play is the Start button only with a gamepad (the keyboard's is Esc). */
.no-gamepad .how-to .pb-start {
  display: none;
}

/* Not wide but held sideways (a TV or 720p screen at large text, a phone on its side): still two
   columns, so the rules start right under the title; the arena column is narrower (never over
   about two fifths) and stays in view, short enough to fit the screen's height. */
:root:not([data-fit='wide']) .how-wrap {
  grid-template-columns: minmax(0, 1.25fr) minmax(min(12em, 38%), 0.8fr);
  gap: 0.8em;
}

:root:not([data-fit='wide']) .practice-arena {
  width: min(100%, (100vh - 12em) * 16 / 9);
  width: min(100%, (100dvh - 12em) * 16 / 9);
  margin: 0 auto;
}

:root[data-fit-y='short']:not([data-fit='wide']) .practice-panel {
  top: 0.4em;
  gap: 0.35em;
}

:root[data-fit-y='short']:not([data-fit='wide']) .practice-panel > h3 {
  display: none;
}

/* Upright and not wide (a phone, an upright tablet): one column. Back and the title, a short
   arena, then the rules in their own card. */
@media (orientation: portrait) {
  :root:not([data-fit='wide']) .how-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  :root:not([data-fit='wide']) .how-wrap .help-panel {
    display: contents;
  }

  :root:not([data-fit='wide']) .how-wrap .help-panel > button {
    align-self: flex-start;
  }

  :root:not([data-fit='wide']) .practice-panel {
    order: 1;
    position: static;
  }

  :root:not([data-fit='wide']) .how-wrap .help-body {
    order: 2;
    padding: 0.6em 1.1em;
    border-radius: 0.8em;
    border: 1px solid var(--ui-line);
    background: var(--ui);
  }

  :root:not([data-fit='wide']) .practice-arena {
    width: min(100%, 25vh * 16 / 9);
    width: min(100%, 25dvh * 16 / 9);
  }

  :root[data-fit-y='short']:not([data-fit='wide']) .practice-panel > h3 {
    display: block;
  }
}