:root {
    --sdc-navy: #102a43;
    --sdc-navy-2: #173f5f;
    --sdc-mint: #73d7bd;
    --sdc-mint-pale: #e6faf4;
    --sdc-coral: #f17868;
    --sdc-cream: #fffaf0;
    --sdc-gold: #ffd66b;
    --sdc-ink: #102a43;
    --sdc-white: #fff;
}
.sdc-page,
.sdc-page * {
    box-sizing: border-box;
}
.sdc-page {
    min-height: 100vh;
    padding: 0 0 60px;
    color: var(--sdc-ink);
    background:
        radial-gradient(circle at 12% 5%, #d7fff2 0 10%, transparent 31%),
        linear-gradient(145deg, #fffaf0, #edf8f5);
    font-family: 'Fredoka', system-ui, sans-serif;
    overflow: hidden;
}
.sdc-page button,
.sdc-page input {
    font: inherit;
}
.sdc-page button,
.sdc-page a {
    touch-action: manipulation;
}
.sdc-page :focus-visible {
    outline: 4px solid var(--sdc-gold);
    outline-offset: 3px;
}
.sdc-page [hidden] {
    display: none !important;
}
.sdc-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    max-width: 1120px;
    margin: auto;
    padding: 14px 22px;
}
.sdc-back {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--sdc-navy);
    font-weight: 800;
    text-decoration: none;
}
.sdc-counters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.sdc-counters span {
    padding: 7px 12px;
    border: 1px solid #bdddd4;
    border-radius: 999px;
    background: #ffffffcc;
    font-size: 0.78rem;
    font-weight: 700;
}
.sdc-counters strong {
    color: #b94337;
    font-variant-numeric: tabular-nums;
}
.sdc-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.9fr);
    align-items: center;
    gap: 42px;
    max-width: 1120px;
    margin: 0 auto 20px;
    padding: 42px;
    border-radius: 32px;
    background: linear-gradient(125deg, var(--sdc-navy), #1d5365);
    box-shadow: 0 22px 60px #102a4326;
    color: #fff;
}
.sdc-kicker {
    margin: 0 0 8px;
    color: #27735f;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.sdc-hero .sdc-kicker {
    color: var(--sdc-mint);
}
.sdc-hero h1 {
    margin: 0 0 14px;
    color: #fff;
    font-size: clamp(2.7rem, 6vw, 5.1rem);
    line-height: 0.9;
    letter-spacing: -0.06em;
}
.sdc-hero h1 span {
    display: block;
    color: var(--sdc-coral);
}
.sdc-hero p:last-child {
    max-width: 570px;
    margin: 0;
    color: #e6f8f3;
    font-size: 1.05rem;
    line-height: 1.65;
}
.sdc-stadium {
    display: block;
    width: 100%;
    filter: drop-shadow(0 15px 25px #061a2888);
}
.sdc-setup,
.sdc-arena,
.sdc-finish-card,
.sdc-help {
    width: min(900px, calc(100% - 32px));
    margin: 20px auto;
    padding: clamp(20px, 4vw, 34px);
    border: 1px solid #cfe2dc;
    border-radius: 24px;
    background: #ffffffed;
    box-shadow: 0 14px 38px #1b4b4612;
}
.sdc-setup {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 20px;
}
.sdc-setup-copy {
    grid-column: 1/-1;
}
.sdc-setup > .sdc-primary {
    grid-column: 1/-1;
    justify-self: center;
}
.sdc-setup h2,
.sdc-arena h2,
.sdc-finish-card h2,
.sdc-help h2 {
    margin: 0 0 8px;
    color: var(--sdc-navy);
    font-size: clamp(1.45rem, 3vw, 2rem);
}
.sdc-setup p {
    margin: 0;
    line-height: 1.55;
}
.sdc-mode {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    padding: 0;
    border: 0;
}
.sdc-mode legend {
    margin-bottom: 6px;
    font-size: 0.75rem;
    font-weight: 800;
}
.sdc-mode label {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 7px 10px;
    border: 1px solid #badbd1;
    border-radius: 12px;
    background: var(--sdc-mint-pale);
    font-size: 0.82rem;
    font-weight: 700;
}
.sdc-mode input {
    width: 20px;
    height: 20px;
    accent-color: #18745f;
}
.sdc-example-panel {
    grid-column: 1/-1;
    padding: 16px;
    border: 1px solid #c5e3d9;
    border-left: 5px solid var(--sdc-mint);
    border-radius: 16px;
    background: #f2fcf8;
}
.sdc-example-panel h3 {
    margin: 0 0 10px;
    color: var(--sdc-navy);
    font-size: 1.12rem;
}
.sdc-example-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 8px;
}
.sdc-example-list p {
    padding: 10px 12px;
    border-radius: 11px;
    background: #fff;
    line-height: 1.45;
}
.sdc-example-list strong {
    color: var(--sdc-navy-2);
}
.sdc-setup .sdc-verbal-prompt {
    margin-top: 10px;
    color: #355b55;
    font-weight: 700;
}
.sdc-primary,
.sdc-action,
.sdc-pause,
.sdc-direction button {
    min-height: 46px;
    border: 0;
    border-radius: 13px;
    cursor: pointer;
    font-weight: 850;
}
.sdc-primary {
    padding: 11px 18px;
    background: linear-gradient(135deg, var(--sdc-coral), #d85246);
    box-shadow: 0 7px 0 #a73b32;
    color: #fff;
}
.sdc-primary:active {
    transform: translateY(4px);
    box-shadow: 0 3px 0 #a73b32;
}
.sdc-arena {
    position: relative;
}
.sdc-arena-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.sdc-arena-head p:last-child {
    max-width: 620px;
    margin: 0;
    line-height: 1.55;
}
.sdc-pause {
    flex: 0 0 auto;
    padding: 9px 15px;
    border: 2px solid var(--sdc-navy);
    background: #fff;
    color: var(--sdc-navy);
}
.sdc-pause[aria-pressed='true'] {
    background: var(--sdc-gold);
}
.sdc-scene {
    color: #102a43;
    position: relative;
    min-height: 380px;
    padding: 24px;
    border: 5px solid #fff;
    border-radius: 23px;
    background: linear-gradient(#bcebea 0 42%, #73d7bd 42% 100%);
    box-shadow:
        inset 0 0 0 2px #16485c,
        0 12px 28px #102a4321;
    overflow: hidden;
}
.sdc-scene::before {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0 70px, #ffffff10 70px 140px);
    content: '';
    pointer-events: none;
}
.sdc-football,
.sdc-basket,
.sdc-hurdles,
.sdc-archery,
.sdc-tennis,
.sdc-bowling {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: end;
    gap: 16px;
    min-height: 325px;
}
.sdc-goal {
    position: relative;
    width: min(480px, 94%);
    height: 182px;
    /* The ball rests below the net; reserve that visible space before controls. */
    margin: auto auto 66px;
    border: 9px solid #fff;
    border-bottom: 4px solid #fff;
    background:
        repeating-linear-gradient(45deg, #ffffff55 0 2px, transparent 2px 23px),
        repeating-linear-gradient(-45deg, #ffffff55 0 2px, transparent 2px 23px);
    box-shadow: 0 8px 0 #194c50;
}
.sdc-goal[aria-hidden='true'] {
    pointer-events: none;
}
.sdc-keeper {
    position: absolute;
    left: 50%;
    bottom: 12px;
    font-size: 4.4rem;
    transform: translateX(-50%);
    transition: left 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sdc-ball {
    position: absolute;
    left: 50%;
    bottom: -66px;
    font-size: 2.7rem;
    transform: translateX(-50%);
    transition:
        left 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
        bottom 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 0.45s;
}
.sdc-direction {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 520px;
    margin: auto;
}
.sdc-direction button {
    padding: 8px 9px;
    border: 2px solid #d4eae4;
    background: #fff;
    color: var(--sdc-navy);
}
.sdc-direction button[aria-pressed='true'] {
    border-color: var(--sdc-coral);
    background: #fff0ed;
}
.sdc-meter-wrap {
    display: grid;
    grid-template-columns: 75px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: min(560px, 100%);
    margin: auto;
    font-size: 0.78rem;
    font-weight: 850;
}
.sdc-meter {
    position: relative;
    height: 18px;
    border: 3px solid #fff;
    border-radius: 999px;
    background: linear-gradient(90deg, #f17868 0 28%, #73d7bd 28% 72%, #f17868 72%);
    box-shadow: 0 2px 5px #102a4338;
}
.sdc-meter i {
    position: absolute;
    left: 42%;
    top: -3px;
    width: 16%;
    height: 18px;
    background: #fff5a066;
}
.sdc-meter b {
    position: absolute;
    top: -8px;
    left: 0;
    width: 7px;
    height: 28px;
    border-radius: 5px;
    background: var(--sdc-navy);
    transform: translateX(-50%);
}
.sdc-action {
    width: min(340px, 100%);
    margin: auto;
    padding: 10px 18px;
    background: var(--sdc-navy);
    color: #fff;
    box-shadow: 0 6px 0 #081d2d;
}
.sdc-action:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}
.sdc-action kbd {
    margin-left: 8px;
    padding: 2px 6px;
    border: 1px solid #ffffff88;
    border-radius: 5px;
    background: #ffffff1c;
    color: #fff;
    font: inherit;
    font-size: 0.7rem;
}
.sdc-court {
    position: relative;
    height: 212px;
    border-bottom: 5px solid #d9a169;
    background: linear-gradient(165deg, transparent 0 58%, #ffffff55 58% 60%, transparent 60%);
}
.sdc-hoop {
    position: absolute;
    right: 14%;
    top: 42px;
    width: 80px;
    color: var(--sdc-coral);
    font-family: serif;
    font-size: 6rem;
    line-height: 0.35;
    transform: rotateX(65deg);
}
.sdc-hoop::before {
    position: absolute;
    right: -12px;
    top: -70px;
    width: 12px;
    height: 110px;
    background: #fff;
    content: '';
}
.sdc-basket-ball {
    position: absolute;
    left: 12%;
    bottom: 3px;
    font-size: 3rem;
    transform: translate(0, 0) rotate(0);
    will-change: transform;
}
.sdc-basket-ball:is(.is-flight, .is-short, .is-long) {
    transform: translate(var(--flight-x), var(--flight-y)) rotate(620deg);
    animation: sdc-ball-flight 0.9s ease-in-out both;
}
@keyframes sdc-ball-flight {
    0% {
        transform: translate(0, 0) rotate(0);
    }
    50% {
        transform: translate(var(--flight-mid-x), var(--flight-apex)) rotate(300deg);
    }
    100% {
        transform: translate(var(--flight-x), var(--flight-y)) rotate(620deg);
    }
}
.sdc-arc {
    position: absolute;
    left: 17%;
    bottom: 25px;
    width: 66%;
    height: 150px;
    border-top: 3px dashed #ffffffa0;
    border-radius: 50%;
}
.sdc-power {
    background: linear-gradient(
        90deg,
        #f17868 0 30%,
        #ffd66b 30% 43%,
        #73d7bd 43% 64%,
        #ffd66b 64% 77%,
        #f17868 77%
    );
}
.sdc-track {
    position: relative;
    height: 230px;
    border: 4px solid #fff;
    border-radius: 90% 25px 20px 90%;
    background: repeating-linear-gradient(0deg, #d95e4f 0 42px, #fff 42px 46px);
    overflow: hidden;
}
.sdc-runner {
    position: absolute;
    z-index: 3;
    left: 5%;
    bottom: 42px;
    font-size: 3.3rem;
    transition:
        left 0.38s linear,
        transform 0.24s ease;
}
.sdc-runner.is-jump {
    transform: translateY(-58px) rotate(-8deg);
}
.sdc-hurdle {
    position: absolute;
    bottom: 42px;
    color: #fff;
    font-size: 3rem;
    font-weight: 900;
}
.sdc-hurdle.h1 {
    left: 30%;
}
.sdc-hurdle.h2 {
    left: 54%;
}
.sdc-hurdle.h3 {
    left: 77%;
}
.sdc-finish {
    position: absolute;
    right: 2%;
    top: 5px;
    bottom: 5px;
    width: 25px;
    color: #fff;
    font-size: 0.55rem;
    font-weight: 900;
    line-height: 1;
    writing-mode: vertical-rl;
}
.sdc-rhythm {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 26px;
    border-radius: 13px;
    background: #ffffffaa;
    overflow: hidden;
}
.sdc-rhythm span {
    border-right: 1px solid #5c9283;
}
.sdc-rhythm i {
    position: absolute;
    top: 3px;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--sdc-coral);
    box-shadow: 0 0 0 4px #fff;
}
.sdc-feedback {
    min-height: 52px;
    margin: 16px 0 0;
    padding: 12px 15px;
    border-radius: 13px;
    background: var(--sdc-mint-pale);
    font-weight: 750;
    line-height: 1.45;
}
.sdc-feedback:empty {
    visibility: hidden;
}
.sdc-feedback.is-great {
    color: #12634e;
    background: #dbf8ef;
}
.sdc-feedback.is-miss {
    color: #8b342c;
    background: #fff0ed;
}
.sdc-verbal-result {
    margin: 8px 0 0;
    padding: 10px 13px;
    border-left: 4px solid var(--sdc-coral);
    border-radius: 8px;
    background: #fff7e8;
    color: #553d1a;
    line-height: 1.45;
}
.sdc-next {
    display: block;
    margin: 14px auto 0;
}
.sdc-finish-card {
    text-align: center;
}
.sdc-medal {
    display: block;
    font-size: 4.5rem;
}
.sdc-finish-card p:not(.sdc-kicker) {
    line-height: 1.65;
}
.sdc-help {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}
.sdc-help h2,
.sdc-privacy {
    grid-column: 1/-1;
}
.sdc-help div {
    padding: 15px;
    border-radius: 15px;
    background: #eef9f6;
}
.sdc-help strong,
.sdc-help span {
    display: block;
}
.sdc-help span {
    margin-top: 5px;
    font-size: 0.84rem;
    line-height: 1.5;
}
.sdc-privacy {
    margin: 0;
    color: #4e6861;
    font-size: 0.78rem;
    text-align: center;
}
.sdc-page.is-paused .sdc-scene::after {
    position: absolute;
    z-index: 9;
    inset: 0;
    display: grid;
    place-items: center;
    background: #102a43dd;
    color: #fff;
    font-size: 2rem;
    font-weight: 900;
    content: 'PAUSE';
}
.sdc-page.is-paused .sdc-scene {
    pointer-events: none;
}
@media (max-width: 760px) {
    .sdc-hero {
        grid-template-columns: 1fr;
        width: calc(100% - 24px);
        padding: 28px 24px;
    }
    .sdc-stadium {
        max-height: 210px;
    }
    .sdc-setup {
        grid-template-columns: 1fr;
    }
    .sdc-mode {
        flex-wrap: wrap;
    }
    .sdc-help {
        grid-template-columns: 1fr;
    }
    .sdc-help h2,
    .sdc-privacy {
        grid-column: auto;
    }
    .sdc-scene {
        min-height: 350px;
        padding: 16px 10px;
    }
    .sdc-counters span {
        padding: 6px 8px;
    }
    .sdc-counters {
        gap: 4px;
    }
    .sdc-topbar {
        align-items: flex-start;
        padding: 10px 14px;
    }
    .sdc-direction button {
        font-size: 0.78rem;
    }
    .sdc-goal {
        height: 165px;
    }
    .sdc-court {
        height: 200px;
    }
}
@media (max-width: 360px) {
    .sdc-topbar {
        display: grid;
    }
    .sdc-counters {
        justify-content: flex-start;
    }
    .sdc-hero {
        padding: 24px 18px;
    }
    .sdc-hero h1 {
        font-size: 2.65rem;
    }
    .sdc-setup,
    .sdc-arena,
    .sdc-finish-card,
    .sdc-help {
        width: calc(100% - 20px);
        padding: 17px;
    }
    .sdc-arena-head {
        display: grid;
    }
    .sdc-pause {
        justify-self: end;
    }
    .sdc-meter-wrap {
        grid-template-columns: 62px minmax(0, 1fr);
    }
    .sdc-scene {
        padding: 14px 7px;
    }
    .sdc-direction {
        gap: 4px;
    }
    .sdc-direction button {
        padding: 6px 3px;
        font-size: 0.7rem;
    }
    .sdc-action kbd {
        display: none;
    }
    .sdc-runner {
        font-size: 2.8rem;
    }
    .sdc-hurdle {
        font-size: 2.5rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .sdc-page *,
    .sdc-page ::before,
    .sdc-page ::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}
[data-theme='dark'] .sdc-page {
    --sdc-ink: #e9fff8;
    background: #091e2d;
    color: var(--sdc-ink);
}
[data-theme='dark'] .sdc-page :is(.sdc-setup, .sdc-arena, .sdc-finish-card, .sdc-help) {
    border-color: #38655b;
    background: #112f3b;
}
[data-theme='dark'] .sdc-example-panel {
    border-color: #38655b;
    background: #173d45;
}
[data-theme='dark'] .sdc-example-list p {
    background: #112f3b;
}
[data-theme='dark'] .sdc-example-list strong,
[data-theme='dark'] .sdc-example-panel h3 {
    color: #e9fff8;
}
[data-theme='dark'] .sdc-page .sdc-verbal-prompt {
    color: #c6e5dc;
}
[data-theme='dark'] .sdc-page .sdc-verbal-result {
    border-color: var(--sdc-gold);
    background: #3a3425;
    color: #fff3ce;
}
[data-theme='dark'] .sdc-page :is(h2, .sdc-back) {
    color: #e9fff8;
}
[data-theme='dark'] .sdc-counters span {
    border-color: #38655b;
    background: #112f3b;
}
[data-theme='dark'] .sdc-help div {
    background: #173d45;
}
[data-theme='dark'] .sdc-mode label {
    border-color: #38655b;
    background: #173d45;
}
[data-theme='dark'] .sdc-page .sdc-kicker {
    color: #8de9cf;
}
[data-theme='dark'] .sdc-page .sdc-privacy {
    color: #c6e5dc;
}
[data-theme='dark'] .sdc-page .sdc-counters strong {
    color: #ffb4a8;
}
.sdc-arena-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
.sdc-archery-field {
    position: relative;
    display: grid;
    grid-template-columns: minmax(190px, 270px) minmax(90px, 1fr);
    align-items: end;
    justify-content: center;
    gap: clamp(18px, 7vw, 90px);
    width: min(650px, 100%);
    margin: auto;
}
.sdc-target-wrap {
    position: relative;
    width: min(270px, 100%);
    aspect-ratio: 1;
    border-radius: 50%;
    filter: drop-shadow(0 12px 12px #102a4340);
    cursor: crosshair;
    touch-action: none;
}
.sdc-target {
    display: block;
    width: 100%;
    height: 100%;
}
.sdc-sight {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 31px;
    height: 31px;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow:
        0 0 0 2px #102a43,
        0 2px 8px #102a4380;
    transform: translate(-50%, -50%);
}
.sdc-sight::before,
.sdc-sight::after {
    position: absolute;
    background: #102a43;
    content: '';
}
.sdc-sight::before {
    left: 50%;
    top: -9px;
    width: 2px;
    height: 43px;
}
.sdc-sight::after {
    left: -9px;
    top: 50%;
    width: 43px;
    height: 2px;
}
.sdc-arrow-impact {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    color: #102a43;
    font-size: 2.2rem;
    text-shadow: 0 2px 2px #fff;
    transform: translate(-18%, -75%) rotate(-42deg) scale(0);
}
.sdc-arrow-impact.is-hit {
    transform: translate(-18%, -75%) rotate(-42deg) scale(1);
}
.sdc-bow {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 180px;
    padding-bottom: 10px;
}
.sdc-bow span {
    font-size: clamp(4.6rem, 11vw, 7rem);
    filter: drop-shadow(0 8px 4px #102a4330);
}
.sdc-bow i {
    position: absolute;
    left: 8%;
    top: 42%;
    color: #102a43;
    font-size: 2.6rem;
    font-style: normal;
    opacity: 0;
}
.sdc-bow i.is-flying {
    animation: sdc-arrow-flight 0.62s cubic-bezier(0.2, 0.72, 0.3, 1) both;
}
@keyframes sdc-arrow-flight {
    0% {
        opacity: 1;
        transform: translate(0, 0) rotate(-10deg);
    }
    55% {
        opacity: 1;
        transform: translate(var(--arrow-mid-x), var(--arrow-mid-y)) rotate(-14deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--arrow-x), var(--arrow-y)) rotate(-18deg);
    }
}
.sdc-wind {
    position: absolute;
    z-index: 5;
    top: 2px;
    right: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 6px 10px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #173f5fe8;
    color: #fff;
    font-size: 0.75rem;
}
.sdc-wind span {
    color: #8de9cf;
    font-size: 1.25rem;
    transform: rotate(var(--wind-angle, 0deg));
}
.sdc-aim-controls {
    display: grid;
    grid-template-columns: repeat(5, minmax(44px, auto));
    gap: 6px;
    width: min(420px, 100%);
    margin: 0 auto;
}
.sdc-aim-controls button {
    min-height: 44px;
    border: 2px solid #c5e1d9;
    border-radius: 11px;
    background: #fff;
    color: #102a43;
    cursor: pointer;
    font-weight: 900;
}
.sdc-aim-status {
    min-height: 1.3em;
    margin: -7px 0 -5px;
    color: #173f5f;
    font-size: 0.76rem;
    font-weight: 750;
    text-align: center;
}
.sdc-archery-power {
    background: linear-gradient(
        90deg,
        #f17868 0 36%,
        #73d7bd 36% 65%,
        #ffd66b 65% 78%,
        #f17868 78%
    );
}
.sdc-archery-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 170px));
    justify-content: center;
    gap: 9px;
}
[data-theme='dark'] .sdc-page .sdc-aim-status {
    color: #173f5f;
}
@media (max-width: 560px) {
    .sdc-archery-field {
        grid-template-columns: minmax(0, 1fr) 45px;
        gap: 4px;
        padding-top: 40px;
    }
    .sdc-bow span {
        font-size: 3rem;
    }
    .sdc-wind {
        top: -6px;
        font-size: 0.66rem;
    }
    .sdc-aim-controls {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
    }
    .sdc-aim-controls [data-aim='up'] {
        grid-column: 2;
    }
    .sdc-aim-controls [data-aim='left'] {
        grid-column: 1;
        grid-row: 2;
    }
    .sdc-aim-controls [data-aim='center'] {
        grid-column: 2;
        grid-row: 2;
    }
    .sdc-aim-controls [data-aim='right'] {
        grid-column: 3;
        grid-row: 2;
    }
    .sdc-aim-controls [data-aim='down'] {
        grid-column: 2;
        grid-row: 3;
    }
}
.sdc-tennis {
    align-content: center;
}
.sdc-tennis-score {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sdc-tennis-score span {
    min-height: 32px;
    padding: 6px 11px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #173f5fe8;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 750;
}
.sdc-tennis-score strong {
    color: #9ff1db;
    font-variant-numeric: tabular-nums;
}
.sdc-tennis-court {
    position: relative;
    width: min(560px, 100%);
    height: 275px;
    margin: auto;
    border: 6px solid #f8f4df;
    border-radius: 16px 16px 38px 38px;
    background: linear-gradient(90deg, #3aa487 0 49.5%, #eaf9f4 49.5% 50.5%, #3aa487 50.5%);
    box-shadow:
        inset 0 0 0 2px #17634f,
        0 12px 20px #102a4333;
    overflow: hidden;
    touch-action: none;
}
.sdc-tennis-lines::before,
.sdc-tennis-lines::after,
.sdc-tennis-lines span,
.sdc-tennis-lines i {
    position: absolute;
    z-index: 1;
    background: #f8f4df;
    content: '';
}
.sdc-tennis-lines::before {
    top: 50%;
    right: 0;
    left: 0;
    height: 4px;
    box-shadow: 0 4px 4px #102a4355;
}
.sdc-tennis-lines::after {
    top: 20%;
    bottom: 20%;
    left: 16%;
    width: 3px;
}
.sdc-tennis-lines span {
    top: 20%;
    right: 16%;
    bottom: 20%;
    width: 3px;
}
.sdc-tennis-lines i {
    top: 20%;
    right: 16%;
    left: 16%;
    height: 3px;
    box-shadow: 0 162px #f8f4df;
}
.sdc-tennis-player,
.sdc-tennis-opponent {
    position: absolute;
    z-index: 3;
    left: 50%;
    width: 24%;
    height: 13px;
    border: 3px solid #fff;
    border-radius: 999px;
    background: #173f5f;
    box-shadow: 0 5px 0 #102a4344;
    transform: translate(-50%, -50%);
}
.sdc-tennis-player {
    top: 86%;
    background: #f17868;
}
.sdc-tennis-opponent {
    top: 12%;
}
.sdc-tennis-ball {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 18%;
    width: 18px;
    height: 18px;
    border: 2px solid #65750c;
    border-radius: 50%;
    background: #e7f65b;
    box-shadow: 0 3px 7px #102a4370;
    transform: translate(-50%, -50%);
}
.sdc-tennis-ball::after {
    position: absolute;
    inset: 3px -2px;
    border: 1px solid #fff;
    border-width: 0 2px;
    border-radius: 50%;
    content: '';
    transform: rotate(35deg);
}
.sdc-tennis-controls {
    display: grid;
    grid-template-columns: minmax(80px, 150px) minmax(120px, 190px) minmax(80px, 150px);
    justify-content: center;
    gap: 8px;
}
.sdc-tennis-controls > button:not(.sdc-action) {
    min-height: 46px;
    border: 2px solid #c5e1d9;
    border-radius: 13px;
    background: #fff;
    color: #102a43;
    cursor: pointer;
    font-weight: 850;
}
@media (max-width: 420px) {
    .sdc-tennis-court {
        height: 235px;
        border-width: 4px;
    }
    .sdc-tennis-lines i {
        box-shadow: 0 138px #f8f4df;
    }
    .sdc-tennis-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }
    .sdc-tennis-controls #sdc-tennis-serve {
        grid-column: 1/-1;
        grid-row: 1;
        width: 100%;
    }
}
.sdc-bowling {
    align-content: center;
}
.sdc-bowling-score {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sdc-bowling-score span {
    min-height: 32px;
    padding: 6px 11px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #173f5fe8;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 750;
}
.sdc-bowling-score strong {
    color: #9ff1db;
    font-variant-numeric: tabular-nums;
}
.sdc-bowling-lane {
    position: relative;
    width: min(440px, 100%);
    height: 300px;
    margin: auto;
    border: 7px solid #754a30;
    border-radius: 26px 26px 10px 10px;
    background: repeating-linear-gradient(90deg, #e8bb75 0 32px, #f2cc8c 32px 64px);
    box-shadow:
        inset 0 0 0 3px #fff4d4aa,
        0 12px 22px #102a4338;
    overflow: hidden;
    touch-action: none;
}
.sdc-bowling-lane::before,
.sdc-bowling-lane::after {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    width: 7%;
    background: linear-gradient(#294c69, #112b42);
    content: '';
}
.sdc-bowling-lane::before {
    left: 0;
}
.sdc-bowling-lane::after {
    right: 0;
}
.sdc-lane-marks {
    position: absolute;
    right: 18%;
    bottom: 25%;
    left: 18%;
    display: flex;
    justify-content: space-around;
}
.sdc-lane-marks i {
    width: 0;
    height: 0;
    border-right: 5px solid transparent;
    border-bottom: 13px solid #754a30;
    border-left: 5px solid transparent;
}
.sdc-pins {
    position: absolute;
    z-index: 3;
    top: 12px;
    left: 50%;
    width: min(210px, 58%);
    height: 105px;
    transform: translateX(-50%);
}
.sdc-pins span {
    position: absolute;
    left: var(--pin-x);
    top: var(--pin-y);
    width: 16px;
    height: 37px;
    border: 2px solid #cfd6d7;
    border-radius: 46% 46% 35% 35%;
    background: linear-gradient(#fff 0 27%, #ef6f62 27% 38%, #fff 38% 100%);
    box-shadow: 0 4px 4px #102a4338;
    transform: translateX(-50%);
    transform-origin: center bottom;
    transition:
        transform 0.38s ease,
        opacity 0.38s ease;
}
.sdc-pins span.is-down {
    opacity: 0.35;
    transform: translateX(-50%) rotate(78deg) translateY(7px);
}
.sdc-pins [data-pin='0'] {
    --pin-x: 50%;
    --pin-y: 65%;
}
.sdc-pins [data-pin='1'] {
    --pin-x: 41%;
    --pin-y: 43%;
}
.sdc-pins [data-pin='2'] {
    --pin-x: 59%;
    --pin-y: 43%;
}
.sdc-pins [data-pin='3'] {
    --pin-x: 32%;
    --pin-y: 21%;
}
.sdc-pins [data-pin='4'] {
    --pin-x: 50%;
    --pin-y: 21%;
}
.sdc-pins [data-pin='5'] {
    --pin-x: 68%;
    --pin-y: 21%;
}
.sdc-pins [data-pin='6'] {
    --pin-x: 23%;
    --pin-y: 0%;
}
.sdc-pins [data-pin='7'] {
    --pin-x: 41%;
    --pin-y: 0%;
}
.sdc-pins [data-pin='8'] {
    --pin-x: 59%;
    --pin-y: 0%;
}
.sdc-pins [data-pin='9'] {
    --pin-x: 77%;
    --pin-y: 0%;
}
.sdc-bowling-ball {
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 88%;
    width: 38px;
    height: 38px;
    border: 2px solid #081d2d;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #526e94, #173f5f 62%, #0c2133);
    box-shadow: 0 7px 8px #102a4355;
    transform: translate(-50%, -50%) rotate(var(--ball-spin, 0deg));
}
.sdc-bowling-ball i {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #061825;
}
.sdc-bowling-ball i:nth-child(1) {
    left: 13px;
    top: 8px;
}
.sdc-bowling-ball i:nth-child(2) {
    left: 21px;
    top: 10px;
}
.sdc-bowling-ball i:nth-child(3) {
    left: 17px;
    top: 17px;
}
.sdc-bowling-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 135px));
    justify-content: center;
    gap: 7px;
}
.sdc-bowling-controls button {
    min-height: 44px;
    border: 2px solid #c5e1d9;
    border-radius: 12px;
    background: #fff;
    color: #102a43;
    cursor: pointer;
    font-weight: 850;
}
.sdc-bowling-power {
    background: linear-gradient(
        90deg,
        #f17868 0 28%,
        #ffd66b 28% 48%,
        #73d7bd 48% 72%,
        #ffd66b 72% 84%,
        #f17868 84%
    );
}
@media (max-width: 420px) {
    .sdc-bowling-lane {
        height: 255px;
        border-width: 5px;
    }
    .sdc-bowling-controls {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
    }
    .sdc-bowling-controls button {
        padding: 5px 2px;
        font-size: 0.72rem;
    }
}