/* Wheel Out uses the same framed game window and app chrome as Mine Slot. */
.wheelout-root {
    --wo-ink: #f8fafc;
    --wo-muted: rgba(240,244,243,.78);
    --wo-green: #36d28a;
    position: relative;
    isolation: isolate;
    display: block;
    box-sizing: border-box;
    width: min(1100px, 100%);
    height: min(940px, calc(100vh - 178px));
    height: min(940px, calc(100dvh - 178px));
    min-height: min(680px, calc(100vh - 178px));
    min-height: min(680px, calc(100dvh - 178px));
    margin: 0 auto;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #78a9f2;
    color: var(--wo-ink);
    font-family: 'Fredoka', system-ui, sans-serif;
    touch-action: manipulation;
    box-shadow: none;
}
.wheelout-root *,
.wheelout-root *::before,
.wheelout-root *::after { box-sizing: border-box; }
.wheelout-root button,
.wheelout-root input { font: inherit; }
.wheelout-root button { color: inherit; }
.wheelout-root button:focus-visible,
.wheelout-root input:focus-visible { outline: 2px solid #fff1a8; outline-offset: 3px; }
.wheelout-root .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.wo-stage {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    isolation: isolate;
    perspective: 900px;
    background: linear-gradient(180deg,#45aef1 0%,#54baf0 43.8%,#ffd17b 45%,#ffca68 100%);
}
.wo-camera-world {
    position: absolute;
    z-index: 0;
    top: 0;
    left: var(--wo-camera-world-left,-150%);
    width: var(--wo-camera-world-width,400%);
    height: 100%;
    overflow: visible;
    transform: translate3d(var(--wo-camera-x,0px),var(--wo-camera-y,0px),0);
    transform-origin: 50% 50%;
    will-change: transform;
    pointer-events: none;
}
.wo-camera-world.is-airborne { scale: .965; }
.wo-stage.is-airborne::after {
    content: '';
    position: absolute;
    z-index: 2;
    inset: 0;
    background: radial-gradient(ellipse at 52% 43%,transparent 39%,rgba(8,49,78,.075) 100%);
    opacity: .8;
    pointer-events: none;
}
.wo-scene-bg {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center;
    user-select: none;
    pointer-events: none;
    transform: translate3d(var(--wo-camera-bg-x,0px),var(--wo-camera-bg-y,0px),0);
}
.wo-scene-bg--left { left: 0; }
.wo-scene-bg { opacity: 0; }
.wo-sky-layer {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    transform: translate3d(var(--wo-camera-sky-x,0px),var(--wo-camera-sky-y,0px),0);
    pointer-events: none;
}
.wo-sky-cloud {
    position: absolute;
    display: block;
    width: clamp(130px,15vw,300px);
    height: clamp(42px,4.7vw,94px);
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 15% 69%,rgba(255,255,255,.54) 0 23%,transparent 24%),
        radial-gradient(ellipse at 34% 48%,rgba(255,255,255,.55) 0 29%,transparent 30%),
        radial-gradient(ellipse at 57% 40%,rgba(255,255,255,.52) 0 31%,transparent 32%),
        radial-gradient(ellipse at 79% 65%,rgba(255,255,255,.5) 0 25%,transparent 26%),
        linear-gradient(180deg,transparent 49%,rgba(255,255,255,.42) 50% 77%,transparent 78%);
    filter: drop-shadow(0 3px 7px rgba(47,125,178,.08));
    opacity: .42;
    scale: var(--wo-cloud-scale,1);
    animation: woSkyCloudDrift var(--wo-cloud-duration,30s) ease-in-out var(--wo-cloud-delay,0s) infinite alternate;
}
.wo-sky-cloud--far { opacity: .24; filter: blur(.5px); }
.wo-sky-cloud--near { opacity: .58; }
.wo-sky-cloud--wispy {
    width: clamp(210px,23vw,460px);
    height: clamp(14px,1.5vw,30px);
    border-radius: 999px;
    background: linear-gradient(180deg,transparent 18%,rgba(244,252,255,.4) 44%,rgba(255,255,255,.58) 58%,transparent 84%);
    filter: blur(1px);
}
@keyframes woSkyCloudDrift {
    from { translate: 0 0; }
    to { translate: var(--wo-cloud-drift,24px) -7px; }
}
.wo-village-layer {
    position: absolute;
    z-index: 1;
    top: 22%;
    left: 0;
    width: 100%;
    height: 24%;
    background: url('/assets/games/wheel-out/backgrounds/flight-village.svg') center bottom / 100% 100% no-repeat;
    transform: translate3d(var(--wo-camera-village-x,0px),var(--wo-camera-village-y,0px),0);
    opacity: .86;
    pointer-events: none;
}
.wo-ground-well {
    position: absolute;
    z-index: 1;
    top: 74%;
    width: clamp(130px,16vw,320px);
    height: auto;
    object-fit: contain;
    transform: translate(-50%,-50%);
    opacity: .96;
    pointer-events: none;
    user-select: none;
}
.wo-ground-well--small { top: 68%; width: clamp(82px,10vw,190px); }
.wo-ground-well--large { top: 76%; width: clamp(160px,21vw,390px); }
.wo-ground-well.is-hit { filter: brightness(.78) drop-shadow(0 0 14px rgba(255,76,44,.9)); }
.wo-start-pack {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 29%;
    width: 8.333333%;
    max-height: 48%;
    object-fit: contain;
    object-position: center bottom;
    transform: translateX(-50%);
    transform-origin: center bottom;
    transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .45s ease, filter .3s ease;
    pointer-events: none;
}
.wo-start-pack.is-launching { transform: translateX(-50%) translateY(3%) scale(.96); filter: brightness(.92); opacity: 0; transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .24s ease, filter .3s ease; }
.wo-start-pack.is-finished { opacity: 0; transform: translateX(-50%) translateY(7%) scale(.92); }
.wo-live-bar {
    position: absolute;
    z-index: 8;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(34px,4.4%,44px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 12px;
    overflow: hidden;
    background: #1877ae;
    color: #f5f7f9;
    font: 700 clamp(10px,1vw,16px)/1 'Fredoka', system-ui, sans-serif;
}
.wo-live-bar strong { font-weight: 800; white-space: nowrap; }
.wo-live-avatar {
    width: clamp(20px,2vw,27px);
    height: clamp(20px,2vw,27px);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eee5d4;
    color: #20a76c;
    font-size: clamp(11px,1.2vw,15px);
}
.wo-live-text {
    max-width: min(45vw,400px);
    overflow: hidden;
    color: #dce7ef;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wo-profile-tag {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 999px;
    background: rgba(12,44,66,.34);
    color: #fff2ad;
    font: 800 clamp(8px,.72vw,11px)/1 'Fredoka',system-ui,sans-serif;
    letter-spacing: .04em;
    white-space: nowrap;
}
.wo-logo {
    position: absolute;
    z-index: 7;
    top: 5.5%;
    left: 3%;
    width: clamp(74px,7.4%,174px);
    height: auto;
    aspect-ratio: 1.08 / 1;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}
.wo-menu-trigger {
    position: absolute;
    z-index: 13;
    top: 9.5%;
    right: 3%;
    width: clamp(48px,4vw,84px);
    height: clamp(48px,4vw,84px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(5px,.65vw,9px);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #267cac;
    box-shadow: 0 3px 12px rgba(19,70,98,.16);
    cursor: pointer;
    transition: filter .16s ease, transform .16s ease, background .16s ease;
}
.wo-menu-trigger:hover { filter: brightness(1.1); background: #236f9a; }
.wo-menu-trigger:active { transform: scale(.96); }
.wo-menu-trigger span { width: 63%; height: 3px; border-radius: 2px; background: #fff; }
.wo-menu-trigger[aria-expanded="true"] { background: #333d46; }
.wo-menu-trigger[aria-expanded="true"] span:first-child { transform: translateY(6px) rotate(45deg); }
.wo-menu-trigger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.wo-menu-trigger[aria-expanded="true"] span:last-child { transform: translateY(-6px) rotate(-45deg); }
.wo-menu-trigger span { transition: transform .18s ease, opacity .18s ease; }

.wo-menu {
    position: absolute;
    z-index: 12;
    top: 18.5%;
    right: 3%;
    width: min(460px, 38vw);
    max-height: min(73%, calc(100% - 110px));
    overflow: auto;
    padding: 15px 22px 17px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background: #1c1d22;
    color: #f1f2f4;
    box-shadow: 0 15px 38px rgba(13,34,45,.26);
    scrollbar-width: thin;
    scrollbar-color: #62666d transparent;
}
.wo-menu[hidden],
.wo-avatar-picker[hidden],
.wo-scene-bg[hidden],
.wo-start-pack[hidden],
.wo-route[hidden],
.wo-flight-trail[hidden],
.wo-wheel-streak[hidden],
.wo-wheel-aura[hidden],
.wo-impact-burst[hidden],
.wo-flying-wheel[hidden],
.wo-event-callout[hidden],
.wo-result[hidden],
.wo-win-banner[hidden],
.wo-win-ribbon[hidden] { display: none; }
.wo-profile {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 2px 0 13px;
}
.wo-profile-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: #dbe8ed;
    color: #2777a7;
    font-size: 13px;
    font-weight: 900;
}
.wo-profile-avatar svg { width: 27px; height: 27px; }
.wo-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wo-profile-name { min-width: 0; display: grid; gap: 3px; }
.wo-profile-name strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.wo-profile-name small { color: #a6a9ae; font-size: 11px; }
.wo-menu-link {
    border: 0;
    background: none;
    color: #c3c8cd;
    cursor: pointer;
    font-size: 12px !important;
    white-space: nowrap;
}
.wo-menu-link:hover { color: #fff; text-decoration: underline; }
.wo-menu-toggles,
.wo-menu-settings {
    display: grid;
    gap: 1px;
}
.wo-menu-toggles { padding: 1px 0 12px; border-bottom: 1px solid rgba(255,255,255,.12); }
.wo-menu-toggle,
.wo-menu-item {
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 2px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #f1f2f3;
    cursor: pointer;
    text-align: left;
    font-size: 15px !important;
    transition: background .15s ease, color .15s ease;
}
.wo-menu-toggle:hover,
.wo-menu-item:hover { background: rgba(255,255,255,.06); }
.wo-menu-toggle:disabled { cursor: not-allowed; opacity: .55; }
.wo-menu-toggle > span,
.wo-menu-item > span { display: flex; align-items: center; gap: 12px; }
.wo-menu-toggle svg,
.wo-menu-item svg { width: 22px; height: 22px; flex: 0 0 22px; }
.wo-menu-toggle i {
    position: relative;
    width: 45px;
    height: 28px;
    flex: 0 0 45px;
    border-radius: 999px;
    background: #2b2e33;
    transition: background .16s ease;
}
.wo-menu-toggle i::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f3f5f6;
    transition: transform .16s ease;
}
.wo-menu-toggle.is-on i { background: #16815a; }
.wo-menu-toggle.is-on i::after { transform: translateX(17px); }
.wo-menu-settings { padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.wo-menu-item { min-height: 39px; justify-content: flex-start; }
.wo-menu-speed { padding: 11px 0 8px; color: #c7c9cc; font-size: 12px; }
.wo-menu-speed > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-top: 8px; }
.wo-menu-speed button {
    min-height: 32px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 7px;
    background: rgba(255,255,255,.045);
    color: #d9dcdf;
    cursor: pointer;
    font-size: 11px !important;
}
.wo-menu-speed button.is-active { border-color: rgba(94,198,244,.56); background: rgba(36,128,174,.28); color: #fff; }
.wo-powered { padding-top: 9px; color: #9ba1a6; font-size: 11px; }

.wo-avatar-picker {
    position: absolute;
    z-index: 15;
    top: 21%;
    right: 3%;
    width: min(310px, 36vw);
    padding: 13px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    background: #1c1d22;
    box-shadow: 0 12px 32px rgba(0,0,0,.3);
}
.wo-avatar-picker > strong { display: block; margin-bottom: 10px; font-size: 13px; }
.wo-avatar-picker > div { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.wo-avatar-picker button {
    min-height: 44px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    background: #dce8e9;
    color: #2777a7;
    cursor: pointer;
    font-size: 12px !important;
    font-weight: 900;
}
.wo-avatar-picker button:hover { border-color: #fff; background: #fff; }

.wo-route { position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 100%; pointer-events: none; }
.wo-sky-bonus-field { position: absolute; z-index: 0; inset: 0; overflow: visible; }
.wo-sky-bonus {
    position: absolute;
    display: grid;
    place-items: center;
    min-width: clamp(34px,3vw,62px);
    min-height: clamp(32px,2.8vw,58px);
    transform: translate(-50%,-50%);
    color: #fff7d6;
    font: 1000 clamp(24px,2.5vw,48px)/1 'Fredoka',system-ui,sans-serif;
    -webkit-text-stroke: .8px rgba(67,74,57,.74);
    text-shadow: 0 2px 1px rgba(50,66,62,.72),0 0 11px rgba(255,255,220,.7),0 0 21px rgba(255,246,137,.68);
    opacity: .94;
    animation: woSkyBonusFloat 2.6s ease-in-out var(--wo-bonus-delay,0s) infinite;
}
.wo-sky-bonus--add {
    color: #64ff55;
    font-size: clamp(28px,2.8vw,54px);
    text-shadow: 0 2px 1px rgba(28,91,36,.9),0 0 14px rgba(52,255,68,.98),0 0 28px rgba(68,255,80,.82);
}
.wo-sky-bonus--number {
    color: #f5fcff;
    font-size: clamp(32px,3.1vw,60px);
    -webkit-text-stroke: 2px #276184;
    text-shadow: 0 2px 0 #174e73,0 0 3px #fff,0 5px 6px rgba(17,71,105,.52);
}
.wo-sky-bonus--multiply {
    color: #fff536;
    font-size: clamp(42px,4vw,76px);
    -webkit-text-stroke: 1.8px #a74712;
    text-shadow: 0 3px 0 #9e3c17,0 0 16px rgba(255,246,38,.98),0 0 31px rgba(255,192,23,.82);
}
.wo-sky-bonus--multiply::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 2.15em;
    height: 2.15em;
    border-radius: 50%;
    background: repeating-conic-gradient(from 3deg,rgba(255,249,94,.9) 0deg 4deg,transparent 4deg 18deg),radial-gradient(circle,rgba(255,255,177,.98) 0 13%,rgba(255,226,34,.82) 24%,rgba(255,208,38,.34) 52%,transparent 73%);
    filter: drop-shadow(0 0 10px rgba(255,229,45,.95));
    transform: translate(-50%,-50%);
    pointer-events: none;
}
.wo-sky-bonus--multiply[data-factor="5"] { font-size: clamp(48px,4.4vw,84px); }
.wo-sky-bonus--multiply[data-factor="5"]::before { width: 2.35em; height: 2.35em; }
.wo-sky-bonus.is-hit { animation: woSkyBonusHit .3s ease-out both; }
@keyframes woSkyBonusFloat {
    0%,100% { translate: 0 0; }
    50% { translate: 0 -6px; }
}
@keyframes woSkyBonusHit {
    0% { opacity: 1; scale: 1; }
    100% { opacity: 0; scale: 2.1; }
}
.wo-route-point {
    position: absolute;
    z-index: 1;
    display: grid;
    place-items: center;
    width: clamp(55px,7vw,130px);
    height: clamp(45px,7vw,100px);
    transform: translate(-50%,-50%) scale(.96);
    opacity: .9;
    transition: transform .28s ease, opacity .28s ease, filter .28s ease;
}
.wo-route-point > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 3px rgba(34,39,43,.22));
}
.wo-route-point--pit,
.wo-route-point--wall { height: clamp(50px,8vw,120px); }
.wo-route-point--ladder { height: clamp(65px,9vw,126px); }
.wo-route-point--number { width: auto; height: auto; }
.wo-route-point--sand { width: 42px; height: 45px; }
.wo-route-label {
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
}
.wo-route-point--add,
.wo-route-point--multiply { width: auto; height: auto; }
.wo-route-point--add .wo-route-label,
.wo-route-point--multiply .wo-route-label {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
}
.wo-route-point.is-active {
    z-index: 3;
    opacity: 1;
    transform: translate(-50%,-50%) scale(1.12);
    filter: drop-shadow(0 0 14px rgba(255,232,155,.85));
}
.wo-route-point.is-hit { animation: woRouteHit .34s ease-out both; }
@keyframes woRouteHit {
    0%,100% { filter: drop-shadow(0 0 14px rgba(255,232,155,.85)); }
    22% { filter: brightness(1.8) drop-shadow(0 0 24px rgba(255,255,231,1)); }
    58% { filter: brightness(1.25) drop-shadow(0 0 18px rgba(255,239,164,.95)); }
}
.wo-route-label {
    z-index: 1;
    padding: 2px 5px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font: 1000 clamp(18px,1.2vw,28px)/1 'Fredoka',system-ui,sans-serif;
    white-space: nowrap;
    text-shadow: 0 2px 2px rgba(24,57,88,.7);
}
.wo-route-point--add .wo-route-label,
.wo-route-point--multiply .wo-route-label {
    padding: 0;
    font-size: clamp(34px,3.4vw,66px);
    -webkit-text-stroke: 1.6px #8e3813;
    text-shadow: 0 2px 0 #9e3c17,0 0 16px rgba(255,237,40,.96),0 0 30px rgba(255,181,23,.68);
}
.wo-route-point--multiply {
    isolation: isolate;
    font-size: clamp(34px,3.4vw,66px);
}
.wo-route-point--multiply::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    width: 2.3em;
    height: 2.3em;
    border-radius: 50%;
    background: repeating-conic-gradient(from 3deg,rgba(255,249,94,.78) 0deg 4deg,transparent 4deg 18deg),radial-gradient(circle,rgba(255,255,177,.9) 0 13%,rgba(255,226,34,.7) 24%,rgba(255,208,38,.25) 52%,transparent 73%);
    filter: drop-shadow(0 0 12px rgba(255,229,45,.9));
    transform: translate(-50%,-50%);
    animation: woSkyBonusFloat 2.6s ease-in-out var(--wo-bonus-delay,0s) infinite;
}
.wo-route-point--add .wo-route-label {
    font-size: clamp(28px,2.6vw,50px);
    color: #42ed54;
    -webkit-text-stroke: 1px #116923;
    text-shadow: 0 2px 0 #126329, 0 0 13px rgba(48,255,71,.86), 0 0 25px rgba(64,255,80,.52);
}
.wo-route-point--number .wo-route-label {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    color: #f5fcff;
    font-size: clamp(32px,3.1vw,60px);
    -webkit-text-stroke: 2px #276184;
    text-shadow: 0 2px 0 #174e73,0 0 3px #fff,0 5px 6px rgba(17,71,105,.52);
}
.wo-route-point--multiply .wo-route-label { color: #fff52d; }
.wo-route-point--add > img,
.wo-route-point--multiply > img { display: none; }
.wo-route-point--pigeon .wo-route-label,
.wo-route-point--crow .wo-route-label { display: none; }
.wo-route-point--pigeon > img,
.wo-route-point--crow > img { filter: drop-shadow(0 3px 4px rgba(19,33,47,.38)) drop-shadow(0 0 14px rgba(255,255,255,.28)); }
.wo-route-point--pit .wo-route-label,
.wo-route-point--wall .wo-route-label { color: #fff3d1; }
.wo-route-point--sand .wo-route-label { color: #d5ffe0; }
.wo-route-point--current {
    width: clamp(90px,10vw,184px);
    height: clamp(38px,4vw,70px);
    border-radius: 50%;
    background: radial-gradient(ellipse at center,rgba(255,255,255,.48) 0%,rgba(222,248,255,.23) 47%,transparent 76%);
    filter: drop-shadow(0 0 12px rgba(241,253,255,.72));
    opacity: .76;
    animation: woCurrentPulse 2.8s ease-in-out infinite alternate;
}
.wo-route-point--current::before,
.wo-route-point--current::after {
    content: '';
    position: absolute;
    left: 9%;
    width: 82%;
    height: 40%;
    border-top: 2px solid rgba(255,255,255,.72);
    border-radius: 50%;
}
.wo-route-point--current::before { top: 26%; transform: rotate(-7deg); }
.wo-route-point--current::after { top: 45%; transform: rotate(5deg); opacity: .64; }
.wo-route-point--current .wo-route-label {
    top: calc(100% - 1px);
    color: #effcff;
    font-size: clamp(12px,1vw,19px);
    letter-spacing: .08em;
    text-shadow: 0 1px 4px rgba(28,95,132,.8),0 0 9px rgba(255,255,255,.8);
}
@keyframes woCurrentPulse { from { scale: .95; opacity: .58; } to { scale: 1.06; opacity: .88; } }

.wo-flight-trail {
    position: absolute;
    z-index: 3;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    opacity: .92;
    pointer-events: none;
}
.wo-flight-trail path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wo-flight-trail-glow { stroke: #4cfff0; stroke-width: 32px; opacity: .86; filter: blur(5px); }
.wo-flight-trail-core { stroke: url(#wo-flight-trail-gradient); stroke-width: 9px; filter: drop-shadow(0 0 10px rgba(143,255,222,1)); }
.wo-flight-trail.is-moving { opacity: .92; }
.wo-wheel-streak {
    position: absolute;
    z-index: 3;
    width: clamp(72px,13%,230px);
    height: clamp(12px,1.7vw,24px);
    border-radius: 999px;
    background: linear-gradient(90deg,transparent 0%,rgba(70,239,255,.12) 28%,rgba(88,255,213,.72) 76%,rgba(255,255,255,.98) 100%);
    box-shadow: 0 0 12px rgba(82,255,229,.72),0 0 28px rgba(60,227,255,.48);
    filter: blur(3px);
    opacity: .9;
    transform: translate(-94%,-50%) rotate(var(--wo-streak-angle,0deg));
    transform-origin: 94% 50%;
    pointer-events: none;
}
.wo-air-hint {
    position: absolute;
    z-index: 7;
    top: 15%;
    left: 50%;
    display: grid;
    gap: 4px;
    padding: 7px 12px;
    border: 1px solid rgba(223,255,248,.28);
    border-radius: 999px;
    background: rgba(11,54,76,.24);
    color: rgba(247,255,255,.92);
    font: 800 clamp(9px,.82vw,13px)/1 'Fredoka',system-ui,sans-serif;
    letter-spacing: .1em;
    opacity: 0;
    transform: translate(-50%,-6px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
    white-space: nowrap;
}
.wo-air-hint span { opacity: .82; font-size: .76em; font-weight: 600; letter-spacing: .035em; text-align: center; }
.wo-stage.is-airborne .wo-air-hint { opacity: .94; transform: translate(-50%,0); }
.wo-stage.is-airborne { touch-action: none; user-select: none; -webkit-user-select: none; }
.wo-wheel-aura {
    position: absolute;
    z-index: 3;
    width: clamp(90px,9%,180px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(60,255,84,.58) 0%,rgba(63,255,80,.36) 28%,rgba(70,255,71,.16) 52%,rgba(70,255,71,0) 73%);
    filter: blur(6px);
    opacity: .9;
    transform: translate(-50%,-50%) scale(.9);
    animation: woWheelAura 1s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes woWheelAura {
    from { opacity: .72; transform: translate(-50%,-50%) scale(.86); }
    to { opacity: 1; transform: translate(-50%,-50%) scale(1.12); }
}
.wo-impact-burst {
    position: absolute;
    z-index: 3;
    width: clamp(46px,5.5%,104px);
    aspect-ratio: 1;
    border: 3px solid rgba(255,255,236,.96);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(255,221,116,.4), 0 0 25px 8px rgba(255,243,173,.72);
    opacity: 0;
    transform: translate(-50%,-50%) scale(.28);
    pointer-events: none;
}
.wo-impact-burst::before,
.wo-impact-burst::after {
    content: '';
    position: absolute;
    inset: -42%;
    border-radius: 50%;
    pointer-events: none;
}
.wo-impact-burst::before {
    background: repeating-conic-gradient(from 7deg,rgba(255,255,224,.98) 0 2deg,transparent 2deg 19deg);
    -webkit-mask: radial-gradient(circle,transparent 35%,#000 43% 51%,transparent 61%);
    mask: radial-gradient(circle,transparent 35%,#000 43% 51%,transparent 61%);
    filter: drop-shadow(0 0 5px rgba(255,240,167,.9));
}
.wo-impact-burst::after {
    inset: 28%;
    background: radial-gradient(circle,rgba(255,255,239,.95),rgba(255,246,188,.35) 42%,transparent 72%);
}
.wo-impact-burst.is-bursting { animation: woImpactBurst .42s ease-out both; }
.wo-stage.is-landing-boost .wo-impact-burst { border-color: rgba(227,255,201,.98); box-shadow: 0 0 0 6px rgba(123,255,136,.48),0 0 32px 12px rgba(112,255,143,.88); }
.wo-stage.is-landing-boost .wo-flight-trail-core { stroke: #d6ffd2; filter: drop-shadow(0 0 10px rgba(81,255,116,1)); }
@keyframes woImpactBurst {
    0% { opacity: .95; transform: translate(-50%,-50%) scale(.28); }
    58% { opacity: .9; transform: translate(-50%,-50%) scale(1.14); }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(1.68); }
}
.wo-flying-wheel {
    position: absolute;
    z-index: 4;
    left: 52%;
    top: 57%;
    width: clamp(58px,5%,112px);
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    transform: perspective(650px) translate(-50%,-50%) rotateX(var(--wo-wheel-pitch,0deg)) rotate(var(--wo-wheel-rotation,0deg));
    scale: var(--wo-wheel-sink-scale,1);
    filter: drop-shadow(0 0 8px rgba(65,255,78,.72)) drop-shadow(0 0 17px rgba(65,255,78,.44)) drop-shadow(0 7px 7px rgba(42,39,33,.34));
    pointer-events: none;
}
.wo-event-callout {
    position: absolute;
    z-index: 6;
    top: 19%;
    left: 50%;
    min-width: 90px;
    max-width: min(56vw,480px);
    padding: 9px 16px;
    transform: translate(-50%,-9px) scale(.92);
    border: 2px solid rgba(255,255,255,.72);
    border-radius: 999px;
    background: rgba(34,41,44,.88);
    color: #fff;
    font: 1000 clamp(13px,1.5vw,24px)/1 'Fredoka',system-ui,sans-serif;
    text-align: center;
    text-shadow: 0 2px 3px rgba(0,0,0,.24);
    opacity: 0;
    box-shadow: 0 8px 20px rgba(30,45,50,.18);
}
.wo-event-callout.is-visible { animation: woCallout .35s cubic-bezier(.18,.8,.2,1) forwards; }
.wo-event-callout[data-kind="bonus"],
.wo-event-callout[data-kind="ladder"] { border-color: #ffdf83; color: #fff0ba; }
.wo-event-callout[data-kind="air"] { border-color: #dffaff; background: rgba(49,130,165,.88); color: #f1fdff; }
.wo-event-callout[data-kind="win"] { border-color: #b9f1c9; background: rgba(38,113,68,.92); }
.wo-event-callout[data-kind="loss"] { border-color: #f9a08e; background: rgba(133,56,46,.92); }
.wo-event-callout[data-kind="hazard"],
.wo-event-callout[data-kind="crow"],
.wo-event-callout[data-kind="pigeon"] { border-color: #ffe2a0; }

.wo-result {
    position: absolute;
    z-index: 10;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 9px;
    padding: 12% 18% 21%;
    background: rgba(14,32,45,.18);
    text-align: center;
    animation: woResultIn .28s ease both;
    pointer-events: none;
}
.wo-result .wo-win-ribbon {
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    width: min(62%,1050px);
    max-height: 29%;
    object-fit: fill;
    transform: translate(-50%,-50%);
}
.wo-win-banner {
    width: min(66%,980px);
    max-height: 100px;
    object-fit: contain;
    filter: drop-shadow(0 5px 7px rgba(0,0,0,.28));
}
.wo-result > strong {
    color: #fff8da;
    font: 1000 clamp(22px,3vw,46px)/1.05 'Fredoka',system-ui,sans-serif;
    text-shadow: 0 3px 8px rgba(15,33,40,.45);
}
.wo-result > span {
    color: #fff;
    font: 900 clamp(20px,2.3vw,36px)/1.1 'Fredoka',system-ui,sans-serif;
    text-shadow: 0 2px 8px rgba(15,33,40,.45);
}
.wo-result > small {
    max-width: min(100%,900px);
    color: rgba(255,255,255,.88);
    font: 800 clamp(13px,1.25vw,18px)/1.15 'Fredoka',system-ui,sans-serif;
    text-shadow: 0 2px 7px rgba(15,33,40,.45);
    text-wrap: balance;
}
.wo-result[data-net="positive"] > small { color: #c9ffd8; }
.wo-result[data-net="negative"] > small { color: #ffd0c5; }
.wo-result[data-net="even"] > small { color: #fff1bd; }
.wo-result[hidden] { display: none; }
.wo-result.is-entering { animation: woResultIn .28s ease both; }
.wo-result[data-outcome="loss"] {
    inset: auto;
    top: 50%;
    left: 50%;
    width: min(88%,460px);
    min-height: 142px;
    padding: 22px 28px;
    gap: 8px;
    border: 1px solid rgba(255,157,137,.76);
    border-radius: 18px;
    background: rgba(38,35,39,.95);
    box-shadow: 0 16px 46px rgba(36,24,23,.34), inset 0 1px rgba(255,255,255,.12);
    transform: translate(-50%,-50%);
}
.wo-result[data-outcome="loss"] .wo-win-ribbon,
.wo-result[data-outcome="loss"] .wo-win-banner { display: none; }
.wo-result[data-outcome="loss"] > strong { color: #ffb9a9; }
.wo-result[data-outcome="loss"] > span { color: #fff; }

.wo-bottom {
    position: absolute;
    z-index: 9;
    left: clamp(12px,18%,350px);
    right: clamp(12px,18%,350px);
    bottom: 40px;
    min-height: 92px;
    display: grid;
    grid-template-columns: minmax(150px,1.15fr) minmax(140px,1fr) minmax(250px,1.7fr) 72px 56px;
    align-items: center;
    gap: 10px;
}
.wo-control-card {
    min-width: 0;
    min-height: 68px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 9px 15px;
    border: 2px solid rgba(208,221,226,.28);
    border-radius: 10px;
    background: rgba(35,37,39,.88);
    color: var(--wo-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1px;
    box-shadow: 2px 3px 0 rgba(34,37,34,.44);
}
.wo-control-card > span { display: block; }
.wo-control-card > b { display: block; margin-top: 3px; overflow: hidden; color: #fff; font-size: 18px; font-weight: 900; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wo-balance { position: relative; }
.wo-demo-refill {
    position: absolute;
    top: 6px;
    right: 7px;
      min-width: 42px;
    min-height: 22px;
    padding: 2px 5px;
    border: 1px solid rgba(94,231,231,.72);
    border-radius: 6px;
    background: linear-gradient(135deg,#22d3ee,#14b8a6);
    color: #06242a;
    font: 900 10px/1 'Fredoka',system-ui,sans-serif;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(34,211,238,.18);
}
.wo-demo-refill:hover { filter: brightness(1.12); }
.wo-demo-refill[hidden] { display: none; }
.wo-win { text-align: center; }
.wo-win > b { color: #ffe47c; }
.wo-bet {
    min-height: 68px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 8px;
}
.wo-bet > button,
.wo-spin,
.wo-auto {
    min-width: 48px;
    min-height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    color: #fff;
    cursor: pointer;
    font: 900 18px/1 'Fredoka',system-ui,sans-serif;
    transition: transform .16s ease, filter .16s ease, background .16s ease, opacity .16s ease;
}
.wo-bet > button:hover:not(:disabled),
.wo-auto:hover:not(:disabled) { background: rgba(255,255,255,.16); }
.wo-bet-field {
    min-width: 0;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 4px;
}
.wo-bet-field > .tg-s { flex: 0 0 auto; }
.wo-bet-field input {
    width: min(92px, 100%);
    min-width: 40px;
    min-height: 44px;
    border: 0;
    outline: none;
    background: transparent;
    color: #fff;
    font: 900 16px 'Fredoka',system-ui,sans-serif;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.wo-bet-field input::-webkit-inner-spin-button,
.wo-bet-field input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.wo-bet-field input[type=number] { appearance: textfield; }
.wo-spin {
    width: 72px;
    min-height: 78px;
    border: 3px solid rgba(182,255,225,.55);
    border-radius: 16px;
    background: linear-gradient(145deg,#29ce83,#139355);
    box-shadow: 0 5px 14px rgba(24,147,102,.28),inset 0 1px rgba(255,255,255,.3);
    font-size: 40px;
}
.wo-spin:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-2px); }
.wo-spin:active:not(:disabled) { transform: translateY(1px); }
.wo-auto {
    width: 56px;
    min-height: 48px;
    background: rgba(34,39,40,.9);
    font-size: 18px;
}
.wo-auto.is-on { border-color: rgba(255,189,193,.7); background: linear-gradient(145deg,#e6535b,#a72134); }
.wo-spin:disabled,
.wo-auto:disabled,
.wo-bet > button:disabled { cursor: not-allowed; opacity: .45; }
.wo-status {
    position: absolute;
    left: 50%;
    bottom: -8px;
    max-width: min(90vw,680px);
    overflow: hidden;
    transform: translate(-50%,100%);
    color: rgba(228,243,245,.72);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .9px;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}
.wo-status[data-state="win"] { color: #b5f0c7; }
.wo-status[data-state="ready"] { color: rgba(255,255,255,.92); }
.wo-status[data-state="loss"],
.wo-status[data-state="error"] { color: #ffd2c8; }
.wo-status[data-state="bonus"],
.wo-status[data-state="save"] { color: #fff0bd; }
.wo-status[data-state="hazard"] { color: #ffe1a4; }
.wo-status[data-state="auto"] { color: #d8f5eb; }

.wo-dialog,
.wo-auto-dialog {
    max-width: min(560px,calc(100vw - 28px));
    max-height: min(84vh,760px);
    max-height: min(84dvh,760px);
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 13px;
    background: #292a2e;
    color: #f3f4f5;
    box-shadow: 0 24px 80px rgba(0,0,0,.58);
}
.wo-dialog::backdrop,
.wo-auto-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(4px); }
.wo-dialog__panel { max-height: min(84vh,760px); max-height: min(84dvh,760px); overflow: auto; padding: 14px 17px 18px; scrollbar-color: #686a70 #2a2b2f; }
.wo-dialog__head {
    position: sticky;
    z-index: 2;
    top: -14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -14px -17px 12px;
    padding: 12px 15px 10px;
    background: #292a2e;
}
.wo-dialog__head h2 { margin: 0; font: 800 19px/1.2 'Fredoka',system-ui,sans-serif; }
.wo-close {
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #c4c8cb;
    cursor: pointer;
}
.wo-close svg { width: 21px; height: 21px; }
.wo-close:hover { background: rgba(255,255,255,.1); color: #fff; }
.wo-dialog__body { color: #d3d5d7; font: 600 13px/1.43 'Fredoka',system-ui,sans-serif; }
.wo-help-list { margin: 0; padding-left: 24px; color: #f1f1ef; }
.wo-help-list > li { padding: 0 0 9px 3px; }
.wo-help-list > li::marker { color: #dadbdd; font-weight: 800; }
.wo-help-list strong { color: #f5f5f4; font-weight: 800; }
.wo-help-list p { margin: 4px 0 0; color: #c7c8c9; font-weight: 500; }
.wo-help-list ul { margin: 5px 0 0; padding-left: 17px; color: #c7c8c9; font-weight: 500; }
.wo-help-list ul li { padding: 0 0 5px 1px; }
.wo-rules p { margin: 0 0 12px; }
.wo-empty-history { margin: 16px 4px; color: #b8bdc1; }
.wo-history-list { display: grid; gap: 7px; }
.wo-history-row {
    display: grid;
    grid-template-columns: minmax(70px,1fr) auto auto auto;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border-radius: 8px;
    background: rgba(255,255,255,.045);
    font-size: 11px;
}
.wo-history-row > span:first-child { color: #b7bdc2; }
.wo-history-row > strong { font-size: 10px; }
.wo-history-row > b { color: #f1f2f3; white-space: nowrap; }
.wo-history-row .is-win { color: #83e6af; }
.wo-history-row .is-loss { color: #f49c8a; }
.wo-history-row .is-return { color: #ffe29a; }

.wo-auto-panel { padding: 22px; text-align: center; }
.wo-auto-panel h2 { margin: 0 0 7px; font: 900 22px/1.2 'Fredoka',system-ui,sans-serif; }
.wo-auto-panel p { margin: 0 0 17px; color: #c5c9cc; font-size: 13px; }
.wo-auto-options { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
.wo-auto-options button,
.wo-auto-cancel {
    min-height: 44px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    color: #fff;
    cursor: pointer;
    font-size: 14px !important;
    font-weight: 800;
}
.wo-auto-options button:hover { border-color: rgba(255,219,132,.6); background: rgba(255,219,132,.12); }
.wo-auto-cancel { min-width: 120px; min-height: 38px; margin-top: 15px; background: transparent; color: #c8ccd0; font-size: 12px !important; }

@keyframes woCallout {
    0% { opacity: 0; transform: translate(-50%,-9px) scale(.92); }
    70% { opacity: 1; transform: translate(-50%,2px) scale(1.04); }
    100% { opacity: 1; transform: translate(-50%,0) scale(1); }
}
@keyframes woResultIn { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 700px) {
    .wo-sky-bonus--multiply { font-size: clamp(30px,7vw,48px); }
    .wo-sky-bonus--multiply[data-factor="5"] { font-size: clamp(36px,8vw,54px); }
    .wo-sky-bonus--number { font-size: clamp(23px,5.5vw,36px); }
    .wo-sky-bonus--add { font-size: clamp(20px,5vw,32px); }
    .wo-route-point--multiply { font-size: clamp(28px,7vw,46px); }
    .wo-route-point--multiply .wo-route-label { font-size: clamp(28px,7vw,46px); }
    .wo-route-point--multiply::before { width: 2.25em; height: 2.25em; }
    .wo-route-point--add .wo-route-label { font-size: clamp(22px,5vw,32px); }
    .wheelout-root {
        height: min(900px,calc(100vh - 130px));
        height: min(900px,calc(100dvh - 130px));
        min-height: min(680px,calc(100vh - 130px));
        min-height: min(680px,calc(100dvh - 130px));
        border-radius: 10px;
    }
    .wo-live-bar { height: 36px; gap: 7px; font-size: 11px; }
    .wo-live-avatar { width: 20px; height: 20px; font-size: 11px; }
    .wo-logo { top: 7%; left: 4%; width: 18%; max-width: 108px; }
    .wo-menu-trigger { top: 7%; right: 4%; width: 48px; height: 48px; gap: 5px; }
    .wo-menu-trigger span { height: 2px; }
    .wo-menu {
        top: 15%;
        right: 3%;
        width: min(400px,94%);
        max-height: 70%;
        padding: 12px 14px 14px;
        border-radius: 13px;
    }
    .wo-profile { grid-template-columns: 38px minmax(0,1fr) auto; gap: 8px; }
    .wo-profile-avatar { width: 38px; height: 38px; }
    .wo-profile-name strong { font-size: 13px; }
    .wo-menu-toggle,
    .wo-menu-item { min-height: 40px; font-size: 13px !important; }
    .wo-menu-toggle svg,
    .wo-menu-item svg { width: 20px; height: 20px; flex-basis: 20px; }
    .wo-avatar-picker { top: 17%; right: 3%; width: min(310px,94%); }
    .wo-route { top: 0; right: auto; bottom: 0; left: 0; width: 100%; }
    .wo-route-point { width: clamp(48px,12vw,74px); height: clamp(36px,10vw,58px); }
    .wo-route-point--pit,
    .wo-route-point--wall { height: clamp(42px,12vw,68px); }
    .wo-route-point--ladder { height: clamp(50px,15vw,82px); }
    .wo-route-label { padding: 4px 6px; font-size: 9px; }
    .wo-flying-wheel { width: clamp(72px,18vw,108px); }
    .wo-event-callout { top: 15%; max-width: 80vw; padding: 7px 12px; font-size: 15px; }
    .wo-result { padding: 16% 7% 45%; gap: 7px; }
    .wo-result[data-outcome="loss"] { inset: auto; top: 50%; left: 50%; width: min(90%,390px); min-height: 136px; padding: 18px 20px; gap: 7px; }
    .wo-result .wo-win-ribbon { width: 90%; max-height: 25%; }
    .wo-win-banner { width: 92%; max-height: 72px; }
    .wo-result > strong { font-size: clamp(19px,6vw,29px); }
    .wo-result > span { font-size: clamp(18px,5vw,25px); }
    .wo-result > small { font-size: clamp(12px,4vw,16px); }
    .wo-bottom {
        left: 8px;
        right: 8px;
        bottom: 54px;
        grid-template-columns: minmax(0,1fr) minmax(0,1fr) 58px 44px;
        grid-template-rows: minmax(52px,auto) minmax(54px,auto);
        gap: 5px;
        min-height: 0;
    }
    .wo-control-card { min-height: 54px; padding: 6px 8px; border-width: 1px; border-radius: 7px; font-size: 10px; }
    .wo-control-card > b { margin-top: 2px; font-size: 13px; }
    .wo-balance { grid-column: 1; grid-row: 1; }
    .wo-win { grid-column: 2; grid-row: 1; }
    .wo-bet { grid-column: 1 / 3; grid-row: 2; min-height: 54px; padding: 3px; }
    .wo-bet > button { min-width: 38px; min-height: 42px; }
    .wo-bet-field { min-height: 42px; }
    .wo-bet-field input { width: min(70px,20vw); min-height: 40px; font-size: 14px; }
    .wo-spin { grid-column: 3; grid-row: 1 / 3; width: 58px; min-height: 76px; border-radius: 12px; font-size: 34px; }
    .wo-auto { grid-column: 4; grid-row: 1 / 3; width: 44px; min-height: 46px; font-size: 15px; }
    .wo-status { bottom: -6px; font-size: 8px; letter-spacing: .4px; }
    .wo-dialog { max-width: calc(100vw - 18px); max-height: 86vh; max-height: 86dvh; }
    .wo-dialog__panel { max-height: 86vh; max-height: 86dvh; padding: 12px 13px 15px; }
    .wo-dialog__head { top: -12px; margin: -12px -13px 10px; padding: 10px 12px; }
    .wo-dialog__head h2 { font-size: 17px; }
    .wo-dialog__body { font-size: 12px; }
    .wo-help-list > li { padding-bottom: 7px; }
    .wo-history-row { grid-template-columns: minmax(48px,1fr) auto auto; gap: 7px; font-size: 10px; }
    .wo-history-row > span:nth-of-type(2) { display: none; }
    .wo-auto-dialog { max-width: calc(100vw - 18px); }
    .wo-auto-panel { padding: 18px 14px; }
    .wo-auto-options { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-height: 760px) and (min-width: 701px) {
    .wheelout-root {
        height: calc(100vh - 178px);
        height: calc(100dvh - 178px);
        min-height: min(500px,calc(100vh - 178px));
        min-height: min(500px,calc(100dvh - 178px));
    }
    .wo-bottom { bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) {
    .wheelout-root { scroll-behavior: auto; }
    .wo-flight-trail.is-moving { animation-duration: var(--wo-flight-duration,680ms) !important; }
    .wo-wheel-aura { animation: none; }
    .wo-route-point,
    .wo-menu-trigger,
    .wo-control-card,
    .wo-spin,
    .wo-auto { transition-duration: .01ms !important; }
}

.wo-scene-bg { opacity: 1; }
.wo-live-bar { background: #338bc4; }
.wo-stage {
    background: linear-gradient(180deg,#43b5ed 0%,#65c6f4 43%,#8bd8f3 52%,#ffd17c 54%,#ffc164 100%);
}
.wo-scene-bg {
    opacity: .52;
    top: 0;
    bottom: auto;
    height: 100%;
    filter: saturate(.88);
    -webkit-mask-image: linear-gradient(180deg,#000 0%,#000 50%,transparent 58%);
    mask-image: linear-gradient(180deg,#000 0%,#000 50%,transparent 58%);
}
.wo-scene-bg:not([src$="main_bg.png"]) {
    opacity: 1;
    height: 100%;
    -webkit-mask-image: none;
    mask-image: none;
}
.wo-scene-bg[src$="main_bg.png"] { left: 10.5%; }
.wo-village-layer {
    top: 24.5%;
    height: 32%;
    opacity: 1;
    filter: saturate(1.08) contrast(1.03);
    background-image: url('/assets/games/wheel-out/backgrounds/flight-village.svg?v=5');
    background-repeat: repeat-x;
}
.wo-stage[data-phase="idle"] .wo-ground-well,
.wo-stage[data-phase="launching"] .wo-ground-well,
.wo-stage[data-phase="won"] .wo-ground-well,
.wo-stage[data-phase="lost"] .wo-ground-well { opacity: 0; }
.wo-stage[data-phase="flying"] .wo-ground-well { opacity: .96; }
.wo-start-pack {
    left: 48.8%;
    bottom: 27.6%;
    width: min(38%,690px);
    max-height: 50%;
}
.wo-logo {
    top: 5.7%;
    width: clamp(74px,8.5%,174px);
}
.wo-air-hint { display: none !important; }
.wo-spin > svg { display: block; width: 42px; height: 42px; fill: currentColor; }
.wo-auto > svg { display: block; width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.wo-event-callout[data-kind="bonus"],
.wo-event-callout[data-kind="multiplier"] {
    min-width: 0;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: clamp(28px,3vw,52px);
    -webkit-text-stroke: 1px #116923;
    text-shadow: 0 2px 0 #126329,0 0 13px rgba(48,255,71,.86),0 0 25px rgba(64,255,80,.52);
}
.wo-event-callout[data-kind="multiplier"] {
    color: #fff52d;
    -webkit-text-stroke-color: #8e3813;
    text-shadow: 0 2px 0 #9e3c17,0 0 15px rgba(255,237,40,.86),0 0 28px rgba(255,181,23,.52);
}
.wo-event-callout[data-kind="multiplier"]::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -70%;
    border-radius: 50%;
    background: repeating-conic-gradient(from 3deg,rgba(255,249,94,.74) 0deg 4deg,transparent 4deg 18deg),radial-gradient(circle,rgba(255,255,177,.86) 0 13%,rgba(255,226,34,.7) 24%,rgba(255,208,38,.25) 52%,transparent 73%);
}
.wo-bottom {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 24px;
    width: min(66vw,1400px);
    height: 104px;
    min-height: 104px;
    grid-template-rows: 90px;
    align-items: center;
    grid-template-columns: minmax(0,1.05fr) minmax(0,1.05fr) minmax(0,1fr) minmax(0,.95fr) 132px minmax(0,.72fr);
    gap: 6px;
    padding: 7px;
    border: 0;
    border-radius: 17px;
    background: rgba(42,43,47,.98);
    box-shadow: 0 8px 26px rgba(37,31,22,.2);
}
.wo-control-card {
    min-height: 88px;
    padding: 10px 15px;
    border: 1px solid #5b5d62;
    border-radius: 12px;
    background: #34363b;
    color: #a8a9ad;
    font-size: clamp(12px,.82vw,17px);
    letter-spacing: 0;
    box-shadow: none;
}
.wo-control-card > span { font-weight: 800; }
.wo-control-card > b {
    margin-top: 4px;
    color: #f2f2f3;
    font-size: clamp(16px,1.05vw,24px);
    font-weight: 900;
}
.wo-win { text-align: left; }
.wo-win > b { color: #f2f2f3; }
.wo-speed,
.wo-bet { position: relative; }
.wo-speed > b { margin-right: 46px; }
.wo-speed-arrows,
.wo-bet-arrows { display: grid; grid-template-rows: repeat(2,minmax(0,1fr)); gap: 4px; }
.wo-speed-arrows { position: absolute; top: 7px; right: 7px; bottom: 7px; }
.wo-speed-arrows button,
.wo-bet-arrows button {
    width: 38px;
    min-width: 38px;
    min-height: 0;
    padding: 0;
    border: 1px solid rgba(208,216,222,.15);
    border-radius: 7px;
    background: rgba(255,255,255,.035);
    color: #d9dade;
    cursor: pointer;
    font: 800 20px/1 system-ui,sans-serif;
}
.wo-speed-arrows button:hover:not(:disabled),
.wo-bet-arrows button:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.wo-speed-arrows button:disabled { opacity: .35; cursor: default; }
.wo-bet-control { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 46px; }
.wo-bet-field { flex: 1 1 auto; justify-content: flex-start; gap: 8px; min-height: 42px; padding: 0; }
.wo-bet-currency { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #c7c9ca; color: #43464a; font: 900 15px/1 system-ui,sans-serif; }
.wo-bet-field input { width: 100%; min-height: 40px; color: #f2f2f3; font-size: clamp(16px,1.05vw,24px); text-align: left; }
.wo-bet-arrows { flex: 0 0 auto; width: 38px; height: 78px; }
.wo-spin {
    z-index: 2;
    place-self: center;
    width: 132px;
    height: 132px;
    min-width: 0;
    min-height: 0;
    border: 5px solid #202b2a;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 28%,#34dd76 0,#14a753 68%,#08723e 100%);
    box-shadow: 0 5px 15px rgba(12,56,34,.35), inset 0 2px 3px rgba(255,255,255,.27);
    color: #e5e7eb;
    font: 900 clamp(30px,2.5vw,46px)/1 system-ui,sans-serif;
}
.wo-auto {
    width: 100%;
    height: 88px;
    min-width: 0;
    min-height: 0;
    border: 1px solid #5b5d62;
    border-radius: 12px;
    background: #34363b;
    color: #e0e1e3;
    font: 500 clamp(25px,2vw,38px)/1 system-ui,sans-serif;
}
.wo-auto.is-on { border-color: rgba(255,189,193,.7); background: linear-gradient(145deg,#e6535b,#a72134); }
.wo-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}

@media (max-width: 1100px) and (min-width: 701px) {
    .wo-bottom { width: calc(100% - 32px); grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,.92fr) minmax(0,.9fr) 100px minmax(0,.64fr); gap: 4px; padding: 5px; }
    .wo-control-card { padding-inline: 9px; }
    .wo-speed-arrows button,
    .wo-bet-arrows button { width: 31px; min-width: 31px; }
    .wo-speed-arrows { right: 5px; }
    .wo-bet-arrows { width: 31px; }
    .wo-spin > svg { width: 34px; height: 34px; }
    .wo-auto > svg { width: 36px; height: 36px; }
}
@media (max-width: 700px) {
    .wheelout-root {
        width: min(1100px,100%);
        height: min(900px,calc(100vh - 130px));
        height: min(900px,calc(100dvh - 130px));
        min-height: min(680px,calc(100vh - 130px));
        min-height: min(680px,calc(100dvh - 130px));
        border-radius: 10px;
    }
    .wo-bottom {
        left: 8px;
        right: 8px;
        bottom: 54px;
        width: auto;
        min-height: 0;
        grid-template-columns: minmax(0,1fr) minmax(0,1fr) 64px;
        grid-template-rows: minmax(48px,auto) minmax(54px,auto) 42px;
        gap: 4px;
        padding: 5px;
        border-radius: 12px;
    }
    .wo-control-card { min-height: 50px; padding: 5px 7px; font-size: 9px; }
    .wo-control-card > b { margin-top: 2px; font-size: 12px; }
    .wo-balance { grid-column: 1; grid-row: 1; }
    .wo-win { grid-column: 2; grid-row: 1; }
    .wo-speed { grid-column: 1; grid-row: 2; }
    .wo-bet { grid-column: 2; grid-row: 2; padding-right: 4px; }
    .wo-speed > b { margin-right: 30px; }
    .wo-speed-arrows { top: 4px; right: 4px; bottom: 4px; }
    .wo-speed-arrows button,
    .wo-bet-arrows button { width: 24px; min-width: 24px; font-size: 14px; }
    .wo-bet-control { min-height: 30px; gap: 3px; }
    .wo-bet-field { min-height: 28px; gap: 3px; }
    .wo-bet-currency { width: 18px; height: 18px; font-size: 11px; }
    .wo-bet-field input { min-height: 28px; font-size: 13px; }
    .wo-bet-arrows { width: 24px; height: 40px; gap: 2px; }
    .wo-spin { grid-column: 3; grid-row: 1 / 3; width: 60px; height: 60px; min-height: 60px; border-width: 3px; font-size: 25px; }
    .wo-spin > svg { width: 25px; height: 25px; }
    .wo-auto > svg { width: 28px; height: 28px; }
    .wo-auto { grid-column: 1 / 4; grid-row: 3; height: 38px; min-height: 38px; font-size: 22px; }
}

@media (max-height: 760px) and (max-width: 700px) {
    .wheelout-root {
        height: calc(100vh - 140px);
        height: calc(100dvh - 140px);
        min-height: min(500px,calc(100vh - 140px));
        min-height: min(500px,calc(100dvh - 140px));
    }
    .wo-bottom { bottom: 8px; }
}

/* Keep wheel and camera positions synchronized directly to each route-animation frame. */
.wo-camera-world,
.wo-flying-wheel,
.wo-wheel-aura,
.wo-sky-layer,
.wo-scene-bg,
.wo-village-layer {
    transition: transform 0ms linear, left 0ms linear, top 0ms linear !important;
}

.wo-flying-wheel.is-impacting,
.wo-flying-wheel.is-hard-landing,
.wo-flying-wheel.is-crow-drop,
.wo-flying-wheel.is-falling {
    animation: none !important;
    transition: none !important;
}

.wo-flying-wheel {
    will-change: auto !important;
}

@media (prefers-reduced-motion: reduce) {
    .wo-sky-cloud,
    .wo-route-point--current { animation: none !important; }
}


/* Wheel Out provider-style flight projection: route/background share one world camera. */
.wo-flight-trail,
.wo-wheel-streak,
.wo-wheel-aura { display: none !important; }
.wo-camera-world { scale: 1 !important; }
.wo-camera-world.is-airborne { scale: 1 !important; }
.wo-stage.is-airborne::after { display: none !important; }
.wo-route-point { will-change: transform; }
.wo-flying-wheel {
    filter: drop-shadow(0 6px 7px rgba(42,39,33,.34)) !important;
}

/* Match Mine Slot's compact, individually framed wager controls. */
@media (min-width: 900px) {
    .wheelout-root .wo-bottom {
        left: 50%;
        right: auto;
        bottom: calc(clamp(22px, 3.5vh, 40px) - 5px);
        width: min(684px, 72%, calc(100% - 48px));
        height: auto;
        min-height: 60px;
        grid-template-columns: minmax(126px,1.12fr) minmax(104px,.95fr) minmax(110px,1fr) minmax(169px,1.45fr) 60px 60px;
        grid-template-rows: 60px;
        gap: 4px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        transform: translateX(-50%);
    }
    .wheelout-root .wo-control-card {
        min-height: 60px;
        padding: 8px 11px;
        border: 2px solid rgba(208,221,226,.28);
        border-radius: 10px;
        background: rgba(35,37,39,.88);
        box-shadow: 2px 3px 0 rgba(34,37,34,.44);
        font-size: 12px;
    }
    .wheelout-root .wo-control-card > b { margin-top: 3px; font-size: 17px; }
    .wheelout-root .wo-balance { grid-column: 1; grid-row: 1; }
    .wheelout-root .wo-win { grid-column: 2; grid-row: 1; }
    .wheelout-root .wo-speed { grid-column: 3; grid-row: 1; }
    .wheelout-root .wo-speed > b { margin-right: 32px !important; font-size: 12px !important; }
    .wheelout-root .wo-bet {
        grid-column: 4;
        grid-row: 1;
        min-height: 60px;
        display: grid;
        grid-template-columns: 31px minmax(0,1fr) 31px;
        grid-template-rows: 1fr;
        gap: 4px;
        padding: 4px;
        border: 2px solid rgba(208,221,226,.28);
        border-radius: 10px;
        background: linear-gradient(145deg,rgba(43,41,56,.96),rgba(25,27,40,.96));
        box-shadow: 2px 3px 0 rgba(34,37,34,.44);
    }
    .wheelout-root .wo-bet > span {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
    }
    .wheelout-root .wo-bet-control,
    .wheelout-root .wo-bet-arrows { display: contents; }
    .wheelout-root .wo-bet-field {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        min-height: 35px;
        gap: 4px;
        padding: 0 5px;
        border: 1px solid rgba(208,221,226,.18);
        border-radius: 8px;
    }
    .wheelout-root .wo-bet-currency {
        width: 13px;
        height: 13px;
        border-radius: 0;
        background: url('/assets/branding/starqc-loader-star.png?v=1') center/contain no-repeat;
        font-size: 0;
    }
    .wheelout-root .wo-bet-field input {
        flex: 1 1 0;
        width: 0;
        min-width: 0;
        min-height: 35px;
        padding: 0;
        border: 0;
        background: transparent;
        font-size: 15px;
        text-align: center;
    }
    .wheelout-root .wo-bet-arrows button {
        width: 31px;
        min-width: 31px;
        min-height: 31px;
        height: 31px;
        grid-row: 1;
        padding: 0;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 10px;
        background: rgba(255,255,255,.07);
        font-size: 0;
    }
    .wheelout-root .wo-bet-arrows button::before {
        color: #fff;
        font: 900 14px/1 'Fredoka',system-ui,sans-serif;
    }
    .wheelout-root .wo-bet-arrows button[data-wo-minus] { grid-column: 1; }
    .wheelout-root .wo-bet-arrows button[data-wo-minus]::before { content: '−'; }
    .wheelout-root .wo-bet-arrows button[data-wo-plus] { grid-column: 3; }
    .wheelout-root .wo-bet-arrows button[data-wo-plus]::before { content: '+'; }
    .wheelout-root .wo-bet-arrows button:hover:not(:disabled) {
        border-color: rgba(211,50,211,.62);
        background: rgba(147,76,220,.2);
    }
    .wheelout-root .wo-spin {
        grid-column: 5;
        grid-row: 1;
        place-self: center;
        width: 60px;
        min-width: 60px;
        height: 60px;
        min-height: 60px;
        border: 2px solid rgba(208,221,226,.28);
        border-radius: 10px;
        background: linear-gradient(145deg,#29ce83,#139355);
        box-shadow: 2px 3px 0 rgba(34,37,34,.44);
        font-size: 26px;
    }
    .wheelout-root .wo-spin > svg { width: 26px; height: 26px; }
    .wheelout-root .wo-auto {
        grid-column: 6;
        grid-row: 1;
        width: 60px;
        min-width: 60px;
        height: 60px;
        min-height: 60px;
        border: 2px solid rgba(208,221,226,.28);
        border-radius: 10px;
        background: rgba(34,39,40,.9);
        box-shadow: 2px 3px 0 rgba(34,37,34,.44);
        font-size: 16px;
    }
    .wheelout-root .wo-auto > svg { width: 27px; height: 27px; }
}

@media (min-width: 701px) and (max-width: 899px) {
    .wheelout-root .wo-bottom {
        left: 50%;
        right: auto;
        bottom: 3px;
        width: min(700px,calc(100% - 20px));
        height: auto;
        min-height: 43px;
        grid-template-columns: minmax(95px,1fr) minmax(95px,1fr) minmax(95px,1fr) minmax(140px,1.5fr) 42px 42px;
        grid-template-rows: 43px;
        gap: 3px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        transform: translateX(-50%);
    }
    .wheelout-root .wo-control-card { min-height: 43px; padding: 4px 6px; border-width: 1px; border-radius: 7px; font-size: 8px; }
    .wheelout-root .wo-control-card > b { margin-top: 2px; font-size: 12px; }
    .wheelout-root .wo-balance { grid-column: 1; grid-row: 1; }
    .wheelout-root .wo-win { grid-column: 2; grid-row: 1; }
    .wheelout-root .wo-speed { grid-column: 3; grid-row: 1; }
    .wheelout-root .wo-bet { grid-column: 4; grid-row: 1; min-height: 43px; padding: 3px; }
    .wheelout-root .wo-bet-field { min-height: 32px; gap: 3px; padding: 0 4px; }
    .wheelout-root .wo-bet-field input { min-height: 32px; font-size: 12px; }
    .wheelout-root .wo-bet-currency { width: 12px; height: 12px; }
    .wheelout-root .wo-bet-arrows button { width: 31px; min-width: 31px; height: 31px; min-height: 31px; }
    .wheelout-root .wo-spin,
    .wheelout-root .wo-auto { width: 42px; min-width: 42px; height: 42px; min-height: 42px; border-width: 1px; border-radius: 7px; }
    .wheelout-root .wo-spin { grid-column: 5; grid-row: 1; font-size: 20px; }
    .wheelout-root .wo-spin > svg,
    .wheelout-root .wo-auto > svg { width: 22px; height: 22px; }
    .wheelout-root .wo-auto { grid-column: 6; grid-row: 1; font-size: 12px; }
}

@media (max-width: 700px) {
    .wheelout-root .wo-bottom {
        left: 8px;
        right: 8px;
        bottom: 54px;
        width: auto;
        height: auto;
        min-height: 0;
        grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 42px;
        grid-template-rows: minmax(50px,auto) minmax(54px,auto);
        gap: 4px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        transform: none;
    }
    .wheelout-root .wo-control-card { min-height: 50px; padding: 5px 7px; border-width: 1px; border-radius: 7px; font-size: 9px; }
    .wheelout-root .wo-control-card > b { margin-top: 2px; font-size: 12px; }
    .wheelout-root .wo-balance { grid-column: 1; grid-row: 1; }
    .wheelout-root .wo-win { grid-column: 2; grid-row: 1; }
    .wheelout-root .wo-speed { grid-column: 3; grid-row: 1; }
    .wheelout-root .wo-bet {
        grid-column: 1 / 4;
        grid-row: 2;
        min-height: 54px;
        grid-template-columns: 42px minmax(0,1fr) 42px;
        gap: 4px;
        padding: 4px;
        border-width: 1px;
        border-radius: 7px;
    }
    .wheelout-root .wo-bet-field { min-height: 44px; gap: 4px; padding: 0 6px; }
    .wheelout-root .wo-bet-field input { min-height: 44px; font-size: 16px; }
    .wheelout-root .wo-bet-currency { width: 15px; height: 15px; }
    .wheelout-root .wo-bet-arrows button { width: 42px; min-width: 42px; height: 42px; min-height: 42px; border-radius: 10px; }
    .wheelout-root .wo-bet-arrows button::before { font-size: 16px; }
    .wheelout-root .wo-spin,
    .wheelout-root .wo-auto { grid-row: auto; width: 42px; min-width: 42px; height: 42px; min-height: 42px; border-width: 1px; border-radius: 7px; }
    .wheelout-root .wo-spin { grid-column: 4; grid-row: 1; place-self: center; font-size: 18px; }
    .wheelout-root .wo-spin > svg,
    .wheelout-root .wo-auto > svg { width: 21px; height: 21px; }
    .wheelout-root .wo-auto { grid-column: 4; grid-row: 2; font-size: 12px; }
}