.ice-wg {
    position: absolute;
    inset: 0;
    z-index: 6;
    overflow: hidden;
    border-radius: inherit;
    transition: opacity .34s ease;

    --wg: #60a5fa;
    --wg-lite: #a9d0ff;
    --wg-deep: #2f6fe0;
    --wg-soft: rgba(96, 165, 250, .28);
}

.ice-wg--oranges {
    --wg: #fb923c;
    --wg-lite: #ffc98f;
    --wg-deep: #e2600f;
    --wg-soft: rgba(251, 146, 60, .3);
}

.ice-wg--reds {
    --wg: #f87171;
    --wg-lite: #ffb3a7;
    --wg-deep: #d8322c;
    --wg-soft: rgba(248, 113, 113, .32);
}

.ice-wg.is-out { opacity: 0; }

.ice-wg--full {
    position: fixed;
    inset: 0;
    z-index: 1040;
    border-radius: 0;
}

.ice-wg__veil {
    position: absolute;
    inset: 0;

    border-radius: inherit;

    background:
        linear-gradient(180deg, rgba(4, 12, 22, .5) 0%, rgba(4, 12, 22, 0) 34%),
        radial-gradient(60% 90% at 50% 105%, var(--wg-soft) 0%, transparent 70%),
        radial-gradient(120% 140% at 50% 100%, rgba(10, 24, 40, .84) 0%, rgba(6, 14, 24, .97) 100%);
    backdrop-filter: blur(5px);
    animation: wgVeil .3s ease both;
}

.ice-wg__brand {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2%;
    pointer-events: none;

    opacity: .18;
    animation: wgBrandIn .5s ease .1s both;
}

@keyframes wgBrandIn { from { opacity: 0 } to { opacity: .18 } }

