.emma-jump {
    --emma-jump-purple: #6948bd;
    --emma-jump-deep: #493174;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    overflow: hidden;
    overflow-anchor: none;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
}

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

.emma-jump__inner {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.emma-jump__stage {
    position: relative;
    width: 100%;
    height: 190px;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: #3f3157;
    cursor: pointer;
    touch-action: pan-y;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    transition: height .2s ease;
}

.emma-jump__stage.is-game-over { height: 280px; }

.emma-jump__stage:focus,
.emma-jump__stage:focus-visible { border: 0; outline: 0; box-shadow: none; }

.emma-jump__canvas {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
}

.emma-jump__score {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 12px;
    color: #655a72;
    font: 800 10px/1 "Nunito Sans", Arial, sans-serif;
    letter-spacing: .09em;
}

.emma-jump__score strong {
    min-width: 27px;
    color: var(--emma-jump-purple);
    font: inherit;
    font-variant-numeric: tabular-nums;
}

.emma-jump__coins {
    position: absolute;
    z-index: 2;
    top: 8px;
    right: 82px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #8a6b14;
    font: 900 10px/1 "Nunito Sans", Arial, sans-serif;
    font-variant-numeric: tabular-nums;
}
.emma-jump__coins i { display: inline-block; width: 13px; height: 13px; border: 2px solid #e7a51e; border-radius: 50%; background: #ffd75a; box-shadow: inset 0 0 0 2px #fff09a; }
.emma-jump__stage.is-game-over > .emma-jump__coins { opacity: 0; }

.emma-jump__message {
    position: absolute;
    z-index: 2;
    top: 43%;
    left: 50%;
    display: flex;
    min-width: 190px;
    padding: 3px 9px;
    align-items: center;
    flex-direction: column;
    color: #655a72;
    font-family: "Nunito Sans", Arial, sans-serif;
    line-height: 1.2;
    text-align: center;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: opacity .18s ease, transform .18s ease;
}

.emma-jump__message strong {
    color: var(--emma-jump-deep);
    font-size: 15px;
    font-weight: 900;
}

.emma-jump__message span {
    margin-top: 3px;
    font-size: 10px;
    font-weight: 700;
}

.emma-jump__message.is-hidden {
    opacity: 0;
    transform: translate(-50%, -45%);
}

.emma-jump__hint--desktop { display: none; }

.emma-jump__stage.is-game-over .emma-jump__message {
    padding: 3px 9px;
    background: transparent;
    text-shadow: 0 1px 0 rgba(255,255,255,.72);
}

.emma-jump__stage.is-game-over > .emma-jump__score { opacity: 0; }

.emma-jump__game-over[hidden],
.emma-jump__leaderboard[hidden],
.emma-jump__score-form[hidden] { display: none !important; }

.emma-jump__game-over {
    position: absolute;
    z-index: 4;
    top: 5px;
    left: calc(50% + 32px);
    display: grid;
    width: min(270px, calc(100% - 80px));
    min-height: 220px;
    padding: 5px 10px 4px;
    align-content: center;
    color: #51445f;
    background: radial-gradient(ellipse at center, rgba(255,255,255,.96) 0, rgba(251,248,255,.88) 58%, rgba(251,248,255,0) 82%);
    font-family: "Nunito Sans", Arial, sans-serif;
    text-align: center;
    pointer-events: auto;
    transform: translateX(-50%);
}

.emma-jump__game-over-summary {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
    line-height: 1;
}

.emma-jump__game-over-summary strong {
    color: var(--emma-jump-deep);
    font-size: 14px;
    font-weight: 900;
}

.emma-jump__game-over-summary span {
    color: #8a7c98;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
}

.emma-jump__game-over-summary b {
    color: var(--emma-jump-purple);
    font-size: 16px;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

.emma-jump__score-form { margin-top: 6px; }
.emma-jump__score-form.is-auto-saving > label,
.emma-jump__score-form.is-auto-saving > div { display: none; }
.emma-jump__score-form.is-auto-saving small { margin: 7px 0 5px; color: #6c5a7d; }
.emma-jump__score-form label {
    display: block;
    margin-bottom: 4px;
    color: #5d4b71;
    font-size: 10px;
    font-weight: 900;
}

.emma-jump__score-fields {
    display: grid;
    grid-template-columns: minmax(64px,.72fr) minmax(88px,1.12fr) auto;
    gap: 5px;
}

.emma-jump__score-form input {
    width: 100%;
    min-width: 0;
    height: 28px;
    padding: 0 9px;
    border: 1px solid rgba(105,72,189,.28);
    border-radius: 5px;
    outline: none;
    background: rgba(255,255,255,.94);
    color: #41364c;
    font: 800 11px/1 "Nunito Sans", Arial, sans-serif;
    user-select: text;
    -webkit-user-select: text;
}

.emma-jump__score-form input:focus { border-color: var(--emma-jump-purple); }
.emma-jump__score-form > div button {
    height: 28px;
    padding: 0 7px;
    border: 0;
    border-radius: 5px;
    background: var(--emma-jump-purple);
    color: #fff;
    font: 900 8px/1 "Nunito Sans", Arial, sans-serif;
    text-transform: uppercase;
    cursor: pointer;
}

.emma-jump__score-form > div button:disabled { opacity: .55; cursor: wait; }
.emma-jump__score-form small {
    display: block;
    min-height: 11px;
    margin-top: 2px;
    color: #bd3f58;
    font-size: 8px;
    font-weight: 800;
    line-height: 1.2;
}

.emma-jump__replay {
    margin: 0;
    padding: 1px 3px;
    border: 0;
    background: transparent;
    color: var(--emma-jump-purple);
    font: 900 9px/1.2 "Nunito Sans", Arial, sans-serif;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.emma-jump__full-board { display: inline-block; margin-left: 9px; color: #78658d; font-size: 8px; font-weight: 900; text-decoration: none; }

.emma-jump__leaderboard > strong {
    display: block;
    margin-bottom: 3px;
    color: var(--emma-jump-deep);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .04em;
}

.emma-jump__leaderboard ol {
    width: min(235px, 100%);
    margin: 0 auto 3px;
    padding: 0;
    list-style: none;
    counter-reset: emma-jump-rank;
}

.emma-jump__leaderboard li {
    display: grid;
    min-height: 14px;
    align-items: center;
    grid-template-columns: 15px minmax(0, 1fr) auto;
    gap: 4px;
    color: #655a72;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
    text-align: left;
}

.emma-jump__leaderboard li::before { content: attr(data-rank) "."; color: #9b8aa9; }
.emma-jump__leaderboard li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emma-jump__leaderboard li b { color: var(--emma-jump-deep); font-size: 9px; font-variant-numeric: tabular-nums; }
.emma-jump__leaderboard li.is-current {
    margin: 0 -4px;
    padding: 0 4px;
    border-radius: 3px;
    background: rgba(255,215,90,.33);
    color: var(--emma-jump-deep);
}

.emma-jump__stage.is-reduced-motion { cursor: default; }
.emma-jump__stage.is-reduced-motion .emma-jump__message { top: 45%; }

@media (min-width: 801px) {
    .emma-jump__stage { height: 220px; }
    .emma-jump__stage.is-game-over { height: 310px; }
    .emma-jump__hint--touch { display: none; }
    .emma-jump__hint--desktop { display: inline; }
    .emma-jump__message strong { font-size: 17px; }
    .emma-jump__message span { font-size: 11px; }
    .emma-jump__score { top: 14px; right: 20px; font-size: 11px; }
    .emma-jump__coins { top: 12px; right: 96px; font-size: 11px; }
    .emma-jump__game-over { top: 20px; left: 50%; width: 360px; min-height: 250px; padding-right: 20px; padding-left: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .emma-jump__message, .emma-jump__stage { transition: none; }
}