@property --ev-room {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

@layer layout {
  .stage[data-event] {
    padding-top: 4px;
  }

  .stage[data-event='live'] {
    --event-h: clamp(66px, 8.4vh, 92px);
  }

  .stage[data-event='waiting'] {
    --event-h: clamp(60px, 7.4vh, 84px);
  }

  .stage[data-event] .cabinet {
    --ev-room: calc(100cqw - 2 * var(--stage-shift, 0px));
  }

  @media (orientation: portrait) and (max-aspect-ratio: 4/5) {
    .stage[data-event='live'] {
      --event-h: clamp(66px, 6.6vh, 92px);
    }

    .stage[data-event='waiting'] {
      --event-h: clamp(60px, 6vh, 84px);
    }
  }

  @media (max-height: 540px) and (orientation: landscape) {
    .stage[data-event] {
      padding-top: 2px;
    }

    .stage[data-event='live'] {
      --event-h: 50px;
    }

    .stage[data-event='waiting'] {
      --event-h: 46px;
    }
  }
}

@layer components {
  .ev {
    --ev-gap: max(8px, calc(var(--event-h, 66px) * 0.14));
    --ev-top: 6px;
    --bh: calc(var(--event-h, 66px) - var(--ev-gap) - var(--ev-top));
    --tone: #ffd44a;
    --tone-rgb: 255, 212, 74;
    --tone-deep: #6b3c00;
    position: absolute;
    left: calc(50% + var(--bh) * 0.13);
    bottom: calc(100% + var(--ev-gap));
    z-index: 6;
    width: clamp(min(calc(var(--ev-room) - var(--bh) * 0.6 - 8px), 360px), calc(100% - var(--bh) * 0.6), calc(var(--bh) * 13.5));
    height: var(--bh);
    container: evbar / inline-size;
    transform: translateX(-50%);
    font-size: calc(var(--bh) * 0.3);
    animation: ev-in 0.6s var(--ease-spring) both;
  }

  .ev__card[data-tone='cyan'] {
    --tone: #5de9ff;
    --tone-rgb: 93, 233, 255;
    --tone-deep: #073a66;
  }

  .ev__card[data-tone='crimson'] {
    --tone: #ff5a6e;
    --tone-rgb: 255, 90, 110;
    --tone-deep: #5a0012;
  }

  .ev__card[data-tone='violet'] {
    --tone: #b28bff;
    --tone-rgb: 178, 139, 255;
    --tone-deep: #2b0f66;
  }

  .ev__bar {
    position: relative;
    display: grid;
    grid-template-columns: calc(var(--bh) * 0.96) minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: calc(var(--bh) * 0.2);
    width: 100%;
    height: 100%;
    padding: 0 calc(var(--bh) * 0.2) 0 0;
    border-radius: 999px;
    text-align: left;
    color: #fff;
    background:
      radial-gradient(120% 140% at 12% 0%, rgba(var(--tone-rgb), 0.28), transparent 55%),
      linear-gradient(180deg, #2a1650 0%, #140a2c 55%, #0a0618 100%);
    box-shadow:
      0 0 0 2px #1a0c02,
      0 0 0 4px #f0b534,
      0 0 0 5.5px #1a0c02,
      0 0 18px rgba(var(--tone-rgb), 0.45),
      0 8px 18px rgba(0, 0, 0, 0.5),
      inset 0 2px 0 rgba(255, 255, 255, 0.16);
    transition: filter 0.2s ease, transform 0.2s var(--ease-spring);
  }

  .ev__bar:hover {
    filter: brightness(1.08);
  }

  .ev__bar:active {
    transform: scale(0.985);
  }

  .ev__bar:focus-visible {
    outline: 3px solid var(--tone);
    outline-offset: 5px;
  }

  .ev__medal {
    position: relative;
    display: grid;
    place-items: center;
    width: calc(var(--bh) * 1.22);
    aspect-ratio: 1;
    margin-left: calc(var(--bh) * -0.26);
    border-radius: 50%;
    background:
      radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 50%),
      radial-gradient(circle at 50% 62%, rgba(var(--tone-rgb), 0.95), var(--tone-deep) 82%);
    box-shadow:
      0 0 0 2px #1a0c02,
      0 0 0 4.5px #ffe07a,
      0 0 0 6px #1a0c02,
      0 0 22px rgba(var(--tone-rgb), 0.8),
      0 6px 12px rgba(0, 0, 0, 0.55);
    isolation: isolate;
  }

  .ev__rays {
    position: absolute;
    inset: -30%;
    z-index: -1;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(var(--tone-rgb), 0.55) 0deg 8deg, transparent 8deg 24deg);
    -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
    mask-image: radial-gradient(circle, #000 30%, transparent 70%);
    animation: ev-spin 9s linear infinite;
    pointer-events: none;
  }

  .ev__icon {
    width: 76%;
    height: 76%;
    object-fit: contain;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5));
    animation: ev-bob 2.4s ease-in-out infinite;
  }

  .ev__medal.is-hit {
    animation: ev-hit 0.42s var(--ease-spring);
  }

  .ev__medal.is-mystery {
    background:
      radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 50%),
      radial-gradient(circle at 50% 62%, #8a5cff, #2b0f66 82%);
  }

  .ev__q {
    font-family: 'Luckiest Guy', var(--font);
    font-weight: 400;
    font-synthesis: none;
    font-size: calc(var(--bh) * 0.72);
    line-height: 1;
    padding-top: 0.12em;
    color: #fff4c4;
    text-shadow: 0 3px 0 #3b1a00, 0 0 12px rgba(255, 212, 74, 0.8);
    animation: ev-bob 2.4s ease-in-out infinite;
  }

  .ev__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'name clock'
      'track track';
    align-content: center;
    align-items: center;
    column-gap: calc(var(--bh) * 0.16);
    row-gap: calc(var(--bh) * 0.06);
    min-width: 0;
  }

  .ev__head {
    display: contents;
  }

  .ev__name {
    grid-area: name;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Luckiest Guy', var(--font);
    font-weight: 400;
    font-synthesis: none;
    font-size: max(13px, calc(var(--bh) * 0.33));
    letter-spacing: 0.05em;
    line-height: 1.1;
    padding-top: 0.12em;
    text-transform: uppercase;
    color: #fff4c4;
    text-shadow: 0 2px 0 #3b1a00, 0 0 10px rgba(var(--tone-rgb), 0.7);
  }

  .ev__tag {
    grid-area: tag;
    justify-self: end;
    padding: 0.2em 0.65em;
    border-radius: 999px;
    font-size: max(10px, calc(var(--bh) * 0.19));
    font-weight: 900;
    letter-spacing: 0.12em;
    line-height: 1.2;
    white-space: nowrap;
    color: #2a1500;
    background: linear-gradient(180deg, #fff1b8, #f0b534);
  }

  .ev__clock {
    grid-area: clock;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.14em 0.6em 0.14em 0.42em;
    border-radius: 999px;
    font-size: max(12.5px, calc(var(--bh) * 0.28));
    line-height: 1.15;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: inset 0 0 0 1.5px rgba(var(--tone-rgb), 0.65);
  }

  .ev__clock i {
    position: relative;
    flex: none;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 0.13em solid var(--tone);
  }

  .ev__clock i::after {
    content: '';
    position: absolute;
    left: calc(50% - 0.06em);
    top: 12%;
    width: 0.12em;
    height: 40%;
    background: var(--tone);
    transform-origin: 50% 100%;
    animation: ev-spin 4s steps(12) infinite;
  }

  .ev__digits {
    font-weight: 900;
    letter-spacing: 0.03em;
    color: #fff;
    text-shadow: 0 1px 0 #000;
  }

  .ev__short,
  .ev__when {
    display: none;
  }

  .ev__card[data-urgent='true'] .ev__clock .ev__digits {
    color: #ff8a98;
    animation: ev-blink 1s ease-in-out infinite;
  }

  .ev__track {
    grid-area: track;
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    height: max(18px, calc(var(--bh) * 0.36));
    border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(180deg, #06030c, #1a1030);
    box-shadow:
      inset 0 2px 4px rgba(0, 0, 0, 0.8),
      0 0 0 1.5px rgba(255, 236, 190, 0.28);
  }

  .ev__fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    translate: calc(max(var(--p, 0) * 100%, var(--bh) * 0.36) - 100%) 0;
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.2) 100%),
      linear-gradient(90deg, color-mix(in srgb, var(--tone) 55%, #fff), var(--tone) 55%, color-mix(in srgb, var(--tone) 70%, #ff8a00));
    box-shadow: 0 0 12px rgba(var(--tone-rgb), 0.8);
    transition: translate 0.18s linear;
    overflow: hidden;
  }

  .ev__stripes {
    position: absolute;
    inset: 0 0 0 -36px;
    background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.28) 0 8px, rgba(255, 255, 255, 0) 8px 18px);
    background-size: 36px 100%;
    animation: ev-stripes 1.1s linear infinite;
  }

  .ev__head-glow {
    position: absolute;
    right: 0;
    top: -30%;
    bottom: -30%;
    width: calc(var(--bh) * 0.5);
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
    filter: blur(2px);
  }

  .ev__count {
    position: relative;
    z-index: 1;
    padding: 0 0.6em;
    font-size: max(12px, calc(var(--bh) * 0.25));
    font-weight: 900;
    letter-spacing: 0.03em;
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 1px 0 #000, 0 0 4px #000, 0 0 8px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
  }

  .ev__prize,
  .ev__jackpot {
    position: relative;
    display: grid;
    place-items: center;
    width: calc(var(--bh) * 0.9);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
      radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 55%),
      radial-gradient(circle at 50% 62%, #3b2468, #110826 80%);
    box-shadow:
      0 0 0 1.5px #1a0c02,
      0 0 0 3px rgba(var(--tone-rgb), 0.85),
      0 0 12px rgba(var(--tone-rgb), 0.45);
  }

  .ev__prize img,
  .ev__jackpot img {
    width: 72%;
    height: 72%;
    object-fit: contain;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
  }

  .ev__step {
    position: absolute;
    bottom: calc(var(--bh) * -0.13);
    left: 50%;
    transform: translateX(-50%);
    padding: 0.06em 0.5em;
    border-radius: 999px;
    font-size: max(10.5px, calc(var(--bh) * 0.2));
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
    color: #2a1500;
    background: linear-gradient(180deg, #fff1b8, #f0b534);
    box-shadow: 0 0 0 1.5px #2a1500;
  }

  .ev__card[data-next='jackpot'] .ev__prize {
    box-shadow:
      0 0 0 1.5px #1a0c02,
      0 0 0 3px #ffe07a,
      0 0 18px rgba(255, 212, 74, 0.9);
    animation: ev-pulse 1.2s ease-in-out infinite;
  }

  .ev__jackpot {
    width: calc(var(--bh) * 0.98);
    background:
      radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 55%),
      radial-gradient(circle at 50% 62%, #f7b832, #6b3c00 85%);
    box-shadow:
      0 0 0 1.5px #1a0c02,
      0 0 0 3px #fff1b8,
      0 0 16px rgba(255, 212, 74, 0.85);
  }

  .ev__jackpot i {
    position: absolute;
    top: calc(var(--bh) * -0.14);
    left: 50%;
    transform: translateX(-50%);
    padding: 0.06em 0.45em;
    border-radius: 999px;
    font-style: normal;
    font-size: max(9.5px, calc(var(--bh) * 0.17));
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1.2;
    color: #fff;
    background: linear-gradient(180deg, #ff5a6e, #b0102a);
    box-shadow: 0 0 0 1.5px #2a0006;
    white-space: nowrap;
  }

  .ev__card[data-state='waiting'] .ev__bar {
    grid-template-columns: calc(var(--bh) * 0.96) minmax(0, 1fr) auto;
  }

  .ev__card[data-state='waiting'] .ev__body {
    grid-template-areas:
      'name tag'
      'soon soon';
  }

  .ev__soon {
    grid-area: soon;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: max(11px, calc(var(--bh) * 0.24));
    font-weight: 700;
    line-height: 1.2;
    color: rgba(255, 244, 222, 0.82);
  }

  .ev__timer {
    display: grid;
    justify-items: end;
    row-gap: 0.1em;
    line-height: 1.05;
    padding-right: 0.3em;
  }

  .ev__timer i {
    font-style: normal;
    font-size: max(10px, calc(var(--bh) * 0.19));
    font-weight: 900;
    letter-spacing: 0.14em;
    color: var(--gold);
    text-shadow: 0 1px 0 #000;
  }

  .ev__timer .ev__digits {
    font-family: 'Tilt Neon', var(--font);
    font-weight: 400;
    font-size: max(15px, calc(var(--bh) * 0.36));
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: #fff;
    text-shadow: 0 0 1px #fff, 0 0 6px #b28bff, 0 0 14px #b28bff;
  }

  .ev__card[data-eligible='false'] .ev__bar {
    filter: saturate(0.55) brightness(0.85);
  }

  .ev__plus {
    position: absolute;
    left: calc(var(--bh) * 0.35);
    top: 50%;
    z-index: 3;
    display: grid;
    justify-items: center;
    font-family: 'Luckiest Guy', var(--font);
    font-weight: 400;
    font-synthesis: none;
    font-size: max(20px, calc(var(--bh) * 0.46));
    line-height: 1;
    color: #fff4c4;
    -webkit-text-stroke: 0.08em #3b1a00;
    paint-order: stroke fill;
    text-shadow: 0 0.08em 0 #3b1a00, 0 0 0.5em rgba(var(--tone-rgb), 0.9);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
  }

  .ev__plus small {
    font-family: var(--font);
    font-size: 0.46em;
    font-weight: 900;
    letter-spacing: 0.08em;
    -webkit-text-stroke: 0;
    text-shadow: 0 1px 0 #000, 0 0 4px #000;
    color: var(--tone);
  }

  .ev__plus.is-on {
    animation: ev-plus 1.2s var(--ease-out) forwards;
  }

  .ev__card.is-milestone .ev__bar {
    animation: ev-flash 0.8s ease-out;
  }

  @container evbar (max-width: 499px) {
    .ev__jackpot,
    .ev__tag,
    .ev__blurb {
      display: none;
    }

    .ev__when {
      display: inline;
    }

    .ev__bar {
      grid-template-columns: calc(var(--bh) * 0.96) minmax(0, 1fr) auto;
    }
  }

  @container evbar (max-width: 459px) {
    .ev__body {
      grid-template-areas:
        'name name'
        'track clock';
    }

    .ev__long {
      display: none;
    }

    .ev__short {
      display: inline;
    }
  }

  @container evbar (max-width: 300px) {
    .ev__card[data-state='live'] .ev__name {
      display: none;
    }

    .ev__card[data-state='live'] .ev__body {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        'clock'
        'track';
    }

    .ev__card[data-state='live'] .ev__clock {
      justify-self: start;
    }
  }

  @media (max-height: 540px) and (orientation: landscape) {
    .ev {
      --ev-gap: 7px;
      --ev-top: 2px;
    }

    .ev__card[data-state='live'] .ev__body {
      grid-template-areas: 'track clock';
    }

    .ev__card[data-state='live'] .ev__name,
    .ev__soon,
    .ev__tag {
      display: none;
    }

    .ev__card[data-state='live'] .ev__track {
      height: calc(var(--bh) * 0.6);
    }

    .ev__card[data-state='waiting'] .ev__body {
      grid-template-areas: 'name';
    }
  }
}

@layer overlays {
  .panel[data-panel='event'] .panel__head {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }

  .evp-headclock {
    display: grid;
    justify-items: end;
    row-gap: 2px;
    padding: 5px 12px 6px;
    border-radius: 13px;
    line-height: 1.05;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.45);
    box-shadow: inset 0 0 0 1.5px rgba(255, 212, 74, 0.55);
    animation: evm-pop 0.3s var(--ease-spring);
  }

  .evp-headclock[hidden] {
    display: none;
  }

  .evp-headclock i {
    font-style: normal;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.14em;
    color: var(--gold);
  }

  .evp-headclock .ev__digits {
    font-size: 17px;
  }

  @media (max-width: 460px) {
    .evp-headclock {
      padding: 4px 10px 5px;
    }

    .evp-headclock .ev__long {
      display: none;
    }

    .evp-headclock .ev__short {
      display: inline;
    }
  }

  @media (max-width: 360px) {
    .panel[data-panel='event'] .panel__head {
      grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .panel[data-panel='event'] .panel__icon {
      display: none;
    }
  }

  :root:has(.overlay-root > .evj) .announcer {
    visibility: hidden;
  }

  .ev-fly {
    position: fixed;
    z-index: 30;
    width: calc(64px * var(--s, 1));
    height: calc(64px * var(--s, 1));
    transform: translate(-50%, -50%);
    pointer-events: none;
    filter: drop-shadow(0 0 10px rgba(255, 220, 120, 0.9)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
  }

  .ev-fly img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .ev-fly--chip {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 4px;
    width: auto;
    height: 44px;
    padding: 4px 12px 4px 6px;
    border-radius: 999px;
    background: linear-gradient(180deg, #3b2468, #140a2c);
    box-shadow: 0 0 0 2px #1a0c02, 0 0 0 3.5px #ff7ae0, 0 0 14px rgba(255, 122, 224, 0.7);
  }

  .ev-fly--chip img {
    width: 34px;
    height: 34px;
  }

  .ev-fly--chip b {
    font-family: 'Luckiest Guy', var(--font);
    font-weight: 400;
    font-size: 22px;
    color: #fff4c4;
    text-shadow: 0 2px 0 #3b1a00;
  }

  .evm {
    position: fixed;
    z-index: 26;
    transform: translate(-50%, 0) scale(0.7);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.45s var(--ease-spring), opacity 0.25s ease;
  }

  .evm.is-in {
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
  }

  .evm.is-leaving {
    transform: translate(-50%, -30px) scale(0.85);
    opacity: 0;
    transition-duration: 0.35s;
  }

  .evm__card {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 14px 20px 16px;
    border-radius: 22px;
    background:
      radial-gradient(120% 80% at 50% 0%, rgba(255, 212, 74, 0.25), transparent 65%),
      linear-gradient(180deg, #2a1650, #0c0718);
    box-shadow:
      0 0 0 2px #1a0c02,
      0 0 0 5px #f0b534,
      0 0 0 6.5px #1a0c02,
      0 0 30px rgba(255, 212, 74, 0.55),
      0 18px 40px rgba(0, 0, 0, 0.6);
  }

  .evm .rb-kicker {
    --rbk-fs: 11px;
  }

  .evm__ribbon {
    --rb-fs: 22px;
    font-family: 'Luckiest Guy', var(--font);
    font-weight: 400;
    font-synthesis: none;
  }

  .evm__loot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 14px;
  }

  .evm__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 0 0 1.5px rgba(255, 212, 74, 0.5);
    animation: evm-pop 0.5s var(--ease-spring) both;
  }

  .evm__item:nth-child(2) {
    animation-delay: 0.12s;
  }

  .evm__item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
  }

  .evm__item b {
    font-size: 15px;
    font-weight: 900;
    color: #fff4c4;
    white-space: nowrap;
  }

  .evm--batch .evm__card {
    width: min(540px, calc(100vw - 32px));
  }

  .evm--batch .evm__loot {
    gap: 6px 8px;
  }

  .evm--batch .evm__item {
    padding: 3px 10px 3px 3px;
    animation-delay: calc(var(--i, 0) * 0.05s);
  }

  .evm--batch .evm__item img {
    width: 30px;
    height: 30px;
  }

  .evm--batch .evm__item b {
    font-size: 13px;
  }

  .evj {
    position: fixed;
    inset: 0;
    z-index: 28;
    display: grid;
    place-items: center;
    overflow: hidden;
    pointer-events: auto;
    cursor: var(--cursor-hand, pointer);
  }

  .evj__backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(70% 60% at 50% 50%, rgba(80, 30, 120, 0.55), rgba(3, 1, 8, 0.9));
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .evj.is-in .evj__backdrop {
    opacity: 1;
  }

  .evj__rays {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--ray);
    height: var(--ray);
    margin: calc(var(--ray) / -2) 0 0 calc(var(--ray) / -2);
    background: repeating-conic-gradient(from 0deg, rgba(255, 212, 74, 0.22) 0deg 7deg, transparent 7deg 18deg);
    -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 60%);
    mask-image: radial-gradient(circle, #000 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
    animation: ev-spin 26s linear infinite;
    pointer-events: none;
  }

  .evj.is-in .evj__rays {
    opacity: 1;
  }

  .evj__card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: clamp(8px, 1.6vh, 16px);
    padding: 0 16px;
    text-align: center;
    transform: scale(0.6);
    opacity: 0;
    transition: transform 0.6s var(--ease-spring), opacity 0.3s ease;
  }

  .evj.is-in .evj__card {
    transform: none;
    opacity: 1;
  }

  .evj.is-leaving .evj__card {
    transform: scale(0.9) translateY(-20px);
    opacity: 0;
    transition-duration: 0.4s;
  }

  .evj.is-leaving .evj__backdrop,
  .evj.is-leaving .evj__rays {
    opacity: 0;
  }

  .evj__art {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(150px, 30vmin, 260px);
    aspect-ratio: 1;
    animation: ev-bob 2.2s ease-in-out infinite;
  }

  .evj__art img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6));
  }

  .evj__glow {
    position: absolute;
    inset: -30%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 230, 140, 0.85), rgba(255, 180, 40, 0.3) 40%, transparent 70%);
    animation: ev-pulse 1.4s ease-in-out infinite;
  }

  .evj__ribbon {
    --rb-fs: clamp(26px, 5vmin, 44px);
    font-family: 'Luckiest Guy', var(--font);
    font-weight: 400;
    font-synthesis: none;
  }

  .evj__value {
    position: relative;
    font-family: 'Luckiest Guy', var(--font);
    font-weight: 400;
    font-synthesis: none;
    font-size: clamp(34px, 7vmin, 64px);
    line-height: 1;
    letter-spacing: 0.04em;
    color: #c47800;
    -webkit-text-stroke: 0.08em #2a1200;
    paint-order: stroke fill;
    text-shadow: 0 0.06em 0 #c47800, 0 0.11em 0 #6b3600, 0 0.16em 0 #2a1200, 0 0.26em 0.3em rgba(0, 0, 0, 0.6);
  }

  .evj__value::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    color: transparent;
    -webkit-text-stroke: 0;
    text-shadow: none;
    background: linear-gradient(180deg, #fffbe0 10%, #ffe36e 44%, #f5a623 80%, #ffe36e 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }

  .evj .rb-kicker {
    --rbk-fs: clamp(10px, 2.9vw, 13px);
    max-width: calc(100vw - 36px);
    white-space: normal;
    text-align: center;
    letter-spacing: 0.16em;
  }

  .evj__tap {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.24em;
    color: var(--text-dim);
    animation: ev-blink 1.4s ease-in-out infinite;
  }
}

