.whrd-game,
.whrd-game * {
    box-sizing: border-box;
}

.whrd-game {
    --whrd-ink: #0f1c16;
    --whrd-green: #0f6038;
    --whrd-green-deep: #0a3b24;
    --whrd-red: #ec5b64;
    --whrd-card: rgba(255,255,255,.92);
    --whrd-line: rgba(17, 28, 21, .10);
    --whrd-shadow: 0 20px 60px rgba(10, 20, 15, .18);
    position: relative;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 24px;
    min-height: min(980px, 96vh);
    background:
        radial-gradient(circle at 10% 0%, rgba(17, 100, 56, .75), transparent 25%),
        radial-gradient(circle at 88% 0%, rgba(103, 180, 255, .35), transparent 24%),
        linear-gradient(180deg, #d4f1ff 0%, #dff3d1 42%, #bed3a3 100%);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--whrd-ink);
    overflow: hidden;
}

.whrd-panel,
.whrd-brand-panel,
.whrd-message {
    background: var(--whrd-card);
    border: 1px solid var(--whrd-line);
    border-radius: 28px;
    box-shadow: var(--whrd-shadow);
    backdrop-filter: blur(12px);
}

.whrd-hud {
    position: absolute;
    inset: 22px 24px auto 24px;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(290px, 430px) 1fr;
    gap: 18px;
    align-items: start;
    pointer-events: none;
}

.whrd-hud > * {
    pointer-events: auto;
}

.whrd-brand-panel {
    padding: 26px 26px 18px;
    border: 3px solid rgba(15, 96, 56, .8);
}

.whrd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: #0d1c15;
    color: #fff;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 14px;
}

.whrd-title {
    margin: 18px 0 14px;
    font-size: clamp(52px, 5vw, 92px) !important;
    line-height: .92 !important;
    letter-spacing: -.06em !important;
    font-weight: 1000 !important;
    color: #0d1c15 !important;
}

.whrd-title span {
    color: var(--whrd-green);
}

.whrd-subtitle {
    margin: 0;
    font-size: clamp(16px, 1.45vw, 18px);
    line-height: 1.52;
    font-weight: 700;
    color: rgba(15, 28, 22, .72);
}

.whrd-controls-panel {
    margin-top: 22px;
    border: 1px solid rgba(15, 28, 22, .12);
    border-radius: 20px;
    padding: 18px;
    background: rgba(255,255,255,.72);
}

.whrd-controls-title {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 14px;
    font-weight: 900;
    color: var(--whrd-green);
    margin-bottom: 12px;
}

.whrd-control-icons {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 14px;
    align-items: center;
    justify-content: start;
}

.whrd-keycap {
    min-width: 96px;
    text-align: center;
    padding: 14px 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, #f7f3e8, #d7d3c4);
    border: 2px solid rgba(15,28,22,.25);
    box-shadow: inset 0 -4px 0 rgba(15,28,22,.15);
    font-weight: 900;
    font-size: 18px;
}

.whrd-control-or {
    font-weight: 900;
    text-transform: uppercase;
    color: rgba(15, 28, 22, .72);
}

.whrd-mouse-icon {
    width: 58px;
    height: 82px;
    border-radius: 30px;
    border: 2px solid rgba(15,28,22,.34);
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(241,239,230,.95));
}

.whrd-mouse-icon span {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 22px;
    border-radius: 99px;
    background: rgba(15,28,22,.6);
}

.whrd-control-labels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 800;
    color: rgba(15,28,22,.74);
}

.whrd-round-strip {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0 0;
}

.whrd-round-box small {
    display: block;
    font-size: 13px;
    letter-spacing: .08em;
    font-weight: 900;
    color: rgba(15,28,22,.72);
}

.whrd-round-box strong {
    display: block;
    font-size: 54px;
    line-height: .9;
    font-weight: 1000;
}

.whrd-life-icons {
    display: flex;
    gap: 12px;
}

