:root{
    interpolate-size: allow-keywords;
    
    --bg-main: #141210;
    --bg-panel: #26211e;
    --bg-panel-inset: #1a1714;

    --brass-dark: #7a5e33;
    --brass-base: #c69a53;
    --brass-light: #e6c27a;

    --copper-dark: #6e3518;
    --copper-base: #a65126;

    --text-main: #e8dbce;
    --text-muted: #8c8177;

    --ui-danger: hsl(0, 65%, 45%);
    --ui-success: hsl(135, 45%, 45%);

    --ui-danger-hover: hsl(0, 65%, 15%);
    --ui-success-hover: hsl(135, 45%, 15%);

    --shadow-inset-deep: inset 0 4px 15px hsla(0, 0%, 0%, 0.8);
    --shadow-drop-brass: 0 0 10px hsla(40, 68%, 69%, 0.3);

    --space-8: .5rem;
    --space-12: .75rem;
    --space-16: 1rem;
    --space-20: 1.25rem;
    --space-24: 1.5rem;
    --space-32: 2rem;
    --space-48: 3rem;
    --space-56: 3.5rem;
    --space-64: 4rem;
    --space-96: 6rem;
    --space-128: 8rem;
    --space-192: 12rem;

    --border-radius-base: 2rem;

    --line-height-80: 0.8;
    --line-height-100: 1;
    --line-height-140: 1.4;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    --font-size-small: 1.5rem;
    --font-size-medium: 2.5rem;
    --font-size-large: 3rem;
    --font-size-x-large: 3.75rem;
    --font-size-xx-large: 5rem;
    --font-size-xxx-large: 6rem;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}