@layer components {
  .evp > .p-note {
    margin-top: 14px;
  }

  .evp-hero {
    --tone: #ffd44a;
    --tone-rgb: 255, 212, 74;
    position: relative;
    display: grid;
    justify-items: center;
    gap: 10px;
    min-height: min-content;
    padding: 18px 14px 16px;
    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
    background:
      radial-gradient(120% 80% at 50% 0%, rgba(var(--tone-rgb), 0.28), transparent 62%),
      linear-gradient(180deg, #25104c 0%, #0c0618 100%);
    box-shadow:
      inset 0 0 0 1.5px rgba(var(--tone-rgb), 0.55),
      0 0 0 2px #1a0c02,
      0 0 0 5px #f0b534,
      0 0 0 6.5px #1a0c02;
  }

  .evp-hero[data-tone='cyan'] {
    --tone: #5de9ff;
    --tone-rgb: 93, 233, 255;
  }

  .evp-hero[data-tone='crimson'] {
    --tone: #ff5a6e;
    --tone-rgb: 255, 90, 110;
  }

  .evp-hero[data-tone='violet'] {
    --tone: #b28bff;
    --tone-rgb: 178, 139, 255;
  }

  .evp-hero__rays {
    position: absolute;
    left: 50%;
    top: 26%;
    z-index: -1;
    width: 170%;
    aspect-ratio: 1;
    background: repeating-conic-gradient(from 0deg, rgba(var(--tone-rgb), 0.16) 0deg 7deg, transparent 7deg 20deg);
    -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 60%);
    mask-image: radial-gradient(circle, #000 0%, transparent 60%);
    transform: translate(-50%, -50%);
    animation: ev-spin-center 40s linear infinite;
  }

  .evp-hero__medal {
    display: grid;
    place-items: center;
    width: 86px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
      radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 50%),
      radial-gradient(circle at 50% 62%, rgba(var(--tone-rgb), 0.95), #1a0b3e 85%);
    box-shadow:
      0 0 0 2px #1a0c02,
      0 0 0 5px #ffe07a,
      0 0 0 6.5px #1a0c02,
      0 0 26px rgba(var(--tone-rgb), 0.8);
  }

  .evp-hero__medal img {
    width: 74%;
    height: 74%;
    object-fit: contain;
    animation: ev-bob 2.4s ease-in-out infinite;
  }

  .evp-hero .rb {
    --rb-fs: clamp(22px, 3.4vh, 32px);
    font-family: 'Luckiest Guy', var(--font);
    font-weight: 400;
    font-synthesis: none;
  }

  .evp-host {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 440px;
    margin: 4px auto 0;
    text-align: left;
  }

  .evp-host__face {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    padding: 4px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, #4a2a7a, #1a0b33 70%);
    box-shadow: 0 0 0 2px rgba(201, 162, 255, 0.75), 0 6px 16px rgba(0, 0, 0, 0.45);
    image-rendering: pixelated;
    animation: evp-host-float 3.6s ease-in-out infinite;
  }

  .evp-host__bubble {
    position: relative;
    margin: 0;
    padding: 8px 12px;
    border-radius: 14px;
    background: rgba(255, 250, 240, 0.95);
    color: #2a1540;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.35;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  }

  .evp-host__bubble::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 50%;
    width: 14px;
    height: 14px;
    background: rgba(255, 250, 240, 0.95);
    transform: translateY(-50%) rotate(45deg);
    border-radius: 3px;
  }

  .evp-host__bubble b {
    display: block;
    margin-bottom: 2px;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: #7a3fd0;
  }

  .evp-host__bubble span {
    position: relative;
  }

  @keyframes evp-host-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
  }

  .evp-hero__lead {
    max-width: 460px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-dim);
  }

  .evp-hero__scale {
    max-width: 480px;
    margin: 0;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--text-dim);
  }

  .evp-stat--scale b {
    color: #ffb4bd;
    text-shadow: 0 0 10px rgba(255, 90, 110, 0.6);
  }

  .evp-hero__warn {
    margin: 0;
    font-size: 12.5px;
    font-weight: 800;
    color: #ffb4bd;
  }

  .evp-hero__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .evp-stat,
  .evp-clock {
    display: grid;
    justify-items: center;
    min-width: 96px;
    padding: 6px 14px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 0 0 1.5px rgba(var(--tone-rgb), 0.45);
  }

  .evp-stat i,
  .evp-clock i {
    font-style: normal;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.16em;
    color: var(--text-faint);
  }

  .evp-stat b,
  .evp-clock b {
    font-size: 18px;
    font-weight: 900;
    color: #fff4c4;
  }

  .evp-clock b {
    font-family: 'Tilt Neon', var(--font);
    font-weight: 400;
    font-size: 24px;
    text-shadow: 0 0 1px #fff, 0 0 6px var(--tone), 0 0 14px var(--tone);
  }

  .evp-scores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 8px;
  }

  .evp-score {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 10px 8px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.3));
    box-shadow: inset 0 0 0 1.5px rgba(255, 236, 190, 0.14);
  }

  .evp-score__icons {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 34px;
    padding: 0 5px;
  }

  .evp-score__icons img {
    flex: none;
    width: 30px;
    max-width: none;
    height: 30px;
    margin: 0 -5px;
    object-fit: contain;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
  }

  .evp-score--wild .evp-score__icons img {
    width: 44px;
    height: 44px;
    margin: -6px 0 -4px;
  }

  .evp-score__pts {
    font-family: 'Luckiest Guy', var(--font);
    font-weight: 400;
    font-synthesis: none;
    font-size: 24px;
    line-height: 1;
    color: #ffe36e;
    text-shadow: 0 2px 0 #6b3600, 0 3px 0 #2a1200;
  }

  .evp-score i {
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-dim);
  }

  .evp-track {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .evp-mile {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 8px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.28));
    box-shadow: inset 0 0 0 1.5px rgba(255, 236, 190, 0.12);
  }

  .evp-mile__num {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 900;
    color: #2a1500;
    background: radial-gradient(circle at 50% 30%, #fff4c4, #f0b534 70%);
    box-shadow: 0 0 0 2px #2a1500;
  }

  .evp-mile__main {
    display: grid;
    gap: 6px;
    min-width: 0;
  }

  .evp-mile__need {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: var(--text-dim);
  }

  .evp-mile__loot {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .evp-mile__bar {
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
  }

  .evp-mile__bar i {
    display: block;
    width: calc(var(--p, 0) * 100%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #fff1b8, #f0b534);
  }

  .evp-mile__state {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    justify-self: end;
  }

  .evp-mile[data-state='done'] {
    opacity: 0.6;
  }

  .evp-mile[data-state='done'] .evp-mile__state {
    background: radial-gradient(circle at 50% 30%, #b6ffae, #2fbf3f 70%);
    box-shadow: 0 0 0 2px #0c3a12;
    -webkit-mask: none;
  }

  .evp-mile[data-state='done'] .evp-mile__state::after {
    content: '';
    display: block;
    width: 9px;
    height: 5px;
    margin: 8px auto 0;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-45deg);
  }

  .evp-mile[data-state='current'] {
    background:
      radial-gradient(100% 140% at 0% 50%, rgba(255, 212, 74, 0.22), transparent 60%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.3));
    box-shadow: inset 0 0 0 2px #f0b534, 0 0 16px rgba(255, 212, 74, 0.3);
  }

  .evp-mile[data-state='locked'] .evp-mile__state {
    background: url('../assets/ui/general/icons/lock.svg') center / 20px no-repeat;
    opacity: 0.6;
  }

  .evp-mile.is-jackpot {
    padding: 14px 14px 14px 10px;
    background:
      radial-gradient(120% 140% at 50% 0%, rgba(255, 212, 74, 0.35), transparent 60%),
      linear-gradient(180deg, #3a2200, #120a02);
    box-shadow:
      inset 0 0 0 2px #ffe07a,
      0 0 24px rgba(255, 212, 74, 0.45);
  }

  .evp-mile.is-jackpot .evp-mile__num {
    font-size: 18px;
    background: radial-gradient(circle at 50% 30%, #fff, #ffd44a 60%, #c47800);
  }

  .evp-mile__jackpot {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .evp-mile__jackpot img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
    animation: ev-bob 2.4s ease-in-out infinite;
  }

  .evp-mile__jackpot b {
    font-family: 'Luckiest Guy', var(--font);
    font-weight: 400;
    font-synthesis: none;
    font-size: 24px;
    letter-spacing: 0.04em;
    color: #ffe36e;
    text-shadow: 0 2px 0 #6b3600, 0 3px 0 #2a1200, 0 0 12px rgba(255, 212, 74, 0.6);
  }

  .evp-syms,
  .evp-jackpots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
  }

  .evp-sym,
  .evp-jp {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 12px 8px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.3));
    box-shadow: inset 0 0 0 1.5px rgba(255, 236, 190, 0.14);
  }

  .evp-sym img,
  .evp-jp img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
  }

  .evp-sym b,
  .evp-jp b {
    font-size: 13px;
    font-weight: 900;
    color: #fff4c4;
    text-align: center;
  }

  .evp-jp {
    background:
      radial-gradient(120% 100% at 50% 0%, rgba(255, 212, 74, 0.22), transparent 70%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.3));
    box-shadow: inset 0 0 0 1.5px rgba(255, 212, 74, 0.45);
  }

  @media (max-height: 540px) and (orientation: landscape) {
    .evp-hero {
      gap: 7px;
      padding: 10px 12px 12px;
    }

    .evp-hero__medal {
      display: none;
    }

    .evp-hero .rb {
      --rb-fs: 21px;
    }

    .evp-stat,
    .evp-clock {
      padding: 4px 12px 5px;
    }
  }
}

