/* Chronicz Arcade brand shell.
 * Bound to the house lock in assets/EIGHTS_BANNER_BRAND.md for CHROME ONLY —
 * header, borders, cards, buttons, the page frame. Purple-dominant, gold
 * accent, no other hues there, no extra gradients beyond the locked radial
 * glow. Do not touch --purple-*/--gold*/--ink above for chrome surfaces.
 *
 * The PLAYFIELD is a separate rule (2026-08-03, owner-directed): a strict
 * two-colour lock is right for a banner, where the brand IS the subject —
 * applied to a whole game screen it turns the brand into wallpaper, and
 * once every object is gold, gold stops meaning anything. Inside the canvas:
 *   - background drops to --field-bg, a near-black WITH a purple cast, so
 *     the field recedes and the objects sit forward (the biggest part of
 *     the fix);
 *   - most gameplay objects (invaders, buds, bunkers) render in a warm
 *     off-white, the --field-object family, NOT gold;
 *   - gold is reserved for the player and their rewards ONLY — the ship,
 *     player shots, bonus pickups, score popups. That reservation is what
 *     makes gold mean "this is mine" instead of decorating everything;
 *   - a small functional set earns its place beside the brand: --threat /
 *     --threat-bright for enemy fire + hostile craft, --damage for hit/
 *     life-loss feedback. Muted, desaturated, kept to two hues total —
 *     do not add a third "just because".
 * These playfield hex values are mirrored as literals in arcade.js /
 * invaders.js / drift.js (canvas can't read CSS custom properties without
 * extra JS plumbing that isn't earning its keep here) — keep both in sync
 * if you change one.
 * DO NOT "restore" a two-colour lock inside the playfield — that flatness
 * was the bug this rule replaced. See rufflebot/CLAUDE.md, 2026-08-03.
 */
:root {
    --purple-deep: #1a0e26;
    --purple-glow: #4a3168;
    --purple-edge: #0d0716;
    --gold:        #d9b443;
    --gold-muted:  #c8a860;
    --ink:         #f4e7c5;

    /* Playfield-only, see comment above. */
    --field-bg:      #0c0710; /* near-black, purple cast */
    --field-object:  #e6dcc3; /* warm off-white — most gameplay objects */
    --gold-bright:   #f0d989; /* reward sparkle, gold family */
    --threat:        #96475d; /* enemy fire + hostile craft */
    --threat-bright: #a85e75; /* leading / about-to-fire enemy emphasis */
    --damage:        #c0453f; /* hit / life-loss feedback */
}
html, body {
    background: radial-gradient(ellipse at 20% 85%, var(--purple-glow) 0%, var(--purple-deep) 55%, var(--purple-edge) 100%);
    color: var(--ink);
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Noto Serif Display', Georgia, 'Times New Roman', serif;
    /* The webview must never steal a gameplay drag as a page scroll/rubber-band. */
    overscroll-behavior: none;
    touch-action: none;
}
body { min-height: 100vh; display: flex; flex-direction: column; }

.chronicz-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 14px 18px;
    margin: 0;
    background: var(--purple-edge);
    border-bottom: 2px solid var(--gold);
    color: var(--gold);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 4px;
    text-transform: uppercase;
}
.chronicz-header__sub {
    color: var(--gold-muted);
    font-size: 12px;
    letter-spacing: 1.5px;
    font-weight: 400;
    text-transform: none;
    opacity: .85;
}
@media (max-width: 540px) {
    .chronicz-header { font-size: 19px; letter-spacing: 2px; padding: 10px 12px; }
    .chronicz-header__sub { font-size: 10px; }
}

/* Stage centers the letterboxed playfield or a gate/game-over card. */
/* Mr Chronicz in the arcade — the house character art, sitting behind the
   letterbox bars that a fixed 360x640 playfield leaves on a tall phone. Fixed
   attachment + heavy dim so it stays a backdrop and never competes with the
   game; the gradient above still carries the palette if the image 404s. */
body {
    background-image:
        linear-gradient(rgba(26, 14, 38, .82), rgba(26, 14, 38, .94)),
        url("img/arcade-hero.jpg");
    background-size: cover;
    background-position: center 30%;
    /* was fixed — expensive on mobile Chromium, ignored on iOS, and a
       visual no-op anyway since the page never scrolls (G1). */
    background-attachment: scroll;
}

/* G2: the header (~66px) + footer (~27px) drop a 375x667 phone's playfield
   to 323px wide. Hide the header while playing; keep the footer's
   compliance line visible at all times. */
body.playing .chronicz-header {
    display: none;
}

.chronicz-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.chronicz-playfield-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
/* Static border/shadow only — no transition/animation/filter here, this
 * element sits on screen for the whole play session and must never repaint
 * for a reason other than the game's own canvas drawing. */
#playfield {
    display: block;
    background: var(--field-bg);
    border: 1px solid var(--gold-muted);
    box-shadow: 0 0 24px rgba(217, 180, 67, .12);
    touch-action: none;
}

/* Gate + game-over cards — DOM is fine here, this is never on screen during play. */
.chronicz-card {
    background: rgba(26, 14, 38, .92);
    border: 1px solid var(--gold-muted);
    border-radius: 10px;
    padding: 28px 22px;
    text-align: center;
    max-width: 320px;
    margin: 16px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .5);
}
.chronicz-card h2 {
    color: var(--gold);
    font-weight: 700;
    margin: 0 0 10px;
    letter-spacing: 1px;
}
.chronicz-card p {
    color: var(--ink);
    opacity: .85;
    line-height: 1.5;
    margin: 0 0 14px;
    font-size: 14px;
}
.chronicz-score { color: var(--gold-muted); font-size: 20px; font-weight: 700; }
.chronicz-submit-line { font-size: 12px; opacity: .75; min-height: 16px; }
.chronicz-btn {
    background: var(--gold);
    color: var(--purple-deep);
    border: none;
    border-radius: 6px;
    padding: 10px 22px;
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .5px;
    cursor: pointer;
}
.chronicz-btn:active { background: var(--gold-muted); }

.chronicz-footer {
    text-align: center;
    color: var(--gold-muted);
    font-size: 11px;
    padding: 8px;
    opacity: .7;
}