body {
    font-family: "Newsreader", serif;
    font-weight: var(--font-weight-semibold);
    font-optical-sizing: auto;
    line-height: var(--line-height-140);
    color: var(--brass-light);
    background-color: var(--bg-panel);
    font-size: var(--font-size-small);
    overflow: clip;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, svg {
    max-width: 100%;
    height: auto;
    display: block;
}
a {
    display: inline-block;
    text-decoration-line: none;
    color: var(--black);
}
p {
    text-wrap: pretty;
    text-overflow: ellipsis;
}
.container {
    max-width: 90rem;
    margin-inline: auto;
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: clip;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.timer-display {
    font-size: var(--font-size-large);
    position: fixed;
    left: 50%;
    translate: -50% 0;
    bottom: 2.5%;
    color: var(--text-main);
    z-index: 9900;
}

.info-message {
    z-index: 9000;
    position: fixed;
    bottom: 5%;
    padding: var(--space-24);
    opacity: 0;
    translate: 0 5vw;
    display: none;
    background-color: var(--bg-panel-inset);
    transition: opacity 0.25s ease-out, translate 0.2s ease-out, display 0.25s allow-discrete;

    &.info-message--active {
        display: block;
        translate: 0;
        opacity: 1;
        transition: opacity 0.25s ease-out, translate 0.25s ease-out, display 0.25s allow-discrete;
    }

    &.info-message--success {
        color: var(--ui-success);
        border: 0.125rem solid var(--ui-success-hover);
    }
    &.info-message--danger {
        color: var(--ui-danger);
        border: 0.125rem solid var(--ui-danger-hover);
    }
}
@starting-style {
    .info-message.info-message--active {
        translate: -10vw 0;
        opacity: 0;
    }
}


/* =============================================================================== */
/* General */
/* =============================================================================== */

.global-overlay {
    position: fixed;
    display: none;
    inset: 0;
    z-index: 8000;
    pointer-events: none; 
    opacity: 0;
    transition: opacity 0.5s ease-out, box-shadow 0.5s ease-out, display 1s allow-discrete;
}

.global-overlay--success {
    display: block;
    opacity: 1;
    box-shadow: inset 0 0 8rem var(--ui-success);
    transition: opacity 1s ease-out, box-shadow 1s ease-out, display 1s allow-discrete;
}

.challenges__wrapper {
    position: relative;
    width: 100vi;
    height: 100vb;
}
.start-message{
    display: none;
    place-content: center;
    place-items: center;
    grid-template-rows: 1fr 1fr;

    opacity: 0;
    position: absolute;
    inset: 10% 10% 5% 10%;
    transition: opacity 1s ease-out, display 1s allow-discrete;
}
.start-message__title {
    font-size: var(--font-size-large);
    text-align: center;
    max-width: 35ch;
}
.start-message__text {
    font-size: var(--font-size-small);
    color: var(--brass-base);
    text-align: center;
    max-width: 50ch;
}
.start-message--active {
    display: grid;
    opacity: 1;
}

.challenge__section {
    background-color: var(--bg-panel);
    display: none;
    grid-template-rows: auto 1fr;
    gap: var(--space-48);
    padding-block: var(--space-64) var(--space-128);
    padding-inline: var(--space-48);

    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease-out 1s, display 1s allow-discrete 1s;
}
.challenge__section.challenge__section--first {
    transition: opacity 1s ease-out 5s, display 1s allow-discrete 5s;
}
.challenge__title {
    font-size: var(--font-size-large);
}
.end-screen {
    z-index: 9990;
    display: none;
    grid-template-rows: auto 1fr;
    padding-block: var(--space-64) var(--space-128);
    gap: var(--space-64);
    place-items: center;
    place-content: center;
    background-color: var(--bg-panel);

    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease-out, display 1s allow-discrete;
}

.challenge__section--active, .end-screen--active {
    display: grid;
    opacity: 1;
    transition: opacity 0.5s ease-out 2.5s, display 0.5s allow-discrete 2.5s;
}

@starting-style {
    .challenge__section--active, .end-screen--active, .start-message--active {
        opacity: 0;
    }
    .global-overlay--success {
        opacity: 0;
        box-shadow: inset 0 0 0rem var(--ui-success);
    }
}
/* =============================================================================== */
/* Comb tuning challenge */
/* =============================================================================== */

.challenge-tuning__title {
    font-size: var(--font-size-large);
}
.challenge-tuning__content {
    display: grid;
    align-items: center;
    grid-template-rows: auto 1fr;
    gap: var(--space-64);
    align-items: stretch;
}
.gauge-monitor {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    place-items: center;
    gap: var(--space-32);
}
.gauge-monitor > span {
    color: var(--text-main);
}
.gauge-hint__wrapper {
    display: flex;
    gap: var(--space-48);
    grid-column: 1 / -1;
}
.comb-tuner {
    display: grid;
    grid-auto-flow: column;
    color: var(--brass-base);
}
.solved-glow {
    box-shadow: inset 0rem 0rem 5rem var(--ui-success);
}
.comb-tuner__item {
    display: grid;
    grid-template-rows: auto 1fr auto;
    place-items: center;
}

.vertical-slider {
    --_slider-track-w: 2rem;
    --_slider-thumb-w: 4.5rem;
    --_slider-thumb-h: 2rem;
    --_slider-thumb-border: 0.2rem;
    appearance: none;
    background: transparent;
    cursor: pointer;
    writing-mode: vertical-lr; 
    direction: rtl;
    height: 80%;
    width: 5rem;

    &:focus-visible::-webkit-slider-thumb {
        outline: 0.2rem solid var(--brass-base);
        outline-offset: 0.25rem;
    }

    &::-webkit-slider-runnable-track {
        width: var(--_slider-track-w);
        background-color: var(--bg-panel-inset);
        border: 0.125rem solid var(--brass-dark);
        border-radius: 1rem;
        box-shadow: var(--shadow-inset-deep);
    }

    &::-webkit-slider-thumb {
        appearance: none; 
        height: var(--_slider-thumb-h);
        width: var(--_slider-thumb-w);
        background-color: var(--brass-base);
        border: var(--_slider-thumb-border) solid var(--brass-light);
        border-radius: 0.35rem;
        margin-left: calc((var(--_slider-track-w) * 0.5) - (var(--_slider-thumb-w) * 0.5) - (var(--_slider-thumb-border) * 0.5));
        
        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.8), inset 0 0 0.375rem var(--copper-dark);
        transition: background-color 0.2s, box-shadow 0.2s;
    }

    &:active::-webkit-slider-thumb {
        background-color: var(--copper-base);
        border-color: var(--bg-main);
        box-shadow: inset 0 0 0.375rem var(--copper-dark);
    }

    &::-moz-range-track {
        width: 1.5rem;
        background-color: var(--bg-panel-inset);
        border: 0.125rem solid var(--brass-dark);
        border-radius: 1rem;
        box-shadow: var(--shadow-inset-deep);
    }
    &::-moz-range-thumb {
        height: 1.25rem;
        width: 3rem;
        background-color: var(--brass-base);
        border: 0.2rem solid var(--brass-light);
        border-radius: 0.25rem;
        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.8), inset 0 0 0.375rem var(--copper-dark);
        cursor: pointer;
    }
    &:active::-moz-range-thumb {
        background-color: var(--copper-base);
        border-color: var(--ui-cyan);
        box-shadow: 0 0 1rem var(--ui-cyan), inset 0 0 0.375rem var(--copper-dark);
    }
}

