/* MotionC Engine Room overlay */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: #090b0d;
}

body {
    overflow-x: hidden;
    font-family: Arial, sans-serif;
}

.engine-room-stage {
    position: relative;
    width: min(100vw, calc(100vh * 1.7768), 1672px);
    margin: 0 auto;
    line-height: 1;
}

.engine-room-image {
    display: block;
    width: 100%;
    height: auto;
    clip-path: inset(0 0 0 9.15%);
    user-select: none;
}

.engine-display,
.change-display,
.impact-display,
.weight-test-display,
.waist-test-display {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b9f278;
    font-weight: 700;
    text-shadow:
        0 0 4px rgba(143, 255, 78, 0.9),
        0 0 10px rgba(91, 216, 38, 0.65);
    pointer-events: none;
}

.engine-display {
    top: 24.4%;
    height: 6.9%;
    font-size: clamp(12px, 1.75vw, 29px);
}

.engine-display-mcp {
    left: 15.55%;
    width: 10.85%;
}

.engine-display-journey {
    left: 37.15%;
    width: 11.45%;
}

.engine-display-bmi {
    left: 59.55%;
    width: 10.95%;
}

.weight-slider-area,
.waist-slider-area,
.combined-slider-area {
    position: absolute;
    left: 26.85%;
    width: 36.7%;
    height: 8.8%;
    z-index: 10;
}

.combined-slider-area {
    top: 37.75%;
}

.weight-slider-area {
    top: 50.7%;
}

.waist-slider-area {
    top: 63.6%;
}

.weight-slider-input,
.waist-slider-input,
.combined-slider-input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: grab;
}

.weight-slider-input:active,
.waist-slider-input:active,
.combined-slider-input:active {
    cursor: grabbing;
}

