/* The "How to play" video in each game's rules sheet (tutorial.js): under the
   kicker and title, above the rules, on their first page only.
   The sheet is #briefing .sheet in the kit games and #help-modal in City Limits. */
.tutorial { margin: 0; flex: none; min-width: 0; }
.tutorial video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background: #13110f;
  /* A frame outside the box: a playing video's layer painted over a border's
     bottom edge. */
  box-shadow: 0 0 0 1px var(--rule, #13110f);
}
.tutorial-watch { display: none; }
/* On the first page of the rules only (kit.js fitInformation). */
.tutorial.off-page { display: none !important; }

/* Under the title, above the rules, which page themselves in the room left.
   Kept to under half the window's height. */
.tutorial { --tutorial-h: min(40dvh, 420px); }
.tutorial video { width: min(100%, calc(var(--tutorial-h) * 1.6)); margin: 0 auto; }
/* A phone, or a screen too short for the video and the rules together (a
   phone held sideways): a card that plays the video full screen. */
@media (max-width: 600px), (max-height: 500px) {
  .tutorial video { display: none; }
  .tutorial.watching video { display: block; width: 100%; max-height: 60dvh; }
  .tutorial.watching .tutorial-watch { display: none; }
  .tutorial-watch {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border, #aaa39d);
    background: var(--panel, #f8f5f1);
    color: var(--text, #13110f);
    text-align: left;
    cursor: pointer;
    font: inherit;
  }
  .tutorial-thumb { position: relative; flex: none; width: 96px; aspect-ratio: 16 / 10; background: #13110f; overflow: hidden; }
  .tutorial-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .8; }
  .tutorial-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent-bright, #48db7e);
  }
  .tutorial-play::after {
    content: "";
    position: absolute;
    left: 11px;
    top: 8px;
    border-style: solid;
    border-width: 7px 0 7px 11px;
    border-color: transparent transparent transparent #07240f;
  }
  .tutorial-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .tutorial-words b { font-size: 15px; }
  .tutorial-words small { font: 11px/1.35 var(--mono, monospace); color: var(--muted, #46413e); }
}