.whrd-life-icons span {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, #fff 0 58%, transparent 59%),
        linear-gradient(45deg, transparent 0 42%, #d93f49 43% 46%, transparent 47% 53%, #d93f49 54% 57%, transparent 58%),
        linear-gradient(-45deg, transparent 0 42%, #d93f49 43% 46%, transparent 47% 53%, #d93f49 54% 57%, transparent 58%),
        #fff;
    box-shadow: inset 0 0 0 2px rgba(15,28,22,.18);
}

.whrd-stat-bar {
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(6, minmax(100px, 1fr));
    gap: 12px;
}

.whrd-stat {
    background: rgba(255,255,255,.95);
    border: 1px solid rgba(15,28,22,.08);
    border-radius: 22px;
    padding: 14px 16px;
    min-height: 120px;
}

.whrd-stat-wide {
    min-width: 0;
}

.whrd-label {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 900;
    font-size: 13px;
    color: rgba(15,28,22,.58);
    margin-bottom: 10px;
}

.whrd-value {
    font-size: clamp(36px, 3.4vw, 56px);
    line-height: .92;
    font-weight: 1000;
    letter-spacing: -.05em;
}

.whrd-outs {
    color: #d53f3f;
}

.whrd-value-pitch {
    font-size: clamp(28px, 2.5vw, 44px);
}

.whrd-field {
    position: relative;
    height: min(98vh, 980px);
    border-radius: 32px;
    overflow: hidden;
    background: linear-gradient(180deg, #70bbff 0%, #9fd6ff 25%, #c5cf94 25.1%, #afc57b 31%, #705e4b 39%, #5f4937 42%, #3f3d3a 42.1%, #4d4a47 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}

.whrd-sky,
.whrd-sun,
.whrd-cloud,
.whrd-cityline,
.whrd-building,
.whrd-pole,
.whrd-wire,
.whrd-fence,
.whrd-car,
.whrd-hydrant,
.whrd-banner,
.whrd-graffiti,
.whrd-street-sign,
.whrd-road-markings,
.whrd-perspective-road,
.whrd-scorebug,
.whrd-pitchbug,
.whrd-pitcher,
.whrd-batter,
.whrd-ball,
.whrd-hitball,
.whrd-float-text,
.whrd-countdown,
.whrd-strike-zone,
.whrd-zone-label,
.whrd-launch-glow,
.whrd-plate,
.whrd-batter-box {
    position: absolute;
}

.whrd-sun {
    right: 14%;
    top: 8%;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,231,152,.95) 0%, rgba(255,212,82,.9) 56%, rgba(255,212,82,0) 70%);
    filter: blur(.2px);
    opacity: .75;
}

.whrd-cloud {
    background: rgba(255,255,255,.9);
    border-radius: 999px;
    filter: blur(.4px);
}

.whrd-cloud:before,
.whrd-cloud:after {
    content: "";
    position: absolute;
    background: inherit;
    border-radius: inherit;
}

.whrd-cloud-one {
    width: 130px;
    height: 34px;
    top: 12%;
    left: 42%;
}

.whrd-cloud-one:before { width: 52px; height: 52px; left: 12px; top: -22px; }
.whrd-cloud-one:after { width: 58px; height: 58px; right: 14px; top: -26px; }

.whrd-cloud-two {
    width: 92px;
    height: 28px;
    top: 8%;
    right: 8%;
}

.whrd-cloud-two:before { width: 44px; height: 44px; left: 9px; top: -17px; }
.whrd-cloud-two:after { width: 40px; height: 40px; right: 10px; top: -15px; }

.whrd-cityline {
    left: 50%;
    transform: translateX(-50%);
    top: 18%;
    width: 36%;
    height: 15%;
    background:
        linear-gradient(90deg,
            transparent 0 4%, rgba(58,69,83,.4) 4% 7%, transparent 7% 10%, rgba(58,69,83,.45) 10% 13%, transparent 13% 18%,
            rgba(58,69,83,.42) 18% 23%, transparent 23% 28%, rgba(58,69,83,.5) 28% 33%, transparent 33% 39%,
            rgba(58,69,83,.42) 39% 45%, transparent 45% 49%, rgba(58,69,83,.55) 49% 54%, transparent 54% 58%,
            rgba(58,69,83,.42) 58% 63%, transparent 63% 68%, rgba(58,69,83,.44) 68% 74%, transparent 74% 79%,
            rgba(58,69,83,.48) 79% 84%, transparent 84% 100%);
    clip-path: polygon(0 100%, 0 68%, 6% 68%, 6% 43%, 11% 43%, 11% 62%, 18% 62%, 18% 22%, 24% 22%, 24% 58%, 30% 58%, 30% 38%, 35% 38%, 35% 55%, 41% 55%, 41% 20%, 47% 20%, 47% 0, 51% 0, 51% 35%, 58% 35%, 58% 50%, 64% 50%, 64% 28%, 70% 28%, 70% 61%, 76% 61%, 76% 18%, 82% 18%, 82% 60%, 90% 60%, 90% 48%, 96% 48%, 96% 70%, 100% 70%, 100% 100%);
    opacity: .65;
}

.whrd-building {
    bottom: 42%;
    width: 20%;
    height: 34%;
    background:
        repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 2px, transparent 2px 60px),
        linear-gradient(180deg, #6f5037, #4a3428);
}

.whrd-building:before,
.whrd-building:after {
    content: "";
    position: absolute;
    inset: 14% 14% auto 14%;
    height: 56%;
    background:
        repeating-linear-gradient(90deg, transparent 0 8%, rgba(25,14,10,.22) 8% 10%, transparent 10% 26%),
        repeating-linear-gradient(180deg, transparent 0 15%, rgba(25,14,10,.22) 15% 18%, transparent 18% 34%),
        linear-gradient(180deg, rgba(240,190,110,.65), rgba(255,217,162,.18));
}

.whrd-building-left { left: 0; clip-path: polygon(0 10%, 78% 10%, 78% 0, 100% 0, 100% 100%, 0 100%); }
.whrd-building-right { right: 0; width: 24%; clip-path: polygon(0 0, 100% 0, 100% 100%, 16% 100%, 16% 40%, 0 40%); background: linear-gradient(180deg, #6a4632, #452d23); }

.whrd-pole {
    left: 35.4%;
    bottom: 42%;
    width: 10px;
    height: 48%;
    background: linear-gradient(180deg, #65452f, #8b6c55, #4a3325);
}

.whrd-wire {
    height: 2px;
    background: rgba(45,35,30,.65);
    transform-origin: left center;
}

.whrd-wire-one { left: 35.8%; top: 10%; width: 32%; transform: rotate(9deg); }
.whrd-wire-two { left: 35.8%; top: 13%; width: 40%; transform: rotate(5deg); }

.whrd-street-sign {
    left: 36.3%;
    top: 10.8%;
    background: linear-gradient(180deg, #235d3a, #183a25);
    color: #eef9f0;
    font-weight: 900;
    letter-spacing: .03em;
    padding: 10px 14px;
    border-radius: 6px;
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.whrd-sign-top { transform: rotate(-1.5deg); }
.whrd-sign-bottom { top: 16.8%; transform: rotate(-2deg); }

.whrd-fence {
    bottom: 42%;
    height: 24%;
    width: 16%;
    background:
        linear-gradient(90deg, transparent 0 10%, rgba(199,207,211,.58) 10% 11%, transparent 11% 20%, rgba(199,207,211,.58) 20% 21%, transparent 21% 30%, rgba(199,207,211,.58) 30% 31%, transparent 31% 40%, rgba(199,207,211,.58) 40% 41%, transparent 41% 50%, rgba(199,207,211,.58) 50% 51%, transparent 51% 60%, rgba(199,207,211,.58) 60% 61%, transparent 61% 70%, rgba(199,207,211,.58) 70% 71%, transparent 71% 80%, rgba(199,207,211,.58) 80% 81%, transparent 81% 90%, rgba(199,207,211,.58) 90% 91%, transparent 91%),
        linear-gradient(45deg, transparent 0 46%, rgba(199,207,211,.48) 46% 48%, transparent 48% 52%, rgba(199,207,211,.48) 52% 54%, transparent 54%),
        linear-gradient(-45deg, transparent 0 46%, rgba(199,207,211,.48) 46% 48%, transparent 48% 52%, rgba(199,207,211,.48) 52% 54%, transparent 54%);
    opacity: .9;
}

.whrd-fence-left { left: 11.5%; }
.whrd-fence-right { right: 9%; width: 18%; }

.whrd-graffiti {
    right: 3%;
    bottom: 60%;
    font-size: clamp(56px, 4.2vw, 92px);
    font-weight: 1000;
    color: rgba(245, 230, 205, .75);
    transform: rotate(-8deg);
    text-shadow: 5px 5px 0 rgba(42,42,42,.45);
    letter-spacing: -.07em;
}

.whrd-banner {
    right: 6%;
    bottom: 46%;
    background: linear-gradient(180deg, #1b6a41, #14432b);
    color: #eff9f2;
    font-weight: 900;
    padding: 24px 18px;
    border-radius: 10px;
    text-align: center;
    font-size: clamp(24px, 2vw, 34px);
    line-height: 1.02;
    box-shadow: 0 12px 26px rgba(0,0,0,.22);
}

.whrd-car {
    bottom: 45.8%;
    width: 90px;
    height: 26px;
    border-radius: 12px 20px 10px 10px;
    background: #202224;
    box-shadow: inset 0 -8px 0 rgba(255,255,255,.06);
}

.whrd-car:before,
.whrd-car:after {
    content: "";
    position: absolute;
    bottom: -8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1d1d1d;
    box-shadow: inset 0 0 0 4px #d6d6d6;
}

.whrd-car:before { left: 12px; }
.whrd-car:after { right: 12px; }
.whrd-car-left { left: 45%; transform: scale(.8); }
.whrd-car-right { right: 15%; width: 120px; background: #9d4333; }

.whrd-hydrant {
    right: 15.2%;
    bottom: 42.8%;
    width: 20px;
    height: 44px;
    background: #c64a24;
    border-radius: 10px 10px 4px 4px;
}

.whrd-hydrant:before,
.whrd-hydrant:after {
    content: "";
    position: absolute;
    background: #c64a24;
}

.whrd-hydrant:before { width: 34px; height: 10px; left: -7px; top: 12px; border-radius: 10px; }
.whrd-hydrant:after { width: 12px; height: 12px; left: 4px; top: -6px; border-radius: 50%; }

.whrd-road-markings {
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 45%;
    transform: translateX(-50%);
    background:
        linear-gradient(90deg, transparent 0 12%, rgba(255,255,255,.16) 12% 12.25%, transparent 12.25% 88%, rgba(255,255,255,.16) 88% 88.25%, transparent 88.25%),
        linear-gradient(180deg, transparent 0 12%, rgba(255,255,255,.12) 12% 12.25%, transparent 12.25% 24%, rgba(255,255,255,.12) 24% 24.25%, transparent 24.25% 36%, rgba(255,255,255,.12) 36% 36.25%, transparent 36.25% 48%, rgba(255,255,255,.12) 48% 48.25%, transparent 48.25% 60%, rgba(255,255,255,.12) 60% 60.25%, transparent 60.25% 72%, rgba(255,255,255,.12) 72% 72.25%, transparent 72.25%);
    opacity: .42;
}

.whrd-perspective-road {
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 58%;
    transform: translateX(-50%);
    background:
        radial-gradient(circle at 50% 20%, rgba(255,255,255,.18), transparent 30%),
        linear-gradient(90deg, transparent 0 49.4%, rgba(255,232,144,.45) 49.4% 49.9%, transparent 49.9% 50.1%, rgba(255,232,144,.45) 50.1% 50.6%, transparent 50.6% 100%);
    clip-path: polygon(34% 0, 66% 0, 100% 100%, 0 100%);
    opacity: .6;
}

.whrd-scorebug {
    left: 28px;
    top: 18%;
    width: 150px;
    padding: 18px 16px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 16px 32px rgba(0,0,0,.18);
    text-transform: uppercase;
    z-index: 3;
}

.whrd-scorebug strong {
    display: block;
    font-size: 20px;
    line-height: .95;
    letter-spacing: -.04em;
}

.whrd-scorebug span {
    display: block;
    margin-top: 14px;
    font-size: 24px;
    font-weight: 1000;
}

.whrd-scorebug b {
    font-size: 58px;
    line-height: .85;
    letter-spacing: -.06em;
}

.whrd-scorebug em {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-size: 15px;
    font-weight: 900;
    color: var(--whrd-red);
}

.whrd-pitchbug {
    left: 19%;
    top: 18%;
    padding: 14px 20px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 12px 24px rgba(0,0,0,.16);
    font-weight: 1000;
    font-size: clamp(20px, 1.8vw, 32px);
    z-index: 3;
}

.whrd-pitcher {
    left: 55.5%;
    top: 41.8%;
    width: 44px;
    height: 140px;
    transform: translate(-50%, -50%) scale(.95);
    z-index: 2;
}

.whrd-person-head,
.whrd-batter-head {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #0e1110;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.whrd-pitcher .whrd-person-head { top: 0; }

.whrd-person-body {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 48px;
    border-radius: 12px;
    background: #f5f3ec;
}

.whrd-person-arm,
.whrd-person-leg,
.whrd-batter-arm,
.whrd-batter-leg {
    position: absolute;
    transform-origin: top center;
    border-radius: 99px;
}

.whrd-person-arm {
    top: 25px;
    width: 7px;
    height: 40px;
    background: #f5f3ec;
}

.whrd-person-arm.left { left: 8px; transform: rotate(38deg); }
.whrd-person-arm.right { right: 8px; transform: rotate(-52deg); }

.whrd-person-leg {
    top: 60px;
    width: 7px;
    height: 52px;
    background: #d54444;
}

.whrd-person-leg.left { left: 13px; transform: rotate(9deg); }
.whrd-person-leg.right { right: 13px; transform: rotate(-12deg); }

.whrd-shoe {
    position: absolute;
    bottom: 0;
    width: 18px;
    height: 8px;
    border-radius: 9px;
    background: #171919;
}

.whrd-shoe.left { left: 4px; }
.whrd-shoe.right { right: 4px; }

.whrd-zone-label {
    left: 49.1%;
    top: 52%;
    transform: translate(-50%, -100%);
    background: rgba(220, 97, 95, .9);
    color: #fff4ef;
    padding: 8px 12px;
    border-radius: 12px 12px 4px 4px;
    text-align: center;
    font-size: 15px;
    font-weight: 900;
    line-height: .95;
    z-index: 4;
}

.whrd-strike-zone {
    left: 49.1%;
    top: 52%;
    width: 9.2%;
    height: 24%;
    transform: translateX(-50%);
    border: 4px solid rgba(231, 107, 110, .9);
    background:
        linear-gradient(90deg, rgba(231,107,110,.0) 0 24.5%, rgba(231,107,110,.55) 24.5% 25.5%, rgba(231,107,110,.0) 25.5% 49.5%, rgba(231,107,110,.55) 49.5% 50.5%, rgba(231,107,110,.0) 50.5% 74.5%, rgba(231,107,110,.55) 74.5% 75.5%, rgba(231,107,110,.0) 75.5%),
        linear-gradient(180deg, rgba(231,107,110,.0) 0 24.5%, rgba(231,107,110,.55) 24.5% 25.5%, rgba(231,107,110,.0) 25.5% 49.5%, rgba(231,107,110,.55) 49.5% 50.5%, rgba(231,107,110,.0) 50.5% 74.5%, rgba(231,107,110,.55) 74.5% 75.5%, rgba(231,107,110,.0) 75.5%);
    z-index: 2;
}

.whrd-launch-glow {
    left: 49.1%;
    top: 54.4%;
    width: 14%;
    height: 14%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,204,112,.24) 0%, rgba(255,204,112,.12) 40%, rgba(255,204,112,0) 70%);
    filter: blur(1px);
}

.whrd-plate {
    left: 49.5%;
    bottom: 9%;
    width: 72px;
    height: 44px;
    transform: translateX(-50%);
    background: #efe5d2;
    clip-path: polygon(10% 0, 90% 0, 100% 40%, 50% 100%, 0 40%);
    box-shadow: 0 6px 12px rgba(0,0,0,.2);
    z-index: 2;
}

.whrd-batter-box {
    bottom: 7.3%;
    width: 12.5%;
    height: 18.4%;
    border: 3px solid rgba(255,255,255,.62);
    z-index: 1;
}

.whrd-batter-box.left { left: 35.1%; }
.whrd-batter-box.right { left: 52.5%; }

.whrd-batter {
    left: 32.8%;
    bottom: 10.8%;
    width: 112px;
    height: 222px;
    z-index: 3;
}

.whrd-bat {
    position: absolute;
    left: 54px;
    top: 30px;
    width: 10px;
    height: 126px;
    border-radius: 10px;
    background: linear-gradient(180deg, #f7cf58, #d89e1d);
    transform: rotate(48deg);
    transform-origin: bottom center;
    box-shadow: 0 8px 14px rgba(0,0,0,.2);
}

.whrd-batter-head { top: 0; width: 35px; height: 35px; background: #141516; }

.whrd-batter-head:before {
    content: "";
    position: absolute;
    left: -4px;
    top: 5px;
    width: 43px;
    height: 16px;
    border-radius: 20px;
    background: #141516;
}

.whrd-batter-body {
    position: absolute;
    top: 32px;
    left: 34px;
    width: 46px;
    height: 78px;
    border-radius: 22px;
    background: #1940c8;
    color: #fff;
    font-size: 20px;
    font-weight: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.whrd-batter-arm {
    top: 52px;
    width: 11px;
    height: 64px;
    background: #262a2f;
}

.whrd-batter-arm.left { left: 24px; transform: rotate(38deg); }
.whrd-batter-arm.right { right: 18px; transform: rotate(-58deg); }

.whrd-batter-leg {
    top: 100px;
    width: 14px;
    height: 88px;
    background: #20262d;
}

.whrd-batter-leg.left { left: 35px; transform: rotate(16deg); }
.whrd-batter-leg.right { right: 31px; transform: rotate(-18deg); }

.whrd-batter-shoe {
    position: absolute;
    bottom: 18px;
    width: 34px;
    height: 14px;
    border-radius: 12px;
    background: #121414;
}

.whrd-batter-shoe.left { left: 20px; }
.whrd-batter-shoe.right { right: 12px; }

.whrd-ball,
.whrd-hitball {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 12px rgba(0,0,0,.18), 0 0 12px rgba(255,255,255,.65);
    z-index: 4;
    opacity: 0;
}

.whrd-hitball { background: #fff8de; }

.whrd-float-text {
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(12,24,18,.82);
    color: #fff;
    font-size: 20px;
    font-weight: 1000;
    white-space: nowrap;
    box-shadow: 0 16px 30px rgba(0,0,0,.25);
    opacity: 0;
    z-index: 6;
}

.whrd-countdown {
    right: 28px;
    bottom: 28px;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.88);
    color: #102016;
    font-size: 38px;
    font-weight: 1000;
    box-shadow: 0 14px 24px rgba(0,0,0,.18);
    opacity: 0;
    z-index: 6;
}

.whrd-bottom-ui {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(320px, 430px) minmax(340px, 520px);
    justify-content: space-between;
    gap: 18px;
    pointer-events: none;
}

.whrd-bottom-ui > * {
    pointer-events: auto;
}

.whrd-button-panel,
.whrd-meter-panel {
    padding: 18px;
}

.whrd-button-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, auto));
    gap: 14px;
    align-items: start;
}

.whrd-btn {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 18px 30px;
    font-size: 18px;
    font-weight: 900;
    font-family: inherit;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    box-shadow: 0 12px 24px rgba(0,0,0,.14);
}

.whrd-btn:hover { transform: translateY(-2px); }
.whrd-btn:active { transform: translateY(0); }

.whrd-start {
    background: linear-gradient(135deg, #0f3b24, #238249);
    color: #fff;
}

.whrd-reset {
    background: #60695f;
    color: #fff;
}

.whrd-swing {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #efb2b8, #e8c27f);
    color: #fff;
    font-size: clamp(24px, 2vw, 34px);
    min-height: 80px;
}

.whrd-swing:disabled,
.whrd-start:disabled {
    opacity: .65;
    cursor: not-allowed;
}

.whrd-tip {
    grid-column: 1 / -1;
    font-size: 16px;
    line-height: 1.35;
    color: rgba(15,28,22,.72);
    font-weight: 800;
}

.whrd-meter-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-self: end;
}

.whrd-meter-labels {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 900;
    color: rgba(15,28,22,.58);
}

.whrd-meter {
    position: relative;
    height: 22px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, #c3cac3 0 76%, #b5c49f 76% 82%, #d4ee83 82% 86%, #f0d665 86% 91%, #d5ddd4 91% 100%);
    overflow: hidden;
}

.whrd-meter:after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(15,28,22,.08);
    border-radius: inherit;
}

.whrd-meter-dot {
    position: absolute;
    top: 50%;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0d1813;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 4px rgba(255,255,255,.65);
}

.whrd-message {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    width: min(760px, calc(100% - 50px));
    padding: 16px 24px;
    text-align: center;
    z-index: 4;
}

.whrd-message-main {
    font-weight: 1000;
    font-size: clamp(20px, 1.8vw, 28px);
    letter-spacing: -.03em;
}

.whrd-message-sub {
    margin-top: 4px;
    color: rgba(15,28,22,.68);
    font-size: clamp(14px, 1.2vw, 17px);
    font-weight: 700;
}

.whrd-flash {
    animation: whrdFlash .28s ease;
}

@keyframes whrdFlash {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.12); }
    100% { filter: brightness(1); }
}

.whrd-batter.swing .whrd-bat { transform: rotate(-10deg); }
.whrd-batter.swing .whrd-batter-arm.left { transform: rotate(-8deg); }
.whrd-batter.swing .whrd-batter-arm.right { transform: rotate(-90deg); }

@media (max-width: 1100px) {
    .whrd-game {
        min-height: auto;
        padding: 16px;
    }

    .whrd-hud,
    .whrd-bottom-ui {
        position: relative;
        inset: auto;
    }

    .whrd-hud {
        grid-template-columns: 1fr;
        margin-bottom: 16px;
    }

    .whrd-bottom-ui {
        grid-template-columns: 1fr;
        margin-top: 14px;
    }

    .whrd-field {
        height: 64vh;
        min-height: 560px;
    }

    .whrd-stat-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .whrd-message {
        position: relative;
        left: auto;
        bottom: auto;
        transform: none;
        width: 100%;
        margin-top: 14px;
    }
}

@media (max-width: 767px) {
    .whrd-game {
        padding: 12px;
    }

    .whrd-title {
        font-size: 52px !important;
    }

    .whrd-brand-panel,
    .whrd-stat-bar,
    .whrd-button-panel,
    .whrd-meter-panel,
    .whrd-message {
        border-radius: 22px;
    }

    .whrd-field {
        height: 58vh;
        min-height: 480px;
        border-radius: 24px;
    }

    .whrd-stat-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .whrd-stat {
        min-height: 90px;
    }

    .whrd-value,
    .whrd-value-pitch {
        font-size: 32px;
    }

    .whrd-pitchbug {
        left: 50%;
        top: 18px;
        transform: translateX(-50%);
        font-size: 18px;
        width: calc(100% - 34px);
        text-align: center;
    }

    .whrd-scorebug {
        left: 14px;
        top: 88px;
        width: 118px;
        padding: 12px;
    }

    .whrd-scorebug strong { font-size: 14px; }
    .whrd-scorebug b { font-size: 34px; }
    .whrd-scorebug span { font-size: 18px; }
    .whrd-scorebug em { font-size: 12px; }

    .whrd-batter {
        left: 23%;
        width: 92px;
        height: 184px;
        bottom: 9%;
        transform: scale(.86);
        transform-origin: bottom left;
    }

    .whrd-pitcher {
        top: 42%;
        left: 57%;
        transform: translate(-50%, -50%) scale(.82);
    }

    .whrd-zone-label { font-size: 12px; padding: 6px 9px; }
    .whrd-plate { width: 52px; height: 34px; }

    .whrd-batter-box { height: 13.5%; width: 17%; bottom: 7.6%; }
    .whrd-batter-box.left { left: 27%; }
    .whrd-batter-box.right { left: 50.5%; }

    .whrd-strike-zone { width: 16%; height: 22%; }

    .whrd-street-sign,
    .whrd-banner,
    .whrd-graffiti,
    .whrd-cityline,
    .whrd-wire,
    .whrd-pole,
    .whrd-car-left {
        opacity: .65;
    }

    .whrd-button-panel {
        grid-template-columns: 1fr;
    }

    .whrd-btn {
        width: 100%;
    }

    .whrd-meter-panel {
        padding-top: 14px;
    }
}

.whrd-float-text.show {
    animation: whrdFloatText 1s ease forwards;
}

@keyframes whrdFloatText {
    0% { opacity: 0; transform: translate(-50%, -46%); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -72%); }
}

.whrd-game.whrd-count-on .whrd-countdown {
    opacity: 1;
}

.whrd-game.is-swinging .whrd-bat { transform: rotate(-8deg); }
.whrd-game.is-swinging .whrd-batter-arm.left { transform: rotate(-12deg); }
.whrd-game.is-swinging .whrd-batter-arm.right { transform: rotate(-92deg); }

/* v2.1.0 fullscreen overrides */
.whrd-game {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh;
    min-height: 100dvh !important;
    margin: 0 !important;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    padding: 0 !important;
    border-radius: 0 !important;
}

.whrd-field {
    height: 100dvh !important;
    min-height: 100dvh !important;
    border-radius: 0 !important;
}

.whrd-hud {
    position: absolute !important;
    inset: 14px 14px auto 14px !important;
    grid-template-columns: minmax(250px, 28vw) 1fr !important;
    gap: 12px !important;
}

.whrd-bottom-ui {
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    grid-template-columns: minmax(280px, 380px) minmax(260px, 440px) !important;
    gap: 12px !important;
}

.whrd-message {
    bottom: 112px !important;
    z-index: 6;
}

.whrd-brand-panel {
    padding: 18px 18px 14px !important;
    border-radius: 24px !important;
}

.whrd-title {
    font-size: clamp(42px, 4.6vw, 84px) !important;
    margin: 12px 0 8px !important;
}

.whrd-subtitle {
    font-size: clamp(14px, 1.05vw, 17px) !important;
}

.whrd-controls-panel {
    margin-top: 14px !important;
    padding: 14px !important;
}

.whrd-round-strip {
    margin-top: 12px !important;
}

.whrd-round-box strong {
    font-size: 42px !important;
}

.whrd-life-icons span {
    width: 30px !important;
    height: 30px !important;
}

.whrd-stat-bar {
    padding: 12px !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.whrd-stat {
    min-height: 92px !important;
    padding: 12px !important;
    border-radius: 18px !important;
}

.whrd-value {
    font-size: clamp(28px, 2.7vw, 48px) !important;
}

.whrd-value-pitch {
    font-size: clamp(22px, 2vw, 34px) !important;
}

@media (max-width: 1100px) {
    .whrd-hud {
        grid-template-columns: minmax(220px, 38vw) 1fr !important;
    }

    .whrd-bottom-ui {
        grid-template-columns: minmax(230px, 1fr) minmax(220px, 1fr) !important;
    }

    .whrd-message {
        width: min(92vw, 640px) !important;
    }
}

@media (max-width: 767px) {
    .whrd-game,
    .whrd-field {
        height: 100svh !important;
        min-height: 100svh !important;
    }

    .whrd-hud {
        inset: 10px 10px auto 10px !important;
        grid-template-columns: minmax(150px, 44vw) 1fr !important;
        align-items: start;
    }

    .whrd-brand-panel {
        padding: 12px !important;
        border-width: 2px !important;
        width: 100%;
    }

    .whrd-eyebrow {
        padding: 7px 10px !important;
        font-size: 10px !important;
    }

    .whrd-title {
        font-size: clamp(34px, 8.6vw, 56px) !important;
        line-height: .9 !important;
        margin: 8px 0 6px !important;
    }

    .whrd-subtitle {
        font-size: 12px !important;
        line-height: 1.3 !important;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .whrd-controls-panel,
    .whrd-round-strip {
        display: none !important;
    }

    .whrd-stat-bar {
        padding: 8px !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .whrd-stat {
        min-height: 74px !important;
        padding: 9px 8px !important;
        border-radius: 14px !important;
    }

    .whrd-label {
        font-size: 10px !important;
        margin-bottom: 6px !important;
    }

    .whrd-value,
    .whrd-value-pitch {
        font-size: 24px !important;
    }

    .whrd-pitchbug {
        left: 50% !important;
        top: auto !important;
        bottom: 148px !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 20px) !important;
        max-width: 320px;
        text-align: center;
        padding: 10px 14px !important;
        font-size: 16px !important;
    }

    .whrd-scorebug {
        top: auto !important;
        left: 10px !important;
        bottom: 148px !important;
        width: 106px !important;
        padding: 10px !important;
    }

    .whrd-bottom-ui {
        left: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
        grid-template-columns: 1fr !important;
    }

    .whrd-button-panel,
    .whrd-meter-panel {
        padding: 12px !important;
        border-radius: 18px !important;
    }

    .whrd-button-panel {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 10px !important;
    }

    .whrd-btn {
        padding: 14px 14px !important;
        font-size: 16px !important;
        width: 100%;
    }

    .whrd-swing {
        grid-column: 1 / -1;
        min-height: 62px !important;
        font-size: 18px !important;
    }

    .whrd-tip {
        display: none !important;
    }

    .whrd-meter-panel {
        display: none !important;
    }

    .whrd-message {
        bottom: 92px !important;
        width: calc(100% - 20px) !important;
        padding: 10px 12px !important;
        border-radius: 18px !important;
    }

    .whrd-message-main {
        font-size: 16px !important;
    }

    .whrd-message-sub {
        font-size: 12px !important;
    }
}