/* ========================================== */
/* Gears challenge */
/* ========================================== */

.challenge__section--gears {
    grid-template-rows: auto auto 1fr;
}
.challenge-gears__title {
    font-size: var(--font-size-large);
}

.gear-hint__wrapper {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: auto 1fr;
    gap: var(--space-64);
}
.gear-hint__notes {
    font-size: var(--font-size-small);
    color: var(--text-muted);
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(3, min-content);
    grid-auto-columns: 1fr;
    gap: var(--space-48);
}

.challenge-gears__content {
    position: relative;
    width: 100%;
}

.mechanism-board__blueprint {
    position: fixed;
    top: 10%;
    right: 0;
    translate: 0 -50%;
    padding: var(--space-24);
    background-color: var(--bg-panel-inset);
    border: 0.125rem dashed var(--brass-base);
    color: var(--text-muted);
    font-family: monospace;
    pointer-events: none;
    text-align: center;
}
.blueprint__title {
    color: var(--brass-light);
}
.blueprint__text, .blueprint__user-input {
    text-transform: uppercase;
}

.peg {
    position: absolute;
    width: 2rem;
    height: 2rem;
    background-color: var(--bg-main);
    border: 0.25rem solid var(--brass-dark);
    border-radius: 50%;
    translate: -50% -50%;
    box-shadow: inset 0 0 0.5rem var(--bg-panel-inset);

    &.peg-small {
        top: 25%;
        left: 30%;
    }
    &.peg-medium {
        top: 35%;
        left: 50%;
    }
    &.peg-big {
        top: 40%;
        left: 75%;
    }
}

.gear {
    position: absolute;
    width: 8rem;
    aspect-ratio: 1;
    background-color: var(--brass-base);
    border: 1rem dashed var(--brass-light);
    border-radius: 100vi;
    transform-origin: center;
    
    translate: -50% -50%;
    rotate: 0deg;
    
    cursor: grab;
    user-select: none; 
    touch-action: none; 
    
    transition: translate 1s ease, box-shadow 0.1s ease;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.5);
    z-index: 50;

    view-transition-class: returning-gear;

    &:active {
        cursor: grabbing;
        z-index: 100;
        box-shadow: 0 1rem 2rem rgba(0,0,0,0.8);
    }

    &.gear--copper {
        background-color: #8a5726;
        width: 6rem;
        aspect-ratio: 1;
        top: 80%;
        left: 80%;
    }
    &.gear--brass {
        background-color: #796d23;
        width: 8rem;
        aspect-ratio: 1;
        top: 75%;
        left: 20%;
    }
    &.gear--iron {
        background-color: #5c5c5c;
        width: 10rem;
        aspect-ratio: 1;
        top: 85%;
        left: 50%;
    }

    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 0.5rem;
        height: 50%;
        background-color: var(--brass-light);
        translate: -50% 0;
    }
}

::view-transition-group(.returning-gear) {
    animation-duration: 0.25s;
    animation-timing-function: ease-out;
}

/* ========================================== */
/* Valves challenge */
/* ========================================== */

.valve__wrapper {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--space-32);
    align-content: stretch;
    justify-content: stretch;
}

.valve-hint__wrapper {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: auto 1fr;
    gap: var(--space-64);
}
.valve-hint__notes {
    font-size: var(--font-size-small);
    color: var(--text-muted);
    display: grid;
    grid-auto-flow: column;
    gap: var(--space-48);
}
.notes-emphasis {
    color: var(--brass-base);
}
.notes-action {
    color: var(--text-main);
}

.valves {
    display: grid;
    grid-auto-flow: column;
    gap: var(--space-64);
    place-items: center;
}
.valve {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-24);
}

@property --fill {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

.valve__dial {
    width: 14rem;
    aspect-ratio: 1;
    border-radius: 100vi;
    border: 0.25rem solid var(--brass-dark);
    background-color: var(--bg-panel-inset);
    display: grid;
    place-items: center;

    background: conic-gradient(
        var(--brass-dark) 0%, 
        var(--brass-dark) var(--fill), 
        var(--bg-panel-inset) var(--fill), 
        var(--bg-panel-inset) 100%
    );
    transition: --fill 0.5s ease-out;
    
    font-size: var(--font-size-small);
    font-weight: bold;
    color: var(--text-main);
}

.valve__label {
    font-size: 1rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1rem;
}

.valve-controller__wrapper {
    display: grid;
    grid-auto-flow: column;
    gap: var(--space-32);
    place-items: center;
}

.valve-btn {
    padding: var(--space-24);
    font-size: var(--font-size-small);
    font-family: inherit;
    font-weight: var(--font-weight-bold);
    color: var(--bg-panel-inset);
    background-color: var(--brass-base);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: scale 0.2s ease, filter 0.2s ease;

    &:hover {
        filter: brightness(1.2);
    }

    &:active {
        scale: 0.95;
    }
}


/* ========================================== */
/* End screens */
/* ========================================== */

.end-screen__title {
    font-size: var(--font-size-large);
    width: 100%;
}

.end-screen--win .end-screen__title {
    color: var(--ui-success);
}
.end-screen--lose .end-screen__title {
    color: var(--ui-danger);
}

.end-screen__message {
    max-width: 40ch;
    font-size: var(--font-size-small);
}

.end-screen__button {
    background: transparent;
    font-family: inherit;
    justify-self: stretch;
    font-weight: var(--font-weight-bold);
    border: 0.25rem solid var(--brass-base);
    font-size: var(--font-size-small);
    color: var(--brass-light);
    border-color: var(--ui-success);
    border-radius: 0.5rem;
    color: var(--ui-success);
    padding: 1rem 3rem;
    cursor: pointer;
    text-transform: uppercase;
    transition: background-color 0.2s ease, scale 0.1s ease;

    &:hover {
        background-color: var(--ui-success-hover);
    }
    &:active {
        scale: 0.98;
    }
}

.restart-btn--danger {
    border-color: var(--ui-danger);
    color: var(--ui-danger);

    &:hover {
        background-color: var(--ui-danger-hover);
    }
}

/* ========================================== */
/* Leaderboard */
/* ========================================== */

.leaderboard-list {
    display: grid;
    gap: var(--space-12);
    background-color: var(--bg-panel);
    border: 0.125rem solid var(--brass-dark);
    border-radius: 0.5rem;
    padding: var(--space-32);
    width: 80%;
    min-width: 45vi;
    max-width: 50rem;
    max-height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--brass-base) var(--bg-panel-inset);
}
.leaderboard-list::-webkit-scrollbar {
    width: 1rem; 
}
.leaderboard-list::-webkit-scrollbar-track {
    background-color: var(--bg-panel-inset);
    border-radius: 0.5rem;
}
.leaderboard-list::-webkit-scrollbar-thumb {
    background-color: var(--brass-base);
    border-radius: 0.5rem;
}
.leaderboard-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--copper-base);
}

.leaderboard-list__title {
    color: var(--brass-base);
    font-size: 1.5rem;
}

.leaderboard-list__content {
    display: grid;
    grid-template-columns: 0.5fr 1fr 1.25fr;
    border-bottom: var(--brass-base) 0.1rem solid;
    place-items: center;
    padding: var(--space-16);
}
.leaderboard-list__item {
    display: grid;
    grid-template-columns: 0.5fr 1fr 1.25fr;
    border-bottom: var(--brass-base) 0.1rem solid;
    place-items: center;
    padding: var(--space-12);
}
.leaderboard-list__content:last-child {
    border-bottom: none;
}
.leaderboard-list__content--header {
    background-color: var(--bg-panel-inset);
    text-transform: uppercase;
    font-size: var(--font-size-small);
    border-radius: 0.25rem;
}

.leaderboard-item {
    width: 100%;
    padding-inline: var(--space-16);
    text-align: center;
    border-right: var(--brass-base) 0.1rem solid;
}
.leaderboard-item:last-child {
    border-right: none;
}