.ice-wg__brand-mark {
    display: block;
    background: linear-gradient(150deg, #bfe0ff 0%, #6aa8ff 52%, #2f7bfb 100%);
    -webkit-mask: url(/assets/logo_mark.webp?v=1) center / contain no-repeat;
            mask: url(/assets/logo_mark.webp?v=1) center / contain no-repeat;
}

.ice-wg__brand .logo-name {
    line-height: 1;
    color: #ffffff;
    white-space: nowrap;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .ice-wg__brand .logo-x {
        background-image: linear-gradient(150deg, #bfe0ff 0%, #6aa8ff 52%, #2f7bfb 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.ice-wg__art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    animation: wgRise .4s cubic-bezier(.2, .9, .3, 1.1) .1s both;
}

.ice-wg__groove {
    fill: none;
    stroke: rgba(4, 12, 22, .55);
    stroke-width: calc(26px * var(--s, 1));
    stroke-linecap: round;
}

.ice-wg__rim {
    fill: none;
    stroke: rgba(148, 180, 220, .16);
    stroke-width: calc(1.5px * var(--s, 1));
}

.ice-wg__track {
    fill: none;
    stroke: rgba(160, 192, 232, .2);
    stroke-width: calc(12px * var(--s, 1));
    stroke-linecap: round;
}

.ice-wg__fill {
    fill: none;

    stroke-width: calc(13px * var(--s, 1));
    stroke-linecap: round;
    filter: drop-shadow(0 0 12px var(--wg-soft));
}

.ice-wg__fill-hi {
    fill: none;
    stroke: var(--wg-lite);
    stroke-width: calc(3px * var(--s, 1));
    stroke-linecap: round;
    opacity: .5;
}

.ice-wg__tick {
    stroke: rgba(148, 180, 220, .32);
    stroke-width: calc(2px * var(--s, 1));
    stroke-linecap: round;
}

.ice-wg__tick--big {
    stroke: rgba(203, 224, 245, .72);
    stroke-width: calc(3.5px * var(--s, 1));
}

.ice-wg__tick-num {
    fill: rgba(186, 209, 233, .78);
    font-size: calc(15px * var(--s, 1));
    font-weight: 700;
    text-anchor: middle;
    font-variant-numeric: tabular-nums;
    paint-order: stroke;
    stroke: rgba(6, 14, 24, .6);
    stroke-width: calc(4px * var(--s, 1));
    stroke-linejoin: round;
}

.ice-wg__headwrap {
    transform-box: view-box;

    transform-origin: var(--cx, 450px) var(--cy, 210px);
}

.ice-wg__halo {
    fill: var(--wg);
    opacity: .22;
}

.ice-wg__head {
    fill: #ffffff;
    stroke: var(--wg);
    stroke-width: calc(5px * var(--s, 1));
    filter: drop-shadow(0 0 9px var(--wg));
}

.ice-wg__pin { fill: var(--wg); }

.ice-wg__plate {
    animation:
        wgPan .32s cubic-bezier(.2, .9, .3, 1.15) .14s both,
        wgSettle .44s cubic-bezier(.25, .8, .3, 1.1) .5s forwards;
}

.ice-wg__glow { pointer-events: none; }

.ice-wg__fish {
    transform-box: fill-box;
    transform-origin: 50% 88%;
    animation: wgDrop .2s cubic-bezier(.5, .05, .75, .3) .3s both;
}

.ice-wg__shadow {
    fill: rgba(4, 12, 22, .45);
    transform-box: fill-box;
    transform-origin: center;
    animation: wgShadow .2s cubic-bezier(.5, .05, .75, .3) .3s both;
}

.ice-wg__pan-art { filter: drop-shadow(0 5px 7px rgba(4, 12, 22, .55)); }
.ice-wg__catch   { filter: drop-shadow(0 4px 6px rgba(4, 12, 22, .5)); }

.ice-wg__pan { filter: drop-shadow(0 4px 6px rgba(4, 12, 22, .55)); }

.ice-wg__pan-lip {
    fill: none;
    stroke: rgba(232, 243, 255, .55);
    stroke-width: 2;
    stroke-linecap: round;
}

.ice-wg__post {
    fill: rgba(41, 56, 74, .95);
    stroke: rgba(148, 180, 220, .16);
    stroke-width: 1.5;
}

.ice-wg__body {
    stroke: rgba(6, 16, 28, .45);
    stroke-width: 2;
    stroke-linejoin: round;
}

.ice-wg__fin { opacity: .82; }

.ice-wg__fin--front { opacity: .6; }

.ice-wg__gill {
    fill: none;
    stroke: rgba(6, 16, 28, .3);
    stroke-width: 2;
    stroke-linecap: round;
}

.ice-wg__eye { fill: #0b1a2c; }
.ice-wg__glint { fill: rgba(255, 255, 255, .9); }

.ice-wg__tail {
    transform-box: fill-box;
    transform-origin: 100% 50%;
    animation: wgTail .85s cubic-bezier(.4, .1, .4, 1) .52s both;
}

.ice-wg__value {
    fill: #ffffff;
    font-weight: 900;
    letter-spacing: -.03em;
    text-anchor: middle;
    font-variant-numeric: tabular-nums;
    paint-order: stroke;
    stroke: rgba(6, 14, 24, .6);
    stroke-width: calc(8px * var(--s, 1));
    stroke-linejoin: round;
    animation: wgValue .3s ease .42s both;
}

.ice-wg__chip { animation: wgValue .3s ease .2s both; }

.ice-wg__chip rect {
    fill: rgba(8, 20, 34, .55);
    stroke: var(--wg);
    stroke-width: calc(1.5px * var(--s, 1));
    opacity: .9;
}

.ice-wg__chip text {
    fill: var(--wg);

    font-size: calc(13px * var(--s, 1));
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-anchor: middle;
}

.ice-wg__unit {

    fill: rgba(182, 206, 232, .72);
    font-size: calc(13px * var(--s, 1));
    font-weight: 600;
    letter-spacing: .1em;
    text-anchor: middle;
    animation: wgValue .3s ease .4s both;
}

.ice-wg.is-done .ice-wg__value { animation: wgPop .34s cubic-bezier(.2, .9, .3, 1.6) both; }

@keyframes wgVeil { from { opacity: 0 } to { opacity: 1 } }

@keyframes wgRise {
    from { transform: translateY(16px); opacity: 0 }
    to   { transform: translateY(0);    opacity: 1 }
}

@keyframes wgPan {
    from { transform: translateY(34px); opacity: 0 }
    to   { transform: translateY(0);    opacity: 1 }
}

@keyframes wgSettle {
    0%   { transform: translateY(0) }
    18%  { transform: translateY(6px) }
    46%  { transform: translateY(-2.5px) }
    72%  { transform: translateY(1px) }
    100% { transform: translateY(0) }
}

@keyframes wgDrop {
    from { transform: translateY(-38px) rotate(-6deg); opacity: 0 }
    to   { transform: translateY(0)     rotate(0deg);  opacity: 1 }
}

@keyframes wgShadow {
    from { transform: scaleX(1.5) scaleY(.7); opacity: 0 }
    to   { transform: scaleX(1)   scaleY(1);  opacity: 1 }
}

@keyframes wgTail {
    0%   { transform: rotate(0deg) }
    18%  { transform: rotate(-11deg) }
    42%  { transform: rotate(8deg) }
    66%  { transform: rotate(-4deg) }
    85%  { transform: rotate(2deg) }
    100% { transform: rotate(0deg) }
}

@keyframes wgValue { from { opacity: 0 } to { opacity: 1 } }

@keyframes wgPop {
    0%   { transform: scale(1) }
    45%  { transform: scale(1.07) }
    100% { transform: scale(1) }
}

.ice-wg__value {
    transform-box: fill-box;
    transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
    .ice-wg *,
    .ice-wg *::before,
    .ice-wg *::after {
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
    }
}