/*
 * The typewriter's own styling, lifted out of layouts/game.blade.php in dig
 * #443 so the world's race and route players share it with the WSER teaser.
 * Travels with public/js/typewriter.js — one is no use without the other.
 *
 * Everything here reads only --ink/--paper/--panel/--muted/--rule/--accent,
 * all of which both layouts already define identically.
 */

/* Typed-but-not-yet-printed elements must stay gone even when a class
   sets its own display (buttons, etc.). Without this rule a .choice button
   flashes its whole label before the first character is typed.

   It carries a second job since dig #632: a `data-tw-show` readout opens a row
   at a time, and its rows are held back with this same attribute rather than a
   `display` override — `.kv` is a flexbox and forcing `block` on it would
   flatten every label/value row in the world. Taking the attribute off gives
   each row its own display back, whatever that happens to be. */
[hidden] { display: none !important; }

/* The cursor: steady while typing, blinking at rest. */
.tw-cursor {
    display: inline-block;
    width: .58em;
    color: var(--accent);
    animation: cursor-blink 1.06s steps(2, start) infinite;
}
.tw-cursor.typing { animation: none; }
@keyframes cursor-blink { 50% { opacity: 0; } }
.tw-rest { min-height: 1.6em; margin-top: .8rem; }
.tw-rest:has(.tw-cursor)::before { content: "> "; color: var(--muted); }

/*
 * Location art — a half-block postcard, printed row by row, modem-style.
 *
 * Lived in layouts/game.blade.php until dig #1258, when the WUU2K 65 got
 * banners of its own: it is the same picture on the teaser and on race day,
 * and one of the two layouts having its own copy of the rules is how the two
 * surfaces stop looking like the same game.
 *
 * The font-size clamp is what fits eighty columns of ▀ into a phone without a
 * horizontal scrollbar, so it is measured against the viewport. The ceiling is
 * the measure both layouts set (40rem, less the gutters, over the 48em eighty
 * columns of a 0.6em-advance monospace occupy) — it was 11.5px and left a bare
 * strip down the right of every banner on a desktop.
 *
 * `fit-content` is the belt to that braces: the border hugs the art at any
 * size, so a font-size this arithmetic gets slightly wrong is a banner that is
 * a little small rather than a frame with a gap in it.
 */
.art {
    margin: 1.2rem auto .4rem;
    width: fit-content;
    max-width: 100%;
    border: 1px solid var(--rule);
    padding: 4px 6px;
    overflow: hidden;
    line-height: 1;
    letter-spacing: 0;
    font-size: clamp(5px, calc((100vw - 2.5rem) / 48), 12.5px);
    /* The runs carry their own colours, and the phosphor bleed the rest of
       the Console is drawn with turns them to mush at this size. */
    text-shadow: none;
}
.art > div { line-height: 1.05; white-space: pre; }

/*
 * ⚠️ A run of half blocks is an <i> and it must not be italic (dig #1273).
 *
 * The element is a styling hook and nothing else — it is six bytes a run
 * cheaper than a <span>, which is ~10KB off every banner — and the one thing
 * it brings with it is the UA's font-style. Monospace has an italic face, so
 * without this line the picture leans. The colours themselves come from
 * public/css/banner-palette.css, which is generated.
 */
.art i { font-style: normal; }

/* Art prints row by row, so the rows start hidden. */
.art[data-art-pending] > div { display: none; }

/* Both fixed buttons clear the safe area (dig #2308). Both layouts that load
   this file opt into viewport-fit=cover now, so a bare `.9rem` puts these over
   the home indicator on a phone and under the cutout in landscape. */
button.skip {
    position: fixed;
    right: max(.9rem, env(safe-area-inset-right));
    bottom: max(.9rem, env(safe-area-inset-bottom));
    z-index: 30;
    font: inherit;
    font-size: .78rem;
    color: var(--muted);
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 2rem;
    padding: .45rem .9rem;
    cursor: pointer;
}
button.skip:hover { color: var(--accent); border-color: var(--accent); }

button.resume {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(.9rem, env(safe-area-inset-bottom));
    z-index: 30;
    font: inherit;
    font-size: .78rem;
    color: var(--paper);
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 2rem;
    padding: .45rem 1rem;
    cursor: pointer;
    text-shadow: none;
}