/* ---------- RenRace ---------- */
.title.orange {
    color: #ffb347;
    text-shadow: 4px 4px 0 #7a4a00, 0 0 24px rgba(0, 0, 0, 0.5);
}

.game.ren {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Side-scrolling scene. --scroll is the distance in px, --gap the distance to the chaser. */
.track {
    position: relative;
    height: 180px;
    overflow: hidden;
    border: 4px solid #1f1f1f;
    box-shadow: inset 0 0 0 2px #5a5a5a, 0 12px 30px rgba(0, 0, 0, 0.4);
    background: linear-gradient(#6aa0dd, #a9d1f5 70%, #5d9e3a 70%);
}

.track.danger {
    animation: danger-pulse 0.6s ease-in-out infinite alternate;
}

@keyframes danger-pulse {
    from { box-shadow: inset 0 0 0 2px #5a5a5a, 0 0 0 rgba(255, 0, 0, 0); }
    to { box-shadow: inset 0 0 0 4px #ff3b3b, 0 0 24px rgba(255, 59, 59, 0.7); }
}

.track .layer {
    position: absolute;
    left: 0;
    right: 0;
}

.track .clouds {
    top: 10px;
    height: 50px;
    background:
        radial-gradient(ellipse 34px 14px at 40px 25px, #fff 98%, transparent),
        radial-gradient(ellipse 26px 12px at 180px 15px, #fff 98%, transparent),
        radial-gradient(ellipse 40px 16px at 320px 30px, #fff 98%, transparent);
    background-size: 420px 50px;
    background-position-x: calc(var(--scroll) * -0.2);
    opacity: 0.9;
}

.track .hills {
    bottom: 54px;
    height: 60px;
    background:
        radial-gradient(ellipse 120px 60px at 100px 60px, #4d8a33 98%, transparent),
        radial-gradient(ellipse 160px 50px at 300px 60px, #3f7a2a 98%, transparent);
    background-size: 460px 60px;
    background-position-x: calc(var(--scroll) * -0.5);
}

.track .ground {
    bottom: 0;
    height: 54px;
    background:
        linear-gradient(#5d9e3a 0 12px, #8b5a2b 12px),
        var(--tex) 0 0 / 27px 27px;
    background-size: 100% 100%, 27px 27px;
    background-position-x: 0, calc(var(--scroll) * -1);
    border-top: 3px solid #7cc04f;
    image-rendering: pixelated;
}

.runner-pos {
    position: absolute;
    left: 58%;
    bottom: 54px;
}

.runner {
    display: grid;
    grid-template-columns: repeat(8, 6px);
    grid-auto-rows: 6px;
    image-rendering: pixelated;
    filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.35));
}

.runner i { display: block; }
.runner i.h { background: #6b3e1e; }
.runner i.s { background: #f1c27d; }
.runner i.e { background: #1c1c1c; }
.runner i.t { background: #3b82f6; }
.runner i.p { background: #2d3a8c; }
.runner i.b { background: #333; }

.chaser {
    position: absolute;
    bottom: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: left 0.12s linear;
    filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.35));
}

.chaser-body {
    width: 30px;
    height: 34px;
    background: var(--tex) 0 0 / 50% 50%, #3fa83f;
    border-top: 2px solid #2d7a2d;
    position: relative;
}

.chaser-body::after {
    content: "";
    position: absolute;
    left: -4px;
    right: -4px;
    bottom: -8px;
    height: 8px;
    background: linear-gradient(90deg, #2d7a2d 0 35%, transparent 35% 65%, #2d7a2d 65%);
}

.toast {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 14px;
    font-family: var(--font-pixel);
    font-size: 12px;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #fff;
    white-space: nowrap;
    animation: pop 0.25s ease-out;
}

.toast.good { color: var(--green-light); }
.toast.bad { color: #ff7a7a; }

.gap-bar {
    height: 14px;
    background: #222;
    border: 2px solid #555;
}

.gap-fill {
    height: 100%;
    background: var(--green);
    transition: width 0.12s linear;
}

.gap-fill.warn { background: #e0a020; }
.gap-fill.danger { background: var(--red); }

.game.ren .question-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

@media (max-width: 760px) {
    .track {
        height: 150px;
    }

    .runner {
        grid-template-columns: repeat(8, 5px);
        grid-auto-rows: 5px;
    }
}