/* howto.css - THE ONE HOW-TO PATTERN, used in the game and nowhere else.
 *
 * Pattern: ../baccattack.com's explainer bands - a .sec-head (kicker, title,
 * sub) over a card grid, rather than a paragraph with the rules buried in it.
 * The kicker says WHEN this applies, the title says what it is, the sub is one
 * sentence of premise, and every actual instruction is a numbered card. A
 * player looking for one answer can find it without reading the other three.
 *
 * WHY THIS IS A FILE AND NOT TWO BLOCKS OF CSS. /play and /duel both have to
 * explain a rule, and the two explanations were drifting apart: the clash
 * lobby had an .howto with its own type scale and the run screen had a one-line
 * hint under the jump button. Two patterns for the same job is how a game ends
 * up teaching the same rule twice in two voices. There is one here, both pages
 * link it, and a change lands in both.
 *
 * Palette is style.css tokens only, and shadows stay warm oxblood (GDD s5.1).
 */

.howto {
    padding: 1.6rem 1.5rem 1.5rem;
    border: 1px solid var(--card-line); border-radius: var(--radius);
    background: var(--card);
}

/* ── the head ── */
.howto-head { margin-bottom: 1.3rem; max-width: 62ch; }
.howto-kicker {
    margin: 0 0 0.35rem;
    font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--corn);
}
.howto-title {
    font-family: 'Alfa Slab One', Georgia, serif;
    font-size: clamp(1.4rem, 3.4vw, 2rem);
    line-height: 1.05; margin: 0 0 0.5rem; color: var(--cream);
}
.howto-sub { margin: 0; color: var(--text-dim); font-size: 0.98rem; }

/* ── the teacher ──
 * Pattern: ../baccattack.com's .bot-card / dealer-hero - a face, a name, a role
 * tag and a one-line brief, so the thing talking to you is somebody rather than
 * a panel. The signature row is theirs too.
 *
 * A grid rather than a float, so the steps sit beside the character on a wide
 * sheet and under them on a phone, and the face never pushes the text column
 * narrower than it can hold a sentence (hence min-width: 0 on the body side).
 */
.howto-body { display: grid; gap: 1.1rem; grid-template-columns: 15rem minmax(0, 1fr); align-items: start; }
.howto-teacher {
    padding: 0.9rem 0.9rem 1rem;
    border: 1px solid var(--card-line); border-radius: 12px;
    background: rgba(46, 21, 18, 0.45);
    text-align: center;
}
/*
 * THE FACE FALLS BACK TO A MEDALLION, it does not fall back to a broken image.
 * The render is not on the CDN yet (web/js/crew.js says why and where), so the
 * initials and the ring are drawn underneath and the portrait is a background
 * image on top: a 404 or a 403 simply leaves the medallion, with no error state
 * to design. Same reasoning as the landing hero sitting on its still.
 */
.teacher-face {
    position: relative;
    width: 7.5rem; height: 7.5rem; margin: 0 auto 0.7rem;
    border-radius: 50%;
    border: 2px solid var(--corn);
    background: radial-gradient(circle at 50% 36%, var(--grape) 0%, var(--grape-deep) 72%);
    background-size: cover; background-position: center top; background-repeat: no-repeat;
    box-shadow: inset 0 2px 10px rgba(46, 21, 18, 0.7);
    display: grid; place-items: center;
    overflow: hidden;
}
.teacher-face .initials {
    font-family: 'Alfa Slab One', Georgia, serif;
    font-size: 1.9rem; color: var(--corn); opacity: 0.85;
    letter-spacing: 0.04em;
}
/* With a portrait loaded, the initials would show through it. */
.teacher-face.has-art { background-size: cover; }
.teacher-face.has-art .initials { display: none; }

.teacher-name { font-family: 'Alfa Slab One', Georgia, serif; font-weight: 400; font-size: 1.1rem; margin: 0 0 0.1rem; color: var(--cream); }
.teacher-role { margin: 0 0 0.5rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--corn); }
.teacher-brief { margin: 0 0 0.6rem; font-size: 0.84rem; color: var(--text-dim); }
.teacher-sig {
    display: flex; flex-direction: column; gap: 0.1rem;
    padding-top: 0.55rem; border-top: 1px solid var(--card-line);
    font-size: 0.78rem;
}
.teacher-sig .cap { letter-spacing: 0.12em; text-transform: uppercase; color: var(--dust); font-size: 0.66rem; }
.teacher-sig .val { color: var(--cream); }
/* What he says before the steps. Quoted, because it is speech and the steps
 * below are also his: without the quote the whole panel reads as narration. */
.teacher-hello {
    margin: 0 0 0.9rem; max-width: 62ch;
    font-size: 1rem; color: var(--cream);
    border-left: 3px solid var(--magenta); padding-left: 0.8rem;
}

/* ── the steps ──
 * auto-fit rather than a fixed four columns: the run screen shows this inside a
 * sheet and the clash lobby shows it full width, and one grid that answers to
 * the space it is given beats two grids that each guess. */
.howto-steps {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 0.8rem;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.howto-steps .step {
    position: relative;
    padding: 1rem 1rem 1.05rem;
    border: 1px solid var(--card-line); border-radius: 12px;
    background: rgba(46, 21, 18, 0.35);
}
/* The number is the ordinal, drawn big and flat because the order is the
 * instruction. A CSS counter would be the same glyph with less control over
 * where it sits relative to the heading. */
.howto-steps .step-n {
    display: block;
    font-family: 'Alfa Slab One', Georgia, serif;
    font-size: 1.5rem; line-height: 1;
    color: var(--magenta);
    margin-bottom: 0.45rem;
}
.howto-steps .step-h {
    font-size: 1rem; margin: 0 0 0.3rem; color: var(--cream);
    letter-spacing: 0.01em;
}
.howto-steps .step-p { margin: 0; font-size: 0.9rem; color: var(--text-dim); }
.howto-steps .step-p b { color: var(--dust); font-weight: 600; }

/* The key one gets the chute colour, because the chute IS the game and a grid
 * of four identical cards says all four decisions weigh the same. */
.howto-steps .step.is-key { border-color: var(--magenta); background: rgba(217, 79, 43, 0.12); }
.howto-steps .step.is-key .step-n { color: var(--corn); }

.howto-fine {
    margin: 1.1rem 0 0; max-width: 72ch;
    font-size: 0.84rem; color: var(--dust);
}

/* ── the in-game sheet ──
 * On a game screen the how-to is a thing you open, not a band you scroll past:
 * the run screen is one viewport by design and a section below the fold would
 * be a section nobody on the ramp ever sees. Hidden with [hidden] so it is out
 * of the accessibility tree too, not just off screen. */
.howto-sheet[hidden] { display: none; }
.howto-sheet {
    position: fixed; inset: 0; z-index: 60;
    display: flex; align-items: center; justify-content: center;
    padding: 1.2rem;
    background: rgba(36, 26, 22, 0.82);
    overflow-y: auto;
}
.howto-sheet .howto {
    position: relative;
    width: min(880px, 100%);
    max-height: calc(100vh - 2.4rem); max-height: calc(100svh - 2.4rem);
    overflow-y: auto;
    box-shadow: 0 18px 44px rgba(46, 21, 18, 0.6);
}
.howto-close {
    position: absolute; top: 0.7rem; right: 0.8rem;
    width: 2.1rem; height: 2.1rem; padding: 0;
    border: 1px solid var(--card-line); border-radius: 50%;
    background: var(--grape-deep); color: var(--cream);
    font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.howto-close:hover, .howto-close:focus-visible { background: var(--grape); color: var(--corn); }
.howto-done { margin-top: 1.1rem; }

/* The opener. Lives in the brandbar beside the tag, so it is in the same place
 * on every screen of the run and never moves with the phase. */
.howto-open {
    font: inherit; font-size: 0.84rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--card-line); border-radius: 999px;
    background: transparent; color: var(--dust); cursor: pointer;
    letter-spacing: 0.02em;
}
.howto-open:hover, .howto-open:focus-visible { color: var(--corn); border-color: var(--corn); }

/* The character column goes above the steps before the steps go single file,
 * so there is one width where the cards are still two across. */
@media (max-width: 760px) {
    .howto-body { grid-template-columns: minmax(0, 1fr); }
    .howto-teacher { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.9rem; text-align: left; align-items: center; }
    .teacher-face { width: 5.5rem; height: 5.5rem; margin: 0; grid-row: span 4; }
    .teacher-brief { margin-bottom: 0; }
    .teacher-sig { border-top: 0; padding-top: 0; flex-direction: row; gap: 0.4rem; align-items: baseline; }
}

@media (max-width: 560px) {
    .howto { padding: 1.3rem 1.1rem 1.2rem; }
    .howto-steps { grid-template-columns: 1fr; }
}