/* willchilders.com: the water cooled control room. Light mode only.
   Base styles are the mobile rig (bottom bar + thin border). html.rig-full switches to the full
   wraparound rig; site.js picks the mode (or the console's Full/Mobile switch overrides it). */

:root {
    color-scheme: light;
    --bg: #f3f4f1;
    --paper: #ffffff;
    --ink: #1c2329;
    --muted: #5b6670;
    --line: #dde2e5;
    --steel-dark: #8c98a2;
    --brass: #c9a24a;
    --brass-hi: #f1da97;
    --brass-dark: #8c6a22;
    --red: #d8342c;
    --water: #76cecc;
    --dye: #37b3b0;            /* current section accent */
    --dye-ink: #13807f;        /* readable text version of it */
    --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --console-h: 64px;
    --rig-scale: 1;
}
html[data-section="blog"]      { --dye: #D6247A; --dye-ink: #b01a62; }
html[data-section="portfolio"] { --dye: #1E9BD7; --dye-ink: #12709e; }
html[data-section="my-world"]  { --dye: #F2B705; --dye-ink: #8a6500; }
html[data-section="skiing"]        { --dye: #4FA3E0; --dye-ink: #1f6fa8; }
html[data-section="off-roading"]   { --dye: #8B5A2B; --dye-ink: #6b4420; }
html[data-section="surfing"]       { --dye: #F2733A; --dye-ink: #b84e1d; }
html[data-section="cliff-jumping"] { --dye: #D92B3A; --dye-ink: #a81f2c; }
html[data-section="gardening"]     { --dye: #3FA34D; --dye-ink: #2b7a36; }
html[data-section="computers"]     { --dye: #3F51B5; --dye-ink: #303f9f; }
html[data-section="gaming"]        { --dye: #9B3FD1; --dye-ink: #7a2aa8; }
html.rig-full { --console-h: calc(184px * var(--rig-scale)); }

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
    margin: 0;
    font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle, rgba(60, 80, 90, .07) 1px, transparent 1.5px) 0 0 / 22px 22px,
        var(--bg);
    min-height: 100vh;
    overflow-x: hidden;
}
a { color: var(--dye-ink); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 3px solid #1e9bd7; outline-offset: 3px; border-radius: 4px; }

#pipes { position: fixed; left: 0; top: 0; z-index: 20; pointer-events: none; }
/* Content scrolls under this band, never under the top pipe run and valves */
.top-band {
    position: fixed; left: 0; right: 0; top: 0; z-index: 15; height: 14px; pointer-events: none;
    background: linear-gradient(var(--bg) 60%, rgba(243, 244, 241, 0));
}
html.rig-full .top-band { height: 112px; }

/* ---- Room: masthead + content plate -------------------------------------------------------- */
.room {
    max-width: 780px;
    margin: 0 auto;
    padding: 26px 18px calc(var(--console-h) + 36px);
}
html.rig-full .room { padding: 118px 80px calc(var(--console-h) + 48px); max-width: 940px; }

.masthead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 18px; }
.brand {
    font-weight: 800; font-size: 1.45rem; letter-spacing: -.01em; color: var(--ink); text-decoration: none;
}
.brand-sub { font: 12px/1.4 var(--mono); color: var(--muted); letter-spacing: .04em; }

.plate {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 4px solid var(--dye);
    border-radius: 6px;
    padding: 28px 22px 32px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 14px 32px -22px rgba(20, 30, 40, .35);
    transition: border-color .6s ease, opacity .18s ease, transform .18s ease;
    outline: none;
}
html.rig-full .plate { padding: 40px 48px 44px; }
/* corner screws */
.plate::after {
    content: ""; position: absolute; inset: 9px; pointer-events: none;
    --s: radial-gradient(circle, #c3cbd1 2.4px, #9aa5ad 2.6px 3.2px, transparent 3.6px);
    background: var(--s) left top / 8px 8px no-repeat, var(--s) right top / 8px 8px no-repeat,
                var(--s) left bottom / 8px 8px no-repeat, var(--s) right bottom / 8px 8px no-repeat;
}
.plate.is-swapping { opacity: 0; transform: translateY(6px); }

.page-head { margin-bottom: 18px; }
.kicker {
    margin: 0 0 4px; font: 600 11px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase;
    color: var(--dye-ink);
}
h1 { font-size: 2.2rem; line-height: 1.15; margin: 0; letter-spacing: -.015em; }
h2 { font-size: 1.25rem; margin: 1.8em 0 .4em; }
.lead { font-size: 1.2rem; color: var(--muted); margin-top: 0; }

/* ---- Cards: blog index and portfolio --------------------------------------------------------- */
.highlights { display: grid; gap: 18px; margin: 8px 0 30px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.card {
    display: flex; flex-direction: column; overflow: hidden; color: var(--ink); text-decoration: none;
    background: #fff; border: 1px solid var(--line); border-radius: 8px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 18px -14px rgba(20, 30, 40, .4);
    transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
a.card:hover { transform: translateY(-2px); border-color: var(--dye); box-shadow: 0 12px 24px -14px rgba(20, 30, 40, .45); }
.card-img {
    position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
    border-bottom: 3px solid var(--dye);
    /* no image yet: a riveted plate with a pipe run in the section's dye */
    background:
        linear-gradient(transparent calc(50% - 7px), #8c98a2 calc(50% - 7px) calc(50% - 5px),
            color-mix(in srgb, var(--dye) 75%, #fff) calc(50% - 5px) calc(50% + 5px),
            #8c98a2 calc(50% + 5px) calc(50% + 7px), transparent calc(50% + 7px)),
        radial-gradient(circle, #b9c2c8 1.6px, transparent 2.2px) 8px 8px / 24px 24px,
        linear-gradient(#f4f6f7, #e4e9ec);
}
.card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-body { display: grid; gap: 4px; padding: 14px 16px 16px; }
.card-meta { font: 600 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dye-ink); }
.card-title { font-weight: 700; font-size: 1.08rem; line-height: 1.3; }
.card-text { color: var(--muted); font-size: .95rem; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-grid .card-title { font-size: 1rem; }
.card-big .card-title { font-size: 1.45rem; }
.card-big .card-text { white-space: normal; font-size: 1rem; }
@media (min-width: 640px) {
    .card-big { display: grid; grid-template-columns: 58% 1fr; }
    .card-big .card-img { aspect-ratio: auto; min-height: 210px; border-bottom: 0; border-right: 3px solid var(--dye); }
    .card-big .card-body { align-content: center; padding: 20px 22px; }
}

/* Draft preview (dev only) */
.badge {
    display: inline-block; padding: 3px 8px; border-radius: 4px; background: #fff3c4; border: 1px solid #d9b400;
    font: 700 10px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #6b5200;
}
.card-img .badge { position: absolute; top: 10px; left: 10px; }
.preview-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; padding: 10px 12px; border-radius: 6px; background: #fffbea; border: 1px dashed #d9b400; font-size: .92rem; color: #5b4a00; }

/* ---- Single post ------------------------------------------------------------------------------ */
.kicker a { color: inherit; text-decoration: none; }
.kicker a:hover { text-decoration: underline; }
.post-hero { display: block; width: 100%; height: auto; border-radius: 6px; margin: 4px 0 24px; }
/* Photos in page content: white mat, dye-colored bottom edge, mono caption */
.photo {
    margin: 22px 0; padding: 8px 8px 0; max-width: 520px; background: #fff;
    border: 1px solid var(--line); border-bottom: 3px solid var(--dye); border-radius: 8px;
    box-shadow: 0 8px 18px -14px rgba(20, 30, 40, .45);
}
.photo img { display: block; width: 100%; height: auto; border-radius: 4px; }
.photo figcaption { padding: 7px 4px 9px; font: 600 .78rem/1.4 var(--mono); color: var(--muted); }
@media (min-width: 720px) { .photo-right { float: right; width: 44%; margin: 4px 0 16px 24px; } }

.prose { overflow-wrap: break-word; }
.prose img { max-width: 100%; height: auto; border-radius: 6px; }
.prose h2, .prose h3 { line-height: 1.25; }
.prose blockquote { margin: 1.2em 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--dye); color: var(--muted); }
.prose code { font: .9em var(--mono); background: #f1f4f6; padding: 1px 5px; border-radius: 4px; }
.prose pre { background: #f1f4f6; border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; height: 6px; margin: 2em 0; background: radial-gradient(circle, #b9c2c8 2px, transparent 2.6px) center / 18px 6px repeat-x; }
.prose table { border-collapse: collapse; }
.prose th, .prose td { border: 1px solid var(--line); padding: 6px 10px; }
.post-back { margin-top: 2.2em; font: 600 13px/1.4 var(--mono); letter-spacing: .06em; }

/* ---- Contact form ---------------------------------------------------------------------------- */
.contact-form { display: grid; gap: 14px; max-width: 520px; }
.contact-form label { display: grid; gap: 4px; font: 600 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.contact-form input, .contact-form textarea {
    font: 16px/1.5 system-ui, sans-serif; color: var(--ink); padding: 10px 12px;
    border: 1px solid #c5cdd3; border-radius: 6px; background: #fcfdfd;
}
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--dye); border-color: transparent; }
.btn {
    justify-self: start; font: 700 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
    padding: 13px 22px; border-radius: 7px; cursor: pointer; color: var(--ink);
    background: linear-gradient(#fff, #e3e8eb); border: 1px solid #a7b1b9;
    box-shadow: 0 3px 0 #97a3ac, 0 6px 10px -5px rgba(0, 0, 0, .3);
}
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 #97a3ac; }
.form-note { margin: 0; padding: 12px 14px; border-radius: 6px; background: #eef8f8; border: 1px solid #bfe3e2; }

/* ---- Console: shared (base = mobile bottom bar) ----------------------------------------------- */
.console {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    height: calc(var(--console-h) + env(safe-area-inset-bottom));
    background: linear-gradient(#f6f8f9, #e2e7ea);
    border-top: 2px solid var(--brass);
    box-shadow: 0 -1px 0 var(--brass-dark), 0 -10px 26px -14px rgba(20, 30, 40, .35);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), height .5s ease;
}
.console.is-hidden { transform: translateY(calc(100% + 8px)); }
.console-plate { display: flex; align-items: center; gap: 8px; height: 64px; padding: 0 12px; transform: translateX(var(--slide, 0px)); }
.center, .desk { display: contents; }
.desk-right { display: flex; align-items: center; gap: 8px; }
.mod { position: relative; flex: none; }
.port { position: absolute; width: 2px; height: 2px; pointer-events: none; }
.tag { display: none; }

/* RESET: the Home control */
.reset-ring { display: block; border-radius: 50%; }
.reset-btn {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    background: radial-gradient(circle at 36% 30%, #ff9a8a, var(--red) 46%, #9e1c16);
    box-shadow: 0 0 0 3px var(--brass), 0 0 0 4px var(--brass-dark), 0 3px 0 4px rgba(0, 0, 0, .15);
    color: #fff; text-decoration: none; font: 800 8px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35); transition: transform .12s ease, box-shadow .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.reset-btn:hover { box-shadow: 0 0 0 3px var(--brass), 0 0 0 4px var(--brass-dark), 0 0 18px 6px rgba(216, 52, 44, .45); }
.reset-btn.pressed { transform: translateY(2px) scale(.94); }

/* Section keys: the strongest controls on the console */
.mod-nav { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; max-width: 540px; margin: 0 auto; }
.nav-btn {
    flex: 1 1 0; min-width: 0; height: 44px; position: relative;
    display: grid; place-items: center; padding: 8px 2px 4px;
    border-radius: 7px; text-decoration: none; color: var(--ink);
    background: linear-gradient(#ffffff, #e6eaed); border: 1px solid #a7b1b9;
    box-shadow: inset 0 1px 0 #fff, 0 3px 0 #97a3ac, 0 6px 10px -5px rgba(0, 0, 0, .3);
    font: 700 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
    transition: transform .1s ease, box-shadow .1s ease, border-color .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.nav-label { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.lamp {
    position: absolute; top: 6px; left: 50%; width: 46%; height: 4px; transform: translateX(-50%);
    border-radius: 3px; background: #cdd4d9; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .2);
    transition: background .2s ease, box-shadow .2s ease;
}
.nav-btn:hover { border-color: var(--dye); }
.nav-btn:hover .lamp { background: color-mix(in srgb, var(--dye) 55%, #cdd4d9); }
.nav-btn.is-current .lamp { background: var(--dye); box-shadow: 0 0 8px 1px var(--dye); }
.nav-btn.is-current { border-color: color-mix(in srgb, var(--dye) 60%, #a7b1b9); }
.nav-btn.pressed { transform: translateY(3px); box-shadow: inset 0 1px 0 #fff, 0 0 0 #97a3ac; }

/* Flip switches: Full / Mobile rig and Audio */
.rig-switch, .audio-switch {
    display: grid; justify-items: center; gap: 2px; padding: 0; border: 0; background: none; cursor: pointer;
    font: 700 7px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #6b767f;
    -webkit-tap-highlight-color: transparent;
}
.sw-body {
    position: relative; width: 18px; height: 24px; border-radius: 4px;
    background: linear-gradient(#d9dfe3, #b9c3ca); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35), 0 0 0 1px #8c98a2;
}
.sw-lever {
    position: absolute; left: 50%; top: 50%; width: 6px; height: 13px; margin-left: -3px; border-radius: 3px;
    background: linear-gradient(90deg, #f5f7f8, #aab4bb); box-shadow: 0 0 0 1px #7d8891;
    transform: translateY(0);   /* lever down */
    transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
[role="switch"][aria-checked="true"] .sw-lever { transform: translateY(-100%); }   /* lever up */
.rig-switch[aria-checked="true"] .sw-up, .rig-switch[aria-checked="false"] .sw-down,
.audio-switch[aria-checked="true"] .sw-up { color: var(--ink); }
.audio-switch[aria-checked="true"] .sw-up { color: #2e9e57; }
.audio-switch { display: none; }

/* Contact speaker */
.mod-speaker { display: grid; justify-items: center; }
.speaker {
    position: relative; display: block; width: 40px; height: 40px; border-radius: 50%;
    box-shadow: 0 0 0 3px var(--brass), 0 0 0 4px var(--brass-dark), inset 0 2px 6px rgba(0, 0, 0, .25);
    background: radial-gradient(circle at 40% 35%, #f5f7f8, #c9d1d6);
    -webkit-tap-highlight-color: transparent; transition: box-shadow .2s ease;
}
.grille { position: absolute; inset: 5px; border-radius: 50%; background: radial-gradient(circle, #5b656d 1.2px, transparent 1.7px) 0 0 / 5px 5px; }
.speaker:hover { box-shadow: 0 0 0 3px var(--brass), 0 0 0 4px var(--brass-dark), 0 0 16px 5px rgba(55, 179, 176, .45); }
.speaker.is-current, .speaker.active { box-shadow: 0 0 0 3px var(--brass), 0 0 0 4px var(--brass-dark), 0 0 14px 4px rgba(55, 179, 176, .6); }
.speaker.active .grille { animation: grille .32s ease-in-out 4; }
.ripple { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #37b3b0; opacity: 0; pointer-events: none; }
.speaker.active .ripple { animation: ripple 1s ease-out 2; }
.speaker.active .r2 { animation-delay: .35s; }
@keyframes grille { 50% { transform: scale(1.07); } }
@keyframes ripple { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }

/* Mobile bar hides the tanks, reservoirs, instrument bank and set dressing */
.tank-svg, .mod-res, .bank, .hazard, .mod-dump, .trough { display: none; }

/* ---- Console: full rig, two-tier control desk ------------------------------------------------- */
/* Columns: supply tank | dye reservoirs | instrument bank over the key desk | dump tank.
   The bottom trough carries the key wiring to the reservoirs (drawn on the canvas). */
html.rig-full .console { overflow: hidden; }
html.rig-full .console-plate {
    position: absolute; left: 0; bottom: 0; transform-origin: 0 100%;
    transform: translateX(var(--slide, 0px)) scale(var(--rig-scale)); width: calc(100% / var(--rig-scale)); height: 184px;
    display: grid; grid-template-columns: 96px auto minmax(0, 1fr) 100px; column-gap: 16px; align-items: end;
    padding: 8px var(--gutter, 40px) 14px;
    background:
        radial-gradient(circle, #aeb7be 1.6px, #8f9aa3 1.9px, transparent 2.4px) 14px 7px / 30px 10px repeat-x;
}
html.rig-full .tag {
    display: block; justify-self: center; width: max-content; margin: 4px auto 0; padding: 2px 7px 1px;
    font: 700 8px/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #5a4512;
    background: linear-gradient(#f1da97, #c9a24a 60%, #a8842e); border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 1px #8c6a22, 0 1px 1px rgba(0, 0, 0, .25);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}

/* Supply tank with a hazard-ringed RESET */
html.rig-full .mod-tank { width: 96px; }
html.rig-full .tank-svg { display: block; width: 96px; height: 92px; }
html.rig-full .tank-port { left: 13px; top: 44px; }    /* left glass wall, below the waterline */
html.rig-full .reset-ring {
    position: absolute; left: 50%; top: 44px; width: 58px; height: 58px; margin-left: -29px; padding: 6px;
    background: repeating-conic-gradient(#f2c200 0 15deg, #2b3238 15deg 30deg);
    box-shadow: 0 0 0 1px #2b3238, 0 2px 4px rgba(0, 0, 0, .3);
}
html.rig-full .reset-btn { width: 46px; height: 46px; font-size: 9px; box-shadow: 0 0 0 2px var(--brass-dark), 0 3px 0 2px rgba(0, 0, 0, .2); }
html.rig-full .reset-btn:hover { box-shadow: 0 0 0 2px var(--brass-dark), 0 0 18px 6px rgba(216, 52, 44, .5); }

/* Dye reservoirs: valves sit on the feed lines just above the caps (canvas) */
html.rig-full .mod-res { display: block; }
html.rig-full .res-set { display: flex; gap: 8px; justify-content: center; align-items: flex-end; }
.reservoir { position: relative; width: 22px; display: grid; justify-items: center; }
.res-cap { position: relative; display: grid; place-items: center; width: 26px; height: 9px; border-radius: 2px; background: linear-gradient(#f1da97, #c9a24a 55%, #97731f); }
.res-port { left: 12px; top: 0; }
.res-ink { font: 800 7px/1 var(--mono); color: #5a4512; }
.res-glass {
    position: relative; display: block; width: 22px; height: 58px; overflow: hidden;
    border: 2px solid #8fa2ad; border-top: 0; border-radius: 0 0 6px 6px; background: #f6fbfc;
    transition: box-shadow .25s ease;
}
.res-fill {
    position: absolute; left: 0; right: 0; bottom: 0; height: var(--level, 86%);
    background: linear-gradient(90deg, color-mix(in srgb, var(--dye) 80%, #fff), var(--dye) 60%);
    transition: height 4s ease;
}
.res-glass::after { content: ""; position: absolute; left: 3px; top: 3px; bottom: 3px; width: 4px; border-radius: 2px; background: rgba(255, 255, 255, .55); }
.reservoir.firing .res-fill { transition: height .3s ease-in; }
.reservoir.firing .res-glass { box-shadow: 0 0 0 2px #ffcf33, 0 0 16px 3px #ffcf33; }

/* Center column: instrument bank, hazard stripe, key desk */
html.rig-full .center { display: grid; grid-template-rows: 62px 6px 1fr; row-gap: 6px; align-self: stretch; min-width: 0; }
html.rig-full .bank {
    display: flex; align-items: center; gap: 12px; min-width: 0; padding: 4px 12px;
    background: linear-gradient(#dfe5e9, #eef1f3);
    border-radius: 6px; box-shadow: inset 0 2px 4px rgba(20, 30, 40, .25), inset 0 0 0 1px #b9c3ca;
}
html.rig-full .hazard {
    display: block; border-radius: 2px;
    background: repeating-linear-gradient(-45deg, #f2c200 0 9px, #2b3238 9px 18px);
    box-shadow: 0 0 0 1px #2b3238;
}
html.rig-full .desk {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; min-width: 0;
    padding: 6px 4px 0;
    background: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 60%);
    border-radius: 6px 6px 0 0;
}
html.rig-full .desk-right { gap: 14px; align-items: flex-end; }

.gauges { display: flex; gap: 4px; flex: none; }
.gauge { width: 46px; height: 46px; }
.gauge .needle { transform-box: view-box; transform-origin: 25px 25px; transform: rotate(252deg); }   /* set live by site.js */
@keyframes surge { 0% { transform: rotate(-40deg); } 30% { transform: rotate(70deg); } 55% { transform: rotate(35deg); } 100% { transform: rotate(-40deg); } }

/* Status display: a pale green LCD */
.lcd {
    flex: 1 1 auto; min-width: 0; max-width: 380px; height: 50px; position: relative;
    display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr 1fr; column-gap: 10px;
    align-items: center; padding: 4px 10px;
    font: 700 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #23331d;
    background: linear-gradient(#cfe0bd, #bed3a8); border-radius: 4px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .35), 0 0 0 3px #59636b, 0 0 0 4px #2b3238;
    text-shadow: 0 0 1px rgba(35, 51, 29, .35);
}
.lcd::after {   /* faint scanlines */
    content: ""; position: absolute; inset: 0; border-radius: 4px; pointer-events: none;
    background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, .05) 2px 3px);
}
.lcd-line1, .lcd-line2 { grid-column: 1; overflow: hidden; white-space: nowrap; text-overflow: clip; }
.lcd-line2 { font-weight: 600; opacity: .85; }
.lcd-line2::after { content: "_"; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.lcd-read { grid-column: 2; grid-row: 1 / 3; display: grid; gap: 6px; text-align: right; font-size: 9px; letter-spacing: .03em; }

/* Annunciator: labeled tiles that light with the machine's state */
.annunciator { display: grid; grid-template-columns: repeat(3, 46px); gap: 4px; flex: none; }
.ann {
    display: grid; place-items: center; height: 20px; border-radius: 3px;
    font: 700 8px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #8a959e;
    background: linear-gradient(#f4f6f7, #dfe4e8); box-shadow: inset 0 0 0 1px #aab4bb, inset 0 1px 2px rgba(0, 0, 0, .15);
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.ann[data-state="on"] { color: #fff; background: var(--on, #3cc46a); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 0 8px var(--on, #3cc46a); text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.ann[data-state="warn"] { color: #3d2e00; background: #f2b705; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 0 8px #f2b705; }
.ann[data-state="alarm"] { color: #fff; background: #d8342c; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 0 10px #d8342c; animation: alarm .5s steps(1) infinite; }
@keyframes alarm { 50% { background: #7a1d18; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); } }

.flowmeter { width: 46px; height: 46px; flex: none; }
.impeller { transform-box: view-box; transform-origin: 22px 22px; animation: spin 1.1s linear infinite; }
.console.stalled .impeller { animation-play-state: paused; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Key desk */
html.rig-full .mod-nav { flex: 0 1 auto; gap: 12px; max-width: none; margin: 0; }
html.rig-full .nav-btn {
    flex: none; width: clamp(110px, 9vw, 140px); height: 64px; font-size: 13px; letter-spacing: .12em; padding-top: 12px;
    border-radius: 9px; box-shadow: inset 0 1px 0 #fff, 0 4px 0 #97a3ac, 0 8px 12px -6px rgba(0, 0, 0, .3);
}
html.rig-full .lamp { top: 9px; height: 5px; }
html.rig-full .nav-btn.pressed { transform: translateY(4px); }
html.rig-full .audio-switch { display: grid; }
html.rig-full .rig-switch, html.rig-full .audio-switch { font-size: 8px; gap: 3px; }
html.rig-full .sw-body { width: 22px; height: 30px; }
html.rig-full .sw-lever { width: 8px; height: 16px; margin-left: -4px; }
html.rig-full .speaker { width: 60px; height: 60px; }
html.rig-full .grille { inset: 7px; background-size: 6px 6px; }

/* Dump tank */
html.rig-full .mod-dump { display: block; width: 100px; }
html.rig-full .dump-svg { display: block; width: 100px; height: 92px; }
html.rig-full .dump-port { right: 9px; top: 25px; }    /* right glass wall, above the liquid */

/* Cable trough along the bottom */
html.rig-full .trough {
    display: block; position: absolute; left: var(--gutter, 40px); right: var(--gutter, 40px); bottom: 2px; height: 12px;
    border-radius: 3px; background: linear-gradient(#c6ced4, #d9dfe3);
    box-shadow: inset 0 2px 3px rgba(20, 30, 40, .3);
}

/* Full rig squeezed onto a small screen (demo) */
html.rig-scaled .room { padding: 76px 36px calc(var(--console-h) + 32px); }
html.rig-scaled .plate { padding: 26px 20px 30px; }

/* Shared wave animation for the tanks */
.wave-run { animation: wave 1.6s linear infinite; }
.wave-run.slow { animation-duration: 3.2s; }
@keyframes wave { to { transform: translateX(24px); } }
.bubbles circle { animation: bubble 3s linear infinite; }
.bubbles circle:nth-child(2) { animation-delay: 1.1s; animation-duration: 2.4s; }
.bubbles circle:nth-child(3) { animation-delay: 2s; }
@keyframes bubble { from { transform: translateY(0); opacity: .8; } to { transform: translateY(-38px); opacity: 0; } }

/* ---- Power-up reveal (flip the switch to Full) ----------------------------------------------- */
html.rig-powering .pw { animation: mod-in .5s cubic-bezier(.2, .8, .3, 1.2) both; animation-delay: calc(.15s + var(--i, 0) * .15s); }
html.rig-powering .gauge .needle { animation: surge 1.4s ease-out 1.1s both; }
html.rig-powering .ann { animation: alarm .18s steps(1) 6; }
@keyframes mod-in { from { opacity: 0; transform: translateY(24px) scale(.92); } to { opacity: 1; transform: none; } }
html.rig-powerdown .pw { transition: opacity .3s ease, transform .3s ease; opacity: 0; transform: translateY(16px); }
html.rig-powerdown .room { transition: opacity .3s ease; opacity: .4; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- Phase 3: rooms ---------------------------------------------------------------------------- */
/* The console carries every room's reservoirs and keys; only the current room's set shows */
html[data-room="main"] .room-set[data-set="world"], html[data-room="world"] .room-set[data-set="main"] { display: none !important; }
.lbl-short { display: none; }
html.rig-mobile .lbl-long { display: none; }
html.rig-mobile .lbl-short { display: inline; }
html.rig-mobile[data-room="world"] .mod-nav { gap: 4px; }
html.rig-mobile[data-room="world"] .nav-btn { font-size: 8px; letter-spacing: 0; padding-inline: 1px; }
html.rig-full[data-room="world"] .nav-btn {
    width: 84px; font-size: 11px; letter-spacing: .06em; white-space: normal; line-height: 1.15; text-align: center; padding: 14px 6px 4px;
}
html.rig-full[data-room="world"] .mod-nav { gap: 8px; }
/* The room's top run dips in the middle, so the band and the room start lower */


/* Hatch: a riveted brass door on the left riser with a sign plate */
.hatch {
    position: fixed; z-index: 25; top: 42vh; left: calc(var(--pipe-m, 28px) - 26px);
    display: none; align-items: center; gap: 5px; text-decoration: none; color: #4a3a10;
    -webkit-tap-highlight-color: transparent; perspective: 220px;
}
html.js[data-room="main"][data-section="my-world"] .hatch-enter, html.js[data-room="world"] .hatch-exit { display: flex; }
html.sliding .hatch { visibility: hidden; }
.hatch-door {
    position: relative; display: block; width: 52px; height: 86px; border-radius: 9px; transform-origin: 0 50%;
    background:
        radial-gradient(circle, #8c6a22 1.6px, transparent 2.2px) 5px 5px / 42px 76px no-repeat,
        radial-gradient(circle, #8c6a22 1.6px, transparent 2.2px) 5px 76px / 42px 6px repeat-x,
        linear-gradient(90deg, #a8842e, #f1da97 40%, #c9a24a 70%, #8c6a22);
    box-shadow: 0 0 0 1.5px #6e5218, inset 0 0 0 3px rgba(255, 240, 190, .35), 0 3px 8px rgba(0, 0, 0, .3);
    transition: transform .3s ease, box-shadow .2s ease;
}
.porthole {
    position: absolute; left: 50%; top: 13px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffffff, var(--water) 55%, #3f9e9c);
    box-shadow: 0 0 0 2.5px #8c6a22, 0 0 0 4px #f1da97, inset 0 1px 3px rgba(0, 0, 0, .3);
}
.hatch-wheel {
    position: absolute; left: 50%; bottom: 12px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%;
    border: 2.5px solid #c4362e; box-sizing: border-box;
    background: linear-gradient(#c4362e, #c4362e) center / 2px 100% no-repeat, linear-gradient(#c4362e, #c4362e) center / 100% 2px no-repeat;
    transition: transform .4s ease;
}
.hatch-sign {
    padding: 6px 10px 5px; border-radius: 4px; white-space: nowrap;
    font: 800 13px/1.35 var(--mono); letter-spacing: .14em; text-transform: uppercase;
    background: linear-gradient(#f1da97, #c9a24a 60%, #a8842e); color: #4a3a10;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 1px #8c6a22, 0 2px 4px rgba(0, 0, 0, .25);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}
.hatch:hover .hatch-door, .hatch:focus-visible .hatch-door { transform: rotateY(-22deg); box-shadow: 0 0 0 1.5px #6e5218, 0 0 16px 4px rgba(242, 183, 5, .55); }
.hatch:hover .hatch-wheel { transform: rotate(90deg); }
.hatch.opening .hatch-door { transform: rotateY(-78deg); }
.hatch.opening .hatch-wheel { transform: rotate(360deg); }
/* Mobile: a small door tab on the screen edge */
html.rig-mobile .hatch { left: 0; top: 46vh; }
html.rig-mobile .hatch-door { width: 22px; height: 42px; border-radius: 0 6px 6px 0; }
html.rig-mobile .hatch .porthole { width: 11px; height: 11px; margin-left: -5.5px; top: 7px; }
html.rig-mobile .hatch .hatch-wheel { width: 10px; height: 10px; margin-left: -5px; bottom: 6px; }
html.rig-mobile .hatch-sign { display: none; }   /* phones: the door tab alone (it has an aria-label) */
html.rig-mobile .room { padding-left: 30px; }
/* While a hatch shows, keep the content clear of its sign on narrow screens (wide ones have room) */
html.rig-full[data-room="main"][data-section="my-world"] .room, html.rig-full[data-room="world"] .room {
    padding-left: max(80px, calc(196px - (100vw - 940px) / 2));
}

/* Room plate: a big brass "enter the room" sign in the page content, same metal as the hatch */
.room-plate {
    display: flex; align-items: center; gap: 18px; margin: 28px 0 8px; padding: 14px 22px 14px 16px;
    max-width: 560px; clear: both; border-radius: 10px; text-decoration: none; color: #4a3a10; perspective: 260px;
    background:
        radial-gradient(circle, #8c6a22 1.8px, transparent 2.4px) left 4px top 4px / 8px 8px no-repeat,
        radial-gradient(circle, #8c6a22 1.8px, transparent 2.4px) right 4px top 4px / 8px 8px no-repeat,
        radial-gradient(circle, #8c6a22 1.8px, transparent 2.4px) left 4px bottom 4px / 8px 8px no-repeat,
        radial-gradient(circle, #8c6a22 1.8px, transparent 2.4px) right 4px bottom 4px / 8px 8px no-repeat,
        linear-gradient(#f6e4a8, #d9b75e 45%, #c9a24a 70%, #a8842e);
    box-shadow: 0 0 0 2px #6e5218, inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 4px rgba(255, 240, 190, .3), 0 4px 10px rgba(0, 0, 0, .25);
    transition: transform .15s ease, box-shadow .2s ease;
    animation: plate-glow 2.8s ease-in-out infinite;
}
.room-plate-door {
    position: relative; flex: none; width: 44px; height: 72px; border-radius: 8px; transform-origin: 0 50%;
    background: linear-gradient(90deg, #a8842e, #f1da97 40%, #c9a24a 70%, #8c6a22);
    box-shadow: 0 0 0 1.5px #6e5218, inset 0 0 0 3px rgba(255, 240, 190, .35), 0 2px 5px rgba(0, 0, 0, .3);
    transition: transform .3s ease;
}
.room-plate-door .porthole { top: 10px; width: 22px; height: 22px; margin-left: -11px; }
.room-plate-door .hatch-wheel { bottom: 10px; width: 18px; height: 18px; margin-left: -9px; }
.room-plate-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.room-plate-title {
    font: 800 clamp(1.15rem, 3.6vw, 1.55rem)/1.15 var(--mono); letter-spacing: .1em; text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}
.room-plate-sub { font: 600 .82rem/1.35 var(--mono); letter-spacing: .04em; color: #6b5418; }
.room-plate:hover, .room-plate:focus-visible {
    transform: translateY(-2px); animation: none;
    box-shadow: 0 0 0 2px #6e5218, inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 22px 6px rgba(242, 183, 5, .6), 0 6px 14px rgba(0, 0, 0, .25);
}
.room-plate:hover .room-plate-door, .room-plate:focus-visible .room-plate-door { transform: rotateY(-28deg); }
.room-plate:hover .hatch-wheel, .room-plate:focus-visible .hatch-wheel { transform: rotate(180deg); }
.room-plate:active { transform: translateY(1px); }
.room-plate-back { animation: none; max-width: 420px; padding-block: 10px; }
.room-plate-back .room-plate-door { width: 34px; height: 54px; }
.room-plate-back .porthole { top: 7px; width: 16px; height: 16px; margin-left: -8px; }
.room-plate-back .hatch-wheel { bottom: 7px; width: 14px; height: 14px; margin-left: -7px; }
.room-plate-back .room-plate-title { font-size: 1.05rem; }
@keyframes plate-glow {
    0%, 100% { box-shadow: 0 0 0 2px #6e5218, inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 4px rgba(255, 240, 190, .3), 0 4px 10px rgba(0, 0, 0, .25); }
    50%      { box-shadow: 0 0 0 2px #6e5218, inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 4px rgba(255, 240, 190, .3), 0 0 18px 4px rgba(242, 183, 5, .45), 0 4px 10px rgba(0, 0, 0, .25); }
}
@media (prefers-reduced-motion: reduce) { .room-plate { animation: none; } }

/* Nameplate: the page you're on, engraved on a riveted steel plate hanging from the top pipe */
.nameplate { display: none; }
html.rig-full .nameplate {
    display: block; position: fixed; z-index: 21; left: 50%; top: var(--plate-top, 28px); transform: translate(-50%, -50%);
    max-width: min(calc(34vw - 80px), 420px); padding: 9px 26px 8px; border-radius: 4px; pointer-events: none;   /* sits in the dip's notch */
    background:
        radial-gradient(circle, #5b656d 2px, #aeb7be 2.3px 3px, transparent 3.4px) 6px 50% / 10px 10px no-repeat,
        radial-gradient(circle, #5b656d 2px, #aeb7be 2.3px 3px, transparent 3.4px) calc(100% - 6px) 50% / 10px 10px no-repeat,
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 1px, transparent 1px 3px),
        linear-gradient(#eef1f3, #c3ccd2 55%, #a9b4bb);
    box-shadow: 0 0 0 1px #5b656d, 0 0 0 3px #c3ccd2, 0 0 0 4px #6b767f, inset 0 1px 0 rgba(255, 255, 255, .8), 0 4px 8px rgba(20, 30, 40, .3);
    transition: opacity .3s ease;
}
.nameplate-text {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 800 15px/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #2b3238;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 -1px 0 rgba(0, 0, 0, .15);
}
html.sliding .nameplate { opacity: 0; }