.weight-slider-handle,
.waist-slider-handle,
.combined-slider-handle {
    position: absolute;
    top: 50%;
    width: clamp(30px, 3.65vw, 61px);
    aspect-ratio: 1;
    border: clamp(1px, 0.12vw, 2px) solid #252a2e;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, #f5f5f2 0, #bec1c1 29%, #727679 58%, #d8dad8 77%, #3b4043 100%);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.75),
        inset 0 0 0 clamp(1px, 0.12vw, 2px) rgba(255, 255, 255, 0.62);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.combined-slider-handle {
    left: var(--combined-slider-position, 66.6667%);
}

.weight-slider-handle {
    left: var(--weight-slider-position, 50%);
}

.waist-slider-handle {
    left: var(--waist-slider-position, 50%);
}

.change-display {
    left: 12.35%;
    width: 12.1%;
    height: 7.2%;
    font-size: clamp(11px, 1.45vw, 24px);
    line-height: 1;
    text-align: center;
}

.combined-change-display {
    top: 40.15%;
    height: 4.35%;
    font-size: clamp(10px, 1.18vw, 20px);
    line-height: 1.18;
}

.weight-test-display {
    top: 52.45%;
    height: 4.9%;
}

.waist-test-display {
    top: 65.25%;
    height: 4.9%;
}

.change-heading {
    position: absolute;
    z-index: 7;
    left: 13.15%;
    width: 10.5%;
    height: 1.75%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5%;
    color: #f1f1ed;
    background:
        linear-gradient(
            90deg,
            rgba(10, 15, 13, 0) 0%,
            rgba(10, 15, 13, 0.98) 12%,
            rgba(10, 15, 13, 0.99) 88%,
            rgba(10, 15, 13, 0) 100%
        );
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: clamp(7px, 0.68vw, 12px);
    font-weight: 700;
    letter-spacing: 0.025em;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

.combined-change-heading {
    top: 38.05%;
}

.weight-change-heading {
    top: 50.95%;
}

.waist-change-heading {
    top: 63.75%;
}

.impact-display {
    left: 65.35%;
    width: 9.15%;
    height: 7.2%;
    font-size: clamp(11px, 1.45vw, 24px);
}

.combined-impact-display {
    top: 37.7%;
}

.weight-impact-display {
    top: 50.6%;
}

.waist-impact-display {
    top: 63.4%;
}

.mcp-zone-note {
    position: absolute;
    z-index: 8;
    left: 79.25%;
    top: 43.2%;
    width: 14.8%;
    min-height: 27.5%;
    padding: 2.05% 1.2% 1.15%;
    color: #29231b;
    background:
        repeating-linear-gradient(3deg, rgba(86, 62, 35, .045) 0 1px, transparent 1px 5px),
        linear-gradient(128deg, #caa977, #b98e58 56%, #d2b17d);
    border: clamp(1px, .12vw, 2px) solid rgba(68, 47, 27, .72);
    border-radius: 1% 3% 2% 1%;
    box-shadow:
        0 clamp(3px, .38vw, 7px) clamp(5px, .7vw, 12px) rgba(0, 0, 0, .58),
        inset 0 0 clamp(8px, 1vw, 17px) rgba(72, 44, 20, .18);
    font-family: "Segoe Print", "Comic Sans MS", cursive;
    line-height: 1.05;
    transform: rotate(-1.8deg);
}
.mcp-zone-note::after {
    position: absolute;
    inset: 5% 4%;
    border: 1px dashed rgba(65, 44, 25, .26);
    content: "";
    pointer-events: none;
}
.mcp-zone-note h2 {
    position: relative;
    z-index: 1;
    margin: 0 0 8%;
    font-size: clamp(8px, 1.05vw, 18px);
    letter-spacing: .09em;
    text-align: center;
    text-decoration: underline 2px;
    text-underline-offset: .18em;
    transform: rotate(.8deg);
}
.mcp-zone-note ul {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(4px, .55vw, 9px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.mcp-zone-note li {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 3%;
    font-size: clamp(6px, .72vw, 12px);
    font-weight: 700;
    white-space: nowrap;
}
.mcp-zone-note li::before {
    width: clamp(4px, .48vw, 8px);
    aspect-ratio: 1;
    border-radius: 46% 54% 48% 52%;
    content: "";
    grid-column: 1;
    grid-row: 1;
    margin-left: -8%;
    transform: translateX(-100%);
    box-shadow: 0 0 2px currentColor;
}
.mcp-zone-note li span { grid-column: 1; grid-row: 1; }
.mcp-zone-note li strong { grid-column: 2; font-weight: 900; }
.mcp-zone-note .zone-core::before { background: #237c36; }
.mcp-zone-note .zone-healthy::before { background: #2676a5; }
.mcp-zone-note .zone-elevated::before { background: #c76b20; }
.mcp-zone-note .zone-watch::before { background: #a93632; }
.mcp-zone-note .zone-healthy { transform: rotate(.5deg); }
.mcp-zone-note .zone-elevated { transform: rotate(-.6deg); }
.mcp-zone-note .zone-watch { transform: rotate(.35deg); }
.note-tape {
    position: absolute;
    z-index: 2;
    top: -7%;
    width: 31%;
    height: 14%;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 2px, transparent 2px 5px),
        rgba(214, 197, 151, .84);
    box-shadow: 0 2px 3px rgba(0,0,0,.22);
    opacity: .88;
}
.note-tape-left { left: 4%; transform: rotate(-7deg); }
.note-tape-right { right: 3%; transform: rotate(6deg); }

.active-tier-indicator {
    position: absolute;
    z-index: 8;
    left: 13.35%;
    top: var(--active-tier-top, 79.15%);
    width: 28.25%;
    height: 3.75%;
    border: clamp(2px, 0.18vw, 3px) solid #ffe082;
    border-radius: clamp(5px, 0.48vw, 8px);
    background: rgba(255, 255, 255, 0.035);
    box-shadow:
        0 0 clamp(5px, 0.55vw, 9px) #ffd54f,
        0 0 clamp(10px, 1vw, 17px) color-mix(
            in srgb,
            #ffc107 62%,
            transparent
        ),
        inset 0 0 clamp(5px, 0.55vw, 9px) color-mix(
            in srgb,
            #fff3bf 42%,
            transparent
        );
    cursor: help;
    pointer-events: auto;
    transition:
        top 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.active-tier-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff8dc;
    padding: 0 1.5%;
    font-size: clamp(9px, 1.05vw, 18px);
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.95),
        0 0 4px rgba(0, 0, 0, 0.9),
        0 0 8px #ffc107;
    white-space: nowrap;
}

.active-tier-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + clamp(7px, 0.65vw, 11px));
    z-index: 20;
    width: max-content;
    max-width: min(96%, 440px);
    padding: clamp(7px, 0.65vw, 11px) clamp(10px, 0.9vw, 15px);
    color: #fff8dc;
    background: rgba(18, 20, 22, 0.96);
    border: 1px solid rgba(255, 224, 130, 0.8);
    border-radius: clamp(5px, 0.45vw, 8px);
    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.65),
        0 0 8px rgba(255, 193, 7, 0.35);
    font-size: clamp(8px, 0.8vw, 13px);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 5px);
    transition:
        opacity 150ms ease,
        transform 150ms ease,
        visibility 150ms ease;
    pointer-events: none;
}

.active-tier-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border: clamp(5px, 0.45vw, 8px) solid transparent;
    border-top-color: rgba(255, 224, 130, 0.9);
    transform: translateX(-50%);
}

.active-tier-indicator:hover .active-tier-tooltip,
.active-tier-indicator:focus .active-tier-tooltip,
.active-tier-indicator:focus-visible .active-tier-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.active-tier-indicator:focus-visible {
    outline: 2px solid #fff3bf;
    outline-offset: 3px;
}

.engine-side-rail {
    position: absolute;
    z-index: 30;
    inset: 0 auto 0 0;
    width: 9.15%;
    overflow: visible;
    background:
        linear-gradient(90deg, #040708, #111516 72%, #050809),
        repeating-linear-gradient(0deg, transparent 0 12%, rgba(255,255,255,.025) 12.1% 12.3%);
    border-right: clamp(2px, .22vw, 4px) solid #3c4243;
    box-shadow: inset -8px 0 14px rgba(0,0,0,.82), 5px 0 12px rgba(0,0,0,.48);
}
.engine-side-rail::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    content: "";
    background: linear-gradient(90deg, #040708, #111516 72%, #050809);
    pointer-events: none;
}
.engine-side-rail > * { z-index: 1; }

.engine-preferences-toggle {
    position: absolute;
    top: 2.1%;
    left: 17%;
    width: 66%;
    aspect-ratio: 1;
    padding: 5%;
    border: clamp(1px, .12vw, 2px) solid #50595a;
    border-radius: 18%;
    background: linear-gradient(145deg, #202829, #080b0c);
    box-shadow: inset 0 0 10px rgba(255,255,255,.08), 0 3px 8px rgba(0,0,0,.8);
    cursor: pointer;
}

.engine-preferences-toggle img { width: 100%; height: 100%; object-fit: contain; }
.engine-preferences-toggle:hover { border-color: #7d8988; }
.engine-preferences-toggle:focus-visible,
.engine-exit-control:focus-visible { outline: 3px solid #9cff48; outline-offset: 2px; }

.engine-preferences-menu {
    position: absolute;
    z-index: 60;
    top: 2%;
    left: 108%;
    width: clamp(190px, 15vw, 245px);
    padding: clamp(12px, 1vw, 17px);
    border: 1px solid #77847f;
    border-radius: 10px;
    color: #e9f0ec;
    background: rgba(15, 24, 22, .98);
    box-shadow: 0 14px 34px rgba(0,0,0,.72), inset 0 0 18px rgba(72,130,104,.12);
    line-height: 1.25;
}
.engine-preferences-menu[hidden] { display: none; }
.engine-preferences-menu > strong { display: block; color: #b9f278; font-size: 16px; }
.engine-preferences-menu > p { margin: 5px 0 12px; color: #a5b2ad; font-size: 11px; }
.engine-preferences-menu label {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding: 9px;
    align-items: center;
    border: 1px solid rgba(130,150,141,.18);
    border-radius: 7px;
    background: #202c29;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
}
.engine-preferences-menu label small { margin-left: auto; color: #91a099; }
.engine-preferences-close {
    position: absolute;
    top: 5px;
    right: 6px;
    width: 28px;
    height: 28px;
    border: 0;
    color: #aebbb5;
    background: transparent;
    font-size: 22px;
    cursor: pointer;
}

.equipment-bay {
    position: absolute;
    left: 20%;
    width: 60%;
    aspect-ratio: 1.08;
    pointer-events: none;
}
.equipment-bay-sealed {
    top: 28%;
    border: clamp(1px, .12vw, 2px) solid #343a3b;
    border-radius: 9%;
    background: linear-gradient(145deg, #1c2122, #0b0e0f 62%, #24292a);
    box-shadow: inset 0 0 11px rgba(0,0,0,.9), 0 2px 6px rgba(0,0,0,.75);
}
.equipment-bay-sealed::after {
    content: "";
    position: absolute;
    inset: 17%;
    border: 1px solid rgba(116,124,124,.14);
    border-radius: 50%;
    box-shadow: inset 0 0 8px rgba(0,0,0,.7);
}
.equipment-bay-screw {
    position: absolute;
    width: 8%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #899091, #252a2b 48%, #090b0c 72%);
}
.screw-one { top: 7%; left: 7%; } .screw-two { top: 7%; right: 7%; }
.screw-three { bottom: 7%; left: 7%; } .screw-four { bottom: 7%; right: 7%; }

.equipment-bay-open {
    top: 52%;
    overflow: visible;
    border: clamp(1px, .12vw, 2px) solid #383f40;
    border-radius: 8%;
    background: radial-gradient(ellipse at center, #0b0d0e, #020303 72%);
    box-shadow: inset 0 0 12px #000, 0 2px 7px rgba(0,0,0,.82);
}
.exposed-wire {
    position: absolute;
    left: 15%;
    width: 72%;
    height: 7%;
    border-radius: 999px;
    transform-origin: left center;
    box-shadow: 0 1px 2px #000, inset 0 1px rgba(255,255,255,.34);
}
.wire-blue { top: 28%; background: #1679ba; transform: rotate(16deg); }
.wire-red { top: 48%; background: #9f2e25; transform: rotate(-13deg); }
.wire-yellow { top: 65%; background: #b78b1a; transform: rotate(8deg); }
.loose-cover {
    position: absolute;
    z-index: 2;
    left: 10%;
    top: 58%;
    width: 86%;
    height: 62%;
    border: 1px solid #454b4c;
    border-radius: 6%;
    background: linear-gradient(155deg, #272c2d, #101314 70%);
    box-shadow: 2px 5px 8px rgba(0,0,0,.82);
    transform: rotate(-7deg);
}
.loose-cover::after {
    content: "";
    position: absolute;
    top: 10%; right: 10%;
    width: 9%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #899091, #202526 60%, #070909);
}

.engine-exit-control {
    position: absolute;
    left: 11%;
    bottom: 5.4%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 78%;
    height: 13.2%;
    padding: 8% 7% 6%;
    align-items: center;
    justify-items: center;
    color: #73ee35;
    border: clamp(2px, .18vw, 3px) solid #ffd62a;
    border-radius: 9%;
    background: linear-gradient(155deg, #202526, #090b0c 70%);
    box-shadow:
        0 0 clamp(5px, 0.5vw, 9px) rgba(255, 214, 42, 0.65),
        inset 0 0 clamp(4px, 0.45vw, 8px) rgba(255, 226, 92, 0.12);
    text-decoration: none;
}
.engine-exit-symbol { font-size: clamp(18px, 2vw, 34px); text-shadow: 0 0 7px #6df02d; }
.engine-exit-control img { width: 84%; filter: brightness(1.5); }
.engine-exit-control strong { grid-column: 1 / -1; font-size: clamp(10px, 1.15vw, 19px); text-shadow: 0 0 7px #6df02d; }
.engine-exit-control small { grid-column: 1 / -1; color: #d7d9d6; font-size: clamp(5px, .48vw, 8px); letter-spacing: .04em; }

.population-summary {
    position: absolute;
    z-index: 9;
    left: 69.05%;
    top: 79.3%;
    width: 26.65%;
    height: 16.35%;
    padding: clamp(4px, 0.42vw, 7px);
    color: #e9ece8;
    background:
        linear-gradient(
            180deg,
            rgba(31, 35, 34, 0.97),
            rgba(14, 18, 17, 0.98)
        );
    border: clamp(1px, 0.12vw, 2px) solid rgba(116, 128, 121, 0.78);
    border-radius: clamp(4px, 0.4vw, 7px);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.8),
        inset 0 0 12px rgba(103, 138, 112, 0.12);
    overflow: hidden;
}

.population-counts {
    position: absolute;
    z-index: 9;
    left: 47.95%;
    top: 79.3%;
    width: 19.35%;
    height: 16.35%;
    padding: clamp(6px, 0.55vw, 10px);
    color: #e9ece8;
    background:
        linear-gradient(
            180deg,
            rgba(31, 35, 34, 0.97),
            rgba(14, 18, 17, 0.98)
        );
    border: clamp(1px, 0.12vw, 2px) solid rgba(116, 128, 121, 0.78);
    border-radius: clamp(4px, 0.4vw, 7px);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.8),
        inset 0 0 12px rgba(103, 138, 112, 0.12);
    overflow: hidden;
}

.population-counts h2 {
    margin: 0 0 clamp(5px, 0.48vw, 8px);
    color: #fff3bf;
    font-size: clamp(8px, 0.72vw, 12px);
    line-height: 1.1;
    text-align: center;
}

.population-count-row {
    display: grid;
    grid-template-columns: 27% 1fr 18%;
    align-items: center;
    gap: clamp(3px, 0.3vw, 5px);
    min-height: clamp(17px, 1.65vw, 27px);
    font-size: clamp(6.5px, 0.58vw, 10px);
}

.population-count-label {
    font-weight: 700;
    white-space: nowrap;
}

.population-count-track {
    height: clamp(6px, 0.55vw, 9px);
    overflow: hidden;
    background: rgba(116, 128, 121, 0.27);
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7);
}

.population-count-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    transition: width 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.population-count-total {
    color: #d7ddd8;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

.population-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(4px, 0.4vw, 7px);
    margin: 0 0 clamp(2px, 0.18vw, 3px);
}

.population-summary h2 {
    margin: 0;
    color: #fff3bf;
    font-size: clamp(7px, 0.7vw, 12px);
    line-height: 1.1;
    text-align: left;
}

#refresh-population-button {
    flex: 0 0 auto;
    margin: 0;
    padding: clamp(2px, 0.2vw, 3px) clamp(4px, 0.38vw, 7px);
    color: #181b19;
    background: linear-gradient(180deg, #ffe082, #d9a916);
    border: 1px solid #fff0a8;
    border-radius: clamp(3px, 0.3vw, 5px);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.7),
        0 0 5px rgba(255, 193, 7, 0.3);
    font: inherit;
    font-size: clamp(6px, 0.55vw, 9px);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

#refresh-population-button:hover {
    background: linear-gradient(180deg, #fff0a8, #e3b928);
}

#refresh-population-button:active {
    transform: translateY(1px);
}

#refresh-population-button:focus-visible {
    outline: 2px solid #fff3bf;
    outline-offset: 2px;
}

.population-summary table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: clamp(6.5px, 0.54vw, 9.5px);
    line-height: 1;
}

.population-summary th,
.population-summary td {
    height: clamp(10px, 0.92vw, 16px);
    padding: 0 clamp(2px, 0.25vw, 4px);
    border-right: 1px solid rgba(116, 128, 121, 0.3);
    border-bottom: 1px solid rgba(116, 128, 121, 0.25);
    text-align: center;
    white-space: nowrap;
}

.population-summary th:last-child,
.population-summary td:last-child {
    border-right: 0;
}

.population-summary th {
    color: #dfe5e0;
    background: rgba(75, 84, 79, 0.52);
    font-weight: 800;
}

.population-summary tbody tr:last-child td {
    border-bottom: 0;
}

.population-summary td:nth-child(3) {
    color: #c9ff8e;
    font-weight: 800;
}

.population-result {
    font-weight: 800;
}

@media (prefers-reduced-motion: no-preference) {
    .weight-slider-handle,
    .waist-slider-handle,
    .combined-slider-handle {
        transition: left 45ms linear;
    }
}

/* Extend phone hit areas without changing the artwork or visible controls. */
@media (max-width: 700px), (max-width: 950px) and (max-height: 500px) {
  .engine-preferences-toggle::after {
    content: ""; position: absolute; top: -2px; left: -2px;
    width: max(100%, 44px); height: max(100%, 44px);
  }
  #refresh-population-button { position: relative; }
  #refresh-population-button::after {
    content: ""; position: absolute; top: -4px; left: 0;
    width: 44px; height: max(100%, 24px);
  }
}