@layer fx {
  @keyframes ev-in {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(10px) scale(0.9);
    }

    to {
      opacity: 1;
      transform: translateX(-50%);
    }
  }

  @keyframes ev-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes ev-spin-center {
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  @keyframes ev-bob {
    0%,
    100% {
      transform: translateY(0) rotate(-4deg);
    }

    50% {
      transform: translateY(-6%) rotate(4deg);
    }
  }

  @keyframes ev-hit {
    0% {
      transform: scale(1);
    }

    35% {
      transform: scale(1.22);
    }

    100% {
      transform: scale(1);
    }
  }

  @keyframes ev-stripes {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(36px);
    }
  }

  @keyframes ev-pulse {
    0%,
    100% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.06);
    }
  }

  @keyframes ev-blink {
    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.45;
    }
  }

  @keyframes ev-plus {
    0% {
      opacity: 0;
      transform: translate(-50%, -30%) scale(0.5);
    }

    18% {
      opacity: 1;
      transform: translate(-50%, -120%) scale(1.2);
    }

    70% {
      opacity: 1;
      transform: translate(-50%, -150%) scale(1);
    }

    100% {
      opacity: 0;
      transform: translate(-50%, -190%) scale(0.9);
    }
  }

  @keyframes ev-flash {
    0% {
      filter: brightness(1);
    }

    25% {
      filter: brightness(1.8) saturate(1.3);
    }

    100% {
      filter: brightness(1);
    }
  }

  @keyframes evm-pop {
    from {
      opacity: 0;
      transform: scale(0.4);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }
}

@layer state {
  :root[data-lite='true'] .ev__rays,
  :root[data-lite='true'] .evj__rays {
    display: none;
  }

  :root[data-motion='reduced'] .ev,
  :root[data-motion='reduced'] .ev__rays,
  :root[data-motion='reduced'] .ev__icon,
  :root[data-motion='reduced'] .ev__q,
  :root[data-motion='reduced'] .ev__stripes,
  :root[data-motion='reduced'] .ev__clock i::after,
  :root[data-motion='reduced'] .ev__card[data-next='jackpot'] .ev__prize,
  :root[data-motion='reduced'] .evj__rays,
  :root[data-motion='reduced'] .evj__art,
  :root[data-motion='reduced'] .evj__glow,
  :root[data-motion='reduced'] .evp-hero__rays,
  :root[data-motion='reduced'] .evp-hero__medal img,
  :root[data-motion='reduced'] .evp-mile__jackpot img {
    animation: none;
  }
}

@layer components {
  .ev__card {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    translate: 0 10px;
    pointer-events: none;
    transition: opacity 0.3s ease, translate 0.42s var(--ease-spring), visibility 0s linear 0.42s;
  }

  .ev__card.is-on {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    pointer-events: auto;
    transition: opacity 0.3s ease, translate 0.42s var(--ease-spring), visibility 0s;
  }

  .ev__bar--mini {
    grid-template-columns: calc(var(--bh) * 0.96) minmax(0, 1fr) auto;
  }

  .ev__line {
    grid-area: track;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: max(11.5px, calc(var(--bh) * 0.25));
    font-weight: 800;
    line-height: 1.2;
    color: rgba(255, 244, 222, 0.92);
    text-shadow: 0 1px 0 #000;
  }

  .ev__play {
    display: grid;
    place-items: center;
    height: calc(var(--bh) * 0.62);
    min-height: 26px;
    padding: 0.16em 0.8em 0;
    border-radius: 12px;
    font-family: 'Luckiest Guy', var(--font);
    font-weight: 400;
    font-synthesis: none;
    font-size: max(14px, calc(var(--bh) * 0.3));
    line-height: 1;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: #ffffff;
    text-shadow: 0 2px 0 #04323d;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 48%),
      linear-gradient(180deg, #5de9ff, #0e8fac);
    box-shadow:
      0 0 0 1.5px #041015,
      0 0 0 3px rgba(233, 252, 255, 0.9),
      0 3px 0 3px #04323d,
      0 0 14px rgba(93, 233, 255, 0.6);
  }

  .ev__badge {
    display: grid;
    place-items: center;
    min-width: calc(var(--bh) * 0.9);
    height: calc(var(--bh) * 0.9);
    padding: 0.12em 0.42em 0;
    border-radius: 999px;
    font-family: 'Luckiest Guy', var(--font);
    font-weight: 400;
    font-synthesis: none;
    font-size: max(15px, calc(var(--bh) * 0.34));
    line-height: 1;
    white-space: nowrap;
    color: #fff4c4;
    text-shadow: 0 2px 0 #3b1a00;
    background:
      radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 55%),
      radial-gradient(circle at 50% 64%, var(--tone), var(--tone-deep) 88%);
    box-shadow:
      0 0 0 1.5px #1a0c02,
      0 0 0 3px rgba(255, 241, 184, 0.9),
      0 0 14px rgba(var(--tone-rgb), 0.6);
  }

  .ev__prize--gem img {
    width: 62%;
    height: 62%;
  }

  .ev__info {
    --info-size: max(22px, calc(var(--bh) * 0.4));
    position: absolute;
    right: calc(var(--bh) * -0.14);
    bottom: calc(var(--bh) * -0.28);
    z-index: 4;
  }

  .ev__dots {
    position: absolute;
    left: 50%;
    top: calc(100% + 2px);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 5px;
    translate: -50% 0;
  }

  .ev__dot {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 244, 222, 0.38);
    box-shadow: 0 0 0 1.5px rgba(26, 12, 2, 0.85);
    transition: width 0.25s var(--ease-spring), background-color 0.2s ease;
  }

  .ev__dot::after {
    content: '';
    position: absolute;
    inset: -8px -3px;
  }

  .ev__dot.is-on {
    width: 18px;
    background: var(--gold);
  }

  .evt-ladder {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .evt-rung {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 12px;
    padding: 8px 12px 8px 8px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1.5px rgba(255, 236, 190, 0.12);
    animation: evm-pop 0.4s var(--ease-spring) calc(var(--i, 0) * 0.05s) backwards;
  }

  .evt-rung[data-state='current'] {
    background: linear-gradient(90deg, rgba(255, 212, 74, 0.2), rgba(255, 212, 74, 0.04));
    box-shadow:
      inset 0 0 0 2px rgba(255, 212, 74, 0.75),
      0 0 18px rgba(255, 212, 74, 0.25);
  }

  .evt-rung[data-state='locked'] {
    opacity: 0.62;
  }

  .evt-rung__chest img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
  }

  .evt-rung[data-state='locked'] .evt-rung__chest img {
    filter: grayscale(0.7) brightness(0.72);
  }

  .evt-rung__main {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .evt-rung__chestname {
    font-family: 'Luckiest Guy', var(--font);
    font-weight: 400;
    font-synthesis: none;
    font-size: 17px;
    letter-spacing: 0.04em;
    padding-top: 0.1em;
    color: #fff4c4;
    text-shadow: 0 2px 0 #3b1a00;
  }

  .evt-rung__quest {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dim);
  }

  .evt-rung__bar {
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: #06030c;
    box-shadow: inset 0 1px 3px #000, 0 0 0 1px rgba(255, 236, 190, 0.2);
  }

  .evt-rung__bar i {
    display: block;
    height: 100%;
    width: calc(var(--p, 0) * 100%);
    min-width: 10px;
    border-radius: inherit;
    background: linear-gradient(90deg, #fff1a8, #ffd44a 55%, #f0a91d);
  }

  .evt-rung__count {
    font-size: 12px;
    font-weight: 900;
    color: var(--gold);
  }

  .evt-rung__state {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 900;
    color: #1a0c02;
  }

  .evt-rung[data-state='done'] .evt-rung__state {
    background: linear-gradient(180deg, #a6ff9a, #3cc24e);
    box-shadow: 0 0 0 2px #0d3a12;
  }

  .evt-rung[data-state='done'] .evt-rung__state::before {
    content: '\2713';
  }

  .evt-rung[data-state='current'] .evt-rung__state {
    background: linear-gradient(180deg, #fff1a8, #f0b534);
    box-shadow: 0 0 0 2px #3b1a00;
  }

  .evt-rung[data-state='current'] .evt-rung__state::before {
    content: '!';
  }

  .evt-rung[data-state='locked'] .evt-rung__state {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18);
  }

  .evt-meter {
    position: relative;
    display: grid;
    place-items: center;
    height: 32px;
    border-radius: 999px;
    overflow: hidden;
    background: #06030c;
    box-shadow:
      inset 0 2px 4px rgba(0, 0, 0, 0.8),
      0 0 0 1.5px rgba(93, 233, 255, 0.45);
  }

  .evt-meter__fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: calc(var(--p, 0) * 100%);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 45%),
      linear-gradient(90deg, #bff6ff, #5de9ff 60%, #1f8fff);
  }

  .evt-meter b {
    position: relative;
    font-size: 14px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 1px 2px #000, 0 0 6px #000;
  }

  .evt .p-row--center {
    margin-top: 12px;
  }

  @media (max-height: 540px) and (orientation: landscape) {
    .ev__dots {
      top: calc(100% + 1px);
      gap: 4px;
    }

    .ev__dot {
      width: 6px;
      height: 5px;
    }

    .ev__dot.is-on {
      width: 14px;
    }

    .ev__line {
      display: none;
    }

    .ev__card[data-state='live'] .ev__bar--mini .ev__body {
      grid-template-areas: 'name clock';
    }

    .ev__card[data-state='live'] .ev__bar--mini .ev__name {
      display: block;
    }
  }
}

@layer overlays {
  .evq {
    position: fixed;
    z-index: 26;
    translate: -50% 0;
    scale: 0.7;
    opacity: 0;
    pointer-events: auto;
    transition: scale 0.45s var(--ease-spring), opacity 0.25s ease, translate 0.35s ease;
  }

  .evq.is-in {
    scale: 1;
    opacity: 1;
  }

  .evq.is-leaving {
    translate: -50% -30px;
    scale: 0.9;
    opacity: 0;
  }

  .evq__card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 6px;
    width: min(320px, calc(100vw - 32px));
    padding: 16px 18px;
    border-radius: 24px;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
    background:
      radial-gradient(120% 70% at 50% 0%, rgba(255, 212, 74, 0.3), transparent 65%),
      linear-gradient(180deg, #2c1852, #0c0718);
    box-shadow:
      0 0 0 2px #1a0c02,
      0 0 0 5px #f0b534,
      0 0 0 6.5px #1a0c02,
      0 0 34px rgba(255, 212, 74, 0.55),
      0 18px 40px rgba(0, 0, 0, 0.6);
  }

  .evq__rays {
    position: absolute;
    left: 50%;
    top: 36%;
    z-index: -1;
    width: 150%;
    aspect-ratio: 1;
    translate: -50% -50%;
    background: repeating-conic-gradient(from 0deg, rgba(255, 212, 74, 0.2) 0deg 8deg, transparent 8deg 22deg);
    -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 62%);
    mask-image: radial-gradient(circle, #000 12%, transparent 62%);
    animation: ev-spin 14s linear infinite;
    pointer-events: none;
  }

  .evq .rb-kicker {
    --rbk-fs: 11px;
  }

  .evq__chest {
    position: relative;
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    animation: ev-bob 2.2s ease-in-out infinite;
  }

  .evq__chest img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.55));
  }

  .evq__glow {
    position: absolute;
    inset: -30%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 230, 140, 0.8), rgba(255, 180, 40, 0.25) 42%, transparent 68%);
  }

  .evq__ribbon {
    --rb-fs: 20px;
    font-family: 'Luckiest Guy', var(--font);
    font-weight: 400;
    font-synthesis: none;
  }

  .evq__quest {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dim);
  }

  .evq__buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
  }

  .evq__later {
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-dim);
  }
}

@layer state {
  .ev__card:not(.is-on) *,
  .ev__card:not(.is-on) *::after {
    animation-play-state: paused;
  }

  :root[data-lite='true'] .evq__rays {
    display: none;
  }

  :root[data-motion='reduced'] .ev__card,
  :root[data-motion='reduced'] .evq,
  :root[data-motion='reduced'] .evq__rays,
  :root[data-motion='reduced'] .evq__chest,
  :root[data-motion='reduced'] .evt-rung {
    animation: none;
    transition: none;
  }
}