.field-game-section {
    background:
        radial-gradient(circle at 5% 4%, rgba(90, 158, 46, .14), transparent 30rem),
        linear-gradient(135deg, #eef4f7 0%, #f9fbfc 53%, #edf5e9 100%);
    overflow: hidden;
}

.field-game-heading {
    align-items: end;
    display: grid;
    gap: 60px;
    grid-template-columns: 1fr .8fr;
    margin-bottom: 35px;
}

.field-game-heading .eyebrow { margin-bottom: 12px; }

.field-game-heading h2 {
    color: var(--navy);
    font-size: clamp(40px, 5vw, 65px);
    letter-spacing: -.055em;
    line-height: .98;
    margin: 0;
}

.field-game-heading > p {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
    max-width: 540px;
}

.field-game-shell {
    background: var(--navy);
    border: 1px solid rgba(255, 255, 255, .12);
    border-left: 5px solid var(--yellow);
    border-radius: 3px;
    box-shadow: 16px 20px 0 rgba(16, 35, 62, .09);
    overflow: hidden;
}

.field-game-toolbar {
    align-items: center;
    background: linear-gradient(90deg, #081a30 0%, #0d315a 100%);
    color: #fff;
    display: grid;
    gap: 24px;
    grid-template-columns: auto minmax(250px, 1fr) auto auto auto;
    min-height: 68px;
    padding: 12px 20px;
}

.field-game-mission {
    align-items: center;
    display: flex;
    gap: 11px;
}

.field-game-mission-icon {
    align-items: center;
    background: var(--yellow);
    border-radius: 2px;
    color: var(--navy);
    display: flex;
    font-size: 16px;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.field-game-mission div,
.field-game-status {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.field-game-mission small,
.field-game-status span {
    color: #8db6df;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .14em;
}

.field-game-mission strong { font-size: 14px; }

.field-game-progress {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: auto 1fr 38px;
    margin-inline: auto;
    max-width: 560px;
    width: 100%;
}

.field-game-progress > span {
    color: #b8d2ec;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.field-game-progress progress {
    appearance: none;
    background: rgba(255, 255, 255, .13);
    border: 0;
    border-radius: 1px;
    height: 7px;
    overflow: hidden;
    width: 100%;
}

.field-game-progress progress::-webkit-progress-bar {
    background: rgba(255, 255, 255, .13);
    border-radius: 1px;
}

.field-game-progress progress::-webkit-progress-value {
    background: linear-gradient(90deg, var(--green), #84ca4e);
    border-radius: 1px;
    transition: width .2s linear;
}

.field-game-progress progress::-moz-progress-bar {
    background: linear-gradient(90deg, var(--green), #84ca4e);
    border-radius: 1px;
}

.field-game-shell.is-storm .field-game-toolbar {
    background: linear-gradient(90deg, #07111e 0%, #182d42 58%, #263b4c 100%);
}

.field-game-shell.is-storm .field-game-mission-icon {
    background: #dcecff;
    box-shadow: 0 0 16px rgba(190, 222, 255, .52);
    color: #15283c;
}

.field-game-shell.is-storm .field-game-progress progress::-webkit-progress-value {
    background: linear-gradient(90deg, #7eb5d8, #e7f5ff);
}

.field-game-shell.is-storm .field-game-progress progress::-moz-progress-bar {
    background: linear-gradient(90deg, #7eb5d8, #e7f5ff);
}

.field-game-shell.is-dew .field-game-toolbar {
    background: linear-gradient(90deg, #173449 0%, #456b73 58%, #789897 100%);
}

.field-game-shell.is-dew .field-game-mission-icon {
    background: #e9f5e5;
    box-shadow: 0 0 16px rgba(226, 244, 235, .45);
    color: #28534e;
}

.field-game-shell.is-dew .field-game-progress progress::-webkit-progress-value {
    background: linear-gradient(90deg, #a7d3c0, #f4f2c2);
}

.field-game-shell.is-dew .field-game-progress progress::-moz-progress-bar {
    background: linear-gradient(90deg, #a7d3c0, #f4f2c2);
}

.field-game-progress > strong {
    color: #fff;
    font-size: 11px;
    text-align: right;
}

.field-game-status { text-align: right; }

.field-game-status span b {
    color: #d8ebff;
    font-size: 9px;
    letter-spacing: 0;
}

.field-game-status strong {
    color: #ff8189;
    font-size: 13px;
    letter-spacing: .13em;
    margin-top: 3px;
}

.field-game-fullscreen {
    align-items: center;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 9px;
    font-weight: 850;
    gap: 7px;
    justify-content: center;
    min-height: 36px;
    padding: 7px 10px;
    white-space: nowrap;
}

.field-game-fullscreen:hover,
.field-game-fullscreen.is-active {
    background: var(--yellow);
    border-color: var(--yellow);
    color: var(--navy);
}

.field-game-fullscreen svg {
    fill: none;
    height: 16px;
    stroke: currentColor;
    stroke-linecap: square;
    stroke-linejoin: miter;
    stroke-width: 2;
    width: 16px;
}

.field-game-sound.is-active {
    background: rgba(90, 158, 46, .2);
    border-color: rgba(132, 202, 78, .75);
    color: #dff6ce;
}

.field-game-sound.is-active:hover {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

.field-game-sound .field-game-sound-muted { display: none; }

.field-game-sound:not(.is-active) .field-game-sound-wave { display: none; }

.field-game-sound:not(.is-active) .field-game-sound-muted { display: block; }

.field-game-shell.is-fullscreen,
.field-game-shell:fullscreen,
.field-game-shell:-webkit-full-screen {
    background: var(--navy);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    max-width: none;
    width: 100vw;
}

.field-game-shell.is-pseudo-fullscreen {
    inset: 0;
    position: fixed;
    z-index: 10000;
}

.field-game-shell.is-fullscreen .field-game-stage,
.field-game-shell:fullscreen .field-game-stage,
.field-game-shell:-webkit-full-screen .field-game-stage {
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
}

.field-game-shell.is-fullscreen .field-game-footer,
.field-game-shell:fullscreen .field-game-footer,
.field-game-shell:-webkit-full-screen .field-game-footer {
    display: none;
}

body.field-game-no-scroll { overflow: hidden; }

.field-game-page-celebration {
    contain: strict;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    z-index: 15000;
}

.field-game-page-celebration i {
    animation: field-game-confetti var(--duration) cubic-bezier(.16, .76, .24, 1) var(--delay) both;
    background: var(--color);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
    display: block;
    height: calc(var(--size) * .48);
    left: var(--x);
    position: absolute;
    top: 100%;
    width: var(--size);
    will-change: transform, opacity;
}

.field-game-page-celebration i:nth-child(3n) { border-radius: 50%; }

.field-game-page-celebration i:nth-child(4n) {
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.field-game-page-celebration .is-streamer {
    background: transparent;
    border-left: 4px solid var(--color);
    border-radius: 50%;
    box-shadow: none;
    height: var(--size);
    width: calc(var(--size) * .72);
}

@keyframes field-game-confetti {
    0% {
        opacity: 0;
        transform: translate3d(0, 8vh, 0) rotate(0deg) scale(.7);
    }
    8% { opacity: 1; }
    42% {
        opacity: 1;
        transform: translate3d(var(--crest), -112vh, 0) rotate(var(--turn)) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--drift), 10vh, 0) rotate(calc(var(--turn) + 720deg)) scale(.92);
    }
}

.field-game-stage {
    aspect-ratio: 16 / 9;
    background: #a8d9ee;
    isolation: isolate;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.field-game-stage canvas {
    display: block;
    height: 100%;
    outline: 0;
    touch-action: none;
    width: 100%;
}

.field-game-stage canvas:focus-visible {
    box-shadow: inset 0 0 0 4px rgba(242, 194, 48, .8);
}

.field-game-flash {
    background: rgba(242, 194, 48, .26);
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity .12s;
    z-index: 3;
}

.field-game-flash.show { opacity: 1; }

.field-game-lightning {
    background:
        radial-gradient(circle at 64% 12%, rgba(255, 255, 255, .96), rgba(199, 226, 255, .34) 30%, transparent 68%);
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity .05s;
    z-index: 4;
}

.field-game-lightning.show { opacity: .92; }

.field-game-windshield-hit {
    background:
        radial-gradient(ellipse at 52% 42%, rgba(37, 43, 43, .78) 0 1.5%, rgba(105, 113, 108, .48) 2%, transparent 7%),
        linear-gradient(34deg, transparent 48.8%, rgba(225, 237, 237, .68) 49.4% 50%, transparent 50.6%) 52% 42% / 31% 26% no-repeat,
        linear-gradient(146deg, transparent 49%, rgba(225, 237, 237, .58) 49.5% 50%, transparent 50.5%) 52% 42% / 36% 30% no-repeat;
    inset: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    z-index: 5;
}

.field-game-windshield-hit i {
    background: linear-gradient(90deg, #d4dde0, #687780);
    border-radius: 100% 0 100% 0;
    height: 8px;
    left: 52%;
    opacity: 0;
    position: absolute;
    top: 42%;
    width: 34px;
}

.field-game-windshield-hit i:nth-child(2) { width: 27px; }
.field-game-windshield-hit i:nth-child(3) { width: 22px; }

.field-game-windshield-hit.show {
    animation: field-game-windshield-flash 1.35s ease-out both;
}

.field-game-windshield-hit.show i:first-child {
    animation: field-game-feather-one 1.15s ease-out both;
}

.field-game-windshield-hit.show i:nth-child(2) {
    animation: field-game-feather-two 1.2s ease-out .04s both;
}

.field-game-windshield-hit.show i:nth-child(3) {
    animation: field-game-feather-three 1.1s ease-out .08s both;
}

@keyframes field-game-windshield-flash {
    0% { opacity: 0; }
    8% { opacity: 1; }
    38% { opacity: .82; }
    100% { opacity: 0; }
}

@keyframes field-game-feather-one {
    0% { opacity: 0; transform: translate(-10px, -8px) rotate(-20deg) scale(.4); }
    18% { opacity: .95; }
    100% { opacity: 0; transform: translate(125px, 72px) rotate(155deg) scale(1); }
}

@keyframes field-game-feather-two {
    0% { opacity: 0; transform: translate(7px, -4px) rotate(16deg) scale(.35); }
    20% { opacity: .9; }
    100% { opacity: 0; transform: translate(-112px, 92px) rotate(-130deg) scale(.92); }
}

@keyframes field-game-feather-three {
    0% { opacity: 0; transform: translate(0, 2px) rotate(4deg) scale(.4); }
    20% { opacity: .82; }
    100% { opacity: 0; transform: translate(38px, 126px) rotate(210deg) scale(.82); }
}

.field-game-notice {
    background: rgba(8, 27, 49, .88);
    border: 1px solid rgba(255, 255, 255, .2);
    border-left: 4px solid var(--yellow);
    border-radius: 2px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    left: 50%;
    opacity: 0;
    padding: 8px 13px;
    pointer-events: none;
    position: absolute;
    top: 15px;
    transform: translate(-50%, -10px);
    transition: opacity .2s, transform .2s;
    white-space: nowrap;
    z-index: 4;
}

.field-game-notice.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.field-game-countdown {
    align-items: center;
    background:
        radial-gradient(circle at 50% 42%, rgba(202, 229, 250, .17), transparent 25%),
        linear-gradient(90deg, rgba(4, 15, 28, .78), rgba(12, 34, 52, .54), rgba(4, 15, 28, .78));
    color: #fff;
    display: flex;
    flex-direction: column;
    inset: 0;
    justify-content: center;
    pointer-events: none;
    position: absolute;
    text-align: center;
    z-index: 5;
}

.field-game-countdown[hidden] { display: none; }

.field-game-countdown > span {
    border-bottom: 2px solid var(--yellow);
    color: #dcecff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .2em;
    padding-bottom: 7px;
}

.field-game-countdown > strong {
    color: var(--yellow);
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .38));
    font-size: clamp(92px, 15vw, 180px);
    font-weight: 950;
    letter-spacing: -.08em;
    line-height: .82;
    margin: 18px 0 13px;
    transform-origin: center;
}

.field-game-countdown > strong.is-pulse {
    animation: field-game-countdown-pulse .78s cubic-bezier(.18, .8, .2, 1);
}

.field-game-countdown > b {
    font-size: clamp(18px, 3vw, 34px);
    letter-spacing: .08em;
}

.field-game-countdown > small {
    color: #b9d3e7;
    font-size: 11px;
    font-weight: 750;
    margin-top: 7px;
}

.field-game-section.is-countdown .field-game-controls {
    opacity: .22;
    pointer-events: none;
}

@keyframes field-game-countdown-pulse {
    0% { opacity: 0; transform: scale(1.65); }
    32% { opacity: 1; transform: scale(.9); }
    52% { transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

.field-game-overlay {
    align-items: center;
    background: linear-gradient(90deg, rgba(5, 20, 37, .93), rgba(8, 33, 59, .76));
    color: #fff;
    display: flex;
    inset: 0;
    padding: clamp(28px, 6vw, 76px);
    position: absolute;
    z-index: 6;
}

.field-game-overlay[hidden] { display: none; }

.field-game-overlay-card { max-width: 570px; }

.field-game-overlay.is-victory {
    align-items: flex-end;
    background:
        linear-gradient(90deg, rgba(5, 20, 37, .94) 0%, rgba(8, 33, 59, .82) 38%, rgba(8, 33, 59, .12) 76%),
        linear-gradient(0deg, rgba(5, 20, 37, .72), transparent 46%);
}

.field-game-overlay.is-victory .field-game-overlay-card {
    max-width: 610px;
}

.field-game-congrats {
    align-items: center;
    background: var(--yellow);
    border-left: 6px solid var(--green);
    color: var(--navy);
    display: grid;
    gap: 0 10px;
    grid-template-columns: 34px 1fr;
    margin-bottom: 16px;
    max-width: 355px;
    padding: 9px 13px 9px 10px;
    transform: rotate(-1deg);
}

.field-game-congrats[hidden] { display: none; }

.field-game-congrats > span {
    align-items: center;
    background: var(--navy);
    color: var(--yellow);
    display: flex;
    font-size: 16px;
    grid-row: 1 / 3;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.field-game-congrats strong {
    font-size: 13px;
    letter-spacing: .12em;
    line-height: 1.1;
}

.field-game-congrats small {
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

.field-game-tag {
    align-items: center;
    color: #c5ddf5;
    display: flex;
    font-size: 10px;
    font-weight: 900;
    gap: 8px;
    letter-spacing: .13em;
}

.field-game-tag::before {
    background: var(--green);
    border-radius: 1px;
    box-shadow: 0 0 0 5px rgba(90, 158, 46, .18);
    content: "";
    height: 8px;
    width: 8px;
}

.field-game-overlay h3 {
    font-size: clamp(38px, 5vw, 64px);
    letter-spacing: -.055em;
    line-height: .96;
    margin: 18px 0 15px;
}

.field-game-overlay h3 span { color: var(--yellow); }

.field-game-overlay-card > p {
    color: rgba(255, 255, 255, .74);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 22px;
    max-width: 510px;
}

.field-game-obstacles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
}

.field-game-obstacles span {
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .14);
    border-left: 3px solid var(--yellow);
    border-radius: 2px;
    font-size: 10px;
    font-weight: 800;
    padding: 7px 11px;
}

.field-game-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.field-game-actions .button {
    min-height: 48px;
    padding-inline: 20px;
}

.field-game-start {
    background: var(--yellow);
    color: var(--navy);
}

.field-game-start:hover { background: #ffd852; }

.field-game-jingle {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 207, 32, .68);
    color: #fff;
    gap: 7px;
}

.field-game-jingle span {
    color: var(--yellow);
    font-size: 17px;
    line-height: 1;
}

.field-game-jingle b { font: inherit; }

.field-game-jingle:hover,
.field-game-jingle.is-playing {
    background: rgba(255, 207, 32, .18);
    border-color: var(--yellow);
}

.field-game-catalog {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .25);
    color: #fff;
}

.field-game-catalog:hover { background: rgba(255, 255, 255, .16); }

.field-game-quote {
    background: var(--green);
    color: #fff;
}

.field-game-quote:hover { background: var(--green-dark); }

.field-game-privacy-note {
    color: rgba(255, 255, 255, .6);
    font-size: 9px;
    line-height: 1.45;
    margin: 10px 0 0;
    max-width: 610px;
}

.field-game-score-form {
    background: rgba(255, 255, 255, .1);
    border-left: 4px solid var(--green);
    margin-top: 14px;
    max-width: 610px;
    padding: 12px;
}

.field-game-score-form[hidden] { display: none; }

.field-game-score-title {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
    margin: 0 0 7px;
    text-transform: uppercase;
}

.field-game-score-fields {
    display: grid;
    gap: 2px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field-game-score-fields input {
    background: #fff;
    border: 0;
    border-left: 3px solid var(--yellow);
    border-radius: 0;
    color: var(--navy);
    font: inherit;
    font-size: 13px;
    min-height: 42px;
    min-width: 0;
    padding: 8px 11px;
}

.field-game-score-fields input:focus {
    box-shadow: inset 0 0 0 2px var(--yellow);
    outline: 0;
}

.field-game-score-form button {
    background: var(--green);
    border: 0;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 900;
    padding: 8px 15px;
}

.field-game-score-form button:hover { background: var(--green-dark); }
.field-game-score-form button:disabled { cursor: wait; opacity: .62; }

.field-game-score-consent {
    align-items: flex-start;
    color: rgba(255, 255, 255, .76);
    cursor: pointer;
    display: flex;
    font-size: 8px;
    gap: 7px;
    line-height: 1.4;
    margin-top: 8px;
}

.field-game-score-consent input {
    accent-color: var(--yellow);
    flex: 0 0 auto;
    height: 14px;
    margin: 0;
    width: 14px;
}

.field-game-score-form small {
    color: rgba(255, 255, 255, .66);
    display: block;
    font-size: 9px;
    margin-top: 7px;
}

.field-game-score-form small.is-error { color: #ffb7b7; }
.field-game-score-form small.is-success { color: #c8f5aa; }

.field-game-controls {
    bottom: 12px;
    display: none;
    gap: 10px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    z-index: 5;
}

.field-game-section.is-playing .field-game-controls { display: flex; }

.field-game-controls button {
    align-items: center;
    backdrop-filter: blur(8px);
    background: rgba(7, 27, 49, .82);
    border: 2px solid rgba(255, 255, 255, .72);
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 25px;
    font-weight: 950;
    height: 58px;
    justify-content: center;
    width: 58px;
}

.field-game-controls .field-game-accelerate {
    background: linear-gradient(180deg, #6aa93c, #437f24);
    border-color: rgba(255, 255, 255, .85);
    border-radius: 3px;
    font-size: 9px;
    height: 58px;
    letter-spacing: .08em;
    padding-inline: 17px;
    width: auto;
}

.field-game-controls .field-game-accelerate.is-active {
    background: linear-gradient(180deg, #f4d04f, #d7a716);
    color: var(--navy);
    transform: translateY(2px);
}

.field-game-controls button:active {
    background: var(--blue);
    transform: scale(.94);
}

.field-game-footer {
    align-items: center;
    background: #fff;
    display: flex;
    gap: 30px;
    justify-content: space-between;
    padding: 17px 20px;
}

.field-game-footer p {
    color: var(--muted);
    font-size: 11px;
    margin: 0;
}

.field-game-footer > div {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: flex-end;
}

.field-game-footer > div span {
    align-items: center;
    color: var(--muted);
    display: flex;
    font-size: 10px;
    font-weight: 800;
    gap: 6px;
}

.field-game-footer i {
    border-radius: 4px;
    display: block;
    height: 11px;
    width: 11px;
}

.field-legend-animal { background: #f0eee4; border: 1px solid #636d72; }
.field-legend-water { background: #4b9eb8; border: 1px solid #31788d; }
.field-legend-branch { background: #725239; }
.field-legend-rock { background: #777d7c; }
.field-legend-goal { background: var(--blue); }

.field-game-safety {
    align-items: center;
    color: var(--muted);
    display: flex;
    font-size: 11px;
    gap: 9px;
    justify-content: center;
    margin: 18px auto 0;
    text-align: center;
}

.field-game-safety span {
    align-items: center;
    background: #e7f3e1;
    border-radius: 2px;
    color: var(--green-dark);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 9px;
    font-weight: 900;
    height: 20px;
    justify-content: center;
    width: 20px;
}

.field-ranking {
    background: #fff;
    border-top: 4px solid var(--blue);
    box-shadow: 9px 11px 0 rgba(16, 35, 62, .06);
    margin-top: 32px;
    padding: 25px 28px 28px;
}

.field-ranking > header {
    align-items: center;
    display: flex;
    gap: 28px;
    justify-content: space-between;
    margin-bottom: 19px;
}

.field-ranking-heading {
    min-width: 0;
}

.field-ranking .eyebrow {
    font-size: 9px;
    margin-bottom: 5px;
}

.field-ranking h3 {
    color: var(--navy);
    font-size: 26px;
    letter-spacing: -.035em;
    line-height: 1;
    margin: 0;
}

.field-ranking > header p {
    color: var(--muted);
    font-size: 11px;
    margin: 7px 0 0;
}

.field-ranking-period {
    align-items: stretch;
    background: #0b4ea2;
    border-bottom: 4px solid var(--yellow);
    color: #fff;
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: 36px minmax(190px, 1fr) 36px;
    min-width: 290px;
}

.field-ranking-period > div {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 52px;
    padding: 6px 12px;
    text-align: center;
}

.field-ranking-period span {
    color: #ffde00;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .09em;
    line-height: 1.25;
}

.field-ranking-period strong {
    font-size: 12px;
    line-height: 1.35;
    margin-top: 3px;
}

.field-ranking-period button {
    background: rgba(255, 255, 255, .08);
    border: 0;
    color: #fff;
    cursor: pointer;
    font-size: 17px;
    font-weight: 900;
    transition: background-color .18s ease, color .18s ease;
}

.field-ranking-period button:hover:not(:disabled) {
    background: var(--yellow);
    color: var(--navy);
}

.field-ranking-period button:focus-visible {
    box-shadow: inset 0 0 0 3px #fff;
    outline: 0;
}

.field-ranking-period button:disabled {
    cursor: default;
    opacity: .3;
}

.field-ranking-list {
    counter-reset: field-rank;
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.field-ranking-list li {
    align-items: center;
    background: #f4f7f9;
    border-left: 3px solid #d8e1e8;
    counter-increment: field-rank;
    display: grid;
    gap: 10px;
    grid-template-columns: 30px minmax(0, 1fr) auto auto;
    min-height: 44px;
    padding: 7px 12px;
}

.field-ranking-list li::before {
    color: var(--blue);
    content: counter(field-rank, decimal-leading-zero);
    font-size: 11px;
    font-weight: 950;
}

.field-ranking-list li:nth-child(-n + 3) {
    background: #fff9dc;
    border-left-color: var(--yellow);
}

.field-ranking-list li:nth-child(-n + 3)::before { color: #9b7400; }

.field-ranking-name {
    color: var(--navy);
    font-size: 12px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-ranking-time {
    color: var(--muted);
    font-size: 9px;
    font-variant-numeric: tabular-nums;
}

.field-ranking-score {
    color: var(--green-dark);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 950;
}

.field-ranking-list .field-ranking-empty {
    color: var(--muted);
    font-size: 11px;
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 16px;
}

.field-ranking-list .field-ranking-empty::before { display: none; }

.field-game-trademark {
    color: #7b8995;
    font-size: 9px;
    line-height: 1.5;
    margin: 18px auto 0;
    max-width: 720px;
    text-align: center;
}

@media (pointer: fine) and (min-width: 821px) {
    .field-game-section.is-playing .field-game-controls { display: none; }
}

@media (max-width: 840px) {
    .field-game-heading {
        align-items: start;
        gap: 15px;
        grid-template-columns: 1fr;
    }

    .field-game-heading > p { max-width: 650px; }
    .field-game-toolbar { grid-template-columns: auto 1fr auto auto auto; }
    .field-game-progress > span { display: none; }
    .field-game-progress { grid-template-columns: 1fr 35px; }
}

@media (max-width: 620px) {
    .field-game-section { padding-block: 62px; }
    .field-game-heading { margin-bottom: 22px; }
    .field-game-heading h2 { font-size: 38px; }
    .field-game-heading > p { font-size: 13px; line-height: 1.55; }
    .field-game-shell { border-radius: 2px; box-shadow: 7px 9px 0 rgba(16, 35, 62, .09); }
    .field-game-toolbar { gap: 8px; min-height: 54px; padding: 9px 10px; }
    .field-game-mission-icon { height: 30px; width: 30px; }
    .field-game-mission small { display: none; }
    .field-game-mission strong { font-size: 11px; }
    .field-game-progress { min-width: 74px; }
    .field-game-progress > strong { font-size: 9px; }
    .field-game-status span { display: none; }
    .field-game-status strong { font-size: 10px; }
    .field-game-fullscreen { height: 32px; min-height: 32px; padding: 5px 7px; width: 34px; }
    .field-game-fullscreen span { display: none; }
    .field-game-fullscreen svg { height: 15px; width: 15px; }
    .field-game-overlay { padding: 12px 15px; }
    .field-game-overlay.is-victory {
        align-items: center;
        background: linear-gradient(90deg, rgba(5, 20, 37, .94), rgba(8, 33, 59, .76));
        padding: 6px 10px;
    }
    .field-game-overlay-card { max-width: 100%; }
    .field-game-congrats { margin-bottom: 7px; max-width: 280px; padding-block: 5px; }
    .field-game-congrats > span { height: 26px; width: 26px; }
    .field-game-congrats strong { font-size: 9px; }
    .field-game-congrats small { font-size: 6px; }
    .field-game-tag { font-size: 7px; }
    .field-game-overlay.is-victory .field-game-tag { display: none; }
    .field-game-tag::before { box-shadow: 0 0 0 3px rgba(90, 158, 46, .18); height: 6px; width: 6px; }
    .field-game-overlay h3 { font-size: 25px; line-height: .98; margin: 7px 0 8px; }
    .field-game-overlay.is-victory h3 { font-size: 20px; margin: 3px 0 5px; }
    .field-game-overlay-card > p { display: none; }
    .field-game-obstacles { gap: 5px; margin-bottom: 9px; }
    .field-game-obstacles span { font-size: 8px; padding: 4px 7px; }
    .field-game-actions {
        display: grid;
        gap: 6px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .field-game-start { grid-column: 1 / -1; }
    .field-game-actions .button { flex: 1; font-size: 9px; min-height: 35px; padding: 6px 8px; white-space: nowrap; }
    .field-game-score-form { margin-top: 5px; padding: 5px; }
    .field-game-score-title { display: none; }
    .field-game-score-fields { gap: 2px; }
    .field-game-score-fields input { font-size: 9px; min-height: 30px; padding: 5px 7px; }
    .field-game-score-form button { font-size: 8px; padding-inline: 10px; }
    .field-game-score-form small { display: none; }
    .field-game-score-consent { font-size: 6px; gap: 5px; line-height: 1.25; margin-top: 4px; }
    .field-game-score-consent input { height: 12px; width: 12px; }
    .field-game-privacy-note { font-size: 6px; line-height: 1.25; margin-top: 4px; }
    .field-game-controls { bottom: 6px; gap: 8px; }
    .field-game-controls button { font-size: 19px; height: 41px; width: 41px; }
    .field-game-controls .field-game-accelerate { font-size: 7px; height: 41px; padding-inline: 11px; }
    .field-game-notice { font-size: 8px; max-width: calc(100% - 24px); overflow: hidden; padding: 6px 9px; text-overflow: ellipsis; top: 7px; }
    .field-game-countdown > span { font-size: 7px; }
    .field-game-countdown > strong { font-size: clamp(76px, 25vw, 120px); margin-block: 12px 9px; }
    .field-game-countdown > b { font-size: 16px; }
    .field-game-countdown > small { font-size: 8px; }
    .field-game-footer { align-items: flex-start; flex-direction: column; gap: 9px; padding: 12px 14px; }
    .field-game-footer > div { gap: 12px; }
    .field-game-shell.is-fullscreen .field-game-footer { display: none; }
    .field-game-safety { align-items: flex-start; font-size: 10px; text-align: left; }
    .field-ranking { margin-top: 23px; padding: 19px 15px 20px; }
    .field-ranking > header { align-items: stretch; flex-direction: column; gap: 13px; margin-bottom: 14px; }
    .field-ranking h3 { font-size: 23px; }
    .field-ranking-period { grid-template-columns: 34px minmax(0, 1fr) 34px; min-width: 0; width: 100%; }
    .field-ranking-period > div { min-height: 48px; }
    .field-ranking-period span { font-size: 7px; }
    .field-ranking-period strong { font-size: 11px; }
    .field-ranking-list { grid-template-columns: 1fr; }
    .field-ranking-list li { min-height: 41px; }
}

@media (prefers-reduced-motion: reduce) {
    .field-game-progress progress::-webkit-progress-value { transition: none; }
}