/* pyroclastic.cloud parked tile. Load after fonts/fonts.css and tokens.css.
   The page CSS from the parked.html design, with the wrap widened to 1040px
   and the paragraph cap removed to match the other pyroclastic.cloud pages,
   header nav styling added, and the dark-mode accent fix. */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; }
a { color: var(--color-link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 4.2vw, 2.6rem); line-height: var(--lh-tight); letter-spacing: -0.02em; margin: 0 0 var(--space-3); }
p { margin: 0 0 var(--space-3); }
.lead { font-size: var(--fs-md); color: var(--color-text-2); }
.mono { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-text-muted); }
.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 var(--space-5); }
main.wrap { flex: 1; }

.mark { display: inline-block; vertical-align: middle; color: var(--color-text-2); --mark-ring: currentColor; --mark-vent: var(--volcano-accent); }
[data-volcano="vesuvius"] { --volcano-accent: var(--sky-primary); --volcano-accent-dark: var(--sky-primary-dark); }
/* tokens.css swaps --volcano-accent on :root, but body[data-volcano] sets it
   again on itself. Same rules as brand/examples/components.css. */
[data-theme="dark"] [data-volcano]:not([data-theme="light"], [data-theme="light"] *),
[data-theme="dark"][data-volcano] { --volcano-accent: var(--volcano-accent-dark); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-volcano]:not([data-theme="light"], [data-theme="light"] *) { --volcano-accent: var(--volcano-accent-dark); }
}

header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; }
.lockup { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--color-text); font-family: var(--font-display); font-weight: 500; font-size: var(--fs-md); }
.lockup .mark { width: 30px; height: 30px; } .lockup .tld { color: var(--color-text-2); } .lockup .sep { color: var(--color-text-muted); }
header nav a { font-size: var(--fs-sm); color: var(--color-text-2); text-decoration: none; }
header nav a:hover { color: var(--color-text); }

.hero { padding: var(--space-7) 0 var(--space-5); }
.handle { font-family: var(--font-mono); overflow-wrap: anywhere; }
.handle .at { color: var(--volcano-accent); }

.game { position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-1); overflow: hidden; margin: var(--space-4) 0 var(--space-3); touch-action: none; user-select: none; }
.game canvas { display: block; width: 100%; height: 340px; }
.game .hud { position: absolute; top: var(--space-3); right: var(--space-4); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-text-muted); display: flex; gap: var(--space-4); pointer-events: none; }
.game .hud b { color: var(--color-text-2); font-weight: 500; }
.hint { font-size: var(--fs-sm); color: var(--color-text-muted); }

footer { padding: var(--space-6) 0 var(--space-7); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--fs-sm); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); justify-content: space-between; }
footer nav { display: flex; gap: var(--space-4); }
footer nav a { color: var(--color-text-2); text-decoration: none; } footer nav a:hover { color: var(--color-text); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }