:root {
    --cream:#fff5dd;
    --green:#123e38;
    --mint:#b7e1c2;
    --red:#ec5437;
    --gold:#f9c65b;
    --line:rgba(255,245,221,.22)
}
* {
    box-sizing:border-box;
    margin:0;
    padding:0
}
html,body {
    width:100%;
    height:100%;
    overflow:hidden;
    background:var(--green);
    color:var(--cream);
    font-family:Arial,Helvetica,sans-serif
}
button,a {
    -webkit-tap-highlight-color:transparent
}
button {
    font:inherit;
    cursor:pointer;
    touch-action:manipulation
}
button:focus-visible,a:focus-visible {
    outline:3px solid var(--gold);
    outline-offset:5px
}
button:active {
    transform:translateY(2px)
}
.hidden {
    display:none!important
}
#game-container,#snow-canvas,.vignette {
    position:absolute;
    inset:0;
    width:100%;
    height:100%
}
#game-container {
    z-index:1;
    touch-action:none
}
#game-container canvas {
    display:block;
    width:100%;
    height:100%
}
#snow-canvas {
    z-index:2;
    pointer-events:none
}
.vignette {
    z-index:3;
    pointer-events:none;
    background:linear-gradient(0deg,#081e1d40,transparent 30%)
}
.screen-overlay {
    position:absolute;
    inset:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:#092321bf;
    backdrop-filter:blur(9px);
    overflow:auto
}
.menu-screen {
    display:block;
    padding:0;
    background:linear-gradient(90deg,#0d342dfa 0%,#0d342df2 29%,#0d342d99 49%,#0d342d0d 75%);
    backdrop-filter:none
}
.site-header {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:30px 4.5vw
}
.brand {
    text-decoration:none;
    color:var(--cream);
    font-size:13px;
    font-weight:900;
    letter-spacing:1.6px;
    display:flex;
    align-items:center;
    gap:12px
}
.brand-mark {
    font-size:33px;
    color:var(--gold)
}
.edition {
    font-size:9px;
    color:#b2c9ba;
    border-left:1px solid var(--line);
    padding-left:18px;
    margin-left:12px;
    letter-spacing:1.4px
}
.sound-btn {
    border:1px solid var(--line);
    color:var(--cream);
    background:#103630cc;
    width:44px;
    height:44px;
    border-radius:50%;
    font-size:21px;
    display:grid;
    place-items:center;
    flex-shrink:0
}
.sound-btn[aria-pressed=true] {
    opacity:.65
}
.menu-copy {
    position:absolute;
    left:8%;
    top:50%;
    transform:translateY(-46%);
    width:540px;
    max-width:48%
}
.eyebrow {
    font-size:10px;
    font-weight:800;
    letter-spacing:2.4px;
    color:var(--mint);
    display:flex;
    align-items:center;
    gap:9px
}
.live-dot {
    width:6px;
    height:6px;
    background:var(--red);
    border-radius:50%;
    box-shadow:0 0 0 4px #ec54371c
}
.intro {
    font-family:Georgia,serif;
    font-style:italic;
    font-size:25px;
    color:var(--gold);
    margin-top:25px
}
h1 {
    position:relative;
    font-size:clamp(70px,8.3vw,128px);
    font-weight:950;
    letter-spacing:-6px;
    line-height:.9;
    margin:12px 0 24px
}
h1>span:not(.title-star) {
    color:var(--red)
}
.title-star {
    position:absolute;
    font-size:62px;
    color:var(--gold);
    margin-left:20px;
    top:52%;
    font-weight:400
}
.menu-description {
    font-size:14px;
    line-height:1.8;
    color:#c1d1c4;
    max-width:360px
}
.menu-actions {
    display:flex;
    align-items:center;
    gap:28px;
    margin:28px 0
}
.btn-primary {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:28px;
    border:0;
    background:var(--red);
    color:var(--cream);
    padding:20px 24px;
    border-radius:5px;
    font-size:13px;
    letter-spacing:1.3px;
    font-weight:900;
    box-shadow:0 5px 0 #a93422;
    transition:background .15s,transform .15s
}
.btn-primary:hover {
    background:#fa6649
}
.btn-primary>span {
    font-size:23px;
    font-weight:400;
    line-height:1
}
.menu-actions .btn-primary {
    width:244px
}
.best-record {
    display:grid;
    grid-template-columns:auto auto;
    gap:3px 7px
}
.best-record>span {
    grid-column:1/-1;
    font-size:8px;
    letter-spacing:1.6px;
    color:#a7bcad
}
.best-record strong {
    font-size:27px;
    letter-spacing:-1px
}
.best-record small {
    font-size:8px;
    color:#a7bcad;
    align-self:end;
    padding-bottom:5px
}
.how-to {
    margin-top:34px;
    padding-top:21px;
    border-top:1px solid var(--line);
    max-width:440px
}
.section-label {
    font-size:9px;
    font-weight:800;
    letter-spacing:1.4px;
    color:#9fbaaa
}
.controls-hint {
    display:flex;
    gap:20px;
    margin-top:13px
}
.controls-hint>div {
    display:flex;
    align-items:center;
    gap:4px;
    flex-wrap:wrap
}
.controls-hint span {
    width:100%;
    font-size:10px;
    color:#bdd0bf;
    margin-top:5px
}
kbd {
    font-family:inherit;
    font-size:9px;
    min-width:24px;
    min-height:23px;
    display:inline-grid;
    place-items:center;
    border:1px solid #739182;
    border-bottom-width:3px;
    border-radius:4px;
    padding:4px 7px;
    color:var(--cream)
}
.mobile-hint {
    font-size:10px;
    color:#9fbaaa;
    margin-top:14px
}
.postcard {
    position:absolute;
    right:5%;
    bottom:15%;
    width:235px;
    padding:23px;
    background:var(--cream);
    color:var(--green);
    transform:rotate(5deg);
    box-shadow:4px 12px 25px #092e3733;
    border:6px solid var(--cream);
    outline:1px dashed #a9b6a6;
    outline-offset:-12px
}
.postcard-tag {
    font-size:8px;
    font-weight:800;
    letter-spacing:1.5px
}
.postcard-star {
    display:block;
    color:var(--red);
    font-size:44px;
    margin:12px 0
}
.postcard strong {
    font-size:22px;
    line-height:1.05;
    letter-spacing:-.8px
}
.postcard p {
    font-size:11px;
    line-height:1.6;
    margin-top:12px;
    color:#637769
}
.postcard-bottom {
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid #cbd1bc;
    margin-top:17px;
    padding-top:12px;
    font-size:8px;
    letter-spacing:1px;
    font-weight:800
}
.postcard-bottom>span:last-child {
    font-size:26px
}
.menu-footer {
    position:absolute;
    bottom:0;
    width:100%;
    padding:22px 4.5vw;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:8px;
    letter-spacing:1.5px;
    color:#b9ccbc
}
.menu-footer b {
    color:var(--gold);
    font-size:23px;
    margin-left:15px;
    vertical-align:middle
}
.ui-layer {
    position:absolute;
    inset:0;
    z-index:10;
    pointer-events:none
}
.hud-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:max(20px,env(safe-area-inset-top)) 28px 14px;
    background:linear-gradient(#103c39ed,#103c3900)
}
.run-brand {
    font-weight:900;
    font-size:19px;
    letter-spacing:-1px;
    line-height:.95
}
.run-brand span {
    display:block;
    color:var(--gold)
}
.hud-stats {
    display:flex;
    gap:8px
}
.hud-stat-box {
    background:#133f39ec;
    border:1px solid var(--line);
    border-radius:9px;
    padding:11px 22px;
    min-width:106px;
    display:grid;
    gap:4px
}
.stat-label {
    font-size:8px;
    font-weight:800;
    letter-spacing:1.2px;
    color:#bdd1c2
}
.hud-stat-box strong {
    font-size:23px;
    font-variant-numeric:tabular-nums
}
.score-box {
    background:var(--cream);
    color:var(--green)
}
.score-box .stat-label {
    color:#577a64
}
.hud-actions {
    display:flex;
    gap:8px;
    pointer-events:auto
}
.run-info {
    display:flex;
    justify-content:center;
    gap:20px;
    font-size:9px;
    letter-spacing:1.4px;
    font-weight:800;
    text-shadow:0 1px 4px #123e38
}
.mission-panel {
    position:absolute;
    top:135px;
    left:28px;
    background:#123e38d9;
    padding:16px;
    border:1px solid var(--line);
    border-radius:10px;
    font-size:11px;
    line-height:2
}
.mission-panel .section-label {
    display:block;
    margin-bottom:7px
}
.mission-panel .complete {
    color:var(--gold)
}
.combo {
    position:absolute;
    top:142px;
    right:28px;
    text-align:center;
    background:#123e38e8;
    border-radius:10px;
    padding:12px 17px;
    min-width:110px
}
.combo strong {
    font-size:36px;
    color:var(--gold);
    display:block
}
.combo>span {
    font-size:8px;
    letter-spacing:1.3px
}
.combo>div {
    height:3px;
    background:#ffffff25;
    margin-top:10px
}
.combo i {
    display:block;
    height:100%;
    background:var(--gold)
}
#turbo-container {
    position:absolute;
    top:128px;
    left:50%;
    transform:translateX(-50%);
    width:280px;
    max-width:75%;
    background:#123e38ee;
    border:1px solid var(--gold);
    padding:12px 16px;
    border-radius:10px
}
.turbo-label {
    display:flex;
    justify-content:space-between;
    font-size:11px;
    font-weight:900;
    letter-spacing:1px;
    color:var(--gold)
}
.turbo-bar-bg {
    height:6px;
    background:#ffffff25;
    border-radius:4px;
    overflow:hidden;
    margin:9px 0
}
#turbo-fill {
    height:100%;
    width:100%;
    background:var(--gold)
}
#turbo-container small {
    font-size:7px;
    letter-spacing:1px;
    color:var(--cream)
}
#zone-banner {
    position:absolute;
    top:30%;
    left:50%;
    transform:translateX(-50%);
    max-width:88%;
    width:max-content;
    text-align:center;
    background:var(--cream);
    color:var(--green);
    border-radius:5px;
    padding:12px 22px;
    font-size:13px;
    font-weight:800;
    box-shadow:0 4px 20px #123e3820
}
#pickup-feedback {
    position:absolute;
    top:49%;
    left:50%;
    transform:translateX(-50%);
    color:var(--gold);
    font-size:25px;
    font-weight:900;
    text-shadow:0 2px 4px #123e38
}
.touch-controls {
    position:absolute;
    bottom:0;
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 28px max(22px,env(safe-area-inset-bottom));
    background:linear-gradient(transparent,#103c3977)
}
.touch-left-cluster,.touch-right-cluster {
    display:flex;
    gap:10px
}
.ctrl-btn {
    pointer-events:auto;
    border:1px solid #fff5dd70;
    background:#123e38bb;
    color:var(--cream);
    border-radius:12px;
    width:56px;
    height:56px;
    font-size:27px;
    touch-action:none
}
.ctrl-btn-jump {
    width:106px;
    background:var(--red);
    border-color:var(--red)
}
.ctrl-btn-jump span {
    font-size:11px;
    font-weight:900;
    vertical-align:middle
}
.desktop-hint {
    font-size:9px;
    letter-spacing:1.3px;
    color:var(--cream);
    display:flex;
    gap:22px;
    text-shadow:0 2px 4px #123e38
}
.modal-card {
    width:420px;
    max-width:100%;
    max-height:100%;
    overflow:auto;
    text-align:center;
    background:var(--cream);
    color:var(--green);
    border-radius:14px;
    padding:34px;
    box-shadow:0 20px 100px #082c3960
}
.modal-card .eyebrow {
    color:#6d8872;
    justify-content:center;
    font-size:8px;
    letter-spacing:1.5px
}
.modal-card h2 {
    font-size:35px;
    letter-spacing:-1.5px;
    margin:16px 0
}
.modal-card p {
    font-size:12px;
    line-height:1.7;
    color:#637b67;
    margin-bottom:22px
}
.modal-card .btn-primary {
    width:100%;
    margin-top:20px
}
.btn-secondary {
    border:0;
    background:none;
    padding:19px 5px 8px;
    color:#637b67;
    font-size:11px;
    text-decoration:underline;
    text-underline-offset:4px
}
.modal-card>small {
    display:block;
    font-size:10px;
    color:#879b87;
    margin-top:20px
}
.result-score {
    display:grid;
    gap:7px;
    padding:14px 0 22px
}
.result-score .section-label {
    color:#637b67
}
.result-score strong {
    font-size:62px;
    letter-spacing:-3px;
    line-height:1.1
}
.result-score>span:last-child {
    font-size:9px;
    letter-spacing:1.5px;
    color:var(--red);
    font-weight:800
}
.stats-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    padding:18px 0;
    border-top:1px solid #d3dcc8;
    border-bottom:1px solid #d3dcc8
}
.stats-grid>div {
    display:grid;
    gap:9px
}
.stats-grid>div+div {
    border-left:1px solid #d3dcc8
}
.stats-grid .stat-label {
    color:#637b67;
    font-size:7px
}
.stats-grid strong {
    font-size:19px
}
.modal-card .result-missions {
    margin:12px 0 0;
    font-size:10px
}
.record-badge {
    display:inline-block;
    color:var(--red);
    border:1px solid #ec543750;
    border-radius:30px;
    padding:7px 12px;
    font-size:9px;
    font-weight:900;
    letter-spacing:1px;
    margin-bottom:16px
}
body.turbo .vignette {
    box-shadow:inset 0 0 75px #f9c65b60
}
body.crashed .vignette {
    background:#ec543744
}
@media(min-width:1500px) {
    .menu-copy {
        left:12%;
        max-width:540px
    }
    .postcard {
        right:10%
    }
}
@media(max-width:850px) {
    .edition {
        display:none
    }
    .menu-copy {
        left:6%;
        max-width:58%
    }
    h1 {
        font-size:86px
    }
    .postcard {
        right:4%;
        width:200px;
        padding:21px;
        bottom:16%
    }
    .postcard strong {
        font-size:19px
    }
    .menu-footer>span:last-child {
        display:none
    }
    .desktop-hint {
        display:none
    }
    .mission-panel {
        font-size:10px;
        left:16px;
        padding:10px;
        top:128px
    }
    .combo {
        right:16px;
        top:130px
    }
}
@media(max-width:600px) {
    .menu-screen {
        background:linear-gradient(90deg,#103d35f5,#103d35bc 64%,#103d3577)
    }
    .site-header {
        padding:20px 6%
    }
    .brand {
        font-size:10px;
        letter-spacing:1.2px
    }
    .brand-mark {
        font-size:26px
    }
    .menu-copy {
        left:8%;
        width:84%;
        max-width:none;
        transform:translateY(-44%)
    }
    .eyebrow {
        font-size:8px;
        letter-spacing:1.7px
    }
    .intro {
        font-size:22px;
        margin-top:21px
    }
    h1 {
        font-size:clamp(72px,20vw,108px);
        margin-bottom:21px;
        letter-spacing:-5px
    }
    .title-star {
        font-size:45px;
        margin-left:14px
    }
    .menu-description {
        font-size:12px;
        max-width:310px
    }
    .menu-actions {
        gap:20px;
        margin:25px 0
    }
    .menu-actions .btn-primary {
        width:215px;
        font-size:11px;
        padding:19px
    }
    .best-record>span {
        font-size:7px;
        letter-spacing:.8px
    }
    .best-record strong {
        font-size:23px
    }
    .best-record small {
        font-size:7px
    }
    .how-to {
        margin-top:27px;
        padding-top:19px
    }
    .controls-hint {
        gap:24px
    }
    .controls-hint span {
        font-size:9px
    }
    .postcard {
        display:none
    }
    .menu-footer {
        font-size:6px;
        padding:18px 8%
    }
    .hud-top {
        padding:16px 12px 10px;
        gap:8px
    }
    .run-brand {
        display:none
    }
    .hud-stats {
        gap:5px;
        flex:1
    }
    .hud-stat-box {
        min-width:0;
        padding:9px 12px;
        flex:1;
        gap:4px
    }
    .hud-stat-box strong {
        font-size:19px
    }
    .stat-label {
        font-size:7px
    }
    .hud-actions {
        gap:5px
    }
    .sound-btn {
        width:36px;
        height:36px;
        font-size:18px
    }
    .run-info {
        font-size:8px
    }
    .mission-panel {
        top:109px;
        font-size:9px;
        padding:8px 10px;
        line-height:1.8
    }
    .mission-panel .section-label {
        font-size:7px;
        margin-bottom:4px
    }
    .combo {
        top:109px;
        padding:8px 10px;
        min-width:76px
    }
    .combo strong {
        font-size:27px
    }
    .combo>span {
        font-size:6px
    }
    #turbo-container {
        top:209px;
        width:260px
    }
    #zone-banner {
        top:40%;
        font-size:11px;
        padding:10px 16px
    }
    .touch-controls {
        padding:16px 14px max(20px,env(safe-area-inset-bottom))
    }
    .ctrl-btn {
        width:48px;
        height:54px
    }
    .ctrl-btn-jump {
        width:88px
    }
    .touch-left-cluster,.touch-right-cluster {
        gap:7px
    }
    .modal-card {
        padding:28px 23px
    }
    .modal-card h2 {
        font-size:31px
    }
}
@media(max-height:700px) and (min-width:601px) {
    .menu-copy {
        transform:translateY(-40%)
    }
    h1 {
        font-size:78px
    }
    .intro {
        margin-top:16px
    }
    .menu-description {
        font-size:12px
    }
    .how-to {
        margin-top:20px;
        padding-top:14px
    }
    .menu-actions {
        margin:20px 0
    }
    .postcard {
        bottom:12%
    }
}
@media(max-height:720px) and (max-width:600px) {
    .site-header {
        padding-top:12px
    }
    .menu-copy {
        transform:translateY(-43%)
    }
    h1 {
        font-size:74px;
        margin:8px 0 16px
    }
    .intro {
        font-size:18px;
        margin-top:16px
    }
    .menu-description {
        font-size:11px
    }
    .menu-actions {
        margin:19px 0
    }
    .how-to {
        margin-top:21px;
        padding-top:14px
    }
    .controls-hint {
        margin-top:9px
    }
    .mobile-hint {
        font-size:9px;
        margin-top:10px
    }
    .menu-footer {
        padding-bottom:10px
    }
}
@media(max-height:500px) {
    .menu-screen {
        overflow-y:auto
    }
    .menu-copy {
        position:relative;
        top:auto;
        transform:none;
        margin:85px 0 65px
    }
    .menu-footer {
        position:fixed;
        background:#123e38
    }
    .postcard {
        display:none
    }
    .mission-panel {
        top:105px
    }
    .combo {
        top:105px
    }
    #turbo-container {
        top:105px
    }
    #zone-banner {
        top:52%
    }
    .modal-card {
        padding:20px
    }
    .modal-card h2 {
        margin:10px 0
    }
    .modal-card p {
        margin-bottom:12px
    }
    .result-score {
        padding:5px
    }
    .result-score strong {
        font-size:35px
    }
    .stats-grid {
        padding:12px 0
    }
    .modal-card .btn-primary {
        margin-top:12px
    }
}
@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior:auto!important;
        transition:none!important
    }
    #snow-canvas {
        display:none
    }
}
/* Keep the full menu inside laptop-height viewports. */
@media (min-width:601px) and (max-height:800px) {
    .menu-copy {
        top:51%;
        transform:translateY(-45%)
    }
    h1 {
        font-size:clamp(76px,7.4vw,100px);
        margin-bottom:20px
    }
    .intro {
        margin-top:20px
    }
    .how-to {
        margin-top:23px;
        padding-top:16px
    }
    .menu-actions {
        margin:22px 0
    }
    .mobile-hint {
        margin-top:10px
    }
    .menu-description {
        font-size:13px
    }
}
@media(max-width:600px) {
    h1 {
        font-size:clamp(54px,17.5vw,96px);
        white-space:nowrap;
        letter-spacing:-4px
    }
    .title-star {
        font-size:40px
    }
}
@media(max-width:360px) {
    .menu-actions {
        gap:14px
    }
    .menu-actions .btn-primary {
        width:auto;
        flex:1;
        padding:18px 14px;
        gap:10px;
        font-size:10px;
        white-space:nowrap
    }
    .best-record small {
        display:none
    }
    .best-record {
        grid-template-columns:auto
    }
    .menu-copy {
        top:48%
    }
}
@media(min-width:601px) and (max-height:800px) {
    .menu-copy {
        top:49%
    }
    .mobile-hint {
        display:none
    }
}