/* Frenzy: pass-and-play, the results' journeys and recap, and the tutorial (ARCHITECTURE 15). The look follows
   style.css (its tokens: --fin, --foam, --ocean-deep, --line, --target). No inline styles (the CSP). Every control is
   at least --target (48 px).
   Layers over the game screen (game.css): board 3, prompt 5, inspection 6, leave question 8. The tutorial coach sits
   at 4 (under all of the game's own dialogs), the reaction check and the lesson-won panel at 7 (under the leave
   question), and the pass cover at 50, over everything (the screens under it are also inert). */

/* --- Pass-and-play setup ------------------------------------------------------------------------------------------ */

.pass-seats { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.pass-seat { border: 2px solid var(--line); border-radius: 14px; padding: 0.5rem 0.75rem; display: grid; gap: 0.375rem; }
.pass-seat-title { margin: 0; display: flex; align-items: center; gap: 0.5rem; font-weight: 800; }
.pass-seat-title .shark-swatch { inline-size: 1.25rem; block-size: 1.25rem; }
.pass-seat-tools { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.pass-seat-tools .tool { flex: 1 1 9rem; justify-content: center; }
.pass-kind.is-person { border-color: var(--fin); color: var(--fin); }
.pass-ability { margin: 0; }
.pass-warn { color: var(--fin); font-weight: 700; min-block-size: 1lh; }
.pass-warn:empty { min-block-size: 0; }

/* --- The pass cover ----------------------------------------------------------------------------------------------- */

.pass-cover {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: var(--gutter);
  background: radial-gradient(ellipse at 50% 30%, var(--ocean) 0%, var(--ocean-deep) 75%);
  overflow-y: auto;
}
.pass-cover[hidden] { display: none; }
html[data-pass-cover='on'] body { overflow: hidden; }
.pass-cover-card {
  inline-size: min(100%, 30rem);
  display: grid; justify-items: center; gap: 0.75rem; text-align: center;
  padding: 1.5rem 1rem;
  border: 2px solid var(--fin); border-radius: 20px; background: var(--panel);
}
.pass-cover-card .shark-swatch { inline-size: 3.5rem; block-size: 3.5rem; border-width: 3px; }
.pass-cover-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.375rem, 6vw, 2rem); color: var(--fin); overflow-wrap: anywhere; }
.pass-cover-shark, .pass-cover-reason { margin: 0; font-size: 1.125rem; }
.pass-cover-peek { margin: 0; color: var(--muted); font-weight: 700; }
.pass-cover-reveal { inline-size: 100%; min-block-size: 3.5rem; font-size: 1.125rem; }

.pass-check {
  position: fixed; z-index: 7; inset-inline: 0; inset-block-end: 0;
  margin-inline: auto; max-inline-size: 30rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1rem;
  padding: 0.75rem var(--gutter) max(0.75rem, env(safe-area-inset-bottom));
  background: var(--ocean-deep); border: 2px solid var(--fin); border-block-end: 0; border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 24px rgb(0 0 0 / 0.45);
}
.pass-check[hidden] { display: none; }
.pass-check-text { margin: 0; font-weight: 700; }

/* --- Results: recap and journeys ---------------------------------------------------------------------------------- */

.results-recap { margin: 0 0 0.5rem; padding-inline-start: 1.5rem; display: grid; gap: 0.375rem; }
.results-recap li::marker { color: var(--fin); font-weight: 700; }
.results-recap .moment-winningFight, .results-recap .moment-roundLimit { font-weight: 700; }
.journeys .journey { display: grid; gap: 0.25rem; align-items: start; }
.journey-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.journey-title { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.journey-badge { border-radius: 999px; padding: 0.125rem 0.625rem; background: var(--fin); color: var(--fin-ink); font-size: 0.875rem; }
.journey-stats { margin: 0; display: flex; flex-wrap: wrap; gap: 0.125rem 1rem; font-weight: 400; color: var(--muted); }
.journey-stats .journey-sizes { flex: 1 1 100%; color: var(--foam); overflow-wrap: anywhere; }

/* --- The tutorial ------------------------------------------------------------------------------------------------- */

.howto-tutorial { align-self: flex-start; margin-block-end: 0.75rem; border-color: var(--fin); color: var(--fin); }

.tutorial-offer {
  border: 2px solid var(--fin); border-radius: 16px; padding: 0.75rem 1rem; margin-block-end: 0.75rem;
  background: rgb(255 107 74 / 0.1);
}
.tutorial-offer-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.125rem; color: var(--fin); }
.tutorial-offer p { margin: 0.25rem 0 0.5rem; }
.tutorial-offer-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.tutorial-lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.tutorial-lesson {
  inline-size: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  border-radius: 14px; text-align: start; min-block-size: 3.5rem;
}
.tutorial-lesson.done { border-color: var(--fin); }
.tutorial-lesson-done { flex: none; border-radius: 999px; padding: 0.125rem 0.625rem; background: var(--fin); color: var(--fin-ink); font-size: 0.875rem; }

.tutorial-coach {
  position: fixed; z-index: 4; inset-inline: 0; inset-block-end: 0;
  margin-inline: auto; max-inline-size: 34rem;
  display: grid; gap: 0.25rem;
  padding: 0.625rem var(--gutter) max(0.625rem, env(safe-area-inset-bottom));
  background: var(--ocean-deep); border: 2px solid var(--fin); border-block-end: 0; border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 24px rgb(0 0 0 / 0.45);
}
.tutorial-coach[hidden] { display: none; }
.coach-progress { margin: 0; font-size: 0.875rem; font-weight: 800; color: var(--fin); }
.coach-text { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.coach-hint { margin: 0; color: var(--muted); font-weight: 700; }
.coach-hint[hidden] { display: none; }
.coach-next { justify-self: end; }
.coach-next[hidden] { display: none; }
/* Room under the game for the coach, so nothing the lesson needs hides behind it. */
html[data-tutorial='on'] #screens { padding-block-end: 9rem; }
/* Wide screens: the coach sits in the corner over the log, clear of the board, the actions and the hand. */
@media (orientation: landscape) and (min-width: 600px) {
  html[data-tutorial='on'] #screens { padding-block-end: 0; }
  .tutorial-coach {
    inset-inline: auto auto; inset-inline-start: var(--gutter); inset-block-end: var(--gutter);
    max-inline-size: min(24rem, 34vw); border-block-end: 2px solid var(--fin); border-radius: 16px;
  }
}

.tutorial-glow { outline: 4px solid var(--fin); outline-offset: 3px; animation: tutorial-glow 1.2s ease-in-out infinite; }
@keyframes tutorial-glow { 50% { outline-color: var(--foam); } }

.tutorial-done {
  position: fixed; inset: 0; z-index: 7;
  display: grid; place-items: center; padding: var(--gutter);
  background: rgb(4 24 36 / 0.8);
}
.tutorial-done[hidden] { display: none; }
.tutorial-done-card {
  inline-size: min(100%, 28rem); display: grid; gap: 0.75rem; text-align: center;
  padding: 1.5rem 1rem; border: 2px solid var(--fin); border-radius: 20px; background: var(--ocean-deep);
}
.coach-done-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 7vw, 2.25rem); color: var(--fin); }
.coach-done-text, .coach-done-more { margin: 0; font-size: 1.125rem; }
.coach-done-more[hidden] { display: none; }
.tutorial-done-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }